Shadowing Practice: Use these CSS features instead of JavaScript - Learn English Speaking with Video
Creando lección...
1
Hello my friend and friends.
2
People like to complain about the content I post on my channel saying
3
that it's like it's too cutting edge
4
so it's great to know about these features
5
but then I can't use it or it's just way too complicated I'm making a mess of things whatever it is.
6
Today we're not doing that.
7
Instead we're looking at some really well supported CSS features
8
that people still use JavaScript for instead
9
and we're just going to look at how we can simplify things into like one or two liners.
10
Yeah it should be a lot of fun.
11
So let's dive in.
12
The first one is not scroll behavior smooth though this is a little bit of a softball still
13
and I bet you people still use JavaScript for this.
14
And the reason probably is you have your scroll behavior smooth for some anchors or something.
15
But if I click middle, I'm covering up the middle right here, right?
16
Like that's annoying.
17
And so then people turn to JavaScript because of this, but no, you don't have to do that.
18
You don't have to calculate offsets.
19
You just have to add a target with a scroll margin on there.
20
I'm using viewport block, which is top and bottom.
21
So if I click middle now, look at that.
22
We can see my middle.
23
If I go to bottom, it leaves a 20 viewport margin around these items as I'm moving around.
24
And you can do all sorts of things with your margin, right?
25
Like here, if I add an outline to it, we can actually see what we're targeting.
26
My IDs are on the section.
27
Your IDs could definitely just be right on the titles as well.
28
That would work perfectly fine.
29
And yeah, it just works really well.
30
Super awesome.
31
Definitely use this instead of doing whatever you're doing with JavaScript instead.
32
Though, if you are going to do it, for the scroll behavior of smooth, do rapid and it prefers reduced motion like I'm doing right here because then people who have opted out of having motion,
33
they will appreciate that.
34
And then it just jumps around, but it still keeps that scroll margin on the target.
35
So when it jumps down, your title's still not covering things.
36
And if somebody has like vestibular issues or something like that, they're not getting nauseous while they visit your webpage, which is a good thing.
37
And I mentioned browser support for these things is good.
38
This is a scroll behavior itself is, has been well supported now.
39
It's been browsers for over four years and target has been around for basically forever.
40
So you definitely are safe to use this.
41
Next up, continuing on the topic of scrolling, is we can do some scrolling stuff here, just setting up a horizontal scroller that we can see.
42
You might have already seen me do this type of thing.
43
I am using grid here.
44
This isn't the JavaScripty thing because most people are just using Flexbox for this.
45
They're both fine.
46
Use whatever you want.
47
It's not often I say that.
48
I usually just say use grid instead, but however you want to do this, set it all up.
49
But then the cool part is when you bring in the scroll snap type.
50
I have seen people do a ridiculous amount of JavaScript for this, depending on which A, B test.
51
One, you might have seen a thumbnail that had the type of JavaScript I've seen people use for this, where you can do a scroll snap type instead.
52
But there is one thing with scroll snap type, is this does not work out of the box.
53
You do want to have two things, or not want to have, you have to have two things.
54
The parent has to have the scroll snap type, and the child has to have a scroll snap align on it.
55
Scroll snap type does have to take two different values.
56
One of them is what axis are you on, so the inline or block axis.
57
You can also use an X or Y there.
58
And then you have mandatory or proximity.
59
I would just play around with the two of them.
60
It really depends on the use case that you have.
61
And then the alignment is simple, center, left, right, things like that.
62
And in setting it up like this now, if I'm scrolling over, you can see if I let go, it sort of snaps a little bit.
63
It's not the greatest experience on desktop, but even if I like scroll, it will always snap to the next one.
64
But if you're on a mobile device and you're swiping around, this feels fantastic.
65
So for web apps
66
and other things like this this is a really nice thing to include in your sites
67
and as i said once again browser support is fantastic you're
68
very safe to use this all right next up we have form stuff
69
and validation things i was going to say people don't use javascript for this
70
but i know people will look for like blur events
71
and then add a touched class or things like that
72
and then you're checking if it's valid or invalid
73
and i get why people do that because valid
74
and invalid are terrible pseudo classes because they validate the form before you've done anything
75
so then you have to add that class using javascript
76
because right now as we can see like all of these are valid
77
and they're all valid
78
because they're just inputs um i shouldn't these labels don't have
79
an id like i'm not connecting them this is a sample code you should have like an id on here
80
and you're connecting your label to your input obviously um
81
but yeah sample code right there just for simplicity's sake for a demo um
82
but yeah right now these are empty because they're valid
83
because they're just an input and if i make them required now they're all invalid
84
and that sucks the user gets there
85
and they're just told they're wrong before they've even done anything like that's not a nice user experience right uh
86
and again that's why you come in with javascript no use user valid
87
and user invalid instead and this gets that type of behavior
88
if i come in and i leave the field nothing changes
89
but if i come in
90
and i write a name let's kevin now it's valid fantastic let's come in
91
and write an email address in here at kevin powell .co
92
i get a lot of email here you can definitely email me, but I might not see it.
93
Um, but there is, uh, you know, that that's valid and I can in my password and Ooh, that's invalid.
94
But wait, how does the browser know that's invalid?
95
Well, it's because I put a min length on there and that's kind of cool, right?
96
Uh, so now if I try and submit, it actually tells me that it's invalid and why it's wrong.
97
And there's zero JavaScript involved in this.
98
It's pretty.
99
awesome in my opinion i'll put a link in the description you can customize these error messages
100
and do a little bit more with them the api for this is actually pretty nice though
101
that does require javascript and i've done that in another video
102
so i'll link it down in the description below
103
but uh yeah we can do all of that and set
104
that up and then it knows it's not long enough
105
so it gets invalid
106
if i put in enough all of a sudden like magic
107
it becomes valid it's fantastic we can do a little bit more here we're entering into a weird realm
108
but you can actually use regex as a part of a pattern
109
and if you have regex in there
110
if I put a whole bunch of characters here
111
and then I leave it's still invalid because this is not very good regex
112
but all it's looking for is if I have a mix of like regular characters
113
and digits so
114
if I put in a number there now all of a sudden it works fantastic it's now valid
115
and the user knows that it is and they can submit
116
this some people might be looking at this going Kevin's telling us to do form validation with CSS?
117
No, I'm definitely not saying that.
118
I'm saying don't use JavaScript for
119
that first line of defense where you're looking for blur events
120
and then doing different things and using valid invalid or whatever you're doing.
121
Use CSS as a first line of defense.
122
And then when the user hits submit, do some server side validation and make sure everything is fine.
123
Don't ignore server side validation.
124
That's not what CSS is for, but we can do a lot with just our user valid and invalid right there. So fantastic.
125
And browser support for these is now baseline widely available which it's been like two and a half years they're around.
126
So yeah, go ahead and use it.
127
I think it's safe at this point.
128
Maybe worth checking just to double check with depends on your users and everything else, but it has been around for a while now.
129
Now the next one we're going to go to isn't really a JavaScript thing.
130
It's just like a bonus tip.
131
This is that people, if I click on my menu, it gets the focus ring on it because I have a focus state
132
and there's default focus states that we have on things.
133
So people then just go focus none or focus zero or whatever.
134
They remove the outline for everything because maybe they don't even want to, but their boss clicks on the button and goes, why is there this weird ring on here?
135
I don't want a ring when I click on it, but you do want to keep that for people that are using keyboards.
136
Oh, it's nice and easy.
137
You just use focus visible for that.
138
This is actually the user agent default in browsers now.
139
So if I tab to this and I'm interacting with it and I, it all works the way you'd expect it to.
140
But if I click on it with my mouse, it doesn't gain that focus ring.
141
I'm going to put a link to a video where I go into a bit more detail on this in the description, just because it depends on how you're interacting with it and what the element is as well.
142
And the browser is making some decisions along the way.
143
But yeah, just use focus visible instead of focus.
144
And it's probably a good idea.
145
As I said, the user agents have all switched over and browser support for it is fantastic.
146
So you're pretty safe to use it these days.
147
And since we're talking about forms, we're going to continue that trend of talking about forms with two other things that I want to look at here, both to do with the text area.
148
And this might be something where like your designer comes up to you and they're like, oh you know what you need to make
149
that text area three have fit three lines of text you start magic numbering your way there
150
and you're i got it then the designer comes back
151
and they go actually we want to increase the font size
152
and you go oh man you know i have to magic number all
153
that again no you're not going to magic number
154
that you're going to remember about the lh unit the lh unit stands for the line height
155
so it's always going to be three lines of text tall so now if i change the font size back and forth.
156
You can see that it's always matching or growing and shrinking with that font size.
157
It's fantastic.
158
LH is a super underused thing.
159
It works really well with these things.
160
Anytime people are like, oh, CSS is a broken, weird language because it's just adding new units all the time.
161
The amount of JavaScript you need to do to solve this
162
and just like calculate the height based on things like 3LH, you're done.
163
It's fantastic.
164
It's so nice.
165
And then if you're going to do it, don't set it as a height, set it as a min height, or I guess it's my channel i got to talk about
166
logical properties switch it over to a min block size maybe
167
and the reason i'm saying to do it as a minimum is we have another cool new property
168
which is field sizing uh field sizing means that
169
if a user comes in here um because a number of reasons such as
170
when a user writes more lines than the size of the box or whatever we want right
171
if you want a box to grow as the user is
172
writing in it this was a pain in the butt to do
173
and now we can do it with one line of css uh it's just
174
so wonderful and so great the lh unit has been around baseline widely available for two years now
175
and it's been since november so it's been in all the browser engines since november
176
so it's like two and a half years ish from the time of release of this video
177
and you won't be super happy about this because field sizing is only newly available.
178
It's in all of the engines, but it's only been three months that it has landed in all of them.
179
But I think it's a really nice progressive enhancement.
180
And I know for some people, progressive enhancement is a trigger word, but I think this is a really nice use case for that type of thing.
181
But for like chat bubbles and other things where you need to grow and shrink field sizing content, one line of CSS, it's just really, really good.
182
And yeah, I'm going to leave you with that.
183
I hope some of these help you out, let you remove a whole bunch of JavaScript.
184
And I just want to say a very big thank you to Johnny, my enabler of awesome, as well as all my other patrons and channel members for their continued support.
185
And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.
📺 Mismo canal
C14
Handy CSS layout patterns, and fun ways to elevate them
University StudentsBusiness English+1
C14
Transition to and from display: none
University StudentsBusiness English+1
C15
Your AI broke the layout. Now what?
University StudentsBusiness English+1
B24
This library changes how JS and CSS work together
University StudentsBusiness English+1
B27
No more magic numbers for your breakpoints
University StudentsBusiness English+1
C14
More CSS quick tips
University StudentsBusiness English+1
C12
Native popovers with smooth animations (no JS required)
University StudentsBusiness English+1
C13
3 modern CSS properties to add to your reset
University StudentsBusiness English+1
C13
5 CSS fouls that I see way too often
University StudentsBusiness English+1
B24
Has AI killed Tailwind?
University StudentsBusiness English+1
C17
Why I use single-color gradients in my CSS
University StudentsBusiness English+1
C14
Build smarter color systems with relative colors
University StudentsBusiness English+1
✨ Recomendar Video
C12
139 oraciones
Does Anyone Use JavaScript Anymore?
University StudentsBusiness English+1
B22
151 oraciones
We've got separation of concerns wrong
University StudentsBusiness English+1
B22
237 oraciones
How Social Media Algorithms Actually Work (And How to Beat Them)
University StudentsBusiness English+1
B21
103 oraciones
Improve SPEAKING SKILLS: Flow, Clarity, Confidence🎯
British Accent, en-GBUniversity Students+3
B21
157 oraciones
Claude Design just got MASSIVE Upgrades (2.0 Update)
University StudentsBusiness English+1
B21
119 oraciones
Basic Opt Flw regimes
University StudentsBusiness English+1
B23
59 oraciones
I replaced Doomscrolling with the Switch 2. Here's what happened
University StudentsBusiness English+2
B21
103 oraciones
you will never ask about pointers again after watching this video
University StudentsBusiness English+1
B21
117 oraciones
The Easiest Way to Build Websites
University StudentsBusiness English+1
C13
285 oraciones
8 New CSS, JS and HTML Features You Should Know
University StudentsBusiness English+1
Speaking Goals for This Clip
This video is perfect for language learning enthusiasts aiming to boost their conversational fluency. It targets the ability to explain technical concepts clearly, use casual yet precise language, and maintain a natural flow—key milestones for effective communication in professional or educational settings. Practicing with this dialogue helps you transition from basic phrases to expressing complex ideas smoothly, ideal for speaking practice sessions.
Phrase Bank
- "People like to complain about..." – A common way to introduce a counterpoint in discussions.
- "Instead we're looking at..." – Useful for shifting focus to a new topic or solution.
- "You don't have to calculate offsets" – Directly addresses a common problem, great for explaining simplifications.
- "It just works really well" – A casual phrase to emphasize effectiveness.
- "I have seen people do a ridiculous amount of..." – Expresses surprise at overcomplication, adding personality to speech.
Fix Your Weak Spots
The video’s conversational rhythm and technical vocabulary make it excellent for pronunciation practice. Pay attention to how the speaker stresses words like "cutting edge," "simplify," and "vestibular"—these terms often trip up learners. Use the shadowing technique: pause the video, repeat each sentence aloud, mimicking the tone and pace. Focus on reducing pauses between phrases like "so it's great to know about these features but then I can't use it" to sound more natural. This practice will help you master the flow of explaining ideas, a critical skill for confident speaking.
¿Qué es la Técnica de Shadowing?
Shadowing es una técnica de aprendizaje de idiomas respaldada por la ciencia, desarrollada originalmente para la formación de intérpretes profesionales y popularizada por el políglota Dr. Alexander Arguelles. El método es simple pero poderoso: escuchas audio en inglés nativo y lo repites en voz alta de inmediato, como una sombra que sigue al hablante con solo 1-2 segundos de retraso. A diferencia de la escucha pasiva o los ejercicios de gramática, el shadowing obliga a tu cerebro y músculos de la boca a procesar y reproducir simultáneamente patrones de habla reales. Las investigaciones muestran que mejora significativamente la precisión de la pronunciación, la entonación, el ritmo, el habla conectada, la comprensión auditiva y la fluidez al hablar, convirtiéndola en una de las metodologías más efectivas para la preparación del IELTS Speaking y la comunicación en inglés en el mundo real.