We’ve only just begun with 2016 and yet we’ve been seeing spectacular growth among tool and app developments to make the lives of developers and designers, easier.
Creating website functionalities for our clients has never been less complicated; with the significant increase in demand in building richer, user engaging applications and tools, front-end development has seen itself growing more and more complex.
Developers alike have started to consolidate the development process by developing their own tools to make it easier to get applications built here we collected the most loved front-end developer tools that will certainly make your life, easier:
is.js
is.js is a micro check library that lets you check types, regexps, presence, time, and more. It allows you to do conditions faster. I recommend checking out the documentation first since there are some checks done via user agent string checking.
Colorcode
Use this tool if you’re having trouble finding the right shade or hue of the color you want. Features controls for swatches in schemes, change of hue, lightness, and saturation. Choose from monochrome, monochrome and dark gray, monochrome and light gray, analogic, analogic and complement, complement, triad, or quad. When you’re done, export scheme as .scss, .less or .png. You can also share a permalink of your chosen scheme.
Awesomplete
Awesomplete is simply awesome. Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers.
Here’s a sample from Awesomplete on an Ajax form:
var ajax = new XMLHttpRequest();
ajax.open("GET", "https://restcountries.eu/rest/v1/region/asia", true);
ajax.onload = function() {
var list = JSON.parse(ajax.responseText).map(function(i) { return i.name; });
new Awesomplete(document.querySelector("#ajax-example input"),{ list: list });
};
ajax.send();
This will result in the popup listing countries in Asia. Note that by default you need to type at least 2 characters for the popup to show up, but that can be easily customized.
RetinizeIt
Web designers and front end web developers will love RetinizeIt by Artiom Dashinsky. If you need to slice interaction elements from PSDs, then this is the best Photoshop action tool you need.
First you need to choose the layers or groups you need to set as Retina ready. Run Retinize It action, name your files that’s it! Get your sliced assets!
Some pointers from the developer: Work with shapes or Smart Objects. Also I recommend to work on the not-retina PSD-version of the design (1x). If you use Drop Shadow or Inner Shadow properties for the layer you want to slice, keep in mind that “Use Global Light” checkmark is unchecked. Otherwise the shadow’s angle will be changed to the default angle that set in Photoshop.
Responsinator
With the responsive design trend going stronger than ever before, here’s a quick check up tool you can use to check how your site looks like on most devices. In its website, Responsinator is described as “helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices.”
Honorable Mentions
Here are some worthy tools you can also check out to speed up your development workflow:
- Brackets – A modern, open source text editor that understands web design.
- Backbone.js – gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
- CSS Lint – CSS Lint is an open source CSS code quality tool originally written by Nicholas C. Zakas and Nicole Sullivan. It was released in June 2011 at the Velocity conference. A lint tool performs static analysis of source code and flags patterns that might be errors or otherwise cause problems for the developer.
- Springloops – a Git/ SVN version control software for front-end development.
- BrowserStack – a live, web-based, testing tool. Now you can check your site in real-time, across all mobile and web browsers.