Devon Govett
banner
devongovett.me
Devon Govett
@devongovett.me
4.1K followers 76 following 440 posts
I write javascript
Posts Media Videos Starter Packs
The current month is centered in the viewport, with an extra month + large placeholder on either side. As you swipe, the months update and the placeholder shrinks. When scrolling ends, the scroll position is re-centered. This avoids jumpiness when updating the scroll position while the user scrolls.
Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇

stackblitz.com/edit/rac-swi...
Thanks! It animates too. 😉
All of the colors are calculated based on a single CSS variable using relative oklch, so you can change the theme with just one line.

--tint: green;

Modern CSS is amazing! 😲
Having a blast re-designing all the React Aria examples this week. Flat design is so over – bring back depth! 😃
Reposted by Devon Govett
Almost done moving my day job’s design system fully over from Radix to react-aria 🔥🔥🔥

Huge improvement imo. And all without a single API change
If you’re curious how React Server Components integrate with a bundler, how “use client” actually works, and how RSCs can even benefit client rendered apps, tune into my talk at React Conf at 2:30 PST today!
What a nice view to wake up to for React Conf!
Yes. We're still planning a TagField, which would allow "inline" editing of the tags (like the gmail "To" field). But you can get pretty close with Select + TagGroup + Autocomplete example I showed.
Here's the demo shown in the video combining a Select with a TagGroup. You can add a TagGroup within a SelectValue and access the selected items via the render prop function. It also uses Autocomplete to allow filtering. Composition ftw! 😀

stackblitz.com/edit/rac-sel...
Here's the demo shown in the video combining a Select with a TagGroup. You can add a TagGroup within a SelectValue and access the selected items via the render prop function. It also uses Autocomplete to allow filtering. Composition ftw! 😀

stackblitz.com/edit/rac-sel...
Big React Aria release! 🚀

🥳 Multi Select!
🎬 ComboBox onAction prop, e.g. "create" item
➡️ Disclosure animation
✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc.
📱 Improved modal behavior in iOS 26
📆 Calendar selectionAlignment

react-spectrum.adobe.com/releases/202...
Cool. I've been testing it with some React Aria demos I'm working on. Very excited about it.
No ViewTransition? 😢
Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

stackblitz.com/edit/rac-swi...
Btw WCAG actually covers this. But the path to get from each page to the accessibility settings needs to itself be accessible by default so users can find it. www.w3.org/WAI/WCAG21/T...
G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast | WAI | W3C
www.w3.org
I agree that user customization is helpful, but WCAG is a good default. I don’t think it’s acceptable to make the UI inaccessible by default just because there are settings to change it. Users may not be aware of these settings.
WCAG says 3:1. I know the algorithm isn’t perfect but the spirit is pretty clear I think. We’ve been working on similar components recently so it’s been on my mind. There are also other ways to pass than a dark border or inverted background, like adding an indicator line, bolding the text etc.
None of them have enough contrast to tell which one is selected
Looking forward to speaking at React Conf about how Server Components and bundlers work together!
@devongovett.bsky.social will be speaking about Parcel