I decided to invest some time improving my blog. It was feeling like an out-of-date, tired old place that gave me no inspiration to write. So, you’re now seeing the new, faster version that should work nicely on phones and tablets, and also be more readable with better structure.
Renders nicely on the iPhone 11 Pro
Here're the results from Google Page Speed.
Speed test is reasonable :)
Why roll-your-own?
I considered writing on Medium before doing this update. But I don’t like the idea of someone else having control of my content. Or blocking people from reading it unless they pay. I enjoy Medium but hate the paywall.
Secondly, I’ve got lots of old posts on here. I thought about starting afresh but there’s something nice about keeping the history. That content still gets read today, so why throw it away?
I also considered the Ghost platform, which looks awesome. I decided against it once I’d reminded myself how easy Sinatra is to work with. Switching to Ghost would have meant having to import all my old content.
Bulma, Sinatra, Lazy Loading etc
Updating it wasn’t as bad as I’d feared. A re-skin and a few other improvements took only 4 hours.
This site was an incredible simple Sinatra site. The guts of the site are only 250 lines of code, and that includes post authoring CMS, tagging, archiving and RSS feed generation. The hardest part of working with it again was updating the dependencies, some which date back to 2008.
So, I decided to have a crack at modernising it, which basically meant updating to newer versions of Sinatra and Ruby, retiring the old CSS and trying out Bulma.io. I also applied some new typography, some lazy image loading and simplified the navigation. This meant it was mobile-friendly, faster to load and more readable.
I picked Bulma because I fancied trying something lighter than Bootstrap. Bulma seemed a little simpler. After 4 hours of use, I'm starting to get the hang of it. Instead of customising using it's npm package or webpack, I just monkey-patched the CSS. When I get more time I'd like to come back and customise it properly. Feels a bit hacky!
Cloudinary
If you look at old posts you'll notice lots of images are broken. I was using http://puush.me in the past, but for some reason, my images have gone. I considered a few new places to put the images.
- S3
- DropBox
- Cloudinary
Amazon S3 was my first thought for images. I could whack a CDN in front and all would be good. Unfortunately I couldn't find the login, and since everyone at work is on holiday couldn't easily find out.
Dropbox was the next stop. It seemed pretty good to start with. Just upload to a public folder, preview online, then copy the preview image URL. I then hit issues with .webp images on Safari (they don't work) and realised I needed to convert to .jpg.
Finally, I realised that something like Cloudinary would do this for me, and was actually designed for developer image hosting. So, I dragged the images up to there where there are a load of optimisation options available for a blog like this. I think the free account will do nicely for a while, so that's a bonus.
Cloudinary is really easy to use and has great features for blogs
So, hope you enjoy the new blog. There are a few niggles to fix so I’ll get to those as I go.
Here’s the old site, in case you haven’t seen it. It’s also available on wayback machine.
The old design of this site