Josh's 2019 Talk on Web Performance

Hi there!

Recording

https://www.youtube.com/watch?v=DNGGzwmfouU

Slides

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/

Resources and Links

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

Code Snippets

The code samples shown in the presentation can be found in presentation/code. They may or may not actually run, they're just examples

Accordion

The live-running code for the accordion can be found in src/components/Accordion.

Twitter Like Button

My twist on the Twitter "like" animation can be found in src/components/LikeButton. The Sprite variant can be found in src/components/LikeSprite

OffscreenCanvas

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!