WEBVTT

1
00:00:17.105 --> 00:00:20.365
<00:00:17.105>So <00:00:17.260>welcome <00:00:17.416>to <00:00:17.571>my <00:00:17.727>talk, <00:00:17.882>um, <00:00:18.038>atomic <00:00:18.193>Design <00:00:18.349>with <00:00:18.505>React

2
00:00:20.425 --> 00:00:22.605
<00:00:20.425>and <00:00:20.658>TypeScript, <00:00:20.891>a <00:00:21.125>match <00:00:21.358>made <00:00:21.591>in <00:00:21.825>heaven.

3
00:00:23.025 --> 00:00:25.165
<00:00:23.025>I'm <00:00:23.258>the <00:00:23.491>tele <00:00:23.724>Rus <00:00:23.958>co-founder <00:00:24.191>at <00:00:24.424>Custodian

4
00:00:25.165 --> 00:00:27.205
<00:00:25.165>with <00:00:25.445>Jeremy <00:00:25.724>Hindel <00:00:26.005>and <00:00:26.285>Charles <00:00:26.564>Keg.

5
00:00:27.705 --> 00:00:32.245
<00:00:27.705>And <00:00:27.832>how <00:00:27.959>this <00:00:28.086>talk <00:00:28.214>came <00:00:28.341>about <00:00:28.468>was <00:00:28.595>that <00:00:28.723>I <00:00:28.850>started <00:00:28.977>doing <00:00:29.104>this,

6
00:00:32.425 --> 00:00:35.365
<00:00:32.424>uh, <00:00:32.658>company <00:00:32.891>with <00:00:33.125>no <00:00:33.358>experience <00:00:33.591>in <00:00:33.824>coding,

7
00:00:35.365 --> 00:00:37.285
<00:00:35.365>something <00:00:35.645>which <00:00:35.925>was <00:00:36.205>maintainable <00:00:36.485>in <00:00:36.765>scale

8
00:00:37.505 --> 00:00:39.885
<00:00:37.505>before <00:00:37.855>my <00:00:38.205>co-founder <00:00:38.555>Jeremy <00:00:38.905>did.

9
00:00:40.185 --> 00:00:42.885
<00:00:40.185>And <00:00:40.325>therefore, <00:00:40.465>I <00:00:40.605>learned <00:00:40.745>a <00:00:40.885>lot <00:00:41.025>from <00:00:41.165>him <00:00:41.305>how <00:00:41.445>you <00:00:41.585>know,

10
00:00:42.905 --> 00:00:43.925
<00:00:42.905>how <00:00:43.134>to <00:00:43.364>get <00:00:43.593>around <00:00:43.823>that.

11
00:00:44.385 --> 00:00:47.765
<00:00:44.385>And <00:00:44.525>I <00:00:44.665>learned <00:00:44.805>immensely <00:00:44.945>on <00:00:45.085>my <00:00:45.224>own <00:00:45.364>by <00:00:45.504>basically <00:00:45.644>looking <00:00:45.785>at

12
00:00:47.785 --> 00:00:49.805
<00:00:47.785>how <00:00:47.985>big <00:00:48.184>companies <00:00:48.385>did <00:00:48.584>it <00:00:48.785>and <00:00:48.985>do <00:00:49.184>it.

13
00:00:50.465 --> 00:00:51.885
<00:00:50.465>And <00:00:50.720>I'm <00:00:50.976>pretty <00:00:51.231>happy <00:00:51.487>with <00:00:51.742>it.

14
00:00:52.025 --> 00:00:54.085
<00:00:52.025>Uh, <00:00:52.225>we <00:00:52.425>are <00:00:52.625>onboarding, <00:00:52.824>you <00:00:53.025>know, <00:00:53.225>new <00:00:53.425>engineers

15
00:00:54.105 --> 00:00:55.285
<00:00:54.105>and <00:00:54.458>it's <00:00:54.812>going <00:00:55.166>smoothly

16
00:00:56.105 --> 00:00:59.125
<00:00:56.105>and <00:00:56.260>for <00:00:56.416>myself <00:00:56.571>to <00:00:56.727>make <00:00:56.882>changes <00:00:57.038>and <00:00:57.193>to <00:00:57.349>make <00:00:57.504>updates.

17
00:00:59.385 --> 00:01:01.205
<00:00:59.385>And <00:00:59.585>if <00:00:59.785>we <00:00:59.985>have <00:01:00.184>any <00:01:00.385>change <00:01:00.585>in <00:01:00.785>features

18
00:01:01.225 --> 00:01:03.325
<00:01:01.225>or <00:01:01.458>design, <00:01:01.691>the <00:01:01.925>code <00:01:02.158>is <00:01:02.391>so <00:01:02.625>reusable,

19
00:01:03.465 --> 00:01:04.725
<00:01:03.465>it <00:01:03.691>doesn't <00:01:03.918>take <00:01:04.145>time <00:01:04.372>at <00:01:04.598>all.

20
00:01:05.345 --> 00:01:10.265
<00:01:05.345>So <00:01:05.625>let's <00:01:05.905>go <00:01:06.185>through <00:01:06.465>it. <00:01:06.745>So

21
00:01:10.265 --> 00:01:13.185
<00:01:10.265>when <00:01:10.392>I <00:01:10.519>started <00:01:10.646>the <00:01:10.774>company <00:01:10.901>two <00:01:11.028>years <00:01:11.155>ago, <00:01:11.283>as <00:01:11.410>I <00:01:11.537>said, <00:01:11.665>um,

22
00:01:13.465 --> 00:01:16.985
<00:01:13.465>I <00:01:13.698>never <00:01:13.931>really <00:01:14.165>built <00:01:14.398>large <00:01:14.631>scale <00:01:14.865>applications.

23
00:01:17.345 --> 00:01:19.385
<00:01:17.345>I <00:01:17.578>was <00:01:17.811>extremely <00:01:18.045>good, <00:01:18.278>whoever <00:01:18.511>worked <00:01:18.745>products

24
00:01:19.605 --> 00:01:22.025
<00:01:19.605>and <00:01:19.885>building, <00:01:20.165>uh, <00:01:20.445>you <00:01:20.725>know, <00:01:21.005>MVPs

25
00:01:22.025 --> 00:01:24.345
<00:01:22.025>and <00:01:22.225>iterating <00:01:22.425>on, <00:01:22.625>on <00:01:22.825>things <00:01:23.025>very, <00:01:23.225>very <00:01:23.425>quickly.

26
00:01:25.085 --> 00:01:27.985
<00:01:25.085>So <00:01:25.225>I <00:01:25.365>was <00:01:25.505>basically <00:01:25.645>what <00:01:25.785>you <00:01:25.925>could <00:01:26.065>say, <00:01:26.205>a <00:01:26.345>serial <00:01:26.485>hacker.

27
00:01:28.505 --> 00:01:30.545
<00:01:28.505>I <00:01:28.738>was <00:01:28.971>going <00:01:29.205>on <00:01:29.438>so <00:01:29.671>many <00:01:29.905>hackathons

28
00:01:30.845 --> 00:01:32.265
<00:01:30.845>and <00:01:31.271>every <00:01:31.697>new <00:01:32.123>weekend,

29
00:01:32.515 --> 00:01:36.225
<00:01:32.515>every <00:01:32.642>weekend <00:01:32.769>I <00:01:32.896>created <00:01:33.024>a <00:01:33.151>new <00:01:33.278>project, <00:01:33.405>a <00:01:33.533>new <00:01:33.660>sort <00:01:33.787>of <00:01:33.915>app,

30
00:01:36.725 --> 00:01:37.865
<00:01:36.725>and <00:01:36.981>it <00:01:37.238>was <00:01:37.494>really <00:01:37.751>fast.

31
00:01:38.895 --> 00:01:41.995
<00:01:38.895>The <00:01:39.070>problem <00:01:39.245>though <00:01:39.420>is, <00:01:39.595>you <00:01:39.770>know, <00:01:39.945>I <00:01:40.120>was <00:01:40.295>hacking

32
00:01:41.995 --> 00:01:43.515
<00:01:41.995>and <00:01:42.337>not <00:01:42.679>really <00:01:43.021>building <00:01:43.363>something.

33
00:01:43.855 --> 00:01:45.795
<00:01:43.854>And <00:01:44.029>I <00:01:44.204>think <00:01:44.380>that's <00:01:44.554>something <00:01:44.729>which <00:01:44.904>is <00:01:45.079>really <00:01:45.255>difficult

34
00:01:45.855 --> 00:01:47.235
<00:01:45.854>to <00:01:46.103>learn <00:01:46.351>how <00:01:46.600>to <00:01:46.848>do <00:01:47.097>yourself

35
00:01:47.235 --> 00:01:49.035
<00:01:47.235>because <00:01:47.435>there <00:01:47.635>are <00:01:47.835>so <00:01:48.035>many <00:01:48.235>tutorials <00:01:48.435>on <00:01:48.635>how

36
00:01:49.035 --> 00:01:50.315
<00:01:49.035>to <00:01:49.323>make <00:01:49.610>a <00:01:49.899>library <00:01:50.187>work

37
00:01:50.575 --> 00:01:53.795
<00:01:50.575>or <00:01:50.715>how <00:01:50.855>to <00:01:50.995>make, <00:01:51.135>you <00:01:51.275>know, <00:01:51.415>a <00:01:51.555>specific <00:01:51.695>design <00:01:51.835>in <00:01:51.975>CSS,

38
00:01:54.295 --> 00:01:57.595
<00:01:54.295>but <00:01:54.411>you <00:01:54.528>don't <00:01:54.645>really <00:01:54.761>have <00:01:54.878>a <00:01:54.995>tutorial <00:01:55.111>on <00:01:55.228>how <00:01:55.345>to <00:01:55.461>be <00:01:55.578>a <00:01:55.695>very,

39
00:01:58.215 --> 00:02:00.795
<00:01:58.215>you <00:01:58.415>know, <00:01:58.615>scalable <00:01:58.815>maintainable <00:01:59.015>code <00:01:59.215>of <00:01:59.415>great <00:01:59.615>quality

40
00:02:01.425 --> 00:02:03.155
<00:02:01.425>because <00:02:01.891>it's <00:02:02.358>more <00:02:02.825>difficult.

41
00:02:03.155 --> 00:02:06.315
<00:02:03.155>And <00:02:03.295>also <00:02:03.435>perhaps, <00:02:03.575>uh, <00:02:03.715>you <00:02:03.855>know, <00:02:03.995>it <00:02:04.135>depends <00:02:04.275>on <00:02:04.415>the <00:02:04.555>company.

42
00:02:06.575 --> 00:02:08.475
<00:02:06.575>Uh, <00:02:06.750>people <00:02:06.925>in <00:02:07.100>big <00:02:07.275>companies <00:02:07.450>take <00:02:07.625>it <00:02:07.800>for <00:02:07.975>granted.

43
00:02:09.055 --> 00:02:10.555
<00:02:09.055>Big <00:02:09.280>Bitcoin <00:02:09.505>startups <00:02:09.730>don't <00:02:09.955>have <00:02:10.180>the <00:02:10.405>time

44
00:02:10.675 --> 00:02:11.875
<00:02:10.675>to <00:02:11.035>write <00:02:11.395>those <00:02:11.755>articles.

45
00:02:12.115 --> 00:02:14.155
<00:02:12.115>I <00:02:12.255>think <00:02:12.395>there <00:02:12.535>are <00:02:12.675>a <00:02:12.815>lot <00:02:12.955>of <00:02:13.095>reasons <00:02:13.235>why, <00:02:13.375>you <00:02:13.515>know,

46
00:02:14.155 --> 00:02:15.915
<00:02:14.155>you <00:02:14.435>can't <00:02:14.715>just <00:02:14.995>Google <00:02:15.275>online, <00:02:15.555>hey,

47
00:02:16.065 --> 00:02:17.515
<00:02:16.065>best <00:02:16.500>frontend <00:02:16.935>architecture <00:02:17.369>ever

48
00:02:17.515 --> 00:02:18.915
<00:02:17.515>and <00:02:17.767>have <00:02:18.018>everything <00:02:18.271>sorted <00:02:18.523>for <00:02:18.774>you.

49
00:02:20.215 --> 00:02:23.235
<00:02:20.215>Uh, <00:02:20.342>so <00:02:20.469>what <00:02:20.596>I <00:02:20.724>learned <00:02:20.851>is <00:02:20.978>that, <00:02:21.105>um, <00:02:21.233>you <00:02:21.360>know, <00:02:21.487>I <00:02:21.615>had

50
00:02:23.295 --> 00:02:25.035
<00:02:23.295>to <00:02:23.528>change <00:02:23.761>my <00:02:23.995>way <00:02:24.228>of <00:02:24.461>doing <00:02:24.695>things.

51
00:02:25.525 --> 00:02:29.115
<00:02:25.525>React <00:02:25.725>web <00:02:25.925>apps <00:02:26.125>quickly <00:02:26.325>become <00:02:26.525>completely <00:02:26.725>unmaintainable <00:02:26.925>if

52
00:02:29.115 --> 00:02:30.155
<00:02:29.115>you <00:02:29.302>code <00:02:29.489>them <00:02:29.676>on <00:02:29.863>the <00:02:30.051>fly.

53
00:02:30.775 --> 00:02:33.995
<00:02:30.775>And <00:02:30.902>I <00:02:31.029>could <00:02:31.156>imagine <00:02:31.284>how <00:02:31.411>much <00:02:31.538>of <00:02:31.665>a <00:02:31.793>nightmare <00:02:31.920>would <00:02:32.047>be <00:02:32.175>to,

54
00:02:34.255 --> 00:02:36.635
<00:02:34.255>you <00:02:34.488>know, <00:02:34.721>communicate <00:02:34.954>between <00:02:35.188>developers <00:02:35.421>to <00:02:35.655>know

55
00:02:36.635 --> 00:02:39.275
<00:02:36.635>what <00:02:36.790>they're <00:02:36.946>doing, <00:02:37.101>where <00:02:37.257>they <00:02:37.412>are <00:02:37.568>building <00:02:37.723>the <00:02:37.879>new <00:02:38.035>things,

56
00:02:39.735 --> 00:02:41.675
<00:02:39.735>to <00:02:39.935>explain <00:02:40.135>to <00:02:40.335>them <00:02:40.535>what <00:02:40.735>they <00:02:40.935>can <00:02:41.135>reuse,

57
00:02:41.675 --> 00:02:42.675
<00:02:41.675>what <00:02:41.975>they <00:02:42.275>can't <00:02:42.575>reuse.

58
00:02:43.255 --> 00:02:45.435
<00:02:43.255>You <00:02:43.394>know, <00:02:43.535>I <00:02:43.674>was <00:02:43.815>imagining <00:02:43.954>in <00:02:44.095>my <00:02:44.234>head <00:02:44.375>two <00:02:44.515>years <00:02:44.655>ago,

59
00:02:45.615 --> 00:02:47.115
<00:02:45.615>how <00:02:45.840>am <00:02:46.065>I <00:02:46.290>going <00:02:46.515>to <00:02:46.740>make <00:02:46.965>sure

60
00:02:47.115 --> 00:02:50.515
<00:02:47.115>that <00:02:47.255>we <00:02:47.395>can <00:02:47.535>grow <00:02:47.675>the <00:02:47.815>team <00:02:47.955>consistently, <00:02:48.095>uh, <00:02:48.235>with, <00:02:48.375>you <00:02:48.515>know,

61
00:02:50.605 --> 00:02:53.555
<00:02:50.605>trust <00:02:50.838>and <00:02:51.071>without <00:02:51.304>having <00:02:51.538>this <00:02:51.771>constant <00:02:52.005>communication.

62
00:02:54.615 --> 00:02:57.075
<00:02:54.615>So <00:02:54.895>that's <00:02:55.175>what <00:02:55.455>this <00:02:55.735>is <00:02:56.015>about.

63
00:02:58.815 --> 00:03:02.095
<00:02:58.815>As <00:02:58.942>a <00:02:59.069>bottom <00:02:59.196>line, <00:02:59.324>what <00:02:59.451>I <00:02:59.578>thought <00:02:59.705>I <00:02:59.833>needed <00:02:59.960>to <00:03:00.087>learn <00:03:00.215>was,

64
00:03:02.195 --> 00:03:05.935
<00:03:02.195>you <00:03:02.322>know, <00:03:02.449>I <00:03:02.576>needed <00:03:02.704>to <00:03:02.831>find <00:03:02.958>a <00:03:03.085>system, <00:03:03.213>a <00:03:03.340>sort <00:03:03.467>of <00:03:03.595>workflow

65
00:03:06.545 --> 00:03:10.735
<00:03:06.545>where <00:03:06.684>I <00:03:06.825>can <00:03:06.964>keep <00:03:07.105>a <00:03:07.244>low <00:03:07.385>developer <00:03:07.524>overhead <00:03:07.665>where, <00:03:07.804>you <00:03:07.945>know,

66
00:03:10.735 --> 00:03:13.255
<00:03:10.735>in <00:03:10.935>order <00:03:11.135>to <00:03:11.335>code <00:03:11.535>something, <00:03:11.735>it's <00:03:11.935>not <00:03:12.135>going

67
00:03:13.255 --> 00:03:16.575
<00:03:13.255>to <00:03:13.371>take <00:03:13.488>me <00:03:13.605>like <00:03:13.721>one <00:03:13.838>entire <00:03:13.954>day <00:03:14.071>to <00:03:14.188>talk <00:03:14.305>with <00:03:14.421>all <00:03:14.538>the <00:03:14.655>people

68
00:03:16.995 --> 00:03:18.975
<00:03:16.995>and <00:03:17.150>understand <00:03:17.306>how <00:03:17.461>we <00:03:17.617>are <00:03:17.772>going <00:03:17.928>to <00:03:18.083>make <00:03:18.239>it <00:03:18.395>happen.

69
00:03:19.395 --> 00:03:20.935
<00:03:19.395>The <00:03:19.626>structure <00:03:19.857>needs <00:03:20.088>to <00:03:20.319>be <00:03:20.550>so <00:03:20.781>clear.

70
00:03:21.675 --> 00:03:23.815
<00:03:21.675>Uh, <00:03:21.850>you <00:03:22.025>can <00:03:22.200>have <00:03:22.375>like <00:03:22.550>a <00:03:22.725>five <00:03:22.900>minutes <00:03:23.075>meeting

71
00:03:24.075 --> 00:03:26.695
<00:03:24.075>and <00:03:24.250>everyone <00:03:24.424>understands <00:03:24.600>each <00:03:24.774>other <00:03:24.950>in <00:03:25.125>the <00:03:25.299>same <00:03:25.475>language

72
00:03:26.795 --> 00:03:28.615
<00:03:26.795>and <00:03:27.075>know <00:03:27.355>where <00:03:27.635>things <00:03:27.915>should <00:03:28.195>be.

73
00:03:29.465 --> 00:03:30.845
<00:03:29.465>And <00:03:29.879>also, <00:03:30.293>you <00:03:30.707>know,

74
00:03:31.315 --> 00:03:33.885
<00:03:31.315>even <00:03:31.470>though <00:03:31.626>I <00:03:31.781>really <00:03:31.937>wanted <00:03:32.092>something <00:03:32.248>which <00:03:32.403>was <00:03:32.559>very <00:03:32.715>well

75
00:03:34.125 --> 00:03:35.765
<00:03:34.125>structured <00:03:34.405>and <00:03:34.685>maintainable <00:03:34.965>in <00:03:35.245>my <00:03:35.525>head,

76
00:03:35.825 --> 00:03:39.535
<00:03:35.825>it <00:03:36.000>was <00:03:36.174>in <00:03:36.350>contradiction <00:03:36.524>with <00:03:36.700>the <00:03:36.875>fact <00:03:37.049>that <00:03:37.225>it,

77
00:03:39.555 --> 00:03:41.495
<00:03:39.555>it <00:03:39.905>may <00:03:40.255>not <00:03:40.605>allow <00:03:40.955>flexibility.

78
00:03:41.955 --> 00:03:44.615
<00:03:41.954>You <00:03:42.082>know, <00:03:42.209>if <00:03:42.336>I <00:03:42.464>needed <00:03:42.591>to <00:03:42.718>change <00:03:42.845>something, <00:03:42.973>I <00:03:43.100>was <00:03:43.227>there <00:03:43.355>like,

79
00:03:44.615 --> 00:03:48.215
<00:03:44.615>okay, <00:03:44.742>well <00:03:44.869>how <00:03:44.996>do <00:03:45.124>I <00:03:45.251>change <00:03:45.378>something <00:03:45.505>if, <00:03:45.633>if <00:03:45.760>it's <00:03:45.887>so <00:03:46.015>rigid

80
00:03:48.355 --> 00:03:50.695
<00:03:48.355>and <00:03:48.588>the <00:03:48.821>structure <00:03:49.054>is <00:03:49.288>so <00:03:49.521>dictated <00:03:49.755>by,

81
00:03:50.995 --> 00:03:52.695
<00:03:50.995>by <00:03:51.170>something <00:03:51.345>at <00:03:51.520>the <00:03:51.695>start, <00:03:51.870>how <00:03:52.045>am <00:03:52.220>I <00:03:52.395>going

82
00:03:52.695 --> 00:03:53.735
<00:03:52.695>to <00:03:52.929>do <00:03:53.163>to <00:03:53.397>change <00:03:53.631>something?

83
00:03:55.115 --> 00:03:57.175
<00:03:55.115>And <00:03:55.465>actually, <00:03:55.815>I, <00:03:56.165>I <00:03:56.515>realized

84
00:03:57.285 --> 00:03:59.375
<00:03:57.285>that <00:03:57.484>it <00:03:57.685>was <00:03:57.885>not <00:03:58.085>a <00:03:58.285>contradiction <00:03:58.484>at <00:03:58.685>all.

85
00:03:59.835 --> 00:04:02.335
<00:03:59.835>Um, <00:04:00.035>you <00:04:00.235>know, <00:04:00.435>having <00:04:00.635>a <00:04:00.835>very <00:04:01.035>clear <00:04:01.235>systems

86
00:04:02.555 --> 00:04:05.215
<00:04:02.555>and <00:04:02.788>having <00:04:03.021>really <00:04:03.255>clear <00:04:03.488>structure <00:04:03.721>just <00:04:03.955>allows

87
00:04:05.235 --> 00:04:07.015
<00:04:05.235>for <00:04:05.585>emo <00:04:05.935>even <00:04:06.285>more <00:04:06.635>flexibility.

88
00:04:07.595 --> 00:04:09.095
<00:04:07.595>Um, <00:04:07.932>because <00:04:08.270>then, <00:04:08.607>you <00:04:08.945>know,

89
00:04:09.235 --> 00:04:12.295
<00:04:09.235>you <00:04:09.410>can <00:04:09.585>change <00:04:09.760>across <00:04:09.935>your <00:04:10.110>whole <00:04:10.285>application <00:04:10.460>at <00:04:10.635>once,

90
00:04:12.605 --> 00:04:16.095
<00:04:12.605>something <00:04:12.804>without <00:04:13.005>having <00:04:13.204>to <00:04:13.405>say, <00:04:13.605>oh, <00:04:13.804>in <00:04:14.005>order

91
00:04:16.155 --> 00:04:18.055
<00:04:16.154>to <00:04:16.388>change <00:04:16.621>this <00:04:16.854>feature <00:04:17.088>slightly, <00:04:17.321>we <00:04:17.554>need

92
00:04:18.055 --> 00:04:21.415
<00:04:18.055>to <00:04:18.195>change <00:04:18.334>the <00:04:18.475>code <00:04:18.615>in <00:04:18.755>3, <00:04:18.894>5, <00:04:19.035>6, <00:04:19.175>10 <00:04:19.315>different <00:04:19.454>files.

93
00:04:21.835 --> 00:04:24.735
<00:04:21.834>You <00:04:21.990>just <00:04:22.146>have <00:04:22.301>one, <00:04:22.457>one <00:04:22.612>file, <00:04:22.768>which <00:04:22.923>contains, <00:04:23.079>you <00:04:23.234>know,

94
00:04:24.875 --> 00:04:27.095
<00:04:24.875>the <00:04:25.225>same <00:04:25.575>reusable <00:04:25.925>ui, <00:04:26.275>and

95
00:04:27.245 --> 00:04:29.935
<00:04:27.245>therefore <00:04:27.445>it's <00:04:27.645>more <00:04:27.845>flexible <00:04:28.045>if <00:04:28.245>I <00:04:28.445>decide <00:04:28.645>tomorrow

96
00:04:30.605 --> 00:04:33.335
<00:04:30.605>that <00:04:30.805>the <00:04:31.005>whole <00:04:31.205>application <00:04:31.405>needs <00:04:31.605>a <00:04:31.805>new <00:04:32.005>vibe

97
00:04:33.555 --> 00:04:36.895
<00:04:33.555>and, <00:04:33.755>you <00:04:33.955>know, <00:04:34.155>new <00:04:34.355>fonts, <00:04:34.555>new <00:04:34.755>button <00:04:34.955>themes

98
00:04:36.915 --> 00:04:39.775
<00:04:36.915>and <00:04:37.070>stuff <00:04:37.226>like <00:04:37.381>that, <00:04:37.537>um, <00:04:37.692>it's <00:04:37.848>a <00:04:38.003>five <00:04:38.159>minutes <00:04:38.315>job.

99
00:04:42.065 --> 00:04:43.125
<00:04:42.065>So <00:04:42.383>here's <00:04:42.701>what <00:04:43.019>happened.

100
00:04:43.365 --> 00:04:45.245
<00:04:43.365>I <00:04:43.598>went <00:04:43.831>to <00:04:44.065>Jeremy <00:04:44.298>Hindel, <00:04:44.531>my <00:04:44.765>co-founder,

101
00:04:45.345 --> 00:04:47.645
<00:04:45.345>and <00:04:45.500>I <00:04:45.656>said, <00:04:45.811>you <00:04:45.967>know, <00:04:46.122>what, <00:04:46.278>what <00:04:46.433>should <00:04:46.589>I <00:04:46.745>do?

102
00:04:47.715 --> 00:04:49.085
<00:04:47.715>What <00:04:47.891>do <00:04:48.067>you <00:04:48.243>think <00:04:48.419>is <00:04:48.595>the <00:04:48.771>best <00:04:48.948>practice?

103
00:04:49.105 --> 00:04:51.205
<00:04:49.105>And <00:04:49.280>he <00:04:49.455>said, <00:04:49.630>you <00:04:49.805>know, <00:04:49.980>I'm <00:04:50.155>still <00:04:50.330>learning <00:04:50.505>myself

104
00:04:51.905 --> 00:04:53.205
<00:04:51.905>and <00:04:52.138>what <00:04:52.373>you <00:04:52.607>should <00:04:52.841>do, <00:04:53.075>whoever,

105
00:04:53.205 --> 00:04:56.045
<00:04:53.205>because <00:04:53.438>that's <00:04:53.671>your <00:04:53.905>responsibility, <00:04:54.138>you <00:04:54.371>know, <00:04:54.604>go

106
00:04:56.145 --> 00:04:59.085
<00:04:56.145>and <00:04:56.300>I'm <00:04:56.456>quoting <00:04:56.611>Build <00:04:56.767>on <00:04:56.922>the <00:04:57.078>shoulders <00:04:57.233>of <00:04:57.389>the <00:04:57.544>Giants.

107
00:04:59.665 --> 00:05:02.565
<00:04:59.665>He <00:04:59.805>said, <00:04:59.945>you <00:05:00.085>know, <00:05:00.225>go <00:05:00.365>and <00:05:00.505>see <00:05:00.645>how <00:05:00.785>Airbnb <00:05:00.925>did <00:05:01.065>it,

108
00:05:02.565 --> 00:05:05.805
<00:05:02.565>because <00:05:02.720>Airbnb <00:05:02.876>in <00:05:03.031>our <00:05:03.187>head <00:05:03.342>was, <00:05:03.498>you <00:05:03.653>know, <00:05:03.809>we <00:05:03.965>took

109
00:05:05.825 --> 00:05:07.005
<00:05:05.825>so <00:05:06.090>much <00:05:06.356>inspiration <00:05:06.621>from <00:05:06.887>them.

110
00:05:07.335 --> 00:05:12.125
<00:05:07.335>There <00:05:07.451>are <00:05:07.568>an <00:05:07.685>app <00:05:07.801>where <00:05:07.918>their <00:05:08.034>UI <00:05:08.151>system <00:05:08.268>is <00:05:08.385>so <00:05:08.501>clear <00:05:08.618>and <00:05:08.734>nice,

111
00:05:12.225 --> 00:05:14.565
<00:05:12.225>and <00:05:12.458>their <00:05:12.691>UX <00:05:12.925>is <00:05:13.158>always <00:05:13.391>very <00:05:13.625>consistent.

