These small videos are really good. Because you can find full blown project tutorials on RU-vid but these conceptual things are not available that often
This video helped me make sure my loading animations rendered crisply on page load. Before, even with gsap, everything appeared choppy and glitchy. One simple keyword and it animated as planned. Your my hero! I was going to scrap the entire loading animation
Kyle - you have an absolute gift for making clear, concise, straightforward explanations. Shall be binge-watching. Oh yes: and you have a clear, neutral voice as well. Cannot tell you how many times I have bailed due to affected, whiny voices!
@@yadneshkhode3091 modules let you use "import {something} from "./some/javascript/file.js" in javascript, it's very useful because now dependencies can be declared inside javascript files instead of html files, they are also self contained code and don't pollute the global environment so you don't need to use an IIFE to isolate your code. In the html code you import a module like this : . They defer by default so you don't need to add "defer" to the script tag
@@soniablanche5672 Wou never heard of it in this time! But I'm web developing for 7 months now so it's no surprise haha. I'll be learning about that, thanks for that piece of knowledge!
your content is so clearly ordered and straight to the point .. so the viewer knows the roadmap and then everything is concretized with different examples that are small easy to follow and to the point as well .. one of the best teachers bro .. hats off and big thanx .
Good explanation but need to provide the sample code to the viewers so that they can play with it for better understanding. You can upload the same on gitHub and add the link in description.
Sorry. This is one of my older videos. In my newer videos I have links to both a github and codepen for all applicable videos. I don't generally add code for a video like this though since it is mostly about explanation and the actual code does not have an endpoint or use.
I am missing some notices about inlineJS. As inlineJS often makes sense if you have less then 1kb. But defer does not work on script-tags in general but just on them if they have a "src" attribute. So if you want to defer inlineJS you can execute it on the event of "DOMcontentLoaded" or put it before the end of the closing body-tag. Its a pitty "defer" does not work on inlineJS. Thank you for your tutorial!
I'm glad you enjoyed the video. I would produce more videos each week, but it is tough enough for me to manage a full time job and two videos a week. I am always trying to improve my workflow, though, to create videos faster and hopefully more often. As for your suggestion on the JavaScript constructor, what exactly would you like me to cover about it?
Backend dev who has to do some front-end from time to time. I wrote a function called setPolling to make sure some elements existed before running. Embarrassing to say I didn't know about putting the scripts at the bottom of the page. I need to go add the defer tag and remove the setPolling code on production pages serving 10s of thousand users per day. I use to make fun of front-end devs but after doing it a while I can say in many ways it harder that what most backend devs have to deal with.
Which script did you use to show the various loading times and steps in the console? Can it be downloaded anywhere? Thank you so much for your great informative no-BS videos!
I do not have the script available for download. If I remember correctly I just used a very large script tag to simulate the loading and added a little bit of JS to print to the console when loaded.
@RobertWildling You can use console.time() and console.timeEnd() to figure out when certain parts of the program load. For instance, in my JavaScript file, I placed console.time("JavaScript Loaded") at the beginning of the JS file and console.timeEnd("JavaScript Loaded"); at the end of my JS file. The result will show in the console as something like: JavaScript Loaded: 0.130859375 ms You can do the same for your HTML file by placing both console.time("html start); console.timeEnd("html start"); at the START of your HTML file and console.time("html end"); console.timeEnd("html end"); at the END of your HTML file. The total end result if you used defer could be: html start: 0.003173828125 ms html end: 0.001953125 ms JavaScript Loaded: 0.130859375 ms When I did not use async or defer AND the link to my js file was before the HTML (not at the end of the body section), the result was: html start: 0.0029296875 ms JavaScript Loaded: 0.05078125 ms html end: 0.001953125 ms I am unsure if this is how the presenter did it but it seems to work. I think the presenter had a separate JS file in which he targeted different parts of the DOM like the html and script tags and then just ran a console.time() and console.timeEnd() to determine the different load times of those targets. I hope this helps.
That's really useful! Many thanks for the video. Could you share more about the javascript that you have on the right showing when the html starts and ends etc.?
Brilliant video and amazing content. Just one doubt, how to clock and record the time of execution of a statement in the document (HTML) or script (JS).
So with "async" can be executed at anytime after the script is downloaded. There is no guarantee when it will be executed. It can be before the HTML is done parsing or after the HTML is done parsing. However, with "defer" is always executed after the HTML is done parsing. Correct me if I am wrong.
Is it correct to assume that by putting our js file in the head and using defer, we can then omit the event "DOMContentLoaded" or document.ready from jQuery (as we've been doing so far)?
@@WebDevSimplified you deserve it Kyle, your videos are well researched, straight to the point and very useful. Wanted to say that in the comment but was watching it in bed before I fell asleep 🙃 keep up the great work!
Very cool video! What's faster speed? Option1 at bottom of [body] tag or defer? Every time you refreshed the large.js you got insanely different results. Like one time it took DEFER large.js 20ms on each line another time 126ms and it took [body[ bottom with standard method 60ms on all lines. but [header] large.js took 14ms only, which was literally the fastest...
