Thanks, that was very helpful. The only issue with your videos I regularly have is that they are so packed with information that my brain goes into overflow.
Well if I run into a problem, I look it up or I surf UA-cam. Stuff like this sticks to me because it fixes problems that I’m facing on my projects or at work. Bookmark these videos. You’re not expected to remember everything, only stuff you apply to your work.
Also, you can set the height of the box with the CSS unit on, that's exactly one line of these height. 3lh will show three lines of texts avoiding the clipping of and the guessing with pixels
One extra tiny thing; the "text-wrap" longhand property is now baseline. So instead of memorising "white-space:nowrap" whenever you need text truncation, you can use "text-wrap:nowrap" instead. It's super trivial, but I love how much more common-sense it feels when I'm explaining it to new developers. Just a tiny little quality of life thing.
Awesome content. I feel like an absolute geek to watch and learn continuously, while some so-called devs I encountered are still using nbsp for fixing placement 😂 and they are still hired as "senior" title...
@NikitaDrokin as a lazy dev, sometimes I use it too 😅 what I'm actually trying to say is I can't understand why some devs stop learning and improving themselves. Even if I don't know something, i should at least try to learn. I learned these css properties to make a 2 line ellipsis last week. I could have said I only know one line ellipsis, but I see these as a learning opportunity. I think a software developer should always be eager to learn and brave to challenge his skills. Yet I see ppl already given up learning in their late 30s, but still expecting respect from juniors who are way more knowledgeable. In short, I know someone like this who codes so bad that I and a newly graduated junior have to fix all the time 🥲
I am sure there is no position of "senior CSS developer" and they are probably hired for other skills they have. Senior devs are usually responsible for making higher end development decisions, so they need to focuse more on improving their decision making skills instead of learning and knowing all bleeding-edge hacks and updates. Additionally, majority of senior devs are older people, so they didn't have access to such knowledge when their job was making sure their code is up to date when standards
Related question: How do I limit width of a PRE so that it, **together with all the inline margins and padding**, is never wider than 100svw. If I try ‘max-width: 100%’ it is sized to fit the content and causes horizontal scrolling on the page. If I try ‘max-width: 100svw’ the content of PRE is limited to width of the width of the browser window but additional margins and paddings of ancestor elements still causes horizontal scrolling on the page. Best I figured is something like ‘max-width: calc(100svw - 3rem)’ where I manually add all the margins to get ‘3em’ but that doesn’t work if margins are changed or I move PRE inside of another nested element.
Yo bro i just started coding and already learned tailwindcss, css, js and svelte. Now am looking to enhance my skill by learning animations ( scroll trigger etc... ) so do you think it's easier to do in js, css or even tailwind am lost a bit thank you And thank u for your work this help us a looooottt 😅
I started using framer motion for animations and I’m a fan so far. Css based animations can have a lot of weird performance bugs and require using a bunch of WebKit flags, etc. to work on every browser. Framer motion is performant and more intuitive imo
@@TarrenHassman thanks bro, I'm really not a fan of the use of too much library ( maybe bcz am a new programmer) bcz i feel like it overcomplicate things in the sense that when a bug occur you will spend a lot more time to figure out and that make the code more difficult to read for someone else That's why I'm learning motions with js but i think i will go for gsap since i heard a lot of good think about it, or please can you tell me more on the issues with css animations ? ✨
@@user-ty4zk3hs7n Sure. One of the ones I ran into recently was animating comic css gradients caused them to strobe on certain resolutions. Framer-motion converts your css animations to a performant implementation. It essentially replaces the key frames and animation declarations in css. You still animate using css props they just get written in the inline props on the motion.div/p/etc components of framer-motion. I’m not a big fan of a bunch of libraries either, but this is one I’d recommend
Also try to use Inside a word, and an automatic hyphen will be inserted. Ex: reallylongwordhere Do: reallylongwordhere Will automatically do this as the block is getting smaller. reallylong-wordhere
10:25, if overflow-wrap is set to break-word, why does the width: min-content property of the div not consider asdf as its min content anymore? this doesnt make any sense
Too bad they didn't add a CSS property that allows you to have an automatic title on the elements with clipped text. it always annoyed me that I could do all of this through CSS, then I had to write complicated code to: 1) detect there has been some clipping 2) manually add/remove the title attribute.
One suggestion plz use in your video Anything you showcase or teach try to teach in a way of animation which show red cross that this is wrong first than after changing it show green tick that this is right I think this way your video get full attractive as i think over youtube now days Although your content is very special and helpfull for me, THANK YOU.
Thanks, that was very helpful. The only issue with your videos I regularly have is that they are so packed with information that my brain goes into overflow.
😂😂
😂😂
Use only the things you face problems with i.e add overflow to be auto
@@adityaprasad3122 Overflow on my brain is on auto.
Well if I run into a problem, I look it up or I surf UA-cam. Stuff like this sticks to me because it fixes problems that I’m facing on my projects or at work.
Bookmark these videos. You’re not expected to remember everything, only stuff you apply to your work.
Also, you can set the height of the box with the CSS unit on, that's exactly one line of these height. 3lh will show three lines of texts avoiding the clipping of and the guessing with pixels
I am working on a website for sports journalists and the text-overflow property just made my day. Thank you!
Thanks it was much needed for me. Was struggling with word wrap in cards.
One extra tiny thing; the "text-wrap" longhand property is now baseline.
So instead of memorising "white-space:nowrap" whenever you need text truncation, you can use "text-wrap:nowrap" instead.
It's super trivial, but I love how much more common-sense it feels when I'm explaining it to new developers. Just a tiny little quality of life thing.
Really helpful walkthrough for dealing with text and overflow!
This is very useful, Thanks a lot
Wow you are sooo informed mahn. I wanna be greater than you in future.
Awesome content. I feel like an absolute geek to watch and learn continuously, while some so-called devs I encountered are still using nbsp for fixing placement 😂 and they are still hired as "senior" title...
To be fair, if someone doesn't know all these good CSS workarounds, a nbsp may be a good bandaid fix. It's not perfect, but it still works sometimes.
@NikitaDrokin as a lazy dev, sometimes I use it too 😅 what I'm actually trying to say is I can't understand why some devs stop learning and improving themselves. Even if I don't know something, i should at least try to learn. I learned these css properties to make a 2 line ellipsis last week. I could have said I only know one line ellipsis, but I see these as a learning opportunity. I think a software developer should always be eager to learn and brave to challenge his skills. Yet I see ppl already given up learning in their late 30s, but still expecting respect from juniors who are way more knowledgeable. In short, I know someone like this who codes so bad that I and a newly graduated junior have to fix all the time 🥲
I am sure there is no position of "senior CSS developer" and they are probably hired for other skills they have. Senior devs are usually responsible for making higher end development decisions, so they need to focuse more on improving their decision making skills instead of learning and knowing all bleeding-edge hacks and updates.
Additionally, majority of senior devs are older people, so they didn't have access to such knowledge when their job was making sure their code is up to date when standards
wow. this video taught me a lot. Thanks a lot :D
Kyle the ninja. avoiding invisible bullets left and right, swoosh swoosh
Really helpfull, thank you.
Thanks 💥❤️
Thanks kyle 😎
I need the video on how to center a div like a Senior Dev.
brilliant !
Related question: How do I limit width of a PRE so that it, **together with all the inline margins and padding**, is never wider than 100svw. If I try ‘max-width: 100%’ it is sized to fit the content and causes horizontal scrolling on the page. If I try ‘max-width: 100svw’ the content of PRE is limited to width of the width of the browser window but additional margins and paddings of ancestor elements still causes horizontal scrolling on the page. Best I figured is something like ‘max-width: calc(100svw - 3rem)’ where I manually add all the margins to get ‘3em’ but that doesn’t work if margins are changed or I move PRE inside of another nested element.
Did you try putting box-sizing:border-box; on the pre?
In combination with the max-width 100svw; i think it might work.
Excellent.
we no longer need to write overflow-x and y, we can do overflow: hidden scroll/auto. (at least in Chrome and Firefox)
great !
Yo bro i just started coding and already learned tailwindcss, css, js and svelte. Now am looking to enhance my skill by learning animations ( scroll trigger etc... ) so do you think it's easier to do in js, css or even tailwind am lost a bit thank you
And thank u for your work this help us a looooottt 😅
I started using framer motion for animations and I’m a fan so far. Css based animations can have a lot of weird performance bugs and require using a bunch of WebKit flags, etc. to work on every browser.
Framer motion is performant and more intuitive imo
@@TarrenHassman thanks bro, I'm really not a fan of the use of too much library ( maybe bcz am a new programmer) bcz i feel like it overcomplicate things in the sense that when a bug occur you will spend a lot more time to figure out and that make the code more difficult to read for someone else
That's why I'm learning motions with js but i think i will go for gsap since i heard a lot of good think about it, or please can you tell me more on the issues with css animations ? ✨
@@user-ty4zk3hs7n Sure. One of the ones I ran into recently was animating comic css gradients caused them to strobe on certain resolutions. Framer-motion converts your css animations to a performant implementation.
It essentially replaces the key frames and animation declarations in css.
You still animate using css props they just get written in the inline props on the motion.div/p/etc components of framer-motion.
I’m not a big fan of a bunch of libraries either, but this is one I’d recommend
just in time
Also try to use Inside a word, and an automatic hyphen will be inserted.
Ex: reallylongwordhere
Do: reallylongwordhere
Will automatically do this as the block is getting smaller.
reallylong-wordhere
Nice video 👍
Good videos. I just wish he’d hold his head still 😊
First to be here! No idea why I commented this.
10:25, if overflow-wrap is set to break-word, why does the width: min-content property of the div not consider asdf as its min content anymore? this doesnt make any sense
What editor are you using!? It’s awesome
Never mind I zoomed in and saw it is vscode. Cool
Masterfully done. However you did not fully cover all the whitespace properties
You will laugh, but we actually habe sich long words in our German language 😂 7:09
Brother how to implement ellipsis in the middle dynamically with windows resize event
No middle ellipses with pure CSS, Aug 2024.
I have new idea of a project: head wobble stabilizer.
It's very hard to watch you without feeling dizzy.
woooowwwww
Why do you always shake your head so much, Kyle? 😂😂
It's the way he talks 😂
prop tip:
The overflow-wrap property should be applied to the element that directly contains the text.
5th
Too bad they didn't add a CSS property that allows you to have an automatic title on the elements with clipped text. it always annoyed me that I could do all of this through CSS, then I had to write complicated code to: 1) detect there has been some clipping 2) manually add/remove the title attribute.
One suggestion plz use in your video
Anything you showcase or teach try to teach in a way of animation which show red cross that this is wrong first than after changing it show green tick that this is right
I think this way your video get full attractive as i think over youtube now days
Although your content is very special and helpfull for me, THANK YOU.
10th comment ,no Idea why i comment this
Do you think ai will replace coders ?
No
First comment
Please not pin 😅
Chad Frontend approved. ✅
`overflow-wrap` is years-old. Best combined with `hyphens: auto`
both years old...
most of the content in the video is years old and very much not new
Unfortunately, hyphens: auto is not supported for many non-english languages in Chrome.
Css4 shouldn't add anything but remove a bunch of stuff. 😮😅
pin please❤
Try this and comeback here, give me one like if this resolve your solution. I always do it in my project
Every month something new❤️🩹i wish i cold do websites🥺nice tough to at least be up to date with the novel things