112
00:05:15.185 --> 00:05:18.605
<00:05:15.185>The <00:05:15.385>front <00:05:15.585>end <00:05:15.785>of <00:05:15.985>Airbnb <00:05:16.185>is <00:05:16.385>absolutely <00:05:16.585>amazing.

113
00:05:19.225 --> 00:05:21.805
<00:05:19.225>Um, <00:05:19.400>they <00:05:19.575>have, <00:05:19.750>they <00:05:19.925>have <00:05:20.100>achieved <00:05:20.275>something <00:05:20.450>really <00:05:20.625>great.

114
00:05:22.155 --> 00:05:23.765
<00:05:22.155>It's <00:05:22.621>not <00:05:23.088>messy. <00:05:23.554>And,

115
00:05:23.905 --> 00:05:26.325
<00:05:23.905>and, <00:05:24.080>you <00:05:24.255>know, <00:05:24.429>they <00:05:24.604>have <00:05:24.780>so <00:05:24.955>many <00:05:25.130>engineers <00:05:25.304>and,

116
00:05:26.705 --> 00:05:28.325
<00:05:26.705>and <00:05:26.984>you <00:05:27.265>know, <00:05:27.544>where <00:05:27.825>they're <00:05:28.104>like,

117
00:05:28.325 --> 00:05:29.605
<00:05:28.325>they <00:05:28.613>definitely <00:05:28.901>did <00:05:29.189>something <00:05:29.477>right?

118
00:05:30.805 --> 00:05:33.225
<00:05:30.805>So <00:05:30.980>I <00:05:31.155>went <00:05:31.330>and <00:05:31.505>saw <00:05:31.680>how <00:05:31.855>Airbnb <00:05:32.030>did <00:05:32.205>it.

119
00:05:33.335 --> 00:05:34.625
<00:05:33.335>I've <00:05:33.567>read <00:05:33.799>a <00:05:34.031>lot <00:05:34.263>of <00:05:34.496>articles.

120
00:05:34.625 --> 00:05:38.425
<00:05:34.625>Thankfully <00:05:34.800>their <00:05:34.975>engineering <00:05:35.150>team, <00:05:35.325>um, <00:05:35.500>is <00:05:35.675>very <00:05:35.850>active <00:05:36.025>in,

121
00:05:38.425 --> 00:05:39.505
<00:05:38.425>you <00:05:38.749>know, <00:05:39.073>writing <00:05:39.397>articles

122
00:05:39.505 --> 00:05:41.065
<00:05:39.505>and <00:05:39.738>blogs <00:05:39.971>around <00:05:40.205>how <00:05:40.438>they <00:05:40.671>do <00:05:40.905>things.

123
00:05:41.125 --> 00:05:43.065
<00:05:41.125>So <00:05:41.300>it's <00:05:41.475>amazing. <00:05:41.650>There's <00:05:41.825>so <00:05:42.000>much <00:05:42.175>resources <00:05:42.350>out <00:05:42.525>there,

124
00:05:43.685 --> 00:05:45.465
<00:05:43.685>you <00:05:43.840>just <00:05:43.996>need <00:05:44.151>to <00:05:44.307>know <00:05:44.462>that <00:05:44.618>you're <00:05:44.773>looking <00:05:44.929>for <00:05:45.085>it.

125
00:05:45.965 --> 00:05:49.265
<00:05:45.965>And <00:05:46.140>this <00:05:46.315>is <00:05:46.490>where <00:05:46.665>I <00:05:46.840>came <00:05:47.015>across <00:05:47.190>their <00:05:47.365>secret,

126
00:05:49.395 --> 00:05:51.265
<00:05:49.395>which <00:05:49.745>is <00:05:50.094>design <00:05:50.445>language <00:05:50.794>systems.

127
00:05:52.525 --> 00:05:54.745
<00:05:52.525>And <00:05:52.724>at <00:05:52.924>first <00:05:53.125>when <00:05:53.325>I <00:05:53.525>was <00:05:53.724>reading <00:05:53.924>about

128
00:05:54.805 --> 00:05:56.305
<00:05:54.805>how <00:05:55.142>beer <00:05:55.480>Airbnb <00:05:55.817>did <00:05:56.155>it,

129
00:05:56.365 --> 00:05:59.165
<00:05:56.365>and <00:05:56.520>they <00:05:56.676>said <00:05:56.831>it's <00:05:56.987>thanks <00:05:57.142>to <00:05:57.298>our <00:05:57.453>design <00:05:57.609>language <00:05:57.765>system,

130
00:05:59.965 --> 00:06:01.685
<00:05:59.965>I <00:06:00.165>thought <00:06:00.365>it <00:06:00.565>was <00:06:00.765>a <00:06:00.965>bit <00:06:01.165>far <00:06:01.365>stretched

131
00:06:01.825 --> 00:06:03.845
<00:06:01.825>and <00:06:02.058>surely <00:06:02.291>they <00:06:02.525>would <00:06:02.758>have <00:06:02.991>other <00:06:03.224>secrets.

132
00:06:04.365 --> 00:06:08.845
<00:06:04.365>I <00:06:04.492>was <00:06:04.619>skeptic <00:06:04.746>at <00:06:04.874>first <00:06:05.001>one, <00:06:05.128>I <00:06:05.255>never <00:06:05.383>ever <00:06:05.510>heard <00:06:05.637>of <00:06:05.765>it

133
00:06:08.845 --> 00:06:13.325
<00:06:08.845>before <00:06:09.000>as <00:06:09.156>a <00:06:09.311>hardcore, <00:06:09.467>you <00:06:09.622>know, <00:06:09.778>pure <00:06:09.933>like <00:06:10.089>coders <00:06:10.245>where

134
00:06:13.345 --> 00:06:14.445
<00:06:13.345>to <00:06:13.840>me, <00:06:14.335>CSS

135
00:06:14.445 --> 00:06:16.645
<00:06:14.445>and <00:06:14.600>like <00:06:14.756>all <00:06:14.911>the <00:06:15.067>design <00:06:15.222>was <00:06:15.378>something <00:06:15.533>which <00:06:15.689>was <00:06:15.844>separate

136
00:06:16.825 --> 00:06:18.645
<00:06:16.825>to <00:06:17.058>the <00:06:17.291>actual <00:06:17.525>logic <00:06:17.758>of <00:06:17.991>the <00:06:18.224>app.

137
00:06:18.645 --> 00:06:19.765
<00:06:18.645>And <00:06:18.846>that <00:06:19.048>was <00:06:19.249>a <00:06:19.451>huge <00:06:19.652>mistake.

138
00:06:20.225 --> 00:06:22.125
<00:06:20.225>Uh, <00:06:20.400>my <00:06:20.575>way <00:06:20.750>of <00:06:20.925>thinking <00:06:21.100>around <00:06:21.275>that <00:06:21.450>was <00:06:21.625>wrong.

139
00:06:22.585 --> 00:06:25.805
<00:06:22.585>Um, <00:06:22.760>I <00:06:22.935>thought <00:06:23.109>design <00:06:23.284>language <00:06:23.460>would <00:06:23.635>be <00:06:23.810>more <00:06:23.984>relevant

140
00:06:25.825 --> 00:06:28.605
<00:06:25.825>to <00:06:26.058>designers, <00:06:26.291>to, <00:06:26.525>you <00:06:26.758>know, <00:06:26.991>marketing <00:06:27.224>people

141
00:06:28.745 --> 00:06:30.725
<00:06:28.745>and <00:06:29.211>branding <00:06:29.678>teams, <00:06:30.145>and

142
00:06:30.725 --> 00:06:33.405
<00:06:30.725>therefore, <00:06:30.900>you <00:06:31.075>know, <00:06:31.250>I <00:06:31.425>was, <00:06:31.600>they're <00:06:31.775>like, <00:06:31.950>Hmm, <00:06:32.125>okay.

143
00:06:33.755 --> 00:06:35.605
<00:06:33.755>It's <00:06:33.930>weird <00:06:34.105>that <00:06:34.280>it's <00:06:34.455>not <00:06:34.630>something <00:06:34.805>around, <00:06:34.980>you <00:06:35.155>know,

144
00:06:35.605 --> 00:06:37.485
<00:06:35.605>the <00:06:35.780>logic <00:06:35.955>of <00:06:36.130>your <00:06:36.305>code <00:06:36.480>or <00:06:36.655>something <00:06:36.830>like <00:06:37.005>that.

145
00:06:37.985 --> 00:06:40.445
<00:06:37.985>Um, <00:06:38.185>it <00:06:38.385>was <00:06:38.585>purely <00:06:38.785>based <00:06:38.985>on <00:06:39.185>design <00:06:39.385>language.

146
00:06:41.225 --> 00:06:45.485
<00:06:41.225>So <00:06:41.352>I <00:06:41.479>said, <00:06:41.606>okay, <00:06:41.734>well, <00:06:41.861>I <00:06:41.988>need <00:06:42.115>to <00:06:42.243>do <00:06:42.370>some <00:06:42.497>research <00:06:42.625>on,

147
00:06:45.625 --> 00:06:48.205
<00:06:45.625>you <00:06:45.800>know, <00:06:45.975>try <00:06:46.150>to <00:06:46.325>get <00:06:46.500>past <00:06:46.675>my <00:06:46.850>initial <00:06:47.025>skepticism

148
00:06:48.305 --> 00:06:50.365
<00:06:48.305>and <00:06:48.480>do <00:06:48.655>some <00:06:48.830>research <00:06:49.005>on <00:06:49.180>what <00:06:49.355>it <00:06:49.530>actually <00:06:49.705>means.

149
00:06:50.665 --> 00:06:55.285
<00:06:50.665>And, <00:06:50.805>you <00:06:50.945>know, <00:06:51.085>in <00:06:51.225>terms <00:06:51.365>of, <00:06:51.505>you <00:06:51.645>know, <00:06:51.785>MyCode, <00:06:51.925>again, <00:06:52.065>uh,

150
00:06:55.285 --> 00:06:57.285
<00:06:55.284>this <00:06:55.484>is <00:06:55.684>one <00:06:55.885>of <00:06:56.085>the <00:06:56.284>examples <00:06:56.484>of, <00:06:56.684>um,

151
00:06:57.385 --> 00:06:59.965
<00:06:57.385>of <00:06:57.560>resources <00:06:57.735>you <00:06:57.909>can <00:06:58.085>find <00:06:58.260>online, <00:06:58.435>uh, <00:06:58.610>for <00:06:58.784>yourself.

152
00:07:00.145 --> 00:07:02.325
<00:07:00.145>You <00:07:00.300>know, <00:07:00.456>the <00:07:00.611>way <00:07:00.767>we <00:07:00.922>build, <00:07:01.078>how <00:07:01.233>we <00:07:01.389>are <00:07:01.544>thinking,

153
00:07:02.325 --> 00:07:05.125
<00:07:02.325>the <00:07:02.500>Airbnb <00:07:02.675>app <00:07:02.849>changed <00:07:03.025>the <00:07:03.200>way <00:07:03.375>we <00:07:03.550>approach <00:07:03.724>design.

154
00:07:05.395 --> 00:07:07.325
<00:07:05.395>Like <00:07:05.534>it's <00:07:05.674>a <00:07:05.815>thing. <00:07:05.955>It's <00:07:06.094>not <00:07:06.234>just <00:07:06.375>me <00:07:06.515>who <00:07:06.655>said, <00:07:06.794>oh,

155
00:07:07.465 --> 00:07:09.245
<00:07:07.465>Airbnb <00:07:07.664>is <00:07:07.864>a <00:07:08.065>good <00:07:08.265>idea <00:07:08.465>to, <00:07:08.664>you <00:07:08.864>know,

156
00:07:09.465 --> 00:07:10.805
<00:07:09.465>to <00:07:09.706>do <00:07:09.947>this <00:07:10.188>sort <00:07:10.429>of <00:07:10.671>stuff.

157
00:07:10.995 --> 00:07:13.805
<00:07:10.995>They <00:07:11.122>are <00:07:11.249>known <00:07:11.376>now <00:07:11.504>in <00:07:11.631>the <00:07:11.758>field <00:07:11.885>as <00:07:12.013>the <00:07:12.140>kind <00:07:12.267>of <00:07:12.395>people

158
00:07:13.865 --> 00:07:17.125
<00:07:13.865>who <00:07:14.005>pioneer <00:07:14.145>a <00:07:14.285>whole <00:07:14.425>new <00:07:14.565>approach <00:07:14.705>to <00:07:14.845>how <00:07:14.985>you <00:07:15.125>build <00:07:15.265>software,

159
00:07:17.125 --> 00:07:18.245
<00:07:17.125>especially <00:07:17.461>on <00:07:17.797>front <00:07:18.133>end.

160
00:07:20.385 --> 00:07:24.645
<00:07:20.385>So <00:07:20.540>let's <00:07:20.696>see, <00:07:20.851>uh, <00:07:21.007>a <00:07:21.162>quote <00:07:21.318>of <00:07:21.473>this <00:07:21.629>article, <00:07:21.784>uh,

161
00:07:24.715 --> 00:07:27.125
<00:07:24.715>this <00:07:24.914>article <00:07:25.114>actually <00:07:25.315>has <00:07:25.515>been <00:07:25.715>written <00:07:25.914>by <00:07:26.114>Airbnb.

162
00:07:28.025 --> 00:07:32.645
<00:07:28.025>So <00:07:28.200>they <00:07:28.375>said <00:07:28.549>software <00:07:28.724>design <00:07:28.900>has <00:07:29.075>unfortunately <00:07:29.250>not <00:07:29.424>evolved

163
00:07:32.825 --> 00:07:33.845
<00:07:32.825>at <00:07:33.131>a <00:07:33.437>similar <00:07:33.743>base.

164
00:07:34.225 --> 00:07:37.565
<00:07:34.225>The <00:07:34.400>gap <00:07:34.575>between <00:07:34.750>designers <00:07:34.925>and <00:07:35.100>engineers <00:07:35.275>has <00:07:35.450>only <00:07:35.625>increased.

165
00:07:38.105 --> 00:07:40.725
<00:07:38.105>Design <00:07:38.305>teams <00:07:38.505>can <00:07:38.705>often <00:07:38.905>struggle <00:07:39.105>to <00:07:39.305>reach <00:07:39.505>accountants

166
00:07:40.725 --> 00:07:42.285
<00:07:40.725>that <00:07:41.075>balances <00:07:41.425>the <00:07:41.775>creative <00:07:42.125>process

167
00:07:42.545 --> 00:07:44.205
<00:07:42.545>and <00:07:42.895>cycles <00:07:43.245>of <00:07:43.595>continuous <00:07:43.945>innovation.

168
00:07:44.555 --> 00:07:47.765
<00:07:44.555>Quality <00:07:44.788>suffers, <00:07:45.021>the <00:07:45.255>experience <00:07:45.488>becomes <00:07:45.721>less <00:07:45.955>cohesive

169
00:07:48.305 --> 00:07:51.045
<00:07:48.305>and <00:07:48.538>talented <00:07:48.771>people <00:07:49.005>spend <00:07:49.238>an <00:07:49.471>inordinate <00:07:49.705>amount

170
00:07:51.045 --> 00:07:53.965
<00:07:51.045>of <00:07:51.278>time <00:07:51.511>simply <00:07:51.745>managing <00:07:51.978>communication <00:07:52.211>across <00:07:52.445>disciplines.

171
00:07:54.245 --> 00:07:55.805
<00:07:54.245>I <00:07:54.400>don't <00:07:54.556>know <00:07:54.711>if <00:07:54.867>this <00:07:55.022>rings <00:07:55.178>a <00:07:55.333>bell <00:07:55.489>for <00:07:55.645>you.

172
00:07:56.245 --> 00:07:59.165
<00:07:56.245>I <00:07:56.385>can <00:07:56.525>imagine <00:07:56.665>that <00:07:56.805>for <00:07:56.945>a <00:07:57.085>lot <00:07:57.225>of <00:07:57.365>companies, <00:07:57.505>this <00:07:57.645>kind

173
00:07:59.165 --> 00:08:02.125
<00:07:59.165>of <00:07:59.320>whole <00:07:59.476>bureaucracy <00:07:59.631>kind <00:07:59.787>of, <00:07:59.942>you <00:08:00.098>know, <00:08:00.253>rings <00:08:00.409>a <00:08:00.565>bell

174
00:08:02.825 --> 00:08:06.525
<00:08:02.825>by <00:08:03.000>focusing <00:08:03.175>on <00:08:03.349>the <00:08:03.525>methods <00:08:03.700>of <00:08:03.875>working <00:08:04.050>across <00:08:04.224>disciplines,

175
00:08:07.205 --> 00:08:10.285
<00:08:07.205>building <00:08:07.405>better <00:08:07.604>tools <00:08:07.805>and <00:08:08.005>creating <00:08:08.205>a <00:08:08.405>unified <00:08:08.604>system,

176
00:08:10.825 --> 00:08:12.965
<00:08:10.825>we <00:08:11.025>can <00:08:11.224>use <00:08:11.425>our <00:08:11.625>time <00:08:11.825>to <00:08:12.025>apply <00:08:12.224>creativity

177
00:08:13.265 --> 00:08:16.085
<00:08:13.265>to <00:08:13.465>solve <00:08:13.664>bigger <00:08:13.865>challenges <00:08:14.065>over <00:08:14.265>the <00:08:14.465>coming <00:08:14.664>months.

178
00:08:16.345 --> 00:08:17.725
<00:08:16.345>We <00:08:16.593>aim <00:08:16.841>to <00:08:17.090>be <00:08:17.338>fully <00:08:17.587>transparent

179
00:08:17.825 --> 00:08:19.685
<00:08:17.825>and <00:08:18.104>release <00:08:18.385>detailed <00:08:18.664>case <00:08:18.945>studies <00:08:19.224>on

180
00:08:19.685 --> 00:08:21.045
<00:08:19.685>how <00:08:19.991>our <00:08:20.297>system <00:08:20.603>is <00:08:20.909>defined

181
00:08:21.305 --> 00:08:22.485
<00:08:21.305>and <00:08:21.659>what <00:08:22.013>decisions <00:08:22.367>going

182
00:08:22.485 --> 00:08:24.565
<00:08:22.485>to <00:08:22.718>design <00:08:22.951>in <00:08:23.185>components, <00:08:23.418>patterns, <00:08:23.651>and <00:08:23.885>goals.

183
00:08:25.185 --> 00:08:26.885
<00:08:25.185>And <00:08:25.535>thankfully, <00:08:25.885>um, <00:08:26.235>by <00:08:26.585>now,

184
00:08:26.955 --> 00:08:30.045
<00:08:26.955>they <00:08:27.130>have <00:08:27.305>indeed <00:08:27.479>put <00:08:27.655>all <00:08:27.830>those <00:08:28.005>resources <00:08:28.180>out <00:08:28.354>there,

185
00:08:30.105 --> 00:08:31.565
<00:08:30.105>and <00:08:30.292>I'm <00:08:30.480>also <00:08:30.668>going <00:08:30.855>to <00:08:31.043>go <00:08:31.231>through <00:08:31.419>them.

186
00:08:33.185 --> 00:08:35.525
<00:08:33.184>So, <00:08:33.464>you <00:08:33.744>know, <00:08:34.025>atomic <00:08:34.304>design <00:08:34.584>was

187
00:08:35.525 --> 00:08:36.845
<00:08:35.525>what <00:08:35.921>they <00:08:36.317>released <00:08:36.712>afterwards.

188
00:08:36.955 --> 00:08:39.445
<00:08:36.955>They <00:08:37.110>went <00:08:37.266>full <00:08:37.421>on <00:08:37.577>to, <00:08:37.732>you <00:08:37.888>know, <00:08:38.043>the <00:08:38.199>detail <00:08:38.355>of

189
00:08:39.465 --> 00:08:41.165
<00:08:39.465>how <00:08:39.815>their <00:08:40.165>application <00:08:40.515>is <00:08:40.865>structured

190
00:08:42.105 --> 00:08:47.045
<00:08:42.105>and <00:08:42.232>what <00:08:42.359>they <00:08:42.486>have, <00:08:42.614>you <00:08:42.741>know, <00:08:42.868>kind <00:08:42.995>of <00:08:43.123>released <00:08:43.250>was <00:08:43.377>the <00:08:43.505>fact

191
00:08:47.045 --> 00:08:50.365
<00:08:47.045>that <00:08:47.245>they <00:08:47.444>are <00:08:47.645>all <00:08:47.844>centered <00:08:48.045>around <00:08:48.245>atomic <00:08:48.444>design

192
00:08:50.425 --> 00:08:52.685
<00:08:50.425>as <00:08:50.625>a <00:08:50.824>methodology, <00:08:51.025>as <00:08:51.224>a <00:08:51.425>way <00:08:51.625>of <00:08:51.824>thinking,

193
00:08:52.945 --> 00:08:54.965
<00:08:52.945>and <00:08:53.120>as <00:08:53.295>a <00:08:53.470>way <00:08:53.645>of <00:08:53.820>structuring <00:08:53.995>your <00:08:54.170>actual <00:08:54.345>code.

194
00:08:55.145 --> 00:08:56.965
<00:08:55.145>So <00:08:55.319>we <00:08:55.495>are <00:08:55.670>already <00:08:55.845>going <00:08:56.020>a <00:08:56.194>bit <00:08:56.370>more <00:08:56.545>deeper

195
00:08:58.295 --> 00:08:59.625
<00:08:58.295>when <00:08:58.694>addressing <00:08:59.093>these <00:08:59.492>issues.

196
00:08:59.685 --> 00:09:01.865
<00:08:59.685>We <00:08:59.859>first <00:09:00.035>had <00:09:00.209>to <00:09:00.385>change <00:09:00.560>the <00:09:00.734>way <00:09:00.910>we <00:09:01.084>understand

197
00:09:01.895 --> 00:09:02.985
<00:09:01.895>application <00:09:02.876>design.

198
00:09:03.525 --> 00:09:06.745
<00:09:03.525>It <00:09:03.652>was <00:09:03.779>important <00:09:03.906>to <00:09:04.034>stop <00:09:04.161>seeing <00:09:04.288>the <00:09:04.415>apps <00:09:04.543>as <00:09:04.670>sets <00:09:04.797>of <00:09:04.925>pages,

199
00:09:07.445 --> 00:09:08.945
<00:09:07.445>but <00:09:07.715>instead <00:09:07.985>as <00:09:08.255>a <00:09:08.525>design <00:09:08.795>system.

200
00:09:09.645 --> 00:09:11.785
<00:09:09.645>As <00:09:09.800>a <00:09:09.956>matter <00:09:10.111>of <00:09:10.267>fact, <00:09:10.422>this <00:09:10.578>idea <00:09:10.733>is <00:09:10.889>not <00:09:11.045>new.

201
00:09:12.175 --> 00:09:14.785
<00:09:12.175>Brad <00:09:12.454>first <00:09:12.734>develops <00:09:13.015>methodology <00:09:13.295>to <00:09:13.574>create

202
00:09:14.885 --> 00:09:16.705
<00:09:14.885>and <00:09:15.235>maintain <00:09:15.585>robust <00:09:15.935>design <00:09:16.285>systems

203
00:09:17.255 --> 00:09:20.065
<00:09:17.255>that <00:09:17.455>he <00:09:17.655>called <00:09:17.855>atomic <00:09:18.055>design <00:09:18.255>really <00:09:18.455>worth <00:09:18.655>read.

204
00:09:20.205 --> 00:09:22.465
<00:09:20.205>And <00:09:20.405>I <00:09:20.605>second <00:09:20.805>that <00:09:21.005>really <00:09:21.205>do <00:09:21.405>read <00:09:21.605>it.

205
00:09:22.695 --> 00:09:24.785
<00:09:22.695>Type <00:09:23.045>threat <00:09:23.395>first, <00:09:23.745>atomic <00:09:24.095>design.

206
00:09:25.125 --> 00:09:26.665
<00:09:25.125>You <00:09:25.323>don't <00:09:25.521>need <00:09:25.718>to <00:09:25.917>read <00:09:26.115>the <00:09:26.313>whole <00:09:26.511>book.

207
00:09:26.885 --> 00:09:28.785
<00:09:26.885>Um, <00:09:27.118>there's <00:09:27.351>so <00:09:27.585>much <00:09:27.818>really <00:09:28.051>good <00:09:28.285>resources

208
00:09:28.785 --> 00:09:31.065
<00:09:28.785>that <00:09:28.959>he <00:09:29.135>has <00:09:29.310>written <00:09:29.485>on <00:09:29.660>atomic <00:09:29.834>design <00:09:30.010>out <00:09:30.185>there.

209
00:09:31.415 --> 00:09:33.505
<00:09:31.415>Very <00:09:31.765>needs <00:09:32.115>very <00:09:32.464>simply <00:09:32.814>explained,

210
00:09:33.685 --> 00:09:35.705
<00:09:33.685>and <00:09:33.918>really <00:09:34.151>you <00:09:34.385>should <00:09:34.618>check <00:09:34.851>it <00:09:35.084>out.

211
00:09:36.485 --> 00:09:39.705
<00:09:36.485>His <00:09:36.625>idea <00:09:36.765>was <00:09:36.905>to <00:09:37.045>break <00:09:37.185>down <00:09:37.325>pages <00:09:37.465>into <00:09:37.605>design <00:09:37.745>components <00:09:37.885>in

212
00:09:39.705 --> 00:09:41.225
<00:09:39.705>an <00:09:40.389>organized <00:09:41.073>hierarchy.

213
00:09:42.355 --> 00:09:47.185
<00:09:42.355>Let's <00:09:42.495>see <00:09:42.635>what <00:09:42.775>that <00:09:42.915>means. <00:09:43.055>So <00:09:43.195>what <00:09:43.335>that <00:09:43.475>means <00:09:43.615>really <00:09:43.755>is

214
00:09:47.185 --> 00:09:49.545
<00:09:47.185>that <00:09:47.418>you <00:09:47.651>have <00:09:47.885>a <00:09:48.118>hierarchy <00:09:48.351>of <00:09:48.584>components.

215
00:09:49.765 --> 00:09:52.545
<00:09:49.765>And <00:09:49.905>so <00:09:50.045>what <00:09:50.185>the <00:09:50.324>ATO <00:09:50.465>make <00:09:50.605>design <00:09:50.745>is, <00:09:50.885>is, <00:09:51.025>you <00:09:51.165>know,

216
00:09:52.545 --> 00:09:54.505
<00:09:52.545>how <00:09:52.824>you <00:09:53.104>have <00:09:53.385>chemistry <00:09:53.665>and <00:09:53.944>chemistry,

217
00:09:54.505 --> 00:09:56.025
<00:09:54.505>things <00:09:54.778>are <00:09:55.052>built <00:09:55.325>into <00:09:55.599>each <00:09:55.872>other.

218
00:09:56.085 --> 00:09:59.825
<00:09:56.085>You <00:09:56.225>have <00:09:56.365>atoms, <00:09:56.505>you <00:09:56.645>have <00:09:56.785>molecules, <00:09:56.925>um, <00:09:57.065>you <00:09:57.205>have, <00:09:57.345>you <00:09:57.485>know,

219
00:09:59.825 --> 00:10:01.345
<00:09:59.825>you <00:10:00.281>have, <00:10:00.737>uh, <00:10:01.193>organisms

220
00:10:01.645 --> 00:10:04.145
<00:10:01.645>and <00:10:01.925>everything, <00:10:02.204>you <00:10:02.485>know, <00:10:02.765>works <00:10:03.045>inside

221
00:10:04.145 --> 00:10:05.585
<00:10:04.145>of <00:10:04.469>the <00:10:04.793>same <00:10:05.117>unified <00:10:05.441>system,

222
00:10:05.885 --> 00:10:07.945
<00:10:05.885>but <00:10:06.118>every <00:10:06.351>bit <00:10:06.585>has <00:10:06.818>their <00:10:07.051>own <00:10:07.285>role,

223
00:10:08.085 --> 00:10:10.625
<00:10:08.085>but <00:10:08.285>every <00:10:08.485>bit <00:10:08.685>also <00:10:08.885>has <00:10:09.085>their <00:10:09.285>own <00:10:09.485>hierarchy.

224
00:10:11.405 --> 00:10:12.985
<00:10:11.405>And <00:10:11.560>that's <00:10:11.716>how <00:10:11.871>we <00:10:12.027>are <00:10:12.182>going <00:10:12.338>to <00:10:12.493>think <00:10:12.649>through <00:10:12.805>that.

225
00:10:13.605 --> 00:10:16.745
<00:10:13.605>So, <00:10:13.732>you <00:10:13.859>know, <00:10:13.986>even <00:10:14.114>myself <00:10:14.241>right <00:10:14.368>now, <00:10:14.495>when <00:10:14.623>I <00:10:14.750>think <00:10:14.877>of <00:10:15.005>code

