For the Geeks: How We Did It – The Portland Bike Channel


If you’re not into the details of blogging, or web site programming, you can probably skip right now to the next post.

But for the geeks, here’s a summary of how we created the Portland Bike Channel site that we launched yesterday. I’m writing about this because I think it’s an interesting story how how open source technologies can be applied to organize and create value from information on the web.

This site is technically a ‘mash up’ – a combination of technologies and services bolted together in an interesting way.

The Bike Channel actually has three major components, and I’ll mention how each one works, and how we put it all together.

Combining the Content

The site uses the RSS feeds from three other blogs (BikePortland, ORBike and this one) to provide its content. The three RSS feeds are combined with a Perl module called XML::RSS::Aggregate and the results are written out in both HTML and RSS format (so that a combined RSS feed covering all three sites can be subscribed to with your favor reader tool).

The Sidebar

The sidebar displays the latest posts from Portland Transport (sure – we’re trying to drive up our traffic – and cyclists might be interested in other transportation topics too). It does this by again using the RSS feed. In this case it’s displayed with a PHP script called lastRSS (it appears to come from the Czech Republic).

The Background Images

We are lucky to feature as backgrounds photos from Jonathan Maus’ (of BikePortland fame) Flickr photostream. We can do this legally because Jonathan allows his content to be used under a Creative Commons license – a sort of open source approach to copyright. In this case, it’s licensed for non-commercial use with an attribution required – two conditions we’re happy to meet.

We get the photos by scanning the photostream with a Perl module that implements the Flickr API, we find those photos that are sufficiently large and have the right aspect ratio to work as a background. We then use another Perl module to scale them to the appropriate size.

Each time you load the Bike Channel home page, a PHP script randomly picks out 20 images from this collection to rotate through for you. After the page is loaded, a JavaScript routine (borrowed from another site, but modified more or less beyond recognition) swaps these in and out randomly.

[Based on initial reader feedback, the rotating backgrounds will probably go away.]

Putting it All Together

There are two final steps:

First, the main page of the site is a PHP script that pulls together all these various elements.

Finally we use a free service called Feedburner to publish the RSS feed. We don’t have to do this, but Feedburner provides some interesting value adds including pretty formatting of the feed (so you don’t just see an XML dump if you click on it), statistics on the use of the feed, and some technical tricks to make it easier for a variety of RSS clients to use it (it bridges the RSS vs. Atom wars for those who care about such things).

And of course there’s the ubiquitous SiteMeter to provide some rudimentary statistics (for free).

And that’s the story. The total amount of new code is less than 500 lines, the rest is making use of open source modules or services with well defined interfaces. The result is a new service for the bike community.

And yes, we’ll be happy to share any of our code bits on request.


Leave a Reply

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