My development stack

Tools of the trade when developing for the web

Posted:

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 caniuse.com 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.

Gear

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.