Troll Your Boss With The Jamstack

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

Jason: Hello, everyone. And welcome to another episode of Learn with Jason. Today on the show, we're bringing back Cassidy Williams, Cassidy, how are you doing?

Cassidy: Oh, I am great. Thank you for having me. I'm excited for today.

Jason: I am devious -- deviously and not maliciously -- maliciously is the wrong word. What's the right word for what I am?

Cassidy: I think devious was a good word for it, honestly.

Jason: Devious. That's where we are. Let's make fun of Sarah. It's going to be great. I feel like you need no introduction, but for those of us who are not familiar with your work, do you want to give us a little background?

Cassidy: Hello. I exist. I think that's what I say on every show of yours. And I have to keep the trend. But for those who aren't sure I exist, I'm on Jason's team at Netlify, and do a lot of React and Next.js stuff and I make a lot of memes. That's a good summary, right?

Jason: Memes, React, yeah. Yeah. That sounds about right.

Cassidy: Yeah, memes and React.

Jason: I see the chat is --

Cassidy: They're doubtful already.

Jason: Amanda is going to try to bury by herself.

Cassidy: Good luck! Good luck!

Jason: So, today is a little bit of like a -- the meme equivalent of like a Viking funeral. So, we had some changes at work where Sarah Drasner used to be our VP of developer experience, right? And so, she has decided to go pursue her own thing which is like good for her. We're so excited to see what she does. But it does mean that now everybody's stuck with me. I'm sorry.

Cassidy: Yeah... it's... so, yeah. That was -- that was a whole -- that was a whole thing. I was just like, dang it. Now I have to pretend to like Jason.

Jason: Yeah.

Cassidy: Yeah. It was a whole thing. And I cried about it. But we can move on.

Jason: But she swallowed it.

Cassidy: Jason is okay.

Jason: You heard it here, folks. I am okay. But now -- and we scheduled this episode before we knew that Sarah was going to go off on our her own. Originally, we were going to troll our boss. But now because Sarah is off on her own, I mean, she's still a boss. And we're just gonna go ahead and troll the heck out of her. Now, as a kind of like, you know, like I said, a Viking funeral. We're going to push her out to sea and light her barge on fire.

Cassidy: Beautifully said.

Jason: Alex says, do you think she's leaving because we scheduled this episode. You know, I didn't think about it, but maybe.

Cassidy: Oh, no!

Jason: Is Sarah here to defend herself? I don't know.

Cassidy: She said that she put it on her calendar. But the thing is, Fortnite has been all she's done ever since she left. I assume that's where she is right now.

Jason: That's fine. While Sarah is out clicking heads, we're going to tease her. I think maybe we should talk a little bit about like why we're trolling Sarah. So, Sarah is one of my favorite people in the entire world because she has a secret language. And so, like... what are some of your favorite Sarah words?

Cassidy: Also, the dumpster -- ah! Ah! Hey! Perfect. Anyway. Sorry, that was very important to do. So, she says a lot of things. The one that I like the most that people really don't understand what she says is she says that we need to work on our quabity assuance which is a reference to the Office that a line that Creed said in an obscure episode. It means quality assurance. When she says that, she means that we should thoroughly test this. But instead she says quabity assuance.

Jason: quabity assuance, oh. Yeah. That is indeed a deep cut. I like that I have the fifth most points on my own stream. How does Chris have more points than me on my own stream?

Cassidy: What are the points representing?

Jason: Right now they represent nothing.

Cassidy: Oh, like Whose line is it anyway?

Jason: Everything is made up. The points don't matter. quabity assuance is is a good one. She's also responsible for why we call -- instead of calling content like short, consumable content, we refer to everything as nuggets.

Cassidy: And boops.

Jason: And boops. Cassidy's TikToks, which are a national treasure at this point, we don't call them TikToks, we call them speedy bloops. Today, we thought it might be fun to make a website that just collects some of Sarah's best sayings. The -- the unwillingness to take that dumpster off your face is really --

Cassidy: I kind of like it.

Jason: All right, chat.

Cassidy: I'm also definitely contributing to the boops on the side as I'm talking to you.

Jason: Good. All right. All right. Well... I don't want to switch over now because I feel like I don't want to --

Cassidy: It's troll your boss. You're my boss now, you have to contribute.

Jason: Oh, I've made a huge mistake.

Cassidy: Yeah, you invited me on this show.

Jason: Great, great. I'm glad that I did this. Good. Well, while we're waiting to drown in boops, wait, what is an RWC takeover?

Cassidy: RWC is rendezvous with Cassidoo.

Jason: Oh, there it is. All right, y'all. So, chat, while you're attempting -- ooo here we go, thank you, John Basille, thank you for the sub. Very much appreciate it. So, chat, in addition to the glossary, we're all Sarah Drasner fans here, what do you think should be in a site that trolls Sarah Drasner? That's what we really need here.

Cassidy: Yeah, this is a community project.

Jason: Yes, this is absolutely -- tacos. Tacos, yes, that is correct.

Cassidy: Tacos, yes.

Jason: How did you want to build this today? What did you have in mind?

Cassidy: So, I was thinking, a database thing. I was thinking about a CMS kind of thing. I have been playing around with Prismic. And it's cool. Maybe do something with Prismic. Connect it to next?

Jason: Let's see how long we can get it done ins Prismic. If we can get Prismic up and running, we can take liberties with our frontend. But if we're running short on time, we know we can go fast with next. That will be our safe hatch. On that note, let's switch over to the pair programming view and take a look at a few things. First and foremost, make sure if you're not already, go and follow Cassidy on the Tweeter.

Cassidy: The Tweeter is where I am.

Jason: Cassidy's Twitter is much funnier than mine. I sometimes think that I could be funny. And I worry very much if I tried --

Cassidy: It's a cringe-fest.

Jason: Yeah, you were like, yeah, it's going to be a cringe-fest. Don't do that.

Cassidy: Not great.

Jason: Today's episode is being live captioned by White Coat Captioning. We've got Amanda here with us today. Thank you so much for hanging out, Amanda. That is made possible through the support of our sponsors, Netlify, Fauna, Auth0 making this show more accessible to more people. Which I very much appreciate. That's on the home page. You can look at the captions on the home page. And these sponsors are all links, you can check them out. Then with that being said, we're going to play with some Prismic today. Let's go play with Prismic. So, if we're going to do this. I need to log in. I think I have an account.

Cassidy: You need to log in. I like that the individual things are free. You can create the data model on your end and not worry about getting stuff. Are you going to Dox yourself, Jason?

Jason: I'm trying not to. I'm logged in. I have a repository I can create. How do you want to do this? From the code side? From the UI side?

Cassidy: I like to create things in the UI just because I like the visual side of things and then pull it in with the code.

Jason: Okay. So, we'll create a new one. And we need a domain name. Hm. Should we get a domain name?

Cassidy: We should get a domain name.

Jason: Okay. Let's get a domain name.

Cassidy: This is the most important part of any project. And the thing that should block everything that you make.

Jason: Yes, absolutely. In true -- in true like web developer fashion, we're buying the domain before we've built the project which I think is important.

Cassidy: Perfect, yes.

Jason: Let's go ahead and buy that.

Cassidy: Because that will mean it will definitely get built.

Jason: Exactly. That's how I hold myself accountable -- I don't want to admit what my annual domain bill is.

Cassidy: My list of domains, it's painful. But sometimes they're just so fun.

Jason: That should be done. Yeah. All the DNS records. Can I -- okay. That's set up. Everything is ready. I always forget that you can buy a domain through Netlify and it happens so fast that you feel like I missed a step.

Cassidy: As employees, we should know this. But every single time I do it, I'm like, wow. That is astounding. Because it is so fast and you feel like you're missing something. I forget every single time.

Jason: Okay. Alphanumerics only. Drasnerd.com. What is my business title?

Cassidy: Businessman.

Jason: We'll find out. We'll put it on the free plan.

Cassidy: Yes.

Jason: Okay. Here we go. We're in. We've got...

Cassidy: Okay. So, there's a lot of -- there's a lot of options.

Jason: Okay.

Cassidy: But I think we can stick with something relatively simple and make a type. And so, there's two things in Prismic. I admit, I'm still kind of learning them. There's building like a page type, a block type. But there's also building slices. And a page can have many slices. And slices are kind of like custom components that you can do stuff with. And so, I think we could make -- I think we could make a page and then put a slice that has the two things where it has like the phrase that she says and the translation.

Jason: Okay. Yeah. That could totally work. So, a couple things. First, Alex pointed out that what I was choosing was not the domain name, it was the Prismic subdomain. So, I was absolutely jumping the gun. I was just really excited to buy a domain name, honestly.

Cassidy: Might as well add one to the pile.

Jason: Someone else asks, what's with the vertical tab extension? It's not an extension. I have switched to Edge, everybody. I don't even like...

Cassidy: I have too. It's so good and I don't understand what's happening.

Jason: I feel like there was this very -- I went all the way away from Microsoft. I didn't use anything Microsoft. I switched to an Apple laptop, I was using Chrome or Firefox. You know, I never used -- my IDE was like Adam. And they've just continually gotten me back. I'm using GitHub on VSCode in Microsoft Edge. It's like, oh, boy, I'm just all the way back in, aren't I?

Cassidy: It's so good. And people in the chat are using it too. It's a thing. Like, at first, Fibian, in the chat right now, hey, you should try out Edge. I didn't like how Chrome was destroying my computer. And Firefox had some things, I don't know if I like this. And ever since I switched to Edge, especially because it has the Chromium base now, I still have all the key commands that I'm used to, but there's just little performance things that are so nice. And I'm still reflecting on that for myself. It is something.

Jason: Yeah, yeah. I see, Sarah has joined the chat, and nobody tell her how to do the boops. [ Laughter ] Actually, Sarah, you will need a -- a subscription if you want to boop. So, nanabooboo. So, yeah, I think that the -- like, yeah. Edge is great. And so, let's create a page.

Cassidy: There she is.

Jason: uh-oh. Now we're in trouble. Thanks, Sarah. Thanks, I guess.

Cassidy: Whee!

Jason: Thanks, Alex, for the gift. Yep, this is gonna be great. Everybody, boop away. And while you're doing that, let's -- let's get in -- let's get into trolling Sarah. Sarah, were you here when we bought a domain?

Cassidy: She did. She said she didn't like it. So, we're already on our way.

Jason: Good. We are fulfilling the promise of this episode.

Cassidy: I was really hoping that a .nerd could be a TLD. You thought it would be.

Jason: It really should be. Is my Slack on?

Cassidy: Is Slack on? Are you getting notifications?

Jason: Quiet that on down. Nobody needs the notification stress.

Cassidy: Excuse me while I continue to the boops on the side while on the stream.

Jason: I think that's done. You have to be faster than that, chat!

Cassidy: Come on, we've got this.

Jason: I like that Cassidy is advocating for her own demise here. Bury me!

Cassidy: Again, this is troll your boss, Jason. It's who you are now. We've got this. Make it to the top!

Jason: Oh, there we go. There we go. It's happening.

Cassidy: There it is!

Jason: You're hitting the time out. Also, we're just chugging the GPU on this thing.

Cassidy: My call with you that's not on the stream, my local one is just -- it has been grinding to a halt. This is excellent.

Jason: Good.

Cassidy: This is what it should be.

Jason: You know, that's the format of this show. We render the screen unusable. I cease to exist. And you get to -- you get to just continue to -- you can talk about whatever you want now. I'm kind of a nonentity at this point.

Cassidy: Hello, everyone. And welcome to the Learn with Cassidy show now. Ha, ha, I don't have anything to say. Make good choices.

Jason: All right, chat. Let's calm it down so we can get something done here. Sarah's not going to let us do this because she just wants to make sure that we actually don't get to build this website. Joke's on you, Sarah. This is getting done no matter what.

Cassidy: I don't know if she was here at the beginning when we described what the website was going to do.

Jason: It's going to be a surprise. Do you deserve to do this? Yes, we do. Do you deserve this to not have to done for you.

Cassidy: The Twitch screen is better than the Zoom call we're on. It's working better there.

Jason: Okay. Good, we're in good shape here. So, I'm... You can do it. Come on, little compooper. Are we already?

Cassidy: I'm a solid 15 seconds behind on local than I am on Twitch. I'm watching our stream on Twitch now. This is great. Eventually, if you haven't clicked the custom type button yet, you should do that.

Jason: I've clicked the custom type button and I'm going to write page.

Cassidy: Yes, we'll want a page to put this on.

Jason: Okay.

Cassidy: You know -- sorry, this was about to be a scope creep moment. We'll start with the single type that's a page. But just know, if this goes well, we could potentially make pages for a variety of people.

Jason: I do like that.

Cassidy: It's a single type. A page is a single type.

Jason: A page is a single type. Okay. I'm creating my single type. And in my single type, we have -- thank you for the sub. Oh, boy, Ben is gifting all sorts of subs Thank you, Ben. Welcome, everyone, to the boop crew. Remember you can use that boop emote. But, you know, with great power comes great responseaboopity.

Cassidy: Oh, okay. Aboopity, that's fine.

Jason: I love in drag and drop, the title, the API ID, the field place holder I don't think we need. What does this mean?

Cassidy: I almost always unselect all. So, in the Prismic editor, they have Rich text. And so, we could have -- because it's a title, those are the -- those are the different tags it allows. But when you do different richtext fields, there's more buttons than just H1 through H6.

Jason: Got it.

Cassidy: Because it's just the one thing, we might not need any.

Jason: Let's drop that in and we'll see. So, there's our title. And then we'll have a title. And on our title, we're gonna do -- we're gonna do slices?

Cassidy: Yeah, so, see how there's a slice zone there?

Jason: Oh, yeah.

Cassidy: Toggle that on.

Jason: Oooo... create a new slice.

Cassidy: Okay. Now we can add a slice. When we add a slice, we can create a new slice and this will be what we use from now on. Yeah, glossary term. We can choose a fun icon for it. Describe it as the term that needs to be defined or something.

Jason: A book. How about this one? That seems fine.

Cassidy: Nice. Cute. Also, something very exciting. The Zoom is now faster than Twitch again.

Jason: Ooo... we're back, everybody.

Cassidy: Oh, my gosh.

Jason: This list is probably a list that seems like the right thing.

Cassidy: Honestly, the display, it doesn't affect how it does everything.

Jason: Okay.

Cassidy: It's just how it's displayed for the person editing the page. It doesn't actually matter.

Jason: Do we need a label?

Cassidy: I don't think so. That part is for people who are editing it. And so, you could just call it "Term" if you want to. But I don't think we need it.

Jason: We'll just leave it out. Okay. So, we have a glossary term. And then this is a non-repeatable zone.

Cassidy: And then you can -- you can -- yes. If you put that in the repeatable zone, then it can be a repeating slice.

Jason: Oh, okay. So, I can then do the -- the -- is it plain text? What are we looking at?

Cassidy: Plaintext or richtext. I don't know if we want to have bold available or something.

Jason: Probably for the definition, maybe? So, like the term can be plain -- we don't want a heading, though. We want text.

Cassidy: If you go back to the slice. If you scroll back up to the slice. Or, never mind. You're in a good spot. So, this -- we're defining the slice in here. And the slice will be a repeated thing. And so, you could probably just put richtext or something in there and then key text -- or -- or a title.

Jason: Yeah, so --

Cassidy: So, the rich text will be the definition and we'll need a title for the actual term we're defining.

Jason: All right. So, we've got a definition. And that's fine. We will allow multiple paragraphs. We won't allow H1s. This all seems fine.

Cassidy: Yeah. We might not want an image. Well... do we? Nah.

Jason: No images?

Cassidy: I meant like in what's available in the rich text.

Jason: I think -- did I just do that? I think I did that.

Cassidy: There we go. Yeah.

Jason: I think so. Yeah. Okay. So, we've got that. And then we would be able to add a title. And we can probably put that up above?

Cassidy: Yes.

Jason: Hello?

Cassidy: Yes.

Jason: Hello?

Cassidy: Ah!

Jason: Oh no.

Cassidy: You know, I did this wrong. Take this out of the repeatable zone and put it in the regular one. The slice is the repeating thing. But each slice only has one term and definition.

Jason: Oh, I gotcha. I need to get rid that have.

Cassidy: Could you move it? I thought you could move it.

Jason: It wouldn't let me move it. It looks like.

Cassidy: Clearly, I'm still new to this platform.

Jason: That is okay.

Cassidy: We're learning.

Jason: So, the term -- the term will be an H2, sure.

Cassidy: Sure.

Jason: And then we'll drop this down here. And that's gonna be the definition. And the definition can't have an H1 or an H2 or images. And that seems good. Now we have a non-repeatable zone for the slice. A glossary term has a term and a definition. Good?

Cassidy: Great. Good.

Jason: I think we're happy, then. So, I'm going to save it.

Cassidy: Yes.

Jason: Then --

Cassidy: I think we can have many slices on one page.

Jason: Okay. So, then if we go to documents. We go to create -- this is a page. And it has a title of --

Cassidy: You could just say like home page or whatever.

Jason: Yeah. So, we'll start with home page. And then in here we should be able to click... okay.

Cassidy: Beautiful. And you can see at the top, see how it has the rich text editor there. If we wanted to do stuff, we could.

Jason: Oh, nice.

Cassidy: But those were all the buttons you selected in the editor before.

Jason: Okay. That seems good. And then I can add another one.

Cassidy: Yes. And then -- yeah. We can add as many terms as we want.

Jason: I love it. I'm very happy in here. [ Laughter ] Just -- what -- what's -- oh, we do need to turn down for what's glasses. Someone wants to PR that, they can. Oh, SomeAnticsDev. Thanks for showing up.

Cassidy: We should have Fortnite as a term and it should be Sarah's new day job.

Jason: Ooooo... okay. All right. These all feel accurate. Ironclad.

Cassidy: Perfect.

Jason: Okay.

Cassidy: All right. So, we can save it.

Jason: One more, one more. Tacos.

Cassidy: Oh, yes. Tacos.

Jason: K. I've saved. I've saved. We've made the thing.

Cassidy: Perfect.

Jason: We now have content. We've got a bunch of facts. And now do I -- do I want to publish it?

Cassidy: We do. Because once we publish it, then that's what we can access it from the API. Otherwise when it's saved, it just lives on the platform.

Jason: You have made a mistake.

Cassidy: Uh-oh.

Jason: I got it wrong. Bloops are videos. How dare I?

Cassidy: Well, don't forget speedy bloops, though. Because speedy bloops are a variant of bloops that are also content nuggets.

Jason: Oh, all right. Well, then, we should probably add that in, right?

Cassidy: Yeah. Very important to be accurate. I like that you can do it in between the others too. You don't have to rearrange everything.

Jason: Okay. And we need to move this up so you get the content in the right order. You start with nuggets, then you get to bloops, then to speedy bloops.

Cassidy: Right.

Jason: I'm saving, I'm publishing, I think we're ready, right?

Cassidy: We're good to go.

Jason: Speedy bloops are TikToks. Lindsay is in the chat.

Cassidy: All kinds of Netlifolks.

Jason: I'm so happy to see everyone here. It's great. It's good being surrounded by people I like.

Cassidy: And people you tolerate. [ Laughter ]

Jason: That had an edge to it... it's good to be around people I like and Jason.

Cassidy: Okay. So, now I think we can start coding and pull this in.

Jason: You had recommended we use -- what is it? Prismic-JavaScript?

Cassidy: They have a great little library. It's Prismic-JavaScript. I think that's the npm that you install. I think that's the whole thing.

Jason: Okay. Let's drop this in the chat for everyone's reference. And now we've got... yeah. Okay. Perfect. So, then we can go through -- well, there's a lot of installation stuff. Okay. Here we go.

Cassidy: Just npm install it. It's fine.

Jason: And it's the Prismic client is what we're after?

Cassidy: Yes. I admit. This is where I'm mildly out of date. This is what we install.

Jason: I realized I forgot to bring up a terminal. Let's get a terminal over here. And we will make a new directory. And we're going to call this drasnerd.com and then we'll get in it, then we'll npm init, and then npm install Prismicio/client.

Cassidy: Yes.

Jason: Okay. And then I'm going to open this up. And ideas we have the Prismic client installed. And that's all. So --

Cassidy: Yay!

Jason: Going back over here, do I need -- I've got all sorts of --

Cassidy: They have all sorts of things that you can pull in. Ah! Look at that. They have a demo project we can probably pull from. See that instantiate the Prismic client, you can put that in a util and create the Prismic client. Our repository name there is drasnerd.

Jason: Okay. Yep. Let's see... what is the... is it source pages is the...

Cassidy: You can just do pages.

Jason: Let's just do utils, then, and we'll tall this one Prismic/client. And we'll drop this in here. Should we be using CommonJS? That's fine. And then I'm gonna change this. Over to drasnerd.

Cassidy: In your options, I think that's where your access token goes.

Jason: Okay.

Cassidy: And so, you could put inside options it's access token in camel case and then we got to get an access token from Prismic.

Jason: Okay. So, I've got my access token. And it looks like... the rest of this looks like stuff that we probably won't need today. So, to get my -- if your API is private -- now, we should be able to make this public, though, because it's just published content.

Cassidy: That's true.

Jason: Maybe we can get away without it. Let's see. Do I have to change a setting to make that work? API and security. Use this entry point for your API access... is that what we did here? No.

Cassidy: That is the -- the thing that we put in the client. I think...

Jason: So, this API... and then we've got this. Oh, so, but this is a different one. Search documents. And we get a home page. Okay. All right. So, we're getting content. That seems good. And we can get it as HTML or JSON.

Cassidy: Great.

Jason: That seems right. I think this will just work. Because it doesn't look like we actually need -- it doesn't actually look like we need anything.

Cassidy: They just said in the chat that it's public by default. So, hey!

Jason: Perfect. Perfect, perfect, perfect.

Cassidy: Makes our lives much easier.

Jason: Exactly. Hey, what's up, Luke? Good to see everyone. Yeah. All right. I'm ready. I'm so ready. So, we've got this now, which means that we'll be able to import a client and just get content anywhere.

Cassidy: Right.

Jason: Let's see. We have about 55 minutes left. Do you want to do this in Next or do you want to try something else?

Cassidy: I'm curious about trying something like Eleventy because I haven't done it before. Or next.

Jason: Should we put it up to the chat?

Cassidy: They're going to have us use Svelte.

Jason: I'm going to have to say no. Do you know it?

Cassidy: Sarah said that we should use our butt.

Jason: No. Let's see... we've got an Eleventy, another possum crew, Eleventy, next. I see enough people saying Eleventy, let's make it happen.

Cassidy: I've never made something from Eleventy from scratch before. I've edited existing Eleventy, but -- learning!

Jason: I'm a huge Eleventy fan. I like it as a simple starter.

Cassidy: Jason, you're a normal-sized Eleventy fan.

Jason: I didn't have a response to that... [laughter -- losing it...]-let's do Eleventy. We'll get Eleventy installed. And then we can do -- what? I think we just need some -- we just need some filings configured. I think the way Eleventy runs is by default. If we make an index.md --

Cassidy: Oh, it will just work?

Jason: Hello, chat. And then let's make our build command. Eleventy, and I think that's the command. Let's run it. So, it runs Eleventy and then that builds out to site. And we've got this. So, it's pretty -- pretty friendly right off the bat.

Cassidy: That's awesome.

Jason: I think a couple things that I would like to do. I would like for this to live probably in a -- like, I don't know -- well, I guess it doesn't really matter like there are if example. We can keep it as a home page out of a source folder or something.

Cassidy: Sure.

Jason: Okay. Let's make it work. So, then we need some layout so that we can make this look like something. So, let's go to templates in here somewhere. Template languages... where the includes? Hello? Configure your Templates... layouts.

Cassidy: You keep saying "Hello."

Jason: I hang out with Lindsay. She's wearing off on me. I'm learning how the youth speak.

Cassidy: Our teammate Lindsay in the chat today, when she can't find something, he's like, "Hello?" And Jason has been doing that all day.

Jason: I have been doing that for a month now. It's in my brain. It's who I am here. What we can do is start with some basics here. So, we will pull across some front matter. And I want this to be -- I think we can just call it like "Default" or something. And we have to figure out where this lives. Includes. And then we give it a layout name. And I'm pretty sure we can use whatever we want by default. I know liquid -- it looks like Nunchucks is the --

Cassidy: Yeah, Nunchucks, I don't think we've used this before.

Jason: We're not doing anything particularly intense today. Let's see if we can get away with this. Let's do that. We'll do njk. And then I can set up an includes folder. And do -- nope. Default.njk. And then inside of it -- nope. That's -- oh, I made it a folder name. Okay. Well, try that one more time. This button.

Cassidy: Jacob said in the chat, hello, is this young at heart? And it's the butterfly meme.

Jason: That's exactly what it is. Yeah... you're not wrong. Wait. How do I do... do I make you use HTML? And then I want -- yes.

Cassidy: Defaults to liquid. Huh.

Jason: Okay. So, now I have title and then I should be able to do like content. And I think what will happen is if I put in something that's like... We should be able to run this one more time. And we'll set up a Dev server here in a second. But then when we look -- oh, no! Oh, you didn't work at all. You worked the opposite of good. What happened here? Index.md...

Cassidy: Touch a sneeze. So, I'm going to mute myself real quick. Sorry, everyone. I don't want you all to hear my snot. Wow, that opened my brain. Okay. We're back.

Jason: Okay. I figured out what I did. I edited the generated file, not the actual template. So, then if we look in here, oh, it's not saved. It's not saved. And open it again. There! Look at it go! This is broken now. Because I need to mark it as safe, maybe? How fast can we get this? There it is! Okay. So, in Nunjucks, we have to -- we're piping it into a function and let's us use HTML as far as I understand. I have a limited understanding of Nunchucks.

Cassidy: Cool.

Jason: Yeah. We can run serve which Steph is saying in the chat. Which we probably should do. Set it up as serve, and then I think it's valid JSON. And then I think we can npm run Dev... there it goes. What did I just do? This button...

Cassidy: Oh, no! What?

Jason: Ah-ha! Right. Now we have -- I don't know what that sound was that I just made.

Cassidy: Wahaa!

Jason: This then gives us our content. And if we delete this, it will live update. We're in good shape. Then we need to data in. And to get our data in, I think... we need to look at Eleventy's data -- make this bigger so you can see the sidebar. Data cascade. And then the data cascade... let us do data files. And data files go in underscore data. And I think they can just be JavaScript, right? Yes. JavaScript data files. Okay. So, in JavaScript data files, we can just export whatever we want, and we get to run functions.

Cassidy: Got it.

Jason: Yes! So, we can make it async and stuff. Cool. So, that means, then, theoretically speaking, we should be able to hit our Prismic endpoint through data and then we'll call it glossary.js. And then in here we should be able to get the client from -- or this is gonna be destructured. And that's gonna be require... utils Prismic client.

Cassidy: We have the one in our utils fold their we can use, right?

Jason: That's the one I just grabbed.

Cassidy: I'm in sync with Twitch again. So -- I'm sorry.

Jason: Oh, no. I have my async function and that is going to return some data. So, let's startly just returning like any data here. And I'm -- I'm gonna make it return like an array of one, two. And then -- so, we can leave this out for a second. And I think the way this will work is we should be able to put that in here. So, if I write glossary, because that's the same of the file, we should get whatever the content is that gets returned. So, this array. Let's find out if that works!

Cassidy: Yeah! Wow. That is -- that's so nice and simple.

Jason: Unexpected token export. Oh, I know what I did. I mixed -- I mixed ES modules and --

Cassidy: Oh, okay.

Jason: That should work. Might have to stop and restart because I broke that. There we go. Okay. So, now we have our data. So, let's figure out how to get our content out which I think takes us back to the Prismic docs? Maybe.

Cassidy: Right. And so, there's an API for the JavaScript client. And so, you could do like client.get by UID and stuff and then be able to get our page and from the page, we could get the body of the page which is all the different slices.

Jason: Oh, should I set that up.

Cassidy: Client.query, that can work.

Jason: Okay. Do I need to set a UID on this? Because I definitely did not.

Cassidy: Do the .query thing it said.

Jason: Okay. .query, an empty query will return all the documents. That seems good enough for me.

Cassidy: Yeah!

Jason: In glossary, we will get -- that's a promise. We get results = await client.query, everything. And then just return the result and see what we get.

Cassidy: Yeah!

Jason: Hey!

Cassidy: Yeah!

Jason: So, then we've got results.

Cassidy: So, now it's just parsing that.

Jason: Yes. So, then if we take results.results.

Cassidy: Results.data or something? If I'm skimming this right...

Jason: Let's do this. And... that made it worse.

Cassidy: Nice.

Jason: Can I format this? Stringify, and then let's make it look a little nicer. There we go. Okay sop, each of these is a --

Cassidy: Nice.

Jason: It did just work. Holy buckets... This gives us our page. And in our page, we have data. And then in the body, we have slices. And then our slices, non-repeats, okay. And then we've got more slices...

Cassidy: So, we want to get all the things of type slice and then -- yeah.

Jason: Got it.

Cassidy: The terms in each of those.

Jason: Okay. So, to do that, then, we need a little bit of parsing, right?

Cassidy: Yes.

Jason: That's going to be in data.

Cassidy: We're going need to write code.

Jason: We are gonna need some code. Slugs page. So, I wonder if... okay. So, we're gonna do some stuff that's not good. Hard code getting the page. And so, we'll get the page. Will be result zero. We do need to add code. Oh, so, we would need to add code... Once we have the page, if we throw the page in here, that will simplify that to just an object. Or it will break entirely. What did I do? Oh! It was results.results.

Cassidy: Right.

Jason: Like, we were just like continually doing code. Okay. So, then once we got the page, we can get data. Page.data. I'm just using this as like a glorified console.log here.

Cassidy: Yep.

Jason: So, then we got the title and the body.

Cassidy: And so, I think -- yeah. Title we can get. And then we can do .body. And then is it .find? And then we could do in find that's when we can pull out all the different chunks?

Jason: Chunks. Yeah. I think -- I think we can. So, let's do this. Where we'll drop in the title and then we'll keep data in there. And what we should see is that we'll get -- is that gonna work? Or did it I break it broke it. Not read value of undefined. So, I missed a piece.

Cassidy: Dang it!

Jason: Title is page... oh!

Cassidy: Dot data.page.value --

Jason: Siri! Oh! Are there's a page prop there. Maybe I should do it like this? Because then we can just get at the values a little more easily. I think I might need to stop and restart here. I do. Okay. All right. So, here's our title. And then we need to go into the body here and you were saying use a find?

Cassidy: Yeah, I think -- I think we can use .find and then like if the -- ahw -- if the slice type is equal to glossary term...

Jason: Okay. We'll call this... entry or something. And then we'll do if entry.type equals -- no. Slice type.

Cassidy: Yeah, slice_type.

Jason: Glossary term. Then we want to return -- or... is find --

Cassidy: Well, then -- find returns the thing. So, you just returned the Boolean. So, you return --

Jason: Is find gonna give us the first one or all of them?

Cassidy: Oh, I thought it was all of them. Maybe I'm wrong. Or is it .sum? There's so many.

Jason: Is it facility their we want here?

Cassidy: We could also use filter, yes. Doesn't filter, we get individual things from it, but we want to get all of the slices?

Jason: I don't know -- let's see what happens. I'm gonna put terms in here. So, with find, we're gonna do terms. And we get the first term.

Cassidy: Find is the first one, okay. Thank you, jkneelson94.

Jason: Filter.

Cassidy: Yeah.

Jason: Once we have filtered, we can parse over this a little bit. Why don't we chain this? We will map it and get the slice. And then for each of these, we want to return the -- term? And the term will beSlice.non-repeat -- what have I done with this? That is a big mess that I don't want. Slice -- did I miss something?

Cassidy: I'm just -- I'm just behind you enough where I'm not sure if you've typed the correct thing just in like 5 seconds away. We do term.value...

Jason: Term dot -- so, we get into this non-repeat.term...

Cassidy: Right.

Jason: .term. Okay. We should probably pull this out a little bit earlier. So, the term is going to be -- no. The data -- hm. Let's call it -- I hate naming things. Is it going to be --

Cassidy: Just default to poop or use some Sarah terms.

Jason: So, then we want the term is gonna be fields.term.value zero text.

Cassidy: Yes. Text.

Jason: That is a little bit messy. But it's going it be okay. And then for the definition, we want the same thing, I think.

Cassidy: It's the exact same thing except it's .definition instead of .term.

Jason: .definition, text, if we have done this correctly, what we should see is the title and the terms in an array.

Cassidy: Theoretically, yes. Ah!

Jason: Yes! Now we have that, we can drop out the raw data. And now our Eleventy site is just getting what we need. We have a title and we have some terms that is coming out of Prismic. We are very happy about that.

Cassidy: We are so happy.

Jason: My bucket! Oh! My bucket! Then we have to remember how to do looping. Because I can do glossary title... and that -- oh, no. Okay. So, that part didn't work. Why didn't that work? Glossary.title. That should have --

Cassidy: That should have worked. Is it glossary dot something dot title?

Jason: I don't think so.

Cassidy: No, it's not.

Jason: What's up with that? Hm.

Cassidy: What if you did with square brackets? Does it yell at you there? It shouldn't.

Jason: Return username. Do you show me how to use it, then? Return route Nunjucks. What did I do? I don't want to use terms, I want to use title. That's what we have --

