Template Literals and Stencils

In the midst of being completely floored by today's content going over my head, template literals are shining through the confusion. DOM modification itself I was pretty fuzzy on for a while. Then I came across a real world reason to do so! I learned that you would want to write HTML in your JavaScript file in order to link JavaScript to specific elements in your HTML! How would you do that? By creating a template literal that not only created the HTML that doesn't already exist but to nest commands and links inside of it that only Javascript can understand. This makes your page much more dynamic and allows for content to change easily without rewriting any code.

For all of my crafters out there, this is equivalent to making a stencil! Image you want to draw a speech bubble around every month in your bullet journal. You could try to draw one around each month and hope that you get a similar size and shape. Or you could just make a single stencil (I've been 3D printing mine instead of cutting one on the Cricut) and use it to trace the same bubble every time. Same concept for template literals. You create a layout once that includes references to data that is gathered somewhere else. When that data changes nothing else in the code has to! Just using tic-marks `    ` with your references ${} inside will work!

So I'm just going to hold on to my satisfaction that at least one thing makes sense today...