Forwardslash /

TAGS: code

My Top Three Tools for Web Development


I spent a little while on tools last week—a new terminal app, iTerm2 (pictured above), and a new pre-processing app, CodeKit, which also does something totally fucking amazing, which is automatic browser reload when you hit save on the file you’re coding.

I’d heard of live refresh a long time ago, and immediately looked into it and was excited, given all the CSS I write and designing in the browser I do. But for some reason, the tools didn’t look right to me, there were browser add-ons with questionable permissions, and I didn’t pursue it.

What pushed me into trying CodeKit was some incredibly frustrating problems with less.js—it was rendering the CSS differently in Chrome and Firefox, and I had a couple hours of total frustration tracking down the problem, which was getting my webfonts to render. I realized I needed to stop being lazy and following what wasn’t really a best practice anyway—relying on JavaScript to render your CSS on pageload—and do the right thing and get a pre-processor which would render my LESS to CSS on save and let me use CSS in the browser, as you should.

The live refresh was just a bonus that CodeKit offered… a sort of ‘oh yeah I remember that, that would be cool’ bonus feature. But it is mind blowing, not to hit command+r every time. A game changer. It makes the process so much more fluid. Not only that, CodeKit throws in a smooth animation transition so you see your styles take effect like liquid, snaking magic on the page as you type and save.

It makes me excited about writing CSS again. LESS has really rocked my world by putting a lot more muscle into how I author CSS, and combined with live refresh, it’s a web developer / designers’s dream.

Now, for iTerm 2. Spending so much time in the command line, I just wanted a slicker experience, something with a little more style than the default Terminal app that ships with OSX. I tried Cathode, and it’s super cool but not great for everyday work. The killer feature for me on iTerm 2 was to the split-pane view. It’s annoying to move around lots of little windows if you’re juggling multiple terminal sessions. Now, I can have side-by-side sessions that lock into place. I typically use this when I’m developing locally, pushing to Github, and then periodically pulling to the live site or remote development server and checking that.

There’s another very cool thing about iTerm 2: you can save, share, and download syntax highlighting themes for your shell. This is no small thing, because if you’ve been spoiled by a good text editor, it’s very bland to look at a terminal session where the text colors aren’t popping and helping you keep your attention focused, and in the creative flow.

Last cool thing about iTerm 2 is you can rewind and replay your terminal session. This is just fun, because there’s a certain beauty to playing back your commands and seeing that flow of intention, feedback, and data cascading down the page just as you typed it.


I’ve got a holy trinity of web developer tools now: SublimeText 2 (pictured above with the awesome Django theme), iTerm 2, and CodeKit. They’re all amazing, and are tools that pay off immediately but also add a lot of depth if you’re willing to explore further (especially SublimeText 2) and if you use a tool every day for a long time, eventually you’re going to go deep.

TAGS: code