Ben
@benrajalu.net
Frontend Dev at BlaBlaCar - Design System Engineer
Trying to build up the habit again, this time with an article about component architecture in design systems built for scale. There's a lot of experience and experiments behind it, and once you try it seems obvious.
benrajalu.net/articles/ds-...
#designsystem #ui #ux #frontend
benrajalu.net/articles/ds-...
#designsystem #ui #ux #frontend
Building components for scale
Design systems are built around component libraries, it's their core. How you choose to build those components is critical.
benrajalu.net
November 4, 2025 at 7:17 PM
Trying to build up the habit again, this time with an article about component architecture in design systems built for scale. There's a lot of experience and experiments behind it, and once you try it seems obvious.
benrajalu.net/articles/ds-...
#designsystem #ui #ux #frontend
benrajalu.net/articles/ds-...
#designsystem #ui #ux #frontend
Getting back into the groove of writing about design systems. And I want to start again by looking at one of the hardest truths to swallow when working in the field.
Your core design system value is for your business to decide
A design system is many things, but the one thing that will keep it afloat is its business value.
benrajalu.net
October 5, 2025 at 4:36 PM
Getting back into the groove of writing about design systems. And I want to start again by looking at one of the hardest truths to swallow when working in the field.
Reposted by Ben
One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
A Friendly Introduction to SVG • Josh W. Comeau
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most imp...
www.joshwcomeau.com
July 21, 2025 at 3:11 PM
One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
Reposted by Ben
Loving these dialog demos from @nerdy.dev 😍🙏🔥
nerdy.dev/have-a-dialog
Such great UI patterns here! I particularly love the cursor styling when you hover on the ::backdrop area to indicate that the element can be closed in this demo:
codepen.io/argyleink/pe...
nerdy.dev/have-a-dialog
Such great UI patterns here! I particularly love the cursor styling when you hover on the ::backdrop area to indicate that the element can be closed in this demo:
codepen.io/argyleink/pe...
April 22, 2025 at 3:10 PM
Loving these dialog demos from @nerdy.dev 😍🙏🔥
nerdy.dev/have-a-dialog
Such great UI patterns here! I particularly love the cursor styling when you hover on the ::backdrop area to indicate that the element can be closed in this demo:
codepen.io/argyleink/pe...
nerdy.dev/have-a-dialog
Such great UI patterns here! I particularly love the cursor styling when you hover on the ::backdrop area to indicate that the element can be closed in this demo:
codepen.io/argyleink/pe...
Reposted by Ben
don't forget `touch-action: manipulation` for buttons on mobile
double taps shouldn't zoom
double taps shouldn't zoom
April 7, 2025 at 5:15 PM
don't forget `touch-action: manipulation` for buttons on mobile
double taps shouldn't zoom
double taps shouldn't zoom
Reposted by Ben
Oh dang this is super cool. WhoCanUse succinctly demonstrates how people with different types of colorblindness see different color choices: www.whocanuse.com
WhoCanUse
A tool that brings attention and understanding to how color contrast can affect people with different visual impairments.
www.whocanuse.com
February 7, 2025 at 8:50 PM
Oh dang this is super cool. WhoCanUse succinctly demonstrates how people with different types of colorblindness see different color choices: www.whocanuse.com
Reposted by Ben
30 #CSS scroll driven animation examples
which is your favorite?
- z-stack and slither are mine
nerdy.dev/scroll-drive...
which is your favorite?
- z-stack and slither are mine
nerdy.dev/scroll-drive...
Scroll Driven Animations Notebook · February 6, 2025
Website for Adam Argyle: Teacher, Speaker, CSSWG member, and creator of Open Props and VisBug.
nerdy.dev
February 6, 2025 at 6:34 PM
30 #CSS scroll driven animation examples
which is your favorite?
- z-stack and slither are mine
nerdy.dev/scroll-drive...
which is your favorite?
- z-stack and slither are mine
nerdy.dev/scroll-drive...
Reposted by Ben
🌠 A long-requested CSS feature is the ability to transition height between a known value (`height: 20rem`) and a derived one (`height: auto`).
A new global CSS property makes this possible now. 😄
html {
interpolate-size: allow-keywords;
}
More info in thread 🧵
A new global CSS property makes this possible now. 😄
html {
interpolate-size: allow-keywords;
}
More info in thread 🧵
January 7, 2025 at 4:09 PM
🌠 A long-requested CSS feature is the ability to transition height between a known value (`height: 20rem`) and a derived one (`height: auto`).
A new global CSS property makes this possible now. 😄
html {
interpolate-size: allow-keywords;
}
More info in thread 🧵
A new global CSS property makes this possible now. 😄
html {
interpolate-size: allow-keywords;
}
More info in thread 🧵
Reposted by Ben
📝 New post!
`aria-label` and `aria-labelledby` aren't allowed on divs, spans, and other static text elements out of the box, and *most* screenreaders won't announce them.
#accessibility #a11y
`aria-label` and `aria-labelledby` aren't allowed on divs, spans, and other static text elements out of the box, and *most* screenreaders won't announce them.
#accessibility #a11y
Don’t Use aria-label on Static Text Elements
Don’t use the aria-label or aria-labelledby attributes on divs, spans, or other elements representing static/noninteractive text-level semantics, unless you’re also updating roles.
benmyers.dev
December 7, 2024 at 7:57 PM
📝 New post!
`aria-label` and `aria-labelledby` aren't allowed on divs, spans, and other static text elements out of the box, and *most* screenreaders won't announce them.
#accessibility #a11y
`aria-label` and `aria-labelledby` aren't allowed on divs, spans, and other static text elements out of the box, and *most* screenreaders won't announce them.
#accessibility #a11y
Reposted by Ben
Reposted by Ben
bringing this tip over from the other site cause i used it again:
you can use `font-variant-numberic: tabular-nums;` in your CSS (on fonts that support this feature) to make your numerals occupy the same width — super useful for clocks, counters, etc :)
you can use `font-variant-numberic: tabular-nums;` in your CSS (on fonts that support this feature) to make your numerals occupy the same width — super useful for clocks, counters, etc :)
October 23, 2024 at 8:58 PM
bringing this tip over from the other site cause i used it again:
you can use `font-variant-numberic: tabular-nums;` in your CSS (on fonts that support this feature) to make your numerals occupy the same width — super useful for clocks, counters, etc :)
you can use `font-variant-numberic: tabular-nums;` in your CSS (on fonts that support this feature) to make your numerals occupy the same width — super useful for clocks, counters, etc :)