AEN UI

I recently tried out a new web development environment named Coda form Panic Inc., fell in love and decided to move away from Dreamweaver. It is new to me but by no means a new product. It has been around for more than a year and has won the 2007 Apple Design Award for Best User Experience. The latest version 1.5, the one I am using was launched on the 26^th, a few days ago.

One of the nice features is subversion integration. Unlike on Windows which is my previous platform, there isn’t many choices when it comes to subversion clients. On Windows I used TortoiseSVN which had excellent Explorer integration. On the Mac I used something called svnX which didn’t have Finder integration and the user interface isn’t as intuitive as on TortoiseSVN, although it is nice after you get used to it. Dreamweaver has no subversion integration.

Another feature is “Clips” which lets you store frequently-used code snippets in an intuitive “HUD”. The clips can also be imported/exported for sharing. I am currently using the clips feature to store snippets such as the structure for a basic XHTML layout, CSS browser resets, Lorem lipsum and other snippets like WordPress template tags. Really cool.

Like Dreamweaver, Coda also has FTP. Coda’s has Panic’s “Transmit” engine built-in and supports FTP, SFTP, FTP+SSL, and WebDAV. I still have not really gotten used to it but it feel snappier than Dreamweaver which tends to lock up for me when toggling between passive and non-passive modes in FTP.

Like Dreamweaver, Coda allows you to define “sites” and each of them can have their own configurations for FTP, testing servers, etc. The difference is that instead of displaying the list of sites in a dropdown lie in Dreamweaver, Coda shows them as almost-live updated thumbnails of the actual homepage of a site, in a grid. This features allows me to have a very clear overview of the active projects I am working on.

When developing in Dreamweaver, I don’t rely on WYSIWYG and I do testing on a real browser. This means that I had to switch back and forth between IDE and browser to edit code and view changes. With Coda, I don’t have to switch anymore as it has a preview pane. You can also select which browser to use, apart from the default Safari. I am using Firefox as the default.

Although I still have to rely on WYSIWYG in Dreamweaver for some client projects which have old and deprecated code, I will definitely see more of my time spent in Coda.

By the way since I have been using Dreamweaver since version 4, I am very much used to the syntax-coloring schemes of Dreamweaver so I spent some time configuring Coda to color syntax like Dreamweaver. I exported a “.seestyle” file which you can download and import into Coda to get syntax colors similar to Dreamweaver’s. It is not perfect but it works for me so you can probably refine it more. if you ever do refine the colors, why not post it here to share it with others?

Download Coda syntax color schemes for HTML, PHP-HTML and Javascript (zipped, small).

You get Coda at the official website for 99 USD. Try the trial and see if it’s worth paying for.