226
00:10:16.805 --> 00:10:18.065
<00:10:16.805>and <00:10:17.031>when <00:10:17.258>I <00:10:17.485>look <00:10:17.712>at <00:10:17.939>websites

227
00:10:18.065 --> 00:10:20.105
<00:10:18.065>and, <00:10:18.345>uh, <00:10:18.625>applications <00:10:18.905>perhaps <00:10:19.185>have <00:10:19.465>sorts

228
00:10:20.105 --> 00:10:22.225
<00:10:20.105>of <00:10:20.338>different <00:10:20.571>applications, <00:10:20.805>I <00:10:21.038>really <00:10:21.271>do <00:10:21.505>not

229
00:10:22.245 --> 00:10:23.545
<00:10:22.245>see <00:10:22.479>a <00:10:22.713>set <00:10:22.947>of <00:10:23.180>pages <00:10:23.415>anymore.

230
00:10:24.005 --> 00:10:25.185
<00:10:24.005>I'm <00:10:24.182>trying <00:10:24.358>to <00:10:24.536>be <00:10:24.713>there <00:10:24.890>like, <00:10:25.067>okay,

231
00:10:25.375 --> 00:10:26.705
<00:10:25.375>what <00:10:25.674>would <00:10:25.973>be <00:10:26.272>the <00:10:26.572>organism?

232
00:10:26.815 --> 00:10:29.305
<00:10:26.815>What <00:10:26.970>will <00:10:27.126>be <00:10:27.281>the <00:10:27.437>atom? <00:10:27.592>What <00:10:27.748>will <00:10:27.903>be <00:10:28.059>the <00:10:28.215>molecule?

233
00:10:29.655 --> 00:10:32.025
<00:10:29.655>What <00:10:29.795>will <00:10:29.935>be <00:10:30.074>the <00:10:30.214>template? <00:10:30.355>Like, <00:10:30.495>all <00:10:30.635>those <00:10:30.775>sort <00:10:30.915>of <00:10:31.055>things.

234
00:10:33.005 --> 00:10:34.345
<00:10:33.005>So <00:10:33.246>it's <00:10:33.487>really <00:10:33.728>a <00:10:33.969>new <00:10:34.211>way

235
00:10:34.405 --> 00:10:37.305
<00:10:34.405>of <00:10:34.579>looking <00:10:34.755>at <00:10:34.930>all <00:10:35.105>the <00:10:35.280>digital <00:10:35.454>products <00:10:35.630>out <00:10:35.805>there.

236
00:10:37.615 --> 00:10:39.745
<00:10:37.615>Once <00:10:37.790>you've, <00:10:37.965>once <00:10:38.140>you've <00:10:38.315>learned <00:10:38.490>how <00:10:38.665>to <00:10:38.840>make <00:10:39.015>design,

237
00:10:40.515 --> 00:10:43.265
<00:10:40.515>trust <00:10:40.655>me, <00:10:40.795>like <00:10:40.935>you <00:10:41.074>won't <00:10:41.215>look <00:10:41.355>at <00:10:41.495>applications <00:10:41.635>the <00:10:41.775>same <00:10:41.915>way

238
00:10:43.605 --> 00:10:45.025
<00:10:43.605>and <00:10:43.787>you <00:10:43.970>won't <00:10:44.152>build <00:10:44.335>in <00:10:44.517>the <00:10:44.700>same <00:10:44.883>way.

239
00:10:46.005 --> 00:10:48.665
<00:10:46.005>So <00:10:46.238>design <00:10:46.471>language <00:10:46.705>was <00:10:46.938>actually <00:10:47.171>very <00:10:47.405>relevant

240
00:10:48.685 --> 00:10:49.705
<00:10:48.685>to <00:10:48.914>you <00:10:49.144>as <00:10:49.373>an <00:10:49.603>engineer.

241
00:10:50.165 --> 00:10:52.905
<00:10:50.165>Um, <00:10:50.320>you <00:10:50.476>know, <00:10:50.631>you <00:10:50.787>can <00:10:50.942>build <00:10:51.098>better <00:10:51.253>and <00:10:51.409>faster, <00:10:51.564>better

242
00:10:52.905 --> 00:10:56.425
<00:10:52.905>because <00:10:53.079>you <00:10:53.255>know, <00:10:53.430>you <00:10:53.605>build <00:10:53.780>a <00:10:53.954>cohesive <00:10:54.130>experience, <00:10:54.305>um,

243
00:10:56.445 --> 00:10:57.665
<00:10:56.445>you <00:10:56.628>know, <00:10:56.811>and <00:10:56.994>both <00:10:57.177>for <00:10:57.360>the <00:10:57.543>users,

244
00:10:57.805 --> 00:11:00.345
<00:10:57.805>but <00:10:57.944>also <00:10:58.084>for <00:10:58.224>the <00:10:58.364>developers <00:10:58.505>where <00:10:58.645>things, <00:10:58.785>you <00:10:58.925>know, <00:10:59.064>you <00:10:59.204>know

245
00:11:00.345 --> 00:11:02.185
<00:11:00.345>what <00:11:00.520>everything <00:11:00.695>is <00:11:00.870>and <00:11:01.045>you <00:11:01.220>know <00:11:01.395>what <00:11:01.570>is <00:11:01.745>expected.

246
00:11:03.005 --> 00:11:05.425
<00:11:03.005>Um, <00:11:03.205>and <00:11:03.405>you <00:11:03.605>know, <00:11:03.805>it's <00:11:04.005>faster <00:11:04.205>as <00:11:04.405>well

247
00:11:05.425 --> 00:11:07.665
<00:11:05.425>because <00:11:05.580>it <00:11:05.736>gives <00:11:05.891>you <00:11:06.047>a <00:11:06.202>common <00:11:06.358>language <00:11:06.513>to <00:11:06.669>work <00:11:06.824>with.

248
00:11:08.095 --> 00:11:10.305
<00:11:08.095>When <00:11:08.250>I <00:11:08.406>say, <00:11:08.561>Hey, <00:11:08.717>can <00:11:08.872>you <00:11:09.028>please <00:11:09.183>add <00:11:09.339>an <00:11:09.495>atom?

249
00:11:10.565 --> 00:11:14.665
<00:11:10.565>Um, <00:11:10.705>and, <00:11:10.845>uh, <00:11:10.985>you <00:11:11.125>know, <00:11:11.265>like <00:11:11.405>this <00:11:11.545>pattern, <00:11:11.685>for <00:11:11.825>example, <00:11:11.965>uh,

250
00:11:15.285 --> 00:11:18.465
<00:11:15.285>is <00:11:15.401>in <00:11:15.518>the <00:11:15.635>atom <00:11:15.751>folder, <00:11:15.868>can <00:11:15.985>you <00:11:16.101>please <00:11:16.218>add <00:11:16.334>a <00:11:16.451>theme <00:11:16.568>to <00:11:16.685>it?

251
00:11:19.495 --> 00:11:21.475
<00:11:19.495>And <00:11:19.695>you <00:11:19.895>know, <00:11:20.095>and <00:11:20.295>therefore <00:11:20.495>it's <00:11:20.695>very <00:11:20.895>clear

252
00:11:21.495 --> 00:11:24.635
<00:11:21.495>for <00:11:21.650>the <00:11:21.806>developer <00:11:21.961>to <00:11:22.117>know <00:11:22.272>that, <00:11:22.428>you <00:11:22.583>know, <00:11:22.739>the <00:11:22.895>button

253
00:11:24.665 --> 00:11:27.555
<00:11:24.665>that <00:11:24.898>he <00:11:25.131>needs <00:11:25.365>to <00:11:25.598>redesign <00:11:25.831>is <00:11:26.064>expected

254
00:11:27.615 --> 00:11:28.915
<00:11:27.615>to <00:11:27.849>be <00:11:28.083>inside <00:11:28.317>of <00:11:28.550>an <00:11:28.785>atom.

255
00:11:28.945 --> 00:11:31.635
<00:11:28.945>Because <00:11:29.100>once <00:11:29.256>you <00:11:29.411>think <00:11:29.567>in <00:11:29.722>terms <00:11:29.878>of <00:11:30.033>ATO <00:11:30.189>make <00:11:30.345>design,

256
00:11:31.905 --> 00:11:35.555
<00:11:31.905>when <00:11:32.021>you <00:11:32.138>look <00:11:32.255>at <00:11:32.371>a <00:11:32.488>page, <00:11:32.605>a <00:11:32.721>button <00:11:32.838>would <00:11:32.954>always <00:11:33.071>be <00:11:33.188>an <00:11:33.305>atom

257
00:11:35.585 --> 00:11:37.715
<00:11:35.585>because <00:11:35.935>it's <00:11:36.285>the <00:11:36.635>smallest <00:11:36.985>bit

258
00:11:37.735 --> 00:11:39.395
<00:11:37.735>of <00:11:37.935>UI <00:11:38.135>which <00:11:38.335>you <00:11:38.535>have <00:11:38.735>on <00:11:38.935>the <00:11:39.135>page,

259
00:11:39.395 --> 00:11:42.955
<00:11:39.395>which <00:11:39.595>doesn't <00:11:39.795>contain <00:11:39.995>any <00:11:40.194>logic, <00:11:40.395>which <00:11:40.595>only <00:11:40.795>receives,

260
00:11:43.295 --> 00:11:44.595
<00:11:43.295>you <00:11:43.587>know, <00:11:43.880>the, <00:11:44.172>the <00:11:44.465>content

261
00:11:45.215 --> 00:11:46.835
<00:11:45.215>and <00:11:45.448>it <00:11:45.681>doesn't <00:11:45.915>do <00:11:46.148>anything <00:11:46.381>on <00:11:46.615>itself.

262
00:11:47.055 --> 00:11:49.635
<00:11:47.055>And <00:11:47.288>therefore, <00:11:47.521>you <00:11:47.755>know, <00:11:47.988>input <00:11:48.221>field <00:11:48.454>styling,

263
00:11:49.635 --> 00:11:52.875
<00:11:49.635>like <00:11:49.790>everything, <00:11:49.946>it's <00:11:50.101>all <00:11:50.257>very <00:11:50.412>neatly <00:11:50.568>in <00:11:50.723>the <00:11:50.879>add-on <00:11:51.035>folder.

264
00:11:52.995 --> 00:11:55.565
<00:11:52.995>However, <00:11:53.135>if <00:11:53.275>I <00:11:53.415>give <00:11:53.555>to <00:11:53.695>someone <00:11:53.835>a <00:11:53.975>task, <00:11:54.115>which <00:11:54.255>is <00:11:54.395>more,

265
00:11:55.565 --> 00:11:58.525
<00:11:55.565>you <00:11:55.692>know, <00:11:55.819>high <00:11:55.946>level, <00:11:56.074>and <00:11:56.201>hey, <00:11:56.328>can <00:11:56.455>you <00:11:56.583>please <00:11:56.710>try <00:11:56.837>to <00:11:56.965>think

266
00:11:58.525 --> 00:12:01.205
<00:11:58.525>around <00:11:58.665>the <00:11:58.805>logic <00:11:58.944>of <00:11:59.084>how <00:11:59.225>we <00:11:59.365>are <00:11:59.505>going <00:11:59.645>to, <00:11:59.785>you <00:11:59.925>know,

267
00:12:01.435 --> 00:12:05.365
<00:12:01.435>have <00:12:01.590>the <00:12:01.746>data <00:12:01.901>flow <00:12:02.057>through <00:12:02.212>the, <00:12:02.368>um, <00:12:02.523>through <00:12:02.679>the <00:12:02.834>forms,

268
00:12:05.785 --> 00:12:08.205
<00:12:05.785>you <00:12:05.940>know, <00:12:06.096>that <00:12:06.251>is <00:12:06.407>something <00:12:06.562>which <00:12:06.718>already, <00:12:06.873>you <00:12:07.029>know, <00:12:07.185>the,

269
00:12:08.345 --> 00:12:09.365
<00:12:08.345>the <00:12:08.651>developer <00:12:08.957>would <00:12:09.263>know

270
00:12:09.365 --> 00:12:11.045
<00:12:09.365>that <00:12:09.645>he <00:12:09.925>wouldn't <00:12:10.205>touch <00:12:10.485>the <00:12:10.765>molecules

271
00:12:11.345 --> 00:12:13.605
<00:12:11.345>or <00:12:11.578>the <00:12:11.811>atoms <00:12:12.045>folders <00:12:12.278>of <00:12:12.511>the <00:12:12.745>app,

272
00:12:13.605 --> 00:12:15.365
<00:12:13.605>which <00:12:13.838>themselves <00:12:14.071>contain <00:12:14.305>a <00:12:14.538>lot <00:12:14.771>of <00:12:15.005>code.

273
00:12:15.385 --> 00:12:18.005
<00:12:15.385>So <00:12:15.525>it's <00:12:15.665>already, <00:12:15.805>you <00:12:15.944>know, <00:12:16.085>less <00:12:16.225>confusion <00:12:16.365>as <00:12:16.505>to <00:12:16.645>which <00:12:16.785>part

274
00:12:18.005 --> 00:12:20.325
<00:12:18.005>of <00:12:18.145>the <00:12:18.285>code <00:12:18.425>he <00:12:18.564>will <00:12:18.705>have <00:12:18.845>to <00:12:18.985>look <00:12:19.125>at <00:12:19.265>and <00:12:19.405>touch.

275
00:12:20.745 --> 00:12:21.765
<00:12:20.745>It <00:12:20.974>would <00:12:21.204>be <00:12:21.433>the <00:12:21.663>organism.

276
00:12:23.065 --> 00:12:27.365
<00:12:23.065>So <00:12:23.240>basically, <00:12:23.415>it, <00:12:23.590>it <00:12:23.765>really <00:12:23.940>does <00:12:24.115>help <00:12:24.290>tremendously <00:12:24.465>in,

277
00:12:27.545 --> 00:12:29.805
<00:12:27.545>you <00:12:27.745>know, <00:12:27.944>even <00:12:28.145>like <00:12:28.344>across <00:12:28.545>time, <00:12:28.745>for <00:12:28.944>example,

278
00:12:29.985 --> 00:12:33.245
<00:12:29.985>in <00:12:30.140>your <00:12:30.296>personal <00:12:30.451>projects, <00:12:30.607>if <00:12:30.762>it's <00:12:30.918>difficult <00:12:31.073>to <00:12:31.229>go <00:12:31.385>back

279
00:12:33.245 --> 00:12:34.445
<00:12:33.245>to <00:12:33.461>the <00:12:33.677>code, <00:12:33.893>which <00:12:34.109>you <00:12:34.325>started,

280
00:12:34.575 --> 00:12:36.405
<00:12:34.575>let's <00:12:34.750>say <00:12:34.925>three <00:12:35.100>months <00:12:35.275>ago <00:12:35.450>when <00:12:35.625>you <00:12:35.800>had <00:12:35.975>time,

281
00:12:37.335 --> 00:12:38.355
<00:12:37.335>and <00:12:37.488>then <00:12:37.641>you <00:12:37.794>go <00:12:37.947>back <00:12:38.100>to <00:12:38.253>it

282
00:12:38.415 --> 00:12:40.435
<00:12:38.415>and <00:12:38.648>you're <00:12:38.881>like, <00:12:39.115>oh, <00:12:39.348>where <00:12:39.581>was <00:12:39.814>that?

283
00:12:40.555 --> 00:12:42.075
<00:12:40.555>I, <00:12:40.896>what <00:12:41.239>was <00:12:41.581>I <00:12:41.923>doing?

284
00:12:42.895 --> 00:12:44.595
<00:12:42.895>And <00:12:43.128>where <00:12:43.361>are <00:12:43.595>things <00:12:43.828>that <00:12:44.061>you're <00:12:44.295>trying

285
00:12:44.595 --> 00:12:45.795
<00:12:44.595>to <00:12:44.865>understand <00:12:45.135>your <00:12:45.405>own <00:12:45.675>code?

286
00:12:46.645 --> 00:12:49.265
<00:12:46.645>And <00:12:46.819>you <00:12:46.995>know, <00:12:47.170>and <00:12:47.345>when <00:12:47.520>you <00:12:47.694>use <00:12:47.870>automate <00:12:48.045>design,

287
00:12:49.375 --> 00:12:51.945
<00:12:49.375>even <00:12:49.530>on <00:12:49.686>your <00:12:49.841>own <00:12:49.997>project, <00:12:50.152>it <00:12:50.308>is <00:12:50.463>not <00:12:50.619>an <00:12:50.775>overkill

288
00:12:52.135 --> 00:12:55.825
<00:12:52.135>because <00:12:52.275>your <00:12:52.415>development <00:12:52.555>time <00:12:52.694>is <00:12:52.835>going <00:12:52.975>to <00:12:53.115>be <00:12:53.255>so <00:12:53.395>much <00:12:53.535>shorter

289
00:12:55.935 --> 00:12:57.265
<00:12:55.935>because <00:12:56.234>you're <00:12:56.533>going <00:12:56.832>to <00:12:57.132>understand

290
00:12:57.265 --> 00:12:58.665
<00:12:57.265>even <00:12:57.579>yourself <00:12:57.895>better <00:12:58.209>over <00:12:58.525>time.

291
00:13:00.205 --> 00:13:02.985
<00:13:00.205>So <00:13:00.321>it <00:13:00.438>does <00:13:00.555>take <00:13:00.671>a <00:13:00.788>bit <00:13:00.905>of <00:13:01.021>time <00:13:01.138>at <00:13:01.255>first, <00:13:01.371>um, <00:13:01.488>which <00:13:01.605>is,

292
00:13:02.985 --> 00:13:07.025
<00:13:02.985>you <00:13:03.140>know, <00:13:03.296>um, <00:13:03.451>um, <00:13:03.607>kind <00:13:03.762>of <00:13:03.918>no <00:13:04.073>one <00:13:04.229>would <00:13:04.385>say

293
00:13:07.305 --> 00:13:09.465
<00:13:07.305>because <00:13:07.505>you <00:13:07.704>have <00:13:07.905>to <00:13:08.104>build <00:13:08.305>the <00:13:08.505>system <00:13:08.704>first.

294
00:13:09.725 --> 00:13:11.545
<00:13:09.725>And <00:13:09.900>so <00:13:10.075>it's <00:13:10.250>kind <00:13:10.425>of <00:13:10.600>slow <00:13:10.775>at <00:13:10.950>the <00:13:11.125>start,

295
00:13:11.935 --> 00:13:13.225
<00:13:11.935>then <00:13:12.225>everything <00:13:12.515>is <00:13:12.805>much <00:13:13.096>faster.

296
00:13:16.185 --> 00:13:18.565
<00:13:16.185>So <00:13:16.418>what <00:13:16.651>is <00:13:16.885>the <00:13:17.118>actual <00:13:17.351>technical <00:13:17.584>implementation?

297
00:13:19.205 --> 00:13:20.525
<00:13:19.205>Automate <00:13:19.403>design, <00:13:19.601>that <00:13:19.799>is <00:13:19.997>the <00:13:20.194>first <00:13:20.393>bit

298
00:13:20.545 --> 00:13:22.325
<00:13:20.545>and <00:13:20.745>type <00:13:20.944>script, <00:13:21.145>which <00:13:21.344>is <00:13:21.545>the <00:13:21.745>second <00:13:21.944>bit.

299
00:13:22.735 --> 00:13:24.525
<00:13:22.735>Let's <00:13:23.085>go <00:13:23.435>through <00:13:23.785>that <00:13:24.135>first.

300
00:13:24.765 --> 00:13:28.165
<00:13:24.765>A <00:13:24.905>design, <00:13:25.045>as <00:13:25.185>I <00:13:25.324>said, <00:13:25.465>you <00:13:25.605>have <00:13:25.745>the <00:13:25.885>atoms, <00:13:26.025>the <00:13:26.165>molecules,

301
00:13:28.165 --> 00:13:30.285
<00:13:28.165>the <00:13:28.444>organisms, <00:13:28.724>templates, <00:13:29.005>and <00:13:29.285>the <00:13:29.564>page.

302
00:13:31.225 --> 00:13:34.125
<00:13:31.225>So <00:13:31.380>what <00:13:31.536>you <00:13:31.691>start <00:13:31.847>with <00:13:32.002>is <00:13:32.158>always, <00:13:32.313>usually <00:13:32.469>the <00:13:32.625>atoms.

303
00:13:35.035 --> 00:13:36.085
<00:13:35.035>When <00:13:35.223>I <00:13:35.413>look <00:13:35.602>at <00:13:35.791>a <00:13:35.980>page

304
00:13:36.545 --> 00:13:38.645
<00:13:36.545>and <00:13:36.700>I'm <00:13:36.856>like, <00:13:37.011>okay, <00:13:37.167>I'm <00:13:37.322>going <00:13:37.478>to <00:13:37.633>build <00:13:37.789>this <00:13:37.944>page.

305
00:13:39.325 --> 00:13:42.405
<00:13:39.325>I <00:13:39.465>know <00:13:39.605>that <00:13:39.745>at <00:13:39.885>the <00:13:40.025>very <00:13:40.165>end, <00:13:40.305>the <00:13:40.445>page <00:13:40.585>is <00:13:40.725>going

306
00:13:42.405 --> 00:13:44.605
<00:13:42.405>to <00:13:42.605>be <00:13:42.805>displaying <00:13:43.005>all <00:13:43.204>of <00:13:43.405>those <00:13:43.605>small <00:13:43.805>elements.

307
00:13:45.225 --> 00:13:47.445
<00:13:45.225>So <00:13:45.425>I'm <00:13:45.625>going <00:13:45.825>to <00:13:46.025>create <00:13:46.225>those <00:13:46.425>elements <00:13:46.625>first

308
00:13:47.785 --> 00:13:48.925
<00:13:47.785>and <00:13:48.127>then <00:13:48.468>assemble <00:13:48.810>them

309
00:13:49.785 --> 00:13:51.445
<00:13:49.785>and <00:13:50.018>then <00:13:50.251>displaying <00:13:50.485>them <00:13:50.718>from <00:13:50.951>the <00:13:51.185>page.

310
00:13:52.975 --> 00:13:56.835
<00:13:52.975>So <00:13:53.130>you <00:13:53.286>combine <00:13:53.441>the <00:13:53.597>bits <00:13:53.752>into <00:13:53.908>progressively <00:13:54.063>larger <00:13:54.219>bits <00:13:54.375>up

311
00:13:56.835 --> 00:13:58.155
<00:13:56.835>until <00:13:57.033>you <00:13:57.231>end <00:13:57.429>up <00:13:57.627>with <00:13:57.824>a <00:13:58.023>page.

312
00:13:58.335 --> 00:14:00.235
<00:13:58.335>You <00:13:58.510>don't <00:13:58.685>start <00:13:58.860>with <00:13:59.035>a <00:13:59.210>page <00:13:59.385>and <00:13:59.560>work <00:13:59.735>down.

313
00:14:00.505 --> 00:14:03.195
<00:14:00.505>It's <00:14:00.680>a <00:14:00.855>bit <00:14:01.030>like <00:14:01.205>Lego, <00:14:01.380>actually, <00:14:01.555>exactly <00:14:01.730>like <00:14:01.905>Lego.

314
00:14:03.615 --> 00:14:06.665
<00:14:03.615>You <00:14:03.848>only <00:14:04.081>use <00:14:04.315>small <00:14:04.548>bits, <00:14:04.781>small <00:14:05.015>atoms,

315
00:14:06.665 --> 00:14:11.225
<00:14:06.665>which <00:14:06.820>together <00:14:06.976>forms <00:14:07.131>molecule, <00:14:07.287>which <00:14:07.442>are, <00:14:07.598>you <00:14:07.753>know, <00:14:07.909>um, <00:14:08.064>uh,

316
00:14:11.225 --> 00:14:13.865
<00:14:11.225>having <00:14:11.425>the, <00:14:11.625>the <00:14:11.825>logic <00:14:12.025>made <00:14:12.225>from <00:14:12.425>the <00:14:12.625>organisms.

317
00:14:14.775 --> 00:14:15.995
<00:14:14.775>And <00:14:14.958>you <00:14:15.141>have <00:14:15.324>the <00:14:15.507>template <00:14:15.689>and <00:14:15.873>the

318
00:14:15.995 --> 00:14:17.555
<00:14:15.995>pages, <00:14:16.461>templates <00:14:16.928>and <00:14:17.395>pages.

319
00:14:18.135 --> 00:14:20.235
<00:14:18.135>Um, <00:14:18.251>I <00:14:18.368>will <00:14:18.485>go <00:14:18.601>through <00:14:18.718>each <00:14:18.835>in <00:14:18.951>detail <00:14:19.068>with <00:14:19.185>some <00:14:19.301>bit <00:14:19.418>of <00:14:19.535>code.

320
00:14:20.735 --> 00:14:22.955
<00:14:20.735>Um, <00:14:20.968>it <00:14:21.201>will <00:14:21.435>depend <00:14:21.668>on <00:14:21.901>each <00:14:22.135>company

321
00:14:22.985 --> 00:14:25.075
<00:14:22.985>what <00:14:23.185>the <00:14:23.385>template <00:14:23.585>is <00:14:23.785>compared <00:14:23.985>to <00:14:24.185>the <00:14:24.385>page.

322
00:14:25.095 --> 00:14:28.115
<00:14:25.095>So <00:14:25.235>for <00:14:25.375>example, <00:14:25.515>as <00:14:25.655>a <00:14:25.795>template, <00:14:25.935>what <00:14:26.075>I <00:14:26.215>have <00:14:26.355>is, <00:14:26.495>um,

323
00:14:28.815 --> 00:14:32.235
<00:14:28.815>the <00:14:29.015>different <00:14:29.215>page <00:14:29.415>wrappers, <00:14:29.615>uh, <00:14:29.815>in <00:14:30.015>our <00:14:30.215>application.

324
00:14:32.235 --> 00:14:33.995
<00:14:32.235>Sometimes <00:14:32.468>I <00:14:32.701>want <00:14:32.935>everything <00:14:33.168>to <00:14:33.401>be <00:14:33.635>centered,

325
00:14:34.695 --> 00:14:36.235
<00:14:34.695>and <00:14:35.041>sometimes <00:14:35.388>I <00:14:35.734>want <00:14:36.081>everything.

326
00:14:36.335 --> 00:14:39.035
<00:14:36.335>You <00:14:36.462>know, <00:14:36.589>I <00:14:36.716>have <00:14:36.844>a <00:14:36.971>sort <00:14:37.098>of <00:14:37.225>design <00:14:37.353>where <00:14:37.480>I <00:14:37.607>want <00:14:37.735>everything

327
00:14:39.035 --> 00:14:41.755
<00:14:39.035>to <00:14:39.190>be <00:14:39.346>on <00:14:39.501>the, <00:14:39.657>on <00:14:39.812>the <00:14:39.968>start <00:14:40.123>of <00:14:40.279>the <00:14:40.435>page.

328
00:14:41.775 --> 00:14:43.275
<00:14:41.775>So <00:14:42.000>more <00:14:42.225>like <00:14:42.449>a, <00:14:42.675>a <00:14:42.900>flex <00:14:43.125>box

329
00:14:43.275 --> 00:14:44.875
<00:14:43.275>where <00:14:43.508>things <00:14:43.741>are <00:14:43.975>at <00:14:44.208>the <00:14:44.441>flex <00:14:44.675>start.

330
00:14:45.225 --> 00:14:48.515
<00:14:45.225>Sometimes <00:14:45.352>I <00:14:45.479>want <00:14:45.606>to <00:14:45.734>use, <00:14:45.861>you <00:14:45.988>know, <00:14:46.115>um, <00:14:46.243>there <00:14:46.370>is <00:14:46.497>a <00:14:46.625>part

331
00:14:48.515 --> 00:14:50.475
<00:14:48.515>of <00:14:48.748>our <00:14:48.981>app, <00:14:49.215>which <00:14:49.448>is, <00:14:49.681>um, <00:14:49.915>media.

332
00:14:50.505 --> 00:14:52.885
<00:14:50.505>Like, <00:14:50.705>so <00:14:50.905>you <00:14:51.105>have <00:14:51.305>articles, <00:14:51.505>you <00:14:51.705>have <00:14:51.905>blogs,

333
00:14:52.885 --> 00:14:54.365
<00:14:52.885>you <00:14:53.107>have <00:14:53.329>interviews, <00:14:53.551>those <00:14:53.773>kind <00:14:53.995>of <00:14:54.217>things.

334
00:14:55.065 --> 00:14:58.965
<00:14:55.065>And <00:14:55.205>there <00:14:55.345>really <00:14:55.485>the <00:14:55.625>focus <00:14:55.765>is <00:14:55.905>on <00:14:56.045>having <00:14:56.185>people <00:14:56.325>being <00:14:56.465>able

335
00:14:58.965 --> 00:15:01.495
<00:14:58.965>to <00:14:59.245>read <00:14:59.525>super <00:14:59.805>easily, <00:15:00.085>the <00:15:00.365>content.

