• Styling External Links with Attribute Selectors

    You might notice on some websites you visit that external links display a little icon next to them. This is super helpful for users, as it lets them know that the link is going to take them somewhere off-site.

    Read more

  • Greenwashing and the COP28 Website

    Update (28th October 2023): Since this post was published the COP28 website has undergone some changes. Many of the images are now better optimised, and the low-carbon toggle actually prevents them from loading. Much more could be done to optimise the site, however, and many of the points still stand.

    Read more

  • Quick note

    Introducing the Web Sustainability Guidelines

    The Sustainable Web Design Community Group has just launched a draft set of guidelines for designing and developing sustainable web applications. Covering design, UX, front and back end development, and business strategies, these guidelines have been months in the making, with contributions from experts and breakout groups from across the industry.

    Read more

  • Quick note

    Reactivity in Vanilla Javascript

    When we talk about the concept of reactivity in Javascript, we generally mean a variable in our code responding to an event or change in state somewhere else in our code. Perhaps we need a button to respond to a 'click' event, or maybe we need to update the DOM in response to new data. The Vue docs have a great explanation of reactivity.

    Read more

  • Cool Tools

    Chris Brandrick at Frontend Focus asked me to share five tools, libraries or packages that I love for the latest issue of the newsletter. It was hard to narrow it down to just five! So I thought I’d share the full long-list with you here, in no particular order.

    Read more

  • Published on MDN

    Creating custom easing effects in CSS animations using the linear() function

    An animation is about more than just moving things from one place to another. How something moves (or changes in some way) is just as important for conveying a sense of purpose.

    Read it on MDN

  • Video: Building a Greener Web

    It’s been great to see digital sustainability become more of a mainstream topic in recent months. With most of Europe baking in a deadly heatwave with unprecedated temperature, the need for action on climate change is more pressing than ever. If you’re not sure what action you, as a developer, can take, my talk from All Day Hey conference provides some facts, figures and starting points for thinking about sustainability in the context of web development.

    Read more

  • Published on MDN

    Scroll Progress Animations in CSS

    Scroll-linked animations can often add a touch of class to a website, but have long been the preserve of JavaScript. Now a brand new specification is being implemented to enable us to create rich scroll-driven experiences with CSS! In this article for MDN, we’ll explore scroll timelines — how to link an animation to the progress of scroll.

    Read it on MDN

  • Video: Modern CSS Layout is Awesome

    Back in May I had the privilege of speaking at Beyond Tellerand, an incredible conference in Düsseldorf, Germany, with content extending way beyond web design into the realms of animation, mural painting, typography, digital art, Japanese calligraphy and more!

    Read more

  • Thoughts From CSS Day

    Last week I had the privilege of attending CSS Day for the second year in a row (and MCing the second day!). I have to say it’s pretty much the most inspiring conference I’ve ever been to. Right off the bat, Una hit the nail on the head when she said that (paraphrasing) if we thought 2022 was a good year for CSS, we ain’t seen nothin’ yet.

    Read more

  • Reducing Complexity in Front End Development

    One of my favourite sessions at All Day Hey conference last month was Jack Franklin’s talk Abstractions, complexities and off-ramps. As web applications grow larger, they inevitably fall prey to complexity, despite our best intentions. The prevalence of third-party libraries to solve everyday coding problems is both a blessing and a curse. It can be tempting to reach for an off-the-shelf solution to save time now, but what happens when that dependency is no longer maintained, or when developer needs change? Can you be sure you understand enough of the underlying code to fix any bugs created by pinning all-important functionality on an (often unpaid) open source maintainer?

    Read more

  • Quick note

    Carbon Capture: A New Way to Measure Your Website’s Carbon Emissions

    WebPageTest is a great tool for measuring your website’s performance, providing detailed metrics and actionable advice. They’ve just released a brand new add-on, Carbon Capture, which measures the CO2 emissions generated by a website. It includes detailed breakdowns on which resources have the greatest carbon impact, as well as quantifying the total emissions. Read all about it in this blog post by Scott Jehl at WebPageTest.

    Read more