Shadowing Practice: This library changes how JS and CSS work together - Learn English Speaking with Video

בחר מצב תרגול

כל מצב פותח חדר תרגול במסך מלא.

183 משפטים

אם המשפטים קצרים או ארוכים מדי, לחץ על ערוך כדי להתאים אותם.

Hello, my friend and friend, if you want to know how we can do something like this, where these animations that come in as we're sliding down here and do this type of effect,

all with one line of JavaScript, I guess you're in the right place, because this is where we're going to see how this works.

And it's all being made possible thanks to Adam's props for that.

So the link for this is in the description, but you can see this is what JS knows now CSS knows.

And I talked last week about how it's a good idea to pass as much information to CSS as possible.

There's some things that it's annoying to do that for, and Atom is solved the problem here.

We have our FPS, our viewport size, our scroll velocity, the color of inputs live being updated.

You can see the cursor position, all sorts of different things that are being passed through, and it's all incredibly easy to do and quite performant.

So I'm just going to jump to the docs really fast to say if we go to get started, all we need to do you have your npm install props for

that and there's a few different things depending on how you want to set things up

so if you do want to use this depends a little bit on your project

but it's incredibly easy to do let's dive in

and see how easy this actually is to use all right

so I've set up a nice page here I think

and I want to wire this up to to make it more interactive

and more fun so all I'm doing in my javascript is importing the props for

that slash auto and then we can dive in

and actually start using these and to be able to do

that there's a different things we have to do

or actually there's not a few there's one thing really

that we need to do uh

which is i'm going to come over into my html i

have this card here with a twist in we're going to look at

that in a minute but i just have to come here for a data props for

and i have to list out the different things

that i want to look for in this case what i

want to be looking for is my pointer local uh

but yeah what that's going to be doing then let's actually go look in my dev tools

we can go on this card and Oh, I put prop for, sorry, that should have been props for on that.

And I knew it wasn't working.

So if I go take a look now, there we go.

I can see the local, the live local pointer X ratio and the Y ratio.

And there's also a pointer inside that's on there.

And what that's doing is no matter where I am, it's giving me live updates.

And the live inside is whether or not I'm on top of it.

So it's sort of like a hover detection that we can be using.

Now, one thing you might be worried about right away is like, oh my goodness, this could be terrible for performance if it's always tracking all of that.

But as soon as that element is off the page, you can see like I've scrolled away, it's not tracking it anymore.

So it's only tracking these, whatever props you're looking for, if the element is visible on the page, which is a good thing, because if not, you're just wasting processing power.

So yeah, there's a lot of performance things that item is baked into here, which is super awesome.

So I'm getting my my pointer local and now I want to use it.

So I have set up some gradients here on here that you might have noticed.

I'm doing this, this is like a texture with an SVG.

I have this gradient, which is the background, the glowy one.

Then I have a solid color coming in here for the background color, because if I didn't have that just really fast, it would be really blue.

We get something like that that looks really ugly.

And then I have this radial gradient, which is set to my border box, which is giving me sort of the shine at the top.

I've done a more in-depth video on how this works, so I'll link to that in the description if you're interested.

And this code is also available.

But you'll notice here I have set up this x and y values that aren't anything right now.

It's just using these fallbacks instead.

So what I could do is go and use the props for to get an x and a y value.

Now the prop that we're getting from Adam's prop for that is this, the live local pointer x ratio.

And we have the y ratio as well that we're coming in.

But any prop, I might have mentioned that they're always unitless

and this is on purpose so we can use them however you want to be using them.

In this case I want it as a percentage based on where I'm hovered on top.

You can see I actually broke it now because it's passing those values in as the x and y.

And so what I'm going to do is a calc on them and we want to do this on both.

So we can say this is a calc, open that calc up, we're going to come over here, close it and say this is times 100% to add the unit onto there.

And now we can see it actually follows my mouse around.

And this is so incredibly easy.

I don't have to wire up any JavaScript or anything.

The props are just getting passed through and it's working.

You can see I did a few fancy things with clamps here just to make sure

that when I move far enough off, it doesn't keep on following me away.

But yeah, that works fantastic.

And all my other ones aren't wired up yet.

So I'm going to quickly go through and just add these on there.

But we're going to be adding one more other thing at the same time, which is visibility.

And we're going to see two different options here, but we're going to start with the visibility.

And I just added it to all of my different cards.

So we can see this is working on all of them, which is fantastic.

But there is another custom property that's now being used on these.

So if we go and take a look or not a custom property, I should be saying, we have this live visible of one.

And we also have a const has entered of one.

So with props for that, there's two different types of props we get.

