web dev

10 amazing tools that every web developer should know

10 fantastic web dev tools to level up your productivity and achieve your coding goals faster than ever.

From breathtaking animations to rapid project creation, these tools will boost your workflow and make a lot of things easier.

1. Fira Code

Most code editors’ default fonts are boring (like Consolas).

Use this beautiful, monospaced font instead:

Font ligatures have always been a genius, standout feature — merging common coding character groups in stylish, intuitive ways:

Changing your VS Code font is effortless; go to Settings you’ll see it up there among the “Commonly Used” options:

2. Barba JS

Add creative flair to your webpages and wow your users with delightful transitions:

It uses client-side routing of course, giving you that app-like experience:

3. Consola

I mean I just bashed Consolas, so no it’s not a typo.

It’s a beautiful, user-friendly console wrapper.

Perfect for making sophisticated looking CLI tools:

JavaScript
// ESM import { consola, createConsola } from "consola"; // CommonJS const { consola, createConsola } = require("consola"); consola.info("Using consola 3.0.0"); consola.start("Building project..."); consola.warn("A new version of consola is available: 3.0.1"); consola.success("Project built!"); consola.error(new Error("This is an example error. Everything is fine!")); consola.box("I am a simple box"); await consola.prompt("Deploy to the production?", { type: "confirm", });

4. Preact JS

A lightning-fast alternative to React — over 10 times lighter!

Dive in and you’ll find hooks, JSX, functional components… it’s essentially a drop-in replacement.

Just check this App component — I can literally count the differences with my right hand (or maybe left).

JavaScript
import { render, h } from 'preact'; import { useState } from 'preact/hooks'; /** @jsx h */ const App = () => { const [input, setInput] = useState(''); return ( <div> <p> Do you agree to the statement: "Preact is awesome"? </p> <input value={input} onInput={(e) => setInput(e.target.value)} /> </div> ); }; render(<App />, document.body);

And over 36,000 GitHub stars — they mean business.

5. Carbon

No need to bore people to death with dry dull-looking code snippets.

Spice things and bring beauty to the world with Carbon:

Multiple themes to choose from:

6. Firestore

Probably the best NoSQL database ever.

Generous free limits make it amazing for trying out new ideas, as I’ve done severally.

You’ll find it extremely easy and intuitive as a JS dev.

JavaScript
import { collection, addDoc } from "firebase/firestore"; try { const docRef = await addDoc(collection(db, "users"), { first: "Cristiano", last: "Ronaldo", born: 1985 }); console.log("Document written with ID: ", docRef.id); } catch (e) { console.error("Error adding document: ", e); }

You can even use it on the client side and skip server requests entirely — boosting cost savings and app performance.

I once used as a free web socket server and it worked perfectly — with server-side protections.

7. react-input-autosize

Input autosizing: An ubiqitious web design problem:

Which is why react-input-autosize started getting many millions of weekly downloads after it solved it:

Very easy to use UI component:

