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.
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.
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
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.
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.
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.
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
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.
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 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.
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.
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).
Everytime I watch your videos i get something new 🙂 thanks
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?
Thank God this is in my recommended videos...I needed this so bad thanks Kyle.
You really save my life for this video.
Thank you so much
Dude, nice. Glad to hear the performance is good with this approach.
You're da MAN, thanks for such a good video! Clear & fix info in here!
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
Hi Kyle thanks for this outstanding video!!, waiting for ur e-commerce website tutorial😀
Understood this concept only after watching this video. Thanks!
That's why we are waiting for Container Queries, can't wait to see it in action!
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.
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.
Wow! Thanks Kyle! Will try that out as soon as tomorrow ;)
thank you now we have container queries
This is a banger Kyle🔥 thanks man for this awesome info🙌🏼
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!
Cool technique! I have been using CSS all the time until I saw your video :D
Your channel is the best dev channel on youtube
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 😊
I can't tell you how subscribed I am to this channel.
Thank you, Kyle, many of your videos helped me a lot, this was as always excellent.
Bruh I just needed this 2 days ago, Pog
Amazing video! Thank you Kyle and have an amazing new year!
Thank you, for still showing something new I didn't know
I really hate media queries so this video makes me happy
One of my Favorite TH-camr ! Thank you for sharing your knowledge!😊✌️
Thanks Kyle!
thank you so much for your work!
Really cool video! 👏👏👏
Gonna use this in my upcoming projects am sure
I didn't know about these. 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.
Thanks, very helpful
Nice. Can’t wait to use this.
You are the besttt! 🙌
Very cool. I don't know right know the benefit... But I never know... Thanks
Very informative - thank you so much!
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.
Thx Web Dev, good content
Um dos melhores canais de trickster js do mundo.
Thank you again for the knowledge you are sharing
Well explained! Big fan. Thx Kyle
Great!! Thank you kyle
You make the web simplified!!
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
Awesome video. Would be great if you make a video about how to use it with React.
This is cool, thanks for sharing !!
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.
Pretty cool video ❤
I can't thank you enough, Kyle
You are awesome and the guitar behind you is fantastic btw can you play heavy metalcore riff
Awesome sir
very helpful thx
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.
Great little tool. Could add a whole new functionality to a website.
Academy Award for Best Hair on a TH-cam Dev Channel 2020
This is awesome. It would be perfect if you can show us in React.
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.
Thanks Kyle
Wow, this is great!
Having to resort to Javascript to control your ui is a code smell...it better be really intentional and meaningful!
So this is how you make the polyfill for the upcoming css container queries
It's interesting. But what about the performance if used so many element checks?
awesome !
Thank u😍
Awesome. 👏👏👏
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
CSS @container can now do the job mostly.
Yeah you are the best one
I think use media query is the best for development and team, but observer is the best for who are creative person
love this!
VERY NICE!
Nice!
Hey Kyle. Thanks.
superb
Does this affect performance when used extensively?
Will we able to do something similar with container queries (if they become supported) ?
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.
Can't wait for wider adoption of container queries
Good video, but I wish you had showed the CSS file.
Please make video on dynamic font size in javascript.
Yahoooooo!!!!
Hey Kyle, isn’t this what container queries are going to be?
This video is good. Hopefully there has a tutorial on react theme with custom hook and styled components. 😁
Container queries in css can do it natively. But they not supported by every browser yet
Good to know this is around but it’s hard to figure a practical use case for this in production.
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
awesome
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.
So what next observer video Will u make? I hope MutationObserver
wow... nice hair style :) and nice video :)
This was epic
Interesting
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.
Great video. How do you manage the performance with a defer?