18 DevTools for productivity 🚀
Tags: productivity, webdev, beginners
Published: 2019-11-05 09:47:01

This may sound crazy, but developers are lazy. I know, unbelievable. Some of us are, we need to automate lots of our tasks because repetition can be tiring. So let me show you some tools I find extremely useful, either because they make my life easier or because they push me to write more accessible code.

![](https://thepracticaldev.s3.amazonaws.com/i/o3hjup10i1v0gdhnwx6y.gif)

> We've all done it. Type `ls` you lazy, lazy person !

These tools will either be browser/IDE extensions, web apps or CLIs.

## Web apps

### Bundlephobia

You'd like to use a new dependency but you're not sure if it'll have a major impact performance-wise?

➡️ [bundlephobia](https://bundlephobia.com/)

### Coolors

Looking for a cool color combination for a personal project and you're tired of looking around the room for inspiration?

️➡️ [coolors](https://coolors.co/)

### Carbon

You'd like to share a code snippet with style for a presentation? (Keep in mind that these pictures are not accessible)

➡️ [carbon.now](https://carbon.now.sh/)

### Snippet generator

You have a live-coding session and you'd like to use code snippets to be more efficient?  
Generate them using this tool & add them to your IDE of choice.

➡️ [snippet generator](https://snippet-generator.app/?description=My+snippet&tabtrigger=helloWorld&snippet=%3Cdiv%3E%0A++Hello+World+%21%0A%3C%2Fdiv%3E&mode=vscode)

### Wolfram Alpha

You have a complex mathematical problem on your hands? Or a complicated `if` statement you'd like to simplify? Input it in this tool and retrieve its truth table, venn diagram & other useful data to make your life easier !

➡️ [Wolfram Alpha](https://www.wolframalpha.com/input/?i=a+or+b+and+b+or+c)

### DevHints

You keep on forgetting the syntax of that one framework or tool?

➡️ [DevHints](https://devhints.io)

### Caniuse

Want to check if a feature is supported by a specific browser?

➡️ [caniuse](https://caniuse.com/)

<br>

## Browser extensions

### headingsMap

Are your headings accessible to screen readers? Do you want to see if your headings are in the wrong place? 

➡️ [Chrome](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi) 

➡️ [Firefox](https://addons.mozilla.org/en-US/firefox/addon/headingsmap/)

### WCAG Color contrast checker

Looking to avoid contrast problems with your application? Do you want an understanding of which elements of your screen have a bad contrast ratio at a glance? 

➡️ [Chrome](https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf?hl=en)

➡️ [Firefox](https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/)

### Screencastify

Want to record your web app for a demo? 

➡️ [Screencastify](https://www.screencastify.com/) (for Chrome only)

### Axe

Want to execute automated accessibility tests very easily? (Axe won't test every accessibility concerns you may have, manual testing is also recommended)

➡️ [axe](https://www.deque.com/axe/)

<br>  

## VSCode extensions

### Bracket Pair Colorizer

Lost in a forest of `{` and `}`?

➡️ [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)

### Git graph

Sick of living in the console for your Git commands?

➡️ [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

### GitLens

Want to see who coded what?

➡️ [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

### Live Share

Want to live-edit a file collectively in your IDE?

➡️ [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

<br>

## CLIs

### ngrok

You're working on a project and want to show your local environment to someone who's not here? 

➡️️ [ngrok](https://ngrok.com/)

### svgo

Want to optimize your `svg` files and remove all the noise?

➡️ [svgo](https://github.com/svg/svgo)


### tldr

Someone told you to RTFM (as much as I hate this expression) and you despise the usual `man` display?

➡️ [tldr](https://tldr.sh/)

### fkill

Want to kill that pesky process but `kill` won't do it?

➡️ [fkill](https://github.com/sindresorhus/fkill-cli)

### gitmoji CLI

Want to easily commit something following the gitmoji syntax?

➡️ [gitmoji CLI](https://github.com/carloscuesta/gitmoji-cli)

### gitmoji changelog

Do you wish to generate a beautiful changelog based on your gitmoji commits?

➡️ [gitmoji changelog](https://github.com/frinyvonnick/gitmoji-changelog)

I hope you've found at least one tool that will make your life easier.
If you'd like to share one of your own, feel free to send them to me on Twitter [@christo_kade](https://twitter.com/christo_kade) or right here in the comments!