Let's make sure we have jQuery
-
I
grep
-ed all the jquery-related scripts in a page on a wordpress site. I smushed them all together and presented them here in order in which they appear. In reality, there are other (needless) scripts and content in between them. This is loaded in each page, BTW.<!-- NO. 1 --> <script type='text/javascript' src='https://website.com/wp-includes/js/jquery/jquery.js'></script> <script type='text/javascript' src='https://website.com/wp-includes/js/jquery/jquery-migrate.min.js'></script> <script type='text/javascript' src='https://website.com/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js'></script> <script type='text/javascript' src='https://website.com/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js'></script> <!-- NO. 2 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type='text/javascript' src='https://website.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js'></script> <script type='text/javascript' src='https://website.com/wp-content/plugins/gs-logo-slider/js/jquery.bxslider.min.js'></script> <script type='text/javascript' src='https://website.com/wp-content/plugins/gs-logo-slider/js/jquery.easing.1.3.js'></script> <!-- NO. 3 --> <script type='text/javascript' src='https://website.com/wp-content/themes/zeyn_child_theme/js/jquery-2.2.3.min.js'></script> <script type='text/javascript' src='https://website.com/wp-includes/js/jquery/ui/core.min.js'></script> <script type='text/javascript' src='https://website.com/wp-includes/js/jquery/ui/widget.min.js'></script> <script type='text/javascript' src='https://website.com/wp-includes/js/jquery/ui/position.min.js'></script> <script type='text/javascript' src='https://website.com/wp-includes/js/jquery/ui/menu.min.js'></script> <script type='text/javascript' src='https://website.com/wp-includes/js/jquery/ui/selectmenu.min.js'></script> <script type='text/javascript' src='https://website.com/wp-content/themes/zeyn_child_theme/js/jquery.dataTables.js'></script> <script type='text/javascript' src='https://website.com/wp-content/themes/zeyn/js/jquery.appear.min.js'></script> <script type='text/javascript' src='https://website.com/wp-content/themes/zeyn/js/jquery.counto.min.js'></script> <script type='text/javascript' src='https://website.com/wp-content/plugins/lightbox-plus/js/jquery.colorbox.1.5.9-min.js'></script>
I count 3 instances of jQuery downloaded and loaded over each other. All different (major) versions.
Why is an ajax call working in production and breaking in dev? Could it be that dev errors out and ends up loading a different version of jQuery than production?
WHO KNOWS!?
-
On a single site?
-
@cartman82 said in Let's make sure we have jQuery:
All different (major) versions.
What version is the first, unnumbered one?
-
@dkf said in Let's make sure we have jQuery:
What version is the first, unnumbered one?
v1.11.3, apparently.
@WPT said in Let's make sure we have jQuery:
On a single site?
On a single page of single site.
-
I'm going to guess a whole lot of copypastad stack overflow code, each with its own jquery include
-
@Jaloopa either that id bridging together things onto one page that only work with the special snowflake version of jQuery they were written for and never updated to more recent ones.
-
@Arantor surely jQuery migrate and the latest version of jQuery would be sufficient?
-
Good way to be sure there is jQuery alright. I mean, what if some browser has a quirk and jQuery is not loaded, hmm? Or what if there is a network timeout? Better load two of them, one will stick I'm sure. Maybe three loads of jQuery is a bit excessive, unless this is a website for a bank, where they want to be sure it works well under adversarial conditions. Didn't know Wordpress had banking plugins, it sure has come a long way
-
@Jaloopa said in Let's make sure we have jQuery:
I'm going to guess a whole lot of copypastad stack overflow code, each with its own jquery include
The problem is the plugin ecostructure. That's two plugins and a theme, all of which require jQuery to work. There's no way for a plugin to signal "I need this dependency, if you don't have it get it from here"; each plugin is just spat out onto the page, and can assume nothing about its environment. Ditto for the theme.
-
@cartman82 The problem is if you write a WordPress plugin that relies on jQuery you have no way of knowing whether there's already a jQuery on the page, so in the interests of "compatibility" you include your own anyway.
The bigger problem is that apparently WordPress has never actually solved this problem. (Or they have, but their plugin authors are fucking terrible, which is equally likely.)
-
@Yamikuronue said in Let's make sure we have jQuery:
@Jaloopa said in Let's make sure we have jQuery:
I'm going to guess a whole lot of copypastad stack overflow code, each with its own jquery include
The problem is the plugin ecostructure. That's two plugins and a theme, all of which require jQuery to work. There's no way for a plugin to signal "I need this dependency, if you don't have it get it from here"; each plugin is just spat out onto the page, and can assume nothing about its environment. Ditto for the theme.
jQuery is basically the canonical implementation of the God Class antipattern.
-
@blakeyrat said in Let's make sure we have jQuery:
if you write a WordPress plugin that relies on jQuery you have no way of knowing whether there's already a jQuery on the page
Not allowed to use regular Javascript, you mean?
Or, "not bright enough to ask the question on StackExchange and copy/paste some code"... now, that I might actually believe...
-
@error said in Let's make sure we have jQuery:
jQuery is basically the canonical implementation of the God Class antipattern.
think in jquery like a module, not like a class. it is a good choice, as it avoids conflict with other libraries
-
@anotherusername said in Let's make sure we have jQuery:
Not allowed to use regular Javascript, you mean?
Wha?
JQuery is regular JavaScript, I have no idea what you're talking about.
@anotherusername said in Let's make sure we have jQuery:
Or, "not bright enough to ask the question on StackExchange and copy/paste some code"... now, that I might actually believe...
We are talking about WordPress plugin developers.
-
@blakeyrat said in Let's make sure we have jQuery:
JQuery is regular JavaScript, I have no idea what you're talking about.
You said you have "no way of knowing whether there's already a jQuery on the page". I asked if that's because you're not allowed to use Javascript.
Now, obviously, if you can use jQuery, you can use Javascript, and if you can use Javascript, you have a way of knowing whether there's already a jQuery library. And the level of knowledge required is really not much above "google it, copy - paste".
@blakeyrat said in Let's make sure we have jQuery:
We are talking about WordPress plugin developers.
thats_the_joke.svg
-
@blakeyrat said in Let's make sure we have jQuery:
JQuery is regular JavaScript, I have no idea what you're talking about.
Have you tried Vanilla.js?
Filed under: and wait for people to miss the joke
-
Final size: 0 bytes uncompressed, 25 bytes gzipped.
Their gzipped file is larger than the uncompressed one! And you trust these clowns?
Sorry, no, I'll stick with jQuery. It's awesome. I found out it can even do maths the other day!
-
I kind of miss the link click counters from . Wait, what am I saying?
Filed under: Stockholm Syndrome
-
@error said in Let's make sure we have jQuery:
I kind of miss the link click counters
NURSE! WE NEED 20kB OF STATIC HTML! STAT!
-
@error said in Let's make sure we have jQuery:
Have you tried Vanilla.js?
Yes.
Why do in 3 lines what you can accomplish in one?
-
@Tsaukpaetra said in Let's make sure we have jQuery:
Why do in 3 lines what you can accomplish in one line plus 82KB and the overhead of another HTTP request?
-
@Yamikuronue said in Let's make sure we have jQuery:
@Tsaukpaetra said in Let's make sure we have jQuery:
Why do in 3 lines what you can accomplish in one line plus 82KB and the overhead of another HTTP request?
I'm sure you would also be one of those people who stuff Zip codes in Ints because it saves a byte? ;P
-
@Tsaukpaetra There are four lines of jQuery there obviously riuChuckle
-
@Onyx You know vanilla.js page is a joke right?
-
@lucas1 Here, this might help:
https://itunes.apple.com/gb/app/sarcasm-detector/id394040209?mt=8
-
-
@lucas1 what do I look like, a Raven?
This was a joke as well
-
@Onyx I have no idea what you mean by that.
-
-
@error I've taken a look at vanilla.js but I'm not sure if the ecosystem is mature enough for me to learn it yet. Does anyone know if it's on npm yet?
-
@bb36e In fact, all NPM distributions come with vanilla.js by default, so you don't need to install it.
-
@PleegWat ah interesting... I guess I just need to change my webpack build to bundle it with my app and I'm done! :^)
-
@bb36e but does it come with a left-pad option?
-
@Tsaukpaetra Why use JS at all? CSS can handle simple animations like that now. Also, that's an incredibly lazy position to take and you should feel lazy and stupid.
-
@blakeyrat said in Let's make sure we have jQuery:
The bigger problem is that apparently WordPress has never actually solved this problem. (Or they have, but their plugin authors are fucking terrible, which is equally likely.)
Yes to both.
Wordpress "solved" it maybe.
Wordpress documented it, maybe not.
Wordpress changed how it solved it and didn't update documentation maybe probably.
Wordpress plugin developers are stupid enough to not notice any of the above, and just shoved a hard-coded link into their template anyways, maybe probably certainly.
-
This post is deleted!
-
@aapis said in Let's make sure we have jQuery:
Why use JS at all? CSS can handle simple animations like that now. Also, that's an incredibly lazy position to take and you should feel lazy and stupid.
I don't do animations period, it was an obvious troll and in turn you should feel lazy and stupid for assuming I'm lazy and stupid.
-
@Arantor don't worry, we have CSS for that!
-
@anotherusername said in Let's make sure we have jQuery:
You said you have "no way of knowing whether there's already a jQuery on the page". I asked if that's because you're not allowed to use Javascript.
I was just ranting. Of course I can debug my problem.
I would't HAVE a problem if wp hacks had invested some level of effort into their work.
-
@cartman82 blakey said that, not you. I was replying to him.
-
@blakeyrat said in Let's make sure we have jQuery:
The bigger problem is
that apparentlyWordPresshas never actually solved this problem.FTFY; in all seriousness, WordPress actually has a library inclusion architecture for both css and javascript.
@blakeyrat said in Let's make sure we have jQuery:
[snip] (Or they have, but their plugin authors are fucking terrible, which is equally likely.)
Mostly, this.
-
@error said in Let's make sure we have jQuery:
I kind of miss the link click counters from . Wait, what am I saying?
The Discourse Support Group is
-
@JazzyJosh found the poker guy.
-
@Lorne-Kates Also, what the fuck NodeBB? I read this at work. Read to the end. Posted my post. Then I read this at home (where I've never read this thread before)-- and the "unread" link takes me to a reply about 3 above my own reply.
What the serious fuck you useless pile of shit?
-
On the topic of JS animation:
jQuery animation is slow as fuck compared to JS animation (no they are not the same, I can't find the article where some guy basically explained the difference).
In all seriousness if CSS transitions are available you should use them. CSS animation don't happen on the JS event loop because they aren't JavaScript and they are implemented natively so you get a speed bump from that.
-
@lucas1 said in Let's make sure we have jQuery:
In all seriousness if CSS transitions are available you should use them.
Yes, but…
they are implemented natively so you get a speed bump from that.
… if you're using enough animations that it matters, your page is probably going to be horribly busy anyway. Or at least it'll annoy users a lot. Remember, if you're able to spit out a few frames a second, users will happily interpret it as animation. Get over 26 frames a second and you're at movie speed, and you probably don't need anything more than that in a webpage…
-
@dkf 26 isn't that smooth for animations since there's no natural blurring you get from a camera.
Your other points stand though.
-
… if you're using enough animations that it matters, your page is probably going to be horribly busy anyway.
Not necessarily on lower power phones it really does make a huge difference. Also why not offload the work to another thread (which is essentially what you are doing) and separate these simple animations off to CSS where IMHO they should belong anyway.
Get over 26 frames a second and you're at movie speed, and you probably don't need anything more than that in a webpage…
I dunno about you but I've just got the new DOOM game, I can tell the difference between it running at 40FPS and 60FPS.
In any case this sort of attitude is why Discourse was horrifically slow as it was / is and why 90% of the web apps are crap "this is good enough", when with a little (and I mean very little extra effort and a bit of an eye for detail) you can have something that runs better, looks nicer and is a little less janky.
Also you have to remember the most users machines (even desktops) are basically crap machines, so while it works good enough on a i5 or better machine, some i3 £300 machine from the supermarket with 2gb of ram, your website is going to chug along and be a frustration to you and your users.
-
@Onyx said in Let's make sure we have jQuery:
Final size: 0 bytes uncompressed, 25 bytes gzipped.
Their gzipped file is larger than the uncompressed one!
I like how, when you click the checkboxes to add or remove features, it "recalculates" the sizes
-
@lucas1 said in Let's make sure we have jQuery:
Also you have to remember the most users machines (even desktops) are basically crap machines, so while it works good enough on a i5 or better machine, some i3 £300 machine from the supermarket with 2gb of ram, your website is going to chug along and be a frustration to you and your users.
I was running animations written in scripting languages acceptably with what was current hardware 20 years ago. Users do not have hardware that crap, not now. Even my phone (now 2½ years old, so hardly a new system) is way more powerful than the systems we had then. We should not be having to put up with this shit. I'm really sorry, but my sympathy for your PoV is quite limited.
If you want to get good performance out of websites and stop phones from having their batteries hammered (a good goal) then stop the damn ads. They're the real problem in practice as they go to great lengths to prevent caching and are usually both highly animated and coded like total shit.