Hey G33ks,This post has been requested by Spike2147 and is about the fact that people seem to treat jQuery like it's some kind of god. He sends me this link to a post (in Dutch): http://www.sgxl.nl/te-lui-om-te-swipen-op-tinder-op-deze-manier-gaat-het-volledig-automatisch. The post is about a little script that will automagically swipe to the right on Tinder. Ah, good ol' Tinder... I'm glad that I never became desperate enough use you... Before we dive into the actual post, I'm gonna put a little disclaimer here: Now let's head into the actual post!

The problem

In the post linked above, it tells you to open up the Javascript console and add the following code:

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
var myVar = setInterval(function () {$("button.recsGamepad__button--like").click();},, 500);  

Now while this is totally valid working code, there is one big issue: It uses completely unnecessary code.Spike tells me:

You see so much little bullshit code that could easily be done without jQuery. The use of jQUery is basically being forced nowadays.

To which I completely agree. He also gave me this code on how it could be done without jQuery, just to show you what he means:

setInterval(function() { document.querySelector("button.recsGamepad__button--like").click(); },, 500);  

Again, this code it totally valid working code. So not only do you save 3 lines of code (or about 168 bytes - not counting jQuery itself, keep reading), it also makes it a lot more readable. "it's only 3 lines and 168 bytes, nobody cares" Well, that's sort of true, but that statement does ignore 1 thing: Your browser has to download the jQuery code as well, which is about 29725 bytes as well. This may not seem like a lot, but over time, it can actually add up. The fact that you need to fetch code from yet another server, makes it that the code is easier to break as well. All of the functions used in the code Spike send me are part of Javascript itself, therefore, are less likely to be unavailable. The jQuery code, on the other hand, is hosted somewhere else. This makes it so that it might not be compatible anymore in the future or if the other host goes down, the code downright breaks (even though googleapis.com won't go offline that easily).

How would this problem apply to other stuff?

This is quite simple actually: Unless you are planning to use jQuery for other stuff (for example AJAX requests, DOM updates or some other library/framework that relies on it), then you can go ahead, given that you won't be using just one simple function of it. It's like going to the weaponry, buying a swiss army knife but then only ever using the bottle opener tool. Why would you just have bought a bottle opener instead?You don't need some "expensive" (in this case, bandwidth and other resources) library, just for 1 function. If all you want to do is simple DOM updates (for example, updating the text in a label for example), you can use plain Javascript for that. Need to do the same thing but for different labels? write it into a simple function. This could easily save you and your visitor a tonne of bytes in the long run.Don't get me wrong, I use jQuery a lot (like a lot), but I don't use it when it's not necessary. If I only need 1 single function of it, then I'll either write that function myself or just rip it out of the jQuery code (and edit where needed) Feel free to use jQuery as you please, but please, try to cut down on the overuse of jQuery. If you don't have to load up the "expensive" jQuery, then you shouldn't. You should try to fallback where possible (of course, when you are using jQuery for other stuff, this is not necessary). so for example, when you aren't using jQuery for other stuff and/or only want to use it for 1 single function, you should try to fallback. instead of:

$("button.submit-btn")[0]  

use

document.querySelector("button.submit-btn")  

and instead of

$("#content").html("Do you even jQuery?");  

use

document.getElementById("content").innerHTML = "No, I fallback!";  

Easy as that!

Sum it up!

Use jQuery when:

• It will greatly decrease the complexity of your code (thus the savings will outweigh the costs)
• You are using something else that relies on it (for example: Bootstrap)

Do not use jQuery when:

• It won't greatly decrease the complexity of your code (thus the costs will outweigh the savings)
• You are not using something else that relies on it (for example: Bootstrap)
• You are writing a very simple code that will not get a lot more complex when not using jQuery

 
 
I hope you guys enjoyed the post, don't forget to hit like and share and I will see you in the next one! [g33kout]