After over a year writing for SA, I’ve now realised that I haven’t given Coda the attention it deserves. I’m sure many of you are already using Coda, and are well aware of this amazing application. But for those who’re new to the game, and for the sake of posterity, here’s my take on Coda, the brilliant web development tool from Panic software.
When I first moved to the Mac, I held on to Adobe Dreamweaver as a safety net. It was what I was comfortable with, it had all the power I needed, and it was available for the Mac. But when it comes to the Mac, you quickly realise one thing, that there are far better alternatives to the cross platform crap that you hang on to. I immediately switched to Safari, started using Pages, warmed up to all the iApps, and most importantly, found Coda to be a beautiful replacement to Dreamweaver.
Dreamweaver’s USP was that it was the best WYSIWYG editor on the planet. It really was. But as web development moved from WYSIWYG back to text based editors (largely due to the stronger influences of server side pages), Dreamweaver just felt like a cluttered giant carrying unnecessary baggage no one wanted to lift. Coda on the other hand is refreshing, lean, ‘Mac-like’, and designed with a modern web development workflow in mind. Obviously there’s a lot of features I could talk about, but here are 6 of my favourite things about Coda.
1. Sites, with live updating thumbnails
Coda pins each ‘site’ that you have to a grey wall, and updates the thumbnail according to what your site currently looks like. While this sounds gimmicky, it’s actually really useful, as you can quickly identify the site you want to drill down into. Adding sites is also animated—much before Core Animation came along in Leopard in fact—if even a little overtly so. These bookmarklets not only contain the server information, they also remember which documents you last had open!
2. The most fluid user interface.
Coda’s core UI is split into Sites at the top level, and ‘Edit’ current site (with FTP listing in the sidebar), Web ‘Preview’, and a CSS editor taking up the meat of ‘editing’. Switching between the three editing tabs is by means of a shortcut Cmd+2/3/4. Once you get the hang of it, you don’t even have to think about it.
To me this workflow—rather than having items in the sidebar and mousing through them—is much faster than anything I’ve used so far. Every aspect of web development is given proper attention.
3. Code Editor
I’m not sure if the code editor ‘blows the mind’, but it’s very adequate. Proper code highlighting (with the option for themes), block editing, error correction. It’s even got a GREP based find/replace, but I haven’t tried it yet.
Sadly, it doesn’t have the code collapsing features of Espresso, but that’s the only thing I find missing.
3. Web Preview, with DOM inspector as well as Safari inspector
You don’t really miss the ‘wizziwig’ features of Dreamweaver when you’ve used the web preview of Coda. Rendering the site in Webkit, you get the current rendering of your site either on the web, or locally if that’s the case. However, Coda’s web preview doesn’t end there. You can edit the web preview by pulling down the code, to see how changes reflect live on your page. In addition to the fantastic Webkit DOM inspector, Coda comes with its own inspector, allowing you to guage the hierarchy of the page, useful for editing. You can even change the url of the website midway, open the page in another browser, and check for any syntax errors within the console.
The web preview is far superior to anything out there. Even refreshing the page in Safari can be a pain, as the browser tends to cache certain elements. Coda makes sure every refresh is completely fresh, giving you the correct rendering of your site. I wish they had incorporated the Gecko (Firefox) rendering engine as well.
5. Live collaboration
Coda uses the SubEthaEdit engine to allow multiple users to see the same code on different machines. Changes are reflected instantly, so you’re always working on the current code. Setup is as easy as announcing your bonjour presence and inviting users on the network to collaborate. You can even do this over the internet, although it’s a little more difficult and the changes aren’t very ‘live’.
On my Mumbai trip recently, Preshit and me decided to work on the new SA codebase, so why not try out the collaboration! After a few fumbles, we finally got on the network, and were collaborating. Things aren’t always as rosy however, as collaboration is more of an interesting concept than practically useful. To me at least. So we worked individually. Why is it in this list of faves? Because it’s cool and it works as advertised.
4. CSS Editor
Sure we edit CSS by hand, but there are times when a good CSS editor really speeds things up. People swear by CSSEdit from MacRabbit, but I couldn’t be more satisfied by Coda’s editor. It’s got a great collapsible UI, prevents syntax errors, and has pretty much everything you need in terms of CSS editing.
Well, not everything. Coda is yet to implement some of the CSS3 features like rounding and text shadow. There’s also some issues with resizing the names pane—you can’t.
6. Split panes
A lot of editors have featured split panes, but none of them as versatile as Coda. You can split the code into either horizontal or vertical panes. And you can split each window into unlimited panes. If you have a large monitor like the one on the 27” iMac, you can have the top left of the page show CSS, the bottom left show the CSS in code, and the full right show the web page as it looks to the public.
Personally I love working in the CSS view, with the bottom pane showing the actual CSS.
There are a lot more features ‘worth talking about’, but since I don’t use them (plugins, Quick Open, Subversion, Terminal, Reference books, to name a few), I’ll refrain from the mention.
Little list of complaints
And while I’m praising Coda to the skies, I might as well bring up my little list of complaints.
- Poor dual monitor support. You can have only one window for a particular site open. It would be great to have a preview, or a split pane on a separate window, but unless your displays are the exact same size, it’s not realistically possible.
- Sites management. There needs to be a way to export the current list of sites; useful if you plan on transferring your work to a notebook. ‘Syncing’ would be even better. Also, some people *cough* Preshit *cough* who maintain a whole bunch of sites would prefer to have folders for these bookmarks.
- Coda’s save to web deletes the previous version before replacing it with a new one. It’s seamless, but there are times when Coda will crash midway, or it might even be a human error. But the damage is done as the remote file is cleared, and the local file is not uploaded. I was stuck once staring at a blank CSS file.
- A better FTP manager. The current ‘sidebar only’ view is kind of limiting. If they’re going to implement an FTP client into the workflow, why not just go ahead and make it the best FTP manager out there? My idea is to have the sidebar sort of collapse into the full window, allowing different views, including a column view, path bar, and a better transfers window. Hopefully they won’t hold back Coda to push Transmit sales.
- A flashlight. Because everything’s better with a flashlight feature.
Coda. One window web development.
Coda is almost like the Mac OS X of web development. There’s so many little details that the Panic team has made sure are perfectly implemented. It’s no wonder it’s the top web development tool on the Mac, more than Dreamweaver. There are some major issues with the app, not so much in terms of stability, but in the UI and workflow, and missing features. I’m sure something’s cooking up at Panic though, and Coda 2.0 will be dropped soon. And when it does, it’s going to set the bar up even higher. My prediction is it should arrive before 2009 ends, but I’ve been wrong many times before.You Coda?
