Making ‘A barrow by a beacon’

I published a story today; A barrow by a beacon is a short story about a walk, told in a random order. It’s the first time I’ve written the HTMl, CSS and Javascript for a project myself. I’m pretty happy with it.

Screen Shot 2015-03-30 at 13.47.03

I took a frontend development course at General Assembly over winter, and knew early on I wanted to write a story as my final project. I also knew I wanted that story to be unique in some way for every reader. As it says on the page;

I usually remember journeys in little random snippets, rather than from beginning to end. This is a story about a walk, all shuffled up. If you don’t like the order you can change it.

Those last words turned into weeks of work.

Looking it up ≠ cheating

The visual brief I set myself was basically ‘Blue Medium’; single column, big space, loads of room for font and massive pictures. CSS confounds me, but I made it work by getting it wrong all the time; it took a while to do and problems kept creeping in, but it was faaaaairly simple.

The ‘shuffle’ function was way harder. Probably the most important thing I took from the course was looking up the answer isn’t cheating; it’s the job.

I remember Ben at told me ages ago that the thing about making websites is that most of the time someone has already solved the problem for you, you just need to find it. Now, I’m crap at search – it’s the thing I’ve spent the least XP on – but kitbashing the right combination of words usually got me to solutions.

I started by looking up random number shuffle things, and found plenty of hacks and tricks on Stack Overflow. I wound up using two – one for the numbers and one for the images – that got me a demo-y hack for the first review in class. I eventually managed to make one of those shuffles work properly, and then spent a while tweaking it.

The result is a website that does something; jumbles up the sections of the story into a random order, and draws from a pool of around a dozen photos for the feature images.


Tutors Charlie and Mike were super-supportive, but even then I could see that the code needed tidying; enter Phil and Aanand, maybe the loveliest people on the internet. They pointed me in the right direction to refactor what was there and make it legible, clean, self-contained and beautiful.

Greg, Giles, Ann, Russell and others all offered feedback on the words, as did Mark on the design. Best humans.

The result is my first hand-made website. You can look at the code on GitHub and everything. I’ve never done that before. I’m really proud of it.