5 ms·

jQuery is still quite relevant and helpful. Despite the hype with newer libraries, jQuery is used on 73% of _all_ websites. https://w3techs.com/technologies/ove

jQuery is still quite relevant and helpful. Despite the hype with newer libraries, jQuery is used on 73% of _all_ websites. https://w3techs.com/technologies/overview/javascript_library/all https://w3techs.com/technologies/overview/javascript_library... I often tell myself, ok, I'm going to just use vanilla JS for this one, but compared to jQuery, it's way too verbose. Try doing $('.my-elements').show() in vanilla js. The problem is the jQuery foundation has become too bureaucratic, making contributions harder. Example: https://github.com/globalizejs/globalize/pull/703 https://github.com/globalizejs/globalize/pull/703

ibdf 9y ago
I think that number is inflated by CMSs such as WP early adoption of jquery. I have used jQuery extensively and I agree that's still relevant, but jQuery Mobile and UI never really took off.
- collinmanderson 9y ago
  Yes, 28% of all websites use WordPress (over half of the 73%). It means a lot of WordPress theme developers use jQuery. Yes, jQuery Mobile never really became a thing, but jQuery UI has some pretty useful widgets (autocomplete, date picker, sortable, etc.)
codazoda 9y ago
That's actually a good example. My gut feeling was simply to write the following. document.getElementsByClassName("my-class")[0].style.display = 'block'; The PlainJS site mentions that it's not quite that simple and suggests writing your own show() and hide() functions if you're avoiding jQuery. https://plainjs.com/javascript/effects/hide-or-show-an-element-42/ https://plainjs.com/javascript/effects/hide-or-show-an-eleme...
- collinmanderson 9y ago
  Right, and that still doesn't handle applying the action to all _all_ items of that class. It would need to be something like this, though it still doesn't automatically handle inline vs block: document.querySelectorAll('.my-elements').forEach(function(el){el.style.display = 'block'}) And apparently there are issues even with that: https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ https://css-tricks.com/snippets/javascript/loop-queryselecto...
  - exizt88 9y ago
    For reference, this is how you do this in jQuery: $('.my-elements').show()
    - deleted 9y ago
      [deleted]
  - kibibu 9y ago
    Ok, I kinda got sniped on this. Here's a first pass at a micro lib to do it using Proxy object: const $ = (() => { function listProxy(arr) { return new Proxy(arr, { set: (t, p, v, r) => { for(let x of t) { x[p] = v; } }, get: (t, p, r) => { if(t.length > 0 && t[0][p] instanceof Function) { return (...args) => { Array.prototype.map.call(t, (x) => x[p](args)) }; } else { return listProxy( Array.prototype.map.call(t, (x) => x[p]) ); } } }) } return (sel, root) => { if(root === undefined) root = document; return listProxy(root.querySelectorAll(sel)); } })(); // use like this: $('.my-elements').className = 'Important'; $('.my-elements').style.color = 'Red'; $('.my-elements').classList.add('Another'); demo: https://codepen.io/anon/pen/RxGgNR https://codepen.io/anon/pen/RxGgNR
- drinchev 9y ago
  In this specific case jQuery's `show` is just giving you a shortcut to show/hide arbitrary elements. Try doing this with CSS, please. <div class="element"></div> .element { display: block; } .element.is-hidden { display: none; } document.getElementsByClassName("element")[0].classList.add( "is-hidden" ); You should never ask yourself "How can I accomplish that without jQuery", but rather "What would be the best way to do it!"
- bijection 9y ago
  To make that work for all elements of that class, you could rewrite it as document.querySelectorAll('.myclass') .forEach(el => el.style.display = 'block') The jQuery is still shorter, but the vanilla js is definitely manageable.
  - no_gravity 9y ago
    Unfortunately, querySelectorAll returns a NodeList, not an Array. So you cannot use forEach() on it.
    - hawkice 9y ago
      NodeList also implements forEach: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo...
      - collinmanderson 9y ago
        It's a very recent addition. IE11 doesn't have it for sure.
      - no_gravity 9y ago
        Not in Edge though.
        hawkice 9y ago
        The page I linked has a compatibility chart that says Edge 16 has it (no idea if that's a planned release, haven't ever used Edge).
        darepublic 9y ago
        You can use Array.prototype.forEach.call(nodelist, fn), or Arrays.from(nodelist).forEach
        9y ago
