WEBVTT - This file was automatically generated by VIMEO

0
00:00:25.300 --> 00:00:28.700
Hello and welcome to this month's

1
00:00:28.700 --> 00:00:31.300
edition of Small is Beautiful.

2
00:00:31.300 --> 00:00:34.700
My name is Aral Balkan and it's

3
00:00:34.700 --> 00:00:37.100
going to be just me today because Laura is

4
00:00:37.100 --> 00:00:41.100
busy. And today I'm going

5
00:00:40.100 --> 00:00:44.500
to take you through something that

6
00:00:44.500 --> 00:00:47.600
I've added very recently to Kitten: the ability

7
00:00:47.600 --> 00:00:51.800
to create end-to-end encrypted Small

8
00:00:50.800 --> 00:00:55.700
Web applications and peer-

9
00:00:53.700 --> 00:00:56.400
to-peer Small

10
00:00:56.400 --> 00:00:58.400
Web applications. I mean, that is actually

11
00:00:59.500 --> 00:01:03.500
part of the nature of what the Small Web is going to be but so

12
00:01:02.500 --> 00:01:06.700
it's quite exciting. I've gone

13
00:01:05.700 --> 00:01:08.400
beyond - a little beyond - the

14
00:01:08.400 --> 00:01:11.400
kind of infrastructure work I've been doing in the last few years...

15
00:01:11.400 --> 00:01:14.800
building upon that now, we're

16
00:01:14.800 --> 00:01:19.800
getting to the fun bits. So yeah, let's

17
00:01:18.800 --> 00:01:21.300
see... I think people are

18
00:01:21.300 --> 00:01:22.500
already joining.

19
00:01:24.200 --> 00:01:27.500
Um, yes, hello. Jovial Hopper - you

20
00:01:27.500 --> 00:01:31.600
can change those names if you want to - Hi Olwe?

21
00:01:30.600 --> 00:01:33.200
...I'm not entirely sure how to

22
00:01:33.200 --> 00:01:36.200
pronounce your name. Hello! So we have

23
00:01:36.200 --> 00:01:39.200
some folks joining which is kind of cool. All right, so

24
00:01:42.300 --> 00:01:44.300
let's get started.

25
00:01:45.700 --> 00:01:45.800
so

26
00:01:47.100 --> 00:01:50.300
I'll start from the very beginning. I'm not going to assume, you

27
00:01:50.300 --> 00:01:53.000
know, anything about kitten or how to get

28
00:01:53.300 --> 00:01:56.600
started. So I'm just gonna pull up

29
00:01:56.600 --> 00:01:59.400
a web browser here. And actually let

30
00:01:59.400 --> 00:02:01.200
me just give me one second. Sorry.

31
00:02:02.100 --> 00:02:05.100
Just going to set my system to light mode

32
00:02:05.100 --> 00:02:08.800
because it's just gone 5pm and it's gone to dark mode. I want

33
00:02:08.800 --> 00:02:10.100
to demode and light mode for you.

34
00:02:11.300 --> 00:02:15.200
So oops, that is

35
00:02:14.200 --> 00:02:17.800
the chat, let's go.

36
00:02:17.800 --> 00:02:18.800
It's the web browser.

37
00:02:19.800 --> 00:02:22.600
Right, so I'm just gonna pull up a web browser here and take

38
00:02:22.600 --> 00:02:26.300
you to the kits and website which is it's repository

39
00:02:25.300 --> 00:02:28.400
right now, which is all code work.

40
00:02:28.400 --> 00:02:31.600
So it's codebug.org forward slash

41
00:02:31.600 --> 00:02:33.200
kitten forward slash.

42
00:02:34.700 --> 00:02:37.500
If you go over there, you'll see

43
00:02:37.500 --> 00:02:40.700
that kitten is a web development kit that small person

44
00:02:40.700 --> 00:02:43.100
loves you all true.

45
00:02:44.200 --> 00:02:47.300
And there is this warning that you

46
00:02:47.300 --> 00:02:50.200
should really heat. It's not future complete. It's

47
00:02:50.200 --> 00:02:53.500
not ready for production. Use if you are a

48
00:02:53.500 --> 00:02:57.200
developer, you can play with it just don't

49
00:02:56.200 --> 00:02:59.200
really deploy stuff with it and what

50
00:02:59.200 --> 00:03:02.800
I'm going to show you today with the basic end-to-end encrypted

51
00:03:02.800 --> 00:03:05.400
chat example, for example,

52
00:03:05.400 --> 00:03:08.200
don't take that and deploy that

53
00:03:08.200 --> 00:03:11.800
or use it for, you know, actual communicate private

54
00:03:11.800 --> 00:03:14.200
communication. This is just to show you

55
00:03:14.200 --> 00:03:17.500
kind of the basics of how to do things. And also

56
00:03:17.500 --> 00:03:20.500
I love the fact that I can actually use

57
00:03:20.500 --> 00:03:23.800
these examples to quickly prototype and

58
00:03:23.800 --> 00:03:26.700
new features that are going to come into kid and move some of the feet functionality

59
00:03:26.700 --> 00:03:29.700
back into it. Anyway all that to say, you know,

60
00:03:29.700 --> 00:03:32.300
very early days right now.

61
00:03:33.200 --> 00:03:36.100
So, let's see what we're

62
00:03:36.100 --> 00:03:36.800
going to build.

63
00:03:37.900 --> 00:03:39.100
so

64
00:03:40.900 --> 00:03:43.600
Kitten, so for first

65
00:03:43.600 --> 00:03:46.500
of all, if you want to follow along if you want to install it,

66
00:03:46.500 --> 00:03:47.500
let's go with the installation.

67
00:03:48.900 --> 00:03:51.700
Um, you can either clone this

68
00:03:51.700 --> 00:03:55.800
repository and run dots

69
00:03:54.800 --> 00:03:57.700
forward slash install. You will

70
00:03:57.700 --> 00:04:00.200
need node.js for that. You can do that.

71
00:04:00.200 --> 00:04:05.000
You can do that right now if you want to follow along if you

72
00:04:03.100 --> 00:04:06.600
don't have no JS installed

73
00:04:06.600 --> 00:04:09.700
or if you want to if you trust that the

74
00:04:09.700 --> 00:04:12.400
installation script that you get from code Burke is the

75
00:04:12.400 --> 00:04:15.200
one that I have here, which you can

76
00:04:15.200 --> 00:04:19.000
take a look at and if you

77
00:04:18.300 --> 00:04:21.200
trust that you trust piping into

78
00:04:21.200 --> 00:04:24.900
your shell then you can

79
00:04:24.900 --> 00:04:27.600
install it via wget and

80
00:04:27.600 --> 00:04:30.200
curl as well. So let's just do

81
00:04:30.200 --> 00:04:33.500
that here. I've already got installed, but I can install it

82
00:04:33.500 --> 00:04:36.200
again and it will just install the latest version from

83
00:04:37.800 --> 00:04:41.000
From the repository over what I have installed locally,

84
00:04:40.600 --> 00:04:45.500
so it'll be just like what you're doing. So, let's

85
00:04:44.500 --> 00:04:48.300
bring up my terminal

86
00:04:47.300 --> 00:04:49.100
here.

87
00:04:50.200 --> 00:04:53.600
And I'm just going to paste that so I'll just use wget. You

88
00:04:53.600 --> 00:04:56.100
could use Curl as well. So it says

89
00:04:56.100 --> 00:04:59.200
installing kitten web install delay detected blah blah blah.

90
00:04:59.200 --> 00:05:03.400
Let's take a look at what happened installing. Okay,

91
00:05:02.400 --> 00:05:05.800
it will if it

92
00:05:05.800 --> 00:05:08.500
finds if you're on Linux, there's this

93
00:05:08.500 --> 00:05:10.800
gorgeous security theater. That's like

94
00:05:12.400 --> 00:05:15.500
A remnant of the Mainframe era things

95
00:05:15.500 --> 00:05:18.200
think sometimes change slowly in the Linux

96
00:05:18.200 --> 00:05:21.300
world called privileged ports, which

97
00:05:21.300 --> 00:05:24.500
is great when you were on mainframe computers and that

98
00:05:24.500 --> 00:05:28.000
was a trust model. It's actually almost an anti-security feature

99
00:05:27.300 --> 00:05:30.600
these days. No other major operating

100
00:05:30.600 --> 00:05:33.300
system. Has it Mac OS removed it for example a few

101
00:05:33.300 --> 00:05:36.800
years ago, but we're stuck with it for now, but it

102
00:05:36.800 --> 00:05:40.900
means that we can't bind to Ports under

103
00:05:39.900 --> 00:05:42.000
a certain number so we

104
00:05:42.400 --> 00:05:45.400
can't bind to 80 and 443 which the two that we're interested

105
00:05:45.400 --> 00:05:48.800
in in web development for testing

106
00:05:48.800 --> 00:05:51.600
locally. So Keith, you know trying to keep your local test

107
00:05:51.600 --> 00:05:54.800
environment as close to what you're going to deploy with. It's

108
00:05:54.800 --> 00:05:57.000
always a great idea and that's something that kitten really

109
00:05:57.600 --> 00:06:00.600
adheres to that's why you test over https locally as

110
00:06:00.600 --> 00:06:03.100
well. That's all. Yeah just done for you don't have to worry about it.

111
00:06:04.700 --> 00:06:07.400
Anyway, it will actually set that

112
00:06:07.400 --> 00:06:10.300
on your computer. It will lower the

113
00:06:10.300 --> 00:06:13.200
privilege report so you can actually buy into 80 and 443.

114
00:06:14.200 --> 00:06:17.600
And again that does not put you at risk

115
00:06:17.600 --> 00:06:20.100
because you are not automate frame.

116
00:06:20.700 --> 00:06:23.500
All right. I hope I mean, I don't know. If you are then don't

117
00:06:23.500 --> 00:06:27.200
do this do not do not run this on a

118
00:06:26.200 --> 00:06:30.300
Mainframe computer from the 1960s big security

119
00:06:30.300 --> 00:06:34.200
hole for those. All right. So anyway, and

120
00:06:33.200 --> 00:06:36.800
we can start using kitten. So what

121
00:06:36.800 --> 00:06:41.600
we're gonna build today is a peer-to-peer end-to-end

122
00:06:40.600 --> 00:06:44.600
encrypted chat using

123
00:06:43.600 --> 00:06:45.100
kids.

124
00:06:45.600 --> 00:06:49.300
so if we go back to the kitten

125
00:06:48.300 --> 00:06:50.300
website

126
00:06:51.100 --> 00:06:54.000
and if you look down there.

127
00:06:56.200 --> 00:06:59.300
You'll find that there is

128
00:06:59.300 --> 00:07:00.100
a getting started.

129
00:07:01.500 --> 00:07:05.100
A guy does not even a guy. It's actually tutorials. So it

130
00:07:04.100 --> 00:07:07.000
takes you through, you know, very very

131
00:07:07.800 --> 00:07:10.700
basics of things. Like how do we just create an HTML file?

132
00:07:10.700 --> 00:07:13.000
And then run that and then how do we you know

133
00:07:13.800 --> 00:07:16.200
count kittens? I'm not gonna go through

134
00:07:16.200 --> 00:07:19.600
all this today. You can you can look through it and you should

135
00:07:19.600 --> 00:07:22.400
as well if you're interested in kitten you should look through it and really

136
00:07:22.400 --> 00:07:25.200
kind of see you know, what?

137
00:07:26.500 --> 00:07:29.600
How it works and it's assumptions Etc

138
00:07:29.600 --> 00:07:33.400
because it's quite different to what you might be used to but where

139
00:07:33.400 --> 00:07:36.500
I'm going to jump to is so there are lots of these examples

140
00:07:36.500 --> 00:07:39.800
that you can see here. There's

141
00:07:39.800 --> 00:07:43.400
stuffed with the fatty verse you can get posts

142
00:07:42.400 --> 00:07:46.300
from my favorite from

143
00:07:46.300 --> 00:07:49.100
my Macedon instance, etc.

144
00:07:49.400 --> 00:07:53.100
Etc, etc. And then we get to kitten chat. So there's

145
00:07:52.100 --> 00:07:55.500
a whole tutorial on it. You can also find

146
00:07:55.500 --> 00:07:58.500
all of these examples if you

147
00:07:58.500 --> 00:08:01.800
clone the repository, they're only the examples folder so

148
00:08:01.800 --> 00:08:05.800
you can just run any of these examples. So,

149
00:08:05.800 --> 00:08:08.000
you know, hey, let me

150
00:08:08.200 --> 00:08:11.400
show you so let me show you just the

151
00:08:11.400 --> 00:08:15.000
very basic version of what we're gonna start with and what

152
00:08:14.100 --> 00:08:17.600
we're going to build on which is the persistent kitten

153
00:08:17.600 --> 00:08:20.500
chat example, so to do

154
00:08:20.500 --> 00:08:25.100
that, I'm going to bring back my terminal here and I've

155
00:08:24.100 --> 00:08:26.400
already got Kitt

156
00:08:26.500 --> 00:08:30.200
the source code of course

157
00:08:30.200 --> 00:08:34.000
surprise surprise on my computer. So

158
00:08:33.200 --> 00:08:36.000
if you look over here, this is the kit in the

159
00:08:36.300 --> 00:08:39.300
source code. Just what you saw in that repository and we

160
00:08:39.300 --> 00:08:42.600
have the examples there. Okay, since we're

161
00:08:42.600 --> 00:08:45.100
going to build upon an existing example, I'm actually going to

162
00:08:45.100 --> 00:08:47.500
make a demo folder.

163
00:08:48.700 --> 00:08:52.500
and I'll go ahead and copy

164
00:08:51.500 --> 00:08:54.900
the persisted kitten

165
00:08:54.900 --> 00:08:57.600
chat example, I'll do

166
00:08:57.600 --> 00:09:01.000
that recursively so it gets the the folder

167
00:09:00.300 --> 00:09:03.700
and I'll put that into my demo folder

168
00:09:03.700 --> 00:09:04.800
so that we can just work with a

169
00:09:06.700 --> 00:09:09.500
Fresh copy of that. So now

170
00:09:09.500 --> 00:09:12.300
I'm in my demo folder. There's the persisted kitten chat example

171
00:09:12.300 --> 00:09:15.500
that I got and this is all it is really let

172
00:09:15.500 --> 00:09:18.800
me look at how few like how few source files

173
00:09:18.800 --> 00:09:21.200
there are I mean look at the sizes as well.

174
00:09:21.200 --> 00:09:24.500
You can see that you know

175
00:09:24.500 --> 00:09:27.700
that this is Tiny. It's it's tiny tiny

176
00:09:27.700 --> 00:09:31.000
tiny. I'll show you the source code as well going forward, but just tiny

177
00:09:30.400 --> 00:09:32.900
and notice what you don't see

178
00:09:33.800 --> 00:09:36.400
like like where's the bill

179
00:09:36.400 --> 00:09:39.500
process or the build configuration or where's

180
00:09:39.500 --> 00:09:42.200
the where's all the stuff that's generated for you

181
00:09:42.200 --> 00:09:45.400
when you start a new web project. We don't need any of this. We're not

182
00:09:45.400 --> 00:09:48.700
doing big Tech here. We're not doing big web. We're not

183
00:09:48.700 --> 00:09:52.500
working in an Enterprise, you know, so we

184
00:09:52.500 --> 00:09:55.400
don't need any of that. There is no build process

185
00:09:55.400 --> 00:09:58.800
with kid. All right. So, how do

186
00:09:58.800 --> 00:10:01.400
we run this? Well, it's it's pretty simple. We say

187
00:10:01.400 --> 00:10:01.900
kitten.

188
00:10:03.100 --> 00:10:06.600
Um, and that's it. And the first

189
00:10:06.600 --> 00:10:10.800
time it runs as you notice there was a like a little delay there. That's

190
00:10:09.800 --> 00:10:13.300
because kitten itself has

191
00:10:12.300 --> 00:10:15.400
some has a

192
00:10:15.400 --> 00:10:18.100
web application and some roots that it kind

193
00:10:18.100 --> 00:10:21.200
of intermixes into your applications. We'll see what all that's about later. It's

194
00:10:21.200 --> 00:10:23.800
for authentication Etc. So you don't have to build them.

195
00:10:24.500 --> 00:10:28.800
But just like any kid in application if there

196
00:10:28.800 --> 00:10:31.400
are packages that it uses kitten automatically

197
00:10:31.400 --> 00:10:34.100
runs npm install on those and again, you don't need to have

198
00:10:34.100 --> 00:10:37.100
node or npm installed kitten treats. No

199
00:10:37.100 --> 00:10:40.400
JS as it's runtime and it installs the version

200
00:10:40.400 --> 00:10:45.200
that it needs that it wants and and

201
00:10:43.200 --> 00:10:48.400
it's installs mpm

202
00:10:47.400 --> 00:10:50.400
as well the version that wants so

203
00:10:50.400 --> 00:10:53.300
you don't have to worry about that. It doesn't mess with your system or anything. It

204
00:10:53.300 --> 00:10:56.400
just installs a binaries for your

205
00:10:56.400 --> 00:10:59.400
earrings Let's see. We have some chat

206
00:10:59.400 --> 00:11:02.500
comments coming in. Let's

207
00:11:02.500 --> 00:11:03.800
see what the comments are.

208
00:11:04.600 --> 00:11:07.200
Let's see. You don't want to let

209
00:11:07.200 --> 00:11:10.200
any random user bind to commonwealthifying ports on a

210
00:11:10.200 --> 00:11:13.200
server system. If you're the only user on the system. It's no problem.

211
00:11:13.200 --> 00:11:15.800
Exactly and I'm the only user.

212
00:11:16.200 --> 00:11:16.800
system

213
00:11:17.400 --> 00:11:20.300
Harold yeah, exactly and the

214
00:11:20.300 --> 00:11:23.700
thing is today these days we have personal computers.

215
00:11:23.700 --> 00:11:26.800
So usually it's one person

216
00:11:26.800 --> 00:11:30.700
on there. So yeah, let's

217
00:11:29.700 --> 00:11:30.800
see.

218
00:11:32.800 --> 00:11:35.700
People are sharing it. That's nice.

219
00:11:35.700 --> 00:11:38.600
Toasterson says hello. Hi. Oh, I

220
00:11:38.600 --> 00:11:42.400
pronounced it. Well, okay. That was always that

221
00:11:41.400 --> 00:11:44.700
was entirely an accident.

222
00:11:44.700 --> 00:11:47.300
I am glad that I did though.

223
00:11:47.800 --> 00:11:49.600
Okay, perfect. Let's get rid of those.

224
00:11:50.400 --> 00:11:53.900
Right. So here we are kittens running.

225
00:11:54.600 --> 00:11:57.600
And so let me bring up my web

226
00:11:57.600 --> 00:11:58.800
browser. Oh.

227
00:11:59.300 --> 00:12:02.800
Push it over here and let's just go to https localhost.

228
00:12:03.700 --> 00:12:06.500
And we see here the persistent kitten

229
00:12:06.500 --> 00:12:09.500
chat example, and it's persisted.

230
00:12:09.500 --> 00:12:11.700
I was already testing it clearly.

231
00:12:13.600 --> 00:12:16.200
And didn't delete the database. All right, that's fine.

232
00:12:16.200 --> 00:12:20.100
At least you know, it's not a lie. It is persistent. Let's

233
00:12:19.100 --> 00:12:22.800
let's also open another window.

234
00:12:23.700 --> 00:12:24.400
here

