This Is Unbelievably Powerful

[@harisridhar3798]

You are the best Kyle.....I have been binge watching your JS and CSS videos for the past week and I feel so confident in implementing those concepts in real life...Keep doing this great 10 mins work...😀

[@alejandrochataing5341]

Thanks for this video! I just learnt an amazing js tool I did not understand or used before and I can already tell how to implement in my current projects to elegantly solve some problems!

[@Primegamevillage]

I'm a Good programmer some might say "Great" but when i watch your videos, i find peace and tranquility in my work and just now i had an eureka moment, All in all thank you and keep the good work

[@leaxem]

You are the best Kyle. Thanks for fulfilling the request!!

[@sanjitselvan5348]

Amazing man! You explain complex concepts in such a simple way! Thanks a ton!

[@vulpixelful]

I like how this was also a review of making changes to the DOM

[@centrumsaiyan7623]

I'm so happy seeing you cover this topic. Instantly knew my problem understanding this tool is solved after seeing your video.

[@DarkCloud7]

I can see this coming in handy in all sort of scenarios. Thank you for bringing it to my attention.

[@humairahmujawar]

thank you for the detailed explanation. It's much simpler than the documentation.

[@CreativeTutorialsWeb]

You are the amazing Kyle, I learn something new everyday from your videos

[@321sas]

Thank you very much Kyle! Earlier I was working on a todo list application and I used an event listener to listen for things with the contenteditable attribute to change to rename the todos. I used the DOMCharacterDataModified event listener. But then I learned that was going to go out of support very soon for Mutation Observer. I didn't know that really confusing thing with the text content being a node, and i was so frustrated. Thank you very much for this! I ended up using the input event listener tho.

[@boris_js]

I've been using it for years. Basically any use-case where you want to detect changes in your DOM, you can easily do using MO.

[@FunctionGermany]

it's always a workaround. with good external libraries, they should provide events / hooks instead of having to use observers.

[@blackboxbs8642]

@@FunctionGermany so external library is better?

[@blackboxbs8642]

@@FunctionGermany what react library do you recommend?

[@FunctionGermany]

@@blackboxbs8642 there aren't really "internal" libraries. i should have just left that out. what i meant is that if you have a JS library that manipulates the DOM in any way, it should have hooks or events for you to customize or react to it's behaviour.

[@FunctionGermany]

@@blackboxbs8642 no idea what you mean with "what react library do you recommend".

[@ינוןאלבז-כ1ז]

I really liked the pace of the video you do not waste time on nonsense and you manage to take complicated topics and simplify them so that it is really easy to understand you

[@prsmahajan]

kyle is back with fire 🔥

[@haydenthai935]

Thank you so much Kyle

[@liviumitrofan]

Great video. Didn't know how some web features worked, but now I do.

[@accordv6er]

This is helpful in client scripts on ServiceNow where URL encoding/decoding can save a lot of AJAX calls. Thank you

[@gabrielfab4256]

Just Saved my early working hours, thanks man

[@kudaykumar1261]

This concept is really good. Thank you so much for the video.

[@matthewt1885]

That was an insanely good tutorial on mutation observers

[@hemantagrawal1122]

Wow! Didn't know abt this concept earlier but now I know how and where can I use this thing. Thanks ❤️

[@petarkolev6928]

Amazing video, Kyle! It would be very nice to watch videos from you involving ReactJS :)

[@harshsule9989]

Very helpful video sir. thanks😊

[@sashatv138]

So useful and so clear! Thank you, Kyle!

[@aileenchan3741]

Wow this is great!! Thank you Kyle!!!

[@comprehensivecow6679]

I just now looking for a video for this and my man posted

[@bushigi5913]

Where are these techniques coming from lol? I've never heard of these before!!! Thank you Kyle.

[@FunctionGermany]

they are normal DOM APIs and most of them have been around for years. it's just that you rarely need to use these yourself, so not many people know about them.

[@Ribyum]

Good tutorial, though a real situation example would've been nice as I fail to see in what context this can be used.

[@tdavis85]

Amazing Kyle. What code editor are you using there?

[@martmusic2746]

thanks !!! life savior !

