WEBVTT

1
00:00:02.680 --> 00:00:05.445
<00:00:02.680>Okay, <00:00:02.855>then <00:00:03.030>well <00:00:03.205>then <00:00:03.380>I, <00:00:03.555>um, <00:00:03.730>better <00:00:03.905>get <00:00:04.080>going.

2
00:00:05.905 --> 00:00:08.965
<00:00:05.905>Um, <00:00:06.105>thank <00:00:06.305>you <00:00:06.505>all <00:00:06.705>for <00:00:06.905>joining. <00:00:07.105>Um, <00:00:07.305>please.

3
00:00:09.425 --> 00:00:13.205
<00:00:09.425>Um, <00:00:09.580>in <00:00:09.736>my <00:00:09.891>presentation, <00:00:10.047>I <00:00:10.202>have <00:00:10.358>a <00:00:10.513>few <00:00:10.669>links, <00:00:10.825>uh,

4
00:00:13.425 --> 00:00:17.525
<00:00:13.425>at <00:00:13.565>the <00:00:13.705>end <00:00:13.845>I <00:00:13.985>have <00:00:14.125>an <00:00:14.265>overview <00:00:14.405>page <00:00:14.545>with, <00:00:14.685>uh, <00:00:14.825>well

5
00:00:18.095 --> 00:00:19.205
<00:00:18.095>quite <00:00:18.427>a <00:00:18.761>few <00:00:19.093>links.

6
00:00:19.275 --> 00:00:21.765
<00:00:19.275>I've <00:00:19.474>also <00:00:19.674>added <00:00:19.875>a <00:00:20.075>small, <00:00:20.275>uh, <00:00:20.474>camera <00:00:20.674>on

7
00:00:22.045 --> 00:00:23.805
<00:00:22.045>that <00:00:22.278>page <00:00:22.511>when <00:00:22.745>it's <00:00:22.978>the <00:00:23.211>best <00:00:23.445>time

8
00:00:23.805 --> 00:00:25.485
<00:00:23.805>to <00:00:23.980>take <00:00:24.155>a <00:00:24.330>screenshot <00:00:24.505>or <00:00:24.680>to <00:00:24.855>take <00:00:25.030>a <00:00:25.205>picture.

9
00:00:25.825 --> 00:00:26.925
<00:00:25.825>But <00:00:26.023>if <00:00:26.221>you <00:00:26.419>don't <00:00:26.617>want <00:00:26.815>to,

10
00:00:27.425 --> 00:00:30.165
<00:00:27.425>and <00:00:27.600>by <00:00:27.775>all <00:00:27.950>means, <00:00:28.125>um, <00:00:28.300>you <00:00:28.475>don't <00:00:28.650>have <00:00:28.825>to,

11
00:00:30.465 --> 00:00:33.925
<00:00:30.465>you <00:00:30.620>can <00:00:30.776>also <00:00:30.931>visit <00:00:31.087>the <00:00:31.242>presentation <00:00:31.398>itself <00:00:31.553>on <00:00:31.709>API <00:00:31.865>dash,

12
00:00:33.925 --> 00:00:37.285
<00:00:33.925>first <00:00:34.158>dash <00:00:34.391>ui <00:00:34.625>dash <00:00:34.858>components <00:00:35.091>net <00:00:35.324>app.

13
00:00:38.585 --> 00:00:41.685
<00:00:38.585>And <00:00:38.712>before <00:00:38.839>I <00:00:38.966>start, <00:00:39.094>I <00:00:39.221>want, <00:00:39.348>well, <00:00:39.475>actually, <00:00:39.603>I <00:00:39.730>want <00:00:39.857>to <00:00:39.985>start

14
00:00:41.715 --> 00:00:45.405
<00:00:41.715>with <00:00:41.842>thinking <00:00:41.969>about <00:00:42.096>a <00:00:42.224>few <00:00:42.351>questions <00:00:42.478>that <00:00:42.605>I <00:00:42.733>had <00:00:42.860>in <00:00:42.987>the <00:00:43.115>past,

15
00:00:45.505 --> 00:00:48.595
<00:00:45.505>but <00:00:45.785>also <00:00:46.065>still <00:00:46.345>have <00:00:46.625>present <00:00:46.905>day.

16
00:00:48.855 --> 00:00:50.515
<00:00:48.855>And <00:00:49.135>that's, <00:00:49.415>that, <00:00:49.694>that's <00:00:49.974>the <00:00:50.254>question.

17
00:00:50.665 --> 00:00:53.315
<00:00:50.665>Well, <00:00:50.865>the <00:00:51.065>first <00:00:51.265>is, <00:00:51.464>who <00:00:51.665>writes <00:00:51.865>UI <00:00:52.065>components?

18
00:00:53.735 --> 00:00:56.595
<00:00:53.735>So, <00:00:53.890>well, <00:00:54.046>I <00:00:54.201>have <00:00:54.357>my <00:00:54.512>hand <00:00:54.668>up <00:00:54.823>already <00:00:54.979>on <00:00:55.135>screen

19
00:00:56.655 --> 00:00:59.195
<00:00:56.655>and <00:00:56.888>now <00:00:57.121>in <00:00:57.355>on <00:00:57.588>camera <00:00:57.821>as <00:00:58.055>well.

20
00:00:59.735 --> 00:01:02.555
<00:00:59.735>Uh, <00:00:59.862>but <00:00:59.989>from <00:01:00.116>time <00:01:00.244>to <00:01:00.371>time, <00:01:00.498>I <00:01:00.625>still, <00:01:00.753>I <00:01:00.880>still, <00:01:01.007>well, <00:01:01.135>I,

21
00:01:02.555 --> 00:01:05.075
<00:01:02.555>from <00:01:02.730>time <00:01:02.905>to <00:01:03.080>time, <00:01:03.255>I <00:01:03.430>write <00:01:03.605>a <00:01:03.780>UI <00:01:03.955>component.

22
00:01:05.615 --> 00:01:08.115
<00:01:05.615>And <00:01:05.755>every <00:01:05.895>time <00:01:06.035>that <00:01:06.175>I <00:01:06.315>write <00:01:06.455>a <00:01:06.595>UI <00:01:06.735>component, <00:01:06.875>of <00:01:07.015>course,

23
00:01:08.195 --> 00:01:10.075
<00:01:08.195>I <00:01:08.428>need <00:01:08.661>to <00:01:08.895>know <00:01:09.128>what's <00:01:09.361>its <00:01:09.595>purpose.

24
00:01:11.525 --> 00:01:14.265
<00:01:11.525>Why <00:01:11.680>is <00:01:11.836>it, <00:01:11.991>why <00:01:12.147>is <00:01:12.302>it <00:01:12.458>needed? <00:01:12.613>Is <00:01:12.769>it <00:01:12.925>new?

25
00:01:14.645 --> 00:01:16.225
<00:01:14.645>Is <00:01:14.878>it <00:01:15.111>an <00:01:15.345>extension <00:01:15.578>on <00:01:15.811>something <00:01:16.045>else?

26
00:01:17.135 --> 00:01:18.585
<00:01:17.135>Have <00:01:17.461>we <00:01:17.787>done <00:01:18.113>this <00:01:18.440>before?

27
00:01:19.205 --> 00:01:22.465
<00:01:19.205>And <00:01:19.380>why <00:01:19.554>does <00:01:19.730>my <00:01:19.905>project <00:01:20.080>always <00:01:20.255>need <00:01:20.429>a <00:01:20.605>new

28
00:01:22.565 --> 00:01:23.825
<00:01:22.565>and <00:01:22.943>improved <00:01:23.321>date <00:01:23.699>picker?

29
00:01:25.145 --> 00:01:27.725
<00:01:25.145>But <00:01:25.300>then <00:01:25.456>again, <00:01:25.611>if <00:01:25.767>we <00:01:25.922>think <00:01:26.078>about <00:01:26.233>that <00:01:26.389>date <00:01:26.545>picker,

30
00:01:29.545 --> 00:01:30.765
<00:01:29.545>it <00:01:29.911>is <00:01:30.277>used <00:01:30.643>somewhere.

31
00:01:31.025 --> 00:01:34.045
<00:01:31.025>And <00:01:31.165>if <00:01:31.305>I'm <00:01:31.445>on <00:01:31.585>the <00:01:31.725>design <00:01:31.865>system <00:01:32.005>team <00:01:32.145>at <00:01:32.285>a <00:01:32.425>company,

32
00:01:34.745 --> 00:01:36.685
<00:01:34.745>I'm <00:01:34.978>probably <00:01:35.211>not <00:01:35.445>on <00:01:35.678>the <00:01:35.911>web <00:01:36.145>team

33
00:01:36.915 --> 00:01:39.165
<00:01:36.914>that <00:01:37.264>consumes <00:01:37.615>the <00:01:37.964>design <00:01:38.315>system.

34
00:01:40.015 --> 00:01:43.325
<00:01:40.015>Maybe <00:01:40.155>I <00:01:40.295>am, <00:01:40.435>maybe <00:01:40.575>I <00:01:40.715>have <00:01:40.855>control <00:01:40.995>over <00:01:41.135>all <00:01:41.275>the <00:01:41.415>UI

35
00:01:43.325 --> 00:01:44.925
<00:01:43.325>that <00:01:43.525>I'm <00:01:43.725>working <00:01:43.925>with, <00:01:44.125>but <00:01:44.325>there <00:01:44.525>are <00:01:44.725>also

36
00:01:44.925 --> 00:01:46.165
<00:01:44.925>possibilities <00:01:45.297>that <00:01:45.669>you <00:01:46.041>don't.

37
00:01:47.145 --> 00:01:49.205
<00:01:47.145>And <00:01:47.320>what <00:01:47.495>happens <00:01:47.670>if <00:01:47.845>you're <00:01:48.020>on <00:01:48.195>the <00:01:48.370>web <00:01:48.545>team

38
00:01:49.665 --> 00:01:53.085
<00:01:49.664>and <00:01:49.820>you <00:01:49.976>need <00:01:50.131>a <00:01:50.287>new <00:01:50.442>component, <00:01:50.598>a <00:01:50.753>new <00:01:50.909>UI <00:01:51.065>component?

39
00:01:54.135 --> 00:01:55.865
<00:01:54.134>What, <00:01:54.290>what <00:01:54.446>are <00:01:54.601>the <00:01:54.757>steps <00:01:54.912>that <00:01:55.068>we <00:01:55.223>need <00:01:55.379>to <00:01:55.535>take?

40
00:01:56.365 --> 00:01:59.905
<00:01:56.365>How <00:01:56.505>do <00:01:56.645>you <00:01:56.785>ensure <00:01:56.925>that <00:01:57.065>the <00:01:57.205>component <00:01:57.345>you <00:01:57.485>that <00:01:57.625>you <00:01:57.765>get

41
00:02:00.765 --> 00:02:02.385
<00:02:00.765>can <00:02:00.965>do <00:02:01.165>everything <00:02:01.365>that <00:02:01.565>you <00:02:01.765>needed <00:02:01.965>to <00:02:02.165>do?

42
00:02:04.255 --> 00:02:07.835
<00:02:04.255>And <00:02:04.455>in <00:02:04.655>that <00:02:04.854>process, <00:02:05.054>I've <00:02:05.255>seen <00:02:05.455>that, <00:02:05.655>well,

43
00:02:07.835 --> 00:02:11.035
<00:02:07.835>we <00:02:07.962>had <00:02:08.089>a <00:02:08.216>great <00:02:08.344>idea <00:02:08.471>and <00:02:08.598>then <00:02:08.725>someone <00:02:08.853>needed <00:02:08.980>to <00:02:09.107>build <00:02:09.234>it.

44
00:02:11.255 --> 00:02:15.715
<00:02:11.255>And <00:02:11.394>that <00:02:11.535>also <00:02:11.674>meant <00:02:11.815>that <00:02:11.954>that <00:02:12.095>ticket <00:02:12.234>will <00:02:12.375>be <00:02:12.515>for <00:02:12.655>me,

45
00:02:16.175 --> 00:02:18.235
<00:02:16.175>put <00:02:16.455>in <00:02:16.735>the <00:02:17.015>on <00:02:17.295>hold <00:02:17.575>lane

46
00:02:18.705 --> 00:02:23.035
<00:02:18.704>because <00:02:18.844>I <00:02:18.984>had <00:02:19.124>to <00:02:19.265>wait <00:02:19.404>until <00:02:19.545>that <00:02:19.684>that <00:02:19.825>component <00:02:19.964>was <00:02:20.105>created.

47
00:02:25.145 --> 00:02:27.325
<00:02:25.145>So <00:02:25.345>that <00:02:25.545>takes <00:02:25.745>a <00:02:25.945>few <00:02:26.145>sprints, <00:02:26.345>and <00:02:26.545>then

48
00:02:27.325 --> 00:02:30.565
<00:02:27.325>after <00:02:27.500>a <00:02:27.674>month, <00:02:27.850>it's <00:02:28.024>part <00:02:28.200>of <00:02:28.375>the <00:02:28.549>new <00:02:28.725>version

49
00:02:30.745 --> 00:02:33.125
<00:02:30.745>of <00:02:30.900>the <00:02:31.056>component <00:02:31.211>library, <00:02:31.367>and <00:02:31.522>I <00:02:31.678>can <00:02:31.833>start <00:02:31.989>using <00:02:32.145>it.

50
00:02:33.825 --> 00:02:37.875
<00:02:33.825>But <00:02:33.941>is <00:02:34.058>that, <00:02:34.174>and <00:02:34.291>first <00:02:34.408>thing <00:02:34.524>that <00:02:34.641>I <00:02:34.758>need <00:02:34.875>to <00:02:34.991>do <00:02:35.108>then <00:02:35.225>is

51
00:02:37.875 --> 00:02:39.395
<00:02:37.875>to <00:02:38.070>think <00:02:38.265>about, <00:02:38.461>wait <00:02:38.656>a <00:02:38.852>minute, <00:02:39.047>what <00:02:39.243>was

52
00:02:39.395 --> 00:02:40.515
<00:02:39.395>that <00:02:39.731>component <00:02:40.067>about <00:02:40.403>again?

53
00:02:40.515 --> 00:02:42.755
<00:02:40.515>Oh <00:02:40.654>yeah, <00:02:40.795>we <00:02:40.934>had <00:02:41.075>a <00:02:41.214>day <00:02:41.355>picker <00:02:41.494>and <00:02:41.635>we <00:02:41.774>extended <00:02:41.915>it,

54
00:02:42.755 --> 00:02:46.995
<00:02:42.755>and <00:02:42.871>now <00:02:42.988>I <00:02:43.105>can <00:02:43.221>add <00:02:43.338>a <00:02:43.454>range <00:02:43.571>in <00:02:43.688>the, <00:02:43.805>in <00:02:43.921>between <00:02:44.038>two <00:02:44.155>dates.

55
00:02:47.765 --> 00:02:48.955
<00:02:47.765>Right? <00:02:48.300>That's <00:02:48.835>excellent.

56
00:02:49.175 --> 00:02:51.795
<00:02:49.175>Um, <00:02:49.315>what <00:02:49.455>was <00:02:49.595>the <00:02:49.735>API, <00:02:49.875>again, <00:02:50.015>what <00:02:50.155>did <00:02:50.295>I <00:02:50.435>need <00:02:50.575>to

57
00:02:52.545 --> 00:02:55.475
<00:02:52.545>process <00:02:52.720>That <00:02:52.895>was <00:02:53.070>something <00:02:53.245>with <00:02:53.420>the <00:02:53.595>property <00:02:53.770>that <00:02:53.945>changed.

58
00:02:55.725 --> 00:02:58.275
<00:02:55.725>There <00:02:55.958>is <00:02:56.191>a <00:02:56.424>lot <00:02:56.658>of <00:02:56.891>additional <00:02:57.125>thinking

59
00:02:58.275 --> 00:03:01.405
<00:02:58.275>because <00:02:58.430>I <00:02:58.586>had <00:02:58.741>to <00:02:58.897>park <00:02:59.052>this <00:02:59.208>ticket <00:02:59.363>for <00:02:59.519>a <00:02:59.675>month

60
00:03:01.945 --> 00:03:03.445
<00:03:01.945>and <00:03:02.282>then <00:03:02.620>start <00:03:02.957>over <00:03:03.295>again.

61
00:03:03.555 --> 00:03:05.765
<00:03:03.555>What <00:03:03.755>if <00:03:03.955>we <00:03:04.155>can <00:03:04.355>change <00:03:04.555>this <00:03:04.755>thought <00:03:04.955>process?

62
00:03:06.545 --> 00:03:08.765
<00:03:06.545>And <00:03:06.700>that's <00:03:06.856>actually <00:03:07.011>what <00:03:07.167>I <00:03:07.322>wanted <00:03:07.478>to <00:03:07.633>talk <00:03:07.789>about <00:03:07.945>today.

63
00:03:09.345 --> 00:03:11.165
<00:03:09.345>And <00:03:09.625>that's, <00:03:09.905>it's <00:03:10.185>a <00:03:10.465>thought <00:03:10.745>process.

64
00:03:11.505 --> 00:03:15.245
<00:03:11.505>So, <00:03:11.644>um, <00:03:11.785>well, <00:03:11.924>let's <00:03:12.065>start <00:03:12.204>off <00:03:12.345>with <00:03:12.484>let's <00:03:12.625>a <00:03:12.765>yellow <00:03:12.905>screen.

65
00:03:15.625 --> 00:03:17.845
<00:03:15.625>Uh, <00:03:15.858>let's <00:03:16.091>start <00:03:16.325>off <00:03:16.558>with <00:03:16.791>introducing <00:03:17.025>myself.

66
00:03:18.105 --> 00:03:21.285
<00:03:18.105>Uh, <00:03:18.244>hello, <00:03:18.385>my <00:03:18.524>name <00:03:18.665>is, <00:03:18.804>uh, <00:03:18.945>Lu. <00:03:19.084>Uh, <00:03:19.225>that's <00:03:19.364>my <00:03:19.505>face.

67
00:03:21.425 --> 00:03:23.645
<00:03:21.425>I'm <00:03:21.625>a <00:03:21.825>principal <00:03:22.025>consultant <00:03:22.225>at <00:03:22.425>Team <00:03:22.625>Rockstars. <00:03:22.825>It.

68
00:03:24.545 --> 00:03:27.085
<00:03:24.545>And <00:03:24.685>like <00:03:24.825>I've <00:03:24.965>said <00:03:25.105>to <00:03:25.245>Chris, <00:03:25.385>the <00:03:25.525>thing <00:03:25.665>that <00:03:25.805>I <00:03:25.945>try

69
00:03:27.085 --> 00:03:30.445
<00:03:27.085>to <00:03:27.201>do <00:03:27.318>in <00:03:27.435>my <00:03:27.551>work <00:03:27.668>is <00:03:27.785>to <00:03:27.901>help <00:03:28.018>out <00:03:28.135>people, <00:03:28.251>help <00:03:28.368>out <00:03:28.485>companies

70
00:03:30.445 --> 00:03:33.645
<00:03:30.445>that <00:03:30.600>have <00:03:30.756>a <00:03:30.911>specific <00:03:31.067>issue <00:03:31.222>that <00:03:31.378>they <00:03:31.533>can't <00:03:31.689>solve <00:03:31.845>themselves.

71
00:03:34.145 --> 00:03:39.005
<00:03:34.145>But <00:03:34.261>I <00:03:34.378>also <00:03:34.495>want <00:03:34.611>to <00:03:34.728>help <00:03:34.845>our <00:03:34.961>people <00:03:35.078>in <00:03:35.195>our <00:03:35.311>industry <00:03:35.428>help <00:03:35.545>help

72
00:03:39.005 --> 00:03:42.045
<00:03:39.005>them <00:03:39.132>to <00:03:39.259>not <00:03:39.386>make <00:03:39.514>the <00:03:39.641>mistakes <00:03:39.768>that <00:03:39.895>I <00:03:40.023>did <00:03:40.150>in <00:03:40.277>the <00:03:40.405>past.

73
00:03:42.715 --> 00:03:43.925
<00:03:42.715>Like, <00:03:43.259>for <00:03:43.804>example,

74
00:03:44.185 --> 00:03:47.445
<00:03:44.185>create <00:03:44.385>a <00:03:44.585>design <00:03:44.785>system <00:03:44.985>without <00:03:45.185>any <00:03:45.385>formal <00:03:45.585>feedback.

75
00:03:47.745 --> 00:03:51.005
<00:03:47.745>And <00:03:47.872>at <00:03:47.999>the <00:03:48.126>end <00:03:48.254>of <00:03:48.381>the <00:03:48.508>day, <00:03:48.635>had <00:03:48.763>a <00:03:48.890>beautiful <00:03:49.017>design <00:03:49.145>system

76
00:03:51.005 --> 00:03:55.045
<00:03:51.005>with <00:03:51.180>a <00:03:51.355>large <00:03:51.530>component <00:03:51.704>library <00:03:51.880>that <00:03:52.055>did <00:03:52.230>exactly <00:03:52.405>95%

77
00:03:55.045 --> 00:03:58.245
<00:03:55.045>of <00:03:55.200>the <00:03:55.356>things <00:03:55.511>that <00:03:55.667>people <00:03:55.822>that <00:03:55.978>used <00:03:56.133>it <00:03:56.289>were <00:03:56.445>expecting,

78
00:03:58.425 --> 00:03:59.805
<00:03:58.425>but <00:03:58.839>it <00:03:59.253>lost <00:03:59.667>5%.

79
00:04:00.155 --> 00:04:03.085
<00:04:00.155>Well, <00:04:00.330>that <00:04:00.505>took <00:04:00.680>a <00:04:00.855>little <00:04:01.030>bit <00:04:01.205>more <00:04:01.380>extra <00:04:01.555>time.

80
00:04:03.945 --> 00:04:07.575
<00:04:03.945>And <00:04:04.178>yes, <00:04:04.411>clippy, <00:04:04.644>we <00:04:04.878>shall <00:04:05.111>move <00:04:05.345>on.

81
00:04:08.235 --> 00:04:10.735
<00:04:08.235>So <00:04:08.362>for <00:04:08.489>today, <00:04:08.616>what <00:04:08.744>I <00:04:08.871>want <00:04:08.998>to <00:04:09.125>talk <00:04:09.253>about <00:04:09.380>is <00:04:09.507>the <00:04:09.635>first

82
00:04:10.835 --> 00:04:13.455
<00:04:10.835>and <00:04:11.115>most <00:04:11.395>important <00:04:11.675>thing <00:04:11.955>I <00:04:12.235>think

83
00:04:15.355 --> 00:04:17.785
<00:04:15.355>while <00:04:15.554>we <00:04:15.755>are <00:04:15.954>working <00:04:16.154>with <00:04:16.354>people <00:04:16.555>is <00:04:16.755>communication

84
00:04:18.495 --> 00:04:20.585
<00:04:18.495>because <00:04:19.195>we <00:04:19.894>need

85
00:04:20.585 --> 00:04:23.545
<00:04:20.584>to <00:04:20.818>communicate <00:04:21.051>our <00:04:21.284>needs <00:04:21.518>and <00:04:21.751>our <00:04:21.984>thoughts.

86
00:04:25.305 --> 00:04:28.235
<00:04:25.305>Then <00:04:25.460>I <00:04:25.616>wanna <00:04:25.771>briefly <00:04:25.927>touch <00:04:26.082>upon <00:04:26.238>the, <00:04:26.393>the, <00:04:26.549>the <00:04:26.705>principle

87
00:04:28.255 --> 00:04:30.395
<00:04:28.255>of <00:04:28.605>a <00:04:28.955>design <00:04:29.305>first <00:04:29.655>approach.

88
00:04:30.695 --> 00:04:34.835
<00:04:30.695>So <00:04:30.850>instead <00:04:31.006>of <00:04:31.161>diving <00:04:31.317>into <00:04:31.472>the <00:04:31.628>code, <00:04:31.783>will <00:04:31.939>think <00:04:32.094>about

89
00:04:34.835 --> 00:04:37.395
<00:04:34.835>what <00:04:35.010>we <00:04:35.185>want <00:04:35.359>to <00:04:35.534>be <00:04:35.710>build <00:04:35.885>before <00:04:36.060>we <00:04:36.234>start.

90
00:04:39.025 --> 00:04:42.275
<00:04:39.025>Then <00:04:39.180>of <00:04:39.336>course <00:04:39.491>I <00:04:39.647>need <00:04:39.802>to <00:04:39.958>touch <00:04:40.113>upon <00:04:40.269>web <00:04:40.424>components,

91
00:04:42.575 --> 00:04:45.275
<00:04:42.575>or <00:04:42.702>I <00:04:42.829>say, <00:04:42.956>of <00:04:43.084>course, <00:04:43.211>I'll <00:04:43.338>get <00:04:43.465>there <00:04:43.593>when <00:04:43.720>I <00:04:43.847>get <00:04:43.974>there.

92
00:04:45.375 --> 00:04:49.035
<00:04:45.375>But <00:04:45.515>trust <00:04:45.655>me, <00:04:45.795>web <00:04:45.935>components <00:04:46.075>are, <00:04:46.215>for <00:04:46.355>me, <00:04:46.495>a <00:04:46.635>big <00:04:46.775>part

93
00:04:49.095 --> 00:04:50.675
<00:04:49.095>of <00:04:49.795>UI <00:04:50.495>creation.

94
00:04:52.255 --> 00:04:54.835
<00:04:52.255>And <00:04:52.430>because <00:04:52.605>we're <00:04:52.780>going <00:04:52.955>to <00:04:53.130>talk <00:04:53.305>about <00:04:53.480>web <00:04:53.655>components,

95
00:04:54.995 --> 00:04:57.075
<00:04:54.995>I <00:04:55.135>also <00:04:55.275>want <00:04:55.415>to <00:04:55.555>talk <00:04:55.695>about <00:04:55.835>the <00:04:55.975>thing <00:04:56.115>called <00:04:56.255>the <00:04:56.395>custom

96
00:04:57.115 --> 00:04:58.275
<00:04:57.115>elements <00:04:58.159>manifest.

97
00:04:58.535 --> 00:05:02.555
<00:04:58.534>And <00:04:58.768>that's, <00:04:59.001>that's, <00:04:59.234>well, <00:04:59.468>that's <00:04:59.701>actually <00:04:59.934>the,

98
00:05:02.855 --> 00:05:04.275
<00:05:02.855>the <00:05:03.174>main <00:05:03.494>course <00:05:03.813>for <00:05:04.133>today.

99
00:05:05.495 --> 00:05:08.875
<00:05:05.495>And <00:05:05.635>I <00:05:05.775>end <00:05:05.915>with <00:05:06.055>something <00:05:06.195>that, <00:05:06.335>well, <00:05:06.475>I'm <00:05:06.615>not <00:05:06.755>entirely <00:05:06.895>sure

100
00:05:08.895 --> 00:05:10.115
<00:05:08.895>how <00:05:09.169>I <00:05:09.444>should <00:05:09.718>pronounce <00:05:09.993>it,

101
00:05:10.175 --> 00:05:13.755
<00:05:10.175>but <00:05:10.375>let's <00:05:10.575>call <00:05:10.775>it <00:05:10.975>a <00:05:11.175>we'll <00:05:11.375>get <00:05:11.575>there.

102
00:05:14.135 --> 00:05:16.635
<00:05:14.135>So <00:05:14.335>communication <00:05:14.534>first, <00:05:14.735>that's <00:05:14.935>the <00:05:15.135>most <00:05:15.335>important <00:05:15.534>thing.

103
00:05:16.855 --> 00:05:20.315
<00:05:16.855>And <00:05:16.995>actually <00:05:17.135>while <00:05:17.275>we're <00:05:17.415>at <00:05:17.555>it, <00:05:17.695>we're <00:05:17.835>doing <00:05:17.975>it <00:05:18.115>right <00:05:18.255>now,

104
00:05:21.575 --> 00:05:24.195
<00:05:21.575>and <00:05:21.750>we're <00:05:21.925>communicating <00:05:22.099>in <00:05:22.275>a <00:05:22.450>form <00:05:22.625>where <00:05:22.800>I <00:05:22.974>am

105
00:05:26.265 --> 00:05:30.895
<00:05:26.265>describing <00:05:26.420>a <00:05:26.576>thought <00:05:26.731>process <00:05:26.887>and <00:05:27.042>you <00:05:27.198>are <00:05:27.353>listening <00:05:27.509>to <00:05:27.664>it.

106
00:05:31.965 --> 00:05:35.785
<00:05:31.965>And <00:05:32.072>the, <00:05:32.180>and <00:05:32.288>the <00:05:32.395>reason <00:05:32.503>why <00:05:32.611>we <00:05:32.718>can <00:05:32.826>do <00:05:32.934>this <00:05:33.041>is <00:05:33.149>we <00:05:33.257>have <00:05:33.364>a

107
00:05:35.945 --> 00:05:37.065
<00:05:35.945>contract <00:05:36.449>in <00:05:36.953>between,

108
00:05:37.085 --> 00:05:39.345
<00:05:37.085>and <00:05:37.260>that <00:05:37.435>contract <00:05:37.609>is <00:05:37.784>called, <00:05:37.960>in <00:05:38.135>this <00:05:38.310>case, <00:05:38.484>English.

109
00:05:40.935 --> 00:05:42.465
<00:05:40.935>I've <00:05:41.210>learned <00:05:41.485>English <00:05:41.761>in <00:05:42.036>high <00:05:42.312>school.

110
00:05:42.885 --> 00:05:45.225
<00:05:42.885>And <00:05:43.060>because <00:05:43.235>I <00:05:43.409>know <00:05:43.585>the <00:05:43.760>basic <00:05:43.935>rules <00:05:44.110>of <00:05:44.284>English,

111
00:05:45.665 --> 00:05:49.465
<00:05:45.665>although <00:05:45.805>it's <00:05:45.945>not <00:05:46.085>my <00:05:46.225>native <00:05:46.365>language, <00:05:46.505>I <00:05:46.645>know <00:05:46.785>that <00:05:46.925>I <00:05:47.065>can

112
00:05:50.045 --> 00:05:54.185
<00:05:50.045>at <00:05:50.200>least <00:05:50.356>try <00:05:50.511>to <00:05:50.667>communicate <00:05:50.822>my <00:05:50.978>thought <00:05:51.133>process <00:05:51.289>to <00:05:51.445>you.

113
00:05:55.805 --> 00:05:57.025
<00:05:55.805>You <00:05:56.171>have <00:05:56.537>learned <00:05:56.902>English

114
00:05:57.185 --> 00:05:59.365
<00:05:57.185>Either <00:05:57.465>because <00:05:57.745>it's <00:05:58.025>your <00:05:58.305>native <00:05:58.585>language

115
00:05:59.425 --> 00:06:02.045
<00:05:59.425>or <00:05:59.552>you <00:05:59.679>learn <00:05:59.806>it <00:05:59.934>in <00:06:00.061>school, <00:06:00.188>or <00:06:00.315>you <00:06:00.443>learned <00:06:00.570>it <00:06:00.697>somewhere <00:06:00.825>else,

116
00:06:02.625 --> 00:06:05.645
<00:06:02.625>but <00:06:02.780>you <00:06:02.936>have <00:06:03.091>the <00:06:03.247>ability <00:06:03.402>to <00:06:03.558>understand <00:06:03.713>what <00:06:03.869>I <00:06:04.025>say

117
00:06:05.645 --> 00:06:08.485
<00:06:05.645>because <00:06:05.878>we <00:06:06.111>have <00:06:06.344>made <00:06:06.578>an <00:06:06.811>agreement <00:06:07.044>on

118
00:06:08.485 --> 00:06:10.205
<00:06:08.485>what <00:06:08.951>certain <00:06:09.418>words <00:06:09.885>mean.

119
00:06:11.735 --> 00:06:13.075
<00:06:11.735>The <00:06:12.036>same <00:06:12.338>goes <00:06:12.639>for <00:06:12.941>computers.

120
00:06:14.585 --> 00:06:16.475
<00:06:14.585>Here, <00:06:14.818>the <00:06:15.051>contract <00:06:15.284>is <00:06:15.518>called <00:06:15.751>an <00:06:15.984>API,

121
00:06:16.575 --> 00:06:21.385
<00:06:16.575>an <00:06:16.775>application <00:06:16.974>programmer <00:06:17.175>interface, <00:06:17.375>where <00:06:17.575>in <00:06:17.775>a <00:06:17.974>document

122
00:06:21.685 --> 00:06:24.985
<00:06:21.685>or <00:06:21.885>in <00:06:22.085>code <00:06:22.285>it <00:06:22.485>is <00:06:22.685>described <00:06:22.885>how <00:06:23.085>to

123
00:06:25.685 --> 00:06:29.705
<00:06:25.685>get <00:06:25.801>data <00:06:25.918>from <00:06:26.035>a <00:06:26.151>server <00:06:26.268>or <00:06:26.385>how <00:06:26.501>to <00:06:26.618>send <00:06:26.735>data <00:06:26.851>from <00:06:26.968>a <00:06:27.085>server.

124
00:06:30.415 --> 00:06:33.345
<00:06:30.415>Depending <00:06:30.570>on <00:06:30.726>where <00:06:30.881>you <00:06:31.037>are, <00:06:31.192>either <00:06:31.348>as <00:06:31.503>a <00:06:31.659>front-end <00:06:31.815>developer

125
00:06:33.365 --> 00:06:34.385
<00:06:33.365>or <00:06:33.671>a <00:06:33.977>backend <00:06:34.283>developer

126
00:06:34.445 --> 00:06:36.705
<00:06:34.445>or <00:06:34.678>a <00:06:34.911>full <00:06:35.145>sect <00:06:35.378>developer, <00:06:35.611>you <00:06:35.844>need

127
00:06:36.705 --> 00:06:38.865
<00:06:36.705>to <00:06:36.938>know <00:06:37.171>about <00:06:37.405>a <00:06:37.638>contract <00:06:37.871>in <00:06:38.104>order

128
00:06:38.925 --> 00:06:41.105
<00:06:38.925>to <00:06:39.391>understand <00:06:39.858>your <00:06:40.325>constraints.

129
00:06:42.205 --> 00:06:45.625
<00:06:42.205>If <00:06:42.360>my <00:06:42.516>contract <00:06:42.671>says <00:06:42.827>you <00:06:42.982>need <00:06:43.138>to <00:06:43.293>send <00:06:43.449>a <00:06:43.604>number,

130
00:06:46.405 --> 00:06:49.145
<00:06:46.405>and <00:06:46.604>I <00:06:46.804>sent <00:06:47.005>a <00:06:47.205>string, <00:06:47.405>I <00:06:47.604>can <00:06:47.804>understand

