
React Round Up
310 episodes — Page 5 of 7

RRU 108: Web Workers & Multi-threaded JavaScript with Majid Hajian
JavaScript Remote Conf 2020May 13th to 15th - register now! 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. Panel Paige NiedringhausCarl MungaziCharles Max WoodTJ VanToll Guest Majid Hajian Sponsors G2i | Enjoy the luxuries of freelancing "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! Links Comlink makes WebWorkers enjoyableWorkboxFigmaThe AssemblyScript BookHoudini: Demystifying CSS Picks Majid Hajian: Follow Majid on Twitter > @mhadailyDeep Work - Cal Newport Carl Mungazi: Off the Main Thread | The Web Platform Podcast Charles Max Wood: Natural Goat Milk Soaps for Healthy Skin — Goat Milk StuffFlip Timer & stopwatch on the App StoreDesktop tripodDevchat.tv Remote meetupsDevchat.tv Remote Conferences Paige Niedringhaus: DJI Phantom 4 DroneOzark show on Netflix TJ VanToll: Goat-2-Meeting — Sweet Farm Follow React Round Up on Twitter > @reactroundupSpecial Guest: Majid Hajian. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 107: Remote Work with Vladimir Novick
JavaScript Remote Conf 2020May 13th to 15th - register now! Vladimir Novick is a work from home veteran. He talks through the situation with COVID-19, having kids at home, and working from home. The rest of the panel chimes in and discusses their experience—some short and some long—working from home. Panel Charles Max WoodPaige NiedringhausTJ VanToll Guest Vladimir Novick Sponsors G2i | Enjoy the luxuries of freelancing "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! Links Enabling breakout rooms – Zoom Help Center Picks Vladimir Novick: Follow Vladimir on Twitter > @VladimirNovick, Twitch, WebsiteEvent LoopKrisp | Noise Cancelling AppKeyboard MaestroStream DeckNotion Charles Max Wood: ASUS 15.6" Full HD 1920x1080 IPS USB Portable MonitorThe Chronicles of Narnia Adult Box Set Audiobookm Paige Niedringhaus: ShiftIt for MacTiger King on Netflix TJ VanToll: Twitch Follow React Round Up on Twitter > @reactroundupSpecial Guest: Vladimir Novick. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 106: React Socks for Easy Responsive Design with Paige Niedringhaus
JavaScript Remote Conf 2020May 13th to 15th - register now! Paige Niedringhaus talks about the ever increasing need for developers and designers to be thinking about responsive web design as they build apps in today's world; a quick recap of a conference talk she gave at Connect.Tech, called 'Responsive Design featuring ReactJS'. Then, she talks about two possible solutions for making responsive web apps: CSS media queries and a new, React-specific NPM package called React Socks. Both options have their benefits and drawbacks (and can be used together too!), but getting started with either is relatively simple. Considering how many different ways users could be accessing our websites today and how important a good user experience is regardless of device size, responsive design is definitely worth investigating and incorporating into you own development going forward. Panel Charles Max Wood Guest Paige Niedringhaus Sponsors G2i | Enjoy the luxuries of freelancing ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links React Socks and Responsive Web Design With React - Better Programming - Mediumreact-socks npm notesLive site example Picks Paige Niedringhaus: Follow Paige on Twitter > @pniedri, Github, MediumGoliath TV SeriesApple AirPods Pro Charles Max Wood: Devchat.tv Remote MeetupsDevchat.tv Remote ConferencesReact Native Remote ConferenceRich Dad's CASHFLOW Quadrant Follow React Round Up on Twitter > @reactroundupSpecial Guest: Paige Niedringhaus. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 105: ReasonML and the Reason Association with Patrick Stapfer
JavaScript Remote Conf 2020May 14th to 15th - register now! Patrick Stapfer from the Reason Association joins Charles Max Wood to talk about ReasonML, functional programming, and how it fits into the React ecosystem. ReasonML is a language built and maintained by Facebook and transpiled to JavaScript using the BuckleScript project. Patrick explains when to use Reason, how to get started, and the basics of using Reason. Panel Charles Max Wood Guest Patrick Stapfer Sponsors G2i | Enjoy the luxuries of freelancing ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links https://reasonml.orgReasonML PlaygroundGitHub - davidkpiano/xstate: State machines and statecharts for the modern web.Flow: A Static Type Checker for JavaScript Picks Patrick Stapfer: Follow Patrick on Twitter > @ryyppyMindset: The New Psychology of Success: Dweck, Carol S.: 9780345472328: Amazon.com: Books Charles Max Wood: Star Trek: The Next GenerationDevchat.tv Remote meetupsDevchat.tv ConferencesJavaScript Remote Conf 2020 Follow React Round Up on Twitter > @reactroundupSpecial Guest: Patrick Stapfer. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 104: How to Start a Side Hustle as a Programmer with Mani Vaya
Get Mani's 10x Entrepreneurship Bundle of Book Summaries! Use the coupon code HUSTLE. Mani Vaya joins Charles Max Wood to talk about how developers can add the entrepreneur hat to the others they wear by starting a side gig. They discuss various ideas around entrepreneurship, the books they got them from, and how they've applied them in their own businesses. Panel: Charles Max Wood Guest: Mani Vaya Sponsors: G2i | Enjoy the luxuries of freelancing ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Picks: Mani Vaya: Good to GreatThe Lean Startup Charles Max Wood: Expert SecretsThe Masked Singer Follow React Round Up on Twitter > @reactroundupSpecial Guest: Mani Vaya. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 103: Do the Work
Charles Max Wood monologues about how to get what you want and making a plan. The main focus of his discussion is about sticking it out through the boring or lonely parts and continuing to work for the career and life you’re looking for. Panel Charles Max Wood Sponsors Springboard | Click here NOW for $500 off the course ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Picks JS Remote ConfExpert SecretsChronicles of Narnia Follow React Round Up on Twitter > @reactroundupAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 102: UI Components-Open Source vs. Paid with TJ VanToll
TJ VanToll hops on the Round Up to discuss when and where it makes sense to use open source UI components versus paying for them. The tradeoffs wind up being more subtle than you think. We dive into team make-up, pros and cons, and the approaches to making the right decision on which library to pick up. Panel: Thomas AylottCharles Max Wood Guest: TJ VanToll Sponsors: Springboard | Click here NOW for $500 off the courseG2i | Enjoy the luxuries of freelancing ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links: Reach UI Picks: TJ VanToll: Follow TJ on Twitter @tjvantoll, Github, BlogStranger ThingsHow Did This Get Made Thomas Aylott: OPT 9 Coin System exploration toyObjective Personality | Objective Personality Systems Charles Max Wood: The ExpanseThe Man In the High Castle Follow React Round Up on Twitter > @reactroundup Special Guest: TJ VanToll. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 101: Military Veterans, How to Learn, and With You With Me with Travis Ralph
Travis Ralph works with With You With Me to help veterans transition from military service to IT jobs. He discusses the process of making the move from military service to software development, why they use React as part of their curriculum, and how to learn new skills. Panel: Thomas AylottCarl MungaziCharles Max Wood Guest: Travis Ralph Sponsors: Springboard | Click here NOW for $500 off the course ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links: RRU 095: Designing Your LifeAmplify.io React & React Native DocsOffensive Security Certified Professional Picks: Thomas Aylott: Watchtower Online Library Carl Mungazi: React Libraries in 2020 - RWieruchLoupeTeach Yourself Computer Science Charles Max Wood: New Devchat.tv Podcast - Clean CodersInterview Cake (Affiliate link)Hero Wars Mobile Game Travis Ralph: Follow Travis on Twitter - @Wreckittr, LinkedInWith You With MeAmplify Web App WorkshopLearn to Code for Free – GrasshopperSpecial Guest: Travis Ralph. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 100: 100 Round Ups and more!
Chuck and Thomas get together to discuss their favorite parts of the React Round Up. They talk about origins, favorite episodes, and the history of React. Panel Charles Max Wood Thomas Aylott Sponsors Springboard | Promo code "JABBER" gives $500 off the job-guaranteed CourseG2i ________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Picks Thomas Aylott: Principles for Success by Ray DalioPandemic Charles Max Wood: Ready, Fire, Aim by Michael MastersonLegendary: A Marvel Deck Building GameAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 099: Scale: In a React Code Base with Tejas Kumar
Tejas, Thomas, and Chuck talk about what Design Systems are, how they're used, and what goes into building them. The compare them to some UI libraries that don't quite meet the mark and talk about how they fit into the development ecosystem and people's career paths. Panelist Charles Max Wood Thomas Aylott Guest Tejas Kumar Sponsors G2i ____________________________________________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________________________________________ Links Scalable Design Systems with TypeScript Tejas Kumar TalkMonaco EditorOperational UIKent Dodds - Introducing Downshift for ReactReach UI Picks Charles Max Wood HasuraThe Name of the WindClean Coders Podcast Thomas Aylott The Checklist Manifesto Tejas Kumar Follow Tejas on Twitterhttps://github.com/TejasQhttps://tej.asnext.jsBeautiful Letdown by SwitchfootPower Mentoring book by Susan MurphySpecial Guest: Tejas Kumar. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 098: Accessibility Made Easy with Brittany Feenstra
Brittany is a software engineer for Formidable Labs. She’s a team lead for some client work and likes to poke around in their open-source stuff in her free time. Last year she gave a talk at ReactConf called ‘Accessibility is a Marathon, Not a Sprint’. She talks about her background and how she came to specialize in accessibility. Brittany believes there are a lot of small things you can do to make your website more accessible, and that following best practices in accessibility makes the website easier to navigate for the able-bodied as well. She emphasizes that having accessibility in mind from the get-go will make your website more organized overall and that making things more accessible is as easy as starting with semantic HTML. Brittany and Charles discuss the moral responsibility for businesses to make their website accessible and whose responsibility it is to enforce accessibility. Brittany feels that accessibility really isn’t that hard, but people just don’t know what it looks like or where to get started. Brittany shares some methods to improve accessibility that take very little extra effort. One of the best things you can do is use semantic HTML. To learn things like what is a header, footer, article tag, etc. is, she advises listeners to consult the documents. She talks about the importance of a good pull request and even enlisting coworkers to help you to remember to use these accessibility-friendly methods. Charles and Brittany talk about using heading outline extensions to help you see what content is getting scraped off your site. Once semantic HTML is in place, they suggest testing to see if your site works with accessibility tools like screen readers, or if you can navigate with just a keyboard. They talk about different extensions that mimic visual impairments to ensure your pages are readable. The show concludes with Brittany talking about how this all ties into React. Panelist Charles Max Wood Guest Brittany Feenstra Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! Sentry | Use the code “devchat” for $100 credit ____________________________ > "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links Formidable LabsAccessibility is a Marathon, not a SprintDeaf man sues Pornhub over lack of captionsHTML elements referenceEslint-plugin-jsx-a11y-npmheadingsMap for Chrome headingsMap for FirefoxMarcy SuttonnoCoffeeColor contrast analyzerWriting Automated Tests for AccessibilityLighthouseAxe by DequeJSJ 344: Inclusive Components with Heydon Pickering Picks Brittany Feenstra Follow Brittany on TwitterInclusive Components by Hendon PickeringBecoming by Michelle Obama Charles Max Wood The Name of the Wind Group coaching course for finding jobs and staying current devchat.tv/workshopsSpecial Guest: Brittany Feenstra. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 097: State Management and React Component Design with Becca Bailey
Guest Becca Bailey gave a talk at ReactConf in 2019 called The State of React State in 2019 and will be giving another talk at an upcoming conference. She gives a summary of her ReactConf talk, which was inspired by her experiences she has had as a developer. In her talk, she talks about different tools and testing for state management. She and the panelists discuss how to recommend changing tools to a team instead of individuals. She shares some experiences from her job. They discuss ways to keep a work culture from turning toxic and how to start the conversation about state management. The React experts talk about strategies when you chose something for a project that ends up being the wrong decision, and prevent poor decisions like that in the future. It’s important to strike a balance between preparing for the future and anticipating it. Becca and the panel discuss alternatives to using Redux for state management, and some of the advantages of using it. They discuss how to decide what is put into local versus global state and how to know when you can depreciate shared state. Becca has helped teams decide what conventions they will use moving forward for managing local and global state, which gives you a standard for code reviews that reduces decision fatigue. They discuss common use cases for refactoring. Put simply, refactoring becomes necessary when it becomes hard to make simple changes. Becca also talks about being intentional about managing team culture and ways to prevent problems from arising in the future. Panelists Thomas Aylott Dave Cooper Charles Max Wood Guest Becca Bailey Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! G2i ____________________________ > "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links Becca’s ReactConf TalkFormidableReduxReact ContextAngularDojo.ioPrettier Picks Thomas Aylott Roam Research Charles Max Wood Bose Soundlink Headphones Dave Cooper Styled componentsGatsby Becca Bailey VictoryBrotopiaSpecial Guest: Becca Bailey. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 096: React Round Up at RxJS Live
In this episode of React Native Radio Charles Max Wood continues interviewing speakers at RxJS Live. First, he interviews Mike Ryan and Sam Julien. They gave a talk about Groupby, a little known operator. They overview the common problems other mapping operators have and how Groupby addresses these problems. The discuss with Charles where these types of operators are most commonly used and use an analogy to explain the different mapping operators. Next, Charles talks to Tracy Lee. Her talk defines and explains the top twenty operators people should use. In her talk, she shows real-world use cases and warns against gotchas. Tracy and Charles explain that you don’t need to know all 60 operators, most people only need about 5-10 to function. She advises people to know the difference between the different types of operators. Tracy ends her interview by explaining her desire to inspire women and people of minority groups. She and Charles share their passion for diversity and giving everyone the chance to do what they love. Dean Radcliffe speaks with Charles next and discusses his talk about making React Forms reactive. They discuss binding observables in React and how Dean used this in his business. He shares how he got inspired for this talk and how he uses RxJS in his everyday work. The final interview is with Joe Eames, CEO of Thinkster. Joe spoke about error handling. He explains how he struggled with this as did many others so he did a deep dive to find answers to share. In his talk, he covers what error handling is and what it is used for. Joe outlines where most people get lost when it comes to error handling. He also shares the three strategies used in error handling, Retry, Catch and Rethrow and, Catch and Replace. Charles shares his admiration for the Thinkster teaching approach. Joe explains what Thinkster is about and what makes them special. He also talks about The DevEd podcast. Panelists Charles Max Wood Guests Mike Ryan Sam Julien Tracy Lee Dean Radcliffe Joe Eames Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! CacheFly ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links https://www.rxjs.live/RxJS Live Youtube Channelhttps://twitter.com/mikeryandevhttps://twitter.com/samjulienhttps://twitter.com/ladyleet?https://www.npmjs.com/package/rx-helperhttps://twitter.com/deaniusolhttps://twitter.com/josepheameshttps://devchat.tv/dev-ed/https://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupSpecial Guests: Dean Radcliffe, Joe Eames, Mike Ryan , Sam Julien, and Tracy Lee. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 095: Designing Your Life
In this episode of React Round Up Charles Max Wood hosts a solo podcast sharing his perspective on designing your perfect life. In this episode he addresses finding your dream job, building your dream life, and staying current. Start by deciding where you want to end up. Do you see yourself retiring? Working forever? Charles shares his vision for his future and discusses the retirements of others in his life. Working back from the end of your life, Charles has you ask yourself what kind of life and career you want. Charles shares his vision for both his personal life and his career. After you pick your goal, build the skills, and knowledge to reach that goal. He uses the example of becoming a speaker at conferences. He also recommends you find a mentor or someone who has sone what you want to and get there help. Charles explains how important it is to get out of your own way mentally. Many people find reasons real or imagined as to why they can’t reach their goal. He agrees that the world is unfair and barriers can be real. The best way to show others they can overcome barriers is by doing it yourself and working towards your goals. You can if you believe you can and you work for it. Panelists Charles Max Wood Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! G2iCacheFly ____________________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! ____________________________________________________________ Links https://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundup Picks Charles Wood: The Riftwar CycleThe Man in the High CastleAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 094: React Round Up Live at GitLab Commit 2019
In this episode of React Round Up Charles Max Wood interviews speakers at GitLab Commit 2019. Eddie Zaneski from Digital Ocean talks about "Creating a CI/CD Pipeline with GitLab and Kubernetes in 20 minutes", Shamiq Islam from Coinbase talks about "Closing the SDLC Loop- Automating Security" and Jasmine James, from Delta Airlines, discusses " How Delta Became Cloud Native-Avoiding the Vendor Lock". Eddie, Shamiq, and Jasmine give the 5 min "elevator pitch" for the talks they gave at the conference. In his talk, Eddie deploys a fake startup going through the whole pipeline: building the application, containerizing an application and shipping it off to Kubernetes. Shamiq, talks about how the conventional approach to security is to consider it at the very end after all developer has wrapped up their work and why that should change. Jasmine explains more in-depth what it means for a big corporation like Delta to be in a Vendor Lock. Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! Sentry use the code "devchat" for 2 months free on Sentry's small plan ABOUT YOU | aboutyou.com/jobsCachefly Links Creating a CI/CD Pipeline with GitLab and Kubernetes in 20 minutes by Eddie ZaneskiHacktoberfest presented by DigitalOcean and DEVCommit Brooklyn 2019: Closing the SDLC Loop - A Security Panel by Shamiq IslamCommit Brooklyn 2019: How Delta Became Truly Cloud Native - Avoiding the Vendor-Lock by Jasmine JamesSpecial Guest: Eddie Zaneski. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 093: React Round Up at JAMstack Conf SF 2019
In this episode of React Round Up Charles Max Wood interviews speakers at JAMstack Conf SF. Mandy Michael gives a talk about responsive typography and variable fonts. Mandy explains what variable fonts are and how they can be used to shrink, stretch and do some very fun and creative thing with them. They discuss how to use them and Mandy explains some of the demos from her talk. Charles asks Mandy what some of the things were that she had to cut from her talk. She had to cut a few longer demos, details and performance improvements that can be made with responsive typography. Mandy shares what she is working on now with responsive typography and explains how much fun she has had expressing herself through variable fonts. To see more of Mandy’s demos and to learn more about responsive typography and variable fonts see the links below. Next, Charles interviews Shawn Erquhart work runs the Netlify CMS project. Charles shares his experience using Netlify and Shawn addresses some of the issues Charles has come across. Charles does say the using Netlify is simple, clean and nice. Shawn shares the origin story of Netlify. They discuss what it means to be a git-based content management system. They discuss how to contribute to the Netlify CMS open source project. Charles mentions his book and they discuss how contributions to open source projects like these are a great way to get a job. Shawn explains how to get started implementing Netlify CMS and how they target different static site generators. Finally, Charles talks with Tammy Everts. Tammy gives a listeners a sneak peek into her talk about website performance, more specifically JavaScript performance. Charles discusses the performance of Devchat.tv and Google Lighthouse scores. Tammy explains that while Google Lighthouse is good it isn’t completely reliable and can miss chunks of time when your JavaScript is failing and you have unhappy users. Tammy shares ways to drill down and see how your JavaScript is behaving in the wild. She talks about blocking Javascript which every developer is familiar with and non-blocking JavaScript that has high blocking CPU time which makes for janky sites. Tammy and Charles discuss what CPU is and what it measures. Tammy names resources and tools to help avoid this problem. Rules of thumb for avoiding these issues are explained by Tammy. First, Reduce, make sure all the JavaScript needs to be there. Next, Monitor, track your metrics. She also suggests working with vendors and maintaining a performance budget for metrics that matter. The interview ends with a little about Speedcurve and what they do. Tammy is the CXO of Speedcurve. Panelists Charles Max Wood Guest Mandy Michael Shawn Erquhart Tammy Everts Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! Sentry use the code “devchat” for 2 months free on Sentry small plan Cachefly Links https://www.netlify.com/https://www.netlifycms.org/https://twitter.com/erquharthttps://jamstackconf.com/sf/https://variablefonts.dev/https://codepen.io/collection/XqRLMb/https://twitter.com/Mandy_Kerr?https://speedcurve.com/https://twitter.com/tameverts?https://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupSpecial Guests: Mandy Michael, Shawn Erquhart, and Tammy Everts. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 092: The Future of APIs, GraphQL, and Developer Tooling with Sean Grove
Today the panel and Sean Grove are talking about the future of programming with GraphQL. GraphQL is a new way of building APIs that is more product and frontend focused. All of the panelists agree that it is easy to get exactly what they need with ease when using GraphQL. There are also benefits for backend developers too, since GraphQL lets you see exactly what fields your clients are using. You can also reach out to specific clients who have accessed specific fields before. This is possible because every GraphQL server is introspectable by a computer, and Sean explains how it works. This introspectivity is the basis for an idea he has that allows users to generate realistic fake data before signing up so they know exactly how their application will work before committing, and gives some examples of how it can be used. They all agree that GraphQL is very well formatted and that it provides solutions to real world problems, The conversation turns to the article How OneGraph Onboards Users Who are New to GraphQL. In particular, they discuss how the GraphiQL Explorer works versus OneGraph. GraphiQL Explorer is an extension that will look at your operations and generate a full React or Bash app from them. Sean talks about the different kinds of operations and how naming them can help you track their performance more easily. There is even a code generator that will flag unnamed queries to help you learn best practices, but won’t stop you from running your code. They talk about the benefits of using OneGraph, a single graphQL endpoint through which you can get all your data from other apps. By wrapping all the APIs in GraphQL, you get access to all the nice GraphQL tooling. They talk about how it works and some of the benefits it can have, such as helping you stay under rate limits. They talk about other interesting tools available for GraphQL and what the explosion of tools means for the GraphQL community. They talk more about how GraphQL fits into the React environment and what they think the future holds. Panelists Thomas Aylott Charles Max Wood Guest Sean Grove Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! Sentry | Use the code “devchat” for $100 credit Links GraphQLJS CodeShiftCombyHow OneGraph Onboards Users That Are New To GraphQLGrapiQL Excel GraphiQL ExplorerBashOneGraphHasuraFramerSwift.ui Picks Thomas Aylott FramerFamous Charles Max Wood Stop-motion animation Christmas movies (like Rudolph the Red-Nosed Reindeer) A Christmas Story Sean Grove Moon HighwayDraftbit SuperMario Land 2 ExplorationSpecial Guest: Sean Grove. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 091: React Best Practices
In this week’s episode of React Round Up the panel works their way through a blog post outlining best practices for React. The first is “keeping components small and function-specific”. The panel discusses the pros of using this best practice and how it relates to the single responsibility principle. This best practice also helps with the next, “reusability is important”. The panel considers this second best practice and points out some of its flaws. It recommends avoiding the creation of new components. The panel explains that by avoiding creating new components it saves time but can also cause problems as you adapt components to fit more projects. The next best practice is “consolidate duplicate code”, the panel shares their philosophies on dry code and when to consolidate. The fourth best practice is comment only when necessary, Charles explains how he uses comments to help him keep track of things inside his code and the panel warns against using too many comments as it may clog up your code making it hard to read. The fifth best practice is, “name the component after the function”. The panel explains how it is an art finding a name that is not too generic but is not overly specific; mastering the art of naming is something that will benefit everyone. Naming relates to the sixth best practice as well. “Use capitals when naming components”. The panel explains the need for convention and advises developers not to go off-book as this will slow down others. The last six best practices are all self-explanatory says the panel. “Separate stateful aspects from rendering” is nothing new. “Code should execute as expected and be testable”, the panel explains how this allows for trust between developers. “All files relating to a single component should be in the same folder”, this makes everything easy to find when necessary. “Use tools like Bit”, while the panel doesn’t use Bit, they share tool recommendations. They also comment on the progress being made it tooling and the future of automated tools. “Use snippet libraries”, the panel discusses favorite libraries and building their own libraries. The final best practice is “Follow linting rules”. Panelists Charles Wood Christopher Reyes Thomas Aylott Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! Sentry– use the code “devchat” for two months free on Sentry’s small plan CacheFly Links https://teachablemachine.withgoogle.com/ Practical React Hooks: How to refactor your app to use Hooks 12 React Best Practices You Need to Follow in 2020 https://github.com/nadeesha/saul https://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundup Picks Charles Wood: White Christmas Holiday Inn The MaxCoders Guide To Finding Your Dream Developer Job Christopher Reyes: https://github.com/microsoft/vscode-eslint https://www.playingwithfire.co/ Thomas Aylott: test && commit || revert Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 090: How Do I Introduce New Tech at Work?
Today the panel is discussing how to introduce new tech at work. They agree that it’s important to get input from all teams on the decision, although it will primarily affect the development team. One should also consider the different ways people make decisions, such as through discussion or quiet thinking, and give everyone time to come to a decision. The panel talks about positive and negative examples of how to introduce new tech at work. Thomas believes that it is important to acknowledge your own biases in decision making and to try to avoid them. The React experts discuss the significance of the team dynamic and the necessity of different roles in decision making or if it is better to have an organic discovery phase. This relates to Thomas’ point about personal biases, and he believes that it is important to put people in roles that are opposite of their personality. When making decisions about new technology, it is also important to note that not all decisions require the same amount of input, and they discuss how to measure how much input is required for a decision. The discussion turns to methods for introducing testing, and the panelists talk about their experiences. The rule of thumb for introducing testing is to start simple, have an expected behavior, and test the output to see if it matches. Some other aspects of this discussion to consider are that introducing React Hooks could be considered introducing tech, testing is just a new process, introducing new tools, and budget concerns. Charles shares experience convincing his boss to introduce Agile practices which shows the importance of getting management to see the benefits of the new tech or strategy for themselves. The show concludes with the panel acknowledging that other than introducing tech, introducing philosophies on how to organize your code follows the same patterns as introducing technology. Panelists Thomas Aylott Charles Max Wood Chris Reyes Sponsors NxPlaybook.com - Use code ‘NXDEVCHAT’ for 50% off the official https://nx.dev/React Advanced Workspaces course! Sentry | Use the code “devchat” for $100 credit Links Vue12 React Best Practices You Need to Follow in 2019SaulTest && commit || revertVS Code ESLint Picks Thomas Aylott Teachable Machine Charles Max Wood White ChristmasHoliday Inn Chris Reyes Practical React HooksAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 089: Progressive Enhancements with Ire Aderinokun
In this episode of React Round Up Charles Max Wood interviews Ire Aderinokun at JAMstack conf 2019. Ire works for Buycoins, a cryptocurrency exchange for Africa. She gave a lightning talk, “Headless Chrome & Cloudinary for progressively enhanced dynamic content on the web”. After giving a brief overview of her talk to Charles, Ire defines progressive enhancement for the listeners. Walking through how progressive enhancement works, she explains how Headless Chrome and Cloudinary helped her with the project she shared in the talk. Ire and Charles consider the blindspot that developers experience because they work on high-end devices and how using progressive enhancement helps those who use lower-end devices. Ire shares her experience with JAMstack and explains how progressive enhancement works with JAMstack. Charles shares his experience using JAMstack. The episode ends with Ire giving advice and resources to help get started with progressive enhancement. Panelists Charles Wood Guest: Ire Aderinokun Sponsors Nrwl | Nx.Dev/ReactSentry– use the code “devchat” for two months free on Sentry’s small plan CacheFly Links https://buycoins.africa/Headless Chrome & Cloudinary for progressively enhanced dynamic contenthttps://github.com/ireade/caniuse-embedhttps://ireaderinokun.com/https://twitter.com/ireaderinokunhttps://github.com/ireadehttps://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupSpecial Guest: Ire Aderinokun. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