336
00:15:01.955 --> 00:15:04.375
<00:15:01.955>And <00:15:02.082>when <00:15:02.209>you <00:15:02.336>look <00:15:02.464>at <00:15:02.591>medium, <00:15:02.718>when <00:15:02.845>you <00:15:02.973>look <00:15:03.100>at <00:15:03.227>a <00:15:03.355>lot

337
00:15:04.375 --> 00:15:06.535
<00:15:04.375>of <00:15:04.550>content <00:15:04.725>applications <00:15:04.900>out <00:15:05.075>there <00:15:05.250>where <00:15:05.425>it's <00:15:05.600>more <00:15:05.775>like,

338
00:15:06.635 --> 00:15:09.175
<00:15:06.635>you <00:15:06.762>know, <00:15:06.889>you <00:15:07.016>read, <00:15:07.144>and <00:15:07.271>that's <00:15:07.398>the <00:15:07.525>whole <00:15:07.653>point <00:15:07.780>of <00:15:07.907>the <00:15:08.035>app,

339
00:15:09.235 --> 00:15:11.055
<00:15:09.235>for <00:15:09.435>example, <00:15:09.635>medium <00:15:09.835>is <00:15:10.035>really <00:15:10.235>good <00:15:10.435>at <00:15:10.635>that.

340
00:15:11.365 --> 00:15:14.255
<00:15:11.365>They <00:15:11.505>have <00:15:11.645>the <00:15:11.785>text, <00:15:11.925>which <00:15:12.065>is <00:15:12.205>very <00:15:12.345>narrow <00:15:12.485>in <00:15:12.625>the <00:15:12.765>middle

341
00:15:14.605 --> 00:15:17.255
<00:15:14.605>because <00:15:14.838>the <00:15:15.071>more <00:15:15.305>width <00:15:15.538>your <00:15:15.771>text <00:15:16.005>has,

342
00:15:17.675 --> 00:15:19.335
<00:15:17.675>the <00:15:17.849>more <00:15:18.025>effort <00:15:18.199>it <00:15:18.375>will <00:15:18.550>be <00:15:18.724>for <00:15:18.900>the <00:15:19.074>person

343
00:15:19.435 --> 00:15:20.735
<00:15:19.435>to <00:15:19.630>kind <00:15:19.824>of <00:15:20.020>scan <00:15:20.215>through <00:15:20.410>and <00:15:20.605>read.

344
00:15:20.955 --> 00:15:23.255
<00:15:20.955>So <00:15:21.082>you <00:15:21.209>really <00:15:21.336>want <00:15:21.464>to <00:15:21.591>have <00:15:21.718>like <00:15:21.845>a <00:15:21.973>page <00:15:22.100>wrapper, <00:15:22.227>which <00:15:22.355>is

345
00:15:23.255 --> 00:15:25.735
<00:15:23.255>for <00:15:23.488>readable <00:15:23.721>content <00:15:23.955>only, <00:15:24.188>where <00:15:24.421>you <00:15:24.655>want

346
00:15:25.755 --> 00:15:27.295
<00:15:25.755>to <00:15:25.986>have <00:15:26.217>like <00:15:26.448>this <00:15:26.679>kind <00:15:26.910>of <00:15:27.141>wrapper

347
00:15:27.295 --> 00:15:30.855
<00:15:27.295>where <00:15:27.411>it <00:15:27.528>wraps <00:15:27.645>all <00:15:27.761>the <00:15:27.878>text <00:15:27.995>in <00:15:28.111>the <00:15:28.228>center <00:15:28.344>with <00:15:28.461>a <00:15:28.578>max <00:15:28.694>width,

348
00:15:30.875 --> 00:15:32.775
<00:15:30.875>for <00:15:31.155>example, <00:15:31.435>of <00:15:31.715>like <00:15:31.995>500 <00:15:32.275>pixels.

349
00:15:33.125 --> 00:15:34.175
<00:15:33.125>That <00:15:33.361>will <00:15:33.597>be <00:15:33.833>a <00:15:34.069>template.

350
00:15:35.275 --> 00:15:37.695
<00:15:35.275>And <00:15:35.508>some <00:15:35.741>other <00:15:35.975>companies <00:15:36.208>will <00:15:36.441>have <00:15:36.675>templates

351
00:15:38.075 --> 00:15:40.015
<00:15:38.075>as <00:15:38.275>something <00:15:38.475>a <00:15:38.675>bit <00:15:38.875>more <00:15:39.075>elaborate <00:15:39.275>than <00:15:39.475>that.

352
00:15:40.405 --> 00:15:43.215
<00:15:40.405>They <00:15:40.579>might <00:15:40.755>have <00:15:40.930>templates <00:15:41.105>as, <00:15:41.280>you <00:15:41.454>know, <00:15:41.630>for <00:15:41.805>example,

353
00:15:43.275 --> 00:15:47.575
<00:15:43.275>an <00:15:43.402>agency <00:15:43.529>of <00:15:43.656>grids, <00:15:43.784>uh, <00:15:43.911>which <00:15:44.038>is <00:15:44.165>like <00:15:44.293>a <00:15:44.420>sort <00:15:44.547>of <00:15:44.675>layout.

354
00:15:49.695 --> 00:15:52.195
<00:15:49.695>And <00:15:49.822>yeah, <00:15:49.949>in <00:15:50.076>our <00:15:50.204>company <00:15:50.331>it's <00:15:50.458>a <00:15:50.585>bit <00:15:50.713>more <00:15:50.840>simple <00:15:50.967>than <00:15:51.095>that.

355
00:15:53.525 --> 00:15:57.065
<00:15:53.525>Um, <00:15:53.641>so <00:15:53.758>yes, <00:15:53.875>don't <00:15:53.991>think <00:15:54.108>in <00:15:54.225>terms <00:15:54.341>of <00:15:54.458>pages, <00:15:54.574>think <00:15:54.691>in <00:15:54.808>terms <00:15:54.925>of

356
00:15:57.535 --> 00:16:01.145
<00:15:57.535>what <00:15:57.651>the <00:15:57.768>page <00:15:57.885>is <00:15:58.001>made <00:15:58.118>of, <00:15:58.235>and <00:15:58.351>try <00:15:58.468>to <00:15:58.584>think <00:15:58.701>as <00:15:58.818>an <00:15:58.935>exercise.

357
00:16:01.145 --> 00:16:03.625
<00:16:01.145>When <00:16:01.285>you <00:16:01.425>go <00:16:01.564>out <00:16:01.704>there <00:16:01.845>and <00:16:01.985>you <00:16:02.125>use <00:16:02.265>an <00:16:02.405>application, <00:16:02.545>try

358
00:16:03.625 --> 00:16:05.985
<00:16:03.625>to <00:16:03.858>force <00:16:04.091>yourself <00:16:04.325>to <00:16:04.558>see <00:16:04.791>things <00:16:05.025>differently.

359
00:16:06.605 --> 00:16:08.625
<00:16:06.605>Try <00:16:06.780>to <00:16:06.955>ask <00:16:07.130>yourself <00:16:07.305>what <00:16:07.480>could <00:16:07.655>be <00:16:07.830>the <00:16:08.005>atom,

360
00:16:08.625 --> 00:16:09.745
<00:16:08.625>what <00:16:08.877>could <00:16:09.129>be <00:16:09.381>the <00:16:09.633>molecule,

361
00:16:09.775 --> 00:16:11.705
<00:16:09.775>what <00:16:10.055>could <00:16:10.334>be <00:16:10.615>the <00:16:10.895>organisms <00:16:11.175>instead

362
00:16:11.705 --> 00:16:12.945
<00:16:11.705>of <00:16:11.891>seeing <00:16:12.077>the <00:16:12.263>page <00:16:12.449>as <00:16:12.635>a <00:16:12.821>page.

363
00:16:14.565 --> 00:16:17.105
<00:16:14.565>So, <00:16:14.740>you <00:16:14.915>know, <00:16:15.090>the, <00:16:15.265>the <00:16:15.440>way <00:16:15.615>that <00:16:15.790>you <00:16:15.965>start

364
00:16:17.105 --> 00:16:20.825
<00:16:17.105>with <00:16:17.232>is <00:16:17.359>when <00:16:17.486>you <00:16:17.614>look <00:16:17.741>at <00:16:17.868>the <00:16:17.995>page <00:16:18.123>on <00:16:18.250>the <00:16:18.377>far <00:16:18.505>right,

365
00:16:21.495 --> 00:16:23.225
<00:16:21.495>this <00:16:21.845>is <00:16:22.195>the <00:16:22.545>page, <00:16:22.895>correct.

366
00:16:24.085 --> 00:16:26.905
<00:16:24.085>And <00:16:24.260>what <00:16:24.435>you're <00:16:24.610>trying <00:16:24.785>to <00:16:24.960>break <00:16:25.135>down <00:16:25.310>is, <00:16:25.485>okay,

367
00:16:27.085 --> 00:16:30.865
<00:16:27.085>how <00:16:27.240>am <00:16:27.396>I <00:16:27.551>going <00:16:27.707>to <00:16:27.862>build <00:16:28.018>this <00:16:28.173>thinking <00:16:28.329>with <00:16:28.485>atom,

368
00:16:30.965 --> 00:16:31.985
<00:16:30.965>uh, <00:16:31.424>automated <00:16:31.883>design?

369
00:16:32.685 --> 00:16:35.785
<00:16:32.685>And <00:16:32.812>the <00:16:32.939>way <00:16:33.066>that <00:16:33.194>you <00:16:33.321>build <00:16:33.448>this <00:16:33.575>is <00:16:33.703>you <00:16:33.830>start <00:16:33.957>by <00:16:34.084>trying

370
00:16:35.785 --> 00:16:39.385
<00:16:35.785>to <00:16:35.925>understand <00:16:36.064>the <00:16:36.204>smaller <00:16:36.344>bit <00:16:36.485>of <00:16:36.625>ui, <00:16:36.765>which <00:16:36.905>is <00:16:37.045>very <00:16:37.185>simple

371
00:16:39.445 --> 00:16:41.385
<00:16:39.445>and <00:16:39.645>does <00:16:39.845>not <00:16:40.045>contain <00:16:40.245>any <00:16:40.445>logic <00:16:40.645>by <00:16:40.845>itself.

372
00:16:42.565 --> 00:16:45.625
<00:16:42.565>So <00:16:42.720>for <00:16:42.876>example, <00:16:43.031>you <00:16:43.187>have <00:16:43.342>three <00:16:43.498>kinds <00:16:43.653>of <00:16:43.809>atoms <00:16:43.965>there.

373
00:16:45.805 --> 00:16:49.145
<00:16:45.805>You <00:16:46.005>have <00:16:46.204>the, <00:16:46.405>you <00:16:46.604>know, <00:16:46.805>the <00:16:47.005>rectangle, <00:16:47.204>sorry,

374
00:16:49.165 --> 00:16:51.305
<00:16:49.165>the <00:16:49.444>orange <00:16:49.724>box, <00:16:50.005>which <00:16:50.285>can <00:16:50.564>contain

375
00:16:51.305 --> 00:16:53.225
<00:16:51.305>or <00:16:51.505>you <00:16:51.704>know, <00:16:51.905>colored <00:16:52.104>box <00:16:52.305>with <00:16:52.505>different <00:16:52.704>things.

376
00:16:53.245 --> 00:16:55.905
<00:16:53.245>You <00:16:53.385>can <00:16:53.525>have <00:16:53.665>this <00:16:53.805>box <00:16:53.945>which <00:16:54.085>is <00:16:54.225>reusable <00:16:54.365>with, <00:16:54.505>you <00:16:54.645>know,

377
00:16:56.095 --> 00:16:58.385
<00:16:56.095>blue, <00:16:56.445>um, <00:16:56.795>orange, <00:16:57.145>pink, <00:16:57.495>green.

378
00:16:58.645 --> 00:17:01.825
<00:16:58.645>You <00:16:58.800>have <00:16:58.956>this <00:16:59.111>elements. <00:16:59.267>You <00:16:59.422>then <00:16:59.578>have <00:16:59.733>the <00:16:59.889>profile <00:17:00.045>picture,

379
00:17:01.825 --> 00:17:03.505
<00:17:01.825>which <00:17:02.105>is <00:17:02.385>like <00:17:02.665>the <00:17:02.945>circle, <00:17:03.225>okay?

380
00:17:03.565 --> 00:17:04.945
<00:17:03.565>That's <00:17:03.772>going <00:17:03.979>to <00:17:04.185>be <00:17:04.393>anatomy <00:17:04.599>as <00:17:04.807>well.

381
00:17:05.805 --> 00:17:08.545
<00:17:05.805>And <00:17:05.980>you <00:17:06.155>are <00:17:06.330>going <00:17:06.505>to <00:17:06.680>have <00:17:06.855>the <00:17:07.030>text, <00:17:07.205>okay?

382
00:17:08.725 --> 00:17:11.225
<00:17:08.724>You <00:17:08.865>always <00:17:09.004>will <00:17:09.145>want <00:17:09.284>in <00:17:09.425>your <00:17:09.564>application <00:17:09.704>to <00:17:09.844>have, <00:17:09.984>you <00:17:10.125>know,

383
00:17:11.295 --> 00:17:13.465
<00:17:11.295>text <00:17:11.575>inside <00:17:11.855>of <00:17:12.135>a <00:17:12.415>card <00:17:12.695>consistent.

384
00:17:14.285 --> 00:17:16.665
<00:17:14.285>You <00:17:14.401>want <00:17:14.518>to <00:17:14.635>make <00:17:14.751>sure <00:17:14.868>that <00:17:14.985>every <00:17:15.101>time <00:17:15.218>there <00:17:15.335>is <00:17:15.451>a <00:17:15.568>sort <00:17:15.685>of,

385
00:17:16.665 --> 00:17:19.705
<00:17:16.665>you <00:17:16.839>know, <00:17:17.014>card <00:17:17.190>UI <00:17:17.365>in <00:17:17.540>your <00:17:17.714>app, <00:17:17.889>the <00:17:18.065>text

386
00:17:19.805 --> 00:17:21.895
<00:17:19.805>inside <00:17:20.271>feels <00:17:20.738>the <00:17:21.205>same.

387
00:17:22.675 --> 00:17:24.735
<00:17:22.675>That's <00:17:22.908>for <00:17:23.141>example, <00:17:23.375>how <00:17:23.608>Airbnb <00:17:23.841>did <00:17:24.075>it.

388
00:17:24.875 --> 00:17:28.215
<00:17:24.875>You <00:17:25.015>can <00:17:25.155>see <00:17:25.295>how <00:17:25.435>Airbnb <00:17:25.575>on <00:17:25.714>the <00:17:25.855>application, <00:17:25.994>they <00:17:26.135>have <00:17:26.275>text,

389
00:17:28.215 --> 00:17:29.935
<00:17:28.214>which <00:17:28.415>is <00:17:28.615>of <00:17:28.814>exactly <00:17:29.014>the <00:17:29.215>same <00:17:29.415>font <00:17:29.615>size,

390
00:17:29.935 --> 00:17:32.575
<00:17:29.935>exactly <00:17:30.135>the <00:17:30.335>same <00:17:30.534>line, <00:17:30.735>hate <00:17:30.935>across <00:17:31.135>the <00:17:31.335>application.

391
00:17:33.475 --> 00:17:35.975
<00:17:33.475>And <00:17:33.649>you <00:17:33.824>know, <00:17:34.000>you <00:17:34.175>achieve <00:17:34.350>doing <00:17:34.524>that <00:17:34.699>by <00:17:34.875>you.

392
00:17:35.975 --> 00:17:37.655
<00:17:35.975>Make <00:17:36.208>sure <00:17:36.441>that <00:17:36.675>you <00:17:36.908>unify <00:17:37.141>the <00:17:37.375>source

393
00:17:37.675 --> 00:17:39.935
<00:17:37.675>of <00:17:37.908>truth, <00:17:38.141>I <00:17:38.375>mean, <00:17:38.608>unify <00:17:38.841>the <00:17:39.075>truth.

394
00:17:40.155 --> 00:17:41.415
<00:17:40.155>You <00:17:40.533>unify <00:17:40.911>your <00:17:41.289>file

395
00:17:41.795 --> 00:17:44.295
<00:17:41.795>and <00:17:41.935>you <00:17:42.075>basically <00:17:42.215>make <00:17:42.355>this <00:17:42.495>file <00:17:42.635>become <00:17:42.775>the <00:17:42.915>source <00:17:43.055>of <00:17:43.195>truth

396
00:17:44.395 --> 00:17:47.335
<00:17:44.395>for <00:17:44.550>how <00:17:44.706>things <00:17:44.861>should <00:17:45.017>be <00:17:45.172>in <00:17:45.328>the <00:17:45.483>application <00:17:45.639>going <00:17:45.795>forward,

397
00:17:47.565 --> 00:17:49.365
<00:17:47.565>because <00:17:47.740>you're <00:17:47.915>going <00:17:48.090>to <00:17:48.265>reuse <00:17:48.440>it <00:17:48.615>all <00:17:48.790>the <00:17:48.965>time.

398
00:17:50.195 --> 00:17:51.285
<00:17:50.195>Then <00:17:50.440>you <00:17:50.685>have <00:17:50.930>the <00:17:51.176>molecule

399
00:17:51.285 --> 00:17:52.765
<00:17:51.285>where <00:17:51.618>you <00:17:51.951>assemble <00:17:52.284>things <00:17:52.617>together

400
00:17:53.865 --> 00:17:56.205
<00:17:53.865>and <00:17:54.020>then, <00:17:54.176>you <00:17:54.331>know, <00:17:54.487>you <00:17:54.642>have <00:17:54.798>those <00:17:54.953>candidates <00:17:55.109>all <00:17:55.265>together

401
00:17:56.265 --> 00:17:57.445
<00:17:56.265>up <00:17:56.477>and <00:17:56.689>put <00:17:56.902>till <00:17:57.114>the <00:17:57.327>page.

402
00:18:00.495 --> 00:18:04.275
<00:18:00.495>So <00:18:00.622>you <00:18:00.749>can <00:18:00.876>see <00:18:01.004>how, <00:18:01.131>um, <00:18:01.258>in <00:18:01.385>storybook, <00:18:01.513>which <00:18:01.640>is <00:18:01.767>like <00:18:01.895>a,

403
00:18:04.395 --> 00:18:07.315
<00:18:04.395>a <00:18:04.595>website, <00:18:04.795>which <00:18:04.995>you <00:18:05.195>can <00:18:05.395>yourself, <00:18:05.595>um, <00:18:05.795>uh,

404
00:18:07.335 --> 00:18:08.515
<00:18:07.335>access <00:18:07.689>by <00:18:08.043>the <00:18:08.397>way.

405
00:18:08.975 --> 00:18:12.515
<00:18:08.975>Um, <00:18:09.130>it's <00:18:09.286>absolutely <00:18:09.441>amazing <00:18:09.597>how <00:18:09.752>they, <00:18:09.908>they <00:18:10.063>made <00:18:10.219>it <00:18:10.375>public.

406
00:18:13.135 --> 00:18:16.755
<00:18:13.135>Um, <00:18:13.290>they <00:18:13.446>made <00:18:13.601>it <00:18:13.757>public <00:18:13.912>how <00:18:14.068>all <00:18:14.223>of <00:18:14.379>their, <00:18:14.535>uh,

407
00:18:16.755 --> 00:18:18.555
<00:18:16.755>design <00:18:17.221>system <00:18:17.688>is <00:18:18.155>organized

408
00:18:18.815 --> 00:18:20.595
<00:18:18.815>and <00:18:19.048>they <00:18:19.281>made <00:18:19.515>it <00:18:19.748>public <00:18:19.981>how <00:18:20.215>all

409
00:18:20.595 --> 00:18:24.315
<00:18:20.595>of <00:18:20.722>their <00:18:20.849>small <00:18:20.976>bits <00:18:21.104>are <00:18:21.231>an <00:18:21.358>atom, <00:18:21.485>for <00:18:21.613>example, <00:18:21.740>or <00:18:21.867>a <00:18:21.995>molecule.

410
00:18:24.855 --> 00:18:28.115
<00:18:24.855>If <00:18:25.055>you <00:18:25.255>look <00:18:25.455>at <00:18:25.655>storybooks, <00:18:25.855>uh, <00:18:26.055>of <00:18:26.255>Airbnb,

411
00:18:28.615 --> 00:18:31.675
<00:18:28.615>you <00:18:28.815>can <00:18:29.015>clearly <00:18:29.215>select <00:18:29.415>all <00:18:29.615>the <00:18:29.815>different <00:18:30.015>atoms

412
00:18:31.675 --> 00:18:32.755
<00:18:31.675>and <00:18:31.869>see <00:18:32.063>how <00:18:32.258>they <00:18:32.452>look <00:18:32.647>like.

413
00:18:33.295 --> 00:18:34.835
<00:18:33.295>And <00:18:33.526>this <00:18:33.757>is <00:18:33.988>how <00:18:34.219>you <00:18:34.450>really <00:18:34.681>understand

414
00:18:34.935 --> 00:18:37.075
<00:18:34.935>how <00:18:35.215>they <00:18:35.495>code, <00:18:35.774>like <00:18:36.054>they <00:18:36.335>do.

415
00:18:37.075 --> 00:18:41.595
<00:18:37.075>Lego <00:18:37.308>example <00:18:37.541>as <00:18:37.775>well <00:18:38.008>is <00:18:38.241>to <00:18:38.475>check,

416
00:18:41.615 --> 00:18:44.755
<00:18:41.615>for <00:18:41.742>example, <00:18:41.869>the <00:18:41.996>UI <00:18:42.124>libraries <00:18:42.251>and <00:18:42.378>the <00:18:42.505>design <00:18:42.633>is <00:18:42.760>one <00:18:42.887>of <00:18:43.015>them.

417
00:18:45.415 --> 00:18:47.635
<00:18:45.415>You <00:18:45.615>have <00:18:45.815>to <00:18:46.014>think <00:18:46.215>of <00:18:46.415>coding <00:18:46.615>your <00:18:46.815>app.

418
00:18:47.855 --> 00:18:51.015
<00:18:47.855>And <00:18:48.030>when <00:18:48.205>I <00:18:48.380>say <00:18:48.555>your <00:18:48.730>app, <00:18:48.905>your <00:18:49.080>ui, <00:18:49.255>exactly,

419
00:18:51.045 --> 00:18:53.775
<00:18:51.045>like <00:18:51.220>if <00:18:51.395>you <00:18:51.570>were <00:18:51.745>coding <00:18:51.920>your <00:18:52.095>own <00:18:52.270>UI <00:18:52.445>library,

420
00:18:54.245 --> 00:18:58.455
<00:18:54.245>because <00:18:54.419>your <00:18:54.594>project <00:18:54.770>is <00:18:54.945>using <00:18:55.120>your <00:18:55.294>inner <00:18:55.469>library, <00:18:55.645>basically.

421
00:18:58.915 --> 00:19:01.615
<00:18:58.915>So <00:18:59.055>you <00:18:59.195>know, <00:18:59.335>antide <00:18:59.475>design <00:18:59.615>is <00:18:59.754>a <00:18:59.895>good <00:19:00.034>idea <00:19:00.175>for <00:19:00.315>you

422
00:19:01.615 --> 00:19:05.295
<00:19:01.615>to <00:19:01.742>understand <00:19:01.869>what <00:19:01.996>would <00:19:02.124>consist <00:19:02.251>as <00:19:02.378>an <00:19:02.505>atom, <00:19:02.633>as <00:19:02.760>a <00:19:02.887>ui <00:19:03.015>ato.

423
00:19:05.715 --> 00:19:09.895
<00:19:05.715>And <00:19:05.889>they <00:19:06.064>have <00:19:06.240>so <00:19:06.415>many <00:19:06.590>different <00:19:06.764>small <00:19:06.939>components, <00:19:07.115>uh,

424
00:19:09.895 --> 00:19:12.535
<00:19:09.895>that <00:19:10.022>they <00:19:10.149>have, <00:19:10.276>and <00:19:10.404>you <00:19:10.531>can <00:19:10.658>go <00:19:10.785>through <00:19:10.913>all <00:19:11.040>of <00:19:11.167>them, <00:19:11.295>and

425
00:19:12.535 --> 00:19:14.975
<00:19:12.535>therefore <00:19:12.690>when <00:19:12.846>you're <00:19:13.001>going <00:19:13.157>to <00:19:13.312>code <00:19:13.468>your <00:19:13.623>own <00:19:13.779>version <00:19:13.935>of

426
00:19:14.975 --> 00:19:17.095
<00:19:14.975>that, <00:19:15.130>like <00:19:15.286>imagine <00:19:15.441>if <00:19:15.597>your <00:19:15.752>styling <00:19:15.908>is <00:19:16.063>a <00:19:16.219>bit <00:19:16.375>different

427
00:19:17.155 --> 00:19:18.575
<00:19:17.155>or <00:19:17.410>styling <00:19:17.666>is <00:19:17.921>different, <00:19:18.177>for <00:19:18.433>example,

428
00:19:18.715 --> 00:19:22.855
<00:19:18.715>for <00:19:18.889>a <00:19:19.064>multiple <00:19:19.240>selection <00:19:19.415>for, <00:19:19.590>uh, <00:19:19.764>dropdowns, <00:19:19.939>et <00:19:20.115>cetera.

429
00:19:22.895 --> 00:19:26.495
<00:19:22.895>I <00:19:23.011>created <00:19:23.128>my <00:19:23.245>own. <00:19:23.361>But <00:19:23.478>you <00:19:23.595>know, <00:19:23.711>when <00:19:23.828>I <00:19:23.945>went <00:19:24.061>to <00:19:24.178>Antide <00:19:24.295>design

430
00:19:26.515 --> 00:19:29.415
<00:19:26.515>and <00:19:26.642>looked <00:19:26.769>at <00:19:26.896>the <00:19:27.024>source <00:19:27.151>code, <00:19:27.278>looked <00:19:27.405>at <00:19:27.533>how <00:19:27.660>they <00:19:27.787>made <00:19:27.915>it,

431
00:19:30.015 --> 00:19:33.135
<00:19:30.015>I <00:19:30.170>realized <00:19:30.326>how, <00:19:30.481>you <00:19:30.637>know, <00:19:30.792>how <00:19:30.948>reusable <00:19:31.103>is <00:19:31.259>antide <00:19:31.415>design.

432
00:19:33.135 --> 00:19:36.175
<00:19:33.135>That's <00:19:33.290>the <00:19:33.446>whole <00:19:33.601>point. <00:19:33.757>So <00:19:33.912>many <00:19:34.068>people <00:19:34.223>use <00:19:34.379>it, <00:19:34.535>um,

433
00:19:36.435 --> 00:19:38.495
<00:19:36.435>and <00:19:36.590>they <00:19:36.746>have <00:19:36.901>so <00:19:37.057>many <00:19:37.212>different <00:19:37.368>components <00:19:37.523>which <00:19:37.679>you <00:19:37.835>can

434
00:19:38.515 --> 00:19:40.855
<00:19:38.515>neatly <00:19:38.748>call, <00:19:38.981>um, <00:19:39.215>in <00:19:39.448>your <00:19:39.681>own <00:19:39.915>code.

435
00:19:41.275 --> 00:19:45.135
<00:19:41.275>So <00:19:41.391>the <00:19:41.508>goal <00:19:41.625>really <00:19:41.741>is <00:19:41.858>to <00:19:41.975>kind <00:19:42.091>of <00:19:42.208>create <00:19:42.325>your <00:19:42.441>own <00:19:42.558>Andy <00:19:42.675>design

436
00:19:45.715 --> 00:19:46.775
<00:19:45.715>and, <00:19:45.953>you <00:19:46.192>know, <00:19:46.430>guess <00:19:46.669>what?

437
00:19:46.775 --> 00:19:48.175
<00:19:46.775>Their, <00:19:47.027>their <00:19:47.279>code <00:19:47.531>base, <00:19:47.783>I <00:19:48.034>mean,

438
00:19:48.175 --> 00:19:49.255
<00:19:48.175>their <00:19:48.418>code <00:19:48.661>is <00:19:48.904>completely <00:19:49.147>public.

439
00:19:49.475 --> 00:19:51.735
<00:19:49.475>You <00:19:49.630>go <00:19:49.786>on <00:19:49.941>GitHub <00:19:50.097>and <00:19:50.252>you <00:19:50.408>check <00:19:50.563>their <00:19:50.719>source <00:19:50.875>code

440
00:19:51.915 --> 00:19:54.295
<00:19:51.915>and <00:19:52.115>they <00:19:52.315>have <00:19:52.514>used <00:19:52.715>TypeScript, <00:19:52.915>which <00:19:53.115>is <00:19:53.315>also