There's the live ones which are constantly being updated

and there's the const which aren't right

so the const has entered uh we might have to actually refresh the preview here

so let's refresh that and we can grab this first card

and we can see that the const has entered is actually currently one

but if we go and look in the next section

and my sticky wrap the const has entered is zero right there

and if i start scrolling down now that has switched over to one it has entered So it's one, the live visible is also one.

But if I keep scrolling, the live visible is switched back over to zero, whereas the const has entered has stayed as number one.

So the live visible is always updating live, whereas the const will only update the one time.

It's more of a constant, as you'd expect.

Now, it does switch at one point because we're tracking if it's entered or not, but it just means we can do either a scroll-driven animation, which we can do with CSS now.

Browser support's getting better, but it's not perfect, so this could be a nice way to do this for the time being.

But there's also scroll-triggered animations, which we can't quite do yet in CSS.

They're on their way, but we can use this for that type of thing.

So how can we use it?

Well, can do a few different fun things.

Let's go to these twist ins now that I have.

I already have a class set up here for a twist in

and for these that's just to give these a little bit of fun animation as we're going down the page.

So the first thing we could do here is just an opacity of var live visible which is the prop we're getting.

So this one will be visible actually let's do a transition of opacity as well.

100

I'm going to make it really long just for demo purposes, but I wouldn't actually do five seconds.

101

But now if I scroll down, you can see that one slowly starts fading in as we get there.

102

And again, don't do five seconds, but we're triggering that to happen.

103

Now, once they've left again, because I'm using live visible, that means it's also switching back to zero.

104

So if I start scrolling back up, they're going to start fading back in this way.

105

That's fine.

106

I don't mind that too much, but this is where the const might actually be a better option

107

because I sort of like it when things only fire once.

108

For the time being, though, I think I'll leave it as this just because it makes it easier for while I'm demoing things.

109

But if I was doing this for production, I'd probably use the const instead of the live value here.

110

Now, really fast, one way

111

that we could actually use this now is to come in

112

with a transform on this to give us some perspective on these.

113

All right.

114

So it's sort of at this weird angle.

115

They're all going to be like that.

116

I think let's just drop this opacity transition for the time being.

117

So we actually see things.

118

So this is already kind of fun, but it'd be nice if like they're sort of angled and then they turn in.

119

The other thing I'm going to do is I'm actually going to switch these for a variable.

120

I will do that after just because I don't want them all facing the same way.

121

I want the other ones flip the other way but we can fix that after.

122

But this is where we can get kind of interesting

123

because our is our live visible or the const is either a one or a zero.

124

I actually want this to become zero once it's visible.

125

So how can we do that?

126

So I'm going to come here and say is visible

127

and we're going to say this is a calc of 1 minus my var of live visible.

128

Visible.

129

Cool.

130

So this, if it is visible, the number will actually be 0.

131

It's kind of backwards in a way, I suppose.

132

But what we're saying is 1 minus 0 would still be 1 and a 1 minus 1 would become 0, right?

133

So maybe if you have a better name for this, please let me know in the comments.

134

But what I'm going to do is put this in a calc of the 25 degrees times my var is visible.

135

And what this is going to do is there you go.

136

You can see it's actually we don't have it applied anymore.

137

And we're going to say the same thing here.

138

I guess I should have done both of these calcs at the same time.

139

25 degrees times var is visible.

140

Maybe I should do active or something like that instead of visible on screen.

141

I'm not sure.

142

Anyway, so the idea is it's negative 25 times one if it's off the screen.

143

No, sorry.

144

Yeah, times one because it's one minus zero.

145

So anyway, we get if it is visible, it's going to undo its thing.

146

And then on our transition, let's just take opacity off here.

147

We can say this is five seconds.

148

So now as a let's see transition.

149

Oh, that one is visible but the next one that comes in should be at an angle and it twists into place.

150

And then the next one twists into place.

151

And obviously the five seconds is way too long for these types of things.

152

But we're triggering the animation based on when it's coming in.

153

Again, I don't really want them reverse doing, but it's better for demos.

154

So we can see it always working, but I'd probably make that the const.

155

Cool.

156

So that's working.

157

The last thing I'm going to do is just the value here.

158

I'm going to do this as my var twist y negative 25

159

so we have a default value on there and let's copy this paste

160

that becomes an x and that was a negative 8

161

and I guess this would be sort of our starting position

162

but it just means on the ones

163

that I've done the negative order on I can also come on these

164

and say that the twist y is 25 degrees my twist x is 8 degrees

165

so they're opposite from one another maybe that stays at negative let's see

166

when I get down to there that one's coming in

