CSS and design systems people - BlogFlock

2026 Open Agentic Tools - Adam Argyle

2026-08-10T16:52:03.000Z

Some "open" agentic tools:

Wonder if they use Open Props 😏

Scroll Axis Lock - Adam Argyle

2026-08-10T16:04:51.000Z

I first noticed web scroll areas had scroll locking behavior when making 2D scroll snap demos; I couldn't scroll diagonally without getting hijacked and locked into an x or y axis.

Even on a touch device, where a diagonal gesture is so easy and natural.

See the Pen by Adam Argyle (@argyleink) on CodePen.

Thanks to Bramus's rad interactive blog post I saw Chrome 153 with the remedy:

.scroller {
  overflow: auto;
  overscroll-behavior: contain;
  scroll-axis-lock: none; 👈
}

spec | check for support

Freedom from the axis lock 🤘🏻

Use cases #

I was thinking:

swipe to dismiss interactions
flings
maps or infinite canvas navigating
datagrids or tables
image zoom scrolling around
360 pano images or 3D model panning
data vis exploration

Just seems worth while to use the natural inertia, tensions, perf and feels that scroll snap has for the snap feedback of "didnt swipe far enough" and the browser owned easing.

Can also mitigate scrollTo strangeness that might do x then y.

I did log a bug #

I saw some performance regressions in the first 2 demo's I pulled up to test with

Filed a bug.

I wouldn't necessarily file this as perfectly fixed, I still felt it was a bit clumsy or not enabling diagonal scrolling as smoothly as I'd like.

Overall exciting and meaningful IMO tho.

Your thoughts?

Ranting Devigner - Adam Argyle

2026-08-08T05:46:10.000Z

My Blogspot in 2011: Ranting Devigner

see what tech articles I was reading ^lol
dev and design rants I was making ^{also lol}

Devigner = Designer + Developer
Before "Design Engineer" was coo

Kevin Powell Trying Out Prop For That - Adam Argyle

2026-08-05T15:11:07.000Z

Kevin Powell tries out Prop For That, makin it look so slick and easy 🫶

Watch on YouTube

Max Value Of A CSS Length Layout Unit - Adam Argyle

2026-08-05T14:53:20.000Z

33554432px

the maximum value for a CSS length in a layout context. #randomCSSfacts

Bramus on Masto

WWW Ep250 With Christina Martinez - Adam Argyle

2026-08-03T20:55:45.000Z

Ep #250
Live at React Miami with Christina Martinez

Robbie, Christina and I chat fun coding experiments, personifying agents, OpenClaw, hot takes and a little bit of whatnot.

⤷ whiskey.fm · youtube · spotify · apple

Reading matters deeply - Robin Rendle

2026-08-02T22:23:40.000Z

Mandy Brown:

...reading isn’t about reaching empathic dead ends, or recruiting platitudes about how we must understand each other [...] To reduce reading to the practice of empathy is to divorce it of its real power and pleasure: to enjoy the fruits of another person’s creative effort, to think with the writer and their characters, not becoming them, but becoming more fully yourself.

Show me the work - Robin Rendle

2026-08-01T18:05:07.000Z

Whenever someone tries to impress me with a job title I feel sorry for them. Like when a child tries to impress me by explaining that “Wolverine is cool.” Look, kid: I basically invented Wolverine. I’ve been thinking about Wolverine since before you were born. Wolverine and me are best buds how dare you come to me with these childish facts. Have you seen my t-shirt? My Wolverine-themed chain wallet? My sick yellow socks? I know everything about Logan — see, we’re on a first name basis here — and he calls me all the time to ask how I’m doing. He was the best man at my wedding. So do I know that Wolverine is cool? Go back to school and get yourself an education.

Ahem. Anyway, like I said, I’ve always felt pity for folks with ridiculous job titles but I hadn’t really been able to put this feeling into words until I heard AOC answer a question about running for president in 2028:

What’s funny about that, they assume that my ambition is positional. They assume that my ambition is a title or a seat, and my ambition is way bigger than that. My ambition is to change this country.

Presidents come and go, senate house seats, elected officials...all come and go. But single payer healthcare is forever.

