Adam Argyle

Teachin, designin, and buildin on the web all day.

Bluesky https://bsky.app/profile/nerdy.dev

Site: https://nerdy.dev
RSS: https://nerdy.dev/rss.xml

Public Key

npub1y3j422rqevqyhz2jx5729p8l3x8ja3qhcq7w5hfhc730efs606xsq5ymdz

NIP-05 Address

[email protected]

Profile Code

nprofile1qqszge249psvkqzt39fr209zsnlcnrewcstuq082t5mu0ghu5cd8argpz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0dsh3gnqm

Publishing to

relay.damus.io

nos.lol

Author Public Key

npub1y3j422rqevqyhz2jx5729p8l3x8ja3qhcq7w5hfhc730efs606xsq5ymdz

Show more details

Last Notes

2026-04-12 06:05:16 UTC

**Why does AI suck at front-end?**
🗑️ trained on garbage
👀 it can't see
❓ it doesn't know why
🏞️ no environmental control
there's no human v20.2.1 to target. we're a LLM combinatorial explosion
⤷ https://nerdy.dev/why-ai-sucks-at-front-end

2026-03-23 05:22:11 UTC

Try the latest `<color-input>` concept:
⚓️ anchor() progressive enhancement
🤖 workers for color compute
🙈 new animations & interactions
🎨 gamut boundaries, mapping, stretching
☯️ contrast scores
& much more
https://nerdy.dev/rfc-latest-color-input-concept
https://cdn.masto.host/frontendsocial/media_attachments/files/116/276/808/005/593/284/original/246d923af21f9d52.jpg
https://cdn.masto.host/frontendsocial/media_attachments/files/116/276/808/071/092/023/original/f791520d6040eb2d.jpg
https://cdn.masto.host/frontendsocial/media_attachments/files/116/276/808/149/078/031/original/396c62c528d700ba.jpg
https://cdn.masto.host/frontendsocial/media_attachments/files/116/276/808/206/813/705/original/d98585a59cf9a151.jpg

2026-03-07 05:39:17 UTC

- reply

to this, curved and motion blurred
https://codepen.io/argyleink/pen/VYKjPgx
https://cdn.masto.host/frontendsocial/media_attachments/files/116/186/280/120/049/932/original/2a97720c1087a817.mp4

2026-03-07 05:39:17 UTC

how to make #CSS view transitions swoop or have motion blur
or how I learned to help view transitions not always go in straight lines
⤷ https://nerdy.dev/swoop-there-it-is

2026-03-07 05:39:17 UTC

- reply

from this, always straight lines
https://codepen.io/argyleink/pen/NWOEvro
https://cdn.masto.host/frontendsocial/media_attachments/files/116/186/279/380/727/871/original/8d5df14045619e21.mp4

2026-02-27 16:26:32 UTC

#CSS only scroll-driven geometric orbits
https://nerdy.dev/css-scroll-driven-gyro-trig-experiments
https://cdn.masto.host/frontendsocial/media_attachments/files/116/143/520/059/537/268/original/828280c8fcf984c9.mp4

2026-02-06 06:05:50 UTC

```css
img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
```
nice, n' simple
https://codepen.io/argyleink/pen/MYeqYEb

2026-01-23 05:13:09 UTC

#CSS `@custom-media` available behind a flag in Firefox Nightly
Lovely syntax, just lovely.
https://nerdy.dev/custom-media
https://cdn.masto.host/frontendsocial/media_attachments/files/115/942/698/618/767/377/original/d9268a39a413d206.png

2026-01-21 04:36:56 UTC

HUZZAH 🎉
overscroll effects for ALL scrollers in Chrome 145+
https://nerdy.dev/overscroll-effects-on-nested-scrollers-in-all-browsers
https://cdn.masto.host/frontendsocial/media_attachments/files/115/931/219/701/611/305/original/7ddbefeac29eb4b3.mp4

2026-01-11 06:06:49 UTC

ain't that pretty!?
all that support
https://nerdy.dev/have-a-dialog
https://cdn.masto.host/frontendsocial/media_attachments/files/115/874/958/480/010/479/original/64d96d539d1db361.png

2025-11-29 21:52:55 UTC

How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift
https://nerdy.dev/adjust-perceived-typepace-weight-for-dark-mode-without-layout-shift

