Coda Emulated in WebKit

Also featuring HTML5, CSS3 & jQuery

I got tired of the boring look of a standard Apache web directory. So instead of browsing folders the default way, I built a small index.php file in the root, grabbed all folders dynamically, injected them as HTML5 and styled them with CSS3. Since I work with Coda all day, I chose to emulate their Sites View interface. Coda is a great text editor/FTP client for Mac OS X. If you’re not familiar with Coda, check it out at Panic’s website.

About the Coda-fied web directory — my code is completely self-contained and portable. It also uses no images for style. All gradients are generated with the CSS3 gradient proposal, best supported by WebKit. The screenshot thumbnails can be generated dynamically. Below is a preview, and a few notes on how it’s made, and a link to the working demo.

Plain old web directoryHover for alternate view.

Let’s get started.

  1. First we need to write the PHP grab all folders in the directory and create links from them. (Notice it ignores those pesky ‘.’ and ‘..’ folders that show up in all directories by default.) The unflappable Paul Redmond helped me with the PHP code.
  2. Next, style them with CSS3 and beautiful, beautiful WebKit properties. I commented my code so that you may find it helpful.
  3. Use the WebKit2PNG shell script to make background images for all folders in the directory. This has to be done manually, but a smarter person could probably set this up to automate by porting the code from Python to PHP or other language.
  4. Add jQuery slider to adjust height and width.

Before you jump right to the demo, remember that it works best in the latest version of Safari or WebKit Nightly, and works pretty well in FireFox 3.5 or greater. Thanks for taking a look. I hope you enjoyed it as much as I did.

View the working demo.

Short URL:



, , , , ,




4 responses to “Coda Emulated in WebKit”

  1. […] This post was mentioned on Twitter by Jay Robinson and Jay Robinson, HTML5watcher. HTML5watcher said: RT @jayrobinson: I recreated @panic's Coda site view using HTML5/CSS3/jQuery and some WebKit magic. […]

  2. Very cool!

    I added some RegEx to the PHP to clean up the folder name presentation a bit (since I use underscores as separators in web project folder names) and the Paparazzi GUI to speed up the thumbnail creation a bit. :)

  3. Very neat idea on the directory page! I’ve always styled my directory page as well but never thought of replicating or creating it as a app interface. Well other than that I found your site by google searching for a extension to add HTML5 syntax to Coda but haven’t been able to find one. I might have to add the syntax myself to the .mode file.

  4. Ben Baker

    Hey Jay,

    Nice work there. Why’d you use HTML5? Was it for the CSS3 capabilities?

    Cheers, B ;)

Leave a Reply

Your email address will not be published. Required fields are marked *