DEV Community

loading...
Cover image for 18 DevTools for productivity πŸš€

18 DevTools for productivity πŸš€

christopherkade profile image Christopher Kade Originally published at christopherkade.com ・3 min read

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.

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

Coolors

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

️➑️ coolors

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

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

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

DevHints

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

➑️ DevHints

Caniuse

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

➑️ caniuse

Browser extensions

headingsMap

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

➑️ Chrome

➑️ Firefox

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

➑️ Firefox

Screencastify

Want to record your web app for a demo?

➑️ Screencastify (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

VSCode extensions

Bracket Pair Colorizer

Lost in a forest of { and }?

➑️ Bracket Pair Colorizer

Git graph

Sick of living in the console for your Git commands?

➑️ Git Graph

GitLens

Want to see who coded what?

➑️ GitLens

Live Share

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

➑️ Live Share

CLIs

ngrok

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

➑️️ ngrok

svgo

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

➑️ svgo

tldr

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

➑️ tldr

fkill

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

➑️ fkill

gitmoji CLI

Want to easily commit something following the gitmoji syntax?

➑️ gitmoji CLI

gitmoji changelog

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

➑️ 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 or right here in the comments!

Discussion (32)

pic
Editor guide
Collapse
didin1453fatih profile image
Didin πŸ‘¨β€πŸ’» • Edited

19 dbdesigner.id to create Entity Relationship Diagram 😎😎😎.
This can help you to collaborate with your team on web and cut off your step in generate SQL Create database.
I write this article to explain more about this devtool medium.com/@didin1453fatih/databas...

Alt Text

Collapse
bbilginn profile image
Collapse
didin1453fatih profile image
Didin πŸ‘¨β€πŸ’»

Yes, this is alternative for opensource project.

Collapse
sarneeh profile image
Jakub Sarnowski

Didn't know about ngrok. It looks very useful! Thanks!

Collapse
yvonnickfrin profile image
🦁 Yvonnick FRIN

I use it a lot! It is really useful to share a local app when you are pair-programming remotely πŸ‘

Collapse
attkinsonjakob profile image
Jakob Attkinson

How does it work, more exactly?

Thread Thread
yvonnickfrin profile image
🦁 Yvonnick FRIN • Edited

ngrok http 3000 creates a tunnel on the port 3000 and expose it on an url. So you have to start your app on port 3000 then it is available to the url πŸŽ‰

Collapse
jappyjan profile image
jappyjan

Great alternative to be mentioned is localhost.run it’s actually just an ssh command forwarding your local traffic which results in not needing to install anything on your local machine.

Collapse
sarneeh profile image
Jakub Sarnowski

Doesn't look to secure - their website doesn't even have a valid SSL certificate πŸ˜…

Thread Thread
jappyjan profile image
jappyjan

LOL... it definitely was valid when I visited their site πŸ˜…

Collapse
yvonnickfrin profile image
🦁 Yvonnick FRIN • Edited

Nice article πŸ‘

If someone use gitmoji-cli there is gitmoji-changelog that generates changelog for projects using gitmoji convention πŸ˜„

Collapse
christopherkade profile image
Christopher Kade Author

Thank you ! I use it quite often, I should have mentioned it 😬

Collapse
paulwvnjohi profile image
Paul Wanjohi

for people in the same network as you, ifconfig will do, then share your ip

Collapse
aravindk profile image
Aravind Kothandaraman

Is it "ipconfig", or am i wrong? Sorry if its another tool named as ifconfig.

Collapse
luis_ferreira__ profile image
LuΓ­s Ferreira

I believe ifconfig is on Unix based systems while ipconfig is for Windows.

Thread Thread
aravindk profile image
Collapse
melezhik profile image
Alexey Melezhik

Hi! I have a dozens of plugins ( some of them could be broken, anyway ) - helping to automate typical devops tasks - git/azure/azure-devops/whatever

github.com/melezhik/sparrow-plugins

To use plugins you'll need a Sparrow6 - Raku Automation Framework.

Collapse
jamesgeorge007 profile image
James George

These projects are definitely worth checking out:-

MEVN-CLI - Light speed setup for MEVN stack-based apps.

teachcode - A tool to develop and improve a student’s programming skills by introducing the earliest lessons of coding.

Collapse
deyvisonrocha profile image
Deyvison Rocha

Nice tools! Thanks for share!

Collapse
johannchopin profile image
johannchopin • Edited

Concerning the Gitmoji topic there is also a browser extension for Chrome and Firefox. Have a look to the source code: github.com/johannchopin/gitmoji-br...

Collapse
thong_da profile image
Anthony Thong Do

Nice post!

Have you checked out our free product dbdiagram.io, there are 100K developers using since it was launched last year

dbdiagram.io

Collapse
ddziaduch profile image
Damian Dziaduch

Please check out the devdocs.io

Collapse
artoodeeto profile image
aRtoo

holy holy. this fkill works. bless you sir!

Collapse
markoshiva profile image
Marko Shiva Pavlovic

fkill is more then funny.
There is no way that kill don't work.
Only situation when I saw kill and by that pkill is lagging is when there is a mounted resource that become unavailable and cpu and memory is on maximum usage. basically kill will immediately open a system call to kill process and remove it from table of processes without waiting for the same to release resources.
If you are developer who do not know linux you might do not know about signals and that by default and SIGTERM to kill a process which is also known as terminate as send a signal to a process to release a resources and cleanly remove from table and memory.
To use a kill as a kill you can just pass
-9 or -SIGKILL or simply -kill as the argument.
So writing a new utility to kill a process is not needed.

Collapse
davidhopkins profile image
davidhopkins

Just added this to my .bashrc

alias man=tldr
alias woman=/usr/bin/man
Collapse
debojyotichatterjee9 profile image
Debojyoti Chatterjee

Thanks a lot !! This is quite helpful indeed!!! :)

Collapse
tarun_geek profile image
Collapse
liyasthomas profile image
Liyas Thomas

hoppscotch.io - A free, fast and beautiful API request builder, alternative to Postman.

Github:

GitHub logo hoppscotch / hoppscotch

πŸ‘½ A free, fast and beautiful API request builder used by 120k+ developers. https://hoppscotch.io

Collapse
arilength profile image
ari.length

Excellent post thank you ! the big DevHints cheetsheet is especially impressive ^

Collapse
douglasjb profile image
Douglas J B • Edited

Helpful tools! Thanks for share!

Collapse
ranga_vadhineni profile image
Ranga Vadhineni

the list is very useful.