Jack
@holdenjack.bsky.social
My reposts are my bookmarks. Interested in Web components.
Super excited for CSS Import Attributes to be available in all browsers! Firefox in Jan 2026, Safari hopefully not far behind :)
import sheet from '../styles/_reset.css' with { type: 'css' };
developer.mozilla.org/en-US/docs/W...
import sheet from '../styles/_reset.css' with { type: 'css' };
developer.mozilla.org/en-US/docs/W...
Import attributes - JavaScript | MDN
The import attributes feature instructs the runtime about how a module should be loaded, including the behavior of module resolution, fetching, parsing, and evaluation. It's supported in import declar...
developer.mozilla.org
December 24, 2025 at 11:02 AM
Super excited for CSS Import Attributes to be available in all browsers! Firefox in Jan 2026, Safari hopefully not far behind :)
import sheet from '../styles/_reset.css' with { type: 'css' };
developer.mozilla.org/en-US/docs/W...
import sheet from '../styles/_reset.css' with { type: 'css' };
developer.mozilla.org/en-US/docs/W...
What an annoying bug on the
Transitioning dialog and popover in and out - minimal demo
...
codepen.io
December 23, 2025 at 10:29 AM
What an annoying bug on the
Web components: Purist light DOM enhancement vs. Shadow DOM with slots. Whats people’s thinking on programmatically injecting say an input into the light DOM to then reflect into the Shadow DOM? Thanks
December 23, 2025 at 7:39 AM
Web components: Purist light DOM enhancement vs. Shadow DOM with slots. Whats people’s thinking on programmatically injecting say an input into the light DOM to then reflect into the Shadow DOM? Thanks
Reposted by Jack
huge news for #webcomponents devs! that’s awesome
December 1, 2025 at 2:15 PM
huge news for #webcomponents devs! that’s awesome
Something weird is going on with AI.
Gemini, Claude, and Grok are all making mistakes.
We have Gemini saying Tiffany Trump’s mum is Ivana Trump??
This morning, I asked AI if any optimisations could be made to my CSS, it said yes… then churned out the same CSS in Gemini, Grok, and Claude!!!
Gemini, Claude, and Grok are all making mistakes.
We have Gemini saying Tiffany Trump’s mum is Ivana Trump??
This morning, I asked AI if any optimisations could be made to my CSS, it said yes… then churned out the same CSS in Gemini, Grok, and Claude!!!
December 23, 2025 at 12:01 AM
Something weird is going on with AI.
Gemini, Claude, and Grok are all making mistakes.
We have Gemini saying Tiffany Trump’s mum is Ivana Trump??
This morning, I asked AI if any optimisations could be made to my CSS, it said yes… then churned out the same CSS in Gemini, Grok, and Claude!!!
Gemini, Claude, and Grok are all making mistakes.
We have Gemini saying Tiffany Trump’s mum is Ivana Trump??
This morning, I asked AI if any optimisations could be made to my CSS, it said yes… then churned out the same CSS in Gemini, Grok, and Claude!!!
Any update on Scoped Custom Element registries? Thanks @webdevs.firefox.com
December 21, 2025 at 10:07 PM
Any update on Scoped Custom Element registries? Thanks @webdevs.firefox.com
Reposted by Jack
Check out all the revised demos of Grid Lanes in Safari Technology Preview 234!
webkit.org/demos/grid3/
webkit.org/demos/grid3/
December 20, 2025 at 1:31 AM
Check out all the revised demos of Grid Lanes in Safari Technology Preview 234!
webkit.org/demos/grid3/
webkit.org/demos/grid3/
Peter Pan 2003 live action is one of my favourite films. Paired with a lovely score.
a boy and a girl are sitting next to each other and smiling at each other .
ALT: a boy and a girl are sitting next to each other and smiling at each other .
media.tenor.com
December 21, 2025 at 6:27 PM
Peter Pan 2003 live action is one of my favourite films. Paired with a lovely score.
What are people’s thoughts on SVG sprite maps? For custom icon libraries, what’s the approach people have had most success with for web? #html
December 21, 2025 at 2:24 PM
What are people’s thoughts on SVG sprite maps? For custom icon libraries, what’s the approach people have had most success with for web? #html
Does anyone still use the <noscript> tag to display a message stating enabling JS offers the best experience whilst browsing the site?
December 21, 2025 at 2:17 PM
Does anyone still use the <noscript> tag to display a message stating enabling JS offers the best experience whilst browsing the site?
Reposted by Jack
that's exactly what i entered!
but the moment they start asking for verification, i'm out
but the moment they start asking for verification, i'm out
December 20, 2025 at 4:01 PM
that's exactly what i entered!
but the moment they start asking for verification, i'm out
but the moment they start asking for verification, i'm out
How do you do “Design Tokens”?
Primitive to Semantic… do you go to component level?
What does your WTCG tokens file look like?
What is your single source of truth? The tokens JSON file or Figma/PenPot?
What unit do you use in your spacing tokens? PX or REM?
Primitive to Semantic… do you go to component level?
What does your WTCG tokens file look like?
What is your single source of truth? The tokens JSON file or Figma/PenPot?
What unit do you use in your spacing tokens? PX or REM?
December 16, 2025 at 12:07 PM
How do you do “Design Tokens”?
Primitive to Semantic… do you go to component level?
What does your WTCG tokens file look like?
What is your single source of truth? The tokens JSON file or Figma/PenPot?
What unit do you use in your spacing tokens? PX or REM?
Primitive to Semantic… do you go to component level?
What does your WTCG tokens file look like?
What is your single source of truth? The tokens JSON file or Figma/PenPot?
What unit do you use in your spacing tokens? PX or REM?
Reposted by Jack
Web Performance Calendar day 13 with Yoav Weiss (@yoav.ws) showing us a clever and creative way to ship *only* critical/necessary CSS for each page type (home, search, etc) while also avoiding duplicate code in the CSS bundles.
calendar.perfplanet.com/2025/how-to-...
calendar.perfplanet.com/2025/how-to-...
How to load CSS (fast)
Loading styles on the web is something that looks trivial at first.
You just add a <link rel=stylesheet> to your page (or <style> for inline styles) and you're done.
But if you wanted to load CSS fas...
calendar.perfplanet.com
December 13, 2025 at 9:19 AM
Web Performance Calendar day 13 with Yoav Weiss (@yoav.ws) showing us a clever and creative way to ship *only* critical/necessary CSS for each page type (home, search, etc) while also avoiding duplicate code in the CSS bundles.
calendar.perfplanet.com/2025/how-to-...
calendar.perfplanet.com/2025/how-to-...
Very happy seeing @custom-media media query rules being worked on.
A bunch of web platform features and bug fixes landed in Firefox 146. There'll be more videos about the highlights soon, but in the meantime, here's a summary: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146
Firefox 146 release notes for developers (Stable) - Mozilla | MDN
This article provides information about the changes in Firefox 146 that affect developers.
Firefox 146 was released on December 9, 2025.
developer.mozilla.org
December 10, 2025 at 12:25 PM
Very happy seeing @custom-media media query rules being worked on.
When will Invoker Commands API be added to WebKit Safari? 👀
November 17, 2025 at 8:46 PM
When will Invoker Commands API be added to WebKit Safari? 👀
Will the CSS colour-scheme property ever accept a value other than light/dark?
Otherwise is it more a grouping? Then say I have a light, dark, dim, bright, bright is a theme variation but clearly is a light scheme etc.
Otherwise is it more a grouping? Then say I have a light, dark, dim, bright, bright is a theme variation but clearly is a light scheme etc.
October 15, 2025 at 7:41 PM
Will the CSS colour-scheme property ever accept a value other than light/dark?
Otherwise is it more a grouping? Then say I have a light, dark, dim, bright, bright is a theme variation but clearly is a light scheme etc.
Otherwise is it more a grouping? Then say I have a light, dark, dim, bright, bright is a theme variation but clearly is a light scheme etc.
Reposted by Jack
So yes, you can pass WCAG AA and still fail to comply with the EAA’s digital product obligations...
The EAA goes beyond the technical compliance: it requires products to work seamlessly with assistive technologies and be usable across the full customer lifecycle. Not just pass UI-level checks.
The EAA goes beyond the technical compliance: it requires products to work seamlessly with assistive technologies and be usable across the full customer lifecycle. Not just pass UI-level checks.
August 18, 2025 at 8:01 AM
So yes, you can pass WCAG AA and still fail to comply with the EAA’s digital product obligations...
The EAA goes beyond the technical compliance: it requires products to work seamlessly with assistive technologies and be usable across the full customer lifecycle. Not just pass UI-level checks.
The EAA goes beyond the technical compliance: it requires products to work seamlessly with assistive technologies and be usable across the full customer lifecycle. Not just pass UI-level checks.
Reposted by Jack
🚀 Cross-browser NATIVE support for importing CSS files in #JavaScript is coming! The #firefox team has started work on #CSS module scripts.
Source: bugzilla.mozilla.org/show_bug.cgi...
Overview: github.com/WICG/webcomp...
#webdev
Source: bugzilla.mozilla.org/show_bug.cgi...
Overview: github.com/WICG/webcomp...
#webdev
August 19, 2025 at 8:39 AM
🚀 Cross-browser NATIVE support for importing CSS files in #JavaScript is coming! The #firefox team has started work on #CSS module scripts.
Source: bugzilla.mozilla.org/show_bug.cgi...
Overview: github.com/WICG/webcomp...
#webdev
Source: bugzilla.mozilla.org/show_bug.cgi...
Overview: github.com/WICG/webcomp...
#webdev
Reposted by Jack
No need to write Web Components like:
𝙨𝙪𝙥𝙚𝙧();
𝙩𝙝𝙞𝙨.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'});
𝙩𝙝𝙞𝙨.𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = ``
you can write:
𝙨𝙪𝙥𝙚𝙧()
.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'})
.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = ``
#webcomponents
𝙨𝙪𝙥𝙚𝙧();
𝙩𝙝𝙞𝙨.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'});
𝙩𝙝𝙞𝙨.𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = ``
you can write:
𝙨𝙪𝙥𝙚𝙧()
.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'})
.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = ``
#webcomponents
June 2, 2025 at 12:40 PM
No need to write Web Components like:
𝙨𝙪𝙥𝙚𝙧();
𝙩𝙝𝙞𝙨.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'});
𝙩𝙝𝙞𝙨.𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = ``
you can write:
𝙨𝙪𝙥𝙚𝙧()
.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'})
.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = ``
#webcomponents
𝙨𝙪𝙥𝙚𝙧();
𝙩𝙝𝙞𝙨.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'});
𝙩𝙝𝙞𝙨.𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = ``
you can write:
𝙨𝙪𝙥𝙚𝙧()
.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'})
.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = ``
#webcomponents
Reposted by Jack
Design tokens drive clarity, not confusion. Naming, structure, and theming make UI decisions scalable and understandable.
#designsystem #designtokens #ui #ux #design #productdesign #webcomponents
#designsystem #designtokens #ui #ux #design #productdesign #webcomponents
June 3, 2025 at 4:02 PM
Design tokens drive clarity, not confusion. Naming, structure, and theming make UI decisions scalable and understandable.
#designsystem #designtokens #ui #ux #design #productdesign #webcomponents
#designsystem #designtokens #ui #ux #design #productdesign #webcomponents
Reposted by Jack
Skipiddy Skip Links Component For Greater Accessibility - Frontend Engineering Explained #accessibility
www.youtube.com/watch?v=PnIx...
www.youtube.com/watch?v=PnIx...
Skipiddy Skip Links Component For Greater Accessibility - Frontend Engineering Explained #webdev
YouTube video by Schalk Neethling
www.youtube.com
April 21, 2025 at 8:47 PM
Skipiddy Skip Links Component For Greater Accessibility - Frontend Engineering Explained #accessibility
www.youtube.com/watch?v=PnIx...
www.youtube.com/watch?v=PnIx...
Reposted by Jack
The 3 different types of popover in one toolbar UI:
April 23, 2025 at 2:08 PM
The 3 different types of popover in one toolbar UI:
Hopefully this reaches design tokens ppl :)
How does the 3 tier design token system work when someone has a simple colour palette? E.g. No red-100:900, just a light red, red, dark red.
I think im overthinking it but just wanna visualise and understand how it slots in.
Thanks!
#DesignTokens
How does the 3 tier design token system work when someone has a simple colour palette? E.g. No red-100:900, just a light red, red, dark red.
I think im overthinking it but just wanna visualise and understand how it slots in.
Thanks!
#DesignTokens
April 23, 2025 at 7:29 AM
Hopefully this reaches design tokens ppl :)
How does the 3 tier design token system work when someone has a simple colour palette? E.g. No red-100:900, just a light red, red, dark red.
I think im overthinking it but just wanna visualise and understand how it slots in.
Thanks!
#DesignTokens
How does the 3 tier design token system work when someone has a simple colour palette? E.g. No red-100:900, just a light red, red, dark red.
I think im overthinking it but just wanna visualise and understand how it slots in.
Thanks!
#DesignTokens
@mayank.co Sorry for @‘ting you directly. I am just looking at your reset and was hoping you could expand on why the line height is set on the html instead of the body. I usually pop it on the body, just wondering the benefits/thinking behind applying it on the html? Thanks
April 8, 2025 at 11:42 AM
@mayank.co Sorry for @‘ting you directly. I am just looking at your reset and was hoping you could expand on why the line height is set on the html instead of the body. I usually pop it on the body, just wondering the benefits/thinking behind applying it on the html? Thanks