• A Reason to Self-Host Fonts

    The other day I noticed a strange thing had happened with the title font on my personal site. Where once the glyphs were clearly defined by glowing outlines, suddenly the outlines were all over the place, bisecting the glyphs in odd ways.

  • New CSS Features In 2022

    There are a lot of new CSS features in development as I write this. And 2022 is the year that some big ones will be landing in a browser near you, with the potential for big changes in the way we write CSS! I explored some of these new features for Smashing Magazine.

  • Are My Third Parties Green?

    Recently I’ve been thinking quite a bit about third-party scripts and how much bloat they so often add to the average webpage — and, consequently, their impact on climate change via the additional carbon emissions generated, often for something the end user doesn’t really want or need. Third-party scripts can include ads, trackers, analytics, social media embeds, and probably some other stuff too. An analysis by Marmelab found that up to 70% of the carbon footprint of media websites could be attributed to ads and stats (source).

  • A Blog Post About Blogging

    Someone in a Slack group I’m a member of shared recently shared a link to a post by Cory Doctorow titled The Memex Method. In the post he shares his opinions on blogging as a way to order your thoughts and ideas, somewhere between a sketchbook full of notes and a fully-formed essay. He writes:

  • In Commission to No Emmissions: Videos from Toronto Web Performance Meetup

    Earlier this month I has the pleasure of speaking at a special green-themed edition of Toronto Web Performance Meetup (online). There were three of us speaking in all, each with a different take on how we as web developers can reduce our environmental impact.

  • I Finally Installed an Ad Blocker

    It might be unusual for a web developer, but up until recently I’d never had an ad blocker installed. I use Firefox as my main browser, which claims to protect privacy by blocking trackers. And to be honest, I don’t read a lot of articles on desktop, preferring to read the news on mobile while I’m on the go. While you might get one or two pop-ups on mobile, the area available for them is clearly a lot smaller, and I generally find the browsing experience for many of the sites I regularly visit is OK.

  • Aspect Ratio is Great

    Maybe it’s just me, but I feel like a lot of the time learning new CSS features doesn’t involve just learning a what a single property does, more like getting to grips with a collection of properties and how they work together — even learning a whole specification. That’s certainly not a complaint from me: it makes sense to consider properties as part of an ecosystem. But I have to confess, I love it when a new CSS property lands in browsers that doesn’t have a steep learning curve and just works, with no fuss. The aspect-ratio property hits all the right spots there, neatly solving with a single line of CSS something that was, quite frankly, a bit of faff before. It’s been supported in browsers for going on a year now, but with Safari finally catching up in September 2021, we can finally feel confident using it with aplomb.

  • Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds

    In this article, we’ll look specifically at what we can do to reduce the impact of social media embeds and social sharing widgets — or even some strategies to avoid them altogether. While the spotlight is on reducing the environmental impact, many of these tips will be great for performance too.

  • Not an NFT artist

    Fair warning, this post doesn’t really conform to my usual content model of frontend/CSS writing. But, as the song goes, “It’s my party, and I’ll write if I want to”. 😁

  • Building a Scrollable and Draggable Timeline with GSAP

    The Greensock animation library’s ScrollTrigger and Draggable plugins can help us create some very cool effects that respond to user interaction. In this article for Codrops we’ll look at how to use them together, to create an interactive timeline that’s both scrollable and draggable. We’ll be building a timeline showing the albums of the rock band Radiohead — but you can choose any subject matter you like!

  • 2021 in Review

    Another year gone by, and it’s time to reflect on the highlights and look ahead to some goals for next year. Like Hidde, I prefer not to dwell too much on the negatives for these end-of-year posts. Suffice to say, in another pandemic year, there have been plenty of lows as well as highs.

  • :has() Has Landed in Safari

    Just a few days ago Safari gave us all an early Christmas present: the latest Safari Technology Preview release includes support for the :has() pseudo-class! Otherwise known as the “parent selector”, (but officially termed in the the spec ‘The Relational Pseudo-class’) it allows us to style an element based on its descendants. We can do things like (off the top of my head) style any sections that contain img elements:

Do you have a question about this blog? Head on over to the brand new FAQs page →