Announcing React Aria Components v1.0.0! 🥳

Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.

react-spectrum.adobe.com/react-aria/ind… New in this release 🚀

• New landing page
• Downloadable Storybook starter kit
• Example CSS theme
• Optimized localized strings via build plugins and SSR
• Built-in "use client" for RSC
• Directory support in FileTrigger
• Ability for Menu to match trigger width
• Fixed using DialogTrigger and TooltipTrigger together
• Improved Tailwind plugin

Full release notes: react-spectrum.adobe.com/releases/2023-…

React Aria Components has reached RC! 🚀

• Built-in form validation
↳ Native HTML constraints
↳ Custom validation functions
↳ Server validation – designed for React Server Actions
• New Toolbar component
• Improved Framer Motion support
• Hover events
• Simpler docs CSS Our new form validation API is powered by native HTML constraint validation, with a declarative API to display error messages with custom styles. It also supports server validation that works seamlessly with React Server Actions, Remix, Zod, and more! 🤩

react-spectrum.adobe.com/react-aria/for…

Ok so, how did we make Parcel's bundling phase 15x faster (7x overall)? Through the magic of bitsets, with a sprinkle of WASM! 🚀

All of this was JS data structure changes, no Rust rewrite or algorithmic changes here. Even constant factors can add up. 🧵

https://twitter.com/devongovett/status/1712152854339998027

In our bundling algorithm, we need to build a data structure that determines which bundle roots (e.g. entries, dynamic imports, etc.) each asset (module) is reachable from. We later use this to determine which bundle to place each asset in so there is minimal duplication.

Easy to forget, but the debate about signals is the same one we had about 2-way data binding vs unidirectional data flow 10 years ago. Signals are mutable state! They’re bindings with a new name. The simplicity of UI as a function of state is lost when updates flow unpredictably. Say what you want about hooks and performance, but the programming model of writing a function that simply maps props/state to JSX is way simpler than thinking about how each individual value flows through your whole app.

Announcing React Aria's drag and drop hooks! 🐉

♿️ Full keyboard and screen reader parity
🗃 Reorder, insert, or drop on list items
✅ Multiple selection
📱 Interoperable with native dnd
💾 File and directory support
🤩 Customizable UI and interactions

react-spectrum.adobe.com/blog/drag-and-… Drag and drop is a very common interaction, but it is rarely made accessible. We wanted to change this.

React Aria provides a unified drag and drop API that works with mouse and touch, as well as keyboard and screen readers – including on mobile!

How to write fast code: reduce memory access. All of these tips stem from that:

1. Reduce the size of your data structures so more can fit in CPU cache.
2. Replace strings with numbers.
3. Make use of bit flags. Don’t waste space on booleans.
4. Access memory linearly. 5. Make judicious use of the heap. Inline the most commonly accessed values, move large or less common ones to the heap.
6. Model data like a database. Normalize commonly used structures and pass ids rather than copying them around.

I’ve been using Tailwind to build a new landing page for Parcel 2 lately. Really enjoying it! 🤩

I think what’s most under-appreciated by critics is that it’s not just a 1:1 mapping of classes to CSS properties. It helps you create better designs more quickly! 🧵 As a non-designer, choosing colors is the hardest part of creating a website for me. Tailwind includes an expertly crafted color system by default, so you don’t need to spend time choosing your own colors if you don’t want to. If you do, you can override everything.

There's a very common misconception that pure HTML with no JS is somehow more accessible. Unless you're building a very basic content site with no interactivity, that's just plain false!

Until the platform improves, you need JS to properly implement keyboard navigation.

Thread. Building a great keyboard navigation experience requires understanding composite components and the tab sequence. Composite components represent a single tab stop, which contain child elements that are navigable typically using the arrow keys.

This is impossible without JS.

I've been working on an accessible custom select component for the last few weeks. By far one of the most difficult components I've ever built. Getting all the tiny interactions right, and emulating native behavior across platforms is so challenging!

Thread... 🧵 Everything is implemented according to the collapsible listbox ARIA pattern. The arrow keys can be used to open the listbox and navigate the options, along with Page Up/Page Down, Home/End. The Enter or Space keys select an option. Escape dismisses it.

w3.org/TR/wai-aria-pr…

SVG is a massively underused technology in web development.

Why is it so common to build everything out of divs with hacks like box shadows, border radius, :before/:after pseudo elements, etc.?

Building complex shapes using SVG is so much more straightforward and maintainable. As an example, here's the code for a switch component using SVG. No box shadow hacks, no border radius tricks, no :before and :after elements. So much clearer and more maintainable.

Exposing the internal DOM structure of the components in your design system is very dangerous and you're probably doing it unintentionally.

* className/style
* DOM prop forwarding
* Ref forwarding

Changes to internal DOM structure or styling can break usage of these props. Instead of forwarding all DOM props directly, you should expose an interface specific to each component. Intentionally consider what properties should be allowed for a given component (e.g. events, data attrs, etc.) and forward those to the most appropriate internal DOM element.

Here are some examples where Flow is great compared to TypeScript.

I was asked by many people after my tweet yesterday, so here you go.

I'm sure there are more examples. It is hard to tweet things out of context, but I've done my best to make small examples.

Thread... Everything in TS is nullable by default. Yes I know about `strictNullChecks`, but not checking for null is one of the most common errors, and TypeScript's job is to catch this kind of thing.

This program is completely valid according to TS, but will crash immediately at runtime.