Julz
@julzmon.bsky.social
Reposted by Julz
I shared some thoughts on handling breaking changes in design systems for @zeroheight.com.
A bunch of lessons learnt from my time leading design systems at Spotify.
A bunch of lessons learnt from my time leading design systems at Spotify.
How do you approach breaking changes in a design system without causing chaos? 🤔
In this post, @shaunbent.co.uk covers 7 elements he found most valuable when building a strategy around breaking changes, sharing lessons from leading #designsystems at Spotify.
Read it on the @zeroheight.com blog:
In this post, @shaunbent.co.uk covers 7 elements he found most valuable when building a strategy around breaking changes, sharing lessons from leading #designsystems at Spotify.
Read it on the @zeroheight.com blog:
Handling breaking changes in a design system without causing chaos - zeroheight
Shaun Bent suggests 7 practical elements to focus on when building a strategy for handling breaking changes, sharing lessons from leading design systems at Spotify.
zeroheight.com
February 9, 2026 at 11:29 AM
I shared some thoughts on handling breaking changes in design systems for @zeroheight.com.
A bunch of lessons learnt from my time leading design systems at Spotify.
A bunch of lessons learnt from my time leading design systems at Spotify.
Reposted by Julz
watching @wesbos.com speed-run CSS on @syntax.fm is the kind of compelling content i wanna watch on my off day
www.youtube.com/watch?v=S98u...
www.youtube.com/watch?v=S98u...
This nav broke my brain (coding speed run)
YouTube video by Syntax
www.youtube.com
February 1, 2026 at 12:23 AM
watching @wesbos.com speed-run CSS on @syntax.fm is the kind of compelling content i wanna watch on my off day
www.youtube.com/watch?v=S98u...
www.youtube.com/watch?v=S98u...
Reposted by Julz
Can you make toast messages accessible?
Last week I posted about how Github’s design system banned toast messages because they’re hard to use and inaccessible.
I received 135 comments, including pushback from accessibility specialists who insist that toast messages can be made accessible.
Last week I posted about how Github’s design system banned toast messages because they’re hard to use and inaccessible.
I received 135 comments, including pushback from accessibility specialists who insist that toast messages can be made accessible.
December 1, 2025 at 12:15 PM
Can you make toast messages accessible?
Last week I posted about how Github’s design system banned toast messages because they’re hard to use and inaccessible.
I received 135 comments, including pushback from accessibility specialists who insist that toast messages can be made accessible.
Last week I posted about how Github’s design system banned toast messages because they’re hard to use and inaccessible.
I received 135 comments, including pushback from accessibility specialists who insist that toast messages can be made accessible.
Reposted by Julz
I'm a bit late, but this week's Web Weekly will hit all the inboxes in just a little bit!
If you care about the web platform and browser features, you should check it out!
www.stefanjudis.com/blog/web-wee...
If you care about the web platform and browser features, you should check it out!
www.stefanjudis.com/blog/web-wee...
December 1, 2025 at 10:09 PM
I'm a bit late, but this week's Web Weekly will hit all the inboxes in just a little bit!
If you care about the web platform and browser features, you should check it out!
www.stefanjudis.com/blog/web-wee...
If you care about the web platform and browser features, you should check it out!
www.stefanjudis.com/blog/web-wee...
Reposted by Julz
🎉 Just published: a new Design Tokens article 🎉
Create consistent utility classes directly from design tokens for both flexibility _and_ consistency.
Generating Utility Classes from Design Tokens using Style Dictionary
www.alwaystwisted.com/articles/a-d...
🙏🖤
#DesignSystems #DesignTokens #CSS
Create consistent utility classes directly from design tokens for both flexibility _and_ consistency.
Generating Utility Classes from Design Tokens using Style Dictionary
www.alwaystwisted.com/articles/a-d...
🙏🖤
#DesignSystems #DesignTokens #CSS
Generating Utility Classes from Design Tokens using Style Dictionary
Generate Utility Class CSS from design tokens using Style Dictionary for seamless design-to-development workflows and collaboration and snowflakes.
www.alwaystwisted.com
November 21, 2025 at 12:58 PM
🎉 Just published: a new Design Tokens article 🎉
Create consistent utility classes directly from design tokens for both flexibility _and_ consistency.
Generating Utility Classes from Design Tokens using Style Dictionary
www.alwaystwisted.com/articles/a-d...
🙏🖤
#DesignSystems #DesignTokens #CSS
Create consistent utility classes directly from design tokens for both flexibility _and_ consistency.
Generating Utility Classes from Design Tokens using Style Dictionary
www.alwaystwisted.com/articles/a-d...
🙏🖤
#DesignSystems #DesignTokens #CSS
Reposted by Julz
CSS :is() :where() the Magic Happens, by @[email protected]:
https://matthiasott.com/notes/css-is-where-the-magic-happens
#css #selectors #cascade
https://matthiasott.com/notes/css-is-where-the-magic-happens
#css #selectors #cascade
CSS :is() :where() the Magic Happens · Matthias Ott
Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.
matthiasott.com
October 27, 2025 at 8:30 PM
CSS :is() :where() the Magic Happens, by @[email protected]:
https://matthiasott.com/notes/css-is-where-the-magic-happens
#css #selectors #cascade
https://matthiasott.com/notes/css-is-where-the-magic-happens
#css #selectors #cascade
Reposted by Julz
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Ex-Masonry Display Type Keyword Poll
See https://github.com/w3c/csswg-drafts/issues/12022 for context.
This poll intentionally leaves out `masonry` as an option, see https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-34172962...
docs.google.com
October 27, 2025 at 7:53 PM
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Reposted by Julz
Today's lunch video is "Cascading Layers of !mportance" - "Cascade Layers are now widely available, with the potential to fundamentally change how we think about the cascade and how we collaborate across design systems, component libraries, & third-party tools." #CSS www.youtube.com/watch?v=4Pkh...
Cascading Layers of !mportance - Miriam Suzanne | JSHeroes 2025
The Cascade is the underlying algorithm that applies our styles the web, and a main target of frustration when our styles go bad. But why is it there, how is it changing, and why should we care?…
www.youtube.com
August 22, 2025 at 6:30 PM
Today's lunch video is "Cascading Layers of !mportance" - "Cascade Layers are now widely available, with the potential to fundamentally change how we think about the cascade and how we collaborate across design systems, component libraries, & third-party tools." #CSS www.youtube.com/watch?v=4Pkh...
Reposted by Julz
enjoying all the recent (or not so recent) updates to @projectwallace.com's (free) CSS analyser page, including a dedicated 'design tokens' section, like this –
www.projectwallace.com/design-token...
lovely stuff @veneman.dev
🙏 🖤
www.projectwallace.com/design-token...
lovely stuff @veneman.dev
🙏 🖤
CSS Design Tokens Analyzer - Project Wallace
Grab all Design Tokens from a page using it's CSS. Enter a URL of paste in your raw CSS and get instant analysis.
www.projectwallace.com
July 1, 2025 at 10:21 AM
enjoying all the recent (or not so recent) updates to @projectwallace.com's (free) CSS analyser page, including a dedicated 'design tokens' section, like this –
www.projectwallace.com/design-token...
lovely stuff @veneman.dev
🙏 🖤
www.projectwallace.com/design-token...
lovely stuff @veneman.dev
🙏 🖤
Reposted by Julz
Here's my monthly post on what's landed on the web platform with the browser releases during June. It's been another busy month! web.dev/blog/web-pla...
New to the web platform in June | Blog | web.dev
Discover some of the interesting features that have landed in stable and beta web browsers during June 2025.
web.dev
July 1, 2025 at 9:00 AM
Here's my monthly post on what's landed on the web platform with the browser releases during June. It's been another busy month! web.dev/blog/web-pla...
Reposted by Julz
The Component Gallery is a collection of interface components from real-world design systems. A very helpful reference for designers that's definitely worth bookmarking! Thank you @inbn.dev Great work!
component.gallery
component.gallery
The Component Gallery
An up-to-date repository of interface components based on examples from the world of design systems, designed to be a reference for anyone building user interfaces.
component.gallery
June 28, 2025 at 2:42 AM
The Component Gallery is a collection of interface components from real-world design systems. A very helpful reference for designers that's definitely worth bookmarking! Thank you @inbn.dev Great work!
component.gallery
component.gallery
Reposted by Julz
This is a powerful browser DevTools hack 💡
You can get a full overview of any website’s CSS design system like colors, fonts, contrast issues, media-queries and more!
Watch the video for a quick demo 🎥
Follow @rammcodes.bsky.social for more 💎
#html #css #javascript #reactjs #100daysofcode
You can get a full overview of any website’s CSS design system like colors, fonts, contrast issues, media-queries and more!
Watch the video for a quick demo 🎥
Follow @rammcodes.bsky.social for more 💎
#html #css #javascript #reactjs #100daysofcode
June 26, 2025 at 9:37 AM
This is a powerful browser DevTools hack 💡
You can get a full overview of any website’s CSS design system like colors, fonts, contrast issues, media-queries and more!
Watch the video for a quick demo 🎥
Follow @rammcodes.bsky.social for more 💎
#html #css #javascript #reactjs #100daysofcode
You can get a full overview of any website’s CSS design system like colors, fonts, contrast issues, media-queries and more!
Watch the video for a quick demo 🎥
Follow @rammcodes.bsky.social for more 💎
#html #css #javascript #reactjs #100daysofcode
Reposted by Julz
Built a little ROI calculator for @zeroheight.com so you can show off how much money you can save with a design system, from savings per component, to per release, to how much time saved.
Check it out: zeroheight.com/resources/ro...
Check it out: zeroheight.com/resources/ro...
ROI Calculator
Calculate the ROI of your design system with zeroheight using industry benchmarks
zeroheight.com
June 26, 2025 at 1:18 PM
Built a little ROI calculator for @zeroheight.com so you can show off how much money you can save with a design system, from savings per component, to per release, to how much time saved.
Check it out: zeroheight.com/resources/ro...
Check it out: zeroheight.com/resources/ro...
Reposted by Julz
ARIA! It exists and on a long enough timeline you'll need to use it. Here's how to get into the right headspace to do so! #a11y www.smashingmagazine.com/2025/06/what...
What I Wish Someone Told Me When I Was Getting Into ARIA — Smashing Magazine
[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is an inevitability when working on web accessibility. That said, it’s everyone’s first time learning ...
www.smashingmagazine.com
June 16, 2025 at 7:16 PM
ARIA! It exists and on a long enough timeline you'll need to use it. Here's how to get into the right headspace to do so! #a11y www.smashingmagazine.com/2025/06/what...
Reposted by Julz
Reposted by Julz
I keep the Trump family web of crypto involvement up-to-date at: www.mollywhite.net/etc/trump-fa...
The quid pro quo list is at: followthecrypto.org/quidproquo
The quid pro quo list is at: followthecrypto.org/quidproquo
Quid Pro Quo | Follow the Crypto
Cryptocurrency companies are reaping the benefits of their contributions to Trump and other pro-crypto politicians.
followthecrypto.org
June 19, 2025 at 6:52 PM
I keep the Trump family web of crypto involvement up-to-date at: www.mollywhite.net/etc/trump-fa...
The quid pro quo list is at: followthecrypto.org/quidproquo
The quid pro quo list is at: followthecrypto.org/quidproquo
Reposted by Julz
I should have been doing other things, but someone asked about selecting the last row in an auto grid and it sent me down a rabbit hole, but got it working.
The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.
codepen.io/kevinpowell/...
The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.
codepen.io/kevinpowell/...
June 19, 2025 at 6:44 PM
I should have been doing other things, but someone asked about selecting the last row in an auto grid and it sent me down a rabbit hole, but got it working.
The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.
codepen.io/kevinpowell/...
The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.
codepen.io/kevinpowell/...
Reposted by Julz
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 Julz
Styling HTML form controls is something web designers & developers have wanted for years! My team is working on a solution — apply `appearance: base` and switch to a new interoperable consistent default control. Then override it using new pseudo-elements. See the details: drafts.csswg.org/css-forms/
CSS Form Control Styling Level 1
drafts.csswg.org
March 5, 2025 at 5:41 PM
Styling HTML form controls is something web designers & developers have wanted for years! My team is working on a solution — apply `appearance: base` and switch to a new interoperable consistent default control. Then override it using new pseudo-elements. See the details: drafts.csswg.org/css-forms/
Reposted by Julz
Such an exciting day.
I proposed if() last year and got CSS WG consensus to add it to the spec on my birthday (!) last June.
Now, less than a year later, it ships in the most widely used browser.
I think it can be a game changer for design systems, especially together with ident() & revert-rule.
I proposed if() last year and got CSS WG consensus to add it to the spec on my birthday (!) last June.
Now, less than a year later, it ships in the most widely used browser.
I think it can be a game changer for design systems, especially together with ident() & revert-rule.
CSS if() function landed today(!!!) in Chrome 137 🥳
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
CSS if() functions & reading-flow (in Chrome 137)
YouTube video by Una Kravets
youtu.be
June 2, 2025 at 1:31 PM
Such an exciting day.
I proposed if() last year and got CSS WG consensus to add it to the spec on my birthday (!) last June.
Now, less than a year later, it ships in the most widely used browser.
I think it can be a game changer for design systems, especially together with ident() & revert-rule.
I proposed if() last year and got CSS WG consensus to add it to the spec on my birthday (!) last June.
Now, less than a year later, it ships in the most widely used browser.
I think it can be a game changer for design systems, especially together with ident() & revert-rule.
Reposted by Julz
CSS if() function landed today(!!!) in Chrome 137 🥳
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
CSS if() functions & reading-flow (in Chrome 137)
YouTube video by Una Kravets
youtu.be
May 27, 2025 at 9:29 PM
CSS if() function landed today(!!!) in Chrome 137 🥳
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
Reposted by Julz
Disappointed #figma still didn't release relative units. New features feel half backed. Draw adds some value but now people have to be careful not to export giant SVGs, would be nice if they added export size estimation.
May 10, 2025 at 2:44 AM
Disappointed #figma still didn't release relative units. New features feel half backed. Draw adds some value but now people have to be careful not to export giant SVGs, would be nice if they added export size estimation.
Reposted by Julz
During my livestream yesterday, I talked about Figma Sites for a little bit. I've broken it off into a short, stand-alone video.
I don't normally like bashing a company, but when a company of Figma's size makes a product this bad, I think it's important to call them out on it.
youtu.be/ZsFIvULxkHI
I don't normally like bashing a company, but when a company of Figma's size makes a product this bad, I think it's important to call them out on it.
youtu.be/ZsFIvULxkHI
Figma Sites is worse than you might have thought
YouTube video by Kevin Powell
youtu.be
May 9, 2025 at 12:44 PM
During my livestream yesterday, I talked about Figma Sites for a little bit. I've broken it off into a short, stand-alone video.
I don't normally like bashing a company, but when a company of Figma's size makes a product this bad, I think it's important to call them out on it.
youtu.be/ZsFIvULxkHI
I don't normally like bashing a company, but when a company of Figma's size makes a product this bad, I think it's important to call them out on it.
youtu.be/ZsFIvULxkHI
Reposted by Julz
Have you ever tried to remove margins from content with `:first-child { margin-block-start: 0; } :last-child { margin-block-end: 0; }` only to feel icky, knowing the code is fragile, just waiting for the layout to break with different HTML?
Try `margin-trim` instead.
webkit.org/blog/16854/m...
Try `margin-trim` instead.
webkit.org/blog/16854/m...
Easier layout with margin-trim
If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.
webkit.org
May 1, 2025 at 2:35 PM
Have you ever tried to remove margins from content with `:first-child { margin-block-start: 0; } :last-child { margin-block-end: 0; }` only to feel icky, knowing the code is fragile, just waiting for the layout to break with different HTML?
Try `margin-trim` instead.
webkit.org/blog/16854/m...
Try `margin-trim` instead.
webkit.org/blog/16854/m...