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
🔗 stefanmatei.com
🔗 codepen.io/nonsalant
🔗 github.com/nonsalant
🇵🇸 Free Palestine
🔗 stefanmatei.com
🔗 codepen.io/nonsalant
🔗 github.com/nonsalant
Pinned
Stefan Matei
@stefanmatei.com
· Jul 10
I made some enhancements to my web component that loads other web components in popovers. You can now lazy load the markup inside the popover too (not just its script(s) and style(s)) from an external html file:
github.com/nonsalant/la...
github.com/nonsalant/la...
Reposted by Stefan Matei
img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
February 6, 2026 at 6:05 AM
img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
Reposted by Stefan Matei
Reposted by Stefan Matei
Repeatable Form Fields Made Simple from @aaron-gustafson.com
www.aaron-gustafson.com/notebook/rep...
www.aaron-gustafson.com/notebook/rep...
Repeatable Form Fields Made Simple :: Aaron Gustafson
Sometimes you need users to provide multiple instances of the same information—multiple email addresses, phone numbers, team members, or emergency contacts. The form-repeatable web component makes thi...
www.aaron-gustafson.com
February 3, 2026 at 12:36 PM
Repeatable Form Fields Made Simple from @aaron-gustafson.com
www.aaron-gustafson.com/notebook/rep...
www.aaron-gustafson.com/notebook/rep...
Reposted by Stefan Matei
Performance-Optimized Video Embeds with Zero JavaScript
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
Performance-Optimized Video Embeds with Zero JavaScript
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
frontendmasters.com
February 3, 2026 at 8:39 AM
Performance-Optimized Video Embeds with Zero JavaScript
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
Reposted by Stefan Matei
Kamala Harris's National Security Advisor Phil Gordon angrily replies to criticism from Israeli journalist Amit Segal that Biden didn't do enough for Israel.
He states that Biden went out of his way to violate US law in support of Israel.
He states that Biden went out of his way to violate US law in support of Israel.
February 1, 2026 at 5:58 PM
Kamala Harris's National Security Advisor Phil Gordon angrily replies to criticism from Israeli journalist Amit Segal that Biden didn't do enough for Israel.
He states that Biden went out of his way to violate US law in support of Israel.
He states that Biden went out of his way to violate US law in support of Israel.
Reposted by Stefan Matei
TIL, Chrome 144 ships some new pseudo-classes. 👏
Within limits, you can now style the matching strings of the "find in page" search.
::search-text {
// matching strings
}
::search-text:current {
// currently matched string
}
More on the blog. 👇
www.stefanjudis.com/today-i-lear...
Within limits, you can now style the matching strings of the "find in page" search.
::search-text {
// matching strings
}
::search-text:current {
// currently matched string
}
More on the blog. 👇
www.stefanjudis.com/today-i-lear...
February 2, 2026 at 2:07 PM
TIL, Chrome 144 ships some new pseudo-classes. 👏
Within limits, you can now style the matching strings of the "find in page" search.
::search-text {
// matching strings
}
::search-text:current {
// currently matched string
}
More on the blog. 👇
www.stefanjudis.com/today-i-lear...
Within limits, you can now style the matching strings of the "find in page" search.
::search-text {
// matching strings
}
::search-text:current {
// currently matched string
}
More on the blog. 👇
www.stefanjudis.com/today-i-lear...
Reposted by Stefan Matei
More on this type of person by @acollierastro.bsky.social: youtu.be/GmJI6qIqURA
billionaires want you to know they could have done physics
YouTube video by Angela Collier
youtu.be
January 31, 2026 at 4:43 PM
More on this type of person by @acollierastro.bsky.social: youtu.be/GmJI6qIqURA
January 30, 2026 at 12:51 PM
Reposted by Stefan Matei
My latest blog post is out. If you'd like an approachable tutorial on Regular Expressions then I've got you covered. 🍕🚫🍍 /[^pineapple]/
www.devmansam.net/blog/cutting...
#regex #regularexpressions #javascript #softwareengineer #100Devs
www.devmansam.net/blog/cutting...
#regex #regularexpressions #javascript #softwareengineer #100Devs
Cutting Through JavaScript RegEx 🍕
Learn how to use regular expressions in JavaScript with practical examples of common patterns, methods, and syntax.
www.devmansam.net
January 30, 2026 at 9:39 AM
My latest blog post is out. If you'd like an approachable tutorial on Regular Expressions then I've got you covered. 🍕🚫🍍 /[^pineapple]/
www.devmansam.net/blog/cutting...
#regex #regularexpressions #javascript #softwareengineer #100Devs
www.devmansam.net/blog/cutting...
#regex #regularexpressions #javascript #softwareengineer #100Devs
Reposted by Stefan Matei
“You're not gettin’ away with fuck all
You're not gettin' away with doin' nothin’
Ní dhéanfaidh muid dearmad ar an lucht seo
You think we'd move on and forget what happened?
Nah, fuck Keir Starmer
Netanyahu's bitch and genocide armer
Better off as compost for farmers”
You're not gettin' away with doin' nothin’
Ní dhéanfaidh muid dearmad ar an lucht seo
You think we'd move on and forget what happened?
Nah, fuck Keir Starmer
Netanyahu's bitch and genocide armer
Better off as compost for farmers”
‘Liars Tale’ is OUT NOW, check out the video on Youtube... stick it on full volume!🔥
Produced by the legendary Dan Carey, and on Heavenly Recordings, ‘FENIAN’ is out in the world on April 24th to mark the 110th anniversary of the Easter Rising. 💚🤍🧡
Pre-order now...
KNEECAP.lnk.to/LiarsTale
Produced by the legendary Dan Carey, and on Heavenly Recordings, ‘FENIAN’ is out in the world on April 24th to mark the 110th anniversary of the Easter Rising. 💚🤍🧡
Pre-order now...
KNEECAP.lnk.to/LiarsTale
KNEECAP - Liars Tale
Listen to Liars Tale by KNEECAP.
KNEECAP.lnk.to
January 29, 2026 at 12:11 AM
“You're not gettin’ away with fuck all
You're not gettin' away with doin' nothin’
Ní dhéanfaidh muid dearmad ar an lucht seo
You think we'd move on and forget what happened?
Nah, fuck Keir Starmer
Netanyahu's bitch and genocide armer
Better off as compost for farmers”
You're not gettin' away with doin' nothin’
Ní dhéanfaidh muid dearmad ar an lucht seo
You think we'd move on and forget what happened?
Nah, fuck Keir Starmer
Netanyahu's bitch and genocide armer
Better off as compost for farmers”
Reposted by Stefan Matei
Any post that starts off with the rule of least power is bound to be a good one.
@pawelgrzybek.com shows how you can create custom invoker commands by listening to the command event, greatly simplifying interactivity.
For predefined commands you don't even need JS!
pawelgrzybek.com/more-invoker...
@pawelgrzybek.com shows how you can create custom invoker commands by listening to the command event, greatly simplifying interactivity.
For predefined commands you don't even need JS!
pawelgrzybek.com/more-invoker...
January 29, 2026 at 8:54 AM
Any post that starts off with the rule of least power is bound to be a good one.
@pawelgrzybek.com shows how you can create custom invoker commands by listening to the command event, greatly simplifying interactivity.
For predefined commands you don't even need JS!
pawelgrzybek.com/more-invoker...
@pawelgrzybek.com shows how you can create custom invoker commands by listening to the command event, greatly simplifying interactivity.
For predefined commands you don't even need JS!
pawelgrzybek.com/more-invoker...
Reposted by Stefan Matei
We'll be getting multiple outlines in #CSS!!
Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌
Finally!! This is such great news!! 🎉🥳
Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌
Finally!! This is such great news!! 🎉🥳
🎉 Live from the CSS WG F2F: We just agreed to support multiple borders and outlines per element, comma-separated!
But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?
(it needs to be the same across borders and outlines or different box-sizing values)
But we can’t decide on the order: inside out or outside in?
What feels more natural to you, A or B?
(it needs to be the same across borders and outlines or different box-sizing values)
January 29, 2026 at 4:37 AM
We'll be getting multiple outlines in #CSS!!
Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌
Finally!! This is such great news!! 🎉🥳
Multiple outlines means no more hacking our way around accessible and creative outline styles with box-shadows that aren't rendered in forced-colors mode! 🙌
Finally!! This is such great news!! 🎉🥳
This button closes its closest parent that happens to be a popover:
<button onclick="this.closest('[popover]')?.hidePopover()" type="button">
(removing this from a project but feel like I'm gonna need it again soon)
<button onclick="this.closest('[popover]')?.hidePopover()" type="button">
(removing this from a project but feel like I'm gonna need it again soon)
January 27, 2026 at 9:43 AM
This button closes its closest parent that happens to be a popover:
<button onclick="this.closest('[popover]')?.hidePopover()" type="button">
(removing this from a project but feel like I'm gonna need it again soon)
<button onclick="this.closest('[popover]')?.hidePopover()" type="button">
(removing this from a project but feel like I'm gonna need it again soon)
Reposted by Stefan Matei
The surveillance industry is not your friend.
January 26, 2026 at 5:35 PM
The surveillance industry is not your friend.
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...