iiinova — where your digital self keeps evolving

Alex Vipond

@alexvipond.dev

I'm into web development and social impact. Working on BetterHelp and Baleada 🇺🇸🇭🇳 alexvipond.dev baleada.dev

Alex Vipond @alexvipond.dev · 09/12/2025

Here's a bunch of frontend examples, querying the graph structure to get lists of resources that I can render in a loop:

Examples of frontend code querying the graph payload

100

Alex Vipond @alexvipond.dev · 09/12/2025

This is the data structure I'm using on a project right now. It supports an arbitrary number of different relationships between any two resources in the app, and returns info about where and when the relationship was established.

Pseudo-code describing the data structure I use to describe an app subgraph

100

Alex Vipond @alexvipond.dev · 29/08/2025

Single-table design is magic This is the Eloquent query I run to get - lat/lng of the given location - Profiles of current user & their friends - Profiles of birds they identified in that location, including timestamps - Profiles of their multiplayer birding sessions in that location

Edge::from('user')->to('location', $request->locationId)
->whereIn('from', $describedUserIds)

110

Alex Vipond @alexvipond.dev · 22/04/2025

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

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

110

Alex Vipond @alexvipond.dev · 11/02/2025

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.

020

Alex Vipond @alexvipond.dev · 28/01/2025

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!

110

Alex Vipond @alexvipond.dev · 19/01/2025

The typeahead query and the time elapsed/remaining until the typeahead auto-clears are both reactive, so my custom component can render the query and a little time animation. When you initially call `useSelect`, you can configure fuzzy-matching thresholds, and the millisecond delay until auto-clear.

000

Alex Vipond @alexvipond.dev · 19/01/2025

`select` typeahead UX was something I wanted to improve on when I first started writing Baleada Vue Features composables like `useSelect`. I'm finally building a real design system on top of these composables, and loving how flexible, powerful, and observable they are.

110

Alex Vipond @alexvipond.dev · 02/12/2024

Tons of relatively small commits this month for Baleada Features (closest thing you can get to React Aria in Vue). This is all driven by the full design system I'm building to stress test it. Gonna learn how to do beta releases so I can get it out in the world github.com/baleada/vue-features

110

Alex Vipond @alexvipond.dev · 27/11/2024

A subcategory of Tailwind utilities: very simple aliases that clarify the intent behind CSS tricks/techniques that can otherwise be a little magical. In this case `overlap` clarifies the intent behind forcing two elements to start in row 1 & column 1 in a grid.

html + tailwind, overlapping two elements in a grid

tailwind config to generate the overlap utility class

120

Alex Vipond @alexvipond.dev · 27/11/2024

You can just `fetch('https://api.github.com/users/<username>/events')` to get a list of your recent open source contributions, only ~5 minutes behind real time. On alexvipond.dev/now, I used to only list high-level projects I'm working on. I like how GitHub events add a little more life & change 🌱

Screenshot of the list of my recent contributions

010

Alex Vipond @alexvipond.dev · 24/11/2024

TIL you can use `key` to reset all component state 🤯 react.dev/learn/preser...

Code example of resetting react component state with the key prop

2120