Cassidy: Yeah.

Jason: In the -- like, this title here, I want to display that. And then we want to loop through the terms. So, to do that, I want --

Cassidy: Oh, wait. Jneilson had a good point. Aren't you returned a stringified value?

Jason: Oh! I am. That would have haunted me all day. Never would have figured that out. For real.

Cassidy: That was it. Thank you. Thank you so much.

Jason: Hey! There we go. Thank you.

Cassidy: Yay! It's an object.

Jason: So, then, we need to figure out how to loop in here.

Cassidy: And it was...

Jason: Four... um... anyone remember what the fore loop? Nunjucks for loop. Can FYI has us covered.

Cassidy: Oh! Thanks Khan FYI. You have done it again.

Jason: It's going to be percent for term in glossary.terms. And then inside of here, we have our stuff. And then we can end for, I think? Is that right? I think. Let's try it. It might explode. And then what we can do is we can set up a term -- term.term. And term.definition. And I need to wrap this in curlies. Hey, hey.

Cassidy: Hey!

Jason: Look at it go.

Cassidy: It's a beautiful!

Jason: We have, I would say, 30 minutes to --

Cassidy: To make it cute?

Jason: Call it 15 minutes to make it cute and we'll get it deployed up at Drasner.com.

Cassidy: Cool. So, do you have a preferred styling way of doing things?

Jason: I mean, I default to plain CSS most of the time.

Cassidy: Same.

Jason: Because that's the thing that I know best.

Cassidy: If you would like to learn something new, we could throw in something like Bulma which can give us base things to use and do styles on top that have.

Jason: I'm down to do whatever. What do you think, chat? Plain CSS or do you want to try a framework?

Cassidy: Yeah, tell us.

Jason: I see some Bulma votes. Bulma votes. Try the thing! Try the thing! Okay, we're doing Bulma.

Cassidy: Try the thing. It's Bulma.io.

Jason: Okay. Getting things started. Npm install, Bulma.

Cassidy: It's pretty straightforward. Basically, we get classes that we can add to things.

Jason: Okay. Let's make this a little bigger so that I can see what's going on. Go to the getting started docs. And then... how should I --

Cassidy: The overview is -- so, that -- we have to get the CSS library.

Jason: Okay. You only need one CSS file to use Bulma. All right.

Cassidy: Yay.

Jason: Wait, can I -- a lot of clicks. Okay. Here we go. So, I am importing... do I... install the npm package, okay.

Cassidy: I think installing it is it.

Jason: How do I -- do I not use it from the... I don't understand. So, what am I installing if I'm not --

Cassidy: Yeah.

Jason: Do I need to use the CDN?

Cassidy: This shows, again, how little I've used Bulma. We could just not npm install and use the CDN at the top of a CSS file and a that's it.

Jason: Import Bulma.CSS?

Cassidy: There it is. That works.

Jason: Okay. Here we go. Here goes the corgi stampede!

Cassidy: Woohoo! [happy music!]

Jason: Thank you for the sub, Nate. I appreciate it. Let's use the CDN. It seems like there's potentially some steps for this that we're not ready for.

Cassidy: We're going fast.

Jason: We're going to take this. We already have that one. I want the HTML link. That seems like a good idea. Okay. Coming into our template. And I'm gonna drop that in. We'll make this bigger so that everybody can see it. So, here is Bulma. And now that we have Bulma, we can do a layout, I would assume.

Cassidy: Yes. And so, now we can basically just as the CSS classes. So,, for example, if we add class title to our title, it will make it a title.

Jason: Okay.

Cassidy: But what I like in particular is they have a card that we could -- they have some card classes. And so, we could use that to -- to have each term have their own little thingy.

Jason: Okay. So, let's take a look at how this works... I don't have it running anymore. Let me start the server again. Npm run Dev. Okay. So, we've -- we've already got some like -- some defaults. I can see some globals got applied.

Cassidy: Yep.

Jason: That's all good. So, then... we probably need like an overall container. So, if I want to do an overall container, it looked like they had one called "Container."

Cassidy: Yes. And they also have columns and stuff too if you wanted to do columns.

Jason: That at least gets it off the sides. Is wide screen, is... okay. Is there like a... a... if we want to do... like a... kind of a general set up of, "Here's a basic page!" so that we could steal some of the outer framework of like header/footer stuff.

Cassidy: They do. And it's somewhere on their GitHub. But I need to find it.

Jason: Okay. I don't -- let's see. GitHub. That's Nunjucks. Let's go here. Head over to the GitHub.

Cassidy: They have a cool little expo page to show how people used it before.

Jason: Nice. So, CSS only... documentation...

Cassidy: I know I've seen this page where they're just like, here is a basic page with a title and blocks.

Jason: Columns, elements maybe? Block, yeah...

Cassidy: I think content?

Jason: Layout, header... horizontal level which can contain almost any other object. Hero, section.

Cassidy: Section I think is what we might want.

Jason: Okay. Let's try that. Direct children of the body. Okay. That's what I want.

Cassidy: There we go.

Jason: Section class section. So, let's do a section. And let's go back and look. Hey! That looks better. That's what we were after.

Cassidy: Nice.

Jason: Okay. Now that we've got that, then we can do, you said there are cards?

Cassidy: Yeah. They have cool things called cards. They have boxes too. There's a few different ones. But there's some nice base styling that we could override if needed.

Jason: Okay. Beautiful. So, I want... I think for these we want the content and -- is there like a title? Title. Yes, okay. So, if I take this -- nope. Take this over to the side. And take this over here, then we can do one of these. So, let's... we'll go with the div class card. And then inside of that, we want a div class...

Cassidy: Oooo... someone made a good point that we should be using tiles instead. And tiles are pretty cool.

Jason: Tiles?

Cassidy: Yeah.

Jason: Tiles...

Cassidy: Thanks for that mdsbalazam. I don't know how to pronounce your username.

Jason: Tiles. Okay. I'll do this. This works.

Cassidy: Yeah.

Jason: So, let's get a tile.

Cassidy: Because then we can just use basic styles inside of them.

Jason: What's this? Tile... vertical tile, top tile. I don't know that I fully understand what's happening here. So --

Cassidy: Like there can be a giant tile and tiles inside. But just start with class tile and a tile and sub tile in them.

Jason: Okay. Call this tile. And then this is going to be content. Whoops. So, we'll do this one and this one as article. I like that. And then we've got a div down here for our content. Inside that have, we want a -- let's do an H2 class title with our term term.

Cassidy: Term, term!

Jason: Term, term! And then we can do a div class content, again. For term definition. And then I'm thinking that probably needs to be -- that probably needs to be a paragraph would be my assumption. Let's see how this looks. Okay. So, that got us closer. Let's make this a paragraph. Okay. Not a lot changed...

Cassidy: Yeah. Not a lot changed. I expected something beautiful to happen.

