Alex Vipond

/sigh, makes sense... seems obvious now, but 3-4 shipped design systems too late. 😬

◼️

(borg cube)

It depends on the author's motivations & intentions. Did the author use non-standard syntax because they think it's a better DX? If so, it's a library. Did they use non-standard syntax because of platform constraints, and will they deprecate in favor of the standard? If so, it's still a polyfill IMO

Release v3.6.0-alpha.1 · vuejs/core Features vapor mode (#12359) (bfe5ce3) Please see About Vapor Mode section below for details. Performance Improvements reactivity: refactor reactivity core by porting alien-signals (#12349) (3...

Something happened today at VueConf China!

github.com/vuejs/core/r...

AustralianToast

If this is the Laracon game, it might be the screeching tires of a lamborghini delivering the potato to the next player. Call it a Yamborghini

10x25 binoculars
10" carbon steel pan
No. 5 1/2 jack plane
Safety razor
Open-back headphones
Guitars

Alex Vipond — web development, social impact I'm into web development and social impact. I write code and create content for these topics, and I share it on my website.

"Shitty code reviews make great LLM prompts"—just some thoughts about meaningful code reviews that advance others' careers and make your team stronger.

alexvipond.dev/blog/shitty-...

I think you're not alone—the React Aria slots syntax is very similar to other frameworks like Vue and Svelte, but the implementation is different (relies on React Context rather than render props), so I could see opportunity for confusion.

Any specific components where slots are more difficult?

Highly recommend spending some time horsing on the dedicated roads and paths. No shortcuts, absurd climbs, or hypotenuses allowed, just pure intended vanilla gameplay

I'm thinking about writing a book about how to build a custom component library from scratch on top of React Aria 🤔

If that sounds interesting to you, put your email in here! learnreactaria.com

Alex Vipond — web development, social impact I'm into web development and social impact. I write code and create content for these topics, and I share it on my website.

Something that sounds easy, but is tricky to get right: wrap text around the Dismiss button of a clickable card.

The tricky part is making sure you don't sacrifice accessibility features like grouping, labeling, focus rings, etc. Here's how I do it: alexvipond.dev/blog/wrap-te...

Ooo that just blew my whole mind 🤯🤯🤯

I do see an argument where scoped slots make sure we use scoped data only where the component author intended. And I suppose scoped slots save us the extra effort of setting up a template ref in the parent.

But defineExpose as an alternative to scoped slots...🤯

I've pushed template ref usage very, very far, but still haven't found a use case where defineExpose feels right. IMHO if a parent component needs to read child state, the state should be lifted up, not accessed through template refs

The earplugs are very underrated! You're still gonna hear the baby cry, which is what you want and need to do, but it really takes the edge off. New parents don't need more cortisol

The ebook Rethinking Reusability in Vue by @alexvipond.dev provides a deep dive on reusability design patterns in Vue 3 📗 - madewithvuejs.com/rethinking-r...

Cries in `const { 2: lettuce } = data`

Copy-pasteable:

"tailwindCSS.experimental.classRegex": [
[
"\\/\\*\\* tw \\*\\/([\\s\\S]*?)\\/\\*\\* endtw \\*\\/",
"(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"
],
]

VS Code settings to apply tailwind intellisense

Code example of Tailwind classes in JS, where intellisense doesn't work out of the box

Simpler example of comment-enabled Tailwind Intellisense at work

This VS Code config will add @tailwindcss.com Intellisense to all code between a starting comment /** tw */ and an ending comment /** endtw */

This is incredibly useful for reusable classes tucked away in a JS variable or helper function, which TW Intellisense won't automatically check

Alex Vipond — web development, social impact I'm into web development and social impact. I write code and create content for these topics, and I share it on my website.

I live and breathe :where(:not()) on legacy SCSS. For a while my only gotcha was lack of Safari 13 support, but in most cases it was still worth it, and now the app has dropped Safari 13 support so it's all good

Related: alexvipond.dev/blog/styling...

_You_ can ignore the fringes. People directly affected by their actions can't.

HUGE React Aria release! 🍿

🔍 Autocomplete: Command Palette, Searchable Select + Submenu
🆕 3 new components: Toast, Tree, Virtualizer
🧩 Custom Menu/Popover/Tooltip triggers
🌉 Table colspan
👆 usePress interop, fixing 15+ issues
💨 Tailwind v4
📅 DatePicker RTL

react-spectrum.adobe.com/releases/202...

Click the menu icon to open the menu, then toggle reactions on and off

Alex Vipond — web development, social impact I'm into web development and social impact. I write code and create content for these topics, and I share it on my website.

I've found LLMs to be pretty fantastic at writing custom, project-specific ESLint rules. Super fun way to open up new doors for code quality, and here's how you get it working with ESLint in your project: alexvipond.dev/blog/add-pro...

Alex Vipond — web development, social impact I'm into web development and social impact. I write code and create content for these topics, and I share it on my website.

The solution to this nasty NextJS bug no longer lives exclusively in the comment sections of random old GitHub issues alexvipond.dev/blog/dont-li...

rollup treeshaking config for Vite app

Vite apps can shave off some bundle size by setting `build.rollupOptions.treeshake` to `smallest`.

This allows rollup to treeshake more aggressively—for example, it will now shake unused third-party libraries that didn't set `sideEffects: false` in their package.json.

I implemented all this in a component I call `PortaledPositioned`, which is reusable for all popups (selects, menus, modals, tooltips, etc.) in the design system I'm building.

Haven't decided how to release this code yet, but it'll be available eventually. Hit me up if you want an early look!

4. Else, anchor the popup to the controller. Set max height to 50dvh minus half the height of the popup controller. Try anchoring to the bottom first, then top, then right, then left. (In all cases I've tested, either the top or bottom works, and the right & left fallbacks are just there for safety)

1. Portal the popup to the end of the `body`.

2. If screen size indicates mobile device, use a drawer design. Bottom drawer for portrait, side drawer for landscape.

3. Else if the browser doesn't support CSS anchor positioning, center the popup on the screen, on top of a semi-transparent underlay.

Here's my progressively enhanced design & positioning logic for popups, implemented with CSS, Tailwind, ResizeObserver, and Vue.

Zero usage of `getBoundingClientRect`, scroll listeners, or any other techniques that thrash the layout or block rendering!