2025-10-27 06:09:06 UTC

workin on a web component: `<color-input>`
https://cdn.masto.host/frontendsocial/media_attachments/files/115/444/646/031/703/913/original/c0d1bb9ec3f1bb5c.png

2025-09-26 23:31:25 UTC

you get a squircle,
you get a squircle,
i get a squirtle
https://nerdy.dev/squircles #css

2025-08-28 21:07:01 UTC

gradient.style has finally
- come out of beta
- offers multiple background editing
- is open source
🎉 https://nerdy.dev/gradient.style-is-out-of-beta
https://cdn.masto.host/frontendsocial/media_attachments/files/115/108/420/766/656/318/original/a965b9949ecf4f32.png
https://cdn.masto.host/frontendsocial/media_attachments/files/115/108/420/869/572/503/original/bc5e0880799ff271.png
https://cdn.masto.host/frontendsocial/media_attachments/files/115/108/420/983/036/422/original/55064389be63a506.png

2025-08-27 05:58:41 UTC

The making of a #CSS5 HDR enabled gradient tool
a fun peek into the sketching that led to the gradient line UI, the color picker, the overall layout, some math and more!
https://nerdy.dev/the-making-of-gradient.style
https://cdn.masto.host/frontendsocial/media_attachments/files/115/099/191/764/860/578/original/0df4c76ffff0eb01.mp4

2025-08-25 16:57:56 UTC

#CSS
✅ contrast-color()
✅ control-value()
✅ sibling-index()
✅ scroll-state()
✅ mixins/functions
✅ @starting-style
We chat these and much more over on the @npub1u9r…fgs4 show
⤷ https://nerdy.dev/working-draft-show-revision-672

2025-07-29 18:42:55 UTC

VisBug comes preinstalled in the Orion browser 🤘🏻💀
https://nerdy.dev/orion-ships-with-visbug-as-the-design-tools
https://cdn.masto.host/frontendsocial/media_attachments/files/114/937/987/720/940/144/original/0ed89633c1202ea6.mp4

2025-07-28 22:54:49 UTC

a quick prototype sprint on an LLM chat interface
✅ view transitions
✅ readablestreams
✅ flow control
✅ light/dark
https://nerdy.dev/llm-chat-prototype
https://cdn.masto.host/frontendsocial/media_attachments/files/114/933/310/242/937/505/original/c5b6e12d1eae7cee.mp4

2025-07-27 04:18:15 UTC

