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.
Aj:
Yo, yo, yo, coming at you live from the Tough Shed. It's electrified and powerful.
Steve:
Yes, you can see his new office. We no longer get the purple sheen
Aj:
Oh no, no, no, that's,
Steve:
around.
Aj:
that's coming back. That's coming back. I just had to take it down while they were running the electric wire.
Steve:
Oh, OK. Anyway, yes, you can't see him on video, but we can. And it's definitely a different
Fred K. Schott
I...
Steve:
background.
Fred K. Schott
we just...
Steve:
I'd.
Fred K. Schott
someone's gotta call out that Pikmin is just that GameCube game. Pikmin. I can notice that cover from anywhere.
Aj:
Yeah.
Steve:
I was going to point out the best dad ever nameplate
Fred K. Schott
Oh, yeah.
Steve:
that he stole from me. Because I'm the best dad ever.
Aj:
The game cube goes there, but it's in the house right now. Cause I was going to play Final Fantasy six.
Steve:
But, and our guest, as you just heard, is the well-known voice of Fred Schott. How you doing, Fred?
Fred K. Schott
Well, thanks for having me on.
Steve:
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?
Fred K. Schott
I forgot about the soundboard. I'm
Steve:
What do
Fred K. Schott
sorry,
Steve:
you mean?
Fred K. Schott
you probably can't even hear me, all these people standing up and applauding.
Steve:
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.
Fred K. Schott
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,
Steve:
So does.
Fred K. Schott
love open source. love of tools, love building tools for developers.
Steve:
So those tools that you mentioned, Snowpack, Pica, those are all basically build tools, sort of the Vite webpack type
Fred K. Schott
Yeah,
Steve:
tools,
Fred K. Schott
I mean, if
Steve:
is
Fred K. Schott
you
Steve:
that
Fred K. Schott
really...
Steve:
correct?
Fred K. Schott
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...
Aj:
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
Fred K. Schott
Oh well,
Aj:
right now
Fred K. Schott
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,
Aj:
That
Fred K. Schott
at
Aj:
that
Fred K. Schott
least there are options now, even if most
Aj:
that's
Fred K. Schott
people are
Aj:
the
Fred K. Schott
still
Aj:
current
Fred K. Schott
for their
Aj:
problem.
Fred K. Schott
legacy reasons.
Aj:
That's the current problem. You can't get away from Webpack. And anything.
Fred K. Schott
Hold
Steve:
Oh, yeah you can.
Fred K. Schott
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
Aj:
No,
Fred K. Schott
because
Aj:
I hate
Fred K. Schott
I can
Aj:
yes
Fred K. Schott
take the other
Aj:
next.
Fred K. Schott
side of that argument
Aj:
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
Fred K. Schott
Yes.
Aj:
terrible. It's it's one of the worst things ever I hate it
Fred K. Schott
that the alternative is much worse, I promise you. The alternative
Aj:
No,
Fred K. Schott
was that
Aj:
the
Fred K. Schott
we
Aj:
alternative
Fred K. Schott
all just leave
Aj:
is
Fred K. Schott
NPM.
Aj:
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
Fred K. Schott
You
Aj:
100%
Fred K. Schott
never played with Snowpack?
Aj:
of the time.
Fred K. Schott
You would have loved Snowpack.
Aj:
I did play with snow pack, but not very much because I don't do react.
Fred K. Schott
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
Aj:
Yeah.
Fred K. Schott
will just work was always the, So it was essentially that rip cord, but as a tool.
Aj:
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.
Fred K. Schott
Okay, well, I'm not sure I followed any of that, but yeah, you would have loved Snowpack. You definitely
Aj:
Have you
Fred K. Schott
would have
Aj:
have
Fred K. Schott
loved it.
Aj:
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?
Fred K. Schott
Are you drawing the connection to ESM to like SPAs, like single page apps?
Aj:
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
Fred K. Schott
I'm just trying to follow up.
Aj:
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
Fred K. Schott
Cześć, cześć.
Aj:
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
Fred K. Schott
Okay,
Aj:
that's
Fred K. Schott
so we were chatting
Aj:
it.
Fred K. Schott
before the podcast interview thing started, whatever we're calling this. You haven't heard of Astro, right?
Aj:
No, I have not heard of Astro. So we gotta get to Astro. And
Fred K. Schott
Okay,
Aj:
you
Fred K. Schott
no,
Aj:
gotta make
Fred K. Schott
but
Aj:
me feel
Fred K. Schott
no, this
Aj:
better.
Fred K. Schott
is perfect. This is perfect, because I can draw, you probably
Aj:
I got,
Fred K. Schott
have more in common than you think.
Aj:
I got the
Steve:
Hey.
Aj:
website up and I see it says holy expletives.
Fred K. Schott
So Astro
Steve:
AJ
Fred K. Schott
is,
Steve:
before we go any further,
Fred K. Schott
oh yeah,
Steve:
sorry
Fred K. Schott
okay.
Steve:
Fred, real quick. AJ,
Fred K. Schott
Nevermind.
Steve:
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.
Fred K. Schott
To
Aj:
No,
Fred K. Schott
be honest.
Aj:
we can do that because he's cool. Fred's cool. Fred's
Steve:
He he he
Aj:
cool.
Fred K. Schott
Oh,
Aj:
He's,
Fred K. Schott
I'm cool. Okay, I'm on it.
Aj:
and he's not from that certain country where people pretend to be cool, but then are actually fuming on the... Grrr.
Fred K. Schott
I'm
Steve:
Easy,
Fred K. Schott
trying to
Steve:
easy.
Fred K. Schott
figure out if this is, yeah, was that offensive? I'm not really sure what that meant.
Aj:
Well, you know, I mean, like there's there's stereotypes about different people from different
Fred K. Schott
Yeah,
Aj:
places
Fred K. Schott
I don't think
Aj:
and
Fred K. Schott
this is good.
Aj:
and
Fred K. Schott
Okay, I
Aj:
and
Fred K. Schott
don't
Aj:
there's
Fred K. Schott
want to go
Aj:
there's
Fred K. Schott
down.
Aj:
a certain
Fred K. Schott
Wherever path you're taking us down right now, this is I- I'm pulling my own ripcord. I'm pulling my snowpack ripcord.
Aj:
Yeah, okay,
Fred K. Schott
I
Aj:
it's
Fred K. Schott
don't want
Aj:
okay.
Fred K. Schott
to go down. Whenever that sentence ends, I don't want to be a part of that. So you
Steve:
Alright.
Fred K. Schott
can
Aj:
Ha ha ha
Fred K. Schott
go down if you want, but just imagine me muting and like camera off right now. Listeners, this is-
Steve:
Okay,
Aj:
Yeah,
Fred K. Schott
this is
Aj:
okay.
Fred K. Schott
me stuffing back.
Aj:
No,
Steve:
let's
Aj:
all right.
Steve:
go to Astro.
Aj:
Yeah, that's what I was trying to get us to.
Steve:
Okay.
Fred K. Schott
Yeah, sure, okay, sure.
Steve:
Okay, so Fred, educate us on Astro and if at all there's any ties to anything AJ just said.
Fred K. Schott
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.
Aj:
Can you define great developer experience?
Fred K. Schott
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.
Aj:
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
Fred K. Schott
Yes.
Aj:
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.
Fred K. Schott
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.
Aj:
and
Fred K. Schott
The result
Aj:
and
Fred K. Schott
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.
Aj:
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
Fred K. Schott
So
Aj:
kilobytes.
Fred K. Schott
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.
Aj:
PHP React. Yeah, I got it.
Fred K. Schott
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
Aj:
Okay.
Fred K. Schott
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
Aj:
So
Fred K. Schott
we're
Aj:
I could
Fred K. Schott
kind
Aj:
go
Fred K. Schott
of
Aj:
back
Fred K. Schott
bringing
Aj:
to mustache.
Fred K. Schott
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
Aj:
No,
Fred K. Schott
new
Aj:
I'm saying
Fred K. Schott
ideas.
Aj:
could
Fred K. Schott
So,
Aj:
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?
Fred K. Schott
Oh yeah, you could. I
Aj:
Or just, or just
Fred K. Schott
don't
Aj:
the
Fred K. Schott
think
Aj:
templates
Fred K. Schott
anyone
Aj:
that
Fred K. Schott
has.
Aj:
are built into JavaScript now. I mean, do we even need any of that stuff? Cause what
Fred K. Schott
Yes.
Aj:
is somebody,
Fred K. Schott
So
Aj:
somebody.
Fred K. Schott
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.
Aj:
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
Fred K. Schott
Well
Aj:
just,
Fred K. Schott
Steve's
Aj:
you know,
Fred K. Schott
heard this
Aj:
cuts.
Fred K. Schott
pitch. Steve and I have been through this pitch.
Steve:
There
Aj:
That's
Steve:
I have.
Aj:
okay.
Steve:
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.
Fred K. Schott
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
Aj:
Question.
Fred K. Schott
way it does that is, oh yeah, go for it.
Aj:
And no, you finished your thought. Sorry. You finished your thought. You're
Fred K. Schott
Yeah,
Aj:
going
Fred K. Schott
so
Aj:
somewhere.
Fred K. Schott
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.
Aj:
OK, so.
Fred K. Schott
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.
Aj:
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
Fred K. Schott
Hahaha
Aj:
use case for Astro?
Fred K. Schott
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.
Aj:
Well, why not just Hugo?
Fred K. Schott
You
Aj:
I mean,
Fred K. Schott
mean
Aj:
is
Fred K. Schott
a
Aj:
there any,
Fred K. Schott
Y-Astro
Aj:
is there
Fred K. Schott
instead
Aj:
anything?
Fred K. Schott
of Hugo?
Aj:
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.
Fred K. Schott
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
Aj:
Oh, Jack Jack.
Fred K. Schott
tools.
Aj:
Oh, wow.
Fred K. Schott
Bridgetown,
Aj:
Which
Fred K. Schott
I think is another one.
Aj:
which
Fred K. Schott
Yeah,
Aj:
one?
Fred K. Schott
Bridgetown, I think is a root.
Aj:
I've heard that
Fred K. Schott
I
Aj:
one.
Fred K. Schott
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
Aj:
Ghost.
Fred K. Schott
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.
Aj:
Okay.
Fred K. Schott
Really static by
Aj:
Common
Fred K. Schott
default.
Aj:
mark.
Fred K. Schott
Yes, I think so. We use Remark.
Aj:
I think, yeah, remark is common mark and supports GFM and your basic extensions for tables
Fred K. Schott
Yeah,
Aj:
and that sort of thing. Thanks for watching. See you next time.
Fred K. Schott
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.
Aj:
So more opinionated, more streamlined, more vertically integrated.
Fred K. Schott
Yes, yes, we see it, yes. That's
Aj:
I
Fred K. Schott
a
Aj:
can, I
Fred K. Schott
much
Aj:
can
Fred K. Schott
better
Aj:
respect
Fred K. Schott
way to
Aj:
that.
Fred K. Schott
put it.
Aj:
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.
Steve:
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.
Fred K. Schott
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.
Aj:
UGH!
Fred K. Schott
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.
Aj:
Okay,
Fred K. Schott
So you just have
Aj:
so
Fred K. Schott
to be careful.
Aj:
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?
Fred K. Schott
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
Aj:
Etsy
Fred K. Schott
Preactor,
Aj:
like
Fred K. Schott
wrote a blog
Aj:
the
Fred K. Schott
post about
Aj:
the
Fred K. Schott
it.
Aj:
eBay alternative for crafters?
Fred K. Schott
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
Aj:
And when
Fred K. Schott
out.
Aj:
we say hydrate, tell me what hydrate means to you.
Fred K. Schott
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.
Aj:
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.
Fred K. Schott
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
Aj:
Right, right, right.
Fred K. Schott
a buy button that adds it to the shopping cart. Like when you need
Aj:
Did you
Fred K. Schott
the JavaScript,
Aj:
know that we have
Fred K. Schott
that's
Aj:
combo
Fred K. Schott
what we
Aj:
boxes
Fred K. Schott
consider hydration.
Aj:
and HTML? Did you know that
Fred K. Schott
Think so.
Aj:
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
Fred K. Schott
data
Aj:
called data
Fred K. Schott
set.
Aj:
set.
Fred K. Schott
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.
Aj:
What? Uh huh.
Fred K. Schott
Sorry.
Steve:
Ha ha ha. Well, those are tags
Fred K. Schott
There's some old school,
Steve:
I
Fred K. Schott
yeah,
Steve:
haven't
Fred K. Schott
there's
Steve:
seen
Fred K. Schott
some
Steve:
those
Fred K. Schott
old school
Steve:
in a...
Fred K. Schott
tags
Steve:
Oh
Fred K. Schott
that
Steve:
my gosh,
Fred K. Schott
got
Steve:
yes.
Fred K. Schott
removed because the web standards bodies hate fun, but there was a blink tag
Steve:
Yes,
Fred K. Schott
and a marquee
Steve:
marquee.
Fred K. Schott
across the page.
Steve:
Yes,
Aj:
Yeah, but that's
Steve:
I
Aj:
not
Steve:
can remember
Aj:
useful.
Steve:
those.
Aj:
That's why they got removed. Those were dumb. That's...
Fred K. Schott
Says you! I've got some great
Aj:
Thanks for watching!
Fred K. Schott
stuff in Dreamweaver with those things.
Steve:
Hahaha
Aj:
Well,
Fred K. Schott
Those are
Aj:
no,
Fred K. Schott
great.
Aj:
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
Fred K. Schott
Yes,
Steve:
Oh yes!
Fred K. Schott
totally, totally.
Aj:
and you
Fred K. Schott
Yeah.
Aj:
drag it across the screen,
Steve:
Yes,
Aj:
you know,
Steve:
those
Aj:
on
Steve:
are-
Aj:
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,
Fred K. Schott
Yeah.
Aj:
no, those were, but it was gimmicks, right? It was, it was sugar water. It wasn't,
Fred K. Schott
Yeah.
Aj:
you know, nobody had a use case Well,
Fred K. Schott
Yeah, I think like...
Aj:
maybe a recording light.
Fred K. Schott
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.
Aj:
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
Fred K. Schott
Huh.
Aj:
use data to put the data data attributes. What's
Fred K. Schott
Yep.
Aj:
the right word attributes? in the HTML so that the JavaScript actually has has everything it needs right there in
Fred K. Schott
Yeah,
Aj:
the HTML
Fred K. Schott
so
Aj:
back
Fred K. Schott
you're
Aj:
in the
Fred K. Schott
getting
Aj:
truth
Fred K. Schott
to
Aj:
and
Fred K. Schott
something
Aj:
Dom
Fred K. Schott
very
Aj:
days
Fred K. Schott
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
Aj:
Thanks for watching!
Fred K. Schott
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.
Aj:
Tell me more. Or actually,
Steve:
So.
Aj:
wait. Oh, go ahead, Steve.
Steve:
Now go ahead and finish that and then I'll go down the path I'm gonna go.
Fred K. Schott
You're muted. I can't
Steve:
You just
Fred K. Schott
hear you
Steve:
muted
Fred K. Schott
if you're talking.
Steve:
yourself,
Fred K. Schott
I'm sorry.
Steve:
AJ. Your mouth moving, but no sounds coming out. There you
Aj:
I
Steve:
go.
Aj:
had a different question to ask that is also going to take us down a different path or back to a previous path.
Steve:
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?
Fred K. Schott
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,
Steve:
Yeah, something
Fred K. Schott
was
Steve:
like
Fred K. Schott
when
Steve:
that.
Fred K. Schott
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.
Steve:
So in other words, you would be able to have, okay, this page is static, but this page is server rendered.
Fred K. Schott
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.
Steve:
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
Fred K. Schott
I think
Steve:
say,
Fred K. Schott
the
Steve:
OK,
Fred K. Schott
way it's
Steve:
this
Fred K. Schott
actually
Steve:
is server
Fred K. Schott
being implemented
Steve:
rendered.
Fred K. Schott
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.
Steve:
So you have to tell it specifically to be static as compared to telling it to be server rendered.
Fred K. Schott
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.
Steve:
Got it. All right, AJ, you're up.
Aj:
Okay. Yeah.
Steve:
AJ, there
Aj:
Yeah.
Steve:
you go.
Aj:
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
Steve:
Front matter, yes.
Aj:
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
Fred K. Schott
Yeah.
Aj:
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
Fred K. Schott
So.
Aj:
view, the view that you, the view is the JSON and the view is also the HTML.
Fred K. Schott
I'll use your favorite phrase, which is, well, you can build whatever you want with this, which is that
Aj:
Yeah!
Fred K. Schott
if you wanted to bring an MVC, you can do that. If you want to make database calls in that
Aj:
What?
Fred K. Schott
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
Aj:
I did.
Fred K. Schott
architecture you want to bring to that, you're free to do so.
Aj:
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,
Fred K. Schott
Yeah.
Aj:
so I just, just.
Fred K. Schott
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
Aj:
was
Fred K. Schott
is
Aj:
se
Fred K. Schott
an audience that's kind of made the jump to
Aj:
separation
Fred K. Schott
react where they're not thinking.
Aj:
of con separation of concerns, separation
Fred K. Schott
Yes.
Aj:
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
Fred K. Schott
Yeah.
Aj:
it different thing. As I said, my
Fred K. Schott
Well,
Aj:
other, my last
Fred K. Schott
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.
Aj:
Well,
Fred K. Schott
Astro
Aj:
I mean,
Fred K. Schott
is
Aj:
that's
Fred K. Schott
way
Aj:
a lot
Fred K. Schott
more on the
Aj:
of
Fred K. Schott
remix
Aj:
what I see.
Fred K. Schott
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
Aj:
Well,
Fred K. Schott
for you. What you bring to that is up to you.
Aj:
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?
Fred K. Schott
Remind me, what is arrow?
Aj:
Okay, you don't think about arrow, that's fine.
Fred K. Schott
I think I answered your question, but I'm curious. I'd love to know what arrow it is.
Aj:
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
Fred K. Schott
See
Aj:
the
Fred K. Schott
ya.
Aj:
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.
Fred K. Schott
Yeah, interesting.
Aj:
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.
Fred K. Schott
If anyone's, have you used lit HTML? This is reminding me a lot of that.
Aj:
I've heard
Fred K. Schott
And also
Aj:
of lit
Fred K. Schott
solid
Aj:
we've
Fred K. Schott
JS
Aj:
had
Fred K. Schott
is
Aj:
we've
Fred K. Schott
very
Aj:
had.
Fred K. Schott
into the reactive data here.
Aj:
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.
Fred K. Schott
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
Aj:
But
Fred K. Schott
to
Aj:
how?
Fred K. Schott
play around. I'd love to
Aj:
How
Fred K. Schott
see
Aj:
do
Fred K. Schott
an
Aj:
I do it?
Fred K. Schott
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.
Aj:
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
Fred K. Schott
Yeah,
Aj:
you output.
Fred K. Schott
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
Aj:
Okay.
Fred K. Schott
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.
Aj:
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
Fred K. Schott
There
Aj:
we've
Fred K. Schott
are
Aj:
got.
Fred K. Schott
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
Aj:
Well,
Fred K. Schott
these attributes
Aj:
Alpine's
Fred K. Schott
that.
Aj:
jQuery 4.0, right? I mean,
Fred K. Schott
Yes. Yeah. I could
Aj:
it's
Fred K. Schott
see
Aj:
just,
Fred K. Schott
that,
Aj:
it's
Fred K. Schott
uh,
Aj:
just,
Fred K. Schott
that analogy.
Aj:
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
Fred K. Schott
Right, right.
Aj:
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.
Fred K. Schott
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,
Aj:
I,
Fred K. Schott
I get
Aj:
yeah.
Fred K. Schott
a similar
Aj:
I,
Fred K. Schott
vibe from Alpine.
Aj:
so do you, do you, it sounds like you're not in the tailwind camp.
Fred K. Schott
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.
Aj:
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.
Fred K. Schott
So
Aj:
It's like
Fred K. Schott
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
Aj:
But
Fred K. Schott
gotta do. It's just a
Aj:
you
Fred K. Schott
pain.
Aj:
don't really have to do
Fred K. Schott
You don't
Aj:
that.
Fred K. Schott
get scoping.
Aj:
You don't really have to do that. You can just load a style sheet and put class names on a style sheet.
Fred K. Schott
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
Aj:
What?
Fred K. Schott
want to use the component system that I already ship.
Aj:
Do
Fred K. Schott
And
Aj:
you
Fred K. Schott
Tailwind
Aj:
really?
Fred K. Schott
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.
Aj:
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
Fred K. Schott
sure.
Aj:
repeat yourself wet write everything twice, which I totally agree with wet I mean, I
Fred K. Schott
Yeah,
Aj:
I will stop
Fred K. Schott
I'm
Aj:
if
Fred K. Schott
a
Aj:
I
Fred K. Schott
big
Aj:
look at something
Fred K. Schott
copypaster.
Aj:
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.
Fred K. Schott
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.
Aj:
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
Fred K. Schott
Yeah.
Aj:
that, that is the way that I think of these things, because I, I primarily
Fred K. Schott
Well,
Aj:
live on the backend.
Fred K. Schott
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.
Aj:
Okay, so can I move us in a different direction again?
Fred K. Schott
No, this is officially a Tailwind podcast, I'm sorry. This is, this is,
Steve:
Hahaha
Fred K. Schott
this is now the new focus. Yeah, no, of course, definitely.
Aj:
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.
Fred K. Schott
Story block.
Aj:
And that's
Fred K. Schott
Give
Aj:
one
Fred K. Schott
me
Aj:
of your
Fred K. Schott
more,
Aj:
big selling
Fred K. Schott
give me
Aj:
points
Fred K. Schott
a little
Aj:
here
Fred K. Schott
bit more
Aj:
of
Fred K. Schott
there.
Aj:
Astro, right?
Fred K. Schott
I wouldn't say it's a selling point, so
Aj:
Are you sure?
Fred K. Schott
it's
Aj:
Because
Fred K. Schott
a sponsor
Aj:
it's,
Fred K. Schott
of
Aj:
it's
Fred K. Schott
ours.
Aj:
in the main, you know, it's, it's, it's in the, the, the first below the fold section,
Fred K. Schott
Yeah, so they're a
Aj:
right
Fred K. Schott
sponsor
Aj:
after the
Fred K. Schott
of
Aj:
hero.
Fred K. Schott
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.
Steve:
AJ, you're muted again.
Aj:
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
Fred K. Schott
Headless
Aj:
render.
Fred K. Schott
WordPress, yeah, that's
Aj:
Yeah.
Fred K. Schott
a whole new world now.
Aj:
Yeah. So he, he create, is this a, is this a popular thing? Cause
Fred K. Schott
It's
Aj:
I didn't
Fred K. Schott
yeah,
Aj:
think
Fred K. Schott
it's
Aj:
it
Fred K. Schott
become
Aj:
was a
Fred K. Schott
much
Aj:
thing.
Fred K. Schott
more popular.
Aj:
And
Fred K. Schott
I think
Aj:
he.
Fred K. Schott
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.
Aj:
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
Fred K. Schott
I was
Aj:
thing
Fred K. Schott
gonna
Aj:
with
Fred K. Schott
say,
Aj:
her.
Fred K. Schott
not anymore he doesn't.
Aj:
Yeah.
Fred K. Schott
As of yesterday,
Steve:
Hahaha.
Fred K. Schott
he does not have a Roku.
Aj:
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.
Fred K. Schott
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.
Aj:
So how do
Fred K. Schott
I think
Aj:
I Astro
Fred K. Schott
for
Aj:
add
Fred K. Schott
this WordPress, it
Aj:
WordPress
Fred K. Schott
was literally a
Aj:
headless?
Fred K. Schott
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.
Steve:
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?
Fred K. Schott
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,
Steve:
Hmm.
Fred K. Schott
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
Steve:
Right.
Fred K. Schott
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
Steve:
Mm-hmm.
Fred K. Schott
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.
Steve:
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
Fred K. Schott
Yep.
Steve:
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
Fred K. Schott
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,
Steve:
All right.
Fred K. Schott
because the way the front-end sees script sees JavaScript.
Steve:
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
Aj:
and
Steve:
that,
Aj:
doesn't
Steve:
we'll
Aj:
have
Steve:
let
Aj:
to be within reason.
Steve:
Fred go first. Fred, do you have any picks for us today?
Aj:
Thank you.
Fred K. Schott
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.
Steve:
Yes, very, very good. AJ, you got any picks for us? AJ is on mute again.
Aj:
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
Steve:
Ugh.
Aj:
we're talking about Bonzi buddy yeah
Fred K. Schott
This is like if Clippy were a virus, right? That was the pitch of BonziBuddy. Yeah,
Steve:
Ha ha.
Aj:
I want people to download this sh-
Fred K. Schott
don't, don't.
Aj:
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
Steve:
That was a
Aj:
let's
Steve:
rant.
Aj:
Yeah,
Steve:
The
Aj:
yeah
Steve:
correct phrase that comes to mind there is I can stem it some, everything you just said in three words, use the platform.
Aj:
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,
Fred K. Schott
This
Aj:
if you,
Fred K. Schott
is cool.
Aj:
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.
Steve:
All right. All right. So before I go into mine, I would just want to make one correction. AJ that's sudo not sudo.
Aj:
No, it's sudo.
Steve:
Sue dough,
Aj:
No, it's sudo.
Steve:
Sue dough, sudo.
Aj:
Sudo.
Steve:
Make me a sandwich. Right.
Aj:
Sudo, sudo make me a sandwich.
Steve:
Okay, anyway,
Aj:
Sudo, say
Steve:
so...
Aj:
it correctly, Steve.
Steve:
Okay, I'll take your word for it.
Aj:
Thank
Steve:
So
Aj:
you.
Steve:
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.
Aj:
Give me a
Steve:
All
Aj:
chance
Steve:
right.
Fred K. Schott
I can't believe
Aj:
to
Fred K. Schott
you
Aj:
wake
Fred K. Schott
have a full
Aj:
up,
Fred K. Schott
band
Aj:
sweetheart.
Fred K. Schott
behind you, this entire recording just for that one bit.
Steve:
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
Aj:
Is he
Steve:
sides.
Aj:
the one that made the muffins?
Steve:
No, he is not. He's a programmer, not a baker. And
Aj:
Why'd you introduce him incorrectly?
Steve:
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
Aj:
That one got me. That one got
Steve:
Right.
Aj:
me.
Steve:
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
Aj:
Wait, hold on,
Steve:
one of those great
Aj:
run
Steve:
jokes.
Aj:
that, run that by me one more time.
Steve:
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
Aj:
But
Steve:
doesn't
Aj:
I
Steve:
work.
Aj:
didn't get it.
Steve:
Okay, I'll explain it to you offline.
Aj:
Thank you. Thank you.
Fred K. Schott
Are the lights moving faster than the car? Like there's another car with lights on it?
Steve:
Well, no,
Aj:
No, so, so.
Steve:
no, it's like you're, you're, you're already going the speed of light. So, which is the fastest
Fred K. Schott
Well,
Steve:
that any
Fred K. Schott
first
Steve:
object.
Fred K. Schott
of all, that's impossible. You can't go the speed of
Steve:
Oh,
Fred K. Schott
light.
Steve:
you're killing the joke here, man. You're killing the joke.
Aj:
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
Fred K. Schott
Whoa.
Aj:
both
Fred K. Schott
Whoa.
Aj:
agree that the conclusion is valid, but they have to come up with separate conclusions. And that's what causes
Fred K. Schott
What?
Aj:
laughter.
Steve:
Wow.
Fred K. Schott
That's
Steve:
Talk
Fred K. Schott
cool.
Steve:
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.
Aj:
You're welcome. You're welcome.
Steve:
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?
Fred K. Schott
Astor.build is the website. Check it out there. Our Discord community is awesome. I'd push anyone to go check that out.
Steve:
Yes,
Fred K. Schott
Come say
Steve:
I can
Fred K. Schott
hi.
Steve:
vouch for that. It's awesome.
Fred K. Schott
Yes, awesome. And then I am Fred K. Schott on Twitter. Until that shit burns down, I'm there.
Steve:
Right on.
Aj:
Wait,
Steve:
Alrighty,
Aj:
why would
Steve:
with.
Aj:
something that's being actively developed burn down?
Fred K. Schott
I think firing a lot of the people running it might have something to do with that. I'm not saying it will,
Steve:
Ha!
Fred K. Schott
I'm just
Aj:
Wouldn't
Fred K. Schott
saying that
Aj:
that,
Fred K. Schott
it until
Aj:
wouldn't
Fred K. Schott
it
Aj:
that
Fred K. Schott
does.
Aj:
cause it not to sink because now it's going to float up higher without all the dead weight?
Fred K. Schott
You know, I misspoke. Until the temperature death of the entire universe, I will be on Twitter.
Aj:
Yes!
Steve:
Which is billions of years down the road.
Aj:
That's what
Steve:
Okay.
Aj:
we
Fred K. Schott
Exactly.
Aj:
like to hear.
Fred K. Schott
Yeah, when we're all still using Twitter in 3033, I'll still be there.
Steve:
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.