My development stack

I read this post (external site) 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 (external site) development in a creative agency.

Development apps

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

• Sublime Text (external site) ✨ is my IDE/Text editor of choice - Install Package Control (external site) before anything else - Emmet (external site) is without doubt the most useful & time-saving plugin - For more recommended plugins, see my previous post on the subject
• Chrome (dev release) (external site) - I find this release balances new features with stability. I use it everyday without any issues. - Notable Extensions: + WhatFont (external site) - The easiest way to identify fonts on web pages + Sauce Launcher (external site) - Launch Sauce Scout sessions in any browser you want with a single click + Google Analytics Debugger (external site) + Github Linker (external site) - Links NPM, bower, Composer & Duo dependencies to their GitHub repository page + LiveReload (external site) - Chrome browser integration for LiveReload. Used in some of my Grunt tasks + Extensions Manager (external site) - Enable/disable/manage extensions from the toolbar. Perfect if you masses of extensions like I do. + Tab Scissors (external site) - Splits a window into two at the selected tab. Useful if you have loads of tabs open at once
• iTerm (external site) ✨ - A better Mac terminal emulator - My .dotfiles (external site) repo is used sync my terminal settings across machines
• Slack (external site) ✨ - The best team communication/private messenger app around
• Adobe CC (external site)
• SourceTree (external site) ✨ - Full-featured, free Git gui
• Shuttle (external site) - See my previous post about it here
• CoRD (external site) - Simple & free remote desktop client
• SVGO GUI (external site) - Compress SVGs using SVGO - See also SVGOMG (external site)
• Pngyu (external site) - Compress PNGs
• xScope (external site) - Measure everything, extremely useful
• Glyphs (external site) - for creating & editing fonts
• Sip (external site) - Colour picker
• Breezy (external site) - 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 (external site) ✨ - Notable workflows: + Will Farrell’s (external site) workflows for developers. My favourites are: _ Package Managers - search npm, grunt, bower & more _ caniuse, for searching caniuse.com from within Alfred + MDN search (external site) + SourceTree (external site) - Workflow to list, search, & open SourceTree repositories in Alfred
• Simplenote (external site)
• Wunderlist (external site) ✨
• BetterSnapTool (external site) - Window management tool
• Divvy (external site) ✨ - Another window management tool, has different features to BetterSnapTool & extremely useful when trying to position more than one app on a screen
• Palua (external site) - Auto-switches my Mac’s function keys. Especially useful when using apps that make use of the function keys, like Sublime Text
• 1Password (external site) ✨ - Password management

Front-end tools

These tools are used on every project

• Kickoff (external site) 💯 - 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 (external site) if nothing else
• Grunt.js (external site) task runner - Favourite Grunt plugins include: + BrowserSync (external site) - 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 (external site) - I have tried the node port of sass, grunt-sass (external site) numerous times only for it to fail, I know it is potentially better but I will wait before making the switch. + grunt-contrib-uglify (external site) + Grunticon (external site) - cross-browser SVG FTW
• Sass (external site) - CSS preprocessor
• Yeoman (external site) - I created a Kickoff Yeoman generator to help get new projects started quickly, it is invaluable. See here (external site) for more information

Version control

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

Tools & resources 🛠

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

• Conjure (external site) - Design feedback, sharing & approval (made by the folks at NEVERBLAND (external site))
• JIRA (external site) - Agile / User stories / Project management / Bugtracker
• Trello (external site) - For when JIRA is too much
• Unicode converter (external site) - I’ve lost count the number of times I’ve used this tool
• Saucelabs (external site) - Browser testing
• Can I Use ..? (external site) - Support tables for HTML5, CSS3, etc - I want to use ..? (external site)
• Web Page Test (external site)
• Google Page Speed Insights (external site)
• Fontsquirrel webfont generator (external site)
• Colorzilla CSS gradiant generator (external site)
• Ceaser (external site) CSS Easing Animation tool
• Favicon generator (external site)
• Pinboard (external site) - the best bookmarking app around
• Copy Paste Character (external site) - unicode character library

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.

• Google Play Music (external site) - I’ve used Rdio, Spotify and others. Google Play allows me to listen to my own stuff or their library
• Radiant Player (external site) - Native Mac app for Google Play Music
• Bearded Spice (external site) - Use your Mac’s media keys on Soundcloud, Deezer & many more.
• Soundcloud (external site)
• Hype Machine (external site)
• Triple J (external site) - Brilliant Australian radio station
• NTS radio (external site) ✨

Gear

• MacBook Pro 15” Retina (external site)
• 2 x Dell 24” external monitors. One is landscape, the other portrait, so I use 3 in total.
• Sennheiser HD-25 II over-ear headphones (external site)
• Shure SE315 in-ear headphones (external site)
• Rhodia A4 & A5 dotPad (external site) - great pads for wireframing & sketching
• Stabilo GREENpoint sign pen (external site) - the perfect pen for wireframing
• Muji 0.7mm pen (external site)

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.