`-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

2025-07-04 22:05:50 UTC

some of my UI work
https://nerdy.dev/sizzle-rizzle
https://cdn.masto.host/frontendsocial/media_attachments/files/114/797/231/179/929/664/original/abb4fcf1b7c55bba.mp4

2025-06-13 22:22:55 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/114/678/387/770/978/161/original/9c5ac3c0921222b8.mp4

2025-05-27 04:28:07 UTC

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

2025-05-22 20:58:05 UTC

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
https://cdn.masto.host/frontendsocial/media_attachments/files/114/553/484/718/771/653/original/ee3fb51646ed0567.png

2025-05-16 16:37:31 UTC

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.
https://cdn.masto.host/frontendsocial/media_attachments/files/114/518/483/801/637/007/original/5101b6ab2c9d293b.mp4

2025-04-23 17:35:32 UTC

while on garden leave…
I suppose I'll tend to a #CSS Zen Garden
⤷ https://nerdy.dev/zen-garden-leave

2025-04-11 18:06:07 UTC

G̶o̶o̶g̶l̶e̶r̶… ex-Googler.
https://nerdy.dev/ex-googler

2025-03-31 19:59:47 UTC

`<span>`
more like
`<spandex>`

2025-03-24 21:32:21 UTC

in Chrome 135 - Tomorrow Mar 26, 2025
customize all the parts of a `<select>` with #CSS!
⤷ https://nerdy.dev/customize-a-select
https://cdn.masto.host/frontendsocial/media_attachments/files/114/219/538/329/114/322/original/536c596eed2abdd3.mp4

2025-03-20 20:25:39 UTC

- reply

scrollbars and any arrow buttons they offer arent HTML elements, these scroll affordances are very similar to those, just easier to style and customize.
v2 of the spec will allow you to "bring your own buttons and links" that the browser will wire up as if they're scroll buttons and markers. but to keep the accessibility easy (aka less foot guns) having the browser manage them has a lot of userland benefits.
and yep, we're working on JS events and integrations more in v2 also!

2025-03-20 16:40:11 UTC

#CSS only carousels arrive in Chrome 135
⤷ https://nerdy.dev/css-carousel-in-chrome-135
https://cdn.masto.host/frontendsocial/media_attachments/files/114/195/733/958/432/106/original/1394253c4a891d9c.mp4

2025-03-19 15:57:15 UTC

Rainbow drop shadow?
I gotchu.
⤷ https://nerdy.dev/rainbow-shadow-button

2025-03-17 00:33:14 UTC

CSS, rad folks, virtual attendance?
Smashing Meets #CSS:
@npub1mzk…l99l
⤷ https://nerdy.dev/smashing-meets-css-2025

2025-03-13 21:13:32 UTC

amazing what a few lines of #CSS can do
https://codepen.io/argyleink/pen/LEYOgxy
https://cdn.masto.host/frontendsocial/media_attachments/files/114/157/182/839/212/382/original/0d2725a5c5a02071.mp4

2025-03-11 00:50:40 UTC

#CSS sibling-index() and sibling-count()
available Chrome Canary with experiments enabled!
`transition-delay: calc(sibling-index() * .1s);`
or
```css
--hue: calc(sibling-index() * 50);
color: oklch(70% 70% var(--hue));
```
more info and a Codepen to fork
⤷ https://nerdy.dev/sibling-index
https://cdn.masto.host/frontendsocial/media_attachments/files/114/141/042/700/703/366/original/a70154b4d27482b0.mp4

2025-03-06 23:00:30 UTC

- reply

example of perspective in a view transition
https://codepen.io/argyleink/pen/qEWeYzd
https://cdn.masto.host/frontendsocial/media_attachments/files/114/117/968/144/727/728/original/44e694358ca8c445.mp4

2025-02-27 23:06:47 UTC

want 3D perspective in your view transitions?
https://nerdy.dev/view-transitions-3d-perspective
https://cdn.masto.host/frontendsocial/media_attachments/files/114/078/357/635/645/439/original/34f1a920312d4313.png

2025-02-20 18:15:42 UTC

Can emoji's save us from naming hell?
⤷ https://nerdy.dev/css-emoji-convention

2025-02-06 18:40:53 UTC

30 #CSS scroll driven animation examples
which is your favorite?
- z-stack and slither are mine
https://nerdy.dev/scroll-driven-animations-notebook

2025-01-30 06:29:10 UTC

- reply

cc @npub1jpy…yfwv
the webring got a redesign too 🙂

2025-01-30 06:27:52 UTC

new <footer>
nerdy.dev
https://cdn.masto.host/frontendsocial/media_attachments/files/113/915/882/563/467/280/original/cf5b7e36fbdb3e56.mp4

2025-01-17 16:52:13 UTC

#CSS advanced `attr()`
Unlocking new ways to integrate with CSS from your HTML
https://nerdy.dev/advanced-attr
https://cdn.masto.host/frontendsocial/media_attachments/files/113/844/729/041/306/207/original/a17648f7d0c5b92a.mp4

2025-01-13 18:23:49 UTC

- reply

could give mine a shot?! https://github.com/argyleink/morphull
astro based, each slide gets a page made (so deep links are easy) and all the view transitions are pretty much automated (but can be customized).

2025-01-06 17:10:40 UTC

**Focus By Demotion**
a use case for #CSS `:hover > :not(:hover)`
https://nerdy.dev/hover-not-hover-sorry-not-sorry
https://cdn.masto.host/frontendsocial/media_attachments/files/113/782/511/666/097/417/original/b85b3f01b072eb24.mp4

2024-12-30 21:12:27 UTC

#CSS feature faceoff:
scroll triggered stuck nav (left)
vs
scroll driven animation nav (right)
which do you prefer?
try it
https://codepen.io/argyleink/pen/gbYGgrB
(use Canary for the scroll-state() support)
https://cdn.masto.host/frontendsocial/media_attachments/files/113/743/830/624/081/829/original/119c1ea2ab9b6663.mp4

2024-12-20 22:44:19 UTC

- reply

Oh poo, I thought they supported @property now
https://caniuse.com/mdn-css_at-rules_property

2024-12-20 22:30:55 UTC

Putting AI in your product? You're gonna need #CSS gradient text animations (if you want to be cool)
So here, a recipe!
https://codepen.io/argyleink/pen/vEBmZNw
↪ https://nerdy.dev/animated-gradient-text
https://cdn.masto.host/frontendsocial/media_attachments/files/113/687/516/393/721/471/original/992e942ba7487507.mp4

2024-12-05 18:31:59 UTC

- reply

direct link to CSS Wrapped 2024
https://chrome.dev/css-wrapped-2024/

2024-12-05 18:31:58 UTC

**CSS Wrapped 2024**
one stop shop for the Chrome #CSS features launched in 2024!
https://nerdy.dev/css-wrapped-2024
https://cdn.masto.host/frontendsocial/media_attachments/files/113/601/636/237/271/194/original/7257c9cb38065116.mp4

2024-12-04 17:03:34 UTC

7 years at Google today 🎉
https://nerdy.dev/7-years-at-google

2024-11-14 23:52:21 UTC

Take my `<dialog>`
this one is centered and pushes the page back exposing a nice gradient. also has light-dismiss but is more subtle about the hint.
https://nerdy.dev/have-a-dialog
https://cdn.masto.host/frontendsocial/media_attachments/files/113/483/994/099/901/112/original/91997bcb6c3c8648.mp4

2024-11-12 21:31:39 UTC

rebeccapurple won by a long shot 💜
voting is closed.
a new repo appears.
what's next?
https://nerdy.dev/a-community-css-logo

2024-10-30 18:24:46 UTC

31 #CSS features in 50m
watch on YouTube
https://www.youtube.com/watch?v=D79TND9w_AY&list=PLuZ_sYdawLiWenx-X315dfZNOaliVnSTY&index=17
OR
read the blog post for quick links to subjects you're interested in
⤷ https://nerdy.dev/amazing-css-in-2024

2024-10-29 21:17:05 UTC

after tons of iteration we're excited to share RC4 of the CSS logos, and we want the community to help us pick the final color:
https://github.com/CSS-Next/css-next/issues/105#issuecomment-2445341089
Vote by reacting to the comment!
https://cdn.masto.host/frontendsocial/media_attachments/files/113/392/779/951/535/627/original/614acaf0282ba6bb.png
https://cdn.masto.host/frontendsocial/media_attachments/files/113/392/779/950/581/107/original/879f762ced8ef193.png

2024-10-03 19:27:41 UTC

- reply

it's great! we'll feel like we collaborated on it and got to get all the good/bad ideas out together 🙂

2024-10-03 19:27:06 UTC

- reply

thanks for these! looks a lot like our earlier passes too. i'll add them to the wake of iterations 🙂

2024-10-03 17:14:38 UTC

- reply

there wont be anything stopping user variants!
we just want to make sure we have simple, legible, easy to use base logos.

2024-10-03 16:15:02 UTC

- reply

the bulk of our 1st pass on ideas was in this rhelm, and we felt it both: constrained the width, which CSS being 3 letters was already feeling crunched inside, and the other thing was it wasnt giving the number enough of a moment to shine and be distinguished from the base logo
but keep the ideas flowin!
here's the link if you want it! `#E1137C`