I can’t put into words how much I admire this. Although sure, a title might be nice. It might communicate what level you are, or help barter for more money and power. It might get you a better job. But I’d argue that those are the jobs you don’t want. Constantly vying for attention and glory is the best way for the work to suck.

Most fields have figured this out: even the biggest bozo in the world is unlikely to introduce themselves as a Senior Staff Principal Novelist, or a Lead Poet, or an AI-Native Movie Director. But in the software design field there’s a total lack of shame. Someone will shake your hand with the most pathetic, lick-spittle job title in a vain attempt to impress or intimidate, to place themselves above you in a deeply lame, invisible hierarchy.

So let’s get serious here: Wolverine does not introduce himself as an AI-Native Senior Principal X-Boy.

He’s just fucking Wolverine, my dude.

CSS Infinity Use Cases - Adam Argyle

2026-07-25T19:57:08.000Z

CSS infinity (and -infinity!) solve some pretty specific problems elegantly, but can also just be plain fun to use.

Showing support for infinity, -infinity, NaN, pi, and e

Lets spur creative CSS juices with infinity and follow a couple use cases.

Basics and gotchas #

infinity and -infinity need to always be wrapped in calc().

If you want it to represent a dimension, it also needs to be multiplied by a unit like:

div {
  border-radius: calc(infinity * 1px);
  z-index: calc(infinity);
}

Not quite limited to calc() too, you can use it with other calc()-like scenarios like clamp(), min(), max(), etc, which we'll dig into a bit 🤘🏻

1. Circles and Pills #

Before infinity, I would have used scientific notation like 1e9px (which is 1000000000px) to create a "big enough" radius for circles and pills at any size.

But with infinity..!?

.radius-full {
  border-radius: calc(infinity * 1px);
}

2. Perma-state #

Setting duration calc(infinity * 1s) makes an animation/transition so long that it appears to be frozen ⛄️

Hover over those boxes and the duration will be pinned to happen over infinity seconds, sticking the state for the duration of the page's life.

I like how the duration of your hover is permanently made visible too. Visible millisecond duration via background color.

3. z-index #

Need to beat z-index: 999999999 or something?

.tippy-top-of-stacking-context {
  z-index: calc(infinity)
}

This will max out at the largest int a browser allows: 2147483647. Speaking of that number, you can see it by using counters like this:

.css-max-int {
  counter-reset: cssInt calc(infinity);

  &::after {
    content: counter(cssInt);
  }
}

See!

4. To infinity and beyond #

Use calc(infinity * 1px) to remove the floor or ceiling of a clamp.

div {
  inline-size: clamp(
    calc(-infinity * 1px), /* no floor */
    100%, 
    calc(infinity * 1px)   /* no ceiling */
  );
}

5. Freeze view transitions #

Make view transitions never complete.

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: calc(infinity * 1s);
}

The ::view-transition tree stays in the devtools DOM, giving you an opportunity to inspect or tweak.

6. Bools #

Clamp an arbitrary number down to exactly 0 or 1, then use it:

.flippy {
  --active: 0;
  --on: clamp(0, var(--active) * infinity, 1);

  background: hsl(200 80% calc(50% - var(--on) * 20%));
  translate: 0 calc(var(--on) * -10px);

  &:active {
    --active: 1;
  }
}

One variable now can drive color, offset, opacity, gaps, whatever.

Flip with classes, media queries, etc, anything that can toggle a variable can become the moment a different style choice is made.

7. Backdrop #

You can use the spread feature of box-shadow to create a non-interactive backdrop:

.backdrop {
  box-shadow: 0 0 0 calc(infinity * 1px) #0005;
}

Paint past the "entire viewport".

8. Scroll Trigger #

Trigger a scroll driven transition in, and never transition out.

.nav-title {
  timeline-trigger-activation-range-end: calc(infinity * 1px);
}

.product-title {
  animation: slide-and-fade 150ms ease both;
  animation-trigger: play-forwards play-backwards;
}

Though you'll see in the demo I use scroll 100% which is a specced way that feels closer to the intent I was going for, in that I wanted the range end to be the end of the scroll area.

Try it:

See the Pen by Adam Argyle (@argyleink) on CodePen.

Also, just for funsies to share, here's the scroll driven version of the same navbar effect. Doesn't use infinity, but fun to try and compare scroll-triggered vs scroll-driven animation.

