[23] Top 10 Must-Have Web Dev Tools – July 2021
Tags: codenewbie, productivity, webdev, beginners
Published: 2021-07-12 08:31:29

Hi everyone 👋. My vacation has officially started 🥳, and I would like to present you the July edition of my [blog post series](https://www.create-react-app.com/tags/top) - 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:

## 1). Next.js

This time I would like to start with Next.js, which is really not a tool, but a whole framework with hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. I've wanted to use it in some projects for a long time, and finally, I did it in my last [web app](https://koripallopaikat.vercel.app). Next.js provides you the easiest ways to create APIs and work with routing and navigation. I must say that the overall developer experience is at a great level, definitely must try.

![next](https://www.create-react-app.com/static/img/images/23/next.webp)

[https://nextjs.org/](https://nextjs.org/)

## 2). Vite

Vite is a blazing fast and easy to configure build tool. It uses [esbuild](https://esbuild.github.io/) for bundling, which is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers. I recently used Vite in one of my latest [projects](https://vaccine2021.vercel.app/), and I'm currently planning to move my [site](https://villivald.com) to it (from create-react-app incl. webpack).

![vite](https://www.create-react-app.com/static/img/images/23/vite.webp)

[https://vitejs.dev/](https://vitejs.dev/)

## 3). Bundlephobia

Bundlephobia is a very useful project that helps you to find the performance impact of npm packages.

![bundlephobia](https://www.create-react-app.com/static/img/images/23/bundlephobia.webp)

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

## 4). SVG Path Visualizer

This web tool allows you to explore an SVG path in a visual way.

![svg](https://www.create-react-app.com/static/img/images/23/svg.webp)

[https://svg-path-visualizer.netlify.app/](https://svg-path-visualizer.netlify.app/)

## 5). Clippy

Clippy might be the easiest way to create CSS clip paths. I would also recommend checking out the other projects made by [Bennett Feely](https://bennettfeely.com/) since he has very interesting approaches.

![clippy](https://www.create-react-app.com/static/img/images/23/clippy.webp)

[https://bennettfeely.com/clippy/](https://bennettfeely.com/clippy/)

## 6). Material Design icons by Google

Quality icon set by Google. A noteworthy alternative to [Font Awesome](https://fontawesome.com/v5.15/icons) or [Material UI Icons](https://material-ui.com/components/material-icons/).

![icons](https://www.create-react-app.com/static/img/images/23/icons.webp)

[https://fonts.google.com/icons](https://fonts.google.com/icons)

## 7). Haikei

Haikei is a very inspiring web tool for generating unique SVG shapes, backgrounds, and patterns.

![haikei](https://www.create-react-app.com/static/img/images/23/haikei.webp)

[https://app.haikei.app/](https://app.haikei.app/)

## 8). CSS Reference

A free visual guide to CSS from the [creator](https://jgthms.com/) of [Bulma](https://bulma.io/).

![css](https://www.create-react-app.com/static/img/images/23/css.webp)

[https://cssreference.io/](https://cssreference.io/)

## 9). Snappify

Snappify is another tool for creating beautiful code snippets. It works almost exactly like [Ray.so](https://ray.so/) that I mentioned in one of my [earlier posts](https://www.create-react-app.com/posts/2021-04-06-top-10-web-dev-tools-04-2021/).

![snappify](https://www.create-react-app.com/static/img/images/23/snappify.webp)

[https://snappify.io/](https://snappify.io/)

## 10). JS is Weird

Not exactly a tool, but a fun quiz, that shows you the weirdest parts of JavaScript. Somehow I got 16/25 😀. Please, share your results in the comments 🤓.

![js](https://www.create-react-app.com/static/img/images/23/js.webp)

[https://jsisweird.com/](https://jsisweird.com/)

---

[Original post @ create-react-app.com](https://www.create-react-app.com/posts/2021-07-12-top-10-web-dev-tools-07-2021/)

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog