Frontend First

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 - Intro1:50 - Debugging Sam’s personal website due to a breaking change in npm related to peer dependencies18:00 - Pros and cons of using a Postgres function to derive the active status of a Build UI subscription28:42 - Exposing a Hygraph CMS through Hasura via schema stitching, and the fantastic TypeScript DX that came as a resultLinks:HasuraHygraph

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 – Intro1:46 – Ryan Florence’s tweets about Hooks, useEffect and refs18:12 – How to avoid SSR/CSR rendering mismatches when your initial render depends on client-side APIs37:40 – Using StackBlitz for reproduction in open source45:17 – Isolated app development environments with JavaScript containersLinks:Ryan Florence’s tweets on HooksDan Abramov’s replyReact beta docs on bugs found from double renderingReact beta docs on bugs found from re-running EffectsStackBlitzChangelog episode with Ryan Dahl about Deno Deploy as a platform

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 – Intro0:27 – Unintentional security attack vectors11:20 – Environment-specific vs. environment-independent data23:43 – Architecture discussion for an environment-independent CMS34:39 – Added complexity for testingLinks:Framer Motion Recipes on Build UIHacker News post on TeamViewer

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 - Intro0:59 - How to run automated integration tests against a site that’s built with services

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 - Intro2:51 - Using GraphQL Language Server to get autocomplete + linting13:05 - Getting type information on the return object from a query passed to SWR24:06 - Generating TypedDocumentNode objects with GraphQL codegen33:33 - Using zod for run-time validationLinks:GraphQL Tag / gqlGraphQL codegenGraphQL codegen over the yearsRyan’s Tweet with TypedDocumentNodeZeusHasuraZod

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 - Intro1:00 - Running synchronous JS before React’s initial render of build-time generated HTML17:03 - Using getServerSideProps on the edge in Next.js for run-time generated HTML32:15 - Behavior of Server Components that suspend in edge runtime vs. node runtimeLinks:Josh Comeau’s post on dark modeNext.js discussion on switchable runtime

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 - Intro2: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:Sam’s video on building an animated buttonReact Aria useButtonBuilding a Button Part 1: Press EventsBuilding a Button Part 2: Hover InteractionsBuilding a Button Part 3: Keyboard Focus BehaviorThe Extensible Web Manifesto

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 - Intro1: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:Sam’s D3 and Framer Motion videoStork on GitHubFramer Motion course

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:Layouts RFCFramer Motion Course update

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:0:00 - Intro0:34 - How useEvent relates to the changes to Strict Mode in React 1812:04 - Dan Abramov’s thread on how useEvent relates to “fixing” useEffect37:37 - What’s the correct mental model for useEvent53:55 - How useEvent is different from useCallbackLinks:useEvent RFCS in the React repoDan Abramov’s thread on how useEvent relates to “fixing” useEffectDan’s RFC comment on why useEvent is not just a “nicer” useCallback

Sam and Ryan talk about the motivation behind the changes to Strict Mode in React 18, and in particular why React simulates an immediate unmount and remount by re-running component effects. They also talk about the tradeoff between database consistency and speed.Topics include:0:00 - Intro1:12 - The tradeoff between data that’s fast but stale, vs. data that’s slow but consistent11:55 - Strict mode in React 18, the proposed Offscreen API, and the implications for internal vs. external state in Concurrent ReactLinks:XataNew Strict Mode behaviors in React 18

Sam and Ryan share their experiences building with Remix for the very first time. Sam built a simple exercise tracking app using the Indie starter stack, and Ryan built a blog using server rendering in both Remix and Next.js, and talks about the differences between the two frameworks. They both discuss what the larger React community can learn from the ideas that Remix has to offer.Topics include:0:00 - Intro2:33 - Sam’s Remix app6:34 - The Indie stack19:36 - Creating the data model in Prisma, a form, and an index route25:48 - Ryan building the same Blog app in Remix and Next.js32:33 - Using onSubmit vs. posting an HTML Form39:15 - Remix’s fetcher API46:46 - Borrowing declarative abstractions56:18 - What did we give up when we left the PHP model of building websites? Did we throw the baby out with the bathwater?Links:RemixSam’s YouTube video on RemixKent C Dodds on JS PartyFly.ioHasura guide on Remix and Firebase

