[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:16.85,0:00:18.09,Default,,0000,0000,0000,,CHARLES LOWELL: All right everybody.
Dialogue: 0,0:00:18.09,0:00:20.57,Default,,0000,0000,0000,,Thank you so much for coming. I'm really,
Dialogue: 0,0:00:20.57,0:00:24.25,Default,,0000,0000,0000,,I'm really honored. This morning we're gonna
Dialogue: 0,0:00:24.25,0:00:27.87,Default,,0000,0000,0000,,be talking about client-side UI. These are,
Dialogue: 0,0:00:27.87,0:00:30.13,Default,,0000,0000,0000,,this, your client that's, that's running inside
Dialogue: 0,0:00:30.13,0:00:33.04,Default,,0000,0000,0000,,the browser. Not in the server. And some of\Nyou
Dialogue: 0,0:00:33.04,0:00:36.11,Default,,0000,0000,0000,,might already be doing this a lot. Some of\Nyou
Dialogue: 0,0:00:36.11,0:00:39.78,Default,,0000,0000,0000,,maybe a little. But wherever you fall along\Nthat
Dialogue: 0,0:00:39.78,0:00:42.39,Default,,0000,0000,0000,,spectrum, you're going to be doing more of\Nit,
Dialogue: 0,0:00:42.39,0:00:45.00,Default,,0000,0000,0000,,chances are, as time, as time goes on, and\Nnot
Dialogue: 0,0:00:45.00,0:00:47.61,Default,,0000,0000,0000,,less of it. And so I want, my goal here is\Nto
Dialogue: 0,0:00:47.61,0:00:50.78,Default,,0000,0000,0000,,share with you some of the ways that I've\Ncome
Dialogue: 0,0:00:50.78,0:00:53.68,Default,,0000,0000,0000,,to think about clients, UIs, that can help\Nyou
Dialogue: 0,0:00:53.68,0:00:59.67,Default,,0000,0000,0000,,build user interfaces that reactive, that\Nare
Dialogue: 0,0:00:59.67,0:01:02.67,Default,,0000,0000,0000,,educational and ultimately satisfying to your\Nusers.
Dialogue: 0,0:01:02.67,0:01:05.52,Default,,0000,0000,0000,,What I want to share with you is the power\Nof m.
Dialogue: 0,0:01:05.52,0:01:11.45,Default,,0000,0000,0000,,My name is Charles. I'm cowboyd on GitHub\Nand
Dialogue: 0,0:01:11.45,0:01:13.68,Default,,0000,0000,0000,,Twitter, and I work at the Front Side, where
Dialogue: 0,0:01:13.68,0:01:20.24,Default,,0000,0000,0000,,we've been doing UI for almost ten years,\Nexclusively.
Dialogue: 0,0:01:20.24,0:01:22.62,Default,,0000,0000,0000,,And when I talk about m, of course I'm
Dialogue: 0,0:01:22.62,0:01:26.05,Default,,0000,0000,0000,,talking about m as in MVC. We're all familiar,
Dialogue: 0,0:01:26.05,0:01:30.45,Default,,0000,0000,0000,,we've probably heard about the MVC pattern,\Nmodel-view-controller. It's
Dialogue: 0,0:01:30.45,0:01:35.93,Default,,0000,0000,0000,,what underpins all UIs. At least ostensibly.
Dialogue: 0,0:01:35.93,0:01:39.76,Default,,0000,0000,0000,,But it can actually be pretty notoriously\Ndifficult to
Dialogue: 0,0:01:39.76,0:01:45.14,Default,,0000,0000,0000,,pin down what, exactly, is MVC. It's a difficult
Dialogue: 0,0:01:45.14,0:01:48.54,Default,,0000,0000,0000,,question, and if you ask two people, you're\Nlikely
Dialogue: 0,0:01:48.54,0:01:54.66,Default,,0000,0000,0000,,to get a very different answer. And my, what
Dialogue: 0,0:01:54.66,0:01:59.12,Default,,0000,0000,0000,,I'm. I don't want to, to, to go in
Dialogue: 0,0:01:59.12,0:02:02.84,Default,,0000,0000,0000,,too much to try and define, give you one
Dialogue: 0,0:02:02.84,0:02:06.73,Default,,0000,0000,0000,,particular version of MVC. I think there are\Nmany.
Dialogue: 0,0:02:06.73,0:02:10.04,Default,,0000,0000,0000,,And, in fact, you find people asking the question,
Dialogue: 0,0:02:10.04,0:02:12.14,Default,,0000,0000,0000,,is Rails MVC?
Dialogue: 0,0:02:12.14,0:02:14.58,Default,,0000,0000,0000,,And some people are really, really stodgy\Nabout this.
Dialogue: 0,0:02:14.58,0:02:20.15,Default,,0000,0000,0000,,They're, Rails MVC - pshaw. I'm more relaxed\Nabout
Dialogue: 0,0:02:20.15,0:02:24.14,Default,,0000,0000,0000,,it. I say yes. Rails is MVC. It's server-side
Dialogue: 0,0:02:24.14,0:02:29.03,Default,,0000,0000,0000,,MVC. It's a flavor of, of MVC. But what
Dialogue: 0,0:02:29.03,0:02:31.98,Default,,0000,0000,0000,,I've come to realize is that MVC is, it's
Dialogue: 0,0:02:31.98,0:02:34.92,Default,,0000,0000,0000,,kind of like Kung-Fu. There's lots of different\Nschools.
Dialogue: 0,0:02:34.92,0:02:37.61,Default,,0000,0000,0000,,There's lots of different ways to, to practition.\NEach
Dialogue: 0,0:02:37.61,0:02:40.84,Default,,0000,0000,0000,,with its own strengths, each with its own\Nweaknesses,
Dialogue: 0,0:02:40.84,0:02:43.76,Default,,0000,0000,0000,,and, you know, which one you choose, you need
Dialogue: 0,0:02:43.76,0:02:48.00,Default,,0000,0000,0000,,to, is, is, needs to be appropriate for the
Dialogue: 0,0:02:48.00,0:02:50.05,Default,,0000,0000,0000,,context.
Dialogue: 0,0:02:50.05,0:02:53.75,Default,,0000,0000,0000,,But today we're gonna be talking about client-side\NUI,
Dialogue: 0,0:02:53.75,0:02:55.97,Default,,0000,0000,0000,,which is different than, different than the,\Nthan the
Dialogue: 0,0:02:55.97,0:03:00.67,Default,,0000,0000,0000,,server-side MVC, and one of the things that,\Nthat
Dialogue: 0,0:03:00.67,0:03:02.50,Default,,0000,0000,0000,,really sets it apart is, when you're working\Non
Dialogue: 0,0:03:02.50,0:03:04.76,Default,,0000,0000,0000,,the client, you constantly have to manage\Nstate. The
Dialogue: 0,0:03:04.76,0:03:06.87,Default,,0000,0000,0000,,client's always on. It's not like a Rails\Napplication
Dialogue: 0,0:03:06.87,0:03:09.48,Default,,0000,0000,0000,,where you're basically setting up the world\Nand then
Dialogue: 0,0:03:09.48,0:03:12.42,Default,,0000,0000,0000,,throwing it away with every request. On the\Nclient,
Dialogue: 0,0:03:12.42,0:03:15.62,Default,,0000,0000,0000,,you're always on. And so you have values that
Dialogue: 0,0:03:15.62,0:03:17.12,Default,,0000,0000,0000,,relate to each other, and when one of those
Dialogue: 0,0:03:17.12,0:03:20.93,Default,,0000,0000,0000,,values changes, you have to update the, the,\Nthe
Dialogue: 0,0:03:20.93,0:03:25.45,Default,,0000,0000,0000,,other values to reflect that.
Dialogue: 0,0:03:25.45,0:03:32.45,Default,,0000,0000,0000,,So, when we're thinking about MVC, I've come\Nto,
Dialogue: 0,0:03:33.17,0:03:35.01,Default,,0000,0000,0000,,to realize that really what you want to do
Dialogue: 0,0:03:35.01,0:03:38.65,Default,,0000,0000,0000,,is you want to focus on the model. When
Dialogue: 0,0:03:38.65,0:03:42.37,Default,,0000,0000,0000,,you first come to the, to the acronym, MVC,
Dialogue: 0,0:03:42.37,0:03:47.09,Default,,0000,0000,0000,,model-view-controller, you tend to, to give\Nequal billing to
Dialogue: 0,0:03:47.09,0:03:50.56,Default,,0000,0000,0000,,the letters, because they're, they're, there's,\Nno one is
Dialogue: 0,0:03:50.56,0:03:56.93,Default,,0000,0000,0000,,set apart from, in, in the acronym. But I've
Dialogue: 0,0:03:56.93,0:03:59.76,Default,,0000,0000,0000,,come to find that while the view and the
Dialogue: 0,0:03:59.76,0:04:03.79,Default,,0000,0000,0000,,controller are important, they orbit the model.
Dialogue: 0,0:04:03.79,0:04:07.76,Default,,0000,0000,0000,,So, I actually draw inspiration from, from\Nthis guy.
Dialogue: 0,0:04:07.76,0:04:09.76,Default,,0000,0000,0000,,This is Plato. He's one of the ancient software
Dialogue: 0,0:04:09.76,0:04:11.87,Default,,0000,0000,0000,,developers. You can actually tell. He's got\Na ChromeBook
Dialogue: 0,0:04:11.87,0:04:15.58,Default,,0000,0000,0000,,Pixel there in his, in his hand.
Dialogue: 0,0:04:15.58,0:04:19.39,Default,,0000,0000,0000,,And I think that he made an analogy, long
Dialogue: 0,0:04:19.39,0:04:22.68,Default,,0000,0000,0000,,time ago, that I think really, cleanly captures\Nthis
Dialogue: 0,0:04:22.68,0:04:26.53,Default,,0000,0000,0000,,concept. He had this allegory of a cave, and
Dialogue: 0,0:04:26.53,0:04:31.61,Default,,0000,0000,0000,,the idea is that living in this world is,
Dialogue: 0,0:04:31.61,0:04:35.76,Default,,0000,0000,0000,,is like being inside a cave, and back up
Dialogue: 0,0:04:35.76,0:04:38.43,Default,,0000,0000,0000,,at the entrance of the cave, where you can't
Dialogue: 0,0:04:38.43,0:04:42.82,Default,,0000,0000,0000,,see, there's this fire burning. And shapes\Npass in
Dialogue: 0,0:04:42.82,0:04:45.33,Default,,0000,0000,0000,,front of the fire, and they cast shadows on
Dialogue: 0,0:04:45.33,0:04:48.23,Default,,0000,0000,0000,,the wall. And we, inside the world, the only
Dialogue: 0,0:04:48.23,0:04:51.33,Default,,0000,0000,0000,,thing that we can actually see is the shadows.
Dialogue: 0,0:04:51.33,0:04:54.61,Default,,0000,0000,0000,,The shapes and the fire are hidden from us.
Dialogue: 0,0:04:54.61,0:04:56.41,Default,,0000,0000,0000,,But if we look at the, the, the shadows,
Dialogue: 0,0:04:56.41,0:04:59.46,Default,,0000,0000,0000,,we can extrapolate those shapes, and the shapes\Nthat
Dialogue: 0,0:04:59.46,0:05:02.48,Default,,0000,0000,0000,,we see on the wall take their form purely
Dialogue: 0,0:05:02.48,0:05:05.09,Default,,0000,0000,0000,,as a function of the shape in front of
Dialogue: 0,0:05:05.09,0:05:07.15,Default,,0000,0000,0000,,the fire. They are as they are and are
Dialogue: 0,0:05:07.15,0:05:12.06,Default,,0000,0000,0000,,no other way because, because of those true\Nforms
Dialogue: 0,0:05:12.06,0:05:15.66,Default,,0000,0000,0000,,and then the way that they interact.
Dialogue: 0,0:05:15.66,0:05:18.56,Default,,0000,0000,0000,,And so this is all, this is all very,
Dialogue: 0,0:05:18.56,0:05:21.70,Default,,0000,0000,0000,,very abstract. We've covered, you know, who\NI am.
Dialogue: 0,0:05:21.70,0:05:26.36,Default,,0000,0000,0000,,We've covered the, the, an ancient philosopher,\Nwhich I
Dialogue: 0,0:05:26.36,0:05:31.03,Default,,0000,0000,0000,,guess is obligatory. But, I really want to\Ngive
Dialogue: 0,0:05:31.03,0:05:34.03,Default,,0000,0000,0000,,a demonstration of this principle in action\Nso that
Dialogue: 0,0:05:34.03,0:05:38.24,Default,,0000,0000,0000,,you can see a little bit more concretely what
Dialogue: 0,0:05:38.24,0:05:40.25,Default,,0000,0000,0000,,it is that I'm talking about. And so, to
Dialogue: 0,0:05:40.25,0:05:44.19,Default,,0000,0000,0000,,do this, we're going to explore the concept\Nof
Dialogue: 0,0:05:44.19,0:05:47.58,Default,,0000,0000,0000,,a color. It's a, a, a very simple concept.
Dialogue: 0,0:05:47.58,0:05:50.23,Default,,0000,0000,0000,,It's something that most of us can perceive\Nvery
Dialogue: 0,0:05:50.23,0:05:52.70,Default,,0000,0000,0000,,easily. We, we, we know what it is, but
Dialogue: 0,0:05:52.70,0:05:57.30,Default,,0000,0000,0000,,can be surprisingly difficult to, to pin down.
Dialogue: 0,0:05:57.30,0:06:01.03,Default,,0000,0000,0000,,There's many, many, many different ways to\Nrepresent it.
Dialogue: 0,0:06:01.03,0:06:03.65,Default,,0000,0000,0000,,But we're gonna have, we're gonna have a color,
Dialogue: 0,0:06:03.65,0:06:05.68,Default,,0000,0000,0000,,and this is gonna serve as the basic value
Dialogue: 0,0:06:05.68,0:06:06.99,Default,,0000,0000,0000,,in our system. You can think of it as
Dialogue: 0,0:06:06.99,0:06:09.53,Default,,0000,0000,0000,,like, an integer value or a string value,\Nor,
Dialogue: 0,0:06:09.53,0:06:11.52,Default,,0000,0000,0000,,or something like that, and we're going to\Nsee
Dialogue: 0,0:06:11.52,0:06:14.62,Default,,0000,0000,0000,,how this when, when we have this color, what
Dialogue: 0,0:06:14.62,0:06:16.94,Default,,0000,0000,0000,,kind of, what kind of reflections we can make
Dialogue: 0,0:06:16.94,0:06:19.36,Default,,0000,0000,0000,,on that wall.
Dialogue: 0,0:06:19.36,0:06:22.55,Default,,0000,0000,0000,,So, the first example is we're just going\Nto,
Dialogue: 0,0:06:22.55,0:06:23.92,Default,,0000,0000,0000,,we're just going to project this color onto\Na
Dialogue: 0,0:06:23.92,0:06:28.51,Default,,0000,0000,0000,,single div. We're going to list this color\Nvalue
Dialogue: 0,0:06:28.51,0:06:30.21,Default,,0000,0000,0000,,on the right. We're going to be able to
Dialogue: 0,0:06:30.21,0:06:33.39,Default,,0000,0000,0000,,set a color, remove a color, set a color,
Dialogue: 0,0:06:33.39,0:06:37.11,Default,,0000,0000,0000,,and as we do that, the, the, the swatch,
Dialogue: 0,0:06:37.11,0:06:39.21,Default,,0000,0000,0000,,the color swatch will, will update itself.\NAnd I
Dialogue: 0,0:06:39.21,0:06:43.79,Default,,0000,0000,0000,,actually have a little demo here. And I've\Ngot
Dialogue: 0,0:06:43.79,0:06:45.74,Default,,0000,0000,0000,,it hard-coded, just statically, so that when\NI check
Dialogue: 0,0:06:45.74,0:06:49.62,Default,,0000,0000,0000,,this checkbox, the, the swatch will turn green.\NAnd
Dialogue: 0,0:06:49.62,0:06:51.74,Default,,0000,0000,0000,,I can uncheck it and check it.
Dialogue: 0,0:06:51.74,0:06:55.04,Default,,0000,0000,0000,,It's not, not too much. It's simple but it's
Dialogue: 0,0:06:55.04,0:06:58.49,Default,,0000,0000,0000,,surprisingly satisfying. When I was putting\Nthis talk together
Dialogue: 0,0:06:58.49,0:07:01.34,Default,,0000,0000,0000,,I actually would just sit there and click\Non,
Dialogue: 0,0:07:01.34,0:07:04.39,Default,,0000,0000,0000,,off. It's great.
Dialogue: 0,0:07:04.39,0:07:05.48,Default,,0000,0000,0000,,And you can do the same thing. We can
Dialogue: 0,0:07:05.48,0:07:09.11,Default,,0000,0000,0000,,actually connect one color to two swatches.\NSo we've
Dialogue: 0,0:07:09.11,0:07:11.60,Default,,0000,0000,0000,,got, there's no reason we can't, can't duplicate\Nthat.
Dialogue: 0,0:07:11.60,0:07:14.67,Default,,0000,0000,0000,,We'll take two of these swatches and, and\Nbind
Dialogue: 0,0:07:14.67,0:07:17.99,Default,,0000,0000,0000,,them to the, the, the same color. The, there's,
Dialogue: 0,0:07:17.99,0:07:20.02,Default,,0000,0000,0000,,there's, so there's only one color in the\Nsystem,
Dialogue: 0,0:07:20.02,0:07:23.14,Default,,0000,0000,0000,,but the effect is the same.
Dialogue: 0,0:07:23.14,0:07:29.60,Default,,0000,0000,0000,,Again, I could do that forever.
Dialogue: 0,0:07:29.60,0:07:30.98,Default,,0000,0000,0000,,And this is what data binding is. You might
Dialogue: 0,0:07:30.98,0:07:35.12,Default,,0000,0000,0000,,hear about data binding, and most people kind\Nof
Dialogue: 0,0:07:35.12,0:07:37.55,Default,,0000,0000,0000,,equate data binding with templates, because\Nthat's usually where
Dialogue: 0,0:07:37.55,0:07:39.16,Default,,0000,0000,0000,,we come to it first, right. We change this
Dialogue: 0,0:07:39.16,0:07:40.96,Default,,0000,0000,0000,,one value and the string value updates, right.\NBut
Dialogue: 0,0:07:40.96,0:07:43.61,Default,,0000,0000,0000,,templates are really just a special case of\Ndata
Dialogue: 0,0:07:43.61,0:07:48.76,Default,,0000,0000,0000,,binding. In the abstract, it's really just\Nabout taking
Dialogue: 0,0:07:48.76,0:07:51.84,Default,,0000,0000,0000,,two values and putting, putting them together\Nso that
Dialogue: 0,0:07:51.84,0:07:55.14,Default,,0000,0000,0000,,they occupy the same space in your application.\NThere
Dialogue: 0,0:07:55.14,0:07:58.67,Default,,0000,0000,0000,,really is no difference, conceptually, between\Nthem.
Dialogue: 0,0:07:58.67,0:08:02.95,Default,,0000,0000,0000,,Some, this is, this is different than observation,\Nwhich
Dialogue: 0,0:08:02.95,0:08:05.13,Default,,0000,0000,0000,,is kind of another pillar on which client-side\NUIs
Dialogue: 0,0:08:05.13,0:08:08.26,Default,,0000,0000,0000,,are built, where you can observe for value\Nchanges
Dialogue: 0,0:08:08.26,0:08:10.87,Default,,0000,0000,0000,,in a model, and when that value changes you
Dialogue: 0,0:08:10.87,0:08:17.41,Default,,0000,0000,0000,,get a callback. But. With data binding, you\Nreally
Dialogue: 0,0:08:17.41,0:08:20.08,Default,,0000,0000,0000,,need to think of it taking two separate properties
Dialogue: 0,0:08:20.08,0:08:22.87,Default,,0000,0000,0000,,and really just making them overlap and becoming\Nthe,
Dialogue: 0,0:08:22.87,0:08:24.73,Default,,0000,0000,0000,,the absolute, the, the same thing.
Dialogue: 0,0:08:24.73,0:08:27.57,Default,,0000,0000,0000,,Now, it is built on observation. So, when\Nwe
Dialogue: 0,0:08:27.57,0:08:29.61,Default,,0000,0000,0000,,have a model and it's got some property. I've
Dialogue: 0,0:08:29.61,0:08:31.28,Default,,0000,0000,0000,,got one named a and one named b. We
Dialogue: 0,0:08:31.28,0:08:36.90,Default,,0000,0000,0000,,can use observers to, to, to implement the\Ndata
Dialogue: 0,0:08:36.90,0:08:40.98,Default,,0000,0000,0000,,binding, so if a value appears at a, we
Dialogue: 0,0:08:40.98,0:08:43.81,Default,,0000,0000,0000,,observe that and we immediately copy it onto\Nb.
Dialogue: 0,0:08:43.81,0:08:46.77,Default,,0000,0000,0000,,And if a value appears on b, then we
Dialogue: 0,0:08:46.77,0:08:50.68,Default,,0000,0000,0000,,immediately copy it over into a. But I'm showing
Dialogue: 0,0:08:50.68,0:08:52.30,Default,,0000,0000,0000,,this, the mechanics of it, so that you can
Dialogue: 0,0:08:52.30,0:08:54.89,Default,,0000,0000,0000,,forget about them. Because you, when, when\Nwe're talking
Dialogue: 0,0:08:54.89,0:08:57.34,Default,,0000,0000,0000,,about sound traveling, you don't really want\Nto think
Dialogue: 0,0:08:57.34,0:08:59.56,Default,,0000,0000,0000,,about the particles knocking together. What\Nyou really want
Dialogue: 0,0:08:59.56,0:09:02.18,Default,,0000,0000,0000,,to think about is the data flowing through,\Njust
Dialogue: 0,0:09:02.18,0:09:05.89,Default,,0000,0000,0000,,like it's a pipe.
Dialogue: 0,0:09:05.89,0:09:08.24,Default,,0000,0000,0000,,And this is good, because it, it, it decouples
Dialogue: 0,0:09:08.24,0:09:10.73,Default,,0000,0000,0000,,that data flow from your computation, so you\Ncan
Dialogue: 0,0:09:10.73,0:09:13.65,Default,,0000,0000,0000,,compose your different models together just\Nby making them
Dialogue: 0,0:09:13.65,0:09:17.87,Default,,0000,0000,0000,,overlap at well-known points. So to, to, to\Nshow
Dialogue: 0,0:09:17.87,0:09:20.41,Default,,0000,0000,0000,,this in action, I've got a model here called
Dialogue: 0,0:09:20.41,0:09:23.48,Default,,0000,0000,0000,,the desaturator. And on the left, it takes\Na
Dialogue: 0,0:09:23.48,0:09:26.09,Default,,0000,0000,0000,,color and on the bottom, there's a, a, a
Dialogue: 0,0:09:26.09,0:09:30.15,Default,,0000,0000,0000,,value, a real number between zero and one,\Nand
Dialogue: 0,0:09:30.15,0:09:33.28,Default,,0000,0000,0000,,then the color on the right is a desaturated
Dialogue: 0,0:09:33.28,0:09:36.23,Default,,0000,0000,0000,,version of the color on the left.
Dialogue: 0,0:09:36.23,0:09:40.65,Default,,0000,0000,0000,,So and, and that relationship is, it's, it's\Na,
Dialogue: 0,0:09:40.65,0:09:43.90,Default,,0000,0000,0000,,it's, it's, it's pure. The, the value of that
Dialogue: 0,0:09:43.90,0:09:46.84,Default,,0000,0000,0000,,color on the right, no matter what the color
Dialogue: 0,0:09:46.84,0:09:49.14,Default,,0000,0000,0000,,on the left, is always going to be a
Dialogue: 0,0:09:49.14,0:09:52.30,Default,,0000,0000,0000,,desaturated version of that color. So if we\Nsee
Dialogue: 0,0:09:52.30,0:09:54.87,Default,,0000,0000,0000,,this, we can now plug it into our swatch
Dialogue: 0,0:09:54.87,0:10:00.01,Default,,0000,0000,0000,,assembly, just using data binding. So, let's\Nsee that
Dialogue: 0,0:10:00.01,0:10:02.30,Default,,0000,0000,0000,,in action.
Dialogue: 0,0:10:02.30,0:10:05.18,Default,,0000,0000,0000,,Here's our desaturater. I've got the green\Nturned on.
Dialogue: 0,0:10:05.18,0:10:07.95,Default,,0000,0000,0000,,And as we up the desaturation, you can see
Dialogue: 0,0:10:07.95,0:10:09.67,Default,,0000,0000,0000,,that it literally just sucks the color right\Nout
Dialogue: 0,0:10:09.67,0:10:14.45,Default,,0000,0000,0000,,until, if you're fully desaturated, you're\Nat gray. If
Dialogue: 0,0:10:14.45,0:10:17.98,Default,,0000,0000,0000,,you ever, never heard the term of desaturation\Nbefore,
Dialogue: 0,0:10:17.98,0:10:20.18,Default,,0000,0000,0000,,that's, that's, that's what it is.
Dialogue: 0,0:10:20.18,0:10:24.61,Default,,0000,0000,0000,,And, of course, if I change it to a
Dialogue: 0,0:10:24.61,0:10:28.20,Default,,0000,0000,0000,,different color, in this case black, which\Nis the
Dialogue: 0,0:10:28.20,0:10:30.67,Default,,0000,0000,0000,,absence of color, then they're, they're both\Nblack, because
Dialogue: 0,0:10:30.67,0:10:35.08,Default,,0000,0000,0000,,a desaturated nothing is still nothing. But\Nif I
Dialogue: 0,0:10:35.08,0:10:39.60,Default,,0000,0000,0000,,shine the color through again, then the, the\Ndesaturation
Dialogue: 0,0:10:39.60,0:10:42.23,Default,,0000,0000,0000,,remains.
Dialogue: 0,0:10:42.23,0:10:43.36,Default,,0000,0000,0000,,And this is all well and good when it
Dialogue: 0,0:10:43.36,0:10:47.24,Default,,0000,0000,0000,,comes to binding colors to colors. But when\Nyou've
Dialogue: 0,0:10:47.24,0:10:50.04,Default,,0000,0000,0000,,got two separate data types, because remember,\Nyou know,
Dialogue: 0,0:10:50.04,0:10:52.04,Default,,0000,0000,0000,,bindings can only work on the same data type.
Dialogue: 0,0:10:52.04,0:10:54.80,Default,,0000,0000,0000,,When you've got two separate data types, what\Nare
Dialogue: 0,0:10:54.80,0:10:58.15,Default,,0000,0000,0000,,you gonna do? Well, you just need another\Nmodel.
Dialogue: 0,0:10:58.15,0:11:04.27,Default,,0000,0000,0000,,And in this case, what I've implemented here\Nis
Dialogue: 0,0:11:04.27,0:11:06.25,Default,,0000,0000,0000,,what I call a color syntax. And it's a
Dialogue: 0,0:11:06.25,0:11:09.16,Default,,0000,0000,0000,,model that's got a color on one end and
Dialogue: 0,0:11:09.16,0:11:12.16,Default,,0000,0000,0000,,a string on the other. And I'm, you know,
Dialogue: 0,0:11:12.16,0:11:13.69,Default,,0000,0000,0000,,there's a little bit of hand-waving here,\Nbecause this
Dialogue: 0,0:11:13.69,0:11:16.90,Default,,0000,0000,0000,,model is a little bit complex on the inside,
Dialogue: 0,0:11:16.90,0:11:20.97,Default,,0000,0000,0000,,but from a composability standpoint, it's\Nvery simple. It
Dialogue: 0,0:11:20.97,0:11:24.91,Default,,0000,0000,0000,,just relates a color and a string.
Dialogue: 0,0:11:24.91,0:11:27.18,Default,,0000,0000,0000,,And it goes both ways. So that if a
Dialogue: 0,0:11:27.18,0:11:30.11,Default,,0000,0000,0000,,color appears on the top, that implies a string
Dialogue: 0,0:11:30.11,0:11:32.91,Default,,0000,0000,0000,,value on the bottom. And if a new string
Dialogue: 0,0:11:32.91,0:11:36.01,Default,,0000,0000,0000,,value appears on the bottom, that implies\Na different
Dialogue: 0,0:11:36.01,0:11:38.47,Default,,0000,0000,0000,,color value on the top. And so I can
Dialogue: 0,0:11:38.47,0:11:41.17,Default,,0000,0000,0000,,plug this in to our assembly, and I'm gonna
Dialogue: 0,0:11:41.17,0:11:42.65,Default,,0000,0000,0000,,go ahead and plug it in twice, to kind
Dialogue: 0,0:11:42.65,0:11:45.09,Default,,0000,0000,0000,,of fast forward and show you a little bit
Dialogue: 0,0:11:45.09,0:11:48.24,Default,,0000,0000,0000,,more the power of data binding here.
Dialogue: 0,0:11:48.24,0:11:53.32,Default,,0000,0000,0000,,So we've got two text inputs which produce\Nstrings.
Dialogue: 0,0:11:53.32,0:11:56.61,Default,,0000,0000,0000,,But they're bound to our color syntaxes, but\Nboth
Dialogue: 0,0:11:56.61,0:11:59.14,Default,,0000,0000,0000,,color syntaxes are bound to the same color,\Nwhich
Dialogue: 0,0:11:59.14,0:12:01.67,Default,,0000,0000,0000,,is that swatch on the right.
Dialogue: 0,0:12:01.67,0:12:03.28,Default,,0000,0000,0000,,So we can see this in, in action here.
Dialogue: 0,0:12:03.28,0:12:05.84,Default,,0000,0000,0000,,So I've got my two, two text fields, and
Dialogue: 0,0:12:05.84,0:12:07.58,Default,,0000,0000,0000,,I can change the color of one, where probably
Dialogue: 0,0:12:07.58,0:12:11.42,Default,,0000,0000,0000,,most, we're used to dealing with hex values,\Nand
Dialogue: 0,0:12:11.42,0:12:13.63,Default,,0000,0000,0000,,you can see that the, the colors update. Both
Dialogue: 0,0:12:13.63,0:12:17.35,Default,,0000,0000,0000,,in the swatch, the, the desaturated value\Nof the
Dialogue: 0,0:12:17.35,0:12:24.35,Default,,0000,0000,0000,,swatch. And also in the other text field.\NSo
Dialogue: 0,0:12:25.10,0:12:26.21,Default,,0000,0000,0000,,I can set it to cyan and then I
Dialogue: 0,0:12:26.21,0:12:29.13,Default,,0000,0000,0000,,get a desaturated cyan. Cause all I'm really\Ndoing
Dialogue: 0,0:12:29.13,0:12:32.08,Default,,0000,0000,0000,,is changing that one color value.
Dialogue: 0,0:12:32.08,0:12:37.29,Default,,0000,0000,0000,,Incidentally, these, these text fields, there's\Nnothing special about
Dialogue: 0,0:12:37.29,0:12:38.63,Default,,0000,0000,0000,,the format, because the way I implemented\Nit is
Dialogue: 0,0:12:38.63,0:12:42.22,Default,,0000,0000,0000,,a, a color syntax, I actually can take this
Dialogue: 0,0:12:42.22,0:12:49.22,Default,,0000,0000,0000,,here and, and copy it up here, and it'll
Dialogue: 0,0:12:49.23,0:12:53.31,Default,,0000,0000,0000,,still update the color because the, the syntax\Nis
Dialogue: 0,0:12:53.31,0:12:55.93,Default,,0000,0000,0000,,format agnostic. So it doesn't really matter.\NAnd I
Dialogue: 0,0:12:55.93,0:12:58.45,Default,,0000,0000,0000,,can also use a RGB constructor here to make
Dialogue: 0,0:12:58.45,0:13:02.76,Default,,0000,0000,0000,,this red again.
Dialogue: 0,0:13:02.76,0:13:08.19,Default,,0000,0000,0000,,So. And that's good. You know, we can, we
Dialogue: 0,0:13:08.19,0:13:09.62,Default,,0000,0000,0000,,can play around with the colors. We can enter
Dialogue: 0,0:13:09.62,0:13:13.71,Default,,0000,0000,0000,,in RGB values here, one at a time, and
Dialogue: 0,0:13:13.71,0:13:15.14,Default,,0000,0000,0000,,see the kind of the affect they have on
Dialogue: 0,0:13:15.14,0:13:18.35,Default,,0000,0000,0000,,the mixed color. But that doesn't give us\Nreal
Dialogue: 0,0:13:18.35,0:13:21.36,Default,,0000,0000,0000,,insight about the, the, the individual components.\NSo what
Dialogue: 0,0:13:21.36,0:13:23.55,Default,,0000,0000,0000,,we can do is we can actually add another
Dialogue: 0,0:13:23.55,0:13:27.22,Default,,0000,0000,0000,,model to decompose this color into its RBG\Nvalue.
Dialogue: 0,0:13:27.22,0:13:30.39,Default,,0000,0000,0000,,So we've got, again, we're relating over here\Non
Dialogue: 0,0:13:30.39,0:13:33.02,Default,,0000,0000,0000,,the left a color value, and over on the
Dialogue: 0,0:13:33.02,0:13:37.02,Default,,0000,0000,0000,,right, three different, three different coordinates,\Nred, green, and
Dialogue: 0,0:13:37.02,0:13:40.53,Default,,0000,0000,0000,,blue. And we can see how those things relate
Dialogue: 0,0:13:40.53,0:13:45.40,Default,,0000,0000,0000,,to each other just by binding it into, binding
Dialogue: 0,0:13:45.40,0:13:47.99,Default,,0000,0000,0000,,it into our application.
Dialogue: 0,0:13:47.99,0:13:51.84,Default,,0000,0000,0000,,Now I've gotten rid of the, the desaturator\Nand
Dialogue: 0,0:13:51.84,0:13:54.51,Default,,0000,0000,0000,,put this RGB selector in here. So let's see
Dialogue: 0,0:13:54.51,0:13:57.43,Default,,0000,0000,0000,,what this ends up looking like. You can see
Dialogue: 0,0:13:57.43,0:14:01.97,Default,,0000,0000,0000,,I've got these sliders bound to those RGB\Nvalues,
Dialogue: 0,0:14:01.97,0:14:05.52,Default,,0000,0000,0000,,and I can do things like bring in red
Dialogue: 0,0:14:05.52,0:14:08.36,Default,,0000,0000,0000,,so that I've got, now, a pure yellow, and
Dialogue: 0,0:14:08.36,0:14:12.40,Default,,0000,0000,0000,,I can fade out the green until I've got
Dialogue: 0,0:14:12.40,0:14:16.60,Default,,0000,0000,0000,,my pure red. And so I can see how
Dialogue: 0,0:14:16.60,0:14:22.34,Default,,0000,0000,0000,,each individual color affects the, the final\Nvalue.
Dialogue: 0,0:14:22.34,0:14:24.37,Default,,0000,0000,0000,,Which is, you know, this is, this is, this
Dialogue: 0,0:14:24.37,0:14:28.52,Default,,0000,0000,0000,,is pretty neat. We're starting to, to get\Nsomething
Dialogue: 0,0:14:28.52,0:14:33.85,Default,,0000,0000,0000,,of a, of a more non-trivial application. But\Nwe
Dialogue: 0,0:14:33.85,0:14:38.47,Default,,0000,0000,0000,,still, we're still not seeing how the color\Nis
Dialogue: 0,0:14:38.47,0:14:41.32,Default,,0000,0000,0000,,actually constructed by the computer. And\Nto do that,
Dialogue: 0,0:14:41.32,0:14:43.95,Default,,0000,0000,0000,,we can use, we can, we can visualize not
Dialogue: 0,0:14:43.95,0:14:47.13,Default,,0000,0000,0000,,just the, the final output in that swatch,\Nbut
Dialogue: 0,0:14:47.13,0:14:51.100,Default,,0000,0000,0000,,we can actually visualize each value for red,\Ngreen,
Dialogue: 0,0:14:51.100,0:14:54.32,Default,,0000,0000,0000,,and blue, and how that relates to the original
Dialogue: 0,0:14:54.32,0:14:55.93,Default,,0000,0000,0000,,color.
Dialogue: 0,0:14:55.93,0:15:00.76,Default,,0000,0000,0000,,So, what I did was I made an RGB
Dialogue: 0,0:15:00.76,0:15:04.37,Default,,0000,0000,0000,,visualization component, and bound it to the\Ncolor, so
Dialogue: 0,0:15:04.37,0:15:07.45,Default,,0000,0000,0000,,that when the color updated, we visualize\Nnot the
Dialogue: 0,0:15:07.45,0:15:11.10,Default,,0000,0000,0000,,whole color, like the swatch, but the actual\Ndifferent
Dialogue: 0,0:15:11.10,0:15:14.31,Default,,0000,0000,0000,,red, green, and blue values. And that's what\Nthis
Dialogue: 0,0:15:14.31,0:15:16.90,Default,,0000,0000,0000,,looks like. You can see we've got, right here
Dialogue: 0,0:15:16.90,0:15:22.54,Default,,0000,0000,0000,,a pure green. But we can bring red in,
Dialogue: 0,0:15:22.54,0:15:25.35,Default,,0000,0000,0000,,slowly. And you can see how you get that,
Dialogue: 0,0:15:25.35,0:15:28.10,Default,,0000,0000,0000,,that yellow there, and then if we bring in
Dialogue: 0,0:15:28.10,0:15:31.50,Default,,0000,0000,0000,,blue, how it goes to white. But what we're
Dialogue: 0,0:15:31.50,0:15:35.89,Default,,0000,0000,0000,,seeing, now, is we're actually seeing how\Nthe color
Dialogue: 0,0:15:35.89,0:15:41.26,Default,,0000,0000,0000,,is added by the, the, the actual hardware.\NRGC
Dialogue: 0,0:15:41.26,0:15:43.85,Default,,0000,0000,0000,,is an additive model. We're taking a red value,
Dialogue: 0,0:15:43.85,0:15:45.66,Default,,0000,0000,0000,,a green value, and a blue value and we're
Dialogue: 0,0:15:45.66,0:15:47.31,Default,,0000,0000,0000,,adding them together so that the part where\Nall
Dialogue: 0,0:15:47.31,0:15:51.87,Default,,0000,0000,0000,,the circles overlap, that's all three colors\Nadded together.
Dialogue: 0,0:15:51.87,0:15:54.39,Default,,0000,0000,0000,,And then where only two of the circles overlap,
Dialogue: 0,0:15:54.39,0:15:56.14,Default,,0000,0000,0000,,those are where the other two circles are,\Nare
Dialogue: 0,0:15:56.14,0:15:58.69,Default,,0000,0000,0000,,together. So you can see that if I've got
Dialogue: 0,0:15:58.69,0:16:02.18,Default,,0000,0000,0000,,a pure yellow or I've got a pure cyan.
Dialogue: 0,0:16:02.18,0:16:06.70,Default,,0000,0000,0000,,Oops. If I've got a pure cyan, you know,
Dialogue: 0,0:16:06.70,0:16:09.60,Default,,0000,0000,0000,,I have no, I have no red component, and
Dialogue: 0,0:16:09.60,0:16:12.99,Default,,0000,0000,0000,,so the, the, the swatch or the part in
Dialogue: 0,0:16:12.99,0:16:15.08,Default,,0000,0000,0000,,the middle is the exact same as the overlap
Dialogue: 0,0:16:15.08,0:16:16.91,Default,,0000,0000,0000,,for green and blue. And so you can kind
Dialogue: 0,0:16:16.91,0:16:18.82,Default,,0000,0000,0000,,of play around with this and see how the
Dialogue: 0,0:16:18.82,0:16:22.34,Default,,0000,0000,0000,,individual colors mix and not be, not be distracted
Dialogue: 0,0:16:22.34,0:16:26.74,Default,,0000,0000,0000,,by the, the, the overall sum.
Dialogue: 0,0:16:26.74,0:16:29.60,Default,,0000,0000,0000,,And RGB is a great. RGB is great, if
Dialogue: 0,0:16:29.60,0:16:33.20,Default,,0000,0000,0000,,you happen to be a pixel. It can be
Dialogue: 0,0:16:33.20,0:16:36.21,Default,,0000,0000,0000,,difficult for us to understand RGB. The reason\Nthat
Dialogue: 0,0:16:36.21,0:16:38.74,Default,,0000,0000,0000,,we use RGB coordinates is because it's very\Neasy
Dialogue: 0,0:16:38.74,0:16:40.84,Default,,0000,0000,0000,,for a monitor to take three values, add them
Dialogue: 0,0:16:40.84,0:16:42.90,Default,,0000,0000,0000,,together, and like, that's the frequency of\Nlight that
Dialogue: 0,0:16:42.90,0:16:45.39,Default,,0000,0000,0000,,I need to emit. But that's not how we,
Dialogue: 0,0:16:45.39,0:16:50.93,Default,,0000,0000,0000,,as humans, actually perceive it. And so there\Nare,
Dialogue: 0,0:16:50.93,0:16:53.26,Default,,0000,0000,0000,,there are other coordinate systems that are\Nmore in
Dialogue: 0,0:16:53.26,0:16:56.46,Default,,0000,0000,0000,,tune with the way that we perceive color,\Nwhich
Dialogue: 0,0:16:56.46,0:16:59.06,Default,,0000,0000,0000,,unfortunately we don't actually use. You know,\NRGB is
Dialogue: 0,0:16:59.06,0:17:02.85,Default,,0000,0000,0000,,kind of like the assembly language of, of\Ncolor.
Dialogue: 0,0:17:02.85,0:17:06.43,Default,,0000,0000,0000,,It's what the machine understand.
Dialogue: 0,0:17:06.43,0:17:11.76,Default,,0000,0000,0000,,So, probably the most, the other most popular\Nformat,
Dialogue: 0,0:17:11.76,0:17:14.86,Default,,0000,0000,0000,,the most popular coordinate system for describing\Ncolor is
Dialogue: 0,0:17:14.86,0:17:18.90,Default,,0000,0000,0000,,called HSL. And it, it stands for hue, saturation,
Dialogue: 0,0:17:18.90,0:17:22.23,Default,,0000,0000,0000,,and lightness. To read briefly what these,\Nthese mean
Dialogue: 0,0:17:22.23,0:17:23.64,Default,,0000,0000,0000,,or what they're defined as.
Dialogue: 0,0:17:23.64,0:17:26.06,Default,,0000,0000,0000,,So, hue is the degree to which a stimulus
Dialogue: 0,0:17:26.06,0:17:28.52,Default,,0000,0000,0000,,can be described as similar to or different\Nfrom
Dialogue: 0,0:17:28.52,0:17:31.00,Default,,0000,0000,0000,,stimuli that are described as red, green,\Nblue, and
Dialogue: 0,0:17:31.00,0:17:35.84,Default,,0000,0000,0000,,yellow. Saturation. The colorfulness of a\Ncolor relative to
Dialogue: 0,0:17:35.84,0:17:41.09,Default,,0000,0000,0000,,its own brightness. Lightness. The subjective\Nbrightness, perception of
Dialogue: 0,0:17:41.09,0:17:44.87,Default,,0000,0000,0000,,a color for humans along a lightness/darkness\Naxis.
Dialogue: 0,0:17:44.87,0:17:48.68,Default,,0000,0000,0000,,Now, if you're like me, that really, even\Nthough
Dialogue: 0,0:17:48.68,0:17:51.86,Default,,0000,0000,0000,,it's aimed at me, it's completely and totally\Nincomprehensible.
Dialogue: 0,0:17:51.86,0:17:56.76,Default,,0000,0000,0000,,The, the, the vocabulary definitely is about\Nhumans and
Dialogue: 0,0:17:56.76,0:17:59.88,Default,,0000,0000,0000,,human perception, but it's still a black box.\NIt's
Dialogue: 0,0:17:59.88,0:18:03.43,Default,,0000,0000,0000,,still completely opaque. But, what we can\Ndo is
Dialogue: 0,0:18:03.43,0:18:05.69,Default,,0000,0000,0000,,we can add another model, and we can decompose
Dialogue: 0,0:18:05.69,0:18:08.50,Default,,0000,0000,0000,,that to unpack those individual coordinates\Nand see how
Dialogue: 0,0:18:08.50,0:18:13.53,Default,,0000,0000,0000,,they effect our, the, effect the different\Ncolor values.
Dialogue: 0,0:18:13.53,0:18:15.41,Default,,0000,0000,0000,,So let's go ahead and plug that in. I've
Dialogue: 0,0:18:15.41,0:18:17.96,Default,,0000,0000,0000,,got an HSL selector, just like I had the
Dialogue: 0,0:18:17.96,0:18:20.24,Default,,0000,0000,0000,,RGB selector, and we can see the, the, the
Dialogue: 0,0:18:20.24,0:18:22.72,Default,,0000,0000,0000,,hue, saturation, and lightness coordinates\Nover there on the
Dialogue: 0,0:18:22.72,0:18:26.17,Default,,0000,0000,0000,,left. So, right now we have a pure green.
Dialogue: 0,0:18:26.17,0:18:29.25,Default,,0000,0000,0000,,I can take it down to a pure red.
Dialogue: 0,0:18:29.25,0:18:31.59,Default,,0000,0000,0000,,We can move the h. We're gonna keep s
Dialogue: 0,0:18:31.59,0:18:33.13,Default,,0000,0000,0000,,and l, and you can see as I go
Dialogue: 0,0:18:33.13,0:18:34.92,Default,,0000,0000,0000,,to green, the red fades out til I've got
Dialogue: 0,0:18:34.92,0:18:36.82,Default,,0000,0000,0000,,a pure green, and then the blue fades in
Dialogue: 0,0:18:36.82,0:18:39.67,Default,,0000,0000,0000,,till we've got a pure cyan. Then the green
Dialogue: 0,0:18:39.67,0:18:43.04,Default,,0000,0000,0000,,fades out so that we've got a pure blue,
Dialogue: 0,0:18:43.04,0:18:46.17,Default,,0000,0000,0000,,and then red fades back in to purple, and
Dialogue: 0,0:18:46.17,0:18:48.39,Default,,0000,0000,0000,,then blue fades back out to red.
Dialogue: 0,0:18:48.39,0:18:51.11,Default,,0000,0000,0000,,I particularly, I love as I, as you watch
Dialogue: 0,0:18:51.11,0:18:55.49,Default,,0000,0000,0000,,the hue, seeing where the RGB sliders are\Ngoing.
Dialogue: 0,0:18:55.49,0:18:57.44,Default,,0000,0000,0000,,So you can see that the hue is going
Dialogue: 0,0:18:57.44,0:19:01.01,Default,,0000,0000,0000,,around that color circle. It's going around\Nthe color
Dialogue: 0,0:19:01.01,0:19:05.82,Default,,0000,0000,0000,,circle. And then as you adjust the saturation,\Nyou
Dialogue: 0,0:19:05.82,0:19:09.79,Default,,0000,0000,0000,,can see, OK. The red's coming down and the
Dialogue: 0,0:19:09.79,0:19:11.76,Default,,0000,0000,0000,,green and the blue are coming up in unison,
Dialogue: 0,0:19:11.76,0:19:14.18,Default,,0000,0000,0000,,and when I fully have zero saturation, then\Nwe're
Dialogue: 0,0:19:14.18,0:19:20.36,Default,,0000,0000,0000,,at a gray. And if I bring the saturation
Dialogue: 0,0:19:20.36,0:19:22.02,Default,,0000,0000,0000,,up, the, the green and blue go down in
Dialogue: 0,0:19:22.02,0:19:25.12,Default,,0000,0000,0000,,unison, and we're back to that pure color,\Nthat
Dialogue: 0,0:19:25.12,0:19:26.43,Default,,0000,0000,0000,,pure hue.
Dialogue: 0,0:19:26.43,0:19:31.02,Default,,0000,0000,0000,,So I think that this gives a, a much
Dialogue: 0,0:19:31.02,0:19:36.86,Default,,0000,0000,0000,,better view on, on these different coordinates.\NSame thing
Dialogue: 0,0:19:36.86,0:19:39.06,Default,,0000,0000,0000,,with lightness. You can see as we go from
Dialogue: 0,0:19:39.06,0:19:41.24,Default,,0000,0000,0000,,point five to one, it's almost like we're\Njust
Dialogue: 0,0:19:41.24,0:19:45.26,Default,,0000,0000,0000,,mixing in white unless you've got nothing\Nbut white,
Dialogue: 0,0:19:45.26,0:19:47.26,Default,,0000,0000,0000,,and as we decrease the lightness, you can\Nsee
Dialogue: 0,0:19:47.26,0:19:50.29,Default,,0000,0000,0000,,those, the green and the blue come down together.
Dialogue: 0,0:19:50.29,0:19:54.04,Default,,0000,0000,0000,,And then as we go from point five lightness
Dialogue: 0,0:19:54.04,0:19:58.48,Default,,0000,0000,0000,,to zero, we're just fading that hue to black.
Dialogue: 0,0:19:58.48,0:20:01.57,Default,,0000,0000,0000,,And so I think, even though the terminology\Nthat
Dialogue: 0,0:20:01.57,0:20:04.68,Default,,0000,0000,0000,,you might read on Wikipedia about what HSL\Nis
Dialogue: 0,0:20:04.68,0:20:09.17,Default,,0000,0000,0000,,is very opaque, it actually becomes pretty\Nclear about
Dialogue: 0,0:20:09.17,0:20:10.94,Default,,0000,0000,0000,,what it is when you, when you can play
Dialogue: 0,0:20:10.94,0:20:13.30,Default,,0000,0000,0000,,with the individual coordinates and see how\Nit relates
Dialogue: 0,0:20:13.30,0:20:20.30,Default,,0000,0000,0000,,to both the color at large, the, the, and,
Dialogue: 0,0:20:20.34,0:20:22.35,Default,,0000,0000,0000,,and also the, the additive color model that\Nthe
Dialogue: 0,0:20:22.35,0:20:26.14,Default,,0000,0000,0000,,computer's using.
Dialogue: 0,0:20:26.14,0:20:27.76,Default,,0000,0000,0000,,And we can also, and we can, we can
Dialogue: 0,0:20:27.76,0:20:34.14,Default,,0000,0000,0000,,visualize the HSL by making another visualizer,\Njust like
Dialogue: 0,0:20:34.14,0:20:35.88,Default,,0000,0000,0000,,we did with RGB. And we can bind it
Dialogue: 0,0:20:35.88,0:20:38.07,Default,,0000,0000,0000,,into our color model. I think we've got what,
Dialogue: 0,0:20:38.07,0:20:42.93,Default,,0000,0000,0000,,one, two, three, four, five different things.\NSix different
Dialogue: 0,0:20:42.93,0:20:45.17,Default,,0000,0000,0000,,things. Let's see. One, two, three, four,\Nfive, six,
Dialogue: 0,0:20:45.17,0:20:47.99,Default,,0000,0000,0000,,seven different things bound to this color.
Dialogue: 0,0:20:47.99,0:20:51.98,Default,,0000,0000,0000,,So, we've got quite a robot we're building\Nhere.
Dialogue: 0,0:20:51.98,0:20:54.19,Default,,0000,0000,0000,,And so this is, this is actually HSL space,
Dialogue: 0,0:20:54.19,0:20:56.46,Default,,0000,0000,0000,,and you might already be familiar with the\Ncolor
Dialogue: 0,0:20:56.46,0:20:59.36,Default,,0000,0000,0000,,selectors that use HSL. You can see that as
Dialogue: 0,0:20:59.36,0:21:04.21,Default,,0000,0000,0000,,I adjust the hue here, I'm going around that
Dialogue: 0,0:21:04.21,0:21:09.45,Default,,0000,0000,0000,,color wheel. And those, you can see where\Nthe
Dialogue: 0,0:21:09.45,0:21:12.96,Default,,0000,0000,0000,,color wheel fits on those, along the points.\NAnd
Dialogue: 0,0:21:12.96,0:21:17.16,Default,,0000,0000,0000,,the color that's selected is, is right down\Nthere.
Dialogue: 0,0:21:17.16,0:21:21.33,Default,,0000,0000,0000,,This, so what we're seeing here is the hue
Dialogue: 0,0:21:21.33,0:21:23.31,Default,,0000,0000,0000,,goes around in a circle. It's an actually\Na
Dialogue: 0,0:21:23.31,0:21:27.05,Default,,0000,0000,0000,,radial component. So, which is why it's from,\Nyou
Dialogue: 0,0:21:27.05,0:21:32.89,Default,,0000,0000,0000,,know, zero to three-sixty. And then the saturation,\Nor
Dialogue: 0,0:21:32.89,0:21:36.11,Default,,0000,0000,0000,,the intensity of the hue, is the radius of
Dialogue: 0,0:21:36.11,0:21:40.17,Default,,0000,0000,0000,,that circle. And then if we look at the
Dialogue: 0,0:21:40.17,0:21:46.32,Default,,0000,0000,0000,,lightness here, you can see that the lightness,\Nwe
Dialogue: 0,0:21:46.32,0:21:50.18,Default,,0000,0000,0000,,fade up to white at the top and then
Dialogue: 0,0:21:50.18,0:21:53.39,Default,,0000,0000,0000,,fade down to black. There, so as we adjust
Dialogue: 0,0:21:53.39,0:21:56.38,Default,,0000,0000,0000,,the, the lightness, we can go, we go up
Dialogue: 0,0:21:56.38,0:21:59.11,Default,,0000,0000,0000,,to white at the top and down to black
Dialogue: 0,0:21:59.11,0:22:02.63,Default,,0000,0000,0000,,at the bottom.
Dialogue: 0,0:22:02.63,0:22:06.20,Default,,0000,0000,0000,,So, that's, that's pretty neat. I think, I\Nthink
Dialogue: 0,0:22:06.20,0:22:12.53,Default,,0000,0000,0000,,there's a lot of power in that. By taking,
Dialogue: 0,0:22:12.53,0:22:14.70,Default,,0000,0000,0000,,you know, just, just, just by binding to a
Dialogue: 0,0:22:14.70,0:22:19.68,Default,,0000,0000,0000,,single value. But values, values are actually\Nnot just
Dialogue: 0,0:22:19.68,0:22:22.85,Default,,0000,0000,0000,,on the client. You can actually treat a server,
Dialogue: 0,0:22:22.85,0:22:25.37,Default,,0000,0000,0000,,for example, as a simple model. And so here,
Dialogue: 0,0:22:25.37,0:22:28.20,Default,,0000,0000,0000,,I'm, we're going to have a server component.\NAnd
Dialogue: 0,0:22:28.20,0:22:31.02,Default,,0000,0000,0000,,a server's a black box, but from the perspective
Dialogue: 0,0:22:31.02,0:22:32.89,Default,,0000,0000,0000,,of the rest of the client, it behaves just
Dialogue: 0,0:22:32.89,0:22:34.43,Default,,0000,0000,0000,,like any other model.
Dialogue: 0,0:22:34.43,0:22:38.16,Default,,0000,0000,0000,,If a color appears at that point, it's sent
Dialogue: 0,0:22:38.16,0:22:40.12,Default,,0000,0000,0000,,into the black box. It can be sent to
Dialogue: 0,0:22:40.12,0:22:43.71,Default,,0000,0000,0000,,the server, serialized, whatever. And by the\Nsame token,
Dialogue: 0,0:22:43.71,0:22:45.33,Default,,0000,0000,0000,,something can happen on the server and it\Ncan
Dialogue: 0,0:22:45.33,0:22:52.30,Default,,0000,0000,0000,,make a color value appear right there.
Dialogue: 0,0:22:52.30,0:22:55.51,Default,,0000,0000,0000,,So, we can use this concept to develop color
Dialogue: 0,0:22:55.51,0:22:57.94,Default,,0000,0000,0000,,book, which is the first social network for\Ncolor
Dialogue: 0,0:22:57.94,0:23:00.18,Default,,0000,0000,0000,,values, which I'm about to show you. And we
Dialogue: 0,0:23:00.18,0:23:03.89,Default,,0000,0000,0000,,can do this just by plugging in our server
Dialogue: 0,0:23:03.89,0:23:05.61,Default,,0000,0000,0000,,into our robot. I was actually kind of running
Dialogue: 0,0:23:05.61,0:23:09.66,Default,,0000,0000,0000,,out of room, so same basic concept. It's a
Dialogue: 0,0:23:09.66,0:23:12.52,Default,,0000,0000,0000,,little bit of a snakey cable there.
Dialogue: 0,0:23:12.52,0:23:15.09,Default,,0000,0000,0000,,And so now we'll do an actual live demo
Dialogue: 0,0:23:15.09,0:23:19.69,Default,,0000,0000,0000,,in here. So I've got, I wrote a little
Dialogue: 0,0:23:19.69,0:23:26.55,Default,,0000,0000,0000,,Rails app that uses web sockets to implement\Nthose
Dialogue: 0,0:23:26.55,0:23:31.39,Default,,0000,0000,0000,,servers. Or implement that, the, the, the\Nendpoints on
Dialogue: 0,0:23:31.39,0:23:36.71,Default,,0000,0000,0000,,the servers. So, we can now open up that
Dialogue: 0,0:23:36.71,0:23:43.71,Default,,0000,0000,0000,,example that you saw in two separate tabs.
Dialogue: 0,0:23:46.15,0:23:49.07,Default,,0000,0000,0000,,And then we can see them acting in unison
Dialogue: 0,0:23:49.07,0:23:54.03,Default,,0000,0000,0000,,here. And so what's actually happening here\Nis I
Dialogue: 0,0:23:54.03,0:24:01.03,Default,,0000,0000,0000,,got two different client-side applications,\Nbut they're all bound
Dialogue: 0,0:24:01.72,0:24:08.72,Default,,0000,0000,0000,,together.
Dialogue: 0,0:24:13.18,0:24:20.18,Default,,0000,0000,0000,,So, one of the things I hope to demonstrate
Dialogue: 0,0:24:27.11,0:24:31.19,Default,,0000,0000,0000,,is that there is actual power in simplicity,\Nwith
Dialogue: 0,0:24:31.19,0:24:33.72,Default,,0000,0000,0000,,keeping your models simple and keeping them\Ncomposable. I
Dialogue: 0,0:24:33.72,0:24:35.89,Default,,0000,0000,0000,,think that, you know, this is probably, in\Nterms
Dialogue: 0,0:24:35.89,0:24:39.99,Default,,0000,0000,0000,,of API, this was probably the, the most complex
Dialogue: 0,0:24:39.99,0:24:42.10,Default,,0000,0000,0000,,model that we had in the system. It's got,
Dialogue: 0,0:24:42.10,0:24:44.09,Default,,0000,0000,0000,,you know, four points that you can, you can
Dialogue: 0,0:24:44.09,0:24:48.84,Default,,0000,0000,0000,,bind to.
Dialogue: 0,0:24:48.84,0:24:54.18,Default,,0000,0000,0000,,But because, you know, because we understand\Nthe relationship
Dialogue: 0,0:24:54.18,0:24:57.26,Default,,0000,0000,0000,,between them, we can use each one of these
Dialogue: 0,0:24:57.26,0:25:01.16,Default,,0000,0000,0000,,individual models, which are very, very simple,\Nto link
Dialogue: 0,0:25:01.16,0:25:04.91,Default,,0000,0000,0000,,together in simple ways to make a very complex
Dialogue: 0,0:25:04.91,0:25:08.79,Default,,0000,0000,0000,,and, and interesting application. And so I\Nshied away
Dialogue: 0,0:25:08.79,0:25:12.25,Default,,0000,0000,0000,,from, from actually defining a model, because\Nlike I
Dialogue: 0,0:25:12.25,0:25:14.43,Default,,0000,0000,0000,,said, I don't want to get into nomenclature\Nwars.
Dialogue: 0,0:25:14.43,0:25:16.74,Default,,0000,0000,0000,,But I think it's fair to define a model
Dialogue: 0,0:25:16.74,0:25:20.75,Default,,0000,0000,0000,,as just a group of values with well understood
Dialogue: 0,0:25:20.75,0:25:25.41,Default,,0000,0000,0000,,relationships. Values with well understood\Nrelationships.
Dialogue: 0,0:25:25.41,0:25:28.01,Default,,0000,0000,0000,,And if we understand those relationships than\Nwe can
Dialogue: 0,0:25:28.01,0:25:32.77,Default,,0000,0000,0000,,compose them in very simple and easy ways.\NBut
Dialogue: 0,0:25:32.77,0:25:36.92,Default,,0000,0000,0000,,it's actually understanding the relationships\Nthat's the hard part.
Dialogue: 0,0:25:36.92,0:25:39.91,Default,,0000,0000,0000,,The is where the, the bulk of the work
Dialogue: 0,0:25:39.91,0:25:43.35,Default,,0000,0000,0000,,is.
Dialogue: 0,0:25:43.35,0:25:45.43,Default,,0000,0000,0000,,And I think that, that Plato got that, you
Dialogue: 0,0:25:45.43,0:25:48.34,Default,,0000,0000,0000,,know, when he original made this allegory\Nof the
Dialogue: 0,0:25:48.34,0:25:52.61,Default,,0000,0000,0000,,cave, one of his goals was to explain to
Dialogue: 0,0:25:52.61,0:25:58.03,Default,,0000,0000,0000,,people what exactly a philosopher does. What\Nhis job
Dialogue: 0,0:25:58.03,0:26:01.30,Default,,0000,0000,0000,,is. The philosopher's job is to look at those
Dialogue: 0,0:26:01.30,0:26:02.96,Default,,0000,0000,0000,,pictures, which is the only thing that we\Ncan
Dialogue: 0,0:26:02.96,0:26:07.63,Default,,0000,0000,0000,,conceive, and from it, infer and construct\Nthat model
Dialogue: 0,0:26:07.63,0:26:11.61,Default,,0000,0000,0000,,or form that's standing in front of the fire.
Dialogue: 0,0:26:11.61,0:26:14.33,Default,,0000,0000,0000,,And so when it comes to UI and, and
Dialogue: 0,0:26:14.33,0:26:19.59,Default,,0000,0000,0000,,software in general, the philosophy part falls\Nto you.
Dialogue: 0,0:26:19.59,0:26:24.03,Default,,0000,0000,0000,,That's your job. It can be very satisfying\Nand,
Dialogue: 0,0:26:24.03,0:26:26.33,Default,,0000,0000,0000,,and rewarding and I hope you have fun with
Dialogue: 0,0:26:26.33,0:26:27.97,Default,,0000,0000,0000,,it.
Dialogue: 0,0:26:27.97,0:26:28.61,Default,,0000,0000,0000,,Thank you.