Cabel's Coda toolbar and the Three Pixel Conundrum

Cabel's Coda toolbar and the Three Pixel Conundrum

Panic's Cabel Sasser has updated his blog (finally! His Miis were cute and all, but I was tired of seeing them every day) with a really interesting post about how he designed the toolbar for the everything-web-development tool that apparently is the bee's knees, Coda.

Instead of using the standard rounded bevel of OS X's unified toolbar, Sasser decided he wanted to do something a little different, and created a tab-ish vertical indent. Unfortunately, the way OS X's toolbars work didn't vibe with his idea (there were just three pixels at the bottom that couldn't be edited the way he wanted), so the Panic team ended up developing their own entire toolbar. That, he says, is why you can't rearrange the icons in Coda-- because the app isn't using the system toolbar.

But the best part is saved for last. All the hard work paid off, because even though Sasser had to drive his team nuts just to figure out a way to get around those three pixels, Apple eventually agreed with him. And the new toolbar in Leopard looks strangely familiar. Great story, and a real shot in the arm to developers who might not otherwise be pushed to bother with all the coding required to get the look they want exactly right.