Hi there!
https://www.youtube.com/watch?v=DNGGzwmfouU
So, here's the thing. This talk is media-heavy, and it hasn't been optimized at all for production. Plz don't visit this URL on any sort of metered connection, and also plz don't judge for having such poorly-performing slides for a talk about performance.
https://loving-khorana-77de08.netlify.com/
The talk includes links to various external articles and resources. Your best best is to scan the presentation markdown file to find them, but I'll list some of the more prevalent ones here:
- Monica Dinculescu's Input Delay tool
- "Performance Matters" by Hillel Wayne
- "React.memo() for Functional Components", from scotch.io
- Official React.memo docs
- "Scheduling in React" by Philipp Spiess
- React Podcast #35 with Matt Perry
- "Rendering Performance" by Paul Lewis
- CSSTriggers
- Vincent Riemer's perf test
- Tools for creating sprites: GIPHY Capture and EZGif
- "When should you be using Web Workers?" by Surma
The code samples shown in the presentation can be found in presentation/code. They may or may not actually run, they're just examples
The live-running code for the accordion can be found in src/components/Accordion.
My twist on the Twitter "like" animation can be found in src/components/LikeButton. The Sprite variant can be found in src/components/LikeSprite
My talk only briefly mentioned OffscreenCanvas, and truthtfully it's not something I have a perfectly-isolated demo for... but I use it extensively in Tinkersynth, and its source is open!
Thanks, hope you enjoyed my talk!