Frontend First

Ryan talks to Sam about reproducing iOS's new image background treatment for his Open Graph Preview tool, opengraph.ing. They talk about different approaches for generating gradients from images, including finding the vibrant color of an image, luminosity-weighted averages, k-means clustering, and more.
Timestamps:
0:00 - Intro
3:07 - Apple's new OG image gradient
10:06 - Luminosity-weighted average
14:22 - Finding the vibrant color of an image
21:41 - Contrast ratios on favicons
32:21 - K-means clustering
41:25 - Refactoring UI tip about rotating the hue
Links:
Open Graph Preview
Refactoring UI

Sam and Ryan talk about React 19's useActionState hook. They discuss how adding async functions to a plain React app introduces lots of in-between states that developers must grapple with, and how useActionState allows React to collapse and eliminate these states, bringing the simplicity of React's sync mental model to our async code.
Timestamps:
0:00 - Intro
1:51 - How React normally eliminates state in synchronous apps
8:20 - How useActionState lets React eliminate state in asynchronous apps
18:17 - Why you shouldn't just pass server actions into useActionState
23:00 - TCP/IP and UDP analogy
26:39 - Thinking of useActionState like enqueue
34:55 - Why the term "reducer" is too loaded for best understanding useActionState
51:07 - How useActionState helps you build a Todo app that stays responsive during pending actions

Sam and Ryan talk about using Cloudflare Tunnel for local development, the new React Compiler beta release, and why reading or writing refs during render violates the rules of React.
Timestamps:
0:00 - Intro
1:42 - Cloudflare Tunnel
7:06 - React Compiler
14:21 - Reading or writing refs during render
Links:
Cloudflare Tunnel
React Compiler Beta release
React Docs Pitfall on refs

Sam and Ryan talk about building a useAnimatedText hook that can animate streaming text. They also discuss how React code that uses state changes to approximate events can be simplified, and the benefits of having escape hatches when building UI with Catalyst.
Timestamps:
0:00 - Intro
1:22 - Catalyst and escape hatches
16:03 - Building a useAnimatedText hook (aka useBufferedText)
54:10 - Avoiding using state changes to approximate events
Links:
Catalyst
Sam's Tweet about useBufferedText and AnimatedScroller
useAnimatedText recipe
Intl.Segmenter on MDN
David K's Tweet on events
Ricky's Tweet on Intersection Observer
Build UI's new course

Sam and Ryan talk about how frameworks and infrastructure evolve with each other, using Next.js as a representative example. They discuss how hosting providers like Heroku have always imposed certain constraints on apps, what features those constraints enable hosting providers to support, how burdensome those constraints are across different frameworks, and how frameworks that add infra-specific APIs can best communicate the costs of those APIs and benefits they enable.
Timestamps:
0:00 - Intro
3:03 - Heroku and the Twelve-Factor App
7:39 - GitHub Pages and static sites
13:57 - Serverless and JAMstack
17:30 - Vercel and CDNs, self-hosting, and Next.js
19:00 - How framework APIs can nudge an app towards a particular hosting solution
23:09 - What constraints does Next.js impose on your app (e.g. middleware doesn't run node), and what benefits do those constraints give you?
36:13 - How Next.js APIs are motivated by wanting to tease apart static and dynamic code, in an attempt to support the needs of any web app with a single stack
40:33 - What is the relationship between frameworks and infra?
47:37 - How can frameworks that add infra-specific APIs best communicate the costs of those APIs and the benefits they enable?
Links:
The Twelve-Factor App