WEBVTT 0 00:00.570 --> 00:08.040 Now for the inquisitive ones amongst you you might have copied this URL where our jQuery library 1 00:08.040 --> 00:16.200 resides and tried to take a look at it. And if you did this is what you would see, it looks like a huge 2 00:16.200 --> 00:17.010 mess. 3 00:17.280 --> 00:23.330 But this is essentially the minified version of the jQuery library. 4 00:23.490 --> 00:30.040 And you might notice that it looks very similar from the Bootstrap CDN that we used previously. 5 00:30.240 --> 00:36.330 When you copy the URL there and paste it and load it in your browser, then you can see again you 6 00:36.330 --> 00:39.980 have this huge mess of code. 7 00:39.990 --> 00:42.810 Now what exactly is all of this? 8 00:43.050 --> 00:49.500 Let's take a section of this and copy it, and inside Atom I'm going to open a new page. 9 00:49.680 --> 00:52.760 I'm going to show you what this minification does. 10 00:52.770 --> 00:56.470 So essentially we've still got the same Bootstrap code. 11 00:56.490 --> 01:00.340 So in the case of Bootstrap then it is CSS, 12 01:00.450 --> 01:03.920 and in the case of jQuery then it's Javascript code. 13 01:04.170 --> 01:14.700 But essentially all of the spaces, the new lines, the comments, have been removed from the file to try 14 01:14.700 --> 01:16.400 and reduce its size. 15 01:16.590 --> 01:23.490 But you can see that as I've been combing through this and separating out these lines into the familiar 16 01:23.490 --> 01:28.000 formatting that we're used to, then you can see that it's just CSS code. 17 01:28.200 --> 01:31.000 And this is simply just Javascript code. 18 01:31.140 --> 01:37.850 And in fact if you head over to minifier.org, which is a way of converting your Javascript or CSS 19 01:37.860 --> 01:40.470 code to a minified version. 20 01:40.650 --> 01:47.880 Now to test it out I've got our index.js from our drumkit code and at the top I'm going to add 21 01:47.940 --> 01:49.170 a comment. 22 01:49.200 --> 01:56.250 This is a comment. And you can see that it's got a lot of spaces, new lines, new paragraphs. 23 01:56.430 --> 02:02.190 But we're going to copy its entirety by just hitting command or control A and then command or control 24 02:02.190 --> 02:07.300 C, and then we're going to take it over to our minifier and we're going to paste that in. 25 02:07.380 --> 02:14.220 And now we're going to select Javascript and hit Minify, and you can see that it's just crunched everything 26 02:14.220 --> 02:17.500 together and got rid of comments. 27 02:17.520 --> 02:25.120 So now you can see that our original script was 1539 bytes, our 28 02:25.150 --> 02:29.720 minified script is only 1113 bytes. 29 02:29.790 --> 02:37.260 So we have gained 426 bytes, making our files smaller and therefore quicker for our users to load. 30 02:37.260 --> 02:43.650 And this is exactly the reason why we minify our Javascript or our CSS, because all of this code has 31 02:43.650 --> 02:46.830 to be loaded up by your users' browser. 32 02:46.950 --> 02:54.060 Now depending on their Internet speed, that may take a short time or a long time. Now because the browser 33 02:54.090 --> 03:00.090 doesn't care about tabs, indents, spaces and comments, it completely ignores all of it, 34 03:00.120 --> 03:07.270 there's no point asking the user to load up all of this unnecessary information, and by minifying 35 03:07.410 --> 03:11.210 we get rid of those things and make our web site load much faster. 36 03:11.340 --> 03:16.920 So if you download the jQuery library straight up then you'll see something that looks a bit like 37 03:16.920 --> 03:17.770 this. 38 03:17.790 --> 03:25.830 Now as with all libraries they'll come up with a standard version that is human readable and they'll 39 03:25.830 --> 03:31.620 also have a minified version that's just intended for the browser. 40 03:31.620 --> 03:38.310 And this is so that you can customize the code if you wish and then minify it yourself, or if you don't 41 03:38.310 --> 03:44.330 want to do any customization then simply to just drop the jQuery file into your project. 42 03:44.340 --> 03:44.720 All right. 43 03:44.730 --> 03:49.920 So in the next lesson we're actually going to be getting down and dirty and actually exploring all the 44 03:49.920 --> 03:54.930 things that you can do with jQuery, starting by selecting elements. 45 03:54.980 --> 03:58.470 So for all of that and more, I'll see you on the next lesson.