[18] Top 10 Must-Have Web Dev Tools - March 2021
Tags: codenewbie, webdev, beginners, productivity
Published: 2021-03-08 13:12:12

<!-- wp:paragraph -->
<p>Today I would like to start my new blog post series - Top 10 Must-Have Web Dev Tools. It will be partly a continuation of my last year's series (<a href="https://create-react-app.com/tag/top/">WP</a> / <a href="https://dev.to/villivald/series/9717">DEV</a>) but not quite. The reason for the appearance of this idea is that recently I have accumulated a huge number of links that I would like to share with everyone. I plan to do similar reviews once a month and hope these lists will be useful to someone. So, let's start with March 2021 edition.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>1). Squoosh</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.).</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":407,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-21.44.16-1024x826.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-412"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://squoosh.app/">https://squoosh.app/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>2). Glassmorphism</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This tool helps you to create web design elements inspired by the popular Frosted Glass aesthetic.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":412,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-21.45.32-1024x780.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-412"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://glassmorphism.com/">https://glassmorphism.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>3). VisuAlgo</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A VisuAlgo is the ultimate tool to learn data structures and algorithms visually.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":413,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-21.46.34-1024x532.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-413"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://visualgo.net/en">https://visualgo.net/en</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>4). EStimator</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The EStimator will help if you want to reduce the size of your JS bundle. It allows calculating the size and performance impact of switching to modern JavaScript syntax.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":414,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-21.56.31-1-1024x564.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-414"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://estimator.dev/">https://estimator.dev/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>5). Netlify</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":415,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-21.57.15-1024x433.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-415"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://www.netlify.com/">https://www.netlify.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>6). Hoppscotch</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A free, fast, and beautiful API request builder. A noteworthy alternative to Postman.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":416,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-21.57.29-1024x532.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-416"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://hoppscotch.io/">https://hoppscotch.io/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>7). Stackblitz</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The online code editor for web apps. A wonderful VS Code-like alternative to other online IDE's like Repl, CodePen, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":417,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-22.54.31-1024x348.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-417"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://stackblitz.com/">https://stackblitz.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>8). Buttonbuddy</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A simple and easy-to-use tool for creating accessible buttons. It helps you to ensure that your buttons have accessible contrasts.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":418,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-22.55.19-1024x507.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-418"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://buttonbuddy.dev/#generator">https://buttonbuddy.dev/#generator</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>9). Refactoring Guru</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This resource could be a great starting point for someone interested in refactoring and design patterns.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":419,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-07-at-22.53.48-1024x531.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-419"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://refactoring.guru/refactoring">https://refactoring.guru/refactoring</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>10). Flex Cheatsheet</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A great visual cheat sheet for CSS Flex layout in a form of an interactive playground.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":420,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/03/Screenshot-2021-03-08-at-13.54.25-1024x518.png" alt="Top 10 Must-Have Web Dev Tools - March 2021" class="wp-image-420"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://yoksel.github.io/flex-cheatsheet/">https://yoksel.github.io/flex-cheatsheet/</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>P.S. Please feel free to complete the list by replying to this post. Which web dev tools do you like best?</p>
<!-- /wp:paragraph -->

***

[Original post @ create-react-app.com](https://create-react-app.com/18-top-10-web-dev-tools-03-2021/)

My Site https://villivald.com/
GitHub https://github.com/villivald