Tag Archives: css

Review of Panic’s Coda – One-Window Web Development for Mac OS X

12 Replies

I’ve recently been trialling Coda, Panic’s web development environment for Mac OSX. It currently costs $99 (about £65 at current rates) per licence, and offers a fully-featured 15-day trial before you burn your money. The version I’m looking at here is 1.6.2.

Coda sells itself as offering a complete environment for all-round web developers: somewhere to do your coding, a css tool for the design-oriented, and built-in subversion, FTP and SSH tools to transfer your masterpieces from your localhost to your live environment. In other words… an IDE (although it’s perhaps telling that it never uses that acronym in its sales pitch).

Coding
Coda offers a passable pure coding environment. It has all the basic text editing things: fancy colours, a certain amount of text completion and insertion (e.g. comment blocks). I don’t want to bore you with a list all the small details I found wanting in its text editor. Some of the bigger issues I had were lack of diff tool, and the inability to search across an entire project (or ‘site’ in Coda-speak). On the plus-side the editor did have a nice visual list of functions in your code. Macromate’s TextMate is often compared to Coda (a not entirely fair comparison, but anyway…), and to be honest in terms of code editing offers lots of things Coda doesn’t, and all the things Coda does. So, take your pick…

Styling
The css editor is pretty much what you get from tools like MacRabbit’s CSSEdit. You get to edit your css with a user-interface rather than hand-coding the stuff. That’s pretty much it. I’m left wondering just how useful Coda’s CSS tool is. If you’re proficient in CSS then do you really need a GUI to help you? If you’re not proficient in CSS then you’ll still be confused because Coda assumes you have some knowledge of how HTML and CSS work together. It’s a kind of irritating half-way house which I suppose might make life easier for half-way-house developers. I’m not sure.

FTP/SSH
One of the really nice things about Coda is that you can fiddle around with a local copy of your website and FTP it up to your live hosting account, all in a simple, integrated way. When you alter a file a little icon appears next to it in Coda’s file browser. Just click it, and off it goes. It really is very simple and easy to understand. So it has the same feature if you’re working in a more serious environment, where SSH is the only way to transfer? Erm… nope.

No quick-and-easy scp-equivalent? Let’s just stop here and digest what Coda’s all about. Those of you wondering what scp is will probably be ok with Coda. Those of you who know will probably realize that Coda’s aimed primarily at semi-pro developers who need to access hosting accounts with FTP. If you work in a professional environment where servers are locked down to such an extent that SSH is probably your only means of access, well one of Coda’s main selling points is lost.

To be fair there is an SSH terminal. My feelings are that this has been bundled to make Coda look more professional and justify a higher price-tag. Why is it any easier to click a button in Coda taking you to the terminal, than it is to switch to a terminal in a different window? Cmd-Tab? At best you might consider it a very, very minor advantage. At worst it confuses Coda and makes you wonder whether it’s trying to pitch itself at semi-pro or at professional developers. Is it for the Rails and Symfony developers out there? Who knows.

Preview window
Coda’s preview window lets you see your webpage as it would appear in a browser. Well, actually it shows you how you web page does appear in a browser, because the preview window is basically just a browser window. Again, I’m left asking the question: Cmd-Tab? Personally I found it more useful to analyze my CSS changes in Firefox + Firebug. Note too that the idea that you can review a single page of your website as a complete entity is a very out-dated and curiously amateurish one. The idea that ‘blah.php’ as a file actually renders a page of HTML is verging on the laughable: there will typically be dozens of files involved in rendering a single web page. Any serious (PHP) web developer would surely be using either home-grown code developed in a framework such as Symfony, or would be modifying available web apps such as Drupal or WordPress. The only way to view a ‘page’ in any vaguely sophisticated web app is to view it in a browser with a web server running. All this makes Coda’s preview window largely defunct. Once again, just Cmd-Tab to Firefox or something. Is it really that hard to do?

Subversion
A big selling point of Coda has been its inclusion of some kind of version control mechanism for your code. In this case subversion. The user interface is nice, although a little basic. Any checked-out code will display little icons next to the file name in the file browser. If you’ve made a change, you’ll see a little ‘M’ icon appear next to the file, which you can click to commit to the repository. It’s all very neat and rather lovely.
This does seem to be one area of Coda that works well. You will have to rely on terminal svn commands for some things, but most day-to-day stuff can be done very neatly and easily. Incidentally, TextMate includes very similar functionality. It doesn’t have the useful icons to let you know when something is out of sync with the repository, so for me Coda’s svn scores a point over TextMate here.

