JavaScript
fromRaymondcamden
1 day agoAnimated video backgrounds via a Web Component and ColorThief
ColorThief library enables color extraction from video frames for dynamic background effects.
Today's browsers can handle most of the problems that frontend frameworks were originally created to solve. Web Components provide encapsulation, ES modules manage dependencies, modern CSS features like Grid and container queries enable complex layouts, and the Fetch API covers network requests. Despite this, developers still default to React, Angular, Vue, or another JavaScript framework to address problems the browser already handles natively. That default often trades real user costs -page weight, performance, and SEO - for developer convenience.
As CSS patterns go these days this one is delightfully low-tech, but in my work I've seen it have an outsized impact in ensuring usable experiences for increasingly-heavy websites when network or device conditions aren't ideal. This notion of delivering "optimistically" while planning for failure is something I've written about before, but the set-it-and-forget-it nature of this latest stab at it makes it my favorite yet.
Earlier this week, I took a look at parsing electronic comic books and sending them to GenAI as a way to get summaries of stories. That was a fun experiment and it actually worked quite well. I thought I'd take a stab at trying a similar approach with Chrome's Built-in AI support as well when I discovered that... wait... I don't actually have a way to view comics on the web. Or so I thought.