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