Anatomy of a quick mashup.

My new mashup
Reading “this 37s post”:http://37signals.com/svn/archives2/seen_any_inspiring_web_design_lately.php uncovered a lot of gems. Not the least of which was “Xanix’s del.icio.us bookmarks for ‘greatdesign’”:http://del.icio.us/Xinex/greatdesign. What is it about lists that makes me so happy? In any event, I wanted a way to view all of those pages in one shot.
I could have written a “Greasemonkey”:http://metaatem.net/scripts/ script, but I wanted something a little more challenging.

I figured it would take a few steps to automate this process

1. grab and parse the “rss feed”:http://del.icio.us/rss/Xinex/greatdesign for Xinex’s list.
2. grab a screen-shot of each site
3. display them in a cool way.

So, being the backwards guy I am, I went looking for a screen-shot program that was scriptable. I found khtml2png – but no os x version. Then I found “Paparazzi!”:http://www.derailer.org/paparazzi/. Opps, already had it! So, I opened up the applescript dictionary tool, and was bummed to find out that paprazzi didn’t have any scripting abilities. That lasted for 30 seconds, until I found their new version (it’s right there on the homepage). Psyched, I figured out how to call that snipped of applescript with command line options (this was tough for me, AS freaks me out). And from within another program.

Then I set about writing the ruby script to take a del.icio.us rss feed and call my new applescript file for each element.
“ruby source”:http://metaatem.net/designs/capture.rb
“applescript source”:http://metaatem.net/designs/pap.scpt

After tweaking, that started working pretty well. I had the idea (you can see in the source), to save the url in a file with the filename an md5 hash of the url (Thanks del.icio.us!). I also save two versions of the screen-shot with the hash as a file name.

The last piece of the puzzle was the php to display it all.
“php source”:http://metaatem.net/designs/index.phps

It’s pretty well commented, but the gist is this:
* find all .url files, slurp them into an array – hash => url
* loop through said array and make a div for each with a background image of the site
* inside THOSE divs, make another one to show a long screen-shot on mouse over

“Here is the final product”:http://metaatem.net/designs/

Don’t hesitate to let me know what you think, either in comments, or emailed to me – kastner@gmail.com