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.
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.
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.
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!
If you happen to be using Backbone, then you’re likely already familiar with Underscore, as it’s a hard dependency of the framework.
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.
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!
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!
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.
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…