journal

scripts

JavaScript is often misused, adding complexity where it isn’t necessary when it should serve to enhance rather than hinder the viewing of content on the web. While it may be required to interact with a web app, it shouldn’t prevent you from reading a simple article.

There is also a lack of transparency in that the average user is oblivious as to what the various scripts in a website are doing in the background.

As I’m currently reintroducing Javascript into this site, I’ve decided to write down the ways it is being utilised.

abbreviations

This is an experiment with the abbr element. The element currently seems to have no functional purpose beyond semantics. Of course you can add the abbreviation’s expanded form in the title attribute, which appears when the cursor hovers over the element. However, that’s not useful on mobile devices so I added a toggle to allow the element’s content to alternate between abbreviation and expanded form when it is clicked/tapped.

Currently, this causes accessibility issues:

Clickable elements must be focusable and should have interactive semantics. Learn more

Try this as an example 🖙 HTML

const a = Object.values(document.getElementsByTagName("abbr"))
for (const x of a) {
x.dataset.abbr = x.innerHTML
x.dataset.toggle = 0
x.onclick = (_) => {
x.dataset.toggle = +!(+x.dataset.toggle)
}
}

timestamps

On project pages, some time-tracker data in the header — upper-right corner on landscape orientations. This includes the time and date the project was last updated. I added a label that displays the elapsed time between that last update and the current time.

This also appears on the homepage footer to indicate how recently was this site updated.

Example:

<output class="t" data-updated="2022-08-18T08:23:11.000Z"></output>
function ago(d) {
const units = {
year: 315576E5,
month: 26298E5,
week: 6048E5,
day: 864E5,
hour: 36E5,
minute: 6E4,
second: 1E3,
};
const m = +d - new Date();
if (isNaN(m)) return "";
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
const x = Math.abs(m);
for (const u in units) {
if (x > units[u] || u === "second") {
return rtf.format(Math.round(m / units[u]), u);
}
}
}

const t = document.getElementById("t")
if (t !== null && t.dataset.updated !== null) {
t.innerHTML = `(${ago(new Date(t.dataset.updated))})`
}

misc

I’ve scattered a few little easter eggs across pages. One example is in Eau where a message requesting the reader to remind me to drink more water appears if the data suggests I’m more dehydrated than usual. These are completely inconsequential.

forward

I may continue to add or remove scripts as this site evolves and will update this page accordingly. Currently, there are a few ideas I would like to experiment with:

The calendar system I use in the site is Arvelie. I’m fond of its format but isn’t quite useful to those unfamiliar with it. Currently, all Arvelie elements have Gregorian conversions in their datetime attributes. Perhaps I’ll do something similar to abbreviation toggles.

Numerical values and non-Arvelie dates could be displayed based on browser locale. Conversions on mouseover? 🤔

Automatic hiding of select items behind content warnings based on user-provided preferences.