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.
- #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.
- #fun
- #hacking
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
Building an open/closed React component
A detailed recipe for building open/closed React components, plus a few tips.
- #lexical
Lexical, explained
An introduction to the Lexical text editor framework and the "Lexical, explained" series.
- #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.
- #css
- #frontend
Exclusive and targeted :hover styles with :has()
Using :has() to solve a decades-long CSS limitation.
- #math
Khan Academy Math - 100% completion guide
Achieve 100% mastery in every single math course on Khan Academy.
- #lexical
LexicalNode: the core of all nodes - Lexical, explained (part 3)
Let's go under the hood and see what LexicalNode does for us.
- #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!
Test article
Nothing to see here, keep walking.
- #js
- #fun
The unexpected complexity of list letter markers
Using math to solve the x, y, z, aa, ab, ac... problem.
- #lexical
What is a node? - Lexical, explained (part 2)
Exploring lexical nodes and the node tree.
- #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.