GitHub Open Source Friday, 29 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build Faster Websites, Ship Less JavaScript - Open Source Friday

Description

As always, feel free to leave us a comment below, and don't forget to subscribe: http://bit.ly/subgithub

@blackgirlbytes interviews Ben Holmes, a Software Engineer at Astro. Astro is a new kind of static site builder for the modern web. In this episode, Ben demos building websites with SSR, and adding integrations like Tailwind to components with the `astro add` command

https://astro.build/

0:00 - Introduction
0:54 - What is Astro?
4:55 - Making API calls with Astro
6:46 - Top Level Awaits
11:28 - Server Side Rendering with Astro
15:53 - Dynamic URLs
18:36 - Add Tailwind to Astro in Seconds

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Hey ben hello, everyone yeah- I was just uh just touching down from the lunar surface- to do this little stream today, so I hope y'all are doing well.

B

I love the I love the. um What is it ask um astronaut helmet? I don't know.

A

What it's an astronaut, helmet, yeah, yeah,.

B

I love that um I didn't know wearing.

A

It a second ago, yep.

B

A

Forgot to mention it I was like well, you know we'll keep it authentic, keep the reactions real. I love it. Give us the context.

A

The context, oh boy, where do we begin uh I'll? Take this off for a little better audio.

A

Now we're back on earth so uh little context, I mean you pretty much nailed it in the intro. I mean just go to the website. The mission statement should describe it right. uh It's a way to build uh websites. It used to just be a way to build like statically generated websites if you use something like gatsby or jekyll, or hugo you're, probably familiar with that term.

A

But now we've released a new feature that lets you deploy all of these websites that you make to serverless functions and edge functions and deno servers. If you want anywhere that you want to sort of adapt, astro is there to help you, but the gist of it is you know you start writing all of your pages with plain html, with some nice templating in it we'll get into like the sort of jsx-like syntax that we offer um and from there you're able to import any component that you want.

A

uh It could be a react component view. Svelte, any framework is supported with a plug-in ecosystem, so you could support your own. If you want to go build that um and then you can just plop them on the page and decide if you want to add javascript to those components, so you could use something like yeah, so you could use something like react like.

A

If you have a bunch of material ui components laying around you could spin up an astro project just build some plain html with some styles, and if you need a carousel, you import the carousel component, you hydrate it and you put it on the page and then everything works pretty magically how we've set it up today we're trying to make it easier and easier.

B

Okay, awesome: let's see this magic in in action if you're ready for that there we go.

A

Let's do it all all right, so I spun up a little online editor to try these out. If you ever want to try astro, you just go to astro.new this enormous text here and you can spin up an online editor with any of these examples. We have a thorough set of using your favorite component frameworks, adding tailwind to a project using markdown, since we support putting components in markdown in a kind of mdx way, but with anything. So if you want to throw svelte in markdown view and markdown, that's that's a thing too.

A

Okay and then some templates for more complex things like ssr right here, yeah, so.

B

And also feel free, what ssr is.

A

Yes, thank you. Well, you know it's um it's server side rendering.

A

So, instead of building your website up front based on some data that you might have, it's actually going to put a dynamic javascript function out into the ether so anytime, you request something like I requested a photo with a specific date which we'll demo in a minute, and um when I go visit that url with that date, I want to dynamically fetch some information from that date and then display a unique page to that user.

A

So, instead of knowing like every date up front, you could just set up a little function that takes in the date, validates it and goes and requests some information based on that. So that's the that's the new thing for sure gotcha awesome! Thank you, oh yeah, for sure. Yeah. Definitely stop me at any point as we're going through this I'll. Try to demo like a few features here and see where we get. I have just set up an online editor uh with the basics template.

A

This is a new template by the way, um and if I.

B

Think, actually, I'm gonna stop you right now. Do you think you can make your words a little bit big? Could you zoom in.

A

I should all right, I hope it looks good you'll notice, it wraps text too. So you know for dealing with the big view. It's tough because some people watch like coding streams on their phones. uh Y'all are crazy, but I respect.

B

You for trying.

A

B

It's pathetic, it's the dedication for me.

