WEBVTT

1
00:00:03.515 --> 00:00:05.535
<00:00:03.515>So <00:00:03.715>I <00:00:03.915>just <00:00:04.115>want <00:00:04.315>to <00:00:04.515>highlight <00:00:04.715>by <00:00:04.915>nature,

2
00:00:05.695 --> 00:00:06.895
<00:00:05.695>I <00:00:05.965>am <00:00:06.235>a <00:00:06.505>software <00:00:06.774>developer.

3
00:00:07.035 --> 00:00:09.735
<00:00:07.035>I'm <00:00:07.315>nowhere <00:00:07.595>near <00:00:07.875>being <00:00:08.154>a <00:00:08.435>designer.

4
00:00:10.515 --> 00:00:11.975
<00:00:10.515>Uh, <00:00:10.843>though <00:00:11.172>Inten <00:00:11.500>the <00:00:11.829>intention

5
00:00:11.995 --> 00:00:14.415
<00:00:11.995>of <00:00:12.228>this <00:00:12.461>presentation <00:00:12.694>is <00:00:12.928>there's <00:00:13.161>a <00:00:13.395>lot

6
00:00:14.415 --> 00:00:16.535
<00:00:14.415>of <00:00:14.764>goodies <00:00:15.114>cooking <00:00:15.465>in <00:00:15.815>CSS,

7
00:00:16.875 --> 00:00:19.375
<00:00:16.875>and <00:00:17.155>I'm <00:00:17.435>seeing, <00:00:17.715>uh, <00:00:17.995>constantly, <00:00:18.275>um,

8
00:00:19.435 --> 00:00:23.015
<00:00:19.435>the <00:00:19.634>designers <00:00:19.834>focusing <00:00:20.035>on <00:00:20.235>tools <00:00:20.435>like, <00:00:20.634>um, <00:00:20.834>Figma

9
00:00:23.315 --> 00:00:24.735
<00:00:23.315>and, <00:00:23.741>uh, <00:00:24.167>other <00:00:24.593>things.

10
00:00:25.595 --> 00:00:27.495
<00:00:25.595>But <00:00:25.828>also <00:00:26.061>I <00:00:26.294>feel <00:00:26.528>like, <00:00:26.761>I <00:00:26.994>feel,

11
00:00:27.555 --> 00:00:30.015
<00:00:27.555>I'm <00:00:27.710>feeling <00:00:27.866>like <00:00:28.021>there's <00:00:28.177>a <00:00:28.332>need <00:00:28.488>for <00:00:28.643>bridging <00:00:28.799>the <00:00:28.955>gap

12
00:00:30.205 --> 00:00:34.695
<00:00:30.205>between, <00:00:30.404>uh, <00:00:30.604>what's <00:00:30.805>new <00:00:31.005>in <00:00:31.205>CSS <00:00:31.404>for <00:00:31.604>designers,

13
00:00:35.075 --> 00:00:37.015
<00:00:35.075>so <00:00:35.308>that <00:00:35.541>this <00:00:35.775>can <00:00:36.008>somehow <00:00:36.241>influence <00:00:36.475>some

14
00:00:37.015 --> 00:00:39.815
<00:00:37.015>of <00:00:37.170>the <00:00:37.326>design <00:00:37.481>decisions, <00:00:37.637>even <00:00:37.792>if <00:00:37.948>you're, <00:00:38.103>you're <00:00:38.259>using <00:00:38.415>Figma,

15
00:00:39.925 --> 00:00:43.775
<00:00:39.925>it's <00:00:40.065>just <00:00:40.205>being <00:00:40.345>aware <00:00:40.485>of <00:00:40.625>what <00:00:40.765>is, <00:00:40.904>what <00:00:41.044>browsers <00:00:41.184>are <00:00:41.324>capable.

16
00:00:44.155 --> 00:00:47.415
<00:00:44.155>Uh, <00:00:44.271>these <00:00:44.388>days. <00:00:44.505>It's <00:00:44.621>just <00:00:44.738>a <00:00:44.855>very <00:00:44.971>good <00:00:45.088>asset <00:00:45.205>if <00:00:45.321>you <00:00:45.438>ask <00:00:45.555>me.

17
00:00:48.315 --> 00:00:50.135
<00:00:48.315>So, <00:00:48.665>let's <00:00:49.015>see <00:00:49.364>our <00:00:49.714>agenda.

18
00:00:52.605 --> 00:00:54.665
<00:00:52.605>Um, <00:00:53.305>actually <00:00:54.004>the,

19
00:00:54.665 --> 00:00:56.945
<00:00:54.665>the <00:00:54.865>presentation <00:00:55.065>is <00:00:55.265>con <00:00:55.464>composed <00:00:55.665>of <00:00:55.865>six <00:00:56.065>parts.

20
00:00:57.245 --> 00:00:59.185
<00:00:57.245>Um, <00:00:57.445>one <00:00:57.644>of <00:00:57.845>the, <00:00:58.044>one <00:00:58.245>of <00:00:58.445>the <00:00:58.644>parties,

21
00:00:59.255 --> 00:01:01.465
<00:00:59.255>just <00:00:59.488>web <00:00:59.721>is <00:00:59.955>not <00:01:00.188>left <00:01:00.421>to <00:01:00.655>right.

22
00:01:01.735 --> 00:01:03.065
<00:01:01.735>It's <00:01:01.974>not <00:01:02.213>just <00:01:02.453>left <00:01:02.692>to <00:01:02.931>right.

23
00:01:03.065 --> 00:01:05.665
<00:01:03.065>There <00:01:03.345>are <00:01:03.625>other <00:01:03.905>writing <00:01:04.185>systems, <00:01:04.465>uh,

24
00:01:06.085 --> 00:01:09.545
<00:01:06.085>and <00:01:06.225>if <00:01:06.365>you <00:01:06.505>want, <00:01:06.645>uh, <00:01:06.785>if <00:01:06.925>we <00:01:07.065>want <00:01:07.205>to <00:01:07.345>cover <00:01:07.485>inclusive,

25
00:01:09.605 --> 00:01:12.345
<00:01:09.605>if <00:01:09.745>we <00:01:09.885>want <00:01:10.025>our <00:01:10.165>application <00:01:10.305>to <00:01:10.445>be <00:01:10.585>inclusive, <00:01:10.725>uh, <00:01:10.865>we <00:01:11.005>have

26
00:01:12.345 --> 00:01:15.385
<00:01:12.345>to <00:01:12.545>consider <00:01:12.745>other, <00:01:12.945>um, <00:01:13.145>writing <00:01:13.345>systems <00:01:13.545>as <00:01:13.745>well.

27
00:01:15.415 --> 00:01:16.465
<00:01:15.414>I'll <00:01:15.604>just <00:01:15.792>briefly <00:01:15.982>touch <00:01:16.171>on <00:01:16.360>that.

28
00:01:17.045 --> 00:01:20.145
<00:01:17.045>Uh, <00:01:17.245>there <00:01:17.445>are <00:01:17.645>new <00:01:17.845>color <00:01:18.045>spaces, <00:01:18.245>um, <00:01:18.445>uh,

29
00:01:20.175 --> 00:01:22.305
<00:01:20.175>some <00:01:20.375>new <00:01:20.575>measurement <00:01:20.774>units, <00:01:20.975>which <00:01:21.175>will <00:01:21.375>allow <00:01:21.575>us

30
00:01:22.325 --> 00:01:26.105
<00:01:22.325>to <00:01:22.525>create <00:01:22.725>a <00:01:22.925>more <00:01:23.125>flexible <00:01:23.325>layouts, <00:01:23.525>uh, <00:01:23.725>to

31
00:01:27.685 --> 00:01:28.865
<00:01:27.685>new <00:01:28.216>goodies, <00:01:28.747>container

32
00:01:28.865 --> 00:01:31.145
<00:01:28.865>and <00:01:29.098>style <00:01:29.331>queries, <00:01:29.565>uh, <00:01:29.798>which <00:01:30.031>allow <00:01:30.265>us

33
00:01:31.205 --> 00:01:32.985
<00:01:31.205>to <00:01:31.438>use <00:01:31.671>style <00:01:31.905>our <00:01:32.138>stuff <00:01:32.371>based <00:01:32.605>on

34
00:01:32.985 --> 00:01:34.065
<00:01:32.985>some <00:01:33.228>sort <00:01:33.471>of <00:01:33.714>parent <00:01:33.957>container.

35
00:01:34.725 --> 00:01:37.185
<00:01:34.725>Um, <00:01:35.191>there's <00:01:35.658>some, <00:01:36.125>um,

36
00:01:37.545 --> 00:01:39.985
<00:01:37.545>magician <00:01:37.895>called <00:01:38.245>Houdini <00:01:38.595>from <00:01:38.945>history.

37
00:01:40.165 --> 00:01:42.785
<00:01:40.164>And, <00:01:40.398>um, <00:01:40.631>CSS <00:01:40.865>Houdini <00:01:41.098>is <00:01:41.331>a <00:01:41.565>project

38
00:01:42.885 --> 00:01:45.025
<00:01:42.884>and <00:01:43.085>which <00:01:43.285>is <00:01:43.484>supported <00:01:43.684>by <00:01:43.884>many <00:01:44.085>browsers, <00:01:44.285>which,

39
00:01:45.315 --> 00:01:48.185
<00:01:45.315>which <00:01:45.470>allow <00:01:45.626>you <00:01:45.781>to <00:01:45.937>do <00:01:46.092>some, <00:01:46.248>some <00:01:46.403>of <00:01:46.559>the <00:01:46.715>things

40
00:01:48.185 --> 00:01:49.625
<00:01:48.185>that <00:01:48.509>were <00:01:48.833>not <00:01:49.157>possible <00:01:49.481>before.

41
00:01:50.425 --> 00:01:52.425
<00:01:50.425>Although <00:01:50.625>the <00:01:50.825>status <00:01:51.024>of <00:01:51.225>Houdini <00:01:51.425>is <00:01:51.625>somewhat <00:01:51.825>frozen

42
00:01:52.425 --> 00:01:53.665
<00:01:52.425>these <00:01:52.648>days, <00:01:52.871>but <00:01:53.094>I'll <00:01:53.317>cover <00:01:53.541>it.

43
00:01:54.285 --> 00:01:58.185
<00:01:54.285>Uh, <00:01:54.425>and <00:01:54.565>also <00:01:54.705>I'll <00:01:54.845>just <00:01:54.985>talk <00:01:55.125>about <00:01:55.265>what's <00:01:55.405>new <00:01:55.545>animation, <00:01:55.685>API,

44
00:01:58.235 --> 00:02:00.185
<00:01:58.235>where <00:01:58.515>this <00:01:58.795>would <00:01:59.075>also <00:01:59.355>influence <00:01:59.635>some

45
00:02:00.185 --> 00:02:03.265
<00:02:00.185>of <00:02:00.340>the <00:02:00.496>decisions <00:02:00.651>you <00:02:00.807>might <00:02:00.962>want <00:02:01.118>to <00:02:01.273>take <00:02:01.429>for <00:02:01.585>designing.

46
00:02:04.165 --> 00:02:07.505
<00:02:04.165>So <00:02:04.305>let's <00:02:04.445>start <00:02:04.585>with <00:02:04.725>the <00:02:04.865>web <00:02:05.005>is <00:02:05.145>not <00:02:05.285>left <00:02:05.425>to <00:02:05.565>right.

47
00:02:08.245 --> 00:02:11.265
<00:02:08.245>Uh, <00:02:08.420>we'll <00:02:08.595>look <00:02:08.770>at <00:02:08.945>the <00:02:09.120>writing <00:02:09.295>systems, <00:02:09.470>uh, <00:02:09.645>some,

48
00:02:11.285 --> 00:02:13.505
<00:02:11.285>the <00:02:11.565>cover <00:02:11.845>concepts <00:02:12.125>like <00:02:12.405>logical <00:02:12.685>properties,

49
00:02:13.505 --> 00:02:17.025
<00:02:13.505>writing <00:02:13.855>directions, <00:02:14.204>uh, <00:02:14.555>where <00:02:14.905>Flexbox

50
00:02:17.045 --> 00:02:18.825
<00:02:17.045>and <00:02:17.325>Grid <00:02:17.605>are <00:02:17.885>somewhat <00:02:18.165>very <00:02:18.445>old,

51
00:02:18.825 --> 00:02:21.865
<00:02:18.825>perhaps <00:02:19.000>Flexbox <00:02:19.174>itself <00:02:19.350>is <00:02:19.524>like <00:02:19.700>10 <00:02:19.875>years <00:02:20.049>old <00:02:20.225>concept,

52
00:02:22.045 --> 00:02:23.705
<00:02:22.045>but <00:02:22.278>we <00:02:22.511>have <00:02:22.745>a <00:02:22.978>new, <00:02:23.211>uh, <00:02:23.445>cousin

53
00:02:23.725 --> 00:02:24.985
<00:02:23.725>of <00:02:23.951>them, <00:02:24.178>which <00:02:24.405>is <00:02:24.632>called <00:02:24.859>Subgroup.

54
00:02:24.985 --> 00:02:25.985
<00:02:24.985>We'll <00:02:25.285>just <00:02:25.585>visit <00:02:25.885>that.

55
00:02:27.745 --> 00:02:29.845
<00:02:27.745>Uh, <00:02:27.945>before <00:02:28.145>we <00:02:28.345>start, <00:02:28.545>let's <00:02:28.745>look <00:02:28.945>at <00:02:29.145>the

56
00:02:30.525 --> 00:02:33.245
<00:02:30.525>alphabet <00:02:30.758>distribution <00:02:30.991>AMO <00:02:31.225>among <00:02:31.458>among <00:02:31.691>the <00:02:31.925>world.

57
00:02:33.715 --> 00:02:38.085
<00:02:33.715>That <00:02:33.870>is, <00:02:34.026>uh, <00:02:34.181>many, <00:02:34.337>many <00:02:34.492>countries <00:02:34.648>you <00:02:34.803>can <00:02:34.959>see <00:02:35.115>sticking

58
00:02:38.145 --> 00:02:40.885
<00:02:38.145>to <00:02:38.320>Latin <00:02:38.495>alphabet, <00:02:38.670>but <00:02:38.845>apparently <00:02:39.020>that's <00:02:39.195>not <00:02:39.370>the <00:02:39.545>case.

59
00:02:41.665 --> 00:02:43.685
<00:02:41.665>Uh, <00:02:42.015>apparently <00:02:42.364>there's <00:02:42.715>a <00:02:43.065>whole,

60
00:02:43.685 --> 00:02:47.045
<00:02:43.685>you <00:02:43.825>can <00:02:43.965>see <00:02:44.105>the <00:02:44.245>whole <00:02:44.385>green <00:02:44.525>region <00:02:44.665>using <00:02:44.805>an <00:02:44.945>Arabic <00:02:45.085>letters.

61
00:02:47.585 --> 00:02:50.245
<00:02:47.585>And <00:02:47.818>actually, <00:02:48.051>it's <00:02:48.285>not <00:02:48.518>just <00:02:48.751>the <00:02:48.985>alphabet,

62
00:02:50.265 --> 00:02:52.205
<00:02:50.265>but <00:02:50.614>also, <00:02:50.964>uh, <00:02:51.315>in <00:02:51.665>Arabic.

63
00:02:52.385 --> 00:02:54.485
<00:02:52.385>The <00:02:52.584>right <00:02:52.785>direction <00:02:52.984>is <00:02:53.185>from <00:02:53.385>right <00:02:53.584>to <00:02:53.785>left.

64
00:02:54.865 --> 00:02:57.725
<00:02:54.865>And <00:02:55.065>this <00:02:55.265>somehow <00:02:55.465>influences <00:02:55.665>your <00:02:55.865>design <00:02:56.065>a <00:02:56.265>lot.

65
00:02:58.545 --> 00:03:01.605
<00:02:58.545>And <00:02:58.700>if <00:02:58.856>you <00:02:59.011>are <00:02:59.167>intended <00:02:59.322>to <00:02:59.478>design <00:02:59.633>an <00:02:59.789>inclusive <00:02:59.945>application,

66
00:03:01.715 --> 00:03:03.925
<00:03:01.715>then, <00:03:02.065>and <00:03:02.415>if <00:03:02.765>you <00:03:03.115>want

67
00:03:03.925 --> 00:03:06.645
<00:03:03.925>to <00:03:04.125>include <00:03:04.325>something <00:03:04.525>like <00:03:04.725>400 <00:03:04.925>million <00:03:05.125>Arabic <00:03:05.325>speakers,

68
00:03:07.035 --> 00:03:10.365
<00:03:07.035>then <00:03:07.210>this <00:03:07.385>is <00:03:07.560>something <00:03:07.734>you <00:03:07.910>should <00:03:08.085>definitely <00:03:08.260>be <00:03:08.435>considerate

69
00:03:10.545 --> 00:03:14.405
<00:03:10.545>and <00:03:10.700>design <00:03:10.856>your <00:03:11.011>application, <00:03:11.167>uh, <00:03:11.322>for <00:03:11.478>this <00:03:11.633>kind <00:03:11.789>of <00:03:11.945>right

70
00:03:14.465 --> 00:03:15.605
<00:03:14.465>to <00:03:14.721>left <00:03:14.978>scheme <00:03:15.234>as <00:03:15.491>well.

71
00:03:16.385 --> 00:03:18.605
<00:03:16.385>But <00:03:16.584>also, <00:03:16.785>if <00:03:16.984>you <00:03:17.185>go <00:03:17.385>to <00:03:17.584>Asia, <00:03:17.785>um,

72
00:03:19.165 --> 00:03:21.285
<00:03:19.165>historically <00:03:19.398>there <00:03:19.631>were <00:03:19.864>usages <00:03:20.098>of <00:03:20.331>vertical <00:03:20.565>writing.

73
00:03:22.365 --> 00:03:25.745
<00:03:22.365>So <00:03:22.520>to <00:03:22.676>be <00:03:22.831>fair, <00:03:22.987>uh, <00:03:23.142>after <00:03:23.298>eighties, <00:03:23.453>in <00:03:23.609>particular, <00:03:23.765>Korea

74
00:03:26.005 --> 00:03:29.705
<00:03:26.005>and <00:03:26.204>China, <00:03:26.405>vertical <00:03:26.605>writing <00:03:26.805>systems <00:03:27.005>aren't <00:03:27.204>as <00:03:27.405>common.

75
00:03:30.165 --> 00:03:31.745
<00:03:30.165>Uh, <00:03:30.515>become, <00:03:30.864>became <00:03:31.215>somewhat <00:03:31.565>rare.

76
00:03:32.285 --> 00:03:34.545
<00:03:32.285>But <00:03:32.565>for <00:03:32.845>example, <00:03:33.125>in <00:03:33.405>Japan, <00:03:33.685>uh,

77
00:03:35.505 --> 00:03:37.385
<00:03:35.505>vertical <00:03:35.738>writing <00:03:35.971>is <00:03:36.204>still <00:03:36.438>very <00:03:36.671>common, <00:03:36.905>uh,

78
00:03:37.385 --> 00:03:38.785
<00:03:37.385>especially <00:03:37.805>on <00:03:38.225>daily <00:03:38.644>newspapers.

79
00:03:39.165 --> 00:03:40.945
<00:03:39.165>So <00:03:39.340>we'll <00:03:39.515>just <00:03:39.690>make <00:03:39.864>a <00:03:40.040>brief <00:03:40.215>visit <00:03:40.390>on <00:03:40.565>this

80
00:03:40.945 --> 00:03:44.105
<00:03:40.945>and <00:03:41.072>try <00:03:41.199>to <00:03:41.326>see <00:03:41.454>how <00:03:41.581>we <00:03:41.708>can <00:03:41.835>tackle <00:03:41.963>this <00:03:42.090>problem <00:03:42.217>with <00:03:42.345>CSS.

81
00:03:45.085 --> 00:03:46.905
<00:03:45.085>Um, <00:03:45.285>you <00:03:45.485>can <00:03:45.685>see <00:03:45.885>there <00:03:46.085>are <00:03:46.285>two <00:03:46.485>photos

82
00:03:46.975 --> 00:03:48.265
<00:03:46.975>here <00:03:47.207>on <00:03:47.439>the <00:03:47.671>left <00:03:47.903>hand <00:03:48.136>side.

83
00:03:48.265 --> 00:03:50.905
<00:03:48.265>There's <00:03:48.464>this <00:03:48.665>a, <00:03:48.864>a <00:03:49.065>survey <00:03:49.265>for, <00:03:49.464>for <00:03:49.665>Korea.

84
00:03:51.685 --> 00:03:56.025
<00:03:51.685>Uh, <00:03:51.785>as <00:03:51.885>I <00:03:51.985>said, <00:03:52.085>uh, <00:03:52.185>in <00:03:52.285>Korea, <00:03:52.385>I <00:03:52.485>think, <00:03:52.585>uh, <00:03:52.685>as <00:03:52.785>far <00:03:52.885>as <00:03:52.985>I <00:03:53.085>know,

85
00:03:56.525 --> 00:03:59.025
<00:03:56.525>uh, <00:03:56.758>the <00:03:56.991>vertical <00:03:57.225>writing <00:03:57.458>isn't <00:03:57.691>very <00:03:57.925>common,

86
00:03:59.245 --> 00:04:02.825
<00:03:59.245>but <00:03:59.400>still, <00:03:59.556>there <00:03:59.711>are <00:03:59.867>cases <00:04:00.022>where, <00:04:00.178>uh, <00:04:00.333>you <00:04:00.489>can <00:04:00.645>encounter.

87
00:04:03.245 --> 00:04:05.425
<00:04:03.245>And <00:04:03.385>on <00:04:03.525>the <00:04:03.665>right <00:04:03.805>hand <00:04:03.945>side, <00:04:04.085>there's <00:04:04.225>a <00:04:04.365>highway <00:04:04.505>on <00:04:04.645>China

88
00:04:05.515 --> 00:04:08.345
<00:04:05.515>where, <00:04:05.714>uh, <00:04:05.915>actually <00:04:06.114>the <00:04:06.315>lane <00:04:06.515>says <00:04:06.714>slow <00:04:06.915>lane,

89
00:04:08.345 --> 00:04:09.545
<00:04:08.345>middle <00:04:08.561>lane, <00:04:08.777>and <00:04:08.993>the <00:04:09.209>fast <00:04:09.424>lane.

90
00:04:10.005 --> 00:04:12.625
<00:04:10.005>And <00:04:10.144>you <00:04:10.285>can <00:04:10.424>see <00:04:10.565>it's <00:04:10.704>actually <00:04:10.845>the <00:04:10.984>let <00:04:11.125>the <00:04:11.265>letters <00:04:11.405>are,

91
00:04:12.685 --> 00:04:15.625
<00:04:12.685>the <00:04:12.885>characters <00:04:13.085>are, <00:04:13.285>are <00:04:13.485>coming <00:04:13.685>back <00:04:13.885>to <00:04:14.085>you.

92
00:04:15.625 --> 00:04:17.265
<00:04:15.625>So <00:04:15.800>the <00:04:15.975>first <00:04:16.149>one <00:04:16.325>is <00:04:16.500>the, <00:04:16.675>the, <00:04:16.850>the <00:04:17.024>first,

93
00:04:17.445 --> 00:04:18.945
<00:04:17.445>the <00:04:17.670>lower <00:04:17.894>letter <00:04:18.120>is <00:04:18.344>the <00:04:18.570>first <00:04:18.795>one,

94
00:04:19.485 --> 00:04:23.705
<00:04:19.485>and <00:04:19.718>there <00:04:19.951>is <00:04:20.185>some, <00:04:20.418>uh, <00:04:20.651>occasional <00:04:20.885>encounters

95
00:04:23.705 --> 00:04:26.185
<00:04:23.705>with <00:04:23.905>vertical <00:04:24.104>writing <00:04:24.305>writings <00:04:24.505>even <00:04:24.705>in <00:04:24.905>these <00:04:25.104>countries.

96
00:04:26.495 --> 00:04:28.905
<00:04:26.495>However, <00:04:26.728>this <00:04:26.961>is <00:04:27.195>a <00:04:27.428>modern <00:04:27.661>Japanese <00:04:27.895>newspaper,

97
00:04:29.485 --> 00:04:33.145
<00:04:29.485>and <00:04:29.640>you <00:04:29.796>can <00:04:29.951>see <00:04:30.107>it's <00:04:30.262>entirely, <00:04:30.418>uh, <00:04:30.573>it's <00:04:30.729>mostly, <00:04:30.885>uh,

98
00:04:33.145 --> 00:04:34.745
<00:04:33.145>written <00:04:33.611>in <00:04:34.078>vertical <00:04:34.544>letters.

99
00:04:35.205 --> 00:04:38.225
<00:04:35.205>Um, <00:04:35.380>but <00:04:35.555>I <00:04:35.729>can <00:04:35.905>also <00:04:36.080>see <00:04:36.255>that, <00:04:36.430>uh, <00:04:36.604>there's,

100
00:04:38.225 --> 00:04:42.025
<00:04:38.225>there's <00:04:38.400>some <00:04:38.575>numbers <00:04:38.750>here <00:04:38.925>which <00:04:39.100>are, <00:04:39.275>uh, <00:04:39.450>placed, <00:04:39.625>uh,

101
00:04:42.685 --> 00:04:45.625
<00:04:42.685>in <00:04:42.840>placed, <00:04:42.996>uh, <00:04:43.151>in, <00:04:43.307>in <00:04:43.462>some <00:04:43.618>sort <00:04:43.773>of <00:04:43.929>vertical <00:04:44.085>oriented,

102
00:04:45.625 --> 00:04:46.905
<00:04:45.625>but <00:04:46.009>still <00:04:46.393>they're <00:04:46.777>vertical.

103
00:04:47.275 --> 00:04:51.065
<00:04:47.275>We'll <00:04:47.402>just <00:04:47.529>see <00:04:47.656>how <00:04:47.784>CSS <00:04:47.911>can <00:04:48.038>allow <00:04:48.165>us <00:04:48.293>to <00:04:48.420>build <00:04:48.547>such <00:04:48.674>things.

104
00:04:51.975 --> 00:04:56.145
<00:04:51.975>Another <00:04:52.175>Japanese <00:04:52.375>website, <00:04:52.575>um, <00:04:52.775>which <00:04:52.975>is <00:04:53.175>also <00:04:53.375>demonstrating,

105
00:04:56.365 --> 00:04:58.945
<00:04:56.365>uh, <00:04:56.645>vertical <00:04:56.925>writing <00:04:57.205>is <00:04:57.485>still <00:04:57.765>common

106
00:04:58.965 --> 00:05:01.425
<00:04:58.965>and <00:04:59.140>popular <00:04:59.315>in, <00:04:59.490>in, <00:04:59.665>in <00:04:59.840>Japan, <00:05:00.015>in <00:05:00.190>particular <00:05:00.365>Japan.

107
00:05:02.765 --> 00:05:06.025
<00:05:02.765>Um, <00:05:02.940>this <00:05:03.115>is <00:05:03.289>a <00:05:03.465>BBC <00:05:03.640>news <00:05:03.815>for, <00:05:03.990>uh, <00:05:04.164>for,

108
00:05:06.845 --> 00:05:07.945
<00:05:06.845>uh, <00:05:07.340>Arabic <00:05:07.835>region.

109
00:05:08.405 --> 00:05:12.425
<00:05:08.405>And <00:05:08.532>you <00:05:08.659>can <00:05:08.786>see, <00:05:08.914>uh, <00:05:09.041>not <00:05:09.168>only <00:05:09.295>the <00:05:09.423>letters <00:05:09.550>going <00:05:09.677>from <00:05:09.804>right

110
00:05:12.425 --> 00:05:15.545
<00:05:12.425>to <00:05:12.600>left, <00:05:12.775>but <00:05:12.950>also <00:05:13.125>the <00:05:13.300>logo <00:05:13.475>and <00:05:13.650>entire <00:05:13.825>thing.

111
00:05:15.845 --> 00:05:18.345
<00:05:15.845>It <00:05:16.078>appears <00:05:16.311>as <00:05:16.545>if <00:05:16.778>it's <00:05:17.011>mirror <00:05:17.245>imaged.

112
00:05:19.045 --> 00:05:23.625
<00:05:19.045>And <00:05:19.172>again, <00:05:19.299>it <00:05:19.426>might <00:05:19.554>be <00:05:19.681>pretty <00:05:19.808>tricky <00:05:19.935>to, <00:05:20.063>to, <00:05:20.190>to, <00:05:20.317>to <00:05:20.445>have

113
00:05:23.645 --> 00:05:25.305
<00:05:23.645>to <00:05:23.995>build <00:05:24.344>your <00:05:24.695>application <00:05:25.044>website

114
00:05:25.815 --> 00:05:28.225
<00:05:25.815>that <00:05:26.048>would <00:05:26.281>work <00:05:26.515>properly <00:05:26.748>in <00:05:26.981>both <00:05:27.215>directions,

115
00:05:28.325 --> 00:05:32.675
<00:05:28.325>but <00:05:28.480>one <00:05:28.636>should <00:05:28.791>be <00:05:28.947>considerate, <00:05:29.102>uh, <00:05:29.258>these <00:05:29.413>kind <00:05:29.569>of <00:05:29.724>cases

116
00:05:32.685 --> 00:05:35.355
<00:05:32.685>where <00:05:32.840>your <00:05:32.996>visitors <00:05:33.151>might <00:05:33.307>be <00:05:33.462>from <00:05:33.618>this <00:05:33.773>part <00:05:33.929>of <00:05:34.085>region.

117
00:05:36.755 --> 00:05:38.805
<00:05:36.755>Another <00:05:37.221>interesting <00:05:37.688>aspect, <00:05:38.155>while

118
00:05:39.595 --> 00:05:41.405
<00:05:39.595>it's <00:05:39.945>certainly <00:05:40.295>not <00:05:40.645>super <00:05:40.995>popular,

119
00:05:41.545 --> 00:05:45.085
<00:05:41.545>but <00:05:41.745>Mongolian, <00:05:41.945>uh, <00:05:42.145>tradition, <00:05:42.345>Mongolian <00:05:42.545>has <00:05:42.745>this <00:05:42.945>kind

120
00:05:45.085 --> 00:05:49.205
<00:05:45.085>of <00:05:45.260>writing <00:05:45.435>system <00:05:45.609>where, <00:05:45.784>uh, <00:05:45.960>you're <00:05:46.135>reading <00:05:46.310>again <00:05:46.484>vertically

121
00:05:49.585 --> 00:05:51.605
<00:05:49.585>and <00:05:49.935>perhaps <00:05:50.284>similar <00:05:50.635>to <00:05:50.984>Japanese.

122
00:05:51.865 --> 00:05:54.885
<00:05:51.865>Uh, <00:05:51.992>this <00:05:52.119>is <00:05:52.246>some, <00:05:52.374>one <00:05:52.501>of <00:05:52.628>the, <00:05:52.755>one <00:05:52.883>of <00:05:53.010>the <00:05:53.137>writing <00:05:53.265>systems

123
00:05:54.885 --> 00:05:56.805
<00:05:54.885>that's <00:05:55.235>used <00:05:55.585>in <00:05:55.935>Mongolia <00:05:56.284>sites.

124
00:05:57.945 --> 00:06:00.565
<00:05:57.945>So <00:05:58.100>what <00:05:58.256>browser <00:05:58.411>offers <00:05:58.567>is <00:05:58.722>that <00:05:58.878>there's, <00:05:59.033>there's <00:05:59.189>a <00:05:59.344>property,

125
00:06:00.785 --> 00:06:05.045
<00:06:00.785>uh, <00:06:00.901>in <00:06:01.018>CSS, <00:06:01.135>which <00:06:01.251>we'll <00:06:01.368>see <00:06:01.485>that, <00:06:01.601>that <00:06:01.718>allow <00:06:01.835>you <00:06:01.951>to <00:06:02.068>set, <00:06:02.185>uh,

126
00:06:05.175 --> 00:06:07.245
<00:06:05.175>which <00:06:05.455>is <00:06:05.735>called <00:06:06.015>writing <00:06:06.295>direction, <00:06:06.575>uh,

127
00:06:07.585 --> 00:06:09.165
<00:06:07.585>the <00:06:08.284>writing <00:06:08.984>direction.

128
00:06:09.165 --> 00:06:12.805
<00:06:09.165>And <00:06:09.320>we <00:06:09.476>can <00:06:09.631>see <00:06:09.787>how <00:06:09.942>the <00:06:10.098>particular <00:06:10.253>script <00:06:10.409>behaves <00:06:10.565>under

129
00:06:13.705 --> 00:06:15.325
<00:06:13.705>the <00:06:14.171>current <00:06:14.638>writing <00:06:15.104>direction.

130
00:06:15.365 --> 00:06:18.925
<00:06:15.365>If <00:06:15.565>it's <00:06:15.765>horizontal <00:06:15.965>tb, <00:06:16.165>then, <00:06:16.365>uh, <00:06:16.565>well, <00:06:16.765>it's,

131
00:06:19.035 --> 00:06:20.965
<00:06:19.035>it's <00:06:19.385>the <00:06:19.735>writing <00:06:20.085>direction <00:06:20.435>becomes,

132
00:06:21.115 --> 00:06:23.165
<00:06:21.115>it's <00:06:21.290>just <00:06:21.465>the <00:06:21.640>way <00:06:21.815>we <00:06:21.990>are <00:06:22.165>familiar <00:06:22.340>with <00:06:22.515>that.

133
00:06:23.585 --> 00:06:26.005
<00:06:23.585>But <00:06:23.740>also, <00:06:23.896>you <00:06:24.051>can <00:06:24.207>set <00:06:24.362>this <00:06:24.518>property <00:06:24.673>to <00:06:24.829>vertical <00:06:24.984>LR

134
00:06:26.005 --> 00:06:27.165
<00:06:26.005>or <00:06:26.527>vertical <00:06:27.049>rl,

135
00:06:27.785 --> 00:06:31.005
<00:06:27.785>and <00:06:27.912>depending <00:06:28.039>on <00:06:28.166>which <00:06:28.294>one <00:06:28.421>you <00:06:28.548>set, <00:06:28.675>then <00:06:28.803>you <00:06:28.930>can <00:06:29.057>see <00:06:29.185>the,

136
00:06:31.025 --> 00:06:32.885
<00:06:31.025>the, <00:06:31.491>the <00:06:31.958>writing, <00:06:32.424>uh,

137
00:06:32.885 --> 00:06:34.645
<00:06:32.885>the <00:06:33.235>letters <00:06:33.585>become <00:06:33.935>vertically <00:06:34.284>oriented,

138
00:06:34.745 --> 00:06:38.905
<00:06:34.745>but <00:06:35.025>also, <00:06:35.305>uh, <00:06:35.585>the, <00:06:35.865>the, <00:06:36.145>the,

139
00:06:38.925 --> 00:06:41.305
<00:06:38.925>the <00:06:39.100>front <00:06:39.275>one <00:06:39.450>changes <00:06:39.625>be <00:06:39.800>becoming <00:06:39.975>the <00:06:40.150>right, <00:06:40.325>right

140
00:06:41.325 --> 00:06:42.905
<00:06:41.325>or <00:06:41.604>left, <00:06:41.885>depending <00:06:42.164>on <00:06:42.445>your <00:06:42.724>setting.

141
00:06:43.575 --> 00:06:47.985
<00:06:43.575>There's <00:06:43.750>also, <00:06:43.925>uh, <00:06:44.099>another <00:06:44.275>setting <00:06:44.450>called <00:06:44.625>sideways <00:06:44.800>lr, <00:06:44.974>uh,

142
00:06:47.995 --> 00:06:52.125
<00:06:47.995>which <00:06:48.345>also <00:06:48.695>flips <00:06:49.045>the, <00:06:49.395>uh,

143
00:06:52.795 --> 00:06:55.205
<00:06:52.795>letters <00:06:53.028>in <00:06:53.261>particular <00:06:53.495>with <00:06:53.728>the <00:06:53.961>vertical <00:06:54.195>script.

144
00:06:55.545 --> 00:06:57.845
<00:06:55.545>But <00:06:55.778>this <00:06:56.011>is <00:06:56.245>only <00:06:56.478>available <00:06:56.711>in <00:06:56.945>Firefox,

145
00:06:58.105 --> 00:07:00.565
<00:06:58.105>not <00:06:58.338>available <00:06:58.571>in <00:06:58.805>Chrome <00:06:59.038>or <00:06:59.271>Safari <00:06:59.505>days.

146
00:07:01.905 --> 00:07:04.765
<00:07:01.905>And <00:07:02.021>the <00:07:02.138>way, <00:07:02.255>the <00:07:02.371>way <00:07:02.488>we <00:07:02.604>use <00:07:02.721>this <00:07:02.838>is <00:07:02.955>that <00:07:03.071>I <00:07:03.188>can <00:07:03.304>actually,

147
00:07:04.965 --> 00:07:05.845
<00:07:04.965>actually, <00:07:05.123>you <00:07:05.281>can <00:07:05.440>see <00:07:05.598>there's <00:07:05.757>some

148
00:07:06.165 --> 00:07:07.685
<00:07:06.165>CSS <00:07:06.507>property <00:07:06.849>called <00:07:07.191>writing <00:07:07.533>mode.

149
00:07:08.465 --> 00:07:12.045
<00:07:08.465>And <00:07:08.640>you, <00:07:08.815>if <00:07:08.989>you <00:07:09.164>want <00:07:09.340>a <00:07:09.515>writing <00:07:09.690>mode <00:07:09.864>vertically,

150
00:07:12.225 --> 00:07:15.765
<00:07:12.225>we <00:07:12.425>set <00:07:12.625>this <00:07:12.825>property <00:07:13.025>to, <00:07:13.225>uh, <00:07:13.425>vertical <00:07:13.625>lr.

151
00:07:16.465 --> 00:07:20.165
<00:07:16.465>And <00:07:16.604>also <00:07:16.744>another <00:07:16.885>interesting <00:07:17.025>aspect <00:07:17.164>of <00:07:17.304>it <00:07:17.445>that <00:07:17.585>you <00:07:17.724>can <00:07:17.864>see,

152
00:07:20.165 --> 00:07:23.285
<00:07:20.165>there's <00:07:20.398>a <00:07:20.631>text <00:07:20.865>combined <00:07:21.098>upright <00:07:21.331>CSS <00:07:21.565>property,

153
00:07:23.815 --> 00:07:26.925
<00:07:23.815>which <00:07:23.955>is <00:07:24.094>when <00:07:24.235>you <00:07:24.375>combine <00:07:24.515>it, <00:07:24.655>this, <00:07:24.795>you <00:07:24.935>also, <00:07:25.075>the <00:07:25.215>digits,

154
00:07:27.145 --> 00:07:29.845
<00:07:27.145>uh, <00:07:27.378>up <00:07:27.611>to <00:07:27.844>two <00:07:28.078>digits <00:07:28.311>become <00:07:28.544>vertical.

155
00:07:30.385 --> 00:07:33.685
<00:07:30.385>So <00:07:30.525>by <00:07:30.664>using <00:07:30.805>this <00:07:30.945>kind <00:07:31.085>of <00:07:31.224>technique, <00:07:31.365>you <00:07:31.505>can <00:07:31.645>also <00:07:31.784>address,

156
00:07:34.385 --> 00:07:36.965
<00:07:34.385>uh, <00:07:34.585>vertical <00:07:34.784>writing <00:07:34.985>with, <00:07:35.185>along <00:07:35.385>with <00:07:35.585>the <00:07:35.784>numbers.

157
00:07:37.025 --> 00:07:38.205
<00:07:37.025>So <00:07:37.378>CSS <00:07:37.733>allows <00:07:38.087>that.

158
00:07:40.965 --> 00:07:44.645
<00:07:40.965>Speaking <00:07:41.140>of <00:07:41.315>CSS, <00:07:41.490>uh, <00:07:41.665>there <00:07:41.840>is <00:07:42.015>a, <00:07:42.190>well, <00:07:42.365>somewhat,

159
00:07:44.675 --> 00:07:47.125
<00:07:44.675>perhaps <00:07:44.908>three <00:07:45.141>to <00:07:45.375>four <00:07:45.608>years <00:07:45.841>concept <00:07:46.075>called

160
00:07:47.125 --> 00:07:48.205
<00:07:47.125>logical <00:07:48.097>properties.

161
00:07:48.665 --> 00:07:51.325
<00:07:48.665>Uh, <00:07:48.820>I <00:07:48.976>think <00:07:49.131>it's <00:07:49.287>supported <00:07:49.442>by <00:07:49.598>all <00:07:49.753>browsers <00:07:49.909>these <00:07:50.065>days.

162
00:07:51.985 --> 00:07:54.565
<00:07:51.985>Uh, <00:07:52.218>we <00:07:52.451>used <00:07:52.685>to <00:07:52.918>use, <00:07:53.151>for <00:07:53.385>example,

163
00:07:54.845 --> 00:07:58.525
<00:07:54.845>whenever <00:07:54.985>we, <00:07:55.125>we <00:07:55.265>are <00:07:55.405>intend <00:07:55.545>to <00:07:55.685>set, <00:07:55.825>uh, <00:07:55.965>uh, <00:07:56.105>border <00:07:56.245>radios.

164
00:07:58.945 --> 00:08:00.245
<00:07:58.945>We, <00:07:59.112>we, <00:07:59.279>we, <00:07:59.446>we <00:07:59.613>are, <00:07:59.780>we <00:07:59.947>are <00:08:00.115>used

165
00:08:00.245 --> 00:08:03.245
<00:08:00.245>to <00:08:00.445>using <00:08:00.645>things <00:08:00.845>like <00:08:01.045>top <00:08:01.245>right, <00:08:01.445>top <00:08:01.645>left,

166
00:08:03.745 --> 00:08:07.045
<00:08:03.745>but <00:08:03.872>I <00:08:03.999>think <00:08:04.126>now <00:08:04.254>it <00:08:04.381>is <00:08:04.508>time <00:08:04.635>to <00:08:04.763>give <00:08:04.890>up <00:08:05.017>this <00:08:05.145>concept

167
00:08:07.385 --> 00:08:10.565
<00:08:07.385>and <00:08:07.585>start <00:08:07.784>using <00:08:07.985>the <00:08:08.185>concept <00:08:08.385>of <00:08:08.585>logical <00:08:08.784>properties.

168
00:08:10.905 --> 00:08:12.965
<00:08:10.905>In <00:08:11.060>this <00:08:11.216>case, <00:08:11.371>you <00:08:11.527>can <00:08:11.682>see <00:08:11.838>there <00:08:11.993>is <00:08:12.149>a, <00:08:12.304>uh,

169
00:08:13.025 --> 00:08:14.845
<00:08:13.025>border <00:08:13.304>radius <00:08:13.585>on <00:08:13.864>the <00:08:14.145>top <00:08:14.424>right,

170
00:08:15.425 --> 00:08:20.125
<00:08:15.425>but <00:08:15.565>the <00:08:15.705>border <00:08:15.845>is <00:08:15.985>set <00:08:16.125>as <00:08:16.265>border <00:08:16.405>start <00:08:16.545>and <00:08:16.685>radius, <00:08:16.825>uh,

171
00:08:20.465 --> 00:08:24.365
<00:08:20.465>and, <00:08:20.664>uh, <00:08:20.864>the <00:08:21.065>start <00:08:21.265>represents <00:08:21.465>the, <00:08:21.664>um, <00:08:21.864>the

172
00:08:25.485 --> 00:08:27.275
<00:08:25.485>upper <00:08:25.835>part <00:08:26.185>of <00:08:26.535>the <00:08:26.885>border

173
00:08:27.855 --> 00:08:30.835
<00:08:27.855>in <00:08:28.010>the <00:08:28.166>end <00:08:28.321>represents <00:08:28.477>the <00:08:28.632>right <00:08:28.788>part <00:08:28.943>of <00:08:29.099>the <00:08:29.255>border.

174
00:08:31.545 --> 00:08:34.195
<00:08:31.545>Once <00:08:31.720>you <00:08:31.895>set <00:08:32.070>your, <00:08:32.245>uh, <00:08:32.420>border <00:08:32.595>in <00:08:32.770>this <00:08:32.945>way

175
00:08:34.195 --> 00:08:38.395
<00:08:34.195>by <00:08:34.370>using <00:08:34.545>a <00:08:34.720>logical <00:08:34.895>property, <00:08:35.070>assuming <00:08:35.245>well, <00:08:35.420>uh, <00:08:35.595>your,

176
00:08:38.425 --> 00:08:40.355
<00:08:38.424>your <00:08:38.658>page <00:08:38.891>has <00:08:39.125>an, <00:08:39.358>uh, <00:08:39.591>Arabic <00:08:39.824>version,

177
00:08:40.945 --> 00:08:42.915
<00:08:40.945>then <00:08:41.225>it'll <00:08:41.505>automatically <00:08:41.785>look <00:08:42.065>like <00:08:42.345>this.

178
00:08:43.495 --> 00:08:47.035
<00:08:43.495>So <00:08:43.669>you <00:08:43.845>can <00:08:44.020>see, <00:08:44.195>uh, <00:08:44.370>the <00:08:44.545>concept <00:08:44.720>of <00:08:44.895>right

179
00:08:47.055 --> 00:08:51.075
<00:08:47.055>and <00:08:47.255>left <00:08:47.454>is, <00:08:47.655>is, <00:08:47.854>doesn't <00:08:48.055>make <00:08:48.255>much <00:08:48.454>sense

180
00:08:51.105 --> 00:08:53.715
<00:08:51.105>because <00:08:51.305>you, <00:08:51.505>you <00:08:51.705>don't <00:08:51.905>want <00:08:52.105>left <00:08:52.305>and <00:08:52.505>right.

181
00:08:53.895 --> 00:08:55.580
<00:08:53.895>You <00:08:54.050>just <00:08:54.206>don't <00:08:54.361>want <00:08:54.517>to <00:08:54.672>stick <00:08:54.828>to <00:08:54.983>left <00:08:55.139>and <00:08:55.295>right,

182
00:08:55.580 --> 00:08:59.685
<00:08:55.580>but <00:08:55.720>you <00:08:55.860>just <00:08:56.000>want <00:08:56.140>to <00:08:56.280>stick <00:08:56.420>to, <00:08:56.560>um, <00:08:56.700>um, <00:08:56.840>the, <00:08:56.980>the,

183
00:08:59.705 --> 00:09:01.765
<00:08:59.705>the <00:08:59.905>right <00:09:00.105>corner <00:09:00.305>depending <00:09:00.505>on <00:09:00.705>the <00:09:00.905>writing <00:09:01.105>system.

184
00:09:02.515 --> 00:09:05.685
<00:09:02.515>Yeah. <00:09:02.715>So <00:09:02.915>this <00:09:03.115>is <00:09:03.314>something <00:09:03.515>one <00:09:03.715>should <00:09:03.915>consider.

185
00:09:06.185 --> 00:09:07.285
<00:09:06.185>Uh, <00:09:06.515>here's <00:09:06.844>another <00:09:07.175>example.

186
00:09:07.425 --> 00:09:10.005
<00:09:07.425>Uh, <00:09:07.580>depending <00:09:07.736>on, <00:09:07.891>again, <00:09:08.047>the <00:09:08.202>writing <00:09:08.358>system, <00:09:08.513>the, <00:09:08.669>the, <00:09:08.824>the,

187
00:09:10.005 --> 00:09:12.645
<00:09:10.005>the <00:09:10.205>photo <00:09:10.405>and <00:09:10.605>the, <00:09:10.805>uh, <00:09:11.005>the, <00:09:11.205>uh, <00:09:11.405>the,

188
00:09:13.865 --> 00:09:15.685
<00:09:13.865>the <00:09:14.145>letters <00:09:14.425>can <00:09:14.705>change <00:09:14.985>their <00:09:15.265>places.

189
00:09:16.705 --> 00:09:18.205
<00:09:16.705>So <00:09:16.975>what <00:09:17.245>are <00:09:17.515>these <00:09:17.785>logical <00:09:18.055>properties?

190
00:09:19.325 --> 00:09:22.025
<00:09:19.325>Uh, <00:09:19.525>the <00:09:19.725>argument <00:09:19.925>is <00:09:20.125>this, <00:09:20.325>instead <00:09:20.525>of <00:09:20.725>wit

191
00:09:22.565 --> 00:09:24.145
<00:09:22.565>use <00:09:22.915>something <00:09:23.265>called <00:09:23.615>inline <00:09:23.965>site.

192
00:09:24.145 --> 00:09:26.945
<00:09:24.145>So <00:09:24.300>you, <00:09:24.456>today, <00:09:24.611>I <00:09:24.767>think, <00:09:24.922>I <00:09:25.078>mean, <00:09:25.233>this <00:09:25.389>is <00:09:25.545>supported

193
00:09:26.945 --> 00:09:28.785
<00:09:26.945>by <00:09:27.295>all <00:09:27.645>major <00:09:27.995>browsers, <00:09:28.345>uh,

194
00:09:29.045 --> 00:09:30.585
<00:09:29.045>and <00:09:29.322>it's <00:09:29.599>says, <00:09:29.876>very <00:09:30.153>good <00:09:30.431>maturity,

195
00:09:30.765 --> 00:09:32.545
<00:09:30.765>and <00:09:30.998>you <00:09:31.231>can <00:09:31.465>start <00:09:31.698>using <00:09:31.931>this <00:09:32.165>today,

196
00:09:32.545 --> 00:09:34.905
<00:09:32.545>and <00:09:32.745>which <00:09:32.944>I <00:09:33.145>would <00:09:33.344>recommend <00:09:33.545>using <00:09:33.745>it, <00:09:33.944>uh,

197
00:09:35.365 --> 00:09:36.865
<00:09:35.365>unless <00:09:35.590>you <00:09:35.815>have <00:09:36.040>a <00:09:36.265>very <00:09:36.490>good <00:09:36.715>reason.

198
00:09:37.165 --> 00:09:38.865
<00:09:37.165>Uh, <00:09:37.398>I <00:09:37.631>think <00:09:37.865>it's <00:09:38.098>better <00:09:38.331>to, <00:09:38.564>better

199
00:09:38.925 --> 00:09:40.465
<00:09:38.925>to <00:09:39.271>make <00:09:39.617>the <00:09:39.964>default <00:09:40.311>properties

200
00:09:40.465 --> 00:09:41.825
<00:09:40.465>as <00:09:40.771>the <00:09:41.077>logical <00:09:41.383>properties <00:09:41.689>rather

201
00:09:41.825 --> 00:09:42.945
<00:09:41.825>than <00:09:42.161>the <00:09:42.497>physical <00:09:42.833>properties.

202
00:09:43.485 --> 00:09:46.105
<00:09:43.485>Uh, <00:09:43.625>instead <00:09:43.765>of <00:09:43.905>max <00:09:44.045>width, <00:09:44.185>you <00:09:44.325>can <00:09:44.465>say <00:09:44.605>max <00:09:44.745>inline <00:09:44.885>size.

203
00:09:46.105 --> 00:09:48.585
<00:09:46.105>So <00:09:46.338>the <00:09:46.571>inline <00:09:46.805>word <00:09:47.038>is <00:09:47.271>actually <00:09:47.505>referring

204
00:09:48.585 --> 00:09:49.785
<00:09:48.585>to <00:09:48.945>something <00:09:49.305>like <00:09:49.665>horizontal.

205
00:09:50.325 --> 00:09:53.665
<00:09:50.325>Uh, <00:09:50.465>whenever <00:09:50.605>we <00:09:50.745>have <00:09:50.885>width, <00:09:51.025>we <00:09:51.165>just <00:09:51.305>sw <00:09:51.445>with <00:09:51.585>the <00:09:51.725>inline

206
00:09:54.205 --> 00:09:56.745
<00:09:54.205>key <00:09:54.485>in <00:09:54.765>inline <00:09:55.045>size <00:09:55.325>keyword <00:09:55.605>here.

207
00:09:57.205 --> 00:10:01.185
<00:09:57.205>Uh, <00:09:57.360>whereas <00:09:57.516>height, <00:09:57.671>we, <00:09:57.827>we, <00:09:57.982>we <00:09:58.138>replace <00:09:58.293>this <00:09:58.449>word <00:09:58.605>with,

208
00:10:01.185 --> 00:10:03.425
<00:10:01.185>with <00:10:01.535>block <00:10:01.885>size, <00:10:02.234>uh, <00:10:02.584>thing.

209
00:10:03.965 --> 00:10:07.265
<00:10:03.965>And <00:10:04.165>whereas <00:10:04.365>with <00:10:04.565>the <00:10:04.765>borders <00:10:04.965>slightly <00:10:05.165>different, <00:10:05.365>uh,

210
00:10:07.485 --> 00:10:10.465
<00:10:07.485>so <00:10:07.685>border <00:10:07.885>tap <00:10:08.085>becomes, <00:10:08.285>uh, <00:10:08.485>border <00:10:08.685>block <00:10:08.885>start

211
00:10:11.005 --> 00:10:13.545
<00:10:11.005>and <00:10:11.205>border <00:10:11.405>buttons <00:10:11.605>becomes <00:10:11.805>bor, <00:10:12.005>border <00:10:12.205>block <00:10:12.405>end,

212
00:10:13.685 --> 00:10:14.905
<00:10:13.685>and, <00:10:14.233>uh, <00:10:14.783>left

213
00:10:14.905 --> 00:10:16.825
<00:10:14.905>and <00:10:15.079>right <00:10:15.255>again, <00:10:15.430>border <00:10:15.605>in <00:10:15.780>line, <00:10:15.954>start <00:10:16.130>and <00:10:16.305>border.

214
00:10:16.845 --> 00:10:19.985
<00:10:16.845>In <00:10:17.045>line <00:10:17.245>end <00:10:17.445>here, <00:10:17.645>you <00:10:17.845>can <00:10:18.045>see, <00:10:18.245>uh,

215
00:10:21.915 --> 00:10:24.825
<00:10:21.915>there <00:10:22.115>is <00:10:22.314>a <00:10:22.515>text <00:10:22.714>with, <00:10:22.915>uh, <00:10:23.115>some <00:10:23.314>sort

216
00:10:24.825 --> 00:10:27.265
<00:10:24.825>of <00:10:25.105>padding <00:10:25.385>at <00:10:25.665>some <00:10:25.945>port <00:10:26.225>portion.

217
00:10:28.325 --> 00:10:32.825
<00:10:28.325>Uh, <00:10:28.500>and <00:10:28.675>also, <00:10:28.850>well, <00:10:29.025>uh, <00:10:29.200>there <00:10:29.375>is <00:10:29.550>a <00:10:29.725>border.

218
00:10:33.815 --> 00:10:35.235
<00:10:33.815>I'm <00:10:33.974>not <00:10:34.134>saying <00:10:34.294>it's <00:10:34.454>on <00:10:34.613>the <00:10:34.773>left <00:10:34.933>and <00:10:35.093>right.

219
00:10:35.335 --> 00:10:38.715
<00:10:35.335>So <00:10:35.475>because <00:10:35.615>it <00:10:35.755>depends <00:10:35.895>on <00:10:36.035>once <00:10:36.175>you <00:10:36.315>start <00:10:36.455>using, <00:10:36.595>using, <00:10:36.735>um,

220
00:10:39.575 --> 00:10:42.555
<00:10:39.575>uh, <00:10:40.041>uh, <00:10:40.508>logical <00:10:40.975>properties,

221
00:10:43.065 --> 00:10:46.075
<00:10:43.065>depending <00:10:43.240>on <00:10:43.415>the <00:10:43.590>writing <00:10:43.765>system <00:10:43.940>or <00:10:44.115>the <00:10:44.290>scripts <00:10:44.465>direction.

222
00:10:46.175 --> 00:10:47.955
<00:10:46.175>So <00:10:46.525>these <00:10:46.875>padding, <00:10:47.224>this <00:10:47.574>border

223
00:10:48.375 --> 00:10:50.835
<00:10:48.375>and <00:10:48.515>the, <00:10:48.655>the <00:10:48.795>location <00:10:48.935>of <00:10:49.075>it, <00:10:49.215>it <00:10:49.355>just <00:10:49.495>can, <00:10:49.635>can <00:10:49.775>change.

224
00:10:51.695 --> 00:10:54.755
<00:10:51.695>And <00:10:51.835>by <00:10:51.975>using <00:10:52.115>css, <00:10:52.255>you <00:10:52.395>can <00:10:52.535>just <00:10:52.675>address <00:10:52.815>this <00:10:52.955>problem, <00:10:53.095>uh,

225
00:10:55.965 --> 00:10:58.015
<00:10:55.965>dynamically <00:10:56.431>without <00:10:56.898>worrying <00:10:57.365>much.

226
00:10:59.765 --> 00:11:02.415
<00:10:59.765>Well, <00:10:59.998>Flexbox <00:11:00.231>actually <00:11:00.465>has <00:11:00.698>adopted <00:11:00.931>this <00:11:01.165>start

227
00:11:02.435 --> 00:11:04.375
<00:11:02.435>and <00:11:02.668>end <00:11:02.901>concept <00:11:03.135>very <00:11:03.368>many <00:11:03.601>years <00:11:03.834>ago.

228
00:11:04.565 --> 00:11:06.775
<00:11:04.565>Flexbox <00:11:04.845>is <00:11:05.125>something <00:11:05.405>very <00:11:05.685>old, <00:11:05.965>uh,

229
00:11:06.915 --> 00:11:08.255
<00:11:06.915>but <00:11:07.116>I <00:11:07.317>just <00:11:07.518>want <00:11:07.718>to <00:11:07.920>briefly <00:11:08.121>cover,

230
00:11:08.355 --> 00:11:13.255
<00:11:08.355>and <00:11:08.482>this <00:11:08.609>a <00:11:08.736>slide <00:11:08.864>from <00:11:08.991>CS <00:11:09.118>scom, <00:11:09.245>uh, <00:11:09.373>where <00:11:09.500>it's <00:11:09.627>with <00:11:09.755>Flexbox,

231
00:11:13.275 --> 00:11:15.335
<00:11:13.275>you <00:11:13.508>can <00:11:13.741>specify <00:11:13.975>the <00:11:14.208>direction <00:11:14.441>being <00:11:14.675>in,

232
00:11:15.515 --> 00:11:16.935
<00:11:15.515>in <00:11:15.770>one <00:11:16.026>direction <00:11:16.281>or <00:11:16.537>the <00:11:16.792>other.

233
00:11:17.035 --> 00:11:18.895
<00:11:17.035>So <00:11:17.268>once <00:11:17.501>you <00:11:17.735>have <00:11:17.968>defined <00:11:18.201>your <00:11:18.435>layout

234
00:11:19.035 --> 00:11:21.015
<00:11:19.035>by <00:11:19.190>using <00:11:19.346>the <00:11:19.501>css <00:11:19.657>s <00:11:19.812>you <00:11:19.968>can <00:11:20.123>just <00:11:20.279>flip <00:11:20.435>things,

235
00:11:21.685 --> 00:11:22.785
<00:11:21.685>uh, <00:11:22.015>in <00:11:22.344>one <00:11:22.675>direction.

236
00:11:23.415 --> 00:11:26.465
<00:11:23.415>Flex <00:11:23.589>grow <00:11:23.765>is <00:11:23.939>something <00:11:24.115>in, <00:11:24.290>especially <00:11:24.464>you're <00:11:24.640>saying <00:11:24.814>that,

237
00:11:26.465 --> 00:11:28.865
<00:11:26.465>well, <00:11:26.640>I <00:11:26.815>would <00:11:26.990>like <00:11:27.165>to <00:11:27.340>feel <00:11:27.515>the <00:11:27.690>remaining <00:11:27.865>space.

238
00:11:29.565 --> 00:11:32.225
<00:11:29.565>And <00:11:29.798>that's <00:11:30.031>what, <00:11:30.265>what <00:11:30.498>flex <00:11:30.731>grow <00:11:30.965>addresses,

239
00:11:32.415 --> 00:11:35.185
<00:11:32.415>whereas <00:11:32.555>the <00:11:32.694>order <00:11:32.834>is <00:11:32.974>if <00:11:33.115>you <00:11:33.255>have <00:11:33.395>some, <00:11:33.535>some, <00:11:33.675>some <00:11:33.814>of,

240
00:11:35.255 --> 00:11:36.945
<00:11:35.255>some <00:11:35.488>items <00:11:35.721>that <00:11:35.955>is <00:11:36.188>ordered, <00:11:36.421>you <00:11:36.655>can,

241
00:11:37.005 --> 00:11:40.465
<00:11:37.005>by <00:11:37.180>using <00:11:37.355>your <00:11:37.530>Flexbox <00:11:37.705>order <00:11:37.880>property, <00:11:38.055>you <00:11:38.230>can, <00:11:38.405>um,

242
00:11:41.145 --> 00:11:42.545
<00:11:41.145>visually <00:11:41.396>change <00:11:41.649>the <00:11:41.901>order <00:11:42.153>of <00:11:42.405>things.

243
00:11:43.005 --> 00:11:45.825
<00:11:43.005>But <00:11:43.180>one <00:11:43.355>needs <00:11:43.530>to <00:11:43.705>be <00:11:43.880>careful <00:11:44.055>with <00:11:44.230>accessibility, <00:11:44.405>um,

244
00:11:46.455 --> 00:11:48.025
<00:11:46.455>once <00:11:46.688>you're <00:11:46.921>doing, <00:11:47.155>because <00:11:47.388>the <00:11:47.621>top <00:11:47.855>order

245
00:11:48.165 --> 00:11:49.505
<00:11:48.165>of <00:11:48.406>the <00:11:48.647>things <00:11:48.888>will <00:11:49.129>stay <00:11:49.371>same.

246
00:11:51.005 --> 00:11:53.145
<00:11:51.005>Um, <00:11:51.180>here <00:11:51.355>a <00:11:51.530>little <00:11:51.705>bit <00:11:51.880>more <00:11:52.055>flex <00:11:52.230>back <00:11:52.405>goodies.

247
00:11:53.345 --> 00:11:56.245
<00:11:53.345>Uh, <00:11:53.472>on <00:11:53.599>the <00:11:53.726>left <00:11:53.854>hand <00:11:53.981>side, <00:11:54.108>you <00:11:54.235>can <00:11:54.363>see <00:11:54.490>by <00:11:54.617>using <00:11:54.745>Flexbox,

248
00:11:56.385 --> 00:11:57.645
<00:11:56.385>you <00:11:56.574>can <00:11:56.763>say, <00:11:56.952>well, <00:11:57.141>I <00:11:57.329>would <00:11:57.519>like

249
00:11:57.645 --> 00:12:00.405
<00:11:57.645>to <00:11:57.785>group <00:11:57.925>things <00:11:58.064>on <00:11:58.204>the <00:11:58.345>start <00:11:58.485>Notice, <00:11:58.625>it's, <00:11:58.765>it's <00:11:58.905>not <00:11:59.045>left,

250
00:12:00.715 --> 00:12:03.445
<00:12:00.715>it's <00:12:00.915>start, <00:12:01.115>so <00:12:01.315>depending <00:12:01.515>on <00:12:01.715>the <00:12:01.915>user, <00:12:02.115>vertical

251
00:12:03.445 --> 00:12:04.845
<00:12:03.445>or <00:12:04.075>horizontal <00:12:04.705>orientation.

252
00:12:04.865 --> 00:12:06.485
<00:12:04.865>So <00:12:05.145>these <00:12:05.425>things <00:12:05.705>can, <00:12:05.985>can <00:12:06.265>vary.

253
00:12:06.985 --> 00:12:09.045
<00:12:06.985>Uh, <00:12:07.185>there's <00:12:07.385>a <00:12:07.585>centering <00:12:07.785>and <00:12:07.985>space <00:12:08.185>in <00:12:08.385>between

254
00:12:09.225 --> 00:12:11.045
<00:12:09.225>and <00:12:09.691>space <00:12:10.158>around, <00:12:10.625>uh,

255
00:12:11.105 --> 00:12:12.765
<00:12:11.105>and <00:12:11.385>you <00:12:11.665>can <00:12:11.945>space <00:12:12.225>evenly, <00:12:12.505>uh,

256
00:12:12.765 --> 00:12:15.445
<00:12:12.765>which <00:12:12.965>Flexbox <00:12:13.165>already <00:12:13.365>offers <00:12:13.564>these <00:12:13.765>things <00:12:13.965>to <00:12:14.165>you.

257
00:12:15.985 --> 00:12:17.805
<00:12:15.985>Uh, <00:12:16.185>whereas <00:12:16.385>you <00:12:16.585>can <00:12:16.785>also <00:12:16.985>group <00:12:17.185>the <00:12:17.385>items

258
00:12:18.425 --> 00:12:20.165
<00:12:18.425>in <00:12:18.704>the <00:12:18.984>other <00:12:19.265>direction <00:12:19.545>of <00:12:19.824>access,

259
00:12:20.165 --> 00:12:23.165
<00:12:20.165>where <00:12:20.305>you <00:12:20.444>can <00:12:20.584>group <00:12:20.724>them <00:12:20.865>in <00:12:21.005>the <00:12:21.145>start <00:12:21.285>and <00:12:21.425>stretch <00:12:21.564>them

260
00:12:23.225 --> 00:12:26.965
<00:12:23.225>or <00:12:23.341>just <00:12:23.458>align <00:12:23.575>them <00:12:23.691>on <00:12:23.808>a, <00:12:23.925>on, <00:12:24.041>on <00:12:24.158>the, <00:12:24.275>their <00:12:24.391>text <00:12:24.508>space <00:12:24.625>line.

261
00:12:28.065 --> 00:12:31.245
<00:12:28.065>Or <00:12:28.220>alternatively, <00:12:28.376>you <00:12:28.531>can <00:12:28.687>group, <00:12:28.842>uh, <00:12:28.998>you <00:12:29.153>can <00:12:29.309>pick <00:12:29.465>one

262
00:12:31.245 --> 00:12:33.485
<00:12:31.245>of <00:12:31.420>the <00:12:31.595>items <00:12:31.770>and <00:12:31.945>then <00:12:32.120>change <00:12:32.295>the <00:12:32.470>individual <00:12:32.645>items.

263
00:12:33.875 --> 00:12:36.805
<00:12:33.875>Orientation <00:12:34.155>Flexbox <00:12:34.435>is <00:12:34.715>certainly <00:12:34.995>not <00:12:35.275>new.

264
00:12:37.185 --> 00:12:41.405
<00:12:37.185>Um, <00:12:37.340>uh, <00:12:37.496>and <00:12:37.651>it's, <00:12:37.807>it's <00:12:37.962>very <00:12:38.118>much <00:12:38.273>adopted <00:12:38.429>with <00:12:38.584>browsers.

265
00:12:41.595 --> 00:12:43.885
<00:12:41.595>Perhaps <00:12:41.770>one <00:12:41.945>of <00:12:42.120>the <00:12:42.295>relatively <00:12:42.470>new <00:12:42.645>refrigerator <00:12:42.820>is <00:12:42.995>the,

266
00:12:43.885 --> 00:12:45.965
<00:12:43.885>is <00:12:44.165>the <00:12:44.444>gap, <00:12:44.725>uh, <00:12:45.005>where, <00:12:45.285>um,

267
00:12:47.065 --> 00:12:49.645
<00:12:47.065>in <00:12:47.265>Flexbox <00:12:47.465>you <00:12:47.665>can <00:12:47.865>just <00:12:48.065>specify <00:12:48.265>a <00:12:48.465>vertical

268
00:12:49.665 --> 00:12:51.885
<00:12:49.665>or <00:12:49.944>horizontal <00:12:50.224>gap <00:12:50.505>in <00:12:50.785>both <00:12:51.064>directions.

269
00:12:51.885 --> 00:12:55.205
<00:12:51.885>And <00:12:52.060>depending <00:12:52.235>on <00:12:52.410>that, <00:12:52.585>you <00:12:52.760>can <00:12:52.935>have <00:12:53.110>nice <00:12:53.285>space

270
00:12:55.625 --> 00:12:58.085
<00:12:55.625>and <00:12:55.825>predefined <00:12:56.025>space <00:12:56.225>between <00:12:56.425>you, <00:12:56.625>between <00:12:56.825>your <00:12:57.025>items.

271
00:12:59.395 --> 00:13:00.885
<00:12:59.395>Whereas <00:12:59.842>a <00:13:00.289>greater <00:13:00.736>cousin

272
00:13:01.785 --> 00:13:03.645
<00:13:01.785>and <00:13:02.018>much <00:13:02.251>power, <00:13:02.485>much <00:13:02.718>more <00:13:02.951>powerful <00:13:03.185>cousin

273
00:13:03.745 --> 00:13:05.085
<00:13:03.745>of <00:13:04.147>Flexbox <00:13:04.549>is <00:13:04.951>great.

274
00:13:05.825 --> 00:13:08.085
<00:13:05.825>And <00:13:06.025>I <00:13:06.225>particularly <00:13:06.425>like <00:13:06.625>one <00:13:06.825>aspect <00:13:07.025>of <00:13:07.225>grids.

275
00:13:08.085 --> 00:13:09.805
<00:13:08.085>Uh, <00:13:08.318>grid <00:13:08.551>is <00:13:08.785>like <00:13:09.018>somewhat <00:13:09.251>a <00:13:09.485>two

276
00:13:09.805 --> 00:13:11.365
<00:13:09.805>dimension <00:13:10.271>version <00:13:10.738>of <00:13:11.204>Flexbox.

277
00:13:11.985 --> 00:13:16.125
<00:13:11.985>Uh, <00:13:12.125>but <00:13:12.265>this, <00:13:12.405>um, <00:13:12.545>there's, <00:13:12.685>there's <00:13:12.825>one <00:13:12.965>nice <00:13:13.105>utility <00:13:13.245>of <00:13:13.385>grid,

278
00:13:16.125 --> 00:13:17.365
<00:13:16.125>which <00:13:16.348>is <00:13:16.571>called <00:13:16.794>the <00:13:17.017>template <00:13:17.241>areas.

279
00:13:18.225 --> 00:13:21.165
<00:13:18.225>And <00:13:18.365>I <00:13:18.505>will, <00:13:18.645>I <00:13:18.785>believe <00:13:18.925>it's <00:13:19.065>a <00:13:19.205>very, <00:13:19.345>very <00:13:19.485>underused <00:13:19.625>concept,

280
00:13:21.785 --> 00:13:25.125
<00:13:21.785>uh, <00:13:21.925>because <00:13:22.064>you <00:13:22.204>can <00:13:22.344>see <00:13:22.485>on <00:13:22.625>the, <00:13:22.765>on <00:13:22.905>the <00:13:23.045>left <00:13:23.185>button,

281
00:13:25.705 --> 00:13:28.205
<00:13:25.705>you <00:13:25.985>connect <00:13:26.265>to <00:13:26.545>specify <00:13:26.825>regions, <00:13:27.105>um,

282
00:13:28.705 --> 00:13:30.005
<00:13:28.705>and <00:13:28.997>there's, <00:13:29.290>uh, <00:13:29.582>four <00:13:29.875>headers,

283
00:13:30.025 --> 00:13:32.205
<00:13:30.025>and <00:13:30.258>then, <00:13:30.491>uh, <00:13:30.725>there's <00:13:30.958>two <00:13:31.191>main <00:13:31.425>sections.

284
00:13:32.225 --> 00:13:34.485
<00:13:32.225>And <00:13:32.505>then, <00:13:32.785>um, <00:13:33.065>there's <00:13:33.345>a <00:13:33.625>footer.

285
00:13:35.305 --> 00:13:39.045
<00:13:35.305>And <00:13:35.432>then <00:13:35.559>once <00:13:35.686>you <00:13:35.814>give <00:13:35.941>the <00:13:36.068>gray <00:13:36.195>area <00:13:36.323>property <00:13:36.450>to <00:13:36.577>that <00:13:36.704>name,

286
00:13:39.385 --> 00:13:42.445
<00:13:39.385>um, <00:13:39.665>magically <00:13:39.944>your, <00:13:40.225>your, <00:13:40.505>your <00:13:40.785>item

287
00:13:43.105 --> 00:13:45.805
<00:13:43.105>or <00:13:43.305>your, <00:13:43.505>your <00:13:43.705>areas <00:13:43.905>will <00:13:44.105>be <00:13:44.305>automatically <00:13:44.505>laid

288
00:13:45.825 --> 00:13:47.165
<00:13:45.825>out <00:13:46.227>based <00:13:46.629>on <00:13:47.031>that.

289
00:13:48.065 --> 00:13:53.045
<00:13:48.065>And <00:13:48.220>again, <00:13:48.376>not <00:13:48.531>being <00:13:48.687>new, <00:13:48.842>uh, <00:13:48.998>based <00:13:49.153>on, <00:13:49.309>um, <00:13:49.465>uh,

290
00:13:53.905 --> 00:13:56.085
<00:13:53.905>uh, <00:13:54.185>if <00:13:54.464>you <00:13:54.745>use <00:13:55.025>grids, <00:13:55.305>uh,

291
00:13:56.745 --> 00:13:58.285
<00:13:56.745>in <00:13:56.943>the <00:13:57.141>old <00:13:57.339>times <00:13:57.537>there <00:13:57.735>were <00:13:57.933>tricky <00:13:58.131>things,

292
00:13:58.285 --> 00:14:02.485
<00:13:58.285>but, <00:13:58.401>uh, <00:13:58.518>now <00:13:58.635>it <00:13:58.751>is <00:13:58.868>possible <00:13:58.985>to, <00:13:59.101>uh, <00:13:59.218>let <00:13:59.334>me <00:13:59.451>just <00:13:59.568>show <00:13:59.685>it

293
00:14:02.605 --> 00:14:06.045
<00:14:02.605>to <00:14:02.838>you, <00:14:03.071>to <00:14:03.305>make, <00:14:03.538>uh, <00:14:03.771>magical <00:14:04.005>layouts.

294
00:14:06.825 --> 00:14:11.005
<00:14:06.825>So <00:14:06.925>this <00:14:07.025>is <00:14:07.125>a, <00:14:07.225>this <00:14:07.325>is <00:14:07.425>a <00:14:07.525>layout <00:14:07.625>made <00:14:07.725>by, <00:14:07.825>made <00:14:07.925>by, <00:14:08.025>uh, <00:14:08.125>a <00:14:08.225>grid.

295
00:14:11.505 --> 00:14:15.285
<00:14:11.505>And <00:14:11.660>if <00:14:11.816>you, <00:14:11.971>if <00:14:12.127>you, <00:14:12.282>uh, <00:14:12.438>narrow <00:14:12.593>it <00:14:12.749>down <00:14:12.905>sufficiently,

296
00:14:15.285 --> 00:14:17.685
<00:14:15.285>you <00:14:15.459>can <00:14:15.635>see <00:14:15.810>without <00:14:15.985>any <00:14:16.160>JavaScript, <00:14:16.334>without <00:14:16.510>any <00:14:16.685>css,

297
00:14:17.685 --> 00:14:19.205
<00:14:17.685>it <00:14:18.369>automatically <00:14:19.053>changed.

298
00:14:19.475 --> 00:14:20.565
<00:14:19.475>It's, <00:14:19.965>it's <00:14:20.456>layout.

299
00:14:21.705 --> 00:14:24.525
<00:14:21.705>And <00:14:21.938>this <00:14:22.171>is <00:14:22.405>available <00:14:22.638>today <00:14:22.871>as <00:14:23.105>well.

300
00:14:25.595 --> 00:14:30.035
<00:14:25.595>Well, <00:14:25.750>what's <00:14:25.906>new <00:14:26.061>in, <00:14:26.217>uh, <00:14:26.372>CSS <00:14:26.528>is <00:14:26.683>there's <00:14:26.839>something <00:14:26.995>very,

301
00:14:30.035 --> 00:14:32.315
<00:14:30.035>very <00:14:30.235>new, <00:14:30.435>and <00:14:30.635>we <00:14:30.834>just <00:14:31.035>call <00:14:31.235>the <00:14:31.435>subgrid.

302
00:14:33.235 --> 00:14:38.015
<00:14:33.235>And <00:14:33.410>this <00:14:33.585>was <00:14:33.760>supported <00:14:33.935>by <00:14:34.110>Safari <00:14:34.285>for <00:14:34.460>some, <00:14:34.635>uh,

303
00:14:38.285 --> 00:14:39.815
<00:14:38.285>perhaps <00:14:38.560>a, <00:14:38.835>a <00:14:39.111>year <00:14:39.386>or <00:14:39.662>two.

304
00:14:40.555 --> 00:14:44.135
<00:14:40.555>But <00:14:40.729>Chrome <00:14:40.905>support <00:14:41.079>has <00:14:41.255>just <00:14:41.430>landed <00:14:41.604>this, <00:14:41.780>this <00:14:41.954>autumn.

305
00:14:44.915 --> 00:14:46.415
<00:14:44.915>Uh, <00:14:45.107>let's <00:14:45.300>just <00:14:45.493>try <00:14:45.686>to <00:14:45.879>address <00:14:46.072>the <00:14:46.265>problem.

306
00:14:46.415 --> 00:14:47.855
<00:14:46.415>What, <00:14:46.600>what, <00:14:46.785>what <00:14:46.970>kind <00:14:47.155>of <00:14:47.340>problem <00:14:47.525>it <00:14:47.711>solves.

307
00:14:48.315 --> 00:14:50.215
<00:14:48.315>On <00:14:48.490>the <00:14:48.665>left <00:14:48.840>hand <00:14:49.015>side, <00:14:49.190>you <00:14:49.365>can <00:14:49.540>see, <00:14:49.715>um,

308
00:14:50.425 --> 00:14:51.485
<00:14:50.425>there <00:14:50.742>are <00:14:51.061>three <00:14:51.379>cards,

309
00:14:52.065 --> 00:14:55.285
<00:14:52.065>and <00:14:52.240>they <00:14:52.415>were, <00:14:52.590>they <00:14:52.765>were <00:14:52.940>defined <00:14:53.115>by <00:14:53.290>the, <00:14:53.465>uh,

310
00:14:55.315 --> 00:14:56.405
<00:14:55.315>grid <00:14:55.805>template <00:14:56.295>columns.

311
00:14:56.405 --> 00:14:58.045
<00:14:56.405>You <00:14:56.605>can <00:14:56.805>see <00:14:57.005>in <00:14:57.204>the <00:14:57.405>cards, <00:14:57.605>CSS <00:14:57.805>think,

312
00:14:58.345 --> 00:15:00.765
<00:14:58.345>and <00:14:58.485>which <00:14:58.625>is <00:14:58.765>one <00:14:58.905>fi <00:14:59.045>one <00:14:59.185>fr <00:14:59.325>one <00:14:59.465>ffr, <00:14:59.605>one <00:14:59.745>ffr,

313
00:15:00.765 --> 00:15:02.325
<00:15:00.765>which <00:15:01.045>means <00:15:01.324>there <00:15:01.605>are <00:15:01.885>three <00:15:02.165>fractions,

314
00:15:02.325 --> 00:15:03.405
<00:15:02.325>three <00:15:02.811>equal <00:15:03.297>fractions.

315
00:15:04.065 --> 00:15:07.365
<00:15:04.065>And <00:15:04.240>also <00:15:04.415>each <00:15:04.590>card <00:15:04.765>is <00:15:04.940>specified <00:15:05.115>as, <00:15:05.290>as, <00:15:05.465>uh,

316
00:15:07.535 --> 00:15:08.885
<00:15:07.535>three, <00:15:08.142>three <00:15:08.750>rows.

317
00:15:08.905 --> 00:15:12.445
<00:15:08.905>One <00:15:09.032>is <00:15:09.159>the <00:15:09.286>first <00:15:09.414>row <00:15:09.541>is <00:15:09.668>auto, <00:15:09.795>the <00:15:09.923>header, <00:15:10.050>uh, <00:15:10.177>there's <00:15:10.305>a,

318
00:15:12.535 --> 00:15:14.925
<00:15:12.535>again, <00:15:12.709>a <00:15:12.885>fraction, <00:15:13.060>which <00:15:13.235>means <00:15:13.410>fill <00:15:13.584>the <00:15:13.760>remaining <00:15:13.935>space.

319
00:15:15.025 --> 00:15:18.485
<00:15:15.025>And <00:15:15.141>again, <00:15:15.258>an <00:15:15.375>auto, <00:15:15.491>which <00:15:15.608>says <00:15:15.725>that <00:15:15.841>use <00:15:15.958>as <00:15:16.074>much <00:15:16.191>as <00:15:16.308>you <00:15:16.425>need.

320
00:15:19.545 --> 00:15:23.855
<00:15:19.545>But <00:15:19.672>the <00:15:19.799>problem <00:15:19.926>is, <00:15:20.054>in <00:15:20.181>case <00:15:20.308>one <00:15:20.435>of <00:15:20.563>the <00:15:20.690>headers <00:15:20.817>just <00:15:20.944>grows,

321
00:15:23.855 --> 00:15:25.615
<00:15:23.855>because <00:15:24.088>you <00:15:24.321>have <00:15:24.555>some <00:15:24.788>extra <00:15:25.021>text <00:15:25.255>here,

322
00:15:25.675 --> 00:15:28.255
<00:15:25.675>you <00:15:25.830>can <00:15:25.986>see <00:15:26.141>then <00:15:26.297>your <00:15:26.452>alignment <00:15:26.608>just <00:15:26.763>dropped <00:15:26.919>that <00:15:27.074>broken.

323
00:15:29.395 --> 00:15:31.735
<00:15:29.395>And <00:15:29.569>this <00:15:29.745>isn't, <00:15:29.920>this <00:15:30.095>is <00:15:30.270>not <00:15:30.444>possible <00:15:30.620>to <00:15:30.795>fix

324
00:15:32.035 --> 00:15:34.295
<00:15:32.035>unless <00:15:32.385>you <00:15:32.735>use <00:15:33.084>CSS <00:15:33.435>Subgrid.

325
00:15:35.155 --> 00:15:37.655
<00:15:35.155>Uh, <00:15:35.435>thankfully, <00:15:35.714>uh, <00:15:35.995>this <00:15:36.275>is <00:15:36.555>important.

326
00:15:37.715 --> 00:15:39.775
<00:15:37.715>It <00:15:37.948>has <00:15:38.181>just <00:15:38.415>landed <00:15:38.648>to <00:15:38.881>all <00:15:39.115>browsers.

327
00:15:39.775 --> 00:15:40.815
<00:15:39.775>And <00:15:40.009>now <00:15:40.243>you <00:15:40.477>can <00:15:40.711>use

328
00:15:40.815 --> 00:15:42.815
<00:15:40.815>and <00:15:41.015>address <00:15:41.215>this <00:15:41.415>problem <00:15:41.615>and <00:15:41.815>fix <00:15:42.015>this <00:15:42.215>problem.

329
00:15:43.475 --> 00:15:47.575
<00:15:43.475>Uh, <00:15:43.602>in <00:15:43.729>this <00:15:43.856>case, <00:15:43.984>uh, <00:15:44.111>from <00:15:44.238>a <00:15:44.365>CSS <00:15:44.493>standpoint <00:15:44.620>of <00:15:44.747>view, <00:15:44.875>um,

330
00:15:48.035 --> 00:15:51.775
<00:15:48.035>the, <00:15:48.175>the, <00:15:48.314>again, <00:15:48.454>you <00:15:48.594>use <00:15:48.735>the <00:15:48.875>same <00:15:49.015>kind <00:15:49.155>of <00:15:49.295>three, <00:15:49.435>um,

331
00:15:51.945 --> 00:15:53.415
<00:15:51.945>three <00:15:52.606>column <00:15:53.268>thing.

332
00:15:54.195 --> 00:15:57.255
<00:15:54.195>Uh, <00:15:54.370>however, <00:15:54.545>uh, <00:15:54.720>the <00:15:54.895>interesting <00:15:55.070>bit <00:15:55.245>is <00:15:55.420>that <00:15:55.595>when,

333
00:15:57.535 --> 00:15:58.775
<00:15:57.535>whenever, <00:15:57.814>for, <00:15:58.093>for <00:15:58.372>each <00:15:58.651>card,

334
00:15:58.835 --> 00:16:01.295
<00:15:58.835>you <00:15:59.010>can <00:15:59.185>specify <00:15:59.360>the <00:15:59.535>grid <00:15:59.710>template <00:15:59.885>rope <00:16:00.060>as <00:16:00.235>subgrid,

335
00:16:01.785 --> 00:16:06.655
<00:16:01.785>which <00:16:01.959>means <00:16:02.135>it <00:16:02.310>would <00:16:02.485>like <00:16:02.660>to <00:16:02.834>get <00:16:03.010>the, <00:16:03.185>um,

336
00:16:08.565 --> 00:16:10.895
<00:16:08.565>find <00:16:08.720>a <00:16:08.876>row <00:16:09.031>based <00:16:09.187>on <00:16:09.342>the <00:16:09.498>parent <00:16:09.653>grid, <00:16:09.809>which <00:16:09.965>will,

337
00:16:10.905 --> 00:16:14.575
<00:16:10.905>which <00:16:11.105>eventually <00:16:11.305>will <00:16:11.505>enforce <00:16:11.704>all <00:16:11.905>these <00:16:12.105>three <00:16:12.305>things

338
00:16:14.635 --> 00:16:16.895
<00:16:14.635>to <00:16:14.985>be <00:16:15.335>aligned <00:16:15.685>and <00:16:16.035>aligned,

339
00:16:17.205 --> 00:16:20.615
<00:16:17.205>because <00:16:17.360>in <00:16:17.516>the <00:16:17.671>previous <00:16:17.827>case, <00:16:17.982>uh, <00:16:18.138>there <00:16:18.293>were <00:16:18.449>no <00:16:18.605>correlation

340
00:16:20.615 --> 00:16:22.695
<00:16:20.615>between <00:16:20.895>these <00:16:21.175>three <00:16:21.455>items, <00:16:21.735>whereas, <00:16:22.015>uh,

341
00:16:22.695 --> 00:16:26.255
<00:16:22.695>making <00:16:22.850>a <00:16:23.006>subgrade <00:16:23.161>will, <00:16:23.317>will <00:16:23.472>enforce <00:16:23.628>them <00:16:23.783>to <00:16:23.939>be <00:16:24.095>aligned.

342
00:16:26.635 --> 00:16:29.735
<00:16:26.635>But <00:16:26.790>this <00:16:26.946>is <00:16:27.101>one <00:16:27.257>of <00:16:27.412>the, <00:16:27.568>uh, <00:16:27.723>nicest <00:16:27.879>things, <00:16:28.035>uh,

343
00:16:29.865 --> 00:16:31.095
<00:16:29.865>which <00:16:30.141>you <00:16:30.418>can <00:16:30.695>use <00:16:30.972>today.

344
00:16:31.395 --> 00:16:33.375
<00:16:31.395>Uh, <00:16:31.628>this <00:16:31.861>is <00:16:32.095>a <00:16:32.328>cross <00:16:32.561>browser <00:16:32.795>support.

345
00:16:34.685 --> 00:16:38.695
<00:16:34.685>This <00:16:34.885>time <00:16:35.084>I've <00:16:35.285>covered, <00:16:35.484>uh, <00:16:35.685>what's, <00:16:35.885>how <00:16:36.084>you,

346
00:16:38.795 --> 00:16:40.815
<00:16:38.795>how <00:16:38.995>you <00:16:39.194>should <00:16:39.395>be <00:16:39.594>considered <00:16:39.795>about <00:16:39.995>the <00:16:40.194>alignments.

347
00:16:41.155 --> 00:16:44.815
<00:16:41.155>Uh, <00:16:41.329>in <00:16:41.505>particular, <00:16:41.680>uh, <00:16:41.855>we <00:16:42.030>covered <00:16:42.204>things <00:16:42.380>like, <00:16:42.555>uh,

348
00:16:45.295 --> 00:16:46.295
<00:16:45.295>vertical <00:16:45.745>vertical <00:16:46.194>writing,

349
00:16:46.435 --> 00:16:48.135
<00:16:46.435>and <00:16:46.668>we <00:16:46.901>covered <00:16:47.135>things <00:16:47.368>like <00:16:47.601>CSS <00:16:47.834>grid

350
00:16:48.135 --> 00:16:51.415
<00:16:48.135>and <00:16:48.290>how <00:16:48.446>this <00:16:48.601>will <00:16:48.757>allow <00:16:48.912>us <00:16:49.068>to <00:16:49.223>make <00:16:49.379>flexible <00:16:49.535>pages.

351
00:16:52.435 --> 00:16:53.895
<00:16:52.435>Um, <00:16:52.763>in <00:16:53.092>the <00:16:53.420>second <00:16:53.749>part,

352
00:16:53.895 --> 00:16:55.375
<00:16:53.895>I'll <00:16:54.117>talk <00:16:54.339>about <00:16:54.561>the <00:16:54.783>new <00:16:55.005>color <00:16:55.227>spaces.

353
00:16:55.675 --> 00:16:59.215
<00:16:55.675>Uh, <00:16:55.814>I'll <00:16:55.954>just <00:16:56.094>talk <00:16:56.234>about <00:16:56.375>the <00:16:56.515>terminology, <00:16:56.655>uh, <00:16:56.795>a <00:16:56.935>bit, <00:16:57.074>uh,

354
00:16:59.875 --> 00:17:02.695
<00:16:59.875>new, <00:17:00.075>new, <00:17:00.275>uh, <00:17:00.475>p <00:17:00.675>three <00:17:00.875>colors <00:17:01.075>in <00:17:01.275>gamut.

355
00:17:02.985 --> 00:17:04.775
<00:17:02.985>We'll <00:17:03.185>talk <00:17:03.385>about <00:17:03.585>the, <00:17:03.785>some <00:17:03.985>color <00:17:04.185>systems <00:17:04.385>like

356
00:17:04.855 --> 00:17:08.695
<00:17:04.855>R-G-B-A-H-S-L-H-S-V, <00:17:05.555>uh, <00:17:06.255>L-A-B-L-C-H,

357
00:17:08.695 --> 00:17:11.095
<00:17:08.694>and <00:17:08.974>well, <00:17:09.254>lots <00:17:09.534>of <00:17:09.814>cryptic <00:17:10.095>abbreviations.

358
00:17:11.355 --> 00:17:12.615
<00:17:11.355>Uh, <00:17:11.581>we'll <00:17:11.808>see <00:17:12.035>what <00:17:12.262>they <00:17:12.489>mean.

359
00:17:12.615 --> 00:17:14.255
<00:17:12.615>And <00:17:12.895>they're <00:17:13.175>very, <00:17:13.454>very <00:17:13.734>important <00:17:14.015>actually,

360
00:17:14.395 --> 00:17:17.015
<00:17:14.395>if <00:17:14.595>you're <00:17:14.795>into <00:17:14.994>colors, <00:17:15.194>which <00:17:15.395>every <00:17:15.595>designer <00:17:15.795>is.

361
00:17:18.275 --> 00:17:19.815
<00:17:18.275>Now, <00:17:18.473>let's <00:17:18.671>talk <00:17:18.869>about, <00:17:19.067>start <00:17:19.265>with <00:17:19.463>the <00:17:19.661>color.

362
00:17:19.815 --> 00:17:22.695
<00:17:19.815>What's <00:17:19.990>the <00:17:20.165>color? <00:17:20.340>Uh, <00:17:20.515>apparently <00:17:20.690>the <00:17:20.865>color <00:17:21.040>is, <00:17:21.215>uh,

363
00:17:22.715 --> 00:17:24.855
<00:17:22.714>is <00:17:22.994>originated <00:17:23.274>from <00:17:23.554>a, <00:17:23.834>a <00:17:24.115>wavelength,

364
00:17:25.195 --> 00:17:27.215
<00:17:25.194>and <00:17:25.350>you <00:17:25.506>can <00:17:25.661>see <00:17:25.817>that <00:17:25.972>this <00:17:26.128>is <00:17:26.283>the <00:17:26.439>visible <00:17:26.595>light,

365
00:17:28.125 --> 00:17:29.425
<00:17:28.125>uh, <00:17:28.417>that <00:17:28.710>we <00:17:29.002>can <00:17:29.295>see.

366
00:17:30.165 --> 00:17:34.585
<00:17:30.165>Um, <00:17:30.305>and <00:17:30.445>probably, <00:17:30.585>uh, <00:17:30.725>a <00:17:30.865>theory <00:17:31.004>says <00:17:31.145>that, <00:17:31.284>well, <00:17:31.425>since <00:17:31.565>life

367
00:17:35.425 --> 00:17:37.065
<00:17:35.425>starting <00:17:35.774>in <00:17:36.125>under <00:17:36.475>the <00:17:36.825>water,

368
00:17:37.565 --> 00:17:40.185
<00:17:37.565>and <00:17:37.705>the <00:17:37.845>water <00:17:37.985>is <00:17:38.125>able <00:17:38.265>to <00:17:38.405>absorb <00:17:38.545>this, <00:17:38.685>this <00:17:38.825>way, <00:17:38.965>this,

369
00:17:40.335 --> 00:17:42.945
<00:17:40.335>this <00:17:40.535>visible <00:17:40.735>light <00:17:40.935>range <00:17:41.135>as <00:17:41.335>a <00:17:41.535>wave <00:17:41.735>length.

370
00:17:43.005 --> 00:17:46.765
<00:17:43.005>And <00:17:43.160>this <00:17:43.316>is <00:17:43.471>why <00:17:43.627>we <00:17:43.782>see <00:17:43.938>only <00:17:44.093>this, <00:17:44.249>this <00:17:44.405>bandwidth.

371
00:17:47.595 --> 00:17:49.045
<00:17:47.595>However, <00:17:47.856>a <00:17:48.117>question <00:17:48.378>to <00:17:48.639>you, <00:17:48.900>you,

372
00:17:49.185 --> 00:17:51.325
<00:17:49.185>so <00:17:49.418>we <00:17:49.651>have <00:17:49.885>other <00:17:50.118>colors <00:17:50.351>like <00:17:50.585>magenta.

373
00:17:52.005 --> 00:17:53.225
<00:17:52.005>Can <00:17:52.279>you <00:17:52.554>see <00:17:52.828>magenta <00:17:53.102>here?

374
00:17:54.515 --> 00:17:57.125
<00:17:54.515>Well, <00:17:54.690>I <00:17:54.865>don't <00:17:55.040>see <00:17:55.215>it, <00:17:55.390>but <00:17:55.565>we <00:17:55.740>do <00:17:55.915>have

375
00:17:57.125 --> 00:17:58.165
<00:17:57.125>this <00:17:57.312>kind <00:17:57.499>of <00:17:57.686>colors <00:17:57.873>as <00:17:58.061>well.

376
00:17:58.225 --> 00:18:02.395
<00:17:58.225>So <00:17:58.341>how <00:17:58.458>do <00:17:58.574>they <00:17:58.691>come <00:17:58.808>up? <00:17:58.925>In <00:17:59.041>this <00:17:59.158>case, <00:17:59.274>we <00:17:59.391>have <00:17:59.508>to <00:17:59.625>revisit

377
00:18:03.135 --> 00:18:04.635
<00:18:03.135>the <00:18:03.810>coloring <00:18:04.485>systems.

378
00:18:05.255 --> 00:18:07.995
<00:18:05.255>Um, <00:18:05.410>on <00:18:05.566>the <00:18:05.721>left <00:18:05.877>hand <00:18:06.032>side, <00:18:06.188>we <00:18:06.343>can <00:18:06.499>see <00:18:06.655>RGB,

379
00:18:07.995 --> 00:18:09.395
<00:18:07.995>which <00:18:08.246>is <00:18:08.499>a <00:18:08.751>red <00:18:09.003>green <00:18:09.254>blue,

380
00:18:09.815 --> 00:18:11.315
<00:18:09.815>and <00:18:10.085>this <00:18:10.355>is <00:18:10.625>called <00:18:10.895>additive <00:18:11.165>color,

381
00:18:11.765 --> 00:18:13.515
<00:18:11.765>where <00:18:12.045>if <00:18:12.325>you <00:18:12.605>have <00:18:12.885>multiple <00:18:13.165>colors

382
00:18:13.575 --> 00:18:16.275
<00:18:13.575>and <00:18:13.715>you <00:18:13.855>can, <00:18:13.995>you <00:18:14.135>can, <00:18:14.275>if <00:18:14.415>there's <00:18:14.555>a <00:18:14.695>source <00:18:14.835>of <00:18:14.975>light,

383
00:18:16.275 --> 00:18:20.555
<00:18:16.275>which <00:18:16.402>emits <00:18:16.529>light, <00:18:16.656>uh, <00:18:16.784>and <00:18:16.911>if <00:18:17.038>you <00:18:17.165>can <00:18:17.293>mix <00:18:17.420>them <00:18:17.547>and <00:18:17.675>reflect

384
00:18:20.555 --> 00:18:23.035
<00:18:20.555>and <00:18:20.682>on, <00:18:20.809>on <00:18:20.936>a, <00:18:21.064>on <00:18:21.191>a, <00:18:21.318>on <00:18:21.445>some <00:18:21.573>sort <00:18:21.700>of <00:18:21.827>white <00:18:21.955>place,

385
00:18:23.295 --> 00:18:25.915
<00:18:23.295>or <00:18:23.435>let's <00:18:23.575>say <00:18:23.715>in <00:18:23.855>your <00:18:23.995>screens, <00:18:24.135>there's <00:18:24.275>some <00:18:24.415>sort <00:18:24.555>of, <00:18:24.695>uh,

386
00:18:26.285 --> 00:18:28.795
<00:18:26.285>leads, <00:18:26.565>LEDs, <00:18:26.845>that, <00:18:27.125>that <00:18:27.405>just <00:18:27.685>emits

387
00:18:28.795 --> 00:18:30.315
<00:18:28.795>and <00:18:29.023>mixture <00:18:29.251>of <00:18:29.479>these <00:18:29.707>kind <00:18:29.935>of <00:18:30.163>colors,

388
00:18:31.055 --> 00:18:33.315
<00:18:31.055>and <00:18:31.210>you <00:18:31.366>can <00:18:31.521>add <00:18:31.677>them <00:18:31.832>in <00:18:31.988>in <00:18:32.143>a <00:18:32.299>different <00:18:32.455>proportion.

389
00:18:33.735 --> 00:18:37.635
<00:18:33.735>And <00:18:33.875>then <00:18:34.014>you <00:18:34.155>can <00:18:34.294>have, <00:18:34.435>uh, <00:18:34.574>the, <00:18:34.715>the <00:18:34.854>color <00:18:34.995>you <00:18:35.135>want

390
00:18:37.935 --> 00:18:40.915
<00:18:37.935>by <00:18:38.110>mixing <00:18:38.284>them <00:18:38.460>in, <00:18:38.635>in, <00:18:38.810>in <00:18:38.985>an <00:18:39.159>appropriate <00:18:39.335>way.

391
00:18:41.655 --> 00:18:42.915
<00:18:41.655>But <00:18:41.938>whereas <00:18:42.222>when <00:18:42.505>you <00:18:42.789>start

392
00:18:42.935 --> 00:18:46.035
<00:18:42.935>to <00:18:43.110>print <00:18:43.284>things <00:18:43.460>on <00:18:43.635>the <00:18:43.810>paper, <00:18:43.985>then <00:18:44.159>things <00:18:44.335>change.

393
00:18:46.735 --> 00:18:49.195
<00:18:46.735>So <00:18:46.909>if <00:18:47.084>you <00:18:47.260>do <00:18:47.435>painting <00:18:47.610>with, <00:18:47.784>uh, <00:18:47.959>with <00:18:48.135>brushes,

394
00:18:49.195 --> 00:18:51.595
<00:18:49.195>and <00:18:49.335>you <00:18:49.475>will <00:18:49.615>see <00:18:49.754>actually <00:18:49.895>mixing <00:18:50.034>all <00:18:50.175>colors <00:18:50.314>don't <00:18:50.455>give <00:18:50.595>you

395
00:18:51.595 --> 00:18:54.995
<00:18:51.595>the <00:18:51.722>white <00:18:51.849>actually <00:18:51.976>once, <00:18:52.104>once <00:18:52.231>if <00:18:52.358>you <00:18:52.485>do <00:18:52.613>painting, <00:18:52.740>if <00:18:52.867>you <00:18:52.995>try

396
00:18:54.995 --> 00:18:58.035
<00:18:54.995>to, <00:18:55.135>um, <00:18:55.274>mix <00:18:55.415>colors, <00:18:55.554>then <00:18:55.695>you <00:18:55.834>end <00:18:55.975>up <00:18:56.114>with <00:18:56.254>some <00:18:56.395>sort

397
00:18:58.035 --> 00:18:59.155
<00:18:58.035>of <00:18:58.287>muddy <00:18:58.539>color <00:18:58.791>like <00:18:59.043>brown.

398
00:18:59.735 --> 00:19:01.115
<00:18:59.735>And <00:18:59.912>this <00:19:00.089>is <00:19:00.267>a <00:19:00.444>color. <00:19:00.622>Uh, <00:19:00.799>this <00:19:00.977>is

399
00:19:01.115 --> 00:19:03.555
<00:19:01.115>because <00:19:01.290>of <00:19:01.465>the <00:19:01.640>paints <00:19:01.815>are <00:19:01.990>subtractive <00:19:02.165>colors, <00:19:02.340>which <00:19:02.515>means

400
00:19:03.715 --> 00:19:07.875
<00:19:03.715>that <00:19:03.870>whenever <00:19:04.026>white <00:19:04.181>light <00:19:04.337>is <00:19:04.492>emitted <00:19:04.648>on <00:19:04.803>paper, <00:19:04.959>the <00:19:05.115>dye

401
00:19:08.715 --> 00:19:13.355
<00:19:08.715>subjects, <00:19:08.915>uh, <00:19:09.115>everything <00:19:09.314>except, <00:19:09.514>uh, <00:19:09.715>the <00:19:09.915>relevant <00:19:10.115>color,

402
00:19:13.455 --> 00:19:14.595
<00:19:13.455>if <00:19:13.660>it <00:19:13.865>is <00:19:14.070>red, <00:19:14.275>for <00:19:14.481>example,

403
00:19:14.615 --> 00:19:18.155
<00:19:14.615>or <00:19:14.770>magenta <00:19:14.926>in <00:19:15.081>this <00:19:15.237>case, <00:19:15.392>uh, <00:19:15.548>the <00:19:15.703>magenta <00:19:15.859>color, <00:19:16.015>uh,

404
00:19:18.665 --> 00:19:21.315
<00:19:18.665>absorbs <00:19:18.840>all <00:19:19.014>the <00:19:19.190>color <00:19:19.365>and <00:19:19.540>only <00:19:19.715>only <00:19:19.889>emits <00:19:20.065>magenta.

405
00:19:21.315 --> 00:19:24.875
<00:19:21.315>Whereas <00:19:21.490>with <00:19:21.665>the, <00:19:21.840>uh, <00:19:22.015>CN <00:19:22.190>is <00:19:22.365>the <00:19:22.540>same, <00:19:22.715>uh,

406
00:19:25.055 --> 00:19:26.195
<00:19:25.055>and <00:19:25.260>the <00:19:25.465>yellow <00:19:25.670>is <00:19:25.875>the <00:19:26.081>same.

407
00:19:26.975 --> 00:19:28.075
<00:19:26.975>The, <00:19:27.173>the, <00:19:27.370>the <00:19:27.569>story <00:19:27.767>is <00:19:27.965>that,

408
00:19:28.175 --> 00:19:30.035
<00:19:28.175>but <00:19:28.375>the <00:19:28.575>K <00:19:28.774>is <00:19:28.975>K <00:19:29.175>represents <00:19:29.375>the <00:19:29.575>black.

409
00:19:30.775 --> 00:19:34.715
<00:19:30.775>And <00:19:30.891>the <00:19:31.008>fact <00:19:31.125>is, <00:19:31.241>even <00:19:31.358>if <00:19:31.475>you <00:19:31.591>try <00:19:31.708>to <00:19:31.825>mix <00:19:31.941>all <00:19:32.058>colors, <00:19:32.175>you,

410
00:19:34.775 --> 00:19:37.195
<00:19:34.775>it <00:19:34.950>is <00:19:35.125>pretty <00:19:35.300>difficult <00:19:35.475>to <00:19:35.650>achieve <00:19:35.825>the <00:19:36.000>true <00:19:36.175>black.

411
00:19:37.575 --> 00:19:40.795
<00:19:37.575>That's <00:19:37.750>why <00:19:37.925>the <00:19:38.100>printing <00:19:38.275>systems <00:19:38.450>has <00:19:38.625>the <00:19:38.800>black <00:19:38.975>explicit,

412
00:19:40.805 --> 00:19:42.155
<00:19:40.805>which <00:19:41.048>gives <00:19:41.291>you <00:19:41.534>the <00:19:41.777>true <00:19:42.020>black

413
00:19:42.155 --> 00:19:45.595
<00:19:42.155>because <00:19:42.330>it <00:19:42.504>is <00:19:42.680>somewhat <00:19:42.855>rather, <00:19:43.030>uh, <00:19:43.205>difficult <00:19:43.379>to <00:19:43.555>achieve.

414
00:19:45.815 --> 00:19:50.155
<00:19:45.815>So <00:19:45.955>this <00:19:46.095>is <00:19:46.235>the <00:19:46.375>story <00:19:46.515>between <00:19:46.655>the, <00:19:46.795>um, <00:19:46.935>RGB <00:19:47.075>and <00:19:47.215>C-C-M-Y-K,

415
00:19:50.215 --> 00:19:52.475
<00:19:50.215>and, <00:19:50.389>uh, <00:19:50.564>where <00:19:50.740>the <00:19:50.915>one <00:19:51.090>we, <00:19:51.264>the <00:19:51.439>additive <00:19:51.615>colors

416
00:19:52.535 --> 00:19:53.675
<00:19:52.535>and <00:19:52.877>being <00:19:53.219>the <00:19:53.561>other,

417
00:19:53.735 --> 00:19:55.435
<00:19:53.735>the <00:19:53.968>other <00:19:54.201>one <00:19:54.435>in <00:19:54.668>the <00:19:54.901>subtractive <00:19:55.135>colors.

418
00:19:55.895 --> 00:19:58.875
<00:19:55.895>But <00:19:56.011>for <00:19:56.128>the <00:19:56.245>time <00:19:56.361>being, <00:19:56.478>we <00:19:56.595>are <00:19:56.711>going <00:19:56.828>to <00:19:56.945>stick <00:19:57.061>to <00:19:57.178>RGBA, <00:19:57.295>um,

419
00:19:59.325 --> 00:20:00.715
<00:19:59.325>which <00:19:59.503>we <00:19:59.682>are <00:19:59.861>going <00:20:00.039>gonna <00:20:00.218>visit <00:20:00.397>the <00:20:00.576>screen.

420
00:20:00.775 --> 00:20:02.395
<00:20:00.775>So <00:20:01.055>I <00:20:01.335>ask, <00:20:01.615>where <00:20:01.895>is <00:20:02.175>magenta?

421
00:20:02.395 --> 00:20:04.875
<00:20:02.395>And <00:20:02.570>then <00:20:02.745>you <00:20:02.920>can <00:20:03.095>see <00:20:03.270>magenta, <00:20:03.445>it's, <00:20:03.620>it's <00:20:03.795>here.

422
00:20:05.095 --> 00:20:08.275
<00:20:05.095>Uh, <00:20:05.250>when <00:20:05.406>you <00:20:05.561>mix <00:20:05.717>color, <00:20:05.872>then <00:20:06.028>you <00:20:06.183>can <00:20:06.339>actually, <00:20:06.495>our,

423
00:20:08.415 --> 00:20:10.475
<00:20:08.415>our <00:20:08.695>eyes <00:20:08.975>mixed <00:20:09.254>sense <00:20:09.534>illusion, <00:20:09.815>uh,

424
00:20:10.535 --> 00:20:12.555
<00:20:10.535>by <00:20:11.001>replaying <00:20:11.468>this <00:20:11.935>wavelengths.

425
00:20:12.695 --> 00:20:16.155
<00:20:12.695>Um, <00:20:12.850>and <00:20:13.006>then <00:20:13.161>it <00:20:13.317>creates <00:20:13.472>as <00:20:13.628>if <00:20:13.783>there's <00:20:13.939>another <00:20:14.095>wavelength,

426
00:20:16.335 --> 00:20:18.155
<00:20:16.335>uh, <00:20:16.615>visible <00:20:16.895>but's, <00:20:17.175>actually <00:20:17.455>a <00:20:17.735>mixture

427
00:20:18.355 --> 00:20:20.275
<00:20:18.355>of <00:20:18.705>different <00:20:19.055>make <00:20:19.405>wave <00:20:19.755>lines.

428
00:20:21.935 --> 00:20:24.995
<00:20:21.935>So <00:20:22.135>visiting <00:20:22.335>of <00:20:22.534>terminology, <00:20:22.735>color <00:20:22.935>terminology, <00:20:23.135>uh, <00:20:23.335>let's,

429
00:20:24.995 --> 00:20:26.395
<00:20:24.995>we <00:20:25.246>can <00:20:25.499>talk <00:20:25.751>about <00:20:26.003>the <00:20:26.254>hue.

430
00:20:27.135 --> 00:20:28.595
<00:20:27.135>Hue <00:20:27.463>represents <00:20:27.792>the <00:20:28.120>color <00:20:28.449>itself,

431
00:20:28.695 --> 00:20:29.915
<00:20:28.695>and <00:20:28.851>you <00:20:29.008>can, <00:20:29.165>on <00:20:29.322>the <00:20:29.479>right <00:20:29.636>hand <00:20:29.793>side,

432
00:20:29.915 --> 00:20:31.755
<00:20:29.915>you <00:20:30.090>can <00:20:30.264>see <00:20:30.440>there <00:20:30.615>is, <00:20:30.790>there's <00:20:30.965>a <00:20:31.139>circle <00:20:31.315>there.

433
00:20:32.495 --> 00:20:37.435
<00:20:32.495>Uh, <00:20:32.635>and <00:20:32.774>well, <00:20:32.915>particularly <00:20:33.054>if <00:20:33.195>you <00:20:33.334>try <00:20:33.475>to <00:20:33.614>rotate <00:20:33.754>an <00:20:33.895>angle,

434
00:20:37.445 --> 00:20:39.355
<00:20:37.445>which <00:20:37.678>is <00:20:37.911>just <00:20:38.145>a <00:20:38.378>representation, <00:20:38.611>of <00:20:38.845>course,

435
00:20:39.935 --> 00:20:41.115
<00:20:39.935>you <00:20:40.147>can <00:20:40.359>get <00:20:40.572>a <00:20:40.784>different <00:20:40.997>color.

436
00:20:41.375 --> 00:20:44.275
<00:20:41.375>So <00:20:41.530>by <00:20:41.686>changing <00:20:41.841>the <00:20:41.997>hues <00:20:42.152>angle, <00:20:42.308>you <00:20:42.463>can <00:20:42.619>get <00:20:42.775>the,

437
00:20:44.335 --> 00:20:45.635
<00:20:44.335>get <00:20:44.569>some <00:20:44.803>sort <00:20:45.037>of <00:20:45.271>different <00:20:45.505>colors.

438
00:20:46.225 --> 00:20:48.525
<00:20:46.225>Whereas, <00:20:46.691>uh, <00:20:47.158>the <00:20:47.625>chroma

439
00:20:48.525 --> 00:20:51.125
<00:20:48.525>and <00:20:48.700>situation <00:20:48.875>is <00:20:49.050>defines <00:20:49.225>the, <00:20:49.400>the <00:20:49.575>amount <00:20:49.750>of <00:20:49.925>color.

440
00:20:51.185 --> 00:20:54.365
<00:20:51.185>So <00:20:51.325>the, <00:20:51.465>the <00:20:51.605>more <00:20:51.745>chroma <00:20:51.885>you <00:20:52.024>have, <00:20:52.165>the <00:20:52.304>more, <00:20:52.445>for <00:20:52.585>example,

441
00:20:54.625 --> 00:20:59.605
<00:20:54.625>if <00:20:54.780>it's <00:20:54.936>red, <00:20:55.091>you <00:20:55.247>see <00:20:55.402>a <00:20:55.558>more, <00:20:55.713>um, <00:20:55.869>live <00:20:56.025>red.

442
00:21:00.305 --> 00:21:01.725
<00:21:00.305>Uh, <00:21:00.731>whereas <00:21:01.157>the <00:21:01.582>lightness

443
00:21:01.725 --> 00:21:05.565
<00:21:01.725>and <00:21:01.880>brightness <00:21:02.036>is <00:21:02.191>the <00:21:02.347>amount <00:21:02.502>of <00:21:02.658>light <00:21:02.813>that <00:21:02.969>is, <00:21:03.125>um,

444
00:21:06.355 --> 00:21:09.115
<00:21:06.355>that <00:21:06.588>is, <00:21:06.821>uh, <00:21:07.055>running <00:21:07.288>on <00:21:07.521>the <00:21:07.755>color.

445
00:21:09.495 --> 00:21:12.275
<00:21:09.495>And, <00:21:09.669>uh, <00:21:09.844>so <00:21:10.020>if <00:21:10.195>you <00:21:10.370>have <00:21:10.544>less, <00:21:10.719>less <00:21:10.895>chroma

446
00:21:12.275 --> 00:21:15.075
<00:21:12.275>or <00:21:12.430>saturation, <00:21:12.586>then <00:21:12.741>the, <00:21:12.897>the, <00:21:13.052>the, <00:21:13.208>the <00:21:13.363>colors <00:21:13.519>become <00:21:13.675>boring.

447
00:21:15.345 --> 00:21:17.395
<00:21:15.345>Whereas <00:21:15.578>if, <00:21:15.811>if <00:21:16.045>you <00:21:16.278>reduce <00:21:16.511>the <00:21:16.745>lightness

448
00:21:17.395 --> 00:21:18.955
<00:21:17.395>and <00:21:17.675>brightness, <00:21:17.955>then <00:21:18.235>the <00:21:18.514>things <00:21:18.795>become,

449
00:21:19.255 --> 00:21:20.515
<00:21:19.255>um, <00:21:19.538>more <00:21:19.822>darker <00:21:20.105>and <00:21:20.389>darker.

450
00:21:23.215 --> 00:21:24.555
<00:21:23.215>Now, <00:21:23.456>there's <00:21:23.697>the <00:21:23.938>concept <00:21:24.179>of <00:21:24.421>gaud.

451
00:21:24.585 --> 00:21:27.315
<00:21:24.585>Gaud <00:21:24.785>is <00:21:24.985>like <00:21:25.185>a, <00:21:25.385>a <00:21:25.585>range <00:21:25.785>of <00:21:25.985>colors.

452
00:21:27.455 --> 00:21:31.475
<00:21:27.455>So <00:21:27.610>we <00:21:27.766>are, <00:21:27.921>almost <00:21:28.077>all <00:21:28.232>of <00:21:28.388>us <00:21:28.543>are <00:21:28.699>familiar <00:21:28.855>with,

453
00:21:31.775 --> 00:21:33.355
<00:21:31.775>uh, <00:21:32.475>RGB, <00:21:33.175>right?

454
00:21:33.355 --> 00:21:35.435
<00:21:33.355>There's <00:21:33.705>16 <00:21:34.055>million <00:21:34.405>colors <00:21:34.755>represented.

455
00:21:35.815 --> 00:21:37.755
<00:21:35.815>Uh, <00:21:35.990>but <00:21:36.165>there <00:21:36.340>are <00:21:36.515>other <00:21:36.690>color <00:21:36.865>spaces <00:21:37.040>as <00:21:37.215>well,

456
00:21:37.805 --> 00:21:39.995
<00:21:37.805>which <00:21:38.038>is <00:21:38.271>called, <00:21:38.505>for <00:21:38.738>example, <00:21:38.971>a, <00:21:39.205>a

457
00:21:40.575 --> 00:21:42.515
<00:21:40.575>mostly <00:21:40.855>supported <00:21:41.135>ones <00:21:41.415>called <00:21:41.695>P <00:21:41.975>three.

458
00:21:43.575 --> 00:21:48.115
<00:21:43.575>And <00:21:43.715>P <00:21:43.855>three <00:21:43.995>is <00:21:44.135>supported <00:21:44.275>by <00:21:44.415>actually <00:21:44.555>most, <00:21:44.695>uh, <00:21:44.835>apple <00:21:44.975>book,

459
00:21:48.115 --> 00:21:50.875
<00:21:48.115>apple, <00:21:48.290>apple <00:21:48.465>devices <00:21:48.640>already <00:21:48.815>there <00:21:48.990>on <00:21:49.165>their <00:21:49.340>laptop <00:21:49.515>screens,

460
00:21:50.875 --> 00:21:52.315
<00:21:50.875>and <00:21:51.091>a <00:21:51.307>lot <00:21:51.523>of <00:21:51.739>devices <00:21:51.955>supported <00:21:52.171>that.

461
00:21:52.345 --> 00:21:53.475
<00:21:52.345>They <00:21:52.599>start <00:21:52.853>to <00:21:53.107>support <00:21:53.361>that.

462
00:21:54.215 --> 00:21:56.155
<00:21:54.215>And <00:21:54.389>what, <00:21:54.564>what <00:21:54.740>this <00:21:54.915>gives <00:21:55.090>us <00:21:55.264>that <00:21:55.439>there <00:21:55.615>were,

463
00:21:56.155 --> 00:21:58.275
<00:21:56.155>there <00:21:56.355>were <00:21:56.555>some <00:21:56.754>colors, <00:21:56.955>there <00:21:57.155>were <00:21:57.355>more <00:21:57.555>live

464
00:21:58.415 --> 00:22:01.875
<00:21:58.415>and <00:21:58.590>vivid <00:21:58.764>colors <00:21:58.940>that <00:21:59.115>were <00:21:59.290>not <00:21:59.465>possible <00:21:59.639>to <00:21:59.815>generate

465
00:22:01.985 --> 00:22:02.995
<00:22:01.985>with <00:22:02.893>RGB.

466
00:22:03.095 --> 00:22:07.285
<00:22:03.095>And <00:22:03.222>now <00:22:03.349>we <00:22:03.476>do <00:22:03.604>have <00:22:03.731>access <00:22:03.858>to <00:22:03.985>that. <00:22:04.113>Let's <00:22:04.240>see, <00:22:04.367>an <00:22:04.495>example.

467
00:22:07.425 --> 00:22:09.365
<00:22:07.425>Uh, <00:22:07.658>this <00:22:07.891>is, <00:22:08.125>uh, <00:22:08.358>chrome <00:22:08.591>dev <00:22:08.825>tools.

468
00:22:09.465 --> 00:22:12.685
<00:22:09.465>And <00:22:09.605>you <00:22:09.745>can <00:22:09.885>see <00:22:10.024>when <00:22:10.165>you <00:22:10.304>specify <00:22:10.445>a <00:22:10.584>color <00:22:10.725>with, <00:22:10.865>uh,

469
00:22:12.685 --> 00:22:16.245
<00:22:12.685>this <00:22:12.840>cryptic <00:22:12.996>display <00:22:13.151>P <00:22:13.307>tray, <00:22:13.462>uh, <00:22:13.618>which <00:22:13.773>is <00:22:13.929>very <00:22:14.085>cryptic,

470
00:22:16.245 --> 00:22:18.965
<00:22:16.245>if <00:22:16.361>you <00:22:16.478>ask <00:22:16.594>me, <00:22:16.711>you <00:22:16.828>can <00:22:16.945>see <00:22:17.061>on <00:22:17.178>the <00:22:17.294>left <00:22:17.411>hand <00:22:17.528>side, <00:22:17.645>there's,

471
00:22:18.965 --> 00:22:22.765
<00:22:18.965>there <00:22:19.092>is <00:22:19.219>a, <00:22:19.346>there's <00:22:19.474>a <00:22:19.601>white <00:22:19.728>border, <00:22:19.855>which <00:22:19.983>the <00:22:20.110>left <00:22:20.237>hand <00:22:20.365>side

472
00:22:22.765 --> 00:22:27.085
<00:22:22.765>of <00:22:22.920>this <00:22:23.076>white <00:22:23.231>border <00:22:23.387>is <00:22:23.542>the, <00:22:23.698>uh, <00:22:23.853>the <00:22:24.009>R-G-B-R-G-B <00:22:24.165>space.

473
00:22:27.115 --> 00:22:28.165
<00:22:27.115>This <00:22:27.304>is <00:22:27.493>where <00:22:27.682>we <00:22:27.870>are <00:22:28.060>familiar,

474
00:22:28.265 --> 00:22:30.885
<00:22:28.265>but <00:22:28.440>if <00:22:28.615>you <00:22:28.790>go, <00:22:28.965>if <00:22:29.140>you <00:22:29.315>transcend <00:22:29.490>this <00:22:29.665>region,

475
00:22:31.745 --> 00:22:33.565
<00:22:31.745>you <00:22:32.024>can <00:22:32.304>see <00:22:32.584>actually <00:22:32.864>more <00:22:33.145>live

476
00:22:33.565 --> 00:22:35.965
<00:22:33.565>and <00:22:33.740>vivid <00:22:33.915>colors <00:22:34.090>are <00:22:34.265>available, <00:22:34.440>which <00:22:34.615>is, <00:22:34.790>which <00:22:34.965>is

477
00:22:36.105 --> 00:22:37.725
<00:22:36.105>beyond <00:22:36.805>RGB <00:22:37.505>space.

478
00:22:38.345 --> 00:22:43.165
<00:22:38.345>And <00:22:38.472>today, <00:22:38.599>by <00:22:38.726>using, <00:22:38.854>um, <00:22:38.981>uh, <00:22:39.108>a <00:22:39.235>gumbo <00:22:39.363>like <00:22:39.490>P <00:22:39.617>three, <00:22:39.745>uh,

479
00:22:43.305 --> 00:22:44.605
<00:22:43.305>you <00:22:43.539>can <00:22:43.773>actually <00:22:44.007>start <00:22:44.241>using <00:22:44.475>them.

480
00:22:45.235 --> 00:22:47.165
<00:22:45.235>This <00:22:45.514>is <00:22:45.794>supported <00:22:46.074>by <00:22:46.354>most <00:22:46.635>browsers,

481
00:22:47.265 --> 00:22:48.445
<00:22:47.265>uh, <00:22:47.619>most <00:22:47.973>popular <00:22:48.327>browsers.

482
00:22:48.445 --> 00:22:50.005
<00:22:48.445>And <00:22:48.794>also <00:22:49.145>there's <00:22:49.495>a <00:22:49.845>more

483
00:22:50.005 --> 00:22:51.845
<00:22:50.005>and <00:22:50.238>more <00:22:50.471>support <00:22:50.705>coming <00:22:50.938>to <00:22:51.171>many <00:22:51.405>devices.

484
00:22:54.275 --> 00:22:57.695
<00:22:54.275>But <00:22:54.402>we <00:22:54.529>have <00:22:54.656>RGBA, <00:22:54.784>uh, <00:22:54.911>well, <00:22:55.038>which <00:22:55.165>is <00:22:55.293>a <00:22:55.420>red, <00:22:55.547>green <00:22:55.675>blue,

485
00:22:58.035 --> 00:22:59.335
<00:22:58.035>and <00:22:58.620>the <00:22:59.205>alpha.

486
00:22:59.715 --> 00:23:00.775
<00:22:59.715>What's <00:23:00.033>wrong <00:23:00.351>with <00:23:00.669>this?

487
00:23:01.845 --> 00:23:03.175
<00:23:01.845>There's <00:23:02.084>something <00:23:02.323>very <00:23:02.563>wrong <00:23:02.802>with <00:23:03.042>this.

488
00:23:04.335 --> 00:23:06.835
<00:23:04.335>The <00:23:04.490>problem <00:23:04.646>is <00:23:04.801>that <00:23:04.957>they're <00:23:05.112>not <00:23:05.268>very <00:23:05.423>human <00:23:05.579>per <00:23:05.735>perceptive.

489
00:23:06.835 --> 00:23:10.515
<00:23:06.835>So <00:23:06.990>if <00:23:07.146>I <00:23:07.301>say <00:23:07.457>a <00:23:07.612>color <00:23:07.768>like, <00:23:07.923>uh, <00:23:08.079>76, <00:23:08.235>53,

490
00:23:10.695 --> 00:23:15.145
<00:23:10.695>and <00:23:10.870>uh, <00:23:11.044>72, <00:23:11.220>what <00:23:11.395>that <00:23:11.570>color <00:23:11.745>means, <00:23:11.919>it's, <00:23:12.095>it's,

491
00:23:15.145 --> 00:23:16.865
<00:23:15.145>it's <00:23:15.425>hard <00:23:15.705>for <00:23:15.985>humans <00:23:16.264>to <00:23:16.545>grasp.

492
00:23:17.725 --> 00:23:21.225
<00:23:17.725>That's <00:23:17.865>why <00:23:18.004>we <00:23:18.145>end <00:23:18.284>up <00:23:18.425>with <00:23:18.564>different <00:23:18.705>color <00:23:18.844>spaces, <00:23:18.985>uh, <00:23:19.125>such

493
00:23:21.245 --> 00:23:24.705
<00:23:21.245>as, <00:23:21.478>well, <00:23:21.711>HSL <00:23:21.945>and <00:23:22.178>HSV <00:23:22.411>in <00:23:22.645>particular.

494
00:23:24.765 --> 00:23:25.905
<00:23:24.765>The, <00:23:25.107>the <00:23:25.449>CSS <00:23:25.791>supports.

495
00:23:25.905 --> 00:23:29.385
<00:23:25.905>HSL, <00:23:26.254>where <00:23:26.605>the <00:23:26.955>H <00:23:27.305>part

496
00:23:30.265 --> 00:23:32.705
<00:23:30.265>represents <00:23:30.545>the <00:23:30.825>hue, <00:23:31.105>the <00:23:31.385>color, <00:23:31.665>uh,

497
00:23:32.885 --> 00:23:37.225
<00:23:32.885>the <00:23:33.012>s <00:23:33.139>is <00:23:33.266>the <00:23:33.394>saturation <00:23:33.521>if <00:23:33.648>you <00:23:33.775>go <00:23:33.903>horizontal <00:23:34.030>on <00:23:34.157>the <00:23:34.285>axis,

498
00:23:37.655 --> 00:23:40.745
<00:23:37.655>whereas <00:23:37.830>the <00:23:38.004>l <00:23:38.180>bring, <00:23:38.355>make <00:23:38.530>it <00:23:38.705>make <00:23:38.879>it <00:23:39.055>lighter

499
00:23:40.765 --> 00:23:42.185
<00:23:40.765>and <00:23:41.191>lighter, <00:23:41.617>which <00:23:42.043>approximates

500
00:23:42.405 --> 00:23:44.385
<00:23:42.405>to <00:23:42.638>white <00:23:42.871>if <00:23:43.105>you <00:23:43.338>go <00:23:43.571>upwards <00:23:43.805>direction.

501
00:23:44.405 --> 00:23:47.765
<00:23:44.405>And <00:23:44.532>if <00:23:44.659>you, <00:23:44.786>you <00:23:44.914>go, <00:23:45.041>uh, <00:23:45.168>to, <00:23:45.295>uh, <00:23:45.423>black, <00:23:45.550>if <00:23:45.677>you <00:23:45.805>go

502
00:23:47.765 --> 00:23:48.765
<00:23:47.765>to <00:23:48.215>downward <00:23:48.665>direction.

503
00:23:49.985 --> 00:23:53.285
<00:23:49.985>So <00:23:50.159>this <00:23:50.334>somehow <00:23:50.510>is <00:23:50.685>far <00:23:50.860>more <00:23:51.034>human <00:23:51.209>friendly, <00:23:51.385>uh,

504
00:23:53.285 --> 00:23:55.965
<00:23:53.285>because <00:23:53.485>by <00:23:53.685>you, <00:23:53.885>by <00:23:54.085>playing <00:23:54.285>with <00:23:54.485>HSL <00:23:54.685>parameters,

505
00:23:55.965 --> 00:23:57.845
<00:23:55.965>then <00:23:56.139>I <00:23:56.314>can <00:23:56.490>just <00:23:56.665>make <00:23:56.840>the <00:23:57.014>color <00:23:57.189>a <00:23:57.365>bit

506
00:23:57.845 --> 00:23:59.045
<00:23:57.845>lighter <00:23:58.115>or <00:23:58.385>change <00:23:58.655>the <00:23:58.925>hue.

507
00:23:59.465 --> 00:24:02.285
<00:23:59.465>Uh, <00:23:59.665>but <00:23:59.865>there's <00:24:00.064>one <00:24:00.264>fundamental <00:24:00.465>problem <00:24:00.665>with <00:24:00.865>HSL.

508
00:24:02.665 --> 00:24:06.885
<00:24:02.665>Um, <00:24:02.805>so <00:24:02.945>for <00:24:03.085>that, <00:24:03.225>I'd <00:24:03.365>like <00:24:03.504>to <00:24:03.645>address <00:24:03.784>this, <00:24:03.925>uh, <00:24:04.065>screenshot.

509
00:24:07.745 --> 00:24:10.285
<00:24:07.745>So <00:24:07.861>on <00:24:07.978>the <00:24:08.094>left <00:24:08.211>hand <00:24:08.328>side, <00:24:08.445>you <00:24:08.561>can <00:24:08.678>see <00:24:08.794>there's <00:24:08.911>a, <00:24:09.028>there's <00:24:09.145>a,

510
00:24:10.385 --> 00:24:14.165
<00:24:10.385>um, <00:24:10.512>there's <00:24:10.639>a <00:24:10.766>tortoise <00:24:10.894>swimming <00:24:11.021>in <00:24:11.148>the <00:24:11.275>ocean <00:24:11.403>or <00:24:11.530>a <00:24:11.657>sea, <00:24:11.785>uh,

511
00:24:14.265 --> 00:24:15.525
<00:24:14.265>and <00:24:14.491>in, <00:24:14.718>in <00:24:14.945>the <00:24:15.172>blue <00:24:15.399>color.

512
00:24:16.065 --> 00:24:20.765
<00:24:16.065>And <00:24:16.298>somehow, <00:24:16.531>um, <00:24:16.765>someone <00:24:16.998>decided <00:24:17.231>to, <00:24:17.465>uh,

513
00:24:21.095 --> 00:24:25.045
<00:24:21.095>shift <00:24:21.235>the <00:24:21.375>hue, <00:24:21.515>which <00:24:21.655>is <00:24:21.795>the <00:24:21.935>color <00:24:22.075>itself <00:24:22.215>by <00:24:22.355>30 <00:24:22.495>degrees.

514
00:24:26.615 --> 00:24:31.315
<00:24:26.615>Notice <00:24:26.770>actually, <00:24:26.926>once <00:24:27.081>you <00:24:27.237>do <00:24:27.392>that <00:24:27.548>with <00:24:27.703>HSL, <00:24:27.859>actually <00:24:28.015>the,

515
00:24:31.335 --> 00:24:34.035
<00:24:31.335>the, <00:24:31.510>the, <00:24:31.685>the, <00:24:31.860>the <00:24:32.035>color, <00:24:32.210>the, <00:24:32.385>the <00:24:32.560>brightness <00:24:32.735>changes.

516
00:24:34.055 --> 00:24:36.955
<00:24:34.055>It <00:24:34.210>become <00:24:34.366>a <00:24:34.521>little <00:24:34.677>bit <00:24:34.832>more <00:24:34.988>brighter, <00:24:35.143>uh, <00:24:35.299>the <00:24:35.455>noisy.

517
00:24:38.015 --> 00:24:41.555
<00:24:38.015>And <00:24:38.215>apparently <00:24:38.415>the, <00:24:38.615>the <00:24:38.815>way <00:24:39.015>implemented <00:24:39.215>HSL <00:24:39.415>is,

518
00:24:41.695 --> 00:24:42.795
<00:24:41.695>is <00:24:41.942>vulnerable <00:24:42.190>to <00:24:42.437>the <00:24:42.685>problem.

519
00:24:42.905 --> 00:24:45.555
<00:24:42.905>It's <00:24:43.080>just, <00:24:43.254>it, <00:24:43.430>it, <00:24:43.605>once <00:24:43.780>you <00:24:43.955>change <00:24:44.129>the <00:24:44.305>hue,

520
00:24:45.655 --> 00:24:48.195
<00:24:45.655>it <00:24:45.888>also <00:24:46.121>changes <00:24:46.355>the, <00:24:46.588>the <00:24:46.821>light <00:24:47.055>itself.

521
00:24:48.575 --> 00:24:49.835
<00:24:48.575>So <00:24:48.858>it's <00:24:49.142>not, <00:24:49.425>uh, <00:24:49.709>it,

522
00:24:49.835 --> 00:24:52.395
<00:24:49.835>it's <00:24:50.035>a <00:24:50.235>little <00:24:50.435>particularly <00:24:50.635>susceptible <00:24:50.835>to <00:24:51.035>this <00:24:51.235>problem.

523
00:24:53.175 --> 00:24:56.875
<00:24:53.175>And <00:24:53.315>another <00:24:53.455>example, <00:24:53.595>you <00:24:53.735>can <00:24:53.875>see <00:24:54.014>that <00:24:54.155>the <00:24:54.294>HSL <00:24:54.435>here, <00:24:54.575>uh,

524
00:24:57.375 --> 00:24:59.555
<00:24:57.375>you <00:24:57.530>can <00:24:57.686>see <00:24:57.841>the, <00:24:57.997>the <00:24:58.152>colorized <00:24:58.308>and <00:24:58.463>de <00:24:58.619>colorized <00:24:58.775>version.

525
00:25:00.255 --> 00:25:03.075
<00:25:00.255>Uh, <00:25:00.488>the <00:25:00.721>colors <00:25:00.955>are <00:25:01.188>not <00:25:01.421>the <00:25:01.655>same.

526
00:25:03.215 --> 00:25:04.955
<00:25:03.215>The, <00:25:03.389>the, <00:25:03.564>the <00:25:03.740>lightness <00:25:03.915>actually <00:25:04.090>is <00:25:04.264>not <00:25:04.439>the <00:25:04.615>same.

527
00:25:04.955 --> 00:25:08.035
<00:25:04.955>If <00:25:05.129>you <00:25:05.304>go <00:25:05.480>horizontally <00:25:05.655>from <00:25:05.830>the <00:25:06.004>below <00:25:06.179>section, <00:25:06.355>uh,

528
00:25:08.095 --> 00:25:10.795
<00:25:08.095>you <00:25:08.295>can <00:25:08.495>see <00:25:08.695>the, <00:25:08.895>the, <00:25:09.095>the, <00:25:09.295>the <00:25:09.495>dark.

529
00:25:10.805 --> 00:25:13.635
<00:25:10.805>There <00:25:10.960>are <00:25:11.116>some <00:25:11.271>portions <00:25:11.427>of <00:25:11.582>that <00:25:11.738>are <00:25:11.893>darker <00:25:12.049>for <00:25:12.205>that.

530
00:25:13.635 --> 00:25:15.995
<00:25:13.635>To <00:25:13.790>address <00:25:13.946>this <00:25:14.101>problem, <00:25:14.257>there's <00:25:14.412>a <00:25:14.568>new <00:25:14.723>system <00:25:14.879>called, <00:25:15.035>okay,

531
00:25:16.155 --> 00:25:20.365
<00:25:16.155>LCH, <00:25:16.355>and <00:25:16.555>which <00:25:16.754>actually <00:25:16.955>somewhat <00:25:17.155>addresses <00:25:17.355>this <00:25:17.555>problem.

532
00:25:20.365 --> 00:25:23.085
<00:25:20.365>And <00:25:20.598>let's <00:25:20.831>see <00:25:21.065>this <00:25:21.298>how <00:25:21.531>KLCH, <00:25:21.765>um,

533
00:25:24.145 --> 00:25:25.725
<00:25:24.145>eh, <00:25:25.545>works.

534
00:25:26.305 --> 00:25:30.445
<00:25:26.305>So <00:25:26.421>on <00:25:26.538>the <00:25:26.655>left <00:25:26.771>hand, <00:25:26.888>left <00:25:27.005>pan, <00:25:27.121>you <00:25:27.238>can <00:25:27.355>see, <00:25:27.471>uh, <00:25:27.588>the <00:25:27.705>button.

535
00:25:30.785 --> 00:25:33.725
<00:25:30.785>And <00:25:30.912>we <00:25:31.039>somehow, <00:25:31.166>let's <00:25:31.294>say, <00:25:31.421>decided <00:25:31.548>to <00:25:31.675>change <00:25:31.803>the <00:25:31.930>HU <00:25:32.057>of <00:25:32.185>it,

536
00:25:33.725 --> 00:25:37.205
<00:25:33.725>which <00:25:33.925>is <00:25:34.125>the, <00:25:34.324>from <00:25:34.524>20 <00:25:34.725>20 <00:25:34.925>72, <00:25:35.125>uh,

537
00:25:37.205 --> 00:25:38.645
<00:25:37.205>we <00:25:37.464>changed <00:25:37.723>the <00:25:37.982>H <00:25:38.241>parameter <00:25:38.501>90.

538
00:25:39.345 --> 00:25:41.965
<00:25:39.345>But <00:25:39.472>you <00:25:39.599>can <00:25:39.726>see <00:25:39.854>the <00:25:39.981>moment <00:25:40.108>we <00:25:40.235>change <00:25:40.363>it, <00:25:40.490>we <00:25:40.617>actually <00:25:40.745>start

539
00:25:41.965 --> 00:25:43.805
<00:25:41.965>to <00:25:42.245>lose <00:25:42.524>the, <00:25:42.804>uh, <00:25:43.084>the <00:25:43.365>contrast.

540
00:25:44.225 --> 00:25:46.165
<00:25:44.225>Uh, <00:25:44.425>the <00:25:44.625>white <00:25:44.824>and <00:25:45.024>the <00:25:45.225>green <00:25:45.425>aren't <00:25:45.625>very,

541
00:25:46.585 --> 00:25:49.845
<00:25:46.585>aren't <00:25:46.818>very <00:25:47.051>distinguishable, <00:25:47.285>whereas <00:25:47.518>with, <00:25:47.751>with <00:25:47.985>KLCH,

542
00:25:49.845 --> 00:25:51.005
<00:25:49.845>which <00:25:50.053>is <00:25:50.262>supported <00:25:50.471>by <00:25:50.680>all <00:25:50.889>browsers.

543
00:25:51.025 --> 00:25:54.885
<00:25:51.025>Now, <00:25:51.180>uh, <00:25:51.336>if <00:25:51.491>we <00:25:51.647>just <00:25:51.802>change <00:25:51.958>the <00:25:52.113>hue <00:25:52.269>from <00:25:52.425>294

544
00:25:54.925 --> 00:25:59.445
<00:25:54.925>to <00:25:55.041>135 <00:25:55.158>35, <00:25:55.274>then <00:25:55.391>we <00:25:55.508>can <00:25:55.625>see, <00:25:55.741>we <00:25:55.858>can <00:25:55.975>still <00:25:56.091>keep <00:25:56.208>the <00:25:56.325>contrast,

545
00:25:59.775 --> 00:26:01.445
<00:25:59.775>which <00:26:00.055>is <00:26:00.335>very <00:26:00.615>important <00:26:00.895>for <00:26:01.175>accessibility.

546
00:26:02.315 --> 00:26:06.045
<00:26:02.315>Whereas <00:26:02.455>this, <00:26:02.595>this <00:26:02.735>slide <00:26:02.875>shows <00:26:03.015>the, <00:26:03.155>um, <00:26:03.295>uh, <00:26:03.435>there <00:26:03.575>are <00:26:03.715>two,

547
00:26:06.425 --> 00:26:09.645
<00:26:06.425>two <00:26:06.625>ways <00:26:06.825>to <00:26:07.024>start <00:26:07.225>use, <00:26:07.425>uh, <00:26:07.625>this <00:26:07.825>LAB

548
00:26:09.645 --> 00:26:13.685
<00:26:09.645>or <00:26:09.800>LCH <00:26:09.956>one <00:26:10.111>is <00:26:10.267>the, <00:26:10.422>uh, <00:26:10.578>confusingly <00:26:10.733>a <00:26:10.889>vertical <00:26:11.045>access,

549
00:26:13.685 --> 00:26:15.765
<00:26:13.685>but <00:26:13.918>we, <00:26:14.151>most <00:26:14.385>people <00:26:14.618>don't <00:26:14.851>use <00:26:15.085>it.

550
00:26:15.825 --> 00:26:18.875
<00:26:15.825>We, <00:26:16.025>we, <00:26:16.225>we <00:26:16.425>probably <00:26:16.625>use <00:26:16.825>the <00:26:17.025>OK <00:26:17.225>LCH,

551
00:26:19.285 --> 00:26:21.475
<00:26:19.285>where <00:26:19.565>L <00:26:19.845>stands <00:26:20.125>for <00:26:20.405>the <00:26:20.685>lightness.

552
00:26:21.835 --> 00:26:23.875
<00:26:21.835>C <00:26:22.010>stands <00:26:22.185>for <00:26:22.360>the <00:26:22.535>chroma, <00:26:22.710>which <00:26:22.885>is <00:26:23.060>this <00:26:23.235>direction,

553
00:26:24.335 --> 00:26:26.715
<00:26:24.335>and <00:26:24.490>H <00:26:24.646>stands <00:26:24.801>for <00:26:24.957>the <00:26:25.112>hue, <00:26:25.268>which <00:26:25.423>defines <00:26:25.579>the <00:26:25.735>color.

554
00:26:27.875 --> 00:26:30.535
<00:26:27.875>Um, <00:26:28.050>there <00:26:28.225>was <00:26:28.400>an <00:26:28.575>earlier <00:26:28.750>edition <00:26:28.925>called, <00:26:29.100>uh, <00:26:29.275>LCH,

555
00:26:30.535 --> 00:26:33.095
<00:26:30.535>but <00:26:30.690>apparently <00:26:30.846>this <00:26:31.001>was <00:26:31.157>also <00:26:31.312>a <00:26:31.468>susceptible <00:26:31.623>to <00:26:31.779>a <00:26:31.935>problem

556
00:26:33.145 --> 00:26:36.295
<00:26:33.145>where, <00:26:33.345>uh, <00:26:33.545>there's <00:26:33.745>some <00:26:33.945>portions <00:26:34.145>of <00:26:34.345>the, <00:26:34.545>uh,

557
00:26:36.295 --> 00:26:37.935
<00:26:36.295>color <00:26:36.995>aren't <00:26:37.695>homogeneous.

558
00:26:38.115 --> 00:26:39.855
<00:26:38.115>And, <00:26:38.395>okay, <00:26:38.675>LCH <00:26:38.955>fixes <00:26:39.235>this <00:26:39.515>problem.

559
00:26:40.235 --> 00:26:42.535
<00:26:40.235>And <00:26:40.409>today, <00:26:40.584>I <00:26:40.760>would <00:26:40.935>recommend <00:26:41.110>for <00:26:41.284>color <00:26:41.459>space, <00:26:41.635>okay,

560
00:26:42.575 --> 00:26:44.165
<00:26:42.575>LCH <00:26:42.855>probably <00:26:43.135>is <00:26:43.415>your <00:26:43.695>best <00:26:43.975>bet.

561
00:26:44.805 --> 00:26:48.945
<00:26:44.805>Uh, <00:26:44.960>so <00:26:45.116>let's <00:26:45.271>see <00:26:45.427>a <00:26:45.582>demo <00:26:45.738>with <00:26:45.893>the, <00:26:46.049>um, <00:26:46.205>okay,

562
00:26:48.985 --> 00:26:50.585
<00:26:48.985>LCH <00:26:49.685>color <00:26:50.385>picker.

563
00:26:55.935 --> 00:26:57.275
<00:26:55.935>So <00:26:56.236>this <00:26:56.538>is <00:26:56.839>an <00:26:57.141>application

564
00:26:57.275 --> 00:26:59.035
<00:26:57.275>where <00:26:57.508>you <00:26:57.741>can <00:26:57.975>play <00:26:58.208>with <00:26:58.441>different <00:26:58.675>parameters.

565
00:26:59.175 --> 00:27:01.875
<00:26:59.175>So <00:26:59.302>you <00:26:59.429>can <00:26:59.556>see, <00:26:59.684>um, <00:26:59.811>here <00:26:59.938>I <00:27:00.065>can <00:27:00.193>play <00:27:00.320>with <00:27:00.447>the <00:27:00.575>light

566
00:27:02.645 --> 00:27:07.505
<00:27:02.645>parameter, <00:27:02.845>the <00:27:03.045>chroma, <00:27:03.245>the <00:27:03.445>saturation, <00:27:03.645>and <00:27:03.845>the <00:27:04.045>alpha.

567
00:27:07.695 --> 00:27:10.665
<00:27:07.695>Well, <00:27:07.835>this <00:27:07.975>is <00:27:08.115>a <00:27:08.254>little <00:27:08.395>bit, <00:27:08.534>this <00:27:08.675>is <00:27:08.814>available, <00:27:08.955>uh, <00:27:09.095>in,

568
00:27:10.885 --> 00:27:13.265
<00:27:10.885>in <00:27:11.025>different, <00:27:11.165>and <00:27:11.305>finally, <00:27:11.445>you <00:27:11.585>can <00:27:11.725>see <00:27:11.865>I, <00:27:12.004>I <00:27:12.145>can <00:27:12.285>play

569
00:27:13.265 --> 00:27:16.905
<00:27:13.265>with <00:27:13.440>the, <00:27:13.615>uh, <00:27:13.790>hue <00:27:13.965>itself, <00:27:14.140>which <00:27:14.315>says <00:27:14.490>that, <00:27:14.665>well,

570
00:27:17.025 --> 00:27:18.425
<00:27:17.025>P <00:27:17.235>three <00:27:17.445>isn't <00:27:17.655>available <00:27:17.865>on <00:27:18.075>this <00:27:18.284>monitor,

571
00:27:18.425 --> 00:27:21.465
<00:27:18.425>because <00:27:18.565>I'm, <00:27:18.705>the, <00:27:18.845>the <00:27:18.985>monitor <00:27:19.125>I'm <00:27:19.264>using, <00:27:19.405>it's, <00:27:19.544>so <00:27:19.685>then <00:27:19.825>it,

572
00:27:21.465 --> 00:27:23.825
<00:27:21.465>it <00:27:21.665>falls <00:27:21.865>back <00:27:22.064>to <00:27:22.264>as <00:27:22.465>an <00:27:22.665>RGB <00:27:22.865>space.

573
00:27:25.045 --> 00:27:28.225
<00:27:25.045>Um, <00:27:25.172>but <00:27:25.299>playing <00:27:25.426>with <00:27:25.554>this, <00:27:25.681>uh, <00:27:25.808>you <00:27:25.935>can <00:27:26.063>have <00:27:26.190>very <00:27:26.317>good, <00:27:26.445>um,

574
00:27:28.645 --> 00:27:31.905
<00:27:28.645>um, <00:27:28.800>sense <00:27:28.956>of <00:27:29.111>what's <00:27:29.267>going <00:27:29.422>on <00:27:29.578>with <00:27:29.733>this <00:27:29.889>O-K-L-C-H <00:27:30.045>color,

575
00:27:32.165 --> 00:27:35.065
<00:27:32.165>and <00:27:32.305>which <00:27:32.445>gives <00:27:32.585>you, <00:27:32.725>uh, <00:27:32.865>the, <00:27:33.004>uh, <00:27:33.145>remember <00:27:33.284>the <00:27:33.425>advantage <00:27:33.565>is

576
00:27:35.065 --> 00:27:37.145
<00:27:35.065>that <00:27:35.240>you <00:27:35.415>can <00:27:35.590>play <00:27:35.765>with <00:27:35.940>the <00:27:36.115>few <00:27:36.290>without, <00:27:36.465>uh,

577
00:27:37.345 --> 00:27:38.345
<00:27:37.345>worrying <00:27:37.570>about <00:27:37.795>the <00:27:38.020>light <00:27:38.245>changes.

578
00:27:39.015 --> 00:27:42.025
<00:27:39.015>It's <00:27:39.190>supported <00:27:39.365>things <00:27:39.540>like <00:27:39.715>SSV, <00:27:39.890>uh, <00:27:40.065>SVG <00:27:40.240>as <00:27:40.415>well.

579
00:27:42.885 --> 00:27:45.425
<00:27:42.885>Um, <00:27:43.165>and <00:27:43.445>there's <00:27:43.725>actually <00:27:44.004>something <00:27:44.285>very,

580
00:27:45.425 --> 00:27:46.945
<00:27:45.425>very <00:27:45.880>recently, <00:27:46.337>land <00:27:46.793>new.

581
00:27:46.945 --> 00:27:50.065
<00:27:46.945>It <00:27:47.145>landed <00:27:47.345>into <00:27:47.544>the <00:27:47.745>browser, <00:27:47.945>uh, <00:27:48.145>called, <00:27:48.345>um,

582
00:27:51.245 --> 00:27:52.905
<00:27:51.245>um, <00:27:51.711>relative <00:27:52.178>color <00:27:52.645>syntax.

583
00:27:53.845 --> 00:27:58.155
<00:27:53.845>Um, <00:27:54.000>let <00:27:54.156>me <00:27:54.311>just <00:27:54.467>go <00:27:54.622>through <00:27:54.778>this <00:27:54.933>demo <00:27:55.089>as <00:27:55.245>well.

584
00:28:00.145 --> 00:28:01.685
<00:28:00.145>So <00:28:00.343>there's <00:28:00.541>a <00:28:00.739>blog <00:28:00.937>post <00:28:01.135>from <00:28:01.332>Ida <00:28:01.531>Maral,

585
00:28:01.685 --> 00:28:02.725
<00:28:01.685>which <00:28:01.841>I'm <00:28:01.996>a <00:28:02.153>big <00:28:02.309>fan <00:28:02.465>of <00:28:02.620>him.

586
00:28:02.945 --> 00:28:07.285
<00:28:02.945>Um, <00:28:03.120>and <00:28:03.294>he <00:28:03.470>basically <00:28:03.645>demonstrates <00:28:03.820>the <00:28:03.995>capabilities <00:28:04.169>of, <00:28:04.345>um,

587
00:28:08.105 --> 00:28:12.005
<00:28:08.105>the <00:28:08.305>relative <00:28:08.505>color <00:28:08.705>syntax, <00:28:08.905>which <00:28:09.105>is <00:28:09.305>actually, <00:28:09.505>um,

588
00:28:12.825 --> 00:28:15.005
<00:28:12.825>you <00:28:13.025>can <00:28:13.225>particularly <00:28:13.425>get <00:28:13.625>a <00:28:13.825>color <00:28:14.025>like <00:28:14.225>blue

589
00:28:15.625 --> 00:28:19.285
<00:28:15.625>and <00:28:15.765>say <00:28:15.905>that, <00:28:16.045>well, <00:28:16.185>I <00:28:16.325>would <00:28:16.465>like <00:28:16.605>to <00:28:16.745>increment <00:28:16.885>the <00:28:17.025>lightness

590
00:28:19.285 --> 00:28:21.485
<00:28:19.285>of <00:28:19.565>it <00:28:19.845>by <00:28:20.125>25 <00:28:20.405>per <00:28:20.685>unit.

591
00:28:22.145 --> 00:28:26.085
<00:28:22.145>And <00:28:22.261>then <00:28:22.378>you <00:28:22.495>end <00:28:22.611>up <00:28:22.728>with, <00:28:22.845>with, <00:28:22.961>with <00:28:23.078>just <00:28:23.195>a, <00:28:23.311>a, <00:28:23.428>uh, <00:28:23.545>um,

592
00:28:26.405 --> 00:28:28.365
<00:28:26.405>a <00:28:26.638>different <00:28:26.871>blue, <00:28:27.105>which <00:28:27.338>is <00:28:27.571>lighter <00:28:27.805>so

593
00:28:28.365 --> 00:28:30.005
<00:28:28.365>that <00:28:28.645>you <00:28:28.925>can <00:28:29.205>just <00:28:29.485>actually <00:28:29.765>alter

594
00:28:30.005 --> 00:28:31.165
<00:28:30.005>the <00:28:30.266>existing <00:28:30.527>colors <00:28:30.788>as <00:28:31.049>well.

595
00:28:32.085 --> 00:28:33.185
<00:28:32.085>And <00:28:32.415>here's <00:28:32.745>another <00:28:33.075>demo,

596
00:28:33.235 --> 00:28:36.225
<00:28:33.235>which <00:28:33.468>is <00:28:33.701>actually <00:28:33.935>making <00:28:34.168>it <00:28:34.401>75% <00:28:34.635>lighter.

597
00:28:36.805 --> 00:28:40.625
<00:28:36.805>Uh, <00:28:36.980>and <00:28:37.155>here's <00:28:37.330>another <00:28:37.505>one, <00:28:37.680>just, <00:28:37.855>uh, <00:28:38.030>minus <00:28:38.205>25,

598
00:28:40.625 --> 00:28:41.945
<00:28:40.625>making <00:28:40.862>it <00:28:41.100>a <00:28:41.337>little <00:28:41.575>bit <00:28:41.812>darker.

599
00:28:42.485 --> 00:28:44.465
<00:28:42.485>So <00:28:42.640>this <00:28:42.796>way <00:28:42.951>you <00:28:43.107>can <00:28:43.262>just <00:28:43.418>generate <00:28:43.573>your <00:28:43.729>own <00:28:43.885>color,

600
00:28:44.465 --> 00:28:46.225
<00:28:44.465>color <00:28:44.698>palettes <00:28:44.931>based <00:28:45.165>on <00:28:45.398>your <00:28:45.631>brand <00:28:45.865>color.

601
00:28:46.725 --> 00:28:50.985
<00:28:46.725>Um, <00:28:46.880>here's <00:28:47.036>again, <00:28:47.191>um, <00:28:47.347>uh, <00:28:47.502>it, <00:28:47.658>it <00:28:47.813>just <00:28:47.969>sets <00:28:48.125>it

602
00:28:50.985 --> 00:28:54.545
<00:28:50.985>to <00:28:51.125>25% <00:28:51.264>actually <00:28:51.405>just <00:28:51.544>as <00:28:51.685>a <00:28:51.824>new <00:28:51.965>value <00:28:52.104>for <00:28:52.245>the <00:28:52.385>lightness.

603
00:28:55.485 --> 00:28:59.665
<00:28:55.485>Um, <00:28:55.625>and <00:28:55.764>we <00:28:55.905>can <00:28:56.044>also <00:28:56.185>use, <00:28:56.324>uh, <00:28:56.465>things <00:28:56.604>like, <00:28:56.745>uh, <00:28:56.885>HSL.

604
00:28:59.855 --> 00:29:01.265
<00:28:59.855>It's <00:29:00.489>not <00:29:01.124>necessarily

605
00:29:01.265 --> 00:29:03.665
<00:29:01.265>to <00:29:01.465>use <00:29:01.665>O-K-L-C-H <00:29:01.865>for <00:29:02.065>this <00:29:02.265>kind <00:29:02.465>of <00:29:02.665>thing.

606
00:29:04.285 --> 00:29:06.705
<00:29:04.285>Um, <00:29:04.485>again, <00:29:04.685>it's, <00:29:04.885>it, <00:29:05.085>it <00:29:05.285>made <00:29:05.485>the <00:29:05.685>saturation

607
00:29:06.705 --> 00:29:08.905
<00:29:06.705>to <00:29:06.905>a <00:29:07.105>hundred <00:29:07.304>percent <00:29:07.504>for <00:29:07.705>the <00:29:07.905>same <00:29:08.105>color.

608
00:29:09.645 --> 00:29:13.465
<00:29:09.645>Um, <00:29:09.785>and <00:29:09.925>there <00:29:10.065>are <00:29:10.205>other <00:29:10.345>examples <00:29:10.485>here, <00:29:10.625>uh, <00:29:10.764>which <00:29:10.905>you <00:29:11.045>can,

609
00:29:13.465 --> 00:29:14.505
<00:29:13.465>you <00:29:13.620>can, <00:29:13.777>you <00:29:13.933>can <00:29:14.089>visit, <00:29:14.245>make <00:29:14.401>it,

610
00:29:14.505 --> 00:29:15.945
<00:29:14.505>make <00:29:14.764>it <00:29:15.023>make <00:29:15.282>increase <00:29:15.541>the <00:29:15.801>saturation.

611
00:29:16.925 --> 00:29:20.745
<00:29:16.925>And <00:29:17.065>also <00:29:17.205>you <00:29:17.345>can, <00:29:17.485>uh, <00:29:17.625>if <00:29:17.764>you <00:29:17.905>subtract <00:29:18.044>everything <00:29:18.185>from <00:29:18.325>one,

612
00:29:21.125 --> 00:29:22.745
<00:29:21.125>you <00:29:21.405>can <00:29:21.685>actually <00:29:21.965>get <00:29:22.245>inverted <00:29:22.525>color.

613
00:29:23.045 --> 00:29:25.425
<00:29:23.045>So <00:29:23.200>if <00:29:23.356>you <00:29:23.511>have <00:29:23.667>a <00:29:23.822>color, <00:29:23.978>you <00:29:24.133>can <00:29:24.289>invert <00:29:24.445>inverted

614
00:29:25.425 --> 00:29:28.545
<00:29:25.425>by <00:29:25.600>pally <00:29:25.774>dynamically <00:29:25.950>by <00:29:26.125>using <00:29:26.300>this <00:29:26.475>kind <00:29:26.649>of <00:29:26.825>syntax.

615
00:29:28.885 --> 00:29:32.505
<00:29:28.885>Or <00:29:29.001>you <00:29:29.118>can <00:29:29.235>complement <00:29:29.351>a <00:29:29.468>color <00:29:29.585>if <00:29:29.701>you, <00:29:29.818>um, <00:29:29.935>change <00:29:30.051>add <00:29:30.168>if <00:29:30.285>you

616
00:29:32.505 --> 00:29:33.745
<00:29:32.505>by <00:29:32.877>a <00:29:33.249>hundred, <00:29:33.620>180.

617
00:29:34.365 --> 00:29:37.945
<00:29:34.365>Uh, <00:29:34.565>and <00:29:34.765>similarly, <00:29:34.965>you <00:29:35.165>can <00:29:35.365>create <00:29:35.565>contrasts, <00:29:35.765>uh,

618
00:29:38.045 --> 00:29:43.005
<00:29:38.045>by <00:29:38.220>subtracting <00:29:38.395>some, <00:29:38.570>uh, <00:29:38.745>3 <00:29:38.920>40, <00:29:39.095>50, <00:29:39.270>60, <00:29:39.445>uh,

619
00:29:43.035 --> 00:29:46.365
<00:29:43.035>from <00:29:43.190>it, <00:29:43.346>or, <00:29:43.501>well, <00:29:43.657>there <00:29:43.812>are <00:29:43.968>a <00:29:44.123>lot <00:29:44.279>of <00:29:44.435>goodies.

620
00:29:46.585 --> 00:29:49.405
<00:29:46.585>And <00:29:46.785>also, <00:29:46.985>uh, <00:29:47.185>it <00:29:47.385>is <00:29:47.585>possible <00:29:47.785>to, <00:29:47.985>uh,

621
00:29:50.065 --> 00:29:52.325
<00:29:50.065>create <00:29:50.240>your <00:29:50.415>own <00:29:50.590>color <00:29:50.765>palettes <00:29:50.940>based <00:29:51.115>on <00:29:51.290>this <00:29:51.465>thing.

622
00:29:52.325 --> 00:29:53.965
<00:29:52.325>Once <00:29:52.500>you <00:29:52.675>have <00:29:52.850>your <00:29:53.025>brand <00:29:53.200>color, <00:29:53.375>as <00:29:53.550>I <00:29:53.725>said,

623
00:29:53.965 --> 00:29:57.925
<00:29:53.965>you <00:29:54.165>can <00:29:54.365>just <00:29:54.564>introduce <00:29:54.764>your <00:29:54.965>own, <00:29:55.165>um, <00:29:55.365>own,

624
00:29:58.305 --> 00:30:01.005
<00:29:58.305>own <00:29:58.460>color <00:29:58.616>palette <00:29:58.771>by <00:29:58.927>playing <00:29:59.082>with <00:29:59.238>this <00:29:59.393>kind <00:29:59.549>of <00:29:59.705>thing.

625
00:30:02.655 --> 00:30:05.005
<00:30:02.655>Let's <00:30:02.830>move <00:30:03.004>on <00:30:03.180>to <00:30:03.355>the, <00:30:03.530>uh, <00:30:03.705>new <00:30:03.879>measurement <00:30:04.055>units.

626
00:30:05.035 --> 00:30:08.205
<00:30:05.035>This <00:30:05.151>was <00:30:05.268>all, <00:30:05.385>all <00:30:05.501>about <00:30:05.618>color, <00:30:05.735>so <00:30:05.851>I, <00:30:05.968>I, <00:30:06.085>I <00:30:06.201>highly <00:30:06.318>suggest <00:30:06.435>you

627
00:30:08.205 --> 00:30:09.885
<00:30:08.205>to <00:30:08.405>check <00:30:08.605>out <00:30:08.804>what's, <00:30:09.004>what's <00:30:09.205>new <00:30:09.405>in <00:30:09.605>color.

628
00:30:10.545 --> 00:30:13.125
<00:30:10.545>Uh, <00:30:10.720>well, <00:30:10.895>the <00:30:11.070>pixel <00:30:11.245>is <00:30:11.420>somewhat <00:30:11.595>very <00:30:11.770>well <00:30:11.945>known,

629
00:30:13.125 --> 00:30:15.765
<00:30:13.125>but <00:30:13.280>there <00:30:13.436>was <00:30:13.591>one <00:30:13.747>consuming <00:30:13.902>as <00:30:14.058>as <00:30:14.213>confusing <00:30:14.369>aspect <00:30:14.525>of

630
00:30:16.305 --> 00:30:17.725
<00:30:16.305>pixels, <00:30:16.560>which <00:30:16.816>we'll <00:30:17.071>think <00:30:17.327>about <00:30:17.582>it.

631
00:30:18.465 --> 00:30:21.685
<00:30:18.465>So <00:30:18.605>once <00:30:18.745>we <00:30:18.885>talk <00:30:19.024>about <00:30:19.165>the <00:30:19.304>pixel <00:30:19.445>in <00:30:19.584>CSS, <00:30:19.725>it's <00:30:19.865>never,

632
00:30:21.685 --> 00:30:24.045
<00:30:21.685>the <00:30:21.860>pixel <00:30:22.034>that's <00:30:22.210>on <00:30:22.385>the <00:30:22.560>screen <00:30:22.735>is <00:30:22.909>device <00:30:23.085>pixel,

633
00:30:24.185 --> 00:30:25.845
<00:30:24.185>but <00:30:24.385>it's <00:30:24.585>called <00:30:24.784>something <00:30:24.985>called <00:30:25.185>the <00:30:25.385>reference <00:30:25.585>pixel.

634
00:30:27.245 --> 00:30:31.105
<00:30:27.245>And <00:30:27.400>that <00:30:27.556>is <00:30:27.711>by <00:30:27.867>default, <00:30:28.022>well, <00:30:28.178>depending <00:30:28.333>on <00:30:28.489>the, <00:30:28.645>the,

635
00:30:31.165 --> 00:30:34.145
<00:30:31.165>the <00:30:31.365>monitor, <00:30:31.565>let's <00:30:31.764>say <00:30:31.965>if <00:30:32.165>it's <00:30:32.365>96 <00:30:32.565>DPI,

636
00:30:34.145 --> 00:30:38.705
<00:30:34.145>which <00:30:34.272>is <00:30:34.399>somewhat <00:30:34.526>a <00:30:34.654>bit <00:30:34.781>lower <00:30:34.908>these <00:30:35.035>days, <00:30:35.163>uh, <00:30:35.290>a <00:30:35.417>Pixar <00:30:35.545>refers

637
00:30:38.705 --> 00:30:41.745
<00:30:38.705>to <00:30:38.905>a <00:30:39.105>one <00:30:39.304>over <00:30:39.504>96 <00:30:39.705>of <00:30:39.905>an <00:30:40.105>inch.

638
00:30:42.405 --> 00:30:45.185
<00:30:42.405>So <00:30:42.545>it's <00:30:42.685>actually <00:30:42.825>when <00:30:42.965>we're <00:30:43.105>with <00:30:43.245>Pixar, <00:30:43.385>we, <00:30:43.524>in <00:30:43.665>CSS <00:30:43.805>world,

639
00:30:45.245 --> 00:30:47.745
<00:30:45.245>we <00:30:45.419>never <00:30:45.594>talk <00:30:45.770>about <00:30:45.945>an <00:30:46.120>actual <00:30:46.294>device <00:30:46.469>pixel <00:30:46.645>anymore.

640
00:30:48.285 --> 00:30:52.755
<00:30:48.285>Uh, <00:30:48.440>those <00:30:48.596>days <00:30:48.751>are <00:30:48.907>gone <00:30:49.062>perhaps, <00:30:49.218>uh, <00:30:49.373>10 <00:30:49.529>years <00:30:49.685>ago.

641
00:30:54.095 --> 00:30:55.875
<00:30:54.095>Um, <00:30:54.375>there's <00:30:54.655>a <00:30:54.935>concept <00:30:55.215>of <00:30:55.495>m

642
00:30:55.875 --> 00:31:00.635
<00:30:55.875>or <00:30:56.030>versus <00:30:56.186>REMI <00:30:56.341>highly <00:30:56.497>recommend <00:30:56.652>you <00:30:56.808>to <00:30:56.963>stick <00:30:57.119>to <00:30:57.275>REM

643
00:31:00.635 --> 00:31:02.555
<00:31:00.635>as <00:31:00.835>much <00:31:01.035>as <00:31:01.235>you <00:31:01.435>can <00:31:01.635>instead <00:31:01.835>of <00:31:02.035>pixels,

644
00:31:02.825 --> 00:31:05.675
<00:31:02.825>because, <00:31:03.000>um, <00:31:03.175>if <00:31:03.350>you <00:31:03.525>stick <00:31:03.700>to <00:31:03.875>REM, <00:31:04.050>by <00:31:04.225>default,

645
00:31:05.675 --> 00:31:08.515
<00:31:05.675>there's <00:31:05.815>an <00:31:05.955>equation <00:31:06.095>of <00:31:06.235>one <00:31:06.375>REM <00:31:06.514>is <00:31:06.655>equal <00:31:06.794>to <00:31:06.935>16 <00:31:07.075>pixel.

646
00:31:08.775 --> 00:31:11.515
<00:31:08.775>But, <00:31:09.055>uh, <00:31:09.335>for <00:31:09.615>accessibility <00:31:09.895>proposals, <00:31:10.175>uh,

647
00:31:11.785 --> 00:31:12.915
<00:31:11.785>there's <00:31:12.124>a <00:31:12.463>browser <00:31:12.802>setting.

648
00:31:12.935 --> 00:31:14.715
<00:31:12.935>The <00:31:13.215>users <00:31:13.495>can <00:31:13.774>modify <00:31:14.054>this <00:31:14.335>equality,

649
00:31:15.725 --> 00:31:19.185
<00:31:15.725>and <00:31:15.880>that <00:31:16.036>way, <00:31:16.191>actually <00:31:16.347>by, <00:31:16.502>by <00:31:16.658>using <00:31:16.813>WMS <00:31:16.969>everywhere <00:31:17.125>instead

650
00:31:19.185 --> 00:31:22.225
<00:31:19.185>of <00:31:19.325>pixels <00:31:19.465>only <00:31:19.605>have <00:31:19.745>a <00:31:19.885>good <00:31:20.024>reason, <00:31:20.165>you <00:31:20.304>can <00:31:20.445>just, <00:31:20.585>um,

651
00:31:22.535 --> 00:31:24.705
<00:31:22.535>make <00:31:22.885>more <00:31:23.235>applications <00:31:23.585>more <00:31:23.935>accessible

652
00:31:24.845 --> 00:31:25.945
<00:31:24.845>for <00:31:25.092>people <00:31:25.340>who <00:31:25.587>need <00:31:25.835>it.

653
00:31:26.885 --> 00:31:30.865
<00:31:26.885>Um, <00:31:27.060>there <00:31:27.235>are <00:31:27.410>other <00:31:27.585>minor, <00:31:27.760>um, <00:31:27.935>units <00:31:28.110>like <00:31:28.285>percentages,

654
00:31:30.875 --> 00:31:33.625
<00:31:30.875>which <00:31:31.075>is <00:31:31.275>the <00:31:31.475>about <00:31:31.675>percent <00:31:31.875>of <00:31:32.075>parent <00:31:32.275>size.

655
00:31:34.255 --> 00:31:37.945
<00:31:34.255>There's <00:31:34.371>a <00:31:34.488>unit <00:31:34.605>called <00:31:34.721>X, <00:31:34.838>which <00:31:34.955>is <00:31:35.071>the <00:31:35.188>height <00:31:35.305>of <00:31:35.421>letter <00:31:35.538>of <00:31:35.655>X

656
00:31:38.045 --> 00:31:39.185
<00:31:38.045>as <00:31:38.301>in <00:31:38.558>the <00:31:38.814>current <00:31:39.071>form.

657
00:31:39.185 --> 00:31:41.425
<00:31:39.185>And <00:31:39.340>there's <00:31:39.496>the, <00:31:39.651>there's <00:31:39.807>the <00:31:39.962>ch <00:31:40.118>which <00:31:40.273>is <00:31:40.429>the <00:31:40.585>width

658
00:31:41.425 --> 00:31:42.705
<00:31:41.425>of <00:31:41.809>the <00:31:42.193>zero <00:31:42.577>letter.

659
00:31:42.845 --> 00:31:44.545
<00:31:42.845>So <00:31:43.195>depending <00:31:43.545>on <00:31:43.895>your <00:31:44.245>needs,

660
00:31:44.545 --> 00:31:47.465
<00:31:44.545>you <00:31:44.700>can <00:31:44.856>also <00:31:45.011>use <00:31:45.167>this <00:31:45.322>less <00:31:45.478>known <00:31:45.633>units <00:31:45.789>as <00:31:45.945>well.

661
00:31:48.145 --> 00:31:49.865
<00:31:48.145>Actually, <00:31:48.320>there <00:31:48.495>are <00:31:48.670>something <00:31:48.845>like <00:31:49.020>a <00:31:49.195>50 <00:31:49.370>units, <00:31:49.545>um,

662
00:31:50.285 --> 00:31:53.985
<00:31:50.285>but <00:31:50.425>I'm <00:31:50.565>not <00:31:50.705>covering, <00:31:50.845>I'm <00:31:50.985>just <00:31:51.125>touching <00:31:51.265>some <00:31:51.405>of <00:31:51.545>them, <00:31:51.685>uh,

663
00:31:54.315 --> 00:31:57.425
<00:31:54.315>again, <00:31:54.490>and <00:31:54.665>I, <00:31:54.840>some <00:31:55.015>of <00:31:55.190>the <00:31:55.365>very <00:31:55.540>old <00:31:55.715>units,

664
00:31:57.525 --> 00:32:00.105
<00:31:57.525>but <00:31:57.700>V <00:31:57.875>port <00:31:58.050>units, <00:31:58.225>which <00:31:58.400>is <00:31:58.575>like <00:31:58.750>a, <00:31:58.925>um,

665
00:32:00.645 --> 00:32:03.385
<00:32:00.645>if <00:32:00.761>you <00:32:00.878>say <00:32:00.995>a <00:32:01.111>hundred <00:32:01.228>vw, <00:32:01.345>it <00:32:01.461>means <00:32:01.578>that, <00:32:01.695>uh, <00:32:01.811>I <00:32:01.928>would <00:32:02.045>likely

666
00:32:03.385 --> 00:32:06.385
<00:32:03.385>to <00:32:03.525>consume <00:32:03.665>a <00:32:03.805>hundred <00:32:03.945>percent <00:32:04.085>of <00:32:04.225>V <00:32:04.365>port, <00:32:04.504>which <00:32:04.645>is <00:32:04.785>the,

667
00:32:06.525 --> 00:32:07.785
<00:32:06.525>either <00:32:06.903>the <00:32:07.281>browser <00:32:07.659>screen,

668
00:32:07.785 --> 00:32:08.785
<00:32:07.785>or <00:32:07.965>if <00:32:08.145>it's <00:32:08.325>a <00:32:08.505>mobile <00:32:08.685>phone,

669
00:32:08.785 --> 00:32:10.985
<00:32:08.785>that <00:32:08.960>means <00:32:09.135>the <00:32:09.310>a <00:32:09.485>hundred <00:32:09.660>percent <00:32:09.835>of <00:32:10.010>the <00:32:10.185>width.

670
00:32:11.245 --> 00:32:14.505
<00:32:11.245>And <00:32:11.385>similarly, <00:32:11.524>you <00:32:11.665>can <00:32:11.804>use <00:32:11.945>a <00:32:12.084>VH <00:32:12.225>for <00:32:12.364>the <00:32:12.504>vertical <00:32:12.645>height.

671
00:32:15.135 --> 00:32:18.385
<00:32:15.135>What <00:32:15.290>is <00:32:15.446>less <00:32:15.601>known <00:32:15.757>is <00:32:15.912>there <00:32:16.068>are <00:32:16.223>more <00:32:16.379>interesting <00:32:16.535>aspects

672
00:32:18.385 --> 00:32:19.545
<00:32:18.385>of <00:32:18.593>it, <00:32:18.802>like <00:32:19.011>the <00:32:19.220>V <00:32:19.429>mean

673
00:32:19.545 --> 00:32:22.865
<00:32:19.545>or <00:32:19.672>V <00:32:19.799>max, <00:32:19.926>where, <00:32:20.054>for <00:32:20.181>example, <00:32:20.308>we <00:32:20.435>can <00:32:20.563>say, <00:32:20.690>well, <00:32:20.817>I, <00:32:20.945>whatever,

674
00:32:22.865 --> 00:32:24.985
<00:32:22.865>whichever <00:32:23.065>direction <00:32:23.265>is, <00:32:23.465>is <00:32:23.665>the <00:32:23.865>mean <00:32:24.065>or <00:32:24.265>max.

675
00:32:25.565 --> 00:32:28.385
<00:32:25.565>Um, <00:32:25.720>depending <00:32:25.876>on <00:32:26.031>orientation, <00:32:26.187>I <00:32:26.342>would <00:32:26.498>like <00:32:26.653>to <00:32:26.809>use <00:32:26.965>that.

676
00:32:29.205 --> 00:32:31.785
<00:32:29.205>Uh, <00:32:29.360>which <00:32:29.516>is, <00:32:29.671>I <00:32:29.827>will <00:32:29.982>say, <00:32:30.138>probably <00:32:30.293>not <00:32:30.449>much <00:32:30.605>useful.

677
00:32:31.845 --> 00:32:35.965
<00:32:31.845>But <00:32:32.000>what's <00:32:32.156>more <00:32:32.311>useful <00:32:32.467>is <00:32:32.622>that, <00:32:32.778>again, <00:32:32.933>this <00:32:33.089>year, <00:32:33.245>uh,

678
00:32:35.965 --> 00:32:39.175
<00:32:35.965>another <00:32:36.139>CSS <00:32:36.314>feature <00:32:36.490>has <00:32:36.665>landed, <00:32:36.840>which <00:32:37.014>is <00:32:37.189>called, <00:32:37.365>um,

679
00:32:39.625 --> 00:32:42.215
<00:32:39.625>small <00:32:39.975>vh, <00:32:40.325>LVH <00:32:40.675>and <00:32:41.025>DVH.

680
00:32:42.795 --> 00:32:45.055
<00:32:42.795>If <00:32:42.950>you <00:32:43.106>use <00:32:43.261>a <00:32:43.417>mobile <00:32:43.572>phone, <00:32:43.728>you <00:32:43.883>notice <00:32:44.039>that <00:32:44.195>the,

681
00:32:45.075 --> 00:32:47.455
<00:32:45.075>the <00:32:45.355>browsers, <00:32:45.635>uh, <00:32:45.915>the <00:32:46.195>address <00:32:46.475>bar

682
00:32:47.455 --> 00:32:50.295
<00:32:47.455>and <00:32:47.595>the <00:32:47.735>the <00:32:47.875>bottom <00:32:48.014>bar <00:32:48.155>sometimes <00:32:48.294>comes <00:32:48.435>in <00:32:48.574>and <00:32:48.715>comes <00:32:48.855>out.

683
00:32:51.035 --> 00:32:53.295
<00:32:51.035>And <00:32:51.235>depending <00:32:51.435>on <00:32:51.635>that, <00:32:51.835>it's, <00:32:52.035>it's <00:32:52.235>somewhat <00:32:52.435>difficult

684
00:32:53.295 --> 00:32:57.015
<00:32:53.295>to <00:32:53.450>adjust <00:32:53.606>your <00:32:53.761>page <00:32:53.917>size, <00:32:54.072>uh, <00:32:54.228>because <00:32:54.383>it's <00:32:54.539>somewhat <00:32:54.695>dynamic.

685
00:32:57.755 --> 00:33:00.375
<00:32:57.755>So <00:32:57.910>by <00:32:58.066>using <00:32:58.221>SVH, <00:32:58.377>you <00:32:58.532>can <00:32:58.688>adjust <00:32:58.843>for <00:32:58.999>the <00:32:59.155>assume

686
00:33:00.375 --> 00:33:03.895
<00:33:00.375>for <00:33:00.550>the <00:33:00.725>smallest <00:33:00.900>case, <00:33:01.075>whereas <00:33:01.250>the <00:33:01.425>LVH <00:33:01.600>represents <00:33:01.775>the

687
00:33:03.895 --> 00:33:04.975
<00:33:03.895>maximum <00:33:04.380>possible <00:33:04.867>case.

688
00:33:05.315 --> 00:33:10.055
<00:33:05.315>And <00:33:05.490>DVH <00:33:05.665>automatically <00:33:05.840>adopts, <00:33:06.015>depending <00:33:06.190>on, <00:33:06.365>uh, <00:33:06.540>the <00:33:06.715>space,

689
00:33:10.755 --> 00:33:13.975
<00:33:10.755>uh, <00:33:10.910>available, <00:33:11.066>if, <00:33:11.221>if <00:33:11.377>those <00:33:11.532>things, <00:33:11.688>uh, <00:33:11.843>the <00:33:11.999>address <00:33:12.155>bar

690
00:33:13.975 --> 00:33:15.295
<00:33:13.975>and <00:33:14.173>the <00:33:14.370>bottom <00:33:14.569>bar <00:33:14.767>just <00:33:14.965>comes <00:33:15.163>up,

691
00:33:15.395 --> 00:33:18.215
<00:33:15.395>and <00:33:15.675>then <00:33:15.955>it <00:33:16.235>just <00:33:16.514>automatically <00:33:16.795>narrows

692
00:33:18.215 --> 00:33:21.575
<00:33:18.215>and <00:33:18.448>adjusts <00:33:18.681>your, <00:33:18.915>uh, <00:33:19.148>unit <00:33:19.381>as <00:33:19.615>well.

693
00:33:21.795 --> 00:33:23.695
<00:33:21.795>So <00:33:21.995>this <00:33:22.195>is <00:33:22.395>possible, <00:33:22.595>and <00:33:22.795>I, <00:33:22.995>I <00:33:23.195>particularly,

694
00:33:23.695 --> 00:33:25.655
<00:33:23.695>particularly <00:33:24.161>enjoy <00:33:24.628>using <00:33:25.095>DVH.

695
00:33:26.275 --> 00:33:27.655
<00:33:26.275>Now, <00:33:26.482>there <00:33:26.689>are <00:33:26.896>other <00:33:27.103>units <00:33:27.310>as <00:33:27.517>well

696
00:33:27.685 --> 00:33:31.335
<00:33:27.685>that <00:33:27.860>are <00:33:28.034>different <00:33:28.210>combinations, <00:33:28.385>BI, <00:33:28.560>B, <00:33:28.735>B, <00:33:28.909>uh, <00:33:29.085>SVH,

697
00:33:31.435 --> 00:33:32.855
<00:33:31.435>uh, <00:33:31.648>but <00:33:31.860>you <00:33:32.074>can <00:33:32.287>check <00:33:32.500>it <00:33:32.713>out.

698
00:33:33.235 --> 00:33:34.615
<00:33:33.235>Uh, <00:33:33.442>this <00:33:33.649>is <00:33:33.856>a <00:33:34.062>little <00:33:34.270>bit, <00:33:34.477>um,

699
00:33:35.025 --> 00:33:36.975
<00:33:35.025>there <00:33:35.225>are <00:33:35.425>too <00:33:35.625>many <00:33:35.825>variants <00:33:36.025>of <00:33:36.225>these <00:33:36.425>cases.

700
00:33:39.065 --> 00:33:42.325
<00:33:39.065>Uh, <00:33:39.265>let's <00:33:39.465>talk <00:33:39.665>about <00:33:39.865>the, <00:33:40.065>uh, <00:33:40.265>containers <00:33:40.465>container

701
00:33:42.325 --> 00:33:43.445
<00:33:42.325>and <00:33:42.661>the <00:33:42.997>style <00:33:43.332>queries.

702
00:33:44.145 --> 00:33:46.245
<00:33:44.145>Uh, <00:33:44.378>this <00:33:44.611>is <00:33:44.845>also <00:33:45.078>new, <00:33:45.311>uh, <00:33:45.545>somewhat,

703
00:33:46.285 --> 00:33:48.405
<00:33:46.285>I <00:33:46.485>think <00:33:46.685>landed <00:33:46.885>this <00:33:47.085>year, <00:33:47.285>uh, <00:33:47.485>into <00:33:47.685>Chrome.

704
00:33:48.905 --> 00:33:51.765
<00:33:48.905>Um, <00:33:49.060>so <00:33:49.216>we <00:33:49.371>know <00:33:49.527>that <00:33:49.682>there's <00:33:49.838>media <00:33:49.993>queries <00:33:50.149>depending <00:33:50.305>on,

705
00:33:51.765 --> 00:33:54.965
<00:33:51.765>you <00:33:51.920>can <00:33:52.076>adjust <00:33:52.231>screen <00:33:52.387>size <00:33:52.542>or <00:33:52.698>whatever <00:33:52.853>the <00:33:53.009>component <00:33:53.165>size.

706
00:33:55.075 --> 00:33:57.005
<00:33:55.075>Well, <00:33:55.308>if <00:33:55.541>it's, <00:33:55.775>they're <00:33:56.008>break <00:33:56.241>points, <00:33:56.475>right?

707
00:33:57.145 --> 00:34:00.285
<00:33:57.145>If <00:33:57.300>it's, <00:33:57.456>uh, <00:33:57.611>too <00:33:57.767>large, <00:33:57.922>uh, <00:33:58.078>apply <00:33:58.233>this <00:33:58.389>style <00:33:58.545>sheet

708
00:34:00.505 --> 00:34:04.045
<00:34:00.505>and <00:34:00.660>other <00:34:00.816>things, <00:34:00.971>now <00:34:01.127>we <00:34:01.282>can <00:34:01.438>apply <00:34:01.593>these <00:34:01.749>things, <00:34:01.905>uh,

709
00:34:04.175 --> 00:34:07.005
<00:34:04.175>based <00:34:04.375>on <00:34:04.575>the <00:34:04.774>container <00:34:04.975>itself, <00:34:05.175>not <00:34:05.375>the <00:34:05.575>Dr.

710
00:34:07.205 --> 00:34:11.745
<00:34:07.205>V <00:34:07.345>port. <00:34:07.485>Uh, <00:34:07.625>and <00:34:07.764>let's <00:34:07.905>see, <00:34:08.045>I <00:34:08.185>a <00:34:08.324>demo <00:34:08.465>for <00:34:08.605>that.

711
00:34:11.835 --> 00:34:14.305
<00:34:11.835>Again, <00:34:12.034>what, <00:34:12.235>what <00:34:12.435>do <00:34:12.635>I <00:34:12.835>mean <00:34:13.034>by <00:34:13.235>that?

712
00:34:18.465 --> 00:34:21.925
<00:34:18.465>So <00:34:18.605>you <00:34:18.745>can <00:34:18.885>see <00:34:19.025>there's, <00:34:19.165>there's <00:34:19.305>a, <00:34:19.445>there's <00:34:19.585>a <00:34:19.725>container <00:34:19.865>here,

713
00:34:22.105 --> 00:34:24.245
<00:34:22.105>and <00:34:22.338>depending <00:34:22.571>on <00:34:22.804>how <00:34:23.038>you <00:34:23.271>narrow <00:34:23.505>down,

714
00:34:24.345 --> 00:34:25.605
<00:34:24.344>it <00:34:24.628>can <00:34:24.911>change <00:34:25.195>its <00:34:25.478>orientation.

715
00:34:25.835 --> 00:34:27.125
<00:34:25.835>What <00:34:26.125>is <00:34:26.415>the <00:34:26.705>outer <00:34:26.996>frame?

716
00:34:27.145 --> 00:34:31.885
<00:34:27.145>The, <00:34:27.300>the, <00:34:27.456>the, <00:34:27.611>the <00:34:27.767>VVV <00:34:27.922>ports, <00:34:28.078>uh, <00:34:28.233>dimensions <00:34:28.389>don't <00:34:28.545>change.

717
00:34:32.105 --> 00:34:34.805
<00:34:32.105>You <00:34:32.304>still, <00:34:32.505>the, <00:34:32.705>it <00:34:32.905>still <00:34:33.105>stays <00:34:33.304>the <00:34:33.505>same,

718
00:34:35.305 --> 00:34:37.685
<00:34:35.304>but <00:34:35.585>the <00:34:35.864>container <00:34:36.145>itself, <00:34:36.424>uh, <00:34:36.705>changes.

719
00:34:37.785 --> 00:34:39.165
<00:34:37.784>And <00:34:38.033>depending <00:34:38.281>on <00:34:38.530>that, <00:34:38.778>it <00:34:39.027>can,

720
00:34:39.185 --> 00:34:41.405
<00:34:39.185>it <00:34:39.534>can <00:34:39.884>react, <00:34:40.235>uh, <00:34:40.585>differently.

721
00:34:41.435 --> 00:34:43.485
<00:34:41.435>This <00:34:41.634>is <00:34:41.835>also <00:34:42.034>supported <00:34:42.235>by <00:34:42.435>all <00:34:42.634>browsers <00:34:42.835>now.

722
00:34:44.025 --> 00:34:48.735
<00:34:44.025>So <00:34:44.180>this <00:34:44.336>is <00:34:44.491>something <00:34:44.647>you <00:34:44.802>can <00:34:44.958>use <00:34:45.113>today, <00:34:45.269>whereas, <00:34:45.425>uh,

723
00:34:49.065 --> 00:34:51.295
<00:34:49.065>style <00:34:49.298>query <00:34:49.531>is, <00:34:49.764>is <00:34:49.998>something <00:34:50.231>slightly <00:34:50.465>different.

724
00:34:51.875 --> 00:34:55.055
<00:34:51.875>And <00:34:51.991>this <00:34:52.108>is <00:34:52.225>only <00:34:52.341>supported <00:34:52.458>by <00:34:52.574>a <00:34:52.691>chrome, <00:34:52.808>uh, <00:34:52.925>to <00:34:53.041>this <00:34:53.158>day, <00:34:53.275>uh,

725
00:34:55.055 --> 00:34:56.175
<00:34:55.054>not <00:34:55.391>supported <00:34:55.726>by <00:34:56.063>safari.

726
00:34:56.915 --> 00:34:59.855
<00:34:56.915>Uh, <00:34:57.148>so <00:34:57.381>depending <00:34:57.615>on <00:34:57.848>some <00:34:58.081>context, <00:34:58.315>if,

727
00:34:59.915 --> 00:35:04.815
<00:34:59.915>if <00:35:00.055>the <00:35:00.195>parent <00:35:00.335>container <00:35:00.475>has <00:35:00.615>some <00:35:00.755>context, <00:35:00.895>um, <00:35:01.035>you <00:35:01.175>can, <00:35:01.315>uh,

728
00:35:05.195 --> 00:35:08.335
<00:35:05.195>it <00:35:05.395>can, <00:35:05.595>uh, <00:35:05.795>apply <00:35:05.995>some <00:35:06.195>of <00:35:06.395>the <00:35:06.595>styles.

729
00:35:09.155 --> 00:35:11.495
<00:35:09.155>So <00:35:09.330>let's <00:35:09.505>see <00:35:09.680>a <00:35:09.855>brief <00:35:10.030>demo <00:35:10.205>for <00:35:10.380>that. <00:35:10.555>So

730
00:35:21.855 --> 00:35:26.445
<00:35:21.855>the <00:35:22.030>demo <00:35:22.205>says <00:35:22.380>that, <00:35:22.555>well, <00:35:22.730>um, <00:35:22.905>for <00:35:23.080>example, <00:35:23.255>here,

731
00:35:26.655 --> 00:35:29.045
<00:35:26.655>where <00:35:26.935>is, <00:35:27.215>there's <00:35:27.495>a <00:35:27.775>debug <00:35:28.055>parameter,

732
00:35:29.195 --> 00:35:33.205
<00:35:29.195>depending <00:35:29.395>on <00:35:29.595>the <00:35:29.795>debug <00:35:29.995>parameter <00:35:30.195>defined, <00:35:30.395>uh, <00:35:30.595>um,

733
00:35:34.105 --> 00:35:37.125
<00:35:34.105>we <00:35:34.232>can <00:35:34.359>just, <00:35:34.486>uh, <00:35:34.614>if <00:35:34.741>this, <00:35:34.868>if <00:35:34.995>you <00:35:35.123>met <00:35:35.250>this <00:35:35.377>poll, <00:35:35.505>false,

734
00:35:37.125 --> 00:35:39.005
<00:35:37.125>for <00:35:37.300>example, <00:35:37.475>which <00:35:37.650>is <00:35:37.825>a <00:35:38.000>little <00:35:38.175>bit <00:35:38.350>countering <00:35:38.525>issue

735
00:35:39.005 --> 00:35:41.965
<00:35:39.005>for <00:35:39.205>this <00:35:39.405>example, <00:35:39.605>it'll <00:35:39.805>make <00:35:40.005>these <00:35:40.205>borders <00:35:40.405>available

736
00:35:41.965 --> 00:35:43.805
<00:35:41.965>because <00:35:42.245>this <00:35:42.525>container <00:35:42.805>says <00:35:43.085>that, <00:35:43.365>well,

737
00:35:44.325 --> 00:35:47.725
<00:35:44.325>whenever <00:35:44.500>this <00:35:44.674>false, <00:35:44.850>I <00:35:45.024>would <00:35:45.200>like <00:35:45.375>to <00:35:45.549>outline, <00:35:45.725>uh,

738
00:35:47.725 --> 00:35:48.805
<00:35:47.725>put <00:35:47.968>an <00:35:48.211>outline <00:35:48.453>to <00:35:48.696>everything.

739
00:35:49.395 --> 00:35:52.175
<00:35:49.395>And <00:35:49.535>so <00:35:49.675>you <00:35:49.815>can <00:35:49.955>define <00:35:50.095>some <00:35:50.235>sort <00:35:50.375>of <00:35:50.515>interesting <00:35:50.655>contexts, <00:35:50.795>uh,

740
00:35:52.605 --> 00:35:54.535
<00:35:52.605>depending <00:35:52.955>on <00:35:53.305>your <00:35:53.655>use <00:35:54.005>cases.

741
00:35:54.685 --> 00:35:56.215
<00:35:54.685>It's <00:35:54.914>a <00:35:55.144>little <00:35:55.373>bit <00:35:55.603>confusing, <00:35:55.832>I <00:35:56.062>know.

742
00:35:57.275 --> 00:36:01.575
<00:35:57.275>Um, <00:35:57.508>let's <00:35:57.741>talk <00:35:57.975>about <00:35:58.208>css. <00:35:58.441>SS <00:35:58.675>Houdini.

743
00:36:01.675 --> 00:36:03.695
<00:36:01.675>css <00:36:01.908>s <00:36:02.141>Houdini <00:36:02.375>is <00:36:02.608>an <00:36:02.841>experimental, <00:36:03.075>API,

744
00:36:03.725 --> 00:36:05.575
<00:36:03.725>it's <00:36:04.075>not <00:36:04.424>supported <00:36:04.775>by <00:36:05.125>Safari.

745
00:36:06.035 --> 00:36:08.155
<00:36:06.035>Uh, <00:36:06.501>um, <00:36:06.968>in <00:36:07.435>particular,

746
00:36:08.155 --> 00:36:09.755
<00:36:08.155>it <00:36:08.388>has <00:36:08.621>interesting <00:36:08.855>things <00:36:09.088>like <00:36:09.321>paint <00:36:09.555>API,

747
00:36:09.755 --> 00:36:11.115
<00:36:09.755>which <00:36:09.999>we'll, <00:36:10.244>uh, <00:36:10.489>look <00:36:10.734>at <00:36:10.979>it.

748
00:36:11.775 --> 00:36:14.355
<00:36:11.775>The, <00:36:12.055>the <00:36:12.335>properties, <00:36:12.615>the <00:36:12.895>custom <00:36:13.175>properties

749
00:36:14.355 --> 00:36:17.075
<00:36:14.355>and <00:36:14.705>typed, <00:36:15.055>uh, <00:36:15.405>type, <00:36:15.755>um,

750
00:36:17.165 --> 00:36:19.275
<00:36:17.165>properties <00:36:17.398>are <00:36:17.631>supported <00:36:17.865>by <00:36:18.098>pho <00:36:18.331>as <00:36:18.565>well.

751
00:36:19.695 --> 00:36:24.115
<00:36:19.695>Uh, <00:36:19.822>in, <00:36:19.949>in, <00:36:20.076>in, <00:36:20.204>in <00:36:20.331>firo, <00:36:20.458>I <00:36:20.585>think <00:36:20.713>it's <00:36:20.840>it's <00:36:20.967>pole <00:36:21.095>field.

752
00:36:26.155 --> 00:36:27.785
<00:36:26.155>Let's <00:36:26.355>see <00:36:26.555>a <00:36:26.755>demo <00:36:26.955>for <00:36:27.155>that <00:36:27.355>as <00:36:27.555>well.

753
00:36:29.515 --> 00:36:31.975
<00:36:29.515>By <00:36:29.690>using <00:36:29.865>Houdini, <00:36:30.040>you <00:36:30.214>can <00:36:30.390>do <00:36:30.565>pretty <00:36:30.740>interesting <00:36:30.915>things,

754
00:36:32.425 --> 00:36:35.065
<00:36:32.425>which <00:36:32.775>is <00:36:33.125>not <00:36:33.475>possible <00:36:33.825>normally.

755
00:36:36.565 --> 00:36:40.985
<00:36:36.565>So <00:36:36.705>this <00:36:36.845>example <00:36:36.985>shows <00:36:37.125>that <00:36:37.265>you <00:36:37.405>can <00:36:37.545>just <00:36:37.685>generate, <00:36:37.825>uh, <00:36:37.965>uh,

756
00:36:41.865 --> 00:36:45.265
<00:36:41.865>a, <00:36:42.020>a <00:36:42.176>gradient <00:36:42.331>with <00:36:42.487>the <00:36:42.642>corners <00:36:42.798>and <00:36:42.953>how <00:36:43.109>you <00:36:43.265>code.

757
00:36:45.265 --> 00:36:46.305
<00:36:45.265>This <00:36:45.577>is <00:36:45.888>actually <00:36:46.201>you.

758
00:36:46.375 --> 00:36:48.185
<00:36:46.375>Well, <00:36:46.575>this, <00:36:46.775>this <00:36:46.975>example <00:36:47.175>is <00:36:47.375>a <00:36:47.575>bit <00:36:47.775>complicated.

759
00:36:48.605 --> 00:36:51.425
<00:36:48.605>Um, <00:36:48.760>you <00:36:48.916>basically <00:36:49.071>pro <00:36:49.227>tell <00:36:49.382>the <00:36:49.538>CSS <00:36:49.693>what's <00:36:49.849>kind <00:36:50.005>of

760
00:36:52.265 --> 00:36:53.345
<00:36:52.265>a <00:36:52.459>painting <00:36:52.653>you <00:36:52.848>want <00:36:53.042>to <00:36:53.236>do.

761
00:36:53.525 --> 00:36:55.505
<00:36:53.525>You <00:36:53.700>basically <00:36:53.875>write <00:36:54.050>some <00:36:54.225>sort <00:36:54.400>of <00:36:54.575>Java <00:36:54.750>script <00:36:54.925>here

762
00:36:56.125 --> 00:36:58.265
<00:36:56.125>by <00:36:56.405>using <00:36:56.685>the, <00:36:56.965>uh, <00:36:57.245>commas, <00:36:57.525>API.

763
00:36:58.685 --> 00:37:01.305
<00:36:58.685>And <00:36:58.918>it <00:36:59.151>actually, <00:36:59.384>uh, <00:36:59.618>generates <00:36:59.851>the, <00:37:00.085>uh,

764
00:37:01.565 --> 00:37:04.095
<00:37:01.565>the, <00:37:01.915>the <00:37:02.265>background <00:37:02.615>for <00:37:02.965>you.

765
00:37:04.155 --> 00:37:05.735
<00:37:04.155>So <00:37:04.435>you <00:37:04.715>can <00:37:04.995>generate <00:37:05.275>interesting <00:37:05.555>backgrounds,

766
00:37:05.735 --> 00:37:07.455
<00:37:05.735>like <00:37:06.201>slanted <00:37:06.668>background, <00:37:07.135>uh,

767
00:37:08.045 --> 00:37:09.535
<00:37:08.045>it's <00:37:08.380>called <00:37:08.715>somewhat <00:37:09.050>very <00:37:09.386>simple.

768
00:37:09.635 --> 00:37:11.735
<00:37:09.635>You <00:37:09.868>can <00:37:10.101>just <00:37:10.335>generate <00:37:10.568>a <00:37:10.801>geometry, <00:37:11.035>uh,

769
00:37:11.875 --> 00:37:13.895
<00:37:11.875>and <00:37:12.108>then, <00:37:12.341>well, <00:37:12.575>there's <00:37:12.808>no <00:37:13.041>image <00:37:13.275>here.

770
00:37:13.915 --> 00:37:16.575
<00:37:13.915>It <00:37:14.115>just, <00:37:14.315>it <00:37:14.515>just <00:37:14.715>allowed <00:37:14.915>to <00:37:15.115>generate <00:37:15.315>backgrounds.

771
00:37:17.355 --> 00:37:20.975
<00:37:17.355>Uh, <00:37:17.510>you <00:37:17.666>can <00:37:17.821>see <00:37:17.977>there <00:37:18.132>are <00:37:18.288>some <00:37:18.443>interesting <00:37:18.599>demos <00:37:18.755>here.

772
00:37:21.755 --> 00:37:25.355
<00:37:21.755>Uh, <00:37:21.955>perhaps <00:37:22.155>you <00:37:22.355>can <00:37:22.555>generate <00:37:22.755>a <00:37:22.955>tooltip, <00:37:23.155>um,

773
00:37:30.015 --> 00:37:33.065
<00:37:30.015>rough <00:37:30.214>box <00:37:30.415>this <00:37:30.615>year, <00:37:30.815>and <00:37:31.015>you <00:37:31.214>can <00:37:31.415>programmatically

774
00:37:34.115 --> 00:37:35.415
<00:37:34.115>adjust <00:37:34.504>them <00:37:34.895>as <00:37:35.285>well.

775
00:37:36.985 --> 00:37:40.565
<00:37:36.985>For <00:37:37.160>example, <00:37:37.335>you <00:37:37.510>can <00:37:37.685>generate <00:37:37.860>a <00:37:38.035>non <00:37:38.210>rectangular <00:37:38.385>borders.

776
00:37:41.665 --> 00:37:43.885
<00:37:41.665>So <00:37:41.820>this <00:37:41.976>is <00:37:42.131>available <00:37:42.287>if <00:37:42.442>you <00:37:42.598>use <00:37:42.753>the <00:37:42.909>paint <00:37:43.065>API

777
00:37:43.905 --> 00:37:46.045
<00:37:43.905>and <00:37:44.080>that, <00:37:44.255>uh, <00:37:44.430>the <00:37:44.605>Chrome, <00:37:44.780>and <00:37:44.955>it <00:37:45.130>supports <00:37:45.305>this.

778
00:37:46.045 --> 00:37:47.565
<00:37:46.045>And <00:37:46.273>then <00:37:46.501>the, <00:37:46.729>I <00:37:46.957>think <00:37:47.185>for <00:37:47.413>Safari

779
00:37:47.625 --> 00:37:50.925
<00:37:47.625>and, <00:37:47.780>um, <00:37:47.936>Firefox, <00:37:48.091>it <00:37:48.247>can <00:37:48.402>be <00:37:48.558>pull <00:37:48.713>field <00:37:48.869>as <00:37:49.025>well.

780
00:37:51.315 --> 00:37:55.805
<00:37:51.315>It's <00:37:51.490>pretty <00:37:51.665>interesting. <00:37:51.840>Um, <00:37:52.015>finally <00:37:52.190>we'll <00:37:52.365>talk <00:37:52.540>about <00:37:52.715>the,

781
00:37:56.185 --> 00:37:57.445
<00:37:56.185>uh, <00:37:56.563>C <00:37:56.941>SS <00:37:57.319>animation.

782
00:37:57.605 --> 00:38:02.205
<00:37:57.605>API, <00:37:57.780>uh, <00:37:57.955>well, <00:37:58.130>CSS <00:37:58.305>animation <00:37:58.480>is <00:37:58.655>very, <00:37:58.830>very <00:37:59.005>old.

783
00:38:02.585 --> 00:38:05.645
<00:38:02.585>Um, <00:38:02.740>there <00:38:02.896>is, <00:38:03.051>there's <00:38:03.207>nothing <00:38:03.362>new <00:38:03.518>in <00:38:03.673>them, <00:38:03.829>uh, <00:38:03.985>primarily,

784
00:38:06.185 --> 00:38:09.285
<00:38:06.185>but <00:38:06.360>this <00:38:06.535>demo <00:38:06.710>just <00:38:06.884>covers <00:38:07.060>a <00:38:07.235>very <00:38:07.410>basic <00:38:07.585>example,

785
00:38:09.295 --> 00:38:12.085
<00:38:09.295>which <00:38:09.470>is <00:38:09.645>something <00:38:09.820>you <00:38:09.995>are <00:38:10.170>familiar <00:38:10.345>with <00:38:10.520>that, <00:38:10.695>um,

786
00:38:12.795 --> 00:38:13.845
<00:38:12.795>just <00:38:13.110>a <00:38:13.424>material <00:38:13.740>example.

787
00:38:14.425 --> 00:38:17.765
<00:38:14.425>You <00:38:14.552>can, <00:38:14.679>you <00:38:14.806>can <00:38:14.934>do <00:38:15.061>these <00:38:15.188>things <00:38:15.315>for <00:38:15.443>like <00:38:15.570>10 <00:38:15.697>years, <00:38:15.825>uh,

788
00:38:17.905 --> 00:38:19.605
<00:38:17.905>but <00:38:18.105>you <00:38:18.305>can <00:38:18.505>look, <00:38:18.705>look <00:38:18.905>at <00:38:19.105>the <00:38:19.305>documentation.

789
00:38:20.665 --> 00:38:23.525
<00:38:20.665>Uh, <00:38:20.820>what <00:38:20.976>is <00:38:21.131>interesting <00:38:21.287>about <00:38:21.442>CSS <00:38:21.598>animation <00:38:21.753>is <00:38:21.909>that, <00:38:22.065>well,

790
00:38:24.125 --> 00:38:25.605
<00:38:24.125>starting <00:38:24.458>with <00:38:24.791>Chrome <00:38:25.124>84, <00:38:25.457>uh,

791
00:38:25.675 --> 00:38:27.885
<00:38:25.675>they <00:38:25.908>become <00:38:26.141>a <00:38:26.375>little <00:38:26.608>bit <00:38:26.841>more <00:38:27.075>sophisticated.

792
00:38:28.505 --> 00:38:31.765
<00:38:28.505>In <00:38:28.705>particular, <00:38:28.905>uh, <00:38:29.105>with <00:38:29.305>JavaScript, <00:38:29.505>you <00:38:29.705>can, <00:38:29.905>uh,

793
00:38:31.885 --> 00:38:35.485
<00:38:31.885>a <00:38:32.025>little <00:38:32.165>bit <00:38:32.305>program <00:38:32.445>them, <00:38:32.585>uh, <00:38:32.725>in <00:38:32.865>a <00:38:33.005>more <00:38:33.145>complex <00:38:33.285>way.

794
00:38:36.145 --> 00:38:38.765
<00:38:36.145>Uh, <00:38:36.285>this <00:38:36.425>time <00:38:36.565>was <00:38:36.705>a <00:38:36.845>little <00:38:36.985>buggy <00:38:37.125>in, <00:38:37.265>in <00:38:37.405>Chrome, <00:38:37.545>uh,

795
00:38:39.585 --> 00:38:43.845
<00:38:39.585>but <00:38:39.760>basically, <00:38:39.935>uh, <00:38:40.110>you <00:38:40.285>can <00:38:40.460>just <00:38:40.635>combine <00:38:40.810>multiple <00:38:40.985>animations

796
00:38:43.845 --> 00:38:47.605
<00:38:43.845>with <00:38:44.000>JavaScript <00:38:44.156>and <00:38:44.311>just, <00:38:44.467>uh, <00:38:44.622>behave, <00:38:44.778>make <00:38:44.933>it, <00:38:45.089>behave, <00:38:45.245>uh,

797
00:38:47.705 --> 00:38:49.925
<00:38:47.705>or <00:38:47.904>react <00:38:48.105>based <00:38:48.305>on <00:38:48.505>whenever <00:38:48.705>an <00:38:48.904>animation <00:38:49.105>stops.

798
00:38:50.205 --> 00:38:52.405
<00:38:50.205>I <00:38:50.332>would <00:38:50.459>like <00:38:50.586>to <00:38:50.714>execute <00:38:50.841>some <00:38:50.968>sort <00:38:51.095>of <00:38:51.223>other <00:38:51.350>portion <00:38:51.477>of <00:38:51.605>code,

799
00:38:52.785 --> 00:38:55.205
<00:38:52.785>uh, <00:38:52.940>in <00:38:53.096>particular, <00:38:53.251>you <00:38:53.407>can <00:38:53.562>do <00:38:53.718>these <00:38:53.873>kind <00:38:54.029>of <00:38:54.185>things.

800
00:38:55.825 --> 00:39:00.085
<00:38:55.825>Or <00:38:55.980>even <00:38:56.136>while <00:38:56.291>animation <00:38:56.447>is <00:38:56.602>ongoing <00:38:56.758>without <00:38:56.913>even, <00:38:57.069>it <00:38:57.225>can,

801
00:39:00.225 --> 00:39:01.605
<00:39:00.225>you <00:39:00.473>can <00:39:00.721>start <00:39:00.970>a <00:39:01.218>new <00:39:01.467>animation

802
00:39:01.665 --> 00:39:05.645
<00:39:01.665>and <00:39:01.805>it <00:39:01.945>can, <00:39:02.085>uh, <00:39:02.225>continue <00:39:02.365>from <00:39:02.505>a <00:39:02.645>last <00:39:02.785>known <00:39:02.925>start <00:39:03.065>location.

803
00:39:05.745 --> 00:39:08.605
<00:39:05.745>So <00:39:06.025>this <00:39:06.305>demo, <00:39:06.585>um, <00:39:06.865>shows <00:39:07.145>that,

804
00:39:09.065 --> 00:39:11.085
<00:39:09.065>or <00:39:09.345>you <00:39:09.625>can <00:39:09.905>even, <00:39:10.185>uh, <00:39:10.465>combine

805
00:39:11.145 --> 00:39:14.085
<00:39:11.145>and <00:39:11.320>compose <00:39:11.495>different <00:39:11.670>animations, <00:39:11.845>or <00:39:12.020>you <00:39:12.195>can <00:39:12.370>replace <00:39:12.545>them.

806
00:39:14.715 --> 00:39:16.525
<00:39:14.715>Here, <00:39:14.915>you <00:39:15.115>can <00:39:15.315>see <00:39:15.515>that <00:39:15.715>there's <00:39:15.915>a <00:39:16.115>zooming

807
00:39:16.545 --> 00:39:19.645
<00:39:16.545>and, <00:39:16.895>uh, <00:39:17.245>uh, <00:39:17.595>rotation <00:39:17.945>happening.

808
00:39:20.265 --> 00:39:24.085
<00:39:20.265>Uh, <00:39:20.392>you <00:39:20.519>can <00:39:20.646>add, <00:39:20.774>you <00:39:20.901>can <00:39:21.028>compose <00:39:21.155>them <00:39:21.283>in <00:39:21.410>an <00:39:21.537>additive <00:39:21.665>way

809
00:39:24.185 --> 00:39:25.885
<00:39:24.185>or <00:39:24.418>in <00:39:24.651>an, <00:39:24.884>in <00:39:25.118>an <00:39:25.351>accumulative <00:39:25.585>way.

810
00:39:26.305 --> 00:39:28.165
<00:39:26.305>Uh, <00:39:26.538>so <00:39:26.771>both <00:39:27.004>of <00:39:27.238>them <00:39:27.471>are <00:39:27.705>possible.

811
00:39:28.985 --> 00:39:31.805
<00:39:28.985>Uh, <00:39:29.125>this <00:39:29.265>way <00:39:29.405>you <00:39:29.545>can <00:39:29.685>just <00:39:29.825>create <00:39:29.965>a <00:39:30.105>different, <00:39:30.245>for <00:39:30.385>example,

812
00:39:32.205 --> 00:39:33.965
<00:39:32.205>bouncing <00:39:32.671>effects <00:39:33.138>as <00:39:33.605>possible.

813
00:39:34.385 --> 00:39:38.565
<00:39:34.385>And <00:39:34.560>perhaps <00:39:34.735>what's, <00:39:34.910>what's <00:39:35.085>super <00:39:35.260>new <00:39:35.435>this <00:39:35.610>year, <00:39:35.785>uh,

814
00:39:38.565 --> 00:39:41.405
<00:39:38.565>that <00:39:38.720>has <00:39:38.876>landed <00:39:39.031>is <00:39:39.187>the <00:39:39.342>we <00:39:39.498>Transitions <00:39:39.653>API <00:39:39.809>I, <00:39:39.965>I'm,

815
00:39:41.405 --> 00:39:44.005
<00:39:41.405>and <00:39:41.605>I'm <00:39:41.805>personally <00:39:42.005>very <00:39:42.205>excited, <00:39:42.405>uh, <00:39:42.605>on <00:39:42.805>this.

816
00:39:44.545 --> 00:39:46.165
<00:39:44.545>Um, <00:39:44.825>let's <00:39:45.105>see. <00:39:45.385>The <00:39:45.665>most <00:39:45.945>basic,

817
00:39:46.185 --> 00:39:51.045
<00:39:46.185>the <00:39:46.360>we <00:39:46.535>transition <00:39:46.710>API <00:39:46.884>allow <00:39:47.060>you, <00:39:47.235>uh, <00:39:47.410>to, <00:39:47.585>um,

818
00:39:53.205 --> 00:39:56.105
<00:39:53.205>to <00:39:53.380>generate, <00:39:53.555>actually, <00:39:53.730>if <00:39:53.904>you <00:39:54.080>have <00:39:54.255>two <00:39:54.430>different <00:39:54.605>version

819
00:39:56.165 --> 00:40:01.145
<00:39:56.165>of <00:39:56.320>the <00:39:56.476>dormitory, <00:39:56.631>you <00:39:56.787>can, <00:39:56.942>uh, <00:39:57.098>the <00:39:57.253>browser <00:39:57.409>can <00:39:57.565>automatically

820
00:40:01.815 --> 00:40:03.825
<00:40:01.815>animate <00:40:02.015>from <00:40:02.215>one <00:40:02.415>version <00:40:02.615>to <00:40:02.815>another <00:40:03.015>for <00:40:03.215>you.

821
00:40:03.825 --> 00:40:04.865
<00:40:03.825>So <00:40:04.136>it's <00:40:04.448>far <00:40:04.761>easier.

822
00:40:04.925 --> 00:40:07.145
<00:40:04.925>It <00:40:05.125>can <00:40:05.325>find <00:40:05.525>out <00:40:05.725>the <00:40:05.925>difference <00:40:06.125>by <00:40:06.325>itself,

823
00:40:07.165 --> 00:40:09.225
<00:40:07.165>and <00:40:07.445>then <00:40:07.725>it <00:40:08.005>can <00:40:08.285>generate, <00:40:08.565>uh,

824
00:40:09.325 --> 00:40:12.675
<00:40:09.325>and <00:40:09.500>that's <00:40:09.674>a <00:40:09.850>very <00:40:10.024>simple <00:40:10.200>demo, <00:40:10.375>is <00:40:10.549>that, <00:40:10.725>um,

825
00:40:13.295 --> 00:40:15.155
<00:40:13.295>so <00:40:13.575>this <00:40:13.855>code <00:40:14.135>just <00:40:14.415>Java, <00:40:14.695>JavaScript,

826
00:40:15.155 --> 00:40:17.395
<00:40:15.155>it <00:40:15.388>just <00:40:15.621>inserts <00:40:15.855>a <00:40:16.088>new <00:40:16.321>new <00:40:16.555>HDML.

827
00:40:17.395 --> 00:40:19.915
<00:40:17.395>That's <00:40:17.595>all <00:40:17.795>it <00:40:17.995>does. <00:40:18.195>There's <00:40:18.395>no <00:40:18.595>CSL <00:40:18.795>uh,

828
00:40:19.915 --> 00:40:22.875
<00:40:19.915>there's <00:40:20.090>not <00:40:20.265>much <00:40:20.440>CSS <00:40:20.615>here <00:40:20.790>except <00:40:20.965>the <00:40:21.140>configuration <00:40:21.315>part.

829
00:40:23.055 --> 00:40:25.155
<00:40:23.055>And <00:40:23.230>whenever <00:40:23.404>you <00:40:23.580>click, <00:40:23.754>you <00:40:23.930>can <00:40:24.105>see <00:40:24.279>there's <00:40:24.455>a,

830
00:40:25.155 --> 00:40:27.155
<00:40:25.155>there's <00:40:25.388>a <00:40:25.621>failing <00:40:25.855>and <00:40:26.088>cross <00:40:26.321>fading <00:40:26.555>there.

831
00:40:27.255 --> 00:40:29.315
<00:40:27.255>You <00:40:27.605>can <00:40:27.955>cross <00:40:28.305>the <00:40:28.655>page.

832
00:40:29.615 --> 00:40:31.475
<00:40:29.615>And <00:40:29.814>it's <00:40:30.015>super <00:40:30.214>simple <00:40:30.415>to <00:40:30.615>build <00:40:30.814>this <00:40:31.015>kind

833
00:40:31.475 --> 00:40:33.075
<00:40:31.475>of <00:40:31.941>animations <00:40:32.408>this <00:40:32.875>day.

834
00:40:34.385 --> 00:40:36.465
<00:40:34.385>Whenever, <00:40:34.585>uh, <00:40:34.785>the <00:40:34.985>browser <00:40:35.185>can <00:40:35.385>figure <00:40:35.585>out <00:40:35.785>the,

835
00:40:36.465 --> 00:40:39.585
<00:40:36.465>either <00:40:36.640>two <00:40:36.815>different <00:40:36.990>versions <00:40:37.165>of <00:40:37.340>it, <00:40:37.515>uh, <00:40:37.690>perhaps <00:40:37.865>another

836
00:40:40.655 --> 00:40:43.545
<00:40:40.655>version <00:40:40.935>would <00:40:41.215>be, <00:40:41.495>uh, <00:40:41.775>interesting <00:40:42.055>bit.

837
00:40:43.545 --> 00:40:48.185
<00:40:43.545>It <00:40:43.895>would <00:40:44.245>be, <00:40:44.595>um, <00:40:44.945>yeah,

838
00:40:48.185 --> 00:40:49.345
<00:40:48.185>maybe <00:40:48.446>Star <00:40:48.707>Wars <00:40:48.968>Swipe <00:40:49.229>Swipe.

839
00:40:50.005 --> 00:40:52.505
<00:40:50.005>So <00:40:50.132>you <00:40:50.259>can <00:40:50.386>see <00:40:50.514>that <00:40:50.641>you <00:40:50.768>can <00:40:50.895>build <00:40:51.023>this <00:40:51.150>kind <00:40:51.277>of <00:40:51.405>animations.

840
00:40:52.765 --> 00:40:54.345
<00:40:52.765>And <00:40:52.998>this <00:40:53.231>is <00:40:53.464>another <00:40:53.698>third <00:40:53.931>party <00:40:54.165>framework.

841
00:40:54.615 --> 00:40:57.745
<00:40:54.615>There's <00:40:54.814>no <00:40:55.015>special <00:40:55.214>thing. <00:40:55.415>It's, <00:40:55.615>it's <00:40:55.814>super <00:40:56.015>simple.

842
00:40:58.045 --> 00:41:00.105
<00:40:58.045>You <00:40:58.220>just <00:40:58.395>tell <00:40:58.570>the <00:40:58.745>browser <00:40:58.920>what <00:40:59.095>it <00:40:59.270>should <00:40:59.445>do

843
00:41:00.345 --> 00:41:02.785
<00:41:00.345>whenever <00:41:00.484>there <00:41:00.625>was <00:41:00.765>a <00:41:00.904>two <00:41:01.044>different <00:41:01.185>version <00:41:01.325>of <00:41:01.464>the <00:41:01.605>same <00:41:01.745>Diff

844
00:41:04.985 --> 00:41:09.525
<00:41:04.985>um, <00:41:05.125>yeah, <00:41:05.265>basically, <00:41:05.405>this <00:41:05.545>is <00:41:05.685>all <00:41:05.825>I <00:41:05.965>was <00:41:06.105>going <00:41:06.245>to <00:41:06.385>cover.

845
00:41:09.615 --> 00:41:10.725
<00:41:09.615>Thank <00:41:09.948>you <00:41:10.281>for <00:41:10.614>listening.

846
00:41:11.465 --> 00:41:15.665
<00:41:11.465>Uh, <00:41:11.581>uh, <00:41:11.698>I <00:41:11.815>hope <00:41:11.931>I, <00:41:12.048>I <00:41:12.165>try <00:41:12.281>to <00:41:12.398>touch <00:41:12.515>as <00:41:12.631>much <00:41:12.748>as <00:41:12.865>possible.

847
00:41:16.045 --> 00:41:19.815
<00:41:16.045>Uh, <00:41:16.220>my <00:41:16.395>intention <00:41:16.570>wasn't <00:41:16.745>just <00:41:16.920>to <00:41:17.095>show <00:41:17.270>you <00:41:17.445>how,

848
00:41:19.875 --> 00:41:21.015
<00:41:19.875>but <00:41:20.131>just <00:41:20.388>create <00:41:20.644>some <00:41:20.901>sort

849
00:41:21.015 --> 00:41:25.185
<00:41:21.015>of <00:41:21.170>awareness <00:41:21.326>about <00:41:21.481>the <00:41:21.637>new <00:41:21.792>CSS <00:41:21.948>goodies <00:41:22.103>and <00:41:22.259>for <00:41:22.415>timing.

850
00:41:25.245 --> 00:41:26.745
<00:41:25.245>That's <00:41:25.694>all <00:41:26.145>from <00:41:26.595>me.

851
00:41:29.185 --> 00:41:30.475
<00:41:29.185>Alright, <00:41:29.765>good <00:41:30.346>stuff.

852
00:41:30.995 --> 00:41:33.930
<00:41:30.995>I <00:41:31.122>like <00:41:31.249>the, <00:41:31.376>I <00:41:31.504>like <00:41:31.631>the <00:41:31.758>juxtaposition <00:41:31.885>of <00:41:32.013>like, <00:41:32.140>uh, <00:41:32.267>of <00:41:32.395>like,

853
00:41:33.930 --> 00:41:36.965
<00:41:33.930>great <00:41:34.069>new <00:41:34.210>CCSS <00:41:34.350>and <00:41:34.490>the <00:41:34.629>Hotmail <00:41:34.770>address <00:41:34.910>at <00:41:35.049>the <00:41:35.190>same <00:41:35.330>time.

854
00:41:37.025 --> 00:41:38.885
<00:41:37.025>So <00:41:37.375>that's <00:41:37.725>pretty <00:41:38.075>cool. <00:41:38.425>So

855
00:41:39.675 --> 00:41:41.045
<00:41:39.675>That <00:41:39.983>shows <00:41:40.291>my <00:41:40.599>age, <00:41:40.908>actually.

856
00:41:41.105 --> 00:41:42.105
So,

857
00:41:44.235 --> 00:41:46.565
<00:41:44.235>Yeah, <00:41:44.410>so <00:41:44.585>I <00:41:44.760>really, <00:41:44.935>I <00:41:45.110>really <00:41:45.285>love <00:41:45.460>the <00:41:45.635>idea

858
00:41:46.565 --> 00:41:49.085
<00:41:46.565>that <00:41:46.705>we <00:41:46.845>now <00:41:46.985>have <00:41:47.125>all <00:41:47.265>these <00:41:47.405>features <00:41:47.545>that <00:41:47.685>basically <00:41:47.825>allow <00:41:47.965>us

859
00:41:49.085 --> 00:41:52.365
<00:41:49.085>to <00:41:49.240>do <00:41:49.396>layouts <00:41:49.551>that <00:41:49.707>are <00:41:49.862>super <00:41:50.018>cre <00:41:50.173>uh, <00:41:50.329>super <00:41:50.485>creative

860
00:41:52.545 --> 00:41:54.885
<00:41:52.545>and <00:41:52.745>super, <00:41:52.945>uh, <00:41:53.145>dependent <00:41:53.345>on <00:41:53.545>the <00:41:53.745>end <00:41:53.945>user.

861
00:41:55.365 --> 00:41:57.965
<00:41:55.365>'cause <00:41:55.598>my <00:41:55.831>biggest <00:41:56.064>problem <00:41:56.298>was <00:41:56.531>always <00:41:56.765>trying

862
00:41:57.965 --> 00:41:59.485
<00:41:57.965>to <00:41:58.307>explain <00:41:58.649>CSS <00:41:58.991>to <00:41:59.333>people.

863
00:42:00.115 --> 00:42:02.805
<00:42:00.115>They <00:42:00.270>always <00:42:00.426>try <00:42:00.581>to <00:42:00.737>make <00:42:00.892>it <00:42:01.048>paint <00:42:01.203>on <00:42:01.359>the <00:42:01.515>screen.

864
00:42:02.995 --> 00:42:04.685
<00:42:02.995>They <00:42:03.275>like <00:42:03.555>pixels, <00:42:03.835>they <00:42:04.115>said <00:42:04.395>like,

865
00:42:04.685 --> 00:42:06.765
<00:42:04.685>this <00:42:04.884>is <00:42:05.085>50 <00:42:05.285>pixels <00:42:05.485>there, <00:42:05.685>20 <00:42:05.884>pixels <00:42:06.085>there.

866
00:42:07.035 --> 00:42:09.325
<00:42:07.035>Whereas <00:42:07.315>like, <00:42:07.595>I <00:42:07.875>always <00:42:08.154>thought, <00:42:08.435>CSS

867
00:42:09.325 --> 00:42:11.205
<00:42:09.325>to <00:42:09.605>me <00:42:09.884>is <00:42:10.165>basically <00:42:10.444>making <00:42:10.725>sure

868
00:42:11.205 --> 00:42:14.285
<00:42:11.205>that <00:42:11.404>end <00:42:11.605>users <00:42:11.805>can <00:42:12.005>actually <00:42:12.205>consume <00:42:12.404>the <00:42:12.605>content

869
00:42:14.465 --> 00:42:16.445
<00:42:14.465>and <00:42:14.620>you, <00:42:14.776>you <00:42:14.931>have <00:42:15.087>no <00:42:15.242>idea <00:42:15.398>how <00:42:15.553>to <00:42:15.709>control <00:42:15.865>it.

870
00:42:16.685 --> 00:42:18.845
<00:42:16.685>'cause <00:42:16.801>it <00:42:16.918>might <00:42:17.035>be <00:42:17.151>a <00:42:17.268>mobile <00:42:17.384>phone, <00:42:17.501>it <00:42:17.618>might <00:42:17.735>be <00:42:17.851>a <00:42:17.968>big <00:42:18.085>screen,

871
00:42:18.845 --> 00:42:19.925
<00:42:18.845>it <00:42:19.039>might <00:42:19.233>be <00:42:19.428>a <00:42:19.622>small <00:42:19.817>screen.

872
00:42:20.425 --> 00:42:24.005
<00:42:20.425>So <00:42:20.532>we <00:42:20.640>have <00:42:20.748>to <00:42:20.855>think <00:42:20.963>more <00:42:21.071>in <00:42:21.178>like, <00:42:21.286>uh, <00:42:21.394>uh, <00:42:21.501>in <00:42:21.609>like, <00:42:21.717>uh, <00:42:21.825>uh,

873
00:42:24.005 --> 00:42:26.405
<00:42:24.005>boundaries <00:42:24.238>rather <00:42:24.471>than <00:42:24.705>we <00:42:24.938>actually <00:42:25.171>think <00:42:25.405>in

874
00:42:26.405 --> 00:42:28.085
<00:42:26.405>like <00:42:27.105>definitions. <00:42:27.805>Yeah.

875
00:42:28.225 --> 00:42:29.925
<00:42:28.225>But <00:42:29.625>Yeah,

876
00:42:30.065 --> 00:42:32.205
<00:42:30.065>and <00:42:30.265>especially <00:42:30.465>the, <00:42:30.665>the, <00:42:30.865>the, <00:42:31.065>the <00:42:31.265>reading <00:42:31.465>order

877
00:42:32.345 --> 00:42:33.365
<00:42:32.345>and <00:42:32.574>these <00:42:32.803>kind <00:42:33.033>of <00:42:33.263>things.

878
00:42:33.745 --> 00:42:36.405
<00:42:33.745>And <00:42:33.900>also <00:42:34.056>makes <00:42:34.211>it <00:42:34.367>easier. <00:42:34.522>'cause <00:42:34.678>people <00:42:34.833>were <00:42:34.989>always <00:42:35.145>like

879
00:42:36.505 --> 00:42:38.965
<00:42:36.505>the, <00:42:36.705>uh, <00:42:36.905>having <00:42:37.105>like <00:42:37.305>the, <00:42:37.505>having <00:42:37.705>the <00:42:37.905>inline

880
00:42:39.025 --> 00:42:40.845
<00:42:39.025>and <00:42:39.305>the <00:42:39.585>the <00:42:39.865>content <00:42:40.145>route, <00:42:40.425>uh,

881
00:42:41.075 --> 00:42:43.325
<00:42:41.075>direction <00:42:41.250>now <00:42:41.424>is <00:42:41.600>much <00:42:41.774>better <00:42:41.950>than <00:42:42.125>thinking <00:42:42.299>top <00:42:42.475>left,

882
00:42:43.325 --> 00:42:46.725
<00:42:43.325>right <00:42:43.480>center <00:42:43.636>and <00:42:43.791>making <00:42:43.947>sure <00:42:44.102>to <00:42:44.258>everything <00:42:44.413>going <00:42:44.569>on <00:42:44.725>there.

883
00:42:47.645 --> 00:42:51.205
<00:42:47.645>Although <00:42:47.761>at <00:42:47.878>the <00:42:47.995>same <00:42:48.111>time, <00:42:48.228>uh, <00:42:48.345>I <00:42:48.461>find <00:42:48.578>it <00:42:48.695>that, <00:42:48.811>uh, <00:42:48.928>CSS <00:42:49.045>is,

884
00:42:51.265 --> 00:42:52.445
<00:42:51.265>is <00:42:51.530>going <00:42:51.796>so <00:42:52.061>much <00:42:52.327>leaps

885
00:42:52.445 --> 00:42:54.605
<00:42:52.445>and <00:42:52.620>bounds <00:42:52.795>that <00:42:52.970>it <00:42:53.145>becomes <00:42:53.320>harder <00:42:53.495>to <00:42:53.670>actually <00:42:53.845>start

886
00:42:54.625 --> 00:42:59.005
<00:42:54.625>to <00:42:54.825>understand <00:42:55.025>and <00:42:55.225>defining <00:42:55.425>all <00:42:55.625>the <00:42:55.825>sizes, <00:42:56.025>remem,

887
00:42:59.625 --> 00:43:04.365
<00:42:59.625>vh, <00:42:59.765>VMAX, <00:42:59.905>vm <00:43:00.045>Min, <00:43:00.185>uh, <00:43:00.325>how <00:43:00.465>do <00:43:00.605>you <00:43:00.745>get <00:43:00.885>around <00:43:01.025>that?

888
00:43:04.545 --> 00:43:05.765
<00:43:04.545>How <00:43:04.764>do <00:43:04.984>you <00:43:05.203>make <00:43:05.423>sure <00:43:05.643>that

889
00:43:05.765 --> 00:43:07.125
<00:43:05.765>you're <00:43:06.009>actually <00:43:06.254>keeping <00:43:06.499>up <00:43:06.744>to <00:43:06.989>speed?

890
00:43:07.125 --> 00:43:09.485
<00:43:07.125>What <00:43:07.265>are <00:43:07.405>resources <00:43:07.545>that <00:43:07.685>you <00:43:07.825>think <00:43:07.965>people <00:43:08.105>should <00:43:08.245>take <00:43:08.385>a <00:43:08.525>look

891
00:43:09.485 --> 00:43:13.605
<00:43:09.485>at <00:43:09.625>and, <00:43:09.765>uh, <00:43:09.905>and <00:43:10.045>keep <00:43:10.185>finding <00:43:10.325>out <00:43:10.465>new <00:43:10.605>things <00:43:10.745>about <00:43:10.885>that?

892
00:43:14.115 --> 00:43:16.605
<00:43:14.115>Yeah, <00:43:14.314>that's <00:43:14.515>very <00:43:14.714>true. <00:43:14.915>It's, <00:43:15.115>it's <00:43:15.314>growing, <00:43:15.515>uh,

893
00:43:16.625 --> 00:43:19.485
<00:43:16.625>and <00:43:16.765>become <00:43:16.905>a <00:43:17.045>little <00:43:17.185>hard <00:43:17.325>to <00:43:17.465>grasp, <00:43:17.605>uh, <00:43:17.745>and <00:43:17.885>keep <00:43:18.025>up.

894
00:43:19.665 --> 00:43:22.485
<00:43:19.665>Uh, <00:43:19.840>and <00:43:20.015>what <00:43:20.190>I <00:43:20.365>do <00:43:20.540>is <00:43:20.715>particularly <00:43:20.890>first, <00:43:21.065>I,

895
00:43:22.565 --> 00:43:24.005
<00:43:22.565>I <00:43:22.781>kinda <00:43:22.997>like <00:43:23.213>this <00:43:23.429>stuff <00:43:23.645>because, <00:43:23.861>uh,

896
00:43:24.165 --> 00:43:25.965
<00:43:24.165>every <00:43:24.340>feature <00:43:24.515>gives <00:43:24.690>you <00:43:24.865>a <00:43:25.040>little <00:43:25.215>bit <00:43:25.390>more <00:43:25.565>power

897
00:43:25.985 --> 00:43:27.805
<00:43:25.985>for <00:43:26.265>power <00:43:26.545>on, <00:43:26.825>on, <00:43:27.105>on <00:43:27.385>some

898
00:43:27.805 --> 00:43:29.565
<00:43:27.805>of <00:43:28.085>things <00:43:28.365>you <00:43:28.645>were <00:43:28.924>struggling <00:43:29.205>before.

899
00:43:29.565 --> 00:43:31.405
<00:43:29.565>And <00:43:29.765>it, <00:43:29.965>it <00:43:30.165>somewhat <00:43:30.365>makes <00:43:30.565>your <00:43:30.765>life <00:43:30.965>easier.

900
00:43:31.945 --> 00:43:34.605
<00:43:31.945>And <00:43:32.145>I <00:43:32.345>particularly <00:43:32.545>follow <00:43:32.745>the <00:43:32.945>browser <00:43:33.145>release <00:43:33.345>notes.

901
00:43:34.745 --> 00:43:38.045
<00:43:34.745>So <00:43:34.861>I, <00:43:34.978>I, <00:43:35.095>every, <00:43:35.211>every <00:43:35.328>month, <00:43:35.444>uh, <00:43:35.561>I <00:43:35.678>look <00:43:35.795>at <00:43:35.911>the, <00:43:36.028>for <00:43:36.145>example,

902
00:43:38.195 --> 00:43:40.725
<00:43:38.195>chromes <00:43:38.475>or, <00:43:38.755>uh, <00:43:39.035>surprise <00:43:39.315>release <00:43:39.595>notes

903
00:43:41.305 --> 00:43:43.125
<00:43:41.305>and <00:43:41.480>then <00:43:41.654>look <00:43:41.830>at <00:43:42.004>what, <00:43:42.180>what <00:43:42.355>is, <00:43:42.529>what <00:43:42.705>is,

904
00:43:43.125 --> 00:43:44.365
<00:43:43.125>what <00:43:43.311>are <00:43:43.497>the <00:43:43.683>new <00:43:43.868>features <00:43:44.055>they <00:43:44.241>added?

905
00:43:44.865 --> 00:43:48.005
<00:43:44.865>And <00:43:45.020>from <00:43:45.176>there <00:43:45.331>I <00:43:45.487>start <00:43:45.642>to <00:43:45.798>read <00:43:45.953>their <00:43:46.109>documentation, <00:43:46.265>uh,

906
00:43:48.625 --> 00:43:50.925
<00:43:48.625>and <00:43:48.780>then <00:43:48.936>try <00:43:49.091>to <00:43:49.247>find <00:43:49.402>a <00:43:49.558>good <00:43:49.713>use <00:43:49.869>of <00:43:50.025>it.

907
00:43:51.065 --> 00:43:53.325
<00:43:51.065>Why, <00:43:51.220>why <00:43:51.376>can <00:43:51.531>I <00:43:51.687>use <00:43:51.842>this <00:43:51.998>kind <00:43:52.153>of, <00:43:52.309>uh, <00:43:52.465>stuff?

908
00:43:53.545 --> 00:43:55.965
<00:43:53.545>Um, <00:43:53.745>but <00:43:53.945>I, <00:43:54.145>I, <00:43:54.345>I <00:43:54.545>particularly <00:43:54.745>enjoy, <00:43:54.945>uh,

909
00:43:55.965 --> 00:43:57.925
<00:43:55.965>because <00:43:56.198>the <00:43:56.431>more <00:43:56.665>knowledge <00:43:56.898>you <00:43:57.131>have, <00:43:57.365>it's,

910
00:43:57.925 --> 00:43:59.085
<00:43:57.925>it <00:43:58.074>gives <00:43:58.223>you <00:43:58.372>a <00:43:58.521>little <00:43:58.670>bit <00:43:58.819>more <00:43:58.969>power.

911
00:43:59.545 --> 00:44:04.195
<00:43:59.545>Uh, <00:43:59.685>but <00:43:59.825>I <00:43:59.965>also <00:44:00.105>agree, <00:44:00.245>it, <00:44:00.385>it, <00:44:00.525>it <00:44:00.665>is <00:44:00.805>not <00:44:00.945>easy

912
00:44:04.195 --> 00:44:05.595
<00:44:04.195>to <00:44:04.375>keep <00:44:04.555>up <00:44:04.735>even <00:44:04.915>for <00:44:05.095>me <00:44:05.275>as <00:44:05.455>well.

913
00:44:07.125 --> 00:44:09.605
<00:44:07.125>I <00:44:07.265>do <00:44:07.405>like <00:44:07.545>that <00:44:07.685>when <00:44:07.825>you <00:44:07.965>actually <00:44:08.105>use <00:44:08.245>Visual <00:44:08.385>Studio <00:44:08.525>Code,

914
00:44:09.605 --> 00:44:12.525
<00:44:09.605>that <00:44:09.745>it <00:44:09.885>actually <00:44:10.025>is <00:44:10.165>really <00:44:10.305>quick <00:44:10.445>in <00:44:10.585>taking <00:44:10.725>on <00:44:10.865>these <00:44:11.005>things.

915
00:44:12.585 --> 00:44:15.085
<00:44:12.585>So <00:44:12.725>when <00:44:12.865>you <00:44:13.005>actually <00:44:13.145>write <00:44:13.285>CSS <00:44:13.425>and <00:44:13.565>you <00:44:13.705>do <00:44:13.845>a <00:44:13.985>number,

916
00:44:15.425 --> 00:44:17.525
<00:44:15.425>and <00:44:15.580>then <00:44:15.736>it <00:44:15.891>actually <00:44:16.047>will <00:44:16.202>show <00:44:16.358>you <00:44:16.513>all <00:44:16.669>the <00:44:16.825>options

917
00:44:17.525 --> 00:44:19.605
<00:44:17.525>that <00:44:17.725>you <00:44:17.925>have, <00:44:18.125>like <00:44:18.325>the <00:44:18.525>HV <00:44:18.725>win, <00:44:18.925>ra,

918
00:44:20.125 --> 00:44:21.165
<00:44:20.125>rem, <00:44:20.359>these <00:44:20.593>kind <00:44:20.827>of <00:44:21.061>things.

919
00:44:21.705 --> 00:44:23.605
<00:44:21.705>But <00:44:21.938>there's, <00:44:22.171>uh, <00:44:22.404>there's <00:44:22.638>so <00:44:22.871>many, <00:44:23.105>uh,

920
00:44:23.605 --> 00:44:26.685
<00:44:23.605>implementation <00:44:23.838>issues <00:44:24.071>at <00:44:24.305>times <00:44:24.538>when, <00:44:24.771>uh, <00:44:25.005>uh,

921
00:44:27.005 --> 00:44:28.485
<00:44:27.005>I <00:44:27.195>always <00:44:27.385>find <00:44:27.575>it <00:44:27.766>very <00:44:27.956>confusing <00:44:28.146>when <00:44:28.337>you,

922
00:44:28.485 --> 00:44:29.805
<00:44:28.485>when <00:44:28.683>you <00:44:28.881>are <00:44:29.079>in <00:44:29.277>the <00:44:29.475>CSS <00:44:29.673>world

923
00:44:29.805 --> 00:44:32.525
<00:44:29.805>and <00:44:29.960>you <00:44:30.116>follow <00:44:30.271>the <00:44:30.427>thought <00:44:30.582>leaders <00:44:30.738>in <00:44:30.893>CSS, <00:44:31.049>it's <00:44:31.205>like,

924
00:44:32.525 --> 00:44:34.405
<00:44:32.525>this <00:44:32.700>new <00:44:32.875>feature <00:44:33.050>is <00:44:33.225>there, <00:44:33.400>but <00:44:33.575>don't <00:44:33.750>use <00:44:33.925>it.

925
00:44:34.475 --> 00:44:35.645
<00:44:34.475>This <00:44:34.738>new <00:44:35.001>feature <00:44:35.264>is <00:44:35.528>there.

926
00:44:35.665 --> 00:44:37.925
<00:44:35.665>And <00:44:35.820>it's <00:44:35.976>dangerous <00:44:36.131>when <00:44:36.287>you <00:44:36.442>do <00:44:36.598>it <00:44:36.753>in <00:44:36.909>these <00:44:37.065>sizes.

927
00:44:37.925 --> 00:44:41.645
<00:44:37.925>Like <00:44:38.080>pixels <00:44:38.236>were <00:44:38.391>unable, <00:44:38.547>we <00:44:38.702>were <00:44:38.858>unable <00:44:39.013>to <00:44:39.169>resize <00:44:39.325>pixels

928
00:44:41.645 --> 00:44:42.925
<00:44:41.645>because <00:44:41.933>of <00:44:42.221>Internet <00:44:42.509>Explorer <00:44:42.797>six.

929
00:44:42.945 --> 00:44:44.245
<00:44:42.945>So <00:44:43.179>that's <00:44:43.413>a <00:44:43.647>long <00:44:43.881>time <00:44:44.115>ago.

930
00:44:44.905 --> 00:44:46.805
<00:44:44.905>Uh, <00:44:45.105>it's, <00:44:45.305>it's <00:44:45.505>kind <00:44:45.705>of <00:44:45.905>the <00:44:46.105>easiest <00:44:46.305>things

931
00:44:46.805 --> 00:44:48.125
<00:44:46.805>that <00:44:47.201>people <00:44:47.596>still <00:44:47.993>understand.

932
00:44:48.225 --> 00:44:49.605
<00:44:48.225>But <00:44:48.535>in <00:44:48.846>like <00:44:49.156>a <00:44:49.467>world

933
00:44:49.675 --> 00:44:52.565
<00:44:49.675>with <00:44:49.875>different <00:44:50.075>devices <00:44:50.275>at <00:44:50.475>different <00:44:50.675>device <00:44:50.875>pixel <00:44:51.075>ratio,

934
00:44:53.285 --> 00:44:55.125
<00:44:53.285>a <00:44:53.518>pixel <00:44:53.751>means <00:44:53.984>nothing <00:44:54.218>anymore, <00:44:54.451>does <00:44:54.685>it?

935
00:44:56.455 --> 00:44:58.425
<00:44:56.455>Well, <00:44:56.805>that <00:44:57.154>problem's <00:44:57.505>somewhat <00:44:57.855>addressed.

936
00:44:58.605 --> 00:45:01.505
<00:44:58.605>Uh, <00:44:58.805>now <00:44:59.005>pixels <00:44:59.205>are <00:44:59.405>actually <00:44:59.605>called <00:44:59.805>reference <00:45:00.005>pixels.

937
00:45:01.685 --> 00:45:04.145
<00:45:01.685>Uh, <00:45:01.812>in <00:45:01.939>the <00:45:02.066>old <00:45:02.194>times <00:45:02.321>you <00:45:02.448>were <00:45:02.575>right, <00:45:02.703>uh, <00:45:02.830>they <00:45:02.957>were <00:45:03.085>very,

938
00:45:04.145 --> 00:45:05.345
<00:45:04.145>very <00:45:04.415>hard <00:45:04.685>to, <00:45:04.955>to <00:45:05.225>consume.

939
00:45:06.125 --> 00:45:10.145
<00:45:06.125>Uh, <00:45:06.300>and <00:45:06.475>I <00:45:06.650>think <00:45:06.825>now <00:45:07.000>sticking <00:45:07.175>to <00:45:07.350>pixels <00:45:07.525>is

940
00:45:11.025 --> 00:45:12.745
<00:45:11.025>somewhat <00:45:11.375>safer <00:45:11.725>compared <00:45:12.075>to <00:45:12.425>what's,

941
00:45:12.745 --> 00:45:14.305
<00:45:12.745>what's, <00:45:13.095>what's <00:45:13.444>10 <00:45:13.795>years <00:45:14.145>ago.

942
00:45:14.445 --> 00:45:17.145
<00:45:14.445>But <00:45:14.678>as <00:45:14.911>I <00:45:15.145>said, <00:45:15.378>um, <00:45:15.611>you, <00:45:15.845>there,

943
00:45:17.145 --> 00:45:19.825
<00:45:17.145>there <00:45:17.320>are <00:45:17.495>other <00:45:17.670>dimensions <00:45:17.845>such <00:45:18.020>as, <00:45:18.195>uh, <00:45:18.370>respecting <00:45:18.545>users,

944
00:45:20.245 --> 00:45:22.545
<00:45:20.245>uh, <00:45:20.711>accessibility, <00:45:21.178>uh, <00:45:21.645>properties.

945
00:45:22.965 --> 00:45:24.945
<00:45:22.965>And <00:45:23.198>that's <00:45:23.431>why <00:45:23.665>I <00:45:23.898>particularly <00:45:24.131>recommend, <00:45:24.365>uh,

946
00:45:25.045 --> 00:45:28.465
<00:45:25.045>unless <00:45:25.185>you <00:45:25.325>have <00:45:25.465>a <00:45:25.605>very <00:45:25.745>good <00:45:25.885>reason, <00:45:26.025>sticking <00:45:26.165>to <00:45:26.305>REM <00:45:26.445>uh,

947
00:45:28.845 --> 00:45:31.465
<00:45:28.845>is <00:45:29.078>better <00:45:29.311>because <00:45:29.544>by <00:45:29.778>default, <00:45:30.011>by <00:45:30.245>definition,

948
00:45:31.465 --> 00:45:34.185
<00:45:31.465>one <00:45:31.698>REM <00:45:31.931>is <00:45:32.165>16 <00:45:32.398>pixel, <00:45:32.631>that's <00:45:32.865>hardcoded.

949
00:45:34.565 --> 00:45:38.225
<00:45:34.565>But <00:45:34.720>the, <00:45:34.876>the <00:45:35.031>users <00:45:35.187>have <00:45:35.342>from <00:45:35.498>the <00:45:35.653>browser <00:45:35.809>settings <00:45:35.965>can,

950
00:45:38.245 --> 00:45:39.865
<00:45:38.245>can <00:45:38.595>alter <00:45:38.944>this <00:45:39.295>equation <00:45:39.645>perhaps.

951
00:45:39.965 --> 00:45:41.865
<00:45:39.965>I'd <00:45:40.105>like <00:45:40.245>to <00:45:40.385>see <00:45:40.525>things <00:45:40.665>a <00:45:40.805>little <00:45:40.945>bit <00:45:41.085>more <00:45:41.225>bigger, <00:45:41.365>uh,

952
00:45:42.145 --> 00:45:43.305
<00:45:42.145>'cause <00:45:42.353>I <00:45:42.562>have <00:45:42.771>some <00:45:42.980>eyesight <00:45:43.189>problem.

953
00:45:44.045 --> 00:45:48.705
<00:45:44.045>So <00:45:44.200>it's <00:45:44.356>best <00:45:44.511>to <00:45:44.667>respect, <00:45:44.822>uh, <00:45:44.978>to, <00:45:45.133>to <00:45:45.289>users, <00:45:45.445>um,

954
00:45:48.775 --> 00:45:50.265
<00:45:48.775>accessibility <00:45:49.222>issues <00:45:49.669>as <00:45:50.116>well.

955
00:45:50.925 --> 00:45:53.825
<00:45:50.925>Uh, <00:45:51.052>but <00:45:51.179>I <00:45:51.306>think <00:45:51.434>we <00:45:51.561>are <00:45:51.688>a <00:45:51.815>little <00:45:51.943>bit <00:45:52.070>safer <00:45:52.197>hands, <00:45:52.325>uh,

956
00:45:54.345 --> 00:45:55.865
<00:45:54.345>compared <00:45:54.573>to <00:45:54.801>what, <00:45:55.029>10, <00:45:55.256>15 <00:45:55.484>years <00:45:55.712>ago.

957
00:45:56.155 --> 00:45:57.345
<00:45:56.155>Those <00:45:56.512>internet <00:45:56.869>export <00:45:57.225>types.

958
00:45:58.195 --> 00:45:59.965
<00:45:58.195>Well, <00:45:58.370>especially <00:45:58.545>when <00:45:58.720>it <00:45:58.895>comes <00:45:59.070>to <00:45:59.245>tooling <00:45:59.420>as <00:45:59.595>well.

959
00:46:00.125 --> 00:46:02.045
<00:46:00.125>I <00:46:00.300>mean, <00:46:00.475>I <00:46:00.650>worked <00:46:00.825>on <00:46:01.000>the <00:46:01.175>Edge <00:46:01.350>developer <00:46:01.525>tools

960
00:46:02.105 --> 00:46:05.125
<00:46:02.105>and <00:46:02.260>we <00:46:02.416>have <00:46:02.571>these <00:46:02.727>like, <00:46:02.882>uh, <00:46:03.038>uh, <00:46:03.193>simulation, <00:46:03.349>for <00:46:03.505>example,

961
00:46:05.195 --> 00:46:06.325
<00:46:05.195>high <00:46:05.703>contrast <00:46:06.212>mode.

962
00:46:06.675 --> 00:46:07.885
<00:46:06.675>That <00:46:06.947>is <00:46:07.219>a <00:46:07.491>real <00:46:07.764>pain

963
00:46:07.885 --> 00:46:10.645
<00:46:07.885>to <00:46:08.040>actually <00:46:08.196>change <00:46:08.351>your <00:46:08.507>whole <00:46:08.662>operating <00:46:08.818>system <00:46:08.973>to, <00:46:09.129>to <00:46:09.285>test.

964
00:46:10.705 --> 00:46:13.365
<00:46:10.705>But <00:46:10.860>you <00:46:11.016>can <00:46:11.171>actually <00:46:11.327>see <00:46:11.482>the <00:46:11.638>website, <00:46:11.793>like <00:46:11.949>a <00:46:12.105>user

965
00:46:13.365 --> 00:46:15.045
<00:46:13.365>with <00:46:13.645>high <00:46:13.924>contrast <00:46:14.205>would <00:46:14.484>see <00:46:14.765>it.

966
00:46:15.225 --> 00:46:17.685
<00:46:15.225>And <00:46:15.380>then <00:46:15.536>you <00:46:15.691>realize <00:46:15.847>you <00:46:16.002>cannot <00:46:16.158>rely <00:46:16.313>on <00:46:16.469>background <00:46:16.625>images,

967
00:46:18.025 --> 00:46:19.405
<00:46:18.025>you <00:46:18.335>cannot <00:46:18.646>rely <00:46:18.956>on <00:46:19.267>color.

968
00:46:19.585 --> 00:46:22.845
<00:46:19.585>You <00:46:19.725>actually <00:46:19.865>have <00:46:20.005>to <00:46:20.145>think <00:46:20.285>about <00:46:20.425>all <00:46:20.565>the, <00:46:20.705>uh, <00:46:20.845>the <00:46:20.985>contrast

969
00:46:22.845 --> 00:46:24.365
<00:46:22.845>between <00:46:23.529>foregrounded <00:46:24.212>background.

970
00:46:24.365 --> 00:46:26.445
<00:46:24.365>There's <00:46:24.564>lots <00:46:24.765>of <00:46:24.964>automated <00:46:25.165>checks <00:46:25.365>for <00:46:25.564>these <00:46:25.765>kind

971
00:46:26.445 --> 00:46:27.725
<00:46:26.445>of <00:46:26.829>things <00:46:27.213>as <00:46:27.596>well.

972
00:46:28.305 --> 00:46:30.325
<00:46:28.305>So <00:46:28.504>the, <00:46:28.705>uh, <00:46:28.904>I <00:46:29.105>think <00:46:29.305>the <00:46:29.504>biggest <00:46:29.705>thing

973
00:46:30.325 --> 00:46:31.725
<00:46:30.325>that <00:46:30.640>you <00:46:30.955>talked <00:46:31.270>about <00:46:31.585>today,

974
00:46:31.745 --> 00:46:33.405
<00:46:31.745>and <00:46:31.978>a <00:46:32.211>great <00:46:32.444>thank <00:46:32.678>you <00:46:32.911>for <00:46:33.145>going

975
00:46:33.425 --> 00:46:36.605
<00:46:33.425>so <00:46:33.580>much <00:46:33.736>into <00:46:33.891>detail <00:46:34.047>is <00:46:34.202>the <00:46:34.358>whole <00:46:34.513>color <00:46:34.669>spaces <00:46:34.825>issue.

976
00:46:36.605 --> 00:46:38.245
<00:46:36.605>That's <00:46:37.071>something <00:46:37.538>where <00:46:38.005>people

977
00:46:38.345 --> 00:46:41.045
<00:46:38.345>who <00:46:38.520>have <00:46:38.694>learned <00:46:38.870>it <00:46:39.044>from <00:46:39.220>back <00:46:39.395>in <00:46:39.569>the <00:46:39.745>days,

978
00:46:41.275 --> 00:46:43.885
<00:46:41.275>basically <00:46:41.450>asking <00:46:41.625>their <00:46:41.800>designer <00:46:41.975>what <00:46:42.150>the <00:46:42.325>hex <00:46:42.500>code <00:46:42.675>of

979
00:46:43.885 --> 00:46:47.645
<00:46:43.885>that <00:46:44.012>color <00:46:44.139>is, <00:46:44.266>and <00:46:44.394>then <00:46:44.521>that <00:46:44.648>was <00:46:44.775>that, <00:46:44.903>um, <00:46:45.030>getting <00:46:45.157>your <00:46:45.285>head

980
00:46:47.645 --> 00:46:50.885
<00:46:47.645>around <00:46:47.820>that <00:46:47.995>is, <00:46:48.170>is <00:46:48.345>a <00:46:48.520>trickier <00:46:48.695>issue, <00:46:48.870>isn't <00:46:49.045>it?

981
00:46:50.985 --> 00:46:52.765
<00:46:50.985>But <00:46:51.185>I, <00:46:51.385>I <00:46:51.585>think <00:46:51.785>it's <00:46:51.985>important <00:46:52.185>as <00:46:52.385>well.

982
00:46:52.765 --> 00:46:54.405
<00:46:52.765>Yeah. <00:46:53.115>So <00:46:53.464>generating <00:46:53.815>color <00:46:54.165>paths,

983
00:46:54.405 --> 00:46:56.965
<00:46:54.405>and <00:46:54.560>as <00:46:54.716>you <00:46:54.871>said, <00:46:55.027>uh, <00:46:55.182>trying <00:46:55.338>to <00:46:55.493>address <00:46:55.649>the <00:46:55.805>contrast

984
00:46:57.685 --> 00:46:59.165
<00:46:57.685>properly <00:46:57.951>was <00:46:58.217>a <00:46:58.484>very <00:46:58.750>big <00:46:59.017>issue.

985
00:46:59.465 --> 00:47:01.165
<00:46:59.465>And <00:46:59.640>we <00:46:59.815>are <00:46:59.990>so <00:47:00.165>lucky, <00:47:00.340>I <00:47:00.515>feel <00:47:00.690>so <00:47:00.865>lucky

986
00:47:01.235 --> 00:47:03.645
<00:47:01.235>that <00:47:01.468>now <00:47:01.701>we <00:47:01.935>have <00:47:02.168>things <00:47:02.401>like <00:47:02.635>O-K-L-C-H,

987
00:47:04.135 --> 00:47:06.965
<00:47:04.135>which <00:47:04.335>makes <00:47:04.535>it <00:47:04.735>trivial <00:47:04.935>to <00:47:05.135>generate <00:47:05.335>color <00:47:05.535>palettes

988
00:47:06.965 --> 00:47:08.085
<00:47:06.965>that <00:47:07.217>are <00:47:07.469>safe <00:47:07.721>to <00:47:07.973>consume.

989
00:47:08.145 --> 00:47:10.885
<00:47:08.145>Uh, <00:47:08.320>and, <00:47:08.495>um, <00:47:08.670>and <00:47:08.845>they <00:47:09.020>have <00:47:09.195>good, <00:47:09.370>good <00:47:09.545>ratio.

990
00:47:10.925 --> 00:47:13.325
<00:47:10.925>I, <00:47:11.100>it's, <00:47:11.275>it's <00:47:11.450>enjoyable <00:47:11.625>to <00:47:11.800>get <00:47:11.975>an <00:47:12.150>existing <00:47:12.325>color,

991
00:47:13.325 --> 00:47:14.925
<00:47:13.325>which <00:47:13.524>you <00:47:13.725>don't <00:47:13.924>know, <00:47:14.125>uh, <00:47:14.325>what <00:47:14.524>it <00:47:14.725>is

992
00:47:14.925 --> 00:47:18.285
<00:47:14.925>and <00:47:15.065>just <00:47:15.205>make <00:47:15.345>it <00:47:15.485>a <00:47:15.625>little <00:47:15.765>bit <00:47:15.905>darker, <00:47:16.045>uh, <00:47:16.185>lighter, <00:47:16.325>uh,

993
00:47:18.825 --> 00:47:19.925
<00:47:18.825>on, <00:47:19.072>on <00:47:19.320>the <00:47:19.567>CSS <00:47:19.815>level.

994
00:47:20.505 --> 00:47:22.005
<00:47:20.505>Um, <00:47:20.775>it's <00:47:21.045>a <00:47:21.315>very <00:47:21.585>powerful <00:47:21.855>concept

995
00:47:22.065 --> 00:47:23.285
<00:47:22.065>and <00:47:22.221>I <00:47:22.378>feel <00:47:22.535>very, <00:47:22.692>we <00:47:22.849>are <00:47:23.006>very <00:47:23.163>lucky.

996
00:47:23.425 --> 00:47:26.805
<00:47:23.425>Uh, <00:47:23.625>otherwise <00:47:23.825>it's, <00:47:24.025>it's, <00:47:24.225>in <00:47:24.425>the <00:47:24.625>past <00:47:24.825>time,

997
00:47:26.805 --> 00:47:28.165
<00:47:26.805>these <00:47:27.049>things <00:47:27.294>are <00:47:27.539>very, <00:47:27.784>very <00:47:28.029>tedious.

998
00:47:29.435 --> 00:47:31.405
<00:47:29.435>Well, <00:47:29.668>it's <00:47:29.901>things <00:47:30.134>we <00:47:30.368>learned <00:47:30.601>from <00:47:30.835>pre-process

999
00:47:31.425 --> 00:47:34.485
<00:47:31.425>and <00:47:31.580>post-process <00:47:31.736>like, <00:47:31.891>like <00:47:32.047>stylus <00:47:32.202>and <00:47:32.358>these <00:47:32.513>kind <00:47:32.669>of <00:47:32.825>things.

1000
00:47:34.485 --> 00:47:36.925
<00:47:34.485>They <00:47:34.640>always <00:47:34.796>had <00:47:34.951>a <00:47:35.107>darten <00:47:35.262>and <00:47:35.418>a <00:47:35.573>lighten <00:47:35.729>mix <00:47:35.885>in,

1001
00:47:36.925 --> 00:47:40.925
<00:47:36.925>and <00:47:37.065>we <00:47:37.205>didn't <00:47:37.345>have <00:47:37.485>that <00:47:37.625>in <00:47:37.765>CSS, <00:47:37.905>but <00:47:38.045>because <00:47:38.185>a <00:47:38.325>pre-processor

1002
00:47:40.925 --> 00:47:42.605
<00:47:40.925>or <00:47:41.205>post-process <00:47:41.485>can <00:47:41.765>do <00:47:42.045>things <00:47:42.325>that,

1003
00:47:42.605 --> 00:47:43.645
<00:47:42.605>that <00:47:42.792>the <00:47:42.979>browser <00:47:43.166>can't <00:47:43.353>do <00:47:43.541>because

1004
00:47:43.645 --> 00:47:44.925
<00:47:43.645>it's <00:47:43.875>not <00:47:44.105>live <00:47:44.336>in <00:47:44.566>the <00:47:44.797>system.

1005
00:47:45.555 --> 00:47:48.365
<00:47:45.555>Like <00:47:45.730>I, <00:47:45.904>I <00:47:46.080>loved <00:47:46.254>when <00:47:46.430>we <00:47:46.605>got, <00:47:46.779>uh, <00:47:46.955>variables

1006
00:47:48.465 --> 00:47:50.685
<00:47:48.465>or <00:47:48.745>like <00:47:49.025>custom <00:47:49.305>properties <00:47:49.585>in <00:47:49.865>CSS

1007
00:47:50.685 --> 00:47:52.245
<00:47:50.685>because <00:47:51.035>they're <00:47:51.384>actually <00:47:51.735>three <00:47:52.085>dimensional.

1008
00:47:52.325 --> 00:47:54.525
<00:47:52.325>I <00:47:52.500>can <00:47:52.674>access <00:47:52.850>them <00:47:53.024>from <00:47:53.200>JavaScript <00:47:53.375>and <00:47:53.549>change <00:47:53.725>them.

1009
00:47:54.965 --> 00:47:56.925
<00:47:54.965>I <00:47:55.120>can <00:47:55.276>write <00:47:55.431>them <00:47:55.587>hard <00:47:55.742>coded <00:47:55.898>in <00:47:56.053>H <00:47:56.209>TTM <00:47:56.365>L

1010
00:47:56.945 --> 00:47:58.725
<00:47:56.945>or <00:47:57.145>I <00:47:57.345>can <00:47:57.545>actually <00:47:57.745>use <00:47:57.945>them <00:47:58.145>in <00:47:58.345>CSS,

1011
00:47:58.725 --> 00:48:01.765
<00:47:58.725>whereas <00:47:58.958>like <00:47:59.191>CSS <00:47:59.424>variables <00:47:59.658>in <00:47:59.891>something <00:48:00.125>like

1012
00:48:01.965 --> 00:48:03.205
<00:48:01.965>stylus, <00:48:02.337>uh, <00:48:02.709>didn't <00:48:03.081>work.

1013
00:48:03.205 --> 00:48:06.045
<00:48:03.205>They <00:48:03.380>just <00:48:03.555>got <00:48:03.730>rendered <00:48:03.904>into <00:48:04.080>something <00:48:04.255>else <00:48:04.430>later <00:48:04.605>on.

1014
00:48:06.745 --> 00:48:08.965
<00:48:06.745>So <00:48:06.920>one <00:48:07.095>question <00:48:07.270>that <00:48:07.444>people <00:48:07.620>have <00:48:07.795>here <00:48:07.970>is <00:48:08.145>like,

1015
00:48:08.965 --> 00:48:10.805
<00:48:08.965>what <00:48:09.198>feature <00:48:09.431>is <00:48:09.665>still <00:48:09.898>missing <00:48:10.131>in <00:48:10.365>CSS?

1016
00:48:14.385 --> 00:48:16.665
<00:48:14.385>Probably <00:48:14.560>I'm <00:48:14.735>not <00:48:14.910>the <00:48:15.085>right <00:48:15.260>person <00:48:15.435>to, <00:48:15.610>to, <00:48:15.785>to,

1017
00:48:17.205 --> 00:48:18.585
<00:48:17.205>to, <00:48:17.619>to <00:48:18.033>answer <00:48:18.447>it.

1018
00:48:18.925 --> 00:48:22.185
<00:48:18.925>Uh, <00:48:19.080>but <00:48:19.236>I, <00:48:19.391>I <00:48:19.547>particularly <00:48:19.702>like, <00:48:19.858>um, <00:48:20.013>for <00:48:20.169>example, <00:48:20.325>CSS,

1019
00:48:22.185 --> 00:48:23.905
<00:48:22.185>who <00:48:22.418>do <00:48:22.651>you <00:48:22.884>need, <00:48:23.118>uh, <00:48:23.351>to <00:48:23.585>grow?

1020
00:48:24.445 --> 00:48:27.145
<00:48:24.445>So <00:48:24.572>one <00:48:24.699>of <00:48:24.826>the <00:48:24.954>things <00:48:25.081>you <00:48:25.208>mentioned <00:48:25.335>for <00:48:25.463>me, <00:48:25.590>I <00:48:25.717>feel <00:48:25.845>like

1021
00:48:28.925 --> 00:48:31.625
<00:48:28.925>at <00:48:29.065>each <00:48:29.205>version <00:48:29.345>there's <00:48:29.485>a <00:48:29.625>CSS <00:48:29.765>spec <00:48:29.905>coming <00:48:30.045>up, <00:48:30.185>coming <00:48:30.325>up,

1022
00:48:31.725 --> 00:48:34.745
<00:48:31.725>and, <00:48:31.958>um, <00:48:32.191>it's <00:48:32.424>hard <00:48:32.658>to <00:48:32.891>keep <00:48:33.125>up.

1023
00:48:35.485 --> 00:48:37.585
<00:48:35.485>And <00:48:35.601>at <00:48:35.718>some <00:48:35.835>point <00:48:35.951>I <00:48:36.068>think <00:48:36.185>this <00:48:36.301>should <00:48:36.418>be <00:48:36.535>a <00:48:36.651>little <00:48:36.768>bit <00:48:36.885>more

1024
00:48:37.585 --> 00:48:40.105
<00:48:37.585>addressable <00:48:37.818>by <00:48:38.051>programmatically <00:48:38.285>rather <00:48:38.518>than, <00:48:38.751>uh, <00:48:38.985>trying

1025
00:48:40.105 --> 00:48:41.385
<00:48:40.105>to <00:48:40.393>memorize <00:48:40.681>a <00:48:40.969>hundred <00:48:41.257>properties

1026
00:48:41.385 --> 00:48:42.545
<00:48:41.385>and <00:48:41.733>harder <00:48:42.081>different <00:48:42.429>features.

1027
00:48:43.165 --> 00:48:45.705
<00:48:43.165>Uh, <00:48:43.445>so <00:48:43.725>CSS <00:48:44.005>Houdini <00:48:44.285>is <00:48:44.565>actually

1028
00:48:45.745 --> 00:48:46.785
<00:48:45.745>a <00:48:45.932>little <00:48:46.119>bit <00:48:46.306>candidate <00:48:46.493>for <00:48:46.681>that.

1029
00:48:46.805 --> 00:48:47.825
<00:48:46.805>It, <00:48:47.034>it <00:48:47.263>gives <00:48:47.493>you <00:48:47.723>to,

1030
00:48:48.365 --> 00:48:50.465
<00:48:48.365>to <00:48:48.645>programmatically <00:48:48.924>generate <00:48:49.205>your <00:48:49.484>own <00:48:49.765>layout,

1031
00:48:50.535 --> 00:48:54.025
<00:48:50.535>even <00:48:50.734>layout <00:48:50.935>painting <00:48:51.134>API, <00:48:51.335>uh, <00:48:51.535>and <00:48:51.734>other <00:48:51.935>things.

1032
00:48:54.125 --> 00:48:57.745
<00:48:54.125>So <00:48:54.300>unfortunately, <00:48:54.475>the, <00:48:54.650>the, <00:48:54.825>the <00:48:55.000>status <00:48:55.175>is <00:48:55.350>somewhat <00:48:55.525>frozen.

1033
00:48:58.485 --> 00:49:01.105
<00:48:58.485>Uh, <00:48:58.718>maybe <00:48:58.951>a <00:48:59.185>small <00:48:59.418>thing <00:48:59.651>I'm <00:48:59.885>expecting.

1034
00:49:01.165 --> 00:49:02.865
<00:49:01.165>I'm, <00:49:01.365>I'm, <00:49:01.565>I'm <00:49:01.765>really <00:49:01.965>expecting <00:49:02.165>this <00:49:02.365>to <00:49:02.565>come.

1035
00:49:03.005 --> 00:49:06.145
<00:49:03.005>And <00:49:03.205>in <00:49:03.405>CSS <00:49:03.605>level <00:49:03.805>five, <00:49:04.005>uh, <00:49:04.205>for <00:49:04.405>example,

1036
00:49:06.505 --> 00:49:09.065
<00:49:06.505>whenever <00:49:06.645>you <00:49:06.785>use <00:49:06.925>media <00:49:07.065>queries, <00:49:07.205>well, <00:49:07.345>you <00:49:07.485>have <00:49:07.625>to <00:49:07.765>say, <00:49:07.905>well,

1037
00:49:09.065 --> 00:49:12.895
<00:49:09.065>this <00:49:09.192>is, <00:49:09.319>um, <00:49:09.446>unless <00:49:09.574>you <00:49:09.701>use <00:49:09.828>plain <00:49:09.955>CSS, <00:49:10.083>you <00:49:10.210>have, <00:49:10.337>this <00:49:10.465>has

1038
00:49:12.895 --> 00:49:14.015
<00:49:12.895>to <00:49:13.063>be, <00:49:13.231>uh, <00:49:13.399>you <00:49:13.567>give <00:49:13.734>a <00:49:13.903>range.

1039
00:49:14.015 --> 00:49:16.655
<00:49:14.015>This <00:49:14.214>should <00:49:14.415>be <00:49:14.615>less, <00:49:14.815>smaller <00:49:15.015>than <00:49:15.214>1,200, <00:49:15.415>uh,

1040
00:49:16.835 --> 00:49:18.215
<00:49:16.835>pixels <00:49:17.083>and <00:49:17.331>this <00:49:17.580>kind <00:49:17.828>of <00:49:18.077>thing.

1041
00:49:18.595 --> 00:49:22.335
<00:49:18.595>And <00:49:18.722>in <00:49:18.849>CSS <00:49:18.976>level <00:49:19.104>five, <00:49:19.231>which <00:49:19.358>is <00:49:19.485>supported <00:49:19.613>by <00:49:19.740>no <00:49:19.867>browser, <00:49:19.995>um,

1042
00:49:22.795 --> 00:49:25.975
<00:49:22.795>we <00:49:22.950>can <00:49:23.106>actually <00:49:23.261>pretty <00:49:23.417>much <00:49:23.572>write <00:49:23.728>these <00:49:23.883>things, <00:49:24.039>uh, <00:49:24.195>these,

1043
00:49:25.985 --> 00:49:27.375
<00:49:25.985>these <00:49:26.610>mediad <00:49:27.236>variables,

1044
00:49:27.375 --> 00:49:31.215
<00:49:27.375>and <00:49:27.502>then <00:49:27.629>you <00:49:27.756>can <00:49:27.884>reuse <00:49:28.011>it <00:49:28.138>other <00:49:28.265>than <00:49:28.393>every <00:49:28.520>time <00:49:28.647>typing, <00:49:28.775>uh,

1045
00:49:31.555 --> 00:49:33.015
<00:49:31.555>1200, <00:49:32.212>et <00:49:32.868>cetera,

1046
00:49:33.155 --> 00:49:35.175
<00:49:33.155>unless <00:49:33.310>you <00:49:33.466>use <00:49:33.621>a <00:49:33.777>prep <00:49:33.932>processor, <00:49:34.088>it's <00:49:34.243>a <00:49:34.399>different <00:49:34.555>story.

1047
00:49:35.515 --> 00:49:37.415
<00:49:35.515>I'm <00:49:35.690>not <00:49:35.865>much <00:49:36.040>fan <00:49:36.214>of <00:49:36.390>prep <00:49:36.565>pro <00:49:36.740>prep <00:49:36.915>processors

1048
00:49:37.415 --> 00:49:38.935
<00:49:37.415>because <00:49:37.643>they <00:49:37.871>somewhat <00:49:38.099>get <00:49:38.327>in <00:49:38.555>the <00:49:38.783>way.

1049
00:49:39.515 --> 00:49:40.615
<00:49:39.515>Uh, <00:49:39.762>I <00:49:40.009>feel <00:49:40.257>like <00:49:40.504>that,

1050
00:49:40.875 --> 00:49:42.895
<00:49:40.875>and <00:49:41.050>I <00:49:41.225>like <00:49:41.400>to <00:49:41.575>change <00:49:41.750>things <00:49:41.925>directly <00:49:42.100>from <00:49:42.275>the

1051
00:49:42.915 --> 00:49:46.655
<00:49:42.915>inside <00:49:43.148>the <00:49:43.381>browser, <00:49:43.615>uh, <00:49:43.848>uh, <00:49:44.081>while <00:49:44.315>tuning.

1052
00:49:46.755 --> 00:49:47.935
<00:49:46.755>And <00:49:46.967>if <00:49:47.179>you <00:49:47.392>use <00:49:47.604>a <00:49:47.817>pre-processor,

1053
00:49:47.935 --> 00:49:49.215
<00:49:47.935>then <00:49:48.223>you <00:49:48.511>have <00:49:48.799>this <00:49:49.087>discrepancy,

1054
00:49:49.355 --> 00:49:50.575
<00:49:49.355>uh, <00:49:49.538>you <00:49:49.721>need <00:49:49.904>to <00:49:50.087>sync <00:49:50.270>it <00:49:50.453>back.

1055
00:49:50.575 --> 00:49:54.175
<00:49:50.575>And <00:49:50.750>for <00:49:50.924>sometimes <00:49:51.100>source <00:49:51.274>maps <00:49:51.450>help, <00:49:51.625>but, <00:49:51.799>Hmm. <00:49:51.975>Yeah.

1056
00:49:54.885 --> 00:49:56.665
<00:49:54.885>Oh <00:49:55.085>God, <00:49:55.285>there's <00:49:55.485>no <00:49:55.685>standard <00:49:55.885>for <00:49:56.085>source <00:49:56.285>maps.

1057
00:49:56.665 --> 00:49:59.065
<00:49:56.665>So <00:49:56.792>that <00:49:56.919>was <00:49:57.046>a <00:49:57.174>total <00:49:57.301>pain <00:49:57.428>to <00:49:57.555>make <00:49:57.683>that <00:49:57.810>happen <00:49:57.937>as <00:49:58.065>well.

1058
00:49:59.685 --> 00:50:02.785
<00:49:59.685>Uh, <00:49:59.825>well, <00:49:59.965>an <00:50:00.105>interesting <00:50:00.245>thing <00:50:00.384>is <00:50:00.525>that <00:50:00.665>with <00:50:00.805>calc <00:50:00.945>in, <00:50:01.085>uh,

1059
00:50:02.845 --> 00:50:05.145
<00:50:02.845>in <00:50:03.044>CSS, <00:50:03.245>you <00:50:03.444>could <00:50:03.645>do <00:50:03.845>like <00:50:04.044>a <00:50:04.245>clamping

1060
00:50:05.145 --> 00:50:07.505
<00:50:05.145>or <00:50:05.272>with <00:50:05.399>the <00:50:05.526>clamping <00:50:05.654>stuff <00:50:05.781>as <00:50:05.908>well, <00:50:06.035>where <00:50:06.163>you <00:50:06.290>can <00:50:06.417>say <00:50:06.545>like,

1061
00:50:07.735 --> 00:50:09.465
<00:50:07.735>okay, <00:50:07.910>I <00:50:08.085>want <00:50:08.260>to <00:50:08.435>have, <00:50:08.610>uh, <00:50:08.785>uh, <00:50:08.960>I <00:50:09.135>want

1062
00:50:09.465 --> 00:50:11.865
<00:50:09.465>to <00:50:09.640>have <00:50:09.815>fluid <00:50:09.990>typography, <00:50:10.165>but <00:50:10.340>I <00:50:10.515>wanna <00:50:10.690>set <00:50:10.865>boundaries.

1063
00:50:12.205 --> 00:50:13.785
<00:50:12.205>And <00:50:12.380>I <00:50:12.555>think <00:50:12.730>that <00:50:12.904>makes <00:50:13.080>a <00:50:13.255>lot <00:50:13.430>of <00:50:13.605>sense

1064
00:50:13.805 --> 00:50:14.905
<00:50:13.805>to <00:50:13.970>have <00:50:14.134>that <00:50:14.300>in <00:50:14.465>there <00:50:14.630>as <00:50:14.795>well.

1065
00:50:15.125 --> 00:50:18.065
<00:50:15.125>And <00:50:15.300>there's <00:50:15.475>now <00:50:15.650>trigonometry <00:50:15.825>functions <00:50:16.000>in <00:50:16.175>there <00:50:16.350>as <00:50:16.525>well,

1066
00:50:18.095 --> 00:50:20.305
<00:50:18.095>like <00:50:18.270>sign <00:50:18.444>and <00:50:18.620>cosign <00:50:18.794>and <00:50:18.970>these <00:50:19.145>kind <00:50:19.319>of <00:50:19.495>things.

1067
00:50:21.025 --> 00:50:23.505
<00:50:21.025>I <00:50:21.180>wonder <00:50:21.336>though, <00:50:21.491>when <00:50:21.647>you <00:50:21.802>said <00:50:21.958>like, <00:50:22.113>uh, <00:50:22.269>you <00:50:22.425>Houdini,

1068
00:50:23.525 --> 00:50:25.185
<00:50:23.525>did <00:50:23.725>you <00:50:23.925>get <00:50:24.125>more <00:50:24.325>access <00:50:24.525>to <00:50:24.725>the <00:50:24.925>render

1069
00:50:25.205 --> 00:50:26.745
<00:50:25.205>of <00:50:25.551>the <00:50:25.898>browser <00:50:26.244>directly <00:50:26.591>there?

1070
00:50:27.685 --> 00:50:31.565
<00:50:27.685>I, <00:50:27.801>I <00:50:27.918>always <00:50:28.035>wondered <00:50:28.151>if <00:50:28.268>CSS <00:50:28.384>was <00:50:28.501>not <00:50:28.618>such <00:50:28.735>a <00:50:28.851>success <00:50:28.968>in <00:50:29.085>the

1071
00:50:31.565 --> 00:50:33.885
<00:50:31.565>design <00:50:31.798>world <00:50:32.031>because <00:50:32.265>it <00:50:32.498>was <00:50:32.731>not <00:50:32.965>programming.

1072
00:50:34.765 --> 00:50:37.585
<00:50:34.765>You <00:50:34.881>know, <00:50:34.998>like <00:50:35.115>I, <00:50:35.231>I <00:50:35.348>like <00:50:35.464>the <00:50:35.581>fact <00:50:35.698>that <00:50:35.815>you <00:50:35.931>can <00:50:36.048>rely <00:50:36.165>on,

1073
00:50:37.745 --> 00:50:38.905
<00:50:37.745>in-built <00:50:38.789>properties

1074
00:50:38.965 --> 00:50:41.625
<00:50:38.965>and <00:50:39.165>in-built <00:50:39.365>functionality, <00:50:39.565>rather <00:50:39.765>than <00:50:39.965>having <00:50:40.165>to <00:50:40.365>understand

1075
00:50:41.685 --> 00:50:44.225
<00:50:41.685>how <00:50:41.840>a <00:50:41.996>renderer <00:50:42.151>works <00:50:42.307>and <00:50:42.462>how <00:50:42.618>a <00:50:42.773>browser <00:50:42.929>does <00:50:43.085>something.

1076
00:50:44.905 --> 00:50:47.705
<00:50:44.905>I <00:50:45.060>think <00:50:45.216>that <00:50:45.371>there <00:50:45.527>is <00:50:45.682>a <00:50:45.838>huge <00:50:45.993>barrier <00:50:46.149>to <00:50:46.305>understand

1077
00:50:48.135 --> 00:50:49.185
<00:50:48.135>what <00:50:48.450>a <00:50:48.765>browser <00:50:49.080>does.

1078
00:50:49.325 --> 00:50:52.785
<00:50:49.325>And <00:50:49.452>I <00:50:49.579>don't <00:50:49.706>think <00:50:49.834>we <00:50:49.961>should, <00:50:50.088>I <00:50:50.215>don't <00:50:50.343>know <00:50:50.470>if <00:50:50.597>you <00:50:50.725>agree,

1079
00:50:52.925 --> 00:50:55.745
<00:50:52.925>but <00:50:53.080>I <00:50:53.236>don't <00:50:53.391>think <00:50:53.547>we <00:50:53.702>should <00:50:53.858>actually, <00:50:54.013>uh, <00:50:54.169>expect <00:50:54.325>developers

1080
00:50:55.925 --> 00:50:58.785
<00:50:55.925>to <00:50:56.065>know <00:50:56.205>that <00:50:56.345>just <00:50:56.485>to <00:50:56.625>build <00:50:56.765>a <00:50:56.905>product <00:50:57.045>on <00:50:57.185>the <00:50:57.325>web.

1081
00:50:59.295 --> 00:51:00.675
<00:50:59.295>It <00:50:59.543>feels <00:50:59.791>like <00:51:00.040>too <00:51:00.288>much <00:51:00.537>power

1082
00:51:00.735 --> 00:51:03.395
<00:51:00.735>and <00:51:00.968>too <00:51:01.201>much <00:51:01.435>low <00:51:01.668>level <00:51:01.901>functionality, <00:51:02.135>uh,

1083
00:51:03.395 --> 00:51:04.635
<00:51:03.395>That <00:51:03.618>what <00:51:03.841>you <00:51:04.064>say <00:51:04.287>is <00:51:04.511>true.

1084
00:51:04.975 --> 00:51:08.515
<00:51:04.975>Uh, <00:51:05.130>I <00:51:05.286>think <00:51:05.441>from <00:51:05.597>a <00:51:05.752>designer <00:51:05.908>perspective, <00:51:06.063>uh, <00:51:06.219>well, <00:51:06.375>trying

1085
00:51:08.515 --> 00:51:11.075
<00:51:08.515>to <00:51:08.714>encapsulate <00:51:08.915>into <00:51:09.115>programming <00:51:09.315>will <00:51:09.515>certainly <00:51:09.714>isolate <00:51:09.915>them.

1086
00:51:11.255 --> 00:51:13.835
<00:51:11.255>Uh, <00:51:11.455>I <00:51:11.655>agree <00:51:11.855>with <00:51:12.055>your <00:51:12.255>sentiment <00:51:12.455>as <00:51:12.655>well.

1087
00:51:14.615 --> 00:51:16.395
<00:51:14.615>On <00:51:14.754>the <00:51:14.895>other <00:51:15.035>hand, <00:51:15.174>I'm <00:51:15.314>also <00:51:15.455>a <00:51:15.595>little <00:51:15.734>bit <00:51:15.875>torn <00:51:16.015>up.

1088
00:51:16.495 --> 00:51:18.515
<00:51:16.495>Uh, <00:51:16.694>there's <00:51:16.895>so <00:51:17.095>much <00:51:17.295>stuff <00:51:17.495>is <00:51:17.694>coming <00:51:17.895>up

1089
00:51:18.775 --> 00:51:21.835
<00:51:18.775>and <00:51:18.902>I <00:51:19.029>felt <00:51:19.156>a <00:51:19.284>little <00:51:19.411>bit <00:51:19.538>more <00:51:19.665>hard <00:51:19.793>to <00:51:19.920>keep <00:51:20.047>up, <00:51:20.175>uh,

1090
00:51:22.345 --> 00:51:23.395
<00:51:22.345>with <00:51:22.660>the <00:51:22.975>new <00:51:23.290>properties.

1091
00:51:23.895 --> 00:51:25.635
<00:51:23.895>Uh, <00:51:24.095>so <00:51:24.295>I <00:51:24.495>don't <00:51:24.695>know <00:51:24.895>the <00:51:25.095>right <00:51:25.295>solution.

1092
00:51:25.635 --> 00:51:27.715
<00:51:25.635>Perhaps <00:51:25.810>my <00:51:25.985>mind <00:51:26.160>works <00:51:26.335>as <00:51:26.510>a <00:51:26.685>i <00:51:26.860>as <00:51:27.035>I'm

1093
00:51:27.715 --> 00:51:29.835
<00:51:27.715>as <00:51:27.995>a <00:51:28.275>developer <00:51:28.555>pro <00:51:28.835>for <00:51:29.115>profession.

1094
00:51:29.895 --> 00:51:32.675
<00:51:29.895>So <00:51:30.095>my <00:51:30.295>mind <00:51:30.495>works <00:51:30.695>still <00:51:30.895>keeps <00:51:31.095>this, <00:51:31.295>uh,

1095
00:51:34.035 --> 00:51:35.365
<00:51:34.035>developer <00:51:34.633>caman <00:51:35.232>inside.

1096
00:51:35.445 --> 00:51:36.765
<00:51:35.445>I <00:51:35.682>want <00:51:35.920>everything <00:51:36.157>to <00:51:36.395>be <00:51:36.633>programmable.

1097
00:51:37.185 --> 00:51:39.285
<00:51:37.185>But <00:51:37.384>what <00:51:37.585>you <00:51:37.785>say <00:51:37.985>is, <00:51:38.185>uh, <00:51:38.384>makes <00:51:38.585>sense.

1098
00:51:39.525 --> 00:51:42.285
<00:51:39.525>CSS, <00:51:39.680>uh, <00:51:39.836>by <00:51:39.991>itself <00:51:40.147>gives <00:51:40.302>a <00:51:40.458>little <00:51:40.613>bit <00:51:40.769>more, <00:51:40.925>um,

1099
00:51:42.755 --> 00:51:44.045
<00:51:42.755>it's <00:51:43.045>a <00:51:43.335>tech <00:51:43.625>declarative <00:51:43.916>syntax

1100
00:51:44.225 --> 00:51:47.285
<00:51:44.225>and <00:51:44.400>it's <00:51:44.575>far, <00:51:44.750>far <00:51:44.924>more <00:51:45.100>designer <00:51:45.275>friendly <00:51:45.450>than, <00:51:45.625>uh,

1101
00:51:48.235 --> 00:51:50.285
<00:51:48.235>than <00:51:48.515>developed <00:51:48.795>being <00:51:49.075>a <00:51:49.355>programmable <00:51:49.635>thing.

1102
00:51:50.955 --> 00:51:53.325
<00:51:50.955>Well, <00:51:51.110>it, <00:51:51.266>it <00:51:51.421>goes <00:51:51.577>back <00:51:51.732>to <00:51:51.888>the <00:51:52.043>open <00:51:52.199>web <00:51:52.355>manifesto.

1103
00:51:53.325 --> 00:51:56.365
<00:51:53.325>We <00:51:53.464>basically <00:51:53.605>said, <00:51:53.745>we, <00:51:53.884>we <00:51:54.024>don't <00:51:54.165>want <00:51:54.305>magic <00:51:54.444>on <00:51:54.585>the <00:51:54.725>web.

1104
00:51:56.465 --> 00:51:59.245
<00:51:56.465>We <00:51:56.620>just <00:51:56.776>basically <00:51:56.931>want <00:51:57.087>control <00:51:57.242>over <00:51:57.398>the <00:51:57.553>things <00:51:57.709>as <00:51:57.865>well.

1105
00:51:59.275 --> 00:52:02.365
<00:51:59.275>Like, <00:51:59.415>why <00:51:59.555>is <00:51:59.695>a <00:51:59.835>video <00:51:59.975>player <00:52:00.115>displayed <00:52:00.255>the <00:52:00.395>way <00:52:00.535>it <00:52:00.675>is?

1106
00:52:02.365 --> 00:52:03.565
<00:52:02.365>Then <00:52:02.634>we <00:52:02.904>got <00:52:03.175>shadow <00:52:03.445>dom

1107
00:52:03.565 --> 00:52:05.245
<00:52:03.565>and <00:52:03.720>we <00:52:03.876>can <00:52:04.031>now <00:52:04.187>access <00:52:04.342>all <00:52:04.498>the <00:52:04.653>bits <00:52:04.809>of <00:52:04.965>it

1108
00:52:05.245 --> 00:52:07.525
<00:52:05.245>and <00:52:05.444>can <00:52:05.645>override <00:52:05.845>them <00:52:06.045>and <00:52:06.245>design <00:52:06.444>them <00:52:06.645>accordingly.

1109
00:52:07.985 --> 00:52:11.005
<00:52:07.985>And <00:52:08.125>what <00:52:08.265>I <00:52:08.405>love <00:52:08.545>two <00:52:08.685>bits <00:52:08.825>about <00:52:08.965>these <00:52:09.105>new <00:52:09.245>features <00:52:09.385>is

1110
00:52:11.005 --> 00:52:14.885
<00:52:11.005>that <00:52:11.132>if <00:52:11.259>you <00:52:11.386>look <00:52:11.514>at <00:52:11.641>the <00:52:11.768>source <00:52:11.895>code <00:52:12.023>of <00:52:12.150>the <00:52:12.277>developer <00:52:12.405>tools

1111
00:52:15.025 --> 00:52:17.125
<00:52:15.025>and <00:52:15.225>the <00:52:15.425>browser <00:52:15.625>itself, <00:52:15.825>which <00:52:16.025>you <00:52:16.225>can <00:52:16.425>do,

1112
00:52:17.585 --> 00:52:19.525
<00:52:17.585>you <00:52:17.785>can <00:52:17.985>open <00:52:18.185>the <00:52:18.385>F <00:52:18.585>12 <00:52:18.785>developer <00:52:18.985>tools,

1113
00:52:19.545 --> 00:52:20.925
<00:52:19.545>you <00:52:19.752>can <00:52:19.959>undo <00:52:20.166>them <00:52:20.373>to <00:52:20.580>a <00:52:20.787>window.

1114
00:52:21.385 --> 00:52:23.125
<00:52:21.385>You <00:52:21.618>can <00:52:21.851>open <00:52:22.085>the <00:52:22.318>developer <00:52:22.551>tools <00:52:22.785>again,

1115
00:52:23.125 --> 00:52:25.005
<00:52:23.125>and <00:52:23.325>then <00:52:23.525>you <00:52:23.725>can <00:52:23.925>actually <00:52:24.125>inspect <00:52:24.325>the <00:52:24.525>tools

1116
00:52:25.015 --> 00:52:26.445
<00:52:25.015>themselves <00:52:25.444>in <00:52:25.873>the <00:52:26.302>tools.

1117
00:52:27.025 --> 00:52:29.845
<00:52:27.025>And <00:52:27.152>there <00:52:27.279>you <00:52:27.406>will <00:52:27.534>find <00:52:27.661>that <00:52:27.788>a <00:52:27.915>lot <00:52:28.043>of <00:52:28.170>the <00:52:28.297>really, <00:52:28.425>uh,

1118
00:52:30.165 --> 00:52:31.565
<00:52:30.165>bleeding <00:52:30.417>edge <00:52:30.669>stuff <00:52:30.921>that <00:52:31.173>will <00:52:31.425>come

1119
00:52:31.565 --> 00:52:34.725
<00:52:31.565>to <00:52:31.705>the <00:52:31.845>web <00:52:31.985>later <00:52:32.125>on <00:52:32.265>is <00:52:32.405>already <00:52:32.545>used <00:52:32.685>by <00:52:32.825>browser <00:52:32.965>makers.

1120
00:52:34.725 --> 00:52:38.045
<00:52:34.725>Now, <00:52:34.865>that's <00:52:35.005>what, <00:52:35.145>that's <00:52:35.285>what <00:52:35.424>I <00:52:35.565>love <00:52:35.705>about <00:52:35.845>this, <00:52:35.985>that <00:52:36.125>like,

1121
00:52:38.045 --> 00:52:39.645
<00:52:38.045>these <00:52:38.245>features <00:52:38.445>don't <00:52:38.645>come <00:52:38.845>out <00:52:39.045>of <00:52:39.245>the <00:52:39.445>blue

1122
00:52:39.645 --> 00:52:40.845
<00:52:39.645>because <00:52:40.005>somebody <00:52:40.365>liked <00:52:40.725>them,

1123
00:52:40.905 --> 00:52:44.485
<00:52:40.905>but <00:52:41.060>we <00:52:41.216>actually, <00:52:41.371>we <00:52:41.527>test <00:52:41.682>them <00:52:41.838>in <00:52:41.993>the <00:52:42.149>browsers <00:52:42.305>themselves

1124
00:52:44.545 --> 00:52:45.925
<00:52:44.545>and <00:52:44.793>also <00:52:45.041>a <00:52:45.290>visual <00:52:45.538>studio <00:52:45.787>code.

1125
00:52:45.925 --> 00:52:48.245
<00:52:45.925>If <00:52:46.052>you <00:52:46.179>look <00:52:46.306>at <00:52:46.434>that <00:52:46.561>source <00:52:46.688>code <00:52:46.815>of <00:52:46.943>the, <00:52:47.070>of <00:52:47.197>that <00:52:47.325>interface,

1126
00:52:48.595 --> 00:52:51.045
<00:52:48.595>then <00:52:48.750>we <00:52:48.906>can <00:52:49.061>actually <00:52:49.217>see <00:52:49.372>the <00:52:49.528>things <00:52:49.683>already <00:52:49.839>in <00:52:49.995>production

1127
00:52:51.045 --> 00:52:52.325
<00:52:51.045>and <00:52:51.275>ready <00:52:51.505>for <00:52:51.736>you <00:52:51.966>to <00:52:52.196>use

1128
00:52:52.425 --> 00:52:55.005
<00:52:52.425>by <00:52:52.580>the <00:52:52.736>time <00:52:52.891>they <00:52:53.047>actually <00:52:53.202>get <00:52:53.358>supported <00:52:53.513>by <00:52:53.669>all <00:52:53.825>browsers.

1129
00:52:56.635 --> 00:52:58.835
<00:52:56.635>I'm <00:52:56.790>a <00:52:56.946>big <00:52:57.101>fan <00:52:57.257>of <00:52:57.412>web <00:52:57.568>components <00:52:57.723>and <00:52:57.879>shadow <00:52:58.035>room.

1130
00:52:58.895 --> 00:53:01.315
<00:52:58.895>Uh, <00:52:59.070>so <00:52:59.245>the <00:52:59.420>browsers <00:52:59.595>allow <00:52:59.770>you <00:52:59.945>to <00:53:00.120>look <00:53:00.295>inside.

1131
00:53:01.515 --> 00:53:05.075
<00:53:01.515>I <00:53:01.654>think, <00:53:01.795>uh, <00:53:01.935>perhaps <00:53:02.075>next <00:53:02.214>year, <00:53:02.355>uh, <00:53:02.495>there <00:53:02.634>will <00:53:02.775>be <00:53:02.915>a,

1132
00:53:05.555 --> 00:53:08.115
<00:53:05.555>a <00:53:05.710>first <00:53:05.866>time, <00:53:06.021>uh, <00:53:06.177>a <00:53:06.332>web <00:53:06.488>component <00:53:06.643>will <00:53:06.799>be <00:53:06.955>shipped

1133
00:53:08.115 --> 00:53:09.755
<00:53:08.115>by <00:53:08.348>browser <00:53:08.581>called, <00:53:08.814>I <00:53:09.048>think <00:53:09.281>select <00:53:09.515>list

1134
00:53:09.755 --> 00:53:12.795
<00:53:09.755>or <00:53:09.930>select <00:53:10.105>menu, <00:53:10.280>where <00:53:10.455>it's <00:53:10.630>a <00:53:10.805>fully <00:53:10.980>customizable, <00:53:11.155>uh,

1135
00:53:13.555 --> 00:53:16.355
<00:53:13.555>dropdown <00:53:13.754>list, <00:53:13.955>which <00:53:14.154>is <00:53:14.355>very <00:53:14.555>difficult <00:53:14.754>right <00:53:14.955>now

1136
00:53:16.375 --> 00:53:17.395
<00:53:16.375>to <00:53:16.834>customize <00:53:17.293>it.

1137
00:53:17.975 --> 00:53:20.795
<00:53:17.975>Uh, <00:53:18.115>yeah, <00:53:18.255>I <00:53:18.395>haven't <00:53:18.535>seen <00:53:18.674>the <00:53:18.815>question <00:53:18.955>by <00:53:19.095>the <00:53:19.235>way. <00:53:19.375>Uh,

1138
00:53:20.985 --> 00:53:24.195
<00:53:20.985>Yeah, <00:53:21.112>yeah, <00:53:21.239>it's, <00:53:21.366>uh, <00:53:21.494>I'm <00:53:21.621>just <00:53:21.748>wanted <00:53:21.875>to <00:53:22.003>come <00:53:22.130>come <00:53:22.257>back <00:53:22.385>to

1139
00:53:24.195 --> 00:53:25.245
<00:53:24.195>that <00:53:24.667>because, <00:53:25.140>uh,

1140
00:53:25.245 --> 00:53:28.165
<00:53:25.245>people <00:53:25.444>wanted <00:53:25.645>basically <00:53:25.845>under <00:53:26.045>sections <00:53:26.245>in <00:53:26.444>select <00:53:26.645>boxes,

1141
00:53:28.235 --> 00:53:30.125
<00:53:28.235>they <00:53:28.585>wanted <00:53:28.935>multi-level <00:53:29.285>select <00:53:29.635>boxes,

1142
00:53:30.175 --> 00:53:32.805
<00:53:30.175>which <00:53:30.330>are <00:53:30.486>available <00:53:30.641>in <00:53:30.797>other <00:53:30.952>platforms, <00:53:31.108>but <00:53:31.263>not <00:53:31.419>the <00:53:31.575>web.

1143
00:53:33.145 --> 00:53:35.525
<00:53:33.145>So <00:53:33.320>that's <00:53:33.495>why <00:53:33.670>this <00:53:33.845>new <00:53:34.020>component <00:53:34.195>will <00:53:34.370>come <00:53:34.545>out.

1144
00:53:35.545 --> 00:53:37.965
<00:53:35.545>And <00:53:35.745>actually, <00:53:35.945>because <00:53:36.145>people <00:53:36.345>put <00:53:36.545>hrs <00:53:36.745>in <00:53:36.945>there

1145
00:53:37.965 --> 00:53:41.965
<00:53:37.965>and <00:53:38.072>try <00:53:38.180>to <00:53:38.288>make <00:53:38.395>it <00:53:38.503>work, <00:53:38.611>and <00:53:38.718>the, <00:53:38.826>the, <00:53:38.934>the <00:53:39.041>HT <00:53:39.149>L <00:53:39.257>par <00:53:39.365>said,

1146
00:53:41.985 --> 00:53:43.245
<00:53:41.985>no, <00:53:42.211>don't <00:53:42.438>want <00:53:42.665>to <00:53:42.892>have <00:53:43.118>that.

1147
00:53:43.755 --> 00:53:46.285
<00:53:43.755>It's <00:53:43.895>kind <00:53:44.035>of <00:53:44.175>tricky. <00:53:44.315>So <00:53:44.455>one <00:53:44.595>question <00:53:44.735>from <00:53:44.875>the <00:53:45.015>audience <00:53:45.155>was

1148
00:53:46.285 --> 00:53:48.685
<00:53:46.285>like, <00:53:46.460>how <00:53:46.634>could <00:53:46.810>designers <00:53:46.984>make <00:53:47.160>sure <00:53:47.335>that <00:53:47.509>use <00:53:47.685>of,

1149
00:53:48.705 --> 00:53:51.605
<00:53:48.705>so <00:53:48.938>CSS <00:53:49.171>logical <00:53:49.404>properties <00:53:49.638>meets <00:53:49.871>accessibility <00:53:50.105>standards

1150
00:53:51.605 --> 00:53:53.725
<00:53:51.605>and <00:53:51.838>is <00:53:52.071>inclusive <00:53:52.305>for <00:53:52.538>users <00:53:52.771>with <00:53:53.005>disabilities?

1151
00:53:54.285 --> 00:53:55.765
<00:53:54.285>I <00:53:54.451>guess <00:53:54.618>that <00:53:54.784>goes <00:53:54.951>back <00:53:55.117>to <00:53:55.283>what <00:53:55.450>I <00:53:55.616>said,

1152
00:53:55.765 --> 00:53:59.125
<00:53:55.765>like <00:53:55.904>if <00:53:56.045>you <00:53:56.185>use <00:53:56.325>CSS <00:53:56.464>clamp, <00:53:56.605>uh, <00:53:56.745>sometimes <00:53:56.884>you <00:53:57.025>have <00:53:57.165>users

1153
00:53:59.155 --> 00:54:00.765
<00:53:59.155>that <00:53:59.621>need <00:54:00.088>bigger <00:54:00.555>fonts,

1154
00:54:00.825 --> 00:54:04.565
<00:54:00.825>but <00:54:00.964>you <00:54:01.105>as <00:54:01.245>a <00:54:01.384>designer <00:54:01.524>made <00:54:01.665>a <00:54:01.805>decision <00:54:01.944>to <00:54:02.085>say <00:54:02.225>like,

1155
00:54:04.585 --> 00:54:05.885
<00:54:04.585>it <00:54:04.819>shouldn't <00:54:05.053>get <00:54:05.287>bigger <00:54:05.521>than <00:54:05.755>that.

1156
00:54:06.385 --> 00:54:09.125
<00:54:06.385>How <00:54:06.540>do <00:54:06.696>you <00:54:06.851>see <00:54:07.007>that <00:54:07.162>in <00:54:07.318>between <00:54:07.473>that, <00:54:07.629>that <00:54:07.785>tension?

1157
00:54:11.525 --> 00:54:13.975
<00:54:11.525>Well, <00:54:11.805>uh, <00:54:12.085>in <00:54:12.365>particular, <00:54:12.645>uh, <00:54:12.925>I,

1158
00:54:14.135 --> 00:54:15.535
<00:54:14.135>I <00:54:14.387>couldn't <00:54:14.639>make <00:54:14.891>a <00:54:15.143>direct <00:54:15.395>connection

1159
00:54:15.535 --> 00:54:18.015
<00:54:15.535>with <00:54:15.815>the <00:54:16.095>logical <00:54:16.375>properties <00:54:16.654>with <00:54:16.935>disabilities.

1160
00:54:18.015 --> 00:54:19.175
<00:54:18.015>Yeah. <00:54:18.189>But <00:54:18.363>it's <00:54:18.537>a <00:54:18.711>little <00:54:18.885>bit <00:54:19.059>more,

1161
00:54:20.195 --> 00:54:21.975
<00:54:20.195>so <00:54:20.475>it's <00:54:20.755>still <00:54:21.035>an <00:54:21.315>inclusive <00:54:21.595>thing,

1162
00:54:22.035 --> 00:54:25.295
<00:54:22.035>but <00:54:22.234>inclusiveness <00:54:22.435>isn't <00:54:22.634>just <00:54:22.835>for <00:54:23.035>re <00:54:23.234>restricted <00:54:23.435>disabilities,

1163
00:54:25.295 --> 00:54:27.015
<00:54:25.295>but <00:54:25.495>it's <00:54:25.695>a <00:54:25.895>different <00:54:26.095>part <00:54:26.295>of <00:54:26.495>the <00:54:26.695>region.

1164
00:54:27.555 --> 00:54:30.415
<00:54:27.555>Um, <00:54:27.754>Mm-Hmm, <00:54:27.955>um, <00:54:28.154>of <00:54:28.355>the <00:54:28.555>world, <00:54:28.754>different <00:54:28.955>part

1165
00:54:30.415 --> 00:54:31.895
<00:54:30.415>of <00:54:30.605>the <00:54:30.795>world <00:54:30.985>using <00:54:31.176>different <00:54:31.366>kind <00:54:31.556>of <00:54:31.747>things.

1166
00:54:32.355 --> 00:54:34.335
<00:54:32.355>So <00:54:32.510>basically <00:54:32.666>you <00:54:32.821>are <00:54:32.977>saying <00:54:33.132>that, <00:54:33.288>well, <00:54:33.443>I'm <00:54:33.599>not <00:54:33.755>going

1167
00:54:34.335 --> 00:54:35.335
<00:54:34.335>to <00:54:34.635>use <00:54:34.935>logical <00:54:35.235>properties.

1168
00:54:35.715 --> 00:54:37.095
<00:54:35.715>I'm <00:54:35.892>going <00:54:36.069>to <00:54:36.247>stick <00:54:36.424>to <00:54:36.602>left <00:54:36.779>to <00:54:36.957>right.

1169
00:54:37.605 --> 00:54:39.335
<00:54:37.605>Then <00:54:37.885>basically <00:54:38.165>you're <00:54:38.445>saying <00:54:38.725>that, <00:54:39.005>well,

1170
00:54:39.895 --> 00:54:42.215
<00:54:39.895>I <00:54:40.095>don't <00:54:40.295>care <00:54:40.495>about <00:54:40.695>400 <00:54:40.895>million <00:54:41.095>Arabic <00:54:41.295>speakers.

1171
00:54:43.085 --> 00:54:44.935
<00:54:43.085>It's, <00:54:43.285>uh, <00:54:43.485>I <00:54:43.685>don't <00:54:43.885>have <00:54:44.085>to <00:54:44.285>be <00:54:44.485>nice.

1172
00:54:45.075 --> 00:54:47.095
<00:54:45.075>And <00:54:45.424>it's <00:54:45.774>actually <00:54:46.125>something <00:54:46.475>that,

1173
00:54:47.095 --> 00:54:48.535
<00:54:47.095>that <00:54:47.310>could <00:54:47.527>hurt <00:54:47.743>your <00:54:47.959>business <00:54:48.174>as <00:54:48.390>well.

1174
00:54:49.115 --> 00:54:51.135
<00:54:49.115>Um, <00:54:49.348>I <00:54:49.581>actually <00:54:49.814>worked <00:54:50.048>in <00:54:50.281>the <00:54:50.515>Gulf

1175
00:54:51.135 --> 00:54:52.295
<00:54:51.135>region <00:54:51.483>as <00:54:51.831>well <00:54:52.179>professionally.

1176
00:54:52.515 --> 00:54:55.055
<00:54:52.515>Uh, <00:54:52.714>I <00:54:52.915>developed <00:54:53.115>software <00:54:53.315>for <00:54:53.515>these <00:54:53.714>people, <00:54:53.915>uh,

1177
00:54:55.435 --> 00:54:57.495
<00:54:55.435>and <00:54:55.634>every <00:54:55.835>time <00:54:56.035>we <00:54:56.235>don't <00:54:56.435>address <00:54:56.634>these <00:54:56.835>things

1178
00:54:57.495 --> 00:55:00.575
<00:54:57.495>and <00:54:57.694>they <00:54:57.895>were <00:54:58.095>not <00:54:58.295>happy, <00:54:58.495>uh, <00:54:58.694>um, <00:54:58.895>when,

1179
00:55:00.775 --> 00:55:01.655
<00:55:00.775>whenever <00:55:00.973>we <00:55:01.171>didn't <00:55:01.369>make <00:55:01.567>our

1180
00:55:01.655 --> 00:55:02.935
<00:55:01.655>application <00:55:01.943>right <00:55:02.231>to <00:55:02.519>left <00:55:02.807>friendly.

1181
00:55:03.515 --> 00:55:08.335
<00:55:03.515>Uh, <00:55:03.690>so <00:55:03.865>it's <00:55:04.040>this <00:55:04.214>kind <00:55:04.390>of, <00:55:04.565>uh, <00:55:04.740>uh, <00:55:04.915>inclusiveness.

1182
00:55:08.595 --> 00:55:13.055
<00:55:08.595>Um, <00:55:08.734>but <00:55:08.875>I, <00:55:09.015>I, <00:55:09.154>I <00:55:09.294>can't <00:55:09.435>directly, <00:55:09.575>uh, <00:55:09.714>correlate <00:55:09.855>the, <00:55:09.995>uh,

1183
00:55:13.055 --> 00:55:15.415
<00:55:13.055>disability <00:55:13.335>and <00:55:13.615>with, <00:55:13.895>with <00:55:14.174>theological <00:55:14.455>properties,

1184
00:55:15.435 --> 00:55:16.895
<00:55:15.435>but <00:55:15.763>I <00:55:16.092>would <00:55:16.420>recommend <00:55:16.749>sticking

1185
00:55:16.995 --> 00:55:19.215
<00:55:16.995>to <00:55:17.275>logical <00:55:17.555>properties <00:55:17.835>should <00:55:18.115>be <00:55:18.395>default.

1186
00:55:19.405 --> 00:55:22.255
<00:55:19.405>Your <00:55:19.605>your <00:55:19.805>default. <00:55:20.005>I <00:55:20.205>mean, <00:55:20.405>there's, <00:55:20.605>try <00:55:20.805>not

1187
00:55:22.255 --> 00:55:23.295
<00:55:22.255>to <00:55:22.489>use <00:55:22.723>things <00:55:22.957>like <00:55:23.191>wheat

1188
00:55:23.315 --> 00:55:25.415
<00:55:23.315>and <00:55:23.470>height, <00:55:23.626>uh, <00:55:23.781>starting <00:55:23.937>from <00:55:24.092>today <00:55:24.248>if <00:55:24.403>you <00:55:24.559>have <00:55:24.715>to.

1189
00:55:26.745 --> 00:55:29.795
<00:55:26.745>Yeah, <00:55:26.900>I <00:55:27.056>mean, <00:55:27.211>that <00:55:27.367>goes <00:55:27.522>back <00:55:27.678>to <00:55:27.833>like <00:55:27.989>basic <00:55:28.145>localization

1190
00:55:29.855 --> 00:55:31.435
<00:55:29.855>and <00:55:30.205>basic <00:55:30.555>translation <00:55:30.905>as <00:55:31.255>well.

1191
00:55:31.465 --> 00:55:35.555
<00:55:31.465>Like, <00:55:31.592>uh, <00:55:31.719>uh, <00:55:31.846>the <00:55:31.974>other <00:55:32.101>day <00:55:32.228>I <00:55:32.355>was <00:55:32.483>basically <00:55:32.610>losing <00:55:32.737>my, <00:55:32.865>my,

1192
00:55:35.695 --> 00:55:37.075
<00:55:35.695>my, <00:55:36.109>my <00:55:36.523>partner's <00:55:36.937>computer

1193
00:55:37.175 --> 00:55:40.355
<00:55:37.175>and <00:55:37.315>she <00:55:37.455>had <00:55:37.595>set <00:55:37.735>it <00:55:37.875>up <00:55:38.015>to <00:55:38.155>translate <00:55:38.295>everything <00:55:38.435>into <00:55:38.575>German.

1194
00:55:40.495 --> 00:55:42.835
<00:55:40.495>So <00:55:40.622>I <00:55:40.749>didn't <00:55:40.876>know <00:55:41.004>that. <00:55:41.131>So <00:55:41.258>basically <00:55:41.385>I <00:55:41.513>looked <00:55:41.640>at <00:55:41.767>a <00:55:41.895>lot

1195
00:55:42.835 --> 00:55:45.515
<00:55:42.835>of <00:55:42.975>websites <00:55:43.115>and <00:55:43.255>as <00:55:43.395>German <00:55:43.535>is <00:55:43.675>about <00:55:43.815>five <00:55:43.955>times <00:55:44.095>as <00:55:44.235>long,

1196
00:55:45.815 --> 00:55:48.395
<00:55:45.815>or <00:55:45.990>like, <00:55:46.165>okay, <00:55:46.340>1.7 <00:55:46.515>times <00:55:46.690>as <00:55:46.865>long <00:55:47.040>as <00:55:47.215>English,

1197
00:55:48.505 --> 00:55:50.875
<00:55:48.505>there's <00:55:48.680>still <00:55:48.855>an <00:55:49.030>amazing <00:55:49.205>amount <00:55:49.380>of <00:55:49.555>websites <00:55:49.730>out <00:55:49.905>there

1198
00:55:50.875 --> 00:55:53.755
<00:55:50.875>that <00:55:51.030>expect <00:55:51.186>a <00:55:51.341>certain <00:55:51.497>amount <00:55:51.652>of <00:55:51.808>numbers <00:55:51.963>of <00:55:52.119>letters <00:55:52.275>or,

1199
00:55:53.815 --> 00:55:55.675
<00:55:53.815>or <00:55:54.048>words <00:55:54.281>in <00:55:54.515>a, <00:55:54.748>in <00:55:54.981>a <00:55:55.215>sentence

1200
00:55:56.055 --> 00:55:57.715
<00:55:56.055>and <00:55:56.335>break <00:55:56.615>when <00:55:56.895>they're <00:55:57.174>not <00:55:57.455>there.

1201
00:55:57.815 --> 00:56:01.875
<00:55:57.815>So <00:55:57.955>basically <00:55:58.095>overflow <00:55:58.235>hidden <00:55:58.375>these <00:55:58.515>kind <00:55:58.655>of <00:55:58.795>things <00:55:58.935>is <00:55:59.075>a <00:55:59.215>very,

1202
00:56:01.875 --> 00:56:03.515
<00:56:01.875>very <00:56:02.225>terrible <00:56:02.575>idea <00:56:02.925>to <00:56:03.275>use.

1203
00:56:04.235 --> 00:56:05.475
<00:56:04.235>'cause <00:56:04.514>you <00:56:04.793>want <00:56:05.072>to <00:56:05.351>embrace

1204
00:56:05.545 --> 00:56:07.795
<00:56:05.545>that <00:56:05.778>people <00:56:06.011>have <00:56:06.245>different <00:56:06.478>content <00:56:06.711>in <00:56:06.945>there

1205
00:56:07.975 --> 00:56:09.515
<00:56:07.975>and <00:56:08.321>people <00:56:08.667>do <00:56:09.014>translate <00:56:09.361>websites

1206
00:56:09.515 --> 00:56:11.715
<00:56:09.515>with <00:56:09.670>their <00:56:09.826>browser <00:56:09.981>these <00:56:10.137>days, <00:56:10.292>so <00:56:10.448>you <00:56:10.603>don't <00:56:10.759>even <00:56:10.915>know

1207
00:56:11.715 --> 00:56:14.235
<00:56:11.715>what <00:56:11.870>your <00:56:12.026>design <00:56:12.181>might <00:56:12.337>look <00:56:12.492>like <00:56:12.648>in <00:56:12.803>end <00:56:12.959>user's <00:56:13.115>cases.

1208
00:56:14.705 --> 00:56:17.355
<00:56:14.705>Yeah, <00:56:14.880>that's <00:56:15.055>true. <00:56:15.230>That's <00:56:15.404>why <00:56:15.580>sticking <00:56:15.755>to <00:56:15.930>dynamic <00:56:16.105>designs,

1209
00:56:17.535 --> 00:56:19.915
<00:56:17.535>uh, <00:56:17.734>is <00:56:17.935>a <00:56:18.134>big <00:56:18.335>deal, <00:56:18.535>as <00:56:18.734>you <00:56:18.935>said.

1210
00:56:20.845 --> 00:56:21.975
<00:56:20.845>Yeah, <00:56:21.183>it <00:56:21.522>was <00:56:21.862>interesting

1211
00:56:21.975 --> 00:56:23.725
<00:56:21.975>because <00:56:22.208>I <00:56:22.441>complained <00:56:22.674>to <00:56:22.908>friends <00:56:23.141>in <00:56:23.375>Netflix

1212
00:56:23.875 --> 00:56:25.765
<00:56:23.875>that <00:56:24.108>the <00:56:24.341>translation <00:56:24.575>is <00:56:24.808>really, <00:56:25.041>really <00:56:25.275>bad

1213
00:56:25.765 --> 00:56:27.605
<00:56:25.765>and <00:56:25.998>they, <00:56:26.231>that <00:56:26.464>we <00:56:26.698>don't <00:56:26.931>do <00:56:27.165>translation.

1214
00:56:27.605 --> 00:56:29.365
<00:56:27.605>What <00:56:27.745>are <00:56:27.885>you <00:56:28.025>talking <00:56:28.165>about? <00:56:28.305>So <00:56:28.445>it <00:56:28.585>was <00:56:28.725>actually <00:56:28.865>the <00:56:29.005>browser

1215
00:56:29.365 --> 00:56:30.965
<00:56:29.365>translation, <00:56:29.714>so <00:56:30.064>that <00:56:30.415>was <00:56:30.765>bad.

1216
00:56:32.025 --> 00:56:35.165
<00:56:32.025>But, <00:56:32.180>um, <00:56:32.336>the <00:56:32.491>other <00:56:32.647>question <00:56:32.802>here, <00:56:32.958>one <00:56:33.113>that <00:56:33.269>is <00:56:33.425>okay,

1217
00:56:35.445 --> 00:56:37.525
<00:56:35.445>interesting <00:56:35.600>to <00:56:35.756>see, <00:56:35.911>like, <00:56:36.067>will <00:56:36.222>there <00:56:36.378>ever <00:56:36.533>be <00:56:36.689>something <00:56:36.845>new

1218
00:56:37.525 --> 00:56:39.285
<00:56:37.525>after <00:56:37.805>CSS <00:56:38.085>for <00:56:38.365>styling <00:56:38.645>the <00:56:38.925>web?

1219
00:56:42.225 --> 00:56:46.405
<00:56:42.225>Um, <00:56:42.352>well, <00:56:42.479>well, <00:56:42.606>I <00:56:42.734>can <00:56:42.861>see <00:56:42.988>what <00:56:43.115>will <00:56:43.243>happen <00:56:43.370>20 <00:56:43.497>years <00:56:43.625>later,

1220
00:56:46.545 --> 00:56:50.405
<00:56:46.545>but, <00:56:46.672>uh, <00:56:46.799>the, <00:56:46.926>the, <00:56:47.054>the <00:56:47.181>thing <00:56:47.308>is <00:56:47.435>now <00:56:47.563>we <00:56:47.690>have <00:56:47.817>a <00:56:47.945>good,

1221
00:56:50.555 --> 00:56:52.845
<00:56:50.555>good <00:56:51.021>pace <00:56:51.488>of <00:56:51.955>standardization

1222
00:56:53.265 --> 00:56:55.045
<00:56:53.265>and <00:56:53.464>I <00:56:53.665>don't <00:56:53.865>know, <00:56:54.065>some <00:56:54.265>very <00:56:54.464>good, <00:56:54.665>uh,

1223
00:56:55.045 --> 00:56:56.805
<00:56:55.045>browser <00:56:55.245>alignment <00:56:55.445>and <00:56:55.645>we <00:56:55.845>don't <00:56:56.045>wanna <00:56:56.245>lose <00:56:56.445>that.

1224
00:56:57.125 --> 00:57:00.645
<00:56:57.125>Remember <00:56:57.265>10 <00:56:57.405>years <00:56:57.545>ago, <00:56:57.685>15 <00:56:57.825>years <00:56:57.965>ago, <00:56:58.105>there <00:56:58.245>was <00:56:58.385>a <00:56:58.525>lot

1225
00:57:00.845 --> 00:57:02.805
<00:57:00.845>of <00:57:01.078>discrepancy <00:57:01.311>be, <00:57:01.544>uh, <00:57:01.778>between <00:57:02.011>the <00:57:02.245>browser.

1226
00:57:02.945 --> 00:57:04.365
<00:57:02.945>So <00:57:03.200>we <00:57:03.456>supported <00:57:03.711>this <00:57:03.967>and <00:57:04.223>that,

1227
00:57:04.385 --> 00:57:08.205
<00:57:04.385>and <00:57:04.525>then <00:57:04.665>we <00:57:04.805>sort <00:57:04.945>sorted <00:57:05.085>things <00:57:05.225>like <00:57:05.365>jQuery, <00:57:05.505>uh, <00:57:05.645>which, <00:57:05.785>so,

1228
00:57:08.205 --> 00:57:09.925
<00:57:08.205>which <00:57:08.404>try <00:57:08.605>to <00:57:08.805>solve <00:57:09.005>these <00:57:09.205>kind <00:57:09.404>of <00:57:09.605>problems.

1229
00:57:10.625 --> 00:57:12.645
<00:57:10.625>Um, <00:57:10.905>I <00:57:11.185>think <00:57:11.465>the, <00:57:11.745>the, <00:57:12.025>the,

1230
00:57:13.545 --> 00:57:16.725
<00:57:13.545>the <00:57:13.700>biggest <00:57:13.856>thing <00:57:14.011>is <00:57:14.167>just <00:57:14.322>we <00:57:14.478>have <00:57:14.633>now <00:57:14.789>this <00:57:14.945>standardization,

1231
00:57:17.225 --> 00:57:18.885
<00:57:17.225>uh, <00:57:17.575>and <00:57:17.924>it's <00:57:18.275>very <00:57:18.625>important.

1232
00:57:19.025 --> 00:57:21.405
<00:57:19.025>So <00:57:19.258>I <00:57:19.491>expect <00:57:19.725>the <00:57:19.958>standardization <00:57:20.191>becoming, <00:57:20.425>growing

1233
00:57:21.465 --> 00:57:23.325
<00:57:21.465>and <00:57:21.640>growing <00:57:21.815>and <00:57:21.990>then <00:57:22.165>become <00:57:22.340>a <00:57:22.515>little <00:57:22.690>bit <00:57:22.865>more.

1234
00:57:23.625 --> 00:57:28.405
<00:57:23.625>So <00:57:23.825>I <00:57:24.025>can't, <00:57:24.225>um, <00:57:24.425>estimate, <00:57:24.625>uh, <00:57:24.825>anything <00:57:25.025>that's,

1235
00:57:28.405 --> 00:57:32.765
<00:57:28.405>that <00:57:28.605>would <00:57:28.805>come <00:57:29.005>after <00:57:29.205>CSS, <00:57:29.405>uh, <00:57:29.605>perhaps <00:57:29.805>again,

1236
00:57:33.175 --> 00:57:37.015
<00:57:33.175>maybe, <00:57:33.408>uh, <00:57:33.641>CSS <00:57:33.875>whodini <00:57:34.108>might <00:57:34.341>drag <00:57:34.575>out,

1237
00:57:37.015 --> 00:57:38.335
<00:57:37.015>but <00:57:37.411>it's, <00:57:37.807>it's <00:57:38.203>actually

1238
00:57:38.895 --> 00:57:40.215
<00:57:38.895>progressively <00:57:39.192>it's, <00:57:39.489>it's <00:57:39.786>somewhat <00:57:40.083>frozen.

1239
00:57:40.395 --> 00:57:44.335
<00:57:40.395>I'm <00:57:40.570>not <00:57:40.745>seeing <00:57:40.920>any <00:57:41.095>progress, <00:57:41.270>um, <00:57:41.445>coming <00:57:41.620>at <00:57:41.795>that.

1240
00:57:44.795 --> 00:57:47.255
<00:57:44.795>Uh, <00:57:44.995>another, <00:57:45.195>another <00:57:45.395>thing <00:57:45.595>one <00:57:45.795>might <00:57:45.995>consider <00:57:46.195>is

1241
00:57:47.255 --> 00:57:49.175
<00:57:47.255>that <00:57:47.535>perhaps, <00:57:47.815>uh, <00:57:48.095>progressive <00:57:48.375>web <00:57:48.655>applications.

1242
00:57:49.555 --> 00:57:51.495
<00:57:49.555>So <00:57:49.754>there's <00:57:49.955>a <00:57:50.154>good <00:57:50.355>potential <00:57:50.555>of <00:57:50.754>them, <00:57:50.955>uh,

1243
00:57:51.495 --> 00:57:53.855
<00:57:51.495>where <00:57:51.670>a <00:57:51.845>progressive <00:57:52.020>application <00:57:52.194>is <00:57:52.370>like <00:57:52.545>a <00:57:52.720>web <00:57:52.895>application

1244
00:57:53.855 --> 00:57:56.135
<00:57:53.855>where <00:57:54.030>it <00:57:54.205>can <00:57:54.380>be <00:57:54.555>installed <00:57:54.730>native <00:57:54.905>with <00:57:55.080>your <00:57:55.255>browser

1245
00:57:56.475 --> 00:57:59.175
<00:57:56.475>and <00:57:56.674>it <00:57:56.875>has <00:57:57.075>facilities <00:57:57.275>like <00:57:57.475>run, <00:57:57.674>running <00:57:57.875>offline

1246
00:57:59.195 --> 00:58:00.375
<00:57:59.195>or <00:57:59.549>doing <00:57:59.903>background <00:58:00.257>tasks.

1247
00:58:01.155 --> 00:58:04.175
<00:58:01.155>Um, <00:58:01.330>and <00:58:01.505>this <00:58:01.680>somehow <00:58:01.855>makes <00:58:02.030>the <00:58:02.205>developer's <00:58:02.380>life <00:58:02.555>easier

1248
00:58:04.175 --> 00:58:06.215
<00:58:04.175>because <00:58:04.330>you <00:58:04.486>can <00:58:04.641>develop <00:58:04.797>a <00:58:04.952>one <00:58:05.108>application <00:58:05.263>rather <00:58:05.419>than <00:58:05.575>a

1249
00:58:06.215 --> 00:58:07.215
<00:58:06.215>native <00:58:06.515>counterpart <00:58:06.815>of <00:58:07.115>it.

1250
00:58:07.215 --> 00:58:11.735
<00:58:07.215>And, <00:58:07.355>um, <00:58:07.495>but <00:58:07.635>again, <00:58:07.775>the <00:58:07.915>trends <00:58:08.055>are, <00:58:08.195>aren't <00:58:08.335>very <00:58:08.475>strong <00:58:08.615>as

1251
00:58:11.915 --> 00:58:14.255
<00:58:11.915>for <00:58:12.148>progressive <00:58:12.381>applications <00:58:12.615>is <00:58:12.848>for <00:58:13.081>now <00:58:13.315>either.

1252
00:58:14.435 --> 00:58:15.435
So

1253
00:58:15.965 --> 00:58:18.055
<00:58:15.965>Same, <00:58:16.245>same <00:58:16.525>as <00:58:16.805>people <00:58:17.085>embrace <00:58:17.365>tailwind,

1254
00:58:18.055 --> 00:58:20.735
<00:58:18.055>which <00:58:18.335>is <00:58:18.615>basically <00:58:18.895>much <00:58:19.174>more <00:58:19.455>oppressive

1255
00:58:20.795 --> 00:58:23.335
<00:58:20.795>and <00:58:20.995>restrictive <00:58:21.195>than <00:58:21.395>CSS <00:58:21.595>to <00:58:21.795>a <00:58:21.995>degree <00:58:22.195>is

1256
00:58:23.335 --> 00:58:25.655
<00:58:23.335>because <00:58:23.535>people <00:58:23.735>say <00:58:23.935>they're <00:58:24.135>working <00:58:24.335>only <00:58:24.535>on <00:58:24.735>components

1257
00:58:25.715 --> 00:58:26.935
<00:58:25.715>and <00:58:25.934>they <00:58:26.154>want <00:58:26.373>to <00:58:26.593>control <00:58:26.813>on

1258
00:58:26.935 --> 00:58:28.575
<00:58:26.935>that <00:58:27.168>micro <00:58:27.401>level <00:58:27.634>what's <00:58:27.868>going <00:58:28.101>on <00:58:28.335>there.

1259
00:58:28.875 --> 00:58:30.815
<00:58:28.875>So <00:58:29.030>that's <00:58:29.186>a <00:58:29.341>fight <00:58:29.497>that <00:58:29.652>we <00:58:29.808>still <00:58:29.963>have <00:58:30.119>to, <00:58:30.275>or,

1260
00:58:30.835 --> 00:58:32.815
<00:58:30.835>or <00:58:31.035>discussion <00:58:31.235>that <00:58:31.435>we <00:58:31.635>still <00:58:31.835>need <00:58:32.035>to <00:58:32.235>have.

1261
00:58:33.005 --> 00:58:36.175
<00:58:33.005>Like <00:58:33.160>if, <00:58:33.316>if <00:58:33.471>you <00:58:33.627>have <00:58:33.782>lots <00:58:33.938>of <00:58:34.093>like <00:58:34.249>fixed <00:58:34.405>components

1262
00:58:36.315 --> 00:58:37.815
<00:58:36.315>and <00:58:36.585>they <00:58:36.855>make <00:58:37.125>up <00:58:37.395>one <00:58:37.665>interface,

1263
00:58:37.875 --> 00:58:39.175
<00:58:37.875>you <00:58:38.167>cannot <00:58:38.460>support <00:58:38.752>the <00:58:39.045>world.

1264
00:58:39.875 --> 00:58:42.135
<00:58:39.875>But <00:58:40.050>if <00:58:40.225>you <00:58:40.400>actually <00:58:40.575>think <00:58:40.750>about <00:58:40.925>CSS <00:58:41.100>top <00:58:41.275>level

1265
00:58:42.165 --> 00:58:43.455
<00:58:42.165>down, <00:58:42.455>it's <00:58:42.745>a <00:58:43.035>different <00:58:43.326>story.

1266
00:58:43.475 --> 00:58:44.695
<00:58:43.475>But <00:58:43.694>that's <00:58:43.914>a <00:58:44.133>fight <00:58:44.353>we've <00:58:44.573>been,

1267
00:58:44.915 --> 00:58:46.575
<00:58:44.915>or <00:58:45.115>that's <00:58:45.315>a <00:58:45.515>discussion <00:58:45.715>we <00:58:45.915>had <00:58:46.115>for <00:58:46.315>years

1268
00:58:46.635 --> 00:58:49.375
<00:58:46.635>and <00:58:46.775>years <00:58:46.915>that <00:58:47.055>basically <00:58:47.195>don't <00:58:47.335>rely <00:58:47.475>on <00:58:47.615>the <00:58:47.755>look <00:58:47.895>and <00:58:48.035>feel.

1269
00:58:49.725 --> 00:58:52.135
<00:58:49.725>Well, <00:58:49.852>we <00:58:49.979>are <00:58:50.106>out <00:58:50.234>of <00:58:50.361>time, <00:58:50.488>so <00:58:50.615>I <00:58:50.743>thank <00:58:50.870>you <00:58:50.997>very <00:58:51.125>much

1270
00:58:52.355 --> 00:58:53.495
<00:58:52.355>for <00:58:52.611>this <00:58:52.868>kind <00:58:53.124>of <00:58:53.381>overview

1271
00:58:53.525 --> 00:58:55.295
<00:58:53.525>that <00:58:53.725>people <00:58:53.925>have <00:58:54.125>been <00:58:54.325>asking <00:58:54.525>for <00:58:54.725>the <00:58:54.925>slides.

1272
00:58:55.315 --> 00:58:57.575
<00:58:55.315>So <00:58:55.515>if <00:58:55.715>you, <00:58:55.915>if <00:58:56.115>you <00:58:56.315>publish <00:58:56.515>them <00:58:56.715>somewhere

1273
00:58:57.635 --> 00:58:59.975
<00:58:57.635>or <00:58:57.742>you <00:58:57.850>tell <00:58:57.958>them, <00:58:58.065>uh, <00:58:58.173>you <00:58:58.281>send <00:58:58.388>them <00:58:58.496>to <00:58:58.604>us, <00:58:58.711>we <00:58:58.819>can <00:58:58.927>send <00:58:59.035>them

1274
00:58:59.995 --> 00:59:01.455
<00:58:59.995>to <00:59:00.214>the <00:59:00.433>people <00:59:00.652>who <00:59:00.871>saw <00:59:01.090>you <00:59:01.308>today.

1275
00:59:01.955 --> 00:59:04.055
<00:59:01.955>And <00:59:02.110>it <00:59:02.266>was <00:59:02.421>great <00:59:02.577>having <00:59:02.732>you <00:59:02.888>hope <00:59:03.043>to <00:59:03.199>come <00:59:03.355>you

1276
00:59:04.155 --> 00:59:07.455
<00:59:04.155>to <00:59:04.282>see <00:59:04.409>you <00:59:04.536>come <00:59:04.664>back <00:59:04.791>for, <00:59:04.918>uh, <00:59:05.045>for, <00:59:05.173>uh, <00:59:05.300>our, <00:59:05.427>uh, <00:59:05.555>Congress

1277
00:59:07.555 --> 00:59:09.095
<00:59:07.555>or <00:59:07.901>some <00:59:08.247>other <00:59:08.594>live <00:59:08.941>day.

1278
00:59:09.605 --> 00:59:10.695
<00:59:09.605>Yeah, <00:59:09.850>thanks <00:59:10.095>for, <00:59:10.340>for <00:59:10.586>that.

1279
00:59:11.405 --> 00:59:14.615
<00:59:11.405>I'll <00:59:11.560>publish <00:59:11.716>it <00:59:11.871>to <00:59:12.027>my <00:59:12.182>LinkedIn, <00:59:12.338>uh, <00:59:12.493>profile, <00:59:12.649>so, <00:59:12.805>okay.

1280
00:59:14.685 --> 00:59:16.055
<00:59:14.685>Take <00:59:14.890>a, <00:59:15.096>take <00:59:15.301>a <00:59:15.507>note <00:59:15.712>of <00:59:15.917>that.

1281
00:59:16.115 --> 00:59:17.615
<00:59:16.115>Uh, <00:59:16.307>you <00:59:16.500>can, <00:59:16.693>you <00:59:16.886>can <00:59:17.079>find <00:59:17.272>me <00:59:17.464>there

1282
00:59:17.615 --> 00:59:18.615
<00:59:17.615>and <00:59:17.794>you <00:59:17.975>can <00:59:18.154>find <00:59:18.334>the <00:59:18.515>slides.

1283
00:59:18.625 --> 00:59:20.415
<00:59:18.625>Thank <00:59:18.780>you <00:59:18.936>very <00:59:19.091>much. <00:59:19.247>Have <00:59:19.402>a <00:59:19.558>good <00:59:19.713>day <00:59:19.869>for <00:59:20.025>everyone.