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.
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
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