441
00:19:54.295 --> 00:19:55.695
<00:19:54.295>what <00:19:54.547>I'm <00:19:54.799>going <00:19:55.051>to <00:19:55.303>mention <00:19:55.554>afterwards.

442
00:19:56.235 --> 00:19:59.055
<00:19:56.235>Um, <00:19:56.375>that's <00:19:56.514>how <00:19:56.655>they <00:19:56.794>could, <00:19:56.935>you <00:19:57.074>know, <00:19:57.215>build <00:19:57.354>it <00:19:57.495>in <00:19:57.635>a,

443
00:19:59.055 --> 00:20:00.295
<00:19:59.055>in <00:19:59.334>a <00:19:59.613>very <00:19:59.892>maintainable <00:20:00.171>way

444
00:20:00.295 --> 00:20:02.255
<00:20:00.295>and <00:20:00.495>having <00:20:00.695>all <00:20:00.895>engineers <00:20:01.095>on <00:20:01.295>the <00:20:01.495>same <00:20:01.695>page.

445
00:20:04.225 --> 00:20:05.565
<00:20:04.225>So <00:20:04.426>let's <00:20:04.627>go <00:20:04.828>to <00:20:05.029>the <00:20:05.230>code <00:20:05.431>quickly.

446
00:20:05.705 --> 00:20:08.565
<00:20:05.705>So <00:20:05.845>on <00:20:05.985>the <00:20:06.125>atomic <00:20:06.264>level, <00:20:06.405>I'm <00:20:06.544>going <00:20:06.685>to <00:20:06.824>give <00:20:06.965>an <00:20:07.105>example.

447
00:20:09.385 --> 00:20:11.365
<00:20:09.385>Uh, <00:20:09.735>so, <00:20:10.085>okay, <00:20:10.435>let's <00:20:10.785>see.

448
00:20:11.475 --> 00:20:15.045
<00:20:11.475>What <00:20:11.602>is <00:20:11.729>a <00:20:11.856>very <00:20:11.984>obvious <00:20:12.111>ideal <00:20:12.238>example <00:20:12.365>for <00:20:12.493>you <00:20:12.620>to <00:20:12.747>think <00:20:12.875>of,

449
00:20:15.265 --> 00:20:16.485
<00:20:15.265>uh, <00:20:15.539>in <00:20:15.814>terms <00:20:16.088>of <00:20:16.362>atom?

450
00:20:16.865 --> 00:20:20.405
<00:20:16.865>And <00:20:17.005>atom <00:20:17.145>can <00:20:17.285>be <00:20:17.425>an <00:20:17.565>input <00:20:17.705>field, <00:20:17.845>a <00:20:17.985>single <00:20:18.125>input <00:20:18.265>field.

451
00:20:21.795 --> 00:20:24.895
<00:20:21.795>It <00:20:21.922>can <00:20:22.049>be, <00:20:22.176>you <00:20:22.304>know, <00:20:22.431>a <00:20:22.558>button, <00:20:22.685>it <00:20:22.813>can <00:20:22.940>be, <00:20:23.067>you <00:20:23.195>know,

452
00:20:24.895 --> 00:20:26.855
<00:20:24.895>you <00:20:25.128>can <00:20:25.361>have <00:20:25.595>the <00:20:25.828>folder <00:20:26.061>called <00:20:26.295>typography,

453
00:20:26.995 --> 00:20:30.935
<00:20:26.995>and <00:20:27.122>inside <00:20:27.249>you <00:20:27.376>have, <00:20:27.504>you <00:20:27.631>know, <00:20:27.758>all <00:20:27.885>the <00:20:28.013>kind <00:20:28.140>of, <00:20:28.267>um, <00:20:28.395>sort

454
00:20:30.935 --> 00:20:33.055
<00:20:30.935>of <00:20:31.075>headers <00:20:31.215>that <00:20:31.355>you <00:20:31.495>would <00:20:31.635>think <00:20:31.774>of <00:20:31.915>for, <00:20:32.054>for <00:20:32.195>your <00:20:32.335>app.

455
00:20:33.115 --> 00:20:35.535
<00:20:33.115>So <00:20:33.315>headers, <00:20:33.515>paragraph, <00:20:33.715>question <00:20:33.915>title, <00:20:34.115>very <00:20:34.315>no <00:20:34.515>moments

456
00:20:36.275 --> 00:20:39.575
<00:20:36.275>header <00:20:36.402>here <00:20:36.529>on <00:20:36.656>the <00:20:36.784>atom <00:20:36.911>would <00:20:37.038>be <00:20:37.165>more, <00:20:37.293>you <00:20:37.420>have <00:20:37.547>two <00:20:37.675>folders.

457
00:20:39.575 --> 00:20:41.415
<00:20:39.575>You <00:20:39.730>have <00:20:39.886>the <00:20:40.041>folder <00:20:40.197>header, <00:20:40.352>then <00:20:40.508>you <00:20:40.663>have <00:20:40.819>the <00:20:40.975>folder

458
00:20:41.735 --> 00:20:42.735
<00:20:41.735>typography <00:20:42.034>with <00:20:42.334>header <00:20:42.635>there.

459
00:20:42.735 --> 00:20:47.245
<00:20:42.735>For <00:20:42.862>example, <00:20:42.989>header <00:20:43.116>here <00:20:43.244>on, <00:20:43.371>on <00:20:43.498>the, <00:20:43.625>you <00:20:43.753>know, <00:20:43.880>on <00:20:44.007>the, <00:20:44.135>uh,

460
00:20:47.365 --> 00:20:49.805
<00:20:47.365>a <00:20:47.520>direct <00:20:47.676>sub <00:20:47.831>folder <00:20:47.987>of <00:20:48.142>atoms <00:20:48.298>would <00:20:48.453>be, <00:20:48.609>for <00:20:48.765>example,

461
00:20:49.825 --> 00:20:53.525
<00:20:49.825>the <00:20:49.952>page <00:20:50.079>header <00:20:50.206>or <00:20:50.334>you <00:20:50.461>know, <00:20:50.588>the <00:20:50.715>header <00:20:50.843>on <00:20:50.970>your, <00:20:51.097>you <00:20:51.225>know,

462
00:20:53.825 --> 00:20:55.485
<00:20:53.825>at, <00:20:54.105>at <00:20:54.385>the <00:20:54.665>very <00:20:54.945>page <00:20:55.225>level.

463
00:20:56.305 --> 00:20:57.485
<00:20:56.305>For <00:20:56.570>example, <00:20:56.836>I <00:20:57.101>don't <00:20:57.367>know.

464
00:20:57.505 --> 00:21:00.685
<00:20:57.505>Uh, <00:20:57.680>welcome <00:20:57.855>page, <00:20:58.030>welcome <00:20:58.205>would <00:20:58.380>be <00:20:58.555>the <00:20:58.730>header, <00:20:58.905>um,

465
00:21:00.785 --> 00:21:02.085
<00:21:00.785>and <00:21:01.175>header <00:21:01.565>in <00:21:01.955>typography.

466
00:21:02.285 --> 00:21:03.325
<00:21:02.285>Typography <00:21:02.519>means <00:21:02.753>more <00:21:02.987>in <00:21:03.221>terms

467
00:21:03.345 --> 00:21:05.485
<00:21:03.345>of <00:21:03.625>your <00:21:03.905>paragraph <00:21:04.185>split <00:21:04.465>that <00:21:04.745>way.

468
00:21:06.425 --> 00:21:08.645
<00:21:06.425>So <00:21:06.580>again, <00:21:06.736>it <00:21:06.891>depends <00:21:07.047>on <00:21:07.202>the <00:21:07.358>need <00:21:07.513>of <00:21:07.669>your <00:21:07.825>app.

469
00:21:09.185 --> 00:21:10.925
<00:21:09.185>Uh, <00:21:09.465>our <00:21:09.745>app <00:21:10.024>had <00:21:10.304>those <00:21:10.585>needs,

470
00:21:11.705 --> 00:21:14.445
<00:21:11.705>and <00:21:11.860>you <00:21:12.016>can <00:21:12.171>see <00:21:12.327>how <00:21:12.482>those <00:21:12.638>to <00:21:12.793>me <00:21:12.949>are <00:21:13.105>atoms.

471
00:21:14.785 --> 00:21:15.925
<00:21:14.785>It <00:21:15.041>does <00:21:15.298>not <00:21:15.554>contain <00:21:15.811>logic.

472
00:21:16.555 --> 00:21:18.565
<00:21:16.555>It's <00:21:16.755>something <00:21:16.955>that <00:21:17.155>you <00:21:17.355>give <00:21:17.555>it <00:21:17.755>to <00:21:17.955>it

473
00:21:18.985 --> 00:21:23.125
<00:21:18.985>and <00:21:19.125>it <00:21:19.264>does <00:21:19.405>very <00:21:19.544>small <00:21:19.685>UI <00:21:19.824>pits <00:21:19.965>on <00:21:20.104>the, <00:21:20.245>uh, <00:21:20.385>page,

474
00:21:23.125 --> 00:21:24.685
<00:21:23.125>which <00:21:23.475>you <00:21:23.825>can't <00:21:24.175>possibly <00:21:24.525>divide.

475
00:21:24.755 --> 00:21:26.405
<00:21:24.755>It's <00:21:25.105>like <00:21:25.455>the <00:21:25.805>smallest <00:21:26.155>bit,

476
00:21:26.405 --> 00:21:27.925
<00:21:26.405>which <00:21:26.678>you <00:21:26.952>can't <00:21:27.225>divide <00:21:27.499>by <00:21:27.773>itself.

477
00:21:29.155 --> 00:21:31.465
<00:21:29.155>Let's <00:21:29.355>say <00:21:29.555>for <00:21:29.754>example, <00:21:29.955>you <00:21:30.155>know, <00:21:30.355>button <00:21:30.555>let's,

478
00:21:31.505 --> 00:21:35.025
<00:21:31.505>I <00:21:31.632>have <00:21:31.759>a <00:21:31.886>huge <00:21:32.014>button <00:21:32.141>file <00:21:32.268>where <00:21:32.395>I <00:21:32.523>have <00:21:32.650>a <00:21:32.777>switch <00:21:32.905>case,

479
00:21:35.385 --> 00:21:37.705
<00:21:35.385>a <00:21:35.540>switch <00:21:35.696>function, <00:21:35.851>which <00:21:36.007>takes, <00:21:36.162>you <00:21:36.318>know, <00:21:36.473>in <00:21:36.629>the <00:21:36.785>case

480
00:21:37.805 --> 00:21:40.465
<00:21:37.805>of <00:21:37.960>secondary, <00:21:38.116>which <00:21:38.271>is <00:21:38.427>the <00:21:38.582>theme <00:21:38.738>which <00:21:38.893>I <00:21:39.049>would've <00:21:39.205>passed,

481
00:21:41.005 --> 00:21:43.145
<00:21:41.005>I'm <00:21:41.238>saying, <00:21:41.471>okay, <00:21:41.705>if <00:21:41.938>there <00:21:42.171>is <00:21:42.405>button

482
00:21:43.255 --> 00:21:46.505
<00:21:43.255>with <00:21:43.430>the <00:21:43.605>props <00:21:43.780>theme <00:21:43.955>passed <00:21:44.130>as <00:21:44.305>secondary, <00:21:44.480>I'm <00:21:44.655>going

483
00:21:46.505 --> 00:21:49.345
<00:21:46.505>to <00:21:46.680>render <00:21:46.855>the <00:21:47.030>secondary, <00:21:47.205>um, <00:21:47.380>the <00:21:47.555>button, <00:21:47.730>which <00:21:47.905>is

484
00:21:49.345 --> 00:21:50.545
<00:21:49.345>with <00:21:49.705>a <00:21:50.065>secondary <00:21:50.425>component.

485
00:21:51.395 --> 00:21:52.975
<00:21:51.395>I'm <00:21:51.675>using <00:21:51.955>style <00:21:52.235>component <00:21:52.514>for <00:21:52.795>those

486
00:21:52.995 --> 00:21:54.495
<00:21:52.995>who <00:21:53.332>don't <00:21:53.669>use <00:21:54.007>style <00:21:54.344>components

487
00:21:54.515 --> 00:21:57.415
<00:21:54.515>and <00:21:54.670>are <00:21:54.826>not, <00:21:54.981>um, <00:21:55.137>very, <00:21:55.292>uh, <00:21:55.448>used <00:21:55.603>to <00:21:55.759>seeing <00:21:55.915>this.

488
00:21:57.445 --> 00:22:00.735
<00:21:57.445>This <00:21:57.620>is <00:21:57.794>how <00:21:57.970>you, <00:21:58.145>uh, <00:21:58.320>create <00:21:58.495>a <00:21:58.669>stylized <00:21:58.845>components,

489
00:22:00.735 --> 00:22:02.935
<00:22:00.735>which <00:22:00.968>you <00:22:01.201>can <00:22:01.435>call <00:22:01.668>within <00:22:01.901>the <00:22:02.135>components.

490
00:22:02.965 --> 00:22:04.895
<00:22:02.965>It's <00:22:03.198>like <00:22:03.431>a <00:22:03.665>normal <00:22:03.898>react <00:22:04.131>component <00:22:04.365>basically,

491
00:22:04.895 --> 00:22:06.895
<00:22:04.895>which <00:22:05.175>in <00:22:05.455>which <00:22:05.735>you <00:22:06.014>inject <00:22:06.295>CSS.

492
00:22:08.435 --> 00:22:12.815
<00:22:08.435>So <00:22:08.575>can <00:22:08.715>you <00:22:08.855>see <00:22:08.995>how <00:22:09.135>you <00:22:09.274>know <00:22:09.415>how <00:22:09.554>everything <00:22:09.695>is <00:22:09.835>basically,

493
00:22:13.035 --> 00:22:14.615
<00:22:13.035>you <00:22:13.315>know, <00:22:13.595>unified <00:22:13.875>in <00:22:14.155>this <00:22:14.435>file,

494
00:22:14.835 --> 00:22:16.975
<00:22:14.835>my <00:22:15.068>button <00:22:15.301>can <00:22:15.535>contain <00:22:15.768>30 <00:22:16.001>different <00:22:16.235>themes

495
00:22:17.515 --> 00:22:20.175
<00:22:17.515>and <00:22:17.655>I'm <00:22:17.795>going <00:22:17.935>to <00:22:18.075>have <00:22:18.215>this <00:22:18.355>case <00:22:18.495>function <00:22:18.635>like <00:22:18.775>this <00:22:18.915>switch,

496
00:22:20.235 --> 00:22:23.455
<00:22:20.235>and <00:22:20.362>then <00:22:20.489>case, <00:22:20.616>and <00:22:20.744>I <00:22:20.871>have <00:22:20.998>all <00:22:21.125>my <00:22:21.253>30 <00:22:21.380>themes <00:22:21.507>very <00:22:21.635>clearly.

497
00:22:23.675 --> 00:22:25.975
<00:22:23.675>So <00:22:23.955>when <00:22:24.235>you <00:22:24.514>onboard <00:22:24.794>new <00:22:25.075>engineers

498
00:22:26.555 --> 00:22:30.535
<00:22:26.555>and <00:22:26.695>they <00:22:26.835>don't <00:22:26.975>know <00:22:27.115>exactly <00:22:27.255>what <00:22:27.395>kind <00:22:27.535>of <00:22:27.675>buttons <00:22:27.815>there <00:22:27.955>is

499
00:22:30.715 --> 00:22:34.935
<00:22:30.715>and <00:22:30.855>what <00:22:30.995>are <00:22:31.135>the <00:22:31.274>choices <00:22:31.415>of <00:22:31.554>buttons <00:22:31.695>that <00:22:31.834>they <00:22:31.975>can <00:22:32.115>use

500
00:22:35.555 --> 00:22:38.535
<00:22:35.555>and <00:22:35.710>how <00:22:35.866>they <00:22:36.021>look <00:22:36.177>like, <00:22:36.332>you <00:22:36.488>know, <00:22:36.643>you <00:22:36.799>say, <00:22:36.955>go

501
00:22:38.535 --> 00:22:40.215
<00:22:38.535>to <00:22:38.768>the <00:22:39.001>button <00:22:39.235>file <00:22:39.468>on <00:22:39.701>the <00:22:39.935>atom

502
00:22:40.475 --> 00:22:42.855
<00:22:40.475>and <00:22:40.649>they <00:22:40.824>can <00:22:41.000>see <00:22:41.175>everything <00:22:41.350>that <00:22:41.524>they <00:22:41.699>can <00:22:41.875>use.

503
00:22:43.845 --> 00:22:46.135
<00:22:43.845>They <00:22:44.000>want <00:22:44.156>need <00:22:44.311>to <00:22:44.467>create <00:22:44.622>a <00:22:44.778>button <00:22:44.933>that <00:22:45.089>doesn't <00:22:45.245>exist.

504
00:22:46.135 --> 00:22:49.215
<00:22:46.135>They <00:22:46.290>can <00:22:46.446>understand <00:22:46.601>what's <00:22:46.757>going <00:22:46.912>on <00:22:47.068>there <00:22:47.223>and <00:22:47.379>compare <00:22:47.535>them

505
00:22:49.515 --> 00:22:51.775
<00:22:49.515>and, <00:22:49.715>you <00:22:49.915>know, <00:22:50.115>see <00:22:50.315>the <00:22:50.515>props <00:22:50.715>for <00:22:50.915>each.

506
00:22:54.125 --> 00:22:58.745
<00:22:54.125>So <00:22:54.252>this <00:22:54.379>is <00:22:54.506>also <00:22:54.634>another <00:22:54.761>example <00:22:54.888>of <00:22:55.015>code <00:22:55.143>for, <00:22:55.270>um, <00:22:55.397>sorry, <00:22:55.525>uh,

507
00:22:58.925 --> 00:23:03.135
<00:22:58.925>for, <00:22:59.274>um, <00:22:59.625>the <00:22:59.975>atom, <00:23:00.325>um,

508
00:23:03.685 --> 00:23:06.935
<00:23:03.685>icon <00:23:03.825>is <00:23:03.965>also <00:23:04.105>a <00:23:04.245>very <00:23:04.385>good <00:23:04.524>example <00:23:04.665>of <00:23:04.804>an <00:23:04.945>atom <00:23:05.085>component.

509
00:23:07.875 --> 00:23:11.215
<00:23:07.875>Why? <00:23:08.030>Because <00:23:08.186>again, <00:23:08.341>the <00:23:08.497>icon <00:23:08.652>is <00:23:08.808>something <00:23:08.963>which <00:23:09.119>I'm <00:23:09.275>going

510
00:23:11.215 --> 00:23:13.015
<00:23:11.215>to <00:23:11.448>reuse <00:23:11.681>across <00:23:11.915>all <00:23:12.148>of <00:23:12.381>the <00:23:12.615>application,

511
00:23:13.075 --> 00:23:15.895
<00:23:13.075>and <00:23:13.230>I <00:23:13.386>want <00:23:13.541>to <00:23:13.697>make <00:23:13.852>sure <00:23:14.008>that <00:23:14.163>when <00:23:14.319>engineers <00:23:14.475>have

512
00:23:15.895 --> 00:23:19.015
<00:23:15.895>to <00:23:16.050>include <00:23:16.206>an <00:23:16.361>icon <00:23:16.517>somewhere, <00:23:16.672>they <00:23:16.828>don't <00:23:16.983>have <00:23:17.139>to <00:23:17.295>import,

513
00:23:19.195 --> 00:23:20.775
<00:23:19.195>you <00:23:19.475>know, <00:23:19.754>an <00:23:20.034>asset <00:23:20.314>and <00:23:20.595>have

514
00:23:20.775 --> 00:23:23.415
<00:23:20.775>to <00:23:20.950>start <00:23:21.125>it <00:23:21.300>all <00:23:21.475>the <00:23:21.650>time <00:23:21.825>all <00:23:22.000>over <00:23:22.175>again.

515
00:23:23.915 --> 00:23:25.935
<00:23:23.915>And <00:23:24.115>they <00:23:24.315>don't <00:23:24.514>even <00:23:24.715>know <00:23:24.915>which <00:23:25.115>icon <00:23:25.315>is,

516
00:23:25.995 --> 00:23:27.055
<00:23:25.995>is <00:23:26.233>for <00:23:26.472>what <00:23:26.710>you <00:23:26.949>know.

517
00:23:27.475 --> 00:23:31.175
<00:23:27.475>So <00:23:27.591>I <00:23:27.708>think <00:23:27.824>it's <00:23:27.941>important <00:23:28.058>to <00:23:28.175>have <00:23:28.291>an <00:23:28.408>icon <00:23:28.524>file <00:23:28.641>in <00:23:28.758>your <00:23:28.875>atom,

518
00:23:31.475 --> 00:23:35.895
<00:23:31.475>um, <00:23:31.630>folder <00:23:31.786>where <00:23:31.941>you <00:23:32.097>have <00:23:32.252>all <00:23:32.408>of <00:23:32.563>the <00:23:32.719>different <00:23:32.875>possibilities

519
00:23:35.895 --> 00:23:39.765
<00:23:35.895>of <00:23:36.070>icons <00:23:36.245>and <00:23:36.420>you <00:23:36.595>have <00:23:36.770>a <00:23:36.945>very <00:23:37.120>like <00:23:37.295>generic

520
00:23:39.985 --> 00:23:41.045
<00:23:39.985>way <00:23:40.303>of <00:23:40.621>styling <00:23:40.939>them.

521
00:23:41.065 --> 00:23:45.045
<00:23:41.065>So <00:23:41.205>for <00:23:41.345>example, <00:23:41.485>um, <00:23:41.625>copy <00:23:41.765>or <00:23:41.905>email <00:23:42.045>or <00:23:42.185>send <00:23:42.325>or <00:23:42.465>info.

522
00:23:45.245 --> 00:23:47.365
<00:23:45.245>I <00:23:45.385>know <00:23:45.524>that <00:23:45.665>usually <00:23:45.804>those <00:23:45.945>kind <00:23:46.084>of <00:23:46.225>icons <00:23:46.364>will <00:23:46.504>be <00:23:46.645>inside

523
00:23:47.365 --> 00:23:50.165
<00:23:47.365>of <00:23:47.505>a <00:23:47.645>button <00:23:47.785>and <00:23:47.925>there <00:23:48.065>is <00:23:48.205>no <00:23:48.345>other <00:23:48.485>way <00:23:48.625>my <00:23:48.765>app

524
00:23:50.165 --> 00:23:52.125
<00:23:50.165>where <00:23:50.365>I <00:23:50.565>can <00:23:50.764>have <00:23:50.965>those <00:23:51.165>icons <00:23:51.365>in <00:23:51.565>and

525
00:23:52.125 --> 00:23:54.285
<00:23:52.125>therefore <00:23:52.358>I'm <00:23:52.591>going <00:23:52.825>to <00:23:53.058>ize <00:23:53.291>them <00:23:53.525>thinking

526
00:23:54.285 --> 00:23:55.645
<00:23:54.285>that <00:23:54.438>it's <00:23:54.591>going <00:23:54.744>to <00:23:54.897>be <00:23:55.050>inside <00:23:55.203>of <00:23:55.356>a <00:23:55.509>button.

527
00:23:55.865 --> 00:23:59.005
<00:23:55.865>And <00:23:56.020>therefore <00:23:56.176>they <00:23:56.331>have <00:23:56.487>something <00:23:56.642>like <00:23:56.798>width <00:23:56.953>of <00:23:57.109>12 <00:23:57.265>pixels

528
00:23:59.815 --> 00:24:01.275
<00:23:59.815>and <00:24:00.034>someone <00:24:00.253>doesn't <00:24:00.472>have <00:24:00.691>to <00:24:00.910>think <00:24:01.129>about

529
00:24:01.275 --> 00:24:02.555
<00:24:01.275>it, <00:24:01.505>it's <00:24:01.735>just <00:24:01.966>done <00:24:02.196>for <00:24:02.427>them.

530
00:24:03.695 --> 00:24:07.155
<00:24:03.695>And <00:24:03.850>same <00:24:04.006>when <00:24:04.161>they <00:24:04.317>code, <00:24:04.472>they <00:24:04.628>can <00:24:04.783>understand <00:24:04.939>which <00:24:05.095>kind

531
00:24:07.155 --> 00:24:09.155
<00:24:07.155>of <00:24:07.330>icon <00:24:07.504>it <00:24:07.680>is <00:24:07.855>without <00:24:08.030>having <00:24:08.205>to <00:24:08.379>worry <00:24:08.555>about

532
00:24:09.695 --> 00:24:10.715
<00:24:09.695>the <00:24:10.154>assets <00:24:10.612>behind.

533
00:24:10.715 --> 00:24:14.155
<00:24:10.715>Because <00:24:10.870>if <00:24:11.026>I <00:24:11.181>want <00:24:11.337>to <00:24:11.492>change <00:24:11.648>the <00:24:11.803>assets, <00:24:11.959>let's <00:24:12.115>say

534
00:24:14.155 --> 00:24:18.035
<00:24:14.155>that <00:24:14.271>I <00:24:14.388>want <00:24:14.504>to <00:24:14.621>change <00:24:14.738>the <00:24:14.855>icon <00:24:14.971>of <00:24:15.088>the <00:24:15.205>email, <00:24:15.321>I <00:24:15.438>only <00:24:15.555>have

535
00:24:18.035 --> 00:24:19.075
<00:24:18.035>to <00:24:18.222>change <00:24:18.409>it <00:24:18.596>in <00:24:18.783>one <00:24:18.971>file.

536
00:24:19.575 --> 00:24:22.115
<00:24:19.575>I'm <00:24:19.750>saying <00:24:19.925>I'm <00:24:20.100>going <00:24:20.275>to <00:24:20.450>the <00:24:20.625>icon, <00:24:20.800>uh, <00:24:20.975>component.

537
00:24:22.655 --> 00:24:27.395
<00:24:22.655>I'm <00:24:22.830>going <00:24:23.004>to, <00:24:23.180>uh, <00:24:23.355>import <00:24:23.530>the, <00:24:23.705>um, <00:24:23.879>new, <00:24:24.055>um,

538
00:24:27.705 --> 00:24:31.395
<00:24:27.705>file <00:24:27.879>image <00:24:28.054>and <00:24:28.230>everywhere <00:24:28.405>on <00:24:28.580>the <00:24:28.754>application <00:24:28.929>in <00:24:29.105>absolutely

539
00:24:31.565 --> 00:24:35.275
<00:24:31.565>every <00:24:31.740>single <00:24:31.915>use <00:24:32.090>case <00:24:32.265>of <00:24:32.440>having <00:24:32.615>an <00:24:32.790>email <00:24:32.965>icon,

540
00:24:35.335 --> 00:24:38.655
<00:24:35.335>the <00:24:35.510>new <00:24:35.685>icon <00:24:35.860>will <00:24:36.035>be <00:24:36.210>updated, <00:24:36.385>which <00:24:36.560>is <00:24:36.735>amazing.

541
00:24:38.675 --> 00:24:39.975
<00:24:38.675>You <00:24:38.908>don't <00:24:39.143>have <00:24:39.377>to <00:24:39.610>look <00:24:39.844>for

542
00:24:40.545 --> 00:24:42.535
<00:24:40.545>where <00:24:40.720>is <00:24:40.895>your <00:24:41.070>email <00:24:41.245>icon <00:24:41.420>in <00:24:41.595>the <00:24:41.770>code <00:24:41.945>base

543
00:24:42.535 --> 00:24:45.535
<00:24:42.535>and <00:24:42.651>I <00:24:42.768>need <00:24:42.885>to <00:24:43.001>change, <00:24:43.118>um, <00:24:43.235>you <00:24:43.351>know, <00:24:43.468>the <00:24:43.585>link <00:24:43.701>of <00:24:43.818>the <00:24:43.935>asset.

544
00:24:47.675 --> 00:24:48.935
<00:24:47.675>Now <00:24:47.901>let's <00:24:48.128>see <00:24:48.355>the <00:24:48.582>molecule <00:24:48.809>level.

545
00:24:48.995 --> 00:24:51.215
<00:24:48.995>So <00:24:49.169>molecule <00:24:49.344>level <00:24:49.520>is <00:24:49.695>when <00:24:49.870>you <00:24:50.044>have <00:24:50.219>a <00:24:50.395>group

546
00:24:51.215 --> 00:24:52.855
<00:24:51.215>of <00:24:51.681>items <00:24:52.148>all <00:24:52.615>together.

547
00:24:54.195 --> 00:24:56.975
<00:24:54.195>So <00:24:54.335>a <00:24:54.475>very <00:24:54.615>ideal <00:24:54.754>example <00:24:54.895>for <00:24:55.034>it <00:24:55.175>would <00:24:55.314>be, <00:24:55.455>for <00:24:55.595>example,

548
00:24:57.235 --> 00:25:00.535
<00:24:57.235>you <00:24:57.435>know, <00:24:57.635>um, <00:24:57.834>the <00:24:58.034>form <00:24:58.235>fields, <00:24:58.435>group <00:24:58.635>folder

