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
Reposted by Stefan Matei
Everyone getting mad at the New York Times for sitting on or suppressing mountains of evidence about Jeffrey Epstein and Donald Trump need to realize that they had a lot on their plate with trying to keep the country afraid of trans kids and Palestinians
November 13, 2025 at 5:05 PM
Everyone getting mad at the New York Times for sitting on or suppressing mountains of evidence about Jeffrey Epstein and Donald Trump need to realize that they had a lot on their plate with trying to keep the country afraid of trans kids and Palestinians
Reposted by Stefan Matei
that thing where you use a::after to make a card clickable instead of wrapping the whole card in a link #CSS #webdev
I once made a couple of utility classes for this. The main motivation being a glitch that happens if you set any kind of filter/transform/translate/scale/rotate on the link (lost hours debugging this multiple times)
codepen.io/nonsalant/pe...
codepen.io/nonsalant/pe...
.clickable-parent (CSS only)
Have a link or a button make its parent clickable...
codepen.io
July 26, 2025 at 12:58 PM
Reposted by Stefan Matei
Did you know that you can localize quotes right in CSS?
Now you do! 🫵
www.stefanjudis.com/today-i-lear...
Now you do! 🫵
www.stefanjudis.com/today-i-lear...
November 10, 2025 at 6:09 PM
Did you know that you can localize quotes right in CSS?
Now you do! 🫵
www.stefanjudis.com/today-i-lear...
Now you do! 🫵
www.stefanjudis.com/today-i-lear...
Reposted by Stefan Matei
Why have a focus ring per element when you can have one focus ring for all the elements?
Meet the Universal Focus Ring! 💫
css-tip.com/universal-fo...
A funny experiment using Anchor Positioning (I repeat, it's a demo for fun)
Meet the Universal Focus Ring! 💫
css-tip.com/universal-fo...
A funny experiment using Anchor Positioning (I repeat, it's a demo for fun)
November 7, 2025 at 1:41 PM
Why have a focus ring per element when you can have one focus ring for all the elements?
Meet the Universal Focus Ring! 💫
css-tip.com/universal-fo...
A funny experiment using Anchor Positioning (I repeat, it's a demo for fun)
Meet the Universal Focus Ring! 💫
css-tip.com/universal-fo...
A funny experiment using Anchor Positioning (I repeat, it's a demo for fun)
Reposted by Stefan Matei
🔥 CSS Quick Tip: `stretch` Value
A brief guide for the upcoming 'stretch' value in CSS, which forces the element to take 100% width/height of the parent container while taking padding & margin into consideration, thus preventing unwanted overflow easily without using calc() or box-sizing.
#css
A brief guide for the upcoming 'stretch' value in CSS, which forces the element to take 100% width/height of the parent container while taking padding & margin into consideration, thus preventing unwanted overflow easily without using calc() or box-sizing.
#css
November 7, 2025 at 12:20 PM
🔥 CSS Quick Tip: `stretch` Value
A brief guide for the upcoming 'stretch' value in CSS, which forces the element to take 100% width/height of the parent container while taking padding & margin into consideration, thus preventing unwanted overflow easily without using calc() or box-sizing.
#css
A brief guide for the upcoming 'stretch' value in CSS, which forces the element to take 100% width/height of the parent container while taking padding & margin into consideration, thus preventing unwanted overflow easily without using calc() or box-sizing.
#css
Reposted by Stefan Matei
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
November 7, 2025 at 4:37 AM
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
Reposted by Stefan Matei
Along with the video, img, and link options, I added an iframe option. You can demo your live sites and apps for clients. In the video I attached I'm actually navigating on those live sites on the mockups. Feel free to use. Instructions in README github.com/DevManSam777...
#100Devs #webcomponents
#100Devs #webcomponents
November 7, 2025 at 1:19 AM
Along with the video, img, and link options, I added an iframe option. You can demo your live sites and apps for clients. In the video I attached I'm actually navigating on those live sites on the mockups. Feel free to use. Instructions in README github.com/DevManSam777...
#100Devs #webcomponents
#100Devs #webcomponents
Reposted by Stefan Matei
people gainfully employed by war-criminal-aligned fascist-adjacent absolute-dickhead vercel who were VERY quiet in the days around guillaume sharing his little jaunt with netanyahu now back out of the woodwork sharing their company-issued quota of blog posts and changelogs. well done lads.
November 6, 2025 at 1:55 AM
people gainfully employed by war-criminal-aligned fascist-adjacent absolute-dickhead vercel who were VERY quiet in the days around guillaume sharing his little jaunt with netanyahu now back out of the woodwork sharing their company-issued quota of blog posts and changelogs. well done lads.
Reposted by Stefan Matei
I built device mockups for my devleads.site landing page. A few people asked about them, so I coded a reusable web component for phone, tablet or laptop mockups. It supports img/vid fallbacks, anchor-tag linking, themes, hover animations,custom colors & responsiveness. Repo buff.ly/7BDPv99 #100Devs
November 6, 2025 at 2:56 AM
I built device mockups for my devleads.site landing page. A few people asked about them, so I coded a reusable web component for phone, tablet or laptop mockups. It supports img/vid fallbacks, anchor-tag linking, themes, hover animations,custom colors & responsiveness. Repo buff.ly/7BDPv99 #100Devs
Reposted by Stefan Matei
View transitions are pretty neat, and I was fortunate enough to write a piece for @piccalil.li about putting them to work.
They're such an exciting new part of the web platform, and I'm elated to see new and boundary-pushing effects making their way into production.
#WebDev #ViewTransitions #CSS
They're such an exciting new part of the web platform, and I'm elated to see new and boundary-pushing effects making their way into production.
#WebDev #ViewTransitions #CSS
Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that.
piccalil.li/blog/some-pr...
piccalil.li/blog/some-pr...
Some practical examples of view transitions to elevate your UI
Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that.
piccalil.li
November 6, 2025 at 12:30 PM
View transitions are pretty neat, and I was fortunate enough to write a piece for @piccalil.li about putting them to work.
They're such an exciting new part of the web platform, and I'm elated to see new and boundary-pushing effects making their way into production.
#WebDev #ViewTransitions #CSS
They're such an exciting new part of the web platform, and I'm elated to see new and boundary-pushing effects making their way into production.
#WebDev #ViewTransitions #CSS
Reposted by Stefan Matei
Mamdani going so hard for trans right and winning is some juicy proof that every dem that abandoned us didn’t do it for politically advantageous reasons. They did it because they’re transphobes and they will lose for it
November 5, 2025 at 5:33 AM
Mamdani going so hard for trans right and winning is some juicy proof that every dem that abandoned us didn’t do it for politically advantageous reasons. They did it because they’re transphobes and they will lose for it
Reposted by Stefan Matei
I made a small utility to safely set .innerHTML with values escaped by default and trusted content selectively excluded from being escaped
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
June 8, 2025 at 4:07 PM
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
Man, I love this. Here's a custom element to automatically add side notes to your blog posts. It parses the text, includes feature detection for anchor positioning, and uses progressive enhancement.
This is how things should be done!
meyerweb.com/eric/thought...
This is how things should be done!
meyerweb.com/eric/thought...
November 3, 2025 at 9:31 AM
Man, I love this. Here's a custom element to automatically add side notes to your blog posts. It parses the text, includes feature detection for anchor positioning, and uses progressive enhancement.
This is how things should be done!
meyerweb.com/eric/thought...
This is how things should be done!
meyerweb.com/eric/thought...
Reposted by Stefan Matei
Got a new article up about designing motion when the design doesn’t move. For anyone who’s ever been handed a flat layout and told “make it feel dynamic.”
cydstumpel.nl/how-i-turn-s...
cydstumpel.nl/how-i-turn-s...
How I turn static designs into rich experiences | Blog Cyd Stumpel
I’m preparing a workshop at Wey Wey Web about motion language, which made me realise how many of my habits and instincts for creating web animations have become automatic, here’s my attempt at writing...
cydstumpel.nl
November 2, 2025 at 4:18 PM
Got a new article up about designing motion when the design doesn’t move. For anyone who’s ever been handed a flat layout and told “make it feel dynamic.”
cydstumpel.nl/how-i-turn-s...
cydstumpel.nl/how-i-turn-s...
Reposted by Stefan Matei
Pretty sure I built this functionality before, but now I wrote it as a web component and I’m extracting it for future use: codepen.io/nonsalant/pe...
lazy-modal web component
A web component to associate a modal popover with a trigger button and load any associated assets in a lazy way. ...
codepen.io
June 3, 2025 at 6:16 PM
Pretty sure I built this functionality before, but now I wrote it as a web component and I’m extracting it for future use: codepen.io/nonsalant/pe...
useful when you want to force a browser window to be a smaller size (than what’s normally allowed by just resizing the window)
Ever try to record a video showing a browser that you want to shrink so show more code beside it, but the browser won't let you?
Allow me to suggest launching the page in a popup.
A pain, you say? Not any more!
popup.alanwsmith.com
Allow me to suggest launching the page in a popup.
A pain, you say? Not any more!
popup.alanwsmith.com
popup launcher
enter a url, launch a window
popup.alanwsmith.com
November 1, 2025 at 8:02 AM
useful when you want to force a browser window to be a smaller size (than what’s normally allowed by just resizing the window)
Reposted by Stefan Matei
to avoid off-by-one errors, always make sure there is enough contrast between your cats
October 29, 2025 at 2:25 AM
to avoid off-by-one errors, always make sure there is enough contrast between your cats
Reposted by Stefan Matei
JS pro tip: Add { cause } to errors. Makes debugging and inspection way easier 🔍
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
October 1, 2025 at 10:38 AM
JS pro tip: Add { cause } to errors. Makes debugging and inspection way easier 🔍
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
Reposted by Stefan Matei
You can make an element look like something it's not, but under the hood it's still NOT that thing you made it look like.
Making
Making
&
look like tabs doesn't make them tabs. css-tricks.com/pure-css-tab... — tabs have specific semantic and behavior requirements. #a11y
Pure CSS Tabs With Details, Grid, and Subgrid | CSS-Tricks
Can we use the <details> element as the foundation for a tabbed interface? Why yes, we can!
css-tricks.com
October 28, 2025 at 2:29 PM
You can make an element look like something it's not, but under the hood it's still NOT that thing you made it look like.
Making
Making
&
look like tabs doesn't make them tabs. css-tricks.com/pure-css-tab... — tabs have specific semantic and behavior requirements. #a11y
Reposted by Stefan Matei
Springs and Bounces in Native CSS • Josh W. Comeau | The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. ... | www.joshwcomeau.com/animation/li...
Springs and Bounces in Native CSS • Josh W. Comeau
The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experiment...
www.joshwcomeau.com
October 29, 2025 at 8:21 AM
Springs and Bounces in Native CSS • Josh W. Comeau | The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. ... | www.joshwcomeau.com/animation/li...
to avoid off-by-one errors, always make sure there is enough contrast between your cats
October 29, 2025 at 2:25 AM
to avoid off-by-one errors, always make sure there is enough contrast between your cats
Reposted by Stefan Matei
Since the “ceasefire,” Netanyahu has killed 100+ Palestinians, has continued to restrict aid into Gaza, banned all UN investigators, & still enforces an international media blackout.
And billionaire owned Washington Post runs this pro genocide editorial. Why do you still have a Wash Post sub?
And billionaire owned Washington Post runs this pro genocide editorial. Why do you still have a Wash Post sub?
October 23, 2025 at 12:19 PM
Since the “ceasefire,” Netanyahu has killed 100+ Palestinians, has continued to restrict aid into Gaza, banned all UN investigators, & still enforces an international media blackout.
And billionaire owned Washington Post runs this pro genocide editorial. Why do you still have a Wash Post sub?
And billionaire owned Washington Post runs this pro genocide editorial. Why do you still have a Wash Post sub?