I'm using JQuery for an embedded system that is isolated from the outside word. Therefore jquery exists on the local server (the embedded system). The question is: what would be the best file name to include JQuery in my html?
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
I searched Stackoverflow and found the following threads despite of being useful they don't answer my specific question in this scenario:
What is the best way to include latest version of jQuery?
What is the best way to include jQuery in DotNetNuke 4.8.x?
Because if later we switch to a newer version, I don't have to go through the html files and update them. This is an embedded system and once it's running we hardly update any file. Besides the customer doesn't need to know the version of the libraries and developers know the version already.
jquery-1.6.4.js is better because
it helps clearly identify which version is being used
it prevents possible caching issues that might arise if you changed the jQuery version but not the file name.
Option 2.
Because when you update the version the version number of the file name will act as a cache buster.
This means if a browser caches your file, a change in file name will force it to redownload, as it's a completely new file.
Related
I am working on a project that I want to use JQuery for since many people have recommended learning JQuery while learning Javascript and CSS to help enhance your programming abilities.
I looked into JQuery and downloaded both the compressed and uncompressed versions as well as the addition map files and notes, but I am semi-stuck on what to do next.
I understand that I must somehow import the script and implement it into my code, but I was reading online that Brackets.io may not support JQuery extensions or something about an issue with JSLint errors and files? I have no clue what any of this really means and I am just looking for a quick way to get JQuery plug-ins and code working in my current project.
I moved all the JQuery related files to my programming folder. What should I do next?
In your HTML document head, insert the following tag:
<script src="jquery-1.11.3.min.js"></script>
replacing the jQuery version with the version you downloaded.
Then jQuery will be available from any script running from within that html document. You will need to include this line in the head of every document you plan to use jQuery with.
To add jQuery plugins, add additional script tags below the jQuery script tag, with each src pointing to the .js file of the plugin.
This question already has answers here:
Why should I use Google's CDN for jQuery?
(7 answers)
Closed 7 years ago.
At some point in my website I needed a Timer so I looked for a free jQuery Countdown Timer and found this one : Example
After integrating the model to my page inside my IDE (VS2010) i payed attention that some CSS and JS files are not stored locally in my project folder, but they are still Linked to an External sources, and that had me thinking : Am i suppose to find a way to download these file locally than use them, or should i use them the way they are ? and should i be concerned if they may change or desperate at some point in the future ? what are the best practices in case ?
Here is an example of the HTML code :
....
....
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="inc/TimeCircles.js"></script>
....
....
Those are CDNs ( http://it.wikipedia.org/wiki/Content_Delivery_Network ) meaning that they're hosted by someone for all of us to use, so you're pretty much guaranteed it will stay there. The main advantage of using CDNs is that the user will probably have visited another site that uses the same resource and this means that said resource is already cached in the user's computer, leading to a faster loading time for your site.
You should never rely on external sources for critical files unless you're using a dependable CDN. In this case you're using the most common CDN sources for Bootstrap and jQuery, so you're all set.
I assume that you've downloaded the timer files and are hosting those locally. Your reference to them confused me, so I've updated this answer.
I noticed that some programmers use two ways of calling .js file.
1- this way where you must have the js file:
<script src="lib/jquery.js" type="text/javascript"></script>
2- and this way where you don't need the js file :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
and I want to know which way is better to use.
The first option is using local files, The second option is using a CDN.
A CDN is a group of fast servers with several common use files. Is really useful to save bandwidth and speed up the download of your site.
However, as was mentioned, you would have problems if the end user don't have access to internet.
Basically, if you expect your application to be executed always online, a CDN is a great option. If you are developing an app that could be executed offline (like a CRM for a company) then it would be better to be served using local files.
If the CDN is down, then your website will be broke. But is more likely that your website is down than the CDN.
Depends.
Method #1 means you have a local copy of the file -- you don't need to rely on an existing path to the internet (from an intranet behind a firewall, spotty internet service, etc). You take care of any caching, and making sure the file exists.
Method #2 may give you a fast planet-wide content-delivery-network (CDN).
I have, and will continue to use both methods... but #2 is easier.
Is there any way to "edit" a "server side" javascript file in one of the mentioned browsers that will save the js edits on the client side and replace the server side scripts?
Basically I want to edit the javascripts on the server. Obviously I can't save them on the server so they need to be saved on the client side(my computer) and the browser needs to load my scripts instead.
It shouldn't be hard to do at all but I've not been able to find any way to accomplish this.
Edit:
I want to modify the javascript's from a site I do not own or have write access too. e.g.,
Html page uses some javascript page on server. I want to modify this javascript file(the actual file).
I can download and save the javascript file BUT the html page will always use the one on the server because that is what is in the script tag. I need to modify the script tag of the html page to point to the local javascript file BEFORE the html page's scripts are executed(else the javascript from the server will be used).
here, for example, is a script tag from SE:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
It uses a non-local javascript file. I need to replace this line with my own line before any javascript is executed. It would like like:
<script type="text/javascript" src="file://C:/temp/myjquery.min.js"></script>
or whatever. (this way, I can modify the jquery file and have it execute my own version of the one on the server)
I, could, ofcourse, download the html file and modify it BUT then php code may not work among other things. (for example, relative links will be broke)
this is usually very easy in Opera: Just view source, edit what you want and use the special "Tools > Advanced > Reload from cache" command instead of a normal reload. Voila, you'll be running the site with your modified scripts..
(There are some exceptions, related to specific no-caching techniques some sites use it won't work 100% for all files - but it certainly should work for anything served from googleapis.com)
I think what you're looking for is something like LiveReload
It allows you to edit css files and have the browser apply the changes without refreshing the browser.
The windows version is in alpha right now but the Mac version works quite well for CSS.
I don't know if it does Javascript but I think it might.
You could also try the Chrome DevTools. It's a chrome extension that does just what you want with javascript and css.
No problem, you want to use bookmark-lets for this. Indeed it is easy, just remember to use an anonymous autoexecuting function: javascript:(function(){ //commands })();
In the sane good old day's one could even place this javascript directly into your addresses, but nowaday's some browser-builders (like firefox we coders USED to trust in the old day's) are being a 'good boy' and listen to facebook's 'demands' to kill normal standard functionality in favor of their lack on comprehending closures... But alas..
Ofcourse you could also create a bookmark to fix firefox's insanity, again reclaiming power to the user :)
Every time you visit the site, you click your bookmarklet. Done.
One can even make it 'memory resistant' for as long als you are on the same page (if you really want to). Naturally power is with the user/visitor AS IT SHOULD BE, not with the webmaster (who already publicly shared whatever info).
You might also look into greasemonky on firefox and comparable solutions.
Good luck
Build a string on the server side to write all your javascript code on the server side.
I just checked my page size using firebug and all, and javascript files equal 478.2K!
<script src ="<%= Url.Content("/Scripts/MicrosoftAjax.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/MicrosoftMvcAjax.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery-1.3.2.min.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.form.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.validate.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/xVal.jquery.validate.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/temp.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery-ui-1.8.5.custom.min.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.ui.tabs.js") %>"></script
temp.js is my own file, and it has code of very few lines (like 10-20).
So what is going on? I mean how to fix this?
Start by getting rid of Microsoft*.js. If you use jquery you don't need those.
I would suggest that you use the minified versions of each js file and also that you combine them into one single js file (or as less as you can).
Here is an interesting article that may help you.
Except for temp.js (which you say is quite small), all the other files are third party libraries.
I assume you're using all those libraries on every page? If not, one thing you could do would be to only include them on pages where they're being used.
The file names suggest that some of them have been minimised. If the others haven't been, you could run them through a minimiser, or alternatively go back to their home pages to see if they supply a minimised version you could use.
Some of them may also provide an option on their site to only include functionality that you intend to use. JqueryUI does this for sure, though from the filename you're using it looks like you already made use of it for that, but check to see if any other libraries also offer that.
Check that you haven't got any overlapping functionality - you may be able to rationalise by removing redundant code. You would have to be very cautious if that means editing third party libraries (that's not usually a good idea), but you may find you've got entire libraries that are unnecessary, in which case it'd be a quick win to get rid of one of them.
If you want to off-load some of the scripts to a third party, Google hosts JQuery, JQueryUI and a lot of other plug ins, and they allow sites to load them from their servers. It wouldn't affect the size of the scripts that the user has to download, but would save your servers quite a lot of bandwidth.
At the end of the day though, you have got a lot of big scripts there, and they're providing a lot of functionality. If you need all that functionality, you'll have to put up with the weight of the code.
their are many thing you can do for this situation
use minified or production version instead of developer version
load them from CDN if you can do that.
If files not been changes from long time that you need TO use Cache.
their are many other thing you can do for application performance improvement.
You could try gzip compression so that the server compresses it and is uncompressed by the browser. That should help a bit.
Maybe something like this.
Or better still, in IIS itself like this.
considering that you're importing the jquery UI library, jquery, the microsoft ajax framework, some validation framework etc.. its not too bad..
You can try minify the files to save space. Here YUI Compressor
If you are using well-known and popular libraries (like jquery) you can use externally hosted files from a cdn (content delivery network), which are more than likely already in the browser cache (and therefore won't need to be downloaded again): google list of libs and jquery ref
Minify it :http://jscompress.com/
I would also suggest refactor it (rewrite it so there is less memory used).
Telerik Extensions For ASP.NET MVC
How about this approach?
MvcContrib: an Outer Curve Foundation project
MvcContrib.IncludeHandling is same approach.