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
@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. 🙏👍💪
@codewithguillaume
Жыл бұрын
I was looking for an answer to that problem weeks ago. Found out the same solution as you and sharing the same pov.
@kustomq
Жыл бұрын
Was just thanking to myself that you haven't posted in 3 weeks, and bam! new video!
@ogreeni
Жыл бұрын
Love your approach to CSS, please make more content like this!
@igboanugwocollins4452
Жыл бұрын
"... I am telling you, me to you, you will lose your mind" this statement is absolutely true 😆
@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 😅
@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.
@BoodskiBro
Жыл бұрын
I've wanted container queries for almost a decade!
@eleah2665
Жыл бұрын
Blue Collar Coder does not want me to lose my mind! Thanks again. Always good and interesting.
@АлександрГерасимов-с3щ
Жыл бұрын
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!
@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
@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!
@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.! :)
@daniellacerda6550
Жыл бұрын
Great video, I loved your approach, easy, precise and very funny
@thayto_dev
Жыл бұрын
I love when Jack says: “how cool is that?”
@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
@user-vc5qc5lc8u
Жыл бұрын
Hello Jack, i am amazed how fast your terminal look like. Did you made a video about your hardware / workstation configuration ? Cheers !
@andreiKspb
Жыл бұрын
Realy good and awesome. Thanks a lot
@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?
@Web-Dev-Codi
Жыл бұрын
Love your videos. Always very informative and explained very well. Thank You.
@davekjellmarong9381
Жыл бұрын
The thumbnail made me subscribe.
@9622AX
Жыл бұрын
Awesome! Thanks
@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.
@rohitkf8474
Жыл бұрын
You my friend have earned my SUBSCRIPTION and BELL ICON ❣
@CFXTBogard
Жыл бұрын
You looks so happy like a kid in a candy store with the @container query lol
@drewbird87
Жыл бұрын
Thanks Jack!!
@Pareshbpatel
Жыл бұрын
Wow! - Top Notch tutorial on @container responsive layout design! - Thanks, Jack {2022-12-03}
@coderlicious6565
Жыл бұрын
Would love a video on your vscode extension useage, unless you've done one already.
@grugbrain
Жыл бұрын
Wow blue-collar magician.👍🏻
@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.
@MsPrakhar12
Жыл бұрын
Great explanation!
@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
@alexpanic1
Жыл бұрын
Great tutorial! Could you please share with us your terminal theme and font? Thnx :)
@braydenwerner197
Жыл бұрын
Cool video, thanks
@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 🙂
@chrisciampoli
Жыл бұрын
Mr.Jack is the new Uncle Bob
@charliec.2099
5 ай бұрын
Could you upload the old code w/ media queries to compare against the container ones?
@tolgask2812
Жыл бұрын
i liked before watching
@petarkolev6928
11 ай бұрын
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
@LarsRyeJeppesen
Жыл бұрын
Not just React, all developers
@sharqyyem
Жыл бұрын
as always u r the best. thanks.
@Murugan.d-cg2wi
4 ай бұрын
❤❤
@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
@plskz
Жыл бұрын
awesome
@dattm5527
Жыл бұрын
What cool theme are you using ?
@jherr
Жыл бұрын
Night Wolf [black] and JETBrains Mono
@ezequielpereyra6494
Жыл бұрын
Good video and good font, what is?
@DaveMacpherson
Жыл бұрын
Love your vscode terminal prompt. Care to share?
@ulrichmbouna4091
9 ай бұрын
Already support in FireFox
@zlackbiro
Жыл бұрын
Screw web and CSS! I wish you fast recovery from cold.
@babycheesus666
Жыл бұрын
sick thumbnail 🤣
@nextfangtechlead6239
Жыл бұрын
Containers!!!! Alright!! 🫡
@bartek...
Жыл бұрын
Firefox finally!!!!!
@kunalverma2746
Жыл бұрын
Is there anyway you can share your settings.json of vscode??
@darz_k.
Ай бұрын
Can I not just use a table to position the content??
@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.
@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?
@ПетърТодоров-о7ф
Жыл бұрын
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
@valentoMundrov
Жыл бұрын
cup of coffee, just to keep them goin'
@r-i-ch
Жыл бұрын
God help you without a * { box-sizing: border-box }
@mzpizote
Жыл бұрын
You can use this npm prettier plugin to sort your imports like a pro prettier-plugin-sort-react-imports
@DatDat59
Жыл бұрын
But Firefox doesn’t support this right ?
@jherr
Жыл бұрын
Not today. But there is a good polyfill.
@ShadowJak
11 ай бұрын
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
Жыл бұрын
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.
@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.
Пікірлер: 96