• javascript
• modern web
• data
• github repository
• fetch events

Welcome back, your dreams were your ticket.

Welcome back to that same old place that you live for the now since you hung around.

But those dreams everything and they turned around each other.

Hey, what's going on?

All right, so, hopefully, you are getting a little bit of stuff done.

Actually added a shop to the, like, a Not page to the side project that I have been working on, and it's just a spreadshirt shop and some just adding an iframe to it.

And yeah, works pretty cool.

Like I said, I am using Astro and Astro dot build is the website.

Yeah, you know, let me put that in the chat.

Let me double check to make sure that is the actual just in case.

I have spoken about Astro before and you know what?

Maybe?

Take a quick look at it.

And so before we get into the other thing, but yeah, let me share my screen real quick.

Will ya?

Let me add since I am talking about it.

Let me add the link to the list of links to the archive page.

Cool.

Yeah, hope how are y'all doing?

Hopefully, you're getting stuff done.

All right, start screen, share.

All right, so this right here.

Let me share audio, just in case also don't think I am Anita but just in case.

All right.

So this is astral.

It's pretty cool.

What I like about it.

You know, it's always good when Fire Ship does like a video on it, so shots of worship.

So what it is you build faster websites with less client-side JavaScript.

So it's kind of like a compiler.

Well, I think it is a compiler and what happens is you build your project out of all these different like components.

What have you, right?

And we can do is When you build it, it will strip out all the like the JavaScript.

So, it will go and create like, I guess almost, like static Pages.

Sort of, I am not sure how that actually works.

Well, some parts of it.

It depends, I guess.

I wonder what basically it supposed to?

If you don't want JavaScript, it will kind of like compile, everything does everything it needs.

And is just they're like, just HTML and CSS, which is pretty cool.

And so, yeah, for technology built on top of three different languages, the modern web.

Seems to focus on an awful lot on JavaScript.

We don't think it has to, and that's certainly not a revolutionary concept and you can check it out.

A whole bunch of stuff is pretty cool.

And then they have the documentation.

It's always been kind of following this and everything just kind of put it together because the product I am working.

There's only like a couple of pages that really need JavaScript.

And so it was cool is that you can actually bring in like, your favorite JavaScript framework?

No worries on here, but you can bring in like I am using spelt.

So it has the compiler for that.

So we will compile the code.

So that is just HTML.

CSS jar, HTML CSS.

Now, you can also If you need JavaScript, you can have it, say, you have different ways of loading JavaScript.

So they have one, which is pretty cool.

Like, when that component becomes visible on the page, then it will load the JavaScript.

But before that is just HTML and CSS.

And so you, so that's the partial hydration stuff there, or you can load it on load or you can load it when the site is not busy and it can load the JavaScript, you can like the fur and all that stuff.

So yeah, it's pretty cool.

And Yeah, seems pretty awesome.

So I am kind of playing around with that.

So hopefully at some point.

Like maybe show it on here.

What have you thought?

I have been working?

Because again, it's only like a couple of things that actually need JavaScript to work.

So everything else is pretty much just like static data.

So as a JavaScript developer Advocate, I appreciate that, you know, so you don't need JavaScript or everything, you know, I mean, so let us use it for what it needs to be, you know, so that way.

Is that much more powerful?

All right, cool.

So let me stop sharing my screen real quick, so I can sit up the other thing but Yeah, that's cool and all but I want to talk about this thing that I have known about for a couple of years.

Maybe and let us see.

Share my screen again.

It's pretty cool.

And there's a new thing that came out because one of the things I had been like, well, where do I put this stuff?

Like where can I put it?

So that it will actually work.

And so again, I never really looked into it as much because I had other things to do.

But now like it has that has this new thing that you can do.

And it seems pretty interesting.

And so it makes it to where the barrier of Entry of me.

Wanted to try it out, seems like it might be a little bit better because before I was like, where am I going to host This Server thing?

So but now we have got everything is kind of like a lot simpler to deploy it.

All right, but yeah, so what I am talking about is a runtime called denno.

I think it's denno or Dino.

Either way.

It's created by the same person who created node.

So if you ever heard of node is basically like JavaScript on the server.

So this is Ryan dolls, like, go around again.

So took all the things that he's learned from like creating node.

And so, the thing is, no one has gotten so big that you can't really change anything on there, without it messing up.

A lot of stuff.

So, a lot of times it's like, this thing has grown.

So huge that in order to get the ideas that you want to get, like things that you saw from this thing, when it grows.

So grew so huge.

That you would like to change but it's too late to change because it's so huge.

You might as well start with something new again.

And, so I think that's the thought process behind dental.

And it's funny because as the same letters, so node2 on a few people saw that, but we're all right, and I don't even know if that was what they thought, but neither there.

So, yeah, so Daniels, our run time for JavaScript and typescript.

That is based on the V8 JavaScript engine.

So basically just like node.

And the rust programming language, so it's actually built in Rust.

I think node was built in C++.

I think or something, but denno is built in.

Rust is create Again by Ryan doll.

Original creator of node.

Js and is focused on productivity, which is cool.

And then, yeah.

So again, it was announced in 2018 during his talk, 10 Things.

I regret about node.js.

So that's running.

So it built like a holster and it's like this whole thing is, No, going to overtake node is no dead, lol.

Whatever neither here, nor there, whatever.

So, yeah.

So the website, also, let me while I am here.

Let me just add this link as on this your stuff at the end of it, add the link to the Wikipedia, so you can also check it out if you so choose.

All right.

I don't know what just happened.

That was weird.

Okay.

So now the actual website is denno D Eno dot land, right?

So this is actual website.

So if you want to get more information about it, check it out now, so I am on the run time for a JavaScript and typescript.

So that's another thing.

It's written in typescript.

Well, you can use typescript like out of the box.

All right, and so like you want to install it, you could play around with it.

Do a bunch of stuff.

It's pretty cool.

And so the thing was like, I was like, well I have this locally where can I deploy it that would understand or what have you because no like, you know, you just deploy node pretty much almost anywhere and it works, you know, like node runs in a bunch of places already.

So like there're environments that already have node and so is like, how would I set up Dino or what have you and so you so that was the kind of thing where I was like, I mean, it's cool.

I can do it running locally.

But if I want to put it somewhere and so then came across this thing denno or denno.com, deploy.

So add that.

And so what this looks like it's just a place where you can actually go and deploy your Dino scripts and so it's pretty cool.

So I kind of signed in, so I want to show something real quick, but Everything kind of shifted on me.

Cool.

All right.

So now as it says, it's a globally distributed JavaScript VM virtual machine.

And so it was cool is one second deploys.

So, so you write your demo code and then you push it to here, and they're saying one second, deploys, you develop locally deployed globally, which is pretty cool.

So you do it on your computer band 0, config zero maintenance zero headaches.

So again, I don't have to figure out how to set up.

Like somewhere where I can deploy my denno stuff that works.

This does it for you and has typescript wasm web assembly.

Yeah.

Webassembly machine language somebody that wasm some well assembly, basically cool and then dies modules.

So it's pretty cool, and they can sign up and when you sign up you just sign up for your GitHub account.

And so that's what I did here.

No, not there.

We're nothing it.

Oh, so here's documentation.

So it kind of shows you so like hello world and then for folks who like react you can use jsx.

Apparently, let us see, serving static assets.

So, you know if you have like files like images, you want serve running scripts locally.

I mean, that's all well and good, but I am trying to get this on the web.

So other people can use it and it's so cool.

So now I guess there's an issue with Persisting data because I guess the way the deploy Works, maybe it's like.

So I guess you can't persist data on there, right?

So it's kind of like a one like a, just like a function that's like--that's ephemeral.

Like it's only like the server run starts up when you need it and but then shuts down when you don't need it kind of thing.

And so for those you can't really persist data, you know, I am saying, so if you want to like a list of customers or what have you like, you can save that.

Once it's running, but when it's done is no longer there because it's the server is gone.

So, like State list, they're like stateless functions, basically.

And so yeah, whole bunch of stuff.

So you can use, I guess, fauna DB dynamodb and like Firebase.

If you want to have a place where you can keep the data that you would want to reuse again and then a cool.

So, a bunch of examples Deployments all type of stuff.

So, it seems pretty cool and then API reference in the broadcast channel, so these are like the different API that you can use and stuff.

Fetch API, which is cool, a lot of good stuff.

Now, I went to the actual when I signed in, it took me to a dashboard, right?

Well, this thing, too.

So it took me to like this -.

Denno.com projects, and so I just created a quick project.

So let us real quick.

So what I did was I click new project and then it gives me a random name, right?

So then you can put in your own, but they have some stipulations on what it you need to have in it.

That is Click create.

And then, so they have these things where, like I said, I would like to deploy URL that you can use.

So like this, hello world that, so they have examples that you can just use so you can deploy from GitHub, which is cool.

So you put in like a URL and are automatically put, like it will Deploy on push so you can link your project to a GitHub repository.

And so as you push to the GitHub repository, it will deploy.

So it's like updating.

So that's pretty cool.

So you can store your files and everything like your code and GitHub and you automatically push and all without like zero configuration, which is pretty cool.

So, that's cool.

All right, so, so, I clicked hello world before and so that got me, come on.

This one here.

Let us take a look at the hollow world one.

So all it was so far is come on kind of tells you what you see.

So yeah, so it's just a hollow world.

So the code, so I just went to the URL that is showed me and has two of them.

Not sure why there's two.

But again, after read more into it with a view where you can see the source code of it, the logs crash reports again, if those linked to a GitHub repository and see that, they're so real quick.

So that the code for the exam.

Hello.

World example was just you, add an event listener.

For fetch events, and so once you get that you respond with a new response, hello world with the status of 200 and the content type, the (header) of text plain.

And that's it.

We have like a web server that listens for fetch events, like request uses the fetch API to respond with just hello world, that's kind of off.

So, that's, that's pretty cool.

You know, there's like a whole bunch of stuff you Normal have to do but like in node, but this is just that.

So, that's super cool then.

So let us for this one.

Just one of this project.

Let us do it a chat server and see how quick that goes.

Right.

So the chat server.

Looks like it just whenever it connects to a broadcast channel called chat, and then we will post the message.

This is a message.

So, let us see what happens.

I am no clue.

What's going to happen.

So deploy it And there we go.

And so I can just apparently just go to.

OK.

This is the deploy URL.

So if I wanted to play, but to look at it, let us see what happens here.

Yeah, and so welcome and got connected.

Wait.

So just from that little bit of code.

I have a.

Okay.

So this is the actual front end.

It looks like and I guess it's connected to that thing.

I just deployed because I did not write this part here.

All this stuff.

So this is, I guess the sample code for the chat.

Interesting.

Okay, so let me open up another window.

See how this works.

So it looks like it's using the broadcast API, which is cool.

So, so let me Dwayne.

Well, that's cool in it.

Oh, wait a minute.

Oh, so as soon as I type it that became available, so it's not like I have to press enter anything cool.

Let us see, other Dwayne.

All right, let us see what happens.

Hello?

Okay, so that should have sent a message to my actual thing.

I deployed, which connects everybody here because everybody gets connected through the thing.

So, where is it?

World where to go.

Oh, huh?

Oh, I guess I have to send in order to be connected.

So I have to send a message, I guess.

All right.

Let me see my sent World.

Hold On.

Tests were hit enter.

Yep, Cadenza.

Okay, cool.

And then is there, huh?

That's interesting.

That's pretty cool.

Okay, and then all I had to do is just deploy.

That's pretty cool.

That is pretty cool.

So yeah, so now that I can just like the ploy, I can just kind of work with a dental stuff, deploy and see how it works out.

That's kind of cool.

So yeah, we play with that more, that there's that And deploy from URL deploy.

Cold with nothing.

More than a URL, which was that deploy URL right here.

That's pretty cool.

I am going to keep messing with that.

But yeah, like I said, it's now you have a place to where you can play with it on the web and maybe use it like in a little project or what have you?

Yeah, I am Diggin.

It looks nice.

All right, that's pretty cool.

And then like on the dental site, so it looks like you could also so like here.

Oh, yeah.

So here's the hello world that we looked at before and see this one.

You didn't have to put like of the status or anything is just this is like the very basic one and then hears the broadcast, which is like the chat that we did.

And so again, listening for the Fete, the parameters getting the message.

That's cool and responding with that.

So this looks like it might be a thing where that's cool.

So that's so this is like your server pretty much was this kind of amazing and then here's like the jsx for folks.

So do another thing was cool is that the there are like no module.

No node modules.

Really?

There's like no node module folders, because what happens is it pulls it from like a URL?

Which is kind of cool.

So I the code for the Nano server side rendering library is here.

And then you just import like the renderer function.

The server side rendering.

I think this is Tailwind, I guess from there and then that way you can just use it here.

So this is similar to like what you call it react, I guess.

And so you have this function.

Hello, you pass the props which you know, contains the name and you style it looks like with tail wind, which is pretty cool.

Hey, oh, oh, so yeah, so I guess these are Tailwind specific things like and their use tell when really, so I am assuming these are like tail with specific things.

That's why you have to pass in the TW so that it understands how to compile it.

Properly.

Cool.

And then you have the H1 here.

Okay, so I guess this makes it horizontal.

I guess you can what you call it like Center horizontally.

Then here's the fetch.

And then so, then you're passing in that.

Hello.

So you're responding.

So you're creating like a server-side render of this function being completed.

That's pretty cool.

You know what?

Let me try this.

I mean, we're here might as well.

So because theoretically since I am already signed in I should do hit deploy.

It was cool.

Yeah, you see the URL.

It's just you deploy as kind of cool.

Okay, so and then you do all this like to CLI and stuff, so they have a CLI.

Line interface.

All right.

Let us say I am interested to see what this looks like.

So, let us see if we can deploy this.

It's a jsx file.

So you could write like you're reacted code and then be able to have it runs on the server.

That's kind of interesting.

So, all right create a new project.

So it's going to be the narrow snail, 9595.

It was a good year created.

This is pretty cool.

What has happened?

Enter the URL that your script is located at sure.

Oh, so, this is, okay.

So, this was what was filled in from before.

All right.

Deploy to production.

Because, again, you can use like your GitHub, if anything, okay, or if you use from any other file, you may have had cool.

So, let us see what happens.

So it's building down.

So it downloaded this stuff.

It's like the Nano stuff and there we go.

So, let us take a look at what it looks like.

I wish you would open in a new window.

All right, so, hello world.

So, because world is the default.

And of course, again, it opened up.

In the actual page, so I can't really go back great, but I think it said, if you put like Question mark, name equals, Dwayne.

Oh Dwayne.

That is slick.

That is kind of cool.

And all it was is that you wrote some jsx and it got deployed and it did everything for you.

That am I am impressed.

That is awesome.

That is pretty cool.

So now so yeah, so just now created like three random projects of this stuff.

Yeah, so something like this makes me want to play around a little bit more with it.

So this is super cool.

And if you want to stand like globally distributed, so like depending on where your user is making the request to your server from it will get to the closest I guess node where it was deployed.

So it's a lot faster kind of thing s that is slick.

That is pretty cool.

I see a blog post coming up in my future at my job.

So I get to play with this and write a blog post and that's part of my job.

It's kind of amazing.

So yeah not but this is Super cool.

Yeah, so as an excuse to learn denno now.

That is cool.

That is, as always.

So then this, so we look at the code.

It should be like some Tailwinds stuff in here.

So, yeah, so you see how it changed there?

Any server-side rendered.

So it came directly from this thing.

So, I wonder if it's so, so it shouldn't need any sort of like, JavaScript.

I don't think.

Let me see.

Ya know, JavaScript is just the document.

That is super cool.

That is awesome.

That is really cool.

Nice.

All right, that's cool.

That is super cool.

All right, my bad.

I get excited about these things.

But this is really, really cool.

All right, I am gonna get you all back to work.

I am going to definitely delete these projects.

But oh, and it's delete them seems pretty straightforward like here.

And I think you can just a few quick it so do settings.

Yeah.

No, you just delete the project.

That is super cool.

This action is not reversible.

Yes.

Yeah, that is wow.

So, what do you all think?

If you're watching this?

Let me know about dental deploy.

Does this make you want to like play around with it more?

Or learn more about it?

I think this may help with like the adoption of people using it and stuff.

That is super cool.

So yeah.

All right.

Thanks.

I am going to get you all back to work.

And yeah, I need to get back focused, so I can actually finish up.

Before I start this side project.

I really need to make sure I finish up the current side projects.

I am working on.

So what is but then, again, I can, I can use it for work.

So that's cool.

Like, I can use it for to write a blog post.

You know, it's super awesome.

Okay, cool enough of me blabbering on.

All right.

We have one more break session.

And so if again is you would like to try and sign up for a show-and-tell spot, please feel free.

Otherwise, want to take a look at an artist's website that we play on the radio show.

And yeah, so we get you all back to work again.

Thank you all for hanging out.

I am going to send you off with some tunes.

This is new Jabez and a Pawnee.

Be trying to call.

Thank you.

Because once again, I want to thank you all and share my screen.

I mean, but yeah that is pretty cool.

Like just playing with the just now because I only signed up and deployed one thing but now seeing and playing with it is pretty awesome.

So looking forward to doing more with it.

All right, cool.

So again, thank you all for hanging out and see you 15 minutes after the hour, maybe with a show-and-tell, or we will take a look at an artist's website.

Listen to music and watch some videos.

Either way.

It's going to be cool.

It's gonna be a good time.

All right.

Thanks again.

Y'all almost forgot to hit create a highlight video.

Dio, I would have been upset.

All right, here we go.

Thanks y'all bz.

See, you much productive?