Bringing Back the Blink Tag

on YouTube ↗20m

" summary

Recreates the old blink tag as a reusable web component built with HTML CSS and vanilla JavaScript using ES6 modules, published to NPM; it uses the shadow DOM for isolation, custom elements for markup and slots for injected content, limits blinking to three cycles in the demo, and bundles styles via import. Works in modern Chrome and Firefox, needs a polyfill or transpile for IE, imports cleanly into Angular React and Vue, and requires running on a local server to avoid CORS.

AI-written summary · about

" chapters (8)

1. 0:00Introduction and joke
2. 0:51JavaScript frameworks churn
3. 3:19What are web components
4. 7:33DOM and shadow DOM
5. 11:08Bringing back the blink tag
6. 14:21Slots and content projection
7. 16:31Browser compatibility
8. 18:37Demo and conclusion

" related talks

• 42mI Don’t Need No Stinkin’ Framework - Mastering Shadow DOMMartine Dowden · NDC Sydney 2019
• 48mBuilding reusable Web components with AngularSherry List · Jfokus 2019
• 39mWeb components - A whirlwind tourMartin Naumann · Jazoon TechDays Spring 2016 Bern
• 41mAccessibility of Web ComponentsMarcy Sutton Todd · Inclusive Design 24 2014
• 25mWeb components with Angular: The what, the why and the how.Ana Cidre · ngAtlanta 2019
• 31mNative Web Components - All Frameworks InvitedMichael Collins · UtahJS Conf 2018
• 33mBuild Web Components with Angular ElementsArjay Elbore · NG-MY 2019
• 42mThe Good, The Bad, The Web ComponentsZach Leatherman · SmashingConf Freiburg 2023