WEBVTT

1
00:00:02.995 --> 00:00:03.285
Okay.

2
00:00:03.375 --> 00:00:05.365
<00:00:03.375>Hello <00:00:03.608>everyone. <00:00:03.841>This <00:00:04.075>stand <00:00:04.308>is <00:00:04.541>so <00:00:04.775>tall.

3
00:00:05.685 --> 00:00:08.645
<00:00:05.685>I <00:00:05.859>am <00:00:06.034>also <00:00:06.209>have <00:00:06.385>displayed, <00:00:06.560>so <00:00:06.734>I <00:00:06.909>will <00:00:07.084>try

4
00:00:08.645 --> 00:00:09.725
<00:00:08.645>to <00:00:08.888>move <00:00:09.131>a <00:00:09.373>bit <00:00:09.617>around.

5
00:00:10.305 --> 00:00:12.525
<00:00:10.305>So <00:00:10.538>today <00:00:10.771>we're <00:00:11.004>gonna <00:00:11.238>talk <00:00:11.471>about <00:00:11.705>Astro.

6
00:00:12.615 --> 00:00:14.205
<00:00:12.615>Astro <00:00:12.965>is <00:00:13.315>a <00:00:13.665>new <00:00:14.015>framework,

7
00:00:14.265 --> 00:00:16.845
<00:00:14.265>but <00:00:14.420>first <00:00:14.576>let's <00:00:14.731>start <00:00:14.887>with <00:00:15.042>bit <00:00:15.198>with <00:00:15.353>who <00:00:15.509>am <00:00:15.665>I?

8
00:00:17.285 --> 00:00:20.205
<00:00:17.285>I <00:00:17.485>am <00:00:17.685>Francesco, <00:00:17.885>but <00:00:18.085>everybody <00:00:18.285>calls <00:00:18.485>me <00:00:18.685>napo.

9
00:00:20.505 --> 00:00:23.965
<00:00:20.505>Uh, <00:00:20.660>I <00:00:20.816>am <00:00:20.971>43 <00:00:21.127>years <00:00:21.282>of <00:00:21.438>experience <00:00:21.593>in <00:00:21.749>breaking <00:00:21.904>stuff.

10
00:00:24.405 --> 00:00:27.485
<00:00:24.405>I <00:00:24.580>started <00:00:24.755>offline <00:00:24.930>with <00:00:25.105>my <00:00:25.280>mother <00:00:25.455>complaining <00:00:25.630>about <00:00:25.805>toys,

11
00:00:27.645 --> 00:00:30.125
<00:00:27.645>disassembled <00:00:27.925>in <00:00:28.205>try <00:00:28.485>when <00:00:28.765>I <00:00:29.044>tried

12
00:00:30.125 --> 00:00:31.205
<00:00:30.125>to <00:00:30.368>understand <00:00:30.611>how <00:00:30.854>they <00:00:31.096>work.

13
00:00:31.545 --> 00:00:33.205
<00:00:31.545>And <00:00:31.825>then <00:00:32.105>I <00:00:32.385>started <00:00:32.665>moving <00:00:32.945>online.

14
00:00:33.365 --> 00:00:35.445
<00:00:33.365>I <00:00:33.565>started <00:00:33.765>working <00:00:33.965>on <00:00:34.165>the <00:00:34.365>web <00:00:34.565>in <00:00:34.765>2005.

15
00:00:36.145 --> 00:00:38.925
<00:00:36.145>So <00:00:36.300>it's, <00:00:36.456>it's <00:00:36.611>a <00:00:36.767>bit <00:00:36.922>of <00:00:37.078>a <00:00:37.233>career <00:00:37.389>right <00:00:37.545>now.

16
00:00:39.045 --> 00:00:40.605
<00:00:39.045>I <00:00:39.325>am <00:00:39.605>a <00:00:39.885>front <00:00:40.165>staff <00:00:40.445>engineer.

17
00:00:41.125 --> 00:00:43.485
<00:00:41.125>I <00:00:41.825>currently <00:00:42.525>work@sig.com,

18
00:00:43.895 --> 00:00:45.805
<00:00:43.895>which <00:00:44.128>I <00:00:44.361>strongly <00:00:44.595>suggest <00:00:44.828>you <00:00:45.061>to <00:00:45.295>visit.

19
00:00:46.305 --> 00:00:48.565
<00:00:46.305>And <00:00:46.505>previously <00:00:46.705>I <00:00:46.905>was <00:00:47.105>working <00:00:47.305>at <00:00:47.505>Sumo <00:00:47.705>IT

20
00:00:48.785 --> 00:00:51.125
<00:00:48.785>and <00:00:49.065>eBay <00:00:49.345>in <00:00:49.625>the <00:00:49.904>classified <00:00:50.184>business.

21
00:00:51.185 --> 00:00:54.325
<00:00:51.185>And <00:00:51.325>even <00:00:51.465>before <00:00:51.605>I <00:00:51.745>had <00:00:51.885>a <00:00:52.025>company, <00:00:52.165>I <00:00:52.305>worked <00:00:52.445>with <00:00:52.585>Pelli.

22
00:00:55.005 --> 00:00:59.045
<00:00:55.005>I, <00:00:55.121>uh, <00:00:55.238>I, <00:00:55.355>I <00:00:55.471>have <00:00:55.588>been <00:00:55.705>in <00:00:55.821>the <00:00:55.938>industry <00:00:56.055>for <00:00:56.171>about <00:00:56.288>20 <00:00:56.405>years.

23
00:00:59.155 --> 00:01:01.925
<00:00:59.155>Next <00:00:59.330>year <00:00:59.505>will <00:00:59.680>be <00:00:59.855>20 <00:01:00.030>years, <00:01:00.205>so <00:01:00.380>I'm <00:01:00.555>kind

24
00:01:01.925 --> 00:01:05.525
<00:01:01.925>of <00:01:02.041>feeling <00:01:02.158>a <00:01:02.275>bit <00:01:02.391>old, <00:01:02.508>but <00:01:02.625>I <00:01:02.741>still <00:01:02.858>like <00:01:02.974>to <00:01:03.091>code <00:01:03.208>a <00:01:03.324>lot.

25
00:01:06.345 --> 00:01:09.205
<00:01:06.345>So <00:01:06.485>let's <00:01:06.625>talk <00:01:06.765>a <00:01:06.905>bit <00:01:07.045>about <00:01:07.185>the <00:01:07.325>topic <00:01:07.465>of <00:01:07.605>our <00:01:07.745>talk.

26
00:01:09.275 --> 00:01:11.445
<00:01:09.275>What <00:01:09.475>is <00:01:09.675>Astro <00:01:09.875>and <00:01:10.075>what's <00:01:10.275>cool <00:01:10.475>about <00:01:10.675>it?

27
00:01:11.825 --> 00:01:14.845
<00:01:11.825>We <00:01:12.000>know <00:01:12.175>we <00:01:12.350>have <00:01:12.525>a <00:01:12.700>lot <00:01:12.875>of <00:01:13.050>frameworks <00:01:13.225>today.

28
00:01:15.385 --> 00:01:18.365
<00:01:15.385>Uh, <00:01:15.665>you <00:01:15.945>probably <00:01:16.225>know <00:01:16.505>next <00:01:16.785>js

29
00:01:18.905 --> 00:01:22.165
<00:01:18.905>or <00:01:19.138>you're <00:01:19.371>working <00:01:19.605>with <00:01:19.838>very <00:01:20.071>specific <00:01:20.305>frameworks

30
00:01:22.625 --> 00:01:24.565
<00:01:22.625>or, <00:01:23.091>uh, <00:01:23.558>static <00:01:24.025>websites.

31
00:01:24.715 --> 00:01:29.125
<00:01:24.715>Generator, <00:01:24.915>industrial, <00:01:25.115>you <00:01:25.315>might <00:01:25.515>think <00:01:25.715>is <00:01:25.915>still <00:01:26.115>another

32
00:01:30.035 --> 00:01:32.485
<00:01:30.035>website <00:01:30.501>generator, <00:01:30.968>another <00:01:31.435>framework,

33
00:01:32.705 --> 00:01:35.085
<00:01:32.705>but <00:01:32.860>there <00:01:33.016>are <00:01:33.171>a <00:01:33.327>lot <00:01:33.482>of <00:01:33.638>good <00:01:33.793>things <00:01:33.949>about <00:01:34.105>it.

34
00:01:35.935 --> 00:01:38.325
<00:01:35.935>First <00:01:36.135>of <00:01:36.335>all, <00:01:36.535>Astro <00:01:36.735>is <00:01:36.935>an <00:01:37.135>open <00:01:37.335>source.

35
00:01:38.475 --> 00:01:39.485
<00:01:38.475>This <00:01:38.777>is <00:01:39.081>really <00:01:39.384>important

36
00:01:39.485 --> 00:01:42.085
<00:01:39.485>because <00:01:39.660>every <00:01:39.835>one <00:01:40.010>of <00:01:40.185>you <00:01:40.360>can <00:01:40.535>contribute <00:01:40.710>to <00:01:40.885>it.

37
00:01:42.385 --> 00:01:43.805
<00:01:42.384>Modern <00:01:43.024>web <00:01:43.663>framework.

38
00:01:44.345 --> 00:01:48.525
<00:01:44.345>The <00:01:44.500>main <00:01:44.656>goals <00:01:44.811>of <00:01:44.967>Astro, <00:01:45.122>of <00:01:45.278>Astro <00:01:45.433>are <00:01:45.589>simplicity, <00:01:45.745>speed,

39
00:01:48.625 --> 00:01:49.685
<00:01:48.625>and <00:01:49.579>flexibility.

40
00:01:50.985 --> 00:01:54.685
<00:01:50.985>We <00:01:51.125>want <00:01:51.265>our, <00:01:51.405>basically <00:01:51.545>the <00:01:51.685>Astro <00:01:51.825>creators <00:01:51.965>want <00:01:52.105>you <00:01:52.245>to <00:01:52.385>be,

41
00:01:54.685 --> 00:01:57.365
<00:01:54.685>to <00:01:54.965>enjoy <00:01:55.245>working <00:01:55.525>and <00:01:55.805>creating <00:01:56.085>websites.

42
00:01:57.865 --> 00:02:02.765
<00:01:57.865>You, <00:01:57.992>they <00:01:58.119>want <00:01:58.246>to <00:01:58.374>have <00:01:58.501>you <00:01:58.628>work <00:01:58.755>on <00:01:58.883>them <00:01:59.010>faster <00:01:59.137>than <00:01:59.265>ever

43
00:02:03.225 --> 00:02:04.845
<00:02:03.225>and <00:02:03.574>in <00:02:03.925>a <00:02:04.274>flexible <00:02:04.625>way.

44
00:02:05.345 --> 00:02:07.445
<00:02:05.345>So <00:02:05.545>that's <00:02:05.745>the <00:02:05.945>goal <00:02:06.145>of <00:02:06.345>the <00:02:06.545>Astro <00:02:06.745>Project.

45
00:02:07.905 --> 00:02:11.085
<00:02:07.905>You <00:02:08.104>can <00:02:08.305>visit <00:02:08.505>the <00:02:08.705>official <00:02:08.905>website <00:02:09.104>Astro <00:02:09.305>Build

46
00:02:11.665 --> 00:02:14.325
<00:02:11.665>and <00:02:11.945>you <00:02:12.225>can <00:02:12.505>find <00:02:12.785>their <00:02:13.065>documentation.

47
00:02:14.685 --> 00:02:17.965
<00:02:14.685>Tutorials. <00:02:14.840>How <00:02:14.996>to <00:02:15.151>start <00:02:15.307>is <00:02:15.462>a <00:02:15.618>very <00:02:15.773>good <00:02:15.929>starting <00:02:16.085>point

48
00:02:18.225 --> 00:02:20.645
<00:02:18.225>to <00:02:18.400>let <00:02:18.575>you <00:02:18.750>know <00:02:18.924>Astro <00:02:19.100>and <00:02:19.275>how <00:02:19.450>it <00:02:19.625>goes.

49
00:02:21.385 --> 00:02:24.005
<00:02:21.385>And, <00:02:21.560>and <00:02:21.734>also <00:02:21.910>you <00:02:22.084>can <00:02:22.260>find <00:02:22.435>there <00:02:22.609>all <00:02:22.785>destruction

50
00:02:24.005 --> 00:02:25.445
<00:02:24.005>to <00:02:24.264>start <00:02:24.523>contributing <00:02:24.782>to <00:02:25.041>the <00:02:25.301>project.

51
00:02:25.545 --> 00:02:27.205
<00:02:25.545>And <00:02:25.778>this <00:02:26.011>is, <00:02:26.245>please, <00:02:26.478>is <00:02:26.711>very <00:02:26.945>important

52
00:02:27.315 --> 00:02:31.605
<00:02:27.315>because <00:02:27.442>everyone <00:02:27.569>of <00:02:27.696>us <00:02:27.824>know <00:02:27.951>that <00:02:28.078>open <00:02:28.205>source <00:02:28.333>is <00:02:28.460>at <00:02:28.587>the <00:02:28.715>core

53
00:02:31.665 --> 00:02:34.765
<00:02:31.665>of <00:02:31.781>our <00:02:31.898>businesses, <00:02:32.015>is <00:02:32.131>at <00:02:32.248>the <00:02:32.364>core <00:02:32.481>of <00:02:32.598>what <00:02:32.715>we <00:02:32.831>do <00:02:32.948>every <00:02:33.065>day.

54
00:02:36.395 --> 00:02:38.805
<00:02:36.395>Okay, <00:02:36.595>so <00:02:36.795>we <00:02:36.995>introduced <00:02:37.195>a <00:02:37.395>bit <00:02:37.595>about <00:02:37.795>Astro,

55
00:02:38.825 --> 00:02:39.965
<00:02:38.825>but <00:02:39.081>what's <00:02:39.338>cool <00:02:39.594>about <00:02:39.851>it?

56
00:02:40.825 --> 00:02:42.925
<00:02:40.825>Uh, <00:02:41.105>this <00:02:41.385>is <00:02:41.665>a <00:02:41.945>bullet <00:02:42.225>point

57
00:02:43.835 --> 00:02:46.205
<00:02:43.835>with <00:02:44.035>the <00:02:44.235>main <00:02:44.435>features <00:02:44.635>I <00:02:44.835>like <00:02:45.035>about <00:02:45.235>Astro,

58
00:02:46.225 --> 00:02:49.085
<00:02:46.225>but <00:02:46.380>there <00:02:46.536>really, <00:02:46.691>there <00:02:46.847>is <00:02:47.002>a <00:02:47.158>much <00:02:47.313>more <00:02:47.469>about <00:02:47.625>it.

59
00:02:49.325 --> 00:02:52.885
<00:02:49.325>I <00:02:49.452>strongly, <00:02:49.579>again, <00:02:49.706>invite <00:02:49.834>you <00:02:49.961>to <00:02:50.088>do, <00:02:50.215>to <00:02:50.343>do <00:02:50.470>visit <00:02:50.597>the <00:02:50.725>website

60
00:02:53.065 --> 00:02:56.325
<00:02:53.065>to <00:02:53.240>understand <00:02:53.415>what's <00:02:53.590>behind <00:02:53.765>Astro <00:02:53.940>and <00:02:54.115>what's <00:02:54.290>going <00:02:54.465>on.

61
00:02:56.815 --> 00:03:00.085
<00:02:56.815>Astro <00:02:56.970>is <00:02:57.126>so <00:02:57.281>active <00:02:57.437>that <00:02:57.592>when <00:02:57.748>I <00:02:57.903>submitted <00:02:58.059>the <00:02:58.215>talk,

62
00:03:00.445 --> 00:03:03.485
<00:03:00.445>I <00:03:00.620>submitted <00:03:00.795>the <00:03:00.970>talk <00:03:01.144>with <00:03:01.320>the <00:03:01.495>title <00:03:01.670>Astro <00:03:01.845>4.0

63
00:03:04.105 --> 00:03:07.405
<00:03:04.105>and <00:03:04.260>I <00:03:04.416>prepared <00:03:04.571>the <00:03:04.727>slides <00:03:04.882>for <00:03:05.038>Astro <00:03:05.193>four <00:03:05.349>point <00:03:05.505>10.

64
00:03:07.745 --> 00:03:09.485
<00:03:07.745>And <00:03:08.025>today <00:03:08.305>I <00:03:08.585>discovered <00:03:08.865>we <00:03:09.145>are,

65
00:03:09.545 --> 00:03:12.045
<00:03:09.545>we <00:03:09.778>are <00:03:10.011>at <00:03:10.244>Astro <00:03:10.478>four <00:03:10.711>point, <00:03:10.945>11.5.

66
00:03:12.465 --> 00:03:15.885
<00:03:12.465>So <00:03:12.605>the, <00:03:12.745>the <00:03:12.885>community <00:03:13.025>is <00:03:13.165>going <00:03:13.305>forward <00:03:13.445>very <00:03:13.585>fast <00:03:13.725>about <00:03:13.865>it,

67
00:03:15.885 --> 00:03:18.925
<00:03:15.885>but <00:03:16.024>this <00:03:16.165>is, <00:03:16.304>these <00:03:16.445>are <00:03:16.584>the <00:03:16.725>main <00:03:16.864>points <00:03:17.005>you <00:03:17.144>should <00:03:17.285>consider

68
00:03:19.275 --> 00:03:22.885
<00:03:19.275>when <00:03:19.475>evaluating <00:03:19.675>Astro <00:03:19.875>as <00:03:20.075>your <00:03:20.275>next <00:03:20.475>starting <00:03:20.675>point

69
00:03:22.885 --> 00:03:24.685
<00:03:22.885>for <00:03:23.165>your <00:03:23.445>framework <00:03:23.725>for <00:03:24.005>your <00:03:24.285>projects.

70
00:03:24.985 --> 00:03:27.165
<00:03:24.985>So <00:03:25.335>Astro <00:03:25.685>is <00:03:26.035>UI <00:03:26.385>agnostic.

71
00:03:27.225 --> 00:03:29.645
<00:03:27.225>We <00:03:27.424>are <00:03:27.625>gonna <00:03:27.825>soon <00:03:28.025>discover <00:03:28.225>what <00:03:28.424>this <00:03:28.625>means

72
00:03:30.105 --> 00:03:31.525
<00:03:30.105>and <00:03:30.360>why <00:03:30.616>this <00:03:30.871>is <00:03:31.127>so <00:03:31.383>cool.

73
00:03:32.135 --> 00:03:35.365
<00:03:32.135>Astro <00:03:32.368>implements <00:03:32.601>the <00:03:32.834>concept <00:03:33.068>of <00:03:33.301>component <00:03:33.535>Iceland.

74
00:03:35.465 --> 00:03:37.205
<00:03:35.465>You <00:03:35.745>have <00:03:36.025>seen <00:03:36.305>the <00:03:36.585>previous <00:03:36.865>talk

75
00:03:38.025 --> 00:03:39.805
<00:03:38.025>and <00:03:38.305>in <00:03:38.585>other <00:03:38.865>talks <00:03:39.145>this <00:03:39.425>morning.

76
00:03:40.145 --> 00:03:42.725
<00:03:40.145>And <00:03:40.300>we <00:03:40.456>are <00:03:40.611>gonna <00:03:40.767>explore <00:03:40.922>a <00:03:41.078>bit <00:03:41.233>how <00:03:41.389>Astro <00:03:41.545>works.

77
00:03:43.145 --> 00:03:45.525
<00:03:43.145>And <00:03:43.320>the <00:03:43.495>cool <00:03:43.670>thing <00:03:43.845>about <00:03:44.020>Astro <00:03:44.195>Astro <00:03:44.370>is <00:03:44.545>a,

78
00:03:45.895 --> 00:03:48.005
<00:03:45.895>let's <00:03:46.175>call <00:03:46.455>it <00:03:46.735>a <00:03:47.015>JavaScript <00:03:47.295>framework,

79
00:03:48.425 --> 00:03:51.565
<00:03:48.425>but <00:03:48.658>it <00:03:48.891>serves <00:03:49.125>zero <00:03:49.358>JavaScript <00:03:49.591>by <00:03:49.825>default.

80
00:03:52.025 --> 00:03:53.125
<00:03:52.025>So <00:03:52.223>when <00:03:52.421>you <00:03:52.619>start <00:03:52.817>a <00:03:53.015>project

81
00:03:53.225 --> 00:03:56.525
<00:03:53.225>and <00:03:53.380>you <00:03:53.536>build <00:03:53.691>it, <00:03:53.847>uh, <00:03:54.002>if <00:03:54.158>you <00:03:54.313>don't, <00:03:54.469>uh, <00:03:54.625>uh,

82
00:03:57.005 --> 00:03:59.165
<00:03:57.005>configure <00:03:57.285>your <00:03:57.565>components <00:03:57.845>to <00:03:58.125>be <00:03:58.405>interactive,

83
00:03:59.695 --> 00:04:02.285
<00:03:59.695>Astro <00:03:59.975>will <00:04:00.255>build <00:04:00.535>just <00:04:00.815>plain <00:04:01.095>HTML

84
00:04:02.285 --> 00:04:03.925
<00:04:02.285>and <00:04:02.484>CSS <00:04:02.685>and <00:04:02.885>serve <00:04:03.085>it <00:04:03.285>to <00:04:03.484>the <00:04:03.685>users.

85
00:04:04.745 --> 00:04:08.845
<00:04:04.745>And <00:04:04.945>these <00:04:05.145>together <00:04:05.345>with <00:04:05.545>the <00:04:05.745>server <00:04:05.945>first <00:04:06.145>support

86
00:04:09.025 --> 00:04:11.805
<00:04:09.025>and, <00:04:09.305>uh, <00:04:09.585>other <00:04:09.865>features <00:04:10.145>like <00:04:10.425>optimizations

87
00:04:11.805 --> 00:04:15.205
<00:04:11.805>and <00:04:12.155>performance <00:04:12.505>optimization <00:04:12.855>optimizations <00:04:13.205>makes

88
00:04:16.295 --> 00:04:19.205
<00:04:16.295>Astro <00:04:16.528>fast <00:04:16.761>by <00:04:16.995>default, <00:04:17.228>Astro <00:04:17.461>super <00:04:17.695>fast.

89
00:04:19.265 --> 00:04:21.125
<00:04:19.265>We <00:04:19.440>are, <00:04:19.615>we <00:04:19.789>are <00:04:19.964>gonna <00:04:20.140>see <00:04:20.315>it <00:04:20.490>in <00:04:20.664>action.

90
00:04:21.965 --> 00:04:25.125
<00:04:21.964>I <00:04:22.120>proposed <00:04:22.276>fully <00:04:22.431>brought <00:04:22.587>a <00:04:22.742>very <00:04:22.898>old <00:04:23.053>computer <00:04:23.209>in <00:04:23.364>order

91
00:04:25.145 --> 00:04:28.245
<00:04:25.145>to <00:04:25.300>let <00:04:25.456>you <00:04:25.611>see <00:04:25.767>how <00:04:25.922>it <00:04:26.078>works <00:04:26.233>on <00:04:26.389>a <00:04:26.544>computer

92
00:04:28.345 --> 00:04:29.925
<00:04:28.345>of <00:04:28.695>almost <00:04:29.045>10 <00:04:29.395>years <00:04:29.745>ago.

93
00:04:31.545 --> 00:04:34.685
<00:04:31.545>And, <00:04:31.720>uh, <00:04:31.895>together <00:04:32.070>with <00:04:32.245>this, <00:04:32.420>there <00:04:32.595>is <00:04:32.770>a <00:04:32.945>lot

94
00:04:34.685 --> 00:04:35.805
<00:04:34.685>of <00:04:35.189>other <00:04:35.693>possibilities.

95
00:04:35.915 --> 00:04:37.325
<00:04:35.915>It's <00:04:36.232>easy <00:04:36.549>to <00:04:36.866>be <00:04:37.183>customized,

96
00:04:37.785 --> 00:04:41.325
<00:04:37.784>it <00:04:37.940>has <00:04:38.096>native <00:04:38.251>types <00:04:38.407>script <00:04:38.562>support, <00:04:38.718>failed <00:04:38.873>by <00:04:39.029>the <00:04:39.184>routing

97
00:04:42.005 --> 00:04:43.725
<00:04:42.005>prefetch, <00:04:42.355>a <00:04:42.705>lot <00:04:43.055>of <00:04:43.405>stuff.

98
00:04:44.175 --> 00:04:45.685
<00:04:44.175>Again, <00:04:44.628>visit <00:04:45.081>the <00:04:45.534>website.

99
00:04:45.745 --> 00:04:48.445
<00:04:45.745>So <00:04:45.920>we, <00:04:46.095>you <00:04:46.270>can <00:04:46.445>have <00:04:46.620>a <00:04:46.795>look <00:04:46.970>about <00:04:47.145>our,

100
00:04:48.585 --> 00:04:49.845
<00:04:48.585>our <00:04:48.868>what <00:04:49.152>I'm <00:04:49.435>talking <00:04:49.719>about.

101
00:04:50.235 --> 00:04:51.885
<00:04:50.235>Okay, <00:04:50.468>let's <00:04:50.701>start <00:04:50.935>with <00:04:51.168>a <00:04:51.401>little <00:04:51.635>demo.

102
00:04:54.695 --> 00:04:59.485
<00:04:54.695>Okay? <00:04:55.395>I'm <00:04:56.094>gonna

103
00:04:59.595 --> 00:05:02.605
<00:04:59.595>show <00:04:59.828>you <00:05:00.061>our <00:05:00.295>Astro <00:05:00.528>project <00:05:00.761>is <00:05:00.995>structured.

104
00:05:04.785 --> 00:05:09.145
<00:05:04.785>I <00:05:04.940>guess <00:05:05.096>I <00:05:05.251>need <00:05:05.407>to <00:05:05.562>zoom <00:05:05.718>a <00:05:05.873>bit <00:05:06.029>more, <00:05:06.185>sorry.

105
00:05:10.895 --> 00:05:12.705
<00:05:10.895>Okay, <00:05:11.174>this <00:05:11.455>is <00:05:11.734>an <00:05:12.015>Astro <00:05:12.294>project

106
00:05:12.845 --> 00:05:14.385
<00:05:12.845>and <00:05:13.043>this <00:05:13.241>is <00:05:13.439>gonna <00:05:13.637>be <00:05:13.835>the <00:05:14.033>Astro <00:05:14.231>project.

107
00:05:14.485 --> 00:05:17.905
<00:05:14.485>And <00:05:14.685>I'm <00:05:14.885>gonna <00:05:15.085>work, <00:05:15.285>uh, <00:05:15.485>during <00:05:15.685>our <00:05:15.885>talk.

108
00:05:18.445 --> 00:05:19.585
<00:05:18.445>As <00:05:18.650>you <00:05:18.855>can <00:05:19.060>see, <00:05:19.265>the <00:05:19.471>full,

109
00:05:19.925 --> 00:05:21.865
<00:05:19.925>the <00:05:20.205>folder <00:05:20.485>structure <00:05:20.765>is <00:05:21.045>pretty <00:05:21.325>simple.

110
00:05:22.445 --> 00:05:23.905
<00:05:22.445>You <00:05:22.773>have <00:05:23.102>a <00:05:23.430>config <00:05:23.758>file.

111
00:05:24.565 --> 00:05:27.105
<00:05:24.565>We <00:05:24.720>are <00:05:24.876>going <00:05:25.031>to <00:05:25.187>talk <00:05:25.342>about <00:05:25.498>this <00:05:25.653>a <00:05:25.809>bit <00:05:25.965>later,

112
00:05:27.365 --> 00:05:29.825
<00:05:27.365>and <00:05:27.565>you <00:05:27.765>can <00:05:27.965>find <00:05:28.165>documentation <00:05:28.365>on <00:05:28.565>the <00:05:28.765>website.

