June 2020 Review
What a first half of 2020. It's been one that I don't think anyone, ever, could have predicted. Hopefully, things can start to right themselves globally in the back half of the year. Personally, it's shaping up to be a very busy 2nd half of 2020 with a couple of sizeable projects in the pipeline. But we'll talk about those at a later date, for now here's my recap of June 2020.
DisplayLink Homepage Refresh
At the end of June I delivered my largest project to date - a visual refresh of the DisplayLink homepage. While making these updates we focused on a few areas namely user experience & ease of navigation. Behind the scenes I was also focused on delivering a faster loading, more accessible website. Through this process I learnt a hell of a lot about small optimisations and tweaks that can be made. The new page is around ~75% lighter and ~60% faster than the previous version! I'm planning to write a case study on some of the wins we achieved as part of this refresh so stay tuned for that.
Personal Website Rebuild
Right at the end of last month I also set off down the path of rebuilding my personal website. It's mostly going to be a visual overhaul of the site, with the addition of a few extra sections on individual pages. I still plan to use Eleventy (though I have flirted with the idea of using Sapper instead), and Sanity will remain my CMS of choice. I am, however, planning to make some big changes to how I structure my content in Sanity, giving me more freedom to create new pages directly from the CMS itself (overkill for this website, but I'm doing it mainly as a proof of concept for future projects).
Scott Tolinski's Sapper Course
Having learnt Svelte in-part through Scott Tolinski's Svelte for Beginners course on Level Up Tutorials, I decided to follow up and take his introductory Sapper course. If you follow Scott you'll know that he's recently rebuilt his personal website using Sapper, and the course was a very good learning resource on how to spin up a website with Sapper, connect it to a headless CMS, and get it up and hosted too. Definitely recommend it if you've learnt Svelte and want to start doing more with it!
Relearning Eleventy from Scratch
Towards the end of June Andy Bell released his Learn Eleventy from Scratch course on Piccalilli. Though I've already built several sites using Eleventy, I've always been keen to learn how to better utilise its power - especially around the data cascade. Man, oh man Andy's course was a ripper. Not only did I come out of it with a better understanding of Eleventy itself, but almost half the course was spent going through CUBE CSS (Andy's own CSS methodology) and using it to style the website we were building. The course is also full of little nuggets on accessibility, design, CSS grid, and more.
As I mentioned in the previous section, a large part of Andy Bell's Learn Eleventy from Scratch course was spent using Andy's own CUBE CSS methodology to style our website. I'll be honest, it's something I'll need to revisit before I'm comfortable using it for a project. Here's Andy's original write up on the methodology.
The Syntax of Responsive Images
A large part of the optimisation wins that were gained while refreshing DisplayLink's homepage came from presenting modern, responsively sized images. This CSS Tricks guide is a deep dive into implementing responsive images on your website. It's something I really want to look into further. I get the feeling that image and website is going to be a rabbit hole that I'll be going further and further into as 2020 progresses.