By: Erik Vlietinck
Thu, October 25, 2007 - 7:07:00

http://www.panic.com
Score:

When Panic Software released Coda, most reactions were mildly to enthusiastically positive. Here and there were some points of criticism, but most of the comments were that Panic’s Cabel Sasser has made the web site editing application everybody has been waiting for. After he had ironed out the first-version wrinkles, I asked Cabel for a review copy, and used Coda for a couple of weeks to see what all the fuss is about.

Coda is a hybrid between Dreamweaver and TextMate or BBEdit. And it has a couple of unique features that set it apart from the crowd. Coda is not a WYSIWYG web design application such as Freeway or Dreamweaver. Instead, it relies on your coding skills and offers a complete and pampering environment for those who write their web pages in HTML, Javascript, and PHP, using CSS in the process.

Coda comes with auto-completion, a unified window approach, a lickable GUI-based CSS editing panel, a built-in Terminal, a built-in and blazingly fast FTP client, access control, and last but not least, a set of online reference books for HTML, CSS, Javascript and PHP.

Sharing Web Design Efforts

Coda has management functionality built-in as well. You most probably will start a project by setting up a web site on a server and entering the server details in Coda’s web site form. This form has all the fields that are required to access the remote web server and to create your local files. When you have filled in all the blanks, you are ready to synchronise what you’re doing locally with what is on the server --in the background, and fully automatic.

Writing a page with Coda is done in the Edit panel. Using the Clips HUD (Heads Up Display), you can start the easy way and insert commonly used code snippets, such as for the document header in an XHTML page. The Clip HUD can be accessed from a toolbar at the bottom, where you’ll find other goodies as well: a Share icon, for example. Coda isn’t an island, and so sharing is made easy. You can invite others to work on a project with you and look for invited coders via Bonjour.

Coda also supports continuous code validation as you type. When you’re making errors, yellow triangles appear in the left margin, with an error count at the bottom. Hovering over an error with the mouse, makes a window pop up, telling you exactly what you’ve done wrong. Very handy, especially when you’re becoming tired and start having difficulties staying alert.

One of the most compelling features of Coda, in my experience, is that it has a well-balanced feature set that really pampers web coders. But at first I had a problem with understanding some behaviours. For example, you can’t just drag a file to a hyperlink tag (a href). I guess the reason is that Coda doesn’t know how you want to reference the file. I can live with that. But when you drag an image file to the Edit panel, an img tag is auto-created, with the image referenced as a local file. If you drag slowly, or hold the image above the Edit panel, a new tab opens, showing the image.

Drag-and-drop Linking

Dragging a HTML page from the resources list also doesn’t automatically create an anchor tag. Instead, the file gets overwritten --after ample warning-- with the content of the file you dragged. The manual doesn’t tell you how to do it right, and that’s a pity because I found out you can create page references very fast by dragging.

What you have to do is drag the page to the Edit window, and when the mouse is in the Edit window, press and hold the Alt key on the keyboard before you drop the file in its right place. You’ll see the cursor change from a “Plus” sign into an “Alias” sign. The exact location --on the web server!-- based on your settings will be placed where you let the mouse go. So, if you want to create a link to page 1.html that is in the list of pages at left, all you have to do is drag that page to the Edit window, press and hold Alt when the page ghost is over the Edit window, and drop it between the quote marks in the “a href=” code.

Coda’s CSS panel is spectacular to say the least. It works just as good as CSSEdit and believe me when I say that is a compliment. I don’t know what I would choose if I would have to, but even that dilemma is taken care of by Coda: you can open every file type in external applications if you really want to. Personally, I found myself using Coda for all HTML, PHP, and CSS needs, but when I had to fine-tune my CSS, I chose to do it with CSSEdit, because CSSEdit gives me the option of overriding a style sheet of an online page.

When you’ve changed and saved a page, Coda will show a discrete up arrow in the resources list. At the bottom of the list are a couple of buttons, one of which lets you upload or “Publish” all of your pages at once. Uploading finished files is amazingly fast, especially when you consider Panic’s Transmit --which I use for my normal FTP needs-- is no slouch either. Yet, Coda’s built-in FTP client seems to be faster.