javaScript on my docs

javaScript on my docshttps://docs.tannerr.dev/languages/javascript/Recent content in javaScript on my docsHugo -- gohugo.ioen-us<link>https://docs.tannerr.dev/languages/javascript/javascript/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://docs.tannerr.dev/languages/javascript/javascript/</guid><description>javascript # Notes # you cannot make the connectedCallback of a web component async becuase it doesn’t match the function signature of the htmlelement class you can make an async render() function when using .innerHTML is it dangerous and might allow for XSS, use .textContent does .textContent sanitize?? data-url html attributes are accessed with .dataset.url in js attributeChangedCallback(prop, value), web component method dont forget to import the web component classes in the app.</description></item><item><title/><link>https://docs.tannerr.dev/languages/javascript/js-snippets/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://docs.tannerr.dev/languages/javascript/js-snippets/</guid><description>1. Download Every Image on a Page # Tired of right-clicking one by one? [...document.images].forEach((img, i) => { fetch(img.src) .then(res => res.blob()) .then(blob => { const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `image-${i}.jpg`; a.click(); }); }); 🖼️ Boom—your gallery’s yours now. 2. Turn Any Page Into a Rainbow Disco # Perfect for annoying your coworkers or freaking out your friends. setInterval(() => { document.body.style.backgroundColor = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`; }, 100); 🌈 Please use responsibly.</description></item><item><title/><link>https://docs.tannerr.dev/languages/javascript/service_worker_cache/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://docs.tannerr.dev/languages/javascript/service_worker_cache/</guid><description>Service Worker Cache Issue # The Problem # CSS changes weren’t appearing after refresh. It seemed to require 2+ refreshes to see updates. Root Cause # The original fetch handler in sw.js had a bug: return cachedResponse || fetchPromise; Issue: JavaScript’s short-circuit evaluation. When cachedResponse exists: Returns cached (stale) response immediately fetchPromise runs in background and updates cache for the next request User sees old content until they refresh again This is why 2 refreshes were needed.</description></item></channel></rss>