113
00:05:30.925 --> 00:05:34.265
<00:05:30.925>And <00:05:31.158>then <00:05:31.391>you <00:05:31.625>have <00:05:31.858>a <00:05:32.091>public <00:05:32.325>folder

114
00:05:34.435 --> 00:05:37.705
<00:05:34.435>where <00:05:34.575>you <00:05:34.715>will <00:05:34.855>have <00:05:34.995>all <00:05:35.135>the <00:05:35.275>static <00:05:35.415>assets <00:05:35.555>for <00:05:35.695>your <00:05:35.835>website.

115
00:05:38.085 --> 00:05:41.705
<00:05:38.085>And <00:05:38.240>then <00:05:38.396>where <00:05:38.551>the <00:05:38.707>magic <00:05:38.862>happens <00:05:39.018>is <00:05:39.173>the <00:05:39.329>SSC <00:05:39.484>folder.

116
00:05:42.605 --> 00:05:45.385
<00:05:42.605>In <00:05:42.745>the <00:05:42.885>SC <00:05:43.025>folder, <00:05:43.165>you <00:05:43.305>can <00:05:43.445>structure <00:05:43.585>it <00:05:43.725>how <00:05:43.865>you <00:05:44.005>want,

117
00:05:46.005 --> 00:05:49.385
<00:05:46.005>but <00:05:46.180>important <00:05:46.355>part <00:05:46.530>is <00:05:46.705>the <00:05:46.880>page, <00:05:47.055>the <00:05:47.230>pages <00:05:47.405>folder.

118
00:05:49.725 --> 00:05:53.185
<00:05:49.725>The <00:05:49.865>pages <00:05:50.005>folder <00:05:50.145>is <00:05:50.285>where <00:05:50.425>you <00:05:50.565>put <00:05:50.705>your, <00:05:50.845>uh, <00:05:50.985>let's <00:05:51.125>say,

119
00:05:53.195 --> 00:05:54.745
<00:05:53.195>let's <00:05:53.543>call <00:05:53.892>them <00:05:54.241>main <00:05:54.590>files

120
00:05:55.235 --> 00:05:57.365
<00:05:55.235>where <00:05:55.435>you <00:05:55.635>have <00:05:55.835>the <00:05:56.035>content <00:05:56.235>of <00:05:56.435>your <00:05:56.635>website.

121
00:05:57.655 --> 00:05:59.725
<00:05:57.655>Every <00:05:57.888>astro <00:05:58.121>file <00:05:58.354>has <00:05:58.588>a <00:05:58.821>front <00:05:59.054>matter.

122
00:06:00.785 --> 00:06:03.045
<00:06:00.785>If <00:06:00.985>you <00:06:01.185>used <00:06:01.385>the <00:06:01.585>jack <00:06:01.785>in <00:06:01.985>the <00:06:02.185>past

123
00:06:03.785 --> 00:06:05.525
<00:06:03.785>is <00:06:04.018>more <00:06:04.251>like <00:06:04.485>the <00:06:04.718>Jackie <00:06:04.951>Front <00:06:05.185>matter,

124
00:06:05.625 --> 00:06:08.885
<00:06:05.625>but <00:06:05.780>with <00:06:05.936>steroids, <00:06:06.091>let's <00:06:06.247>call <00:06:06.402>it, <00:06:06.558>let's <00:06:06.713>say <00:06:06.869>like <00:06:07.025>this.

125
00:06:09.985 --> 00:06:12.405
<00:06:09.985>And <00:06:10.160>then <00:06:10.335>you <00:06:10.510>have <00:06:10.685>the <00:06:10.860>markdown <00:06:11.035>for <00:06:11.210>your <00:06:11.385>template.

126
00:06:12.985 --> 00:06:15.965
<00:06:12.985>In <00:06:13.160>this <00:06:13.335>case, <00:06:13.510>I'm <00:06:13.685>using, <00:06:13.860>I'm <00:06:14.035>using <00:06:14.210>a <00:06:14.385>template,

127
00:06:16.365 --> 00:06:21.125
<00:06:16.365>a <00:06:16.505>template <00:06:16.645>called <00:06:16.785>the <00:06:16.925>Page <00:06:17.065>where <00:06:17.205>I <00:06:17.345>put, <00:06:17.485>uh, <00:06:17.625>all <00:06:17.765>the,

128
00:06:21.215 --> 00:06:24.085
<00:06:21.215>let's <00:06:21.390>say <00:06:21.565>the <00:06:21.739>boring <00:06:21.914>part <00:06:22.090>of <00:06:22.265>my <00:06:22.440>HTML <00:06:22.614>file,

129
00:06:24.115 --> 00:06:26.245
<00:06:24.115>like <00:06:24.395>the <00:06:24.675>dog <00:06:24.955>type, <00:06:25.235>the <00:06:25.515>other,

130
00:06:26.825 --> 00:06:30.445
<00:06:26.825>and <00:06:27.000>this <00:06:27.175>small <00:06:27.349>component <00:06:27.525>that <00:06:27.700>it's <00:06:27.875>called <00:06:28.050>the <00:06:28.224>slot,

131
00:06:30.455 --> 00:06:34.325
<00:06:30.455>which <00:06:30.610>is <00:06:30.766>at <00:06:30.921>the <00:06:31.077>base <00:06:31.232>of <00:06:31.388>a <00:06:31.543>layer <00:06:31.699>layout <00:06:31.854>system.

132
00:06:34.825 --> 00:06:38.965
<00:06:34.825>So <00:06:34.965>whenever <00:06:35.104>you <00:06:35.245>have <00:06:35.385>a <00:06:35.525>slot <00:06:35.664>tag <00:06:35.805>here, <00:06:35.945>you <00:06:36.085>will <00:06:36.224>replace

133
00:06:40.195 --> 00:06:42.525
<00:06:40.195>this <00:06:40.428>with <00:06:40.661>the <00:06:40.895>content <00:06:41.128>of <00:06:41.361>the <00:06:41.594>page

134
00:06:42.525 --> 00:06:44.125
<00:06:42.525>that <00:06:42.875>is <00:06:43.224>using <00:06:43.575>your <00:06:43.924>template.

135
00:06:44.265 --> 00:06:46.525
<00:06:44.265>So <00:06:44.440>we <00:06:44.615>have <00:06:44.789>the <00:06:44.965>page <00:06:45.140>template, <00:06:45.315>as <00:06:45.490>I <00:06:45.664>said,

136
00:06:46.985 --> 00:06:50.405
<00:06:46.985>and <00:06:47.112>we <00:06:47.239>have <00:06:47.366>the <00:06:47.494>index <00:06:47.621>page <00:06:47.748>and <00:06:47.875>we <00:06:48.003>use <00:06:48.130>the <00:06:48.257>page <00:06:48.385>template.

137
00:06:50.465 --> 00:06:54.445
<00:06:50.465>Inside <00:06:50.745>everything <00:06:51.025>here <00:06:51.305>will <00:06:51.585>be <00:06:51.865>put

138
00:06:55.705 --> 00:06:58.245
<00:06:55.705>as <00:06:55.938>a <00:06:56.171>replacement <00:06:56.405>of <00:06:56.638>the <00:06:56.871>slot <00:06:57.104>tag.

139
00:06:58.315 --> 00:07:02.725
<00:06:58.315>Here <00:06:58.470>you <00:06:58.626>can <00:06:58.781>have <00:06:58.937>markdown, <00:06:59.092>HTML <00:06:59.248>React <00:06:59.403>components <00:06:59.559>as <00:06:59.715>well.

140
00:07:02.725 --> 00:07:05.325
<00:07:02.725>Components <00:07:02.880>we're <00:07:03.036>gonna <00:07:03.191>soon <00:07:03.347>discover <00:07:03.502>a <00:07:03.658>bit <00:07:03.813>more <00:07:03.969>about <00:07:04.125>this

141
00:07:06.825 --> 00:07:10.365
<00:07:06.825>and <00:07:07.000>you <00:07:07.175>can <00:07:07.349>structure <00:07:07.525>your <00:07:07.700>components <00:07:07.875>whenever <00:07:08.050>you <00:07:08.224>want.

142
00:07:10.425 --> 00:07:13.685
<00:07:10.425>The <00:07:10.658>important <00:07:10.891>folder <00:07:11.125>is <00:07:11.358>the <00:07:11.591>pages <00:07:11.825>folder.

143
00:07:14.385 --> 00:07:15.925
<00:07:14.385>And <00:07:14.662>in <00:07:14.939>the <00:07:15.216>pages <00:07:15.493>folder <00:07:15.771>you,

144
00:07:15.945 --> 00:07:19.325
<00:07:15.945>you <00:07:16.120>basically <00:07:16.295>gonna <00:07:16.469>create <00:07:16.645>the <00:07:16.820>routing <00:07:16.995>for <00:07:17.170>your <00:07:17.344>application.

145
00:07:19.755 --> 00:07:24.205
<00:07:19.755>This <00:07:19.871>is <00:07:19.988>the <00:07:20.105>index <00:07:20.221>file <00:07:20.338>I <00:07:20.455>show <00:07:20.571>you <00:07:20.688>just <00:07:20.805>a <00:07:20.921>second <00:07:21.038>ago <00:07:21.155>when

146
00:07:24.205 --> 00:07:26.525
<00:07:24.205>there <00:07:24.380>is <00:07:24.555>a <00:07:24.729>little <00:07:24.905>react <00:07:25.080>component <00:07:25.255>with <00:07:25.430>a <00:07:25.604>counter.

147
00:07:27.265 --> 00:07:30.925
<00:07:27.265>And <00:07:27.465>since <00:07:27.664>we <00:07:27.865>have <00:07:28.065>the, <00:07:28.265>in <00:07:28.465>the <00:07:28.664>code,

148
00:07:31.185 --> 00:07:34.845
<00:07:31.185>the <00:07:31.418>lo <00:07:31.651>astro <00:07:31.885>file <00:07:32.118>astro <00:07:32.351>will <00:07:32.585>map

149
00:07:35.395 --> 00:07:38.605
<00:07:35.395>this <00:07:35.628>page <00:07:35.861>at <00:07:36.094>the <00:07:36.328>slash <00:07:36.561>lo <00:07:36.794>address.

150
00:07:39.905 --> 00:07:43.325
<00:07:39.905>So <00:07:40.060>let's, <00:07:40.216>let's <00:07:40.371>try, <00:07:40.527>so <00:07:40.682>this <00:07:40.838>is <00:07:40.993>my <00:07:41.149>local <00:07:41.304>list

151
00:07:43.665 --> 00:07:47.245
<00:07:43.665>and <00:07:43.772>if <00:07:43.880>I <00:07:43.988>go <00:07:44.095>to <00:07:44.203>slash <00:07:44.311>law, <00:07:44.418>we <00:07:44.526>are <00:07:44.634>gonna <00:07:44.741>see <00:07:44.849>a <00:07:44.957>different <00:07:45.065>page.

152
00:07:47.865 --> 00:07:49.445
<00:07:47.865>If <00:07:48.215>I <00:07:48.565>rename <00:07:48.915>the <00:07:49.265>file,

153
00:07:53.205 --> 00:07:58.065
<00:07:53.205>Rena, <00:07:53.360>This <00:07:53.516>will <00:07:53.671>go <00:07:53.827>on <00:07:53.982>4 <00:07:54.138>0 <00:07:54.293>4 <00:07:54.449>of <00:07:54.604>course

154
00:07:58.095 --> 00:07:59.505
<00:07:58.095>because <00:07:58.729>it's <00:07:59.364>rebuilt,

155
00:08:00.125 --> 00:08:03.265
<00:08:00.125>but <00:08:00.280>it <00:08:00.436>will <00:08:00.591>be <00:08:00.747>served <00:08:00.902>at <00:08:01.058>the <00:08:01.213>new <00:08:01.369>route <00:08:01.525>defined.

156
00:08:04.125 --> 00:08:05.705
<00:08:04.125>So <00:08:04.405>this <00:08:04.685>is <00:08:04.965>easy <00:08:05.245>for <00:08:05.525>you.

157
00:08:05.925 --> 00:08:08.825
<00:08:05.925>You <00:08:06.080>can <00:08:06.236>also <00:08:06.391>have <00:08:06.547>dynamic <00:08:06.702>right <00:08:06.858>routing, <00:08:07.013>of <00:08:07.169>course <00:08:07.325>passing

158
00:08:09.435 --> 00:08:12.465
<00:08:09.435>parameters <00:08:09.901>to <00:08:10.368>your <00:08:10.835>URLs.

159
00:08:13.205 --> 00:08:16.665
<00:08:13.205>So <00:08:13.380>you <00:08:13.555>will <00:08:13.729>have, <00:08:13.905>uh, <00:08:14.080>like <00:08:14.255>next <00:08:14.430>js <00:08:14.604>more

160
00:08:16.665 --> 00:08:19.785
<00:08:16.665>or <00:08:16.820>less, <00:08:16.976>you <00:08:17.131>will <00:08:17.287>have <00:08:17.442>the <00:08:17.598>possibility <00:08:17.753>to <00:08:17.909>pass <00:08:18.065>parameters

161
00:08:19.785 --> 00:08:21.785
<00:08:19.785>to <00:08:20.065>your <00:08:20.345>component <00:08:20.625>and <00:08:20.905>serve <00:08:21.185>them

162
00:08:21.845 --> 00:08:24.545
<00:08:21.845>as <00:08:22.045>variables <00:08:22.245>into <00:08:22.445>the <00:08:22.645>pages <00:08:22.845>you're <00:08:23.045>looking <00:08:23.245>for.

163
00:08:25.495 --> 00:08:27.025
<00:08:25.495>Okay, <00:08:25.839>back <00:08:26.183>to <00:08:26.527>the <00:08:26.871>slides.

164
00:08:32.675 --> 00:08:36.245
<00:08:32.674>Okay, <00:08:32.814>first <00:08:32.954>point <00:08:33.094>of <00:08:33.234>that <00:08:33.375>bullet <00:08:33.515>list <00:08:33.655>we <00:08:33.794>were <00:08:33.934>looking <00:08:34.074>at

