Jeroen Zwartepoorte
@jpzwarte.bsky.social
Front-end architect, web components, UX, education.
Reposted by Jeroen Zwartepoorte
#CSS `@custom-media` feature flags
create your own true or false media queries
nerdy.dev/custom-media...
create your own true or false media queries
nerdy.dev/custom-media...
Custom Media Feature Flags · December 6, 2025
Use true or false queries
nerdy.dev
December 6, 2025 at 5:17 AM
#CSS `@custom-media` feature flags
create your own true or false media queries
nerdy.dev/custom-media...
create your own true or false media queries
nerdy.dev/custom-media...
I feel like a whiny child when i say this, but why can't we have nice things in a timely fashion? #disappointed
November 19, 2025 at 8:16 AM
I feel like a whiny child when i say this, but why can't we have nice things in a timely fashion? #disappointed
Link a view-transition to scrolling: a header animates when you scroll up/down. Is that possible yet? @bram.us @vtbag.dev
October 26, 2025 at 10:00 AM
Link a view-transition to scrolling: a header animates when you scroll up/down. Is that possible yet? @bram.us @vtbag.dev
Teams should add a feature where it detects if you imitate an emoji, it shows that emoji as a reaction in the meeting.
October 8, 2025 at 7:22 AM
Teams should add a feature where it detects if you imitate an emoji, it shows that emoji as a reaction in the meeting.
@jensimmons.bsky.social Might i suggest bugs.webkit.org/show_bug.cgi... again? It's not just about animating closing popovers/dialogs. It is also *necessary* to fix them suddenly jumping to a different position when they exit the top layer, because a parent element is translated. Codepen included.
276727 – Implement `overlay` CSS property and new top layer exit algorithm
bugs.webkit.org
October 6, 2025 at 7:53 AM
@jensimmons.bsky.social Might i suggest bugs.webkit.org/show_bug.cgi... again? It's not just about animating closing popovers/dialogs. It is also *necessary* to fix them suddenly jumping to a different position when they exit the top layer, because a parent element is translated. Codepen included.
Reposted by Jeroen Zwartepoorte
September 16, 2025 at 2:29 AM
@nieuws.nos.nl Kunnen jullie aub een extra categorie "Voetballen" introduceren onder "Notificaties" instellingen? (net zoals Tour de France). Ik ontvang graag sport notificaties, maar de frequentie van voetbal is te hoog (en boeit me niet).
August 29, 2025 at 11:34 AM
@nieuws.nos.nl Kunnen jullie aub een extra categorie "Voetballen" introduceren onder "Notificaties" instellingen? (net zoals Tour de France). Ik ontvang graag sport notificaties, maar de frequentie van voetbal is te hoog (en boeit me niet).
Reposted by Jeroen Zwartepoorte
I set out to announce two web components I wrote for displaying @bsky.app likes and ended up ranting about how painful it is to build accessible, localizable web components in 2025.
The components are still there, though — lucky you?
lea.verou.me/blog/2025/bl...
The components are still there, though — lucky you?
lea.verou.me/blog/2025/bl...
Bluesky Likes Web Components • Lea Verou
I set out to announce two components I wrote for displaying Bluesky likes and ended up ranting about the pain of building accessible, localizable web components in 2025. The components are still here,...
lea.verou.me
June 17, 2025 at 10:04 PM
I set out to announce two web components I wrote for displaying @bsky.app likes and ended up ranting about how painful it is to build accessible, localizable web components in 2025.
The components are still there, though — lucky you?
lea.verou.me/blog/2025/bl...
The components are still there, though — lucky you?
lea.verou.me/blog/2025/bl...
Reposted by Jeroen Zwartepoorte
Apple introduced Liquid Glass yesterday, so our designer @michaelarestad.bsky.social reimagined Storybook with Liquid Plexiglass 😅
June 10, 2025 at 2:58 PM
Apple introduced Liquid Glass yesterday, so our designer @michaelarestad.bsky.social reimagined Storybook with Liquid Plexiglass 😅
So after talking with @una.im at #cssday on how to create "tethers" with popovers, i created this quick codepen: codepen.io/jpzwarte/pen...
Looking forward to be able to use the new container query to determine which side the popover is on (github.com/w3c/csswg-dr...)
Looking forward to be able to use the new container query to determine which side the popover is on (github.com/w3c/csswg-dr...)
Popover with tether, anchor positioned
...
codepen.io
June 9, 2025 at 6:28 AM
So after talking with @una.im at #cssday on how to create "tethers" with popovers, i created this quick codepen: codepen.io/jpzwarte/pen...
Looking forward to be able to use the new container query to determine which side the popover is on (github.com/w3c/csswg-dr...)
Looking forward to be able to use the new container query to determine which side the popover is on (github.com/w3c/csswg-dr...)
To me this is the holy grail of styling popovers: having a tether with a custom shape *and* a border. Is this possible, or do we have to wait until `border-shape`? (drafts.csswg.org/css-borders-...)
June 8, 2025 at 12:46 PM
To me this is the holy grail of styling popovers: having a tether with a custom shape *and* a border. Is this possible, or do we have to wait until `border-shape`? (drafts.csswg.org/css-borders-...)
Reposted by Jeroen Zwartepoorte
The ability to style grid and flex gaps is coming fast in a browser near you!
Bubbling with ideas for what this will be useful for!
Code: github.com/MicrosoftEdg...
Bubbling with ideas for what this will be useful for!
Code: github.com/MicrosoftEdg...
June 5, 2025 at 1:02 PM
The ability to style grid and flex gaps is coming fast in a browser near you!
Bubbling with ideas for what this will be useful for!
Code: github.com/MicrosoftEdg...
Bubbling with ideas for what this will be useful for!
Code: github.com/MicrosoftEdg...
Reposted by Jeroen Zwartepoorte
Beyond proud of Storybook 9, our ambitious take on the future of UI testing.
On top all the features and deep maintenance work, the team moved mountains to create a silky smooth upgrade for our biggest release yet. Give it a try!
On top all the features and deep maintenance work, the team moved mountains to create a silky smooth upgrade for our biggest release yet. Give it a try!
Storybook 9 is here!
▶️ Interaction tests
♿ Accessibility tests
👁️ Visual tests
🛡️ Coverage reports
🚥 Test widget
🪶 48% Leaner
✍️ Story generation
🏷️ Tag-based organization
🌐 Story globals
🏗️ Major updates for Svelte, Next.js, React Native, and more!
Let’s dive in!
▶️ Interaction tests
♿ Accessibility tests
👁️ Visual tests
🛡️ Coverage reports
🚥 Test widget
🪶 48% Leaner
✍️ Story generation
🏷️ Tag-based organization
🌐 Story globals
🏗️ Major updates for Svelte, Next.js, React Native, and more!
Let’s dive in!
June 4, 2025 at 12:48 AM
Beyond proud of Storybook 9, our ambitious take on the future of UI testing.
On top all the features and deep maintenance work, the team moved mountains to create a silky smooth upgrade for our biggest release yet. Give it a try!
On top all the features and deep maintenance work, the team moved mountains to create a silky smooth upgrade for our biggest release yet. Give it a try!
Apparently the Dutch railways will strike on Friday 🤨 #cssday @ppkoch.bsky.social
June 3, 2025 at 4:01 PM
Apparently the Dutch railways will strike on Friday 🤨 #cssday @ppkoch.bsky.social
Reposted by Jeroen Zwartepoorte
Blink: Intent to Prototype: CSS Anchored Fallback Container Queries
Blink: Intent to Prototype: CSS Anchored Fallback Container Queries
Blink: Intent to Prototype: CSS Anchored Fallback Container Queries
groups.google.com
May 28, 2025 at 12:18 PM
Blink: Intent to Prototype: CSS Anchored Fallback Container Queries
I was wondering when we'd see work start on being able to have tethers in combination with CSS Anchor Positioning: github.com/w3c/csswg-dr... 🎉
github.com
May 28, 2025 at 11:43 AM
I was wondering when we'd see work start on being able to have tethers in combination with CSS Anchor Positioning: github.com/w3c/csswg-dr... 🎉
@jensimmons.bsky.social Since you ask from time to time what devs want:
- `overflow-clip-margin`: only WebKit support is missing bugs.webkit.org/show_bug.cgi...
- `overlay` CSS property for top layer exit animations bugs.webkit.org/show_bug.cgi...
- `overflow-clip-margin`: only WebKit support is missing bugs.webkit.org/show_bug.cgi...
- `overlay` CSS property for top layer exit animations bugs.webkit.org/show_bug.cgi...
May 27, 2025 at 11:14 AM
@jensimmons.bsky.social Since you ask from time to time what devs want:
- `overflow-clip-margin`: only WebKit support is missing bugs.webkit.org/show_bug.cgi...
- `overlay` CSS property for top layer exit animations bugs.webkit.org/show_bug.cgi...
- `overflow-clip-margin`: only WebKit support is missing bugs.webkit.org/show_bug.cgi...
- `overlay` CSS property for top layer exit animations bugs.webkit.org/show_bug.cgi...
This Monaco grandprix is a joke. People intentionally slowing down (you can't overtake anyway) so their teammates get free pitstops. So boring. @f1tv.bsky.social
May 25, 2025 at 1:55 PM
This Monaco grandprix is a joke. People intentionally slowing down (you can't overtake anyway) so their teammates get free pitstops. So boring. @f1tv.bsky.social
Anno 2025, with LLMs everywhere, i expect a website generator to at least be able to recognize what is a heading, what is navigation etc etc. and output semantic HTML accordingly. Almost seems lazy otherwise.
May 8, 2025 at 1:09 PM
Anno 2025, with LLMs everywhere, i expect a website generator to at least be able to recognize what is a heading, what is navigation etc etc. and output semantic HTML accordingly. Almost seems lazy otherwise.
OH: "Figma Shite Builder"
May 8, 2025 at 8:25 AM
OH: "Figma Shite Builder"
Gotta love those generated websites #figmaconnect #semantic-html-fail
May 7, 2025 at 4:47 PM
Gotta love those generated websites #figmaconnect #semantic-html-fail