A

It's the dedication yeah, we gotta, we gotta, show them some love. So all right, we got our dev server running here. I think I accidentally ran it on a 3001 since it had an old editor. So let me make sure that cool all right and I should have everything set up with live reloading as well. So when I edit text, we can see it without even saving via stack blitz has that automatically but you'll notice. If you like, clone this into your local editor, it should be really quick too.

A

Okay- and I guess the first thing that I wanted to show off was like, let's fetch some data from somewhere and put it on the page, so anything inside of this top bar is going to run either at build time if you're, using the defaults or on a serverless function request. If you opt into that so yeah as it stands, it's just going to be build something at build time and I'm going to use this nasa api function.

A

If you don't know nasa has a public api of a ton of cool things, you can set up an api key and it spits it right out, like you, don't have to wait for any requests here. It's super casual um whatever, then.

B

A

B

No, I was just saying uh the nasa api is one of my favorites and, like the first api, I used keep going sorry really. Okay,.

A

Yeah, I feel like it's a it's kind of a sort of gem. I know a lot of people use the pokemon api when they're doing demos.

B

And it's like come on.

A

B

Whole galaxy of.

A

Stuff you're gonna show me pikachu.

B

You gotta do something for the anime lovers, but I love I love. Yes, the nasa one as much just as much yeah yeah.

A

I mean my hot take: is it's a little overplayed because it's just such a good api? I get it uh but yeah, we'll just uh we'll ping. This super simple one here just photo of the day. You send it a request and it gives you back the photo for that date and we'll wire up an api key as well. So here I'll just request a space photo, and this is uh the front matter- is just a javascript block, so it provides a few niceties like top level await.

A

I can just use the word await and it'll work. Oh.

B

Wow I was just gonna, I was gonna, be like oh. You made a mistake, but no that's not that's cool okay, yeah.

A

You know the pain that it can be to like write, an async function and then call it.

B

A

B

A

To do that um and you can run fetch. This is actually going to be server side fetch so either in node or if you chose deno, which is now an option, you could run it in deno and yep. Remove those new lines, and this will request a photo of the day I'll put in an api key as well to avoid rate limiting.

A

So in order to import api keys by the way you can use this syntax, a lot of people are used to process.enb, but this prevents you from having to like set up dot end and all of that stuff. So, oh, okay, yeah, it's a funny one, but once you have that set up that should pull in this nasa api key and I just put it in a uh dot env file. So you all don't see it, but just know that if you put anything in a dot, env it'll automatically get pulled into this guy.

B

Okay- and this is like just making sure that's a astro thing- the import that metadata and is the astro.

A

Like feature yes kind of it's like because you can also use this inside of a view, components felt component, etc so anywhere.

B

That javascript.

A

Runs this still works.

B

Okay, I never knew that.

A

Yeah, it's uh we use a bundler called veet, which is uh sort of a new kid in town. If you've used webpack before it's kind of.

B

A

The new webpack with a lot of niceties and one of them, is setting up environment variables so yeah from here I'll just do convert to json and to see what result we're getting I'll log out the space photo.

A

We should see that in our terminal now and it's got an explanation which we'll use as alt text and it has a url okay. So with that, whenever you declare a variable up here, it's just ready to use inside of your code. So if you use curly's kind of like react, you could say well actually I'll, create an image element and then set the source to uh space, photo dot url, and we should see that pull in and then the alt text to space photo explanation or title.

A

Maybe since it's shorter text, that's probably what screen readers would prefer, but we got that now and of course, it's very large because it's pulling in a high def image so down here, you can write a style block inside of an astrophile and this will create scoped css.

A

So when I'm styling h2s, I'm selling the h2s in this file, not in the whole project, so yeah, it's a nicety that uh I know svelte uses. If there are any svelte fans out there, but I'll just target the image element on my page and I'll set the max width to a hundred percent so that it scooches in and now we have a nice banner image with live reloading and such.

B

I love it yeah, so just to make sure the only time I've seen css within, like I guess, a component would be like a styled component. Is this the same concept or what? What is different about it versus like styles, components.

A

