React Round Up - Podcasts - <section class='relative'></section> <div class='max-w-6xl mx-auto px-4 sm:px-6'> <div class='pt-28 md:pt-32 md:pb-20'> <div class='text-center items-center'> <img class="mb-6 mx-auto" data-aos="zoom-y-out" data-aos-delay="150" src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZml0IjpbMzAwLDMwMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--f3b151d3ca262e5831817f8f49b60dc22c0caa9e/Artboard%201.png" /> <div class='max-w-3xl mx-auto'> <p class='text-2xl font-bold text-gray-700 mb-8' data-aos='zoom-y-out' data-aos-delay='300'>Learn the latest in React from top end developers</p> </div> <div class='flex flex-wrap justify-center space-x-4 space-y-4 mb-8'> <span class='text-lg pt-4 mt-1 pr-4'>Hosted by:</span> <a class="flex items-center space-x-2" data-aos="zoom-y-out" data-aos-delay="400" href="/authors/chris-frewin"><img class="w-8 h-8 rounded-full border" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTM2ODQsInB1ciI6ImJsb2JfaWQifX0=--2b33592291fdcc47403c214e3d1eb90a0432f8af/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOlszMCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--4999ccec80334605e2d9b81503c259a6c69a879a/chris.jpeg" /> <span class='text-xl font-medum mt-1'>Chris Frewin</span> <span class='text-gray-500 px-1'>•</span> </a><a class="flex items-center space-x-2" data-aos="zoom-y-out" data-aos-delay="400" href="/authors/lucas-paganini"><img class="w-8 h-8 rounded-full border" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTQyMDUsInB1ciI6ImJsb2JfaWQifX0=--d97bfde40c2681dd7e77c12b10f784c8a8cd2f0e/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOlszMCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--4999ccec80334605e2d9b81503c259a6c69a879a/lucas.jpeg" /> <span class='text-xl font-medum mt-1'>Lucas Paganini</span> <span class='text-gray-500 px-1'>•</span> </a><a class="flex items-center space-x-2" data-aos="zoom-y-out" data-aos-delay="400" href="/authors/peter-osah"><img class="w-8 h-8 rounded-full border" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6Mzc2NiwicHVyIjoiYmxvYl9pZCJ9fQ==--674481e6a6ddd23987ee75f003dc7b2f487db49c/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOlszMCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--4999ccec80334605e2d9b81503c259a6c69a879a/peter%20osah.jpeg" /> <span class='text-xl font-medum mt-1'>Peter Osah</span> </a></div> <div class='flex flex-wrap justify-center space-x-4 space-y-4'> <a class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded inline-flex items-center h-10 mt-4" href="https://www.spreaker.com/show/6102072/episodes/feed"><i class='fas fa-rss text-white mr-2'></i> RSS </a><a class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded inline-flex items-center h-10" href="https://open.spotify.com/show/3SV6RRWsJ1d6lDZDqREEdt"><i class='fab fa-spotify text-white mr-2'></i> Spotify </a><a class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded inline-flex items-center h-10" href="https://podcasts.apple.com/us/podcast/react-round-up/id1364741140"><i class='fab fa-apple text-white mr-2'></i> Apple Podcasts </a><a class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded inline-flex items-center h-10" href="https://www.youtube.com/playlist?list=PLJesql-aSfX6xaZcgQqmfIssYSaQVWXQF"><i class='fab fa-youtube text-white mr-2'></i> YouTube </a><a class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded inline-flex items-center h-10" href="https://music.amazon.com/podcasts/685f539c-e3cd-4c6a-bd25-82b5d95f6528/react-round-up"><i class='fab fa-amazon text-white mr-2'></i> Amazon Music </a></div> </div> </div> <h2 class='text-3xl md:text-4xl font-hkgrotesk font-extrabold mb-4 mt-16 md:mb-0 md:mt-12'>Episodes</h2>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/react-component-tests-for-humans-with-miroslav-nikolov-rru-282">React Component Tests for Humans with Miroslav Nikolov - RRU 282</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Jan 08, 2025 <span class='text-slate-300'>·</span> Episode 282 </div> <div class='text-sm text-slate-500'> On this episode of React Round Up we chatted with Miroslav Nikolov, a UI developer at one.com, about his approach to unit testing React components. Miroslav discussed writing components in a human-friendly way, using the library UnexpectedJS. We also talked about Miroslav’s blog, including how he got started with it, and some of the tools he used, like Gatsby and Mailchimp. This is a great episode if you’re looking to learn more about how to approach unit testing in React. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/react-component-tests-for-humans-with-miroslav-nikolov-rru-282"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/run-nextjs-and-node-in-the-browser-ft-eric-simons-rru-281">Run NextJS and Node in the Browser ft. Eric Simons - RRU 281</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Jan 01, 2025 <span class='text-slate-300'>·</span> Episode 281 </div> <div class='text-sm text-slate-500'> Eric Simons joins the round up to discuss the latest advancements made by StackBlitz that enables you to run NodeJS in the browser. Eric expands that to the work they've done with the NextJS team to run NextJS in the browser without the need to have a server in the background. Eric Simons joins the roundup to discuss the latest advancements made by StackBlitz that enables you to run NodeJS in the browser. Eric expands that to the work they've done with the NextJS team to run NextJS in the browser without the need to have a server in the background. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/run-nextjs-and-node-in-the-browser-ft-eric-simons-rru-281"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/all-things-voice-recognition-and-javascript-with-ian-lavery-rru-280">All Things Voice Recognition and JavaScript with Ian Lavery - RRU 280</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Dec 25, 2024 <span class='text-slate-300'>·</span> Episode 280 </div> <div class='text-sm text-slate-500'> Returning guest, Ian Lavery from Picovice.ai, joins the hosts to talk all things voice recognition. He dives into new languages the company has tackled over the last year (and what languages it plans to tackle next year), how they train their models, and how Picovoice is actually running speech recognition in the browser instead of in the cloud, making things like captioning live streams and real-time chats possible with some of its newer tech Cheetah and Leopard. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/all-things-voice-recognition-and-javascript-with-ian-lavery-rru-280"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/react-ecosystem-libraries-tools-and-third-party-integrations-rru-279">React Ecosystem: Libraries, Tools, and Third-Party Integrations - RRU 279</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Dec 18, 2024 <span class='text-slate-300'>·</span> Episode 279 </div> <div class='text-sm text-slate-500'> In today's episode, Lucas and Peter dive deep into the world of front-end frameworks with a captivating discussion featuring PRANTA Dutta, a seasoned React Native developer. Pranta shares his journey transitioning from Vue to React, highlighting both the challenges and advantages of React's manual configurations and rich third-party ecosystem. They explore the contrasts between frameworks like React, Angular, and Flutter, delving into the trade-offs between their built-in features and flexibility. From the complexities of using Flutter's custom canvas painting to the streamlined utilities for notifications and Firebase, we cover it all. They also tackle the ongoing debate of native versus hybrid mobile app development, with insights into the Kotlin Multiplatform project and the importance of choosing the right tools based on project needs. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/react-ecosystem-libraries-tools-and-third-party-integrations-rru-279"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/error-reporting-and-bug-monitoring-with-james-smith-rru-278">Error Reporting and Bug Monitoring with James Smith - RRU 278</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Dec 11, 2024 <span class='text-slate-300'>·</span> Episode 278 </div> <div class='text-sm text-slate-500'> In this episode of React Round Up we chatted with James Smith from Bugsnag. We talked about the importance of error monitoring and reporting, and how to actually implement those workflows in your production apps. James shared a number of tips for React developers, like what are the most common errors and how you can help prevent them (hint: linters help a lot). We also got into mobile, and what developers can do to protect against third-party SDK errors. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/error-reporting-and-bug-monitoring-with-james-smith-rru-278"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/how-to-structure-your-react-projects-rru-277">How to Structure Your React Projects - RRU 277</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Dec 04, 2024 <span class='text-slate-300'>·</span> Episode 277 </div> <div class='text-sm text-slate-500'> Akash Joshi Is a frequent blogger across many of the larger blogs across the internet. He joins the Round Up to share his opinions on how you should put your React applications together as well as some tips on where you shouldn't put files and where you should avoid putting specific types of files. Some of this is inspired by projects like Next.js and others by his own experience. Paige and TJ chime in with their experience to help provide more context to the conversation. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/how-to-structure-your-react-projects-rru-277"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/building-component-libraries-with-kathryn-grayson-nanz-rru-276">Building Component Libraries with Kathryn Grayson Nanz - RRU 276</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Nov 27, 2024 <span class='text-slate-300'>·</span> Episode 276 </div> <div class='text-sm text-slate-500'> Senior Frontend Engineer Kathryn Grayson Nanz joins the React Round Up team to talk about all things component libraries. Kathryn shares her experiences building not one but two component libraries, as well as tips and tricks on the benefits of shared libraries, how to get buy in from product and developer teams, the best way to set up libraries and keeping them up-to-date. She also shares pitfalls to try and avoid when getting started with building a new library. Definitely a good listen for anyone debating whether an existing library or a brand new, custom one is the way to go for a project. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/building-component-libraries-with-kathryn-grayson-nanz-rru-276"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/building-a-chatbot-or-voicebot-with-dialogflow-in-react-ft-victory-nwani-rru-275">Building a Chatbot or Voicebot with Dialogflow in React ft. Victory Nwani - RRU 275</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Nov 20, 2024 <span class='text-slate-300'>·</span> Episode 275 </div> <div class='text-sm text-slate-500'> Victory Dumebi Nwani joins the round up to discuss integrating the Dialogflow from Google Cloud into your application to manage voice and chat capabilities for your application. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/building-a-chatbot-or-voicebot-with-dialogflow-in-react-ft-victory-nwani-rru-275"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/transitioning-a-react-codebase-from-jsx-to-typescript-ft-priscila-oliveira-and-mark-story-rru-274">Transitioning a React Codebase from JSX to TypeScript ft. Priscila Oliveira and Mark Story - RRU 274</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Nov 14, 2024 <span class='text-slate-300'>·</span> Episode 274 </div> <div class='text-sm text-slate-500'> Priscila Oliveira and Mark Story join the panel to discuss the recent transition at Sentry from vanilla JavaScript to React and TypeScript. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/transitioning-a-react-codebase-from-jsx-to-typescript-ft-priscila-oliveira-and-mark-story-rru-274"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/web-workers-multi-threaded-javascript-with-majid-hajian-rru-273">Web Workers & Multi-threaded JavaScript with Majid Hajian - RRU 273</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Nov 06, 2024 <span class='text-slate-300'>·</span> Episode 273 </div> <div class='text-sm text-slate-500'> Despite JavaScript being a single-threaded language, you can now leverage multi-threaded computing thanks to modern browser features such as web workers, workouts and service workers. In this show, Majid explains how these features work and what problems they solve. We also discuss the strategies you can use to introduce them to production codebases and give your users a much more enjoyable experience on your web app. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/web-workers-multi-threaded-javascript-with-majid-hajian-rru-273"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/creating-gatsby-source-plugins-with-dillion-megida-rru-272">Creating Gatsby Source Plugins with Dillion Megida - RRU 272</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Oct 30, 2024 <span class='text-slate-300'>·</span> Episode 272 </div> <div class='text-sm text-slate-500'> In today’s episode of React Round Up, Nigerian-based developer Dillion Megida explains how you can create source plugins for Gatsby, the static site generation tool. Gatsby can be used to create landing pages, blogs and e-commerce sites, among other things, and it contains a vast plugin ecosystem that helps developers avoid reinventing the wheel when creating their applications. Dillion also shares his experience blogging for websites such as LogRocket, FreeCodecamp and Dev.to and talks us through his workflow and how he comes up with new article ideas. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/creating-gatsby-source-plugins-with-dillion-megida-rru-272"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/mastering-event-sourcing-with-redux-and-back-end-insights-rru-271">Mastering Event Sourcing with Redux and Back-End Insights - RRU 271</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Oct 24, 2024 <span class='text-slate-300'>·</span> Episode 271 </div> <div class='text-sm text-slate-500'> In this episode, they dive deep into the world of event sourcing with special guest, Luis Galeas, CEO and founder of Ambar. Lucas Paganini, along with Chris and Peter explore the intricacies of event sourcing, comparing front-end implementations using Redux and back-end approaches, and highlighting the benefits, drawbacks, and practical applications. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/mastering-event-sourcing-with-redux-and-back-end-insights-rru-271"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/is-working-at-a-large-or-small-company-better-for-your-career-rru-270">Is Working at a Large or Small Company Better for Your Career? - RRU 270</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Oct 16, 2024 <span class='text-slate-300'>·</span> Episode 270 </div> <div class='text-sm text-slate-500'> This week the panelists dive into their work backgrounds and discuss the ins and outs of working at small and large companies. They aim specifically at whether one is better than the other for building a career. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/is-working-at-a-large-or-small-company-better-for-your-career-rru-270"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/react-hook-form-with-vijit-ail-rru-269">React Hook Form with Vijit Ail - RRU 269</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Oct 09, 2024 <span class='text-slate-300'>·</span> Episode 269 </div> <div class='text-sm text-slate-500'> React Hook Form is a terrific way to manage state in, from, and through, your forms in React. Since React itself doesn't give you much to manage forms, React Hook Form steps into the gap to help you manage your forms and provide features and functionality to your forms. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/react-hook-form-with-vijit-ail-rru-269"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div>  <div class='sm:flex items-center p-5 border-b border-slate-100 justify-between'> <div class='flex items-start mb-4 sm:mb-0'> <img class="shrink-0 rounded ml-5 sm:ml-0 sm:mr-5 order-1 sm:order-none" alt="Podcast 01" height="88" width="88" src="https://topenddevs.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTExMjUsInB1ciI6ImJsb2JfaWQifX0=--ed5c350be17fc8c34ca08c960fd597a44620bfab/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6Wzg4LDg4XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7a7e59dcd2d711c8e571032d65c266a9e220b78f/Artboard%201.png" /> <div> <h3 class='font-hkgrotesk font-extrabold text-lg mb-1'> <a class="text-slate-800 hover:text-blue-500 transition duration-150 ease-in-out" href="/podcasts/react-round-up/episodes/clean-code-with-tyler-hawkins-rru-268">Clean Code with Tyler Hawkins - RRU 268</a> </h3> <div class='font-hkgrotesk font-medium text-sm text-slate-500 mb-1'> Oct 02, 2024 <span class='text-slate-300'>·</span> Episode 268 </div> <div class='text-sm text-slate-500'> In today’s show, frontend engineer Tyler Hawkins shares his tips on how you can write clean, maintainable and readable code. Using the examples from his article on the same subject, he explains the importance of using clean code principles to make it easier for different developers to collaborate on a codebase. Tyler also discusses how you can better structure your tests and have more confidence in how they are written. </div> </div> </div> <div class='shrink-0 sm:ml-5'> <a aria-label="play" href="/podcasts/react-round-up/episodes/clean-code-with-tyler-hawkins-rru-268"><i class='text-6xl text-blue-500 fa-solid fa-circle-play'></i> </a></div> </div> <nav class='flex items-center justify-between border-t border-gray-200 px-4 sm:px-0 mt-6'> <div class='-mt-px flex w-0 flex-1'> <a rel="next" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" href="/podcasts/react-round-up"><svg aria-hidden='true' class='mr-3 h-5 w-5 text-gray-400' fill='currentColor' viewbox='0 0 20 20'> <path clip-rule='evenodd' d='M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z' fill-rule='evenodd'></path> </svg> Previous </a></div> <div class='hidden md:-mt-px md:flex'> <span class='inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600'>1</span> <a rel="next" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" href="/podcasts/react-round-up?page=2">2</a> <a class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" href="/podcasts/react-round-up?page=3">3</a> <a class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" href="/podcasts/react-round-up?page=4">4</a> <a class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" href="/podcasts/react-round-up?page=5">5</a> <span class='inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700'>...</span> </div> <div class='-mt-px flex w-0 flex-1 justify-end'> <a rel="next" class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" href="/podcasts/react-round-up?page=2">Next <svg aria-hidden='true' class='ml-3 h-5 w-5 text-gray-400' fill='currentColor' viewbox='0 0 20 20'> <path clip-rule='evenodd' d='M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z' fill-rule='evenodd'></path> </svg> </a></div> </nav> </div>

Latest Episode: React Component Tests for Humans with Miroslav Nikolov - RRU 282

0:00

39:08

Playback Speed: