6 Productivity Tools for Front-end Developers
6 tools to increase your productivity as a Front-end developer.
Today I wanted to share with you the tools I daily use to increase my productivity as a front-end developer.
Make your website responsive (almost) without pain, use Sizzy! In my first experience as a web developer, I was given the task of improving the responsive site of the website. And, it was a nice CSS learning lesson. But also, a pain to switch to the mobile view every time I was making a change. It’s at that time I started to use Sizzy.
And, Sizzy is one of those tools that I fall in love with because it is saving me time. It’s not a free tool, but it’ll worth it! Now, let’s stop talking and dig in. One screenshot and you’ll understand the beauty of this tool:
However, you should bear in mind that Sizzy is not a checking cross-browser compatibility. As it does not simulate different browser rendering engines, there’s a might be some minors differences with a real device check.
#2: Get css scan
Another tool that is not free, but that is really good: GetCssScan. It is like a scan for css. So, it will allows to you to quickly check the css of any element on your page. It works as an add-on and has some great features such as the one allowing you to display the grids or display hover styles
#3: Bit and Bit.dev
Spend hours on working on this component? Make it reusable! That’s the sole purpose behind Bit. Bit (Github) lets you easily “harvest” components from your codebase and share them to a collection (a library) in bit.dev.
Bit is the component collaboration platform. Bit leverages component reusability by providing an ecosystem for sharing components between applications and across repositories.
It’s really easy to upload your components to bit, and then, later on, re-use them on another project. Some components are also public, so feel free to check out the work of other developers.
I was not sure I need to present this one as everybody knows it. But, this article will not have been complete without this tools. Cross browser compatibily can be difficult, almost as difficult as responsivity. Can I use is here to help you navigate in the browsers waters.
One of the things I sometimes use is Bundle Phobia. It allows me to find the cost of adding a package. It’s useful when you have to choose between two different packages, or when you want to take a look (and improve) your website performance.
Usage is straight forward, either pick your package or scan your package.json file. If you scan your package.json file, you’ll be able to order your packages by size, and the heaviest might not be the one you were expecting!
#6: Front end checklist
A new tool I just discovered is the front end checklist. As its name says, it’s a checklist. It focuses on all the best practices and things you need to make sure you have before launching a website. It’s common stuff, but there is so much stuff to remember that nobody will regret a quick double-check!
#BONUS : Designs tools
Let’s finish with this bonus: a list by a few design tools that might be useful
💅 For colors and forms :
If you want to do waves, and customize it, you can use Get Waves.
👀 Icons or an Emojis
When it comes to images, there is also plenty of tools. For example you might need to compress them (Image Compressor, Compressor.io or Compress). Don’t forget to use copyrights free images. You can find some here: UIfaces, Pexel, Unsplash or ManyPixels.
Sometimes, the mock-up are not really clear. So there is plenty of websites to find your inspiration. Here is a non-exhaustive list:
And, you? Is there any tool making your life easier that you would like to share? Feel free to share it!
Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!