JavaScript

The usage of JS on this site #

I deeply respect the desire to avoid using JavaScript when browsing the web. I designed this site to gracefully fall back in functionality should JavaScript be disabled. These changes only concern minor enhancements that cannot be achieved with HTML and CSS alone.

The following features are currently achieved with JavaScript and are therefore unavailable when JavaScript is disabled:

1. Saving darkmode / light mode settings: Storing user preferences between page changes requires setting a value in localStorage, which requires JavaScript. If JS is disabled, the site will therefore fall back to the user’s system preference. The following code is used for this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

document.addEventListener('DOMContentLoaded', () => {
    const cb = document.getElementById('theme-switch');
    if (!cb) return;

    const has = (c) => document.documentElement.classList.contains(c);
    if (has('theme-light') || has('theme-dark')) {
        cb.checked = has('theme-dark');
    } else {
        cb.checked = false;
    }

    cb.addEventListener('change', () => {
        const theme = cb.checked ? 'dark' : 'light';
        document.documentElement.classList.remove('theme-light', 'theme-dark');
        document.documentElement.classList.add('theme-' + theme);
        try { localStorage.setItem('theme', theme); } catch (e) { }
    });
});

2. Closing the navbar menu on click outside: While it is possible to implement an overflow hamburger menu without JS, closing it by clicking anywhere outside is impossible, to the best of my knowledge. Therefore, nothing happens in this case, and the user must manually click the small x button. When JavaScript is enabled, the following code is executed:

1
2
3
4
5
6
7
8

document.addEventListener("click", function(event) {
    const navToggle = document.getElementById("nav-toggle");
    const nav = document.querySelector(".nav");

    if (navToggle.checked && !nav.contains(event.target)) {
        navToggle.checked = false;
    }
});

Improving this further #

If you are aware of a way to get around these limitations that require JS for now, please let me know! Besides enabling a good reader experience without JS, I enjoy playing around with HTML and CSS to achieve such goals.