Front-End Dev Tools For increased Productivity

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.

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

The CSS-grid is a grid-based layout system that can be archived using just CSS and HTML. Unlike bootstrap or flexbox, the grid system is two-dimensional making it highly customizable and achievable with much less code.

[cssgrid-generator](https://cssgrid-generator.netlify.com/) 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

If you’ve ever wondered how to achieve awesome multi-layered shadow effects for any shapes you have on your website but find it difficult to code, here’s a super cool website that can help you: brumm.af/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

Who doesn’t like it when there’s a cool gradient in their design! Well, maybe not everyone, but whether you’re a fan of gradients or not, customizing your gradient to achieve the exact match from the design takes trial and error when writing CSS.

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

Let’s face it, no matter how well you code your website you may run into some issues here and there with browser compatibility, responsiveness, etc. In these cases, understanding the exact specifications of the browser and system is an important aspect of fixing the specific issue.

With [**mybrowser.fyi**](https://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

If you’ve worked with transition effects in CSS, there’s a high chance that you’ve used the transition-timing-function property to set the transition effect speed and the cubic-bezier() function to adjust transition effect with variable speed from start to end. But passing the values for cubic-bezier() is a little tricky to achieve the exact speed and that is where easings ease the job for you. Just choose your desired effect from their collection easeInSine, easeOutSine, etc, and it gives you the values that should be passed to the function for the same. You can see a sample image below:

easing transitions

6. iHateRegex

Custom conditions include things like, the username should start with an alphabet character and cannot include special characters except @, or the password should contain at least one uppercase and one special character. Validating against a regex expression is one of the most common techniques used on the front end to validate against custom conditions like this.

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

browserhacks is a simple tool with an extensive list of browser-specific CSS and JavaScript hacks from all over the internet.

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

Coming back to animations, animista is one of the best websites for generating and customizing code for endless CSS animations with various effects. You can choose from their collection of various use cases, like entrances, exits, texts, etc, and customize them with numerous effects. If you explore this tool you’ll be surprised by the range of options it offers and ease of use.

9. coolors

Defining a color scheme is one of the first things we want to do when designing a website. In most cases, we start off with a base color and try to create a color palette around it.

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

One of the main challenges working on the front-end is managing to keep the assets as light as possible to ensure the highest level of performance for every user. But it’s not easy, especially when designers throw in high-quality images which may look very sharp and cool at first sight but whose size is always an issue when you consider page load times. Optimizilla is one of the best image optimizer tools on the web which “uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality”. You can also adjust the compression level and compare images on the website itself.

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

Skeuomorphism is the design concept of making items in UI resemble their real-world counterparts. One of the best examples out there is Apple’s editor tools in iOS 13. Notice how the items in the toolbar have a nice 3D effect and look realistic compared to the old design.

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!

Did you find this article valuable?

Support Nabil Nalakath by becoming a sponsor. Any amount is appreciated!