[@thomasulatowski3012]

I don't get it. When I do something I already know what I am doing. I don't need a mirror to learn that I am brushing my teeth. Could someone give an example of a problem where I would need this observer?

[@Krzysiekoy]

I was wondering about this too. I wish he showed some use cases for this.

[@juanp4834]

Well, I've seen it used with third party content. At work we had to deliver a highly customized chart...from a chart library. Problem was that when it was drawn again (different data, a highlight, a tooltip) all the DOM mutations we made were gone. One person added a customize callback to this observer. Saved our souls!

[@wandevv]

instead of a console.log(entries) , you can call another function, for example if you need to check the state of the element in real time, idk if it works like React Js, but it is very useful, the Input element has the "input" event in eventListeners, but not all elements have this event, with this MutationObserver you can implement this event for any DOM element.

[@kalahari8295]

Same question popped in my head when I saw the title 😐

[@xyz-uy9ll]

I think one might be real time suggestions on the input fields.

[@alexeyshaykov]

Nice! Thx a lote

[@juanmamani2110]

Awesome! thanks for sharing.

[@montebont]

Nice one Kyle - thanks!

[@TedVu-wx5re]

you are the best !!!!

[@colindante5164]

Thankyou )).

[@workingTchr]

Very nice explanation, but for the sake of clarity, I would suggest giving object names ("mutationObserver") something different than the class from which they are derived just to make clear what's being referred to later on. Also, "const" seems to be way overused these days when a mere "var" would do the job. Less globals the better IMHO. But all in all, really nice.

[@Pilosofia]

I was about to lost my mind with these dom mutations

[@FunctionGermany]

you say powerful in the title, but what's a use case for this API?

[@bmehder]

This came in handy today. I used a MutationObserver to call a function that adds tab stops (for a11y) to a Svelte component after and if the component mounts. The function I call is in jQuery, and I could not figure out how to call the function using a vanilla js custom event. If it was not for this video, I would have been tearing my hair out. :-) Also, it would be cool if you made some Svelte videos eventually. I am interested in your opinion about it coming from React.

[@FilipCodes]

contenteditable nice, I learned something today

[@shaikshavalisyed2012]

Excellent feature now its going like the reactjs way... so what comes to my mind is future of JavaScript rules all the Frameworks.

[@WirIez]

Awesome, thanks

[@patriotir]

Thank for your quick great tutorial. But I dont understand how this is useful? where this comes to play?

[@musicmasala2391]

I have created a variable inside mutation observer that will access the dynamically created element......but the variable is not accessible outside mutation observer

[@myworld458]

thanks Dude / I have question change detection is use to mutationObserver ?

[@nerminkarapandzic5176]

Just came here to say I appreciate the thumbnail without any kind of face expression, seeing those on every video ever on yt and it's really annoying.

[@hssnmama5502]

More JavaScript projects

[@MichaelPuzio]

I have no idea what I can use this for in practice. What can I make with this? Any follow-up videos anyone can recommend to see its ability to create something on the frontend? All I see is a change in the console. I lack imagination and skills, hence I'm a bit too thick-skulled to see applications; i.e. I'm not a good developer. Thanks in advance for any help.

[@daedaliusX]

I have 8+ years in web development. I don't see the application either. In my opinion, this thing is made for ui-libs (react/vue/angular) for their inner purposes. I also may say that you have potential as a developer because of your honesty. Keep doing bro.

[@guilhermebluz]

You could use it in a interactive website with many sliders that interact with each other or objects that the user can change its shapes. Think in a interface that has knobs, buttons and switches (like the real analog thing) and it could result in something different, like sounds or visuals. You could use this to save in realtime the data that the user is filling in a Form (autosave) to prevent losing the information on connection loss. Yeah, you could do this using another approches or even existing libraries, but all the Observer classes make possible so you can create your own clean implementation for your specific use without having all the unused functions that an existing library could have.

[@shapelessed]

What I would want is a vanilla object mutation observer to finally ditch all these frameworks...

[@andsheterliak]

You can use Proxy object.

[@sizarcorpse]

😊😊 waiting for this one after watching your previous observer videos. thank you a lot...

[@izzyblackout1090]

Is this only works for DOM Element? What about other JSON object?

[@ridl27]

🔥🔥

[@yadusolparterre]

That's a great tutorial, but what is a use case for mutation observers? I don't see where this can be useful

[@ronifyweb]

I want to understand the purpose of this

[@scrapdev1219]

And this is how they detect ad blockers. I guess. All I have to do is remove the links of block the req.

[@jasonlough6640]

Hey, could you add "Mutation Observer" to the title? Spent too long looking in my history for this vid, kept finding the the one about Intersection Observer though.

[@judeleon8485]

Thanks Kyle, you're excellent in your teaching. However, I like to know if it's possible to use mutation observer to capture when a file is selected for upload. If it does, do you have any idea how I can achieve it? It does not seem to work for me.

[@nested9301]

is this observer object what react uses to track the life cycle of the components? I'm just curious!

[@blackerhawk1508]

Ahh, a beautiful way to get rid of ugly intervals looking for potentially dissapearing elements.

[@hira9009]

I love you kyle

[@kickinit333]

I noticed you always clicked the last node which has the full text. How do you handle those previous nodes that are incomplete? I've tried several methods and I always either get a partial node textcontent or several partial ones that may or may not include the earlier nodes.

[@puyamoayer8214]

Could this be used to rewrite the useDebugInformation hook? Seems useful for debugging as well?

[@hybridboy9_9]

Make a video on customevents and eventemitter pleaseeee

[@lawrenceardosa1730]

Performance Observer Next?

[@spongebob1483]

can anyone pls explain MO use cases in real projects

[@FunctionGermany]

detecting changes of external libraries that don't have events (because they're written poorly)

[@omagadavid9923]

Nice feature but why can't you use it with innerHtml and inner Text? That just makes it useless to me

[@princenedjoh]

🔥

[@manmanmanichfindekeinennam7613]

So this is literally state managment? Kind of a native useEffect function from React?

[@FunctionGermany]

no, this is nothing like state management. i guess you can sort of see parallels to useEffect, but useEffect only compares the identity of a variable to it's predecessor, so it's much simpler than the diffing that mutation observer does to get the changes. you shouldn't compare useEffect and these observer APIs.

[@manmanmanichfindekeinennam7613]

@@FunctionGermany guess you are right, though you can use the mutation Observer exactly like useEffect. I think it is comparable, even though this one is much stronger than useEffect.

[@FunctionGermany]

@@manmanmanichfindekeinennam7613 that's like saying that react hooks and events are comparable - they are not.

[@michellegiacalone1079]

Hmm. Could this be used as a security function? Can it log which user makes a change?

[@FunctionGermany]

there is no security in the frontend. you can't control what's happening in the browser. if someone wants to mess with your page on their computer, they can, and there's basically nothing you can do about it.

[@michellegiacalone1079]

@@FunctionGermany I'm not talking about blocking; just tracking any and all changes to identify tampering.

[@FunctionGermany]

@@michellegiacalone1079 it's not reliable. everything can be circumvented in the browser. you should never consider anything that can happen when a user opens dev tools, there's no point.

[@michellegiacalone1079]

@@FunctionGermany I'm speculating out loud. (Out loud? Well, keyboard clicks.) We'll see.

[@ricardosandoval3848]

Love uuuuu

[@schlaus_kwab]

Can you please check the vid desc? It does not make too much sense

[@WebDevSimplified]

Thanks for letting me know. I fixed two typos.

[@mykalimba]

I notice that you start writing code right at the "root" of the script file. In my browser scripts, the main chunk of code is inside of a document 'DOMContentLoaded' event listener/handler. (At some point, this is what I learned was the pattern for script that's loaded in a web page.) Am I using an antiquated pattern? Does the "defer" when loading the script allow omission of the DOMContentLoaded' event listener?

[@panmateusz]

Yes, defer attribute does that. And if you have your script tag at bottom of a page you also don't have to use this domcontentloaded event. But defer attribute is clearly the best way to handle DOM loading.

[@mykalimba]

@@panmateusz Thank you for this information!

[@thabosiphiwemngoma4772]

could this be how git detects changes on committed documents ? I mean when it tracks these files its essentially checking for mutations on the documents right ? so then it keeps the old and new values observed for when a mutation occurs

[@HandledToaster2]

No, this is a specific JavaScript thing for DOM elements. The way Git keeps track of changes is with cryptography. It runs a hashing algorithm generates a unique line of characters (x4OfLa4NeA79...) based on the file. This set of characters will always only refer to this exact file, any slight change will result in a wildly different hash. That's how it keeps track of every little change.

[@thabosiphiwemngoma4772]

@@HandledToaster2 so hashing algorithms should be generally faster at detecting mutations in the files I suppose.

[@HandledToaster2]

@@thabosiphiwemngoma4772 well yes, as soon as you save the file it'll have a new hash. Exactly what it found different from the last version (the diff) is something else though. I don't know how that one works.

[@FunctionGermany]

git has nothing to do with JavaScript or the DOM.

[@thabosiphiwemngoma4772]

@@FunctionGermany I see but I'm sure this functionality is shared in with whatever algorithm is responsible for detecting changes in files. ive just learned from AppleToaster that its a hashing algorithm

[@whatthefunction9140]

What if you change the css that effects an element?

[@Tntpker]

I think that changes the style attribute of the element and also would work

[@whatthefunction9140]

@@Tntpker I'll have to test it but if a class is added to the parent that changes the look of the child and I'm observing the child will it trigger?

[@thabosiphiwemngoma4772]

@@whatthefunction9140 if you add a class dynamically like toggling the class and are observing the element's class attribute or any for that matter for sure it should. I doubt however, that changing css property values can result in a html mutation. Unless among the options provided in the observemution class you can explicitly observe property values of any css selector.

[@FunctionGermany]

CSS can't mutate HTML. the resize observer might work though if the CSS animates or transitions an element causing a reflow.

[@eugenenovikov671]

id with space between words?????

[@funnylifestyle8174]

Just a *little bit* guys

[@cyberprompt]

what is up with all the observing.

[@FunctionGermany]

it's a series about all the observer APIs.

[@LabhamJain]

Hum first hum first 😂✌️

[@maximilian19931]

If google docs uses this, a lot of code can be delete.

[@till_trading]

I know you dont't actually need them, but could u please use semicolons. 😄

[@JEsterCW]

Eslint :)

[@adambickford8720]

Is there a reason you defer to console vs a debugger to introspect objects? I find it 100X faster.

[@FunctionGermany]

it's easier for his target audience. unfortunately beginners are not taught how to use a debugger at first. they always learn it themselves later on, and waste a lot of time with console.log before that.

[@adambickford8720]

@@FunctionGermany that's my point, how do we avoid that trap? its also 'easier' to avoid OO, patterns, etc and just nest dozens of if/else... for a while. i would think its worth the investment. maybe i should start a channel for intermediate devs who can't level up themselves

[@FunctionGermany]

@@adambickford8720 using a debugger should be very early in a devs journey. i can't tell you what the right thing to do is, i just tell people to learn to use a debugger, or help them using one.

[@yourgflikesit]

Easier to just use a framework like vuejs

[@FunctionGermany]

there is no feature overlap between a frontend framework and observers. they are two very different things you can't compare.

[@niceguy1602]

Do you have to install it with npm

[@FunctionGermany]

no, it's a native DOM API. you can find documentation on MDN.

[@niceguy1602]

@@FunctionGermany Thank you

[@khizrshaikh9902]

Second

[@hoople212]

perfect, i have now deleted all the "suggested for you" posts on my facebook page: const mutationObserver = new MutationObserver(posts =>{ console.log(posts); Array.from(document.querySelector('.d2edcug0.oh7imozk.abvwweq7.ejjq64ki') .querySelectorAll('.dati1w0a.hv4rvrfc')) .filter( div => div.innerHTML.contains('Suggested for you')) .forEach(div => { div.parentElement.parentElement.remove(); }) }); mutationObserver.observe(document.querySelector('.d2edcug0.oh7imozk.abvwweq7.ejjq64ki'),{subtree: true, childList: true})