• Quick note

    You Have Something to Say That’s Worth Hearing

    A recent post by Melinda Seckington, The Myth of not Having Anything To Talk About really resonated with me. I’ve been doing talks about CSS for a few years now, and for a while before that I was an organiser of web conferences, so I’ve seen a fair few talks. I can definitely say that some of the best talks I’ve seen are not necessarily by the people with the most expertise in a given subject, but by people who share their story, their perspective — whether it’s on a particular technology, design problem, workflow, project case study, or something else entirely. Making it personal makes it relateable. As Melinda says:

    Read more

  • Quick tip

    Preventing Scroll “Bounce” with CSS

    When you scroll rapidly to the top or bottom of a webpage you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyond the uppermost or lowermost point, before bouncing you to correct position.

    Read more

  • Why You Should Hold Onto Your Devices For Longer

    My iPhone 8 is still going, four years after I bought it. That shouldn’t be a great achievement, but somehow it is. The battery life isn’t great (it’s already been replaced once), some apps are noticeably slower, and Apple have announced that the iPhone 8 won’t support the iOS 17 update, which means I’ll have to seriously consider upgrading in the not-too-distant future. I’m hoping to make it to the five-year mark, but we’ll see.

    Read more

  • What to Blog About When You Don’t Know What to Blog About

    Read more

  • Choosing a Green Web Host

    Earlier this month, Jeremy Keith posed the question: “How green is my server?”. As Jeremy notes, it’s surprisingly hard to get that information! So how do you ensure that you’re hosting your website on a green server?

    Read more

  • Demo

    Scroll Timeline Parallax Effect

    I’ve been playing around with scroll-driven animations a bit lately. Scroll timelines allow us to link the progress of element’s animation to the progress of a scroll container, as I wrote about not long ago for MDN.

    Read more

  • Quick note

    Reality Check: A Series for Building Real Layouts

    Reality Check is a new article series from Set Studio that focuses on CSS layout with real-world case studies. Each issue takes a design from Dribbble (or a similar platform) and demonstrates how to code it in CSS in a way that plays to the strengths of the medium, rather than aiming for pixel-perfect recreations. As Andy says in the first article:

    Read more

  • Demo

    A Fun CSS Text Effect

    Today’s post is a quick one, but (hopefully!) a fun one! It’s a demo featuring a fun text effect, using background-clip: text and text-stroke. It’s not a new technique, but worth remembering.

    Read more

  • Demo

    Drawing Raindrops with CSS Gradients and Masks

    If you live in the UK like I do, you can’t escape the fact that it’s been a wet few months. Since today had been yet another rainy day, I was inspired to see if I could create a rainy background with CSS.

    Read more

  • Quick note

    Thoughts on UX Engineering

    This post on the role of a UX Engineer by Donnie D’Amato was published almost a year ago, but has cropped up in my feed today. UX engineering is something I identify strongly with, as I suspect do many of my friends on the front-of-the-front end. Like Donnie, I’m from a design background, but cared a lot about how things were built, as well as how they looked and the function they performed for the user. I gradually made the transition to a more technical role over time, by dappling in front end development in my spare time. I’ve since gained a fair bit of experience in “back-of-the-front end” development, but “front-of-the-front end” is where my heart lies, and so the title of “UI and UX Engineer” is one that I can identify with.

    Read more

  • Using Flow Diagrams to Manage State in Complex Applications

    A few days ago I blogged about managing state in Vue apps with Vuex modules. I’m currently grappling with some fairly complex state management in a Vue app, and I wanted to share a bit about my process and how I’ve made it more manageable.

    Read more

  • Published on MDN

    Getting Started with Container Queries

    As of this year, container queries are supported in all major browsers. But what are they, and how can we use them to build more robust, flexible layouts? Do we still need media queries? Let's find out.

    Read it on MDN