dio.la
Dani Guardiola’s blog
The open/closed component
A powerful pattern for building extensible UI components that achieve more with less.
Lexical state updates
A deep dive into how Lexical updates its state.
Colorful avatars
An interactive walkthrough of an algorithm to pick an avatar's color based on the user's initials.
Hacking RegExp to unlink myself from LinkedIn
No LinkedIn? No problem! Here's how I exploited weak validation to find a job anyway.
- #design-systems
- #js
The "everything bagel" of components
The Dalai Lama walks into a bagel shop and says, 'Can you make me one with everything?'
- #design-systems
- #js
The open/closed component
A powerful pattern for building extensible UI components that achieve more with less.
- #react
- #frontend
Colorful avatars
An interactive walkthrough of an algorithm to pick an avatar's color based on the user's initials.
- #react
- #frontend
useImageIsLoaded
A simple React hook to track the loading state of an image.
- #design-systems
- #js
Building an open/closed React component
A detailed recipe for building open/closed React components, plus a few tips.
- #design-systems
- #js
Why open/closed?
A deeper look into the advantages of open/closed components, and why you should Use The Platform™.
- #design-systems
- #js
Compound components
Draft.
- #css
- #frontend
Exclusive and targeted :hover styles with :has()
Using :has() to solve a decades-long CSS limitation.
- #design-systems
- #js
Open/closed components vs. design system constraints
The open/closed pattern seems to be at odds with the constrained nature of a design system, but I disagree!
- #design-systems
- #js
Where open/closed components shine
A few real-world examples of the open/closed pattern in action + awesome libraries that follow it.