Tagged Template Literals: The Feature Behind Every html`` You've Seen
That html`...` syntax in lit and friends is not magic - it is a plain JavaScript feature you can use to build an XSS-safe HTML helper in fifteen lines.
Software Engineer
I build web applications and share what I learn along the way.
Step-by-step programming tutorials on PHP, JavaScript, Laravel, WordPress and more.
That html`...` syntax in lit and friends is not magic - it is a plain JavaScript feature you can use to build an XSS-safe HTML helper in fifteen lines.
Focus trapping, Escape to close, a backdrop, top-layer stacking above every z-index - the native dialog element does all of it with zero JavaScript dependencies.
Type document.designMode = "on" in the console and the entire page becomes editable like a document. Absurdly useful for copy reviews, screenshots and layout testing.
Breaking out of two loops at once usually means ugly flag variables or refactoring into functions. JavaScript has had a cleaner answer since day one: labeled statements.
The old JSON round-trip for deep copies silently destroys Dates, Maps, Sets and circular references. structuredClone() handles all of them, and it is built into every modern browser.
Grouping an array of objects used to mean writing the same reduce() dance in every project. JavaScript finally does it natively, and the syntax is one line.