Blog
Posts on software development, careers, and craft.
On big, fast moving teams, merge conflicts can burn a lot of time
On big, fast moving teams, merge conflicts can burn a lot of time. 5 ways to avoid painful merge conflicts: 1. Reduce team size 2. Clarify code own...
This diagram showcases what makes @remix_run special: Dataflows include the...
This diagram showcases what makes @remix_run special: Dataflows include the server. Loaders pass data to the component. Then, Actions pass data bac...
It's live
It's live! 🎉 My new course "Next.js 12: The Big Picture", just published on @pluralsight. In this course, I cover why Next.js is useful, review it...
🚨 Web developers 🚨 <a> and <button> are often misused
🚨 Web developers 🚨 <a> and <button> are often misused. They have different purposes. <a> is for navigating <button> is fo...
Anti-pattern: Needlessly reading the URL
Anti-pattern: Needlessly reading the URL. Example: A button that reads the URL to determine what it should do. 👎 Simpler solution: Pass a prop to...
Accessibility / UX tip: Avoid disabling buttons
Accessibility / UX tip: Avoid disabling buttons. Show errors instead. Why? ❌ Disabled buttons may look clickable. Nothing happens when clicked. ❌ D...
Developer experience (DX) matters
Developer experience (DX) matters. What does good DX look like? Fast compiles Robust mocks Excellent docs Easy code sharing Powerful dev tools Clea...
I rarely memoize in React
I rarely memoize in React. Instead I: 1. Keep state as local as possible, to keep renders local. 2. Strategically decompose components to keep freq...
Great suggestion in the new React docs: Worried about the performance impact...
Great suggestion in the new React docs: Worried about the performance impact of calculating a value on each render? Then use console.time to test t...
Here are 7 ways to create a React app in 2022
Here are 7 ways to create a React app in 2022. This feature matrix shows some key differences at a glance. List includes: @vite_js @nextjs @remix_r...
It's wonderful to see standards emerging for non-browser JavaScript runtimes
It's wonderful to see standards emerging for non-browser JavaScript runtimes. Standards will help in at least 2 ways: 1. We can write JS that runs...
Today I'm thinking about the tradeoffs inherent in choosing a full-featured...
Today I'm thinking about the tradeoffs inherent in choosing a full-featured framework like @nextjs. Here's my list. Can you think of other tradeoff...
2 situations to consider web components: 1
2 situations to consider web components: 1. Your company wants to build a reusable component library that isn’t tied to a specific tech (like React...
Attack: “I can’t believe React doesn’t have data fetching and routing...
Attack: “I can’t believe React doesn’t have data fetching and routing built-in.” My take: React is a component library. This focus is why it’s exte...
My decision tree: Using @remix_run
My decision tree: Using @remix_run? Fetch in loader. Using @nextjs? Fetch in getServerSideProps/getStaticProps and via swr on client. Using React R...
🚨 React developers: 🚨 You don’t have to fetch data via useEffect
🚨 React developers: 🚨 You don’t have to fetch data via useEffect. Here are 7 compelling alternatives to fetching data via useEffect: 1. react-que...
Next.js supports 4 rendering approaches
Next.js supports 4 rendering approaches. Picking a rendering approach in @nextjs can be tricky. I choose between them on page-by-page basis. Here's...
Solid tip
Solid tip. “Once a PR has around 5 comments, consider suggesting a pair programming session instead of adding more comments." This speeds the feedb...
SSR with React is easy with Next or Remix
SSR with React is easy with Next or Remix. But, SSR has a cost: fewer hosting options. A CSR app can be hosted anywhere, cheaply. An SSR app requir...
You probably know :hover, :focus, and :active pseudo-classes
You probably know :hover, :focus, and :active pseudo-classes. Here’s some lesser-known CSS 3 selectors: :required :optional :valid :invalid :in-ran...
Wow, just found this huge list of free public APIs
Wow, just found this huge list of free public APIs. Quite useful for learning, experimenting, and building demo apps. https://github.com/public-api...
Impression: React is getting more complex
Impression: React is getting more complex. Reality: The new React docs contain more nuance. They reflect important lessons from years of use. They...
Everyone is talking about server-side rendering
Everyone is talking about server-side rendering. Why? SEO and page load speed. Yet many web apps are: 1. Behind a login (so SEO doesn’t matter) 2....
useEffect is a last resort
useEffect is a last resort. 3 cases where useEffect is overused: 1. To sync with state changes. Derive on each render instead. Memo if needed. 2. T...
Problem: Fetching in useEffect means React components render, then fetch
Problem: Fetching in useEffect means React components render, then fetch. This can lead to slow network waterfalls. Solution: Fetch as you render....
Problem: If the user navigates away before a fetch completes, it creates a...
Problem: If the user navigates away before a fetch completes, it creates a race condition. They’ll see the “abandoned” request’s data if it returns...
I just read the “Web Forms” module on MDN
I just read the “Web Forms” module on MDN. I learned a variety of tricks. It’s hard to keep up with the enhancements over the years. And it’s easy...
New hosting trend: JavaScript containers 7 reasons hosts are embracing JS...
New hosting trend: JavaScript containers 7 reasons hosts are embracing JS “containers”: 1. JS is more powerful than shell 2. JS is ubiquitous - Man...
Problem: People forget to write tests
Problem: People forget to write tests. Solution: Write a test that asserts that each file has a test. 😎 Below, I'm using Jest to assure each compo...
Woah
Woah. I just learned that HTML file inputs can access photos, videos, and audio captured directly by the device's camera and microphone like this: