Diet Coda

Icon.DietCodaCoda 2 has, once again, streamlined the way I do my job. Earlier this week I went on a fairly in-depth review of this major new release and left off with a teaser about “Diet Coda.” Today I want to show you the latest tool from the company that developed Coda 2 and talk about how it has also helped change way I do my job, both in tandem with Coda 2 and as a standalone application.

If you hadn’t guessed already, Diet Coda is an iPad implementation of the Coda development platform. While it’s not as feature-rich as the OS X version of Coda, it’s a pretty respectible tool. I want to talk about the AirPreview tool first, and then I’ll move on to the more meaty features Diet Coda supports.

AirPreview

One of the coolest features of Diet Coda, if you’re already a Coda user, is the AirPreview functionality. You already know about the Preview feature in in Coda, and AirPreview moves this feature out of Coda and onto your iPad so that you can preview your sites on your iPad while you edit them on your desktop. Here’s how it works.

AirPreview.coda2

First, fire up the Diet Coda app on your iPad. In the Coda 2 editor, click on the AirPreview button in the lower left. Coda will look for iPads on the same wireless network and once it finds the iPad running Diet Coda it will give you a four digit code to use to complete the connection in Coda 2. Once the connection has been made, Diet Coda will immediately give you a preview of the file you’re currently editing, exactly like the Preview function of Coda does.

AirPreview.Preview

It’s really that simple. There are no extra options on Diet Coda’s end, just a simple preview that continually updates as you make changes to the site you’re working on. It’s a great feature that replicates the concept of dual monitors: One for editing, one for previewing. 

ipad.laptop.setup

Of course, that’s not all Diet Coda does. It actually crams a full-fledged web development IDE into your iPad.

Sites

1.Sites

The Sites screen of Diet Coda looks just like the Sites tab of Coda 2. Here, you can create new sites for each web project you want to manage. You can also group your sites into folders if you have more than a handful of sites that you work on.

Files

2.Files

Once you select a site to work on, it will connect in to the server and give you a list of folders and files. Navigating the filesystem is as easy as touching a folder to open or tapping a file that you want more information on. They did a really good job packing all of the remote file management features you would need into a touch interface, including creating new folders, moving individual and batches of files, duplicating and deleting files. Once you’ve found a file that you want to make changes to, you can tap the “Edit in Diet Coda” button to get into the Editor screen.

Editor

3.Editor

The Editor screen should look pretty familiar, with the exception of the dark background. It features the same syntax highlighting as Coda, although it only offers a subset of the syntaxes it recognizes. But as long as you’re working with HTML, CSS, Javascript, PHP, or Ruby you should be well supported. 

3.Editor.Selections

One place where the Editor screen really shines is in the area of cursor placement. Diet Coda overrides the default magnifying glass cursor placement mechanism with a whole-line “Super Loupe” magnfication system that works really well. Just tap and hold to get a full-width magnification bar you can use to place the cursor exactly where you want it.

3.Editor.Search

Syntax highlighting isn’t the only feature that made it along with the Editor. Diet Coda has a full-featured search and replace function that sports all of the features of its Coda 2 counterpart. Regular expressions, case sensitivity, and selection searches are all supported.

3.Editor.Clips

The Editor screen also offers quick access to programming lanuage clips, just like Coda 2. I actually like the Diet Coda clips implementation a little better than Coda 2, but that could be due to the touch factor.

3.Editor.VisualTabs

Of course, it wouldn’t be a very good development environment if we coudln’t work on multiple files at a time. The upper left corner shows you how many files are open at any given time, and tapping it brings down the same Visual Tab bar that we saw in Coda 2. 

Terminal

3.Terminal

Diet Coda also packs in a very good Terminal / SSH window that you can use to make changes to your web server from right inside the application. I like the dark background with small text, but if you find it hard to read you can change it to white or bump up the font size.

3.Terminal.Large

Shortcomings

Diet Coda does miss the mark in a couple of key areas, and while overall I think it’s a great tool I would be remiss in not mentioning a few areas where it could be improved. First, unlike its desktop counterpart, there is no MySQL component. Granted, if they had to cut something out of the desktop version, MySQL would definitely be what I would want to lose, but it’s still something lacking. There is a severe lacking of quality MySQL apps for the iPad, and I know that if the developers of Coda did implement it into Diet Coda it would be top notch.

A huge issue, one that I know they are working to solve, is Site and Clip syncing over iCloud from Coda 2. It sounds like they weren’t able to get that in for the initial launch, which means setting up your sites on Diet Coda will be a manual process. If you manage a large number of sites, it could be a bit of a pain keeping your site settings on Coda 2 and Diet Coda in sync.

Another area is the number of programming languages available for syntax highlighting. This doesn’t affect me, personally, as 90% of my work is done in PHP, HTML, CSS, and JavaScript files, but that’s pretty much the extent of the languages supported by Diet Coda. If you’re writing in any other language, you may want to hold off until they expand this out a bit. 

I would love to have some version of the Navigator sidebar available in the Diet Coda editor. I often work with very, very large files and if I can’t jump straight to a function definition, finding a certain section of code can take a very long time.

It’s also worth noting that Diet Coda does run moderately slowly on my original iPad. Granted, this is the original iPad and it’s expected that it starts showing it’s age more than two years later, but it’s still worth noting.

Conclusion

Diet Coda doesn’t do everything that Coda 2 does, but I think that asking it to would be a bit unreasonable. Every feature I’ve covered here works really well, but Diet Coda definitely wasn’t designed to be a “Coda killer” or replacement for the desktop version. Rather, it’s a very good pinch hitter if you need to make changes to a site quickly and don’t have easy access to your desktop. I know that having a tool like Diet Coda on my iPad would make me feel a lot more comfortable about going out of town on vacation without my laptop, knowing I can still make emergency changes if the need arises. Bluetooth keyboards are fully supported, including common keyboard shortcuts like ‘undo’ and ‘save,’ so Diet Coda really comes close to replicating the desktop coding environment.

It’s a great first-version, and I’m looking forward to seeing where it goes from here. If you use Coda as your primary development platform and are planning to upgrade to Coda 2, Diet Coda is definitely worth a look. For me, no longer needing to lug my laptop with me on family vacation more than justifies purchasing this very capabile development environment.

Diet Coda will be available tomorrow in the App Store for the introductory, half-off price of $9.99, which is kind of a steal in light of the fact that Panic’s other iPad app — Prompt — does a fraction of what Diet Coda does and it’s priced at $7.99. I know I’ll definitely be picking up a copy before the price goes back up.

 

Comments