235
00:12:25.700 --> 00:12:27.500
Let's see. Let's

236
00:12:30.400 --> 00:12:33.800
There we go, and let me go to localhost there

237
00:12:33.800 --> 00:12:37.600
as well. Now. This is a very traditional websocket chat,

238
00:12:37.600 --> 00:12:40.900
right? What am I mean by like traditional web based web

239
00:12:40.900 --> 00:12:44.100
socket chat. So here I'll

240
00:12:43.100 --> 00:12:46.300
make this a roll and I'll make this also all

241
00:12:47.500 --> 00:12:50.500
Notice it's centralized. So we both

242
00:12:50.500 --> 00:12:53.200
go to local. So it's just being served at locals just like

243
00:12:53.200 --> 00:12:58.200
the web normally is and here I'm just gonna say hey I'm

244
00:12:56.200 --> 00:12:58.700
back.

245
00:12:59.700 --> 00:13:03.800
And from here, I'll say that's amazing.

246
00:13:02.800 --> 00:13:06.500
Wow. All

247
00:13:05.500 --> 00:13:08.400
right, whatever. So there

248
00:13:08.400 --> 00:13:12.000
you go. You can see it working. There's the that's

249
00:13:11.200 --> 00:13:14.600
a whip socket check very traditional

250
00:13:14.600 --> 00:13:17.700
very much like, you know, you go to a single

251
00:13:17.700 --> 00:13:20.400
domain and lots of people go there they congregate at

252
00:13:20.400 --> 00:13:21.800
centralized. You have a chat.

253
00:13:22.400 --> 00:13:26.200
All right. Nothing. We haven't really seen before what we

254
00:13:25.200 --> 00:13:28.000
probably haven't seen before. Let me

255
00:13:28.300 --> 00:13:30.700
actually close. This is

256
00:13:34.600 --> 00:13:36.000
Is how it's built in kitten?

257
00:13:36.800 --> 00:13:40.300
So let's start by taking a look at this first of

258
00:13:40.300 --> 00:13:40.300
all.

259
00:13:41.500 --> 00:13:41.800
so

260
00:13:44.800 --> 00:13:47.900
again, these are the files that are in there. So let's

261
00:13:47.900 --> 00:13:51.200
take a quick look at what

262
00:13:50.200 --> 00:13:53.500
those files are. So I'm just going to open up my editor. I

263
00:13:53.500 --> 00:13:56.500
use Helix editor. He looks Dash editor.com if you

264
00:13:56.500 --> 00:13:59.400
want to look at it, it's pretty cool. I really

265
00:13:59.400 --> 00:14:03.200
enjoy it. Let's start with the

266
00:14:02.200 --> 00:14:04.700
chat dot socket.

267
00:14:05.700 --> 00:14:08.800
Okay, so actually you know what? You know

268
00:14:08.800 --> 00:14:09.600
what no here.

269
00:14:10.500 --> 00:14:13.400
Let's start even simpler. Okay. Let me

270
00:14:13.400 --> 00:14:16.000
show you how a socket Works in kit. So I'm

271
00:14:16.100 --> 00:14:19.400
going to make a web socket demo folder.

272
00:14:19.400 --> 00:14:23.300
Okay, there's nothing in here. I've started a new project. Okay, and

273
00:14:22.300 --> 00:14:25.500
I'm just going to create a file

274
00:14:25.500 --> 00:14:28.300
called chat dot sockets. All right. So let's

275
00:14:28.300 --> 00:14:33.100
just start from scratch just so you see there's no magic here. All

276
00:14:31.100 --> 00:14:34.100
right, so let me

277
00:14:34.100 --> 00:14:37.700
start my Helix editor open up that chat dot socket.

278
00:14:37.700 --> 00:14:41.100
So what's a socket root in in kitten?

279
00:14:40.100 --> 00:14:43.400
It's just like any other kitten Roots

280
00:14:43.400 --> 00:14:45.500
so you export a default.

281
00:14:46.500 --> 00:14:46.900
function

282
00:14:47.800 --> 00:14:50.400
and it gets

283
00:14:50.400 --> 00:14:51.400
a socket.

284
00:14:52.100 --> 00:14:57.200
As its first arguments and request the

285
00:14:56.200 --> 00:15:00.600
request the HTTP request that originated

286
00:14:59.600 --> 00:15:02.500
it we're not going to use that. So I've just put an

287
00:15:02.500 --> 00:15:06.000
underscore to indicate that we're not going to use that but

288
00:15:05.100 --> 00:15:09.100
what we can do is we can listen for

289
00:15:08.100 --> 00:15:11.200
the message events on there. So this

290
00:15:11.200 --> 00:15:14.300
basically behind the scenes. This is

291
00:15:14.300 --> 00:15:19.000
the Ws module in node.js. So if

292
00:15:17.100 --> 00:15:20.100
you if you want

293
00:15:20.100 --> 00:15:23.300
to look up how it works I've documented it, of

294
00:15:23.300 --> 00:15:26.500
course in kitten as well, but you can mirror the

295
00:15:26.500 --> 00:15:29.700
client side websockets API so

296
00:15:29.700 --> 00:15:32.700
we can just say add event listener just like we would in

297
00:15:32.700 --> 00:15:35.200
the browser and we want to listen for

298
00:15:35.200 --> 00:15:39.900
the message event. Okay, and when

299
00:15:38.900 --> 00:15:41.400
we get the message events,

300
00:15:42.100 --> 00:15:45.100
We want to do something with it. What do we

301
00:15:45.100 --> 00:15:48.600
want to do? Well, just for testing let's say

302
00:15:48.600 --> 00:15:53.100
we want to send that message to everyone including the

303
00:15:51.100 --> 00:15:54.300
person who sent it or

304
00:15:54.300 --> 00:15:58.000
the node that sent it to us the client.

305
00:15:57.500 --> 00:16:00.400
So all we would do is is we

306
00:16:00.400 --> 00:16:03.500
would say well we need to get the message out of

307
00:16:03.500 --> 00:16:06.400
there because it's on event.data.

308
00:16:07.100 --> 00:16:10.800
And if here for example You're Expecting Json or

309
00:16:10.800 --> 00:16:13.800
whatever then you would parse it. I will

310
00:16:13.800 --> 00:16:16.200
just test it with strings and we won't even build

311
00:16:16.200 --> 00:16:19.200
an interface because we're going to have an interface later. So let's

312
00:16:19.200 --> 00:16:22.300
not waste time with that. So just going to test it with strings.

313
00:16:22.300 --> 00:16:26.100
So I'll just get it directly and then

314
00:16:25.100 --> 00:16:28.500
I will

315
00:16:30.400 --> 00:16:33.200
I'm just gonna use that socket that I have and I'll

316
00:16:33.200 --> 00:16:34.200
say socket all.

317
00:16:35.700 --> 00:16:37.800
And I'll send that message.

318
00:16:39.600 --> 00:16:42.500
Okay, so let's test

319
00:16:42.500 --> 00:16:42.600
this.

320
00:16:43.700 --> 00:16:45.100
So, this is our app.

321
00:16:47.700 --> 00:16:50.300
and I mean, this is our app like again there is

322
00:16:50.300 --> 00:16:52.600
nothing else to do in kitten you just kind of

323
00:16:53.900 --> 00:16:56.400
Write the logic you want and that's it. There. Isn't

324
00:16:56.400 --> 00:16:59.500
this whole kind of song and dance you have to do before it

325
00:16:59.500 --> 00:17:02.100
works. So I'll just

326
00:17:02.100 --> 00:17:02.600
say kitten.

327
00:17:03.400 --> 00:17:06.500
And here you can see that it is

328
00:17:06.500 --> 00:17:09.800
running over here. How should

329
00:17:09.800 --> 00:17:12.500
we test it? I actually have a

330
00:17:12.500 --> 00:17:15.500
little tool that I can use in my browser for testing

331
00:17:15.500 --> 00:17:18.100
this so let's bring back the browser.

332
00:17:20.800 --> 00:17:24.200
Um, and I'm just going to go and select

333
00:17:23.200 --> 00:17:26.600
rested which is just this.

334
00:17:28.500 --> 00:17:32.000
Plug-in for a plug-in extension for Firefox

335
00:17:31.700 --> 00:17:36.100
where you can just make a requests again.

336
00:17:35.100 --> 00:17:38.400
I'm not going to use that actually because I'm not thinking I'm

337
00:17:38.400 --> 00:17:41.700
actually going to use the weasel

338
00:17:41.700 --> 00:17:44.400
websocket weasel extension. Where's my

339
00:17:44.400 --> 00:17:45.100
mind? Who knows?

340
00:17:46.800 --> 00:17:49.600
Um, so let's connect to

341
00:17:49.600 --> 00:17:52.400
WSS, right? Because it's secure

342
00:17:52.400 --> 00:17:56.000
Local Host forward slash chat dot

343
00:17:55.300 --> 00:17:59.400
socket. All right, let's open that connection. And

344
00:17:58.400 --> 00:18:02.000
it says it's connecting and

345
00:18:01.300 --> 00:18:02.900
the connection is ready.

346
00:18:03.800 --> 00:18:06.400
And so let's send a

347
00:18:06.400 --> 00:18:10.300
message. Let's say hello and send

348
00:18:10.300 --> 00:18:13.300
it. Now. Look what happened we sent. Hello we got hello.

349
00:18:13.300 --> 00:18:16.300
It's just a basic Echo server, right? That's that's all

350
00:18:16.300 --> 00:18:18.700
it is if we open another

351
00:18:21.100 --> 00:18:22.900
instance of

352
00:18:24.200 --> 00:18:27.100
the weasel websocket weasel and

353
00:18:27.100 --> 00:18:30.800
connect and here we say hello

354
00:18:30.800 --> 00:18:31.100
again.

355
00:18:32.100 --> 00:18:36.100
I'm sorry send it then notice the second

356
00:18:35.100 --> 00:18:38.600
instance got hello, and we got hello again as

357
00:18:38.600 --> 00:18:41.000
well because we're sending it to everyone what if we

358
00:18:41.200 --> 00:18:44.400
didn't want to send it to everyone common thing that you might want to do is

359
00:18:44.400 --> 00:18:47.300
to send it to everyone but the person that sent

360
00:18:47.300 --> 00:18:50.700
the message right so that they don't get it especially if

361
00:18:50.700 --> 00:18:53.300
you're doing that. Basically you'll send

362
00:18:53.300 --> 00:18:57.000
it to everyone if you're not doing optimistic updates

363
00:18:56.100 --> 00:19:00.400
on the client on the interface what

364
00:18:59.400 --> 00:19:02.800
I mean, my optimistic updates somebody sends

365
00:19:02.800 --> 00:19:05.600
a message and immediately it appears in their chat window that

366
00:19:05.600 --> 00:19:08.200
they've sent it even before like, you know that it's been

367
00:19:08.200 --> 00:19:11.400
sent and that's usually

368
00:19:11.400 --> 00:19:14.400
a good thing to do because that keeps your

369
00:19:14.400 --> 00:19:19.300
interface smooth and or

370
00:19:18.300 --> 00:19:21.300
if you're not doing that then you would send it

371
00:19:21.300 --> 00:19:24.400
to everyone and then the person would get it as well. Once it's gone

372
00:19:24.400 --> 00:19:27.400
through that process of actually being processed by the server.

373
00:19:27.400 --> 00:19:30.700
So let's just take a look at that very

374
00:19:30.700 --> 00:19:31.100
quickly.

375
00:19:32.600 --> 00:19:35.700
So I will open up another tab here

376
00:19:35.700 --> 00:19:39.000
and go to that little websocket

377
00:19:38.300 --> 00:19:39.400
demo thing.

378
00:19:41.200 --> 00:19:42.000
Open up my editor.

379
00:19:42.800 --> 00:19:45.800
And here instead of socket all let's just

380
00:19:45.800 --> 00:19:47.200
say socket broadcast.

381
00:19:48.100 --> 00:19:51.300
And if you say broadcast, then it will

382
00:19:51.300 --> 00:19:54.400
be sent only to the people who

383
00:19:54.400 --> 00:19:54.900
are

384
00:19:56.400 --> 00:19:59.600
Everyone, but

385
00:19:59.600 --> 00:20:00.500
the person who sent it.

386
00:20:01.100 --> 00:20:04.300
also notice the connections closed here and if I

387
00:20:04.300 --> 00:20:05.600
bring back my terminal

388
00:20:06.300 --> 00:20:07.500
And look at the other tab.

389
00:20:08.500 --> 00:20:13.000
Here just scroll up. You can see that kitten

390
00:20:11.400 --> 00:20:14.800
restarted. I can

391
00:20:14.800 --> 00:20:18.100
restart it because we made a change to the code, right? So

392
00:20:17.100 --> 00:20:20.400
it listens for changes on the back end for the

393
00:20:20.400 --> 00:20:25.000
front end on the front end. It'll actually refresh your

394
00:20:24.700 --> 00:20:28.000
page as you're working on it in the

395
00:20:27.100 --> 00:20:30.000
future. We might get more, you know

396
00:20:30.500 --> 00:20:33.400
detailed about that how which

397
00:20:33.400 --> 00:20:37.500
parts we refresh? Maybe we can maintain State Etc. So

398
00:20:39.500 --> 00:20:41.700
if we say broadcast though, I'm just go back.

399
00:20:42.700 --> 00:20:45.900
And here let's open our connection again,

400
00:20:45.900 --> 00:20:49.000
and let's open

401
00:20:48.100 --> 00:20:49.900
up our other.

402
00:20:51.300 --> 00:20:54.200
Where's our other? Oh, they're on top of each other.

403
00:20:54.200 --> 00:20:56.100
That's not good. Is it there we go.

404
00:20:57.200 --> 00:21:00.200
Um, so that connection is open. Let's open up the others connection as

405
00:21:00.200 --> 00:21:02.000
well. And now if we send hello

406
00:21:03.300 --> 00:21:06.300
then we've sent hello and they've received. Hello because it's

407
00:21:06.300 --> 00:21:09.800
broadcast. We haven't actually received hello as well.

408
00:21:09.800 --> 00:21:13.200
So this is just the basics of how

409
00:21:15.400 --> 00:21:15.700
how

410
00:21:19.300 --> 00:21:22.400
let's move that out of the way how a soccer

411
00:21:22.400 --> 00:21:25.800
connection Works in kit. Okay. So let

412
00:21:25.800 --> 00:21:28.600
me show you what the persisted kitten chat

413
00:21:28.600 --> 00:21:31.300
example looks like that we're gonna start use as

414
00:21:31.300 --> 00:21:36.900
a starting point to implement the end-to-end

415
00:21:36.900 --> 00:21:37.300
encrypted one.

416
00:21:37.900 --> 00:21:40.500
So I'm going to go back into my terminal. I'm

417
00:21:40.500 --> 00:21:43.600
first of all, let me just see if there are any questions or anything. So let's

418
00:21:43.600 --> 00:21:44.700
just bring up the chat here.

419
00:21:45.800 --> 00:21:48.800
Hey Rue, Rue

420
00:21:48.800 --> 00:21:51.100
says Hi also are all Harold we

421
00:21:51.100 --> 00:21:53.600
have servers too. That's that's good.

422
00:21:55.900 --> 00:21:56.400
right

423
00:21:58.700 --> 00:22:01.500
Yep, some people have joined great. No questions

424
00:22:01.500 --> 00:22:05.500
great also towards

425
00:22:04.500 --> 00:22:07.400
the end of this. I'll give out a studio

426
00:22:07.400 --> 00:22:10.600
URL if you want to come in like and ask a question

427
00:22:10.600 --> 00:22:14.600
on camera you can if you want to that's something

428
00:22:14.600 --> 00:22:18.100
you want to do, right? So

429
00:22:19.000 --> 00:22:19.600
let's

430
00:22:22.100 --> 00:22:24.400
go back into our persistent kitten chats.

431
00:22:25.300 --> 00:22:26.100
Okay, so

432
00:22:29.200 --> 00:22:32.100
Again, this is what it looks like. So I'm just gonna run it first so you can

433
00:22:32.100 --> 00:22:36.600
see what it looks like when it's run. So it's just it's really a

434
00:22:35.600 --> 00:22:39.100
slightly more polished

435
00:22:38.100 --> 00:22:41.300
version of what we just did with the chat socket and

436
00:22:41.300 --> 00:22:44.100
using our you know websocket weasel. It's just got it into face on

437
00:22:44.100 --> 00:22:47.900
it and it persists some messages. I'll show

438
00:22:47.900 --> 00:22:50.100
you what that's about as well. So I'm just

439
00:22:50.100 --> 00:22:50.800
gonna say kitten

440
00:22:52.200 --> 00:22:54.400
and you can see it's running.

441
00:22:55.400 --> 00:22:58.100
So again, I will bring back my web

442
00:22:58.100 --> 00:23:01.500
browser. Come back web browser and I'll go

443
00:23:01.500 --> 00:23:02.200
to localhost.

444
00:23:03.700 --> 00:23:06.200
Oh, yeah, I showed you this. Yeah, we should we looked at

445
00:23:06.200 --> 00:23:11.400
this. Okay. So this is what it looks like. And so

446
00:23:09.400 --> 00:23:13.300
now this

447
00:23:12.300 --> 00:23:15.300
is what happens when you discover a major

448
00:23:15.300 --> 00:23:18.600
bug in kitten an hour before and you're

449
00:23:18.600 --> 00:23:23.300
rushing to fix it. Anyway, my

450
00:23:21.300 --> 00:23:23.800
mind is like

451
00:23:25.400 --> 00:23:28.100
All right. So let me instead show you

452
00:23:28.100 --> 00:23:29.000
what the code looks like.

453
00:23:30.300 --> 00:23:34.100
So we saw the other sockets, right? So let's

454
00:23:33.100 --> 00:23:36.600
just look at this the more involved

455
00:23:36.600 --> 00:23:39.500
chat socket that we have here to begin

456
00:23:39.500 --> 00:23:39.600
with.

457
00:23:40.700 --> 00:23:43.400
So here you can see we've

458
00:23:43.400 --> 00:23:46.300
got the same we're exporting a function just like

459
00:23:46.300 --> 00:23:50.300
we did there's a socket there's a request right? And then

460
00:23:50.300 --> 00:23:53.300
we've got over here

461
00:23:53.300 --> 00:23:56.100
we've got we're adding an event listener just

462
00:23:56.100 --> 00:23:59.300
like we did for a message when a message is coming in though this

463
00:23:59.300 --> 00:24:02.700
time. We are parsing it

464
00:24:02.700 --> 00:24:03.700
as

465
00:24:06.800 --> 00:24:07.200
as

466
00:24:09.100 --> 00:24:11.200
as Json over here.

467
00:24:12.500 --> 00:24:15.500
We're doing some very basic validation. This is

468
00:24:15.500 --> 00:24:18.200
just the basic example just to see if

469
00:24:18.200 --> 00:24:20.300
the messages in the shape that we think it is.

470
00:24:21.200 --> 00:24:24.300
We're removing the headers that are in

471
00:24:24.300 --> 00:24:27.900
the message. This is something that is sent automatically

472
00:24:27.900 --> 00:24:31.900
by htmx,

473
00:24:30.900 --> 00:24:34.000
which we'll see in a second which is

474
00:24:33.600 --> 00:24:36.700
a progressive enhancement on the

475
00:24:36.700 --> 00:24:40.200
client side that we're using for data

476
00:24:39.200 --> 00:24:43.000
exchange without losing State

477
00:24:42.900 --> 00:24:45.700
and we're doing

