Stefan Matei
@stefanmatei.com
Web dev, mostly frontend, buildless and with zero dependencies when possible. Web components, modern CSS, and vanilla JS. AuDHD.
🇵🇸 Free Palestine
🔗 find me on codepen: codepen.io/nonsalant
🔗 find me on github: github.com/nonsalant
🇵🇸 Free Palestine
🔗 find me on codepen: codepen.io/nonsalant
🔗 find me on github: github.com/nonsalant
Pinned
Stefan Matei
@stefanmatei.com
· Jun 8
Tagged templates with selectively escaped HTML (Vanilla JS)
A small utility to safely set innerHTML with values escaped by default and trusted content selectively excluded from being escaped....
codepen.io
I made a small utility to safely set .innerHTML with values escaped by default and trusted content selectively excluded from being escaped
Reposted by Stefan Matei
a powerful #CSS transition technique enters the ring:
Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
January 23, 2026 at 5:53 PM
a powerful #CSS transition technique enters the ring:
Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
Anchor Interpolated Morphing (AIM)
nerdy.dev/anchor-inter...
love this:
svg:not([fill]) {
fill: currentColor;
}
svg:not([fill]) {
fill: currentColor;
}
So much new CSS stuff has hit the web in the past few years, and the CSS reset I was using has aged, so it was time for a refresh.
This new reset isn't too extensively battle-tested just yet, but it has proven a success where I have used it.
vale.rocks/posts/css-re...
#CSS #FrontEndDev #WebDev
This new reset isn't too extensively battle-tested just yet, but it has proven a success where I have used it.
vale.rocks/posts/css-re...
#CSS #FrontEndDev #WebDev
My Opinionated CSS Reset
* { all: unset; }
vale.rocks
January 22, 2026 at 5:09 PM
love this:
svg:not([fill]) {
fill: currentColor;
}
svg:not([fill]) {
fill: currentColor;
}
Reposted by Stefan Matei
💡 CSS Tip!
My take on the fieldset/legend layout using minimal HTML.
css-tip.com/filedset-leg...
A responsive and direction-aware implementation easy to control using CSS variables.
My take on the fieldset/legend layout using minimal HTML.
css-tip.com/filedset-leg...
A responsive and direction-aware implementation easy to control using CSS variables.
January 21, 2026 at 1:12 PM
💡 CSS Tip!
My take on the fieldset/legend layout using minimal HTML.
css-tip.com/filedset-leg...
A responsive and direction-aware implementation easy to control using CSS variables.
My take on the fieldset/legend layout using minimal HTML.
css-tip.com/filedset-leg...
A responsive and direction-aware implementation easy to control using CSS variables.
Reposted by Stefan Matei
A collection of national flags coded in CSS (using a single HTML element for each flag)
github.com/alvaromontor...
github.com/alvaromontor...
GitHub - alvaromontoro/CSS-Flags: A collection of flags coded with CSS and a single HTML element
A collection of flags coded with CSS and a single HTML element - alvaromontoro/CSS-Flags
github.com
January 22, 2026 at 12:53 AM
A collection of national flags coded in CSS (using a single HTML element for each flag)
github.com/alvaromontor...
github.com/alvaromontor...
Reposted by Stefan Matei
January 21, 2026 at 4:36 AM
Reposted by Stefan Matei
Chrome ships a new HTML element and I'm all game for more built-in functionality! 🎉👇
developer.chrome.com/blog/geoloca...
developer.chrome.com/blog/geoloca...
January 19, 2026 at 6:18 PM
Chrome ships a new HTML element and I'm all game for more built-in functionality! 🎉👇
developer.chrome.com/blog/geoloca...
developer.chrome.com/blog/geoloca...
Reposted by Stefan Matei
You might have seen it in the past, but in case you haven't looked recently, GitHub has a couple really nice font sets:
Mona Sans & Hubot Sans:
github.com/mona-sans
Monaspace:
monaspace.githubnext.com
Mona Sans & Hubot Sans:
github.com/mona-sans
Monaspace:
monaspace.githubnext.com
January 16, 2026 at 8:19 PM
You might have seen it in the past, but in case you haven't looked recently, GitHub has a couple really nice font sets:
Mona Sans & Hubot Sans:
github.com/mona-sans
Monaspace:
monaspace.githubnext.com
Mona Sans & Hubot Sans:
github.com/mona-sans
Monaspace:
monaspace.githubnext.com
Reposted by Stefan Matei
The Navigation API is newly baseline! The web now has sensible, low-level routing for navigations.
January 15, 2026 at 3:25 PM
The Navigation API is newly baseline! The web now has sensible, low-level routing for navigations.
Reposted by Stefan Matei
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.)
Reposted by Stefan Matei
No more magic numbers with this modern CSS feature (I'll save the clickbait for YT, it's anchor positioning... though it does look like it's in the thumbnail too 😁)
youtube.com/shorts/k330_...
youtube.com/shorts/k330_...
No more magic numbers with this modern CSS feature
YouTube video by Kevin Powell
youtube.com
January 8, 2026 at 7:29 PM
No more magic numbers with this modern CSS feature (I'll save the clickbait for YT, it's anchor positioning... though it does look like it's in the thumbnail too 😁)
youtube.com/shorts/k330_...
youtube.com/shorts/k330_...
Reposted by Stefan Matei
A fascinating look at how some common APIs really work. The speech synthesis one was a real eye-opener.
polypane.app/blog/not-all...
polypane.app/blog/not-all...
Not All Browser APIs Are "Web" APIs | Polypane
When we talk about "the web platform", we often treat it as a unified, standards-based system: browsers implement features from the same specifications, even if…
polypane.app
January 12, 2026 at 4:01 PM
A fascinating look at how some common APIs really work. The speech synthesis one was a real eye-opener.
polypane.app/blog/not-all...
polypane.app/blog/not-all...
January 12, 2026 at 1:34 PM
Reposted by Stefan Matei
Offset gradient border from img source - how would you get the result from the screen below? Real gap transparency, border gradient obtained from the image.
My solutions on @codepen.io:
Safari only in 3 declarations codepen.io/thebabydino/...
Cross-browser
codepen.io/thebabydino/...
#CSS #filter
My solutions on @codepen.io:
Safari only in 3 declarations codepen.io/thebabydino/...
Cross-browser
codepen.io/thebabydino/...
#CSS #filter
January 11, 2026 at 9:52 AM
Offset gradient border from img source - how would you get the result from the screen below? Real gap transparency, border gradient obtained from the image.
My solutions on @codepen.io:
Safari only in 3 declarations codepen.io/thebabydino/...
Cross-browser
codepen.io/thebabydino/...
#CSS #filter
My solutions on @codepen.io:
Safari only in 3 declarations codepen.io/thebabydino/...
Cross-browser
codepen.io/thebabydino/...
#CSS #filter
Reposted by Stefan Matei
TIL that:
<? this ?>
<! this !>
</ and this >
…all parse as HTML comments.
It hits a part of the parser the spec where the content is "reconsumed in the bogus comment state".
<? this ?>
<! this !>
</ and this >
…all parse as HTML comments.
It hits a part of the parser the spec where the content is "reconsumed in the bogus comment state".
January 9, 2026 at 12:45 PM
TIL that:
<? this ?>
<! this !>
</ and this >
…all parse as HTML comments.
It hits a part of the parser the spec where the content is "reconsumed in the bogus comment state".
<? this ?>
<! this !>
</ and this >
…all parse as HTML comments.
It hits a part of the parser the spec where the content is "reconsumed in the bogus comment state".
Just a heads up don’t blindly listen to its recommendations if you’re not sure what you’re deleting. I got “remove unnecessary -webkit prefixes - most are supported natively” but was only using -webkit-font-smoothing and -webkit-text-size-adjust which don’t work anywhere without the prefix.
#CSS
#CSS
ReliCSS - Web Interface
www.alwaystwisted.com
January 8, 2026 at 11:04 AM
Just a heads up don’t blindly listen to its recommendations if you’re not sure what you’re deleting. I got “remove unnecessary -webkit prefixes - most are supported natively” but was only using -webkit-font-smoothing and -webkit-text-size-adjust which don’t work anywhere without the prefix.
#CSS
#CSS
Made a pen for this week’s #CodePenChallenge (“a pen that starts with the press of a button”) that is a UI for a location input.
This uses a couple of custom elements I’ve built before (map-picker and lazy-modal) and a technique I’m developing for co-locating css/js/html files in web components.
This uses a couple of custom elements I’ve built before (map-picker and lazy-modal) and a technique I’m developing for co-locating css/js/html files in web components.
<location-input>
Experimental UI for a location input (web component/vanilla javascript) with light and dark mode support....
codepen.io
January 7, 2026 at 4:09 AM
Made a pen for this week’s #CodePenChallenge (“a pen that starts with the press of a button”) that is a UI for a location input.
This uses a couple of custom elements I’ve built before (map-picker and lazy-modal) and a technique I’m developing for co-locating css/js/html files in web components.
This uses a couple of custom elements I’ve built before (map-picker and lazy-modal) and a technique I’m developing for co-locating css/js/html files in web components.
I can appreciate this more after recently having watched the longer version of this video—8 bit stuff actually looks bad on modern screens where you can clearly make out the individual pixels.
youtube.com/shorts/W_ZI3...
youtube.com/shorts/W_ZI3...
January 5, 2026 at 11:42 AM
I can appreciate this more after recently having watched the longer version of this video—8 bit stuff actually looks bad on modern screens where you can clearly make out the individual pixels.
youtube.com/shorts/W_ZI3...
youtube.com/shorts/W_ZI3...
Reposted by Stefan Matei
They aren't even shy about admitting it. Their primary purpose is advancing America's agenda. Their secondary purpose is providing the news. And when faced with the choice, they will always opt for the former.
🟡 NEW: The New York Times and Washington Post learned of a secret US raid on Venezuela soon before it was scheduled to begin Friday night — but held off publishing what they knew to avoid endangering US troops.
www.semafor.com/article/01/0...
www.semafor.com/article/01/0...
News organizations held off on reporting Venezuela raid
The American news organizations held their stories over concerns about endangering US troops.
www.semafor.com
January 4, 2026 at 7:36 AM
They aren't even shy about admitting it. Their primary purpose is advancing America's agenda. Their secondary purpose is providing the news. And when faced with the choice, they will always opt for the former.
Reposted by Stefan Matei
@heydonworks.com
I have something like that in this repo, might be better than an explanation: https://github.com/jsebrech/sweet-suspense
That repo also handles loading errors with an error boundary. It was part of an exploration of what it would take to replace the useful bits of react with […]
I have something like that in this repo, might be better than an explanation: https://github.com/jsebrech/sweet-suspense
That repo also handles loading errors with an error boundary. It was part of an exploration of what it would take to replace the useful bits of react with […]
Original post on mstdn.social
mstdn.social
December 29, 2025 at 5:45 PM
@heydonworks.com
I have something like that in this repo, might be better than an explanation: https://github.com/jsebrech/sweet-suspense
That repo also handles loading errors with an error boundary. It was part of an exploration of what it would take to replace the useful bits of react with […]
I have something like that in this repo, might be better than an explanation: https://github.com/jsebrech/sweet-suspense
That repo also handles loading errors with an error boundary. It was part of an exploration of what it would take to replace the useful bits of react with […]
Reposted by Stefan Matei
📝 How To Dynamically Install Custom Elements
A pattern I’ve been working on for a while. Load just the elements you are actually using. “Tree shaking” is trivial with HTML.
heydonworks.com/article/dyna...
A pattern I’ve been working on for a while. Load just the elements you are actually using. “Tree shaking” is trivial with HTML.
heydonworks.com/article/dyna...
How To Dynamically Install Custom Elements
A reusable pattern for custom elements installation
heydonworks.com
December 29, 2025 at 12:24 PM
📝 How To Dynamically Install Custom Elements
A pattern I’ve been working on for a while. Load just the elements you are actually using. “Tree shaking” is trivial with HTML.
heydonworks.com/article/dyna...
A pattern I’ve been working on for a while. Load just the elements you are actually using. “Tree shaking” is trivial with HTML.
heydonworks.com/article/dyna...
Reposted by Stefan Matei
Wear an ffp2/3 respirator, it’s easy.
Covid is airborne
Vaccinate
Open windows
Clean the air
Covid is airborne
Vaccinate
Open windows
Clean the air
December 21, 2025 at 12:23 PM
Wear an ffp2/3 respirator, it’s easy.
Covid is airborne
Vaccinate
Open windows
Clean the air
Covid is airborne
Vaccinate
Open windows
Clean the air
Reposted by Stefan Matei
www.gavi.org/vaccineswork...
This damage is because vaccines were not shared and restricted. The poorest countries have had such terrible impacts while there is silence in much of our media.
This damage is because vaccines were not shared and restricted. The poorest countries have had such terrible impacts while there is silence in much of our media.
Nearly half of COVID-19 survivors in Africa experiencing Long COVID symptoms, study suggests
Fatigue is the most commonly reported symptom among COVID-19 survivors in Africa.
www.gavi.org
December 21, 2025 at 8:50 AM
www.gavi.org/vaccineswork...
This damage is because vaccines were not shared and restricted. The poorest countries have had such terrible impacts while there is silence in much of our media.
This damage is because vaccines were not shared and restricted. The poorest countries have had such terrible impacts while there is silence in much of our media.
Reposted by Stefan Matei
comma and period
moves through youtube videos frame by frame
💞
moves through youtube videos frame by frame
💞
December 11, 2025 at 4:19 PM
comma and period
moves through youtube videos frame by frame
💞
moves through youtube videos frame by frame
💞
Reposted by Stefan Matei
So are `cyan` and `aqua`.
`rgb(100% 0% 0%)` is `red`.
`rgb(0% 0% 100%)` is `blue`.
`rgb(0% 100% 0%)` is... `lime`! `green` is `rgb(0% 50.2% 0%)`.
`grey` is darker than `darkgrey`.
`pink` is lighter than `lightpink`.
#CSS
`rgb(100% 0% 0%)` is `red`.
`rgb(0% 0% 100%)` is `blue`.
`rgb(0% 100% 0%)` is... `lime`! `green` is `rgb(0% 50.2% 0%)`.
`grey` is darker than `darkgrey`.
`pink` is lighter than `lightpink`.
#CSS
Fuchsia and Magenta are the same colour in CSS. Where is your god now?
December 11, 2025 at 10:18 AM
So are `cyan` and `aqua`.
`rgb(100% 0% 0%)` is `red`.
`rgb(0% 0% 100%)` is `blue`.
`rgb(0% 100% 0%)` is... `lime`! `green` is `rgb(0% 50.2% 0%)`.
`grey` is darker than `darkgrey`.
`pink` is lighter than `lightpink`.
#CSS
`rgb(100% 0% 0%)` is `red`.
`rgb(0% 0% 100%)` is `blue`.
`rgb(0% 100% 0%)` is... `lime`! `green` is `rgb(0% 50.2% 0%)`.
`grey` is darker than `darkgrey`.
`pink` is lighter than `lightpink`.
#CSS