Shadowing Practice: No more magic numbers for your breakpoints - Learn English Speaking with Video
בחר מצב תרגול
כל מצב פותח חדר תרגול במסך מלא.
91 משפטים
אם המשפטים קצרים או ארוכים מדי, לחץ על ערוך כדי להתאים אותם.
1
Hello my friend and friend.
2
I'm back from Amsterdam.
3
I was there for Smashing Conf where I had an absolute wonderful time.
4
I want to say a really big thank you to Smashing for having me and yeah it was really fun.
5
Met a lot of amazing people, had a really good time and I'm going to be back in Amsterdam in June.
6
So if you're going to be there around June, CSS day, super excited for that and I'll put a link to
7
that in the description in case you want to check it out.
8
There is CSS day which is happening and the prices are going up in like a month.
9
So if you're going to convince your boss to send you, now would be a good time to do it.
10
And there's also the Web We Want conference.
11
It's a free conference happening either the day before or after CSS day.
12
I always forget which one it is, but I'll put a link to that just in case because I know conferences can be expensive.
13
They're putting on an amazing event.
14
So if you are in the Amsterdam area, I'd recommend you check that out as well.
15
But you're not here for that.
16
You're here to learn about breakpoints.
17
And I talked all about some of this stuff at the conference.
18
My talk is about container queries being amazing.
19
We're going to see why, or this is at least one example of them.
20
And don't, if you're like, oh, container queries, I'm here for media query stuff.
21
Container queries have fantastic support now.
22
So please don't just run away.
23
They are baseline widely available and support numbers in general are quite good for it.
24
So stick around and see why they are amazing, or one of the reasons why they're amazing, where you can see I have my flex column set up right here.
25
And when I change, you know, This looks fine, and I'm doing this at 50 rem, which is kind of a random number, but I'm doing this with a media query to start with.
26
And the reason I'm doing that is because I want to show that if you change the HTML font size, it will not change the breakpoint.
27
Because even though this is set to rem, when you're using a media query, media queries are an at rule that are like the global scope.
28
So they can't actually see what's happening inside of selectors.
29
And that means you can see here, I've actually like broken my layout, right?
30
I have horizontal scrolling because the three columns are so narrow with such a big font size.
31
It's exaggerated for demo purposes, but that's fine.
32
If we come down here, and I actually, or not down to here, if I come and take a look in my HTML, all of this is inside of my article, or even main.
33
Let's use our main this time.
34
I used the article when I did this on stage, but we're going to switch this over to a main, and we're going to say that this is a container type of inline size,
35
because if you are using container queries, you do have to define a container somewhere.
36
This is one of the limitations of using container queries.
37
And what that means now is the browser can see not only the size of my main, but the font size of the main as well.
38
So if I come down and I switch this media for an at container, the breakpoint is going to update.
39
And now we see it's all the way out here instead
40
because it's gotten as the rem has gotten bigger on my project.
41
And I'm doing this on my HTML.
42
I could be doing this on the main or other elements as well, and it's going to see the font size.
43
It's just inheriting down into the main, so it's working fine.
44
But yeah, it's updated and it's moved the breakpoint all the way out to here.
45
And you came here going, well, Kevin, you said no more magic numbers.
46
And this is a magic number.
47
It's just not in pixels.
48
It's in rem instead.
49
And you would definitely be right.
50
It is a magic number.
51
But we can change this to use a smarter unit or one that is a content first unit, which I would say is the CH.
52
And I'm going to say 90 CH.
53
You may go, why would you do 90 CH, Kevin?
54
That seems just as magic of a number, but it's not.
55
The ch character, if you don't know it, is the width of a character of your font and all of that.
56
So right now it's at this 1.5 rem size based on the font that I'm using.
57
It's going 90 characters wide.
58
And the reason this is a content first breakpoint now, let's just see where it's at, is it's going to happen when we have about 90 characters long.
59
This is an approximation.
60
So if you actually take the time to count this, it probably won't be exactly 90 but it's an approximation and
61
that reason this is a cool break point to have is
62
that means this is happening
63
when I'm about 30 for each one of these 30 characters wide for each column
64
and that's a really smart break point to have because
65
that means we're hitting this like smallish area where things are getting too squished
66
because minimum line lengths 25 to 30 characters is getting pretty narrow
67
and that's about as small as you can get unless you're just on a mobile device
68
and you don't have a choice and you have to go narrower.
69
But if you do have a choice, you probably don't want to get smaller than that.
70
So instead of guessing at a random number, you can use something like the 90 CH.
71
And then if I come up to here
72
and I change this back down to a one rem or whatever size you need for your project, it's going to adapt.
73
And now that breakpoints over here instead.
74
And it's always going to be when we're hitting about 30 characters size for each one.
75
Plus we have like the padding on stuff.
76
So it's a general approximation, but we're doing this, not just based on some random magic number that a media query breakpoint uses,
77
where you're maybe getting it from the tailwind breakpoints or the bootstrap breakpoints, or you're just coming up with something, making it bigger, smaller, figuring out where it works,
78
you can actually make informed decisions based on the content, which I love.
79
This is such a fun way to work, in my opinion.
80
And I really like this pattern.
81
It's one of my favorite ways of using container barriers right now, though there's other really cool things we can do with it, such as wrap detection, which is really exciting,
82
knowing when something is wrapping based on an intrinsic breakpoint that you might have.
83
And I looked at that last week.
84
That video is right here for your viewing pleasure or link down in the description if you need it over there.
85
And if you like this pattern
86
and you want to dive deeper into the world of container queries and see more of the things they can do, my course CSS Demystified has a bunch of lessons where it's covering container queries from the basics of how they work,
87
some of the limitations they have, the gotchas, and other issues that you can run into with them, and awesome patterns and good ways of using them as well.
88
So if you'd like more information on that, the link is down in the description for you to check out.
89
And with that, I'd like to thank my enabler of awesome, Johnny, as well as all my other patrons and channel members for their continued support.
90
And with that, thank you very much for listening.
91
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
C12
Use these CSS features instead of JavaScript
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
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
78 משפטים
How I deploy serverless containers for free
Daily ConversationUniversity StudentsWorking Adults
B21
30 משפטים
Video
Daily ConversationWorking Adults
C11
689 משפטים
Database Sharding! Designing Data-Intensive Applications chapter 6
Daily ConversationUniversity StudentsWorking Adults
C14
321 משפטים
8 Tech Choices to Lock In Before Agentmaxxing
Daily ConversationWorking Adults
C11
218 משפטים
Next.js 16.3 got good (if you care)
Daily ConversationWorking Adults
C11
108 משפטים
How I Learned Procedural Generation
Daily ConversationUniversity StudentsWorking Adults
C11
358 משפטים
It’s not just you
Daily ConversationUniversity StudentsWorking Adults
C12
139 משפטים
Does Anyone Use JavaScript Anymore?
Daily ConversationWorking Adults
אוצר מילים והערות הגייה לשיעור הזה
שיעור הדיבור הזה ברמה C1 מבוסס על הסרטון “No more magic numbers for your breakpoints”. המילים שחוזרות הכי הרבה: container, breakpoint, size, queries, character. בסרטון הזה יש 91 משפטים ו-1344 מילים לתרגול Shadowing. הדיבור נמשך 5:50. הדובר מדבר מהר, כ-230 מילים בדקה, אז צפו לצלילים מחוברים ומקוצרים. 85% מהמילים נמצאות בין 3,000 המילים הנפוצות ביותר באנגלית; כדאי ללמוד את השאר לפני שמתחילים.
אוצר מילים מרכזי בסרטון הזה
11 המילים המתקדמות ביותר בסרטון, עם ההגייה והמשמעות שלהן:
| מילה | הגייה | משמעות |
|---|---|---|
| container שם עצם | /kənˈteɪ.nəɹ/ | מיכל |
| font שם עצם | /fɑnt/ | גּוֹפָן |
| approximation שם עצם | /əˌpɹɑk.sɪˈmeɪ.ʃən/ | קֵרוּב |
| exaggerate פועל | /ɛɡˈzæd͡ʒ.ə.ɹeɪt/ | הגזים |
| excite פועל | /ɪkˈsaɪt/ | הלהיב, עורר |
| inherit פועל | /ɪnˈhɛɹɪt/ | יָרַשׁ |
| pixel שם עצם | /ˈpɪk.səl/ | פִּיקְסֶל, פִּיקְסֶלִים |
| scroll שם עצם | /skɹoʊl/ | מגילה, מְגִלָּה |
| horizontal שם תואר | /ˌhoɹəˈzɑn.təl/ | אפקי |
| width שם עצם | /ˈwɪtθ/ | רוחב \ רֹחַב |
| demo שם עצם | /ˈdɛm.oʊ/ | דמו |
Phrasal verbs שתשמעו
| מילה | משמעות |
|---|---|
| check out פועל | בדק |
| figure out פועל | הֵבִין, מצא תשובה |
| run away פועל | בָּרַח |
הגייה ששווה לשים לב אליה
הדובר משתמש ב-41 קיצורים וצורות מקוצרות, כמו I'm, you're, don't. אמרו אותם בצורה הקצרה, כפי שאתם שומעים אותם.
- הצלילים של “sh” ו-“zh”: approximation /əˌpɹɑk.sɪˈmeɪ.ʃən/, limitation /lɪmɪˈteɪʃən/, detection /dɪˈtɛk.ʃən/
- מילים ארוכות — שימו לב להטעמה: approximation /əˌpɹɑk.sɪˈmeɪ.ʃən/, limitation /lɪmɪˈteɪʃən/, exaggerate /ɛɡˈzæd͡ʒ.ə.ɹeɪt/, horizontal /ˌhoɹəˈzɑn.təl/
צלילים שדוברי עברית מתקשים בהם:
- /w/ — שפתיים מעוגלות, לא /v/: query /ˈkwɪɹ.i/, tailwind /ˈteɪlwɪnd/, width /ˈwɪtθ/
- /æ/ — פתוח יותר מה-“אֶ” העברית, לא כמו “a” ב-“cup”: bootstrap /ˈbuːtˌstɹæp/, exaggerate /ɛɡˈzæd͡ʒ.ə.ɹeɪt/, adapt /əˈdæpt/, pad /pæd/
- /r/ — הלשון לא נוגעת בשום מקום, לא ה-“ר” הגרונית: query /ˈkwɪɹ.i/, container /kənˈteɪ.nəɹ/, approximation /əˌpɹɑk.sɪˈmeɪ.ʃən/, bootstrap /ˈbuːtˌstɹæp/, exaggerate /ɛɡˈzæd͡ʒ.ə.ɹeɪt/
איך לתרגל עם הסרטון הזה
- הקשיבו לכל הסרטון פעם אחת בלי לדבר, ורשמו את המילים שאתם לא מכירים.
- התחילו במהירות 0.75×, תרגלו Shadowing משפט אחר משפט, וחזרו למהירות רגילה כשזה מרגיש קל.
- הקליטו את עצמכם והשוו למקור, תוך תשומת לב למילים כמו container, font, approximation.
מהי טכניקת השאדואינג?
שאדואינג היא טכניקת למידת שפה מבוססת מדע שפותחה במקור להכשרת מתורגמנים מקצועיים ופופולרית על ידי הפוליגלוט ד"ר אלכסנדר ארגואלס. השיטה פשוטה אך עוצמתית: אתה מקשיב לאודיו באנגלית ילידית וחוזר עליו בקול רם מיד — כמו צל העוקב אחרי הדובר עם עיכוב של 1–2 שניות בלבד. בניגוד להאזנה פסיבית או תרגילי דקדוק, שאדואינג מכריח את המוח והשרירים בפה לעבד ולשחזר דפוסי דיבור אמיתיים בו זמנית. מחקרים מראים שזה משפר משמעותית את דיוק ההגייה, האינטונציה, הקצב, הדיבור המחובר, הבנת השמיעה ושטף הדיבור — מה שהופך אותו לאחת השיטות היעילות ביותר להכנה לIELTS Speaking ולתקשורת באנגלית בעולם האמיתי.