131
00:06:50.665 --> 00:06:54.605
<00:06:50.665>mostly <00:06:50.840>afterwards, <00:06:51.015>but <00:06:51.190>I <00:06:51.365>can <00:06:51.540>understand <00:06:51.715>why <00:06:51.890>it <00:06:52.065>failed

132
00:06:54.755 --> 00:06:57.125
<00:06:54.755>because <00:06:54.988>I <00:06:55.221>didn't <00:06:55.455>adhere <00:06:55.688>to <00:06:55.921>the <00:06:56.155>contract.

133
00:06:57.665 --> 00:06:59.365
<00:06:57.665>But <00:06:57.865>if <00:06:58.065>I <00:06:58.265>do <00:06:58.465>adhere <00:06:58.665>to <00:06:58.865>the <00:06:59.065>contract

134
00:06:59.365 --> 00:07:03.285
<00:06:59.365>and <00:06:59.520>it <00:06:59.676>still <00:06:59.831>fails, <00:06:59.987>I, <00:07:00.142>I <00:07:00.298>can <00:07:00.453>probably <00:07:00.609>safely <00:07:00.765>assume

135
00:07:03.315 --> 00:07:06.765
<00:07:03.315>that <00:07:03.490>it's <00:07:03.665>either <00:07:03.840>a <00:07:04.015>failure <00:07:04.190>of <00:07:04.365>the <00:07:04.540>receiving <00:07:04.715>system

136
00:07:07.735 --> 00:07:08.875
<00:07:07.735>or <00:07:08.077>the <00:07:08.419>contract <00:07:08.761>itself.

137
00:07:11.335 --> 00:07:12.435
<00:07:11.335>And <00:07:11.582>this <00:07:11.830>got <00:07:12.077>me <00:07:12.325>thinking,

138
00:07:12.715 --> 00:07:16.155
<00:07:12.715>'cause <00:07:12.890>this <00:07:13.065>works <00:07:13.239>so <00:07:13.414>well <00:07:13.590>for <00:07:13.765>so <00:07:13.940>many <00:07:14.114>systems,

139
00:07:17.015 --> 00:07:18.355
<00:07:17.015>and <00:07:17.256>this <00:07:17.497>really <00:07:17.738>got <00:07:17.979>me <00:07:18.221>thinking,

140
00:07:18.355 --> 00:07:20.395
<00:07:18.355>what <00:07:18.555>if <00:07:18.755>we <00:07:18.955>do <00:07:19.155>the <00:07:19.355>exact <00:07:19.555>same <00:07:19.755>thing

141
00:07:21.275 --> 00:07:24.245
<00:07:21.275>when <00:07:21.414>we <00:07:21.554>are <00:07:21.695>using <00:07:21.835>on <00:07:21.974>the <00:07:22.114>one <00:07:22.255>hand <00:07:22.395>side <00:07:22.534>a <00:07:22.674>website,

142
00:07:24.245 --> 00:07:26.885
<00:07:24.245>and <00:07:24.445>on <00:07:24.645>the <00:07:24.845>other <00:07:25.045>hand <00:07:25.245>a <00:07:25.445>design <00:07:25.645>system

143
00:07:27.105 --> 00:07:29.605
<00:07:27.105>or <00:07:27.245>a <00:07:27.385>component <00:07:27.525>library, <00:07:27.665>which <00:07:27.805>is <00:07:27.945>part <00:07:28.085>of <00:07:28.225>a <00:07:28.365>design <00:07:28.505>system.

144
00:07:30.735 --> 00:07:32.475
<00:07:30.735>If <00:07:30.968>we <00:07:31.201>have <00:07:31.435>all <00:07:31.668>those <00:07:31.901>different <00:07:32.135>components,

145
00:07:32.775 --> 00:07:34.835
<00:07:32.775>all <00:07:33.008>those <00:07:33.241>different <00:07:33.474>Lego <00:07:33.708>blocks, <00:07:33.941>that <00:07:34.174>with,

146
00:07:34.865 --> 00:07:37.155
<00:07:34.865>with <00:07:35.098>which <00:07:35.331>we <00:07:35.565>can <00:07:35.798>build <00:07:36.031>the <00:07:36.265>website,

147
00:07:38.055 --> 00:07:39.915
<00:07:38.055>can <00:07:38.230>we <00:07:38.405>actually <00:07:38.580>build <00:07:38.755>the <00:07:38.930>website <00:07:39.105>that <00:07:39.280>we <00:07:39.455>need

148
00:07:40.095 --> 00:07:41.715
<00:07:40.095>or <00:07:40.328>the <00:07:40.561>web <00:07:40.795>application <00:07:41.028>that <00:07:41.261>we <00:07:41.495>need?

149
00:07:42.495 --> 00:07:45.065
<00:07:42.495>And <00:07:42.728>for <00:07:42.961>this, <00:07:43.195>well, <00:07:43.428>you <00:07:43.661>actually, <00:07:43.895>you,

150
00:07:45.125 --> 00:07:47.665
<00:07:45.125>you <00:07:45.358>have <00:07:45.591>multiple <00:07:45.825>approaches <00:07:46.058>to <00:07:46.291>do <00:07:46.525>to

151
00:07:47.685 --> 00:07:48.905
<00:07:47.685>to, <00:07:47.904>to <00:07:48.124>get <00:07:48.343>to <00:07:48.563>this <00:07:48.782>contract.

152
00:07:49.405 --> 00:07:51.945
<00:07:49.405>So <00:07:49.512>one <00:07:49.620>of <00:07:49.728>the <00:07:49.835>things <00:07:49.943>that <00:07:50.051>you <00:07:50.158>can <00:07:50.266>do <00:07:50.374>is <00:07:50.481>you <00:07:50.589>can <00:07:50.697>write <00:07:50.804>your

153
00:07:52.015 --> 00:07:55.305
<00:07:52.015>component, <00:07:52.190>uh, <00:07:52.365>and <00:07:52.539>make <00:07:52.715>it <00:07:52.890>part <00:07:53.065>of <00:07:53.240>the <00:07:53.414>contract.

154
00:07:56.835 --> 00:08:00.375
<00:07:56.835>Sounds <00:07:56.990>legit. <00:07:57.146>The <00:07:57.301>other <00:07:57.457>thing <00:07:57.612>that <00:07:57.768>you <00:07:57.923>can <00:07:58.079>do, <00:07:58.234>uh,

155
00:08:00.555 --> 00:08:01.655
<00:08:00.555>is <00:08:00.885>called <00:08:01.215>design <00:08:01.544>first.

156
00:08:02.065 --> 00:08:06.015
<00:08:02.065>Where <00:08:02.265>instead <00:08:02.465>of <00:08:02.665>starting <00:08:02.865>with <00:08:03.065>building <00:08:03.265>something, <00:08:03.465>you,

157
00:08:06.235 --> 00:08:07.695
<00:08:06.235>you <00:08:06.497>get <00:08:06.760>all <00:08:07.023>the <00:08:07.286>stakeholders <00:08:07.549>together

158
00:08:08.315 --> 00:08:11.975
<00:08:08.315>and <00:08:08.442>you, <00:08:08.569>you <00:08:08.696>tell <00:08:08.824>them, <00:08:08.951>this <00:08:09.078>is <00:08:09.205>what <00:08:09.333>we're <00:08:09.460>going <00:08:09.587>to <00:08:09.715>do

159
00:08:12.155 --> 00:08:14.215
<00:08:12.155>or <00:08:12.330>what <00:08:12.505>we <00:08:12.679>want <00:08:12.854>to <00:08:13.030>do, <00:08:13.205>we <00:08:13.380>are <00:08:13.554>going

160
00:08:14.235 --> 00:08:15.975
<00:08:14.235>to <00:08:14.585>develop <00:08:14.935>a <00:08:15.285>date <00:08:15.635>picker.

161
00:08:17.115 --> 00:08:19.775
<00:08:17.115>So <00:08:17.270>that <00:08:17.426>means <00:08:17.581>that <00:08:17.737>the <00:08:17.892>provider <00:08:18.048>of <00:08:18.203>this <00:08:18.359>date <00:08:18.515>picker,

162
00:08:19.875 --> 00:08:23.535
<00:08:19.875>the <00:08:20.075>design <00:08:20.275>system <00:08:20.475>team <00:08:20.675>can <00:08:20.875>share <00:08:21.075>their <00:08:21.275>knowledge

163
00:08:23.535 --> 00:08:25.815
<00:08:23.535>that <00:08:23.735>they <00:08:23.935>already <00:08:24.135>have <00:08:24.335>about <00:08:24.535>the <00:08:24.735>different <00:08:24.935>sub-components

164
00:08:25.815 --> 00:08:27.415
<00:08:25.815>that <00:08:25.990>are <00:08:26.165>part <00:08:26.340>of <00:08:26.515>the, <00:08:26.690>of <00:08:26.865>the <00:08:27.040>date <00:08:27.215>picker,

165
00:08:28.835 --> 00:08:30.575
<00:08:28.835>but <00:08:29.301>also <00:08:29.768>the <00:08:30.234>consumers.

166
00:08:31.315 --> 00:08:34.455
<00:08:31.315>So <00:08:31.470>in <00:08:31.626>this <00:08:31.781>case, <00:08:31.937>the <00:08:32.092>web <00:08:32.248>team <00:08:32.403>can <00:08:32.559>be <00:08:32.715>involved

167
00:08:34.955 --> 00:08:39.375
<00:08:34.955>and <00:08:35.071>can <00:08:35.188>tell, <00:08:35.305>well, <00:08:35.421>uh, <00:08:35.538>it's <00:08:35.655>nice <00:08:35.771>that, <00:08:35.888>that <00:08:36.005>I <00:08:36.121>need <00:08:36.238>to, <00:08:36.355>uh,

168
00:08:39.375 --> 00:08:42.495
<00:08:39.375>that <00:08:39.502>you <00:08:39.629>want <00:08:39.756>us <00:08:39.884>to <00:08:40.011>send, <00:08:40.138>uh, <00:08:40.265>the <00:08:40.393>date <00:08:40.520>as <00:08:40.647>a <00:08:40.775>string,

169
00:08:42.515 --> 00:08:44.575
<00:08:42.515>but <00:08:42.689>I <00:08:42.865>already <00:08:43.039>have <00:08:43.215>the <00:08:43.390>date <00:08:43.564>as <00:08:43.740>an <00:08:43.914>object.

170
00:08:45.065 --> 00:08:49.735
<00:08:45.065>Maybe <00:08:45.205>we <00:08:45.345>can <00:08:45.485>also <00:08:45.625>implement <00:08:45.765>to <00:08:45.905>send <00:08:46.045>it <00:08:46.185>as <00:08:46.325>an <00:08:46.465>object

171
00:08:49.735 --> 00:08:52.135
<00:08:49.735>because <00:08:49.890>that <00:08:50.046>will <00:08:50.201>mean <00:08:50.357>that <00:08:50.512>I <00:08:50.668>have <00:08:50.823>to <00:08:50.979>do <00:08:51.135>less.

172
00:08:52.875 --> 00:08:54.535
<00:08:52.875>So <00:08:53.341>both <00:08:53.808>the <00:08:54.275>providers

173
00:08:54.535 --> 00:08:56.325
<00:08:54.535>and <00:08:54.814>the <00:08:55.094>consumers <00:08:55.375>of <00:08:55.655>this <00:08:55.935>component

174
00:08:56.345 --> 00:08:59.045
<00:08:56.345>of <00:08:56.520>this <00:08:56.695>UI <00:08:56.870>component <00:08:57.045>can <00:08:57.220>talk <00:08:57.395>with <00:08:57.570>each <00:08:57.745>other

175
00:08:59.345 --> 00:09:03.245
<00:08:59.345>to <00:08:59.500>really <00:08:59.656>think <00:08:59.811>about <00:08:59.967>what, <00:09:00.122>what <00:09:00.278>is <00:09:00.433>the <00:09:00.589>best <00:09:00.745>way

176
00:09:03.305 --> 00:09:05.645
<00:09:03.305>to <00:09:03.584>communicate <00:09:03.864>what <00:09:04.145>is <00:09:04.425>our <00:09:04.704>language,

177
00:09:06.815 --> 00:09:08.755
<00:09:06.815>but <00:09:07.165>also <00:09:07.515>involve <00:09:07.865>the <00:09:08.215>roadmap.

178
00:09:09.135 --> 00:09:11.835
<00:09:09.135>So <00:09:09.310>in <00:09:09.485>this <00:09:09.660>case, <00:09:09.835>the <00:09:10.010>product <00:09:10.185>owners, <00:09:10.360>what <00:09:10.535>if

179
00:09:11.835 --> 00:09:13.675
<00:09:11.835>that <00:09:12.185>date <00:09:12.535>picker <00:09:12.885>indeed <00:09:13.235>needs

180
00:09:13.795 --> 00:09:17.235
<00:09:13.795>to <00:09:13.911>have <00:09:14.028>a <00:09:14.145>range <00:09:14.261>in <00:09:14.378>the <00:09:14.495>next <00:09:14.611>print <00:09:14.728>or <00:09:14.844>in <00:09:14.961>the <00:09:15.078>next <00:09:15.194>pi?

181
00:09:18.055 --> 00:09:20.875
<00:09:18.055>If <00:09:18.210>we <00:09:18.366>already <00:09:18.521>know <00:09:18.677>what's <00:09:18.832>coming <00:09:18.988>up, <00:09:19.143>we <00:09:19.299>can <00:09:19.454>take

182
00:09:20.875 --> 00:09:25.465
<00:09:20.875>that <00:09:21.075>into <00:09:21.275>account <00:09:21.475>all <00:09:21.675>before <00:09:21.875>we <00:09:22.075>start <00:09:22.275>coding.

183
00:09:28.375 --> 00:09:32.075
<00:09:28.375>And <00:09:28.550>if <00:09:28.725>I'm <00:09:28.900>thinking <00:09:29.075>about <00:09:29.250>UI <00:09:29.425>components, <00:09:29.600>I'd <00:09:29.775>love

184
00:09:32.075 --> 00:09:35.195
<00:09:32.075>to <00:09:32.355>have <00:09:32.635>them <00:09:32.915>framework <00:09:33.195>agnostic, <00:09:33.475>independent

185
00:09:35.255 --> 00:09:36.355
<00:09:35.255>of <00:09:35.750>any <00:09:36.245>framework.

186
00:09:37.935 --> 00:09:41.955
<00:09:37.935>If <00:09:38.074>I'm <00:09:38.214>going <00:09:38.354>to <00:09:38.494>start <00:09:38.635>a <00:09:38.775>new <00:09:38.915>UI <00:09:39.055>component <00:09:39.194>in <00:09:39.334>2024,

187
00:09:42.855 --> 00:09:45.755
<00:09:42.855>I'd <00:09:43.030>rather <00:09:43.205>not <00:09:43.380>have <00:09:43.555>a <00:09:43.730>dependency <00:09:43.905>on <00:09:44.080>the <00:09:44.255>React

188
00:09:45.955 --> 00:09:47.155
<00:09:45.955>angular <00:09:46.315>view <00:09:46.675>or <00:09:47.035>whatever.

189
00:09:47.495 --> 00:09:52.195
<00:09:47.495>And <00:09:47.650>the <00:09:47.806>reason <00:09:47.961>is <00:09:48.117>that, <00:09:48.272>that <00:09:48.428>what <00:09:48.583>if <00:09:48.739>in <00:09:48.895>the,

190
00:09:52.255 --> 00:09:57.015
<00:09:52.255>in <00:09:52.430>the <00:09:52.605>near <00:09:52.780>future <00:09:52.955>we <00:09:53.130>don't <00:09:53.305>use <00:09:53.480>React, <00:09:53.655>angular

191
00:09:57.035 --> 00:09:59.175
<00:09:57.035>or <00:09:57.268>View <00:09:57.501>anymore, <00:09:57.735>but <00:09:57.968>we <00:09:58.201>still <00:09:58.435>want

192
00:09:59.175 --> 00:10:00.895
<00:09:59.175>to <00:09:59.454>use <00:09:59.734>the <00:10:00.015>same <00:10:00.295>UI <00:10:00.574>components.

193
00:10:01.805 --> 00:10:06.145
<00:10:01.805>What <00:10:01.960>if <00:10:02.116>the <00:10:02.271>company <00:10:02.427>decides <00:10:02.582>that <00:10:02.738>we're <00:10:02.893>going <00:10:03.049>to <00:10:03.204>switch?

194
00:10:06.855 --> 00:10:08.985
<00:10:06.855>That <00:10:07.055>will <00:10:07.255>mean <00:10:07.455>that, <00:10:07.655>that, <00:10:07.855>that <00:10:08.055>I <00:10:08.255>need

195
00:10:08.985 --> 00:10:13.065
<00:10:08.985>to <00:10:09.125>rewrite <00:10:09.265>my <00:10:09.405>code <00:10:09.545>base <00:10:09.685>to <00:10:09.825>use <00:10:09.965>the <00:10:10.105>new <00:10:10.245>UI <00:10:10.385>components

196
00:10:13.165 --> 00:10:14.745
<00:10:13.165>or <00:10:13.515>the <00:10:13.865>old <00:10:14.214>UI <00:10:14.564>components.

197
00:10:15.685 --> 00:10:18.745
<00:10:15.685>But <00:10:15.824>if <00:10:15.964>we <00:10:16.104>have <00:10:16.244>a <00:10:16.385>UI <00:10:16.525>component <00:10:16.665>that <00:10:16.805>is <00:10:16.944>framework <00:10:17.084>agnostic,