478
00:24:45.700 --> 00:24:47.300
something here which

479
00:24:49.300 --> 00:24:50.500
Is unique to kitten.

480
00:24:51.100 --> 00:24:54.300
We are adding the message we've received

481
00:24:54.300 --> 00:24:55.200
to the messages.

482
00:24:57.400 --> 00:25:00.300
Table on our database our Global database. So

483
00:25:00.300 --> 00:25:04.000
every kidnap has Global access

484
00:25:03.300 --> 00:25:06.700
to this object called DB which is the the

485
00:25:06.700 --> 00:25:11.700
database it is a in-process JavaScript

486
00:25:09.700 --> 00:25:12.400
database that

487
00:25:12.400 --> 00:25:15.200
actually writes to an append only

488
00:25:15.200 --> 00:25:20.500
JavaScript log, not a Json JavaScript and

489
00:25:18.500 --> 00:25:21.900
it's in

490
00:25:21.900 --> 00:25:23.500
process and in memory, so

491
00:25:25.500 --> 00:25:28.100
that's what's happening there. If you look at

492
00:25:28.100 --> 00:25:31.400
the top you'll see here that we're actually creating that

493
00:25:31.400 --> 00:25:34.900
table table in this case array, right

494
00:25:34.900 --> 00:25:38.200
and we can just use standard JavaScript

495
00:25:37.200 --> 00:25:40.400
to interact with it. It's a proxy

496
00:25:40.400 --> 00:25:43.700
and it just persists the operations

497
00:25:43.700 --> 00:25:46.100
that we carry out on it. If you want to

498
00:25:46.100 --> 00:25:50.300
learn more about that. You can go to codebook.org.

499
00:25:51.300 --> 00:25:55.500
Forward slash small Tech forward slash jsdb, and

500
00:25:54.500 --> 00:25:57.400
that is the repository for

501
00:25:57.400 --> 00:26:00.500
the JavaScript database and you can

502
00:26:00.500 --> 00:26:03.500
see what it's for what it's not for. It's not

503
00:26:03.500 --> 00:26:07.000
for surveillance capitalists. For example, it's for

504
00:26:06.100 --> 00:26:09.700
small data and you can see how you

505
00:26:09.700 --> 00:26:12.700
can use it. So in kits

506
00:26:12.700 --> 00:26:15.500
and you don't have to do this bit where you're opening the database

507
00:26:15.500 --> 00:26:18.400
that DB is what's made available for

508
00:26:18.400 --> 00:26:21.400
you, but here you can see that working with it is

509
00:26:21.400 --> 00:26:24.700
just like working with it's just basically working with JavaScript objects

510
00:26:24.700 --> 00:26:26.900
at db.people equals this whatever.

511
00:26:27.900 --> 00:26:31.500
And if you want to see what that

512
00:26:31.500 --> 00:26:35.400
looks like, actually when we

513
00:26:35.400 --> 00:26:38.700
ran persisted kitten chat, you saw

514
00:26:38.700 --> 00:26:42.100
over here that there's a databases folder

515
00:26:41.100 --> 00:26:44.800
that we can

516
00:26:44.800 --> 00:26:47.800
have a look at. So let's take a look at that databases

517
00:26:47.800 --> 00:26:48.200
folder.

518
00:26:50.400 --> 00:26:51.700
for every project

519
00:26:52.900 --> 00:26:55.900
and domain and

520
00:26:55.900 --> 00:26:59.500
Port combination that you run kitten

521
00:26:58.500 --> 00:27:01.500
automatically creates a

522
00:27:01.500 --> 00:27:04.600
settings folder for that with its databases. So

523
00:27:04.600 --> 00:27:08.100
what we were just

524
00:27:07.100 --> 00:27:09.600
looking at was

525
00:27:11.200 --> 00:27:14.500
Hard to see on this screen over

526
00:27:14.500 --> 00:27:17.400
here. Not sandbox. What

527
00:27:17.400 --> 00:27:20.600
are we looking for? What do we have a demo?

528
00:27:20.600 --> 00:27:24.100
There we go, demo persisted kitten chat, right. So

529
00:27:23.100 --> 00:27:26.700
if we look at that, you can

530
00:27:26.700 --> 00:27:29.900
see that the the tables are just JavaScript.

531
00:27:31.300 --> 00:27:34.400
So that's kind of cool, isn't it? They're just JavaScript. That's what

532
00:27:34.400 --> 00:27:36.600
I mean by a JavaScript append Only log.

533
00:27:37.900 --> 00:27:41.100
Um and here are our messages. So this

534
00:27:40.100 --> 00:27:43.800
has been compacted when it restarts it

535
00:27:43.800 --> 00:27:46.500
compacts, but you can see the messages are just nickname and

536
00:27:46.500 --> 00:27:49.400
text right and here's nickname and the text

537
00:27:49.400 --> 00:27:53.600
that was sent so actually so

538
00:27:53.600 --> 00:27:55.600
for example if we wanted to

539
00:27:57.700 --> 00:28:00.600
let's see databases.

540
00:28:04.200 --> 00:28:08.500
And what is this deployments? No,

541
00:28:08.500 --> 00:28:11.700
not that one for local.

542
00:28:14.800 --> 00:28:17.800
Okay. Our home are all

543
00:28:17.800 --> 00:28:20.900
demo dot persistent

544
00:28:20.900 --> 00:28:24.200
kitten chat localhost. Yeah, we ran that there so

545
00:28:23.200 --> 00:28:26.500
if we wanted to for example

546
00:28:26.500 --> 00:28:29.200
tail that let me just

547
00:28:29.200 --> 00:28:31.900
go into my other tab. First of all.

548
00:28:34.300 --> 00:28:34.600
and

549
00:28:37.100 --> 00:28:40.100
Go to persisted kitten chat and

550
00:28:40.100 --> 00:28:43.400
run it. So I'm just going to say a kitten. So we're

551
00:28:43.400 --> 00:28:45.500
running that there going back into my other.

552
00:28:47.100 --> 00:28:51.800
Tab and I'm just gonna say tail that

553
00:28:50.800 --> 00:28:53.300
those messages right? Let's

554
00:28:53.300 --> 00:28:56.500
just keep that there and then let's bring back one of the browsers.

555
00:28:58.200 --> 00:28:59.700
Over here and go to localhost.

556
00:29:00.600 --> 00:29:03.300
And say I don't know maybe this is Laura.

557
00:29:04.300 --> 00:29:09.200
She's gonna say I'm on here today. I'm busy.

558
00:29:10.300 --> 00:29:13.400
And Laura sends a message notice. What

559
00:29:13.400 --> 00:29:17.200
happens this is the append Only log, right? So it

560
00:29:16.200 --> 00:29:20.400
just gets added to that array. What

561
00:29:19.400 --> 00:29:22.000
do we have to do for that in the

562
00:29:22.000 --> 00:29:22.500
code?

563
00:29:24.300 --> 00:29:28.600
Just what I showed you earlier almost nothing or we

564
00:29:28.600 --> 00:29:31.300
had to do for that if I move this

565
00:29:31.300 --> 00:29:34.200
here, let's just

566
00:29:36.300 --> 00:29:38.800
Where else there? Okay. So if I

567
00:29:41.600 --> 00:29:42.500
Show you the code again.

568
00:29:44.600 --> 00:29:45.500
All we had to do.

569
00:29:46.600 --> 00:29:49.300
Find the messages. Let's find the next

570
00:29:49.300 --> 00:29:52.600
one. There we go was that we just pushed the

571
00:29:52.600 --> 00:29:55.700
message into an array in JavaScript and

572
00:29:55.700 --> 00:29:56.400
that's what

573
00:29:58.400 --> 00:30:01.300
created this in the append Only

574
00:30:01.300 --> 00:30:04.700
log. So that's how jsdb Works. Let's see

575
00:30:04.700 --> 00:30:09.300
if there any questions or anything about that.

576
00:30:13.800 --> 00:30:16.900
Who sent me a smiley? I'll take it. All right,

577
00:30:16.900 --> 00:30:20.100
so no questions. That's great. All

578
00:30:19.100 --> 00:30:22.900
right, so that's how the append Only log Works in

579
00:30:22.900 --> 00:30:24.200
jsdb.

580
00:30:25.700 --> 00:30:26.700
Kind of exit that process.

581
00:30:27.500 --> 00:30:30.700
All right. So let's just keep looking at

582
00:30:30.700 --> 00:30:32.300
how we built this.

583
00:30:35.900 --> 00:30:38.200
Persistent chat first of all, so like I said

584
00:30:38.200 --> 00:30:42.200
just like in our very basic example that we're

585
00:30:41.200 --> 00:30:44.000
getting the message. We're saving it to the database.

586
00:30:45.100 --> 00:30:46.700
And then we're doing a sock at all.

587
00:30:47.500 --> 00:30:49.600
But here's an interesting thing.

588
00:30:50.700 --> 00:30:51.900
We're sending HTML.

589
00:30:53.100 --> 00:30:56.700
So, you know you might think why aren't you sending Json or

590
00:30:56.700 --> 00:31:00.900
something? Well, this is HTM ax

591
00:30:59.900 --> 00:31:03.900
and kitten has a native

592
00:31:02.900 --> 00:31:06.400
support for htmx. What

593
00:31:05.400 --> 00:31:08.200
do I mean my native support if I go to end of

594
00:31:08.200 --> 00:31:08.500
this page?

595
00:31:09.600 --> 00:31:10.600
over here

596
00:31:12.200 --> 00:31:15.200
Oh, no. Sorry. I'll show it. I'll show it to you on the page, but

597
00:31:16.100 --> 00:31:19.700
Basically kitten serves a version of

598
00:31:19.700 --> 00:31:22.500
htmex and you can use it from there. If you

599
00:31:22.500 --> 00:31:25.400
want to you don't have to use htmx. So

600
00:31:25.400 --> 00:31:28.300
what's htmx I can hear some of you ask.

601
00:31:30.100 --> 00:31:32.100
htmx

602
00:31:32.800 --> 00:31:34.200
good htmx.org.

603
00:31:35.600 --> 00:31:39.400
Htmx is basically a

604
00:31:38.400 --> 00:31:44.100
hypertext style

605
00:31:42.100 --> 00:31:45.400
system. So for

606
00:31:45.400 --> 00:31:45.600
example

607
00:31:47.600 --> 00:31:51.500
Here's a quick use their quick start. They're just

608
00:31:51.500 --> 00:31:56.000
loading it from unpackaged.com. But

609
00:31:54.300 --> 00:31:57.400
here's what you need to look at. So

610
00:31:57.400 --> 00:31:59.600
you can declaratively add.

611
00:32:01.900 --> 00:32:04.200
Behavior to HTML so you

612
00:32:04.200 --> 00:32:08.200
can progressively enhance it in a sense with this Behavior with

613
00:32:07.200 --> 00:32:10.300
these attributes. So HX post

614
00:32:10.300 --> 00:32:13.300
forward slash clicked means that when this

615
00:32:13.300 --> 00:32:14.300
button is clicked.

616
00:32:15.100 --> 00:32:18.300
It's going to make a post request to the clicked root

617
00:32:18.300 --> 00:32:21.300
here and whatever it

618
00:32:21.300 --> 00:32:24.800
gets back from that it's going to swap with the outer HTML

619
00:32:24.800 --> 00:32:27.600
of this element. So that's

620
00:32:27.600 --> 00:32:30.600
pretty cool. And there is a websocket

621
00:32:30.600 --> 00:32:33.600
extension which I'll show you in a second that we're using and the

622
00:32:33.600 --> 00:32:36.300
persistent kitten chat example, and that's how

623
00:32:36.300 --> 00:32:37.800
we're doing it basically.

624
00:32:38.400 --> 00:32:41.400
So let's let's go

625
00:32:41.400 --> 00:32:41.600
back.

626
00:32:43.600 --> 00:32:45.000
over here, so

627
00:32:46.200 --> 00:32:49.200
what we're the message were broadcasting to all of the clients that are

628
00:32:49.200 --> 00:32:52.400
connected is this HTML this div and it's saying

629
00:32:54.300 --> 00:32:57.900
to htmx swap this out of band out of

630
00:32:57.900 --> 00:33:00.800
band means not just on the element that

631
00:33:00.800 --> 00:33:03.400
this exists on

632
00:33:03.400 --> 00:33:06.900
but on a different element. Well, which one well before

633
00:33:06.900 --> 00:33:09.800
the end of the list of

634
00:33:09.800 --> 00:33:12.900
messages specified by ID here

635
00:33:12.900 --> 00:33:16.000
and what we're sending is

636
00:33:15.300 --> 00:33:17.200
a message component.

637
00:33:18.400 --> 00:33:21.400
Okay. Well, we haven't seen that yet, right which has

638
00:33:21.400 --> 00:33:25.000
a message attribute, which is the message. Okay,

639
00:33:24.000 --> 00:33:25.800
so

640
00:33:28.200 --> 00:33:32.100
A number of things are happening here that are kittens specific notice this

641
00:33:31.100 --> 00:33:36.400
HTML template string

642
00:33:35.400 --> 00:33:40.100
there. So this

643
00:33:38.100 --> 00:33:41.600
is built into

644
00:33:41.600 --> 00:33:44.500
kitten. This is how you do templating in kitten

645
00:33:44.500 --> 00:33:47.600
using just plain JavaScript and the

646
00:33:47.600 --> 00:33:53.600
HTML tag template function can

647
00:33:51.600 --> 00:33:55.600
is aware

648
00:33:55.600 --> 00:33:58.200
of components can do components.

649
00:33:59.400 --> 00:34:00.300
um, so

650
00:34:02.700 --> 00:34:05.400
let's just take a look at what that message component looks

651
00:34:05.400 --> 00:34:10.200
like that. Let's go to where that's reference. We're

652
00:34:08.200 --> 00:34:12.000
importing message from message dot

653
00:34:11.100 --> 00:34:14.200
component. Right? And if you saw this

654
00:34:14.200 --> 00:34:17.100
remember, those are those are our files message dot component is one of

655
00:34:17.100 --> 00:34:20.500
them. So let's go to where that's created.

656
00:34:20.500 --> 00:34:23.200
Oh, sorry, it can't

657
00:34:23.200 --> 00:34:26.500
because this is nowhere component is so let me just open the message component.

658
00:34:27.400 --> 00:34:30.100
And this is the message component. It's actually pretty simple.

659
00:34:32.500 --> 00:34:33.400
It's just again.

660
00:34:35.200 --> 00:34:36.300
a bit of HTML

661
00:34:37.100 --> 00:34:40.600
A list item with the message nickname in a strong

662
00:34:40.600 --> 00:34:43.400
tag and then the message dot text. That's it.

663
00:34:43.400 --> 00:34:46.100
That is what we are returning.

664
00:34:47.200 --> 00:34:50.400
So that's the message component and that's all there is to that.

665
00:34:51.400 --> 00:34:55.100
So you can see here that we're just

666
00:34:54.100 --> 00:34:57.500
sending that message to all the response to all

667
00:34:57.500 --> 00:35:01.600
the recipients and then we're just logging the message

668
00:35:01.600 --> 00:35:05.000
that we got and how many recipients we sent it two. That's

669
00:35:04.200 --> 00:35:07.100
it. The basic validation we did

670
00:35:07.100 --> 00:35:10.200
was just to validate the you know, the two things are

671
00:35:10.200 --> 00:35:14.800
strings. It's not even like it's the can't even call validation, but

672
00:35:13.800 --> 00:35:16.400
that's it. So that's

673
00:35:16.400 --> 00:35:19.300
our chat socket in in the

674
00:35:19.300 --> 00:35:22.100
in this in this example. So what about

675
00:35:22.100 --> 00:35:24.600
the interface the fun bit?

676
00:35:25.200 --> 00:35:28.100
Well, you can see that well for one thing

677
00:35:28.100 --> 00:35:32.000
in kitten, you've probably noticed we use extensions

678
00:35:31.800 --> 00:35:34.700
a lot to me to to

679
00:35:34.700 --> 00:35:38.200
separate different types of files. So dot

680
00:35:37.200 --> 00:35:40.900
socket is a websocket. That's how kit knows

681
00:35:40.900 --> 00:35:43.400
to send it the socket as the

682
00:35:43.400 --> 00:35:47.700
first argument here. We have a page a

683
00:35:46.700 --> 00:35:49.800
page the client side page

684
00:35:49.800 --> 00:35:52.900
web page and all of

685
00:35:52.900 --> 00:35:55.700
these are just JavaScript though. Okay. So

686
00:35:55.700 --> 00:35:58.800
the way kitten works is it uses ecmascript

687
00:35:58.800 --> 00:36:01.300
module loaders to just load all

688
00:36:01.300 --> 00:36:04.300
this JavaScript one of the cool things with it just being

689
00:36:04.300 --> 00:36:07.000
JavaScript is we don't need a huge amount of

690
00:36:07.500 --> 00:36:11.000
tooling notice that I have syntax highlighting here notice that

691
00:36:10.400 --> 00:36:13.200
I have. Oh, I

692
00:36:13.200 --> 00:36:16.200
don't know. Let me go to this markup and

693
00:36:16.200 --> 00:36:19.400
go to wherever it's referenced. So I have language intelligence right

694
00:36:19.400 --> 00:36:22.200
I can go to where that's where that's

695
00:36:22.200 --> 00:36:25.000
reference in my editor. So I have

696
00:36:25.200 --> 00:36:28.500
all these things because in order to get the full

697
00:36:28.500 --> 00:36:28.900
tooling

698
00:36:29.700 --> 00:36:33.000
All I have to do is say hey Helix

699
00:36:32.300 --> 00:36:35.600
editor a DOT page file. That's

700
00:36:35.600 --> 00:36:38.100
a Javascript file dot socket is

701
00:36:38.100 --> 00:36:41.700
a Javascript file and similarly with

702
00:36:41.700 --> 00:36:44.400
my ecmascript loaders and kidnets so simple because

703
00:36:44.400 --> 00:36:47.800
I just have to say treat these as JavaScript

704
00:36:47.800 --> 00:36:50.300
files and so I'm

705
00:36:50.300 --> 00:36:53.300
not even doing any massaging of

706
00:36:53.300 --> 00:36:56.600
what I'm loading in yet for anything in kitchen if there

707
00:36:56.600 --> 00:36:59.500
are markdown if I you know decide to put mark down Roots

708
00:36:59.500 --> 00:37:03.200
then maybe then I will actually use the full loader system

709
00:37:02.200 --> 00:37:05.300
and actually, you know translate mark down into

710
00:37:05.300 --> 00:37:09.200
something but I don't even need to do that. And if you've

711
00:37:08.200 --> 00:37:13.500
seen other Frameworks platforms

712
00:37:12.500 --> 00:37:14.200
out there like

713
00:37:16.300 --> 00:37:18.500
Swelled kit for example or swelled.

714
00:37:20.300 --> 00:37:23.100
Take a look at their tooling like the amount of

715
00:37:23.100 --> 00:37:26.300
work and effort that's gone into building the vs code

716
00:37:26.300 --> 00:37:29.000
extensions and this and that and whatever. Wow.

717
00:37:29.600 --> 00:37:34.100
It's it's it's complex stuff. Thankfully

718
00:37:32.100 --> 00:37:35.100
we just kind of

719
00:37:35.100 --> 00:37:38.400
skip over all of that because of

720
00:37:38.400 --> 00:37:41.400
some of the decisions that have been made in in the original

721
00:37:41.400 --> 00:37:44.100
design initial design. So here we are this is the

722
00:37:44.100 --> 00:37:47.700
index page. So let's take a look at what a page is in kitten.

723
00:37:47.700 --> 00:37:50.600
So here we're loading some Styles in

724
00:37:50.600 --> 00:37:54.600
dot Styles index.styles. So if

725
00:37:54.600 --> 00:37:57.300
we look at that, that's just again JavaScript that's

726
00:37:57.300 --> 00:38:00.700
exporting a CSS tag template.

727
00:38:00.700 --> 00:38:03.400
This is just CSS, right? That's

728
00:38:03.400 --> 00:38:06.300
what we're loading in and then

729
00:38:06.300 --> 00:38:09.600
we have our message component as well. Remember the chat dot

730
00:38:09.600 --> 00:38:12.800
socket is on the server. The index.page is

731
00:38:12.800 --> 00:38:16.200
is being run

732
00:38:15.200 --> 00:38:18.700
on the server but creating content for

733
00:38:18.700 --> 00:38:21.100
the on the client.

734
00:38:22.400 --> 00:38:25.000
Um, so then we also have a

735
00:38:25.500 --> 00:38:27.800
status indicator component. We'll look at that later.

736
00:38:28.700 --> 00:38:32.000
And then here we're again making sure

737
00:38:31.200 --> 00:38:35.300
that we have our messages table or initializing

738
00:38:34.300 --> 00:38:37.400
it if it's if it doesn't exist, that's a

739
00:38:37.400 --> 00:38:38.600
common pattern.

740
00:38:39.600 --> 00:38:42.400
And here we just export another function

741
00:38:42.400 --> 00:38:45.900
calling it root called whatever you like. We're

742
00:38:45.900 --> 00:38:47.800
not using the request of the response clearly.

743
00:38:48.800 --> 00:38:51.400
And we have some

744
00:38:51.400 --> 00:38:52.600
markup that we're creating.

745
00:38:53.400 --> 00:38:56.500
So here's the persistent kitten shot the title.

746
00:38:58.100 --> 00:39:01.500
We are instantiating the status indicator. That's where you saw where it

747
00:39:01.500 --> 00:39:04.300
was saying status online offline Etc. So we

748
00:39:04.300 --> 00:39:07.000
can take a quick look at that. So if I go

749
00:39:07.100 --> 00:39:07.300
over here

750
00:39:08.700 --> 00:39:12.000
This is a status indicator component and

751
00:39:11.400 --> 00:39:13.300
you can see that.

752
00:39:16.200 --> 00:39:19.200
It's got a couple of interesting things that it's doing.

753
00:39:20.800 --> 00:39:22.200
so here

754
00:39:25.800 --> 00:39:28.100
this x data brings us to

755
00:39:28.100 --> 00:39:31.300
the second framework that kitten supports

756
00:39:31.300 --> 00:39:33.700
natively and that's Alpine Js.

757
00:39:34.300 --> 00:39:37.400
So htmx is really great for

758
00:39:37.400 --> 00:39:40.300
doing what traditionally be

759
00:39:40.300 --> 00:39:44.000
like Ajax style calls

760
00:39:43.400 --> 00:39:46.400
and for responding to

761
00:39:46.400 --> 00:39:50.100
them in a declarative manner for doing web sockets with

762
00:39:49.100 --> 00:39:52.500
the web socket extension Etc. So for

763
00:39:52.500 --> 00:39:56.000
data exchange, it's really owned for that. What about

764
00:39:55.300 --> 00:39:58.400
more custom client

765
00:39:58.400 --> 00:40:02.200
site behavior in a declarative manner, that's

766
00:40:01.200 --> 00:40:04.700
where Alpine JS. It's tiny

767
00:40:04.700 --> 00:40:07.500
little framework comes in. So you

768
00:40:07.500 --> 00:40:11.100
can use kitten just it's basic HTML CSS JavaScript

769
00:40:10.100 --> 00:40:13.300
and then you can enhance it if you need to

770
00:40:13.300 --> 00:40:14.100
with

771
00:40:17.200 --> 00:40:21.300
Xh GM sorry with with htmx

772
00:40:20.300 --> 00:40:25.500
and with alpine.js.

773
00:40:26.100 --> 00:40:28.400
If you're not familiar with alpinejs.

774
00:40:29.400 --> 00:40:32.900
Just go to alpine.js.dev.

775
00:40:33.500 --> 00:40:36.900
And it is so small. You can

776
00:40:36.900 --> 00:40:39.300
just you can get started with it really really

777
00:40:39.300 --> 00:40:44.100
quickly. Again. They're loading it from CDN content

778
00:40:42.100 --> 00:40:46.100
delivery Network and then here's their

779
00:40:45.100 --> 00:40:48.600
example, so you

780
00:40:48.600 --> 00:40:52.100
create a model a data model over here.

781
00:40:51.100 --> 00:40:54.600
So in this case an

782
00:40:54.600 --> 00:40:57.600
object with a property called open, that's a Boolean that's false

783
00:40:57.600 --> 00:41:00.300
and inside of that so you can access that

784
00:41:00.300 --> 00:41:03.700
model inside of that note now here it

785
00:41:03.700 --> 00:41:06.300
says button at click. So this is

786
00:41:06.300 --> 00:41:10.700
an event handler open equals true and

787
00:41:09.700 --> 00:41:13.100
there's a span with

788
00:41:12.100 --> 00:41:15.400
which is only shown the content is

789
00:41:15.400 --> 00:41:17.800
only shown when open is true.

790
00:41:18.600 --> 00:41:18.900
so

791
00:41:20.100 --> 00:41:23.900
that's the sort of thing you can do with alpine.js I

792
00:41:23.900 --> 00:41:26.400
think there is actually a question. I'm just going to look at the comments.

793
00:41:27.800 --> 00:41:30.400
Sorry, what did I do? There we

794
00:41:30.400 --> 00:41:33.500
go. No, that is not what I wanted to do. There we

795
00:41:33.500 --> 00:41:34.000
go. That's a bit better.

796
00:41:35.200 --> 00:41:39.300
All right done. Yes. The

797
00:41:38.300 --> 00:41:41.900
green screen is not exactly perfect.

798
00:41:41.900 --> 00:41:42.600
I need to.

799
00:41:43.800 --> 00:41:44.700
Tweak it.

800
00:41:47.100 --> 00:41:50.400
That messages not component might be slightly difficult

801
00:41:50.400 --> 00:41:52.500
3. Yeah. Thank you so much for that heads up. Yep.

802
00:41:54.400 --> 00:41:54.800
Let's see.

803
00:41:56.400 --> 00:41:59.500
Any particular reason why you went with htmx as opposed

804
00:41:59.500 --> 00:42:02.000
to any mainstream front-end framework or Library?

805
00:42:04.600 --> 00:42:07.600
Just curious since the project is so already so

806
00:42:07.600 --> 00:42:10.100
Jazz heavy. Yeah, I I like to think of

807
00:42:10.100 --> 00:42:14.300
the project as JS Lite because like

808
00:42:13.300 --> 00:42:16.400
yeah, there are heavy Frameworks

809
00:42:16.400 --> 00:42:19.700
out there. Definitely that we could have used and I

810
00:42:19.700 --> 00:42:22.800
was looking I was playing a lot with swells and

811
00:42:22.800 --> 00:42:25.300
with swelt kid Etc. They're designed with a

812
00:42:25.300 --> 00:42:28.600
very different mindset their design for big Tech. They're

813
00:42:28.600 --> 00:42:32.600
designed for Enterprise. They're designed for serverless. We

814
00:42:31.600 --> 00:42:37.300
are literally a server and I

815
00:42:35.300 --> 00:42:38.100
like small things.

816
00:42:39.600 --> 00:42:44.000
Which may or may not be come across and both

817
00:42:43.900 --> 00:42:46.300
htmx and Alpine I

818
00:42:46.300 --> 00:42:49.300
think are really just the right size for what they do.

819
00:42:49.300 --> 00:42:52.200
They work really well together as well

820
00:42:52.200 --> 00:42:55.600
and you don't have to use yet. Thanks

821
00:42:55.600 --> 00:42:58.500
sarcasi. You don't

822
00:42:58.500 --> 00:43:01.700
have to use them either like they're tiny

823
00:43:01.700 --> 00:43:04.300
and kitten supports it and what do

824
00:43:04.300 --> 00:43:07.100
I mean by supports it? So let me just show you what I mean

825
00:43:07.100 --> 00:43:11.400
by kitten support sets. So if we let's get

826
00:43:11.400 --> 00:43:12.300
the web browser out of the way.

827
00:43:13.700 --> 00:43:17.300
Let's look at the page. Okay, sorry.

828
00:43:18.200 --> 00:43:18.200
just

829
00:43:19.200 --> 00:43:22.100
over here. Let's look at the page at the

830
00:43:22.100 --> 00:43:24.600
end of the page. So I'm just going to go to the end of it.

831
00:43:28.200 --> 00:43:31.200
Am I in the page now? I'm in the status indicator components. Let's go

832
00:43:31.200 --> 00:43:33.000
to the previous one. Let's go to the end of the page.

833
00:43:34.300 --> 00:43:37.500
Notice we're creating the markup right this whole markup that

834
00:43:37.500 --> 00:43:38.000
I was showing you.

835
00:43:39.300 --> 00:43:40.100
And then notice here.

836
00:43:41.100 --> 00:43:45.100
we're returning from this route an object

837
00:43:44.100 --> 00:43:47.300
that has the markup the Styles and then

838
00:43:47.300 --> 00:43:51.100
it says uses htmx htmx

839
00:43:50.100 --> 00:43:53.700
web socket and alpine.js so

840
00:43:53.700 --> 00:43:54.300
when

841
00:43:56.900 --> 00:43:58.100
kitten sees this

842
00:43:59.200 --> 00:44:02.800
It ensures that

843
00:44:02.800 --> 00:44:04.000
those are imported.

844
00:44:04.800 --> 00:44:08.400
It serves them and ensures

845
00:44:07.400 --> 00:44:10.400
that they're imported on your page. You don't

846
00:44:10.400 --> 00:44:13.100
have to do this. You can do it manually. You could do it

847
00:44:13.100 --> 00:44:17.400
just like you so I can get it from unpackage if you want or you

848
00:44:17.400 --> 00:44:20.400
can use any other framework. So it doesn't tie you into anything.

849
00:44:20.400 --> 00:44:23.600
They're small enough. I think they're useful enough

850
00:44:23.600 --> 00:44:26.300
that there is native support for them.

851
00:44:26.300 --> 00:44:29.300
But feel free not to

852
00:44:29.300 --> 00:44:33.300
use them and also, you know, feel free to use anything else. It doesn't

853
00:44:33.300 --> 00:44:35.800
tie you it to anything like that.

854
00:44:36.800 --> 00:44:39.200
So let's just keep looking at

855
00:44:39.200 --> 00:44:39.700
the page.

856
00:44:41.700 --> 00:44:44.100
Oh, sorry. We were looking at the status indicator, right? Let's go back

857
00:44:44.100 --> 00:44:48.000
there. So let's go to definition open that

858
00:44:47.000 --> 00:44:48.100
up.

859
00:44:49.100 --> 00:44:52.400
So here's our status indicator. So this is

860
00:44:52.400 --> 00:44:55.500
all a combination of Alpine Js.

861
00:44:56.400 --> 00:44:59.600
And htmx so it's all declarative. What

862
00:44:59.600 --> 00:45:03.500
we're doing here is we're creating an X.

863
00:45:03.500 --> 00:45:07.200
We're creating a model an Alpine JS this

864
00:45:06.200 --> 00:45:10.500
you don't really even need to

865
00:45:09.500 --> 00:45:12.500
to use you

866
00:45:12.500 --> 00:45:15.900
could just write this like that that little

867
00:45:15.900 --> 00:45:18.800
JS tack template just gives me better syntax highlighting

868
00:45:18.800 --> 00:45:21.400
and I kind of like that. It's semantics so

869
00:45:21.400 --> 00:45:23.500
I use it. You don't have to

870
00:45:25.200 --> 00:45:25.200
um

871
00:45:26.200 --> 00:45:30.400
but we're basically setting a status property to initializing and

872
00:45:29.400 --> 00:45:30.700
that

873
00:45:33.400 --> 00:45:36.500
Status property is what the text

874
00:45:36.500 --> 00:45:39.700
of the node will be set to notice. I've

875
00:45:39.700 --> 00:45:42.900
already I've also duplicated here

876
00:45:42.900 --> 00:45:45.400
in case the JavaScript doesn't load or anything. You

877
00:45:45.400 --> 00:45:48.600
know, you just you know, that something's going wrong just sticks

878
00:45:48.600 --> 00:45:49.500
at that. It's not empty.

879
00:45:50.700 --> 00:45:54.000
Um, so then we're listening

880
00:45:53.200 --> 00:45:57.200
for htmexes websocket connecting

881
00:45:56.200 --> 00:45:59.700
event on the window. Okay, because

882
00:45:59.700 --> 00:46:00.400
it's actually

883
00:46:03.800 --> 00:46:06.300
It we are a component. So we

884
00:46:06.300 --> 00:46:08.100
were listening it globally.

885
00:46:09.200 --> 00:46:13.500
And we're just sending the status to connecting if it's connecting when it's

886
00:46:13.500 --> 00:46:16.300
open. We're saying it's online when it's closed. We're saying it's

887
00:46:16.300 --> 00:46:19.200
offline and that's it

888
00:46:19.200 --> 00:46:22.100
in terms of the class because we want to

889
00:46:22.100 --> 00:46:26.100
change the color of it. We're also doing a if

890
00:46:25.100 --> 00:46:28.200
status is equal to online then set the

891
00:46:28.200 --> 00:46:31.500
class to online status Offline that it's offline and there

892
00:46:31.500 --> 00:46:34.300
you just see the the colors for those so

893
00:46:34.300 --> 00:46:35.900
that's our status indicator component.

894
00:46:37.400 --> 00:46:40.700
And under that we have the main

895
00:46:40.700 --> 00:46:42.700
diff where stuff.

896
00:46:44.400 --> 00:46:44.700
happens so

897
00:46:46.300 --> 00:46:49.300
there we're specifying that we're using the

898
00:46:49.300 --> 00:46:52.400
websocket extension for htmx. And we

899
00:46:52.400 --> 00:46:56.400
wanted to connect to the chat dot socket that we saw earlier. We're

900
00:46:55.400 --> 00:46:58.600
also creating an alpine.js model

901
00:46:58.600 --> 00:47:01.200
that just has a property called

902
00:47:01.200 --> 00:47:03.100
showplaceholder true.

903
00:47:03.800 --> 00:47:07.100
And that showplaceholder true.

904
00:47:08.300 --> 00:47:09.900
Is this bit of HTML?

905
00:47:13.300 --> 00:47:16.900
Initially before anything comes in we want

906
00:47:16.900 --> 00:47:19.300
this no messages yet. Why not send one

907
00:47:19.300 --> 00:47:22.100
to to display? So that's that's what that's for.

908
00:47:22.900 --> 00:47:26.000
And then here we have an unordered

909
00:47:25.000 --> 00:47:27.000
list.

910
00:47:28.100 --> 00:47:29.200
And that's the messages list.

911
00:47:30.400 --> 00:47:33.100
and when the htmx load events occurs

912
00:47:34.200 --> 00:47:37.200
We're saying showplacehold. We're setting showplaceholder to

913
00:47:37.200 --> 00:47:37.500
false.

914
00:47:38.200 --> 00:47:43.000
And we are scrolling to

915
00:47:42.200 --> 00:47:45.300
the bottom of that message list whenever

916
00:47:45.300 --> 00:47:46.000
something loads.

917
00:47:47.100 --> 00:47:49.000
And then here's the body of it.

918
00:47:49.700 --> 00:47:49.800
so

919
00:47:52.100 --> 00:47:55.800
let's take a look at this. Can I get the whole thing there great. So

920
00:47:55.800 --> 00:47:59.400
this is and if he

921
00:47:58.400 --> 00:48:01.900
and immediately invoked

922
00:48:01.900 --> 00:48:05.400
function expression where we're

923
00:48:04.400 --> 00:48:08.300
calling this function

924
00:48:07.300 --> 00:48:10.500
with the messages in the database.

925
00:48:10.500 --> 00:48:13.400
So this is how the initial the persistent messages that

926
00:48:13.400 --> 00:48:17.300
we're already in there are shown and we're

927
00:48:16.300 --> 00:48:19.500
saying, you know, if messages length is

928
00:48:19.500 --> 00:48:22.100
zero then write out

929
00:48:22.100 --> 00:48:23.100
this placeholder.

930
00:48:24.900 --> 00:48:28.900
That we have otherwise map

931
00:48:27.900 --> 00:48:31.900
the messages to a

932
00:48:30.900 --> 00:48:33.600
message component per message. Right?

933
00:48:33.600 --> 00:48:37.000
So we're creating a message component for message. So let's

934
00:48:36.200 --> 00:48:39.900
take a look at that message component

935
00:48:39.900 --> 00:48:42.500
again. So let's go where that's

936
00:48:42.500 --> 00:48:43.100
defined.

937
00:48:44.200 --> 00:48:47.200
And there and remember it was just this right we

938
00:48:47.200 --> 00:48:50.600
were using this remember in the chat socket. That's

939
00:48:50.600 --> 00:48:53.500
what we're returning as well. So that's pretty cool. We're returning the

940
00:48:53.500 --> 00:48:55.700
same little snippet HTML.

941
00:48:56.500 --> 00:49:00.700
So let's close that and yeah.

942
00:49:01.300 --> 00:49:04.200
All right, so, that's our page root.

943
00:49:05.300 --> 00:49:09.500
What else do we have? We have some we

944
00:49:08.500 --> 00:49:11.500
have this index.js. This is just

945
00:49:11.500 --> 00:49:14.500
some fixes that fixes the interface on mobile

946
00:49:14.500 --> 00:49:18.600
tries to detect that it's mobile and then apply

947
00:49:17.600 --> 00:49:20.800
a few browser fixes to

948
00:49:20.800 --> 00:49:24.200
it and also enables htmx logger. You could

949
00:49:23.200 --> 00:49:26.200
just delete that file and

950
00:49:27.400 --> 00:49:31.300
It would still be fully functional. It's just some little tiny improvements.

951
00:49:30.300 --> 00:49:33.300
You don't have to worry about that really

952
00:49:33.300 --> 00:49:36.100
that's not important and then we have the

953
00:49:36.100 --> 00:49:39.100
index dot Styles which I showed earlier. So that is it. That is

954
00:49:39.100 --> 00:49:44.900
the whole persisted chat. Right? And I

955
00:49:43.900 --> 00:49:46.200
think that's also been a good introduction to

956
00:49:46.200 --> 00:49:50.400
kind of how some of the things work and in kitten

957
00:49:49.400 --> 00:49:52.200
but where we really want to

958
00:49:52.200 --> 00:49:56.100
get to is an end to end encrypted periods appear thing in

959
00:49:55.100 --> 00:49:58.200
the next 10 minutes according to our

960
00:49:58.200 --> 00:49:58.900
regular schedule.

961
00:50:00.200 --> 00:50:03.500
See how that works. All right. Let me see if there any any questions

962
00:50:03.500 --> 00:50:06.400
things always take longer than

963
00:50:06.400 --> 00:50:08.100
you think they're going to yes.

964
00:50:08.600 --> 00:50:12.900
It's true. Our causes

965
00:50:12.900 --> 00:50:13.400
says yeah.

