<template>: The Content Template element

I'm using the <template> tag heavily in Timelinize[0], which has a fairly sophisticated UI that I'm writing in vanilla JS -- not even jQuery. I use a few libraries (for mapping, datetime, and Bootstrap+Tabler for some nice styles), but that's it.

I wrote some boilerplate JS, yes, but I have complete control over my frontend, and I understand how it works, and I don't need to compile it.

Anyway, it works well so far! The <template> tag is a great way to lay out components and then fill them in with simple JS functions.

One nuance is documented in my code comments:

    // Ohhhhhh wow, we need to use firstElementChild when cloning the content of a template tag (!!!!):
    // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template#avoiding_documentfragment_pitfalls
    // I spent way too long on this.
    const elem = $(tplSelector);
    if (!elem) return;
    return elem.content.firstElementChild.cloneNode(true);

Once I figured that out, it's been smooth sailing and very powerful.

Oh, but I haven't cleaned up my code at all yet because I was just experimenting/hustling, so it's a bit spaghetti :) If you go looking, don't mind the mess.

---

[0]: https://github.com/timelinize/timelinize - a self-hosted application for bringing together all your data on your own computer and organizing it onto a single timeline: social media accounts, photo libraries, text messages, GPS tracks, browsing history, and more. Almost ready for its debut...

What's Tabler?

It's this: https://tabler.io/admin-template

Still highly unstable between versions, but for being free, it looks really good and is very flexible. I've been pleased with it for this project.

Seems to me a lot of what Tabler does you could do easily today in "vanilla" CSS Grid, which is also even more flexible. (I have done some very dynamic dashboards with simple CSS class changes and CSS Grid. You can do so much just changing grid-template-areas, and I really like its feel as an ASCII diagram of the layout that you want so I think it's also easy to scan a lot of layout variations in a CSS file to see which one is which.)

At this point I've been ditching almost every other type of layout (Bootstrap's Grid, Flexbox, etc) in most places for just "vanilla" CSS Grid and I think it is fantastic. I think it is well worth learning if you haven't yet.