Prática de Shadowing: Native popovers with smooth animations (no JS required) - Aprenda a falar inglês com vídeo
Criando lição...
1
If you want to learn how to make a popover like this one
2
that opens and closes with a different transition for when it's opening and closing and no JavaScript at all involved, well, then you're in the right place.
3
All right, so let's dive in here.
4
First thing we're going to look at is I have my article, I have this div, whatever, it doesn't matter.
5
The important thing is the button that I have right here
6
that I put an outline on it just so we can see it.
7
And if I come all the way down over here, near the bottom somewhere, I have this author popover div.
8
completely separate from everything else.
9
This is one of the cool things with these is you can literally put them anywhere.
10
It will not have an impact on accessibility for the flow of stuff.
11
People will be able to get into it through keyboard and everything.
12
So you put the popovers where you need them to be.
13
If it makes more sense to put it somewhere else in the DOM, you can, but I just wanted to show that we could do this.
14
And the important thing is I have this popover attribute on here.
15
If I remove that, first of all, do this to style it because that will actually let you see
16
there it vanishes into the ether it's still there just we
17
can't see it it's hidden away there's some user agent styles making sure
18
that we can't see it including a display none on there
19
so what we want is when i click the button we want
20
that popover to show up so how do we do
21
that well because this has an id on it of author popover
22
and i have my popover on there all i need to do on my button is come here
23
and i write pop over target and let's just put this on another line
24
so we can see it so i do a And it is say is equal to.
25
And in this case, it was author popover.
26
If you have multiple ones, you might, you know, you're adding this in via GS somehow.
27
GS?
28
JS somehow.
29
Whether it's server side rendered or whatever, you can have like the actual name.
30
So each button is targeting a different popover.
31
And just by having this on here, if I click on that, it opens.
32
And I can click anywhere to dismiss it.
33
So it's a light dismiss.
34
Clicking anywhere dismisses it.
35
If I push escape, it also dismisses it.
36
it I you know my focus is inside of that now so
37
if you have other focusable things as soon as it's opened
38
the first thing you will get to is inside of there as you would expect
39
so that's an important thing to know about.
40
even though it's later on in the DOM, right?
41
So this works.
42
It doesn't look very good, though.
43
So you probably want to style these a bit differently.
44
There's some interesting user agent styles that are on here that can actually, for the way you want popovers to generally work, I'm not a huge fan of the user agent styles,
45
but they're worth looking at.
46
matter you want that on there anyway.
47
You can also see it's using position fixed.
48
It has a position anchor of auto.
49
That's really interesting.
50
We'll talk more about what that means in a minute.
51
We have the width of fit content, a height of fit content, so it's fitting the content.
52
It has some default colors that are the canvas text in canvas.
53
In set of zero because it's positioned with a margin of auto, which is why it's centered.
54
A lot of these things you don't want, especially because of this position anchor of auto that's on there.
55
And so yeah, let's sort of dive through fix this up a little bit.
56
And actually I'm going to put a link to an article from Manuel, who I'm not even going to try and say his last name,
57
but he has a CSS reset that he's created or base, I don't know, he talked about it during CSS day recently,
58
but in there he actually has like a smart reset type of thing you might want to apply for popovers, uh, that stop some of the default styles from sort of getting in the way.
59
So the first thing I'm going to say is, though, make sure that you don't do a display here.
60
So say you need display grid on this, which I am going to be using grid on here.
61
The problem with throwing display grid on there is you overwrite that user agent style of display none.
62
So it means it never disappears.
63
Like I'm clicking, this should be gone.
64
I'm pushing escape.
65
You cannot get rid of it.
66
So you could throw this on there to style it, make it look good.
67
But once you've done that, just make sure you take the display off.
68
And we'll talk more about where you put the display in a second.
69
these styles in here just to give myself a little bit of a same starting point.
70
So if I click on here, it opens up and it looks a little bit better.
71
It's still centered on the page, though, which is probably not what you want.
72
It's not the end of the world.
73
Maybe you like that and that's completely fine if that's the case.
74
And it is using position fixed.
75
So we'll sort of stay in that space.
76
But we saw with those user agent styles, there's the inset of zero, which means top, bottom, left and right of zero, and a margin of auto.
77
and because I've given it a size it's just perfectly centered in the viewport.
78
Again maybe that's what you want but I think this is sort of the things
79
that I would often overwrite here would be to actually say that it has a margin of zero
80
and an inset of auto.
81
And doing that means now when it opens, it's opening top right.
82
Now again, this isn't perfect.
83
Popovers have slightly better support than anchor positioning.
84
So I'm going to be using anchor positioning in this one, which is one of those funny things, actually have it here, where it's going to say limited availability across major browsers,
85
but it's in all the major browser engines.
86
And it's just because it's kind of buggy for some stuff.
87
And they're still fixing in terms of that.
88
So this could be something where you use the default positioning.
89
Maybe we'll do that.
90
Let's do that.
91
I'm talking about it.
92
Let's show you how to do that.
93
So we could say is at supports.
94
Let's just say anchor name of anchor.
95
And then we could put in, not all of that, our margin of zero and our inset of auto.
96
And so that means if this is supported, we'll be able to do our anchor positioning on it.
97
If this isn't supported, right, that means, let's just comment that out, if it's not supported, it doesn't really break and it just opens in the middle of the screen.
98
So I think a nice little compromise there for a progressive enhancement along the way.
99
Now I actually want it to link to where my red button thing is there though.
100
When we click it, it should be a line there.
101
And this is where that anchor name of auto is really cool
102
because it has an implicit anchor to the thing that triggered it and opened it.
103
So this button, it's automatically anchored to this button.
104
So if I have an inside of auto, which just basically means inside of nothing.
105
And now what I can do is come in here and say position area.
106
And I'm going to say this is going to be on the bottom.
107
And because it has that implicit anchor, when I click there, it's on the bottom of my red thing.
108
It's coming out on top of the red line because I used an outline instead of a border.
109
But yeah, it's set up on the bottom.
110
Maybe I don't want it touching the left of the screen.
111
We could add margins around this.
112
I said margin zero.
113
Maybe I want margin of one, just so it's pushed off in every direction by a little bit.
114
Super cool, right?
115
And it's just there.
116
Or maybe I want it to come up on the side over here.
117
I get to say position area is on the right.
118
And then when I click on there, it opens up on the right side.
119
awesome so cool that this works
120
but let's say we wanted it not to open to the right
121
but we actually wanted to open to the top uh what
122
if i do that and i click this it actually covers it
123
because it's trying not to let it overflow right it would stick off the screen
124
if not it's not the end of the world
125
because it's a light dismiss so it's easy to get rid of
126
but it's kind of weird that it covered the content
127
that opened it so you know that's
128
because we're close to the top maybe i want it to open to the top most of the time
129
because let's say like you know there's other stuff on the page So now if I click on that, it's on the top.
130
This makes sense.
131
But then we run in, you know, that sort of sucks.
132
And if I click on it now, now it covers.
133
That's kind of awkward.
134
So what we can do here is a position try and say flip block.
135
Because we're trying to open on the top.
136
I actually want it to flip and open on the bottom.
137
So if I do that, it opens.
138
But look at this.
139
As soon as it runs out of space, it flips over.
140
Boop!
141
That's already pretty cool.
142
But that also means that if I open it, it's opening on the bottom right away because there wasn't enough room on the top.
143
Thank you.
144
It's so cool that we can do this.
145
I also have a margin of one, but let's say I only did the margin on the bottom of one.
146
Right?
147
Because when I was first styling it, I just wanted that margin space here.
148
Not all properties, but some properties will flip along with it.
149
So the margin bottom, when this flips to the other one, is actually putting the margin on the top instead.
150
And of course, this would be the same if I did a block.
151
end we'd get the exact same result so we get the block end margin
152
and then that margin follows through here
153
and of course we probably don't want it touching the side of the page
154
so what we could do is we want position area at top span to the right
155
and that means now it's going to line up with the left side more
156
and span all the way across that way so top
157
but spanning towards the right side which is a nice little touch
158
that we can add to it cool there's a lot more to anchor
159
if you want to dive into more including articles
160
and i don't know if i've done a video on it i don't think i have
161
but i might have if i have i'll put the link to
162
that as well uh but there's going to be some stuff from odd bird
163
that goes into so much more we can do with anchor positioning
164
it is a huge topic but uh what i want to look at now is
165
when we click this or dismiss it
166
or bring it in i don't want to just up here we wanted to do something a little prettier
167
so to be able to do
168
that what we're going to do oh i did want to mention something display grid now before we move on
169
want to change the display type
170
because you want some styling here where you want to do
171
that is in the end uh pop over open
172
which is a new pseudo class that we have so it's
173
when the author pop over is opened we can do a change your display type there
174
so if you want flex
175
or grid i'm going to do a grid grid template columns of an auto one fr
176
and i think we probably want a gap in there too But the display property is the one.
177
So now I get my two columns coming in.
178
Wanted to mention that.
179
So pop over open is what it looks like when it's open.
180
And the reason I thought of that is because I said I wanted to animate everything.
181
So normally we can't do a transition or animation between a display of none, which it has by default, and a display of block.
182
But we can, or grid or anything else.
183
Now we can do that.
184
So let's say by default we want this to actually have an opacity of zero because we want it to fade in.
185
Thank you.
186
It has the display none there.
187
You could declare it.
188
I'm not going to but you know what let's put it display None, it's redundant, but just to be explicit about what's happening.
189
We're going from a display none with an opacity of zero and let's add a translate Translate down.
190
I always get these mixed up.
191
So X is first. So zero.
192
I'm going to do 30 pixels here.
193
The only other thing I need here is an opacity of one.
194
So we actually see it when it's opened.
195
So if I click on that, yeah, it's translated down a little bit.
196
And I'll fix this once we bring in this next step, which is to do...
197
we have...
198
I'm trying to think, there's two different properties and I always mix them up.
199
But we're going to do a transition. So transition.
200
We need to transition our display type.
201
We want to transition our overlay, which is...
202
I I'm going to put it anyway.
203
The overlay we saw that in and that was the thing
204
that had the important on it in the dev tools
205
and you need for popovers and for modals
206
when there it's anything that's using top layer
207
and that's the other thing with popovers is they use a top layer
208
so you don't have to worry about z index issues it's
209
always going to be on top until you start dealing with multiple popovers and multiple things on the top layer.
210
We're going to say display overlay and our the different things that we do.
211
So let's just say this is our transition property.
212
Right, so we're going to do all of those.
213
But then the reason I'm doing these separately is just so we can give them all the same timing.
214
So transition duration, instead of repeating it over and over again, let's just say this will be for demo purposes, we'll make it slow and then speed it up.
215
And the last thing that's really important is our transition behavior.
216
And this is going to be a allowed discrete.
217
I think this is the one that I mix up sometimes.
218
But display is something that allows for discrete animations.
219
And what a discrete animation is.
220
Discrete animation is something like a display type.
221
It doesn't have anything to interpolate in between the two states.
222
So it has to just jump at one point, which traditionally speaking, transitions just meant it wouldn't do it, right?
223
It would just instantly switch.
224
With an animation, it was a bit different.
225
It would happen at, I think, the 50 % point.
226
So a transition behavior allowed discrete, by doing it as the longhand for each of these, it means it's applying it to all of these,
227
which it doesn't really change anything for opacity or our translate, but it does, or it is required for our display and our overlay here.
228
So now you can see there, ha, it works not that way, but when I dismiss, It is working my translate.
229
We're also going to do that's weird.
230
Actually, I see it jumping in a weird way.
231
Oh, the display has doing something weird there too.
232
We'll figure that one out.
233
Display type.
234
The grid is going away.
235
in an unexpected way.
236
Hmm, that's an interesting one.
237
We'll figure that one out.
238
But we can see at least it's fading away.
239
So to get around this because of the way.
240
What's happening is it's instantly putting the display type on, but when you go from display none to display something, it's there all of a sudden.
241
So it's not coming in with the opacity of zero or this translate that we've put on there.
242
It's just coming in existing.
243
And so it doesn't realize any of the properties that were applied to it previously.
244
So to fix that, on our popover open, we come in with an at starting style.
245
And this has to come last.
246
Very, very important in the order here, which can feel a little bit weird, but we do our at starting style.
247
And our at starting style will be an opacity of zero and a translate of, and I'm going to use the same one we did here,
248
but this is where starting style can actually get kind of interesting because they don't have to be the same.
249
So now when I click on this, it's going to appear. And then when I...
250
click away, it will disappear.
251
Now there's a few weird things happening that we will figure out why the layout is changing.
252
We can see it's working in both directions.
253
The last thing I want here is a translate of zero pixels, zero pixels.
254
because when I click on it, I want it to sort of slide up a little bit.
255
And then when I click away, I want it to slide back down.
256
It's kind of weird, right?
257
This sort of makes sense.
258
We're coming from the button.
259
It's too slow, but it's coming up.
260
But then when I close it, I want this to be different.
261
I want to sort of fade away upward.
262
So that's why the starting style is cool.
263
We can do different opening and closing animations.
264
So it's going to slide up that way.
265
And then I click here, it's going to slide on up that way.
266
Now, why is the display?
267
not working as intended, and I discovered the problem.
268
Very silly of me, but I set the display grid here, which has to be here.
269
The problem is when it's it's opening, it has all of those things on it.
270
But when I close, This is only when it's open, and we're not transitioning our Gap or Grid Template columns.
271
So these actually need to be always there.
272
So the popover opened, We have a gap, we have a grid template columns, and that means when we're closing it, while the grid is still there on that transition outwards,
273
it's keeping those applied.
274
I mentioned we could include them up there.
275
So that's one of those like gotchas that can come along.
276
So there we go.
277
It works that way.
278
And it holds those styles as it fades off.
279
Little gotcha that can come up there, which might even be worthy of having a comment if you're playing around with this, right?
280
So if you're creating this, leaving a comment here could be useful for your future self or your coworkers.
281
And now I think we have that set up.
282
So let's just fix this transition duration because two seconds is really fast.
283
Maybe we're going to 0 .75 or something, which is probably still kind of slow.
284
But I think that's pretty good, especially because it can be interacted with right away.
285
Yeah, I'm pretty happy with that.
286
There we go.
287
And as I said, let's get rid of that.
288
Did you do the outline?
289
And with that gone, we have a nice little thing.
290
It pops up.
291
It switches axes.
292
If there's not enough room, it's not doing it on the bottom.
293
But if we ran out of room on the bottom, it would flip around the other way.
294
It opens and closes.
295
So I hope you enjoyed this video.
296
Learned a few things along the way.
297
And I want to say a very big thank you to my enabler of Awesome Johnny, as well as all my other patrons and channel members for their continued support.
298
And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.
📺 Mesmo canal
C14
Handy CSS layout patterns, and fun ways to elevate them
Business EnglishUniversity StudentsWorking Adults
B22
Use these CSS features instead of JavaScript
Business EnglishUniversity StudentsWorking Adults
C14
Transition to and from display: none
Business EnglishUniversity StudentsWorking Adults
C15
Your AI broke the layout. Now what?
Business EnglishUniversity StudentsWorking Adults
B24
This library changes how JS and CSS work together
Business EnglishUniversity StudentsWorking Adults
B27
No more magic numbers for your breakpoints
Business EnglishUniversity StudentsWorking Adults
C14
More CSS quick tips
Business EnglishUniversity StudentsWorking 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
✨ Vídeo recomendado
C14
239 frases
My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It
Business EnglishUniversity StudentsWorking Adults
C11
333 frases
Master n8n Triggers in 20 Minutes – Automate Anything
Business EnglishUniversity StudentsWorking Adults
C1204 frases
Prompt Engineering - Guidelines
Business EnglishUniversity StudentsWorking Adults
C11
132 frases
Video
Business EnglishUniversity StudentsWorking Adults
C11
163 frases
Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project
Business EnglishUniversity StudentsWorking Adults
B21
92 frases
Obsidian Narrator Full Demo
Business EnglishUniversity StudentsWorking Adults
C11
108 frases
How I Learned Procedural Generation
Business EnglishUniversity StudentsWorking Adults
C13
285 frases
8 New CSS, JS and HTML Features You Should Know
Business EnglishUniversity StudentsWorking Adults
B237 frases
How to Create & Style Closed Captions Fast in ActivePresenter 10.5
Business EnglishUniversity StudentsWorking Adults
C12
223 frases
How to Get Smooth, Bright Vocals
Business EnglishUniversity StudentsWorking Adults
Sobre Esta Aula
Nesta lição, você aprenderá a criar popovers nativos com animações suaves, sem a necessidade de JavaScript. Através de um exemplo prático apresentado no vídeo, você entenderá como manipular atributos HTML e garantir que os popovers funcionem de forma acessível com interações simples, como clique e pressionamento de tecla 'Escape'. Este exercício será fundamental para desenvolver suas habilidades de programação web e, ao mesmo tempo, praticar seu inglês técnico.
Vocabulário e Frases-Chave
- Popover: Um elemento que aparece sobre a interface ao clicar em um botão.
- Transição: O efeito visual usado ao abrir e fechar o popover.
- Acessibilidade: Recursos que garantem que todos possam usar a interface.
- Foco: O elemento que recebe a interação do usuário.
- Estilos de usuário: Estilos padrões que os navegadores aplicam a elementos HTML.
- Elementos focáveis: Componentes da página que podem ser destacados para interação.
- Posição fixa: Uma técnica de posicionamento de elementos na tela.
Dicas de Prática
Para maximizar o seu aprendizado enquanto assiste a este vídeo, recomendamos a técnica de shadowing. Ou seja, tente repetir o que é dito imediatamente após o falante, imitando não apenas as palavras, mas também o tom e a entonação. A velocidade moderada do vídeo facilita essa prática. Enquanto você observa o processo de criação dos popovers, faça pausas frequentes para repetir as frases importantes, especialmente as relacionadas à acessibilidade e interação do usuário.
Essa abordagem não só ajudará a melhorar a pronúncia em inglês, como também facilitará a memorização dos termos técnicos mencionados. Além disso, considere o uso de plataformas de shadowing site que podem guiá-lo durante seu estudo. Com o tempo, isso permitirá que você se torne mais confiante em usar o inglês no contexto de desenvolvimento web. Aprender inglês com YouTube pode ser uma experiência muito enriquecedora e, ao aplicar essas técnicas de shadowspeak, você melhorará rapidamente suas habilidades de comunicação.
Gramática neste vídeo
As estruturas que o falante mais usa, com as palavras exatas do vídeo:
| Estrutura | No vídeo |
|---|---|
| Frases condicionais if + oração, will/would + verbo — uma condição e seu resultado | if this is supported, we'll be · if i have i'll put |
| Orações relativas who / which + oração — informação extra sobre uma pessoa ou coisa | auto, which is · though, which is · zero, which means |
| Voz passiva be + particípio passado — o foco está no que acontece, não em quem faz | is supported · isn't supported · is opened |
| Present perfect have/has + particípio passado — uma ação passada que ainda importa agora | you've done · I've given · i've done |
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.