549
00:25:01.345 --> 00:25:05.095
<00:25:01.345>where <00:25:01.500>you <00:25:01.656>have <00:25:01.811>checkbox <00:25:01.967>group <00:25:02.122>radio, <00:25:02.278>group <00:25:02.433>radio <00:25:02.589>group <00:25:02.745>form,

550
00:25:05.245 --> 00:25:06.295
<00:25:05.245>like <00:25:05.434>all <00:25:05.623>this <00:25:05.812>sort <00:25:06.001>of <00:25:06.190>stuff.

551
00:25:07.585 --> 00:25:09.455
<00:25:07.585>Those <00:25:07.785>things <00:25:07.985>are <00:25:08.185>when <00:25:08.385>you <00:25:08.585>have <00:25:08.785>a <00:25:08.985>need

552
00:25:09.455 --> 00:25:10.975
<00:25:09.455>to <00:25:09.683>have <00:25:09.910>more <00:25:10.139>than <00:25:10.367>one <00:25:10.594>input <00:25:10.822>field,

553
00:25:10.995 --> 00:25:12.935
<00:25:10.995>but <00:25:11.195>same, <00:25:11.395>it <00:25:11.594>does <00:25:11.794>not <00:25:11.995>contain <00:25:12.195>any <00:25:12.395>logic.

554
00:25:13.565 --> 00:25:15.455
<00:25:13.565>It's <00:25:13.798>a <00:25:14.031>group <00:25:14.265>of <00:25:14.498>atom, <00:25:14.731>which <00:25:14.965>is

555
00:25:15.685 --> 00:25:18.815
<00:25:15.685>therefore, <00:25:15.965>you <00:25:16.245>know, <00:25:16.524>divisible <00:25:16.804>by <00:25:17.085>divisible

556
00:25:19.075 --> 00:25:23.215
<00:25:19.075>and <00:25:19.191>it <00:25:19.308>gives <00:25:19.425>you <00:25:19.541>the <00:25:19.658>ato, <00:25:19.775>but <00:25:19.891>it <00:25:20.008>does <00:25:20.125>not <00:25:20.241>contain <00:25:20.358>any <00:25:20.475>logic.

557
00:25:24.235 --> 00:25:26.775
<00:25:24.235>If <00:25:24.390>it <00:25:24.546>contained <00:25:24.701>logic, <00:25:24.857>it <00:25:25.012>would <00:25:25.168>be <00:25:25.323>in <00:25:25.479>an <00:25:25.635>organism.

558
00:25:27.975 --> 00:25:29.875
<00:25:27.975>So <00:25:28.208>for <00:25:28.441>example, <00:25:28.675>here <00:25:28.908>I'm <00:25:29.141>using <00:25:29.375>Andy,

559
00:25:30.175 --> 00:25:33.395
<00:25:30.175>and <00:25:30.330>with <00:25:30.486>Andy, <00:25:30.641>they <00:25:30.797>have <00:25:30.952>a <00:25:31.108>very <00:25:31.263>neat, <00:25:31.419>um, <00:25:31.575>wrapper,

560
00:25:33.395 --> 00:25:34.675
<00:25:33.395>which <00:25:33.683>is <00:25:33.971>called <00:25:34.259>radio <00:25:34.547>group,

561
00:25:35.295 --> 00:25:40.225
<00:25:35.295>and <00:25:35.435>it <00:25:35.575>does <00:25:35.715>it <00:25:35.855>so <00:25:35.995>automatically <00:25:36.135>all <00:25:36.275>of <00:25:36.415>your, <00:25:36.555>um, <00:25:36.695>all

562
00:25:40.225 --> 00:25:42.145
<00:25:40.225>of <00:25:40.574>your <00:25:40.925>uh, <00:25:41.274>radio, <00:25:41.625>uh,

563
00:25:42.145 --> 00:25:46.385
<00:25:42.145>elements <00:25:42.345>are <00:25:42.545>linked <00:25:42.745>together <00:25:42.945>and <00:25:43.145>it's <00:25:43.345>really <00:25:43.545>nice.

564
00:25:47.045 --> 00:25:49.665
<00:25:47.045>So <00:25:47.245>that's <00:25:47.445>one <00:25:47.645>very <00:25:47.845>obvious <00:25:48.045>example <00:25:48.245>for <00:25:48.445>molecules.

565
00:25:50.045 --> 00:25:51.625
<00:25:50.045>Uh, <00:25:50.200>you <00:25:50.356>know, <00:25:50.511>you <00:25:50.667>can <00:25:50.822>do <00:25:50.978>it <00:25:51.133>to <00:25:51.289>the <00:25:51.445>same

566
00:25:51.625 --> 00:25:54.665
<00:25:51.625>for <00:25:51.765>like <00:25:51.905>checkbox <00:25:52.045>groups <00:25:52.185>or, <00:25:52.325>you <00:25:52.465>know, <00:25:52.605>uh, <00:25:52.745>image <00:25:52.885>list <00:25:53.025>system

567
00:25:54.685 --> 00:25:58.665
<00:25:54.685>as <00:25:54.812>well, <00:25:54.939>which <00:25:55.066>I <00:25:55.194>have, <00:25:55.321>I <00:25:55.448>have <00:25:55.575>seen <00:25:55.703>even <00:25:55.830>more <00:25:55.957>list, <00:25:56.085>um,

568
00:25:59.285 --> 00:26:00.305
<00:25:59.285>uh, <00:25:59.591>in <00:25:59.897>the <00:26:00.203>molecule.

569
00:26:01.485 --> 00:26:03.825
<00:26:01.485>It <00:26:01.640>will <00:26:01.796>depend <00:26:01.951>on <00:26:02.107>the <00:26:02.262>needs <00:26:02.418>of <00:26:02.573>your <00:26:02.729>app <00:26:02.885>again,

570
00:26:04.045 --> 00:26:07.465
<00:26:04.045>but <00:26:04.200>think <00:26:04.356>of <00:26:04.511>molecules <00:26:04.667>as <00:26:04.822>a <00:26:04.978>group <00:26:05.133>of <00:26:05.289>atoms <00:26:05.445>altogether,

571
00:26:07.465 --> 00:26:08.825
<00:26:07.465>which <00:26:07.709>do <00:26:07.954>not <00:26:08.199>contain <00:26:08.444>any <00:26:08.689>logic.

572
00:26:11.085 --> 00:26:14.005
<00:26:11.085>Organism <00:26:11.318>level <00:26:11.551>is <00:26:11.785>again, <00:26:12.018>as <00:26:12.251>I <00:26:12.485>said,

573
00:26:14.065 --> 00:26:15.205
<00:26:14.065>is <00:26:14.270>where <00:26:14.475>you <00:26:14.680>have <00:26:14.885>the <00:26:15.091>logic.

574
00:26:15.205 --> 00:26:18.565
<00:26:15.205>So <00:26:15.332>this <00:26:15.459>is <00:26:15.586>where <00:26:15.714>you <00:26:15.841>decide, <00:26:15.968>you <00:26:16.095>know, <00:26:16.223>which <00:26:16.350>things <00:26:16.477>to <00:26:16.605>show

575
00:26:19.035 --> 00:26:20.365
<00:26:19.035>with <00:26:19.633>certain <00:26:20.232>conditions.

576
00:26:21.305 --> 00:26:23.365
<00:26:21.305>So, <00:26:21.505>you <00:26:21.705>know, <00:26:21.905>in <00:26:22.105>this <00:26:22.305>instance, <00:26:22.505>for <00:26:22.705>example,

577
00:26:23.525 --> 00:26:27.685
<00:26:23.525>I <00:26:23.680>was <00:26:23.836>creating <00:26:23.991>a, <00:26:24.147>a <00:26:24.302>form <00:26:24.458>generator <00:26:24.613>where, <00:26:24.769>you <00:26:24.925>know,

578
00:26:27.685 --> 00:26:32.005
<00:26:27.685>we <00:26:27.860>had <00:26:28.034>a <00:26:28.210>sort <00:26:28.385>of, <00:26:28.560>um, <00:26:28.735>onboarding, <00:26:28.909>um, <00:26:29.085>system

579
00:26:32.495 --> 00:26:34.565
<00:26:32.495>where <00:26:32.650>we <00:26:32.806>could <00:26:32.961>have <00:26:33.117>up <00:26:33.272>to, <00:26:33.428>for <00:26:33.583>example, <00:26:33.739>you <00:26:33.895>know,

580
00:26:34.945 --> 00:26:37.925
<00:26:34.945>10 <00:26:35.145>questions <00:26:35.345>on <00:26:35.544>different <00:26:35.745>pages <00:26:35.945>in <00:26:36.145>a <00:26:36.345>slider.

581
00:26:38.705 --> 00:26:40.565
<00:26:38.705>And <00:26:38.985>I <00:26:39.264>wanted <00:26:39.544>to <00:26:39.824>be <00:26:40.105>able

582
00:26:40.565 --> 00:26:42.685
<00:26:40.565>to <00:26:40.798>change <00:26:41.031>those <00:26:41.265>questions <00:26:41.498>at <00:26:41.731>any <00:26:41.965>time

583
00:26:42.685 --> 00:26:45.125
<00:26:42.685>because <00:26:42.860>we <00:26:43.034>could <00:26:43.210>change <00:26:43.385>what <00:26:43.560>we <00:26:43.735>wanted <00:26:43.909>to <00:26:44.085>ask,

584
00:26:45.275 --> 00:26:47.885
<00:26:45.275>what <00:26:45.430>we <00:26:45.586>wanted <00:26:45.741>to <00:26:45.897>propose, <00:26:46.052>the <00:26:46.208>way <00:26:46.363>that <00:26:46.519>we <00:26:46.675>wanted

585
00:26:47.885 --> 00:26:51.965
<00:26:47.885>to <00:26:48.040>ask <00:26:48.196>them, <00:26:48.351>you <00:26:48.507>know, <00:26:48.662>from <00:26:48.818>dropdowns <00:26:48.973>to <00:26:49.129>preferences <00:26:49.285>to,

586
00:26:52.345 --> 00:26:54.085
<00:26:52.345>you <00:26:52.578>know, <00:26:52.811>anything <00:26:53.045>you <00:26:53.278>might <00:26:53.511>think <00:26:53.745>of.

587
00:26:54.825 --> 00:26:58.005
<00:26:54.825>And <00:26:54.980>therefore <00:26:55.136>I <00:26:55.291>wanted <00:26:55.447>to <00:26:55.602>create <00:26:55.758>a <00:26:55.913>form <00:26:56.069>generator <00:26:56.225>way

588
00:26:58.005 --> 00:27:01.045
<00:26:58.005>of <00:26:58.145>doing <00:26:58.285>that <00:26:58.425>very <00:26:58.565>neatly <00:26:58.705>where <00:26:58.845>for <00:26:58.985>the <00:26:59.125>future <00:26:59.265>and <00:26:59.405>forever,

589
00:27:01.605 --> 00:27:04.565
<00:27:01.605>whenever <00:27:01.732>we <00:27:01.859>want <00:27:01.986>to <00:27:02.114>have <00:27:02.241>like <00:27:02.368>a <00:27:02.495>nice, <00:27:02.623>you <00:27:02.750>know, <00:27:02.877>nice <00:27:03.005>slides

590
00:27:04.915 --> 00:27:06.805
<00:27:04.915>with, <00:27:05.090>you <00:27:05.264>know, <00:27:05.440>a <00:27:05.615>question <00:27:05.790>on <00:27:05.965>each <00:27:06.139>of <00:27:06.315>them,

591
00:27:07.745 --> 00:27:08.925
<00:27:07.745>you <00:27:08.099>can <00:27:08.453>reuse <00:27:08.807>this.

592
00:27:09.585 --> 00:27:12.285
<00:27:09.585>So <00:27:09.818>in <00:27:10.051>my <00:27:10.285>organism <00:27:10.518>I'm <00:27:10.751>like, <00:27:10.985>okay,

593
00:27:12.475 --> 00:27:16.085
<00:27:12.475>well <00:27:12.602>if <00:27:12.729>from <00:27:12.856>the <00:27:12.984>page <00:27:13.111>level <00:27:13.238>I'm <00:27:13.365>asked, <00:27:13.493>you <00:27:13.620>know, <00:27:13.747>to <00:27:13.875>show,

594
00:27:16.425 --> 00:27:19.805
<00:27:16.425>um, <00:27:16.552>a <00:27:16.679>form <00:27:16.806>which <00:27:16.934>is, <00:27:17.061>you <00:27:17.188>know, <00:27:17.315>a <00:27:17.443>theme <00:27:17.570>checkbox, <00:27:17.697>I'm <00:27:17.825>going

595
00:27:19.965 --> 00:27:21.605
<00:27:19.965>to <00:27:20.314>show <00:27:20.665>a <00:27:21.014>checkbox <00:27:21.365>form.

596
00:27:22.225 --> 00:27:24.725
<00:27:22.225>If <00:27:22.352>I'm <00:27:22.479>going <00:27:22.606>to <00:27:22.734>show, <00:27:22.861>you <00:27:22.988>know, <00:27:23.115>if <00:27:23.243>I'm <00:27:23.370>going <00:27:23.497>to <00:27:23.625>want

597
00:27:24.745 --> 00:27:27.765
<00:27:24.745>to <00:27:24.885>have <00:27:25.024>a, <00:27:25.165>a <00:27:25.304>form <00:27:25.445>which <00:27:25.584>contains <00:27:25.725>radio, <00:27:25.864>I <00:27:26.004>just <00:27:26.145>have

598
00:27:27.765 --> 00:27:32.205
<00:27:27.765>to <00:27:27.905>pass <00:27:28.045>on <00:27:28.185>the <00:27:28.325>page <00:27:28.465>level, <00:27:28.605>uh, <00:27:28.745>you <00:27:28.885>know, <00:27:29.025>um, <00:27:29.165>uh,

599
00:27:33.285 --> 00:27:34.605
<00:27:33.285>whatever <00:27:33.433>the, <00:27:33.582>the <00:27:33.730>name <00:27:33.879>of <00:27:34.027>the <00:27:34.176>file <00:27:34.324>is <00:27:34.473>in

600
00:27:34.965 --> 00:27:37.025
<00:27:34.965>organisms <00:27:35.245>I'm <00:27:35.524>going <00:27:35.804>to <00:27:36.084>call <00:27:36.365>it.

601
00:27:37.085 --> 00:27:40.625
<00:27:37.085>And <00:27:37.212>then <00:27:37.339>I'm <00:27:37.466>going <00:27:37.594>to <00:27:37.721>pass <00:27:37.848>the <00:27:37.975>theme <00:27:38.103>radio <00:27:38.230>with <00:27:38.357>the <00:27:38.485>array

602
00:27:40.625 --> 00:27:42.585
<00:27:40.625>of <00:27:40.975>items <00:27:41.325>and <00:27:41.675>that's <00:27:42.025>it.

603
00:27:42.925 --> 00:27:44.105
<00:27:42.925>And <00:27:43.137>it <00:27:43.349>does <00:27:43.562>for <00:27:43.774>me <00:27:43.987>everything.

604
00:27:45.695 --> 00:27:47.755
<00:27:45.695>And <00:27:45.895>then <00:27:46.095>select <00:27:46.294>search <00:27:46.495>bar <00:27:46.695>as <00:27:46.895>the <00:27:47.095>default.

605
00:27:48.355 --> 00:27:50.595
<00:27:48.355>I <00:27:48.530>could <00:27:48.705>also <00:27:48.880>have <00:27:49.055>used <00:27:49.230>the <00:27:49.405>switch <00:27:49.580>case, <00:27:49.755>um,

606
00:27:50.915 --> 00:27:53.115
<00:27:50.915>function <00:27:51.115>like <00:27:51.315>I <00:27:51.514>did <00:27:51.715>for <00:27:51.915>the <00:27:52.115>button <00:27:52.315>atom.

607
00:27:53.335 --> 00:27:55.075
<00:27:53.335>The <00:27:53.510>difference <00:27:53.685>was <00:27:53.860>that <00:27:54.035>there <00:27:54.210>were <00:27:54.385>only <00:27:54.560>three <00:27:54.735>choices,

608
00:27:55.255 --> 00:27:57.595
<00:27:55.255>so <00:27:55.395>I <00:27:55.535>thought <00:27:55.675>it <00:27:55.815>was <00:27:55.955>a <00:27:56.095>bit <00:27:56.235>of <00:27:56.375>an <00:27:56.515>overkill, <00:27:56.655>whereas

609
00:27:57.855 --> 00:27:59.675
<00:27:57.855>for <00:27:58.055>the <00:27:58.255>button <00:27:58.455>file <00:27:58.655>there <00:27:58.855>was, <00:27:59.055>you <00:27:59.255>know,

610
00:27:59.695 --> 00:28:02.835
<00:27:59.695>or <00:27:59.850>for <00:28:00.006>the <00:28:00.161>icon <00:28:00.317>file, <00:28:00.472>there <00:28:00.628>was <00:28:00.783>way <00:28:00.939>more <00:28:01.095>choices.

611
00:28:05.585 --> 00:28:07.755
<00:28:05.585>Cool <00:28:05.865>template, <00:28:06.145>that <00:28:06.425>is <00:28:06.705>an <00:28:06.985>example.

612
00:28:08.215 --> 00:28:12.555
<00:28:08.215>Um, <00:28:08.355>templates <00:28:08.495>can <00:28:08.635>be <00:28:08.774>either, <00:28:08.915>again, <00:28:09.054>as <00:28:09.195>I <00:28:09.334>said, <00:28:09.475>a <00:28:09.615>layout

613
00:28:13.455 --> 00:28:15.195
<00:28:13.455>or <00:28:13.735>a <00:28:14.014>sort <00:28:14.294>of <00:28:14.574>page <00:28:14.855>wrapper

614
00:28:15.195 --> 00:28:17.395
<00:28:15.195>with <00:28:15.370>a <00:28:15.544>specific <00:28:15.720>padding <00:28:15.895>that <00:28:16.070>you'd <00:28:16.245>like <00:28:16.419>to <00:28:16.595>apply.

615
00:28:18.595 --> 00:28:20.535
<00:28:18.595>In <00:28:18.770>that <00:28:18.945>case, <00:28:19.120>what <00:28:19.295>could <00:28:19.470>also <00:28:19.645>be <00:28:19.820>a <00:28:19.995>template

616
00:28:20.595 --> 00:28:23.295
<00:28:20.595>and <00:28:20.750>that <00:28:20.906>was <00:28:21.061>the <00:28:21.217>case <00:28:21.372>for <00:28:21.528>us, <00:28:21.683>were <00:28:21.839>two <00:28:21.995>things.

617
00:28:23.555 --> 00:28:27.285
<00:28:23.555>One, <00:28:23.730>for <00:28:23.905>example, <00:28:24.080>scroll <00:28:24.255>to <00:28:24.430>top <00:28:24.605>was <00:28:24.780>a <00:28:24.955>template

618
00:28:27.355 --> 00:28:31.005
<00:28:27.355>because <00:28:27.588>I'm <00:28:27.821>basically <00:28:28.055>wrapping <00:28:28.288>sometimes <00:28:28.521>like <00:28:28.755>this

619
00:28:31.005 --> 00:28:32.205
<00:28:31.005>around <00:28:31.275>my <00:28:31.545>page <00:28:31.815>so <00:28:32.085>that

620
00:28:32.645 --> 00:28:36.085
<00:28:32.645>whenever <00:28:32.845>someone <00:28:33.045>goes, <00:28:33.245>you <00:28:33.445>know, <00:28:33.645>changes <00:28:33.845>the <00:28:34.045>page,

621
00:28:36.705 --> 00:28:38.725
<00:28:36.705>it <00:28:36.860>doesn't <00:28:37.016>come <00:28:37.171>back <00:28:37.327>to <00:28:37.482>the <00:28:37.638>level <00:28:37.793>where <00:28:37.949>they <00:28:38.105>were.

622
00:28:38.725 --> 00:28:42.405
<00:28:38.725>They <00:28:38.880>always <00:28:39.036>crawls <00:28:39.191>to <00:28:39.347>the <00:28:39.502>top <00:28:39.658>very <00:28:39.813>nice <00:28:39.969>and <00:28:40.125>mobile

623
00:28:43.265 --> 00:28:44.525
<00:28:43.265>and <00:28:43.548>it <00:28:43.832>scrolls <00:28:44.115>as <00:28:44.399>well.

624
00:28:44.525 --> 00:28:48.285
<00:28:44.525>Nicely, <00:28:44.700>you <00:28:44.875>know, <00:28:45.050>you <00:28:45.225>scroll <00:28:45.400>like, <00:28:45.575>um, <00:28:45.750>like, <00:28:45.925>um,

625
00:28:48.565 --> 00:28:49.765
<00:28:48.565>a <00:28:48.781>nice <00:28:48.997>failing <00:28:49.213>effect <00:28:49.429>as <00:28:49.645>well.

626
00:28:49.965 --> 00:28:51.085
<00:28:49.965>'cause <00:28:50.166>I'm <00:28:50.368>adding <00:28:50.569>afterwards <00:28:50.771>a <00:28:50.973>wrapper,

627
00:28:51.085 --> 00:28:52.285
<00:28:51.085>which <00:28:51.301>is <00:28:51.517>with <00:28:51.733>a <00:28:51.949>motion <00:28:52.165>depth.

628
00:28:53.725 --> 00:28:56.505
<00:28:53.725>And <00:28:53.925>then, <00:28:54.125>uh, <00:28:54.324>you <00:28:54.524>can <00:28:54.725>have <00:28:54.925>also <00:28:55.125>your,

629
00:28:57.045 --> 00:28:58.305
<00:28:57.045>uh, <00:28:57.423>device <00:28:57.801>break <00:28:58.179>points.

630
00:28:59.315 --> 00:29:02.265
<00:28:59.315>Again, <00:28:59.490>if <00:28:59.665>you <00:28:59.840>use <00:29:00.015>dial <00:29:00.190>components, <00:29:00.365>um, <00:29:00.540>this <00:29:00.715>is

631
00:29:02.945 --> 00:29:06.985
<00:29:02.945>absolutely <00:29:03.100>amazing <00:29:03.256>because <00:29:03.411>then <00:29:03.567>you <00:29:03.722>can <00:29:03.878>have <00:29:04.033>the <00:29:04.189>same <00:29:04.345>exact

632
00:29:07.585 --> 00:29:10.225
<00:29:07.585>constant, <00:29:07.818>um, <00:29:08.051>break <00:29:08.285>points <00:29:08.518>across <00:29:08.751>your <00:29:08.985>app.

633
00:29:11.285 --> 00:29:14.585
<00:29:11.285>And <00:29:11.485>because <00:29:11.685>you're <00:29:11.885>exporting <00:29:12.085>those, <00:29:12.285>um, <00:29:12.485>as <00:29:12.685>constants

634
00:29:15.575 --> 00:29:16.875
<00:29:15.575>and <00:29:15.809>then <00:29:16.043>you <00:29:16.277>can <00:29:16.511>reuse <00:29:16.745>them.

635
00:29:17.065 --> 00:29:18.915
<00:29:17.065>Like, <00:29:17.265>for <00:29:17.465>example, <00:29:17.665>you <00:29:17.865>can <00:29:18.065>say <00:29:18.265>at <00:29:18.465>media,

636
00:29:19.255 --> 00:29:22.635
<00:29:19.255>and <00:29:19.430>then <00:29:19.605>you <00:29:19.780>insert <00:29:19.955>the, <00:29:20.130>the <00:29:20.305>constant <00:29:20.480>device <00:29:20.655>desktop

637
00:29:23.055 --> 00:29:26.635
<00:29:23.055>or <00:29:23.230>at <00:29:23.405>media <00:29:23.580>device <00:29:23.755>mobile <00:29:23.930>instead <00:29:24.105>of <00:29:24.280>your <00:29:24.455>inside

638
00:29:26.635 --> 00:29:27.995
<00:29:26.635>of <00:29:26.941>your, <00:29:27.246>uh, <00:29:27.553>style <00:29:27.859>components.

639
00:29:28.615 --> 00:29:31.235
<00:29:28.615>And <00:29:28.731>all <00:29:28.848>of <00:29:28.965>your <00:29:29.081>engineers <00:29:29.198>will <00:29:29.315>be <00:29:29.431>on <00:29:29.548>the <00:29:29.665>same <00:29:29.781>page <00:29:29.898>as <00:29:30.015>to

640
00:29:31.235 --> 00:29:34.195
<00:29:31.235>what <00:29:31.409>constitutes, <00:29:31.584>you <00:29:31.760>know, <00:29:31.935>a <00:29:32.110>breakpoint <00:29:32.284>for <00:29:32.459>mobile <00:29:32.635>desktop

641
00:29:34.495 --> 00:29:38.085
<00:29:34.495>and <00:29:34.695>um, <00:29:34.895>and <00:29:35.094>iPad <00:29:35.294>in <00:29:35.495>a <00:29:35.695>nice <00:29:35.895>way.

642
00:29:38.085 --> 00:29:39.605
<00:29:38.085>There's <00:29:38.358>way <00:29:38.632>more <00:29:38.905>code <00:29:39.179>since <00:29:39.453>then.

643
00:29:39.665 --> 00:29:42.565
<00:29:39.665>But <00:29:39.792>you <00:29:39.919>have, <00:29:40.046>like, <00:29:40.174>you <00:29:40.301>know, <00:29:40.428>we <00:29:40.555>have <00:29:40.683>now <00:29:40.810>like <00:29:40.937>ultra <00:29:41.065>wide,

644
00:29:43.265 --> 00:29:46.935
<00:29:43.265>we <00:29:43.465>have <00:29:43.665>iPad, <00:29:43.865>we <00:29:44.065>have <00:29:44.265>iPad <00:29:44.465>Pro, <00:29:44.665>uh,

645
00:29:46.935 --> 00:29:48.295
<00:29:46.935>we <00:29:47.139>have <00:29:47.343>two <00:29:47.547>different <00:29:47.751>kind <00:29:47.955>of <00:29:48.159>iPads

646
00:29:48.455 --> 00:29:50.055
<00:29:48.455>'cause <00:29:48.629>we <00:29:48.804>have <00:29:48.980>an <00:29:49.155>iPad, <00:29:49.330>which <00:29:49.504>is <00:29:49.679>very <00:29:49.855>large,

647
00:29:50.075 --> 00:29:52.015
<00:29:50.075>almost <00:29:50.275>like <00:29:50.475>a <00:29:50.675>computer, <00:29:50.875>but <00:29:51.075>it's <00:29:51.275>a <00:29:51.475>tablet.

648
00:29:52.155 --> 00:29:53.615
<00:29:52.155>So <00:29:52.301>you <00:29:52.447>want <00:29:52.593>to <00:29:52.739>make <00:29:52.885>sure <00:29:53.031>that <00:29:53.177>it's, <00:29:53.323>you <00:29:53.469>know,

649
00:29:53.675 --> 00:29:54.695
<00:29:53.675>the <00:29:53.981>UI <00:29:54.287>is <00:29:54.592>optimum

650
00:29:54.715 --> 00:29:56.455
<00:29:54.715>for <00:29:54.915>something <00:29:55.115>which <00:29:55.314>is <00:29:55.514>going <00:29:55.715>to <00:29:55.915>be <00:29:56.115>touched.

651
00:29:56.875 --> 00:29:59.255
<00:29:56.875>And <00:29:57.030>then <00:29:57.186>you <00:29:57.341>have <00:29:57.497>another <00:29:57.652>iPad, <00:29:57.808>which <00:29:57.963>is <00:29:58.119>very <00:29:58.275>small,

652
00:29:59.395 --> 00:30:00.775
<00:29:59.395>big <00:29:59.705>like <00:30:00.016>mobile, <00:30:00.326>where <00:30:00.637>again,

653
00:30:00.995 --> 00:30:02.375
<00:30:00.995>it <00:30:01.202>could <00:30:01.408>look <00:30:01.616>even <00:30:01.822>better <00:30:02.030>if <00:30:02.237>you

654
00:30:02.395 --> 00:30:03.415
<00:30:02.395>put <00:30:02.624>things <00:30:02.854>a <00:30:03.083>bit <00:30:03.312>differently.

655
00:30:04.295 --> 00:30:06.315
<00:30:04.295>So, <00:30:04.528>you <00:30:04.761>know, <00:30:04.995>and <00:30:05.228>everything <00:30:05.461>is <00:30:05.695>manageable

656
00:30:06.315 --> 00:30:07.515
<00:30:06.315>from <00:30:06.531>there, <00:30:06.747>which <00:30:06.963>is <00:30:07.179>quite <00:30:07.395>amazing.

