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 - Intro1:50 - Debugging Sam’s personal website due to a breaking change in npm related to peer dependencies18:00 - Pros and cons of using a Postgres function to derive the active status of a Build UI subscription28:42 - Exposing a Hygraph CMS through Hasura via schema stitching, and the fantastic TypeScript DX that came as a resultLinks:HasuraHygraph

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 – Intro1:46 – Ryan Florence’s tweets about Hooks, useEffect and refs18:12 – How to avoid SSR/CSR rendering mismatches when your initial render depends on client-side APIs37:40 – Using StackBlitz for reproduction in open source45:17 – Isolated app development environments with JavaScript containersLinks:Ryan Florence’s tweets on HooksDan Abramov’s replyReact beta docs on bugs found from double renderingReact beta docs on bugs found from re-running EffectsStackBlitzChangelog 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 – Intro0:27 – Unintentional security attack vectors11:20 – Environment-specific vs. environment-independent data23:43 – Architecture discussion for an environment-independent CMS34:39 – Added complexity for testingLinks:Framer Motion Recipes on Build UIHacker 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 - Intro0: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 - Intro2:51 - Using GraphQL Language Server to get autocomplete + linting13:05 - Getting type information on the return object from a query passed to SWR24:06 - Generating TypedDocumentNode objects with GraphQL codegen33:33 - Using zod for run-time validationLinks:GraphQL Tag / gqlGraphQL codegenGraphQL codegen over the yearsRyan’s Tweet with TypedDocumentNodeZeusHasuraZod

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 - Intro1:00 - Running synchronous JS before React’s initial render of build-time generated HTML17:03 - Using getServerSideProps on the edge in Next.js for run-time generated HTML32:15 - Behavior of Server Components that suspend in edge runtime vs. node runtimeLinks:Josh Comeau’s post on dark modeNext.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 - Intro2: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 buttonReact Aria useButtonBuilding a Button Part 1: Press EventsBuilding a Button Part 2: Hover InteractionsBuilding a Button Part 3: Keyboard Focus BehaviorThe 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 - Intro1: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 videoStork on GitHubFramer 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 RFCFramer 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 - Intro0:34 - How useEvent relates to the changes to Strict Mode in React 1812:04 - Dan Abramov’s thread on how useEvent relates to “fixing” useEffect37:37 - What’s the correct mental model for useEvent53:55 - How useEvent is different from useCallbackLinks:useEvent RFCS in the React repoDan Abramov’s thread on how useEvent relates to “fixing” useEffectDan’s RFC comment on why useEvent is not just a “nicer” useCallback