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 other topics too. Naturally, right afterwards I thought of a whole bunch of things I forgot to mention (hopefully I’ll get around to writing one or two follow-up blog posts!), but I was pleased to get the chance to talk about this important subject on such an esteemed podcast. I hope listeners will take away one or two ..read more

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, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the design system for our project? I’ve been exploring using the relatively new CSS color-mix() function for this purpose. It’s been fun to see the different palette variations I could generate! In this a ..read more

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 them. I definitely need a better way to organise mine, which is why I’m sharing them here. Here’s a bunch of stuff I’ve found interesting this month: Web and CSS What is Utility-First CSS? by Heydon Pickering Okay, Color Spaces by Eric Portis A manifesto for small, static, web apps by Ross Wintle Reality Check #3: Bui ..read more

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 130gb and the names alone (not even the urls) takes up 750mb. That’s a lot of data, and I’d be willing to bet a fair amount of it is no longer needed. Not long ago I read World Wide Waste by Gerry McGovern, which brings into sharp relief the physical and ecological impacts of our digital lives. One aspect of this is ..read more

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 nothing, but I’m using a variable font, so I figured perhaps that had something to do with it not being a super-common issue. Font rendering in iOS: Before and after fixing. I’m happy to say, I’ve figured it out and finally implemented a fix. It involved learning a thing or two about @font-face. The @font-face at rule is whe ..read more

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 blog posts in markdown and use Nunjucks for templates, which get built into HTML file on deployment and served as static files, so it’s nice and lightweight on the client side. I also have an Eleventy starter project that’s been long-overdue for some maintenance. I recently made a few updates, so I thought I’d note th ..read more

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 in CSS. But for the first time, I feel a sense of trepidation for my chosen profession, and the industry as a whole. It seems every week the headlines are filled with new ways that companies are using AI to exploit workers and fill the web with soulless marketing soup. Additionally, I’ve seen several friends and acqua ..read more

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 evening was by Gerry McGovern, whose fantastic book, World Wide Waste is packed with insights into the pollution caused by our digital lifestyles. Some of the statistics in his talk (and in the book itself) are downright terrifying, and a wakeup call to those of us working on the web. It’s well worth a watch. We also ..read more

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 most interested in learning and writing about. But over the course of the years I’ve found myself expanding my writing into different areas: web sustainability, JS, dev ops, front-end in general, and work/life more broadly. Somehow this blog became a respected source of CSS articles, thanks to some well-known folks sh ..read more

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 (both individually and in small groups). It can be tricky to find the right balance to hold people’s attention for an online workshop — speaking from my own experience, I find I sometimes struggle to stay engaged compared to attending in person. But the blend of content here, combined with Andy’s presentation style and h ..read more