657
00:30:09.255 --> 00:30:12.115
<00:30:09.255>So <00:30:09.395>now, <00:30:09.535>you <00:30:09.675>know, <00:30:09.815>I <00:30:09.955>haven't <00:30:10.095>touched <00:30:10.235>yet <00:30:10.375>on <00:30:10.515>TypeScript <00:30:10.655>and

658
00:30:12.115 --> 00:30:14.235
<00:30:12.115>because <00:30:12.315>the <00:30:12.515>reasons <00:30:12.715>why <00:30:12.915>TypeScript <00:30:13.115>is <00:30:13.315>so <00:30:13.515>amazing

659
00:30:14.235 --> 00:30:17.795
<00:30:14.235>for <00:30:14.409>it <00:30:14.584>are <00:30:14.760>actually <00:30:14.935>quite <00:30:15.110>obvious <00:30:15.284>when <00:30:15.459>I'm <00:30:15.635>going

660
00:30:17.795 --> 00:30:19.275
<00:30:17.795>to <00:30:18.017>show <00:30:18.239>you <00:30:18.461>the, <00:30:18.683>those <00:30:18.905>few <00:30:19.127>slides.

661
00:30:19.655 --> 00:30:22.475
<00:30:19.655>And <00:30:19.810>also <00:30:19.966>because <00:30:20.121>TypeScript <00:30:20.277>is <00:30:20.432>a <00:30:20.588>whole <00:30:20.743>new <00:30:20.899>other <00:30:21.055>topic.

662
00:30:22.975 --> 00:30:25.595
<00:30:22.975>So <00:30:23.175>I'm <00:30:23.375>really, <00:30:23.574>you <00:30:23.774>know, <00:30:23.975>raising <00:30:24.175>TypeScript <00:30:24.375>here

663
00:30:25.615 --> 00:30:27.835
<00:30:25.615>to <00:30:25.770>give <00:30:25.926>you <00:30:26.081>a <00:30:26.237>few <00:30:26.392>examples <00:30:26.548>of <00:30:26.703>why <00:30:26.859>it's <00:30:27.015>amazing

664
00:30:28.175 --> 00:30:29.955
<00:30:28.175>and <00:30:28.375>why <00:30:28.575>it's <00:30:28.774>a <00:30:28.975>must <00:30:29.175>in <00:30:29.375>my <00:30:29.575>opinion.

665
00:30:30.375 --> 00:30:31.555
<00:30:30.375>And <00:30:30.587>then <00:30:30.799>you <00:30:31.012>can <00:30:31.224>go <00:30:31.437>away

666
00:30:31.655 --> 00:30:32.915
<00:30:31.655>and, <00:30:31.938>you <00:30:32.222>know, <00:30:32.505>learn <00:30:32.789>TypeScript

667
00:30:32.915 --> 00:30:34.035
<00:30:32.915>on <00:30:33.083>your <00:30:33.251>own <00:30:33.419>if <00:30:33.587>you <00:30:33.755>haven't <00:30:33.923>yet.

668
00:30:35.255 --> 00:30:37.915
<00:30:35.255>So <00:30:35.721>while <00:30:36.188>design <00:30:36.655>ensures

669
00:30:37.915 --> 00:30:41.635
<00:30:37.915>that <00:30:38.055>developers <00:30:38.195>are <00:30:38.335>all <00:30:38.475>on <00:30:38.615>the <00:30:38.754>same <00:30:38.895>page <00:30:39.034>to <00:30:39.175>atomic <00:30:39.315>levels,

670
00:30:42.525 --> 00:30:45.955
<00:30:42.525>TypeScript <00:30:42.680>ensures <00:30:42.836>that <00:30:42.991>developers <00:30:43.147>are <00:30:43.302>all <00:30:43.458>on <00:30:43.613>the <00:30:43.769>same <00:30:43.925>page

671
00:30:46.015 --> 00:30:47.355
<00:30:46.015>to <00:30:46.316>an <00:30:46.618>even <00:30:46.919>deeper <00:30:47.221>level.

672
00:30:47.685 --> 00:30:50.515
<00:30:47.685>Everything <00:30:47.918>needs <00:30:48.151>to <00:30:48.385>be <00:30:48.618>defined <00:30:48.851>and <00:30:49.085>expected.

673
00:30:51.295 --> 00:30:52.875
<00:30:51.295>So <00:30:51.575>basically <00:30:51.855>you <00:30:52.135>are <00:30:52.415>making <00:30:52.695>sure

674
00:30:52.875 --> 00:30:54.955
<00:30:52.875>that <00:30:53.075>everyone <00:30:53.275>is <00:30:53.475>indeed <00:30:53.675>on <00:30:53.875>the <00:30:54.075>same <00:30:54.275>page

675
00:30:54.955 --> 00:30:57.115
<00:30:54.955>with <00:30:55.129>automated <00:30:55.304>design <00:30:55.480>and <00:30:55.655>they <00:30:55.830>can't <00:30:56.004>pass, <00:30:56.179>for <00:30:56.355>example,

676
00:30:57.235 --> 00:30:58.755
<00:30:57.235>a <00:30:57.430>theme <00:30:57.625>to <00:30:57.821>a <00:30:58.016>button <00:30:58.212>which <00:30:58.407>doesn't <00:30:58.603>exist.

677
00:31:00.185 --> 00:31:03.155
<00:31:00.185>They <00:31:00.312>can't, <00:31:00.439>you <00:31:00.566>know, <00:31:00.694>they <00:31:00.821>can't <00:31:00.948>make, <00:31:01.075>if <00:31:01.203>they <00:31:01.330>make <00:31:01.457>a <00:31:01.585>error

678
00:31:03.295 --> 00:31:05.995
<00:31:03.295>as <00:31:03.470>to <00:31:03.645>what <00:31:03.820>is <00:31:03.995>expected <00:31:04.170>in <00:31:04.345>your <00:31:04.520>structure, <00:31:04.695>um,

679
00:31:05.995 --> 00:31:07.195
<00:31:05.995>they <00:31:06.210>can't <00:31:06.427>even <00:31:06.643>run <00:31:06.859>the <00:31:07.074>code.

680
00:31:07.615 --> 00:31:09.035
<00:31:07.615>It <00:31:07.870>let <00:31:08.126>it <00:31:08.381>let <00:31:08.637>them <00:31:08.893>know.

681
00:31:09.495 --> 00:31:11.475
<00:31:09.495>So <00:31:09.695>you <00:31:09.895>can <00:31:10.094>avoid <00:31:10.294>so <00:31:10.495>many <00:31:10.695>stupid <00:31:10.895>bugs

682
00:31:11.475 --> 00:31:14.795
<00:31:11.475>and <00:31:11.630>stupid <00:31:11.786>mistakes, <00:31:11.941>you <00:31:12.097>know, <00:31:12.252>um, <00:31:12.408>it <00:31:12.563>saved <00:31:12.719>my <00:31:12.875>life,

683
00:31:14.795 --> 00:31:17.515
<00:31:14.795>certainly <00:31:14.935>at <00:31:15.075>4:00 <00:31:15.215>AM <00:31:15.355>when <00:31:15.495>I <00:31:15.635>was <00:31:15.775>like <00:31:15.915>cutting <00:31:16.055>away <00:31:16.195>like

684
00:31:17.615 --> 00:31:20.675
<00:31:17.615>so <00:31:17.755>much <00:31:17.895>because <00:31:18.035>I <00:31:18.175>just <00:31:18.315>realized <00:31:18.455>I <00:31:18.595>was <00:31:18.735>making, <00:31:18.875>you <00:31:19.015>know,

685
00:31:20.675 --> 00:31:23.895
<00:31:20.675>a <00:31:20.815>stupid <00:31:20.955>typo <00:31:21.095>and <00:31:21.235>I <00:31:21.375>could <00:31:21.514>have <00:31:21.655>looked <00:31:21.794>for <00:31:21.935>this <00:31:22.075>typo

686
00:31:24.035 --> 00:31:26.255
<00:31:24.035>for <00:31:24.190>a <00:31:24.346>long <00:31:24.501>time <00:31:24.657>and <00:31:24.812>it <00:31:24.968>told <00:31:25.123>me <00:31:25.279>straight <00:31:25.435>away

687
00:31:26.255 --> 00:31:27.295
<00:31:26.255>when <00:31:26.489>there <00:31:26.723>was <00:31:26.957>a <00:31:27.191>typo.

688
00:31:28.905 --> 00:31:31.565
<00:31:28.905>Um, <00:31:29.060>and <00:31:29.216>you <00:31:29.371>know, <00:31:29.527>you <00:31:29.682>can <00:31:29.838>define <00:31:29.993>what <00:31:30.149>comes <00:31:30.305>in

689
00:31:31.565 --> 00:31:33.325
<00:31:31.565>and <00:31:31.765>out <00:31:31.965>of <00:31:32.165>your <00:31:32.365>components <00:31:32.565>and <00:31:32.765>be <00:31:32.965>strict.

690
00:31:33.905 --> 00:31:35.845
<00:31:33.905>So <00:31:34.185>you're <00:31:34.465>making <00:31:34.745>your <00:31:35.024>atoms, <00:31:35.305>molecules

691
00:31:35.845 --> 00:31:37.805
<00:31:35.845>and <00:31:36.195>organisms <00:31:36.545>even <00:31:36.895>more <00:31:37.245>robust.

692
00:31:38.885 --> 00:31:41.415
<00:31:38.885>Just <00:31:39.040>a <00:31:39.196>quick <00:31:39.351>parentis <00:31:39.507>in <00:31:39.662>case <00:31:39.818>people <00:31:39.973>don't <00:31:40.129>know <00:31:40.285>the

693
00:31:41.415 --> 00:31:42.455
<00:31:41.415>difference <00:31:41.883>between <00:31:42.351>TypeScript

694
00:31:42.455 --> 00:31:43.935
<00:31:42.455>and <00:31:42.677>JavaScript <00:31:42.899>in <00:31:43.120>the <00:31:43.342>very <00:31:43.565>high <00:31:43.787>level

695
00:31:44.345 --> 00:31:46.015
<00:31:44.345>JavaScript <00:31:44.811>is <00:31:45.278>dynamic <00:31:45.745>typing.

696
00:31:47.195 --> 00:31:49.695
<00:31:47.195>So, <00:31:47.350>for <00:31:47.506>example, <00:31:47.661>programs <00:31:47.817>written <00:31:47.972>in <00:31:48.128>JavaScript <00:31:48.283>do <00:31:48.439>not <00:31:48.595>know

697
00:31:49.715 --> 00:31:51.975
<00:31:49.715>the <00:31:49.915>data <00:31:50.115>type <00:31:50.314>of <00:31:50.514>a <00:31:50.715>variable <00:31:50.915>until <00:31:51.115>that

698
00:31:52.495 --> 00:31:54.655
<00:31:52.495>variable <00:31:52.669>is <00:31:52.844>assigned <00:31:53.020>at <00:31:53.195>a <00:31:53.370>value <00:31:53.544>at <00:31:53.719>one <00:31:53.895>time.

699
00:31:55.475 --> 00:31:59.615
<00:31:55.475>So, <00:31:55.582>you <00:31:55.690>know, <00:31:55.798>if, <00:31:55.905>um, <00:31:56.013>if <00:31:56.121>I <00:31:56.228>have <00:31:56.336>to <00:31:56.444>pass <00:31:56.551>a <00:31:56.659>props, <00:31:56.767>which <00:31:56.875>is

700
00:31:59.615 --> 00:32:03.055
<00:31:59.615>of <00:31:59.731>a <00:31:59.848>type <00:31:59.965>string, <00:32:00.081>and <00:32:00.198>I <00:32:00.315>pass <00:32:00.431>a <00:32:00.548>props <00:32:00.665>by <00:32:00.781>mistake, <00:32:00.898>which <00:32:01.015>is

701
00:32:03.055 --> 00:32:05.655
<00:32:03.055>of <00:32:03.288>a <00:32:03.521>type <00:32:03.755>null, <00:32:03.988>and <00:32:04.221>you <00:32:04.455>know,

702
00:32:05.835 --> 00:32:08.415
<00:32:05.835>and <00:32:05.951>I <00:32:06.068>haven't <00:32:06.185>done <00:32:06.301>all <00:32:06.418>the <00:32:06.535>fact <00:32:06.651>that <00:32:06.768>if <00:32:06.885>the <00:32:07.001>props <00:32:07.118>is <00:32:07.235>null,

703
00:32:08.415 --> 00:32:10.815
<00:32:08.415>then <00:32:08.590>you <00:32:08.764>know, <00:32:08.940>it <00:32:09.115>should <00:32:09.290>do <00:32:09.465>something <00:32:09.639>that, <00:32:09.815>uh,

704
00:32:10.815 --> 00:32:14.855
<00:32:10.815>show <00:32:10.955>an <00:32:11.095>empty <00:32:11.235>string, <00:32:11.375>uh, <00:32:11.515>that's <00:32:11.655>going <00:32:11.795>to <00:32:11.935>be <00:32:12.075>a <00:32:12.215>problem.

705
00:32:15.235 --> 00:32:17.895
<00:32:15.235>Uh, <00:32:15.390>but, <00:32:15.546>uh, <00:32:15.701>j <00:32:15.857>like <00:32:16.012>JavaScript <00:32:16.168>won't <00:32:16.323>let <00:32:16.479>you <00:32:16.635>know

706
00:32:17.895 --> 00:32:20.575
<00:32:17.895>because <00:32:18.095>they <00:32:18.295>only <00:32:18.495>realize <00:32:18.695>the <00:32:18.895>problem <00:32:19.095>at <00:32:19.295>run

707
00:32:20.575 --> 00:32:22.655
<00:32:20.575>time <00:32:21.041>with <00:32:21.508>tap <00:32:21.975>script.

708
00:32:22.655 --> 00:32:25.335
<00:32:22.655>However, <00:32:22.810>in <00:32:22.966>static <00:32:23.121>typing, <00:32:23.277>what <00:32:23.432>it <00:32:23.588>does <00:32:23.743>is <00:32:23.899>that, <00:32:24.055>uh,

709
00:32:25.395 --> 00:32:27.335
<00:32:25.395>it <00:32:25.570>throws <00:32:25.745>an <00:32:25.920>error <00:32:26.095>as <00:32:26.270>soon <00:32:26.445>as <00:32:26.620>it <00:32:26.795>tries

710
00:32:27.335 --> 00:32:28.895
<00:32:27.335>to <00:32:27.685>compile <00:32:28.035>it, <00:32:28.385>the <00:32:28.735>code.

711
00:32:29.595 --> 00:32:31.295
<00:32:29.595>Um, <00:32:29.945>and <00:32:30.295>therefore, <00:32:30.645>you <00:32:30.995>know,

712
00:32:31.435 --> 00:32:33.215
<00:32:31.435>you <00:32:31.610>will <00:32:31.784>see <00:32:31.960>it <00:32:32.135>in <00:32:32.310>your <00:32:32.485>terminal <00:32:32.659>straight <00:32:32.835>away.

713
00:32:33.235 --> 00:32:35.815
<00:32:33.235>Hey, <00:32:33.390>by <00:32:33.546>the <00:32:33.701>way, <00:32:33.857>your, <00:32:34.012>your <00:32:34.168>props <00:32:34.323>is <00:32:34.479>not <00:32:34.635>correct,

714
00:32:35.915 --> 00:32:37.015
<00:32:35.915>but <00:32:36.113>not <00:32:36.311>even <00:32:36.509>in <00:32:36.707>your <00:32:36.905>terminal.

715
00:32:37.245 --> 00:32:38.855
<00:32:37.245>They <00:32:37.524>have <00:32:37.804>a <00:32:38.084>really <00:32:38.364>nice <00:32:38.645>intelligence,

716
00:32:39.335 --> 00:32:42.325
<00:32:39.335>which <00:32:39.490>actually <00:32:39.646>tells <00:32:39.801>you <00:32:39.957>straight <00:32:40.112>away <00:32:40.268>while <00:32:40.423>you <00:32:40.579>are <00:32:40.735>typing

717
00:32:42.515 --> 00:32:45.405
<00:32:42.515>whether <00:32:42.690>what <00:32:42.865>you <00:32:43.040>are <00:32:43.215>doing <00:32:43.390>makes <00:32:43.565>sense <00:32:43.740>or <00:32:43.915>not.

718
00:32:47.965 --> 00:32:50.995
<00:32:47.965>Again, <00:32:48.105>um, <00:32:48.245>quick <00:32:48.385>example <00:32:48.524>of <00:32:48.665>how <00:32:48.804>we <00:32:48.945>can <00:32:49.084>change <00:32:49.225>the <00:32:49.365>day.

719
00:32:51.215 --> 00:32:54.035
<00:32:51.215>So, <00:32:51.495>um, <00:32:51.774>save <00:32:52.054>the <00:32:52.334>day, <00:32:52.615>sorry,

720
00:32:54.095 --> 00:32:55.875
<00:32:54.095>not <00:32:54.295>change <00:32:54.495>the <00:32:54.695>day <00:32:54.895>can <00:32:55.095>save <00:32:55.295>the <00:32:55.495>day.

721
00:32:56.785 --> 00:32:59.365
<00:32:56.785>You <00:32:57.065>have <00:32:57.345>your <00:32:57.625>type <00:32:57.905>declared, <00:32:58.185>uh,

722
00:32:59.365 --> 00:33:00.805
<00:32:59.365>for <00:32:59.624>example <00:32:59.883>in <00:33:00.142>your <00:33:00.401>atom <00:33:00.661>file.

723
00:33:01.225 --> 00:33:03.485
<00:33:01.225>So <00:33:01.425>let's <00:33:01.625>go <00:33:01.824>to, <00:33:02.024>you <00:33:02.225>know, <00:33:02.425>input <00:33:02.625>field.

724
00:33:03.545 --> 00:33:06.045
<00:33:03.545>Do <00:33:03.720>you <00:33:03.895>remember <00:33:04.070>there <00:33:04.245>was <00:33:04.420>the <00:33:04.595>input <00:33:04.770>field <00:33:04.945>atom

725
00:33:06.305 --> 00:33:08.605
<00:33:06.305>and <00:33:06.480>there <00:33:06.655>was <00:33:06.830>the, <00:33:07.005>uh, <00:33:07.180>button <00:33:07.355>atom <00:33:07.530>as <00:33:07.705>well?

726
00:33:08.915 --> 00:33:11.605
<00:33:08.915>Well, <00:33:09.070>those <00:33:09.226>are <00:33:09.381>the <00:33:09.537>types <00:33:09.692>that <00:33:09.848>you <00:33:10.003>would <00:33:10.159>declare <00:33:10.315>either

727
00:33:12.205 --> 00:33:16.605
<00:33:12.205>externally <00:33:12.332>to <00:33:12.459>the <00:33:12.586>files <00:33:12.714>in, <00:33:12.841>uh, <00:33:12.968>types <00:33:13.095>that <00:33:13.223>did <00:33:13.350>the <00:33:13.477>Ts, <00:33:13.605>uh,

728
00:33:16.685 --> 00:33:19.965
<00:33:16.685>which <00:33:16.840>is <00:33:16.996>the, <00:33:17.151>you <00:33:17.307>know, <00:33:17.462>the <00:33:17.618>jargon <00:33:17.773>to <00:33:17.929>say <00:33:18.085>basically

729
00:33:19.965 --> 00:33:22.565
<00:33:19.965>that <00:33:20.165>this <00:33:20.365>type <00:33:20.564>is <00:33:20.764>made <00:33:20.965>for <00:33:21.165>type <00:33:21.365>definitions

730
00:33:23.065 --> 00:33:25.365
<00:33:23.065>or <00:33:23.220>you <00:33:23.376>can <00:33:23.531>put <00:33:23.687>it <00:33:23.842>at <00:33:23.998>the <00:33:24.153>top <00:33:24.309>of <00:33:24.465>your,

731
00:33:25.705 --> 00:33:27.205
<00:33:25.705>of <00:33:26.042>your <00:33:26.379>item <00:33:26.717>file <00:33:27.054>directly.

732
00:33:28.545 --> 00:33:31.645
<00:33:28.545>Um, <00:33:28.672>and <00:33:28.799>what <00:33:28.926>you <00:33:29.054>do <00:33:29.181>is <00:33:29.308>you <00:33:29.435>define <00:33:29.563>clearly <00:33:29.690>which <00:33:29.817>props <00:33:29.945>you

733
00:33:31.645 --> 00:33:34.045
<00:33:31.645>are <00:33:31.845>expecting, <00:33:32.045>or <00:33:32.245>at <00:33:32.445>least <00:33:32.645>which <00:33:32.845>props <00:33:33.045>you,

734
00:33:34.945 --> 00:33:36.285
<00:33:34.945>you <00:33:35.347>count <00:33:35.749>as <00:33:36.151>optional.

735
00:33:36.965 --> 00:33:39.605
<00:33:36.965>'cause <00:33:37.105>then <00:33:37.245>when <00:33:37.385>your <00:33:37.524>code, <00:33:37.665>you, <00:33:37.804>you <00:33:37.945>can <00:33:38.084>see <00:33:38.225>in <00:33:38.365>your,

736
00:33:39.715 --> 00:33:42.245
<00:33:39.715>when <00:33:39.870>you <00:33:40.026>hover <00:33:40.181>it, <00:33:40.337>you <00:33:40.492>can <00:33:40.648>see <00:33:40.803>the <00:33:40.959>different <00:33:41.115>options

737
00:33:42.245 --> 00:33:45.525
<00:33:42.245>that <00:33:42.385>you <00:33:42.524>have <00:33:42.665>rather <00:33:42.804>than <00:33:42.945>going <00:33:43.084>to <00:33:43.225>the <00:33:43.364>file <00:33:43.504>and <00:33:43.645>checking

738
00:33:45.625 --> 00:33:46.685
<00:33:45.625>or <00:33:45.943>perhaps <00:33:46.261>making <00:33:46.579>a,

739
00:33:46.685 --> 00:33:48.565
<00:33:46.685>even <00:33:46.840>like <00:33:46.996>when <00:33:47.151>you <00:33:47.307>check, <00:33:47.462>you <00:33:47.618>can <00:33:47.773>make <00:33:47.929>a <00:33:48.085>typo.

740
00:33:49.395 --> 00:33:51.725
<00:33:49.395>It's <00:33:49.550>really <00:33:49.706>nice, <00:33:49.861>especially <00:33:50.017>nice <00:33:50.172>when <00:33:50.328>you <00:33:50.483>work <00:33:50.639>with <00:33:50.795>themes

741
00:33:52.795 --> 00:33:56.445
<00:33:52.795>because <00:33:52.935>again, <00:33:53.075>uh, <00:33:53.215>in <00:33:53.355>theme <00:33:53.495>I'm <00:33:53.635>having <00:33:53.775>like, <00:33:53.915>um, <00:33:54.055>you <00:33:54.195>know,

742
00:33:56.445 --> 00:33:57.765
<00:33:56.445>primary <00:33:57.039>or <00:33:57.633>secondary

743
00:33:57.825 --> 00:33:59.245
<00:33:57.825>or <00:33:58.144>blah <00:33:58.464>blah <00:33:58.783>blah, <00:33:59.102>like,

744
00:33:59.305 --> 00:34:01.045
<00:33:59.305>I'm <00:33:59.538>not <00:33:59.771>accepting <00:34:00.005>anything <00:34:00.238>else <00:34:00.471>in <00:34:00.705>those.

745
00:34:01.825 --> 00:34:04.245
<00:34:01.825>So, <00:34:01.980>you <00:34:02.136>know, <00:34:02.291>when <00:34:02.447>you <00:34:02.602>want <00:34:02.758>to <00:34:02.913>create <00:34:03.069>a <00:34:03.225>theme,

746
00:34:04.705 --> 00:34:06.125
<00:34:04.705>you <00:34:04.918>create <00:34:05.130>it <00:34:05.344>like <00:34:05.557>you <00:34:05.770>style <00:34:05.983>it,

747
00:34:06.185 --> 00:34:07.685
<00:34:06.185>and <00:34:06.335>then <00:34:06.485>at <00:34:06.635>the <00:34:06.784>end <00:34:06.935>when <00:34:07.085>you're <00:34:07.235>happy <00:34:07.385>with <00:34:07.534>it,

748
00:34:07.905 --> 00:34:10.765
<00:34:07.905>you <00:34:08.045>can <00:34:08.185>add <00:34:08.324>it <00:34:08.465>to <00:34:08.605>the <00:34:08.745>themes, <00:34:08.884>which <00:34:09.025>people <00:34:09.165>are <00:34:09.304>allowed

749
00:34:10.765 --> 00:34:11.925
<00:34:10.764>to <00:34:11.025>pass <00:34:11.286>in <00:34:11.548>as <00:34:11.809>props.

750
00:34:12.825 --> 00:34:16.125
<00:34:12.824>And <00:34:13.024>again, <00:34:13.225>we'll <00:34:13.424>see <00:34:13.625>what <00:34:13.824>happens <00:34:14.024>if, <00:34:14.225>um,

751
00:34:16.555 --> 00:34:18.165
<00:34:16.554>when <00:34:16.835>you <00:34:17.114>try <00:34:17.395>to <00:34:17.674>code <00:34:17.955>something.

752
00:34:18.625 --> 00:34:21.165
<00:34:18.625>Um, <00:34:18.800>but <00:34:18.975>some <00:34:19.150>theme <00:34:19.324>when <00:34:19.500>you <00:34:19.675>hover <00:34:19.850>on <00:34:20.025>it,

753
00:34:21.385 --> 00:34:23.445
<00:34:21.385>you <00:34:21.540>can <00:34:21.696>see <00:34:21.851>all <00:34:22.007>the <00:34:22.162>different <00:34:22.318>themes <00:34:22.473>available <00:34:22.629>you <00:34:22.785>have,

754
00:34:24.175 --> 00:34:25.445
<00:34:24.175>which <00:34:24.556>is <00:34:24.937>pretty <00:34:25.318>sick.

755
00:34:26.185 --> 00:34:30.045
<00:34:26.185>Um, <00:34:26.340>and <00:34:26.496>you <00:34:26.651>know, <00:34:26.807>same <00:34:26.962>when <00:34:27.118>you <00:34:27.273>hover <00:34:27.429>on, <00:34:27.585>uh,

756
00:34:30.045 --> 00:34:33.085
<00:34:30.045>different <00:34:30.245>atoms <00:34:30.445>or <00:34:30.645>different, <00:34:30.845>any <00:34:31.045>kind <00:34:31.245>of <00:34:31.445>components,

757
00:34:33.085 --> 00:34:35.805
<00:34:33.085>really, <00:34:33.225>they <00:34:33.365>tell <00:34:33.505>you, <00:34:33.645>you <00:34:33.784>know, <00:34:33.925>the <00:34:34.065>list <00:34:34.205>of <00:34:34.345>things <00:34:34.485>which,

758
00:34:35.945 --> 00:34:38.685
<00:34:35.945>um, <00:34:36.225>you <00:34:36.505>expected <00:34:36.785>to <00:34:37.065>look <00:34:37.345>at.

759
00:34:38.745 --> 00:34:41.445
<00:34:38.745>So <00:34:38.920>for <00:34:39.094>example, <00:34:39.270>I <00:34:39.444>image <00:34:39.620>credits <00:34:39.795>eyes <00:34:39.969>for <00:34:40.145>interface.

760
00:34:42.475 --> 00:34:43.855
<00:34:42.475>So <00:34:42.652>I <00:34:42.829>would <00:34:43.007>know <00:34:43.184>that <00:34:43.362>I <00:34:43.539>would <00:34:43.717>have

761
00:34:43.855 --> 00:34:46.775
<00:34:43.855>to <00:34:44.010>check <00:34:44.166>I <00:34:44.321>image <00:34:44.477>credits <00:34:44.632>beforehand <00:34:44.788>if <00:34:44.943>I <00:34:45.099>wanted <00:34:45.255>to,

762
00:34:46.775 --> 00:34:49.695
<00:34:46.775>to <00:34:46.930>understand <00:34:47.086>what <00:34:47.241>was <00:34:47.397>going <00:34:47.552>on, <00:34:47.708>what <00:34:47.863>was <00:34:48.019>I <00:34:48.175>expected

763
00:34:49.875 --> 00:34:52.655
<00:34:49.875>to <00:34:50.014>see <00:34:50.155>in <00:34:50.295>a <00:34:50.435>very <00:34:50.574>neat <00:34:50.715>place <00:34:50.855>rather <00:34:50.995>than, <00:34:51.135>you <00:34:51.275>know,

764
00:34:52.655 --> 00:34:54.015
<00:34:52.655>if <00:34:52.859>I <00:34:53.063>was <00:34:53.266>just <00:34:53.471>using <00:34:53.675>J <00:34:53.879>script,

765
00:34:54.015 --> 00:34:56.415
<00:34:54.014>it <00:34:54.214>would've <00:34:54.415>been <00:34:54.614>way <00:34:54.815>more <00:34:55.014>messy, <00:34:55.214>way <00:34:55.415>messier.

