Bruno Lorenco's guest appearances

Bruno Lorenco

React Round Up

Devchat.tv Episode Roundup

Mani Vaya

Patrick Stapfer

Jason Weimann

Chris Anderson

Rachel MacFarlane

Matt Bierner

Victor Savkin

Kathryn Grayson

Dave Ceddia

Aaron Gustafson

Paul Gray

Chris Toomey

Gopinath Chigakkagari

Chris Biscardi

Ori Zohar

OwlTail

Sponsors   Adventures in Devops   Sentry 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 Props   React Morph   React Hooks   Flip technique   Change blindness   Qartz composer   Origami   Keynote   Popmotion   Popmotion Popcorn   Node.JS   Designing Web Interfaces   Reduced motion preference   Follow DevChat on Facebook and Twitter Picks David Ceddia:   DevJoy   Thomas Aylott:   Lecture on Jung’s Typography   Thomas’ Youtube channel   Lucas Reis:   Information Theory for Intelligent People   Leslie Cohn-Wein:   Resilient Management by Laura Hogan   Spider-Man: Into the Spiderverse   Bruno Lourenco:   A-Frame React   Bruno’s React Finland talk 

<h2>Sponsors</h2> <ul> <li> <a href="https://devchat.tv/adventures-in-devops/" rel="nofollow" target="_blank">Adventures in Devops</a> </li> <li> <a href="http://sentry.io/" rel="nofollow" target="_blank">Sentry</a> use the code “devchat” for 2 months free on Sentry’s small plan </li> <li> <a href="https://devchat.tv/my-javascript-story/" rel="nofollow" target="_blank">My JavaScript Story</a> </li> </ul> <h3>Panel</h3> <ul> <li> David Ceddia </li> <li> Thomas Aylott </li> <li> Leslie Cohn-Wein </li> <li> Lucas Reis </li> </ul> With special guest: Bruno Lourenco <h3>Episode Summary</h3> 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 <ul> <li> <a href="https://reactjs.org/docs/render-props.html" rel="nofollow" target="_blank">Render Props</a> </li> <li> <a href="https://github.com/brunnolou/react-morph" rel="nofollow" target="_blank">React Morph</a> </li> <li> <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow" target="_blank">React Hooks</a> </li> <li> <a href="https://css-tricks.com/animating-layouts-with-the-flip-technique/" rel="nofollow" target="_blank">Flip technique</a> </li> <li> <a href="https://en.wikipedia.org/wiki/Change_blindness" rel="nofollow" target="_blank">Change blindness</a> </li> <li> <a href="https://developer.apple.com/documentation/quartz/quartz_composer" rel="nofollow" target="_blank">Qartz composer</a> </li> <li> <a href="https://origami.design/" rel="nofollow" target="_blank">Origami</a> </li> <li> <a href="https://www.apple.com/keynote/" rel="nofollow" target="_blank">Keynote</a> </li> <li> <a href="https://popmotion.io/" rel="nofollow" target="_blank">Popmotion</a> </li> <li> <a href="https://popmotion.io/popcorn/" rel="nofollow" target="_blank">Popmotion Popcorn</a> </li> <li> <a href="https://nodejs.org/" rel="nofollow" target="_blank">Node.JS</a> </li> <li> <a href="https://www.amazon.com/Designing-Web-Interfaces-Principles-Interactions/dp/0596516258" rel="nofollow" target="_blank">Designing Web Interfaces</a> </li> <li> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" rel="nofollow" target="_blank">Reduced motion preference</a> </li> </ul> Follow DevChat on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&amp;eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV" rel="nofollow" target="_blank">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en" rel="nofollow" target="_blank">Twitter</a> <h3>Picks</h3> David Ceddia: <ul> <li> <a href="https://www.devjoy.com/" rel="nofollow" target="_blank">DevJoy</a> </li> </ul> Thomas Aylott: <ul> <li> <a href="https://www.amazon.com/gp/product/B00G2CBJ0K/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&amp;psc=1" rel="nofollow" target="_blank">Lecture on Jung’s Typography</a> </li> <li> <a href="https://www.youtube.com/channel/UCZo0rCa6jiy8PrdK4TcOv5w?view_as=subscriber" rel="nofollow" target="_blank">Thomas’ Youtube channel</a> </li> </ul> Lucas Reis: <ul> <li> <a href="http://tuvalu.santafe.edu/~simon/it.pdf" rel="nofollow" target="_blank">Information Theory for Intelligent People</a> </li> </ul> Leslie Cohn-Wein: <ul> <li> <a href="https://abookapart.com/products/resilient-management" rel="nofollow" target="_blank">Resilient Management by Laura Hogan</a> </li> <li> <a href="https://www.imdb.com/title/tt4633694/" rel="nofollow" target="_blank">Spider-Man: Into the Spiderverse</a> </li> </ul> Bruno Lourenco: <ul> <li> <a href="https://github.com/supermedium/aframe-react" rel="nofollow" target="_blank">A-Frame React</a> </li> <li> <a href="https://www.youtube.com/watch?v=TszRBCc6DQ4&amp;list=PL-a9lBflNu2oW1lU7fUvW0oAnbj-mxk2a&amp;index=14" rel="nofollow" target="_blank">Bruno’s React Finland talk</a> </li></ul>

RRU 075: Animations and React Morphe with Bruno Lorenco

