Coda: Integrated Web Development

Web design, traditionally, is a task which requires many different applications. You’ll need some sort of text editor, an FTP client, software for navigating documents (generally Finder), a web browser for previewing your site and often another tool for storing code snippets. This has worked well for several years, and any attempt to re-invent such a traditional workflow is commendably risky.

Coda came on the scene just under two years ago as a piece of software capable of integrating each of these different tools into one monolithic application. It received a great deal of acclaim and has come a long way since its conception. This review is far from an “exclusive” – Coda has been covered many times elsewhere over the past few years – but it will go some way towards outlining the features which make it stand out from using several independent applications. I’ll explain the main workflow process, and give my opinion on what works brilliantly and what I miss from dedicated tools.

Sites

Logically, all the work you do in Coda is split down into different ‘Sites’. These can be automatically imported from Transmit (if you’re already a user) or added manually. A screenshot is automatically downloaded as used as the thumbnail for the site – a nice touch!

Managing site with Coda

Managing site with Coda

Each site has a remote and local folder associated with it, along with subversion and terminal settings if appropriate. This allows Coda to keep the two destinations in sync and know which files to publish. Whenever you open or close a site, the status of the window is saved – i.e. Coda can automatically restore your session when coming back to the app at a later date. This is a great time saver over manually opening your FTP and editing applications each time you start working.

Files, Publishing & Subversion

Managing files is a feature which is vital to get right. It’s handled through a similar interface to Transmit, confined to a sidebar on the left of the screen. You can swap quickly between local and remote files, and easily add new files and folders. Uploading a file (or marking it to be published) can be achieved through the feature-rich right click menu.

Editing and publishing files

Editing and publishing files

Coda is able to track changes to local files and perform a batch publish feature which uploads all those files which have been changed since the last update. This is another big time saver, and a feature only possible with the integration of FTP and editing software.

If you’re familiar with subversion you’ll be pleased to know that the latest version of Coda has integrated support. In essence, subversion is a system for managing and retaining versions of all the files you upload and edit. Having the functionality integrated with Coda is a huge time saver over managing a repository manually.

Editing & CSS

The majority of your design and development time is likely to be spent editing code. For Coda to be a success, support for editing really needed to be second to none. Fortunately, Panic seemed to hit the nail on the head and users have been receptive to the built in syntax coloring, line numbering, auto completion and block editing. The CSS editing tools were designed to compete with the popular CSSEdit, and do so to a good level. The differences between the two systems may lead you to prefer one over the other, but both are solid tools for editing and previewing CSS changes.

css-screenshot_02

It’s also possible to collaborate live on a particular document with other users through the Subetha Engine. Whilst I haven’t tested this functionality, it looks good and would be great in a development team environment to ensure you don’t tread on each other’s toes:

Simple collaberation

Simple collaberation

Previewing

The ability to quickly preview a document can become a repetitive headache when constantly swapping between your editor and browser. Because Coda integrates a Webkit browser, you’re able to literally see your code and preview side by side. This can update in real-time when previewing locally, or automatically on each save for a remote file.

Live previewing locally and online

Live previewing locally and online

In a similar vein to several browser add-ons, Coda is able to provide a DOM inspector tool for navigating through the different tags in your document. A breadcrumb trail at the bottom of your screen shows clearly where you’ve come from to reach a particular element. This is coupled with a decent Javascript debugger to track down any script errors which may crop up (nobody’s perfect!).

Storing Code Snippets

I often find myself repeatedly Googling a particular code snippet or function and have never really settled on a local solution for storing and organizing clips of code. Coda has support for this built-in through the ‘Clips’ interface. It takes the form of a draggable, slightly transparent window which you can stash at the corner of your screen for regular reference:

Code snippets with 'Clips'

Code snippets with 'Clips'

A few in-built clips cover simple HTML code and a basic page structure to get you started on a new document.

Books & Terminal

Not content with simply providing editing, publishing, previewing and collaboration features, Coda also packs support for an in-built terminal for remote SSH access and a reference library for storing your developer sites and books. The app has one book built-in – The Web Programmer’s Desk Reference – a $60 value.

Connecting via SSH

Connecting via SSH

Using the in-built Terminal can be handy for altering server files, managing a database or otherwise tinkering with permissions and settings not available from a particular file. Not a requirement for everyone, but handy nonetheless.

Competitors & Limitations

There are a number of different competing applications which aim to achieve a similar concept. The most recent and conceptually similar is Espresso from MacRabbit, which offers more or less the same feature set as Coda. It’s free for now, but likely to be priced at around €60 ($77) when it comes out of beta.

With regard to book support, I’d really like to be able to import PDF books which I’ve previously purchased and downloaded (such as the recently released Five Simple Steps). It would be great to make Coda a central reading resource.

I often deal with WordPress and MySQL based sites, so have missed thorough support for managing an SQL database since Coda’s release. I’d absolutely love a nice GUI for managing my database, even if support was fairly limited (adding, removing and editing rows would satisfy me fine).

That said, everyone has a huge variety of needs for web design app features. I’m sure that if Panic listened to every feature request, Coda would have been a bloated, unmanageable application within a few weeks! As with WriteRoom, the beauty and simplicity of the app comes from integrating only the necessary features and executing them to perfection. This becomes ever harder as more and more features are added.

A Free Equivalent Setup

Of course, $99 is a hefty wad of cash to spend on any piece of software. You’ll be pleased to know you can still be a proficient and productive web designer at no cost to yourself. This collection of applications will have you coding and uploading in no time, though not with the same integration and style as with Coda:

  • Editing: TextWrangler
  • Previewing: Safari or a browser of your choice
  • Uploading: Cyberduck
  • Subversion: Versions (€39) – Now that Versions is a paid app (though still great), something such as GitX may be suitable.
  • Terminal: Terminal bundled with OS X
  • Books: Yep for storing and organizing PDF books

Conclusion

I did my absolute best to move all my development into Coda when it was first released in 2007, but it didn’t stick and I found myself reverting to opening Transmit and editing the odd file here and there. Learning about the new features of the app whilst writing this review has convinced me to give it another go, and I expect to be spending a few hours over the next couple of weeks getting the system set up.

Coda is brilliant if you’re a new designer, getting to grips with web design and development. It’s also great if you deal with sites primarily rooted in static HTML and CSS. If, however, you manage projects which are more dynamic and database driven, you may feel that the integrated environment feels a little more restrictive.

