jQuery versions of JavaScript files

Nao

  • Dadman with a boy
  • Posts: 16,079
jQuery versions of JavaScript files
« on May 6th, 2011, 05:12 PM »
Feature: jQuery versions of JavaScript files
Developer: Nao
Target: modders, themers, users, geeks
Status: 100% (believed to be complete and bug-free.)
Comment:

jQuery adds about 31kb to your content the first time you load it. But you may not even realize it: we load jQuery from Google by default, and if another website does the same, chances are the file is already in your browser cache and doesn't need to be loaded.
Still, I'd rather take the worst situation into account and say you're on a 56kbps modem and your browser cache is disabled. You have a right to be silly, we're not judging. So, I solved this problem by saving space everywhere else, optimizing every single bit of SMF's JavaScript code, and using jQuery everywhere it made sense to use it.
For instance, the script.js file in SMF is about 47kb, while the Wedge version clocks in at 27kb. All of the JS files were optimized in a similar fashion, resulting in smaller files, even with jQuery thrown into the process. See the code that applies CSS to the WYSIWYG editor in SMF2? 74 lines. In Wedge? 2 lines. Two.
One of the better aspects of using jQuery in the JS files is that we can also take advantage of its superior capabilities. Sometimes, it will simply replace advantageously an existing feature. The news fader script is 6.6kb in SMF, and 1.6kb in Wedge, with the same outcome.
Other times, I added some nice bits to the SMF formula. The infamous toggler is now much shorter and adds a nice animation effect. We also have the reqWin function. It's called whenever you click a help icon to show a popup with some help text. The Wedge version of reqWin actually opens a div popup with fixed position, with the ability to move it around the page. It works just as well as the SMF version, is non-modal, has some nice subtle visual effects, and frankly, did you ever like SMF's window popups anyway?
There are plenty more examples of the advantages of using jQuery in the JS files, but you'll have to find out for yourself...

Re: jQuery versions of JavaScript files
« Reply #1, on May 6th, 2011, 05:19 PM »
Oh, and the news fader also no longer has the infamous bug where it breaks in IE just on any custom theme because the theme author doesn't explicitly state a colour for the background. All part of the service, so to speak ;)


Re: jQuery versions of JavaScript files
« Reply #3, on May 6th, 2011, 09:54 PM »
Yeah, it irritated me enough ;) Besides, when I dismantled it, it would have taken more effort to reimplement it using colour re-paletting like they did it, when jQuery gives me the opacity tools...

Re: jQuery versions of JavaScript files
« Reply #4, on May 7th, 2011, 10:18 PM »
Do you use a public CDN for it or is it host locally? Because I wouldn't like a CND version of that jquery stuff. :unsure:

Re: jQuery versions of JavaScript files
« Reply #5, on May 7th, 2011, 10:39 PM »
As per the thread where we talked about using jQuery, you can either use a local version, or use a choice of 3 CDNs.

Re: jQuery versions of JavaScript files
« Reply #6, on May 7th, 2011, 11:45 PM »
- Local (gzipped along with script.js+theme.js to avoid using up an extra hit)
- Google CDN
- jQuery CDN
- Microsoft CDN

I did my best to satisfy everyone really ;)

And local is a bad idea in practice. Use the Google CDN. Local means more bandwidth for your server, and it forces the client to download the file at least once (unlike a CDN link where it might already be cached even before visiting the site for the first time.)

Re: jQuery versions of JavaScript files
« Reply #7, on May 8th, 2011, 10:43 AM »
Quote from Nao/Gilles on May 7th, 2011, 11:45 PM
- Local (gzipped along with script.js+theme.js to avoid using up an extra hit)
- Google CDN
- jQuery CDN
- Microsoft CDN

I did my best to satisfy everyone really ;)
Thanks :) Well even if it is a bad practice I don't want to rely on google or any other sites. Even if that makes higher bandwidth. I have unlimited traffic on my site, so it doesn't matter anyways ;)

Re: jQuery versions of JavaScript files
« Reply #8, on May 8th, 2011, 11:25 AM »
Google has a 100% uptime, last time I saw, your jQuery file will be available long after your server died :P
But really, it's up to you. I did write this local option. I went as far as implementing the gzipping & caching stuff just to make sure it's as small as possible in local. So you might as well use it :P



Re: jQuery versions of JavaScript files
« Reply #11, on May 9th, 2011, 12:30 AM »
...and I pay $40 a month and I only get 400GB traffic, and IIRC 32GB space.

Clue's in the title, of course, I'm not using an overseller, but an unmanaged VPS.

Re: jQuery versions of JavaScript files
« Reply #12, on May 9th, 2011, 12:37 AM »
Quote from Artur on May 8th, 2011, 11:57 PM
So? My host didn't had unlimited traffic before. They did an upgrade last year (with a space upgrade) which they changed from 100 GB per month to unlimited. I'm not on one of those american unreliable hosters  -_-.
What he's trying to say is that unlimited doesn't exist. If someone promises unlimited bandwidth, they're lying to you and you should avoid them. You'll always be limited; either by another element (such as CPU time share or MySQL space or whatever) that will prevent you from using all available bandwidth -- and even if they don't advertise any 'blocker', they'll simply e-mail you once you start using too much bandwidth. Which is kinda funny. But, well, it happened to me with several hosts...

Re: jQuery versions of JavaScript files
« Reply #13, on May 9th, 2011, 12:46 AM »
I haven't had Linode contact me where I've gone over any limits; and I've had things consume 100% CPU for periods at a time, as well as massive I/O spikes and bandwidth spikes. I pay a bit more than some but I get exactly what I pay for...

I always amaze folks who pay under $10/month when I tell them, followed by the lightbulb moment when I explain that I don't have to contend with TOS-buried hidden limits.

Re: jQuery versions of JavaScript files
« Reply #14, on May 9th, 2011, 01:01 AM »
Basically, the more popular a host is, the more likely it is to have hidden problems.
I'm very happy with a 'smaller' host like Alwaysdata, personally. (Plus, they and shaitan are kind enough to donate hosting for now :))

Re: jQuery versions of JavaScript files
« Reply #15, on May 9th, 2011, 07:49 PM »
Quote from Nao/Gilles on May 9th, 2011, 12:37 AM
What he's trying to say is that unlimited doesn't exist. If someone promises unlimited bandwidth, they're lying to you and you should avoid them. You'll always be limited; either by another element (such as CPU time share or MySQL space or whatever) that will prevent you from using all available bandwidth -- and even if they don't advertise any 'blocker', they'll simply e-mail you once you start using too much bandwidth. Which is kinda funny. But, well, it happened to me with several hosts...
Yeah well and as I said. They didn't had it before. I had 100 GB 2 years ago as my max traffic i could use up. It seems like the most webpackages didn't used that much traffic, so they changed it to make it >sound better<. But it means what it means. It's not limited in the option menu anymore. I just pay 5¤ / Month and I'm totally okay with the space. Sure I don't have 32 GB Space, but what I currently have is completely sufficient for my needs. Then the time comes, I'll change to a managed vserver as I have some more people who I could share those GB's of space together ;)
Back to topic:
That little jquery file will definitely not explode my traffic usage, so... I'm still prefer a local hosted version.

That's all I gonna say to it :)