Dev Life S5E20 | Architecting for Scale: Design Systems & Web Components with Burton Smith

WEBVTT
1
00:00:00.040 --> 00:00:02.160
And he's like, hey, so there's a big pile of
2
00:00:02.240 --> 00:00:04.519
rocks in the road, and I decided to move it,
3
00:00:05.040 --> 00:00:07.240
and there's this big pile of money under it, so
4
00:00:07.240 --> 00:00:08.599
I thought i'd return it to you so he could
5
00:00:08.599 --> 00:00:10.880
give it to whoever it belongs to. And he's like, oh,
6
00:00:10.919 --> 00:00:13.839
that thing's like, that's for you. That's your money. And
7
00:00:13.880 --> 00:00:17.000
he's like, no, that's not mine. He's like, no, it is,
8
00:00:17.160 --> 00:00:19.800
as you know, and he says, he who travels the
9
00:00:19.879 --> 00:00:22.600
road best is he who makes the road smoother.
10
00:00:35.719 --> 00:00:40.119
Hey everybody, and welcome to the dev Life podcast. Today
11
00:00:40.439 --> 00:00:43.840
you were actually going to be exploring how discipline, design,
12
00:00:44.159 --> 00:00:47.840
and digital building blocks of the web are all coming
13
00:00:47.880 --> 00:00:51.640
together in software development. So, Matt, we have a very
14
00:00:51.840 --> 00:00:56.079
awesome guest today. This is Burton Smith and he has
15
00:00:56.280 --> 00:00:59.600
mastered the art of scaling design system at companies like
16
00:00:59.679 --> 00:01:02.560
zoch Doc and then he was at Microsoft before that.
17
00:01:03.640 --> 00:01:05.680
But kind of fun fact I'm going to put in
18
00:01:05.719 --> 00:01:08.760
here right from the beginning, he's also mastered the art
19
00:01:08.760 --> 00:01:13.879
of karate. So along those lines, today we're diving deep
20
00:01:13.920 --> 00:01:18.680
into the kata of web development, including the precision of
21
00:01:19.000 --> 00:01:24.680
web components to the strategic questions that define world class UX.
22
00:01:25.480 --> 00:01:29.439
But whether you're architecting a massive enterprise system or just
23
00:01:29.519 --> 00:01:33.400
trying to write cleaner, more reusable code, this really is
24
00:01:33.599 --> 00:01:36.719
an episode I think everybody's going to enjoy and get
25
00:01:37.000 --> 00:01:39.879
a lot of value out of. But before we go
26
00:01:39.879 --> 00:01:43.760
any further, let me introduce again. This is Burton Smith. Everybody,
27
00:01:43.799 --> 00:01:44.599
so welcome.
28
00:01:44.319 --> 00:01:47.040
To the show. Burton, awesome, thank you so much for
29
00:01:47.079 --> 00:01:48.120
having me. This is an honor.
30
00:01:48.799 --> 00:01:50.840
Yeah, and Matt, how are you doing today?
31
00:01:51.239 --> 00:01:53.959
I'm doing good. I mean I'm excited to learn some
32
00:01:54.159 --> 00:01:57.480
klatas and how that works with dev.
33
00:01:57.680 --> 00:02:01.480
Like, it's awesome having you on the show. It's good
34
00:02:01.480 --> 00:02:01.920
to be here.
35
00:02:02.280 --> 00:02:05.519
Burton. You You'll have to correct me if I'm wrong,
36
00:02:05.640 --> 00:02:08.520
but I always kind of try to stalk our guests
37
00:02:08.639 --> 00:02:12.120
before we get them on the on the episode. But
38
00:02:12.719 --> 00:02:15.000
from what I understand, you kind of started in sales
39
00:02:15.039 --> 00:02:19.400
support and then transitioned from there into software development, and
40
00:02:19.439 --> 00:02:22.039
then before long, it really didn't look like long. All
41
00:02:22.080 --> 00:02:24.599
of a sudden, you were like working at Microsoft, like
42
00:02:25.080 --> 00:02:27.639
from here to you know, as high as you go.
43
00:02:28.879 --> 00:02:31.520
But then now you're working at ZocDoc right, and you're
44
00:02:31.840 --> 00:02:35.120
a senior web platform engineer. So did I get that.
45
00:02:35.120 --> 00:02:38.680
All right, or that is correct? Yeah?
46
00:02:38.759 --> 00:02:40.960
Cool. Tell us a little bit more about that, though,
47
00:02:41.000 --> 00:02:44.120
like how did where did you get that start with
48
00:02:44.199 --> 00:02:47.319
software or with support? And then how did you make
49
00:02:47.360 --> 00:02:47.960
the transition?
50
00:02:49.120 --> 00:02:54.120
Yeah, and the climb to that was was felt much
51
00:02:54.159 --> 00:02:57.400
longer to me that probably it looks on my resume.
52
00:02:57.479 --> 00:03:01.400
But I started in sales support, which basically is a
53
00:03:01.400 --> 00:03:04.319
customer service rep. I started working on that, and we
54
00:03:04.639 --> 00:03:08.280
went through a series of transition acquisitions, and as we
55
00:03:08.280 --> 00:03:11.159
were going through that, we quickly lost a lot of
56
00:03:11.159 --> 00:03:14.479
our digital tools to help us run our business the
57
00:03:14.520 --> 00:03:17.319
way that we had before. And I happened to be
58
00:03:17.360 --> 00:03:20.120
going to school for information systems and I said, you
59
00:03:20.159 --> 00:03:22.360
know what, Hey, if you can get me an editor
60
00:03:22.400 --> 00:03:24.879
in a space to create stuff, I'll start building these
61
00:03:24.919 --> 00:03:26.039
tools out for you guys.
62
00:03:26.080 --> 00:03:28.000
And they did for some reason.
63
00:03:28.479 --> 00:03:29.919
I mean, that was a big risk on there, and
64
00:03:29.919 --> 00:03:32.120
I don't know what they were thinking, but they gave
65
00:03:32.159 --> 00:03:34.199
me a nice sandbox that I couldn't blow anything up
66
00:03:34.240 --> 00:03:37.280
in and I just started building tools for them. And
67
00:03:37.479 --> 00:03:41.039
it was interesting because being a customer service rep and
68
00:03:41.039 --> 00:03:44.919
then going to that was a jump that took actually
69
00:03:44.919 --> 00:03:48.759
a lot of effort, you know, being nobody would typically
70
00:03:48.759 --> 00:03:51.360
think of a customer service rep as being an IT person.
71
00:03:51.479 --> 00:03:54.000
But I wanted to do that, so I just kept
72
00:03:54.120 --> 00:03:57.400
kind of raising my hand anytime they had anything IT related.
73
00:03:57.479 --> 00:03:59.400
I was just like, I got it, I'll do it.
74
00:04:00.159 --> 00:04:02.560
As you know, started raising my hand enough times, they
75
00:04:02.599 --> 00:04:05.639
just started thinking about me as the IT person, and
76
00:04:05.680 --> 00:04:08.719
eventually that that was the you know, the vibe I
77
00:04:08.759 --> 00:04:11.719
was putting out, I guess, and built up enough trust
78
00:04:11.719 --> 00:04:13.879
that they were willing to take a risk on me.
79
00:04:15.240 --> 00:04:19.199
You know, we actually had someone at Limple who did
80
00:04:19.240 --> 00:04:21.600
that same kind of thing where she would She had
81
00:04:21.639 --> 00:04:26.120
been working in customer success and then moved over into
82
00:04:26.519 --> 00:04:30.759
some engineering. But I feel like it's like a secret
83
00:04:31.240 --> 00:04:34.720
power move because you have all this experience with what
84
00:04:34.839 --> 00:04:38.079
are the users happy with and not happy with, what
85
00:04:38.160 --> 00:04:41.040
are their biggest complaints, what are the biggest problems, And
86
00:04:41.079 --> 00:04:43.759
then you can take that knowledge back to the engineering
87
00:04:43.800 --> 00:04:46.800
team and be like, oh, well.
88
00:04:45.879 --> 00:04:46.959
This is what's up. You know.
89
00:04:47.000 --> 00:04:50.879
So I really a cool way to get into programming.
90
00:04:51.480 --> 00:04:51.800
Mmm.
91
00:04:52.759 --> 00:04:56.600
I also just want to like say, the power of
92
00:04:56.759 --> 00:05:00.639
raising your hand, like that is how you you jumped
93
00:05:00.759 --> 00:05:04.079
into the role you wanted. You raised your hand, right,
94
00:05:04.160 --> 00:05:05.920
And I was thinking about this other day in my
95
00:05:06.000 --> 00:05:11.040
career is the times that I've been promoted or chant
96
00:05:11.399 --> 00:05:13.240
like went to a roll and on it too. It
97
00:05:13.319 --> 00:05:17.120
started with me saying like, hey, yeah, all do this thing, yeah,
98
00:05:17.279 --> 00:05:21.600
you know, like and not complaining about not getting extra compensation,
99
00:05:21.800 --> 00:05:24.439
and then you know, eventually you become the guide. So
100
00:05:25.040 --> 00:05:27.079
that is a good advice for those of listenings.
101
00:05:27.160 --> 00:05:29.800
Raise your hand, yeah, a willingness.
102
00:05:30.240 --> 00:05:33.759
But so went back to the roots of this alo karate.
103
00:05:34.480 --> 00:05:37.439
When did you start karate? Was that the four cells?
104
00:05:39.120 --> 00:05:42.120
Yeah, well it all started back when I was a
105
00:05:42.160 --> 00:05:43.680
little kid and started.
106
00:05:43.319 --> 00:05:45.160
Watching Ninja Turtles. Yeah.
107
00:05:45.360 --> 00:05:49.079
Yeah, that's my origin story right there. It all just
108
00:05:49.120 --> 00:05:52.199
started with you know, kid at three o'clock in the
109
00:05:52.199 --> 00:05:55.519
afternoon every day watching Ninja Turtles. But yeah, I mean
110
00:05:55.560 --> 00:05:59.079
I've always had a lifelong fascination with martial arts and
111
00:05:59.120 --> 00:06:03.439
things like that, and and yeah, I worked through high
112
00:06:03.480 --> 00:06:07.439
school and through college teaching martial arts and that was my.
113
00:06:08.959 --> 00:06:10.439
Vocation and I loved it.
114
00:06:10.480 --> 00:06:12.680
You know, it taught me so much that really did
115
00:06:13.360 --> 00:06:16.160
start to build the foundation of what I know today
116
00:06:16.160 --> 00:06:20.560
and how I approach things today. It you know, the philosophies,
117
00:06:20.759 --> 00:06:24.279
the idea of always being learning, always being willing to
118
00:06:24.319 --> 00:06:25.040
try new things.
119
00:06:25.079 --> 00:06:26.519
You know, there's nothing.
120
00:06:26.279 --> 00:06:29.879
More humbling than then you know, you're a black belt
121
00:06:29.920 --> 00:06:31.720
in one style martial art, and then you go try
122
00:06:31.759 --> 00:06:33.800
another one and it's like you're a white belt all
123
00:06:33.839 --> 00:06:34.279
over again.
124
00:06:34.360 --> 00:06:34.560
Right.
125
00:06:34.639 --> 00:06:37.839
So my first black belt was in Japanese sword fighting,
126
00:06:38.360 --> 00:06:40.519
So I got that when I was a teenager. And
127
00:06:40.560 --> 00:06:42.759
then I got a first three black belt in a
128
00:06:42.800 --> 00:06:44.120
mixed style martial arts when.
129
00:06:43.959 --> 00:06:45.720
I was in my early twenties.
130
00:06:46.199 --> 00:06:48.040
And then I got a secondary black belt in another
131
00:06:48.079 --> 00:06:49.839
style of martial arts, and then I got a blue
132
00:06:49.839 --> 00:06:52.720
belt in Brazilian jiu jitsus. You know, every time I
133
00:06:52.759 --> 00:06:55.279
go to these new styles that basically had to learn
134
00:06:55.439 --> 00:06:57.560
or start over again and be willing to do that,
135
00:06:57.800 --> 00:07:00.360
you know, hopefully grabbing and learning from what I from
136
00:07:00.399 --> 00:07:03.399
the previous martial art and then just building on top
137
00:07:03.439 --> 00:07:06.439
of that to to you know, expand my skills.
138
00:07:07.800 --> 00:07:10.560
It's all clicking now, Like from a young age, you
139
00:07:10.600 --> 00:07:12.759
were raising your hand like okay, yeah, sign me up
140
00:07:12.759 --> 00:07:15.120
to you know, go fight with swords. I now sign
141
00:07:15.160 --> 00:07:18.240
you up to fight with my fists, you know. And
142
00:07:18.319 --> 00:07:20.399
so when it was time to sign up to you know,
143
00:07:20.519 --> 00:07:23.439
do do cod You're let's go you know.
144
00:07:23.639 --> 00:07:26.399
Why not? It is way easier than someone choking me
145
00:07:26.399 --> 00:07:27.040
out all the time.
146
00:07:27.120 --> 00:07:32.439
Lest yeah, cordant question here, which of the ninja turtles
147
00:07:32.600 --> 00:07:33.399
is the best one?
148
00:07:34.079 --> 00:07:34.399
Okay?
149
00:07:34.480 --> 00:07:37.319
Well, you know, I I'm a big fan of Michaelangelo.
150
00:07:37.399 --> 00:07:39.680
He's a party dudes, you know. I have a big,
151
00:07:39.959 --> 00:07:42.040
really big fan of his growing up.
152
00:07:42.480 --> 00:07:44.920
Absolutely same. I don't know there, it's something to be
153
00:07:44.959 --> 00:07:46.480
said for Donna Tello though that.
154
00:07:49.839 --> 00:07:51.319
So what so? Okay?
155
00:07:51.600 --> 00:07:55.600
Nube question here? I guess what color are lady like?
156
00:07:55.639 --> 00:07:57.600
I remember the colors that forgot been names.
157
00:07:58.319 --> 00:08:03.120
Michaelangelo's orange, okay, yeah, he was my favorite. He had
158
00:08:03.199 --> 00:08:06.480
the nun chucks right yeah, ye bingo yeah, and then
159
00:08:06.600 --> 00:08:08.680
Donatello is the one with the box staff.
160
00:08:08.680 --> 00:08:10.279
He's purple mm hmm.
161
00:08:11.040 --> 00:08:13.759
Leonardo had the what's the proper name.
162
00:08:13.600 --> 00:08:16.920
For the swords the katanas?
163
00:08:17.199 --> 00:08:21.120
Katana's okay, and he's blue. And then Raphael was kind
164
00:08:21.120 --> 00:08:25.920
of the like angry red turtle and it was the
165
00:08:26.680 --> 00:08:27.519
one of those.
166
00:08:28.000 --> 00:08:33.600
Short size yeah, the little forks thing. Yeah cool.
167
00:08:33.720 --> 00:08:35.039
Did you have a favorite, Matt.
168
00:08:35.679 --> 00:08:36.879
No, it was the orange one.
169
00:08:36.919 --> 00:08:39.759
Nklin Jellet right, yeah, he's and.
170
00:08:39.720 --> 00:08:42.279
He liked the pizza. We were just talking about pizza.
171
00:08:42.919 --> 00:08:46.120
Yeah, he had, as the kids say these days, he
172
00:08:46.200 --> 00:08:49.960
had riz. Some some nzees laugh in their face off.
173
00:08:50.039 --> 00:08:52.759
Right now, Okay, back to my discussion site. You worked
174
00:08:52.799 --> 00:08:56.600
at one of the world's largest tech giants at Microsoft,
175
00:08:56.799 --> 00:09:00.240
and now at a major health tech platform. Was the
176
00:09:00.279 --> 00:09:03.960
biggest culture shock in how these two different environments approach
177
00:09:04.320 --> 00:09:05.679
brought in architecture.
178
00:09:06.399 --> 00:09:07.320
Yeah.
179
00:09:08.320 --> 00:09:13.279
So at Microsoft, we were a small team that serviced
180
00:09:13.600 --> 00:09:16.799
quite a few engineers that used our platform. Very very
181
00:09:16.840 --> 00:09:20.360
interesting things that kind of evolved as I was there.
182
00:09:20.480 --> 00:09:25.159
We went from you know, we created our components or
183
00:09:25.200 --> 00:09:28.399
our design system using web components, and I'm sure we'll
184
00:09:28.399 --> 00:09:30.279
talk a little more about that later, but it was
185
00:09:30.399 --> 00:09:33.720
amazing to see as the product became better. As a
186
00:09:33.799 --> 00:09:37.320
design system became better and better, our reach began expanding
187
00:09:37.519 --> 00:09:39.759
wider and wider, much more. There were a lot more
188
00:09:39.799 --> 00:09:43.039
teams that began adopting it and using it as an
189
00:09:43.039 --> 00:09:46.840
alternative to their existing platforms because of the power that
190
00:09:46.840 --> 00:09:49.919
it brought. And so we had quite a few different
191
00:09:50.039 --> 00:09:53.200
organizations taking advantage of our design systems. So I think
192
00:09:53.240 --> 00:09:55.399
at one point we had like three hundred and fifty
193
00:09:55.879 --> 00:09:59.960
or to four hundred engineers that were participating in use
194
00:10:00.240 --> 00:10:01.279
our design systems.
195
00:10:01.360 --> 00:10:01.919
So that was.
196
00:10:03.639 --> 00:10:06.000
A lot because they were all kind of using them
197
00:10:06.000 --> 00:10:08.600
in different ways in different parts of their application, and
198
00:10:08.799 --> 00:10:12.600
so there was a lot of context switching that we
199
00:10:12.639 --> 00:10:16.000
had to do too to be able to learn, you know,
200
00:10:16.039 --> 00:10:23.440
how how they use those components and whatnot. Whereas at ZocDoc, it's, uh,
201
00:10:23.559 --> 00:10:26.200
it's almost like a startup, you know, a.
202
00:10:26.120 --> 00:10:27.879
Little less of an.
203
00:10:27.519 --> 00:10:31.279
Enterprise type feel, much more of a fast moving enterprise,
204
00:10:31.480 --> 00:10:34.120
fast moving startup feel. Everyone wants to move fast and
205
00:10:34.600 --> 00:10:37.879
the product is much smaller, which is kind of fun.
206
00:10:37.960 --> 00:10:40.120
And so we get to learn a lot more about
207
00:10:40.120 --> 00:10:42.200
the different aspects of how the design system is being
208
00:10:42.279 --> 00:10:44.480
used and how we can help scale it for our engineers,
209
00:10:44.519 --> 00:10:45.759
which is pretty awesome.
210
00:10:46.679 --> 00:10:49.639
Cool. Well, we're kind of the biggest differences there, like
211
00:10:49.639 --> 00:10:53.080
like with with the code based in particular. You know,
212
00:10:53.120 --> 00:10:56.879
you've got this startup and then you have this like really, uh,
213
00:10:58.200 --> 00:11:02.639
I guess built up enterprise with Microsoft, But like as
214
00:11:02.639 --> 00:11:07.120
you were actually implementing the design, how did that process
215
00:11:07.200 --> 00:11:10.399
differ between the two scales there?
216
00:11:11.240 --> 00:11:16.159
Yeah, so I feel like at Microsoft we were a
217
00:11:16.200 --> 00:11:18.919
little more removed from the actual product. We didn't know
218
00:11:18.960 --> 00:11:21.240
as much about the products that our design system was
219
00:11:21.279 --> 00:11:24.639
going into. We were in a completely sometimes a very
220
00:11:24.919 --> 00:11:29.679
completely separate organization from other consuming products that were in
221
00:11:29.720 --> 00:11:34.799
our so we were very far removed from the actual implementation.
222
00:11:34.279 --> 00:11:34.679
Piece of it.
223
00:11:34.759 --> 00:11:37.799
So a lot of times we'd get requests and people
224
00:11:37.840 --> 00:11:40.320
coming in asking for things and they're like, hey, we're
225
00:11:40.320 --> 00:11:41.919
trying to use this in this way, and we're like,
226
00:11:42.120 --> 00:11:43.080
what is that?
227
00:11:43.360 --> 00:11:44.879
What part of the application is this?
228
00:11:44.879 --> 00:11:47.000
And they're like, oh, we're in a completely different organization,
229
00:11:47.120 --> 00:11:49.600
but we needed a design system to build with, so
230
00:11:49.679 --> 00:11:53.600
we're using yours. So that was an interesting way to
231
00:11:53.679 --> 00:11:55.600
try to build things because we had to build in
232
00:11:55.639 --> 00:11:59.120
a very very agnostic way, right Our design system had
233
00:11:59.120 --> 00:12:02.759
to be very agnostic and very flexible and open for
234
00:12:02.840 --> 00:12:07.159
interpretation depending on what team was using it. Whereas at
235
00:12:07.639 --> 00:12:10.200
zoc doc it's much we're much more intimate with the
236
00:12:10.240 --> 00:12:13.200
actual implementation. We're you know, helping, you know, with the
237
00:12:13.240 --> 00:12:16.480
integrations directly, we are help, you know, helping with code
238
00:12:16.559 --> 00:12:18.840
migrations into the product itself.
239
00:12:18.879 --> 00:12:19.919
The product is much.
240
00:12:19.759 --> 00:12:22.919
Smaller, so we know a lot more about the code
241
00:12:22.919 --> 00:12:25.679
space that all of our stuff is going into. So
242
00:12:25.960 --> 00:12:29.120
there's a lot of coupling that's happening with the design system,
243
00:12:29.159 --> 00:12:32.360
which actually we're having to actively pull away from and
244
00:12:32.399 --> 00:12:35.240
try to decouple a little bit from so because there's
245
00:12:35.240 --> 00:12:39.159
so many specific requests and so it's so closely tied
246
00:12:39.159 --> 00:12:42.279
to the actual product that there's there's a lot of
247
00:12:43.120 --> 00:12:46.240
feature specific behaviors and things that are always being requested
248
00:12:46.279 --> 00:12:51.120
of the system that we're trying to push back against
249
00:12:51.120 --> 00:12:52.480
a little bit to try to keep it a little
250
00:12:52.519 --> 00:12:53.200
more agnostic.
251
00:12:54.200 --> 00:12:56.639
Yeah, So, how.
252
00:12:56.320 --> 00:12:59.480
Did your experience teaching others in karate for example, or
253
00:12:59.559 --> 00:13:02.759
or public speaking helping you become a better ager, or
254
00:13:02.759 --> 00:13:06.759
when it comes to explaining conflict plex technical wise to
255
00:13:06.960 --> 00:13:08.320
stakeholders for example.
256
00:13:09.159 --> 00:13:13.840
That's a really good question. So it's interesting at Microsoft going.
257
00:13:15.600 --> 00:13:19.039
From I was a solution architect, full stack fullstack dot
258
00:13:19.120 --> 00:13:22.879
net solution architect at the job before Microsoft, and then
259
00:13:22.919 --> 00:13:26.440
I moved into design systems, which was very specific, you know,
260
00:13:26.559 --> 00:13:29.840
very scoped front end development, which was awesome. I loved
261
00:13:29.879 --> 00:13:31.759
being able to dive deep on that. But the thing
262
00:13:31.799 --> 00:13:36.519
that was interesting to me was the amount of time
263
00:13:36.759 --> 00:13:39.919
that I then needed to spend on education and teaching
264
00:13:39.960 --> 00:13:42.879
people about what design systems were, how to use the
265
00:13:42.919 --> 00:13:49.039
design system appropriately, how to consume it correctly in their
266
00:13:49.200 --> 00:13:52.720
application and get things wired up correctly. So I spent
267
00:13:52.840 --> 00:13:55.759
a great deal of my time on that education piece
268
00:13:55.879 --> 00:13:59.080
and getting people informed about design systems.
269
00:13:59.279 --> 00:14:00.159
So I spent.
270
00:14:01.799 --> 00:14:04.799
I would say probably half to two thirds of my
271
00:14:04.919 --> 00:14:07.200
time doing that, not just coding.
272
00:14:07.279 --> 00:14:09.639
So that was a little bit of a shift, going from.
273
00:14:09.799 --> 00:14:12.960
Being in the code all day, full stack engineering to
274
00:14:13.759 --> 00:14:16.159
this paradigm where I'm doing a lot more teaching, and
275
00:14:16.200 --> 00:14:18.919
then even now moving into ZocDoc.
276
00:14:18.960 --> 00:14:20.840
It's been great because.
277
00:14:20.919 --> 00:14:24.960
The maturity level of the design system, because they've operated
278
00:14:25.039 --> 00:14:28.879
so fast and kind of at a startup pace, the
279
00:14:28.919 --> 00:14:32.559
design system itself is due for an upgrade, a mature
280
00:14:33.039 --> 00:14:37.080
maturity step in the design system maturity model. So now
281
00:14:37.159 --> 00:14:39.600
being able to educate people and say, hey, here's where
282
00:14:39.600 --> 00:14:41.559
we are right now, here's where we want to be,
283
00:14:41.600 --> 00:14:44.240
and here's what we can do with a full fledged
284
00:14:44.320 --> 00:14:48.000
design system, you know, with capabilities of theming, light, dark mode,
285
00:14:48.039 --> 00:14:51.200
all this stuff, and just being able to help show
286
00:14:51.240 --> 00:14:54.679
the potential of what the design system can do once
287
00:14:54.720 --> 00:14:57.679
we start to evolving it. Being able to articulate that
288
00:14:57.799 --> 00:15:01.399
and communicate that has been paramount, like there's if I
289
00:15:01.440 --> 00:15:03.679
can't do that, then it's very hard to sell the
290
00:15:03.679 --> 00:15:06.960
design system, which unfortunately is a massive part of design
291
00:15:06.960 --> 00:15:10.559
systems is selling people on it, getting people on board with, Hey,
292
00:15:11.320 --> 00:15:14.279
we're building a design system that is very opinionated, that
293
00:15:14.360 --> 00:15:17.320
may not be in line with your opinion, but we still.
294
00:15:17.120 --> 00:15:17.960
Want you to use it.
295
00:15:18.039 --> 00:15:20.600
So you know, there's a lot of salesmanship involved with
296
00:15:20.639 --> 00:15:23.720
that process, and being able to communicate that and articulate
297
00:15:23.759 --> 00:15:26.480
that is a key factor in being able to be
298
00:15:26.519 --> 00:15:28.000
successful with design systems.
299
00:15:29.120 --> 00:15:32.240
So let's kind of stop there because I can remember being,
300
00:15:32.799 --> 00:15:36.639
you know, maybe a younger engineer, and if someone had
301
00:15:36.639 --> 00:15:40.320
said design systems, I think I may have misunderstood exactly
302
00:15:40.320 --> 00:15:43.480
what they were talking about. You know, design is one thing,
303
00:15:43.519 --> 00:15:47.559
but design system I think, is its own thing. So
304
00:15:47.879 --> 00:15:50.840
how would you describe that for someone who's unfamiliar with
305
00:15:50.879 --> 00:15:54.200
design system Like, what, what are we talking about? Exactly?
306
00:15:54.519 --> 00:15:55.240
Why would a.
307
00:15:55.200 --> 00:15:59.360
Company want to implement their own design systems? Kind of
308
00:15:59.399 --> 00:16:00.679
dig into that a little.
309
00:16:00.480 --> 00:16:04.600
Bit before we keep going, Yeah, and this is I
310
00:16:04.639 --> 00:16:07.879
feel like a little bit of unfortunate branding with design
311
00:16:07.919 --> 00:16:10.480
systems and with the word A lot of people think
312
00:16:10.600 --> 00:16:13.600
design systems are a designer tool, when in reality, no,
313
00:16:13.720 --> 00:16:15.799
it's The way I like to scope things for design
314
00:16:15.799 --> 00:16:19.240
systems is design systems are the way that we build applications,
315
00:16:19.360 --> 00:16:20.879
and it's the way that we try to build them
316
00:16:20.919 --> 00:16:22.039
in a scalable way.
317
00:16:22.240 --> 00:16:23.679
So a lot of times, you.
318
00:16:23.600 --> 00:16:27.200
Know, people think about you know, material UI is a
319
00:16:27.240 --> 00:16:32.720
famous design system, fluent UIs is Microsoft's design system. You know,
320
00:16:32.720 --> 00:16:34.919
there's a lot of these really big names in design
321
00:16:34.960 --> 00:16:40.639
systems out there, and they are basically branded ways of
322
00:16:40.799 --> 00:16:45.759
building applications. So when we sit down and try to
323
00:16:46.480 --> 00:16:48.519
you know, set up a design system, there's a lot
324
00:16:48.600 --> 00:16:50.759
of things that go into it. You know, color palettes,
325
00:16:50.879 --> 00:16:53.399
what components do we need in the design system? But
326
00:16:53.480 --> 00:16:55.840
really a lot of there's things that need to go
327
00:16:55.919 --> 00:16:59.000
into it, like voice and tone, Like what's the kind
328
00:16:59.000 --> 00:17:01.679
of vibe that we want to have in the application itself?
329
00:17:01.799 --> 00:17:04.400
And that will help inform a lot of the other things.
330
00:17:04.480 --> 00:17:07.160
How do how do we manage all of our components
331
00:17:07.160 --> 00:17:10.279
and documentation and who can who can contribute to it
332
00:17:10.319 --> 00:17:12.960
and all these governance model things. There's a lot of
333
00:17:13.039 --> 00:17:17.960
deeper meaning and processes behind the design system itself. So yeah,
334
00:17:18.000 --> 00:17:21.039
it's a little little misleading with that word design in there,
335
00:17:21.039 --> 00:17:26.000
but really, design systems are. They're they're a a platform
336
00:17:26.119 --> 00:17:29.599
tool to help us build scalable user interfaces.
337
00:17:30.279 --> 00:17:33.359
So when you're building your design systems, at are you
338
00:17:33.680 --> 00:17:37.079
is there's a particular code framework that you're a fan
339
00:17:37.160 --> 00:17:40.920
of for frying like is it Angular or React or the.
340
00:17:42.440 --> 00:17:43.559
H all of them?
341
00:17:43.680 --> 00:17:46.200
And then I say that little little tongue in cheek,
342
00:17:46.240 --> 00:17:50.759
I actually prefer web components for design system And that's
343
00:17:50.880 --> 00:17:53.200
kind of sounds a lot of people when they hear
344
00:17:53.200 --> 00:17:55.480
web components, are like, yeah, I use web components. I
345
00:17:55.519 --> 00:17:58.000
write them my web components and react or I write
346
00:17:58.039 --> 00:18:00.480
my web components in view. But actually there is a
347
00:18:00.480 --> 00:18:05.119
a standards based web component. It's a W three C
348
00:18:05.440 --> 00:18:09.720
spec usually called custom elements. It's usual web components. Is
349
00:18:09.759 --> 00:18:14.599
this idea that involves custom elements? Shadow dom? A lot
350
00:18:14.640 --> 00:18:17.640
of people have heard of shadow dom, usually negative things, unfortunately,
351
00:18:17.720 --> 00:18:22.119
but shadow dom, HTML templates things like that. So the
352
00:18:22.200 --> 00:18:24.759
cool thing about that is that when you write your
353
00:18:25.000 --> 00:18:28.880
web your design systems and web components, web components are
354
00:18:28.880 --> 00:18:32.119
framework agnostics, so I can use them in any framework
355
00:18:32.200 --> 00:18:33.839
that I want to, So I can drop them in
356
00:18:33.880 --> 00:18:37.279
a React component or an Angular component. And actually I joke,
357
00:18:37.880 --> 00:18:40.519
semi joke that one of the hardest things when I
358
00:18:40.559 --> 00:18:43.920
got to Microsoft about building a design system web components
359
00:18:44.039 --> 00:18:47.519
was learning everybody else's frameworks because I thought, I was like,
360
00:18:48.440 --> 00:18:50.640
I don't have to worry about frameworks anymore. I'm writing
361
00:18:50.720 --> 00:18:53.359
them in web components now. But the reality is is
362
00:18:53.359 --> 00:18:55.920
that in order to help people, you know, consume and
363
00:18:56.000 --> 00:18:58.640
use the design system, I now had to learn Angular
364
00:18:58.880 --> 00:19:02.000
and React and view and solid jas so that I
365
00:19:02.039 --> 00:19:04.920
could teach people how to now integrate their web components
366
00:19:04.960 --> 00:19:07.759
into that that framework that they're using.
367
00:19:09.119 --> 00:19:10.319
So that's using my weapon of.
368
00:19:10.319 --> 00:19:13.759
Choice nice and I do want to get into that
369
00:19:13.799 --> 00:19:15.640
a little bit more as well, because I know web
370
00:19:15.680 --> 00:19:19.200
components is something you've kind of become known for of sorts.
371
00:19:19.240 --> 00:19:22.640
But I am curious, like again going back to this
372
00:19:22.720 --> 00:19:25.599
difference between more of a startup phil to something more
373
00:19:25.640 --> 00:19:31.079
like Microsoft that is a larger enterprise. But at what point,
374
00:19:31.319 --> 00:19:33.680
like you know, a lot of a lot of teams
375
00:19:33.720 --> 00:19:36.480
maybe start to try to build their own design system
376
00:19:36.519 --> 00:19:40.359
too early or maybe some even too late. But what
377
00:19:40.480 --> 00:19:42.640
really do you think are those you know, quote unquote
378
00:19:42.680 --> 00:19:46.759
symptoms or signs that hey, it's it's really necessary for us,
379
00:19:46.880 --> 00:19:48.599
or it would be a really smart move for us
380
00:19:48.680 --> 00:19:51.119
to start making our own design system.
381
00:19:51.960 --> 00:19:53.119
Yeah, I think.
382
00:19:53.480 --> 00:19:55.160
I think the first thing is you should ask if
383
00:19:55.200 --> 00:19:58.240
there's already a design system at your company. I think
384
00:19:58.279 --> 00:20:00.319
that's part of the some people don't realize is that
385
00:20:00.359 --> 00:20:02.960
their company may already have a design system that.
386
00:20:02.880 --> 00:20:03.480
They can use.
387
00:20:03.640 --> 00:20:07.519
But I think that anytime you need to start building
388
00:20:07.559 --> 00:20:11.279
an application, I think it's important to start thinking with
389
00:20:11.359 --> 00:20:15.319
the system mindset and thinking about how you can start
390
00:20:15.359 --> 00:20:19.799
reusing things, because the moment you can make things portable
391
00:20:20.279 --> 00:20:24.359
and reusable is the moment you start having a design system,
392
00:20:24.400 --> 00:20:27.200
whether you mean to or not. And so if you
393
00:20:27.400 --> 00:20:29.880
let's say you start creating components and you're like, well
394
00:20:29.920 --> 00:20:33.359
we have a button component, and we have a dialogue component,
395
00:20:33.440 --> 00:20:35.519
and we have you know, and you start creating these
396
00:20:35.519 --> 00:20:38.599
collections of components, you are starting to build a design system,
397
00:20:38.640 --> 00:20:40.519
whether you want to or not. And so I think
398
00:20:40.519 --> 00:20:44.799
it's important to now start thinking about scalability and saying,
399
00:20:45.160 --> 00:20:47.079
how do we make sure that we can scale these
400
00:20:47.160 --> 00:20:50.720
in other environments, other implementations if we need to write
401
00:20:50.720 --> 00:20:53.720
so not just in my specific feature, I want to
402
00:20:53.720 --> 00:20:56.400
make sure that this can translate over to other features
403
00:20:56.440 --> 00:20:58.240
as well, because that's one of the key tenets of
404
00:20:58.240 --> 00:21:02.039
a design system is we want to old consistency across
405
00:21:02.079 --> 00:21:05.960
the user experience, and we want to try to reduce
406
00:21:06.079 --> 00:21:11.599
that cognitive load that developers have by creating user interface consistency.
407
00:21:11.680 --> 00:21:15.119
You know, they did an interesting study with Nike actually
408
00:21:15.160 --> 00:21:17.759
one time where they had a user go through the
409
00:21:17.799 --> 00:21:21.160
customer journey and you know, their their application, you know,
410
00:21:21.279 --> 00:21:24.839
buttons looked square and had one color, and then as
411
00:21:24.880 --> 00:21:27.200
they moved into the e commerce experience, it was clearly
412
00:21:27.240 --> 00:21:29.759
a different application by a different team. Their buttons were
413
00:21:29.839 --> 00:21:32.200
rounded in a different you know, and they were orange
414
00:21:32.200 --> 00:21:35.680
instead of black, and they had a different look and feel.
415
00:21:35.720 --> 00:21:37.799
And actually people were a little bit caught off card
416
00:21:37.799 --> 00:21:40.519
thinking maybe their session had been hijacked or they had
417
00:21:40.519 --> 00:21:43.599
been moved to the wrong site or something like that.
418
00:21:43.960 --> 00:21:47.400
And every time we introduce these kind of nuances throughout
419
00:21:47.400 --> 00:21:50.960
the customer journey, that increases the cognitive load on our
420
00:21:51.079 --> 00:21:54.440
users and makes them more and more stressed as they
421
00:21:54.519 --> 00:21:56.640
use our application. We don't want that. We want them
422
00:21:56.680 --> 00:21:59.799
to feel very comfortable and very happy in our applications
423
00:21:59.839 --> 00:22:01.720
and we want them to do the things that we
424
00:22:01.759 --> 00:22:04.440
ask them to do. So having a design system and
425
00:22:04.480 --> 00:22:08.039
having that consistency layer throughout the application can really help
426
00:22:08.160 --> 00:22:12.440
drive a quality user experience. So so having that in
427
00:22:12.480 --> 00:22:15.559
your mind and thinking about how do I scale these
428
00:22:15.680 --> 00:22:19.160
components from one place to another, I think really is
429
00:22:19.160 --> 00:22:22.359
important if you're planning on building any kind of user interface,
430
00:22:22.440 --> 00:22:24.640
is a very very important mindset to have.
431
00:22:26.039 --> 00:22:29.480
I bet the marketers listening would say it probably is
432
00:22:29.480 --> 00:22:30.200
good for your.
433
00:22:30.039 --> 00:22:31.839
Balance rates to have consistency.
434
00:22:35.039 --> 00:22:38.880
So let's say I'm working on a team and you know,
435
00:22:38.920 --> 00:22:41.599
we use something that materiality why but you know, we
436
00:22:41.640 --> 00:22:44.000
want to make it our own though, we don't really
437
00:22:44.039 --> 00:22:45.839
want to spend the time to you know, make a
438
00:22:45.880 --> 00:22:50.359
whole custom design system. So we take movie and we
439
00:22:50.440 --> 00:22:53.880
start changing it to make it our own design system,
440
00:22:54.480 --> 00:22:55.880
and then we start consuming that.
441
00:22:56.160 --> 00:22:57.559
How do you feel about that approach?
442
00:22:59.200 --> 00:23:01.559
Yeah, So it's kind of the build versus buy, Right
443
00:23:01.680 --> 00:23:04.440
do I build my own or do I buy one
444
00:23:04.480 --> 00:23:09.279
and customize it? And I think the magic it depends
445
00:23:09.319 --> 00:23:11.839
I think comes into here because I think it depends
446
00:23:11.880 --> 00:23:15.000
on one the level of skill of the team as
447
00:23:15.079 --> 00:23:18.000
well as the bandwidth of the team. So if I'm
448
00:23:18.160 --> 00:23:22.559
a one man show running you know, every aspect of it,
449
00:23:23.000 --> 00:23:26.839
I'm doing the e commerce site I'm doing the networking systems,
450
00:23:26.920 --> 00:23:29.559
I'm doing everything. It probably doesn't make a lot of
451
00:23:29.559 --> 00:23:32.119
sense to build your own from scratch and try to
452
00:23:32.160 --> 00:23:34.839
maintain it. Likewise, if I'm a back end engineer and
453
00:23:34.880 --> 00:23:37.559
we just have a whole room of back end engineers,
454
00:23:37.559 --> 00:23:39.759
we don't have any friend end engineers that have experience
455
00:23:39.799 --> 00:23:45.559
in user interface development. Probably taking a pre developed design
456
00:23:45.599 --> 00:23:48.519
system off the shelf, you're probably going to be a
457
00:23:48.519 --> 00:23:51.240
lot safer than trying to home grow your own in
458
00:23:51.279 --> 00:23:53.799
those scenarios to make sure you, you know, hit things
459
00:23:53.799 --> 00:23:58.359
like accessibility and proper semantics in your components and things
460
00:23:58.400 --> 00:24:01.240
like that. A lot of the those component libraries will
461
00:24:01.279 --> 00:24:04.960
have most of that built in for you. Now, if
462
00:24:04.960 --> 00:24:09.400
you're a dedicated team and you are able to build
463
00:24:09.400 --> 00:24:13.440
your own, I'm a big proponent of that because scale
464
00:24:13.559 --> 00:24:16.680
and longevity of the product itself. I always you know,
465
00:24:17.200 --> 00:24:19.240
people say, don't think of design systems as a product,
466
00:24:19.240 --> 00:24:20.880
but I kind of do. I think that, you know,
467
00:24:20.920 --> 00:24:23.079
we need to think about it as you know, how
468
00:24:23.119 --> 00:24:25.839
do we how do we maintain it and market it
469
00:24:25.920 --> 00:24:28.519
and do all of these things. And I've seen time
470
00:24:28.559 --> 00:24:31.160
and time again where people have, you know, pull a
471
00:24:31.200 --> 00:24:34.240
movie off the shelf. Like you said, they've customized it,
472
00:24:34.400 --> 00:24:38.039
and that got them really pretty far, pretty fast. But
473
00:24:38.119 --> 00:24:40.640
then as soon as they needed something outside of that,
474
00:24:41.000 --> 00:24:43.880
then it becomes harder and harder and harder to now
475
00:24:44.000 --> 00:24:46.640
add in those new features. And then when the time
476
00:24:46.680 --> 00:24:49.279
comes to upgrade to the next version, you now have
477
00:24:49.359 --> 00:24:52.359
this technical debt that you have to work around and
478
00:24:52.400 --> 00:24:55.400
make sure that can either upgrade or be removed safely
479
00:24:55.640 --> 00:25:00.680
with the next version. So it may buy you speak initially,
480
00:25:00.759 --> 00:25:03.359
but I think in the long run of the product,
481
00:25:03.440 --> 00:25:07.839
it will slow you down. Ultimately, it can cause problems.
482
00:25:08.279 --> 00:25:10.960
So I'm usually a big proponent of building it. If
483
00:25:11.000 --> 00:25:14.000
you have the skills in the manpower, you'll have much
484
00:25:14.559 --> 00:25:17.759
more long term happiness with the design system that way.
485
00:25:18.599 --> 00:25:20.880
Yeah, that's something I'm definitely seeing of, Like this single
486
00:25:21.000 --> 00:25:25.720
responsibility principle, right, you know, like we're using one component
487
00:25:25.839 --> 00:25:28.759
and then all of a sudden it becomes three different components.
488
00:25:28.799 --> 00:25:32.079
But we're married to the you know, this design system
489
00:25:32.160 --> 00:25:34.880
that got online and now we have to you know,
490
00:25:35.000 --> 00:25:39.119
make this component do some weird things, Oh for sure.
491
00:25:39.920 --> 00:25:42.480
So Matt, well maybe it was I can't remember now,
492
00:25:42.519 --> 00:25:45.400
I think it was Matt mentioned web components earlier on
493
00:25:45.640 --> 00:25:47.440
and I said I wanted to go back to it,
494
00:25:47.440 --> 00:25:49.759
and I do. I think it would be a good
495
00:25:49.759 --> 00:25:50.599
time for that.
496
00:25:50.680 --> 00:25:51.079
So like.
497
00:25:52.720 --> 00:25:55.119
You do, go around, you give these presentations on this.
498
00:25:55.279 --> 00:25:58.079
You obviously have a passion for web components, but like,
499
00:25:58.160 --> 00:26:00.240
what what is it about web component and this? It
500
00:26:00.359 --> 00:26:02.920
really excites you. In relation to all of this and
501
00:26:03.000 --> 00:26:04.200
just in general.
502
00:26:04.640 --> 00:26:06.920
I think there's a couple of things. One, I think
503
00:26:06.960 --> 00:26:12.160
they're they're pretty cool technology. They provide some great features
504
00:26:12.240 --> 00:26:17.079
like you know, cross cross framework compatibility, other framework agnostic.
505
00:26:17.240 --> 00:26:19.039
But I think the other thing too is that they
506
00:26:19.039 --> 00:26:23.359
were they're kind of uncharted territory in some aspects. When
507
00:26:23.359 --> 00:26:25.359
I got to Microsoft, one of the things that I
508
00:26:25.480 --> 00:26:28.880
noticed was, you know, they there was this big promise
509
00:26:28.920 --> 00:26:29.720
of web components.
510
00:26:29.759 --> 00:26:30.960
Oh, you can use them anywhere.
511
00:26:31.279 --> 00:26:33.480
You can you know, plug them into React, you can
512
00:26:33.480 --> 00:26:36.559
plug them into Angular, et cetera, et cetera. And then
513
00:26:36.720 --> 00:26:39.960
when I got there and actually started doing it and
514
00:26:40.039 --> 00:26:43.759
helping teams, you know, start using these components, I realized
515
00:26:43.799 --> 00:26:47.680
that there was a pretty big gap between the promise
516
00:26:47.720 --> 00:26:51.519
and reality, where yes, they did technically work in those scenarios,
517
00:26:51.799 --> 00:26:54.880
but using them and the developer experience in those scenarios
518
00:26:55.200 --> 00:26:56.359
was terrible.
519
00:26:56.519 --> 00:26:57.480
It was so bad.
520
00:26:57.720 --> 00:27:00.279
We get so used to having, like when we write
521
00:27:00.279 --> 00:27:03.240
with a view component. When you start, you know, using
522
00:27:03.319 --> 00:27:06.039
props and things like that, you can define the types
523
00:27:06.039 --> 00:27:09.039
of props and you have type validation with your with
524
00:27:09.079 --> 00:27:11.680
your props, and it'll tell you when you're misusing APIs
525
00:27:11.799 --> 00:27:14.440
and you'll get auto complete, you'll get.
526
00:27:16.440 --> 00:27:17.759
You know, hover information.
527
00:27:17.799 --> 00:27:20.200
When you hover over, it'll give you contextual information and
528
00:27:20.559 --> 00:27:24.119
docs and things like that. And I realized that's not
529
00:27:24.440 --> 00:27:28.400
the reality with web components. If you're lucky, you'll add
530
00:27:28.400 --> 00:27:30.960
a web components to a page and it won't do anything.
531
00:27:31.519 --> 00:27:33.720
But in most frameworks, when you add a web component
532
00:27:33.759 --> 00:27:35.480
to a page, it'll blow up on you and say, hey,
533
00:27:35.480 --> 00:27:37.400
you can't make up elements.
534
00:27:37.440 --> 00:27:39.000
That's not allowed. Like React.
535
00:27:39.039 --> 00:27:42.559
If you start throwing you know, custom elements and web
536
00:27:42.599 --> 00:27:46.559
components and in a React template in JSX, it freaks
537
00:27:46.559 --> 00:27:48.880
out at you. It's like whoa, whoa, whoa. You cannot
538
00:27:49.319 --> 00:27:52.359
just make up element names. That's not allowed. So you
539
00:27:52.440 --> 00:27:55.119
have to teach these environments about your components. And so
540
00:27:55.880 --> 00:28:00.559
seeing that gap that between you know, the promise and reality,
541
00:28:00.680 --> 00:28:03.559
the you know, developer experience, that we're that our devs
542
00:28:03.599 --> 00:28:07.359
were we're seeing with this. I realized there's an opportunity here.
543
00:28:07.440 --> 00:28:10.720
I think there's you know, we have an opportunity to
544
00:28:10.799 --> 00:28:15.759
close that gap and provide just as or better experiences
545
00:28:15.799 --> 00:28:18.839
with our web components for our developers than what they're
546
00:28:18.880 --> 00:28:21.279
getting with their native frameworks or they're with their jobs
547
00:28:21.279 --> 00:28:24.160
Get framework. So I actually started building a lot of
548
00:28:24.200 --> 00:28:28.960
open source tooling around this, created the Web Component's Toolkit,
549
00:28:29.119 --> 00:28:34.279
which comes with type generation for JSX and and you know,
550
00:28:34.640 --> 00:28:38.960
Spelt and DOE and all these and editor extensions for
551
00:28:39.359 --> 00:28:41.400
vs code and all this stuff, so that you can
552
00:28:41.440 --> 00:28:44.240
get all these cool features that you could normally get
553
00:28:44.400 --> 00:28:47.359
using another framework, but you can get them with web components. Now,
554
00:28:48.119 --> 00:28:51.680
even in HTML, you can have autocomplete and type checking
555
00:28:51.720 --> 00:28:54.319
and all that in a standard HTML file, which I
556
00:28:54.319 --> 00:28:56.599
think is pretty rad because you can't do that with
557
00:28:56.799 --> 00:28:59.799
Jazz frameworks. So I think that that's pretty nifty.
558
00:29:01.119 --> 00:29:03.240
I was looking at some code that's pretty old the
559
00:29:03.279 --> 00:29:05.559
other day that can maybe benefit from this. I will
560
00:29:05.559 --> 00:29:08.599
say no more on that topic, but at a company
561
00:29:08.759 --> 00:29:13.279
like ZocDoc, where performance can impact user health out outcomes,
562
00:29:13.680 --> 00:29:16.279
how do web components help or hinder.
563
00:29:16.720 --> 00:29:18.839
The speed and accessibility of the site.
564
00:29:19.960 --> 00:29:23.359
Yeah, so funny story, we're not actually using web components
565
00:29:23.400 --> 00:29:24.599
right now at ZocDoc.
566
00:29:25.599 --> 00:29:25.799
Yeah.
567
00:29:25.839 --> 00:29:28.599
I joined the team and everyone's like, are you going
568
00:29:28.680 --> 00:29:30.680
to get them to start using web components? If the
569
00:29:30.680 --> 00:29:33.839
shoe fits, then you know, then maybe we'll go with it.
570
00:29:33.920 --> 00:29:36.400
But we're starting to see a lot of amazing things
571
00:29:36.480 --> 00:29:40.880
coming from companies with web components, not just with design
572
00:29:40.960 --> 00:29:44.559
systems themselves, but also with the offering that they're providing.
573
00:29:45.160 --> 00:29:49.880
So for a perfect example is Shopify. Shopify has been
574
00:29:49.920 --> 00:29:53.359
doing some really amazing work with their components. So before
575
00:29:53.440 --> 00:29:57.799
the experience was that you have a Shopify site and
576
00:29:57.839 --> 00:29:59.920
you had your content site, and so teams would go,
577
00:30:00.279 --> 00:30:02.799
users would go on your content site read about your
578
00:30:02.880 --> 00:30:05.599
product or whatever it is that you had. Then they
579
00:30:05.599 --> 00:30:08.160
would jump over to the Shopify site to complete the
580
00:30:08.240 --> 00:30:11.640
user's the e commerce aspect of it, and then be
581
00:30:11.680 --> 00:30:14.640
bounced back to your content site. Or you could you
582
00:30:14.680 --> 00:30:18.119
could use the Shopify API and recreate the UI on
583
00:30:18.240 --> 00:30:21.400
your on your content site. Well, they came back and said,
584
00:30:21.599 --> 00:30:23.559
I think we can do something better, and I think
585
00:30:23.559 --> 00:30:28.079
they call it storefront web components, where you can literally
586
00:30:28.119 --> 00:30:31.519
grab web components and drop them on your site and
587
00:30:31.599 --> 00:30:35.799
have the Shopify user experience directly on your site and
588
00:30:35.839 --> 00:30:38.799
it'll just you know, make the AP appropriate API calls
589
00:30:38.839 --> 00:30:41.720
back to the Shopify server for you, and so you can,
590
00:30:42.039 --> 00:30:44.519
you know, without having to rebuild the UI. You could
591
00:30:44.559 --> 00:30:47.599
have the integrated experience in your existing application, so you
592
00:30:47.640 --> 00:30:51.000
can control that user experience start to finish without having
593
00:30:51.039 --> 00:30:53.680
to bounce out to another site, which I think is amazing.
594
00:30:53.720 --> 00:30:57.000
And I think maybe there's opportunities like that with with
595
00:30:57.200 --> 00:31:01.359
ZocDoc as well, where we can start bringing great healthcare
596
00:31:01.440 --> 00:31:05.720
user experiences to sites directly. So your your dermatologists could
597
00:31:05.720 --> 00:31:10.200
have ZocDoc embedded on their site and schedule an appointment
598
00:31:10.200 --> 00:31:12.519
directly on their site without having to bounce out to
599
00:31:12.559 --> 00:31:17.359
another site. But that's that's still not available. I won't
600
00:31:17.359 --> 00:31:19.920
I'm not promising anyone anything about that. I just that's
601
00:31:19.920 --> 00:31:23.559
something that I think is an opportunity where web components
602
00:31:23.599 --> 00:31:26.720
could bring great new experiences to users.
603
00:31:27.640 --> 00:31:29.920
There you are raising your hand again, I'll do it.
604
00:31:29.920 --> 00:31:34.519
I'll do it. We have a hackathon coming up, maybe
605
00:31:34.519 --> 00:31:35.480
maybe I'll try.
606
00:31:35.240 --> 00:31:39.000
To there you go see, but that well, a that's
607
00:31:39.039 --> 00:31:43.319
what hackathons are good for. But be like that I
608
00:31:43.359 --> 00:31:48.200
think is exactly why Burton, you went from customer support
609
00:31:48.400 --> 00:31:51.720
to programming. Like you obviously have this attitude of you
610
00:31:51.799 --> 00:31:54.200
can learn this, you know, like I don't know how to,
611
00:31:54.359 --> 00:31:56.240
but I'm willing to put in the time and the effort,
612
00:31:56.279 --> 00:31:58.680
and I think that's such a valuable lesson right there.
613
00:31:59.640 --> 00:32:01.759
I am kind of curious because you know, again, like
614
00:32:01.799 --> 00:32:03.519
we keep bringing up the fact that, like you go
615
00:32:03.599 --> 00:32:06.359
around and you give presentations, and that something that Matt
616
00:32:06.400 --> 00:32:09.880
and I really love doing as well, and we're always
617
00:32:09.920 --> 00:32:14.200
really intrigued with some of the questions that we get
618
00:32:14.240 --> 00:32:18.160
after our presentations because it shows us like how other
619
00:32:18.200 --> 00:32:21.240
people are already thinking about that topic and applying it
620
00:32:21.279 --> 00:32:25.359
to their needs or their specific you know, purposes. So
621
00:32:25.400 --> 00:32:27.240
I'm just kind of curious, like, as you've gone around
622
00:32:27.319 --> 00:32:31.160
and you've spoken about these different topics, what are maybe
623
00:32:31.200 --> 00:32:35.839
some myths or just misconceptions really that people have about
624
00:32:35.920 --> 00:32:38.839
design systems or about web components.
625
00:32:39.240 --> 00:32:42.720
Oh, there's yeah, there's always uh a handful of I
626
00:32:42.720 --> 00:32:45.240
mean design systems. First one is that you know, design
627
00:32:45.279 --> 00:32:48.960
systems are for designers, and that's usually one of the
628
00:32:48.960 --> 00:32:50.759
first slides that I have in there, is like design
629
00:32:50.799 --> 00:32:53.119
systems are not for designers. That's you know, they're they're
630
00:32:53.119 --> 00:32:56.920
for everyone, and uh, you know, I think that's again
631
00:32:57.319 --> 00:33:01.279
bad bad marketing on the on the designs system naming convention.
632
00:33:01.400 --> 00:33:04.440
But I think the other thing too is that design
633
00:33:04.480 --> 00:33:10.000
systems are hard to do initially, which I think they
634
00:33:10.079 --> 00:33:12.799
require some forethought and they require some a little bit
635
00:33:12.839 --> 00:33:15.720
of research. But I don't think like everyone thinks that
636
00:33:16.000 --> 00:33:18.079
in order for me to do is design system, I
637
00:33:18.079 --> 00:33:22.200
need to have this fancy Figma or some kind of
638
00:33:22.839 --> 00:33:27.359
design tool to now design these components and document it.
639
00:33:27.400 --> 00:33:29.720
And then now I need to now have skills to
640
00:33:30.279 --> 00:33:31.400
code it and things like that.
641
00:33:31.519 --> 00:33:34.640
And I think that those are.
642
00:33:36.200 --> 00:33:38.599
Nice to have, but by no means feel like those
643
00:33:38.599 --> 00:33:42.440
are required for engineers or designers.
644
00:33:42.720 --> 00:33:43.799
Even in this code of AI.
645
00:33:43.960 --> 00:33:46.759
I mean, we're seeing some crazy things happen with you know,
646
00:33:46.759 --> 00:33:50.920
people can create a Figma design and then with Figma
647
00:33:51.039 --> 00:33:54.960
MCP they can hook it up to an AI agent
648
00:33:55.039 --> 00:33:57.519
and have it generate some code. Now, I will say
649
00:33:58.160 --> 00:34:03.720
huge caveat on that. Seen some abysmal accessibility and you know,
650
00:34:04.079 --> 00:34:06.480
semantics come out of that. But I've also seen some
651
00:34:06.519 --> 00:34:10.320
really good, very interesting and very pretty good quality stuff
652
00:34:10.360 --> 00:34:12.559
come out of some of those examples as well. So
653
00:34:12.639 --> 00:34:15.360
I think that you know, AI is helping break down
654
00:34:15.400 --> 00:34:18.079
some of those barriers, but I also think that they're
655
00:34:18.159 --> 00:34:21.800
not necessarily barriers in the first place. If you're a
656
00:34:21.840 --> 00:34:25.280
coder and you like to code, you don't have to
657
00:34:25.360 --> 00:34:27.840
have a fancy figma with all your designs in it
658
00:34:27.880 --> 00:34:31.360
before you start building a design system. There's nothing preventing
659
00:34:31.360 --> 00:34:34.119
you from from starting that from code, and it's pretty
660
00:34:34.119 --> 00:34:36.519
cool to be able to do that. That's how I started.
661
00:34:36.599 --> 00:34:39.360
I built a lot of design systems code first, and
662
00:34:40.320 --> 00:34:44.039
no design specs before they ever went lives. Don't feel
663
00:34:44.079 --> 00:34:46.119
like there are barriers for entry on those.
664
00:34:47.639 --> 00:34:50.280
Yeah, it's such an incredible time to be a coder
665
00:34:50.360 --> 00:34:54.559
right now, so many possibilities signed aman just so much
666
00:34:54.639 --> 00:34:56.920
opportunity for starting businesses.
667
00:34:57.039 --> 00:35:00.360
Like a couple hours ago, weren't we met where it's like, yeah,
668
00:35:00.360 --> 00:35:03.000
four years ago, three years ago, if someone had asked
669
00:35:03.039 --> 00:35:05.440
me to do something, you know, to code and maybe
670
00:35:05.480 --> 00:35:08.840
a framework, I don't know, I instantly probably would have
671
00:35:08.840 --> 00:35:12.559
had imposter syndrome. But today it's like, yeah, I'll take
672
00:35:12.559 --> 00:35:14.119
a look at that because I feel like, give it
673
00:35:14.119 --> 00:35:16.599
a shop, right, I just feel so much more confident
674
00:35:16.719 --> 00:35:18.920
knowing that I have this like built in mentor and
675
00:35:19.000 --> 00:35:21.719
teacher where I could be like, hey, what is going
676
00:35:21.760 --> 00:35:24.360
on here? Explain this to me. I don't know. AI
677
00:35:24.480 --> 00:35:30.880
is annoying in a lot of instances, really amazing as well.
678
00:35:31.679 --> 00:35:34.480
Yeah, So that leads me into my next question, which is,
679
00:35:34.599 --> 00:35:38.800
if you were starting your career today, knowing what you
680
00:35:38.920 --> 00:35:42.480
know about the intersection of UX and engineering and in
681
00:35:42.519 --> 00:35:47.360
this agent of AI too, what kata or fundamental skill
682
00:35:48.000 --> 00:35:49.800
would you practice every single day?
683
00:35:51.320 --> 00:35:56.039
I would say the people's skills have been hands down
684
00:35:56.079 --> 00:36:01.039
the most critical for me, and learning the communication piece
685
00:36:01.119 --> 00:36:04.400
that I think is probably the most important, Like it'd
686
00:36:04.440 --> 00:36:06.960
be really easy for me to hermit into my little
687
00:36:07.000 --> 00:36:10.480
cubby and you know, just code away, but the successes
688
00:36:10.519 --> 00:36:14.239
that I've found have come from the actual interaction piece
689
00:36:14.280 --> 00:36:17.519
of it. So I would say, first and foremost, those
690
00:36:17.840 --> 00:36:22.000
those skills, those people skills, those communication skills, especially.
691
00:36:21.480 --> 00:36:24.760
Now in an age of AI, are very very.
692
00:36:24.559 --> 00:36:28.159
Important because now I'm communicating to people, I'm communicating to
693
00:36:28.239 --> 00:36:32.039
AI agents, I'm communicating to you know, all these different places,
694
00:36:32.079 --> 00:36:34.960
and being able to make those the most meaningful and
695
00:36:35.000 --> 00:36:38.480
effective I think have been very very important skill. But
696
00:36:38.559 --> 00:36:42.800
then in terms of technology. I would say learning, learning
697
00:36:43.360 --> 00:36:46.440
the new new things, don't be afraid and actually I
698
00:36:46.559 --> 00:36:47.320
broke I really like.
699
00:36:47.360 --> 00:36:47.800
You put that.
700
00:36:48.199 --> 00:36:52.360
You know, having this AI sidekick with me being able
701
00:36:52.400 --> 00:36:55.360
to give me extra confidence to venture into new territory
702
00:36:55.559 --> 00:36:58.639
has been very a nice safety net and a good
703
00:36:58.679 --> 00:37:01.480
confidence boost to be able to move forward into new
704
00:37:01.519 --> 00:37:03.800
stuff and trying things that I.
705
00:37:03.519 --> 00:37:06.239
May not have tried as eagerly in the past.
706
00:37:07.119 --> 00:37:10.559
So this is excitement to to just give it a
707
00:37:10.599 --> 00:37:13.880
shot and ask questions and feel don't be afraid to
708
00:37:14.320 --> 00:37:17.039
look a little bit dumb. I actually like that AI
709
00:37:17.320 --> 00:37:21.119
is also totally comfortable with me asking really dumb questions
710
00:37:21.239 --> 00:37:23.440
and being like, I don't know what you just did.
711
00:37:23.480 --> 00:37:25.920
What is this like, please explain this to me. But
712
00:37:25.960 --> 00:37:29.159
then also being able to do that with your coworkers
713
00:37:29.199 --> 00:37:31.960
I think is an important skill too, helps I think
714
00:37:32.039 --> 00:37:37.679
break down barriers tension, and you know, people even like
715
00:37:38.119 --> 00:37:42.440
not necessarily pride, but like sometimes we get concerned that
716
00:37:42.639 --> 00:37:45.480
people are smarter than us, or that they know more
717
00:37:45.840 --> 00:37:47.920
than we do, or they think less of us, or
718
00:37:47.960 --> 00:37:49.960
things like that, And I think it's okay to ask
719
00:37:50.079 --> 00:37:53.440
questions and be a little vulnerable once in a while
720
00:37:53.480 --> 00:37:56.440
with those, because I feel like the technical pieces are
721
00:37:56.519 --> 00:37:59.960
changing so rapidly now that you know, I could be like, hey,
722
00:38:00.000 --> 00:38:03.000
you read some CSS books or go read some HTML books,
723
00:38:03.960 --> 00:38:07.800
and while those would be beneficial, I think the connection
724
00:38:07.880 --> 00:38:11.159
piece would be way more powerful than and longer lasting
725
00:38:11.239 --> 00:38:15.280
than learning some reading some books. Right now, although I
726
00:38:15.280 --> 00:38:17.480
will say go read some UX books, I think everyone
727
00:38:17.519 --> 00:38:21.559
should should read UX books and understand how users actually
728
00:38:21.599 --> 00:38:25.760
interact with things and how your users interact with things.
729
00:38:26.239 --> 00:38:28.639
That's I think a very important skill as well.
730
00:38:29.800 --> 00:38:32.159
If only we could teach some of our coworkers to
731
00:38:32.199 --> 00:38:36.719
speak as kindly as AI. Though because I asked a question,
732
00:38:36.840 --> 00:38:38.719
you're like, I don't understand what you said, and it's
733
00:38:38.719 --> 00:38:41.920
like it's okay, it's common to you not to know
734
00:38:42.079 --> 00:38:43.440
that answer, and you're like, thank you.
735
00:38:45.159 --> 00:38:49.320
Well, that's another thing, right, like learn to be polite.
736
00:38:49.559 --> 00:38:53.400
There's a lot of engineers who maybe think they're going
737
00:38:53.440 --> 00:38:57.599
to get ahead by maybe being rude or like or
738
00:38:57.639 --> 00:39:00.480
maybe they're just default that way, but from what I've
739
00:39:00.480 --> 00:39:02.880
seen is that backfires eventually.
740
00:39:03.480 --> 00:39:03.679
Yeah.
741
00:39:04.119 --> 00:39:06.239
Well, and I feel like a lot of engineers felt
742
00:39:06.280 --> 00:39:09.719
like they could stand on their technical prowess and they're like, oh,
743
00:39:09.719 --> 00:39:12.719
it's Okay, if I mean because I'm really good at coding, well,
744
00:39:13.320 --> 00:39:15.519
I don't know if that's a I like to stand
745
00:39:15.559 --> 00:39:18.320
on as much anymore. So I think definitely having those
746
00:39:18.320 --> 00:39:20.400
interpersonal skills is going to be way more important.
747
00:39:20.480 --> 00:39:22.360
Later I get.
748
00:39:22.199 --> 00:39:27.519
Fired, like point blank for their bluntness. I will say so,
749
00:39:27.880 --> 00:39:31.000
But we have one more question for you. But before
750
00:39:31.079 --> 00:39:33.360
that question, I would just like to kind of put
751
00:39:33.400 --> 00:39:35.000
it out there, like, is there anything you feel like
752
00:39:35.039 --> 00:39:38.639
we haven't covered with anything really, like anything you'd like
753
00:39:38.719 --> 00:39:41.400
to share with our listeners. You feel like maybe we
754
00:39:41.880 --> 00:39:43.559
could add on to this discussion.
755
00:39:44.199 --> 00:39:48.000
Ooh, I will, I'll throw out there.
756
00:39:48.119 --> 00:39:50.719
One thing is this is actually a very simple thing
757
00:39:50.800 --> 00:39:54.679
that I've started doing when I was at Microsoft, and
758
00:39:54.800 --> 00:39:58.000
I feel like has been a very valuable tool for
759
00:39:58.039 --> 00:40:01.360
me every time I've approached a new job type or
760
00:40:01.519 --> 00:40:06.639
a new adventure. And that's my UX framework. It's very simple.
761
00:40:06.639 --> 00:40:09.199
It's just five simple questions. And this is This is
762
00:40:09.199 --> 00:40:11.480
for anything that you do, whether you're drafting an email,
763
00:40:11.800 --> 00:40:16.679
creating a PowerPoint presentation, writing code, writing a book, whatever
764
00:40:16.719 --> 00:40:19.559
it is. So I have five questions. I always ask One,
765
00:40:19.599 --> 00:40:21.639
who is my who are my users or my audience?
766
00:40:22.559 --> 00:40:25.519
Two is what are they trying to do? What are
767
00:40:25.559 --> 00:40:27.679
they trying to accomplish?
768
00:40:27.719 --> 00:40:29.360
Three? How do I help them do that?
769
00:40:30.199 --> 00:40:30.440
Four?
770
00:40:32.360 --> 00:40:34.679
What am I trying to get them to do? And
771
00:40:34.760 --> 00:40:37.440
five how do I incentivize them to do that? So
772
00:40:37.880 --> 00:40:41.719
anytime I start to approach a project or some kind
773
00:40:41.760 --> 00:40:44.119
of even a message, like if I'm trying to draft
774
00:40:44.159 --> 00:40:46.199
a message, I try to kind of pull up that
775
00:40:46.239 --> 00:40:48.760
framework a little bit and I'll use that to help
776
00:40:48.800 --> 00:40:51.920
me guide me a little bit, because I lose track
777
00:40:52.000 --> 00:40:54.800
of sometimes, especially when I get really emotional about something
778
00:40:54.800 --> 00:40:57.119
and I'm like, Oh, they don't know what they're talking about,
779
00:40:57.119 --> 00:40:58.719
and you know, I just kind of will go on
780
00:40:58.760 --> 00:41:01.800
a rage mode or a code type scenario. I think
781
00:41:01.840 --> 00:41:05.079
if I step back and ask those questions and kind
782
00:41:05.079 --> 00:41:08.000
of evaluate, make sure that I'm being empathetic and make
783
00:41:08.039 --> 00:41:10.719
sure I'm speaking to my audience appropriately and making sure
784
00:41:10.719 --> 00:41:13.199
that I'm trying to get well, I'm taking care of
785
00:41:13.239 --> 00:41:15.440
them but also getting what I need to out of it.
786
00:41:15.480 --> 00:41:17.159
At the end, I think is I think a.
787
00:41:17.079 --> 00:41:22.639
Good balance that I wish more engineers and content creators
788
00:41:22.880 --> 00:41:25.599
did when they approached the new ideas.
789
00:41:25.960 --> 00:41:30.599
When I was teaching, You're reminding me of this kind
790
00:41:30.639 --> 00:41:33.840
of phrase that I learned. There was this Stephen Cubby
791
00:41:34.159 --> 00:41:39.360
who started Franklin Cobby. His company started a kind of
792
00:41:39.400 --> 00:41:43.360
like a children's program. So back my previous life, my
793
00:41:43.480 --> 00:41:47.039
other career, back in teaching, we had this It was
794
00:41:47.079 --> 00:41:50.039
like the seven principle. I can't even remember the name
795
00:41:50.079 --> 00:41:52.199
of it, but it's like Franklin Cubby's.
796
00:41:52.079 --> 00:41:54.599
The seven Habits of Highly Effective People.
797
00:41:55.119 --> 00:41:58.280
Well but yeah, and this one was specifically four kids though,
798
00:41:58.280 --> 00:42:01.360
but cool. What I liked about it though, was that
799
00:42:01.440 --> 00:42:05.400
it made it just these like one liner simple principles
800
00:42:06.079 --> 00:42:09.119
for success, right, and one of them was to begin
801
00:42:09.199 --> 00:42:11.880
with the end in mind. And that was just something
802
00:42:11.920 --> 00:42:14.599
I like, It just stuck in my head and I
803
00:42:14.599 --> 00:42:17.400
don't know why, but it really same thing like when
804
00:42:17.440 --> 00:42:20.039
I would be putting together presentations or even a lesson
805
00:42:20.119 --> 00:42:22.880
plan for my students, it was always what is the
806
00:42:23.000 --> 00:42:25.800
end goal here? What are they trying to accomplish? What
807
00:42:25.840 --> 00:42:28.159
am I trying to accomplish for them? What do we
808
00:42:28.199 --> 00:42:30.559
want to achieve by the end of this lesson? And
809
00:42:30.599 --> 00:42:33.000
that was always my starting point and then I kind
810
00:42:33.039 --> 00:42:36.400
of worked backwards from there. It was like, that's what
811
00:42:36.440 --> 00:42:38.960
we want to accomplish, What are it going to be
812
00:42:39.000 --> 00:42:42.239
the stepping stones to get there, and you know, how
813
00:42:42.280 --> 00:42:46.440
do I actually implement that lesson plan of sorts? But yeah,
814
00:42:46.639 --> 00:42:48.599
that's just reminded me of what you were saying.
815
00:42:49.840 --> 00:42:53.320
Yeah, and that ties really good into our last question
816
00:42:53.679 --> 00:42:57.719
of the show, which is on this show, we're all
817
00:42:57.760 --> 00:43:01.320
about living your ultimate death of life and not just
818
00:43:01.400 --> 00:43:04.320
like doing good at your job, but like loving your job,
819
00:43:04.440 --> 00:43:07.679
you know. And so for you, Burton, how would you
820
00:43:07.760 --> 00:43:11.960
define an ultimate dead life in software development? And what
821
00:43:12.039 --> 00:43:14.519
are the things you do to live your best dead life?
822
00:43:15.639 --> 00:43:18.880
I think for me, one of my favorite things is
823
00:43:19.119 --> 00:43:21.679
sharing as I go. And you know, that's one of
824
00:43:21.719 --> 00:43:23.840
the reason why I like to go speak. I like
825
00:43:23.920 --> 00:43:24.719
to share.
826
00:43:25.360 --> 00:43:27.039
You know, Hey, I did this thing. Here's how it
827
00:43:27.079 --> 00:43:29.559
helped me, Here's how it can help you. I wrote
828
00:43:29.559 --> 00:43:30.599
an article a little while back.
829
00:43:32.760 --> 00:43:36.800
AI kind of puts us through some weird existential crisises
830
00:43:36.840 --> 00:43:39.679
sometimes where we're like am I valuable anymore?
831
00:43:39.719 --> 00:43:40.480
Like what am I doing?
832
00:43:40.519 --> 00:43:40.679
You know?
833
00:43:40.960 --> 00:43:42.760
It kind of messes with your head a little bit.
834
00:43:42.840 --> 00:43:44.639
And I wrote an article a little bit a little
835
00:43:44.639 --> 00:43:45.679
while back and like, well.
836
00:43:45.760 --> 00:43:46.800
Why do I do what I do?
837
00:43:47.079 --> 00:43:49.000
And it reminds me of the King's Highway have you
838
00:43:49.039 --> 00:43:51.960
guys ever heard of that? A little parable or analogy,
839
00:43:52.039 --> 00:43:54.480
little story, I guess. So the idea is that a
840
00:43:54.599 --> 00:43:58.199
king builds a beautiful highway to connect towns together. Before
841
00:43:58.199 --> 00:44:00.840
it opens, he invites everyone to see who can travel
842
00:44:00.840 --> 00:44:04.519
the road the best. And so people travel, you know,
843
00:44:04.960 --> 00:44:08.280
the road, and as they travel to the king, they're like, hey,
844
00:44:08.280 --> 00:44:10.800
you know, this was a beautiful road. It was so great,
845
00:44:10.880 --> 00:44:13.519
you know, but there's this big pile of rocks in
846
00:44:13.519 --> 00:44:16.800
the middle of the road, so it you know, that
847
00:44:16.920 --> 00:44:18.960
was kind of kind of ruined the experience for me.
848
00:44:19.159 --> 00:44:21.039
And so all day he heard these complaints about it.
849
00:44:21.039 --> 00:44:22.679
And then one day, one guy, at the end of
850
00:44:22.719 --> 00:44:26.000
the day, one guy shows up tired, disheveled and dirty
851
00:44:26.000 --> 00:44:28.199
and he's like, hey, so there's a big pile of
852
00:44:28.239 --> 00:44:30.559
rocks in the road, and I decided to move it,
853
00:44:31.039 --> 00:44:33.239
and there's this big pile of money under it, so
854
00:44:33.280 --> 00:44:34.599
I thought i'd return it to you so you could
855
00:44:34.639 --> 00:44:36.920
give it to whoever it belongs to. And he's like, oh,
856
00:44:36.960 --> 00:44:39.880
that King's like, that's for you. That's your money. And
857
00:44:39.920 --> 00:44:43.039
he's like, no, that's not mine. He's like, no, no, it is,
858
00:44:43.199 --> 00:44:45.800
as you know, and he says he who travels the
859
00:44:45.920 --> 00:44:49.440
road best is he who makes the road smoother for.
860
00:44:49.320 --> 00:44:50.360
Those who will follow.
861
00:44:50.760 --> 00:44:53.679
And so I've always taken that into heart that, you know,
862
00:44:54.159 --> 00:44:56.679
as I learn and as I make things better for myself,
863
00:44:56.760 --> 00:44:58.800
I love being able to share that to hopefully make
864
00:44:58.840 --> 00:45:01.320
the road smoother for someone else who's following behind me,
865
00:45:01.440 --> 00:45:02.519
and it makes.
866
00:45:02.320 --> 00:45:03.000
It easier for them.
867
00:45:03.000 --> 00:45:05.280
So I think that's like kind of what drives my
868
00:45:05.800 --> 00:45:08.079
open source mentality and why I like to build things
869
00:45:08.119 --> 00:45:10.320
in open source, why I like to go speak at
870
00:45:10.360 --> 00:45:12.639
conferences and things like that. Plus it's really fun to
871
00:45:12.760 --> 00:45:17.199
nerd out with fellow technologists about things. I can't talk
872
00:45:17.239 --> 00:45:19.199
about this and kind of stuff at a dinner party
873
00:45:19.239 --> 00:45:20.960
as I can when I when I go to a
874
00:45:21.000 --> 00:45:24.039
tech conference or a podcast, and so it's very fun
875
00:45:24.079 --> 00:45:26.880
to hang out with like minded people. But really I
876
00:45:26.920 --> 00:45:31.280
love the idea of you know, software being a mechanism
877
00:45:31.320 --> 00:45:33.920
for me to help give back to those who were
878
00:45:33.960 --> 00:45:35.039
following behind me.
879
00:45:35.519 --> 00:45:38.320
I love that so and you can you can't speak
880
00:45:38.360 --> 00:45:39.920
about this at dinner parties.
881
00:45:40.000 --> 00:45:43.840
You just sound like the super smart one, right, Like
882
00:45:43.880 --> 00:45:47.599
Ah Burton's at it again, right, I have components. We
883
00:45:47.719 --> 00:45:50.480
got it, well, Burton.
884
00:45:50.719 --> 00:45:53.800
If someone would like to connect with you. Maybe they'd
885
00:45:53.840 --> 00:45:56.920
like to have you come speak at their event or something.
886
00:45:56.960 --> 00:45:59.039
How can they find you? Where's a good place for
887
00:45:59.079 --> 00:46:00.000
them to connect with you.
888
00:46:01.159 --> 00:46:05.280
I'm on most social media platforms. I'm at Stuffbreaker, or
889
00:46:05.320 --> 00:46:08.000
you can find me on LinkedIn Burton Smith. Unfortunately, there
890
00:46:08.079 --> 00:46:11.320
was another Burton Smith that once worked at Microsoft, so
891
00:46:11.400 --> 00:46:13.679
when you google my name, if you look up Burton
892
00:46:13.719 --> 00:46:17.480
Smith Microsoft, there's a way more famous Burton Smith than me,
893
00:46:17.639 --> 00:46:20.480
So I'm not him, just in case you're wondering he's
894
00:46:20.679 --> 00:46:22.719
but you can always find me on LinkedIn as well.
895
00:46:23.039 --> 00:46:25.440
I try to be pretty responsive on any of those
896
00:46:25.480 --> 00:46:28.000
social media platforms, so feel free to reach out.
897
00:46:28.000 --> 00:46:33.000
I love connecting with people, so I'm very open to you.
898
00:46:34.519 --> 00:46:37.719
Awesome, And how about all of you listeners? How have
899
00:46:37.840 --> 00:46:40.960
you used design systems or web components at your company
900
00:46:41.119 --> 00:46:44.760
or personal projects? And what tips your questions do you have?
901
00:46:45.119 --> 00:46:48.239
Leave your thoughts and questions in the comments below. If
902
00:46:48.239 --> 00:46:50.920
you're listening on the podcast, you can come find us
903
00:46:50.920 --> 00:46:54.599
on YouTube in the ngcomp channel and then go to
904
00:46:54.639 --> 00:46:57.599
the dev Live playlist and you can leave any comments there.
905
00:46:57.679 --> 00:47:06.519
And this is the dev life, the intemper, the intact,
906
00:47:06.880 --> 00:47:07.440
the att