I perform all my own stunts. Some people get sweaty palms when they look down from tall buildings, but for me it’s when it’s time to upgrade WordPress or migrate to a new server.

As nervous as I may get doing database- and server-related tasks, the things that I am comfortable doing — such as stylesheets and basic php functionality to make this site do spiffy things — are a lot of fun for me. I’m not a professional programmer, nor do I play one on the Internet, but I love taking time off from writing on occasion to tackle a web design project. It’s the sort of work I can do with the music turned up.1

If I’m coding, it’s in Coda. I have been using Coda 1 since shortly after it came out more than 5 years ago. The site you’re reading now was built entirely from scratch using Coda and Transmit.

I have never felt constrained by Coda. It is fast, reliable, fun to use, and the way it works with files makes a lot of sense to me.

Coda 2.0

As the saying goes, simplicity is the ultimate sophistication.

There is a challenge with apps like Coda that have much functionality. That challenge is to design the functionality in such a way that it is the user who discovers and then defines how simple or complex they want the application to be.

Coda 1 did this well, but Coda 2 does it better. There are so many options, features and functions within Coda that it seems there is nothing it cannot do. But even for the amateur programmers like myself, Coda never feels overwhelming or overbearing. It expands or contracts to the needs of its user.

In my review of the Coda 1 I wrote:

Panic didn’t set out to make the best text editor, CSS editor, etc… They set out to make one single application that contains all you need to build a website. And Panic has done a great job at keeping each of Coda’s components concise, powerful and focused – giving you the features you need while not requiring you to learn 4 or 5 new applications simultaneously to be able to use Coda efficiently. Sometimes good development decisions are about what you don’t put in.

After its launch on a Monday morning in April of 2007, Cabel Sasser said: “This was by far the most complicated program we’ve ever built.”

Coda went on to win an Apple Design Award at WWDC in 2007 for Best Mac OS X Experience. And rightfully so — Coda was a groundbreaking application. Five years later comes Coda 2 — an application that is better than its predecessor in every way.

Coda 2 has kept all that was great about the original and improved all that was frustrating or confusing.

Using Coda 1 was like sleeping with a pea under the mattress. Or, as Joe Kissel said in his review, “like buying your dream car, only to find out that the seats are kind of uncomfortable and there’s no heater.”

The idea of a one-window web development tool that wasn’t built and priced by Adobe was a dream come true. Yet there was a slight frustration that accompanied the Coda workflow.

Web development usually consists of four (yea five) apps: (1) a text editor, (2) a web browser or three, (3) an FTP client, (4) reference material, and (5) perhaps the terminal.

Coda brought all of these apps together into one so that you wouldn’t need four or five different applications all open and running. It was good, but it was not great.

When I do coding for this site I use Coda as my text editor and FTP client, but that’s it. I still have a browser open in the background because switching between code view and preview always felt a bit clunky to me.

In his review of Coda 1, John Gruber wrote:

The appeal of Coda cannot be expressed solely by any comparison of features. The point is not what it does, but how it feels to use it. The essential aspects of Coda aren’t features in its components, but rather the connections between components.

The premier difference between Coda 1 and Coda 2 is its improvement between components. The workflow. Though each individual component (the text editor, the FTP client, etc.) has been improved upon, the most significant improvement to Coda is its central aim as a one-window web development tool.

Those who have been using Coda 1 as their primary web development app will love the update. Those who use other applications for their Web development may likely find Coda 2 to be a worthy companion.

It is the application I use and recommend for people looking to build websites. Now let’s take a look at some of the highlights in the new version.

The Tabs

The toolbar in Coda 2 is actually a document navigator. Like tabs in a web browser toolbar tabs are for different workspaces and documents. There are two tabs that are always there, always active, and those are the “Sites” tab and the “Files” tab.

The “Sites” tab is the standard start screen we know and love from Coda 1. It’s basically a favorites list containing the remote login information for any and all websites you hack on. Something new here is that sites can now be grouped together. Simply drag one site onto another as you would two apps from your iPhone’s Home screen.

The “Files” tab is basically Transmit integrated right into the app. This is a huge improvement to Coda’s previous FTP functionality. Coda has always used the same FTP turbo-engine from Transmit, but the visual file browser was not nearly as robust. If you’ve ever found yourself using Transmit and Coda at the same time, that habit may change with Coda 2.

After these two tabs, any additional open tabs are yours to set up as you need for your project. You can open multiple documents, a preview tab, a reference tab, and more. This is the meat of what Coda is all about and this is where things have improved the most.

Tabs Improved

The way Coda 1 handled workspaces and open files was awkward at best. And though I became familiar enough with it to feel comfortable, it was never quite natural — for example, a document tab could be both a file and a preview of that file.

In Coda 2, however, the new tabs and the way open files are managed is much more intuitive; this is the area that needed improvement and Panic has improved it greatly.

Tabs Designed

The tabs in Coda 2’s toolbar don’t just function different — they are completely redesigned. Visually, they have three optional states: Small Icon and Text; Large Icon and Text; or Text Only. You can select these from a contextual menu when Control-clicking on the toolbar, or you get them automatically if you resize the toolbar.

I prefer the Text Only tabs if only because I’m short on vertical screen space. However, the tabs with icons are tempting because they give you a live preview of that tab’s document.

For the Sites tab, Coda 2 will grab the Web Clip Icon in your root folder, assuming you’ve got one, and give you a high-resolution thumbnail image for the remote site you are currently working in. This beats the pants off a pixelated favicon.

To correspond with the fluidity of the toolbar and the different tab designs, even the traffic lights in Coda 2 have two different states. For the text only tabs you get the standard left-to-right layout. For the icon-based tabs, you get the top-to-bottom traffic lights akin to our old pal iTunes 10.0.

Additional Tabbiness

• When you create a new document, it is saved to your local machine by default. If, however, you are in the middle of working on a live site and you want the file to be on your remote server, just grab the tab of your document and drag it into the sidebar file browser to upload it to the folder of your choice.

Alternatively, you can Control-click within the file browser and select the option for New File.

• In Coda 1 a small blue circles showed up in the sidebar’s file viewer, just to the right of an unsaved document. Now unsaved documents you are working on sport that small blue circle within their tab as a way of letting you know the current working version of this file has not been saved to the server.

The iPad version of Coda (Diet Coda) uses these blue dots on the tabs in the file drawer as well.

Preview

If you’re going to have a one-window web development application, you need good in-app preview of the site you’re working on. This is something that never felt easy or natural to me in Coda 1, and so I still used Safari to view and check my changes.

But, thanks to the improved tabs, previewing your work in Coda 2 is much simpler.

You have four options for previewing:

1. A dedicated tab with web page loaded in it.

2. Split screen previewing that is side-by-side with the document you are coding.

Split screen previewing works quite well. You can code in the top window and preview your work in the bottom window. In fact, as you work, the bottom preview pane updates in real time as you code. Hit save and your changes are pushed to the server.

1. Previewing in another window. Ideal for multi-monitor setups. When your document is in Preview mode (the right-most breadcrumb) click the settings gear icon in the bottom-left corner of the window and choose Preview → New Window. A new Coda window will pop up with a browser preview of the file you’re working on. As you make changes to your document you see them live in the Preview window.

2. AirPreview: connecting your iPad as an external monitor like a boss.

Coda 2 will pair with Diet Coda on your iPad to turn your iPad into a dedicated window to preview the site you are editing in Coda.

You first pair your iPad with your Mac by pointing the camera at your Mac’s screen while a box flashes bright random colors. Then, anytime you have Diet Coda open on your iPad, you can turn the iPad’s screen into a secondary preview window.

Furthermore, the iPad preview auto-refreshes when you save your changes to the file you are editing in Coda 2. No more hitting save and then navigating to the browser and hitting refresh.

