WEBVTT

1
00:00:01.665 --> 00:00:02.965
<00:00:01.665>Hi <00:00:01.957>guys, <00:00:02.250>how <00:00:02.542>are <00:00:02.835>you?

2
00:00:03.985 --> 00:00:07.605
<00:00:03.985>Um, <00:00:04.218>our <00:00:04.451>next <00:00:04.685>speaker <00:00:04.918>is <00:00:05.151>Phillip <00:00:05.385>Koski

3
00:00:08.145 --> 00:00:11.525
<00:00:08.145>and <00:00:08.320>he's <00:00:08.495>gonna <00:00:08.670>talk <00:00:08.844>about <00:00:09.020>building <00:00:09.195>a <00:00:09.370>component <00:00:09.545>library

4
00:00:11.905 --> 00:00:14.725
<00:00:11.905>for <00:00:12.371>modern <00:00:12.838>Challenges, <00:00:13.305>challenges.

5
00:00:15.225 --> 00:00:19.045
<00:00:15.225>If <00:00:15.365>you <00:00:15.504>have <00:00:15.645>questions, <00:00:15.785>you <00:00:15.924>can <00:00:16.064>type <00:00:16.204>them <00:00:16.344>in <00:00:16.485>the <00:00:16.625>app

6
00:00:19.585 --> 00:00:21.845
<00:00:19.585>and <00:00:19.818>I <00:00:20.051>will <00:00:20.285>read <00:00:20.518>it <00:00:20.751>loud <00:00:20.985>afterwards.

7
00:00:22.075 --> 00:00:23.075
<00:00:22.075>Okay, <00:00:22.974>enjoy.

8
00:00:34.905 --> 00:00:35.195
Whoa.

9
00:00:42.425 --> 00:00:45.715
<00:00:42.425>Okay, <00:00:42.565>I <00:00:42.705>think <00:00:42.845>we <00:00:42.985>see <00:00:43.125>everything. <00:00:43.265>How <00:00:43.404>are <00:00:43.544>you <00:00:43.684>doing? <00:00:43.824>Good.

10
00:00:46.525 --> 00:00:49.735
<00:00:46.525>Good, <00:00:46.699>good. <00:00:46.875>Did <00:00:47.050>you <00:00:47.225>enjoy <00:00:47.400>the <00:00:47.574>after <00:00:47.750>party <00:00:47.925>yesterday?

11
00:00:51.375 --> 00:00:52.845
<00:00:51.375>Raise <00:00:51.595>your <00:00:51.816>hand <00:00:52.036>if <00:00:52.257>you <00:00:52.477>were <00:00:52.698>there.

12
00:00:54.685 --> 00:00:58.295
<00:00:54.685>Keep <00:00:54.885>your <00:00:55.085>hand <00:00:55.285>if <00:00:55.485>you <00:00:55.685>enjoyed <00:00:55.885>it. <00:00:56.085>Good.

13
00:00:58.455 --> 00:01:01.775
<00:00:58.455>I <00:00:58.582>enjoyed <00:00:58.709>it <00:00:58.836>as <00:00:58.964>well. <00:00:59.091>I, <00:00:59.218>part <00:00:59.345>of <00:00:59.473>me <00:00:59.600>regrets <00:00:59.727>that <00:00:59.855>honestly,

14
00:01:02.475 --> 00:01:05.455
<00:01:02.475>that's, <00:01:02.615>I <00:01:02.755>enjoyed <00:01:02.895>it <00:01:03.035>so <00:01:03.175>much, <00:01:03.315>but <00:01:03.455>the <00:01:03.595>other <00:01:03.735>part <00:01:03.875>doesn't

15
00:01:05.455 --> 00:01:06.575
<00:01:05.455>because <00:01:05.791>ultimately, <00:01:06.127>you <00:01:06.463>know,

16
00:01:06.575 --> 00:01:08.455
<00:01:06.575>we <00:01:06.775>are <00:01:06.975>not <00:01:07.175>coming <00:01:07.375>into <00:01:07.575>those <00:01:07.775>events <00:01:07.975>just

17
00:01:08.475 --> 00:01:10.255
<00:01:08.475>to <00:01:08.824>listen <00:01:09.175>to <00:01:09.524>the <00:01:09.875>talks.

18
00:01:10.255 --> 00:01:11.895
<00:01:10.255>Like <00:01:10.429>you <00:01:10.604>can <00:01:10.780>listen <00:01:10.955>to <00:01:11.130>the <00:01:11.304>talks <00:01:11.479>on <00:01:11.655>YouTube.

19
00:01:12.265 --> 00:01:14.495
<00:01:12.265>We're <00:01:12.498>coming <00:01:12.731>here <00:01:12.965>to <00:01:13.198>have <00:01:13.431>interactions, <00:01:13.665>right?

20
00:01:15.115 --> 00:01:16.855
<00:01:15.115>To <00:01:15.395>network <00:01:15.675>to <00:01:15.955>meet <00:01:16.235>new <00:01:16.515>people.

21
00:01:17.075 --> 00:01:20.535
<00:01:17.075>So <00:01:17.230>if <00:01:17.386>you <00:01:17.541>haven't <00:01:17.697>done <00:01:17.852>that <00:01:18.008>yet, <00:01:18.163>please <00:01:18.319>do <00:01:18.475>this

22
00:01:20.885 --> 00:01:23.575
<00:01:20.885>because <00:01:21.012>this <00:01:21.139>is <00:01:21.266>why <00:01:21.394>we <00:01:21.521>are <00:01:21.648>all <00:01:21.775>here <00:01:21.903>to <00:01:22.030>meet <00:01:22.157>new <00:01:22.285>people.

23
00:01:23.985 --> 00:01:25.655
<00:01:23.985>Maybe <00:01:24.265>ask <00:01:24.545>someone <00:01:24.825>you <00:01:25.105>know <00:01:25.385>that

24
00:01:25.755 --> 00:01:27.935
<00:01:25.755>who <00:01:25.910>is <00:01:26.066>sitting <00:01:26.221>on <00:01:26.377>your <00:01:26.532>right <00:01:26.688>side, <00:01:26.843>what <00:01:26.999>they're <00:01:27.155>doing,

25
00:01:28.365 --> 00:01:30.615
<00:01:28.365>what <00:01:28.565>they're <00:01:28.765>passionate <00:01:28.964>about, <00:01:29.164>what <00:01:29.365>projects <00:01:29.565>they're <00:01:29.765>doing.

26
00:01:31.265 --> 00:01:34.135
<00:01:31.265>Maybe <00:01:31.440>they're <00:01:31.615>gonna <00:01:31.790>be <00:01:31.965>your <00:01:32.140>next <00:01:32.315>co-founder, <00:01:32.490>who <00:01:32.665>knows?

27
00:01:34.915 --> 00:01:37.855
<00:01:34.914>Anyway, <00:01:35.148>uh, <00:01:35.381>as <00:01:35.615>I <00:01:35.848>was <00:01:36.081>introduced, <00:01:36.315>uh,

28
00:01:38.155 --> 00:01:40.335
<00:01:38.155>I'm <00:01:38.388>gonna <00:01:38.621>talk <00:01:38.855>about <00:01:39.088>building <00:01:39.321>component <00:01:39.555>library

29
00:01:40.475 --> 00:01:41.535
<00:01:40.475>for <00:01:40.952>modern <00:01:41.429>challenges.

30
00:01:41.635 --> 00:01:42.935
<00:01:41.634>My <00:01:41.927>name <00:01:42.220>is <00:01:42.512>V <00:01:42.805>Bakowski.

31
00:01:43.055 --> 00:01:45.655
<00:01:43.055>I <00:01:43.255>am <00:01:43.455>a <00:01:43.655>co-founder <00:01:43.855>and <00:01:44.055>chief <00:01:44.255>developer <00:01:44.455>experience

32
00:01:45.655 --> 00:01:46.855
<00:01:45.655>officer <00:01:46.015>at <00:01:46.375>Vista <00:01:46.734>Storefront.

33
00:01:47.435 --> 00:01:50.215
<00:01:47.435>I'm <00:01:47.610>also <00:01:47.785>a <00:01:47.960>technology <00:01:48.135>council <00:01:48.310>member <00:01:48.485>of <00:01:48.660>MA <00:01:48.835>Alliance.

34
00:01:51.235 --> 00:01:53.135
<00:01:51.235>Who <00:01:51.515>knows <00:01:51.795>MA <00:01:52.075>Alliance <00:01:52.355>in <00:01:52.635>here?

35
00:01:54.105 --> 00:01:55.515
<00:01:54.104>Okay, <00:01:54.358>we <00:01:54.612>have <00:01:54.866>some <00:01:55.120>enterprise <00:01:55.374>people.

36
00:01:56.375 --> 00:01:57.835
<00:01:56.375>So <00:01:56.562>for <00:01:56.750>those <00:01:56.938>of <00:01:57.125>you <00:01:57.313>who <00:01:57.501>don't <00:01:57.689>know,

37
00:01:57.895 --> 00:01:59.875
<00:01:57.895>MA <00:01:58.175>Alliance <00:01:58.455>is <00:01:58.735>basically <00:01:59.015>an <00:01:59.295>organization

38
00:01:59.875 --> 00:02:02.555
<00:01:59.875>that <00:02:00.050>is <00:02:00.225>uniting <00:02:00.400>a <00:02:00.575>lot <00:02:00.750>of <00:02:00.925>very <00:02:01.100>big <00:02:01.275>vendors

39
00:02:02.935 --> 00:02:04.195
<00:02:02.935>around <00:02:03.502>enterprise <00:02:04.068>commerce.

40
00:02:04.975 --> 00:02:08.595
<00:02:04.975>And <00:02:05.149>what <00:02:05.324>Vista <00:02:05.500>Storefront <00:02:05.675>does <00:02:05.850>is <00:02:06.024>essentially <00:02:06.199>a <00:02:06.375>tool

41
00:02:08.775 --> 00:02:10.915
<00:02:08.775>to <00:02:09.241>build <00:02:09.708>enterprise <00:02:10.175>storefronts.

42
00:02:11.215 --> 00:02:12.995
<00:02:11.215>So <00:02:11.448>how <00:02:11.681>many <00:02:11.915>of <00:02:12.148>you <00:02:12.381>work <00:02:12.615>ever

43
00:02:12.995 --> 00:02:14.715
<00:02:12.995>with <00:02:13.275>any <00:02:13.555>kind <00:02:13.835>of <00:02:14.115>e-commerce <00:02:14.395>project?

44
00:02:17.135 --> 00:02:18.665
<00:02:17.135>Okay, <00:02:17.364>keep <00:02:17.594>your <00:02:17.823>hand, <00:02:18.053>keep <00:02:18.282>your <00:02:18.512>hand.

45
00:02:19.085 --> 00:02:22.465
<00:02:19.085>How <00:02:19.240>many <00:02:19.396>of <00:02:19.551>you <00:02:19.707>work <00:02:19.862>with <00:02:20.018>a <00:02:20.173>headless <00:02:20.329>e-commerce <00:02:20.485>project?

46
00:02:24.835 --> 00:02:25.925
<00:02:24.835>Okay, <00:02:25.080>not <00:02:25.325>many <00:02:25.570>of <00:02:25.816>you.

47
00:02:26.545 --> 00:02:30.365
<00:02:26.545>So <00:02:26.720>if <00:02:26.895>you <00:02:27.070>ever <00:02:27.245>work <00:02:27.420>with <00:02:27.595>headless <00:02:27.770>e-commerce <00:02:27.945>project,

48
00:02:30.365 --> 00:02:32.525
<00:02:30.365>please <00:02:30.520>take <00:02:30.676>a <00:02:30.831>look <00:02:30.987>at <00:02:31.142>VIS <00:02:31.298>on <00:02:31.453>this <00:02:31.609>completely <00:02:31.765>free,

49
00:02:32.775 --> 00:02:34.245
<00:02:32.775>completely <00:02:33.436>open <00:02:34.098>source.

50
00:02:34.625 --> 00:02:37.565
<00:02:34.625>And <00:02:34.780>it <00:02:34.936>basically <00:02:35.091>makes <00:02:35.247>this, <00:02:35.402>uh, <00:02:35.558>do <00:02:35.713>you <00:02:35.869>hear <00:02:36.025>me?

51
00:02:37.565 --> 00:02:41.085
<00:02:37.565>Well, <00:02:37.740>I <00:02:37.915>hear, <00:02:38.090>so <00:02:38.265>I <00:02:38.440>am <00:02:38.615>building <00:02:38.790>those <00:02:38.965>tools

52
00:02:41.145 --> 00:02:42.405
<00:02:41.145>for <00:02:41.523>six <00:02:41.901>years <00:02:42.279>already

53
00:02:42.705 --> 00:02:46.605
<00:02:42.704>and <00:02:42.860>today's <00:02:43.016>stock <00:02:43.171>is <00:02:43.327>inspired <00:02:43.482>by <00:02:43.638>learnings <00:02:43.793>from <00:02:43.949>building <00:02:44.105>one

54
00:02:46.605 --> 00:02:48.285
<00:02:46.605>of <00:02:46.885>them <00:02:47.165>our <00:02:47.445>own <00:02:47.725>component <00:02:48.005>library.

55
00:02:49.185 --> 00:02:52.895
<00:02:49.185>And <00:02:49.340>you <00:02:49.496>know, <00:02:49.651>have <00:02:49.807>you <00:02:49.962>ever <00:02:50.118>used <00:02:50.273>a <00:02:50.429>component <00:02:50.585>library

56
00:02:53.395 --> 00:02:54.495
<00:02:53.395>and <00:02:53.890>felt <00:02:54.385>that

57
00:02:54.495 --> 00:02:57.535
<00:02:54.495>after <00:02:54.728>this <00:02:54.961>short <00:02:55.195>period <00:02:55.428>of <00:02:55.661>initial <00:02:55.895>acceleration

58
00:02:57.535 --> 00:03:00.645
<00:02:57.535>that <00:02:57.768>you're <00:02:58.001>getting <00:02:58.234>this, <00:02:58.468>this <00:02:58.701>empowerment, <00:02:58.935>uh,

59
00:03:01.105 --> 00:03:03.725
<00:03:01.105>you <00:03:01.260>start <00:03:01.416>coming <00:03:01.571>up <00:03:01.727>with <00:03:01.882>a <00:03:02.038>very <00:03:02.193>nasty <00:03:02.349>hacks <00:03:02.505>really

60
00:03:03.725 --> 00:03:05.485
<00:03:03.725>to <00:03:03.924>make <00:03:04.125>things <00:03:04.325>work <00:03:04.525>exactly <00:03:04.725>as <00:03:04.924>you <00:03:05.125>want.

61
00:03:06.995 --> 00:03:10.925
<00:03:06.995>Have <00:03:07.170>you <00:03:07.345>ever <00:03:07.520>did <00:03:07.695>raise <00:03:07.870>your <00:03:08.045>hand? <00:03:08.220>It's <00:03:08.395>good.

62
00:03:12.065 --> 00:03:13.845
<00:03:12.065>Uh, <00:03:12.265>you're <00:03:12.465>not <00:03:12.665>alone <00:03:12.865>really. <00:03:13.065>You're <00:03:13.265>not <00:03:13.465>alone.

63
00:03:13.945 --> 00:03:17.165
<00:03:13.945>And <00:03:14.100>I've <00:03:14.256>been <00:03:14.411>there <00:03:14.567>too <00:03:14.722>and <00:03:14.878>I <00:03:15.033>realize <00:03:15.189>countless <00:03:15.345>mother

64
00:03:17.265 --> 00:03:19.525
<00:03:17.265>and <00:03:17.440>popular <00:03:17.614>component <00:03:17.790>libraries <00:03:17.964>in <00:03:18.140>the <00:03:18.315>last <00:03:18.489>few <00:03:18.665>years.

65
00:03:19.875 --> 00:03:21.965
<00:03:19.875>I've <00:03:20.050>also <00:03:20.225>built <00:03:20.400>one <00:03:20.575>and <00:03:20.750>it <00:03:20.925>all <00:03:21.100>seems <00:03:21.275>to,

66
00:03:22.065 --> 00:03:23.085
<00:03:22.065>to <00:03:22.371>repeat <00:03:22.677>this <00:03:22.983>scenario.

67
00:03:23.745 --> 00:03:26.925
<00:03:23.745>So <00:03:23.900>when <00:03:24.056>we've <00:03:24.211>built <00:03:24.367>our <00:03:24.522>own <00:03:24.678>UI <00:03:24.833>libraries <00:03:24.989>storefront <00:03:25.145>UI

68
00:03:27.155 --> 00:03:28.205
<00:03:27.155>following <00:03:28.100>more

69
00:03:28.205 --> 00:03:30.205
<00:03:28.204>or <00:03:28.360>less <00:03:28.516>the <00:03:28.671>same <00:03:28.827>patterns <00:03:28.982>as <00:03:29.138>all <00:03:29.293>the <00:03:29.449>other <00:03:29.605>libraries,

70
00:03:30.925 --> 00:03:33.325
<00:03:30.925>I <00:03:31.080>learned <00:03:31.236>that <00:03:31.391>it's <00:03:31.547>not <00:03:31.702>only <00:03:31.858>me <00:03:32.013>having <00:03:32.169>those <00:03:32.325>problems,

71
00:03:33.325 --> 00:03:36.885
<00:03:33.325>really <00:03:33.524>there's <00:03:33.725>simply <00:03:33.924>something <00:03:34.125>wrong <00:03:34.325>with <00:03:34.524>the <00:03:34.725>way

72
00:03:36.885 --> 00:03:38.725
<00:03:36.885>how <00:03:37.118>those <00:03:37.351>libraries <00:03:37.584>have <00:03:37.818>built <00:03:38.051>are <00:03:38.285>built.

73
00:03:39.305 --> 00:03:41.125
<00:03:39.305>So <00:03:39.655>server <00:03:40.005>I <00:03:40.355>has <00:03:40.705>more

74
00:03:41.125 --> 00:03:42.885
<00:03:41.125>or <00:03:41.405>less <00:03:41.685>10,000 <00:03:41.965>downloads <00:03:42.245>a <00:03:42.525>week,

75
00:03:43.135 --> 00:03:45.925
<00:03:43.135>which <00:03:43.290>I <00:03:43.446>think <00:03:43.601>is <00:03:43.757>quite <00:03:43.912>a <00:03:44.068>good <00:03:44.223>sample <00:03:44.379>for <00:03:44.535>feedback.

76
00:03:46.465 --> 00:03:49.845
<00:03:46.465>And <00:03:46.592>thanks <00:03:46.719>to <00:03:46.846>that <00:03:46.974>we <00:03:47.101>found <00:03:47.228>out <00:03:47.355>like <00:03:47.483>what <00:03:47.610>are <00:03:47.737>the <00:03:47.865>issues

77
00:03:50.345 --> 00:03:53.045
<00:03:50.345>and <00:03:50.472>I <00:03:50.599>think <00:03:50.726>what <00:03:50.854>is <00:03:50.981>even <00:03:51.108>more <00:03:51.235>important, <00:03:51.363>how <00:03:51.490>to <00:03:51.617>fix <00:03:51.745>them.

78
00:03:53.705 --> 00:03:57.165
<00:03:53.704>So <00:03:53.832>as <00:03:53.959>you <00:03:54.086>will <00:03:54.214>see <00:03:54.341>at <00:03:54.468>the <00:03:54.595>end <00:03:54.723>of <00:03:54.850>this <00:03:54.977>presentation, <00:03:55.105>also,

79
00:03:57.165 --> 00:03:59.365
<00:03:57.165>we <00:03:57.304>are <00:03:57.445>not <00:03:57.584>the <00:03:57.725>first <00:03:57.864>ones <00:03:58.005>to <00:03:58.144>come <00:03:58.285>into <00:03:58.424>those <00:03:58.565>conclusions.

80
00:04:00.065 --> 00:04:04.765
<00:04:00.065>So <00:04:00.240>before <00:04:00.415>we <00:04:00.590>dig <00:04:00.765>into, <00:04:00.940>you <00:04:01.115>know, <00:04:01.290>details <00:04:01.465>of

81
00:04:04.875 --> 00:04:07.965
<00:04:04.875>what <00:04:05.075>is <00:04:05.275>wrong, <00:04:05.475>maybe <00:04:05.675>let's <00:04:05.875>agree <00:04:06.075>first <00:04:06.275>on

82
00:04:07.965 --> 00:04:10.205
<00:04:07.965>what <00:04:08.140>is <00:04:08.315>the <00:04:08.490>main <00:04:08.665>promise <00:04:08.840>of <00:04:09.015>the <00:04:09.190>component <00:04:09.365>library?

83
00:04:10.275 --> 00:04:12.045
<00:04:10.275>Like <00:04:10.450>why, <00:04:10.625>why <00:04:10.800>do <00:04:10.975>we <00:04:11.150>even <00:04:11.325>use <00:04:11.500>them, <00:04:11.675>right?

