Custom jQuery UI - javascript

I wanted to use some functionality in jQuery-UI. So, I downloaded a custom version of the same from jQuery website, including only those things in my download that were needed by me. This was supposed to trim down the total size of my page, but to my surprise, the page size remained almost the same even after following the procedure provided at jQuery website.
Did I do something wrong? Or is this the expected behaviour?

You should have a look at JQuery UI Packager, it lets you pick what functionality you want.
It bundles it up with both a custom and a minified JQuery.
When I tried it, I removed everything but core functionality, and it ended up 15kb uncompressed.
Then I tried it without removing anything, it ended up 206kb uncompressed.
If you're that concerned you should think about gzipping.
Look at this chart of filesizes and how they improve with the different methods.
Here's a post about a guy asking a similar question, and the answer explains what you should focus on.
Here's a discussion about gzip and minify.

Related

All scripts AND libraries in ONE js script?

Ok so I am in the process of building my first Javascript 'framework' or 'bootstrap' which will be implemented in combination with a single pre-processed CSS file. I am gathering my favorite content slider, smooth scroller, content slideshow, parallax elements & bg-img, sticky elements, among a few more cutting edge navigational & UI based scripts (cross-browser/platform/device/viewport compatibility and performance). My problem is when constructing my demo page with all combined elements in place loaded and active on the page... well many seeem to require a different version of Jquery to be called in order to function properly. I have managed to get them to work properly while testing by carefully reordering the jquery librarys as they are called in the of the page. Now here is my (2) part question:
How do I get all my JQuery to work properly without loading multiple versions of it (one for each script almost)
I have a sample in my portfolio which I would love to use as the example. http://www.nicholasabrams.com/ (non mobile device version). In the src for that URL you will see only (1) js and (1) css - including the jquery libraries which are ALSO included in the single .js in the begining of the file. Please don't flame me, as I am asking for help. The link above works fine now (with apple as a slight exception)... but I am just trying to eliminate any bad practices I have as I have just started as a web developer at my first large company. Thanks!!
PS: Would post a snippet but its quite a large js file as you would imagine but if you will, please inspect my src and let me know what you think because my sites first load decreased from 22 seconds to 4-7 seconds after doing the above I wish I could just include the latest version of JQuery!)
if I understand you correctly you are loading more than one jQuery library to the page (in different order)? That's a mistake - you shouldn't do that.
What you should do is make sure that the plugins you work with are compatible with the library you are working with. If they're not - wither find other plugins or fix the ones you have to support the jQuery language you are using.
You have a 2 megabyte hi-res background image, that is insane! I would scrap that and the swirl image, while it may look cool to you, it is distracting and may actually make people want to avoid your website. It makes it difficult to concentrate on the text in the middle of your screen. You don't want people to remember the swirling image, but rather your portfolio, right?
You also have 404's on the following:
http://www.nicholasabrams.com/ScrollSpy_files/result-light.css
http://www.nicholasabrams.com/example-images/testing_station.png
404's are bad for several reasons, they are a wasted resource as they slow the loading of your page, because it attempts to find something and does not find it, and, finally, they have a negative impact on your SEO, specifically Google PageRank docks you for any 404's.
Find a way to work with one version of jQuery, it will eventually bite you to have multiple versions of the library and it is a bandwidth killer to have your users load up a bunch of libraries, even if they are CDN'd.

Is it considered Bad Idea to Edit the orginal JQuery File?

We have Tabs-Menu controls which rely on jQuery library and the dev-manager insist that i should get the functions that controls are using into a separate java-script file so we don't have to reference/rely on the whole jQuery, so it made me wonder.. is it a bad idea to edit the jQuery files ?
Yes it is a very bad idea. It would be a nightmare to maintain with all the bug fixes and feature changes the jQuery team would make.
You should write plugins to modify the behavior as you want.
The gzipped production version of jQuery is 31K. Not only is this an unmaintainable idea, but this is a pre-optimization. Any images beyond tiny PNGs or GIFs will likely be as large or larger than the entire jQuery library.
Additionally, this is time that could be spent addressing actual problems. I don't know what sort of userbase you're targeting, but unless every one of your users is on dialup, 31K will take no time at all to download.
is it a bad idea to edit the jQuery files ?
Yes. If you edit the core jQuery library, you make it much more difficult to use future versions of jQuery, which may include important new features, bug fixes, etc. If you make your changes in plugins, as you should, you can just drop in the new versions of jQuery when they're released.
Well I'd say it's a pretty bad idea. You really want the responsibility of maintaining the mess you have left after chopping it out? Are you an expert on the jQuery library? Do you understand all of the side effects? You would be better off rewriting portions of your Tabs-Menu controls without jQuery than trying to chop out bits of jQuery. I presume that the issue is that you don't want the "overhead" of including a relatively large script for a small set of features. This is unfortunately the way of jQuery. Either
Accept that you have to use jQuery, and make the most of having it referenced
Rewrite your Tabs-Menu controls without jQuery
any other option is going to be painful. Insist that your dev-manager reads the answers to the question.

Smallest jQuery lightbox script

