[22] Top 10 Must-Have Web Dev Tools – June 2021
Tags: codenewbie, productivity, webdev, beginners
Published: 2021-06-16 06:28:18

It's been a month since the last post, so it means it's time to continue 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). Eleventy

Eleventy is a well-known and gaining momentum [static site generator](https://jamstack.org/generators/). I have recently moved [my blog](https://www.create-react-app.com/) from WordPress to Eleventy, and it was the best decision to make in terms of performance and accessibility. Here is the [latest Lighthouse score](https://crappblog.netlify.app/blog-on-vercel/) as confirmation of my words.

![eleventy](https://reverent-carson-67c52e.netlify.app/static/img/images/22/11ty.webp)

[https://www.11ty.dev/](https://www.11ty.dev/)

## 2). DrawKit

DrawKit is a superb resource for picking free illustrations and icons for your next project. I came across it when looking for illustrations for my last [project](https://vaccine2021.vercel.app/) and was pleasantly surprised by its quality.

![drawkit](https://reverent-carson-67c52e.netlify.app/static/img/images/22/drawkit.webp)

[https://www.drawkit.io/](https://www.drawkit.io/)

## 3). Git Command Explorer

Actually, Git Command Explorer could be an even more comprehensive and simple tool than the much more famous [Oh Shit, Git!?!](https://ohshitgit.com/) I mentioned in an [earlier post](https://dev.to/villivald/14-the-15-best-developer-resources-in-2020-18mn) last year.

![git explorer](https://reverent-carson-67c52e.netlify.app/static/img/images/22/gitexplorer.webp)

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

## 4). favicon.io

Here I'd like to quote their official website: _The only favicon generator you need for your next project_.

![Top 10 Must-Have Web Dev Tools](https://reverent-carson-67c52e.netlify.app/static/img/images/22/faviconio.webp)

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

## 5). Create App

Create App is an alternative way of creating boilerplate for a modern web app. You can choose between React, Vue, Svelte or vanilla JS, and Webpack, Parcel, and Snowpack as well.

![create app](https://reverent-carson-67c52e.netlify.app/static/img/images/22/createapp.webp)

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

## 6). SVG PORN

Quality vector logos for every need. I was using them for a while on my [website](https://villivald.com/).

![svg porn](https://reverent-carson-67c52e.netlify.app/static/img/images/22/svgporn.webp)

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

## 7). PIXEL ART TO CSS

As for that tool, I haven't found a particular application in practice, but it's just a very amusing project which I would like to share with you.

![pixel art to css](https://reverent-carson-67c52e.netlify.app/static/img/images/22/pixelart.webp)

[https://www.pixelartcss.com/](https://www.pixelartcss.com/)

## 8). Devhints.io

Pretty useful author's selection of cheatsheets dealing with various topics, such as CSS, DevOps, JS, React, Rails, you name it.

![devhints](https://reverent-carson-67c52e.netlify.app/static/img/images/22/devhints.webp)

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

## 9). Big-O Cheat Sheet

This webpage visually covers space and time Big-O complexities of common algorithms used in Computer Science. Also available as a [PDF](https://www.bigocheatsheet.com/pdf/big-o-cheatsheet.pdf).

![big o cheatsheet](https://reverent-carson-67c52e.netlify.app/static/img/images/22/bigo.webp)

[https://www.bigocheatsheet.com/](https://www.bigocheatsheet.com/)

## 10). Onelang.io

Onelang is an impressive online IDE tool that allows you to transpile code from one language to another in seconds. At the moment, they have support for TypeScript, Perl, Ruby, C++, C#, PHP, Swift, Go, Java, Python, and JavaScript.

![onelang](https://reverent-carson-67c52e.netlify.app/static/img/images/22/onelang.webp)

[https://ide.onelang.io/](https://ide.onelang.io/)

---

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

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