Four Ways to Improve a Web Developer’s Working Speed

In the web development field there are a few things we have to keep an eye on. One is quality of course, there is no going around it. High quality work pays better, reduces back and forth (time spent), scales better and is generally a good thing to push for.

Quality comes with practice. More projects built, more problems solved and a diverse team and community to ask for help. But it is not the only factor! What good is a well built application if it took one year, and when the deadline was only a couple months ? No one will agree to wait that long. And quality is still a subjective term. It’s not that easy to measure.

Time however is! And we can measure it precisely. With our junior developers and interns, we focus on quality in the first weeks and months. Get up to speed with our coding standards, approaches, ways to solve a problem and general implementational patterns. Once the basics are covered, we add speed to the mix. Quality is still a priority, but now the clock is also ticking for each task.

In this article, we will look into a few ways developers can speed up their work. Some are tools, some are techniques, others focus on how to think to solve a problem. Each developer has a different approach, different skill sets and preferences. The best way to digest the tips is to pick whatever works best for you and try everything else at least a couple of times.

1. Speed Up Through Tooling

Thanks to the huge dev community around, we are blessed with seemingly endless amounts of tools at our disposal to help ease our work. When a developer that can deliver work faster, they can spend their free time learning and becoming better at their craft. If you can’t squeeze in a few free hours a day due to “a lot of work” and don’t spend time on yourself, there is a problem. Work will rarely become less, but you can become faster.

The Terminal

It’s well known among developers. It is a tool we use to run programs like Git, to move files, copy, delete, run scripts, connect to servers and work with countless other CLIs. In the WordPress ecosystem there is WP-CLI, which bundles together a ton of useful features, which would otherwise take minutes instead of seconds to achieve.

GitHub

Git – the most commonly used version control system. It has a lot of UI tools like GitHub Desktop by Github or Sourcetree by BitBucket both of which provide some neat tools to make use of. But a huge percentage of the daily work can be done faster in the terminal. A command to add, commit, merge, push takes a couple of seconds, compared to moving the mouse across the screen and clicking various buttons, toggles, dropdowns.

But what if writing down long branches, commit messages that follow templates etc take time? Well, there are terminal tools for that too!

Oh My ZSH

Oh My Zsh will not make you a 10x developer…but you may feel like one.

A collection of plugins to expand your terminal toolset and help you in your daily work. And will make the terminal prettier! Track just the information you need, the current branch, directory, time when you ran a command etc.

There are also Git ones to reduce typing. Of course, some would take memorization, but once you put them in your daily workflow, you will be saving second and minutes , that sum up to hours saved a month.

One favorite tool is Z. Simple, short and powerful way to navigate throughout your system. It remembers folders and paths and jumps to them. For example z pj could go directly to /path/project/inner/folder/pijamas. And you don’t have to set anything up, it figures it out on its own.

You should also setup autosuggestions. It builds a memory of your most often typed commands and autosuggests them in the terminal. Commands that often take a few seconds to type take less than one. Works great with git commit messages even. If you follow specific patterns like “Component – Change…”, you it will autosuggest that directly as you start typing “git …”. You can of course navigate through other similar suggestions.

Tmux

А life saver. Takes a couple of days to get the hang of it and use it’s basic features, but in the long run it will save a lot of time! It will allow you to keep open various windows and groups of all the projects on your system.

Imagine you have 20+ projects. All of them are in separate “tabs”, so you can directly open the one you need. The tmux “window” is separated in all the views you need, one for commands, one to run npm script, one to track errors, one for server connection. Then when you close your machine, and open it again – everything is there!

Read more about how to use Tmux here.

There are a ton of other tools. If you haven’t properly utilized your terminal by now, you better do so! Setup an easy way to access your editors, to rename and streamline often used commands through aliases, create advanced and automate builds scripts. The possibilities are endless. And what’s more, you can share it with your team.

2. The Software You Use

Technically, the terminal is also part of it and it gives a good idea of what is meant. To know the tools you use, the small tricks, methods, way of thinking etc. Vim vs VS Code – both require a completely different way of operating.

A good suggestion here would be to search whatever piece of software you often use and find tips and tricks to speed up your workflow. Let’s take a look at VS Code as an editor and point out a few speed tricks:

Edit Code – Obvious one, but are you utilizing everything here? To select the same word across the document, to use the multicursor, to choose between specific characters (like brackets, quotes), to select or delete a line, to move lines up and down or duplicate them.

All of this can happen easily through shortcuts and takes seconds. This post would be an hour-long if we cover most of it. Instead here are some points – 21 VSCode Shortcuts To Code Faster and Funner – JSManifest. The VS Code documentation also provides some: Visual Studio Code Key Bindings.

Use Snippets – Often, languages we use have similar code in use – functions, comments, wrappers. It is a good thing to set up snippets that you often use. In HTML and CSS, Emmet provides this in a more advanced way.

header.site-header>.row>.column>nav.site-nav>ul.menu>li.menu-item*10>a{content}

This snippet above, after hitting [TAB] would expand to proper markup for standard header navigation. 5-6 others like it, some longer and you would end up with half the markup of a regular page ready. In CSS, basic stuff like pl5, mb10, fsz10 would expand to padding-left: 5px, margin-bottom: 10px and so on.

Website Design Concepts: How to Design Concepts in No Time

3. Staying Focused

This one is tricky, but just like the examples above, there are ways to improve it. To stay focused for a long time is a skill to learn and hone. Some can do it better than others, but all could learn it. The best thing you can do is find what distracts you and actively reduce it. Noise? Get noise-canceling headphones. People? Find a more closed space, set some “do not disturb” rules.

It ain’t easy, it takes time and effort. But try to block out as much distraction as you can. Also, you have to be disciplined – work on what you have to do and nothing else. If you take breaks, count them in “non-work only stuff”. When you work, it’s “nothing but work”. Clear separation between the two will help.

Take breaks. Unless you are in the zone, take a break every 45-60 minutes, walk away for a bit, chat for 5 min. Watch a video, read an article you saw earlier. Then once ~5-10 min pass, get back to work. This method can help greatly especially if you are debugging something tricky. These breaks will let you see the problem with fresh eyes or even discuss it with colleagues.

Whenever you feel good,, you can focus d better and for a longer time.Try to find out what sets the tone for you? . What is different? Did you get a nice cup of coffee first? Started with the hardest? Or when things are difficult, did you have enough work to do in the first place and could allow yourself some time to procrastinate , and do something else? Or is it something you already know how to do and can’t get started? Attention to these details might help resolve the problem.

Website Design Tips: How to Step Up Your Game in Web Design

4. Build a Process

One major point to getting work done faster is to have a consistent process. If you are a freelancer that builds WordPress sites from scratch (you write the theme, styles, functionality, plugins), then set up a starter theme, starter plugins, scaffolding. These tools will stop you from wasting time every time you begin a new project.

Have a local setup that is similar across 10+ projects? Build an automated script that will do the setup for you. Just feed it a few params, wait 10 seconds and start working.

Define commons structure and coding standards. If you follow the same thinking, formatting, naming across all your projects, you can instantly jump in the middle. You won’t feel stressed about following whatever existing naming convention being used. You will have to make less decisions as you’ve probably done them already in the previous projects. This will also allow you to share code.

A process is equally valuable in solo work as well as team work. If there is one process, all members will learn it and follow it. That way you can figure out what is going on in a project when you first hear about it, because your fellow developers would’ve started and built it in a similar fashion to your previous projects.

This will also allow you to build on top and make improvements. If you start something new every time, you might try different concepts, and different structures. But never perfect them. A process, improved over the years will solve a ton of problems that you would’ve otherwise faced every time you try something new.

The Path to Becoming a Good Web Designer

Final Note: Stay Focused on Speed

It is what we talk about all the time, and it’s true. Focus on speed! On your daily work. See what is slow, and what could be faster. Typing the same thing a few times? Create a global snippet. Opening programs left and right by double clicking icons? Use something like Alfred (mac) or whatever your system provides.

Type faster! If you have low WPM (words per minute) like 60-70, it is probably a good idea to spend some time on learning how to type faster. Forming your messages – this could also be slow. If one hour a day of your time is writing comments in tickets and chats, just being faster in forming your messages, and expressing yourself clearly could reduce hours a week.

Always keep speed as a goal. Together with quality, the two go hand in hand. Set your goals to never reduce the quality of your work while finding ways to increase the speed. Would it work? Not always, but a goal is a goal.