iiinova — where your digital self keeps evolving

I built a game for September (actually I've been working on it since July). Inspired by Waldschattenspiel. www.keithcirkel.co.uk/dungeon/ The explorer must escape the dungeon, the monster must find them before they do. My first multiplayer game! I'm sure there are many bugs. Networking is hard.

keithcirkel.co.uk

Dungeon

A turn-based hide and seek in the dark. The explorer needs to find their way out, before the monster can catch them.

021

Keith Cirkel @keithamus.social · 21h

I don’t see how a class name hash is different to what @scope can express

300

Keith Cirkel @keithamus.social · 21h

I’m not sure I understand the use case, but also I’m curious how you solve this with css modules?

100

Keith Cirkel @keithamus.social · 22h

This would also be quite trivial for a build tool to accomplish. It could make a `Foo.css` of `p { background: red }` emit `@scope ...` with just a text transform, rather than building an AST to parse `:global` and such.

010

Keith Cirkel @keithamus.social · 22h

(You can also do this with classes if you'd prefer): <div class="Component Foo"> <Component class="Component Bar"> <p>Nested child</p> </Component> <p>Child</p> </div> @scope (.Component.Foo) to (.Component) { p { background:red } }

100

Keith Cirkel @keithamus.social · 22h

If you wanted to solve this generally, you could do e.g: <div data-component=Foo> <Component data-component=Bar> <p>Nested child</p> </Component> <p>Child</p> </div> @scope ([data-component=Foo]) to ([data-component]) { p { background:red } } This would avoid styling nested components

210

Keith Cirkel @keithamus.social · 06/10/2026

Curious on your takes also!

000

Keith Cirkel @keithamus.social · 06/10/2026

Name mangling is tricky to debug and can cause unnecessary cache thrashing (depending on toolchain it'll re-compute hashes when JS and/or CSS change). I also don't like non-standard extensions to CSS. I think (though have no empirical practice/data) that css `@scope` would solve the use case.

520

Keith Cirkel @keithamus.social · 06/10/2026

They are decoupled because the CSS remains static and does not get recomputed/re-evaluated by JS when the state changes. Svelte encourages CSS Custom Properties (which separate concerns). Other css-in-js libraries encourage you to use e.g. template literals (which does not separate concerns).

130

Keith Cirkel @keithamus.social · 06/10/2026

No. It's about coupling. You are initially correct that it's an architecture pattern. It is about decoupling presentation layer from the behavioural one. But you go on to say svelte does not have this quality. From what I have seen of svelte, it does have this.

120

Keith Cirkel @keithamus.social · 06/10/2026

You may be misunderstanding separation of concerns then.

130

Keith Cirkel @keithamus.social · 06/10/2026

On one end of the extreme, teams author one single css file and that’s obviously untenable (even engines have different css). On the other people are radically eschewing the entire concept, but that’s against the grain of the platform and so equally untenable.

010

Keith Cirkel @keithamus.social · 06/10/2026

It depends on your interpretation of “strict separation”. I think collocation is fine. Especially say for eg the way svelte handles it, because it still maintains separation of concerns. Even having a string of css in a js file separates the concerns (to a degree).

230

Keith Cirkel @keithamus.social · 06/10/2026

There are problems with how css is authored, organised, & applied. I think many solutions enforce runtime cost or diverge from the standard. CSS tooling is underinvested in (this is why I’m building csskit.rs). But it’s easy to say “our problems will be fixed with an npm install of this library”.

csskit.rs

csskit

140

Keith Cirkel @keithamus.social · 06/10/2026

For the benefit of others in this thread, when talking specifics on GitHub; it wasn't this. See bsky.app/profile/keit.... Some of my colleagues & I spent years making the case against things like css-in-js, bringing numbers, showing empirical data, being "helpful".

030

Keith Cirkel @keithamus.social · 06/10/2026

Most of the receipts are gated (in private repos and discussions), but Primer (GitHub's design decision) does have some receipts here: github.com/primer/react... - a doc from early 2025 showing frog was already boiled. 2 years from decision to blog post shows how much it cost engineering to fix.

github.com

react/contributor-docs/adrs/adr-016-css.md at main · primer/react

An implementation of GitHub's Primer Design System using React - primer/react

030

Keith Cirkel @keithamus.social · 06/10/2026

I don't think css modules are the way forward, and when I say "but we're still not using css. Just use css!" I'm told I'm not being realistic, and so back on the merry-go-round we go. I don't understand how people who keep offering new solutions retain trust.

260

Keith Cirkel @keithamus.social · 06/10/2026

I grieve the post-facto reasoning. Opponents of a "good solution" are deemed wrong until proven right, then that was always the case. styled-components was touted as "good" by proponents, but we had to FAFO, then those same proponents turn and say "that was always bad. But <X> is good!".

130

Keith Cirkel @keithamus.social · 05/10/2026

(Also I think the engineers who wrote the blog post are talented and wonderful people who try to do the right thing, the blame of this does not lie with them but the technical leadership at the time, that’s another story though).

3110

Keith Cirkel @keithamus.social · 05/10/2026

Of course I made all of this abundantly clear at the time but we were already shipping the prototype the prototype had css-in-js. A mistake we could have undone cheaply but instead one that became an engineering challenge the scale at which blog posts get written about.

1110

Keith Cirkel @keithamus.social · 05/10/2026

3. Cache persistence. CSS tends to change a lot less than the JS logic behind it. By locating both in the same file your JS changes bust your CSS cache and at GitHub scale where the JS changes dozens of times a day you’ve just removed some serious cache advantage.

1160

Keith Cirkel @keithamus.social · 05/10/2026

2. Memory. You’re storing copies of css in js, again made worse with the object notation style where you store intermediate representations of the final css written out. At scale of hundreds of components this actually shows up, and is not good.

1160

Keith Cirkel @keithamus.social · 05/10/2026

1. Parse time cost. Because JS is parse-fully-to-run you have to effectively wait for JS to start executing until you can get css. Worse still is that many css-in-js impls will use object notation, not css, meaning your customers are transpiling js to css on their CPUs.

1150

Keith Cirkel @keithamus.social · 05/10/2026

As someone who was on the GitHub team telling them not to do css-in-js I can tell you I wasn’t citing separation of concerns. Instead there were 3 main points I was making as to why it’s a bad idea.

1260

Reposted by Keith Cirkel

ceej @ceej.online · 02/10/2026

incredible news: we’re having the same arguments over and over for the rest of time

663166483

Keith Cirkel @keithamus.social · 02/10/2026

Absolutely! I want to hear about the tiny issues all the way up to the big ones. Let’s fix them all!

110

Keith Cirkel @keithamus.social · 02/10/2026

Why not let forms submit? What do you gain from calling fetch?

311

Keith Cirkel @keithamus.social · 02/10/2026

Web developers! Do you use html forms? Do you let forms submit or just use them for UI and call fetch()? Don’t use forms? Tell me why. Do? Tell me what’s painful. Let’s see if we can fix it!

15154

Reposted by Keith Cirkel

Cory LaViska @cory.laviska.com · 02/10/2026

Wait, now we can have screen reader announcements without ARIA live region hacks?! Baseline 2026 🤯 developer.mozilla.org/en-US/docs/W...

developer.mozilla.org

Element: ariaNotify() method - Web APIs | MDN

The ariaNotify() method of the Element interface queues a string of text to be announced by a screen reader.

1111

Keith Cirkel @keithamus.social · 23/09/2026

I’m no designer but in my testing the images were more usable (recognisable) using this technique than the others. I guess it depends on what you’re aiming to achieve. At the very least I hope it inspires people to come up with something better!

100

Keith Cirkel @keithamus.social · 23/09/2026

@jakearchibald.com pointed out that AVIF has internal blur filters, so I've added that and the result is much nicer, so I think for a lot of images it's now a clear win.

020

Keith Cirkel @keithamus.social · 23/09/2026

I agree the result is less “pleasant”, though some css blur would make that potentially better. However the result is more useful, so it depends on what you want: aesthetic but almost useless, or rough but discernible?

100

Keith Cirkel @keithamus.social · 22/09/2026

I just released avash: www.keithcirkel.co.uk/avash/ It’s like blurhash but uses av1 frame data encode an image, resulting in a (typically) more readable image in the same bytes as a blurhash. github.com/keithamus/av...

keithcirkel.co.uk

avash encoder

3202

Keith Cirkel @keithamus.social · 21/09/2026

We're chatting about Declarative Partial Updates at the Web Frameworks Community Group. Want to join in? discord.gg/fXCngmSwHz

discord.gg

Join the WFCG Discord Server!

The Web Frameworks Community Group (https://www.w3.org/community/wfcg/) | 115 members

040

Reposted by Keith Cirkel

Keith Cirkel @keithamus.social · 19/09/2026

I want Custom Attributes to exist - think Custom Elements (Web Components) but Attributes. I've been working on a proposal, specs, and now a polyfill: www.keithcirkel.co.uk/custom-attri... More coming soon!

keithcirkel.co.uk

Custom Attributes polyfill

79823

Keith Cirkel @keithamus.social · 20/09/2026

Yeah we’d have to avoid hyphens. I think this is a reasonable trade off.

210

Keith Cirkel @keithamus.social · 20/09/2026

I think this avoids running into those concerns as the think you’re extending is the attribute, not a built in.

000

Keith Cirkel @keithamus.social · 19/09/2026

Couldn’t have said it better myself.

140

Keith Cirkel @keithamus.social · 19/09/2026

keithcirkel.co.uk

Custom Attributes polyfill

79823

Reposted by Keith Cirkel

Matt Bors @mattbors.bsky.social · 14/09/2026

It was exactly ten years ago today, on my 33rd birthday, that I posted this comic online.

485297747667

Keith Cirkel @keithamus.social · 06/09/2026

Oh I don’t think I’m good enough to squeeze a game in 13k 😅

100

Keith Cirkel @keithamus.social · 06/09/2026

I have! Those people are wizards.

100

Keith Cirkel @keithamus.social · 06/09/2026

Also (loosely) inspired by another fantastic organising game; Unpacking store.steampowered.com/app/1135690/.... This game is extra special because it tells such a wonderful story and has astounding art & sound direction. A true joy of a game.

store.steampowered.com

Unpacking on Steam

Unpacking is a zen puzzle game about the familiar experience of pulling possessions out of boxes and fitting them into a new home. Part block-fitting puzzle, part home decoration, you are invited to c...

000

Keith Cirkel @keithamus.social · 06/09/2026

I had planned a bigger, multiplayer game for August, but it's proving more complex than I had anticipated, so I did this as something simpler for now. I was inspired by watching my partner play through Librarian store.steampowered.com/app/4197610/.... Go play that game too!

store.steampowered.com

Save 20% on Librarian: Tidy Up the Arcane Library! on Steam

Librarian: Tidy Up the Arcane Library! is a single-player simulation. You need return scattered books to proper places in an Arcane Library. As completed rows of bookshelves, you can learn ability to ...

100

Keith Cirkel @keithamus.social · 06/09/2026

I'm still making 1 game per month. I'm counting this new one for the month of August and you can't stop me. Defrag: Time to defrag some disks. www.keithcirkel.co.uk/defrag/

keithcirkel.co.uk

Disk Defragmenter

Time to drefrag some disks

491