84
00:04:12.885 --> 00:04:14.325
<00:04:12.885>'cause <00:04:13.101>otherwise <00:04:13.316>it <00:04:13.533>would <00:04:13.749>be <00:04:13.964>quite <00:04:14.180>hard

85
00:04:14.325 --> 00:04:16.405
<00:04:14.325>to <00:04:14.500>judge <00:04:14.674>if <00:04:14.850>they're <00:04:15.024>delivering <00:04:15.200>the <00:04:15.375>promise <00:04:15.549>or <00:04:15.725>not.

86
00:04:16.985 --> 00:04:19.405
<00:04:16.985>So <00:04:17.265>the <00:04:17.545>popularity <00:04:17.825>of <00:04:18.105>component <00:04:18.385>libraries,

87
00:04:19.605 --> 00:04:21.045
<00:04:19.605>I <00:04:19.929>think <00:04:20.253>it's <00:04:20.577>sold <00:04:20.901>more

88
00:04:21.045 --> 00:04:23.805
<00:04:21.045>or <00:04:21.278>less, <00:04:21.511>uh, <00:04:21.745>when <00:04:21.978>the <00:04:22.211>community <00:04:22.445>kind

89
00:04:23.805 --> 00:04:24.885
<00:04:23.805>of <00:04:24.129>recognize <00:04:24.453>the <00:04:24.777>advantage

90
00:04:24.985 --> 00:04:27.565
<00:04:24.985>of <00:04:25.218>reusing <00:04:25.451>those <00:04:25.685>well-defined <00:04:25.918>components <00:04:26.151>across <00:04:26.385>different

91
00:04:27.565 --> 00:04:31.445
<00:04:27.565>projects <00:04:27.798>and <00:04:28.031>leading <00:04:28.265>to <00:04:28.498>very <00:04:28.731>increased <00:04:28.965>productivity.

92
00:04:31.905 --> 00:04:35.445
<00:04:31.905>So <00:04:32.060>I <00:04:32.216>still <00:04:32.371>remember <00:04:32.527>that <00:04:32.682>almost <00:04:32.838>every <00:04:32.993>front <00:04:33.149>end <00:04:33.304>conference

93
00:04:35.445 --> 00:04:39.445
<00:04:35.445>around <00:04:35.645>2018 <00:04:35.844>19 <00:04:36.045>had <00:04:36.245>a <00:04:36.445>design <00:04:36.645>system <00:04:36.844>stock.

94
00:04:39.585 --> 00:04:41.005
<00:04:39.585>You <00:04:39.904>probably <00:04:40.224>remember <00:04:40.543>that <00:04:40.863>too.

95
00:04:41.745 --> 00:04:45.645
<00:04:41.745>And <00:04:41.920>several <00:04:42.095>open <00:04:42.270>source <00:04:42.445>component <00:04:42.620>libraries <00:04:42.795>emerge, <00:04:42.970>uh, <00:04:43.145>such

96
00:04:45.645 --> 00:04:49.685
<00:04:45.645>as <00:04:45.784>material <00:04:45.924>UI <00:04:46.065>for <00:04:46.205>React <00:04:46.344>such <00:04:46.484>as <00:04:46.625>tify <00:04:46.765>for <00:04:46.905>VJS, <00:04:47.044>such

97
00:04:49.825 --> 00:04:51.805
<00:04:49.825>as <00:04:50.175>angular <00:04:50.525>material <00:04:50.875>for <00:04:51.224>Angular.

98
00:04:52.025 --> 00:04:55.565
<00:04:52.025>And <00:04:52.164>we <00:04:52.304>all <00:04:52.445>offered <00:04:52.585>a <00:04:52.724>very <00:04:52.864>wide <00:04:53.005>range <00:04:53.145>of <00:04:53.284>reusable <00:04:53.424>components

99
00:04:56.185 --> 00:04:57.405
<00:04:56.185>and <00:04:56.551>also <00:04:56.917>styled <00:04:57.282>components.

100
00:04:58.225 --> 00:05:01.005
<00:04:58.225>And <00:04:58.400>we <00:04:58.575>all <00:04:58.750>know <00:04:58.925>the <00:04:59.100>pain <00:04:59.275>of <00:04:59.450>repetitive <00:04:59.625>groundwork.

101
00:05:01.065 --> 00:05:03.005
<00:05:01.065>We <00:05:01.415>all <00:05:01.765>know <00:05:02.115>the <00:05:02.465>pain

102
00:05:03.385 --> 00:05:05.685
<00:05:03.385>of <00:05:03.618>building <00:05:03.851>the <00:05:04.085>same <00:05:04.318>UI <00:05:04.551>primitive <00:05:04.784>setting,

103
00:05:05.825 --> 00:05:08.965
<00:05:05.825>the <00:05:06.025>same <00:05:06.224>workflow <00:05:06.425>setting, <00:05:06.625>the <00:05:06.825>same <00:05:07.025>environment, <00:05:07.224>uh,

104
00:05:09.385 --> 00:05:11.885
<00:05:09.385>and <00:05:09.560>instead <00:05:09.735>of <00:05:09.909>delivering <00:05:10.085>value <00:05:10.260>to <00:05:10.435>your <00:05:10.610>customer, <00:05:10.784>instead

105
00:05:11.885 --> 00:05:13.485
<00:05:11.885>of <00:05:12.060>building <00:05:12.235>things <00:05:12.409>that <00:05:12.585>are <00:05:12.760>unique <00:05:12.935>to <00:05:13.110>your <00:05:13.284>project,

106
00:05:13.485 --> 00:05:14.605
<00:05:13.485>you're <00:05:13.821>really <00:05:14.157>spending <00:05:14.493>weeks

107
00:05:15.065 --> 00:05:17.485
<00:05:15.065>or <00:05:15.265>sometimes <00:05:15.465>months <00:05:15.665>in <00:05:15.865>a <00:05:16.065>very <00:05:16.265>big <00:05:16.465>project.

108
00:05:17.705 --> 00:05:19.965
<00:05:17.705>So <00:05:17.880>just <00:05:18.055>making <00:05:18.229>sure <00:05:18.405>that <00:05:18.580>it <00:05:18.755>will <00:05:18.930>scale <00:05:19.104>well.

109
00:05:21.065 --> 00:05:23.925
<00:05:21.065>So <00:05:21.220>the <00:05:21.376>fact <00:05:21.531>that <00:05:21.687>we <00:05:21.842>needed <00:05:21.998>some <00:05:22.153>kind <00:05:22.309>of <00:05:22.465>acceleration

110
00:05:23.925 --> 00:05:26.205
<00:05:23.925>of <00:05:24.158>UI <00:05:24.391>development, <00:05:24.625>I <00:05:24.858>think <00:05:25.091>it's <00:05:25.325>undeniable,

111
00:05:27.025 --> 00:05:29.325
<00:05:27.025>but <00:05:27.258>did <00:05:27.491>we <00:05:27.724>get <00:05:27.958>the <00:05:28.191>right <00:05:28.424>one?

112
00:05:29.875 --> 00:05:33.565
<00:05:29.875>Well, <00:05:30.155>let's <00:05:30.435>see. <00:05:30.715>So <00:05:30.995>let's <00:05:31.275>see

113
00:05:33.585 --> 00:05:35.325
<00:05:33.585>how <00:05:33.935>the <00:05:34.284>most <00:05:34.635>common <00:05:34.984>architecture

114
00:05:35.325 --> 00:05:37.445
<00:05:35.325>of <00:05:35.525>a <00:05:35.724>UI <00:05:35.925>library <00:05:36.125>these <00:05:36.325>days <00:05:36.525>looks <00:05:36.724>like.

115
00:05:38.145 --> 00:05:40.325
<00:05:38.145>Uh, <00:05:38.344>this <00:05:38.544>is <00:05:38.745>the <00:05:38.945>architecture <00:05:39.145>that <00:05:39.344>is <00:05:39.544>implemented

116
00:05:40.325 --> 00:05:44.085
<00:05:40.325>by <00:05:40.500>frameworks <00:05:40.675>like <00:05:40.849>bootstrap <00:05:41.025>by <00:05:41.200>Material, <00:05:41.375>UI <00:05:41.550>by <00:05:41.724>Beautify,

117
00:05:44.105 --> 00:05:46.605
<00:05:44.105>and <00:05:44.338>a <00:05:44.571>lot <00:05:44.805>of <00:05:45.038>other <00:05:45.271>popular <00:05:45.505>libraries.

118
00:05:47.305 --> 00:05:50.925
<00:05:47.305>And <00:05:47.480>let's <00:05:47.655>see <00:05:47.830>what <00:05:48.005>main <00:05:48.180>use <00:05:48.355>cases <00:05:48.530>it <00:05:48.705>covers.

119
00:05:51.985 --> 00:05:53.125
<00:05:51.985>So <00:05:52.327>we <00:05:52.669>will <00:05:53.011>explore

120
00:05:53.225 --> 00:05:56.645
<00:05:53.225>how <00:05:53.400>modern <00:05:53.575>libraries <00:05:53.750>cover <00:05:53.925>the <00:05:54.100>most <00:05:54.275>important <00:05:54.450>use <00:05:54.625>cases

121
00:05:56.645 --> 00:05:59.045
<00:05:56.645>around <00:05:57.111>components <00:05:57.578>consumption, <00:05:58.044>customization.

122
00:05:59.625 --> 00:06:01.765
<00:05:59.625>We <00:05:59.780>will <00:05:59.936>see <00:06:00.091>how <00:06:00.247>easy <00:06:00.402>it <00:06:00.558>is <00:06:00.713>to <00:06:00.869>achieve <00:06:01.025>them.

123
00:06:02.385 --> 00:06:03.685
<00:06:02.385>And <00:06:02.619>what <00:06:02.853>is <00:06:03.087>even <00:06:03.321>more <00:06:03.555>important?

124
00:06:03.755 --> 00:06:05.125
<00:06:03.755>What <00:06:03.960>price <00:06:04.166>do <00:06:04.371>you <00:06:04.577>have <00:06:04.782>to <00:06:04.988>pay?

125
00:06:05.125 --> 00:06:06.325
<00:06:05.125>Because <00:06:05.341>there <00:06:05.557>is <00:06:05.772>always <00:06:05.989>a <00:06:06.205>price

126
00:06:06.345 --> 00:06:08.525
<00:06:06.345>and <00:06:06.578>unfortunately <00:06:06.811>sometimes <00:06:07.045>it's, <00:06:07.278>it's <00:06:07.511>quite <00:06:07.745>big.

127
00:06:09.065 --> 00:06:12.085
<00:06:09.065>So <00:06:09.265>of <00:06:09.465>course <00:06:09.665>component <00:06:09.865>are <00:06:10.065>a <00:06:10.265>decenter <00:06:10.465>of,

128
00:06:12.145 --> 00:06:13.725
<00:06:12.145>of <00:06:12.495>every <00:06:12.844>EY <00:06:13.195>library, <00:06:13.544>right?

129
00:06:14.785 --> 00:06:18.885
<00:06:14.785>And <00:06:14.925>in <00:06:15.065>most <00:06:15.205>of <00:06:15.345>the <00:06:15.485>libraries, <00:06:15.625>how <00:06:15.765>we <00:06:15.905>consume <00:06:16.045>them <00:06:16.185>is

130
00:06:18.885 --> 00:06:20.085
<00:06:18.885>that <00:06:19.101>we <00:06:19.317>are <00:06:19.532>just <00:06:19.748>importing <00:06:19.965>the

131
00:06:20.085 --> 00:06:21.485
<00:06:20.085>components <00:06:20.400>directly <00:06:20.715>from <00:06:21.030>the <00:06:21.345>library.

132
00:06:21.505 --> 00:06:22.885
<00:06:21.505>We <00:06:21.682>don't <00:06:21.859>have <00:06:22.037>access <00:06:22.214>to <00:06:22.392>the <00:06:22.569>source <00:06:22.747>code,

133
00:06:22.885 --> 00:06:25.245
<00:06:22.885>we <00:06:23.060>are <00:06:23.235>just <00:06:23.409>importing <00:06:23.585>the <00:06:23.760>component <00:06:23.935>and <00:06:24.110>using <00:06:24.284>it.

134
00:06:26.545 --> 00:06:29.205
<00:06:26.545>And <00:06:26.685>when <00:06:26.825>we <00:06:26.965>want <00:06:27.105>to <00:06:27.245>customize <00:06:27.385>this <00:06:27.525>component, <00:06:27.665>we <00:06:27.805>use <00:06:27.945>props

135
00:06:29.705 --> 00:06:31.445
<00:06:29.705>and <00:06:30.171>moderate <00:06:30.638>component <00:06:31.104>libraries.

136
00:06:31.445 --> 00:06:32.565
<00:06:31.445>They <00:06:31.781>all <00:06:32.117>love <00:06:32.453>props.

137
00:06:32.945 --> 00:06:36.125
<00:06:32.945>So <00:06:33.120>in <00:06:33.295>materially <00:06:33.469>UI <00:06:33.645>there <00:06:33.820>is <00:06:33.995>15 <00:06:34.170>props <00:06:34.344>just

138
00:06:36.125 --> 00:06:38.005
<00:06:36.125>for <00:06:36.591>the <00:06:37.058>bottom <00:06:37.525>component.

139
00:06:38.145 --> 00:06:40.085
<00:06:38.145>And <00:06:38.300>you <00:06:38.456>know, <00:06:38.611>the <00:06:38.767>goal <00:06:38.922>of <00:06:39.078>those <00:06:39.233>props <00:06:39.389>is <00:06:39.544>really

140
00:06:40.085 --> 00:06:41.485
<00:06:40.085>to <00:06:40.400>allow <00:06:40.715>customization <00:06:41.030>of <00:06:41.345>look

141
00:06:41.485 --> 00:06:43.445
<00:06:41.485>and <00:06:41.835>feel <00:06:42.185>of <00:06:42.535>components <00:06:42.885>markup,

142
00:06:43.835 --> 00:06:45.405
<00:06:43.835>like <00:06:44.185>all <00:06:44.534>the <00:06:44.885>possible <00:06:45.234>aspects.

143
00:06:45.505 --> 00:06:47.365
<00:06:45.505>And <00:06:45.784>when <00:06:46.065>it <00:06:46.344>comes <00:06:46.625>to <00:06:46.905>look

144
00:06:47.365 --> 00:06:48.965
<00:06:47.365>and <00:06:47.565>feel, <00:06:47.765>there <00:06:47.965>is <00:06:48.165>something <00:06:48.365>called <00:06:48.565>style <00:06:48.765>props.

145
00:06:48.965 --> 00:06:51.685
<00:06:48.965>So <00:06:49.120>basically <00:06:49.276>props <00:06:49.431>that <00:06:49.587>are <00:06:49.742>defining <00:06:49.898>how <00:06:50.053>the <00:06:50.209>things <00:06:50.365>look.

146
00:06:52.185 --> 00:06:53.325
<00:06:52.185>I'm <00:06:52.356>not <00:06:52.527>a <00:06:52.698>huge <00:06:52.869>fan <00:06:53.039>of <00:06:53.211>those

147
00:06:53.745 --> 00:06:56.045
<00:06:53.745>and <00:06:53.885>I <00:06:54.025>think <00:06:54.165>this <00:06:54.305>is <00:06:54.445>also <00:06:54.585>the <00:06:54.725>reason <00:06:54.865>why <00:06:55.005>there <00:06:55.145>are

148
00:06:56.045 --> 00:06:57.285
<00:06:56.045>so <00:06:56.268>many <00:06:56.491>props <00:06:56.714>for <00:06:56.937>each <00:06:57.160>component.

149
00:06:57.285 --> 00:06:59.885
<00:06:57.284>But <00:06:57.440>I <00:06:57.596>also <00:06:57.751>understand <00:06:57.907>like <00:06:58.062>why, <00:06:58.218>why <00:06:58.373>people <00:06:58.529>need <00:06:58.684>them

150
00:06:59.885 --> 00:07:01.565
<00:06:59.885>and <00:07:00.118>why <00:07:00.351>it <00:07:00.585>became <00:07:00.818>an <00:07:01.051>established <00:07:01.284>pattern.

151
00:07:01.705 --> 00:07:04.325
<00:07:01.705>But <00:07:01.860>when <00:07:02.016>we <00:07:02.171>are <00:07:02.327>talking <00:07:02.482>about <00:07:02.638>the <00:07:02.793>separation <00:07:02.949>of <00:07:03.104>concerts,

152
00:07:04.395 --> 00:07:06.365
<00:07:04.395>perhaps <00:07:04.674>props <00:07:04.955>shouldn't <00:07:05.234>be <00:07:05.515>for <00:07:05.794>styling,

153
00:07:06.985 --> 00:07:08.045
<00:07:06.985>but <00:07:07.303>that's <00:07:07.621>another <00:07:07.939>topic.

154
00:07:09.225 --> 00:07:12.485
<00:07:09.225>So <00:07:09.505>customizing <00:07:09.785>fruit <00:07:10.065>props <00:07:10.345>works <00:07:10.625>more

155
00:07:12.485 --> 00:07:14.845
<00:07:12.485>or <00:07:12.640>less <00:07:12.796>the <00:07:12.951>same <00:07:13.107>for <00:07:13.262>really <00:07:13.418>like <00:07:13.573>every <00:07:13.729>y <00:07:13.885>library,

156
00:07:15.255 --> 00:07:17.965
<00:07:15.255>every <00:07:15.382>y <00:07:15.509>library <00:07:15.636>that <00:07:15.764>I've <00:07:15.891>seen <00:07:16.018>out <00:07:16.145>there <00:07:16.273>has <00:07:16.400>almost <00:07:16.527>the <00:07:16.655>same

157
00:07:17.965 --> 00:07:20.725
<00:07:17.965>props <00:07:18.120>for <00:07:18.276>buttons, <00:07:18.431>almost <00:07:18.587>the <00:07:18.742>same <00:07:18.898>props <00:07:19.053>for <00:07:19.209>check <00:07:19.364>boxes

158
00:07:20.905 --> 00:07:22.285
<00:07:20.905>and, <00:07:21.153>and <00:07:21.401>all <00:07:21.650>the <00:07:21.898>other <00:07:22.147>components.

159
00:07:22.745 --> 00:07:26.565
<00:07:22.745>The <00:07:22.872>complexity <00:07:22.999>starts <00:07:23.126>to <00:07:23.254>grow <00:07:23.381>very <00:07:23.508>fast <00:07:23.635>when <00:07:23.763>we <00:07:23.890>need <00:07:24.017>to <00:07:24.145>go

160
00:07:26.625 --> 00:07:28.005
<00:07:26.625>beyond <00:07:27.867>that.

161
00:07:28.945 --> 00:07:32.125
<00:07:28.945>And <00:07:29.120>let's <00:07:29.295>be <00:07:29.469>honest, <00:07:29.645>we <00:07:29.820>always <00:07:29.995>do <00:07:30.170>like <00:07:30.344>always.

162
00:07:33.025 --> 00:07:37.285
<00:07:33.025>So <00:07:33.152>in <00:07:33.279>material <00:07:33.406>UI <00:07:33.534>for <00:07:33.661>a <00:07:33.788>button, <00:07:33.915>there <00:07:34.043>are <00:07:34.170>more <00:07:34.297>than <00:07:34.424>40

163
00:07:38.085 --> 00:07:41.605
<00:07:38.085>conditioning <00:07:38.364>conditionally <00:07:38.645>applied <00:07:38.924>CSS <00:07:39.205>classes <00:07:39.484>used

164
00:07:41.605 --> 00:07:42.725
<00:07:41.605>by <00:07:41.806>this <00:07:42.008>component <00:07:42.209>for <00:07:42.411>a <00:07:42.613>button.

165
00:07:43.345 --> 00:07:46.045
<00:07:43.345>And <00:07:43.485>don't <00:07:43.625>you <00:07:43.765>think <00:07:43.905>there <00:07:44.045>is <00:07:44.185>a <00:07:44.325>quite <00:07:44.465>high <00:07:44.605>learning <00:07:44.745>cure

166
00:07:46.045 --> 00:07:49.125
<00:07:46.045>for <00:07:46.245>a <00:07:46.445>button <00:07:46.645>and <00:07:46.845>material <00:07:47.045>wise <00:07:47.245>is <00:07:47.445>really

167
00:07:49.125 --> 00:07:50.165
<00:07:49.125>just <00:07:49.359>an <00:07:49.593>example <00:07:49.827>in <00:07:50.061>here.

168
00:07:50.165 --> 00:07:51.165
<00:07:50.165>Quite <00:07:50.615>extreme <00:07:51.065>example.

