Frontend First

Latest Episodes:

Building headlessui.dev (fixed) Jun 07, 2021

Show notes

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:

Should frontend development drive backend design? May 28, 2021

Show notes

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:

Is Tailwind really an alternative to Bootstrap? Mar 18, 2021

Show notes

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:

Does server-side generation make loading states more complex? Feb 23, 2021

Show notes

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:

Best Practices for Imperative APIs in React Feb 05, 2021

Show notes

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:

Auth: The Momentum Killer Jan 22, 2021

Show notes

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:

Gestures and Animations with React Use Gesture and Framer Motion Jan 14, 2021

Show notes

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:

Bundling client-server communication with packages for Next.js Nov 18, 2020

Show notes

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

Is GraphQL an implementation detail? Nov 11, 2020

Show notes

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?

The convergence of frontend and backend frameworks Nov 04, 2020

Show notes

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: