Tips, tricks and tutorials on the web’s most beautiful language
I’ve been helping my mum fill out various forms for a house purchase for the past week or so. All of the forms are sent to her as PDFs by the solicitors, which are not the easiest or most intuitive to fill in electronically when you’re not a digital native. My first instinct was to open them in Adobe Acrobat, which I feel like has been the go-to PDF viewer since forever. But my goodness, the UI is…
Yesterday I attended Green IO conference in London for the second year running, this time bringing along one of my Ada Mode colleagues. I only managed to attend Day 2, (the main conference day) and not the preceding day’s workshops, but there was plenty to take away and be inspired by from the talks. I’m not one for taking a lot of notes at conferences, so you’ll have to excuse me for the lack of…
For many projects I work on it’s useful to define all of our brand colours in a JavaScript file, particularly as I work on a lot of data visualisations that use them. Here’s an abridged example of how I define brand colours, as well as those used for data visualisations, and their variants: // theme.js const theme = { color : { brand : { primary : { DEFAULT : '#7B1FA2' , light : '#BA68C8' , dark :…
Earlier this year the BBC published a report on digital sustainability, Does what you scroll burn coal? Mythbusting energy consumption on the web . The report seeks to address some of the ways our online activities consume energy but interestingly, is quite critical of some of the web sustainability guidelines that have been developed and published by the community. What’s frustrating here is that…
A recently published post by the science fiction writer Robin Sloan ( Is It Okay? , published 11th February 2025) ignited some examination and debate among my little corner of the web. The post asks the question of whether it’s ethical, from an individual moral standpoint to use an LLM ( Large Language Model , such as Claude or GPT-4). Robin raises some important points about the trade-offs that…
Recently I had the experience of migrating a Vue web app to a new state management library, Pinia, which was interesting from both a technical and non-technical point of view. In this article for Piccalilli I’ll share my thoughts and findings on when, why and how you might consider carrying out such a major technical migration, applicable to any large web project, and some tips and advice on…
Recently I’ve been working with map data to create interactive visualisations. When working with maps it’s common to receive data as GeoJSON , a JSON format for encoding geographic features, which specifies the type of geometry and co-ordinates for the features we want to display on a map. Javascript mapping libraries such as Mapbox GL are designed to consume GeoJSON to render features on a…
I’m pretty proud that I managed to keep my iPhone 8 going for over five years (with one battery replacement in that time). But recently it’s been increasingly unreliable, switching itself off at random times, and spontaneously draining the battery after doing anything remotely taxing. This combined with the fact that software updates are no longer available for this model led me to the conclusion…
Baldur Bjarnason shared an article in a recent edition of his newsletter about AI in education . As a parent of an 8-year-old, this is something that’s been on my mind a lot recently. Like most other parents I’ve encountered, I find the idea that teachers can be “replaced” by AI so preposterous that I’d imagine no one who’s ever had a child, met a child, or even been a child would take it…
Ahmad Shadeed has published a great article digging into the proposed CSS masonry layout syntax . In case you’re unaware, the term “masonry” for layout is used to describe the kind of grid layout where instead of items of various heights being aligned in neat horizontal rows, they are shifted to fill the leftover space, effectively creating a brickwork effect. It was popularised by the website…
The Green Web Foundation have published a thorough and insightful report into the sustainability of AI , and the results are pretty damning. Over the couple of years I’ve been talking about web sustainability I haven’t really touched upon AI a whole lot, partly as there wasn’t a lot of publicly available hard data about its environmental impact. Now, however, it’s become an issue that’s too big to…
When writing blog posts in Markdown files I often find myself needing to add HTML elements that aren’t accounted for in Markdown. Some common ones are <aside> elements, where I include content tangentially related to the post itself, or external references. Having to include HTML in Markdown is kind of a pain, because once you start writing HTML, you can’t then use Markdown inside it: everything…
True to form, Heydon Pickering has written another blistering account of one of the most ubiquitous HTML elements, the <blockquote> . You’ve probably used a <blockquote> when writing HTML. I know I’ve used literally hundreds of them. What I didn’t know is that I’ve been using them wrong all these years. To pilfer a few choice quotes from said article: In HTML5, <blockquote> content “must be quoted…
Last week I attended Green IO , a conference in London all about sustainability in digital technology, organised by Gaël Duez (who also hosts the Green IO podcast ). It was a fantastic conference, and amazing to see so many people who are passionate about this stuff all in one room! I’m not great at taking notes during talks, but there were so many great takeaways I wanted to sum up a few while…
It’s been a little while since I’ve played around with making creative stuff with CSS just for fun. My trip to State of the Browser conference at the weekend reminded me why I love the web and the creative community around it. If you haven’t already, you should check out Hidde’s summary of the conference. Every talk was absolutely top quality (and some were downright jaw-dropping — Katie Fenn’s…
I came across a post from Elad Shechter lamenting not being able to use logical properties in media queries . As he correctly notes, the following won’t work: @media ( max-inline-size : 1000px ) { .main-content { max-inline-size : 800px ; margin : 0 auto ; } } Media queries now support a new range syntax. Instead of writing min-width or max-width , we can use the “greater than” or “less than”…
If you’re a regular user of CSS (and hey, if you’re reading this you probably are) you should definitely complete the State of CSS survey, an annual survey of CSS features. Registering your opinion of CSS features, frameworks, tools and resources is helpful to the CSS world as it helps browsers and working groups figure out what to prioritise. If enough people shout loudly enough about a…
In this article for Andy Bell’s blog Piccalilli , we explore something I’ve been consumed with styling a lot recently: data tables. Not to be confused with using tables for layout (as in the bad old days of CSS), HTML tables are vital for displaying tabular data (data with row and column relationships) accessibly. They come with a few quirks, however, and some less-familiar CSS properties that are…
If anybody needs some free advice on how to build websites, Sara Joy has got it absolutely nailed . (With supporting voiceover from Keenan , and an accompanying video from Robb Knight .) The indie web community is awesome 💕 Everybody’s Free (to Write Websites)
Hearing you’re doing a good job matters. Like anyone, there have been plenty of times when I’ve felt disinvested from a job, when I’ve lacked motivation or felt disconnected. There are lots of reasons why those feelings can arise in anyone, but one that triggers them often is a lack of feedback. If someone (your manager, for example) seems uninterested in your work or doesn’t appreciate the effort…
I recently gave a CSS layout talk at Pixel Pioneers conference in my (sort of) home city of Bristol. I’ve spoken about CSS layout quite a bit over the years, but I feel like there’s always a lot to talk about, as things are changing all the time! Although the talk shares a title with others I’ve given in the past year or two, I’ve updated it and added a couple of new sections covering anchor…
Here’s a new demo where we’re positioning article references for a body of text relative to two different anchors for the block and inline axes. Each reference is positioned so that it aligns vertically with the position it’s referred to in the text, but appears adjacent to the main content wrapper on the horizontal axis. The content area has its own anchor name: .content { anchor-name : --content…
The CSS Anchor Positioning specification enables us to position elements relative to an anchor, wherever they are in our web page. As I wrote recently , one thing that particularly excites me is being able to combine anchor positioning with the Popover API to show and hide elements. Anchor positioning isn’t very well supported yet : in fact, it’s currently only supported in the latest Chrome…
View from the top of Mount Snowdon (Y Wyddfa) in Eryri National Park This week I climbed a mountain. There are some things that make me care not one tiny bit about web development, and being on top of a mountain is one of them. The web helped me with this adventure, though. I planned the trip on the web. I researched the hiking route on the web. I booked the hotel on the web. I bought equipment on…
Anchor positioning in CSS enables us to position an element relative to an anchor element anywhere on the page. Prior to this we could only position an element relative to its closest positioned ancestor, which sometimes meant doing some HTML and CSS gymnastics or, more often than not, resorting to Javascript for positioning elements like tooltips or nested submenus. Anchor positioning is…
My son gets a weekly magazine delivered to our home. It’s full of his favourite comic strips by fantastic authors and artists, he gets the pleasure of receiving something in the post just for him, and (even better) it doesn’t come with a load of plastic tat like you get with magazines in the supermarket. It’s not packed full of ads either, apart from a few for the comic book company’s workshops…
I’m sure I’m not alone in noticing the recent proliferation of articles lamenting the impending (or, indeed, already happening) destruction of the web as we know it, due in large part to the influx of AI-generated content. For the most part, I share their pessimism. It’s hard not to see the devaluation of human content as anything but a negative. But in the face of all this gloom, I think it’s…
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 colour. Some designers feel that a website needs quite a few shades of grey in order to convey subtleties. I once worked on…
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 considering how those of us concerned with building a humane web can weave incremental change into our work — without allowing…
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 performance impact of adding Google Analytics or Google Tag Manager to a site. Sites that were previously reasonably fast…
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…
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…
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…
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…
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.…
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 was somewhat limited. From the directory alone it was impossible to discern which providers could claim to be running on…
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…
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…
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…
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…
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…
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 developers lamented they couldn’t center a <div> (hopefully), as we have a bunch of ways to do that, the shortest of which only…
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 first speaker interviewed . It was interesting to reflect on my experience of speaking at conferences and consider what…
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 researchers and digital media companies with the aim of quantifying and reducing carbon emissions from digital content.…
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 developer tools for monitoring performance. As I also mentioned, it’s really hard to land on 100% accurate figures for…
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 attempting to improve the site performance of a client at the agency I worked for. At the time, embedding a YouTube…
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 off the hook Paradoxically, giving myself an off-ramp right at the beginning made me push myself harder. In the first post I had already set myself up with reasons (excuses) why I might…
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 paragraph containing a whitespace character won’t be hidden in this case. On the other hand, if a content editor…
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 content be scrollable ( overflow: scroll or overflow: auto )? Why can I see scroll bars (or not)? Both scroll and auto…
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.youtube.com/watch?v=f5felHJiACE As Ryan points out, all that JS is rarely in the service of users. Rather, architectural…