A collection of must-have front-end developer tools

A collection of must-have front-end developer tools
by Janeth Kent Date: 20-05-2013 webdesign webdevelopment web resources design tips tutorials


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.


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.


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.


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, 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.


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, 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 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!


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.


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.


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 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.


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.


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.


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!


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.


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

by Janeth Kent Date: 20-05-2013 webdesign webdevelopment web resources design tips tutorials hits : 5396  
Janeth Kent

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.


Related Posts

Top tools for UX design and research

This article is a compilation of the "ux tools" I have tested in recent years. I've separated the tools by categories, although I recommend you to take a look at all…

Cross cultural challenges in web design, an overview

The user experience design of a product essentially lies between the intentions of the product and the characteristics of your user. - David Kadavy - The task of building a culturally appropriate…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

Why You Should Hire Node.js Developer for Your Backend Development

When developers are building a new website, they mainly focus on both frontend and backend development. The frontend code helps create the interfaces through which the app interacts with the…

The concept of Model-View-Controller (MVC) explained

In software engineering, we use design patterns as reusable solutions to a commonly occurring problem, a pattern is like a template for how to solve a problem. Model-View-Controller (MVC)  is a…

The 6 Essentials for Creating a Visually Appealing Web Design

Creating a website might seem like a simple thing. After all, what do you really need besides a good hosting provider and relevant content, right? Well, the reality is quite…

Neumorphism (aka neomorphism) : new trend in UI design

This area, which arises from a basic human need, such as the urge to communicate, is constantly changing thanks to the advances of the technological era. Today, we invite you…

5 ways to improve your user experience

As a brand, UX is incredibly important when it comes to keeping your customers happy and on your site. Afterall, the longer they are on your site, the more likely…

How to Choose a Laptop for Web Design and Development

Efficiency is important at work, no matter the type of job you do. The better the tools that you use, the more productive you are. So if you’re a web…

Guide to viewport units vw, vh, vmin and vmax

The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element…

6 Free Film Effect Photoshop Actions

Film and graphic lovers rejoice! Today we give us this little pack film effect Photoshop actions!  Photoshop actions allow designers to automate common sequences for increased efficiency. If you do much…