Coda: Develop in One Workspace

Do you love to develop and design websites? Do you want to do all of your work in one application? Then Coda is the perfect application for you. Coda makes everything from simple code editing to previewing your designs quickly without having to leave the app. This is a great application for anyone interested in web development.

Coda offers six main features within the application: Sites, Edit, Preview, CSS, Terminal, and Books.  The first and one of the most important features of Coda is the ability to keep all of your website’s private information within the app, so you don’t have to re-enter the information every time you want to connect to your FTP servers. This great feature is called “Sites”.

I labeled four main points in the screenshot above. First, the site itself. The name you gave your site and a nice graphic is shown as your site’s homepage taped up to the app. You can double-click on this to launch whatever you were editing last within that site and make a new FTP connection. Second, the Add Site link. There is a simple interface for adding a new site with plenty of fields to satisfy your needs. Third, there is a Connect button just in case you want to do a one-time sort of deal, where you don’t want to save the information for later. Fourth, there is a slider that zooms in and out to give you a larger view of all of your sites.

The next feature of Coda is the focus of the entire app: code editing. There are three main things to look at in the code editor (not including, of course, the wonderful editor itself!). First are the tabs. You can open as many tabs as your computer can handle to edit any file you want. You can re-arrange their order as well. Second, the FTP browser. On the left you can see a folder within my website’s FTP, which is pretty self-explanatory. At the bottom of that there are some buttons that can be used to add/rename/delete/move folders or files. Under the code editor, there are a few buttons. The first is the Share function. This allows you to edit the same file with another person running Coda, using the Subetha Engine.

The third main feature of Coda is the live previewing.  When editing a file, all you have to do to see it live online is hit the Preview tab at the top and it will load it in the in-app browser. The first point in this screenshot are the three browsing options you have, which are View Source, JavaScript Console, and Find. View Source does what you think it would, and views the source of the page. The JavaScript Console is just like FireBug for Firefox, except in Coda. And of course, Find does what you think it would, finds what you type. Second, there is an option to view it in a browser of your choice (defaults to your default browser) in the top right.

The fourth main feature of Coda is the wonderful CSS Editing.  The two main parts of this section are the editing on the right (#1), and the styles listed on the left (#2). All you have to do to edit a style is to click it on the left, then open up one of the nine sections of CSS Editing to enter in any settings you have.

The fifth main feature may not be of use to many, but will be of great use to some. It is the Terminal. When you open up the Terminal, you are presented with options to connect to a server via SSH or connect locally to a local shell. You can use this Terminal as you would Terminal.app, only this time, it’s in your code editor!

The sixth and final main feature of Coda is Books.  Coda comes with four books, HTML, CSS, JavaScript, and PHP. You can browse all of these immediately and use them as a quick reference whenever you are stumped!

Overall, I have to admit that Coda is the best code editor I have ever used. It is quite pricy, though, retailed at $99, but I believe it is worth every dollar spent. If you still aren’t convinced, go download the free 15-day trial to see for yourself.