Sam and Ryan chat about Remix and the differences between data fetching and mutations on the client vs. the server. They also talk about whether a framework’s APIs or the actual apps it enables developers to build are more important when choosing which tool to use.Topics include:0:00 - Intro2:17 - What matters more to developers when choosing a framework: their experience using the APIs, or what they can build with it?18:38 - Remix and data fetching on the client vs. the server36:36 - Does running code on the edge really matter for day-to-day developers?Links:Ryan Florence’s tweet on speakers vs. musicSam’s video on building an iOS scaled background modal effect

Sam and Ryan chat about adding authentication-based route guards to Next.js, tradeoffs between one-shot data loading vs. reactive pages in React apps, and instrumenting errors with Sentry.Topics include:0:00 - Intro8:07 - Auth-based route guards and synchronized spinners in Next.js26:34 - Tradeoffs of loading once on render vs. fully reactive pages42:30 - Ryan’s video on Deploy notifications47:45 - Errors + stale auth + SentryLinks:Fixing Twitter's loading screen using Synchronized Animations in ReactSWRSentry

Sam and Ryan talk about why Suspense for Data Fetching isn’t ready yet, and how both it and the Server Components feature of React 18 rely on the ability to evict a cache that’s internal to React. They also talk about Transitions.Topics include:0:00 - Intro5:19 - Using startTransition with a router9:36 - How React 18 yields21:37 - Why both Suspense for Data Fetching and Server Components need a way to invalidate React’s cache37:24 - How Server Components can remove the need for explicit API calls without sacrificing any of React’s composability1:01:00 - Real-world problems concurrent features address1:03:20 - Moving state from React to the URLLinks:Sam’s video: How to remove loading spinners in Next.jsRyan’s video: Transitions that SuspendReact Server ComponentsReact Working Group - React 18React Server Components and Remix

Sam and Ryan chat about the differences between building internal apps vs. public websites, and why public sites get talked about more on forums like Twitter. They also talk more about their experiments with Suspense and Transitions in React 18.Topics include:0:00 - Intro2:35 - How to trigger Suspense by accessing an unresolved promise11:04 - Tension between flexibility of Transitions and Suspense vs. best practices around data fetching21:00 - Semantics of React APIs when using Concurrent features24:12 - How internal tools differ from public websites43:24 - Sam’s next vid: Reducing loading spinners on route transitions in Next.js45:28 - Ryan’s next vid: Demo of startTransitionLinks:Concurrent UI Patterns (Experimental)

Sam and Ryan talk about using Promises and state libraries like Valtio to cross the bridge from changing module scope to React component state. Ryan also talks about writing an end-to-end Cypress test that verifies image uploads to S3.Topics include:0:00 - Intro1:50 - Using Promises and state libraries to bridge the gap from module scope to React rendering23:05 - How to test image file uploads given the security constraints of the browserLinks:ValtioRemoving State and Effects with Suspense!Reactive State and Built-In Suspense with ValtioTesting images with CypressSVG supports JavaScriptSleepSort

Sam and Ryan chat about how Suspense lets you remove defensive and confusing useEffect code from your React components. They also share some initial thoughts about how Remix is positioning itself in the frontend dev space.Topics include:0:00 - Intro4:53 - How compatible are non-Suspense APIs with Suspense, and how can we bridge these two worlds?33:35 - Impressions about Remix’s positioning around web standardsLinks:Sam’s video for this weekRemixThe Cursed Computer Iceberg MemeCoding MachinesFlappy Bird in Super Mario World

Sam and Ryan continue their discussions around React 18 and the in-progress work on data fetching with Suspense. They talk about the useTransition hook and how it helps eliminate inconsistent states from your application. They also talk aboutTopics include:0:00 - Intro4:13 - What does Suspense for Data Fetching mean?15:00 - How Transitions allow us do work outside of render39:43 - Dealing with Timezone-dependent tests46:45 - Modal routing in Next.js48:15 - Snapshotting form dataLinks:Sam’s video on SuspenseAfterInitialRendersuspend-react by pmndrsSam’s thread on suspend-reactBuilt-in suspense cache discussionConcurrent mode transitionsReddit exampleReact forms