2024-10-03 15:39:17 UTC

- reply

lolol love it

2024-10-03 15:20:46 UTC

- reply

i'm pretty sure we shouldnt spin the text

2024-10-03 14:23:15 UTC

- reply

like this?
https://cdn.masto.host/frontendsocial/media_attachments/files/113/243/939/709/273/337/original/a6810148e23ce583.png

2024-10-02 17:40:56 UTC

- reply

the one's that come with the font were used in all the previous versions that folks didnt like. consistent feedback that the numbers didnt match.

2024-10-02 17:34:36 UTC

- reply

if you're gonna pick this variant to show the number, the number should have it's own nice moment

2024-10-02 17:16:38 UTC

- reply

subtle text shadow works, but isnt great for the dark variant. also feels like it doesnt add as much emphasis to the number?
https://cdn.masto.host/frontendsocial/media_attachments/files/113/238/959/142/173/454/original/c2ce624891232438.png

2024-10-02 16:22:36 UTC

- reply

thoughts on this? https://elk.zone/front-end.social/@argyleink/113238742484406025

2024-10-02 16:22:07 UTC

- reply

thoughts on this update y'all?
https://elk.zone/front-end.social/@argyleink/113238742484406025

2024-10-02 16:21:25 UTC

- reply

the numbers still werent right, so here's an updated attempt
- long shadow increases contrast and creates depth
- number isnt wider than 1 char of CSS
- number isnt taller than 1 char of CSS
- numbered variant calls subtle attention to the number
thoughts?
https://cdn.masto.host/frontendsocial/media_attachments/files/113/238/736/441/871/483/original/8dabf8ff6d0765c2.png
https://cdn.masto.host/frontendsocial/media_attachments/files/113/238/736/534/798/159/original/c0e32fa3da84f3ce.png

