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