167

that way and when I get to there that one's coming in

168

that way I think that's exactly what I wanted

169

so they're opposite from what they were along the way there and of course then this could be something like,

170

I don't know, 0.75 instead.

171

So it's a little bit more snappy.

172

And we get those coming in as we're scrolling down.

173

And we still have all of these different effects that are working.

174

I think this is fantastic.

175

You can see how easy that was not having to set up our all of the observers, all these different things don't have to worry about the JavaScript.

176

I just want to say a very big thank you to Adam for setting all of this up, enabling so much and of course there's

177

so much more go check it out the link for it

178

is in the description i also want to say a big

179

thank you to my enabler of awesome johnny as well as all my other patrons

180

and channel members for their continued support

181

and of course until next time don't forget to make your

182

corner of the internet just a little bit more awesome

183

and this is going to help you do it so go forth and make some cool stuff

הורד אפליקציה

כל מה שאתה צריך כדי לדבר בשטף

הגיית AIציון לכל משפט

תרגול IPAשלוט בכל צליל

אוצר מיליםבנה את מאגר המילים שלך

משחק אוצר מיליםלמד תוך כדי משחק

סרוק QR

Download on theApp Store Get it onGoogle Play

אותו ערוץ

FOR YOU

המלץ על סרטון

132 משפטים

Video

Daily ConversationUniversity StudentsWorking Adults

281 משפטים

How to actually make eye-catching 3D Scenes | After Effects

Daily ConversationWorking Adults

137 משפטים

JUST $1 For Billions of Tokens?! (DeepSeek v4 Pro)

Daily ConversationUniversity StudentsWorking Adults

177 משפטים

Mini Project - Implementing a Simple Web Identity Federation Application

Daily ConversationWorking Adults

254 משפטים

Figma Agent Skills | How to write skills you will actually use

Daily ConversationWorking Adults

78 משפטים

The easy way to keep your repos tidy.

Daily ConversationUniversity StudentsWorking Adults

184 משפטים

10 Essential React Native Tips Every Developer Must Know

Daily ConversationUniversity StudentsWorking Adults

218 משפטים

Next.js 16.3 got good (if you care)

Daily ConversationWorking Adults

190 משפטים

Trading Strategist: The Prop Firm Edge Isn't Your Strategy, It's How You Manage The Accounts!

Daily ConversationWorking Adults

25 משפטים

אוצר מילים והערות הגייה לשיעור הזה

שיעור הדיבור הזה ברמה C1 מבוסס על הסרטון “This library changes how JS and CSS work together”. המילים שחוזרות הכי הרבה: visible, prop, const. בסרטון הזה יש 183 משפטים ו-2466 מילים לתרגול Shadowing. הדיבור נמשך 11:53. הדובר מדבר מהר, כ-207 מילים בדקה, אז צפו לצלילים מחוברים ומקוצרים. 85% מהמילים נמצאות בין 3,000 המילים הנפוצות ביותר באנגלית; כדאי ללמוד את השאר לפני שמתחילים.

אוצר מילים מרכזי בסרטון הזה

10 המילים המתקדמות ביותר בסרטון, עם ההגייה והמשמעות שלהן:

מילה	הגייה	משמעות
scroll שם עצם	/skɹoʊl/	מגילה, מְגִלָּה
calculator שם עצם	/kæl.kjə.leɪ.tɚ/	מַחְשְׁבוֹן, מונה
minus	/ˈmaɪ.nəs/	פחות, מינוס
demo שם עצם	/ˈdɛm.oʊ/	דמו
cursor שם עצם	/ˈkɜːsə/	סמן
bake פועל	/beɪk/	אָפָה
velocity שם עצם	/vəˈlɑsəti/	מהירות
pasta שם עצם	/ˈpɑ.stə/	פַּסְטָה
automobile שם עצם	/ˈɔː.tə.məˌbil/	מְכוֹנִית
transform פועל	/tɹænsˈfɔɹm/	לשנות

Phrasal verbs שתשמעו

מילה	משמעות
back up פועל	נָסוֹג
go down פועל	ירד

דקדוק בסרטון הזה

המבנים שהדובר משתמש בהם הכי הרבה, עם המילים המדויקות מהסרטון:

מבנה	בסרטון
משפטי תנאי (Conditional sentences) if + clause, will/would + verb — תנאי ותוצאה שלו	if it is visible, the number will actually
הווה מושלם (Present perfect) have/has + past participle — פעולה שקרתה בעבר ועדיין יש לה חשיבות או השפעה עכשיו	I've set · I've scrolled · have set
סביל (Passive voice) be + past participle — הדגש הוא על מה שקורה, לא על מי שעושה את הפעולה	being made · is solved · being updated
משפטי זיקה (Relative clauses) who / which + clause — מידע נוסף על אדם או דבר	page, which is · here, which is · gradient, which is

