Julz
@julzmon.bsky.social
Reposted by Julz
CSS :is() :where() the Magic Happens, by @matthiasott@mastodon.social:
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 @matthiasott@mastodon.social:
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...
Reposted by Julz
Really excited that the Design Tokens Community Group has published a new version of the Color module, giving the format a robust way to express colors in many color spaces with high precision. Congrats to everyone who contributed! tr.designtokens.org/color/
Design Tokens Color Module
tr.designtokens.org
April 20, 2025 at 2:41 PM
Really excited that the Design Tokens Community Group has published a new version of the Color module, giving the format a robust way to express colors in many color spaces with high precision. Congrats to everyone who contributed! tr.designtokens.org/color/
Reposted by Julz
📢 The Internet Archive needs your help.
At a time when information is being rewritten or erased online, a $700 million lawsuit from major record labels threatens to destroy the Wayback Machine.
Tell the labels to drop the 78s lawsuit.
👉 Sign our open letter: www.change.org/p/defend-the...
🧵⬇️
At a time when information is being rewritten or erased online, a $700 million lawsuit from major record labels threatens to destroy the Wayback Machine.
Tell the labels to drop the 78s lawsuit.
👉 Sign our open letter: www.change.org/p/defend-the...
🧵⬇️
April 17, 2025 at 4:51 PM
📢 The Internet Archive needs your help.
At a time when information is being rewritten or erased online, a $700 million lawsuit from major record labels threatens to destroy the Wayback Machine.
Tell the labels to drop the 78s lawsuit.
👉 Sign our open letter: www.change.org/p/defend-the...
🧵⬇️
At a time when information is being rewritten or erased online, a $700 million lawsuit from major record labels threatens to destroy the Wayback Machine.
Tell the labels to drop the 78s lawsuit.
👉 Sign our open letter: www.change.org/p/defend-the...
🧵⬇️
Reposted by Julz
Friendly reminder that I shared *an extensive* guide to ARIA live regions so you can learn more about:
- what they are
- what to use them for
- how to use them
- what *not* to use them for (!important)
Part 1: www.sarasoueidan.com/blog/accessi...
Part 2: www.sarasoueidan.com/blog/accessi...
#a11y
- what they are
- what to use them for
- how to use them
- what *not* to use them for (!important)
Part 1: www.sarasoueidan.com/blog/accessi...
Part 2: www.sarasoueidan.com/blog/accessi...
#a11y
Accessible notifications with ARIA Live Regions (Part 1)
– The personal website of Sara Soueidan, inclusive design engineer
www.sarasoueidan.com
March 10, 2025 at 12:32 PM
Friendly reminder that I shared *an extensive* guide to ARIA live regions so you can learn more about:
- what they are
- what to use them for
- how to use them
- what *not* to use them for (!important)
Part 1: www.sarasoueidan.com/blog/accessi...
Part 2: www.sarasoueidan.com/blog/accessi...
#a11y
- what they are
- what to use them for
- how to use them
- what *not* to use them for (!important)
Part 1: www.sarasoueidan.com/blog/accessi...
Part 2: www.sarasoueidan.com/blog/accessi...
#a11y
Reposted by Julz
I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 frontendmasters.com/blog/pure-cs...
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.
#CSS #pattern #gradient #halftone
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.
#CSS #pattern #gradient #halftone
Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost
A halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be do...
frontendmasters.com
December 4, 2024 at 11:06 AM
I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 frontendmasters.com/blog/pure-cs...
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.
#CSS #pattern #gradient #halftone
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.
#CSS #pattern #gradient #halftone