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.
Related
I am developing a large scale HTML5 app, and I really wonder about this issue. I will have a lot of dialog boxes and tabs that will open by user interaction.
I wonder what is the best practice - writing all the dialog boxes and tabs in the HTML document with display:none to all of them, or create these HTML sections on the fly with JS or jQuery every time the user making the relevant interaction.
What is better in terms of performance, ease of development, readability, etc?
Any help will be appreciated.
I'll try to address this question as good as I can.
1 - As I said in the comments, Avoid inline styling.
First and foremost this is because inline styling voilates DRY.
Having to repeat the same thing over and over again for this is very bad for maintenance and for developing since instead of changing code once you have to change it at ~100 places.
2 - Avoiding inline styling is also good for accessibility, some screen readers and search engine crawlers do indexing work and reading work based on css selectors and thusly using inline styling will force them to either ignore or misintrepret things.
3 - When working as developers it's easy to do inline styling "just for the fun" but what you're actually doing is mixing concerns. HTML is the content and CSS is the design.
Mixing these two usually leads to headaches and making my job as a developer that comes after you a pain in the effin ass since I have no idea what's styled and how.
Now, onto performance.
When you use inline styles, what you're telling the browser is basically "hey, for every page page view apply these styles to all of these elements." Now, this just became really apparent why this is bad.
You have no ability to cache and store your css and basically forces the browser to rerender your styles every time. Using an external CSS file will actually help you speed up your site since the browser caches it.
That was that for the css part.
The javascript you had asked about.
As I said, hide things with css and show with javascript. Now why do you want to do this instead of pulling everything in?
Well, you can do both. If you're only a webbrowser experience then you can do either, it doesn't matter. I myself prefer to have stuff in the DOM because it relates to content and if you're a large app having dozens of dozens of ajax calls will only make it harder for maintenance. I believe if you have to ajax stuff in make sure it counts and is logical and not just for the kicks (I think this applies if only you have jQuery and plain javascript at your disposal).
If you're working with backbone.js, for example, it's based on views and introduces some form of "MVC" into your frontend enabling you to have views with subviews that can pull content in from the server.
Hope that helps a bit with making a decision! :)
I would say it depends on how many tabs your application has and how big these are.
Big content inside the tabs mean that the application will take long to load when started and consume much ram. If this is the case, I suppose to load them as needed.
Small content inside the tabs will load fast, so load everything at once to increase performance when the tabs are clicked.
Don't forget to run some tests on older computers with a slow internet connection to see how your application behaves. Not everyone has the newest and fastest hardware.
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.
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.
I have a question about Javascript widgets. The widget I am working on simply embeds content on a page instead of using iframes. So far it looks good. But there are cases where some users layouts are messing up the widget. For example, the widget might require a width of 300px to appear. But the parent div is set to 250px and hence the right part of the widget is cut off.
I was wondering what sort of precautions should be taken to prevent this? I was talking to the product manager who mentioned he wanted me to check the parent div elements and get the size and then show an alternate message if their size is not accurate. But again, since this is Javascript and the widget is supported in many diff browsers(including IE6), I am wondering how fail-safe this method would be? What if I need to iterate the DOM all the way up before getting a valid size? I am also worried about performance here. This extra checks would slow down the delivery of my widget content to "good users" since I am adding a layer of complexity to all users. I don't want to penalize good users just because of the few errant ones.
I am not using any sort of JS library here, so any solution should not suggest the use of one. Also, the reason for not using a library was simply not to add extra weight to the page load to deliver a widget. I understand that "jquery" for example is small, but in my case, even 24k compressed seems like an overkill for a widget delivery that contains no core code for the widget.
Has anyone dealt with such issues before? What are your solutions to these?
There are reliable ways of determining the size of an element using JavaScript. You're quite right that you may need to iterate up the tree in some cases, but the answer you get will ultimately be quite valid.
Although you don't want to directly include any library code in this project, you may consider looking at how the major libraries implement their "what's the width of this element" functions to drive your own implementation.
Beware of quirks mode too.
I'd check to see of the page has Jquery, if not load it into the page using no-conflict mode. Then use jQuery to examine the page.
See: How to embed Javascript widget that depends on jQuery into an unknown environment
I'm building a site that makes extensive use of FLIR to allow the use of non-websafe fonts. However, pageloads are an ugly process, as first the HTML text version of each field loads and then (a few hundred milliseconds later) it's replaced by its FLIR image counterpart.
Is there any way to avoid this sort of thing? I've got a client presentation in a few hours and I know it'll raise eyebrows. My situation is sort of related to this question which is in regards to sIFR, not FLIR. Any ideas?
Thanks,
Justin
Try putting the following rules into your stylesheet:
.flir-replaced{text-indent:-5000px;}
.flir-image{display:block;}
You may have to modify your other FLIR-related CSS rules to account for the fact that the generated images are now vertically aligned to the top of their respective parents.
It's been a while since I used FLIR, but I recall there was an internal caching method that would pull from cache on load instead of generate it each time.
http://docs.facelift.mawhorter.net/configuration:settings
Also, you can't have too many on the page at once. I found that between 6-10 were optimal for performance.
Are you on shared hosting? Is your css/js compressed? I found that the initial load was a little slow, but fairly quick after the images had been generated.