Steve and A.J. welcome Fred K. Schott to the show to talk about Fred's latest project, Astro. After initially discussing some of Fred's previous projects (Snowpak, Pika) and the joys of esbuild, they dive into Astro, including how it works, its use cases, and the newly finalized dynamic SSR capability. They finish with some picks going back to the very early web, and, as always, Steve's fabulous dad jokes.

JSJ 561 - Youtube

 
Steve:

Hello, everybody. Welcome to another exciting episode of JavaScript Jabber. My name is Steve Edwards. I am the host with the face for radio in the voice for being a mind as I always say, but I'm still the host. So you're stuck with me. Today with me on the JavaScript jabber panel we have AJ O'Neil. 

Yo, yo, yo, coming at you live from the Tough Shed. It's electrified and powerful.

Yes, you can see his new office. We no longer get the purple sheen

Oh no, no, no, that's,

around.

that's coming back. That's coming back. I just had to take it down while they were running the electric wire.

Oh, OK. Anyway, yes, you can't see him on video, but we can. And it's definitely a different

I...

background.

we just...

I'd.

someone's gotta call out that Pikmin is just that GameCube game. Pikmin. I can notice that cover from anywhere.

Yeah.

I was going to point out the best dad ever nameplate

Oh, yeah.

that he stole from me. Because I'm the best dad ever.

The game cube goes there, but it's in the house right now. Cause I was going to play Final Fantasy six.

But, and our guest, as you just heard, is the well-known voice of Fred Schott. How you doing, Fred?

Well, thanks for having me on.

Yes, it is. It's good to have you on again. For those of you who listen to my other podcast, Views on View, we had Fred on episode one ninety five to talk about Astro, which is what we're going to talk about today. So before we get in, Fred. Oh, wait a minute. I'm almost always forget this. I'd like to also welcome in our studio audience. How you doing?

I forgot about the soundboard. I'm

What do

sorry,

you mean?

you probably can't even hear me, all these people standing up and applauding.

That's a real ad. That's a real audience. What do you mean? They're right here outside my office. Really? Anyway, before we get going into the astronomical topic of Astro, would you like that? Fred, why don't you give us a little detail about yourself, who you are, why you're famous, where you come from, et cetera, et cetera.

My name is Fred Schott and I work on open source tools for web developers. So I've been building them, been kind of focused on that for several years now. I'd worked on kind of a lot of random projects, something called snow pack, Pika, Skypack, I've been just kind of loving this space for a long time now. And recently, as of kind of maybe two years ago, we started working on something called Astro, which has really taken off. It's been a huge year for the project and I'm excited to share more about that. But yeah,

So does.

love open source. love of tools, love building tools for developers.

So those tools that you mentioned, Snowpack, Pica, those are all basically build tools, sort of the Vite webpack type

Yeah,

tools,

I mean, if

is

you

that

really...

correct?

Yeah, I mean, stop me if this is boring, because this feels like ancient history now, but there was a time when we all used Webpack and CommonJS, and like the whole web ecosystem was built around Node.js and...

 

So that time is right now by the way in case you're not familiar with what's going on in the world that that's

Oh well,

right now

it used to be worse. At least for the people who were trying to get out of it, it used to be impossible to get out of it. Like, you couldn't do web development without Webpack. It was just like, you could use Rollup, but like, you really ran into problems and this is coming from someone who loves Rollup. Like,

That

at

that

least there are options now, even if most

that's

people are

the

still

current

 Fred K. Schott 

for their

problem.

legacy reasons.

That's the current problem. You can't get away from Webpack. And anything.

Hold

Oh, yeah you can.

it. Oh my god. I'm glad that you got the right guy on okay This is gonna come a like yes next yes web kind of talk

No,

because

I hate

I can

yes

take the other

next.

side of that argument

I hate yes crap. I hate it doesn't work. It's broken. It breaks everything You publish an esm module to npm and then 100 million people's packages break. It's

Yes.

terrible. It's it's one of the worst things ever I hate it

that the alternative is much worse, I promise you. The alternative

No,

was that

the

we

alternative

all just leave

is

NPM.

three lines. The alternative is if undefined triple equals type of module that exports and Dan module or window, that's the alternative. That's one line at the bottom and then one line at the top with the iffy function exports, that's the alternative. And it works

You

100%

never played with Snowpack?

of the time.

You would have loved Snowpack.

I did play with snow pack, but not very much because I don't do react.

Okay, so Snowpack was like this idea, what you're describing. It's like, what if we could just take every NPM package and regardless of how it was built, upconvert it to ESM. So the people who want ESM would get it. They'd basically get this like pull ripcord escape from NPM because they're the ones who want to leave. So they do that work across their whole NPM ecosystem. They write ESM. They, they love the SM world. And then for everyone else, you actually don't really need to change your packet. You don't need to. You can, but like the packages

Yeah.

will just work was always the, So it was essentially that rip cord, but as a tool.

Yeah, I mean that that's, that's great. I mean, I think if we can publish things that work and people that want to screw it up, people that don't want links to be clickable, people that don't want the back button to go back, people that want you to not be able to select texts, those types of people, they can go screw themselves.

Okay, well, I'm not sure I followed any of that, but yeah, you would have loved Snowpack. You definitely

Have you

would have

have

loved it.

you not used any any web pages or apps lately where you you try to do you not select text? Do you not use copy and paste or you post copy paste era?

Are you drawing the connection to ESM to like SPAs, like single page apps?

I'm just saying I'm just saying the people that want to do all of the fancy stuff the people that want to do things are cool They can't figure out how to get basic things to work things like copy and paste don't work anymore because people get so Fancy, you know, so no, it's it's not I'm not saying so sorry. I was being hyperbolic maybe a little too far

I'm just trying to follow up.

But but the what I'm saying is that that this this the future is coming the future is coming mentality leads to things And it's just, it's just, it made me, it's made me so angry this week. Cause like lots of, I couldn't log into a website because you know, I don't know, they're using service workers or some sort of caching or something because my session was stale, but you know, they probably updated the site 10 times since I last logged in the sites

Cześć, cześć.

just caught in a refresh loop, right? And it's just refreshing, refreshing, refreshing, because they probably got some error handler that's like, Oh, if, uh, if, if you get to this error handler, then just refresh the page, it'll probably refresh the page. probably work next, you know, and I've come into that this this past week has just been so bad with not being able to copy and paste having to use the Apple tech sniper tools in order to be able to, to get text off of a wet, you know, just just this week has been so bad for me in terms of just all these little things. It's like, if you just didn't do any of the fancy stuff, it would have worked. This worked before. So that

Okay,

that's

so we were chatting

it.

before the podcast interview thing started, whatever we're calling this. You haven't heard of Astro, right?

No, I have not heard of Astro. So we gotta get to Astro. And

Okay,

you

no,

gotta make

but

me feel

no, this

better.

is perfect. This is perfect, because I can draw, you probably

I got,

have more in common than you think.

I got the

Hey.

website up and I see it says holy expletives.

So Astro

AJ

is,

before we go any further,

oh yeah,

sorry

okay.

Fred, real quick. AJ,

Nevermind.

could you, I was wondering if maybe you could quit being so bland and if you could be more confrontational please? I mean we don't want to have a bland podcast here.

To

No,

be honest.

we can do that because he's cool. Fred's cool. Fred's

He he he

cool.

Oh,

