Photo from the YourFry hackathon

Penguin organised a bunch of hackathons to celebrate the latest instalment of Stephen Fry's autobiography, and I went to the one they held in the Bodleian in October. I was in a team of awesome programmers, artists, and scientists, and we put together a website. You can visit it at yourfry.bethmcmillan.com, or watch my hastily-constructed youtube video. My main contributions were a bit of web development (I can't take any credit for the design, the perl, the content, or the cluster analysis, though) and another one of my silly twitter bots, @ur_fry.

@ur_fry works just like my old @markov_holmes bot, with a few changes. We used the text of the complete works of Stephen Fry as training data - from which I didn't manage to strip out page numbers and other messy things. The text creation works backwards, by starting with the end of a sentence. This makes them end more sensibly, but makes the beginnings a little sillier. I'm not sure which way around is best.

You could have a look at the source of the main page, but it might be easier to see my simplified version. The fun things that I used for the page were d3-cloud to make tag clouds from the cluster analysis of Fry's books, and draggable.ui to make the text boxes draggable around the screen.

The thing I'm the most proud of is how the boxes come to the front when you click on them. The way this works is using z-indices, which are the way that elements are stacked in CSS. What happens here is that every time an element is clicked on, its z-index is increased to above the current highest element. This works using JavaScript - the original z-index is set in the head of the page like so:

$(function() {
  window.zed = 3;

This index is assigned to an element when it's clicked, and then incremented for the next time, using onMouseDown commands like this:

<div class="headline" id="c" onMouseDown='document.getElementById("c").style.zIndex = window.zed ;window.zed+=1;'>

I don't speak JavaScript very often (and this was actually dynamically generated using Perl, which I have only previously used under duress), so this was a fun departure for me.

Stephen Fry even turned up later in the day to have a wander around and talk to people. In between quietly hyperventilating with the joy of meeting my hero, I spent a few minutes talking to him about Markov chains while he looked at me kindly. Reading his books, watching A Bit of Fry and Laurie, and listening to Saturday Night Fry when I was growing up made me feel infinitely less alone, so meeting him in person was cool.

Soupy twist!

p.s. If you have any questions about how to use the bits and bobs in the webpage yourself, I'd be happy to answer them.


Adventures in bookmarklet land

Do you use bookmarklets? They're little bits of javascript that you save as bookmarks, that do something to the page you're on when you click on them. Today I made a bookmarklet to change the formatting on any Project Gutenberg HTML book.

To see it in action, drag this link to your bookmarks bar: Format Gutenberg - then go to any Project Gutenberg book as an HTML page - try this one to begin with - then scroll down to the main text and click on your bookmarklet.

A bit of background:

I read and wrote a lot of fanfiction as a teenager, and (I suppose largely out of nostalgia) have some particular preferences about text formatting. Nowadays, I find 13px Verdana on a white background, with minimal margins and no indenting, to be the easiest to concentrate on. People talk a lot about how it's difficult to read from a computer screen (hence the rise of e-ink) but personally I suspect it's easier for me to read fiction when it's just another tab on my browser. Project Gutenberg is a massive online library of out-of-copyright literature.

I'm moving house this weekend, my exams start this Wednesday and in general, I'm pretty stressed out. I'm having a quiet evening watching comedy with my brother Pete and, as usual when I'm under pressure, obsessively coding. I've always thought bookmarklets were pretty cool (if fairly mysterious), so I had a look at some source code and had a go at working it out (I'm sure there are lots of tutorials on the internet, but I was looking for a puzzle).

My general strategy and some code: Continue reading Adventures in bookmarklet land