The MaxCoders Guide To Finding Your Dream Developer Job
"The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is available on Amazon. Get your copy here today only for $2.99! Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 088: Frustrations with React Hooks with Paul Cowan
Paul Cowan was a painter and decorator for 30 years until he switched to front end development. He got into React because for him, much of programming didn’t make a whole lot of sense until he read about the flux model, and React Redux was one of the few frameworks that followed the flux model. Spending most of his life outside of the programming world has granted him a unique perspective frameworks like React. He talks about some of his frustrations with React hooks. Hooks can be frustrating because it’s a new paradigm to learn JS, the dependencies array can get bungled, React relies on the order in which hooks are called, and closures can be difficult. Overall, hooks come off at deceptively simple. Paul believes that we shouldn’t need external tooling to keep the dependency array on the right track. To avoid these frustrations, Paul reminds listeners that hooks have to be called in the same order each time at the beginning of your functional components. You also cannot have a hook in an if statement or event handler. It’s also important to remember the declarative nature of React. In production code, updating states is the best way to go. The panel agrees that it’s good that react has clarified their position on what hooks are supposed to be used for, and how we are beginning to see the limitations of React hooks. They discuss unit testing with hooks and how to determine when the React framework becomes too big. They talk about some of the new features that are coming out and how they benefit new developers. When mistakes do happen, Paul talks about how he determines what went wrong. If you want to get advice from other humans, they suggest consulting StackOverflow, ReactiveFlux, and IRC chat. When you do consult these sources, it’s important that your problem is reproducible so that it’s easier for people to help you out. It’s also important that you learn how to ask questions. The show finishes with them discussing how they handle changes in the industry. They have found that reusing components is difficult across Angular and React. They talk about the positive ways that React went version to version. They discuss complexity management in apps. The panel talks about some ways to do things in React without hooks, but also caution that avoiding the popular thing can also get you into trouble. Panelists Thomas Aylott Charles Max Wood Chris Reyes Guest Paul Cowan Sponsors Nrwl | Nx.Dev/ReactSentry | Use the code “devchat” for $100 credit _______________________________________________________ "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood will be out on November 20th on Amazon. Get your copy on that date only for $1. _______________________________________________________ Links Flux modelReact ReduxuseReducerFrustrations with React HooksSolutions to Frustrations with React HooksESLintNext.jsRelaySeleniumStackOverflowReactiveFlux Picks Thomas Aylott Shada Charles Max Wood The MaxCoders Guide to Finding Your Dream Developer JobIt’s A Wonderful LifeMr. Kreuger’s Christmas Chris Reyes Netlify React Hooks deep diveAirPods Pro Paul Cowan Solutions to Frustrations with React Hooks Stay fit Special Guest: Paul Cowan. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 087: The why-did-you-render Library and React Performance with Vitali Zaidman
Vitali Zaidman works for the WellDone Software consultancy. He has worked with a lot of different technologies, but currently works with React. In a recent React meetup, he talked about React performance. When someone says that React is not performant, Vitali disagrees and says that it is very performant unless you do certain things. If your React application is slow, it’s down to the tools you use. The panelists all agree that premature optimization is the root of all evil. The difference between premature optimization and good architecture comes down to experience. It is important to be data driven and consider performance a business environment. Vitali believes that performance is a feature and should be treated like any other. The panel discusses accessibility versus internationalization. Launching to one language is different than launching to one set of abilities. While you don’t need to internationalize on day one, don’t make it impossible to internationalize. They talk about how creating a timeline of changes in your project can help you pinpoint where your performance issues came from. It is also important to remember that developers have strong computers, while users generally do not. As you build, check your product on slower devices to make sure that it works for your users. Vitali talks about his tool why-did-you-render, which will notify you of avoidable re-renders. He also talks about considering why you are choosing to use React and whether or not is the correct choice for your project. The panel discusses their feelings on pure components. They talk about the importance of code review and manual QA since not everything can be automated, again suggesting having a slow computer or phone in the office to test as you go. They also agree that it is important to understand how your library works. They talk about the huge amount of work that is required to maintain an open source project, and how development is a team effort if you want to create sustainable software. The show concludes with Vitali talking about a performance issue he encountered and how he recognized it, diagnosed the problem, and fixed it. Panelists Thomas Aylott Lucas Reis With special guest: Vitali Zaidman Sponsors Nrwl | Nx.Dev/ReactSentry use the code “devchat” for 2 months free on Sentry’s small plan Ruby Rogues Links KnockoutWhy did you renderFusion.js: A Plugin-based Universal Web Framework - Leo HorieReact Element's 'Parent' vs Rendered ByHow To Reduce Unnecessary Re-RendersWhy Performance MattersPerformance Impact CalculatorWelldone Software Follow DevChatTV on Facebook and Twitter Picks Thomas Aylott: Face-API.jsReact force graphReact 3 Fiber Lucas Reis: Opendoodles.comAdopting Optimizely at Compass Vitali Zaidman: JSJ 402: SEO for Developers with Vitali ZaidmanSpecial Guest: Vitali Zaidman. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 086: Gatsby Themes with Chris Biscardi
In this episode of React Round Up the panel interviews Chris Biscardi. Chris is now working with Gatsby. He shares a bit about his background and how he got into programming. Chris explains his move from Kubernetes and Docker over to Gatsby. His overall drive is to increase leverage for other people and what drew him to these projects. Chirs explains what Gatsby is and what it has to offer to React developers. Gatsby is like a creat react app which is attached to a static site generator that has an API that allows you to pull in data from anywhere. Also, by using Gatsby developers do not have to operate alone, they get the whole Gatsby ecosystem to help them. The panel considers Gatsby and if it would be a good way for developers to learn React. Chris explains with Gatsby’s documentation it would be great for learning React. The panel believes it would be a good place to learn because of the hands-on goal-oriented work engaged in when using Gatsby. Chris shares what developers get when using Gatsby and why it appeals to programmers today. Chris explains what Gatsby themes are and how they are more powerful than CSS themes. The panel discusses how to use themes and how to write them. ThemeUI library is shared and Chris explains how it works. They consider what is next for both Gatsby and React. Panelists Lucas Reis Charles Wood Thomas Aylott Guest: Chris Biscardi Sponsors Nrwl | Nx.Dev/ReactSentry– use the code “devchat” for two months free on Sentry’s small plan Adventures in AngularCacheFly Links JSJ 386: Gatsby.js with Chris Biscardi https://www.gatsbyjs.org/https://www.christopherbiscardi.com/Views on Vuehttps://vuejs.org/https://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundup Picks Lucas Reis: Don’t procrastinate Charles Wood: Find solid people in your life Get away Chris Biscardi: Chris's Discord Thomas Aylott: Real relationships with real people outside of work. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 085: Building Resilient Architecture with Monica Lent
Monica Lent has been interested in software from a very young age, and made her first domain name when she was 9 years old. She studied legacy languages Latin and Ancient Greek in university, but ended up keeping her college development job and going into software. She recently left her job and founded a startup, analytic tool designed for bloggers designed around affiliate marketing. She talks about some of the lessons she’s learned, including how to sift through data and how to make it useful for people. Monica gave a talk at React Finland and she first applies some of her principles from that talk to what she’s learned founding a startup. One of the main differences she’s found is a small startup has different needs and levels of stability than a business. In early stage business, you have to decide where you want to invest in quality and where you shouldn’t be investing. For example, her primary focus is on her algorithm that runs the tool, and UI is less of a priority. In a large company, this might be structured differently. The panel discusses how to distill the priorities from the project manager so you know where to spend your time, something that takes a lot of experience and failure. They agree that if something is business critical and will cause the business to lose money if it fails, those things should be a top priority. Second, the panel discusses the merits of different practices such as whether or not to deploy on Friday and having engineers on call. In Monica’s React Finland talk, she talks about the importance of constraints, which can help with these kinds of decisions. She explains that instead of thinking of architecture as something super abstract, think of it as enabling constraints, as picking ways to do less and end up with code that is safer to run, longer lasting, and has fewer bugs. Thomas shares how he used to oppose constraints and architecture, and how he changed his mind. They discuss the importance of automation over documentation for building sustainable code. Third, Monica explains her opinion on how copying and pasting code instead of adding dependencies is a positive constraint. She prefers this method most of the time but not in all cases because it keeps your code flexible and avoids unnecessary specialization. However she is not advocating for copy/paste over dependencies in every situation : rather the point comes down to using copy/paste instead of inappropriate coupling. Sometimes, when you create an abstraction and combine two pieces of code, this new combination makes code more brittle than it would be otherwise Components put in the shared folder almost never leave. This causes the component to become very specialized and not work in all scenarios. The panel discusses where this method may not work. Thomas talks about some of his favorite tools for simplifying complexity, React Hooks and Relay. Monica and the panelists discuss the merits of using TypeScript and proper methods for coupling code. Fourth, the panel discusses how so much of programming is dealing with other people and the importance of keeping your ego out of it when designing constraints, especially since developers hate other developer’s abstractions. They debate whether pride is a characteristic of junior or senior developers. They note that it is easier to get prideful and opinionated when you’re not working on a team. Thomas believes that if you aren’t working on a big team, you should force yourself to talk to people with opposing positions. The show concludes with the panelists agreeing that it all comes down to the balance between priorities and making things work. Sometimes we can get so focused on making something work that we lose sight of what actually matters. They agree that collaboration generally yields better results than leaving it to one person. Monica talks about the importance of senior developers nurturing their team by leading from behind to help people come up with their own solutions. The panelists talk about different methods they’ve seen for doing this. Panelists Leslie Cohn-Wein Thomas Aylott Lucas Reis With special guest: Monica Lent Sponsors Progress KendoReact | Try now for FREE: kendoreact.com/reactroundupSentry use the code “devchat” for 2 months free on Sentry’s small plan Views on Vue Links Monica's React Finland talkNarcissistic design talkA Philosophy of Software DesignReact HooksRelayTypeScriptWebpackgRPCPrettier 7 Absolute Truths I Unlearned as a Junior Developer Follow DevChatTV on Facebook and Twitter Picks Leslie Cohn-Wein: Xochimilco, Mexico City, MexicoList of CSS mistakes Thomas Aylott: Get the Truth book Lucas Reis: LoveveryZero Fasting app Monica Lent: The Mom Test by Rob FitzpatrickSpecial Guest: Monica Lent. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 084: What Makes a 10x Engineer?
In today’s show, Chuck talks about the recent Twitter thread about 10x engineers. He goes through each of the points in the tweet and talks about each of them in turn. There are only two points he sort of agrees with, and believes the rest to be absolute garbage. One of the issues with this tweet is that it doesn’t define what a 10x engineer is. Defining a 10x engineer is difficult because it is also impossible to measure a truly average engineer because there are many factors that play into measuring productivity. Chuck turns the discussion to what a 10x engineer is to him and how to find one. A 10x engineer is dependent on the organization that they are a part of, because they are not simply found, they are made. When a 10x engineer is added to a team, the productivity of the entire team increases. Employers have to consider firstly what you need in your team and how a person would fit in. You want to avoid changing the entire culture of your organization. Consider also that a 10x engineer may be hired as a 2x engineer, but it is the employer that turns them into a 10x engineer. Overall, Chuck believes these tweets are asinine because it’s impossible to measure what makes a 10x engineer in the first place, and hiring a person that fits the attributes in the list would be toxic to your company. Panelists Charles Max Wood Sponsors Progress KendoReact | Try now for FREE: kendoreact.com/reactroundupSentry use the code “devchat” for 2 months free on Sentry’s small plan iPhreaks Links 10x engineer Twitter thread Follow DevChat on Facebook and Twitter Picks Charles Max Wood: Copyhackers.comGood to Great by Jim Collins Keto diet Podcast MovementAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 083: Reactive Programming with Storybook with Dean Radcliffe
Dean Radcliffe has been web developing since the table tag was the new hotness. His interests include his wife and two kids, music, sports, and he likes to say he helps people make whatever they can dream of. Since starting to move towards the frontend, React has been his weapon of choice, which he got started with in 2014. Dean works at G2.com, a software review site. They are developing a review form, which requires the code to react to events. For example, a person’s position in the company would affect what questions they see, so the form needs to react to which box is checked. Dean talks about the use cases for building a reactive form and what kind of things are going to happen when you fill in an input. For his form, the input will be remembered, and they want to increase the user’s involvement with the form through incentives. To accomplish this, Dean uses component driven development with Storybook. Storybook is a tool available for React and other frameworks, which lets you jump directly to each state you want to view instead of having to go through them all one by one. Basically, it gives you shortcuts directly to the visual states of your components. These states facilitate development and the feedback cycle going back to the designers, allowing them to see more than just the finished application and enabling them to circumvent mistakes. Storybook relates to reactive programming because component driven development lets you discover the API and what sets of props are necessary to put this component into each possible state that can be displayed. Dean does not use it as a test environment on his team, but it does help them write unit tests. It has an addon that lets you write unit tests in Storybook, but he hasn’t used it. Dean compares where reactivity and Storybook come together by comparing it to a thermometer.A thermometer will get readings over time of discrete values, and that timing is how people experience your components. You can create an observable of those states, and Storybook Animate ties them together. Your components, however, are still your responsibility. Dean talks about how he creates the observables. The observables are hardcoded, but the great thing is you don’t need to know where it came from. Dean describes how the observables are connected to the components. Dean feels that having this dynamic feed cycle makes it kind of fun to write tests. There is also a function called After which creates a set time out, which creates an observable of that value over time. Dean talks about his other tool, RX Helper. RX Helper provides an ‘after’ abstraction, and an event oriented layer in React. RX helper allows you to listen for custom events raised from the individual components of a form, and you respond to those events with observables, and the observables produce values over time.The goal of RX Helper provides some transparency and makes it easier to try out concurrency designs. The show concludes with Dean talking about some of the changes he’s made to his tools and how he came up with the idea. Panelists Charles Max Wood With special guest: Dean Radcliffe Sponsors Progress KendoReact | Try now for FREE: kendoreact.com/reactroundupSentry use the code “devchat” for 2 months free on Sentry’s small plan My JavaScript Story Links Knockout.jsG2.comStorybookStorybookAnimateRX HelperMeteor JS Follow DevChatTV on Facebook and Twitter Picks Dean Radcliffe: Follow him on Github and Twitter Kent C. Dodds@davidkpiano XStateGangstagrass Charles Max Wood: St. George MarathonThe 360 Degree LeaderSpecial Guest: Dean Radcliffe. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 082: Progressive SSR with Dinesh Pandiyan
Dinesh Pandiyan is a developer from India. He started as a backend engineer and then moved to frontend. Currently he is working for ThinkMill in Sidney, Australia. Today Dinesh and the panel are talking about devtools and progressive SSR. Dinesh got started with React Redux. The panelists talk about their experiences using primarily Redux for projects. Dinesh talks about his transition from backend to frontend and how it’s a totally different world. On the backend he was working in Java and it ran on a server, but on the frontend, code runs in a browser and the browser is very different for each user. Frontend development is tricky because you don’t know where your code is going to run. One of the trickiest parts of frontend development is debugging something in production. Unless you have good logging tools, you won’t know what’s going on. Debugging this stuff when it’s running on client browsers is hard, but when you’re in development mode your own browser you’ve got handy tools. They talk about some of the tools in React, and agree that console.log is the greatest debugging tool of all time. Dinesh talks about some of the most surprising features about React dev tools. You can benchmark your preferences and identify weaklings in your project, which are things that slow down your application or things that might slow it down. On an application level, you have to build a mental model of how the data flows from the top, where things change, etc, and dev tools can help you build that pretty easily. They talk about how things had to be done before great React tools. In fact, Dinesh chose React just for the devtools. They talk about how the dev tools for React compare to Java. The most important thing is that you have a good debugger that can stop where you want it to. They transition to talking about the differences between SSR and progressive SSR For SSR (Server Side Rendering), rendering happens on the server and you send it to the client. CSSR (Client Server Side Rendering) is when all the rendering happens on the client’s side. PSSR (Progressive Server Side Rendering) is where you render small chunks on the server and then send it to the client bit by bit. They talk about how this has been occurring from the beginning of the internet. This concept is similar to microfrontends. Dinesh gives advice on how to implement PSSR. He says that when you surver render, it loads on differently. Your framework has to do one complete pass of the histiema, so this means you cannot send things to the client until the whole histema is designated. To beat this they’ve been doing a mix of SSR and CSR, with the header, body, and non critical content rendering on the client side. PSSR bridges the gap between SSR and CSSR. How do we make it real and how do we use it? The panel discusses ways to make PSSR a reality. Dinesh has been experimenting with it with extra services, and he gives his method for doing it, emphasizing the importance of where you divide your code is very important, it has to be in sequence. CSS Grid solves this problem, so you could render things out of order and the browser puts it in the right spot. They talk about other ways to get around it. Lucas shares some of the difficulties he’s encountered with streaming and rendering. They talk about the new feature for the Phoenix framework for Elixir, Live View Now. For this feature, you don’t need client side frameworks to generate dynamic content and it enables two way streaming. However, it does not scale well for extremely large apps. They talk about some of the tradeoffs for using this feature. They conclude by discussing the gap between website optimization and device performance. Panelists Thomas Aylott Dave Ceddia Lucas Reis With special guest: Dinesh Pandiyan Sponsors Progress KendoReact | Try now for FREE: kendoreact.com/reactroundup Sentry use the code “devchat” for 2 months free on Sentry’s small plan My JavaScript Story Links React ReduxConsole.log PuppeteerWebpackDatadog CSS GridTransport headersPhoenixElixir Follow DevChatTV on Facebook and Twitter Picks Lucas Reis: Ben Hoyt Wholesome Learning ElmCast iron skillet Thomas Aylott: 6 Lessons Children Need to Learn Dinesh Pandiyan: To-Do List app David Ceddia: On the Utility of Phoenix Live ViewSpecial Guest: Dinesh Pandiyan. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 081: NX and Monorepos with Jeffrey Cross and Victor Savkin
Jeffrey Cross and Victor Savkin are the cofounders of NRWL. They used to work together at Google on the Angular team and started NRWL so that people could use Angular 2 well. Victor talks about NRWL’s tool NX, which came from the desire to help people develop like the tech giants. Companies like Google and Facebook develop in the same repository so that people can collaborate. NX is an open source tool for this collaborative development, known as a monorepo. Monorepo style development is a way to develop applications such that you develop multiple projects in the same repository and you use tooling to orchestrate development. The tooling connects everything, makes the experience coherent, and ultimately makes the monorepo style work. The benefits of monorepo development are that the tool chain enables you to interact with different projects in the same fashion, collaboration is more effective, and multiple apps can be refactored at once. The panel discusses what situations are appropriate for a monorepo and which are not. Victor believes that any company with more than one large product would benefit from a monorepo, but it would not benefit a company that wants to keep their teams distinct from one another. The hosts express some concerns about implementation, such as scaling and creating the infrastructure. Victor assures them that a monorepo is inherently scalable, and most tools will work for years and years. As for the infrastructure, companies like NRWL specialize in helping companies set up monorepos, and NX provides many of the necessary tools for a monorepo. A monorepo can be tailor-made to fit any size of company, and can even be created for already established projects. If you wanted to start your own monorepo, you can start by taking a project or handful of projects and moving them to the same place. As you develop, pull pieces of your applications out and put them into packages. Victor cautions that monorepos tend towards a single version policy, so you’ll want to get on the same version as your third party dependencies before you move your next application in. You can move things in and temporarily have different versions, but plan to make them the same version eventually. Victor talks about how the CI in a monorepo setup looks different, because you run tests against everything that might be broken by that change, not just the project its in. So, when you change something in your code, you need to consider what other pieces of code need to be taken into account. A monorepo does make dependencies more explicit, and when you have good tooling it’s easier to see the effect the changes you make have. This is where NX excels. One of the big advantages of NX is that it allows you to partition your application into packages with a well defined API, and prevents the project from becoming one giant node. You can then interact with those packages, and see what happens when you change something. You have a lot more clarity of how your app is partitioned and what the restraints are. NX allows you to share stuff between the front and backend. The show concludes with the conversation turning to Jeffrey and Victor’s consulting work. They talk about some of the interesting features that are happening outside of React that we are missing out on. Victor is very impressed with tooling in the Angular community. He talks about a tool called Console for NX. They end by talking about the schematic powered migrations in Angular. Panelists Leslie Cohn-Wein Dave Ceddia Lucas Reis With special guest: Jeffrey Cross and Victor Savkin Sponsors Sustain Our SoftwareSentry use the code “devchat” for 2 months free on Sentry’s small plan My JavaScript Story Links NRWLAngularNXBuilding Fullstack React Applications in MonorepoAngular CLI Follow DevChatTV on Facebook and Twitter Picks Lucas Reis: Dear StartupCryptocurrencies video by 1Blue1Brown Dave Ceddia: Help, I’ve Fallen (into code) and I Can’t Get Up!Code maps frontend Victor Savkin: Ember MugHeal the Internet Jeffrey Cross: lululemon Commission pant Leslie Cohn-Wein Why I’m No Longer Talking to White PeopleEverylayout.dev Special Guests: Jeff Cross and Victor Savkin. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 080: Navigating React Navigation with Zain Sajjad
Zain Sajjad is a frontend developer at his company Peekaboo Guru, an app built in React. The show begins with Zain explaining why he chose to build Peekaboo Guru in React. Ultimately, he chose React for its composability and reusability. He talks about how much data is shared between his React and React Native applications. Zain explains what he means by a container since he is not talking about Docker, and how he has the app organized. He talks about the differences between routing and navigation between React and React Native. When approaching these differences, he breaks things down into components, containers, and platform, paying careful attention to how they work together. This differentiation can actually help a lot with testing as well. The panel asks Zain about choosing between React navigation and React Native navigation, but Peekaboo Guru uses both React navigation and React Native navigation, but on different platforms. They use each on different platforms because React Native doesn’t let you configure it with existing native apps. He talks about the pros and cons of each, but prefers React Native navigation. They decided to use both because Peekaboo Guru is based in a region where there aren’t many users with high end devices, so this decision was made to accommodate them. They then discuss how to approach making important software decisions with a team and how to make an objective decision away from your bias against old or new technology. Zain believes that you have to step out of your comfort zone and think of the team rather than yourself. They talk about the thought process of making these decisions, especially concerning who is going to do the maintenance. They talk about ways to give good feedback even when the maintenance is not going to be your responsibility and the importance of staying humble. Making decisions like this can be tricky because it is where hard skills and soft skills intersect. The panel moves on to talking about machine learning, and Zain talks about his experience using it to screen comments on Peekaboo Guru. Machine learning is getting more and more common, with giants like Snapchat and Facebook doing it as well. There is also a lot of machine learning on our phones that we don’t think about. Zain gives advice for those who want to start learning about machine learning. He advises people to think of it in two parts, preparing a model and using a model. Thomas feels that machine learning is more approachable than it first appears to be, though it is always related to how good the abstraction is. They compare machine learning to AI and a database to assist with understanding. If you want to play around with AI, Zain counsels that programming has the addiction of success. Keep your tasks small to keep getting those tastes of success. He advises that it is best to start by using the inference part and then make a model. He talks about different tools to help with the math. The show concludes with the panel agreeing to his counsel and reminding listeners that failure is trying to go from 0 to perfect in one step. Panelists Thomas Aylott Lucas Reis With special guest: Zain Sajjad Sponsors Adventures in BlockchainSentry use the code “devchat” for 2 months free on Sentry’s small plan My Angular Story Links Peekaboo GuruReactReact NativeReact Native NavigationReact NavigationSQLTensorFlowFun Fun FunctionImmer.js Follow DevChatTV on Facebook and Twitter Picks Lucas Reis: Ember.js3Blue1Brown Thomas Aylott: Rite in the Rain notepadSpecial Guest: Zain Sajjad. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 079: State Machines and State Charts with Farzad Yousef Zadeh
Episode Summary Today’s guest is Farzad Yousef Zadeh, a developer from Iran with a unique path into computer programming. He started by studying astrophysics and aerospace engineering in college, then dropped out in his last semester because it wasn’t the right path. He then taught himself to code, working mostly in web programming and frontend development. Despite his change in course, Farzad remains passionate about observing the night sky. Farzad is here today to talk about the ideas in his talk Explicitness and Consistency in UI, where he talks about the difficulties of developing a user interface and how the experience can be improved by using state machines and state charts. He talks about his inspiration for the talk and how he has implemented state machines and state charts into his work. The panel backtracks and talks about the definition of state machines and state charts. A state machine, from an academic background, is a model for computing something. It's for managing and controlling, taking over branching and managing a finite amount of state declaratively. State machines are not so much about sharing or reusing, but about how your communicate a certain behavior. Despite the fact that event driven programming permeates the programming consciousness, thinking about state charts and state machines is actually more natural than it first appears. The panel explains how it’s the same principle as whiteboarding to solve a problem. Lucas asks how state charts are different from pure React. Farzad talks about how it’s important not to just treat your static states as first class, but also the transitions between them. Otherwise, you would end up with something that looks like a map with cities and towns, but no roads. Using statecharts and state machines makes testing an application much easier, and in some ways you let the machine test itself. The machine will know what to do with your states because you define the path, and the machine will take the path for you. They again talk about the difference between state machines and state charts. A state machine defines a finite set of states and defining the events that the machine can take and respond to when transitioning from state A to B. If you use only this, you will encounter a snag called ‘state explosion’ because not non-concrete things cannot be modeled. So, state charts were invented to compensate for this. A state chart brings the idea of an extended state, or the context and data you need to hold and reason from. Farzad talks about other types of machines and supports that exist for branching, entry actions, and exit actions. This is similar to the use effect hook in React. He gives examples of where you would use this logic and how it would be worked into frameworks. Farzad talks about how your machine is just a definition, a declarative model of how something is supposed to behave, and how having that separation between the definition of the logic and behavior vs the implementation of API has given us so much more freedom and portability The panel talks about how using state machines and charts is an investment in the long term maintainability of your code. They agree that using state machines and charts makes it easier to communicate with other developers, new team members, and even non developers. They talk about Cerebral.js and its contributions and model. As with everything in programming, state machines are not a silver bullet and don’t work in every situation. Farzad talks about situations where state machines can be unhelpful. It is still valuable to consider state machines and charts because it forces you to dedicate time thinking and organizing your thoughts so that you can build something maintainable that won’t just be thrown away. The panel discusses how thinking things out before starting to code can be beneficial. They finish by talking about how React Hooks has started them on the path to implement state machines and charts into their code. Panelists David Ceddia Lucas Reis Leslie Cohn-Wein Thomas Aylott With special guest: Farzad Yousef Zadeh Sponsors Sustain Our SoftwareSentry use the code “devchat” for 2 months free on Sentry’s small plan My Angular Story Links Explicitness and Consistency in UIDavid Khourshid xstate libraryRRU 069: The State Machines in React with David KhourshidState machineState chartCerebral JSOrigami by FacebookElm The GaryVee Content ModelOvermind JS Follow DevChatTV on Facebook and Twitter Picks David Ceddia: Reverse Interview Thomas Aylott: Machine Learning Zero to HeroTensorFlow at Google I/O 2019 channel Lucas Reis: How to Learn D3.js Leslie Cohn-Wein: Write Fewer Tests! From Automation to Autogeneration by David Khourshid Farzad Yousef Zadeh: Don’t Let Architecture Astronauts Scare YouSpecial Guest: Farzad Yousef Zadeh. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-

