Adam Argyle

I'll be your huckleberry;
when you need someone who does both.

https://nerdy.dev/systems-and-users

@reflex ☹️

VisBug comes preinstalled in the Orion browser 🤘🏻💀

https://nerdy.dev/orion-ships-with-visbug-as-the-design-tools

a quick prototype sprint on an LLM chat interface

✅ view transitions
✅ readablestreams
✅ flow control
✅ light/dark

https://nerdy.dev/llm-chat-prototype

<system-color> - CSS | MDN The CSS data type usually reflects the default color choices used for the different parts of a web page.

`-webkit-focus-ring-color`
`-moz-focus-ring-color`

^ the adaptive "system variable focus outline" color you can use to look integrated when using `color-scheme: light dark`

would be nice to not have the prefix, just be part of this https://developer.mozilla.org/en-US/docs/Web/CSS/system-color

some of my UI work

https://nerdy.dev/sizzle-rizzle

Kiss My CSS tee (The expression “Kiss my CSS” in a tall display font, between curly brace characters, and accompanied by a lipstick stain.)

@AmeliaBR @kizu It's a @heydon special you can snag from his rad online clothing store

https://webbed-briefs.teemill.com/product/kiss-my-css-tee/

A photo of Adam standing near a podium with “CSS” visible on it and an open MacBook with various stickers on its lid. Adam is looking at the MacBook's display and is wearing a black t-shirt, with something starting from “Kiss My” on it, followed by lips. There is a purple “CSS logo” pin on the t-shirt. A full sleeve tattoo is visible on Adam's left hand.

A photo of Adam giving a talk and gesticulating near a podium while looking at the audience. A full “CSS Day” logo is now visible on the podium, and a full “Kiss My CSS” print on Adam's t-shirt, with curly brackets around this text.

A photo of Adam sitting on a chair, holding a vase with various colorful flowers and smiling. There are more tattoos visible on Adam's arms and legs.

A photo of Adam sitting, talking, and gesticulating, showing something with his fingers.

Photos of @argyleink@front-end.social giving a talk on the first day of #CSSDay (5 June 2025).
📷 OM-3 & 75 mm ƒ1.8

Recreating the Nintendo Switch Homescreen scroll UX

- 90% done with CSS
- a li'l JS for sounds, vibrations n' taps

https://nerdy.dev/nintendo-switch-homescreen-css-recreation

An image with a caption is showed in two styles, one with a semi-transparent overlay of the caption and one with the caption underneath the image with no transparency used at all.

It's not a challenge to design for reduced transparency, it's an opportunity.

https://nerdy.dev/prefers-reduced-transparency

- adaptive frosted glass
- adaptive captions

Adaptive Frosted Glass ...

@kizu followed quickly by this adaptive frosted glass

https://codepen.io/argyleink/pen/qBmJyvv

prefers-reduced-transparency CSS image captions ...

@kizu one of my favorite examples of reduced transparency I've made 🤓

https://codepen.io/argyleink/pen/YzBKBaR

I'm still sad that the native CSS color functions do not work like in preprocessors in certain aspects, but with custom functions, we will be finally free

@function --rgba(--c <color>, --a: 1) {
result: rgb(from var(--c) r g b / var(--a));
}

Off to CSS Day; see ya there‽

#cssday: ya gonna be there?

https://nerdy.dev/off-to-css-day-2025

No job?
Find a friend with a boat.

https://nerdy.dev/mt-rainier-boat-banjo

tab-size ...

https://codepen.io/kizu/pen/qEddYOO

code {
--captured-length: 100cqi;
--captured-length2: 20ch;
--ratio: tan(atan2(
var(--captured-length),
var(--captured-length2)
));
tab-size: round(up, var(--ratio), 2);
}

```css
textarea {
scrollbar-width: thin;
}
```
thoughts?

A horse on a boat on the ocean holding a kitten

3 Unintuitive #CSS Layout “Solutions”

```
min-width: 0?
flex-shrink: 0?
repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
```

wat?
https://nerdy.dev/3-unintuitive-layout-solutions

workin on the design for my slides at CSS Day

3D view transitions between pages/slides?
li'l bit-o-glitch and some split text.
i'm diggin it.

Tag, I'm It · May 12, 2025 Blogging about blogging.

Tag I'm It
a blog post about blogging

https://nerdy.dev/blogging-about-blogging

WebDev Challenge - S2E2 · April 29, 2025 Lane Wagner and I take on 2 other teams in a 4 hour challenge to make a 2+ player game using Temporal.

S2E2 - WebDev Challenge

@wagslane and I team up and rock vanilla Go, CSS and some JS glue to make a flappybird-like game you control with your face.

https://nerdy.dev/webdev-challenge-s2e2

got tired of seeing fugly `<details>`

try this one https://nerdy.dev/nice-details

while on garden leave…
I suppose I'll tend to a #CSS Zen Garden

⤷ https://nerdy.dev/zen-garden-leave

G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025 My role at Google was eliminated.

G̶o̶o̶g̶l̶e̶r̶… ex-Googler.

https://nerdy.dev/ex-googler

Smells like an attack vector for people into that

Chris Coyier Co-Founder of CodePen

#CSS `::scroll-button()`, `::scroll-marker`, Carousel Configurator, and Carousel Gallery with @chriscoyier and @davatron5000 on @shoptalkshow!

https://nerdy.dev/carousels-on-shoptalk

@kizu huge congrats! you've done so much amazing research, you were key in enabling this, thank you!

Not a joke: CSSWG has resolved to start working on fit-to-width text in css-fonts-5!

https://github.com/w3c/csswg-drafts/issues/2528#issuecomment-2769621512

#CSS #Typography

`<span>`

more like

`<spandex>`

okLCH explosions

https://codepen.io/argyleink/pen/dPyqgoe