How to Use the Resize Observer API

This video covers the 3rd of the Observer APIs added in HTML5 - the Resize Observer. It gives a practical example of how this Observer is different from CSS Media Queries.
Also discussed briefly is the new Optional Chaining Operator.
Intersection Observer API video: • IntersectionObserver API
Mutation Observer API video: • Capture DOM Changes wi...
code from video: gist.github.com/prof3ssorSt3v...

[@jayreyes828]

The concise explanation of optional chaining is this video's cherry on top.

[@shvideo1]

What a great example to show the usefulness of Resize Observer. Great video... very well taught. Thank you for sharing your knowledge.

[@dominiktargosz3094]

I like your videos because you talk about important but overlooked topics

[@adityasethi9794]

You're too good. Speed is perfect and the way you explain is also great. Thanks!

[@ricardopassos1180]

I couldn't agree more.

[@nickstaresinic9933]

Nice. Clear, simple, & useful. Thanks.

[@raba650]

Awesome video! I'm using window.resize with React right now and I just had to go back to vanilla JS to touch up on the basics. Thanks.

[@tradewinds9832]

Nice one. Thanks for sharing. Clean and easy to understand.

[@krishnateja7830]

Great video, mate!

[@Finn-jp6pn]

Great video! Thanks. Subbed!

[@minshuotang4511]

Thanks for the video! How to use the resize observer If I want to observe the width changes of multiple divs that have the same ".container" class?

[@SteveGriffith-Prof3ssorSt3v3]

You just call the observer method on each element.

[@michelange5102]

Dynamight!!!

[@karuheine1152]

I don't know why if it is wrong, but with the resize Observer, can I invoke different functions? For example, mobile view have links that has some functionalities in it and it opens differently and when it is now in desktop view, those functionalities should be gone and set new functionalities if I use the resize observer with if statements, right? I tried this so many times now and it results into double execution of functions. It is frustrating. Code Example let width = entries[0].contentRect.width; if (width < 480) { openLinksMobile(); // It opens sideward } else { openLinksDesktop(); // It opens downward } Thank you for the video I have learned a lot with this, but somehow it doesn't work for that kind of example I have shown.

[@SteveGriffith-Prof3ssorSt3v3]

Observers can fire many times. It's not just a one time call to the handleResize function. I would consider using media queries to change what is shown and how things are shown through CSS. OR using the matchMedia( ) method - kzbin.info/www/bejne/bJe3eJ1nib5pqKc - inside an openLinks function to decide what to do.

[@4541047]

Nice video. When to use resizer observer over addEventListener('resize', ...)?

[@SteveGriffith-Prof3ssorSt3v3]

The observer let's you target things other than the window for size changes.

[@4541047]

@@SteveGriffith-Prof3ssorSt3v3 Thanks!

[@AdrianSkar]

Thank you very much. What's the difference between *Element.parentElement.removeChild(Elem)* and *Element.remove()*?

[@SteveGriffith-Prof3ssorSt3v3]

removeChild( child ) remove( ) the first removes a child element the second removes the element that is calling the method.... kzbin.info/www/bejne/rXm5fXyNnst5rtk

[@theartist8835]

Could you please make a video on performance observer, giving some use cases?

[@SteveGriffith-Prof3ssorSt3v3]

Please add that in the comments here - kzbin.info/www/bejne/gnTIq5SuZ9qBacU

[@theartist8835]

@@SteveGriffith-Prof3ssorSt3v3 Done! thank you!