RRU 078: The Uncanny Valley with Håkon Krogh
Episode Summary Today’s guest is Håkon Krogh, and the panel is discussing his talk on lightning fast SSR React apps given at React Amsterdam. He gives a brief overview and defines his use of the Uncanny Valley (called the Valley of Lies in his talk). In this instance, the Uncanny Valley in programming occurs when everything in a website or application looks great, but none of the buttons work or users simply can’t connect. This is especially common when users try to connect to a site or app with their cell phone rather than a computer. The panel discusses what can be done. It’s important to begin by measuring the lag in your applications. Designing the progressive loading experience first is suggested as a solution, as well as organizing what loads first and using React and HTML for different parts of the app. It’s important to realize that some tools don’t work in every situation. The panel talks about the merits of Next.js. Next they talk about what kinds of applications require SSR that make the loading slow. They discuss the importance of SEO ratings and how it can affect your rank in a Google search. Services like Lighthouse can give you an SEO rating so that you can improve. Håkon and the panel talk about other ways to improve on the Uncanny Valley. It’s important to make sure that users have a way to use your site even if they’re stuck in the Uncanny Valley. One way to do this is to provide fallbacks so that if your React isn’t working, the site is still usable. They discuss the merits of micro frontends, using SSR for only part of the app, and reducing bundle size. Unfortunately there is no silver bullet, so solutions will vary by what you’re building. In spite of these setbacks, one of the great features of React is you don’t have to do everything in React. They discuss the emerging idea of shipping different JavaScript for different things and talk about some of the React-like alternatives available. Bridging the Uncanny Valley is vital because it is the reason many people are afraid of their computers, and a good user experience can make people gravitate towards your product. The show concludes with Håkon talking about things in the React community that are piquing his interest. Panelists David Ceddia Thomas Aylott With special guest: Håkon Krogh Sponsors Sustain Our SoftwareSentry use the code “devchat” for 2 months free on Sentry’s small plan GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT Links Håkon Krogh’s React Amsterdam talkNext.jsSEO ratingsGatsbyLighthouse Apollo GraphQLnpmTypeScriptPreactInferno.js Follow DevChatTV on Facebook and Twitter Picks David Ceddia: FXmicrojs.com Thomas Aylott: Mindset by Carol Dwek Håkon Krogh: Bundlephobia Special Guest: Håkon Krogh. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 077: Reusing Code Responsibly with Andrey Okonetchnikov
Episode Summary Andrey Okonetchnikov is a specialist in frontend architecture and design systems. He runs his own consultancy and made the package lint-staged. Andrey has been in programming for 20 years and talks about his background, how he got into React, and why he started component-driven.io. Andrey has always been interested in design tools and design systems, it just wasn’t the right time because the right tools weren’t available. Since Andrey has been working in frameworks for 20 years and has watched them come and go, Lucas asks Andrey how he has seen the communication between developers and business owners evolve over that time. Andrey reflects on his first conference talk and believes that not much has changed, even if the tools have. His perfect interaction between developers and business owners would be codeless, and would instead draw his design on a napkin. This idea ties into Andrey’s ideas of creating things in primitives instead of wireframes. He relates his idea to the pattern philosophy of the building architect Christopher Alexander, the idea that specific design problems require specific solutions. He talks about since everything in React is a component, we can encapsulate a design decision into a component. Since the power of components is redistributing knowledge, the panel discusses how components promotes reusability, accessibility, and sustainability in code. However, Frankenstein components are the dark side of reusability. Andrey talks about the dynamic view of a design system that does reuse and how to make sure that it evolves cleanly. They discuss how much of can be planned in advance the first time you’re creating a component versus how much should you not try to think too far ahead and fix it when it comes up. They all agree that early abstraction can be almost as destructive as early optimization Panelists Leslie Cohn-Wein Thomas Aylott Lucas Reis With special guest: Andrey Okonetchnikov Sponsors Sustain Our SoftwareSentry use the code “devchat” for 2 months free on Sentry’s small plan GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT Links Lint-staged Component-driven.io PrimitiveShape Up bookCreate prototype using AI : Airbnb testMonica Lent twitterWireframe jQueryCoffeeScript Backbone.jsChristopher Alexander Follow DevChat on Facebook and Twitter Picks Leslie Cohn Wein: Frontend Masters Intro to Vue courseGatsby.js glossary Thomas Aylott: Designing Web Interfaces by Bill Scott Lucas Reis: Shape Up bookMIT open courseware Andrey Okonetchnikov: Components.aiSpecial Guest: Andrey Okonetchnikov. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 076: Ignite and the React Community with Jamon Holmgren
Sponsors React Native RadioSentry use the code “devchat” for 2 months free on Sentry’s small plan GitLab | Get 30% off tickets with the promo code: DEVCHATCOMMIT Panel David Ceddia Lucas Reis With special guest: Jamon Holmgren Episode Summary Today’s guest is Jamon Holmgren from Oregon. Jamon is the the CTO for Infinite Red, a consultancy that designs and builds mobile apps. The show starts with Jamon talking about his background in coding, which goes all the way back to when he was 12 years old. The panel brings up his React Finland presentation on building a community around Ignite. Ignite is a plugins and boilerplate maker for React that can speed up app creation. Jamon talks about how it works and how it came about. The panel believes this to be an excellent product that will contribute to code quality and doesn’t contribute to the jumble of boilerplates out there. Since Infinite Red engineers work on both web and mobile applications, Jamon talks about how they navigate the differences between the two platforms. Their primary tool for doing this is MobX, and Jamon expounds on how it works. The panel discusses situations where using React Hooks and React Context are too low level for a state management solution for a big application, and thus where tools like MobX become necessary. The conversation turns to the React Core team and how they view the community coming up with their own solutions. The panel discusses the lack of executive decisions in React and compare it to other languages like Ruby, and how it affects the longevity of a language. They weigh the benefits of a core team that makes executive decisions and causes conflict versus one that doesn’t and the chaos that ensues. They discuss the benefits of standardization, but ultimately agree that collaboration almost always comes up with the best solution. Links Infinite RedBuilding a Community Around IgniteIgniteBoilerplateMobX State TreeMobX ReactMobXEmerReact ReduxReact ContextReact HooksApolloElmPrettier@jevakallio Tweet Follow DevChat on Facebook and Twitter Picks David Ceddia: Devurls.comReducing Motion to Improve Accessibility Lucas Reis: CSS Grid like you are Jan Tschichold Jamon Holmgren: React Node GUISpecial Guest: Jamon Holmgren. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 075: Animations and React Morphe with Bruno Lorenco
Sponsors Adventures in DevopsSentry use the code “devchat” for 2 months free on Sentry’s small plan My JavaScript Story Panel David Ceddia Thomas Aylott Leslie Cohn-Wein Lucas Reis With special guest: Bruno Lourenco Episode Summary Bruno is a developer specializing in multimedia. He is currently building websites with React and the creator of React Morph, an animation library. Bruno talks about what React Morph is, how it originated, and the flip animation technique. React Morph is uniquely designed to be compatible with many platforms. Bruno talks about his goal to make everything simpler, from having animations on your website, to making things easier for users of the application. The panel discusses the importance of animation and how it relates to user accessibility. They discuss how animation is interpreted in the brain to create meaning and purpose. On the other hand, it can be easy to go overboard with animation and can even make people feel sick. Since animation is important, Bruno outlines ways to avoid causing motion sickness in users. They discuss the difficulty of communicating animation intention between designers and developers. Animation should not be the last thing a team thinks about and should be given the same kind of considerations as for color and typography. They discuss the difficulties of adding animation to a project and whether or not animations should be included in the design system. They talk about the differences between mobile apps and web apps in how animations are used, and what the different expectations users have for them. React as a framework emphasizes static states, so Bruno and the panel discuss whether or not React is an animation friendly framework. Bruno talks about ways to get animations to fit the React paradigm so that they can be added. His hope is that React Morph will take care of a lot of animations automatically without CSS. He talks about other animation libraries that have influenced React Morph. The show finishes with Bruno talking about what he would like to accomplish next, which is to bring the design world and developer world closer together. Links Render PropsReact MorphReact HooksFlip techniqueChange blindnessQartz composerOrigamiKeynotePopmotionPopmotion PopcornNode.JSDesigning Web InterfacesReduced motion preference Follow DevChat on Facebook and Twitter Picks David Ceddia: DevJoy Thomas Aylott: Lecture on Jung’s TypographyThomas’ Youtube channel Lucas Reis: Information Theory for Intelligent People Leslie Cohn-Wein: Resilient Management by Laura HoganSpider-Man: Into the Spiderverse Bruno Lourenco: A-Frame ReactBruno’s React Finland talkSpecial Guest: Bruno Lourenço. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 074: Learning React and TypeScript in Public with Shawn "swyx" Wang
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Panel David Ceddia Thomas Aylott Leslie Cohn-Wein Lucas Reis With special guest: Shawn Wang Episode Summary Today’s guest Shawn Wang is a career changer starts off the show about how he got from finance to programming. The panel talks about how they each got started in programming. Shawn explains his Learn In Public manifesto. They discuss the benefits of learning in public and how concepts like Cunninham’s Law and lampshading can be a good thing. Shawn talks about the differences between inbound and outbound marketing. The two biggest benefits of learning in public is that people will come to help you, it helps you to build capital, and it os the fastest way to learn. They discuss the balance between sharing too little and oversharing. Leslie brings up some possible safety concerns, and the panel discusses ways to stay safe while learning in public. Ultimately, it’s ok to learn in public and maintain anonymity. They discuss ways to adjust public learning to your comfort zone and how to know when you’ve done well with your public learning. Shawn talks about why he started doing TypeScript and React and the importance of saying thank you to your teachers, which also comes with some unexpected perks. They finish by discussing how to know if people care about what you’re producing. Links VBAMicrosoft ExcelHaskellHoogleCunningham’s LawLampshadingNerd snipingJulia Evans cartoonsReact Suspense talk by swyxLin Clark code cartoonsLin Clark - A Cartoon Intro to Fiber - React Conf 2017Samantha MingReact/TypeScript Cheat SheetLearn In Public Follow DevChat on Facebook and Twitter Picks David Ceddia: Why React Hooks Thomas Aylott: Atomic Habits by James Clear Lucas Reis: Tweet from James Clear Leslie Cohn-Wein: Storybook Accessibility Add-on Shawn Wang: Lizzo’s Juice 12 Leverage PointsSpecial Guest: Shawn Wang. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 073: TypeScript and ReasonML Christoffer Niska
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Panel Thomas Aylott David Ceddia Lucas Reis With special guest: Christoffer Niska Episode Summary Christoffer Niska has been in web development for over a decade and works with mainly PHP and JavaScript, but knows about 8 different languages, often working in multiple languages simultaneously. The panel discusses the affect learning another language has on how you write the code you’re working on. They talk about TypeScript and Christoffer shares how he got into it. They discuss the prevalence of TypeScript and some of the tools available for it, like Fable.io. TypeScript is a very beneficial language because it can help with refactoring and automation. Christoffer believes that it is better to write libraries in TypeScript. He shares how to release an NPM package with Typescript. They talk about more tools that work with TypeScript. The panel talks about Reason ML, which is an alternative syntax on top of OCaml.They discuss how the success of ReasonML is evaluated. ReasonML has been found to dramatically reduce bugs and has many features, such as a pattern matching feature. The panel talks about the availability of ReasonML to those who are not on the Facebook team. ReasonML and Typescript can also be compiled into WebAssembly and other languages. They finish by talking about some of the many tools that Reason ML has built in. Links ElmFlowTypescriptFable.ioF#Rollup.jsNode.jsNext.jsApolloThe PlatformReact RestrictedTSDXClojure specArticle on why you should look into ReasonMLReasonMLOCamlBuckleScriptPrettier Follow DevChat on Facebook and Twitter Picks David Ceddia: Smashtest Thomas Aylott: Brian Vaughn’s React Tools rewrite Lucas Reis: Complexity Explained Christoffer Niska: Exploring ReasonMLDiagonal LineSpecial Guest: Christoffer Niska. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 072: React Hooks for Global State and More Custom Hooks with Daishi Kato
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus Panel Thomas Aylott David Ceddia Lucas Reis With special guest: Daishi Kato Episode Summary Todays guest Daishi Kato is a freelance programmer and has many open source libraries. He starts off by talking about how he got from tail call optimization to Redux and global state. Daishi talks about his definition of global state, how it differs from a regular state, and why it is a problem with the current context implementation. Thomas talks about his work with Android and how React has helped solved some of the problems they encountered. They talk about when different rendering issues they’ve encountered. Daishi shares his unique approach to solving rendering issues and how it applies to his libraries. His solution is to combine the system in React with proxy based tracking to solve issues with rendering. Daishi explains why this works and the importance of benchmarking. Daishi’s solution is designed as a same use state API, so someone can drop this in and see if it works. Daishi talks about his definition of proxies and how it triggers the rerender. He also talks about how it handles conditional reads. This tracking happens every render and it doesn’t have the same limitations as hooks. The panel talks about the new version of React Redux library implementation and how it compares to Daishi’s. Daishi’s approach is useful for people earning Redux because the used tracked state gives you all the benefits without a lot of the complexity. Daishi talks about how it deals with deeply nested pieces of code. The panel discusses the delicate balance of optimizing, but not doing it too soon, but to also remember how vital it is to maintain the performance of your app. Daishi’s work with Reactive React Redux to make sure things perform from the beginning is really important. It’s also important to understand how your product works so that when things do go wrong, you know how to fix it. Daisho talks about his other library React Tract for people who don’t like to use Redux. Links MobexGraphQLProc SQLReact-TrackedImmerReactive React ReduxReact Redux Follow DevChat on Facebook and Twitter Picks David Ceddia: A Compiler From Scratch videoVerbal Expressions Thomas Aylott: The Making of a Manager by Julie Zhou Thomas’ Youtube channel Lucas Reis: Shun knives Daishi Kato: Remote FacesSpecial Guest: Daishi Kato. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 071: The Importance of Moderation and Chaos
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Panel Lucas Reis Thomas Aylott Episode Summary Today, Lucas and Thomas discuss how companies enforce what technology gets used, especially when companies get really large. Thomas talks about his experience with Facebook’s an ‘all carrots, no sticks’ approach, and says that if Facebook hadn’t given its employees the freedom to use whatever technology they needed, React would have never come about. Thomas talks about how he built his 2018 React Conference talk. He says that the hard part of being a programmer is not the technical aspect, it’s the social aspect and balancing the old and new. Lucas talks about his experience as a consultant, the path from analyst to manager, and how things change. Thomas brings up Facebook’s philosophy of “abstraction through extraction”. Thomas and Lucas agree that in the real world, it’s really difficult to have linear/boolean things, and as a result there is no one cure for everything. The great challenge is of solving problems is moderation in solutions and avoiding extremes. They agree that a lot of engineering is just moving complexity around, and it’s important to be aware of where you are storing the complexity and how it affects your workers, especially those who are just starting. This shifting is kind of where react came from. Ultimately, it’s important to leave a little room for chaos so that your project can evolve. Links HooksCSS Follow DevChat on Facebook and TwitterAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 070: Drawing the Line Between 3rd Party and Custom Code with Glenn Reyes
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus Panel Lucas Reis David Ceddia Leslie Cohn-Wein With special guest: Glenn Reyes Episode Summary Special guest Glenn is a software programmer based in Vienna, Austria and has been working in programming since 2013. He is the creator of the Graphpack library. Today the panel discusses how to choose between picking a 3rd party or handcraft component in React. They discuss the popular notion to avoid “reinventing the wheel” and always using 3rd party components. Glenn gives advice on approaching the decision between 3rd party components or making it yourself, including considering time constraints, risks of using premade components, and the popularity of the library and how up-to-date it is. It is also important to understand the big picture of your project and know what already exists that could be of use. The panel discusses different indicators of how well kept up a library is. Glenn talks about situations when his library Graphpack would come in handy. He advises listeners to always test software before purchasing it. The panel talks about the issue of being able to change a component later if it doesn’t work. They agree that it’s important to consider the end goal and what other people on the team need when choosing whether to use 3rd party or custom make your code. Some decision will be your companion for years and years, like what language your project is written in. Glenn suggests that when you are trying something new, try it out in a clear and isolated experiment, something React is very useful for. Last, it is important to leave notes for future developers as to why you made the decision you did Links LodashMoment libraryGraphpackElm Follow DevChat on Facebook and Twitter Picks David Ceddia: boringtechnology.club Leslie Cohn-Wein: The Ladybug PodcastBig Green Egg Lucas Reis: Top 20 CSS Navigation Menus Glenn Reyes: Lydia Hallie InstagramSpecial Guest: Glenn Reyes. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 069: The State Machines in React with David Khourshid
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus Panel David Ceddia Lucas Reis Thomas Aylott With special guest: David Khourshid Episode Summary David Khourshid is the author of a library called Xstate, He has been a developer for 7 years, currently works for Microsoft, his passion is frontendTalks a. In college, he actually studied piano performance, and so he talks about how he got into programming and where he started. The panel discusses his unique husky animation and how he came up with the idea for it and went about programming it. The panel discusses what a state is in React. David defines a state as a moment in time. States can change, when they do, that’s a state transition. They talk about the utility of states and thinking about your app as a state machine. They agree that describing your code as a state machine makes it easier to communicate and connect with non developers. The panel discusses the importance of learning from other industries, such as approaching programming the same way construction workers build a house. They debate the Waterfall versus the Agile mindset. They talk about the advantages of programming in React and focusing on the state machine, especially because it is important to be intentional about dealing with concepts separate from other concepts. They share different ways to switch to state machine thinking, one of which is to look at your event handlers and make sure they are doing anything besides dispatching events. David talks about his library called Xstate and the basics of his library and his inspiration, and who else is working in state machines. The finish by discussing industry standards. Links XstateKeyframersBootstrapDavid’s husky animationThe Checklist ManifestoSion SCXMLQTElmThunkObservableNoFloSketch SystemsState Charts Follow DevChat on Facebook and Twitter Picks David Ceddia: Atomic Habits by James Clear Bullet Journal Thomas Aylott: The Checklist ManifestoThomas’ Youtube Channel David Khourshid: Constructing The User Interface with State Charts (check the library first) Follow David @davidkpiano Special Guest: David Khourshid. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 068: Design Systems with Varya Stepanova
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus Panel David Ceddia Lucas Reis Leslie Cohn-Wein With special guest: Varya Stepanova Episode Summary Today’s guest is Varya Stepanova, who started her career in programming as a front end developer in Russia for Yandex. Now she is an independent consultant specializing in design systems. For Varya, a design system is a systematic approach to providing coherent products under the same brand. The necessity of a design system for a company is dependent upon how large it is and how quickly it is developing. Varya talks about how a component library turns into a design system and shares some of her experience. She talks about how the concepts in a design system are influenced and created by the existing interface. The panel discusses the importance of design system ownership. They all agree that the design system should be owned by either a team or a single person in order to avoid problems. Varya talks about dealing with breaking changes in a design system and the importance of working visual regression tests into a system. She shares a story about a time where broken code was released which ultimately lead her to find a way to automate visual regression tests. The panel discusses some solutions for dealing with the fact that the library is going to be used for multiple different projects and infrastructure technology tools available for a design system. Links CSSVisual regression testCypressStorybookStyleguidistPercyGatsbyMetalsmith Follow DevChat on Facebook and Twitter Picks Lucas Reis: Webpagetest.orgSpeedCurve David Ceddia: Captain Marvel Leslie Cohn-Wein: Design Systems by Allah Kholmatova Varya Stepanova: Learn about service design and design thinking Follow Varya on Twitter Special Guest: Varya Stepanova. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 067: CSS, CSS-in-JS, and Future of the Frontend
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus CacheFly Panel Nader Dabbit Dave Ceddia Lucas Reis Summary The panel shares their first experiences with CSS and compares CSS and CSS-in-JS. The best ways to learn CSS is considered. The panel shares some coding tips; considering when to use libraries and when to use homegrown solutions. Nader Dabbit shares his predictions for the future of frontend technology. The panel discusses these predictions and shares some of their own. Links https://www.facebook.com/React-Round-Up Picks Nader Dabbit: 21 Lessons for the 21st Century Dave Ceddia: CSS Mastery: Advanced Web Standards Solutionshttps://conference.convertkit.com/ Lucas Reis: https://workflowy.com/ https://www.futureme.org/ Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 066: Accessibility is not a “React Problem” with Leslie Cohn-Wein
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small planTriplebyte offers a $1000 signing bonusCacheFly Panel Dave CeddiaThomas Aylott Joined by Special Guest: Leslie Cohn-Wein Summary Leslie Cohn-Wein joins the panel to discuss accessibility. She explains how she got passionate about accessibility. The panel discusses what you have to do to become accessible. Leslie brings up divs and explains how these get in the way of accessibility. The panel discusses roles; Leslie explains what roles does and how to use roles. Accessible testing is discussed and Leslie shares some resources for testing your sites for accessibility. The panel discusses ways to make sites more accessible and how doing something is better than doing nothing. Leslie advises having an accessibility champion on your team whose job it is to think about how to make sites and apps for accessible. The panel discusses the importance of accessibility and how accessibility changes the lives of disabled users. Links https://www.w3.org/WAI/standards-guidelines/wcag/https://www.npmjs.com/package/eslint-plugin-jsx-a11yhttps://github.com/reakit/reakithttps://reach.tech/routerhttps://reactjs.org/docs/accessibility.htmlhttps://www.tobii.com/https://ofone.co/https://twitter.com/lesliecdubshttps://www.facebook.com/React-Round-Up Picks Dave Ceddia: https://egghead.io/courses/start-building-accessible-web-applications-todayhttps://egghead.io/lessons/tools-building-forms-with-accessibility-in-mind \Company of One: Why Staying Small Is the Next Big Thing for Business Thomas Aylott: Journey By Starlight: A Time Traveler's Guide to Life, the Universe, and EverythingPhotoviz: Visualizing Information through Photography Leslie Cohn-Wein: https://www.udacity.com/https://inclusive-components.design/https://www.modsy.com/Special Guest: Leslie Cohn-Wein. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 065: useEffect The Good, the Bad, and the Gotchas
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small planTriplebyte offers a $1000 signing bonusCacheFly Panel Lucas ReisDavid CeddiaThomas AylottJustin Bennett Summary The panel starts by discussing if useEffect is a good API or a bad API. The problems that useEffect solves are considered. The panel agrees it is a much better abstraction where subscriptions are concerned. Suspense and data fetching is discussed, the panel considers what the react team has in store concerning data fetching. The panel discusses what it was like to be a beginner to React and how using React is not an intuitive language. The panel shares some of their mistakes with useEffect, and try to consider useEffect from a beginners perspective. The panel gives advice for using hooks. Links https://twitter.com/ryanflorence/status/1125041041063665666 Picks Lucas Reis: https://github.com/kkuchta/css-only-chat David Ceddia: https://twitter.com/kentcdodds/status/1125876615177629696https://twitter.com/ryanflorence/status/1125041041063665666Fun with React Hooks - Michael Jackson and Ryan Florence Thomas Aylott: The Design of Everyday Things: Revised and Expanded Edition Justin Bennett: https://dusk.now.sh/https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 064: Optimizing for Performance in React with Aggelos Arvanitakis
Sponsor NetlifySentry use the code “devchat” for 2 months free on Sentry’s small planTriplebyte offers a $1000 signing bonusCacheFly Panel Nader DAbitJustin BennettDavid Ceddia Joined by Special Guest: Aggelos Arvanitakis Summary Aggelos Arvanitakis shares things he has learned from his mistakes in his blog posts. The panel discusses the most common problems in react that causes poor performance. Aggelos gives a lot of advice on how to fix or avoid these problems and how to optimize performance. The panel discusses using CSS to optimize performance. The new React API’s are discussed and their effect on performance. Vue state and vue reducer are compared and Aggelos gives tips for maintain state. The episode ends with Aggelos sharing techniques for using redux. Links https://www.orfium.com/https://itnext.io/@aggelosarvanitakis Picks Nader Dabit: https://twitter.com/Eli_Whitehttps://devchat.tv/react-native-radio/react-native-open-source-the-react-native-community-feat-christoph-nakazawa/https://dev.to/dabit3/the-complete-guide-to-user-authentication-with-the-amplify-framework-2inh Justin Bennett: https://github.com/vadimdemedes/pastelhttps://github.com/DevExpress/testcafehttps://www.cypress.io/ David Ceddia: https://svelte.dev/ Aggelos Arvanitakis: https://vx-demo.now.sh/https://technology.riotgames.com/Special Guest: Aggelos Arvanitakis. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 063: Fullstack Development with React
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus Panel Nader Dabit Lucas Reis David Ceddia Thomas Aylott Episode Summary On today’s show the panel discusses what what jobs should be delegated to the front and backend when doing fullstack development with React. They talk about where the data fetching starts coming into play in a react app and the big changes from the old web to the modern web in data fetching. They discuss how much interaction with the backend there is when working with front end applications, but also the importance of properly separating backend and frontend teams. They discuss the pros and cons of separating the front and backend teams, and agree that the problem space between both back and frontend is the user interface. They talk about where middlewares fit in. The panel notes that it is important to ensure that your new app can still communicate with older versions, and talk about different ways of dealing with it, such as continually evolving schema, installing new versions, or even never deleting anything and only adding new events. The panel talks about who should work the middle layer and who, between frontend and backend developers, should be put in charge of maintaining it. They discuss the misconception that using React makes server-side jobs irrelevant and how React actually helps. They note how automation in programming has changed the way that people use the web. They conclude by saying it is important to understand there are different ways to do these kinds of things, and encouraging listeners to look at the abstractions being built out in the serverless world Links StatejQueryMiddlewareRestBFFs (Backend for Frontend)Syscalls AWS Follow DevChat on Facebook and Twitter Picks Nader Dabit: The Never Hero Listening to books in the car with your kids. Lucas Reis: Why Softer Projects Take Longer Than You Think by Erik Bernhardsson Interviewing is a noisy prediction problem by Erik Bernhardsson David Ceddia: 11ty Thomas Aylott: Groovy Tie SquadThe Laws of Human Nature by Robert GreenAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 062: Image Lazy Loading in React
Sponsors Sentry– use the code “devchat” for $100 creditNetlifyTripleByte Panel Justin BennettThomas AylottDave Ceddia Notes Today’s show has the panel discussing image lazy loading in React. Image lazy loading is the notion that images that are below the fold (rendered outside of your browser view when you initially load a page) are deferred and loaded later, so that your page loads faster. As you scroll down the page and things get close, then they are loaded in. This is a commonly suggested performance optimization, but often it doesn’t work well in React. The panelists talk about their experiences with lazy loading and different methods they’ve seen on other sites. They discuss the tradeoff between having a lot of images and slower loading and the importance of communicating with the design team. Since lazy loading is a unique challenge in React, they give recommendations for implementing lazy loading and tools for tracking site usage. They talk about dealing with JavaScript payloads, bundle and load splitting, and automating performance tracking. They discuss different performance tracking tools. The panelists address the NIH bias (Not Invented Here) and the trend that designers tend to be willing to pay money for good tooling, while engineers are cheap. There have been great improvements in the marketplace for good tools, so much so that oftentimes buying the tools is cheaper than making them yourself. They finish by discussing the pros and cons of building vs. buying and the future of the frontend. Links LighthouseGatsbyAbove the fold optimizationsBelow the fold optimizationsCrumpSurvive JS on WebpackReact lazy load image component CalibreSpeedCurveBundle AnalyzerInspect Pack by Formidable LabsCypressGithub Actions Follow DevChat on Facebook and Twitter Picks Justin Bennett: Netlify Dev ProductsEasy Peasy Thomas Aylott: Displaced: Stories from the Syrian DiasporaReact Rewind Dave Ceddia: NotionUnderstanding By DesignAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 061: Should Companies Have a Dedicated Frontend Team?
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus CacheFly Panel Nader Dabit Lucas Reis Thomas Aylott Episode Summary Today the panel is discussing the necessity of companies having a dedicated frontend team. They begin by discussing the technologies that might be used by a dedicated frontend team. According to the panel, the necessity of a frontend team is determined by the size of the company. When you try to have a frontend team too soon, it ends up being a huge debacle, but once you get bigger and have multiple teams, it gets more useful. A company is ready for a dedicated frontend team when it is able to build with a common set of components. The panel discusses the concept of ownership in a company. Nader believes that things should be run where there is a team that’s in charge of building a component, and once the component has shipped, they are no longer in charge. The other panelists disagree with that method because they believe there is a danger of the project getting bloated. Thomas shares his experience with working for Facebook and Lucas talks about how he has previously set up his teams. They talk about the necessity of having a design system before having a React design system, and they all agree that it is useful Nader shares his experience with his brother working for Cartoon network and the design rules they had for the websites for each show like Dexter’s Lab and PowerPuff Girls. Since the panel agrees on the importance of consistency in visual communication and designs, they delve into deciding what is owned by the design system and what is shared between other teams, who maintains these things, and how to differentiate between the different kinds of components. They talk about the idea of Atomic Design in programming, separating component into categories called names like atoms, molecules, organisms, etc. Nader talks about his experience with this method. He found it difficult because components didn’t always fit cleanly into one category. The panel believes that it all comes back to ownership and it is important that companies are handling ownership well Links StorybookFrontendClouderaNext.jsGatsbyReact Native WebDoczMaterial Follow DevChat on Facebook and Twitter Picks Nader Dabit: React Native in Action by Nader Dabit Lucas Reis: Kickstarting a Library of Internal React Components for Multiple Teams by Javier Lefevre Thomas Aylott: The E-Myth RevisitedThe Design of Everyday ThingsAtomic Design by Brad Frost Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

