Tools for the Modern Front End Developer’s Workflow

Tools for the Modern Front End Developer’s Workflow

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:

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.

No Comments

Comments Closed