Hacker News Reader

Comment by maddyboo | Hacker News Reader

If you wanna get real fancy, you could replace

    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');

with

    document.documentElement.classList.replace('no-js', 'js');

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenLis...

View on HN

But in the first example, `js` is always added, even if `no-js` doesn't exist.

In the context of the presented html, the first line is <html lang="en" class="no-js"> . So, "no-js" does exist.

Indeed, but this is a case where you are reducing lines of source code in exchange for (slightly) increased coupling and fragility. By replacing remove/add with replace, you have now made an assumption that causes the replace line to be coupled to the html lang line where no coupling existed previously...

It's a well known convention (CTM), it's been part of a lot of front end application shells for years. Like other shells, an HTML boilerplate is somewhat expected to be a delicate, hand-optimised system. When it needs revising (which should be very rare) it should always be reasoned about as a whole. Its job is to bootstrap the front-end environment with maximum efficiency, and that means doing things that would be considered bad programming in another context.

I used to use no-js/js classes too, but stopped because scripts being enabled isn't a guarantee that a given external script will run successfully (adblockers, connection error, etc).

Nowaways I default to "js isn't available" state, and if the script(s) is able to load, then it augments or hydrates the static markup.

If you want to get less fancy, and even briefer, and incidentally fix the (non-)issue described by ryannevius and umvi in the adjacent subthread, you could use

  document.documentElement.className = 'js';

This would overwrite any other classes as well, which might be fine if you don’t have any but could lead to bugs later on if you forget about this behavior.

I don’t really think the point brought up by the other commenters is an issue. If the `no-js` class is missing, that’s a bug. Allowing it to be missing or present makes the behavior hard to reason about: If there is neither a `js` or `no-js` class, what is the desired behavior?

If the elimination of coupling is desired, maybe we should get rid of the `no-js` class altogether and interpret the absence of a `js` class to indicate no js. I think I like this solution best.

Wow thank you, tangentially I was trying to figure out how to change a hidden object to visible with tailwind and this seems like it would be perfect for that!

Reply on news.ycombinator.com