WEBVTT - This file was automatically generated by VIMEO 0 00:00:01.155 --> 00:00:01.535 Hi there. 1 00:00:01.635 --> 00:00:02.735 My name's Aral Balkan 2 00:00:02.915 --> 00:00:04.775 and I want to take you 3 00:00:04.775 --> 00:00:08.215 through building Draw Together, a little toy that I made 4 00:00:08.215 --> 00:00:10.175 with Kitten and released over the weekend. 5 00:00:10.675 --> 00:00:12.135 Um, I wanna take you through making 6 00:00:12.165 --> 00:00:14.135 that from scratch together. 7 00:00:14.595 --> 00:00:16.495 Uh, but first of all, what is Draw Together? 8 00:00:16.555 --> 00:00:18.055 So, let's take a look. 9 00:00:18.755 --> 00:00:21.855 Uh, if you go to draw together, 10 00:00:22.755 --> 00:00:26.455 dot small-web.org, that's draw dash together, 11 00:00:26.715 --> 00:00:28.735 dot small dash web dot org. 12 00:00:29.355 --> 00:00:32.255 Um, you'll see that it's a shared canvas, and here we are, 13 00:00:32.275 --> 00:00:35.015 and there's someone there already, uh, 14 00:00:36.245 --> 00:00:38.135 putting some pixels on the canvas. 15 00:00:39.015 --> 00:00:40.775 I, uh, announced 16 00:00:40.775 --> 00:00:42.855 that I would be recording this on the fediverse, 17 00:00:42.915 --> 00:00:45.135 so some people are already there. 18 00:00:45.835 --> 00:00:50.335 Um, and we can, as you can see, I'm, uh, drawing something. 19 00:00:50.475 --> 00:00:53.295 I'm, I'm contributing some pixels and so are other people. 20 00:00:53.315 --> 00:00:55.175 So we are drawing together. 21 00:00:55.875 --> 00:01:00.215 Um, and, uh, so, uh, I built this using Kitten, 22 00:01:00.585 --> 00:01:03.655 which is a Small Web development kit. 23 00:01:04.275 --> 00:01:08.975 And, uh, let's go ahead and, uh, build it together. 24 00:01:09.635 --> 00:01:11.775 So to begin with, you will need Kitten. 25 00:01:12.155 --> 00:01:16.455 So let us go to, uh, 26 00:01:16.805 --> 00:01:21.735 codeberg.org/kitten/app. 27 00:01:22.835 --> 00:01:26.415 And if you scroll down there to the readme, 28 00:01:26.635 --> 00:01:29.015 and in the Read Me, uh, you'll see 29 00:01:29.015 --> 00:01:30.415 that there's an Install Kitten section 30 00:01:30.795 --> 00:01:34.375 and we can install it by using, uh, one of these, 31 00:01:34.755 --> 00:01:35.975 uh, terminal commands. 32 00:01:35.975 --> 00:01:39.175 So I'll just copy the one that uses Curl 33 00:01:40.195 --> 00:01:43.015 and let me paste that in here. 34 00:01:44.275 --> 00:01:47.575 And we can see here that Kitten has been installed. 35 00:01:47.595 --> 00:01:49.855 Now I can check that by running kitten dash dash 36 00:01:50.165 --> 00:01:51.255 version, for example. 37 00:01:51.895 --> 00:01:54.135 I can see that Kitten is running well. 38 00:01:54.365 --> 00:01:56.415 Okay, so it's been installed and it's running. 39 00:01:57.155 --> 00:01:59.735 Um, and it will be very, very quick for you as well. 40 00:02:00.435 --> 00:02:05.055 So, um, let me now, 41 00:02:05.475 --> 00:02:07.895 uh, make a directory for our project Draw Together. 42 00:02:08.475 --> 00:02:10.255 And, uh, let's get it started. 43 00:02:10.475 --> 00:02:12.975 So make their draw dash together 44 00:02:13.355 --> 00:02:15.615 and then I will, uh, change 45 00:02:15.685 --> 00:02:18.015 that directory CD draw dash together. 46 00:02:19.155 --> 00:02:23.335 And, uh, what I'm gonna do here is I am going to, 47 00:02:25.075 --> 00:02:26.575 uh, run Kitten. 48 00:02:27.115 --> 00:02:30.655 So let me just run Kitten. 49 00:02:30.655 --> 00:02:32.215 And you can see it says “Server is running 50 00:02:32.235 --> 00:02:35.415 and listening for connections”, and Kitten is running there. 51 00:02:36.315 --> 00:02:39.415 So that is good. Let me go back into my other pane. 52 00:02:39.955 --> 00:02:42.695 And here I'm going to, uh, 53 00:02:44.045 --> 00:02:45.175 open up localhost. 54 00:02:45.595 --> 00:02:46.895 So let's go to localhost. 55 00:02:47.755 --> 00:02:52.655 And we have a 404 page not found, which is to be expected, 56 00:02:53.635 --> 00:02:56.335 um, because we have nothing there yet. 57 00:02:56.915 --> 00:02:59.095 So I'm going to, uh, 58 00:02:59.345 --> 00:03:04.045 create our index file: index.page.js. In kitten, 59 00:03:04.265 --> 00:03:05.365 the extensions are important. 60 00:03:05.365 --> 00:03:07.005 They tell you what kind of file it is. 61 00:03:07.005 --> 00:03:08.845 In this case it's a page, um, 62 00:03:08.895 --> 00:03:11.005 which will have a default route that, uh, 63 00:03:11.165 --> 00:03:12.525 responds to GET requests. 64 00:03:13.105 --> 00:03:17.125 Um, and so I create that and our error changes immediately. 65 00:03:17.485 --> 00:03:18.925 'cause Kitten has live reload 66 00:03:19.465 --> 00:03:22.165 and it says, uh, that that route is missing. 67 00:03:22.295 --> 00:03:23.325 We're not exporting a route 68 00:03:23.325 --> 00:03:25.805 because of course there's nothing in the file right now. 69 00:03:26.385 --> 00:03:28.205 So, uh, let's handle that. 70 00:03:28.585 --> 00:03:30.605 So I'm going to open up Helix Editor 71 00:03:31.545 --> 00:03:33.165 and open up that index page. 72 00:03:33.625 --> 00:03:36.925 And, uh, so let's just export our default route 73 00:03:38.745 --> 00:03:40.565 and let's actually just make it return 74 00:03:40.565 --> 00:03:41.805 nothing right now. 75 00:03:42.865 --> 00:03:46.085 So this is the simplest possible page you could have. 76 00:03:46.195 --> 00:03:48.205 It's nothing. It's not exactly nothing. 77 00:03:48.455 --> 00:03:51.485 There is the, uh, script that enables us 78 00:03:51.485 --> 00:03:53.845 to have those live reloads, et cetera, being injected in. 79 00:03:53.845 --> 00:03:56.205 But you know, from what we can see, it's nothing. 80 00:03:57.025 --> 00:03:58.485 Um, but we don't want it to be nothing. 81 00:03:58.745 --> 00:04:00.325 We want it to be more than that. 82 00:04:00.825 --> 00:04:05.165 So let's return some kitten, HTML 83 00:04:07.025 --> 00:04:09.685 and, um, in that HTML, uh, 84 00:04:09.685 --> 00:04:11.725 for one thing you can see here in the tab, 85 00:04:11.725 --> 00:04:14.365 it says draw together dash dot Js. 86 00:04:14.785 --> 00:04:18.765 Um, it's trying to create a, uh, a title for you, 87 00:04:18.825 --> 00:04:20.645 but let's, uh, help it along there 88 00:04:20.705 --> 00:04:23.125 by actually providing a title with the page tag. 89 00:04:23.705 --> 00:04:26.125 And we'll call it Draw Together 90 00:04:27.745 --> 00:04:28.925 and close that page 91 00:04:29.065 --> 00:04:32.405 tag. Page is a, uh, special tag in Kitten 92 00:04:32.405 --> 00:04:36.005 where you can actually, uh, add page related metadata, uh, 93 00:04:36.005 --> 00:04:38.285 like the title, uh, as we just did. 94 00:04:38.665 --> 00:04:41.565 So, um, the titles now changed. That's nice. 95 00:04:41.565 --> 00:04:44.285 So what do we want to do? We wanna have a 20 96 00:04:44.905 --> 00:04:49.725 by 20 pixel grid that people can, um, tap on 97 00:04:49.725 --> 00:04:53.525 or click on and draw, uh, by alternating 98 00:04:53.525 --> 00:04:54.725 between black and white, right? 99 00:04:54.725 --> 00:04:56.285 Very, very simple drawing application. 100 00:04:57.425 --> 00:05:00.765 So, um, the pixel grid is actually going to be a grid 101 00:05:00.765 --> 00:05:03.085 of buttons, so 20 by 20… 400 buttons. 102 00:05:03.595 --> 00:05:05.325 Okay? So, um, we need some sort 103 00:05:05.325 --> 00:05:06.565 of a data structure to hold this. 104 00:05:07.895 --> 00:05:10.125 Let's do the simplest thing that could possibly work. 105 00:05:10.125 --> 00:05:11.165 Let's just do it manually. 106 00:05:11.985 --> 00:05:16.165 So I'm gonna say const rows, and that will be an array, 107 00:05:17.105 --> 00:05:19.525 and we will have columns inside of that. 108 00:05:20.145 --> 00:05:22.365 And, uh, what is the information we wanna keep 109 00:05:22.365 --> 00:05:23.685 inside of these columns though? 110 00:05:24.185 --> 00:05:27.045 Um, so if we have our colours, 111 00:05:28.425 --> 00:05:31.805 so we are just going to have, uh, white 112 00:05:33.065 --> 00:05:35.205 and black, right? 113 00:05:35.205 --> 00:05:37.485 Those are CSS colour names, um, 114 00:05:37.745 --> 00:05:40.885 and we're going to alternate between those when people, um, 115 00:05:40.885 --> 00:05:42.085 press on the buttons. 116 00:05:42.585 --> 00:05:47.045 So we can use the indices in this colours array, uh, 117 00:05:47.505 --> 00:05:49.565 as our, uh, pixel values. 118 00:05:50.665 --> 00:05:52.405 So, um, to start off with, 119 00:05:52.455 --> 00:05:54.245 we'll have a white canvas; all white. 120 00:05:54.265 --> 00:05:56.405 So the index for that in the colours array is zero. 121 00:05:56.985 --> 00:06:01.765 Um, so I can just go ahead and manually, so here we go. 122 00:06:02.195 --> 00:06:03.605 There's five of them. 123 00:06:04.345 --> 00:06:05.725 Um, I can go ahead 124 00:06:06.145 --> 00:06:10.725 and, uh, copy that, paste it. 125 00:06:11.375 --> 00:06:14.485 Let's see, three, four times. 126 00:06:15.105 --> 00:06:16.685 Um, how many is that? 127 00:06:17.385 --> 00:06:21.765 Um, that is 10… 20. There we go. Okay. 128 00:06:22.385 --> 00:06:25.885 So, uh, of course we are then going to need columns, 129 00:06:26.265 --> 00:06:27.525 uh, sorry, the rows. 130 00:06:28.025 --> 00:06:29.725 So I'll copy this… 131 00:06:34.505 --> 00:06:35.165 20 times. 132 00:06:36.305 --> 00:06:38.125 Um, and uh, there we go. 133 00:06:38.305 --> 00:06:41.805 We have, uh, created our grid, 134 00:06:42.625 --> 00:06:46.605 and now we're going to use that grid, um, to, uh, 135 00:06:47.085 --> 00:06:50.325 actually we want to draw, uh, the grid, uh, 136 00:06:50.325 --> 00:06:51.805 of pixels, of, of buttons. 137 00:06:52.305 --> 00:06:54.925 So we are going to have to map over that. 138 00:06:56.545 --> 00:07:00.405 So here I'm going to say rows – in the string 139 00:07:00.405 --> 00:07:04.885 interpolation – in my Kitten HTML template, uh, rows map. 140 00:07:05.025 --> 00:07:06.605 And then I'll get a row back from there. 141 00:07:07.665 --> 00:07:12.525 Um, and uh, also we're going to need the index as well of 142 00:07:12.525 --> 00:07:14.285 that row in order to identify the pixel. 143 00:07:14.385 --> 00:07:16.525 So we'll say row index. Okay. 144 00:07:17.585 --> 00:07:21.965 And, um, then we are going to, uh, 145 00:07:22.465 --> 00:07:26.925 map again the, uh, on the columns of that. 146 00:07:26.945 --> 00:07:29.885 So from the row we'll map to 147 00:07:31.745 --> 00:07:35.125 column and column index. 148 00:07:36.545 --> 00:07:40.005 Um, and then we will return some Kitten HTML. 149 00:07:40.005 --> 00:07:42.645 So we'll map all of that to some HTML, which is going 150 00:07:42.645 --> 00:07:44.245 to be the button that we have. 151 00:07:45.465 --> 00:07:46.605 So there we go. 152 00:07:47.745 --> 00:07:52.725 And, uh, actually our column is, uh, 153 00:07:52.755 --> 00:07:57.165 each one of these little, um, pixels, right, the value here, 154 00:07:57.165 --> 00:07:58.885 which is the colour index, isn't it? 155 00:07:58.885 --> 00:08:01.165 It's, it's actually the, the column, the value 156 00:08:01.165 --> 00:08:04.045 of the column, uh, is the colour index. 157 00:08:04.345 --> 00:08:07.205 So, uh, it might be better to call it that. 158 00:08:07.265 --> 00:08:08.845 So instead of column, we'll call it 159 00:08:09.935 --> 00:08:13.245 colour index. 160 00:08:14.115 --> 00:08:17.845 Okay, so now we need to draw those buttons. 161 00:08:19.065 --> 00:08:20.805 So here's a button tag 162 00:08:22.105 --> 00:08:24.685 and it won't have a text value. 163 00:08:25.905 --> 00:08:29.805 Um, and, uh, we need to draw these, um, 164 00:08:30.295 --> 00:08:32.445 using fixed positioning so that we'll have 20 165 00:08:32.465 --> 00:08:33.525 by 20, it doesn't matter. 166 00:08:33.545 --> 00:08:34.805 The aspect ratio doesn't matter. 167 00:08:34.805 --> 00:08:36.485 It's a very simple toy, right? 168 00:08:36.865 --> 00:08:39.045 Um, and it will display, you know, 169 00:08:39.235 --> 00:08:40.645 400 buttons on every display. 170 00:08:40.865 --> 00:08:42.445 Uh, the aspect ratio may differ, 171 00:08:42.585 --> 00:08:45.045 but still it's, uh, we're keeping it simple. 172 00:08:45.945 --> 00:08:48.085 So, um, fixed positioning. 173 00:08:48.625 --> 00:08:50.965 And since we have 20 rows 174 00:08:50.985 --> 00:08:55.565 and 20 columns, uh, a hundred percent of the width 175 00:08:55.565 --> 00:08:57.485 and the height divided by 20 is 5%. 176 00:08:57.505 --> 00:08:59.285 So they're gonna take up 5% of the width 177 00:08:59.285 --> 00:09:00.365 and 5% of the height. 178 00:09:01.145 --> 00:09:02.525 So let's, uh, go ahead 179 00:09:02.585 --> 00:09:07.125 and create a style, okay, um, 180 00:09:07.225 --> 00:09:08.285 in line style there. 181 00:09:08.705 --> 00:09:11.005 And let's just write the CSS inline to begin with. 182 00:09:11.585 --> 00:09:15.485 Um, so we are going to say position: fixed. 183 00:09:16.435 --> 00:09:20.405 Okay? And, uh, so for the top, 184 00:09:20.735 --> 00:09:23.445 we'll calculate that as 185 00:09:24.035 --> 00:09:27.885 5% times the row index. 186 00:09:28.545 --> 00:09:32.765 So it'll be 0, 1, 2, 3, 5% times, um, 187 00:09:32.915 --> 00:09:34.765 that value as we go. 188 00:09:35.185 --> 00:09:39.685 And then the left offset, we'll calculate 189 00:09:39.685 --> 00:09:42.445 that also as 5% times 190 00:09:43.745 --> 00:09:45.285 the column index. 191 00:09:46.625 --> 00:09:48.725 And, uh, then finally we need 192 00:09:48.725 --> 00:09:50.765 to set the background colour right 193 00:09:51.465 --> 00:09:55.605 and the background colour we will set, um, 194 00:09:56.095 --> 00:09:58.925 based on the colour index, right? 195 00:09:58.985 --> 00:10:01.965 So we'll say colours, um, 196 00:10:05.255 --> 00:10:08.925 sorry, um, based on, uh, 197 00:10:11.665 --> 00:10:15.965 the, yeah, based on the color index. 198 00:10:16.115 --> 00:10:20.805 Yeah. Um, so, uh, we are gonna say 199 00:10:21.425 --> 00:10:25.005 colous, colour index. 200 00:10:25.195 --> 00:10:29.005 Yeah, that is correct. Okay. Okay. 201 00:10:29.505 --> 00:10:32.445 So, um, position fixed, top left. 202 00:10:32.505 --> 00:10:34.445 Now we need its width as well. 203 00:10:36.365 --> 00:10:39.365 Remember we said it was 5% of the screen 204 00:10:40.065 --> 00:10:43.045 and, uh, the height as well, 5%. 205 00:10:44.175 --> 00:10:47.165 Since this is, we don't want it to display as a, as a button 206 00:10:47.195 --> 00:10:48.685 with its border and styling, 207 00:10:48.685 --> 00:10:50.525 we're gonna set its border to zero. 208 00:10:51.905 --> 00:10:53.925 Now let's see what happens when we save. 209 00:10:55.345 --> 00:10:58.645 Um, it's nothing, uh, but if I click over here 210 00:10:58.785 --> 00:11:01.485 and if I tab, oh, looks like there are, yeah, look at that. 211 00:11:01.935 --> 00:11:03.085 Those are our buttons, 212 00:11:03.085 --> 00:11:05.405 we just can't see them because they're white. 213 00:11:05.785 --> 00:11:08.725 Um, if we wanted to be able to see them, we could, uh, 214 00:11:08.825 --> 00:11:11.365 for example, change the white to red 215 00:11:12.265 --> 00:11:13.405 and we can see, okay, 216 00:11:13.405 --> 00:11:15.365 so the whole canvas is being filled up. 217 00:11:15.365 --> 00:11:17.965 The whole, uh, page is being filled up with these buttons. 218 00:11:18.505 --> 00:11:22.965 Um, but right now, uh, they are not doing anything. 219 00:11:23.785 --> 00:11:27.205 So let me go ahead and make that white again. 220 00:11:28.505 --> 00:11:31.725 Um, and also, uh, at this point, let's also just, 221 00:11:31.865 --> 00:11:33.885 uh, refactor this. 222 00:11:34.245 --> 00:11:36.605 'cause the way that we are setting the initial, um, 223 00:11:37.035 --> 00:11:39.325 data structure, it's good to visualize it, right? 224 00:11:39.825 --> 00:11:43.045 Um, because if I was to go in here, uh, manually 225 00:11:43.505 --> 00:11:46.805 and I could just, for example, manually start drawing stuff, 226 00:11:47.305 --> 00:11:49.285 uh, this is like how we used to do things. 227 00:11:49.585 --> 00:11:53.445 Um, back in the day with, uh, 8-bit computers 228 00:11:53.465 --> 00:11:55.485 and stuff, we would have our grid paper 229 00:11:56.425 --> 00:11:59.045 and we would be, uh, drawing things. 230 00:11:59.045 --> 00:12:03.005 Lemme see how this is gonna come out, uh, by just setting, 231 00:12:03.225 --> 00:12:05.565 you know, colour values and uh, 232 00:12:07.305 --> 00:12:12.245 and, um, then drawing those into, into memory. 233 00:12:12.345 --> 00:12:16.325 So I've drawn something, I think, uh, if I go 234 00:12:16.385 --> 00:12:20.125 and save this now, I should get, there we go. 235 00:12:20.655 --> 00:12:24.085 There we go. Drew a heart! Hey-hey! All right. 236 00:12:24.305 --> 00:12:26.125 So we understand the concept of how 237 00:12:26.125 --> 00:12:27.165 that data structure works. 238 00:12:27.195 --> 00:12:29.565 It's a very, very basic data structure, 239 00:12:30.225 --> 00:12:32.445 but we don't have to, um, 240 00:12:33.375 --> 00:12:35.605 write it out like this to initialize it. 241 00:12:35.985 --> 00:12:40.565 So instead, what I want to do, um, is, uh, 242 00:12:40.625 --> 00:12:41.685 do it programmatically. 243 00:12:41.865 --> 00:12:43.325 So I'll say new array, 244 00:12:43.475 --> 00:12:46.085 because that's gonna be our rows array with 20 places. 245 00:12:46.785 --> 00:12:48.885 And we'll just fill those. 246 00:12:49.625 --> 00:12:53.765 And then, um, we will map that so 247 00:12:53.765 --> 00:12:57.525 that each row actually gets a new array 248 00:12:57.915 --> 00:13:00.325 with 20 columns, right? 249 00:13:00.775 --> 00:13:03.965 Which will fill with zero, 250 00:13:04.575 --> 00:13:07.365 which is our colour index for white. 251 00:13:07.945 --> 00:13:10.565 So if I do that now, it should be back to being white, 252 00:13:10.625 --> 00:13:12.605 but if I tab around, you'll see that, yeah, 253 00:13:12.605 --> 00:13:14.525 the buttons are still there. 254 00:13:15.555 --> 00:13:18.565 Okay? So pressing the button, we need to somehow 255 00:13:19.315 --> 00:13:23.525 connect those buttons to this backend that we have, uh, so 256 00:13:23.525 --> 00:13:26.605 that we can cycle those colours when a button is pressed. 257 00:13:27.065 --> 00:13:28.965 Um, and the way we do that in Kitten 258 00:13:28.965 --> 00:13:31.645 with the streaming HTML workflow, it's very, very simple. 259 00:13:33.065 --> 00:13:37.725 Um, we basically use the connect attribute, 260 00:13:38.825 --> 00:13:41.525 and we, on our page, 261 00:13:42.145 --> 00:13:46.245 we export a function called onConnect. 262 00:13:47.545 --> 00:13:49.725 Now this gets a reference to the page 263 00:13:52.315 --> 00:13:54.445 that is connecting, okay? 264 00:13:55.345 --> 00:13:58.045 And in fact, we can just see that if I console log that 265 00:13:59.565 --> 00:14:01.125 I said, I'll say, uh, 266 00:14:01.155 --> 00:14:05.325 page connected, there we go. 267 00:14:06.255 --> 00:14:08.805 Let's put that there. And then if I open up 268 00:14:09.345 --> 00:14:12.405 the console here, you can see once I refresh… page 269 00:14:12.405 --> 00:14:13.885 connected, okay, cool. 270 00:14:13.885 --> 00:14:17.285 So the page is connected. Um, what can we do there? 271 00:14:17.915 --> 00:14:22.005 Well, um, we need to know when, um, these buttons 272 00:14:22.865 --> 00:14:24.485 are being clicked. 273 00:14:24.745 --> 00:14:27.125 Um, click is the default kind of event on it. 274 00:14:27.545 --> 00:14:29.365 Um, but we need to, uh, 275 00:14:29.365 --> 00:14:31.285 somehow have these buttons raise events 276 00:14:31.545 --> 00:14:34.765 and us, uh, be able to listen to those events 277 00:14:35.105 --> 00:14:36.245 inside the server. 278 00:14:36.665 --> 00:14:41.205 And the way we do that is by giving the, uh, button a name, 279 00:14:42.905 --> 00:14:45.565 the name that the button has, will be the name of the event 280 00:14:45.565 --> 00:14:47.405 that we listen to when the default 281 00:14:47.405 --> 00:14:48.645 action occurs on the button. 282 00:14:48.745 --> 00:14:50.085 You can also change it to listen 283 00:14:50.085 --> 00:14:51.325 for other actions, et cetera. 284 00:14:51.325 --> 00:14:53.605 That's, uh, a bit more complicated. 285 00:14:54.105 --> 00:14:58.085 So here then once we've, uh, given that name, we can, uh, 286 00:14:58.085 --> 00:14:59.845 listen for that event, the pixel event. 287 00:15:00.585 --> 00:15:04.325 So we'll say page on pixel, 288 00:15:05.545 --> 00:15:08.725 and then I'll create a, uh, 289 00:15:10.035 --> 00:15:11.485 handler there, event handler. 290 00:15:11.585 --> 00:15:15.765 And again, let's just log it console log “pixel 291 00:15:16.955 --> 00:15:18.525 pressed”, okay? 292 00:15:20.185 --> 00:15:24.405 And I'll save that. And, uh, I'll show you my console there, 293 00:15:24.665 --> 00:15:25.685 uh, where kitten is running. 294 00:15:25.985 --> 00:15:29.245 Oh, there we go. And as I'm clicking around, okay, pixel 295 00:15:29.255 --> 00:15:30.925 pressed, pixel pressed, pixel pressed, 296 00:15:31.385 --> 00:15:34.285 that's pretty cool, but which pixel? 297 00:15:34.945 --> 00:15:36.125 All right, so that's the problem. 298 00:15:36.425 --> 00:15:39.205 Uh, we need to, uh, somehow be able 299 00:15:39.205 --> 00:15:41.365 to identify these pixels. 300 00:15:41.985 --> 00:15:45.005 So let's give these, uh, pixels, um, 301 00:15:45.665 --> 00:15:49.325 and ID to begin with so that, uh, 302 00:15:49.865 --> 00:15:51.805 we can update them in the future as well. 303 00:15:52.225 --> 00:15:56.885 So I'll say pixel row index, dash 304 00:15:58.945 --> 00:16:01.645 column index, okay. 305 00:16:02.785 --> 00:16:06.365 So each one will now have a, uh, unique id, 306 00:16:07.345 --> 00:16:10.725 but we don't get that information, uh, 307 00:16:11.635 --> 00:16:12.645 sent automatically. 308 00:16:12.985 --> 00:16:17.125 The way we can send information we want to send is by using 309 00:16:17.785 --> 00:16:18.965 the data attribute. 310 00:16:19.585 --> 00:16:22.085 And so I'll say here data 311 00:16:23.025 --> 00:16:27.125 and, uh, we'll make that a, uh, 312 00:16:27.305 --> 00:16:29.605 an object there. 313 00:16:29.855 --> 00:16:32.605 Sorry. Oops, let's go back there. 314 00:16:34.265 --> 00:16:36.325 All right, let's make that an object. 315 00:16:36.985 --> 00:16:38.965 And in there I'll say row index, 316 00:16:43.105 --> 00:16:44.365 set that to the row index 317 00:16:45.185 --> 00:16:48.885 and column index, set that 318 00:16:48.985 --> 00:16:50.565 to the column index. 319 00:16:51.825 --> 00:16:56.685 And uh, so now this data will be sent to our on connect, 320 00:16:57.185 --> 00:16:59.485 uh, sorry, onto our pixel handler here. 321 00:17:00.585 --> 00:17:03.005 Uh, so I can just get that data over here 322 00:17:03.345 --> 00:17:06.565 and let's actually have it, 323 00:17:07.185 --> 00:17:09.165 um, displayed as well. 324 00:17:09.225 --> 00:17:11.405 Ooh, I've got a syntax error, it's telling me. 325 00:17:11.985 --> 00:17:14.805 So somewhere I have made a syntax error. 326 00:17:16.025 --> 00:17:18.165 Uh, where have I made that? Syntax error? 327 00:17:19.145 --> 00:17:24.125 Uh, pixel, let's see. It will also tell me that as well. 328 00:17:24.465 --> 00:17:28.845 Um, possibly. Nope, it doesn't, it, there's not, alright, 329 00:17:28.875 --> 00:17:33.765 missing, uh, closings after arguments list. 330 00:17:34.465 --> 00:17:38.485 So let's go back to my code. 331 00:17:39.585 --> 00:17:43.085 Um, so missing closing parameter 332 00:17:43.085 --> 00:17:44.845 after arguments list. 333 00:17:46.565 --> 00:17:50.205 Interesting. Uh, oh, here it is. 334 00:17:50.205 --> 00:17:53.125 Yeah, I mean, we're getting that, that's where I was, uh, 335 00:17:53.205 --> 00:17:54.525 flailing around earlier. 336 00:17:55.125 --> 00:17:57.605 I must have deleted something. What did I delete? 337 00:17:58.505 --> 00:18:00.645 Um, it would look like there's the end of the button, 338 00:18:01.465 --> 00:18:02.645 um, that we're returning. 339 00:18:03.265 --> 00:18:06.765 Uh, where is the end of, 340 00:18:08.585 --> 00:18:10.605 Oh yeah, I must have just deleted some stuff 341 00:18:10.625 --> 00:18:12.965 as I was… fat fingers. 342 00:18:13.295 --> 00:18:15.965 There we go. Um, and I think that was it. 343 00:18:15.965 --> 00:18:19.645 It was just the end of the string. Okay, so that's loaded. 344 00:18:20.385 --> 00:18:22.325 And now if I open up my console 345 00:18:22.385 --> 00:18:24.925 and I go over here, okay, so now you can see 346 00:18:25.115 --> 00:18:27.925 that wherever I click, um, 347 00:18:28.305 --> 00:18:30.805 so I'm clicking at the very first on the very first button, 348 00:18:30.905 --> 00:18:32.485 row index, zero column, index zero. 349 00:18:32.565 --> 00:18:34.525 I go all the way to the end, try 350 00:18:34.525 --> 00:18:36.045 to click there, almost got it. 351 00:18:36.045 --> 00:18:38.325 There we go. 19, 19. 352 00:18:38.595 --> 00:18:41.485 Okay, so I'm getting the row index in the column index back. 353 00:18:41.985 --> 00:18:46.045 That's great. That is what I need to use. 354 00:18:46.825 --> 00:18:51.285 Um, so here, what I need to do now is, um, 355 00:18:52.905 --> 00:18:57.085 use that row index and that column index, um, to update 356 00:18:57.595 --> 00:19:00.565 this, uh, 20 by 20, uh, data structure 357 00:19:00.565 --> 00:19:03.205 that we have the right pixel value there. 358 00:19:03.505 --> 00:19:07.885 Um, with the, uh, colour index, we need to, uh, cycle 359 00:19:07.885 --> 00:19:09.085 through these two colours. 360 00:19:09.705 --> 00:19:14.445 So I'm going to say rows data 361 00:19:15.025 --> 00:19:19.325 row index data dot column index 362 00:19:21.635 --> 00:19:23.805 Plus Plus, okay? 363 00:19:25.185 --> 00:19:27.285 And, uh, actually I don't need to do plus plus. 364 00:19:27.625 --> 00:19:32.325 You know what, um, those values, uh, are zeros in one, one 365 00:19:32.325 --> 00:19:34.125 that we do, because we might want to add more colours. 366 00:19:34.525 --> 00:19:35.765 I could have just used Boolean logic, 367 00:19:35.785 --> 00:19:37.885 but you know, we might wanna have 16 colors there, 368 00:19:37.885 --> 00:19:39.885 so we should really cycle through them so 369 00:19:39.885 --> 00:19:41.445 that this is nice and extensible. 370 00:19:41.945 --> 00:19:43.285 So I'm gonna say plus, plus, 371 00:19:43.425 --> 00:19:45.645 but then we also have to check to make sure that it has, 372 00:19:45.665 --> 00:19:47.725 it doesn't overflow, right? 373 00:19:48.145 --> 00:19:50.525 So I'll say const colour 374 00:19:52.415 --> 00:19:53.485 index equals, 375 00:19:53.745 --> 00:19:56.405 and I'll just set it to 376 00:19:57.625 --> 00:19:58.965 the current value of that. 377 00:19:59.865 --> 00:20:03.645 And I'll say if colour index 378 00:20:04.395 --> 00:20:07.685 greater than colours, uh, sorry, 379 00:20:07.685 --> 00:20:09.285 not even greater than actually if it 380 00:20:09.305 --> 00:20:10.725 equals colours length, right? 381 00:20:10.925 --> 00:20:12.365 'cause remember the indices are zero and one, 382 00:20:12.365 --> 00:20:13.725 and the length is gonna be two in this case. 383 00:20:14.585 --> 00:20:17.205 Uh, then I will just go ahead 384 00:20:18.425 --> 00:20:20.565 and set this. 385 00:20:21.505 --> 00:20:26.205 Um, let's just get that. There we go. 386 00:20:27.245 --> 00:20:29.245 I will set that to, 387 00:20:31.695 --> 00:20:32.835 let me paste that a little better. 388 00:20:33.685 --> 00:20:37.555 There we go. Um, I will set that to 389 00:20:42.345 --> 00:20:42.635 Zero. 390 00:20:44.175 --> 00:20:48.885 All right, so we've updated the value in 391 00:20:48.885 --> 00:20:50.045 memory now, 392 00:20:50.465 --> 00:20:54.205 but we also need to update the, uh, the, 393 00:20:54.265 --> 00:20:55.685 the screen, right? 394 00:20:56.025 --> 00:20:59.285 So here I can actually just console log this if we wanna see 395 00:20:59.285 --> 00:21:00.325 it working, right? 396 00:21:00.325 --> 00:21:01.765 So I'll just say console log. 397 00:21:02.385 --> 00:21:06.125 Um, what, what will we say? 398 00:21:06.145 --> 00:21:10.605 We will just, let's just console log, log that, um, 399 00:21:12.455 --> 00:21:15.325 colour index value, right? 400 00:21:16.465 --> 00:21:18.885 So now if I go ahead 401 00:21:19.345 --> 00:21:23.765 and, um, if I go ahead 402 00:21:24.385 --> 00:21:29.245 and let me just, uh, sorry, 403 00:21:29.475 --> 00:21:32.685 move this over there. 404 00:21:33.545 --> 00:21:34.725 Um, if I go ahead 405 00:21:34.725 --> 00:21:38.005 and press something, you'll see it's 1, 1 0, 406 00:21:38.185 --> 00:21:39.205 I'm just staying in the same place. 407 00:21:39.205 --> 00:21:41.165 So it's flicking on and off between one 408 00:21:41.165 --> 00:21:43.405 and zero, which is what we want, 409 00:21:43.745 --> 00:21:46.485 but we wanna actually see the pixel turn on and off, right? 410 00:21:46.745 --> 00:21:51.085 Um, so we need to send an updated version of that pixel, 411 00:21:51.905 --> 00:21:54.405 um, AKA, the button, uh, back. 412 00:21:54.905 --> 00:21:57.165 Now we could do that by copying 413 00:21:57.165 --> 00:22:01.245 and pasting this, you know, all of this, uh, 414 00:22:01.585 --> 00:22:05.845 and then, um, into here and sending it to the page. 415 00:22:06.185 --> 00:22:07.685 Uh, but that's a lot of redundancy. 416 00:22:07.685 --> 00:22:09.685 So instead, since we need to be able 417 00:22:09.685 --> 00:22:12.525 to send this button when the page first renders and 418 00:22:13.245 --> 00:22:16.925 whenever a button is, uh, updated, uh, we're gonna make a, 419 00:22:17.205 --> 00:22:19.485 a fragment out of it, a component out of it. 420 00:22:20.665 --> 00:22:23.085 Um, so the way that we, uh, 421 00:22:23.435 --> 00:22:26.805 make a component is… a component is a function in, 422 00:22:27.225 --> 00:22:29.045 um, in Kitten. 423 00:22:29.345 --> 00:22:31.645 So I'm just gonna cut that 424 00:22:33.185 --> 00:22:37.885 and, uh, over here maybe I'll say const, 425 00:22:38.325 --> 00:22:39.685 Pixel, I'll call the component 426 00:22:40.625 --> 00:22:42.645 and it's gonna have some props, right? 427 00:22:43.345 --> 00:22:47.565 Um, we need the row index, we need the column index. 428 00:22:49.265 --> 00:22:50.805 Um, and uh, 429 00:22:52.205 --> 00:22:55.285 I think we need the colour index as well, right? 430 00:22:56.295 --> 00:22:57.845 Maybe I should have pasted it first. 431 00:22:59.265 --> 00:23:03.485 And uh, that's just going to return some Kitten HTML again. 432 00:23:04.785 --> 00:23:07.965 So let's paste what we had before in there. 433 00:23:09.345 --> 00:23:11.325 Um, and yes, so these are our props. 434 00:23:11.325 --> 00:23:14.045 You see our row index, uh, our column index, 435 00:23:14.145 --> 00:23:16.285 our color index, that's what we're going to pass 436 00:23:16.625 --> 00:23:18.045 to this pixel when we use it. 437 00:23:18.705 --> 00:23:23.645 Um, so, uh, one other thing we can do of course is, um, 438 00:23:24.015 --> 00:23:28.245 these three, uh, styles are calculated dynamically, 439 00:23:28.305 --> 00:23:32.965 but the rest, so these, um, are static. 440 00:23:33.025 --> 00:23:35.845 So why don't we just, uh, yank those out 441 00:23:36.465 --> 00:23:40.205 and place them into our, um, 442 00:23:41.915 --> 00:23:46.645 into our initial render here, just within style tags. 443 00:23:48.385 --> 00:23:51.645 So there we go. Put that in there. 444 00:23:52.345 --> 00:23:55.845 Um, and of course we need to be able to, uh, 445 00:23:57.025 --> 00:23:58.485 we need a selector, right? 446 00:23:58.905 --> 00:24:00.725 So how do we select this? Well, its name is pixel, 447 00:24:01.265 --> 00:24:02.725 so why don't we use that? 448 00:24:03.505 --> 00:24:05.045 We use an attribute selector. 449 00:24:05.545 --> 00:24:09.645 So I'll say name, uh, equals pixel, 450 00:24:12.025 --> 00:24:16.565 and uh, then we'll just, uh, we'll have 451 00:24:18.955 --> 00:24:20.205 this, there we go. 452 00:24:22.385 --> 00:24:26.845 So that we only have the dynamic style elements here. 453 00:24:26.845 --> 00:24:29.005 Everything here is dynamic. Okay, that's good. 454 00:24:29.705 --> 00:24:34.365 Um, and then we need to of course, uh, return 455 00:24:34.365 --> 00:24:38.605 that pixel here now, so we're just refactoring at this point 456 00:24:39.655 --> 00:24:42.405 pixel, and we'll pass those values to it. 457 00:24:42.415 --> 00:24:46.125 We'll say row index equals row index, 458 00:24:46.255 --> 00:24:50.645 we'll say column index equals column index. 459 00:24:51.345 --> 00:24:52.965 And we could actually have done it with those two 460 00:24:52.965 --> 00:24:54.925 because color index can be calculated from those. 461 00:24:55.105 --> 00:24:58.445 But um, we'll just pass it colour 462 00:24:58.935 --> 00:25:00.325 index as well. 463 00:25:02.215 --> 00:25:06.365 There we go. And unlike HTML tags, uh, 464 00:25:06.365 --> 00:25:08.645 special Kitten component tags have to be closed. 465 00:25:08.905 --> 00:25:11.005 Um, that is a rule in Kitten. 466 00:25:11.705 --> 00:25:14.645 Um, and so that should really do it. 467 00:25:14.855 --> 00:25:18.405 Let's move these parentheses here so it's easier to read 468 00:25:18.985 --> 00:25:20.045 and let's see what happens. 469 00:25:20.465 --> 00:25:23.365 Um, so now if I go over here 470 00:25:24.185 --> 00:25:26.485 and I click, well, nothing's happening. 471 00:25:27.065 --> 00:25:29.485 Um, and do I have any output here? 472 00:25:31.115 --> 00:25:35.805 Well, my ones and zeros are working, so, um, well, I, 473 00:25:35.995 --> 00:25:37.565 I've refactored, so exactly, 474 00:25:37.635 --> 00:25:39.325 this is exactly what should be happening. 475 00:25:39.865 --> 00:25:41.245 Um, I refactored, 476 00:25:41.265 --> 00:25:46.045 but we're still not sending the, um, pixel on, 477 00:25:46.105 --> 00:25:47.325 on connect, right? 478 00:25:47.465 --> 00:25:49.805 Um, on the, sorry, on the pa- the pixel event. 479 00:25:50.265 --> 00:25:53.085 So instead of console logging it here, 480 00:25:53.775 --> 00:25:56.965 we're just gonna say page dot send 481 00:25:58.105 --> 00:26:01.445 and, uh, we're gonna send Kitten HTML 482 00:26:02.435 --> 00:26:04.405 just at pixel again, right? 483 00:26:04.985 --> 00:26:08.845 Um, so we could actually just even to save us some time, 484 00:26:09.185 --> 00:26:10.965 uh, we could just copy it here. 485 00:26:12.105 --> 00:26:15.125 Um, what's different of course is, um, 486 00:26:15.915 --> 00:26:18.245 here you can see the row index. 487 00:26:18.545 --> 00:26:20.965 Uh, for us it's, uh, a property 488 00:26:20.985 --> 00:26:23.285 of the data object that we get. 489 00:26:23.865 --> 00:26:26.045 So we'll just say data dot column index 490 00:26:26.505 --> 00:26:29.445 and data dot colour index. 491 00:26:29.905 --> 00:26:34.045 So now if I save, I go over here, um, 492 00:26:34.405 --> 00:26:37.605 I should be, oh, interesting, very interesting. 493 00:26:38.475 --> 00:26:41.445 It's very interesting because I'm drawing in grey 494 00:26:42.625 --> 00:26:43.965 and I am drawing. 495 00:26:44.265 --> 00:26:46.565 So, you know, um, yay! Go us! 496 00:26:47.305 --> 00:26:48.405 But I'm drawing in grey 497 00:26:48.625 --> 00:26:50.725 and um, I shouldn't be able to draw in grey 498 00:26:50.725 --> 00:26:52.205 because we only have black and white. 499 00:26:52.305 --> 00:26:53.965 So let's see what happened. 500 00:26:54.745 --> 00:26:57.245 Um, so, uh, 501 00:27:00.115 --> 00:27:04.485 what happened, of course, uh, oh, no, no. 502 00:27:04.485 --> 00:27:06.485 Here we have color index. Yes. 503 00:27:06.555 --> 00:27:10.845 What happened, of course, is, um, color index is, uh, 504 00:27:12.045 --> 00:27:14.405 a value that we calculate here. 505 00:27:14.405 --> 00:27:15.845 It's not, we don't get it from data. 506 00:27:16.745 --> 00:27:21.085 So, um, here we were just passing, 507 00:27:22.465 --> 00:27:25.445 um, an invalid color index there. 508 00:27:26.225 --> 00:27:29.005 Uh, so now if I go back 509 00:27:30.265 --> 00:27:34.245 and make it larger, not that large, there we go. 510 00:27:34.695 --> 00:27:38.365 There, there we go. And I can erase as well. 511 00:27:38.585 --> 00:27:40.045 Oh, oh, did I? 512 00:27:40.825 --> 00:27:42.845 Oh, no, is that white 513 00:27:43.305 --> 00:27:46.165 or am I seeing things or is that grey? 514 00:27:46.795 --> 00:27:48.045 That looks like grey, doesn't it? 515 00:27:48.915 --> 00:27:51.645 Yeah, we're still getting some grey. Interesting. 516 00:27:52.025 --> 00:27:54.045 So that's from our bounds checking, clearly. 517 00:27:54.825 --> 00:27:59.005 So if I go back to the code, let's take a look at 518 00:27:59.005 --> 00:28:00.445 where we're doing our bounds checking. 519 00:28:01.505 --> 00:28:06.365 Um, so, uh, we're saying rows data, 520 00:28:06.385 --> 00:28:08.045 row index data column index plus plus, 521 00:28:08.545 --> 00:28:11.365 and then colour index equals that we're saying, um, 522 00:28:12.745 --> 00:28:15.165 if colour index equals colours length. 523 00:28:15.545 --> 00:28:18.485 So for example, at this point, we wanna know if it's, um, 524 00:28:18.825 --> 00:28:21.725 two for example, uh, then we want to reset it. 525 00:28:21.945 --> 00:28:26.045 Uh, data row index data column index equals zero. 526 00:28:27.155 --> 00:28:29.245 Okay, that's interesting 527 00:28:29.245 --> 00:28:32.645 because that should be correct. 528 00:28:34.745 --> 00:28:36.285 Um, so colour index. 529 00:28:37.475 --> 00:28:42.165 Okay, so let's just, uh, console log that colour index 530 00:28:42.355 --> 00:28:45.645 that we're getting colour 531 00:28:46.775 --> 00:28:48.885 index, um, sorry. 532 00:28:52.875 --> 00:28:56.695 Oh, oh, oh, I see what we're doing. I see what we're doing. 533 00:28:56.885 --> 00:28:59.775 Okay. Um, you know what, 534 00:29:00.765 --> 00:29:01.895 this is the problem here. 535 00:29:02.595 --> 00:29:07.175 Um, so we're, 536 00:29:11.565 --> 00:29:13.175 okay, so we're confusing ourselves 537 00:29:13.175 --> 00:29:14.815 because we're saving the old value here, 538 00:29:14.815 --> 00:29:16.815 and then we're saving, sending the old value. 539 00:29:16.875 --> 00:29:19.455 So we're actually sending two at one point. 540 00:29:19.715 --> 00:29:22.055 Um, so, which is not a valid colour. 541 00:29:22.635 --> 00:29:25.175 Um, so, um, instead, you know what, 542 00:29:25.175 --> 00:29:26.295 let's not confuse ourselves. 543 00:29:26.945 --> 00:29:31.255 Let's just, uh, refer to the actual data all the time. 544 00:29:31.995 --> 00:29:33.935 So if I, I I'll say here, 545 00:29:34.395 --> 00:29:37.415 um, there we go. 546 00:29:38.995 --> 00:29:42.645 If the actual color is equal to colors length, 547 00:29:43.115 --> 00:29:44.245 then set it to zero. 548 00:29:44.785 --> 00:29:48.685 And here we'll actually send the actual color as well. 549 00:29:48.965 --> 00:29:50.925 A bit of repetition, but, um, 550 00:29:50.985 --> 00:29:52.525 at least we won't confuse ourselves. 551 00:29:53.745 --> 00:29:58.565 And, uh, let me just, uh, write that out now 552 00:29:58.565 --> 00:30:01.605 that the properties are getting a bit verbose, 553 00:30:04.105 --> 00:30:06.165 let me format it so that it's easier to read. 554 00:30:06.715 --> 00:30:07.765 Okay, there we go. 555 00:30:09.905 --> 00:30:13.285 Now, if I go back here and go to my browser, 556 00:30:14.945 --> 00:30:16.805 and let's see, there we go. 557 00:30:16.955 --> 00:30:17.965 Just two values. 558 00:30:18.335 --> 00:30:21.565 We've got our bounds checking working properly, um, 559 00:30:22.185 --> 00:30:25.005 and I can proceed to draw 560 00:30:25.705 --> 00:30:27.765 yet another heart. 561 00:30:28.385 --> 00:30:33.005 Um, the problem is though, um, so if I, 562 00:30:33.025 --> 00:30:36.085 for example, open up another browser window here 563 00:30:36.905 --> 00:30:40.005 and let's put that down here for example, 564 00:30:40.465 --> 00:30:43.045 and go to local host, um, 565 00:30:44.085 --> 00:30:45.445 actually lemme just open it up next to it. 566 00:30:45.825 --> 00:30:49.565 Um, you can see that when I'm drawing on one, uh, 567 00:30:49.635 --> 00:30:51.445 it's not being updated on the other. 568 00:30:51.865 --> 00:30:55.645 Now if I refresh because it's getting it from the same, um, 569 00:30:56.675 --> 00:31:00.805 data structure, uh, then it will of course, uh, 570 00:31:01.665 --> 00:31:02.725 update on the other one. 571 00:31:03.105 --> 00:31:05.125 But I want it to, um, 572 00:31:06.665 --> 00:31:09.325 to update immediately, right? 573 00:31:09.345 --> 00:31:11.365 So draw together, right? That's the whole idea! 574 00:31:11.985 --> 00:31:16.405 Uh, so let's go ahead and make that happen. 575 00:31:16.585 --> 00:31:17.725 How do we make that happen? 576 00:31:18.345 --> 00:31:21.085 How do we make it so that the changes are not sent just 577 00:31:21.105 --> 00:31:22.565 to this page, um, 578 00:31:22.785 --> 00:31:26.605 but to everyone basically, uh, who is on that page. 579 00:31:26.945 --> 00:31:29.365 And the way we do that is, you see here 580 00:31:29.365 --> 00:31:31.805 where it's saying page dot sent, 581 00:31:31.805 --> 00:31:33.285 where we're saying page send. 582 00:31:33.945 --> 00:31:36.725 Um, what we do is we change that to say page, 583 00:31:38.525 --> 00:31:39.845 everyone send. 584 00:31:40.475 --> 00:31:44.285 Okay? So now if I were to, 585 00:31:44.695 --> 00:31:46.085 let's get rid of that pixel. 586 00:31:46.825 --> 00:31:48.045 Um, if I were 587 00:31:48.045 --> 00:31:51.925 to start drawing a heart, there we go. 588 00:31:54.325 --> 00:31:55.445 I am drawing a heart. 589 00:31:56.915 --> 00:31:58.765 It's funny how every heart comes out different. 590 00:31:59.145 --> 00:32:01.005 Um, and someone else joins. 591 00:32:01.465 --> 00:32:06.005 So let's, uh, open up another, um, local host 592 00:32:06.465 --> 00:32:08.565 and I'm drawing and they can see it, 593 00:32:08.565 --> 00:32:12.965 and when they start drawing, well, I can see it too. 594 00:32:13.865 --> 00:32:18.325 So that's exactly basically what's running on, uh, 595 00:32:18.515 --> 00:32:21.245 Draw Together, um, on the web. 596 00:32:22.185 --> 00:32:23.805 Uh, so that's it. 597 00:32:23.985 --> 00:32:28.325 We have, um, basically recreated, uh, 598 00:32:28.945 --> 00:32:30.845 the Draw Together, um, example 599 00:32:30.845 --> 00:32:32.125 that I released over the weekend. 600 00:32:32.865 --> 00:32:36.445 Um, and you can see, you know, how little code there is. 601 00:32:36.535 --> 00:32:40.205 We're talking about, you know, less than 60 lines of, uh, 602 00:32:40.295 --> 00:32:42.285 quite liberally-spaced code. 603 00:32:42.785 --> 00:32:44.445 Um, the only thing we're not doing here 604 00:32:44.445 --> 00:32:46.925 that I am doing there is, uh, 605 00:32:46.935 --> 00:32:49.405 validating the data that's coming back. 606 00:32:49.465 --> 00:32:51.325 So you would validate that the row index 607 00:32:51.345 --> 00:32:55.565 and column index are what you expect them to be, uh, so 608 00:32:55.565 --> 00:32:57.005 that people don't inject anything, um, 609 00:32:57.025 --> 00:33:00.045 and maybe mess up your, um, your, 610 00:33:00.045 --> 00:33:01.565 your data structure and memory. 611 00:33:02.425 --> 00:33:04.565 So, uh, but that's it really. 612 00:33:05.905 --> 00:33:10.765 Um, and, uh, so you've basically seen how, you know, 613 00:33:10.765 --> 00:33:12.885 easy it is using Kitten 614 00:33:12.885 --> 00:33:17.445 and its Streaming HTML workflow, um, to create this sort 615 00:33:17.445 --> 00:33:19.925 of a, a shared, um, experience. 616 00:33:20.225 --> 00:33:23.245 Um, and of course, uh, there's a lot of Kitten 617 00:33:23.245 --> 00:33:24.285 magic happening, 618 00:33:24.865 --> 00:33:27.765 but, um, if you, uh, 619 00:33:29.345 --> 00:33:30.485 let me bring my browser back. 620 00:33:31.145 --> 00:33:35.685 Um, if you wanna learn what that magic is, go to my blog 621 00:33:36.385 --> 00:33:39.845 ar dot al and if you scroll down, I wrote this post, 622 00:33:39.995 --> 00:33:42.285 at the start of March called streaming dot, uh, 623 00:33:42.285 --> 00:33:45.845 streaming HTML, sorry, um, uh, where I create a, 624 00:33:45.885 --> 00:33:49.325 a very simple counter example using, uh, Streaming HTML. 625 00:33:49.745 --> 00:33:53.725 And then, uh, I break it down layer by layer. 626 00:33:53.885 --> 00:33:55.405 I peel every layer of magic. 627 00:33:55.665 --> 00:33:58.805 So we peel the syntactic sugar 628 00:33:58.985 --> 00:34:03.685 and some of, uh, the, um, uh, uh, of, of, 629 00:34:03.785 --> 00:34:07.485 uh, Kitten's magic, uh, and reveal the HTMX 630 00:34:07.485 --> 00:34:08.845 and idiomorph, um, 631 00:34:08.945 --> 00:34:11.725 and HTMX web socket that underlies that. 632 00:34:12.225 --> 00:34:13.605 And then we peel that away 633 00:34:13.665 --> 00:34:16.005 and we create the same example in JavaScript, 634 00:34:16.385 --> 00:34:17.885 and then we peel that away even 635 00:34:17.905 --> 00:34:19.885 and take Kitten out the equation completely 636 00:34:20.265 --> 00:34:23.405 and create the same example using plain Node.js to see 637 00:34:23.405 --> 00:34:25.205 what the Streaming HTML workflow looks like. 638 00:34:25.505 --> 00:34:27.485 Um, but then of course, you know, looking back, you'll see 639 00:34:27.485 --> 00:34:31.045 how much simpler it is with Kitten’s, uh, with all 640 00:34:31.045 --> 00:34:32.485 of the Kitten magic that there is. 641 00:34:32.785 --> 00:34:34.725 Um, but the magic isn't magic. 642 00:34:34.945 --> 00:34:38.085 And, and that's a, uh, an important, uh, part 643 00:34:38.085 --> 00:34:40.805 of the Kitten philosophy that it's progressively enhanced. 644 00:34:40.905 --> 00:34:45.045 You know, you throw Kitten a, uh, website from 1993, 645 00:34:45.125 --> 00:34:48.165 a static website, it will serve it maybe not your cgi-bin 646 00:34:48.165 --> 00:34:49.845 folder, but it'll serve the rest of it. 647 00:34:50.385 --> 00:34:53.445 Um, and, uh, everything else is added on a, 648 00:34:53.445 --> 00:34:55.685 in a progressively enhanced manner. 649 00:34:56.505 --> 00:35:00.405 Um, that includes all of the peer-to-peer web that is unique 650 00:35:00.465 --> 00:35:01.645 to the Small Web. 651 00:35:02.505 --> 00:35:06.405 So, uh, feel free to go over to my blog ar dot al 652 00:35:06.545 --> 00:35:08.485 and, uh, and check that out. 653 00:35:09.025 --> 00:35:10.645 And, uh, let me know what you think. 654 00:35:10.665 --> 00:35:14.765 You can find me on the fediverse. Uh, I'm at mastodon dot ar dot al. 655 00:35:14.765 --> 00:35:16.725 You can find that link on my blog as well. 656 00:35:16.745 --> 00:35:17.805 And I hope you enjoyed this, 657 00:35:17.805 --> 00:35:21.045 and I hope you, uh, um, have a play with Kitten 658 00:35:21.145 --> 00:35:23.645 and I look forward to seeing the stuff that you guys make. 659 00:35:23.895 --> 00:35:26.445 Thank you so much, and take care. Bye-Bye.