Tools Practical solutions for front end tooling

Modern front end development is always changing. New tools are constantly cropping up and it can sometimes be difficult to stay on top of them all. However, it’s really important to realize that you don’t necessarily need to know everything that’s out there. All you really need to know are the good parts.

As far as text editors are concerned, has it all. If you’re currently using Sublime Text, you’ll be right at home coding in Atom. It’s open source and super customizable…

Did I mention that it’s open source?

Some of my favorite packages include:

  • pigments - displays colors in project and files
  • file-icons adds file specific icons to Atom
  • project manager - for easy access and switching between projects in Atom
  • file-types - specify additional file types for languages
  • remote-FTP - FTP client for Atom
  • atom-spotify - displays the currently playing song in Spotify in Atom’s status bar


Pretty much every new front end tool uses the command line. If you want to automate your tasks and delpoy right from your local build, then you’re going to spend a lot of time in the CLI. Most stuff is pretty simple, but you can get real advanced with it should you chose. Code Academy has an execellent and free introductory course right here.


This has forever changed the way I code. I can’t even imagine building another site without Gulp.js, no matter how large or small. I seriously love this tool. You can automate any task imaginable and maintain clean, solid source code while simultaneously producing highly optimized production code.

I use a gulpfile.js similar to this for a static sites.


Going along with build systems is a great package manager named Bower. I like it because it seamlessly integrates and you can quickly grab your dependencies:

$ bower install your-package-name

..And your done.


An excellent way to scaffold your projects, Yeoman has a generator for almost any app you can imagine — many of which use the same tools mentioned above.


GitHub has so many practical uses, it’s ridiculous. Number one being versioning, which is insanely important… Especially if the codebase you work on has other team members in there all the time. Beyond that, it’s great for housing snippets, documentation and public collaboration. You can even publish content directly on GitHub Pages at no cost to you. :+1: Nice.


Surge is fairly new to me. Basically, it’s free and works just like any other CDN for your static sites. You can deploy straight from the command line and even setup a custom domain name in only seconds.


Even if you’re not working on a big team, Slack is a great tool for taking notes, tracking progress and communicating with clients. There are lots of channel integrations and you can set it up as a virtual watch dog for your server. Slack will ping you instantly. It’s also just plain ol’ fun.


That’s nowhere near the amount of options a front end dev has today. If you want to get the best tools and not pay a penny, check out and follow what other people are doing. Read their source code on GitHub. Follow a publisher. Staying informed and sharpening your skills will help you make the right choices amongst the vast array of modern front end tools.