2024-09-30 19:56:58 UTC

- reply

totally, we all agreed the big number was the best, but also the least legible. we agreed it'd be great for a book or poster at an event
i like your inner radius matching and overall size. ill drop it into the figma file for when we go making another iteration! ty!

2024-09-30 19:41:28 UTC

- reply

we tried putting them into a shape and folks tended to feel like the numbers were small or became too bulky https://mastodon.social/@itsjavi/113161164893645002
but, that doesnt mean we cant play with an alt font or something, to improve the balance!

2024-09-30 16:55:52 UTC

- reply

i made the same note! we should figure out a way to ensure there aren't strange gaps. gonna take some small tweaks to the numbers, but totally doable. ty for the confirmation feedback!

2024-09-30 16:16:10 UTC

- reply

**CSS Logo - RC1**
- Open Source font (Dinish)
- More exciting pink
- accessible variants that want to use the level number
thoughts? vibes?
we'll eventually open source all this and folks can have fun making variants of their own: adding gradients, customizing the number, etc. but we feel the baseline should provide:
- solid defaults
- accessible defaults
- light/dark variants
- small variants for buttons/sidebars/etc
https://cdn.masto.host/frontendsocial/media_attachments/files/113/227/384/075/426/620/original/57517c243bbc6218.png
https://cdn.masto.host/frontendsocial/media_attachments/files/113/227/396/440/649/724/original/17ccf1f473f1e5e0.png

2024-09-25 16:40:26 UTC

Transition reveal a password field with #CSS `interpolate-size` and `:has()`
Codepen
https://codepen.io/argyleink/pen/BaXyJRL
⤷ https://nerdy.dev/interpolate-size
https://cdn.masto.host/frontendsocial/media_attachments/files/113/199/178/914/367/740/original/2318912cb26a5f4b.mp4

2024-09-24 17:24:17 UTC

Make a card, dialog, or overlay pop with an animated gradient box shadow type effect
try it on Codepen
https://codepen.io/argyleink/pen/abezozz
⤷ https://nerdy.dev/animated-radial-gradient-box-shadow-effect
https://cdn.masto.host/frontendsocial/media_attachments/files/113/193/685/168/295/290/original/a84a158295f904b2.mp4

2024-09-22 16:57:00 UTC

What do you call an emotionally in tune web typographer?
An empath

2024-09-19 22:09:31 UTC

a customized `<select>` with:
- transitions
- anchor() with flipping
- custom content in the `<selectedoption>`
- spring easings
- scrollable picker
- sticky optgroup
- custom icons
- light/dark
⤷ https://nerdy.dev/custom-select-with-transitions-boilerplate
https://cdn.masto.host/frontendsocial/media_attachments/files/113/166/497/084/145/863/original/a9075d82f1c26983.mp4

2024-09-19 18:27:24 UTC

learn about #CSS `interpolate-size: allow-keywords;` from @npub159n…rz7e on the Chrome Blog
Animate to height or width `auto`!
https://developer.chrome.com/docs/css-ui/animate-to-height-auto
https://cdn.masto.host/frontendsocial/media_attachments/files/113/165/625/285/105/662/original/d863b9b550f8f93f.mp4

2024-09-19 17:51:40 UTC

