This is our 9th lesson of Html5 Tutorial course.Here you will discuss about Poliyfills and how to use Modernizr.load.So let’s start.
Html5 Tutorial – Lesson 1 Html5 Tutorial – Lesson 6
Html5 Tutorial – Lesson 2 Html5 Tutorial – Lesson 7
Html5 Tutorial – Lesson 3 Html5 Tutorial – Lesson 8
Html5 Tutorial – Lesson 9
3.3:Poliyfills
Within the wiki of Modernizr Github report they maintain a massive number of Polyfills.So you’ll want to make sure that you bookmark this so that you can come back from time to time because essentially almost all of the new Html5 features and APIs are available here.
So let’s take a look in the previous lesson we were focusing on local storage.So we scroll down here, we can see with a handful available to us.We’ll take a look at this one created by Remy sharp.
Now this will take us to chest and I don’t worry if this seems too complicated we won’t go over every line but it’s important to understand the basic idea behind the Pollyfill.And that is it shouldn’t change the way that you normally interact with this APIs.So take a look at first,he is determining whether the browser at the end of support for local storage.So here he told if its undefine storage which is almost the same and that case we need to implement a fallback for those browser.So he creates a new optical storage and here some of his private functions but if we scroll down you can see that what he’s returning is this object right here.
We normally interact with local storage we haven’t gotten into it just yet but give you a simple example as we could say localstorage.setItem and we are going apply a key and then we also associate a value of that key and that will be available even if the user closes their browser and open it back up.And this is why it’s very helpful even for things like maybe you’re leaving a comment, in every 5 seconds your comment is save to local storage.
And that way if your internet goes out or your browser crashes when you reopen that page your comments will still be save there.Now let’s returned and you can see here he’s returning this object and I want you to take note one of the methods available at set item in the same thing right here
Polyfill is a JavaScript shim.So if we scroll down,he says if the browser does not support local storage then we are going to create our own version of local storage and it’s accessible in the same way.
So if we come back if the browser doesn’t support it we create window. Local storage in make it equal to this object right here in this object contains all of the message that you would normally work with.
And this is why it’s really need because as a user you dont have to do anything else you don’t have the code differently you simply bring in the script and it will fil in those gaps in the browser that need it.
So let’s take a look at how we can use this.I scroll to the top and I will choice the all and copy that.Come back to our file and I create a new file to save this and will save it as local storage.js.Next for this lesson we’re going to import it as we normally would with the script.
However in the next lesson I’m going to teach you how to keep from doing that but with this simplistic approach.The page load and we bring in local storage lockers storage dusted slang determent do we need a filling those gaps maybe or maybe not.And then we continue on and based upon the context local storage that said item refers to something different.
For example in Chrome my browser supports its so this is going to work perfectly as it is.In fact this code will never run because this will not be true.However in Internet Explorer 6 this code once again going to run but the browser doesn’t support local storage so this will be undefined in which case the Pollyfill takes place we set up our own window. Local storage in, then by the time we get to this line now local storage.setItem is referring to the method on remedies Polyfill.
Next we’re going to take a look at something in here’s the issue we are importing the script in every browser but we know Chrome doesn’t need it but still Chrome has to read through all this then it even though its not running and we’re still burning in those extra kilobytes.So wouldn’t it be nice if we could run a test and only load the script on the condition that it is in fact required.Otherwise we won’t do anything and we can do that with modernizr in the next lesson.
3.4:modernizr load
If we refer back of the documentation will see there is a tutorial on working with Modernizr.load.This is actually come from something called yepnope and they are asynchronous script letters.So I don’t want you to get scared by that the basic idea is that rather than waiting for all of these scripts to load in one after the other or in parallel we can instead load them asynchronously so that the rest of the page does not have to wait while they load.Now not too long ago this tool yepnope was created into modernizr.
So there are two benefits here to combine into.One,with Modernizr load we get that helpful asynchronous script loading but also it works really well with Modernizr because we can perform tests.So the way yepnope or modernizr.lod works is we specify our test and in this case we see here we’re testing for modernize.geolocation.
and if geo location is supported by the browser in that case we’re going to bring in the script called geo.js.However if it is not supported then we can bring in a polyfill.So let’s take this and try it out in our own project as we discussed in the previous lesson for all browsers they’re having to bring in the script that’s not ideal.
So this time when I comment that out and we’re going to say Modernizr.load and first we want perform our test.And that’s going to be does the browser support local storage moderniser.local storage.Now in this case we don’t require a yepnope because there is nothing specific to do.We instead went to provide of pollyhill if it’s not supported.Now in the case that is not supported we’re going to pull in our local storage polyfill like so.
We can remove this entire script from our page now it will only be loaded on the event that modernize.local storage returns False which means for an older browser.Now what you’re going to find out if we come back from developer tools and I view the console error object has no matches right here.
And this is because we are using the development version of Modernizr.
However that does not have support for yet know for modernization upload so when you want to use this you need to return to modernizr and create your own custom build.So Miss Kay’s fries were still sort of in development mode I’m going to toggle everything here.
And now if I come to the extra section can you see Html5 shim is broaden as well as Modernizr load and that’s what we need here.So let’s generate that and I’m going to copy all is well or we can download it and lastly I’m going to rename this just so it’s easier for me to write.Now I’m going to come back to script and we’re just going to refer to it like so.We reloading page and now we’re no longer getting that error.Let’s go to the elements and I want you to take note that know where local storage.Js been brought in and that’s because of course this browser has support it.
So we don’t have to waste time bringing in that file.However if you were to load this page and say Internet Explorer 6 in few the generated source you would see a error because that browser does not supported it.So we do need to bring in our polyfill.So there’s one thing that’s important to take notice is another way that we can use modernizr is simply by passing modernizr.lod and we could pass in jQuery.js you you can simply do that and then begin working with jQuery object like that
In fact you’re going to get an error when you do that.In the reason why this might be confusing at first but the way yet no works is a single ass which means it’s not going to load that script immediately but it will loaded as soon as possible.In that way it’s not the process of loading the rest of the page.But you don’t get into situations where this isn’t going to work because we do not yet have access to the jQuery object.
So you have two options in these cases one pass the and note printers with we change this to test and then the time script.js is brought in it will have access to the jQuery object.And then you can do the same thing with yepnope.If there something you wanted to for both of them you can pass both commonly do for smaller things is used the complete method.Than passive functions and we can say for now alerts do something like that
I’ll come back reload the page and we do get that alert.And this method is going to execute once all of these files have downloaded in and they can be worked with.Now without turning up a virtual machine in switching over Internet Explorer let’s represent that Chrome does not support local storage.So I’m going to negate this and because we know it’s true!In this case we don’t really require anything but we can take our local storage, and we can put that in there so if we did everything right localstorage.Js should be brought in.
I reload the page open up the head section and there is little storage is now being brought in if we come back and we bring it back to normal browser does supported in which case the script is never loaded.And that’s exactly how you used modernizr.load
The post Html5 Tutorial – Lesson 9 appeared first on DevsTrend.