Sketching with Code

Telling stories with hacks

I’ve been doing a couple of history hacks while on Eigg and I’ve made two things that might be of use to others.

One of my frustrations about Eigg is that it’s an island with lots of very interesting and inspirational stories, but they’re not bring told online.

In 1997 the islanders bought their own island using a crowdfunding approach. They launched a campaign to save them potential eviction after a fraudster briefly became the landlord but suddenly failed to meet his financial obligations. People from across the county contributed small (and large) amounts of money, sending them notes in envelopes to the island. It was a success and the islanders setup their own trust with the proceeds and bought the land. An amazing story, but there I very little about it online anywhere!

I’m coming to the end of the number of “full days” I can put into making things, and I’d love at some point to find a way to get that story online in some form. There’s a YouTube video that tells some of it, perhaps that’s the best I can hope for, but I think it’s an inspirational story that could reach more people - I can imagine one of the islanders at TED actually, maybe I should suggest it to Maggie that she do a TEDx!

But I have got a small amount of time left, and this week has seen lots of travel by train and plane over to Shetland (separate post about that). And when I’m on trains I tend to make things…


Camille, I have mentioned before, is the local historian and “force of nature” as everyone calls her. She is scarily productive!

I asked her to give me a list of the key events in Eigg’s history. Things like “massacre cave” (the entire population but one of the island put to death in a cave), the clearances, the buyout (as I’ve mentioned above) and so on.

I took a word document from her and made a tiny little HTML5 interactive visualisation. The idea is that for each date in history, you could find associated links and media, and using the magic of (a thing that lets you make your own bespoke Storify), end up with a one-page interactive historic timeline.

The result is linetime (the iOS app of the same name looks dead so I think it’s okay), plus I did this on the train in 5hrs from Mallaig to Glasgow, so I couldn’t check.

I’ve made it database-backed, using MongoDB, and just for this first timeline. Reaction so far has been positive, so I’m speaking to Lucy and Suzy to see if this is a potential culture project that could be given some resource.

The resulting “linetime” is easily embedded in another site in an iframe, and it designed responsively so it works on a phone. IOS is a bit flaky with the scrolling at the moment but that could be polished up.

Feedback welcome on this one - should I find a way to develop it further?

Croft Number 6

Camille is also responsible for the island’s museum. A few years ago the old woman who lived as a crofter in croft number 6 died, and the family failed to do anything with her possessions. So it remained, intact, a time capsule of crofter life.

Camille and the islanders decided to keep the cottage in that state, with all of her possessions on show, and the rooms unchanged, as a museum.

There’s nothing online about it. Well, until now.

I spent the day with a Canon 5d, a tripod, a nice 20mm wide angle lens doing long 15 second exposures in the rooms of the cottage. It took a bit of patience, but I ended up with a gallery of high quality images that she can use however she wants.

Then, I did some research into how to make a tiny little website for the museum:

Croft number 6

We had some interesting requirement:

  • The site had to work offline. That means flat files maybe, an auto-generated Cache Manifest
  • I can’t be responsible for upkeep. That means it needs a way to be edited by a novice.
  • It has to be semi permanent. Should control of the project be passed to someone else, the site should be easily transferable to another host/admin/etc.
  • Hosting costs have to be as near to zero as possible

Jargon follows… Sorry!

I looked at Squarespace which we are probably using for the main Eigg Box site. Gosh it’s painful to design for. Dropping back from HAML to HTML feels like slowing down from 100 miles an hour to 10. Less for CSS means my nice Foundation stylesheets fail to render. And building the EB site on it, I got all he way to the end only to discover it’s forcing YUI into the mix, is my lovely respnsive design gets trashed and you end up having to add another normalise.css to remove all the YUI crap. Maybe I’m doing it wrong, but Squarespace seems to be set up for people to design for laptop and desktop users only, and I always think mobile-simultaneously nowadays.

Then I thought “tumblr” or “posterous”, both of which do pages, but how would I auto-generate a cache manifest for offline access? There’s no mobile signal that side of the island, let alone 3G or Wifi near the cottage.

Then I thought “code something myself on Heroku”, but what happens when Camille needs support?!

Then I thought GitHub Pages, but gosh is it geeky and it would mean teaching Camille git, or showing her how to use the Windows Git client (which is amazing but still to hard).

But ideally, Jekyll with a web-based editor would be perfect.

Tricky. So I went lazyweb and asked on Twitter and was recommended Spinto. It’s a new service in beta and it does just that. You as a developer create a little site in Jekyll. Then you set up a couple of page templates, do your design using Compass and all the familiar ruby tools you want. Then you push your git repo to Spinto, and it builds the site for you. Using a plugin I will build the cache manifest.

The awesome bit is that there is also a very simple web admin interface, with multiple admins per site, and the parts of your pages marked as “editable” (a div or img tag with a certain class) become editable by the person you are giving access to.

Not just that but every change the admin makes is a git commit. Just think about that for a moment - it turns git into a cms. So if you’re working locally you just “git pull” and you get all the images the client has uploaded, and all the text changes on your local machine.

That also means that in the future, when you want to pass the project on to someone else, they just clone the repo and off they go. If you don’t need content changes any more you just push the repo somewhere else for permanent hosting too.

The proof was an email from Camille - “it’s really easy to use”. There we go - the perfect balance of the right tech plus ease of use for the end user.

Oh, it’s probably going to be about $40 per year per site which is totally reasonable. So, with a domain name it’s $50/year for a small museum website and what is effectively a mobile app during your visit. Visitors to the island will go to the site, add it to their device home screen, walk over to the other side of the island, and use it.

I also thought, if I got a mac mini, or something similar, and put it in a nearby house, it could provide a wifi network with no intent, and just serve the site for visitors. That’s probably taking it a bit far, so we dismissed that idea.

Archaeological Dig

Camille managed to get at least three hacks out of me! There’s an archaeological dig happening on the island, around an early Christian burial site. One of the requirements of the project was to publish the results of the work, and Camille hadn’t found a good way to do that (this woman needs to be given a proper computer for a start! She’s working at 800x600 resolution…)

She came up to me in the cafe saying “oh gosh, we need to get this done this week!” so we sat down, quickly made a tumblr and started pulling together the content that already is online, into pre-dated tumblr posts. I didn’t realise you could do this, but you can set the “published at” date of a post. Using some simple tagging Camille organised the posts into categories, and that evening added the contributions that had up until that point been offline only (word docs, photos on her laptop, etc.)

The next day, the tumblr was full of interesting content about the dig, and she is doing it totally independently.

I think this is showing Lucy that one of the things that Eigg Box could provide is access to some support, mentoring, advice, whatever you want to call it, for people on the island to use digital tools.