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.
After I wrote this Jekyll released version 3.5 and promised performance updates.
This is still a motherfucking website
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
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.
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