Custom `<select>` boilerplate with transitions
You're going to want this #CSS when you go to kickoff customizing select elements.
⤷ https://nerdy.dev/custom-select-with-transitions-boilerplate

2024-09-18 22:24:18 UTC

- reply

just a demo of the logo in solid colors for light/dark themes/buttons/components

2024-09-18 22:12:01 UTC

- reply

that sounds like a fun community or custom thing someone could do!
but for like your editor, keeping a consistent color will help you identify files. we can't wait to replace the "3" shield used everywhere and have CSS join the square logo fam

2024-09-18 21:46:50 UTC

thoughts?!
https://cdn.masto.host/frontendsocial/media_attachments/files/113/160/749/058/209/074/original/ba4253b90b42c2b0.png

2024-09-17 18:42:17 UTC

Fuck this selling point
https://cdn.masto.host/frontendsocial/media_attachments/files/113/154/359/232/714/983/original/76452805f92b5016.png

2024-09-16 21:51:39 UTC

Bring a **rad** `clip-path` transition to your light/dark toggle switch with a progressively enhanced `view transition`.
Try it
https://cdpn.io/pen/debug/NWZZPLZ
Source
https://codepen.io/argyleink/pen/NWZZPLZ
https://nerdy.dev/light-dark-view-transition-with-clip-path
https://cdn.masto.host/frontendsocial/media_attachments/files/113/149/440/073/303/996/original/e7b65c9ba0615a17.mp4

2024-09-09 09:46:15 UTC

sad… developers have more empathy for the machine (network, main thread, perf metrics, loading times, etc etc etc)…
than they do for humans.
imagine if all of that brain power was spent on empathizing for users.
- accessibility wouldn't be an after thought
- UI wouldn't be annoying
- and more
but no;
more time is spent giving the machine what it wants and what keeps it happy

2024-08-28 23:03:34 UTC

- reply

another example. without trim, there's dead space above and below the lines of text ✂️
https://cdn.masto.host/frontendsocial/media_attachments/files/113/042/140/662/298/348/original/5486b162e8fe0084.png

2024-08-28 23:02:39 UTC

- reply

currently behind a flag in Canary and Safari!
here's boxes with equal sides of padding. the ones actually in the center are trimmed to the cap size of letters
https://cdn.masto.host/frontendsocial/media_attachments/files/113/042/137/488/612/445/original/e43f0ff1b3600bc4.png

2024-08-28 22:52:41 UTC

I'm in love, and pretty sure you will be too:
CSS `text-box`
more demo's and a one-liner you're going to include in your CSS fo sho, on my site
⤷ https://nerdy.dev/text-box-ftw
https://cdn.masto.host/frontendsocial/media_attachments/files/113/042/091/381/203/515/original/b8275c52cf8c2761.png

2024-08-26 15:24:29 UTC

- reply

we wont be calling these drop-downs anymore tho, with anchor() auto-flip it…
**might be a drop-up!**
video alt:
4 customized <select> elements shown from Chrome Canary. each has a custom picker flyout, flyout flips to stay in view, keyboard accessibility, and animation
https://cdn.masto.host/frontendsocial/media_attachments/files/113/029/011/193/386/475/original/42c847c73aaa10a0.mp4

2024-08-26 15:04:59 UTC

we're 5 years into getting a customizable `<select>` 😅

2024-08-22 22:28:32 UTC

just fixed a huge perf issue on my site by removing some instances of `:has()`!
went from ~2s style recalc
to ~7ms style recalc
definitely try out the new selector stats feature of devtools!!

2024-08-18 23:00:29 UTC

- reply

I read all these today too.
My neck hurts from nodding along

2024-08-15 21:02:51 UTC

- reply

check the pen again for more brain candy;
we figured out how to customize the colors AND make it adapt to light/dark user preferences 🤘🏻

2024-08-15 15:27:52 UTC

- reply

learn how the author (Heikki Lotvonen) accomplished this in this blog post
https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/

2024-08-15 15:27:52 UTC

no pain syntax highlighting‽
- no JS
- no markup transformation or tokenization
how?
via **Colr Fonts** 💪
try it!
https://codepen.io/argyleink/pen/GRbyNNv
https://cdn.masto.host/frontendsocial/media_attachments/files/112/966/737/940/806/154/original/e15175393a47b52f.png