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.
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
- 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
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
Tools & resources 🛠
These are web apps & single-serving tools that I use.
- Conjure - Design feedback, sharing & approval (made by the folks at NEVERBLAND)
- JIRA - Agile / User stories / Project management / Bugtracker
- Trello - For when JIRA is too much
- Unicode converter - I’ve lost count the number of times I’ve used this tool
- Saucelabs - Browser testing
- Can I Use ..? - Support tables for HTML5, CSS3, etc - I want to use ..?
- Web Page Test
- Google Page Speed Insights
- Fontsquirrel webfont generator
- Colorzilla CSS gradiant generator
- Ceaser CSS Easing Animation tool
- Favicon generator
- Pinboard - the best bookmarking app around
- Copy Paste Character - unicode character library
More can be found on Pinboard bundled as Web Tools
I always listen to music when I work, here are a few apps & sites that keeping me motivated.
- Google Play Music - I’ve used Rdio, Spotify and others. Google Play allows me to listen to my own stuff or their library
- Radiant Player - Native Mac app for Google Play Music
- Bearded Spice - Use your Mac’s media keys on Soundcloud, Deezer & many more.
- Hype Machine
- Triple J - Brilliant Australian radio station
- NTS radio ✨
- MacBook Pro 15” Retina
- 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
- Shure SE315 in-ear headphones
- Rhodia A4 & A5 dotPad - great pads for wireframing & sketching
- Stabilo GREENpoint sign pen - the perfect pen for wireframing
- Muji 0.7mm pen
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.