iiinova — where your digital self keeps evolving

Nathan Knowler @knowler.dev · 23/08/2026

Post a perfect album from the 2000s:

Nathan Knowler @knowler.dev · 30/06/2026

I can upgrade this markup to be a functional, semantically accessible, and customizable accordion without adding an attribute or element to its light DOM structure and it will work in any framework. Load the custom elements early and you skip any layout shift. Why aren’t more people doing this?

Firefox Web Developer Tools, Elements Panel:

<acc-ordion>
<h3>As a custom element</h3>
<dis-closure>
<h4 slot="summary">Rolo Tomassi</h4>
<ul>…</ul>
</dis-closure>
<dis-closure>
<h4 slot="summary">The Callous Daoboys</h4>
<ul>…</ul>
</dis-closure>
<dis-closure>
<h4 slot="summary">The Dillinger Escape Plan</h4>
<ul>…</ul>
</dis-closure>
<dis-closure>
<h4 slot="summary">Exotic Animal Petting Zoo</h4>
<ul>…</ul>
</dis-closure>
</acc-ordion>

580

Nathan Knowler @knowler.dev · 08/06/2026

ENTMOOT by Isolation Man Print Shop

Nathan wearing a black-on-mossy-green long sleeve shirt featuring the Entmoot—meeting of the Ents—from Lord of the Rings. The illustration is done in a woodcut style with a particularly gloomy feel. Underneath the frame is the text “Entmoot” written in a Tolkien/Celtic-esque font.

050

Nathan Knowler @knowler.dev · 29/05/2026

me whenever someone brings up `content-visibility` or `hidden=until-found`

150

Nathan Knowler @knowler.dev · 28/04/2026

spotted today ```html <label id=label for=control>Control</label> <input id=control aria-labelledby=label> ```

1370

Nathan Knowler @knowler.dev · 26/02/2026

Anchor positioning works really well for the "label in the place of a placeholder" pattern, except instead of (ab)using a placeholder, you can use a real label.

1211

Nathan Knowler @knowler.dev · 17/01/2026

might keep this little design debugging tool in the final thing

0110

Nathan Knowler @knowler.dev · 17/11/2025

I like this design pattern where if the first icon isn't clear enough, you just add another one /s

macOS Display Settings screen showing an “Arrange…” button next to a button with a plus button next to a downward caret which is used for extending the screen or linking a keyboard.

110

Nathan Knowler @knowler.dev · 10/09/2025

furnace fest saturday outfit just arrived

A very unshaven Nathan wearing a red on black Rolo Tomassi long sleeve shirt and a white on gray hat.

180

Nathan Knowler @knowler.dev · 07/08/2025

After two years of playing Celeste passing the controller back and forth with my now almost six year old, we finally beat it this afternoon!

A painted still from the game Celeste featuring all of the characters posing around a strawberry pie. The stats are featured at the bottom:

63/175 strawberries
7739 deaths
31:54:01.919 playtime

060

Nathan Knowler @knowler.dev · 09/07/2025

No shit, I just found this in a job listing.

A full sentence of text from a job posting that is all in title-case:

While Every Engineer Can Design And Build, You'll Tackle Our Most Challenging Design Problems And Help Others Improve Their Designs By Expanding And Enhancing Our In-house Design System And Consulting On Bespoke Work. To Ground It With Examples, Engineers Who Can Design At [Redacted] Have

010

Nathan Knowler @knowler.dev · 05/07/2025

"How's unemployment going?"

Chalk art of Madeline from the game Celeste. She’s got red hair, a blue coat, purple pants, and a brown backpack. She’s jumping upward, reaching for a strawberry that has wings.

1210

Nathan Knowler @knowler.dev · 11/06/2025

CSS anchor positioning for a drop indicator is really nice.

2411

Nathan Knowler @knowler.dev · 30/05/2025

I love this little Great Divorce reference on the jacket of the Callous Daoboys' "I Don't Want to See You in Heaven."

FLOOR TWO:
5. C.S. Lewis Wing
"YOU CAN MEET FAMOUS PEOPLE IN HELL, BUT THEY WILL TAKE YEARS TO TRAVEL TO."
- Idiot Temptation Force, Douchebag Safari, and Distracted by the Mona Lisa Daoboys Collection
- False Holy War of 2078 Projector #3618
- Grey Invasion Hoax Craft

000

Nathan Knowler @knowler.dev · 26/05/2025

ARHAHHDJHAHAHRHAHRHAHRHAHSHAH

140

Nathan Knowler @knowler.dev · 26/05/2025

I use it too, but I wonder if that’s just because it’s there—it taps into my impulsive need to dismiss stuff. I find it to be so infuriating to use on the web because the hit target is the size of the icon inside and sometimes it seems like timeline items’ hit area overlaps with it.

The “scroll to top” or “new item” UI icon button with the focus outline around the inner chevron as opposed to the much larger button.