See the Pen by Adam Argyle (@argyleink) on CodePen.

Thats all #

Hope you found that interesting!

Comment with your own creative uses of infinity?

WWW Ep249 With Joel Hooks - Adam Argyle

2026-07-23T19:57:08.000Z

Ep #249
Live at React Miami with Joel Hooks

Robbie, Joel and I chat about Pi, OpenClaw, JoelClaw, YOLO mode, AGI, custom harnesses and a little bit of whatnot.

⤷ whiskey.fm · youtube · spotify · apple

100 Ways To Center A Div - Adam Argyle

2026-07-21T02:46:06.000Z

100 ways to center a div
by Temani Afif

Sinistral Hands - Robin Rendle

2026-07-19T18:51:19.000Z

There’s a line from Rutherford Craze’s latest note that hit me like a piano tumbling out of a six story building:

When we ask Midjourney to draw an ox, it does not think of home. ChatGPT will never invent a new calligraphy technique, because it has no wrists to feel uncomfortable.

That link points to Phaedra Charles’s Undercase Type and a beautiful thing she printed called A Guide to Sinistral Hand. It’s a small booklet, half type specimen and half essay, that reimagines type design and lettering from the view of left-handed folks:

Left-handed writers have a notoriously difficult time with handwriting, and for good reason: like a pair of scissors, the alphabet is designed for right-handed use.

[...] If part of the beauty of handwriting lies in its ability to express the habits, experiences, and perspectives of the individual, why are left-handed people expected to hide their handedness by mimicking right-handed models?

Sadly it isn’t in print but the PDF is still available—and beware! As I was reading this thing it felt like not one but several pianos were descending on me from above, like this Steinway-shaped fact:

In Hebrew, the direction of reading does not follow the direction of writing, meaning the letters do not point to the following letter. We will call this counter-momentum writing.

Counter-momentum! Wonderful. We will certainly call it that. But what makes Phaedra’s argument even more compelling is that the text is printed in a typeface that follows these principles, moving in counter-momentum, and I think it looks lovely and cool and new. Despite the booklet being printed way back in 2018.

Anyway, it’s extraordinarily rare for a typeface to open a door in my mind, to push back against how I see the world, for me not to categorize it in an already existing room in my head and firmly seal the door behind it. But Phaedra’s work here is exciting and fresh and reminds me that new things are still possible! New letters, new ideas, are ~~right~~ left out there in the open.

Oh and Undercase Type’s Mollydooker takes this idea a bit further as a left-handed brush script, reminding me somewhat of left-leaning italics. But the rest of Phaedra’s work is equally compelling, too: just take a look at Ritme or Mausoleum, I dare you, and try not to be impressed.

EP-1320 Medieval - Robin Rendle

2026-07-12T17:09:47.000Z

Last week I picked up the EP-1320 Medieval and I’ve been tinkering with it all weekend. Besides it’s buck-wild look, it comes with a bunch of expertly recorded medieval samples: flutes, bowed harps, gitterns, reeds, trumpets, bells, battle toms, rowdy peasants, and coconut horse hooves. This makes it sound like a joke, a musical toy that immediately finds itself in the back of your closet, but what I love about this musical machine is how seriously it takes itself. Yes, this is a medieval sampler! Get with the times!

The EP-1320 reminds me of programming, or the first time I learned how to cd, ls, open . in the command line. You learn a few helpful words of this scary, foreign language and over time it opens up a world of possibilities. And, in time, a new way of thinking reveals itself.

(You program the machine, and the machine programs you.)

So the EP-1320 is not simple. You either learn it’s way of doing things or go to hell. Like computers from before my time, this thing is modes-galore. Much to the horror of Larry Tesler, you’re almost always in a mode and switching between them all the time: sonus, manus, tempus, codex, claves, pocus (to make matters worse/better, every command and mode is labelled in Latin). There are songs, patterns, groups, and scenes: you must think in a very specific way about music to use the EP-1320. You have to read the guide. Study the icons. Program the samples.

And so, like programming, the EP-1320’s inflexibility, it’s almost complete and absolute stubbornness, is what makes it so charming.

Plus, ya know, the coconut horse hooves.

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