WEBVTT - This file was automatically generated by VIMEO 0 00:00:01.395 --> 00:00:01.775 Hi there. 1 00:00:01.955 --> 00:00:03.055 My name's Aral Balkan 2 00:00:03.275 --> 00:00:06.055 and, um, I wanna take you through a couple of new features 3 00:00:06.055 --> 00:00:08.015 that I added to Kitten this week. 4 00:00:08.635 --> 00:00:12.095 Uh, namely the new interactive shell, the REPL, 5 00:00:12.435 --> 00:00:15.015 and the new multi-page settings screen. 6 00:00:15.475 --> 00:00:18.615 So let's start with the geekier here of the two, 7 00:00:18.865 --> 00:00:20.215 which is the REPL. 8 00:00:20.995 --> 00:00:25.935 And to do this, um, I'm going to create a new, uh, directory 9 00:00:26.595 --> 00:00:28.535 for my, uh, demo. 10 00:00:29.515 --> 00:00:31.815 And, uh, there's nothing in there right now, 11 00:00:32.675 --> 00:00:35.495 and I'm just gonna start Kitten in that folder. 12 00:00:36.395 --> 00:00:37.695 So since there's nothing in there 13 00:00:37.995 --> 00:00:40.775 and we're serving nothing, if I bring up a browser 14 00:00:41.035 --> 00:00:45.535 and I go to localhost, we get a 404, um, 15 00:00:45.705 --> 00:00:47.135 error as expected. 16 00:00:47.915 --> 00:00:49.215 Um, so, uh, 17 00:00:49.245 --> 00:00:52.215 however Kitten is running, the server is running. 18 00:00:52.795 --> 00:00:55.775 Um, so let's, uh, see here. 19 00:00:56.315 --> 00:00:59.455 Um, it says, to launch an interactive shell press the S key. 20 00:00:59.455 --> 00:01:00.975 So it's a new feature as of this week. 21 00:01:01.595 --> 00:01:04.335 Um, so we can run an interactive shell into the memory 22 00:01:04.675 --> 00:01:05.935 of this running server. 23 00:01:06.515 --> 00:01:09.295 Um, and it's just like the Node.js shell, in fact, 24 00:01:09.325 --> 00:01:10.495 it's built on top of it. 25 00:01:10.915 --> 00:01:13.135 And it says, Hey, a good place to start is 26 00:01:13.135 --> 00:01:14.535 to run the .ls command. 27 00:01:14.955 --> 00:01:18.295 Um, and you get to see the keys of the global Kitten object. 28 00:01:18.355 --> 00:01:19.655 And there are some lovely 29 00:01:20.045 --> 00:01:21.375 objects there that you can play with. 30 00:01:21.435 --> 00:01:24.135 Uh, like, I don't know, um, a simple one is Kitten version. 31 00:01:24.315 --> 00:01:26.855 So if I say Kitten version, I can see all of the details 32 00:01:26.875 --> 00:01:29.775 of the current version of Kitten. 33 00:01:30.275 --> 00:01:34.835 Um, another interesting one is the HTML tag template. 34 00:01:35.215 --> 00:01:38.035 Um, that's exposed, uh, on that global object. 35 00:01:38.535 --> 00:01:42.155 Um, and using that, you can make components, um, 36 00:01:42.335 --> 00:01:44.395 and you can render the HTML for your pages. 37 00:01:44.815 --> 00:01:45.915 Uh, so let's say you don't know 38 00:01:45.915 --> 00:01:47.355 what a Kitten component is like, 39 00:01:47.355 --> 00:01:49.155 and you just wanna play around and find out how it works, 40 00:01:49.155 --> 00:01:50.835 you can actually do that in the shell. 41 00:01:51.175 --> 00:01:54.155 You don't have to create something and run it in a browser. 42 00:01:54.775 --> 00:01:56.875 Um, so, uh, for let's do that, let's, 43 00:01:56.875 --> 00:01:59.315 let's create a component that, uh, displays a certain number 44 00:01:59.315 --> 00:02:00.395 of kittens, for example. 45 00:02:00.975 --> 00:02:03.635 So, um, I'm just gonna call that Kittens 46 00:02:04.695 --> 00:02:06.155 and components are functions. 47 00:02:06.255 --> 00:02:08.795 So I'm going to create an arrow function here, which takes, 48 00:02:08.975 --> 00:02:11.755 uh, one, um, argument. 49 00:02:11.915 --> 00:02:13.275 This is a properties object. 50 00:02:13.535 --> 00:02:15.755 So, um, I'll have a property called count, 51 00:02:16.455 --> 00:02:18.395 and we'll default that to one. 52 00:02:18.695 --> 00:02:21.515 And we'll also, uh, default the object itself 53 00:02:21.515 --> 00:02:23.435 to an empty object so that, uh, 54 00:02:23.435 --> 00:02:25.035 we can call it without any properties if 55 00:02:25.035 --> 00:02:26.075 we want, and it'll still work. 56 00:02:26.615 --> 00:02:28.635 And then there is my, uh, arrow, 57 00:02:29.575 --> 00:02:32.355 and I'll just return some Kitten HTML. 58 00:02:33.135 --> 00:02:34.715 So as you can see, I'm getting completion 59 00:02:34.715 --> 00:02:35.955 for everything as well, which is kind of cool. 60 00:02:36.615 --> 00:02:39.115 Um, so we'll just create, I don't know, a heading, uh, 61 00:02:39.215 --> 00:02:42.875 an H one maybe, so that they're bigger for the simple demo. 62 00:02:43.215 --> 00:02:45.635 Uh, don't, you know, use presentational, uh, 63 00:02:45.635 --> 00:02:46.835 don't use semantic tag 64 00:02:46.895 --> 00:02:49.515 for presentational purposes in your projects, of course. 65 00:02:50.255 --> 00:02:54.755 Um, and, uh, we will display a number of kittens, 66 00:02:55.775 --> 00:02:58.555 um, the count number that's been passed. 67 00:02:59.225 --> 00:03:03.085 And here let's just, uh, use an emoji of a cat. 68 00:03:03.905 --> 00:03:06.005 Um, so we've got our kittens component, 69 00:03:06.065 --> 00:03:09.045 we can use it in some other HTML, so I can say kitten 70 00:03:11.115 --> 00:03:14.685 dot html and, uh, reference that 71 00:03:15.195 --> 00:03:17.765 Kittens component now, um, 72 00:03:17.985 --> 00:03:20.925 and notice that components have to have a closing tag. 73 00:03:21.025 --> 00:03:23.525 Uh, that's not true for HTML, uh, it's forgiving for that. 74 00:03:23.545 --> 00:03:25.845 But for custom components, you have to have a closing tag. 75 00:03:26.345 --> 00:03:28.605 And if I press enter, oh, well one kitten, 76 00:03:28.605 --> 00:03:29.645 because that was our default. 77 00:03:30.185 --> 00:03:33.085 Uh, however, we do have a prop that we can pass it, 78 00:03:33.085 --> 00:03:34.245 we can pass it a different count. 79 00:03:34.305 --> 00:03:37.645 So if we say 42, for example, we get 42 kittens, yay. 80 00:03:37.865 --> 00:03:39.085 Ha ha, that's great. 81 00:03:39.545 --> 00:03:41.165 Um, so you can have a lot of fun and, 82 00:03:41.185 --> 00:03:43.045 and you can see how this might be useful 83 00:03:43.065 --> 00:03:45.005 for teaching aspects of Kitten 84 00:03:45.005 --> 00:03:46.565 and of course for debugging, etc. 85 00:03:47.105 --> 00:03:49.765 Um, but uh, we can go even further if we want to. 86 00:03:50.785 --> 00:03:54.085 We have access, if you look at ls again, um, 87 00:03:54.665 --> 00:03:56.205 to the Kitten app itself. 88 00:03:57.105 --> 00:03:58.925 Uh, and uh, it's router. 89 00:03:59.025 --> 00:04:03.885 So if I say kitten dot app dot router, you can see 90 00:04:03.885 --> 00:04:05.885 that that is a Polka object. 91 00:04:05.905 --> 00:04:09.645 So Polka is a, um, uh, 92 00:04:09.765 --> 00:04:12.765 a lightweight version of Express.js. 93 00:04:12.765 --> 00:04:14.805 You can think of it that way. And that's what Kitten is, 94 00:04:14.945 --> 00:04:16.125 um, built on top of. 95 00:04:16.345 --> 00:04:20.645 Um, and Polka itself, uh, extends a router called Trouter, 96 00:04:21.425 --> 00:04:23.965 um, or tu-rou-ter I guess, but it's a trout. 97 00:04:24.185 --> 00:04:27.605 Um, so anyway, um, so it is itself a router. 98 00:04:27.825 --> 00:04:29.485 So, um, app dot router, 99 00:04:29.945 --> 00:04:32.565 and if I press entered there, you'll see that it has some, 100 00:04:32.785 --> 00:04:35.805 uh, methods, uh, that match HTTP verbs. 101 00:04:35.805 --> 00:04:36.885 So we can use those methods 102 00:04:37.065 --> 00:04:39.245 to actually add routes dynamically 103 00:04:39.245 --> 00:04:40.285 while the server is running. 104 00:04:40.485 --> 00:04:43.085 I mean, you probably will not have to do this, 105 00:04:43.345 --> 00:04:45.525 but you can, which is kind of cool. 106 00:04:46.105 --> 00:04:47.965 Um, so I'm going to, 107 00:04:48.385 --> 00:04:50.885 and notice that I have history, so I can go back up there 108 00:04:51.265 --> 00:04:53.565 and I can call that get method 109 00:04:54.545 --> 00:04:57.485 and I'll call it with, um, the index route. 110 00:04:58.385 --> 00:04:59.605 And it, uh, 111 00:05:01.905 --> 00:05:03.805 has a callback, uh, that it gets. 112 00:05:03.825 --> 00:05:07.005 So if that route is hit, this callback will get, um, called 113 00:05:07.395 --> 00:05:09.245 with a request and a response object. 114 00:05:09.305 --> 00:05:13.925 So very simple HTTP, uh, as you know, from any server. 115 00:05:14.705 --> 00:05:18.885 Um, and, uh, from there what we'll do 116 00:05:19.465 --> 00:05:23.885 is we'll end that response, right, um, with some Kitten 117 00:05:23.885 --> 00:05:25.965 HTML, okay. 118 00:05:26.945 --> 00:05:29.845 And, uh, we'll actually write a bit more 119 00:05:29.845 --> 00:05:30.925 than we did in our component. 120 00:05:31.225 --> 00:05:35.725 Um, 'cause I want to include, for example, this meta, uh, 121 00:05:35.795 --> 00:05:39.285 character set, uh, specify UTF-8 so 122 00:05:39.285 --> 00:05:41.045 that our Unicode character will work. 123 00:05:41.045 --> 00:05:42.405 But otherwise we're just gonna do the same 124 00:05:42.405 --> 00:05:44.405 thing, um, that we did. 125 00:05:45.065 --> 00:05:50.045 Uh, we're just going to, uh, have our repeated, 126 00:05:50.825 --> 00:05:55.645 uh, string with the kitten emoji there. 127 00:05:56.425 --> 00:05:59.685 Um, and we're going to repeat that count times. 128 00:06:00.945 --> 00:06:03.845 And, uh, in fact we'll say plus, plus count. 129 00:06:03.865 --> 00:06:06.645 So every time the page is hit, there will be another kitten. 130 00:06:07.145 --> 00:06:10.605 Um, and let me just close that H1 tag as well. 131 00:06:11.185 --> 00:06:15.685 Um, so that looks like it's okay to me. 132 00:06:15.785 --> 00:06:18.605 So I'm gonna add that as my route there. 133 00:06:19.225 --> 00:06:21.005 Um, and now you'll see if we hit it, 134 00:06:21.005 --> 00:06:22.245 we are actually gonna get an error. 135 00:06:22.905 --> 00:06:24.565 Um, so lemme refresh that. 136 00:06:24.585 --> 00:06:26.685 And it says, oh, count is not defined 137 00:06:26.755 --> 00:06:29.525 because we actually haven't defined count, remember, um, 138 00:06:29.845 --> 00:06:31.485 anywhere here, but we can just define it. 139 00:06:31.905 --> 00:06:35.565 Um, here, right now we can just say, count equals zero, 140 00:06:36.185 --> 00:06:38.685 and then if I refresh, we get one kitten. 141 00:06:39.225 --> 00:06:41.765 Ha, how cool is that? That's pretty cool. 142 00:06:42.065 --> 00:06:45.525 Um, but if I keep refreshing, we get more kittens. Yay. 143 00:06:45.905 --> 00:06:49.165 So we just dynamically added a route, uh, 144 00:06:49.165 --> 00:06:53.005 to a running server using Kitten's new REPL. 145 00:06:54.045 --> 00:06:55.325 I think that's pretty cool. Again, 146 00:06:55.365 --> 00:06:57.365 I don't know if you'll ever be doing this, um, 147 00:06:57.385 --> 00:07:00.565 in your own things, but, uh, you know, it's kind of cool 148 00:07:00.585 --> 00:07:02.245 and it's cool, you know, to know 149 00:07:02.245 --> 00:07:06.925 that you can actually debug, um, uh, the whole server, 150 00:07:07.665 --> 00:07:10.285 uh, using this, um, as it's running. 151 00:07:11.385 --> 00:07:13.645 So, uh, of course this is not how you would 152 00:07:14.445 --> 00:07:15.645 normally do things. 153 00:07:16.105 --> 00:07:17.565 Uh, you would create a page. 154 00:07:18.265 --> 00:07:22.325 So, um, let me just exit, uh, this, the interactive shell, 155 00:07:22.325 --> 00:07:23.645 a press control-d to do that 156 00:07:23.945 --> 00:07:27.045 and control-c to, uh, exit kitten itself. 157 00:07:27.705 --> 00:07:30.445 Uh, so what we would actually do, um, 158 00:07:30.745 --> 00:07:34.765 is we would create a page, like an index page, for example. 159 00:07:35.385 --> 00:07:37.325 Um, and then open up your editor. 160 00:07:38.065 --> 00:07:41.445 And there you would export a route, right? 161 00:07:41.985 --> 00:07:46.125 Um, and your route would, uh, in this case, we don't need 162 00:07:46.125 --> 00:07:47.565 to care about the request and response 163 00:07:47.725 --> 00:07:48.925 'cause we can just return a value. 164 00:07:49.025 --> 00:07:51.845 So there are lots of things that Kitten actually 165 00:07:52.355 --> 00:07:53.685 does for you, makes it easier. 166 00:07:53.785 --> 00:07:56.085 So we can just return some Kitten HTML here 167 00:07:57.465 --> 00:08:00.765 and here we can set our account to zero, for example. 168 00:08:01.945 --> 00:08:05.405 Um, and here we can just have our heading that we had before 169 00:08:05.745 --> 00:08:07.885 and do exactly the same thing. 170 00:08:07.885 --> 00:08:09.085 Really close that heading. 171 00:08:09.905 --> 00:08:14.765 Um, here we have our cat, uh, that we're gonna repeat 172 00:08:15.275 --> 00:08:17.925 plus, plus count times. 173 00:08:18.985 --> 00:08:21.885 So, um, this is how you would normally do it. 174 00:08:22.465 --> 00:08:25.765 And if I were to bring back my, uh, browser 175 00:08:25.825 --> 00:08:28.005 and refresh now, uh, oh, 176 00:08:28.145 --> 00:08:29.885 and of course you have to start the server. 177 00:08:30.825 --> 00:08:31.845 So let's start the server. 178 00:08:32.865 --> 00:08:35.925 And if I refresh, then I have my one kitten 179 00:08:36.225 --> 00:08:39.045 and I can refresh, refresh, refresh. 180 00:08:39.305 --> 00:08:41.445 But remember, this is only happening in memory. 181 00:08:41.465 --> 00:08:46.405 So if I actually, um, turn the server off and on again 182 00:08:47.105 --> 00:08:49.845 and I refresh, we're back to, well, I don't even have 183 00:08:49.845 --> 00:08:51.845 to refresh it automatically does it in development mode. 184 00:08:52.145 --> 00:08:53.645 Um, I'm back to one kitten. 185 00:08:54.265 --> 00:08:58.885 So, uh, an interesting thing that I can do is, um, 186 00:08:59.325 --> 00:09:01.765 I can very easily persist that, um, 187 00:09:01.765 --> 00:09:03.845 because Kitten has a built-in database. 188 00:09:04.305 --> 00:09:07.805 So what I can do here is instead of creating just, um, 189 00:09:08.325 --> 00:09:11.365 a temporary variable that exists in memory, I can say if 190 00:09:12.105 --> 00:09:14.765 kitten dot db, that's your application's database 191 00:09:14.765 --> 00:09:16.205 that's been created for you already, 192 00:09:16.295 --> 00:09:17.605 every application gets one. 193 00:09:18.185 --> 00:09:20.685 Um, and let's call it kittens. 194 00:09:20.745 --> 00:09:24.085 Our table, um, that's going to, it's an object. 195 00:09:24.135 --> 00:09:27.645 JavaScript object, uh, equals undefined. 196 00:09:27.645 --> 00:09:31.165 So if it hasn't been defined yet, we are going 197 00:09:31.165 --> 00:09:32.805 to go ahead and define it. 198 00:09:32.945 --> 00:09:36.085 Um, so we'll say kitten dot db dot kittens, 199 00:09:36.745 --> 00:09:38.565 and it'll just have a property called count. 200 00:09:39.305 --> 00:09:42.125 And we'll set that count to zero again. 201 00:09:42.745 --> 00:09:45.925 And here, um, instead of just incrementing count, 202 00:09:46.035 --> 00:09:49.285 what we can do is we can just refer to that persisted count 203 00:09:50.105 --> 00:09:52.805 db dot kittens dot count. 204 00:09:53.425 --> 00:09:57.325 Um, and, uh, now we've got a persisted version of it. 205 00:09:57.825 --> 00:09:59.485 So if I go back here now 206 00:09:59.945 --> 00:10:02.845 and I refresh, well, I get a bunch of kittens, 207 00:10:03.785 --> 00:10:07.525 but if I go back here and turn the server off 208 00:10:08.185 --> 00:10:11.405 and on again, you can see that the number 209 00:10:11.405 --> 00:10:14.485 of kittens is persisted and just one's been added to it. 210 00:10:15.025 --> 00:10:19.445 Now again, I can launch my, 211 00:10:21.265 --> 00:10:25.325 um, I can launch my shell, 212 00:10:26.105 --> 00:10:28.205 and from there I can actually look at a database 213 00:10:28.345 --> 00:10:29.445 as well, which is kind of cool. 214 00:10:29.545 --> 00:10:32.125 So you can see that kitten db there. 215 00:10:32.905 --> 00:10:37.605 Um, so that's a JavaScript database, uh, JSDB, uh, 216 00:10:37.605 --> 00:10:39.085 which is a database that I wrote, 217 00:10:39.425 --> 00:10:41.005 uh, specifically for the Small Web. 218 00:10:41.345 --> 00:10:44.805 So, um, you can go to codeberg.org, 219 00:10:44.855 --> 00:10:48.085 small tech forward slash jsdb, um, 220 00:10:48.225 --> 00:10:51.205 and learn far more about it, about how it works. 221 00:10:51.205 --> 00:10:52.765 You'll see there's a proxy there. 222 00:10:53.465 --> 00:10:56.805 Um, so if you go to the section on how the sausage is made, 223 00:10:56.945 --> 00:11:00.645 um, all of the magic that there is is explained. 224 00:11:01.105 --> 00:11:04.005 Uh, so, uh, there is no magic. 225 00:11:04.525 --> 00:11:06.885 I mean, there, there, there is some magic, 226 00:11:07.185 --> 00:11:10.125 but, uh, all of the magic is, is explained. 227 00:11:10.585 --> 00:11:13.285 Um, so, uh, for all intents 228 00:11:13.285 --> 00:11:15.325 and purposes, a database you can work with, 229 00:11:15.325 --> 00:11:16.925 just like any other JavaScript object, 230 00:11:16.925 --> 00:11:18.485 the only difference is, um, 231 00:11:19.235 --> 00:11:21.125 what the changes you make are persisted. 232 00:11:22.145 --> 00:11:25.885 So, um, we can see that if we go to kittens 233 00:11:26.395 --> 00:11:31.365 that we have our object there and it has a count of 25. 234 00:11:32.185 --> 00:11:33.725 And if I were to, for example, 235 00:11:33.755 --> 00:11:37.045 refresh this page a few more times, um, you can see 236 00:11:37.045 --> 00:11:40.285 that if I look at that again, we've got a count of 31. 237 00:11:40.785 --> 00:11:45.645 In fact, um, what I can do is I can create a, 238 00:11:45.845 --> 00:11:49.125 a listener, like let's call it a kitten listener, 239 00:11:50.625 --> 00:11:52.805 um, that gets a table 240 00:11:53.345 --> 00:11:57.165 and a change reference as, uh, arguments. 241 00:11:57.985 --> 00:12:01.085 Um, and I can just output that onto the console. 242 00:12:02.785 --> 00:12:07.005 Um, and I can say, for example, table, table name, 243 00:12:08.905 --> 00:12:12.005 uh, changed, 244 00:12:12.665 --> 00:12:15.885 and then I can display the exact change, 245 00:12:16.505 --> 00:12:18.045 um, that happened there. 246 00:12:18.865 --> 00:12:22.165 And, uh, then I can go ahead 247 00:12:22.825 --> 00:12:26.285 and add my kitten listener to. 248 00:12:27.385 --> 00:12:32.125 So, um, the kittens table, uh, has, um, 249 00:12:33.805 --> 00:12:35.985 so every table basically, uh, 250 00:12:36.005 --> 00:12:37.985 and a table is a top level object 251 00:12:37.985 --> 00:12:42.545 or an array that you add to your database in, uh, JSDB, um, 252 00:12:42.685 --> 00:12:46.785 has a special underscore, underscore table reference, um, 253 00:12:46.785 --> 00:12:51.025 that you can use, um, to, uh, access its methods 254 00:12:51.025 --> 00:12:53.385 because we're using proxies all over the place. 255 00:12:53.445 --> 00:12:57.905 And kittens itself is, is a proxy to the kittens object 256 00:12:59.595 --> 00:13:01.425 underscore underscore table, though, uh, gives you access 257 00:13:01.445 --> 00:13:02.705 to the table functionality. 258 00:13:03.045 --> 00:13:05.105 So I can say add listener there, 259 00:13:05.765 --> 00:13:08.705 and I can listen for the persist event 260 00:13:09.685 --> 00:13:11.505 and I can just add my kitten listener. 261 00:13:11.505 --> 00:13:15.745 And the reason I, um, specified the listener, uh, 262 00:13:16.545 --> 00:13:17.945 separately instead of inline is 263 00:13:17.945 --> 00:13:20.465 because I will want to also remove it maybe. 264 00:13:21.245 --> 00:13:22.385 Um, so if I do that, 265 00:13:23.205 --> 00:13:26.105 and now if I bring my browser back, now, notice 266 00:13:26.105 --> 00:13:27.705 what happens when I refresh the browser. 267 00:13:28.365 --> 00:13:30.265 Oh, count, uh, changed. 268 00:13:30.395 --> 00:13:31.545 Count 33, count 269 00:13:31.645 --> 00:13:36.645 34, 36, 37, 38, 39, 40, 41, 42. 270 00:13:37.205 --> 00:13:40.305 Um, and uh, that's pretty cool, isn't it? 271 00:13:40.685 --> 00:13:42.265 Um, that, that is kind of cool. 272 00:13:42.805 --> 00:13:44.985 Uh, and of course, you know, um, 273 00:13:45.485 --> 00:13:47.785 if we look at our code, this is just very simple. 274 00:13:47.785 --> 00:13:49.825 This is just the very basic 275 00:13:50.015 --> 00:13:51.585 persisted version of what we did. 276 00:13:51.885 --> 00:13:53.665 Um, this is not how you would normally 277 00:13:53.715 --> 00:13:54.865 build a web application. 278 00:13:54.865 --> 00:13:56.985 Like, you know, something changes when you refresh the page, 279 00:13:57.405 --> 00:13:59.625 eh, uh, you would maybe have a button there 280 00:13:59.645 --> 00:14:02.545 and you'd press the button and more kittens would appear. 281 00:14:02.965 --> 00:14:07.345 Um, and, uh, with Kitten, that's not much harder 282 00:14:07.445 --> 00:14:08.585 to build, actually. 283 00:14:08.585 --> 00:14:10.465 So let's do it. Let's just, let's just do that. 284 00:14:10.885 --> 00:14:15.825 Um, so instead of having this count updated, 285 00:14:16.885 --> 00:14:19.265 um, every time the page is refreshed, 286 00:14:19.755 --> 00:14:21.705 let's instead put a button there 287 00:14:23.045 --> 00:14:25.585 and, uh, we'll call it the more kittens, more 288 00:14:26.415 --> 00:14:28.065 more kittens button. 289 00:14:29.365 --> 00:14:32.305 And every time this more kittens button is pressed, um, 290 00:14:32.645 --> 00:14:37.065 we want to, uh, see, uh, more kittens. 291 00:14:37.525 --> 00:14:41.065 So, um, if I just, uh, save this, you can see that I get, 292 00:14:41.245 --> 00:14:44.385 um, refreshes, um, in my browser automatically. 293 00:14:44.805 --> 00:14:48.185 Uh, hot reloads. Um, so right now it does nothing of course, 294 00:14:48.185 --> 00:14:49.865 because we haven't told it to do anything. 295 00:14:50.285 --> 00:14:52.765 Um, but we can very easily tell it to do something. 296 00:14:53.145 --> 00:14:57.005 So by specifying, um, some attributes on it. 297 00:14:57.185 --> 00:14:59.405 So for one thing, we wanna connect it to the backend. 298 00:14:59.985 --> 00:15:01.485 So, um, we need to give it a name 299 00:15:01.945 --> 00:15:03.645 and we'll call that more kittens, 300 00:15:04.865 --> 00:15:07.005 and then we'll tell it to connect to the backend. 301 00:15:07.345 --> 00:15:10.125 And we do that using the connect attribute. 302 00:15:10.665 --> 00:15:14.445 And the other thing I want is to make it a bit bigger, 303 00:15:14.475 --> 00:15:15.525 take up the whole space. 304 00:15:15.535 --> 00:15:20.205 Maybe Ill set its width to, uh, webkit fill available. 305 00:15:20.425 --> 00:15:22.525 I'm not using all of the various prefixes 306 00:15:22.925 --> 00:15:25.405 'cause I know this will work, um, for me right now. 307 00:15:25.505 --> 00:15:26.525 And that's all I care about. 308 00:15:26.585 --> 00:15:30.925 So if I just do this, um, I'll see that my button is larger, 309 00:15:31.185 --> 00:15:33.645 but nothing's happening right now, uh, 310 00:15:33.675 --> 00:15:36.085 because we've told it to connect to the backend, 311 00:15:36.185 --> 00:15:37.445 but we haven't really, you know, 312 00:15:37.445 --> 00:15:39.085 created the backend for it to connect to. 313 00:15:39.085 --> 00:15:40.605 So let's do that. Um, 314 00:15:40.705 --> 00:15:44.525 and you do that by exporting a function called on connect, 315 00:15:45.015 --> 00:15:47.365 which will be called when the page connects 316 00:15:47.755 --> 00:15:49.085 with a reference to the page. 317 00:15:49.665 --> 00:15:52.405 And then what you can do there is you can actually listen 318 00:15:52.545 --> 00:15:54.325 for events on the page. 319 00:15:54.625 --> 00:15:57.885 The event we want to listen for is more kittens, uh, 320 00:15:57.885 --> 00:16:01.805 which is the, uh, name of the, uh, 321 00:16:04.265 --> 00:16:07.165 of the button that we connected, right? 322 00:16:07.585 --> 00:16:09.925 So, uh, that button 323 00:16:09.995 --> 00:16:12.645 with the name more kittens when it's clicked, um, 324 00:16:12.675 --> 00:16:15.325 will be connected to our handler here. 325 00:16:15.825 --> 00:16:17.325 And that's where we can go 326 00:16:17.325 --> 00:16:20.325 and say, we can say kitten dot db dot kittens 327 00:16:21.135 --> 00:16:23.525 dot count plus plus, we can increment it, 328 00:16:23.585 --> 00:16:27.525 and then we need to send the updated 329 00:16:28.115 --> 00:16:30.445 Kittens component, right? 330 00:16:30.505 --> 00:16:31.965 But we don't have a Kittens component. 331 00:16:32.765 --> 00:16:34.805 Remember we saw components earlier, um, in the REPL? 332 00:16:35.425 --> 00:16:37.605 Um, but we don't have a Kittens component, um, 333 00:16:37.635 --> 00:16:40.485 because our Kittens component is in the page itself. 334 00:16:40.485 --> 00:16:42.805 So let's refactor to pull that out. 335 00:16:43.225 --> 00:16:45.725 So I'm just gonna delete that from there, I'm going 336 00:16:45.725 --> 00:16:49.605 to go over here and create a new component, 337 00:16:49.665 --> 00:16:52.525 and I'll call it Kittens, just like we did in the REPL. 338 00:16:53.585 --> 00:16:57.005 Um, and, uh, this time it won't take any, uh, 339 00:16:57.005 --> 00:16:58.085 it won't have any props, 340 00:16:58.785 --> 00:17:01.605 and it will return Kitten HTML again. 341 00:17:03.065 --> 00:17:05.125 Um, and we'll just paste that here. 342 00:17:05.705 --> 00:17:09.325 Now, the only thing that I need to change, um, in order 343 00:17:09.465 --> 00:17:11.165 for this, for us to be able 344 00:17:11.165 --> 00:17:13.685 to send this component back is I need to give it an ID so 345 00:17:13.685 --> 00:17:16.565 that it knows, uh, which component it is. 346 00:17:16.945 --> 00:17:19.965 So I'll just call this kittens. Yeah. 347 00:17:20.825 --> 00:17:24.725 Um, and then let's go ahead and send that back. 348 00:17:25.305 --> 00:17:29.325 So here, um, I can say, uh, page dot send, 349 00:17:30.545 --> 00:17:32.285 I'm gonna send some Kitten HTML 350 00:17:33.095 --> 00:17:34.845 again, uh, what am I gonna send? 351 00:17:34.955 --> 00:17:38.965 Well, that Kittens component. Uh, that's it really. 352 00:17:39.785 --> 00:17:42.045 Um, and if I haven't made any mistakes 353 00:17:42.145 --> 00:17:46.605 and I save this, then, um, when I go over, over here, 354 00:17:46.985 --> 00:17:49.405 uh, let's see, we have, um, 355 00:17:49.585 --> 00:17:51.565 we have no kittens right now displayed. 356 00:17:51.705 --> 00:17:54.445 Why? Because I deleted it from the page, 357 00:17:54.465 --> 00:17:58.925 but I didn't actually initially send a, uh, Kittens 358 00:17:59.685 --> 00:18:00.725 instance of the Kittens component. 359 00:18:01.585 --> 00:18:03.965 So let's do that. Let's just add it 360 00:18:04.025 --> 00:18:05.885 to our initial page render. 361 00:18:07.175 --> 00:18:09.995 And, uh, if I do that, you'll see there's our kittens, 362 00:18:10.135 --> 00:18:11.515 and if I click more kittens, 363 00:18:12.755 --> 00:18:13.995 I will not get, oh, there we go. 364 00:18:13.995 --> 00:18:15.235 There's our kittens coming in. 365 00:18:15.245 --> 00:18:16.395 Dunno why there was a delay there. 366 00:18:16.975 --> 00:18:19.315 The, as I keep clicking more kittens, 367 00:18:19.475 --> 00:18:20.915 I get more kittens from here. 368 00:18:21.295 --> 00:18:23.515 Um, so that's pretty cool, isn't it? 369 00:18:23.515 --> 00:18:24.995 That's like what, 24 lines of code. 370 00:18:25.535 --> 00:18:29.755 And we just, uh, basically made it into, um, 371 00:18:30.895 --> 00:18:35.035 an app using a workflow called Streaming HTML, um, 372 00:18:35.265 --> 00:18:38.235 that is, uh, that is unique to Kitten. 373 00:18:38.775 --> 00:18:42.635 Uh, so, and it uses, uh, an automatically created WebSocket 374 00:18:42.635 --> 00:18:46.195 behind the scenes and this naming convention, uh, 375 00:18:46.255 --> 00:18:49.595 to map events that occur on the, in the browser 376 00:18:49.975 --> 00:18:53.195 to your backend to, uh, so that you can listen for 377 00:18:53.215 --> 00:18:55.475 and respond to them and then send updates. 378 00:18:55.935 --> 00:18:58.035 Um, actually it's interesting, uh, 379 00:18:58.175 --> 00:19:00.435 so lemme see if I can show you on my tiny little screen 380 00:19:00.435 --> 00:19:04.755 here, but I'm going to open up the inspector view 381 00:19:05.265 --> 00:19:09.955 here and, uh, let me just, uh, put that inspector view, 382 00:19:10.495 --> 00:19:12.915 uh, let's dock it to the side. 383 00:19:13.015 --> 00:19:14.075 I'm gonna regret this given 384 00:19:14.095 --> 00:19:16.315 how little screen real estate I have here, 385 00:19:16.655 --> 00:19:17.995 but I'll make this full screen. 386 00:19:18.255 --> 00:19:22.235 So there we go. Um, and we are going to try 387 00:19:22.415 --> 00:19:23.795 and take a look at 388 00:19:23.795 --> 00:19:28.115 what happens when we actually update, um, this display. 389 00:19:28.375 --> 00:19:30.675 Now, for one thing, we've got a lot of kittens there now. 390 00:19:30.865 --> 00:19:34.755 Yeah. Um, and, uh, what I can do is, 391 00:19:34.755 --> 00:19:39.595 because I have a REPL to it heheheheh, is I can say kitten dot db 392 00:19:40.505 --> 00:19:43.275 dot kittens dot count equals one. 393 00:19:44.375 --> 00:19:45.755 And if I were to refresh this 394 00:19:46.055 --> 00:19:47.955 and we're back to one, so it's just easier to see, 395 00:19:48.215 --> 00:19:50.435 but notice what happens when I click this. 396 00:19:50.545 --> 00:19:54.635 Look at what's changing in the DOM, the body and the H1. 397 00:19:54.635 --> 00:19:55.715 So the body's being affected 398 00:19:55.715 --> 00:19:58.155 because the H1, uh, itself, 399 00:19:58.295 --> 00:20:00.075 the whole thing is being replaced. 400 00:20:00.675 --> 00:20:01.915 I mean, that's fine. 401 00:20:02.025 --> 00:20:04.275 It's performant at, why am I refreshing? Here we go. 402 00:20:04.275 --> 00:20:08.555 More kittens button. Um, so it's performant enough for this, 403 00:20:08.975 --> 00:20:10.635 uh, little tiny example, 404 00:20:11.335 --> 00:20:15.195 but, um, let's set that count back to one in our shell. 405 00:20:16.015 --> 00:20:17.475 Um, but, uh, 406 00:20:17.495 --> 00:20:21.195 it would be even better if it was more intelligent about it. 407 00:20:21.775 --> 00:20:25.155 So we can make it more intelligent, um, by 408 00:20:26.175 --> 00:20:30.715 having it morph that, um, the, 409 00:20:30.715 --> 00:20:31.715 the kittens back in. 410 00:20:32.375 --> 00:20:35.995 So here in my H1 tag, in order to do that, 411 00:20:36.335 --> 00:20:39.915 I'm just gonna tell it to morph it in. 412 00:20:40.465 --> 00:20:45.155 Okay? So now if I bring my browser over here, um, 413 00:20:45.155 --> 00:20:48.965 and I say more kittens, notice what's changing just 414 00:20:49.505 --> 00:20:51.965 the contents of the H one tag. 415 00:20:52.425 --> 00:20:54.005 Um, it's being morphed in 416 00:20:54.945 --> 00:20:56.965 and that is definitely more performant. 417 00:20:57.225 --> 00:20:59.845 Um, why update so many things if you don't need to? 418 00:21:00.505 --> 00:21:01.765 Uh, so that's pretty cool. 419 00:21:01.865 --> 00:21:04.165 And look, we've got, we've got so many kittens. 420 00:21:04.505 --> 00:21:08.725 Yay, we've got lots of kittens. Got more kittens, yay. 421 00:21:09.025 --> 00:21:11.125 So let's say that this is an app that you've been using 422 00:21:11.185 --> 00:21:13.805 for a while, and let's say it's not just kittens, 423 00:21:13.805 --> 00:21:15.445 but you've got a bunch of data there, 424 00:21:15.825 --> 00:21:19.525 but you want to change something in the, um, 425 00:21:19.545 --> 00:21:21.445 in the REPL, right? 426 00:21:22.025 --> 00:21:25.325 Um, and you know, you're worried, uh, 427 00:21:25.325 --> 00:21:26.565 that you might mess things up. 428 00:21:26.565 --> 00:21:28.525 Maybe this is on a live server, I don't know. 429 00:21:29.065 --> 00:21:33.045 So, um, a good thing to be able to do would be 430 00:21:33.045 --> 00:21:35.405 to back up all your data and to restore it. 431 00:21:35.405 --> 00:21:38.725 Well, guess what? Um, as of very recently, you can do that 432 00:21:39.225 --> 00:21:41.565 and you can do it through the settings, interface, 433 00:21:41.575 --> 00:21:43.485 which is the new, um, 434 00:21:43.895 --> 00:21:47.005 which is now a new multi-page settings interface, uh, 435 00:21:47.075 --> 00:21:48.365 that I introduced this week. 436 00:21:48.465 --> 00:21:49.725 So let's take a look at that 437 00:21:49.745 --> 00:21:52.885 before we say, for example, set the kitten count back 438 00:21:52.885 --> 00:21:55.765 to one, let's save the current state of the data. 439 00:21:55.785 --> 00:21:59.845 And this is going to be important as well as, um, myself 440 00:21:59.845 --> 00:22:04.125 and others start building, um, Small Web places where, 441 00:22:04.345 --> 00:22:08.125 you know, that might be your, one of your main, uh, 442 00:22:08.305 --> 00:22:09.965 web presences where you're public 443 00:22:10.025 --> 00:22:12.685 and you're using it to communicate privately, end-to-end, 444 00:22:12.685 --> 00:22:14.605 encrypted peer-to-peer with other web places. 445 00:22:15.225 --> 00:22:18.205 Um, it's gonna be important to be able to back up your data 446 00:22:19.625 --> 00:22:21.965 and restore it on not just your own server, 447 00:22:21.985 --> 00:22:23.965 but on any server you want to, uh, 448 00:22:23.965 --> 00:22:25.405 for data portability, for example. 449 00:22:25.705 --> 00:22:27.685 So the new backup and restore feature is really cool. 450 00:22:27.905 --> 00:22:29.605 And the new settings section is really cool. 451 00:22:29.605 --> 00:22:34.485 So let's take a look at that. So I am going to, well, 452 00:22:34.565 --> 00:22:37.725 I need to open the settings, uh, uh, section, 453 00:22:37.785 --> 00:22:39.925 the Kitten setting settings, uh, section. 454 00:22:40.385 --> 00:22:42.525 And this is, uh, the Kitten, the, sorry, 455 00:22:42.545 --> 00:22:43.685 the Kitten settings. 456 00:22:44.145 --> 00:22:45.565 Why can't I say Kitten settings? 457 00:22:45.785 --> 00:22:50.165 Uh, the kitten settings section, um, is, uh, 458 00:22:52.415 --> 00:22:54.455 a feature that every Kitten app has. 459 00:22:55.555 --> 00:22:58.655 So, uh, you don't have to build this yourself. 460 00:22:59.035 --> 00:23:00.775 Um, and it's part of the, kind of 461 00:23:01.395 --> 00:23:03.935 the extended Small Web protocol in a way. 462 00:23:04.675 --> 00:23:07.095 So, um, you'll see what I mean in a second. 463 00:23:07.675 --> 00:23:09.575 So first of all, how do we get to the settings? 464 00:23:09.605 --> 00:23:12.695 Well, in the REPL, um, there's a, 465 00:23:13.095 --> 00:23:14.895 a useful command called settings, 466 00:23:14.895 --> 00:23:16.775 and it'll show you the URL for it. 467 00:23:16.955 --> 00:23:21.055 So if I go there now, I'll see that, um, I can't sign in 468 00:23:21.055 --> 00:23:24.095 because my identity and secret have not been created yet. 469 00:23:24.595 --> 00:23:27.735 So every um, Small Web place, uh, 470 00:23:27.915 --> 00:23:29.655 has an identity a, a secret. 471 00:23:29.675 --> 00:23:31.815 So it's, it's, it's meant for one person to use. 472 00:23:32.075 --> 00:23:34.415 So you have a secret. And using that secret, 473 00:23:34.555 --> 00:23:36.335 you can access its private aspects. 474 00:23:36.875 --> 00:23:41.375 Um, and, but that needs to be created, um, with, uh, Domain, 475 00:23:41.395 --> 00:23:43.975 if it's being hosted somewhere in the future where, 476 00:23:44.035 --> 00:23:45.965 you know, you just go and you get a place 477 00:23:45.985 --> 00:23:47.845 and you install an app there, um, 478 00:23:48.355 --> 00:23:49.805 then the first time you hit it, 479 00:23:49.805 --> 00:23:51.005 you'll create it in the browser. 480 00:23:51.665 --> 00:23:54.405 But, um, we can also create it through the REPL, 481 00:23:54.495 --> 00:23:56.645 since I'm showing you the REPL, uh, today, 482 00:23:57.865 --> 00:23:59.245 we can use the id command. 483 00:23:59.345 --> 00:24:03.085 Now if you just run the id command by itself, 484 00:24:03.505 --> 00:24:04.645 um, it says the same thing. 485 00:24:04.645 --> 00:24:08.765 It says your ID doesn't exist yet, use the id create, uh, 486 00:24:08.765 --> 00:24:10.005 command to create it. 487 00:24:10.555 --> 00:24:13.165 Okay? Um, so let's do that. 488 00:24:13.665 --> 00:24:17.565 id create, and if I do that, 489 00:24:18.115 --> 00:24:19.725 then my new ID is created. 490 00:24:19.825 --> 00:24:21.085 It says this is your secret. 491 00:24:21.225 --> 00:24:25.565 And the secret is this, um, emoji string, uh, 492 00:24:25.565 --> 00:24:29.365 which actually is your at ed25519 private key. 493 00:24:29.425 --> 00:24:32.005 So you need to place that in your password manager. 494 00:24:32.505 --> 00:24:35.485 Um, it's emoji, so you cannot write it down on a, 495 00:24:35.625 --> 00:24:38.445 on a sticky, you know, post it and put it on your monitor. 496 00:24:38.655 --> 00:24:41.405 Can't do it. Have to use your password manager. 497 00:24:41.905 --> 00:24:44.645 You have to, you know, use good security practices. 498 00:24:45.025 --> 00:24:47.165 Um, you can also see your public keys, etc., if 499 00:24:47.165 --> 00:24:48.165 that's important for you. 500 00:24:48.945 --> 00:24:51.885 Um, and if I refresh, now that I've created my identity, 501 00:24:52.065 --> 00:24:53.125 oh, I can sign in. 502 00:24:53.225 --> 00:24:55.685 Oh, great. So let me paste that in and enter, 503 00:24:56.065 --> 00:24:59.445 and we get our new setting screen, uh, section. 504 00:24:59.825 --> 00:25:01.125 Um, it's telling me it's running, uh, 505 00:25:01.185 --> 00:25:02.445 I'm running in development mode. 506 00:25:02.445 --> 00:25:05.125 This is not, uh, deployed as a daemon. 507 00:25:05.905 --> 00:25:09.405 Um, and uh, here you can see we have all 508 00:25:09.405 --> 00:25:11.725 of our different sections for various things. 509 00:25:12.305 --> 00:25:14.605 Um, we have a nice welcome message, uh, 510 00:25:14.985 --> 00:25:16.045 and it says here, 511 00:25:16.045 --> 00:25:18.645 you'll find technical details about your Small Web place, 512 00:25:18.645 --> 00:25:20.685 such as your cryptographic identity, as well 513 00:25:20.685 --> 00:25:21.765 as configuration options. 514 00:25:22.265 --> 00:25:24.365 Um, you can hide that and once you hide it, it's gone. 515 00:25:24.865 --> 00:25:28.125 Um, and we can see the Kitten section here, Domain, App, 516 00:25:28.155 --> 00:25:31.285 Evergreen Web, um, there's the Data section 517 00:25:32.025 --> 00:25:33.405 and there's the backup and restore. 518 00:25:33.445 --> 00:25:35.405 I was talking about uploads, if you have any. 519 00:25:35.515 --> 00:25:37.125 There's our app database. 520 00:25:37.385 --> 00:25:39.085 So if we look over there, we can see, oh, 521 00:25:39.145 --> 00:25:40.765 our kitten count is 84. 522 00:25:42.025 --> 00:25:44.845 Um, so you can see that, uh, app database inside 523 00:25:44.845 --> 00:25:46.365 of your settings area as well. 524 00:25:46.785 --> 00:25:49.845 So let's go ahead and back up those 84 kittens that we have. 525 00:25:50.265 --> 00:25:52.085 So I'm gonna go to backup and restore 526 00:25:52.825 --> 00:25:55.485 and I'll say download backup, save it. 527 00:25:55.655 --> 00:25:56.965 There we go. It's been saved. 528 00:25:56.965 --> 00:25:58.765 It's tiny 'cause you know, it's not much data. 529 00:25:59.505 --> 00:26:03.485 Um, and uh, now let's go ahead 530 00:26:04.865 --> 00:26:09.165 and in our REPL kitten db 531 00:26:10.115 --> 00:26:12.365 dot kittens, um, count. 532 00:26:12.365 --> 00:26:16.085 Let's just print it out first. 84. Let's set it to one. 533 00:26:16.155 --> 00:26:18.245 Oops. Oh no. All of our kittens are gone. 534 00:26:18.315 --> 00:26:19.925 What are we gonna do? Well, 535 00:26:19.925 --> 00:26:23.085 what we can do is we can go back into our settings 536 00:26:24.065 --> 00:26:25.085 and we can restore. 537 00:26:25.305 --> 00:26:28.765 So over here in the restore section, 538 00:26:30.185 --> 00:26:34.125 go back there, I can choose the file that was downloaded, 539 00:26:34.225 --> 00:26:38.365 the latest one over here, and I can click Restore. 540 00:26:38.945 --> 00:26:41.085 And it says, are you sure you want to replace everything? 541 00:26:41.705 --> 00:26:45.205 Um, and okay, restore is complete waiting for server restart 542 00:26:45.865 --> 00:26:47.605 and the server restarts. 543 00:26:47.625 --> 00:26:49.045 And there you go. Um, 544 00:26:49.065 --> 00:26:51.285 and if I actually look over here in my app database, 545 00:26:51.405 --> 00:26:54.405 I can see that the kittens count is back to 84, 546 00:26:54.815 --> 00:26:57.445 which I can also confirm from. 547 00:26:57.545 --> 00:27:02.005 If I open up my REPL, um, I can confirm from 548 00:27:02.585 --> 00:27:06.245 the db kittens count there, um, that it matches. 549 00:27:07.145 --> 00:27:09.565 And, uh, that's really cool. 550 00:27:09.825 --> 00:27:13.045 And so that is the new multi-page settings. 551 00:27:13.585 --> 00:27:16.565 Um, and you can, you know, access things like your identity 552 00:27:16.905 --> 00:27:20.925 and your secrets, uh, which, um, 553 00:27:21.065 --> 00:27:22.285 are hidden by default. 554 00:27:22.665 --> 00:27:25.085 Um, you've got your SSH private key as well. 555 00:27:25.545 --> 00:27:29.485 Um, if, for example, you had a previous site, uh, 556 00:27:30.665 --> 00:27:32.365 and let's say you're replacing your blog 557 00:27:32.365 --> 00:27:35.205 with a Small Web place, um, you can redirect missing pages 558 00:27:35.665 --> 00:27:38.365 to a version of that site that's online, uh, 559 00:27:38.685 --> 00:27:42.765 using the 404 to 307, um, technique. 560 00:27:42.865 --> 00:27:46.325 You can read out more about that in 4042307, uh, 561 00:27:46.385 --> 00:27:47.685 for keeping an evergreen web. 562 00:27:48.425 --> 00:27:52.885 And, uh, so yeah, uh, all sorts of information about, um, 563 00:27:53.315 --> 00:27:56.965 various aspects, uh, various aspects of your site. 564 00:27:57.545 --> 00:28:01.085 That's the new, um, Kitten, Small Web, uh, 565 00:28:01.365 --> 00:28:03.125 settings, um, screen. 566 00:28:03.745 --> 00:28:08.175 Um, I just, uh, showed you, oh, by the way, um, 567 00:28:08.195 --> 00:28:13.175 you can see here, um, in, uh, in the REPL, uh, you can see 568 00:28:13.175 --> 00:28:16.655 that I'm getting some validation failures, uh, 569 00:28:16.995 --> 00:28:19.415 for like the settings page has a validation failure. 570 00:28:19.835 --> 00:28:21.055 Uh, Kitten shows you those. 571 00:28:21.075 --> 00:28:24.935 It actually runs an HTML validator, um, on your pages. 572 00:28:25.515 --> 00:28:30.015 Um, and you can actually see the, um, results of those. 573 00:28:30.795 --> 00:28:33.215 Uh, sorry, you can actually access those. 574 00:28:33.515 --> 00:28:34.895 So if I open this here, again, 575 00:28:34.895 --> 00:28:36.335 it's gonna be hard on a small screen 576 00:28:36.355 --> 00:28:37.655 to show you necessarily, 577 00:28:37.835 --> 00:28:42.015 but, um, if I go over here, what was this? 578 00:28:42.315 --> 00:28:44.815 The Evergreen Web page had a, yeah, there we go. 579 00:28:45.395 --> 00:28:49.255 It says, um, over here, validation, error attribute. 580 00:28:49.255 --> 00:28:53.015 Placeholder is not allowed on input, type input over here. 581 00:28:53.555 --> 00:28:57.055 And if I wanna actually see the validation errors on the 582 00:28:57.085 --> 00:28:59.055 page, uh, I click that link 583 00:28:59.115 --> 00:29:00.735 and it says, okay, well here's, 584 00:29:00.735 --> 00:29:02.655 here's a validation error over here. 585 00:29:03.475 --> 00:29:07.455 Um, that's where it's happening. Um, and it's right here. 586 00:29:07.645 --> 00:29:09.735 This is the thing that has the, the error. 587 00:29:09.735 --> 00:29:13.535 And if I make that a little smaller, um, there we go. 588 00:29:14.435 --> 00:29:17.015 Um, so you can actually see them in place as well. 589 00:29:17.635 --> 00:29:18.775 Uh, so that's kind of cool. 590 00:29:19.195 --> 00:29:22.495 Um, a little bit of an aside, but, uh, pretty cool. 591 00:29:23.395 --> 00:29:26.695 Um, so hopefully that will help you make more valid, um, 592 00:29:28.095 --> 00:29:32.455 applications, uh, um, and web pages and sites. 593 00:29:33.515 --> 00:29:35.735 Uh, yeah. Okay. So that's it. 594 00:29:35.885 --> 00:29:40.775 That is basically, um, it for, uh, this video. 595 00:29:41.465 --> 00:29:45.485 Um, so we have a new REPL, as you can see. Um, beautiful. 596 00:29:45.625 --> 00:29:46.765 Um, you can play with it. 597 00:29:46.965 --> 00:29:50.645 I think it's gonna be important for, um, both for teaching, 598 00:29:50.845 --> 00:29:54.125 I think, um, web development, um, 599 00:29:54.425 --> 00:29:55.845 but also of course for debugging. 600 00:29:56.465 --> 00:29:58.805 Um, and, uh, and, 601 00:29:58.865 --> 00:30:00.085 and you know, if you wanna tinker, 602 00:30:00.085 --> 00:30:01.245 if you wanna go under the hood 603 00:30:01.245 --> 00:30:03.445 and kind of say, oh, how does everything actually work? 604 00:30:03.505 --> 00:30:04.805 And I want to get, um, 605 00:30:05.605 --> 00:30:07.845 I wanna see exactly what's happening in memory right now. 606 00:30:08.025 --> 00:30:10.765 So it's pretty cool. And the new Settings pages hopefully 607 00:30:10.765 --> 00:30:14.765 will make it easier, um, to, uh, to, 608 00:30:14.765 --> 00:30:15.965 to work with Kitten settings. 609 00:30:16.005 --> 00:30:19.845 I think it's definitely a step up from the single page that, 610 00:30:20.185 --> 00:30:21.845 uh, there was before. 611 00:30:22.585 --> 00:30:24.445 So I hope you enjoyed this video. 612 00:30:24.745 --> 00:30:29.405 Um, Kitten is getting pretty close to being ready. 613 00:30:30.045 --> 00:30:32.525 I think for use for like version 1.0. 614 00:30:32.945 --> 00:30:37.285 Uh, Domain, which is used to host Kitten sites, um, 615 00:30:37.385 --> 00:30:39.685 is a little further back from version 1.0. 616 00:30:39.785 --> 00:30:41.285 But, um, that's, 617 00:30:41.705 --> 00:30:43.765 and I'm of course using Kitten to build Domain. 618 00:30:44.625 --> 00:30:47.965 Um, and, uh, eventually, uh, 619 00:30:48.295 --> 00:30:52.125 there will also be a third project called Place, which is, 620 00:30:52.465 --> 00:30:56.005 um, basically, you know, my interpretation of 621 00:30:56.035 --> 00:30:59.925 what an online Small Web place, uh, could be, uh, 622 00:30:59.925 --> 00:31:01.565 where you can be public and you can be private. 623 00:31:01.945 --> 00:31:04.605 Um, and hopefully, um, since I'm sharing all 624 00:31:04.605 --> 00:31:08.285 of these various bricks that I'm using to build this, um, 625 00:31:08.865 --> 00:31:10.645 Kitten, Domain, etc., all free 626 00:31:10.645 --> 00:31:12.645 and open source, hopefully other people will build, 627 00:31:12.865 --> 00:31:15.485 you know, other applications, Small Web applications, 628 00:31:16.105 --> 00:31:17.725 um, in the future as well. 629 00:31:17.785 --> 00:31:19.805 But, um, it's exciting. It's, it's getting closer. 630 00:31:20.385 --> 00:31:23.885 And, uh, you know, my goal is to release Kitten 631 00:31:23.945 --> 00:31:25.245 and Domain this year 632 00:31:25.745 --> 00:31:28.485 and Place a very basic version of, of Place. 633 00:31:29.145 --> 00:31:30.325 Um, so it's getting closer 634 00:31:30.945 --> 00:31:35.645 and, uh, I hope, um, this gives you some idea of, you know, 635 00:31:35.865 --> 00:31:38.005 uh, the kind of direction it's heading in. 636 00:31:38.105 --> 00:31:39.885 And I hope you enjoy these new features, 637 00:31:39.985 --> 00:31:41.045 and thank you for watching. 638 00:31:41.355 --> 00:31:42.805 Take care. Bye-Bye.