Productivity Tools and Practices For Software Engineers and …

Everyone wants to be more productive without burning out. So, how do you get more done without working more hours? And how do you help the rest of your team improve without taking on the role of taskmaster? The answer is the use of effective tools. 

In this article, we’ll look at five effective tools software engineers and tech companies can use to speed up their development lifecycle without sacrificing quality. Design systems, code linters, code formatters, continuous integration, and IaaS/PaaS providers are all tools that allow software engineers to streamline mundane work and, in turn, prioritize building their products.

Design Systems

Palantir's Blueprint component library

A design system can be boiled down to a component library that is used to create a product out of reusable building blocks.

Although, in practice, it is much more than that! A design system also includes the design patterns, usage guidelines, documentation, ownership model, communication methods, product roadmap, and much more.

These building blocks might consist of components like avatars, badges, buttons, dropdowns, form inputs, icons, links, modals, progress indicators, and tooltips. Like Lego pieces, these components can be assembled to create all the pages and features that your app needs.

Design systems provide massive benefits that allow your organization’s UI to scale as the company and product grow.

  1. First, the design system helps you create a consistent UI since you’re using the same building block components throughout your app.
  2. Second, your designers and software engineers can develop faster since they don’t have to spend hours or days reinventing the wheel rebuilding things like modals. Instead, the design system can provide one generic modal that can be implemented everywhere.
  3. Third, using a shared set of components makes it much easier to roll out style changes throughout the app all at once. If your app’s button styles need to be changed, rather than tweaking every individual button in the app, you can just adjust the button styles in the design system and then watch the changes take effect everywhere else in the app too!
  4. Fourth, design systems allow you to focus on hard UX problems. Rather than spending time deciding how dropdowns and modals should work for every new feature your company develops, UX designers can instead focus on the experience as a whole to make sure each feature is sensible and user-friendly.

If you decide to build your own design system, be advised that they take a lot of work! Design systems are a product, not a side project. Otherwise, if you recognize that you don’t have the time or resources to build your own design system, there are plenty of good options like Google’s Material-UI, Adobe’s Spectrum, or Ant Design

Code Linters

ESLint example output

Code linters like ESLint for JavaScript do static analysis of your code. They help catch syntax errors and even best-practice issues automatically and can be directly included in your build process or git hooks. Code linters are handy because they automate the kinds of things humans are bad at but that machines are good at – no more searching for the missing curly brace on line 245!

ESLint is also highly configurable and has a vast ecosystem of plugins. You can install ESLint plugins like eslint-plugin-jsx-a11y to help catch accessibility violations in your app or eslint-plugin-react to help enforce React best practices. There are also presets you can use if you don’t want to pick and choose the various plugins yourself. One popular preset is the eslint-config-airbnb package that includes Airbnb’s recommended ESLint configuration options.

Code Formatters

Formatters like Prettier can format your JavaScript, HTML, CSS, and even markdown files. Similar to code linters, code formatters help automate what would otherwise be a painfully manual task.

No more spending time arguing about whether you should use spaces or tabs, semicolons or no semicolons, trailing commas or not – just set up your Prettier config and allow it to format your code. The formatter will maintain consistency and team standards throughout your repository for you. This also means no more spending time in code reviews saying things like “missing semicolon here” or “add a new line to the end of the file.” Prettier allows you to focus on the functionality and maintainability of the code itself.

Here’s my preferred Prettier configuration setup.

  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "jsxBracketSameLine": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css"

Using this Prettier config can take ugly, inconsistently formatted code like this:

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/.d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
    { greeted }
    { (silent)
      ? "."
      : "!"}



It turned into a beautiful code that looks like this!

