My 2012 front-end web development workflow

So far 2012 has been a big year for me in progressing my front-end web development skills, tools and process. I’ve also been busy learning new languages and frameworks and getting up to speed on the latest advancements.

Here's what’s changed in 2012:

Languages / frameworks

• SASS / Compass – this has totally transformed the way I write CSS, and if you’re into Compass, I highly recommend the Susy responsive grid system by Oddbird (semantic grids in SASS have been a game-changer for me). I’m currently using the SCSS flavour of SASS, and when I refer to SASS, I usually mean SCSS. I’m aware of the whole SASS vs. LESS debate, but I’m not going there.
• Git / GitHub – I hate to admit it, but when I first started out, I edited sites directly on the live server via FTP without a version control system. Never again! There are many great free resources available online for learning Git.
• HAML / Markdown – makes writing HTML quick and enjoyable. This post was written in Markdown.
• Ruby – I’m just dipping my toes into Ruby, but I’m hoping to develop my skills in Ruby and Ruby on Rails over the next year. I’ve also wanted to expand my knowledge beyond the LAMP stack for some time.
• Octopress — this site is powered by Octopress, which is an excellent framework designed by Brandon Mathis for Jekyll. When I set out to build this blog I knew I wanted a static (“baked”) site, and awareness of Octopress and the benefits “baked” blogs has been increasing lately.
• Command line – it goes without saying that the languages and frameworks listed above require some knowledge of, and being comfortable in the command line. This is something I’m still relatively new to, but I’m already seeing improvements in my productivity as I do more in the command line.

Tools

• Sublime Text 2 – I recently switched to Sublime Text 2 for all of my text editing / coding and it’s phenomenal. I can’t recommend it highly enough. This is responsible for my single biggest jump in speed / productivity in a long time. Learn it inside out, learn all the keyboard shortcuts and get as many great extensions as you can. Opening files in Sublime Text 2 from the command line is also a great way to speed up your workflow – it’s lightning quick.
• Chrome / Chrome Canary – these days I’m mostly designing in the browser, and I’ve recently switched to Chrome and Chrome Canary as my default browsers for all development, due to the excellent Chrome Developer Tools. To get the most out of the power of Chrome’s Developer Tools, it’s worth taking the time to learn what they can do, check out some of the recent advances, and install some developer extensions. For debugging or designing in the browser, you should definitely check out the amazing Chrome DevTools Autosave by Nikita Vasilyev. It allows you to edit CSS and JavaScript in Chrome’s Developer Tools and autosaves those changes to your source files (no more copy and paste).
• CodeKit – makes running projects using SASS, Compass, HAML, LESS, etc a breeze. It compiles everything on the fly, live reloads your browser, optimises images and a lot more.
• TextExpander – since I move to Sublime Text 2, I needed a new way of managing my code snippets. I’ve been trialling TextExpander, which is a great system, but I now think I’ll move all of my code snippets to Github Gists and insert snippets into Sublime Text 2 using this brilliant Gist plugin.
• MAMP Pro – an essential part of my toolkit for local development, plus it allows you to quickly setup virtual hosts, which is useful for local Windows and Internet Explorer testing on the Mac. Recently, I’ve been using this less now that I’ve started building sites in Ruby and using WEBrick.
• iTerm 2 – this is a great Terminal replacement for the Mac. I often have several different shells open at a time, and iTerm 2’s split vertical view is perfect for this.
• VMware Fusion – for testing and debugging sites in Windows and Internet Explorer. Using MAMP Pro's virtual hosts you can also setup a local development environment for testing on Windows.
• Adobe Shadow – this website was designed exclusively in the browser (Chrome) on my MacBook Pro, but throughout the entire process the site was also open in Adobe Shadow on my iPhone 3GS and iPad 2. This has totally transformed my mobile-first, responsive web design process. These devices are no longer used for testing the assumptions I’ve made in a narrow width desktop browser, they are now central to the design and development process. On a side note, this really drains battery power fast, so keep all devices plugged into a power supply.
• Dropbox – this is an obvious one, but worth mentioning. Essential for syncing documents between different devices and backup of files that don’t live in version control.

Productivity Tools

• Alfred – I’m a recent convert to Alfred and I love it. Now that I’m using the command line a lot more, I find I’m using my trackpad and mouse less. Alfred allows me to launch applications, search Google and get things done quickly without leaving the keyboard.
• Divvy – great for quick and easy window management, for example, if you have your browser and text editor open alongside each other.

Conclusion

Keeping up with the rapid change in front-end web development can be pretty challenging at times, but it can also be a lot of fun. Although it may sound like I’m using a lot of different tools in my workflow, I can pretty much get by for most development with just Chrome, Sublime Text 2, iTerm 2 and Adobe Shadow open at any one time. I’ve never been happier with my front-end development tools / process and look forward to refining this setup over the coming year.

If anyone has any suggestions, additions, or comments, I’d love to hear from you.