You don’t have to be working on the root file of your preview window either. You can be working on the CSS stylesheet, or a related php document, while viewing your rendered Index page. When you make changes to the file you are working on, then your previews are auto-updated and relevant changes are then shown. This makes many instances of Command-Tabbing and refreshing far less necessary, if not obsolete.

Miscellany

• Pro-tip for the Sites tab: If you don’t want to use the auto-generated image for your site, you can Control+click on a site and choose to change the artwork.

• Coda 2 cannot import the .seestyle settings for syntax highlighting from Coda 1.

• The new way that auto-tag completion works is much more friendly. In Coda 1, when you typed an opening tag, such as <p> or <span> or <div> then you would get the closing tag auto-inserted into your text immediately. If you were just starting out your opening tag then that’s all fine and dandy, but often times (at least the way I code) I would find myself placing opening tags in front of lines of code that I had already written. And then, Coda would auto-insert the closing tag right there at the front as well.

Well, Coda’s new format for auto-tag closing is much more clever. They wait until you begin to close the tag yourself by typing </ and then Coda plops in the rest for you.

• Coda 2 does not support Lion’s auto-saving and versioning for local files.

• If you buy the Mac App Store version, you get iCloud syncing of your sites. This, however, does not mean that your iPad version and Mac version stay in sync (yet). But if you have more than one Mac that is using Coda 2, then those sites will sync.

* * *

Coda 1 was ambitious. It takes a lot of guts (or, in some cases, naiveté) to build an all-in-one application for a task as extravagant as web development. It also takes self-control to keep that application from getting too big for its britches. Coda 2, while following in the ambitious footsteps of its predecessor, is also more useful and more elegant.

I have been using Coda for years, and all the updates in Coda 2 meet my needs almost exactly. But there was another need I had, and that was the ability to access and edit files on my websites using my iPad.2

And Panic has done it. They not only improved an already impressive one-window web development tool, they also built an equally-impressive one-app web development tool. It’s called Diet Coda for the iPad.

Diet Coda

Diet Coda is an example of why the iPad is thriving as a personal computer.

Using FTP, Diet Coda is both a terminal and a text editor built for the purpose of making changes to files which are already on your remote server. Moreover, Diet Coda is the best name for an iOS app ever. If there were an ADA for app names, Diet Coda would win it.

Does the advent of Diet Coda mean professional web developers can now put away their iMacs and replace them with iPads? No. And that was never the intention.

Diet Coda isn’t meant to be a full-featured web-development tool for the iPad. Because, seriously, who is going to use an iPad for full-fledged website development? Virtually nobody.

But who wants to use an iPad to remote in to their server to update a file, copy a link, reboot something, or perform some other form of on-the-fly maintenance or editing? A lot of us.

My point isn’t that you can’t use the iPad for web development, but that most people won’t. And so why build an app to prove a point when you can instead build an app that meets genuine need just right? For this reason, Diet Coda is the best on-the-go web-development app you can buy. It’s not too much, it’s not too little; it’s just right and that’s the point.

What I like about Diet Coda is that it follows the same flow of working with files that Coda for Mac does. I have worked with a handful of other FTP / text-editing apps for the iPad and while they offer some features that Coda does not, they also make me shuffle my files around in a way that is not completely intuitive to me.

With Diet Coda I connect to my site, navigate to the file I want, edit that file, and then save my changes to the server. I don’t have to juggle both a remote and local version of the file — I just open it, edit it, and save it. This is how Coda 1 worked, it’s how Coda 2 works, and it’s how Diet Coda works. It makes working in Diet Coda feel comfortable and secure.

iPaditized

When creating an iOS version of a desktop app you can’t just drag and drop the code and click an “iPaditize” button. You have to balance the juxtaposition between the two platforms. Keeping the same core functionality of the Mac version, yet completely reimagined what the user experience and interface will be.

There are two dynamics to successfully building two versions of the same app, one for iOS and one for OS X:

1. Both apps need to feel native on their respective platform. The iOS version needs to feel like it belongs on the iPhone/iPad, and the desktop version needs to feel like it belongs there. This doesn’t just mean the buttons should be bigger to accommodate for fat fingers, it means the presentation of the core functionality, along with the flow of navigation and the user interaction within the application all have to pull together to form a well-developed iOS app that still has striking familiarity to its desktop counterpart.