169
00:07:51.185 --> 00:07:52.685
<00:07:51.185>But <00:07:51.377>it <00:07:51.570>really <00:07:51.763>looks <00:07:51.956>exactly <00:07:52.149>the <00:07:52.342>same <00:07:52.535>way

170
00:07:52.685 --> 00:07:53.845
<00:07:52.685>for <00:07:52.946>all <00:07:53.207>the <00:07:53.468>other <00:07:53.729>libraries

171
00:07:54.605 --> 00:07:56.305
<00:07:54.605>and <00:07:54.838>in <00:07:55.071>most <00:07:55.305>of <00:07:55.538>them <00:07:55.771>modern <00:07:56.005>libraries.

172
00:07:56.945 --> 00:07:59.665
<00:07:56.945>Customizing <00:07:57.120>beyond <00:07:57.295>props <00:07:57.469>usually <00:07:57.645>means <00:07:57.820>that <00:07:57.995>we're <00:07:58.170>gonna <00:07:58.344>have

173
00:07:59.665 --> 00:08:02.025
<00:07:59.665>to <00:07:59.945>use <00:08:00.225>some <00:08:00.505>sophisticated <00:08:00.785>extensibility <00:08:01.065>system.

174
00:08:02.725 --> 00:08:04.025
<00:08:02.725>And <00:08:02.920>their <00:08:03.115>goal <00:08:03.310>is <00:08:03.505>always <00:08:03.700>the <00:08:03.895>same.

175
00:08:04.255 --> 00:08:06.265
<00:08:04.255>Provide <00:08:04.605>an <00:08:04.955>opinionated <00:08:05.305>abstraction <00:08:05.655>over

176
00:08:06.855 --> 00:08:08.745
<00:08:06.855>good <00:08:07.321>old <00:08:07.788>code <00:08:08.255>editing

177
00:08:09.685 --> 00:08:13.065
<00:08:09.685>and <00:08:09.840>materially <00:08:09.996>y <00:08:10.151>introduces <00:08:10.307>his <00:08:10.462>own <00:08:10.618>CSS <00:08:10.773>JS <00:08:10.929>styling <00:08:11.085>utility

178
00:08:13.575 --> 00:08:16.225
<00:08:13.575>that <00:08:13.808>is <00:08:14.041>using <00:08:14.275>their <00:08:14.508>own <00:08:14.741>styled <00:08:14.974>engine

179
00:08:16.695 --> 00:08:19.025
<00:08:16.695>that <00:08:16.974>is <00:08:17.255>set <00:08:17.534>up <00:08:17.815>over <00:08:18.094>emotion,

180
00:08:19.025 --> 00:08:23.505
<00:08:19.025>which <00:08:19.164>is <00:08:19.304>a <00:08:19.445>popular <00:08:19.585>CSSN <00:08:19.724>JS <00:08:19.864>library <00:08:20.005>for <00:08:20.145>one <00:08:20.284>of <00:08:20.424>changes.

181
00:08:23.605 --> 00:08:25.385
<00:08:23.605>You <00:08:23.885>can <00:08:24.165>use <00:08:24.445>SX <00:08:24.725>prop, <00:08:25.005>uh,

182
00:08:25.505 --> 00:08:27.465
<00:08:25.505>that <00:08:25.738>is <00:08:25.971>pretty <00:08:26.205>straightforward <00:08:26.438>to <00:08:26.671>use <00:08:26.905>actually.

183
00:08:27.605 --> 00:08:30.185
<00:08:27.605>And <00:08:27.760>it's <00:08:27.916>using <00:08:28.071>a <00:08:28.227>lot <00:08:28.382>of <00:08:28.538>team <00:08:28.693>properties <00:08:28.849>as <00:08:29.005>values

184
00:08:30.255 --> 00:08:31.385
<00:08:30.255>that <00:08:30.458>we <00:08:30.661>also <00:08:30.865>have <00:08:31.068>to <00:08:31.272>know.

185
00:08:31.385 --> 00:08:32.385
<00:08:31.385>And <00:08:31.565>you <00:08:31.745>also <00:08:31.925>have <00:08:32.105>to <00:08:32.284>learn.

186
00:08:33.285 --> 00:08:36.425
<00:08:33.284>And <00:08:33.440>actually <00:08:33.596>you <00:08:33.751>can <00:08:33.907>use <00:08:34.062>both <00:08:34.218>for <00:08:34.373>one <00:08:34.529>of <00:08:34.684>customizations.

187
00:08:37.205 --> 00:08:39.425
<00:08:37.205>Things <00:08:37.380>are <00:08:37.555>getting <00:08:37.730>even <00:08:37.905>more <00:08:38.080>complicated <00:08:38.255>where <00:08:38.430>we <00:08:38.605>want

188
00:08:39.425 --> 00:08:40.505
<00:08:39.424>to <00:08:39.749>style <00:08:40.073>nested <00:08:40.396>components.

189
00:08:40.505 --> 00:08:42.305
<00:08:40.505>Another <00:08:40.738>pattern <00:08:40.971>that <00:08:41.205>we <00:08:41.438>have <00:08:41.671>to <00:08:41.905>remember,

190
00:08:42.645 --> 00:08:44.985
<00:08:42.645>and <00:08:42.845>believe <00:08:43.044>me <00:08:43.245>it <00:08:43.444>was <00:08:43.645>much <00:08:43.845>more <00:08:44.044>nuanced

191
00:08:45.005 --> 00:08:47.305
<00:08:45.005>and <00:08:45.238>there <00:08:45.471>was <00:08:45.705>much <00:08:45.938>more <00:08:46.171>complexity <00:08:46.405>than

192
00:08:47.305 --> 00:08:49.225
<00:08:47.305>that <00:08:47.655>related <00:08:48.005>to <00:08:48.354>styling <00:08:48.704>components.

193
00:08:49.805 --> 00:08:52.265
<00:08:49.805>But <00:08:50.005>like <00:08:50.204>enough <00:08:50.405>of <00:08:50.604>material <00:08:50.805>ey, <00:08:51.005>it's <00:08:51.204>not

194
00:08:52.265 --> 00:08:53.465
<00:08:52.265>around <00:08:52.625>about <00:08:52.985>material <00:08:53.345>ey.

195
00:08:53.925 --> 00:08:57.005
<00:08:53.925>Uh, <00:08:54.052>my <00:08:54.179>goal <00:08:54.306>is <00:08:54.434>really <00:08:54.561>not <00:08:54.688>to <00:08:54.815>run <00:08:54.943>about <00:08:55.070>a <00:08:55.197>single <00:08:55.324>library.

196
00:08:57.485 --> 00:09:00.125
<00:08:57.485>I <00:08:57.625>actually <00:08:57.765>think <00:08:57.905>there <00:08:58.045>is <00:08:58.185>a <00:08:58.325>lot <00:08:58.465>of <00:08:58.605>clever <00:08:58.745>solutions <00:08:58.885>here,

197
00:09:00.285 --> 00:09:02.085
<00:09:00.285>a <00:09:00.485>lot <00:09:00.685>of <00:09:00.885>clever <00:09:01.084>solutions <00:09:01.285>to <00:09:01.485>problems <00:09:01.685>that

198
00:09:02.845 --> 00:09:05.205
<00:09:02.845>wouldn't <00:09:03.078>exist <00:09:03.311>if <00:09:03.545>the <00:09:03.778>outage <00:09:04.011>is <00:09:04.245>a

199
00:09:05.205 --> 00:09:06.365
<00:09:05.205>different <00:09:05.466>way <00:09:05.727>of <00:09:05.988>shipping <00:09:06.249>components.

200
00:09:06.745 --> 00:09:09.925
<00:09:06.745>But <00:09:06.885>I <00:09:07.025>want <00:09:07.165>spoil <00:09:07.305>it. <00:09:07.445>We'll <00:09:07.585>get <00:09:07.725>there <00:09:07.865>in <00:09:08.005>a <00:09:08.145>moment.

201
00:09:10.585 --> 00:09:12.245
<00:09:10.585>To <00:09:10.865>be <00:09:11.145>fair, <00:09:11.425>we <00:09:11.705>weren't <00:09:11.985>better

202
00:09:12.245 --> 00:09:14.405
<00:09:12.245>with <00:09:12.478>our <00:09:12.711>own <00:09:12.945>UI <00:09:13.178>library <00:09:13.411>store <00:09:13.645>oni.

203
00:09:14.465 --> 00:09:16.085
<00:09:14.465>So <00:09:14.931>the <00:09:15.398>abstract <00:09:15.865>trend

204
00:09:16.085 --> 00:09:17.685
<00:09:16.085>that <00:09:16.260>we <00:09:16.435>chose <00:09:16.610>was <00:09:16.785>a <00:09:16.960>little <00:09:17.135>bit <00:09:17.310>less <00:09:17.485>crazy.

205
00:09:17.685 --> 00:09:20.885
<00:09:17.685>It <00:09:17.824>was <00:09:17.964>a <00:09:18.104>little <00:09:18.244>bit <00:09:18.385>closer <00:09:18.525>to <00:09:18.665>the <00:09:18.805>well <00:09:18.944>CSS <00:09:19.084>itself

206
00:09:20.885 --> 00:09:22.845
<00:09:20.885>because <00:09:21.118>we <00:09:21.351>use <00:09:21.585>CSS <00:09:21.818>variables <00:09:22.051>for <00:09:22.285>siding.

207
00:09:23.025 --> 00:09:24.485
<00:09:23.025>And <00:09:23.287>the <00:09:23.550>idea <00:09:23.813>was <00:09:24.076>quite <00:09:24.339>simple.

208
00:09:24.905 --> 00:09:27.845
<00:09:24.905>You <00:09:25.060>have <00:09:25.216>CSS <00:09:25.371>VARs <00:09:25.527>as <00:09:25.682>a <00:09:25.838>like <00:09:25.993>global <00:09:26.149>public, <00:09:26.305>API,

209
00:09:27.955 --> 00:09:30.885
<00:09:27.955>then <00:09:28.130>you <00:09:28.305>have <00:09:28.480>CSS <00:09:28.655>VARs <00:09:28.830>for <00:09:29.005>every <00:09:29.180>component, <00:09:29.355>uh,

210
00:09:30.885 --> 00:09:32.805
<00:09:30.885>that <00:09:31.085>you <00:09:31.285>can <00:09:31.485>use <00:09:31.685>to <00:09:31.885>customize <00:09:32.085>your <00:09:32.285>components.

211
00:09:33.345 --> 00:09:34.525
<00:09:33.345>And <00:09:33.610>of <00:09:33.876>course <00:09:34.141>like <00:09:34.406>components,

212
00:09:34.805 --> 00:09:36.605
<00:09:34.805>specific <00:09:35.155>variables <00:09:35.505>they're <00:09:35.854>inheriting <00:09:36.204>from

213
00:09:36.605 --> 00:09:37.805
<00:09:36.605>like <00:09:37.145>global <00:09:37.685>variables.

214
00:09:38.075 --> 00:09:40.725
<00:09:38.075>Some <00:09:38.250>of <00:09:38.425>the <00:09:38.600>component <00:09:38.775>specific <00:09:38.950>variables <00:09:39.125>are <00:09:39.300>also <00:09:39.475>inheriting

215
00:09:40.725 --> 00:09:42.805
<00:09:40.725>from <00:09:41.075>other <00:09:41.425>components <00:09:41.775>specific <00:09:42.125>variables.

216
00:09:43.235 --> 00:09:44.365
<00:09:43.235>Debugging <00:09:43.574>is <00:09:43.913>not <00:09:44.252>easy.

217
00:09:45.065 --> 00:09:47.165
<00:09:45.065>Uh, <00:09:45.415>it <00:09:45.765>really <00:09:46.115>sounds <00:09:46.465>simple,

218
00:09:47.265 --> 00:09:48.845
<00:09:47.265>but <00:09:47.615>almost <00:09:47.965>always <00:09:48.314>we <00:09:48.665>have

219
00:09:48.845 --> 00:09:50.685
<00:09:48.845>to <00:09:49.078>look <00:09:49.311>them <00:09:49.545>up <00:09:49.778>in <00:09:50.011>the <00:09:50.245>documentation.

220
00:09:50.945 --> 00:09:52.205
<00:09:50.945>Almost <00:09:51.171>always <00:09:51.398>you <00:09:51.625>have <00:09:51.852>to <00:09:52.079>hug

221
00:09:52.205 --> 00:09:53.965
<00:09:52.205>because <00:09:52.438>it's, <00:09:52.671>it's <00:09:52.905>still <00:09:53.138>an <00:09:53.371>abstraction <00:09:53.605>layer.

222
00:09:54.585 --> 00:09:56.845
<00:09:54.585>Uh, <00:09:54.785>bootstrap <00:09:54.985>view, <00:09:55.185>it <00:09:55.385>has <00:09:55.585>the <00:09:55.785>same <00:09:55.985>approach,

223
00:09:56.905 --> 00:10:01.245
<00:09:56.905>but <00:09:57.021>it's <00:09:57.138>using <00:09:57.255>sa <00:09:57.371>If <00:09:57.488>you <00:09:57.605>decide <00:09:57.721>not <00:09:57.838>to <00:09:57.954>use <00:09:58.071>SaaS, <00:09:58.188>you <00:09:58.305>have

224
00:10:01.245 --> 00:10:02.605
<00:10:01.245>to <00:10:01.449>decide <00:10:01.653>not <00:10:01.857>to <00:10:02.061>use <00:10:02.265>bootstrap <00:10:02.469>view.

225
00:10:03.305 --> 00:10:05.365
<00:10:03.305>So <00:10:03.444>we <00:10:03.584>could <00:10:03.724>say <00:10:03.864>quite <00:10:04.005>a <00:10:04.145>lot <00:10:04.285>of <00:10:04.425>things <00:10:04.564>to <00:10:04.704>learn

226
00:10:05.385 --> 00:10:07.405
<00:10:05.385>and <00:10:05.618>remember <00:10:05.851>just <00:10:06.085>the <00:10:06.318>customized <00:10:06.551>components, <00:10:06.785>right?

227
00:10:07.595 --> 00:10:10.325
<00:10:07.595>That <00:10:07.770>we <00:10:07.945>already <00:10:08.120>know <00:10:08.295>HTML, <00:10:08.470>we <00:10:08.645>already <00:10:08.820>know <00:10:08.995>CSS,

228
00:10:10.325 --> 00:10:11.605
<00:10:10.325>maybe <00:10:10.613>we <00:10:10.901>already <00:10:11.189>know <00:10:11.477>Tailwind,

229
00:10:11.825 --> 00:10:14.045
<00:10:11.825>but <00:10:12.025>if <00:10:12.225>you're <00:10:12.425>using <00:10:12.625>a <00:10:12.825>component <00:10:13.025>library, <00:10:13.225>there's

230
00:10:14.555 --> 00:10:15.925
<00:10:14.555>basically <00:10:14.863>a <00:10:15.171>whole <00:10:15.479>new <00:10:15.788>surface

231
00:10:16.025 --> 00:10:17.525
<00:10:16.025>of <00:10:16.250>complexity <00:10:16.475>that <00:10:16.699>we <00:10:16.925>have <00:10:17.150>to <00:10:17.375>learn.

232
00:10:18.505 --> 00:10:20.765
<00:10:18.505>Uh, <00:10:18.680>so <00:10:18.855>let's <00:10:19.030>see, <00:10:19.205>how <00:10:19.380>does <00:10:19.555>it <00:10:19.730>look <00:10:19.905>like

233
00:10:20.785 --> 00:10:23.485
<00:10:20.785>for <00:10:20.985>more <00:10:21.185>complex <00:10:21.385>components <00:10:21.584>in <00:10:21.785>bottom <00:10:21.985>like <00:10:22.185>accordion

234
00:10:24.145 --> 00:10:27.965
<00:10:24.145>and <00:10:24.285>most <00:10:24.425>of <00:10:24.564>the <00:10:24.704>libraries <00:10:24.845>that <00:10:24.985>I <00:10:25.125>have <00:10:25.265>seen <00:10:25.405>just <00:10:25.545>composition.

235
00:10:28.025 --> 00:10:30.325
<00:10:28.025>So <00:10:28.199>what <00:10:28.375>they <00:10:28.550>do <00:10:28.725>is <00:10:28.900>they're <00:10:29.074>basically <00:10:29.250>taking <00:10:29.425>a

236
00:10:30.325 --> 00:10:31.765
<00:10:30.325>very <00:10:30.973>complex <00:10:31.621>component.

237
00:10:31.955 --> 00:10:35.085
<00:10:31.955>They're <00:10:32.155>breaking <00:10:32.355>it <00:10:32.555>down <00:10:32.755>into <00:10:32.955>smaller <00:10:33.155>ones, <00:10:33.355>uh,

238
00:10:35.085 --> 00:10:36.525
<00:10:35.085>that <00:10:35.409>can <00:10:35.733>be <00:10:36.057>composed <00:10:36.381>together.

239
00:10:36.745 --> 00:10:38.405
<00:10:36.745>And <00:10:36.978>when <00:10:37.211>it <00:10:37.445>comes <00:10:37.678>to <00:10:37.911>the <00:10:38.145>flexibility,

240
00:10:38.925 --> 00:10:40.085
<00:10:38.925>I <00:10:39.098>think <00:10:39.273>it's <00:10:39.447>not <00:10:39.621>a <00:10:39.795>bad <00:10:39.969>approach.

241
00:10:40.425 --> 00:10:42.205
<00:10:40.425>You <00:10:40.625>can <00:10:40.824>style <00:10:41.025>them, <00:10:41.224>you <00:10:41.425>can <00:10:41.625>customize <00:10:41.824>each

242
00:10:42.205 --> 00:10:44.045
<00:10:42.205>of <00:10:42.555>the <00:10:42.905>accordion <00:10:43.255>sub <00:10:43.605>elements,

243
00:10:46.185 --> 00:10:48.725
<00:10:46.185>but <00:10:46.359>customizing <00:10:46.535>it <00:10:46.709>could <00:10:46.885>be <00:10:47.060>a <00:10:47.234>little <00:10:47.410>bit <00:10:47.584>challenging.

244
00:10:48.795 --> 00:10:52.445
<00:10:48.795>Like <00:10:48.922>as <00:10:49.049>you <00:10:49.176>can <00:10:49.304>see <00:10:49.431>here <00:10:49.558>it <00:10:49.685>is, <00:10:49.813>it <00:10:49.940>is <00:10:50.067>extremely <00:10:50.194>opinionated

245
00:10:52.585 --> 00:10:54.685
<00:10:52.585>and <00:10:52.865>this <00:10:53.145>is <00:10:53.425>what <00:10:53.705>was <00:10:53.985>needed

246
00:10:54.745 --> 00:10:56.645
<00:10:54.745>to <00:10:55.025>just <00:10:55.305>slightly <00:10:55.585>adjust <00:10:55.865>the <00:10:56.145>design.

247
00:10:57.705 --> 00:11:02.605
<00:10:57.705>And <00:10:57.860>in <00:10:58.016>2023, <00:10:58.171>everyone <00:10:58.327>wants <00:10:58.482>to <00:10:58.638>stand <00:10:58.793>out <00:10:58.949>theey <00:10:59.105>difference

248
00:11:02.945 --> 00:11:04.685
<00:11:02.945>so <00:11:03.225>much <00:11:03.505>from <00:11:03.785>site <00:11:04.065>to <00:11:04.345>site.

249
00:11:05.205 --> 00:11:07.325
<00:11:05.205>I <00:11:05.380>think <00:11:05.555>you <00:11:05.730>know <00:11:05.905>that <00:11:06.080>like <00:11:06.255>sometimes <00:11:06.430>it's <00:11:06.605>getting

250
00:11:07.325 --> 00:11:08.365
<00:11:07.325>really <00:11:08.261>crazy.

251
00:11:08.585 --> 00:11:10.885
<00:11:08.585>And <00:11:08.785>I <00:11:08.985>think <00:11:09.185>that's <00:11:09.385>one <00:11:09.585>of <00:11:09.785>the <00:11:09.985>problems

252
00:11:10.885 --> 00:11:12.245
<00:11:10.885>of <00:11:11.191>the <00:11:11.497>modern <00:11:11.803>EY <00:11:12.109>libraries.

253
00:11:12.245 --> 00:11:14.925
<00:11:12.245>Like <00:11:12.445>they're <00:11:12.645>not <00:11:12.845>optimized <00:11:13.045>for <00:11:13.245>those <00:11:13.445>use <00:11:13.645>cases.

254
00:11:14.925 --> 00:11:17.645
<00:11:14.925>They're <00:11:15.275>not <00:11:15.625>versatile <00:11:15.974>enough, <00:11:16.324>uh,

255
00:11:17.665 --> 00:11:21.285
<00:11:17.665>and <00:11:17.820>flexible <00:11:17.976>enough <00:11:18.131>to <00:11:18.287>fit <00:11:18.442>into <00:11:18.598>those <00:11:18.753>for <00:11:18.909>material <00:11:19.064>y.

256
00:11:21.305 --> 00:11:24.365
<00:11:21.305>If <00:11:21.479>you <00:11:21.655>continue <00:11:21.829>with <00:11:22.005>those <00:11:22.180>customization, <00:11:22.354>if <00:11:22.530>we <00:11:22.704>want

257
00:11:24.365 --> 00:11:26.485
<00:11:24.365>to <00:11:24.505>go <00:11:24.645>up, <00:11:24.785>if <00:11:24.925>we <00:11:25.065>want <00:11:25.205>to <00:11:25.345>do <00:11:25.485>a <00:11:25.625>global <00:11:25.765>customization,

258
00:11:26.945 --> 00:11:30.165
<00:11:26.945>you're <00:11:27.145>defining <00:11:27.345>a <00:11:27.545>team <00:11:27.745>that <00:11:27.945>overrides <00:11:28.145>default <00:11:28.345>styles.

259
00:11:30.425 --> 00:11:31.725
<00:11:30.425>And <00:11:30.659>of <00:11:30.893>course <00:11:31.127>this <00:11:31.361>is <00:11:31.595>another

260
00:11:31.965 --> 00:11:33.085
<00:11:31.965>abstraction <00:11:32.166>layer <00:11:32.368>we <00:11:32.569>need <00:11:32.771>to <00:11:32.973>learn.

261
00:11:33.745 --> 00:11:36.445
<00:11:33.745>And <00:11:33.920>literally <00:11:34.095>I <00:11:34.270>think, <00:11:34.445>you <00:11:34.620>know, <00:11:34.795>the <00:11:34.970>API <00:11:35.145>surface

262
00:11:36.585 --> 00:11:38.925
<00:11:36.585>of <00:11:36.785>material <00:11:36.985>Y <00:11:37.185>is <00:11:37.385>much, <00:11:37.585>much, <00:11:37.785>much <00:11:37.985>bigger.

263
00:11:38.985 --> 00:11:42.525
<00:11:38.985>The <00:11:39.125>API <00:11:39.265>surface <00:11:39.405>or <00:11:39.545>VJS <00:11:39.685>or <00:11:39.825>React, <00:11:39.965>which <00:11:40.105>is <00:11:40.245>kinda <00:11:40.385>crazy,

264
00:11:42.985 --> 00:11:45.325
<00:11:42.985>but <00:11:43.160>again, <00:11:43.335>it's <00:11:43.510>not <00:11:43.685>a <00:11:43.860>rant <00:11:44.035>about <00:11:44.210>material <00:11:44.385>ey,

265
00:11:45.355 --> 00:11:46.525
<00:11:45.355>this <00:11:45.618>is <00:11:45.881>just <00:11:46.144>an <00:11:46.408>example.

266
00:11:48.665 --> 00:11:50.685
<00:11:48.665>You <00:11:48.839>can <00:11:49.015>also <00:11:49.189>use <00:11:49.365>global <00:11:49.540>sized <00:11:49.714>component <00:11:49.890>for <00:11:50.064>that.

267
00:11:51.515 --> 00:11:53.045
<00:11:51.515>Make <00:11:51.711>your <00:11:51.908>own <00:11:52.105>choice <00:11:52.301>which <00:11:52.498>one <00:11:52.695>is <00:11:52.891>better.

268
00:11:53.905 --> 00:11:57.105
<00:11:53.905>Uh, <00:11:54.032>okay, <00:11:54.159>I <00:11:54.286>think <00:11:54.414>at <00:11:54.541>this <00:11:54.668>stage <00:11:54.795>you <00:11:54.923>may <00:11:55.050>have <00:11:55.177>a <00:11:55.305>sense

269
00:11:57.165 --> 00:12:01.065
<00:11:57.165>of <00:11:57.292>like, <00:11:57.419>what <00:11:57.546>is <00:11:57.674>wrong, <00:11:57.801>but <00:11:57.928>let's <00:11:58.055>try <00:11:58.183>to <00:11:58.310>be <00:11:58.437>more <00:11:58.564>specific.

270
00:12:01.065 --> 00:12:02.265
<00:12:01.065>Let's <00:12:01.281>try <00:12:01.497>to <00:12:01.713>name <00:12:01.929>those <00:12:02.145>things.

271
00:12:02.355 --> 00:12:06.185
<00:12:02.355>Let's <00:12:02.510>try <00:12:02.666>to <00:12:02.821>identify <00:12:02.977>them <00:12:03.132>and <00:12:03.288>then <00:12:03.443>find <00:12:03.599>a <00:12:03.755>solution

272
00:12:06.855 --> 00:12:09.385
<00:12:06.855>because <00:12:07.030>only <00:12:07.205>if <00:12:07.380>we <00:12:07.555>identify <00:12:07.730>this <00:12:07.905>we <00:12:08.080>can <00:12:08.255>actually

273
00:12:09.575 --> 00:12:10.625
<00:12:09.575>work <00:12:09.890>on <00:12:10.205>a <00:12:10.520>solution.

274
00:12:10.965 --> 00:12:12.705
<00:12:10.965>So <00:12:11.245>I <00:12:11.525>think <00:12:11.805>ultimately <00:12:12.085>people <00:12:12.365>adapt

275
00:12:12.705 --> 00:12:14.185
<00:12:12.705>to <00:12:13.038>our <00:12:13.371>libraries <00:12:13.704>actually <00:12:14.036>not

276
00:12:14.185 --> 00:12:16.065
<00:12:14.185>because <00:12:14.464>they <00:12:14.744>provide <00:12:15.025>you <00:12:15.305>y <00:12:15.584>acceleration

277
00:12:16.295 --> 00:12:20.705
<00:12:16.295>because <00:12:16.450>we <00:12:16.606>clearly <00:12:16.761>see <00:12:16.917>that <00:12:17.072>it's <00:12:17.228>not <00:12:17.383>that <00:12:17.539>much <00:12:17.694>helpful,

278
00:12:21.205 --> 00:12:24.585
<00:12:21.205>uh, <00:12:21.380>at <00:12:21.555>some <00:12:21.730>point, <00:12:21.905>but <00:12:22.080>because <00:12:22.255>they <00:12:22.430>are <00:12:22.605>opinionated.

279
00:12:25.005 --> 00:12:26.905
<00:12:25.005>So <00:12:25.160>a <00:12:25.316>lot <00:12:25.471>of <00:12:25.627>things <00:12:25.782>you <00:12:25.938>have <00:12:26.093>to <00:12:26.249>figure <00:12:26.405>out

280
00:12:26.925 --> 00:12:30.105
<00:12:26.925>before <00:12:27.125>it <00:12:27.324>don't <00:12:27.525>have <00:12:27.724>to <00:12:27.925>figure <00:12:28.125>out <00:12:28.324>anymore.

281
00:12:30.255 --> 00:12:31.545
<00:12:30.255>Like <00:12:30.487>this <00:12:30.719>gives <00:12:30.951>you <00:12:31.183>a <00:12:31.415>feeling

282
00:12:31.615 --> 00:12:33.665
<00:12:31.615>that <00:12:31.965>you're <00:12:32.315>mitigating <00:12:32.665>the <00:12:33.015>risk

283
00:12:34.245 --> 00:12:37.025
<00:12:34.245>by <00:12:34.595>implementing <00:12:34.945>market <00:12:35.295>best <00:12:35.645>practices.

284
00:12:37.525 --> 00:12:39.505
<00:12:37.525>And <00:12:37.758>you <00:12:37.991>know, <00:12:38.225>there's <00:12:38.458>an <00:12:38.691>opinionated <00:12:38.925>framework.

285
00:12:39.505 --> 00:12:40.585
<00:12:39.505>It <00:12:39.699>works <00:12:39.893>in <00:12:40.088>a <00:12:40.282>certain <00:12:40.477>way,

286
00:12:40.775 --> 00:12:42.705
<00:12:40.775>there's <00:12:41.008>a <00:12:41.241>certain <00:12:41.475>way <00:12:41.708>of <00:12:41.941>customizing <00:12:42.175>components.

287
00:12:42.705 --> 00:12:46.065
<00:12:42.705>There <00:12:42.880>is <00:12:43.055>a <00:12:43.230>certain <00:12:43.405>way, <00:12:43.580>uh, <00:12:43.755>of <00:12:43.930>using <00:12:44.105>them.

288
00:12:46.605 --> 00:12:48.225
<00:12:46.605>And <00:12:46.838>if <00:12:47.071>so <00:12:47.305>many <00:12:47.538>people <00:12:47.771>adapted <00:12:48.005>it

289
00:12:48.645 --> 00:12:49.945
<00:12:48.645>how <00:12:48.879>it <00:12:49.113>could <00:12:49.347>be <00:12:49.581>wrong, <00:12:49.815>right?

290
00:12:51.345 --> 00:12:53.945
<00:12:51.345>I <00:12:51.500>think <00:12:51.656>the <00:12:51.811>assumption <00:12:51.967>that <00:12:52.122>opinionated <00:12:52.278>H <00:12:52.433>two <00:12:52.589>I <00:12:52.745>libraries

291
00:12:54.005 --> 00:12:57.505
<00:12:54.005>are <00:12:54.238>universally <00:12:54.471>good <00:12:54.705>acceleration <00:12:54.938>for <00:12:55.171>Y <00:12:55.405>development.

292
00:12:57.625 --> 00:12:59.385
<00:12:57.625>I <00:12:57.800>think <00:12:57.975>this <00:12:58.150>is <00:12:58.325>the <00:12:58.500>root <00:12:58.675>of <00:12:58.850>all <00:12:59.025>evil

293
00:12:59.975 --> 00:13:02.705
<00:12:59.975>because <00:13:00.325>opinionated <00:13:00.675>y <00:13:01.025>frameworks <00:13:01.375>are

294
00:13:03.435 --> 00:13:05.465
<00:13:03.435>definitely <00:13:04.135>not <00:13:04.834>universal.

295
00:13:05.535 --> 00:13:06.945
<00:13:05.535>They <00:13:05.788>have <00:13:06.042>their <00:13:06.296>own <00:13:06.550>use <00:13:06.804>cases,

296
00:13:07.685 --> 00:13:12.145
<00:13:07.685>but <00:13:07.840>you <00:13:07.996>know, <00:13:08.151>they, <00:13:08.307>they <00:13:08.462>try <00:13:08.618>to <00:13:08.773>appear <00:13:08.929>as <00:13:09.084>something

297
00:13:12.145 --> 00:13:14.785
<00:13:12.145>that <00:13:12.345>is <00:13:12.545>ultimately <00:13:12.745>good <00:13:12.944>acceleration <00:13:13.145>for <00:13:13.345>your <00:13:13.545>ui.

298
00:13:14.845 --> 00:13:16.265
<00:13:14.845>For <00:13:15.271>your <00:13:15.697>UI <00:13:16.123>development.

299
00:13:16.335 --> 00:13:19.505
<00:13:16.335>They're <00:13:16.475>trying <00:13:16.615>to <00:13:16.755>tell <00:13:16.895>you <00:13:17.035>that <00:13:17.175>hey, <00:13:17.315>like <00:13:17.455>you'll <00:13:17.595>use <00:13:17.735>tify

300
00:13:19.505 --> 00:13:21.065
<00:13:19.505>or <00:13:19.705>material <00:13:19.905>UI <00:13:20.105>for <00:13:20.305>any <00:13:20.505>kind <00:13:20.705>of <00:13:20.905>project

301
00:13:21.085 --> 00:13:22.545
<00:13:21.085>and <00:13:21.272>it'll <00:13:21.460>work <00:13:21.648>for <00:13:21.835>any <00:13:22.023>kind <00:13:22.211>of <00:13:22.399>project.

302
00:13:23.495 --> 00:13:25.945
<00:13:23.495>Well, <00:13:23.845>for <00:13:24.195>small <00:13:24.545>projects, <00:13:24.895>most

303
00:13:25.985 --> 00:13:29.185
<00:13:25.985>of <00:13:26.140>the <00:13:26.296>popular <00:13:26.451>UI <00:13:26.607>libraries <00:13:26.762>is <00:13:26.918>just <00:13:27.073>too <00:13:27.229>complex, <00:13:27.385>really,

304
00:13:29.295 --> 00:13:32.425
<00:13:29.295>like <00:13:29.422>what <00:13:29.549>you <00:13:29.676>need <00:13:29.804>is <00:13:29.931>maybe <00:13:30.058>help <00:13:30.185>with <00:13:30.313>access, <00:13:30.440>a <00:13:30.567>little <00:13:30.694>bit

305
00:13:32.425 --> 00:13:33.465
<00:13:32.425>of <00:13:32.737>help <00:13:33.049>with <00:13:33.361>accessibility.

306
00:13:33.845 --> 00:13:35.225
<00:13:33.845>But <00:13:34.155>what <00:13:34.466>everyone <00:13:34.776>gives <00:13:35.087>you,

307
00:13:35.285 --> 00:13:38.105
<00:13:35.285>almost <00:13:35.459>everyone <00:13:35.635>gives <00:13:35.810>you <00:13:35.985>is <00:13:36.160>like <00:13:36.334>the <00:13:36.510>full <00:13:36.685>fully

308
00:13:38.105 --> 00:13:39.225
<00:13:38.105>fledged <00:13:38.609>UI <00:13:39.113>framework.

309
00:13:39.795 --> 00:13:42.865
<00:13:39.795>Large <00:13:40.028>commercial <00:13:40.261>projects <00:13:40.495>they <00:13:40.728>usually <00:13:40.961>already <00:13:41.194>use

310
00:13:42.865 --> 00:13:44.625
<00:13:42.865>established <00:13:43.331>these <00:13:43.798>design <00:13:44.265>guidelines

311
00:13:44.725 --> 00:13:46.945
<00:13:44.725>and <00:13:44.925>they <00:13:45.125>have <00:13:45.325>to <00:13:45.525>be <00:13:45.725>implemented <00:13:45.925>pixel <00:13:46.125>perfect.

312
00:13:47.735 --> 00:13:48.985
<00:13:47.735>This <00:13:47.960>means <00:13:48.185>that <00:13:48.410>we <00:13:48.635>will <00:13:48.860>have

313
00:13:48.985 --> 00:13:51.145
<00:13:48.985>to <00:13:49.218>customize <00:13:49.451>every <00:13:49.685>component <00:13:49.918>coming <00:13:50.151>from <00:13:50.385>the

314
00:13:51.205 --> 00:13:52.265
<00:13:51.205>UI <00:13:51.443>lab <00:13:51.682>very <00:13:51.920>quite <00:13:52.159>heavily.

315
00:13:52.565 --> 00:13:55.105
<00:13:52.565>And <00:13:52.740>in <00:13:52.915>most <00:13:53.090>cases, <00:13:53.265>this <00:13:53.440>customization <00:13:53.615>has <00:13:53.790>some <00:13:53.965>boundaries

316
00:13:55.105 --> 00:13:56.185
<00:13:55.105>that <00:13:55.429>has <00:13:55.752>some <00:13:56.077>limitations

317
00:13:56.685 --> 00:13:58.825
<00:13:56.685>and <00:13:56.885>inevitably <00:13:57.084>we'll <00:13:57.285>have <00:13:57.484>to <00:13:57.685>work <00:13:57.885>against <00:13:58.084>that.

318
00:13:59.205 --> 00:14:01.065
<00:13:59.205>Now <00:13:59.438>let's <00:13:59.671>talk <00:13:59.905>about <00:14:00.138>the <00:14:00.371>largest <00:14:00.605>projects.

319
00:14:04.925 --> 00:14:06.745
<00:14:04.925>So <00:14:05.099>when <00:14:05.275>we <00:14:05.449>are <00:14:05.625>talking <00:14:05.800>about <00:14:05.974>the <00:14:06.150>largest <00:14:06.324>projects,

320
00:14:06.805 --> 00:14:10.545
<00:14:06.805>we <00:14:07.005>often <00:14:07.204>talked <00:14:07.405>about <00:14:07.604>situations <00:14:07.805>where, <00:14:08.005>for <00:14:08.204>example,

321
00:14:10.645 --> 00:14:12.225
<00:14:10.645>we <00:14:10.845>have <00:14:11.045>some <00:14:11.245>kind <00:14:11.444>of <00:14:11.645>a <00:14:11.845>master <00:14:12.045>library

322
00:14:13.005 --> 00:14:16.225
<00:14:13.005>and <00:14:13.180>then <00:14:13.355>this <00:14:13.530>master <00:14:13.705>library <00:14:13.880>is <00:14:14.055>propagated <00:14:14.230>across <00:14:14.405>20

323
00:14:16.225 --> 00:14:18.065
<00:14:16.225>different <00:14:16.458>projects <00:14:16.691>in <00:14:16.925>each <00:14:17.158>of <00:14:17.391>those <00:14:17.625>projects.

324
00:14:18.065 --> 00:14:19.265
<00:14:18.065>It <00:14:18.425>is <00:14:18.785>slightly <00:14:19.145>customized.

325
00:14:19.805 --> 00:14:21.545
<00:14:19.805>Uh, <00:14:20.038>for <00:14:20.271>example, <00:14:20.505>in <00:14:20.738>the <00:14:20.971>e-commerce <00:14:21.204>world,

326
00:14:21.565 --> 00:14:23.065
<00:14:21.565>you <00:14:21.835>often <00:14:22.105>have <00:14:22.375>one <00:14:22.645>code <00:14:22.915>base

327
00:14:23.065 --> 00:14:25.705
<00:14:23.065>that <00:14:23.220>is <00:14:23.376>used <00:14:23.531>in <00:14:23.687>10 <00:14:23.842>15 <00:14:23.998>storefronts <00:14:24.153>for <00:14:24.309>different <00:14:24.465>brands.

328
00:14:26.205 --> 00:14:27.585
<00:14:26.205>And <00:14:26.515>sometimes <00:14:26.826>the <00:14:27.136>only <00:14:27.447>difference

329
00:14:27.585 --> 00:14:28.985
<00:14:27.585>between <00:14:27.900>them <00:14:28.215>is <00:14:28.530>brand <00:14:28.845>colors.

330
00:14:29.565 --> 00:14:31.825
<00:14:29.565>But <00:14:29.740>in <00:14:29.915>most <00:14:30.090>cases, <00:14:30.265>these <00:14:30.440>changes <00:14:30.615>go <00:14:30.790>far, <00:14:30.965>far

331
00:14:31.825 --> 00:14:33.105
<00:14:31.825>beyond <00:14:32.209>the <00:14:32.593>teaming <00:14:32.977>itself

332
00:14:33.565 --> 00:14:35.785
<00:14:33.565>and <00:14:33.765>include <00:14:33.965>different <00:14:34.165>variations <00:14:34.365>of <00:14:34.565>the <00:14:34.765>same <00:14:34.965>components

333
00:14:35.885 --> 00:14:38.345
<00:14:35.885>or <00:14:36.118>additional <00:14:36.351>extension <00:14:36.585>points, <00:14:36.818>even <00:14:37.051>additional <00:14:37.285>logic.

334
00:14:38.765 --> 00:14:41.305
<00:14:38.765>So <00:14:38.965>for <00:14:39.165>such <00:14:39.365>projects, <00:14:39.564>what <00:14:39.765>we <00:14:39.965>essentially <00:14:40.165>want

335
00:14:41.305 --> 00:14:44.625
<00:14:41.305>to <00:14:41.505>build <00:14:41.704>is <00:14:41.905>exactly <00:14:42.104>the <00:14:42.305>UI <00:14:42.505>framework, <00:14:42.704>uh,

336
00:14:44.935 --> 00:14:46.505
<00:14:44.935>from <00:14:45.214>the <00:14:45.494>UI <00:14:45.775>libraries <00:14:46.055>out <00:14:46.334>there.

337
00:14:46.505 --> 00:14:47.585
<00:14:46.505>But <00:14:46.748>the <00:14:46.991>only <00:14:47.234>problem <00:14:47.477>is

338
00:14:47.585 --> 00:14:49.465
<00:14:47.585>that <00:14:47.865>we <00:14:48.145>can't <00:14:48.425>customize <00:14:48.705>this <00:14:48.985>behavior.

339
00:14:49.725 --> 00:14:50.945
<00:14:49.725>We <00:14:49.999>it <00:14:50.274>is <00:14:50.548>already <00:14:50.823>granted.

340
00:14:51.705 --> 00:14:54.525
<00:14:51.705>Uh, <00:14:51.845>so <00:14:51.985>what <00:14:52.125>people <00:14:52.265>usually <00:14:52.405>end <00:14:52.545>up <00:14:52.685>with <00:14:52.825>is <00:14:52.965>another <00:14:53.105>layer

341
00:14:54.545 --> 00:14:58.685
<00:14:54.545>of <00:14:54.672>abstraction <00:14:54.799>on <00:14:54.926>top <00:14:55.054>of <00:14:55.181>this <00:14:55.308>UI <00:14:55.435>framework, <00:14:55.563>uh, <00:14:55.690>that <00:14:55.817>is <00:14:55.944>kind

342
00:14:58.685 --> 00:15:03.325
<00:14:58.685>of <00:14:58.918>trying <00:14:59.151>to <00:14:59.385>address <00:14:59.618>the <00:14:59.851>very, <00:15:00.084>very,

343
00:15:03.355 --> 00:15:05.885
<00:15:03.355>very <00:15:03.588>customized <00:15:03.821>needs <00:15:04.055>that <00:15:04.288>every <00:15:04.521>project <00:15:04.755>has.

344
00:15:08.905 --> 00:15:12.365
<00:15:08.905>So <00:15:09.079>like <00:15:09.255>universality, <00:15:09.430>I <00:15:09.605>think <00:15:09.780>this <00:15:09.954>is <00:15:10.130>one <00:15:10.305>thing

345
00:15:12.785 --> 00:15:14.805
<00:15:12.785>and <00:15:12.959>it <00:15:13.135>is <00:15:13.310>a <00:15:13.485>huge <00:15:13.660>problem <00:15:13.834>of <00:15:14.010>EY <00:15:14.185>libraries.

346
00:15:14.805 --> 00:15:15.805
<00:15:14.805>They <00:15:15.104>are <00:15:15.405>not <00:15:15.704>universal.

347
00:15:16.145 --> 00:15:18.405
<00:15:16.145>And <00:15:16.300>I <00:15:16.456>think <00:15:16.611>again, <00:15:16.767>like <00:15:16.922>you <00:15:17.078>raise <00:15:17.233>hands, <00:15:17.389>you <00:15:17.545>know,

348
00:15:18.705 --> 00:15:20.125
<00:15:18.705>but <00:15:18.918>I <00:15:19.131>think <00:15:19.344>the <00:15:19.557>real <00:15:19.770>issue <00:15:19.983>is

349
00:15:20.125 --> 00:15:22.925
<00:15:20.125>that <00:15:20.325>they <00:15:20.525>don't <00:15:20.725>necessarily <00:15:20.925>deliver <00:15:21.125>the <00:15:21.325>main <00:15:21.525>promise

350
00:15:23.035 --> 00:15:25.325
<00:15:23.035>because <00:15:23.235>do <00:15:23.435>they <00:15:23.635>really <00:15:23.834>make <00:15:24.035>us <00:15:24.235>more <00:15:24.435>productive?

351
00:15:26.305 --> 00:15:29.965
<00:15:26.305>Uh, <00:15:26.460>productivity? <00:15:26.616>I <00:15:26.771>know <00:15:26.927>it <00:15:27.082>is <00:15:27.238>a <00:15:27.393>very <00:15:27.549>subjective <00:15:27.704>topic.

352
00:15:30.055 --> 00:15:31.405
<00:15:30.055>There <00:15:30.298>are <00:15:30.540>people <00:15:30.784>who <00:15:31.026>are <00:15:31.270>productive

353
00:15:31.405 --> 00:15:32.605
<00:15:31.405>while <00:15:31.675>sitting <00:15:31.944>in <00:15:32.215>the <00:15:32.485>basement.

354
00:15:32.605 --> 00:15:34.645
<00:15:32.605>There <00:15:32.805>are <00:15:33.005>people <00:15:33.205>who <00:15:33.405>are <00:15:33.605>productive <00:15:33.805>when, <00:15:34.005>uh,

355
00:15:35.045 --> 00:15:37.485
<00:15:35.045>standing <00:15:35.219>at <00:15:35.395>a <00:15:35.569>techno <00:15:35.745>party <00:15:35.920>like <00:15:36.094>Daniel <00:15:36.270>Rowe <00:15:36.444>yesterday,

356
00:15:38.085 --> 00:15:40.685
<00:15:38.085>I <00:15:38.318>was <00:15:38.551>literally <00:15:38.785>standing <00:15:39.018>yesterday <00:15:39.251>at <00:15:39.485>the

357
00:15:40.685 --> 00:15:42.285
<00:15:40.685>after <00:15:40.918>party <00:15:41.151>I <00:15:41.385>came <00:15:41.618>to <00:15:41.851>Daniel <00:15:42.084>Rowe.

358
00:15:42.545 --> 00:15:44.285
<00:15:42.545>Uh, <00:15:42.824>he <00:15:43.104>was <00:15:43.385>holding <00:15:43.665>his <00:15:43.944>phone

359
00:15:44.625 --> 00:15:47.965
<00:15:44.625>and <00:15:44.780>we <00:15:44.936>were <00:15:45.091>genuine <00:15:45.247>smile <00:15:45.402>on <00:15:45.558>his, <00:15:45.713>his <00:15:45.869>face <00:15:46.025>face.

360
00:15:48.025 --> 00:15:49.845
<00:15:48.025>He <00:15:48.258>said, <00:15:48.491>oh, <00:15:48.725>I <00:15:48.958>fixed <00:15:49.191>the <00:15:49.425>back.

361
00:15:51.525 --> 00:15:54.065
<00:15:51.525>So, <00:15:51.699>you <00:15:51.875>know, <00:15:52.050>people <00:15:52.225>are <00:15:52.400>productive <00:15:52.574>in <00:15:52.750>different, <00:15:52.925>uh,

362
00:15:54.725 --> 00:15:55.825
<00:15:54.725>in <00:15:55.220>different <00:15:55.715>environments,

363
00:15:55.925 --> 00:15:58.625
<00:15:55.925>but <00:15:56.125>there <00:15:56.324>are <00:15:56.525>some <00:15:56.724>universal <00:15:56.925>truths <00:15:57.125>about <00:15:57.324>productivity.

364
00:15:58.685 --> 00:16:00.865
<00:15:58.685>And <00:15:58.859>there's <00:15:59.035>a <00:15:59.209>great, <00:15:59.385>great <00:15:59.560>study <00:15:59.734>from <00:15:59.910>Microsoft <00:16:00.084>research

365
00:16:00.865 --> 00:16:03.505
<00:16:00.865>about <00:16:01.145>developer <00:16:01.425>experience <00:16:01.705>impact <00:16:01.985>on <00:16:02.265>productivity.

366
00:16:04.205 --> 00:16:07.305
<00:16:04.205>So <00:16:04.405>it's <00:16:04.605>really <00:16:04.805>an <00:16:05.005>amazing <00:16:05.205>eye <00:16:05.405>eye-opening <00:16:05.605>study.

367
00:16:07.845 --> 00:16:11.705
<00:16:07.845>So <00:16:07.985>if <00:16:08.125>you <00:16:08.265>would <00:16:08.405>like <00:16:08.545>to <00:16:08.685>make <00:16:08.825>a <00:16:08.965>screenshot, <00:16:09.105>do <00:16:09.245>this.

368
00:16:12.225 --> 00:16:13.705
<00:16:12.225>I <00:16:12.415>will <00:16:12.605>wait <00:16:12.795>like <00:16:12.986>five <00:16:13.176>seconds <00:16:13.366>for <00:16:13.557>that.

369
00:16:14.285 --> 00:16:17.905
<00:16:14.285>Uh, <00:16:14.485>really <00:16:14.685>this <00:16:14.885>is <00:16:15.084>really, <00:16:15.285>really <00:16:15.485>good <00:16:15.685>study.

370
00:16:18.965 --> 00:16:21.945
<00:16:18.965>So <00:16:19.120>according <00:16:19.276>to <00:16:19.431>the <00:16:19.587>study, <00:16:19.742>there <00:16:19.898>are <00:16:20.053>three <00:16:20.209>core <00:16:20.365>dimensions

371
00:16:21.945 --> 00:16:23.945
<00:16:21.945>of <00:16:22.295>developer <00:16:22.645>experience <00:16:22.995>influencing <00:16:23.345>productivity.

372
00:16:24.405 --> 00:16:27.865
<00:16:24.405>One <00:16:24.545>of <00:16:24.685>them <00:16:24.824>is <00:16:24.964>a <00:16:25.105>flow <00:16:25.245>state, <00:16:25.385>which <00:16:25.525>means, <00:16:25.665>uh, <00:16:25.805>basically

373
00:16:27.965 --> 00:16:29.305
<00:16:27.965>how <00:16:28.166>long <00:16:28.367>we <00:16:28.568>can <00:16:28.769>work <00:16:28.970>on <00:16:29.170>things

374
00:16:29.305 --> 00:16:30.665
<00:16:29.305>without <00:16:29.611>needing <00:16:29.916>to <00:16:30.223>change <00:16:30.529>context.

375
00:16:31.205 --> 00:16:33.505
<00:16:31.205>And <00:16:31.360>then <00:16:31.516>come <00:16:31.671>back <00:16:31.827>to <00:16:31.982>this, <00:16:32.138>there <00:16:32.293>is <00:16:32.449>cognitive <00:16:32.605>flow,

376
00:16:33.505 --> 00:16:35.025
<00:16:33.505>which <00:16:33.778>means <00:16:34.052>how <00:16:34.325>many <00:16:34.599>contexts <00:16:34.872>actually

377
00:16:35.025 --> 00:16:36.105
<00:16:35.025>we <00:16:35.219>consume <00:16:35.413>at <00:16:35.608>the <00:16:35.802>same <00:16:35.997>time.

378
00:16:36.565 --> 00:16:38.305
<00:16:36.565>Uh, <00:16:36.798>and <00:16:37.031>what <00:16:37.265>is <00:16:37.498>the <00:16:37.731>overall <00:16:37.965>complexity

379
00:16:38.305 --> 00:16:39.545
<00:16:38.305>of <00:16:38.528>the <00:16:38.751>text <00:16:38.974>and <00:16:39.197>feedback <00:16:39.420>loops?

380
00:16:39.705 --> 00:16:41.225
<00:16:39.705>Feedback <00:16:40.047>loops <00:16:40.389>basically <00:16:40.731>mean <00:16:41.073>that

381
00:16:41.325 --> 00:16:42.985
<00:16:41.325>how <00:16:41.500>long <00:16:41.675>we <00:16:41.850>have <00:16:42.025>to <00:16:42.200>wait <00:16:42.375>for <00:16:42.550>the <00:16:42.725>feedback.

382
00:16:42.985 --> 00:16:45.745
<00:16:42.985>We <00:16:43.140>usually <00:16:43.296>don't <00:16:43.451>have <00:16:43.607>control <00:16:43.762>over <00:16:43.918>this <00:16:44.073>in <00:16:44.229>UI <00:16:44.385>libraries.

383
00:16:46.245 --> 00:16:48.625
<00:16:46.245>So <00:16:46.445>we <00:16:46.645>are <00:16:46.845>focusing <00:16:47.045>on <00:16:47.245>those <00:16:47.445>two <00:16:47.645>aspects.

384
00:16:48.655 --> 00:16:49.985
<00:16:48.655>Flow <00:16:48.954>state <00:16:49.253>and <00:16:49.552>cognitive <00:16:49.852>float.

385
00:16:50.435 --> 00:16:54.905
<00:16:50.435>Going <00:16:50.574>a <00:16:50.714>little <00:16:50.854>bit <00:16:50.994>deeper, <00:16:51.135>we <00:16:51.275>could <00:16:51.415>also, <00:16:51.555>uh, <00:16:51.694>frame <00:16:51.834>some

386
00:16:55.465 --> 00:16:59.205
<00:16:55.465>characteristics <00:16:55.620>of <00:16:55.776>each, <00:16:55.931>uh, <00:16:56.087>or <00:16:56.242>even <00:16:56.398>metrics <00:16:56.553>at <00:16:56.709>some <00:16:56.865>point.

387
00:17:01.105 --> 00:17:03.005
<00:17:01.105>Now <00:17:01.305>let's <00:17:01.505>come <00:17:01.705>back <00:17:01.905>to <00:17:02.105>the <00:17:02.305>original <00:17:02.505>question.

388
00:17:03.975 --> 00:17:07.725
<00:17:03.975>Armed <00:17:04.150>with <00:17:04.325>this <00:17:04.500>knowledge <00:17:04.675>why <00:17:04.849>we <00:17:05.025>use <00:17:05.200>component <00:17:05.375>libraries.

389
00:17:08.885 --> 00:17:11.545
<00:17:08.885>So <00:17:09.060>we <00:17:09.234>assume <00:17:09.410>that <00:17:09.585>they <00:17:09.760>will <00:17:09.935>accelerate <00:17:10.109>our <00:17:10.285>work,

390
00:17:11.565 --> 00:17:13.185
<00:17:11.565>but <00:17:11.765>at <00:17:11.965>least <00:17:12.165>from <00:17:12.365>the <00:17:12.565>examples <00:17:12.765>that <00:17:12.965>I

391
00:17:13.385 --> 00:17:16.305
<00:17:13.385>provided, <00:17:13.540>it <00:17:13.696>doesn't <00:17:13.851>appear <00:17:14.007>to <00:17:14.162>do <00:17:14.318>this <00:17:14.473>rather <00:17:14.629>the <00:17:14.785>opposite.

392
00:17:16.365 --> 00:17:20.145
<00:17:16.365>So <00:17:16.505>after <00:17:16.645>a <00:17:16.785>very <00:17:16.925>short <00:17:17.065>time <00:17:17.204>acceleration, <00:17:17.345>we <00:17:17.484>are <00:17:17.625>ending <00:17:17.765>up

393
00:17:20.145 --> 00:17:22.985
<00:17:20.145>with <00:17:20.319>10 <00:17:20.494>open <00:17:20.670>tabs <00:17:20.845>trying <00:17:21.020>to <00:17:21.194>understand <00:17:21.369>how, <00:17:21.545>how

394
00:17:22.985 --> 00:17:24.105
<00:17:22.984>to <00:17:23.320>customize <00:17:23.656>one <00:17:23.992>button

395
00:17:24.485 --> 00:17:25.745
<00:17:24.484>and <00:17:24.674>then <00:17:24.862>learning <00:17:25.051>that <00:17:25.241>there <00:17:25.429>are <00:17:25.618>10

396
00:17:25.745 --> 00:17:26.945
<00:17:25.744>ways <00:17:26.014>to <00:17:26.284>customize <00:17:26.554>the <00:17:26.824>button.

397
00:17:27.445 --> 00:17:29.585
<00:17:27.444>And <00:17:27.724>actually <00:17:28.004>there <00:17:28.284>are <00:17:28.564>40 <00:17:28.845>classes

398
00:17:29.725 --> 00:17:31.345
<00:17:29.725>and <00:17:30.004>they're <00:17:30.284>conditioning <00:17:30.564>applied <00:17:30.844>based <00:17:31.125>on

399
00:17:31.345 --> 00:17:32.545
<00:17:31.345>properties <00:17:31.561>that <00:17:31.777>we <00:17:31.993>have <00:17:32.209>to <00:17:32.425>learn.

400
00:17:32.565 --> 00:17:34.465
<00:17:32.565>But <00:17:32.705>maybe <00:17:32.845>they <00:17:32.985>work <00:17:33.125>a <00:17:33.265>little <00:17:33.405>bit <00:17:33.545>different <00:17:33.685>if <00:17:33.825>you're <00:17:33.965>using

401
00:17:34.465 --> 00:17:36.625
<00:17:34.465>this <00:17:34.745>third <00:17:35.024>way <00:17:35.304>of <00:17:35.584>customizing <00:17:35.865>it.

402
00:17:37.215 --> 00:17:39.545
<00:17:37.215>It's <00:17:37.564>crazy. <00:17:37.915>It <00:17:38.264>is <00:17:38.615>counterproductive.

403
00:17:39.925 --> 00:17:42.425
<00:17:39.925>And <00:17:40.041>even <00:17:40.158>if <00:17:40.274>we <00:17:40.391>learn <00:17:40.508>of <00:17:40.625>those <00:17:40.741>concepts, <00:17:40.858>we <00:17:40.975>still <00:17:41.091>have <00:17:41.208>a <00:17:41.325>lot

404
00:17:42.425 --> 00:17:44.665
<00:17:42.425>of <00:17:42.705>artificial <00:17:42.985>abstractions <00:17:43.264>that <00:17:43.544>we <00:17:43.825>have

405
00:17:44.725 --> 00:17:46.225
<00:17:44.725>to <00:17:44.949>constantly <00:17:45.175>look <00:17:45.399>up <00:17:45.625>in <00:17:45.850>the <00:17:46.074>dock.

406
00:17:47.005 --> 00:17:50.245
<00:17:47.005>So <00:17:47.160>a <00:17:47.316>natural <00:17:47.471>question <00:17:47.627>that <00:17:47.782>comes <00:17:47.938>to <00:17:48.093>mind <00:17:48.249>is <00:17:48.405>why,

407
00:17:50.825 --> 00:17:52.285
<00:17:50.825>why <00:17:51.087>those <00:17:51.350>things <00:17:51.613>are <00:17:51.876>so <00:17:52.139>complicated,

408
00:17:52.345 --> 00:17:53.405
<00:17:52.345>why, <00:17:52.583>why <00:17:52.822>they're <00:17:53.060>not <00:17:53.299>simple.

409
00:17:54.225 --> 00:17:56.445
<00:17:54.225>And <00:17:54.574>I <00:17:54.925>think <00:17:55.274>it's <00:17:55.625>really,

410
00:17:59.045 --> 00:18:00.345
<00:17:59.045>It <00:17:59.279>really <00:17:59.513>comes <00:17:59.747>from <00:17:59.981>one <00:18:00.215>assumption.

411
00:18:00.765 --> 00:18:03.065
<00:18:00.765>And <00:18:00.892>I <00:18:01.019>think <00:18:01.146>this <00:18:01.274>assumption <00:18:01.401>is <00:18:01.528>really <00:18:01.655>a <00:18:01.783>root <00:18:01.910>of <00:18:02.037>all <00:18:02.165>evil,

412
00:18:03.605 --> 00:18:05.825
<00:18:03.605>uh, <00:18:03.838>because <00:18:04.071>this <00:18:04.305>is <00:18:04.538>a <00:18:04.771>natural <00:18:05.005>consequence

413
00:18:05.885 --> 00:18:08.425
<00:18:05.885>of <00:18:06.040>this <00:18:06.196>other <00:18:06.351>assumption <00:18:06.507>that <00:18:06.662>components <00:18:06.818>need <00:18:06.973>to <00:18:07.129>be <00:18:07.285>shipped

414
00:18:08.565 --> 00:18:10.625
<00:18:08.565>as <00:18:08.798>packaged <00:18:09.031>and <00:18:09.265>should <00:18:09.498>be <00:18:09.731>up <00:18:09.965>upgradeable.

415
00:18:11.325 --> 00:18:13.825
<00:18:11.325>So <00:18:11.480>if <00:18:11.636>you're <00:18:11.791>removing, <00:18:11.947>you <00:18:12.102>know, <00:18:12.258>if <00:18:12.413>the <00:18:12.569>goal <00:18:12.725>is

416
00:18:13.825 --> 00:18:16.705
<00:18:13.825>to <00:18:14.058>like <00:18:14.291>primarily <00:18:14.525>provide <00:18:14.758>UI <00:18:14.991>development <00:18:15.225>acceleration,

417
00:18:17.325 --> 00:18:20.225
<00:18:17.325>why <00:18:17.480>those <00:18:17.636>components <00:18:17.791>should <00:18:17.947>be <00:18:18.102>upgradable, <00:18:18.258>what <00:18:18.413>is <00:18:18.569>the <00:18:18.725>value

418
00:18:20.225 --> 00:18:22.065
<00:18:20.225>to <00:18:20.458>the <00:18:20.691>user <00:18:20.925>of <00:18:21.158>having <00:18:21.391>upgradable <00:18:21.625>components?

419
00:18:23.005 --> 00:18:24.905
<00:18:23.005>And <00:18:23.145>I <00:18:23.285>think <00:18:23.425>really <00:18:23.565>this <00:18:23.705>is <00:18:23.845>the <00:18:23.985>root <00:18:24.125>of <00:18:24.265>all <00:18:24.405>problems.

420
00:18:24.905 --> 00:18:27.345
<00:18:24.905>And <00:18:25.185>then <00:18:25.465>over <00:18:25.745>complication, <00:18:26.024>bad <00:18:26.305>decision

421
00:18:27.345 --> 00:18:30.585
<00:18:27.345>because <00:18:27.625>in <00:18:27.905>a <00:18:28.185>UI <00:18:28.465>component, <00:18:28.745>everything

422
00:18:31.125 --> 00:18:32.385
<00:18:31.125>is <00:18:31.503>your <00:18:31.881>public <00:18:32.259>API.