Yeah so styled components I know generate a component: it's css that outputs, a javascript component and in our case since we're compiling this file in jsx, they don't normally like compile the file. So you have to use work around sex smell components uh in here. It is taking in this style tag and then turning it into scoped css on the other side. Okay, so it's comparable for sure it's something that we recommend that people try out like here.

A

You can see it's putting on an astro class gosh bump that up, but yeah it's generating classes for all of our stuff. Perfect. I love it. Thank you for that.

B

A

For sure, and to call out like if you want to use react inside of astro, you will need to like bring your own stuff like you, can't put a style tag in a react component and expect it to scope. So you can use whatever tools you want. The whole point of asker is like bring what you like, but as like the baseline, where you make your server request and where you start rendering html, we give you some like good helpers, uh yeah, so yeah.

A

uh If we have time I'll, also show off ssr but yeah. I know we.

B

Do I want to check the if there's any like questions? Oh yeah, uh I see people saying hi, hi, nick um hello, there's a lot of people that know you and are supporting you they're like go ben. I'm glad. Thank you. Thank you. So much. Oh and someone agrees with you about pikachu.

A

B

Yeah, they said that's the truth. um Fetch is built in to astro as well. I remember that from the last stream I believe, okay, cool cool and then someone said import meta um comes from vjs, okay, cool. So no questions mostly just comments, but if you all have questions feel free to like throw it in the chat.

A

Yeah for sure, and all those comments sound right to me so yeah yeah glad we cleared it up so from here. The nice thing about stacklets now is you can install stuff, and you can just run this like a normal terminal. So I'm going to add a dependency in here. This is going to be an ssr adapter, so we offer a ton of adapters like if you want a netlify adapter to deploy to netlify, serverless or netlify edge.

A

Those are options, that's sort of my like deployment target of choice, because it's really nice to use, um but for simplicity, while we're like deving here, I'm just going to turn it into a node server so like. If you want to throw this on a heroku box old school style. That is what the node server is for.

A

And to wire up the server I'll head over to my config and I'll import, the node adapter here like that and then in the config I can wire up the adapter, so astro knows to deploy it to a node server now, okay, so with that, I can restart the dev server.

A

It should now look exactly the same, because we want to keep the dx pretty much the same. If you change your, if you change your deployment target, but now we've unlocked sort of dynamic, ssr features, one of them being. If you wanted to have a dynamic route like if I wanted.

B

A

A space photo on a specific date. I could make that a url parameter, so square brackets are a special thing when you're naming files where, if there's square brackets around it, it'll just be plopped into a variable that you can use inside your code. Okay, so now inside of a new block here, I'll actually just copy over the top part that we had here since we'll do something pretty similar except now, instead of just loading, the latest photo of the day, we can add in I'll turn it into a template.

A

String too, I know that's, that's the new hotness. Let me go ahead and do that and then put that in here. Okay and alongside this something nasa api offers is setting the date, so I will request a date that is inside of the parameters that astro provides. So the astro global is a special object that contains all the information about your page. It could be. Was this a post request or a get request?

A

If you want to handle it like that, or what are the parameters that were passed in the file name and that's going to be inside of params.

B

Okay, that's amazing, and I have a quick question- that's kind of irrelevant, but why is this just like your style of doing the little dashes at the top and the bottom of your imports, or is that an astro thing.

A

Yeah, that is an astro thing, so anything inside of these fences is going to run on server request and anything below the fences is going to run in your browser. So this is like literally the dividing line from this is on my machine, and this is on your machine. Got it so: okay, cool yeah, if you view something like get static, props in next.js, it's kind of like that, except instead of a bunch of exported, wrapper functions, it's just some dashes and it compiles away.

A

So now we have our space photo that should be pulling in once we request a dynamic url like if I requested the photo on march 1st 2021. We can see that in our terminal over here yeah. So now it's pulling in 2021 when we go visit that url and I can just put that in an image tag- that's not the keyboard shortcut!

A

So if I just grab this same image request that we were doing earlier, I'll wrap it in the same layout. This is how layouts work by the way, layouts are just components that you place on the page, so yeah and the layout is just an html tag, basically with a few default styles.

A

So now, if I put that on the page, we get a photo for march 1st now we can get a photo from march, 2nd and march 3rd, and so on. So now you have a server. That's set up to pull anything from the nasa api. If you want to um so yeah pretty easy to set up.

B

This is cool, I'm impressed. I want to try out astro now, like I've heard a.

A

Lot of talk about.

B

It but I haven't touched it. I love that and okay, um I'm trying to see like I had another question about it. Slipped in my mind. I think, could you go back to the index.astro? Let me see if I could remember.

A

B

Dang, I yeah- I don't remember, but I I'm sure it will come to my mind, sorry about that. But this is good at the end.

A

B

Cool, I love it. um Yeah anybody have questions. Where is ben's astronaut helmet? Yes, that's the thing you missed it.

B

A

Promised on twitter, I would bring the helmet, that's that's all I promised it doesn't even matter what we discuss I'll.

B

Try wearing it for the.

A

B

A

B

A

We'll do we'll do a little fan service. You know, I mean people, the people want what they want. It's fun.

B

I'm dead, oh man, okay, this was like a really awesome demo. I'm I'm pretty interested, I don't see any like and other questions, um but we can like um chat because I would love to know, know more about like your journey into open source um or just exactly like more about what you're doing at astro or any other things you want to promote.

A

Yeah for sure yeah, um so we can switch back to the main cam if you prefer yeah.

B

If you had nothing else to show, because I remember you saying like two things, were these the two things.

A

Oh yeah, I mean I can show off adding tailwind to the project. If we want to check that out. Oh show that sounds like. Maybe all right, all right. It's you're right! I don't want to put people quick, oh no! It's it's as easy as one command. So if you want to add tailwind to a project or if you want to add react view svelt anything that we call an integration, you can in your terminal run astro.

A

I can't see my keyboard because astronaut helmet, uh astro, add and then the name of the feature that you want. So here I'm going to add tailwind to my project and this updates my config for me and then installs the dependencies for me.

A

So go ahead and do the npm thing and over here we can see in our config it's wiring up tailwind as the integration now and then the last thing it'll do is generate any files it needs to like. Here it's going to generate a tailwind config for me, so I don't have to go figure out what I need. So that's all set up and now we've unlocked tailwind. If we restart our server so heading over here, we should get the same page. There's not much different here.

A

I think tailwind actually resets some styles, so that the image takes up the right width of the screen- that's nice, but heading over here I can hopefully apply a little uh rounded corners, maybe and that should appear on the other side. At some point, I hope I ran into some issues with the uh the online editor recently there we are all right so now I can edit that to medium and double xl.

A

Maybe that's not a thing actually, maybe just one xl there we go so um now we got that set up and if you have vs code, this should offer some like autocomplete and documentation as you're typing out taiwan classes. I know there's a separate extension for that, but yeah, that's one of many things that you can add or.

B

Github co-pilot, you know just.

A

Or co-pilot, I I'm more of a tab, nine person right now. I don't know that is that heresy. I think it is yeah. I'm allowed.

B

To say that actually well, I'm open to all I'm open to all developer opinions, but I'm just playing but.

A

There's one that's more right, you know a little bit a little bit. It's just yeah! This feels a little funny. I I hope you all enjoyed. I hope you all got your twitch highlights.

A

You know it's a little hot in the helmet, but yeah it's a fun time.

B

That's what I was gonna ask: I was like it gotta be hot.

A

A little bit it's a little echoey as you might imagine yeah, but it's lightweight yeah. Full disclosure was the cheapest amazon option, but it does the part. It looks good.

B

I love it um nick asked the question that actually I was gonna ask you: are you still working on slink like I hope, I'm saying it right, slinky.

A

You're right yeah, I was actually on the on the show. Last time. That's how I heard about github open source fridays. It's awesome, um but I am still working on it. It's where I started learning about like how can I add react. Views felt et cetera to a static website really easily and, as you know, astro does something very similar, um but slinky is focused on using 11d. So, if you're, someone who likes the 11d ecosystem and prefers how they sort of give you data, they have a unique way of doing that.

