A podcast about modern UI development on the web. Hosted by Sam Selikoff and Ryan Toronto.
…
continue reading
Bites of tech, web and software development.
…
continue reading
We talk to real people who took the not-so-traditional route to make it as web design freelancers or business owners. Plenty of helpful tips and tricks along the way. If you’re looking to start a side hustle or just up your game as a web or UX designer, this podcast is for you.
…
continue reading
Front-end web news, tips, and more delivered daily. Topics include HTML, CSS, JavaScript, frameworks, preprocessors, APIs, responsive design, cross-browser development, content management systems, Git, and more!
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Fixate on Code | Weekly interviews on how to write better code, for frontend developers
Larry Botha
Gosh - keeping up with web development technologies is hard! We interview the best devs in the industry who share their strategies on how they do it. We get insight into their passion for programming, the methods and tools they can’t live without, and how they keep up with the industry's rapid pace. Every episode ends with a "Quickfire Question Round": answers to 5 rapid-fire questions provide some invaluable tips on how to become a first class dev. Keep pushing the limits, and keep pushing ...
…
continue reading
How i as an 40 year old Funnelhacker quit my 9 to 5 to support my wife and be with my family more. Without a job I now need to make an income online. Watch my journey on how I spent the last money from my 9 to 5 paycheck and setup my online business. See if I make it and see first hand what works and what doesn’t.
…
continue reading
The Hacking UI podcast is hosted by Sagi Shrieber and David Tintner, a designer and developer who are also both entrepreneurs, bloggers, productivity/time-hacking maniacs, and all around tech geeks. The first season of the podcast is titled ‘Scaling a Design Team’, in which they speak with design leaders from top notch companies like Facebook, Apple, Invision, and Intercom, to discuss various team structures, responsibilities, and workflows. After quitting their day jobs to work full time on ...
…
continue reading
Sam and Ryan discuss controlled and uncontrolled components in React. They talk about how uncontrolled components can be thought of as components that manage their own internal state, why you should model your complex React components after the simpler APIs of native HTML elements like inputs, why you shouldn't try to make components that are both …
…
continue reading
Sam and Ryan talk about the pattern of building unstyled components with React. They discuss why unstyled components were created, how they improve upon composition patterns from UI libraries like Bootstrap, how they can be used to share behavior and logic without prescribing any styling opinions, and how they fit into a larger collection of React …
…
continue reading
Sam and Ryan talk about what sorts of capabilities a tool should have to be considered a web framework. They discuss how frameworks tackle the complexity of getting different systems to communicate with each other, how good frameworks embrace the strengths and patterns of the language they're written in, and why frameworks and services are not in o…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Crossover: Declaring War Against the Frontend
59:17
59:17
Play later
Play later
Lists
Like
Liked
59:17
Sam joins Lane Wagner in a crossover episode with the Backend Banter podcast. They talk about abstractions in frontend and backend frameworks, what JavaScript is doing differently from other languages and frameworks, why the frontend should drive the backend even if you're building in a server-side framework, and what's so special about React Serve…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Blog Post Club: Queueing - An interactive study of queueing strategies
46:27
46:27
Play later
Play later
Lists
Like
Liked
46:27
Sam and Ryan read and discuss a fantastic interactive blog post about queueing in HTTP written by Sam Rose. Timestamps: 0:00 - Intro 6:57 - Queueing: An interactive study of queueing strategies 9:05 - Why do we need queues? 13:16 - FIFO and timing out 17:55 - LIFO 20:58 - Priority queues 25:21 - Active queue management 29:08 - Comparing queues 36:3…
…
continue reading
Sam and Ryan discuss the new features in React 19 that will specifically benefit developers building single-page applications. They talk about how Suspense and Transitions let developers "teach" React about when their apps are in a loading or a pending state, how Client Actions improve upon using events in React 18 to handle data mutations, and how…
…
continue reading
Sam tells Ryan about a recent talk he gave at BigSkyDevCon. They chat about how backend frameworks are raising the ceiling of what UIs they’re capable of delivering, how frontend frameworks are raising the floor of what backend features they come bundled with, and what each community can learn from the other. Timestamps: 0:00 - Intro 4:23 - Recap o…
…
continue reading
Sam and Ryan talk about the difference between the costs of building a feature and the benefits that feature brings to our end users. They discuss how libraries and frameworks can lower the technical cost of building a given feature, how Ryan Florence framed this calculation in his talk at Big Sky Dev Con, and how sometimes developers’ opinions and…
…
continue reading
Ryan tells Sam about his experiments with using the new View Transitions API in a React photo gallery app. He talks about how he likes the flexibility of the API, how to think about integrating it into any client-rendered app regardless of the framework, and how he used a Promise with an Effect to tie a View Transition to a React Transition. Topics…
…
continue reading
Sam tells Ryan about his experience setting up an in-browser code editor with CodeMirror that he plans on using for blog posts and code recipes, as well as what he thought about using Radix Themes for the first time in earnest on a side project of his currently styled with Tailwind. Topics include: 0:00 - Intro 4:01 - Building an authoring tool wit…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Throw is about control flow – not error handling
1:04:11
1:04:11
Play later
Play later
Lists
Like
Liked
1:04:11
Sam and Ryan talk about why it’s better to think of throw as a general-purpose JavaScript language feature rather than something that should only be used for error handling. They discuss the ambiguity around the phrase “error handling”, situations that call for dealing with errors locally vs. globally, and how throw can be useful for non-error cont…
…
continue reading
Sam and Ryan discuss the core values of the Next.js framework, and how those values motivate several of the framework’s design decisions. They talk about caching, why layouts don’t have access to the URL, and why the router doesn’t expose navigation events, as well as how developers should think about extending Next’s functionality with their own a…
…
continue reading
Sam talks to Ryan about refactoring an MDX blog post to a React Server Component. They discuss how RSC’s ability to render server-side content with “client-side holes” turns out to replace MDX for many uses cases. They also talk about other tools that are (surprisingly) a conceptual subset of the RSC architecture, such as custom Webpack loaders. To…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Blog Post Club: React Labs – What We’ve Been Working On
1:23:05
1:23:05
Play later
Play later
Lists
Like
Liked
1:23:05
Sam and Ryan read and discuss the latest update from React Labs. Topics include: 0:00 - Intro 5:26 - Opening 6:18 - React Compiler 27:27 - Actions 51:44 - Asset loading 1:13:06 - Next Major Version of React 1:15:42 - Activity Links: React Labs blog post Sam’s video on Strict ModeBy Frontend First
…
continue reading
Sam and Ryan discuss the intuition behind React Transitions, and why React’s new useOptimistic hook is a good fit for building a URL-driven filter panel that stays fully responsive to client interactions. Topics include: 0:00 - Intro 1:12 - The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip 10:44 - Atte…
…
continue reading
Ryan and Sam discuss the purpose and usage of the useOptimistic() hook, a new experimental API from React. Topics include: 0:00 - Intro 2:18 - Problem: RSCs require a server roundtrip before the UI can be updated 10:13 - Solution: useOptimistic() lets you merge ephemeral client-side state with server-side data so you can update the UI during a Serv…
…
continue reading
Ryan and Sam discuss the purpose and usage of the cache() function, a new experimental API from React. Topics include: 0:00 - Intro 2:29 - Caching in Next.js vs. React cache() 8:11 - Why React invalidates the cache for each server request 14:43 - How cache() enables colocation of data-fetching code 16:14 - Using cache() to share CPU-heavy or I/O-bo…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Advanced Radix UI | Blog Post Club: React Server
55:39
55:39
Play later
Play later
Lists
Like
Liked
55:39
Sam and Ryan talk about Advanced Radix UI, Build UI’s newest course. They also read and discuss a blog post that describes the RSC architecture in terms of two processes: React Server and React Client. Topics include: 0:00 - Intro 0:49 - Ceilingless libraries + Advanced Radix UI 21:02 - Read and discuss: “RSC is React Server + Component” Links: Adv…
…
continue reading
Ian Landsman & Aaron Francis join Sam to discuss React Server Actions & Server Components, why it's important to have one set of opinions, and yes, the infamous SQL Injection Slide at NextConf. This is a crossover episode with the excellent podcast Mostly Technical. Topics include: 0:00 - The Most Memed Man on the Internet 09:06 - High Floor vs. Hi…
…
continue reading
Sam and Ryan talk about the key parts of Remix’s architecture in the context of the Work Journal app from Build UI’s latest course. They discuss how Remix’s conventions around Links, Forms, Actions, and Loaders allow developers to eliminate boilerplate and take advantage of the best HTTP has to offer, while still providing a seamless way to enhance…
…
continue reading
Ryan continues to share the details behind his custom RSC implementation. He talks with Sam about how Server Actions allow the client to reference server-side code (in the same way client components allow the server to reference client-side code), how Server Actions are bundled and invoked, and the security concerns associated with blurring the lin…
…
continue reading
Ryan shares how building his own RSC implementation from scratch helped him better understand React’s new paradigm. He and Sam talk about how a client React app can fetch an RSC Payload from a server endpoint to update the UI, how an RSC server renders and bundles Client code that’s part of a Server Component tree, and how a client-side Router can …
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Should a navigation and a refresh show the same page?
45:05
45:05
Play later
Play later
Lists
Like
Liked
45:05
Ryan and Sam talk about how to invalidate Next.js’ client-side cache when a different session makes changes to backend data, and ultimately discuss whether clicking a link to a URL vs. hitting refresh on that same URL should render the same page if no backend data has changed. Topics include: 0:00 - Intro 1:00 - Suspense boundary identity and the A…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
19: The Typescript Tangle: Unraveling the Latest Buzz and Drama with Ariel Shulman
55:06
55:06
Play later
Play later
Lists
Like
Liked
55:06
If Typescript's been buzzin' in your ears and you're feelin' lost or hyped, this episode's your spot. Yoav and Lio, plus special guest Ariel Shulman, break it all down. We're talkin' old-school systems to next-level web stuff, and even some real talk that shakes things up. Tune in and get the lowdown on what's got the dev world talkin'. Ariel is a …
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
18: Why Do We Need UI Component Libraries? With Alon Valadji
54:07
54:07
Play later
Play later
Lists
Like
Liked
54:07
In a world where developer happiness is paramount, UI component libraries are key, or are they? Dive into this episode, where Alon Valadji, inspired by Simon Sinek's philosophy of 'starting with the why', unpacks the significance of these libraries. With a special spotlight on the groundbreaking ShadCN/UI, Alon retraces his journey from his early t…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Tim Neutkens on the Next.js App Router
1:45:02
1:45:02
Play later
Play later
Lists
Like
Liked
1:45:02
Tim joins Sam to talk about his work on the new app router in Next.js 13. He explains how the app router leverages Server Components and React’s new cache API to bring a new level of composability to server-side code, how Server Actions are being designed to enable partial revalidation in a single round trip to the server, and how to think about UI…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Understanding prop passing from RSC to Client Components
48:11
48:11
Play later
Play later
Lists
Like
Liked
48:11
Sam and Ryan discuss how TypeScript helped them understand the mechanics of how props get passed from Server Components to Client Components, and how to properly type client component props if the prop starts out as a rich data type on the server. They also clarify some points from last episode’s discussion about the RSC payload. Topics include: 0:…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
17: Surfing the Wave of the Future with CSS4!
54:46
54:46
Play later
Play later
Lists
Like
Liked
54:46
In this episode, Yoav and Lio explore what's coming next in the world of CSS. They discuss a host of exciting features and improvements that are sure to make your work easier and more fun. The episode covers a lot of ground, from the convenience of CSS nesting (which helps to reduce the need for repetitive selectors), to the potential for creating …
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Server-side rendering vs. Server Components
50:25
50:25
Play later
Play later
Lists
Like
Liked
50:25
Sam and Ryan explore different ways to think about the RSC architecture, including what problems RSC solve, why RSC are valuable even in a world without server-side rendering, and how React’s reconciliation phase enables RSC to make partial updates to the UI as a result of server-side events. Topics include: 0:00 - Intro 5:45 - What if RSC were int…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
16: Appreciating the React Ecosystem: Navigating Change, Burnout, and Developer Perceptions. Introducing our new co-host: Lio Fleishman! 🎉
38:13
38:13
Play later
Play later
Lists
Like
Liked
38:13
Introducing our new co-host Lio Fleishman! 🎉 Join Yoav and Lio in this engaging episode as they delve into the ever-evolving React ecosystem. From reflecting on past technology transitions to discussing the challenges faced by open-source maintainers, the hosts explore the role of developers' opinions, complaints, and resistance to change. They sha…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Reusable pending UI for forms with Server Actions
42:18
42:18
Play later
Play later
Lists
Like
Liked
42:18
Ryan shares his thoughts on how Server Actions and the useFormStatus hook are letting him build reusable pending UI for any form in his Next.js side project. Sam talks about how TypeScript prevents an entire class of data-loading bugs that have plagued single-page applications built with a client-side cache. Topics include: 0:00 - Tailwind Connect …
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
How Suspense led to Server Components (React Roundtable reaction)
51:01
51:01
Play later
Play later
Lists
Like
Liked
51:01
Sam and Ryan share their thoughts on the recent React Roundtable with core team members Sebastian Markbåge and Andrew Clark. They talk about the evolution of Server Components from the perspective of solving the problem of fetching data in React apps, how SPAs have a lower baseline but higher ceiling in terms of the user experience they can deliver…
…
continue reading
Sam and Ryan use some recent Twitter discussion on copying + pasting code (instead of abstracting it for reuse) as a springboard for a discussion about how their thinking on low-level UI components and design systems has changed over the years. Topics include: 0:00 - Intro 2:16 - Copy-paste vs. creating abstractions 11:43 - How we used to build sha…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
What problems do React Server Components solve?
51:05
51:05
Play later
Play later
Lists
Like
Liked
51:05
Sam and Ryan share their learnings from working with Server Components in earnest over the past week. They talk about how Server Components can simplify client components by passing them props, why it makes sense for a component that can run everywhere to be a Server Component by default, whether RSC is causing unnecessary churn in the ecosystem, a…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Implicit time zones and the TZ environment variable
46:17
46:17
Play later
Play later
Lists
Like
Liked
46:17
Sam shares some recent learnings around hydration mismatches when rendering time zoned dates on the server and the client. He talks about using the TZ environment variable to reproduce the issue locally, and how he solved his problem by avoiding impure format and transformation functions from date-fns. Topics include: 0:00 - Intro 0:50 - Sever vs. …
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
React email previews and radial gradients
42:02
42:02
Play later
Play later
Lists
Like
Liked
42:02
Sam and Ryan talk about using MJML to design, build and send transactional emails with React directly in the browser. They also chat about how to use Framer Motion to get a CSS radial gradient to follow the mouse cursor and the differences between React state, refs, Motion Values, and external stores. Topics include: 0:00 - Intro 1:10 - Building in…
…
continue reading
Sam and Ryan talk about building an animated tabs component with CSS’s mix-blend-mode property and Framer Motion’s layout animations. They also talk about how to use the URL constructor in JavaScript to help implement secure arbitrary redirects, as well as their initial reactions to new framework APIs that blur the lines between server and client c…
…
continue reading
Sam tells Ryan about his experience building an animated toggle with React Aria Components. He gives his first impressions of the new library and discusses some of functionality included from the lower-level React Aria hooks. Ryan also talks about his recent use of GitHub Copilot. Topics include: 0:00 - Intro 1:15 - Using GitHub Copilot to keep you…
…
continue reading
Sam and Ryan talk about updating Build UI to support lifetime memberships. They chat about the site’s current architecture, the strengths and weaknesses of objects vs. functions, how the full stack JavaScript community could benefit from a proper model layer like ActiveRecord, the challenges of using GraphQL on the backend, Prisma, and more. Topics…
…
continue reading
Ryan and Sam use some recent Twitter conversation to guide a discussion about the design and purpose of React Server Components. They talk about how client trees and rendered on the server today, why a server-side rendered prepass is wasteful in light of RSC, how hydration of a client tree works, why RSC are never hydrated, how RSC is a purely addi…
…
continue reading
Sam and Ryan share their thoughts on the latest server-centric developments taking place among React frameworks like Remix and Next.js. They discuss the declarative nature of HTML and HTTP, the evolution of frontend development from imperative libraries like jQuery to declarative libraries like React, why developers started creating SPAs in the fir…
…
continue reading
Sam and Ryan have an open-ended conversation about different caching APIs and what kinds of benefits they might afford app developers. They discuss transparent caching layers, cache keys and surrogate keys in systems like Fastly, how SSG is effectively a high-level caching solution, Next.js 13.2’s cache API, Russian doll caching in Rails, whether a…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
15: The Meta Framework Revolution with Dan Shappir
1:16:28
1:16:28
Play later
Play later
Lists
Like
Liked
1:16:28
In this episode, we dive into the world of meta frameworks in web development. The conversation covers a range of topics, including the benefits of meta frameworks, the reasons for their recent popularity, and the potential success of new frameworks such as Qwik and Qwik City. The discussion also explores the factors that may influence the adoption…
…
continue reading
Sam and Ryan chat about their recent work migrating Build UI from a statically generated site to a run-time server-rendered app using Next.js. They talk about their past experience working on server-rendered apps, the problems that static sites were created to solve, and the tradeoffs involved within the static-to-dynamic continuum. Topics include:…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Building user search with React Server Components
1:05:13
1:05:13
Play later
Play later
Lists
Like
Liked
1:05:13
Ryan talks about a demo he built in Next.js 13 with React Server Components. He explains how RSC driven by the URL eliminated client-side states, how he used React 18 Transitions to enhance the UI, and how he was able to fine-tune the experience differently for the initial render vs. subsequent client-side navigations. Topics include: 0:00 - Intro …
…
continue reading
Ryan and Sam read a recent article by Derrick Reimer called “Ship Small, Ship Fast” and offer their thoughts on it. They discuss how implementation details can lead to reductions in scope, the relationship between shipping small and agile, and why quickly getting the first steps of a user flow into production is a good protocol for software teams t…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
14: Discussing the Tailwind CSS drama with CCSer Amit Sheen
1:11:08
1:11:08
Play later
Play later
Lists
Like
Liked
1:11:08
Amit Sheen joins us to discuss the recent "Tailwind fiasco" on tech Twitter, which reignited the same arguments from two years ago. Sheen argues that while Tailwind is a great tool, it has its limits and should be used in the right context. He believes that having 30 classes on a button is an inadequate usage of Tailwind and that readability is imp…
…
continue reading
Sam and Ryan talk about seams in TypeScript programs where lies can sneak in. They chat about how API calls, form inputs, and URLs all relate to this problem, the similarity between drifting types and service mocks in testing, zod, and how type-safe languages like Elm eliminate this problem entirely. Topics include: 0:00 - Intro 2:41 - Lying in Typ…
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
13: Frontend First crossover with Sam Selikoff and Ryan Toronto
1:13:44
1:13:44
Play later
Play later
Lists
Like
Liked
1:13:44
Summary Sam Selikoff and Ryan Toronto joined us to discuss the development scene, their own development philosophies, and how they transitioned from Ember to React. We discussed the importance of being pragmatic and the difficulty of finding like-minded people in the development space. Links: Sam Selikoff - Twitter, YouTube Ryan Toronto - Twitter, …
…
continue reading
![Artwork](/https/player.fm/static/images/128pixel.png)
1
Animating a Stable Diffusion side project
47:55
47:55
Play later
Play later
Lists
Like
Liked
47:55
Ryan tells Sam about a side project of his that involves running the text-to-image deep learning model Stable Diffusion on his laptop in response to web requests. Ryan asks Sam questions about animating this UI, including how to animate indeterminate progress, how to avoid unintentional layout animation, and how to automatically repeat a set of ite…
…
continue reading