423
00:18:32.605 --> 00:18:36.705
<00:18:32.605>So <00:18:32.760>c, <00:18:32.916>s, <00:18:33.071>s <00:18:33.227>properties, <00:18:33.382>syntax, <00:18:33.538>interactive <00:18:33.693>behavior, <00:18:33.849>all <00:18:34.005>of

424
00:18:36.705 --> 00:18:40.785
<00:18:36.705>that <00:18:36.905>is <00:18:37.105>usually <00:18:37.304>very <00:18:37.504>heavily <00:18:37.705>customized <00:18:37.905>And <00:18:38.105>components.

425
00:18:40.785 --> 00:18:42.105
<00:18:40.785>There <00:18:41.022>are <00:18:41.260>not <00:18:41.497>a <00:18:41.735>graphical <00:18:41.973>client.

426
00:18:42.605 --> 00:18:44.305
<00:18:42.605>You <00:18:42.838>can't <00:18:43.071>cover <00:18:43.305>all <00:18:43.538>the <00:18:43.771>use <00:18:44.005>cases

427
00:18:44.375 --> 00:18:46.345
<00:18:44.375>with <00:18:44.655>like <00:18:44.935>a <00:18:45.215>single <00:18:45.495>configuration <00:18:45.775>object

428
00:18:46.365 --> 00:18:48.105
<00:18:46.365>or <00:18:46.598>with <00:18:46.831>like <00:18:47.065>a <00:18:47.298>few <00:18:47.531>extension <00:18:47.765>points.

429
00:18:48.405 --> 00:18:50.865
<00:18:48.405>What's <00:18:48.560>even <00:18:48.716>worse <00:18:48.871>is <00:18:49.027>that <00:18:49.182>all <00:18:49.338>of <00:18:49.493>those <00:18:49.649>extension <00:18:49.805>points

430
00:18:51.185 --> 00:18:52.345
<00:18:51.185>provided <00:18:51.533>by <00:18:51.881>UI <00:18:52.229>libraries,

431
00:18:52.345 --> 00:18:54.705
<00:18:52.345>they <00:18:52.578>don't <00:18:52.811>really <00:18:53.045>provide <00:18:53.278>enough <00:18:53.511>abstraction <00:18:53.745>over

432
00:18:54.705 --> 00:18:55.745
<00:18:54.705>implementation <00:18:55.640>details.

433
00:18:55.805 --> 00:18:57.985
<00:18:55.805>And, <00:18:55.980>and <00:18:56.155>if <00:18:56.330>there <00:18:56.505>would <00:18:56.680>be <00:18:56.855>any <00:18:57.030>good <00:18:57.205>reason

434
00:18:58.005 --> 00:18:59.305
<00:18:58.005>for <00:18:58.590>implementing <00:18:59.175>abstraction,

435
00:18:59.935 --> 00:19:02.625
<00:18:59.935>this <00:19:00.168>reason <00:19:00.401>is <00:19:00.635>exactly <00:19:00.868>hiding <00:19:01.101>implementation <00:19:01.335>details.

436
00:19:03.405 --> 00:19:05.505
<00:19:03.405>Uh, <00:19:03.685>so <00:19:03.965>it's <00:19:04.245>easier <00:19:04.524>to <00:19:04.805>upgrade.

437
00:19:05.925 --> 00:19:10.665
<00:19:05.925>But <00:19:06.052>for <00:19:06.179>a <00:19:06.306>component, <00:19:06.434>well <00:19:06.561>its <00:19:06.688>API <00:19:06.815>is <00:19:06.943>one <00:19:07.070>to <00:19:07.197>one <00:19:07.325>reflection

438
00:19:10.665 --> 00:19:12.065
<00:19:10.665>of <00:19:11.085>its <00:19:11.505>implementation <00:19:11.925>details.

439
00:19:12.125 --> 00:19:13.585
<00:19:12.125>So <00:19:12.387>we <00:19:12.650>are <00:19:12.913>beating <00:19:13.176>this <00:19:13.439>abstraction,

440
00:19:13.725 --> 00:19:16.345
<00:19:13.725>but <00:19:13.899>really <00:19:14.074>there <00:19:14.250>is <00:19:14.425>no <00:19:14.600>game, <00:19:14.774>if <00:19:14.949>anything <00:19:15.125>changes.

441
00:19:16.565 --> 00:19:18.425
<00:19:16.565>If <00:19:16.740>if <00:19:16.915>they're <00:19:17.090>changing <00:19:17.265>a <00:19:17.440>single <00:19:17.615>line <00:19:17.790>the <00:19:17.965>market,

442
00:19:18.425 --> 00:19:20.225
<00:19:18.425>they're <00:19:18.774>changing <00:19:19.125>single <00:19:19.475>line <00:19:19.825>CSS.

443
00:19:20.275 --> 00:19:21.305
<00:19:20.275>Everything <00:19:20.738>could <00:19:21.202>break.

444
00:19:22.525 --> 00:19:24.745
<00:19:22.525>And <00:19:22.805>it's <00:19:23.085>not <00:19:23.365>hard <00:19:23.645>to <00:19:23.925>imagine

445
00:19:24.815 --> 00:19:26.425
<00:19:24.815>what <00:19:25.015>would <00:19:25.215>happen <00:19:25.415>if <00:19:25.615>you <00:19:25.815>update <00:19:26.015>the <00:19:26.215>library.

446
00:19:26.525 --> 00:19:27.985
<00:19:26.525>And <00:19:26.712>it <00:19:26.900>happened <00:19:27.088>to <00:19:27.275>me <00:19:27.463>millions <00:19:27.651>of <00:19:27.839>times.

447
00:19:28.015 --> 00:19:30.265
<00:19:28.015>Like, <00:19:28.190>how <00:19:28.365>many <00:19:28.540>of <00:19:28.715>you <00:19:28.890>ever <00:19:29.065>updated <00:19:29.240>UI <00:19:29.415>library

448
00:19:33.405 --> 00:19:36.785
<00:19:33.405>for <00:19:33.580>how <00:19:33.754>many <00:19:33.930>of <00:19:34.105>you <00:19:34.280>the <00:19:34.455>application <00:19:34.629>basically <00:19:34.805>broke?

449
00:19:39.395 --> 00:19:40.445
<00:19:39.395>This <00:19:39.867>is <00:19:40.340>surprising.

450
00:19:40.595 --> 00:19:43.765
<00:19:40.595>More <00:19:40.750>of <00:19:40.906>you <00:19:41.061>raise <00:19:41.217>hands <00:19:41.372>for <00:19:41.528>the <00:19:41.683>second <00:19:41.839>question <00:19:41.995>than

451
00:19:43.765 --> 00:19:45.605
<00:19:43.765>for <00:19:44.115>the <00:19:44.465>first <00:19:44.815>one <00:19:45.165>anyway.

452
00:19:45.945 --> 00:19:49.045
<00:19:45.945>Uh, <00:19:46.178>because <00:19:46.411>implementation <00:19:46.645>details <00:19:46.878>are <00:19:47.111>hidden, <00:19:47.345>we,

453
00:19:49.145 --> 00:19:51.525
<00:19:49.145>we <00:19:49.272>can <00:19:49.399>often <00:19:49.526>end <00:19:49.654>up <00:19:49.781>in <00:19:49.908>a <00:19:50.035>situation <00:19:50.163>when <00:19:50.290>the <00:19:50.417>only <00:19:50.545>way

454
00:19:51.525 --> 00:19:54.485
<00:19:51.525>to <00:19:51.665>get <00:19:51.805>something <00:19:51.945>fixed <00:19:52.085>when <00:19:52.225>there <00:19:52.365>is <00:19:52.505>a <00:19:52.645>bug <00:19:52.785>is <00:19:52.925>actually

455
00:19:54.805 --> 00:19:57.045
<00:19:54.805>updating <00:19:54.960>the <00:19:55.116>library <00:19:55.271>waiting <00:19:55.427>for <00:19:55.582>the <00:19:55.738>out <00:19:55.893>to <00:19:56.049>fix <00:19:56.205>it.

456
00:19:58.345 --> 00:20:01.285
<00:19:58.345>And <00:19:58.500>you <00:19:58.656>know, <00:19:58.811>literally <00:19:58.967>any <00:19:59.122>change <00:19:59.278>coming <00:19:59.433>from <00:19:59.589>the <00:19:59.745>version

457
00:20:01.355 --> 00:20:03.125
<00:20:01.355>bomb <00:20:01.588>can <00:20:01.821>really <00:20:02.055>be <00:20:02.288>a <00:20:02.521>breaking <00:20:02.755>change

458
00:20:03.125 --> 00:20:04.565
<00:20:03.125>and <00:20:03.384>they <00:20:03.643>could <00:20:03.902>break <00:20:04.161>our <00:20:04.421>ui

459
00:20:05.345 --> 00:20:07.845
<00:20:05.345>and <00:20:05.545>without <00:20:05.745>extensive <00:20:05.945>visual <00:20:06.145>testing, <00:20:06.345>it's <00:20:06.545>really <00:20:06.745>hard

460
00:20:07.845 --> 00:20:09.485
<00:20:07.845>to <00:20:08.125>even <00:20:08.405>tell <00:20:08.685>where <00:20:08.965>it <00:20:09.245>broke.

461
00:20:09.825 --> 00:20:11.525
<00:20:09.825>It <00:20:09.980>could <00:20:10.136>be <00:20:10.291>just, <00:20:10.447>you <00:20:10.602>know, <00:20:10.758>a <00:20:10.913>two <00:20:11.069>pixel <00:20:11.225>border

462
00:20:11.555 --> 00:20:14.085
<00:20:11.555>that <00:20:11.695>will <00:20:11.835>shift <00:20:11.975>all <00:20:12.115>the <00:20:12.255>elements <00:20:12.395>and, <00:20:12.535>and <00:20:12.675>break <00:20:12.815>the <00:20:12.955>page.

463
00:20:14.585 --> 00:20:16.605
<00:20:14.585>You <00:20:14.740>can <00:20:14.896>never <00:20:15.051>be <00:20:15.207>sure <00:20:15.362>if <00:20:15.518>something <00:20:15.673>broke <00:20:15.829>or <00:20:15.985>not.

464
00:20:16.665 --> 00:20:20.565
<00:20:16.665>So <00:20:16.781>we <00:20:16.898>can <00:20:17.014>either <00:20:17.131>update <00:20:17.248>a <00:20:17.365>version <00:20:17.481>and <00:20:17.598>break <00:20:17.715>half <00:20:17.831>of <00:20:17.948>our <00:20:18.065>ui.

465
00:20:20.625 --> 00:20:23.925
<00:20:20.625>And <00:20:20.765>this <00:20:20.905>happened <00:20:21.045>to <00:20:21.185>me <00:20:21.325>more <00:20:21.465>times <00:20:21.605>that <00:20:21.745>I <00:20:21.885>would <00:20:22.025>like

466
00:20:23.925 --> 00:20:25.965
<00:20:23.925>to <00:20:24.080>admit <00:20:24.236>or <00:20:24.391>we <00:20:24.547>have <00:20:24.702>to <00:20:24.858>find <00:20:25.013>our <00:20:25.169>own <00:20:25.325>way

467
00:20:25.965 --> 00:20:28.685
<00:20:25.965>of <00:20:26.139>fixing <00:20:26.314>this <00:20:26.490>component <00:20:26.665>by <00:20:26.840>doing <00:20:27.014>some <00:20:27.189>nasty <00:20:27.365>workarounds.

468
00:20:29.305 --> 00:20:32.205
<00:20:29.305>So, <00:20:29.460>okay, <00:20:29.616>so <00:20:29.771>far <00:20:29.927>I <00:20:30.082>only <00:20:30.238>talk <00:20:30.393>about <00:20:30.549>the <00:20:30.705>problems.

469
00:20:32.865 --> 00:20:34.645
<00:20:32.865>Uh, <00:20:33.040>so <00:20:33.215>maybe <00:20:33.390>it's <00:20:33.565>time <00:20:33.740>to <00:20:33.915>talk <00:20:34.090>about <00:20:34.265>the

470
00:20:34.645 --> 00:20:35.765
<00:20:34.645>solutions <00:20:34.981>to <00:20:35.317>those <00:20:35.653>problems.

471
00:20:36.585 --> 00:20:39.715
<00:20:36.585>And <00:20:36.865>we <00:20:37.145>ask <00:20:37.425>ourselves <00:20:37.705>a <00:20:37.985>question

472
00:20:40.745 --> 00:20:43.915
<00:20:40.745>when <00:20:40.978>we <00:20:41.211>feel <00:20:41.445>the <00:20:41.678>library <00:20:41.911>provides <00:20:42.145>value.

473
00:20:44.335 --> 00:20:47.565
<00:20:44.335>And <00:20:44.462>there <00:20:44.589>is <00:20:44.716>a <00:20:44.844>term <00:20:44.971>in <00:20:45.098>the <00:20:45.225>product <00:20:45.353>world <00:20:45.480>called <00:20:45.607>aha <00:20:45.735>moment.

474
00:20:48.185 --> 00:20:50.565
<00:20:48.185>The <00:20:48.385>aha <00:20:48.585>moment <00:20:48.784>is <00:20:48.985>used <00:20:49.185>by <00:20:49.385>product <00:20:49.585>people

475
00:20:50.665 --> 00:20:53.325
<00:20:50.665>and <00:20:50.865>describes <00:20:51.065>the <00:20:51.264>very <00:20:51.465>first <00:20:51.665>moment <00:20:51.865>when <00:20:52.065>user

476
00:20:53.475 --> 00:20:55.085
<00:20:53.475>realize <00:20:53.754>the <00:20:54.034>value <00:20:54.314>of <00:20:54.594>your <00:20:54.875>product.

477
00:20:55.545 --> 00:20:58.605
<00:20:55.545>So <00:20:55.700>you're <00:20:55.856>looking <00:20:56.011>at <00:20:56.167>something <00:20:56.322>and <00:20:56.478>you <00:20:56.633>have <00:20:56.789>this <00:20:56.945>aha.

478
00:20:58.705 --> 00:21:00.125
<00:20:58.705>So <00:20:58.887>this <00:20:59.070>is <00:20:59.252>what <00:20:59.435>it <00:20:59.617>is <00:20:59.800>helping <00:20:59.983>with.

479
00:21:00.125 --> 00:21:01.485
<00:21:00.125>Like, <00:21:00.369>okay, <00:21:00.614>I, <00:21:00.859>I <00:21:01.104>feel <00:21:01.349>it.

480
00:21:02.585 --> 00:21:05.805
<00:21:02.585>So <00:21:02.712>we <00:21:02.839>wanted <00:21:02.966>to <00:21:03.094>build <00:21:03.221>our <00:21:03.348>new <00:21:03.475>library, <00:21:03.603>so <00:21:03.730>the <00:21:03.857>new <00:21:03.985>version

481
00:21:05.805 --> 00:21:07.925
<00:21:05.805>of <00:21:06.038>storefront <00:21:06.271>ey <00:21:06.505>around <00:21:06.738>this <00:21:06.971>very <00:21:07.205>filling

482
00:21:08.265 --> 00:21:10.525
<00:21:08.265>and <00:21:08.440>really <00:21:08.615>cut, <00:21:08.790>cut <00:21:08.965>the <00:21:09.140>rest, <00:21:09.315>cut <00:21:09.490>the <00:21:09.665>noise.

483
00:21:11.025 --> 00:21:13.125
<00:21:11.025>So <00:21:11.200>we <00:21:11.375>ask <00:21:11.550>it <00:21:11.725>ourselves <00:21:11.900>a <00:21:12.075>question <00:21:12.250>like <00:21:12.425>what,

484
00:21:13.195 --> 00:21:16.795
<00:21:13.195>when <00:21:13.370>we <00:21:13.544>feel <00:21:13.720>most <00:21:13.895>powerful, <00:21:14.070>what <00:21:14.245>do <00:21:14.419>we <00:21:14.595>feel

485
00:21:17.065 --> 00:21:19.635
<00:21:17.065>that <00:21:17.240>the <00:21:17.415>library <00:21:17.590>is <00:21:17.765>really <00:21:17.940>pushing <00:21:18.115>our <00:21:18.290>work <00:21:18.465>forward?

486
00:21:20.775 --> 00:21:22.795
<00:21:20.775>And <00:21:20.950>the <00:21:21.125>answer <00:21:21.300>to <00:21:21.475>that <00:21:21.650>question <00:21:21.825>is <00:21:22.000>quite <00:21:22.175>simple.

487
00:21:23.215 --> 00:21:24.915
<00:21:23.215>We <00:21:23.448>do <00:21:23.681>this <00:21:23.915>when <00:21:24.148>we <00:21:24.381>first <00:21:24.615>import

488
00:21:25.555 --> 00:21:27.835
<00:21:25.555>a <00:21:25.755>working <00:21:25.955>component <00:21:26.155>into <00:21:26.355>our <00:21:26.555>code <00:21:26.755>base, <00:21:26.955>right?

489
00:21:29.555 --> 00:21:31.635
<00:21:29.555>A <00:21:29.788>component <00:21:30.021>that <00:21:30.255>is <00:21:30.488>already <00:21:30.721>semantically, <00:21:30.955>correct.

490
00:21:31.865 --> 00:21:33.275
<00:21:31.865>This <00:21:32.118>is <00:21:32.372>rare <00:21:32.626>in <00:21:32.880>those <00:21:33.134>times,

491
00:21:33.345 --> 00:21:36.995
<00:21:33.345>even <00:21:33.500>in <00:21:33.656>tele <00:21:33.811>ui <00:21:33.967>you <00:21:34.122>have <00:21:34.278>just <00:21:34.433>this <00:21:34.589>uh, <00:21:34.745>component

492
00:21:36.995 --> 00:21:39.275
<00:21:36.995>that <00:21:37.195>is <00:21:37.395>interactive, <00:21:37.594>it <00:21:37.794>works <00:21:37.995>in <00:21:38.195>every <00:21:38.395>browser.

493
00:21:39.345 --> 00:21:42.595
<00:21:39.345>This <00:21:39.500>is <00:21:39.656>even <00:21:39.811>more <00:21:39.967>rare <00:21:40.122>a <00:21:40.278>component <00:21:40.433>that <00:21:40.589>is <00:21:40.745>accessible.

494
00:21:42.595 --> 00:21:45.875
<00:21:42.595>This <00:21:42.750>almost <00:21:42.906>never <00:21:43.061>happens. <00:21:43.217>So <00:21:43.372>this <00:21:43.528>is <00:21:43.683>really <00:21:43.839>the <00:21:43.995>most

495
00:21:45.875 --> 00:21:48.075
<00:21:45.875>painful <00:21:46.225>part <00:21:46.575>of <00:21:46.925>UI <00:21:47.275>development.

496
00:21:48.075 --> 00:21:50.595
<00:21:48.075>Like <00:21:48.275>making <00:21:48.475>components <00:21:48.675>work <00:21:48.875>in <00:21:49.075>work <00:21:49.275>is <00:21:49.475>easy.

497
00:21:51.255 --> 00:21:53.195
<00:21:51.255>It <00:21:51.395>is <00:21:51.535>write <00:21:51.675>a <00:21:51.815>little <00:21:51.955>bit <00:21:52.095>of <00:21:52.235>code <00:21:52.375>and <00:21:52.515>it <00:21:52.655>works,

498
00:21:53.255 --> 00:21:55.835
<00:21:53.255>but <00:21:53.430>finding <00:21:53.605>all <00:21:53.780>the <00:21:53.955>corner <00:21:54.130>cases, <00:21:54.305>making <00:21:54.480>it <00:21:54.655>accessible,

499
00:21:56.225 --> 00:21:57.395
<00:21:56.225>this <00:21:56.400>is <00:21:56.576>hell <00:21:56.751>a <00:21:56.927>lot <00:21:57.102>of <00:21:57.278>work

500
00:21:57.415 --> 00:21:59.595
<00:21:57.415>and <00:21:57.648>it <00:21:57.881>really <00:21:58.115>requires <00:21:58.348>spec <00:21:58.581>special <00:21:58.815>expertise.

501
00:22:00.175 --> 00:22:01.875
<00:22:00.175>So <00:22:00.524>I <00:22:00.875>think <00:22:01.225>this <00:22:01.575>is

502
00:22:02.145 --> 00:22:03.955
<00:22:02.145>what <00:22:02.495>UI <00:22:02.845>libraries <00:22:03.195>should <00:22:03.545>really

503
00:22:03.965 --> 00:22:07.235
<00:22:03.965>accelerate <00:22:05.365>now.

504
00:22:08.055 --> 00:22:11.795
<00:22:08.055>Uh, <00:22:08.230>UI <00:22:08.405>acceleration <00:22:08.580>is <00:22:08.755>the <00:22:08.930>value <00:22:09.105>to <00:22:09.280>perceive <00:22:09.455>now

