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 TH-cam works. 1. No comments here 2. Some people work using TH-cam. Their income comes from their videos and TH-cam's ad revenue is negligible for small channels. 3. TH-cam 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 TH-cam 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 TH-cam, 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.
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.
@@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.
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
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.
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.
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.
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.
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.
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.
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
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!
I’m not familiar with Resize Observer, but as far as I can tell, performance wise would be on par with any other build it method. Time complexity would end up being O(n) if you plan to evaluate each one of them
The next problem is ordering of the array, trying to manage more and more elements will get hairy very fast. A pure CSS solution should be employed for something small like this once that functionality is released.
Hello, thanks for the video. Unfortunately the point that resize observer is more performant than media queries is wrong. At the end of the day css is handled by browser itself and js is high level api. The rule of thumb is - do everything with css and in cases css cant help - use js. Thanks.
I never mentioned that it is more performant than media queries. I said that resize observer is pretty performant, but that is in comparison to doing things based window resize events which can really cause performance issues. It is always best to use CSS when possible, but this is not possible with media queries.
@Katappa hu jo bahubhali ko mar diya toh tum kon ho learn more in JavaScript itself. Things like arrays and its methods(higher order functions), objects and its methods, asynchronous JavaScript (promises, async/await), and much more.
One big issue is the browser support of resize observers and other javascript observers. If you're doing this on a production code, you might have a problem with visitors making use of older browsers.
Depends on what you need to support, and how many versions back you need to go. Even for production, you might be able to get away with using a new feature & just poly-filling older browsers. A quick look online & there's an NPM polyfill for resize observer that supports IE9.
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.
This method has one disadvantage, as for me. I firstly try to do everything with CSS-only. And then, If there something I cannot do with CSS I start to use JavaScript.
What disadvantages you 're talking about?! Like he says in the start there is no easy solution for this in CSS. Also I would use classes for thus not write CSS in the Javascript it self. Of course it not replaces media Queries general use it just when you need react to resize changes that are not part of the window resize event.
@@codernerd7076 I get what you say but if the content of the box never change. The box itself is still dependant on the dimensions of your document therefore screen.
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 :)
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!
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
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 TH-cam works.
1. No comments here
2. Some people work using TH-cam. Their income comes from their videos and TH-cam's ad revenue is negligible for small channels.
3. TH-cam 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 TH-cam 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 TH-cam, 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.
Cleanest explanation of this I have seen. Been a dev for 15 years and learned a couple new things. Well done!
Amazing how Kyle keeps bringing up JS/HTML features I haven't heard of (after being a web developer since 1996).
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
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?
Dude, nice. Glad to hear the performance is good with this approach.
Thank God this is in my recommended videos...I needed this so bad thanks Kyle.
That's why we are waiting for Container Queries, can't wait to see it in action!
Understood this concept only after watching this video. Thanks!
Everytime I watch your videos i get something new 🙂 thanks
Your channel is the best dev channel on youtube
I can't tell you how subscribed I am to this channel.
You really save my life for this video.
Thank you so much
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.
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!
This is a banger Kyle🔥 thanks man for this awesome info🙌🏼
Hi Kyle thanks for this outstanding video!!, waiting for ur e-commerce website tutorial😀
You're da MAN, thanks for such a good video! Clear & fix info in here!
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.
Amazing video! Thank you Kyle and have an amazing new year!
Cool technique! I have been using CSS all the time until I saw your video :D
Thank you, Kyle, many of your videos helped me a lot, this was as always excellent.
thank you now we have container queries
I really hate media queries so this video makes me happy
Wow! Thanks Kyle! Will try that out as soon as tomorrow ;)
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 😊
Really cool video! 👏👏👏
One of my Favorite TH-camr ! Thank you for sharing your knowledge!😊✌️
Bruh I just needed this 2 days ago, Pog
Um dos melhores canais de trickster js do mundo.
Thank you, for still showing something new I didn't know
Gonna use this in my upcoming projects am sure
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 didn't know about these. Thanks.
You are the besttt! 🙌
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.
You make the web simplified!!
Nice. Can’t wait to use this.
Awesome video. Would be great if you make a video about how to use it with React.
Very informative - thank you so much!
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.
Thank you again for the knowledge you are sharing
thank you so much for your work!
Well explained! Big fan. Thx Kyle
Pretty cool video ❤
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
Thx Web Dev, good content
I can't thank you enough, Kyle
Very cool. I don't know right know the benefit... But I never know... Thanks
Great little tool. Could add a whole new functionality to a website.
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.
Thanks Kyle!
This is cool, thanks for sharing !!
Thanks, very helpful
You are awesome and the guitar behind you is fantastic btw can you play heavy metalcore riff
Academy Award for Best Hair on a TH-cam Dev Channel 2020
Having to resort to Javascript to control your ui is a code smell...it better be really intentional and meaningful!
Awesome. 👏👏👏
Great!! Thank you kyle
I think use media query is the best for development and team, but observer is the best for who are creative person
Will we able to do something similar with container queries (if they become supported) ?
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.
Does this affect performance when used extensively?
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!
You can find it out and share with us if you will.
I’m not familiar with Resize Observer, but as far as I can tell, performance wise would be on par with any other build it method. Time complexity would end up being O(n) if you plan to evaluate each one of them
btw currently here it only selects the first ".box" element in the entire dom.
The next problem is ordering of the array, trying to manage more and more elements will get hairy very fast. A pure CSS solution should be employed for something small like this once that functionality is released.
Can't wait for wider adoption of container queries
So this is how you make the polyfill for the upcoming css container queries
Hey Kyle. Thanks.
Thanks Kyle
This is awesome. It would be perfect if you can show us in React.
It's interesting. But what about the performance if used so many element checks?
Wow, this is great!
Hey Kyle, isn’t this what container queries are going to be?
Hello, thanks for the video. Unfortunately the point that resize observer is more performant than media queries is wrong. At the end of the day css is handled by browser itself and js is high level api. The rule of thumb is - do everything with css and in cases css cant help - use js. Thanks.
I never mentioned that it is more performant than media queries. I said that resize observer is pretty performant, but that is in comparison to doing things based window resize events which can really cause performance issues.
It is always best to use CSS when possible, but this is not possible with media queries.
@Katappa hu jo bahubhali ko mar diya toh tum kon ho learn more in JavaScript itself. Things like arrays and its methods(higher order functions), objects and its methods, asynchronous JavaScript (promises, async/await), and much more.
@Katappa hu jo bahubhali ko mar diya toh tum kon ho here check him to learn JavaScript.
th-cam.com/video/EfAl9bwzVZk/w-d-xo.html
One big issue is the browser support of resize observers and other javascript observers. If you're doing this on a production code, you might have a problem with visitors making use of older browsers.
You are right, compatibility should be considered. But new and powerful api is more exciting. And they will be implemented wisely.
Depends on what you need to support, and how many versions back you need to go. Even for production, you might be able to get away with using a new feature & just poly-filling older browsers. A quick look online & there's an NPM polyfill for resize observer that supports IE9.
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"?
Thank u😍
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 sir
This method has one disadvantage, as for me. I firstly try to do everything with CSS-only. And then, If there something I cannot do with CSS I start to use JavaScript.
What disadvantages you 're talking about?! Like he says in the start there is no easy solution for this in CSS. Also I would use classes for thus not write CSS in the Javascript it self. Of course it not replaces media Queries general use it just when you need react to resize changes that are not part of the window resize event.
You can already use this as container in css itself
@@codernerd7076 I get what you say but if the content of the box never change. The box itself is still dependant on the dimensions of your document therefore screen.
Can you help me to resize column width in my page? I've try many way, but it doesn't work.
love this!
Great video. How do you manage the performance with a defer?
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 :)
very helpful thx
Good to know this is around but it’s hard to figure a practical use case for this in production.
CSS @container can now do the job mostly.
Container queries in css can do it natively. But they not supported by every browser yet
This video is good. Hopefully there has a tutorial on react theme with custom hook and styled components. 😁
VERY NICE!
wow... nice hair style :) and nice video :)
Good video, but I wish you had showed the CSS file.
Any suggestions on how to resize the height of an based on the content inside the ?
So what next observer video Will u make? I hope MutationObserver
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!
Please make video on dynamic font size in javascript.
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 :)
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