A

um I still think slinkity serves a need for um just people that have an 11d stack and don't plan on moving off of it. I do now recommend that definitely try both before looking at slinkity first, um but at the moment I'm just getting slinkity to work inside of serverless environments and because 11d can now run in serverless as well, which is very cool and from there I hope, to hit 1.0 and potentially hand off to another maintainer that can focus on it in a more like full-time basis.

A

So anyone in the audience who loves slinky- I am open um to anyone who wants to like more actively maintain it. It'll always have a place in my heart and I'll probably stay in the org indefinitely.

A

I just want to see I want to see what's going on, because it's my first open source baby. You know I care about it, but yeah definitely uh focusing a lot on astro now that I've like really seen what it's capable of.

B

That's really thoughtful of you to not just abandon the project but pass it on to another maintainer potentially, um and I can imagine it's got to be a lot to to balance, to like maintain your own open source project and then also you're working at a small startup that have their own open source project. So it comes.

A

B

Yeah y'all heard that call out hit up, then, if you are interested in helping out with slinky. um My other question to you, which these are like more fun questions since we are coming down to.

A

B

Last three minutes: what's your favorite food, nothing favorite.

A

Food yeah, you actually mentioned them. I got a prep favorite food like it changes now that, because I'm around the new york area been enjoying a lot of food here and um what's been the best one, I mean uh kbbq, okay been addicted to that korean barbecue.

A

They just have a whole different idea for spices and everything I mean it's just it's just fried chicken, but it's spicy. It's got the best sauces. It's so good, so yeah.

B

That's that's my.

A

Current pick, but it changes all the time that sounds.

B

Like an awesome pick, um I'm vegetarian, so I have never tasted it, but I hear people talk about it a lot so.

A

Yeah I mean my thing is like I could be like a peshmeterian. I think that's how you say it.

B

A

Honestly, like salmon's, probably my real favorite food, like of all time uh I'll, just eat it. Like breakfast lunch dinner, I don't care, maybe not breakfast but like I, I'm definitely a fish person like if I gave up meat, I couldn't give up fish, but I could probably go without other things. That's.

B

Kind of where I'm at gotcha no no judgment on the no judgment on the me eating. I just always been vegetarian yeah. So it's just I've been.

A

Curious about it yeah it's at least nice.

B

To go like part-time.

A

Vegetarian yeah, I think, there's something else.

B

That's cool, like you could do vegetarian for lunch. Somebody named buildervision said astro. Is it at first I read astro is lit, but yes, I agree with bateman. We.

A

Support lit it's a framework, we support it.

B

Wait: listen the framework I've never heard of that.

A

Yeah, uh it's a way to write web components. uh It's called lit element. I think people just call it lit, though.

B

Okay, I love that um and then my last question to you is: what's your favorite beyonce song.

A

Yes had to do a deep dive when you suggested I was like okay, it's like I found this found this track, beautiful liar with security.

B

A

That's the good I.

B

A

How did I never know this crossover happened like that was like prime, like I guess it was like middle school or earlier. So I'm not.

B

That surprised.

A

But man I missed out that that goes hard. That was a good one.

B

Good um nick said not destiny, child full beyonce yeah, and he and he picked beyonce. I mean what what what's shakira, but yes, I have nothing like destiny's child, though, like I'm here for destiny, yeah.

A

I don't know why that's ruled out that shows you're a real fan. I think I don't know.

B

um Yeah, this was really really really awesome. Like demo was on point, I'm I'm convinced now you've you've properly advocated and I'm gonna go try out like astro this weekend. um I hope the other viewers um will too.

B

If y'all have any questions, let us know, um but I do want to um promote a couple things for ben and the first is follow him on twitter, at b homes, dev, um not ben homestead, which I make the mistake of, but and then also astro, is having a hackathon um so join the astro hackathon at astro.build hack. um Do you have any more information on that like when yeah.

A

Yeah, it's, uh I think, there's about a week and a half left, uh but it's meant to be more of a weekend. Project try to build either something with ssr as we demo today. So if you build a website with it, you can submit it and talk about it. Otherwise, we're trying to build integrations like that tailwind integration. I showed you like, integrating anything that you like in development, try to make one of those and themes.

