1. Use existing tools
While poor craftsmen blame their tools, it is certain that good tools used well can make you much more productive.
If you are building a website or web application, I recommend using a framework like Next.js, Nuxt, SvelteKit or Astro. Frameworks handle the basics like routing, server-side rendering, or static so you can focus on single issues.
Your manager won’t appreciate you delivering a project late because you want to write a new routing library. Choose Next.js and ship the site on time.
Rely on proven utility libraries like Lodash and government libraries like Zustand or Pinia before inventing your own.
2. Choose high quality tools
I know that when I choose the wrong tool, it becomes a central part of frustration throughout the project. A few hours of research ahead of time can save you hours or days creating a website. Don’t be afraid to try new things, but don’t waste your time on tools that don’t do the job.
For example, responsive design and accessibility should be a priority when building websites, so choose a browser designed for developers. Polypane allows you to view multiple device sizes simultaneously, and has a variety of accessibility features that help you catch issues before submitting them.
If you’re building modern websites for clients who want a page builder experience, Prismic’s Slice Machine is a great choice. Slice Machine connects to your local development workflow and makes it easy to create page sections. Connecting my CMS and data modeling used to slow me down, but now my productivity is skyrocketing with Slice Machine.
Don’t become emotionally attached to any tool. Choose a tool because it’s best for the job, not just because it’s something you love or is trendy.
3. Use Code Snippets
Snippets are a great way to speed up development. I guarantee you’ll find snippets for every popular IDE, language, and framework. Here is a list of VS Code snippet plugins. You can even create your own snippet if you find yourself typing the same thing over and over again. Plugins like Snippets simplify things.
If you’re using VS Code, try GitHub’s CoPilot. It’s far from perfect, but it’s great for autocompletion and relies on everything from comments to pretty function names. It won’t write your entire application, but it can handle tedious boilerplate code for you.
4. Automation
Like creating your own pieces of code, if you find yourself doing the same task over and over, find a way to automate it. Use task runners like npm scripts to run tests, code filters, and any node scripts you may need to run frequently. In the early days of responsive design, developers spent a lot of time creating desktop, mobile, and tablet versions of all their images. Now everything can be automated! If you are using Prismic, all your images can be converted on the fly using URL parameters, saving you a lot of time. You can even use services like imgix or Cloudinary to automatically generate social images!
Regardless of what you’re automating, make sure the time investment is worth it.
5. Reuse old work
Every time I try something new I get slower at first, but then I have the code and experience to review and reuse. I always dig into previous projects to find code to reuse or check how I did something.
Whenever you can, try to make the things you build reusable. We use reusable classes and components in modern web development to save time and make our code less error prone. For example, Josh Comeau ships the utils.js file from project to project, filled with common and useful functions.