766
00:34:58.865 --> 00:35:01.645
<00:34:58.865>So <00:34:58.992>again, <00:34:59.119>what <00:34:59.246>happens, <00:34:59.374>you <00:34:59.501>can <00:34:59.628>tell <00:34:59.755>me <00:34:59.883>if <00:35:00.010>I <00:35:00.137>pass <00:35:00.265>a

767
00:35:01.645 --> 00:35:02.765
<00:35:01.645>theme <00:35:01.981>that <00:35:02.317>doesn't <00:35:02.653>exist.

768
00:35:02.835 --> 00:35:05.125
<00:35:02.835>This <00:35:02.975>is <00:35:03.115>kind <00:35:03.255>of <00:35:03.395>the, <00:35:03.535>the <00:35:03.675>error <00:35:03.815>that <00:35:03.955>you <00:35:04.095>would <00:35:04.235>see,

769
00:35:05.125 --> 00:35:06.405
<00:35:05.125>which <00:35:05.509>is <00:35:05.893>very <00:35:06.277>straightforward.

770
00:35:07.025 --> 00:35:09.645
<00:35:07.025>It <00:35:07.225>tells <00:35:07.425>you <00:35:07.625>here <00:35:07.825>what <00:35:08.025>themes <00:35:08.225>are <00:35:08.425>acceptable

771
00:35:11.665 --> 00:35:15.205
<00:35:11.665>and <00:35:11.805>it <00:35:11.945>throw <00:35:12.085>you <00:35:12.225>the <00:35:12.365>error <00:35:12.505>not <00:35:12.645>everywhere <00:35:12.785>in <00:35:12.925>your <00:35:13.065>code,

772
00:35:15.205 --> 00:35:18.025
<00:35:15.205>but <00:35:15.438>just <00:35:15.671>on <00:35:15.904>the <00:35:16.138>theme <00:35:16.371>bit, <00:35:16.605>saying

773
00:35:18.055 --> 00:35:21.345
<00:35:18.055>that <00:35:18.254>the <00:35:18.455>expected <00:35:18.654>type <00:35:18.855>comes <00:35:19.055>from <00:35:19.254>property <00:35:19.455>theme,

774
00:35:21.345 --> 00:35:22.785
<00:35:21.345>which <00:35:21.604>is <00:35:21.863>declared <00:35:22.122>here <00:35:22.381>on <00:35:22.640>type

775
00:35:23.165 --> 00:35:26.025
<00:35:23.165>and <00:35:23.292>it <00:35:23.419>says, <00:35:23.546>you <00:35:23.674>know, <00:35:23.801>type <00:35:23.928>error <00:35:24.055>type <00:35:24.183>head <00:35:24.310>award <00:35:24.437>is <00:35:24.565>not

776
00:35:26.025 --> 00:35:28.505
<00:35:26.025>assignable <00:35:26.225>to <00:35:26.425>type <00:35:26.625>primary <00:35:26.825>or <00:35:27.025>blah <00:35:27.225>blah, <00:35:27.425>blah.

777
00:35:28.815 --> 00:35:30.065
<00:35:28.815>It's <00:35:29.096>very <00:35:29.377>clear, <00:35:29.658>it's <00:35:29.940>not

778
00:35:30.065 --> 00:35:34.985
<00:35:30.065>confusing <00:35:30.531>as <00:35:30.998>a <00:35:31.465>bonus.

779
00:35:35.725 --> 00:35:39.205
<00:35:35.725>Um, <00:35:36.005>I <00:35:36.285>mentioned <00:35:36.565>storybook <00:35:36.845>before, <00:35:37.125>uh,

780
00:35:39.715 --> 00:35:43.205
<00:35:39.715>because, <00:35:39.995>uh, <00:35:40.275>Airbnb <00:35:40.555>released <00:35:40.835>their <00:35:41.115>storybook

781
00:35:43.215 --> 00:35:46.125
<00:35:43.215>where <00:35:43.370>you <00:35:43.526>can <00:35:43.681>go <00:35:43.837>and <00:35:43.992>browse <00:35:44.148>in <00:35:44.303>their <00:35:44.459>different <00:35:44.615>components

782
00:35:46.625 --> 00:35:49.005
<00:35:46.625>and <00:35:46.780>see <00:35:46.936>how <00:35:47.091>they <00:35:47.247>are <00:35:47.402>called, <00:35:47.558>how <00:35:47.713>they <00:35:47.869>are <00:35:48.025>structured,

783
00:35:49.355 --> 00:35:51.085
<00:35:49.355>what <00:35:49.555>they <00:35:49.755>were <00:35:49.955>made <00:35:50.155>of, <00:35:50.355>what <00:35:50.555>they <00:35:50.755>constitute.

784
00:35:51.505 --> 00:35:52.765
<00:35:51.505>And <00:35:51.788>that <00:35:52.072>is <00:35:52.355>absolutely <00:35:52.639>amazing

785
00:35:53.225 --> 00:35:54.645
<00:35:53.225>and <00:35:53.438>I <00:35:53.651>thank <00:35:53.864>them <00:35:54.077>for <00:35:54.290>doing <00:35:54.503>that.

786
00:35:55.905 --> 00:35:59.565
<00:35:55.905>And <00:35:56.105>you <00:35:56.305>know, <00:35:56.505>but <00:35:56.705>anyone <00:35:56.905>could <00:35:57.105>implement <00:35:57.305>storybook.

787
00:35:59.565 --> 00:36:02.885
<00:35:59.565>What <00:35:59.740>storybook <00:35:59.915>is <00:36:00.090>is <00:36:00.265>basically <00:36:00.440>like, <00:36:00.615>um, <00:36:00.790>it <00:36:00.965>builds

788
00:36:02.885 --> 00:36:06.885
<00:36:02.885>for <00:36:03.012>your <00:36:03.139>sort <00:36:03.266>of <00:36:03.394>website <00:36:03.521>where <00:36:03.648>you <00:36:03.775>have <00:36:03.903>a <00:36:04.030>menu <00:36:04.157>on <00:36:04.285>the,

789
00:36:07.105 --> 00:36:09.805
<00:36:07.105>on <00:36:07.280>the <00:36:07.455>right <00:36:07.630>where <00:36:07.805>you <00:36:07.980>can <00:36:08.155>click <00:36:08.330>on <00:36:08.505>components

790
00:36:09.945 --> 00:36:10.965
<00:36:09.945>and <00:36:10.098>you <00:36:10.251>see <00:36:10.404>how <00:36:10.557>they <00:36:10.710>look <00:36:10.863>like

791
00:36:11.065 --> 00:36:13.725
<00:36:11.065>and <00:36:11.240>you <00:36:11.415>can <00:36:11.590>on <00:36:11.765>components <00:36:11.940>with <00:36:12.115>the <00:36:12.290>different <00:36:12.465>props

792
00:36:13.725 --> 00:36:15.845
<00:36:13.725>that <00:36:13.924>they <00:36:14.125>are <00:36:14.325>passed <00:36:14.525>in <00:36:14.725>the <00:36:14.924>different <00:36:15.125>options.

793
00:36:16.235 --> 00:36:19.185
<00:36:16.235>It's, <00:36:16.410>it's <00:36:16.585>pretty <00:36:16.760>good. <00:36:16.935>So <00:36:17.110>for <00:36:17.285>example, <00:36:17.460>let's <00:36:17.635>say

794
00:36:19.695 --> 00:36:22.705
<00:36:19.695>when <00:36:19.850>you <00:36:20.006>are, <00:36:20.161>um, <00:36:20.317>you <00:36:20.472>know, <00:36:20.628>when <00:36:20.783>you <00:36:20.939>are <00:36:21.095>scaling

795
00:36:22.735 --> 00:36:25.585
<00:36:22.735>with <00:36:23.015>your <00:36:23.295>team <00:36:23.575>and <00:36:23.855>you <00:36:24.135>know,

796
00:36:26.685 --> 00:36:28.185
<00:36:26.685>coding <00:36:26.955>at <00:36:27.225>some <00:36:27.495>point <00:36:27.765>it's <00:36:28.035>amazing,

797
00:36:28.185 --> 00:36:30.865
<00:36:28.185>but <00:36:28.325>people <00:36:28.465>want <00:36:28.605>to <00:36:28.745>visually <00:36:28.884>see <00:36:29.025>the <00:36:29.165>options <00:36:29.305>that <00:36:29.445>they <00:36:29.585>have.

798
00:36:32.035 --> 00:36:35.405
<00:36:32.035>Like, <00:36:32.162>you <00:36:32.289>know, <00:36:32.416>it's <00:36:32.544>to, <00:36:32.671>to <00:36:32.798>my, <00:36:32.925>in <00:36:33.053>my <00:36:33.180>head, <00:36:33.307>it <00:36:33.435>makes

799
00:36:35.425 --> 00:36:38.565
<00:36:35.425>so <00:36:35.565>much <00:36:35.705>sense <00:36:35.845>to <00:36:35.985>take <00:36:36.125>the <00:36:36.265>time <00:36:36.405>to <00:36:36.545>create <00:36:36.685>a <00:36:36.825>storybook

800
00:36:38.835 --> 00:36:41.805
<00:36:38.835>because <00:36:39.010>you <00:36:39.185>can, <00:36:39.360>you <00:36:39.535>know, <00:36:39.710>show <00:36:39.885>designers, <00:36:40.060>marketing <00:36:40.235>people,

801
00:36:41.805 --> 00:36:44.645
<00:36:41.805>branding, <00:36:42.004>book <00:36:42.205>developers <00:36:42.404>as <00:36:42.605>well, <00:36:42.805>like <00:36:43.004>this <00:36:43.205>website

802
00:36:44.745 --> 00:36:47.645
<00:36:44.745>and <00:36:44.944>then <00:36:45.145>people <00:36:45.345>understand <00:36:45.545>the <00:36:45.745>kind <00:36:45.944>of <00:36:46.145>bits

803
00:36:47.645 --> 00:36:50.645
<00:36:47.645>that <00:36:47.800>they <00:36:47.956>have <00:36:48.111>available <00:36:48.267>to <00:36:48.422>them <00:36:48.578>to <00:36:48.733>create <00:36:48.889>new <00:36:49.045>features

804
00:36:51.065 --> 00:36:52.565
<00:36:51.065>or <00:36:51.290>you <00:36:51.515>know, <00:36:51.740>what <00:36:51.965>they <00:36:52.190>can <00:36:52.415>reuse.

805
00:36:53.555 --> 00:36:54.695
<00:36:53.555>And <00:36:53.811>that <00:36:54.068>is <00:36:54.324>quite <00:36:54.581>amazing.

806
00:36:55.225 --> 00:36:57.015
<00:36:55.225>Definitely <00:36:55.424>do <00:36:55.625>take <00:36:55.825>the <00:36:56.025>time <00:36:56.225>to <00:36:56.424>do <00:36:56.625>that.

807
00:36:57.015 --> 00:36:58.855
<00:36:57.015>That's <00:36:57.248>something <00:36:57.481>that <00:36:57.714>I <00:36:57.948>myself <00:36:58.181>will <00:36:58.415>do.

808
00:36:59.015 --> 00:37:01.055
<00:36:59.015>I <00:36:59.214>have <00:36:59.415>some <00:36:59.615>of <00:36:59.815>my <00:37:00.015>components <00:37:00.214>on <00:37:00.415>storybook,

809
00:37:01.275 --> 00:37:02.815
<00:37:01.275>the <00:37:01.473>ones <00:37:01.671>I <00:37:01.869>think <00:37:02.067>are <00:37:02.265>the <00:37:02.463>most <00:37:02.661>important.

810
00:37:03.275 --> 00:37:05.415
<00:37:03.275>But <00:37:03.450>as <00:37:03.625>we <00:37:03.800>go <00:37:03.975>on, <00:37:04.150>I <00:37:04.325>think <00:37:04.500>it's <00:37:04.675>going

811
00:37:05.415 --> 00:37:07.415
<00:37:05.415>to <00:37:05.615>be <00:37:05.815>a <00:37:06.015>must <00:37:06.215>when <00:37:06.415>the <00:37:06.615>team <00:37:06.815>grows

812
00:37:07.595 --> 00:37:10.895
<00:37:07.595>to <00:37:07.828>have <00:37:08.061>everything <00:37:08.294>uniquely <00:37:08.528>visible <00:37:08.761>on <00:37:08.995>there

813
00:37:10.995 --> 00:37:12.375
<00:37:10.995>so <00:37:11.243>people <00:37:11.491>understand <00:37:11.740>what's <00:37:11.988>going <00:37:12.237>on.

814
00:37:13.195 --> 00:37:14.735
<00:37:13.195>And, <00:37:13.472>you <00:37:13.749>know, <00:37:14.026>storybook <00:37:14.303>is <00:37:14.581>something

815
00:37:14.735 --> 00:37:15.815
<00:37:14.735>that <00:37:14.929>a <00:37:15.123>lot <00:37:15.318>of <00:37:15.512>people <00:37:15.707>use.

816
00:37:16.165 --> 00:37:17.535
<00:37:16.165>It's <00:37:16.576>not <00:37:16.987>just <00:37:17.397>Airbnb.

817
00:37:17.995 --> 00:37:21.175
<00:37:17.995>Um, <00:37:18.194>you <00:37:18.395>have <00:37:18.595>Microsoft, <00:37:18.795>Coursera, <00:37:18.995>RB, <00:37:19.194>uh, <00:37:19.395>IBM,

818
00:37:21.315 --> 00:37:22.815
<00:37:21.315>the <00:37:21.990>government <00:37:22.665>Atlassian,

819
00:37:23.315 --> 00:37:25.535
<00:37:23.315>and <00:37:23.490>even <00:37:23.665>more <00:37:23.840>people <00:37:24.015>that <00:37:24.190>haven't <00:37:24.365>mentioned <00:37:24.540>on <00:37:24.715>there.

820
00:37:26.445 --> 00:37:28.135
<00:37:26.445>It's <00:37:26.645>very <00:37:26.845>powerful. <00:37:27.045>So <00:37:27.245>if <00:37:27.445>you <00:37:27.645>don't <00:37:27.845>know

821
00:37:28.135 --> 00:37:29.375
<00:37:28.135>storybook, <00:37:28.693>check <00:37:29.251>it.

822
00:37:30.595 --> 00:37:34.335
<00:37:30.595>How <00:37:30.770>it <00:37:30.944>works <00:37:31.120>is, <00:37:31.294>uh, <00:37:31.470>like <00:37:31.645>this <00:37:31.819>very <00:37:31.995>simple.

823
00:37:35.275 --> 00:37:37.015
<00:37:35.275>And <00:37:35.625>again, <00:37:35.975>um, <00:37:36.325>you <00:37:36.675>know,

824
00:37:37.015 --> 00:37:38.895
<00:37:37.015>having <00:37:37.248>something <00:37:37.481>like <00:37:37.714>task <00:37:37.948>script <00:37:38.181>will <00:37:38.415>be

825
00:37:39.045 --> 00:37:40.095
<00:37:39.045>very <00:37:39.360>valuable <00:37:39.674>as <00:37:39.990>well.

826
00:37:40.515 --> 00:37:43.455
<00:37:40.515>Um, <00:37:40.690>because <00:37:40.865>then <00:37:41.040>when <00:37:41.214>you <00:37:41.390>create <00:37:41.565>your <00:37:41.740>storybook <00:37:41.915>components,

827
00:37:43.475 --> 00:37:46.935
<00:37:43.475>you <00:37:43.615>also <00:37:43.755>know, <00:37:43.895>um, <00:37:44.035>whether <00:37:44.174>you <00:37:44.315>don't <00:37:44.455>make <00:37:44.595>any <00:37:44.735>mistakes <00:37:44.875>on

828
00:37:47.495 --> 00:37:49.455
<00:37:47.495>creating <00:37:47.845>the, <00:37:48.194>the <00:37:48.545>story <00:37:48.895>yourself.

829
00:37:50.075 --> 00:37:52.135
<00:37:50.075>Um, <00:37:50.355>that's <00:37:50.634>how <00:37:50.915>it <00:37:51.194>looks <00:37:51.475>like.

830
00:37:52.235 --> 00:37:55.375
<00:37:52.235>So, <00:37:52.362>um, <00:37:52.489>let's <00:37:52.616>start <00:37:52.744>by <00:37:52.871>seeing <00:37:52.998>what <00:37:53.125>we <00:37:53.253>have <00:37:53.380>on <00:37:53.507>the <00:37:53.635>right.

831
00:37:55.595 --> 00:37:57.775
<00:37:55.595>So <00:37:55.794>as <00:37:55.995>I <00:37:56.194>said, <00:37:56.395>you <00:37:56.595>have <00:37:56.794>a <00:37:56.995>menu

832
00:37:58.595 --> 00:38:00.655
<00:37:58.595>and <00:37:58.828>you <00:37:59.061>can <00:37:59.294>click <00:37:59.528>on <00:37:59.761>each <00:37:59.995>bits

833
00:38:00.795 --> 00:38:03.695
<00:38:00.795>and <00:38:00.950>it <00:38:01.106>shows <00:38:01.261>on <00:38:01.417>the <00:38:01.572>left <00:38:01.728>how <00:38:01.883>it <00:38:02.039>looks <00:38:02.195>like.

834
00:38:04.525 --> 00:38:07.455
<00:38:04.525>Just <00:38:04.725>quite <00:38:04.925>amazing. <00:38:05.125>And <00:38:05.325>again, <00:38:05.525>with <00:38:05.725>custom <00:38:05.925>Arrow,

835
00:38:07.525 --> 00:38:11.055
<00:38:07.525>with <00:38:07.652>custom <00:38:07.779>close <00:38:07.906>icon, <00:38:08.034>this <00:38:08.161>is <00:38:08.288>how <00:38:08.415>you <00:38:08.543>can <00:38:08.670>click <00:38:08.797>in <00:38:08.925>it

836
00:38:11.115 --> 00:38:13.095
<00:38:11.115>to <00:38:11.348>see, <00:38:11.581>you <00:38:11.814>know, <00:38:12.048>the <00:38:12.281>different <00:38:12.515>options.

837
00:38:13.235 --> 00:38:14.495
<00:38:13.235>So <00:38:13.424>let's <00:38:13.613>say <00:38:13.802>I <00:38:13.991>have <00:38:14.180>my <00:38:14.368>button,

838
00:38:15.135 --> 00:38:17.095
<00:38:15.135>I <00:38:15.368>can <00:38:15.601>see <00:38:15.835>the <00:38:16.068>different <00:38:16.301>themes <00:38:16.535>on

839
00:38:17.095 --> 00:38:18.875
<00:38:17.095>it, <00:38:17.444>which <00:38:17.794>is <00:38:18.145>quite <00:38:18.495>amazing.

840
00:38:19.255 --> 00:38:20.875
<00:38:19.255>Or <00:38:19.455>send <00:38:19.655>for <00:38:19.855>icons <00:38:20.055>if <00:38:20.255>I'm <00:38:20.455>not <00:38:20.655>sure

841
00:38:20.875 --> 00:38:22.875
<00:38:20.875>how <00:38:21.050>the <00:38:21.225>icons <00:38:21.400>look, <00:38:21.575>I <00:38:21.750>can <00:38:21.925>go <00:38:22.100>on <00:38:22.275>it.

842
00:38:23.845 --> 00:38:25.415
<00:38:23.845>It's <00:38:24.544>great. <00:38:25.245>Um,

843
00:38:25.635 --> 00:38:27.975
<00:38:25.635>and <00:38:25.775>again, <00:38:25.915>let's <00:38:26.055>see <00:38:26.195>how <00:38:26.335>you <00:38:26.475>implement <00:38:26.615>it <00:38:26.755>in <00:38:26.895>the <00:38:27.035>code.

844
00:38:28.515 --> 00:38:32.615
<00:38:28.515>Uh, <00:38:28.654>so <00:38:28.795>let's <00:38:28.935>see. <00:38:29.075>At <00:38:29.214>the <00:38:29.355>left <00:38:29.495>you <00:38:29.634>use <00:38:29.775>storybook, <00:38:29.915>uh,

845
00:38:32.615 --> 00:38:34.695
<00:38:32.615>slash <00:38:32.848>react <00:38:33.081>as <00:38:33.314>a, <00:38:33.548>as <00:38:33.781>a <00:38:34.015>library.

846
00:38:35.105 --> 00:38:37.725
<00:38:35.105>Uh, <00:38:35.280>but <00:38:35.455>story <00:38:35.630>books <00:38:35.805>work <00:38:35.980>with <00:38:36.155>obviously <00:38:36.330>any <00:38:36.505>other

847
00:38:38.355 --> 00:38:40.045
<00:38:38.355>framework <00:38:38.588>you <00:38:38.821>might <00:38:39.055>want <00:38:39.288>to <00:38:39.521>work <00:38:39.755>with.

848
00:38:40.045 --> 00:38:43.945
<00:38:40.045>For <00:38:40.245>example, <00:38:40.445>angular <00:38:40.645>all <00:38:40.845>use <00:38:41.045>anything <00:38:41.245>else <00:38:41.445>really.

849
00:38:44.285 --> 00:38:47.465
<00:38:44.285>Um, <00:38:44.460>and <00:38:44.634>you <00:38:44.810>create <00:38:44.984>a <00:38:45.160>story <00:38:45.335>of, <00:38:45.509>it's <00:38:45.685>again,

850
00:38:47.465 --> 00:38:48.465
<00:38:47.465>very <00:38:47.915>nicely <00:38:48.365>written.

851
00:38:48.805 --> 00:38:50.825
<00:38:48.805>Um, <00:38:49.038>'cause <00:38:49.271>each <00:38:49.504>item <00:38:49.738>is <00:38:49.971>a <00:38:50.205>story.

852
00:38:50.825 --> 00:38:52.785
<00:38:50.825>And <00:38:50.980>that's <00:38:51.136>the <00:38:51.291>book, <00:38:51.447>it's <00:38:51.602>the <00:38:51.758>book <00:38:51.913>of <00:38:52.069>the <00:38:52.225>stories.

853
00:38:53.325 --> 00:38:54.465
<00:38:53.325>So <00:38:53.581>you're <00:38:53.837>saying, <00:38:54.094>okay, <00:38:54.351>I'm

854
00:38:54.465 --> 00:38:55.665
<00:38:54.465>getting, <00:38:54.735>I'm <00:38:55.005>adding <00:38:55.275>one <00:38:55.545>component.

855
00:38:55.665 --> 00:38:58.545
<00:38:55.665>So <00:38:55.840>basically <00:38:56.015>one <00:38:56.190>story, <00:38:56.365>um, <00:38:56.540>which <00:38:56.715>is <00:38:56.890>a <00:38:57.065>button.

856
00:38:59.585 --> 00:39:02.165
<00:38:59.585>And <00:38:59.760>then, <00:38:59.935>you <00:39:00.110>know, <00:39:00.285>you're <00:39:00.460>adding, <00:39:00.635>you <00:39:00.810>know, <00:39:00.985>the,

857
00:39:02.385 --> 00:39:03.845
<00:39:02.385>the <00:39:02.604>text <00:39:02.823>which <00:39:03.042>is <00:39:03.261>going <00:39:03.480>to <00:39:03.698>appear.

858
00:39:04.305 --> 00:39:06.965
<00:39:04.305>So, <00:39:04.460>you <00:39:04.616>know, <00:39:04.771>read <00:39:04.927>only <00:39:05.082>with <00:39:05.238>clear <00:39:05.393>ba <00:39:05.549>dates <00:39:05.705>button,

859
00:39:07.035 --> 00:39:08.485
<00:39:07.035>like <00:39:07.180>all <00:39:07.325>of <00:39:07.470>the <00:39:07.615>thing <00:39:07.760>you <00:39:07.905>see <00:39:08.050>in <00:39:08.195>the <00:39:08.340>menu.

860
00:39:09.025 --> 00:39:10.805
<00:39:09.025>You <00:39:09.225>are <00:39:09.425>the <00:39:09.625>one <00:39:09.825>who <00:39:10.025>creates <00:39:10.225>what's <00:39:10.425>going

861
00:39:10.805 --> 00:39:12.845
<00:39:10.805>to <00:39:11.038>be <00:39:11.271>displayed <00:39:11.504>from <00:39:11.738>the <00:39:11.971>user <00:39:12.205>perspective.

862
00:39:13.275 --> 00:39:15.325
<00:39:13.275>When <00:39:13.450>you <00:39:13.625>say <00:39:13.800>add, <00:39:13.975>'cause <00:39:14.150>you're <00:39:14.325>adding <00:39:14.500>the <00:39:14.675>text

863
00:39:15.715 --> 00:39:17.285
<00:39:15.715>that <00:39:15.890>you <00:39:16.065>want <00:39:16.240>to <00:39:16.415>be <00:39:16.590>shown <00:39:16.765>on <00:39:16.940>the <00:39:17.115>menu.

864
00:39:17.825 --> 00:39:19.165
<00:39:17.825>So <00:39:17.975>for <00:39:18.126>example, <00:39:18.277>I <00:39:18.428>want <00:39:18.578>to <00:39:18.729>show <00:39:18.880>a <00:39:19.031>button

865
00:39:19.235 --> 00:39:22.085
<00:39:19.235>with <00:39:19.390>text <00:39:19.546>Hello <00:39:19.701>button, <00:39:19.857>just <00:39:20.012>as <00:39:20.168>an <00:39:20.323>example <00:39:20.479>in <00:39:20.635>primary.

866
00:39:22.705 --> 00:39:26.845
<00:39:22.705>And <00:39:22.845>then <00:39:22.985>I <00:39:23.125>would've <00:39:23.265>created <00:39:23.404>below <00:39:23.545>all <00:39:23.685>the <00:39:23.825>stories <00:39:23.965>of <00:39:24.105>button.

867
00:39:27.105 --> 00:39:28.925
<00:39:27.105>So <00:39:27.260>it's <00:39:27.416>going <00:39:27.571>to <00:39:27.727>be <00:39:27.882>grouped <00:39:28.038>together <00:39:28.193>in <00:39:28.349>the <00:39:28.505>menu,

868
00:39:29.185 --> 00:39:32.485
<00:39:29.185>and <00:39:29.325>I'm <00:39:29.465>going <00:39:29.605>to <00:39:29.745>say <00:39:29.884>add, <00:39:30.025>you <00:39:30.165>know, <00:39:30.305>with <00:39:30.445>secondary <00:39:30.585>theme.

869
00:39:32.905 --> 00:39:35.205
<00:39:32.905>And <00:39:33.080>then <00:39:33.255>I <00:39:33.430>have <00:39:33.605>said <00:39:33.780>button <00:39:33.955>theme <00:39:34.130>equals <00:39:34.305>primary

870
00:39:35.625 --> 00:39:38.325
<00:39:35.625>and <00:39:35.858>then <00:39:36.091>hello <00:39:36.325>primary <00:39:36.558>button <00:39:36.791>or <00:39:37.025>secondary

871
00:39:38.325 --> 00:39:39.445
<00:39:38.325>or <00:39:38.577>whatever <00:39:38.829>theme <00:39:39.081>I <00:39:39.333>chose.

872
00:39:40.575 --> 00:39:41.795
<00:39:40.575>So <00:39:40.849>that <00:39:41.124>is <00:39:41.398>very <00:39:41.673>simple.

873
00:39:42.335 --> 00:39:44.155
<00:39:42.335>So <00:39:42.615>no <00:39:42.895>matter <00:39:43.175>your <00:39:43.455>level, <00:39:43.735>um,

874
00:39:44.175 --> 00:39:45.715
<00:39:44.175>that's <00:39:44.406>definitely <00:39:44.637>something <00:39:44.868>that <00:39:45.099>you <00:39:45.330>can <00:39:45.561>do.

875
00:39:46.295 --> 00:39:48.915
<00:39:46.295>And <00:39:46.645>again, <00:39:46.995>very, <00:39:47.345>very <00:39:47.695>powerful.

876
00:39:51.225 --> 00:39:53.195
<00:39:51.225>Cool. <00:39:51.458>So <00:39:51.691>do <00:39:51.924>you <00:39:52.158>have <00:39:52.391>any <00:39:52.625>questions?

877
00:39:53.575 --> 00:39:57.435
<00:39:53.575>Um, <00:39:53.750>super <00:39:53.924>keen <00:39:54.100>to, <00:39:54.274>um, <00:39:54.450>to <00:39:54.625>answer <00:39:54.799>anyway, <00:39:54.975>um,

878
00:39:57.575 --> 00:40:00.555
<00:39:57.575>on <00:39:57.750>architecture, <00:39:57.924>on <00:39:58.100>TypeScript, <00:39:58.274>on <00:39:58.450>React, <00:39:58.625>whatever <00:39:58.799>you <00:39:58.975>want.