This is brilliant I love this new format. It just shows the real thought process and the problem solving required which lacks in almost every other coding tutorial.
Did i just watch a 1:24:00 video on a language I rarely use, yes. Am I gonna create my own version of the Toast lib, probably not. Did I love every minute of this video, hell yes.
Kyle... thank you so much for sharing your thought process - especially for this kind of project. I'm currently working as a frontend developer, and I've always wanted to get more skilled in animations. When I saw this video I immediately jumped out of joy. I understand most of the concepts in your video now, and I've started implementing this for a notification toast in a project at work. It's super dope! Thank you so much.
Great video as always, thanks ! I love that you don't cut the video and show your whole thought process, very instructive. By the way, I think it would be a good idea for a future video to show how you would go around publishing this project as a NPM package.
love the video bro entertaining i was shouting that you didn't pass pauseOnHover like you could hear me it always gets me too 🤣🤣 anyway love the series thank you so much
This was awesome! Hands down my fav type of videos from you create! I mean the others are great, but I love this more real-world, real-time problem solving. Great! Thanks!
I had a very similar idea to this before, but I wanted to create my own React library for toast notifications since I don't like the popular ones. Thanks for the video, it gives a lot of inspiration!
Dayuuum! So much more informative when its used in context .. Learned a lot! Thanks! Eg: spreading the default options .. Never had a use case for it until now. Can use it in all my projects 😀
Nice demo. What is especially liked is: 0.) there are clear written requirements and even a showcase for the desired function. Don't start coding without a clear objective, 1.) if you are not 100% sure about how a function / feature works: RTFM - again. NEVER make assumptions! Nicely demoed. 2.) First focusing on the function and later about the looks is a good approach. Focusing on the most challenging is most of the time a good idea. If there is a quick and obvious implementation / fix for something do it right away - else it will keep distracting you all the time (you simply can stop thinking about what you are told not to think about). Here are a couple of things you / all the viewers could improve: 0.) when you use more sophisticated syntax (like using the ^ character in a CSS selector, make a comment. You might know what it means (even in weeks or month) but someone less experienced colleague might not know. Write N00B friendly code. For CSS a single character can change a lot and is EASY to be overseen. A comment isn't. No false pride. Clarity beats elegance. 1.) don't duplicate code. if the same thing happens in two locations or your code, make it a function and call it 2.) write down your thought process as comments! That is exactly what comments should express: your intention. And writing down what you think helps you to reflect on it 3.) instead of trial and error with console.log() why not use a debugger, set break points and step through. You can see what is called by whom and what the state of the class is (member values). For HTML you do use the "debugger" - why not also for JavaScript? 4.) Why write test code and then delete it? Simply convert it to a unit test right away. The video is a top showcase of "test early"! The unit test is: you run that demo code and you watch what happens and check if this is what you want (write down what you want!). It is as simple as that. A UI test library could be used. But that is kind of difficult to implement, and checking if animations work and look right - is tedious. 5.) when you feel you get lost (this autopause thing): STOP writing code. Step back. Draw a model (picture), make a flow diagram or a scheme - but not code. Something visual. This will help your brain to look at the problem from a different perspective and use your visual pattern recognition skills. Also simply writing a TODO comment and working on something different (forced pause) can be really helpful. These comments aren't specific to this video. They express common best practices, but in this video, they could have been applied. There is always a chance to get even better. One more tip: if you rename a variable - especially in JavaScript - press F2 in VS Code. VS Code will rename all occurrences of that name for you. In C# a wrong variable name will be detected by the compiler. In JavaScript if won't --> runtime error.
If I'm being honest I don't understand the majority of what's happening in the Javascript, but one thing I do understand is styling and the toasts could use a little more work haha. Very impressive!
arrow function is a simple problem to remove without binding. now problem is to removeEventListener. then just set this.#toastElem = null. so that it will be collected by garbage collector and remove everything related to this element. Thanks to you I didn't know about these getter setter.
I have it in React. Very easy to do. The tricky part is render multiple toasters that can expire and remove it self from stack inside his context. Toast container is very easy to do like tick tack toe and sort them by position.
I think css animations have a play/pause property that could be very useful in this case. MAYBE there's no need to set timers, and request animation frames... 🤔
That might work with keyframe animations but he was using transitions that were controlled by updating a css property, so I don’t think that would’ve worked?
Saw the chapter length for "pause on hover" and was like "yeah sounds about right" :D At first glance it's easy and one minute later you are a Minecraft villager... Huuh, hmmm, huh Edit: I personally like to use two states and I guess you know where this is going from there: pausedFor = 0 and pausedAt. Pausing is setting pausedAt to now, unpausing is adding the delta to pausedFor (and clearing At ofc) and then you just add that to your original time: "now - shownAt + pausedFor" Depending on what you are doing (I was pausing a countdown which render was still being called while paused) you need to add the "running pause delta" when paused too
With the animations requestAnimationFrame didn't not work for me in Firefox. but it does in Chrome. The slide in animation was still instant in Firefox. Changing that to setTimeout did work. Any idea why?
sir, I have found custom library, like custom select box, custom wizard form and toast notification from your channel. I have learnt so many things from you. Would you make a tutorial daterangepicker custom library? Hope to see it thanks...
Hey Kyle, I love this format! I picked up a bunch of tricks and patterns by learning from your thought process. Do you think it would be possible to do more of this format with TDD? Thanks!
Superb content! It’s great to see knowledge being imparted through practical implementation rather than just theoretical explanations or example codes. I truly appreciate your efforts. I have a small doubt, though: code - let toast = new Toast({text: 'Hey'}); // Shows a toast message with default settings toast.remove(); // Explicitly removing the toast toast.update({text: 'updated to Hi'}); // No position mentioned Since the toast object is never destroyed, it updates the toast object but doesn't display anything in the DOM because no position is given. Additionally, since it is removed and then updated, no property initialization takes place. Could you clarify if this is the expected behavior or if there's a way to resolve this? Please let me know if I’m missing something.
I actually am planning to do a web components video. I find that there is very little content on TH-cam about it, but I first need to really dive in an learn it well myself.
@@WebDevSimplified Nice to hear that. I also think that web components get neglected by content creators. Ironically espcially TH-cam seems to make heavy use of web components. Maybe it is because their API is not exactly easy but if anyone can explain it in a simple and understandable manner than it is you.
I'm only about 2/3 through the video, so it might be explained later, but I'm wondering why is the progress bar controlled by Javascript? Why not set the progress bar to 0 width as default, change it (through JS) to 100% with a transition over autoclose time? That way you don't have to do the setinterval at all, as well as the possibility to use fancy ease in and out and stuff if you wanted to.
Sir this new format of setter is really great but I don't understand this correctly like how you this[key]=value redirect to setter (set position (value)). Can you please make a explain video about this new setters
Hi, guys! I am having a CORS error when loading the .js file, I am not using a server, just open the html file locally and the .js files are in the same folder. Why is this happening?
Very nice, though I would like to point out that setting all keys into Class is bad. This basically allows anyone to override any of the class methods/properties, and it can easily be exploited.
Wait! I can declare variables with a numeric symbol (hashtag)?? Really?!?! I did not know that. However because I switch between c# and js so much, I might still use "var"... and not on purpose 😆.
Hey, react-toastify author here. Really liked the way you reverse engineered my library 😊. Keep up the great work
You are using observer pattern right.
@@ananths2301 indeed good old JavaScript. This is one of my favourite pattern
@@fdkhadra Thanks for the reply😀.
This is brilliant I love this new format. It just shows the real thought process and the problem solving required which lacks in almost every other coding tutorial.
Did i just watch a 1:24:00 video on a language I rarely use, yes.
Am I gonna create my own version of the Toast lib, probably not.
Did I love every minute of this video, hell yes.
Even after being a Web Dev for 10+ years, I still learn new stuff in your videos! Love that! :)
I really enjoy this format, it really shows how powerful vanilla JS is.
you're awesome, it's so cool to see you working on this type of projects
I hope you continue to do this type of content. Personally I improve a lot of my fundamentals when making my own custom components, library and such.
Thank you, Rhett's programming brother. All jokes aside, I enjoy these videos a lot.
Kyle... thank you so much for sharing your thought process - especially for this kind of project. I'm currently working as a frontend developer, and I've always wanted to get more skilled in animations. When I saw this video I immediately jumped out of joy. I understand most of the concepts in your video now, and I've started implementing this for a notification toast in a project at work. It's super dope! Thank you so much.
You are a good tutor. Please bring more projects like this
You are a significant mentor. I am your korean student
Super cool to see a tutorial on toast notifications. Can’t recall seeing any other and you’re content is always great.
This was really awesome. I keep saying it but these continuous real-time videos are so entertaining and interesting. Looking forward to more!
How has this guy not made to it a mil yet? Talk about consistently good content, sheesh
Please do more of these. It's really helpful to see the whole process.
Dude you are nuts. This is superb work
Great video as always, thanks ! I love that you don't cut the video and show your whole thought process, very instructive.
By the way, I think it would be a good idea for a future video to show how you would go around publishing this project as a NPM package.
This is really awesome. I've never seen thought process in any other tutorials. Post more content like this. Thanks.
Pure gold! That's probably the best JS tutorial ever. Thank, man!
love the video bro entertaining i was shouting that you didn't pass pauseOnHover like you could hear me it always gets me too 🤣🤣 anyway love the series thank you so much
This was awesome! Hands down my fav type of videos from you create! I mean the others are great, but I love this more real-world, real-time problem solving. Great! Thanks!
Great video! Loving seeing the full thought process.
ohh nice i was expecting Library Series from Web Dev Simplified. You are making us better developers. love and Support Kyle
Phenomenal! Always love your content... some of the best on the web! I build my apps in vanilla and this proves how powerful vanilla is! Props!
I love these kind of videos. I always learn something new.
You always bring something interesting and new to the table. 💚 Amazing approach.
It was really awesome to code with you. Thank you so much !
Really like this! Love seeing your thought process.
I had a very similar idea to this before, but I wanted to create my own React library for toast notifications since I don't like the popular ones. Thanks for the video, it gives a lot of inspiration!
Dayuuum! So much more informative when its used in context .. Learned a lot! Thanks! Eg: spreading the default options .. Never had a use case for it until now. Can use it in all my projects 😀
A useful and brilliant way to write a class. Thanks alot for these informations. and the toast class too
this is insanely good for 1 hour 24 mins - incredible. 👌👌
Awesome this video treats so many topics. Good work
Great approach and very clean code, just awesome.
Nice demo. What is especially liked is: 0.) there are clear written requirements and even a showcase for the desired function. Don't start coding without a clear objective, 1.) if you are not 100% sure about how a function / feature works: RTFM - again. NEVER make assumptions! Nicely demoed. 2.) First focusing on the function and later about the looks is a good approach. Focusing on the most challenging is most of the time a good idea. If there is a quick and obvious implementation / fix for something do it right away - else it will keep distracting you all the time (you simply can stop thinking about what you are told not to think about).
Here are a couple of things you / all the viewers could improve: 0.) when you use more sophisticated syntax (like using the ^ character in a CSS selector, make a comment. You might know what it means (even in weeks or month) but someone less experienced colleague might not know. Write N00B friendly code. For CSS a single character can change a lot and is EASY to be overseen. A comment isn't. No false pride. Clarity beats elegance. 1.) don't duplicate code. if the same thing happens in two locations or your code, make it a function and call it 2.) write down your thought process as comments! That is exactly what comments should express: your intention. And writing down what you think helps you to reflect on it 3.) instead of trial and error with console.log() why not use a debugger, set break points and step through. You can see what is called by whom and what the state of the class is (member values). For HTML you do use the "debugger" - why not also for JavaScript? 4.) Why write test code and then delete it? Simply convert it to a unit test right away. The video is a top showcase of "test early"! The unit test is: you run that demo code and you watch what happens and check if this is what you want (write down what you want!). It is as simple as that. A UI test library could be used. But that is kind of difficult to implement, and checking if animations work and look right - is tedious. 5.) when you feel you get lost (this autopause thing): STOP writing code. Step back. Draw a model (picture), make a flow diagram or a scheme - but not code. Something visual. This will help your brain to look at the problem from a different perspective and use your visual pattern recognition skills. Also simply writing a TODO comment and working on something different (forced pause) can be really helpful. These comments aren't specific to this video. They express common best practices, but in this video, they could have been applied. There is always a chance to get even better. One more tip: if you rename a variable - especially in JavaScript - press F2 in VS Code. VS Code will rename all occurrences of that name for you. In C# a wrong variable name will be detected by the compiler. In JavaScript if won't --> runtime error.
Superb work Kyle 👍🏻
I commented in Last video to make toast videos, U have done it.
You are awesome ☺️
Yes, I love these long videos😁
Same, I always learn a lot
Great video! Very useful, good stuff to learn from
If I'm being honest I don't understand the majority of what's happening in the Javascript, but one thing I do understand is styling and the toasts could use a little more work haha. Very impressive!
arrow function is a simple problem to remove without binding. now problem is to removeEventListener. then just set this.#toastElem = null. so that it will be collected by garbage collector and remove everything related to this element.
Thanks to you I didn't know about these getter setter.
I have it in React. Very easy to do. The tricky part is render multiple toasters that can expire and remove it self from stack inside his context. Toast container is very easy to do like tick tack toe and sort them by position.
Amazing as always!
I think css animations have a play/pause property that could be very useful in this case. MAYBE there's no need to set timers, and request animation frames... 🤔
That might work with keyframe animations but he was using transitions that were controlled by updating a css property, so I don’t think that would’ve worked?
I desperately needed this, thanks!
Saw the chapter length for "pause on hover" and was like "yeah sounds about right" :D At first glance it's easy and one minute later you are a Minecraft villager... Huuh, hmmm, huh
Edit: I personally like to use two states and I guess you know where this is going from there: pausedFor = 0 and pausedAt. Pausing is setting pausedAt to now, unpausing is adding the delta to pausedFor (and clearing At ofc) and then you just add that to your original time: "now - shownAt + pausedFor"
Depending on what you are doing (I was pausing a countdown which render was still being called while paused) you need to add the "running pause delta" when paused too
I like that approach. You are right that I thought it would be simple, but it just broke my brain.
I didn't know setters would run with the value if they have matching names in the constructor params 🤓
Didn't know this either, but that doesn't mean much! Still, so damn cool.
Already loving it!
I did something like this for my own use, this is great to learn and improve from
With the animations requestAnimationFrame didn't not work for me in Firefox. but it does in Chrome. The slide in animation was still instant in Firefox. Changing that to setTimeout did work. Any idea why?
More like this please!
awesome OOP class tutorial
I can't imagine I’m watching this for free
sir, I have found custom library, like custom select box, custom wizard form and toast notification from your channel. I have learnt so many things from you. Would you make a tutorial daterangepicker custom library? Hope to see it thanks...
I hope too
Hey Kyle, I love this format! I picked up a bunch of tricks and patterns by learning from your thought process. Do you think it would be possible to do more of this format with TDD? Thanks!
Superb content! It’s great to see knowledge being imparted through practical implementation rather than just theoretical explanations or example codes. I truly appreciate your efforts.
I have a small doubt, though:
code -
let toast = new Toast({text: 'Hey'}); // Shows a toast message with default settings
toast.remove(); // Explicitly removing the toast
toast.update({text: 'updated to Hi'}); // No position mentioned
Since the toast object is never destroyed, it updates the toast object but doesn't display anything in the DOM because no position is given. Additionally, since it is removed and then updated, no property initialization takes place.
Could you clarify if this is the expected behavior or if there's a way to resolve this? Please let me know if I’m missing something.
Awesome. Keep rocking ❤
Impossible!!!
You are amazing
This project is very awesome
it would be really great to redo this using TDD
Thanks Bro, very useful
You thaught me and every developer... What they want... Thanks a lot Kyle..
Can someone explain me what happened at 32:49? Why exactly did it work when it was moved above the this.update method?
Why not use css transitions for the progress bar
Hey Kyle. Do you plan on making a video about or with web components? You could build a web component library for modals.
I actually am planning to do a web components video. I find that there is very little content on TH-cam about it, but I first need to really dive in an learn it well myself.
@@WebDevSimplified Nice to hear that. I also think that web components get neglected by content creators. Ironically espcially TH-cam seems to make heavy use of web components. Maybe it is because their API is not exactly easy but if anyone can explain it in a simple and understandable manner than it is you.
I'm only about 2/3 through the video, so it might be explained later, but I'm wondering why is the progress bar controlled by Javascript? Why not set the progress bar to 0 width as default, change it (through JS) to 100% with a transition over autoclose time? That way you don't have to do the setinterval at all, as well as the possibility to use fancy ease in and out and stuff if you wanted to.
What is the reason for putting createContainer outside of the Toast class ?
I would like to see more of react native videos
Awesome! Can you make a full fledged grid library as a npm package and can be utilized in .net or .net core.
Very nice video! Can you do one for a dropdown with search options?
Hi Kyle, could you do some backend tutorials as well? Maybe something using C# and .NET frameworks?
how would you show and count the toast notifications that arent selected before they timed out?
How can we set the limit to display the toasts, there is a limit option available.
When will you switch to typescript? Pure JS is really deprecated nowadays.
Do you have a tutorial for npm library deployment? If not I think it will be very appreciated. Cheers
thanks for sharing
you so smart, respect
you are amazing... ❤
Sir this new format of setter is really great but I don't understand this correctly like how you this[key]=value redirect to setter (set position (value)). Can you please make a explain video about this new setters
I wanted to learn it because it can also help to build Google autocomplete address form I was using switch case but this is a good option
Hi, guys! I am having a CORS error when loading the .js file, I am not using a server, just open the html file locally and the .js files are in the same folder. Why is this happening?
thank you for your content, how to publish npm , can ı use with js library
The animations do not work in firefox, i tried adding moz and toolkit ones but animations still broken
Seems like firefox doesnt like requestanimation, you need to add a timeout to it otherwise animation to slide in wont work
Very nice, though I would like to point out that setting all keys into Class is bad. This basically allows anyone to override any of the class methods/properties, and it can easily be exploited.
Very cool 😎
I understand shit, I am a newbie but I loved
Legend
Had to laugh at the pause sections since did it about a year ago and it stumps at first, but then it is quite easy.
What's that # syntaxe for the variables ?
I have confusing places and how to solve it , please
(Old Related Videos Tell me , I learned oop in php)
how to host it?? so that i can use those utility components on my personal projects ?? does anyone have any idea?
Please provide this for all as cdn
Wait! I can declare variables with a numeric symbol (hashtag)?? Really?!?! I did not know that. However because I switch between c# and js so much, I might still use "var"... and not on purpose 😆.
53:43 and that's programming in a nutshell
Kyle can u create wordle in react-native
10:49 How to anger every c# developer on the planet
🤣🤣🤣 facts
#autoCloseTimeout can someone explain this hash symbol in the variable?
Great
Dude, regex in css 🤯
This is setup
Thanks for NOT doing this in a specific framework. That has become a Cancer of Web dev.