❤Hello again!! It's been a while since I uploaded to my own UA-cam channel haha. 🔊 I'm aware that the audio is a bit low! Sorry about that, will keep this in mind in the future :) I have many ideas for upcoming videos, but let me know in the comments what you think I should cover next! 👇
Never seen a video with such clear drawings for explaining JavaScript promises and how they relate to the event driven nature of current JavaScript compilers. You've got a new subscriber!
I don't know if you want to go full time on this, but until then, I'm just so happy you decided to create content. It gives so much clarity on what JavaScript does, especially for people like me, who have aphantasia.
I started programming (BASIC on my APPLE ][+) in 1983 and have been in IT professionally for 25 years and I think your videos are amazing. Your explanations and visualisations are probably the best I've seen on UA-cam!
I have been working on JS for like 2.5 Years now, so far I worked only by doing "MONKEY SEE MONKEY DO" way, but now finally I have understood how promises actually works. Best explanation on earth. Watched multiple other tutorials but it was never clear not even close to what was explained in this video. Thanks a lot ma'ma.
Hello Lydia. Thanks for all the videos. I hope we have teachers like you everywhere. Watching your videos gives so deep understanding about the topics. Thanks you so much again!!!
just 2 days ago I was thinking about lack of a visualized teaching in javaScript and today I found this channel it's great keep going and keep the level of your videos above I think developer community needs more people like you
💡Also just a little clarification since I simplified the chained thens, I should've made this more clear by adding the event loop animation here as well! The first promise constructor resolves, the first then handler is encountered, this handler is immediately added to the microtask queue. However, the callstack isn't empty at this point because there are more thens to handle. So it keeps creating Promise Reaction/Promise Object records for the subsequent thens and these are added to the fulfill reactions list, but they aren't fulfilled at this point since the first handler is still waiting on the microtask queue. Only when the callstack is empty would this resolve and add the next then's handler to the microtask queue.
One of the best explanations I've seen. I'm so glad to see in recent years far better communication of confusing or complex ideas in coding. As an older bearded autistic Linux fan myself, I can confidently say simple communication hasn't traditionally been one of my peer groups strengths 😂. So I am glad my daughter will have far better role models explaining these concepts if she chooses to go into software development.
Great video as usual! A tiny addition I would make is that the then handler implicitly creates a fulfilled Promise as shown in the video by Lydia if you return a plain value - but the more common case for chaining is that you explicitly return a Promise yourself which usually is pending at first.
The visualization here is crazy to a point, me- who's very slow to understand, understood every word you said. Please keep doing more of this. I've even subscribed!
Just WOW!!! I have seen dozens of videos on Event Loop, and it made sense to me because some of them does not explain complete event loop. There is a famous video which tells event loop is simply a Stack and a Queue, and which always confused me when working with callbacks or promises. Thankyou very much for the video and looking forward for topics like "Closure".
This was INSANELY well done and highly educational. As someone who felt like I never fully grokked promises, after 4mins of watching a vid I now feel confident in how they fundamentally work. The visuals were amazing, progressive code snippets were perfect, and the script was tight and educational. I love that you basically made a clif notes video for a chunk of EXMA-262!! Insta sub! 👏
Superbly explained - as someone who hasn't really done much JS for a while and wanting to get back into it these kind of clearly explained resources are so useful 👏⭐
The way you explain thing is just perfect form me, and the awareness of you saying “you understand OR how well I(your self) explained” means to me you are beyond of a heck of a person/professional. Good job.
I have a frontend interview after 2 days and this popped up in my feed, thanks youtube, Great visualization of promise, really enjoyed how you explained how things work under the hood in Promise.
Asynchronous programming is one of the most difficult topics to learn for beginners, because it is difficult to visualize in your head the coherent work of the stack, queues, event loop and web API. Thank you for such a clear explanation of how Promises work. I'm waiting for your new videos. Greetings from Russia! 🕊
Well done! this visualization is the best I have ever seen for learning how the code works, plus your explanation is easy to understand kinda whish I had it when I learned promises
Have been reading your Javascript Visualised series on Medium, you're really underrated. Thank you for making these, hope you continue! Really helpful for beginners
Love it, strait to the point, useful infographics and efficient plan. I think the format is great. Details on "small" topics give the opportunity to beginners understand concepts and experimented people will always learn 1 or 2 things.
Nicely done! I've working with Promises since 2012 or before, but I never understood the details until watching your video in prep for an interview. Thanks!
Hey, it's good to see you on youtube, your visualizations got even better! 😀 Thanks! 💡Maybe execution contexts and closures would be good to cover next.
Really good video. Even though youtube is crowded with Language specific subjects, the quality of this video makes it special. What I don't see a lot in youtube (maybe you can take the challenge) is about programming developing flow and techniques. Once you master the language the big challenge is about the developing process flow. How to decompose a big problem. Where to start. When to be wary about coupling of functions and data structures, how to create functions that have only one responsibility, data structures, simplicity, scope of a function, top-down approach vs bottom-up approach. I think the format for the video could be to create a medium complex project (several videos) and stress good practices and what could have gone wrong, what are the internal thought process that recreated the flow.
Brilliant work!!, explained easily with story + visualizations, thanks Lydia. I hope u continue to make such Visualized videos for advanced concepts for key frontend techs such as JS, TS, ReactJS and NodeJS.
Thanks for uploading this video. Actually when I stated learning JS , I read your writing on MDN about " Promises & Async/Await" then I came to UA-cam if there is any video on this but it was not there. I got a bit disappointed. Now You upload this video. really happy for that. please make more video on JS.
Great tutorial! I really appreciate the clear explanations and visualizations you provide for JavaScript concepts. I think it would be awesome if you expanded your tutorials to cover other programming languages using the same visualization method. It could help learners understand different languages more easily and broaden their skillset. Keep up the excellent work!
Thank you so much for the visual. For a second video, the quality is insanely good. If you have a visual of the call stack/web API/task queue/event loop visual in png or jpg format, that’d be sooo sick. 🙏🙏🙏 Some ideas I think would be cool to cover : • I/O with node • traversing the DOM with browser JavaScript • covering the newest JS methods (one that mutates arrays vs those that don’t). • browser fetch and accessing the response data • top level await, where it works and where it doesn’t • asynchronous importing Advanced stuff that would personally help me: • ESModules vs CommonJS • path aliasing in typescript and having a JS path resolution solution as well • JSDoc. • declaration files in typescript • web workers This video is so good, I immediately subscribed. I can already tell you’re chock full of knowledge. 🙏🙏🙏
I've found this video quite interesting! I already had more or less a clear idea of how promises work, but honestly I didn't know the existence of the microtask queue (I thought all future tasks were added to the same queue). I'll share this video with the developers of my team so they can learn from you too 🙂 thanks for this!
Incredible! I was playing-pausing-testing-playing-pausing as the video went on and ended up writing: function createHandler() { console.log('creating success handler'); return () => console.log('.then Resolved!'); } new Promise((resolve, reject) => { console.log('promise function body'); queueMicrotask(() => console.log('microtask before resolve')); resolve(); queueMicrotask(() => console.log('microtask after resolve')); }).then(createHandler()); console.log('regular call stack'); Before the last part of the video I expected ".then Resolved" to occur before "microtask after resolve"; but the last bit about then-handler not being pushed to the microtask queue until the then actually runs kind of makes sense. I was assuming that the resolve itself would push the microtask.
I'm so happy this video exists! I've seen many courses that cover this topic but this one has been the most complete the easiest to understand. please teach us more, can i ask for how heap works in javascript video
Thank you, for this perfectly encapsulated lesson! Edit: Just realised Lydia already made a comment addressing the bug described below. Rest of original comment below for posterity. You clarify this in "Challenge", but the order does not appear correctly in "Chaining Thens": all 4 promises are created before the first lambda is run. The A+ spec guarantees that there's nothing but platform code on the call stack when a "then" is run, preventing a range of stale stack frame / unexpected concurrency bugs.
please keep doing these deep and technical videos! Also, it would be nice if at the end of the video, you give some recommendations on resources to learn more about the topic being touched.
❤Hello again!! It's been a while since I uploaded to my own UA-cam channel haha.
🔊 I'm aware that the audio is a bit low! Sorry about that, will keep this in mind in the future :)
I have many ideas for upcoming videos, but let me know in the comments what you think I should cover next! 👇
"Yes! It's been a while, but I am excited for all the upcoming videos."
Volume is a bit low on my side. boost it up on your next one!
Hopefully not in 2029 😉
How did you create those slides of animations? Please let us know.
Great video. I would also like to know, how are those animations are made?
Probably the best explanation of Promise I've ever seen
Never seen a video with such clear drawings for explaining JavaScript promises and how they relate to the event driven nature of current JavaScript compilers.
You've got a new subscriber!
I don't know if you want to go full time on this, but until then, I'm just so happy you decided to create content. It gives so much clarity on what JavaScript does, especially for people like me, who have aphantasia.
I started programming (BASIC on my APPLE ][+) in 1983 and have been in IT professionally for 25 years and I think your videos are amazing. Your explanations and visualisations are probably the best I've seen on UA-cam!
I have been working on JS for like 2.5 Years now, so far I worked only by doing "MONKEY SEE MONKEY DO" way, but now finally I have understood how promises actually works. Best explanation on earth.
Watched multiple other tutorials but it was never clear not even close to what was explained in this video. Thanks a lot ma'ma.
The visuals and animations are top notch, amazing work, keep it up!
Finally, new video after five years :')
Been so long
But, worth the wait.
Totally worth it! Great quality content!
Totally agree
Totally agree
This is the most well done and comprehensive video on JS Promises that I have seen so far!
Without your video, I had never even been close to fully understand how promise works under the hood.
Hello Lydia. Thanks for all the videos. I hope we have teachers like you everywhere. Watching your videos gives so deep understanding about the topics. Thanks you so much again!!!
just 2 days ago I was thinking about lack of a visualized teaching in javaScript and today I found this channel it's great keep going and keep the level of your videos above I think developer community needs more people like you
I paid many JavaScript courses on Udemy and none had content like Lydia. I just have to subscribe to this channel.
💡Also just a little clarification since I simplified the chained thens, I should've made this more clear by adding the event loop animation here as well!
The first promise constructor resolves, the first then handler is encountered, this handler is immediately added to the microtask queue. However, the callstack isn't empty at this point because there are more thens to handle. So it keeps creating Promise Reaction/Promise Object records for the subsequent thens and these are added to the fulfill reactions list, but they aren't fulfilled at this point since the first handler is still waiting on the microtask queue. Only when the callstack is empty would this resolve and add the next then's handler to the microtask queue.
How did you create those slides of animations? Please let us know.
How did you create slides and animations. Would be great help
Visualisation really makes any complex topic easier to understand. Awesome explanation, keep up the good work.
One of the best explanations I've seen. I'm so glad to see in recent years far better communication of confusing or complex ideas in coding.
As an older bearded autistic Linux fan myself, I can confidently say simple communication hasn't traditionally been one of my peer groups strengths 😂. So I am glad my daughter will have far better role models explaining these concepts if she chooses to go into software development.
Great video as usual! A tiny addition I would make is that the then handler implicitly creates a fulfilled Promise as shown in the video by Lydia if you return a plain value - but the more common case for chaining is that you explicitly return a Promise yourself which usually is pending at first.
it's the best video on promises, visualization will always make concept crystal clear and you nailed it.
wow amazing video Lydia! Really loved the high quality visuals and your teaching style. Keep it up!
This is a flawless presentation. I haven't found a single resource even mentioning the promise reaction record.
Found your channel from GreatFrontend. This is the best Promise explanation on the internet. The animations are top notch 🔥🔥
Please please continue this series this is so awesome ❤
The visualization here is crazy to a point, me- who's very slow to understand, understood every word you said. Please keep doing more of this. I've even subscribed!
Your illustrations are eye-catching and easy to understand. I like this approach and want to say "Thank you" for such a great video!
Just WOW!!!
I have seen dozens of videos on Event Loop, and it made sense to me because some of them does not explain complete event loop. There is a famous video which tells event loop is simply a Stack and a Queue, and which always confused me when working with callbacks or promises. Thankyou very much for the video and looking forward for topics like "Closure".
I was blown away by your frontend masters course, please make more content like this and don't change a thing!
This was INSANELY well done and highly educational. As someone who felt like I never fully grokked promises, after 4mins of watching a vid I now feel confident in how they fundamentally work. The visuals were amazing, progressive code snippets were perfect, and the script was tight and educational. I love that you basically made a clif notes video for a chunk of EXMA-262!! Insta sub! 👏
EMCA-262… DYAC 🤦♂️
@@nate_codes ECMA？
Superbly explained - as someone who hasn't really done much JS for a while and wanting to get back into it these kind of clearly explained resources are so useful 👏⭐
One of the best explanation about promises
Wow 🚀 This is the BEST explanation of promise concept I've ever seen. The visualization and your explanation work super well together 👍
Finally someone could explained how this whole magic is working in the way I can understand. Thank you so much :D
The way you explain thing is just perfect form me, and the awareness of you saying “you understand OR how well I(your self) explained” means to me you are beyond of a heck of a person/professional. Good job.
I have a frontend interview after 2 days and this popped up in my feed, thanks youtube, Great visualization of promise, really enjoyed how you explained how things work under the hood in Promise.
had to slowdown a video for the first time on yt instead of watching on 1.5x. Great work!
been waiting for 5 years, ‼️🗣️🗣️🗣️ legit firee🔥🔥🔥💯💯
This type of explanation is the best. Please keep uploading.
Asynchronous programming is one of the most difficult topics to learn for beginners, because it is difficult to visualize in your head the coherent work of the stack, queues, event loop and web API. Thank you for such a clear explanation of how Promises work. I'm waiting for your new videos. Greetings from Russia! 🕊
Well done! this visualization is the best I have ever seen for learning how the code works, plus your explanation is easy to understand kinda whish I had it when I learned promises
This video suddenly popup on my feed. Your explanation with visualization is outstanding. Hope you can continue with other topics. Thanks 👍
Have been reading your Javascript Visualised series on Medium, you're really underrated. Thank you for making these, hope you continue! Really helpful for beginners
This is the best explanation I've ever seen on "Promise" subject.
thanks for the video.
Just found a new channel to subscribe to,these explanations are a solid💯
Please make more videos like this. It makes my learning faster and easier.
Love it, strait to the point, useful infographics and efficient plan. I think the format is great. Details on "small" topics give the opportunity to beginners understand concepts and experimented people will always learn 1 or 2 things.
Your channel is a gem
By far the best explanation of this topic I've even seen
The best explanation I've ever seen! Thank you.
learning through both visualization and text is so underrated. please keep these videos going!
Nicely done! I've working with Promises since 2012 or before, but I never understood the details until watching your video in prep for an interview. Thanks!
WOW, this is some really high quality content.
Can definitely see your channel skyrocketing !
Keep up !🔥
this is the best explanation i have ever seen, simply awesome
You have given an excellent explanation with great visualisations. Thank you!
Welcome back and try again and never give up. Happy to see.
Hey, it's good to see you on youtube, your visualizations got even better! 😀
Thanks!
💡Maybe execution contexts and closures would be good to cover next.
Wow, that infographics animation is absolutely amazing ❤
Excellent content and explanation, congratulations for your work!
i just love you , mam
i never get that kind of quality, deep knowledge about js
probaly one of the best explanation for Promise, thank you so much for this video🙏
Really good video. Even though youtube is crowded with Language specific subjects, the quality of this video makes it special.
What I don't see a lot in youtube (maybe you can take the challenge) is about programming developing flow and techniques. Once you master the language the big challenge is about the developing process flow. How to decompose a big problem. Where to start. When to be wary about coupling of functions and data structures, how to create functions that have only one responsibility, data structures, simplicity, scope of a function, top-down approach vs bottom-up approach. I think the format for the video could be to create a medium complex project (several videos) and stress good practices and what could have gone wrong, what are the internal thought process that recreated the flow.
I love you Lydia, make more videos like this, the views, likes are incredible.
Brilliant work!!, explained easily with story + visualizations, thanks Lydia. I hope u continue to make such Visualized videos for advanced concepts for key frontend techs such as JS, TS, ReactJS and NodeJS.
Lydia, thank you very much for explanation. Don't stop, keep making videos like this
Finally welcome back after five years with new video ❤❤❤
best explanation I've ever seen. well done.
Great video and one of the best illustrations of promises I’ve ever seen. Please continue making this type of content!
I love the visualization. Thank you. And, more, more, more...!
Lydia, I wish I could like and subscribe more than once. Love this format, please please make more videos like this.
I am so glad this popped up in my timeline. Thank you for this great video!
Thanks for deep explanation, Lydia
What a wonderful explanation 😊😊
Thank you
Learning by visual is the best way to learn
the visualizatiion is neatly created and helps a lot to understand the concept explained. great job!
Thank you Lydia, as a visual learner, these visuals makes it so much easier!
This was so helpful, thank you so much for making this! The visuals were amazing.
Please continue more, your video makes me understand and it really help me to want to study more.
For far best explanation of promises i've seen
Thanks for uploading this video. Actually when I stated learning JS , I read your writing on MDN about " Promises & Async/Await" then I came to UA-cam if there is any video on this but it was not there. I got a bit disappointed. Now You upload this video. really happy for that. please make more video on JS.
Great tutorial! I really appreciate the clear explanations and visualizations you provide for JavaScript concepts. I think it would be awesome if you expanded your tutorials to cover other programming languages using the same visualization method. It could help learners understand different languages more easily and broaden their skillset. Keep up the excellent work!
an explanation about: call stack and memory heap, or prototypes chain will be cool. Thanks for the video.
Those are some beautiful animations! Thanks for the video!
it helped a lot to revise and clear some doubt, thanks for such good content, keep making for some more topic ❤❤
Is nice to see you back. These animations remind me of Delba's videos but well-colored and longer. This is great content!😁
What a great video. I loved the animations!
I'm JS Developer and I like your animation for explanation. I hope you create the next videos. Cheer !!
Thank you so much for the visual. For a second video, the quality is insanely good. If you have a visual of the call stack/web API/task queue/event loop visual in png or jpg format, that’d be sooo sick. 🙏🙏🙏
Some ideas I think would be cool to cover :
• I/O with node
• traversing the DOM with browser JavaScript
• covering the newest JS methods (one that mutates arrays vs those that don’t).
• browser fetch and accessing the response data
• top level await, where it works and where it doesn’t
• asynchronous importing
Advanced stuff that would personally help me:
• ESModules vs CommonJS
• path aliasing in typescript and having a JS path resolution solution as well
• JSDoc.
• declaration files in typescript
• web workers
This video is so good, I immediately subscribed. I can already tell you’re chock full of knowledge. 🙏🙏🙏
This is the best Promise video i've seen and i've seen many. Keep going ❤
I've found this video quite interesting! I already had more or less a clear idea of how promises work, but honestly I didn't know the existence of the microtask queue (I thought all future tasks were added to the same queue). I'll share this video with the developers of my team so they can learn from you too 🙂 thanks for this!
Incredible! I was playing-pausing-testing-playing-pausing as the video went on and ended up writing:
function createHandler() {
console.log('creating success handler');
return () => console.log('.then Resolved!');
}
new Promise((resolve, reject) => {
console.log('promise function body');
queueMicrotask(() => console.log('microtask before resolve'));
resolve();
queueMicrotask(() => console.log('microtask after resolve'));
}).then(createHandler());
console.log('regular call stack');
Before the last part of the video I expected ".then Resolved" to occur before "microtask after resolve"; but the last bit about then-handler not being pushed to the microtask queue until the then actually runs kind of makes sense. I was assuming that the resolve itself would push the microtask.
best lecture on promises 🫡🫡
Your github repo for javascript is so famous. It is so great to see you on youtube.
Goodluck 😊❤️💯
You really explained it very well 🎉❤ Hats off
The promise pun at the start made me subscribe!
This was extremely helpful, i hope you keep on making these!
I'm so happy this video exists! I've seen many courses that cover this topic but this one has been the most complete the easiest to understand. please teach us more, can i ask for how heap works in javascript video
Thank you, for this perfectly encapsulated lesson!
Edit: Just realised Lydia already made a comment addressing the bug described below. Rest of original comment below for posterity.
You clarify this in "Challenge", but the order does not appear correctly in "Chaining Thens": all 4 promises are created before the first lambda is run. The A+ spec guarantees that there's nothing but platform code on the call stack when a "then" is run, preventing a range of stale stack frame / unexpected concurrency bugs.
very high level of presentation, as usual - thanks :-)
Love the way you explained
Learning is fun this way! Looking forward to subscribing to one of your next courses ❤
please keep doing these deep and technical videos!
Also, it would be nice if at the end of the video, you give some recommendations on resources to learn more about the topic being touched.
I watched your course on Frontend Masters, 10/10.