In the process of updating this site’s theme, (if you’re reading via RSS, head over for a squizz… it’s looking all brand spanking new over here!!) I have been tidying up my blog archives and came across a post I never finished; one that included a list of all the Mac web development tools in my toolkit.
It was pretty out of date, so I thought I’d revisit it and write up a list of my current tools. I’m also interested in yours… what’s in your toolbox? I’d love to know where we intersect and where we diverge… (it’s kind of a developer’s version of the food bloggers’ “what’s in my kitchen?” posts!”) Oh, and by way of a small disclaimer – these are clearly all Mac programs because my hardware is all Macs… but if you’re a PC user, post your list and link back to us so we can learn from each other!
Code Editing
I’ve been using Coda 2 from the lovely people at Panic since I started paying for a text editor. I know a bunch of people prefer Sublime or Espresso and that there are other great text editors out there… but this one has always worked for me, so I see no need to change, I know it does a whole lot more than I’m making it do, including integrating with SSH and git, as well as saving text snippets… So part of this year’s growth will be putting it through its paces a lot more!
If you’re wanting a free equivalent because you’re just learning to code or to experiment with using a text editor, if only for syntax highlighting (colour coding your code), then give Text Wrangler a go.
![]() |
![]() |
Snippet Manager I have both Text Expander and Code Box – and actually I like CodeBox better, it’s purpose built for code, so you get things like syntax highlighting as well. Text Expander can be used for any kind of text – and useful for recurrent things like addresses and text you type often… Additionally, Coda will store all my snippets too so I could port them over from TE and Code Box so they’re all in one place, but it’s one of those little jobs that never gets done, (and I’ve heard it’s difficult to move all your Coda snips and shortcuts when you change machines… not sure if that’s still true…)
![]() |
![]() |
Compiler
One of the cool things about spending time in an agency is getting up to speed on some of the gnarlier technologies you might not otherwise try out for yourself. In recent months I got introduced to LESS, and by extension SASS the pre-processors for CSS. They’re brilliant and make the whole business of writing up CSS code a lot more fun, and a lot less tedious… that said, using CodeKit to compile all that CSS goodness is the way to do it… so that little gem has snuck into my kit as well.
![]() |
Clipboard Manager
Jumpcut is a little treasure that is ‘hands down’ my favourite tool. I know it’s mad to love something so small so much, but it has saved my bacon repeatedly… It puts a little scissor icon in your menu bar and from there you can go back to the last 99 clips you made and paste them into your current project/document…
Even though it’s not supported any longer I’m going to keep using it as long as it still works!! However, if you want something a bit more up to date you might want to try CopyClip.
![]() |
Merge Tool This tool, DiffMerge makes a comparison of two or three files so you can pinpoint changes in your code. It integrates with a number of other products like Tower (my git client – see the next post to read more about that) to really assist your version control process but also helps spot changes in code you’ve written, or between updates of WP themes t0 help when you might have upgraded and broken things. (Not that I’d know, or anything…)
![]() |
Image Editing
For the most part there is only one image editor… I am a Creative Cloud subscriber, so there are a bunch of tools in the Adobe Toolkit that I pull out, but Photoshop is by far the one that gets the most action. There are however, occasions when I’m writing up tutorials, or grabbing images from the screen, I use Skitch, a great little screen snapper tool from the people who are behind Evernote. It’s so useful it made all the images in this post! In recent times I’ve also come across JPEGmini and TinyPNG to services/products that help compress images without losing quality of your picture. Both of them are totally worth checking out as well.
![]() |
![]() |
So, what are your go-to front end tools? Do they improve on the above? Are there any awesome ones I’m missing out on? Chime in to the comments below and if you’re up for it, post your own list? I’d love to see inside your toolkit!!
Great post. You make this SASS thing sound cool – I think it’s time. I reckon I’ll get Coda & one of those snippet managers too – thanks for the suggestions.
I am loving Clarify for creating instruction documents quickly, and also Quickcast for super simple screencasts and demos <3mins.
Great post and I’m off to check out some of the ones I don’t use! I am a Coda fan too and use Snippet Saver for my snippets. Another great tool I use a lot is Pixel Window to measure anything on screen and Little Snapper to take full screen screen shots – I use this when grabbing image for my portfolio.
And I couldn’t live without my Creative Cloud membership!
So many great tools, I use Awesome Screenshot for full screen stuff, it’s a plugin for Chrome, and Webmaster Tools for Chrome as well which has a colour picker, and ruler and other excellent tools… Gosh, that could be a whole ‘nother post on what add-ons I’m using with Chrome!!