I built 6 JavaScript widgets with zero dependencies — here's what I learned from each

I've been on a mission to build the smallest possible versions of the UI widgets every website needs — things like a WhatsApp chat button, a cookie banner, a toast notification system. The constraint: zero dependencies, one script tag, works anywhere. Six widgets later, here's what actually surprised me. 1. WhatsApp Floating Button The widget: A floating button that opens a WhatsApp chat with a pre-filled message. Optional popup card with agent name, avatar, and online indicator. What I learned: The pulse animation fight My first version used a setInterval to toggle a CSS class for the pulse ring. It caused layout thrashing — the animation would stutter on low-end phones because JavaScript was fighting the browser's rendering pipeline. The fix was to move everything into a pure CSS @keyframes animation and only use JS to add/remove the class once. Obvious in hindsight, painful to debug. // Bad — JS fighting the renderer setInterval (() => { pulse . classList . toggle ( ' active ' ); },