Greys. Who doesn’t love ’em? When it comes to building websites, it can be handy having a few shades of grey at your disposal, no matter your colour palette. We use them for borders and subtle dividers, shadows, and to indicate state changes without overwhelming the user with col … | Continue reading
There’s something special about starting a new web or software project. Like a blank canvas, it has so much potential. Surely this is where we’re about to do our best work... In this piece for Branch magazine, I explore the theme of “Perfection is the enemy of progress” by consid … | Continue reading
This article on privacy-focussed web design by Paul Jardine and Becky Thorn of sustainably-minded web design agency Root raises some great points about the link between invasive tracking scripts and the carbon footprint of a website. I’ve often been frustrated by the negative per … | Continue reading
When you get an invite from Chris and Dave to appear on ShopTalk Show it’s hard to say no! Despite my longstanding fear of sounding like an idiot on the airwaves, I swallowed my nerves and joined them for an episode on web sustaibaility — althought we managed to delve into a few … | Continue reading
Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, … | Continue reading
I was just collating all the articles I’ve read over the past month in order to post them here when, coincidentally, Matthias Ott’s latest Own Your Web newsletter lands in my inbox! This month it’s all about bookmarks: how you collate them, where you keep them, and how you share … | Continue reading
A post from Remy on Mastodon recently got me thinking: Been picking up some of the jsbin archive work. Today, there's currently 62 millions bins stored. The last full copy archive I ran (which downloads the full html, js + css into a single page) holds 42 millions bins, consumes … | Continue reading
Since I redesigned this website last year, an issue with the heading font has been bugging me. I’d noticed that, unlike in other browsers, in Safari on iOS the headings rendered poorly, slightly blurry, as if they’d been faux-bolded. Googling the problem was coming up with nothin … | Continue reading
The Green Web Foundation has recently redesigned their green web hosting directory. Previously the directory was a useful resource for finding hosting platforms that at least claim some sustainable credentials but, as I’ve noted before the information provided by each web host wa … | Continue reading
This blog uses static site generator Eleventy (or 11ty. I have no idea which one is the “official” spelling, and the docs appear to delight in switching gratuitously between the two! Let’s go with “Eleventy” for now.) under the hood. I like Eleventy because it allows me to write … | Continue reading
I’ve held off publishing a “year in review” post until now because, to be honest, towards the end of last year I wasn’t feeling too optimistic about the state of the web. Normally I like to end the year with a (mostly) upbeat reflection on my experiences, and on new developments … | Continue reading
Just before Christmas I spoke at Smashing Meets Goes Green an online event focused on digital sustainability. The video of my talk is now online, so if you’d like to know more about this vast topic, jump right in! https://www.youtube.com/watch?v=xtzcE_HUx2o The second talk of the … | Continue reading
A question I’ve been asking myself recently is “What is the purpose of this blog”? When I started writing in 2018 it didn’t occur to me that I’d still be doing it five years later. I picked the name “CSS { In Real Life }” because I loved CSS (I still do!), and that was what I was … | Continue reading
Last week I had the privilege of attending an online workshop on Data Visualisation Fundamentals hosted by data visualisation expert Andy Kirk. The six-hour workshop was split across two days, and consisted of a mixture of teaching materials, examples and interactive exercises (b … | Continue reading
Rachel Andrew shared a snippet of good news for CSS layout on her blog the other day: it’ll soon be possible to vertically centre an element inside a parent without the parent needing to be a flex or grid container, using the align-content property. Gone are the days when develop … | Continue reading
Melinda Seckington has just launched a brand new blog series, Beyond the Spotlight, where she’ll be talking to conference speakers about their talk process, preparation and delivery. Melinda is an accomplished speaker , writer and engineering manager, so I was honoured to be the … | Continue reading
I’ve been speaking about web sustainability a bit recently, and a question that comes up fairly frequently is about the impact of audio and video streaming. Catherine Van Loo from Carnerstone consultancy is part of the team working on DIMPACT — a collaborative initiative between … | Continue reading
Yesterday I spoke at Smashing Meets Goes Green, an online meetup themed around building a more sustainable web. In my talk I spoke a little about tools for measuring your website’s carbon emissions, and how it would be great if these metrics could be integrated with commonly-used … | Continue reading
I’ve been writing and speaking about web sustainability quite a bit this past year. One thing I’ve done periodically for my talks is to test the data transfer size of various social media embeds — they’re pretty bad! I first tested some YouTube embeds a couple of years ago while … | Continue reading
We made it! I tasked myself with writing 30 posts in 30 days for National Blog Posting Month, and somehow I just about managed it (well, including this post — yes, I cheated!). So, what have I learned? Let yourself of the hook Paradoxically, giving myself an off-ramp right at the … | Continue reading
A tiny tip today, but a good one: use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content). p:empty { display: none;} This will hide paragraph elements that have no children, or contain no text nodes. Text nodes include whitespace, so a … | Continue reading
The overflow CSS property (shorthand for overflow-x and overflow-y) controls what happens when the stuff you put inside a box is bigger than the box itself. Should it bleed out of the box (overflow: visible, the default)? Hidden completely (overflow: hidden)? Or should the conten … | Continue reading
The video of Ryan Townsend’s talk from Performance Now(), The Unbearable Weight of Massive JavaScript is well worth a watch. Excessive JS, seemingly turbo-charged by JS frameworks, has long been a problem on the web, with bundle sizes showing no sign of decreasing. https://www.yo … | Continue reading
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 … | Continue reading
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. A typical layout pattern I’ve built a few times uses … | Continue reading
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 … | Continue reading
Here’s a cool thing I made. Here’s a cool thing someone else made. Here’s something I just learned. Here’s something I want to learn that looks cool. Why I want to learn/use/do this thing. Why I don’t want to learn/use/do the thing. I’m in the process of learning something but I … | Continue reading
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? What do we mean by “green”? When we think of green web hosting … | Continue reading
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. It’s remarkably easy to link an animation to the root scroller … | Continue reading
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 ai … | Continue reading
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. It looks like the text has been clipped out of the black translucent background, but in … | Continue reading
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. After I created this demo, I belatedly discovered that it didn’t work as ex … | Continue reading
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 ba … | Continue reading
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. Background I work on a web app for wind … | Continue reading
I’m a big fan of lists. I like to think of myself as a fairly organised person. I make lists for a lot of stuff, at work and home, and get a little kick out of crossing things off. Yes, I’m one of those people who add tasks to a list post-completion, just for the pleasure of seei … | Continue reading
I’ve been playing around with layering radial gradients in CSS to create flower shapes, with the help of CSS trigonometric functions. For a primer on what trigonometric functions are, and why they’re useful in our code, I’ve written a three-part series for Codrops. Radial gradien … | Continue reading
If you use Vue you might be familiar with the state management library Vuex. It used to be the state management library recommended by Vue, until the team developed Pinia. But lots of applications still use Vuex, including the one I work on. This post contains some tips for handl … | Continue reading
Last week I had the pleasure of attending FF Conf in Brighton. I was partly inspired to go to the conference after watching a talk from last year’s event: Programming With Yarn by Lily Madar. https://youtu.be/mcbg_mCQOHs?si=odn5zq9M6lx_xE1Z Watching this talk coincided with a vis … | Continue reading
Recently I’ve been doing some front end development work for a lovely project that showcases original short stories submitted by writers and climate change activists. Most of the stories are accompanied by an illustration specially created by an artist. One story did not have an … | Continue reading
In case you missed it, nesting is now supported natively in CSS in all major browsers! Nesting is a popular feature of preprocessors like Sass and has been, in my opinion, on of the main reasons to keep using preprocessors. But with nesting supported natively, it might soon be ti … | Continue reading
Following yesterday’s post on handling null, undefined and zero values in JS, I was asked on Mastodon: I’m curious why isNaN() doesn’t work in your case. Thanks! isNan() is a global function, which determines if a value evaluates to NaN or not. But what is NaN? NaN NaN (not to be … | Continue reading
In JS, it’s easy to get caught out when determining if a variable is null, undefined, or has a value of zero. I do a lot of data visualisation, and quite often I’ll need to filter out null values from an array of data. data.filter((value) => !!value) The problem is, this is also … | Continue reading
I don’t see people using the gap property for flexbox out in the wild all that often, but it’s pretty cool! gap has been supported for flexbox in all modern browsers since 2021, but has been supported for Grid for much longer. Grid originally had a grid-gap property (shorthand fo … | Continue reading
It’s been a year since Twitter (X) went down the pan, and I finally got around to removing the Twitter link from this site. I haven’t visited the platform in months, except periodically, guiltily checking that I haven’t missed an important DM. I never post there, and the occasion … | Continue reading
In case you missed it, Matthias Ott has a new newsletter. Own Your Web is a lovely, fortnightly newsletter about “about designing, building, creating, and publishing for and on the Web”, which captures a whole bunch of people in its remit: designers, developers, writers, content … | Continue reading
In my spare time I do a bit of voluntary development work for an activist network. What I like about this kind of work (aside from helping a good cause) is that I get to experience an entirely different codebase, architecture and working process than I do in my paid employment. I … | Continue reading
I’m not a person who creates CSS “art” (as in drawings), but I do like messing about with CSS gradients and seeing what comes up. I think the first time I became aware that you could create some pretty cool effects with CSS gradients was Lea Verou’s CSS3 Patterns Gallery. Gradien … | Continue reading
Recently I wrote about the COP28 climate summit’s website, which featured a low-carbon toggle that did precisely nothing. The post captured the interest of a few people, and I was contacted by ABC News Australia, who published a story on it, inviting me and web sustainability con … | Continue reading