Btw if you're in a hurry you can just fast-forward to 10:52 haha! I use Apple Keynote for everything. 💡Just a heads up: I explain these concepts in a way that personally helped me conceptualize the processing order. E.g. the event loop doesn't directly "prioritize" the microtask queue, rather they're just processed and completed before the event loop continues to the next task. One iteration of the event loop is executing a single task, processing all available microtasks, and then updating the rendering of the page if needed (that's not covered in this video, might be another video, things like requestAnimationFrame). However, within your code, you'll get the sense that the microtasks are "prioritized" over the task queue-based parts.
I've been in software development for 16 years. This video is outstanding. Probably one of the best I've ever seen for JavaScript. Lydia, I want to encourage you to keep doing these if you desire. This visual, animated approach combined with your ability to teach is a home run. Thank you so much for doing this. I am now subscribed.
Same here. It is really hard to find _good_ tutorials that bring both a good overwiew _and_ good examples for the details. And then presented with really appealing diagrams, even dynamic ones!
I think I don't want to understand any other concept if it's not explained this way. This is GOLD! This was so satisfying for my brain for some reason, this ACTUALLY MADE SENSE.
If you don't understand this here, you need to repeat it over and over, because this is by far the best explanation on the entire internet for this topic.
10 / 10 quality. The explanation of the different queues helped clear up confusion I had in the background of how asynchronous tasks work underneath the hood in the context of Javascript. Even with a bachelor's degree in computer science it was still a pretty head scratching concept thinking "how does the engine know what is I/O blocking and what is not? How does it handle that?". I would always hear "oh its just on the event loop! Its just on the event loop!" but I'd be like "all these diagrams suggest the blocking and non-blocking are on the same queue". I had no idea about the microtask queue and that is where fetch's then calls are appended to. Also I can't help but look at the word "event loop" and just think of Froot Loops.
Just wow. I'm a beginner, and I came from The Odin Project. This is the best video tutorial I've seen so far for such a complex topic. The visualization is just perfect. Some senior devs in comments said that they finally understood this topic thanks to your video after years working in this industry and I've got it already in the learning process and it feels so good. Thank you.
If anyone had a question in the Challenge section as to why console.log(1) didn't execute immediately, even though it was in the Microtask Queue and the Call Stack was empty, read on. All the code on the left is a script and can be represented as an anonymous function. At the very beginning of the "Challenge" section in the Call Stack, there should have been an "anonymous" block. This block starts executing (the script is being executed), and then everything is the same as in the video, except that the "anonymous" block is always at the bottom of the Call Stack. The "anonymous" block disappears from the Call Stack after console.log(5) is executed, because it is the last operation in the script. And so when the "anonymous" block disappears from the Call Stack, Microtask Queue and Task Queue processing starts (10:04). Great video!
Yep, the anonymous block is referred to as Global Execution Context
3 месяца назад+2
Thanks! Because of this the explanation in the video seemed a bit conflicting with this example. Now it seems like an important piece (for understanding) has been omitted from the visualization. Would have been great to include this in the video. However the explainer and visualization are outstanding even without this minor miss (though it can cause some confusion).
@Lydia Hallie Are you kidding? This level of detail, every animation, every transition, the highlighting (and temporarily hiding unimportant components) is just so good. Very well done, love it.
it is very very rare to have material like this presented in such a visual and engaging way .. animation is hardly ever used in js tutorials. Visualization of these concepts is so important for the visual learners out there. THANK YOU. instantly subscribed.
I immediately subscribed after watching this video , So awesome explanation and made my day . That DOPAMINE hit after understanding the concept which gave you headache . Thank you so much ❤
This is so good??? I have watched 40-minute-long videos on Event loop and could not get an idea of what goes on in the background, the efforts it must've taken to create something so good! Commendable work ma'am. This is the best explanation out there for the event loop!
Amazing video ! I've been a NodeJS developer for 8 years now and I didn't know this in details ! Awesome ! Its also great to see new faces in the IT video ecosystem, specially women who are under represented. And the animations are awesome ! Thank you for the work
Top tier presentation, this is easily one of the best visualizations I've seen on RUclips. You clearly have excellent teaching and communication skills. I know you are focusing your content on JavaScript but if you were ever interested in giving us an overview of some of your presentation techniques in Apple Keynote, I think many viewers could greatly benefit from it. Keep up the awesome content! I can't wait to see what videos you have in store for this channel.
THIS IS THE BEST EXPLANATION OF EVENT LOOP! Seriously, I've already worked with js for 3 years, seen several videos about it, and never it has been so clear (actually the reason why I opened this video) Thank you for your work!❤
I'm a visual learner, and I've been software development for more than a decade. This is the first time I felt engaged and easy to understand how JS works. very informative. Please keep it rolling, I'm hooked, and I don't want this to stop.
What a brilliant girl! I could only imagine the process of coming up with visuals for this video, they are amazingly simple to understand! And they are also in sync with your commentary! Wow! 🧡
Just jamming here... being C++ developer for 30 years, reading all these comments about seniors and juniors...I wonder: Guys have you ever read a text book about your profession? Nice video btw!
The world cheers for splashy things and call themselves a "coder" and then cry that AI will take the job. The traditional way is long gone where we used to read the books, make our own interpretation and test our understanding by hands-on coding. But, a good explanation in the video. no doubt.
I have dived into the javascript worlds nearly 2 years and read about event loop from different topics and blogs but after sometimes I did not remember anything but I don't think I will anymore. Thanks for this. Please, keep doing this.
I programed in C/C++, now I'm starting with JavaScript and Django framework. It wasn't clear for me how Javascript execution worked with just 1 single thread. This visualization is perfect, helped me a lot.thanks.
A really great video. This usually takes full chapter in book & 2 classes to fully understand event loop. This video beautifully condenses whole info in 12 mins. The presentation is simply amazing with amazing graphics. Thank You 👏👏👏
i dont usually comment but this was the best explaination of event loop... but to make things more clear you should also mention that microtask takes priority like if a task is in microtask queue it will immediatedly run after the current task in call stack but before the next task is processed in call stack.. Btw thank you for this lovely video.
Thanks for a great explanation! After 15 years I never once had a need for knowing about this the difference between the queues. But now with all the tech-interviews it seems like this is essential knowledge.
I am a project manager with 5 years experience in fullstack development inside a University and this is the single best video about the insides of JS I've had the pleasure of watching. Thx
This video is way better than watching my favorite golden buzzer artist for the first time. Off the charts explanation. This video has just made history. Thank you so much. I had gone through a similar tutorial, yet, this one is so easy to follow.
God bless you Lydia. Hands down the most important and enlightening JavaScript tutorial on the RUclips that every serious JavaScript developer needs. God
You've broken this down so simply that I'm surprised this isn't the standard model for teaching this. I don't deal with js a ton so you've helped explain behaviors I had witnessed but never fully understood, thank you!
It is insane how much information you you were able to convey in one short video, I knew async tasks were pushed off to be filled later but I had no mental model how that worked until now.
5:11 important moment here: setTimeout is not just magically gets push onto task queue, but on every event loop run there is check if we need to run some operations (check if set timeout delay is over, if callback was triggered etc.), therefore it's not guaranteed that set timeout callback will get executed exactly in n seconds, but it is guaranteed that it will execute *after* 200ms
4 months ago, I learned event loop from your dev.to post titled JavaScript Visualized: Event Loop - which is the best visualised minimalistic explanation I have come across, and then to refresh it, I watched this video you recently posted. Thank you Lydia Hallie.
This is phenomenal. I just started learning javascript coming from an Embedded systems background and never understood how the execution of commands happened. This cleared a year of misconceptions for me and unprecedented years of troubles. Wow! Some people are just goated!
I have no words. I’ve never seen a coding, programming or any kind of software dev video this well laid out! Your visuals and your ability to “talk shop” are both incredible. If you sell a course, I’d buy it immediately.
I've been increasingly worried for newer developers because the JavaScript ecosystem just keeps getting more and more complicated as time goes on, with new frameworks popping up every week. But seeing this video, I felt some amount of jealousy because I realized quality educational content also keeps getting published everyday. Now, I just hope this doesn't get lost in all the content because this is by far the best video I've seen discussing the event loop to a completely new JS developer.
Got it right ! Once you understand the basics this is the best video ever to understand how the event loop and overall js engine execution work ! Thanks lydia
I think this is the best event loop explanation in the internet. You have described each and every point in such detailed way, making this topic feel so simple to understand. The animation is also made with such detail, making life easier.
This is excellent work, Lydia! Your visualization of the event loop definitely can help millions of JS engineers understand it better. Huge impact, congratulations!
She has everything: the knowledge, the communication skills, the expressions, and, above all, the beauty. And hats off to you for this amazing animation and explanation!
Your explanation and presentation is very clear and understandable. It's really amazing. Previously, I couldn't remember how it works. Thank you so much Lydia. Subscribed right away!
Hai Lydia,,, your javascript content explanation that makes me interested in learning javascript, and this deserves to be a premium content class because your content is very neat. thanks you 🤍
Never change the style of your videos. Loved the content segregation and understood the concept in a more visual way. Description -> Explaination -> Exemplification -> short question Loved it ❤
![BRASIL vs. URUGUAY [1-1] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 12](http://i.ytimg.com/vi/-hWBAuxF1eY/mqdefault.jpg)
Btw if you're in a hurry you can just fast-forward to 10:52 haha! I use Apple Keynote for everything.
💡Just a heads up: I explain these concepts in a way that personally helped me conceptualize the processing order.
E.g. the event loop doesn't directly "prioritize" the microtask queue, rather they're just processed and completed before the event loop continues to the next task. One iteration of the event loop is executing a single task, processing all available microtasks, and then updating the rendering of the page if needed (that's not covered in this video, might be another video, things like requestAnimationFrame). However, within your code, you'll get the sense that the microtasks are "prioritized" over the task queue-based parts.
Gotta love you for respecting our time.
From where did you learn?
Can you please extend this more to explain NodeJS runtime 🙏
Those slides are wonderful, it’s still a mystery to me how they are so good. Skills.
Thank you for doing this. I love the visuals you made here!
I have been programming for 15 years and I don't think I have seen information presented so succinctly in that span. Thank you so much for this.
100%
Absolutely 🤟
I agree completely. 15 years myself.
or you are just flatered becuase she is a programmer and a girl😁
Same. 12 years. These visualizations are so satisfying and to the point.
i think thousands of senior developers finally understood it today.
🤯
fake senior developers. No theory , not a real dev!
Knowing the todays reality, you wanted to say "junior" developers ? : )
@@KAIDO-mi1tr haha
now adays, senior and junior have similar salary, so whats the difference
Where has this channel been all my life?
Exactly I was thinking the same 😂
In the future obviously. 😂
She already done a longer vid for freeCodeCamp 2 years ago and she's on FrontedMasters as Teacher
ruclips.net/video/xckH5s3UuX4/видео.html
Same here❤❤❤❤❤
Exactly!!
This should be a gold standard for all programming tutorials on YT. Really awesome
Actually the OG is this talk ruclips.net/video/8aGhZQkoFbQ/видео.html
I've been in software development for 16 years. This video is outstanding. Probably one of the best I've ever seen for JavaScript.
Lydia, I want to encourage you to keep doing these if you desire. This visual, animated approach combined with your ability to teach is a home run.
Thank you so much for doing this. I am now subscribed.
9 years ago was this video... her video seems a rip-off
ruclips.net/video/8aGhZQkoFbQ/видео.html&ab_channel=JSConf
I can only agree. Especially for this topic, it was hard to find such an amazing explanation. You really helped me out. Thank you,
ditto
You should really also credit the original creator of visualized event loop
ruclips.net/video/8aGhZQkoFbQ/видео.html
Same here. It is really hard to find _good_ tutorials that bring both a good overwiew _and_ good examples for the details. And then presented with really appealing diagrams, even dynamic ones!
The hardest part of explaining ANYTHING is coming up with visuals that help. You crushed it with this. This is brilliant, truly.
I think I don't want to understand any other concept if it's not explained this way. This is GOLD! This was so satisfying for my brain for some reason, this ACTUALLY MADE SENSE.
If you don't understand this here, you need to repeat it over and over, because this is by far the best explanation on the entire internet for this topic.
10 / 10 quality. The explanation of the different queues helped clear up confusion I had in the background of how asynchronous tasks work underneath the hood in the context of Javascript. Even with a bachelor's degree in computer science it was still a pretty head scratching concept thinking "how does the engine know what is I/O blocking and what is not? How does it handle that?". I would always hear "oh its just on the event loop! Its just on the event loop!" but I'd be like "all these diagrams suggest the blocking and non-blocking are on the same queue". I had no idea about the microtask queue and that is where fetch's then calls are appended to.
Also I can't help but look at the word "event loop" and just think of Froot Loops.
Just wow. I'm a beginner, and I came from The Odin Project. This is the best video tutorial I've seen so far for such a complex topic. The visualization is just perfect. Some senior devs in comments said that they finally understood this topic thanks to your video after years working in this industry and I've got it already in the learning process and it feels so good. Thank you.
The visualization is outstanding, providing one of the clearest and most informative explanations I've come across.
If anyone had a question in the Challenge section as to why console.log(1) didn't execute immediately, even though it was in the Microtask Queue and the Call Stack was empty, read on.
All the code on the left is a script and can be represented as an anonymous function. At the very beginning of the "Challenge" section in the Call Stack, there should have been an "anonymous" block. This block starts executing (the script is being executed), and then everything is the same as in the video, except that the "anonymous" block is always at the bottom of the Call Stack. The "anonymous" block disappears from the Call Stack after console.log(5) is executed, because it is the last operation in the script.
And so when the "anonymous" block disappears from the Call Stack, Microtask Queue and Task Queue processing starts (10:04).
Great video!
Thank you. Absolutely wondered this.
Yep, the anonymous block is referred to as Global Execution Context
Thanks! Because of this the explanation in the video seemed a bit conflicting with this example. Now it seems like an important piece (for understanding) has been omitted from the visualization. Would have been great to include this in the video. However the explainer and visualization are outstanding even without this minor miss (though it can cause some confusion).
Lydia, your teaching style is the best I've seen. Please continue to educate us.
Finally the youtube algorithm blessed me with this channel 😭
@Lydia Hallie Are you kidding? This level of detail, every animation, every transition, the highlighting (and temporarily hiding unimportant components) is just so good.
Very well done, love it.
She was pretty serious about what she was teaching
best way I've ever seen anyone explain anything in my entire life.
I'm speechless!
it is very very rare to have material like this presented in such a visual and engaging way .. animation is hardly ever used in js tutorials. Visualization of these concepts is so important for the visual learners out there. THANK YOU.
instantly subscribed.
Okay ma'am, I noticed you only have 3 videos on your channel. Don't stop until you have at least a 20 video playlist on your channel. This is gold.
wow the visualization is awesome. The colours, gradients, design and animation. Its perfect down to the tiny details.
was just about to say the same - those are some awesome visualizations
I think, even Google & RUclips Developers really enjoy seeing this explanation, very nice and neat.
💯
I'm a web programmer for 15+ years now and I'm stunned how well made this explanation is. really Amazing! Subscribed right away!
I immediately subscribed after watching this video , So awesome explanation and made my day . That DOPAMINE hit after understanding the concept which gave you headache . Thank you so much ❤
This presentation is a pinnacle of visual communication. We are dealing here with a highly organized mind.
This is so good??? I have watched 40-minute-long videos on Event loop and could not get an idea of what goes on in the background, the efforts it must've taken to create something so good! Commendable work ma'am. This is the best explanation out there for the event loop!
The sign of mastery is being able to simply explain a complicated concept. This preso is a thing of beauty... and mastery!
Amazing video ! I've been a NodeJS developer for 8 years now and I didn't know this in details ! Awesome !
Its also great to see new faces in the IT video ecosystem, specially women who are under represented.
And the animations are awesome !
Thank you for the work
Top tier presentation, this is easily one of the best visualizations I've seen on RUclips. You clearly have excellent teaching and communication skills. I know you are focusing your content on JavaScript but if you were ever interested in giving us an overview of some of your presentation techniques in Apple Keynote, I think many viewers could greatly benefit from it.
Keep up the awesome content! I can't wait to see what videos you have in store for this channel.
This video should receive the Oscar for best animation
THIS IS THE BEST EXPLANATION OF EVENT LOOP!
Seriously, I've already worked with js for 3 years, seen several videos about it, and never it has been so clear (actually the reason why I opened this video)
Thank you for your work!❤
This is the best explanation of the event loop I've ever seen.
Few months later I will be watching the 500th video on this channel and by that time this channel will be a gem for developers.🙌🙌
This is the type of visualization that coding vids need
it reminds me of debuggers we used to have in the late 80ies
I'm a visual learner, and I've been software development for more than a decade. This is the first time I felt engaged and easy to understand how JS works. very informative. Please keep it rolling, I'm hooked, and I don't want this to stop.
I finally understand Event Loop after 1 year writing JS.
Don't worry, many devs still don't understand it after 10 years of writing JS.
I thought I did… until today😅
No you do not 😂
huh do you need to understand it? coding js/ts for 3 years now
Then you're a shit developer tbh
Perhaps the best explanation of this concept I ever came across. By the way, I have been programming since around 20 years now.
Hands down, the best event loop explanation ever!
The best explanation and lesson I have ever seen. Visualisation is extremely amazing. Your explanation and sound is very clear.
Thank you.
This is the best explanation I've seen.
What a brilliant girl! I could only imagine the process of coming up with visuals for this video, they are amazingly simple to understand! And they are also in sync with your commentary! Wow! 🧡
Just jamming here... being C++ developer for 30 years, reading all these comments about seniors and juniors...I wonder: Guys have you ever read a text book about your profession?
Nice video btw!
The world cheers for splashy things and call themselves a "coder" and then cry that AI will take the job. The traditional way is long gone where we used to read the books, make our own interpretation and test our understanding by hands-on coding.
But, a good explanation in the video. no doubt.
This lady right here has put some incredible hard work in making this video.
Fucking hell Lydia, this is incredible
Ah thank you Matt! 🙏
Thanks for making a video that shows "How a language works" rather than "How to work with the language"
This explanation is worth a thousand times compared to any conf. talk! HATS off to you Lydia!❤
I have dived into the javascript worlds nearly 2 years and read about event loop from different topics and blogs but after sometimes I did not remember anything but I don't think I will anymore. Thanks for this. Please, keep doing this.
I programed in C/C++, now I'm starting with JavaScript and Django framework. It wasn't clear for me how Javascript execution worked with just 1 single thread. This visualization is perfect, helped me a lot.thanks.
While JavaScript remains an atrocious language, I enjoy the way you present and explain these ideas.
After a long time, now I understand how JavaScript works behind the scenes. Thank you so much for this great job
A really great video. This usually takes full chapter in book & 2 classes to fully understand event loop. This video beautifully condenses whole info in 12 mins. The presentation is simply amazing with amazing graphics. Thank You 👏👏👏
i dont usually comment but this was the best explaination of event loop...
but to make things more clear you should also mention that microtask takes priority like if a task is in microtask queue it will immediatedly run after the current task in call stack but before the next task is processed in call stack..
Btw thank you for this lovely video.
Thanks for a great explanation! After 15 years I never once had a need for knowing about this the difference between the queues. But now with all the tech-interviews it seems like this is essential knowledge.
I am a project manager with 5 years experience in fullstack development inside a University and this is the single best video about the insides of JS I've had the pleasure of watching. Thx
This video is way better than watching my favorite golden buzzer artist for the first time. Off the charts explanation. This video has just made history. Thank you so much. I had gone through a similar tutorial, yet, this one is so easy to follow.
God bless you Lydia. Hands down the most important and enlightening JavaScript tutorial on the RUclips that every serious JavaScript developer needs. God
You've broken this down so simply that I'm surprised this isn't the standard model for teaching this. I don't deal with js a ton so you've helped explain behaviors I had witnessed but never fully understood, thank you!
this is absolute CINEMA of computer science, thank you a lot Lydia
Bravo! As a fellow senior dev I'm extremely impressed by the level of detail and explanation.
The first time I finally understand what microtasks are! Thank you!
First time on RUclips, I finally found someone who teaches like my class teacher
This was actually very comprehensible. I was expecting this to be very convoluted but you made it very easy to understand!
It is insane how much information you you were able to convey in one short video, I knew async tasks were pushed off to be filled later but I had no mental model how that worked until now.
5:11 important moment here: setTimeout is not just magically gets push onto task queue, but on every event loop run there is check if we need to run some operations (check if set timeout delay is over, if callback was triggered etc.), therefore it's not guaranteed that set timeout callback will get executed exactly in n seconds, but it is guaranteed that it will execute *after* 200ms
4 months ago, I learned event loop from your dev.to post titled JavaScript Visualized: Event Loop - which is the best visualised minimalistic explanation I have come across, and then to refresh it, I watched this video you recently posted.
Thank you Lydia Hallie.
This is phenomenal. I just started learning javascript coming from an Embedded systems background and never understood how the execution of commands happened. This cleared a year of misconceptions for me and unprecedented years of troubles. Wow! Some people are just goated!
That was one of the most well edited tutorials i've seen, congrats!
can not be simpler and more elegant way of showing the concepts, thanks for the lessons.
I have no words. I’ve never seen a coding, programming or any kind of software dev video this well laid out! Your visuals and your ability to “talk shop” are both incredible. If you sell a course, I’d buy it immediately.
I've been increasingly worried for newer developers because the JavaScript ecosystem just keeps getting more and more complicated as time goes on, with new frameworks popping up every week. But seeing this video, I felt some amount of jealousy because I realized quality educational content also keeps getting published everyday. Now, I just hope this doesn't get lost in all the content because this is by far the best video I've seen discussing the event loop to a completely new JS developer.
This video and what the heck is an event loop anyway at JsConf are incredible vids to understand these tricky concepts. Beautifully explained.
Got it right ! Once you understand the basics this is the best video ever to understand how the event loop and overall js engine execution work ! Thanks lydia
The best visualization I have seen on JavaScript's Event loop. Thanks Lydia
This is so important in JavaScript! Finally someone made a good video topic on this. Made me understood the call stack so clearly.
The amount of detail into making this presentation is phenomenal! ✨👏
I think this is the best event loop explanation in the internet. You have described each and every point in such detailed way, making this topic feel so simple to understand. The animation is also made with such detail, making life easier.
This is excellent work, Lydia! Your visualization of the event loop definitely can help millions of JS engineers understand it better. Huge impact, congratulations!
I never understood this concept until i ran into this video. Thanks a lot
I've been dreaming of one day creating such video for years. I'm happy seeing someone did it beautifully, especially when it is a soft spoken girl.
She has everything:
the knowledge,
the communication skills,
the expressions,
and, above all, the beauty.
And hats off to you for this amazing animation and explanation!
I initially watched this just for a recap, but the concept was so clear. It was great to see.
this single video has taught me more about js under the hood then months of watching other videos
Ma'am you just simply the whole process in a fun way, honestly I'll like to be your student 😅
Been doing javascript for over a decade, and this was the coolest explanation I've ever seen!
This is one of the best videos on the event loop. The visuals of the different components of the runtime really help.
This channel is such a gem. I’ve never had a clearer explanation of event loop until now. Thank you and you’ve got a new subscriber.
The best visualisation of the JS runtime I've ever seen! Respect Lydia!
Your explanation and presentation is very clear and understandable. It's really amazing. Previously, I couldn't remember how it works. Thank you so much Lydia. Subscribed right away!
I've already learned all this, but this is the probably the clearest, best, and most beautiful explanation I've seen. I need to share this...
One of the best video to understand Event loop clearly,this helps me to clear my all doubts about event loop
Finally on RUclips!! Welcome Lydia, it is a privilege to have your content here for free 🙌
Whoa, I'm so happy that this channel exists. The visuals help SO MUCH with understanding all the JS flow!
After wandering over 100s of videos, finally I can say I understand Event Loop!
Hai Lydia,,, your javascript content explanation that makes me interested in learning javascript, and this deserves to be a premium content class because your content is very neat. thanks you 🤍
This presentation is crazy good. I can only imagine the amount of work put into it. Congratulations.
Best Ever Explanation of this concept I heard so far.
Never change the style of your videos. Loved the content segregation and understood the concept in a more visual way.
Description -> Explaination -> Exemplification -> short question
Loved it ❤
One of the best video on event loop, till now on youtube, words are not enough to appreciate it... really... thank you...
I must say, this is the best visual representation of JS I've seen so far
Lydia, your explanation is by far the clearest i've seen out there. I'd love to watch something similar for async-await!
Loved the explanation. I can see how much effort you've put into making this. It makes it super easy to understand.