I’d definitely recommend giving Coda a go for the 15 day trial, but at $99 you’ll need to be sure it’s going to save you a decent amount of time before purchasing it. I’m interested to know whether you prefer a suite of separate apps or an integrated environment for your development work – are you a Coda fan?


  • http://www.ndrsn.se Dennis Andersson

    I was using the 15day trial on and off and then I decided to buy it. Probably one of the best buys ever, except from buying the mac in the first place! Oh, my Wall-E actionfigure is and always will be the best purchase ever. ;D

  • http://www.constantinpotorac.com Constantin Potorac

    A really great app. I am actually using Coda for writing my photoshop tutorials. A great tool

  • http://stephenkorecky.com Stephen Korecky

    Just a little FYI, Versions is now €60 But I highly recommend Git for anyone that wants to use version control, so much easier. And if you want to use a GUI interface check out gitx.

  • http://stephenkorecky.com Stephen Korecky

    Sorry, Versions is €39 (~$50)

  • http://another-perfect-world.org/ Vasili

    I can’t code on my PC anymore because I’m so used to Coda. The clean look and functions are just so helpful.

  • http://bluemandala.com Deryk Wenaus

    I use coda in combination with MAMP to travel the world while developing site on my laptop. It’s a very well built app. The clips feature rocks, and there are some good ones already done here: http://coda-clips.com. And there are a few plugin extensions that might be good improvements. (http://menumachine.com/blog/). I think database management plugins would be quite helpful. All in all I really like working in Coda. I even started writing short notes and documents in it because I just hate bloated Word.

  • http://frederic-soler.fr Fred Soler

    The best web dev app to my opinion.
    So simple to use every day, a real pleasure.

  • http://pixelgraphics.us Douglas Neiner

    David, I am sure you already use it, but CocoaMySql is a great GUI for MySQL on the Mac. I use it all the time.

    I really like the eye candy in Coda, but since I started on TextMate, I found it too hard to switch. Visual CSS editors really mean nothing to me as a developer as it takes much longer to change it visually than it does to type it.

    My setup is TextMate/Transmit/Terminal/CocoaMySQL. One of these days I may just buy it Coda just because people that use it love it… and I feel left out ;)

    • http://kairichardkoenig.de Kai Richard Koenig

      You should try sequel pro for managing your mysql via gui

    • Cp120

      Same here, for some reason since I started using TextMate I have not been able to use code. I already downloaded the trail, and I hated it, there is nothing like TextMate + CSSedit + Transmit +MAMP (for localhost testing like wordpress and that). on CSSedit you can turn off like the visual css editing, but it has like auto complition and indents all the css all pretty, thats why i like it.

    • http://chrisodonnell.name/ Chris O’Donnell

      CocoaMySQL was abandoned and most of it’s code and a new UI are now called Sequel Pro. Same app. I emailed the Panic guys and suggested they talk to the people who make Sequel Pro about integrating it into Coda, but I think they could easily write their own DB manager.

  • http://www.rorystory.co.za Rory Jacobs

    Coda is the bees knees! Never been a better all-in-one web application. Don’t know how I would get on without it.

    Tried out Espresso, didn’t have the same feel for me. Good app, but not Coda good.

  • http://adrian-rodriguez.net Adrian Rodriguez

    Once I get the money to buy Coda, I will get it, it’s been my favorite since I have tried it. For now I am using Dreamweaver and Smultron.

    • http://themeforest.net/user/kiziel kiziel

      You have money for Dreamweaver, but not for coda? :D

  • http://www.deezignink.com Chris

    I’ve been using Coda for about a year now. I still open Dreamweaver and Transmit (and even cyberduck, yes i have 2 ftp protocols) from time to time though. Coda does not have as many plugins as the larger competitor dreamweaver. It has the capability to have plugins but nobody is developing them, rendering it useless.

    So i use coda whenever i don’t need the plugins i have installed in dreamweaver.

  • http://onetruebrace.com Anh

    Both Versions and Yep are commercial applications – Versions costs €39 and Yep is sold for £26.

    • http://www.jorgebucaran.com Jorge Bucaran

      Yeah, just looked it up, I was so excited when I read it was free. Great post and website overall guys but please double check the information you publish.

  • http://russrenshaw.com Russ Renshaw

    I love, love, LOVE Coda. I hate to admit this but it actually improved my coding just with it simplicity and awesomeness.

    For those that have yet to pick up the full version. I highly recommend it.

  • choise

    Coda is cool, but for a bigger Developement, other programs are better. There is no versioning, no task list, NO DEBUGGING. i use code for little websites and code snippets. For developement, i use NetBeans.

  • dix-huit

    David -What GUI app are you using to manage MySQL databases then? I’m intrigued.

    • http://davidappleyard.net David Appleyard

      I use Sequel Pro, but don’t find that it works perfectly. Having just seen Querious recommended I’ll be giving that a go!

  • http://www.sonaliagrawal.com Sonali Agrawal

    I have been longing for Coda for like 6 months now, since the time I purchased my first MBP, but definitely, due to the price tag, it is really not something I can afford right now. But I definitely love Coda and would recommend to anyone.

  • Jake

    Coda is good. I use it currently along with CSS Edit because I really don’t like Coda’s CSS editor. I can’t say that I have given Textmate a full look and I’m not sure I want to. I like Coda’s GUI and I know I’ll fall for Textmate’s functionality so I don’t yet. I want to get my money’s worth out of Coda first.

  • http://www.firelabstudio.com Aaron

    I primarily use TextMate and CSSEdit, with Cyberduck for file transfer. I tried out Coda not too long ago for a WordPress site, and it was pretty awesome. I didn’t spend too much time in Coda, I really should give it a thorough try. I like the batch publish ability, which I didn’t find out about until I was done with the site.

    I’ve been trying out the new Espresso from MacRabbit, and it’s not bad. It is after all a first release, so it’ll be interesting to see where it goes.

    Thanks for the nice overview, and reminding me to get Coda going again.

  • http://www.firelabstudio.com Aaron

    I have no idea why it made a link for ftp, I only typed it in caps. :-o Admin fix please?

    • http://davidappleyard.net David Appleyard

      Weird… I’ve fixed it for now and will notify our developer about the issue. Cheers.

  • http://www.suberapps.com Ben

    I can’t live without Coda, it has helped me get work done twice as fast, really. Can’t live without dual panels, it made my coding so productive that I coded many sites in a short time with ease.

  • http://dezinerfolio.com Navdeep

    Coda is really amazing when it comes to simplicity. Other than SQL, I really love Coda. Its collaborative development is the cool part… I work with 3 – 4 others in my team on the same file, same time!

  • Nathan

    Coda is my all-in-one program. There’s no way I’m going to download 6 applications just to do what Coda can do. $99 may seem a lot at first, but consider how often you will use it.

  • http://www.forstrank.com D

    I am a seasoned designer/developer and I absolutely love Coda. Is it perfect, no – but its as close to it as I have seen. I use it in combination with MAMP to develop my WordPress driven websites and with a Mac you can set up a local test environment. Can’t wait to see what Espresso brings to the game.

  • http://www.creativegraphicsblog.com Hugh Collier

    I love Coda. It’s such an awesome and sleek little app. Couldn’t be without it.

  • dave

    for mysql db check out http://www.araelium.com/querious/ much better than sequal pro IMO & not as crash prone or slow as navicat and the developer is a very friendly and responsive.

    I’m a pretty hardcore cfm programmer and I have switched to coda for most general use especially layout code but use eclipse/flex builder for the real meaty stuff but I just LOVE coda for the rest.

    • http://davidappleyard.net David Appleyard

      Thanks for the tip dave, looks like a great app!

  • http://www.blogussion.com/blog/ Alex

    Coda is the first app I bought when I got my Mac. Price was no issue for me, it is well worth the $99.

  • Jeroen

    coda respect. thumbs up!

  • Owen

    Thanks for the review. I have 2 days left on my trial. I haven’t really seen one bad comment here about Coda, so think I might snap it up.

  • http://www.entropicsolutions.com Jeremiah

    Love it! My only wish is that they would get with the makers of CSSEdit for the CSS editing. Other than that a great app I use daily!

    • Jack

      The makers of CSSEdit are the guys behind the up and coming Coda rival espresso so i wouldn’t get your hopes up.

  • http://john.onolan.org JohnONolan

    I’ve really been trying to get on board with Coda but I just cannot abide the autocomplete features. If I could somehow change the settings so that the autocomplete functioned the same way Dreamweaver does then I’d be happy.

  • http://www.toby-powell.co.uk Toby Powell

    I use Coda every day, it makes writing XHTML and CSS an absolute pleasure. It’s got some great free plugins too. Ibought it about a year ago and havn’t looked back, i highly highly recommend it.

  • Leland Clemmons

    Use it all the time. Excellent example of great form and function.

  • http://www.guidetoworlddomination.com leanne

    I use Coda for perl – it’s a great app. Thanks for giving this software some well-deserved recognition.

  • http://www.subooa.com Matt

    CODA SAVES LIVES!

  • http://alishabdar.com Ali Shabdar

    My demo was over yesterday :(
    But I’m buying it anyways, it is absolutely awesome. $99 is a bit high though, but it is worth it.

    • http://themeforest.net/user/kiziel kiziel

      Not really, Dreamweaver cost 5 times more :)

  • Alex Hughes

    Coda is great. But I have a special place in my heart for dreamweaver.
    Only recently started using coda and have it on my Macbook only. So basically used out of office for the basic jobs which do not require much planning or thought. So far, god send. :- )

  • http://modxdeveloper.com Shane Sponagle

    Coda is great, I use it daily. However I have recently been a bit frustrated with it Code editor and based on the chatter in the user group many others are feeling this as well. If you are doing heavy coding you will miss some of the stuff that is standard in most editors like collapsing code blocks, intelligent indentation, syntax awareness (not only coloring), and a number of other key features. Not to mention that there is no built support for javascript libraries like jQuery.

    It is my opinion that they spent too much effort on integrating stuff like terminal (who uses the terminal and does not already have a favorite app?) and not enough on the editor (main feature). I wish the code editor was as sharp as the rest of the application, maybe they are working on something but since there is no posted roadmap (that i am aware of) it is hard to say. I hope that we will see some improvements in the next release.

    Currently I use Coda for day-to-day stuff but for serious coding I use Komodo Edit (which is the free editor not the commercial IDE).

    • http://www.bloqhead.com Daryn St. Pierre

      I agree with you on the Terminal. I use the Terminal app that comes with OS X and love that. I have no real use for the built-in Terminal that comes with Coda. The only thing I’ll say about it though is that I love how it will automatically login (duh) but it also goes to the proper directory. I know this is expected of it but it’s nice. It’s easier than doing ls, cd, ls, cd repeatedly (if you’re lazy or in a rush).

      I agree to a point on the code editor. It does indeed need to be sharpened. I really like the code navigator panel that you can show on the left column but sometimes when I’m writing a huge style sheet, which is practically every single project, I tend to get a bit lost. Collapsible code would be a brilliant addition. This is something that Espresso and a lot of apps already have and it seems like it should be a standard. Regardless, I always get the job done quickly with Coda’s code editor.

      I also love the sharing but don’t get to use it often. My fellow colleague uses and swears by Dreamweaver so I’m the only one in the office using Coda.

      Thank you for suggesting Komodo Edit. I’ve heard of it but never used it. I’m open to trying new applications but it’s gonna be hard to pull me away from Coda.

  • http://www.bloqhead.com Daryn St. Pierre

    Dude, I swear by this application day in and day out. I refuse to code in anything else and use this both at home and at work. It’s improved my workflow and I’ve honed my skills with it. It’s hands down the best Mac-based web development and design application I’ve used. Dreamweaver? What the hell is that?? This thing is a monster. I would say the weakest link in this application is the CSS Editor, which I absolutely never use. I hand-code all of my CSS and HTML anyway.

    If you want the best CSS editor money can buy, you get CSSEdit by MacRabbit (which I also own). I don’t use it often but it’s a brilliant piece of software. I also beta-tested Espresso but it didn’t do the trick for me. It felt like a barebones version of Coda. Don’t get me wrong, it’s a really nice application, but I couldn’t justify buying it when I already have Panic’s Coda and use it every single day.

    Seriously, if you’re a Mac-based web developer like myself and you’ve never used Coda, download the trial and give it a whirl. I was a diehard Dreamweaver user for years and years and Coda made me never open Dreamweaver again. I switched and never looked over my shoulder.

  • Pingback: 10 Versatile Text Editors for OS X « AppStorm

  • Pingback: The Apple iMac is my favorite computer ever

  • http://www.tasaristanbul.com realturk

    thanxxxxx supper web design sample…

  • Pingback: Coda: A Collection of 120+ Plugins, Clips, Snippets and Tuts For Designers and Developers

  • Pingback: Panic Coda Review | The Kickstart Co-Op

  • http://ageno.pl/ Maksymilian Śleziak

    A really great application. Im lovin it!

  • http://sahuspilwal.com Sahus Pilwal

    Just purchased my copy! Would love to see XHTML Container highlighting when clicking on a containing div for example. Also some Database viewer window where you can create/delete databases, write SQL, would add to the one window development idea! Would like to see support for ASP.NET too as for web design agencies using multiple technologies would still need to use Visual Studio for .NET projects.

    All in all a great product look forward to future updated releases. Cheers, Sahus

  • Pingback: SUBERAPPS Asks: Amber Weinberg

  • Pingback: A Web Designer’s Guide to Coding Apps | Shadowtek | Hosting and Design Solutions

  • Pingback: My Stream » A Web Designer’s Guide to Coding Apps

  • Pingback: A Web Designer’s Guide to Coding Apps | cssWOW Showcase | Css Gallery | Css Awards | Design Inspiration Tutorials

  • Pingback: A Web Designer?s Guide to Coding Apps | Jetcat

  • Pingback: A Web Designer?s Guide to Coding Apps | Zoombug

  • Pingback: A Web Designer?s Guide to Coding Apps | Camixo

  • Pingback: A Web Designer?s Guide to Coding Apps | Bubbleworks

  • Pingback: A Web Designer?s Guide to Coding Apps | Zoodoo

  • Pingback: A Web Designer?s Guide to Coding Apps | Geboo

  • Pingback: A Web Designer’s Guide to Coding Apps | 87studios.net

  • צלם חתונות

    Great things you’ve always shared with us. Just keep writing this kind of posts.The time which was wasted in traveling for tuition now it can be used for studies.Thanks
    צלם חתונות

  • Pingback: A Web Designer?s Guide to Coding Apps | Zoomfly

  • Pingback: A Web Designer?s Guide to Coding Apps | Skippad

  • Miguel Carales Lobera

    Simplemente hermoso, he tenido la oportunidad de probar varios editores pero este es lo que pienso varios estábamos esperando…..

    Muchas felicitaciones a los creadores….

  • Steve

    I’d be interested in hearing from anybody who’s integrated CODA with SVN and using it to deploy to QA and PROD servers. As much as I like it for a pure DEV tool, it’s got SERIOUS limitations in the SVN integration, the least of which is the complete and total lack of ANY documentation on how it works.

    Specifically I need the ability to copy (not move) files from the trunk into branches, and to be able to tag/label sets of files.

    TIA for any advice!

    Steve

  • http://www.gusdecool.com/ GusDeCooL

    Has tried it, unfortunately coda doesn’t have IDE feature that i need. Even the interface is good, i cannot use it for my work. Prefer use netbeans for my PHP development

  • Pingback: SubEthaEdit – - Editor DirectoryEditor Directory

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow