You are trully a Jewel to this community of developers. Once I found your channel I cannot stop seeing these high quality videos. Please never stop, we appreciate all your effort you put in your videos!
Another banger sir. For twenty minutes I was thinking what's tailwind gonna do, and then bam, first party plugin. I'm on it. Thanks bro. God bless. 🙏👍💪
Great video as always Jack. I have been waiting for container queries to be supported for a long long time. I do feel like it is important to note that although container queries are now 'here', it is not wise to already use them in production. They have been added to the latest releases of all major browsers but currently only have a support of 73% worldwide. The main problem is people running/stuck on older mobile browsers. Maybe there are good polyfills available (I have not yet tried them myself) but just be sure that you don't break your styling for that remaining 27%.
Very cool! Great explanation! Just one thing that bugged me though, I think you meant to use an aside element instead of an article! Loved how easy the Tailwind port was, I think most of us probably expected a ton of extra classes scattered everywhere, but it was so minimal.
This is just not a great example if we're worried about proper semantics. `main` is the main content of the site, so both columns could have been in main since they are housing the same content (list of movies) - we don't actually know the relation between them in this example. The columns could have been wrapped with `section`s as they are used to group related content...however, that would then depend if it is random movies in each section or there is some logical grouping like genre, rating, etc... an `aside` could have been used for the sidebar if the content there is not required to understand the main content but it's hard to see that scenario in this layout of two lists (vs. content + list/sidebar). All that to say, the semantics of the content is not given, and there are no `header`s or `heading`s to hint it, so really they should just both be in `div`s which receive their semantics from their children.
Thank you very much for this, have been using clientWidth in react to style make these kind of styles with complex code. This is just a jewel... Thanks again!
Hi Jack, big fan over here! I've watched almost all of your videos, you are a great dev! But there is something that I am missing out from your videos. You're mostly using divs for content layout (probably except few videos, including this one). Can you make a video of some semantic HTML, and explain in simple words what is better for SEO, and how search engines are parsing our React apps, and do we really need to make all of our production apps using semantic HTML?
I don't know you personally sir but you radiate a very positive energy the way you speak, each and and everything is so clear and understandable, you have so basic and minute details in all of your videos in a very simple yet detailed possible way, world needs more teachers like you sir, A big thanks to you ❤❤❤❤ Could you please take my doubt from this video When you applied container query to the .card {.image: borderRadius} why this styling is only applied to the left layout in the first place and not right layout ?, sorry If my question is too dumb but I am learning 🙏🏻
That's the container queries. The left and right sections are defined as containers. And there are container queries that say that when the cards are laid out within a container over a certain width then styles are applied that turn the layout into a two column layout.
Are you using a green screen? Really looked like you were sitting in that room until I started to question it towards the end and then you poofed and confirmed editing lol
How does your app read this "@container" rule? When I use it in my React app it's not applying at all :( My VS Code also throws me warning "Unknown at rule @containerscss(unknownAtRules)". Is this issue related to SASS? Because I am using SASS
As always another great video Jack. Love your integrated terminal in Vs code . What tool do you use to get that kind of features inside Vs code terminal ? I would love to have some productivity within Vs code terminal . Would be great if you could share the details
CSS for JavaScript developers course by Josh Comeau explains all the CSS stuff from the video except the container queries themselves since they're quite new.
Container queries doesn’t scale as well as media queries. You will have many container queries instead of few media queries to control responsiveness in big scale project. Right or wrong?
Good video, but in the future can you do less talking with the example website on the screen and more talking with the code on the screen? It makes clicking around the video to see the code a bit harder than it should be.
@@jesseliverless9811 my bad. Sorry. They only relate to the width of the entire view. Which means that you can only really use them to accurately manage components that consume the entire view. Sorry, brain fart, I confused media with container.
Why not? There is a polyfill that can take your coverage up to something like 92.8%. Unless you want IE support (who does nowadays though) then I don't see an issue with it.
Thank you for the "Layout first, styling second" piece of advice ❤
timestaaaamp please? x)
for markup languages, in particular for LaTeX, the advice should probably be: content first, layout/styling second.
@@vray2904 It was said many times, the last one is at 30:15
You are trully a Jewel to this community of developers. Once I found your channel I cannot stop seeing these high quality videos. Please never stop, we appreciate all your effort you put in your videos!
Another banger sir. For twenty minutes I was thinking what's tailwind gonna do, and then bam, first party plugin. I'm on it. Thanks bro. God bless. 🙏👍💪
The dog on wallpaper seems unhappy about sidebar disappearing at 1:45 😀
Jack we need a full ordered front end course from you! Your explanations and knowledge is so valuable. We want to become architects like yourself 😅
Was just thanking to myself that you haven't posted in 3 weeks, and bam! new video!
I was looking for an answer to that problem weeks ago. Found out the same solution as you and sharing the same pov.
Love your approach to CSS, please make more content like this!
I've wanted container queries for almost a decade!
Great video as always Jack. I have been waiting for container queries to be supported for a long long time. I do feel like it is important to note that although container queries are now 'here', it is not wise to already use them in production. They have been added to the latest releases of all major browsers but currently only have a support of 73% worldwide. The main problem is people running/stuck on older mobile browsers.
Maybe there are good polyfills available (I have not yet tried them myself) but just be sure that you don't break your styling for that remaining 27%.
Definitely. Test on your browser support matrix.
Definitely true. Would really like to start implementing them but the browser support is just not satisfactory yet.
On my current project, we're not even allowed to use grid or even flex-gap. So I expect @container in about 2036
Sorry to here that. ;(
good god I'm so sorry, this must be in a very specific field that requires super old IE support? At least you have flexbox still? lol
Blue Collar Coder does not want me to lose my mind! Thanks again. Always good and interesting.
"... I am telling you, me to you, you will lose your mind" this statement is absolutely true 😆
Your reactions when something works are just soooo precious! 😂😂😂
You help me finally understand what container query is! Thank you for this amazing content!
Super awesome, I need to do it sidebyside handon to get grip. Thanks Jack for this.! :)
Very cool! Great explanation!
Just one thing that bugged me though, I think you meant to use an aside element instead of an article!
Loved how easy the Tailwind port was, I think most of us probably expected a ton of extra classes scattered everywhere, but it was so minimal.
Or a section, that's another alternative. :)
This is just not a great example if we're worried about proper semantics. `main` is the main content of the site, so both columns could have been in main since they are housing the same content (list of movies) - we don't actually know the relation between them in this example. The columns could have been wrapped with `section`s as they are used to group related content...however, that would then depend if it is random movies in each section or there is some logical grouping like genre, rating, etc... an `aside` could have been used for the sidebar if the content there is not required to understand the main content but it's hard to see that scenario in this layout of two lists (vs. content + list/sidebar). All that to say, the semantics of the content is not given, and there are no `header`s or `heading`s to hint it, so really they should just both be in `div`s which receive their semantics from their children.
@@portalteam5832 you are right. And I need to learn a lot more about semantic HTML.
Thank you very much for this, have been using clientWidth in react to style make these kind of styles with complex code. This is just a jewel... Thanks again!
thanks mate you showed me how i should change my designing methods in 2023, like we say if you are not updated you are outdated
Great video, I loved your approach, easy, precise and very funny
I love when Jack says: “how cool is that?”
Hi Jack, big fan over here! I've watched almost all of your videos, you are a great dev! But there is something that I am missing out from your videos. You're mostly using divs for content layout (probably except few videos, including this one). Can you make a video of some semantic HTML, and explain in simple words what is better for SEO, and how search engines are parsing our React apps, and do we really need to make all of our production apps using semantic HTML?
The thumbnail made me subscribe.
Would love a video on your vscode extension useage, unless you've done one already.
Wow blue-collar magician.👍🏻
Hello Jack, i am amazed how fast your terminal look like. Did you made a video about your hardware / workstation configuration ? Cheers !
You looks so happy like a kid in a candy store with the @container query lol
You my friend have earned my SUBSCRIPTION and BELL ICON ❣
I don't know you personally sir but you radiate a very positive energy the way you speak, each and and everything is so clear and understandable, you have so basic and minute details in all of your videos in a very simple yet detailed possible way, world needs more teachers like you sir,
A big thanks to you ❤❤❤❤
Could you please take my doubt from this video
When you applied container query to the .card {.image: borderRadius} why this styling is only applied to the left layout in the first place and not right layout ?, sorry If my question is too dumb but I am learning 🙏🏻
That's the container queries. The left and right sections are defined as containers. And there are container queries that say that when the cards are laid out within a container over a certain width then styles are applied that turn the layout into a two column layout.
@@jherr Thank you for your reply sir, let me go through the whole video again 🙂
Love your videos. Always very informative and explained very well. Thank You.
Mr.Jack is the new Uncle Bob
Wow! - Top Notch tutorial on @container responsive layout design! - Thanks, Jack
{2022-12-03}
Great tutorial! Could you please share with us your terminal theme and font? Thnx :)
Great examples of @container, thanks for the tutorial.
I like how nice your terminal looks, with the colors and lines. How did you do that?
Fig, iTerm and oh-my-zsh.
@@jherr Thank you, I got oh-my-zsh running in vscode. 🙂 Fig is mac only, but will wait for the windows version.
Not just React, all developers
Realy good and awesome. Thanks a lot
i liked before watching
Already support in FireFox
Containers!!!! Alright!! 🫡
Awesome! Thanks
sick thumbnail 🤣
Thanks Jack!!
Great explanation!
Could you upload the old code w/ media queries to compare against the container ones?
Cool video, thanks
Are you using a green screen? Really looked like you were sitting in that room until I started to question it towards the end and then you poofed and confirmed editing lol
Firefox finally!!!!!
What cool theme are you using ?
Night Wolf [black] and JETBrains Mono
Can I not just use a table to position the content??
❤❤
God help you without a * { box-sizing: border-box }
How does your app read this "@container" rule? When I use it in my React app it's not applying at all :( My VS Code also throws me warning "Unknown at rule @containerscss(unknownAtRules)". Is this issue related to SASS? Because I am using SASS
As always another great video Jack. Love your integrated terminal in Vs code . What tool do you use to get that kind of features inside Vs code terminal ? I would love to have some productivity within Vs code terminal . Would be great if you could share the details
It's integrated iTerm + Fig.
@@jherr Fig okay I thought I saw Figterm in the corner . Thanks
as always u r the best. thanks.
cup of coffee, just to keep them goin'
You can use this npm prettier plugin to sort your imports like a pro
prettier-plugin-sort-react-imports
Love your vscode terminal prompt. Care to share?
awesome
Good video and good font, what is?
Screw web and CSS! I wish you fast recovery from cold.
This is cool, but my CSS knowledge is quite weak. I wonder if someone could recommend some channels that teach CSS as clearly as Jack teaches React?
CSS for JavaScript developers course by Josh Comeau explains all the CSS stuff from the video except the container queries themselves since they're quite new.
Also Kevin Powell's channel is a fantastic resource for CSS
Container queries doesn’t scale as well as media queries. You will have many container queries instead of few media queries to control responsiveness in big scale project. Right or wrong?
Modern usage of media queries ends up creating media query blocks for every component they apply to. Even so, no difference really.
Is there anyway you can share your settings.json of vscode??
Good video, but in the future can you do less talking with the example website on the screen and more talking with the code on the screen? It makes clicking around the video to see the code a bit harder than it should be.
But Firefox doesn’t support this right ?
Not today. But there is a good polyfill.
What's 'wrong' with @media queries?
Does something need to be "wrong" with them?
@@jherr 0:15 "they've had some serious drawbacks"?
@@jesseliverless9811 my bad. Sorry. They only relate to the width of the entire view. Which means that you can only really use them to accurately manage components that consume the entire view.
Sorry, brain fart, I confused media with container.
oh this not... tailwind.. :D
Nor bootstrap 🤣
Don't hype yet... another youtube, we know that, we know about that since few years, but coverage is still weak 65-73%
Why not? There is a polyfill that can take your coverage up to something like 92.8%. Unless you want IE support (who does nowadays though) then I don't see an issue with it.
How is this easier? Lmao
movies.map(( ... ) => { return ( ... )});