Speaker 1: Hey folks, Welcome back to another episode of JavaScript Jabber.
Speaker 1: This week looks like I am the host this week.
Speaker 1: We usually have a few people, but Steve had something
Speaker 1: come up. I think Dan might be traveling, and so
Speaker 1: it's me today, Charles max Wood from Top End Devs,
Speaker 1: and I have a special guest. This is Sagie Carmel
Speaker 1: coming to us from the other side of the world. Sagie,
Speaker 1: do you want to let people know who you are
Speaker 1: where they might have heard of you?
Speaker 2: Sure, no problem. My name is Segie. I'm thirty years old.
Speaker 2: I started developing since seventh grade and then never stopped.
Speaker 2: I did thirteenth grade, which is funny thing that you
Speaker 2: have in Israel. You can have a specific thirteenth grade
Speaker 2: about only development. And then I work for the idea
Speaker 2: and the idea if I did programming as well, worked
Speaker 2: on some small start up the company companies, and then
Speaker 2: now I'm starting again one of my own after being
Speaker 2: in a startup company again while trying a variety of technologies,
Speaker 2: and generally people would know me from either conferences, small
Speaker 2: conferences or meetups that I'm usually trying to attend for
Speaker 2: having intending in Israel. And also it's like on YouTube
Speaker 2: and some other social media platforms.
Speaker 1: Cool. Okay, So yeah, so today we're talking about ASTRO,
Speaker 1: and I know we've talked about it before, but I
Speaker 1: think it's been a while. Are there things that are
Speaker 1: new at astro or.
Speaker 2: So inherently server server actions, just like next chance, which
Speaker 2: is a new feature that was added to as fairly recently.
Speaker 2: I genuinely I don't like using it. But one of
Speaker 2: the features that I am that is fairly new and
Speaker 2: I'm using it quite often is the way that environment
Speaker 2: variables are passed to astro. It now allows for we
Speaker 2: can add you can go to the astro config dot
Speaker 2: js or NJS and then write your environment variables over
Speaker 2: there and assigning it to right there. Now it's a
Speaker 2: secrets it's a client or service side, and then after
Speaker 2: running a small sink, you can import those directly because
Speaker 2: the code without doing process dot en or import or
Speaker 2: import dot meta. So just allow us to fairly structures
Speaker 2: side of code. Then if it doesn't exist, it just
Speaker 2: pops an error, which is amazing.
Speaker 1: Gotcha. So yeah, maybe we should just get into the
Speaker 1: fundamentals here real quick and just talk about what astro
Speaker 1: is and what the difference is between that and maybe
Speaker 1: some of the other things that people have used.
Speaker 2: All right, So Astrojas is a service side rendering framework,
Speaker 2: just like next js remix next or or when was
Speaker 2: that nuts and one else's vel kit. So all those
Speaker 2: frameworks are flavored to a certain type of front and
Speaker 2: front library. So it's either you get remixed for React
Speaker 2: and just for React, and you might get nuxt for
Speaker 2: view and s vel Kit for svelt. With the Astrogs,
Speaker 2: it's like a service side agnostic framework which does allow
Speaker 2: you to incorporate any kind of client side library into
Speaker 2: it and make components that could be rendered in the
Speaker 2: server or in the client. So if you feel like,
Speaker 2: if you feel very creative, you can take your team
Speaker 2: and just like say, okay, let's just figure out which
Speaker 2: front end library we like the most and even develop
Speaker 2: multiple components in multiple different libraries and see what works
Speaker 2: for you. So that's a really cool thing about astrogs
Speaker 2: that allows you this freedom. I don't recommend having multiple
Speaker 2: multiple components in the same multiple front and frameworks in
Speaker 2: the same project, but it's sure fun if you're trying
Speaker 2: to figure out what's your team So it allows it
Speaker 2: and it's amazing.
Speaker 1: So I guess one thing that I'm wondering just diving
Speaker 1: into this, right because you know, I've played a little
Speaker 1: bit with next I've done some stuff with some of
Speaker 1: the others as well. They kind of have this cohesive
Speaker 1: idea where everything. I haven't used next JS since they
Speaker 1: did server side components, so I don't know how that
Speaker 1: all plays, But.
Speaker 2: What did you So I'm curious, what do you use?
Speaker 2: What if if you need to run it?
Speaker 1: So my full time job, I work in Ruby. Actually
Speaker 1: I'm so so you know, I can't reach for a
Speaker 1: jackal or something like that for my, uh, server side stuff,
Speaker 1: and then if I need client side stuff, then I'll
Speaker 1: just I'll just import something into the front end. But
Speaker 1: a lot of times I'm doing rails and so it
Speaker 1: you know, it does a back end process and a
Speaker 1: front end process, and you know they're different because the
Speaker 1: back ends rails in the front end something else. A
Speaker 1: lot of times that's hot wire stimulus. But yeah, when
Speaker 1: I'm fiddling with something like an next JS, they kind
Speaker 1: of have a cohesive way of managing stuff right where
Speaker 1: it's like, hey, you kind of do it the next
Speaker 1: JS way and it just kind of works and it
Speaker 1: sounds like Astro the way that works, and if I
Speaker 1: remember right, they've got islands and so you can say
Speaker 1: this island does this and this island does that, and
Speaker 1: so you can kind of mix and match. So are
Speaker 1: their best practices for astro kind of above and beyond
Speaker 1: the isolate your pieces or.
Speaker 2: Generally generally not. But that's simplicity to what makes it beautiful.
Speaker 2: So let me give you. Let me give you an example.
Speaker 2: So in next JAS where you could have rendered service
Speaker 2: side component inside clients component, inside server components and sye
Speaker 2: side components. That makes this entire ordeal of tracking what
Speaker 2: everything in what each file is doing is very complex,
Speaker 2: very complexed. It's like just like inside each other. It's
Speaker 2: very not understandable.
Speaker 1: Well, I've heard that complaint from React developers just in
Speaker 1: general is yeah, you start mixing your server components with
Speaker 1: your front end components. In ay, it's not always straightforward
Speaker 1: what's going to do what?
Speaker 2: This is very very common and one of the issues
Speaker 2: that it suffers from the if for those who did
Speaker 2: use nextjs are normally using server actions and then try
Speaker 2: to revalidate the information for front end. It needs to
Speaker 2: be pretty, it needs to be beautiful, and most of
Speaker 2: the issues about revalidation that it just doing the hydration
Speaker 2: in its own way. So hydration that is done using
Speaker 2: NEXTJS with the revalidation from the service side. Rendering component
Speaker 2: must do like a full like swamp of the page,
Speaker 2: but it doesn't let you opt in about how you
Speaker 2: should do it unless you're doing partial partial pages rendering.
Speaker 2: So it's very convoluted and there are many ways. If
Speaker 2: you ever saw the docks. If you've ever seen the docks,
Speaker 2: those docks are amazing, but like they contain a lot
Speaker 2: of information for nested routes and grouping routes and to
Speaker 2: have partial rendering and in astral it just like very simple.
Speaker 2: Just like if you want to opt out and let
Speaker 2: a server component like wait a bit and finish and
Speaker 2: then hydrate, you just write server colon deferre on the
Speaker 2: component and then what it does that it just hold
Speaker 2: the request and just keep this spot with any loading
Speaker 2: component that you choose, and then when it's ready, it
Speaker 2: just swamps it back. But just learning it for this
Speaker 2: specific island. So it's very simple and it's amazing and
Speaker 2: the fact that you're just staying in the jobscript ecosystem
Speaker 2: allows you to also pass and split code accordingly. So okay,
Speaker 2: if you don't want any just I'm just hijacking. This
Speaker 2: final question is for something.
Speaker 1: No, you're fine, but let me just make sure that
Speaker 1: I understand it. So essentially, what you're saying is is
Speaker 1: that if I have a server component that you know,
Speaker 1: I need to wait for it to you know, do
Speaker 1: something or render something or things like that. ASTRO gives
Speaker 1: me a way of kind of controlling the hydration and
Speaker 1: rendering cycles so that I don't get lost in kind
Speaker 1: of the middle of the Oh. Well, you know, this
Speaker 1: is a web front end component versus you know that
Speaker 1: has a server component has another thing, and so you know,
Speaker 1: I can tell it, hey, just render when you're done,
Speaker 1: or you know, hey, you're you're you know, I want
Speaker 1: you to manage the life cycle in this way.
Speaker 2: That's that's very correct, And I only talked about sever
Speaker 2: de third, which is allowing to server components to be
Speaker 2: rendered later. But you can also have client client load
Speaker 2: that is being loaded with criterias. For example, for those
Speaker 2: who use native HTML, they might be aware that you
Speaker 2: can load CSS based on the width of the screen.
Speaker 2: So it's immediate story that allows you to load styles
Speaker 2: based on the screen to you know, just saves like resources.
Speaker 2: You can also do the same thing with astro and
Speaker 2: components that they're are rendered in the client side. So
Speaker 2: we just talked about severybody for for server components, but clients,
Speaker 2: but client components also have their own like ecosystem and
Speaker 2: support that works amazing behind the scene and just just works.
Speaker 2: And it's clear what it's made. It's not the components.
Speaker 2: It's not the responsibility of the component to decide whether
Speaker 2: or not it's server or clients. It's whoever calls it
Speaker 2: makes the decision. To me, just like under all logical reasoning,
Speaker 2: it just makes sense, you know, just sleep.
Speaker 1: Yeah. So so I guess the other question that I
Speaker 1: have is what what problems does this solve other than
Speaker 1: just you know, kind of knowing you know what's doing
Speaker 1: what and when and how and why. You know, it's
Speaker 1: one thing to talk about kind of the nitty gritty
Speaker 1: of Okay, you know this is going to render at
Speaker 1: this time in this way and things like that, but
Speaker 1: you know, ultimately usually what we're talking about is user experience, right,
Speaker 1: And so the reason I do any of this stuff
Speaker 1: is because it either makes my life easier to keep
Speaker 1: track of what's going on, or it makes the user
Speaker 1: experience easier. So does this solve one problem more than
Speaker 1: the other.
Speaker 2: You're talking about the developer experience or the user experience.
Speaker 2: I for this specific instance, sounds like you're talking about
Speaker 2: the developer experience.
Speaker 1: It could be either one. I guess what I'm saying
Speaker 1: is sometimes you do this for user experience right where
Speaker 1: it's like, hey, you know, we just render the whole
Speaker 1: thing when it's done, instead of hey, you kind of
Speaker 1: order rendered, but you're still waiting on this other thing
Speaker 1: to render and then it finally renders, and then okay,
Speaker 1: you know it's still you know, waiting for something else,
Speaker 1: or there's something else you know, and another component that's
Speaker 1: gonna you know, it's going to hook into this component
Speaker 1: and change things, and and so you know, it sounds
Speaker 1: like what Astro's doing is is giving you a good
Speaker 1: way to manage a lot of that life cycle and
Speaker 1: that that work that flow, you know, whether it's data
Speaker 1: or you know, visual components or other things. And so
Speaker 1: some of that a lot of times is just down
Speaker 1: to it's nice for the user if it just kind
Speaker 1: of loads all at once or loads in the right way,
Speaker 1: or things like that. And for some of this, though,
Speaker 1: when you're talking about, hey, you've gotten tested server components
Speaker 1: and for on end components, some of that it sounds
Speaker 1: like it just makes it easier for the developer to
Speaker 1: track and debug when things are working. So I guess
Speaker 1: what I'm driving at is where where do the benefits
Speaker 1: usually come in. Is it more developer experience thing or
Speaker 1: is it more of a use or experience And when
Speaker 1: when do you start making the decision to make these
Speaker 1: trade offs.
Speaker 2: So I'll break it down from the beginning. Astro is mainly,
Speaker 2: surprisingly enough, the initial intention of astro to be a
Speaker 2: content er than framework. So when you when you ever
Speaker 2: you're creating blogs, this should be this should be. And
Speaker 2: I'm not like I'm obviously biased here, but I'm saying
Speaker 2: that to everyone. If you ever wanted to create a blog,
Speaker 2: astro jas just provide the best integrations and the best
Speaker 2: things to get the blog going. And it's just service
Speaker 2: side components with pages and routing the sense most of
Speaker 2: it will be translated to HTML, CSS and JavaScript. If
Speaker 2: you're doing fine side some client side, then this is
Speaker 2: your go to framework. And what makes it so great
Speaker 2: obviously that if you just if you don't need the
Speaker 2: service side rendering. You want to create static, static apps,
Speaker 2: it will just do it. So that's the first thing
Speaker 2: that you want to think about when you're trying to
Speaker 2: choose Astro. Let's just say, but you want to create
Speaker 2: a more complex application with like off and logins and
Speaker 2: so one, you need service any So in this instance,
Speaker 2: the reason where astro shines is both its usages of
Speaker 2: is integration from the developers experience using CSS and obviously
Speaker 2: it's speed working to using the Turbo engine behind the scenes.
Speaker 2: So it just works amazingly and like many benchmarks has
Speaker 2: been done to compare between many frameworks, and astrog just
Speaker 2: tends to come on top. It's just because it's so
Speaker 2: fast both from build time and obviously showing it because
Speaker 2: it's then translate all the code into native no JS code,
Speaker 2: it obviously has its own functionality behind it. So it
Speaker 2: allows you to both have an amazing developer experience and
Speaker 2: an amazing user experience. The issue where it lacks is
Speaker 2: currently popularity doesn't community, it just lasts popularity, so the
Speaker 2: difference between the two. So it's like I can go
Speaker 2: into discord. There is an AI bot that helps me
Speaker 2: and a fiber community that helps me with whatever I need.
Speaker 2: That masking there usually get a response ten like lie
Speaker 2: from a person or a few seconds they using an
Speaker 2: AI and that's like where usually it lacks. So this
Speaker 2: is one of the disadvantages of why Astro is Like
Speaker 2: maybe you're thinking about it, you're not sure, but it's
Speaker 2: like Astrogas is kind of lacking on popularity. So when
Speaker 2: a person comes to me, he says, well, I don't
Speaker 2: know what Astro is, so they most likely won't pick
Speaker 2: it because they don't know. But after they do, it's
Speaker 2: like I never looked back after choosing Astra from from
Speaker 2: my projects.
Speaker 1: Gotcha? Okay, So let's say that I want to get
Speaker 1: started with Astro. Then it's like, okay, you know what
Speaker 1: you know Soggy, He's smart. He convinced me. He you know,
Speaker 1: I'm going to go do this right? So where do
Speaker 1: I go from there?
Speaker 2: So the Astra documentation is an amazing place to start.
Speaker 2: Normally speaking, that will just tell you you, look, you
Speaker 2: need to have like a PNPM or NPM and just
Speaker 2: run the CLI. Just like you're starting VAT as a
Speaker 2: project or you're starting an HS. They have their own CLO.
Speaker 2: Just starting a project, they ask you what template do
Speaker 2: you want? Like is that a blog? Is it a
Speaker 2: starting side rendering? You just start from there. It just
Speaker 2: plops out a template with a basic Astra website. You
Speaker 2: sort of fiddling around. It's just like, oh, it's very clear.
Speaker 2: This components has this logect. It looks like this, and
Speaker 2: it has its own styling and it's favorite. But that's
Speaker 2: where you start, and then you can move forward to
Speaker 2: whatever your project needs. If you want to move to
Speaker 2: more or interaction oriented websites, then you go on and
Speaker 2: install the integration with React, viewers, vellop or even not
Speaker 2: even just that. You have quick, you have solid, you
Speaker 2: have like you have every and then like the world
Speaker 2: is your oyster.
Speaker 1: Right, So I guess the other thing that I'm wondering
Speaker 1: then is we dive in is how does astro then
Speaker 1: interact with React or view or whatever? Right.
Speaker 2: I don't know how they created their adapter, but essentially
Speaker 2: you're downloading the React package, but you're also downloading an
Speaker 2: adapter for Astro JS. And just like VT where you
Speaker 2: can assign integrations to a project like tailwind CSS for
Speaker 2: a very used React with with Tailwind knows that the
Speaker 2: vat configuration needs to get tail in CSS, which Astro
Speaker 2: also supports, and then like it does the same thing
Speaker 2: for reacting, and then you just tweet it like a
Speaker 2: React act. But once you need to use it in
Speaker 2: an Astra component, because you probably will have to, then
Speaker 2: you need to either decide if it's a client, if
Speaker 2: it's a client component or a server component, and then
Speaker 2: you add the client colon low directive which love tails it.
Speaker 2: These components now need to have the clind tight interactivity.
Speaker 1: Okay, that makes sense. So you know this is this
Speaker 1: goes back to what you were talking about before, where
Speaker 1: you know, now it's working with life cycle and you
Speaker 1: know all of the other pieces. You have an adapter
Speaker 1: there that manages all that and so it it's not
Speaker 1: just kind of this, Hey, here's a rapper and we're gonna,
Speaker 1: you know, do black magic to make it work. It
Speaker 1: actually it knows about React and it knows how React works.
Speaker 1: And so at the end, at the end of the day,
Speaker 1: in that island, it says, Okay, then this is the
Speaker 1: way that I'm going to hook in and manage React
Speaker 1: and allow React to do its work exactly. You got it. Yeah,
Speaker 1: that makes a lot of sense.
Speaker 2: So it does, right, It doesn't should be that simple.
Speaker 1: So I guess the other question I have is I
Speaker 1: hear some people basically say, well, I like Astro because
Speaker 1: it lets me use more than one framework, and that
Speaker 1: sounds like a headache to me, to.
Speaker 2: Be honest, that's generally.
Speaker 1: That now I have to learn two frameworks plus how
Speaker 1: Astro works. And I guess the flip side of the
Speaker 1: argument is, well, if I use NEXTGS and I only
Speaker 1: have to really know React plus whatever next ads. So
Speaker 1: so when should I be reaching for the Hey, I've
Speaker 1: got a lower learning curve in next JAS versus I've
Speaker 1: got you know, whatever niceties that Astro gives me. Versus Hey,
Speaker 1: I've kind of got sources from all kinds of stuff,
Speaker 1: and so I I have some Angular stuff and some
Speaker 1: React stuff, and so I'm gonna oh, so first, why
Speaker 1: do you make that decision?
Speaker 2: So normally speaking, people would I'll separate between those who
Speaker 2: knows React and those who don't React, because there is
Speaker 2: a small distinction needs to be made. So if you
Speaker 2: know React, knowing XJS is pretty simple. The only thing
Speaker 2: you need to take control control on is when it's
Speaker 2: a server component or what you can and can do
Speaker 2: it within a server component and when it's a client component,
Speaker 2: and what you can and can do in a client combone.
Speaker 2: We start from that. The second thing is if you know,
Speaker 2: if you know React, the Astro writing style very similar
Speaker 2: to how you write and reacts. It's a jsex style,
Speaker 2: but it's not exactly JSX, And I'll explain the distinction
Speaker 2: in JSX because well, it's a React framework used to
Speaker 2: based on React, and React used to be a front
Speaker 2: end library. So if you wanted to write, for example, class,
Speaker 2: which is the htmil director for class in CSS, then
Speaker 2: you would write class name. The reason behind the reason
Speaker 2: behind this is because well, you cannot write the keyword class.
Speaker 1: And React JavaScript so you can't ye because.
Speaker 2: Word in jalousy opted out for a class name. But
Speaker 2: in astral you can write class. And the reason is
Speaker 2: because it's service side component. It trenders into server and
Speaker 2: you're writing like it's very similar. It's a better version
Speaker 2: of JSX because you can write class, but you're getting
Speaker 2: a raw htmail output from that, and essentially it just
Speaker 2: doesn't do any interpolation. However, if you want to do
Speaker 2: like let's just say map between an information to components
Speaker 2: using htmail what that you normally do is you would
Speaker 2: tweet it like React, but you won't write a key
Speaker 2: equals to I or something because again you're not running
Speaker 2: it in the client. It's javascripted runs in the server,
Speaker 2: so when so this is the first operation. So if
Speaker 2: you know React, knowing how astral works, it's just amazing.
Speaker 2: You just need to get used to the concept that
Speaker 2: Astra components are servers side rendered and should mostly. I
Speaker 2: never create a client side server a client side component
Speaker 2: for Astro, but Astra components should normally and always be
Speaker 2: service side. So you don't write so for whoever you
Speaker 2: used to write on click on components now it doesn't
Speaker 2: work with Astro components because they intended to be on
Speaker 2: service now those for no who knows React is amazing.
Speaker 2: If you don't know React, generally still using Astro and
Speaker 2: understanding of JSX components, it's still simple. Know in JSX
Speaker 2: it's not the React framework. You're learning to write code
Speaker 2: that maps to HTML in the end, even if you
Speaker 2: don't know the JSX style, can still map code that
Speaker 2: renders to HTML in the end using the HTML template,
Speaker 2: the basic HTML template, and again it should be very
Speaker 2: clear of how you do it. It so that answers
Speaker 2: both of those questions. So if you do or you don't,
Speaker 2: just please try. And I'm pretty sure that you would
Speaker 2: like using it without the JSEX syntax if you're not
Speaker 2: familiar with it, or with the JX syntax if you are.
Speaker 1: All right, So yeah, I mean I think I'm getting
Speaker 1: the picture here. So what kinds of things do people
Speaker 1: build with astro or what kinds of things should people
Speaker 1: reach for Astro over something like next JSS.
Speaker 2: So again, I use my Astro is my Swiss army knife.
Speaker 2: So just like it creates everything from locks to more
Speaker 2: interactive websites. And I didn't see any reasons why to
Speaker 2: use next JS more than I would like to use Astro.
Speaker 2: The main issues that I haves that your vendor locked,
Speaker 2: which is one of the most complaints that I hear
Speaker 2: about next JS. It's just like you're locked to using
Speaker 2: self to fully enjoy all the capabilities of next gess,
Speaker 2: which is feels like a cheap move against against developers.
Speaker 2: Give me a framework that is open source and allows
Speaker 2: me to do whatever I want. Why do I need
Speaker 2: to be vendor locked? And I don't really see a
Speaker 2: reason why not to use next JS. Unless you have
Speaker 2: a really complex, insanely complex website, and the scale might
Speaker 2: be something that asked for won't reach, though I think
Speaker 2: it would reach. I really don't see a reason why
Speaker 2: not to use astro versus nextgs.
Speaker 1: Okay, it sounds like they kind of operate in a
Speaker 1: lot of the same space, right they Yeah, they give
Speaker 1: you solutions to a lot of the same problems. So
Speaker 1: what have you built with astro then?
Speaker 2: So I've created the census for for the CBS, for
Speaker 2: censuses for whoever doesn't know. So, census is like a
Speaker 2: way that you can gather information about population or everything
Speaker 2: that the government wants the people to know, the growth
Speaker 2: rate of population within regions or whatever. So I've created
Speaker 2: the website that does it within Israel, which is a
Speaker 2: census CBS col for whoever is outside of Israel won't
Speaker 2: be able to get it. You probably will need a VPN.
Speaker 2: But this is the website that I've created. It's very static,
Speaker 2: and most of it and most of the same interactivity
Speaker 2: was done using CSS, which is another topic that I
Speaker 2: haven't really talked about, but it's really important for understanding
Speaker 2: why why service side is slightly superior than client site
Speaker 2: and we'll get to it. But so I used created
Speaker 2: this website which is mostly service side interactivity with the
Speaker 2: smidge of client site that I've gotten from connecting the
Speaker 2: graphs using Luker, which is a Google product with big Query.
Speaker 2: So that's why.
Speaker 1: So this is the official census site for Israel initial.
Speaker 2: God Census, the CBS. It's like the Census Bureau Statistic
Speaker 2: CBS something like that.
Speaker 1: Right, So you you said, I want to dig into this.
Speaker 1: So you said that a lot of the what animation
Speaker 1: was done with CSS, and that was important for how
Speaker 1: you're using astro, So you want to explain that.
Speaker 2: So, yes, I would love that. I love it. So
Speaker 2: in CSS. Normally people people from a back end experience,
Speaker 2: tend to underestimate the CSS. But CSS gives you a
Speaker 2: lot of power to do many of what fun and
Speaker 2: libraries gives to you. But it does it for free.
Speaker 2: So we'll start for animations. Animations you pretty much.
Speaker 1: Get Hang on, I'm going to back you up for
Speaker 1: a second, because it doesn't do it for free, but
Speaker 1: you don't have to write code. You don't have to
Speaker 1: write as much code in JavaScript.
Speaker 2: What do you mean it doesn't do it for free?
Speaker 1: So so CSS has it built in, right, and so
Speaker 1: you usually have some style and some of the style
Speaker 1: is animate for this long in this way. And I
Speaker 1: think what you mean by for free is that beyond that,
Speaker 1: you don't really have to do any extra work, right,
Speaker 1: you don't have to you don't have to write out
Speaker 1: the animation in JavaScript, you don't have to tell it
Speaker 1: how to do the transition or anything like that. All
Speaker 1: of that stuff's just built into your CSS. And the
Speaker 1: other part for free is that the CSS is really
Speaker 1: really highly optimized to just work without a lot of
Speaker 1: computing overhead, whereas doing it in JavaScript is I mean,
Speaker 1: I've seen stuff done in JavaScript that doesn't cost you
Speaker 1: a lot in your computing computing resources, but the CSS
Speaker 1: is already optimized and does it way more efficiently. Yes,
Speaker 1: So I just don't want people thinking it's just you know, automatic,
Speaker 1: It feels that way, but yeah, I get it.
Speaker 2: So I'll advert So what I'm saying for free in
Speaker 2: this instance is what I'm saying is that for I'll
Speaker 2: be explicit about this. So most of the animations needed
Speaker 2: to be to most of them, not all, but most
Speaker 2: of the animation needed to be to create it to
Speaker 2: be created are very simple like you however, like a click,
Speaker 2: like a target, like like shaders, like shading behind an element,
Speaker 2: so on and so forth. Most of these animations, including scaling,
Speaker 2: it's just like you. You get it for CSS and
Speaker 2: when I mean, now for free'z just like it's easy,
Speaker 2: it's clear and yeah, and like you, you, once you
Speaker 2: get into it, you pretty much gathered like most of
Speaker 2: the animation needed. Now, sometimes if you need something more complex,
Speaker 2: like I just say a confetti, or you want to
Speaker 2: have like a more like three animations, whatever, then you
Speaker 2: then normally writing it in CSS, though is possible is
Speaker 2: not really reasonable, then then you opt out to JavaScript.
Speaker 2: And why I'm recommending CSS within astro because there are
Speaker 2: front end I'm sorry about it, but there are seven
Speaker 2: ways to load CSS into front end, which is external styling,
Speaker 2: global styling, module styling, tailwind or any other one of
Speaker 2: those tailwind and you have like what it was it
Speaker 2: seven and astro you have, you would you probably mostly
Speaker 2: used one, which is scope styling. So scope styling essentially
Speaker 2: when you create an ASTRO component, it allows you to
Speaker 2: create the styling which is being used only for that component.
Speaker 2: So let's just say I have a class named button,
Speaker 2: so this class that I've created for the button will
Speaker 2: only be used for that button. And if I have
Speaker 2: a class different player and that does something different, it
Speaker 2: just like it's completely separate and it behaves and behaves
Speaker 2: like it looks whatever you've decided to be looked. So
Speaker 2: so that's what I'm saying with CSS, and now that
Speaker 2: you have more exvanced selectors, like for example, the has selector,
Speaker 2: which is incredibly popular and thank god it was created,
Speaker 2: you would also have the starting style. Do you know,
Speaker 2: by the way, for those who doesn't know, starting style
Speaker 2: is as a new CSS I would say, I forget
Speaker 2: what's the name. It's a query. So when a component
Speaker 2: is being rendered to the screen, it creates the animation
Speaker 2: from the start of it. So for example, if you're
Speaker 2: hiding something and you're showing it using a display, it
Speaker 2: would just show up. It will just show up constantly.
Speaker 2: And what I'm saying is it's being done for feit
Speaker 2: just like people like you would have used like a
Speaker 2: bunch of JavaScript to make the animation happens when it's
Speaker 2: being loaded, But now you get it for free using
Speaker 2: CSS and you don't have to worry about this. This
Speaker 2: is what essentially went.
Speaker 1: Yeah, yeah, that makes sense. So so yeah, so you've
Speaker 1: got the scope styling, and that's the power that you're
Speaker 1: getting as far as CSS goes from your from using
Speaker 1: astro right, because then you can say, hey, stuff in
Speaker 1: here animates this way. You know, stuff in here hover
Speaker 1: it's hover states react in this way, and I can
Speaker 1: I can have that same kind of thing. I didn't
Speaker 1: like your button example, because usually you want all your
Speaker 1: buttons to look more or less the same. But yeah, okay,
Speaker 1: well button, a lot of your other Yeah, what you're
Speaker 1: talking about here is okay, you know, maybe I have
Speaker 1: a menu component and so you know the dropdowns or whatever. Right,
Speaker 1: if I hover there, the hover states are going to
Speaker 1: be unique to that component. But then if I have
Speaker 1: I don't know, graph or a chart and I hover
Speaker 1: over a particular data point, then that's going to show
Speaker 1: things up differently. Right. It might give me the numbers
Speaker 1: and a little box and things like that, but I
Speaker 1: don't want it to pop in in the same way
Speaker 1: that the menu does. And so you know, I can
Speaker 1: set the specific cover states. And sure you can do
Speaker 1: that by you know, giving it a class and then
Speaker 1: you know, doing a bunch of other wrangling. But if
Speaker 1: you've got it scope to just that component and you
Speaker 1: know that, okay, any chart component's going to have hover
Speaker 1: states and animation states and click states this way, then
Speaker 1: then you know that you've got everything kind of set
Speaker 1: up that way and you don't have to worry about, Okay,
Speaker 1: is this going to bleed over to something else because
Speaker 1: it's all scope to just that kind of a component.
Speaker 2: Amazing, you got it.
Speaker 1: Yeah, that's cool. I think I've seen this in other frameworks,
Speaker 1: but they wind up doing some of the other CSS
Speaker 1: magic to make it work.
Speaker 2: Yeah, and I'm happy that Astra has it. It also
Speaker 2: has some cheat sheets which with some shortcuts. So for example,
Speaker 2: if you're creating a class. Normally, in order to create
Speaker 2: a class and condition whether or not a class would
Speaker 2: exist on a component, but just say we're talked about
Speaker 2: all the service side rendering and not talking about the
Speaker 2: land side, you would have to be like doing string
Speaker 2: interpolation over the class. Like usually we would have a
Speaker 2: class which is class A, class B, class C, and
Speaker 2: you have space between. Right when using Astro, there is
Speaker 2: something that is called class list which allows you to
Speaker 2: pass on on the rate which is containing all the
Speaker 2: name and allows you to condition whether or not a
Speaker 2: name of a class would exist, whether or not if
Speaker 2: if you condition, it would just say active call on
Speaker 2: something that is brilliant, and if it's true, it would
Speaker 2: be inserted to as a name of a class, and
Speaker 2: if it isn't, it will just it will just disappear.
Speaker 2: And it's just like it's a nice shortcut for managing
Speaker 2: your components.
Speaker 1: Yeah, I've seen that in some of the things that
Speaker 1: I've like, I've I've gotten HTML templates that have ASTRO
Speaker 1: in them, and I've seen those directives so.
Speaker 2: Amazing. The next thing what they'll be interesting about is
Speaker 2: also the specific one that I've created. I also use HTMX.
Speaker 2: I'm not sure if it's within the scope of this conversation,
Speaker 2: but if you're curious to hear about this and why
Speaker 2: did I use HTMX, I'll be more than happy to do.
Speaker 1: Well. Yeah, I mean it is interesting. We've had Carson
Speaker 1: Gross on the podcast talking about HTMX and it's a
Speaker 1: it's a tool, or it's almost a patternal anyway, but
Speaker 1: it's it's a really handy way of managing a lot
Speaker 1: of your state and things like that, and it seems
Speaker 1: like with ASTRO it would play pretty nicely because again
Speaker 1: you've got these pockets of functionality right that you're managing
Speaker 1: as islands, and so HTMX it doesn't think of it
Speaker 1: quite that way, but I could see how you could.
Speaker 1: You can make a mesh.
Speaker 2: Yes, So about the integration between HTMX and ASPER, it
Speaker 2: pretty much nailed the differences that like HTMX would normally
Speaker 2: need you to return an HTML template which you can
Speaker 2: create using astro. You can create the estra the HTML temple,
Speaker 2: just return them so and then it will just swap
Speaker 2: them directly into the client to whatever side that you need.
Speaker 2: And so you don't even need the client side of
Speaker 2: like fiber b for the simplistic stuff, because you would
Speaker 2: have HTMX doing all the swapping together with ASTRO. So
Speaker 2: ASTRO will hold the state using the database and would
Speaker 2: vendor the HTML and HMX will just swap it where
Speaker 2: it's needed based on the interaction.
Speaker 1: Yeah, we do something similar with RAILS and Turbo. It's
Speaker 1: amazing and so yeah, and it's the same idea, right,
Speaker 1: It's like hey, you know, uh, you know, replace or
Speaker 1: insert after insert before whatever, right, and you just throw
Speaker 1: some HTML back and so RAILS renders the HTML with
Speaker 1: the data from the database and yeah, puts it into
Speaker 1: the page based on what you're telling it, following the
Speaker 1: conventions in Turbo, and I know HTMX basically works the
Speaker 1: same way exactly.
Speaker 2: And one last thing that it's important to mention and
Speaker 2: why I recommend using astro and why it is so
Speaker 2: fun to use astro, which is like a JavaScript both
Speaker 2: the front and the back, which is the inherent part
Speaker 2: at about code splitting. So let me give you an example.
Speaker 2: I'll just say I've created an ID for a component, right,
Speaker 2: And let's just say I've created this ID, and I
Speaker 2: need this ID to be used in a service side
Speaker 2: component and in a client side component. Usually passing those
Speaker 2: between the client side and the service side would be
Speaker 2: le'll just say headache, especially if you're I mean you're
Speaker 2: from Ruby on rails, like do you know how to pass?
Speaker 2: Like I just I need this ID and the client
Speaker 2: side whateveration because those are two completely different languages. But
Speaker 2: in astray it's both on the same. So I create
Speaker 2: a constant ideas file and my in the idea is
Speaker 2: being shared to the service side components and to the
Speaker 2: client side components, so it's will duplicate it to the
Speaker 2: server and the client and just being used and it's
Speaker 2: interlace and it's amazing.
Speaker 1: That's cool.
Speaker 2: Yeah.
Speaker 1: So I'm a little curious because I think we're kind
Speaker 1: of talking around some of the fundamentals of ASTRO and
Speaker 1: you know, some of the you know, more common use cases.
Speaker 1: Where where do you get more advanced with ASTRO? Where
Speaker 1: where do you get into features that I guess maybe
Speaker 1: aren't as simple or common but are still powerful.
Speaker 2: Can you give me an example.
Speaker 1: I don't know.
Speaker 2: What will be let's just let's flip the script. What
Speaker 2: will be an advance? So what would you consider the
Speaker 2: advanced when you're writing rubion rails with whatever front end
Speaker 2: frameworks to your front and library with your decision.
Speaker 1: What I mean, usually you're getting into, you know, more
Speaker 1: of I guess the optimization stuff, you know, where it's hey,
Speaker 1: you know, I'm optimizing the way I access my database,
Speaker 1: or you know, maybe I have some really really complicated behaviors.
Speaker 1: But I know people generally solve a lot of that
Speaker 1: with something like React.
Speaker 2: Wait, you're saying that accessing the database, they're solving it
Speaker 2: using React by you No.
Speaker 1: No, No, really complicated interactions on the front end you
Speaker 1: handle with React.
Speaker 2: So amazing. If you need complicated interaction. You could just
Speaker 2: opt into React and God bless you. Yeah, so it's
Speaker 2: just like you have it all like from side to side.
Speaker 2: You need the complex stuff you can install, even like
Speaker 2: front the libraries like material Lui, schatsy and has a
Speaker 2: right integration with aastro Okay, get it for free. You
Speaker 2: want something with more tailin do you have flow bite
Speaker 2: and obviously and it just works.
Speaker 1: Makes sense. So are there optimizations you need to make
Speaker 1: on the back end as far as you know database
Speaker 1: or the way you do your queries or things like
Speaker 1: that if you're pulling from a data source.
Speaker 2: So normally it would be I wouldn't have an issue
Speaker 2: with generally pulling information from the database because again you're
Speaker 2: just writing typescript as like back end. It's just like
Speaker 2: the difference is that and what that I'm usually trying
Speaker 2: to tell to whomever I've worked with on the components.
Speaker 2: It's just like not to write the exact queries within
Speaker 2: the components. So I would rather have like an entities
Speaker 2: file than those entities file you managed like the functions
Speaker 2: like getting get all creator and that and then you
Speaker 2: call them using the astro component. Not because I'm afraid
Speaker 2: of any sort of leakage of the information. But because
Speaker 2: I mean like because of how ASTRA works, which is
Speaker 2: some people might argue that it is the disadvantage. So
Speaker 2: ASPRA is the component of aspro is inherently divided to two,
Speaker 2: the logic and the template of the HTML. So you
Speaker 2: must either I think you return a response to to
Speaker 2: return something else except the HTML template, or you will
Speaker 2: let the HTML template decide on whatever it works, right,
Speaker 2: So you need to have the logic finish. Most of
Speaker 2: the time, you need to have the logic finish. So
Speaker 2: that means they can condition is that early bailout which
Speaker 2: is something so that they think of early bailt is
Speaker 2: like write it if and then return. This might not work.
Speaker 2: This might not work because you need to return a component,
Speaker 2: so you will write a wrapper around it. It's just
Speaker 2: like it's very inconvenient. It's not. It's not convenient to
Speaker 2: write it within the ASTRA component. So that's the only
Speaker 2: thing which is not that bad all things consider. But
Speaker 2: it's just like things to know, just don't write your
Speaker 2: selects and inserts and whatever within the astro component. Was
Speaker 2: just create a function and then manage.
Speaker 1: Yeah, that's common practice. I've seen with most back end systems,
Speaker 1: right you have, Yeah, you've segregated your logic so that
Speaker 1: your database access layer is separate from your rendering logic.
Speaker 2: Yeah. What will be another interesting thing to talk about,
Speaker 2: which are slots. So if if you don't want I
Speaker 2: mean so, in React, normally you would have in order
Speaker 2: to pass on, would you say the aid of the
Speaker 2: JSX to the next component and to renderative components, you
Speaker 2: would have children. So the children components will be whatever
Speaker 2: you Let's just say I've created a menu, which is
Speaker 2: a component that I've created, and then I will have
Speaker 2: like the list of whatever I needs to have inside them.
Speaker 2: In so you would have children component within the within
Speaker 2: the minu, the definition of the menu would have the
Speaker 2: children component. In Astro, you would have slots. And slot
Speaker 2: is is an HTML element that a lot of people
Speaker 2: don't don't know that exists. That there is a template
Speaker 2: HTML attribute, the tag and the slot which are both
Speaker 2: like official but the slot, the spot template or the
Speaker 2: spot tag allows you to insert components just like a
Speaker 2: children would. So what's the difference. Normally The difference would
Speaker 2: be that you can give slot's name, So by giving
Speaker 2: them name, you can also tell to the parent, Okay.
Speaker 2: The parent can say to the kid, okay, I want
Speaker 2: this in the spot named the header, I want this
Speaker 2: in this in the nameless slot, which is the children,
Speaker 2: and I want this in the footer. So normally you
Speaker 2: can What did I do with my styling is that
Speaker 2: I would have the component, the outer component designed the
Speaker 2: entire layout and then the and then inject the inner
Speaker 2: components where they need to be fit. What did you
Speaker 2: get is an extremely amazing experience that you know that
Speaker 2: layup is outside. The father decides on the layouts, and
Speaker 2: the components themselves decided on the functionality of themselves. And
Speaker 2: this is like, this is one of those things that
Speaker 2: it's just very convenient. And I don't know how people
Speaker 2: manage without my cashwall. Usually they pass it by the
Speaker 2: props and it's just like it looks kind of ugly.
Speaker 1: Yeah, I've seen that, and yeah it gets a little
Speaker 1: bit hairy. I've used other component libraries that yeah, you
Speaker 1: can basically say, hey, these are the things that go
Speaker 1: in the different slots. So Ruby on rails has a
Speaker 1: view component library that you know does all the service rendering,
Speaker 1: and yeah, you can give it slots and then you
Speaker 1: can give it other components to stick in those slots.
Speaker 2: Amazing and view transition. Have you ever heard of hue transition?
Speaker 1: I think I might have heard of it, but I
Speaker 1: don't know what it is.
Speaker 2: So the view transition inherently essentially created using it's a
Speaker 2: standard web thing which allows you to move between websites
Speaker 2: without having a front and library, and it allows you
Speaker 2: to fade between pages, so you can, if you want,
Speaker 2: us a client site feel feel to something without like
Speaker 2: looking at the at the indicator that says that it's
Speaker 2: doting when it's trying to move between component A too
Speaker 2: component B, or between page A to page B. You
Speaker 2: can in astro they give you like a nice, a
Speaker 2: nice addition to it, but it's just like you write,
Speaker 2: you add the view the view transition, and and then
Speaker 2: you like you want to move between page A too,
Speaker 2: pah B, just press on the link and you don't
Speaker 2: get any indication from the server that it's doted, but
Speaker 2: it will be instead faded nicely from one page to another,
Speaker 2: which is you can do it also on Ruby Advance.
Speaker 2: It's just like it's a website.
Speaker 1: Yeah, yeah, yeah, there are a number of I think
Speaker 1: HTMX allows you to do something similar as well, yes,
Speaker 1: where you know, you just allows you to yeah, and
Speaker 1: so effectively, what you're doing is it's like, okay, I
Speaker 1: click the link to load a different page on the
Speaker 1: same website, and so it intelligently says, okay, what changed, right,
Speaker 1: And then.
Speaker 2: There is a few differences though there's a few difference
Speaker 2: So view transition not only that, it does also the
Speaker 2: fading between the pages, which HTMX won't unless you explicitly
Speaker 2: create animations you CSS.
Speaker 1: So this does it with an animation.
Speaker 2: Not only that, it also allows you to persist certain
Speaker 2: elements when you move between pages. Okay, so I'm Fireship
Speaker 2: created a video about it way back, which is when
Speaker 2: you press the button, a certain element moved from the
Speaker 2: center of the page to the top five. But if
Speaker 2: r L and the page itself change between page A
Speaker 2: to page B and it went through the server, right,
Speaker 2: So you pusition is slightly more advanced animation and gives
Speaker 2: you like a really client side feel And normally you
Speaker 2: would have to do like jump through hoops to create
Speaker 2: this animation, and you're sort of getting.
Speaker 1: It for free. Yeah. Yeah, I like that because you know,
Speaker 1: and that's that's the kind of UX that's nice, is that,
Speaker 1: you know, it's like, hey, now what you had it,
Speaker 1: you know, and now it looks like this instead of
Speaker 1: what you started with. Exactly super cool. Well, we're kind
Speaker 1: of getting a little bit toward the end of time.
Speaker 1: If people want to learn more about you or about Astro,
Speaker 1: what are the best resources out.
Speaker 2: I mean, I'm just trying to every once in a
Speaker 2: while topload to YouTube, maybe post on LinkedIn, but those
Speaker 2: two places I'm trying to be I'll try to be
Speaker 2: more mindful about it. But this is where I'm currently at.
Speaker 2: Until I become an official, official public speaker about Astro,
Speaker 2: I wanted to one day just talk about Astra freely and.
Speaker 1: Trash next Chase, So, what's your YouTube channel?
Speaker 2: So I think it's I think it's just my name
Speaker 2: in English, but I don't think it's a good idea.
Speaker 2: Let's say if I can it says segi at Segi caramel.
Speaker 1: Let's see, and then yeah, on LinkedIn, we can just
Speaker 1: look you up by it.
Speaker 2: Yeah, just like a caramel. It doesn't have any It
Speaker 2: just added a bunch of numbers in the end. But
Speaker 2: it's just so it's like, yeah, it might contain Hebrew.
Speaker 2: So if your audience do a Hebrew, but sometimes I'll
Speaker 2: try to add I'll try to add stuff in English.
Speaker 1: Right, all right, Well, so the last part of our
Speaker 1: show is always picks, and that's just shout outs about
Speaker 1: stuff that we like. So I'll go ahead and get
Speaker 1: us going for the picks. And I always start my
Speaker 1: picks off with with a board game. And so this
Speaker 1: board game is it's a variation on Pandemic. So for
Speaker 1: the folks that have played Pandemic, if you don't know
Speaker 1: what Pandemic is, it's a cooperative game where you're trying
Speaker 1: to eradicate diseases from the globe. And so, yeah, you
Speaker 1: all have different roles and you move around and right,
Speaker 1: you play cards to find cures and things like that.
Speaker 1: This one is a little bit more involved. And there's
Speaker 1: a variation on Pandemic called Fall of Rome, and so
Speaker 1: instead of diseases, you have armies that are marching toward Rome.
Speaker 1: This one. This one is Fate of the Fellowship and
Speaker 1: it's based on Lord of the Rings. So and I'm
Speaker 1: going to be teaching it in about three weeks at
Speaker 1: a game board convention. Board game convention anyway, Yeah, my
Speaker 1: friend does. He teaches games at the at the convention
Speaker 1: every year. He used to be part owner in a
Speaker 1: board game store.
Speaker 2: Does he make a living from teaching games? Like, is
Speaker 2: he doing it for no?
Speaker 1: Not anymore. So he was getting he was he was
Speaker 1: getting paid by the store and his profit share, but
Speaker 1: the store closed, so now he's just doing it just
Speaker 1: just for fun. So anyway, the way that this works
Speaker 1: is you have armies from you know, the different bad
Speaker 1: guys and you have armies for like Elvin armies. What
Speaker 1: was it it was elves humans And anyway, there are
Speaker 1: like three or four different colors of good guy armies
Speaker 1: and so you know, you're moving your armies to fight
Speaker 1: off the other armies and then you're trying to get
Speaker 1: Frodo and the ring to Mount Doom. You have to
Speaker 1: complete like I think it was four missions, and the
Speaker 1: fourth one is getting frod or Mountain Doom and being
Speaker 1: able to play a number of ring cards in order
Speaker 1: to destroy the ring. And if you can do that,
Speaker 1: you win. We played it twice we lost, so it's
Speaker 1: it's not just like this super easy game, but it
Speaker 1: was fun. There were four of us playing. Board game
Speaker 1: geek says it's best with three, and yeah, so you
Speaker 1: play with two characters each and so you know, somebody's
Speaker 1: Frodo and Sam and somebody else, you know, and then
Speaker 1: they might have another one. I think that the other
Speaker 1: character that that person was playing was legless, you know
Speaker 1: I was playing was I playing Aoin and Mary and
Speaker 1: Pip and anyway, And so you can do different they
Speaker 1: have different abilities and you move around the map and
Speaker 1: try and manage this stuff. You also have havens that
Speaker 1: you're trying to protect, and if you lose havens, then
Speaker 1: the hope meter goes down. If you lose hope before
Speaker 1: Frodo gets to the then you lose. And it's got
Speaker 1: a tower that you roll the dice through that looks
Speaker 1: like sour on the eye of Souron tower. You know.
Speaker 1: The different missions are you have to take where what's
Speaker 1: Saramon's tower you have to take that, you have to
Speaker 1: have a certain kind of a battle. I think I
Speaker 1: can't remember. I've only played it like twice, but it
Speaker 1: was very, very fun, and so Board Game Geek waits
Speaker 1: it at two point ninety nine. So Pandemic I think
Speaker 1: probably is like a two point one or two point two.
Speaker 1: This is a bit more involved because you're moving the
Speaker 1: nascul around and trying to you know, you're you're you're
Speaker 1: keeping track of a lot of things. Uh. The armies
Speaker 1: march are along different paths on the board and so
Speaker 1: unlike Fall of Rome, they don't all go to Rome.
Speaker 1: The paths go all over the board and so anyway, uh,
Speaker 1: just and it's it's it was fun. We really enjoyed
Speaker 1: playing it. So I'm going to pick Lord of the
Speaker 1: Rings Fate of the Fellowship. Uh, this is a new
Speaker 1: game that came out this year. Usually I'm picking games
Speaker 1: that you know are a year three old, but this
Speaker 1: one's new.
Speaker 2: So.
Speaker 1: Definitely go pick it up. It's one of the more
Speaker 1: well put together visual games. So it it's very fun
Speaker 1: because all the pieces are are well designed and anyway,
Speaker 1: so so it's cool, very cool. So I'm gonna pick that.
Speaker 1: My wife and I watched a movie last night. I
Speaker 1: didn't love it, but it was it was it was good.
Speaker 1: I could have predicted every every plot point in a
Speaker 1: movie whatever. But it was called The Christmas Miracle of
Speaker 1: Jonathan Toomey and no, it's at the beginning of the movie.
Speaker 1: The main character is a ten year old boy. His
Speaker 1: father goes off to war. I think it's World War
Speaker 1: one and he's killed in action and he has this
Speaker 1: nativity set that he put out every year with his
Speaker 1: dad and he loses it. And so Jonathan Toomey is
Speaker 1: this wood carver.
Speaker 2: And so.
Speaker 1: Anyway, they moved to the town where Toomey lives and
Speaker 1: you know, meet with him and you know. Anyway, so yeah,
Speaker 1: so you know, and it takes place at Christmas time anyway,
Speaker 1: and to me is you know, they commissioned him to
Speaker 1: carve a replacement Nativity set. So anyway, it was all right.
Speaker 1: I guess it's not a glowing endorsement. But if you're
Speaker 1: looking for a movie that you probably haven't seen, and yeah,
Speaker 1: it has. There were like two actors in it that
Speaker 1: you've seen in other stuff. I'm trying to remember names,
Speaker 1: but I'm not very good at remembering celebrities names because
Speaker 1: I just don't care. But there was one in particular.
Speaker 1: She was like one of the kids that he befriends,
Speaker 1: and she was in the Host and a handful of
Speaker 1: other movies as an adult, right, and she's a little
Speaker 1: kid in this movie. So we ran across it, and
Speaker 1: it's got to be twenty years old or something at least,
Speaker 1: But anyway, we enjoyed it, so my wife really liked it.
Speaker 1: So so if you're looking for that that kind of
Speaker 1: a feel good Christmas movie, then then that's right up
Speaker 1: your alley. Those ones don't always do it for me,
Speaker 1: but I'm a good support. I'll sit through a movie
Speaker 1: trying to think, what else.
Speaker 2: Are you thinking about? A pick? Because I have something
Speaker 2: as American and people just if they go ahead play it,
Speaker 2: it's just sick.
Speaker 1: Do a pick.
Speaker 2: It's just the whole Night Silk song. It's amazing and
Speaker 2: if you didn't play it already, you should. It's an
Speaker 2: amazing game.
Speaker 1: Which song is it?
Speaker 2: No suck song in the game the video game, it's
Speaker 2: a whole night sucks song.
Speaker 1: Okay, so all night?
Speaker 2: Yeah. Yeah, this game crashed the entire internet or the
Speaker 2: stores of Nintendo XBO and just crashed it for being awesome.
Speaker 2: And it's still amazing and I recommend you all to
Speaker 2: play and obviously played the first Hole name. Those games
Speaker 2: are just amazing. Team Cherriot just.
Speaker 1: And know what the the graphics for that game, I
Speaker 1: I just I love them.
Speaker 2: Hendron not animated, not pixelated, just throwing with all the passion,
Speaker 2: just amazing.
Speaker 1: Yeah, it's it's very yeah, simple gameplay, but it's it's
Speaker 1: a fun game for sure.
Speaker 2: Simple, my goodness, simply this game, this game is so
Speaker 2: goddamn hard because it's hard.
Speaker 1: Oh yeah, I'm just saying. It's like, it's it's how
Speaker 1: do I explain it, it's it's somewhere between. And I
Speaker 1: I haven't played a ton of it. My son was
Speaker 1: really into Night oh and Silk Song. So Silk Song
Speaker 1: just came out. Yeah, but yeah, so Hollow Night. You know,
Speaker 1: you move through, you do have some basic attack and
Speaker 1: things like that. It's almost I mean, you are fighting
Speaker 1: through the levels, but it's almost as much a puzzle game,
Speaker 1: like how do I get into the right position to
Speaker 1: to get through the level right with whatever abilities I have?
Speaker 1: As it is an action and fighting game.
Speaker 2: M oh and there is a like a lot of
Speaker 2: lord behind it. The generally fun game it is.
Speaker 1: I love the visuals on the game, and it's definitely
Speaker 1: a fun game. Like I don't want to sell it short,
Speaker 1: but yeah, but I haven't played Silk Song yet, so
Speaker 1: I'll have to check that out. I really want to
Speaker 1: get the switch to I haven't.
Speaker 2: Don't do it. I don't do it for two reasons.
Speaker 2: One the fact that Nintendo gets away for overpricing their
Speaker 2: console is unforgivable. There is no reason to buy Anintendo
Speaker 2: too just so I like, I wouldn't feel feed to
Speaker 2: that market. Secondly, it's uh, the Nintendo Nintendo two doesn't
Speaker 2: have like a lot of graphic improvements that if you
Speaker 2: already have a Nintendo one, you should just stick to it.
Speaker 2: And unless you won the very exclusive game, then I
Speaker 2: recommended to stick to the Switch one.
Speaker 1: Right, Are there are there exclusive games to Nintendo or
Speaker 1: to the Switch.
Speaker 2: To the Probably yes they are, they are, But again,
Speaker 2: if you're not looking for anything specific, and I recommend
Speaker 2: it just to stick to the Switch one. I also
Speaker 2: have a Switch one that just like, because I do
Speaker 2: not that keen of just like up and over and
Speaker 2: just buying, Like how much was it eight hundred eight
Speaker 2: hundred bucks for the switch? That's nuts.
Speaker 1: I haven't even looked it's nuts. Yeah, it looks like
Speaker 1: Mario Kart World, Donkey Kong Bonanza. Oh, there's a Metroid
Speaker 1: a Kirby I Rule Warriors. So yeah, there are games
Speaker 1: I guess that are exclusive to switch to. But yeah,
Speaker 1: I haven't even priced it. I was going to look
Speaker 1: and see how much it was for Christmas.
Speaker 2: But now that you'll see the prisl, it's more than a.
Speaker 1: Couple hundred dollars. I'm probably, oh, yeah, it's five hundred
Speaker 1: dollars here and that that's a little bit. If my
Speaker 1: kids really really deeply wanted it, it'd be like, hey,
Speaker 1: this is all you're getting, right for the next three years.
Speaker 2: Oh my goodness. So and again it's like it doesn't
Speaker 2: have any significant graphic improvement.
Speaker 1: So just yeah, I guess, I guess I haven't looked
Speaker 1: into that either. I have to say too that the
Speaker 1: so one of the reasons that I was excited to
Speaker 1: get the Switch when it came out was it was
Speaker 1: kind of the hybrid, right, it was a console you
Speaker 1: hooked to your TV and then you could also like
Speaker 1: just put it in your bag and take it with you.
Speaker 1: And as far as a handheld system goes, I really
Speaker 1: liked it. As far as then hooking it up to
Speaker 1: my TV, I felt like it wasn't the best console. Yes,
Speaker 1: is that is that a terrible thing to say? I mean, no,
Speaker 1: that's that's been my take. So you know, I don't know.
Speaker 1: I mean I like this switch.
Speaker 2: The Nintendo for me, just like it was very un
Speaker 2: not convenient for me. The hookup. I don't know how
Speaker 2: it works with other people. But you get like this
Speaker 2: plastic piece printed. It's very like not very convenient. Then
Speaker 2: you need to hook that up with your HDMI and
Speaker 2: then in order to make it work, so I need
Speaker 2: to put I need to place this the freaking switch
Speaker 2: inside the slot. Right, it's very annoying. Like I wasn't
Speaker 2: excited for handhelds. I would recommend the Steam Deck, which
Speaker 2: is the better one. That being said, I don't have
Speaker 2: the Steam Deck. I just had heard of reviews about
Speaker 2: this and just like you get access to a bunch
Speaker 2: of games and it works pretty pretty well. And if
Speaker 2: you're traveling a lot, maybe try the RG Xbox, which
Speaker 2: is not really an Xbox hand held. It's a lot
Speaker 2: but just look it up. Though the RG Xbox is
Speaker 2: more expensive than Nintendo than Nintendo's.
Speaker 1: Only Yeah, yeah, I mean the I guess the nice
Speaker 1: thing about like because I didn't even know Steam how
Speaker 1: to Steam Deck, but it looks like you can play
Speaker 1: basically anything you can get on Steam on the Steam Deck,
Speaker 1: which is.
Speaker 2: Some stuff you can get on Play Pass with the
Speaker 2: Xbox that for stuff can also play PC. Right, it's amazing.
Speaker 2: It's like it gives you everything now about the About
Speaker 2: the quality, my guess it's on par. It's not slightly
Speaker 2: better than the Nintendo.
Speaker 1: Switch, probably.
Speaker 2: Just for assuming because you're optimized for this team.
Speaker 1: But yeah, but yeah, my my other issue with the
Speaker 1: Switch is that, oh they do have a docking station
Speaker 1: for the Steam Deck as well. The other issue that
Speaker 1: I had was that the so the little joy cons
Speaker 1: like those, we get drift in them, We get all
Speaker 1: kinds of other issues and then it's okay, well, you know,
Speaker 1: the batteries dying on it, so I have to go
Speaker 1: slide it onto the switch, and oh when I slid
Speaker 1: it on, then it it came off of the dock
Speaker 1: just enough for it to kind of glitch out.
Speaker 2: Yeah, where it is real, I get, like you know
Speaker 2: how many times I got.
Speaker 1: But the issue, the issue was always with it when
Speaker 1: you were using it as a console on your TV
Speaker 1: and not right as a handheld. It was generally better, but.
Speaker 2: I have one of the issues, and I have some. Normally,
Speaker 2: if you buy a single swhich you get like two
Speaker 2: controllers which are two halves, which is essentially one, but
Speaker 2: if you want to play with a friend, you have
Speaker 2: to hook it up to this sort of yanky plastic
Speaker 2: thing that slide it over, and then you would hold
Speaker 2: it horizontally instead of vertically with the other one. You
Speaker 2: have no idea how many times I've messed it up
Speaker 2: and I flipped it to the wrong way. And I'm
Speaker 2: pretty sure that most of the reason why it strifts
Speaker 2: because of me, because of the good because I have
Speaker 2: a stupid plastic thing inside the inside the controller. I
Speaker 2: got the other ways dominant.
Speaker 1: Yeah, yeah, all right, well I'm gonna go ahead and
Speaker 1: wrap us up. But this was cool, good conversation about astro,
Speaker 1: fun conversation about games and video games.
Speaker 2: Thank you for having me.
Speaker 1: I think I have it in me somewhere. Eventually I
Speaker 1: want to write a video game.
Speaker 2: But we'll see if you need somebody to talk to
Speaker 2: you on my fresher video games.
Speaker 1: So yeah, I know a few people who have built
Speaker 1: video games too. So my twenty year old keeps saying
Speaker 1: that he wants to be an indie video game developer.
Speaker 1: Of course, getting him to sit down and actually do
Speaker 1: the work to learn how to do it, that's another story.
Speaker 1: But I get the appeal and I think it. I
Speaker 1: think it'd be fun. So anyway, we'll go ahead and
Speaker 1: wrap it up until next time folks max out.