Frontend First cover image

Frontend First

Latest episodes

undefined
Oct 28, 2020 • 1h 9min

Key props vs. effects

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
undefined
Oct 15, 2020 • 60min

How to test apps built on third-party services

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
undefined
Sep 17, 2020 • 1h 6min

Singleton components

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
undefined
Aug 26, 2020 • 49min

Next.js vs. Gatsby, revisited

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
undefined
Aug 12, 2020 • 1h 7min

Adventures with Amplify

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
undefined
Jul 29, 2020 • 51min

Does code splitting negate the benefits of building an SPA?

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
undefined
Jul 16, 2020 • 55min

Stop Energy

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
undefined
Jul 2, 2020 • 1h 8min

Tech debt vs. platform risk

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
undefined
Jun 24, 2020 • 1h 6min

Safety and idempotence

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
undefined
Jun 19, 2020 • 1h 10min

Drew Powers on How Pika's Making the Web Faster

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

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode