My front-end development workflow

Introduction

Throughout 2012 I’ve been focusing on streamlining my workflow (read: nerding out on all the great tools out there). Previous work already benefited from learning CSS preprocessors such as SASS and Less, and but I finally feel like I’m at a point where everything is working for me. Here’s my setup:

Languages / Frameworks

  • Emmet (ex Zen-Coding) for HTML markup, using a Sublime Text 2 plugin. Emmet makes it a snap to create and extend snippets on the fly. I’m also a huge fan of the lorem ipsum text generator that makes rapid prototyping working mockups quick and painless.
  • Sass for CSS preprocessing. Sass, with its array of mixins, variables and functions, makes CSS development a snap. I switched between Sass and Less for a while, but I tend to like Sass’s (I use their .scss format) syntax a bit better.
  • Git / Github for version control. I didn’t previously use version control, but after a couple of my sites got completely botched in development, I learned. Honestly, I’m embarrassed I didn’t learn sooner. Github:help makes git easy to learn, and it’s a godsend if clients make drastic dev changes then want to revert.
  • Markdown for blogging / documentation. Markdown is easy to use (especially coming from an HTML-heavy background) and makes for fast documentation. This blog post was written in markdown, as a matter of fact.

Tools

  • Sublime Text 2 is an amazing code editor. Syntax highlighting is beautiful, it’s updated often, and there are tons of plugins to extend functionality in any way possible. Sublime, coupled with plugins for git, Less, and Emmet are pretty much all I need.
  • Codekit is pretty much my bread and butter. It compiles on the fly (with optional jslint/jshint code analysis), minifies, live reloads the browser, optimizes images, and more. Completely worth the money here.
  • yeoman for… well, a ton. Boilerplate code, package management, ECMAScript 6 module syntax support, and PhantomJS unit testing. I’ve only recently integrated yeoman into my workflow, but I already see it will be a game changer for sure.
  • Chrome, need I say more. Chrome, with its fabulous developer tools, makes designing / developing in the browser dead-simple.
  • MAMP for local development. Eventually I’ll move a site to a virtual host for deeper-level testing, but it always starts here.
  • Dropbox is a pretty integral part of my workflow. It keeps my files synced between different devices, and has saved me a couple of times in places where a file was needed but I didn’t have my computer handy.
  • Adobe Edge Inspect (previously Adobe Shadow). Adobe has been really impressive as of late. Sure they develop the most widely used design tools known with InDesign, Illustrator and Photoshop, but to be honest, their web development packages were lacking there for a while (I"m looking at you, Dreamweaver). Edge Inspect makes it easy to test and simulate multiple mobile web browsers, which is key in today’s web market.
  • iTerm 2 on my Macbook Air 15". I was a reluctant switcher from terminal, thinking it did everything I needed, but key features such as split panes, paste history, and autocomplete eventually sold me.

Honorable mentions

  • Espresso by MacRabbit. This was my previous code editor before Sublime Text 2, and I will still heartily recommend it to others. Its code completion is great, it has web previewing and solid language support, and it really shines when editing CSS.

Conclusion

The rapid pace of front-end development can be challenging at times, but it’s also exciting. By using these tools, I can focus on developing and continuing development education, and keep my workflow from affecting my flow of work (like that?). Cheers!