Recent dev notes

Are we annoyed with React, or just the ones who use it?

Any time the phrase is React alternative is uttered, a pigeon is dispatched from a Silicon Valley high rise directly to my window with an olive branch in its mouth. I become best friends with the pigeon for a max of three days and then become bored. I send it back on its way and go back to writing vanilla JS. Many pigeons have had their metaphorical hearts broken due to this unhealthy cycle.

The latest pigeon to peck on my window is Hyper, a "standards-first React alternative" created by Nue.

Reading through the announcement, I couldn't help but notice the shots being thrown, not at React, but at the thought leaders in the React ecosystem, specifically the ones who have been preaching some version of the CSS-in-JS mantra.

From the Hyper announcement:

This kind of design swap becomes a large programming effort when design choices are coupled into components via CSS-in-JS or Tailwind. For example, in ShadCN, to change the typography of your headings, you need to edit alert-dialog.tsx, alert.tsx, card.tsx, dialog.tsx, drawer.tsx, and sheet.tsx. This requires understanding of idioms like data-slot, {...props}, cn(), clsx(), and twMerge().

If it wasn't clear that was a critique of the ecosystem, not React itself, it becomes more obvious later.

While you definitely can decouple your styling from your React components, this pattern is rarely seen in real-world applications. Instead, the use of vanilla CSS is often discouraged due to concerns about "global namespace" pollution or other reasons.

For those who don't use React on real dev teams, yes, it's encouraged to couple your styling and component logic. And now there's a whole alternative based on the opinion that that is a bad idea.¹

I didn't immediately start trying to build something with this React alternative, mainly because the "standards-first" branding made me a bit suspicious from the get go. A standards-first component system already exists; it's called web components.²

But reading through the announcement was a healthy reminder of how tool usage can be more important than the tool itself. Would React development be significantly less annoying if the files weren't filled with dozens of unneeded useEffect hooks and topped with 50+ lines of CSS tucked under a backtick? Maybe. Probably.

TIL: Logical properties

You could specify something like border-top: 1rem blue dashed, but this will likely look weird if the direction or writing-mode are specified for languages that read right to left or bottom to top. top in this scenario is specific to us English readers who read left to right and top to bottom.

Enter logical properties. Instead, a rule of border-inline-start: 1rem blue dashed is what we really want. For top-to-bottom language, inline-start will result in top. Other languages will get inline-start defined as expected for that language. Same for inline-end (right for English readers), block-start (top for English readers), and block-end (bottom for English readers).

I knew these things existed but I didn't grok the why until this week. (I also don't think I realized these were called logical properties.) It's free i18n support if you can change your CSS muscle memory to stop using top/bottom/left/end. Cool.