Happy New Year! Sam and Ryan are back from the holidays, talking about transitive dependencies in node and the browser in the context of Ryan’s next-s3-upload library. They also discuss a SuspenseAfterInitialRender component, speed vs. testability in services and monoliths, and a thought-provoking tweet from Dan Abramov on tests vs. source code.Topics include:0:00 - Would you want tests or source code11:20 - Suspense, SuspenseAfterInitialRender, unstable_avoidThisFallback19:05 - Value of having a reproducible test suite for a dynamic app22:12 - Speed vs. testability of services vs. monolith26:24 - How to import different versions of dependencies in libraries. Module resolution in node vs. browser.Links:Dan Abramov’s tweet on tests vs. source codeA Quick Intro to Suspense in React 18React PR for unstable_avoidThisFallbackHow Serverless Saved Money on My Heating Billnext-s3-upload, Ryan’s Next.js package for uploading images

Sam and Ryan talk about how the React 18 Keynote told the story of Suspense. They discuss how Suspense resolves the tension between encapsulated data-fetching components on the one hand, and coordinated loading UI on the other. They also talk about Sam’s Tailwind course on Egghead and Ryan’s experience upgrading to Tailwind 3.Topics include:0:00 - Intro1:14 - Sam’s Tailwind Course on Egghead3:44 - Upgrading to Tailwind 36:57 - React Conf + SuspenseLinks:Craft Scalable, Custom-Made Interfaces with Tailwind CSSTailwind CSS v3.0React 18 Keynote

Sam and Ryan talk about some tricky page configurations they ran into while working on a Next.js project, and how to deal with multiple dynamic router segments when some are known at build time and others at run time. They also talk about how non-reactive data can simplify your form components.Topics include:0:00 - Intro4:30 - Dealing with partially known dynamic router segments in Next.js25:23 - Struggling with nested layouts in Next.js31:00 - Why you should consider passing non-reactive snapshots of data into your form components52:07 - How to use a seed when generating dynamic test data for predictable valuesLinks:Using useState to create nonreactive snapshots of a form component’s props

Sam and Ryan talk about the tradeoffs between smart and dumb form components, and toss around ideas for passing draft state into forms. They also talk about reimplementing Tailwind UI’s Modal animations using Framer Motion. Topics include:- 0:00 - Intro- 5:33 - Smart vs. dumb forms, and lazy initial props- 32:03 - Replacing Headless UI’s Transition component with Framer Motion’s AnimatePresence Links:The Universe is Hostile to ComputersHeadless UI’s Transition componentFramer Motion’s AnimatePresence component

Sam and Ryan talk about how module side effects can expose order-dependent code, and why its worth ensuring your modules work regardless of import order. They also talk about different UI patterns for forms in modals, and some tips for working with Mirage in Cypress.Topics include:0:00 – Intro4:04 – Keeping imports order-independent when modules have side effects25:02 – Using Mirage with Hasura32:00 – Cypress helpers for mocking auth and data46:37 – UI patterns for modal actions56:26 – Organizing shared query codeLinks:[GitHub Codespaces](https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/)

Sam and Ryan chat about the pros and cons of using third-party services, focusing on how they affect your application’s testing strategy.Topics include:0:00 - Intro0:43 – If services don’t provide testing utils, you have to write library code just to test your app. What was the mocking story like for popular Rails services?11:59 – Adding seams to service integrations so they can be used locally, offline and in testing28:18 – How are people testing their service code today?48:02 – Mocking vs. end-to-end testingLinks:Stefan Penner’s tweet about how critical it is for services to making testing easy

Sam and Ryan talk about whether stores in module scope are a better alternative to Context for sharing global state in React apps.Topics include:0:00 – Intro3:21 – Using Zustand to refactor a useAuth hook34:08 – Module scope vs. context for shared state58:52 – 7 GUI tasksLinks:ZustandSebastian’s tweet on default context valuesSam’s Auth Provider using Zustand, SWR and Suspense7 GUIs