966
00:50:14.400 --> 00:50:17.400
All right. Awesome. Yeah, no questions. All

967
00:50:17.400 --> 00:50:20.100
right, let's just let's go ahead then. So this

968
00:50:20.100 --> 00:50:23.900
is what we have to begin with. But remember that the persistent chat

969
00:50:23.900 --> 00:50:26.800
example was entirely open as well. It was entirely public. So

970
00:50:26.800 --> 00:50:29.800
let's start by implementing some authentication

971
00:50:29.800 --> 00:50:32.500
because when we have our intend encrypted

972
00:50:32.500 --> 00:50:35.000
chat, we want it to be, you know you to be the only

973
00:50:35.300 --> 00:50:38.500
person who can log into it, right and thankfully kitten has

974
00:50:38.500 --> 00:50:42.900
authentication baked in. Oh, right. See

975
00:50:41.900 --> 00:50:44.900
that looks like all right.

976
00:50:44.900 --> 00:50:47.600
So here we are. Let's get back to the terminal.

977
00:50:48.600 --> 00:50:51.400
And let me make this terminal as large

978
00:50:51.400 --> 00:50:54.000
as it can be on my tiny little presenter display.

979
00:50:55.100 --> 00:50:55.900
All right, so

980
00:50:57.900 --> 00:51:01.200
the first thing we're going to do is make

981
00:51:00.200 --> 00:51:01.900
sure that

982
00:51:04.400 --> 00:51:08.300
these files that you see over here can only be accessed if

983
00:51:07.300 --> 00:51:10.300
you're authenticated. All right, so let's

984
00:51:10.300 --> 00:51:13.100
just start with that. How do we do that? We have to write a lot

985
00:51:13.100 --> 00:51:16.300
of code. Not really. So what I'm

986
00:51:16.300 --> 00:51:19.000
gonna do is I'm going to create a root called private. I could have called

987
00:51:19.300 --> 00:51:22.900
this move the actual name of the root doesn't matter. But what

988
00:51:22.900 --> 00:51:25.300
does matter is I'm just gonna add a little

989
00:51:25.300 --> 00:51:26.500
lock to the end of it.

990
00:51:26.900 --> 00:51:29.800
Okay, I'll walk Emoji, huh?

991
00:51:29.800 --> 00:51:33.200
All right, and then what I'm going to do is I

992
00:51:32.200 --> 00:51:34.900
am going to take

993
00:51:36.400 --> 00:51:39.300
these files and I'm going

994
00:51:39.300 --> 00:51:44.300
to put it put them inside my private folder

995
00:51:42.300 --> 00:51:45.400
that I should I just

996
00:51:45.400 --> 00:51:49.700
showed you using it nice little terminal file

997
00:51:49.700 --> 00:51:50.900
manager called LF.

998
00:51:51.600 --> 00:51:54.300
All right. So now if we look at it, we just

999
00:51:54.300 --> 00:51:57.900
have this if we look under there there's the private

1000
00:51:57.900 --> 00:52:00.300
folder and the files. So what does

1001
00:52:00.300 --> 00:52:01.900
that mean? So now if I run this

1002
00:52:03.500 --> 00:52:06.600
And I bring up my browser. Where's my

1003
00:52:06.600 --> 00:52:09.600
browser? There we go. And I go to localhost. I'll get

1004
00:52:09.600 --> 00:52:12.500
a 404 kitten poor little 404

1005
00:52:12.500 --> 00:52:12.800
kitten.

1006
00:52:13.100 --> 00:52:16.900
That's because there's nothing in the root right? However

1007
00:52:18.100 --> 00:52:19.200
if I go to

1008
00:52:20.300 --> 00:52:21.600
private

1009
00:52:24.100 --> 00:52:27.500
then I get a sign in. Ooh a kitten

1010
00:52:27.500 --> 00:52:30.500
sign in how nice is that? It's asking for our our

1011
00:52:30.500 --> 00:52:33.200
secret now when we first

1012
00:52:33.200 --> 00:52:36.400
started it ages ago. It actually

1013
00:52:36.400 --> 00:52:39.200
gave us a secret. We didn't

1014
00:52:39.200 --> 00:52:41.200
know it down bad us.

1015
00:52:41.900 --> 00:52:42.100
but

1016
00:52:43.400 --> 00:52:44.500
not to worry.

1017
00:52:45.500 --> 00:52:48.400
We could either go in and delete the database for this

1018
00:52:48.400 --> 00:52:52.100
project right now and it'll be generated. We

1019
00:52:51.100 --> 00:52:54.600
don't have to even delete the whole database we can delete the internal

1020
00:52:54.600 --> 00:52:58.200
database to underscore underscore kitten if you wanted to or

1021
00:52:57.200 --> 00:53:00.300
remember that the settings are

1022
00:53:00.300 --> 00:53:03.500
generated per domain per Port per

1023
00:53:03.500 --> 00:53:06.400
file path of project when you're

1024
00:53:06.400 --> 00:53:08.900
testing locally to make it very easy for you to test locally.

1025
00:53:09.600 --> 00:53:12.500
So what we can do which

1026
00:53:12.500 --> 00:53:17.000
is much simpler is just to go in there and just

1027
00:53:15.400 --> 00:53:18.500
to start this at a

1028
00:53:18.500 --> 00:53:19.000
different domain.

1029
00:53:19.600 --> 00:53:22.700
So while we're testing it, so let's do that. So

1030
00:53:22.700 --> 00:53:27.000
I'm just going to go over here and say so

1031
00:53:25.200 --> 00:53:28.200
I am in the demo folder

1032
00:53:28.200 --> 00:53:31.400
yet. Okay, so I'm just going to say kitten I'm

1033
00:53:31.400 --> 00:53:34.800
gonna pass domain equals.

1034
00:53:34.800 --> 00:53:37.800
I'll say Place one Local Host.

1035
00:53:37.800 --> 00:53:41.200
So kitten has support

1036
00:53:40.200 --> 00:53:44.100
for four aliases to

1037
00:53:43.100 --> 00:53:46.900
localhost subdomain aliases localhost

1038
00:53:46.900 --> 00:53:49.500
Place one dot localhost place two dot localhost

1039
00:53:49.500 --> 00:53:52.200
you get the idea up to place four and this

1040
00:53:52.200 --> 00:53:56.800
is really useful when testing peer-to-peer web apps locally for

1041
00:53:55.800 --> 00:53:59.100
one of the reasons is of

1042
00:53:58.100 --> 00:54:04.000
course, they have to be on different ports as well. But kitten

1043
00:54:02.200 --> 00:54:07.200
uses cookies for authentication and

1044
00:54:06.200 --> 00:54:10.400
cookies are not isolated purport

1045
00:54:09.400 --> 00:54:12.800
their isolated for domain. So

1046
00:54:12.800 --> 00:54:15.700
when testing locally you actually have to use different domains

1047
00:54:15.700 --> 00:54:18.500
or else the sessions will get confused and

1048
00:54:19.600 --> 00:54:24.200
Each data between them. So because

1049
00:54:22.200 --> 00:54:25.100
of that what we can

1050
00:54:25.100 --> 00:54:29.500
do now is we can start actually start

1051
00:54:28.500 --> 00:54:31.000
it don't we let's get the terminal back.

1052
00:54:31.700 --> 00:54:34.500
So what I'll do here is say

1053
00:54:34.500 --> 00:54:37.700
kitten - domain Place One Dot localhost,

1054
00:54:37.700 --> 00:54:40.100
and that should do

1055
00:54:40.100 --> 00:54:40.100
it.

1056
00:54:41.800 --> 00:54:44.700
There we go. And now it's generating a new secret. Okay.

1057
00:54:44.700 --> 00:54:48.500
So this time this is our secret you

1058
00:54:47.500 --> 00:54:51.200
might be like, what the f***? Yes.

1059
00:54:50.200 --> 00:54:53.900
It is Emoji. Um,

1060
00:54:53.900 --> 00:54:56.400
why is it Emoji? It cannot be Emoji.

1061
00:54:56.400 --> 00:54:59.400
It's never been Emoji before. How can it

1062
00:54:59.400 --> 00:55:02.200
be Emoji Now the secrets have never been Emoji in

1063
00:55:02.200 --> 00:55:03.800
the past. They cannot be emoji.

1064
00:55:05.100 --> 00:55:10.100
They are Emoji now. So what is this? I

1065
00:55:08.100 --> 00:55:11.300
love that every time I do

1066
00:55:11.300 --> 00:55:14.100
something a little different. I think one of the first things that you get is

1067
00:55:14.100 --> 00:55:17.300
like you can't do that. You can't that's not how

1068
00:55:17.300 --> 00:55:21.000
we do things around here. Oh my gosh

1069
00:55:20.600 --> 00:55:22.900
God. What's the world coming to?

1070
00:55:23.400 --> 00:55:26.200
So it's a truly

1071
00:55:26.200 --> 00:55:29.300
in the 21st century. I don't know whether that's a good thing or not, man.

1072
00:55:29.300 --> 00:55:29.900
But yeah.

1073
00:55:30.600 --> 00:55:30.600
um

1074
00:55:32.200 --> 00:55:36.000
Yeah, so what is the Emoji that is actually your

1075
00:55:35.500 --> 00:55:39.600
ed25519 private

1076
00:55:38.600 --> 00:55:42.900
key encoded into

1077
00:55:42.900 --> 00:55:44.100
emoji.

1078
00:55:45.200 --> 00:55:48.100
That's what it is why Emoji just because it looks good.

1079
00:55:48.100 --> 00:55:52.200
No because you can't write that down and if

1080
00:55:51.200 --> 00:55:54.500
it was if it was a generated password, I

1081
00:55:54.500 --> 00:55:57.600
know what some of you would do the get your little sticky notes and

1082
00:55:57.600 --> 00:56:00.700
you'd write it down on your sticky notes and you paste on your monitor and

1083
00:56:00.700 --> 00:56:03.400
then there's the security f***** right? So

1084
00:56:03.400 --> 00:56:06.300
instead what you got to do is you have to select it

1085
00:56:06.300 --> 00:56:09.200
and put it in your password manager like you should

1086
00:56:09.200 --> 00:56:11.500
with all of your password, so I'm going to copy that.

1087
00:56:12.300 --> 00:56:15.800
And then I'll my web browser

1088
00:56:15.800 --> 00:56:18.900
here. Just gonna do that off screen in

1089
00:56:18.900 --> 00:56:20.300
case I need to enter my

1090
00:56:21.200 --> 00:56:22.100
password

1091
00:56:24.800 --> 00:56:27.200
and do it again

1092
00:56:27.200 --> 00:56:31.500
because I answered it incorrectly because of course and now

1093
00:56:31.500 --> 00:56:33.800
I can bring it on screen.

1094
00:56:34.700 --> 00:56:36.300
Go away.

1095
00:56:37.500 --> 00:56:38.100
All right, so

1096
00:56:39.300 --> 00:56:42.400
and what I'm going to do there is I'm actually going

1097
00:56:42.400 --> 00:56:47.100
to go to 443 now.

1098
00:56:45.100 --> 00:56:48.100
Actually, I'll add a new

1099
00:56:48.100 --> 00:56:49.700
item. I'll add a new item.

1100
00:56:52.400 --> 00:56:54.300
And I'll say password.

1101
00:56:56.500 --> 00:57:01.700
Thought that that I'm using one password for this and here.

1102
00:57:02.900 --> 00:57:06.800
I'll say a place one

1103
00:57:06.800 --> 00:57:08.000
Local Host.

1104
00:57:08.900 --> 00:57:10.900
persistent chat

1105
00:57:12.200 --> 00:57:15.000
and I'll add this.

1106
00:57:16.200 --> 00:57:17.600
And save it, okay.

1107
00:57:18.700 --> 00:57:20.200
So now if I come over here.

1108
00:57:22.200 --> 00:57:25.300
Let's see. Oh not a local host.

1109
00:57:25.300 --> 00:57:28.600
I need to actually go to it from Place one Local Host.

1110
00:57:28.600 --> 00:57:32.100
Right? So there we are Place one Local Host and

1111
00:57:31.100 --> 00:57:35.000
I can just enter that password in and

1112
00:57:34.000 --> 00:57:35.900
hey.

1113
00:57:36.700 --> 00:57:38.600
Okay did not like it.

1114
00:57:40.100 --> 00:57:44.100
Let's see. It just is that the wrong one desktop antenna

1115
00:57:43.100 --> 00:57:46.500
can nope. That's the wrong one has it not

1116
00:57:46.500 --> 00:57:49.200
synced to die not save it. So many things

1117
00:57:49.200 --> 00:57:49.900
might have happened.

1118
00:57:51.100 --> 00:57:53.600
Oh, you know what? Here we go. Let's just

1119
00:57:56.600 --> 00:58:00.100
I'll just copy and paste it from here, but you get the idea. Okay, maybe

1120
00:57:59.100 --> 00:58:00.900
didn't save it.

1121
00:58:01.900 --> 00:58:04.200
There we go. And it just goes to

1122
00:58:04.200 --> 00:58:07.500
settings right now from sign

1123
00:58:07.500 --> 00:58:10.400
in if I'd actually gone and in

1124
00:58:10.400 --> 00:58:13.500
your settings you can actually see your identity. Your SSH Keys

1125
00:58:13.500 --> 00:58:16.800
generated a phpgp key is generated for you. You

1126
00:58:16.800 --> 00:58:19.100
can see your secret there. This is very

1127
00:58:19.100 --> 00:58:22.000
basic right now. I haven't really had a chance to work on with that will look like

1128
00:58:22.500 --> 00:58:27.700
but if we go to private now, we can access the persisted

1129
00:58:25.700 --> 00:58:29.300
kitten chat

1130
00:58:28.300 --> 00:58:30.500
over here.

1131
00:58:31.700 --> 00:58:33.900
Um, some things are not working. No.

1132
00:58:35.200 --> 00:58:38.600
And that's because our URLs have changed as well.

1133
00:58:38.600 --> 00:58:41.900
So whereas so we can't connect and so

1134
00:58:41.900 --> 00:58:44.400
for wondering why that is then we probably

1135
00:58:44.400 --> 00:58:48.300
have to look in our index page and we'll

1136
00:58:47.300 --> 00:58:50.100
see that where it's trying to

1137
00:58:50.100 --> 00:58:54.800
connect to is should be now private chat.

1138
00:58:54.800 --> 00:58:57.500
Right? So if we change that

1139
00:58:57.500 --> 00:59:00.600
then it should it should

1140
00:59:00.600 --> 00:59:03.300
work. Let me actually just run it here and keep it running

1141
00:59:03.300 --> 00:59:07.000
as well. So it automatically updates

1142
00:59:06.500 --> 00:59:09.800
when we're changing things. So now we've

1143
00:59:09.800 --> 00:59:12.000
changed it. So it's private chat.

1144
00:59:13.900 --> 00:59:14.800
and let me

1145
00:59:18.400 --> 00:59:20.400
Where's our? Oh gosh, okay.

1146
00:59:21.400 --> 00:59:22.500
I should have really saved that.

1147
00:59:23.300 --> 00:59:26.700
Password here. You know what I'll just I'll use

1148
00:59:29.200 --> 00:59:32.800
I use my text editor as a very cheap password manager

1149
00:59:32.800 --> 00:59:35.300
that you should never just for

1150
00:59:35.300 --> 00:59:36.500
this just for this.

1151
00:59:37.400 --> 00:59:38.000
There we go.

1152
00:59:38.600 --> 00:59:41.600
And then I can just go back to the editor here.

1153
00:59:42.300 --> 00:59:44.200
All right, let's paste it from that.

1154
00:59:45.500 --> 00:59:45.900
Is it?

1155
00:59:48.200 --> 00:59:49.700
Oh why my Local Host?

1156
00:59:51.300 --> 00:59:51.900
That's odd.

1157
00:59:53.100 --> 00:59:55.700
Oh, no. Sorry. It is Place one out of localhost. Yeah.

1158
00:59:56.600 --> 00:59:56.800
Okay.

1159
00:59:58.100 --> 00:59:59.200
No, it's going on.

1160
01:00:00.100 --> 01:00:00.800
What's it doing?

1161
01:00:02.600 --> 01:00:04.200
Place one not localhost

1162
01:00:10.200 --> 01:00:12.200
Well, it might not running it in the yeah.

1163
01:00:13.600 --> 01:00:16.300
What did wrong not do he didn't run it at

1164
01:00:16.300 --> 01:00:19.500
the main equals Place one?

1165
01:00:22.700 --> 01:00:23.900
localhost City

1166
01:00:24.600 --> 01:00:25.400
Now we didn't.

1167
01:00:27.800 --> 01:00:29.500
All right, did that work?

1168
01:00:30.900 --> 01:00:33.500
No, because he can't spell domain.

1169
01:00:34.600 --> 01:00:36.900
It's not the mine. It's the main.

1170
01:00:37.800 --> 01:00:41.400
Now, it's Place one Local Host. Yay little

1171
01:00:40.400 --> 01:00:43.900
victories. All right, and then

1172
01:00:43.900 --> 01:00:45.300
we can sign me.

1173
01:00:46.600 --> 01:00:47.500
Do not like you.

1174
01:00:49.100 --> 01:00:50.100
All right, come on.

1175
01:00:51.700 --> 01:00:54.500
There we go. They can sign in and it would

1176
01:00:54.500 --> 01:00:58.500
normally just forward to hear because I was there but I refresh the

1177
01:00:58.500 --> 01:01:01.700
page and that's why I didn't anyway. All right,

1178
01:01:01.700 --> 01:01:03.000
cool. Let's get this out of the way.

1179
01:01:04.500 --> 01:01:07.200
Slow but sure progress. In fact, let's get this

1180
01:01:07.200 --> 01:01:09.700
up. Hi. All right, so

1181
01:01:11.400 --> 01:01:15.100
What are we doing again? All right. Now it's authenticated right?

1182
01:01:14.100 --> 01:01:19.500
Let me see if there any questions

1183
01:01:17.500 --> 01:01:20.400
anyone who

1184
01:01:20.400 --> 01:01:20.900
wants to.

1185
01:01:22.700 --> 01:01:25.000
Tell me that I'm being sacrilegious.

1186
01:01:26.900 --> 01:01:29.100
Holy pierogi. Hey, I'll take

1187
01:01:29.100 --> 01:01:32.400
it. Oh, she was just to make secret more cute and

1188
01:01:32.400 --> 01:01:36.900
less scary. But the idea that they aren't writable is great. Nice. It's

1189
01:01:35.900 --> 01:01:38.000
not printable either. It's just

1190
01:01:38.300 --> 01:01:41.100
too much color for anyone. Yeah. I know. I mean

1191
01:01:41.100 --> 01:01:44.400
people will find a way right like they will they'll print

1192
01:01:44.400 --> 01:01:45.600
it. I know this. I know it's

1193
01:01:45.800 --> 01:01:48.600
Happen but yeah, cool.

1194
01:01:48.600 --> 01:01:51.300
All right. Well that was the idea and you know,

1195
01:01:51.300 --> 01:01:53.200
it doesn't hurt that it's also cute.

1196
01:01:53.900 --> 01:01:58.000
Doesn't hurt. Alright, so we have

1197
01:01:57.800 --> 01:02:00.700
authentication still a

1198
01:02:00.700 --> 01:02:03.900
centralized app, but authentication and let's

1199
01:02:03.900 --> 01:02:05.600
see if this works now testing.

1200
01:02:09.300 --> 01:02:10.500
new one and go to

1201
01:02:11.700 --> 01:02:13.800
Place one Local Host

1202
01:02:15.700 --> 01:02:16.600
s privates

1203
01:02:17.400 --> 01:02:19.400
Yeah, then also are all.

1204
01:02:20.900 --> 01:02:22.800
Yay. All right, so

1205
01:02:24.500 --> 01:02:26.400
that's working but

1206
01:02:29.700 --> 01:02:35.000
Is it still centralized? It's not peer-to-peer and but

1207
01:02:33.300 --> 01:02:36.400
at least not anyone

1208
01:02:36.400 --> 01:02:38.800
can join it. That's kind of cool. All right.

1209
01:02:40.700 --> 01:02:43.700
So how do we make it peer-to-peer?

1210
01:02:44.700 --> 01:02:45.000
well

1211
01:02:46.200 --> 01:02:49.300
for one thing it's not just it's not going to be a nickname and a

1212
01:02:49.300 --> 01:02:52.400
message anymore. Right? We need a

1213
01:02:52.400 --> 01:02:55.600
domain to send the message to so they're

1214
01:02:55.600 --> 01:02:58.100
gonna be two domains. At least I'm gonna be on my domain

1215
01:02:58.100 --> 01:03:01.500
you're gonna be on your domain and then we'll have the message and the

1216
01:03:01.500 --> 01:03:04.300
message those not going to be in plain text.

1217
01:03:04.300 --> 01:03:05.900
It's going to be

1218
01:03:07.800 --> 01:03:08.700
encrypted

1219
01:03:09.100 --> 01:03:11.900
Right, so I was planning.

1220
01:03:13.200 --> 01:03:16.300
On actually going step-by-step in doing that,

1221
01:03:16.300 --> 01:03:19.600
but it's already 6PM. So instead

1222
01:03:19.600 --> 01:03:22.300
let me take you through the example that

1223
01:03:22.300 --> 01:03:25.300
exists. It's not a lot

1224
01:03:25.300 --> 01:03:26.400
of code to look through.

1225
01:03:27.200 --> 01:03:27.300
so

1226
01:03:29.400 --> 01:03:31.500
let me take you through it in a

1227
01:03:35.300 --> 01:03:39.100
from where we are right now what we would do. Okay, so

1228
01:03:40.900 --> 01:03:42.600
Let's bring up our terminal.

1229
01:03:44.900 --> 01:03:47.500
And I'm going to go to kitten examples.

1230
01:03:49.100 --> 01:03:53.000
End-to-end kitten chats anything running

1231
01:03:52.100 --> 01:03:55.800
here. Let's just click that

1232
01:03:55.800 --> 01:03:56.700
editor as well.

1233
01:03:57.600 --> 01:04:00.200
Okay, and let me

1234
01:04:00.200 --> 01:04:01.900
just start my editor here.

1235
01:04:03.400 --> 01:04:07.700
To begin with now look at what there is here different

1236
01:04:06.700 --> 01:04:10.100
to what we have right all this

1237
01:04:09.100 --> 01:04:12.100
is the same. This is just what we did. We

1238
01:04:12.100 --> 01:04:15.400
implemented authentication, okay?

1239
01:04:16.500 --> 01:04:20.800
Now there are three extra files here. The index.html

1240
01:04:19.800 --> 01:04:22.300
is just the basic is is just

1241
01:04:22.300 --> 01:04:25.300
very very basic. It just links to the

1242
01:04:25.300 --> 01:04:28.400
private root because like if you get there and

1243
01:04:28.400 --> 01:04:31.300
you're not it, you're not authenticated. You don't know you want to go directly there.

1244
01:04:31.300 --> 01:04:34.300
That's it's nothing. So that's just that's just for sure.

1245
01:04:35.700 --> 01:04:35.700
um

1246
01:04:36.600 --> 01:04:39.600
However, so we're now we have a

1247
01:04:39.600 --> 01:04:42.600
peer-to-peer application and it's end-to-end encrypted.

1248
01:04:42.600 --> 01:04:46.000
So for the peer-to-peer, what we need to do is deliver

1249
01:04:45.500 --> 01:04:49.000
messages to another domain right and

1250
01:04:48.500 --> 01:04:51.700
have other domains be able to deliver messages

1251
01:04:51.700 --> 01:04:55.000
to us when we get those messages

1252
01:04:54.200 --> 01:04:57.200
from another domain. We need to be

1253
01:04:57.200 --> 01:05:00.700
able to let the rest of the application know basically the chat socket.

1254
01:05:00.700 --> 01:05:04.000
We need to let it know that a new messages arrived right

1255
01:05:03.300 --> 01:05:06.200
from another domain. So we need

1256
01:05:06.200 --> 01:05:09.200
an event emitter of some sort. That's what we create in.

1257
01:05:09.200 --> 01:05:12.800
The main dot script main dot script is in JavaScript,

1258
01:05:12.800 --> 01:05:17.700
but it is a special file. That is

1259
01:05:15.700 --> 01:05:18.500
run when

1260
01:05:18.500 --> 01:05:21.300
your app first starts. So it's run by kitten when

1261
01:05:21.300 --> 01:05:25.000
you're at first starts. So if you want to have something Global that's a

1262
01:05:24.100 --> 01:05:27.100
good place to initialize it and that's exactly what we

1263
01:05:27.100 --> 01:05:30.200
need for our emitter our events amateur for

1264
01:05:30.200 --> 01:05:33.200
the remote messages and that's literally all there is

1265
01:05:33.200 --> 01:05:33.500
there.

1266
01:05:34.200 --> 01:05:37.700
We import event emitter from node events,

1267
01:05:37.700 --> 01:05:40.800
and we just expose a global remote message

1268
01:05:40.800 --> 01:05:43.500
emitter. That's it. That's all there

1269
01:05:43.500 --> 01:05:47.900
is. Okay, and so let's

1270
01:05:47.900 --> 01:05:50.700
take a look again at the last remaining thing,

1271
01:05:50.700 --> 01:05:51.900
which is our inbox.

1272
01:05:53.300 --> 01:05:54.000
so this is how

1273
01:05:55.100 --> 01:05:58.800
we receive messages it's a post-root and

1274
01:05:58.800 --> 01:06:01.200
that's why if you look at

1275
01:06:01.200 --> 01:06:01.400
the

1276
01:06:03.800 --> 01:06:06.700
Name of the file. It's dot post so this

1277
01:06:06.700 --> 01:06:09.400
will get called when a post request comes in

1278
01:06:09.400 --> 01:06:13.200
to slash inbox. Okay, so let's

1279
01:06:13.200 --> 01:06:13.900
take a look at it.

1280
01:06:15.500 --> 01:06:16.800
all we're doing really

1281
01:06:18.700 --> 01:06:22.200
is we're getting the message as a request body. We're

1282
01:06:21.200 --> 01:06:23.400
expecting it in Json.

1283
01:06:25.700 --> 01:06:29.300
And kittens automatically doing that giving you

1284
01:06:29.300 --> 01:06:29.900
Json there.

1285
01:06:30.600 --> 01:06:31.800
We're just logging it out.

1286
01:06:32.600 --> 01:06:35.100
And then we're asking that remote message emitter that we

1287
01:06:35.100 --> 01:06:38.200
created emit a message event with the message and then

1288
01:06:38.200 --> 01:06:42.400
we're just sending a very basic kind of because tutorials example,

1289
01:06:41.400 --> 01:06:43.600
just an okay response.

1290
01:06:44.300 --> 01:06:44.700
That's it.

1291
01:06:45.400 --> 01:06:49.500
So if you call inbox and notice,

1292
01:06:49.500 --> 01:06:53.300
it's not an authenticated route because different domains

1293
01:06:52.300 --> 01:06:55.200
should be able to call it. If you

1294
01:06:55.200 --> 01:06:58.300
call inbox and you send a

1295
01:06:58.300 --> 01:07:01.500
Json format message that gets a minute now in an

1296
01:07:01.500 --> 01:07:04.900
actual real world application. You would be doing a lot

1297
01:07:04.900 --> 01:07:07.400
of validation here right to make sure that the message

1298
01:07:07.400 --> 01:07:10.500
was what you expect. It didn't contain anything. You didn't expect Etc

1299
01:07:10.500 --> 01:07:13.200
blah blah blah. We're not doing any of that in this simple

1300
01:07:13.200 --> 01:07:16.400
example, right? So let's get back to

1301
01:07:16.400 --> 01:07:17.400
sorry.

1302
01:07:19.100 --> 01:07:19.100
um

1303
01:07:20.200 --> 01:07:23.500
Looking at what's changed now? These are

1304
01:07:23.500 --> 01:07:26.400
the same files but something's changed because now

1305
01:07:26.400 --> 01:07:31.000
it's going to be an end to end encrypted message chat,

1306
01:07:30.400 --> 01:07:33.700
right? So we said that

1307
01:07:33.700 --> 01:07:36.800
when we get a message it gets broadcast.

1308
01:07:37.900 --> 01:07:40.800
And that the chat socket handles that

1309
01:07:40.800 --> 01:07:42.100
so we'll take a look at that.

1310
01:07:44.300 --> 01:07:47.400
But first of all, let's just look at the let's go from the UI In from

1311
01:07:47.400 --> 01:07:48.900
from the interface in

1312
01:07:49.500 --> 01:07:51.300
So let's look at what's changed in the page?

1313
01:07:52.200 --> 01:07:54.400
This is all the same. This is all the same.

1314
01:07:55.300 --> 01:07:57.800
The names changed status indicator is the same.

1315
01:07:58.700 --> 01:08:00.300
Here's that div, right?

1316
01:08:01.300 --> 01:08:02.900
And here's what's different.

1317
01:08:04.500 --> 01:08:04.600
So

1318
01:08:05.900 --> 01:08:08.300
Well tooth no we'd actually

1319
01:08:08.300 --> 01:08:10.400
change it to private. So this is the only thing that's different.

1320
01:08:11.300 --> 01:08:15.300
We're listening using alpine.js to the htmx colon

1321
01:08:14.300 --> 01:08:17.300
ws-config -

1322
01:08:17.300 --> 01:08:18.200
send event.

1323
01:08:19.200 --> 01:08:20.500
Where preventing?

1324
01:08:21.500 --> 01:08:25.000
We're preventing the default action on that via DOT

1325
01:08:24.300 --> 01:08:27.400
prevent. So the message is not sent.

1326
01:08:28.500 --> 01:08:29.300
and instead

1327
01:08:30.400 --> 01:08:33.800
A function that we've declared somewhere called encrypt

1328
01:08:33.800 --> 01:08:34.900
message gets called.

1329
01:08:35.600 --> 01:08:35.700
so

1330
01:08:36.900 --> 01:08:40.300
that's the main difference there. We're not

1331
01:08:40.300 --> 01:08:43.800
sending the message right away. We are encrypting it remember for

1332
01:08:43.800 --> 01:08:46.600
end-to-end encryption. The encryption has to occur

1333
01:08:46.600 --> 01:08:49.200
in a space that you control. You. Don't that's not

1334
01:08:49.200 --> 01:08:52.400
the server. That's the client for you, right? That's where

1335
01:08:52.400 --> 01:08:53.100
your secret is.

1336
01:08:53.900 --> 01:08:56.800
You also have to understand the security properties

1337
01:08:56.800 --> 01:09:00.400
of what you're building. So kitten

1338
01:08:59.400 --> 01:09:02.500
is a web server. This

1339
01:09:02.500 --> 01:09:03.200
is a web app.

1340
01:09:03.800 --> 01:09:06.300
So this anything you build here. So

1341
01:09:06.300 --> 01:09:10.200
this this little example of course don't use it anywhere. But once I

1342
01:09:09.200 --> 01:09:12.600
build some of this stuff in a

1343
01:09:12.600 --> 01:09:15.500
much more production ready way in kitten itself,

1344
01:09:15.500 --> 01:09:17.700
and it can be used by a kitten applications.

1345
01:09:19.400 --> 01:09:22.100
It still doesn't change the fact that there are certain things that

1346
01:09:22.100 --> 01:09:23.800
it won't protect you against.

1347
01:09:24.900 --> 01:09:25.000
so

1348
01:09:26.500 --> 01:09:29.500
we're using https already to speak between

1349
01:09:29.500 --> 01:09:33.300
kitten instances between these domains.

1350
01:09:32.300 --> 01:09:35.300
So your messages

1351
01:09:35.300 --> 01:09:37.100
are encrypted in transit anyway.

1352
01:09:37.900 --> 01:09:40.300
And to an encryption really is useful for

1353
01:09:40.300 --> 01:09:43.900
encryption at rest, right? So on

1354
01:09:43.900 --> 01:09:46.400
the server they're being stored on the server. So what

1355
01:09:46.400 --> 01:09:50.600
does that protect you against? Well, let's say that this

1356
01:09:49.600 --> 01:09:52.700
is hosted at some VPS provider

1357
01:09:52.700 --> 01:09:55.100
and some admin there, you know

1358
01:09:55.100 --> 01:09:58.400
likes to look around they have access to your server. They

1359
01:09:58.400 --> 01:10:02.000
look around they don't see much

1360
01:10:01.700 --> 01:10:04.600
right now if they

1361
01:10:04.600 --> 01:10:10.100
have the time and the inclination

1362
01:10:11.300 --> 01:10:15.300
to actually run something else on your server that

1363
01:10:14.300 --> 01:10:17.500
you then connect to while you're authenticated and

1364
01:10:17.500 --> 01:10:19.100
then they get your secret.

1365
01:10:19.800 --> 01:10:23.600
That's what doesn't protect you against so you

1366
01:10:23.600 --> 01:10:26.500
have to understand like what the security properties of

1367
01:10:26.500 --> 01:10:29.200
any system is web-based system

1368
01:10:29.200 --> 01:10:32.700
basically means that if a different

1369
01:10:32.700 --> 01:10:35.900
piece of code is run on the server at

1370
01:10:35.900 --> 01:10:39.700
any point, it is just one request and yours

1371
01:10:38.700 --> 01:10:41.500
your key could

1372
01:10:41.500 --> 01:10:45.000
be compromised that way your secret could be compromised. So

1373
01:10:44.500 --> 01:10:47.100
what kind of

1374
01:10:47.100 --> 01:10:50.800
a threat model with this kind of

1375
01:10:50.800 --> 01:10:53.400
entail in terms of like who would be

1376
01:10:53.400 --> 01:10:57.200
at risk of this? I'd say someone who's being targeted directly

1377
01:10:56.200 --> 01:10:59.700
for surveillance someone.

1378
01:11:01.900 --> 01:11:04.300
that you know, it's a state-level actor could maybe

1379
01:11:04.300 --> 01:11:06.600
get access to

1380
01:11:09.100 --> 01:11:11.100
to a VPS provider

1381
01:11:11.900 --> 01:11:14.200
remember also though. These are going to be spread out

1382
01:11:14.200 --> 01:11:18.700
on different providers. So, you know

1383
01:11:18.700 --> 01:11:21.500
that actually makes it less likely

1384
01:11:21.500 --> 01:11:24.800
that that's going to happen unless they

1385
01:11:24.800 --> 01:11:27.600
whoever is after you manages to

1386
01:11:27.600 --> 01:11:28.300
you know hack.

1387
01:11:28.900 --> 01:11:31.600
Has all of these ways to

1388
01:11:31.600 --> 01:11:34.800
hack different providers all around the world. So that's

1389
01:11:34.800 --> 01:11:38.300
that's a bit where it's better than a centralized system. But

1390
01:11:37.300 --> 01:11:40.600
at the same time, you know, your VPS

1391
01:11:40.600 --> 01:11:43.300
provider or whoever else could be easier

1392
01:11:43.300 --> 01:11:46.400
to hack you could be running this on a tiny little single board computer

1393
01:11:46.400 --> 01:11:49.400
attached to reuter at home in which case if the physical security

1394
01:11:49.400 --> 01:11:53.800
of your home is compromised Etc. So, you

1395
01:11:53.800 --> 01:11:56.600
know as a good rule of thumb I don't

1396
01:11:56.600 --> 01:11:57.800
use this if you're

1397
01:11:59.300 --> 01:12:00.800
doing like Edward Snowden stuff.

1398
01:12:02.900 --> 01:12:05.800
for a very long time if ever but for

1399
01:12:05.800 --> 01:12:08.800
everyone else the whole idea with encryption

1400
01:12:08.800 --> 01:12:11.300
in general is to raise the cost

1401
01:12:11.300 --> 01:12:15.200
of surveillance to raise the efforts of surveillance

1402
01:12:14.200 --> 01:12:17.600
so that hopefully it's only

1403
01:12:17.600 --> 01:12:20.300
used when it's really really necessary in a targeted

1404
01:12:20.300 --> 01:12:23.000
way and again,

1405
01:12:23.800 --> 01:12:26.200
You know that that whether or not that's a

1406
01:12:26.200 --> 01:12:30.200
good thing depends on how much you trust the people doing this surveillance, but

1407
01:12:29.200 --> 01:12:32.000
that's way better to master surveillance. And

1408
01:12:32.200 --> 01:12:35.400
that's really where you know encryption is useful for raising

1409
01:12:35.400 --> 01:12:39.100
the cost of that. So understand that nothing is is secure

1410
01:12:38.100 --> 01:12:41.200
100% You have to understand

1411
01:12:41.200 --> 01:12:44.700
if it's secure enough for your needs. So wow that

1412
01:12:44.700 --> 01:12:47.100
was quite a disclaimer, but I think it's important to understand that, you know,

1413
01:12:47.100 --> 01:12:50.400
because like and if anyone tells you this is entirely secure

1414
01:12:50.400 --> 01:12:51.300
they're bullshiting you.

1415
01:12:51.800 --> 01:12:54.400
Right the same issue that exists with web

1416
01:12:54.400 --> 01:12:57.400
applications exists with Native applications

1417
01:12:57.400 --> 01:13:00.400
as well. Like you know, it only takes one

1418
01:13:00.400 --> 01:13:03.800
update of an app in order to compromise your security if

1419
01:13:03.800 --> 01:13:06.200
that update has been compromised either through a supply

1420
01:13:06.200 --> 01:13:09.600
chain attack or you know, the provider or

1421
01:13:09.600 --> 01:13:12.100
the App Store being hacked or the

1422
01:13:12.100 --> 01:13:15.300
binary being hacked if it's a distribution, you're not getting from an app

1423
01:13:15.300 --> 01:13:18.800
store Etc. You know, if it's

1424
01:13:18.800 --> 01:13:21.400
a centralized system you have to actually trust that the

1425
01:13:21.400 --> 01:13:24.500
people running your messaging application are

1426
01:13:24.500 --> 01:13:27.300
not interfering with the signaling that they're not adding another

1427
01:13:27.300 --> 01:13:31.100
and to your end and encryption chat

1428
01:13:30.100 --> 01:13:33.400
that you're having on the notes

1429
01:13:33.400 --> 01:13:34.900
to you. So, you know again,

1430
01:13:36.400 --> 01:13:39.200
I think the great takeaway from that is from this

1431
01:13:39.200 --> 01:13:42.100
is nothing is secure. Is it secure enough?

1432
01:13:42.100 --> 01:13:45.700
Do you think for your needs and how do we like raise

1433
01:13:45.700 --> 01:13:46.100
the cost?

1434
01:13:46.800 --> 01:13:49.600
Of of surveillance anyway.

1435
01:13:50.700 --> 01:13:53.900
So all that to say that's what's changed here.

1436
01:13:53.900 --> 01:13:56.100
If we look down here nothing else

1437
01:13:56.100 --> 01:13:58.000
has changed my goodness.

1438
01:13:59.300 --> 01:13:59.500
Look at that.

1439
01:14:00.400 --> 01:14:03.400
Aha, the form has changed a little bit. We have

1440
01:14:03.400 --> 01:14:07.100
a two instead of a nickname and that's a domain and

1441
01:14:06.100 --> 01:14:08.400
here we have plain text.

1442
01:14:09.200 --> 01:14:12.200
Is the name of our form field just to make it clear that

1443
01:14:12.200 --> 01:14:15.500
this is not something we should be sending unencrypted as

1444
01:14:15.500 --> 01:14:16.000
the plaintext.

1445
01:14:16.600 --> 01:14:19.700
That's it, though. Nothing's changed on the page. We're

1446
01:14:19.700 --> 01:14:22.700
even using the same message component. But is

1447
01:14:22.700 --> 01:14:25.300
it the same message component? We'll take

1448
01:14:25.300 --> 01:14:28.200
a look at that in a second. First of all, let's look at the other files.

1449
01:14:29.400 --> 01:14:31.700
What's changed in our chat thought socket?

1450
01:14:33.100 --> 01:14:35.800
So in the chat thought socket.

1451
01:14:37.400 --> 01:14:40.000
We some things have changed.

1452
01:14:40.900 --> 01:14:41.700
a little bit

1453
01:14:42.900 --> 01:14:45.200
So let's take a look at what that is.

1454
01:14:46.200 --> 01:14:46.600
so

1455
01:14:49.400 --> 01:14:52.400
here's where we're

1456
01:14:52.400 --> 01:14:55.000
creating our sockets root.

1457
01:14:55.800 --> 01:14:58.700
And it looks like we've refactored descending the

1458
01:14:58.700 --> 01:15:02.300
saving and the broadcasting of the message into its

1459
01:15:01.300 --> 01:15:04.400
own anonymous.

1460
01:15:05.100 --> 01:15:08.800
A closure here. And the

1461
01:15:08.800 --> 01:15:11.400
reason we did that is because we need to call it from two different places

1462
01:15:11.400 --> 01:15:14.400
now, right this is doing exactly what it did last time.

1463
01:15:15.600 --> 01:15:19.000
But we need to call it from two different places where well

1464
01:15:18.800 --> 01:15:21.400
once when a remote message comes

1465
01:15:21.400 --> 01:15:24.500
in right? So we're creating a remote message

1466
01:15:24.500 --> 01:15:24.900
Handler.

1467
01:15:25.700 --> 01:15:28.600
And listening for that remote message and emitter message

1468
01:15:28.600 --> 01:15:31.400
event. When a remote message comes in. We validate

1469
01:15:31.400 --> 01:15:34.900
the message and then we save and broadcast it locally. So

1470
01:15:34.900 --> 01:15:37.000
a message come in. So we've broadcast it to

1471
01:15:37.700 --> 01:15:40.100
any local clients that are

1472
01:15:40.100 --> 01:15:43.900
that are there and then we do

1473
01:15:43.900 --> 01:15:46.000
a little bit of housekeeping here if the socket goes

1474
01:15:46.200 --> 01:15:49.000
away. We also turn off that message emitter.

1475
01:15:49.700 --> 01:15:52.400
And then here we just

1476
01:15:52.400 --> 01:15:55.200
have the socket message event that we're

1477
01:15:55.200 --> 01:15:56.900
handling as well and we do it there.

1478
01:15:57.900 --> 01:16:00.200
So there we get it. We just

1479
01:16:00.200 --> 01:16:03.200
what we're doing before. We just call that refactored method.

1480
01:16:04.300 --> 01:16:07.800
And then here's what's different. We need to deliver the

1481
01:16:07.800 --> 01:16:10.400
message. So this is a local message.

1482
01:16:10.400 --> 01:16:13.100
So we need to deliver it to the remote and here we're just

1483
01:16:13.100 --> 01:16:17.000
basically string creating a

1484
01:16:16.300 --> 01:16:19.800
Json string of the

1485
01:16:19.800 --> 01:16:23.000
message creating a post request here.

1486
01:16:25.000 --> 01:16:25.400
and

1487
01:16:29.600 --> 01:16:31.700
sending it to the inbox of the remote.

1488
01:16:34.800 --> 01:16:37.700
The remote domain the

1489
01:16:37.700 --> 01:16:41.100
remote small web domain. That's

1490
01:16:40.100 --> 01:16:42.300
it. The rest of it is the same.

1491
01:16:43.500 --> 01:16:47.100
And then so let's take

1492
01:16:46.100 --> 01:16:48.300
a look then.

1493
01:16:49.200 --> 01:16:52.500
At this message component because that's changed.

1494
01:16:54.100 --> 01:16:57.900
It's still a list item. It's still sending you

1495
01:16:57.900 --> 01:17:00.500
HTML, but notice

1496
01:17:00.500 --> 01:17:04.600
that we've added some new alpine.js

1497
01:17:03.600 --> 01:17:06.400
handlers for clients side

1498
01:17:06.400 --> 01:17:07.100
processing.

1499
01:17:08.300 --> 01:17:11.400
Remember this is sent from the chat socket as well. So when

1500
01:17:11.400 --> 01:17:13.000
this list item is loaded.

1501
01:17:14.600 --> 01:17:15.200
We have this.

1502
01:17:17.500 --> 01:17:20.100
We have this message text property that's sent to

1503
01:17:20.100 --> 01:17:22.600
the that is set. Sorry to decipher text.

1504
01:17:23.300 --> 01:17:26.300
So that is the encrypted text because the server does not have

1505
01:17:26.300 --> 01:17:31.000
the unencrypted the plaintext right? So that's

1506
01:17:29.500 --> 01:17:32.100
set to decide for text.

1507
01:17:32.100 --> 01:17:33.100
That's all we have on the server.

1508
01:17:33.800 --> 01:17:36.200
And when this note is initialized we're

1509
01:17:36.200 --> 01:17:39.100
saying okay decrypt the message.

1510
01:17:40.100 --> 01:17:43.200
And we're sending the cipher. We're giving it a deciphertext the message from

1511
01:17:43.200 --> 01:17:44.200
and the message to

1512
01:17:44.900 --> 01:17:47.400
Right and then it just here displays message

1513
01:17:47.400 --> 01:17:51.200
from message to and here dynamically binds

1514
01:17:50.200 --> 01:17:54.700
the contents of

1515
01:17:54.700 --> 01:17:58.100
the message to the message text property in

1516
01:17:57.100 --> 01:18:01.100
our in our

1517
01:18:00.100 --> 01:18:03.600
model up here. So that's

1518
01:18:03.600 --> 01:18:03.800
it.

1519
01:18:04.500 --> 01:18:07.400
A list item with encrypted text loads into

1520
01:18:07.400 --> 01:18:10.200
the client and then when it loads it gets

1521
01:18:10.200 --> 01:18:13.400
decrypted and displayed that way so

1522
01:18:13.400 --> 01:18:16.100
quite elegant. So let's take a

1523
01:18:16.100 --> 01:18:19.800
look now finally at what's actually

1524
01:18:19.800 --> 01:18:22.000
doing the encryption and the decryption.

1525
01:18:23.200 --> 01:18:27.300
Um, and so I'm going to open up

1526
01:18:26.300 --> 01:18:30.400
the the index.js

1527
01:18:29.400 --> 01:18:31.200
file.

1528
01:18:32.100 --> 01:18:36.100
Remember previously. This was just used to do some that's still

1529
01:18:35.100 --> 01:18:38.700
here mobile interface improvements. Right like

1530
01:18:38.700 --> 01:18:41.300
we're doing this stuff but we've added

1531
01:18:41.300 --> 01:18:44.400
about 30 lines of code to do the encryption and the

1532
01:18:44.400 --> 01:18:46.000
decryption. So, how does that work?

1533
01:18:46.600 --> 01:18:48.800
well for one thing it's 30 lines of code because

1534
01:18:53.600 --> 01:18:57.500
Kitten provides a cryptography API, right?

1535
01:18:56.500 --> 01:18:59.500
So that's what we are

1536
01:18:59.500 --> 01:19:02.500
importing here encrypt message

1537
01:19:02.500 --> 01:19:05.900
for domain and decrypt message from domain. All

1538
01:19:05.900 --> 01:19:08.300
right, so then we're creating an

1539
01:19:08.300 --> 01:19:09.600
encrypt message method.

1540
01:19:11.100 --> 01:19:14.300
And this is the one that's called. If you remember from the

1541
01:19:14.300 --> 01:19:17.300
page before messages sent remember,

1542
01:19:17.300 --> 01:19:20.600
we're preventing that event and through htmx and calling encrypt

1543
01:19:20.600 --> 01:19:20.900
message.

1544
01:19:21.800 --> 01:19:24.600
So we get the parameters from event

1545
01:19:24.600 --> 01:19:25.900
detail parameters.

1546
01:19:26.700 --> 01:19:30.000
We get our private key from local storage. It's

1547
01:19:29.700 --> 01:19:32.700
our secret that was added there

1548
01:19:32.700 --> 01:19:34.100
by kitten when you signed in.

1549
01:19:35.400 --> 01:19:38.200
And then we call encrypt message for

1550
01:19:38.200 --> 01:19:42.200
domain with the plaintext that we got from the form our private

1551
01:19:41.200 --> 01:19:45.400
key and the domain

1552
01:19:44.400 --> 01:19:47.300
that we got from the form, right?

1553
01:19:48.300 --> 01:19:51.300
And then what we do is when we

1554
01:19:51.300 --> 01:19:54.800
got the encrypted message, we manually use

1555
01:19:54.800 --> 01:19:56.900
the socket wrapper that sent to us.

1556
01:19:58.100 --> 01:20:01.400
And it's sent function to create a

1557
01:20:01.400 --> 01:20:04.600
Json message that

1558
01:20:04.600 --> 01:20:05.600
we send to.

1559
01:20:07.600 --> 01:20:11.400
To that to that to our

1560
01:20:11.400 --> 01:20:12.900
chat socket.

1561
01:20:13.500 --> 01:20:16.800
And when it gets it remember it delivers

1562
01:20:16.800 --> 01:20:18.700
it to the remote and we saw that.

1563
01:20:19.500 --> 01:20:22.400
So with our ciphertext the from we're just using the window location

1564
01:20:22.400 --> 01:20:25.400
host and to parameters domain, okay?

1565
01:20:26.300 --> 01:20:28.800
And decryption is similar.

1566
01:20:30.400 --> 01:20:33.300
But even simpler here, we're just saying if it's from us

1567
01:20:33.300 --> 01:20:36.900
then we need to still get there public key.

1568
01:20:36.900 --> 01:20:39.600
So we flip that I could write

1569
01:20:39.600 --> 01:20:40.300
that code a bit more.

1570
01:20:41.900 --> 01:20:45.000
The intent could be clear there and then

1571
01:20:44.200 --> 01:20:47.100
we get our secret and we say decrypt message from

1572
01:20:47.100 --> 01:20:51.300
domain with the ciphertext our private key and the

1573
01:20:50.300 --> 01:20:53.400
domain that we want to get the public key

1574
01:20:53.400 --> 01:20:56.400
from now, let's go one step further and

1575
01:20:56.400 --> 01:20:59.200
look at these encrypt message

1576
01:20:59.200 --> 01:21:02.400
for domain and decrypt message for domain functions. I

1577
01:21:02.400 --> 01:21:05.700
don't think I'm going to be able to do that from here. Can I

1578
01:21:05.700 --> 01:21:08.800
actually go to definition from here? No because it's in there

1579
01:21:08.800 --> 01:21:10.100
so I can show you that.

1580
01:21:11.200 --> 01:21:12.500
in kitten proper

1581
01:21:13.700 --> 01:21:16.500
so if we go to the crypto

1582
01:21:16.500 --> 01:21:18.000
Library crypto API

1583
01:21:19.800 --> 01:21:22.600
and let's look at what we have here. We have decrypt

1584
01:21:22.600 --> 01:21:27.300
message from domain and we have where's encrypt

1585
01:21:26.300 --> 01:21:28.000
message for domain?

1586
01:21:29.200 --> 01:21:29.800
Should be somewhere anyway.

1587
01:21:31.200 --> 01:21:34.700
Let's look at there's encrypt message for domain and here's decrypt

1588
01:21:34.700 --> 01:21:37.700
message for domain again, quite simple. Both of

1589
01:21:37.700 --> 01:21:40.400
them are and getting a shared secret.

1590
01:21:40.400 --> 01:21:44.000
So what's happening here cryptographically is we

1591
01:21:43.100 --> 01:21:46.400
are using it diffie-hellman key exchange.

1592
01:21:46.400 --> 01:21:50.400
And so we

1593
01:21:50.400 --> 01:21:53.700
are calculating a shared secret using

1594
01:21:53.700 --> 01:21:56.300
our private key and their public key how

1595
01:21:56.300 --> 01:21:59.400
we getting the public key their private key. I'm sorry.

1596
01:21:59.400 --> 01:22:01.400
They're public key what we're doing.

1597
01:22:02.300 --> 01:22:05.500
Is using another property

1598
01:22:05.500 --> 01:22:06.400
of kitten.

1599
01:22:08.500 --> 01:22:12.800
Which is that if you go to any kitten site

1600
01:22:11.800 --> 01:22:14.300
and you go to forward slash ID

1601
01:22:14.300 --> 01:22:17.100
and kitten is running which is

1602
01:22:17.100 --> 01:22:20.200
really important. That kitten is running. So let's go

1603
01:22:20.200 --> 01:22:21.900
over here. Go to

1604
01:22:23.900 --> 01:22:24.600
end

1605
01:22:25.800 --> 01:22:28.700
Okay, and let's just make sure kitten

1606
01:22:28.700 --> 01:22:29.700
is running here.

1607
01:22:32.400 --> 01:22:35.100
Okay, so when kitten is running

1608
01:22:36.400 --> 01:22:37.300
let's go back here.

1609
01:22:39.200 --> 01:22:40.500
If you go to forward slash ID.

1610
01:22:41.600 --> 01:22:42.000
you will get

1611
01:22:43.100 --> 01:22:46.400
that notes at 25519 public

1612
01:22:46.400 --> 01:22:49.800
key. All right, and so

1613
01:22:49.800 --> 01:22:51.400
that

1614
01:22:53.500 --> 01:22:56.200
Is how we get the public key of the

1615
01:22:56.200 --> 01:22:57.700
other node?

1616
01:22:58.800 --> 01:23:00.700
So, let me just go back to my terminal.

1617
01:23:01.900 --> 01:23:04.500
Alright, I'm just going to note this down as well because

1618
01:23:04.500 --> 01:23:07.300
this is going to be useful for us when we actually

1619
01:23:07.300 --> 01:23:09.000
see it running.

1620
01:23:10.100 --> 01:23:13.700
So I'll just note that down in my hastily made

1621
01:23:13.700 --> 01:23:16.000
password manager / textpad.

1622
01:23:17.400 --> 01:23:17.900
Okay done.

1623
01:23:19.200 --> 01:23:19.200
All right.

1624
01:23:20.400 --> 01:23:22.300
So let's go back here.

1625
01:23:23.700 --> 01:23:25.200
So we're getting a shared Secret.

1626
01:23:26.200 --> 01:23:29.400
And then we're encrypting using that

1627
01:23:29.400 --> 01:23:32.100
shared secret and returning the ink

1628
01:23:32.100 --> 01:23:35.400
for message and we're doing basically the reverse of that in decryption.

1629
01:23:36.400 --> 01:23:38.500
So shared secret for domain is doing the heavy lifting.

1630
01:23:39.400 --> 01:23:40.300
If we look at that.

1631
01:23:41.800 --> 01:23:44.300
We basically have an object that keeps our

1632
01:23:44.300 --> 01:23:45.000
shared secrets.

1633
01:23:46.200 --> 01:23:49.900
For different domains just for caching. So we don't have to get the

1634
01:23:49.900 --> 01:23:52.600
public key all the time every time

1635
01:23:52.600 --> 01:23:55.900
and then we are getting their

1636
01:23:55.900 --> 01:23:59.500
public key response with a fetch call and

1637
01:23:58.500 --> 01:24:03.600
then basically converting our

1638
01:24:03.600 --> 01:24:06.100
Emoji string to a secret

1639
01:24:06.100 --> 01:24:09.400
to a wide array that we can use and then

1640
01:24:09.400 --> 01:24:12.400
we're just using get shared secret get shared

1641
01:24:12.400 --> 01:24:15.400
secret itself is part of

1642
01:24:15.400 --> 01:24:18.800
the Noble at 25519 library

1643
01:24:18.800 --> 01:24:21.600
by Paul Miller tiny cryptographic Library,

1644
01:24:21.600 --> 01:24:24.400
so I didn't roll my own encryption, which is

1645
01:24:24.400 --> 01:24:27.600
very important. Don't do that. There are you know

1646
01:24:27.600 --> 01:24:30.600
auditable libraries like this very very

1647
01:24:30.600 --> 01:24:34.600
small multiple libraries that you can use. So

1648
01:24:33.600 --> 01:24:35.400
that's where

1649
01:24:36.500 --> 01:24:39.700
That yes, so that's it. Really we

1650
01:24:39.700 --> 01:24:42.100
will go to any more detail on that. You can

1651
01:24:42.100 --> 01:24:45.100
look into the noble Library Etc if you

1652
01:24:45.100 --> 01:24:49.100
want more details on that and

1653
01:24:51.300 --> 01:24:53.200
let me just this.

1654
01:24:54.100 --> 01:24:55.300
Okay, so

1655
01:24:58.200 --> 01:25:01.200
let me just see where my that was kitten. Okay,

1656
01:25:01.200 --> 01:25:01.600
right.

1657
01:25:02.700 --> 01:25:05.300
So the end to end encrypted charts example,

1658
01:25:05.300 --> 01:25:08.300
we're back there and I think we've covered everything we basically

1659
01:25:09.500 --> 01:25:12.500
Yeah, we've covered everything. These are the same the message

1660
01:25:12.500 --> 01:25:15.700
component. We saw status indicator hasn't changed to check socket.

1661
01:25:15.700 --> 01:25:18.400
We saw we saw that the encrypt message in secret messenger

1662
01:25:18.400 --> 01:25:21.900
there. We saw the page. That's it. So we know how

1663
01:25:21.900 --> 01:25:24.100
old this is. So what does it look like

1664
01:25:24.100 --> 01:25:25.800
when we run it? Let's do that.

1665
01:25:26.600 --> 01:25:29.500
So we're already running a place one Local Host.

1666
01:25:29.500 --> 01:25:31.900
That's great. Let's keep that there.

1667
01:25:32.900 --> 01:25:36.400
I'm going to run another

1668
01:25:35.400 --> 01:25:38.100
one. So let me go

1669
01:25:38.100 --> 01:25:42.400
to end and I'll say

1670
01:25:42.400 --> 01:25:46.300
kitten domain equals. Let's

1671
01:25:45.300 --> 01:25:48.500
do place two local hosts, but

1672
01:25:48.500 --> 01:25:51.500
I also have to specify a different port so I'll

1673
01:25:51.500 --> 01:25:54.200
say Port 444. Okay, so that's generating a

1674
01:25:54.200 --> 01:25:54.800
secret as well.

1675
01:25:55.500 --> 01:25:58.600
so I'll just note that secret down in my

1676
01:25:59.600 --> 01:26:02.100
little whoa. What is that

1677
01:26:02.100 --> 01:26:03.800
escape? That's not what I wanted to do.

