Front-End Dev Tools For increased Productivity

A collection of online tools that can significantly boost your UI/UX skills as a front-end developer.

Nabil Nalakath
Feb 28 · 7 min read
BG Image by Kelli Tungay on Unsplash

“Front end web development” was not a very popular term a decade ago. But the days when most web developers used to work on both websites and backend web apps are long gone.

Front end development is one of the coolest profiles for a developer to work on now. The introduction of modern frameworks that run on the front end, like Angular, React, and Vue, modern browsers with support for a lot of features that were not thought to be possible at the browser end, and graphics engines like WebGL are just some of the factors that have brought more focus on front end development.

That being said, achieving complex designs and intuitive user interfaces that can catch anyone's attention on the first visit is not an easy task. Keeping up with all the upcoming trends in design, UI/UX principles, and maintaining performance at the same time is a challenge.

So, here’s a list of online tools to help you with various front end development challenges and to increase your productivity. Most of them run purely on the front end!


1. CSS Grid-Generator

cssgrid-generator allows you to design your grid with customizable options like rows, columns or even gaps between them and export the code for the grid with the click of a button.

CSS Grid Generator

2. Box-Shadows

Set your preferences for properties like the layer of shadows, alpha, blur, spread, etc, and it instantly generates the CSS code for the shadow effect which you can copy-paste for any shape you have.

generating CSS for box shadow

3. Grabient

Grabient does this for you. Simply select your colors, adjust your angles, and you’re good to go with the code for the desired gradient.


4. Mybrowser.fyi

With mybrowser.fyi all you need to do is open the tool in the exact same browser conditions that the issue was found. IT instantly generates a report with all the necessary details and gives you a shareable link to the report.

Report generated on mybrowser.fyi

5. Easings

easing transitions

6. iHateRegex

But writing the precise regular expression for these conditions is not something everyone loves, especially if you are not familiar with regex. iHateRegex is a tool that can be used to find regex expressions, validating them against inputs and visualizing them for better clarity.

Regex for username on iHateRegex

7. browserhacks

Needless to say, a hack is not always the perfect solution to the problem but it can come in handy in those situations where you need a quick fix for the weird issue which you can't seem to figure out the solution easily. But this site contains a huge collection of hacks for almost all browsers out there as well as for different versions of each browser.

List of hacks available for ie on browserhacks.com

8. animista


9. coolors

Whether you have a base color to start off with or not, coolors is a cool and intuitive tool to generate color palettes online. It allows you to create color palettes with just a key-press and customize them in multiple methods like HSB, RGB, CMYK or the good old color picker. You can also lock a color or drag it to different positions and then generate other colors around it as much as you like. You can even adjust settings for various kinds of color blindness. The best part is that they provide multiple options to export like SCSS, SVG, PDF, URL, etc.

generating a color scheme on coolors

10. Optimizilla

Image optimization on Optimizilla

Yes, I know the title says 10 but here’s an easter egg for making it all the way down here! A fresh concept if you haven't heard of it already and a cool tool to implement.

Neumorphism

Neumorphism is a new approach that takes this UI trend a notch up. The name is basically a combination of “new” and “skeuomorphism.” Before deviating from the article title, here’s an awesome tool that lets you create the neumorphism effect online and generate the CSS instantly.

On neumorphism.io you can create the effect pretty easily and adjust the look and feel of the design with properties like blur, shape, intensity, and even lighting angle.

Creating beautiful neumorphism effects on neumorphism.io

No more surprises!

I hope you find these useful and, if you are using some cool tools not included here, please mention them in the responses!

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Nabil Nalakath

Written by

Sapiophile. I Speak Code, love literature, binge thrillers, enjoy bibliosmia, and seek adventures.

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

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