Sam and Ryan talk about how Next.js places an upfront cost on app teams for the sake of scalability and server-side rendering, and how to avoid this cost when building apps with user-specific data where SSR is not a priority. They also talk about avoiding Context for global state in React apps.Topics include:0:00 – Intro1:51 – Avoiding Context for global state in React22:22 – Safeguarding _app in Next.js & dynamic segments in the routerLinks:Sebastian’s tweet on not using context for global stateZustand

Sam and Ryan continue to put some more pieces of the Suspense puzzle together as they talk about how throwing promises enables devs to write synchronous code while still building asynchronous (non-blocking) UI. They also talk about sharing state across pages in Next.js.Topics include:0:00 – Intro1:08 – Sharing state across pages in Next.js9:03 – Confronting JS object identity up-front in React, and buiding consistent trees of different versions of your UI in parallel25:55 – How Suspense lets you represent async UI with sync code42:00 – Interruptibility and push vs. pull49:20 – The problem of invalidation, and the Suspense cacheLinks:Suspense’s contractNew Suspense SSR Architecture in React 18Built-in Suspense Cache

Sam tells Ryan about his experience adding Suspense to his Fitness app and how it improved the app’s UX. They also discuss some problems with skeleton screens and the pros and cons of nested routing.Topics include:0:00 - Intro3:50 - URLs and nested routing13:48 - Suspense, skeletons, and data fetchingLinks:Design Details podcastReact SuspenseNext.js

Prompted by the new React 18 alpha release, Sam and Ryan chat about Suspense and what data-fetching issues they’re excited about it solving. They also talk about some Twitter conversation around premature optimization.Topics include:2:05 – Suspense and data-fetching31:05 – Tweets of the week: PreoptimzationLinks: Sam on TwitterRyan on TwitterSam’s tweet about routing in Next.jsGuillermo Rauch’s tweet on scalable APIsGary Bernhardt’s tweet on premature optimization

Sam and Ryan talk about their experience building the headlessui.dev website with the folks from Tailwind Labs. They chat about the team’s deadline-driven development process, some new Figma workflow tips when implementing a design that was built with Tailwind CSS in mind, and some tech takeaways from building a docs site with Next.js. They also chat about some testing conversation that was happening on Twitter this week.Topics include:1:46 – The power of shipping with a deadline12:22 – What is Headless UI?16:39 – Design / dev handoff tips with Figma and Tailwind28:00 – Tech learnings from building a docs site with Next.js52:47 – Tweets of the Week: Unit vs. Integration testingLinks: Sam on TwitterRyan on TwitterHeadless UIJeffrey Way’s testing tweetGary Bernhardt’s testing tweet

Sam and Ryan talk about how visual design typically drives frontend app development, and whether or not this implies that frontend development should drive backend development in a similar way. They also discuss a tricky UI issue involving keeping a React app consistent with both the URL and server-side auth state.Topics include:2:02 - How the URL makes it hard to keep your app consistent with changes to server-side state34:20 - Pros and cons of uncontrolled forms37:51 - Whether frontend development should drive backend designLinks: Sam on TwitterRyan on TwitterUncontrolled Components in React

Sam and Ryan discuss building a library with TSDX, as well as some hiccups they ran into with node’s module resolution algorithm. They also talk about how even though Tailwind and Bootstrap are both considered CSS frameworks, they’re actually used to solve very different problems.Topics include:0:00 Intro2:55 Building a library with TSDX11:56 Writing docs with MDX21:15 Node resolutions with npm link37:50 Tweet of the week: Redux43:54 Tweet of the week: Feature flags46:35 Tailwind vs BootstrapLinks:TSDXTSDX monorepoChangesetsMDXTailwind typographyPete Hunt on reduxDave Wilson on release and deploymentSam’s Twitter

Sam and Ryan discuss how loading states, data fetching, and skeleton screens can change the architecture of an SSG application. They also talk about Apollo’s cache and various query re-fetching strategies.Topics include:0:00 - Intro2:35 - Image cropper dampening4:00 - Learning library abstractions10:00 - Loading states with SSG28:00 - Server side cache38:30 - Tweet of the week46:00 - Apollo’s cache58:50 - Stale while revalidateLinks:Sam’s Image cropper dampening videoNext.jsFan out on writeTweet of the weekState of CSS surveyApolloURQLSWR

