Cause for Panic? First Impressions of Coda 2 and Diet Coda

Panic, the long-serving Mac OS X developer, released the second generation of Coda on Thursday, along with an accompanying app for iOS; Diet Coda. We’ve sen a mixed response in the coding community – some feeling anti-climax, others happier than ever.

I’ve been playing with both apps since their release, so let’s take a look at them (including how they work together) and see what all the fuss is about.

The original version of Coda was developed and released for Mac OS X 10.4 nearly five years ago, first seeing the light of day in 2007. That’s a long time during which to build a fanclub. With Coda’s loyal following in both the seasoned web design community and those still learning, the latest announcement (paired with a one-day-only 50% sale which I’m happy to say I took advantage of) generated a lot of hype for the two apps.

Coda 2: What’s New

The obvious thing you’ll notice when you launch Coda 2 for the first time is that it has a new and improved user interface, with a redesigned tab system which can display images and/or text, so you can grab a visual preview of what each tab is holding. You can easily modify these tabs to display image previews or not, so you’re not wasting space when it’s not needed.

Coda continues to work amazingly well as a full-screen app and even offers credibility to smaller machines (such as the MacBook Air 11″) as web design machines. You won’t find yourself continually switching between apps – and even then, in OS X Lion it’s pretty painless.

The “Super Sidebar”

Panic has also introduced what it calls the “Super Sidebar”, a redesigned sidebar which holds a lot of core tools, including your file browser. By switching the tabs within the sidebar you can access a number of toys, including documentation on a number of front-end languages such as PHP and CSS.

Continuing the concept of “one-window web design”, the new sidebar-hosted documentation means you won’t need to leave the app when referring to information on your favorite function or snippet of CSS.

Hints for various languages are displayed as you type, pointing you to documentation too – although as Jeffrey mentioned on Nettuts+, JavaScript hints don’t seem to be setup yet.

The sidebar holds more, consolidating much of the stuff which would normally crowd up your workspace with floating modals in the first release.

Visual CSS

One of the significant features of Coda has always been its CSS authoring tools, allowing designers to manipulate their stylesheets from within a visual interface. While it used to be available through a dedicated tab in the original Coda, it’s now integrated right into tooltip-style popups in the editor, as part of Coda’s consolidation of tools.

Now, when you type out your CSS, you’ll be able to use the tooltips to manipulate the styles visually (such as selecting a color you can see) rather than having to enter a hex code. This is potentially an incredibly useful feature, especially to those still learning the language and getting used to styling in code.

Something that has created a bit of controversy with the new release is the apparent favoritism for WebKit CSS. For example, in some cases Coda will only autocomplete if you’re using WebKit syntax, and will ignore those designed for other engines. When you’re designing gradients, Coda will currently generate the prefix for WebKit, but no other vendor.

Saying that, WebKit shouldn’t be ignored. Apple’s Safari and Google’s Chrome, as well as a fair few mobile browsers, are powered by WebKit. In fact, as of this year, it has the largest market share of any layout engine, so it should be a top priority for a lot of designers. However, I can definitely understand why people are upset with the lack of support for its rivals.

Files and iCloud

Panic have introduced a bigger and better file browser which shares features with their popular FTP application, Transmit. Now you can manage your local files along with those elsewhere through FTP, SFTP, S3 and WebDAV.

If you purchase your copy of Coda 2 from the Mac App Store, you’ll be rewarded with iCloud support. With iCloud’s file storage features, your copies of Coda 2 will be able to stay in complete sync with each other, so it’s simple to pick up the work you carried out on your desktop on your notebook, and vice versa.

Diet Coda and AirPreview

Alongside Coda 2, Panic have also introduced Diet Coda, an independent app for iOS which works both on its own, and together with Coda for OS X.

We’ve talked a lot about the iPad in recent years; pretty much ever since Apple announced and released the first generation of their tablet. While there have long been apps out to let you edit HTML and other languages on iOS, Diet Coda signifies a notable advancement in this area, and one that could potentially redefine the tablet’s place in a web design workflow.

AirPreview

You’ve probably already heard of AirPlay, Apple’s technology which allows you to stream media to an Apple TV, or another device capable of receiving AirPlay signals. Coda 2 and Diet Coda have a very similar feature which allows you to beam your code over the air to preview on your iPad (running Diet Coda, of course).

Once you’ve made it through the initial setup (requiring a strange action in which you point your iPad’s camera at the Coda app on your Mac), it’s a seamless service allowing you to instantly preview changes by hitting refresh on the iPad, without the need to save on OS X.

Obviously the usefulness of this is in question since it depends heavily on the type of work you do, but I’m already finding it pretty useful. For example, while writing this article inside Coda 2, I simply need to stop typing, hit refresh on the iPad and my changes are instantly seen. Alternatively, I can just save my document to see the AirPreview version instantly update.

It’s pretty cool, if nothing else.

Diet Coda: The App

Diet Coda is a brand new app, and it’s great. The app is aimed at belonging to your web design workflow, as one of a number of devices, allowing you to make small edits remotely while you might not be at your desk.

Unfortunately, it’s not possible to create local sites and actually edit entirely on your iPad. While it’s fully capable of being the sole app you design an entire website in, you’ll still have to host the files on an SFTP or FTP server – you just edit remotely. I’d love to see the introduction of local storage at some point.

While I’m feeling negative, it isn’t possible to synchronize sites with Coda 2 over iCloud either, so don’t get your hopes up there.

Nevertheless, it’s still a stellar app if you do want to edit remotely. Once you’ve connected up your server, you’ll access a Transmit-style file manager which allows you to peruse your files, rename them, delete them, duplicate and/or move them. Naturally, you’ll also be able to create brand new files and folders, as well as edit existing documents.

Just like in Coda, you can open multiple documents at once and switch between them through the tabs at the top (which are toggled on by the purple button in the top-left corner). By tapping on the eye icon, you’ll be able to preview the document you’re currently working on.

Again, just as in Coda, you can grab clippings of code from your content, and insert ones you have stored already.

For the price, Diet Coda is an incredible app. You might not be able to design an entire site from scratch with it, but for performing edits to existing sites and documents, it affords the iPad reason for web designers to invest in. I’d probably still take a MacBook equipped with Coda, but of all the web development apps I’ve used on iOS, Diet Coda is the best yet.

Controversial Coda

Coda 2 hasn’t been released without its share of controversy. We’ve already discussed the unusual exclusion of any vendor prefixes other than WebKit, but the app hasn’t been well received by all web developers. In fact, Jeffrey’s review of Coda on Nettuts+ (which, if you’re at all interested in development, you should check out) has comments filled with developers who aren’t too impressed with the latest release.

A common complaint references the dramatic UI shift, but I argue it’s a question of becoming accustomed to it. It’s a flexible interface which you can modify to maximize the screen real estate that you dedicate to your code.

Coda has always, in my opinion, been oriented around front-end development. For web designers, especially those fairly new to the industry, Coda is a fantastic app which offers most of what you need right under one roof.