Andy Hook
2K posts
Andy Hook
@Andy_Hook
UI Eng • prev @WorkOS, @radix_ui & @Modulz
UK Beigetreten Mayıs 2011
1.1K Folgt863 Follower
Introducing: Combobox + Autocomplete
v1.0.0-beta.3
✔︎ New Combobox + Autocomplete components
✔︎ initialFocus + finalFocus now accept functions
✔︎ useRender hook enhancements
✔︎ Improved SSR support
✔︎ A billion bug/a11y/UX fixes
base-ui.com/react/overview…
English
A good friend needs help. Please, if you have the means, take a moment to help secure better treatment for Liza.
Lucas Motta@lucasmotta
Some personal news: my 3-year-old daughter Liza was diagnosed with Ewing’s sarcoma in October 2024. She’s already completed 14 rounds of chemo and two surgeries. 🧵
English
@jjenzz @benoitgrelard @ryanflorence I loved when we’d finally crack a solution. Personal favs are asChild, focus first, and focus proxies that let you implicitly direct focus to another node without a DOM lookup, that last one even lets you shift focus out to browser chrome.
English
@benoitgrelard @ryanflorence @Andy_Hook oh man, memories. i remember us agonising over things like `focusFirst` (to avoid focusing hidden things), and more specifically this problem (at link)—i was always so proud of how simply we solved that #issuecomment-850412650" target="_blank" rel="nofollow noopener">github.com/facebook/react…
English
Radix really did a great job, this is the best MenuBar out there for the web
The 5 point polygon is also my favorite hover aim implementation and the internal code is really well factored
English
Working with @iravid and team has been one of the best experiences in my career.
No nonsense, full autonomy, wonderfully skilled team, fully remote and a 4d week!
If you’re a UK-based AI engineer and that sounds exciting to you, reach out!
Itamar Ravid@iravid
I'm hiring an AI engineer at @scroll_ai. UK-based, £130K-£170K+significant equity, fully remote. * Own search, retrieval, context and prompt engineering * Develop our evals * High-end senior team Building the future of AI research tools. Apply here: scrollai.notion.site/AI-engineer-at…
English
Hey @WeAreOpenreach , there is a damaged telephone distribution pole opposite my property. It's missing a lid with exposed cables at ground level. I tried to report via your website but it returns an error and telephone support was dubious. Can you help me get this repaired?
English
Andy Hook retweetet
One of the most impactful projects a design engineer can work on today 👇
Base UI is slated to become the new default component library for React, and I can't recommend enough working with @colmtuite and the team.
Colm Tuite@colmtuite
Alongside the new @base_ui release today, we've also opened a new Design Engineer role. This will suit someone who is experienced in both design and engineering, and has a keen interest in both a11y and API design. base-ui.com/careers/design…
English
Why does React Aria have its own Virtualizer? Why not use an existing library? Accessibility.
If you combine a virtualizer with most component libraries, you might notice that keyboard navigation breaks. That's because scrolling the focused element out of view removes it from the DOM. Then when you press the arrow keys, nothing happens because the list has lost focus.
React Aria's Virtualizer is deeply integrated with our components, so we can automatically persist the focused item in the DOM even when it scrolls out of view.
Devon Govett@devongovett
Virtualizer optimizes large collections, rendering only visible items to the DOM. It supports list, grid, waterfall, table, and custom layouts, manages accessibility, keyboard navigation, etc. Integrated via composition. react-spectrum.adobe.com/react-aria/Vir… x.com/devongovett/st…
English
Huge congrats to the @base_ui team on this release! cannot wait to try it out 🚀
Colm Tuite@colmtuite
Introducing @base_ui 🚀 ✔️ 25 accessible UI components ✔️ Unstyled. Compatible with any styling engine. ✔️ Fully composable with an open API I'll highlight some of my favourite features in the thread 🧵⬇️
English
@vladyslavmoroz Third party is perhaps not the best example as you can do this already within onPointerDownOutside, but it would be nice to declaratively state a layer that Radix will be made aware of.
English
@Andy_Hook How do you imagine the DX here?
What comes to my mind is a callback on a primitive to filter out “real” outside clicks from when a third-party is present. Is it close to how you were thinking about it?
English
What are your pet peeves about Radix Primitives? Want to hear about anything—every tiny API that you find annoying or unintuitive.
One of mine is how some components have conditional types, like how Accordion has a different `value` when multiple items are allowed to open.
English
@vladyslavmoroz Yeah, for example a browser form extension like 1Password might trigger an “outside” click within a dialog depending on how it’s implemented. If I know the pieces I have, I’d like to be able to make Radix aware of them easily.
English
@Andy_Hook As in, a third-party dismissible opened from a Radix dismissible?
English
@vladyslavmoroz A way to “shard” or add additional elements to the dismissible stack. E.g. when you don’t have a choice and need to use a third party popover element but radix has no visibility of it so pointer events are classed as “outside” events and it closes the layer.
English
@vladyslavmoroz - exposed way to configure the floating strategy
- easier access to position aware values for animating with JavaScript e.g. transform origin
- CSS transition support in lifecycle
- that fucking scroll lock incantation you need to do to not wobble the viewport when modal
English
In Tailwind, every font size utility includes a sensible default line-height for that size.
But this means that even if you explicitly set `leading-tight`, a class like `lg:text-2xl` will override that line-height at `lg` screens.
I can "fix" this — would it be better?
English
@vladyslavmoroz Radix Navigation Menu follows that pattern –Attio(attio.com) has a nice implementation of that.
MacOS menubar is a GUI example. Otherwise na, I haven't seen many modal patterns with it.
I suppose if a "popup" allows a tab in then it's reasonable to tab out.
English
@Andy_Hook Nice, thanks for surfacing it.
So non-modal menus make sense. Have you seen legit popovers with interactive elements that would not trap keyboard focus and/or close on tab out?
English
Focus management discourses are back in my life 😎
What’s an example of a popup that doesn’t trap keyboard focus? Is it a thing?
English
@vladyslavmoroz > Is this wrong in Radix
Yep, it was on the todo list to fix.
Some great feedback here:
github.com/radix-ui/primi…
English
Yeah, under "trap keyboard focus" I meant when pressing the "Tab" key can't escape from a container to the rest of the document.
> a dropdown menu for example requires a tab key press to focus the next element in document flow
Is this wrong in Radix then?
codesandbox.io/p/devbox/peace…
English
Andy Hook retweetet
Announcing Radix Themes 3.0 and a custom color palette generator 🎉
In this release:
• New layout engine
• 11 new components
• Zero config setup with Astro and Remix
• New docs with guidance on layout and styling
English
@pmarsceill @WorkOS Thank you Patrick for all of your design leadership these past years, learnt a ton working with you. All the best for what comes next!
English
Today is my last day at @WorkOS.
For over two years, I've had the pleasure of leading design here. I'm forever grateful to the team and have learned so much from all of you — truly some of the best in the game.
I'm very excited for what's next and will share more soon!
💙
English
Andy Hook retweetet
⭐️ WorkOS Launch Week! ⭐️
📆 Begins Monday, March 18
👾 Five days of new features
🎮 Win a free Analogue Pocket
Details here 👉 workos.com/launch-week
GIF
English
Andy Hook retweetet