Jason: Okay. So, this is simplified. We've got our term and our definitions in. That we can be happy with.

Cassidy: It looks like if you give it the notification class, then it has a background color that's applied and then you can style that. I might be wrong. I hope I'm right.

Jason: There we go. That works!

Cassidy: Hey!

Jason: And then if we wanted these to, let's say, actually tile. Because they're currently full width. How do I make you is eight? That seems like -- that seems like a thing that we just try.

Cassidy: Yeah.

Jason: Let's see what happens if we push the button. Is for. Okay. That seems -- that -- this is okay. This is a good size, I think.

Cassidy: Yeah.

Jason: Let's figure out how to make 'em wrap. We do that with... [singing beautifully] -- tile ancestor --

Cassidy: I know they have flex classes. Maybe it has to be in a flex class?

Jason: Is vertical... is -- does anybody know this? Oh. Is primary, is info. Nice. Okay. Yeah, in mark down file is no longer a mark down file. I could probably just make it an HTML file. Layout, container, columns. Let's try this. Sizes, responsiveness. Let's look at basics. So, columns. Is that right, do you think?

Cassidy: Columns seem right, but at the same time, if we did columns, then we would have to get the number of terms and make sure that -- like, we... I think we would have to --

Jason: Is flex wrap?

Cassidy: Yeah, I think that's what we might want. And wrap that around the title. Yeah, yeah.

Jason: Okay. Maybe that needs to go around the outside?

Cassidy: Yeah, the container of the articles. Nice...

Jason: Okay. So, that's closer.

Cassidy: That's better. We can add flex -- wait, you added flex wrap already.

Jason: No. That's not it. Maybe I need to take off this, isfor?

Cassidy: Oh, yeah, maybe?

Jason: Nope.

Cassidy: Hm.

Jason: Do I need container there? I don't know. Let's find out. Kind of? I don't know. That's overflow hidden. So, that's not quite it... columns --

Cassidy: I'm looking at the docs. Just down flex wrap should work. What's -- oh. Really quick. With what you added to that top level thing... did you -- did you do -- you did is flex flex-wrap. Never mind.

Jason: Is flex flex-wrap. And then these --

Cassidy: Wait! Is flex-wrap wrap.

Jason: I'm sorry.

Cassidy: In the docs, if you go to the docs for flex-wrap, there's an is flex-wrap wrap.

Jason: Is flex --

Cassidy: I'm starting to really not like this. But... there. Is-flex-wrap-wrap.

Jason: Okay. So, that's a little bit better. What about a gap?

Cassidy: Okay.

Jason: Can we line...

Cassidy: I wonder if you can add the is-for thing back to add a gap.

Jason: I have the is-for --

Cassidy: Oh, sorry.

Jason: Is-justify-content-space-between. Okay. I will say this feels a little bit like writing CSS.

Cassidy: Yeah. At this point, we probably should have just done this ourselves. And I'm sorry.

Jason: That's okay. How do we -- what about gap? Margin. How do we do margin? Spacing? Let's see... margin, maybe we can do like a -- but I want flex spacing.

Cassidy: That has to exist. I'm going to -- oh! If you search in the filter links, there's space helpers. Oh, wait. That's what you are looking at.

Jason: I was looking at that. But I might be... margin, padding...

Cassidy: Like if you just did M-1 around everything? Or M dash whatever?

Jason: Yeah, that will work. But it's gonna -- here, I'll show you what I'm thinking. So, if I save this, now these are like out of alignment. Like, if I make that more pronounced?

Cassidy: Yeah.

Jason: So, what I'm looking for is like... which I actually think this needs to go on the parent. But see that apparently breaks all the styles, which is interesting.

Cassidy: Huh.

Jason: Oh, you know what I bet it is?

Cassidy: What?

Jason: I bet if I do one of these... I bet it will suddenly start working.

Cassidy: Nice.

Jason: It won't! Interesting. So, this -- this doesn't like... why doesn't it like the gap? That's bizarre. Okay.

Cassidy: A couple people have been saying that we needed to nest something more for tiles.

Jason: We need to nest for tiles?

Cassidy: Oh, have tile is ancestor wrapping the whole thing.

Jason: Okay. So, going back to here. Instead instead of this we do tile is ancestor?

Cassidy: Yes.

Jason: Okay.

Cassidy: Or, I don't know if it's instead of or including. But have that in there together.

Jason: Maybe I need the is-for out if we're doing tile things? Okay. That's slightly better.

Cassidy: Yeah. We're getting there.

Jason: Layout, tiles... you only need a single thing. The tile. Okay. I'm sort of with ya. How it works. Nesting. Start with an ancestor tile. Add tile that will distribute themselves horizontally. You can resize. So, we do need the is-for.

Cassidy: Right.

Jason: Hm. Do we have to do like wrap groups to stack them?

Cassidy: I feel like you shouldn't have to. Unless this is very not flexy and more gritty.

Jason: One, two, three, is child box. Yeah, these are like stacked vertically. There's no auto-wrap. Three columns.

Cassidy: This is a great learning experience.

Jason: So, it looks like these are pretty prescriptive, not --

Cassidy: Yeah, I thought they would be a little bit more flexible.

Jason: Okay.

Cassidy: Yay. Fun.

Jason: Okay. So, at the potential, I think maybe we just try this in regular -- I'm sorry, I'm sorry, Bulma fans, I think this is going to be way faster if we do this without Bulma.

Cassidy: I agree. I regret bringing it up in the first place.

Jason: Okay. Let's call these like --

Cassidy: Someone said, add-is-not-working.

Jason: Okay. If we call these glossary, we can call it like a glossary container. And then we can pull this in here. And we'll set it like -- and so, then we can make this display: Flex. And we can do flex-wrap: Wrap. And gap, 1rem. And then justify-content: Space-between. Now we have that general setup there. I'm going to pull this tile stuff out. And what we should see, I think, is there we go. Then --

Cassidy: Nice.

Jason: Then if we set up our glossary term, we can set a background of, let's set it to like tripping E. We'll give it a border radius of call it 1rem and a padding of 1rem. And then if we set that in here... we've got tiles. And then let's set a width of -- or, actually... let's see. Should we do... let's just go with a width of like 30%.

Cassidy: Yeah.

Jason: And then our gap would be what? If we want 30%, that's going to be 3. Our gap would be 5%?

Cassidy: Wouldn't it be 3?

Jason: I did bad math.

Cassidy: That works.

Jason: I think this is 30, 35, 65 --

Cassidy: Correct.

Jason: 65, 70, a hundred.

Cassidy: Yes. Good job. I'm wrong.

Jason: Why is our gap only... oh! So, that part sucks. Here's what we can do. Let's do 1rem. And then here we can do a calc. And we'll do 33% minus 1rem.

Cassidy: Nice! That -- yep. Have you ever had troubles with --

