JWT, EpochConverter, freepik, and more

Photo by Jeff Hopper on Unsplash

In this internet era, almost any free tools can be found online to solve common problems developers face every day. You name it, someone has already built it.

In this story, I’m going to share my top 12 favorite web tools that make your life as a developer easier. I focus on websites only because those are ready to use without installation. My preferences are the ones that:

• Appear among the top of Google search results.

• Have a clean and intuitive user interface.

• Provide useful information.

1. Regex

https://regex101.com/

Regular Express (regex) is one of the best ways to validate user input, replace words or symbols, and extract information in a specific pattern. It’s not easy to write a complicated Regex correctly in one try without testing and validation. That’s where regular expressions 101 comes to help.

Even if you’re not familiar with regex, this tool gives you a clear explanation of every token, qualifier, and flag. Not only the tool shows which parts of the input string match your regex, but it also tells you the meaning of each segment in your regex. The more you use, the more you learn.

2. Crontab

https://crontab.cronhub.io/

At the backend, you can schedule a job to run repeatedly at a specific interval by defining a cron expression. Cron express consists of five or six fields, depending on the framework or OS it’s running on. For example, a cron express looks like this 0 0/10 , which can be interpreted as every ten minutes.

While the cron expression is not the hardest thing to read or write, if you’re not familiar with it, you need a tool like crontab.cronhub.io to help you read the cron expressions written by other developers and validate your own expression. The website supports both five and six fields.

3. EpochConverter

https://www.epochconverter.com/

Can you quickly tell this timestamp 1603497518 is in the past or future? Is it in seconds or milliseconds? EpochConverter converts a Unix timestamp to a human-readable date time and vice versa.

The best part is that it supports seconds, milliseconds, microseconds, and even nanoseconds and tells you what it is, so you don’t have to second-guess the value you paste into the box.

4. URL-Encoder

https://www.urlencoder.org/

URL Decode and Encoder allows you to decode and encode strings that are used in the URL. Usually, when testing some APIs, you need this tool to encode a query parameter to escape special characters.

5. JWT

https://jwt.io/

JSON web tokens are often used in authentication to provide secure API calls without having to pass username and password into the requests every time. If you are new to JSON web tokens, the best way to understand them is to look at the decoded content.

JWT.IO allows you to decode, verify and generate JWT. It segments your token into three parts with distinctive colors and displays their payloads respectively. You can use it to debug the token by checking the iat and exp timestamp so that you can tell when the token was issued and whether it is expired.

6. JSONFormatter and Validator

https://jsonformatter.curiousconcept.com/

Regardless of working on the backend or frontend, you usually see objects or logs in a bunch of unformatted JSON, either from logs or Chrome network inspect.

The first thing you want to do is to format it so that it can be easily readable. JSON Formatter & Validator allows you to prettify the JSON with different types of spacing. It is also able to fix minor errors in stringified JSON, such as trailing comma or missing quotes.

7. Text Compare!

https://text-compare.com/

Github provides a side-by-side comparison view between two commits, but sometimes you need to compare codes from two totally different sources. It’s too tedious to find the differences line by line with naked eyes.

Text Compare! provides a side-by-side comparison view between two blocks of text. It highlights the different parts. It’s not just for code. You can ask someone to edit an article you write, and then you can easily through the edited part with this tool.

8. flaticon

https://www.flaticon.com/

Usually, it’s the designer’s job to find or create assets for the frontend UI. If you have to take off your developer hat and put on the designer hat, Flaticon is the best website to provide you free icons in different sizes and different formats (PNG and SVG).

If you use any icons from this website, be sure to give the author the credit somewhere in your work.

If you are not sure which icon to use for which action, simply put the action word into the search box. For simple icons, you can change color directly on the website, so you don’t need any installed software to change the color after downloading it.

An honorable mention is **https://ionic.io/ionicons**, a set of open source icons for use in web, iOS, Android, and desktop apps.

9. freepik

https://www.freepik.com/

Similar to Flaticon, freepik provides a whole range of free images you can use for your front end. Once again, make sure to give the author proper credit. The image you download is in a zip, which may contain an eps format that you can edit in Adobe Illustrator.

I strongly recommend you to check out https://www.freepik.com/stories or https://storyset.com/ if you need assets for your storytelling or onboarding.

https://www.freepik.com/stories

10. Name That Color

https://chir.ag/projects/name-that-color/

If naming variables is the hardest thing in programming, naming colors is probably the second hardest thing. How do you usually name your 50 shades of grey in your color asset?

• grey, light grey, lighter grey, dark grey, darker grey

• grey-100, grey-300, grey-500, grey-700, grey-900

• background-grey, shadow-grey, text-grey, border-grey

What if you have another new shade of grey that comes in between the names you already have? If you don’t want to name the color by yourself, why not let a website name it for you?

Name that Color gives the closest name to the color you pasted into the hex color input field. For different shades of grey, now you have:

• gallery, mercury, alto, silver, dove gray, scorpion, boulder, etc.

Wait, is it grey or gray?

11. Cloud Convert

https://cloudconvert.com/

Converting video from one format to another format was not easy in the past when you had to buy the software and find the right codec. With CloudConvert, you have all the file extensions and different video output options to choose from.

In case you want to demonstrate a cool animation you created in your pull request, you can use CloudConvert to convert the screen recording to GIF. Attach the GIF under the description of your PR. Your colleagues will be impressed.

12. App Icon

https://appicon.co/

If you’re a mobile developer, you would know Xcode, Android, App Store, and Play Store require the app icon in different sizes, such as 60x60, 80x80, 120x120, 512x512, 1024x1024, etc.

It would be tedious to use Photoshop to resize multiple times and save the duplicate of them. Luckily App Icon Generator simplifies the tedious job for you. All you need to prepare is the largest icon image, which is 1024x1024.

You may not need this for Android because Android Studio has its own adaptive icon generator.

What You Can Take Away From Here

If you find these web tools useful, I have prepared the following HTML so that you can import it to your Chrome Bookmark Manager:

• On Chrome, go to Bookmark Manager (⌘⌥B on Mac).

• Click the ⋮ icon on the top right corner.

• Select Import bookmarks option.

• Select the HTML file you download from the gist above.

• Rearrange the folder to your preference.

All the mentioned web tools are definitely not unique of their kind. You might know other websites with the same functionality and probably better. There are also other VSCode plug-ins or Chrome extensions that can do pretty much the same thing. Feel free to suggest your favorite tools in the comment section below. Cheers🍻!