Tools for an easier development process

Tools make our development process easier and more efficient. Each one can give us a bunch of advantages and can save us time.

For this reason, I want to share with you a set of tools that I found useful in my day-to-day work. They can be grouped into 4 areas:

• Coding tools
• Deploying tools
• Video & Images Management tools
• Browsers & Devices tools

Coding tools:

1. CSS Flexbox cheat sheet
   All you need to know about flexbox is here and it’s nicely described.
   Link: https://css-tricks.com/snippets/css/a-guide-to-flexbox
2. Flexbox Froggy
   If you are looking for a different way of learning flexbox, here’s an interactive game that explains how flexbox works.
   Link: https://flexboxfroggy.com
3. RunJS
   Sometimes you need to run some JavaScript code snippets to test something and you also need to use some npm packages. RunJS desktop app can help you do this quickly and it works really well.
   Link: https://runjs.app
4. NoCodeAPI
   This tool provides easy access to third party app data without any code. It’s serverless and keys are encrypted in their cloud. You can connect to some apps like: Instagram, Google Drive, Telegram, Spotify, Slack, Twitter, YouTube, GitHub, etc.
   Link: https://nocodeapi.com
5. Bracket Pair Colorizer 2
   We all know that it’s difficult to find the opening/closing bracket on a long function, this VSCode extension will solve that problem.
   Link: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
6. Carbon
   If you want to share a code snippet in a fancy way, here’s your tool!
   Link: https://carbon.now.sh
7. Dev Hints
   Finding good tips about different technologies/practices is really easy if you use this website.
   Link: https://devhints.io
8. I Hate Regex
   The name describes itself, right? For the ones who don’t like working with regex, here you’ll find some predefined useful regex expressions that can save you time.
   Link: https://ihateregex.io
9. Awesome README
   Looking for some cool README file? On this repo you’ll find a bunch of examples, articles, tools and more that will help you create your own awesome README file.
   Link: https://github.com/matiassingers/awesome-readme
10. Devchallenges
    If you are looking to practice your skills and you don’t know what project you can create, this is your website. Devchallenges offers a bunch of different projects with it’s own requirements and designs. Check it out!
    Link: https://devchallenges.io

Deploying tools:

1. Vercel
   This tool can help you to quickly deploy your application without having your own server/domain. You just need to sync up your GitHub account and import the project you want. Every new commit to the master branch will execute a new build.
   Link: https://vercel.com

Video & Images Management tools:

1. Animaticons
   Here you’ll find a bunch of animated GIFs that can help you add some interesting media content to your project.
   Link: https://animaticons.co
2. Squoosh
   No more heavy weight images! This tool will compress any image you want.
   Link: https://squoosh.app
3. App Mockup
   This tool gives us the opportunity to create some cool app screenshots using different templates. Check it out!
   Link: https://app-mockup.com
4. RemoveBG
   A quick tool to remove image backgrounds with just a few clicks.
   Link: https://www.remove.bg
5. Unscreen
   A quick tool to remove video background, automatically and free.
   Link: https://www.unscreen.com

Browsers and Devices tools:

1. Can I Use
   Sometimes you might need to check browser compatibility when using a feature, here you’ll find the information you need about that.
   Link: https://caniuse.com
2. Responsively
   Testing your app on multiple devices at the same time sounds interesting right? Responsively makes that possible.
   Link: https://responsively.app

Hope you find a tool that fits your needs :)

If you know a couple more and would like to tell us, please comment below.

Emiliano Castellano
Sr. Software Engineer | React @ Spark Digital