My 12 tips how to increase your frontend coding productivity
There are plenty of articles about how to be a better developer. I will try not to touch this topic, but rather focus on productivity area around development.
I think the good developer is not only a good coder, architect, programmer, whatever. The good developer is a polymath, with soft skills, managing skills, who knows how to talk to business, to not technical people etc.
The good developer needs to understand business domain, and what business cares about is also money and time. With this article I will try to start a series of my thoughts about development related challenges, but not development itself.
In this story, I will present 12 tips which may help you be faster and more productive during your (mostly front-end) development work. I pick this topic (and will in the future talk about it more often) because I’m kind of a freak in this area and my heart hurts when I see sometimes what people do ;)
1: Know your tools
No matter what tools do you use — just learn it. If you spend 8 hours a day in Webstorm, even 10% of work saved every day will have a huge impact on your effectiveness. Maybe print the keymap and put it on the wall above urinal? :) You get the idea.
- Learn key shortcuts.
- Automate processes in your IDE (like GIT or some scripts)
- Check app’s preferences. You may find a lot of features you weren’t aware of.
- Check changelogs. If app updates — read release notes. Maybe they just released something you missed for years.
Knowledge of software you use will directly improve your speed. Remember that OS is a software too.
2: Use right tools for a job
Sometimes you are just used to some apps you’ve been using for years. Are you sure nothing better was released since then? I’m not telling you to follow every hype, but sometimes 15 minutes to check new tool will make your world turn 180 degrees.
Example? A lot of web designers are using Photoshop, which was made to be photo editing tool rather than web design software. A release of Sketch changed everything, making designers work super fast, super effective and closer to frontend developers. Adobe released XD which may not be as mature as Sketch now, but if you want to stay in Adobe ecosystem (or don’t have Mac) you can try it too. It will change your world for better.
Also, good idea is to follow Product Hunt and check nice utility apps. I use for example:
- CloudApp for screenshots, annotations, gifs recording etc
- Alfred fo smart command automation
- Spectacle for window management
- Duet for connecting iPad as an external display (or Sidecar for 2019)
Check available tools and apps, because you may not even know what you are missing.
3: Try to fit the ecosystem
Adobe I mentioned before has created an ecosystem with over 20 apps for different purposes. There is a high possibility that if you need to learn a new app, it will be much easier if it’s done by the same company. An interface of Photoshop is almost the same as Illustrator.
Webstorm, IntelliJ, PHPStorm and other Jetbrains software is almost the same (based on some layers actually).
Using the same ecosystem will also benefit you with lower prices, shared cloud storage, single account or cross-app integrations. It may be worth to check it — but on the other hand, don’t use an app you hate (and you have better alternatives) just to keep the same ecosystem!
Also, Apple ecosystem can surprise you with its cross-device integrations, but probably you can configure other devices to work as good.
Staying in one ecosystem can increase your productivity by keeping the same habits
4: Automate repetitive code tasks
If you have defined some code rules in your project, like indent size, will you manually change every line of code you write, to add missing spaces?
Can you sleep at night knowing that half of your development time could be automated, so you can do twice more FEATURES instead of repetitive tasks?
- Set your ESLint / TSLint to check your code quality (it will affect time too)
eslint --fixto automatically fix a lot of problems for you!
- Setup and use Prettier.js and connect it to both IDE shortcuts (in Webstorm it’s by default CMD + OPTION + SHIFT + P) and pre-commit
- Use generators like this React component generator or Angular CLI to automate generating standard boilerplate
- Take care of your CI pipeline
- Use git hooks for automatically running fixes, tests etc.
Automation will save you tons of time on repetitive monkey jobs
5: Install plugins to your apps
Probably most of the apps you are using can be extended with plugins. Sometimes it’s support for some library/framework, sometimes some cool integrations or themes. If you are using git and Jira, why not try to connect your IDE to see ticket description or auto-generate git commits?
Community plugins will add missing functionalities. The community knows best!
6: Add integrations
Integrations are crucial for automation. You can use Zapier or IFTTT to connect APIs of services you use, but first, take a look at plugin repositories. You can, for example, connect Jira to Github, so tickets are connected to Pull Request or your CI pipeline to run tests, print results on PR checks or automatically build feature branches.
Another good example is Slack integrations — there are thousands of apps and bots you can connect with your team’s favorite communicator.
Integrations will connect tools you use and make you work more effective
7: Set your JIRA properly
I don’t want to start a war here with Jira or Scrum evangelists. I believe, that this tool (and scrum as well) is made to help people, not make your life harder. However often I find Jira not really helpful… The UX and UI aren’t really user-friendly and a lot of things are not consistent.
What you can do, is to at least try to configure it for your needs. Add labels, types, colors — anything that will help you work.
Then, think about how you structure your tasks. IMO people make tasks too big, estimate them for days, which make them overgrown and hard to work on. Making small tasks and linking them together works well for me. And it’s easier to estimate. Divide and conquer.
Proper configuration and workflow of project management system will help you understand requirements faster.
8: Talk to the designers (and other departments)
Communication is the key. You may be complaining about designers and their design, but have you tried to find a solution?
You want to have standard margins/paddings mixins as multipliers of 10px? And designers are sometimes providing you 8px, 12px, 10px? Maybe if you ask them, they will tell you it’s perfect to use 10px always.
Or maybe you have problems with response format from the server and losing many hours to handle this situation. Why don’t you try to talk to them and maybe it’s easy to change for them?
Try to figure out what’s best for you and don’t be afraid to tell others. They will share their’s point and together you will find the best compromise.
Discussions will help you solve problems you cannot solve alone
Take this scenario. Several developers are working on the same project, committing to the same repository. Each of them has different habits and code style. They can even have a different default configuration of their editor (indents, semicolons etc).
Then you do the code review with few new lines of actual change, but there are 100 lines of diffs. How is that? Well, you don’t have shared, official configs like editorconfig, .eslintrc, .tslintrc etc. Your linters should fail builds and force developers to keep the same style.
Standardization will make you understand code easier and develop faster
10: Install Typescript types
If you are using Typescript it’s obvious for you. But did you know, that your IDE (at least Jetbrains) can resolve installed types definitions (install them with @types prefix, like
npm i -D @types/react).
They will be available in your node modules, and when you look up the definition of class you are using (by f.e CMD + click on some function/object/class) you will be redirected to corresponding type.d.ts file.
Why you need that? Types definitions will provide you interfaces with documented possible properties, methods and event documentation in jsdoc comments. Now you don’t need to keep open documentation site in your browser!
Typings will reduce time spent on searching documentation
11: Instal browser extensions
This one is actually the same as number 5 — but you probably use your browser all time, so it deserves it’s own part.
There are a lot of Chrome plugins (and probably also plenty for other browsers) which can boost your performance. Here are few I use every day:
- Raindrop for speed dial and bookmarks
- Pocket for saving things for later
- Augury, React devtools, Redux devtools etc for frameworks debugging
- Color picker, ruler
- Insight.io for IDE-like experience in Github
- File icons for github
And many more. I will write an article about my chrome extensions one day.
Chrome is not only browser but also an ecosystem for other apps.
Good selection of extensions can improve your frontend work and internet browsing experience as well.
12: Use the same hardware setup
For few years I’ve been using exactly the same setup. Macbook pro (I had many, but it’s basically the same), Magic Mouse and Magic Keyboard.
Two displays, left pivoted, so I don’t have to turn head so much. I use it for only 4 apps — Slack, Mail on the first desktop, Spotify and Todoist on the second desktop.
Center 4k display is for the browser (two open, so I can easily switch desktops).
On the right - Macbook on Rain stand, with facebook messenger, Webstorm, and terminal on separate desktops.
Why do I care? Because I’m used to it and found it my perfect setup. I recreate it in the office and in my home. I love apple for its standardization (external keyboard is almost the same as built-in) and I take most of it.
If you give me now Windows machine, I will spend months to switch (but I won’t switch anyway), even Linux is hard for me when I use GUI. If you give me another IDE, I will spend weeks till I configure it for my needs. If you even give me another keyboard I will have a problem to switch between my home and office one.
The point is to find your own favorite setup, continuously improve it and try to stick to it. Of course, you will make the same code quality on all systems, but what if you can do it two times faster?
Keeping same work environment will make you controlled habits and in the end, work faster.