2. Both apps need to feel like they are the same app. Meaning, Panic had to reconcile the two-fold need for Diet Coda to feel like a native iPad app while also feeling like the very same application they made for the desktop.

Because iOS and OS X exist side by side — two separate but similar platforms — we are seeing software innovation attain new heights as the two different platforms lean on and learn from one another. Put another way: iOS software is teaching us new things about Mac software and Mac software is teaching us new things about iOS software. The two are playing off one another.

The Omni Group is a prime example as ones who are helping lead the charge in this way. Their suite of iPad apps stand on the shoulders of their already award-winning desktop software, with OmniFocus being one of my favorite examples this. It started as a powerful and feature-rich Mac application and it was then perfectly ported to the iPad. In fact, I find the iPad version of OmniFocus to be superior to the Mac version in many ways, and I have no doubt that the next Mac version will be using many of the best components found in the iPad version.

We even see Apple doing this. With Lion and Mountain Lion they are taking much of the functionality and applications found in iOS and bringing it over to OS X for the sake of unification.

And, of course, Diet Coda is great example of Mac-app-gone-iOS. In addition to having the heart of its desktop sibling, Diet Coda is also filled with many iOS-esque details and innovations that delight.

• There is the Super Loupe. The Super Loupe is the real steel deal. It is Panic’s take on the iOS magnification bubble for cursor placement, and it is clever, fun, and extremely useful.

• If you have connected to a remote site and are in the file browser view, a tap on one of the four purple buttons in the Info Panel emits what I can only describe as a purple orb that radiates out from the button.

But the functionality of these buttons is also quite handy. You’re one tap away from copying a link, a URL, a file path, or the img tag with the source URL embedded (though it does not auto-detect the width and height when copying the image tag code).

Working with Files

Diet Coda makes it extremely easy to navigate around your remote server, working with live files, moving them, editing them, and previewing them. However, as I mentioned above, Diet Coda has no place for you to save files locally on your iPad. If you want to create a new file it must be saved to your remote server, and any work you do on server-side files is pushed back up to that live file when you tap save.

This is by design, and as such, it means there are some clever tricks for making sure you don’t lose your work when switching to another app for a moment, nor make an erroneous error to a live file.

If you have a document open in Diet Coda and then leave the app, the file is saved locally just as you left it, even if Diet Coda has to “force quit”.

In Diet Coda, though you are working with a file as it is on the server, you can preview your document before committing your changes. Diet Coda renders the web page as if the local version were the live version. This doesn’t work for dynamic files of course, only static ones.

Quibbles

Diet Coda is not perfect in every way, though. I do have a few requests:

• I’d love to see support for Amazon S3, and more robust FTP capabilities such as being able to upload files that are on my iPad.

• I wish I could duplicate a site’s details to more easily create additional sites that are subdomains that use the same connection credentials. (Or better: I wish Coda 2 and Diet Coda synced Sites.)

• There is no master password for the app. Thus I either need to remember my FTP passwords and enter them every time I connect to a remote site, or else I allow Diet Coda to be freely accessible to anyone whom I let use my iPad.

(If you wish to have Diet Coda ask you for your FTP password every time you connect, simply leave the password field blank when entering the site info.)

Additionally I’ve found that Diet Coda can get memory constrained when working with large CSS files, or if too many documents are open in the Document Drawer. And though the app has crashed on me a few times, not once have I lost any work.

A Concluding Remark

To say I’m impressed and pleased with Coda 2 and Diet Coda would be an understatement.

My initial impression of Diet Coda is that it is the Tweetie 2 of iPad text-editing apps. As many people have proclaimed, Tweetie 2 was not just one of the best Twitter apps for iPhone, it was also one of the best apps for the iPhone, period. Although Diet Coda is still brand-new, it strikes me being a best-in-class code-editing app as well as a great iPad app, period.