17 productivity tips for web developers
In this article, I will share a lot of productivity tips for software developers, but I will also share some general tips. So if you have entered this page by accident and isn’t a nerd like the rest of us, you might still benefit :).
1. Use the Pomodoro Technique
This is one of my absolute favorite technique for being productive. So what is it?
You set a timer for 25 minutes. In that time you only do focused work. No Facebook, Twitter or anything which distracts you from your task. After the 25 minutes, you take a five-minute break. This is a Pomodoro interval.
In my experience, when the timer is on, I am way more focused than usual. When I work without this technique I often catch myself surfing the internet when I get a little bored. But when the Pomodoro timer is running, I know that I just need to be focused for 25 minutes which makes it less likely to get distracted.
I use the Pomodoro timer on https://pomodoro-tracker.com/. This is a simple but great website. You can attach TODO tasks to one or several Pomodoros. It will also save the stats, so you can track how much time you spend on different tasks.
2. Withstand the urge to get distracted
When you read articles on how to be more productive, you often read that you should turn off all notifications, put your phone on airplane mode and preferably turn off the internet.
I never do that. Instead, I’m being conscious of not reacting to notifications. Meaning, if I hear an incoming message on my phone, my usual instinct is to check it out right away. This is a bad thing, you should not do that. Research shows that if you get distracted from your work, it takes about 15 minutes to regain focus.
Instead, you should feel the urge of checking the phone. Just let the feeling sink in without acting on it, and then just let it go. This isn’t easy, but you get better with practice. If you are using the Pomodoro technique in tip number 1, you know you only need to finish the 25 minutes, and then you can check your phone in your break. I think this makes it much easier.
3. Wake up early
I know, I know… This isn’t easy. Developers are often night owls, sitting at our computers and hack away to the late hours. Please, do not be hasty. Read this tip too, and you might get some inspiration.
I am by no means an early bird by nature. But with a little willpower and some determination, I too can get up early. In my job, I have flexible hours, and in my experience, I always get way more done before lunch. If I get late for work, I feel my focus deteriorate when the day is turning towards the evening.
Here are some other reasons for waking up early:
- Do you snooze your alarm in the morning? You’re not doing yourself any favors. If you are lying in your bed, not wanting to get up and hit the snooze button for an hour, you won’t get good sleep and you are wasting valuable time you could spend on productive stuff.
- You will feel a big win when the first thing you do when waking up is to get out of bed with determination.
- If you have young children in your house, there might be few opportunities for some quiet time. If you wake up a couple of hours before anyone else in the family, you could do a couple of hours with laser-focused work each morning. You will be amazed how much you will accomplish if you make this a routine.
4. Set deadlines
Have you ever had an assignment at school, where you might have a couple of months to finish? How much did you do the first month? And how much did you do the last week?
If you were like me, you would do hardly do anything until the last week. By setting a deadline you are developing an urgency in finishing your tasks. If your project is a big one, you obviously can’t finish the whole project in one week.
Instead, you should set intermediate objectives like finishing the login page within a week or finishing the shopping page within two weeks. This will keep you focused on one task at the time.
This is a good way to plan your entire project. Divide all your tasks into small chunks. You will then have an Idea how long it will take to finish the project. Problems and stumbling blocks will without question show up, so you will refine these task and reset the deadlines. What I’m describing here is part of what makes up SCRUM, which I will go into in more details later in this post.
5. Get enough sleep
Getting enough sleep is very important. Don’t rely on drinking extra coffee. That will only work in the short term.
There are a lot of benefits of getting enough sleep:
- You will be less sick.
- Reduced stress and a better overall mood.
- Think more clearly.
- Improved memory.
According to studies, a good night sleep should be between 6 and 8 hours per night. Ideally on a regular schedule. When you get to sleep at the same time each night, your body will learn when you should get up. This way you will most likely wake up naturally, which is much better than getting a rude awakening from your annoying alarm clock.
If you having a problem sleeping at night, there are some bad habits you should avoid right before going to bed:
- Drink beverages which contain caffeine like coffee, black tea, and soda.
- Play intense video games.
- Working out.
- Using computers or cell phones. The artificial blue light on those screens will “wake you up”, which makes it harder to go to sleep. You can install a software like f.lux to turn down the blue light into a warmer light. This app will adjust the screen according to what time it is.
6. Use an IDE/editor with productivity enhanced features
My favorite IDE/Text Editor is VS Code. It is super fast, lightweight and got features like integrated terminal and git support.
VS Code also got extensions. This is small applications which you can install inside VS Code. You can search through all their extensions in their marketplace.
There are other great editors out there, but since I’m a fan of VS Code, I will give you some of my favorite extensions for productivity. If you prefer another editor and like some of the extensions here, check out your favorite editor and see if you can find something similar.
Here are some of my favorites:
With this extension, you can debug your JavaScript application right inside VS Code. If you are used to debugging within Chrome’s developer tools, you know it’s a hassle to switch between your editor and find the exact file in the developer tools. You are already working on your code, so it’s really convenient getting your breakpoint to stop there as well.
This one is really cool. Often when you are editing your code, you want to jump to another location in the file you are working on. The normal way of doing this is either to use your mouse or using a combination of arrow keys and something like home/end buttons.
With this tool, you set up a key binding, and when you hit that key binding, your editor will show multiple two character combination spread around the editor. When hitting one of those two characters, you will instantly move your cursor to that spot.
Now, this feels weird the first few times you try it, but after some time, it will feel like second nature.
We all know that programming is all about semicolons. This is a simple extension which sets a semicolon at the end of the line, wherever you are on that particular line.
With Live Server, you can start up a local server by pressing to “Go Live” button on the status bar. You can also right-click on an HTML file a choose “Open with Live Server” on the context menu.
This extension also got a live reload feature, which means it will automatically reload the web page whenever there is a change in your working files.
Views and searches your git history. Also compares commits and much more.
Snippets
There are a ton of snippet extensions on the various languages and frameworks. This will scaffold your code you use often and will save you a lot of time.
Do a search on the marketplace and find a snippet extension on the language/framework you are using.
7. Learn keyboard shortcuts
Whenever you are moving your hand away from the keyboard and to your mouse, you are wasting time. In my case, I get into the flow by hammering away on the keyboard but will lose the flow when switching to the mouse.
My suggestion is that you should take note while you’re working at what time you are reaching for your mouse. Then find out if there is a shortcut for that particular task.
I do not suggest that you should learn all the keyboard shortcuts at one. Learn one or two at the time, and when you are used to those, you can pick up a couple more.
Here are a few tasks where I use keyboard shortcuts all the time:
You can waste a lot of time going through your project’s folder structure. Especially when your project is getting big. Often you have an Idea of your files name. In that case, you will switch to your file in a blink.
Browse latest opened file (CTRL+TAB)
Most of the time you will switch between the last 4-5 files. This shortcut will display the latest opened file and you can select one of them.
Search files (CTRL+SHIFT+F)
This is something I use quite a lot when I’m searching for a specific function. I also use this if I want to find a place on an HTML file, I usually search for some text on the page in my browser and search the files.
Command palette (CTRL+SHIFT+P)
The command palette gives you a list of the recent commands you’ve used. It is also searchable, so you can find what you are looking for even though you don’t know the shortcut or the menu placement.
This is a feature I haven’t found in other IDEs.
There are a ton of other productive shortcuts out there. If you are using VS code or are interested in trying it out, you should check out the keyboard shortcut cheat sheet. You can find it here. Print it out and have it near your computer, and you will be navigating your editor like a ninja!
There is also an option to create your own shortcut key bindings.
8. Fetch your headphones and put on some music
In application development companies, it is more and more common to work in an open office solution. Especially when you work in a team, your office will most likely be in a big open space, rather than several isolated offices.
The benefits of having this kind of solution are many, like easy to cooperate, ask questions, etc. However, there are also some drawbacks like noise and other disturbances. If you are working on a complex problem or algorithm, you will quickly become annoyed with the noise around you.
The solution? Noise canceling headsets!
This will effectively block most of the noise out. If you put on some music as well, you will zone out in your own little world, (Until somebody comes along and hit you over your head).
I use this headset by bose. This is a headset I’ve used a while and is one I’m really happy with. I am kind of a headset geek, and according to reviews, the Sony WH1000XM3 is currently the best noise canceling headset on the market.
What kind of music you like to listen to is of course individual. I usually like to hear something calm and soothing, without intense or catchy melodies which capture my attention.
I like to put on a long mix of some kind of Youtube. For example:
- Relaxing Jazz Piano
- Music mix from the Elder Scrolls games – I’m a major fan of the Elder Scrolls series (Skyrim/Oblivion), and the music score is excellent.
- Code Radio – Downtempo beats from the free code camp community. Music playing 24/7!
9. Practice your craft
When doing some practice projects, you will just code without a means to an end. What you are creating is not important. It is just to practice coding and algorithms.
By doing this you will:
- Get familiar and be more effective with your code editor.
- Solve coding puzzles without thinking.
- Get the foundations of a programming language down.
This will increase your productivity ten folds. When you can create solutions fast with fever stumbling block, you will, in turn, have more fun coding which in turn will motivate you to keep going.
A great way to practice is by using a coding dojo site. These are sites with small challenges, when you have finished creating the solution, the site will run several tests to see if you have solved the problem correctly.
There are a lot of code challenge sites like:
- Edabit <– My favorite!
- Coderbyte
- Project Euler
- Codewars
These are just a few of many.
Sites like these often have an online code editor where you can write your code. I like to code in my own code editor and later paste the code into the code challenge site.
That way you can practice to be more effective inside your code editor as well. Focus on using the keyboard as much as possible, and if you find yourself using the mouse, try to figure out if there is a keyboard shortcut you can use instead.
I find that you will improve the most if you at least solve one challenge a day. A lot of these challenges are very easy and you might just use a couple of minutes finishing a challenge.
However, you might feel a sense of mastery when finishing one of the challenges, which might motivate you to finish a few more.
10. Use automation tools
Front-end development isn’t what it used to be. Now we have things like:
- CSS preprocessors
- TypeScript
- ES6
- Linting
In addition to that, we need to perform additional tasks to improve site speed and improve our development environment.
These are all repetitive tasks which we want to spend a little time as possible on. That is why we want to use a task runner like Gulp.
With a task runner we can do things like:
- Minify CSS
- Minify JavaScript
- Transpile from ES6 to ES5
- Transpile from TypeScript to JavaScript
- Combine CSS or JavaScript files into one file.
- Compile SASS files to CSS.
- Reload the web page on save.
You can set up all of these tasks to fire whenever you save a file in your project. That way you don’t have to spend time doing this manually and you can focus on what you do best, create code!
11. Use a framework
The basic components of a website on the front end are JavaScript, CSS, and HTML. This is how your web application will end up, and this is how people created a website in the olden days.
However, some smart people found out how to add functionality to the web application more easily. We had JQuery which gained huge popularity and was considered the standard for creating front-end applications.
In recent years, other frameworks gained traction. You have ReactJS which was created by Facebook, Angular which was created by Google and VueJS which was created by Evan You, an ex-google employee. All of these frameworks are excellent and makes it easy to create big applications on the front-end.
Frameworks/libraries are only JavaScript code which you use in your application. Therefore it is important to learn vanilla JavaScript, even though you rarely will create an application with just basic JavaScript, CSS, and HTML.
By learning JavaScript from scratch and learn it well, you will be able to understand how these frameworks operate under the hood.
12. Create clean readable code
Creating readable code for other people to understand is a difficult task, but an important one. I bet all the people who have worked as a developer for a company can vouch for that.
To inherit a project with bad variable names and function is a pain. You will spend more hours scratching your head trying to figure out the logic, rather than create new code.
It is also wise to create readable code for yourself. You will often finish a project and then return to it months later. It is surprising how much you can forget in a few months. And if that code is hard to read you are creating suffering for yourself.
13. Work on some side projects
This is a great way to be more effective. You will treat your side projects a lot different than your day job projects. With your own projects, you are the boss. You can experiment as much as you want and dabble in new tools or frameworks.
I would advise making something small. Something you can finish within a reasonable time. This way you can start new projects and stay motivated.
You can also participate in open source projects. This will help you to learn best practices with source control. You will also practice reading other peoples code. The code and structure in a mature and popular open source projects are most likely very well coded, and you can learn a lot by picking up some best practices.
14. Plan out your code before you start coding
I have done this a ton of times, and I never seem to learn. When coding a feature I usually crack open my editor and start coding without thinking.
The problem with that is you might end up on a dead end road, and you have to scratch most of your code and start over.
Needless to say, this is not very productive.
How you plan is different for everyone. I like to just pick up a pen and a piece of paper and start drawing and scribbling things down. Make sure I get everything in my head down on paper. Often you will then see possible stumbling blocks which will force you to think of other solutions.
It is also wise to dive into existing code, look at how you can interact with the database, see if there is already some piece of code you can reuse.
15. Use test-driven development
Test-driven development is where you create your tests for your classes and function before you write any code. This makes sure you will write small functions without a lot of functionality. In other words, it forces you to write good, clean code.
But how is this beneficial for productivity? Doesn’t it take time to write tests?
Yes, but you will see the benefits when the codebase is getting large. You will be able to change the code with confidence when you are having lots of unit tests backing it.
Without the tests, you will sooner or later create bugs, which you need to spend hours to hunt down. I’ve been down this road many times, and it’s not my favorite thing when it comes to programming.
16. Start using SCRUM
SCRUM is a methodology for managing software development projects. Instead of the old waterfall model where you planned everything before you started coding, you will continuously refine and change the specifications. With SCRUM, you will have sprints of maybe two weeks where you have a set of tasks you need to complete.
There are a lot of benefits to this methodology:
- Flexible in which there is room for changes during the development period.
- There will be a mini-release after every sprint. This goes into the power of setting deadlines earlier. You will have a laser focus during the sprint, which makes you more productive.
- You will work more with the entire company, which makes sure you will develop what the customer wants.
17. Utilize 80/20
There is something called the “Pareto principle”, also known as the 80/20 rule. The Idea is that many events about 80% of the effects come from 20% of the causes. There are numerous examples which support this theory.
For instance, 20% of the code has 80% of the errors and the hardest 20% of the code takes 80% of the time.
So, how can you use this for productivity?
If you create a list of all the important tasks you need to do to finish a project, focus on finishing the top 20%. Often you find that majority of the less important task isn’t worth your time at all.
Conclusion
I know there is a lot of tips in this article on how to be more productive. Don’t do them all at once, that would probably make you less productive in the short run.
I suggest you should pick a couple of tips which you found useful and implement those.
With software development, you will most likely encounter leaders who urge you to finish within a deadline, and for you as a developer it more satisfying to watch your development progress as fast as possible. Spending some time learning how to be productive is time well spent.