165
00:08:36.245 --> 00:08:38.565
<00:08:36.245>before, <00:08:36.595>Astro <00:08:36.945>is <00:08:37.294>UI <00:08:37.645>agnostic.

166
00:08:38.995 --> 00:08:42.405
<00:08:38.995>What <00:08:39.195>does <00:08:39.395>it <00:08:39.595>mean? <00:08:39.794>Astro <00:08:39.995>has <00:08:40.195>integrated <00:08:40.395>support

167
00:08:42.425 --> 00:08:47.205
<00:08:42.424>for <00:08:42.625>many <00:08:42.824>frameworks <00:08:43.025>like <00:08:43.224>React, <00:08:43.424>react <00:08:43.625>Belt, <00:08:43.824>HTMX,

168
00:08:47.585 --> 00:08:49.405
<00:08:47.585>and <00:08:47.818>many <00:08:48.051>more, <00:08:48.285>even <00:08:48.518>all <00:08:48.751>at <00:08:48.985>once.

169
00:08:49.785 --> 00:08:54.485
<00:08:49.785>So <00:08:49.912>this <00:08:50.039>means <00:08:50.166>that <00:08:50.294>you <00:08:50.421>can <00:08:50.548>use, <00:08:50.675>I <00:08:50.803>strongly <00:08:50.930>suggest <00:08:51.057>you <00:08:51.185>not

170
00:08:54.485 --> 00:08:57.045
<00:08:54.485>to <00:08:54.592>do <00:08:54.700>it, <00:08:54.808>at <00:08:54.915>least <00:08:55.023>you <00:08:55.131>have <00:08:55.238>a <00:08:55.346>very <00:08:55.454>good <00:08:55.561>reason <00:08:55.669>to <00:08:55.777>do <00:08:55.885>that.

171
00:08:57.785 --> 00:08:59.045
<00:08:57.785>You <00:08:58.068>can <00:08:58.352>use <00:08:58.635>it, <00:08:58.919>uh,

172
00:08:59.105 --> 00:09:02.725
<00:08:59.105>you <00:08:59.260>can <00:08:59.416>use <00:08:59.571>Reactance <00:08:59.727>weld <00:08:59.882>together <00:09:00.038>in <00:09:00.193>a <00:09:00.349>single <00:09:00.505>page

173
00:09:03.585 --> 00:09:07.165
<00:09:03.585>by <00:09:03.785>leveraging <00:09:03.985>the, <00:09:04.185>the <00:09:04.385>the <00:09:04.585>astro <00:09:04.785>uh, <00:09:04.985>features.

174
00:09:07.455 --> 00:09:09.965
<00:09:07.455>There <00:09:07.582>is <00:09:07.709>no <00:09:07.836>need <00:09:07.964>for <00:09:08.091>you <00:09:08.218>then <00:09:08.345>to <00:09:08.473>learn <00:09:08.600>a <00:09:08.727>new <00:09:08.855>framework.

175
00:09:10.025 --> 00:09:11.685
<00:09:10.025>You <00:09:10.258>can <00:09:10.491>use <00:09:10.725>whatever <00:09:10.958>you <00:09:11.191>know <00:09:11.425>already,

176
00:09:12.145 --> 00:09:16.485
<00:09:12.145>or <00:09:12.285>we <00:09:12.425>can <00:09:12.564>even <00:09:12.704>use <00:09:12.845>just <00:09:12.985>markdown <00:09:13.125>to <00:09:13.265>build <00:09:13.405>your <00:09:13.545>website

177
00:09:16.485 --> 00:09:19.085
<00:09:16.485>because <00:09:16.718>Astro <00:09:16.951>has <00:09:17.185>native <00:09:17.418>support <00:09:17.651>for <00:09:17.885>markdown.

178
00:09:20.065 --> 00:09:21.365
<00:09:20.065>And <00:09:20.299>you <00:09:20.533>can <00:09:20.767>create <00:09:21.001>your <00:09:21.235>content.

179
00:09:21.575 --> 00:09:26.085
<00:09:21.575>Let's <00:09:21.730>think <00:09:21.886>about <00:09:22.041>a <00:09:22.197>documentation <00:09:22.352>website <00:09:22.508>when <00:09:22.663>you <00:09:22.819>just <00:09:22.975>need

180
00:09:26.105 --> 00:09:28.245
<00:09:26.105>to <00:09:26.385>give <00:09:26.665>out <00:09:26.945>to <00:09:27.225>the <00:09:27.505>users.

181
00:09:28.645 --> 00:09:32.045
<00:09:28.645>HTML. <00:09:28.845>You <00:09:29.045>can <00:09:29.245>just <00:09:29.444>make <00:09:29.645>people <00:09:29.845>write <00:09:30.045>markdown

182
00:09:32.425 --> 00:09:34.805
<00:09:32.425>or <00:09:32.580>convert <00:09:32.736>the <00:09:32.891>documents <00:09:33.047>you <00:09:33.202>already <00:09:33.358>have <00:09:33.513>to <00:09:33.669>mark <00:09:33.824>down,

183
00:09:35.115 --> 00:09:38.965
<00:09:35.115>like <00:09:35.255>using <00:09:35.395>panoc <00:09:35.535>or <00:09:35.675>any <00:09:35.815>other <00:09:35.955>tool <00:09:36.095>that <00:09:36.235>this <00:09:36.375>like <00:09:36.515>that.

184
00:09:39.425 --> 00:09:42.965
<00:09:39.425>And <00:09:39.564>you <00:09:39.704>can <00:09:39.844>just <00:09:39.984>serve <00:09:40.125>in <00:09:40.265>a <00:09:40.405>website <00:09:40.545>them <00:09:40.685>with <00:09:40.824>Astro.

185
00:09:43.405 --> 00:09:46.325
<00:09:43.405>I <00:09:43.579>strongly <00:09:43.755>suggest <00:09:43.930>you <00:09:44.105>to <00:09:44.280>visit <00:09:44.454>the <00:09:44.630>astro.new <00:09:44.805>website,

186
00:09:46.425 --> 00:09:51.165
<00:09:46.425>and <00:09:46.552>I <00:09:46.679>will <00:09:46.806>show <00:09:46.934>you <00:09:47.061>it <00:09:47.188>to <00:09:47.315>you <00:09:47.443>where <00:09:47.570>you <00:09:47.697>can <00:09:47.824>find

187
00:09:52.405 --> 00:09:56.725
<00:09:52.405>a <00:09:52.755>lot <00:09:53.105>of <00:09:53.454>starter <00:09:53.805>templates

188
00:10:00.485 --> 00:10:03.175
<00:10:00.485>with, <00:10:00.835>with <00:10:01.185>already <00:10:01.535>good <00:10:01.885>templates

189
00:10:03.195 --> 00:10:05.135
<00:10:03.195>or <00:10:03.545>a <00:10:03.895>portfolio <00:10:04.245>example <00:10:04.595>website.

190
00:10:05.135 --> 00:10:06.855
<00:10:05.135>There <00:10:05.485>are <00:10:05.835>many, <00:10:06.185>many <00:10:06.535>more.

191
00:10:06.915 --> 00:10:09.655
<00:10:06.915>You <00:10:07.115>have <00:10:07.314>teams, <00:10:07.515>you <00:10:07.714>have, <00:10:07.915>uh, <00:10:08.115>the <00:10:08.314>possibility

192
00:10:09.655 --> 00:10:13.815
<00:10:09.655>to <00:10:09.829>use <00:10:10.005>different <00:10:10.180>frameworks, <00:10:10.355>like <00:10:10.530>I <00:10:10.704>said, <00:10:10.880>like <00:10:11.055>well

193
00:10:13.915 --> 00:10:17.455
<00:10:13.915>to <00:10:14.148>little <00:10:14.381>solid, <00:10:14.615>et <00:10:14.848>cetera, <00:10:15.081>et <00:10:15.314>cetera.

194
00:10:18.475 --> 00:10:23.215
<00:10:18.475>So <00:10:18.602>back <00:10:18.729>to <00:10:18.856>our <00:10:18.984>slides, <00:10:19.111>as <00:10:19.238>I <00:10:19.365>said, <00:10:19.493>Astro <00:10:19.620>is <00:10:19.747>UI <00:10:19.875>agnostic

195
00:10:23.315 --> 00:10:24.655
<00:10:23.315>and <00:10:23.616>that <00:10:23.918>this <00:10:24.219>is <00:10:24.521>important

196
00:10:25.285 --> 00:10:29.695
<00:10:25.285>because <00:10:25.564>of <00:10:25.844>the <00:10:26.125>next <00:10:26.405>slide, <00:10:26.685>Astro

197
00:10:29.795 --> 00:10:30.935
<00:10:29.795>of <00:10:30.308>Component <00:10:30.820>Island.

198
00:10:31.125 --> 00:10:34.095
<00:10:31.125>What, <00:10:31.265>what <00:10:31.405>does <00:10:31.545>it <00:10:31.685>mean? <00:10:31.825>What, <00:10:31.965>what <00:10:32.105>is <00:10:32.245>a <00:10:32.385>component <00:10:32.525>island?

199
00:10:34.095 --> 00:10:37.615
<00:10:34.095>Basically <00:10:34.270>you <00:10:34.445>can, <00:10:34.620>you <00:10:34.795>can <00:10:34.970>divide <00:10:35.145>usually <00:10:35.320>your <00:10:35.495>page

200
00:10:38.315 --> 00:10:39.815
<00:10:38.315>in <00:10:38.765>many <00:10:39.215>different <00:10:39.665>blocks.

201
00:10:40.635 --> 00:10:42.375
<00:10:40.635>And, <00:10:40.790>and <00:10:40.946>if <00:10:41.101>you <00:10:41.257>think <00:10:41.412>of <00:10:41.568>it, <00:10:41.723>there <00:10:41.879>are <00:10:42.035>blocks

202
00:10:42.375 --> 00:10:47.255
<00:10:42.375>that <00:10:42.530>never <00:10:42.686>changed, <00:10:42.841>that <00:10:42.997>never <00:10:43.152>get, <00:10:43.308>uh, <00:10:43.463>updated, <00:10:43.619>uh, <00:10:43.775>like

203
00:10:47.315 --> 00:10:51.255
<00:10:47.315>for <00:10:47.442>example, <00:10:47.569>an <00:10:47.696>another <00:10:47.824>or <00:10:47.951>a <00:10:48.078>sidebar <00:10:48.205>with <00:10:48.333>a <00:10:48.460>set <00:10:48.587>of <00:10:48.715>links

204
00:10:52.075 --> 00:10:53.215
<00:10:52.075>or <00:10:52.417>just <00:10:52.759>a <00:10:53.101>text.

205
00:10:53.635 --> 00:10:55.495
<00:10:53.635>But <00:10:53.868>you <00:10:54.101>can <00:10:54.335>also <00:10:54.568>have, <00:10:54.801>uh, <00:10:55.035>blocks

206
00:10:55.495 --> 00:10:59.095
<00:10:55.495>that <00:10:55.775>are <00:10:56.055>currently <00:10:56.335>updated, <00:10:56.615>needed <00:10:56.895>interactions

207
00:10:59.095 --> 00:11:03.335
<00:10:59.095>with <00:10:59.270>the <00:10:59.445>users, <00:10:59.620>or <00:10:59.795>they <00:10:59.970>receive, <00:11:00.145>uh, <00:11:00.320>API <00:11:00.495>results

208
00:11:03.355 --> 00:11:04.575
<00:11:03.355>and <00:11:03.721>updated <00:11:04.087>their <00:11:04.453>content.

209
00:11:04.955 --> 00:11:07.695
<00:11:04.955>So <00:11:05.305>Astro <00:11:05.655>for <00:11:06.005>performance <00:11:06.355>reason,

210
00:11:08.425 --> 00:11:10.015
<00:11:08.425>we'll <00:11:08.775>just <00:11:09.125>load <00:11:09.474>the <00:11:09.824>JavaScript

211
00:11:10.115 --> 00:11:11.855
<00:11:10.115>for <00:11:10.395>the <00:11:10.675>components <00:11:10.955>that <00:11:11.235>need <00:11:11.515>it.

212
00:11:12.395 --> 00:11:14.855
<00:11:12.395>So <00:11:12.628>we <00:11:12.861>will <00:11:13.095>see <00:11:13.328>an <00:11:13.561>example <00:11:13.795>soon.

213
00:11:15.195 --> 00:11:17.375
<00:11:15.195>But <00:11:15.428>imagine <00:11:15.661>the, <00:11:15.895>the <00:11:16.128>possibilities <00:11:16.361>with <00:11:16.595>this.

214
00:11:17.375 --> 00:11:20.695
<00:11:17.375>You <00:11:17.530>can <00:11:17.686>define <00:11:17.841>for <00:11:17.997>each <00:11:18.152>block <00:11:18.308>of <00:11:18.463>your <00:11:18.619>page <00:11:18.775>how

215
00:11:20.835 --> 00:11:24.215
<00:11:20.835>and <00:11:21.010>what <00:11:21.185>render <00:11:21.360>if <00:11:21.535>they <00:11:21.710>need <00:11:21.885>JavaScript <00:11:22.060>or <00:11:22.235>not.

216
00:11:25.075 --> 00:11:27.975
<00:11:25.075>And <00:11:25.250>this <00:11:25.425>is <00:11:25.600>supported <00:11:25.775>by <00:11:25.950>Astro <00:11:26.125>with <00:11:26.300>parallel <00:11:26.475>loading

217
00:11:27.975 --> 00:11:30.655
<00:11:27.975>of <00:11:28.208>different <00:11:28.441>components <00:11:28.675>in <00:11:28.908>the <00:11:29.141>selective <00:11:29.375>rendering.

218
00:11:31.195 --> 00:11:33.615
<00:11:31.195>We <00:11:31.370>have <00:11:31.545>seen <00:11:31.720>something <00:11:31.895>similar <00:11:32.070>in <00:11:32.245>the <00:11:32.420>previous <00:11:32.595>talk,

219
00:11:34.195 --> 00:11:38.975
<00:11:34.195>but <00:11:34.370>you <00:11:34.545>can, <00:11:34.720>uh, <00:11:34.895>with <00:11:35.070>a <00:11:35.245>lot <00:11:35.420>of <00:11:35.595>granularity

220
00:11:40.035 --> 00:11:42.215
<00:11:40.035>manage <00:11:40.314>this <00:11:40.594>inside <00:11:40.875>an <00:11:41.155>Astro <00:11:41.435>application.

221
00:11:42.535 --> 00:11:44.775
<00:11:42.535>I <00:11:42.662>put <00:11:42.789>a <00:11:42.916>link <00:11:43.044>in <00:11:43.171>the <00:11:43.298>slide, <00:11:43.425>the <00:11:43.553>end <00:11:43.680>of <00:11:43.807>the <00:11:43.935>slide

222
00:11:44.775 --> 00:11:47.335
<00:11:44.775>where <00:11:45.055>the <00:11:45.334>Iceland <00:11:45.615>architecture <00:11:45.895>is <00:11:46.175>described

223
00:11:48.035 --> 00:11:49.935
<00:11:48.035>in <00:11:48.314>a <00:11:48.594>bit <00:11:48.875>more <00:11:49.155>deeper <00:11:49.435>way.

224
00:11:50.915 --> 00:11:52.775
<00:11:50.915>So <00:11:51.265>let's <00:11:51.615>see <00:11:51.964>an <00:11:52.314>example.

225
00:11:53.425 --> 00:11:56.045
<00:11:53.425>Uh, <00:11:53.580>you <00:11:53.736>have <00:11:53.891>seen <00:11:54.047>this <00:11:54.202>code <00:11:54.358>already <00:11:54.513>in <00:11:54.669>my, <00:11:54.824>uh,

226
00:11:56.465 --> 00:12:00.125
<00:11:56.465>in <00:11:56.592>my <00:11:56.719>Visa <00:11:56.846>studio <00:11:56.974>code, <00:11:57.101>and <00:11:57.228>we <00:11:57.355>are <00:11:57.483>gonna <00:11:57.610>change <00:11:57.737>it <00:11:57.865>soon,

227
00:12:00.545 --> 00:12:03.885
<00:12:00.545>but <00:12:00.778>it <00:12:01.011>works <00:12:01.245>with <00:12:01.478>client <00:12:01.711>direct <00:12:01.944>directives.

228
00:12:04.345 --> 00:12:07.245
<00:12:04.345>We <00:12:04.545>tell <00:12:04.745>with <00:12:04.945>client <00:12:05.145>directives <00:12:05.345>if <00:12:05.545>a <00:12:05.745>component

229
00:12:07.345 --> 00:12:08.805
<00:12:07.345>should <00:12:07.673>hydrate <00:12:08.002>on <00:12:08.330>a <00:12:08.659>page.

230
00:12:08.805 --> 00:12:12.485
<00:12:08.805>So <00:12:08.979>if <00:12:09.155>it <00:12:09.329>should <00:12:09.505>execute <00:12:09.680>the <00:12:09.854>JavaScript, <00:12:10.030>let's <00:12:10.204>say

231
00:12:13.435 --> 00:12:15.245
<00:12:13.435>that <00:12:13.785>is <00:12:14.135>associated <00:12:14.484>to <00:12:14.834>it

232
00:12:15.865 --> 00:12:18.485
<00:12:15.865>and <00:12:16.215>rendered <00:12:16.565>with <00:12:16.915>with <00:12:17.265>it.

233
00:12:18.555 --> 00:12:20.645
<00:12:18.555>Otherwise, <00:12:18.788>Astro <00:12:19.021>will <00:12:19.255>treat, <00:12:19.488>as <00:12:19.721>we <00:12:19.954>said,

234
00:12:20.645 --> 00:12:22.645
<00:12:20.645>there <00:12:20.995>is <00:12:21.345>zero <00:12:21.694>JavaScript <00:12:22.045>configuration.

235
00:12:23.025 --> 00:12:25.645
<00:12:23.025>We <00:12:23.258>treat <00:12:23.491>it <00:12:23.725>as <00:12:23.958>static <00:12:24.191>HTML, <00:12:24.425>uh,

236
00:12:25.645 --> 00:12:27.325
<00:12:25.645>with <00:12:25.995>no <00:12:26.345>JavaScript <00:12:26.694>by <00:12:27.045>default.

237
00:12:28.335 --> 00:12:30.605
<00:12:28.335>Again, <00:12:28.801>this <00:12:29.268>is, <00:12:29.735>uh,

238
00:12:30.715 --> 00:12:33.485
<00:12:30.715>done <00:12:30.948>using <00:12:31.181>a <00:12:31.415>concept <00:12:31.648>called <00:12:31.881>partial <00:12:32.115>hydration.

239
00:12:34.025 --> 00:12:37.445
<00:12:34.025>We, <00:12:34.375>we <00:12:34.725>only <00:12:35.074>select, <00:12:35.425>uh,

240
00:12:37.755 --> 00:12:39.645
<00:12:37.755>what <00:12:38.105>components <00:12:38.455>should <00:12:38.805>render <00:12:39.155>code,

241
00:12:40.025 --> 00:12:43.245
<00:12:40.025>and <00:12:40.165>we <00:12:40.305>select, <00:12:40.444>we <00:12:40.584>can <00:12:40.725>select <00:12:40.865>if <00:12:41.005>the <00:12:41.145>components <00:12:41.285>should <00:12:41.425>be

242
00:12:43.245 --> 00:12:45.685
<00:12:43.245>rendered <00:12:43.420>with <00:12:43.595>JavaScript <00:12:43.770>as <00:12:43.945>soon <00:12:44.120>as <00:12:44.295>we <00:12:44.470>load <00:12:44.645>it,

243
00:12:45.985 --> 00:12:49.645
<00:12:45.985>or <00:12:46.112>we <00:12:46.239>can <00:12:46.366>defer <00:12:46.494>the <00:12:46.621>hydration <00:12:46.748>to <00:12:46.875>the, <00:12:47.003>to <00:12:47.130>a <00:12:47.257>user <00:12:47.385>interaction

244
00:12:50.265 --> 00:12:52.085
<00:12:50.265>or <00:12:50.731>something <00:12:51.198>like <00:12:51.665>that.

245
00:12:52.675 --> 00:12:56.685
<00:12:52.675>Okay, <00:12:52.849>let's, <00:12:53.025>uh, <00:12:53.199>let's <00:12:53.375>try <00:12:53.550>it <00:12:53.724>on <00:12:53.900>a <00:12:54.074>component.

246
00:12:56.985 --> 00:12:59.765
<00:12:56.985>Uh, <00:12:57.140>I, <00:12:57.296>uh, <00:12:57.451>sorry, <00:12:57.607>I <00:12:57.762>have <00:12:57.918>to <00:12:58.073>close <00:12:58.229>this <00:12:58.385>page.

247
00:13:06.925 --> 00:13:11.335
<00:13:06.925>Okay, <00:13:07.080>so <00:13:07.236>in <00:13:07.391>the <00:13:07.547>page <00:13:07.702>we <00:13:07.858>are <00:13:08.013>showing <00:13:08.169>the, <00:13:08.324>uh,

248
00:13:12.825 --> 00:13:13.895
<00:13:12.825>react <00:13:13.788>counter.

249
00:13:18.765 --> 00:13:20.415
<00:13:18.765>Okay? <00:13:19.045>You <00:13:19.324>see <00:13:19.605>that <00:13:19.885>this <00:13:20.165>is,

250
00:13:20.445 --> 00:13:22.175
<00:13:20.445>this <00:13:20.725>is <00:13:21.005>a <00:13:21.285>simple <00:13:21.565>react <00:13:21.845>component.

251
00:13:22.175 --> 00:13:25.175
<00:13:22.175>We're <00:13:22.330>gonna <00:13:22.486>see <00:13:22.641>the <00:13:22.797>concern <00:13:22.952>where <00:13:23.108>we <00:13:23.263>update <00:13:23.419>the <00:13:23.574>number

252
00:13:25.515 --> 00:13:30.055
<00:13:25.515>or <00:13:25.642>we, <00:13:25.769>uh, <00:13:25.896>with <00:13:26.024>a, <00:13:26.151>we <00:13:26.278>we <00:13:26.405>pressing <00:13:26.533>a <00:13:26.660>Minnesota <00:13:26.787>plus <00:13:26.915>sign.

253
00:13:30.875 --> 00:13:33.335
<00:13:30.875>I'm <00:13:31.075>not <00:13:31.275>gonna <00:13:31.475>describe <00:13:31.675>you <00:13:31.875>how <00:13:32.075>it <00:13:32.275>works,

254
00:13:34.395 --> 00:13:35.535
<00:13:34.395>but <00:13:34.737>it's <00:13:35.079>super <00:13:35.420>simple.

255
00:13:35.675 --> 00:13:38.895
<00:13:35.675>We <00:13:35.830>have <00:13:35.986>in <00:13:36.141>an <00:13:36.297>internal <00:13:36.452>state <00:13:36.608>of <00:13:36.763>the <00:13:36.919>component <00:13:37.074>itself,

256
00:13:39.825 --> 00:13:42.365
<00:13:39.825>and <00:13:40.025>we <00:13:40.225>just <00:13:40.425>associate <00:13:40.625>actions <00:13:40.825>are <00:13:41.025>the <00:13:41.225>press

257
00:13:42.385 --> 00:13:44.285
<00:13:42.385>of <00:13:42.851>a <00:13:43.318>button, <00:13:43.785>okay?

258
00:13:45.105 --> 00:13:48.125
<00:13:45.105>In <00:13:45.305>the <00:13:45.505>astro, <00:13:45.705>uh, <00:13:45.905>file <00:13:46.105>for <00:13:46.305>the <00:13:46.505>page,

259
00:13:48.665 --> 00:13:53.335
<00:13:48.665>we <00:13:48.839>are <00:13:49.015>giving <00:13:49.189>a <00:13:49.365>client <00:13:49.540>directive <00:13:49.714>load, <00:13:49.890>which <00:13:50.064>means

260
00:13:53.335 --> 00:13:55.775
<00:13:53.335>that <00:13:53.510>he, <00:13:53.685>he <00:13:53.860>needs <00:13:54.035>to <00:13:54.210>be <00:13:54.385>hydrated <00:13:54.560>in <00:13:54.735>order

261
00:13:55.875 --> 00:13:57.855
<00:13:55.875>to <00:13:56.108>serve <00:13:56.341>the <00:13:56.575>interactions <00:13:56.808>to <00:13:57.041>the <00:13:57.275>users.

262
00:13:58.515 --> 00:14:02.535
<00:13:58.515>If <00:13:58.670>we <00:13:58.826>remove <00:13:58.981>it, <00:13:59.137>as <00:13:59.292>we <00:13:59.448>said, <00:13:59.603>Astro <00:13:59.759>will <00:13:59.915>assume

263
00:14:03.205 --> 00:14:05.575
<00:14:03.205>this <00:14:03.555>is <00:14:03.905>just <00:14:04.255>static <00:14:04.605>content,

264
00:14:05.915 --> 00:14:08.455
<00:14:05.915>and <00:14:06.070>if <00:14:06.226>I <00:14:06.381>click <00:14:06.537>on <00:14:06.692>a <00:14:06.848>button, <00:14:07.003>it <00:14:07.159>won't <00:14:07.314>work.

265
00:14:10.435 --> 00:14:13.975
<00:14:10.435>So <00:14:10.590>the, <00:14:10.746>the <00:14:10.901>JavaScript <00:14:11.057>code <00:14:11.212>is <00:14:11.368>strip <00:14:11.523>away, <00:14:11.679>let's <00:14:11.834>say

266
00:14:14.685 --> 00:14:18.135
<00:14:14.685>from <00:14:14.859>the <00:14:15.035>component <00:14:15.209>and <00:14:15.385>just <00:14:15.560>the <00:14:15.734>basic <00:14:15.910>markdown <00:14:16.084>is,

267
00:14:19.515 --> 00:14:21.015
<00:14:19.515>uh, <00:14:20.865>server.

268
00:14:21.435 --> 00:14:24.495
<00:14:21.435>If <00:14:21.785>I <00:14:22.135>restore <00:14:22.484>the <00:14:22.834>directive,

269
00:14:24.595 --> 00:14:26.255
<00:14:24.595>the <00:14:24.875>component <00:14:25.155>will <00:14:25.435>start <00:14:25.715>working <00:14:25.995>again.

270
00:14:31.265 --> 00:14:31.485
Uh,

271
00:14:33.365 --> 00:14:36.755
<00:14:33.365>Okay, <00:14:34.765>Okay.

272
00:14:37.235 --> 00:14:39.475
<00:14:37.235>Together <00:14:37.468>with <00:14:37.701>this, <00:14:37.935>so <00:14:38.168>the <00:14:38.401>partial <00:14:38.635>hydration,

273
00:14:39.695 --> 00:14:42.675
<00:14:39.695>the <00:14:39.895>ferry <00:14:40.095>hydration, <00:14:40.295>we <00:14:40.495>also <00:14:40.695>have <00:14:40.895>the <00:14:41.095>concept

274
00:14:42.895 --> 00:14:46.955
<00:14:42.895>of <00:14:43.069>server <00:14:43.245>side <00:14:43.420>rendering, <00:14:43.595>which <00:14:43.770>you <00:14:43.944>probably <00:14:44.120>already <00:14:44.295>know

275
00:14:48.185 --> 00:14:50.875
<00:14:48.185>that <00:14:48.359>is <00:14:48.535>supported <00:14:48.709>by <00:14:48.885>Astro <00:14:49.060>in <00:14:49.234>three <00:14:49.410>different <00:14:49.584>ways.

276
00:14:51.115 --> 00:14:53.005
<00:14:51.115>Basically, <00:14:51.395>we <00:14:51.675>have <00:14:51.955>the <00:14:52.235>static <00:14:52.515>rendering,

277
00:14:53.005 --> 00:14:56.605
<00:14:53.005>which <00:14:53.132>is <00:14:53.259>just <00:14:53.386>server <00:14:53.514>h <00:14:53.641>tml, <00:14:53.768>forget <00:14:53.895>about <00:14:54.023>it, <00:14:54.150>about <00:14:54.277>to <00:14:54.405>the,

278
00:14:57.155 --> 00:15:00.045
<00:14:57.155>according <00:14:57.295>to <00:14:57.435>the <00:14:57.574>route <00:14:57.714>of <00:14:57.855>the <00:14:57.995>page <00:14:58.135>we <00:14:58.275>have <00:14:58.415>in <00:14:58.555>place

279
00:15:01.425 --> 00:15:05.365
<00:15:01.425>use <00:15:01.704>a <00:15:01.984>server <00:15:02.265>that <00:15:02.545>supports <00:15:02.824>SSR.

280
00:15:05.785 --> 00:15:08.805
<00:15:05.785>And <00:15:05.912>in <00:15:06.039>the <00:15:06.166>case <00:15:06.294>of <00:15:06.421>our <00:15:06.548>example, <00:15:06.675>we <00:15:06.803>are <00:15:06.930>gonna <00:15:07.057>use <00:15:07.185>CloudFlare.

281
00:15:08.805 --> 00:15:10.125
<00:15:08.805>We <00:15:09.042>are <00:15:09.280>gonna <00:15:09.517>see <00:15:09.755>it <00:15:09.992>soon

282
00:15:10.745 --> 00:15:13.325
<00:15:10.745>or <00:15:10.900>use <00:15:11.056>a, <00:15:11.211>an <00:15:11.367>hybrid <00:15:11.522>model, <00:15:11.678>which <00:15:11.833>is <00:15:11.989>a <00:15:12.145>mix

283
00:15:13.325 --> 00:15:17.445
<00:15:13.325>of <00:15:13.500>the <00:15:13.675>two <00:15:13.850>Astro <00:15:14.025>artificially <00:15:14.200>supports <00:15:14.375>cloud <00:15:14.550>versus <00:15:14.725>natively

284
00:15:17.545 --> 00:15:19.605
<00:15:17.545>and <00:15:17.895>the <00:15:18.245>node <00:15:18.594>server <00:15:18.944>render.

285
00:15:20.025 --> 00:15:24.765
<00:15:20.025>So <00:15:20.165>it's <00:15:20.305>your <00:15:20.444>easily <00:15:20.584>your <00:15:20.725>choice, <00:15:20.865>uh, <00:15:21.005>to <00:15:21.145>what <00:15:21.285>to <00:15:21.425>use.

286
00:15:24.865 --> 00:15:27.485
<00:15:24.865>And <00:15:25.098>basically <00:15:25.331>you <00:15:25.565>are <00:15:25.798>covered <00:15:26.031>for <00:15:26.265>80%

287
00:15:27.585 --> 00:15:28.965
<00:15:27.585>of <00:15:27.895>the <00:15:28.206>common <00:15:28.516>use <00:15:28.827>cases.

288
00:15:30.265 --> 00:15:32.045
<00:15:30.265>So, <00:15:30.545>uh, <00:15:30.824>how <00:15:31.105>does <00:15:31.385>it <00:15:31.665>work?

289
00:15:32.105 --> 00:15:35.205
<00:15:32.105>How <00:15:32.338>we <00:15:32.571>can <00:15:32.805>enable <00:15:33.038>SSR <00:15:33.271>supporting <00:15:33.505>CloudFair.

290
00:15:35.945 --> 00:15:38.885
<00:15:35.945>We <00:15:36.120>can <00:15:36.295>basically <00:15:36.470>do <00:15:36.645>that <00:15:36.820>in <00:15:36.995>four <00:15:37.170>easy <00:15:37.345>steps.

291
00:15:40.425 --> 00:15:43.165
<00:15:40.425>We, <00:15:40.564>first <00:15:40.704>of <00:15:40.844>all, <00:15:40.984>we <00:15:41.125>have <00:15:41.265>to <00:15:41.405>log <00:15:41.545>in <00:15:41.685>to <00:15:41.824>Wrangler.

292
00:15:43.165 --> 00:15:46.245
<00:15:43.165>Wrangler <00:15:43.320>is <00:15:43.476>a <00:15:43.631>tool <00:15:43.787>that <00:15:43.942>CloudFlare <00:15:44.098>gives <00:15:44.253>you <00:15:44.409>in <00:15:44.564>order

293
00:15:46.345 --> 00:15:51.085
<00:15:46.345>to <00:15:46.520>manage <00:15:46.695>your <00:15:46.870>environment <00:15:47.045>and <00:15:47.220>basically <00:15:47.395>deploy <00:15:47.570>your <00:15:47.745>code.

294
00:15:51.665 --> 00:15:53.125
<00:15:51.665>You <00:15:52.322>add <00:15:52.979>with

295
00:15:53.125 --> 00:15:55.965
<00:15:53.125>that <00:15:53.325>simple <00:15:53.525>comment <00:15:53.725>astro <00:15:53.925>add <00:15:54.125>the <00:15:54.325>CloudFlare <00:15:54.525>support

296
00:15:56.025 --> 00:15:59.245
<00:15:56.025>to <00:15:56.180>your <00:15:56.336>project, <00:15:56.491>then <00:15:56.647>you <00:15:56.802>build <00:15:56.958>it <00:15:57.113>and <00:15:57.269>deploy <00:15:57.425>it.

297
00:15:59.985 --> 00:16:01.645
<00:15:59.985>And <00:16:00.451>that's <00:16:00.918>it. <00:16:01.385>The,

298
00:16:02.865 --> 00:16:06.725
<00:16:02.865>the <00:16:03.020>pages <00:16:03.176>we <00:16:03.331>are <00:16:03.487>seeing <00:16:03.642>are <00:16:03.798>already <00:16:03.953>deployed <00:16:04.109>in <00:16:04.265>production

299
00:16:08.745 --> 00:16:12.405
<00:16:08.745>And <00:16:08.900>we <00:16:09.056>are, <00:16:09.211>let <00:16:09.367>me, <00:16:09.522>let <00:16:09.678>me <00:16:09.833>get <00:16:09.989>the <00:16:10.145>address.

300
00:16:12.785 --> 00:16:14.645
<00:16:12.785>We <00:16:13.251>are <00:16:13.718>devs <00:16:14.185>2024.

301
00:16:21.555 --> 00:16:23.005
<00:16:21.555>This <00:16:21.881>is <00:16:22.207>already <00:16:22.533>in <00:16:22.860>production.

302
00:16:23.105 --> 00:16:25.965
<00:16:23.105>The <00:16:23.260>component <00:16:23.416>is <00:16:23.571>working <00:16:23.727>fine, <00:16:23.882>but <00:16:24.038>how, <00:16:24.193>how <00:16:24.349>it <00:16:24.505>works.

303
00:16:26.385 --> 00:16:29.405
<00:16:26.385>So <00:16:26.585>basically <00:16:26.785>the <00:16:26.985>four <00:16:27.185>comments <00:16:27.385>I <00:16:27.585>show <00:16:27.785>you,

304
00:16:31.045 --> 00:16:32.925
<00:16:31.045>I <00:16:31.245>I <00:16:31.444>can, <00:16:31.645>I <00:16:31.844>can <00:16:32.045>run <00:16:32.245>them <00:16:32.444>live.

305
00:16:33.055 --> 00:16:36.605
<00:16:33.055>Let's, <00:16:33.194>uh, <00:16:33.334>let's <00:16:33.474>do <00:16:33.614>that. <00:16:33.755>So <00:16:33.895>let <00:16:34.035>me <00:16:34.175>log <00:16:34.314>into <00:16:34.454>Wrangler.

306
00:16:41.615 --> 00:16:45.705
<00:16:41.615>Okay? <00:16:41.770>It's <00:16:41.926>working. <00:16:42.081>So <00:16:42.237>the <00:16:42.392>CloudFair <00:16:42.548>tool <00:16:42.703>is <00:16:42.859>authorizing <00:16:43.015>me

307
00:16:46.285 --> 00:16:49.425
<00:16:46.285>to <00:16:46.485>use <00:16:46.685>the <00:16:46.885>terminal <00:16:47.084>to <00:16:47.285>deploy <00:16:47.485>my <00:16:47.685>application,

308
00:16:55.985 --> 00:16:56.985
Okay?

309
00:16:58.055 --> 00:17:01.355
<00:16:58.055>And <00:16:58.210>then <00:16:58.366>we <00:16:58.521>have <00:16:58.677>to <00:16:58.832>add <00:16:58.988>the <00:16:59.143>support <00:16:59.299>in <00:16:59.454>Astro

310
00:17:01.355 --> 00:17:04.755
<00:17:01.355>for <00:17:01.530>the <00:17:01.705>configuration <00:17:01.880>of <00:17:02.055>CloudFlare, <00:17:02.230>which <00:17:02.405>I <00:17:02.580>already <00:17:02.755>did.

311
00:17:05.295 --> 00:17:09.235
<00:17:05.295>And <00:17:05.422>you <00:17:05.549>can <00:17:05.676>find <00:17:05.804>in <00:17:05.931>the <00:17:06.058>astro <00:17:06.185>config <00:17:06.313>file, <00:17:06.440>it's <00:17:06.567>just <00:17:06.695>about

312
00:17:11.035 --> 00:17:14.535
<00:17:11.035>adding <00:17:11.210>the <00:17:11.385>adapter, <00:17:11.560>the <00:17:11.735>server <00:17:11.910>side <00:17:12.085>rendering <00:17:12.260>adapter <00:17:12.435>here

313
00:17:14.965 --> 00:17:18.815
<00:17:14.964>with <00:17:15.120>the <00:17:15.276>rendering, <00:17:15.431>how <00:17:15.587>to <00:17:15.742>put <00:17:15.898>the <00:17:16.053>market <00:17:16.209>as <00:17:16.365>server

314
00:17:19.075 --> 00:17:20.375
<00:17:19.075>as <00:17:19.270>we <00:17:19.465>are <00:17:19.660>seen <00:17:19.855>in <00:17:20.050>the <00:17:20.244>slides.

315
00:17:21.205 --> 00:17:23.015
<00:17:21.204>Then <00:17:21.405>back <00:17:21.605>to <00:17:21.804>the <00:17:22.004>slides, <00:17:22.204>we're <00:17:22.405>gonna <00:17:22.605>bid

316
00:17:23.015 --> 00:17:25.695
<00:17:23.015>and <00:17:23.481>deploy <00:17:23.948>our <00:17:24.415>application.

317
00:17:26.215 --> 00:17:29.895
<00:17:26.214>I <00:17:26.342>did <00:17:26.469>that <00:17:26.596>in <00:17:26.724>a <00:17:26.851>single <00:17:26.978>step <00:17:27.105>by <00:17:27.233>just <00:17:27.360>adding <00:17:27.487>this <00:17:27.615>command

318
00:17:30.035 --> 00:17:31.855
<00:17:30.035>to <00:17:30.385>the <00:17:30.735>packages <00:17:31.085>JSON <00:17:31.435>file.

319
00:17:32.755 --> 00:17:34.175
<00:17:32.755>So <00:17:33.074>let's <00:17:33.394>try <00:17:33.713>it <00:17:34.033>live.

320
00:17:34.475 --> 00:17:39.095
<00:17:34.475>So <00:17:34.675>let's, <00:17:34.875>uh, <00:17:35.074>let's <00:17:35.274>change <00:17:35.475>our <00:17:35.675>own <00:17:35.875>page

321
00:17:39.355 --> 00:17:44.055
<00:17:39.355>to, <00:17:39.495>uh, <00:17:39.635>from <00:17:39.775>alo <00:17:39.915>react <00:17:40.055>to, <00:17:40.195>I <00:17:40.335>don't <00:17:40.475>dunno, <00:17:40.615>let's, <00:17:40.755>uh,

322
00:17:44.185 --> 00:17:45.615
<00:17:44.185>let's <00:17:44.614>say <00:17:45.043>H <00:17:45.472>one.

323
00:17:47.745 --> 00:17:49.805
<00:17:47.745>Hello, <00:17:48.445>Live, <00:17:49.145>deploy.

324
00:17:53.105 --> 00:17:55.645
<00:17:53.105>And <00:17:53.385>let's <00:17:53.665>see <00:17:53.945>what, <00:17:54.225>what <00:17:54.505>happens.

325
00:17:57.785 --> 00:18:00.845
<00:17:57.785>So <00:17:57.960>basically <00:17:58.135>right <00:17:58.310>now <00:17:58.485>we <00:17:58.660>are <00:17:58.835>building <00:17:59.010>our <00:17:59.185>application.

326
00:18:01.265 --> 00:18:02.565
<00:18:01.265>You're <00:18:01.557>gonna <00:18:01.850>see <00:18:02.142>some <00:18:02.435>warning

327
00:18:02.565 --> 00:18:03.725
<00:18:02.565>because <00:18:02.913>this <00:18:03.261>is <00:18:03.609>a,

328
00:18:03.725 --> 00:18:06.205
<00:18:03.725>let's <00:18:03.899>say <00:18:04.074>a <00:18:04.250>toy <00:18:04.425>project <00:18:04.600>is <00:18:04.774>not <00:18:04.949>really <00:18:05.125>optimized

329
00:18:07.705 --> 00:18:09.325
<00:18:07.705>and, <00:18:07.938>uh, <00:18:08.171>it, <00:18:08.405>it's <00:18:08.638>gonna <00:18:08.871>be <00:18:09.105>built.

330
00:18:09.505 --> 00:18:12.245
<00:18:09.505>We <00:18:09.680>have <00:18:09.855>some <00:18:10.030>warnings, <00:18:10.205>and <00:18:10.380>that's <00:18:10.555>fair <00:18:10.730>for <00:18:10.905>now.

331
00:18:13.225 --> 00:18:16.845
<00:18:13.225>The <00:18:13.380>project <00:18:13.536>is <00:18:13.691>built <00:18:13.847>now <00:18:14.002>in <00:18:14.158>two <00:18:14.313>seconds <00:18:14.469>and <00:18:14.625>30.

332
00:18:16.985 --> 00:18:19.085
<00:18:16.985>And <00:18:17.125>I <00:18:17.264>want <00:18:17.405>to <00:18:17.544>underline, <00:18:17.685>this <00:18:17.824>is <00:18:17.965>a <00:18:18.104>very <00:18:18.245>odd <00:18:18.385>machine.

333
00:18:19.085 --> 00:18:20.565
<00:18:19.085>It's <00:18:19.351>from <00:18:19.617>10 <00:18:19.884>years <00:18:20.150>ago, <00:18:20.417>okay?

334
00:18:20.565 --> 00:18:22.085
<00:18:20.565>The, <00:18:20.838>the <00:18:21.112>project <00:18:21.385>is <00:18:21.659>super <00:18:21.933>simple,

335
00:18:22.465 --> 00:18:25.645
<00:18:22.465>but <00:18:22.665>for <00:18:22.865>more, <00:18:23.064>more <00:18:23.264>complex <00:18:23.465>projects, <00:18:23.665>the <00:18:23.865>performance

336
00:18:26.545 --> 00:18:28.125
<00:18:26.545>for <00:18:26.895>performances <00:18:27.245>are <00:18:27.595>really <00:18:27.945>good.

337
00:18:28.385 --> 00:18:32.445
<00:18:28.385>And <00:18:28.501>now <00:18:28.618>we <00:18:28.735>have <00:18:28.851>wrong <00:18:28.968>Wrangler <00:18:29.085>asking <00:18:29.201>us <00:18:29.318>what <00:18:29.435>we <00:18:29.551>want <00:18:29.668>to <00:18:29.785>use

338
00:18:33.265 --> 00:18:34.605
<00:18:33.265>to <00:18:33.667>deploy <00:18:34.069>the <00:18:34.471>application.

339
00:18:34.705 --> 00:18:36.845
<00:18:34.705>We <00:18:34.879>have, <00:18:35.054>we <00:18:35.230>are <00:18:35.405>gonna <00:18:35.580>use <00:18:35.754>an <00:18:35.929>existing <00:18:36.105>project.

340
00:18:37.715 --> 00:18:40.485
<00:18:37.715>Here <00:18:37.855>is <00:18:37.995>the <00:18:38.135>list <00:18:38.274>of <00:18:38.415>the <00:18:38.554>projects <00:18:38.695>I <00:18:38.834>have <00:18:38.975>in <00:18:39.115>place.

341
00:18:40.585 --> 00:18:44.125
<00:18:40.585>We <00:18:40.785>are <00:18:40.985>gonna <00:18:41.185>see, <00:18:41.385>we <00:18:41.585>are <00:18:41.785>devs. <00:18:41.985>Okay?

342
00:18:44.245 --> 00:18:46.685
<00:18:44.245>I <00:18:44.400>don't, <00:18:44.556>I <00:18:44.711>didn't <00:18:44.867>commit <00:18:45.022>my <00:18:45.178>changes, <00:18:45.333>but <00:18:45.489>it's <00:18:45.645>okay.

343
00:18:47.105 --> 00:18:51.325
<00:18:47.105>And <00:18:47.245>now <00:18:47.385>we <00:18:47.525>are <00:18:47.665>uploading <00:18:47.805>the <00:18:47.945>bundle <00:18:48.085>we <00:18:48.225>built <00:18:48.365>to <00:18:48.505>CloudFlare.

344
00:18:53.175 --> 00:18:57.485
<00:18:53.175>Let's <00:18:53.350>wait <00:18:53.524>a <00:18:53.700>second. <00:18:53.875>Okay. <00:18:54.050>The <00:18:54.225>deployment <00:18:54.399>is <00:18:54.575>complete.

345
00:18:58.315 --> 00:19:02.925
<00:18:58.315>This <00:18:58.442>is <00:18:58.569>a <00:18:58.696>URL <00:18:58.824>that <00:18:58.951>maps <00:18:59.078>to <00:18:59.205>the <00:18:59.333>current, <00:18:59.460>let's <00:18:59.587>say <00:18:59.715>commit

346
00:19:03.085 --> 00:19:05.645
<00:19:03.085>because <00:19:03.240>I <00:19:03.396>didn't <00:19:03.551>commit, <00:19:03.707>but <00:19:03.862>it's <00:19:04.018>a <00:19:04.173>temporary <00:19:04.329>ID <00:19:04.485>given.

347
00:19:06.465 --> 00:19:08.805
<00:19:06.465>And <00:19:06.620>this <00:19:06.776>is <00:19:06.931>the <00:19:07.087>piece <00:19:07.242>of <00:19:07.398>code <00:19:07.553>I <00:19:07.709>added <00:19:07.865>to,

348
00:19:09.885 --> 00:19:12.405
<00:19:09.885>I <00:19:10.118>hope <00:19:10.351>the <00:19:10.585>CloudFlare <00:19:10.818>already <00:19:11.051>deployed <00:19:11.285>it

349
00:19:12.505 --> 00:19:14.805
<00:19:12.505>to <00:19:12.738>the <00:19:12.971>current <00:19:13.205>route <00:19:13.438>of <00:19:13.671>the <00:19:13.905>project.

350
00:19:15.315 --> 00:19:19.205
<00:19:15.315>Okay? <00:19:15.515>It <00:19:15.715>did. <00:19:15.915>So <00:19:16.115>this <00:19:16.315>deployment <00:19:16.515>was <00:19:16.715>done

351
00:19:19.275 --> 00:19:21.885
<00:19:19.275>with <00:19:19.508>basically <00:19:19.741>just <00:19:19.975>four <00:19:20.208>lines <00:19:20.441>of <00:19:20.675>configuration

352
00:19:22.585 --> 00:19:26.765
<00:19:22.585>and <00:19:22.740>cloud <00:19:22.896>flare, <00:19:23.051>taking <00:19:23.207>care <00:19:23.362>of <00:19:23.518>the <00:19:23.673>server <00:19:23.829>side <00:19:23.985>rendering.

353
00:19:29.465 --> 00:19:31.435
<00:19:29.465>Okay? <00:19:29.814>Back <00:19:30.165>to <00:19:30.514>the <00:19:30.865>slides,

354
00:19:36.385 --> 00:19:39.075
<00:19:36.385>okay, <00:19:36.540>I'm <00:19:36.696>gonna <00:19:36.851>talk <00:19:37.007>a <00:19:37.162>bit <00:19:37.318>a <00:19:37.473>bit <00:19:37.629>more <00:19:37.785>about

355
00:19:39.255 --> 00:19:40.795
<00:19:39.255>how <00:19:39.717>Astro <00:19:40.179>is <00:19:40.641>fast.

356
00:19:41.375 --> 00:19:43.435
<00:19:41.375>And <00:19:41.575>this <00:19:41.775>is <00:19:41.975>something <00:19:42.175>that <00:19:42.375>we <00:19:42.575>all <00:19:42.775>aim

357
00:19:43.615 --> 00:19:47.395
<00:19:43.615>to <00:19:43.790>basically <00:19:43.965>having <00:19:44.140>Lighthouse <00:19:44.315>be <00:19:44.490>completely <00:19:44.665>green <00:19:44.840>at <00:19:45.015>100%.

358
00:19:48.095 --> 00:19:50.715
<00:19:48.095>And <00:19:48.295>if <00:19:48.495>you <00:19:48.695>work <00:19:48.895>with <00:19:49.095>search <00:19:49.295>engine <00:19:49.495>optimization

359
00:19:51.375 --> 00:19:55.475
<00:19:51.375>or <00:19:51.550>in <00:19:51.725>easily <00:19:51.900>based <00:19:52.075>the <00:19:52.250>frontend <00:19:52.425>application, <00:19:52.600>you <00:19:52.775>know,

360
00:19:55.705 --> 00:19:57.395
<00:19:55.705>this <00:19:56.171>score <00:19:56.638>is <00:19:57.105>important

361
00:19:57.855 --> 00:20:01.155
<00:19:57.855>and <00:19:58.030>the <00:19:58.205>more <00:19:58.380>this <00:19:58.555>score <00:19:58.730>is <00:19:58.905>close <00:19:59.080>to <00:19:59.255>100,

362
00:20:01.375 --> 00:20:03.835
<00:20:01.375>the <00:20:01.550>more <00:20:01.725>you <00:20:01.900>are <00:20:02.075>happy, <00:20:02.250>your <00:20:02.425>managers <00:20:02.600>are <00:20:02.775>happy

363
00:20:03.935 --> 00:20:06.075
<00:20:03.935>and <00:20:04.168>your <00:20:04.401>customers <00:20:04.635>and <00:20:04.868>users <00:20:05.101>are <00:20:05.335>happy

364
00:20:06.145 --> 00:20:07.835
<00:20:06.145>because <00:20:06.611>a <00:20:07.078>fast <00:20:07.545>website

365
00:20:08.665 --> 00:20:11.155
<00:20:08.665>miss <00:20:08.865>also <00:20:09.065>a <00:20:09.264>fast <00:20:09.465>response <00:20:09.665>to <00:20:09.865>the <00:20:10.065>users.

366
00:20:13.025 --> 00:20:15.675
<00:20:13.025>Okay? <00:20:13.165>We <00:20:13.305>talk <00:20:13.445>it <00:20:13.585>a <00:20:13.725>lot, <00:20:13.865>I <00:20:14.005>talk <00:20:14.145>it <00:20:14.285>a <00:20:14.425>lot,

367
00:20:15.815 --> 00:20:16.875
<00:20:15.815>I'm <00:20:16.053>talking <00:20:16.292>a <00:20:16.530>lot <00:20:16.769>already,

368
00:20:17.175 --> 00:20:21.235
<00:20:17.175>but <00:20:17.291>I <00:20:17.408>talk <00:20:17.524>it <00:20:17.641>a <00:20:17.758>lot <00:20:17.875>about <00:20:17.991>the <00:20:18.108>J <00:20:18.225>zero <00:20:18.341>JavaScript <00:20:18.458>by <00:20:18.575>default

369
00:20:21.795 --> 00:20:23.555
<00:20:21.795>paradigm <00:20:22.261>applied <00:20:22.728>in <00:20:23.195>Astro

370
00:20:23.935 --> 00:20:27.275
<00:20:23.935>and <00:20:24.168>the <00:20:24.401>partial <00:20:24.635>hydration, <00:20:24.868>the <00:20:25.101>Iceland <00:20:25.335>architecture.

371
00:20:27.935 --> 00:20:31.115
<00:20:27.935>But <00:20:28.075>there <00:20:28.215>are <00:20:28.355>also <00:20:28.495>a <00:20:28.635>lot <00:20:28.774>of <00:20:28.915>stuff, <00:20:29.054>if <00:20:29.195>you <00:20:29.335>want

372
00:20:31.115 --> 00:20:33.235
<00:20:31.115>to <00:20:31.290>go <00:20:31.465>really <00:20:31.640>deep <00:20:31.815>into <00:20:31.990>the <00:20:32.165>internal <00:20:32.340>of <00:20:32.515>Astro,

373
00:20:33.235 --> 00:20:34.915
<00:20:33.235>I <00:20:33.409>suggest <00:20:33.584>you <00:20:33.760>again <00:20:33.935>to <00:20:34.110>go <00:20:34.284>to <00:20:34.459>the <00:20:34.635>website,

374
00:20:34.915 --> 00:20:37.875
<00:20:34.915>the <00:20:35.148>offshore <00:20:35.381>website, <00:20:35.615>but <00:20:35.848>there <00:20:36.081>are <00:20:36.315>performances

375
00:20:37.935 --> 00:20:38.955
<00:20:37.935>of <00:20:38.852>optimization.

376
00:20:39.255 --> 00:20:43.275
<00:20:39.255>You <00:20:39.430>can <00:20:39.605>have <00:20:39.780>specific, <00:20:39.955>uh, <00:20:40.130>components <00:20:40.305>to <00:20:40.480>serve <00:20:40.655>images

377
00:20:43.415 --> 00:20:46.155
<00:20:43.415>to <00:20:43.764>the <00:20:44.115>users <00:20:44.465>CSS <00:20:44.815>split

378
00:20:46.895 --> 00:20:48.845
<00:20:46.895>model <00:20:47.361>build <00:20:47.828>tools <00:20:48.295>already.

379
00:20:49.245 --> 00:20:54.185
<00:20:49.245>I, <00:20:49.372>I, <00:20:49.499>again, <00:20:49.626>I'm <00:20:49.754>using <00:20:49.881>a <00:20:50.008>10 <00:20:50.135>years <00:20:50.263>old <00:20:50.390>machine <00:20:50.517>to <00:20:50.645>just

380
00:20:54.185 --> 00:20:58.425
<00:20:54.185>to <00:20:54.312>show <00:20:54.439>you <00:20:54.566>how <00:20:54.694>fast <00:20:54.821>it <00:20:54.948>is <00:20:55.075>even <00:20:55.203>on <00:20:55.330>that <00:20:55.457>old <00:20:55.585>hardware

381
00:20:58.495 --> 00:21:02.745
<00:20:58.495>that <00:20:58.669>never <00:20:58.844>SI <00:20:59.020>don't <00:20:59.195>think <00:20:59.370>it <00:20:59.544>supports <00:20:59.719>Chrome <00:20:59.895>anymore,

382
00:21:03.165 --> 00:21:07.905
<00:21:03.165>but <00:21:03.305>you <00:21:03.445>can <00:21:03.585>be <00:21:03.725>the <00:21:03.865>website <00:21:04.004>with <00:21:04.145>Astro <00:21:04.284>with, <00:21:04.425>uh, <00:21:04.565>much

383
00:21:07.905 --> 00:21:10.825
<00:21:07.905>of <00:21:08.080>a, <00:21:08.254>let's <00:21:08.430>say <00:21:08.605>a <00:21:08.780>very <00:21:08.955>delightful <00:21:09.129>experience <00:21:09.305>even

