React Dev, You Need To Know @container!

Code: github.com/jherr/container-qu...
👉 Practical Module Federation Book: module-federation.myshopify.c...
👉 No BS TS (The Book): no-bs-ts.myshopify.com/
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono
0:00 Introduction
0:57 Demo Application Walkthrough
2:28 Vanilla CSS Setup
4:32 My Responsive Approach
4:50 The Layout Container Query
9:13 The Card Container Query
13:23 Adding The Content
19:05 Polyfilling Container Queries
20:19 Tailwind Container Queries
29:22 Outroduction
#css #reactjs

[@Mikenight120]

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!

[@Kwuala]

Thank you for the "Layout first, styling second" piece of advice ❤

[@vray2904]

timestaaaamp please? x)

[@dontwanttousemyrealnametol6765]

for markup languages, in particular for LaTeX, the advice should probably be: content first, layout/styling second.

[@Kwuala]

@@vray2904 It was said many times, the last one is at 30:15

[@user-ik7rp8qz5g]

The dog on wallpaper seems unhappy about sidebar disappearing at 1:45 😀

[@victorwpbastos]

You help me finally understand what container query is! Thank you for this amazing content!

[@ogreeni]

Love your approach to CSS, please make more content like this!

[@kustomq]

Was just thanking to myself that you haven't posted in 3 weeks, and bam! new video!

[@codewithguillaume]

I was looking for an answer to that problem weeks ago. Found out the same solution as you and sharing the same pov.

[@Web-Dev-Codi]

Love your videos. Always very informative and explained very well. Thank You.

[@daniellacerda6550]

Great video, I loved your approach, easy, precise and very funny

[@eleah2665]

Blue Collar Coder does not want me to lose my mind! Thanks again. Always good and interesting.

[@kettenbach]

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. 🙏👍💪

[@EricMuranoAU]

I've wanted container queries for almost a decade!

[@kevyyar]

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 😅

[@MsPrakhar12]

Great explanation!

[@VictorMainaKinuthia]

Your reactions when something works are just soooo precious! 😂😂😂

[@SahilRajput03]

Super awesome, I need to do it sidebyside handon to get grip. Thanks Jack for this.! :)

[@andreiKspb]

Realy good and awesome. Thanks a lot

[@igboanugwocollins4452]

"... I am telling you, me to you, you will lose your mind" this statement is absolutely true 😆

[@igboanugwocollins4452]

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!

[@braydenwerner197]

Cool video, thanks

[@sharqyyem]

as always u r the best. thanks.

[@9622AX]

Awesome! Thanks

[@drewbird87]

Thanks Jack!!

[@rohitkf8474]

You my friend have earned my SUBSCRIPTION and BELL ICON ❣

[@user-vc5qc5lc8u]

Hello Jack, i am amazed how fast your terminal look like. Did you made a video about your hardware / workstation configuration ? Cheers !

[@davekjellmarong9381]

The thumbnail made me subscribe.

[@thayto_dev]

I love when Jack says: “how cool is that?”

[@jasperams]

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%.

[@jherr]

Definitely. Test on your browser support matrix.

[@Kay_Drechsler]

Definitely true. Would really like to start implementing them but the browser support is just not satisfactory yet.

[@BHFJohnny]

On my current project, we're not even allowed to use grid or even flex-gap. So I expect @container in about 2036

[@jherr]

Sorry to here that. ;(

[@MayhemPhone]

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

[@tolgask2812]

i liked before watching

[@irfansaeedkhan7242]

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

[@CFXTBogard]

You looks so happy like a kid in a candy store with the @container query lol

[@alexpanic1]

Great tutorial! Could you please share with us your terminal theme and font? Thnx :)

[@WilliamShrek]

Wow blue-collar magician.👍🏻

[@IainSimmons]

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.

[@jherr]

Or a section, that's another alternative. :)

[@portalteam5832]

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.

[@jherr]

@@portalteam5832 you are right. And I need to learn a lot more about semantic HTML.

[@coderlicious6565]

Would love a video on your vscode extension useage, unless you've done one already.

[@chrisciampoli]

Mr.Jack is the new Uncle Bob

[@valentinnankov5054]

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?

[@charliec.2099]

Could you upload the old code w/ media queries to compare against the container ones?

[@plskz]

awesome

[@Pareshbpatel]

Wow! - Top Notch tutorial on @container responsive layout design! - Thanks, Jack {2022-12-03}

[@LarsRyeJeppesen]

Not just React, all developers

[@kunalverma2746]

Is there anyway you can share your settings.json of vscode??

[@hansschuijff]

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?

[@jherr]

Fig, iTerm and oh-my-zsh.

[@hansschuijff]

@@jherr Thank you, I got oh-my-zsh running in vscode. 🙂 Fig is mac only, but will wait for the windows version.

[@dotjs5025]

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

[@jherr]

It's integrated iTerm + Fig.

[@dotjs5025]

@@jherr Fig okay I thought I saw Figterm in the corner . Thanks

[@Murugan.d-cg2wi]

❤❤

[@UMBERELLA_ACADEMY]

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 🙏🏻

[@jherr]

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.

[@UMBERELLA_ACADEMY]

@@jherr Thank you for your reply sir, let me go through the whole video again 🙂

[@babycheesus666]

sick thumbnail 🤣

[@petarkolev6928]

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

[@DaveMacpherson]

Love your vscode terminal prompt. Care to share?

[@ulrichmbouna4091]

Already support in FireFox

[@ezequielpereyra6494]

Good video and good font, what is?

[@dwolrdcojp]

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

[@bartek...]

Firefox finally!!!!!

[@nextfangtechlead6239]

Containers!!!! Alright!! 🫡

[@r-i-ch]

God help you without a * { box-sizing: border-box }

[@coolemur976]

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?

[@jherr]

Modern usage of media queries ends up creating media query blocks for every component they apply to. Even so, no difference really.

[@valentoMundrov]

cup of coffee, just to keep them goin'

[@zlackbiro]

Screw web and CSS! I wish you fast recovery from cold.

[@dattm5527]

What cool theme are you using ?

[@jherr]

Night Wolf [black] and JETBrains Mono

[@max_cr_it]

You can use this npm prettier plugin to sort your imports like a pro prettier-plugin-sort-react-imports

[@dave7038]

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?

[@user-xw6jr7ue4b]

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.

[@CanRau]

Also Kevin Powell's channel is a fantastic resource for CSS

[@DatDat59]

But Firefox doesn’t support this right ?

[@jherr]

Not today. But there is a good polyfill.

[@jesseliverless9811]

What's 'wrong' with @media queries?

[@jherr]

Does something need to be "wrong" with them?

[@jesseliverless9811]

@@jherr 0:15 "they've had some serious drawbacks"?

[@jherr]

@@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.

[@ShadowJak]

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.

[@greendsnow]

oh this not... tailwind.. :D

[@bartek...]

Nor bootstrap 🤣

[@patrykkowalski8355]

Don't hype yet... another youtube, we know that, we know about that since few years, but coverage is still weak 65-73%

[@catwithawand]

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.

[@AnthonyPaulT]

How is this easier? Lmao

[@user-ze9nl2iy2x]

movies.map(( ... ) => { return ( ... )});