Jason: That's not perfect. But it's okay.

Cassidy: I have had weird calc bugs whether I use calc with pre-processers. It works fine with regular CSS. But sometimes you have to wrap it --

Jason: I have largely stopped using pre-processers just because I find that CSS these days does most of what the pre-processers did. So, I've --

Cassidy: The one thing I use them for really is nesting. I really like using --

Jason: That's fair, that's fair. The nesting is, yeah. I do miss that. Okay. So, this, though, this seems like it's pretty okay. So, I'm gonna go out here and let's drop this out. And instead, we can do a pretty like rudimentary reset. So, we can go box sizing. Order box. We can set --

Cassidy: Margin zero, padding zero, all that --

Jason: I have a shortcut for the system font, we can set that.

Cassidy: Nice.

Jason: We can set the margin to zero. And then if we set margin zero here, then we can use one of my selectors, the lobotomized owl selector to give everything else a margin top of 1rem. Which typically looks pretty nice. I'm happy with that. And then we can take our section. And our section can be -- let's go max width of 90, margin of -- let's go 4rem auto. And that should -- hey! Look at that.

Cassidy: Yay!

Jason: And then if we go back here, one more thing. We can go to align items top.

Cassidy: Could we center the title?

Jason: Oh, no. Flex start. What am I... align content? What am I doing wrong here? This absolutely works.

Cassidy: It's align items.

Jason: Align items. Glossary container. Align. Items. Start? What is happening? Why are you... oh! I know why. So, it's going to be align-items, flex start. And then these have a margin of zero. Because we did the lobotomized owl which was giving the top margin. Ah-ha! Okay. That's good enough. It's not responsive, but we don't have time to go responsive. But we do have time to center that title, which I think is a good idea. And then we will... let's go H1 and we'll go text align, center. Good. Okay. Let's see if we can deploy a site in under 4 minutes. So, I'm going stop this. I'm going to get, add all -- nope. Need a Git ignore. Let's touch, Git ignore. I'm going to echo Node modules into Git ignore. And then --

Cassidy: Nice. That's smart. I always open it like a chump.

Jason: Site in -- Git ignore. And that just has it at the bottom so I can keep dropping files out here. That should be good. So, let's add everything. Good. Okay. So, Git commit. Okay. Then I'm gonna GitHub repo create, learnwithjasondrasner.com. It's a public repo. Yes.

Cassidy: Noice.

Jason: And get, push, get all that stuff up there. Okay. Netlify init. Create and configure a new site. We're gonna put it on my team. We're gonna call this Drasnerd. The command is gonna be npm run build. The deployment directory is gonna be site. We didn't use any functions today. We don't need a Netlify -- let's keep a Netlify TOML on there. Okay. So, now that that's there, I can open this. Here's our site. It is building. And what I'm gonna do is while that's building, I'm gonna head over and get to the domains. I'm gonna make this bigger so we can see everything. Add a custom domain.

Cassidy: And because we got it on Netlify, I think it's just like seconds.

Jason: Yeah. So, this is -- this is good. This is provisioning now. Drasner.com, it's good. Good, good.

Cassidy: Cool.

Jason: Verified DNS, provision certificate. Uh-huh, don't you lie to me.

Cassidy: Oh! Look at that. It's so speedy. Usually it does that within the custom domain within an hour because of DNS things.

Jason: Yeah. So, this should be live. And here within HTTPS, not quite yet. But we'll get there. So, within -- within a little bit here that will be live. So, y'all can check this out. Drasnerd.com is live. Sarah is so happy. And we'll make sure we go back and share -- share with Sarah all of the good things that have happened here. But I wonder -- oooo... how do webhooks work? How fast can we set up a webhook, do you think?

Cassidy: Really fast, actually. It's in the settings there.

Jason: Okay. There's our webhook. Deploy to Netlify.

Cassidy: And if anybody wants to know more about this, I wrote a blog post on the subject somewhere on the Netlify.

Jason: Do you want to drop a link to that in the chat?

Cassidy: Let me find it.

Jason: Overview, here's Drasnerd, the site settings, build and deploy. And I'm going to find a build hook. Changes in Prismic. Saving. Now I have a build hook. So, I'm gonna go back over to Prismic. I'm gonna drop this here. I could set a secret, but I'm not going to. And we're going to add this webhook. All right. So, this is good. So, then I'm gonna go out to our content. And let's update this. So, we'll update. Publish. And now what we should see is if we go back to deploys, it's building!

Cassidy: Yay!

Jason: Hooray!

Cassidy: Magically!

Jason: Love it. And I think --

Cassidy: So fun. And it's so fast too.

Jason: Yeah. Let me check... are you ready here? Provision. Provision. It will get there. So, sometime in the next hour or so that will go.

Cassidy: It's so fast. But like --

Jason: Hacla! It's live!

Cassidy: Yay!

Jason: So, yes. And let me pull this link up. [Barking] So, here's more if you want to go and do... but, yeah. So, we're -- we're in really good shape here. Like, I'm really happy with that. We were able to get a full site set up with a CMS. We got it configured on Netlify, deployed to production with a real domain name. The certificate is being provisioned. That will be done in an hour or so. Not bad for a day's work. Sarah, do you feel this was an appropriate amount of trolling? Or did we let you down? Did we let you down in the right way or the wrong way I guess is the better question.

Cassidy: Yeah. How much do we disappoint you? And what kind?

Jason: And whale we're talking about that, remember, the show is always live captioned. We've had Amanda with us today from White Coat Captioning, so much. Made possible for Netlify, Fauna, Auth0 and Hasura that makes the show more accessible to more people. You can find the links to the sponsors on the home page. Sarah left?

Cassidy: She said that we are hooligans and hate you/love you, bye, bye. I'll take it.

Jason: All right. I guess we'll have to go find her and kill her in Fortnite instead.

Cassidy: Yes, specifically in Fortnite.

Jason: Yes. Specifically in Fortnite. Okay. So, next week, or I guess later this week, we've got Nikolas Burk, teaching us an OM with data. And we have Jennifer Wadella coming, building forms in Angular. Nathaniel is coming back. It's like the press 1 for options things. We're going to make one to troll people. Which is going to be great. Shundai is coming. And then what's great is Ben in the chat, with Ben Hong, Learn with Ben. Please go and mark your calendar and she up for these. They're going to be super, super fun. Cassidy, is there anywhere that people should go. I'm going to do a quick shoutout to your stream so that people can --

Cassidy: @cassidoo is my handle for everything. As long as you look up Cassidoo, you'll find it.

Jason: Yes! Go follow Cassidoo everywhere. Anything else people should do before we call this one done?

Cassidy: Dance.

Jason: Okay. I think -- I think that's a -- that's a successful ending. I think we stuck that landing. All right, everybody. Thank you so much for hanging out. Let's go find somebody to raid. And we will see you next time!

Cassidy: Bye!