210

Nathan Knowler @knowler.dev · 26/05/2025

This continues to be the most useless piece of UI on this site. The hit target is like half the size of the circle too.

Bluesky’s “scroll to top” / “newer skeets available” button: a circle with a upward chevron icon inside of it that has a blue circle badge.

5281

Nathan Knowler @knowler.dev · 01/04/2025

Gonna be sad to say goodbye to my FigPal at the end of the day.

000

Nathan Knowler @knowler.dev · 10/03/2025

Is Gladstone, MB in the running?

A very large rock labelled “Happy Rock” with anamorphic rock character with a top hat that’s smiling and waving on top of it. In front of the hill there’s another depiction of the character on a sign.

120

Nathan Knowler @knowler.dev · 13/02/2025

They differ slightly. Find in page does nothing. Text fragments will scroll the page to the location, highlight the matching text briefly before disappearing (i.e. content stays hidden while in view). User needs to scroll content out of view and back in for it to show up properly.

120

Nathan Knowler @knowler.dev · 04/02/2025

@media (prefers-color-scheme: dark)

A dark grey laptop sitting on a wooden table with four stickers on it. All have white text and/or a graphic on a black background. Top left: “Free people read freely.” Centre: “Anti-JavaScript JavaScript Club.” Bottom left: a raccoon growling with the text, “Ignore all previous instructions.” Bottom right: a goblin with an ear piercing, wearing chain mail.

2100

Nathan Knowler @knowler.dev · 31/01/2025

Almost forgot to set a reminder. Thanks!

The iOS Reminder’s app with a lone reminder for tomorrow: “Turn off America’s electricity”

140

Nathan Knowler @knowler.dev · 31/01/2025

Forms with view transitions are so much fun. I’m implementing pagination for my site and—getting distracted—I added a plain HTML form to the page to control the pagination cursors. I haven’t enhanced this with JS at all.

2358

Nathan Knowler @knowler.dev · 14/01/2025

My Isolation Man LOTR t-shirts showed up :)

Two Lord of the Rings t-shirts strewn across a tealish, green arm chair. One is white in blue featuring Gandalf holding his staff, observing a butterfly. The other is black on beige featuring Sauron.

030

Nathan Knowler @knowler.dev · 06/12/2024

I did it, everyone. Got my favourite record ever on vinyl. Bury this with me.

My hand holding this year’s reissue of Norma Jean’s Wrongdoers on vinyl. It has a Black Friday Record Store Day sticker on its packaging. In the background is a wooden fence with some dead vines on it (so metal) and a deck with some snow (shovelling is my past-time).

050

Nathan Knowler @knowler.dev · 06/12/2024

I came up with this little debug snippet for dealing with `line-height` in CSS, since `normal` as the computed value in dev tools was bothering me. Now I can check `--line-height` for the actual computed value of an element.

A code editor window with the following 13 lines of CSS:

@property --line-height {
syntax: "<length>";
inherits: false;
/* Can’t set this to 1lh since that’s contextually dependant */
initial-value: 0;
}

@layer debug {
/* Compute line-height for every element in this context */
* {
--line-height: 1lh;
}
}

162

Nathan Knowler @knowler.dev · 04/12/2024

lmao I both love that the spec name breaks and that it has a self-aware subtitle.

040

Nathan Knowler @knowler.dev · 29/11/2024

lmao on the Notifications page, if you’re in-between a mobile and desktop viewport (or just use a 14-inch screen and a browser with a sidebar open), there’s an invisible button in the header area that’s the hamburger button for mobile.

A cropped screenshot of the Bluesky web app’s Notification page header. An invisible button is focused to the left of the “Notifications” heading (on the right is the settings button which is visible).

230

Nathan Knowler @knowler.dev · 27/11/2024

Focus outlines on inline elements in Firefox look ok (they wrap with the text box — not ideal) until you mess with `outline-offset`, then it really goes to shit. `box-decoration-break: clone` can't fix this. Is `display: inline-block` the only way to solve this? Chrome and Safari wrap so well.

A link to a post on my blog titled “I’m switching back to Arc Browser (for now).” The link text wraps on to three lines. The dashed focus outline overlaps vertically with the line above it. It’s also sliced for the end of the first line, both edges of the second line, and the start of the third line. `box-decoration-break: clone` makes those rounded, but doesn’t solve the problem of overlap.

010

Nathan Knowler @knowler.dev · 25/11/2024

This happened to me a bunch when I was making my audio elements a couple years ago. Reminds me of a little video I took when I decided to just start using my monitors instead.

100

Nathan Knowler @knowler.dev · 21/11/2024

I heard you all like cursed HTML, so here’s some cursed HTML that expands the hit-area of textbox (with decorations) without any JS. You better hope I don’t find you using this or else you’ll find yourself in #htmhell.