He's,

I'm cool. Okay, I'm on it.

and he's not from that certain country where people pretend to be cool, but then are actually fuming on the... Grrr.

I'm

Easy,

trying to

easy.

figure out if this is, yeah, was that offensive? I'm not really sure what that meant.

Well, you know, I mean, like there's there's stereotypes about different people from different

Yeah,

places

I don't think

and

this is good.

and

Okay, I

and

don't

there's

want to go

there's

down.

a certain

Wherever path you're taking us down right now, this is I- I'm pulling my own ripcord. I'm pulling my snowpack ripcord.

Yeah, okay,

I

it's

don't want

okay.

to go down. Whenever that sentence ends, I don't want to be a part of that. So you

Alright.

can

Ha ha ha

go down if you want, but just imagine me muting and like camera off right now. Listeners, this is-

Okay,

Yeah,

this is

okay.

me stuffing back.

No,

let's

all right.

go to Astro.

Yeah, that's what I was trying to get us to.

Okay.

Yeah, sure, okay, sure.

Okay, so Fred, educate us on Astro and if at all there's any ties to anything AJ just said.

So, no, so I was gonna kind of, I think there's more here. Aster was kind of the answer to this problem a bit, or at least it sees the exact same problem, which is like, we're 10 years down this path of like, don't even like take Node and ESM and CJS out of it. Like, we're not building websites, we're building these applications, which means like create React app, you're gonna get these like 20,000 dependencies, or Next.js, like your whole website is this JS app, where as you navigate from page to page to get this great developer experience, turn your website into a JavaScript application. So.

Can you define great developer experience?

Um, yeah. So like the idea of mixing markup and JS and sometimes like tailwind taken tailwinded styles, there is a co-location there that a lot of developers love, but I personally very much love like versus going back to the days of before JSX where I would like have like my HTML, like handlebars template is over here. My JS file is over here and it's going to hydrate the logic, but it has to manage event listeners and attach handlers. Like the idea of bringing that all into one place is a developer experience and then Next.js kind of through making it full stack, brought into the, kind of into the fold.

I'm not, I'm not, I'm, I like separation of concerns. I liked logic to be unit testable and presentation to be something that you can hand off to a designer and they can tweak and they don't have to become a JavaScript expert to do it. But

Yes.

that said, I think that, uh, you know, what, what you're describing is, is what's being sold. It's what people are being told is cool.

So there was a developer experience there that a lot of developers, and whether you are one of them or not, a lot of developers found more appealing than MVC, which is let's just like make this view really powerful. And yeah, obviously there's the problems you're identifying, which is we all have to be JavaScript developers now. Like your website is no longer HTML, CSS, JS, it's like all JS and like you're using JS to create the other assets. So like CSS and JS is like the perfect example of this where it's like, oh cool, we have this great new technology called JSX, let's bring like everything into it. And that kind of became the trend of the last 10 years of, and the reason I kind of started with a snowpack part is like, you can tie that back to the MP, ecosystem I don't think it's worth going there now, but like this whole problem was a large industry, multiple threads coming together to turn the web into a JS runtime, essentially like build JS app, get HTML out of it. And super powerful, you can build these great powerful things, you can build apps, you can build dashboards, like a very powerful type of website before became suddenly very easy. But at the expense of everyone building websites now having to bring in this complexity. So like the perfect example, right, is like a hello world kind of blog. Like great, my personal blog. And then you open up the network panel and it's sweeping like a megabyte of JavaScript because you've bundled your entire site to get downloaded on every page, no matter where you are.

and

The result

and

of that is super snappy. The developer experience that person loved, but the user has to sit there and wait for that to load. And it's just a hello world. It's nothing.

Yeah, I mean, that's that's one of the things I've been dealing with this this past week, too, is there's a dependency chain I'm trying to break up where one dependency, you know, say, say you need to do you just need one function, you need one function to do something that it seems like should be relatively simple, brings in 1.5 megabytes of dependencies. And then you diving into that function, it's actually not clear, because everything so intermingled and things are being used in places where they're not. they don't need to be in, you know, so I'm, I'm, I'm all for what, what I want to see is I want to see it back to the basics. I want to see basically what the promise of remix is, not what remix is, but the promise of remix of, Hey, what, what if we could just use the browser's native features that already work? What if we could just get scripts to load that are tiny? I like what you have here on the website, build faster websites. Next.js 138 kilobytes Astro 7.6

So

kilobytes.

yeah, it's hard for me to say what your vision of the promise of remixes, but I bet it's closer to Astro than it is to remix, which is we basically flipped that model on its head. Instead of being a big JavaScript app that you're building, you're essentially rendering HTML. So we go way back to like PHP, like that idea of like, I say PHP, but really, you know, Rails, you know.

PHP React. Yeah, I got it.

PHP is the thing that we take the most kind of inspiration from of like, what if we designed a language, what if we designed this whole thing around server rendering HTML? So the whole

Okay.

like default, no JavaScript is really just because we've taken a new type of, you know, if that's the SPA, this is what we call the MPA. This is the multi-page we're rendering HTML on the server or you're building a static build, but whatever it is, JavaScript is the thing you add to the site when you want it to be more powerful, not the default baseline megabyte that you should. So by default, what Astra builds you is HTML. HTML and you add CSS and JS as you go. And you can still use React, you can use Svelte, you can use Vue. It's super flexible in terms of what you use to template that site and then what you use to make interactive islands on the page. So

So

we're

I could

kind

go

of

back

bringing

to mustache.

this old thinking to the new kind of way. It's definitely, it's not mustache. So it's definitely kind of let's bring

No,

new

I'm saying

ideas.

could

So,

I could I because you're you're talking about template engines like view and react I'm saying could I could I use mustache as my template?

Oh yeah, you could. I

Or just, or just

don't

the

think

templates

anyone

that

has.

are built into JavaScript now. I mean, do we even need any of that stuff? Cause what

Yes.

is somebody,

So

somebody.

you would love, yeah, if you check out Asterisk components syntax. So the one thing that we add to this story is we added.Astro file, which is a simply just HTML. It's literally put in HTML. And that is a valid component. That is a valid Asterisk component. So we're bringing this like component thinking where you can then take that and you can add props that get passed in. You can like map over an array. You get all the templating logic through that. But at the end of the day, it's much more like mustache in that it's like HTML first with JavaScript sprinkled in full JS runtime.

I mean, that sounds better to me. I that's, that's certainly more palatable to me personally waiting for Steve to weigh in normally. He

Well

just,

Steve's

you know,

heard this

cuts.

pitch. Steve and I have been through this pitch.

There

That's

I have.

okay.

And like I said, I've been using it too. Um, so obviously I think one of the bigger things we want to get to Fred is that's the basis of how it works. But then there's also the whole islands architecture about sprinkling things in and adding your, your components as you need or as you desire.

Yeah, so to kind of to round out the story. And I think this is where, so I think a lot of what I said, hopefully, this feels like something that you would like. It seems very much like it kind of answers some of the problems you've mentioned, or at least that's what its intention is. But what it does bring is it tries to bring in the things that people do like about the last 10 years. So it's not saying you're wrong for liking React. It's saying you're holding React the way that you've been shown, but there are other ways to hold it, like this MPA versus SPA. Like here's a way to hold React that will actually protect you slow site and it's going to make things just a lot simpler. It's going to bring you into a world of thinking more of HTML versus like this JavaScript application. So the

Question.

way it does that is, oh yeah, go for it.

And no, you finished your thought. Sorry. You finished your thought. You're

Yeah,

going

so

somewhere.

the island concept is where we bring in the react component of this fault component, the view component, where you can basically say, okay, I'm going to render this page to HTML, but now I can basically opt in different parts of a different islands on the page to become these interactive components. So you can think of them like micro front ends is a very similar idea. This idea of like my page is static HTML, but that image carousel, I'm going to hydrate and that becomes an interactive react element or that search bar came from Algolia and it's powered by view. So that's going to become a view element.

OK, so.

You can basically pick around the page what gets hydrated without sending the full code base down to the user just to render that full page.

So I've got two questions and then I've got a third question. So the first two questions are, and you can't cop out. You can't say anything that a developer wants to build. That's just, that's not allowed. What is the best

Hahaha

use case for Astro?

Oh, yeah, no, we're better at this than most. Like our whole thing is that this is really, really good for what we call a content focused site. So anything where the main goal is to get content in front of the user, a blog, a personal site, a portfolio, a publication like and New York Times or any sort of like big publication all the way down to a small little like blog that you're posting all the way up to e-commerce is where it start to draw the line because you're starting to get into more e-commerce territory or more interactive territory. nexus of the two where it's like it's about getting the content like we want to show you the shoe but then you also need to interact with that company you need to click the buy button so e-commerce kind of sits at this kind of middle point where then it becomes more about apps like Facebook YouTube like you're building these kind of like complex applications like figma you can be like a full Photoshop honestly games people brought up that's the side of the spectrum that we don't think about we're really focused you can build with that stress or you can build anything you want but where we focus on is content driven websites.

Well, why not just Hugo?

You

I mean,

mean

is

a

there any,

Y-Astro

is there

instead

anything?

of Hugo?

Yeah. So I mean, Hugo is pretty much that. I mean, as far as I know, Hugo is the best static side generator is the fastest. It's the best. It's the most well supported. So why, why give me, well, and yeah, I'll go down this and I'll get back to that question, but why, why should I pick Astro rather than Hugo, just cause I, just cause I, I want to, I want to be more JavaScript, JavaScript, JavaScript.

Yeah, so I'll zoom that out to like why Astro versus like static site generators are kind of the, the breed that most closely like sees this problem, right? That like you're not building an application, you're building a website and like, here's Markdown, here's content, here's site maps. Like don't forget about this part of the web is what Hugo says. And then it's, you know, also performance is a big thing that they talk about. 11D, Jekyll, you know, all these older

Oh, Jack Jack.

tools.

Oh, wow.

Bridgetown,

Which

I think is another one.

which

Yeah,

one?

Bridgetown, I think is a root.

I've heard that

I

one.

think it's like the Jekyll team that still exists, kind of spun off and built a new one is, I think how I remember. I know the people

Ghost.

behind it. I don't remember the, yes. Yeah, it goes a little bit. The idea behind all of these is, yes, they have that same content focus. So what we share with Hugo is really good markdown support.

Okay.

Really static by

Common

default.

mark.

Yes, I think so. We use Remark.

I think, yeah, remark is common mark and supports GFM and your basic extensions for tables

Yeah,

and that sort of thing. Thanks for watching. See you next time.

this is a very long answer to say that we care about a lot of the things, the same things that Hugo cares about. So very similar use case, but we actually answer the story of, well, what if I want to use JavaScript on the front end? What Hugo and the other say is like, well, we don't think about that. You go bring your own built pipeline, your own bundler, bring those in. And like, it's just a link tag or a script tag to add the script. Astro takes a much more like JavaScript is the primitive. We're going to do the bundling for you. We're going to do the code splitting for you. We're going to do that hydration, that idea of like, here's your islands. The syntax for that is like put the React component on the page versus go figure out how Webpack works. So we take a really hard stance that those are primitives that we care about. We help you build a site that does have interactive JS on it versus pushing that to be a you problem.

So more opinionated, more streamlined, more vertically integrated.

Yes, yes, we see it, yes. That's

I

a

can, I

much

can

better

respect

way to

that.

put it.

I can respect that. Okay. So my, my other, so that, that was, that was question one. And you kind of answered question too, but I want to ask question too. Anyway, what is that? What, what is the thing that Astro is not good for? What, what is it where you'd sell somebody? Hey, don't, don't use Astro.

Well, I could think of a good, he mentioned, you know, your interactive applications. I'll give you an example. I'm working on an application for an organization that I belong to. That's like a membership management. You sign in, you log in, you know, you sign up new membership. You take payments online. You do more really interactive stuff that requires a lot of JavaScript and the data on the backend. And nothing's really static because it's a lot of forms and data. That's something where I wouldn't even think about using Astro. unless I really wanted to stress myself out. So that's my separation. Like you said earlier, it's like a static. I think of the term brochure site, where you're just one time presenting, hey, that's cool data. I want to look at it. And then maybe I want a little interactivity to submit a request or have some sort of dynamic navbar, something like that with just a little bit. But when you're getting into full-on applications, where there's a lot of interactivity and interacting with the back end. That's not something where you would want to use Astro.

Yeah, and I can kind of color that in a bit, which is to say like, the great thing about this is you're splitting your application up and only hydrating the islands on the page that need interactivity. What you lose there and what, again, the DX that Next.js developer loves is this idea of the whole app is connected. I can share data that gets passed around from this component to that component. When this one updates, it sends an update, like the Redux, right? Like there's a state management across your whole app. If you're building a dashboard, that's really cool. I update this and this thing changes.

UGH!

But when everything's an island, it's a little bit, you have to think a bit more about how that state is being passed. So some frameworks like Svelte, they give you stores as a first class concept. It's actually really easy in Svelte to mimic a dashboard and to implement a dashboard with Astro. But in others like React, if you're doing Redux, it's different trees on the, you can't really, it breaks that original model.

Okay,

So you just have

so

to be careful.

I got another question for you, but I'm going to push it off because more important question, islands. What the heck are you talking about?

Yeah, so it's a colorful term for this idea. It was coined by the Etsy friend and team, and then Jason Miller, who created

Etsy

Preactor,

like

wrote a blog

the

post about

the

it.

eBay alternative for crafters?

Yes, yes. They have a great frontend team with a, I mean, I think they were the first people to coin this term and then Jason kind of wrote the blog post that we still refer back to. So kind of definitively like put it on the outside of their org are people talking about this idea. But the tech, the idea behind it is just instead of hydrating your whole page, hydrate the parts of it that need it and don't hydrate the rest. So you imagine your site is kind of grayed

And when

out.

we say hydrate, tell me what hydrate means to you.

So hydrate is like the cost of JavaScript, or it's one of the costs, but you can kind of wrap it up as the cost of JavaScript. Like it is run the code that's gonna make this interactive. And React world, it's like all about like almost re-rendering or it's felt like it's gonna re-render. But like you can think of it as like even back in the jQuery days, like give me the component code. Like it's just a concept of like, give me the code that's needed to make this part of the page do the thing that you built it to do.

So you render it, it looks like something, but it doesn't do anything because you didn't have the good sense to just use a link tag and, you know, on click handler, Rehydrate adds those things into it. So you could do what you could do.

