Shows
Frontend FirstuseAnimatedText | Events vs. State Changes | CatalystSam and Ryan talk about building a useAnimatedText hook that can animate streaming text. They also discuss how React code that uses state changes to approximate events can be simplified, and the benefits of having escape hatches when building UI with Catalyst.Timestamps:0:00 - Intro1:22 - Catalyst and escape hatches16:03 - Building a useAnimatedText hook (aka useBufferedText)54:10 - Avoiding using state changes to approximate eventsLinks:CatalystSam's Tweet about useBufferedText and AnimatedScrolleruseAnimatedText recipeIntl.Segmenter on MDNDavid K's Tweet on eventsRicky's Tweet on Intersection ObserverBuild UI's new course
2024-10-241h 08Frontend FirstRender propsSam and Ryan talk about render props in React. They discuss where they came from, how Hooks superseded them for sharing stateful logic, how data attributes compare to them for customizing styling, and how for certain complex components like forms they're still a great solution for accessing slices of internal state.Timestamps:0:00 - Intro3:40 - Where did render props come from?6:01 - How hooks replaced many use cases for render props8:14 - Using render props for custom styling10:32 - Data attributes vs. render props for custom styling16:43 - Using render props to peek into an uncontrolled...2024-09-0534 minFrontend FirstControlled and uncontrolled componentsSam 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 controlled and uncontrolled, and why making a new component boundary is sometimes all you need to make your custom components behave more predictably.Timestamps:0:00 - Intro1:41 - What are controlled and uncontrolled components?6:11 - How to change a component from...2024-08-2847 minFrontend FirstUnstyled React componentsSam 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 patterns that can be used to build more powerful components that avoid premature abstractions.Timestamps:0:00 - Intro1:36 - What are unstyled components?2:24 - How do unstyled components improve upon earlier patterns?6:44 - Why would you want to use an unstyled...2024-08-1534 minFrontend FirstWhat is a framework?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 opposition to each other.Timestamps:0:00 - Intro3:58 - Adapter pattern and cohesive boundaries9:43 - Rails is Omakase13:47 - Configurable, but still cohesive17:04 - Frontend frameworks try to “work with everything”21:42 - Does composition mean a React framework will look diff...2024-08-011h 02Frontend FirstCrossover: Declaring War Against the FrontendSam 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 Server Components.Timestamps:0:00 - Intro2:12 - When abstractions leak6:37 - Recap of Sam's BigSky talk10:51 - What is JavaScript doing differently?19:10 - Why frontend frameworks should have more backend features24:04 - Strong opinions on a library level30:29 - Shipping more standardized interfaces37:06...2024-07-2559 minFrontend FirstBlog Post Club: Queueing - An interactive study of queueing strategiesSam and Ryan read and discuss a fantastic interactive blog post about queueing in HTTP written by Sam Rose.Timestamps:0:00 - Intro6:57 - Queueing: An interactive study of queueing strategies9:05 - Why do we need queues?13:16 - FIFO and timing out17:55 - LIFO20:58 - Priority queues25:21 - Active queue management29:08 - Comparing queues36:32 - ConclusionLinks:Queueing: An interactive study of queueing strategiesUp and Down the Ladder of Abstraction
2024-07-1846 min
Backend Banter#062 - Declaring War Against the Frontend feat. Sam SelikoffIn today’s episode, we go to war with Sam Selikoff, co-host of the Frontend First podcast, and specialist on everything Frontend related.
We have an amazing conversation where we discuss Sam’s journey, as he also did some backend work in the past, we talk about abstractions, what JavaScript is doing differently from other languages and frameworks, why the frontend should be driving the backend and not the other way around, and finish it off with a discussion about RSCs (React Server Components).
Learn back-end development - https://www...2024-07-1559 min
PodRocket - A web development podcast from LogRocketIncomplete React with Sam SelikoffIn today’s episode, Sam Selikoff, educator and consultant in modern UI development, explores the depths of React and its place in the ecosystem. He talks about React's evolution, compares it with other frameworks, and discusses the innovative potential of server components and new React primitives.
Links
https://samselikoff.com
https://twitter.com/samselikoff
https://www.youtube.com/user/samselikoff
https://github.com/samselikoff
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were re...2024-05-0832 minFrontend FirstCodeMirror | Radix ThemesSam 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 - Intro4:01 - Building an authoring tool with CodeMirror18:47 - Refactoring Tailwind to Radix ThemesLinks:CodeMirrorSam’s YouTube video on Radix ThemesRadix Themes docs
2024-04-1745 min
Open ThreadsSoftware founder life in NYC with Sam SelikoffSam Selikoff, cofounder of BuildUI, returns to the show and we talk all about NYC! New York City, one of my favorite places. Brian and Sam’s conversation was recorded on December 15th, 2023.(00:00) - Software founder life in NYC with Sam Selikoff
(02:59) - What is the crowd like?
(05:08) - New York's downfall - sports teams
(06:56) - Working remotely in NYC
(10:47) - City life vs. Suburb life
(12:39) - NY energy (crazy and all!)
(14:27) - Cost of living
2024-04-1718 minOpen ThreadsTeaching User Interface Development with Sam Selikoff (BuildUI)Sam Selikoff, cofounder of BuildUI joins me for a wide-ranging (and sometimes technical) conversation about his journey as a software engineer, and his business teaching UI development with video courses and YouTube. Brian and Sam’s conversation was recorded on December 15th, 2023.(00:00) - Teaching User Interface Development with Sam Selikoff (BuildUI)
(04:47) - Sam's elevator pitch
(06:16) - Marketing as front end only (at first)z
(09:50) - BuildUI courses and staying up to date
(18:17) - BuildUI's UI (...and UX)
(20:53) - Sam's time at TED
(25:37) - Transition from TED to BuildUI
(29:02) - BuildUI origin story
(32:12) - Pivoting mom...2024-03-1339 minFrontend FirstBlog Post Club: React Labs – What We’ve Been Working OnSam and Ryan read and discuss the latest update from React Labs.Topics include:0:00 - Intro5:26 - Opening6:18 - React Compiler27:27 - Actions51:44 - Asset loading1:13:06 - Next Major Version of React1:15:42 - ActivityLinks:React Labs blog postSam’s video on Strict Mode
2024-03-011h 23Frontend FirstThe SQL Injection SlideIan 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 Internet09:06 - High Floor vs. High Ceiling19:20 - What the Hell Is Next?23:22 - The Third Phase of React29:09 - Your App Is Not Unique35:23 - Server Actions & Server Components51:33 - CallYourMom.Com01:00:56 - Fat Models, Skinny Controllers01:14:16 - One Set of Opinions2023-11-061h 27
Mostly Technical13: The SQL Injection Slide with Sam SelikoffIan & Aaron are joined by Sam Selikoff 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.Sponsored by LaraJobs & Screencasting.com.Sent questions or feedback to mostlytechnicalpodcast@gmail.com.(00:00) - The Most Memed Man on the Internet
(09:06) - High Floor vs. High Ceiling
(19:20) - What the Hell Is Next?
(23:22) - The Third Phase of React
(29:09) - Your App Is Not Unique
(35:23) - Server Actions & Server Components
(51:33) - CallYourMom.Com
(01:00:56) - Fat Models, Skinny Controllers
(01:14:16) - One...2023-11-031h 24Frontend FirstLearning by copy-pasteSam 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 - Intro2:16 - Copy-paste vs. creating abstractions11:43 - How we used to build shared UI components15:34 - How we use UI components today22:42 - Is copy-paste the easiest way for developers to implement consistent design?27:41 - When should we create abstractions?37:15 - Designing copy-pasteable APIsLinks:Dan’s tweetBuild UI NewsletterSam’s Serv...2023-05-2441 minFrontend FirstWhat problems do React Server Components solve?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, and how to think about choosing Server Components vs. client components for a given task.Topics include:0:00 - Intro0:48 - Lessons learned from building a D3 chart as a React Server Component22:04 - Are Server Components causing unnecessary...2023-05-1751 minFrontend FirstReact email previews and radial gradientsSam 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 - Intro1:10 - Building in-browser email previews with MJML18:50 - Using radial gradients and Motion Values to build a moving spotlight treatmentLinks:MJMLReact EmailMaizzleSam’s Spotlight video on YouTubeSpotlight code recipe
2023-05-0342 minFrontend FirstReact Aria ComponentsSam 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 - Intro1:15 - Using GitHub Copilot to keep you working at higher levels of abstraction8:15 - react aria components toggle. pressed state. When to use browser defaults vs headless for form inputs.Links:React Aria ComponentsSam’s YouTube video on building an animated toggleBuild UI Recipe: iOS An...2023-04-2035 min
FedBites13: Frontend First crossover with Sam Selikoff and Ryan TorontoSummary
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, YouTube
Fontend First
BuildUI
Yoav Ganbar
Roman Sandler
2023-01-241h 13Frontend FirstAnimating a Stable Diffusion side projectRyan 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 items while scrolling rather than stopping at the end.Topics include:0:00 - Intro0:24 – Overview of Ryan’s Stable Diffusion project -9:36 – Strategies for animating partially indeterminate progress -18:25 – Brainstorm of the API for the headless version of a partially indeterminate progress Hook -25...2023-01-1947 minFrontend FirstLessons from stitching GraphQL services with HasuraRyan talks about the pros and cons of exposing Build UI’s environment-independent CMS from Hasura via schema stitching. He also talks about writing a Postgres function to add a derived field to a database model. Sam shares a debugging story about fixing his personal website due to a breaking change in a minor version of npm.Topics include:0:00 - Intro1:50 - Debugging Sam’s personal website due to a breaking change in npm related to peer dependencies18:00 - Pros and cons of using a Postgres function to derive the active status of a Build UI subs...2023-01-1154 minFrontend FirstPlaying with Server Components in Vercel’s Edge RuntimeRyan tells Sam about some experiments he’s been running using Server Components in Vercel’s new edge runtime. He talks about how components that suspend in the node runtime cause the static build of your Next.js app to wait until they unsuspend, while components that suspend in the edge runtime stream back fallback responses as data is being fetched. Ryan also tells Sam about a blocking JS trick he learned to alter the initial render of your clientside app based on client-specific data, like whether their theme preference is dark or light mode.Topics include:0...2022-08-2251 minFrontend FirstThe problem with buttons on the webSam and Ryan chat about issues with default HTML buttons on the web across different devices and browsers. They talk about the Extensible Web Manifesto, how the React Aria library helps standardize button behavior across platforms, and the difference between state-based and event-based animations.Topics include:0:00 - Intro2:09 – The problem with default buttons on the web -17:26 – How we got here, and the Extensible Web Manifesto -26:22 – React Aria’s unified Press interface -32:26 – Getting consistent Focus styling -40:30 – Event-based vs. state-based animations -Links:Sam’s video on building an animated buttonReact Aria useButtonBuild...2022-07-2055 minFrontend FirstShould you use merge commits or rebase when working on large codebases?Sam and Ryan talk about whether you should use merge commits or you should rebase commits in your PRs when working on large, fast-moving codebases. They also talk about implementing build-time client-side search with Stork, and why layering in animation code shouldn’t materially affect your existing React code.Topics include:0:00 - Intro1:48 – How to use D3 with React elements -9:14 – Why you should unmount Modals and Dialogs when they’re not visible -24:36 – Using Stork to implement build-time, client-side search -36:03 – Merge commits vs. rebasing in large codebases -Links:Sam’s D3 and Framer Mot...2022-06-0655 minFrontend FirstReacting to Remix!Sam and Ryan share their experiences building with Remix for the very first time. Sam built a simple exercise tracking app using the Indie starter stack, and Ryan built a blog using server rendering in both Remix and Next.js, and talks about the differences between the two frameworks. They both discuss what the larger React community can learn from the ideas that Remix has to offer.Topics include:0:00 - Intro2:33 - Sam’s Remix app6:34 - The Indie stack19:36 - Creating the data model in Prisma, a form, and an index route25:48 - Ryan building th...2022-03-251h 05Frontend FirstClient apps, server apps, and the real reason DX mattersSam and Ryan chat about Remix and the differences between data fetching and mutations on the client vs. the server. They also talk about whether a framework’s APIs or the actual apps it enables developers to build are more important when choosing which tool to use.Topics include:0:00 - Intro2:17 - What matters more to developers when choosing a framework: their experience using the APIs, or what they can build with it?18:38 - Remix and data fetching on the client vs. the server36:36 - Does running code on the edge really matter for day-to-day developers?...2022-03-171h 17Frontend FirstWhat’s the link between Server Components and Suspense for Data Fetching?Sam and Ryan talk about why Suspense for Data Fetching isn’t ready yet, and how both it and the Server Components feature of React 18 rely on the ability to evict a cache that’s internal to React. They also talk about Transitions.Topics include:0:00 - Intro5:19 - Using startTransition with a router9:36 - How React 18 yields21:37 - Why both Suspense for Data Fetching and Server Components need a way to invalidate React’s cache37:24 - How Server Components can remove the need for explicit API calls without sacrificing any of React’s composability1:01:00 - Real-world problems...2022-02-251h 12Frontend FirstInternal apps vs. public websitesSam and Ryan chat about the differences between building internal apps vs. public websites, and why public sites get talked about more on forums like Twitter. They also talk more about their experiments with Suspense and Transitions in React 18.Topics include:0:00 - Intro2:35 - How to trigger Suspense by accessing an unresolved promise11:04 - Tension between flexibility of Transitions and Suspense vs. best practices around data fetching21:00 - Semantics of React APIs when using Concurrent features24:12 - How internal tools differ from public websites43:24 - Sam’s next vid: Reducing loading spinners on route transitions in Ne...2022-02-171h 00Frontend FirstIs Suspense “backwards compatible”, and thoughts on Remix & web standardsSam and Ryan chat about how Suspense lets you remove defensive and confusing useEffect code from your React components. They also share some initial thoughts about how Remix is positioning itself in the frontend dev space.Topics include:0:00 - Intro4:53 - How compatible are non-Suspense APIs with Suspense, and how can we bridge these two worlds?33:35 - Impressions about Remix’s positioning around web standardsLinks:Sam’s video for this weekRemixThe Cursed Computer Iceberg MemeCoding MachinesFlappy Bird in Super Mario World
2022-01-291h 03Frontend FirstTransitions and Data Fetching with Suspense in React 18Sam and Ryan continue their discussions around React 18 and the in-progress work on data fetching with Suspense. They talk about the useTransition hook and how it helps eliminate inconsistent states from your application. They also talk aboutTopics include:0:00 - Intro4:13 - What does Suspense for Data Fetching mean?15:00 - How Transitions allow us do work outside of render39:43 - Dealing with Timezone-dependent tests46:45 - Modal routing in Next.js48:15 - Snapshotting form dataLinks:Sam’s video on SuspenseAfterInitialRendersuspend-react by pmndrsSam’s thread on suspend-reactBuilt-in suspense cache discussionConcurrent mode transitionsReddit exampleReact forms
2022-01-1953 minFrontend FirstSuspense and the React 18 KeynoteSam and Ryan talk about how the React 18 Keynote told the story of Suspense. They discuss how Suspense resolves the tension between encapsulated data-fetching components on the one hand, and coordinated loading UI on the other. They also talk about Sam’s Tailwind course on Egghead and Ryan’s experience upgrading to Tailwind 3.Topics include:0:00 - Intro1:14 - Sam’s Tailwind Course on Egghead3:44 - Upgrading to Tailwind 36:57 - React Conf + SuspenseLinks:Craft Scalable, Custom-Made Interfaces with Tailwind CSSTailwind CSS v3.0React 18 Keynote
2021-12-211h 01Frontend FirstShared reactive data without context or effectsSam and Ryan talk about whether stores in module scope are a better alternative to Context for sharing global state in React apps.Topics include:0:00 – Intro3:21 – Using Zustand to refactor a useAuth hook34:08 – Module scope vs. context for shared state58:52 – 7 GUI tasksLinks:ZustandSebastian’s tweet on default context valuesSam’s Auth Provider using Zustand, SWR and Suspense7 GUIs
2021-07-191h 03Frontend FirstTalkin’ Bout SuspensePrompted by the new React 18 alpha release, Sam and Ryan chat about Suspense and what data-fetching issues they’re excited about it solving. They also talk about some Twitter conversation around premature optimization.Topics include:2:05 – Suspense and data-fetching31:05 – Tweets of the week: PreoptimzationLinks: Sam on TwitterRyan on TwitterSam’s tweet about routing in Next.jsGuillermo Rauch’s tweet on scalable APIsGary Bernhardt’s tweet on premature optimization
2021-06-1445 minFrontend FirstBuilding headlessui.dev (fixed)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 w...2021-06-071h 05Frontend FirstShould frontend development drive backend design?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
2021-05-281h 00Frontend FirstIs Tailwind really an alternative to Bootstrap?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
2021-03-181h 05Frontend FirstDoes server-side generation make loading states more complex?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
2021-02-231h 05Frontend FirstBest Practices for Imperative APIs in ReactRyan 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
2021-02-051h 01Frontend FirstGestures and Animations with React Use Gesture and Framer MotionSam 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
2021-01-1436 min
The Business of Open SourcePositioning Open Source Projects with Sam SelikoffThis conversation covers:Mirage’s role as an API mocking library, the value that it offers for developers, and who can benefit from using it.How Mirage empowers front end developers to create production-ready UIs as quickly as possible.How Mirage evolved into an API mocking library How Mirage differs from JSON Server Sam’s relationship to Mirage, and how it fits in with his business. Sam also talks about open source business models, and whether Mirage could work as a SaaS offering.One interesting use case for Mirage, which involves demoing software and driving sales.LinksMira...2020-11-2538 minFrontend FirstIs GraphQL an implementation detail?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 librar...2020-11-111h 05Frontend FirstKey props vs. effectsSam 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...2020-10-281h 09
React Podcast110: Sam Selikoff on Finding a Full Stack ReactNews!We have a YouTube channel for React Podcast 🥳Watch the livestream of this chat with Sam and Subscribe for future chats!FeaturingSam Selikoff — Twitter, GitHub, Websitechantastic — Twitter, GitHub, WebsiteLinksFrontend First Podcast with Sam Selikoff and Ryan TorontoEmberMap — videos for professional Ember.js developersNextJSMirage — Build complete frontend features, even if your API doesn't existFirebaseHasuraJSON APISam's Recipe SiteNetlify AuthFirebase AuthSponsorsInfinite RedIn over your head with a React or React Native app?Infinite Red can help.They are Reac...2020-09-1700 min
React Podcast110: Sam Selikoff on Finding a Full Stack ReactSam Selikoff and chantastic dissect the challenges of transitioning from bundled, batteries-included frameworks (like Rails) to unbundled, choose your own adventures frameworks like React.
They discuss the virtues of full stack frameworks, common pitfalls found when building your own framework, and the great tooling that's emerging to fill gaps in authentication, data storage, and developer-designer experience…2020-09-171h 01Frontend FirstAdventures with AmplifySam 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
2020-08-121h 06Frontend FirstDoes 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
2020-07-2950 minFrontend FirstStop EnergySam 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
2020-07-1655 minFrontend FirstTech debt vs. platform riskSam 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 libraries2020-07-021h 07Frontend FirstSafety and idempotenceSam 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 R...2020-06-241h 06Frontend FirstDrew Powers on How Pika's Making the Web FasterDrew 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 – ...2020-06-191h 10Frontend FirstTom Preston-Werner on Architecture Decisions in Redwood JSTom Preston-Werner joins Sam and Ryan to talk about some of the architecture decisions behind Redwood JS, a recently released full-stack JS framework he's been working on for more than a year. Tom talks about how Redwood's Services provide a first-class layer of abstraction on top of your backend data models for your application's business logic, why Redwood went all-in on GraphQL, and how the framework is poised to take advantage of future improvements coming to serverless infrastructure. Topics include:- 0:00 – Rails' influence on Redwood- 8:00 – How Redwood Services keep your backe...2020-06-101h 18Frontend FirstWhy the browser is the most complex runtime environmentSam and Ryan talk about the unique aspects of ES modules that have driven the recent explosion of innovation in the frontend build tooling space, giving rise to tools like Snowpack and Vite. They also chat about their desire for a more integrated frontend ecosystem that would make adding things like auth to frontend apps easier, as well the impressive web-based drawing tool Excalidraw. Topics include:- 1:16 – ES modules- 14:09 – Why do we bundle?- 20:47 – Modules are stateful singletons, and the benefits of dependency injection- 35:12 – Desire for an int...2020-05-281h 02Frontend FirstRead and Discuss: "Second-guessing the modern web"Sam and Ryan read and discuss Tom MacWright's recent article "Second-guessing the modern web," as well as Rich Harris's response "In defense of the modern web." The articles respectively argue against and for the JavaScript-centric approach to building websites that has taken root over the past ten years and debate issues of performance, architectural complexity, and user experience. Topics include:- 6:30 – "Second-guessing the modern web" by Tom MacWright- 52:27 – Dan Abramov's thoughts on Twitter- 58:50 – "In defense of the modern web" by Rich Harris Links:- ["S...2020-05-201h 16Frontend FirstEveryone's sidestepping useEffect. Is everyone wrong, or is it React?Sam and Ryan grapple with the way useEffect nudges you to build UIs. They discuss whether JavaScript object identity is a good proxy to use for business logic equivalence, whether useEffect leads to more correct code, and then they chat about some of the ways React developers sidestep useEffect when the declarative programming model that Hooks impose upon them is not a good fit with their app's business logic. Topics include:- 11:39 – JavaScript identity vs. business logic identity when working with useEffect
2020-05-141h 07Frontend FirstWhen APIs get misused, who's to blame?Sam and Ryan chat about how and why framework APIs get used and abused. Ryan also shares his experience working with AWS Amplify on a side project. Topics include:- 3:17 – How useEffect can be confusing in high-level app code- 21:05 – Immediate mode GUIs- 32:40 – Who's responsible when developers misuse framework APIs?- 46:40 – AWS Amplify- 1:14:25 – Our ideal stack Links:- [Immediate mode GUIs - Go Time #128](https://changelog.com/gotime/128)- [AWS Amplify](https://aws.amazon.com/amplify/)...2020-05-071h 23Frontend FirstWTF is the JAMstack?Sam and Ryan try to unpack the meaning of JAMstack. They discuss the constraints of the architecture, why it's confusing to think of it as an application stack, the implications it has for app cachability, and whether the Twelve Factor App that Heroku introduced in the Rails-dominated era of web development might be a better way to think about this new paradigm. Topics include:- 0:00 – Building Optimistic UIs- 13:45 – Immutable assets vs. mutable HTML- 36:05 – JAMstack, Twelve Factor Apps, and leveraging CDNs Links:- [Sam's...2020-05-011h 18Frontend FirstComing soon: Frontend FirstSam and Ryan tell listeners about the upcoming rebrand of the EmberMap Podcast.2020-04-2014 minFrontend FirstWhat's been the primary driver of JavaScript adoption?Sam and Ryan discuss what has driven JavaScript adoption on the web over the past 5-10 years, and what implications those drivers have had for the tools and frameworks we work with today. They also talk about why it's still so hard to build good SPA experiences on the web. Topics include:- 5:10 – Finding real-world pain points- 8:44 – Mirage Inspector's serverless backend- 15:30 – Not being happy with our stack- 18:38 – Why on SPAs on the web tend to be so awful?- 30:37 – What has driven JS adoption...2020-04-081h 07Frontend FirstDoes route-based code splitting make UX worse?Sam and Ryan talk about the tradeoffs between shipping a single bundle of code vs. the route-based code splitting approach used by many tools like Gatsby and Next. They also talk about their recent experiences building with React, and whether web developers should compete with native experiences or embrace what the web has to offer. Topics include:- 2:38 – In React, there are no components- 13:45 – The feeling of momentum in React- 23:33 – SPA bundles vs. per-page code splitting- 45:33 - Conceptual code splitting, and web experiences vs. native...2020-04-011h 28Frontend FirstYehuda Katz on Thinking Long Term about Experimentation vs. Fragmentation in OSSYehuda Katz joins Sam to talk about the strategies Ember's developed to keep the majority of the community on recent versions of the framework for more than 8 years. He talks about lessons learned from the 1.13 upgrade, how the core team thinks about API experimentation vs. community fragmentation, and the approach Octane is taking to enable frontend developers that know HTML and CSS to ship interactive sites with Ember. Topics include:- 5:15 – What experiences led Ember to prioritize bringing the entire community along for upgrades and changes to the programming model- 21:22 – Why o...2020-03-201h 41Frontend FirstImports are not code – they're declarationsTopics include:- 2:31 – Tailwind, PostCSS, and low-level vs. high-level tools- 13:12 – Mirage JS and Cypress- 13:55 – Ember 3.13 and Octane- 15:28 – Ryan's experiencing upgrading EmberMap from 3.4 to 3.12- 20:19 - ES Modules, and learning that imports are not code- 42:12 – React and useEffect, and the difference between reads and writes vs. rendering and event handlers- 1:00:50 – Object-oriented vs. functional programming in JavaScript Links:- [Ember 3.13 Release (Octane Preview)](https://blog.emberjs.com/2019/09/25/ember-3-13-released.html)- [How to upgrade an Ember...2019-10-111h 06Frontend FirstServer-side state means global resource identityTopics include:- 0:00 – Dealing with asynchrony and persistence in Vue- 8:56 – Thoughts on Vue's APIs, and how they compare with React and Ember- 22:20 – "Magic" in UI frameworks vs. server-side frameworks- 27:17 – Build work in Mirage JS, and a new passthrough API- 38:26 - How opinionated should project documentation be?- 50:40 - Edward Faulkner's talk on compilers, abstractions, ES modules, and Embroider Sponsors:- [Next Release](https://www.nextrelease.io/ember/), mention EmberMap when you sign up for a trial and get 10% off2019-10-041h 13
My JavaScript StoryMJS 121: Sam SelikoffSponsors
Sentry use the code “devchat” for 2 months free on Sentry small plan
Ruby Rogues
React Native Radio
CacheFly
Host: Charles Max Wood
Joined by Special Guest: Sam Selikoff
Episode Summary
Sam Selikoff, Co-Founder at EmberMap shares his journey of how he became a developer. Sam was an Economics major in college and he really loved the theory of economics.
When he graduated, he started working as a consultant and while working with data for statistical analysis he...2019-09-0300 min
My JavaScript StoryMJS 121: Sam SelikoffSponsors Sentry use the code “devchat” for 2 months free on Sentry small plan Ruby RoguesReact Native RadioCacheFly Host: Charles Max Wood Joined by Special Guest: Sam Selikoff Episode Summary Sam Selikoff, Co-Founder at EmberMap shares his journey of how he became a developer. Sam was an Economics major in college and he really loved the theory of economics. When he graduated, he started working as a consultant and while working with data for statistical analysis he found that he enjoyed working with SQL and that how he started his developing career. Sam explains why he prefers Ember.js framework to other...2019-09-0327 min
All JavaScript Podcasts by Devchat.tvMJS 121: Sam SelikoffSponsors
Sentry use the code “devchat” for 2 months free on Sentry small plan
Ruby Rogues
React Native Radio
CacheFly
Host: Charles Max Wood
Joined by Special Guest: Sam Selikoff
Episode Summary
Sam Selikoff, Co-Founder at EmberMap shares his journey of how he became a developer. Sam was an Economics major in college and he really loved the theory of economics.
When he graduated, he started working as a consultant and while working with data for statistical analysis he...2019-09-0327 min
All JavaScript Podcasts by Devchat.tvMJS 121: Sam SelikoffSponsors
Sentry use the code “devchat” for 2 months free on Sentry small plan
Ruby Rogues
React Native Radio
CacheFly
Host: Charles Max Wood
Joined by Special Guest: Sam Selikoff
Episode Summary
Sam Selikoff, Co-Founder at EmberMap shares his journey of how he became a developer. Sam was an Economics major in college and he really loved the theory of economics.
When he graduated, he started working as a consultant and while working with data for statistical analysis he...2019-09-0327 minFrontend FirstObject references considered helpfulTopics include:
0:00 – Unique keys for lists in React and Ember
8:40 – Why Handlebars feels safe
9:34 – Solving a stale state React hooks bug, and how Ember avoids this via object references
24:29 – ESPN's website and self-imposed technical constraints
28:10 – React in Codesandbox
36:53 – Tradeoffs between "magic" in a framework vs. learning how to wire things up yourself - especially in a fast-moving ecosystem like JavaScript
50:35 – Hooks vs. components, and clarity in boundaries
53:29 – Pairing with Tuple experience
Listener questions:
55:43 – How can you limit FastBoot from turning user-specific bugs into bugs that take down your entire production app? (@davewasmer)
1:10:47 – What's the future of web components? (selbyk...2019-08-071h 19Frontend FirstStateless development environmentsTopics include:
4:25 – Causes of burnout other than overwork
9:02 – Finalizing Mirage 1.0
10:42 – Keeping your development environment stateless
21:00 - Unified APIs for backend and frontend data queries
42:28 – Tailwind 1.0
Links:
Copy Paste Repeat Ep. 18
Twitter conversation between Trek and Sam on shared UI models
Sam on Twitter
Ryan on Twitter
2019-05-2248 min
JavaScript JabberJSJ 364: Ember Octane with Sam SelikoffSponsorsTriplebyte offers a $1000 signing bonusSentry use the code “devchat” for $100 creditLinodeCacheFlyPanelAJ O’NealJoined by special guest: Sam SelikoffEpisode SummaryIn this episode of JavaScript Jabber, Sam Selikoff, Co-Founder at EmberMap, Inc. starts with giving a brief background about himself and his work followed by a discussion with AJ O’Neal about the Ember community. Sam mentions some of the biggest advantages in using Ember, and what it should and should not be used for. He explains the architecture of Ember apps, addresses some of the performance concerns and then dives into Octane in detail. He talks about a bunch of Ember componen...2019-05-1452 minAll JavaScript Podcasts by Devchat.tvJSJ 364: Ember Octane with Sam SelikoffSponsors
Triplebyte offers a $1000 signing bonus
Sentry use the code “devchat” for $100 credit
Linode
CacheFly
Panel
AJ O’Neal
Joined by special guest: Sam Selikoff
Episode Summary
In this episode of JavaScript Jabber, Sam Selikoff, Co-Founder at EmberMap, Inc. starts with giving a brief background about himself and his work followed by a discussion with AJ O’Neal about the Ember community. Sam mentions some of the biggest advantages in using Ember, and what it should and should not be used for. He explains the architecture of...2019-05-1452 minAll JavaScript Podcasts by Devchat.tvJSJ 364: Ember Octane with Sam SelikoffSponsors
Triplebyte offers a $1000 signing bonus
Sentry use the code “devchat” for $100 credit
Linode
CacheFly
Panel
AJ O’Neal
Joined by special guest: Sam Selikoff
Episode Summary
In this episode of JavaScript Jabber, Sam Selikoff, Co-Founder at EmberMap, Inc. starts with giving a brief background about himself and his work followed by a discussion with AJ O’Neal about the Ember community. Sam mentions some of the biggest advantages in using Ember, and what it should and should not be used for. He explains the architecture of...2019-05-1452 minFrontend FirstNathan Selikoff on Omnimodal's real-time tech stackTopics include:
4:23 – Overview of Omnimodal's tech stack
6:38 – Omnimodal's mission: to help cities manage transportation demand
16:10 – How to ingest open transportation data and present it in real time
21:43 – How graphics-heavy OpenGL and C++ apps can benefit from web tooling
31:06 – Why state machines are used in both video game and web development
34:55 – How JavaScript UI development compares to other paradigms
38:46 – Why Ember and Rails were chosen for Omnimodal's technology needs
42:09 – Using a prediction engine to improve on transportation schedules
44:56 - How Omnimodal gets data from its hardware trackers to the Rails server
50:55 – How services like Heroku and PubNub, custom AWS code, and the conc...2019-05-081h 27Frontend FirstEdward Faulkner on Embroider, Ember CLI's modern build systemEdward Faulkner joins Sam and Ryan to chat about his work on Embroider, a new three-stage architecture that will power the next generation of the Ember CLI ecosystem. They also talk about myriad other topics, including Yarn Plug'n'Play, the benefits of debugging other people's code, how Ember is embracing the larger JavaScript ecosystem, and more.
Topics include:
0:00 – What's hard about programming, why schools are bad at teaching math, and more
10:47 – Why computers should empower ordinary people, and how we can close the gap that exists between the technologically skilled and unskilled
22:12 – How the experience level of the me...2019-04-171h 53
Frontend FirstDerrick Reimer on SPA architecture with Elm and GraphQLDerrick Reimer joins Sam and Ryan to chat about building his new real-time chat product Level as an SPA using Elm, Phoenix and GraphQL. He covers domain modeling in Phoenix, his experience building his first GraphQL API, type safety in Elm, and the data fetching patterns he's using to support his application's real-time functionality.
Topics include:
2:01 – What is Level? What tech stack are you using to build it?
14:34 – Building the GraphQL API with Phoenix and Absinthe
37:40 – Building the frontend with Elm
Links:
Derrick on Twitter
Level
The Phoenix framework
GraphQL
Absinthe, GraphQL for Elixir
The Elm...2019-04-101h 32
Frontend FirstDo you trust your test suite?Sam and Ryan continue their discussion from the end of Episode 54 about how much we actually rely on our test suites versus how much implicit trust we place in semver. They also talk about some new Ember Octane features as well as a data-fetching issue.
Topics include:
2:00 – Do we trust our test suites?
10:00 – Breaking APIs in a changelog vs. in code
20:27 – Modifiers – they're kinda like mixins
37:17 – Named blocks
38:29 – Ember Octane & EmberConf trainings
43:15 – Fetching user-specific data in EmberMap's Video Views series
Links:
Chris Garrett's post on Modifiers
Yehuda's Yieldable named blocks RFC
Our Real-world Animations training repo
O...2019-04-0457 min
Frontend FirstChris Garrett on Ember OctaneChris Garrett joins Sam and Ryan to chat about what's coming to Ember in Octane, its first edition. Chris talks about how module unification, decorators, ES6 classes, named args, angle-bracket components, template imports, modifiers, and Glimmer components offer a cohesive new programming model for Ember.js developers.
Topics include:
1:18 – De-scoping Module Unification from Octane
2:25 – Run-time APIs are coming to Octane, build-time APIs are being worked on
5:04 – What's the vision behind Ember Editions, and Octane in particular?
9:41 – What's the state of decorators?
15:43 – What can't you do with static decorators that you can with dynamic decorators?
19:18 – Why do we need decorato...2019-03-131h 05
Frontend FirstSPAs should do more than server-rendered apps, not lessTopics include:
0:00 - Module unification
1:20 - Component resolution
5:45 - Why we don't use angle brackets
9:35 - SPAs should do everything a server app can do
10:15 - Ember's Router
11:00 - Replicating the server's "fresh data" behavior
17:15 - Reloading stale data
23:50 - Fetching data
23:50 - Getting Mirage working with React and Vue
26:10 - Data loading components
29:41 - Knowing what queries are currently rendered
32:15 - Using cache keys to track what data is loaded
35:00 - Pushing data into the client with web sockets
39:00 - Describing Twitter's UI in queries
44:00 - When will data loading be...2019-03-0655 min
Frontend FirstYou still have to build two appsTopics include:
0:00 - Refreshing an Ember app when a new version is deployed
11:05 - When SPAs become too difficult
14:50 - Building an SPA never got as quick as we'd hoped
19:20 - You're now responsible for two applications
28:00 - Integration costs
32:00 - Architecture is easier within a single monolith
40:20 - Beginners should use the same tools as experts
40:50 - Rolling advanced solutions back into the framework
47:41 - Services that are used by both beginners and experts
52:32 - Can you start an SPA without making an API server decision?
Links:
Rails PR...2019-02-271h 01
Full Stack Radio107: Sam Selikoff - Pushing Complexity to the Client-SideTopics include:
Building an API without writing any controller code
Thinking of your API like a database as much as possible
Modeling everything on the server as a resource, including things like S3 upload signatures
Using tools like Firebase to avoid writing an API entirely
Sponsors:
Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective
Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free
Links:
EmberMap, Sam's Ember.js training site
JSON:API...2019-01-3050 min
Frontend FirstMirage, meet Addon Docs!Topics include:
01:17: Mirage's new Addon Docs site
35:55: Ember Bind Helper
45:23: Why start with Acceptance Tests?
Links:
EmberCLI Mirage
Ember Bind Helper
Sam Selikoff on Twitter
Ryan Toronto on Twitter
2019-01-301h 10
Frontend FirstThere's a bug in my FastBootTopics include:
0:00 Housekeeping: Upgrades, trainings, and nested dropdowns
12:24: FastBoot bug 1: How HTML responses turn into DOM nodes
37:22: FastBoot bug 2: XMLHTTPRequest and redirects
Links:
Sam Selikoff on Twitter
Ryan Toronto on Twitter
2019-01-231h 00
Frontend FirstThe forgotten middle classTopics include:
03:16: Incidental complexity in SPA development
33:04: Dealing with undocumented but relied-upon behavior in OSS libraries
Links:
Sam Selikoff on Twitter
Ryan Toronto on Twitter
2019-01-1654 min
Frontend FirstGrab bag: Web vs Native, stale data, and build environmentsTopics include:
0:00: Making movies
05:08: Ryan Florence's tweet about Twitter App
18:08: Ember Data stores across browsers
32:58: Laravel's ascending option
35:51: YouTube transition to UI pattern
42:15: Ember's build environments
Links:
Sam's Star Wars movie
Ryan Florence on Twitter's PWA
2019-01-0955 min
Frontend FirstThoughts on tracked propertiesSam and Ryan discuss the wording behind the proposed "@tracked" syntax and how it shapes their understanding of Ember's new programming model. They also talk about 404 pages, data ownership, and their upcoming EmberConf trainings.
Topics include:
0:00: Tracked properties
13:27: 404 pages
26:38: Smart components
41:00: EmberConf trainings
Links:
Ember Conf
Component Side Effects
EmberData Storefront
Ember Animation
Liquid Fire
2018-12-1956 min
Frontend FirstIncremental Ember upgradesSam and Ryan discuss a new process for upgrading Ember apps and Sam's experience using it on EmberMap's codebase. They also talk about leadership in Open Source projects and lessons learned from Mirage.
Topics include:
04:45: What is a leader's job?
13:17: Step-by-Step: Upgrading EmberMap
Links:
Most leaders don't even know the game they are in
ember-cli-update
Dependabot
2018-12-1258 min
Frontend FirstThe elephant in the roomSam and Ryan discuss the difficulty of working with a design system that doesn't have good escape hatches, how implementing HTML and CSS can be more complex and time-consuming than coding user behavior, and some creative approaches to ensuring JSON:API payloads represent canonical server-side state.
Topics include:
04:15: Design systems and when they break down
22:38: The complexity of implementing designs in HTML and CSS
34:38: JSON:API mutations. How incomplete response payloads can put your Ember app into an impossible state.
Links:
Forms
JSON API Spec
Conway’s Law
2018-12-051h 04
Frontend FirstGoing all in on "outside in"Sam and Ryan discuss getting Mirage and Ember to work in CodeSandbox, how FastBoot affects different approaches to rendering responsive content, and different ways an outside-in mindset can benefit product teams and open-source software projects.
Topics include:
2:50: Getting Ember and Mirage working on CodeSandbox. Coding in the browser.
10:30: How FastBoot affects the use of screen width services
24:40: Going all-in on outside-in development. Starting at the end.
Links:
CodeSandbox
Mirage boilerplate in CodeSandbox
EmberMap Email Course
Conway's Law
2018-11-2841 min
Frontend FirstA less constrained environmentSam and Ryan discuss new videos on async testing and declarative form validations. They also talk about why it's so hard to create good abstractions in Ember, or more generally the front-end landscape. They discuss constraints versus flexibility, and how the size of a library's problem space affects the likelihood of arriving at a good abstraction.
Topics include:
01:14: Lessons learned from the Async Testing series
06:20: Forms: declarative validations, building blocks & escape hatches
12:56: Why building forms in UI libraries is hard – unconstrained environments
30:45: Philosophical differences, and over- vs. under-abstracting
Links:
EmberMap's premium series on Async Tes...2018-11-2141 min
Frontend FirstRecursive partial applicationSam and Ryan discuss an elegant solution to the async nested dropdown problem, a FastBoot success story regarding inlined CSS, pre-warming FastBoot's cache, and implementing a new design alongside an existing design language.
Topics include:
01:11: Solving the nested dropdown by recursively currying an action
25:00: Inlined CSS and caching with FastBoot
40:22: Challenges implementing a new design in an existing design language
Links:
PurgeCSS
2018-11-141h 01
Frontend FirstCompose wiselySam and Ryan chat about the challenges of testing custom asynchronous code. They also talk about React's new Hooks API, and discuss situations where hooks might be more composable than yields and contextual components.
Topics include:
00:00 – Testing custom asynchronous code, like an animated bar chart
25:23 – React's new Hooks API
Links:
EmberMap Async testing series
API docs for Ember's testing helpers
Overview of React Hooks with Dan Abramov and Sophie Alpert
90% Cleaner React with Hooks – Ryan Florence
Sam Selikoff on Twitter
Ryan Toronto on Twitter
2018-11-0658 min
Frontend FirstA dropdown nestSam and Ryan talk about the challenges of building nested dropdowns, whether a component reading data from its children is an anti-pattern, how angle-bracket syntax encourages new components, and whether “CSS best practices” exist.
Topics include:
00:40 – Thinking through a nested drop-down navigation menu
35:15 – Building an component & angle-bracket syntax
45:00 – Layout UI primitives
46:35 – What are CSS best practices? How might Tailwind encourage these?
52:17 – "Semantic" classes. Should developers have to name every UI element, if designers don't?
2018-10-3055 min
Frontend FirstYour frontend is ready for productionSam and Ryan talk about their upcoming email course on Ember component patterns, wrapping up their EmberMap series on Functional CSS, refactoring some FastBoot code in Node, and how Mirage might be useful if it could run as a real server.
Topics include:
0:30 - Email course in Ember Component Design
8:00 - EmberMap course on Functional CSS with Ember
Do you have a preferred API for styled component variants? See Sam's tweet below.
14:00 - FastBoot, and refactoring and testing Node code
31:10 - Pushing Mirage to run as a non-production server
Links:
Using Functional CSS with...2018-10-1954 min
Frontend FirstScope down!Sam and Ryan talk about lessons from Jason Fried's Q&A about scoping down product features, and how that applies to our open-source work. They also talk about inlining critical-path CSS with FastBoot.
Topics include:
Inlining CSS with FastBoot (0:08)
Scoping down (14:26)
Jason Fried's Q&A at Laracon
Scoping down at work and in OSS
How to handle OSS contributors who add scope
How bugs indicate a larger-than-expected problem space
How to say no to new features you can't commit to supporting
Are there projects that can't be scoped down?
Using OSS checkpoints to avoid burnout
...2018-10-121h 01
Frontend FirstCan small libraries be conventional?Sam and Ryan chat about two new EmberMap series, Forms and Async testing, as well as Sam's keynote at EmberCamp and the best way to avoid product gaps in open-source software. They also answer some listener questions.
Topics include:
Forms (1:18)
Splitting forms into containers and presenters
Avoiding premature abstractions (7:03)
Which components do you carry from project to project?
Asynchronous testing (14:47)
Testing animations
Sam's keynote at EmberCamp on Product gaps (19:04)
Product gaps at companies vs. in OSS
Are small packages and convention over configuration at odds with each other?
Convention over configuration that decomposes well
The risk...2018-10-031h 05
Frontend FirstThe Product GapSam and Ryan continue their discussion about the role of product in an engineer's daily working life. They talk about what product gaps are, the symptoms of product gaps on tech teams, and what you can do about product gaps if you're on a team with no product manager.
Topics:
2:05 – All about product
More product responsibilities fall on engineers than ever before
Coders can help surface valuable info to business teams about the tradeoffs of their product decisions
Learning product makes coders better because it influences what they code, it increases their chance of building software tha...2018-09-271h 02
Frontend First80% done, 80% to goSam and Ryan talk about the cost of using engineering as discovery, the consequences of embedding product decisions throughout the design and development phases of a project, and other lessons that software engineers can learn from product developers. They also chat about how they categorize Github issues.
Topics:
0:00 – GitHub issue categorization
The importance of issue triage
Prioritizing bugs over features
Getting Things Done
7:53 – Managing product
7:53 - Engineering issues as a symptom of product/process issues
13:05 - The 3 phases of a software feature: product, design, engineering
16:04 - What happens when you embed product decisi...2018-09-1254 min
Frontend FirstEmber OctaneSam and Ryan talk about the Ember 2018 Roadmap RFC and its focus on improving communication, completing in-progress work, and shipping Ember Octane. They also talk about how to verify complex addon behavior by using full-blown test apps and addons.
Topics:
0:00 – Test apps
Using full apps and addons in a subdirectory of an addon to facilitate testing complicated scenarios
Avoiding implementation details of the build pipeline in testing
12:14 – Ember Octane
The Ember 2018 Roadmap RFC
The concept of Ember Editions & the first edition, Ember Octane
Discussing the areas of focus from the RFC: better commu...2018-08-2943 min
Frontend FirstI am a lighthouseSam and Ryan chat (on new mics!) about Ryan's recent video on declarative keyboard events, changes to EmberMap's FastBoot architecture, and some of Ryan's recent work on FastBoot testing.
Topics:
0:00 – Ryan's video on declarative keyboard events; other declarative components that haven't been discovered
9:52 – Our evolving FastBoot architecture; which parts can be generalized; a high Lighthouse score; a long uncanny valley
29:11 – Sam's Mirage work, fixing bugs, approaching 1.0; Mirage as a tool to show off work; question for listeners, how do you show your work to your team?
34:51 – Ryan's work on FastBoot testing; how Mirage could work with FastBoot...2018-08-151h 02
The Frontside Podcast037: Ember CLI Mirage with Sam SelikoffThis week, we talk with Sam Selikoff, the mastermind behind Ember CLI Mirage.
He shares how he got started with programming, some tips for avoiding burnout, why he created CLI Mirage, some tips for using it, why it's important to write great documentation, and more.
Show Links:
Sam Selikoff
Follow Sam on Twitter
Ember CLI Mirage
Pact (ruby)
Contract-driven Design by Martin Fowler
EmberMap
Practical Object Oriented Design in Ruby by Sandy Metz
2016-03-2450 min