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.
- #js
Try, return, finally: a curious JavaScript pattern
There's life beyond the return if you're willing to try.
- #lexical
- #js
Lexical state updates
A deep dive into how Lexical updates its state.
- #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.
- #js
- #fun
Two clever number .toString() tricks
Misusing the radix parameter for evil purposes is fun and easy... and it can go wrong!
- #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.
- #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!
- #js
- #fun
The unexpected complexity of list letter markers
Using math to solve the x, y, z, aa, ab, ac... problem.
- #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.