For today’s Friday Review I’m going to look at a fairly new web development/design application for the Mac called Coda that is made by Panic. The main selling feature of Coda is that it integrates everything that web developers, and in particular designers, may want—all in one neat little package. This mix includes: a code editor, a preview pane, a CSS editor, an SSH Terminal, HTML/CSS/JavaScript/PHP inbuilt books, website management and an FTP client. Wow… what a list of features! What’s more interesting is that all of them are included in one single application!

The natural instinct when faced with such an application is to be cautious. If the developers decide to load their software with so many features there is surely a danger of feature bloat and needlessly complicated interfaces. Indeed, I believe that Apple development guidelines themselves state that adding extra features to your application adds the risk of: A) the interface becoming too cluttered and complicated and B) the software itself requiring more resources and thus running more slowly.

Panic, the creators of Coda, decided to tackle these challenges head on, trusting their wisdom and experience in Mac development (they’re the makers of one of the best FTP programs for OS X—Transmit). I’m sure their battles were many and that they spent many nights tirelessly pushing forward and taking on problem after problem of UI design and feature integration in their quest to craft an application worthy of the Web 2.0 deseloper (designer+developer). Did they succeed? I strongly believe so.

Coda then, is a really a wonderful program because it does so many things right and manages to integrate so many features well. First of all, the interface is very clear and simple. There is no confusion here at all—once you load the program, you will be able to start working because everything is that simple. You have your file browser on the left (which includes remote files too), and once you save a file you can publish it just by clicking the little upload circle that pops up next to the file name. You can also publish files using the ‘Publish’ button, which makes updating the whole site much easier. Because Coda includes the Transmit FTP engine, its speed and efficiency of the file transfer is commendable.

Coda site manager view

At the top, you have the little ‘tab-buttons’ that allow you to select the editing mode or allow you to use the other features, such as read the integrated Books on HTML, CSS, JavaScript and PHP. I must say that I haven’t yet used the books feature very much, preferring instead to flick open my trusted copy of “CSS Mastery”, but I hope to try it out more in the future. The books feature however is unique to Coda, and I’m sure many people find it very useful.

The books viewer

Without going too much into detail on all of the panes, I will say that the code editor is very good (Coda features an integrated SubEthaEdit, a powerful multi-user code editor) and features useful code completion functions, as well as a clips palette, a hints mode and an (X)HTML validator. The visual CSS editor is very well presented, allowing you to tweak CSS formatting without writing a single line of code, and while its not as extensive as CSSEdit 2, it is certainly very competitive. There is a preview pane, allowing you to preview your site using the Webkit (OS X Safari) engine, as well as quickly open it in other installed browsers. An SSH Terminal is also included, which I haven’t got to use as yet, so I will not comment on it.

The coding clips panel

Now, there is one more great thing about Coda that I haven’t mentioned yet—Panes. You can split the editor into horizontal or vertical panes, and open individual files in any pane you want in any mode you want. So if you have a large monitor, you can maximize Coda, and have three (or however many) panes open simultaneously: one showing the XHTML markup in the code editor, one showing the CSS in the CSS editor and the third showing a live preview of the page. The reason I call it a “live” preview is that it updates whenever you change your markup (and also when you save your CSS), so you can keep working on the code without the need to hit the refresh button on the browser (or indeed, without the need to switch to a browser at all!)

Dual pane view: code on the left, preview on the right

I can keep going on about all the great features Coda has, but instead, let’s see what Coda doesn’t have. There is only one major feature missing—the visual editor. As much as I love staring at endless lines of XHTML markup and CSS selectors, I miss the visual editor view of programs like Dreamweaver. Indeed, I wrote in a recent blog post about the current direction that I believe the design industry is going. Many professionals in the web design field these days hand code their sites in order to ensure clean semantic markup—they just do not trust visual editors like Dreamweaver to handle the code properly and to follow web standards. I cannot blame them—there is currently no great visual web editor out there that can handle professional web design/development work. There needs to be one.

Visual CSS editor

Coda isn’t it, however, Coda is a program that makes web deselopers’ work a lot easier in the current times of hand coded markup and CSS. By merging all of the desired features, Coda makes the development experience much more productive and efficient.

A little hints bar at the bottom helps you out as you code

Before I conclude this review, I will mention one more thing I love about Coda—the user interface aesthetics. Coda looks absolutely fantastic. Just take a good look at the screenshots. Indeed, the screenshots do not do the interface justice because of the many smooth and subtle animations featured throughout. The beauty and the sheer polish of the interface make the application extremely satisfying and enjoyable to use. I don’t believe I’ve used any other web development tool that was so elegant and so pleasant work in. Even the application icon is stunning, and makes a very welcome addition to the dock.

The beautiful Coda icon sitting in my OS X dock

Conclusion

If you’ve been following the review so far, I think you can already guess my verdict on Coda. This is a brilliant application, and I do not hesitate to congratulate Panic for creating such a great piece of software. There are limitations, but there are also many many things that the program features, and does right—and for that reason I can really recommend it to you.

Would I recommend this tool to everyone? Probably not. If you do a lot of heavy back-end development (and I mean pure coding), then Coda may not be the best solution—TextMate would probably take that honor, and you are likely using it already. If you are an advanced web designer (or a developer who does a lot of design work), then you will probably love Coda as much as I do. The inbuilt FTP, the multiple panes, the simple and elegant site management feature—these are some of the many reasons why Coda can be an ideal tool for your work. If you haven’t tried it, go download a trial and see for yourself. I don’t think you’ll be disappointed.