RRU 060: Linked lists in the Wild: React Hooks with Conlin Durbin
Sponsors NetlifySentry use the code “devchat” for 2 months free on Sentry’s small planTriplebyte offers a $1000 signing bonusCacheFly Panel Nader DabitJustin BennettLucas ReisDave CeddiaCharles Max Wood Joined by Special Guests: Thomas Aylott, Conlin Durbin Episode Summary Conlin Durbin is a front end software engineer for a company called Lessonly and occasionally writes about React. Thomas Aylott is a web guy from the 90’s who was briefly on the React team, and he makes thingsthatdostuff.com and groovytiesquad.com. The panel discusses Conlin’s article Link Lists in the Wild: React Hooks. They begin by talking about the relationship between linked lists and React hooks. Linked lists are used under the hood to render hooks every time that they’re created and maintain integrity of the hook chain. They discuss the importance of knowing what goes on under the hood share their methods of learning. They give tips for learning on the job. The panel agrees that one of the best ways to learn is to teach. Conlin shares his experience working for Lessonly, a company that builds lesson-building software. The panel discusses WET (Write Everything Twice) vs DRY (Don’t Repeat Yourself) programming. They talk about when it is beneficial to have abstractions in code and when it is not. It’s also important to think about the humans that are going to be using it, and to write the code so that it’s humane. They praise good error messages that tell you exactly where you went wrong and how to fix it. They talk about the dangers of putting invariants everywhere, and finish by talking about ways to improve. Links Linked listReact FiberHooksBackboneJavaScriptReduxGatsbyFlowJake Archibald: In The Loop-JS Conf Asia 2018 (video)What the heck is the event loop anyway? (video)Practical 00 Design in Ruby, Sandi MetzStop trying to be so DRY, instead Write Everything Twice (WET)Sebastian Markbage: Minimal API Surface Area – Learning patterns instead of frameworksSomeone Is Changing Your CodeConlin Durbin username for most places is ‘wuz’, except Twitter for twitter it’s @CallMeWuz Follow DevChat on Facebook and Twitter Picks Justin Bennett: The 3 most effective ways to build trust as a leader articlePheonix Live View Lucas Reis: Pamela ZaveSmall Functions Considered Harmful article Dave Ceddia: New Redux courseKinesis Advantage 2 Keyboard Charles Max Wood: MicroConfBuzzSprout Thomas Aylott: Noflojs.orgThe Laws of Human Nature by Robert Greene Conlin Durbin: https://dev.to/Soft Skills EngineeringConlin’s Discord serverSpecial Guests: Conlin Durbin and Thomas Aylott. Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.