React Round Up

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.Linkswebup.org/blog | Miroslav NikolovUnexpectedJSReact Component Tests for Humans | CSS-TricksmailchimpSubstackPicksMiroslav- erikras.comMiroslav- Application State Management with ReactPaige- Tom Clancy's | Jack RyanTJ- DREAM SPORT Bike Computer Bicycle Speedometer and Odometer 16-Function Wired Bike Computer WaterproofBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.LinksIntroducing WebContainers: Run Node.js natively in your browserStackBlitzStackBlitzEricSimons – StackBlitzTwitter: Eric Simons ( @ericsimons40 )PicksEric- ViteJack- WestworldPaige- Elgato Wave:3TJ- Podcast from The VergeBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.He also shares how he wrote a simple podcast transcription app using Picovoice and Express.js, in addition to Picovoice boasting specific SDKs for React, Angular and Vue.Listen to Ian's first appearance on RRU here where he and the panel went deep into the specifics of voice recognition like security and privacy, understanding it in general, and using it sans big cloud providers.Sponsors"Waldo, who helps with Android testing"Chuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksLinkedIn: Ian LaveryIan Lavery - MediumTwitter: @AiPicovoicePicksIan - Mixpanel: Product Analytics for Mobile, Web, & MorePaige - Star Trek: Lower Decks - WikipediaTJ - The Great British Bakeoff seriesBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.Join them as they unravel the intricacies of React's success and shortcomings, discuss the merits of design patterns in both Flutter and React, and examine the responsibilities developers hold in shaping their applications. Stay tuned for a valuable conversation packed with industry insights and practical examples!LinksWhy React Won the Front-End RaceSocialsLinkedIn: PRANTA DuttaBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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. Picks TJ - https://www.amazon.com/What-Doesnt-Kill-Environmental-Conditioning James - Fall GuysBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.LinksLearn Structuring React Projects with a Dogs App [⚛ + 🐶]A Better Way to Structure React ProjectsImproving my OSS library and taking steps towards improving my YT qualityAkash JoshiThe Writing Dev Akash Joshi - thewritingdev - YouTubeTwitter: Akash ( @thewritingdev )PicksAkash- Lapel MicrophonePaige- Harney & Sons Earl Grey Loose Leaf TeaTJ- Kombucha TeaBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.LinksUI audit background from Brad FrostStorybookBubbleUphttp://kgrayson.com/PicksTJ - StravaPaige - Tresanti Standing DeskKathryn - NotionKathryn - RocketbookBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.Victory dives into the stack he used to put together a functioning app using that offering from Google.LinksIntegrating A Dialogflow Agent Into A React ApplicationDialogflow DocumentationA brief introduction to Chatbots with DialogflowDialogflow pricingLinkedIn: Victory NwaniGitHub: Nwani Victory ( vickywane )Twitter: Iamnwani ( @iamnwani01 )PicksJack- Resident Evil VillagePaige- Mario KartTJ- Toto BidetVictory- AWS CodeDeployBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Priscila Oliveira and Mark Story join the panel to discuss the recent transition at Sentry from vanilla JavaScript to React and TypeScript.The show starts out with the panelists nerding out over Sentry and how they use it, then they dive into the code transition and the things that they learned from their conversion to TypeScript.LinksSlow and Steady: Converting Sentry’s Entire Frontend to TypeScriptTwitter: Sentry ( @getsentry )Twitter: Mark Story ( @mark_story )Twitter: Priscila Oliveira ( @priscilawebdev )PicksJack- Power of saying "No"Mark- GitHub | neovim/nvim-lspconfigMark- GitHub | glepnir/lspsaga.nvimPriscila - GitHub | clauderic/dnd-kitTJ- DivvyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.LinksComlink makes WebWorkers enjoyableWorkboxFigmaThe AssemblyScript BookHoudini: Demystifying CSSPicksMajid - Follow Majid on Twitter > @mhadailyMajid - Deep Work - Cal NewportCarl - Off the Main Thread | The Web Platform PodcastCharles  - Natural Goat Milk Soaps for Healthy Skin — Goat Milk StuffCharles  - ‎Flip Timer & stopwatch on the App StoreCharles - Desktop tripodPaige - DJI Phantom 4 DronePaige - Ozark show on NetflixTJ - Goat-2-Meeting — Sweet FarmBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.LinksHow to Build a Gatsby Source Plugin, using Hashnode as an examplePaige NiedringhausGatsby Plugin LibraryTheWebFor5Web sharing APIA deep dive into queues in Node.jsgatsby-source-mediumHashnodeTwitter: Dillion Megida ( @iamdillion )Dillion Megida - Frontend Engineer and Technical WriterPicksCarl- BBQ tips Carl- JAMstacked newsletter Dillion- CypressPaige- Battery Chargers - OptiMateTJ- RemotionTJ- Remotion demoBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.Luis shares his expertise on event sourcing, discussing how events act as the primary source of truth and the importance of understanding system boundaries for scalability. The conversation covers essential tools, frameworks, and strategies to effectively implement event sourcing in both your development processes and organizational strategies.Whether you're new to event sourcing or looking to deepen your understanding, this episode offers invaluable insights and practical advice to help you navigate this complex but rewarding architecture. Tune in to learn more about how event sourcing can transform your approach to managing application changes, ensuring scalability, auditability, and minimizing regressions. Don't miss out on this opportunity to hear from experts in the field and discover how to leverage event sourcing for your next big project!SocialsLinkedIn: Luis P Galeas Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.PicksJack- Virtual CoffeePaige- Raspberry Pi Beginner's Guide 4th EditionTJ- RocketBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.Our guest, Vijit Ail worked through several of the options out there for managing states and walks the panel through his decision to use React Hook Form.LinksReact Hook FormRedux FormFormikBundlePhobiaTypeORMNestJSPicksJack- Nx: Smart, Extensible Build FrameworkTJ- Super Mario 3D WorldVijit- Microservices with Node JS and React | UdemyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

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.LinksReact Clean CodeUse ternaries rather than && in JSXGitHub | getify/You-Dont-Know-JSClean Code With Unit TestsTyler Hawkins - Web PortfolioTyler Hawkins - MediumGitHub: Tyler Hawkins ( thawkin3 )LinkedIn: Tyler HawkinsTwitter: Tyler Hawkins ( @thawkin3 )PicksCarl- Time away from the screensJack- GitHub | pmndrs/jotaiTyler- Being Wrong: Adventures in the Margin of Error by Kathryn SchulzBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