Yeah, so it's really just about like, HTML looks great. And if all you need is a link, great, you're fine. Like you've got the link, you've got the CSS, but sometimes you want it to be a drop down or you want it to be an image carousel, like

Right, right, right.

a buy button that adds it to the shopping cart. Like when you need

Did you

the JavaScript,

know that we have

that's

combo

what we

boxes

consider hydration.

and HTML? Did you know that

Think so.

we have native combo boxes in HTML? I don't remember when they were added, but it is called data set. I think it's

data

called data

set.

set.

It sounds familiar. I don't know if I've actually used that myself. I'm still a marquee fan. I'm still more of a blink kind of guy.

What? Uh huh.

Sorry.

Ha ha ha. Well, those are tags

There's some old school,

I

yeah,

haven't

there's

seen

some

those

old school

in a...

tags

Oh

that

my gosh,

got

yes.

removed because the web standards bodies hate fun, but there was a blink tag

Yes,

and a marquee

marquee.

across the page.

Yes,

Yeah, but that's

I

not

can remember

useful.

those.

That's why they got removed. Those were dumb. That's...

Says you! I've got some great

Thanks for watching!

stuff in Dreamweaver with those things.

Hahaha

Well,

Those are

no,

great.

I don't doubt it. I mean, I remember back in the nineties, you know, my favorite thing was the mouse cursor. You could have the mouse cursor that had the sparkles or the fire

Yes,

Oh yes!

totally, totally.

and you

Yeah.

drag it across the screen,

Yes,

you know,

those

on

are-

sale now. And you know, if it was really cool, and even when you dragged left instead of right, it actually reversed the letters or something. Yeah,

Yeah.

no, those were, but it was gimmicks, right? It was, it was sugar water. It wasn't,

Yeah.

you know, nobody had a use case Well,

Yeah, I think like...

maybe a recording light.

You'd be surprised. We had this, our old site design was very much trying to be this like kind of like old school nostalgic eighties vibe. And we had a marquee that we had to implement ourselves. And for whatever reason on Safari, it was a performance nightmare. So we literally had to remove it. Cause it was so just like, so I actually, I specifically needed the marquee tag to be a browser native primitive and it didn't show up for me.

Well, I, I, um, I'm going to send you this link here if I can figure out how to open the chat. Uh, this, this is the thing. It's not called data set. It's called data list. I think, I think data set is the data attribute that allows you to, um, render. I think a lot of people forget about this too. You can render the HTML already pre-hydrated because you can

Huh.

use data to put the data data attributes. What's

Yep.

the right word attributes? in the HTML so that the JavaScript actually has has everything it needs right there in

Yeah,

the HTML

so

back

you're

in the

getting

truth

to

and

something

Dom

very

days

important there. Yeah, which is that like, so ASTRO's whole thing, there's two things that kind of prevent you from needing to go into JavaScript world. One is its own syntax. Again, it's just HTML. So you could literally like, I'm opening up this link you sent me. It's like a W3 schools. It's a snippet of HTML. You just put that in

Thanks for watching!

ASTRO component. You're not sending any JavaScript down. Like you said, you've got everything you need to implement this. And then also the other tool it gives you is if you wanted to use React or Svelte Review, you can also put that on the page, but just not hydrated. So by default, we're not actually gonna the JavaScript. So it's going to render on the server, create the HTML of that component, and ship that without the JavaScript. So again, if it would have worked without JavaScript, that's great. You get this HTML only experience. It's only that third path where like, I need the JavaScript, send the JavaScript. I'm explicitly telling Astro, I want the JavaScript. And that's the model that we flipped. The model of every other site builder is either, I don't know about JavaScript, go figure it out yourself, which is like the Hugo's the 11 days, or it's like we're going to send everything as JavaScript because this whole site needs it to function. It's a JavaScript application. We're this new third path, which is what's so exciting about this for me.

Tell me more. Or actually,

So.

wait. Oh, go ahead, Steve.

Now go ahead and finish that and then I'll go down the path I'm gonna go.

You're muted. I can't

You just

hear you

muted

if you're talking.

yourself,

I'm sorry.

AJ. Your mouth moving, but no sounds coming out. There you

I

go.

had a different question to ask that is also going to take us down a different path or back to a previous path.

OK, so real quick, Fred, we talked about this last time. And I'm guessing things have changed since you and I discussed on views on view, but the server-side rendering. So as I understand it, basically server-side rendering is allowing it, Astro, to be dynamic, right? So you're querying your back end, whatever your runtime is, on each page load. Now, when we talked last, I think it was still, there was some description on there, this is still experimental. not fully released or fully baked, or there was some sort of caveat there, and that looks to be gone right now, at least looking at the documentation page. And that's number one. Number two about that is it was all or nothing. You're either all server runtime or you're all static, and there's no in between. Is that still the case?

Yeah, so I'd have to go back and see when we recorded, but SSR was like that being now production ready, the idea of, yeah, rerendering on every request, actually running Astro as a server hosted in the cloud where every user gets a new render or you can use caching, you can figure that out. But that story, that SSR story, that was our big V1 launch. Essentially like this is stable, this is as important as our static site builder. You can opt into either one, but like it's no longer experimental. So that was back in September, 2022, I wanna say,

Yeah, something

was

like

when

that.

we got that out. The idea of, well, hold on, I don't want ever, like my homepage isn't changing. I want that to be pre-rendered. That is in development right now. There's a PR with a branch. You can check out, like it's currently being worked on. Targeting a launch early next year. So early 2023, depending on when people are listening to this.

So in other words, you would be able to have, okay, this page is static, but this page is server rendered.

Yeah, so homepage, like that main homepage that everyone's hitting it's static, pre-render that, give me the HTML, just ship that to the user every time they ask for it. But like the user profile page, that's very custom, that's very stateful, re-render that on every request or re-render it every minute. You can kind of play around with the cache headers to find the everywhere from cache it forever and pre-render it to super live dynamic, request it every fresh every time. Using cache headers, you can play around with those and kind of find the spot on each side of that page that makes sense for your page.

But in either case, you're still writing all your code within your Astro components, either A, in the code fence portion of the.Astro file, or maybe you refer to an external JavaScript file that fetches from wherever you're doing. But the way you're writing your code hasn't changed. It just sounds like some definitions in your Astro config that you need to

I think

say,

the

OK,

way it's

 

this

actually

is server

being implemented

rendered.

is literally just like export cons, pre-render equals true. You just put that somewhere on the page and then Astro is going to see that and be like, Oh, pre-render it. Like this page should be static. So when I build it and ship it and deploy it, instead of actually building the code that's going to run it, just literally render it out now during the build and ship that instead.

So you have to tell it specifically to be static as compared to telling it to be server rendered.

Yes. So that is, that was actually a tricky part of this to figure out. So the thing about it is that like, well, you still are shipping. As soon as you need to ship one page that is dynamic, you need to send Astro as a server. Like there's no way out of that. Even if 99% of your pages are pre-rendered, if one is a actual live dynamic thing, you're shipping a server. So it's kind of like, we originally started this as like, can it be a hybrid of the both where it's bringing the best of both worlds? But ultimately what we realized is, well, as soon as you're learning how, you know, you're shipping a server. It doesn't matter if it's one page or a million, it's a server that you need to worry about and think about. So to get this feature, you do need to basically jump into the server world. Like I'm deployed a server, it has to go somewhere, whether that's for cell or Netlify, AWS. But then once it's there, you're able to opt different pages like the homepage back into this pre-rendered world. So it isn't like a third, I can keep using the third path as a word here for a phrase here for some reason. It's not a third mode, it's a feature of the server mode, render whatever pages you'd like to run during your build and pre-render during your build versus dynamically on server.

Got it. All right, AJ, you're up.

Okay. Yeah.

AJ, there

Yeah.

you go.

Yeah. Sorry. I was getting, getting mixed up with the mic meeting. So I meant to, I meant to ask her, are you talking about code fences? And it's that, that was basically, um, I, what do we call that front matter

Front matter, yes.

front matter, but the, but the JavaScript goes up top instead of front matter. And then, and cause I looked at when, when I'm looking at it, it looks similar to what you'd see with Hugo and all the others. Um, but with the JavaScript is in the front matter portion where you're the data for your template ostensibly in a presentation ready format so that you're not doing all of the business logic inside of your view ostensibly that's what it looks like in the example and then you've got your HTML and your react in the bigger body so you do have

Yeah.

a separation of concerns between I mean you do have somewhat of an MVC because You got your view that's up in your front matter. And then you've got your, um, your, well, I guess the controller, whatever you got. I consider both the

So.

view, the view that you, the view is the JSON and the view is also the HTML.

I'll use your favorite phrase, which is, well, you can build whatever you want with this, which is that

Yeah!

if you wanted to bring an MVC, you can do that. If you want to make database calls in that

What?

front matter section, you can do that. Think more PHP where it's really agnostic about how you can use it. Just think of it as here's your logic and then here's your template. Whatever

I did.

architecture you want to bring to that, you're free to do so.

I went. Just the term NBC is, it's kind of like the term agile, what it means. And then the way that 99% of the industry uses it are, couldn't be further apart. Um,

Yeah.

so I just, just.

Yeah, so I would never say ASTRO is an MVC framework. It's not like, that's just like, that is a debate that happened a long time ago that like, we're not trying to restart. We think there's like, I think there's value in that certainly, but like, what we're trying to talk to

was

is

se

an audience that's kind of made the jump to

separation

react where they're not thinking.

of con separation of concerns, separation

Yes.

of concerns is MVC. MVC is separation with certs. Rails is not necessarily MVC. It just popularized it and kind of hijacked the term in the same way that agile was had hijacked by all these people that implement waterfall, right? But

Yeah.

it different thing. As I said, my

Well,

other, my last

I think I would know I would love that because I think there's something really that will tie this everything we've a lot of things we've talked together so far like remix their whole thing that they made their their actual what they delivered, not just the pitch was let's pull your loaders out of the component. And they live over here now. So this is going to be where you load your data. This is like more of the businessy logic, like get the data from somewhere. And then we're going to pass it to the component. So your component is presentation, the loader is the loader business logic part. on the opposite, which is like do everything in the component, like export function page. Now go like make a fetch call, make a database call, like we now support this async ability inside of components. So don't even don't even try and separate your concerns. It's useless. It's futile. Everything's a component. That's like, I'm being very dramatic, but that's essentially their pitch.

Well,

Astro

I mean,

is

that's

way

a lot

more on the

of

remix

what I see.

side of things, which is like, it's not that you have to separate your loader out of the component, you're just going to write your code up here, and your template in the middle. Next is way on the side of there is no separation. And Astro is on the side of like, there's two places, one is code and one is templating. And that's how we kind of separate those concerns

Well,

for you. What you bring to that is up to you.

right. I mean, you're not defining what database they should use, but in the example, there is some function that whether the database is from an API call or whether it's from connecting to a database, there is some method by which the data is gotten. And then the data is transformed into a shape that is a good fit for the template my, my, my, cause a lot of times what people do, I mean, you see this in react code all the time. Cause I think it's just kind of the way that react is taught is you don't do any preparation on your data whatsoever. You just fetch your data and it can be in whatever ugly shape, completely unrelated to how you want to render it. And then you're going to do all of your manipulation right there in the HTML. And so you end up with hundreds of lines of wacky, nasty JavaScript interspersed in between HTML where you're shape transformation that should have been done before you ever passed it to the render function. That's and the way that Astro presents itself in the readme looks a lot more like what I call, you know, the separation concerns where you, you get your data in a good shape first so that your rendering of the template is easy, concise to understand and to reason about. But so that the What do you think about Aero or do you not think about Aero?

Remind me, what is arrow?

Okay, you don't think about arrow, that's fine.

I think I answered your question, but I'm curious. I'd love to know what arrow it is.

So AeroJS, I'll just give you a link to the site here. Somebody shared this with me recently, and he shared it with me in the way that you ought to share things with me as he plopped down

See

the

ya.

link and said, what is wrong with this? And that just puts me in a good frame of mind to just go through and tear something apart. And I really had to nitpick to say what's wrong with it. It really was like, a few things that are just, well, it doesn't fit my personal preference, I was kind of grasping at straws to say what's wrong with this. It's React, but without React.

Yeah, interesting.

It's Diet React. It feels like the Vue 1.0 developer that that man once was grabbed hold of React and said, hey, let's make this simple instead.

If anyone's, have you used lit HTML? This is reminding me a lot of that.

I've heard

And also

of lit

solid

we've

JS

had

is

we've

very

had.

into the reactive data here.

Yeah, we've had people lit and solid have come on the show, but arrow just struck me as being I, I liked the presentation that they have on the website and this yeah, anyway.

Yeah, this is cool. So this is one of my favorite things again, about Astra that I like is like, we don't really have to take a stance here. So if others, you know, if Hugo is saying we don't wanna worry about bundling and JavaScript at all, like, well, we wanna worry about JavaScript, but we're not saying that we're gonna also shift the best front-end, like that we can only do so much, right? So our whole thing is, we're this great server side, like HTML templating language components, we let you use React. You could use Arrow.js with that, like this would be a great thing

But

to

how?

play around. I'd love to

How

see

do

an

I do it?

Arrow So we use this integration system where you can basically Astro add react, Astro add svelte. You have to, someone has to implement it. But once that exists, Astro add aero js would be the command. It'll configure your project for you. It'll add it to your integrations array and you're good to go.

So I mean, how hard is that? Cause it looks like what you need to do is just specify something. What should be preloaded? What should the globals be so that when it gets to the point of the, of the front matter JavaScript, that it's ready to roll and then what should the renderer be so that when you, when you take the part that's below the front matter and then put it into the, the runtime, so to speak of the renderer. That it, it does a thing. and it gives

Yeah,

you output.

I'd have to look at arrow.js to see how it works. But like with react, we're not saying, hey, every react developer has to use our templating language. We're saying this is for the.astro component. This is for rendering HTML. But when you use a react component, you're still using.jsx. Or if you're using a svelte component, you're still using.svelte. So you're still basically just importing that component, putting it on the page. And then Astro is gonna do the work to stitch that all up together. So

Okay.

you just tell us which svelte component you want and where you want it, and we'll do the rest. So arrow would be the same. where you want Aero to live on your page, and then we're gonna put it there.

Okay, I'm trying to scroll through back to the example that I saw earlier. I think it was right on the homepage. Okay, so

There

we've

are

got.

some that are kind of interesting, like Alpine JS, I'll say is an interesting one because it doesn't really like own an island. It's much more like kind of everywhere. Like you just put

Well,

these attributes

Alpine's

that.

jQuery 4.0, right? I mean,

Yes. Yeah. I could

it's

see

just,

that,

it's

uh,

just,

that analogy.

it's just like, okay, well, everything that jQuery did, I mean, jQuery is one of the few success stories of modern technology. Other, other than that, the same thing that always happens with modern technology happen, but developers prototype the right tool, they prototype the API is mostly correct. I mean, given the fact that JavaScript wasn't well standardized and that the well standardized. You know, given all of the unknowns that they were working with, they actually did the right thing. If you were going to go back and do it today, you'd pretty much make the same choices. And then that stuff that they did with minor variations, because a lot of the functions for manipulation for arrays and strings, etc. didn't even exist in JavaScript yet. So, you know, they got different names or whatever, but jQuery was standardized. ZestSelector documentation, which I guess technically is sizzle, not jQuery, but whatever. You know, you look, you look at the, the, the, the specifications that were standardized and you look at the jQuery documentation and it's, it's not quite one to one. It's like one to 0.9, right? And

Right, right.

and so I see Alpine as it's that other 0.1, you know, it's the stuff that didn't get standardized that, you know, just, just a little bit. Just a little.

Yeah, tailwind for JavaScript is the other thing I've heard. Like you just sprinkling it everywhere. Um, these are just attributes. It's just a class. It's just a really long class. What do you mean this isn't readable? Um,

I,

I get

yeah.

a similar

I,

vibe from Alpine.

so do you, do you, it sounds like you're not in the tailwind camp.

I tried to, I actually really tried to phrase that in a way that did not bring any judgment. I am actually personally a decent fan of it. I get the hate. I was a long time, I didn't use it, but having used it now, yeah, this has a lot of value. We built a site, our homepage we built in like a week with Tailwind, which I don't think we could have done this as well with.

It just to me the thing that I don't get and I think this has to do more with economics Is it seems like tailwind literally could have been a CSS cheat sheet? like it literally could have just been a site that you copy and paste stuff from because it from what I can see it's just CSS But they change the syntax of how you do classes to basically I mean, it's just like a cheat sheet.

So

It's like

there's a couple, here's what I'll say. Like if React didn't exist and wasn't as popular, I don't think Tailwind would exist. Like Svelte, Vue, they all give you CSS. So like, why would you go find a different CSS? React, it's really hard to do styling with React. You essentially have to like ESM import it in a separate file. It's like this whole kind of rigmarole you

But

gotta do. It's just a

you

pain.

don't really have to do

You don't

that.

get scoping.

You don't really have to do that. You can just load a style sheet and put class names on a style sheet.

Right, so now, okay, so my component has this class name, but then my style sheet has this other class name, and I need to make sure that those are always matching. It's not bad, it's how web development has worked for decades, but the React developer was not happy. Like CSS and JSX is probably one of the biggest understood problems with React, is that there's just no answer that's really given to you, and also everything else is always a little incomplete. We tried CSS and JS, that didn't work. We tried styled JSX was what the next JS team originally shipped, and that didn't work. They're still trying to figure it out, tailament is just one more I think for them for that community is one more answer. What I will also say, which I think is the more interesting way to think of tailwind is tailwind is CSS for when you already have a component system. Why are you going and creating a different class name? Like I remember when we, I know a project I used with react. We didn't want to bring in SAS, but we did want CSS scoping. And so the way we, we did it was we gave every component, every react component, its class name was uppercase, uppercamulcase, the component name. And then in the CSS file, oh no, sorry, we didn't want to use CSS in JS. So we did this. we then use the component name. So we were trying to get around this problem where it's like, I already have a component system. Why am I creating a different like selector syntax? Like I just

What?

want to use the component system that I already ship.

Do

And

you

Tailwind

really?

kind of delivers on that. Like I just want to ship my component. I don't want to worry about CSS and classes. Like just, I have a component. I've already componentized my CSS through Tailwind and this component system that React gives me.

But do you really need all those components or is that, are you atomizing it too much? I mean, so, so there's the principle of dry, right? I much prefer. Well, I just think, I think dry is incomplete. I think dry is a good direction, but don't repeat yourself. The, the idea that you're going to, to, if you see two lines of code that are the same, you're going to make a function that makes it just one line of code. Right. And then, and then Ken C. Dodds, I think did the best job of popularizing. Aha. Avoid hasty abstractions. Because there's dry wet and aha, you know dry don't

sure.

repeat yourself wet write everything twice, which I totally agree with wet I mean, I

Yeah,

I will stop

I'm

if

a

I

big

look at something

copypaster.

Yeah, if I see two things and they look similar, I will go three times. I won't go four times the third time I'll consider. Okay. Is this actually a pattern? That is consistent enough that I should abstract it and by the fourth time if i'm doing something the fourth time It's like okay. Obviously, this is a pattern that is consistent you find, well, there's just, you could either have three F if statements in this, or you could have two separate functions that have no if statements, I prefer the two separate functions. But the, the whole, you know, dry, dry, wet, aha, avoid AC abstractions. If do you know, if you don't actually need to abstract that component away, I guess the question is, are you making sure you actually need to abstract all these components away? Or would it be fine to just have one component that has these many several pieces? Because you're not actually exporting this in a way where each of these things are atomically being reused over and over and over again.

I mean, yeah, I think that's exactly the argument I'm making. That React developer is already thinking through that problem from a React perspective. They don't wanna also think through it from a CSS perspective. Am I breaking this up too much? Do I need to go refactor my class name so that the CSS makes more sense? They just wanna live in React world. Like again, we're tying the thread all the way back to the beginning, which is like, we think of our applications as JavaScript applications. And if you've already jumped into that pool, then Tailwind makes a ton of sense. It's already a React component. Why would I go build a different class selector system between files, I just want to live in my component. That's, and I say this both as a observer and also as someone who then went and actually used it that way. I was like, oh yeah, this feels right. This makes sense.

I just don't have enough experience for three act to understand that because when I, I mean, I think of programming is programming and I think of design is design and I think of rendering is rendering and you program. And then the result of your, your program, your, your API for your program should yield an object JSON that is easy to put into a template. And

Yeah.

that, that is the way that I think of these things, because I, I primarily

Well,

live on the backend.

yeah, and I think this really was kind of a free moment for me, because whenever you hear about new technologies, it's like, oh, is this the thing that I have to learn? Like, is this going to be the new React? Am I going to have to learn Tailwind? Am I missing out? And that was a very freeing because like, oh, it's solving a problem. I can now think about this in a different way. I'm not like missing out if I don't like Tailwind. I just would not use it, and it's not going to take over the world. It's a solution to a problem. Yeah, I don't think it's that freeing me, at least to not worry about it. Like, oh, is this something that I disagree with? It was just like, oh, this is for the people who like it. Great. Cool. using it or I can choose to use it on a project where it does make sense.

Okay, so can I move us in a different direction again?

No, this is officially a Tailwind podcast, I'm sorry. This is, this is,

Hahaha

this is now the new focus. Yeah, no, of course, definitely.

Well, I mean, Twitter, Twitter is going back and forth on Tailwind. It's, it's kind of quieted down about it, but okay. So the next question is, all right. Sell me on Storyblock.

Story block.

And that's

Give

one

me

of your

more,

big selling

give me

points

a little

here

bit more

of

there.

Astro, right?

I wouldn't say it's a selling point, so

Are you sure?

it's

Because

a sponsor

it's,

of

it's

ours.

in the main, you know, it's, it's, it's in the, the, the first below the fold section,

Yeah, so they're a

right

sponsor

after the

of

hero.

our project. They sponsor our open source project that goes into our open collective and then we get to use those funds for cool open source sponsorships. So we pay our maintainers, we let them go to like, you know, help people go to conferences and things like that. So we do a bunch of cool stuff with that. That is not saying like StoryBlock is the official only way to use a CMS with Astro. It's just the ones that support us and we do a really good job of making sure the Astro StoryBlock system integration, that whole story will extend. If you don't have a favorite CMS and you're looking for one, check out StoryBlock. But if you want to use WordPress, if you want to use any CMS, Contentful, like Astra supports all of those as well.

AJ, you're muted again.

Oh, whoops, sorry. I passed on what, so I know a guy, a great friend of mine who he had a client that wanted to do something. I don't know different than what they were doing, but they were on WordPress and all their data was in WordPress. But what they wanted to do was just not the right thing for WordPress. They basically needed a static site generator. And so he, he, he did some sort of plugin with WordPress. So that instead of rendering the page, it would give out the database, you know, basically just skip the whole PHP

Headless

render.

WordPress, yeah, that's

Yeah.

a whole new world now.

Yeah. So he, he create, is this a, is this a popular thing? Cause

It's

I didn't

yeah,

think

it's

it

become

was a

much

thing.

more popular.

And

I think

he.

that's a plugin that makes it easy to do. I can't remember how it's implemented, but yeah, the headless WordPress is very much like a, it's like the migration story for a lot of these larger companies now.

Yeah. Yeah. So I don't, I mean, what he was telling me sounded really novel and I don't, I don't know if he was able to use something totally off the shelf to, to do it. I thought, I thought he had to do a little bit of, you know, sneaky custom configuration or something, but anyway, so he's, he has a, like a, a Heroku. Because Heroku was free at the time. He did this

I was

thing

gonna

with

say,

her.

not anymore he doesn't.

Yeah.

As of yesterday,

Hahaha.

he does not have a Roku.

Yeah, but anyway, it he just did this neat thing where he got all the he got all the content cached and built by Heroku. So so Heroku became the build server. And then WordPress was the database. And then the front end would would like hit out to Heroku to get the rendered pages or something.

Yeah, so a funny story is that one of our first, our first like use, not use cases, example sites was actually Chris Coyer playing around with Astro and he rebuilt CSS tricks using Astro and talking to that exact same WordPress instance, but as a headless API. So I think, I think J, GraphQL, maybe JSON, I can't remember how it was requesting data, but yeah, it's a really good use case for Astro. Like again, that flexibility of here's your code and here's your template means in the code part, you can literally fetch from anywhere. and the SDK.

So how do

I think

I Astro

for

add

this WordPress, it

WordPress

was literally a

headless?

fetch call. I think for that, it was literally just like a fetch call. It was like a AJAX team just go and get the data from a URL. I bet by now I'd have to actually check. I'm not sure. But a WordPress integration would make a ton of sense as well. But you don't need it. You can just make a fetch call.

One last question for you, Fred, before we sign off, because I know you're coming against a hard stop here. And this is a little question on the templating and running a JavaScript within an Astro component. Now, I know that you can do some bit of JavaScript expression or code writing within the template portion. I think the most common way that I use it, or I've seen it used, is to map over an array. So if in your code fence portion, it's data from your CMS, and you have a list of blog posts, or images, or whatever it is. And you just want to, and that's stashed in a variable called results. And so then within your template, you can run results.map, whatever. And then within the map, you return an instance of your Astro component that renders out that particular item. And you can do other things, such as concatenating variable and string values together to generate or attribute values or stuff like that using your curly braces, very similar to Vue. What is the extent of JavaScript that can run within the template portion if you need to? Obviously, once you work, you would want to do in the code fence, but what's the extent of what you can do with JavaScript within the template portion of an Astral component?

That's a good question. I think, I wanna make sure I say this correctly, but I'm 99, I think I'm 100% now. Anything, you can do anything. So it's like,

Hmm.

we took a lot of inspiration from JSX and how we do the template, and that you can, yeah, what you're describing, you can basically jump into a JS mode and like iterate over a array. So I'm literally mapping over it, I'm gonna get the item, I can go and make some changes to the code, and then, okay, now I'm gonna actually ship out the list item. especially when you move into working with data, working with an array. You can do it. I think you can do it. I think you can literally make async data calls. Like you, it becomes a question of should you, like

Right.

it's not as readable. And at a certain point, you'll probably break our compiler if you go too wild with your syntax, but

Mm-hmm.

the goal would be, and then kind of theoretically, you should be able to do anything in there. It's a really nice interop between here's your templating. And then the second you need JavaScript, you essentially opt into like working with an array, working with a variable, whatever you want. So I don't think there's any limit other than what our compiler won't sneeze at.

And one little case I just ran into of needing to do it in the template had to do with a case where I'm just doing your typical hamburger menu, where you have a little button that you want to display your menu when you click on it when you're in mobile mode. And I was just using some Googling. I was doing some basic document, add query selector, add your click handler, for instance. instead of in the code fence because the document is not available within the code fence but it is within

Yep.

the script tag within your component so there are some minor you know things that we you will need to do in the template once you figure that out just add your script tag put your code in there and work like a charm for me so

Yeah, it's the other side of this, which is we're really explicit, like the code fence part of the component that is server rendered. So you can make database calls without worrying about your secrets, you know, sneaking out. Um, but yeah, the downside is unlike an XJS, like you can't just do anything anywhere and just not worry about it. Um, like there isn't a front end version of that code fence ever running. So it lets you do really powerful things like access your database. But yeah, then you really, really need to think, okay, hold on, this is front end code I now want to add as a script. I have to actually literally put a script tag on the page, um,

All right.

because the way the front-end sees script sees JavaScript.

Sure. All righty, with that, we will wrap up our animated discussion, move on to picks. Picks are the part of this show where we get to talk about anything we want to, within reason, of course. It doesn't have to be code related. So with

and

that,

doesn't

we'll

have

let

to be within reason.

Fred go first. Fred, do you have any picks for us today?

Thank you.

Yeah, I got a pic. I got a pic. We were talking about this earlier. So now I feel obligated to share jib jab. If anyone remembers it, this is just a pure nostalgia play. You can make little dancing elves, you can put your friends faces on it. I'm sure it's selling those face faces to some sort of machine learning training algorithm. But for the small price of free, you can make dancing elves out of your friends. So check out jib jab. Great old school web 2.0 classic.

Yes, very, very good. AJ, you got any picks for us? AJ is on mute again.

Sorry, the icon doesn't actually update like it's supposed to. Yeah, anyway. So of course I'm gonna pick bonzi.link because everybody needs to get Bonzi buddy. You know, that is the world's, you talk about GitHub, co-pilot, GPT, where do you think that came from? It came from Bonzi. So, you know, if you want the real lowdown on, you know, the post-Windows 3.1, pre windows 98 second edition start of you know we're talking way after Clippy I mean Clippy is Clippy's nothing

Ugh.

we're talking about Bonzi buddy yeah

This is like if Clippy were a virus, right? That was the pitch of BonziBuddy. Yeah,

Ha ha.

