https://github.com/joshwcomeau/talk-2019

Slides for my 2019 talk, "Saving the Web 16ms at a Time"
https://github.com/joshwcomeau/talk-2019

Last synced: 6 days ago
JSON representation

Slides for my 2019 talk, "Saving the Web 16ms at a Time"

• Host: GitHub
• URL: https://github.com/joshwcomeau/talk-2019
• Owner: joshwcomeau
• License: mit
• Created: 2019-03-10T14:56:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T17:54:12.000Z (almost 2 years ago)
• Last Synced: 2024-08-05T09:15:26.826Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 66.9 MB
• Stars: 52
• Watchers: 4
• Forks: 4
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://raw.githubusercontent.com/joshwcomeau/talk-2019/master/presentation/index.mdx) markdown file to find them, but I'll list some of the more prevalent ones here:

- Monica Dinculescu's [Input Delay](https://input-delay.glitch.me) tool

- ["Performance Matters"](https://www.hillelwayne.com/post/performance-matters) by Hillel Wayne

- ["React.memo() for Functional Components", from scotch.io](https://scotch.io/tutorials/react-166-reactmemo-for-functional-components-rendering-control)

- [Official React.memo docs](https://reactjs.org/docs/react-api.html#reactmemo)

- ["Scheduling in React"](https://philippspiess.com/scheduling-in-react/) by Philipp Spiess

- [React Podcast #35 with Matt Perry](https://reactpodcast.simplecast.fm/35)

- ["Rendering Performance"](https://developers.google.com/web/fundamentals/performance/rendering/) by Paul Lewis

- [CSSTriggers](https://csstriggers.com)

- Vincent Riemer's [perf test](https://codepen.io/joshwcomeau/pen/yrPzWO)

- Tools for creating sprites: [GIPHY Capture](https://giphy.com/apps/giphycapture) and [EZGif](https://ezgif.com/gif-to-sprite)

- ["When should you be using Web Workers?"](https://dassur.ma/things/when-workers/) by Surma

### Code Snippets

The code samples shown in the presentation can be found in [presentation/code](https://github.com/joshwcomeau/talk-2019/tree/master/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](https://github.com/joshwcomeau/talk-2019/tree/master/src/components/Accordion).

### Twitter Like Button

My twist on the Twitter "like" animation can be found in [src/components/LikeButton](https://github.com/joshwcomeau/talk-2019/tree/master/src/components/LikeButton). The Sprite variant can be found in [src/components/LikeSprite](https://github.com/joshwcomeau/talk-2019/tree/master/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](https://github.com/joshwcomeau/tinkersynth), and its source is open!

---

Thanks, hope you enjoyed my talk!