• Breaking Out of a Central Wrapper

    This is an old trick, but one I reach for just often enough to warrant a post on this blog — for no reason other than my own reference!

    Read more

  • CSS Day 2022

    Last week I spoke about CSS layout at CSS Day in Amsterdam. It was my first time attending the conference (which, this year, was actually two days), but I’m quite sure it won’t be the last. The incredible mix of speakers and attendees with an overwhelming passion for CSS blew me away, and every talk demonstrated in-depth knowledge in the speaker’s chosen area.

    Read more

  • Writing Useful Alt Text

    I enjoyed this article by Jeremy Keith on writing alt text for images. In case you’re not aware of what “alt text” or (“alternative” text) is, it’s the text value of the alt attribute of an <img>. It should describe the image (although in practice doesn’t always!).

    Read more

  • Quick tip

    Quick Tip: You Might Not Need Calc()

    Did you know, if you use CSS math functions like min(), max() and clamp() and you’re calculating any one of the arguments, you don’t need calc()? I think it was Ahmad Shadeed who mentioned this on Twitter the other day, but I could be wrong.

    Read more

  • My Browser Support Strategy

    As I’ve written about recently, it’s super exciting to see a bunch of new CSS features landing in browsers, and who can blame us for wanting to get started using them straight away?! It’s great to see browsers working to support new CSS features quicker than ever before, and that pace should persist with Interop, an initiative where browser vendors work together to implement features interoperably. And with so-called “evergreen” browsers, most users should see those new features right away, as their browsers update seamlessly.

    Read more

  • Animated Grid Tracks with :has()

    Somehow it’s already three months since I wrote about the CSS :has() pseudo-class landing in Safari Technology preview. The latest Safari (proper) release has just shipped with support, and can be enabled with a flag in the next Chrome release.

    Read more

  • Exciting Times for Browsers (and CSS)

    Last month I wrote about some of the exciting new CSS features you can expect to see coming to a browser near you in 2022 for Smashing Magazine. It’s certainly an exciting time to be working on the web right now, with browser support for new features moving along at lightning-fast pace! This month saw Safari drop a new release that includes support for a tonne of new stuff, including :has() (A.K.A. the “parent selector”), accent-color, and Cascade Layers (all of which are covered in my Smashing article), as well as some additional gems:

    Read more

  • Building an Interactive Sparkline Graph with D3

    D3 is a great JavaScript library for building data visualizations using SVG elements. In this tutorial, learn how to build an interactive sparkline graph that takes inspiration from the NPM website. We’ll also learn how to use CSS custom properties to create multiple color schemes.

    Read it on Codrops

  • The Web Doesn’t Have Version Numbers

    You’ve probably heard the term “web3” bandied around quite a bit over the past year or so — along with related terminology like “blockchain”, “crypto” and “NFTs”. If you’re a web developer you’d be forgiven for thinking that this technology is something you need to jump on right away, or risk being left behind. This post by Hidde de Vries explains why we should be cautious about the misleading term “web3”, and not mistake it for some kind of official release. As he writes:

    Read more

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

    Read more

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

    Read it on Smashing Magazine

  • Quick note

    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).

    Read more