My development stack

Tools of the trade when developing for the web

I read this post a while back about design stacks & it got me thinking about my own, albeit focused more on development. Below you’ll find a fairly comprehensive list of the tools I regularly use for front-end development in a creative agency.

Development apps

I use a Mac so some apps may not work on your platform :(

  • Sublime Text ✨ is my IDE/Text editor of choice - Install Package Control before anything else - Emmet is without doubt the most useful & time-saving plugin - For more recommended plugins, see my previous post on the subject
  • Chrome (dev release) - I find this release balances new features with stability. I use it everyday without any issues. - Notable Extensions: + WhatFont - The easiest way to identify fonts on web pages + Sauce Launcher - Launch Sauce Scout sessions in any browser you want with a single click + Google Analytics Debugger + Github Linker - Links NPM, bower, Composer & Duo dependencies to their GitHub repository page + LiveReload - Chrome browser integration for LiveReload. Used in some of my Grunt tasks + Extensions Manager - Enable/disable/manage extensions from the toolbar. Perfect if you masses of extensions like I do. + Tab Scissors - Splits a window into two at the selected tab. Useful if you have loads of tabs open at once
  • iTerm ✨ - A better Mac terminal emulator - My .dotfiles repo is used sync my terminal settings across machines
  • Slack ✨ - The best team communication/private messenger app around
  • Adobe CC
  • SourceTree ✨ - Full-featured, free Git gui
  • Shuttle - See my previous post about it here
  • CoRD - Simple & free remote desktop client
  • SVGO GUI - Compress SVGs using SVGO - See also SVGOMG
  • Pngyu - Compress PNGs
  • xScope - Measure everything, extremely useful
  • Glyphs - for creating & editing fonts
  • Sip - Colour picker
  • Breezy - Drag & drop images to base64 encode them. Super useful.

Other useful apps

These apps are not specifically for development but they definitely help me get shit done.

  • Alfred ✨ - Notable workflows: + Will Farrell’s workflows for developers. My favourites are: _ Package Managers - search npm, grunt, bower & more _ caniuse, for searching from within Alfred + MDN search + SourceTree - Workflow to list, search, & open SourceTree repositories in Alfred
  • Simplenote
  • Wunderlist
  • BetterSnapTool - Window management tool
  • Divvy ✨ - Another window management tool, has different features to BetterSnapTool & extremely useful when trying to position more than one app on a screen
  • Palua - Auto-switches my Mac’s function keys. Especially useful when using apps that make use of the function keys, like Sublime Text
  • 1Password ✨ - Password management

Front-end tools

These tools are used on every project

  • Kickoff 💯 - The framework I helped create. I use it on every project, it is comprehensive without being verbose; give it a try! - Kickoff’s grunt setup is extremely thorough & well documented, give that a try if nothing else
  • Grunt.js task runner - Favourite Grunt plugins include: + BrowserSync - Billed as a tool to save time testing in the browser but I also use it for it’s static server abilities too — it is so good + grunt-contrib-sass - I have tried the node port of sass, grunt-sass numerous times only for it to fail, I know it is potentially better but I will wait before making the switch. + grunt-contrib-uglify + Grunticon - cross-browser SVG FTW
  • Sass - CSS preprocessor
  • Yeoman - I created a Kickoff Yeoman generator to help get new projects started quickly, it is invaluable. See here for more information

Version control

I use Git with Github (for open source) & Bitbucket (for work & private repos)

Tools & resources 🛠

These are web apps & single-serving tools that I use.

More can be found on Pinboard bundled as Web Tools

Tunes 🎶

I always listen to music when I work, here are a few apps & sites that keeping me motivated.


That about covers it. What do you make of it? Is there something that I’ve missed? What are yours? Let me know in the comments.