Sam and Ryan use some recent Twitter discussion on copying + pasting code (instead of abstracting it for reuse) as a springboard for a discussion about how their thinking on low-level UI components and design systems has changed over the years.Topics include:0:00 - Intro2:16 - Copy-paste vs. creating abstractions11:43 - How we used to build shared UI components15:34 - How we use UI components today22:42 - Is copy-paste the easiest way for developers to implement consistent design?27:41 - When should we create abstractions?37:15 - Designing copy-pasteable APIsLinks:Dan’s tweetBuild UI NewsletterSam’s Server Actions video on YouTube

Sam and Ryan share their learnings from working with Server Components in earnest over the past week. They talk about how Server Components can simplify client components by passing them props, why it makes sense for a component that can run everywhere to be a Server Component by default, whether RSC is causing unnecessary churn in the ecosystem, and how to think about choosing Server Components vs. client components for a given task.Topics include:0:00 - Intro0:48 - Lessons learned from building a D3 chart as a React Server Component22:04 - Are Server Components causing unnecessary churn in the JavaScript ecosystem?32:14 - Do Server Components replace Client Components?40:13 - Ryan’s thoughts on rewriting some client-side data fetching code with Server ComponentsLinks:Ryan’s Build UI course on Server ComponentsSam’s D3 Chart video on YouTube

Sam shares some recent learnings around hydration mismatches when rendering time zoned dates on the server and the client. He talks about using the TZ environment variable to reproduce the issue locally, and how he solved his problem by avoiding impure format and transformation functions from date-fns.Topics include:0:00 - Intro0:50 - Sever vs. client time zone mismatches, and the TZ environment variable14:34 - Which date-fns functions are impure?23:56 - Using intervals and comparison to remove impuritiesLinks:date-fnsdate-fns-tz

Sam and Ryan talk about using MJML to design, build and send transactional emails with React directly in the browser. They also chat about how to use Framer Motion to get a CSS radial gradient to follow the mouse cursor and the differences between React state, refs, Motion Values, and external stores.Topics include:0:00 - Intro1:10 - Building in-browser email previews with MJML18:50 - Using radial gradients and Motion Values to build a moving spotlight treatmentLinks:MJMLReact EmailMaizzleSam’s Spotlight video on YouTubeSpotlight code recipe

Sam and Ryan talk about building an animated tabs component with CSS’s mix-blend-mode property and Framer Motion’s layout animations. They also talk about how to use the URL constructor in JavaScript to help implement secure arbitrary redirects, as well as their initial reactions to new framework APIs that blur the lines between server and client code.Topics include:0:00 - Intro0:35 - Animated tabs with mix-blend-mode exclusion and Framer Motion’s layoutId14:26 - Using the URL constructor for arbitrary redirects after login27:12 - Reacting to Rich Harris’ discussion on how new framework APIs are exposing hidden API routesLinks:Dan Hollick’s thread on blending modesAnimated Tabs recipeAnimated Tabs YouTube videoURL constructorRich Harris’ talk