- taco_emoji 9y ago
  It's like a corollary to Greenspun's Tenth Rule [0], in that anytime I try to do something in vanilla JS, I just end up poorly re-inventing half of JQuery just to do it. [0] https://en.wikipedia.org/wiki/Greenspun%27s_tenth_rule https://en.wikipedia.org/wiki/Greenspun%27s_tenth_rule
  - franciscop 9y ago
    I ended up reinventing most of jQuery: https://umbrellajs.com/ https://umbrellajs.com/ But it was fun and I learned a lot, so there is that.
- aplummer 9y ago
  This comment is actually a fantastic example of why jQuery is so popular. Missing:
- krapp 9y ago
  Unfortunately, document.getElementsByClassName isn't universally supported[0], so even if you wanted to do it that way, it still wouldn't be that easy. Never is. [0]https://caniuse.com/#feat=getelementsbyclassname https://caniuse.com/#feat=getelementsbyclassname
leeoniya 9y ago
whenever i feel the need for jquery these days, i typically reach for the much smaller, faster, ie11+ https://github.com/franciscop/umbrella https://github.com/franciscop/umbrella
- saas_co_de 9y ago
  nice. thanks. despite the plainjs appeal in practice i still find that using jquery is faster, easier, and safer. the parts of it i want are very simple though. i can (and have) written my own replacements, but I don't want to throw my own one-off replacement into the projects I use, so having some kind of community library is much better.
- interfixus 9y ago
  From the author of the Picnic css framework. That bodes well for conciseness, documentation, and style.
invalidusernam3 9y ago
The biggest benefit that I've found for jQuery (and a lot of JS libraries) over vanilla is browser compatibility. I generally don't have time to check compatibility of every mildly complex piece of JS I write. Using a library often solves that issue
- drinchev 9y ago
  That was a relevant answer couple of years ago. These days you can achieve most with having a properly setup IDE-intellisense ( e.g. WebStorm ).
  - taco_emoji 9y ago
    Does that really solve the issue though? All the IDE can tell you is that some browser version doesn't support what you're doing, it doesn't write the polyfill for you.
    - drinchev 9y ago
      Most of the polyfills these days are pretty much syntax sugar & ES6 transpiling. If you do your code in non ES6 plain JS way, I'm quite sure the IDE will give you the benefits that you receive with jQuery.
      - newfoundglory 9y ago
        By "these days" do you mean "needed to support the latest version of each major browser"?
sideproject 9y ago
Just read through that issue thread on github. That makes me almost cry! Here's an awesome project (whether it's dated or not), and then there are all these people trying to make valid, good contributions, but for some reason (however valid they are) they have to go through all these red-tapes. I don't know where to stand. One side, maybe you need all these red-tapes so that you don't get in any trouble. But this makes me feel like things are not going to progress and people will eventually turn away. Haven't we already seen too many examples like this? Things start small, they get popular, people jump in to use, then things get political and it dies out.
Lazare 9y ago
That github thread was maddening to read. They actually got a lawyer to chime in with their explanation for why the new CLA is needed, and then we got this nonsense: > Among other changes, the updated CLA gives the Foundation the ability to re-license contributions under Apache 2.0. But they already said: > There is no need to get new signatures for old contributions So they're not planning on getting all old contributions to be updated to the new CLA, but they think the new CLA will let them relicense the entire code base under Apache 2.0. That's not how that works! But it gets worse, because when challenged the lawyer quotes the updated CLA language: > You understand and agree that the JS Foundation projects and your Contributions are public and that a record of the Contributions (including all metadata and personal information you submit with them) is maintained indefinitely and may be redistributed consistent with the JS Foundation’s policies and the requirements of the Apache v2.0 license where they are relevant. "You [...] agree that [...] your Contributions are public and that a record of the Contributions (including all metadata and personal information you submit with them) [...] may be redistributed consistent with [...] the requirements of the Apache v2.0 license where they are relevant." That's clearly saying that they may need to provide people with the record of your contribution in order to prove that, eg, the Apache v2.0 license is being complied with. It is not an agreement that your actual contribution is licensed (or can be relicensed) under the Apache v2.0 license. This is just magical thinking. You can't just mumble the words "Apache 2.0" somewhere in the general neighborhood of a legal document and have it magically relicense years of contributions. You certainly can't make people agree that metadata about your contribution can be shared with some people, and then expect that to magically change the license under which the contribution itself exists.
deleted 9y ago
[deleted]
COil 9y ago
Agree. And for quick prototyping it's also very useful.