Sponsors  Adventures in Devops   Sentry 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 LourencoEpisode SummaryBruno 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 Props   React Morph   React Hooks   Flip technique   Change blindness   Qartz composer   Origami   Keynote   Popmotion   Popmotion Popcorn   Node.JS   Designing Web Interfaces   Reduced motion preference  Follow DevChat on Facebook and TwitterPicksDavid Ceddia:  DevJoy  Thomas Aylott:  Lecture on Jung’s Typography   Thomas’ Youtube channel  Lucas Reis:  Information Theory for Intelligent People  Leslie Cohn-Wein:  Resilient Management by Laura Hogan   Spider-Man: Into the Spiderverse  Bruno Lourenco:  A-Frame React   Bruno’s React Finland talk  Special Guest:  Bruno Lourenço. Advertising Inquiries: https://redcircle.com/brandsPrivacy &amp; Opt-Out: https://redcircle.com/privacy

<h2>Sponsors</h2><ul> <li> <a href="https://devchat.tv/adventures-in-devops/" rel="nofollow" target="_blank">Adventures in Devops</a> </li> <li> <a href="http://sentry.io/" rel="nofollow" target="_blank">Sentry</a> use the code “devchat” for 2 months free on Sentry’s small plan </li> <li> <a href="https://devchat.tv/my-javascript-story/" rel="nofollow" target="_blank">My JavaScript Story</a> </li> </ul><h3>Panel</h3><ul> <li> David Ceddia </li> <li> Thomas Aylott </li> <li> Leslie Cohn-Wein </li> <li> Lucas Reis </li> </ul>With special guest: Bruno Lourenco<h3>Episode Summary</h3>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<ul> <li> <a href="https://reactjs.org/docs/render-props.html" rel="nofollow" target="_blank">Render Props</a> </li> <li> <a href="https://github.com/brunnolou/react-morph" rel="nofollow" target="_blank">React Morph</a> </li> <li> <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow" target="_blank">React Hooks</a> </li> <li> <a href="https://css-tricks.com/animating-layouts-with-the-flip-technique/" rel="nofollow" target="_blank">Flip technique</a> </li> <li> <a href="https://en.wikipedia.org/wiki/Change_blindness" rel="nofollow" target="_blank">Change blindness</a> </li> <li> <a href="https://developer.apple.com/documentation/quartz/quartz_composer" rel="nofollow" target="_blank">Qartz composer</a> </li> <li> <a href="https://origami.design/" rel="nofollow" target="_blank">Origami</a> </li> <li> <a href="https://www.apple.com/keynote/" rel="nofollow" target="_blank">Keynote</a> </li> <li> <a href="https://popmotion.io/" rel="nofollow" target="_blank">Popmotion</a> </li> <li> <a href="https://popmotion.io/popcorn/" rel="nofollow" target="_blank">Popmotion Popcorn</a> </li> <li> <a href="https://nodejs.org/" rel="nofollow" target="_blank">Node.JS</a> </li> <li> <a href="https://www.amazon.com/Designing-Web-Interfaces-Principles-Interactions/dp/0596516258" rel="nofollow" target="_blank">Designing Web Interfaces</a> </li> <li> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" rel="nofollow" target="_blank">Reduced motion preference</a> </li> </ul>Follow DevChat on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&amp;eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV" rel="nofollow" target="_blank">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en" rel="nofollow" target="_blank">Twitter</a><h3>Picks</h3>David Ceddia:<ul> <li> <a href="https://www.devjoy.com/" rel="nofollow" target="_blank">DevJoy</a> </li> </ul>Thomas Aylott:<ul> <li> <a href="https://www.amazon.com/gp/product/B00G2CBJ0K/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&amp;psc=1" rel="nofollow" target="_blank">Lecture on Jung’s Typography</a> </li> <li> <a href="https://www.youtube.com/channel/UCZo0rCa6jiy8PrdK4TcOv5w?view_as=subscriber" rel="nofollow" target="_blank">Thomas’ Youtube channel</a> </li> </ul>Lucas Reis:<ul> <li> <a href="http://tuvalu.santafe.edu/~simon/it.pdf" rel="nofollow" target="_blank">Information Theory for Intelligent People</a> </li> </ul>Leslie Cohn-Wein:<ul> <li> <a href="https://abookapart.com/products/resilient-management" rel="nofollow" target="_blank">Resilient Management by Laura Hogan</a> </li> <li> <a href="https://www.imdb.com/title/tt4633694/" rel="nofollow" target="_blank">Spider-Man: Into the Spiderverse</a> </li> </ul>Bruno Lourenco:<ul> <li> <a href="https://github.com/supermedium/aframe-react" rel="nofollow" target="_blank">A-Frame React</a> </li> <li> <a href="https://www.youtube.com/watch?index=14&amp;list=PL-a9lBflNu2oW1lU7fUvW0oAnbj-mxk2a&amp;v=TszRBCc6DQ4" rel="nofollow" target="_blank">Bruno’s React Finland talk</a> </li> </ul>Special Guest: Bruno Lourenço. Advertising Inquiries: <a href="https://redcircle.com/brands" rel="nofollow" target="_blank">https://redcircle.com/brands</a> Privacy &amp; Opt-Out: <a href="https://redcircle.com/privacy" rel="nofollow" target="_blank">https://redcircle.com/privacy</a>