Pratica di Shadowing: This library changes how JS and CSS work together - Impara a parlare inglese con i video

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

📺 Stesso Canale

✨ Video consigliato

132 frasi

Video

Business EnglishUniversity StudentsWorking Adults

281 frasi

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

Business EnglishUniversity StudentsWorking Adults

68 frasi

GitHub Copilot now controls your command line...

Business EnglishUniversity StudentsWorking Adults

76 frasi

10 very promising Open Source Projects you haven’t heard of

Business EnglishUniversity StudentsWorking Adults

285 frasi

The basics in Amplitube 5

Business EnglishUniversity StudentsWorking Adults

269 frasi

Design with Claude Code: The Designer’s Guide

Business EnglishUniversity StudentsWorking Adults

41 frasi

Making a 360° Controller Smaller than a Penny!

Business EnglishUniversity StudentsWorking Adults

103 frasi

you will never ask about pointers again after watching this video

Business EnglishUniversity StudentsWorking Adults

77 frasi

Clicks Communicator: First Look

Business EnglishUniversity StudentsWorking Adults

67 frasi

How I Ranked 1st at Cambridge University - My Secret

Business EnglishUniversity StudentsWorking Adults

197 frasi

Unreal Engine 5.8 - Experimental MCP Server Support Walkthrough | State of Unreal 2026

Business EnglishUniversity StudentsWorking Adults

Vocabolario e note di pronuncia per questa lezione

Questa lezione di conversazione di livello B2 si basa sul video “This library changes how JS and CSS work together”. Le parole che ritornano più spesso: visible, prop, const. Questo video contiene 183 frasi e 2466 parole da ripetere con lo shadowing. Il parlato dura 11:53. Chi parla va veloce, circa 207 parole al minuto: aspettati suoni legati e ridotti. Il 85% delle parole rientra nelle 3.000 più comuni dell’inglese; conviene studiare le altre prima di iniziare.

Vocaboli chiave di questo video

Le 15 parole più avanzate del video, con pronuncia e significato:

Parola	Pronuncia	Significato
prop sostantivo	/pɹɑp/	sostegno, puntello
calculator sostantivo	/kæl.kjə.leɪ.tɚ/	calcolatrice
pointer sostantivo	/ˈpɔɪn.təɹ/	bacchetta
animation sostantivo	/ˌæn.ɪˈmeɪ.ʃən/	ravvivamento, animazione
minus	/ˈmaɪ.nəs/	meno
demo sostantivo	/ˈdɛm.oʊ/	demo
hover verbo	/ˈhɒvə/	librarsi
refresh verbo	/ɹɪˈfɹɛʃ/	rinfrescare
visibility sostantivo	/ˌvɪz.əˈbɪl.ɪ.ti/	visibilità
fade verbo	/feɪd/	sbiadire
dive verbo	/daɪv/	immergersi
depend verbo	/dɪˈpɛnd/	dipendere
cursor sostantivo	/ˈkɜːsə/	puntatore, cursore
enabler sostantivo		facilitatore, aiutante
fallback sostantivo	/ˈfɔːl.bæk/	ripiego

I phrasal verb che sentirai

Parola	Pronuncia	Significato
set up verbo	/ˌsɛt ˈʌp/	preparare, installare
pass through verbo		trapassare
go through verbo		attraversare

La grammatica di questo video

Le strutture che chi parla usa di più, con le parole esatte del video:

Struttura	Nel video
Frasi condizionali if + frase, will/would + verbo — una condizione e il suo risultato	if it is visible, the number will actually
Present perfect have/has + participio passato — un’azione passata che conta ancora adesso	I've set · I've scrolled · have set
Forma passiva be + participio passato — conta ciò che accade, non chi lo fa	being made · is solved · being updated
Frasi relative who / which + frase — un’informazione in più su una persona o una cosa	page, which is · here, which is · gradient, which is

Pronuncia a cui fare attenzione

Chi parla usa 77 contrazioni e forme ridotte, come I'm, we're, don't. Pronunciale nella forma breve, così come le senti.

I suoni “sh” e “zh”: animation /ˌæn.ɪˈmeɪ.ʃən/, refresh /ɹɪˈfɹɛʃ/, detection /dɪˈtɛk.ʃən/, shine /ʃaɪn/
Parole lunghe — attenzione all’accento: calculator /kæl.kjə.leɪ.tɚ/, animation /ˌæn.ɪˈmeɪ.ʃən/, opacity /oʊˈpæsɪti/, visibility /ˌvɪz.əˈbɪl.ɪ.ti/, velocity /vəˈlɑsəti/

I suoni difficili per chi parla italiano:

Consonante finale — senza aggiungere una vocale dopo: prop /pɹɑp/, minus /ˈmaɪ.nəs/, gradient /ˈɡɹeɪdiənt/, refresh /ɹɪˈfɹɛʃ/, fade /feɪd/
/æ/ — più aperta della “e”: calculator /kæl.kjə.leɪ.tɚ/, animation /ˌæn.ɪˈmeɪ.ʃən/, opacity /oʊˈpæsɪti/, fallback /ˈfɔːl.bæk/, snappy /ˈsnæpi/

Come esercitarsi con questo video

Ascolta tutto il video una volta senza parlare e annota le parole che non conosci.
Inizia a velocità 0,75×, fai shadowing frase per frase e torna alla velocità normale quando diventa facile.
Registrati e confronta con l’originale, facendo attenzione a parole come prop, calculator, pointer.

Cos'è la tecnica dello Shadowing?

Shadowing è una tecnica di apprendimento delle lingue supportata da studi scientifici, originariamente sviluppata per la formazione dei traduttori professionisti e resa popolare dal poliglotta Dr. Alexander Arguelles. Il metodo è semplice ma potente: ascolti un audio in inglese di madrelingua e lo ripeti immediatamente ad alta voce — come un'ombra che segue il parlante con un ritardo di solo 1–2 secondi. A differenza dell'ascolto passivo o degli esercizi di grammatica, lo shadowing costringe il tuo cervello e i muscoli della bocca a elaborare e riprodurre simultaneamente i modelli di discorso reale. La ricerca dimostra che migliora significativamente la precisione della pronuncia, l'intonazione, il ritmo, il discorso connesso, la comprensione dell'ascolto e la fluidità del parlato — rendendolo uno dei metodi più efficaci per la preparazione alla prova di speaking dell'IELTS e per la comunicazione reale in inglese.

Tecnica dello shadowing: leggi la guida completa passo dopo passo →

Pratica di Shadowing: This library changes how JS and CSS work together - Impara a parlare inglese con i 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

GitHub Copilot now controls your command line...

10 very promising Open Source Projects you haven’t heard of

The basics in Amplitube 5

Design with Claude Code: The Designer’s Guide

Making a 360° Controller Smaller than a Penny!

you will never ask about pointers again after watching this video

Clicks Communicator: First Look

How I Ranked 1st at Cambridge University - My Secret

Unreal Engine 5.8 - Experimental MCP Server Support Walkthrough | State of Unreal 2026

Vocabolario e note di pronuncia per questa lezione

Vocaboli chiave di questo video

I phrasal verb che sentirai

La grammatica di questo video

Pronuncia a cui fare attenzione

Come esercitarsi con questo video

Cos'è la tecnica dello Shadowing?