Blog
Posts on software development, careers, and craft.
My philosophy: If I need an alarm or caffeine to wake up, I should go to bed...
My philosophy: If I need an alarm or caffeine to wake up, I should go to bed earlier. If I’m “too busy” to get enough sleep or exercise, my life is...
Announcement: react-switchboard Create custom dev tools for your React app
Announcement: react-switchboard Create custom dev tools for your React app. Uses: - Force errors - Configure mock APIs - Change feature toggles - L...
I don’t normally do this but I coded over 12 hours yesterday and stayed up...
I don’t normally do this but I coded over 12 hours yesterday and stayed up past midnight tweaking things. If you’re using React, I think you’ll lik...
I've spent the last few weeks working on a React developer tool that I think...
I've spent the last few weeks working on a React developer tool that I think you'll enjoy. Excited to show it off at @ReactRally tomorrow!
Problem: You need to check if a value matches one of many potential values
Problem: You need to check if a value matches one of many potential values. Solution: Consider array.includes. This avoids declaring a bunch of rep...
How do we accomplish this in software
How do we accomplish this in software? - Focus. Eliminate needless features and needless complexity. - Reuse. Create reusable components. - Delegat...
I’m looking for a good technical book to read on vacation
I’m looking for a good technical book to read on vacation. Something that will challenge my thinking. I’ve read some classics: Code complete Design...
The most common needless use of `let` I see: Setting an initial value,...
The most common needless use of `let` I see: Setting an initial value, followed by mutations. This is hard to read because it requires the reader t...
Just realized my React Berlin talk "Managing React State: 10 Years of...
Just realized my React Berlin talk "Managing React State: 10 Years of Lessons Learned" is published here: https://gitnation.com/contents/managing-r...
Custom DevTools are a powerful way to speed up development
Custom DevTools are a powerful way to speed up development. ✅Toggle feature flags ✅Configure mocks ✅Change users ✅Simulate slowness ✅Force errors ✅...
Problem: React Router’s useSearchParams is clunky, and not type safe
Problem: React Router’s useSearchParams is clunky, and not type safe. Values are always returned as strings, and there’s no type-safe protection fo...
Two ways to write a test: 1
Two ways to write a test: 1. DRY: reference const that’s used in code 2. Repeat: repeat value that’s used in code Which do you prefer, and why?
Storybook is useful, but the number of dependencies it drags in feels excessive
Storybook is useful, but the number of dependencies it drags in feels excessive. Look at this diff! Anyone using something lighter? I've used Ladle...
Problem: You want to compare two files
Problem: You want to compare two files. Solution: Use VS Code. Here's how: 1. Right click file 1 and “Select for compare” 2. Right click file 2 and...
Problem: It’s unclear if a test is a unit, integration, or e2e test
Problem: It’s unclear if a test is a unit, integration, or e2e test. Solutions: 1. Location: Colocate unit tests with the file under test. Store in...
I'm creating a reusable React component that I plan to publish via npm
I'm creating a reusable React component that I plan to publish via npm. I'm considering styling it via Tailwind. But I'm having a hard time finding...
Problem: With in-browser testing tools like Playwright, each page load takes...
Problem: With in-browser testing tools like Playwright, each page load takes time. So, many separate tests redundantly loading the same page slows...
Problem: You want to quickly publish an npm package using TypeScript
Problem: You want to quickly publish an npm package using TypeScript. Solution: tsup tsup bundles your TypeScript library with no config, powered b...
Using fetch
Using fetch? Consider Ky. Benefits: - Simpler API - Requires about half the code - Treats non-2xx status codes as errors - Includes timeout support...
React 19 is huge
React 19 is huge. Here's a cheat sheet. Nine new features: 1. React Server Components - Components that render at build time, or for each request....
One of the most common sources of needless complexity I see in code:...
One of the most common sources of needless complexity I see in code: Inconsistent terminology. Example: I just reviewed a PR that uses all these te...
Look around your team
Look around your team. Ask yourself: - Do I often work harder than my teammates? - Is my work output and quality higher? - Do I seem to care the mo...
A bug I see in nearly every web app: Last in wins
A bug I see in nearly every web app: Last in wins. Bug: If two users are editing the same record, the user who clicks save last “wins”. The last sa...
Forms in React 19
React 19 has many new form-related features: Server actions – Call async functions that run on the server in a client component useActionState – Update state ba…
React 19 has many new form-related features: Server actions - Call async...
React 19 has many new form-related features: Server actions - Call async functions that run on the server in a client component useActionState - Up...
Problem: Sometimes a component is "too big"
Problem: Sometimes a component is "too big". Signs: - Lots of props - Hard to reuse - Feels unfocused - Performance problems - Hard to understand w...
Work gets better when you don’t need the money
Work gets better when you don’t need the money. And “don’t need the money” doesn’t mean you never need money again. It just means you don’t *immedi...
How I typically handle React state today: Data fetched via HTTP: React Query
How I typically handle React state today: Data fetched via HTTP: React Query. Local state: useState or useReducer. Forms: useState or React Hook Fo...
An easy mistake to make: Needlessly “high” state
An easy mistake to make: Needlessly “high” state. Example: State that is merely passed down to a child component. Why it's a problem: Wastes resour...
React Query is an asynchronous state management tool
React Query is an asynchronous state management tool. So, most people use it to manage data fetched via HTTP. What other types of async state have...