CSS and design systems people - BlogFlock

AI and greener choices - Hidde's blog

2026-06-26T00:00:00.000Z

The earth is heating up and AI isn't helping. It drives major increases in electricity use, water use and CO2 emissions. Yet, industry and governments alike seem keen to leverage the latest tech. Can we make greener choices?

Yesterday, I spoke at a conference on AI in government about sustainable choices. The presentation and slides were in Dutch, this post is a high level summary of what I covered.

As the presentation took place during a record-breaking heatwave, which meteorologists attribute to climate change, and there were some airconditioning-related issues, very little irony was lost on us.

Words matter

I started out talking about if AI is good or bad for sustainability and called it the wrong question. It's the wrong question, because both AI and sustainability are concepts that have many meanings.

AI can be understood in different ways:

as a technology, there are many kinds; Microsoft alone has 78 products named Copilot, but also, there are many types of AI, like computer vision, natural language processing, generative AI and agentic architectures. Traditional vs generative can be a useful distinction in sustainability, because of the difference in energy impact.
as an economic phenomenon (it isn't profitable yet, so it may get more expensive or introduce ads, and there are lots of financial stakes that explain why it's sometimes forced on consumers)
as an infrastructure (behind the cloud metaphore, there are very real data centres that warrant closer inspection)

Sustainability is multi-faceted too. In the Web Sustainability Guidelines, we center our definition around three pillars that ultimately need balance between them: Planet, People, and Profit:

Planet: its surface temperature rises due to emission of greenhouse gases that trap heat, and it has a finite amount of water of which only a small portion is suitable to drink.
People: think of people, including children as young as 11 years old, who are working in cobalt mines in Congo for the batteries that power our devices, or of people (and hospitals) who had no electricity during last year's Spain heatwave, while data centres continued uninterruptedly.
Profit: within our capitalist system, the needs of planet and people need to be balanced with profit, in order for anyone to successfully make the case for change.

So, there's some nuance about what the words mean, but despite that, it's worthwhile to try and reduce climate impact of our services. The pope said so, and in government, it's an increasingly a priority (like in the UK, where the Digital Service expanded their design guidance last year with principle 11: Minimise environmental impact) .

It's ok not to use AI

I shared five tips to make greener choices around AI, but couldn't help myself to add a bonus tip as tip zero: in many cases, not using AI for your project makes the most sense. Which is fine.

Many of us will have sat in meetings around a new idea or project, where someone put up their finger and said ”oh, maybe we can use AI for this”. The AI vendors primed us for this with hype.

Often, using AI, and especially generative AI, is like going to your local corner shop using a helicopter. What if you could solve the same problem with a couple of lines of Python, and Excel-sheet, people, or manually summarising?

I wanted to mention this specifically, because nobody wants to be the downer in the group and suggest not doing the thing that everyone is hyped about. But to be sustainable, we need to pick out just the cases where AI is absolutely necessary, and go without it for anything else.

Five tips to make greener choices

When using a specific type of AI actually solves your problem best, here's five tips to make greener choices.

Smaller models

When using generative AI, model size differs wildly. An example of a large model is DeepSeek v4 Pro, which has 1.6 trillion parameters (12 zeroes), while there are small models like Hugging Face's SmollLM that has 135 million parameters (6 zeroes).

A smaller model could save 30⨉ emissions of CO2 (and equivalent greenhouse gases), explain Luccioni, Jernite, & Strubell in their paper “Power Hungry Processing: Watts Driving the Cost of AI Deployment?”.

More specific models

A lot of generative AI uses so-called general purpose models, which are systems that know pretty much everything about the world. When hiring humans, we usually list a specific area of expertise. That's partially because there are no humans that know it all (just ones that think they do).

We should try to do the same with language models. If we're building a system that answers questions about taxes, we don't need to tell it what the capital of France is.

In “Power Hungry Processing”, Luccioni, Jernite, & Strubell explains this: “multi-purpose generative architectures are orders of magnitude more expensive than task-specific systems for a variety of tasks, even when controlling for the number of model parameters” (emphasis mine).

Be smart about data centre usage

