12 Dev Tools To Upgrade Your Productivity

Because who doesn’t want to work more efficiently? For software developers and engineers, the number of hours worked doesn’t always correlate to productivity. Instead, it can point to inefficiencies — or being stuck on a bug for an unnecessarily long time. The ability to code quickly and efficiently can

Because who doesn’t want to work more efficiently?

For software developers and engineers, the number of hours worked doesn’t always correlate to productivity. Instead, it can point to inefficiencies — or being stuck on a bug for an unnecessarily long time.

The ability to code quickly and efficiently can make or break your flow state.

Recently, I’ve been getting back into the software dev game (after years of side-tracking into technical writing), and here are the tools I use to ensure that my productivity and code output is in tip-top shape and require minimal refactoring.

Code Productivity

1. Auto Rename Tag

At some point, you’re going to meet HTML tags — or paired tags that require re-naming in some format.

Then there are those that are nested and you’ll have to go hunting for them.

Auto Rename Tag makes life easier by renaming the paired tag when you start making edits to it.

Personally, I love it — especially when I’m experimenting with different structures and refactoring things. It makes life so much faster and easier.

2. Prettier Code Formatter

Manually formatting code is a very vintage 90s activity. Prettier Code Formatter is opinionated, used by over 22 million VS Code installations, and a staple plugin extension for every developer.

It supports JavaScript and all things associated with it. So this includes Vue, React, Angular, JSON, and HTML.

3. Tabnine

Yes. Yes. I write for Tabnine a lot but this isn’t a sponsored plug. I genuinely love their AI-driven code assist. Think of it like predictive text, but for code — and better than any of the IntelliSense I’ve used in the past.

It basically figures out the patterns and styles of your particular project and makes useful suggestions based on it. The more you use it, the better it becomes at figuring out what you’re thinking as you’re thinking it.

What I like about this is that you don’t really need the other code snippet add-ons because Tabnine doubles up as that as well through whole line and full function code completions.

4. CSS Peak

If you’re a frontend developer, this VS Code extension plugin is the best. Why? Because it’s not hard to hit CSS sprawl once your project gets to a certain size.

It doesn’t matter how neatly your structure your CSS, it still takes time to hunt down a specific CSS id or class. This is where CSS Peek comes in.

All you need to do is select the class or id you want to hunt down and away you go to the CSS for it.

Visual Studio Themes

5. Peacock

I’m sure I’m not the only one that has multiple projects open. Most of the time, I do this for cross-referencing purposes while I’m working on a particular feature or bug.

Peacock is handy because it allows me to visually identify and associate each project without having to look at the code itself to figure the context. It’s time saving and reduces the mental load of remembering which window is which.

6. Dracula

The other alternative theme that I adore is Dracula. It basically syncs up your entire coding-related activities to a single theme. So rather than having your eyes adjust to different color settings every time, you just have to deal with one.

It’s in a completely different direction to peacock but I do use this one too and switch between Peacock and Dracula depending on what I’m doing.

Chrome Things

7. Octotree

GitHub is fantastic and all — but when it comes to navigating through repos for whatever reason, it can be a bit of a pain.

Octotree is a free chrome plugin that makes navigating through the folder structures and trees more like what we’re used to. According to reviews, it saves top users over 20 hours per month in clicking and loading through GitHub. You can check pull requests, change code fonts, have multiple tabs, set your own icon themes, and bookmark everything. It also has a search function, just to add to making our code lives easier.

8. Picture in Picture

This is a plugin by Google and basically lets you watch a floating window of YouTube.

Works great if you have something running in the background and still want to browse. You don’t need an extra window just to keep things running.

9. Fake filler

Filling in forms is part of the testing process. As developers, we often spend a good portion of our time filling in forms. Fake filler speeds things up for this highly repetitive task.

The best perk? It fills in dummy data that makes sense. No more a;skdfjslkf button mashing in form fields. Yay for randomly generated names, emails, phone numbers, and anything else you might need.

10. Clear Cache

With 1-click, clear your browser cache.

No more confirmation dialogs and popups to confirm that you’re sure. Customize it clear certain things only like app cache, cookies, downloads, file systems, form data, local storage, passwords, and whatever else that is cached on your browser.

Save time. Save your sanity. Enough said.

Other tools that don’t quite fit a category

11. Toggl

I switched to an output and delivery model when I started freelancing. I don’t often charge by the hour and started metering my time instead.

Why? I don’t get penalized for efficiency and clients don’t get hit with an out-of-scoped bill for inefficiencies.

Meetings that go nowhere reduce the value of your time. Along with tasks that don’t add to the final output.

This is where Toggl comes in.

Everything I do has a Toggl timed task attached to it. At the end of the project, I calculate how long something took against what I got paid. My personal KPI is to reduce the time/value factor to help me work out rates for my future projects.

12. Notion

I live and die by my Notion notebook.

The thing with Notion is that there are levels of expert usage levels. A lot of Notion beginners just use it in a linear format. I have mine configured into a Life Admin OS dashboard style that covers a majority of what I do on a daily basis.

Everything I do and need is on a single page with sub-pages to track other things in life like finances, fitness, and a reading list.

You can get a copy of the template I made here for free.

That’s basically a summary of my favorite productivity tools. Add your own in the comments section below. I’d love to hear what tools you use to get things done.

Article by:

Aphinya Dechalert

Aphinya Dechalert

Aphinya is a skilled tech writer with field experience in software development, agile, and fullstack JavaScript. She is a dev advocate and community builder, helping others navigate their dev journey.

More posts...

Resources

12 Free University Courses That Will Teach You How To Code

Or pay a fraction of the price if you want to certificate Let’s get real — University education can get expensive. Or perhaps you’re contemplating switching careers but don’t want to spend 3 years back in school. You don’t need a degree to get into programming. The

Resources

How To Write Commit Messages That Won’t Tilt Your Teammates

We’ve all used git in some form or another. The code versioning system is an industry staple. With over 40 million users worldwide and 190 million repositories on GitHub, git is here to stay. While the concept of git is easy - pull your code, do whatever, save, add,

Resources

What is Docker? - Explained Simply

A quick rundown guide without the lingo and frills Docker. It’s a little blue whale with a container sitting on its back. We hear about it from various places but it’s usually just left to the DevOps guy to deal with. Or perhaps you’ve tried to pick

Resources

10 Ways To Undo Your GIT Mistakes

We’ve all done it — deleted a file we shouldn’t have, merged things that aren’t supposed to be on the main branch, accidentally pushed up sensitive information, committing to the wrong branch… GIT is fantastic when things go as planned — but not so much when it comes to