Thank you. I am currently writing a plug-in to replace some texts. Need to use mutation observer on sites like Facebook, Twitter as their contents are dynamically loaded. BTW To those who wants to skip directly to Mutation Observer in action - 3:10
Wow, this was one of the deepest dive yet not long videos that actually thoroughly unpacked a challenging concept. Well done! Got a subscribe from me 👌🏻
I just dug it up today, because I wanted to set up my own state management for a Tic Tac Toe game. Way overkill, but it's a chance to try out a quazi state management on my own and I noticed the same thing. No one is really talking about this and it's amazing.
3:21 How can I observe an element that hasn't appeared yet? I'm trying to make a chrome extension so when a certain website loads, it removes an element but the website in question has a loading screen that triggers onLoad() too early. Would I have to observe the body?
@kyle I hope you do another one, because this is so so under talked about and you are only touching the tip I think. I'm trying to figure out how to use it for state management in a game. Check to see if the state is true (game on) and if it's false (game over). I know I know that's so basic, but the point isn't how hard, but if and how to use mutation observer to track that change. I just think it's interesting is all. Thoughts? I'm really keen to hear any (kindly worded) feedback.
It depends. I typically use a single global one to handle all the needs and so far the perf impact has been minimal. I could see if you need to observe a ton of different things with a big DOM that changes a lot, you may be able to better optimize by adding certain observers to certain DOM elements instead.
Kyle, but in that instance wouldn't the project more than likely be served by using a framework like Vue, Angular or React? I mean it seems like an amazing 'state' management tool, but only for basic stuff no? Please please elaborate if I'm wrong, because I'm very interested.
hey Kyle! The video volume is so annoying, would you please somehow fix it if you have free time. Anyway thank you very much for the video! Such a great functionality!
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Great video. Your volume was oddly all over the place but I have a volume control so I adjusted. :)
Dang, sorry about that! Not sure what happened with the upload.
this is the best tutorial video on youtube about mutation abserver
This is 100% exactly what I was looking for to implement in a React project I'm working on. Thank you so much
This is such a powerful tool! Can't believe I'm only learning this now
Right?!
Thank you. I am currently writing a plug-in to replace some texts. Need to use mutation observer on sites like Facebook, Twitter as their contents are dynamically loaded.
BTW To those who wants to skip directly to Mutation Observer in action - 3:10
Word Mutation Observer looks tough, but you made it easy.
straight to the practical explanation. wish many tutorials were like this. great job!
Wow, this was one of the deepest dive yet not long videos that actually thoroughly unpacked a challenging concept. Well done! Got a subscribe from me 👌🏻
Really wonderful explanation. I was very confused about using mutation observers before I watched your video
Yes!! Where has this been my whole life? Thank you for laying out a solid explanation.
this is great, i used time out to keep checking if the height had changed. This is much more efficient.
Great !!! ... it is the first time i meet this API ...why nobody talks about it ? ...
I just dug it up today, because I wanted to set up my own state management for a Tic Tac Toe game. Way overkill, but it's a chance to try out a quazi state management on my own and I noticed the same thing. No one is really talking about this and it's amazing.
the first rule of mutation observer club...
Wow man, so many good tips in this video.
Just a one dislike. What a high skilled person this guy. THAT'S what I call quality content
This is awesome! Great video, thank you! Just learned about the intersection observer, too!
Wow, so informative. Thanks for sharing.
Great and useful as always!
3:21 How can I observe an element that hasn't appeared yet? I'm trying to make a chrome extension so when a certain website loads, it removes an element but the website in question has a loading screen that triggers onLoad() too early. Would I have to observe the body?
put an observer on the body, and check for addedNodes and removedNodes mutations.
Nice intro, and of course great content as well. :)
Just found you and saw the last upload was 3 years ago. I can only assume the bears found you.
Gr8, but wouldn't be easier to add a costume event and fire it every time the bear is added to the list ?
@kyle I hope you do another one, because this is so so under talked about and you are only touching the tip I think. I'm trying to figure out how to use it for state management in a game. Check to see if the state is true (game on) and if it's false (game over). I know I know that's so basic, but the point isn't how hard, but if and how to use mutation observer to track that change. I just think it's interesting is all. Thoughts? I'm really keen to hear any (kindly worded) feedback.
Whats your experience with performance impact of adding a mutation observer?
It depends. I typically use a single global one to handle all the needs and so far the perf impact has been minimal. I could see if you need to observe a ton of different things with a big DOM that changes a lot, you may be able to better optimize by adding certain observers to certain DOM elements instead.
Kyle, but in that instance wouldn't the project more than likely be served by using a framework like Vue, Angular or React? I mean it seems like an amazing 'state' management tool, but only for basic stuff no? Please please elaborate if I'm wrong, because I'm very interested.
hey Kyle! The video volume is so annoying, would you please somehow fix it if you have free time. Anyway thank you very much for the video! Such a great functionality!
Thanks very much for this video.
amazing, thank you
v nice
I'm only in favor of adding bears, not removing bears.
transform: translate(-50%,-50%) will help center it;
"Modals can get bananas" XD
Thank you!
Jesus that was complicated
why am i seeing this api for the first time...