Is CSS a Programming Language? w/ Kevin Powell

WEBVTT
1
00:00:02.353 --> 00:00:03.740
Welcome to Syntax!
2
00:00:03.980 --> 00:00:06.959
Welcome to a brand new episode of the Front End Happy Hour podcast.
3
00:00:07.460 --> 00:00:09.980
Welcome to this week's JS party.
4
00:00:12.981 --> 00:00:17.060
Live from ShipShape Studios, this is Whiskey Web and Whatnot,
5
00:00:17.560 --> 00:00:22.359
with your hosts, Robbie the Wagner and me, Charles William Carpenter III.
6
00:00:23.722 --> 00:00:24.667
That's right, Charles.
7
00:00:24.788 --> 00:00:27.060
We drink whiskey and talk about web development.
8
00:00:27.725 --> 00:00:28.733
I mean, it's all in the name.
9
00:00:28.834 --> 00:00:29.580
It's not that deep.
10
00:00:30.161 --> 00:00:32.200
This is Whiskey Web and Whatnot.
11
00:00:32.562 --> 00:00:34.019
Do not adjust your set.
12
00:00:36.706 --> 00:00:37.380
What's up, everybody?
13
00:00:37.580 --> 00:00:40.440
Robbie the Wagner here, wanting to invite you to come hang out with us
14
00:00:40.540 --> 00:00:43.160
as we record some live podcasts at All Things Open.
15
00:00:43.801 --> 00:00:46.580
It's October 12th to 14th in Raleigh, North Carolina.
16
00:00:47.122 --> 00:00:50.220
I know that's coming up, so hopefully you can still make it there.
17
00:00:50.361 --> 00:00:51.320
We'd love to see you there.
18
00:00:51.841 --> 00:00:53.920
It's a cool conference, has thousands of attendees,
19
00:00:54.261 --> 00:00:59.640
over 150 amazing speakers like Shruti Kapoor, Jason Langsdorf, Angie Jones,
20
00:00:59.761 --> 00:01:01.820
Taylor Dessen and Bree Hall, just to name a few.
21
00:01:02.461 --> 00:01:05.200
Tons of huge sponsors, a bunch of big companies you've probably heard of,
22
00:01:05.341 --> 00:01:06.640
all giving away cool swag.
23
00:01:06.840 --> 00:01:08.620
Everyone gave away Lego sets last year.
24
00:01:08.740 --> 00:01:11.840
Lots of cool stuff you can get and you can network if you need a job
25
00:01:11.983 --> 00:01:12.840
or just want to hang out.
26
00:01:13.700 --> 00:01:17.560
It's a cool city, has a lot of good barbecue, a bow and beer place,
27
00:01:17.600 --> 00:01:19.680
and I got fried okra for breakfast once even.
28
00:01:19.920 --> 00:01:21.880
Like, food's good, vibe is good.
29
00:01:22.561 --> 00:01:23.820
Definitely recommend you check it out.
30
00:01:23.960 --> 00:01:28.040
If you'd like to come join us, go to whiskey.fm slash contact
31
00:01:28.261 --> 00:01:32.860
and contact us and we'll give you some free tickets we got 10 free tickets you can also
32
00:01:33.061 --> 00:01:38.440
hit us up on social media or wherever and um yeah we hope to see you there hey what's up everybody
33
00:01:38.781 --> 00:01:46.460
welcome to whiskey web and whatnot with your hosts robbie the wagner and adam thomas argyle the nerd
34
00:01:48.024 --> 00:01:54.020
yeah we found one yeah that's kind of like charles is uh but you know it's a little more nerdy i'm
35
00:01:54.040 --> 00:01:56.440
Not a third, but well done.
36
00:01:56.923 --> 00:01:58.900
On the show today, we have Kevin Powell,
37
00:01:59.340 --> 00:02:03.980
Twitcher, tuber, teacher, hacker, speaker, writer, instructor, and influencer.
38
00:02:04.381 --> 00:02:07.600
Most known for his YouTube channel, host of the General Musings podcast,
39
00:02:08.020 --> 00:02:11.760
instructor on Front End Masters, a front-end friend making his corner of the internet
40
00:02:11.861 --> 00:02:14.560
just a little bit more awesome and helping people fall in love with CSS.
41
00:02:15.020 --> 00:02:16.339
Kevin Powell, everyone.
42
00:02:16.821 --> 00:02:18.460
Welcome to the Whiskey Web and Whatnot Show.
43
00:02:18.902 --> 00:02:20.020
Wow, thank you so much.
44
00:02:20.261 --> 00:02:21.760
I'm blown away a little bit by that.
45
00:02:23.387 --> 00:02:24.020
Yeah, thank you.
46
00:02:24.863 --> 00:02:29.680
i feel have a stack of compliments it's really fun to go get yeah i feel like every time i have
47
00:02:29.740 --> 00:02:33.520
a guest on now i need to step up my game because i definitely that that was awesome
48
00:02:36.509 --> 00:02:39.820
i like doing it it's from css day you were there i think when i first started doing these
49
00:02:40.181 --> 00:02:43.860
yeah they're just so fun yeah it's much more fun than i would just be like hey it's you
50
00:02:44.101 --> 00:02:48.880
what do you do tell the people and make it short because i would like this whiskey now
51
00:02:48.900 --> 00:02:58.860
yeah speaking of which let's jump into it i've got crown royal black in a little baggie as it
52
00:02:58.880 --> 00:03:03.240
always is a little baggie these are all over my dad's house because his favorite is crown royal
53
00:03:03.441 --> 00:03:07.820
and he has like every flavor and just keeps all the bags and i'm like what are you going to use
54
00:03:07.860 --> 00:03:14.580
those for i don't know but yeah so this is 90 proof it's not age stated and they don't really
55
00:03:14.640 --> 00:03:19.940
tell you what it's made of other than it's high rye canadian whiskey and it's supposedly matured
56
00:03:20.060 --> 00:03:26.040
in like darker charred barrels for longer or something which makes it darker which is why
57
00:03:26.060 --> 00:03:31.380
they call it black i guess and i should have taken this plastic off wait i can just twist it can i
58
00:03:32.042 --> 00:03:37.160
it just twists yeah they really don't put much information on the bottom right but they did have
59
00:03:37.180 --> 00:03:40.880
to say something they're like because you're like all right why is it why is it the black version
60
00:03:41.000 --> 00:03:48.120
and they were like we made it a little spicier it's darker because we put it in the thing it's
61
00:03:48.160 --> 00:03:53.620
just so vague the sentence is just so succinct it's pretty funny okay lch value can someone tell
62
00:03:53.640 --> 00:04:01.320
me oh yeah oh it's definitely got it's got a higher chroma but also less lightness you can
63
00:04:01.340 --> 00:04:06.140
tell because it's uh down there towards the darker hue or it's just kind of like darker in nature
64
00:04:06.521 --> 00:04:11.640
ooh opacity is even less it's it's like it's crown black maybe it is a little darker
65
00:04:14.268 --> 00:04:18.520
oh the smell is sweet apples i was eating blackberries earlier maybe that's on my fingers
66
00:04:18.620 --> 00:04:24.740
too it smells like definitely bright fruit yeah of some kind oh bright fruit not a dark fruit
67
00:04:25.081 --> 00:04:30.340
not a dark cherry but a light cherry i'm not not really cherry i'm just saying like uh
68
00:04:31.349 --> 00:04:32.278
like citrusy,
69
00:04:32.663 --> 00:04:33.040
appley.
70
00:04:33.623 --> 00:04:34.040
I don't know.
71
00:04:34.201 --> 00:04:36.500
Not like a blackberry pie per se.
72
00:04:37.461 --> 00:04:37.546
Ooh,
73
00:04:38.063 --> 00:04:39.040
there's some of the blendedness.
74
00:04:39.120 --> 00:04:40.420
The initial punch was sweet,
75
00:04:41.446 --> 00:04:42.660
but it finished really spicy.
76
00:04:43.400 --> 00:04:43.491
Ooh.
77
00:04:43.926 --> 00:04:44.098
Yeah.
78
00:04:44.265 --> 00:04:44.355
Wow.
79
00:04:44.460 --> 00:04:47.500
This is much different than normal crown Royal actually has some whiskey
80
00:04:47.647 --> 00:04:47.899
flavor,
81
00:04:48.563 --> 00:04:50.300
which the crown Royal typically doesn't.
82
00:04:50.360 --> 00:04:51.260
It's just super sweet.
83
00:04:51.304 --> 00:04:51.438
It's,
84
00:04:51.523 --> 00:04:51.920
it's yummy,
85
00:04:52.100 --> 00:04:52.660
but it's like,
86
00:04:52.940 --> 00:04:54.020
it doesn't really taste like whiskey.
87
00:04:54.400 --> 00:04:54.675
Interesting.
88
00:04:55.000 --> 00:04:55.540
This is not bad.
89
00:04:55.661 --> 00:04:56.320
This is enhanced.
90
00:04:56.460 --> 00:04:56.920
This is better.
91
00:04:58.005 --> 00:04:58.880
What am I going to do with this bag?
92
00:04:58.980 --> 00:05:05.620
I can't let my kids have it because I just trauma from when I was in high school and all the different paraphernalia people had in their crown bags.
93
00:05:05.842 --> 00:05:06.900
It's like all that was good for.
94
00:05:08.283 --> 00:05:10.440
I just remember they would stink so bad and be like, hey, what's in that bag?
95
00:05:10.841 --> 00:05:11.480
Dang, bro.
96
00:05:11.701 --> 00:05:12.720
Jeez, my goodness.
97
00:05:12.860 --> 00:05:14.440
That is a gnarly bag.
98
00:05:15.101 --> 00:05:16.879
Too naive and more than to know what's going on.
99
00:05:18.002 --> 00:05:18.600
I'm sure it did.
100
00:05:18.680 --> 00:05:19.260
I just didn't know.
101
00:05:20.423 --> 00:05:21.240
Oh, I forgot to toast.
102
00:05:21.441 --> 00:05:22.180
Oh, I wrote a toast.
103
00:05:22.363 --> 00:05:22.480
Okay.
104
00:05:22.620 --> 00:05:30.980
So before we take our first sip, everyone, we toast at the precipice of a momentous occasion
105
00:05:31.122 --> 00:05:32.220
for our dear friend, Kevin.
106
00:05:32.881 --> 00:05:37.880
His channel, a testament to his wit and wisdom, is on the verge of a 1 million subscribers
107
00:05:38.524 --> 00:05:41.380
and 100 million video view.
108
00:05:42.081 --> 00:05:45.540
May your creative spirit continue to burn bright, Kevin, and may your journey to 1 million
109
00:05:45.641 --> 00:05:48.619
subscribers be but the first of many such triumphs.
110
00:05:49.382 --> 00:05:56.480
we also toast me as i embark on a new journey at shopify i toast for one a milestone reached
111
00:05:56.741 --> 00:06:01.640
and another a path newly forged cheers my friends you're here
112
00:06:05.368 --> 00:06:11.240
that's fun that was really cool that is fun once again in case now should we also forget
113
00:06:11.300 --> 00:06:14.059
a bunch of other things in the notes and like skip to something else real quick or
114
00:06:17.109 --> 00:06:20.880
no now's now's when we rate it right so that we can get past the rating to get into i was
115
00:06:20.900 --> 00:06:27.720
gonna actually forget the rating oh yeah okay so on this podcast very stringent rating system
116
00:06:27.961 --> 00:06:33.940
zero to eight tentacles zero being the worst eight being the best four or five or somewhere
117
00:06:34.040 --> 00:06:38.540
in there being middle of the road yeah if you hate it wouldn't even clean your toilet with it
118
00:06:38.700 --> 00:06:42.880
zero if you would want to not drink anything else forever it's an eight what do you think adam
119
00:06:43.301 --> 00:06:48.820
this is in the this is a good sixes maybe a high six maybe like a six and three quarters maybe even
120
00:06:48.880 --> 00:06:55.640
a seven like it's very drinkable it has a good burn so we're at a good 45 it's got a good whiskey
121
00:06:55.740 --> 00:07:01.620
flavor like you're saying but the initial hit is kind of sweet it's quite nice so oh i need to say
122
00:07:01.660 --> 00:07:06.040
a specific number i'm gonna let's do seven i think this is good i would bring i would whip this out
123
00:07:06.080 --> 00:07:11.279
for friends and be like it's a crown black night y'all nice kevin what do you think yeah i was
124
00:07:11.862 --> 00:07:12.945
pleasantly surprised by it.
125
00:07:13.126 --> 00:07:15.635
I'm not a huge fan of the regular one.
126
00:07:16.016 --> 00:07:17.200
Like you said, it's too sweet
127
00:07:17.280 --> 00:07:17.601
for me.
128
00:07:17.661 --> 00:07:21.052
This one has a little bit more to it, but it's really drinkable.
129
00:07:21.453 --> 00:07:23.760
So yeah, I was thinking
130
00:07:23.901 --> 00:07:24.242
six.
131
00:07:24.523 --> 00:07:26.210
Adam might be swaying me up to a seven.
132
00:07:26.632 --> 00:07:27.275
Six and a half?
133
00:07:27.315 --> 00:07:28.560
Can I go with half grades or do you
134
00:07:28.560 --> 00:07:28.741
need?
135
00:07:28.901 --> 00:07:29.323
You can.
136
00:07:29.584 --> 00:07:31.431
Yeah, I'd say like a six and a half for sure.
137
00:07:31.451 --> 00:07:33.177
Yeah, I really enjoyed it.
138
00:07:33.217 --> 00:07:33.880
I think it's
139
00:07:34.281 --> 00:07:34.923
very drinkable.
140
00:07:35.184 --> 00:07:36.447
Yeah, it's a good one.
141
00:07:37.490 --> 00:07:37.751
Nice.
142
00:07:38.453 --> 00:07:39.516
Yeah, I'm a little conflicted.
143
00:07:39.536 --> 00:07:40.700
I feel like in terms of
144
00:07:40.760 --> 00:07:46.560
crown royal i would give it a seven in terms of all whiskey i think six may be more appropriate
145
00:07:46.781 --> 00:07:52.680
so i'm gonna say six nice that's a good comparison yeah i was comparing it to previous ones it's good
146
00:07:52.720 --> 00:07:58.840
to put it in the grand scheme yeah yeah all right should we do a few hot takes real quick yeah
147
00:07:59.482 --> 00:08:06.200
hot take him give it to all right is css a programming language oh geez yeah i mean i have
148
00:08:06.240 --> 00:08:10.377
to say yes, because I think like, my community would abandon me if I didn't.
149
00:08:10.498 --> 00:08:10.980
But at the same
150
00:08:11.060 --> 00:08:12.927
time, like it's not a hill I would die on.
151
00:08:13.389 --> 00:08:14.493
Call it what you want to call it.
152
00:08:14.754 --> 00:08:16.019
And I enjoy it.
153
00:08:16.100 --> 00:08:16.180
I'm
154
00:08:16.200 --> 00:08:19.675
going to keep writing it whether you want to get keep on that or not.
155
00:08:19.876 --> 00:08:20.760
If that's the hill you want
156
00:08:20.760 --> 00:08:21.785
to die on, then go for it.
157
00:08:21.946 --> 00:08:23.634
I have other things I'll stress about more.
158
00:08:23.734 --> 00:08:24.940
But for me, I think it is
159
00:08:24.980 --> 00:08:29.320
and I think there's more and more arguments every day with all the new things and all the new
160
00:08:29.380 --> 00:08:33.140
features that we have with it these days, that it's hard to sort of say it's not in a lot of ways.
161
00:08:33.582 --> 00:08:37.600
yeah for sure i usually ask people if html is a programming language and i usually get
162
00:08:37.801 --> 00:08:43.640
no but then i follow up with is css one and they're like wait a minute maybe because it
163
00:08:43.680 --> 00:08:48.060
does have a lot of math and like ken wheeler's like hey that is definitely a programming language
164
00:08:48.160 --> 00:08:53.100
i've seen what the kids do with that these days like yeah i tend to agree i think you can do a
165
00:08:53.120 --> 00:08:58.419
lot it's got a ken endorsement i love it yeah it's one of those things too now where like at
166
00:08:58.720 --> 00:09:02.520
one point you could say like i feel like most of the people that are like no it's not it's just a
167
00:09:02.580 --> 00:09:05.860
the clarity of language and I'm like all you're doing is the really simple stuff with it where
168
00:09:05.940 --> 00:09:11.360
like yeah you're setting a background color like that's not very fancy like of course but I just
169
00:09:11.400 --> 00:09:15.260
think with everything you can do these days and like there's all the CSS only stuff that's out
170
00:09:15.280 --> 00:09:19.420
there but even then like even if you just go to doing like background blue like you did something
171
00:09:19.541 --> 00:09:23.400
pretty cool like I've had students like that was my favorite thing when I was teaching in the
172
00:09:23.420 --> 00:09:29.300
classroom first day of like CSS and they'd change the color of the text or a background color and
173
00:09:29.300 --> 00:09:34.240
they're so excited and they're like i did that on the computer with code and i'm like yeah that's
174
00:09:36.046 --> 00:09:39.939
and i like that you know yeah you're programming go for it like this is awesome it's the gateway
175
00:09:40.281 --> 00:09:43.860
drug and everything else you know for people that don't come from the computer science backgrounds
176
00:09:43.980 --> 00:09:49.960
i think yeah for sure good answer good answer all right adam you want to do one you want me to keep
177
00:09:50.000 --> 00:09:55.179
going yeah oh there's a couple fun ones in here i mean these let's do the hot takes yeah so was css
178
00:09:55.500 --> 00:10:02.380
and js a mistake i think so but it wasn't something i've dealt with like i wouldn't go into it as like
179
00:10:02.440 --> 00:10:08.200
that's the approach i would take to doing it and most of my experience with it was when i was doing
180
00:10:08.280 --> 00:10:11.960
some consulting work and it'd be like these complete disasters that were people were like
181
00:10:12.080 --> 00:10:17.460
asking me to come in and fix where it was just like they'd leaned into it so hard that they're
182
00:10:17.540 --> 00:10:21.940
just like it was just every single component would just have like redeclared everything because it
183
00:10:21.940 --> 00:10:25.400
was like oh here's my figma files telling me i need these things on it so i'm going to clear
184
00:10:25.480 --> 00:10:29.240
the font family and the font size and the color and all this and you're just like it's a tool that
185
00:10:29.300 --> 00:10:37.840
can be used and can be effective but it can also lead to lots of misuse and i guess it served a bit
186
00:10:37.860 --> 00:10:42.620
of a purpose for a while but i don't i don't know it wasn't it's not my cup of tea let's say that
187
00:10:42.861 --> 00:10:46.759
kind of sounds like you're saying it was a mistake and now it's dead that's what i heard yeah
188
00:10:49.767 --> 00:10:54.439
yeah he's just too nice of a guy he won't say that i love it all right you can only pick one
189
00:10:54.840 --> 00:11:01.080
kevin grid or flexbox which one it should be an easy answer for grid in a way because i use it
190
00:11:01.260 --> 00:11:07.900
so much more than flexbox but there's a few things with flexbox that i wouldn't want to lose and i'm
191
00:11:07.920 --> 00:11:12.880
like i can hack the other stuff i do to try and get like to get close enough to the grid things
192
00:11:12.960 --> 00:11:17.900
I do so I think if it was like for everybody out there and I was deciding that like everybody could
193
00:11:17.940 --> 00:11:22.680
only use one I'd probably choose grid because I think you can just simplify enough things and like
194
00:11:22.740 --> 00:11:27.320
just deal with the result otherwise I think if it's people that really know what they're doing
195
00:11:27.521 --> 00:11:31.800
you're probably fine if you just have flexbox which it feels bad because I'm like the biggest
196
00:11:32.101 --> 00:11:36.520
stand for grid and get very mad at people that are like oh you don't need that for you just use
197
00:11:36.560 --> 00:11:43.240
flexbox but yeah i think i could manage better without grid which feels kind of weird to say
198
00:11:44.424 --> 00:11:49.080
i think yeah i think i feel the same way we had flex for so long i feel like that like we got
199
00:11:49.281 --> 00:11:54.600
used to working without grid and so while i do enjoy using it when it has a you know clear use
200
00:11:54.640 --> 00:11:59.000
case i i do reach for flex sometimes like i don't know i don't think you're ever going to get rid of
201
00:11:59.040 --> 00:12:05.380
it yeah i think you know we need it still they both do some stuff really well i find again i
202
00:12:05.460 --> 00:12:10.000
use grid more than i use flex on like a regular base or like if i was to count the declarations
203
00:12:10.080 --> 00:12:14.300
i'm sure you know css stats whatever i would have a lot more grid declarations and flexbox on a
204
00:12:14.320 --> 00:12:18.940
regular project but just there's like you can muck around with flexbox and do something you can do it
205
00:12:18.940 --> 00:12:23.980
with grid too though i don't know i think uh now i'm not sure i'm talking myself around the other
206
00:12:24.040 --> 00:12:30.540
way you can do anything with anything if you try hard enough yeah just use javascript you don't
207
00:12:30.540 --> 00:12:31.523
have to pick either.
208
00:12:32.105 --> 00:12:34.031
Tailwind or Vanilla CSS?
209
00:12:34.713 --> 00:12:35.757
But for me, that's an easy one.
210
00:12:35.937 --> 00:12:36.820
Vanilla CSS all day
211
00:12:36.840 --> 00:12:36.960
long.
212
00:12:37.302 --> 00:12:37.603
Yeah.
213
00:12:37.965 --> 00:12:38.206
Okay.
214
00:12:38.567 --> 00:12:38.728
Yeah.
215
00:12:38.808 --> 00:12:40.394
I wasn't going to say was Tailwind a mistake.
216
00:12:40.414 --> 00:12:41.579
I wanted to rephrase it to
217
00:12:42.443 --> 00:12:43.888
the same thing that we always ask.
218
00:12:44.310 --> 00:12:46.820
My token response for people asking me about Tailwind
219
00:12:46.940 --> 00:12:49.430
is that I get why people like it, but it's not for me.
220
00:12:49.851 --> 00:12:52.100
Again, I see what it's solving and why
221
00:12:52.180 --> 00:12:52.722
people like it.
222
00:12:52.943 --> 00:12:58.140
The big issue I have is a lot of people that I'm helping are beginners and they
223
00:12:58.863 --> 00:13:01.094
start doing all this stuff with Tailwind that don't really know it.
224
00:13:01.194 --> 00:13:02.380
Trying to debug beginner
225
00:13:02.722 --> 00:13:05.216
CSS can be hard enough when they don't really know what they're doing.
226
00:13:05.336 --> 00:13:05.980
And then when it's all
227
00:13:06.060 --> 00:13:11.180
just this wall of classes, I'm just like, oh my God, it can be a good tool for people who know
228
00:13:11.180 --> 00:13:12.607
what they're doing with CSS already.
229
00:13:12.989 --> 00:13:15.340
I get people like that it has like, you know, you're not worried
230
00:13:15.340 --> 00:13:20.920
about is it 12 pixels or 13 or 14, you just have your token sort of in a way that are done.
231
00:13:20.960 --> 00:13:21.040
So
232
00:13:21.080 --> 00:13:23.071
like, yeah, I can see how that can be useful.
233
00:13:23.111 --> 00:13:24.760
But yeah, it's not my cup of tea.
234
00:13:25.222 --> 00:13:29.819
yeah I hadn't really considered the beginner like I've always been thinking about you know us as
235
00:13:30.361 --> 00:13:34.020
developers what do we choose but then it's like if you're learning that could be very confusing
236
00:13:34.060 --> 00:13:41.140
I agree with that because yeah I think when I had a decent CSS foundation and then I jump into
237
00:13:41.200 --> 00:13:45.440
Tailwind it actually increased my CSS knowledge because their docs are very good at teaching you
238
00:13:45.460 --> 00:13:50.640
CSS actually which is kind of funny yeah I think it would be very confusing if you're like oh you
239
00:13:50.720 --> 00:13:54.640
just throw classes on stuff to style it and you have no idea what the css is behind the scenes
240
00:13:54.720 --> 00:14:00.940
that would be hard to grok yeah definitely and it's and i think like now it's they're starting
241
00:14:01.060 --> 00:14:06.340
to move more towards css in some ways but i'm curious how they're going to handle some of the
242
00:14:06.380 --> 00:14:10.360
newer features that are coming as well because there's some stuff that i'm like oh you can't
243
00:14:10.380 --> 00:14:14.460
really do that with a class i don't know what you know i'll be curious to see because there's smart
244
00:14:14.540 --> 00:14:18.939
people working on it so i'm sure they'll come up with something yeah i'm sure they'll make it work
245
00:14:20.284 --> 00:14:25.240
it's funny they both vanilla and tailwind have a copy paste issue if you're a beginner yeah you
246
00:14:25.240 --> 00:14:31.280
know like i like the way that looks i want that over here so you go copy paste it but with tailwind
247
00:14:31.320 --> 00:14:36.300
there's one added kind of difficulty in the debugging which is you gotta so you find the
248
00:14:36.320 --> 00:14:40.480
element right now the element instead of listing all those styles together one little block for
249
00:14:40.540 --> 00:14:47.120
you to easily go read you need to know that you can twirl open the class the cls is what it's got
250
00:14:47.120 --> 00:14:50.260
It doesn't even say the word class or give you a hint that this is what the class.
251
00:14:50.802 --> 00:14:51.779
So you got to open up the class.
252
00:14:52.161 --> 00:14:55.720
And then once that's open, let's hope you don't have a whole bunch of classes on there.
253
00:14:55.740 --> 00:14:59.000
Because if you do, then you're just looking at a big flat list and you got to know what
254
00:14:59.162 --> 00:15:00.840
empty and all these different things mean.
255
00:15:00.941 --> 00:15:03.420
So now you're in there toggling.
256
00:15:03.600 --> 00:15:05.899
Is this how most people debug Tailwind?
257
00:15:06.060 --> 00:15:09.980
Is they go undo a bunch of classes and then slowly add them back in?
258
00:15:10.040 --> 00:15:12.880
Or do you try to guess at the subtractive debugging strategy?
259
00:15:13.040 --> 00:15:16.400
Like what's the way to, if you're new, how do you uncover what happened?
260
00:15:16.780 --> 00:15:18.342
It depends, as in all things.
261
00:15:18.743 --> 00:15:29.134
But it's actually tricky because if your setup is tree shaking out the unused classes and you want to try another class like in your dev tools, it's like, nope.
262
00:15:31.256 --> 00:15:33.819
So yeah, it all depends on your setup.
263
00:15:33.959 --> 00:15:34.900
It's not always straightforward.
264
00:15:35.723 --> 00:15:40.900
happens with my custom properties too when i use the plugin i wrote for the post css jit props which
265
00:15:40.920 --> 00:15:44.740
will only put in the css properties that you used it's the same deal you're like oh i don't like
266
00:15:44.740 --> 00:15:48.020
that blue let me go try on blue number four instead of blue number three and it's like
267
00:15:48.441 --> 00:15:53.800
we don't know what blue four is and i'm like what oh yeah i have to go back i gotta do the
268
00:15:53.840 --> 00:15:58.760
full round trip just to add a blue color to my style sheet that sucks yeah complaining about
269
00:15:58.880 --> 00:16:07.119
these really nice tools we have is uh funny i want to know where's your favorite place to write css
270
00:16:07.861 --> 00:16:13.040
do you want type ahead do you want pop-ups and things to assist you do you want to see values
271
00:16:13.442 --> 00:16:17.820
or do you just want like a text editor you want to be in code pen you got an ide where is kevin
272
00:16:17.900 --> 00:16:25.780
powell in his happy place just smashing css out just like i'm all over the place i do go if i'm
273
00:16:25.900 --> 00:16:30.560
thinking of something codepen to be the first place i go to i don't like autocomplete stuff
274
00:16:30.701 --> 00:16:34.859
in general though every now and then you're happy it's there when you're like you're forgetting a
275
00:16:35.200 --> 00:16:39.540
value name and you're like you want that list to like size is it uh yeah there's all these weird
276
00:16:39.620 --> 00:16:44.780
ones now yeah yeah i have like five different profiles and in vs code because i have like my
277
00:16:44.840 --> 00:16:49.360
recording one and then a clean recording one for shorts and then another recording one for other
278
00:16:49.440 --> 00:16:55.000
things i'm doing you know is formatting on or off and it's just such a mess for me and in terms of
279
00:16:55.040 --> 00:16:59.680
like is autocomplete on and off and is there the pop-ups that are coming here and there and then
280
00:16:59.720 --> 00:17:04.539
like so i'm just yeah i don't know i'm a bit of a mess but i'm a bit of a purist i think for me i
281
00:17:04.841 --> 00:17:09.420
like having it as clean as possible with like if i do need a little bit of help i'd appreciate it
282
00:17:09.500 --> 00:17:16.120
sometimes from like a little list i can choose from but i have the advantage of living in that
283
00:17:16.260 --> 00:17:21.200
all the time so i generally know what i want and even i do get asked in my videos a lot why i don't
284
00:17:21.220 --> 00:17:25.980
even use emmet with css which i don't and i'm like i use it for html because that's long to write
285
00:17:26.341 --> 00:17:31.780
and i'm just like i did the same thing i never bothered and like you know i guess and i'm like
286
00:17:31.800 --> 00:17:35.840
it's not that long to write like there's not that many most declarations aren't that long
287
00:17:36.262 --> 00:17:41.060
so yeah and i found i've tried a few like of the more like ai autocomplete stuff that's trying to
288
00:17:41.240 --> 00:17:47.480
read your mind and i just get frustrated with it so i i don't i just go old school nice uh what's
289
00:17:47.520 --> 00:17:52.280
the scariest css feature like if i came up to you and you didn't see me and i was behind you and i
290
00:17:52.320 --> 00:17:57.260
just whispered something over your shoulder like a css property what would send goosebumps just down
291
00:17:57.300 --> 00:18:03.240
your back that's a good question it'd be like any of the new stuff that's kind of weird that i don't
292
00:18:03.340 --> 00:18:08.180
know because people always expect me to know everything with it and then like anytime i'll
293
00:18:08.220 --> 00:18:11.780
be doing a live stream and i'm like okay i'm going to try something like a new thing i haven't really
294
00:18:11.840 --> 00:18:16.660
done before and if it's like usually it's not that hard but like let's get into view transitions and
295
00:18:16.680 --> 00:18:21.037
I'm just like, Oh my god, like, this is I opened a can of worms on this one.
296
00:18:21.137 --> 00:18:21.840
This isn't what I was
297
00:18:21.900 --> 00:18:23.487
expecting when I first go into it.
298
00:18:23.828 --> 00:18:26.820
But then, yeah, I'm trying to think you transitions still sort of
299
00:18:26.840 --> 00:18:31.060
scare me a little bit in that I always feel like I'm missing something or I was doing something
300
00:18:31.402 --> 00:18:31.904
the other day.
301
00:18:31.924 --> 00:18:35.180
And then I found out about I don't remember what it's the gated ones, I think are
302
00:18:35.220 --> 00:18:36.686
guarded, guarded view transitions.
303
00:18:36.706 --> 00:18:40.359
So you can have like, if you're running one, it won't run all of
304
00:18:40.580 --> 00:18:42.127
them on your page, which is the default.
305
00:18:42.248 --> 00:18:44.920
And then I'm like, okay, that solves the problem that I
306
00:18:44.960 --> 00:18:48.360
came up with a really hacky solution for i'm glad that's there but it's just like there's always
307
00:18:48.481 --> 00:18:52.700
another layer and i find you know it's good to learn it's fun with that but it's intimidating
308
00:18:52.921 --> 00:18:56.420
sometimes too and you're just like i'm trying to learn this and it just seems like a never-ending
309
00:18:56.540 --> 00:19:02.340
hole i can't imagine people that are not able to spend hours building silly demos yeah view
310
00:19:02.420 --> 00:19:07.860
transitions is a hole that you can fall into that is for sure it starts out so easy you're like oh
311
00:19:07.980 --> 00:19:12.800
i gave you a name and then i changed the dom and you morphed i am awesome and then making the like
312
00:19:12.860 --> 00:19:17.560
a filter and they just like oh i use my filter and the pieces just slide around i didn't have
313
00:19:17.740 --> 00:19:27.080
that was it wow yeah which was your first css pre-processor uh sass yeah i use sass a lot i i
314
00:19:27.661 --> 00:19:36.560
never sass or scss oh oh so i definitely was the sass to start with like oh this is cool it's clean
315
00:19:36.921 --> 00:19:41.980
it's awesome and i think the only reason i stopped was because i was recording videos i actually at
316
00:19:41.980 --> 00:19:46.800
the time I was teaching in the classroom too and the amount of times I'd be doing demos like in
317
00:19:46.880 --> 00:19:51.680
front of my class and just forget a semicolon or not put like a curly brace and then I was like okay
318
00:19:52.323 --> 00:19:55.740
I'm not sure this is working for me just because I'm building like the wrong muscle memory
319
00:19:55.760 --> 00:20:00.580
and then the same I would do videos using it at one point I was like if I'm recording a video
320
00:20:00.741 --> 00:20:05.900
it makes more sense to use scss just because it's more accessible for people who don't know it
321
00:20:06.884 --> 00:20:10.800
and I was like okay I'm gonna go down that route instead and then I sort of just got used to it
322
00:20:11.000 --> 00:20:17.760
and never went back but i still i have a fun spot for the clean syntax of sass for sure did it not
323
00:20:17.820 --> 00:20:25.560
have curly braces sass did not oh gross no curlies no semicolons but it did have colons and then you
324
00:20:25.560 --> 00:20:31.260
had stylus which had none of that junk it had no curlies no colons no semicolons so i have to hit
325
00:20:31.380 --> 00:20:36.900
the space bar and like format stuff like there's no auto you can hit tab yeah you could tab in or
326
00:20:37.000 --> 00:20:42.320
space it was a well i just wasn't like i can't just type a gross string and go out of format
327
00:20:42.621 --> 00:20:49.520
yeah like yeah like you can in scss yeah yeah i was just saying i definitely lean on that more
328
00:20:49.620 --> 00:20:54.799
nowadays or i just sort of pound the keys and then format okay there that looks nicer yeah
329
00:20:55.542 --> 00:21:01.280
yeah i never space anything out did typescript learn from sass you know like stay close to the
330
00:21:01.300 --> 00:21:05.860
language that's how you gain adoption look at all the other failed ones that tried to superset and
331
00:21:06.202 --> 00:21:08.019
CoffeeScript was more like Sass
332
00:21:08.221 --> 00:21:10.380
and now you have TypeScript which is more like Sass
333
00:21:10.582 --> 00:21:12.480
oh wait that's confusing to anyone that doesn't know what I'm talking about
334
00:21:12.541 --> 00:21:13.899
but it's kind of interesting
335
00:21:13.960 --> 00:21:15.140
a little comparison
336
00:21:15.644 --> 00:21:17.540
I think CoffeeScript really influenced
337
00:21:18.446 --> 00:21:20.260
all the modern JavaScript stuff
338
00:21:20.382 --> 00:21:20.937
they took like
339
00:21:22.388 --> 00:21:24.240
a lot of the nice things and then none of the
340
00:21:24.462 --> 00:21:25.679
crap that no one wanted and
341
00:21:26.971 --> 00:21:28.000
just put it right in JavaScript
342
00:21:28.263 --> 00:21:29.780
so thank you CoffeeScript
343
00:21:31.756 --> 00:21:32.300
I still miss the
344
00:21:32.381 --> 00:21:33.999
two arrow functions where you had the
345
00:21:34.160 --> 00:21:39.040
the thick arrow and the thin arrow i thought that was cool and es6 only took one they took the thin
346
00:21:39.140 --> 00:21:45.260
arrow what was what was the the other one one was just a anonymous function and then the other one
347
00:21:45.741 --> 00:21:51.960
bound this to your function okay yeah so we have that but we don't have one that doesn't bind this
348
00:21:52.521 --> 00:21:58.420
yes we can't arrow function just a so we have to type function before we do the the thin arrow i
349
00:21:58.460 --> 00:21:59.580
I know, it's garbage.
350
00:22:01.361 --> 00:22:07.400
I'm going to pop one because this was because I was listening to your podcast with you and Sarah Suedan, which was a great episode, by the way.
351
00:22:07.520 --> 00:22:08.640
Also, Sarah, so cool.
352
00:22:08.681 --> 00:22:09.060
She's amazing.
353
00:22:09.220 --> 00:22:10.020
Sarah, you're so cool.
354
00:22:10.340 --> 00:22:13.440
I doubt you're listening to the Whiskey Bro Show, but you know what?
355
00:22:14.284 --> 00:22:15.040
You're super cool.
356
00:22:15.381 --> 00:22:17.360
And I totally respect everything you do.
357
00:22:17.501 --> 00:22:22.200
Okay, so y'all were talking about some CSS features seem to ship really fast.
358
00:22:22.721 --> 00:22:25.020
And Sarah's like, I try to keep a thumb on the beat.
359
00:22:25.546 --> 00:22:25.919
So do you.
360
00:22:26.060 --> 00:22:27.800
And then you're all like, it's here.
361
00:22:28.282 --> 00:22:33.160
we don't know how long it was in an experimental flag you know like i can't keep a track of every
362
00:22:33.300 --> 00:22:38.080
flag and think about the dates and all that stuff and so you're all like sometimes things ship faster
363
00:22:38.200 --> 00:22:44.040
than maybe you were ready for so my question to you is which css features do you wish would just
364
00:22:44.100 --> 00:22:49.640
hurry the hell up because they're taking way too long well i guess they're sort of here with like
365
00:22:49.760 --> 00:22:55.580
the state querying with like the stuck and the stuff you and you were involved in there that's
366
00:22:55.720 --> 00:23:02.020
super useful and i could use that and i haven't dove too deep into it but definitely that's one
367
00:23:02.120 --> 00:23:06.600
where i've been like yeah we need that another one is and i don't remember the name of it i don't
368
00:23:06.740 --> 00:23:12.880
even know how css specific related is but i just before coming on i saw a post on blue sky from
369
00:23:13.401 --> 00:23:18.660
yuna about it it's like the the tooltip thing now where you can like i don't know what it's called
370
00:23:18.861 --> 00:23:23.600
you can like connect oh the tether yes that's it yeah that looks pretty cool i'm trying to think
371
00:23:23.640 --> 00:23:29.460
what else i don't know there's so many different than anchor it's the dingle on the anchor well
372
00:23:29.520 --> 00:23:34.400
it's the dingle on the kite so explain in better words please
373
00:23:40.251 --> 00:23:45.380
it's it's anchor's always been really confusing because you're like when you tell someone it's an
374
00:23:45.781 --> 00:23:50.080
anchor feature but then you're like oh it takes two pieces to for this feature to work something
375
00:23:50.221 --> 00:23:54.057
is anchoring to somewhere else, the word anchor starts to get overloaded really fast.
376
00:23:54.499 --> 00:23:54.720
And so
377
00:23:55.182 --> 00:23:55.845
what did we call it?
378
00:23:55.865 --> 00:23:58.577
It was the, we tried to create good verbiage.
379
00:23:58.617 --> 00:23:59.019
It was the,
380
00:24:00.421 --> 00:24:02.671
so there's the anchor, which is like the thing that doesn't move.
381
00:24:03.435 --> 00:24:04.400
And then the thing that does
382
00:24:04.701 --> 00:24:06.830
want to attach to it, the positioned element.
383
00:24:06.850 --> 00:24:09.240
So you have an anchor that stays stationary and a
384
00:24:09.300 --> 00:24:12.774
positioned element that somehow moves and attaches itself to that item.
385
00:24:13.116 --> 00:24:14.180
So that positioned element
386
00:24:14.722 --> 00:24:20.420
commonly would like to have a little dingle that points to the thing it's anchored to so that it's
387
00:24:20.440 --> 00:24:27.000
not just free floating yeah like the little down arrow thing and so before the tether dingle was
388
00:24:27.060 --> 00:24:32.540
in css that was actually impossible you didn't know which one of your try options because a
389
00:24:32.901 --> 00:24:37.200
an anchored element can move around based on screen real estate so maybe it would be under
390
00:24:37.461 --> 00:24:40.720
or over based on what's there or on the left side of the right side and you didn't know which one
391
00:24:40.740 --> 00:24:44.600
it was so you couldn't put your dingle in the right spot i'm really looking forward to having
392
00:24:44.660 --> 00:24:53.300
a dingle pseudo class now it's gonna be a good dingleberry joke somewhere in there yeah it's
393
00:24:53.400 --> 00:24:58.020
like oh there you go just need to use the tether make it a berry there's your okay that's good
394
00:24:58.100 --> 00:25:03.560
that's a good demo we could call it an arrow that's what uh most tooltips would call it you
395
00:25:03.620 --> 00:25:08.600
could or the swoopy you know you get the little swoopy because it's a speech bubble swoopy yeah
396
00:25:08.761 --> 00:25:09.779
So it doesn't tell you,
397
00:25:09.981 --> 00:25:12.860
I haven't actually used the anchor positioning stuff at all.
398
00:25:12.981 --> 00:25:13.720
I just know it exists.
399
00:25:14.221 --> 00:25:16.420
It doesn't tell you which one it's on when it's there.
400
00:25:16.563 --> 00:25:17.260
Like if it flips,
401
00:25:17.421 --> 00:25:18.720
it doesn't tell you that I have flipped.
402
00:25:18.860 --> 00:25:18.949
Ooh,
403
00:25:19.163 --> 00:25:19.639
that sucks.
404
00:25:20.120 --> 00:25:20.234
Yeah.
405
00:25:20.341 --> 00:25:21.360
It's a magic.
406
00:25:21.582 --> 00:25:22.299
So you declared,
407
00:25:22.620 --> 00:25:22.713
Hey,
408
00:25:22.921 --> 00:25:23.680
pick top or bottom.
409
00:25:24.123 --> 00:25:24.540
And then it goes,
410
00:25:24.683 --> 00:25:25.060
I picked one.
411
00:25:25.989 --> 00:25:26.320
And you're like,
412
00:25:26.340 --> 00:25:26.453
yeah,
413
00:25:26.822 --> 00:25:28.639
how do I query or know which one it is?
414
00:25:28.821 --> 00:25:29.339
And they're like,
415
00:25:29.580 --> 00:25:29.918
I don't know.
416
00:25:31.474 --> 00:25:31.580
Cool.
417
00:25:31.721 --> 00:25:35.580
This episode is sponsored by floating Dom or floating UI or whatever it is.
418
00:25:35.902 --> 00:25:38.060
The one that does the tool tips and tells you which side it's on.
419
00:25:38.881 --> 00:25:39.302
Seriously.
420
00:25:39.383 --> 00:25:44.220
And floating UI even unfortunately has some superpowers that anchor positioning can't do.
421
00:25:44.340 --> 00:25:48.900
So if you're looking for like a straight trade, it's not equivalent, which is frustrating.
422
00:25:49.360 --> 00:25:49.502
Cool.
423
00:25:49.562 --> 00:25:51.060
I'm glad I didn't try that experiment then.
424
00:25:51.381 --> 00:25:53.820
So we use it in Shepard and we have to know what side it's on.
425
00:25:54.140 --> 00:25:55.385
So wait, Kevin, I haven't seen it.
426
00:25:55.505 --> 00:25:59.320
And last I saw tether was a pseudo element, but how does it know which corner?
427
00:25:59.420 --> 00:26:05.720
Did they come up with a state query for, so it was going to be a container query, just like a scroll container query that can scroll state.
428
00:26:06.422 --> 00:26:11.960
is it anchor state asking for which side it's attached i wish i could tell you i this is one
429
00:26:11.960 --> 00:26:15.720
of those ones where i'm like that's cool i'm gonna keep my eye on it but i didn't dive into
430
00:26:16.061 --> 00:26:20.160
how it's working yet yeah yeah i'm trying to think of the other things that are like that but
431
00:26:20.481 --> 00:26:25.620
all the margin trim text box trim stuff i've been waiting for that for like seven years i think
432
00:26:25.821 --> 00:26:30.440
probably i remember like a super early blog post on medium a long time ago on one of those that now
433
00:26:30.460 --> 00:26:35.720
i'm like it's finally happening yeah yeah this is exactly yeah and i'm like it's finally happening
434
00:26:35.841 --> 00:26:38.660
Yeah, which is going to be awesome.
435
00:26:38.940 --> 00:26:48.680
It definitely one of those things is going to be used a lot that people don't realize that it's just going to become one of those features that they're throwing in all the time to still cut those extra margins off that they don't need.
436
00:26:49.861 --> 00:26:54.260
This just in, Whiskey.fund is now open for all your merch needs.
437
00:26:54.763 --> 00:26:55.500
That's right, Robbie.
438
00:26:55.800 --> 00:27:02.260
We're hearing reports of hats, sweaters and T-shirts, as well as a link to join our Discord server.
439
00:27:03.082 --> 00:27:04.320
What's a Discord server?
440
00:27:05.404 --> 00:27:06.579
Just read the prompter, man.
441
00:27:06.980 --> 00:27:11.580
Hit subscribe, leave us a review on your favorite podcast app, and tell your friends about our broadcast.
442
00:27:12.321 --> 00:27:15.260
It really does help us reach more people and keeps the show growing.
443
00:27:16.181 --> 00:27:18.420
All right, back to your regularly scheduled programming.
444
00:27:22.462 --> 00:27:24.460
Robbie, do you know what he's talking about?
445
00:27:24.600 --> 00:27:29.320
Or should we get a classic Kevin Powell explanation, amazing CSS explanation on here?
446
00:27:29.601 --> 00:27:30.580
You can explain it if you want.
447
00:27:30.825 --> 00:27:31.220
I don't know.
448
00:27:31.320 --> 00:27:33.159
I understood kind of from when you went like this.
449
00:27:33.340 --> 00:27:39.520
but uh yeah so there's two different ones there's text box trim which i have a harder time explaining
450
00:27:39.781 --> 00:27:43.780
but i think i've i've actually used that one then there's margin trim i think is the one that more
451
00:27:43.880 --> 00:27:50.020
people are going to use well no i'm opposite no maybe not yeah but okay margin trim is if you have
452
00:27:50.502 --> 00:27:54.460
okay so you do a card and the first element has a margin top and the last element has a margin
453
00:27:54.560 --> 00:27:58.920
bottom because you know text always has margins on it by default and then it's either collapsing
454
00:27:59.020 --> 00:28:04.100
margins or anyway anytime that would happen it would just trim that margin off the top of the
455
00:28:04.140 --> 00:28:08.640
first element in the bottom of the last element by default so you don't have to have special cases
456
00:28:09.041 --> 00:28:14.420
yeah and you can specify what axis too so you can say like only on the block axis or only on the
457
00:28:14.440 --> 00:28:20.580
inline axis and so like if you have elements i think the inline axis is less common just because
458
00:28:20.580 --> 00:28:24.420
you use gap for so many things these days but there probably are some cool situations where
459
00:28:24.420 --> 00:28:28.660
it would come in handy text box trim is the one where i'm sure everybody's done it where they
460
00:28:28.700 --> 00:28:34.480
have a button and they have it's like the uppercase text and they put padding on the top and bottom of
461
00:28:34.500 --> 00:28:38.580
their button and it's different on the top and the bottom this like visual spacing is different
462
00:28:39.363 --> 00:28:44.700
and that's because typography has extra space on the top and bottom of like how the characters are
463
00:28:44.720 --> 00:28:48.460
painted because they need accent room for the accents and room for descender characters
464
00:28:49.403 --> 00:28:53.720
and so you'll actually be able to say like no instead of having all this extra space on the top
465
00:28:54.162 --> 00:28:57.720
you're going to trim to the top of the cap letters and on the bottom you're going to trim to the
466
00:28:57.740 --> 00:29:03.040
baseline so you just remove all that extra space from the typography so the padding on your button
467
00:29:03.100 --> 00:29:08.560
will actually be what you've declared instead of this weird extra space around the sides oh nice
468
00:29:08.881 --> 00:29:13.980
yeah i remember having to do bespoke padding numbers on all sides of buttons before so
469
00:29:14.662 --> 00:29:21.080
that that will be nice to have yep that's noise i i hate that thing because that always would
470
00:29:21.382 --> 00:29:24.940
would pop up you'd sit down with the designer and they'd be like the button's not in this the text
471
00:29:25.040 --> 00:29:31.440
not in the center and you're like what you go look at it you're like oh yeah dang it you're
472
00:29:31.460 --> 00:29:36.399
right you see them way in you're like oh you're right it is one pixel off and then someone yeah
473
00:29:36.861 --> 00:29:41.340
someone goes okay okay we'll just put line height one yes yes and it like and then they have a word
474
00:29:41.380 --> 00:29:46.520
that says grab or whatever or tasty and then the y at the bottom of the y is cut off and they're
475
00:29:46.520 --> 00:29:50.520
like why is the bottom of y cut off and it's like you're in a whack-a-mole game with css now buddy
476
00:29:53.609 --> 00:29:57.280
another one just before we go that i'm excited for it but i'm also like i think it's going to
477
00:29:57.300 --> 00:30:04.139
change how css is written is the attr function being able to take like not only be used as
478
00:30:04.720 --> 00:30:10.560
content on pseudo elements so it's where you can actually like pull in any value from a data
479
00:30:10.620 --> 00:30:15.460
attribute and use it any way you want in your css so i think that tell me it's not a programming
480
00:30:15.620 --> 00:30:16.142
language now.
481
00:30:18.148 --> 00:30:21.980
And honestly, that one is what you would call typecasting in a scripting language.
482
00:30:22.260 --> 00:30:26.480
That's the only way that this could work because it was otherwise could be an attack vector.
483
00:30:26.981 --> 00:30:31.120
You could be adopting some data attribute that actually makes a request for a background image
484
00:30:31.200 --> 00:30:33.247
that then exposes something about this user.
485
00:30:33.829 --> 00:30:36.117
So instead it's type required.
486
00:30:36.558 --> 00:30:37.120
And like, I want this
487
00:30:37.160 --> 00:30:40.349
data attribute as a string, as a number.
488
00:30:40.871 --> 00:30:44.160
And if it fails that typecast, then the value doesn't show
489
00:30:44.220 --> 00:30:47.820
up in the right way and you know you have some issues but still i thought that was a really
490
00:30:47.900 --> 00:30:53.740
clever guard because otherwise this could have been a wildly robust attack vector system would
491
00:30:53.780 --> 00:30:59.200
be stripping data attributes off of areolent on the page and posting them as parameters on the
492
00:30:59.360 --> 00:31:04.960
query string of an image or something it's just nuts yeah if there's a way to attack stuff people
493
00:31:05.040 --> 00:31:10.980
will find it yeah like the nfts and pdfs and different things that just execute code when
494
00:31:11.000 --> 00:31:19.120
you open it it's like cool or npm install that just starts executing code oh man yeah yeah the
495
00:31:19.180 --> 00:31:24.480
npm stuff today was pretty rough you guys see all that i missed it yeah although i didn't follow all
496
00:31:24.500 --> 00:31:28.400
of it but i know that it's like a it's almost like an aftershock from the first earthquake right yeah
497
00:31:28.500 --> 00:31:34.120
tell me more there were several tweets that i saw and i don't know the full extent but it was like
498
00:31:34.742 --> 00:31:40.040
the one that affected me was the like tiny color was like one of them that was compromised i guess
499
00:31:40.742 --> 00:31:46.280
so swatch is gonna need uh some fixes for that i guess color js it's a superior js library for
500
00:31:46.360 --> 00:31:52.920
color anyway i used a tiny color for a while also hey you're you're a uh owner of the repo if you
501
00:31:52.920 --> 00:31:57.480
would like to open that hey let's let's pair on that next yeah but anyway so yeah it was like
502
00:31:57.520 --> 00:32:01.000
that one and like some like 40 packages or something and then they're like oh by the way
503
00:32:01.141 --> 00:32:06.020
also everything crowd strike has ever published and like a bunch of ember stuff because they do
504
00:32:06.080 --> 00:32:11.600
a lot of ember work too and i was like oh this matters like i should probably uh look into that
505
00:32:12.423 --> 00:32:15.860
so yeah i think everyone was kind of floundering today trying to make sure everybody was good
506
00:32:16.401 --> 00:32:22.660
yikes are you familiar with css's one of its first hacks that you could do the billion laughs attack
507
00:32:22.700 --> 00:32:28.080
are you familiar with this no do you know this one kevin i don't think so this particular attack
508
00:32:28.501 --> 00:32:35.580
originated with xml css enabled it when we got css custom properties so imagine you get a custom
509
00:32:35.660 --> 00:32:42.637
property and the value of it is lol and then custom property 2 is the value of lol and lol
510
00:32:44.161 --> 00:32:49.400
or lol and lol anyway by the time you can you can create a stack of 10 css variables that by the
511
00:32:49.440 --> 00:32:55.020
time you get to the 10th one it's referencing all the previous ones and they expand so big so quickly
512
00:32:55.582 --> 00:33:00.340
it busts the memory of a browser and will crash a page so it's called the billion laughs attack
513
00:33:00.360 --> 00:33:02.138
because you're just like, look at me, 10 lines of CSS
514
00:33:02.624 --> 00:33:03.619
crashing a browser.
515
00:33:05.970 --> 00:33:06.260
Pretty funny.
516
00:33:06.340 --> 00:33:08.419
So they had to put guards in there where you can only nest
517
00:33:08.823 --> 00:33:10.460
custom properties a certain level deep
518
00:33:10.601 --> 00:33:12.520
to prevent the billion laughs attack.
519
00:33:13.041 --> 00:33:13.819
Yeah, never interesting.
520
00:33:14.542 --> 00:33:15.339
Who's laughing now?
521
00:33:16.482 --> 00:33:17.398
It's a stupid joke.
522
00:33:18.121 --> 00:33:18.347
Oh, God.
523
00:33:19.881 --> 00:33:22.119
Yeah, so we've talked about a lot of weird
524
00:33:22.927 --> 00:33:24.120
things, new things,
525
00:33:24.384 --> 00:33:25.160
CSS things.
526
00:33:25.823 --> 00:33:27.540
Why can't AI write CSS, though?
527
00:33:28.140 --> 00:33:28.899
That's a good question.
528
00:33:31.382 --> 00:33:38.500
I think the biggest problem it has is that CSS is sort of the opposite of what it's good at.
529
00:33:38.841 --> 00:33:42.580
Like you need a little like encapsulated JavaScript thing that that's all it does.
530
00:33:42.720 --> 00:33:45.280
Like it can do that whatever amount of lines of code that is.
531
00:33:45.400 --> 00:33:50.360
Whereas like with CSS, sort of going back to what I was saying earlier with the problems with the CSS and JS,
532
00:33:50.540 --> 00:33:59.920
where like people that are coming from JavaScript backups are trying to encapsulate things because they're not comfortable with the global scope of CSS and the way everything works with everything else.
533
00:33:59.960 --> 00:34:05.240
So like, yeah, you can get AI to write you some CSS for that component.
534
00:34:05.421 --> 00:34:10.200
But even now that I've seen of it, where it should be aware of the entire code base,
535
00:34:10.300 --> 00:34:14.260
it just seems to like ignore half of it just because it doesn't want to look at it.
536
00:34:14.400 --> 00:34:18.120
I've seen it look at something, start using custom properties for some parts of it,
537
00:34:18.181 --> 00:34:20.060
and then just completely ignore it for other ones.
538
00:34:20.401 --> 00:34:24.619
It has the problem of over declaring like crazy, which is a problem that a lot of
539
00:34:24.981 --> 00:34:28.276
beginners like to do, where it's just like, it's just throwing with 100% on things.
540
00:34:29.140 --> 00:34:33.080
and these other things that it wouldn't look like it would cause an issue, but it actually
541
00:34:33.321 --> 00:34:36.153
does cause a problem in that scenario that it's used it in.
542
00:34:36.755 --> 00:34:37.820
And then I guess it just doesn't have
543
00:34:37.880 --> 00:34:42.320
like the visual testing or any, like it's throwing that code in there, assuming this is what's right.
544
00:34:42.461 --> 00:34:45.179
And with like a JavaScript, you can test the JavaScript pretty easily to see if it
545
00:34:46.183 --> 00:34:47.428
runs and actually does something.
546
00:34:47.448 --> 00:34:50.820
Whereas the CSS doesn't really fail and it doesn't know that it
547
00:34:50.840 --> 00:34:54.340
doesn't fail because there's no error coming to tell it that there's a problem with that.
548
00:34:54.882 --> 00:35:00.900
and so it just this must be fine but yeah i think there's a lot of layers to ai struggling with css
549
00:35:01.120 --> 00:35:06.340
compared to other languages that it still also struggles with you know it's getting okay at some
550
00:35:06.380 --> 00:35:11.700
stuff but it's it's far from perfect everywhere i think yeah i mean ai struggles a lot i think
551
00:35:12.102 --> 00:35:15.460
it was an awesome answer i'm just like oh i thought you were like rock on i was like
552
00:35:15.540 --> 00:35:19.600
that was an amazing answer i was like just just creep my fingers up here just like
553
00:35:19.640 --> 00:35:25.660
we sign of the horns yeah i was like i have nothing to say that was amazing yeah yeah i think
554
00:35:25.720 --> 00:35:31.340
part of the problem is that it depends on where you're using the css too like the javascript code
555
00:35:31.440 --> 00:35:36.580
can be used and it's kind of going to execute the same regardless but like it really matters what
556
00:35:36.620 --> 00:35:41.060
scope you're in with the css if you're going to break everything else or not or like i don't think
557
00:35:41.100 --> 00:35:45.600
it's i mean it can't think we've talked about this before it doesn't think it just like pulls some
558
00:35:45.720 --> 00:35:51.460
answer to like a query and goes blah so like it doesn't understand anything about how that should
559
00:35:51.460 --> 00:35:56.640
work yeah and i've always been curious not i don't think it's so much these days but like i remember
560
00:35:56.700 --> 00:36:01.800
at one point when it people were first getting very excited about it i think i made some content
561
00:36:01.941 --> 00:36:06.800
around like just the problems it was causing but like at one point it said something that was really
562
00:36:07.442 --> 00:36:12.760
just i wish i could remember what it was but it was just like writing a reset or something and
563
00:36:13.021 --> 00:36:17.280
explaining why it was the right thing to do and the source it gave was this like random github repo
564
00:36:17.440 --> 00:36:22.740
that had like 20 lines of css in it and i was just like it's gotten better i think at vetting
565
00:36:22.780 --> 00:36:28.100
information and where it's from but like those early days are really bad yeah good for that one
566
00:36:28.140 --> 00:36:34.200
repo though i guess yeah it's like open props sneaks in there pretty good too i'm like hey it
567
00:36:34.220 --> 00:36:37.279
does pretty good with open props it must have trained itself for free on a bunch of stuff
568
00:36:41.029 --> 00:36:45.260
it's like chris coyer is like i know it read all the css tricks you know like hey toss me a buck
569
00:36:45.360 --> 00:36:52.900
or two you know like but hey we couldn't control he made his css tricks money he did he did here's
570
00:36:52.940 --> 00:36:58.320
a little bit of a whatnot question for you kevin do you wake and bake do i wake and bake yeah do
571
00:36:58.320 --> 00:37:05.720
you uh wake up and make bread oh because i know you bake bread i do but i don't wake and uh
572
00:37:06.180 --> 00:37:07.122
Well, sometimes.
573
00:37:07.442 --> 00:37:08.043
It's been a while.
574
00:37:08.244 --> 00:37:13.893
But if I'm doing sourdough, it would be early in the morning or when I get up and get the kids to school and then it goes in the oven.
575
00:37:14.133 --> 00:37:15.616
But I haven't made any in a while now.
576
00:37:16.156 --> 00:37:18.380
I'm a little bit worried about the state of my starter, to be honest.
577
00:37:19.602 --> 00:37:21.860
Oh, that's the yeast you carry over between bakes?
578
00:37:22.500 --> 00:37:22.620
Yeah.
579
00:37:22.861 --> 00:37:25.000
Does it go bad if you leave it for a while or something?
580
00:37:26.004 --> 00:37:29.740
i think i can get it back to life i've had it in the fridge you can sort of like
581
00:37:30.282 --> 00:37:35.300
prep it to go dormant i guess and then you get it out and start feeding it but it's been a little
582
00:37:35.380 --> 00:37:40.640
while now so we'll see if i can revive it it's not that hard to start like a pet yeah yeah it's a bit
583
00:37:40.660 --> 00:37:45.840
of a pain in the butt if you're not like actively baking constantly yeah how do people figure that
584
00:37:45.960 --> 00:37:52.200
out like seriously there's so many things that are just i mean i'm sure the first one was an
585
00:37:52.300 --> 00:37:57.100
accident but then like how do you perfect that science i don't i don't know even like finding
586
00:37:57.240 --> 00:38:02.560
it as an accident like anything to deal with fermentation i'm just like the steps in fermentation
587
00:38:02.640 --> 00:38:06.359
that are going on and then you decide to try and consume it just seems really bizarre to me
588
00:38:07.503 --> 00:38:12.560
yeah curdling anything with time you're like oh you let that just be in the sun or out until it
589
00:38:12.740 --> 00:38:19.200
grew stuff and then you got really hungry i don't know i'm assuming like one of the original ones
590
00:38:19.260 --> 00:38:24.120
was wine like somebody put a bunch of grapes in a barrel and left it for too long and people are
591
00:38:24.120 --> 00:38:28.820
like oh juice and drank it and they're like wait i feel good and they're like all right we could do
592
00:38:28.860 --> 00:38:36.260
this with more stuff why is grandpa dancing he's danced in 20 years yeah yeah so yeah i mean there
593
00:38:36.260 --> 00:38:40.600
were probably also a lot of people that ate stuff they shouldn't have and uh didn't make it so
594
00:38:42.064 --> 00:38:47.020
that is true what about brewing beer are you doing that have you ever made whiskey i don't know tell
595
00:38:47.020 --> 00:38:50.640
us a little bit about some of the drinks you make kombucha too so you're you're willing to watch
596
00:38:50.760 --> 00:38:54.940
things bubble and fester and and then drink it later yeah that's nice as i said i wouldn't i
597
00:38:55.000 --> 00:38:59.220
wouldn't have touched any of it if i never knew that was the process but now that i know that
598
00:38:59.260 --> 00:39:03.920
it's safe and i can get something good out of it i'm curious about like fermentation in general i
599
00:39:03.940 --> 00:39:08.980
think it's fun so i haven't distilled anything where i used to live technically you weren't
600
00:39:09.020 --> 00:39:15.480
allowed where i'm living now you can so maybe one day i don't know but beer is sort of my my main
601
00:39:15.580 --> 00:39:20.500
focus and it takes enough time right now i haven't been able to for a while because we have a major
602
00:39:20.661 --> 00:39:25.880
water shortage and it's rained like once in the past four months or something yeah so we're we're
603
00:39:25.920 --> 00:39:30.780
underwater advisories and stuff and it takes a fair bit of water so i'm holding off for the time
604
00:39:30.840 --> 00:39:37.060
being but i try to i generally try to brew once a month usually well what do you do with all that
605
00:39:37.120 --> 00:39:41.460
because when i was brewing beer it was way more beer than i ever wanted to drink and then you had
606
00:39:41.480 --> 00:39:46.840
to wait so long that by the time i i don't know it was so maybe you're bottling into little bottles
607
00:39:46.960 --> 00:39:52.600
in okay are you doing half cakes oh well five gallons five gallons okay so it's like a pony
608
00:39:52.660 --> 00:39:57.220
is that a pony yeah something like that yeah so five gallons yeah i probably drink more than i
609
00:39:57.280 --> 00:40:02.860
should so it's probably good that we're having we have the whole story advisory so yeah i mean i'm
610
00:40:03.021 --> 00:40:07.680
i try to share with other people too i try not to like hold it for myself give it away yeah come on
611
00:40:07.680 --> 00:40:08.380
Here's a growler.
612
00:40:08.621 --> 00:40:08.898
Yeah, yeah.
613
00:40:09.249 --> 00:40:09.539
Go home.
614
00:40:10.441 --> 00:40:14.900
I used to bottle when I first started, and then I stopped for a while just because bottling sort of sucks.
615
00:40:15.646 --> 00:40:16.019
I wasn't a fan.
616
00:40:16.040 --> 00:40:16.400
It does suck.
617
00:40:16.480 --> 00:40:21.280
And having the caps around, like, just you start to find caps in places you don't want, and you're just like, eh, that stinks.
618
00:40:21.480 --> 00:40:23.440
Yeah, and washing the bottles and everything.
619
00:40:23.720 --> 00:40:27.960
So kegging definitely simplifies the process a lot, so that makes life easier.
620
00:40:28.721 --> 00:40:30.360
I need to do cooler hobbies, I think.
621
00:40:32.204 --> 00:40:33.240
What, you power wash, man?
622
00:40:33.301 --> 00:40:33.959
That's so popular.
623
00:40:34.141 --> 00:40:35.300
Power washing is a great hobby.
624
00:40:35.927 --> 00:40:36.139
Yeah.
625
00:40:37.031 --> 00:40:37.540
I guess so.
626
00:40:37.941 --> 00:40:41.538
It doesn't take as much dedication to the craft as brewing beer, though.
627
00:40:42.500 --> 00:40:42.698
I know.
628
00:40:42.944 --> 00:40:43.439
Sports, too.
629
00:40:43.500 --> 00:40:45.960
You got more friends than me because you watch sports.
630
00:40:46.120 --> 00:40:49.540
You know, like we're over here making beer and drinking it by ourselves maybe or whatever,
631
00:40:49.680 --> 00:40:51.840
but you're like cheering on with friends.
632
00:40:52.342 --> 00:40:52.920
Yeah, sometimes.
633
00:40:53.901 --> 00:40:54.960
I do like to watch some football.
634
00:40:55.601 --> 00:40:55.880
Oh, yeah.
635
00:40:56.302 --> 00:40:56.939
What team do you follow?
636
00:40:57.421 --> 00:41:00.980
Well, I'm talking American football just in case we weren't on the same page.
637
00:41:01.162 --> 00:41:02.800
So I like college football the most.
638
00:41:03.220 --> 00:41:06.857
I went to Virginia Tech, so I'd like to see them do well, but they're 0-3 so far.
639
00:41:07.540 --> 00:41:11.820
so doing terrible yeah professional teams i've been following the eagles a little bit just because
640
00:41:11.860 --> 00:41:17.320
i like saquon barkley i think he's just an insane machine at everything football so he's fun to
641
00:41:17.360 --> 00:41:21.900
watch yeah i'm not not that serious about it i just will watch whoever's on and it's fun to watch
642
00:41:22.362 --> 00:41:25.900
that's how i like to do sports too i'll show up to any sport and i'll enjoy it with you because
643
00:41:25.940 --> 00:41:29.420
i like watching people kick butt i'm like dude if you're good at something i'm rooting for you
644
00:41:29.601 --> 00:41:34.040
if you suck at it i'm gonna tell you that's the only funny okay so like i'm quite supportive when
645
00:41:34.101 --> 00:41:36.040
I go watch sports at someone's house.
646
00:41:36.160 --> 00:41:38.100
But if someone's sucking, and I don't care.
647
00:41:38.200 --> 00:41:39.077
I don't have any affiliation.
648
00:41:39.360 --> 00:41:42.300
So I'm like, if they're sucking, I'm like, that was some high school garbage.
649
00:41:42.642 --> 00:41:43.120
You should quit.
650
00:41:43.362 --> 00:41:44.260
I can't believe you're a professional.
651
00:41:44.700 --> 00:41:48.960
That's the same mistake I've watched my friend Gary do five times because he sucked.
652
00:41:49.764 --> 00:41:50.960
So I don't know how you're getting paid.
653
00:41:51.402 --> 00:41:52.480
My friends are like, dude.
654
00:41:52.620 --> 00:41:55.160
And I'm like, hey, if he's bad, he's bad.
655
00:41:55.180 --> 00:41:55.788
Oh, yeah.
656
00:41:57.582 --> 00:42:01.340
I think we picked the wrong careers, too, because Virginia Tech is firing their football
657
00:42:01.480 --> 00:42:07.580
coach for being bad and giving him six million dollars so he'll leave i'm like i would love
658
00:42:08.203 --> 00:42:11.579
like guys i could i could coach some football like you might have to fire me soon
659
00:42:14.108 --> 00:42:18.040
the coaching salaries like it's it's different from the players just because like i don't know
660
00:42:18.181 --> 00:42:21.900
i'm always confused on like how much influence they have and obviously they do because there's
661
00:42:22.181 --> 00:42:25.640
coaches that clearly are good but then it's those times where they hire them for these obscene
662
00:42:25.680 --> 00:42:28.860
salaries and then fire them two years later but they're still under like a seven-year contract
663
00:42:28.920 --> 00:42:31.740
and you're just like, there's way too much money in sports.
664
00:42:32.365 --> 00:42:32.755
It's insane.
665
00:42:33.702 --> 00:42:35.160
There's a lot of money in sports.
666
00:42:35.785 --> 00:42:35.977
Yep.
667
00:42:36.462 --> 00:42:39.239
A lot of money in everything except for the things that are paying me.
668
00:42:44.282 --> 00:42:46.860
So speaking of which, though, if you were not in tech,
669
00:42:47.544 --> 00:42:48.940
what other career would you choose?
670
00:42:49.381 --> 00:42:53.260
I've taken the most roundabout way to even get to where I am now.
671
00:42:53.401 --> 00:42:55.900
So I don't have a good answer for that.
672
00:42:55.960 --> 00:42:59.615
just because I was in science that I dropped out of to go into film.
673
00:42:59.635 --> 00:43:00.920
I have a degree in film.
674
00:43:01.700 --> 00:43:04.228
Then I had nothing to do with that.
675
00:43:04.389 --> 00:43:06.796
So I went, I got a BA in urban planning.
676
00:43:07.438 --> 00:43:08.040
Would have needed a
677
00:43:08.140 --> 00:43:09.749
master's if I really wanted a job in that.
678
00:43:09.769 --> 00:43:11.600
And I didn't really feel like I wanted to do that.
679
00:43:12.120 --> 00:43:16.559
So then I got a vocational degree in design, which led me to getting back into web.
680
00:43:16.619 --> 00:43:16.860
That was
681
00:43:16.920 --> 00:43:24.100
a hobby of mine, but then got me hired as a teacher that then eventually led to the YouTube
682
00:43:24.160 --> 00:43:28.420
channel so i've been all over the place even if i had a plan i don't think i would actually
683
00:43:29.082 --> 00:43:34.938
be doing the thing that i say i would be doing okay well what about if you could just get a
684
00:43:35.500 --> 00:43:40.560
random skill like something that has nothing to do with any of those things if you don't have
685
00:43:40.560 --> 00:43:44.140
anything in mind that's fine but like if there's something that just sounds really cool that you're
686
00:43:44.160 --> 00:43:49.000
like if i could just do that like what would it be i mean for me the the one thing i've always
687
00:43:49.120 --> 00:43:53.980
wanted to be was a race car driver since i was a little kid oh nice i do like sim racing stuff now
688
00:43:54.120 --> 00:43:59.580
and like yeah driving a car like if i could if i won like 100 million and i could retire and i know
689
00:43:59.620 --> 00:44:04.600
i'd live comfortably because it's a rich man sport but i'd be like into like the touring cars or
690
00:44:04.680 --> 00:44:11.580
something like that just like the old man racing that they have going on yeah nice yeah i don't
691
00:44:11.620 --> 00:44:17.000
think i have the stamina for racing because you gotta do like so much driving and like such fast
692
00:44:17.060 --> 00:44:23.160
speeds and like i think it sounds fun for like going straight on a track for like you know 10
693
00:44:23.380 --> 00:44:29.140
seconds or whatever i'd do that but if you were asking me when i was like 12 i would have said
694
00:44:29.180 --> 00:44:34.720
formula one now i'm like there's no way that i would even step in one of those oh hello a while
695
00:44:34.840 --> 00:44:42.660
jason has appeared i have to translate because i've headphones on oh we have so many more questions
696
00:44:42.740 --> 00:44:47.860
for you i'm like which one's next oh here wait what's your favorite css typo for me it's the
697
00:44:48.222 --> 00:44:51.260
like there's a couple i used to post them on mastodon and hayden is really good at picking
698
00:44:51.401 --> 00:44:56.220
up on them but like one that i remember typing and feeling so embarrassed it was even like going
699
00:44:56.220 --> 00:45:02.740
to be in my typing history was colon fist dash child function and it's like it's supposed to be
700
00:45:02.860 --> 00:45:10.100
first child first child i was like i don't want to no do you have any typos that you're just like
701
00:45:10.140 --> 00:45:14.877
i'm gonna edit that out because that's embarrassing yeah the most embarrassing one for me is a display
702
00:45:15.941 --> 00:45:21.760
absolute display yeah i do that nice all the time i know i do it and i still do it and i still can't
703
00:45:21.800 --> 00:45:26.780
find the problem i'm just like why is this not working the other one that i do a lot is if i'm
704
00:45:26.800 --> 00:45:30.480
just building like a demo that just has like a bunch of empty divs so i want to put a background
705
00:45:30.681 --> 00:45:35.760
color on them but i just write color and that's really annoying because nothing shows there's no
706
00:45:35.880 --> 00:45:39.680
error in the dev tools there's nothing it's like the color's there why is it not working and then
707
00:45:39.680 --> 00:45:44.480
i'm like oh that's the text color right yeah that's been i've been doing that for a decade
708
00:45:44.662 --> 00:45:46.400
and I will continue doing it for sure.
709
00:45:47.522 --> 00:45:49.460
Yeah, I do feel like that is kind of backwards.
710
00:45:49.760 --> 00:45:52.919
Like it should have been color is the color of the box
711
00:45:53.704 --> 00:45:56.420
and then you say text color for the text color.
712
00:45:56.420 --> 00:45:57.960
Text color does make more sense.
713
00:45:58.524 --> 00:46:00.120
Are there tailwind typo blunders?
714
00:46:00.300 --> 00:46:02.020
Like if you're tailwinding by hand?
715
00:46:02.342 --> 00:46:03.540
And here's a follow-up question.
716
00:46:03.640 --> 00:46:05.620
How often do you tailwind from scratch by hand?
717
00:46:05.680 --> 00:46:07.099
You're like, I'm going to write every class
718
00:46:07.201 --> 00:46:08.980
in this class list by hand.
719
00:46:09.485 --> 00:46:10.440
And then what are your blunders?
720
00:46:11.124 --> 00:46:13.280
Do you make any silly mistakes where you type but
721
00:46:13.400 --> 00:46:18.480
instead of something I don't know yeah I don't I don't know uh off the top of my head a like
722
00:46:18.540 --> 00:46:23.220
silly mistake but yeah I do hand roll tailwind stuff for sure like if I'm building something
723
00:46:23.300 --> 00:46:27.800
I'll write it all from scratch I'm just like you know one class on look at what it looks like add
724
00:46:27.820 --> 00:46:33.620
another class another class like it's very iterative and then I'll also do like just duplicate
725
00:46:33.761 --> 00:46:37.900
it all you don't even need your javascript loop that like loops through the items just put that
726
00:46:38.462 --> 00:46:43.140
string of 20 classes on like eight items in a row and then you can clean it up later
727
00:46:43.441 --> 00:46:48.300
Yeah, I mean, I think it's all about what makes you the fastest to get the thing you want on the page.
728
00:46:48.400 --> 00:46:52.780
And then you can always abstract it out to be smaller and better and faster later.
729
00:46:53.182 --> 00:46:54.200
I just had a wild idea.
730
00:46:54.420 --> 00:46:56.620
What if there was a race between vanilla and Tailwind?
731
00:46:56.740 --> 00:47:02.120
You had to build the same piece of UI and you watched two people race it out.
732
00:47:02.280 --> 00:47:05.220
So the goal was to completion the fastest.
733
00:47:05.580 --> 00:47:12.000
Would a Tailwind typer, because they're typing way less characters and they're working directly in the markup, not between two files.
734
00:47:12.180 --> 00:47:22.120
would they spank a vanilla css developer what do you think i think in a sufficiently easy
735
00:47:23.183 --> 00:47:29.220
prompt yes like if you're gonna throw in a bunch of new css stuff that's maybe not supported or
736
00:47:29.501 --> 00:47:33.240
like you don't know what the syntax and tailwind would be because they have to do like gymnastics
737
00:47:33.441 --> 00:47:37.919
to make it work that stuff you'd probably be faster just you know if you're a expert in css
738
00:47:38.301 --> 00:47:43.020
you can just put it all in there but yeah if it's like here's these like 10 nested boxes and they
739
00:47:43.020 --> 00:47:47.240
need to have these padding and they're these colors and like you know something simple i think
740
00:47:47.400 --> 00:47:51.700
tailwind could win but it's also about typing speed there's a lot of variables or is there
741
00:47:51.861 --> 00:47:56.980
some ai assist like oh i'm always doing this so here's like blah there's a bunch of classes like
742
00:47:57.060 --> 00:48:00.820
i don't know i mean you better hope there's not a ul li because you're gonna have to type all that
743
00:48:00.920 --> 00:48:05.660
across all those li's whereas kevin's over there going direct descendant li boom boom boom and he's
744
00:48:05.680 --> 00:48:12.280
like done you know yeah i mean yes but you can so let's not forget though well i guess what's
745
00:48:12.320 --> 00:48:18.700
the rules like can you use css files or like anything normal css at all because you can define
746
00:48:18.760 --> 00:48:24.040
your own like tailwind classes and do some css stuff there and then just throw those classes
747
00:48:24.120 --> 00:48:28.360
on like they're just classes it is just css it's a crazy argument in the first place but
748
00:48:28.621 --> 00:48:36.040
what do you think kevin do you think you could beat a tail winder yeah i think i think it's
749
00:48:36.200 --> 00:48:41.120
like you said it would depend a lot on like the scale i think writing just the css is beneficial
750
00:48:41.481 --> 00:48:46.480
if there is like as soon as it's like i have one selector that can do a whole bunch of stuff and i
751
00:48:46.520 --> 00:48:52.460
don't have to apply it to 10 different items then the css starts like gaining an advantage but if it
752
00:48:52.520 --> 00:48:56.780
was just like one box and you had 10 classes that had to go on it tailwind's gonna win you know
753
00:48:56.780 --> 00:49:02.220
assuming same typing speed but now i i have a content idea for a video thank you adam i have
754
00:49:02.300 --> 00:49:07.780
to find someone who is really good at some tailwind and see what we can do yeah i mean i'm good at
755
00:49:07.840 --> 00:49:14.580
tailwind but not at not at typing though that's where i would feel i'm so slow at typing man like
756
00:49:14.741 --> 00:49:19.660
i although the type ahead features in that's one thing tailwind has that's true a lot of auto
757
00:49:19.660 --> 00:49:23.760
complete the type of a lot of the auto completes very tight and so yeah you really only need the
758
00:49:23.820 --> 00:49:27.559
first character or two before you start to get options and then you're just picking it from a
759
00:49:27.660 --> 00:49:32.880
menu but still i do think that that that video would it's that spicy question that everyone's
760
00:49:32.920 --> 00:49:38.280
wondering their head what would happen if you got the best tailwind person first the best css person
761
00:49:38.601 --> 00:49:43.780
and they went head to head on a couple of tasks yeah i mean i would nominate adam wathen as the
762
00:49:43.840 --> 00:49:48.420
creator of tailwind as the tailwind person i think he would probably do it first powell that'd be
763
00:49:48.460 --> 00:49:48.759
There you go.
764
00:49:48.980 --> 00:49:49.300
Amazing.
765
00:49:50.527 --> 00:49:50.759
Wow.
766
00:49:51.745 --> 00:49:51.918
Yeah.
767
00:49:52.248 --> 00:49:52.380
Yeah.
768
00:49:52.420 --> 00:49:54.160
I'd just be worried that I get spanked on that.
769
00:49:54.241 --> 00:49:54.559
But anyway,
770
00:49:55.104 --> 00:49:55.972
I'd get spanked.
771
00:49:56.800 --> 00:49:56.896
I'm,
772
00:49:57.042 --> 00:49:57.860
I'm actually pretty slow.
773
00:49:58.003 --> 00:49:58.419
People are like,
774
00:49:58.566 --> 00:49:58.676
okay,
775
00:49:58.882 --> 00:50:00.160
come over here and help me do this thing.
776
00:50:00.220 --> 00:50:00.980
You're probably going to nail it.
777
00:50:01.020 --> 00:50:01.380
First time.
778
00:50:01.420 --> 00:50:01.680
I'm like,
779
00:50:01.962 --> 00:50:03.035
Nope,
780
00:50:04.087 --> 00:50:04.420
but I'll,
781
00:50:04.540 --> 00:50:04.636
I'm,
782
00:50:04.764 --> 00:50:05.220
I'm patient.
783
00:50:08.862 --> 00:50:09.199
Yeah.
784
00:50:09.301 --> 00:50:11.380
We're getting pretty close to time here.
785
00:50:11.580 --> 00:50:12.580
Before we end,
786
00:50:12.740 --> 00:50:14.680
what things would you like to plug?
787
00:50:15.101 --> 00:50:17.080
If you go to my YouTube channel,
788
00:50:17.321 --> 00:50:21.320
you'd get anything you'd want to find if you're trying to learn any css stuff so it's just kevin
789
00:50:21.400 --> 00:50:26.580
powell on youtube you'll find me kevin powell with like css if for some reason my stuff doesn't come
790
00:50:26.620 --> 00:50:32.900
up if you are interested in newsletters and you don't mind having more inbox clutter i think my
791
00:50:32.940 --> 00:50:36.880
newsletter is pretty good i enjoy writing it and people seem to like it so you can find that at my
792
00:50:36.920 --> 00:50:42.460
website kevinpowell.co and that's where basically everything i'll say i'm up to is there too and
793
00:50:42.460 --> 00:50:46.700
i'm on blue sky if you're on social media and looking for somebody to follow you have courses
794
00:50:46.862 --> 00:50:47.820
on Frontend Master also.
795
00:50:48.020 --> 00:50:48.500
I'll just go ahead
796
00:50:48.500 --> 00:50:49.319
and plug those for you.
797
00:50:50.162 --> 00:50:51.259
Those look like a lot of work.
798
00:50:51.562 --> 00:50:52.440
They seem really great.
799
00:50:52.741 --> 00:50:53.940
I have a course there.
800
00:50:54.101 --> 00:50:54.759
I have other courses.
801
00:50:55.142 --> 00:50:56.300
So on my site,
802
00:50:56.360 --> 00:50:56.815
kevinpowell.co,
803
00:50:57.060 --> 00:50:59.460
there's links to any course stuff
804
00:50:59.501 --> 00:51:00.060
if you're looking for
805
00:51:00.060 --> 00:51:00.819
like curated paths
806
00:51:01.124 --> 00:51:02.260
on CSS stuff
807
00:51:02.260 --> 00:51:03.677
because you want to sort of
808
00:51:04.062 --> 00:51:05.080
dive more into the weeds
809
00:51:05.202 --> 00:51:05.980
instead of just learning
810
00:51:05.980 --> 00:51:06.880
about a feature at a time
811
00:51:06.941 --> 00:51:07.620
like you would on YouTube.
812
00:51:08.041 --> 00:51:09.538
Yeah, I have some content
813
00:51:09.802 --> 00:51:10.559
that can help out there too.
814
00:51:11.042 --> 00:51:11.280
All right.
815
00:51:11.320 --> 00:51:12.640
Well, thanks everyone for listening.
816
00:51:12.821 --> 00:51:13.380
If you liked it,
817
00:51:13.420 --> 00:51:13.979
please subscribe.
818
00:51:14.200 --> 00:51:15.200
Leave us some ratings and reviews.
819
00:51:15.341 --> 00:51:15.880
We appreciate it
820
00:51:15.880 --> 00:51:17.259
And we will catch you next time.
821
00:51:18.360 --> 00:51:21.240
Bum, bum, bum, bum, bum, bum.
822
00:51:23.322 --> 00:51:25.200
You've been watching Whiskey Web and Whatnot,
823
00:51:25.420 --> 00:51:27.559
recorded in front of a live studio audience.
824
00:51:27.820 --> 00:51:29.200
What the fuck are you talking about, Chuck?
825
00:51:30.160 --> 00:51:31.119
Enjoyed the show?
826
00:51:31.522 --> 00:51:31.899
Subscribe.
827
00:51:32.802 --> 00:51:34.440
You know people don't pay attention to these, right?
828
00:51:35.420 --> 00:51:39.560
Head to whiskey.fun for merch and to join our Discord server.
829
00:51:40.523 --> 00:51:40.980
I'm serious.
830
00:51:41.201 --> 00:51:43.339
It's like 2% of people who actually click these links.
831
00:51:43.862 --> 00:51:47.820
and don't forget to leave us a five star review and tell your friends about the show
832
00:51:48.463 --> 00:51:51.059
all right dude i'm out of here still got it