function HelloWorld({
  greeting = 'hello',
  greeted = '"World"',
  silent = false,
}) {
  if (!greeting) {
    return null

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .replace(/.d+/gi, '')

  return (
      title={`You are visitor number ${num}`}
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      {greeting.endsWith(',') ? (
        ' '
      ) : (
        <span style={{ color: 'grey' }}>", "</span>
      {silent ? '.' : '!'}

Automated Tests and Continuous Integration

As an app grows in complexity and size, it becomes impossible for a single person to remember how everything works. It also becomes infeasible to manually test everything in the app, not to mention cost-prohibitive.

Unit tests, integration tests, and end-to-end (e2e) tests make sure your code does what you think it does, serve as documentation, and guard against future regressions. If you ever feel like writing tests is a pointless endeavor, remember – tests are for the future.

Continuous integration (CI) ensures that your master branch of code stays in a workable state (in theory). You can use a service like Travis CI, CircleCI, GitLab CI/CD, or Heroku CI to set up continuous integration for your repository. You can then configure your CI pipeline to run your linters and automated tests after each commit and also require that everything passes before code can be merged.

By having tests and running them often – both during local development and as part of the CI pipeline – you can save hours of time you’d otherwise spend manually testing the app.

IaaS and PaaS Providers

Both infrastructure as a service (IaaS) providers and platform as a service (PaaS) providers manage infrastructure for you so that you don’t have to. Common IaaS providers include Amazon Web Services, Google Cloud Platform, and Microsoft Azure. PaaS providers would be solutions like Heroku or Netlify.

For example, using a managed database like Amazon Relational Database Service (RDS) means you don’t have to worry about performing database upgrades or installing security patches. Using a notification service like Amazon Simple Notification Service (SNS) means you don’t have to create your own services for sending emails or text messages.

Deploying your app to the Heroku platform means, among other things, that you don’t have to worry about scaling your app as usage increases. Horizontal and vertical scaling can happen automatically.

Heroku logo

When your infrastructure is managed for you, you can spend more time on your product and less time on toil


Each of the tools we’ve covered helps take care of the mundane work inherent in software engineering. Design systems, code linters, code formatters, tests, continuous integration, and IaaS/PaaS providers can drastically speed up your software development lifecycle. Still, it’s up to you to start using them. Once you’ve taken care of the initial configuration for these tools, you’ll be amazed at how efficient you and your team can become.

If you want to be more productive, use the tools at your disposal to automate what you can. Then, you can focus on what you love – building your world-changing app.

Source link

h1 en p problems

h1 en p problems

h1 en p problems

my h1 is weird because it stays on top. also, my h1 is on top of my paragraphs. I recently got into coding and I want to create this

I really appreciate the help

submitted by /u/stagger552

Source link

Bootstrapping theme project.

How to Automate Deployments to Shopify Stores

E-commerce is surging under the lockdown, with thousands of businesses opening online stores every week. This means more work for developers, including those working with Shopify themes. With the numbers growing, deploying, and managing multiple shops at once can get tricky. Buddy solves this problem with delivery pipelines, a fast and elegant solution that lets you automate deployments and preview changes before going live.

Step 1: Configuring Theme Kit CLI

Start with downloading Shopify’s Theme Kit CLI. The CLI lets you run various operations in the context of Shopify themes by running commands. You can find installation instructions for your OS on their documentation page.

Adding a New Private App

When you’re done, you’ll need to create a new private app in the store’s admin panel to gain access to Shopify’s API. Complete the following steps.

The password is required to run Shopify Theme Kit CLI commands – make sure to copy it as we’ll need it later on!

Step 2: Bootstrapping Theme Project

For this guide, we’ll be using the default Debut Shopify theme. To bootstrap our project we will download it using Theme Kit CLI. Complete the following steps.

Bootstrapping theme project.

Downloading Theme With Theme Kit CLI

After creating a new theme, we have to download it.

  1. Create a directory on your computer and go there from the command line.
  2. Before we download the theme, we have to know its ID. To list all themes installed in your store, run this command:


You should get this output from the command with two new themes – one for production and one for staging environment:

Available theme versions: [103746207896] Debut [103747092632][live] My theme [103749681304] My theme - stage

The number in brackets is the theme’s ID. We can use it now to download the files from Shopify:

$ theme get --themeid=[THEME_ID] -p=[PASSWORD] -s=[SHOP_NAME]

Lastly, check if all files were downloaded successfully. Your folder structure should look like this:

❯ ls assets config config.yml layout locales sections snippets templates

Setting up Git Repository

In this tutorial, we’ll use Buddy as the code provider. You can use any VCS if you wish, though, as Buddy integrates with all types of Git providers, including GitHub, Bitbucket, and GitLab. In this case, reproduce the steps below, but select a different provider at the beginning.

Start with setting up a new repository in the folder with your theme.

$ git init

Sign in to your Buddy account, create a new project, and select Buddy as the provider.

Selecting Git provider.Enter the name and click the button to proceed.

Adding new project in Buddy.

Copy the URL of the newly created remote repository.

Empty repository on Buddy.

For improved security, we’ll use SSH for authentication. Make sure that you have added your SSH key in Buddy’s account settings.

Add the remote to the repository on your computer using the copied URL.

$ git remote add origin [REPOSITORY_URL]

Create an initial commit with all files from the folder.

$ git add . 
$ git commit -m "first commit"

Create and check out the stage branch. We’ll use it to deploy changes to the preview environment.

$ git checkout -b stage

With everything ready, push the commit to the remote repository on Buddy.

$ git push -u origin --all

Step 3: Delivery to Production

With the theme safe and sound in the repository, it’s time to configure two pipelines that will be deploying changes to the Shopify store.

Pipeline Configuration

The live pipeline will reflect what is visible to your customers on the Shopify store. It will be watching for changes on the master branch.

  1. Click Add a new pipeline on the project’s page.
  2. Set the name to Live or similar.
  3. Select Manual as the trigger mode.
  4. Select master as the deployment branch.
  5. Click the blue-button to finish the configuration.

Pipeline configuration screen.

Setting the trigger mode to manual (on click) will secure the pipeline from accidental deployment. However, the master branch should always be ready for deployment to live – be sure that whatever your merge is 100% tested and verified.

You can expand the options menu and provide the URL to your store in the Target website URL so that you can quickly access it from the pipeline view after the deployment.

Deployment to Shopify

With the pipeline configured, we can add the Shopify deployment action by completing the following:

  1. Look up Shopify on the action list.
  2. In the integration box, paste the URL to your shop and click the button when ready.
  3. Buddy will redirect you to your store settings. Install Buddy in the store to proceed.
  4. With the integration added, select the theme and shop to which you want to deploy.

Step 4: Delivery to Stage

Pipeline Configuration

Creating the staging pipeline works the same as with the production pipeline. The differences are the branch from which we deploy, and the triggering mode:

Creating staging pipeline.

With these settings, the pipeline will automatically deploy changes on every push.

Deployment to Shopify

Add the Shopify action once again. This time, change the theme to which the action will deploy.

Configuring Shopify deployment.

Step 4: Testing Delivery Pipelines

You should now have two pipelines: one for previewing changes on stage (automatic), and another one with deployment to production (manual).

Configuring Shopify deployment.

Let’s see how they work in practice. First, make some changes to your theme and push them to your staging branch. You will see that Buddy will automatically pick up those changes and upload them to My theme - stage.

Check the website and see if everything looks fine. If yes, merge the branch master and run the production pipeline. If you host the source code on Buddy, you can merge branches in the Code tab.

Step 5: Expansion

This guide covers only one of the issues that can be solved with pipelines. A cool feature of Buddy is that it lets you quickly expand existing pipelines without disrupting your workflow. For example, you can do the following:

Expanded Buddy pipeline.

The most important thing, however, is to keep things simple: add one step, test it for a while, and only when you’re 100% sure everything works fine to add another one. With this approach and Buddy at your side, you will soon be able to focus strictly on developing awesome themes and leave the operational hassle far behind.

Source link

r/webdev - Reddit API access through Application Only OAuth

Reddit API access through Application Only OAuth : webdev


I am attempting to start using the Reddit API, however I am unable to get past the authentication step.

I am going to build a web app and only need Application Only OAuth. The documentation I am following is here:

r/webdev - Reddit API access through Application Only OAuth

Extracted from the link above

This is what my Postman POST request looks like with no other authentication

r/webdev - Reddit API access through Application Only OAuth

POST request with header

Is there something I am overlooking or missing in the header? Based off of what I am reading this should be everything required, but I am still getting the following error in return:

r/webdev - Reddit API access through Application Only OAuth

Returned object

My best guess currently is that I have to apply the client_id and the client_secret somewhere…

Source link

r/webdev - Point Address: democratizing addresses and giving control of creating, managing and updated addresses to users

democratizing addresses and giving control of creating, mana…

Hi webdev community,

Excited to share Point Address (same as: which aims to challenge conventional addresses and allows individuals to define their addresses

With Point users can:

  • create, update and manage point addresses in real time.

  • create addresses of your choice that are easy to remember and share. For example: happy-home-us, or xyz-residence-de

  • add description, images and share precise location

    • Have a delivery? Store a message on where to leave the package, or add gate codes for community, add phone number etc.

    • Delivery folks: it can be very time consuming to find the apartment unit within a housing complex. Points are precise and can help users find the apartment / unit easily.

    • Hosting event? Don’t create a map on where park, which door / bell to ring. Just add all that information in the Point Address

    • airbnbs, hotels, or any rental unit that needs description of how to get to the place

  • give addresses to Businesses that don’t have presence on Maps (think Food trucks, roadside sellers / counters)

  • keep your legal address safe! Our mission is that one day no one has to remove labels on delivery packages before throwing them away. Package deliveries, visitors, don’t really care for legal addresses, but the actual location.

  • create multiple addresses for the same location, for example:

    • happyhome-us (for family)

    • happyhome-delivery-us (for deliveries / food etc.)

    • happyhome-guests-us (for visitors and friends)

(above are just examples, users can choose any name)

  • mark your Points public / private anytime. Public points can be accessed by others, but Private points cannot.

  • have an address! Yes, 20% of the world doesn’t have an address, but now there’s a way

  • move without updating the address. Users can simply update the Point anytime if they decide to move to a new place / apartment.

  • Points can be searched on the App or by visiting:<point-name>

Feedback is very welcome! Our goal is to make it easier for everyone to create and access Points easily. Point is a free platform, and our mission is to keep it free for all users, always.

If you like it, please use it. Instead of sharing your location with others, share Point addresses.

Our mission is that one day deliveries, and even postal services can start using Point instead of legal addresses of users.

Point API is coming soon for easy integration.


r/webdev - Point Address: democratizing addresses and giving control of creating, managing and updated addresses to users

Point Address Logo

Source link

r/webdev - [Showoff Saturday] Personal Management System 1.4

[Showoff Saturday] Personal Management System 1.4 : webdev

For almost 2 years I kept working on my management tool, and It reached a state where I can proudly say that it’s stable and running in my local network on RaspberryPi 4.


I’ve created this app because I really wanted some central point for storing my contacts, personal notes, plans for visiting some places, some schedules, goals, document, images etc. Everything just in one place, not between few clouds or still on paper. I really wanted something that I can control – that means being able to simply create any additional extensions for my usage.


Personal Management System is a web-app tool designed to organize the essentials of everyday life, everything from a simple to-do list and notes to file organizers. No more thinking about unhandled pending issues, no more sticky notes on the desk, or tones of files named asdfgasd.txt and furthermore no more searching for physicals documents in folders.Simplicity, transparency, flexibility and expand-ability – designed for personal use.


MIT (free)



Source code


r/webdev - [Showoff Saturday] Personal Management System 1.4


Most important tech stack:

Source link

r/graphic_design - Looking for feedback on a logo I

Looking for feedback on a logo I’ve been working on. : graph…

The goal was to create a fun brand that inspires crafting, projects, and community. The logo is actually an abstraction of the layout and floor plan of the container.

From The Thingery website: ‘A Thingery is a community owned lending library of things in a modified shipping container. The containers are self-service, so members can check things in and out at their convenience. A Thingery’s inventory is community sourced; meaning that what goes into the container depends on what neighbours donate to it and what they collectively purchase. Our inventory types include: recreation equipment, kids’ toys, woodworking tools, event & entertainment equipment, household appliances and musical instruments.’


r/graphic_design - Looking for feedback on a logo I've been working on.

Source link