My approach with this website is to write as much of the HTML, CSS, and JavaScript as possible myself. I even write the RSS feed by hand. Which can get somewhat tedious, as especially HTML can be very repetitive, requiring e.g. the same header and footer on every page.

Additionally, this website features a lot of nice little stylised elementsLike this note., which require somewhat intricate HTML and CSS to create. It would be tedious and repetitive to write the same HTML every time, and so — naturally inclined as a programmer to automate repetitive tasks — I searched for a solution.

It would have been easiest to just be able to create a new HTML elementWhich is technically possible., but this didn't seem fit my exact use case and also seemed to require more work.

So I created my own solution.

The solution

The raw HTML for the first note on this page looks like this:

<span class="note">
    <input id="note0" type="checkbox">
        <label for="note0">
            <sup title="Like this note.">note</sup>
        </label>
    <span>Like this note.</span>
</span>

But with my approach I can just write this:

<span class="note">Like this note.</span>

The JavaScript code that accomplishes that looks like this:

var notes = document.getElementsByClassName("note");
for (var i = 0; i < notes.length; i++) {
    var text = notes[i].innerHTML;
    var alt = notes[i].getAttribute("alt");
    if (alt === null) {
        alt = text;
    }
    notes[i].innerHTML = `<input id="note${i}" type="checkbox"><label for="note${i}">`
        + `<sup title="${alt}">note</sup></label><span>${text}</span>`;
}

All in all it's pretty simple, actually. We first get all elements with the class note, then iterate over them and replace the already present inner HTML (the note text) with our more complicated HTML. We can also set the alt attribute to get a different "alt text" when hovering over the note, which can be usefule when e.g. including a link in the note text.

The JavaScript is executed once on page load, which obviously slows the page loadOr rather increases the time until it looks right. down a bit, but it's not really noticeable. There larger impact is the fact that the website now requires JavaScript to look right. But in the worst case — someone having JavaScript disabled — we just have some coloured text in the middle of our text, as the span element is still there.

Another use case

I also do a similar thing with the footer. In the raw HTML it looks like this:

<footer></footer>

But as you can see at the bottom of this page, the footer includes actual content. This is because I use the same approach as above and insert the content with JavaScript. This allows me to easily change the footer and, most importantly, automatically update the year.

The only downside in this case is that, if JavaScript were disabled, we'd just get an empty footer. But that is a sacrifice I'm willing to make.