A collection of must-have front-end developer tools

PREPROCESSORS

For years, the front-end community debated over whether CSS preprocessing was necessary. The language is a simple one; why are we complicating it? Thankfully, over time, and as the web stack matured, the majority of front-end developers came to terms with the fact that, until the language itself matures a bit more, preprocessing is a necessity for all but the most trivial of websites. Don’t worry: many of these preprocessor conveniences are slowly but surely working their way into the language. These things simply take time.

SASS

sass-lang.com
As its website so boldly declares, Sass makes CSS fun again. Variables, nesting, mixins… Sass has it all. More importantly, if your goal is to learn the most popular preprocessor available, as well as various frameworks built on top of it, such as Compass, Sass should be your choice.
Sass can even mould itself to fit your needs. If the indent-specific style of the original .sass syntax feels foreign to you, then simply switch to the alternate .scss format, and continue writing your stylesheets in the same fashion that you’ve done for years.
Chances are, if you join a development team in the near future, Sass will be their preprocessor of choice, and the one that you will be asked to learn.

LESS

lesscss.org
Mostly, you’ll find that the three most popular CSS preprocessors – Sass, LESS and Stylus – are more or less the same. Only moderate syntax differences separate the three. In the past, LESS has been the more approachable option for web designers, as it offers a readable CSS-like syntax (something that Sass did not originally offer). As an added bonus, one only needs to import a single JavaScript file to enjoy the flexibility of dynamic stylesheets.

STYLUS

learnboost.github.com/stylus
A relative newcomer to the scene, Stylus perhaps offers the most flexibility of all three preprocessors in this list. Prefer semicolons? Keep them. Hate using colons to separate properties and values? Remove them! The key is in the fact that Stylus provides you with the ability to customise your stylesheets how you see fit. Configurability at its best!
The only downside (and a significant one, at that) is that, due to its age, it’s more than likely that members on your development team – or community contributors if you happen to be developing an open source application – will likely not yet be familiar with Stylus.

COFFEESCRIPT

coffeescript.org
CoffeeScript, as many might put it, makes JavaScript manageable. It begins by removing the ugly bits. Semicolons? Gone. Braces? Those are stripped too. Parentheses? Let’s make them optional. It then provides a number of features, which, for all intents and purposes, translates to syntactic sugar. Lexical scope, splats, array comprehension – CoffeeScript offers it all, while ultimately compiling down to vanilla JavaScript.
Thanks to increased adoption and improvements to source maps, many of the downsides to using such a preprocessor are rapidly becoming non-issues. If you question the need for yet another preprocessor, never fear; like Sass, many of CoffeeScript’s innovations will be implemented into future versions of ECMAScript.

TYYPESCRIPT

www.typescriptlang.org
For those who can’t quite connect with CoffeeScript’s Ruby-like syntax, TypeScript is an excellent alternative. It allows you to continue writing in a dialect of JavaScript, while embracing the latest additions to ECMAScript 6. Similar to CoffeeScript, ultimately, your code compiles down to simple JavaScript that can run in the browser.

CODEKIT

incident57.com/codekit
CodeKit, created by the always funny Bryan Jones, exploded onto the front-end world in 2012 and is now used by such sites as BarackObama.com and Engadget. Like steroids for web developers, it merges various compilers, minifiers and optimisations into one beautiful Mac application. If the Terminal feels like a black box to you, limiting your ability to embrace and harness the previously mentioned preprocessors, then CodeKit is your solution.

LIVERELOAD

livereload.com
LiveReload is quite similar to CodeKit. In fact, disregarding some UI differences, and a few of CodeKit’s unique features, both apps will equally allow you to get from point A to Z, so to speak.
Like CodeKit, LiveReload allows you to monitor a file system for changes, and perform the necessary preprocessing and compiling in response. It will also auto-update the browser upon saving each file.
Unlike CodeKit, however, LiveReload is available for both Mac and Windows. In translation, if you’re a Windows user, LiveReload is, by default, your only choice. Don’t worry; it’s a good one!

LIBRARIES

Chances are, prior to the success of jQuery, you viewed JavaScript in the same light as Voldemort. Refrain from speaking its name, and avoid it at all costs. While jQuery wasn’t the first library to provide a solution for the various cross-browser issues that existed at the time, it was in fact the first library to offer a solution that appealed to the everyday front-end designer. Since then, countless developers have followed suit with their own excellent libraries.

JQUERY

jquery.com
What is there to note about jQuery that hasn’t already been said? jQuery made JavaScript approachable and sparked a new generation of enthusiastic client-side developers. That’s perhaps the greatest compliment that one could ever pay to a library. While it’s certainly not the answer to every problem, when it comes to manipulating the DOM, there’s no better tool.

UNDERSCORE

underscorejs.org
Have you ever felt that JavaScript lacked many obvious native functions, such as find, pluck or shuffle? If so, you certainly wouldn’t be the first. Luckily, the popular Underscore library provides this missing functionality. Think of it as a utility belt that offers a few dozen helper functions that you would otherwise code from scratch, like for each new project.
If you happen to be using Backbone, then you’re likely already familiar with Underscore, as it’s a hard dependency of the framework.

D3

d3js.org
D3 is a fantastic JavaScript-based data visualisation library that allows you to bind data to the DOM and then make transformations to the document. To learn more, refer to D3’s GitHub repository for a massive gallery of examples for visualising various data sets.

TOOLS AND UTILITIES

Once you optimise your coding workflow, it quickly becomes apparent that additional tooling and functionality might be necessary. Such tools include everything from module loaders to test runners.

RequireJS

requirejs.org
At some point, you’ll surely begin to pull away from the idea of nesting all of your JavaScript within a single file. When this day occurs, you’ll quickly come across RequireJS, which is a file/module loader. Unfortunately, though, switching to a modular approach to writing JavaScript is a more difficult process than one might hope for. After you understand the concept of AMD, you then have to decode the logistics: how do you set up RequireJS? What about non-AMD libraries? What about dependency management? What about configuration and optimisation? True, there is a learning curve involved, but it’s absolutely worth it.

TESTEM

github.com/airportyh/testem
One significant barrier to testing is the simple fact that it can sometimes take a considerable amount of setup to get up and running. The longer it takes, the more likely it is that the developer simply won’t bother. That’s why Testem is so fantastic: it makes testing as effortless as possible – and, more importantly, fun!

GRUNT

gruntjs.com
At its core, Grunt is a simple task-based command-line tool for building JavaScript applications. Think of it as a tool that can execute a variety of small, yet common operations. Compilation, minification, test running, deployment – each of these can and should be automated. With Grunt, lengthy processes such as this can be translated into a single command.

NORMALIZE

necolas.github.com/normalize.css
We’ve all experienced it; your website displays beautifully in Chrome and Firefox, but then you view it in Internet Explorer and come to terms with the fact that you’ll be dedicating the next several hours to cross-browser support. Normalize makes all browsers render elements in as consistent a fashion as possible. Have you ever experienced the annoyance of debugging a three-pixel input height inconsistency, from browser to browser? With Normalize, you’ll never deal with that again!

source: webdesignshock.com

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.