Clever Development With Coda
Jul 15th, 08
If you follow design related blogs, it seems you can’t click a mouse anymore without Coda’s icon making an appearance. I heard about this software long before buying my Mac, but because it’s exclusive to that platform, I was never able to give it a test run. Now eight months after making the switch, I finally got around to it - and it’s been a real pleasure to use! I would even consider giving Dreamweaver up for it… provided that certain functionalities were addressed. Yes, Coda has some gaps to fill.
But I’m getting ahead of myself. Lemme back up.
Built by the folks at Panic, Coda is the first web development application with which you can code, FTP and test your creations using a single, unobtrusive interface. It’s very easy to learn, and offers some extraordinarily useful features. Panic’s focus here is clear: simplify the development process by eliminating unnecessary windows, and rolling the important ones into a single tidy package. Well they pulled it off, and very well!
Highlights
The first really impressive thing about Coda is the built in browser - and we’re not just talking about a WYSIWYG type “design view”, but an actual preview for static and dynamic pages. The default engine is Safari, but you can change it to Firefox or any other browser you have installed.
On that note, Coda really shines with its document split feature. Split a file (vertically or horizontally) for simultaneous code and preview modes. Need multiple splits to work on more than one file? No problem. Use one split to preview and two more for code view.
Another useful tool is the DOM hierarchy inspector, which works like the Web Developer plugin for Firefox. Highlight, lock or unlock any element of a site you’re working on to see the associated class or ID name in a “breadcrumb” style breakdown at the bottom of the Coda window.
Once you have a section locked you can then move around by clicking any element in the trail of the DOM. There’s also a JavaScript log, which could be considered Coda’s answer to another plugin - Firebug, for finding and debugging errors.
Next up we have Clips (think Snippets in Dreamweaver). What’s useful about Clips is that you can build your own library of code snippets (with or without wildcard placeholders), then assign hotkeys for dropping them into your pages. There’s even a community Clips library to get you started.
Coda’s solitary, uncluttered window is far more appealing than Dreamweaver’s UI, which is sometimes overwhelming and irritating with all the panels that you can accidentally move or float if you get careless with the mouse. I’m not crazy about the file viewing system either.
Coda does a nice job of keeping that simple and easy to navigate. Double clicking a folder takes you into it, rather than just showing/hiding its contents. Once there, you see only the files in that folder - but navigating back up the hierarchy a step or all the way to your home folder is one click away.
Publishing is a snap too. Coda tracks the files you have modified or saved and gives you small visual cues in the sidebar. Click the “up arrow” icon to publish one file at a time, or use the ‘Publish All’ button to upload everything.
There are many more cool features in this application. I could go on but that’s Panic’s job. ;) This is a review, so I’ve got to cover the cons too…
What’s Missing
A lot of simple functionality is missing from Coda. A few of my annoyances include:
Remove Comment/Collapse Code - one of Dreamweaver’s nicest features are the one-click utilities alongside the code view panel. It’s nothing to comment/uncomment PHP, HTML and CSS. Particularly, the absence of an expand/collapse code feature is a disappointment.
Copy Files - I might feel stupid later, but I couldn’t figure out how to copy files or folders between sites! The obvious workarounds are 1: duplicate then move the file, or 2: right click a file and select “Show in Finder”, then copy/paste to a new location in Finder. Either way, these are time-wasting extra steps.
Find All - the ability to search not just documents but folders and entire sites is critical. I’m floored that’s it’s missing. Sometimes I just want to see a list of every occurrence for a particular item, without replacing anything. Unfortunately Coda only let’s you replace all without seeing all.
Shortcuts - the lack of key commands is most noticeable when working with multiple files. Reaching for the mouse to click a tab every time really slows things down. Switching tabs via key combo is must so faster, and could even extend to switching the focus between splits or views as well (i.e. Edit and Preview). If there are commands for this please set me straight.
Compare Files - you cannot view local and remote files simultaneously, and there appears to be no syncing or comparison functions.
Clips - (suggestion) opens in a floating module which lays atop the window. It would serve better if tucked into the sidebar like the Symbols feature.
Summary
Coda is still in its infancy (v1.1 at this time, with 1.5 in limited private beta), but it has the potential to become killer development software. Even now what makes Coda so attractive is not just the pretty interface but the price tag - a mere $79. It’s a solid app, without a significant investment, and has a great many enthusiasts to talk shop with.
Thanks, Charity. This software definitely looks interesting, although I think I would need more incentive for now to pay $79 and change over from Dreamweaver. Maybe down the track - I’ll keep an eye on Coda’s developments.
Jul 15, 08 | 9:50 pmI’m using the trial now and love it.
The tabs do have a shortcut. It’s Cmd } for the next tab and Cmd { for the previous tab… it would be nice if it was Cmd Alt left/right like it is for other programs, but at least it’s there.
I have two questions, I don’t know if you’ve encountered the answers. If you make changes somewhere else (e.g. Finder) does Coda recognise the changes and thus recognise the files need publishing to your site? Or my main goal: is there an easy way to upgrade WordPress via Coda?
I downloaded all the kristarella.com files via Coda so that I had an up-to-date copy of the site. It would be sweet to make changes locally, be able to view it via MAMP and then publish the changed files. The only problem is that I have a copy of wp-config for kristarella.com, so I don’t know how to get it to use the local MAMP database without changing that file. Did that make any sense and if so, do you know how it can be done?
I still don’t like the idea of paying $79 for a program (I know I’m super stingy), but this is a seriously cool program.
Jul 16, 08 | 12:36 amYay thanks for the shortcuts! You just simplified my life some more. :)
Coda won’t track files you edit somewhere else. I tried it out (with Coda running) by making a change to a stylesheet in CSSEdit and saved the file. No icon to indicate the file had been modified appeared next to it in Coda. The file itself will automatically reflect edits made in another app though (Dreamweaver asks if you want to reload), so that’s a bit odd.
Your 2nd question did make sense, and that would be very cool! Unfortunately I don’t know how to do it either. :( I just defined two separate sites - my live one and a duplicate set up on MAMP.
Jul 16, 08 | 9:41 amSweet. Thanks for the answers. I guess not the answers I was hoping to find, but they were the ones I suspected to be true. Guess I’ll have to do the full delete and replace of the files for WP. At least I’ve managed to streamline that process a bit over the last couple of years.
Jul 16, 08 | 5:25 pmI got my start in Dreamweaver, but in the end I just started using notepad and a local WAMP to do my development.
Jul 22, 08 | 10:29 amHey Charity, thought I’d let you know about a couple of cool things I discovered with Coda:
Aug 6, 08 | 6:33 pmI figured out how to use site files locally for testing (http://www.kristarella.com/2008/08/wordpress-using-coda-and-mamp/). It basically puts the info for two databases in wp-config and says to use the server one if the http:// address is your online address or use the local database if it’s not.
Also, you can “mark for publishing” from the right-click menu on files (and probably folders too), so if you add a plugin via Finder then you can mark it for publishing and you don’t have to open up your other FTP client. Would make upgrading easier too (unless there’s a file that must be deleted and it messes everything up).
Sorry some of those sentences were really hard to read!
Aug 6, 08 | 6:33 pmTo be a little more clear - but admitting that I may have missed some features - I don’t see the value of an application of this type being constrained to “one window” if there isn’t a lot of flexibility to how that window is configured.
When I work in Dreamweaver, I can work in code/design or split view, and the document window is surrounded by palletes that contextually provide ways for me to modify what I’m working on.
Although Coda allows you to split the window horizontally, there seems to be other way to have your CSS palette available while you work on your design, but the CSS editor seems meant to be displayed in the whole window, so allowing vertical splits (my preference) would also require at least the CSS editor to be redone a bit, it seems.
However, other things are an improvement to DW - I think the ability to switch between text and GUI css editing is nice in the CSS editor, for example.
Sep 4, 08 | 7:45 amThanks Charity. This article is definitely a good read for me! Interesting and very informative. Although this wasn’t what I was looking for, but it did answer some questions I had in mind. Thanks for sharing
Sep 6, 08 | 7:38 pm