Conclusion
Coda looks lovely, and feels like something designed for semi-pro web developers. I can’t imagine hard-core designers and CSSers finding it particuarly useful, and hard-code programmers and coders won’t find its text-editing functionality up to scratch compared to much cheaper/free tools like TextMate, JEdit, or Eclipse. The preview window and SSH terminal features feel like a bolt-on, and honestly you’d have to be pretty lazy to find Cmd-Tabbing to another application much harder than pressing a button on Coda’s UI. The lack of integrated scp functionality will be annoying for many developers.

Coda costs $99, and could be a really useful value-for-money tool for semi-professional web developers who appreciate the convenience of having almost-TextMate, almost-CSSEdit, almost-web-browser, and SSH terminal thrown into one eye-candy package. Dreamweaver it ain’t. For starters Coda it has none of the HTML-building capability of Dreamweaver.

For about half the cost of Coda you can buy TextMate, CSSEdit, and use Firefox and an SSH terminal. Ok, you have to switch between them which is a slight inconvenience. But you do get more functionality for less cost. At the end of the day it’s all about what you’re comfortable with as a developer.

MySource Matrix design

I’ve been playing around with mysource matrix on my laptop recently, as an early development stage to our pilot while we’re waiting for the server hardware to be set up.

One of the first things I’ve been looking at has been setting up designs, and I have to admit it’s been a somewhat mysterious process.

OK so I haven’t been on Squiz’s design training course, but I have taken a long hard look at the 94-page design manual (to their credit, Squiz have about 1300 pages of documentation, most of which is freely available.)

Part of the problem is our pretty complex set of css files. The other part of the problem seems to be the way mysource matrix deals with links to images in css files. Suffice to say that getting an existing design into mysource matrix isn’t much fun. Once you’ve got over that hurdle, performance seems to be an issue.

A far easier option is just to lift your static template, pointing to all those static css files and images sitting on your live webserver. In fact this works just great, and it’s what I’m now doing. But something makes me feel it’s not the ‘right’ way to do things. I should point out that I may have misunderstood something in how to set things up, so this review may not be entirely fair. Apologies in advance it that’s the case.

If you enjoy pain, and want to share some of mine, read on…

Getting Started

Let’s say you have an image that you want to call from a css file with something like

background-image:url(images/snap.gif)

How does matrix know where images/snap.gif lives? Unless it’s living somewhere on a publicly accessible web server, it has to be uploaded into matrix. You can then refer to it as mysource_files/snap.gif, and the system will know what you mean.

If this sounds simple enough, then wait. There’s much more. By the end of this you’ll think having teeth pulled is a fun experience. Read on…

CSS Files

You first have to tell matrix that each css file which has a url() is an asset, not just some static text file sitting there. OK, so I go through all 30 of my css files that are like this, creating them as children to my main design. Something is making me feel uneasy about this, but I carry on anyway.

Images

Right, now I have to make all the images that are referred to in each css file children of the corresponding css file. Ugh. Yep, well I don’t have anything better to do, so I reorganise all my images according to the css file they appear in. Some images in more than one place, but oh well I guess I could make them as copies if only I could remember which css file I already uploaded them to. Whatever. I battle on.

The process continues for some time…

Cool. It was painful, but now I have all my css files uploaded, with all their corresponding images. I’ve changed the css files to refer to mysource_files/imagename.gif rather than their original url.

Now I need to link these files into the main design. It turns out that I can’t actually do this directly. I have to create special design areas in the main design which point to the css files.

OK, not too bad? Erm, well it’s not that simple. I actually also need to put in what’s called a customization which acts as a bridge between design and css files, and it’s that thing which point to the css assets themselves. This feels very wrong, but I carry on.

Too slooowww…

Hoorah! Now after a few hours persistence I have a working design. I test it out. After about 8 seconds, my page loads with the correct design. Hoorah again!

Then I stop and think what’s just happened. 8 seconds? Hmmm, ok well I know this is just on my macbook, but that’s really a tad slow isn’t it?

At that point I realised that there’s a lot going on here. You can cache the css files, although that threw an error when I tried it. I eventually fixed that ‘feature’ temporarily, and it’s true things did start to speed up a lot.

But at that point I pretty much gave up. Life’s too short. The option to point all urls at the currently live designs was just too alluring. Anyway it was all a useful experience, if only to tell me that getting a design to work properly and load quickly in MySource Matrix isn’t a quick or simple procedure.