What's the smallest lightbox plugin for jQuery (in terms of size)? Something close to Fancybox, but smaller :)
I wrote a low-level jQuery lightbox script called Nitelite: https://github.com/premasagar/nitelite (it's 1.4KB when minified and gzipped)
It is the kind of thing that can be either used on its own, or to build more feature-rich lightbox plugins.
It's been used in production on a couple of projects:
the BBC World Service widget (click a news article): http://www.bbc.co.uk/persian/services/2009/05/090512_pm_widget_conditions.shtml
the MiShorts widget (click a film thumbnail): http://www.mishorts.com/widget
It's open source, MIT license. Enjoy ;)
I have used this sometime ...
http://www.digitalia.be/software/slimbox2
It's only 4K .
As Yi Jiang already stated, the "smallest" depends completely on your specific needs, if you want everything that Fancybox does, I hardly doubt that there's a way around using that very plugin.
Still you could take a look at others and see whether they fit your needs, you should check out this list of lightbox scripts, many of which are smaller in size than Fancybox, but you'll still have to evaluate them and see if they fit your needs.
And last but not least you can always write your own one by reading a tutorial. That is, if you want to write your own one. But then again, if you have such specific needs you should know that nobody will come along and write some code for you for free.
My approach to these sort of problems is to find a script that meets my requirements then hack it mercilessly until it only contains what I need. Once that's achieved, I'll minify the script (leaving the compression of the script up to my server).
While we're on the subject, if you are looking for small scripts mainly to reduce the browser fetch time, then also ensure that your web server cache control headers and compression settings are set to good values. A nice writeup (regarding caching) can be found here. If you don't have a good caching policy defined, then it won't matter much whether the script is small if it is being downloaded from the server on every page view.
I would shy away from the PrettyPhoto plugin, which appears convenient. There is an advertisement on their demo which is suspicious (my site was redirected shortly after experimenting with it)
If you are looking for a lightbox, try to find one that has been updated to the latest query. Slimbox2 and fancy box have not been updated for modern css, using images to build the box, and neither have been updated for streamlining changes in the latest jquery.

Are there any drawbacks to using head.js?

Things I am aware of:
Screen flicker if scripts alter styles / content (not an issue for me as I currently load scripts at the end of the page and so have workarounds already)
Inability to detect script load failure (not too concerned about this either as everything I develop is required to work with or without javascript. Might affect my workarounds for item 1 but happy with this risk)
It looks to be a very good option to me but I am hoping for some references (feel free to say only positive things!) before I invest time in incorporating it into my next project.
Currently we develop mid-to-large sized sites with, generally, a moderate amount of Javascript (although this is growing rapidly). We also use the jQuery library for the bulk of our Javascript.
Anyone have any experience? Good or bad! :)
P.S. for those interested this is head.js
Nope. As long as you put any code that is dependent on the loading files inside head.ready {} then you will not face any problems with your code.
Here is my conclusion for head.js, I have done some benchmarks myself:
http://blog.feronovak.com/2011/03/headjs-script-is-it-really-necessary.html
It is subjective opinion and benchmarks are not by any means scientific.
I was/am interested and thinking of maybe also using head.js BUT i found something not so nice: In the url that you gave me there are three tab buttons:
SCRIPT SCRIPT SRC head.js
SRC in head on bottom on head
Shift+Ctr+Refresh gives very little differences for me (+/-10ms between the three # 120mbit line, firefox 3.6.13)
When I use Ctr+R refresh, the results on the head.js are consistently 100ms slower than the other two versions without head.js... So, its NOT always faster.
There would be no problem on using jquery or javascript library heavily. Try to main each library as unique.
I am using prototype, scriptaculous, jquery and many more jquery additional plugins. I faced an error while loading entire scripts. Then i found out its due to $ sign which is an important parameter of jquery and prototype.
i had used
$.noConflict();
jQuery(document).ready(function($){
//jquery codes here
})
So keep your script library unique
head.js() gave a problem to my pages. None of my asp:button OnClick events were working. But if I include the scripts in the traditional way (<script type="text/javascript src="") then the events worked perfectly. I tried EnableClientScript = "false" and also CausesValidation="false". But nothing worked. Finally just scrapped the head.js idea since it did not make a lot of difference to my page load time, anyway.

Is IxEdit worth?

I am intrigued by IxEdit and its full-javascript approach that should allow to build nice web pages powered by JQuery effects.
I like also the opportunity to use it on many platforms.
But, is it worth a try ?
Is it complete ? Has it compatibility issues ? Are there better alternative tools ?
Don't rely on WYSIWYG editors--My guess is that this editor screws up performance like Frontpage, Dreamweaver -and the likes screws up HTML.
jQuery is pretty simple to understand, once you get hold of the concept of anonymous functions.. And with Stack Overflow at hand, you should be able to get where you want to go in no time.
Also: jQuery is the framework with the largest community and the framework with the largest plugin repository--need a gallery-thingie? No biggie, just browse the tons of plugins and find one that fits your needs.
Well, as JQuery isn't THAT complicated, I wouldn't pay for tools like that.
They also don't support any plugins I guess.
But it's free, so just try it...
I've just d/l IxEdit and am actually kind of excited about it.
It seems you do have to be careful about starting with a blank slate: I tried applying it to an existing page with a few jQ plugins and and it broke.
As for the WYSIWYG aspect of it, I think it would be great for beginners, as it generates the code on the fly, and you have to copy and paste the code into the page. This can give a noob the opportunity to see the code that's made and make sense of how it works.
My two cents.

Categories