5 Free Web Developer Productivity Tools

Google

5 Free Web Developer Engineering productivity tools.

The author of the article, whose translation we are publishing today, says that one of the ways in which a developer manages his work is to use tools that allow him to do more with less effort. Here he wants to talk about five wonderful tools that will allow any developer to increase its productivity. Here’s a video that gives an overview of these tools.

Preliminary remarks

I know that those who read this do not have time to spare, so I will only briefly describe the tools that are offered to you. If you like something, you can easily integrate it into your work process. In addition, I wish to point out that I have nothing to do with any of the projects under consideration here. I just want to share with people what’s good for me.

1. Excalidraw:-

If you are designing software architecture and drawing all kinds of circuits, then you might like the Excalidraw project. This tool allows you to create different kinds of circuits in your browser. We in Devias use Excalidraw to do brainstorming sessions about different issues, like the behavior of users on a website or the architecture of our backend. As already mentioned, Excalidraw supports collaborative work. And this, especially now, during quarantine, when a lot of people are working at remote sites, is especially useful. The only drawback of this project, due to its propriety and free of charge, is that it does not support a cloud data warehouse, which would allow, for example, to save the results of the work in its account. But to be honest, it’s not a big problem, because you can save the results locally and, if necessary, upload them back to the site.

2. Nucleo Icon Transition:-

Now, let’s go to more practical things and talk about a little tool that allows you to create transitions between two SVG icons. This is Nucleo Icon Transition. Here you can configure the transition effect (scale or rotate), select the type of event that starts the transition (click or hover). This tool generates a single SVG file containing the descriptions of both icons and the Javascript code responsible for the transition. The essence of this tool is that it equips icons with the classes with which the script works.

To add an animated icon to your project, it is enough to download the resulting SVG file and add its contents to your HTML code. Here’s what the contents of this file might look like.

If you plan to use the transition effect for multiple icons, you can optimize the code with the script, as the same script is used everywhere.

3. Type Scale:-

If you, like me, often create sites from scratch, you might quite like the Type Scale project, which can help you with font selection. It supports font selection and configuration of font properties such as size and scaling ratio. The results of font configuration are immediately displayed on the page using a template text containing various elements. You can export a CSS code that contains font options. I usually use this tool when I need some special fonts, and I don’t want to spend too much time trying to match them.

4. Roam Research:-

My productivity has helped to maintain the constant use of the dockets. I use Roam Research, which, among other things, allows me to bind cases. The project uses a kind of distinctive markup language. The links between cases make it possible to deal with lists of cases in the form of related entities, which helps, for example, to get to the source of an idea and to analyse the steps involved in its implementation. In fact, the way this project works is quite difficult to explain, and maybe I’m just not very good at expressing such ideas. I started using Roam Research just a few days ago, but I have to say, I really liked the idea of this project. Maybe that’s because he’s pushing me to write short notes expressing the most important things, not long descriptions of cases that I never read. Now Roam Research is a free project due to its novelty. But I have every confidence that there will always be a free version.

5. Happy Hues :-

This tool is for developers who are doing a little bit of design. This is the Happy Hues project. It is not an application, but rather a resource for those who are not very good at choosing color palettes. On this site you can find a lot of predefined color combinations. I suppose it’s impossible not to find what matches your style. I always keep this resource at hand, using it, for example, when I need to find a good color combination that has a decent level of contrast and is tested for content availability.

Outcome

I just shared with you a secret list of tools that help me work productively. It is possible that some of them will be useful to you. If you know any interesting tools that increase the productivity of web developers - then share them in comments!

We remind you that we still have a forecast contest where you can win the new iPhone. There’s still time to break into it and make the most accurate prediction of the current values.