Monster Apps: Meatscope + Polymon

on YouTube ↗28m

" summary

Builds two web apps: Meatscope (selfie GIF maker) and Polymon (location QR-based monster game). Uses navigator.mediaDevices/getUserMedia, canvas drawImage scaling and a filmstrip trick to cut per-frame capture cost 50ms→0.5ms, moves GIF encoding into a web worker to drop render time 40s→100ms, stores GIFs in-browser with PouchDB storage, and uses input type=file capture as a Safari fallback for QR scanning. Adds declarative route-based lazy loading to shave first paint from ~1.25s to 275ms.

AI-written summary · about

" chapters (6)

1. 0:00Intro
2. 3:08Media Capture Streams
3. 10:55Web Workers
4. 14:19App Storage
5. 17:32Selfie Gifts
6. 22:11Web Cam

" related talks

• 39mProgressive what appsPatrick Kettner · NDC Sydney 2017
• 28mBuilding a Performant Web Application in 2018Jem Young · Uphill Conf 2018
• 41mYour Browser is Pooped: Using Web Workers To Create A Browser-Based Barcode ScannerDrew DeCarme · Philly ETE 2023
• 27mSmooth Moves: Rendering at the Speed of Right ®Jason Miller, Adam Argyle · Chrome Dev Summit 2018
• 37mPwototypingAdam Argyle · JSCamp Barcelona 2019
• 38mFlutter Web in actionJoachim Böhmer · Flutter Vikings 2022
• 32mPractical Performance Tips Building Progressive Web AppsNarendra Shetty · React Amsterdam 2017
• 39mPerformance issues: the usual suspectsA. Moureaux · React Native EU 2022