Amazing tools that you must use to improve your work flow
Tags: tooling, webdev, workplace, programming
Published: 2023-10-19 00:59:49


Development can be hard work, and there are a lot of tools that can make your life easy in the development world.

Here I list some tools that I use to achieve web development.


**Regexr**
This site lets you build regex expressions while explaining how it will behave. Supports JavaScript & PHP/PCRE RegEx. Very useful if dealing with complex expressions.
[regexr.com](https://regexr.com/)

**Built With**
This page can explore other sites and describe which technologies or tools were implemented.
[builtwith.com](https://builtwith.com/)

**Dummy JSON**
This page provides you a lot of data in JSON format, very useful to mock up different types of data.
[dummyjson.com](https://dummyjson.com/)


**Metatags**
This tools let you explore the metadata of a site. Can be used to enhance SEO and Open Graph information.
[metatags.io](https://metatags.io/)

**Facebook debugger web tool**
Similar to metatags, this tools explore metadata information from any website.
[developers.facebook.com/tools/debug](https://developers.facebook.com/tools/debug/)


**Photopea**
This amazing tool lets you work with graphics. Its functionality is similar to Adobe Photoshop
[www.photopea.com](https://www.photopea.com/)


**Google Analytics**
With this platform, you can create a Google tag or use the Analytics SDK to integrate to your website, track events and the type of your visitors. Useful to create reports and analyze util data.
[https://analytics.google.com](https://analytics.google.com/analytics/web/#/)


**Free Image Stocks**
These websites let you get free and high-quality images.
[unsplash.com](https://unsplash.com/)
[pexels.com](https://www.pexels.com/)
[rawpixel.com](https://www.rawpixel.com/)
[pond5.com](https://www.pond5.com/free)


**Freepik**
Freepik offers a widely amount of editable files free.
[freepik.com](https://www.freepik.com/)


**Icon stocks**
In these sites, you will find cool icon collections to use in your websites.
[iconfinder.com](https://www.iconfinder.com/)
[icons8.com](https://icons8.com/)
[flaticon.com](https://www.flaticon.com/)


**Code Sandbox**
In this site, you can connect with your github account and serve repositories online with other people.
https://codesandbox.io/


**Deployment sites**
This list makes reference to some popular sites that provide needed infrastructure where you can deploy your projects. These sites have free and paid plans.
[Supabase](https://supabase.com/)
[Heroku](https://dashboard.heroku.com/)
[Firebase](https://firebase.google.com/)
[Vercel](https://vercel.com/)
[railway.app](https://railway.app/)


**Request Bin**
This site lets you mock up endpoints, so you can test HTTP calls.
[requestbin.com](https://public.requestbin.com/)

**Image space Mockup**
Do you need to mock an image fast without creating the graphic? Try this page. You only need to specify the width and the height at the end of the url.
[Image of 1000 x 200](https://via.placeholder.com/1000x200)


**Tailwind Colors**
Have a fast reference of the colors available in the Tailwind lib.
[tailwindcss.com](https://tailwindcss.com/docs/customizing-colors)


**JSON Viewer (Chrome Extension)**
Have a pretty visualization of JSON files when they are open in your explorer.
[github.com/tulios/json-viewer](https://github.com/tulios/json-viewer)


**What are some other cool tools or sites that should be mentioned?**

I read you in the comments...