Coda: The Web Development App

I do dabble in HTML, CSS and WordPress from time to time. This web site is run on WordPress and the fabulous devel­opment framework Genesis using a heavily modified version of their Focus theme. And I’ll change the look of my web site when I get tired of seeing the old design, which happened again this weekend.

In making the changes, which included switching from the Prose to the Focus theme, I reminded myself how much I like the web devel­opment appli­cation Coda. Since I don’t use the themes just as they come from StudioPress, I need to muck around with the CSS and PHP that forms the theme template. Coda is so good for that.

Coda comes from the folks at Panic, who make a number of other very nice Macintosh apps. Coda’s claim to fame is that it is a single window appli­cation that handles FTP file transfer, text editing, CSS editing, browser previews and even terminal commands. As a bonus, it will display reference material, right in the app, from web-based resources that you can add to. Its smooth, very Mac-like, and allows web devel­opment to move easily from task to task. Instead of using programs such as BBEdit, Transmit and CSSEdit to do different tasks, you use Coda to do them all. I own all those, and I use Coda.

The sites panel. Click all the screen shots for a bigger view.

Coda’s inte­gration is wonderful. And it is an exception to the rule that stand-alone appli­ca­tions are better at what they do then an inte­grated appli­cation can be. That’s not to say the others don’t have features that Coda doesn’t, its just that those features are nice-to-have features and not the things that you must have to do rapid web development.

The CSS editing panel.

Working on a web site with Coda starts off with the sites panel where I keep the links to sites that I work on most often. Once I connect to a site, Coda gives me an FTP file list view on the left and the contents of a selected file (or files) on the right. Multiple files open in multiple tabs and indi­vidual files can have multiple views (such as both the CSS editor and the text editor views of a CSS file or both the text editor and browser preview views of an HTML file).

The books panel.

From there its pretty much smooth sailing. Double-click a file to edit, make some changes, save it, see the effect in the preview panel or in a separate web browser and then make some more changes. Coda opens and saves file straight to and from your server so there’s no need to download, edit and then re-upload. Because I do most of my web devel­opment in WordPress, I use a separate browser window to preview changes since Coda’s preview panel is only for static HTML.

The text edit panel.

The books panel allows you to quickly review web-based reference material and Coda comes with quick refer­ences for HTML, CSS, JavaScript and PHP. Its easy to add more—just load in its URL.

The CSS editor is very nice with easy to use and clearly broken down access to all the CSS attributes available. It has lots of buttons and entry fields to make what can be tedious easy. Using very nice syntax specific text coloration, the text editor works well and is full of the little things you need to make it more than a plain text editor (things like Un/Comment Selection, Balance punc­tu­ation, and auto complete for common syntax). For my work, I haven’t wanted for features.

I’ve been very pleased with Coda and the workflow that it allows. Like a lot of programs these day, there is no separate Users Manual, rather it is incor­po­rated into Coda’s help menu. That has worked fine for me partially because there’s plenty of infor­mation in there and partially because Coda is a real Mac app—you can find your way around pretty easily with no manual. Coda is available on the Mac App Store for $99.