10 things you didn't know a browser could do
summary
Forty-one-slide deck lists ten concrete browser tricks with code and demos: using document.querySelectorAll is static versus live getElementsByClassName, manipulating classes with classList, making any element editable with contentEditable, storing state with localStorage setItem/getItem (and sessionStorage vs cookies), capturing camera to canvas and saving a PNG with getUserMedia → canvas → toDataURL, SVG as backgrounds, CSS counters and calc, sprite animation with steps(), and Chrome’s memory/timeline tools that expose leaks and frame costs.
AI-written summary · about
chapters (15)
- 0:00Start
- 0:28Talk overview
- 1:12Select elements without jQuery
- 4:59Class list manipulation
- 6:08Static vs live node lists
- 8:17Content editable in browser
- 11:57Storing data with localStorage
- 20:20SVG as background images
- 21:48CSS counters
- 24:19CSS calc()
- 29:19Browser capabilities beyond basics
- 30:48Capturing photos with getUserMedia
- 31:50Animating sprites with CSS
- 35:46Debugging memory in Chrome
- 40:48Q&A
related talks
50mThe Browser is a Marvelous Thing
16m7 web technologies you might not know yet
06mTop 10 web things to know from Google I/O
26mLess Cruft, More Power: Leverage the Power of the Web Platform
53mBreaking Limits on Mobile HTML5
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
47mDOM Features You Didn’t Know Existed
50mHow to Rock Your Frontend Apps with 10 Awesome CSS Features!