Top 6 (unknown) utilities for web developers
Happy New Years! I decided to take a pause from blogging for a few months. Now I am back and willing to post more often on 2022.
During the last months I have found a few online tools that make easier some tasks when doing web development. I have shared them with some of my friends in the tech field, and the usual response after thanking me tends to be “I didn’t know this was a thing!” So, given the positive feedback I always get, I decided to gather them all up in an article and share it online!
If you have ever said to yourself “There should be a tool for this task.” Chances are there is one already out there someone in the community built, but you just haven’t heard that exists.
TL;DR
Attached are the links to the resources:
Developer Roadmaps
Like the name suggests it, Roadmaps is a free online guide for developers with different levels and needs who may be wondering what language/tool should be learnt next. This resource a project that is being currently updated. So far there are 10 roadmaps available to the public, and two upcoming ones for learning how to be a QA Analysts and learning AWS. As of the time this article is being originally written (January 2022), the guide for Front-End Development has recently added a more complete look for some of its listed items by including recommended external links and resources to learn them.
Devdocs
Devdocs is an open source online and offline Progressive Web App (PWA) designed to aid specifically web developers. Without using external links, the app gathers all necessary documentation for a variety of programming languages, libraries, frameworks and APIs. It is just a matter of clicking on the desired tool to start learning it!
readme.so
readme.so is a free online editor that comes with translations to different languages and allows users to create ReadMe files for their projects. The landing page will display a button to get started with the editor as well as an option for anyone to donate to the project. The editor lets users instantly create and have a preview of it next to it. This utility also comes with an option on the upper right side to locally download the current file if the user clicks on it.
One of nicest things I find about readme.so is how simple it visually is, as well as having an editor that is easy to manipulate. Definitely a handy tool for developers who may want to manually attach a ReadMe file to their project or have a visualization when editing an existing one.
OverApi
With a simple design in sight, overAPI is an online compilation of downloable cheatsheets and external links for a variety of programming languages and frameworks.
Although, it is important to point out its contents are not limited to web development. The website also offers cheat sheets for math subjects, such as calculus and statistics, and a variety of technologies, such as Microsoft Word or Adobe. This tool is definitely worth giving a try when looking up how to quickly master a technology.
Code Beautify
Code Beutify is a free online tool which can be installed as a Chrome Extension. At first sight, it offers a huge wide range of tools to style, format and minimize programming languages such as JavaScript, HTML, CSS as well as some formats such as JSON and XML.
It is worth sharing, the website also offers a variety of tools for conversions that are not limited to programming languages, so one may find image format and number conversion utilities useful in case they are ever needed.
It only takes scrolling down to the bottom of their main page to check out all of the tools being offered:
Animista
This one is for the CSS lovers. Animista is a free online tool developed with the sole purpose to create and edit code for some of the most common animations in CSS. It accomplishes this by sorting them all in six categories: Basic, Entrances, Exits, Text, Attention and Background.
For each category there is a group of self-describing animations, and each animation contains all of its variants. Once the desired animation has been selected, an example will be displayed. The options form in the left side can be used to test and modify the animation example. After finishing testing, it out, one of the right-side buttons will give the user the option to get the animation’s CSS code for ready to copy and paste.
Personally, generating the syntax for the CSS keyframes animations is not among my strengths. Therefore, having a tool like Animista makes the job of adding them to projects easier for me.
Bonus: Clean Code
Thanks for reaching up to this part of the article! While not necessarily a utility to work, I found it worth sharing in this post. For those who may be unfamiliar with it, Clean Code is a coding guide for programmers written by Robert C. Martin. The book makes notes on good and bad practices when structuring code. The examples, however, were written in Java language. New devs who are unfamiliar with Java syntax may find this a little discouraging. Fortunately for them, there is a free online repo with a condensed version of the ideas in the book. Not only that, but the examples present in the repo have been converted from Java to JavaScript language. How cool is that?
Hopefully this article will inspire web developers to help on their research for tools that may facilitate their work while making sure the wheel does not get reinvented over and over again.
