Learn Resize Observer In 5 Minutes
HTML-код
- Опубликовано: 7 июн 2024
- 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:
Resize Observer Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:25 - Why Use Resize Observer
01:10 - Resize Observer Basics
03:40 - Resize Observer Example
#ResizeObserver #WDS #JavaScript
![TRASH or PASS! Eminem ( Houdini ) [REACTION!!!]](http://i.ytimg.com/vi/cB1WrZcMwMc/mqdefault.jpg)
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.
I'm gonna offer a different perspective, because most people fail to realize how RUclips works.
1. No comments here
2. Some people work using RUclips. Their income comes from their videos and RUclips's ad revenue is negligible for small channels.
3. RUclips themselves instructs creators to "call to action", and therefore rely on this metric to promote the video, which in turn gives more views and more ad revenue for RUclips of course, but also for the channel. So it's a waste of time for you personally, but for the creator it's a necessary measure to stay relevant (also, what the hell do you mean be "multiplied by the number of users"? We don't have a collective maximum of time we all share. There's no more time wasted per person, what the hell?)
4, 5 and 6. No comments here.
Closing comments: you claim others are "jokers" because they don't make the styles of videos you like. It's okay to dislike. There's even a button for doing that. It's NOT okay to bash on those just because you don't like that.
So in a nutshell, you frame your compliments to Kyle by critiquing others in a narrow minded way which not only doesn't help anyone, but is also really rude. For the sake of others, please refrain from looking at people as objects of your entertainment and start looking at them as individuals, which they are.
@@patriciaverso the number of seconds you waste in the video is multiplied by the number of viewers. If you waste 5 seconds and a million viewers watch your video, you've effectively wasted 2 months of humanity's time.
If everyone is "calling to action" it becomes a cheap trend rather than something essential. Try this experiment. Have videos with the same content in two different channels, with the only difference being that in one you pester the viewers to "like, subscribe, alert". See which channel gets more viewers.
What's insulting and rude is treating viewers like children or senile people who need to be reminded constantly. There's not a single regular viewer who doesn't understand the "like" button or the subscribe. If you sum up all the videos that constantly badger people with this time wasting exercise every day across RUclips, that's billions of hours, essentially killing the equivalent of 10 human beings who'd live to be a hundred.
What I refer to as jokers are people like Yitzhak Rabbin and Yasser Arafat and Obama getting Nobel prizes. The "Drone President" who took the 2 wars he inherited and turned them into 7 wars gets a peace prize.
It'll be interesting to see how this technique compares with Container Queries once they become available.
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.
agreed. a CSS solution is almost always better than a similar JS solution. Only time I would pick JS over CSS is if it absolutely needs to do or look the exact way it does in JS and I can't achieve it with CSS. I am never surprised at how much JS can slow things down when it's used willy nilly.
Can be vary useful when adding attributes to an element via JavaScript if the width reaches a certain point.
@@JNeathawk Totally agree. Maybe you won't notice it on a simple static website, but doing stuff in js when you can easily handle it in css is a performance killer.
My thoughts exactly! The thumbnail and first minute of the video made me think, "is this guy really going to use an observer in place of a media query for the page?" Still, I'm glad to have learned about this as I've never messed with it in 5 years. I've used the more complicated mutation observer, and admittedly, my naivety would have made me write longer JS to do the same thing.
Well, there are times where you'll actually need to make a component responsive, say you have the same component on two different page, in page 1 it takes the full screen width, but in page 2, it takes half the page, it'll be much better to make such component responsive based on the width and height of that component instead of the width and height of the screen.
Dude, nice. Glad to hear the performance is good with this approach.
Amazing how Kyle keeps bringing up JS/HTML features I haven't heard of (after being a web developer since 1996).
Hey Kyle, in your each video I am learning something new. Thanks a lot and please keep sharing such a knowledge in future as well 😊
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!
Cleanest explanation of this I have seen. Been a dev for 15 years and learned a couple new things. Well done!
This is a banger Kyle🔥 thanks man for this awesome info🙌🏼
One of my Favorite RUclipsr ! Thank you for sharing your knowledge!😊✌️
Amazing video! Thank you Kyle and have an amazing new year!
Thank God this is in my recommended videos...I needed this so bad thanks Kyle.
Thank you, for still showing something new I didn't know
Thank you, Kyle, many of your videos helped me a lot, this was as always excellent.
You really save my life for this video.
Thank you so much
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.
How does it perform when multiple elements have the observer attached?
Hi Kyle thanks for this outstanding video!!, waiting for ur e-commerce website tutorial😀
Your channel is the best dev channel on youtube
You're da MAN, thanks for such a good video! Clear & fix info in here!
Well explained! Big fan. Thx Kyle
That's why we are waiting for Container Queries, can't wait to see it in action!
Everytime I watch your videos i get something new 🙂 thanks
Very informative - thank you so much!
Understood this concept only after watching this video. Thanks!
Wow! This is amazingly powerful since you can customize the sensitivity of the scene by modifying the granularity of the observable object network, since it's fully programmable. I'm not used to being able to do stuff like this with HTML. Thanks for the succinct explanation.
This is what the upcoming Container Queries in CSS are for, right? So as to accomplish the same but avoiding using JS.
Yes.
Yea, it will be pure CSS and full power.
Exactly.
Pure CSS will be the way to go for this for the majority of use cases. This implementation (while handy, always happy to have another tool) feels bloated to me given what it accomplishes.
Just gotta wait 4 years for full cross-browser compatibility.
Nice. Can’t wait to use this.
I didn't know about these. Thanks.
Wow! Thanks Kyle! Will try that out as soon as tomorrow ;)
Thank you again for the knowledge you are sharing
thank you so much for your work!
This is cool, thanks for sharing !!
I can't tell you how subscribed I am to this channel.
Really cool video! 👏👏👏
Cool technique! I have been using CSS all the time until I saw your video :D
Thanks, very helpful
Wow, this is great!
Great!! Thank you kyle
You make the web simplified!!
Great video. How do you manage the performance with a defer?
thank you now we have container queries
You are the besttt! 🙌
Bruh I just needed this 2 days ago, Pog
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
Thanks Kyle!
Thx Web Dev, good content
Gonna use this in my upcoming projects am sure
Um dos melhores canais de trickster js do mundo.
love this!
Pretty cool video ❤
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.
I can't thank you enough, Kyle
Awesome video. Would be great if you make a video about how to use it with React.
Something's it feels like your videos are just for me. Like the Intersection Observer video I used to to build a scroll spy, then this I need something to show mobile and desktop preview and this is the solution.
VERY NICE!
Awesome sir
very helpful thx
Will we able to do something similar with container queries (if they become supported) ?
Awesome. 👏👏👏
hi there! thanks for the tutorial I wanted to know which screen recorder do you use! thanks in advance!
Most likely OBS (Open Broadcaster Software), most streamers use it, you can use it to stream or record, very powerful and free.
awesome !
Thanks Kyle
Great little tool. Could add a whole new functionality to a website.
Thank u😍
It depends on the use case. If you have to adapt to exact size, or change of overflow state (to sync width between two zones), then ResizeObserver is the way to go.
If you’re adapting to size *zones* to change certain settings, then container queries.
Nice!
superb
So this demo shows a single element with a Class - can you address what would happen both functionally and especially performance-wise with a BUNCH of elements with the same class? Is there a point at 10 or 100 or 1000 elements where the array gets out of control, making using that class selector just count-productive? And thanks for these vids!
Does this affect performance when used extensively?
Any suggestions on how to resize the height of an based on the content inside the ?
It's interesting. But what about the performance if used so many element checks?
Hey Kyle. Thanks.
This was epic
I really hate media queries so this video makes me happy
Very cool. I don't know right know the benefit... But I never know... Thanks
You are awesome and the guitar behind you is fantastic btw can you play heavy metalcore riff
Would this be a good solution for a horizontal menu that needs to dynamically hide/show overflow items as the menu container changes size? I've been using a window resize trigger, but sometimes the offsetWidth of the menu elements returns 0 instead of their actual width. I'm sure adding up the offsetWidths of all the elements inside the box and seeing if the exceed the container width is a terrible way to do what I'm trying to do but I'm fairly new to front end development as I've been a back end dev my whole career and our front end guy just quit and now I've inherited his job in addition to my own. :\
Without more context on the code and the problem, it sounds like this horizontal menu is always present and stretched to the size of the page, in which case I would think media queries would be the best approach. Good luck!
Yeah you are the best one
Why do I see the error in the console "TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'."?
Wait a minute. Can't we just listen to resize events on elements? Or does that only work on the "window"?
Resize observer seems very handy but is it compatible across all browsers? and does it affect the website's performance like the "resize" event?
can I use this resize observer to work with the height property?
Could you show us how to keep the height of columns in a flex container regardless the number of lines of text in them? Thanks
One gotcha I ran into with Resize Observer, is that it doesn't fire for display:inline elements when you resize the window and the height/width changes due to the number of lines of text changing.
awesome
How do you open the dev tools on another window???? Love your vids!!!
Assuming chrome, open dev tools, at the right in the first bar the 3 vertical dots icon, first entry Dock side you can have your tools in a new window (first option) left, bottom, right :)
you are my hero , i like the subjects you raised , if you explain a few about code written in complex scenarios, e.g."this code is to do bla bla , it's written here because bla bla" it would be more awesome in general not for that video, greetings from Egypt
Good to know this is around but it’s hard to figure a practical use case for this in production.
Great video as always Kyle. Please do one for MutationObserver.
I already have that video recorded and it should release in a week or so.
@@WebDevSimplified You are the best bro.
I wonder if we should introduce some kind of polling behaviour in our stream (switchMap?) so that we don't get so many callback calls as the component resizes
You want lodash's debounce :)
Nice
GoodJob!
Hey Kyle, quick question, did you have to go through an algorithms interview for your full stack dev role?
I can answer this as I just got a full-stack role. For me, no. My technical interview was split into Javascript, NodeJs+Database, TypeScript, and React.
Let me add that I had to pass a full-stack take-home assignment first.
@@hn031 Thank you so much! And congrats on the role!
Doesn't addEventlistener('resize", callback) do the same thing?
Can't wait for wider adoption of container queries
wow... nice hair style :) and nice video :)
can we do the same by putting an if statement on the elem.getBoundingClientRect().width and change the color base of the return value
well that is going to be very inconvenient and non performant, as you will need a loop to periodically check the size of your object, this is better because it acts like a listener
Can you help me to resize column width in my page? I've try many way, but it doesn't work.
How can we do this for different device types?
Hey Kyle, isn’t this what container queries are going to be?