Project lab
Projects
I use projects as a way to learn in public. Some are polished libraries, some are prototypes, and some are small tools that exist because one repeated annoyance finally deserved an API.
Featured projects
9 notes-
A collection of React components and hooks for small state synchronization problems.
A practical note about when local draft state should reset from props, and why effect timing sometimes matters.
Detail page demo: A hook behavior lab that shows how a child draft value diverges from a parent value, then syncs again when the source changes.
-
A TypeScript utility library for repeated JavaScript tasks like concurrency, retry, timing, parsing, and hashing.
A “small tools that remove repeated friction” project note centered on clear APIs for everyday problems.
Detail page demo: A concurrency playground for `runParallel`, showing active tasks, completed tasks, and result order under different limits.
-
A TypeScript Result-style library for treating thrown errors as values.
A practical story about designing APIs where failure is explicit without making business code noisy.
Detail page demo: A Result playground that compares try/catch, Promise.catch, and Result matching for the same failing operation.
-
A React and RxJS virtual-list component that reuses DOM while scrolling.
A from-first-principles performance post with a live demo and DOM-count inspection.
Detail page demo: A virtual-list lab with row count, row height, and reuse toggles, plus visible counters for rendered rows and DOM nodes.
-
A small state manager built on RxJS, with reducers, an observable state stream, dispatch, and effects.
A project note about understanding state managers by following one action through reducer updates, subscriptions, and async effects.
Detail page demo: An action-flow workbench where readers dispatch reducer actions and delayed effect actions, then watch state and logs update inline.
-
A VS Code extension for inline Git blame annotations inspired by Zed.
A tour through editor decorations, blame parsing, tooltip UX, and theme-aware visual design.
Detail page: Because this runs inside VS Code, the detail page uses Marketplace and screenshot links instead of an in-browser demo.
-
A zero-dependency TypeScript utility for aligning mixed English and CJK text.
A compact post about Unicode display width, terminals, tables, and the hidden difficulty of “just add spaces.”
Detail page demo: A monospace alignment workbench with editable mixed-language rows, before/after output, and character-width annotations.
-
An early jQuery plugin that recreates a Mac iPhoto-style image browsing interaction on the web.
A portfolio snapshot about packaging an interaction as a plugin: HTML contract, options, callbacks, and public utility methods.
Detail page: The detail page keeps the original screenshot, the usage shape, and the options/API surface visible directly in the blog.
-
An early microblog-style web application with login, posting, image upload, profile editing, and post management.
A portfolio snapshot from the PHP/MySQL era, useful for showing full-stack product thinking before later library work.
Detail page: The detail page presents the original UI screenshot and architecture checklist instead of trying to run an old PHP/MySQL app inside the blog.
Writing tracks
themes- Typed error handling in JavaScript
- React performance and rendering
- Editor tools and developer experience
- Reactive state, effects, and HTTP
- Early full-stack and plugin portfolio work
- Small utilities that remove repeated friction
Draft queue
nextThese are the first project notes worth turning into full posts. Each one can start from the code, explain the mental model, and end with a small demo or debugging checklist.
- Draft State Sync with React Hooks
- A Small Toolbox for Repeated JavaScript Friction
- Understanding State Managers with RxJS
- Errors as Values in TypeScript
- Virtual Lists from First Principles
- Designing Inline Git Blame Annotations
- Aligning CJK and English Text
- Early Portfolio Snapshot: iPhoto and Koala