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 - Intro3:07 - Apple's new OG image gradient10:06 - Luminosity-weighted average14:22 - Finding the vibrant color of an image21:41 - Contrast ratios on favicons32:21 - K-means clustering41:25 - Refactoring UI tip about rotating the hueLinks:Open Graph PreviewRefactoring UI
--------
48:39
Exploring useActionState
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 - Intro1:51 - How React normally eliminates state in synchronous apps8:20 - How useActionState lets React eliminate state in asynchronous apps18:17 - Why you shouldn't just pass server actions into useActionState23:00 - TCP/IP and UDP analogy26:39 - Thinking of useActionState like enqueue34:55 - Why the term "reducer" is too loaded for best understanding useActionState51:07 - How useActionState helps you build a Todo app that stays responsive during pending actions
--------
59:57
Cloudflare Tunnel | React Compiler | refs during render
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 - Intro1:42 - Cloudflare Tunnel7:06 - React Compiler14:21 - Reading or writing refs during renderLinks:Cloudflare TunnelReact Compiler Beta releaseReact Docs Pitfall on refs
--------
42:46
useAnimatedText | Events vs. State Changes | Catalyst
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 - Intro1:22 - Catalyst and escape hatches16:03 - Building a useAnimatedText hook (aka useBufferedText)54:10 - Avoiding using state changes to approximate eventsLinks:CatalystSam's Tweet about useBufferedText and AnimatedScrolleruseAnimatedText recipeIntl.Segmenter on MDNDavid K's Tweet on eventsRicky's Tweet on Intersection ObserverBuild UI's new course
--------
1:08:19
Can you self-host Next.js?
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 - Intro3:03 - Heroku and the Twelve-Factor App7:39 - GitHub Pages and static sites13:57 - Serverless and JAMstack17:30 - Vercel and CDNs, self-hosting, and Next.js19:00 - How framework APIs can nudge an app towards a particular hosting solution23: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 stack40: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
Netherlands