Ryan shares his first impressions using Supabase and talks about a new app he’s building to manage users in Hasura. Sam talks about how to responsibly go outside of React’s rendering cycle when using imperative APIs.Topics include:0:00 - Intro3:40 - Supabase first thoughts13:50 - Building an auth layer for Hasura30:40 - Apollo server37:50 - Framer Motion’s MotionValue and imperative APIsLinks:Sam’s snow photosImage Cropper Ep. 4SupabaseNetlify’s GoTrue User managementHasuraGoogle Cloud PlatformApollo ServerFramer Motion

Ryan shares his experience setting up authentication in a new project with Sam. They also discuss some of the tradeoffs that client apps face when consuming raw JSON vs. passing data through a model layer like an ORM.Topics include:0:00 - Intro1:00 - Visual programming in the video game Factorio9:00 - Setting up auth in a new project22:40 - Checking out Supabase30:00 - Consuming APIsLinks:FactorioFirebaseSupabaseHasura

Sam tells Ryan about what he’s been learning using the React Use Gesture and Framer Motion libraries to build an Image Cropper for his YouTube series. They also chat about their first impressions of React’s new Server Components, as well as the Tailwind 2.0 launch.Topics include:1:40 - First impressions of React server components 12:10 - Tailwind 2 launch 16:15 - React gesture with framer motionLinks:React UseGesture Framer Motion Tailwind Pan and Pinch to Zoom with React Use Gesture – Image Cropper, Ep. 1 Sam’s YouTube channel

Ryan tells Sam about an image uploading solution he built for one of his Next.js apps. They discuss how Next.js's integrated frontend and backend allow for much more convenient packages, and they brainstorm other packages that would fit well within Next's architecture. Ryan also shares how parser combinators helped him write robust text-parsing code for his poker app.Topics include:0:54 – Server and client image uploading in Next.js21:19 – Other packages that cross the client/server divide for Next.js32:18 – Parser combinatorsLinks:Parsimmon

Sam and Ryan talk about whether GraphQL affects the architecture of an app, and what sort of UI code a well-implemented GraphQL server can replace. They also talk about Sam's experience working on a new side project using Next, Hasura, GraphQL and SWR.Topics include:2:34 – Finally feeling good about our tech stack. How easy GraphQL makes it to get or update aggregate data.13:42 – Giving frontend developers a query language19:46 - Does GraphQL encourage your JavaScript frontend to become more of a dumb view layer?35:22 – Should you worry about unnecessary requests if they're abstracted behind your data-fetching library?51:58 – Is GraphQL an implementation detail?

Sam and Ryan talk about how frontend and backend frameworks are converging towards similar UI patterns and developer experiences, even though they're coming at it from different starting points. They also talk about the new Next.js 10 release and whether React should document more opinions held by the core team.Topics include:3:22 – New features in Next.js 1020:40 – How frontend and backend frameworks are converging28:47 – Opinions in React that fall outside of its API35:33 – Next.js' new Image component49:00 – Q: Why is SASS not trendy? How can you replace it with PostCSS?52:12 – Q: How do you edit your videos?Links:Simon Peyton Jones - Haskell is uselessSebastian Markbage's Gist: The Rules of ReactFull Stack Radio episode on Screencasting Tips

Sam and Ryan talk about how both the key prop and useEffect can be used to solve similar problems, and discuss which approach is better. They also talk about the difference between handling data using models with methods vs. using POJOs with pure functions. Topics include:0:34 – Model with methods vs POJOs with functions16:44 – Comparing explicit, verbose code in React vs. other frameworks29:34 – Dumb vs. smart components, and using keys vs. effects47:47 – If a high-level API misses enough use cases, should it even exist?Links:Sebastian's tweet about using the key propSam and Ryan's video hacking on the REPL

Sam and Ryan talk more about their recent experience using Hasura and Amplify, and more generally how best to test apps that are built on third-party services. They also talk about Mirage JS GraphQL.Topics include:7:39 – Testing a Hasura-backed app with Mirage16:03 – Modeling and querying data with Amplify and Dynamo31:09 – Auth, Amplify and Hasura, and testing services

