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