6 ms·

This is incredible and such a great ad for jQuery. It's almost as if the creator(s) built that site ironically. So many examples are way clearer and easier in j

This is incredible and such a great ad for jQuery. It's almost as if the creator(s) built that site ironically. So many examples are way clearer and easier in jQuery, like this one: JQUERY: $(el).toggle(); IE8+: function toggle(el) { if (el.style.display == 'none') { el.style.display = ''; } else { el.style.display = 'none'; } } Gotta love that "modern" triple attribute repetition. From: https://youmightnotneedjquery.com/#toggle https://youmightnotneedjquery.com/#toggle

1123581321 3y ago
Toggle was a bit of a pitfall because the developer had to keep track of all the possible states prior to that line. It's easy to drop in as a function when needed in simple scripting (expanding faq sections, etc.)
extra88 3y ago
A more modern solution would be to use classList.toggle() or toggleAttribute(hidden).
mschuster91 3y ago
> Gotta love that "modern" triple attribute repetition. You can golf it down a bit: el.style.display=el.style.display == 'none' ? '' : 'none';
- anakaine 3y ago
  Even though I can appreciate the elegance of your solution, I'd prefer the former for clarity.
- OJFord 3y ago
  Surely el.style.display = el.style.display ? 'none' : '' (after toggling we've already obliterated any possible third value for it anyway, doesn't seem significant)
- Finbarr 3y ago
  Of course. Because that's infinitely better than: $(el).toggle();
frereubu 3y ago
IE8 is a bit of a straw man. We've dropped IE entirely when testing unless there's significant (1%+) usage for particular clients, but even the NHS in the UK has dropped IE11. Edit: https://caniuse.com/?search=classlist.toggle https://caniuse.com/?search=classlist.toggle and click Usage Relative.
fwip 3y ago
Plus, the jQuery example also accepts any selector for `el`, including ones that select multiple elements. The `toggle(el)` function only accepts a single element that you've already selected (e.g: via `document.getElementById("foo")`). You'd need to at least add a call to `querySelectorAll(...).foreach(toggle)`, if you wanted to preserve that piece functionality (which you admittedly don't always want).
piaste 3y ago
> It's almost as if the creator(s) built that site ironically. No, the site's advice is simply more narrow and fine-grained than a blunt 'never use jquery'. From the front page: > jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. > If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. This seems eminently reasonable to me. For a website, adding a jquery dependency costs little and you get much nicer, more maintainable code. But for a library, every transitive dependency introduces the possibility of future version conflicts for applications that depend on it. And at the same time, library code shouldn't need to change and grow nearly as much as application code. So library authors should strongly consider forsaking mere convenience for the sake of reducing dependency baggage. This isn't even JS-specific advice, it applies to most ecosystems.

1123581321 3y ago

Toggle was a bit of a pitfall because the developer had to keep track of all the possible states prior to that line. It's easy to drop in as a function when needed in simple scripting (expanding faq sections, etc.)

extra88 3y ago

A more modern solution would be to use classList.toggle() or toggleAttribute(hidden).

mschuster91 3y ago

> Gotta love that "modern" triple attribute repetition. You can golf it down a bit: el.style.display=el.style.display == 'none' ? '' : 'none';

anakaine 3y ago
Even though I can appreciate the elegance of your solution, I'd prefer the former for clarity.
OJFord 3y ago
Surely el.style.display = el.style.display ? 'none' : '' (after toggling we've already obliterated any possible third value for it anyway, doesn't seem significant)
Finbarr 3y ago
Of course. Because that's infinitely better than: $(el).toggle();

frereubu 3y ago

IE8 is a bit of a straw man. We've dropped IE entirely when testing unless there's significant (1%+) usage for particular clients, but even the NHS in the UK has dropped IE11. Edit: https://caniuse.com/?search=classlist.toggle https://caniuse.com/?search=classlist.toggle and click Usage Relative.

fwip 3y ago

Plus, the jQuery example also accepts any selector for `el`, including ones that select multiple elements. The `toggle(el)` function only accepts a single element that you've already selected (e.g: via `document.getElementById("foo")`). You'd need to at least add a call to `querySelectorAll(...).foreach(toggle)`, if you wanted to preserve that piece functionality (which you admittedly don't always want).

piaste 3y ago

> It's almost as if the creator(s) built that site ironically. No, the site's advice is simply more narrow and fine-grained than a blunt 'never use jquery'. From the front page: > jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. > If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. This seems eminently reasonable to me. For a website, adding a jquery dependency costs little and you get much nicer, more maintainable code. But for a library, every transitive dependency introduces the possibility of future version conflicts for applications that depend on it. And at the same time, library code shouldn't need to change and grow nearly as much as application code. So library authors should strongly consider forsaking mere convenience for the sake of reducing dependency baggage. This isn't even JS-specific advice, it applies to most ecosystems.