Design refresh

Posted at 08:00 on 27 November 2017

I updated the design of my blog over the weekend.

My main goal was to switch back to a new, responsive version of my original blog theme, with its orange and blue colour scheme. Since the start of this year I'd been trying out a variety of off-the-shelf WordPress themes to give me a responsive (and therefore more SEO-friendly) design, but I was never really satisfied with any of them, so orange and blue is back, with its first major design refresh since 2011.

I'd thought that making it responsive would be a massive undertaking, but in the end of the day it only took me a couple of hours on Saturday morning. I was helped greatly in this by the fact that I was already using Less CSS as a pre-processor. I was also able to use Google's mobile friendly test tool to quickly identify and fix the issues that needed fixing.

If you shrink the window down to below 400 pixels, you’ll see that that the text in the header starts to shrink with it to fit. I'd seen a few other sites do this, and it turns out to be very simple to implement, using a combination of media queries and viewport units. In case you're interested, here is the Less CSS mixin that I'm using to achieve this:

.responsive-font-size(@size, @resize-below) {
    font-size: @size;
    @media screen and (max-width: @resize-below) {
        font-size: unit(@size * 100 / @resize-below, vw);
    }
}

I've also restored my old blog posts, together with most of the comments and attached pictures, from a backup that I'd forgotten that I had. In the process of doing so, I've updated all the internal hyperlinks and image locations to point to https:// URLs on my blog; this was needed to eliminate mixed-content security warnings in the browser address bar on older posts that contained images. I achieved this quite simply and elegantly by using sed on the output of mysqldump to perform an appropriate find and replace before reloading. The exact command to use is left as an exercise for the reader.

Behind the scenes, I've moved it onto a $5/month 512MB DigitalOcean droplet. This is all you need for a blog that only gets a hundred or so hits a day, and a bit of load testing with Apache JMeter suggested to me that it should be able to handle a spike from Hacker News if necessary — apparently hitting the HN home page can get you about 6,000 hits an hour. I've scripted the server setup using Terraform and I've also got a couple of scripts to backup and restore the data. This means that I can tear down and rebuild it very quickly if need be, in accordance with the modern best practice of treating your servers as cattle rather than pets.

If you have any problems with it, or if anything doesn't look right, please let me know. If you want to be reminded what the old version looked like, here are some archive.org snapshots for 2007, 2010, 2011, 2012, and 2016.