تدريب Shadowing: 8 New CSS, JS and HTML Features You Should Know - تعلم التحدث بالإنجليزية عبر الفيديو
جارٍ إنشاء الدرس...
1
Welcome to Syntax Today.
2
We've got eight amazing new CSS, HTML, and JavaScript APIs that you need to know about.
3
Wes has put together eight new demos to showcase these things.
4
And let me tell you, there's some cool stuff in here that I didn't even know about.
5
So Wes, I'm so stoked to see some of these things.
6
Which one do you want to start with first?
7
Yes, let's get into the CSS alpha being added to relative color.
8
I didn't even know that this was coming.
9
I think with a lot of these, we've been so obsessed with AI for the last six months.
10
There's been so much that's been added to CSS, HTML, JavaScript, that I've been looking through all this stuff.
11
I'm like, wow, that's awesome.
12
So first one, very simple, CSS relative color, which is you'd be able to take a specific color and then return the R,
13
the G, the B, and the A, or the HDS, the L and the A.
14
Now we have a short form for that, which is simply just, I want to take a color
15
and then I want to make it semi opaque or have transparency, right?
16
So this is simply just CSS background alpha.
17
You give it the color.
18
So from whether you pass it a hex, HSL, whatever, and then forward slash the percentage value that you want it to do,
19
then you can make, simply just make a color semi-transparent.
20
That's crazy.
21
This is something that has been what this was in like SAS.
22
This was in Silas.
23
This was in all of them.
24
And it was so nice when we got relative time.
25
Yes.
26
To do this dynamically in the browser.
27
People might say, why not just use SAS?
28
Well, SAS has done a build time.
29
We want something that's done it for in time here.
30
And my gosh, the browser support for this is actually pretty dang good.
31
It's in everything.
32
And I mean, it's in Safari technology preview, but it's in Firefox
33
in the nightly build currently
34
which means it'll be here soon it's been in chrome since version 151
35
so as of july 27 2026 and it will be in safari 27
36
so my gosh
37
that means i have it on my computer yeah i'm running i'm running safari 27 not
38
that i'm using it but i'm running it
39
it all just got added like in the last month or
40
so it's been added to every single browser which i think
41
because now that they have relative color implemented it's just a simple syntax ad i I think it's pretty low lift.
42
I don't think I knew that this was happening. So sick.
43
And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io forward slash syntax.
44
You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it.
45
So head on over to sentry.io forward slash syntax.
46
Again, we've been using this tool for a long time and it totally rules.
47
All right.
48
Next one we have here is the CSS progress function.
49
This is something you will often do with calc, where you have a starting value and an ending value, and then you have your own value,
50
and you want to know where in the middle of that is this thing.
51
What this progress function will allow you to do is you pass it where you're at.
52
These values can be anything.
53
Dynamic.
54
Yes yeah you could pass it like i'm at two ems
55
and i want to start at eight pixels
56
and go to a hundred percent like that's that's the beautiful part of it is
57
that you can say where am i in between these two values even
58
if they are not of the same unit um which is
59
so cool so uh here i have opacity progress i'm at 300
60
or or 150 and i want to know where i am extrapolate that up to between zero
61
and a thousand and that's not hard to do with a css calc
62
but when you start getting into these things where you're like where am i at in between 20 pixels
63
and 400 percent width you know right yeah yeah this will
64
just do the math for you this has nothing to do with the css
65
or the html progress element
66
which i initially thought it was it is simply just how far am i in between these two values that's
67
so cool yes yeah it gives you a unit list value
68
so it you still have
69
if you do want it to be like a like a percent
70
or em or px
71
and you still have to coerce it with your um with
72
the calc yeah cool i had no idea about this one either
73
and it seems like this is available in everything except for firefox
74
so and the the reason why i'm doing this is
75
because uh gecko which is the engine in Firefox is intent to ship.
76
So all of the ones that I'm, like, where you get all of these,
77
like, what's new in CSS is you can look at the intent posts on the Google groups of intent.
78
And basically, the people who work on these browsers will say, I intend to ship this.
79
I intend to turn this on in all the browsers.
80
We intend to prototype this specific feature.
81
And it's kind of a cool way to see, especially a lot of these are, oh, wow, this feature is finally coming to Firefox.
82
Now we can start using it.
83
Yeah, I love that.
84
And the next one here is a JavaScript one, which is promise.allkeyed.
85
We actually talked about this recently on a syntax live.
86
And this is something that you said you've been doing for many years with libraries and stuff.
87
But now it is going to be native.
88
Yes.
89
So if you have three or four promises, like say, for example, you want to fetch a podcast, you want to fetch your users, you want to fetch a bunch of posts,
90
you want to do that concurrently, or most people will think you want to do that in parallel, you know, fetch them at the same time.
91
And if you want to have multiple promises fetched at the same time,
92
you use promise.all or promise.all settled right yeah and the problem with
93
that is that those only take arrays meaning that the order
94
at which they come back is is important
95
so you have to do this like weird loop over the results
96
and use the index of the value this you simply just make an you make an object
97
and then instead of the the properties on that object can be promises
98
so fetch user fetch posts and then you can just await
99
that object and it will know that there are keys in
100
that object that need to wait to be resolved
101
and then once it is done it'll return
102
that entire object with the resolved keys
103
or you can a lot of people are going to just simply destructure those values straight on out
104
yeah that rips and it just feels like a nice quality of life thing
105
that will make your code read better anything you couldn't do
106
before lots of utilities to do this type of thing but like like we're at a point now where like,
107
yeah, we can really make the JavaScript language itself have some really nice APIs.
108
A lot of people are like, oh, why don't we just use a library for that?
109
I don't want a library for this.
110
This is something I do all the time.
111
Yes, okay.
112
Something also here that it feels like an HTML element
113
that should have been added a long time ago or two HTML elements.
114
I'm not sure about this one.
115
I'm curious to see what you think.
116
And this one is just in prototyping stage.
117
Okay.
118
Well, if you're asking me, it does feel like, so this is to say, this is the camera and the microphone HTML elements.
119
For me, it feels like a nice way of,
120
what's the word that they use for declaratively writing things that use the camera and the microphone,
121
which for some reason, because they are physical objects, they have like this, like that feels like they deserve to be represented in that way.
122
But they are these things even useful without connecting them with JavaScript.
123
I mean, I like this.
124
Yeah.
125
You have if you want to access somebody's camera or microphone, there are new elements.
126
I believe there's also a media element, which is a little further ahead than this.
127
And it will simply just request access to those things.
128
And typically what you'd have to to do is you'd have to programmatically do it like navigator.media.devices.getusermedia.
129
And that would then say, hey, can I access your webcam?
130
Can I access your microphone?
131
And then they would say yes, you would get the stream.
132
And then you take that stream and then you put it into whatever you want.
133
You display it on a video element.
134
You start recording it with a media recorder, et cetera.
135
This is a declarative way to do that, which I don't know.
136
it doesn't make much sense to me because you still have to like, once you have that track, then you still have to listen for the events of like,
137
someone gave you access to the camera and then you, you, you still have to use regular JavaScript.
138
So like, I don't, I don't see the benefit of this unless like
139
so much of the recent HTML that we've gotten are trying to do things declaratively without needing JavaScript.
140
Yeah.
141
Like invokers or yeah.
142
Yeah, maybe this is going to play on with the Invokers API,
143
where you could just click together a very basic photo booth without any JavaScript.
144
Yeah, I don't know.
145
I'm not sure about this one.
146
But it seems interesting.
147
I think you've talked me out of it yeah i thought
148
at first i thought i was like oh this is cool
149
and then you're like why did this yeah i don't know
150
yeah i guess kind of right um this next one here
151
which is the css attribute function
152
or attr now this function has been around in the web
153
for a billion years uh this this function was back
154
when the dinosaurs were roaming the earth they were writing the css attribute function.
155
But what's changed in this modern implementation of the attribute function is that you can actually use the values in a,
156
like a real way, kind of turning this into almost like props for CSS, like directly in the browser.
157
You could only use it ATTR with what, like content?
158
And now you can use it with anything, background, width, height, et cetera.
159
Yeah, now you could pass this stuff directly into your CSS.
160
Basically, you could set a property on a div and have
161
that act as like a prop and access that value directly in your CSS.
162
It's sick.
163
I'm curious if you'd be able to use value here because value in HTML is like input value.
164
Let's say you have a range.
165
But does that update when the JavaScript value updates as you scroll it?
166
I'm not quite sure.
167
It would be really nice if you could, because then you could just take the, you could pipe that into the progress function we talked about earlier, right?
168
Yeah, right.
169
Yeah, can I use value?
170
Yeah.
171
This has been in everything for quite a while, except for Firefox.
172
And now we're finally in a spot where it's in intent to ship in Gecko.
173
So it's one of those things where you can just finally use it.
174
And this is, again, this is make declarative work a lot easier especially
175
if you have like a library where you want to pass
176
in things like button data dash size small medium large right any of these like modifiers
177
that you're used to passing in to each of them now
178
you can simply just pass them as attributes likely data dash
179
attributes though it doesn't it's not entirely necessary to have the
180
data dash on it yes this next one here is css sibling index function
181
and the sibling count function if you've ever watched any of our css battles on this channel.
182
You've seen us use these functions in your options.
183
So what these do, they give you the current index of an item
184
or the count of how many items there are that are siblings.
185
And the only way you could do this type of work
186
where you don't know how many items are in a list or in our siblings is by counting them with JavaScript.
187
That's the only way you could have done it before
188
or you could just have nth child one nth child two nth child until every single possible use case
189
and that's like yeah that's not the way to do it right
190
so tell us about sibling index
191
and sibling count yeah it's very simple it tells you how many items are of a sibling
192
so here i have a circle
193
and like the example where we've done it in our css is we did this navigation that was a 360 degree circle.
194
And if you don't know if you have three items in there
195
and you want to evenly space them around in a circle
196
and you want to calculate the rotation value or the rotation angle of that item.
197
So if you have four of them, it's going to be 0, 25, 50, 75, right?
198
But if you have five of them, then that value changes.
199
And the more you add, the less of an angle each one needs to be.
200
So previously, yeah, you'd have to do like, okay, well, if the nth child five exists, then there must be five, then do this.
201
And you'd have to do every single instance of it, or you would calculate them in JavaScript, like you said, and you'd pass that in via variable.
202
So this just makes it so much easier.
203
And we've done many, many in all of our CSS challenges.
204
I think we always reach for this one.
205
And then you guys gave me a hard time for using it in my challenge because it didn't work.
206
in any of the other browsers, but now we can.
207
I gave you a hard time because very specifically, I had made two versions of my app,
208
one without JavaScript and one with JavaScript to just showcase the need for that.
209
And I could have used it, I knew about it, but I chose not to.
210
And so you were like trying to be like, mine's better.
211
Yeah, so.
212
Again, it's another one of these that Firefox has just shipped, meaning that it is now in all the browsers and you can go ahead and start to use it.
213
It's been in Safari since 26.2.
214
It's been in Safari for almost a year.
215
So we're in good shape now.
216
Yes.
217
Heck yes.
218
Heck yes.
219
All right.
220
Next one here is shrink to fit container.
221
I, I don't necessarily understand this one.
222
I mean, I understand it, but I don't get the usage for it.
223
Yeah.
224
This, I can tell you, I have run into this once before.
225
So what, what this does is if you have some content and the width of that content,
226
you set to fit content.
227
The width of that element, like let's say we have a paragraph tag and it wraps around.
228
Normally, it's a block element, so it's just going to take 100% width as much as it has, right?
229
But if you want that paragraph to just be as wide as it is,
230
especially with text wrapping, then you say width equals fit content, meaning that be as wide as the actual element.
231
Now, the problem is, is that if you have an element that wraps some fit content, then that thing is still with 100%, right?
232
And you can't do with the fit content on that as well.
233
And it's a bit of a pain.
234
And then you're getting into like, maybe I should float this and it's a nightmare.
235
So now there is a property max content sizing shrink to fit.
236
and that will simply just allow you to suction the parent element to the size of some fit content
237
which again maybe not something you're hitting every single day
238
but i can tell you i run into it once yeah
239
yeah i i once is enough i guess i maybe i will hit this
240
and be like oh shrink to fit container the next one
241
here though is something i do hit all the time which is text box trim and text box edge, text, man, fonts, they are all wacky.
242
And now you're rendering them and too many times you're just trying to get your freaking button to look good, right?
243
Yeah, so what this will do is it will allow you to trim,
244
like basically if you think about like a line height one and like how that is calculated on some texts, right?
245
It will take into account the very highest of the capitals in the very lowest of the descenders, right?
246
So if you have big capital A, a Y that goes down, then the height of that text, even if you don't use those letters,
247
the height of that line or that text box is going to be huge.
248
And where you can get into trouble, let me show you on the mad CSS website that we did it.
249
We have this admit one right here.
250
And I put text box trim cap alphabetic.
251
So if I take that off, you can see that the bottom of this text here, and if you're audio listeners,
252
imagine that the bottom of the text being larger than the top, and it's not perfectly vertically centered.
253
And this drives you mad because I don't have any letters here that are ascending or descending.
254
It's all capital.
255
So what I did is I said text box trim, cap alphabetic, and that just trimmed it directly to all of the letters.
256
And then that allowed me to put a padding on the top and the bottom.
257
And it was exactly the same on the top and the bottom, which I absolutely love.
258
So again, this has been in all the browsers except for Firefox.
259
And now they are finally, it's an intent to prototype.
260
So not just quite yet.
261
But yes, this has been in Chrome since February 2025.
262
So yes, that's before Opus 4.5 came out.
263
That's how long ago this thing was.
264
But I don't know, man, I hope I hope we get this soon because this is one of the things where you can add it already.
265
You can start using it today and then in browsers that don't support it.
266
It just looks a little bit weirder, but progressive enhancement at all.
267
Yes, exactly.
268
You can decide where you would like to trim the top and the bottom of your pieces of text.
269
I'll be using this one.
270
Beautiful.
271
Yes, absolutely.
272
Wes, thank you for putting together these demos.
273
You're going to make this page available for people who are
274
audio listeners who want to see what you're talking about and give it a try.
275
I'll slap it up.
276
We'll put the link in the notes.
277
All right.
278
Slap that bad boy up.
279
Thank you so much for this, Wes.
280
Thank you.
281
All right.
282
Thanks for tuning in.
283
Peace.
284
Peace.
285
Thank you.
📺 نفس القناة
B24
Can This Robot Be My Personal Assistant
Business EnglishDaily ConversationHigh School Students
B21
I bought Black Market AI Tokens on Chinese Amazon
Business EnglishUniversity StudentsWorking Adults
C13
STOP Running Code On Your Computer
Business EnglishUniversity StudentsWorking Adults
C14
8 Tech Choices to Lock In Before Agentmaxxing
Business EnglishUniversity StudentsWorking Adults
B23
AI Is Stealing From You
Business EnglishDaily ConversationUniversity Students
✨ فيديو موصى به
B22
185 جمل
Use these CSS features instead of JavaScript
Business EnglishUniversity StudentsWorking Adults
C11
28 جمل
Gemma 4 Just Released - Whats In? In 2026!
Business EnglishUniversity StudentsWorking Adults
B21
131 جمل
macOS 27 Released! What's New?
Business EnglishUniversity StudentsWorking Adults
C11
49 جمل
Next JS Interview Questions and Answers 2026 | Top 20 Most Asked Questions
Business EnglishInterview EnglishUniversity Students
C11
345 جمل
What the heck is the event loop anyway? | Philip Roberts | JSConf EU
Business EnglishUniversity StudentsWorking Adults
C14
239 جمل
My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It
Business EnglishUniversity StudentsWorking Adults
C12
14 جمل
CS50x 2026 - Introduction
Business EnglishUniversity StudentsWorking Adults
C11
137 جمل
JUST $1 For Billions of Tokens?! (DeepSeek v4 Pro)
Business EnglishUniversity StudentsWorking Adults
C11
309 جمل
Claude Code: The Advanced Guide (99% of Devs Skip These Features)
Business EnglishUniversity StudentsWorking Adults
C11
132 جمل
Video
Business EnglishUniversity StudentsWorking Adults
C17
67 جمل
8 Most Important System Design Concepts You Should Know
Business EnglishUniversity StudentsWorking Adults
المفردات وملاحظات التحدث لهذا الدرس
يحتوي هذا الفيديو على 285 جملة و3313 كلمة للتدرب على الترديد. مدة الكلام 18:27. يتكلم المتحدث بسرعة، نحو 180 كلمة في الدقيقة، لذا ستسمع كثيرًا من وصل الكلمات واختزال الأصوات. 85% من الكلمات ضمن أكثر 3,000 كلمة شيوعًا في الإنجليزية، ويُستحسن مراجعة الباقي قبل البدء.
أهم المفردات في هذا الفيديو
15 كلمة من الفيديو تستحق التعلّم، مع النطق والمعنى:
| الكلمة | النطق | المعنى |
|---|---|---|
| element اسم | /ˈɛləmənt/ | عُنْصُر |
| fetch فعل | /fɛt͡ʃ/ | جَلَبَ |
| sibling اسم | /ˈsɪb.lɪŋ/ | شَقِيق, شَقِيقَة |
| width اسم | /ˈwɪtθ/ | عَرْض |
| trim فعل | /ˈtɹɪm/ | شَذَّبَ, قَلَّمَ |
| intent اسم | /ɪnˈtɛnt/ | نِيَّة |
| attribute اسم | /ˈæt.ɹɪˌbjut/ | صِفَة, خُصُوصِيَّة |
| safari اسم | /səˈfɑːɹ.i/ | سَفَارِي |
| syntax اسم | /ˈsɪn.tæks/ | بِنَاء جُمْلَة, نَحْو |
| relative اسم | /ˈɹɛl.ə.tɪv/ | قَرِيب, قَرِيبَة |
| microphone اسم | /ˈmaɪ.kɹəˌfəʊn/ | مِيكْرُوفُون, مَيْكْرُوفُون |
| wrap فعل | /ɹæp/ | لَفَّ, غَلَّفَ |
| intend فعل | /ɪnˈtɛnd/ | تَعَمَّدَ, نَوَى |
| dash اسم | /ˈdæʃ/ | شَحْطَة, شَرْطَة |
| calculate فعل | /ˈkælkjʊleɪt/ | حَسَبَ |
الأفعال المركبة التي ستسمعها
| الكلمة | النطق | المعنى |
|---|---|---|
| come back فعل | عَادَ, رَجَعَ | |
| come out فعل | /ˌkʌm ˈaʊt/ | خَرَجَ, غَادَرَ |
| go down فعل | نَزَلَ |
نطق يحتاج إلى انتباه
يستخدم المتحدث 78 من الصيغ المختصرة، مثل don't, I'm, you're. انطقها بصيغتها القصيرة كما تسمعها.
- أصوات “th”: width /ˈwɪtθ/, mathematics /mæθ(.ə)ˈmæt.ɪks/, booth /buθ/
- أصوات “sh” و“zh”: dash /ˈdæʃ/, rotation /ɹoʊˈteɪʃən/, showcase /ˈʃoʊˌkeɪs/, gosh /ɡɑːʃ/, implementation /ˌɪmplɪmənˈteɪʃən/
- الكلمات الطويلة — انتبه لموضع النبر: calculator /kæl.kjə.leɪ.tɚ/, necessarily /ˌnɛs.əˈsɛɹ.ə.li/, implementation /ˌɪmplɪmənˈteɪʃən/, utility /juːˈtɪlɪti/, mathematics /mæθ(.ə)ˈmæt.ɪks/
كيف تتدرب بهذا الفيديو
- استمع إلى الفيديو كاملًا مرة واحدة دون أن تتكلم، ودوّن الكلمات التي لا تعرفها.
- ابدأ بسرعة 0.75×، وردّد جملة جملة، ثم عُد إلى السرعة العادية عندما يصبح الأمر سهلًا.
- سجّل صوتك وقارنه بالأصل، مع الانتباه إلى كلمات مثل element, fetch, sibling.
القواعد في هذا الفيديو
أكثر التراكيب التي يستخدمها المتحدث، مع العبارات نفسها من الفيديو:
| التركيب | في الفيديو |
|---|---|
| المضارع التام المستمر have/has been + -ing — حدث بدأ سابقًا وما زال مستمرًا | I've been looking · we've been using · you've been doing |
| المضارع التام have/has + اسم المفعول — حدث ماضٍ ما زال له أثر الآن | has put · we've been · has been |
| المبني للمجهول be + اسم المفعول — التركيز على ما يحدث لا على من يفعله | being added · been added · be resolved |
| جمل الوصل who / which + جملة — معلومة إضافية عن شخص أو شيء | color, which is · that, which is · gecko which is |
ما هي تقنية التظليل الصوتي؟
التظليل الصوتي (Shadowing) تقنية تعلم لغة مدعومة علمياً، طُورت أصلاً لتدريب المترجمين الفوريين المحترفين. الطريقة بسيطة لكنها قوية: تستمع لصوت إنجليزي أصلي وتكرره فوراً بصوت عالٍ — كظل يتبع المتحدث بتأخير 1-2 ثانية. تُظهر الأبحاث تحسناً كبيراً في دقة النطق والتنغيم والإيقاع وربط الأصوات والاستماع والطلاقة.