20 essential web tools for developers
Having the right tools as a developer will save you a lot of time on everything. Whether it’s producing code, checking data or validating commands and configurations, it quickly becomes indispensable. Here is my favorite folder, it took me several years to build this list!
1 – DevHints.io
Impossible for me to remember the syntax and snippets of the tools and languages I use. Besides, it’s useless since that’s not the important thing. The important thing is to remember the concepts, not the details.
For details, cheatsheets are there for that, and DevHints is the gold mine.
You can think of any language tools or frameworks used by developers, you will find the cheatsheet on this site. In a few clicks you have access to everything and it’s easily printable. A must to help the memory!
2 – Learn X in Y minutes
Learn X in Y minutes is the kind of crazy site you have to see to believe.
Every possible language, explained in one page, in almost every language, through concrete examples of code. From more than standard languages like C++ to infernal languages like LOLCODE you will find everything.
It differs greatly from the first one because here each language is explained as a course. It’s not about refreshing your memory (cheatsheet) but about learning the basics of a new language quickly.
3 – Regex101
Regex stopped being a problem when I discovered Regex101.
Before the discovery of this tool, creating or modifying a complex Regex was tedious. I first had to remember every syntax and detail and then I had to test my solution for a long time to make it work the way I wanted.
Today, I go on this tool, it is done step by step with explanations. All the tests are done instantaneously with each modification. To decode one of them, I copy/paste and I have the whole explanation. The tool accompanies me and it saves me an absurd amount of time. A MUST HAVE!
4 – JSON Editor Online
When I work with JSON, I frequently end up drawing JsonEditorOnline.
First, i use it to clearly visualize my data via nodes. But above all it allows me to make differences between several JSON. If like me you work a lot with APIs, you often find yourself having to compare data.
I used to do this by looking at JSONs one after the other. It wasn’t fast and it could create errors. Since I’ve been using this tool, there’s no more chance of making mistakes and I save a lot of time!
5 – CodeSandbox
My favorite online code editor that I use all the time is Codesandbox.
A free, instant and collaborative sandbox code editor for all your needs! It’s really fast and you can host whatever you want as a small static app.
I prefer it to CodePen because I can host images without paying and I have more choice of technologies and templates. Perfect for prototyping my ideas quickly!
6 – Cloudflare Speed Test
With the pandemic, my internet connection has become even more important than before. If there is a network outage or drop, I want to know immediately.
Fortunately, Cloudflare has made a page analyzing your connection in great detail.
With one click, it tells you everything about your current connection status. Handy to know what happens when your call lag or when nothing works anymore!
7 – Excalidraw
Before coding a complicated problem, I need to make a schematic. Believe me, nothing will save you more time than schematizing your ideas before coding.
Most of the time, it’s paper/pencil. Otherwise, it’s Excalidraw.
Excalidraw is a whiteboard that allows you to easily draw your plan as if it were handmade! A blank page, enough to make diagrams and save them. Simple, fast, clean, free, incredible. A must.
8 – BundlePhobia
When I find an NPM package that could help me, it goes right through BundlePhobia.
This small web application allows me, in one click, to know the price in size and time of the package. It also allows me to see how many dependencies are linked.
It allows me to decide if it’s worth introducing this new dependencies in my project. Sometimes it allows me to choose between two packages that do the same thing. And no matter what happens in the end, my application wins!
9 – Semver Check
I frequently use Semver check to check the NPM versions of my projects.
It allows me to be sure that some version constraints will behave as I want. It’s more of a tool to check that I’m not going to do something stupid. But it’s very useful to quickly validate a version.
I sometimes found myself with unwanted package versions before using it. It’s not possible to make mistakes with this anymore. Very practical!
10 – CodeElf
If you are a dev it means that you spend half of your time choosing variable and function names. This tool will help you.
Codelf is designed to save you time thinking about naming!
It instantly searches Github, GitLab and Bitbucket to see if your naming idea is popular! There’s a greater chance your idea will be good if it’s already been used by thousands of developers before you.
11 – Htaccess Tester
I have already broken entire sites by changing htaccess with far too much confidence.
By using htaccess tester it won’t happen anymore!
This little tool allows you to know exactly how your htaccess behaves before pushing it. No more need to worry when pushing, you are already sure that your site will not implode and that the redirections will be correct. Just one use is addictive!
12 – ExplainShell
Retaining all the small options of all shell commands is almost impossible.
Explain shell allows to copy/paste any command is to have a complete explanation!
It’s a kind of man command but faster to read, more detailed and well presented in the browser. Everything is explained, option by option, in a nice interface. Very handy to quickly go through all types of command.
13 – Squoosh
Most huge images – in terms of weight – can be reduced by 60% without losing quality.
That’s exactly what Squoosh does in just one drop!
Indispensable if you want to optimize your site and the bandwidth of your visitors. And generally speaking huge images are useless. Very handy to get rid of them quickly.
14 – Photopea
This one is completely crazy!
Photopea is just free Photoshop in the browser.
I frequently find myself retouching images for various reasons. No need to have the cheap free editing tools anymore. I just open a page and get it done.
It’s very handy to do a quick trick from anywhere without installing all the junk. It’s amazing that it works so well and it’s free!
15 – DevDocs
It would be cool to have access to all the docs of all the frameworks/languages in one well-organized place.
Well that’s exactly what DevDocs is all about.
Very handy to not spend your life on all the sites of the world and have 30 tabs open. The truth is that I use it mostly for a limited number of docs, but it’s still convenient to stay in one place.
16 – Carbon
If you’re wondering how some developers are able to generate beautiful images of their code, look no further!
Carbon is quite simply the most widely used code presentation generator.
It’s handy! The equivalent in VSCode extension also exists.
17 – Hoppscotch
Almost everyone knows Postman or Insomnia to test these APIs.
Hoppscotch is exactly the same, but directly in the browser!
It’s very complete, there are all the options you can imagine and it can always help to quickly test an api. Postman also allows you to test via the web, but you need a code and even a browser extension for some calls.
Hoppscotch you have access to everything you need with just one click.
18 – Crontab Guru
Setting up a cron can be extremely catastrophic if there is the slightest error.
Crontab guru allows you to validate exactly how your future cron will behave before programming it.
In the same vein as htaccess tester, no more sweating before adding or updating rules with a strong impact. You know exactly how it will behave before you push anything. Very handy to go fast and have peace of mind!
19 – DevTools
DevTools is a suite of tools to save a little time in the small tasks of dev of every day.
Encoding/decoding text, text comparison, text generation, UUID generation and many other mini tools in one place. Instead of juggling commands and scripts from everywhere, you have everything in one place. Copy and paste you have your result and you save time!
20 – Repl.it
Online code editors such as Codesandbox or Codepen are limited to the frontend.
ReplIt is more than 50 languages that can be used in the browser for free.
The perfect place to prototype bits of code backends quickly. I use it very frequently to validate a function, a piece of algo or simply to check the compatibility between two versions of NodeJS or Python. With a free account you can even share your algos !
Bonus – Pomofocus
A little bonus tool!
Pomofocus is the best web management tool for the pomodoro technique I’ve ever seen.
The pomodoro is a very well known technique that I frequently tell you about on this blog. It allows you to increase your productivity tenfold in an impressive way! And pomofocus is perfect to test it.
Epilogue
I’ll do the same kind of post in the future with desktop software and another one with Visual Studio Code extensions. Today’s list comes from a thread I created on Twitter. If you want to get the news before everyone else, don’t hesitate to join me on Twitter!
I may suggest to add https://format-express.dev to this list. It’s an easy-to-use formater that supports JSON, XML, HTML, SQL and more… Just past, and it’s immediately beautified with syntax highlighting, node navigation, minimap, search tools, … Perfect tool for those working with APIs.
[Disclaimer: I’m the creator of this amazing gem 🙂. No training. No ads.]