We Keep Coding

Why link css and JavaScript files by online links? [duplicate]

This question already has answers here:
Why use a CDN (Content Delivery Network‎)? [duplicate]
(3 answers)
Closed 2 years ago.
I am a beginner building my own website and I am currently linking my css and js pages by like so:
<link rel="stylesheet" href="style.css">
<script src="jscode.js"></script>
where style.css and and jscode.js is in the same folder as the html file. However, published websites seem to exclusively link their css and js pages by online links like so:
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7">
<script async="" src="https://cdn.sstatic.net/Js/full.en.js?v=ada34f05dd4d"></script>
Why would they do this instead of having the css and js files hosted in the same folder as the html file? Should I also upload my css and js files online and link them?

This is done for perfomance reasons.
As you may have noted, they link a CDN hosted stylesheet: https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7
Files that rarely change benefit from being hosted on CDNs, improving website performance. This is especially true for common libraries, e.g. Bootstrap or jQuery or Vue.
But if you craft your resources yourself, it is totally fine to put you css and js files alongside your web pages.

These external libraries increase the application bundle size when we build our application and so it also increases the application loading time. When you load CSS and JavaScript library from a CDN your website will load them fast.

Using CDN links typically offers faster delivery of the contents/resources to the user, and for websites that have high enough traffic, it can reduce the workload on the hosting server, because of the way CDNs work, you might want to read up on CDN here. But it also depends on the creator of the code, because in most cases, the difference is usually not observable by the user.

You will notice the 'cdn' subdomain in the src and type attributes: (href="https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7").
These refer to 'content delivery network'. These are servers that are distributed around the globe and host the CSS and JS files in question. When a user visits the site the CDN will serve cached files from a server that is close to them which results in a quicker site load.
However, using a CDN isn't required.

To be able to use libraries like Phaser, PixiJS, and EaselJS do I only need to make a "connection" with the source to download the library?

I am new to frontend development and I have a question about JavaScript libraries. As a text editor I use Sublime Text and from what I heard JavaScript is done only with the browser.
To be able to use libraries like Phaser, PixiJS, and EaselJS, do I only need to make a "connection" with the source to download the library? Or do I have to install some compilers?

To use the libraries, you just need to download the library (e.g. phaser.js) and place it in the same folder as your game.
For example, create a folder called Game. Inside it, keep your phaser.js file (which you downloaded), your html file (e.g. index.html) and your javascript game file (e.g. game.js). Then you can use Phaser in your game file (game.js).

There's actually a lot to your question, since JavaScript can be run on the server now (see Node.js for example). Skip to the code below for the simple answer to your first question.
While there are ways to setup a process to build JavaScript files - giving you the ability to write typed JavaScript (see TypeScript for example), combine multiple JavaScript files into one (see webpack for example), etcetera - none of that is required when first starting out, and these days most sites will have a basic tutorial on how to get started using the library, which will get you going in the right direction.
So, consult your libraries docs for the exact specifics, but normally you'd want to download the library's main JavaScript files to the same directory as your site files (or a subdirectory within) and then include a reference to the library's file(s).
Note that a more advanced way to do this is via something like npm, and a lot of tutorials will recommend using this, but there's no reason you can't just download/save a JS file, or download and extract a zip file with it.
If the library only includes JavaScript files (such as with Phaser) you'll need to include this in each HTML file (or a layout file, if using a server-side language and they're supported).
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<!-- Other relevant code. -->
</head>
<body>
<!-- Content of your site. -->
<!-- Downloaded library file. -->
<script src="lib/phaser.min.js"></script>
<!-- Custom JavaScript. -->
<script src="app.js"></script>
</body>
</html>
Note that some libraries may want you to include the JavaScript at the top of the body, and/or you may also need to include CSS files in the head. Note also that the order matters; app.js can only use functionality defined in a file that has already been included/loaded.
Finally, you don't need to actually download and store third-party libraries on your own machine/server. As long as you have an internet connection (and your users do too) you can also use a CDN (content delivery network). There are various advantages (such as performance) and disadvantages (such as security and performance) of this, but again your library should have documentation on whether the library is available on a CDN, and how to reference it.
For example, in the example above you might swap out this line:
<script src="lib/phaser.min.js"></script>
with this line:
<script src="//cdn.jsdelivr.net/npm/phaser#3.24.1/dist/phaser.min.js"></script>

Adding both minified js,css and non minified js,css is beneficial?

I don't know how to ask the question for the confusion I am having.
Currently I am working on an already developed MVC5 project. In which I have seen that on layout page, bootstrap bundle is added and when I check bootstrap bundle code, it is having both minified and non minified js reference like below:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap.min.js"
));
I don't know if it is required to add both? Will it create any problem? What happen in case of CSS when both minified and non minified files added?

