RRU 040: Mastermind Groups and Staying Current with Sean Merron

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.

9 Heinä 201954min

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.

2 Heinä 201937min

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.

25 Kesä 201949min

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.

18 Kesä 201955min

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.

11 Kesä 201941min

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.

4 Kesä 201948min

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.

28 Touko 201954min

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.

21 Touko 201949min