A Collection of Must-Have Front-End Developer Tools

A collection of must-have front-end developer tools
by admin admin 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 admin admin Date: 20-05-2013 webdesign webdevelopment web resources design tips tutorials hits : 2759  

Related Posts

    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…

    Top 10 Freebies For Designers of 2015

    My grandmother always says, “Nothing in life is free.” In a way, she was correct. Even (some) Google products – considered free – are ad-supported.  Freebies be it any kind of…

    How to Make New Google Map Responsive

    Nowadays static maps (drawn by the guy who works at the ‘art department’) aren’t really used anymore. Using google maps allows you to zoom in/out, get directions,  have a satellite…

    Happy 18th Birthday JavaScript!

    On December 4, 1995, JavaScript was announced in a  press release by Netscape and Sun. The press release leads with this title: NETSCAPE AND SUN ANNOUNCE JAVASCRIPT, THE OPEN, CROSS-PLATFORM OBJECT SCRIPTING LANGUAGE…

    11 Free and Popular Thin Fonts (Commercial Use Allowed)

    In today's post we bring together thin fonts which are really popular among designers.The below fonts are all free both for personal and commercial use. So why not download the ones…

    Bootstrap 3 RC2 released

    Bootstrap just cut a new release for Bootstrap 3, RC2. It's a big release as lots has changed, but that should all be for the better. From the official Blog: Key…

    25 Tutorials of User Interface CSS3 Effects (Advanced)

    We want to present a series of 25 well-explained tutorials of User Interface CSS3 Effects . These CSS effects give developers a quick and easy solution when it comes to enhancing…

    318 useful twitter bootstrap resources #3

    TWITTER BOOTSTRAP FOR FRAMEWORK INTEGRATIONS #2 Means and Methods of Integrating Bootstrap into your Application Framework or CMS PHP CODEIGNITER_FORM_BUILDER CodeIgniter library to build uniform form elements with bootstrap styling WRIGHT The Wright Framework is…