384
00:21:11.085 --> 00:21:13.025
<00:21:11.085>of <00:21:11.435>on <00:21:11.785>a <00:21:12.135>10-year-old <00:21:12.485>machine.

385
00:21:15.365 --> 00:21:17.465
<00:21:15.365>And, <00:21:15.645>uh, <00:21:15.925>this <00:21:16.205>is <00:21:16.485>really <00:21:16.765>important.

386
00:21:17.805 --> 00:21:20.505
<00:21:17.805>The, <00:21:17.932>the <00:21:18.059>goal <00:21:18.186>of <00:21:18.314>Astro <00:21:18.441>is <00:21:18.568>to <00:21:18.695>be <00:21:18.823>fast, <00:21:18.950>fast <00:21:19.077>for <00:21:19.205>you

387
00:21:20.505 --> 00:21:22.705
<00:21:20.505>as <00:21:20.680>a <00:21:20.855>developer, <00:21:21.030>fast <00:21:21.205>for <00:21:21.380>you <00:21:21.555>as <00:21:21.730>a <00:21:21.905>user.

388
00:21:24.055 --> 00:21:26.105
<00:21:24.055>Plus <00:21:24.405>you <00:21:24.755>can <00:21:25.105>really <00:21:25.455>be

389
00:21:27.455 --> 00:21:29.985
<00:21:27.455>easy <00:21:27.804>going <00:21:28.155>in <00:21:28.504>customizing <00:21:28.855>it.

390
00:21:30.315 --> 00:21:32.505
<00:21:30.315>There <00:21:30.548>is <00:21:30.781>a <00:21:31.015>native <00:21:31.248>support <00:21:31.481>Fort <00:21:31.715>Wind.

391
00:21:32.685 --> 00:21:35.505
<00:21:32.685>How <00:21:32.812>many <00:21:32.939>of <00:21:33.066>you <00:21:33.194>are <00:21:33.321>using <00:21:33.448>tile <00:21:33.575>wind <00:21:33.703>right <00:21:33.830>now <00:21:33.957>in <00:21:34.085>production?

392
00:21:37.285 --> 00:21:41.985
<00:21:37.285>Huh? <00:21:37.425>I <00:21:37.565>open, <00:21:37.705>I <00:21:37.845>open <00:21:37.985>more <00:21:38.125>people. <00:21:38.265>Uh, <00:21:38.405>okay, <00:21:38.545>that's <00:21:38.685>okay.

393
00:21:42.365 --> 00:21:45.705
<00:21:42.365>In <00:21:42.520>case <00:21:42.676>you <00:21:42.831>don't <00:21:42.987>use <00:21:43.142>Star <00:21:43.298>Wind <00:21:43.453>tailwind, <00:21:43.609>you <00:21:43.765>can

394
00:21:46.245 --> 00:21:48.225
<00:21:46.245>add <00:21:46.711>your <00:21:47.178>own <00:21:47.645>integration.

395
00:21:48.355 --> 00:21:49.825
<00:21:48.355>There <00:21:48.685>is <00:21:49.016>an, <00:21:49.347>for <00:21:49.678>example,

396
00:21:49.825 --> 00:21:52.145
<00:21:49.825>there <00:21:50.105>is <00:21:50.385>this <00:21:50.665>Astro <00:21:50.945>Bootstrap <00:21:51.225>integration.

397
00:21:52.525 --> 00:21:55.985
<00:21:52.525>How <00:21:52.665>many <00:21:52.805>of <00:21:52.945>you <00:21:53.085>are <00:21:53.225>using <00:21:53.365>Bootstrap <00:21:53.505>in <00:21:53.645>two <00:21:53.785>in <00:21:53.925>2024?

398
00:21:57.985 --> 00:21:59.555
<00:21:57.985>Just <00:21:58.451>you. <00:21:58.918>Thank <00:21:59.385>you.

399
00:22:01.185 --> 00:22:05.115
<00:22:01.185>Okay, <00:22:01.385>so <00:22:01.585>Bootstrap <00:22:01.784>is <00:22:01.985>this <00:22:02.185>out <00:22:02.385>there <00:22:02.585>somewhere?

400
00:22:06.815 --> 00:22:09.955
<00:22:06.815>And <00:22:06.942>you <00:22:07.069>can <00:22:07.196>as, <00:22:07.324>as <00:22:07.451>you <00:22:07.578>can <00:22:07.705>do <00:22:07.833>with <00:22:07.960>the <00:22:08.087>reactors <00:22:08.215>valve

401
00:22:09.975 --> 00:22:12.075
<00:22:09.975>to <00:22:10.254>UJS, <00:22:10.534>you <00:22:10.814>can <00:22:11.094>use <00:22:11.375>official

402
00:22:12.895 --> 00:22:15.355
<00:22:12.895>and <00:22:13.361>non-official <00:22:13.828>integrations <00:22:14.295>together.

403
00:22:16.015 --> 00:22:18.435
<00:22:16.015>And <00:22:16.170>again, <00:22:16.326>I'm <00:22:16.481>strongly <00:22:16.637>suggesting <00:22:16.792>you <00:22:16.948>not <00:22:17.103>to <00:22:17.259>do <00:22:17.415>it

404
00:22:18.435 --> 00:22:20.115
<00:22:18.435>because <00:22:18.668>you <00:22:18.901>don't <00:22:19.135>want <00:22:19.368>to <00:22:19.601>use <00:22:19.835>Stay

405
00:22:20.115 --> 00:22:22.355
<00:22:20.115>with <00:22:20.395>the <00:22:20.675>bootstrap <00:22:20.955>together, <00:22:21.235>believe <00:22:21.515>me.

406
00:22:23.735 --> 00:22:25.465
<00:22:23.735>Okay? <00:22:25.135>Again,

407
00:22:26.405 --> 00:22:29.785
<00:22:26.405>how <00:22:26.560>you <00:22:26.716>can <00:22:26.871>integrate <00:22:27.027>Tailwind <00:22:27.182>in <00:22:27.338>your <00:22:27.493>Astro <00:22:27.649>project <00:22:27.805>is

408
00:22:29.785 --> 00:22:32.625
<00:22:29.785>as <00:22:29.985>easy <00:22:30.185>as <00:22:30.385>running, <00:22:30.585>again, <00:22:30.785>a <00:22:30.985>configuration <00:22:31.185>commander,

409
00:22:33.165 --> 00:22:37.425
<00:22:33.165>you <00:22:33.398>just <00:22:33.631>run <00:22:33.865>AAD <00:22:34.098>command <00:22:34.331>saying, <00:22:34.565>okay,

410
00:22:37.465 --> 00:22:38.545
<00:22:37.465>I <00:22:37.707>want <00:22:37.951>to <00:22:38.194>use <00:22:38.437>Tailwind.

411
00:22:39.085 --> 00:22:41.385
<00:22:39.085>It <00:22:39.318>does <00:22:39.551>its <00:22:39.785>magic <00:22:40.018>in <00:22:40.251>the <00:22:40.485>ground,

412
00:22:42.125 --> 00:22:44.025
<00:22:42.125>and <00:22:42.358>you <00:22:42.591>can <00:22:42.825>start <00:22:43.058>using <00:22:43.291>Tailwind <00:22:43.525>classes

413
00:22:44.245 --> 00:22:45.505
<00:22:44.245>inside <00:22:44.812>your <00:22:45.379>components.

414
00:22:45.965 --> 00:22:50.305
<00:22:45.965>And <00:22:46.165>by <00:22:46.365>components, <00:22:46.564>I <00:22:46.764>mean <00:22:46.965>every <00:22:47.165>React <00:22:47.365>component,

415
00:22:50.515 --> 00:22:53.705
<00:22:50.515>every <00:22:50.795>well <00:22:51.075>component, <00:22:51.355>every <00:22:51.635>markdown <00:22:51.915>file

416
00:22:53.705 --> 00:22:58.665
<00:22:53.705>where <00:22:53.860>you <00:22:54.016>can <00:22:54.171>just <00:22:54.327>use <00:22:54.482>A-H-T-M-L <00:22:54.638>it <00:22:54.793>pure <00:22:54.949>HTML <00:22:55.105>components.

417
00:22:59.125 --> 00:23:00.985
<00:22:59.125>So <00:22:59.405>it <00:22:59.685>does <00:22:59.965>everything <00:23:00.245>for <00:23:00.525>you.

418
00:23:01.875 --> 00:23:03.625
<00:23:01.875>Let's <00:23:02.155>run <00:23:02.435>a <00:23:02.715>little <00:23:02.995>demo <00:23:03.275>again,

419
00:23:09.145 --> 00:23:09.435
okay?

420
00:23:09.745 --> 00:23:10.835
<00:23:09.745>This <00:23:10.072>is <00:23:10.399>super <00:23:10.726>easy

421
00:23:10.835 --> 00:23:15.075
<00:23:10.835>because <00:23:10.975>I <00:23:11.115>already <00:23:11.255>did <00:23:11.395>that <00:23:11.535>in <00:23:11.675>order <00:23:11.815>to <00:23:11.955>speed <00:23:12.095>up <00:23:12.235>again,

422
00:23:15.075 --> 00:23:17.435
<00:23:15.075>when <00:23:15.355>you <00:23:15.635>run <00:23:15.915>that, <00:23:16.195>uh, <00:23:16.475>project,

423
00:23:19.855 --> 00:23:21.795
<00:23:19.855>uh, <00:23:20.321>that <00:23:20.788>comment, <00:23:21.255>sorry.

424
00:23:22.365 --> 00:23:25.955
<00:23:22.365>Everything <00:23:22.565>it <00:23:22.765>does, <00:23:22.965>it <00:23:23.165>adds, <00:23:23.365>uh, <00:23:23.565>an <00:23:23.765>integration

425
00:23:26.695 --> 00:23:27.915
<00:23:26.695>to <00:23:27.244>your <00:23:27.793>configuration.

426
00:23:28.085 --> 00:23:31.235
<00:23:28.085>Again, <00:23:28.285>this <00:23:28.485>is <00:23:28.685>this <00:23:28.885>project <00:23:29.085>supporting <00:23:29.285>reactant <00:23:29.485>tailwind

427
00:23:32.255 --> 00:23:33.515
<00:23:32.255>by <00:23:32.822>just <00:23:33.389>importing

428
00:23:33.735 --> 00:23:38.515
<00:23:33.735>and <00:23:33.890>building <00:23:34.046>it <00:23:34.201>from <00:23:34.357>the <00:23:34.512>official <00:23:34.668>astro <00:23:34.823>repo <00:23:34.979>and <00:23:35.135>packages.

429
00:23:39.695 --> 00:23:41.995
<00:23:39.695>So <00:23:39.870>as <00:23:40.044>soon <00:23:40.220>as <00:23:40.395>it's <00:23:40.570>done <00:23:40.745>running <00:23:40.919>your <00:23:41.095>command,

430
00:23:43.175 --> 00:23:46.005
<00:23:43.175>you <00:23:43.408>can <00:23:43.641>just <00:23:43.875>start <00:23:44.108>using <00:23:44.341>your, <00:23:44.575>uh,

431
00:23:46.125 --> 00:23:48.245
<00:23:46.125>tailwind <00:23:46.475>classes <00:23:46.825>into <00:23:47.175>your <00:23:47.525>components

432
00:23:48.985 --> 00:23:50.805
<00:23:48.985>and <00:23:49.451>it <00:23:49.918>works <00:23:50.385>automatically.

433
00:23:51.385 --> 00:23:55.045
<00:23:51.385>So <00:23:51.540>my, <00:23:51.696>my <00:23:51.851>application <00:23:52.007>is <00:23:52.162>already <00:23:52.318>using <00:23:52.473>it, <00:23:52.629>of <00:23:52.785>course.

434
00:23:56.025 --> 00:23:58.125
<00:23:56.025>And, <00:23:56.225>uh, <00:23:56.425>I <00:23:56.625>dunno, <00:23:56.825>you <00:23:57.025>can <00:23:57.225>change <00:23:57.425>colors,

435
00:23:58.345 --> 00:24:00.165
<00:23:58.345>you <00:23:58.545>can <00:23:58.745>change <00:23:58.945>the <00:23:59.145>text <00:23:59.345>sites, <00:23:59.545>you <00:23:59.745>can,

436
00:24:00.305 --> 00:24:02.725
<00:24:00.305>uh, <00:24:01.005>whatever, <00:24:01.705>whatever.

437
00:24:03.025 --> 00:24:06.245
<00:24:03.025>If <00:24:03.152>you, <00:24:03.279>if <00:24:03.406>you <00:24:03.534>use <00:24:03.661>Tailwind, <00:24:03.788>you <00:24:03.915>know <00:24:04.043>already <00:24:04.170>that <00:24:04.297>you <00:24:04.425>can,

438
00:24:06.245 --> 00:24:10.145
<00:24:06.245>uh, <00:24:06.478>just <00:24:06.711>change <00:24:06.945>the, <00:24:07.178>the <00:24:07.411>text <00:24:07.645>sides

439
00:24:10.725 --> 00:24:12.905
<00:24:10.725>and <00:24:11.191>everything <00:24:11.658>is <00:24:12.125>recompiled.

440
00:24:13.085 --> 00:24:14.225
<00:24:13.085>No, <00:24:13.427>this <00:24:13.769>is <00:24:14.110>production.

441
00:24:14.775 --> 00:24:19.175
<00:24:14.775>This <00:24:14.975>is <00:24:15.175>excess <00:24:15.375>size <00:24:15.575>for <00:24:15.775>a <00:24:15.975>Tailwind <00:24:16.175>class.

442
00:24:21.085 --> 00:24:21.695
<00:24:21.085>Okay <00:24:21.634>folks,

443
00:24:22.345 --> 00:24:26.315
<00:24:22.345>guess <00:24:23.045>that's <00:24:23.745>it.

444
00:24:28.795 --> 00:24:29.855
<00:24:28.795>Please <00:24:29.113>get <00:24:29.431>in <00:24:29.749>touch.