Front end web developers hold a great responsibility to craft pixel-perfect layouts that run properly in all web browsers. Over time this has become easier with more advanced browsers and greater development tools.
While everyone knows about HTML and CSS, fewer people know about Sass and Haml. Front end development continues to advance with each passing year and it’s the role of the developer to stay on top of these changes.
If you’ve felt a little shaky with your front end skills or just want a refresher about some of the newer techniques, this guide is for you. I’ll cover a handful of popular tools and resources that every front end developer should use or at least know about.
CSS Preprocessors
Perhaps the most well-known CSS preprocessor is Sass, followed closely by Less. These are both libraries of code that parse custom CSS syntax to create more dynamic and modular code.
The term “Sass” refers to the technology and the syntax. Sass files can also be SCSS files. Less is the same thing just with different syntax.
Sass and Less are not languages per se, but more like extensions of CSS. Sass/Less code will compile to pure CSS.
The biggest difference between Sass and Less, aside from syntax, is how they operate. Sass runs on Ruby while Less runs on JavaScript (or with Node.js).
Please note that CSS preprocessing does require a little knowledge of Terminal/CLI commands. You don’t need to be an expert, but you will need to get comfortable working in the command line. For example, the quickest way to compile a Sass file is to run something like this in terminal:
sass input.scss output.css
But once you get some practice it becomes like second nature.
Here are some resources for learning more about CSS preprocessors:
- http://sass-guidelin.es/
- http://thesassway.com/beginner/
- https://scotch.io/tutorials/getting-started-with-less
- http://www.cssauthor.com/less-tutorials/
Git Version Control
Project management and version control is absolutely essential for big web projects. Communities like GitHub have made “Git” a commonly-known piece of technology.
But how does it work, and why should you care?
Git is a version control system which allows developers to write code without overwriting previous work. This is possible through branching where various snapshots of a project can be saved like an archive. With Git it’s possible to branch off your current project, try adding a new feature, then either save if you like it or delete that branch if it doesn’t work.
The Git installation is super easy on all operating systems. The learning curve is a bit more detailed since you’ll need to learn new terms like commit, branch, and checkout.
But with an introductory guide and lots of practice, Git will slowly become ingrained into your front end workflow.
One of the biggest hurdles can be memorizing how to use Git via command line. This is a preferred method by most programmers who already use the CLI daily. However if you’re a bit nervous try starting with a Git GUI app instead. Free options like the official GitHub app offer an easy way to start learning Git.
My advice for learning Git is to take it slow. It’s easy to get discouraged if version control is a completely foreign concept – so learn at your own pace and don’t give up!
Here are some excellent websites for learning and practicing the fundamentals of Git:
- https://try.github.io/
- http://pcottle.github.io/learnGitBranching/
- https://www.git-tower.com/learn/
JavaScript Libraries
Front end development has undoubtedly moved toward full support of JavaScript. From dynamic page elements to custom animation, JavaScript is a vital tool for every web project.
But recently it seems more developers are picking up JavaScript libraries in favor of generic JS scripting. This is great because libraries abstract difficult concepts which can make it easier to build with techniques like Ajax. The downside is with so many different libraries it can be tough to know where to start.
A good rule of thumb is to learn only what you need when you need it. Unless you’re someone who just loves writing code for fun, it’s best to become a master of only a few libraries. jQuery is perhaps the best place to start since it’s easily one of the top five most used JavaScript libraries.
But consider more advanced tools like Backbone.js or Angular.js. Both are open source libraries made for structuring JS-based web applications. These are incredibly powerful but may serve little purpose on a simple WordPress blog.
Developers looking for a challenge might consider learning one of the JS preprocessing languages like CoffeeScript, TypeScript, or LiveScript. All three languages compile into JavaScript but offer variations to the original syntax.
The true power of JavaScript is only now being discovered. With tools like Node.js it’s possible to setup entire servers running on a JavaScript foundation. Not to mention that raw JavaScript can be executed in the browser’s console window giving even more power to frontend developers.
Whether you’re a complete beginner or a seasoned developer, there’s always more to learn with JavaScript if you’re passionate about web development. The following resources should prove to be exceptionally helpful.
- http://eloquentjavascript.net/
- http://www.unheap.com/
- http://designmodo.com/typescript/
- http://try.jquery.com/
- http://nodeschool.io/
- http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-coffeescript/
HTML Preprocessors
The popularity of CSS preprocessing has given birth to front end HTML preprocessing. This operates just like Sass/Less where you’d write a variant syntax and compile to get raw HTML code.
HTML preprocessing can save you from typing repetitive syntax like closing tags. While this is obviously lucrative, it does take some adjustment.
Haml and Jade are the two most popular choices with very different syntax styles. Slim is a third option which gives you three big contenders to choose from. All three are open source and continually growing from community support, so you really can’t go wrong.
Haml and Slim both run on Ruby with Haml being an alternative to ERB templating. While Haml is a great tool for Rails developers, it can be just as useful to front end devs regardless of whether you write back end code or not.
Jade is a templating engine that runs on Node.js. Again it can be used strictly for Node apps, or it can be used as a standalone solution for front end developers who like the Jade syntax.
There is no right or wrong answer since they all have very similar features. The general consensus among Ruby lovers is to stick with Haml. But many front end developers have been flocking to Jade because Node.js has become a hot trend in web development.
Truth be told, few developers find HTML preprocessing imperative to their workflow. But it’s worth understanding the possibilities to make your own decision. You may prefer to write static HTML but some devs prefer Haml/Slim/Jade so if you can at least recognize the syntax it’ll give you a big advantage.
Check out these handy teaching resources to delve deeper:
- http://www.learnjade.com/
- http://www.sitepoint.com/an-introduction-to-haml/
- http://cssdeck.com/labs/learning-the-jade-templating-engine-syntax/
JS Task Runners
Automated task runners are the newest front end tools on the block. The concept is often confusing at first, but task runners can dramatically improve your dev workflow with the potential for incredible custom features.
The two big task runners are Gulp and Grunt. You’ll notice they both run on JavaScript but also require the terminal. So how does this all work?
Both Gulp and Grunt are installed via Node Package Manager (NPM) through the command line. The libraries themselves can run JS commands from separate files, specifically gulpfile.js and gruntfile.js respectively.
These files can be very small or very large depending on how many tasks you want to automate. Take a look at this sample Gulpfile.js to see how it looks.
If you’ve never done anything like this before then you’re probably somewhat confused. Don’t worry much about the syntax for now, instead focus on the concepts and features provided by these .js task files.
You can add JS code that automates tasks like processing Sass files, processing Haml, even JS languages like CoffeeScript. You’ll notice each of those links points to an NPM package pre-written for Gulp. This means you don’t need to write your own autocompile Sass script because it’s already been written!
Learning to use a task runner takes some initial work. The concepts may seem foreign and similar to learning Git, there is a barrier to entry for newcomers. However once you understand the basics and see how it affects your workflow you’ll never want to go back.
To get started just pick either Gulp or Grunt and push yourself to practice. Here are some links to get you started:
- https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js
- http://stefanimhoff.de/2014/gulp-tutorial-1-intro-setup/
- https://24ways.org/2013/grunt-is-not-weird-and-hard/
- https://medium.freecodecamp.com/gulp-i-improved-my-workflow-354d31d25655/
Wrap-Up
All of these tools are fairly new or have grown considerably in the past few years. The world of front end development offers so many impressive tools for an improved workflow, and I hope this article offers a starting point for anyone who wants to add missing components to their dev routine.