JavaScript
<AutosizeInput name="form-field-name" value={inputValue} onChange={function(event) { // event.target.value contains the new value }} />

8. Live Server for VS Code

Powerful tool for rapidly crafting static HTML pages — 48 million downloads!

No need to ever manually reload a webpage again — it loads it in the browser and syncs the display to the file contents.

9. Parcel

Parcel: a zero-config bundler with zero setup required — far more flexible than dinosaur Create React App.

Supports all the latest web technologies with excellent performance:

JavaScript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="root"></div> <!-- ✅ index.jsx directly --> <script src="index.jsx" type="module"></script> </body> </html>

We can rapidly create a React app from scratch with the index.jsx:

JavaScript
import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode> ); function App() { const [count, setCount] = useState(0); return ( <div> <div>Count: {count}</div> <div> <button onClick={() => setCount(count + 1)}> Increment </button> </div> </div> ); }

10. SendGrid

A powerful, popular API to send marketing and transactional emails with a 99% delivery rate.

Design beautiful, engaging emails that land straight in inboxes — skipping spam folders.

Final thoughts

Use these awesome tools to level up your productivity and developer quality of life.

10 amazing web development tools you need to know (#2)

10 more amazing web dev tools to boost your workflow and make development more enjoyable.

From stunning animations to rapid API creation & documentation, these tools will help you get things done faster than ever.

1. Heat.js

Create stunning heat maps and charts with this incredible UI library.

Like this:

GitHub-like heatmap.

Very similar to my GitHub profile (but with way more greens of course):

No external libraries needed, it’s dependency-free.

Customize every detail with a wide range of settings, or choose from over 10 pre-made themes in 40+ languages. Get ready to bring your data to life.

2. Postman

Simply the best for creating and testing APIs.

If you still use curl then you must living in the stone age. Or maybe you have some sort of CLI superiority complex.

Just making a simple POST request is pain; Stressful editing, strict formatting requirements that don’t even stay consistent with the OS and terminal.

1st one works on Linux, 2nd on Windows CMD (I guess), 3rd on Powershell…😴

Why go through any of that when you have a nice and easy GUI with none of these problems?

Body data is easy, query params are easy.

It even has built-in support for testing APIs from Paypal and Google.

3. React Toastify

By far the easiest way I found to add toast notifications to your React app.

All you need is this simple code:

JavaScript
import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; function App(){ const notify = () => toast("Wow so easy!"); return ( <div> <button onClick={notify}>Notify!</button> <ToastContainer /> </div> ); }

Look it even has all sorts of colorful progress bars to show how much time left before it goes away 👇

And dark mode of course. And different themes for different purposes.

4. GitLens for VS Code

VS Code source control on steroids.

Packed full with tons of views with essential repo data and current file info: file history, commits, branches, remotes, and more.

Even history of particular line in the file, with valuable related data and actions.

5. Palettify

Craft stunning UI color schemes in real-time with Palettify.

That H1 font is awesome by the way.

Play around with shadcn-ui components, toggle light/dark mode, then grab the the CSS theme code with a single click.

Several themes to choose from:

Wiza theme:

6. LinkPreview

I use this to easily get a preview image from a URL.

Like Notion does for their Bookmark block:

Better than depending on unreliable web scraping libraries, or rigid 3rd-party Link Preview UI components.

You just make an API request to this URL:

Plain text
https://api.linkpreview.net/?q=your_url_to_preview

And you easily get your image, along with relevant information for preview.

If we go to the image URL we’ll see it’s the same exact one Notion showed:

7. Lottie

Breathe life into your apps with Lottie.

Lottie takes the magic from Adobe After Effects and brings it straight to your mobile and web apps.

Imagine the experience needed to create this 👇 Then imagine recreating it with raw CSS.

So no more hand-coding – Lottie uses a special plugin to turn those After Effects animations into a lightweight JSON format that works flawlessly on any device.

8. Free Icons

Unleash your creativity with a treasure trove of over 22,000 icons!

Dive into a world of beautiful and free SVG icons, all meticulously tagged and ready to be discovered at your fingertips.

Including dinosaurs like Internet Explorer.

Simply type in a keyword and browse through countless icons to find the perfect visual match for your project.

9. jwt.io

I use this often when having nasty bugs with JSON web token from Firebase Auth or some stuff.

You just paste your token on the left and you instantly see the decoded value on the right.

And using this got me confused at first; I thought JWT was like an encryption where only the receiver could know what was there with the secret?

But no; it turned out JWT is for verifying the source of the message, not hiding information. Like in crypto wallets and transactions private and public keys.

10. TypeSpec

Use this to stop wasting time manually documenting your API for public use.

Describe your data once, and TypeScript magically conjures up everything you need: schema, API specifications, client / server code, docs, and more.

Final thoughts

Use these awesome tools to upgrade your productivity and make development more fun.