[collinmanderson]

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...

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

[Lazare]

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.

[sideproject]

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.

[codazoda]

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-eleme...

[taco_emoji]

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

[franciscop]

I ended up reinventing most of jQuery: https://umbrellajs.com/

But it was fun and I learned a lot, so there is that.

[collinmanderson]

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-queryselecto...

[kibibu]

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

[exizt88]

For reference, this is how you do this in jQuery: $('.my-elements').show()

[bijection]

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.

[tracker1]

  Array.from(document.querySelectorAll('.myclass'))
    .forEach(el => el.style.display = 'block')

[collinmanderson]

Though ie11 doesn't have Array.from()

[bonesss]

Hrmmm... maybe someone should make a library that would smooth over browser differences and provide a consistent element selection syntax? Call it JavascriptSelection, or jSelection?

[emergie]

imho 'JavascriptQuery' or 'jQuery' sounds better, oh wait...

[tracker1]

I tend to polyfill older browsers, Array.from is a pretty small one. Sad thing is at a point where it's probably worth it to have 2-3 builds in place... 1 for legacy browsers, one for modern without modules, and one for modules/import/http2 support.

Just haven't taken the time... at least the main app I work on at work doesn't need to support IE11. Latest Edge,, Firefox, Safari and Chrome ... and Chrome is the primary target.

[no_gravity]

Unfortunately, querySelectorAll returns a NodeList, not an Array. So you cannot use forEach() on it.

[hawkice]

NodeList also implements forEach:

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

[collinmanderson]

It's a very recent addition. IE11 doesn't have it for sure.

[no_gravity]

Not in Edge though.

[hawkice]

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).

[aplummer]

This comment is actually a fantastic example of why jQuery is so popular.

Missing:

[krapp]

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

[drinchev]

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!"

[ibdf]

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]

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.)

[invalidusernam3]

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]

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]

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]

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]

By "these days" do you mean "needed to support the latest version of each major browser"?

[leeoniya]

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

[saas_co_de]

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]

From the author of the Picnic css framework. That bodes well for conciseness, documentation, and style.

[COil]

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