הגייה ששווה לשים לב אליה

הדובר משתמש ב-77 קיצורים וצורות מקוצרות, כמו I'm, we're, don't. אמרו אותם בצורה הקצרה, כפי שאתם שומעים אותם.

הצלילים של “sh” ו-“zh”: refresh /ɹɪˈfɹɛʃ/, detection /dɪˈtɛk.ʃən/
מילים ארוכות — שימו לב להטעמה: calculator /kæl.kjə.leɪ.tɚ/, opacity /oʊˈpæsɪti/, visibility /ˌvɪz.əˈbɪl.ɪ.ti/, velocity /vəˈlɑsəti/, automobile /ˈɔː.tə.məˌbil/

צלילים שדוברי עברית מתקשים בהם:

/æ/ — פתוח יותר מה-“אֶ” העברית, לא כמו “a” ב-“cup”: calculator /kæl.kjə.leɪ.tɚ/, opacity /oʊˈpæsɪti/, fallback /ˈfɔːl.bæk/, snappy /ˈsnæpi/, backward /ˈbækwɚd/
/r/ — הלשון לא נוגעת בשום מקום, לא ה-“ר” הגרונית: prop /pɹɑp/, scroll /skɹoʊl/, pointer /ˈpɔɪn.təɹ/, gradient /ˈɡɹeɪdiənt/, refresh /ɹɪˈfɹɛʃ/
עיצור קולי בסוף מילה — /b/, /d/, /g/, /z/, /v/ בלי להפוך אותם לאטומים: fade /feɪd/, backward /ˈbækwɚd/, interactive /ˌɪn.tɚˈæk.tɪv/

איך לתרגל עם הסרטון הזה

הקשיבו לכל הסרטון פעם אחת בלי לדבר, ורשמו את המילים שאתם לא מכירים.
התחילו במהירות 0.75×, תרגלו Shadowing משפט אחר משפט, וחזרו למהירות רגילה כשזה מרגיש קל.
הקליטו את עצמכם והשוו למקור, תוך תשומת לב למילים כמו scroll, calculator, minus.

מהי טכניקת השאדואינג?

שאדואינג היא טכניקת למידת שפה מבוססת מדע שפותחה במקור להכשרת מתורגמנים מקצועיים ופופולרית על ידי הפוליגלוט ד"ר אלכסנדר ארגואלס. השיטה פשוטה אך עוצמתית: אתה מקשיב לאודיו באנגלית ילידית וחוזר עליו בקול רם מיד — כמו צל העוקב אחרי הדובר עם עיכוב של 1–2 שניות בלבד. בניגוד להאזנה פסיבית או תרגילי דקדוק, שאדואינג מכריח את המוח והשרירים בפה לעבד ולשחזר דפוסי דיבור אמיתיים בו זמנית. מחקרים מראים שזה משפר משמעותית את דיוק ההגייה, האינטונציה, הקצב, הדיבור המחובר, הבנת השמיעה ושטף הדיבור — מה שהופך אותו לאחת השיטות היעילות ביותר להכנה לIELTS Speaking ולתקשורת באנגלית בעולם האמיתי.

טכניקת Shadowing: קרא את המדריך המלא שלב אחר שלב →

Shadowing Practice: This library changes how JS and CSS work together - Learn English Speaking with Video

בחר מצב תרגול

הורד אפליקציה

אותו ערוץ

Handy CSS layout patterns, and fun ways to elevate them

Use these CSS features instead of JavaScript

Transition to and from display: none

Your AI broke the layout. Now what?

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

המלץ על סרטון

Video

How to actually make eye-catching 3D Scenes | After Effects

JUST $1 For Billions of Tokens?! (DeepSeek v4 Pro)

Mini Project - Implementing a Simple Web Identity Federation Application

Figma Agent Skills | How to write skills you will actually use

The easy way to keep your repos tidy.

10 Essential React Native Tips Every Developer Must Know

Next.js 16.3 got good (if you care)

Trading Strategist: The Prop Firm Edge Isn't Your Strategy, It's How You Manage The Accounts!

screen capture 3

אוצר מילים והערות הגייה לשיעור הזה

אוצר מילים מרכזי בסרטון הזה

Phrasal verbs שתשמעו

דקדוק בסרטון הזה

הגייה ששווה לשים לב אליה

איך לתרגל עם הסרטון הזה

מהי טכניקת השאדואינג?