Last December I got an email that made my inner geek squeal with delight: An invitation to join the Coda 2 alpha and beta test. If you have no idea what those words mean, let me fill you in.
The CoDA Step Prayers may not be reprinted or republished without the express written consent of Co-Dependents Anonymous, Inc. This document may be reprinted from the website www.coda.org (CoDA). Explore releases from the Coda (2) label. Discover what's missing in your discography and shop for Coda (2) releases. Coda comes with building blocks—like tables and buttons—and time-saving templates, so your doc can grow and evolve with the needs of your team. Everyone gets their way. With customizable views, your Trello-loving designer and Gantt-head PM can work off the same data, in their own preferred way.
I have spent my 14-year professional career developing web sites. Things have changed a lot in those 14 years, but one thing has not: Building web sites requires a lot of different tools. You need an editor to write the code, you need an FTP program to put the code on the server, you need a web browser to preview the site as you build it, you need a database administration tool to build and populate the content of the site, and oftentimes you need a terminal application to change the way the web server works. Up until five years ago, the workflow I used to work on web sites involved at least five different programs all running at the same time.
In 2007, the first version of Coda was released, and it changed the way I do my job. Coda rolled most of the tools I mentioned above into a single interface and streamlined the process of building sites in a major way. So when I was invited to help test out the upcoming major new version of Coda, I jumped at the chance.
The first time I cracked open the Coda 2 beta more than five months ago, I was somewhat taken aback. It’s a pretty big change. Rest assured, though, that everything you love about Coda is still there — the interface has just been streamlined in order to (hopefully) make your work easier and more efficient. Let’s start at the “sites” tab.
Sites
If you’re already a Coda user, the Sites tab will look very familiar with one very welcome addition: Folders. Coda 2 allows you to group sites into folders, and they work exactly like you would expect if you’ve ever used the iPhone or iPad. The main screen shows you the collection of folders and when you click one, a panel slides down to show the sites contained within. A simple slider at the bottom allows you to change how big the folder and site icons are and, if you have a lot of sites, you can even drag the slider all the way to the left to get a simple Finder-style navigator and skip the iOS-style folders:
Files
Once you’ve clicked into one of your defined sites, you’ll be kicked over to the Files tab. The initial view is a split-view that shows you your local files as well as any remotely-defined FTP / SFTP filesystem. All of the sites I work on are hosted remotely, so I typically switch from this split-view to a remote-only view.
You can see from the buttons at the bottom that this filesystem navigator is just as flexible as any Finder window. You can view your files in the List view that I’m using, or switch to Thumbnails, Columns or Cover Flow. The three buttons in the center allow you to choose whether to view your local files, remote files, or split the window to see both at once. A breadcrumb trail at the top shows you your current directory, and simply clicking on any part of the breadcrumb trail will jump you up to that folder. The Files tab runs on the same FTP engine that powers Panic’s Transmit app, so you can do nearly anything here that you can do in Transmit including uploading, downloading, renaming and moving files around. As you would expect, you can double click a file to open it up in the editor view, or right-click to get a choince of options for working with the files in other applications.
Editor
On first glance, the Coda 2 Editor tab is largely unchanged. And for good reason — it worked fine in the original version of Coda, so why mess with a good thing? Once you start using it, though, you’ll find a lot of little tweaks that make it even more useful than it already was. The first thing you will notice is the visual file tabs at the top of the application. They not only show you the name of the files you have open, but even show you tiny screenshots of the files. This may not be entirely helpful for PHP or other scripting languages, but if you’re working with straight HTML files you will actually see small thumbnails of the rendered pages.
Apart from these new visual tabs, the Coda 2’s editor has added quite a few other changes.
Code Folding
When people talk about the shortcomings of the original Coda, code folding is almost always the first thing mentioned. It’s finally been added to Coda 2, and it works great. You can select any block of text you want and hide it from view. They’ve added a nice selection of keyboard shortcuts to make it super-simple to fold the code you want, including a “Fold Current Block,” “Fold All Blocks at Current Level,” “Fold All Level 1 Blocks,” and several others. Of course, you can also just select any arbitrary code you want and fold it with another shortcut. I’ve never been a big user of code folding, but in my time working with Coda 2 it’s become a regular part of my workflow and it works really well in Coda 2.
Active Path Bar
The other major addition to the editor that has really helped increase my productivity is the Active Path Bar. It not only shows you the full path to the file you’re working on, just like the breadcrumb trail in the Files tab, but you can also click on any of the crumbs to get a quick file picker. Rather than going back to the Files tab to find and open up another file that you want to work with, you can just click on the folder that contains the file you need to edit and select it from the inline list of files. Very smart feature, and immensely helpful.
Search and Replace
This isn’t really anything new, but it works so well that it’s worth looking at again. I love the search and replace tool in the original Coda, and it’s still here in Coda 2. At its simplest, it can search for strings of text and replace them with other pieces of text. It also has a powerful regular expression engine built in to allow you to search for patterns and replace them with other patterns. If you don’t know more complicated regular expression syntax, you can use the wildcard buttons to make it a little easier. And of course, it has a ton of options including case sensitivity, searching selections, constraining wildcards to single lines, as well as storing recently used searches. I don’t believe anything has changed here, because it worked so well already.
Variable Autocomplete
The original Coda had pretty good support for code autocompletion, but it was pretty well constrained to language keywords. When typing custom-defined variable names, it wasn’t a lot of help. Coda 2 has added autocompletion of custom variables, and it works really well. I’ve never relied much on autocompletion in general, but I have definitely used it a time or two while working with Coda 2 and it’s been a welcome addition.
Preview
Preview mode from the original Coda is still here, and they’ve added some very helpful features for cross-platform developers, including a variety of user agent string options. With a click of the mouse you can preview how your site will look on an iPhone…
…or an iPad.
The Preview pane has gotten smarter too: No more manual refreshing. If you have a split window set up, changes you make in your code are reflected in realtime in the Preview window.
The Sidebar
One of the features of the Coda 2 Editor that is sure to be touted and featured most prominently is the flexible sidebar. It’s very similar in concept to Coda’s original sidebar, but it is — in some ways — far more flexible than its predecessor. Clicking on the Home tab of the Sidebar brings up a list of all of the modules that the sidebar contains. You can click them directly from here, but what is really helpful is that you can drag any of them up to the top and arrange the tabs however you need. You’ll see from my editor above that I put my most frequently used tools — Navigator, Hints, Clips, and Validate — right at the top for easy access. Most of them are pretty self explanatory, but I’ll give each one a quick rundown.
The Sidebar – Clips
Clips was one feature from Coda that I always loved the idea of, but hated the implementation. It always felt like an afterthought: Clicking the ‘clips’ button brought up this strange modal floating window that allowed you to drag static clips of code to your editor. The problem — apart from the awkwardness of the floating window — was that these clips were very rigid. You could define a place for it to leave your cursor after inserting the clip, but little else. The biggest improvements of the Clips implementation in Coda 2 are the fact that you can define multiple placeholders in your clips to tab through after you’ve added the clip to your code, and you can trigger the inclusion of a clip with any keyword plus the “tab” key. If you have a custom function with multiple parameters, can you can never remember the order of those parameters, you can just define a clip to make it easier. And the fact that your clips are accessible in this built-in sidebar is infinitely more helpful than the awkward floating window from the original Coda
The Sidebar – Files
OK, so not all of the sidebar modules are all that helpful. The Files module really just duplicates the functionality of the Files tab, and I’m not really sure why you would use it. But there it is.
The Sidebar – Find In
The Find In sidebar module brings the power of Coda’s search feature to a side-wide scale. Perform search-and-replace operations on every file in your site with ease. The one caveat here is that it only works on local files. If you’re like me and develop almost entirely on a remote server, this feature won’t be much help, atlhough it can search through all of your open files. But if you work on a local MAMP installation, this is sure to be a useful feature.
The Sidebar – Hints
The Hints sidebar module replaces the hints panel in the original Coda, and gives a lot more helpful information. This is one of my top-two most used sidebar modules, as it gives a really easy way to remind yourself of the syntax of certain language functions while you’re working. Either leave it up while you write and let it show you hints based on what you’re typing at the moment, or use a simple keyboard shortcut to get a crosshair icon you can use to select specific functions you need help with.
The Sidebar – Navigator
My other most-used sidebar module, Navigator shows you a quick overview of the file you’re actively working on. Coda scans your code and gives you quick links to important parts of your code depending on what kind of code it is. If you’re working on a PHP script, it will show you links to all defined functions and includes. If it’s a CSS document, it shows you all of your defined styles actually rendered in the style you have defined.
You can even arrange all of the Navigator items alphabetically which is very helpful when working with class definition files.
The Sidebar – Validate
The Validate sidebar module is primarily for HTML / CSS junkies, as it doesn’t really work with any other languages. It scans through your code and alerts you to places where your code isn’t defined properly. As you can see from the screenshot above, I desperately need this tool.
The rest of the sidebar tools –Places, Publish, SCM, and Shared — are ones that I don’t have a lot of experience with, so I don’t really feel qualified to comment on them. It’s also worth noting one more great feature of the Sidebar: It’s easily dismissed. I do use the Navigator and Hints panels quite frequently, but it’s very easy to hide the Sidebar entirely with a simple keystroke when I don’t need it, in order to get a little extra horizontal editor space. The Sidebar can also be placed on the left side of the editor window, if that’s your preference.
At this point, given the length of this review, I feel like I must have exhausted all there is to say about Coda 2, but we’re really just scratching the surface. What we’ve covered so far — the Sites and Editor tabs — are really only two fifths of the tools Coda 2 gives developers. The final three aren’t nearly as complex, though, so we’ll take a brief look at each of them before I wrap this up.
The Terminal
Coda 2 brings back the Terminal feature of the original version, and it works pretty much as you would expect. If you’re a UNIX / Linux developer and have shell access to your web server, Coda 2 makes it very easy to jump straight into the server to do whatever command line tasks you need to do.
Books
If you need more than the Hints Sidebar tab gives you, Coda 2 comes with an in-depth reference guide for many, many programming languages. This feature did exist in the original version of Coda, but was little more than a frontend to online documentation. Some of the languages that have been added in Coda 2 include jQuery, MySQL, Subversion, and Git.
MySQL
Speaking of MySQL, Coda 2 now includes a full-featured MySQL editor. This is a major new feature, as it means one less piece of extra software I have to run. You can browse through your databases, make changes, define tables, and run custom queries, all from within Coda 2. It’s a little rough around the edges, and if you’re a heavy-duty MySQL power user you will probably find yourself returning to CocoaMySQL or Sequel Pro from time to time, but the MySQL implementation in Coda 2 meets around 80% of the needs that will come up when you’re developing.
Shortcomings
While Coda 2 is overall a fantastic improvement on the original, there are a few areas where it comes up short. One of its biggest shortcomings is also one of its biggest new featuers: The Sidebar. It’s flexibility is great, in that you can re-order the modules however best fits your needs, but at the same time there is no way to use multiple sidebar modules at once. Personally, I would love to be able to split the Sidbar horizontally and use the top two thirds for the Navigator module and the lower third for Hints. As Coda 2 currently stands, this isn’t possible. Sure, switching between the Navigator and Hints is as simple as a hotkey combination, but it would be nice to not have that extra step.
The addition of the MySQL editor to Coda 2 is welcomed, but in a lot of ways it feels just “tacked on” to Coda. The Editor tab has a lot of great keyboard shortcuts to make working with it easier, like wrapping selected text in tags, and commenting a selected block of text. The MySQL tool lacks this level of polish. There are a few keyboard shortcust available, but you can really only find them by accident, as they don’t appear in the menu structure anywhere. Additionally, the Custom Query tab does support running a batch of queries, but it lacks the standard “run everything” and “run selected query” buttons that more full-featured MySQL tools have.
Conclusion
Coda 2 is big. Really big. It’s been five years since the original version of Coda launched, and this new major release brings a lot of features that Coda users have been clamoring for, including code folding, MySQL integration, and more comprehensive books. There are even more features that I haven’t touched on, like Git support, full-screen support, and the promise of iCloud syncing (coming in a later version, from what I understand). If you’re a Coda user, you’re going to want this. If you were a Coda user and have since switched to other tools, you’re going to want to at least check this out.
Coda 2 goes on sale this Thursday, May 24. Introductory pricing will be $75, but it sounds like it will be on super-discounted sale for $49 the day it launches. If you’re interested in buying, you’ll want to jump during that first 24 hours. And while it will be offered through the Mac App Store as well as directly from Panic’s website, I would recommend going through the Mac App Store, as it’s a pretty safe bet that iCloud support will only be offered in the App Store version.
Coda (2)
Finally, one more major feature that could change the way you use Coda, and a little teaser for my next article: AirPreview and Diet Coda.
Coda 2
Comments