Coda: Web Development for the Mac

June 10th, 2010 | No Comments »

I’ve been developing web sites since 1997. I started with a Pentium 150 with 32MB RAM running Windows 95. Notepad was the editor of choice and WS-FTP was what we used to upload files to the production server. It was a beastly setup, but exciting times. I moved on through several home-brewed Windows systems and a few product cycles of Allaire’s Homesite and then Macromedia’s Dreamweaver before switching to a Mac in 2006. Since Adobe had bought Macromedia and I used Adobe’s Creative Suite for the rest of my work I ended up using Dreamweaver for a while, reasoning that I owned it and it was “supposed” to be good. It sufficed as a code editor but I found the additional “features” packed into it and the poor interface a real distraction and hindrance to my workflow. I decided to look around for alternatives and found that the developers of the FTP client Transmit, which I use, had developed a web site coding environment called Coda.

Panic’s Coda features a tight-knit elegant user-interface which perfectly suits the way I work. Coda plays nicely with my development server, MAMP, handles Subversion repository check-in and out, features Panic’s Transmit FTP-engine, has site management capabilities including a built-in Terminal for quick SSH access to a server and all of that’s without even getting into the actual coding environment which I will get to later.

Using Coda for Web Site Management

Coda is predominantly a web site development environment and as such it provides a method and interface for managing multiple web site projects. Once you create a site by either importing one of your Transmit favorites or setting one up from scratch, Coda presents you with a screen of thumbnails representing your sites. You can either choose your own thumbnail or Coda will use it’s built in webkit rendering engine to create one from the home page of your live site.

Coda’s site information includes live and local URLs and roots which allow Coda to track and publish changes between your local development site and a production site on a remote server. There’s also support for FTP, sFTP, and WebDAV connections and Coda will save your authentication information in your system keychain. You can also store SSH credentials and manage the entire site as a Subversion repository checkout if you desire. I’m fond of the simplicity with which Coda approaches site management. While the thumbnails themselves border on the hokey with taped up corners and a slight curl at the bottom, overall I like being able to see a visual representation of my projects, double click one and begin working.

Coda’s Editor Mode Is Defined by Simplicity

Once you’ve created a site you can double-click the thumbnail image to enter the edit mode. The file browser on the left will automatically switch to the local root directory you have specified and you will also be able to change to the remote root via the built in ftp module. Files opened from the remote root will be transferred immediately upon saving them.

Several syntax modes are available by default including HTML, PHP, CSS, Actionscript, Javascript, Perl and Ruby. The syntax modes include automatic text color-coding and syntax completion. Additional syntax modes supporting third-party software such as WordPress and Drupal are also available in the developer community. Coda’s edit mode also supports sharing documents via Bonjour, programming hints, HTML validation and a code snippet/clipboard manager. Line numbers and invisible characters can be toggled on or off and a code navigator makes working with large files more manageable.

Coda also has a great find and replace feature. As with most editors you can choose to find and replace in open documents, documents within a specific directory or documents within the entire site. Coda also has the ability find and replace matches based upon standard perl style regular expressions and its own built in wildcard variables.

Coda’s Preview Holds A Few Surprises

Having used Coda for the last two years I was recently surprised to learn how powerful Coda’s built-in preview function really is. Built on the open-source WebKit rendering engine, the same one used by Apple’s Safari and Google’s Chrome to render web pages in the browser. Coda’s preview includes the ability to view the rendered source of a URL, track javascript errors with a console debugger, launch the URL in any other installed web browsers including IE and other Windows browsers (if you are using VMWare Fusion) and comes complete with a handy DOM inspector which although broken at the moment by the release of Safari 5 gives you the option to inspect any element in the DOM with Safari’s developer tool: Web Inspector…very handy indeed. Once in preview mode just click on the magnifying glass in the bottom bar and then hover over the element on the page you wish to inspect. Clicking on the element will lock the highlight on that element and then display the DOM hierarchy in a breadcrumb style at the bottom of the window.

Coda also has the ability to provide a split pane view so that you can work on the same document in different places, work on two different documents at the same time or work on a document and preview the site at the same time. I find the last option particularly handy when making changes to the site’s CSS as I can use the DOM browser to inspect an element and then after seeing all the CSS rules that a particular selector is inheriting its style from make the necessary changes in the stylesheet.

Edit Stylesheets with Style

Coda offers two ways to edit and create stylesheets. Hand-code them in the editor or use the built-in CSS editor to organize your styles and set attributes with the handy visual editor. You can use the CSS selector browser to visually organize your stylesheet selectors. Each selector’s name is displayed using the corresponding text and color attributes from the CSS making it very easy to identify typographical and colored styles, but unfortunately other attributes like padding, margin, position, etc. are not possible to display with this method leaving some of the style selectors as plain text.

Coda’s Built In Terminal

Coda’s Terminal view provides quick access to a local or remote SSH session. Since each Site managed by Coda has the option to store this information securely in the system keychain it provides a fast and convenient way of accessing remote servers via SSH and replaces the need for a separate terminal window.

A Web Developer’s Reference Library

Panic decided to round the whole One Window Development environment out with a neat feature called Books. Coda comes with PHP, HTML, CSS and Javascript references built into its library and gives the user the ability to add other books, websites and documentation via their URLs. These sit along with the built-in documentation in a page format similar to that from the Sites Management view. The user can define a thumbnail to be used as the Book’s cover art and associate the book with one of the syntax definitions. There is also an option to provide a formatted search URL. By holding down command and double-clicking a word Coda will look up the word in the Book associated with that syntax mode.

Leave a Reply

This field is required

This field is required