Coda 2: It’s Here and It’s Awesome

April 23, 2007. That was the day Panic initially released Coda. The idea of Coda was revolutionary: one app, one window for the entire web development workflow. And they did it right too. They won the 2007 Apple Design Award for Best User Experience. Before Coda there were tools like TextMate, BBEdit and MacRabbit’s Espresso and CSS Edit. Yes, there was even Dreamweaver if you like spending a lot of money on a tool largely considered inferior (it does have its place). But Coda was truly a revolutionary new web development experience.

Before Coda, developing websites required a number of different tools. You need a text editor for writing code. You need an FTP application for uploading and downloading files from your server. You need a web browser to preview your work. You often need a database utility to modify your database. And you would often need a terminal application to connect to your server over SSH and make changes. Coda rolled most of the tools needed for these things into a single interface and application.

And now Coda 2 builds upon that success.

Initial Impressions

Upon opening Coda 2 for the first time I was pleased to see that, though obviously different, there was something fairly familiar, if slicker looking. The sites that I currently had set up in Coda 1 were all right there, waiting for me and ready to go. One really nice touch though, and one I have personally wanted for years, was the ability to organize sites into groups. I immediately did a preliminary organization. It works very simply and is quite discoverable, especially if you have ever used an iOS device. Drag a site icon onto another site icon and a group is instantly created.

The slider at the bottom allows you to control the size of the site icons and folders. As an added bonus, if you slide the controller all the way over the left, you will get a list view, something that was not available in the original Coda. It’s another nice touch.

One thing though that pained me right away was seeing those horrible vertical window control buttons lifted straight from the initial release of iTunes 10.

I have complained about this before and I will do so now for Coda as well. I believe this to be a horrible breach of UI aesthetics and muscle memory. I think we can all legitimately complain about how horribly broken the functionality of OS X’s green zoom button is and how it never behaves in the way you expect it to, and we can bemoan the way minimizing works in OS X. But at least for most apps we know where those buttons are located.

As with the initial release of iTunes 10, so it is now for Coda. Muscle memory is broken. When I want to minimize or zoom the Coda window it takes me a little extra time to find the buttons. It’s nit-picky but annoying. I use those buttons often enough that it bugged me quite a bit. And it’s not a matter of re-training my muscle memory because Coda 2 is the only app with the buttons like this. I’m lobbying for them to go back where they belong. Window controls belong on the top left horizontal plane of a window in OS X. I do not believe any exceptions are called for.

You would think I didn’t have anything to write about the way I’m carrying on about this minor annoyance, so it’s time I moved on because there’s a lot to cover.

File Management

Users of Panic’s Transmit will feel right at home upon opening a site in Coda 2. Though Coda does not completely displace Transmit if you need advanced FTP functions, it is certainly a workable solution and I think I will find myself using Transmit far less than I did before.

The initial view is a split view of local files on the left and remote files on the right. You will feel right at home if your work flow is to edit locally and then publish to server.

As an ExpressionEngine web developer, I am almost always working on templates in the directory structure of the FTP server and not on local files so I switched off the split view and went straight to remote view. Aside from the fact that files have their own tab instead of a dedicated sidebar, this works as before. Double clicking a file either locally, or on the remote server will open the file up in a tab ready to be edited.

I actually like files having their own dedicated tab far better. I prefer it to the sidebar approach because there’s now more horizontal room for my code.

Fear not though, ease of file access is not gone. Coda 2 includes what they call an active path bar. What this means is while you are editing, the path to the file you are working on is displayed in the path bar. Clicking any segment on the path bar will pop up a list of files for you to open, or even move around or manipulate in other ways. It’s actually quite brilliant in my opinion. I’m fairly confident I will wonder how I ever got along without it.

Tabs and Split Views

Tabs are another big improvement. In Coda 1, somehow tabs never looked right to me. I sometimes had a hard time seeing which tab was active, or which file belonged to which tab. Coda 2 introduces thumbnail tabs. I find this much more visually appealing and have had no trouble determining which tab is active at any given time. And it’s easier to identify which file belongs to which tab.

There are actually 3 modes for tabs: large icons, small icons, and text only (more like tabs in the previous version).

(Note that in text only tab view the window control buttons are oriented the proper way! I’ll have to think about running Coda 2 in this mode.)

On the tab bar you will also find a “plus” button from which you can do four things. You can start a new blank document, open a new SSH session, open a reference book, or start a MySQL session.

Split Views

One thing that has always been unique to Coda is the ability to split a tab view in half vertically or horizontally. I prefer to split my windows vertically, though Coda will split horizontally if that’s your thing. Spliting the window has received a bit of a makeover. When you click the split button, you are given a menu of options. It’s pretty much the same things you could do before (minus the CSS panel, which I’ll get to shortly).

Three Cheers for Code Folding

People talk. Sometimes they talk about Coda. When they do, they are often inclined to talk about its shortcomings. Among those shortcomings, someone would inevitably say, “yeah, I can tell you really like Coda by the way you wax eloquent about it, but can it do code folding?” That was the point at which you would turn red, mumble to yourself and try to steer the conversation in another direction.

Well no more, because Coda 2 includes code folding. And it seems to me to be much smarter and better than most other applications I have used. This is extremely valuable because it is easy (for me anyway) to get lost in nested divs and so on (usually when I’m trying to drill down into someone else’s code, which I seem to need to do way more than is healthy for my sanity). Code folding makes it much easier to figure out what is nested inside what.

Make no mistake, this is a huge feature.

The Sidebar Moved

Oh, and it got a complete remodel. They basically threw the old sidebar out and put a new one in it’s place. I’m still getting used to it being on the right instead of the left, but it’s not really a big deal. The dog has definitely learned some new tricks.

