Nathan Knowler's Avatar

Nathan Knowler

@knowler.dev

Building web stuff and design systems. Focused on accessibility, progressive enhancement, and web components. At the intersection of CSS and the Shadow DOM. he/him Métis/settler Treaty 1/wpg https://knowler.dev https://sunny.garden/@knowler

1,575
Followers
1,006
Following
2,535
Posts
24.04.2023
Joined
Posts Following

Latest posts by Nathan Knowler @knowler.dev

I'm the type of person who loves open source not because I can use it for something, but because I can learn something from it.

06.03.2026 20:41 👍 9 🔁 1 💬 0 📌 0

gosh, iCloud Mail is annoying… first as of recently supporting dark mode, I noticed it's sending all my emails with white text even in light mode… then when I try to resend something, it changes the email I'm sending with.

06.03.2026 18:18 👍 0 🔁 0 💬 0 📌 0

Pair that a shadow DOM template for the interest target, anchor positioning, and you've got a pretty powerful dynamic popover solution without using a framework.

06.03.2026 15:37 👍 0 🔁 0 💬 0 📌 0

A potentially useful pattern depending on the fate of Interest Invokers is using a single interest target for multiple interest sources, then leveraging `beforetoggle` to fill the content of the target based on the source.

06.03.2026 15:37 👍 2 🔁 0 💬 1 📌 0

My condolences to anyone with a windshield this morning.

06.03.2026 14:44 👍 1 🔁 0 💬 0 📌 0

I love how people who use X occasionally pop up in Bluesky/Fedi wanting people to act "normal" about AI, meanwhile they're totally acting normal about Nazis and CSAM.

06.03.2026 14:20 👍 5 🔁 0 💬 0 📌 0

album.link/ca/i/1876304...

06.03.2026 13:16 👍 0 🔁 0 💬 0 📌 0

*Dransfeldt

05.03.2026 17:35 👍 0 🔁 0 💬 0 📌 0

you should talk to Cory Dransfedlt www.coryd.dev

05.03.2026 17:34 👍 0 🔁 0 💬 2 📌 0
Cyclic Dependency Space Toggles Over the past few years, I wanted to be able to select a value from a list in CSS by toggling a single custom property. We have the “space toggle” for booleans, and hopefully, one day, we’ll get style...

Here’s @kizu.dev’s article: kizu.dev/cyclic-toggl...

(I have used this technique in production for multiple jobs now)

05.03.2026 17:24 👍 2 🔁 0 💬 0 📌 0

This repo is very experimental, but this is the general idea:

Setting state custom property with selector: github.com/knowler/doom...

Applying styles based on state: github.com/knowler/doom...

05.03.2026 17:22 👍 1 🔁 0 💬 1 📌 0

What I like to do is set some “state” custom properties with the selectors that match that state (e.g. `--button-state`), then use something like @kizu.dev’s cyclic toggles or, eventually `if()`, to apply the styles.

05.03.2026 17:21 👍 1 🔁 0 💬 1 📌 0

😂 I’ve always set up my default search queries to filter it out of my results.

04.03.2026 12:24 👍 0 🔁 0 💬 0 📌 0

I wish I could filter the bullshit and slop web. I miss when I could look up something and find a web page that was genuinely architected to share careful acquired knowledge and not for SEO.

04.03.2026 03:47 👍 26 🔁 0 💬 3 📌 1

too dim?

04.03.2026 02:06 👍 0 🔁 0 💬 0 📌 0

inset: unset

04.03.2026 02:04 👍 27 🔁 0 💬 2 📌 0

Not yet… 😏

03.03.2026 20:05 👍 1 🔁 0 💬 0 📌 0

No Problem Mail eXchange

03.03.2026 20:03 👍 7 🔁 0 💬 0 📌 0

Anyway, I might drop a blog post about my involvement later… today or this week. I hope I didn't jinx it.

03.03.2026 19:58 👍 6 🔁 0 💬 0 📌 0

There's a lot of work to do—more than I can do alone—and I've been very grateful for a whole bunch of people who have helped push code when I couldn't or who have taken the initiative to improve the accessibility themselves. The only way to do this is as a community.

03.03.2026 19:58 👍 6 🔁 0 💬 2 📌 0

Trying to manage accessibility on a project like this has been kinda like drinking water out of a firehose. 😅 Luckily, it's slowing down as we have a clearer understanding of what it is that we're building. And I don't have a job anymore so I've got a lot more time (sponsor me, maybe?).

03.03.2026 19:58 👍 6 🔁 0 💬 1 📌 0
Preview
npmx - Package Browser for the npm Registry a fast, modern browser for the npm registry. Search, browse, and explore packages with a modern interface.

I've had a whirlwind of a morning and totally missed all of the npmx alpha launch stuff, but, uh ya, come check out what we're building and maybe get involved if you feel inclined. I've joined as a maintainer with a focus on accessibility.

npmx.dev

03.03.2026 19:58 👍 18 🔁 1 💬 3 📌 0

The boulder is easier to push up the mountain with others at your side. Community education seems to be a good way to do it, though I think the fruits of that have yet to be realized in this situation. Nevertheless, I’m glad there is optimism about it.

03.03.2026 17:09 👍 0 🔁 0 💬 0 📌 0

I do want to be completely transparent that there are accessibility issues and some more glaring than others (e.g. non-text contrast, default search behaviour on input, a number of incorrectly coded controls), but it is refreshing to not constantly feel like Sisyphus.

03.03.2026 17:09 👍 5 🔁 0 💬 3 📌 0
Preview
a man wearing glasses is holding a white ipod in his hand Alt: Steve Jobs holds a first generation iPod Nano
02.03.2026 19:18 👍 3 🔁 0 💬 0 📌 0

“Bob and 835 of your other colleagues are playing Zip. Join in on the fun.”

02.03.2026 03:06 👍 1 🔁 0 💬 0 📌 0
A row of square arches made of snow on a frozen river under a blue sky.

A row of square arches made of snow on a frozen river under a blue sky.

01.03.2026 01:59 👍 16 🔁 0 💬 0 📌 0

It's fair to say that I should not be made responsible of code formatting. Every extra space or new line, missing quotes in attributes is a reminder of the unforgiving future that could have been (XHTML). Let the grace of HTML embrace you(r code).

27.02.2026 16:45 👍 4 🔁 0 💬 0 📌 0

Thank you, Stephen!

27.02.2026 15:51 👍 0 🔁 0 💬 0 📌 0

Light theme… that’s what my sunglasses are for /j

27.02.2026 15:44 👍 1 🔁 0 💬 0 📌 0