Shadowing Practice: Use these CSS features instead of JavaScript - Learn English Speaking with Video
בחר מצב תרגול
כל מצב פותח חדר תרגול במסך מלא.
185 משפטים
אם המשפטים קצרים או ארוכים מדי, לחץ על ערוך כדי להתאים אותם.
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.
הורד אפליקציה
כל מה שאתה צריך כדי לדבר בשטף
הגיית AIציון לכל משפט
תרגול IPAשלוט בכל צליל
אוצר מיליםבנה את מאגר המילים שלך
משחק אוצר מיליםלמד תוך כדי משחק
אותו ערוץ
C14
Handy CSS layout patterns, and fun ways to elevate them
Daily ConversationUniversity StudentsWorking Adults
C14
Transition to and from display: none
Daily ConversationWorking Adults
C15
Your AI broke the layout. Now what?
Daily ConversationWorking Adults
C14
This library changes how JS and CSS work together
Daily ConversationWorking Adults
C17
No more magic numbers for your breakpoints
Daily ConversationWorking Adults
C14
More CSS quick tips
Daily ConversationWorking Adults
C12
Native popovers with smooth animations (no JS required)
Daily ConversationWorking Adults
C13
3 modern CSS properties to add to your reset
Business EnglishUniversity StudentsWorking Adults
C13
5 CSS fouls that I see way too often
Business EnglishUniversity StudentsWorking Adults
B24
Has AI killed Tailwind?
Business EnglishUniversity StudentsWorking Adults
C17
Why I use single-color gradients in my CSS
Business EnglishUniversity StudentsWorking Adults
C14
Build smarter color systems with relative colors
Business EnglishUniversity StudentsWorking Adults
FOR YOU
המלץ על סרטון
C12
151 משפטים
We've got separation of concerns wrong
Daily ConversationUniversity StudentsWorking Adults
C11
184 משפטים
10 Essential React Native Tips Every Developer Must Know
Daily ConversationUniversity StudentsWorking Adults
C11
353 משפטים
Opus 5.5 Just Changed Video Editing Forever (free skills)
Daily ConversationUniversity StudentsWorking Adults
C12
228 משפטים
The UX Psychology Behind Apps People Can’t Stop Using
Daily ConversationUniversity StudentsWorking Adults
C11
78 משפטים
The easy way to keep your repos tidy.
Daily ConversationUniversity StudentsWorking Adults
C14
239 משפטים
My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It
Daily ConversationUniversity StudentsWorking Adults
C12
139 משפטים
Does Anyone Use JavaScript Anymore?
Daily ConversationWorking Adults
C11
108 משפטים
How I Learned Procedural Generation
Daily ConversationUniversity StudentsWorking Adults
B22
172 משפטים
DRY Often Makes Your Code Worse
Daily ConversationUniversity StudentsWorking Adults
B21
50 משפטים
Video
Daily ConversationUniversity StudentsWorking Adults
אוצר מילים והערות הגייה לשיעור הזה
שיעור הדיבור הזה ברמה C1 מבוסס על הסרטון “Use these CSS features instead of JavaScript”. המילים שחוזרות הכי הרבה: javascript, scroll, user, valid, invalid. בסרטון הזה יש 185 משפטים ו-2421 מילים לתרגול Shadowing. הדיבור נמשך 10:22. הדובר מדבר מהר, כ-234 מילים בדקה, אז צפו לצלילים מחוברים ומקוצרים. 84% מהמילים נמצאות בין 3,000 המילים הנפוצות ביותר באנגלית; כדאי ללמוד את השאר לפני שמתחילים.
אוצר מילים מרכזי בסרטון הזה
11 המילים המתקדמות ביותר בסרטון, עם ההגייה והמשמעות שלהן:
| מילה | הגייה | משמעות |
|---|---|---|
| scroll שם עצם | /skɹoʊl/ | מגילה, מְגִלָּה |
| font שם עצם | /fɑnt/ | גּוֹפָן |
| calculate פועל | /ˈkælkjʊleɪt/ | חישב \ חִשֵּׁב |
| outline שם עצם | /ˈaʊtlaɪn/ | קו מתאר |
| axis שם עצם | /ˈæksɪs/ | ציר |
| digit שם עצם | /ˈdɪd͡ʒɪt/ | סִפְרָה |
| proximity שם עצם | /pɹɒkˈsɪm.ɪ.ti/ | קִרְבָה |
| horizontal שם תואר | /ˌhoɹəˈzɑn.təl/ | אפקי |
| anchor שם עצם | /ˈæŋ.kəː/ | עוגן \ עֹגֶן |
| password שם עצם | /ˈpæs.wɜɹd/ | סִיסְמָה |
| demo שם עצם | /ˈdɛm.oʊ/ | דמו |
Phrasal verbs שתשמעו
| מילה | משמעות |
|---|---|
| come back פועל | שָׁב |
משפטים שכדאי לחזור עליהם
משפטים קצרים ושלמים מהסרטון שאפשר להשתמש בהם בשיחה יומיומית:
- Today we're not doing that.
- You don't have to calculate offsets.
- I'm using viewport block, which is top and bottom.
- It's not often I say that.
- No, I'm definitely not saying that.
דקדוק בסרטון הזה
המבנים שהדובר משתמש בהם הכי הרבה, עם המילים המדויקות מהסרטון:
| מבנה | בסרטון |
|---|---|
| הווה מושלם (Present perfect) have/has + past participle — פעולה שקרתה בעבר ועדיין יש לה חשיבות או השפעה עכשיו | have opted · has been · It's been |
| משפטי זיקה (Relative clauses) who / which + clause — מידע נוסף על אדם או דבר | block, which is · people who have · webpage, which is |
הגייה ששווה לשים לב אליה
הדובר משתמש ב-70 קיצורים וצורות מקוצרות, כמו you're, I'm, they're. אמרו אותם בצורה הקצרה, כפי שאתם שומעים אותם.
- הצלילים של “sh” ו-“zh”: validation /ˌvæl.əˈdeɪ.ʃən/, nauseous /ˈnɔʃəs/
- מילים ארוכות — שימו לב להטעמה: validation /ˌvæl.əˈdeɪ.ʃən/, vestibular /vɛˈstɪb.jəl.ɚ/, proximity /pɹɒkˈsɪm.ɪ.ti/, horizontal /ˌhoɹəˈzɑn.təl/
צלילים שדוברי עברית מתקשים בהם:
- /w/ — שפתיים מעוגלות, לא /v/: swipe /swaɪp/, password /ˈpæs.wɜɹd/
- /æ/ — פתוח יותר מה-“אֶ” העברית, לא כמו “a” ב-“cup”: validation /ˌvæl.əˈdeɪ.ʃən/, enhancement /ɪnˈhæns.mənt/, calculate /ˈkælkjʊleɪt/, axis /ˈæksɪs/, interact /ɪn.təˈɹækt/
- /r/ — הלשון לא נוגעת בשום מקום, לא ה-“ר” הגרונית: scroll /skɹoʊl/, browser /ˈbɹaʊ.zəɹ/, viewport /ˈvjuːpɔː(ɹ)t/, interact /ɪn.təˈɹækt/, patron /ˈpeɪ.tɹən/
איך לתרגל עם הסרטון הזה
- הקשיבו לכל הסרטון פעם אחת בלי לדבר, ורשמו את המילים שאתם לא מכירים.
- התחילו במהירות 0.75×, תרגלו Shadowing משפט אחר משפט, וחזרו למהירות רגילה כשזה מרגיש קל.
- הקליטו את עצמכם והשוו למקור, תוך תשומת לב למילים כמו scroll, font, calculate.
מהי טכניקת השאדואינג?
שאדואינג היא טכניקת למידת שפה מבוססת מדע שפותחה במקור להכשרת מתורגמנים מקצועיים ופופולרית על ידי הפוליגלוט ד"ר אלכסנדר ארגואלס. השיטה פשוטה אך עוצמתית: אתה מקשיב לאודיו באנגלית ילידית וחוזר עליו בקול רם מיד — כמו צל העוקב אחרי הדובר עם עיכוב של 1–2 שניות בלבד. בניגוד להאזנה פסיבית או תרגילי דקדוק, שאדואינג מכריח את המוח והשרירים בפה לעבד ולשחזר דפוסי דיבור אמיתיים בו זמנית. מחקרים מראים שזה משפר משמעותית את דיוק ההגייה, האינטונציה, הקצב, הדיבור המחובר, הבנת השמיעה ושטף הדיבור — מה שהופך אותו לאחת השיטות היעילות ביותר להכנה לIELTS Speaking ולתקשורת באנגלית בעולם האמיתי.