Shadowing Practice: We've got separation of concerns wrong - Learn English Speaking with Video
Ders oluşturuluyor...
1
People like to talk about the separation of concerns, especially when it comes to web development, in a really rigid way.
2
HTML is for the content, CSS is for making things look pretty, and JavaScript is for handling the behavior and everything else that we can't do with those other things, I guess.
3
But the fun thing, at least in my experience being a CSS guy, is most of the time when I hear people saying, Oh, separation of concerns, you shouldn't be doing it that way, comes up when somebody is going,
4
Oh, you shouldn't be using CSS for that, that's the job of JavaScript.
5
but then they often ignore all the things they're doing with JavaScript that probably should be done by CSS.
6
And this happens, or has at least happened for a long time now, because we just didn't have a choice.
7
There was a lot of things that you couldn't do with CSS, so you had to do it with JavaScript, and that sort of just stuck around a lot.
8
And there's some things that slowly shifts and moves around a little bit, and we get new things in CSS that nobody's complaining about, like, I don't know, anchor positioning, scroll driven animations.
9
I think we realize that's just styling related.
10
So that's completely fine.
11
But as CSS is getting all of these new features and becoming more powerful, especially in my comments section and just through conversations I've had with developers,
12
I keep hearing that CSS is starting to overstep its bounds.
13
And so much so that it actually inspired my talk that I just got back from at CSS Day, which was an absolute blast.
14
So much fun.
15
So amazing seeing so many people.
16
But yeah, it was I got inspired at least partially for what I was talking about in
17
that one where I was actually saying, well, things are going to change.
18
We're going to push more towards CSS and why that's actually a good idea in my talk.
19
But one thing that actually came up was Jeremy Keith came to see me and he was like, oh, Kevin, a really good talk, awesome stuff.
20
But I wanted to let you know that this conversation has been going on forever, which I sort of I'm aware of, but not to the extent that he let me know about because he actually put a blog post out in 2004.
21
So it's 22 years ago, which is crazy, where this whole separation of concerns thing was coming up
22
because hover was part of css and whether
23
or not it should only be for links or
24
if you could use hover anywhere
25
and people were like oh wait hover hover should be the
26
world of javascript that's behavior you're you're what the user's doing on the page
27
that shouldn't be on css i'll put a link to his article in the description
28
because it is kind of cool to like look back on on these types of conversations i think
29
and it's just it's funny how i guess it just never goes away
30
but i think the main thing is with all of this
31
is like clearly I think most people these days see hover as a styling related thing.
32
Yes, it's behavior, but it's also style.
33
And I think that's the whole problem with separation of concerns in the first place.
34
The idea of HTML, CSS, and JavaScript being these three things where we're separating into content styling and logic and behavior and all of that,
35
I think is just flawed.
36
And I don't think it really even encapsulates the idea of what separation of concerns is
37
when it comes to programming in general, where it's mostly about simplifying things.
38
Now, you see this in JavaScript.
39
If you're doing good, you're writing good JavaScript, you're separating things as much as possible, right?
40
You want one function to do one thing and not handle seven different things.
41
That's separation of concerns.
42
And that's something we should be doing when you're writing JavaScript or any language whatsoever.
43
But somehow we got this idea of HTML being content, CSS being styles, and JavaScript being the rest, right?
44
But the problem was JavaScript just filled in all the blanks
45
of the things we haven't been able to do with the other languages.
46
And now that things are changing, people are like, oh, a separation of concerns.
47
That's not how we should be doing things.
48
And it's like, no, it's not how we should be doing things.
49
It's, well, we haven't been doing it that way before because we had no other choice.
50
And it's just, there's this evolution that's going to continue to happen.
51
And I really think that we shouldn't be worried about it in that way because there is so much overlap.
52
A scroll driven animation, for example, is behavior.
53
It's the user scrolling on the page, going up and down, just like a hover would be.
54
So should that be in JavaScript or should that be in CSS only?
55
Well, I think it makes a lot of sense to be in CSS only.
56
I think anyone who's written the JavaScript to create scroll driven animations is probably happy it's only in CSS now
57
because it simplifies our life so much going from a lot of code to a few lines of CSS.
58
But it also increases performance
59
because we're not relying on JavaScript to be constantly figuring things out
60
and tracking our scroll position everywhere we're going and relaying
61
that over to our styles and updating inline styles and all of that.
62
It's a lot of work and now we can just let the browser pass that information directly through.
63
And to me, that is separation of concerns.
64
In a big way, we're simplifying things.
65
We're getting the information directly from the browser.
66
Invoker commands are very similar, right?
67
An invoker command allows us to open a modal or a dialog without any JavaScript.
68
You make a button, you make a dialog, you link them with a couple of attributes, which makes sense.
69
That's the realm of content.
70
Let's connect them through an attribute.
71
I don't see anything wrong with that.
72
We used to have to do the exact same thing in JavaScript, but you'd make your two elements, go and find them and then link them.
73
Why not just do that?
74
So we're simplifying the problem.
75
We're separating the concerns.
76
We're saying this button and this dialog or this modal are connected to one another.
77
We've simplified the matter.
78
And then when it opens, we style what it looks like with CSS.
79
Why do we need JavaScript?
80
We don't.
81
And it's not because it's behavior related, it's because we're trying to simplify the situation.
82
And we're making this button and thing that's being opened into this self-contained thing.
83
That's separation of concerns.
84
And sometimes with an invoker command, you might need some JavaScript.
85
And that's completely fine.
86
That API is available to do some extra things with, including creating custom commands.
87
Because I believe we can only do modals and popovers with the built-in invoker commands, but we can create custom ones for other types of things you might want to do.
88
Maybe a button to play a video or go full screen or other things like that, that for whatever reason you need your own button for, where you can make an invoker command for that now.
89
And that just simplifies everybody's life.
90
And a little bit of JavaScript is there just to actually add that extra functionality into there, but it's all part of that same system.
91
And I think looking at things in that way makes a lot more sense.
92
But instead of getting all excited about how we're starting to simplify things in many ways, in other ways, the web is getting more complicated
93
because of all of these things that are coming in and these new capabilities that we do have.
94
But there is a simplification in another way.
95
I don't know.
96
Maybe that's a topic for another day.
97
But instead of getting excited about, yeah, that's really cool.
98
People are like, oh, you shouldn't be opening a button with HTML.
99
You know, separation of concerns.
100
This is a problem.
101
And well, is it really, though, making life easier?
102
Is it a problem?
103
or is it just that they're not happy
104
that we're doing it in a different way than they've been told this is how we do things
105
and then they get frustrated and they say this is the wrong direction that things shouldn't be going that way.
106
I think just because we've been so trained on thinking of HTML, CSS and JavaScript in the buckets we have been.
107
And even if you think of it in more of a component-based system, you have your component file and all of the stuff for that component lives in that one file.
108
That's a separation of concerns in many ways
109
And that's why I think component based architectures become so popular because we're keeping everything self-contained, which makes a lot of sense.
110
But then what each one of the languages is doing there, it's handling its job.
111
But again, there's this gray zone, the overlap between what's behavior, what's styling, when should it be styling related, when should it be the behavior as much as possible.
112
I'm a strong believer being a CSS person that if this logic
113
or anything related to what's happening changes how the user sees it, it's updating the visual of it, well then as much of that should be done in CSS.
114
Because to me that makes sense, that's its domain.
115
But again, maybe I'm getting stuck there, I don't know.
116
Maybe it's just because I like CSS a lot.
117
But yeah, if we look at things more in that context, I think that's more of what separation of concerns should be, where we're looking at the element,
118
we're doing it as simply as possible within those languages that we have and in the way those work, instead of being so focused on, well, this is for this one purpose, this is for this other purpose.
119
And this all does raise another question, though, that I'm not too sure about.
120
And this is the one part in these videos I've started asking for what you guys think
121
and the comment sections have been fantastic.
122
So we're going to continue that on this
123
because I don't know what the answer is in terms of how AI is going to impact everything.
124
I wanted to make sure this video wasn't AI focused, but I do have a question on how you think this will be impacted
125
because AI has been trained on like millions of lines of code the way things have traditionally been done.
126
And the web's changed a lot in the last like two years.
127
There's a lot of features that are coming, invoker commands, popovers, dialogues all these things, the modals that we have now,
128
scroll-driven animations, anchor positioning, the list goes on and on and on and on, that aren't really part of those code bases.
129
And I know there's, you know, Google has their modern web thing
130
that can sort of help steer the direction a little bit
131
that I'm not 100% sure is as good as they want us to think.
132
But at least there are these things to say, oh, use these modern features and here's what they do.
133
But if people aren't writing as much of the code themselves, there's less concern about the architecture of that code and who cares
134
if we're doing it in a more complex way
135
that works i mean some people do because there's performance impacts
136
and we should probably be focused primarily on performance uh
137
which often goes by the wayside with ai but uh
138
if people are writing less code themselves is does this potentially
139
lead to a stagnation of all of our languages right
140
because it we have ways of doing things you ask it
141
to do it it can create some stuff you go in you tweak you massage it, you get it to go where you want it to be.
142
But if there's people like me, we continue writing code on our own.
143
And I know a lot of people listening to this are probably in the same boat.
144
But if there's less people doing that, does it put less pressure for the languages to continue to evolve or not?
145
This is a question that a few people asked me at CSS Day that I didn't really have an answer for.
146
It could be one of those unforeseen things that ends up happening, or maybe we continue to evolve or evolves in different ways.
147
Whatever it is, I'd love to to know what you think about
148
that and I'll probably talk about it in a future video.
149
And I think for today that is it.
150
So thank you very much for listening.
151
And of course until next time don't forget to make your corner of the internet just a little bit more awesome.
📺 Aynı Kanal
✨ Video Öner
B27
91 cümleler
No more magic numbers for your breakpoints
Business EnglishUniversity StudentsWorking Adults
B21
494 cümleler
The Leadership Skills We’ll Need Most When Everything Is Changing: Me2We 2026
Business EnglishUniversity StudentsWorking Adults
B21
22 cümleler
I'm an ex-Google interviewer. You're doing LeetCode wrong.
Business EnglishInterview EnglishUniversity Students
B21
417 cümleler
Daily English - You Don’t Have to Be Perfect to Be Proud - Intermediate English Podcast
Business EnglishDaily ConversationUniversity Students
B21
269 cümleler
Design with Claude Code: The Designer’s Guide
Business EnglishUniversity StudentsWorking Adults
C11
180 cümleler
Armchair Architects: Resiliency in the Cloud – Core Patterns
Business EnglishUniversity StudentsWorking Adults
B28
194 cümleler
Discipline really is this simple - Steven Bartlett’s Rule
Business EnglishUniversity StudentsWorking Adults
B21
191 cümleler
I Rebuilt My Entire Website in Astro… Was It Worth It?
Business EnglishUniversity StudentsWorking Adults
B22
185 cümleler
Use these CSS features instead of JavaScript
Business EnglishUniversity StudentsWorking Adults
B21
248 cümleler
YOU'RE STYLING SNEAKERS WRONG
Business EnglishUniversity StudentsWorking Adults
B21
583 cümleler
Episode 531: Shallow feedback and my coworker is a huge sloperator
Business EnglishUniversity StudentsWorking Adults
Bu dersin kelimeleri ve konuşma notları
Bu B2 seviyesindeki konuşma dersi “We've got separation of concerns wrong” videosuna dayanıyor. En çok tekrarlanan kelimeler: css, javascript, concern, separation. Bu videoda gölgeleme çalışması için 151 cümle ve 2196 kelime var. Konuşma bölümü 10:07 sürüyor. Konuşmacı hızlı konuşuyor, dakikada yaklaşık 217 kelime; bu yüzden birbirine bağlanan ve zayıflayan sesler duyacaksınız. Kelimelerin %85’i İngilizcede en sık kullanılan 3.000 kelime arasında; geri kalanına başlamadan önce bakmakta fayda var.
Bu videodaki önemli kelimeler
Videodaki en ileri düzey 15 kelime, telaffuzu ve anlamıyla:
| Kelime | Telaffuz | Anlam |
|---|---|---|
| simplify fiil | /ˈsɪmplɪfaɪ/ | sadeleştirmek |
| scroll isim | /skɹoʊl/ | tomar |
| modal sıfat | /ˈməʊdəl/ | kipsel |
| animation isim | /ˌæn.ɪˈmeɪ.ʃən/ | animasyon |
| inspire fiil | /ɪnˈspaɪə(ɹ)/ | esinlemek, ilham vermek |
| anchor isim | /ˈæŋ.kəː/ | çıpa, demir |
| simplification isim | /ˌsɪm.plɪ.fɪˈkeɪ.ʃən/ | basitleştirme |
| stagnation isim | /stæɡˈneɪʃn̩/ | kış uykusu |
| believer isim | /bɪˈlivɚ/ | mümin, inanan |
| steer fiil | /stɪɹ/ | yönetmek |
| flawed sıfat | /flɔːd/ | kusurlu |
| rigid sıfat | /ˈɹɪd͡ʒ.ɪd/ | katı, sert |
| massage isim | /məˈsɑ(d)ʒ/ | masaj |
| bucket isim | /ˈbʌkɪt/ | kova |
| partially zarf | /ˈpɑɹʃəli/ | kısmen |
Tekrar etmeye değer cümleler
Videodan, günlük konuşmada yeniden kullanabileceğiniz kısa ve tam cümleler:
- I think we realize that's just styling related.
- That's not how we should be doing things.
- In a big way, we're simplifying things.
- We're getting the information directly from the browser.
- Let's connect them through an attribute.
Bu videodaki dil bilgisi
Konuşmacının en çok kullandığı yapılar, videodaki sözcüklerin aynısıyla:
| Yapı | Videoda |
|---|---|
| Present perfect continuous have/has been + -ing — önceden başlayıp hâlâ süren bir eylem | has been going · haven't been doing |
| Edilgen yapı be + fiilin üçüncü hâli — kimin yaptığı değil, ne olduğu önemli | should be done · is just flawed · are connected |
| Present perfect have/has + fiilin üçüncü hâli — geçmişte olan ama şimdi de önemli olan bir eylem | haven't been · We've simplified · they've been told |
| İlgi cümlecikleri who / which + cümle — bir kişi ya da şey hakkında ek bilgi | Day, which was · ago, which is · attributes, which makes |
Dikkat edilecek telaffuzlar
Konuşmacı we're, don't, shouldn't gibi kısaltılmış biçimleri 63 kez kullanıyor. Bunları duyduğunuz gibi kısa söyleyin.
- “sh” ve “zh” sesleri: separation /ˌsɛp.əˈɹeɪ.ʃən/, animation /ˌæn.ɪˈmeɪ.ʃən/, simplification /ˌsɪm.plɪ.fɪˈkeɪ.ʃən/, stagnation /stæɡˈneɪʃn̩/, massage /məˈsɑ(d)ʒ/
- Uzun kelimeler — vurguyu doğru yere koyun: separation /ˌsɛp.əˈɹeɪ.ʃən/, animation /ˌæn.ɪˈmeɪ.ʃən/, encapsulate /ɪnˈkæps(j)ʊˌleɪt/, simplification /ˌsɪm.plɪ.fɪˈkeɪ.ʃən/, whatsoever /ˌ(h)wʌtsoʊˈɛvɚ/
Türkçe konuşanların zorlandığı sesler:
- /w/ — dudaklar yuvarlak, /v/ değil: wayside /ˈweɪsaɪd/, whatsoever /ˌ(h)wʌtsoʊˈɛvɚ/
- Kelime başındaki ünsüz kümesi — araya ünlü eklemeyin: scroll /skɹoʊl/, browser /ˈbɹaʊ.zəɹ/, frustrate /ˈfɹʌsˌtɹeɪt/, stagnation /stæɡˈneɪʃn̩/, steer /stɪɹ/
- /æ/ — “e”den daha açık: animation /ˌæn.ɪˈmeɪ.ʃən/, overlap /ˌəʊvəˈlæp/, attribute /ˈæt.ɹɪˌbjut/, anchor /ˈæŋ.kəː/, encapsulate /ɪnˈkæps(j)ʊˌleɪt/
Bu videoyla nasıl çalışılır
- Videonun tamamını konuşmadan bir kez dinleyin ve bilmediğiniz kelimeleri not edin.
- 0,75× hızla başlayın, cümle cümle tekrar edin ve kolaylaşınca normal hıza dönün.
- Kendinizi kaydedin ve orijinaliyle karşılaştırın; simplify, scroll, modal gibi kelimelere özellikle dikkat edin.
Gölgeleme Tekniği Nedir?
Gölgeleme, başlangıçta profesyonel tercüman eğitimi için geliştirilen ve çok dilli Dr. Alexander Arguelles tarafından popüler hale getirilen, bilim destekli bir dil öğrenme tekniğidir. Yöntem basit ama güçlüdür: ana dili İngilizce olan bir sesi dinler ve hemen yüksek sesle tekrar edersiniz — konuşmacıyı 1-2 saniye gecikmeyle takip eden bir gölge gibi. Pasif dinleme veya dilbilgisi alıştırmalarının aksine, gölgeleme beyninizi ve ağız kaslarınızı gerçek konuşma kalıplarını eşzamanlı olarak işlemeye ve yeniden üretmeye zorlar. Araştırmalar, telaffuz doğruluğu, tonlama, ritim, bağlı konuşma, dinleme anlama ve konuşma akıcılığını önemli ölçüde geliştirdiğini göstermektedir — bu da onu IELTS Konuşma hazırlığı ve gerçek dünya İngilizce iletişimi için en etkili yöntemlerden biri yapar.