Frontend First

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 deadline
• 12:22 – What is Headless UI?
• 16:39 – Design / dev handoff tips with Figma and Tailwind
• 28:00 – Tech learnings from building a docs site with Next.js
• 52:47 – Tweets of the Week: Unit vs. Integration testing

Links:

• Sam on Twitter
• Ryan on Twitter
• Headless UI
• Jeffrey Way’s testing tweet
• Gary 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 state
• 34:20 - Pros and cons of uncontrolled forms
• 37:51 - Whether frontend development should drive backend design

Links:

• Sam on Twitter
• Ryan on Twitter
• Uncontrolled 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 Intro
• 2:55 Building a library with TSDX
• 11:56 Writing docs with MDX
• 21:15 Node resolutions with npm link
• 37:50 Tweet of the week: Redux
• 43:54 Tweet of the week: Feature flags
• 46:35 Tailwind vs Bootstrap

Links:

• TSDX
• TSDX monorepo
• Changesets
• MDX
• Tailwind typography
• Pete Hunt on redux
• Dave Wilson on release and deployment
• Sam’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 - Intro
• 2:35 - Image cropper dampening
• 4:00 - Learning library abstractions
• 10:00 - Loading states with SSG
• 28:00 - Server side cache
• 38:30 - Tweet of the week
• 46:00 - Apollo’s cache
• 58:50 - Stale while revalidate

Links:

• Sam’s Image cropper dampening video
• Next.js
• Fan out on write
• Tweet of the week
• State of CSS survey
• Apollo
• URQL
• SWR

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 - Intro
• 3:40 - Supabase first thoughts
• 13:50 - Building an auth layer for Hasura
• 30:40 - Apollo server
• 37:50 - Framer Motion’s MotionValue and imperative APIs

Links:

• Sam’s snow photos
• Image Cropper Ep. 4
• Supabase
• Netlify’s GoTrue User management
• Hasura
• Google Cloud Platform
• Apollo Server
• Framer 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 - Intro
• 1:00 - Visual programming in the video game Factorio
• 9:00 - Setting up auth in a new project
• 22:40 - Checking out Supabase
• 30:00 - Consuming APIs

Links:

• Factorio
• Firebase
• Supabase
• Hasura

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 motion

Links:

• 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.js
• 21:19 – Other packages that cross the client/server divide for Next.js
• 32:18 – Parser combinators

Links:

• 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 language
• 19: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 10
• 20:40 – How frontend and backend frameworks are converging
• 28:47 – Opinions in React that fall outside of its API
• 35:33 – Next.js' new Image component
• 49: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 useless
• Sebastian Markbage's Gist: The Rules of React
• Full Stack Radio episode on Screencasting Tips