Made a lil' library:
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
January 12, 2026 at 6:52 PM
Made a lil' library:
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
I like this setting for VS Code from Ben Frain. JUST show the vertical line for the current indentation, not all of them
```
"workbench.colorCustomizations": {
"editorIndentGuide.background1": "#00000001",
"editorIndentGuide.activeBackground1": "#ff9900"
}
```
benfrain.com/vs-code-high...
```
"workbench.colorCustomizations": {
"editorIndentGuide.background1": "#00000001",
"editorIndentGuide.activeBackground1": "#ff9900"
}
```
benfrain.com/vs-code-high...
January 10, 2026 at 5:19 PM
I like this setting for VS Code from Ben Frain. JUST show the vertical line for the current indentation, not all of them
```
"workbench.colorCustomizations": {
"editorIndentGuide.background1": "#00000001",
"editorIndentGuide.activeBackground1": "#ff9900"
}
```
benfrain.com/vs-code-high...
```
"workbench.colorCustomizations": {
"editorIndentGuide.background1": "#00000001",
"editorIndentGuide.activeBackground1": "#ff9900"
}
```
benfrain.com/vs-code-high...
you ever take such a big shit that science can't handle it and requests you shit smaller
December 15, 2025 at 1:05 PM
you ever take such a big shit that science can't handle it and requests you shit smaller
chris here reporting live from the local McDonalds.
The Grinch Meal ($13.59) for a Big Mac, Large Fries, and Large Drink *also* includes “Grinch Salt” (dill pickle seasoning with a special shaker bag) *and* pair of cute novelty socks.
This is the kind of holiday fast food innovation we deserve.
The Grinch Meal ($13.59) for a Big Mac, Large Fries, and Large Drink *also* includes “Grinch Salt” (dill pickle seasoning with a special shaker bag) *and* pair of cute novelty socks.
This is the kind of holiday fast food innovation we deserve.
December 5, 2025 at 1:35 AM
chris here reporting live from the local McDonalds.
The Grinch Meal ($13.59) for a Big Mac, Large Fries, and Large Drink *also* includes “Grinch Salt” (dill pickle seasoning with a special shaker bag) *and* pair of cute novelty socks.
This is the kind of holiday fast food innovation we deserve.
The Grinch Meal ($13.59) for a Big Mac, Large Fries, and Large Drink *also* includes “Grinch Salt” (dill pickle seasoning with a special shaker bag) *and* pair of cute novelty socks.
This is the kind of holiday fast food innovation we deserve.
@stefanjudis.com lol merrrrrry christmas
November 19, 2025 at 3:44 AM
@stefanjudis.com lol merrrrrry christmas
Just seeing that `animation-timing-function: steps(5);` is a thing that can work with scroll-driven-animations too.
Here these hr's made of dots on 5 random rows come together (or break apart) in 5 steps.
Here these hr's made of dots on 5 random rows come together (or break apart) in 5 steps.
November 14, 2025 at 6:45 PM
Just seeing that `animation-timing-function: steps(5);` is a thing that can work with scroll-driven-animations too.
Here these hr's made of dots on 5 random rows come together (or break apart) in 5 steps.
Here these hr's made of dots on 5 random rows come together (or break apart) in 5 steps.
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
November 14, 2025 at 4:22 PM
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Ya'll got a way to block text messages (Apple ecosystem) with certain keywords? I get one from SmileDirectClub / SmileSet every day of my life and cannot find any way to stop them.
November 13, 2025 at 6:29 PM
Ya'll got a way to block text messages (Apple ecosystem) with certain keywords? I get one from SmileDirectClub / SmileSet every day of my life and cannot find any way to stop them.
I love that this actually works.
*Oh yeah, is your list actually UNordered? Prove it.*
*Oh yeah, is your list actually UNordered? Prove it.*
October 31, 2025 at 3:24 PM
I love that this actually works.
*Oh yeah, is your list actually UNordered? Prove it.*
*Oh yeah, is your list actually UNordered? Prove it.*
This is an amazing email. Just a banger. My favorite little touch is the lack of an unsubscribe link.
October 31, 2025 at 2:22 PM
This is an amazing email. Just a banger. My favorite little touch is the lack of an unsubscribe link.
Gotta admit I'm pretty stoked about the chrome-devtools-mcp.
github.com/ChromeDevToo...
Wired it up to @zed.dev pretty easily.
github.com/ChromeDevToo...
Wired it up to @zed.dev pretty easily.
October 27, 2025 at 9:57 PM
Gotta admit I'm pretty stoked about the chrome-devtools-mcp.
github.com/ChromeDevToo...
Wired it up to @zed.dev pretty easily.
github.com/ChromeDevToo...
Wired it up to @zed.dev pretty easily.
Love getting linked to a TikTok and you wanna unmute it but you gotta bring your machete to get down there.
October 18, 2025 at 2:57 PM
Love getting linked to a TikTok and you wanna unmute it but you gotta bring your machete to get down there.
For myself to more easily find again later. (GitHub Markdown "alerts")
docs.github.com/en/get-start...
docs.github.com/en/get-start...
October 14, 2025 at 1:32 PM
For myself to more easily find again later. (GitHub Markdown "alerts")
docs.github.com/en/get-start...
docs.github.com/en/get-start...
rawdogging some shape() to build "round out" tabs.
I'll blog it eventually. modern CSS rules.
I'll blog it eventually. modern CSS rules.
October 10, 2025 at 1:42 AM
rawdogging some shape() to build "round out" tabs.
I'll blog it eventually. modern CSS rules.
I'll blog it eventually. modern CSS rules.
CSS `field-sizing` on a `<textarea>` is obviously awesome.
But the horizontal growth using it on an `<input>` is less clearly useful to me. But check out this design pattern I cooked up. I don't hate it. Keeps the name area compact until you need to see more. Just a bit of flexbox wrapping.
But the horizontal growth using it on an `<input>` is less clearly useful to me. But check out this design pattern I cooked up. I don't hate it. Keeps the name area compact until you need to see more. Just a bit of flexbox wrapping.
September 12, 2025 at 6:21 PM
CSS `field-sizing` on a `<textarea>` is obviously awesome.
But the horizontal growth using it on an `<input>` is less clearly useful to me. But check out this design pattern I cooked up. I don't hate it. Keeps the name area compact until you need to see more. Just a bit of flexbox wrapping.
But the horizontal growth using it on an `<input>` is less clearly useful to me. But check out this design pattern I cooked up. I don't hate it. Keeps the name area compact until you need to see more. Just a bit of flexbox wrapping.
Couple of cute prints from thelittlefriendsofprintmaking.com
September 2, 2025 at 3:44 PM
Couple of cute prints from thelittlefriendsofprintmaking.com
Can you `startViewTransition` and force new CSS `random()` values? I mean, kinda. Confuses the heck out of Safari but it'll do it.
August 28, 2025 at 12:06 AM
Can you `startViewTransition` and force new CSS `random()` values? I mean, kinda. Confuses the heck out of Safari but it'll do it.
still kind of a fun idea for a . codepen.io/chriscoyier/...
August 7, 2025 at 8:04 PM
still kind of a fun idea for a . codepen.io/chriscoyier/...
Just came across this old rudimentary Pen, but it does OK explaining the difference between these ways of handling events that happen a ton.
codepen.io/chriscoyier/...
(Definitely wouldn't use it for a fixed header these days!)
codepen.io/chriscoyier/...
(Definitely wouldn't use it for a fixed header these days!)
August 5, 2025 at 1:53 PM
Just came across this old rudimentary Pen, but it does OK explaining the difference between these ways of handling events that happen a ton.
codepen.io/chriscoyier/...
(Definitely wouldn't use it for a fixed header these days!)
codepen.io/chriscoyier/...
(Definitely wouldn't use it for a fixed header these days!)
ug that's such a cool little record player stand.
convincing myself that once all the wires get involved it won't be cool anymore.
tactileaudiofurniture.com/products/ara...
convincing myself that once all the wires get involved it won't be cool anymore.
tactileaudiofurniture.com/products/ara...
August 3, 2025 at 1:00 AM
ug that's such a cool little record player stand.
convincing myself that once all the wires get involved it won't be cool anymore.
tactileaudiofurniture.com/products/ara...
convincing myself that once all the wires get involved it won't be cool anymore.
tactileaudiofurniture.com/products/ara...
Pretty sweet browser tool for adding rather extreme effects to photos/video.
www.tooooools.app/effects/dith...
www.tooooools.app/effects/dith...
July 29, 2025 at 2:09 PM
Pretty sweet browser tool for adding rather extreme effects to photos/video.
www.tooooools.app/effects/dith...
www.tooooools.app/effects/dith...
Single glyph to .svg is a neat trick in the Typeface 4.1 update.
July 29, 2025 at 1:58 PM
Single glyph to .svg is a neat trick in the Typeface 4.1 update.