Hello and welcome to small is beautiful.
I'm Aral Balkan
And I am Laura Kalbag and together, we are Small
Technology Foundation, a teeny tiny
not for profit organization based here
in Kilkenny and Ireland.
Yep, and I even got the little label thing to come up on time
this time. And this is a
live stream that we do every third
Thursday of the month unless you
know, we're doing something else I guess, um,
but that we've been doing for several years now, I think
and I guess
the ones of late have involved me
speaking about where I
am with development of the small web and
kitten the platform
that I'm building the
For the small web and domain the
hosting site for web
hosts to host small websites that I'm
going to be building with kitten if I ever, you know, stop working
on kitten itself and adding more features to it. So no
different today.
Well, I'm I'm here today. Well, yes,
of course. Yes, and I
I have not got much
to share. I am very much behind the
scenes zing in a small
Tech nowadays well and but
you didn't make in the monies, there you
go so that I can concentrate on what I'm doing which is huge. So yeah.
Let's see who is in the
chat. Shall we before we get going? Let's just
see.
Let's bring up the chat here.
And all right. Here we
go.
Determine those. All right, you guys can change
those names. By the way, if you want to I think you have to like click
on them or something in the interface. It's not entire you can
there's change use name at the top of
the screen. All right kind of black text on
a gray background. So it's pretty true. Yeah, but if
you can sleep it out.
Hi, zenzie. Hi our Kaze. It's have
you back Andrew Chow. Hello. Good to
have you all there now. So what I'm
gonna do today, let me
just take us back here. What I'm
going to do today is take you
through building kind of a fake blog page
because we have markdown support now in kitten
very new very very new
it has I just discovered one rough
Edge, which means that I'm Gonna Change how it works in the
next few days, but I'll demonstrate
what there is right now.
And then adding comments to it.
So Dynamic comments to it and to kind
of see how simple that is and that's also going to demonstrate all the
new stuff that I've added to kitten in the last month since the last
stream.
Which basically includes an HTML
validator we have?
Oh Bjorn says unfortunately your stream is starting just when I
need to prepare dinner. Well Bjorn, it's recorded will release
the recording. So don't worry Bon Appetit have
a lovely dinner enjoy and you
can watch this anytime. So don't worry about it suck on
a train says hi. I'm sorry, you're stuck on a train. Glad you have
an instant connection. That's good modern times a
so, we have
a new HTML validator that's built in and so
I'll show that to you we have
New conditional syntax, the HTML renderer
is much more forgiving now.
So I'll take you through all of this, but let's just do it as
An exercise in building something with kitten from scratch because
I also want you know, those of you who are not familiar with it. It's
kind of see that and Laura as I'm doing this if
you want to at any point step in with like, you know,
I don't know comments on the markup
or css or whatever. All these
areas are your Forte, so please very kind reason,
you know you
Fight me.
Will do it anyway.
Alright, perfect. I'm Gonna Keep it very
simple.
I'm Gonna Keep it very simple, but and you
can follow along. So how can you
follow along if you want to follow along and if things
like this will be really useful for me as well because of course kitten
is still very much pre-release very much in development.
So if you do follow along
you try to install it and it blows up. Please open
an issue and that will really help
me or let me know in the chat or ask some questions as we're
going along. So let's just build this very simple thing. So, how
do we start? I'm gonna just put myself full screen
here and let's get rid of
the chat. Goodbye chat. And what
would you do if you wanted to
start? So let's just go from the beginning. So
this is my browser. I'm gonna go to codeberg.org forward
slash kitten forward
slash app.
So that's codeburg.org forward slash kitten forward
slash app.
And that will take you to kittens website
here.
and if you scroll down
on the readme
You'll see that they're ways to install it if
you trust me you can pipe it
to your shell.
If you don't trust me, you can view the script source
as well to verify it's not doing anything horrendous. I
guess you have to trust codeburg as well in this
case. And if you
don't trust me, you can just clone the repository and then
run the install script. But so I'll
do it too here so that we're running the
exact same version of it because I did push the development
build. Let me just make double sure that
I did that.
I'm just doing a git status on another thing here.
That's fine. Yep. Perfect.
Yep. Everything's been pushed.
So we'll be working with the same.
Version of it. So I'll do the same thing. So I'll just
do it right. I'll do the W get one and just make sure that
it's working as well. So I'm just going to bring up my terminal
here.
And I'm just going to paste that in there, right? So
now it's installing kitten. Oh
There we go. It didn't work. What is
this file format not recognized childhood
error is not recoverable exiting now how very
very interesting? Okay. So
the installer doesn't work for me. Apparently, I
did not rehearse this before doing it.
So I will file an issue on that. That's
very very odd. Oh,
Okay. All right. I wonder what okay, fall format
not recognized.
This is interesting because this would normally
happen if there was something odd with
the node.js runtime binary, I think.
hmm anyone else does anyone else try this and are
you getting
Getting the same sort of issue. Let me just see what the comments are
saying.
Let's bring the comments on this is why we don't do live demos
kids. Yeah. No, this is why we normally rehearse the
live demos, which I did I just didn't do
this bit because I didn't think I was going to even if you rehearsed
it things will always go wrong. It's just how it
is. It's one of the ways in which we debug and test
what we've built
Yeah, exactly. Exactly. So, okay,
you're getting a what kind
of files that attempt. It's the it's the runtime
I believe ozoned so I don't know what's happening
there. I didn't think I'd
changed anything. But okay, so all right.
Let's say that we have an issue with that because we
do so instead. What would we do you do
the other thing that I said you could do but the
other thing you need note which is a it's a little messed up. But anyway,
so normally this is how it would work. I
wonder if it is actually let
me just take a quick look at this.
I don't want to waste time with this because I want to show you this stuff
that that's there because I'll fix this issue whatever it is, but just want
to make sure it's not a curlish. Sorry would W
get issue on my thing?
No, it's exactly the same thing. I'm not
going to debug this live on air
right now, but
Yeah, so but I do I do want you
guys to be able to follow along here. Let me
just see let me just see something. Give me one second day book day
book day bucket. Come on
guys. I'm says I personally love seeing these hiccups
without editing it out as it proves. Even the most brilliant
folks are human.
And you know, I'm pretty f****** far from
the most brilliant. So explains everything.
Okay? Yeah, this
is something to do with the runtime issue
with the runtime the node
runtime. I don't know what's happening with it
does sound like the kind
of thing that
might be related to network conditions or
something with with or something's changed on Note side
maybe because I haven't touched that side of the installer
for ages. So I am
gonna debug that later. If you do want
to if you have node installed right now, what you can
do is just clone it and then run
the install script, but I'm just going to show you now the
I'm going to show you how it works.
We have it installed. So if you have it installed you can
just do a kitten dash dash version. For
example.
Oh, of course because it's messed up my okay. Sorry, it's
messed up my
so this is my version of kitten now. I'm just doing an
What?
Okay.
What?
Alright, so this is affecting the
regular installer as well.
All right. This is going to be an interesting demo. So
let's see what's going on.
okay, so this is where we have the
okay, this is the runtime URL so
Let's just Echo that runtime URL
and see what's
happening debugging bash always
fun.
Let's do this.
What's going on? Okay. So this is the this
is what it's trying to get.
Let's see what there is there.
Let's open that.
Sorry control. Is it opening in there?
Go let's open this.
All right.
West term let's do it manually.
Let's get the web browser on there.
Page could not be found.
Okay.
18.13.00. I
mean, that'll do it.
16 there have they changed their has no
change there.
Let's see. Oh, sorry. Let's
start
okay.
Let's see what the URL is. I mean this isn't rocket
science. It's just the URL is not there where
it used to be. Okay. So,
let's see what we're looking for runtime prefix runtime version.
What were we looking for?
Oh, why is there a dist there?
Is that now? Okay.
All right. So now there was a disc. Okay, so let me just take this
test.
Okay, let me see what I'm looking for here just off the
side. Sorry. This is riveting. I know.
V18. Let's see the
Is it in the top here? Yep, there we go.
V18 13
Point O. Yep, that's what we're looking
for.
node Dash v18
13.0 -
Linux
Dash x64 -tar
Sorry dot tar dot QC.
Oh, yes. Well.
Notes downloads are down.
Oh.
All right. Does anyone know anyone at
at node because it's
really not my my
problem here. This is not on my
end.
f****** hell. Okay. Well the note binaries are
down.
And that is the problem and
because I've screwed up
my local one. I'm not going to be able to show it
either.
I signed has got a working on
their computer and said that they can screen
share if you want wait ozone has
so you're the install worked for for you?
It would okay that way. Let's see. Let's see. Let me
just bring up the the chat.
Oh, that's interesting. Okay, and it seems
like other people aren't having the issue. It might be.
Maybe local to you somehow.
So wait. All right, then this is what we do.
Let's debug it further fun times.
It's it is nice when it's not on your end, though.
So let's go to
this
Down for everyone or just me, I guess does that
I wonder if that does like well guess it must do a full
URL. Does it just do?
It's just you. Okay, it's just it's looking at node.js. Alright,
that's not going to work.
Okay.
That was a technical comment, by
the way. Okay, maybe it'll work
now. I mean, maybe it was a temporary glitch. I don't
know. Let's see go back into the web
browser. Okay. This is shed URL that
you could try that worked for them.
Okay. Yeah, so what's the URL? Let's take
a look. I'm not reading it. You have to copy it.
Yeah. Yeah. No, I'm gonna try and see where is it.
It's in them it go down. It's the
because the URLs are white. It's not showing in their
message. But if you select it will that up?
Up down down.
I'm sorry down down scroll down
stop. I am you see where it says. No, stop.
You set the top where it says. Can you just try this URL Works
select on right?
This is all part of the Magical Mystery
treasure hunt that we're on.
Yes, okay. So, let's see if this URL works.
It looks like it is working. I can't
see the URL. So I'm just going to copy it.
fun times people
Okay dissed. All right,
so that's for 18.15.0.
And let me see if that works for me in
the browser as well. So I'm just going to put it in here.
Yeah, that's downloading.
Okay, so let me see if 16 works
for me.
No page cannot be found. So some of them are
not working. So 18 is apparently working. So here's what
I'll do.
Let me just
change the runtime version in kitten to use 15.
Okay, and let me quit.
Get the status.
Okay, let me just get dipped that install make sure
that's the only thing I changed let's add that install script.
Let's commit it.
Update node runtime version to
18.15 point. Oh
Let's push that.
All right, and now it should hopefully work for me as well. Let me
just try that again. All right, so let's bring
up the terminal.
over here
and let me quit here.
All right, so I'll go into my demo
directory again.
I'll go to demo clear and I'll just
run it run what I was originally supposed to do. So, let me
bring up my web browser. Go to codebook.org kitten.
And now that I pushed the latest install, there you
go that has node 18.15 now that seems
the URL seems to be working for that and then I'll
just copy my so this is what you do you get your let's go back here. Yay.
You get your W gets and
terminal you paste it in.
And there we go, it works
kittens installed. Yay. I
just want to say a big thank you
to was it ozone? Yeah, there
we go. I'm on. Okay. Well,
yeah.
Huh?
Sorry that case as well and our
case. Thank you so much for working that through with me. I I mean
it clearly was, you know
something to do with with the site. I just didn't think that
the binaries on node would be.
For a foreign but yeah, if anyone from
node is watching your binary. Some of them are down.
All right, so let's get back.
So you've installed kitten yay. We have
kitten installed. I'm bringing Laura back for
a reaction shot. Yay. It worked.
It wasn't even on my end. That's so
rare. It's always on my end. It's always
me who screwed up. It's like the one time where it's like
not me cool. Love it. All right,
so going back to me. All
right, so we've installed kitten that's how simple
it was. So I'm just gonna create a directory here.
And we'll call it like blog or something and I'm
gonna go into my blog and I'm
going to there's nothing in
there. Right? We don't do things on the
small web and with kitten where we like have scaffolding
and things are generated and then suddenly your project starts with 35
files and every we don't do that. No. No, um,
so we start with an empty slate and let's
create a page, right?
So we're gonna just make a mock block. We're not
gonna build a whole blog. Let's just say that we have a page. I'll show you the markdown
stuff with that.
So I'm just going to touch index.page which will
create it.
And then I'm going to run my editor Helix
editor on the current directory and
let me open up that page
now. There's nothing there right now. Okay,
but let's do this. I
just split my pain and I'm
gonna run kitten there. Okay, and let's see what happens. So
when it's first running it is generating
a secret.
Uh, so kitten apps have each
app is meant to be deployed on
one domain and belong to one person and this is your secret for
being able to sign in ETC and and I
did authentication. I covered authentication in
previous stream. So I'm not going to right now. You can look at the documentation about
that right now. We don't have to worry about it. It's just the
first time it runs. It takes a little longer because it does that in death.
So, okay.
So kitten is running.
And I'm going to bring up my web browser and
let's go over there and just see what happens. Okay?
So every every secret tells a story
says ozone. Yes, so we're
gonna go to localhost and we get an error, right? So
this error page is new
from today when I was built doing the
demo like initially preparing for it. It used
to be really horrible. But now it tells you exactly what's happening.
So we have nothing so it's saying the page
route is missing a Handler. Please ensure your
exporting and default function from your page for example, export
defaults and there's an anonymous
function being exported that returns some HTML that's
about page right in kittens.
So this is just the rest of the stack Trace there. Okay,
so we need to do that to begin. So
that's always a good thing to do.
To you know, kind of lead people through not
just say hey something went wrong, but here's how you can fix it.
So that's what we're gonna do. We're gonna start our
page. So I'll say export.
default
and we don't like we can
do this in in full form.
Requests response just make
it a full function like this and then
we have full access to the request and response objects as well for
this very very basic example, we
don't need to do that so I can just say export
default. Let's make a bit bigger. I can
say export default and I don't really
care about any of those things and right now let's just
say we're gonna, you know, return some markdown.
so this is new this ability to
just use a markdown function is new so I
can just say like
my blog
for example, that is something that I can do
and I can
Sorry, just give me one second. There we
go. All right, I can just say by my
blog or my lovely blog.
Yeah, and I can write you
know, right lots of interesting things.
Okay, let's just see what that looks like. So by save this
and I bring up my web browser
here. Well, you got my lovely blog and lots
of interesting things. So this is markdown, right?
So I'm just writing markdown but
really and you
can just and there's lots of stuff that you can lots of things you
can do with the markdown support in it. So
let me show you some of those things you can do, of
course, you know regular things that are not a lot
of
I'm not crazy. Like, you know, I know this is a list.
You can do that with any markdown.
Support and anything. So there we
go. This is a list but we have
quite comprehensive support. So for
example, let's say I want to display from my
blog I have
My little headshots at the bottom here. Where is it?
There we go. Let's get the
Let's get the image URL for
that.
Just going to copy that and go back
to the blog preview here and here remember markdown
is space sensitive so
whitespace sensitive so you need to actually make sure you're indentations
are correct notice that
what you didn't have to do what it does
automatically intelligently is it does take your
first your initial indent into consideration there.
So here I can just use
I can just add an image.
My let's say I don't know why it's
passing guy.
In close up and that's the
alt text and then I'll just oops I'll
just add the URL there and if
I go over here, you'll see that my mug
is over there my ugly
mug. However, if we
look at let me just inspect that
in the inspector and Dev tools if can
I make this larger as well. There we go.
If I show you that it's actually created a figure so
it's not just putting the image in there. Okay. So what
I can do here is I can also for one
thing. All right, here's the thing. So we have time I have
so little space to work with here, right because I'm
broadcasting. It's a 1080p. So let's
make this smaller. How would we make this smaller? So
this is where it gets interesting. Okay, let's say I want to
you know, kind of limit the size of that image. Here's where
it gets interesting what I can do.
Is instead of markdown, I can just
return HTML as usual.
And I can just wrap my markdown section.
in a markdown tag
Okay.
And what that means is I can also very easily do
HTML style stuff, right? So
let's just add some Styles in there.
So let's get that figure that we have and make
it with maybe a hundred
percent and let's see
what happens if we do that.
go, okay, maybe a
hundred percent is let's actually give it a
let's say I don't know 20m. I
want to make it tiny so that we have more space to
work with now the figure has an image inside of it, of course.
So let's make that image take up a hundred percent so that
it will actually scale to the size of
the figure and then there we
go. That's a bit smaller. I want to make this even smaller so that
we have space to work with there. I am tiny perfect.
So what I'm going to do now is show you
captions.
It's a me Mario.
Say no if it's a raw actually, there we go. And if
I save this now, you'll see
that we get a figure caption there. That's kind of cool. So,
of course
I can similarly like just add my
style here. I can say
figure sorry fig caption
always gets me that one and I'll
say maybe text a line Center.
Save that there we go text. The line
is Center here. So basically you
can embed markdown in HTML
you can use that markdown tag as well. And then you could
put HTML in there too. This I
think is just a bit more semantic for me. So I quite
like that. What else can you do? Well, here's
one nice thing about the markdown. So remember
that this is all JavaScript. So
this is a tag template in
JavaScript, right? So it's
it's bounded by backticks.
Now unfortunately in markdown if I wanted to add code this is
what I would have to do right? I'd need to escape it.
So that's quite ugly for one thing. But let's just do it. Let's
just do it for now. And let's add some JavaScript code that
we want to display. Okay again, we need to do this for. All right,
great. That's wow. That's I'm already tired.
So let me write something. I don't
know. It's functions say message and
And I'll say console log message. Okay?
So, let's see what that looks like. We've added some code.
And you can see here that it's
it's at the bottom here. So let me just add some.
empty lines marked down so
go we'll get some space. I'll add a bit more.
Go just so you can see it on my screen so
I can scroll up. All right. So in fact
that didn't do anything, doesn't it? Let's okay. Let's
just get rid of that. It's fine. What I
can do is I'll just
keep it here. It's fine. You can see it. So let's make
that a bit bigger. So do you guys can see it better? So let's
say prefont size one.
2ms that can be huge. It's going to be huge is not.
Okay, there we go. There's there it
is. And but this
this is this is hard to write right look at I
mean, this is ugly you can do it. It's fine. I've seen
her the firmware Frameworks that use Tag templates and that's kind
of what people do but you can also do this. So instead
of that.
Let's just write code.
and here
so I just added this today because I was like,
I'm not there's no way I'm just gonna write that like escaped thing.
And what happens is the same thing, right? That's all
that happens. You can
also do this which is a bit nicer.
So if you're going to actually specify what the languages you
can just put it inside of the code. So this is just a little
extension that you can use
when offering to make your offering better. Now the reason
we normally put
Like we specify the language is
because we want syntax highlighting.
Right, and we actually have syntax highlighting.
We're just not using it right now.
So what you can do in your roots
is you can just return the HTML.
With markdown embedded and that's fine.
But what you can also do is you can return an object.
So let's do that. Let's return an object with
The markup okay, which could have
just been marked down as well as attack template instead of HTML if
you wanted to be.
And let me just close that there.
but also we can return
we can have other properties on
this object that we return one of
them is the
syntax highlighting theme
so if I say for example, the syntax highlighting team
is
ah a 11 y
light over
here.
And I saved this.
Then you can see that we get syntax highlighting for that code. Now
if I want for example to use
the alley Dark theme, I just changed that
over there and my pages using the
alley Dark theme now.
So what is
this? Where is this coming from? This is highlight Js.
So it has built-in support for highlight JS
in the markdown.
And as you can see, they have 248 I think
that's out of date because I think they're 250 themes. So
let's go see those
themes. Let's go to Here There
we go. See all these themes on this
side. Well, you can use any of them the they're
all built in basically. So let's
say you wanted to use base 16
Italy a dune or whatever you would
just basically
select that if it's in a
directory like this, you would say base 16
all lowercase and
then directory and then the name in all
lowercase. So it's only a dune.
And let me go back to my page before I save so you
can see it and if I save and I've got the name right then you
can see that the syntax highlighting changed. So you have 250 themes
probably you don't
need more I think 250 is
good. So you can have any form of syntax. I
think all the themes are supported off the bat for
you. So, all right. So that
is the the markdown stuff that
I wanted to show you. I think I've covered everything so here.
See, what do I want to do? Okay. So let's say that
this is actually my blog. It's a pretty crappy
blog right now, but I'm going to make
that pre-tag a little
smaller, oops
Let's what am I doing? Really just
hot fingers
Let's make that a bit smaller. Okay. So there we go. First of
all, let me just see if there's any if there any questions or anything, let's just let's
look at the comments. Let's bring the comments
in.
I don't think as of yet. I think most of you just
answered the questions in your demo.
Did I okay is the
initial space in your required or is it aesthetic? Okay. Yeah. Yeah. So
Vincent the
initial space is not required in the sense that you can
write it so that you're indentation works for you for the rest
of your page. If you wanted to change it as long
as you kept the indentation of the first line,
you'd be fine. If you
if you indent below the first line
of your mark down then the parser will get
confused and there's really no way around that.
It takes that first lines indentation as the indentation
for the markdown.
Hope that makes sense. All right.
Cool, no other questions, so we're going
to continue on so let's say this is our blog.
And what we
want to do now at Laura, you don't have any questions or anything
or comments or anything? You're good?
I'm saying it's all fabulous. Yeah, do
you like it? Because this is the best I think it's great. Yeah. I'm
like you're telling you that I'm I maybe I
haven't necessarily seen it in action and every step
of the way, but I very much get a rundown from me most
days and it sounds really cool and I'm excited to use
it.
Excellent, and I just use that opportunity to
drink some water. All right, so let's
let's keep going. So now we have let's assume
that this is a Blog that we have. Okay, we
haven't actually built a Blog engine or anything, but we
have a little page that we have and
we want to add comments to this.
So, how would we do this?
So first of all, we will need a database
right so and a
database table to hold it. So let's create our
database table. Okay, we'll say
if
DB comments doesn't exist.
Let's create DB comments.
Now this is jstb.
basically
a kitten has an in-process
database in memory
in process database that persists to an
append only JavaScript log. I'll show
you what that looks like as we start adding data to it.
But basically what you need
to know is it's very simple to use so
you basically interact with
it as you would with JavaScript objects and arrays. So
you saw what we did there
is here is we just created an
array we created in This Global DB
reference. That's that's the database for
your app. Right? So this is a persisted table
now an array that you can use
as an array.
So what we can do outside you can do this
inside of your markdown as well. I'm just going to do it outside, but you can
do it inside. You can have HTML in there. You can have components in there if
you want. I'll just do it outside here.
Because you might want to for example move the commenting
into its own component and then included
on multiple pages in the future, so it'd be nice to do
it in HTML. I think so, what I'm going to
do here is I'll just say comments.
and
see
Let's see. So initially
there won't be
any comments.
So what we want is.
Some sort of a conditional here. So this is a new feature
conditionals previously you would use you know
that the
the JavaScript sort of conditional syntax
to do conditionals and it gets very
messy.
To do that. So I added a little
extension to HTML that you can use for conditional
syntax. So let's see, let's display the
comments first because that's usually how comments work so I'm
gonna say if
DB comments remember that's an array length.
equals zero
Okay.
Then I can do something right? Let me
close off this if as well.
so
the full syntax is like this then and
then you can also have an else clause. In
fact, the full full syntax is
you can close those tags, but I've set them up
as self-closing tags. So you don't need this.
This is the full Syntax for conditionals in
kitten right and you can Nest them
as well. So inside of this then you can
have an if so, it's like an if else and then you
can have an else and then nested Etc.
So just using tag nesting. This is a
syntax you would use if you want to be absolutely sure that you know,
you weren't going to get caught out
by I don't know.
By by this is the most maintainable syntax.
Okay, but there are shortcuts
that you can take.
so
if there are no comments we want to display a message
here, right? So we'll say no one's
comments it yeah.
The first what's that that works now
here?
I am
If it's one line, just like in JavaScript,
you know, how you don't need curly brackets. If it's
one nine one line. You're then if it's one
line I can get rid of that. I
don't have to use that.
So I'll just write it like this. But if I added another line
things would go awry. Okay, then that would
be taking as the else Clause. So if you want to be really sure.
You know, if you don't if you wanted sometimes being less smart is good
when you're developing so, you know,
then I would write it like this, okay.
So let's just leave. Let's just write like that in case we want to have another paragraph here
for example in the future.
If God keep pressing the
wrong key. There we go. If I want to
have another paragraph here, then that would
be fine. Okay, so
All right.
And else what do we want to do? What we want
to show the comments that exist none exist yet. But so
we'll go DB comments.
Remember it's an array so we can map it.
And what we want to do is we want to
take each comment and return some HTML.
right
so, let me just fix the indentational that's
Okay. All right.
so
I'm gonna create a list item.
Let me create that list item. Perfect, and then
I want to display. Let's say
that there'll be a message.
And there will be a name. Let's keep it
simple. Okay, we're not going to do any validation either to keep
this simple. So we'll say comment.
Dot message
and I'll just put these at the paragraphs probably not the most
semantic and then we'll
put comments dot name.
And then comments.
Dot let's say date. Okay, you
can make it more semantic if you wanted to make the
name and the date a heading and then above the
comment text.
Oh right have the name on top because I was thinking of having the name
in the comment the date underneath like it's in a small text
like have the message. Yeah, I mean
So wonder of the separation between structure and
style is that you could structurally have
it as a heading and then if you wanted you
could position it below the comment.
Okay, cool, so for more advanced example, that
is what I'll do I'm keeping it simple this time, all right,
so let me put myself
on full screen here so you can see the code. All right,
so we'll tweak this as we go let's just
have like some basic structure right now, okay, and
then let's see
Oh, right. We can't just put list items there. Can
we without wrapping
them in say an unordered
list?
So let's just do that.
And that should be it.
So that should.
Display our comments if we have any.
But in order to have any we need to actually write some
so let's create a different section.
And I'll say leave a comment since
this is under the comment section. I'll make it a heading
3.
And for this we'll create a form, okay.
So we'll create a form and what we're
going to use here.
Is just a very
basic post redirect get on
the back end. So we're
going to make a post request old school and then
we're going to save the data in that to the database and
then we are going to redirect to the main to
the same page so that we can see what's happened. All right,
and then we can also look at how we can enhance that
very easily and actually make that a an Ajax.
All right, so form and we'll say method equals
post.
And we haven't created a post-root yet,
but we will let's say we'll call
that comment.
And that's all we need.
And then I'll close my form up here. So let's
create a message. So
let's create the label for it first. In fact,
let's forget the label for a minute and see what happens. Okay, actually
no, let's put the label in and forget
the ID. It'll be the same thing.
So I'll say four message.
And I'll say message here.
And the message let's make that a text area.
Okay, let's forget the ID though.
It's just muscle memory. I'm just typing it in give it
a name, right?
And let's make it require you spell message with three
s's the that might trip. You don't like this.
It's a sort of thing that I do. So let's get rid of
that third s thank you. This is why we pair program and
then let's create another label and this
time for the name
field that we're going to create.
And I'll say name and let's create
the name field. It's just an input a text
input type text. Let's not forget
the ID this time and the name. I'm I forgot
the first ID because I want to show you validation HTML
validation working.
And finally, let's put a button that you can press.
types submit
and you can comment using that button.
That should be good. Now. Let's take a look if I bring my
browser up.
Let's see. What what's happened here. Well, we have comments comment. No
one's commented yet be the first and then we have
like the worst looking comment form in the
world. So let's make that comment form
look a little better. Why don't we so
I can just start Maybe by giving the body.
Some let's say font
family Sans Sarah. That's
better than nothing, isn't it? I don't
think I need to Max with on it because is a it's
tiny anyway our viewport. Normally I put one there.
The form let's just quickly put the form into shape.
We can use flexbox for that.
So I'll say display flex and
then let's just make everything the same size for now.
And so I'll say flow. What
was it Flex flow? I think it
is flex flow column. I
believe should do it. Let's see
what happens there. There we go. Let's looking a bit
better at least things are underneath each other and we
didn't have to write a lot of CSS to do that.
Let's also maybe give
them a little bit of room to breathe. So
maybe I will just say
I'm just writing very
LAX CSS as we don't have much here. You normally would
scope it far better. I'll just
say margin bottom one M. Maybe
and oops would
I do here we go.
That's separated them out a little
bit and maybe I'll
just make the let's just
take a look at what this looks like. Hello. I am.
leaving
you a comment.
Okay, it's actually I hate
the text and there as well. So let's just make that.
Let's go here and say.
Font family Sans serif
again, and let's make
the font size. I don't know 1.5. Am it's
a funny how most of the code you end up writing ends up
being CSS at the end of day, you know
carrots for both of those values, by the way, it should reset them
inherit the stars from the
from your overall
CSS. Oh so I could just
do so wait I could just do oh inherit
for what but I'd still have to set margin bottom inherits font
family inherit Etc. Right just set from
family inherit and font size inherit and
it will inherit from your body Tech.
inherit in font size
inherit, okay.
and boom
There you go. This is why we have a CSS
experts with us.
No expert just in that. Yeah. Well,
okay semantics.
I like those as well.
Exactly. So anyway,
all right, so right now
we have
These we have the interface if I write comment though.
I get a 404 why because we haven't
created a post route for comment, right? So
let's actually save this data next.
so what I'm going to do is I'll just
Come over here.
And I'll touch.
What do we call it comment, and I'll make it a post root. Okay
in.
in
let me get back to my terminal in kitten
we use file extensions
to specify their purpose
in rooting and they're
all JS files, right? So that's why I can get my
syntax highlighting and everything
in my editor very simply. I didn't have to build a huge amount of tooling. I
just tell Helix editor and I'll make these available soon.
I just tell Helix editor. Hey Dot
post while it's a Javascript file. Hey adults page
file is a Javascript file. So anyway, let me
get back to this now. I have a comment page there.
So let's go over here.
And I can open that comment post. So what
are we going to do in the comment post
file? Well
for one thing let's also make sure
that the DB
the comments database exists before
we do anything to it. Okay, and if it
doesn't make sure that we said
So again, we're going to export a default route this time.
It's a post root so export I'll
say default.
requests response
and there we go.
So I'm just going to take so remember
what we did.
in the page
Okay.
So sorry, let me go back here. Remember what
we did in the page in our form the name
of our message is called message. Oh, actually,
let me also show you this sorry. It's so
hard when you're working on a tiny little screen, but
this is kitten running. Do you
see this validation error?
So that is the the new validator. So
remember I forgot to add the ID on
the input. So it's saying that I forgot to
add the ID on the input. Okay. So what
I can do here is I
can
uh, yeah, I
can go over here and put the ID on this
message.
There we go. And now you see that
what I do name input
is missing required type attribute. Okay different
one.
input
type of text text there we
go. So the validator is really useful.
And now let's see and it's fine. They're no validation errors.
I'm going to look into exposing those
in the browser as well. I don't know
if I'm gonna do that with like an overlay or something or just in
the console, but I think it'd be nice to have it in the browser as well those validation
errors coming in.
Right now it's only in the console for now.
So but so our the data
we're expecting is message.
And the name right? So let's go
to our post here. And what I'm
going to do is I'm going to just say db.com. I'm
not doing any validation don't do this is just a
demo.
I'm just putting whatever I get in there just TV does escape
stuff that you're putting in there. But again, you
know, make sure you're getting what you think you're getting.
So I'm just going to push an object in
there where the message is the request.
body message
Where the name is the request body
name? So it'll automatically
get parsed. The body will get parsed for you and let's also put
the date in there because we had a date that we wanted to show right so
I'll just say date now.
Okay, so we've saved it and then
we're just going to redirect to the
root so I'm just going to say response
right head
303
And location the root.
That's it. So we've saved it
and then we're going to redirect route. So just with this
we should be able to save our
We should be able to actually save these comments. So hello, I'm leaving
a comment or all comment. See what happens scroll down
comments. Hello. I am leaving your comments a
roll and then ooh, there's date. Uh-huh gorgeous day,
doesn't it? So, let's make that a little nicer.
So I'm just going to go back to my page. But also look at
all the code that we have, right? This is
including all the markdown stuff that we did up there, but the comments.
That's that's about the you know, that's it. That's
50 lines of code there and about 10
lines of code here, okay.
So let's make
that a little nicer.
And we can do that by let's see.
What do we have here?
Sorry where we're printing it out. Okay. So for one
thing.
The date is just a timestamp. So actually we can create a
new date from that.
And then we can print it using its
what is it to Locale string? For
example?
There we go.
That should look a little nicer now. Let me
go back to my browser. There we go. That looks
a little nicer we can
if we wanted to actually style that more
we could give it a class. Let's say name and
date for example,
and then we can just add a
little bit of
Here, let's do it. Here. We can say name and
date.
and we can
what should we do with name and date we can.
Say maybe font style italic.
Font size small maybe and
then we can text the line it to the right. How's that?
And then if we go back to the browser we can see okay. There
we go. That's looking like a comment and maybe
the lies for the comments.
We can just say that maybe we can
add a border bottom or something or border top to them.
Let's say one pixel dashed.
And let's make it a lighter gray.
See what that looks like. There we go.
And now if I write another message, I'll say hey,
this is kind
of cool.
Say it all.
Comment you see the whole page refreshes though. Yeah,
that's the post redirect get
pattern old school how we're
doing it. Now. Another interesting thing with with
kitten is that it has
out of the box support for htmx.
If you want to know what htmx is.
It's a declarative way of adding htmx.org declarative
way of adding Ajax Etc
web sockets to your hypertext to
your markup using these HX Dash post
HX - swap Etc attributes on
your tax. So I'm not
saying do this in your
production. Oh, I
think my headphones are running out of juice Laura.
Say something. Can I hear you?
Can you hear me? Say something? Oh, no, the
headphones have run out of juice. Give me one second. I'm going to
switch to the other pair. We've had always
had fun always related fun time today. Let's see
if this
so now I have visible headphones working. There you
now
Can you hear me now Laura? Yes. I
might take a second for them to come back together. Yeah, I'm back. I'm
back. So let's make
this into an Ajax application. Okay. Yes,
so we don't have this refresh right
refreshes.
suck so
There's a refresh. It sucks. We don't want that right? So
how would we make this into an Ajax application?
Well, remember this syntax highlighting
theme property that we put there we
can put another property called uses.
And if you say uses htmx then
kitten will automatically add htmx to
your page. So now we can use htmax and
what we can do again don't
do this in your apps in your apps. You would do something different. I'll
tell you what that is.
But I can just say HX post.
And to the same comment root and
I can say what you get back from there HX
Target the body with that.
Okay, so
now if I do this
And I go over here and I leave a message. I say so
no more refreshes.
are all
I comment no more refreshes because what's
happening is htmx is
kicking in and doing what it does which is if JavaScript
and remember look if JavaScript is off. So
let's turn JavaScript off. Okay. Here we
are. JavaScript is off I say oh no.
No, Js.
And I press it. There we go. It's working. Oh no.
No JS. My comments are working right JavaScript is
on I go over here.
and I say
oh, yeah.
Js
and a comment then I get the beautiful Ajax experience.
And what did I have to do to do that? I just
added over here.
You can see I added a checks HX -
post to the same route and I just said Target
the body now. The reason I'm saying don't do this is
it's quite heavy you can do
it. I mean this is like if you just want to you know,
refresh the whole body but like do it with an Ajax call,
but we are returning the whole page. What you would
normally do is you'd make a component that's shared between
your page and and your post route and and your post
would root would just return the snippet the
comments section for example,
or just the comments actually that you
update it would be returned and it would be automatically added that's a
bit more code but this works. So I mean how cool is
that that you can just you know Implement Ajax
with two little properties that we that's
cool. It's pretty cool, isn't it? So
There we go. We've had we've created a little commenting thing.
And I've also I think demonstrated everything. I
wanted to let me see that I had a list here pretty much
everything that that's I wanted to demonstrate
there. So that's
that is pretty good. And I
think almost within time five minutes five
minutes over time. I don't think that's bad. Is it Laura?
They're pretty good. There's not bad at all. Right. We
had some technical issues and a little
bit of difficulty at the beginning. All right. So one
thing I want to see is I want
to just see in the comments.
If there are any interesting comments, so I'm just
going to put that here. So others can see it too just say
scroll up. I guess you can.
See the ones that I missed, let's see what happens while I
was speaking. Oh my gosh, lots of things happened. Okay.
All right. Wow, okay. No, this is
where we were I think okay. So, let me see if I
can nope. Can I just scroll with? Yes, that's
better. All right. I just
take the line of being less smart being less smart as always
great. You know, what is that adage if debugging
is twice as hard as writing code
then by definition, you're not smart enough to
debug your code if you've written it as smartly
as you can so yeah, you know right code
that is that that exposes intent that
is clear.
What's the difference there's a
difference in structure and style. I thought structure was style
that's discussion of CSS.
All right. Okay. All right. Do it Laura's way Vincent again?
I'm not clever enough. But yes that do with
Laura's way if you're actually building something Laura you
have fans Laura's laughing. That's great. It's
a messy message from a
snake.
Okay, that was you put in three. S's in
the message.
All right. This is great. This is like the experience everyone else had on
the street. I think this question from izone now I
sent his gun. Yeah, because they had to go but I
think the watch is a question. You can answer. Do
you want to read the question or should I?
Okay, swing a screen there. Okay, Can kitten
link to files on storage. For example, let's say
some large container platform that thinks they're more important than
they are tear down your open source organization. Can
you use distribute your container? Yeah. f***
Docker exactly. So
Yeah, it can of course. So basically
kittens runtime is no JS. I didn't
show you that in this example, but in your
project you can just create a package.json file
or you can just say npm in it, you know Dash Why
or whatever and then install
node modules, in fact kitten will automatically install
your node modules when running if you
run it in if you're running your project with kitten, so if
you have node modules in your project kitten will automatically install them
and then you can use anything that you can use and note so
you can just use the file system DFS commands to
do whatever you like so you can
yeah, you can use any npm module in
your in your app.
The answer is yes.
Okay, Laura CSS having Docker issues.
Yes. That was a doctor issue.
Okay, this is a Docker chat happening here. Basically naming
him. Oh, my CSS is
terrible here?
If they're JS files, why not enforce the naming
convention like index.page.js so you don't have to work around editor
specific issues. That's a pretty
good the suggestion actually.
Mostly because I think it just looks
nicer, but you're right. I
mean that would even do away with the with the
mapping.
That you would require and in
fact.
Would we even need yeah where we still need to loaders for
the Rooter because I'm using node module loaders. You know,
what all have to think about that? I I hmm.
Really? Yeah, I mean it's not as nice. It's
not as clean. But yeah, that's a good point.
It's a good point. I will have to think about it.
This is also why I love these streams because you
know, it does help me improve what I'm
building. I would understand if jasmatics have
changed, but I'm assuming kitten doesn't do those things. So right now
I'm not in any way.
Changing the source code while
loading in
the in the module loader. So I'm just doing a remapping but I
could in the future do some
processing on some of the files. So I
don't know yet. I reserve the right to do.
So in case we can do something interesting with that.
And oh, there's more.
Yay progress new error, you
know, okay, there's lots of people having conversations.
All right. Is there any other question that you saw Laura that?
No, I think Andrew reiterated that question right at
the end. But otherwise, I think that's all of them.
Okay, cool. Yeah something
about system seats control system CTL
system D. Yeah, so
if you want to deploy stuff with kitten I
haven't built the deployment stuff yet. You will need system D. It'll
work just like site.js does and asked
earlier in chat. But okay.
I just answered that since he
says looking forward to playing with it. Cool. Let me
know how how you get on.
Yeah, Andrew, so earlier versions of sight
sorry off of kitten so kittens been
Rewritten like twice I think by now initially when
I started I was using swelkits just to build domain and
because of all the issues I ran into it's just a
different philosophy. It's built for Server lists. It's built for big Tech. I
initially started writing
my own server that you swelled and then still lots
of issues and now it's basically
entirely custom it was
using xhtm and not to
be confused with htmx and vhtml but
I'm in line those and that's
a new the HTML render that's in it. And
yeah, so and it's using JS tag
templates for everything.
um
Yeah. Yeah, so swelt actually
is is way too heavy for what what we need for
this as well. So great. That is
the chat and I was
able to get back to everyone I believe and I believe that
is oh does Andrew
said I liked New Direction. Oh, that's so good to hear.
Andrew great. Thank you. Thank you because of course like swelt is
a very established thing. I think it's very elegant in some
ways and in a lot of ways and but again the philosophy is
very different. It's for serverless. It's for big Tech. This is for
small Tech small web.
It's really nice to hear that you think so. All
right, Laura. Well, I think we're at the end of our stream as well.
Aren't we did I forget anything? Yeah, like it's
over.
That's good. I meant.
I know. Oh before we go, you can also if you like
this you can fund us. We do have patrons. We
do have keep forgetting this. I can't believe I didn't
forget it. We have patrons we have
you can do a one-off donation as well. If you like
what we're doing if you want to support us the funding really the
patronage and the funding really does help as
a supplemental a bit of income. It's it's
not what we rely on to to
exist. That's mostly Laura right
now that we rely on to exist and her Consulting work and their
Contracting work, but hopefully one day,
you know, once domain is out the hosting
side of it and we have our own host
as in addition to hopefully other people who will be hosting
these small websites. Hopefully that will make a sustainable but
your patronage and your donations do help as
well. So thank you so much for those of you who are who are donating
and helping us to exist. It does
help.
And that's it. And I guess this is
this has been
this month's smallest beautiful. Yeah, we
have been small technology Foundation
we have and again
I've been around
and I have been Laura. Thank you for joining us. Thank
you so much, and we will see you next month
third Thursday. Take care be well,
okay.