Frontend First

Ryan talks about the pros and cons of exposing Build UI’s environment-independent CMS from Hasura via schema stitching. He also talks about writing a Postgres function to add a derived field to a database model. Sam shares a debugging story about fixing his personal website due to a breaking change in a minor version of npm.

Topics include:

• 0:00 - Intro
• 1:50 - Debugging Sam’s personal website due to a breaking change in npm related to peer dependencies
• 18:00 - Pros and cons of using a Postgres function to derive the active status of a Build UI subscription
• 28:42 - Exposing a Hygraph CMS through Hasura via schema stitching, and the fantastic TypeScript DX that came as a result

Links:

• Hasura
• Hygraph

Sam and Ryan chat about how to avoid a flicker of content on initial render due to mismatched server/client rendering. They also chat about the pros and cons of React Hooks, and using StackBlitz containers to debug OSS issues.

Topics include:

• 0:00 – Intro
• 1:46 – Ryan Florence’s tweets about Hooks, useEffect and refs
• 18:12 – How to avoid SSR/CSR rendering mismatches when your initial render depends on client-side APIs
• 37:40 – Using StackBlitz for reproduction in open source
• 45:17 – Isolated app development environments with JavaScript containers

Links:

• Ryan Florence’s tweets on Hooks
• Dan Abramov’s reply
• React beta docs on bugs found from double rendering
• React beta docs on bugs found from re-running Effects
• StackBlitz
• Changelog episode with Ryan Dahl about Deno Deploy as a platform

Sam and Ryan chat about issues they’ve run into in the past when building media sites that store content alongside other dynamic data like user accounts, and how they’re using a CMS to alleviate these problems in Build UI. They also talk about the approach they’ll be using for access control to the CMS.

Topics include:

• 0:00 – Intro
• 0:27 – Unintentional security attack vectors
• 11:20 – Environment-specific vs. environment-independent data
• 23:43 – Architecture discussion for an environment-independent CMS
• 34:39 – Added complexity for testing

Links:

• Framer Motion Recipes on Build UI
• Hacker News post on TeamViewer

Sam and Ryan chat about building their new site using services, and how they’re thinking about testing it. They talk about how testability is one of the biggest costs of using third-party hosted services, why they continue to like services in spite of this downside, and the fact that you always end up testing your app whether you eventually automate it or not.

Topics include:

• 0:00 - Intro
• 0:59 - How to run automated integration tests against a site that’s built with services

Ryan shares his experience getting end-to-end type safety from a Hasura backend into a React application. He tells Sam about the different ways GraphQL codegen can be used to generate types, and how he ultimately landed on a solution that combines the TypedDocumentNode type and the zod library.

Topics include:

• 0:00 - Intro
• 2:51 - Using GraphQL Language Server to get autocomplete + linting
• 13:05 - Getting type information on the return object from a query passed to SWR
• 24:06 - Generating TypedDocumentNode objects with GraphQL codegen
• 33:33 - Using zod for run-time validation

Links:

• GraphQL Tag / gql
• GraphQL codegen
• GraphQL codegen over the years
• Ryan’s Tweet with TypedDocumentNode
• Zeus
• Hasura
• Zod

Ryan tells Sam about some experiments he’s been running using Server Components in Vercel’s new edge runtime. He talks about how components that suspend in the node runtime cause the static build of your Next.js app to wait until they unsuspend, while components that suspend in the edge runtime stream back fallback responses as data is being fetched. Ryan also tells Sam about a blocking JS trick he learned to alter the initial render of your clientside app based on client-specific data, like whether their theme preference is dark or light mode.

Topics include:

• 0:00 - Intro
• 1:00 - Running synchronous JS before React’s initial render of build-time generated HTML
• 17:03 - Using getServerSideProps on the edge in Next.js for run-time generated HTML
• 32:15 - Behavior of Server Components that suspend in edge runtime vs. node runtime

Links:

• Josh Comeau’s post on dark mode
• Next.js discussion on switchable runtime

Sam and Ryan chat about issues with default HTML buttons on the web across different devices and browsers. They talk about the Extensible Web Manifesto, how the React Aria library helps standardize button behavior across platforms, and the difference between state-based and event-based animations.

Topics include:

• 0:00 - Intro
• 2:09 – The problem with default buttons on the web -
• 17:26 – How we got here, and the Extensible Web Manifesto -
• 26:22 – React Aria’s unified Press interface -
• 32:26 – Getting consistent Focus styling -
• 40:30 – Event-based vs. state-based animations -

Links:

• Sam’s video on building an animated button
• React Aria useButton
• Building a Button Part 1: Press Events
• Building a Button Part 2: Hover Interactions
• Building a Button Part 3: Keyboard Focus Behavior
• The Extensible Web Manifesto

Sam and Ryan talk about whether you should use merge commits or you should rebase commits in your PRs when working on large, fast-moving codebases. They also talk about implementing build-time client-side search with Stork, and why layering in animation code shouldn’t materially affect your existing React code.

Topics include:

• 0:00 - Intro
• 1:48 – How to use D3 with React elements -
• 9:14 – Why you should unmount Modals and Dialogs when they’re not visible -
• 24:36 – Using Stork to implement build-time, client-side search -
• 36:03 – Merge commits vs. rebasing in large codebases -

Links:

• Sam’s D3 and Framer Motion video
• Stork on GitHub
• Framer Motion course

Sam and Ryan read and discuss the first two sections of the new Next.js Layouts RFC, Nested Layouts and Server Components. They also reflect on their experience using nested layouts in other frameworks.

Topics include:

• 0:00 – Intro -
• 10:21 – Layouts and creating UI (Apple Music example) -
• 33:40 – React Server Components -

Links:

• Layouts RFC
• Framer Motion Course update

Sam and Ryan talk about the new useEvent RFC, and how useEvent lets you extract event logic from your side effects. They also read and discuss Dan Abramov’s recent Twitter thread on how useEvent addresses the problems people are encountering with React 18’s Strict Mode behavior around running effects twice on mount.

Topics include:

• 0:00 - Intro
• 0:34 - How useEvent relates to the changes to Strict Mode in React 18
• 12:04 - Dan Abramov’s thread on how useEvent relates to “fixing” useEffect
• 37:37 - What’s the correct mental model for useEvent
• 53:55 - How useEvent is different from useCallback

Links:

• useEvent RFCS in the React repo
• Dan Abramov’s thread on how useEvent relates to “fixing” useEffect
• Dan’s RFC comment on why useEvent is not just a “nicer” useCallback