198
00:10:20.135 --> 00:10:21.345
<00:10:20.135>this <00:10:20.407>wouldn't <00:10:20.679>be <00:10:20.951>the <00:10:21.224>case.

199
00:10:21.725 --> 00:10:22.625
<00:10:21.725>So <00:10:21.995>the <00:10:22.265>business <00:10:22.535>logic,

200
00:10:22.645 --> 00:10:23.865
<00:10:22.645>that's <00:10:23.011>something <00:10:23.377>completely <00:10:23.743>different.

201
00:10:24.965 --> 00:10:29.595
<00:10:24.965>But <00:10:25.105>the <00:10:25.245>UI <00:10:25.385>logic, <00:10:25.525>well, <00:10:25.665>there <00:10:25.805>are <00:10:25.945>tools <00:10:26.085>in <00:10:26.225>the <00:10:26.365>world

202
00:10:29.705 --> 00:10:31.515
<00:10:29.705>that <00:10:29.938>can, <00:10:30.171>that <00:10:30.405>you <00:10:30.638>can <00:10:30.871>use <00:10:31.105>easily

203
00:10:32.385 --> 00:10:33.675
<00:10:32.385>that <00:10:32.771>are <00:10:33.159>framework <00:10:33.545>agnostic.

204
00:10:34.625 --> 00:10:38.205
<00:10:34.625>And <00:10:34.732>one <00:10:34.840>of <00:10:34.948>the <00:10:35.055>things <00:10:35.163>that <00:10:35.271>I <00:10:35.378>saw <00:10:35.486>a <00:10:35.594>few <00:10:35.701>years <00:10:35.809>back <00:10:35.917>is, <00:10:36.025>uh,

205
00:10:38.425 --> 00:10:40.445
<00:10:38.425>an <00:10:38.891>upgrade <00:10:39.358>deadlock, <00:10:39.824>right?

206
00:10:40.585 --> 00:10:43.405
<00:10:40.585>So <00:10:40.785>the, <00:10:40.985>the, <00:10:41.185>the, <00:10:41.385>the <00:10:41.585>design <00:10:41.785>system <00:10:41.985>team

207
00:10:44.065 --> 00:10:48.165
<00:10:44.065>had <00:10:44.220>a <00:10:44.376>dependency <00:10:44.531>on <00:10:44.687>a, <00:10:44.842>on <00:10:44.998>a <00:10:45.153>UI <00:10:45.309>layer <00:10:45.465>framework

208
00:10:48.755 --> 00:10:50.685
<00:10:48.755>written <00:10:49.105>in, <00:10:49.455>in, <00:10:49.805>in <00:10:50.155>React.

209
00:10:51.205 --> 00:10:52.765
<00:10:51.205>I <00:10:51.555>thought <00:10:51.905>it <00:10:52.255>was <00:10:52.605>16

210
00:10:54.035 --> 00:10:56.215
<00:10:54.035>and <00:10:54.268>that <00:10:54.501>was <00:10:54.735>incompatible <00:10:54.968>with <00:10:55.201>React <00:10:55.435>17.

211
00:10:56.215 --> 00:10:59.325
<00:10:56.215>But <00:10:56.415>the <00:10:56.615>application <00:10:56.815>needed <00:10:57.015>to <00:10:57.215>update <00:10:57.415>but <00:10:57.615>couldn't.

212
00:10:59.425 --> 00:11:01.205
<00:10:59.425>If <00:10:59.625>you <00:10:59.824>want <00:11:00.025>to <00:11:00.224>use <00:11:00.425>the <00:11:00.625>UI <00:11:00.824>library,

213
00:11:02.435 --> 00:11:06.685
<00:11:02.435>and <00:11:02.590>it's <00:11:02.746>a, <00:11:02.901>it's <00:11:03.057>a <00:11:03.212>hard <00:11:03.368>sell <00:11:03.523>to <00:11:03.679>tell <00:11:03.834>people

214
00:11:06.795 --> 00:11:08.725
<00:11:06.795>that <00:11:07.074>are <00:11:07.354>not <00:11:07.635>into <00:11:07.915>this <00:11:08.194>industry

215
00:11:09.925 --> 00:11:12.185
<00:11:09.925>why <00:11:10.204>you <00:11:10.484>can't <00:11:10.765>upgrade <00:11:11.045>your <00:11:11.324>application

216
00:11:12.325 --> 00:11:14.825
<00:11:12.325>and <00:11:12.558>why <00:11:12.791>security <00:11:13.025>is <00:11:13.258>becoming <00:11:13.491>a <00:11:13.725>risk.

217
00:11:15.925 --> 00:11:19.425
<00:11:15.925>Should <00:11:16.080>security <00:11:16.236>become <00:11:16.391>a <00:11:16.547>risk <00:11:16.702>due <00:11:16.858>to <00:11:17.013>a <00:11:17.169>UI <00:11:17.324>component?

218
00:11:19.455 --> 00:11:22.345
<00:11:19.455>Well, <00:11:19.735>in <00:11:20.015>my <00:11:20.295>humble <00:11:20.575>opinion, <00:11:20.855>no.

219
00:11:24.715 --> 00:11:26.535
<00:11:24.715>So <00:11:24.915>this <00:11:25.115>is <00:11:25.315>where <00:11:25.515>web <00:11:25.715>components <00:11:25.915>come <00:11:26.115>in

220
00:11:26.615 --> 00:11:27.975
<00:11:26.615>because <00:11:27.023>they <00:11:27.431>are <00:11:27.839>independent

221
00:11:27.975 --> 00:11:30.705
<00:11:27.975>of <00:11:28.208>any <00:11:28.441>framework <00:11:28.675>with <00:11:28.908>a <00:11:29.141>web <00:11:29.375>component.

222
00:11:30.865 --> 00:11:35.185
<00:11:30.865>I <00:11:31.005>have <00:11:31.145>a <00:11:31.285>template <00:11:31.425>where <00:11:31.565>I <00:11:31.705>can <00:11:31.845>write <00:11:31.985>my, <00:11:32.125>well <00:11:32.265>template,

223
00:11:36.125 --> 00:11:40.775
<00:11:36.125>my <00:11:36.252>ui, <00:11:36.379>and <00:11:36.506>in <00:11:36.634>my <00:11:36.761>UI <00:11:36.888>I <00:11:37.015>can <00:11:37.143>define <00:11:37.270>different <00:11:37.397>slots <00:11:37.525>where

224
00:11:41.355 --> 00:11:46.265
<00:11:41.355>you <00:11:41.588>can <00:11:41.821>host, <00:11:42.055>uh, <00:11:42.288>light <00:11:42.521>dome <00:11:42.755>elements

225
00:11:47.175 --> 00:11:49.595
<00:11:47.175>in <00:11:47.641>your <00:11:48.108>encapsulated <00:11:48.574>component.

226
00:11:50.915 --> 00:11:55.555
<00:11:50.915>I <00:11:51.031>have <00:11:51.148>a <00:11:51.265>shadow <00:11:51.381>dome <00:11:51.498>where <00:11:51.615>I <00:11:51.731>can <00:11:51.848>make <00:11:51.964>sure <00:11:52.081>that <00:11:52.198>my <00:11:52.314>style

227
00:11:55.735 --> 00:11:58.595
<00:11:55.735>and <00:11:55.910>my <00:11:56.085>functionality <00:11:56.260>doesn't <00:11:56.435>leak <00:11:56.610>to <00:11:56.785>the <00:11:56.960>outside <00:11:57.135>world,

228
00:11:59.305 --> 00:12:01.795
<00:11:59.305>meaning <00:11:59.584>that <00:11:59.864>I, <00:12:00.145>I'm <00:12:00.425>fully <00:12:00.704>independent,

229
00:12:03.425 --> 00:12:06.965
<00:12:03.425>but <00:12:03.580>I <00:12:03.736>can <00:12:03.891>share <00:12:04.047>my <00:12:04.202>UI <00:12:04.358>components <00:12:04.513>as <00:12:04.669>custom <00:12:04.824>elements.

230
00:12:09.125 --> 00:12:11.105
<00:12:09.125>And <00:12:09.300>the <00:12:09.475>best <00:12:09.650>thing <00:12:09.825>is <00:12:10.000>a <00:12:10.175>web <00:12:10.350>component <00:12:10.525>is

231
00:12:11.105 --> 00:12:12.225
<00:12:11.105>a <00:12:11.306>part <00:12:11.508>of <00:12:11.709>the <00:12:11.911>web <00:12:12.113>platform.

232
00:12:12.965 --> 00:12:16.105
<00:12:12.965>The <00:12:13.120>web <00:12:13.276>platform, <00:12:13.431>if <00:12:13.587>that's <00:12:13.742>the <00:12:13.898>goal <00:12:14.053>of <00:12:14.209>my <00:12:14.365>application,

233
00:12:16.435 --> 00:12:18.025
<00:12:16.435>means <00:12:16.785>that <00:12:17.135>it <00:12:17.484>runs <00:12:17.834>anywhere.

234
00:12:18.625 --> 00:12:20.665
<00:12:18.625>I <00:12:18.800>don't <00:12:18.975>need <00:12:19.150>to <00:12:19.325>install <00:12:19.500>anything <00:12:19.675>to <00:12:19.850>be <00:12:20.025>able

235
00:12:20.665 --> 00:12:21.745
<00:12:20.665>to <00:12:20.908>use <00:12:21.151>a <00:12:21.394>web <00:12:21.637>component.

236
00:12:23.205 --> 00:12:27.815
<00:12:23.205>So <00:12:23.405>with <00:12:23.605>web <00:12:23.805>components <00:12:24.005>that <00:12:24.205>look <00:12:24.405>like, <00:12:24.605>uh,

237
00:12:27.815 --> 00:12:32.475
<00:12:27.815>this <00:12:27.955>online <00:12:28.095>four, <00:12:28.235>so <00:12:28.375>it <00:12:28.515>always <00:12:28.655>has <00:12:28.795>a <00:12:28.935>dash, <00:12:29.075>that's <00:12:29.215>that,

238
00:12:32.475 --> 00:12:34.715
<00:12:32.475>that's <00:12:32.708>rule <00:12:32.941>number <00:12:33.175>one <00:12:33.408>for <00:12:33.641>web <00:12:33.875>components.

239
00:12:35.175 --> 00:12:37.755
<00:12:35.175>The, <00:12:35.349>uh, <00:12:35.525>a <00:12:35.699>custom <00:12:35.875>element <00:12:36.050>always <00:12:36.224>has <00:12:36.400>a <00:12:36.574>dash.

240
00:12:38.495 --> 00:12:39.915
<00:12:38.495>So <00:12:38.921>hello <00:12:39.347>dash <00:12:39.772>world.

241
00:12:40.975 --> 00:12:43.435
<00:12:40.975>And <00:12:41.150>in <00:12:41.325>this <00:12:41.500>example, <00:12:41.675>I've <00:12:41.850>also <00:12:42.025>added <00:12:42.200>a <00:12:42.375>property,

242
00:12:44.015 --> 00:12:48.395
<00:12:44.015>and <00:12:44.142>this <00:12:44.269>is, <00:12:44.396>this <00:12:44.524>is <00:12:44.651>how <00:12:44.778>HTML <00:12:44.905>has <00:12:45.033>worked <00:12:45.160>since <00:12:45.287>the <00:12:45.415>start.

243
00:12:49.415 --> 00:12:51.355
<00:12:49.415>And <00:12:49.648>that's <00:12:49.881>also <00:12:50.115>very <00:12:50.348>good <00:12:50.581>to <00:12:50.814>remember

244
00:12:51.355 --> 00:12:54.395
<00:12:51.355>because <00:12:51.555>if <00:12:51.755>we <00:12:51.955>look <00:12:52.155>at <00:12:52.355>the <00:12:52.555>web, <00:12:52.755>API

245
00:12:54.455 --> 00:12:57.835
<00:12:54.455>or <00:12:54.630>a <00:12:54.805>web <00:12:54.980>components, <00:12:55.155>API <00:12:55.330>in <00:12:55.505>particular, <00:12:55.680>we <00:12:55.855>see

246
00:12:57.835 --> 00:13:01.725
<00:12:57.835>that <00:12:58.068>we <00:12:58.301>have <00:12:58.535>properties <00:12:58.768>or <00:12:59.001>input, <00:12:59.235>right?

247
00:13:01.725 --> 00:13:06.565
<00:13:01.725>So <00:13:01.852>I <00:13:01.979>provide <00:13:02.106>data, <00:13:02.234>I <00:13:02.361>have <00:13:02.488>events <00:13:02.615>that <00:13:02.743>I <00:13:02.870>can <00:13:02.997>listen <00:13:03.125>to

248
00:13:06.595 --> 00:13:11.025
<00:13:06.595>that <00:13:06.795>where <00:13:06.995>I <00:13:07.195>receive <00:13:07.395>data <00:13:07.595>or <00:13:07.795>updated <00:13:07.995>data.

249
00:13:11.455 --> 00:13:14.625
<00:13:11.455>This, <00:13:11.582>this <00:13:11.709>is <00:13:11.836>from <00:13:11.964>a, <00:13:12.091>from <00:13:12.218>the <00:13:12.345>perspective <00:13:12.473>of <00:13:12.600>the <00:13:12.727>web <00:13:12.855>team,

250
00:13:15.135 --> 00:13:19.185
<00:13:15.135>from <00:13:15.310>the <00:13:15.485>perspective <00:13:15.660>of <00:13:15.835>the <00:13:16.010>uh, <00:13:16.185>UI <00:13:16.360>component <00:13:16.535>team,

251
00:13:20.325 --> 00:13:22.105
<00:13:20.325>you <00:13:20.675>get <00:13:21.025>properties <00:13:21.375>as <00:13:21.725>input

252
00:13:22.105 --> 00:13:24.865
<00:13:22.105>and <00:13:22.245>you <00:13:22.385>need <00:13:22.525>to <00:13:22.665>send <00:13:22.805>out <00:13:22.945>events <00:13:23.085>in <00:13:23.225>case <00:13:23.365>something <00:13:23.505>happens

253
00:13:25.055 --> 00:13:26.465
<00:13:25.055>that <00:13:25.308>they <00:13:25.562>need <00:13:25.816>to <00:13:26.070>act <00:13:26.324>on.

254
00:13:28.385 --> 00:13:30.845
<00:13:28.385>You <00:13:28.540>get <00:13:28.696>the <00:13:28.851>slots <00:13:29.007>for <00:13:29.162>the <00:13:29.318>placement <00:13:29.473>within <00:13:29.629>the <00:13:29.785>component.

255
00:13:30.905 --> 00:13:33.485
<00:13:30.905>So <00:13:31.032>if <00:13:31.159>you <00:13:31.286>want <00:13:31.414>to <00:13:31.541>have <00:13:31.668>a <00:13:31.795>specific <00:13:31.923>header <00:13:32.050>in <00:13:32.177>your <00:13:32.305>date

256
00:13:33.485 --> 00:13:35.925
<00:13:33.485>picker, <00:13:33.685>you <00:13:33.885>can, <00:13:34.085>you <00:13:34.285>can <00:13:34.485>add <00:13:34.685>a <00:13:34.885>slot

257
00:13:36.435 --> 00:13:38.605
<00:13:36.435>that <00:13:36.714>says <00:13:36.994>slot <00:13:37.275>name <00:13:37.555>is <00:13:37.834>header,

258
00:13:38.745 --> 00:13:41.005
<00:13:38.745>and <00:13:39.025>the <00:13:39.305>web <00:13:39.585>team <00:13:39.865>can <00:13:40.145>add

259
00:13:41.005 --> 00:13:43.405
<00:13:41.005>that <00:13:41.205>header <00:13:41.405>themselves <00:13:41.605>while <00:13:41.805>you <00:13:42.005>are <00:13:42.205>in <00:13:42.405>control

260
00:13:43.865 --> 00:13:46.205
<00:13:43.865>of <00:13:44.098>the <00:13:44.331>placement <00:13:44.565>within <00:13:44.798>the <00:13:45.031>web <00:13:45.265>component.

261
00:13:47.675 --> 00:13:48.855
<00:13:47.675>And <00:13:48.206>using <00:13:48.737>CSS

262
00:13:48.855 --> 00:13:50.055
<00:13:48.855>and <00:13:49.395>CSS <00:13:49.935>variables,

263
00:13:50.055 --> 00:13:53.535
<00:13:50.055>we <00:13:50.182>have <00:13:50.309>all <00:13:50.436>the <00:13:50.564>control <00:13:50.691>we <00:13:50.818>need <00:13:50.945>over <00:13:51.073>the <00:13:51.200>styling <00:13:51.327>of <00:13:51.454>both

264
00:13:54.365 --> 00:13:57.425
<00:13:54.365>the <00:13:54.645>component, <00:13:54.925>but <00:13:55.205>also <00:13:55.485>making <00:13:55.765>sure

265
00:13:57.455 --> 00:13:59.985
<00:13:57.455>that <00:13:57.630>the <00:13:57.805>styling <00:13:57.980>is <00:13:58.155>only <00:13:58.330>part <00:13:58.505>of <00:13:58.680>the <00:13:58.855>component.

266
00:14:00.045 --> 00:14:02.585
<00:14:00.045>So <00:14:00.172>I <00:14:00.299>don't <00:14:00.426>need <00:14:00.554>to <00:14:00.681>think <00:14:00.808>about <00:14:00.935>the <00:14:01.063>context <00:14:01.190>of <00:14:01.317>the <00:14:01.444>component

267
00:14:03.635 --> 00:14:06.625
<00:14:03.635>while <00:14:03.835>the <00:14:04.035>styling <00:14:04.235>is <00:14:04.435>controlled <00:14:04.635>in <00:14:04.835>the <00:14:05.035>component.

268
00:14:09.855 --> 00:14:14.715
<00:14:09.855>The <00:14:09.995>custom <00:14:10.135>elements <00:14:10.275>manifest <00:14:10.415>is <00:14:10.555>a <00:14:10.695>way <00:14:10.835>of <00:14:10.975>describing <00:14:11.115>the <00:14:11.255>API

269
00:14:14.715 --> 00:14:18.495
<00:14:14.715>of <00:14:14.855>a <00:14:14.995>web <00:14:15.135>component, <00:14:15.275>and <00:14:15.415>that's <00:14:15.555>the, <00:14:15.695>there <00:14:15.835>are <00:14:15.975>many <00:14:16.115>tools

270
00:14:18.495 --> 00:14:20.575
<00:14:18.495>that <00:14:18.728>need <00:14:18.961>a <00:14:19.195>machine <00:14:19.428>readable <00:14:19.661>description <00:14:19.895>of

271
00:14:20.575 --> 00:14:21.615
<00:14:20.575>what <00:14:20.809>a <00:14:21.043>custom <00:14:21.277>element <00:14:21.511>is.

272
00:14:22.085 --> 00:14:24.655
<00:14:22.085>Like <00:14:22.365>for <00:14:22.645>example, <00:14:22.925>your <00:14:23.205>documentation <00:14:23.485>viewers,

273
00:14:24.655 --> 00:14:28.575
<00:14:24.655>your <00:14:24.888>design <00:14:25.121>tools, <00:14:25.355>your <00:14:25.588>linkers, <00:14:25.821>your <00:14:26.055>IDs,

274
00:14:29.775 --> 00:14:31.915
<00:14:29.775>and <00:14:30.055>we <00:14:30.334>can <00:14:30.615>help <00:14:30.895>these <00:14:31.175>tools

275
00:14:32.255 --> 00:14:35.235
<00:14:32.255>or <00:14:32.535>we <00:14:32.814>can <00:14:33.095>help <00:14:33.375>these <00:14:33.655>environments

276
00:14:35.455 --> 00:14:38.035
<00:14:35.455>by <00:14:35.688>providing <00:14:35.921>information <00:14:36.155>about <00:14:36.388>our <00:14:36.621>web <00:14:36.855>components.

277
00:14:39.085 --> 00:14:40.905
<00:14:39.085>And <00:14:39.285>the <00:14:39.485>custom <00:14:39.685>elements <00:14:39.885>manifest <00:14:40.085>is <00:14:40.285>an <00:14:40.485>effort

278
00:14:40.905 --> 00:14:44.145
<00:14:40.905>to <00:14:41.060>bring <00:14:41.216>together <00:14:41.371>those <00:14:41.527>tool <00:14:41.682>owners <00:14:41.838>to <00:14:41.993>standardize <00:14:42.149>on <00:14:42.305>a,

279
00:14:44.165 --> 00:14:45.585
<00:14:44.165>on <00:14:44.591>a <00:14:45.017>common <00:14:45.443>specification.

280
00:14:46.565 --> 00:14:49.265
<00:14:46.565>And <00:14:46.740>I <00:14:46.915>think <00:14:47.090>the <00:14:47.265>most <00:14:47.440>important <00:14:47.615>word <00:14:47.790>in <00:14:47.965>this

281
00:14:49.545 --> 00:14:50.665
<00:14:49.545>sentence <00:14:50.049>is <00:14:50.553>standardize.

282
00:14:50.955 --> 00:14:55.035
<00:14:50.955>Because <00:14:51.095>if <00:14:51.235>we <00:14:51.375>can <00:14:51.515>use <00:14:51.655>this <00:14:51.795>standard, <00:14:51.935>we'll <00:14:52.075>get <00:14:52.215>a <00:14:52.355>lot

283
00:14:55.035 --> 00:14:57.075
<00:14:55.035>of <00:14:55.385>things <00:14:55.735>for <00:14:56.084>free, <00:14:56.435>right?

284
00:14:59.115 --> 00:15:01.225
<00:14:59.115>While <00:14:59.395>I <00:14:59.675>was <00:14:59.955>creating <00:15:00.235>this <00:15:00.515>presentation,

285
00:15:04.195 --> 00:15:06.395
<00:15:04.195>I <00:15:04.428>had <00:15:04.661>a, <00:15:04.895>um, <00:15:05.128>a <00:15:05.361>writer's <00:15:05.595>block

286
00:15:06.395 --> 00:15:09.075
<00:15:06.395>because <00:15:06.569>I <00:15:06.745>wanted <00:15:06.920>to <00:15:07.095>do <00:15:07.270>this <00:15:07.444>design <00:15:07.620>first, <00:15:07.795>right?

287
00:15:09.095 --> 00:15:13.555
<00:15:09.095>So <00:15:09.235>think <00:15:09.375>about <00:15:09.515>my <00:15:09.655>API <00:15:09.795>before <00:15:09.935>writing <00:15:10.075>any <00:15:10.215>form <00:15:10.355>of <00:15:10.495>code,

288
00:15:14.435 --> 00:15:17.255
<00:15:14.435>but <00:15:14.574>is <00:15:14.714>that <00:15:14.854>also <00:15:14.994>the <00:15:15.135>way <00:15:15.275>that <00:15:15.415>I <00:15:15.555>want <00:15:15.694>to <00:15:15.834>work?

289
00:15:17.885 --> 00:15:21.655
<00:15:17.885>Because <00:15:18.060>I <00:15:18.235>can <00:15:18.410>either <00:15:18.585>write <00:15:18.760>my <00:15:18.935>custom <00:15:19.110>elements <00:15:19.285>manifest,

290
00:15:21.945 --> 00:15:24.695
<00:15:21.945>which <00:15:22.072>is <00:15:22.199>Jason <00:15:22.326>f <00:15:22.454>I'll <00:15:22.581>show <00:15:22.708>you <00:15:22.835>an <00:15:22.963>example <00:15:23.090>in <00:15:23.217>a <00:15:23.345>minute,

291
00:15:25.555 --> 00:15:27.655
<00:15:25.555>but <00:15:25.729>I <00:15:25.905>can <00:15:26.079>also <00:15:26.255>from <00:15:26.430>the <00:15:26.604>other <00:15:26.780>hand <00:15:26.954>write

292
00:15:27.655 --> 00:15:31.855
<00:15:27.655>what <00:15:27.810>I <00:15:27.966>call <00:15:28.121>a <00:15:28.277>skeleton <00:15:28.432>component <00:15:28.588>that <00:15:28.743>describes <00:15:28.899>the <00:15:29.055>API

293
00:15:31.915 --> 00:15:33.095
<00:15:31.915>but <00:15:32.180>doesn't <00:15:32.446>do <00:15:32.711>anything <00:15:32.977>else.

294
00:15:33.835 --> 00:15:35.935
<00:15:33.835>And <00:15:34.115>then <00:15:34.395>use <00:15:34.675>that <00:15:34.955>skeleton <00:15:35.235>component

295
00:15:36.595 --> 00:15:38.735
<00:15:36.595>to <00:15:36.875>generate <00:15:37.155>the <00:15:37.435>custom <00:15:37.715>elements <00:15:37.995>manifest.

296
00:15:40.715 --> 00:15:42.735
<00:15:40.715>If <00:15:40.915>I <00:15:41.115>write <00:15:41.315>the <00:15:41.515>custom <00:15:41.715>elements <00:15:41.915>manifest <00:15:42.115>first,

297
00:15:43.175 --> 00:15:45.695
<00:15:43.175>I <00:15:43.349>can <00:15:43.525>also <00:15:43.699>generate <00:15:43.875>the <00:15:44.050>web, <00:15:44.224>the <00:15:44.400>skeleton <00:15:44.574>component.

298
00:15:46.755 --> 00:15:48.335
<00:15:46.755>So <00:15:47.221>for <00:15:47.688>this <00:15:48.155>presentation,

299
00:15:48.405 --> 00:15:51.615
<00:15:48.405>because <00:15:48.685>it's <00:15:48.964>visually <00:15:49.245>way <00:15:49.525>more <00:15:49.805>awesome,

300
00:15:52.335 --> 00:15:53.855
<00:15:52.335>I <00:15:52.608>will <00:15:52.882>use <00:15:53.155>the <00:15:53.429>skeleton <00:15:53.703>component,

301
00:15:53.875 --> 00:15:56.415
<00:15:53.875>but <00:15:54.030>if <00:15:54.186>you <00:15:54.341>want <00:15:54.497>to <00:15:54.652>know <00:15:54.808>more <00:15:54.963>about <00:15:55.119>the, <00:15:55.275>the,

302
00:15:56.635 --> 00:15:59.255
<00:15:56.635>the <00:15:56.835>way <00:15:57.035>the <00:15:57.235>custom <00:15:57.435>elements <00:15:57.635>manifest <00:15:57.835>work, <00:15:58.035>well,

303
00:15:59.375 --> 00:16:02.615
<00:15:59.375>I <00:15:59.550>can <00:15:59.725>briefly <00:15:59.900>show <00:16:00.075>you, <00:16:00.250>uh, <00:16:00.425>an <00:16:00.600>an <00:16:00.775>excerpt

304
00:16:02.675 --> 00:16:05.375
<00:16:02.675>of <00:16:02.908>a <00:16:03.141>custom <00:16:03.375>elements <00:16:03.608>manifest <00:16:03.841>where, <00:16:04.074>um,

305
00:16:05.655 --> 00:16:08.575
<00:16:05.655>I <00:16:05.795>have <00:16:05.935>my <00:16:06.074>custom <00:16:06.214>element, <00:16:06.355>uh, <00:16:06.495>my, <00:16:06.635>yeah, <00:16:06.775>my <00:16:06.915>custom <00:16:07.055>element,

306
00:16:08.795 --> 00:16:13.455
<00:16:08.795>uh, <00:16:08.935>hello <00:16:09.074>dash <00:16:09.214>world <00:16:09.354>where <00:16:09.495>I <00:16:09.635>can, <00:16:09.775>um, <00:16:09.915>add <00:16:10.055>for <00:16:10.194>example,

307
00:16:13.715 --> 00:16:15.175
<00:16:13.715>uh, <00:16:14.372>CSS <00:16:15.029>properties.

308
00:16:15.315 --> 00:16:18.215
<00:16:15.315>So <00:16:15.470>I, <00:16:15.626>per <00:16:15.781>property, <00:16:15.937>I <00:16:16.092>need <00:16:16.248>to <00:16:16.403>define <00:16:16.559>my <00:16:16.715>description.

309
00:16:18.755 --> 00:16:21.655
<00:16:18.755>So <00:16:18.910>that's, <00:16:19.066>that's <00:16:19.221>just <00:16:19.377>for <00:16:19.532>us <00:16:19.688>humans <00:16:19.843>that <00:16:19.999>we <00:16:20.155>understand

310
00:16:21.655 --> 00:16:25.095
<00:16:21.655>what <00:16:21.810>it's <00:16:21.966>about, <00:16:22.121>the <00:16:22.277>name <00:16:22.432>or <00:16:22.588>the, <00:16:22.743>the <00:16:22.899>variable <00:16:23.055>itself.

311
00:16:25.755 --> 00:16:28.295
<00:16:25.755>And <00:16:25.988>you <00:16:26.221>can <00:16:26.455>optionally <00:16:26.688>define <00:16:26.921>a <00:16:27.155>default.

312
00:16:29.025 --> 00:16:31.635
<00:16:29.025>What <00:16:29.258>if <00:16:29.491>you <00:16:29.725>don't <00:16:29.958>specify <00:16:30.191>the <00:16:30.425>value?

313
00:16:31.865 --> 00:16:33.115
<00:16:31.865>Well <00:16:32.146>then <00:16:32.427>it's <00:16:32.708>either <00:16:32.990>black

314
00:16:33.115 --> 00:16:34.995
<00:16:33.115>or <00:16:33.465>red, <00:16:33.815>depending <00:16:34.165>on <00:16:34.515>which

315
00:16:35.315 --> 00:16:36.875
<00:16:35.315>CSS <00:16:35.595>variable <00:16:35.875>we <00:16:36.155>were <00:16:36.435>talking <00:16:36.715>about.

316
00:16:38.335 --> 00:16:40.075
<00:16:38.335>The <00:16:38.568>same <00:16:38.801>goes <00:16:39.035>for <00:16:39.268>for <00:16:39.501>the <00:16:39.735>events.

317
00:16:40.375 --> 00:16:42.075
<00:16:40.375>So <00:16:41.075>c, <00:16:41.775>SS

318
00:16:42.575 --> 00:16:45.675
<00:16:42.575>and <00:16:42.855>events, <00:16:43.135>you'll <00:16:43.415>probably <00:16:43.695>guess, <00:16:43.975>yeah,

319
00:16:46.265 --> 00:16:47.475
<00:16:46.265>same <00:16:46.537>goes <00:16:46.809>for <00:16:47.081>the <00:16:47.354>attributes.

320
00:16:47.575 --> 00:16:50.955
<00:16:47.575>So <00:16:47.702>the <00:16:47.829>input, <00:16:47.956>so <00:16:48.084>we <00:16:48.211>can <00:16:48.338>describe <00:16:48.465>both <00:16:48.593>the <00:16:48.720>input, <00:16:48.847>the <00:16:48.975>output,

321
00:16:50.975 --> 00:16:54.835
<00:16:50.975>the <00:16:51.208>slots, <00:16:51.441>everything <00:16:51.675>inside <00:16:51.908>this <00:16:52.141>JSON <00:16:52.375>file,

322
00:16:55.245 --> 00:16:57.115
<00:16:55.245>which <00:16:55.595>is <00:16:55.945>quite <00:16:56.295>human <00:16:56.645>readable,

323
00:16:57.175 --> 00:16:59.075
<00:16:57.175>but <00:16:57.408>it's <00:16:57.641>still <00:16:57.875>quite <00:16:58.108>tedious <00:16:58.341>to <00:16:58.574>work

324
00:16:59.175 --> 00:17:02.195
<00:16:59.175>or <00:16:59.314>to <00:16:59.454>start <00:16:59.594>with, <00:16:59.734>especially <00:16:59.875>if <00:17:00.015>you <00:17:00.155>haven't <00:17:00.295>done <00:17:00.435>it <00:17:00.574>before.

325
00:17:05.115 --> 00:17:06.415
<00:17:05.115>You <00:17:05.348>can <00:17:05.583>also, <00:17:05.817>or <00:17:06.050>what, <00:17:06.284>what,

326
00:17:06.445 --> 00:17:08.935
<00:17:06.444>what <00:17:06.600>is <00:17:06.756>also <00:17:06.911>defined <00:17:07.067>in <00:17:07.222>the <00:17:07.378>custom <00:17:07.533>elements <00:17:07.689>manifest <00:17:07.845>is

327
00:17:09.685 --> 00:17:12.095
<00:17:09.685>what <00:17:09.885>kind <00:17:10.085>of <00:17:10.284>custom <00:17:10.484>element <00:17:10.685>it <00:17:10.885>it <00:17:11.085>is.

328
00:17:12.235 --> 00:17:14.495
<00:17:12.234>So <00:17:12.409>what <00:17:12.584>kind <00:17:12.760>of <00:17:12.935>web <00:17:13.109>component <00:17:13.284>are <00:17:13.459>we <00:17:13.635>talking

329
00:17:14.505 --> 00:17:16.255
<00:17:14.505>about <00:17:14.971>in <00:17:15.438>this <00:17:15.905>case?

330
00:17:16.275 --> 00:17:18.295
<00:17:16.275>And <00:17:16.475>in <00:17:16.675>my <00:17:16.875>examples, <00:17:17.075>I <00:17:17.275>will <00:17:17.475>use <00:17:17.675>lit,

331
00:17:18.355 --> 00:17:22.985
<00:17:18.355>but <00:17:18.510>you <00:17:18.666>can <00:17:18.821>also <00:17:18.977>use <00:17:19.132>other, <00:17:19.288>uh, <00:17:19.443>web <00:17:19.599>component <00:17:19.755>libraries.

332
00:17:25.995 --> 00:17:28.655
<00:17:25.994>But <00:17:26.122>let's <00:17:26.249>talk <00:17:26.376>about <00:17:26.504>a, <00:17:26.631>a <00:17:26.758>skeleton <00:17:26.885>component <00:17:27.013>and <00:17:27.140>what <00:17:27.267>it <00:17:27.395>is

333
00:17:29.435 --> 00:17:30.735
<00:17:29.435>and <00:17:30.020>thanks <00:17:30.605>clippy

334
00:17:31.115 --> 00:17:33.975
<00:17:31.115>and <00:17:31.270>never <00:17:31.426>would've <00:17:31.581>guessed <00:17:31.737>that <00:17:31.892>you <00:17:32.048>don't <00:17:32.203>have <00:17:32.359>any <00:17:32.515>clothes.

335
00:17:34.715 --> 00:17:37.405
<00:17:34.715>Um, <00:17:34.948>let's <00:17:35.181>talk <00:17:35.415>about <00:17:35.648>a <00:17:35.881>skeleton <00:17:36.115>component.

336
00:17:37.405 --> 00:17:38.485
<00:17:37.405>What <00:17:37.648>is <00:17:37.890>a <00:17:38.134>skeleton <00:17:38.377>component?

337
00:17:38.485 --> 00:17:42.885
<00:17:38.485>Well, <00:17:38.685>in <00:17:38.885>my <00:17:39.084>case, <00:17:39.284>a <00:17:39.485>skeleton <00:17:39.685>component <00:17:39.885>defines

338
00:17:43.275 --> 00:17:46.345
<00:17:43.275>what <00:17:43.555>my <00:17:43.835>properties <00:17:44.115>are, <00:17:44.395>my <00:17:44.675>events,

339
00:17:46.885 --> 00:17:48.505
<00:17:46.885>my <00:17:47.235>slots, <00:17:47.585>and <00:17:47.935>my <00:17:48.285>css.

340
00:17:49.805 --> 00:17:53.625
<00:17:49.805>So <00:17:49.945>I <00:17:50.085>get <00:17:50.225>a <00:17:50.365>starting <00:17:50.505>point <00:17:50.645>for, <00:17:50.785>for <00:17:50.925>a <00:17:51.065>web <00:17:51.205>component

341
00:17:53.695 --> 00:17:56.425
<00:17:53.695>that <00:17:53.835>has <00:17:53.975>all <00:17:54.115>the <00:17:54.254>properties, <00:17:54.395>all <00:17:54.534>the <00:17:54.675>events, <00:17:54.814>all <00:17:54.955>the <00:17:55.095>slots

342
00:17:56.425 --> 00:18:00.065
<00:17:56.425>and <00:17:56.552>all <00:17:56.679>the <00:17:56.806>cess <00:17:56.934>variables <00:17:57.061>that <00:17:57.188>I <00:17:57.315>need <00:17:57.443>in <00:17:57.570>order <00:17:57.697>to <00:17:57.825>build

343
00:18:00.245 --> 00:18:01.945
<00:18:00.245>or <00:18:00.711>consume <00:18:01.178>the <00:18:01.645>component.

344
00:18:02.645 --> 00:18:05.505
<00:18:02.645>In <00:18:02.820>other <00:18:02.995>words, <00:18:03.170>I <00:18:03.345>need <00:18:03.520>to <00:18:03.695>define <00:18:03.870>my <00:18:04.045>API.

345
00:18:06.255 --> 00:18:08.875
<00:18:06.255>So <00:18:06.410>what <00:18:06.566>you <00:18:06.721>can <00:18:06.877>do <00:18:07.032>in <00:18:07.188>the <00:18:07.343>custom <00:18:07.499>elements <00:18:07.655>manifest,

346
00:18:10.125 --> 00:18:11.505
<00:18:10.125>we <00:18:10.302>can <00:18:10.479>do <00:18:10.657>that <00:18:10.834>in <00:18:11.012>code <00:18:11.189>as <00:18:11.367>well.

347
00:18:12.005 --> 00:18:15.065
<00:18:12.005>And <00:18:12.132>if <00:18:12.259>we <00:18:12.386>do <00:18:12.514>it <00:18:12.641>in <00:18:12.768>code, <00:18:12.895>well, <00:18:13.023>the <00:18:13.150>most <00:18:13.277>important <00:18:13.405>things

348
00:18:15.065 --> 00:18:16.305
<00:18:15.065>that <00:18:15.344>I <00:18:15.623>will <00:18:15.902>highlight <00:18:16.181>here,

349
00:18:16.445 --> 00:18:18.185
<00:18:16.445>and <00:18:16.678>like <00:18:16.911>I've <00:18:17.145>said, <00:18:17.378>I'm <00:18:17.611>using <00:18:17.845>lit,

350
00:18:18.185 --> 00:18:19.465
<00:18:18.185>but <00:18:18.377>you <00:18:18.569>can <00:18:18.761>also <00:18:18.953>use <00:18:19.145>something <00:18:19.337>else.

351
00:18:20.205 --> 00:18:23.345
<00:18:20.205>Um, <00:18:20.321>if <00:18:20.438>we're <00:18:20.554>using <00:18:20.671>lit <00:18:20.788>and <00:18:20.905>you <00:18:21.021>want <00:18:21.138>to <00:18:21.254>know <00:18:21.371>more <00:18:21.488>about <00:18:21.605>lit

352
00:18:23.365 --> 00:18:27.585
<00:18:23.365>or <00:18:23.520>a <00:18:23.676>lot <00:18:23.831>of <00:18:23.987>great, <00:18:24.142>uh, <00:18:24.298>online <00:18:24.453>resources <00:18:24.609>about <00:18:24.765>that,

353
00:18:27.685 --> 00:18:29.305
<00:18:27.685>I'm <00:18:28.034>not <00:18:28.385>going <00:18:28.735>into <00:18:29.085>how

354
00:18:29.305 --> 00:18:30.865
<00:18:29.305>to <00:18:29.505>write <00:18:29.705>a <00:18:29.905>lid <00:18:30.105>component <00:18:30.305>at <00:18:30.505>the <00:18:30.705>moment,

355
00:18:31.365 --> 00:18:35.105
<00:18:31.365>but <00:18:31.505>I <00:18:31.645>wanna <00:18:31.785>highlight <00:18:31.925>a <00:18:32.065>few <00:18:32.205>things <00:18:32.345>starting <00:18:32.485>with <00:18:32.625>my <00:18:32.765>style.

356
00:18:35.845 --> 00:18:37.985
<00:18:35.845>And <00:18:36.078>what <00:18:36.311>I <00:18:36.545>see <00:18:36.778>here <00:18:37.011>again <00:18:37.245>is

357
00:18:37.985 --> 00:18:40.105
<00:18:37.985>that <00:18:38.218>I <00:18:38.451>have <00:18:38.685>a <00:18:38.918>variable <00:18:39.151>text <00:18:39.385>color

358
00:18:40.165 --> 00:18:41.625
<00:18:40.165>and <00:18:40.493>a <00:18:40.822>variable <00:18:41.150>background <00:18:41.479>color.

359
00:18:42.525 --> 00:18:45.025
<00:18:42.525>And <00:18:42.725>I <00:18:42.925>have <00:18:43.125>the <00:18:43.325>default <00:18:43.525>black <00:18:43.725>and <00:18:43.925>red,

360
00:18:45.205 --> 00:18:49.115
<00:18:45.205>but <00:18:45.360>I <00:18:45.516>don't <00:18:45.671>have <00:18:45.827>any <00:18:45.982>form <00:18:46.138>of <00:18:46.293>a <00:18:46.449>description <00:18:46.605>yet.

361
00:18:50.875 --> 00:18:53.955
<00:18:50.875>I <00:18:51.030>can <00:18:51.186>do <00:18:51.341>the <00:18:51.497>same <00:18:51.652>for <00:18:51.808>my <00:18:51.963>inputs, <00:18:52.119>the <00:18:52.275>properties

362
00:18:54.535 --> 00:18:57.595
<00:18:54.535>and <00:18:54.735>the <00:18:54.935>events <00:18:55.135>dispatch <00:18:55.335>event <00:18:55.535>in <00:18:55.735>this <00:18:55.935>case.

363
00:18:59.245 --> 00:19:02.665
<00:18:59.245>And <00:18:59.400>you <00:18:59.556>can, <00:18:59.711>and, <00:18:59.867>and <00:19:00.022>this <00:19:00.178>is <00:19:00.333>working <00:19:00.489>code, <00:19:00.645>right?

364
00:19:03.125 --> 00:19:07.625
<00:19:03.125>But <00:19:03.232>to <00:19:03.340>help <00:19:03.448>me <00:19:03.555>out <00:19:03.663>as <00:19:03.771>a <00:19:03.878>human, <00:19:03.986>I <00:19:04.094>also <00:19:04.201>add <00:19:04.309>a <00:19:04.417>render <00:19:04.525>function

365
00:19:07.625 --> 00:19:10.345
<00:19:07.625>that <00:19:07.780>will <00:19:07.936>just <00:19:08.091>display <00:19:08.247>an <00:19:08.402>overview <00:19:08.558>of <00:19:08.713>what <00:19:08.869>is <00:19:09.025>happening.

366
00:19:10.845 --> 00:19:13.385
<00:19:10.845>So <00:19:11.000>I <00:19:11.156>have <00:19:11.311>an <00:19:11.467>overview <00:19:11.622>of <00:19:11.778>all <00:19:11.933>the <00:19:12.089>different <00:19:12.245>components

367
00:19:13.385 --> 00:19:15.585
<00:19:13.385>of <00:19:13.560>all <00:19:13.735>the <00:19:13.910>different <00:19:14.085>CSS <00:19:14.260>variables <00:19:14.435>that <00:19:14.610>I <00:19:14.785>have.

368
00:19:15.975 --> 00:19:17.865
<00:19:15.975>Then <00:19:16.130>a <00:19:16.286>list <00:19:16.441>of <00:19:16.597>all <00:19:16.752>the <00:19:16.908>properties <00:19:17.063>that <00:19:17.219>I <00:19:17.375>have.

369
00:19:17.925 --> 00:19:21.705
<00:19:17.925>And <00:19:18.100>they <00:19:18.274>are <00:19:18.450>automatically <00:19:18.625>changed, <00:19:18.800>that <00:19:18.975>are <00:19:19.149>reactive, <00:19:19.325>um,

370
00:19:22.055 --> 00:19:25.945
<00:19:22.055>because <00:19:22.230>of, <00:19:22.405>because <00:19:22.580>they're <00:19:22.755>written <00:19:22.930>in <00:19:23.105>lit, <00:19:23.280>it's <00:19:23.455>reactive

371
00:19:25.945 --> 00:19:29.185
<00:19:25.945>and <00:19:26.145>you <00:19:26.345>can <00:19:26.544>use <00:19:26.745>it <00:19:26.945>directly <00:19:27.145>whenever, <00:19:27.345>wherever.

372
00:19:30.695 --> 00:19:34.905
<00:19:30.695>So <00:19:30.850>if <00:19:31.006>I <00:19:31.161>write <00:19:31.317>this <00:19:31.472>component, <00:19:31.628>I <00:19:31.783>have <00:19:31.939>my <00:19:32.095>API

373
00:19:35.205 --> 00:19:38.865
<00:19:35.205>and <00:19:35.360>with <00:19:35.516>this <00:19:35.671>API <00:19:35.827>both <00:19:35.982>teams, <00:19:36.138>the <00:19:36.293>web <00:19:36.449>development <00:19:36.605>team

374
00:19:39.045 --> 00:19:41.905
<00:19:39.045>and <00:19:39.200>the <00:19:39.356>design <00:19:39.511>team <00:19:39.667>system <00:19:39.822>team <00:19:39.978>can <00:19:40.133>start <00:19:40.289>to <00:19:40.445>work.

375
00:19:42.045 --> 00:19:45.345
<00:19:42.045>But <00:19:42.245>like <00:19:42.445>I've <00:19:42.645>said, <00:19:42.845>I'm <00:19:43.045>missing <00:19:43.245>some <00:19:43.445>information

376
00:19:45.535 --> 00:19:46.985
<00:19:45.535>regarding <00:19:46.187>the <00:19:46.840>context.

377
00:19:47.455 --> 00:19:48.625
<00:19:47.455>What <00:19:47.718>is <00:19:47.981>this <00:19:48.244>text <00:19:48.508>color?

378
00:19:49.175 --> 00:19:51.545
<00:19:49.175>Well, <00:19:49.408>for <00:19:49.641>that <00:19:49.875>you <00:19:50.108>need <00:19:50.341>to <00:19:50.575>start

379
00:19:51.545 --> 00:19:53.185
<00:19:51.545>to <00:19:51.895>document <00:19:52.245>your <00:19:52.595>skeleton <00:19:52.945>component.

380
00:19:53.605 --> 00:19:56.225
<00:19:53.605>And <00:19:53.805>you <00:19:54.005>can <00:19:54.205>either <00:19:54.405>do <00:19:54.605>that <00:19:54.805>at <00:19:55.005>start.

381
00:19:56.675 --> 00:19:58.825
<00:19:56.675>We're <00:19:56.955>using <00:19:57.235>JavaScript <00:19:57.514>doc, <00:19:57.794>uh, <00:19:58.075>yeah,

382
00:19:58.825 --> 00:20:00.865
<00:19:58.825>JavaScript <00:19:59.105>doc <00:19:59.385>in <00:19:59.665>this <00:19:59.945>case, <00:20:00.225>um,

383
00:20:01.035 --> 00:20:02.985
<00:20:01.035>which <00:20:01.315>is <00:20:01.595>also <00:20:01.875>a <00:20:02.155>standard <00:20:02.435>way

384
00:20:03.085 --> 00:20:04.985
<00:20:03.085>of <00:20:03.435>writing <00:20:03.785>documentation <00:20:04.135>in <00:20:04.485>code.

385
00:20:05.685 --> 00:20:08.025
<00:20:05.685>Um, <00:20:05.840>you <00:20:05.996>can, <00:20:06.151>you <00:20:06.307>can <00:20:06.462>add <00:20:06.618>it <00:20:06.773>at <00:20:06.929>the <00:20:07.085>top.

386
00:20:08.365 --> 00:20:11.945
<00:20:08.365>So <00:20:08.505>I <00:20:08.645>define <00:20:08.785>the <00:20:08.925>CSS <00:20:09.065>property <00:20:09.205>that <00:20:09.345>has <00:20:09.485>the <00:20:09.625>background <00:20:09.765>color,

387
00:20:12.165 --> 00:20:14.545
<00:20:12.165>uh, <00:20:12.340>sorry, <00:20:12.514>that, <00:20:12.690>that <00:20:12.865>it's <00:20:13.040>the <00:20:13.215>variable <00:20:13.389>text <00:20:13.565>color

388
00:20:14.615 --> 00:20:15.985
<00:20:14.615>with <00:20:14.923>the <00:20:15.231>default <00:20:15.539>color <00:20:15.848>black

389
00:20:16.365 --> 00:20:18.465
<00:20:16.365>and <00:20:16.565>the <00:20:16.765>description, <00:20:16.965>it <00:20:17.165>controls <00:20:17.365>the <00:20:17.565>text <00:20:17.765>color,

390
00:20:19.605 --> 00:20:23.145
<00:20:19.605>but <00:20:19.760>I <00:20:19.916>can <00:20:20.071>also <00:20:20.227>write <00:20:20.382>it <00:20:20.538>next <00:20:20.693>to <00:20:20.849>the <00:20:21.005>property

391
00:20:23.445 --> 00:20:24.905
<00:20:23.445>or <00:20:24.101>event <00:20:24.759>itself.

392
00:20:26.085 --> 00:20:30.265
<00:20:26.085>So <00:20:26.240>right <00:20:26.396>above <00:20:26.551>the <00:20:26.707>property, <00:20:26.862>I've <00:20:27.018>written <00:20:27.173>what <00:20:27.329>type <00:20:27.485>of,

393
00:20:30.535 --> 00:20:32.065
<00:20:30.535>what <00:20:30.810>type <00:20:31.085>is <00:20:31.361>the <00:20:31.636>world <00:20:31.912>Today

394
00:20:34.335 --> 00:20:36.745
<00:20:34.335>there's <00:20:34.568>a <00:20:34.801>tool <00:20:35.035>called <00:20:35.268>Custom <00:20:35.501>elements <00:20:35.735>analyzer

395
00:20:36.815 --> 00:20:38.705
<00:20:36.815>that <00:20:37.095>will <00:20:37.375>walk <00:20:37.655>over <00:20:37.935>this <00:20:38.215>code

396
00:20:39.485 --> 00:20:42.545
<00:20:39.485>and <00:20:39.685>will <00:20:39.885>match <00:20:40.084>the <00:20:40.284>documentation <00:20:40.485>with <00:20:40.685>the <00:20:40.885>property

397
00:20:42.655 --> 00:20:46.065
<00:20:42.655>that <00:20:42.888>will <00:20:43.121>match <00:20:43.355>documentation <00:20:43.588>with <00:20:43.821>the <00:20:44.055>event.

398
00:20:48.265 --> 00:20:49.645
<00:20:48.265>And <00:20:48.513>that's <00:20:48.761>where <00:20:49.010>the <00:20:49.258>magic <00:20:49.507>happens,

399
00:20:50.035 --> 00:20:52.445
<00:20:50.035>because <00:20:50.315>if <00:20:50.595>I <00:20:50.875>run <00:20:51.155>that <00:20:51.435>analyzer

400
00:20:52.745 --> 00:20:55.765
<00:20:52.745>or <00:20:52.945>I <00:20:53.145>have <00:20:53.344>written <00:20:53.544>my <00:20:53.745>customer <00:20:53.945>elements <00:20:54.145>manifest,

401
00:20:58.005 --> 00:21:00.165
<00:20:58.005>I <00:20:58.285>can <00:20:58.565>use <00:20:58.845>other <00:20:59.125>tools, <00:20:59.405>tools

402
00:21:00.675 --> 00:21:02.685
<00:21:00.675>that <00:21:00.875>will <00:21:01.075>make <00:21:01.274>my <00:21:01.475>life <00:21:01.675>so <00:21:01.875>much <00:21:02.075>easier.

403
00:21:03.135 --> 00:21:06.805
<00:21:03.135>Tools, <00:21:03.415>for <00:21:03.695>example, <00:21:03.975>that <00:21:04.254>will <00:21:04.535>generate

404
00:21:07.645 --> 00:21:12.355
<00:21:07.645>a <00:21:07.925>component <00:21:08.205>that <00:21:08.485>hosts <00:21:08.764>the <00:21:09.045>documentation

405
00:21:13.885 --> 00:21:15.815
<00:21:13.885>that <00:21:14.085>is <00:21:14.285>found <00:21:14.485>in <00:21:14.685>the <00:21:14.885>custom <00:21:15.085>elements <00:21:15.285>manifest.

406
00:21:16.155 --> 00:21:19.525
<00:21:16.155>So <00:21:16.310>I <00:21:16.466>get <00:21:16.621>a <00:21:16.777>component <00:21:16.932>that <00:21:17.088>I <00:21:17.243>can <00:21:17.399>use <00:21:17.555>anywhere.

407
00:21:19.525 --> 00:21:20.565
<00:21:19.525>This <00:21:19.759>is <00:21:19.993>a <00:21:20.227>web <00:21:20.461>component.

408
00:21:21.645 --> 00:21:24.325
<00:21:21.645>I <00:21:21.820>can <00:21:21.995>use <00:21:22.170>it <00:21:22.345>anywhere <00:21:22.520>in <00:21:22.695>my <00:21:22.870>documentation <00:21:23.045>site,

409
00:21:25.215 --> 00:21:26.805
<00:21:25.215>which <00:21:25.681>could <00:21:26.148>be <00:21:26.615>react

410
00:21:26.805 --> 00:21:28.765
<00:21:26.805>or <00:21:27.085>could <00:21:27.365>be <00:21:27.645>something <00:21:27.925>completely <00:21:28.205>different.

411
00:21:29.185 --> 00:21:33.085
<00:21:29.185>But <00:21:29.340>I, <00:21:29.496>I <00:21:29.651>can <00:21:29.807>also <00:21:29.962>use <00:21:30.118>this <00:21:30.273>in <00:21:30.429>storybook <00:21:30.585>and

412
00:21:33.085 --> 00:21:35.285
<00:21:33.085>because <00:21:33.285>it's <00:21:33.485>a <00:21:33.685>web <00:21:33.885>component, <00:21:34.085>it's <00:21:34.285>also <00:21:34.485>interactive.

413
00:21:35.285 --> 00:21:38.085
<00:21:35.285>So <00:21:35.412>I <00:21:35.539>can <00:21:35.666>see <00:21:35.794>which <00:21:35.921>properties <00:21:36.048>I <00:21:36.175>have, <00:21:36.303>but <00:21:36.430>also <00:21:36.557>which <00:21:36.685>events

414
00:21:38.425 --> 00:21:41.005
<00:21:38.425>and <00:21:38.658>which <00:21:38.891>CSS <00:21:39.125>custom <00:21:39.358>properties <00:21:39.591>I <00:21:39.825>have.

415
00:21:41.585 --> 00:21:45.925
<00:21:41.585>And <00:21:41.712>the <00:21:41.839>cool <00:21:41.966>thing, <00:21:42.094>uh, <00:21:42.221>here <00:21:42.348>is <00:21:42.475>this <00:21:42.603>isn't <00:21:42.730>where <00:21:42.857>it <00:21:42.985>ends

416
00:21:46.935 --> 00:21:48.185
<00:21:46.935>because <00:21:48.060>what,

417
00:21:48.215 --> 00:21:52.855
<00:21:48.215>because <00:21:48.370>a <00:21:48.526>web <00:21:48.681>component <00:21:48.837>can <00:21:48.992>load <00:21:49.148>web <00:21:49.303>components <00:21:49.459>in <00:21:49.615>slots.

418
00:21:54.035 --> 00:21:57.655
<00:21:54.035>So <00:21:54.190>what <00:21:54.346>this <00:21:54.501>web <00:21:54.657>component <00:21:54.812>does <00:21:54.968>is <00:21:55.123>it <00:21:55.279>also <00:21:55.435>loads

419
00:21:57.715 --> 00:21:58.735
<00:21:57.715>my <00:21:58.174>skeleton <00:21:58.632>component.

420
00:21:59.235 --> 00:22:02.175
<00:21:59.235>So <00:21:59.362>this <00:21:59.489>is <00:21:59.616>the, <00:21:59.744>the, <00:21:59.871>the <00:21:59.998>actual <00:22:00.125>view <00:22:00.253>of <00:22:00.380>my <00:22:00.507>web <00:22:00.635>com,

421
00:22:02.175 --> 00:22:06.455
<00:22:02.175>of <00:22:02.315>my <00:22:02.455>web <00:22:02.595>component, <00:22:02.735>uh, <00:22:02.875>hello <00:22:03.014>dash <00:22:03.155>world <00:22:03.294>with <00:22:03.435>the <00:22:03.575>header,

422
00:22:06.455 --> 00:22:08.495
<00:22:06.455>the <00:22:06.655>CSS <00:22:06.855>variables, <00:22:07.054>the <00:22:07.254>attributes <00:22:07.455>and <00:22:07.655>the <00:22:07.855>events.

423
00:22:09.355 --> 00:22:11.365
<00:22:09.355>And <00:22:09.635>I <00:22:09.915>can <00:22:10.195>tweak <00:22:10.475>this, <00:22:10.755>right?

424
00:22:11.385 --> 00:22:12.565
<00:22:11.385>So <00:22:11.739>I <00:22:12.093>can, <00:22:12.447>well,

425
00:22:12.745 --> 00:22:14.365
<00:22:12.745>in <00:22:12.945>the <00:22:13.145>source <00:22:13.344>tab <00:22:13.544>you'll <00:22:13.745>see <00:22:13.945>the <00:22:14.145>actual

426
00:22:14.375 --> 00:22:15.725
<00:22:14.375>state <00:22:14.780>of <00:22:15.185>the <00:22:15.590>component.

427
00:22:15.905 --> 00:22:20.235
<00:22:15.905>But <00:22:16.045>I <00:22:16.185>can <00:22:16.325>tweak <00:22:16.465>this, <00:22:16.605>I <00:22:16.745>can <00:22:16.885>change <00:22:17.024>the <00:22:17.165>property <00:22:17.305>type,

428
00:22:20.645 --> 00:22:24.555
<00:22:20.645>which <00:22:20.845>defaults <00:22:21.045>to <00:22:21.245>wonderful <00:22:21.445>to <00:22:21.645>we <00:22:21.845>are <00:22:22.045>developers

429
00:22:25.495 --> 00:22:27.395
<00:22:25.495>and <00:22:25.728>it <00:22:25.961>will <00:22:26.195>change <00:22:26.428>in <00:22:26.661>the <00:22:26.895>view.

430
00:22:27.655 --> 00:22:29.275
<00:22:27.655>So <00:22:27.888>I <00:22:28.121>can <00:22:28.355>actually <00:22:28.588>see <00:22:28.821>what <00:22:29.055>happens.

431
00:22:30.355 --> 00:22:35.195
<00:22:30.355>I <00:22:30.495>can <00:22:30.635>change <00:22:30.775>my <00:22:30.915>styles, <00:22:31.055>make <00:22:31.195>the <00:22:31.335>background <00:22:31.475>color, <00:22:31.615>uh, <00:22:31.755>blue,

432
00:22:35.255 --> 00:22:37.715
<00:22:35.255>for <00:22:35.488>example, <00:22:35.721>and <00:22:35.955>it <00:22:36.188>changes <00:22:36.421>to <00:22:36.655>blue.

433
00:22:38.735 --> 00:22:42.195
<00:22:38.735>If <00:22:38.875>I <00:22:39.014>have <00:22:39.155>any <00:22:39.294>events <00:22:39.435>in <00:22:39.574>my <00:22:39.715>component, <00:22:39.854>I <00:22:39.995>can <00:22:40.135>trigger

434
00:22:42.195 --> 00:22:43.795
<00:22:42.195>that <00:22:42.475>event <00:22:42.754>and <00:22:43.034>see <00:22:43.314>what <00:22:43.595>happens.

435
00:22:44.625 --> 00:22:46.845
<00:22:44.625>So <00:22:44.780>I've <00:22:44.936>sent <00:22:45.091>a <00:22:45.247>gift <00:22:45.402>or <00:22:45.558>I've <00:22:45.713>sent <00:22:45.869>a <00:22:46.025>bomb,

436
00:22:48.065 --> 00:22:51.765
<00:22:48.065>and <00:22:48.181>if <00:22:48.298>this <00:22:48.415>is <00:22:48.531>the <00:22:48.648>actual <00:22:48.765>state <00:22:48.881>that <00:22:48.998>I <00:22:49.115>want <00:22:49.231>to <00:22:49.348>work <00:22:49.465>with,

437
00:22:52.545 --> 00:22:55.965
<00:22:52.545>in <00:22:52.685>my <00:22:52.825>context, <00:22:52.965>well, <00:22:53.105>let's <00:22:53.245>head <00:22:53.385>back <00:22:53.525>to <00:22:53.665>the <00:22:53.805>source <00:22:53.945>tab

438
00:22:56.025 --> 00:22:59.775
<00:22:56.025>and <00:22:56.165>oh, <00:22:56.305>this <00:22:56.445>is <00:22:56.585>what <00:22:56.725>I <00:22:56.865>need <00:22:57.005>to <00:22:57.145>copy, <00:22:57.285>pay, <00:22:57.425>copy

439
00:22:59.875 --> 00:23:02.255
<00:22:59.875>and <00:23:00.225>paste <00:23:00.575>into <00:23:00.925>my <00:23:01.275>environment.

440
00:23:02.675 --> 00:23:04.855
<00:23:02.675>And <00:23:02.850>it <00:23:03.024>will, <00:23:03.200>and <00:23:03.375>it <00:23:03.550>will <00:23:03.725>tell <00:23:03.899>the <00:23:04.075>component.

441
00:23:05.365 --> 00:23:07.575
<00:23:05.365>This <00:23:05.645>is <00:23:05.925>your <00:23:06.205>starting <00:23:06.485>state, <00:23:06.765>right?

442
00:23:07.595 --> 00:23:11.105
<00:23:07.595>So <00:23:07.750>I <00:23:07.906>have <00:23:08.061>the <00:23:08.217>inputs <00:23:08.372>in <00:23:08.528>this <00:23:08.683>case <00:23:08.839>type <00:23:08.995>set

443
00:23:11.125 --> 00:23:12.265
<00:23:11.125>to <00:23:11.467>we <00:23:11.809>are <00:23:12.151>developers.

444
00:23:13.815 --> 00:23:17.135
<00:23:13.815>I've <00:23:14.015>changed <00:23:14.215>the <00:23:14.415>background <00:23:14.615>color <00:23:14.815>to <00:23:15.015>blue, <00:23:15.215>right?

445
00:23:20.465 --> 00:23:21.115
<00:23:20.465>This <00:23:20.757>is <00:23:21.050>where,

446
00:23:23.865 --> 00:23:26.555
<00:23:23.865>uh, <00:23:24.331>no, <00:23:24.798>it's <00:23:25.265>not.

447
00:23:26.555 --> 00:23:29.955
<00:23:26.555>Uh, <00:23:26.730>it's <00:23:26.905>a, <00:23:27.080>this <00:23:27.255>is <00:23:27.430>where <00:23:27.605>ag <00:23:27.780>comes <00:23:27.955>in.

448
00:23:30.495 --> 00:23:33.875
<00:23:30.495>And <00:23:30.669>a <00:23:30.844>a <00:23:31.020>actually <00:23:31.195>means <00:23:31.370>automation <00:23:31.544>as <00:23:31.719>a <00:23:31.895>gift.

449
00:23:36.575 --> 00:23:39.395
<00:23:36.575>Why <00:23:36.702>am <00:23:36.829>I, <00:23:36.956>why <00:23:37.084>am <00:23:37.211>I <00:23:37.338>calling <00:23:37.465>this <00:23:37.593>automation <00:23:37.720>as <00:23:37.847>a <00:23:37.975>gift?

450
00:23:39.395 --> 00:23:42.515
<00:23:39.395>Because, <00:23:39.595>well, <00:23:39.795>you <00:23:39.995>don't <00:23:40.195>have <00:23:40.395>to <00:23:40.595>do <00:23:40.795>anything

451
00:23:43.415 --> 00:23:44.675
<00:23:43.415>to <00:23:43.793>use <00:23:44.171>it <00:23:44.549>as

452
00:23:44.675 --> 00:23:46.725
<00:23:44.675>Long <00:23:44.908>as <00:23:45.141>you <00:23:45.375>have <00:23:45.608>that <00:23:45.841>starting <00:23:46.075>point.

453
00:23:47.425 --> 00:23:49.845
<00:23:47.425>And <00:23:47.600>the <00:23:47.774>automation <00:23:47.950>as <00:23:48.125>a <00:23:48.300>gift <00:23:48.475>examples <00:23:48.649>are <00:23:48.825>numerous,

454
00:23:50.395 --> 00:23:52.845
<00:23:50.395>what <00:23:50.550>you <00:23:50.706>get, <00:23:50.861>well, <00:23:51.017>I've <00:23:51.172>just <00:23:51.328>shown <00:23:51.483>you <00:23:51.639>a <00:23:51.795>demo.

455
00:23:52.845 --> 00:23:54.525
<00:23:52.845>That's <00:23:53.078>what <00:23:53.311>you <00:23:53.545>get. <00:23:53.778>I <00:23:54.011>didn't <00:23:54.245>write

456
00:23:55.285 --> 00:23:57.605
<00:23:55.285>anything <00:23:55.751>except <00:23:56.218>for <00:23:56.685>that.

457
00:23:57.605 --> 00:23:59.405
<00:23:57.605>Custom <00:23:58.071>elements <00:23:58.538>manifest <00:23:59.005>myself.

458
00:24:00.205 --> 00:24:04.325
<00:24:00.205>I <00:24:00.379>generated <00:24:00.554>the, <00:24:00.730>the, <00:24:00.905>the, <00:24:01.080>the, <00:24:01.254>the <00:24:01.429>skeleton <00:24:01.605>component

459
00:24:04.985 --> 00:24:07.365
<00:24:04.985>and <00:24:05.185>then <00:24:05.385>I <00:24:05.584>loaded <00:24:05.784>the <00:24:05.985>custom <00:24:06.185>elements <00:24:06.385>manifest

460
00:24:07.625 --> 00:24:08.965
<00:24:07.625>inside <00:24:08.027>that <00:24:08.428>web <00:24:08.831>component.

461
00:24:09.075 --> 00:24:12.645
<00:24:09.075>That <00:24:09.230>general <00:24:09.386>that, <00:24:09.541>that <00:24:09.697>shows <00:24:09.852>me <00:24:10.008>the, <00:24:10.163>the, <00:24:10.319>the <00:24:10.475>documentation

462
00:24:12.825 --> 00:24:14.205
<00:24:12.825>and <00:24:13.239>the <00:24:13.653>interactive <00:24:14.067>playground.

463
00:24:15.465 --> 00:24:18.725
<00:24:15.465>But <00:24:15.605>I <00:24:15.745>can <00:24:15.885>also <00:24:16.024>use <00:24:16.165>that <00:24:16.304>custom <00:24:16.445>elements <00:24:16.584>manifest <00:24:16.725>as <00:24:16.865>part

464
00:24:18.725 --> 00:24:22.855
<00:24:18.725>of <00:24:18.899>my <00:24:19.074>linting <00:24:19.250>and <00:24:19.425>testing <00:24:19.600>solutions, <00:24:19.774>making <00:24:19.949>sure <00:24:20.125>that

465
00:24:23.395 --> 00:24:24.895
<00:24:23.395>before <00:24:23.845>I <00:24:24.295>publish <00:24:24.745>anything,

466
00:24:25.685 --> 00:24:27.895
<00:24:25.685>it's <00:24:25.918>API <00:24:26.151>compatible <00:24:26.385>with <00:24:26.618>what <00:24:26.851>we <00:24:27.085>said.

467
00:24:30.115 --> 00:24:34.695
<00:24:30.115>It <00:24:30.255>can <00:24:30.395>also <00:24:30.535>be <00:24:30.675>directly <00:24:30.815>fed <00:24:30.955>to, <00:24:31.095>uh, <00:24:31.235>tools <00:24:31.375>like <00:24:31.515>storybook

468
00:24:35.115 --> 00:24:36.615
<00:24:35.115>and <00:24:35.565>you <00:24:36.015>get <00:24:36.465>cataloging

469
00:24:36.635 --> 00:24:38.975
<00:24:36.635>of <00:24:36.868>your <00:24:37.101>web <00:24:37.335>components <00:24:37.568>completely <00:24:37.801>for <00:24:38.035>free.

470
00:24:40.675 --> 00:24:43.855
<00:24:40.675>You <00:24:40.830>can <00:24:40.986>also <00:24:41.141>use <00:24:41.297>the <00:24:41.452>custom <00:24:41.608>elements <00:24:41.763>manifest <00:24:41.919>to <00:24:42.075>start

471
00:24:43.855 --> 00:24:46.305
<00:24:43.855>to <00:24:44.555>generate <00:24:45.255>code

472
00:24:46.925 --> 00:24:49.145
<00:24:46.925>or <00:24:47.391>generate <00:24:47.858>wrapper <00:24:48.325>components.

473
00:24:49.245 --> 00:24:50.905
<00:24:49.245>If <00:24:49.594>you're <00:24:49.945>using <00:24:50.294>React <00:24:50.645>18

