Frontend First

Latest Episodes:

Lessons from stitching GraphQL services with Hasura Jan 11, 2023

Show notes

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:

How to solve a SSR/CSR mismatch using the DOM Dec 29, 2022

Show notes

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:

Why we’re adding a CMS to Build UI Dec 02, 2022

Show notes

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:

Testing is inescapable Sep 16, 2022

Show notes

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

Type safety from Hasura to SWR Sep 02, 2022

Show notes

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:

Playing with Server Components in Vercel’s Edge Runtime Aug 22, 2022

Show notes

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:

The problem with buttons on the web Jul 20, 2022

Show notes

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:

Should you use merge commits or rebase when working on large codebases? Jun 06, 2022

Show notes

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:

Read and discuss: Next.js Layouts RFC May 31, 2022

Show notes

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:

All about useEvent May 12, 2022

Show notes

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: