Webdev

In dynamic web applications (like those using HTMX, Hotwire, Turbo or React), there is this classic "stale reference" issue. As a quick example, consider the following javascript code that finds an element after receiving an event, and then deletes that element after 5 seconds. document.addEventListener("elementSwapped", () => { const timestampElements = document.querySelectorAll('[id^="el-last-saved-"]'); timestampElements.forEach(timestampElement => { if (!timestampElement.dataset.clearPending) { timestampElement.dataset.clearPending = 'true'; setTimeout(() => { timestampElement.remove(); }, 5000); }; }); }); While the logic is sound, the element reference el captured in setTimeout is likely becoming outdated before the 5 seconds are up. ...

You should know your layer well, but you should also know one layer below it a little bit, and you definitely need to know the shape of the layer that’s beneath that. – Godbolt’s rule by Corecursive Edit: Later on I realized it's the same Goldbolt who created a compiler explorer. Full stack web developers are sitting upon layers of abstractions and can often get lost due to the lack of understanding of the layers below. Understanding these "layers below" is what separates a developer who uses a framework from a developer who understands how web applications work. ...