A

So if you want to make like a blog starter with really nice styles, you can whip up a theme and then we'll showcase it on our themes. Page, you don't have to win for that. We showcase all of our themes. um So if you want to go check out those options and also 5k in prices for each of those there's money on the line, so.

B

A

B

A

There's money people there's money, not always true, for open source, so you got to shout it out, but yeah astro dot build slash hack. All the details are there and we have a pretty big like discord channel where we're answering people's questions, giving feedback on ideas a few teams formed in there. So hopefully, we've made some friends as we're working on stuff, so yeah check it out.

B

Awesome and then we have um two last questions before we go um one from kevin. That says: what's your favorite thing about astro.

A

Favorite thing: oh my god, it's all so amazing, so I would, I feel, like it's just like I've talked about this, where I don't even talk about like the performance story of astro, it's really performant because you can just like only ship javascript components when you need them. But my thing is: it's just so easy to write content with astro like you can just import markdown and it works, and you can just start typing markdown and uh pretty easy to integrate with cms's too.

A

That's something I'm working on personally is like how could I set up with my contentful cms, for example, type all of my stuff in there and quickly import it into my astro project? It's probably the best sort of framework to solve those content creation problems. So that's definitely what I'm looking at and when I mean content I mean like marketing pages uh personal blogs for sure ecommerce is the next frontier that we're trying to make more and more streamlined.

A

So all of that stuff, like that's definitely my my jam.

B

Really impressive, um we have oh wow. The questions are coming in. What was your most surprising thing that you found when you came into the astro project.

A

It's funny because, since it's an open source discord you I knew all the people going in like it would have been way. Scarier if I just didn't know the team and it's like we're a startup you want to join. Like I don't know uh surprising, I mean cool.

A

Let me think on that.

A

I mean surprising, it sounds like it's got to be something spicy I mean most. Most of my surprises have been good so far, if that's, if that's allowed as an answer like uh people actually responding to pr reviews like really quickly, that's not always true um from the last company.

A

I came from it's like everyone's working on their own thing, heads down, but around here it's like we have a dedicated channel for shouting out prs and get a lot of action from people who aren't on our team because it's open source, it's easy to get reviews.

A

So that was surprising to me is like people are willing to hop in and help out, like not common for a company. I don't know.

B

I love I love when I see a company um promote that that culture of like helping- I was at one company before where like helping was just like pushed to the side, and then I went to another company and they were like, let's prioritize that, so I really love that. That's how we grow as a community and as developers um princesa said. I thought your favorite thing about astro was the vs code extension you're betraying me then yeah. If you don't know.

A

uh She manages all of the language tools, so a little bias in there a little a little bit but uh totally right. I forgot about those to be honest, but we have so many like autocompletes now where it's like, if you type.

B

A

Little uh things in the framework like astro.whatever you'll, get documentation and links to our docs when you're editing the file which, like is a really big deal, because since we own the dot astro file extension, we can own all of the framework documentation too. So it's like.

B

A

Of second to none already and we've just spun up like these language tools in less than a year, so yeah, it's it's wild. Definitely.

B

A

It out in vs code, you'll you'll, be happy.

B

I'm impressed and excited to check it out. I just made a vs code extension the other day, so yeah.

A

I will say those are the one, the one pr reviews that I don't totally understand: they're they're in the weeds for highlighting stuff yeah.

B

Let me just see what the other stuff say and then we'll wrap up here. I've been building a website with astro and headless cms. Lately it was very delightful. Someone said: hi, hey oak tech, hello, vs code. Lsps are no joke. Well done! Astro team yeah, I'm pretty impressed quickly. Y'all did that I know cool. I am going to wrap up. Thank you all for joining and participating and chatting with us.

B

It was nice to see like some familiar names in the in the chat and then also thanks ben, for taking the time to um share everything about astro. I'm like super excited about like your direction or um astro's direction, and your your direction as well um super excited to see where y'all go uh thanks. So much y'all and we will close out here bye.

A

B