Migrating from Jekyll+Github Pages to Hugo+Netlify

Good to read about someone else feeling my pain with Jekyll. Making changes to this website and hitting save usually takes around three seconds to regenerate before I can hit refresh. Not as long as Sara’s site, probably because I don’t have as much content but it definitely slows development down. I had thought about migrating to Gulp and using Twig for templating but not sure how well that will deal with blog posts. Thanks to Sara’s detailed post I will be giving Hugo a go! I also share Sara’s sentiment that serving this site with Netlify is a huge time saver with Github branches.

Hugo logo

After I wrote this Jekyll released version 3.5 and promised performance updates.

This is still a motherfucking website

Sorry for the profanity but Drew McConville couldn’t have written a better article on the nicest looking site there is. Drew certainly has a point, just hoping this site passes the test.

One man’s fight with understanding flexbox

Some useful pointers in this article by David Gilbertson. I am sure I will run into these problems in the future. Flexbox is still in its infancy but it is getting there with online documentation.

VW camper vans in CSS

My favourite car drawn in CSS and HTML, animated and available for me to inspect on Codepen. Awesome stuff from Macus Connor.

VW campers

Quick guide to the ARIA specifications

I am still not 100% sure when best to use ARIA within HTML or when not use them at all. I can run a screen reader to test my pages but I am no expert and have fairly limited experience of user interfaces being turned into speech.

Accessible interfaces should in my opinion be built right from the start of the project and not thought of later. But I also think it is important to realise that you will never get it right from the start and like the design and code, you will need to re-iterate over accessible features, re-fine, and eventually user test when you can. Then do it over again. Its also worth bearing in mind that HTML is constantly improving its accessible features and ARIA makes up for what it lacks in the meantime.

I saw Léonie Watson do a talk on accessibility at the Future of Web Design a few years back. Since then I’ve been following her on Twitter and reading her blog to see her point of view. Here’s a great post from her blog detailing the Aria specifications.

Cropping images with object fit

Background-image: display-cover; is genius. But to get the same results when an image is located within the HTML requires a fair bit of CSS but even then it’s not perfect. A week ago I stumbled upon an article about a CSS property named object-fit - guess what that does! I now need to go through a couple of projects and re-write my CSS for when Edge includes support in it’s next version (16). All other browsers support it.

CSS grid

I haven’t dabbled with it in a project yet but it looks like CSS grid is the best thing to come out of CSS since I have been creating websites. No need for crazy calc() values or pre-processing to get a similar outcome, just three lines of CSS and clean html. It’s well supported across all browsers, I just wish flexbox had such a smooth landing. Check out this example from the guys at CSS tricks.

Also have a play with this CSS grid inspector which is part of Firefox developer tools from version 52.

Graham Watson, cycling photographer

I’ll miss watching my boys racing their hearts out. If I’ve followed some of the greatest champions through their entire careers, I’m signing off without seeing how good Esteban Chaves, Caleb Ewan or Fabio Aru might become - Graham Watson

Finally I’ve just discovered an inspirational cycling photographer’s website only to find out he retired earlier this year. Have a look at some of Graham Watson’s amazing shots from years gone by.

Muddy cycling
Credit: Graham Watson