Blog
Posts on software development, careers, and craft.
Problem: You’re using msw (@ApiMocking) to mock out HTTP calls during...
Problem: You’re using msw (@ApiMocking) to mock out HTTP calls during development and automated testing, and you want to dynamically change the moc...
I rarely experience performance problems in React
I rarely experience performance problems in React. And when I do, I find moving state “lower” is often the solution. What tricky performance proble...
Early in my career I struggled with communication
Early in my career I struggled with communication. I found these books helpful: - How to Win Friends and Influence People - Crucial Conversations -...
A developer's job in one word: communication
A developer's job in one word: communication. We communicate with computers *and co-workers* via code. We communicate via speech, written word, dra...
Rule: If it's worth checking, it's worth automating
Rule: If it's worth checking, it's worth automating. But, some checks can't be automated. So, here are 9 things that I look for in code reviews: 1....
A weird mistake one of my clients is making: If an invalid/inaccessible URL...
A weird mistake one of my clients is making: If an invalid/inaccessible URL is requested, they redirect to /404. Don’t do this. If an invalid URL i...
"E2E tests are flaky" Yep, often true
"E2E tests are flaky" Yep, often true. But, E2E tests aren't inherently flaky. They're flaky for a *reason*: 🚩 The UI is buggy. 🚩 The backend is...
Common scenario: Separate backend and UI teams are building a web app together
Common scenario: Separate backend and UI teams are building a web app together. Problem: The shared development environment is unreliable because t...
A developer shouldn't merely do what they're told
A developer shouldn't merely do what they're told. Why? Because it's not a developer's job to merely follow orders. We're paid to see the gaps. We'...
I love how React hooks let me create a well-named, encapsulated, reusable logic
I love how React hooks let me create a well-named, encapsulated, reusable logic. My components are simple and easy to understand because the compli...
Rule: A failing automated check should break the build
Rule: A failing automated check should break the build. If we start allowing some warnings, errors, or broken tests, it creates a slippery slope. I...
Problem: You want to copy a JavaScript array but use a different value for...
Problem: You want to copy a JavaScript array but use a different value for one index. Solution: Array .with Array .with copies the array instead of...
A few years ago I was excited about the idea of visual regression testing
A few years ago I was excited about the idea of visual regression testing. (Visual regression tests take a picture of a component or page and then...
Problem: You’re testing via @testling_lib, and you want to debug what you’re...
Problem: You’re testing via @testling_lib, and you want to debug what you’re testing in a browser. Solution: screen.logTestingPlaygroundURL() This...
I test web apps via 3 types of tests: 1
I test web apps via 3 types of tests: 1. End-to-end (E2E) - Goal: Smoke test each page to assure it loads successfully. Only check for static eleme...
Using Prettier and ESLint
Using Prettier and ESLint? You probably don't need these two ESLint plugins: eslint-config-prettier eslint-plugin-prettier I just removed them base...
Two web app testing approaches: 1
Two web app testing approaches: 1. Emulated. (Typically via @jestjs_ or @vitest_dev with jsdom or happy-dom) 2. Real browser. (Typically via @playw...
I typically configure @playwrightweb to run end-to-end (E2E) and mocked...
I typically configure @playwrightweb to run end-to-end (E2E) and mocked tests separately. Here’s how: 1. Put e2e and mocked tests in separate folde...
Two ways to write software: 1
Two ways to write software: 1. Performance first. Consider performance from the start. 2. Performance last. Make it work, make it right, then make...
Problem: There are many React state libraries, so it’s hard to choose...
Problem: There are many React state libraries, so it’s hard to choose between them. Solution: Think in categories. Many are similar. 6 categories:...
Using TypeScript
Using TypeScript? I suggest enabling this setting in tsconfig: noUncheckedIndexedAccess When this is enabled, TypeScript adds undefined to any un-d...
My programming style: Mostly simple pure functions, named clearly
My programming style: Mostly simple pure functions, named clearly. Keep impure functions small, and focused. Benefits: ✅ Each function is easy to u...
Warning: ⚠️ If you’re: 1
Warning: ⚠️ If you’re: 1. Using @TestingLib 2. Using getByRole 3. Testing on a page with many DOM elements… Then getByRole may be slow. Why? Becaus...
Why I don’t use test IDs: Adding test IDs all over my markup is a bad DX
Why I don’t use test IDs: Adding test IDs all over my markup is a bad DX. With a test ID, a test may pass when the user still doesn't see what's ex...
In TypeScript, I’ve found throwing a runtime error is often a sign of poorly...
In TypeScript, I’ve found throwing a runtime error is often a sign of poorly designed types. So I strive to design types so that runtime errors are...
In React, needless complexity and repeated null checks can often be...
In React, needless complexity and repeated null checks can often be eliminated via one simple pattern: Return early when loading. Render *one* load...
Problem: You want to query your DB via TypeScript
Problem: You want to query your DB via TypeScript. Solution: Drizzle ORM. It’s like C#’s “LINQ to SQL”, but for TypeScript. Drizzle has adapters fo...
A simple wording pattern to avoid defensiveness in code reviews: Avoid: "You...
A simple wording pattern to avoid defensiveness in code reviews: Avoid: "You should do x." Prefer: "Should we do x?" Asking a question avoids assum...
One of the most rewarding things about doing code reviews: Seeing people...
One of the most rewarding things about doing code reviews: Seeing people quickly improve. Months ago, I reviewed someone's PR for the first time. I...
When is a TypeScript union type impractical
When is a TypeScript union type impractical? If it’s just a few options that never change, a union type is a great choice. But if it’s many values...