Summary: <p dir="ltr"><strong>In this episode of React Round Up Charles Max Wood interviews speakers at JAMstack Conf SF. Mandy Michael gives a talk about responsive typography and variable fonts. Mandy explains what variable fonts are and how they can be used to shrink, stretch and do some very fun and creative thing with them. They discuss how to use them and Mandy explains some of the demos from her talk. </strong></p> <p> </p> <p dir="ltr"><strong>Charles asks Mandy what some of the things were that she had to cut from her talk. She had to cut a few longer demos, details and performance improvements that can be made with responsive typography. Mandy shares what she is working on now with responsive typography and explains how much fun she has had expressing herself through variable fonts. To see more of Mandy’s demos and to learn more about responsive typography and variable fonts see the links below. </strong></p> <p> </p> <p dir="ltr"><strong>Next, Charles interviews Shawn Erquhart work runs the Netlify CMS project. Charles shares his experience using Netlify and Shawn addresses some of the issues Charles has come across. Charles does say the using Netlify is simple, clean and nice. Shawn shares the origin story of Netlify. They discuss what it means to be a git-based content management system. </strong></p> <p> </p> <p dir="ltr"><strong>They discuss how to contribute to the Netlify CMS open source project. Charles mentions his book and they discuss how contributions to open source projects like these are a great way to get a job. Shawn explains how to get started implementing Netlify CMS and how they target different static site generators.</strong></p> <p dir="ltr"><strong>Finally, Charles talks with Tammy Everts. Tammy gives a listeners a sneak peek into her talk about website performance, more specifically JavaScript performance. Charles discusses the performance of Devchat.tv and Google Lighthouse scores. Tammy explains that while Google Lighthouse is good it isn’t completely reliable and can miss chunks of time when your JavaScript is failing and you have unhappy users.</strong></p> <p dir="ltr"><strong>Tammy shares ways to drill down and see how your JavaScript is behaving in the wild. She talks about blocking Javascript which every developer is familiar with and non-blocking JavaScript that has high blocking CPU time which makes for janky sites. Tammy and Charles discuss what CPU is and what it measures. Tammy names resources and tools to help avoid this problem. </strong></p> <p dir="ltr"><strong>Rules of thumb for avoiding these issues are explained by Tammy. First, Reduce, make sure all the JavaScript needs to be there. Next, Monitor, track your metrics. She also suggests working with vendors and maintaining a performance budget for metrics that matter. The interview ends with a little about Speedcurve and what they do. Tammy is the CXO of Speedcurve. </strong></p> <h3 dir="ltr"><strong>Panelists</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong>Charles Max Wood</strong></p> </li> </ul> <h3 dir="ltr"><strong>Guest</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong>Mandy Michael</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Shawn Erquhart</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Tammy Everts</strong></p> </li> </ul> <h3 dir="ltr"><strong>Sponsors</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="http://nxplaybook.com/">NxPlaybook.com</a> - Use code ‘NXDEVCHAT’ for 50% off the official<a href="https://nx.dev/React"> https://nx.dev/React</a> Advanced Workspaces course!</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 small plan</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.cachefly.com/">Cachefly</a></strong></p> </li> </ul> <h3 dir="ltr"><strong>Links</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.netlify.com/">https://www.netlify.com/</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.netlifycms.org/">https://www.netlifycms.org/</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://twitter.com/erquhart">https://twitter.com/erquhart</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://jamstackconf.com/sf/">https://jamstackconf.com/sf/</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://variablefonts.dev/">https://variablefonts.dev/</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://codepen.io/collection/XqRLMb/">https://codepen.io/collection/XqRLMb/</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://twitter.com/Mandy_Kerr?">https://twitter.com/Mandy_Kerr?</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://speedcurve.com/">https://speedcurve.com/</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://twitter.com/tameverts?">https://twitter.com/tameverts?</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.facebook.com/React-Round-Up">https://www.facebook.com/React-Round-Up</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://twitter.com/reactroundup">https://twitter.com/reactroundup</a></strong></p> </li> </ul>
