7 ms·

If you wanna get real fancy, you could replace document.documentElement.classList.remove('no-js'); document.documentElement.classList.add('js'); with

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/DOMTokenList/replace https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenLis...

ryannevius 5y ago
But in the first example, `js` is always added, even if `no-js` doesn't exist.
- C4stor 5y ago
  In the context of the presented html, the first line is <html lang="en" class="no-js"> . So, "no-js" does exist.
  - umvi 5y ago
    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...
    - playpause 5y ago
      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.
spookyuser 5y ago
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!
- butt__hugger 5y ago
  Don't use Tailwind, it's garbage.
  - craftinator 5y ago
    And comments like this are why I no longer do any web programming.
    - postalrat 5y ago
      How meta
      - craftinator 5y ago
        They may be right, they may be wrong, but I'll never know which. It's the schrodinger's cat of programming.
  - spookyuser 5y ago
    But I like it!
  - alpaca128 5y ago
    As someone not doing web development all day, to me it's much closer to how CSS should have been from the start. I still find it a bit too overloaded thanks to many years of piling more features on a standard that has to keep backwards compatibility, but that's another problem.
tobr 5y ago
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';
- maddyboo 5y ago
  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.
wildpeaks 5y ago
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.

ryannevius 5y ago

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

C4stor 5y ago
In the context of the presented html, the first line is <html lang="en" class="no-js"> . So, "no-js" does exist.
- umvi 5y ago
  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...
  - playpause 5y ago
    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.

spookyuser 5y ago

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!

butt__hugger 5y ago
Don't use Tailwind, it's garbage.
- craftinator 5y ago
  And comments like this are why I no longer do any web programming.
  - postalrat 5y ago
    How meta
    - craftinator 5y ago
      They may be right, they may be wrong, but I'll never know which. It's the schrodinger's cat of programming.
- spookyuser 5y ago
  But I like it!
- alpaca128 5y ago
  As someone not doing web development all day, to me it's much closer to how CSS should have been from the start. I still find it a bit too overloaded thanks to many years of piling more features on a standard that has to keep backwards compatibility, but that's another problem.

tobr 5y ago

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';

maddyboo 5y ago
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.

wildpeaks 5y ago

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.