Sam and Ryan talk about a tricky integration between some asynchronous third-party JavaScript code and React's render cycles. They also talk about how powerful the getStaticProps hook from Next.js is, and share some thoughts on whether Firebase's features justify the fact that by using it you lose out on the GraphQL community's standard libraries and tooling.Topics include:0:50 – How to robustly integrate 3rd-party async code into React's render cycles38:08 – How Next.js lets you easily prioritize consistency or availability57:45 – Reflecting on FirebaseLinks:168 AWS Services in 2 minutes

Sam talks about his recent experience working with Next.js on his personal site. He and Ryan also compare Gatsby and Next, and discuss how much Next's updates over the past year have curbed Gatsby's advantages. They also talk about the best way to make frontend developers more autonomous. Topics include:- 8:30 - Working on moving samselikoff.com to Next.js- 39:04 – The best way to make frontend teams more autonomous

Sam and Ryan talk about Ryan's recent experience using Amplify on a side project. They chat about the tradeoffs between using services and writing your own backend code, and how backend services let you do more at the cost of not understanding as much about how the system works.Topics include:9:10 – Why Gatsby's content mesh is so good23:00 – How much of your backend is your product35:00 – Auth in Amplify44:00 – Using Mirage with an Amplify app56:00 – Firebase/Amplify/Hasura comparisonLinks:Ryan's Amplify tweet

Sam and Ryan talk about how route-based code splitting makes SPAs more like traditional server-rendered apps, potentially negating many of their benefits. They also talk about how the intrinsic width of text affects flexbox-based layouts. Topics include:- 4:20 – Flexbox and intrinsic width- 27:40 – Does route splitting negate the benefits of an SPA? Links:- Daniel Schiffer on YouTube- Sam's YouTube video on building a Twitter clone- Rich Harris on Full Stack Radio

Sam and Ryan talk about a post from 2002 discussing Stop Energy, which the author defines as a certain kind of feedback that is thoughtless and can halt forward motion on a project. They also talk about Ryan's adventures with Amplify, and brainstorm how to automate Sam's work journal.Topics include:6:05 – Stop Energy27:55 – Amplify44:27 – Automating a Work JournalLinks:What is Stop EnergyAmplifySubstackSam's work journal

Sam and Ryan talk about adding an authenticated backend to miragejs.com using Hasura, Heroku and Netlify. They also talk about the differences in risk between using paid third-party services vs. depending on open-source libraries. Topics include:- 3:47 – Adding a backend to miragejs.com- 13:03 – Environment variables in frontend apps- 20:48 – Adding privileges to the anonymous role- 28:00 – Should Hasura let you configure permissions for unauthenticated requests?- 31:36 – Setting up a webhook using Netlify cloud function- 37:19 – Risk profile of paid services vs. OSS libraries Links:- Hasura- URQL- Netlify Functions

Sam and Ryan talk – again – about the best way to write side effects in React applications. Ryan shares his approach based on his recent work in several React apps, and talks about the pitfalls of using useEffect's dependency array as a mechanism for control flow. Sam also talks about his recent video on React Router and why it's important to use the entire route hierarchy when determining whether a link is active. Topics include:- 0:00 – Processes, workflow and deadlines- 12:00 – How should you think of useEffect's dependency array- 38:00 – Routing in React Router v6 Links:- Sam's YouTube video on React Router v6

Drew Powers, one of two full-time engineers working at Pika, joins Sam to talk about Pika's mission to make the web faster. Drew talks about how Pika is focused on building tools that meet developers where they're at, his work on Snowpack, and the company's vision for Pika CDN.Topics include:0:00 – What do you do at Pika?4:54 – What is Pika's mission and where is it coming from?10:45 – What does speed mean from Pika's perspective?13:50 – What are some ideas for Pika's sustainability model?17:20 – What's going on in Snowpack?21:43 – What does it look like to use or migrate to Snowpack today?24:50 – How does Snowpack actually work?36:44 – How do you deal with dependencies that can't be deduplicated?48:14 – Snowpack's React App template49:49 – Can you migrate off of Snowpack if you need to fall back to something like Webpack?53:09 – How do ES modules affect dependency resolution?1:05:50 – What's in your roadmap?Links:Drew on TwitterSnowpackArborist Deep DiveESNEXT ConfPika pack