One of the best ways to work smarter as a developer is to use tools that can help you write less code but provide the same value (does that make sense?), so in this short blog post, I will show you 5 free amazing tools that will make you more overall productive developer. Also, you can watch this 5-minute YouTube video of me speaking about these if you like video content more.

I know you don't have much time procrastinating so I will just list the essential features of each tool instead of writing long marketing descriptions. Kind of grab and go blog post. Also, I have no affiliation with any of these products, I just want to share with you the value they bring to the table. If you find these tools as useful as I did please consider following me.

So without a particular order let's start with a tool called

1. Excalidraw

If you are designing software architecture like flowcharts or other related diagrams there is this amazing tool called Excalidraw which enables you to draw diagrams with your team immediately in the browser. We use Excalidraw here at Devias to brainstorm our website’s user flows and back end architecture. As I mentioned earlier you can also invite people to build diagrams together which really cool especially in these times of isolation where remote collaboration is essential. The only downside of this app because it is open source and free there is no cloud storage like saving your work in your account but honestly that's not that big of a deal because you can save your files locally after you finished and open them later just like any source file.

2. Nucleo Icon Transition

Let's get more practical now with a small tool created by the folks from Nucleo app which quickly generates icon transitions from two SVG icons. You can change the effect of the transition to rotate or scale and also choose the event type which will fire the transition, to hover or click. The web tool generates one SVG file with both icons inside which also contains the JavaScript code for making this transition happen. What the tool does behind the doors is just adding some classes to the icons which are targeted by the script.

To add an animated icon into your website download the SVG you just created and simply add it in your HTML.

And voila:

If you are planning to use more than one icon transitions you can remove the script as it is the same for all icons.

3. Typescale

If you are like me and you create websites from scratch frequently you should use this tool called typescale which can help you create your typography much faster. You can export CSS code based on font selected and scale - which can vary from small to big incremental ratios. You can also add a secondary body typography for stuff like paragraphs which can have its own font, and they also have some dummy text there to help you pair fonts much easier. I personally use this tool whenever I'm starting a new project that needs custom fonts and I don't want to waste time choosing the right line-height, sizes, fonts and so on.

4. RoamResearch

Something that keeps me productive is having a to-do list of everything that needs to be done every single day, so I'm using Roam Research which a interesting and weird to do app in a sense that you can create your to-dos with references to other to-dos in kind of markdown language. This referencing technique creates an interconnection of your lists which can help you go back and forth to the original idea of the to-do. It's a weird way to explain or I'm just awful at making sense but I just started using it a few days ago and I must say I really like the idea behind this product probably because it forces me to take small important notes instead of long lines of text which I never read. Right now they don't have a pricing plan because it's a new app but I'm pretty sure they will always have a free tier as well.

5. HappyHues

Let's turn the page now with a tool for developers who also do some design work on the side with a website called Happy Hues. This is not really an application but rather a resource for people who are not that great with choosing color pallets like me. This website provides so many color combinations to choose from that's impossible to not find the one that suits your style. I always keep this resource close in my bookmarks whenever I need to find a good color combination that just works well in terms of contrast ratios and passes the accessibility tests

So this would be my secret list of apps that makes me a more productive developer overall, I encourage you to try some of them and let me know what you think in the comments or if you have a suggestion of a tool that you can't live without please let us in the comments.

Follow me on YouTube / Twitter