I want people to download this sh-

don't, don't.

Bonzi dot link is is not a PDF with the virus Actually, what is it? We just had another recent PDF virus spike because gosh darn it I mean if there's something you want, it's your text files to infect your computer I don't know what the latest is, but I saw something scrolling somewhere about another another PDF vulnerability attack That's you know rooting phones and computers and all sorts of stuff Okay, so I have to pick also, of course, of course, I have to pick the native HTML combo box data list. Stop making funky janky combo boxes and use data list instead. And just just don't don't don't, you know, just don't do so many weird things. Just let the tools work for you. You know, nobody. and thinks, ah, dang it, they use the built-in text input, screw them. You know, nobody does that. It's so weird. It's so weird to me that on the web, there's this mentality that we have to over design everything. You know, iOS, Android, they have design guidelines. You're actually supposed to use the input. Turns out, turns out that the browsers have things like inputs built in and combo boxes built in. redesign every possible UI component. Think of the web more like you do, like a mobile app, and you'll get a better experience on the web like you would on a mobile app. On a mobile app, you don't try to customize every tiny little thing. You use what's available on the platform. You know, and people that are using Chrome, they're not opening up Internet Explorer and then thinking, oh, dang it, this looks nothing like, no, it's a Chrome app on Chrome, it's an Explorer app on an Explorer, and people that open Chrome don't open an Explorer. And now they're the same anyway, so I guess that's a mute point. But, you know, people that are using Firefox use Firefox. They use Firefox because they like Firefox. They like the way that Firefox has the input done. They don't want you to break the input. They want it to work the way that Firefox has it work in the same way that a person with an iPhone wants the input to work on the iPhone the way that iPhone decided that the input should work. So, OK. And that was more of a I don't know what that was anyway. And then

That was a

let's

rant.

Yeah,

The

yeah

correct phrase that comes to mind there is I can stem it some, everything you just said in three words, use the platform.

Use the platform. God bless you, Steve. Didn't even have to sneeze for that one. Got it for free. Um, and then let's see, I got to pick Deco deals because you know, it's, it's, maybe this comes out before Christmas. Probably not, but even, you know, whatever. They always get you with the black Friday sale, right? They Jack up the price by 300%. Then they market down by, you know, half price. And then it turns out after black Friday. is, is actually often cheaper than it was on black Friday. But, uh, if you want, if you want to get the best deals on games, anytime of the year, I got, and I got to recommend Deco deals because Deco deals is flipping awesome. And then the last, last two things are again, web installed that dev, by the way, Fred, you should check out web installed that dev. I think you'll love it. Um, it is how web developers install their tools quick, easy, fast, without without changing file system permissions. And we got all the good stuff there. And if there's something missing, you can let us know. And then finally,

This

if you,

is cool.

if you want to follow my rants at Coolage 86, if you want to follow my raves at underscore beyond code at underscore beyond code is, is just the good stuff. Just the positive, just the, just the pro tips, just the goodie goodies. That's all right.

All right. All right. So before I go into mine, I would just want to make one correction. AJ that's sudo not sudo.

No, it's sudo.

Sue dough,

No, it's sudo.

Sue dough, sudo.

Sudo.

Make me a sandwich. Right.

Sudo, sudo make me a sandwich.

Okay, anyway,

Sudo, say

so...

it correctly, Steve.

Okay, I'll take your word for it.

Thank

So

you.

my turn with the dad jokes of the week. So I went out to dinner the other night with my wife and we're sitting there looking at the menu and the waitress comes up and she says, "'Hi, can I take your order?' And I said, "'No, it's mine.'" can't take my order. And then in a similar vein, I went into a bakery the other day and I said, I would like to buy a muffin with chocolate chips. And they said, sorry, we only take cash.

Give me a

All

chance

right.

I can't believe

to

you

wake

have a full

up,

band

sweetheart.

behind you, this entire recording just for that one bit.

Oh, that's great. And then the other day, a guy named Drew Baker and I did a whole episode of Views on View on hiring and the whole hiring process from both

Is he

sides.

the one that made the muffins?

No, he is not. He's a programmer, not a baker. And

Why'd you introduce him incorrectly?

no, that's well, maybe in the past, his family was a baker, since that's how a lot of last names came to be, but that's for another day. But anyway, one of the things we were about was I was in a job interview one time and the interviewer asked me he said can you explain these gaps in your resume and I said well I think those are just caused by the space bar

That one got me. That one got

Right.

me.

And so, you know, that, uh, brings to mind, uh, a joke by one of my favorite comedians or my, my all-time favorite comedian, Steven Wright, Mr. Deadpan himself, where he talks about how he was in a job interview. And in the middle of the year, he stopped and asked the interviewer. He says, tell me something. If I was traveling in a car at the speed of light and I turn on my headlights, would they do anything? And the interview said, I don't know. He said, forget it then. I don't want to work for you. So, you know, if you know Stephen right, you have to understand it. But

Wait, hold on,

one of those great

run

jokes.

that, run that by me one more time.

He basically asked the interview, the classic physics question about if you were in a car that was going the speed of light and you turned on your headlights, would they do anything? Because you're already going the speed of light. Could they get out in front of you? Killed the joke when I got to explain it, AJ. That

But

doesn't

I

work.

didn't get it.

Okay, I'll explain it to you offline.

Thank you. Thank you.

Are the lights moving faster than the car? Like there's another car with lights on it?

Well, no,

No, so, so.

no, it's like you're, you're, you're already going the speed of light. So, which is the fastest

Well,

that any

first

object.

of all, that's impossible. You can't go the speed of

Oh,

light.

you're killing the joke here, man. You're killing the joke.

Well, it's got you have to the way the jokes work is the left brain in the right brain have to both come to a conclusion that are contradictory and agreeable. So that the left brain and right brain have to

Whoa.

both

Whoa.

agree that the conclusion is valid, but they have to come up with separate conclusions. And that's what causes

What?

laughter.

Wow.

That's

Talk

cool.

about rabbit holes. Okay. With that rabbit hole, we will wrap things up. I would first of all, I'd like to say thank you to the studio audience for adding much to this podcast. Thank you.

You're welcome. You're welcome.

Fred, where can people get ahold of you to follow everything going off Astro, to give you money, to yell at you? How would the best ways be to do that?

Astor.build is the website. Check it out there. Our Discord community is awesome. I'd push anyone to go check that out.

Yes,

Come say

I can

hi.

vouch for that. It's awesome.

Yes, awesome. And then I am Fred K. Schott on Twitter. Until that shit burns down, I'm there.

Right on.

Wait,

Alrighty,

why would

with.

something that's being actively developed burn down?

I think firing a lot of the people running it might have something to do with that. I'm not saying it will,

Ha!

I'm just

Wouldn't

saying that

that,

it until

wouldn't

it

that

does.

cause it not to sink because now it's going to float up higher without all the dead weight?

You know, I misspoke. Until the temperature death of the entire universe, I will be on Twitter.

Yes!

Which is billions of years down the road.

That's what

Okay.

we

Exactly.

like to hear.

Yeah, when we're all still using Twitter in 3033, I'll still be there.

As AJ mentioned, he is cool AJ86 on Twitter. I am wonder95 on Twitter. Follow me for at least five dad jokes a week if you want really high quality dad jokes. And with that, we will wrap it up. Thank you to all for listening and we will talk at you next time.