First off, on the home panel you can drag favorites up to the top in the same manner as you would drag items down to the toolbar in the iPhone music app. Here you will find clips, files and navigator among other things.

• Clips
  Clips are still here and better than ever. In terms of inserting clips they pretty much work as before. For instance, I have “p” assigned to start a new paragraph tag pair. So I type “p + tab” and I get a paragraph tag pair with my cursor at the insertion point ready to type. In addition to the standard placeholder, you can also now have clips insert cutom text.
• Files
  Yes, the file view is still available in the sidebar. While I will as I said earlier likely use the dedicated file tab, there are times when I want to see the document list in the sidebar, and Coda 2 provides.
• Find In
  Allows you to search your files for content and optionally find and replace. Very handy
• Hints
  As you type, this sidebar area will give you hints about the code it thinks you are typing. I didn’t find this that useful.
• Navigator
  I never found the navigator to be all that useful in Coda 1, and Coda 2 appears to be no different for HTML. I can’t figure out what elements it decides to show and not show. So I’ll likely ignore it as I did before. For CSS however, it appears to replace the function of Coda 1’s CSS editor navigation so I will likely use it there. (More on that in a moment)
• Places
  Sort of like the Finder sidebar. Double clicking an item here will open it in the dedicated file browser tab.
• Publish
  If you are editing files locally, this will allow you to publish changes to the server.
• SCM
  Source Code Management. I don’t use Source Code management so I can’t really speak to this feature
• Shared
  Coda lets you share documents and collaborate over the local network. I’ve never used this since I usually do all my own code work but I hear it’s good.
• Validate
  This is a wonderful feature that will let you know if you have invalid code in your markup. This is much better than going through the W3C validator all the time.

CSS — Uh Oh

One of the big features that attracted me to Coda in the beginning was the CSS editing. The split view CSS editing was fantastic. It fit me well because I don’t have every CSS function memorized, but I could see the things I wanted to do in Coda’s CSS editor, add it, type in the value or whatever, and then if I needed to, I could edit the code in the code editor. And of course Coda wrote really clean CSS. So I was a little nervous when I heard that Panic was completely revamping the way CSS works.

And to tell you the truth, I’m very disappointed. This feels like the first real let down, maybe even the only real let down in this upgrade. The new way of working with CSS is called CSS Pops. What happens is that as you type code, pop-ups present themselves and you can choose what you want. For instance within a CSS bracket you can start typing the word margin, and all the margin rules will pop up. Select one and type enter and you are immediately kicked over to enter the value where you can again choose from a pop-up or just type the value. If the rule is a color rule, you will get a color chooser pop-up. If the rule has border or thickness options of some kind, you will get a pop-up with those options.

I type in my CSS a fair bit of the time. So I consider the CSS Pops a great feature to have added to the CSS editor. But there’s a fair number of times when I want the CSS editor from Coda 1. I want to just click in a value box and enter the margin value. Or whatever. I don’t see what possible reason they could have had for removing the revolutionary CSS editor.

In fact, I would say that the Coda CSS editor is how I really started to pick up CSS and learn it well. Because I would not know exactly how to do something, but I would see the different things I could try in the CSS editor and so I would start doing things in the CSS editor and seeing what code it spit out. It was very helpful. And that to me was the beauty of Coda 1’s CSS editor. It was great for beginners, but you could still get down into the code and do stuff. It seems to me that the pop-ups would have been a great enhancement, but they are no replacement for the CSS editor.

Thankfully, we do have the code navigator to at least let us navigate in a similar way that the former CSS editor did. Consider this my plea to Panic to bring back the beautiful, elegant, and powerful CSS editor to work alongside the CSS Pops.

I have a feeling I’ll be going back to Coda 1 here and there to use the CSS editor.

What Else?

Theres a lot more than I can cover here. Panic says there’s over 100 new features. Some of them I’m not qualified to address. I’m really horrible with databases for instance so I’ll leave the new MySQL feature to someone else to talk about.

• The new reference books are awesome and I’m sure I’ll be making use of them.
• Quicklook right in coda is great, select a file, press the spacebar. It’s awesome.
• Autocomplete improvements are all welcome in my short time with Coda 2 thus far.
• There’s something a bit more pleasing about the syntax coloring.

Diet Coda

Just for a second, stop and revel in just how awesome that name is. Done? Okay. It really is such a great name.

Diet Coda is an iPad companion app. You can edit on the go with your iPad in this slimmed down app or you can use it with Coda’s new AirPreview feature, dedicating your iPad to previewing your work as you code. I don’t have an iPad, but this truly does seem awesome.

Upgrade Pricing

I wrote about upgrade pricing and the Mac App Store earlier this month, and I think that the way Panic is approaching the problem, while good and I applaud them for it, highlights the very problems I was talking about.

What they are doing to work around Apple’s lack of paid upgrades for apps, and still try to keep as much parity between buying straight from them, and buying from the Mac App Store, is making “upgrade pricing” available to everyone for a limited time. This really isn’t upgrade pricing, it’s discount pricing, but it’s really the only option available to them with the Mac App Store being the way it is.

So, here’s the way it all goes down. On launch day, Thursday, May 24, Coda 2 will be available at a 50% discount of $49.00 to everyone. After that first 24 hour period, Coda 2 will be available for $75.00 for a limited time (this is what they are calling “upgrade pricing for everyone”). And finally, Coda’s price will return to $99.00 after that.

If you purchased Coda 1 directly from Panic (not through the Mac App Store) after April 10, you are eligible to receive a free upgrade to Coda 2.

Worth It?

I think so. As I said, I’m sure I’ll be making trips to Coda 1 for the CSS editor, but hopefully that won’t be that often, and that‘s really the only major complaint I have. I love everything else that’s new in Coda. I plan to buy it right away.

The folks at Panic are a class act and make fine software.