Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Devon Govett Profile picture
Devon Govett
@devongovett
Creator of @parceljs. Engineer @adobe working on React Aria and React Spectrum.
Mar 18 • 8 tweets • 3 min read
Happy to announce Parcel v2.14, now with support for React Server Components! 🥳

RSCs can be integrated into client-rendered apps, server rendered, or statically rendered at build time.

Also: rust MDX compiler, create-parcel CLI, new error overlay, and native import maps. Screenshot of code sample: $ parcel server.tsx // server.tsx import express from 'express'; import {renderRequest} from '@parcel/rsc/node'; import {Page} from './Page'; const app = express(); app.get('/', async (req, res) => { await renderRequest(req, res, <Page />); }); app.listen(3000); // Page.tsx "use server-entry"; export function Page() { return ( <html> <body> <h1>Hello world!</h1> <Client /> </body> </html> ); } Blog post:

Try it out: npm create parcel react-server my-rsc-appparceljs.org/blog/v2-14-0/
Jan 15 • 5 tweets • 3 min read
New React Aria release! 🎁

🔎 Autocomplete alpha
📽️ CSS transition support in addition to keyframes
📆 Custom Calendar first day of week
🧪 Unit test utility package for ARIA patterns
🎯 Removed custom hit testing in usePress
🐞 and plenty of bug fixes!

react-spectrum.adobe.com/releases/2025-… The Autocomplete component is similar to a ComboBox, but designed to support use cases like command palettes and searchable menus where the text input is a sibling of the suggestion list rather than a separate popover.

react-spectrum.adobe.com/react-aria/Aut…Code example showing an Autocomplete component with a filter prop. Inside is a SearchField and a Menu with several MenuItems.
Dec 20, 2023 • 4 tweets • 2 min read
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-…
Nov 9, 2023 • 5 tweets • 3 min read
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 React Aria Components RC banner showing built-in form validation and new toolbar component. The form has email and password fields and a checkbox labeled "I agree to the terms of service". The email field is marked invalid with a message "An account with this email already exists" under it, and the checkbox is not checked with an error "You must agree to the terms of service. Sign up and Log in buttons are below the form. The toolbar component includes a group of buttons representing text formatting controls including bold, italic, underline, and left, center, righ... 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…
Code example showing a Form that accepts a server action and validation errors as props from React’s useFormState hook. The form contains a TextField with name=“email” type=“email” and isRequired props, and contains a FieldError component. The serverAction function returns an errors object with the string "This account already exists" for the email field.
Oct 11, 2023 • 9 tweets • 4 min read
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. 🧵 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.
Feb 25, 2023 • 6 tweets • 2 min read
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.
Nov 16, 2022 • 4 tweets • 2 min read
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!
Mar 17, 2022 • 7 tweets • 2 min read
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.
May 8, 2021 • 4 tweets • 1 min read
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.
Jun 20, 2020 • 8 tweets • 3 min read
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.
Apr 9, 2020 • 8 tweets • 3 min read
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…
Mar 9, 2020 • 4 tweets • 2 min read
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. Image
Nov 22, 2019 • 6 tweets • 1 min read
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.
Aug 1, 2019 • 9 tweets • 5 min read
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.