GIFs vs Web Components

on YouTube ↗23m

" summary

A component called X-gif extracts GIF frames into DOM blobs and uses requestAnimationFrame to play, reverse, change speed and sync multiple GIFs to BPM or live audio; synchronization works and beats stay aligned. Initial Polymer build ships as 91K (GIFs are ~5.5M) and Vulcanize only reduces it to 84K. Frameworks choke on 60 updates per second and attribute plumbing; native Shadow DOM and Chrome 36 web components restore interoperability and a true HTML-level API.

AI-written summary · about

" chapters (6)

1. 0:00Introduction to GIFs
2. 2:45Building a GIF aggregator
3. 4:46Engineering GIF manipulation
4. 9:07Developing the component
5. 12:58Framework challenges
6. 17:23Native web components

" related talks

• 23mGIFs vs Web ComponentsGlen Maddern · CascadiaJS 2014
• 30mWeb Components: Just in the Nick of TimeAlex Russell · Polymer Summit 2017
• 29mA GIF OdysseyGlen Maddern · MountainWest JavaScript 2014
• 24mThe Way of the WebBEN ISSA · Polymer Summit 2016
• 17mOh Sweet, GifRachelle Rathbone · CascadiaJS 2020
• 30mEmoji, Web Components, and ArtMonica Dinulescu · DinosaurJS 2017
• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014
• 44mWeb Components Can't Save Us. But You Can!Scott Jehl · SmashingConf New York 2024