Prática de Shadowing: Use these CSS features instead of JavaScript - Aprenda a falar inglês com vídeo

Hello my friend and friends.

People like to complain about the content I post on my channel saying

that it's like it's too cutting edge

so it's great to know about these features

but then I can't use it or it's just way too complicated I'm making a mess of things whatever it is.

Today we're not doing that.

Instead we're looking at some really well supported CSS features

that people still use JavaScript for instead

and we're just going to look at how we can simplify things into like one or two liners.

Yeah it should be a lot of fun.

So let's dive in.

The first one is not scroll behavior smooth though this is a little bit of a softball still

and I bet you people still use JavaScript for this.

And the reason probably is you have your scroll behavior smooth for some anchors or something.

But if I click middle, I'm covering up the middle right here, right?

Like that's annoying.

And so then people turn to JavaScript because of this, but no, you don't have to do that.

You don't have to calculate offsets.

You just have to add a target with a scroll margin on there.

I'm using viewport block, which is top and bottom.

So if I click middle now, look at that.

We can see my middle.

If I go to bottom, it leaves a 20 viewport margin around these items as I'm moving around.

And you can do all sorts of things with your margin, right?

Like here, if I add an outline to it, we can actually see what we're targeting.

My IDs are on the section.

Your IDs could definitely just be right on the titles as well.

That would work perfectly fine.

And yeah, it just works really well.

Super awesome.

Definitely use this instead of doing whatever you're doing with JavaScript instead.

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,

they will appreciate that.

And then it just jumps around, but it still keeps that scroll margin on the target.

So when it jumps down, your title's still not covering things.

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.

And I mentioned browser support for these things is good.

This is a scroll behavior itself is, has been well supported now.

It's been browsers for over four years and target has been around for basically forever.

So you definitely are safe to use this.

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.

You might have already seen me do this type of thing.

I am using grid here.

This isn't the JavaScripty thing because most people are just using Flexbox for this.

They're both fine.

Use whatever you want.

It's not often I say that.

I usually just say use grid instead, but however you want to do this, set it all up.

But then the cool part is when you bring in the scroll snap type.

I have seen people do a ridiculous amount of JavaScript for this, depending on which A, B test.

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.

But there is one thing with scroll snap type, is this does not work out of the box.

You do want to have two things, or not want to have, you have to have two things.

The parent has to have the scroll snap type, and the child has to have a scroll snap align on it.

Scroll snap type does have to take two different values.

One of them is what axis are you on, so the inline or block axis.

You can also use an X or Y there.

And then you have mandatory or proximity.

I would just play around with the two of them.

It really depends on the use case that you have.

And then the alignment is simple, center, left, right, things like that.

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.

It's not the greatest experience on desktop, but even if I like scroll, it will always snap to the next one.

But if you're on a mobile device and you're swiping around, this feels fantastic.

So for web apps

and other things like this this is a really nice thing to include in your sites

and as i said once again browser support is fantastic you're

very safe to use this all right next up we have form stuff

and validation things i was going to say people don't use javascript for this

but i know people will look for like blur events

and then add a touched class or things like that

and then you're checking if it's valid or invalid

and i get why people do that because valid

and invalid are terrible pseudo classes because they validate the form before you've done anything

so then you have to add that class using javascript

because right now as we can see like all of these are valid

and they're all valid

because they're just inputs um i shouldn't these labels don't have

an id like i'm not connecting them this is a sample code you should have like an id on here

and you're connecting your label to your input obviously um

but yeah sample code right there just for simplicity's sake for a demo um

but yeah right now these are empty because they're valid

because they're just an input and if i make them required now they're all invalid

and that sucks the user gets there

and they're just told they're wrong before they've even done anything like that's not a nice user experience right uh

and again that's why you come in with javascript no use user valid

and user invalid instead and this gets that type of behavior

if i come in and i leave the field nothing changes

but if i come in

and i write a name let's kevin now it's valid fantastic let's come in

and write an email address in here at kevin powell .co

i get a lot of email here you can definitely email me, but I might not see it.

Um, but there is, uh, you know, that that's valid and I can in my password and Ooh, that's invalid.

But wait, how does the browser know that's invalid?

Well, it's because I put a min length on there and that's kind of cool, right?

Uh, so now if I try and submit, it actually tells me that it's invalid and why it's wrong.

And there's zero JavaScript involved in this.

It's pretty.

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.

📺 Mesmo canal

✨ Vídeo recomendado

139 frases

Does Anyone Use JavaScript Anymore?

University StudentsBusiness English+1

151 frases

We've got separation of concerns wrong

University StudentsBusiness English+1

237 frases

How Social Media Algorithms Actually Work (And How to Beat Them)

University StudentsBusiness English+1

157 frases

Claude Design just got MASSIVE Upgrades (2.0 Update)

University StudentsBusiness English+1

119 frases

Basic Opt Flw regimes

University StudentsBusiness English+1

59 frases

I replaced Doomscrolling with the Switch 2. Here's what happened

University StudentsBusiness English+2

103 frases

you will never ask about pointers again after watching this video

University StudentsBusiness English+1

117 frases

The Easiest Way to Build Websites

University StudentsBusiness English+1

285 frases

8 New CSS, JS and HTML Features You Should Know

University StudentsBusiness English+1

248 frases

O que é a Técnica de Shadowing?

Shadowing é uma técnica de aprendizado de idiomas com base científica, originalmente desenvolvida para o treinamento de intérpretes profissionais. O método é simples, mas poderoso: você ouve áudio em inglês nativo e repete imediatamente em voz alta — como uma sombra seguindo o falante com 1-2 segundos de atraso. Pesquisas mostram melhora significativa na precisão da pronúncia, entonação, ritmo, sons conectados, compreensão auditiva e fluência na fala.

Técnica de shadowing: leia o guia completo passo a passo →

Prática de Shadowing: Use these CSS features instead of JavaScript - Aprenda a falar inglês com vídeo

Handy CSS layout patterns, and fun ways to elevate them

Transition to and from display: none

Your AI broke the layout. Now what?

This library changes how JS and CSS work together

No more magic numbers for your breakpoints

More CSS quick tips

Native popovers with smooth animations (no JS required)

3 modern CSS properties to add to your reset

5 CSS fouls that I see way too often

Has AI killed Tailwind?

Why I use single-color gradients in my CSS

Build smarter color systems with relative colors

Does Anyone Use JavaScript Anymore?

We've got separation of concerns wrong

How Social Media Algorithms Actually Work (And How to Beat Them)

Claude Design just got MASSIVE Upgrades (2.0 Update)

Basic Opt Flw regimes

I replaced Doomscrolling with the Switch 2. Here's what happened

you will never ask about pointers again after watching this video

The Easiest Way to Build Websites

8 New CSS, JS and HTML Features You Should Know

YOU'RE STYLING SNEAKERS WRONG

Para quem é este vídeo?

Palavras e expressões para roubar (e usar!)

Como acertar o sotaque nesse vídeo

O que é a Técnica de Shadowing?