505
00:22:12.025 --> 00:22:14.155
<00:22:12.025>what <00:22:12.152>we <00:22:12.279>would <00:22:12.406>like <00:22:12.534>to <00:22:12.661>improve, <00:22:12.788>what <00:22:12.915>we <00:22:13.043>would <00:22:13.170>like <00:22:13.297>to <00:22:13.425>change.

506
00:22:14.185 --> 00:22:16.475
<00:22:14.185>When <00:22:14.325>we <00:22:14.465>are <00:22:14.605>starting <00:22:14.745>to <00:22:14.885>feel <00:22:15.024>frustration, <00:22:15.165>who <00:22:15.304>can <00:22:15.445>tell <00:22:15.585>me,

507
00:22:17.465 --> 00:22:20.915
<00:22:17.465>okay, <00:22:17.639>maybe <00:22:17.814>I <00:22:17.990>want <00:22:18.165>to <00:22:18.340>hear, <00:22:18.514>so <00:22:18.689>maybe <00:22:18.865>no.

508
00:22:21.415 --> 00:22:25.275
<00:22:21.415>Uh, <00:22:21.615>well <00:22:21.815>customizability, <00:22:22.014>right? <00:22:22.215>We <00:22:22.415>talk <00:22:22.615>about <00:22:22.815>this.

509
00:22:25.305 --> 00:22:27.555
<00:22:25.305>It's, <00:22:25.505>it's <00:22:25.705>always <00:22:25.905>different <00:22:26.105>from <00:22:26.305>what <00:22:26.505>we <00:22:26.705>know.

510
00:22:27.865 --> 00:22:29.155
<00:22:27.865>It's <00:22:28.445>always <00:22:29.026>artificial.

511
00:22:29.545 --> 00:22:32.915
<00:22:29.545>It's <00:22:29.745>almost <00:22:29.945>always <00:22:30.145>forcing <00:22:30.345>us <00:22:30.545>to <00:22:30.745>adjust <00:22:30.945>instead

512
00:22:32.915 --> 00:22:34.915
<00:22:32.915>of <00:22:33.115>providing <00:22:33.315>acceleration <00:22:33.514>where <00:22:33.715>we <00:22:33.915>needed <00:22:34.115>to <00:22:34.315>happen.

513
00:22:35.655 --> 00:22:37.795
<00:22:35.655>Uh, <00:22:35.888>so <00:22:36.121>we <00:22:36.355>had <00:22:36.588>this <00:22:36.821>idea, <00:22:37.055>why,

514
00:22:38.995 --> 00:22:40.615
<00:22:38.995>why <00:22:39.228>don't <00:22:39.461>we <00:22:39.695>just <00:22:39.928>copy <00:22:40.161>those <00:22:40.395>components?

515
00:22:41.835 --> 00:22:44.855
<00:22:41.835>If <00:22:42.035>if <00:22:42.235>artificial <00:22:42.435>extensibility <00:22:42.635>mahan <00:22:42.835>are <00:22:43.035>the <00:22:43.235>issue,

516
00:22:44.875 --> 00:22:46.855
<00:22:44.875>why <00:22:45.050>don't <00:22:45.225>we <00:22:45.400>just <00:22:45.575>get <00:22:45.750>rid <00:22:45.925>of <00:22:46.100>the <00:22:46.275>complexity

517
00:22:46.855 --> 00:22:49.535
<00:22:46.855>and <00:22:47.010>let <00:22:47.166>users <00:22:47.321>customize <00:22:47.477>components <00:22:47.632>as <00:22:47.788>much <00:22:47.943>as <00:22:48.099>they <00:22:48.255>want?

518
00:22:50.355 --> 00:22:53.335
<00:22:50.355>So <00:22:50.530>this <00:22:50.705>approach <00:22:50.880>is <00:22:51.055>not <00:22:51.230>only <00:22:51.405>not <00:22:51.580>introducing <00:22:51.755>additional

519
00:22:53.335 --> 00:22:56.015
<00:22:53.335>complexity, <00:22:53.510>which <00:22:53.685>I <00:22:53.860>think <00:22:54.035>is, <00:22:54.210>is <00:22:54.385>a <00:22:54.560>major <00:22:54.735>flow,

520
00:22:56.015 --> 00:22:59.735
<00:22:56.015>but <00:22:56.170>it's <00:22:56.326>also <00:22:56.481>literally <00:22:56.637>has <00:22:56.792>no <00:22:56.948>limitations <00:22:57.103>in <00:22:57.259>terms <00:22:57.415>of

521
00:22:59.755 --> 00:23:01.335
<00:22:59.755>how <00:23:00.035>you're <00:23:00.315>gonna <00:23:00.595>customize <00:23:00.875>your <00:23:01.155>components.

522
00:23:01.365 --> 00:23:04.015
<00:23:01.365>Like <00:23:01.598>what, <00:23:01.831>how <00:23:02.065>you're <00:23:02.298>gonna <00:23:02.531>change <00:23:02.765>them,

523
00:23:04.205 --> 00:23:06.535
<00:23:04.205>what <00:23:04.405>additional <00:23:04.605>capabilities <00:23:04.804>you're <00:23:05.004>gonna <00:23:05.205>add <00:23:05.405>to <00:23:05.605>them.

524
00:23:07.115 --> 00:23:08.935
<00:23:07.115>The <00:23:07.465>only <00:23:07.815>doubt <00:23:08.165>downside <00:23:08.515>is

525
00:23:08.935 --> 00:23:11.775
<00:23:08.935>that <00:23:09.090>we <00:23:09.246>can't <00:23:09.401>update <00:23:09.557>these <00:23:09.712>components, <00:23:09.868>but <00:23:10.023>as <00:23:10.179>I <00:23:10.335>mentioned

526
00:23:11.775 --> 00:23:13.055
<00:23:11.775>before, <00:23:12.063>I <00:23:12.351>really <00:23:12.639>think <00:23:12.927>components

527
00:23:13.055 --> 00:23:14.095
<00:23:13.055>should <00:23:13.289>not <00:23:13.523>be <00:23:13.757>up <00:23:13.991>upgradeable.

528
00:23:14.095 --> 00:23:17.855
<00:23:14.095>Like <00:23:14.295>really <00:23:14.495>there's <00:23:14.695>literally <00:23:14.895>no <00:23:15.095>value <00:23:15.295>in <00:23:15.495>that.

529
00:23:18.035 --> 00:23:20.015
<00:23:18.035>It <00:23:18.315>should <00:23:18.595>be <00:23:18.875>one <00:23:19.155>time <00:23:19.435>acceleration

530
00:23:20.035 --> 00:23:22.135
<00:23:20.035>and <00:23:20.235>from <00:23:20.435>there <00:23:20.635>you're <00:23:20.835>just <00:23:21.035>building <00:23:21.235>your <00:23:21.435>project.

531
00:23:22.955 --> 00:23:24.415
<00:23:22.955>And <00:23:23.174>this <00:23:23.393>is <00:23:23.611>not <00:23:23.831>the <00:23:24.050>new <00:23:24.269>approach.

532
00:23:24.525 --> 00:23:26.255
<00:23:24.525>It's <00:23:24.758>very <00:23:24.991>well <00:23:25.225>known <00:23:25.458>from <00:23:25.691>Tailwind <00:23:25.925>Toi

533
00:23:26.255 --> 00:23:28.655
<00:23:26.255>and <00:23:26.430>I <00:23:26.605>think <00:23:26.780>this <00:23:26.955>is <00:23:27.130>where <00:23:27.305>Tailwind <00:23:27.480>really <00:23:27.655>shines

534
00:23:28.845 --> 00:23:31.775
<00:23:28.845>because <00:23:29.045>the <00:23:29.245>way <00:23:29.445>how <00:23:29.645>tailwind <00:23:29.845>work, <00:23:30.045>the <00:23:30.245>way

535
00:23:31.955 --> 00:23:34.375
<00:23:31.955>how <00:23:32.188>you <00:23:32.421>write <00:23:32.655>tailwind <00:23:32.888>code <00:23:33.121>enables <00:23:33.355>you

536
00:23:34.375 --> 00:23:37.095
<00:23:34.375>to <00:23:34.550>really <00:23:34.725>ship <00:23:34.900>copy <00:23:35.075>pastable <00:23:35.250>components <00:23:35.425>in <00:23:35.600>a <00:23:35.775>way

537
00:23:37.095 --> 00:23:38.575
<00:23:37.095>that <00:23:37.539>wasn't <00:23:37.983>possible <00:23:38.427>before.

538
00:23:38.635 --> 00:23:40.535
<00:23:38.635>So <00:23:38.915>like <00:23:39.195>utility <00:23:39.475>classes <00:23:39.754>are <00:23:40.035>super

539
00:23:40.895 --> 00:23:42.015
<00:23:40.895>powerful <00:23:41.063>for <00:23:41.231>this <00:23:41.399>kind <00:23:41.567>of <00:23:41.735>use <00:23:41.903>cases.

540
00:23:44.595 --> 00:23:47.765
<00:23:44.595>So <00:23:44.735>now <00:23:44.875>we <00:23:45.015>can <00:23:45.155>literally <00:23:45.295>copy <00:23:45.435>a <00:23:45.575>UI <00:23:45.715>component <00:23:45.855>called <00:23:45.995>snippet,

541
00:23:48.135 --> 00:23:50.205
<00:23:48.135>paste <00:23:48.290>it <00:23:48.446>into <00:23:48.601>your <00:23:48.757>code <00:23:48.912>base <00:23:49.068>and <00:23:49.223>it <00:23:49.379>really <00:23:49.535>works

542
00:23:50.205 --> 00:23:53.005
<00:23:50.205>because <00:23:50.554>Tailwind <00:23:50.905>has <00:23:51.254>unified <00:23:51.605>configuration.

543
00:23:53.005 --> 00:23:55.805
<00:23:53.005>Of <00:23:53.205>course <00:23:53.405>you <00:23:53.605>can <00:23:53.805>work <00:23:54.005>on <00:23:54.205>those <00:23:54.405>configuration,

544
00:23:56.425 --> 00:23:58.205
<00:23:56.425>but <00:23:56.705>in <00:23:56.985>general <00:23:57.264>there <00:23:57.544>are <00:23:57.825>tons

545
00:23:58.225 --> 00:24:00.285
<00:23:58.225>of <00:23:58.574>libraries <00:23:58.925>using <00:23:59.274>tailwind <00:23:59.625>components

546
00:24:00.315 --> 00:24:02.565
<00:24:00.315>that <00:24:00.515>you <00:24:00.715>can <00:24:00.915>just <00:24:01.115>go <00:24:01.315>copy <00:24:01.515>a <00:24:01.715>component

547
00:24:02.565 --> 00:24:03.725
<00:24:02.565>into <00:24:02.739>your <00:24:02.913>code <00:24:03.087>base <00:24:03.261>and <00:24:03.435>it <00:24:03.609>works.

548
00:24:03.915 --> 00:24:06.565
<00:24:03.915>It's, <00:24:04.090>it's <00:24:04.264>the <00:24:04.440>best <00:24:04.615>possible <00:24:04.790>acceleration <00:24:04.965>I <00:24:05.139>think <00:24:05.315>you

549
00:24:06.845 --> 00:24:10.045
<00:24:06.845>probably <00:24:07.000>know <00:24:07.156>flow <00:24:07.311>by, <00:24:07.467>uh, <00:24:07.622>it's <00:24:07.778>another <00:24:07.933>very <00:24:08.089>popular <00:24:08.245>library

550
00:24:10.045 --> 00:24:11.165
<00:24:10.045>that <00:24:10.297>is <00:24:10.549>using <00:24:10.801>this <00:24:11.053>approach

551
00:24:11.185 --> 00:24:12.765
<00:24:11.185>and <00:24:11.534>it's <00:24:11.885>getting <00:24:12.235>insane <00:24:12.585>fraction.

552
00:24:13.715 --> 00:24:15.805
<00:24:13.715>There's <00:24:13.995>one <00:24:14.274>flow <00:24:14.554>that <00:24:14.834>we <00:24:15.115>notice

553
00:24:15.915 --> 00:24:18.205
<00:24:15.915>with <00:24:16.195>this <00:24:16.475>approach <00:24:16.754>though <00:24:17.034>it's <00:24:17.315>reusability,

554
00:24:18.985 --> 00:24:20.485
<00:24:18.985>uh, <00:24:19.322>reusability <00:24:19.659>is <00:24:19.997>the <00:24:20.334>issue.

555
00:24:20.745 --> 00:24:23.405
<00:24:20.745>Uh, <00:24:20.900>when <00:24:21.056>you <00:24:21.211>use <00:24:21.367>many <00:24:21.522>components <00:24:21.678>from <00:24:21.833>the <00:24:21.989>same <00:24:22.145>library,

556
00:24:24.505 --> 00:24:27.885
<00:24:24.505>almost <00:24:24.645>every <00:24:24.785>time <00:24:24.925>you <00:24:25.065>copy <00:24:25.205>your <00:24:25.345>copy <00:24:25.485>paste <00:24:25.625>flow <00:24:25.765>is <00:24:25.905>kinda

557
00:24:27.885 --> 00:24:29.765
<00:24:27.885>interrupted, <00:24:28.235>uh, <00:24:28.585>by <00:24:28.935>the <00:24:29.285>fact

558
00:24:29.795 --> 00:24:31.805
<00:24:29.795>that <00:24:29.995>you <00:24:30.195>have <00:24:30.395>the <00:24:30.595>extract <00:24:30.795>common <00:24:30.995>UI <00:24:31.195>element.

559
00:24:31.905 --> 00:24:33.405
<00:24:31.905>So <00:24:32.055>let's <00:24:32.205>say <00:24:32.355>you <00:24:32.504>have <00:24:32.655>a <00:24:32.805>button <00:24:32.955>that <00:24:33.105>you're <00:24:33.254>using

560
00:24:33.495 --> 00:24:34.885
<00:24:33.495>along <00:24:33.807>the <00:24:34.120>whole <00:24:34.433>code <00:24:34.746>base.

561
00:24:35.265 --> 00:24:37.285
<00:24:35.265>Uh, <00:24:35.440>if <00:24:35.615>we <00:24:35.790>copy <00:24:35.965>paste <00:24:36.140>20 <00:24:36.315>components, <00:24:36.490>we <00:24:36.665>have

562
00:24:37.285 --> 00:24:38.605
<00:24:37.285>to <00:24:37.454>replace <00:24:37.624>this <00:24:37.794>button <00:24:37.963>in <00:24:38.133>each <00:24:38.303>of <00:24:38.473>them

563
00:24:38.605 --> 00:24:39.965
<00:24:38.605>and <00:24:38.779>it's <00:24:38.954>usually <00:24:39.129>much <00:24:39.304>more <00:24:39.479>than <00:24:39.654>a <00:24:39.829>button.

564
00:24:40.705 --> 00:24:42.645
<00:24:40.705>So <00:24:40.860>we <00:24:41.016>could <00:24:41.171>have <00:24:41.327>a <00:24:41.482>lot <00:24:41.638>of <00:24:41.793>components <00:24:41.949>like <00:24:42.105>that

565
00:24:43.105 --> 00:24:46.445
<00:24:43.105>and <00:24:43.338>this <00:24:43.571>repetitive <00:24:43.805>work, <00:24:44.038>it'll <00:24:44.271>significantly, <00:24:44.505>uh,

566
00:24:46.445 --> 00:24:48.085
<00:24:46.445>affect <00:24:46.725>the <00:24:47.004>value <00:24:47.284>of <00:24:47.564>our <00:24:47.845>acceleration.

567
00:24:48.665 --> 00:24:52.045
<00:24:48.665>So <00:24:48.898>what <00:24:49.131>if <00:24:49.365>we <00:24:49.598>extract <00:24:49.831>those <00:24:50.065>components

568
00:24:52.105 --> 00:24:53.605
<00:24:52.105>and <00:24:52.330>ship <00:24:52.555>them <00:24:52.780>directly <00:24:53.005>from <00:24:53.230>the <00:24:53.455>package?

569
00:24:54.195 --> 00:24:55.805
<00:24:54.195>Then <00:24:54.544>every <00:24:54.895>customization <00:24:55.245>happens <00:24:55.595>globally

570
00:24:56.505 --> 00:25:00.165
<00:24:56.505>and <00:24:56.645>in <00:24:56.785>surf <00:24:56.925>I <00:24:57.065>two <00:24:57.205>we <00:24:57.345>call <00:24:57.485>those <00:24:57.625>components <00:24:57.765>base <00:24:57.905>components.

571
00:25:00.225 --> 00:25:02.085
<00:25:00.225>And <00:25:00.458>as <00:25:00.691>a <00:25:00.925>rule <00:25:01.158>of <00:25:01.391>to, <00:25:01.625>uh,

572
00:25:02.155 --> 00:25:04.485
<00:25:02.155>base <00:25:02.435>components <00:25:02.715>should <00:25:02.995>be <00:25:03.274>quite <00:25:03.555>repetitive.

573
00:25:04.715 --> 00:25:06.445
<00:25:04.715>They <00:25:04.995>should <00:25:05.274>be <00:25:05.554>quite <00:25:05.834>granular, <00:25:06.115>ideal.

574
00:25:06.585 --> 00:25:08.965
<00:25:06.585>You <00:25:06.740>should <00:25:06.896>be <00:25:07.051>able <00:25:07.207>to <00:25:07.362>like <00:25:07.518>really <00:25:07.673>easy <00:25:07.829>customize <00:25:07.985>them

575
00:25:08.965 --> 00:25:11.125
<00:25:08.965>through <00:25:09.165>props <00:25:09.365>and <00:25:09.564>maybe <00:25:09.764>some <00:25:09.965>top <00:25:10.165>level <00:25:10.365>styling.

576
00:25:12.635 --> 00:25:14.855
<00:25:12.635>Uh, <00:25:12.835>let's <00:25:13.035>take <00:25:13.235>a <00:25:13.435>button <00:25:13.635>as <00:25:13.835>a <00:25:14.035>example.

577
00:25:15.475 --> 00:25:18.215
<00:25:15.475>So <00:25:15.754>we <00:25:16.034>have <00:25:16.314>completely <00:25:16.594>semantically <00:25:16.875>correct

578
00:25:18.315 --> 00:25:20.895
<00:25:18.315>but <00:25:18.515>with <00:25:18.715>all <00:25:18.915>the <00:25:19.115>accessibility <00:25:19.315>that <00:25:19.515>it <00:25:19.715>needs.

579
00:25:21.195 --> 00:25:22.775
<00:25:21.195>Uh, <00:25:21.661>with <00:25:22.128>standard <00:25:22.595>variance

580
00:25:22.775 --> 00:25:26.735
<00:25:22.775>for <00:25:22.930>most <00:25:23.086>common <00:25:23.241>use <00:25:23.397>cases <00:25:23.552>like <00:25:23.708>sizes, <00:25:23.863>secondary <00:25:24.019>ary, <00:25:24.175>uh,

581
00:25:26.735 --> 00:25:29.855
<00:25:26.735>primary, <00:25:26.935>the <00:25:27.135>important <00:25:27.334>thing <00:25:27.534>that <00:25:27.735>we <00:25:27.935>never <00:25:28.135>try

582
00:25:29.855 --> 00:25:31.495
<00:25:29.855>to <00:25:30.055>take <00:25:30.255>any <00:25:30.455>control <00:25:30.655>out <00:25:30.855>of <00:25:31.055>your <00:25:31.255>hands.

583
00:25:31.595 --> 00:25:35.535
<00:25:31.595>So <00:25:31.735>if <00:25:31.875>simple <00:25:32.015>styling <00:25:32.155>available <00:25:32.295>for <00:25:32.435>props <00:25:32.575>won't <00:25:32.715>work <00:25:32.855>for <00:25:32.995>you,

584
00:25:36.635 --> 00:25:38.575
<00:25:36.635>you <00:25:36.810>can <00:25:36.985>just <00:25:37.160>copy <00:25:37.335>source <00:25:37.510>code <00:25:37.685>your <00:25:37.860>call <00:25:38.035>base

585
00:25:38.575 --> 00:25:39.895
<00:25:38.575>and <00:25:38.773>change <00:25:38.971>as <00:25:39.169>much <00:25:39.367>as <00:25:39.565>you <00:25:39.763>want.

586
00:25:39.915 --> 00:25:42.095
<00:25:39.915>So <00:25:40.264>replacing <00:25:40.615>default, <00:25:40.965>default <00:25:41.315>component

587
00:25:42.365 --> 00:25:44.815
<00:25:42.365>with <00:25:42.565>a <00:25:42.765>custom <00:25:42.965>one <00:25:43.165>really <00:25:43.365>only <00:25:43.565>requires <00:25:43.765>you

588
00:25:44.815 --> 00:25:47.735
<00:25:44.815>to <00:25:44.990>change <00:25:45.165>the <00:25:45.340>imports <00:25:45.515>in <00:25:45.690>all <00:25:45.865>the <00:25:46.040>pasted <00:25:46.215>components.