In this episode, Lucas, Chris, and Peter are joined by Colby Fayock, the Director of Developer Experience Engineering at Cloudinary and a content creator.Join them as they dive deep into the world of AI-powered WYSIWYG editors for React. They explore the practicality of running AI models locally versus on remote servers, discover Google's innovative browser-based AI models in Chrome, and discuss the versatility and editor compatibility with formats like JSON and Markdown. They also touch on integrating AI functionalities securely using serverless functions and backend APIs, ensuring solid security without exposing sensitive API keys.Colby shares his experience with using storage formats like HTML and JSON in richer content editors, the flexibility of customizing styles and commands, and the potential applications outside of just being a Notion alternative. They also delve into UX trends toward integrated editing experiences and the practical challenges it may present.Towards the end, Colby talks about his upcoming full stack Next.js 15 course featuring authentication, database management, and payment options. This episode is packed with valuable insights for developers aiming to enhance their front-end capabilities and integration of AI functions. Stay tuned as we unravel the future of rich-text editing and AI in modern web development.Social MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Colby FayockLinkedIn @colbyfayock https://www.linkedin.com/in/colbyfayock/Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Chris Laughlin joins the round up to discuss how to use the WebKit Speech Recognition API to interact with your react applications. This opens up a wide range of capabilities for web and React applications.LinksAdding Voice Search to a React ApplicationUsing the Web Speech APIGitHub | streamich/react-useRecutDescriptSvelteNetlifyGithub Co-pilotGitHub: Chris Laughlin ( chrislaughlin )PicksCarl- Subscribing to different newslettersChris- Script Kit by John LindquistJack- GitHub | solidjs/solidPaige- Logitech Wireless MX KeyboardTJ- Manfrotto Magic ArmBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

In today's episode, they dive deep into the intricacies of creating a seamless image zoom functionality with our special guest, Robert Pierce, a seasoned software engineer with 13 years of experience and the mastermind behind the popular React Medium Image Zoom library.They tackle the challenges of zooming in on images while maintaining quality, elaborate on accessibility concerns, and discuss the technical hurdles, including those pesky Safari issues. They also explore the efforts to make clickable content accessible to all users, converting images into modal elements, and the journey from version 4 to version 5 of the library.Robert shares his experiences with maintaining this open-source project, the community's role, and his attempts to create a monorepo supporting various frameworks. We touch on the complexities of scaling, customizing dialog elements, and the potential future developments for the project.Join them as they discuss the blend of native functionalities, accessibility, and the pursuit of a perfect user experience. Whether you're a developer interested in modern technologies, web component integration, or just curious about the behind-the-scenes of an open-source project, this episode has something for you. Let's zoom into the details!Linksreact-medium-image-zoomSocial MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Robert PearceLinkedIn: @RobertPearce https://github.com/rpearceBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

In this episode, they dive deep into the intricacies of deploying server-side rendering applications using Next.js on AWS. Join them as  Brandon Bayer, the CEO of Flightcontrol shares insightful experiences on overcoming production challenges with FlightControl.Discover why FlightControl's infrastructure, cost-saving capabilities, and new build system—including Lambda support—are game changers for developers. They talk about updates and exciting projects from Lucas and Chris, explore the seamless deployment to AWS with FlightControl, and compare its strengths against platforms like Heroku and Vercel.Get ready for a captivating discussion on hybrid clouds, vendor lock-ins, the ease of using AWS services through FlightControl, and the potential for supporting other cloud providers. Plus, Brandon's passion for flying small planes brings a fascinating real-world perspective to the intricacies of sky-high ambitions versus ground-level developments. Tune in for an episode packed with practical insights, expert opinions, and the latest in cloud deployment technology.LinksFlight ControlSocial MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Brandon BayerLinkedIn: @BrandonBayer https://www.linkedin.com/in/brandonbayer1/Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

In today's episode, our host Lucas Paganini sits down with special guest Paul Bratslavsky, a seasoned software engineer at Strapi, to explore the powerful synergy between Strapi, a versatile JavaScript-based headless CMS, and the cutting-edge features of Next.js. Dive into the rapid development capabilities these technologies offer, streamlining workflows, and quickly delivering products to clients.They also delve into the convenience of Strapi Cloud for effortless app deployment and discuss varying perspectives on its pricing. Tune in to hear about the benefits of Remix, the evolving job market post-pandemic, and invaluable career advice for aspiring developers. This episode is packed with practical insights, personal anecdotes, and expert tips that you won't want to miss. Plus, get a sneak peek into upcoming soccer games and learn about Unvoid’s client-friendly approach to software development. Join them for a well-rounded discussion on all things tech, career, and beyond!SocialsGitHub: @PaulBratslavskyTwitter: @codingthirtyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.