Learn Resize Observer In 5 Minutes

Resize Observer is an amazing tool in JavaScript that allows you to easily and efficiently do complex media query style calculations. What makes resize observer especially powerful is the fact that it can do things media queries cannot do such as container queries.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:25 - Why Use Resize Observer
01:10 - Resize Observer Basics
03:40 - Resize Observer Example

#ResizeObserver #WDS #JavaScript

[UmarAlFarooq]

What I LOVE about your videos:
1. You jump right into the topic. No wasting time.
2. No sponsor or ads
3. You don't keep telling your viewers to "like and subscribe" which wastes MORE time multiplied by the number of viewers
4. Each second of your video is important. You don't have any pauses, non-content or even lame jokes.
5. Audio, video and production quality is top notch.
6. Your content is innovative, cutting edge and extremely helpful!

YOU sir, deserve a Nobel prize instead of most of the jokers who usually get it. I hope all other content creators learn these things from you. I hope that all viewers also take notes and comment in other videos to be more like you.

[TheRealCAPerry]

It'll be interesting to see how this technique compares with Container Queries once they become available.

[adebiyial]

I don't think mentioning media queries in this context works, at least for me. Resize observer and media query are fundamentally two different things and work differently. In fact, if a media query can do it, I'd take that first. Anyway, nice and concise video — thank you.

[billyfairbank]

Cleanest explanation of this I have seen. Been a dev for 15 years and learned a couple new things. Well done!

[alvaroprietovideos]

I have been using this technique extensively in some of my projects, specially in those where certain reusable components can be used in very different context, allowing them to fit into their containers smoothly. Each reusable component gets a special sizing class according to the available space (xxl, xl, and so on...). Resize Observer can be combined with Mutation Observer to increase reusability of componentes.

[Paninicus]

Amazing how Kyle keeps bringing up JS/HTML features I haven't heard of (after being a web developer since 1996).

[RodrigoMendoza]

This is what the upcoming Container Queries in CSS are for, right? So as to accomplish the same but avoiding using JS.

[toddribnek]

Dude, nice. Glad to hear the performance is good with this approach.

[madrinsx]

Thank God this is in my recommended videos...I needed this so bad thanks Kyle.

[jozefrzadkosz]

That's why we are waiting for Container Queries, can't wait to see it in action!

[sanjitselvan]

Understood this concept only after watching this video. Thanks!

[willemaw]

You really save my life for this video.
Thank you so much

[djibrilm__-]

Everytime I watch your videos i get something new 🙂 thanks

[LePhenixGD]

This technique is incredibly handy, especially in scenarios where you need to dynamically adjust the dimensions of an HTML canvas based on changes in the height of a parent element, it's a lifesaver

[jcdeaton]

Good video. I like how you focus on one concept and leave other details out for the viewer to learn more about if they need to. Keep it up!

[joefuentes]

I can't tell you how subscribed I am to this channel.

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

Your channel is the best dev channel on youtube

[Dcooper]

Hi Kyle thanks for this outstanding video!!, waiting for ur e-commerce website tutorial😀

[j-lewis]

You're da MAN, thanks for such a good video! Clear & fix info in here!

[robertzeurunkl]

Last time I used contenteditable, I ran into snags right away. Sure, you can edit the text in a contexteditable div. But my users had other plans. They thought they could cut and paste text from other web pages into my contenteditable div. And they could. But what you don't see when doing that is that if you cut text from a webpage, and paste it into a CE div, it cuts and pastes not just the text but in fact ALL of the HTML that they highlighted when selecting that text. I ended up with html tags inside my CE div, which, of course do not show up (they're html tags), but the *effect* of them was felt immediately. So, heads-up about CE elements.