Free Daily Podcast Summary
Frontend First: Daily Summaries Delivered
by Sam Selikoff, Ryan Toronto
Get key takeaways, quotes, and insights from Frontend First in a 5-minute read. Delivered straight to your inbox.
Latest Episodes
The most recent episodes — sign up to get AI-powered summaries of each one.
- Dec 12, 202448 min
Creating a background gradient from an image
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
- Nov 14, 202459 min
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
- Oct 31, 202442 min
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
- Oct 24, 20241h 8m
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
- Oct 10, 202458 min
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
- Sep 18, 20241h 0m
Tom Occhino on the future of React
Tom Occhino, Chief Product Officer at Vercel and former Engineering Director at Facebook, joins Sam to talk about the pivotal moments in React's history. He talks about how React popularized the ideas of declarative rendering and unidirectional data flow, how GraphQL furthered React's goal of co-locating all the concerns of a particular piece of UI, the problems that GraphQL led to at Facebook and how Relay solved them, and how Suspense, Server Components, and PPR are the generalized spiritual successors to the stack used at Facebook.Timestamps:0:00 - Intro2:53 - Declarative rendering as React's legacy8:12 - How GraphQL enabled complex components to be fully self-contained20:12 - How React's goal has always been to co-locate all the concerns of a particular piece of UI22:58 - The problem with co-locating GraphQL with components, and how Relay solved it26:28 - How RSC is the generalized spiritual successor to BigPipe and GraphQL34:46 - What PPR is, and how it and Suspense fit into this story55:55 - The general paradigm shift of getting static code to the device as soon as possibleLinks:Tom Occhino with Ben DunphyReact: The DocumentaryReact Roundtable with Andrew Clark and Sebastian MarkbågeTom Occhino on Twitter
- Sep 5, 202434 min
Render props
Sam and Ryan talk about render props in React. They discuss where they came from, how Hooks superseded them for sharing stateful logic, how data attributes compare to them for customizing styling, and how for certain complex components like forms they're still a great solution for accessing slices of internal state.Timestamps:0:00 - Intro3:40 - Where did render props come from?6:01 - How hooks replaced many use cases for render props8:14 - Using render props for custom styling10:32 - Data attributes vs. render props for custom styling16:43 - Using render props to peek into an uncontrolled component's internal state21:05 - Forms example and using render props for a smaller public API24:10 - React docs mention of render props25:48 - Where render props shineLinks:Headless UI MenuRadix FormsReact Aria FormsReact docs - Render propsOur upcoming course on React Component PatternsEmail SamEmail Ryan
- Aug 28, 202447 min
Controlled and uncontrolled components
Sam and Ryan discuss controlled and uncontrolled components in React. They talk about how uncontrolled components can be thought of as components that manage their own internal state, why you should model your complex React components after the simpler APIs of native HTML elements like inputs, why you shouldn't try to make components that are both controlled and uncontrolled, and why making a new component boundary is sometimes all you need to make your custom components behave more predictably.Timestamps:0:00 - Intro1:41 - What are controlled and uncontrolled components?6:11 - How to change a component from uncontrolled to controlled8:48 - How do you decide when to use a controlled or uncontrolled component?12:00 - Sortable table example and a single source of truth15:27 - Is it always either controlled or uncontrolled?21:09 - Color picker example and not exposing internal state28:46 - Sortable list example with Framer Motion39:45 - Component boundaries and wearing two hats: the library author vs. library consumer41:43 - How do you know if you are using the wrong approach?Links:New course: Advanced React Component PatternsReact docs: Controlled and uncontrolled componentsReact docs: Storing state from previous rendersEmail SamEmail RyanFrontend First on Twitter
Get Frontend First summaries in your inbox
Free AI-powered daily recaps. Key takeaways, quotes, and mentions — in a 5-minute read.
Get Free Summaries →Free forever for up to 3 podcasts. No credit card required.
You Might Also Like
Listeners also like.
Front-End Fire
TJ VanToll, Paige Niedringhaus, Jack Herrington
PodRocket
LogRocket
The Frontend Masters Podcast
Frontend Masters
COMPRESSEDfm
Amy Dutton, Brad Garropy
This Month in React
Reactiflux; with Mark Erikson, Mo Khazali, and Carl Vitullo
Front End Happy Hour
Front End Happy Hour
JavaScript Archives - Software Engineering Daily
JavaScript Archives - Software Engineering Daily
ShopTalk
Chris Coyier & Dave Rupert
devtools.fm: Developer Tools, Open Source, Software Development
Andrew Lisowski, Justin Bennett
React Universe On Air
Callstack
Code & Pixels
Adekunle Oduye & Kelly Harrop
egghead.io developer chats
Joel Hooks and John Lindquist
About Frontend First
A podcast about modern UI development on the web. Hosted by Sam Selikoff and Ryan Toronto.
Customized Recaps
AI-powered recaps with compact key takeaways, quotes, and insights.
Straight to Your Inbox
Get key takeaways from Frontend First in a 5-minute read.
Save Hours Every Week
Stay current on your favorite podcasts without falling behind.
Frequently Asked Questions
What is Podzilla's Frontend First daily summary?
It's a free AI-powered email that summarizes new episodes of Frontend First as soon as they're published. You get the key takeaways, notable quotes, and links & mentions — all in a quick read.
How does the Frontend First podcast summary work?
When a new episode drops, our AI transcribes and analyzes it, then generates a personalized summary tailored to your interests and profession. It's delivered to your inbox every morning.
Is this an official Frontend First product?
No. Podzilla is an independent service that summarizes publicly available podcast content. We're not affiliated with or endorsed by Sam Selikoff, Ryan Toronto.
Can I get summaries of other podcasts too?
Absolutely! The free plan covers up to 3 podcasts. Upgrade to Pro for 15, or Premium for 50. Browse our full catalog at /podcasts.
What topics does Frontend First cover?
Frontend First covers topics including Technology. Our AI identifies the specific themes in each episode and highlights what matters most to you.
Start getting Frontend First summaries tomorrow morning.
Free forever for up to 3 podcasts. No credit card required.
Free forever for up to 3 podcasts. No credit card required.