• 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:

  • Building a Greener Web

    As web developers we don’t tend to talk a great deal about the environmental impact of the products we build. But the uncomfortable truth is that the web is responsible for a growing proportion of carbon emissions. Rising temperatures, increasingly extreme weather events, and the failure of this year’s COP26 conference to deliver strong leadership have all highlighted the urgency of reducing our emissions if we’re to avoid disastrous climate change. The commitments of world leaders may have fallen short, but we all have a role to play, and we can’t escape our responsibility.

  • Reduce Your Website’s Environmental Impact With a Carbon Budget

    In this article for CSS Tricks’ end-of-year series I wrote about how we in the web development industry should examine the environmental impact of the products we’re building, and some resources to help us do so.

  • Don’t Forget the “lang” Attribute

    An interesting notification from @cyishere popped up in my Twitter feed the other day:

  • A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

    There’s more to color on the web than meets the eye, and it’s about to get a lot more interesting! In this article, we’ll take a look at the best ways to use colors in a design system, and what we can expect from our colors in the not-too-distant future.

  • IT Career Energizer Podcast

    I recently had the priviledge of chatting to Phil Burgess on the IT Career Energizer Podcast about my journey into web development, and advice to new developers starting out on that path. You can listen to the episode here — it’s also available on all your favourite podcast platforms (Spotify, Apple Podcasts and more)!

  • Favourite Web Development Courses

    I’m not one for taking loads of courses. It’s hard to find the time, and when it comes to learning I always feel that, for me, doing beats reading any day. That said, I’ve dipped into a few great courses recently that I’ve learned loads from, so I thought I’d share them with you fine folks here.

  • Accessible Toggles

    I recently received some great advice from Scott O’Hara on improving the accessibility of a demo featuring a reduced-motion toggle (for this article). The demo sets the play-state of the animation depending on the user’s motion preferences (using the prefers-reduced-motion media query). Users could also click the button to toggle motion on and off, which also changes the text of the button to “Turn on motion” or “Turn off motion”. Here’s the original version:

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