React Round Up

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.