Blog
Posts on software development, careers, and craft.
⚛️ My React component unit testing strategy: Test each prop
⚛️ My React component unit testing strategy: Test each prop. Approach: 1. Split my VSCode window. I put the file under test on the left, and the te...
This isn’t error handling: .catch((error) => { console.log(error); });...
This isn’t error handling: .catch((error) => { console.log(error); }); That’s error swallowing. 😬 The user doesn’t watch the console. So, they...
⚛️ 3 keys to fast React app tests: 1
⚛️ 3 keys to fast React app tests: 1. Mock HTTP calls (Use @ApiMocking) 2. Test the prod build. React's prod build is MUCH faster. (see below) 3. P...
Yesterday I shared why I'm switching from Cypress to Playwright
Yesterday I shared why I'm switching from Cypress to Playwright. But Cypress is solid too. Here are 4 Cypress benefits: 1. More concise syntax. In...
I’m a big Cypress fan, so I’m shocked to say this: I just switched to...
I’m a big Cypress fan, so I’m shocked to say this: I just switched to @playwrightweb. Here are 16 reasons I switched: 1. WAY Faster. ~2X faster wit...
Just learned a new JavaScript array method: findLast It returns the last...
Just learned a new JavaScript array method: findLast It returns the last element in an array that matches. More on MDN: https://developer.mozilla.o...
I think the term "prop drilling" encourages React developers to overuse...
I think the term "prop drilling" encourages React developers to overuse tools like Context and Redux. "Prop drilling" is just passing arguments dow...
Problem: JavaScript’s Date is lousy
Problem: JavaScript’s Date is lousy. So we often need to use a library instead. Solution: Temporal. Temporal is a new top-level namespace. Temporal...
I just radically simplified a fetch call
I just radically simplified a fetch call. Before: 26 lines. After: 6 lines. Here are 8 ways to simplify a fetch function.
TypeScript tip: Many optional properties are a code smell
TypeScript tip: Many optional properties are a code smell. Why? Because it reduces type safety. Example, I joined a project where every REST API ca...
4 ways to handle multiple promises in #JavaScript How I choose: 1
4 ways to handle multiple promises in #JavaScript How I choose: 1. Promise.all - I want all, but reject if any reject. 2. Promise.allSettled - I wa...
Just learned you can use underscores as separators in JavaScript numbers
Just learned you can use underscores as separators in JavaScript numbers. This improves the readability of large values. #javascript
I just cleaned up a JS project
I just cleaned up a JS project. Before: Over 3,000 ESLint warnings/errors. 😬 After: Zero warnings/errors. 😀 How? 1. I fixed many spots quickly vi...
ESLint should report *ZERO* warnings or errors on CI
ESLint should report *ZERO* warnings or errors on CI. If one occurs, it should break the build. If warnings/errors are ignored, then ESLint becomes...
I have a wonderful wife and 3 healthy, amazing kids
I have a wonderful wife and 3 healthy, amazing kids. We enjoy multiple trips with friends each year. I’m in the best shape of my life. I run a succ...
A wasteful pattern: APIs that return PascalCase JSON
A wasteful pattern: APIs that return PascalCase JSON. The workaround: 1. Convert JSON to camelCase on the client. 2. Convert JSON back to PascalCas...
How to write unreadable code: Put all code in one giant function
How to write unreadable code: Put all code in one giant function. Use short, unclear names. Embrace deep indentation. Require the reader to hold do...
Had a wonderful time in LA this week training a team on modern React
Had a wonderful time in LA this week training a team on modern React. With so much new good stuff in the React ecosystem we had a lot of ground to...
Problem: In React, it's often tricky to hunt down the component that's...
Problem: In React, it's often tricky to hunt down the component that's rendering a piece of UI. Solution: LocatorJS (A Chrome plugin) I've been usi...
I prefer building REST APIs in TypeScript
I prefer building REST APIs in TypeScript. Why? Because I can use the types to keep 6 separate things in sync: 1. The API request shape 2. The API...
Tip: Avoid explicit booleans
Tip: Avoid explicit booleans. For example, avoid this: if (x > y) { return true } else { return false } Instead, do this: return x > y;
TypeScript poll: Which approach to declaring React prop types do you prefer
TypeScript poll: Which approach to declaring React prop types do you prefer? Poll in next tweet...👇
Common mistake: Moving to the next feature before truly finishing the...
Common mistake: Moving to the next feature before truly finishing the current feature. Teams that do this create many partially working, buggy, poo...
I believe in comprehensive code coverage
I believe in comprehensive code coverage. But, I don’t believe in mandating code coverage minimums. Mandating 90% test coverage leads to the team g...
My 3 step bug fix process: 1
My 3 step bug fix process: 1. Write a test that asserts the correct behavior. See the test fail, due to the bug. ❌ 2. Fix the bug. 🐞 3. See the te...
I’ve found it’s typically worthwhile to mock API’s for front end development
I’ve found it’s typically worthwhile to mock API’s for front end development. Doing so makes UI development faster, and makes automated testing lig...
How to ship a feature faster: Skip tests
How to ship a feature faster: Skip tests. Skip types. Skip docs. Skip code reviews. Skip error handling. Cut corners on security. Ignore performanc...
“We don’t do code reviews
“We don’t do code reviews. We trust our developers.” <insert epic eye roll here> No one should be blindly trusted. No one is beyond making a...
Healthy team habit: Create Architectural Decision Records (ADR) ADRs...
Healthy team habit: Create Architectural Decision Records (ADR) ADRs document big decisions. Benefits: ✅ Everyone understands how the decision was...
Poll: Do you believe it’s important to validate fetch call response shapes...
Poll: Do you believe it’s important to validate fetch call response shapes *at runtime* via tools like Zod, io-ts, etc? (Remember, TypeScript doesn...