In many applications of AI, the relevant software needs lots of computing: GPUs, CPUs, memory, and storage. This computing is often done in the “cloud”, or: data centres. The climate impact of data centres is widely seen as three components: electricity, CO2 emissions (and equivalent greenhouse gases), and water usage.

The International Energy Agency predicts the amount of data centres to double or triple over the next few years. The electricity used for this will be green, partially. But it won't all be green : gas and coal will continue to be a share of what powers data centres.

On an operational level, we could reduce the load on data centres by reducing how many tokens we use, via smarter prompting (shorter, more specific, more explicit, less repetition through variables). The paper Smarter, smaller, stronger by Perez Ortiz and Drobnjak details tests that show reducing a response from 400 to 200 words reduced energy consumption by 54%.

On a policy level, one tip I learned at the AI reporting event I attended, is to question how many 9's you really need. Data centres are convenient because they offer compute for rent and make it easy to scale. And they offer uptime, guaranteeing sometimes up to 99,99999 availability: five nines. More nines could mean less sustainability: some data centres will use diesel power or other unsustainable sources when they have a power cut. So to get to a higher uptime guarantee, they need to make such choices. What if we required less nines? What if we decided it's ok to have the AI thing not work for a couple of days a year?

Recognise greenwashing

Greenwashing is everywhere, and to make sustainable choices, we'll need to develop our skills to recognise it from afar. Sometimes it's easy to recognise, like an airline that said with them, you can “fly responsibly” (a Dutch court said this is misleading). EU Directive 2024/825 effectively forbids greenwashing, but companies still tend to do it.

Examples from The AI Climate Hoax include:

“bait and switch”: often “traditional” AI has a much smaller footprint than generative AI; when companies point at how clean their traditional AI is while ignoring the effect of their generative AI, this is misleading
use of (own) research with little evidence
hidden emissions through clever bookkeeping (often leaving out Scope 3 or ‘embodied’ emissions)
empty promises, like pointing at technologies that don't exist yet
downplaying via selective shopping in data or data without context
fatalism: “we'll reach those sustainability goals anyway, why bother trying”

Measuring matters

My last tip is around data collection. It's tricky to know how much energy data centres use, not the least because Big Tech successfully lobbied the EU to treat energy usage data as company secrets.

When you do get data, it often does not include Scope 3 emissions, which are estimated to be a very large part (I've seen percentages from 30 to 89%, and I am not sure what's right, other than that it is large).

There can also be a major difference in reporting: some companies do location-based reporting, others market-based reporting. Location-based means that you get information about how much a specific data centre is actually using, whereas with market-based, factors outside are taken into account, including certificates for carbon.

Location-based data is the most helpful if your team is trying to make optimisations, because it allows them to see the numbers go down (or up),where they would appear constant with market-based reports.

Lastly, I mentioned grid intensity: because there are many different power sources, and they deliver different amounts of energy depending on the time and location, grid intensity vary. For instance, if it's sunny and windy today at noon, the grid intensity will be low because there is lots of green energy available. At other times there's less.

Your application can use this difference, that constantly changes, by moving your computing to the right place at the right time. This is also called “carbon aware computing” and companies like Google already do it, to save emissions and costs at the same time.

Summing up

