Tech —

Hands-on: Web development on the go with Diet Coda for iPad

Panic's mobile Web development tool is impressive, despite some rough edges.

Panic has officially released Coda 2, a major new version of the company’s award-winning Web development application. Panic also took the opportunity to launch Diet Coda, a new lightweight Web development tool for the iPad. We did some hands-on testing with Diet Coda to see how it stacks up for mobile editing.

Diet Coda is lightweight tool that includes remote file management capabilities, text editing, and terminal access. These capabilities are tied together in a distinctive interface that is crisp, expressive, and well-designed. The core functionality is well-implemented, but the feature set is sparse in places and we found a handful of bugs that detracted from the quality of the user experience.

Digging in

Diet Coda starts at the site list, which shows all of your websites in a grid. Each one is displayed with a graphical thumbnail of the home page. The user can add a new site by clicking the plus button.

Viewing the list of configured sites
Enlarge / Viewing the list of configured sites

Site configuration is a relatively straightforward process: the user inputs a server address, credentials, and remote folder. Diet Coda can connect to a server via FTP, SFTP, and FTP with SSL. The user can also optionally specify the SSH server address and login credentials to use for terminal access with each site.

Configuring a site in Diet Coda
Enlarge / Configuring a site in Diet Coda

File management

After the user connects to a server, Diet Coda will display a dual-pane file management view. Remote file management is an area where Diet Coda really shines. The feature is designed in a really compelling, intuitive, and functional way–exactly what you would expect from the people who built Transmit. The right-hand column displays information about the selected file or folder and provides buttons for performing file management operations.

Browsing remote files
Enlarge / Browsing remote files

The left side of the interface displays the filesystem. The filesystem view is modeled after the Miller columns layout used in the Mac OS X finder–as the user descends through the folder hierarchy, the contents of each selected folder will be displayed in a new vertical column. The column display can be dragged back and forth horizontally, making it easy to get back up to higher levels of the directory structure.

The program allows users to move, duplicate, delete, and rename files. Except for renaming, those operations can also optionally be performed in batch mode. Diet Coda also allows the user to adjust file permissions, a feature that is supported with a clever finger-friendly user interface.

Adjusting file permissions
Enlarge / Adjusting file permissions

The only major disappointment with basic file management in Diet Coda is that the move operation doesn't appear to allow the user to interactively choose the destination–the program requires the user to type (or paste) the path of the destination.

I also encountered a minor bug that occurs sometimes when attempting to delete a folder. If you have selected an item within the folder and then go back and select the folder itself, hitting the delete button will often delete the item instead of the parent folder as expected.

Text editing

Diet Coda comes with a built-in editor for modifying files. It supports syntax highlighting and basic auto-completion on CSS, HTML, JavaScript, PHP, and Ruby. The support for HTML and CSS is reasonably good. CSS and JavaScript content that are embedded in an HTML document are treated properly. The syntax highlighting uses good colors that are easy on the eyes but still have plenty of contrast.

Editing a file in Diet Coda
Enlarge / Editing a file in Diet Coda

The autocompletion for CSS handles property names, but doesn’t appear to work for values. The HTML autocompletion supports the standard tags and will automatically insert both an opening and closing tag when used.

Testing HTML auto-completion in Diet Coda
Enlarge / Testing HTML auto-completion in Diet Coda

Programming is an area where Diet Coda falls short. The auto-completion for Ruby, PHP, and JavaScript is primitive and doesn't appear to have any awareness of the user’s code. As far as I can tell, it’s just matching against a large built-in dictionary of standard function names and symbols.

The Ruby syntax highlighting didn’t work very well and exhibited a number of odd behaviors. In some lines, for example, everything after a double-colon is highlighted incorrectly. The syntax highlighting also appeared to have some difficulty with Ruby’s string interpolation syntax, which got proper highlighting in some cases but not others.

It’s worth noting that Ruby isn't listed as a supported programming language on the Diet Coda website–the feature appears to be experimental. Additional programming languages, such as Python are not supported at all. The Diet Coda website indicates, however, that support for additional languages is planned in the future.

The editor has a nice built-in find-and-replace system that optionally supports regular expressions for matching. It also has an excellent snippets system that you can use to define blocks of text that you want to be able to easily insert later.

Performing a search with a regular expression
Enlarge / Performing a search with a regular expression

You can optionally associate your snippets with a specific programming language or site. When you start typing something that matches a snippet, the editor’s auto-completion mechanism will offer to insert the relevant snippet for you.

The snippet selection dialog
Enlarge / The snippet selection dialog

One of the nicest features in the Diet Coda text editor is the Super Loupe, a custom mechanism for moving the cursor around within the text buffer. Panic replaced the traditional circular magnifying lens with a magnifying block that spans the entire width of the document. It’s a little bit disorienting to use at first, but it’s very effective in day-to-day use. It makes it a lot easier to see your position in the current line.

The Super Loupe, Diet Coda's unique cursor positioning tool
Enlarge / The Super Loupe, Diet Coda's unique cursor positioning tool

Site management and terminal

When the user is browsing files or editing a document, they can tap the purple button in the top left-hand corner to access the document list, which is designed a bit like the platform multitasking panel. The Sites button at the far left will take the user back to the site list. The Terminal button will open the built-in SSH client.

Viewing Diet Coda's internal task management interface and document list
Enlarge / Viewing Diet Coda's internal task management interface and document list

All of the documents that the user has currently open for the active site will fill the rest of the row. The user can click any document to jump back to editing it. The document list is specific to each site and will persist between uses of the application.

Closing a document is a lot like deleting an app on the iOS home screen: the user does a long-press to make all the icons jiggle and then hits the white X on top of the icon. If the file has unsaved changes, the user will be asked if they want to save. This internal task management interface is really clever and it usually works well, but on two occasions the application hung when I performed a long-press on one of the icons.

The terminal is a fairly standard SSH client that works largely as expected. It’s built on top of the same engine that Panic uses in Prompt, the company’s outstanding iPad SSH client. There appears to be a bug, however, that causes text in the terminal to not consistently display.

Attempting to use the terminal. Some of the text, including the inputted commands, wasn't visible
Enlarge / Attempting to use the terminal. Some of the text, including the inputted commands, wasn't visible

Conclusion

In a 2010 interview with Ars Technica's Jacqui Cheng, Cabel Sasser of Panic discussed the possibility of bringing the Coda user experience to the iPad. Building a whole website on a tablet computer didn't seem practical, he told us at the time, but he recognized the potential value of enabling Web developers to update their existing websites from a tablet.

The Diet Coda application seems to have been tailored around that sentiment–it is best-suited for quick editing on the fly. The application gives you a frictionless way to get into your Web content and start making changes without having to jump through a lot of hoops. It’s especially effective for users who are working with a lot of static HTML content.

Diet Coda is less suitable for Web application developers who are looking to do serious programming. The built-in editor in Diet Coda has some really nice features, but it falls short of dedicated programming editors for the iPad, such as Textastic. The lack of certain critical features like offline editing also limits Diet Coda’s usefulness.

Despite the deficiencies, Diet Coda is an impressive application with much to offer. It’s current $19.99 price in the iOS App Store is a little bit much for what you get, but with some bugfixing, broader language support, and other improvements, it has the potential to eventually become an indispensable tool for Web developers.

Channel Ars Technica