ibdf 9y ago

I think that number is inflated by CMSs such as WP early adoption of jquery. I have used jQuery extensively and I agree that's still relevant, but jQuery Mobile and UI never really took off.

collinmanderson 9y ago
Yes, 28% of all websites use WordPress (over half of the 73%). It means a lot of WordPress theme developers use jQuery. Yes, jQuery Mobile never really became a thing, but jQuery UI has some pretty useful widgets (autocomplete, date picker, sortable, etc.)

codazoda 9y ago

That's actually a good example. My gut feeling was simply to write the following. document.getElementsByClassName("my-class")[0].style.display = 'block'; The PlainJS site mentions that it's not quite that simple and suggests writing your own show() and hide() functions if you're avoiding jQuery. https://plainjs.com/javascript/effects/hide-or-show-an-element-42/ https://plainjs.com/javascript/effects/hide-or-show-an-eleme...

collinmanderson 9y ago
Right, and that still doesn't handle applying the action to all _all_ items of that class. It would need to be something like this, though it still doesn't automatically handle inline vs block: document.querySelectorAll('.my-elements').forEach(function(el){el.style.display = 'block'}) And apparently there are issues even with that: https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ https://css-tricks.com/snippets/javascript/loop-queryselecto...
- exizt88 9y ago
  For reference, this is how you do this in jQuery: $('.my-elements').show()
  - deleted 9y ago
    [deleted]
- kibibu 9y ago
  Ok, I kinda got sniped on this. Here's a first pass at a micro lib to do it using Proxy object: const $ = (() => { function listProxy(arr) { return new Proxy(arr, { set: (t, p, v, r) => { for(let x of t) { x[p] = v; } }, get: (t, p, r) => { if(t.length > 0 && t[0][p] instanceof Function) { return (...args) => { Array.prototype.map.call(t, (x) => x[p](args)) }; } else { return listProxy( Array.prototype.map.call(t, (x) => x[p]) ); } } }) } return (sel, root) => { if(root === undefined) root = document; return listProxy(root.querySelectorAll(sel)); } })(); // use like this: $('.my-elements').className = 'Important'; $('.my-elements').style.color = 'Red'; $('.my-elements').classList.add('Another'); demo: https://codepen.io/anon/pen/RxGgNR https://codepen.io/anon/pen/RxGgNR
drinchev 9y ago
In this specific case jQuery's `show` is just giving you a shortcut to show/hide arbitrary elements. Try doing this with CSS, please. <div class="element"></div> .element { display: block; } .element.is-hidden { display: none; } document.getElementsByClassName("element")[0].classList.add( "is-hidden" ); You should never ask yourself "How can I accomplish that without jQuery", but rather "What would be the best way to do it!"
bijection 9y ago
To make that work for all elements of that class, you could rewrite it as document.querySelectorAll('.myclass') .forEach(el => el.style.display = 'block') The jQuery is still shorter, but the vanilla js is definitely manageable.
- no_gravity 9y ago
  Unfortunately, querySelectorAll returns a NodeList, not an Array. So you cannot use forEach() on it.
  - hawkice 9y ago
    NodeList also implements forEach: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo...
    - collinmanderson 9y ago
      It's a very recent addition. IE11 doesn't have it for sure.
    - no_gravity 9y ago
      Not in Edge though.
      - hawkice 9y ago
        The page I linked has a compatibility chart that says Edge 16 has it (no idea if that's a planned release, haven't ever used Edge).
        darepublic 9y ago
        You can use Array.prototype.forEach.call(nodelist, fn), or Arrays.from(nodelist).forEach
        9y ago