1678
01:26:04.800 --> 01:26:07.100
Is not what I wanted to do, there we go. All right, so

1679
01:26:08.200 --> 01:26:11.200
Let's get rid of this one. We don't need it anymore. This is our place one. This is

1680
01:26:11.200 --> 01:26:12.800
our place to Secrets. Okay?

1681
01:26:13.900 --> 01:26:16.400
And we'll keep that there. So now

1682
01:26:16.400 --> 01:26:19.800
what I'm going to do is open to web browsers again, it's all

1683
01:26:19.800 --> 01:26:20.800
about the two web browsers.

1684
01:26:22.200 --> 01:26:24.900
And one I'm going to go to place one Local Host.

1685
01:26:25.900 --> 01:26:28.600
And I'll sign in with my

1686
01:26:28.600 --> 01:26:32.800
first secret how many

1687
01:26:32.800 --> 01:26:36.800
things can go wrong right now? Yay. Okay

1688
01:26:35.800 --> 01:26:38.400
and 10 encrypted kitten

1689
01:26:38.400 --> 01:26:41.100
chat. It's online no messages yet. Perfect.

1690
01:26:41.900 --> 01:26:45.000
Now we'll open up another web

1691
01:26:44.500 --> 01:26:45.700
browser window.

1692
01:26:47.300 --> 01:26:50.500
Over here and we'll go to place two dot

1693
01:26:50.500 --> 01:26:52.400
localhost. Colon. 444

1694
01:26:53.100 --> 01:26:56.700
and actually to the private route there so that helped there and

1695
01:26:56.700 --> 01:26:58.400
I'm going to use my

1696
01:26:59.900 --> 01:27:02.400
very basic password manager here to

1697
01:27:02.400 --> 01:27:05.100
enter my password there. All right, let's get rid of

1698
01:27:05.100 --> 01:27:05.600
the passwords.

1699
01:27:06.500 --> 01:27:11.300
Huh? So we have two two instances

1700
01:27:10.300 --> 01:27:12.400
of our application running.

1701
01:27:13.300 --> 01:27:16.200
So let's try and send something. So I'm going to try and send the message

1702
01:27:16.200 --> 01:27:19.500
to place two dot localhost 444 now normally

1703
01:27:19.500 --> 01:27:22.100
this would be a domain so you'd be saying I want to send it to a roll because

1704
01:27:22.100 --> 01:27:26.000
that's where it's running right or I want to send it to Laura calbag.com. We're

1705
01:27:25.200 --> 01:27:28.800
testing it locally. Okay,

1706
01:27:28.800 --> 01:27:31.800
so we're gonna say place to thought localhost

1707
01:27:31.800 --> 01:27:32.600
444

1708
01:27:34.200 --> 01:27:37.400
And as my message, I put two dots yeah as I

1709
01:27:37.400 --> 01:27:38.700
message. I'm going to say hello.

1710
01:27:40.200 --> 01:27:40.700
I'm gonna send it.

1711
01:27:41.700 --> 01:27:44.300
And look it's command did you see that? There was

1712
01:27:44.300 --> 01:27:47.400
a little flash as well there. Well, it was being oh

1713
01:27:47.400 --> 01:27:50.300
go away. What are you don't go away too much.

1714
01:27:50.300 --> 01:27:53.200
I think you're the server. There's a little Flash

1715
01:27:53.200 --> 01:27:58.100
and it's decrypted. So that's pretty

1716
01:27:58.100 --> 01:28:02.600
good. So let's just do the reverse from here to place

1717
01:28:01.600 --> 01:28:04.000
one dot localhost.

1718
01:28:07.300 --> 01:28:07.800
It works.

1719
01:28:09.500 --> 01:28:10.100
woot

1720
01:28:12.900 --> 01:28:15.400
and there we go. Hey, it works woot and

1721
01:28:15.400 --> 01:28:19.800
come in over there. So if we

1722
01:28:19.800 --> 01:28:22.700
of course look at the

1723
01:28:24.900 --> 01:28:26.700
Let's see where my my terminal.

1724
01:28:28.700 --> 01:28:29.600
There we go. I think.

1725
01:28:30.600 --> 01:28:34.000
Think we can shut it down. Now. You've seen it working. Let me

1726
01:28:33.100 --> 01:28:36.400
just open one terminal window. It's easier.

1727
01:28:36.400 --> 01:28:37.300
There we go.

1728
01:28:39.500 --> 01:28:42.600
If we look at the databases again, so let

1729
01:28:42.600 --> 01:28:45.700
me just look at databases.

1730
01:28:46.700 --> 01:28:50.300
And this is projects kitten. Let's

1731
01:28:49.300 --> 01:28:52.700
see and and decrypted. Okay,

1732
01:28:52.700 --> 01:28:55.700
so let's look at the one for our antenna kitten.

1733
01:28:58.300 --> 01:29:01.100
Let's see. Which one this is. Wait. Yeah, and there we

1734
01:29:01.100 --> 01:29:04.800
go. You can see that what's here? Sorry for

1735
01:29:04.800 --> 01:29:07.400
this. It's I think my green screen

1736
01:29:07.400 --> 01:29:10.600
is not holding up. Let me just see if I can change the key

1737
01:29:10.600 --> 01:29:11.500
Edge and make it a bit better.

1738
01:29:12.600 --> 01:29:13.900
Nope, that's not helping.

1739
01:29:15.100 --> 01:29:18.200
Maybe the background to do no, that's

1740
01:29:18.200 --> 01:29:21.200
not healthy the foreground. Ah, there we

1741
01:29:21.200 --> 01:29:21.800
go. That's a bit better.

1742
01:29:23.700 --> 01:29:25.900
No, is it better? I don't know. It's gotten rid of.

1743
01:29:27.300 --> 01:29:28.600
A lot of the color there, though.

1744
01:29:29.600 --> 01:29:31.100
Maybe the key no, no.

1745
01:29:31.800 --> 01:29:34.500
Real time green screening here people. It's amazing.

1746
01:29:35.700 --> 01:29:39.500
Things you get from these streams like okay. Let's

1747
01:29:38.500 --> 01:29:41.300
screw it. I think we're just gonna have to live with a

1748
01:29:41.300 --> 01:29:41.500
little bit of

1749
01:29:43.800 --> 01:29:46.700
you know us that was whoa. Oh, that's

1750
01:29:46.700 --> 01:29:49.900
my that's that's my switcher. That's what I was using I

1751
01:29:49.900 --> 01:29:50.300
go away.

1752
01:29:51.100 --> 01:29:54.700
Go away. It's all going wrong. Anyway, so here you

1753
01:29:54.700 --> 01:29:57.400
can see that it's a ciphertext that's being

1754
01:29:57.400 --> 01:30:00.600
saved in the database.

1755
01:30:01.300 --> 01:30:04.300
And there you go and to end encrypted to

1756
01:30:04.300 --> 01:30:08.000
peer to peer small web application basic

1757
01:30:07.400 --> 01:30:10.300
example, but this is

1758
01:30:10.300 --> 01:30:14.500
the direction that it is going. It's

1759
01:30:13.500 --> 01:30:16.300
so nice to finally be able to work on stuff

1760
01:30:16.300 --> 01:30:20.100
like this is a lot to do there's a lot I need to do you saw

1761
01:30:19.100 --> 01:30:22.600
that remote message emitter, you saw the inbox. Those

1762
01:30:22.600 --> 01:30:25.700
are going to be moved in but implemented in

1763
01:30:25.700 --> 01:30:28.700
a production ready manner in kids

1764
01:30:28.700 --> 01:30:31.700
in itself. So any kidnap will be able to use those. There's

1765
01:30:31.700 --> 01:30:32.500
also going to be

1766
01:30:34.300 --> 01:30:38.000
For public messages, you'll be able to make websocket connections

1767
01:30:37.400 --> 01:30:40.500
and get public messages that

1768
01:30:40.500 --> 01:30:43.600
way as well between notes for following basic.

1769
01:30:43.600 --> 01:30:46.500
That's how following is going to work. So and these are slowly I'm

1770
01:30:46.500 --> 01:30:50.100
adding these slowly to an emergent

1771
01:30:49.100 --> 01:30:52.800
sort of a small web protocol. So

1772
01:30:52.800 --> 01:30:54.700
let me see if there are any comments done.

1773
01:30:57.700 --> 01:31:00.200
Um our case says love it kind of scared of all the

1774
01:31:00.200 --> 01:31:03.300
corner cases. I'm sure I am too. I know

1775
01:31:03.300 --> 01:31:06.200
Corner case of the bane of Matrix element, but at least your use case of some

1776
01:31:06.200 --> 01:31:09.500
well, that's the thing right? It's about simplicity. So,

1777
01:31:09.500 --> 01:31:12.300
you know, if there is if there

1778
01:31:12.300 --> 01:31:15.600
is an issue, it's gonna be very apparent.

1779
01:31:15.600 --> 01:31:18.700
It's gonna be very clear because like there's so

1780
01:31:18.700 --> 01:31:21.200
little code and that way we can actually

1781
01:31:21.200 --> 01:31:24.200
you know, and that's true for security in general as well. The less

1782
01:31:24.200 --> 01:31:28.200
code the better. So Ben at

1783
01:31:27.200 --> 01:31:30.900
Mastodon dot bits -unt

1784
01:31:32.900 --> 01:31:35.600
- baume.org says so

1785
01:31:35.600 --> 01:31:38.400
my client connects to the other party's kitten to

1786
01:31:38.400 --> 01:31:41.400
communicate. Yeah, so to the other party's app made with

1787
01:31:41.400 --> 01:31:44.600
kitten if the app is a peer-to-peer app, like we just created

1788
01:31:44.600 --> 01:31:47.500
so part of what I'm trying to do is kind

1789
01:31:47.500 --> 01:31:50.900
of share every piece of what I'm building. So

1790
01:31:50.900 --> 01:31:53.400
all the way to you know, what does the

1791
01:31:53.400 --> 01:31:56.300
automatic Local Host certificates handling the

1792
01:31:56.300 --> 01:31:59.700
automatic, you know, let's encrypt certificate

1793
01:31:59.700 --> 01:32:03.500
handling. Those are all different packages. You can use those you

1794
01:32:02.500 --> 01:32:05.700
can use kitten to build different apps.

1795
01:32:05.700 --> 01:32:08.900
So I'm going to be using kitten to build my kind

1796
01:32:08.900 --> 01:32:11.000
of app for being public and private on

1797
01:32:11.300 --> 01:32:15.200
the web which I'll probably call someone like place and

1798
01:32:14.200 --> 01:32:18.600
people will be able to one place where you'll

1799
01:32:18.600 --> 01:32:21.500
be able to do like private chats like this and then post public

1800
01:32:21.500 --> 01:32:24.400
things and people will be able to follow you but other people

1801
01:32:24.400 --> 01:32:26.100
will be able to build other apps.

1802
01:32:26.800 --> 01:32:29.300
And I think so. That's what's interesting to me

1803
01:32:29.300 --> 01:32:32.700
keeping a very very simple protocol very extensible protocol

1804
01:32:32.700 --> 01:32:35.500
at its heart a very simple way to be private

1805
01:32:35.500 --> 01:32:38.100
a very simple way to be public for people to be

1806
01:32:38.100 --> 01:32:41.600
able to follow your public posts, the fundamental assumption

1807
01:32:41.600 --> 01:32:44.400
that all of it ties down to is that we will all run

1808
01:32:44.400 --> 01:32:47.100
our own servers and then of course the question is how do

1809
01:32:47.100 --> 01:32:50.200
we make that process as simple as possible? And that's where domain comes

1810
01:32:50.200 --> 01:32:53.400
into it which is a hosting tool that

1811
01:32:53.400 --> 01:32:56.300
I'm building so that anyone can become a small web host

1812
01:32:56.300 --> 01:32:59.900
and host people on vps's with a

1813
01:32:59.900 --> 01:33:02.300
30 second 40 second process for actually getting

1814
01:33:02.300 --> 01:33:04.400
set up that requires. No technical knowledge.

1815
01:33:05.200 --> 01:33:08.300
That's itself being written in kitten. And now that I've gotten some

1816
01:33:08.300 --> 01:33:10.300
of these things out of the way. I'm going to focus on that again.

1817
01:33:11.400 --> 01:33:14.500
Does that mean every kidnap needs a different address Port every

1818
01:33:14.500 --> 01:33:17.400
kidnap when deployed is meant to be deployed at

1819
01:33:17.400 --> 01:33:17.900
a different domain?

1820
01:33:18.600 --> 01:33:21.700
So yeah, so the the level

1821
01:33:21.700 --> 01:33:24.600
where I see them being deployed is a very small

1822
01:33:24.600 --> 01:33:27.200
vps's or tiny little

1823
01:33:27.200 --> 01:33:30.200
tiny little single board

1824
01:33:30.200 --> 01:33:31.100
computers at home.

1825
01:33:31.700 --> 01:33:34.700
If people want, you know more control over it.

1826
01:33:35.600 --> 01:33:37.300
So I hope that makes sense.

1827
01:33:38.300 --> 01:33:39.200
But that's the model.

1828
01:33:40.400 --> 01:33:44.400
So we're going with like radical Simplicity. We're going

1829
01:33:44.400 --> 01:33:48.900
with because I think that's our advantage as

1830
01:33:48.900 --> 01:33:49.800
well. That's you know.

1831
01:33:50.900 --> 01:33:53.900
Complexity is Big text Advantage because

1832
01:33:53.900 --> 01:33:55.800
of the barrier of Entry.

1833
01:33:56.400 --> 01:33:59.900
Both monetarily and in terms of effort Etc.

1834
01:33:59.900 --> 01:34:02.000
So we're the opposite of

1835
01:34:02.200 --> 01:34:05.700
big Tech with the opposite of big web. So we Embrace simplicity.

1836
01:34:06.600 --> 01:34:09.200
And oh cool. Yes makes total sense to

1837
01:34:09.200 --> 01:34:10.000
me. Sounds great. Awesome.

1838
01:34:11.700 --> 01:34:15.300
Folks I'm not even going to give out the studio URL because

1839
01:34:14.300 --> 01:34:17.000
at this point it's been an hour and a half

1840
01:34:17.800 --> 01:34:20.300
and I hope

1841
01:34:20.300 --> 01:34:23.100
you found it interesting. I hope you found it useful. This is very

1842
01:34:23.100 --> 01:34:27.100
new like I got this example working this week like two

1843
01:34:26.100 --> 01:34:30.300
days ago or something and so

1844
01:34:29.300 --> 01:34:32.600
kitten is very rapidly evolving.

1845
01:34:33.500 --> 01:34:35.600
full small web protocol spec when when

1846
01:34:36.900 --> 01:34:39.700
No, you can our Causeway or arcades are

1847
01:34:39.700 --> 01:34:42.400
causing you can you can build stuff

1848
01:34:42.400 --> 01:34:45.200
with it now just play with it. If you

1849
01:34:45.200 --> 01:34:48.400
want to the full spec. I don't

1850
01:34:48.400 --> 01:34:50.900
know. It's not going to be a very full spec.

1851
01:34:52.400 --> 01:34:55.200
It's an evolve. It's going to be an evolving spec like the spec right

1852
01:34:55.200 --> 01:34:58.700
now has for example slash ID for getting your public key

1853
01:34:58.700 --> 01:34:59.000
from there.

1854
01:34:59.600 --> 01:35:02.300
It's gonna stay very

1855
01:35:02.300 --> 01:35:05.200
small. So it's going

1856
01:35:05.200 --> 01:35:08.000
to evolve. I want to see it evolve with usage.

1857
01:35:08.600 --> 01:35:11.300
I want the core spec to stay as small as

1858
01:35:11.300 --> 01:35:14.300
possible to be as extensible as possible. I want

1859
01:35:14.300 --> 01:35:17.200
people to create their own vocabularies. I want the

1860
01:35:17.200 --> 01:35:22.400
people who use this to create the semantics using it

1861
01:35:22.400 --> 01:35:25.400
and so it's it's not like it's

1862
01:35:25.400 --> 01:35:28.400
not going to be like an activity Pub style thing where it's this huge

1863
01:35:28.400 --> 01:35:31.100
Speck and you have to change the spec every time

1864
01:35:31.100 --> 01:35:34.800
you want to do something different with it. Now, it's the

1865
01:35:34.800 --> 01:35:38.300
opposite of that as well. So I'm

1866
01:35:37.300 --> 01:35:41.700
full spec when I have no idea watch

1867
01:35:40.700 --> 01:35:43.500
this space. I'm working

1868
01:35:43.500 --> 01:35:49.000
on this every day. This is what I'm doing and and

1869
01:35:50.400 --> 01:35:54.000
You know start playing with it. If you want. You can't

1870
01:35:53.500 --> 01:35:57.000
deploy yet the deployment stuff when

1871
01:35:56.100 --> 01:35:59.600
it does arrive is going to be like inside Jazz.

1872
01:35:59.600 --> 01:36:00.800
It's going to be fully automated.

1873
01:36:01.800 --> 01:36:05.200
So it'll be automatically updating itself automatically

1874
01:36:04.200 --> 01:36:06.600
updating applications.

1875
01:36:08.800 --> 01:36:11.500
Unlike site.js it's using git for

1876
01:36:11.500 --> 01:36:13.700
a lot of that. So yeah.

1877
01:36:14.500 --> 01:36:16.000
right

1878
01:36:16.900 --> 01:36:19.400
And I think this is a good point to leave it

1879
01:36:19.400 --> 01:36:22.100
at if no one else has any questions.

1880
01:36:24.400 --> 01:36:27.100
Yeah, waiting one to three.

1881
01:36:28.400 --> 01:36:31.500
All right, cool. You know what? Thank you so much for

1882
01:36:31.500 --> 01:36:34.500
joining. Thank you so much for your questions. I'm sorry.

1883
01:36:34.500 --> 01:36:37.400
I wasn't able to give out the studio URL and have anyone like, you

1884
01:36:37.400 --> 01:36:40.200
know on video chat to ask questions or whatever. It's just

1885
01:36:40.200 --> 01:36:43.400
been a very long stream, but I think we covered

1886
01:36:43.400 --> 01:36:47.900
a lot. You're very welcome Ben Harold. Thank

1887
01:36:47.900 --> 01:36:50.600
you so much. And if

1888
01:36:50.600 --> 01:36:53.300
you guys have any questions, thank you

1889
01:36:53.300 --> 01:36:57.900
our God say if you have any questions, I'm on

1890
01:36:57.900 --> 01:37:01.600
Mastodon. Mastodon.ar.a.l.

1891
01:37:02.400 --> 01:37:06.300
Feel free to hit me up there or you

1892
01:37:05.300 --> 01:37:08.500
know, I don't know if a cowork

1893
01:37:08.500 --> 01:37:12.200
doesn't have discussions does it now? Oh, yeah, you

1894
01:37:11.200 --> 01:37:14.100
know, you can find me that find me on on the

1895
01:37:14.100 --> 01:37:18.500
fatty verse and thank you so much for joining and I

1896
01:37:17.500 --> 01:37:21.200
will see you next month

1897
01:37:20.200 --> 01:37:23.400
at on smallest beautiful if

1898
01:37:23.400 --> 01:37:24.000
not before.

1899
01:37:25.200 --> 01:37:27.400
Take care of yourselves, bye-bye.

1900
01:37:34.900 --> 01:37:36.300
And where

1901
01:37:40.100 --> 01:37:43.100
no, we're not because there's a confirmation and where