Get best of the week

5 Free Web Developer Productivity Tools

The author of the article, the translation of which we are publishing today, says that one of the ways to rationally organize the work of the developer is to use tools that allow you to achieve more with less effort. Here he wants to talk about 5 wonderful tools that will allow any developer to increase their productivity. Here is a video that gives an overview of these tools.



Preliminary notes


I know that those who read this do not have too much time, so here I will only briefly describe the tools offered to your attention. If you like something, you can easily integrate it into your workflow. In addition, I want to note that I have nothing to do with any of the projects considered here. I just want to share with everyone who wants to benefit me.

1. Excalidraw



Excalidraw

If you are designing a software architecture and still draw all sorts of schemes, then you may well like the Excalidraw project. This tool allows you to engage in team-building various kinds of schemes in the browser. We at Devias, we use Excalidraw to conduct brainstorming sessions on various issues, such as user behavior on the site or the architecture of our backend. As already mentioned, Excalidraw supports collaboration. And this, especially now, during quarantine, when many work on a remote site, is especially useful. The only drawback of this project, arising from its openness and free of charge, is that it does not support cloud data storage, which would allow, for example, to save the results of work in your account. But, frankly, this is not a particularly big problem, since the results of the work can be saved locally, and, if necessary, uploaded back to the site.

2. Nucleo Icon Transition



Nucleo Icon Transition

Now let's move on to more practical things and talk about a small tool that allows you to generate transitions between two SVG icons. This is a Nucleo Icon Transition project. Here you can configure the transition effect (scale or rotate), select the type of event that triggers the transition (click or hover). This tool generates a single SVG file containing 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 the script works with.

In order to add an animated icon to your project, just load the resulting SVG file and add its contents to your HTML code. Here is what the contents of this file might look like.


Contents of an Automatically Generated SVG File

Here's what I got.


Automatically generated animated icon

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

3. Type Scale



Type Scale

If you, like me, often create sites from scratch, then you may well like the Type Scale project, which can help you in the selection of fonts. It supports font selection and customization of its properties, such as size and scale factor. The font settings are immediately displayed on the page using template text containing various elements. You can export CSS code containing font options. I usually use this tool when I need some special fonts, and I don’t want to spend too much time choosing their parameters.

4. Roam Research



Roam Research

My productivity helps maintain the continued use of to-do lists. To maintain such lists, I use the Roam Research application, which, among other things, allows you to connect business. The project uses something like a special markup language. Relationships between cases allow you to consider to-do lists in the form of interconnected entities, which helps, for example, get to the origins of a certain idea and analyze the steps associated with its implementation. In fact, the way this project works is rather difficult to explain, or maybe I just don’t know how to express such ideas. I started using Roam Research just a few days ago, but I must say that I really liked the idea of ​​this project. Perhaps this is due to the fact that he is pushing me to create short notes that express the most important, rather than long descriptions of cases that I never read. Now Roam Research is a free project, due to its novelty. But I'm pretty surethat its free option will always exist.

5. Happy Hues



Happy Hues

This tool is intended for developers who are a little involved in design. It's about the Happy Hues project. This is rather not an application, but a resource designed for those who are not very good at choosing color palettes. On this site you can find many pre-selected color combinations. I suppose it's simply impossible not to find something that matches your style. I always keep this resource at hand, resorting to it, for example, when I need to find a good combination of colors, which is distinguished by a decent level of contrast and passes tests for the availability of content.

Summary


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 of any interesting tools that increase the productivity of web developers, then share them in the comments!

We remind you that we are continuing the prediction contest in which you can win a brand new iPhone. There is still time to break into it, and make the most accurate forecast on topical values.

More articles:


All Articles