6 Productivity Tools for Front-end Developers

6 tools to increase your productivity as a Front-end developer.

Mariequittelier
Jul 31 · 5 min read

Today I wanted to share with you the tools I daily use to increase my productivity as a front-end developer.

#1: Sizzy

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.

#4: CanIUse

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.

#5: BundlePhobia

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 :

Image for post
Image for post

Like that color on a website, find it with ColorZilla. Now that you have your main color, you want to choose colors that looks good with it, use Colorhunt or coolors.co.

You want to use gradients. Uigradients and Webgradients are here for you!

If you want to do waves, and customize it, you can use Get Waves.

👀 Icons or an Emojis

For Icons and emojis, you have plenty of choices. My personal favorites are The Noun Project and Tablericons. But there is also:

🖼️ Images:

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.

🎨 Inspiration:

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!

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Mariequittelier

Written by

I’m a junior web developer 💻 using Javascript, React, Gatsbyjs & ReactNative. I also have interests in photography 📷 , travelling 🗺️ and the environment 🌎

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Mariequittelier

Written by

I’m a junior web developer 💻 using Javascript, React, Gatsbyjs & ReactNative. I also have interests in photography 📷 , travelling 🗺️ and the environment 🌎

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store