You should not use both the files at the same time
While working on the code(Debug mode) use the non minified version or the even the debug version if available as it will help to find out errors easily.
And when deploying the application use the minified version as the file will be lighter and will be loaded fast.

No, it is not require to add both the files. if you add both, it consider the last file. i suggest you to create two different bundle for production and development, and just switch the flag when you want to upload to production.

It never requires to add both the file further down the line It depends on your requirement.
They are both the same functionally but the .min one has all unnecessary characters removed in order to make the file size smaller.
If you want to edit the bootstrap js keep non-minified js in project as mini JS can't be modified or understood.
And if you are not modifying any js just keep the mini version. Mini js offers loads of benefits over its original format(non-mini). See :
Quicker download times for your users.
Reduced bandwidth consumption of your website.
Reduced number of HTTP requests on your server when combining many javascript files into
one compressed file, thus reducing the server load and allowing more visitors to access our website.
Comments and whitespace are not needed for javascript execution; Removing them will speed up script execution times.
Although Bootstrap offers custom js creation so If you see you project changes demands mini js(for faster execution and several other benefits) just go on their site and modify your js.
Note : Just to point out as well, you are better using the minified version (.min) for your live environment as Google are now checking on page loading times. Having all your JS file minified means they will load faster and will score you more brownie points.
You can get an addon for Mozilla called Page Speed that will look through your site and show you all the .JS files and provide minified versions (amongst other things).

Dynamic/Automatic Javascript and CSS Combining and Minification

I know I have seen an article this somewhere (specifically related to Azure too!) but I forgot to bookmark it (doh!) and after hours searching can't find it anywhere :(
I have a MVC Application running in Azure with multiple layout pages and roughly 20+ javascript files (each quite lengthy hence why they are seperate!).
Each layout page includes a couple of script and css files, the rest are added using #head { } (razor syntax for adding sections to the layout page outside of the body.
I cannot remember if the article was exactly what I was after but what I would like to do is combine AND minify the nessessary javascript and css files at runtime dependant on the layout and page.
For example if i had a layout file with:
<script src="script1.js"></script>
<script src="script2.js"></script>
<link href="css1.css" />
and a page with
<script src="pagespecificscript.js"></script>
<script src="usercontrolspecificscript.js"></script>
<link href="page.css" />
I would want a 2 minified files to be sent to the user's browser such as
<script src="201101010800abc-min.js"></script>
<link href="201101010800abc-min.css" />
Thanks in advance!

Check out RequestReduce. Its a project I have been working on that minifies/merges css and optimizes and sprites images. It does this on the fly with no code changes and very little confg necessary. Next week, I will be releasing javascript merge/minify. I have been blogging quite a bit about this lately (http://www.mattwrock.com/post/2011/09/10/Adopt-RequestReduce-and-see-immediate-Yslow-and-Google-Page-Speed-score-improvements-not-to-mention-a-faster-site!.aspx) so it is possible that this is the article that you had run into. The easiest way to grab RequestReduce is via nuget: Install-Package RequestReduce.
I'm a dev lead on a couple Microsoft web sites where we have been deploying this with good success, so it is enterprise tested and quite scalable. However it is not a Microsoft product but rather a personal OSS project I have been contributing to. Its also free.

Using IE conditional comments to include CSS or JavaScript files results in more http requests

A web designer has created pages for us with IE-specific comments. Consequently, certain stylesheets are only included if the user is using a specific version of IE:
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="/styles/ie6-fixes.css" media="screen" />
<![endif]-->
The same technique has been used for JavaScript files.
Unfortunately, this results in more HTTP requests for IE users, so the perceived page load time is slower. Generally, my practice is to combine all CSS in a single file, and all JS in a single file.
Is there a way that these IE-specific comments within CSS and/or JS files themselves? Or is there a way I can simulate this functionality?

For CSS you can use IE-specific comments to surround the document content in an element of the form
<div id="IE6">
This could allow you to implement IE6 CSS fixes by prepending selectors with "#IE6 ".
For more details see http://www.positioniseverything.net/articles/cc-plus.html
JScript also has conditional compilation which may help you consolidate your JS files into one.
See http://msdn.microsoft.com/en-us/library/ahx1z4fs(VS.80).aspx

Well what you could do is use a dynamic builder. Fore example in your conditionals you could use inline scripting to add paramters for your build to a js array. then you could use that array to build the url to your script/css like /assets/css/build.php?use=base,ie7 and somethign similar for js.
Then in this php (or whatever flavor of lang you want) you could use minify or some other library to compile all the scripts/css into single files and strip all the cruft and deliver them. You can also then cache the builds for faster delivery later.
Ive used this strategy on a number of projects with PHP Minify and/or Various Symfony plugins that do the same thing.

For CSS, you could try to use various selector tricks that other browsers would ignore and IE6 would respect, but this entails a small perf cost for everyone else.
For JS, you could update your functions to check the User-Agent string, but that has basically the same problems as with the CSS proposal.