In this web period, practically any free devices can be found online to tackle normal issues engineers face each day. And so on, somebody has effectively constructed it.
In this story, I will share my main 12 most loved web devices that make your life as a designer simpler. I center around sites simply because those are prepared to use without establishment. My inclinations are the ones that:
- Appear among the top of Google search results.
- Have a clean and intuitive user interface.
- Provide useful information.
1. Regex
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
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.
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
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
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
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!
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. 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?
9. Cloud Convert
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.
10. App Icon
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.
.gif)
0 Comments