474
00:24:50.905 --> 00:24:54.595
<00:24:50.905>or <00:24:51.105>lower, <00:24:51.305>you <00:24:51.504>shouldn't <00:24:51.705>write <00:24:51.905>those <00:24:52.105>things <00:24:52.305>yourself.

475
00:24:55.215 --> 00:24:58.315
<00:24:55.215>If <00:24:55.370>you <00:24:55.526>have <00:24:55.681>the <00:24:55.837>knowledge <00:24:55.992>of <00:24:56.148>the <00:24:56.303>API, <00:24:56.459>you, <00:24:56.615>you,

476
00:24:58.315 --> 00:25:01.755
<00:24:58.315>you <00:24:58.515>can <00:24:58.715>generate <00:24:58.915>them, <00:24:59.115>you <00:24:59.315>can <00:24:59.515>generate <00:24:59.715>complete,

477
00:25:02.945 --> 00:25:05.865
<00:25:02.945>complete <00:25:03.145>components <00:25:03.345>with, <00:25:03.544>with <00:25:03.745>start <00:25:03.945>with <00:25:04.145>the <00:25:04.345>API

478
00:25:05.935 --> 00:25:07.345
<00:25:05.935>that <00:25:06.188>you <00:25:06.442>have <00:25:06.696>written <00:25:06.950>down <00:25:07.204>first.

479
00:25:08.845 --> 00:25:12.265
<00:25:08.845>You <00:25:09.000>can <00:25:09.156>also <00:25:09.311>look <00:25:09.467>at <00:25:09.622>integration, <00:25:09.778>integration <00:25:09.933>into <00:25:10.089>your <00:25:10.245>IDE.

480
00:25:12.485 --> 00:25:16.145
<00:25:12.485>If <00:25:12.659>I <00:25:12.834>feed <00:25:13.010>the <00:25:13.185>web <00:25:13.360>component <00:25:13.534>manifest <00:25:13.709>in, <00:25:13.885>uh,

481
00:25:16.365 --> 00:25:20.705
<00:25:16.365>my <00:25:16.520>visual <00:25:16.676>studio <00:25:16.831>code <00:25:16.987>IDE, <00:25:17.142>it <00:25:17.298>will <00:25:17.453>better <00:25:17.609>help <00:25:17.765>me

482
00:25:21.325 --> 00:25:23.745
<00:25:21.325>for <00:25:21.558>with <00:25:21.791>code <00:25:22.025>completion <00:25:22.258>and <00:25:22.491>with <00:25:22.725>validation.

483
00:25:25.375 --> 00:25:27.355
<00:25:25.375>You <00:25:25.608>can <00:25:25.841>also <00:25:26.075>generate <00:25:26.308>the <00:25:26.541>documentation <00:25:26.775>sites

484
00:25:28.315 --> 00:25:30.435
<00:25:28.315>straight <00:25:28.595>from <00:25:28.875>the <00:25:29.155>customer <00:25:29.435>elements <00:25:29.715>manifest.

485
00:25:31.175 --> 00:25:33.115
<00:25:31.175>And <00:25:31.375>people <00:25:31.575>have <00:25:31.774>written <00:25:31.975>tools <00:25:32.175>for <00:25:32.375>this <00:25:32.575>already.

486
00:25:33.185 --> 00:25:34.995
<00:25:33.185>This <00:25:33.340>is <00:25:33.496>not <00:25:33.651>something <00:25:33.807>that <00:25:33.962>you <00:25:34.118>need <00:25:34.273>to <00:25:34.429>do <00:25:34.585>yourself.

487
00:25:37.065 --> 00:25:38.365
<00:25:37.065>So <00:25:37.260>if <00:25:37.455>you <00:25:37.650>want <00:25:37.845>to <00:25:38.040>get <00:25:38.235>started,

488
00:25:38.705 --> 00:25:40.965
<00:25:38.705>and <00:25:38.905>like <00:25:39.105>I've <00:25:39.304>said <00:25:39.504>at <00:25:39.705>the <00:25:39.905>start, <00:25:40.105>um,

489
00:25:41.165 --> 00:25:44.405
<00:25:41.165>I <00:25:41.305>will <00:25:41.445>show <00:25:41.585>you <00:25:41.725>a <00:25:41.865>photo, <00:25:42.004>uh, <00:25:42.145>icon <00:25:42.284>when <00:25:42.425>it's <00:25:42.565>time

490
00:25:44.505 --> 00:25:45.765
<00:25:44.505>to <00:25:44.883>make <00:25:45.261>a <00:25:45.639>screenshot.

491
00:25:46.385 --> 00:25:48.765
<00:25:46.385>If <00:25:46.585>you <00:25:46.785>wanna <00:25:46.985>know <00:25:47.185>more <00:25:47.385>about <00:25:47.585>web <00:25:47.785>components

492
00:25:49.145 --> 00:25:51.085
<00:25:49.145>or <00:25:49.425>the <00:25:49.705>lid <00:25:49.985>web <00:25:50.264>component <00:25:50.545>library

493
00:25:51.195 --> 00:25:54.445
<00:25:51.195>that <00:25:51.335>I've <00:25:51.475>used <00:25:51.615>in <00:25:51.754>my <00:25:51.895>examples <00:25:52.034>today, <00:25:52.175>head <00:25:52.314>over <00:25:52.455>to <00:25:52.595>lid.dev

494
00:25:55.365 --> 00:25:57.465
<00:25:55.365>for <00:25:55.565>the <00:25:55.765>custom <00:25:55.965>elements <00:25:56.165>manifest, <00:25:56.365>you <00:25:56.565>can <00:25:56.765>go

495
00:25:57.465 --> 00:25:57.865
<00:25:57.465>to <00:25:57.825>custom

496
00:25:58.225 --> 00:26:02.505
elements-manifest.open-wc.org.

497
00:26:03.405 --> 00:26:05.545
<00:26:03.405>That's <00:26:03.871>a <00:26:04.338>mouthful. <00:26:04.805>Um,

498
00:26:05.685 --> 00:26:08.745
<00:26:05.685>if <00:26:05.812>you <00:26:05.939>wanna <00:26:06.066>know <00:26:06.194>more <00:26:06.321>about <00:26:06.448>the <00:26:06.575>automation <00:26:06.703>as <00:26:06.830>a <00:26:06.957>gift, <00:26:07.085>um,

499
00:26:09.445 --> 00:26:11.225
<00:26:09.445>the <00:26:09.794>plugins, <00:26:10.145>the, <00:26:10.495>the, <00:26:10.845>the,

500
00:26:11.485 --> 00:26:14.465
<00:26:11.485>the <00:26:11.685>manifest <00:26:11.885>analyzer <00:26:12.084>is <00:26:12.284>actually <00:26:12.485>the <00:26:12.685>starting <00:26:12.885>point

501
00:26:14.485 --> 00:26:16.105
<00:26:14.485>of <00:26:14.764>a <00:26:15.044>lot <00:26:15.324>of <00:26:15.604>your <00:26:15.885>automation

502
00:26:16.685 --> 00:26:20.385
<00:26:16.685>and <00:26:16.860>you <00:26:17.034>can <00:26:17.210>hook <00:26:17.385>into <00:26:17.560>the <00:26:17.735>analyzer <00:26:17.909>with <00:26:18.085>plugins

503
00:26:20.965 --> 00:26:23.625
<00:26:20.965>and <00:26:21.092>you <00:26:21.219>can <00:26:21.346>also <00:26:21.474>write <00:26:21.601>your <00:26:21.728>own <00:26:21.855>plugins <00:26:21.983>if <00:26:22.110>you <00:26:22.237>want <00:26:22.365>to.

504
00:26:25.205 --> 00:26:26.705
<00:26:25.205>If <00:26:25.429>you <00:26:25.655>want <00:26:25.879>to <00:26:26.105>know <00:26:26.330>more <00:26:26.554>about

505
00:26:27.515 --> 00:26:30.905
<00:26:27.515>generating <00:26:27.715>a <00:26:27.915>skeleton <00:26:28.115>component <00:26:28.315>from <00:26:28.515>the <00:26:28.715>customer <00:26:28.915>elements

506
00:26:31.065 --> 00:26:34.985
<00:26:31.065>manifest <00:26:31.220>itself, <00:26:31.376>you <00:26:31.531>can <00:26:31.687>head <00:26:31.842>over, <00:26:31.998>uh, <00:26:32.153>to <00:26:32.309>Gito <00:26:32.465>repository

507
00:26:35.075 --> 00:26:38.745
<00:26:35.075>where <00:26:35.230>I <00:26:35.386>build <00:26:35.541>a <00:26:35.697>a <00:26:35.852>generator <00:26:36.008>that <00:26:36.163>you <00:26:36.319>can <00:26:36.475>use

508
00:26:38.745 --> 00:26:40.305
<00:26:38.745>to <00:26:39.211>generate <00:26:39.678>lid <00:26:40.145>components

509
00:26:40.985 --> 00:26:42.665
<00:26:40.985>straight <00:26:41.264>from <00:26:41.544>the <00:26:41.824>custom <00:26:42.104>elements <00:26:42.385>manifest.

510
00:26:44.305 --> 00:26:46.645
<00:26:44.305>The <00:26:44.585>written <00:26:44.865>version <00:26:45.145>of <00:26:45.425>this <00:26:45.705>presentation

511
00:26:47.345 --> 00:26:48.765
<00:26:47.345>is <00:26:47.664>a <00:26:47.984>visible <00:26:48.303>or <00:26:48.623>medium.

512
00:26:49.185 --> 00:26:51.205
<00:26:49.185>Uh, <00:26:49.360>and <00:26:49.534>you <00:26:49.710>can <00:26:49.885>head <00:26:50.060>over <00:26:50.235>to <00:26:50.409>Team <00:26:50.585>Rockstar,

513
00:26:51.475 --> 00:26:55.525
<00:26:51.475>it's <00:26:51.615>medium <00:26:51.754>account <00:26:51.895>to <00:26:52.034>uh, <00:26:52.175>read <00:26:52.314>this <00:26:52.455>in <00:26:52.594>your <00:26:52.735>own <00:26:52.875>pace.

514
00:26:56.265 --> 00:26:59.755
<00:26:56.265>And <00:26:56.381>like <00:26:56.498>I've <00:26:56.615>also <00:26:56.731>said <00:26:56.848>at <00:26:56.965>the <00:26:57.081>start, <00:26:57.198>if <00:26:57.315>you <00:26:57.431>want <00:26:57.548>to, <00:26:57.665>uh,

515
00:26:59.985 --> 00:27:03.755
<00:26:59.985>revisit <00:27:00.185>the <00:27:00.385>presentation, <00:27:00.584>this <00:27:00.784>is <00:27:00.985>the <00:27:01.185>U-R-L-A-P-I <00:27:01.385>dash,

516
00:27:03.755 --> 00:27:07.635
<00:27:03.755>first <00:27:03.988>dash <00:27:04.221>UI <00:27:04.455>dash <00:27:04.688>components <00:27:04.921>notify <00:27:05.155>app.

517
00:27:08.055 --> 00:27:10.715
<00:27:08.055>And <00:27:08.182>yes, <00:27:08.309>this <00:27:08.436>will <00:27:08.564>be <00:27:08.691>the <00:27:08.818>best <00:27:08.945>time <00:27:09.073>to <00:27:09.200>take <00:27:09.327>that <00:27:09.455>picture.

518
00:27:12.005 --> 00:27:12.935
<00:27:12.005>I'll <00:27:12.214>give <00:27:12.423>you <00:27:12.632>five <00:27:12.841>seconds,

519
00:27:18.225 --> 00:27:18.575
right?

520
00:27:19.715 --> 00:27:22.575
<00:27:19.715>So <00:27:19.889>looking <00:27:20.064>at <00:27:20.240>the <00:27:20.415>time, <00:27:20.590>three <00:27:20.764>minutes <00:27:20.939>left. <00:27:21.115>Awesome.

521
00:27:24.165 --> 00:27:26.495
<00:27:24.165>Wrapping <00:27:24.365>up, <00:27:24.565>what <00:27:24.764>did <00:27:24.965>I <00:27:25.165>talk <00:27:25.365>about <00:27:25.565>today?

522
00:27:27.575 --> 00:27:31.075
<00:27:27.575>Today <00:27:27.775>I <00:27:27.975>gave <00:27:28.175>you <00:27:28.375>my <00:27:28.575>train <00:27:28.775>of <00:27:28.975>thoughts

523
00:27:32.105 --> 00:27:33.275
<00:27:32.105>regarding <00:27:33.158>communication.

524
00:27:34.665 --> 00:27:35.945
<00:27:34.665>'cause <00:27:34.895>you <00:27:35.125>need <00:27:35.356>communication <00:27:35.586>in <00:27:35.817>order

525
00:27:35.945 --> 00:27:39.025
<00:27:35.945>to <00:27:36.120>understand <00:27:36.294>each <00:27:36.470>other, <00:27:36.645>to <00:27:36.820>work <00:27:36.995>with <00:27:37.169>each <00:27:37.345>other.

526
00:27:40.665 --> 00:27:44.805
<00:27:40.665>And <00:27:40.792>if <00:27:40.919>we <00:27:41.046>have, <00:27:41.174>and <00:27:41.301>if <00:27:41.428>we <00:27:41.555>think <00:27:41.683>about <00:27:41.810>our <00:27:41.937>API <00:27:42.065>first,

527
00:27:44.975 --> 00:27:49.565
<00:27:44.975>maybe <00:27:45.130>also <00:27:45.286>for <00:27:45.441>UI <00:27:45.597>components, <00:27:45.752>and <00:27:45.908>instead <00:27:46.063>of <00:27:46.219>writing <00:27:46.375>code

528
00:27:49.625 --> 00:27:53.005
<00:27:49.625>and <00:27:49.780>then <00:27:49.936>sharing <00:27:50.091>the <00:27:50.247>code, <00:27:50.402>we <00:27:50.558>think <00:27:50.713>with <00:27:50.869>each <00:27:51.025>other,

529
00:27:53.305 --> 00:27:55.245
<00:27:53.305>we <00:27:53.585>communicate <00:27:53.865>with <00:27:54.145>each <00:27:54.425>other <00:27:54.705>about

530
00:27:55.275 --> 00:27:56.725
<00:27:55.275>what <00:27:55.492>does <00:27:55.710>the <00:27:55.927>component <00:27:56.145>need <00:27:56.362>to <00:27:56.580>do

531
00:27:57.265 --> 00:27:58.965
<00:27:57.265>and <00:27:57.465>what's <00:27:57.665>the <00:27:57.865>best <00:27:58.065>way <00:27:58.265>to <00:27:58.465>do <00:27:58.665>it.

532
00:28:00.465 --> 00:28:02.695
<00:28:00.465>We're <00:28:00.745>using <00:28:01.024>a <00:28:01.304>design <00:28:01.584>first <00:28:01.865>approach,

533
00:28:04.785 --> 00:28:08.245
<00:28:04.785>and <00:28:04.912>if <00:28:05.039>we <00:28:05.166>talk <00:28:05.294>about <00:28:05.421>UI <00:28:05.548>components <00:28:05.675>that <00:28:05.803>need <00:28:05.930>to <00:28:06.057>be <00:28:06.185>reusable,

534
00:28:08.885 --> 00:28:12.005
<00:28:08.885>I <00:28:09.118>strongly <00:28:09.351>think <00:28:09.585>about <00:28:09.818>web <00:28:10.051>components <00:28:10.285>strongly.

535
00:28:13.385 --> 00:28:15.325
<00:28:13.385>And <00:28:13.618>if <00:28:13.851>you <00:28:14.085>are <00:28:14.318>using <00:28:14.551>web <00:28:14.785>components,

536
00:28:15.465 --> 00:28:19.245
<00:28:15.465>you <00:28:15.620>can <00:28:15.776>use <00:28:15.931>the <00:28:16.087>custom <00:28:16.242>elements <00:28:16.398>manifest <00:28:16.553>to <00:28:16.709>make <00:28:16.865>sure

537
00:28:19.245 --> 00:28:22.205
<00:28:19.245>that <00:28:19.400>you <00:28:19.556>get <00:28:19.711>a <00:28:19.867>lot <00:28:20.022>of <00:28:20.178>automation <00:28:20.333>as <00:28:20.489>a <00:28:20.645>gift.

538
00:28:24.275 --> 00:28:25.335
<00:28:24.275>And, <00:28:24.593>uh, <00:28:24.911>with <00:28:25.229>that,

539
00:28:25.495 --> 00:28:27.015
<00:28:25.495>I <00:28:25.666>really <00:28:25.837>like <00:28:26.008>to <00:28:26.179>thank <00:28:26.350>you <00:28:26.521>for <00:28:26.692>your <00:28:26.863>time.

540
00:28:27.715 --> 00:28:31.775
<00:28:27.715>Um, <00:28:27.822>if <00:28:27.930>you <00:28:28.038>want <00:28:28.145>to <00:28:28.253>get <00:28:28.361>in <00:28:28.468>contact <00:28:28.576>with <00:28:28.684>me, <00:28:28.791>feel <00:28:28.899>free <00:28:29.007>to, <00:28:29.115>uh,

541
00:28:31.795 --> 00:28:34.175
<00:28:31.795>hit <00:28:32.028>me <00:28:32.261>up <00:28:32.495>on <00:28:32.728>LinkedIn <00:28:32.961>or <00:28:33.195>methadone.

542
00:28:34.545 --> 00:28:35.255
<00:28:34.545>Thank <00:28:34.758>you <00:28:34.971>very <00:28:35.184>much.