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 in 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.