Top 10 Best Web Dev Tools. Every month I am trying to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are::
A very impressive and easy-to-use deployment and collaboration platform for front-end developers from creators of NextJS. Vercel enables developers to host websites and web services that deploy instantly and scale automatically — all without any configuration. So far, I have been using it for a couple of weeks, and it really feels like a Heroku or Netlify on steroids.
2). Color Leap
Color Leap is a very beautiful and well-designed resource on the history of colors. It is perfect for looking for inspiration, so choose your favorite era and dig into its colors.
3). HTML DOM
A couple of very user-friendly and simple visual tools to help you generate CSS (animations, shadows, colors) for your projects.
A simple visual cheatsheet for CSS Grid Layout.
6). CSS Stats
CSS Stats provides a report with deep analytics and visualizations for your stylesheets.
7). Yellow Lab Tools
Yellow Lab Tools is a free online page speed audit tool and a web performance analyzer.
8). Figma Crash
Actually, this pick is not a tool but a study resource. It helps you to dive deep into powerful Figma features. The course is totally free.
9). CSS Hell
I could not describe this resource better than their official site does — The collection of common CSS mistakes and how to fix them.
This resource provides you the easiest way to create a brilliant README for your next project.
11). Daily Dev
12). HTTP Cats
A hilarious API that you can use in your website to show funny error messages. For those who are not in the team cat, there is also a dog version.
A super cool tool that helps you create some good-looking content for your blog or social media. I will definitely use it the future posts.
15). Can I use…
I suppose there must be at least one pick from captain obvious every month. This time it is a widely known resource — Can I use…
16). VIM Adventures
In fact, this is not a tool but an online environment that allows you to learn VIM in a game-like manner. As for this topic, I may as well recommend the Vim Fundamentals course by Frontend Masters.
17). 30 seconds of code
An extensive collection of code snippets for all occasions and all skill levels.
18). Cool Backgrounds
A curated selection of cool backgrounds that you can add to blogs and websites. It also provides a broad scope for modification.
19). Grid Cheatsheet
It is another useful cheat sheet, presented in visual and easy to interpret form. From the authors of Flex cheatsheet (pick number 10).
A handpicked collection of beautiful color gradients for all kinds of designers and developers.
Squoosh is the most intuitive and good-looking image compression web app I have ever seen. It works very fast and supports many formats (AVIF, WebP, JPEG XL, etc.).
This tool helps you to create web design elements inspired by the popular Frosted Glass aesthetic.
A VisuAlgo is the ultimate tool to learn data structures and algorithms visually.
Perhaps the most obvious, but nonetheless very useful pick. Netlify is an amazing platform allowing you to deploy in just a few clicks straight from your git repository.
A free, fast, and beautiful API request builder. A noteworthy alternative to Postman.
The online code editor for web apps. A wonderful VS Code-like alternative to other online IDE’s like Repl, CodePen, etc.
A simple and easy-to-use tool for creating accessible buttons. It helps you to ensure that your buttons have accessible contrasts.
29). Refactoring Guru
This resource could be a great starting point for someone interested in refactoring and design patterns.
30). Flex Cheatsheet
A great visual cheat sheet for CSS Flex layout in a form of an interactive playground.
Demos for W3C CSS Flexbox Specification http://www.w3.org/TR/css-flexbox-1/
P.S. Please feel free to complete the list by replying to this post. Which web dev tools do you like best?