Luyện nói tiếng Anh bằng Shadowing qua video: No more magic numbers for your breakpoints
Chọn chế độ luyện tập
Mỗi chế độ mở một phòng luyện tập toàn màn hình.
91 câu
Nếu các câu quá ngắn hoặc quá dài, hãy bấm Edit để chỉnh sửa.
1
Hello my friend and friend.
Xin chào bạn của tôi và các bạn.
2
I'm back from Amsterdam.
Tôi vừa trở về từ Amsterdam.
3
I was there for Smashing Conf where I had an absolute wonderful time.
Tôi đã tham dự Smashing Conf ở đó và đã có một khoảng thời gian tuyệt vời.
4
I want to say a really big thank you to Smashing for having me and yeah it was really fun.
Tôi muốn gửi lời cảm ơn chân thành đến Smashing vì đã mời tôi và thật sự là một trải nghiệm rất thú vị.
5
Met a lot of amazing people, had a really good time and I'm going to be back in Amsterdam in June.
Tôi đã gặp rất nhiều người tuyệt vời, có một khoảng thời gian thật tuyệt và tôi sẽ quay lại Amsterdam vào tháng Sáu.
6
So if you're going to be there around June, CSS day, super excited for that and I'll put a link to
Vì vậy, nếu bạn sẽ có mặt vào khoảng tháng Sáu, ngày diễn ra sự kiện CSS, tôi rất hào hứng về điều đó và tôi sẽ để một liên kết đến
7
that in the description in case you want to check it out.
đó là trong phần mô tả nếu bạn muốn xem qua.
8
There is CSS day which is happening and the prices are going up in like a month.
Sự kiện CSS Day đang diễn ra và giá vé sẽ tăng lên trong khoảng một tháng nữa.
9
So if you're going to convince your boss to send you, now would be a good time to do it.
Vì vậy, nếu bạn muốn thuyết phục sếp cho bạn đi tham dự, bây giờ là lúc thích hợp để làm điều đó.
10
And there's also the Web We Want conference.
Và còn có hội nghị Web We Want nữa.
11
It's a free conference happening either the day before or after CSS day.
Đó là một hội nghị miễn phí diễn ra vào ngày trước hoặc ngày sau ngày diễn ra CSS.
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.
Tôi luôn quên đó là cái nào, nhưng tôi sẽ để link đến cái đó để đề phòng vì tôi biết các hội nghị thường có thể rất đắt đỏ.
13
They're putting on an amazing event.
Họ đang tổ chức một sự kiện tuyệt vời.
14
So if you are in the Amsterdam area, I'd recommend you check that out as well.
Vì vậy, nếu bạn đang ở khu vực Amsterdam, tôi khuyên bạn cũng nên thử xem qua nơi đó.
15
But you're not here for that.
Nhưng bạn không đến đây vì chuyện đó.
16
You're here to learn about breakpoints.
Bạn đang ở đây để tìm hiểu về các điểm ngắt (breakpoint).
17
And I talked all about some of this stuff at the conference.
Và tôi đã nói tất cả về một số vấn đề này tại hội nghị.
18
My talk is about container queries being amazing.
Bài nói của tôi là về việc container queries thật sự tuyệt vời.
19
We're going to see why, or this is at least one example of them.
Chúng ta sẽ cùng tìm hiểu lý do tại sao, hay ít nhất đây là một trong những ví dụ về điều đó.
20
And don't, if you're like, oh, container queries, I'm here for media query stuff.
Và đừng vội nghĩ rằng, ồ, container query thì tôi chỉ quan tâm đến những thứ liên quan đến media query thôi.
21
Container queries have fantastic support now.
Hiện tại, container queries đã được hỗ trợ rất tốt.
22
So please don't just run away.
Vì vậy xin đừng cứ thế chạy trốn.
23
They are baseline widely available and support numbers in general are quite good for it.
Chúng là những sản phẩm cơ bản được phân phối rộng rãi và nhìn chung, các số liệu hỗ trợ cho chúng khá tốt.
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.
Vậy hãy cùng xem tại sao chúng thật tuyệt vời, hay ít nhất là một trong những lý do khiến chúng tuyệt vời, bạn có thể thấy tôi đã thiết lập cột flex ngay tại đây.
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.
Và khi tôi thay đổi, bạn thấy đấy, cái này trông ổn đấy, và tôi đang thực hiện ở mức 50 rem, con số này hơi ngẫu nhiên thôi, nhưng ban đầu tôi đang thực hiện việc này bằng một media query.
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.
Và lý do tôi làm vậy là vì tôi muốn chứng minh rằng nếu bạn thay đổi kích thước phông chữ của HTML, nó sẽ không làm thay đổi điểm ngắt.
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.
Bởi vì mặc dù cái này được đặt thành rem, nhưng khi bạn sử dụng media query, các media query là một quy tắc at hoạt động giống như phạm vi toàn cục.
28
So they can't actually see what's happening inside of selectors.
Vì vậy, họ thực sự không thể thấy những gì đang diễn ra bên trong các bộ chọn (selector).
29
And that means you can see here, I've actually like broken my layout, right?
Và điều đó có nghĩa là bạn có thể thấy ở đây, tôi thực sự đã làm hỏng bố cục của mình rồi đúng không?
30
I have horizontal scrolling because the three columns are so narrow with such a big font size.
Tôi bị cuộn ngang vì ba cột quá hẹp trong khi kích thước phông chữ lại lớn như vậy.
31
It's exaggerated for demo purposes, but that's fine.
Nó được cường điệu hóa cho mục đích trình diễn, nhưng điều đó cũng không sao.
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.
Nếu chúng ta kéo xuống đây, và thực ra là không phải xuống đến đây, nếu tôi mở ra và xem trong mã HTML của mình, tất cả những thứ này đều nằm bên trong thẻ article, hoặc thậm chí là thẻ main.
33
Let's use our main this time.
Lần này chúng ta dùng tài khoản chính nhé.
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,
Tôi đã dùng thuộc tính article khi thực hiện việc này trên sân khấu, nhưng bây giờ chúng ta sẽ chuyển nó sang phần main, và chúng ta sẽ nói rằng đây là một loại container có kích thước nội tuyến.
35
because if you are using container queries, you do have to define a container somewhere.
vì nếu bạn đang sử dụng container queries, thì bạn phải định nghĩa một container ở đâu đó.
36
This is one of the limitations of using container queries.
Đây là một trong những hạn chế khi sử dụng container query.
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.
Và điều đó có nghĩa là bây giờ trình duyệt không chỉ nhìn thấy kích thước của phần tử main mà còn nhìn thấy cả kích thước phông chữ của phần tử main nữa.
38
So if I come down and I switch this media for an at container, the breakpoint is going to update.
Vì vậy, nếu tôi đi xuống và chuyển phương tiện này thành một at-container, thì điểm ngắt sẽ được cập nhật.
39
And now we see it's all the way out here instead
Và bây giờ chúng ta thấy nó lại nằm tận ngoài đây thay vì ở chỗ cũ.
40
because it's gotten as the rem has gotten bigger on my project.
vì giá trị rem trong dự án của tôi đã tăng lên.
41
And I'm doing this on my HTML.
Và tôi đang làm điều này trên trang HTML của mình.
42
I could be doing this on the main or other elements as well, and it's going to see the font size.
Tôi cũng có thể thực hiện việc này trên phần tử main hoặc các phần tử khác, và nó sẽ nhận diện được kích thước phông chữ.
43
It's just inheriting down into the main, so it's working fine.
Nó chỉ được kế thừa xuống phần main thôi, nên mọi thứ vẫn hoạt động bình thường.
44
But yeah, it's updated and it's moved the breakpoint all the way out to here.
Nhưng đúng vậy, nó đã được cập nhật và nó đã di chuyển điểm ngắt ra tận đây.
45
And you came here going, well, Kevin, you said no more magic numbers.
Và bạn đến đây rồi nói rằng, ừ thì Kevin, anh đã nói là không còn những con số kỳ diệu nữa mà.
46
And this is a magic number.
Và đây là một con số kỳ diệu.
47
It's just not in pixels.
Nó chỉ là không ở trong các pixel thôi.
48
It's in rem instead.
Thay vào đó, nó là quyền đối với tài sản.
49
And you would definitely be right.
Và chắc chắn là bạn hoàn toàn đúng.
50
It is a magic number.
Đó là một con số kỳ diệu.
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.
Nhưng chúng ta có thể thay đổi điều này để sử dụng một đơn vị thông minh hơn hoặc một đơn vị ưu tiên nội dung, mà theo tôi đó chính là CH.
52
And I'm going to say 90 CH.
Và tôi sẽ nói là 90 CH.
53
You may go, why would you do 90 CH, Kevin?
Mày được rồi, sao mày lại làm 90 CH vậy Kevin?
54
That seems just as magic of a number, but it's not.
Con số đó có vẻ cũng kỳ diệu không kém, nhưng thực ra thì không phải vậy.
55
The ch character, if you don't know it, is the width of a character of your font and all of that.
Ký tự ch, nếu bạn chưa biết, thì nó có chiều rộng bằng với chiều rộng của một ký tự trong phông chữ của bạn và tất cả những thứ tương tự.
56
So right now it's at this 1.5 rem size based on the font that I'm using.
Vì vậy, hiện tại nó đang ở kích thước 1.5 rem dựa trên phông chữ mà tôi đang sử dụng.
57
It's going 90 characters wide.
Nó đang có chiều rộng 90 ký tự.
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.
Và lý do tại sao đây là điểm ngắt theo nội dung ngay bây giờ, hãy xem nó ở đâu, là nó sẽ xảy ra khi chúng ta có khoảng 90 ký tự.
59
This is an approximation.
Đây là một giá trị xấp xỉ.
60
So if you actually take the time to count this, it probably won't be exactly 90 but it's an approximation and
Vì vậy, nếu bạn thực sự dành thời gian đếm số lượng này, có lẽ nó sẽ không chính xác là 90 mà chỉ là một con số ước tính thôi.
61
that reason this is a cool break point to have is
lý do mà đây là một điểm ngắt tuyệt vời để có được là
62
that means this is happening
điều đó có nghĩa là chuyện này đang xảy ra
63
when I'm about 30 for each one of these 30 characters wide for each column
khi tôi khoảng 30 tuổi, mỗi cột trong số này sẽ có chiều rộng là 30 ký tự.
64
and that's a really smart break point to have because
và đó là một điểm ngắt thực sự thông minh cần có bởi vì
65
that means we're hitting this like smallish area where things are getting too squished
điều đó có nghĩa là chúng ta đang tác động vào một khu vực khá nhỏ này, nơi mọi thứ đang bị nén quá chặt.
66
because minimum line lengths 25 to 30 characters is getting pretty narrow
vì độ dài dòng tối thiểu từ 25 đến 30 ký tự đang trở nên khá hẹp.
67
and that's about as small as you can get unless you're just on a mobile device
và đó là kích thước nhỏ nhất mà bạn có thể nhận được trừ khi bạn chỉ đang sử dụng thiết bị di động.
68
and you don't have a choice and you have to go narrower.
và bạn không có lựa chọn nào khác và buộc phải thu hẹp lại.
69
But if you do have a choice, you probably don't want to get smaller than that.
Nhưng nếu bạn có sự lựa chọn, có lẽ bạn không muốn có kích thước nhỏ hơn mức đó.
70
So instead of guessing at a random number, you can use something like the 90 CH.
Vì vậy, thay vì phải đoán một con số ngẫu nhiên, bạn có thể sử dụng thứ gì đó như 90 CH.
71
And then if I come up to here
Và rồi nếu tôi đi đến đây
72
and I change this back down to a one rem or whatever size you need for your project, it's going to adapt.
và tôi sẽ điều chỉnh nó trở lại thành một rem hoặc bất kỳ kích thước nào bạn cần cho dự án của mình, nó sẽ tự động thích ứng.
73
And now that breakpoints over here instead.
Và bây giờ thì các điểm dừng đang ở đây thay thế.
74
And it's always going to be when we're hitting about 30 characters size for each one.
Và điều đó sẽ luôn xảy ra khi chúng ta đạt đến kích thước khoảng 30 ký tự cho mỗi mục.
75
Plus we have like the padding on stuff.
Thêm vào đó, chúng ta còn có lớp đệm trên các sản phẩm nữa.
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,
Vì vậy, đây là một sự ước tính tổng quát, nhưng chúng ta thực hiện việc này không chỉ dựa trên một con số kỳ diệu ngẫu nhiên nào đó mà điểm ngắt truy vấn phương tiện sử dụng.
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,
nơi bạn có thể lấy nó từ các điểm ngắt của Tailwind hoặc các điểm ngắt của Bootstrap, hoặc bạn chỉ đang tự nghĩ ra một cái gì đó, làm cho nó lớn hơn, nhỏ hơn, tìm ra xem nó hoạt động ở đâu,
78
you can actually make informed decisions based on the content, which I love.
bạn thực sự có thể đưa ra những quyết định có cơ sở dựa trên nội dung, điều mà tôi rất thích.
79
This is such a fun way to work, in my opinion.
Theo tôi, đây là một cách làm việc thật thú vị.
80
And I really like this pattern.
Và tôi thực sự thích họa tiết này.
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,
Đây là một trong những cách tôi thích nhất để sử dụng hàng rào chứa ngay bây giờ, mặc dù còn có những thứ thực sự thú vị khác mà chúng ta có thể làm với nó, chẳng hạn như phát hiện quấn, một tính năng thực sự hấp dẫn.
82
knowing when something is wrapping based on an intrinsic breakpoint that you might have.
biết khi nào một thứ sẽ bị xuống dòng dựa trên điểm ngắt nội tại mà bạn có thể có.
83
And I looked at that last week.
Và tôi đã xem xét điều đó vào tuần trước.
84
That video is right here for your viewing pleasure or link down in the description if you need it over there.
Video đó nằm ngay đây để bạn xem cho vui, hoặc có liên kết ở bên dưới phần mô tả nếu bạn cần xem ở đó.
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.
Tải Ứng Dụng
Mọi thứ bạn cần để nói trôi chảy
Chấm điểm AIChấm từng câu nói
Luyện IPAThành thạo mọi âm
Từ vựngMở rộng vốn từ
Game Từ vựngHọc qua chơi
Cùng kênh
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
Video gợi ý
C12
151 câu
We've got separation of concerns wrong
Daily ConversationUniversity StudentsWorking Adults
C11
184 câu
10 Essential React Native Tips Every Developer Must Know
Daily ConversationUniversity StudentsWorking Adults
C11
78 câu
How I deploy serverless containers for free
Daily ConversationUniversity StudentsWorking Adults
B21
30 câu
Video
Daily ConversationWorking Adults
C14
321 câu
8 Tech Choices to Lock In Before Agentmaxxing
Daily ConversationWorking Adults
C11
218 câu
Next.js 16.3 got good (if you care)
Daily ConversationWorking Adults
C11
108 câu
How I Learned Procedural Generation
Daily ConversationUniversity StudentsWorking Adults
C11
358 câu
It’s not just you
Daily ConversationUniversity StudentsWorking Adults
C12
139 câu
Does Anyone Use JavaScript Anymore?
Daily ConversationWorking Adults
B2178 câu
Be more private.
Daily ConversationWorking Adults
Bối cảnh & Nền tảng
Trong video này, người nói chia sẻ về những trải nghiệm của mình tại hội nghị Smashing Conf ở Amsterdam, nơi họ đã gặp gỡ nhiều người tuyệt vời và trao đổi về các chủ đề thiết kế web hiện đại. Điểm nhấn của cuộc hội thảo là các truy vấn container và cách chúng cải thiện khả năng làm việc của thiết kế web. Mặc dù video đề cập đến những khái niệm phức tạp trong lập trình, nó mang lại một cái nhìn thú vị cho những ai đang muốn tìm hiểu sâu hơn về CSS và cách hoạt động của breakpoints.
5 Câu Chuyện Chính Trong Giao Tiếp Hàng Ngày
- “Cảm ơn bạn đã có mặt ở đây.” – Một cách lịch sự để mở đầu cuộc trò chuyện.
- “Tôi rất vui được gặp mọi người.” – Thể hiện sự thân thiện và cởi mở với khán giả.
- “Nếu bạn có thời gian, hãy tham gia hội nghị này.” – Khuyến khích người khác tham gia vào những hoạt động hữu ích.
- “Thời gian trước, tôi đã có một trải nghiệm tuyệt vời ở Amsterdam.” – Chia sẻ trải nghiệm cá nhân để tạo sự kết nối.
- “Đây là một khái niệm thú vị mà tôi và mọi người thảo luận.” – Truyền đạt thông tin quan trọng một cách hấp dẫn.
Hướng Dẫn Shadowing Bước Từng Bước
Để cải thiện kỹ năng phát âm tiếng anh chuẩn và kỹ năng giao tiếp, bạn có thể áp dụng phương pháp shadowing tiếng anh thông qua video này:
- Xem video lần đầu: Chỉ nên tập trung vào nội dung, không cần phải ghi nhớ mọi từ ngữ.
- Xem lại và nghe lại: Từ đoạn video, ghi chú những cụm từ giao tiếp quan trọng đã nêu. Bạn có thể sử dụng luyện nghe nói qua video để cải thiện khả năng nghe.
- Bật phụ đề phụ: Nếu có, để hỗ trợ trong việc theo dõi những câu nói. Chú ý cách phát âm và ngữ điệu.
- Bắt đầu shadow speech: Nhắc lại từng câu, cố gắng bắt chước ngữ điệu và tốc độ. Đây là một cách tuyệt vời để luyện nói tiếng anh.
- Luyện tập thường xuyên: Lặp lại quy trình này cho tới khi bạn cảm thấy tự tin về việc phát âm và giao tiếp ở những câu hỏi hay chủ đề tương tự.
Thông qua việc luyện tập đều đặn với cách thức này, bạn sẽ nhanh chóng cải thiện kỹ năng tiếng anh của mình và có thể áp dụng thành công trong các tình huống giao tiếp hàng ngày.
Phương Pháp Shadowing Là Gì?
Shadowing là kỹ thuật học ngôn ngữ có cơ sở khoa học, ban đầu được phát triển cho chương trình đào tạo phiên dịch viên chuyên nghiệp và được phổ biến rộng rãi bởi nhà đa ngôn ngữ học Dr. Alexander Arguelles. Nguyên lý cốt lõi đơn giản nhưng cực kỳ hiệu quả: bạn nghe tiếng Anh của người bản xứ và lặp lại to ngay lập tức — như một "cái bóng" (shadow) đuổi theo người nói với độ trễ chỉ 1–2 giây. Khác với luyện ngữ pháp hay học từ vựng bị động, Shadowing buộc não bộ và cơ miệng phải đồng thời xử lý và tái tạo ngôn ngữ thực tế. Các nghiên cứu khoa học xác nhận phương pháp này cải thiện đáng kể phát âm, ngữ điệu, nhịp điệu, nối âm, kỹ năng nghe và độ lưu loát khi nói — đặc biệt hiệu quả cho người luyện IELTS Speaking và muốn giao tiếp tiếng Anh tự nhiên như người bản ngữ.