AI-related electricity usage, water use, and carbon emissions can be huge. That's a problem, but it's also an opportunity (cheesy but it's true). There is lots of low-hanging fruit that we can start addressing. As there's still so much to reduce, our efforts really can make a dent.

I really enjoyed giving this talk and hearing the audience comments afterwards. The main worry seems to be: how do I sell this within my organisation, and an answer emerged in the group: cost-savings and carbon-savings often go hand in hand.

Originally posted as AI and greener choices on Hidde's blog.

Reply via email

WWW Ep248 Live At React Miami With Guests Jason Lengstorf And Kent C Dodds And Tanner Linsley And Francesco Cuilla - Adam Argyle

2026-06-25T21:58:32.000Z

Ep #248
Live at React Miami with guests Jason Lengstorf, Kent C. Dodds, Tanner Linsley and Francesco Ciulla

Robbie and I chat with 4 guests in 1 episode!

Topics span things like Lambo's, MCP vs OpenClaw, agents building agents, polymorphic UI libraries, SDD + state machines, how Prolog is the most hated programming language, and whatnot.

⤷ whiskey.fm · youtube · spotify · apple

Presented by GitKraken and Clerk

Several short sentences on writing - Robin Rendle

2026-06-21T23:44:58.000Z

This is the sort of book I usually hate. By law books about writing are so desperate to explain the world to me that I struggle to keep my eyes open. I don’t have much patience when I feel someone’s talking down to me, with them having figured the universe out already. Isn’t it always more exciting when a writer is on the tip of their toes just a half step ahead of you? When you’re invited to participate rather than being yelled at?

Verlyn Klinkenborg’s Several short sentences on writing slips into that mode from time to time but has enough useful advice to recommend it. Like this first banger:

A writer’s real work is the endless winnowing of sentences,
The relentless exploration of possibilities...

Excellent, yes! But okay — how do you do that?

The answer is simple.
Your job as a writer is making sentences.

That’s not earth-shattering advice, but it’s helpful for me. The size of a project can be overwhelming and cutting the problem up into sentences frees me from the burden of all that future work that has to be done.

Or, as Verlyn puts it:

I’m interested in the genre of the sentence,
The genre that’s always overlooked.
Many writers seem to believe we live in a universe of well-defined literary forms:
The memoir, the profile, the feature, the first novel, the book proposal...

I like this! It’s a good reminder to focus on each sentence microscopically, to ignore everything else beyond that. Because who knows if I’m writing a poem or a sci-fi novel when I start a project? Just take care of the sentences.

Perhaps the strangest thing about this book is that it isn’t just writing advice, as I kept thinking about how these suggestions can be applied to design work, too. For example: when working on a big design project I never work on the whole thing all at once. At the beginning I’ll focus on the smallest part of it: the sidebar, the navigation, a single button or action or feature. I think of these as “sentences” or what I once called the smallest possible bit. Each change in the design modifies all the other changes. So I’ll constantly revise my prototypes as if I’m a brutal editor, demanding revision after revision, but because I’m working on a small piece of the puzzle it’s much less intimidating. Who can make 50 versions of a sidebar? Anyone can!

Designers often struggle with this lack of focus on the “sentence” of interface design. But I struggle with it more whilst writing. I get overwhelmed with all the possibilities and my drafts folder is littered with dead projects because I forgot about the sentences and all I could see was the plot or the genre or anything else.

But how do you get good at this though? This relentless focus? Here’s what Verlyn recommends:

The urge to write is so strong.
Aspiring writers want so badly to be pouring something out of themselves.
You need a place where you can practice noticing and making sentences—
[...] Is it possible to practice noticing?
I think so.
But I also think it requires a suspension of yearning

Sorry to interrupt you Verlyn, but !!!

First: I’ve felt this yearning to be a writer and a designer deeply in my bones. But I’ve avoided the writing, the sentence, the interface design, and the actual work in favor of bragging about being a writer or a designer. It’s easy to let the titles and the ego get the best of you. But the sentences are what matter most.

Second: this blog has always been that place for me to notice things. I write publicly because knowing that strangers will read this thing helps me winnow each sentence.

But when it comes to design it all needs to be locked up, private, sent into the Hyperbolic Time Chamber. The ideas are too embarrassing, too naive at the beginning. So early last year I started to keep a daily journal and began to fill it with junk: terrible, unforgivable ideas and scribbled drawings with words that make next to no sense. It’s a relief though, to have somewhere to notice things without it all being in the public record.

Anyway, I quite like what Verlyn has to say about cutting longer sentences into shorter ones because I’ve always struggled with the need to show off in my writing, to prove I can write a sentence that never stops. Verlyn argues this is due to fear and maybe that’s true. Perhaps I’m afraid to put a full stop somewhere because it’s hard and I’m an undisciplined writer, because I fear that folks will stop reading if each and every sentence doesn’t do a backflip-720-no-scope:

The obsession with transition negates a basic truth about writing,
A magical truth.
You can get anywhere from anywhere,
Always and almost instantly.

I love this! You can get anywhere from anywhere. Each sentence is a portal. Each sentence has potential. This is very exciting! Who knows where the next one will lead!

But I also like the idea that cutting up long sentences isn’t just for the reader. A lot of Verlyn’s argument in the book is that writing isn’t solely to woo strangers. Instead, this act of revision should help us think more clearly:

We assume that thought shapes the sentence.
But thought and sentence are always a collaboration...
[...] At first, what you mean to say will emerge
By setting aside the things you don’t mean to say
As well as trying to say the thing itself.

And and and:

Finding flaws is how you learn to make better sentences.
[...] Some flaws do a wonderful job of hiding.

I can’t help but connect this writing advice to software design again: bad ideas hide themselves until I make a prototype and find them. Every sentence is a prototype, too. Trying a thing, testing an idea.

Bad design does a wonderful job of hiding.

I like that for a couple of reasons. I like it because I don’t believe in the traditional design process. I think great design, like great writing, is a total shit show. There’s no stages, no linear clunk, clunk, clunk of progress. It’s all terrible until suddenly it isn’t because you’ve revised it ten thousand times.

Or:

You have no idea what you’re going to say
Until you discover what you want to say
As you make the sentences that say it.

Every sentence is optional until it proves otherwise.
Writing is the work of discovery.

WWW Ep247 Live At React Miami With Ken Wheeler - Adam Argyle

2026-06-20T06:38:14.000Z

Ep #247
Live at React Miami with guest Ken Wheeler

Robbie, Ken and I chat about proxies, pranks, survival bags, agent swarms and Ramon the 420 IQ Gorilla.

⤷ whiskey.fm · youtube · spotify · apple

Prop For That - Adam Argyle

2026-06-13T22:58:10.000Z

Announcing Prop For That, a JS library that backfills what CSS doesn't provide us yet (and maybe never will).

I'm done waiting for CSS to catch up to all the valuable information JS knows and done watching folks write the same little JS to just write a custom property to a component.

demo · docs · npm

Here's a basic example taking the value from a range slider to draw a nice gradient that fills up the slider:

import 'prop-for-that/auto'
// or import 'https://esm.sh/prop-for-that/auto'

<input type="range" data-props-for="range" min="0" max="100" value="40" />

input[type="range"] {
  background: linear-gradient(
    to right in oklab,
    var(--theme) calc(var(--live-value-pct) * 100%),
    var(--track) 0
  );
}

codepen · docs example · codepen collection

Why? #

It's super common to need a few lines of JS for a simple thing like:

the value of the color input
the mouse pointer position
the size of the scrollbar
the colors present in an image or video
the battery level
an element's visibility
etc

With Prop For That, you just declaratively specify on any element the props you want, and live props show up.

There's an imperitive API too, but the data attribute path is the slickest

Everything is a plugin that loads only if you need it too, ultimately putting you right where you wanted to be: creating something sick in CSS using dynamic information without wiring up some dorky JS.

What kind of props? #

My talk at CSS Day was an enumeration of all the ways CSS can adapt to users, contexts, pages, etc… which made me hyper aware of all the ways CSS couldn't adapt without JS.

Here's a flat list of all the live props currently supported by the library:

Pointer x/y in the window
Pointer x/y inside/local to an element
Viewport pixel height/width values
Visual viewport information
Element size information
Element visibility
Scrollbar and thin scrollbar sizes
Input element values
Input element dirty, touched, pristine, etc
Select element value, index, count, etc
Colors from an image or gradient (average, accent, light, dark, etc)
Colors occuring in a video
Video progress
Image loaded or broken + natural h/w
Clock time
FPS
Online/offline status
Page focused/visible
Scroll velocity
Accelerometer and device tilt/orientation
Geolocation
DPR, CPU cores, memory
Page navigation type (reload, back, etc)

And a few Chromium only props:

Network status like type, speed, save data, etc
Battery status
CPU pressure

Style Queries #

Style Queries being in all major browsers marks an important milestone for CSS, and made this library much more viable.

Using Prop For That with Style Queries looks like this:

import 'https://esm.sh/prop-for-that/auto'

<form data-props-for="form-state">
  <input name="name" required>
  <input name="email" type="email" required>
  <button type="submit">Save</button>
</form>

@container style(--live-all-valid: 1) {
  …
}

Bye noise #

Import, add attribute(s), have CSS fun.

Go make cool shit and share it with me 🤘🏻💀

Make Believe - Robin Rendle

2026-06-13T16:14:41.000Z

This morning was a total stinker. I woke up with a dull headache, teeth grinding, fists clenched. Sometimes my body becomes haunted, a vessel for a thing; total and all consuming. It could be a conversation the day before or a problem I’m trying to solve, it doesn’t really matter what that the thing is. These moments suck because it feels like I’m trapped inside my body with no way out but it’s extra annoying because the remedy is always so predictable and boring: stop work, find the nearest ocean, push my limp body up that hill, return to literature and books, books, books.

But when I woke up this morning I didn’t know that Make Believe: On Telling Stories to Children by Mac Barnett was the antidote. Because, dear reader, let me tell you: this book is only-the-finest-punk-rock-remedy for my bad brain goo.

Mac’s a children’s writer and in Make Believe he argues that these books aren’t a silly genre, they’re a form we should treat seriously and respect. Meaning, books for children aren’t a lesser kind of literature simply because they’re for children. In fact, Mac argues, there’s an awful lot we can learn about the world from children, too:

...what are “childish enthusiasms” but the ability to see the world with the freshness and wonder that literature requires? The child who stares and marvels at the workings of a garbage truck sees the garbage truck better than adults do. The kid who breathlessly recounts horse facts, who finds it overwhelming that such an amazing creature actually exists, is correct.

Mac continues:

Since the invention of the printing press, children’s books have been a battleground between those who want to tell kids what to do and those who want to tell them stories. [...] adults often expect children’s books to reinforce the prerogative of parents or priests or school principals. Most often, we confuse writers with teachers.

I hate it when stories have treacly moral lessons as an adult, too. I like the complexity! The unknown bits of a story, the blurry edges that are impossible to put into words. So why should kids literature be any different?

Rather than pushing a moral, good fiction invites the reader to make meaning. A moral is an immutable lesson, intentionally encoded into a story by the author, meant to be inscribed on the child’s brain. Meaning, though, is created collaboratively...

I could do this all day, quoting big chunks and spoiling every page of Mac’s very charming, very funny little book. Thankfully, Mac has a newsletter too that I’m now utterly obsessed by. Take this fantastic piece about Where the Wild Things Are for example:

MAC: As Max is crowned “king of all wild things” the pictures get even bigger, and that white bar shrinks, until we come to maybe the most famous sentence in any picture book: “‘And now,’ cried Max, ‘let the wild rumpus start.’” The rumpus is three glorious full-bleed, two-page illustrations. The white space is gone. There are no words.

(These are called “wordless spreads.”)

JON: After all, what would you write? A bunch of sounds? It’s so much louder this way.

Contextualism Talk At CSS Day 2026 - Adam Argyle

2026-06-12T10:13:27.000Z

✅ talk "Contextualism" at CSS Day 2026

Slides · Prop For That

WWW Ep246 AI Harnesses Framework Wars And Why Beards Beat Mustaches - Adam Argyle

2026-06-11T09:55:53.000Z

Ep #246
React Miami with guest Michael "Micky" Shimeles (AKA Rasmic)

Robbie, Micky and I chat about AI, frameworks, and the eternal beard vs mustache debate with a hilarious and fun guest.

⤷ whiskey.fm · youtube · spotify · apple

CSS Day 2026 - Adam Argyle

2026-06-08T15:29:06.000Z

🛬 Landed and stoked for CSS Day 2026!

💀 Tattoo scheduled
🤜🤛 Excited to see fellow CSS nerds
🎁 Have a special surprise at the end of my talk that I can't wait to reveal

A Standard Site - Adam Argyle

2026-06-05T23:32:30.000Z

This blog is now a standard.site 🤘🏻

WWW Ep245 The Death Of Typing With Typecraft At React Miami - Adam Argyle

2026-06-05T20:05:39.000Z

Ep #245
Live at React Miami with Typecraft (Chris)

Robbie and I chat with Typecraft, chat tech and extract some 🔥 hot takes.

⤷ whiskey.fm · youtube · spotify · apple

Time To MC Cascadia JS - Adam Argyle

2026-06-01T15:29:19.000Z

Robbie and I MC 🎤 Cascadia JS for the next 2 days

See ya there 🤘🏻

Indian Street Lettering - Robin Rendle

2026-05-31T16:25:47.000Z

I have a terrible admission to make and you may never forgive me. It’s taken far too long, so please don’t be mean about this. Look, I’m already on my knees apologizing and you don’t have to make this weird, okay? But this weekend I finally got my copy of Indian Street Lettering by Pooja Saxena. I know! I’m sorry! I should have known sooner! I apologized already! Jeez!

Pooja’s fantastic book and equally fantastic website are fancy typographic objects, sure, but they most certainly won’t sit quietly unread on your coffee table or in your browser tabs collecting dust. Instead, Indian Street Lettering demands as much attention as Pooja has lovingly poured into this project:

Take a short walk in any Indian neighbourhood and you’ll find signboards in a profusion of languages, styles, materials, and colours. So far, this living typographic archive has existed on the fringes of mainstream design discourse. India Street Lettering brings it to the fore, celebrating the artistic expression, linguistic diversity, and historical intrigue found in the vibrant letterforms around the country.

In her talk about the project called A Typographic Archive in the Making, Pooja describes how much she loves making playlists of photographs depending on the region, language, and style of lettering that she finds out in the wild. But she also talks about how temporary these signs are and how recording them is important because the visual identity of a place is always churning in a big, temporary soup. It’s all just great stuff.

Oh and I’d highly recommend subscribing to the feed, too. It’s a fount of interesting and unfamiliar typographic styles, like Pooja’s latest post all about astrology related signs.

Flex Wrap Balance - Adam Argyle

2026-05-30T06:56:54.000Z

I wished for this last year

.flex-container {
  display: flex;
  flex-wrap: balance;
}

now it's headed to Chrome 🤘🏻

Just Submitted My State Of CSS 2026 Survey - Adam Argyle

2026-05-28T05:12:20.000Z

Just submitted my State of CSS 2026 Survey.

Relative Alpha - Adam Argyle

2026-05-27T05:12:50.000Z

Would use:
CSS relative alpha.

button {
  border-color: alpha(from hotpink / calc(alpha * .25));
}

WWW Ep244 Live At React Miami With Seth Webster - Adam Argyle

2026-05-27T05:03:41.000Z

Ep #244
Live at React Miami with Seth Webster

Robbie and I chat with Seth Webster (executive director of the React Foundation, former React lead at Meta, and chief developer evangelist at Expo) to talk the past, present, and future of React and some 🔥 hot takes.

⤷ whiskey.fm · youtube · spotify · apple

fragcoord.xyz - Robin Rendle

2026-05-25T17:53:39.000Z

Huh:

FragCoord is a real-time GLSL fragment shader editor. Write shader code on the left, see the result rendered instantly on the right. No setup required — just start typing.

That’s from the docs that explains how this website is Codepen but for shaders. Each example is hypnotic and fun but from a totally different universe where math and art were always the same class in high school.

There’s a lot of interesting interface ideas going on here, too. Being able to select, inspect, and tweak variables, etc. It’s all slick and neat and weird.

The Wave - Robin Rendle

2026-05-25T17:38:42.000Z

Alessandra Ram:

Every major technological boom has produced the same figure, the person who gives everything to the wave...

WWW Ep243 Keyframes Cash And Codepens With Stephen Shaw - Adam Argyle

2026-05-22T05:16:23.000Z

Ep #243
Keyframes, Cash and Codepens with Stephen Shaw

Robbie and I chat with Stephen about CSS animations, web components, SSR nightmares, and why building things by hand still matters in the age of AI slop.

⤷ whiskey.fm · youtube · spotify · apple