589
00:25:47.865 --> 00:25:50.615
<00:25:47.865>There <00:25:48.065>is <00:25:48.265>no <00:25:48.465>additional <00:25:48.665>customization <00:25:48.865>layer, <00:25:49.065>it's <00:25:49.265>props.

590
00:25:50.785 --> 00:25:52.775
<00:25:50.785>We're <00:25:50.960>just <00:25:51.135>copying <00:25:51.310>it <00:25:51.485>and <00:25:51.660>doing <00:25:51.835>whatever <00:25:52.010>you <00:25:52.185>want.

591
00:25:53.155 --> 00:25:55.655
<00:25:53.155>We <00:25:53.271>are <00:25:53.388>not <00:25:53.504>trying <00:25:53.621>to <00:25:53.738>build, <00:25:53.855>you <00:25:53.971>know, <00:25:54.088>a <00:25:54.205>lot <00:25:54.321>of <00:25:54.438>a <00:25:54.555>PS

592
00:25:55.755 --> 00:25:56.775
<00:25:55.755>to <00:25:55.938>cover <00:25:56.122>a <00:25:56.305>lot <00:25:56.489>of <00:25:56.673>cases

593
00:25:56.775 --> 00:25:58.895
<00:25:56.775>because <00:25:57.055>it's <00:25:57.335>simply <00:25:57.615>not <00:25:57.895>possible <00:25:58.175>really.

594
00:25:59.555 --> 00:26:02.255
<00:25:59.555>And <00:25:59.730>this <00:25:59.905>concept <00:26:00.080>is <00:26:00.255>widely <00:26:00.430>known <00:26:00.605>as <00:26:00.780>UI <00:26:00.955>primitives.

595
00:26:02.755 --> 00:26:06.015
<00:26:02.755>So <00:26:02.910>you <00:26:03.066>can <00:26:03.221>find <00:26:03.377>them <00:26:03.532>in <00:26:03.688>libraries <00:26:03.843>like <00:26:03.999>headless <00:26:04.155>ui.

596
00:26:06.275 --> 00:26:10.295
<00:26:06.275>How <00:26:06.402>many <00:26:06.529>of <00:26:06.656>you <00:26:06.784>used <00:26:06.911>headless <00:26:07.038>ui? <00:26:07.165>How <00:26:07.293>many <00:26:07.420>of <00:26:07.547>you <00:26:07.675>heard?

597
00:26:12.545 --> 00:26:13.645
<00:26:12.545>You <00:26:12.743>should <00:26:12.941>really <00:26:13.139>find <00:26:13.337>this <00:26:13.535>out.

598
00:26:13.645 --> 00:26:15.925
<00:26:13.645>And <00:26:13.785>there <00:26:13.925>is <00:26:14.065>one <00:26:14.205>more <00:26:14.345>library <00:26:14.485>you <00:26:14.625>should <00:26:14.764>really <00:26:14.905>try <00:26:15.045>out.

599
00:26:15.925 --> 00:26:17.165
<00:26:15.925>And <00:26:16.204>it's <00:26:16.483>called <00:26:16.762>Radi <00:26:17.041>ui.

600
00:26:17.995 --> 00:26:20.165
<00:26:17.995>It's <00:26:18.344>became <00:26:18.695>extremely, <00:26:19.044>extremely <00:26:19.395>popular

601
00:26:20.665 --> 00:26:23.165
<00:26:20.665>and <00:26:20.840>it <00:26:21.014>became <00:26:21.190>extremely <00:26:21.365>popular <00:26:21.540>because <00:26:21.715>of <00:26:21.889>its <00:26:22.065>simplicity,

602
00:26:23.645 --> 00:26:26.005
<00:26:23.645>'cause <00:26:23.878>its <00:26:24.111>ality, <00:26:24.345>because <00:26:24.578>of <00:26:24.811>its <00:26:25.045>flexibility.

603
00:26:26.465 --> 00:26:29.325
<00:26:26.465>And <00:26:26.592>what <00:26:26.719>Radi <00:26:26.846>UI <00:26:26.974>is <00:26:27.101>basically <00:26:27.228>a <00:26:27.355>set <00:26:27.483>of <00:26:27.610>un <00:26:27.737>style <00:26:27.865>components,

604
00:26:29.475 --> 00:26:31.445
<00:26:29.475>they're <00:26:29.824>providing <00:26:30.175>some <00:26:30.524>baseline <00:26:30.875>functionality,

605
00:26:31.505 --> 00:26:33.685
<00:26:31.505>but <00:26:31.785>then <00:26:32.065>they're <00:26:32.345>almost <00:26:32.625>fully <00:26:32.905>customizable.

606
00:26:33.795 --> 00:26:36.805
<00:26:33.795>They're <00:26:33.970>not <00:26:34.145>telling <00:26:34.320>you <00:26:34.495>how <00:26:34.670>you <00:26:34.845>should <00:26:35.020>structure <00:26:35.195>your,

607
00:26:36.805 --> 00:26:40.685
<00:26:36.805>your <00:26:37.005>ui, <00:26:37.205>they're <00:26:37.405>not <00:26:37.605>telling <00:26:37.805>you <00:26:38.005>what <00:26:38.205>uh,

608
00:26:41.005 --> 00:26:42.725
<00:26:41.005>CSS <00:26:41.471>accessory <00:26:41.938>should <00:26:42.405>use.

609
00:26:42.725 --> 00:26:45.565
<00:26:42.725>They're <00:26:42.899>really <00:26:43.074>not <00:26:43.250>adding <00:26:43.425>boundaries <00:26:43.600>to <00:26:43.774>your <00:26:43.949>code <00:26:44.125>base

610
00:26:46.145 --> 00:26:50.085
<00:26:46.145>and <00:26:46.300>in <00:26:46.456>insert <00:26:46.611>y <00:26:46.767>every <00:26:46.922>other <00:26:47.078>more <00:26:47.233>complex <00:26:47.389>component <00:26:47.545>like

611
00:26:50.155 --> 00:26:54.125
<00:26:50.155>accordion, <00:26:50.310>banner, <00:26:50.466>this <00:26:50.621>sort <00:26:50.777>of <00:26:50.932>things, <00:26:51.088>uh, <00:26:51.243>as <00:26:51.399>I <00:26:51.555>mentioned

612
00:26:54.125 --> 00:26:56.405
<00:26:54.125>before <00:26:54.325>was <00:26:54.525>just <00:26:54.725>a <00:26:54.925>copy <00:26:55.125>and <00:26:55.325>paste <00:26:55.525>code.

613
00:26:57.385 --> 00:27:01.655
<00:26:57.385>So <00:26:57.560>this <00:26:57.735>flexible <00:26:57.910>approach <00:26:58.085>really <00:26:58.260>not <00:26:58.435>only <00:26:58.610>allows <00:26:58.785>us

614
00:27:01.655 --> 00:27:03.935
<00:27:01.655>to <00:27:01.855>basically <00:27:02.055>customize <00:27:02.254>those <00:27:02.455>components <00:27:02.655>in <00:27:02.855>any <00:27:03.055>way,

615
00:27:03.995 --> 00:27:06.735
<00:27:03.995>but <00:27:04.135>also <00:27:04.274>thanks <00:27:04.415>to <00:27:04.554>the <00:27:04.695>fact <00:27:04.834>that <00:27:04.975>we <00:27:05.114>use <00:27:05.254>just <00:27:05.395>tailwind

616
00:27:07.045 --> 00:27:08.415
<00:27:07.045>with <00:27:07.250>a <00:27:07.456>few <00:27:07.661>tweaks <00:27:07.867>on <00:27:08.072>the <00:27:08.278>colors.

617
00:27:08.915 --> 00:27:11.815
<00:27:08.915>It <00:27:09.070>can <00:27:09.226>mix <00:27:09.381>well <00:27:09.537>with <00:27:09.692>almost <00:27:09.848>every <00:27:10.003>other <00:27:10.159>tailwind <00:27:10.315>components.

618
00:27:11.815 --> 00:27:14.735
<00:27:11.815>And <00:27:11.990>I <00:27:12.165>think <00:27:12.340>this <00:27:12.515>is <00:27:12.690>something <00:27:12.865>that <00:27:13.040>almost <00:27:13.215>none

619
00:27:14.735 --> 00:27:16.415
<00:27:14.735>of <00:27:15.014>the <00:27:15.294>old <00:27:15.574>libraries <00:27:15.854>could <00:27:16.135>do.

620
00:27:16.415 --> 00:27:18.135
<00:27:16.415>Like <00:27:16.615>you <00:27:16.815>cannot <00:27:17.014>mix <00:27:17.215>it <00:27:17.415>with <00:27:17.615>anything <00:27:17.815>else.

621
00:27:18.195 --> 00:27:20.815
<00:27:18.195>You <00:27:18.370>cannot <00:27:18.544>easily <00:27:18.720>mix <00:27:18.895>it <00:27:19.070>with <00:27:19.245>your <00:27:19.419>custom <00:27:19.595>code.

622
00:27:20.835 --> 00:27:22.895
<00:27:20.835>It <00:27:21.035>wouldn't <00:27:21.235>blend <00:27:21.435>to <00:27:21.635>your <00:27:21.835>code <00:27:22.035>base <00:27:22.235>all

623
00:27:22.895 --> 00:27:24.015
<00:27:22.895>or <00:27:23.147>nothing <00:27:23.399>kind <00:27:23.651>of <00:27:23.903>solution.

624
00:27:24.235 --> 00:27:25.775
<00:27:24.235>So <00:27:24.433>there <00:27:24.630>is <00:27:24.829>a <00:27:25.027>huge <00:27:25.225>price <00:27:25.423>to <00:27:25.621>pay.

625
00:27:25.775 --> 00:27:27.015
<00:27:25.775>It <00:27:26.147>is <00:27:26.519>extremely <00:27:26.891>opinionated

626
00:27:27.075 --> 00:27:30.215
<00:27:27.075>and <00:27:27.308>it <00:27:27.541>kinda <00:27:27.775>prevents <00:27:28.008>you <00:27:28.241>from <00:27:28.475>the

627
00:27:30.215 --> 00:27:31.495
<00:27:30.215>ability <00:27:30.503>to <00:27:30.791>use <00:27:31.079>anything <00:27:31.367>else.

628
00:27:32.555 --> 00:27:36.215
<00:27:32.555>Um, <00:27:32.710>so <00:27:32.866>I <00:27:33.021>think <00:27:33.177>that <00:27:33.332>would <00:27:33.488>be <00:27:33.643>about <00:27:33.799>our <00:27:33.955>solution.

629
00:27:36.215 --> 00:27:39.095
<00:27:36.215>And <00:27:36.370>I <00:27:36.526>shared <00:27:36.681>a <00:27:36.837>lot <00:27:36.992>of <00:27:37.148>thoughts <00:27:37.303>during <00:27:37.459>this <00:27:37.615>talk,

630
00:27:39.555 --> 00:27:42.655
<00:27:39.555>but <00:27:39.710>if <00:27:39.866>you <00:27:40.021>could <00:27:40.177>only <00:27:40.332>remember <00:27:40.488>two <00:27:40.643>things <00:27:40.799>from <00:27:40.955>it,

631
00:27:42.715 --> 00:27:44.895
<00:27:42.715>I'd <00:27:42.948>like <00:27:43.181>you <00:27:43.415>to <00:27:43.648>remember <00:27:43.881>this <00:27:44.115>first.

632
00:27:45.435 --> 00:27:48.975
<00:27:45.435>The <00:27:45.610>fact <00:27:45.784>that <00:27:45.960>some <00:27:46.135>libraries <00:27:46.310>popular <00:27:46.485>really <00:27:46.659>doesn't <00:27:46.835>mean

633
00:27:49.005 --> 00:27:50.415
<00:27:49.005>that <00:27:49.428>it's <00:27:49.851>universally <00:27:50.274>good.

634
00:27:50.805 --> 00:27:53.735
<00:27:50.805>Your <00:27:50.980>technological <00:27:51.155>choices <00:27:51.330>should <00:27:51.505>be <00:27:51.680>based <00:27:51.855>on <00:27:52.030>the <00:27:52.205>research

635
00:27:54.115 --> 00:27:55.655
<00:27:54.115>and <00:27:54.313>finding <00:27:54.511>the <00:27:54.709>best <00:27:54.907>tool <00:27:55.105>for <00:27:55.303>the <00:27:55.501>job.

636
00:27:56.355 --> 00:27:58.535
<00:27:56.355>Not <00:27:56.530>finding <00:27:56.705>the <00:27:56.880>most <00:27:57.055>popular <00:27:57.230>tool <00:27:57.405>for <00:27:57.580>the <00:27:57.755>job,

637
00:27:58.535 --> 00:28:01.055
<00:27:58.535>like <00:27:58.690>popularity <00:27:58.846>is <00:27:59.001>really <00:27:59.157>just <00:27:59.312>one <00:27:59.468>of <00:27:59.623>the <00:27:59.779>trust <00:27:59.935>indicators.

638
00:28:01.715 --> 00:28:06.335
<00:28:01.715>But <00:28:01.889>the <00:28:02.064>most <00:28:02.240>popular <00:28:02.415>libraries <00:28:02.590>unfortunately <00:28:02.764>has <00:28:02.939>a <00:28:03.115>lot

639
00:28:06.335 --> 00:28:08.575
<00:28:06.335>of <00:28:06.568>flows <00:28:06.801>and <00:28:07.035>every <00:28:07.268>application <00:28:07.501>is <00:28:07.735>different.

640
00:28:08.575 --> 00:28:11.495
<00:28:08.575>And <00:28:08.730>when <00:28:08.886>it <00:28:09.041>comes <00:28:09.197>to <00:28:09.352>the <00:28:09.508>ui, <00:28:09.663>we <00:28:09.819>rarely <00:28:09.975>know

641
00:28:11.675 --> 00:28:13.255
<00:28:11.675>how <00:28:11.955>this <00:28:12.235>UI <00:28:12.514>we <00:28:12.794>will <00:28:13.075>evolve.

642
00:28:13.255 --> 00:28:17.055
<00:28:13.255>So <00:28:13.371>we <00:28:13.488>ideally <00:28:13.605>should, <00:28:13.721>you <00:28:13.838>know, <00:28:13.955>find <00:28:14.071>a <00:28:14.188>tool <00:28:14.305>that <00:28:14.421>is <00:28:14.538>the <00:28:14.655>most

643
00:28:17.815 --> 00:28:20.975
<00:28:17.815>versatile, <00:28:18.015>the <00:28:18.215>most <00:28:18.415>flexible, <00:28:18.615>but <00:28:18.815>at <00:28:19.015>least <00:28:19.215>opinionated.

644
00:28:21.795 --> 00:28:22.815
<00:28:21.795>And <00:28:22.101>another <00:28:22.407>thing <00:28:22.713>is

645
00:28:22.815 --> 00:28:26.015
<00:28:22.815>that <00:28:23.015>simple <00:28:23.215>solutions <00:28:23.415>are <00:28:23.615>the <00:28:23.815>most <00:28:24.015>universal <00:28:24.215>ones.

646
00:28:26.035 --> 00:28:28.535
<00:28:26.035>And <00:28:26.268>opinionated <00:28:26.501>ones <00:28:26.735>always <00:28:26.968>come <00:28:27.201>with <00:28:27.435>trade-offs.

647
00:28:28.675 --> 00:28:30.295
<00:28:28.675>And <00:28:28.908>the <00:28:29.141>more <00:28:29.375>opinionated <00:28:29.608>the <00:28:29.841>tool <00:28:30.075>is,

648
00:28:30.755 --> 00:28:31.895
<00:28:30.755>the <00:28:31.011>more <00:28:31.268>you <00:28:31.524>should <00:28:31.781>research

649
00:28:32.115 --> 00:28:33.535
<00:28:32.115>and <00:28:32.328>ensure <00:28:32.541>if <00:28:32.754>it <00:28:32.967>fits <00:28:33.180>your <00:28:33.393>needs

650
00:28:33.535 --> 00:28:35.135
<00:28:33.535>because <00:28:33.885>most <00:28:34.235>likely <00:28:34.585>it <00:28:34.935>won't.

651
00:28:35.435 --> 00:28:37.615
<00:28:35.435>And <00:28:35.668>honestly, <00:28:35.901>a <00:28:36.135>lot <00:28:36.368>of <00:28:36.601>people <00:28:36.835>think

652
00:28:37.615 --> 00:28:39.975
<00:28:37.615>that <00:28:37.790>using <00:28:37.965>open <00:28:38.140>United <00:28:38.315>tools <00:28:38.490>is <00:28:38.665>a <00:28:38.840>risk <00:28:39.015>mitigation

653
00:28:40.865 --> 00:28:43.365
<00:28:40.865>and <00:28:41.040>it <00:28:41.215>is <00:28:41.390>a <00:28:41.565>risk <00:28:41.740>mitigation <00:28:41.915>in <00:28:42.090>some <00:28:42.265>cases.

654
00:28:43.585 --> 00:28:46.125
<00:28:43.585>But <00:28:43.760>when <00:28:43.935>we <00:28:44.110>are <00:28:44.285>talking <00:28:44.460>about <00:28:44.635>using <00:28:44.810>opinionated <00:28:44.985>tools

655
00:28:46.145 --> 00:28:49.805
<00:28:46.145>for <00:28:46.345>things <00:28:46.545>that <00:28:46.745>by <00:28:46.945>nature <00:28:47.145>are <00:28:47.345>very <00:28:47.545>different,

656
00:28:49.905 --> 00:28:50.925
<00:28:49.905>are <00:28:50.364>very <00:28:50.822>flexible

657
00:28:51.305 --> 00:28:54.765
<00:28:51.305>and <00:28:51.445>vary <00:28:51.585>from <00:28:51.725>project <00:28:51.865>to <00:28:52.005>project, <00:28:52.145>then <00:28:52.285>this <00:28:52.425>is <00:28:52.565>a <00:28:52.705>risk

658
00:28:54.765 --> 00:28:57.005
<00:28:54.765>because <00:28:54.965>you <00:28:55.165>could <00:28:55.365>hit <00:28:55.565>the <00:28:55.765>wall <00:28:55.965>very <00:28:56.165>easily.

659
00:28:58.065 --> 00:29:01.165
<00:28:58.065>And <00:28:58.181>that's <00:28:58.298>it. <00:28:58.415>That's <00:28:58.531>all <00:28:58.648>that <00:28:58.765>I <00:28:58.881>had. <00:28:58.998>Thank <00:28:59.115>you <00:28:59.231>so <00:28:59.348>much. <00:28:59.465>Uh,

660
00:29:09.505 --> 00:29:11.035
<00:29:09.505>yeah, <00:29:09.734>I <00:29:09.964>think <00:29:10.193>I <00:29:10.423>passed <00:29:10.652>the <00:29:10.882>time,

661
00:29:11.035 --> 00:29:12.355
<00:29:11.035>so <00:29:11.204>there <00:29:11.374>will <00:29:11.544>be <00:29:11.713>no <00:29:11.883>queue <00:29:12.053>one <00:29:12.223>day.

662
00:29:13.905 --> 00:29:16.915
<00:29:13.905>Okay. <00:29:14.060>If <00:29:14.216>you <00:29:14.371>have <00:29:14.527>some <00:29:14.682>questions <00:29:14.838>to <00:29:14.993>Philip, <00:29:15.149>feel <00:29:15.305>free

663
00:29:17.095 --> 00:29:18.635
<00:29:17.095>to <00:29:17.372>come <00:29:17.649>to <00:29:17.926>him <00:29:18.203>and <00:29:18.481>ask.

664
00:29:19.065 --> 00:29:20.555
<00:29:19.065>He's <00:29:19.400>going <00:29:19.735>down <00:29:20.070>the <00:29:20.406>stage.

665
00:29:21.015 --> 00:29:22.635
<00:29:21.015>We <00:29:21.295>have <00:29:21.575>now <00:29:21.855>10 <00:29:22.135>minutes <00:29:22.415>break

666
00:29:22.935 --> 00:29:26.275
<00:29:22.935>and <00:29:23.110>then <00:29:23.284>we <00:29:23.460>have <00:29:23.635>our <00:29:23.810>next <00:29:23.985>speaker, <00:29:24.159>George <00:29:24.335>Cave,

667
00:29:26.335 --> 00:29:28.555
<00:29:26.335>and <00:29:26.615>he's <00:29:26.895>gonna <00:29:27.175>talk <00:29:27.455>about <00:29:27.735>prototyping

668
00:29:28.585 --> 00:29:30.955
<00:29:28.585>with <00:29:28.935>hardware <00:29:29.285>and <00:29:29.635>the <00:29:29.985>web.

669
00:29:31.765 --> 00:29:32.275
<00:29:31.765>Thank <00:29:32.224>you.