Matthew Hutchinson

On my to-do list for some time was implemting Jeroen Wijering’s mp3 player (flash) in this blog as a mephisto filter.

Somewhere between the sessions of @media yesterday, I found the time to code it in (grab it , there are some steps to follow at the top of this file). It has sensible defaults, and configuration attributes. Now including tunes in posts is as easy as;

< filter:mp3 id="my-tune" mp3="/path/to/tune.mp3" / >

You can place alternate content inside the filter tag (e.g. a direct link to the mp3). Here are some examples;

Photo Booth, by Ola Podrida

Or even a playlist of tunes with links etc.

Bubble Gum, Mr. Loco Let the Music Play, by Shannon Goonies R Good Enough, by Cindy Lauper

While the code degrades well with flash/javascript off in the browser, some work needs done on what shows up in feedreaders. The filter could be amended for RSS feeds and simply show a link to the mp3 file(s) being played. If anyone finds this filter useful, let me know.

You might have noticed a minor style change in the most recent blog entries. I’ve decided (from now on) to use a light-box for showing off any embedded videos and (biggish) images on the page. It keeps the layout tidy and allows you to focus on the video you’re watching or image your viewing, without distraction. So I can do things like this for images;

And even stuff like this, for videos

All of this is made possible using Control.Modal, a light weight, unobtrusive JavaScript library for creating modal windows and lightboxes using content that is already on the page. So with javascript turned off, everything still works, with the links navigating to anchor tags in the page.

At the moment I am applying display:none; on the modal content to avoid a visible onLoad jump effect as the content gets hidden by Control.Modal javascript. I’ll be changing this (since doing this hides the content when javascript is off, and CSS is on) – There’s also a small bug with the tv-icon link style on IE6.

In Mephisto, I was able to create my own custom ‘Modal Macro’ filter, so I can easily apply the effect to any content in my articles. Here is the code for doing just that. Save this as modal_macro.rb in the lib/ folder for any new or existing vendor/plugin. As usual, any comments, questions or suggestions are appreciated.

Maybe youv’e noticed, maybe you haven’t, but quite a lot has changed at this site in the last few days. Its all behind the scenes work though, with the exception of a few style changes and new pages here and there. So what’s new;

• Switched from Typo to the much better, Mephisto
• Microformats have been applied to all entries (hAtom)
• My updated footer profile and all comments have also got the hCard treatment
• Pagination on old entries has been removed and I’ve got an archive for anything posted way back when. There is also a new tag cloud page
• The entire layout is a bit more liquid (in more ways than one) Its now fluid rather than fixed – (drag your browser width) and built on liquid templates (part of Mephisto) There is a min-width defined – which (of course) falls over on narrow IE6 pages :(
• Gone are the old AJAX comment submissions (in Typo) and AJAX on ‘search-as-you-type’ has also been removed.
• I’ve added my own code to handle Gravatar caching, which was very easy to bolt into Mephisto. I’ll probably do another post on how this was done soon.
• I’ve upgraded the server to the latest Lighttpd 1.5 RC. With the new mod-proxy-core module, it means I no longer have to work with a mongrel-pound-lighttpd stack. The site is just served straight-up, from Lighttpd to 3 Mongrels.
• As usual the newer ‘more about me’ page still needs more work.
• Last but not least, error pages have got a Batman inspired makeover.

I’ve actually blogged more in the last 12 months than I thought I would. So rather than rant on about how crazy a year this has been for me, (working for the BBC, moving to London, leaving Belfast, travelling to Japan) – here are a few nostalgic links from 2006;

• The Move – the whole shift from Belfast to London was smoother than you’d think (except for some Fun with Banks)
• Shameless Bragging – Its only a little Taschen web book, but I was proud to see a little portfolio site I had built in it
• Prepping for a MacBook Pro – after years of using Windows I stepped into the world ‘o Mac, and it has been nothing but plain sailing since (almost)
• I made an effort to attend @media 2006 and RailsConf Europe this year, both very enjoyable, upbeat and worthwhile events.
• All kinds of ‘newness’ when I got myself a new Debian VPS to play with, for Rails applications and other fun stuff.
• Finally, having not had a solid 2 weeks time-off in almost 4 years I decided to take a break and visit Japan & Hong Kong

Reflecting back, I am sure a lot more happened than this… Notable mention also goes to the closure of Raffles – which provided quality, affordable sandwiches to most of Belfast’s top web talent. And to Skribe a project which has struggled to get off the ground all year and now looks back on track for 2007.

The recent downtime here had me stumped – the site was throwing a rather vague ‘controller stack out of kilter’ Rails error from Typo. Looking further at the Rails production.log it seems that the problem stemmed from the Flickr sidebar model. A little googl’in brought up this discussion – It seems that Typo’s default Flickr sidebar implementation is ropey at best.

If you look in /app/models/aggregations/flickr.rb you’ll see that the model relies on a string scan (regex) to match the image url from Flickr’s description field text (in their RSS feed) like so;

1
2
3

def image
    description.scan(/(http:\/\/(static|photos).*?\.jpg)/ ).first.first
 end

So basically if Flickr change the URL they serve images from – this will break. And that was exactly the problem – Flickr’s URL was now http://farm1.static.. blah blah etc. I modified the regex a little to quickly fix it;

1
2
3

def image
  description.scan(/(http:\/\/(farm|static|photos).*?\.jpg)/ ).first.first
 end

This was supposed to be a quick post, but I’ll go on;

Why Typo doesn’t switch to using the Flickr API – I don’t know. You could argue it is more flexible and versatile if the data source is a simple RSS feed- (no need for API keys or security issues) – But the sidebar could at least parse the xml better and avoid this scan altogether. Its got me thinking what else could be ropey in Typo…

For one, a broken sidebar takes down the entire public-facing site with this ‘controller kilter’ error – which is a bit crazy if you ask me. If I have some time I might look into helping Typo fail a bit more gracefully in the future.