scripts

index

On the homepage, a script goes through the index items and tags items that have been updated within the past week with the class name recent. This adds a small “+” to the item.

tooltips

Tooltips are sprinkled throughout the site. They appear on mouseover and follow the cursor.

e.g. Hover over me

<span data-tip="Hello!">Hover over me</span>

Tooltips are currently available for <abbr> and <time> elements, and footnotes.

time

Time elements can be hovered over to show the elapsed time span from their respective timestamps to the present. Alternatively, this could also be displayed as part of the copy. Additionally, timestamps are formatted according to browser locale.

e.g. 2022-08-18 (

You have JavaScript disabled

)

<time datetime="2022-08-18T08:23:11Z">2022-08-18</time>
<output class="t" data-time="2022-08-18T08:23:11Z"></output>

numbers

Numbers are displayed according to browser locale.

e.g. 1.618 1234

<v-n>1.618</v-n>
<v-n>1234</v-n>

names

Sometimes I want to only display a person’s surname for stylistic reasons but don’t want to make it too vague. Like if I mention Swift, I could be referring to the famous writer Jonathan Swift or some tailor of Lilliputian note.

e.g. Josh Avanier

<p-name>
  <f-name>Josh</f-name>
  <l-name>Avanier</l-name>
</p-name>

Josh Avanier

<!-- format "full" is used to display the name as is -->
<p-name data-format="full">
  <f-name>Josh</f-name>
  <l-name>Avanier</l-name>
</p-name>

This is experimental. There are cases of foreign names where the first and last names are swapped, middle names, honorifics, and where a form of a name with some abbreviation is the most widely used, like John Ronald Reuel Tolkien.

stories

The Atelier uses OpenStories by ddddddddʣzzz, which I first saw on Mu-An Chiou’s site. What it does is it renders a Instagram Story-esque slideshow element that shows you the 50 most recent images in the atelier (parsed from a JSON feed), as an alternative quick and cursory glance at what you may have missed. I might keep or remove this; still feeling it out.

mathml

At this time, the MathML notes page uses MathJax to render formulas. I was going to integrate MathML throughout the site, particular in the worldbuilding sections, but some rendering inconsistencies between browsers made me fall back to just using pseudocode for now. This might change if support for MathML improves.

eggs

Some pages have inline scripts for specific functionality primarily in the form of small easter eggs.

compatibility

All JS features and Web APIs I’ll use in this site are ones compatible with and tested on the latest stable releases of Firefox and Vivaldi on Debian. I care not for other pedestrian browsers and operating systems. This page will be updated accordingly as the scripts evolve.