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.
“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 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.
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.
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.
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.
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.
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
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:
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.
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.
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.
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.
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.
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.
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.
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!