taco_emoji 9y ago
It's like a corollary to Greenspun's Tenth Rule [0], in that anytime I try to do something in vanilla JS, I just end up poorly re-inventing half of JQuery just to do it. [0] https://en.wikipedia.org/wiki/Greenspun%27s_tenth_rule https://en.wikipedia.org/wiki/Greenspun%27s_tenth_rule
- franciscop 9y ago
  I ended up reinventing most of jQuery: https://umbrellajs.com/ https://umbrellajs.com/ But it was fun and I learned a lot, so there is that.
aplummer 9y ago
This comment is actually a fantastic example of why jQuery is so popular. Missing:
krapp 9y ago
Unfortunately, document.getElementsByClassName isn't universally supported[0], so even if you wanted to do it that way, it still wouldn't be that easy. Never is. [0]https://caniuse.com/#feat=getelementsbyclassname https://caniuse.com/#feat=getelementsbyclassname

leeoniya 9y ago

whenever i feel the need for jquery these days, i typically reach for the much smaller, faster, ie11+ https://github.com/franciscop/umbrella https://github.com/franciscop/umbrella

saas_co_de 9y ago
nice. thanks. despite the plainjs appeal in practice i still find that using jquery is faster, easier, and safer. the parts of it i want are very simple though. i can (and have) written my own replacements, but I don't want to throw my own one-off replacement into the projects I use, so having some kind of community library is much better.
interfixus 9y ago
From the author of the Picnic css framework. That bodes well for conciseness, documentation, and style.

invalidusernam3 9y ago

The biggest benefit that I've found for jQuery (and a lot of JS libraries) over vanilla is browser compatibility. I generally don't have time to check compatibility of every mildly complex piece of JS I write. Using a library often solves that issue

drinchev 9y ago
That was a relevant answer couple of years ago. These days you can achieve most with having a properly setup IDE-intellisense ( e.g. WebStorm ).
- taco_emoji 9y ago
  Does that really solve the issue though? All the IDE can tell you is that some browser version doesn't support what you're doing, it doesn't write the polyfill for you.
  - drinchev 9y ago
    Most of the polyfills these days are pretty much syntax sugar & ES6 transpiling. If you do your code in non ES6 plain JS way, I'm quite sure the IDE will give you the benefits that you receive with jQuery.
    - newfoundglory 9y ago
      By "these days" do you mean "needed to support the latest version of each major browser"?

sideproject 9y ago

Just read through that issue thread on github. That makes me almost cry! Here's an awesome project (whether it's dated or not), and then there are all these people trying to make valid, good contributions, but for some reason (however valid they are) they have to go through all these red-tapes. I don't know where to stand. One side, maybe you need all these red-tapes so that you don't get in any trouble. But this makes me feel like things are not going to progress and people will eventually turn away. Haven't we already seen too many examples like this? Things start small, they get popular, people jump in to use, then things get political and it dies out.

Lazare 9y ago

That github thread was maddening to read. They actually got a lawyer to chime in with their explanation for why the new CLA is needed, and then we got this nonsense: > Among other changes, the updated CLA gives the Foundation the ability to re-license contributions under Apache 2.0. But they already said: > There is no need to get new signatures for old contributions So they're not planning on getting all old contributions to be updated to the new CLA, but they think the new CLA will let them relicense the entire code base under Apache 2.0. That's not how that works! But it gets worse, because when challenged the lawyer quotes the updated CLA language: > You understand and agree that the JS Foundation projects and your Contributions are public and that a record of the Contributions (including all metadata and personal information you submit with them) is maintained indefinitely and may be redistributed consistent with the JS Foundation’s policies and the requirements of the Apache v2.0 license where they are relevant. "You [...] agree that [...] your Contributions are public and that a record of the Contributions (including all metadata and personal information you submit with them) [...] may be redistributed consistent with [...] the requirements of the Apache v2.0 license where they are relevant." That's clearly saying that they may need to provide people with the record of your contribution in order to prove that, eg, the Apache v2.0 license is being complied with. It is not an agreement that your actual contribution is licensed (or can be relicensed) under the Apache v2.0 license. This is just magical thinking. You can't just mumble the words "Apache 2.0" somewhere in the general neighborhood of a legal document and have it magically relicense years of contributions. You certainly can't make people agree that metadata about your contribution can be shared with some people, and then expect that to magically change the license under which the contribution itself exists.

deleted 9y ago

[deleted]

COil 9y ago

Agree. And for quick prototyping it's also very useful.