making your site noscript compatible

Sometimes there's no way around using JavaScript. Except for the JavaScript part (I hate JS), this is fine if it wasn't for the fact that some people just don't have JavaScript enabled. Users with NoScript or text-based browsers might run into difficulty using your website if you don't account for them.

If you want to elegantly work with both JS-enabled and -disabled users, simply using JavaScript DOM manipulation can get the job done, by only adding the relevant JavaScript-related HTML elements if JavaScript is enabled.

<!-- Original HTML !-->
<span id="switchContainer">
    This content can only be viewed with JavaScript enabled.
</span

// javascript
function loadJs() {
    let switchHTML = '<label class="switch"><input type="checkbox" id="switch"><span class="slider round"></span></label>';
    document.getElementById('switchContainer').innerHTML = switchHTML;
}
window.onload = loadJs;

If you have JavaScript enabled, you'll see a toggle below. This toggle represents something that you might want to do with JavaScript, such as a color scheme switcher. If JavaScript is disabled, in its place you'll see "This content can only be viewed with JavaScript enabled."

Update, as of August 2022: A lot's changed. I like JS and this site has undergone a full transition to Next.js. Haven't gotten around to making it noscript compatible, or if that is even possible.