Let's Learn Toast!

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 LENGSTORF: Hello, everybody, and welcome to the weirdest episode of "Learn with Jason" that we have done to date. This is Chris Biscardi's eyeball. Hello.

JASON LENGSTORF: If we post enough boops he may zoom out and become Chris Biscardi. Hello, everyone.

CHRIS BISCARDI: That's so dangerous.

JASON LENGSTORF: So, yeah. Super excited about this. For those of you who aren't familiar, Chris is a frequent guest of the show, one of my favorite people in the world, one of the driving forces behind the party corgi discord and also responsible for why I'm wearing a tank top today. What are we doing

CHRIS BISCARDI: Poking you.

JASON LENGSTORF: Doing pattycake through the good. Somebody clip that. All right. Are we both using Apollo mugs today?

CHRIS BISCARDI: I don't know. Have you asked me about GraphQL today?

JASON LENGSTORF: I have to be careful how I hold it.

CHRIS BISCARDI: I'm a lefty.

JASON LENGSTORF: Curt, I have sent you my address for the check. Thanks for the sub, Ryan. Ryan warner codes in the chat today. I see familiar faces. What's up, everyone?

CHRIS BISCARDI: Changed the name. The let Chris be 24 party.

JASON LENGSTORF: Wait, what?

CHRIS BISCARDI: I think he was trying to type let's go. He messed up.

JASON LENGSTORF: I got very confused. Oh, no, did all of my bot things just break? Okay. It's going to be a miracle if we get through anything today.

CHRIS BISCARDI: We have a lot to get through.

JASON LENGSTORF: Okay. Yes. Let's focus. For those of us who aren't familiar with your work, do you want to give a little bit of background?

CHRIS BISCARDI: Sure. In the context of Toast the most relevant work started I have been a freelancer, consultant for most of my career depending on time period and what I was doing and how much experience I had. I joined a company called Docker and we built an isomorphic react application. I don't know how time works this year. But we did that and that turns out to be a really great platform for generators and metaframeworks and stuff like that. So I put myself into running a production jam stack, whatever. I ended up getting a lot of experience doing that. That's one of my expertises now.

JASON LENGSTORF: Yeah.

CHRIS BISCARDI: I built a generator called Leo before Gatsby had a 1.0. That was a prototype of a static site generator that used graphQL for everything and is why it has graph QL support.

JASON LENGSTORF: Nice.

CHRIS BISCARDI: I've worked on Gatsby itself, all sorts of different things. I'm sitting here today with my next jam stack I suppose.

JASON LENGSTORF: Nice. Yeah. So I guess that's probably worth talking about a little bit. We are going to be working with a new metaframework like bleeding edge new that you have built called Toast.

CHRIS BISCARDI: Yep.

JASON LENGSTORF: I guess the first question that's worth asking here is why build another metaframework?

CHRIS BISCARDI: Why not?

JASON LENGSTORF: All right. I'll take that. That's a valid question.

CHRIS BISCARDI: I'm building so there's a design space for jam stock metaframeworks, right? There's multiple spectrums. The one I'm going to talk about today is there is a spectrum of jam stock metaframeworks and all of them are, like, here or very far over here in that they all use web pack. They're dependent on web pack. You have to deal with the complexities of web pack and even additional systems on top of it like Gatsby themes or even just like the graph QL layer in Gatsby or whatnot, right? So over here is like

JASON LENGSTORF: So far over here. Let me grab it real quick and I'll bring it over here.

CHRIS BISCARDI: There you go. Right over there. I'm that way. It's over here. That way. Really far.

JASON LENGSTORF: This direction.

CHRIS BISCARDI: They're all built on web pack and that gives us complexity and undebugability when building our sites. It's just like we don't necessarily have to do that anymore. I think while we were all diving into web pack which, by the way, was the right decision for every framework that was built in the last five years.

JASON LENGSTORF: Yeah.

CHRIS BISCARDI: There was no other choice really. The other choices were like parcel recently or if you want to do custom stuff, maybe less recently. But web pack has been a solid choice for a long time. I don't think we have to do it anymore because browsers support ESM by default. So I'll take it, move it this way and we'll go over here. No one else is over here now. After I started exploring this do we call it "veet" or "vite"? I would have said "vee tay". Can we is do the silent T? I wish they did a video releasing it because then I would know how to pronounce it. They're building the same things. Snowpack has come out since then. So they're doing a bunch of ESM basically we have a large eco system of tools we're using and not all are written with ESM in mind. We kind of use snowpack to take those and put them in nice little packages and we can use ESM directly in the browser and that's really cool. But snowback doesn't focus on server side stuff so it's not a jam stock metaframework. Just a client side application tool. So we need extra tooling on top of that. That's what Toast is. Vite is specifically for view. I heard it should work with it straightforward but also it's a view tool. It will always have view assumptions inside of it. So that's where we're at.

JASON LENGSTORF: I think this is an exciting space to be in. There's a difference between building something just because you can and building something because the timing is right. I think we are seeing the limitations of the current jam stack metaframework eco system. When you've got something like Gatsby or, you know, when you're working with Jekyll or any of these things you start to see the breakdown when you work at scale with trying to ship things that the build process gets untenable. It starts to push you back toward building server rendered everything. Because it's really not like it doesn't really make sense to be shoving all your content through something like webpack when really all you need is, like, just a little bit of java script on every page. It feels like the tools were right at the time because there was no real alternative but because the eco system is evolving, there is an opportunity here. We can have dynamic apps built from static assets which I think in my opinion, at least, that is currently my starting assumption. Anything that I build I want to be static assets. I don't want to rely on servers, deal with ops or scaleability. I just want to throw my stuff on a CDN and know it will work.

CHRIS BISCARDI: Mm hmm.

JASON LENGSTORF: It sounds like we are approaching the point where that's actually viable. When I say approaching that point I don't mean it's not possible. Clearly you've got stuff running in production on Toast now. But I mean in the sense that the tooling is starting to stabilize to the point where it's no longer bleeding edge.

CHRIS BISCARDI: Right.

JASON LENGSTORF: These aren't bibs. They're tank tops. Corgi tank tops. Do we have a link to these?

CHRIS BISCARDI: The egghead store. You can find it easily.

JASON LENGSTORF: Let me grab it here.

CHRIS BISCARDI: We do need party corgi bibs. I want to do a mask so people can go outside.

JASON LENGSTORF: Ooh, I like that. It would be cool if they looked like corgi mouths and had rainbows on the side.

CHRIS BISCARDI: That will go fantastically with the onesie with the momo.

JASON LENGSTORF: Do you want to quit tech and start a clothing company?

CHRIS BISCARDI: We have to build the site for the clothing company.

JASON LENGSTORF: We'll do that. Tech is a roach motel.

CHRIS BISCARDI: Existing in a tech eco system building party corgi and merch shops.

JASON LENGSTORF: Ultimately, I think this is the ultimate destination. I have been working my whole career to get to the point where I can just run swag stores. You've been building the network.

CHRIS BISCARDI: You're getting good at it.

JASON LENGSTORF: I think you and I are going to run a corgi cosplay store and that's the end of our journey.

CHRIS BISCARDI: That's it. All right. I'm in.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: We're committed now. We just committed to that on screen.

JASON LENGSTORF: We have a lot to cover today good, yeah. Yep. That's my retirement plan. It's not a food truck anymore. It's corgi cosplay.

CHRIS BISCARDI: We could put a kitchen in the back. Your food is great.

JASON LENGSTORF: Game on. Let's do it. I'm going to switch to pairing view so we can see what's going on. First make sure you follow Chris on Twitter. Let's do a quick shoutout to our sponsors. We've got live captioning going on from White Coat Captioning right now. Thank you so much to Kelli who's on the call right now doing the captioning.

CHRIS BISCARDI: Thank you, Kelli, you're wonderful. I'm sorry for what we're about to do. CAPTIONER: That's my job.

JASON LENGSTORF: Sorry for the things we make you transcribe today. I love it. Thank you. And the captioning is made possible through contributions by netlify, Fauna, SANITY and Auth0. Thank you for kicking in to make the show accessible for more people. We appreciate that.

CHRIS BISCARDI: Short side note. Have you seen anybody caption? It looks super hard. I'm super impressed with people who do it.

JASON LENGSTORF: Yeah. They're like the I don't know if everybody does this. But the stenographer keyboards that you play chords instead of keys. It's wild to see. Look it up on YouTube. It's amazing. They're very, very cool. So let's talk Toast. I prefer mine to be a light brown. Like I don't want it to go to

CHRIS BISCARDI: Like a blended drink?

JASON LENGSTORF: Good. Good. Good. Speaking of ridiculous, I saw a minute ago. Prince who I see in the chat, did you have a bot come into the chat a minute ago? Let's talk about Toast while Prince comes up with a response to that. "It was me."

CHRIS BISCARDI: Careful. He's been writing bots lately.

JASON LENGSTORF: I know. I have been watching it. Also as we're getting started there is a lot of party corgi stuff being said here. What's my command for this?

CHRIS BISCARDI: I don't know. Discord?

JASON LENGSTORF: There it is. Oh, discord, not I don't know what's going on. This is the party corgi discord which is a group of people who do content creation, app experimentation. Learning development. They have been doing development forever. They're drawing. There is a D & D group in there now, book clubs. It's a cool space full of super supportive people. Come hang out with us.

CHRIS BISCARDI: Yes, please do. It's amazing.

JASON LENGSTORF: It's one of the places I spend the most time on the internet.

CHRIS BISCARDI: Pretty much this. 24/7.

JASON LENGSTORF: It really is. It's silly, ridiculous, but super fun and super supportive. We've got great moderation. We have a code of conduct. It's a good place to be. So let's talk tech for a minute.

CHRIS BISCARDI: Yeah. Let's do that.

JASON LENGSTORF: So Toast if I'm thinking about what I'm going to be doing when I build a toast site, what should I be thinking about or where should I start?

CHRIS BISCARDI: You're going to start at this site, Christopher Biscardi/new toast site. Clone this, run it and look around and see what's what and if it can work for you and whatnot. This is a wonderful Toast image. There's how to do this here with the clone and the build and stuff.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: There are a couple of things that say, oh, yes, we have first class MDX support. So one of the things I really love about toast Toast is we don't use webpack. Which means MDX becomes really, really, really well supported.

JASON LENGSTORF: Mm.

CHRIS BISCARDI: If you try to do dynamic imports in an MDX file you start running into major problems, right? With Toast, you can build your site with the infrastructure that Toast gives you and then you can go to your MDX file and start pulling things in from unpackage or whatnot and start pulling things in dynamically with the browser, dynamic imports and whatnot. You can do what you want. Build an extra app and pull it in. You can do it with intersection observer and things like this with the MDX provider. All of this combines to be like if you want to build really, really interactive blog posts which is kind of what toast is for at this point. You want to use MDX for that, Toast is the best place because you can include heavyweight dynamically loaded when needed examples and it doesn't bloat the rest of the site.

JASON LENGSTORF: Ooh, yeah. That's the dream, right? When we're building these MDX sites the promises that you can pull in components to make your post more dynamic, but if you have a lot of dynamic posts and you have to load every single component used anywhere on your site just to load a single MDX post, that doesn't feel good. That feels messy, right? So being in a position where we can do these very ambitious things with our posts and know we're not taking a huge performance hit for having done it, that to me is a really good thing. That's a big promise, right?

CHRIS BISCARDI: Yeah. Like I said, this is the result of not using webpack.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: I have built the integrations or been involved with the integrations for MDX for a bunch of metaframeworks and they're great in various ways. Like Gatsby integrates with its graph QL layer. Nex has ones that let you do local or remote stuff. But the fact is that if you want to use a component in an MDX file, one of those systems, you have to run it through webpack which means you have to do like this weird pull out the scope, throw it through webpack and pull it back in when the application runs.

JASON LENGSTORF: Right.

CHRIS BISCARDI: From an infrastructure perspective, it's a super pain. From a debugging user end perspective it's also a pain because if something goes wrong you don't know why. You get an error about some random scope directly or something like that.

JASON LENGSTORF: Yeah. I think this is highlighting why it makes sense to build Toast now. Like webpack was the best tool for the job at the time it came into popularity. The same as J query was the best tool for the job when J query normalized JavaScript in the browser. But over time the browser caught up. The browser was able to implement the best features of J query and it became more complicated to do something with J query than just to use document.query selector or use fetch instead of J query.Ajax.

CHRIS BISCARDI: Or react. Something like that.

JASON LENGSTORF: Yeah. So what I think we're seeing is the fact we don't want to use webpack anymore isn't because it's bad. Webpack was so good the browser implemented the good parts.

CHRIS BISCARDI: Which is the same story for IE 6 and other situations.

JASON LENGSTORF: Yeah. It really is. But what I love about it is especially with the new adoption like the ES standards evolving every year, we're seeing more of a collaboration where the community says we want this feature and then based on the usage, the popularity, the adoption then the browsers are able to quickly implement those features which mean they disappear as something you need a Babel preset for or you need webpack to compile. What we are seeing with dynamic imports and ES modules being supported natively in the browser, the browsers have caught up enough to webpack we can feasibly build complex applications in a way that's actually easier than webpack.

CHRIS BISCARDI: Yep.

JASON LENGSTORF: Basically because the browser has adopted all the best parts. So it's just worth calling it out. What I think we want to avoid is any indication oh, stampede. Here we go. We want to avoid any indication that webpack is a bad tool that you shouldn't use. It's actually exactly the opposite. Webpack is so good that the best parts have been integrated into the browser.

CHRIS BISCARDI: Do you have a crab costume and a cowboy hat?

JASON LENGSTORF: No? Should I?

CHRIS BISCARDI: Chad is asking for it. It has to happen at some point.

JASON LENGSTORF: But why? What is

CHRIS BISCARDI: Yee claw, Jason.

JASON LENGSTORF: Oh, yee claw.

CHRIS BISCARDI: There's a lot of people in the party discord learning rust now and we're into ferrets and crabs.

JASON LENGSTORF: Okay, okay. I haven't learned rust yet. I'm intentionally not learning it because prince is going to come on the show and teach me rust and I want to ask the beginner questions.

CHRIS BISCARDI: I'm excited.

JASON LENGSTORF: I want to start building something.

CHRIS BISCARDI: Okay.

JASON LENGSTORF: I want to port over Jason.af or at least part of it. I think this would be a fun one to bring over. It's also simultaneously simple and very complicated.

( Popping )

CHRIS BISCARDI: That one? I thought it was this one.

JASON LENGSTORF: I still can't do it.

CHRIS BISCARDI: Can you twirl a pen? Do you have those skills?

JASON LENGSTORF: I don't think so. I kind of learned this. Let's see if I can do it. No. Not very well. Like in slow motion I can twirl a pen. Okay. So right now the Jason.af site is built on Gatsby because I wanted a statically generated react powered site because I'm doing things here and it's easier in react. I started in plain JavaScript and didn't want to keep doing that. It was just hard enough that I was like this is going to keep me from actually building stuff on this site. But I'm really excited to push ahead and turn this into a full blown Toast site. That will give me both things I want. I want the flexibility of being able to build this thing and react. I also don't want to ship a ton of code to the browser and it sounds like Toast will help me drop a lot of bundle size.

CHRIS BISCARDI: Mm hmm.

JASON LENGSTORF: All right. Let's do this. What should I do?

CHRIS BISCARDI: You're going to need to clone Jason.af into a new repo or something locally. We're going to be working with it.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: I forgot we were in a different call and I was like why is his voice so delayed.

JASON LENGSTORF: Wait. Are you listening to the twitch stream?

CHRIS BISCARDI: I have it muted but I'm watching it. I hear the words and then the actions come. Like we're reacting in slow mo.

JASON LENGSTORF: I was on a call I did a stream with Jesse from graph CMS. He wasn't able to screen share, so the only thing I could do was watch the twitch stream with a four second delay. As he was coding he was like, is that right? I was like, please hold.

CHRIS BISCARDI: You know what? I had to play Fortnite with Ryan like that.

JASON LENGSTORF: Ooh.

CHRIS BISCARDI: We were playing competitive. I forget what happened, but something died on my end. I had to watch his stream to listen to the audio and play.

JASON LENGSTORF: Wow. That sounds brutal. Hey, thank you for the subscription. I saw Will Johnson, black tech diva. Remember to span those boops.

CHRIS BISCARDI: Someone has a question about Toast. Do you see Toast as an alternative to the other asset solutions that webpack does? We'll see what this is as we go through here. Jason.af is a perfect site. It has all the things that you don't want to rewrite when you go to Toast. You just want to horde out and decide what to do with it later. You don't want to have to rewrite everything. Laurie says, what did I miss?

JASON LENGSTORF: You missed everything.

CHRIS BISCARDI: So you have to install ad sector, bread box.

JASON LENGSTORF: MPM install @sector/toast,@sector/breadbox.

CHRIS BISCARDI: And toast is its own package.

JASON LENGSTORF: Got it. Anything else? Preact, right?

CHRIS BISCARDI: No. Not yet.

JASON LENGSTORF: Okay. Was this it?

CHRIS BISCARDI: Yeah. I'm looking around the boops.

JASON LENGSTORF: I'll pull this up a little bit.

CHRIS BISCARDI: Live view. Yes, install that. So there's two things that need to happen for our Toast site now. One is that we need to take the third party dependencies and stuff like that and convert them into, like, a thing that's useable in the browser for ES module files kind of thing.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: Like there's a situation right now where because we came up through node and common JS was the big thing and it won over AMD and ES modules wasn't there yet. All of our infrastructure is typically built on common J. Right?

JASON LENGSTORF: Okay.

CHRIS BISCARDI: So Toast wraps snowpack and uses it to do this third party or like if you think of like the main Toast app as not being bundled or unbundled or whatever you want to call that, which it has a fairly strong opinion about, we still need to bundle the MPM packages because if you import load ash you get hundreds of packages.

JASON LENGSTORF: Right. That's not great. Thank you for the sub, audio Lindy. I installed nonsense here. I have react and preact installed here for reasons beyond my comprehension.

CHRIS BISCARDI: You do. You can't avoid it with Gatsby.

JASON LENGSTORF: I don't know what I did. I think at one point I was trying to use this plug in and it either did work and I forgot to clean it up or it did and I went back.

CHRIS BISCARDI: I think it's in the Gatsby config. I think you're actually using this.

JASON LENGSTORF: I'm doing it. Ah ha. So that's actually a good thing. That means we know the site will work with preact when we move over.

CHRIS BISCARDI: Yes. That's awesome. Also this is one of those things where you can't avoid, like, installing react and stuff if you're using Gatsby.

JASON LENGSTORF: Right.

CHRIS BISCARDI: The entire eco system is based around it kind of thing.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: So we now have to run breadbox. If we do yarn

JASON LENGSTORF: I think I need to do.

CHRIS BISCARDI: What's the MPM equivalent of running binaries?

JASON LENGSTORF: NPM what is it?

CHRIS BISCARDI: I don't know.

JASON LENGSTORF: I'm just going to add a thing. I can't remember what it is.

CHRIS BISCARDI: We're trying to run a local binary, y'all. It's not NPX.

JASON LENGSTORF: We'll say breadbox, right?

CHRIS BISCARDI: NPX uses local binaries if they're installed. That's scary. What if they're not?

JASON LENGSTORF: It pulls them from NPM. That's wild that it does that.

CHRIS BISCARDI: So we have to run breadbox. I don't want the thing I used to randomly decide to install the internet if it's not around.

JASON LENGSTORF: Just all of the internet.

CHRIS BISCARDI: Okay. So get rid of your cache dir and any build artifacts.

JASON LENGSTORF: Got it. Public. Oh, I didn't install anything. Only Toast and breadbox. So there weren't any other dependencies.

CHRIS BISCARDI: We have to get rid of Gatsby in a second here. This is like the first step of hording a site from Gatsby to toast. We have to remove Gatsby at some point and that's what we are working through at the moment.

JASON LENGSTORF: Got it. It doesn't like Gatsby.

CHRIS BISCARDI: Yes, I know. That's unintentional but also hilarious.

JASON LENGSTORF: Yeah. It's choking on something in Gatsby browser.

CHRIS BISCARDI: Take Gatsby out of it. Gatsby is not built for ESM.

JASON LENGSTORF: Should I dump all the Gatsby stuff?

CHRIS BISCARDI: You import some of it in some of your components.

JASON LENGSTORF: Got it.

CHRIS BISCARDI: Just dump Gatsby.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: We can probably get rid of Gatsby plug in preact.

JASON LENGSTORF: We'll clean it up as we get further and further. We'll start dropping out the things we aren't using. The intention ultimately is to get rid of as many things as possible so we're not bundling a bunch of stuff.

CHRIS BISCARDI: Yeah. Like there's a difference between porting a site and building a site green field. Building a site green field you can start like, oh, yes, I want this file and that file. That's what's going to build my page. Then there's porting a site which is still going to be in your oh, yes. Cannot resolve Gatsby package. This is the error we want to see. This is because you're importing Gatsby in your component. Snowpack is scanning it, finding that and being like, yes, we must need Gatsby. Let's compile.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: So I believe the locations you'll find this are in source pages, and you can do Gatsby or whatever your preferred method of searching for Gatsby imports is.

JASON LENGSTORF: I have a search thingy, where is it? Activity bar.

CHRIS BISCARDI: So much more room for activities.

JASON LENGSTORF: I have this one.

CHRIS BISCARDI: You didn't get it.

JASON LENGSTORF: I didn't get what?

CHRIS BISCARDI: You have so much more room for activities. You opened the activity bar.

JASON LENGSTORF: Oh, oh. With this, I can just make it into a regular link. We can deal with any other stuff that happens later. Then I can drop this.

CHRIS BISCARDI: Hello amber Lee. Good to see you.

JASON LENGSTORF: Hey, Amber Lee.

CHRIS BISCARDI: The matching tees are amazing.

JASON LENGSTORF: I never wear this. Marissa won't be seen in public with me while I'm wearing a tank top.

CHRIS BISCARDI: Guess what. We're required not to go into public.

JASON LENGSTORF: Gotcha.

CHRIS BISCARDI: Hey, Laurie, we mentioned you when you came in. You didn't hear us. You asked what you missed. It was still on an ad.

JASON LENGSTORF: Okay. I dropped out all the references to Gatsby, I think. Let's try it again. Oh, sir.

CHRIS BISCARDI: That looks better.

JASON LENGSTORF: Cannot resolve entry model. This is my nonsense.

CHRIS BISCARDI: Yep.

JASON LENGSTORF: Great. I built that.

CHRIS BISCARDI: Guess what we're going to do.

JASON LENGSTORF: Go patch it?

CHRIS BISCARDI: We're going to install a patch package.

JASON LENGSTORF: Oh, okay.

CHRIS BISCARDI: What we're going to do today is just fix everything here.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: Ideally we would fix it in your package like on GitHub or whatnot. We don't need to go and publish a bunch of shit.

JASON LENGSTORF: I'm feeling a little vulnerable that it's my code that's breaking this.

CHRIS BISCARDI: This is actually a really common thing.

JASON LENGSTORF: Garbage code.

CHRIS BISCARDI: It's not like your code isn't garbage. You have just built to the assumptions for the environment you used it in. This is the problem with a lot of NPM packages. They're built with the assumption you're going to webpack, right?

JASON LENGSTORF: Yes.

CHRIS BISCARDI: Things like amplify are an extreme version of this. They have a hundred sub packages and expect you to run it through webpack, have a build step and do all that stuff. You can't just run it through the browser. They need you to use webing pa. Most packages there is a couple of fixes you can do and they just work. Tools like micro bundle and whatnot make it nice for package maintainers. But you have a build step in this that's supposed to build ES.

JASON LENGSTORF: I probably copy/pasted something like, whatever. Side note, I now really want a guided meditation from you where it just plays calming music in the background and you say, your code isn't garbage. Just over and over again.

CHRIS BISCARDI: Okay. How long?

JASON LENGSTORF: A super cut. I want a ten hour super cut.

CHRIS BISCARDI: Ten hour super cut. If I'm going to make you a ten hour super cut, you have to listen to it.

JASON LENGSTORF: Just all day long. Just reassurance. (Soothingly) Your code is not garbage.

CHRIS BISCARDI: Your code is not garbage. You write good code.

JASON LENGSTORF: Your code has value. Your code matters.

CHRIS BISCARDI: You have value. You matter.

JASON LENGSTORF: I love it. Okay. So I have installed packed package and I have never used it before. What does this do?

CHRIS BISCARDI: Patch package is a package that you don't often use, right? Actually it's not critical that we use it. In this case because we're on screen trying to get stuff done we'll use it. Your going to install through NPM. Maybe it has a bug or a thing you need to fix. In this case, we've got your react tweet embed if I remember the package name correctly. We have to add a file to it basically. If we look in node modules

JASON LENGSTORF: Here we go.

CHRIS BISCARDI: This is suspense, this dramatic pausing.

JASON LENGSTORF: That was me trying to read the chat and processing what you said and catching up. So I'm in the node modules in react tweet embed.

CHRIS BISCARDI: Go to package Json.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: This is weird. I can't see it on screen until you do it two seconds later. Go to scripts.

JASON LENGSTORF: Scripts.

CHRIS BISCARDI: And then main somewhere. You have this compiled yes thing that does Babel stuff. If we go to main, main is this index.JS, but we're using module, not main. Snowpack uses ES which is a roll up module first bundler.

JASON LENGSTORF: And ES module didn't bundle.

CHRIS BISCARDI: You didn't build and ship it. So we're going to manually copy the file and source index. If we look at the file and source index we will see it's basically already ESM.

JASON LENGSTORF: Yes.

CHRIS BISCARDI: Right. We don't actually need to do anything to this. There is one thing we need to do. But we'll get to that in a second. Copy this file into an ES folder as index.JS so it gets picked up by the module field in your package json.

JASON LENGSTORF: So I have done this locally.

CHRIS BISCARDI: Yeah.

JASON LENGSTORF: I'm into it. But so patch package, are we just going to tell it to do this for us?

CHRIS BISCARDI: Yeah. We have made a change in node modules and we need the change to happen every time we install everything, right? We're going to run patch package. We forgot how to run npm stuff.

JASON LENGSTORF: I know I can do it this way. Patch package.

CHRIS BISCARDI: This feels wrong.

JASON LENGSTORF: It works.

CHRIS BISCARDI: Then we have to put the module name after it. So what this is doing is going to be @Jlengstorf/react tweet embed. So this patch file will have what we did versus what gets installed. So if you LS or look in patches or whatever.

JASON LENGSTORF: Wow.

CHRIS BISCARDI: You now have a patch file. It will apply this patch file to that whenever you install. We don't need to publish your package. If we ship it to netlify later, it will just build.

JASON LENGSTORF: It'll just work.

CHRIS BISCARDI: We have to add a script but that's not important for our purposes now.

JASON LENGSTORF: That's wild though. It's super cool that it works.

CHRIS BISCARDI: Basically get stash get pop, right?

JASON LENGSTORF: Effectively to use this I'm going to just add post install and then as part of the post install I'm going to run patch package.

CHRIS BISCARDI: That's it. Well, so the module specific version of this is like just

JASON LENGSTORF: Oh, this. It will just go find this patches folder and apply whatever patches are in there.

CHRIS BISCARDI: Right. We're not going to use the script now. We want to understand what we're doing.

JASON LENGSTORF: That's super cool, yeah.

CHRIS BISCARDI: So we don't run into extra errors. Get rid of that script so it doesn't like because we're going to install a couple of things.

JASON LENGSTORF: Yeah.

CHRIS BISCARDI: We don't want it to do whatever.

JASON LENGSTORF: I'll make sure it doesn't run by this is a little hacky thing I learned. You said there was one more thing to fix?

CHRIS BISCARDI: There is. You can run breadbox. We'll see the error and fix it.

JASON LENGSTORF: Got it. Breadbox. It says unexpected token, line 44.

CHRIS BISCARDI: Mm hmm. Okay.

JASON LENGSTORF: Let's look at line 44.

CHRIS BISCARDI: Mm hmm.

JASON LENGSTORF: It doesn't like my JSX, correct?

CHRIS BISCARDI: That's correct. So JSX is not ESM standard. You can't run JSX in the browser. So we're going to here do react.createelement.

JASON LENGSTORF: It's been a while since I have done this. So div and then ref is just like this?

CHRIS BISCARDI: An object, yeah.

JASON LENGSTORF: Is that correct? I haven't done this in a really long time.

CHRIS BISCARDI: I'm waiting for you to finish on screen. Yes, it looks correct.

JASON LENGSTORF: I'm sharing the Zoom call with you. You can see this.

CHRIS BISCARDI: Are you? That would have been a good thing for me to know.

JASON LENGSTORF: I thought you knew.

CHRIS BISCARDI: To pay attention to. You know, sometimes you know things and it's like, oh. Okay, cool. I'm looking at the Zoom call now. That's great.

JASON LENGSTORF: Hey, look. I did the thing.

CHRIS BISCARDI: Yes. So that was really the only thing we needed to change to get breadbox to work for the first time. Right?

JASON LENGSTORF: Wow, okay.

CHRIS BISCARDI: We've still got a problem with this. But take a look at this output, right? You don't see this output normally. You don't see how big your stuff is and what you're putting on the site usually or by default, right?

JASON LENGSTORF: Yeah.

CHRIS BISCARDI: You can see here that matter js is gigantic.

JASON LENGSTORF: Enormous.

CHRIS BISCARDI: React helmet also big but does brotli down to 8kb. You can say, I have a large whatever.

JASON LENGSTORF: What have I done?

CHRIS BISCARDI: Look at Gatsby image. How big do you think it is?

JASON LENGSTORF: I didn't realize Gatsby image had a lot of code in it.

CHRIS BISCARDI: Just didn't know. There's nothing that told you ever. So we have a bit of a problem here in that if you look at the common directory, you can look at the common helper if you want to. And like actually show it on screen so we can tell the people.

JASON LENGSTORF: Yeah.

CHRIS BISCARDI: Show the people.

JASON LENGSTORF: Here's our web module, common helpers.

CHRIS BISCARDI: So look at this. This is like rapper code, right? This is just common JS to ESM like rapper code basically.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: This got pulled out because of a bunch of different stuff. Specifically I believe it's in react. Because react is still being processed.

JASON LENGSTORF: It is.

CHRIS BISCARDI: So what we're going to do is alias react to preact.

JASON LENGSTORF: Hey oh.

CHRIS BISCARDI: Go to package json for the package.

JASON LENGSTORF: I'm here.

CHRIS BISCARDI: Find a free key space. You have the bugs url? You're special.

JASON LENGSTORF: I copy/pasted this from somewhere. I actually think it's 100% still pointing to I have to get rid of that. That's all incorrect. All of that is wrong.

CHRIS BISCARDI: Hello world there? I didn't look at the values. Only the keys and thought you were wonderful. So we're going to have a snowpack key here because Toast uses snowpack under the hood for this.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: This will be an object with install options. Camel case. Inside of that will be alias.

JASON LENGSTORF: Object again?

CHRIS BISCARDI: There is a lot of config you can do. We're doing aliases. This will be another object.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: We're going to alias react which is the key name to preact/compat.

JASON LENGSTORF: Ooh. Okay.

CHRIS BISCARDI: What this will do is snowpack touches everything. Let's run breadbox and take a look at the output.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: So let's go into our hmm, did you save the package?

JASON LENGSTORF: I thought I did. Let me save again. Do you want me to dump it and rerun?

CHRIS BISCARDI: Hmm, it might just work. Well, common js helpers is still there. That's fine. Take a look at one of your components. Like, okay. Actually there was two index whatever files here.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: Common. Now one of them is gone.

JASON LENGSTORF: Look at this though. React

CHRIS BISCARDI: This is what happened. If you look at tweet embed it imports from preact compat. Using snowpack we can import our alias whenever we want. In this case we're sort of getting rid of react and Gatsby.

JASON LENGSTORF: Yeah. Cool. Very cool.

CHRIS BISCARDI: That's super exciting.

JASON LENGSTORF: Super exciting.

CHRIS BISCARDI: If we can be like, oh, yes, we want a lighter weight version of react, done.

JASON LENGSTORF: In five lines of code here.

CHRIS BISCARDI: Yeah.

JASON LENGSTORF: That's pretty slick.

CHRIS BISCARDI: So we've got everything breadboxed, I believe, right?

JASON LENGSTORF: Yes.

CHRIS BISCARDI: Let's run Toast. We have the third party dependencies handled. I keep saying yarn. You don't have yarn. Run Toast incremental which is the build command.

JASON LENGSTORF: Okay. Missing something. Cannot find module globby. Globby, no.

CHRIS BISCARDI: Do we have Toast installed?

JASON LENGSTORF: I might have uninstalled something. Let me do this. I have had this happen a couple of times. I'm going to change this out. We'll make the build command into Toast incremental. Something is up with my node modules. When I uninstall things sometimes it takes other things with it that it wasn't supposed to. I have to delete and reinstall.

CHRIS BISCARDI: That never happens to me.

JASON LENGSTORF: As a result of this show, I have 15 versions of node and three versions of NPM running.

CHRIS BISCARDI: Nonstandard set ups.

JASON LENGSTORF: A lot of chaos going on here. So NPM run build which will be toast incremental. Still missing globby.

CHRIS BISCARDI: Ben is saying this is actually a thing. I don't know why that's a thing. It wasn't for me when I was using yarn. Npm does different module resolution apparently.

JASON LENGSTORF: Interesting. I'll install globby so it doesn't continue to yell at us. And then we'll run the build again. Stop it. Could not find module toast?

CHRIS BISCARDI: Are you using NPM or something?

JASON LENGSTORF: Do I have to add a .js file like a config?

CHRIS BISCARDI: No. That's required and tested and in a tri catch and that error should not show up. I don't know

JASON LENGSTORF: Is it possible is this the latest version of Toast?

CHRIS BISCARDI: It is. I should try this with NPM later.

JASON LENGSTORF: Do you want me to use yarn instead?

CHRIS BISCARDI: What node version are you on now.

JASON LENGSTORF: Great question. Let's find out. 12. Want me to use a different one?

CHRIS BISCARDI: I was using 11 when I went through it, but I don't think it matters. Like specifically that code is wrapped in a tri catch inside Toast and the error is not rethrown because it is expected you don't need a toast.js file. So I have no idea what the complications with the node modules that are happening right now is. But it should not

JASON LENGSTORF: Let's see. Let's just try this instead.

CHRIS BISCARDI: Somebody says try removing the package lock in chat.

JASON LENGSTORF: I did and I just switched to yarn. It still wants a Toast.js so I'm going to create one. Do I just need to export

CHRIS BISCARDI: I don't think you need to export anything.

JASON LENGSTORF: Just have it exist?

CHRIS BISCARDI: Yeah. It will do a second check for the lifecycles and if they're defined. Okay. This is an actual Toast problem. This is a regular thing. When we did breadbox we put breadbox in a random folder, right? Toast uses the public folder for all of the output. So we need to add a dash, dash death option to the breadbox command.

JASON LENGSTORF: Okay. It was up here. Like that?

CHRIS BISCARDI: I believe it's public/web modules, underscore.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: Because that's the kind of standard folder.

JASON LENGSTORF: Oops, breadbox.

CHRIS BISCARDI: In the future, breadbox will be integrated with Toast and you won't have to run it separately.

JASON LENGSTORF: Now what are you yelling at? You knock it off. Oh, I need to do my

CHRIS BISCARDI: Yarn patch or NPM run patch packet or whatever. You don't have yarn in this project but don't use it.

JASON LENGSTORF: I already switched over to yarn.

CHRIS BISCARDI: Oh, did you?

JASON LENGSTORF: Yeah. I figured it would be easier.

CHRIS BISCARDI: I have no idea what the NPM node module's problem that you were having is.

JASON LENGSTORF: Who knows? So it doesn't like still doesn't like that es.

CHRIS BISCARDI: Check for the file. See if it's there.

JASON LENGSTORF: Oh, do you know what we did? We made the patch and we didn't run patch package again.

CHRIS BISCARDI: So it has the token error. Yeah.

JASON LENGSTORF: Let's fix that again real quick.

CHRIS BISCARDI: Yes.

JASON LENGSTORF: And then I will actually run patch package again. So yarn, patch package

CHRIS BISCARDI: Yeah, Linda, we are definitely going through the debugging flow intentionally. I could have told him what to do intentionally, but you know it's useful for people to see the errors. That's kind of what we're doing here.

JASON LENGSTORF: How would I learn if we didn't break it, right? So let's run yarn breadbox again.

CHRIS BISCARDI: I agree. Break everything in production preferably.

JASON LENGSTORF: On Friday. Wabam! Look at it go.

CHRIS BISCARDI: Now it should be in public web modules.

JASON LENGSTORF: It should be. Let's take a look. Here's public. Here's web modules. Hey oh. Now I can run Toast. Unexpected token export.

CHRIS BISCARDI: Yes. But we are running Toast now. Toast is working. The unexpected token export, we could run debug here if you wanted to look at the full output. I happen to already know where this is. If we run debug equals star

JASON LENGSTORF: Do I need to do that.

CHRIS BISCARDI: Oh. Toast uses

JASON LENGSTORF: Whoo! Look at it go.

CHRIS BISCARDI: Like Babel, et cetera, do. You can get rid of the Babel output if you do minus Babel star. Honeycomb is in here. In Toast you can send traces or your entire build for the network requests, page builds to Honeycomb and introspect it later. Why is this slow? Oh, the one request is slow. Here we have a problem with the Gatsby request transformer.

JASON LENGSTORF: Man, it's all my code today. Geez. Okay. What do we need to do here?

CHRIS BISCARDI: We need to go into that file and we need to is toast only about playing with node modules? No. We are running into common issues with publishing your own packages especially if you're not used to publishing industrial strength packages, right? If you don't have a package that has a million downloads you won't run into most of the problems we're running into now.

JASON LENGSTORF: Mm hmm. I think something will happen. As this matures we'll start to notice patterns and most likely there will be a way to smooth this so for the vast majority of new projects and, remember, this is a migration. We're taking a site that was all the way built in Gatsby and react and we are porting it to Toast. So this is expected to break. Vinny. It's all Jason's code. Are we sure we want to keep learning with me? I bring guests on to teach me.

CHRIS BISCARDI: I'm the expert today?

JASON LENGSTORF: You're the adult here.

CHRIS BISCARDI: Whoa. That's a little bit much.

JASON LENGSTORF: Here's the file that's broken.

CHRIS BISCARDI: Yes. Do you know why?

JASON LENGSTORF: Do you want this to be common JS?

CHRIS BISCARDI: Common JS. The error we were running into is we have syntax here that's exports from whatever. This is really not valid node code, right? I mean, it is these days if you're using the V 14s and whatnot. For most people this is not like runable node code.

JASON LENGSTORF: Oh, yeah. I'm confused as to how I did this. I'll have to look at it later and see what I did. That should work.

CHRIS BISCARDI: Let's find out.

JASON LENGSTORF: So I should yarn patch package Gatsby transformer cloudinary.

CHRIS BISCARDI: Mm hmm. See, you already know how to use patch package. Next time you run into something and I look at your repos, Jason, 25 patch packages.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: Repo is five versions old on everything and you patched everything?

JASON LENGSTORF: Okay, so now

CHRIS BISCARDI: Great. We got through.

JASON LENGSTORF: We're missing CSS modules.

CHRIS BISCARDI: Right.

JASON LENGSTORF: Which CSS modules, that's a whole webpack thing.

CHRIS BISCARDI: Well, no.

JASON LENGSTORF: Well, it's sorry. I'm going to stop talking.

CHRIS BISCARDI: No, that's good, right? People think CSS modules are just a webpack thing and that's because the CSS loader used in webpack has a modules thing that you can turn on basically by default.

JASON LENGSTORF: Oh.

CHRIS BISCARDI: And a lot of people do. But CSS modules is a completely separate project. We can basically use post CSS here. As opposed to a system like Gatsby where everything is a Gatsby plug in and you have to install the Gatsby version of anything you want to use or it doesn't work. We can use post CSS.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: So we're going to use post CSS.

JASON LENGSTORF: Let's do it.

CHRIS BISCARDI: In this case we're going to add Babel transform post CSS and post CSS module.

JASON LENGSTORF: Babel plug in, post CSS

CHRIS BISCARDI: Transform post CSS.

JASON LENGSTORF: And the last one was what?

CHRIS BISCARDI: Post CSS modules.

JASON LENGSTORF: That looks correct?

CHRIS BISCARDI: It does, yes.

JASON LENGSTORF: Okay. All right. So that's installed. And then down in here we should see it all, post CSS, yep. Here's our Babel. I assume I can just do this here, right?

CHRIS BISCARDI: No. We're not going to run the script yet. We'll need post CSI later to do this. We are basically going to put this into the Babel config. To do this, we're actually going to patch a package on Toast.

JASON LENGSTORF: Patch package on Toast, ooh. All right. Now we're getting weird.

CHRIS BISCARDI: There's two things here. One is that we have to add the Babel plug in. I didn't give you an API to do that. So we have to go to Toast. There is a transforms file here.

JASON LENGSTORF: Oh, okay. Here. Do you see how I just immediately knew where that was? That was 100% a guess.

CHRIS BISCARDI: Educated guess. So we have to add in the config here. I'm going to put the config into a gif, I think, and send it to you.

JASON LENGSTORF: Yeah. Drop it in the twitch chat. That's the only chat I have open now.

CHRIS BISCARDI: Ooh. The only chat. He's only paying attention to you.

JASON LENGSTORF: I only have eyes for you, chat. John is asking could next/Gatsby migrate away from webpack and maintain the same structure?

CHRIS BISCARDI: No. I don't think so. The problem is their eco systems rely so heavily on webpack and webpack loaders and plug ins that everybody who uses them is using a custom webpack plug in or Babel loader or something like that. Migrating from that is a hard technical problem and doesn't necessarily solve the problems that the metaframeworks want to solve, right? They want to solve the large scale, like they are both VC funded, if we're going to talk about it honestly. They need to return NX multiples on the investment. They can't focus on small blogs, the things that Toast, right? They have to focus on big enterprise customers. And they are going to use webpack for a long time. It's not something you can flip a switch like, now we don't use webpack. It has to be rethought from the ground up which is why I built a separate thing and didn't build CRs for all these metaframeworks.

JASON LENGSTORF: Cool. So I'm in the Babel config now and collapsing things so we can see what's going on.

CHRIS BISCARDI: Cool.

JASON LENGSTORF: So we've got plug ins. Am I going to drop the plug in here?

CHRIS BISCARDI: I'm dropping this config in for you in the chat. We have to add this plugin in a config. We have to put it in both places. And your CSS files are named.modules.CSS.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: We can go into something later. What's that?

JASON LENGSTORF: Hold on. I do it like this?

CHRIS BISCARDI: Yeah.

JASON LENGSTORF: Okay. I think they're .module, singular.

CHRIS BISCARDI: Are they?

JASON LENGSTORF: Yeah.

CHRIS BISCARDI: You're right.

JASON LENGSTORF: Patch package on Toast.

CHRIS BISCARDI: You have to put it in both transforms, by the way.

JASON LENGSTORF: Where's the other one?

CHRIS BISCARDI: One goes into node and one goes into the browser. They're in the same file.

JASON LENGSTORF: Got it.

CHRIS BISCARDI: Scroll down.

JASON LENGSTORF: I don't know why that just reminded me do you remember like maybe ten ish years ago, maybe 20 years ago. There was bush's baked beans and they had an ad campaign where the spokesman could hear his dog talk. And every commercial he would say, "roll that beautiful bean footage." Do you remember that?

CHRIS BISCARDI: I do. When you said scroll down I thought, roll that beautiful bean footage.

JASON LENGSTORF: Beans on Toast.

CHRIS BISCARDI: That works actually.

JASON LENGSTORF: It does, yeah. I have had that. Where did I have that?

CHRIS BISCARDI: Probably London.

JASON LENGSTORF: Maybe. Beans on toast?

CHRIS BISCARDI: Feels like a UK thing.

JASON LENGSTORF: Please no. I have patched Toast so I'll run another build. Nooo.

CHRIS BISCARDI: This is actually a Toast bug. This is a legit I need to fix this bug in Toast situation. Which is fun. We get to build into the Toast code a little bit.

JASON LENGSTORF: Wow, Laurie cutting to the bone in the chat. No one was alive 20 years ago.

CHRIS BISCARDI: Wow.

JASON LENGSTORF: Laurie, that's just hurtful to those of us who are growing long in the tooth out here.

CHRIS BISCARDI: To be fair, me and Laurie were both alive then. I know that. I see you, Laurie.

JASON LENGSTORF: Shots fired. I am uncomfortable with the energy we have created in this studio today. Oh Amberley.

CHRIS BISCARDI: I see you. Don't think I don't.

JASON LENGSTORF: Hold on. Come back. We're just doing a

CHRIS BISCARDI: We're staring at Laurie apparently.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: Let's get on with it.

JASON LENGSTORF: Before we run out of time.

CHRIS BISCARDI: Why did they run out of time? They stared at the camera for half an hour.

JASON LENGSTORF: Uncomfortable stares. Okay. I want to point out here this is the first time it's not my code.

CHRIS BISCARDI: It's my code.

JASON LENGSTORF: I'm ready. Am I going back into Toast here?

CHRIS BISCARDI: Yeah. We'll look at the incremental command in Toast.

JASON LENGSTORF: Here we go.

CHRIS BISCARDI: If you want to read the error message first and debug that we can. I already know what the problem is. So I can just tell you.

JASON LENGSTORF: So the path argument must be of type string. That leads me to believe that whatever we just did with the modules or maybe not actually. But for whatever reason is not returning an actual string. I don't know a ton about what's going on under the hood. So it seems to me there is a decent possibility path argument must be of type string. Where does it happen here? There's not a bug trace.

CHRIS BISCARDI: We would have to run debug to get the full trace here. I'll tell you where it is. It's not in Toast.

JASON LENGSTORF: It's not in Toast?

CHRIS BISCARDI: It's in the Babel plugin we just installed. It expects the file name of the file that is importing the CSS.

JASON LENGSTORF: Got it. We're not providing that.

CHRIS BISCARDI: And Toast is not providing that.

JASON LENGSTORF: Okay. How do we patch that?

CHRIS BISCARDI: So we have these transform component functions. If you want to go into the transforms first because that's probably the better place to do it.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: Babel has a config option called file name. So in transform component for node and transform component for browser, we're going to add a second argument that's file name. Then we are going to put it in the file for transforming. So above Babel you can just write file name.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: This is interesting because from an infrastructure builder perspective there are plugins people build in the world that rely on APIs that we are not quite done with Toast yet.

JASON LENGSTORF: I just wanted to touch that.

CHRIS BISCARDI: There are things you build as an infrastructure provider or an infrastructure library writer and there are things people write in user land. The things people write in user land end up depending on every possible functionality of the thing that exists, right? So Babel in itself has a ton of API, right? There's a bunch of things that happen inside of Babel and Babel has so many users at this point and so many user generated plugins that are written that almost every piece of functionality that exists in Babel has to be treated as a feature, right? This is like a similar way to the Linux kernel to be like this is a bigger project that does a similar thing. There are, quote/unquote no bugs in the Linux kernel or no bugs in userland code if they are interacting with the Linux kernel. The Linux kernel has to support things forever. That's not entirely true, but it is very, very, very true. This is kind of the same thing. Because we're using Babel and people use Babel in specific ways we have to provide this information to Babel such that it can pass through even when that plugin probably doesn't need to use this.

JASON LENGSTORF: Sure, yeah. So now we told it that it's going to get the file name and we have to patch it in now.

CHRIS BISCARDI: Right. In incremental there are a couple of places we need to

JASON LENGSTORF: We have transform component for node.

CHRIS BISCARDI: Mm hmm.

JASON LENGSTORF: And the file name is going to be

CHRIS BISCARDI: There is one on line 68 and one on 80. The one on 68 will take full file path which is defined two lines above it.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: And the one on line 80 is going to do the same thing.

JASON LENGSTORF: The exact same

CHRIS BISCARDI: Yeah. This is basically like we are taking all of your source files and transforming them to either run in node so we can render HTML or they run in the browser.

JASON LENGSTORF: Got it. Now I should save the patch?

CHRIS BISCARDI: I think those are the only two, yes.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: So that's the PR if you want to make one later.

JASON LENGSTORF: Got it. I will do it. I'm going to be a contributor. No post CSS config found. That means things are working. It's getting to the point where it recognizes these are files and it breaks because post CSS isn't configured.

CHRIS BISCARDI: We have file. That's an improvement.

JASON LENGSTORF: You know what I meant. So then that means I need to put let's see. If it .postcss config?

CHRIS BISCARDI: I'll add the file here. Postcss.config.js. Oh, so we need the code.

CHRIS BISCARDI: I updated the gist.

JASON LENGSTORF: Going back to the gist. Good naming. Sometimes you have to get it out.

JASON LENGSTORF: We are requiring post css modules and then we are getting the global CSS, good.

CHRIS BISCARDI: Okay. So we could run into the problem we will run into this problem. If you want to comment the global out that's a problem we'll run into. But the get json is like, do we really need that? No. We just need the post CSS modules here.

JASON LENGSTORF: Really?

CHRIS BISCARDI: We can comment out the other stuff right now.

JASON LENGSTORF: Cool.

CHRIS BISCARDI: This includes the bug code that I have here. But, yeah, we can comment this out for now.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: I believe the default behavior is to plop out json file next to the thing that's importing. Do we need to run patch package?

JASON LENGSTORF: I don't think so.

CHRIS BISCARDI: This is why you do it as a post install. Usually you do and you're like, oh, it didn't work. Oh, wait, is the thing I changed

JASON LENGSTORF: Module not found. Okay. We're on to SVG.

CHRIS BISCARDI: Our CSS is working. We have CSS modules in the Toast application. We didn't need to change any of the CSS. We didn't need to move to a CSS and JS solution. This is a pure port thing. We just ported what you already had into working into this system using regular, like, API. Regular post CSS API.

JASON LENGSTORF: The reason I like the CSS modules is because it is just plain CSS which means you can mess around in your browser and copy/paste it in. But when you go to use it so like we're looking at let's not look at 404. Here's bio. You have your heading, your cycle. So if I go to bio here then I import styles from the module. I just get to use the class names however I want. So styles.control. I know in this bio.module there is going to be a .control class and those are the styles applied. It's a great way for me to get the benefits of css and js where we have scope module names. We don't get the global scope collisions, but we still get we write regular CSS. We can edit it in the browser dev tools and that's where I land on this. I feel like CSS and JS stuff is really powerful, but in my experience at least it gets a little hard to manage when you've got tons and tons of styles in your JSX.

CHRIS BISCARDI: That is an opinion that Toast has to support.

JASON LENGSTORF: Exactly. You've got to do what I want. You don't get to tell me what to do.

CHRIS BISCARDI: As an infrastructure project we have to kind of do that. We kind of have to support that.

JASON LENGSTORF: You're not the boss of me.

CHRIS BISCARDI: Also somebody earlier, I think Ashley, got the exact same error we just saw in the Babel plugin in a different project.

JASON LENGSTORF: Oh, nice. See?

CHRIS BISCARDI: Educational.

JASON LENGSTORF: There are two ways you can look at what's going on in this stream. One is you can say, oh, my God, get to the part where you write Toast. Yes, we could have skipped ahead. But the more valuable thing and the thing that I think is really worth talking about here is like what we're doing now, this is what I feel like a lot of development is. You're taking existing code and digging through. Okay, I want to do this thing, how do I untangle this and get to the part where I can do the thing that I want to do? Green field code is great and working on green field code, yeah, I would love if I could burn down everything I wrote and start fresh. That's not practical when you start getting to scale especially. Being able to debug, trace error modules back and figure out how to patch things so you can get the thing you need to do done, that, I think that's the stuff that's really going to actually progress you in your career and get you to the point where you are just an asset on every team, instant drop in, up and running quick. These skills go everywhere.

CHRIS BISCARDI: You got a bunch of agreement from Laurie who says no one gets to write from scratch.

JASON LENGSTORF: Yes.

CHRIS BISCARDI: And Eric saying me plus rust last week.

JASON LENGSTORF: Absolutely, yeah. So we have now patched Toast.

CHRIS BISCARDI: Yep.

JASON LENGSTORF: We patched a couple of my plugins. Now we are up to the point where we've got svg's we have to load.

CHRIS BISCARDI: You're importing svg's which doesn't work in the browser. My mic is about to get overrun by alarms.

JASON LENGSTORF: Oh, you have sirens. I didn't realize I was doing that. I'm okay to not do that. We can move them

CHRIS BISCARDI: Well, we're going to do it. All right. Yeah. Let's do it.

CHRIS BISCARDI: We're going to support it. So basically the general strategy for if you are doing this kind of thing with webpack and you want to move it and not change it to Toast you will use a Babel plugin to do it. We'll run Babel on this. We kind of have to. Because not everything is really perfectly supported. Specifically when we're talking about imports as we'll get into later, the way ESM imports work in node is slightly different from the way imimportants work in the browser is definitely different from the way you're used to using imports in webpack. We have to massage that stuff to be like URL imports in the browser and things like that. So we have to run Babel over stuff. Until there's more support later. One day maybe we can get rid of it which is kind of the idea. We're using snowpack to do the third party package dependency bundling for now. In the future when people are shipping and writing ESM packages by default, we won't need to do that. It will just work.

JASON LENGSTORF: Yep. Excellent.

CHRIS BISCARDI: Okay.

JASON LENGSTORF: We can dream. So I assume I'm going to need a new Babel plugin.

CHRIS BISCARDI: True. You have everything patch packaged, right? I saw you do it for Toast.

JASON LENGSTORF: Yes, I did.

CHRIS BISCARDI: We'll install Babel plugin in line react svg.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: This is an airbnb plugin, I think. The SVGs imported here get converted through SVGO and turned into react components.

JASON LENGSTORF: Okay. Then is there any config or do I drop it straight in?

CHRIS BISCARDI: I don't think there is config with it.

JASON LENGSTORF: What was it called? I'm going to copy/paste this.

CHRIS BISCARDI: I have it specified as inline react SVG. You can do the full shenanigans.

JASON LENGSTORF: Oh, you can do it without the

CHRIS BISCARDI: Yeah. All of the Babel plugins are prefixed with Babel plugins. So it looks for a package prefixed with Babel plugin and you don't have to do the boilerplate all the time.

JASON LENGSTORF: Wait. I have to run the patch package first because otherwise it's going to oh, no. Did it not keep it? It dumped all of our stuff.

CHRIS BISCARDI: It looks like you have changes.

JASON LENGSTORF: Yeah. Let me don't save. Come back up here. Hit it again.

CHRIS BISCARDI: If we don't we can just copy in the config from before.

JASON LENGSTORF: Here it is. Now it's working. So I'm going to drop this one in.

CHRIS BISCARDI: What just happened is VS code will hold on to the changes you made in a file even though the underlying file has changed.

JASON LENGSTORF: Yes.

CHRIS BISCARDI: By getting rid of the changes we had in the editor, we can bring the actual file back.

JASON LENGSTORF: Do you need me to change anything else in here before I save this out?

CHRIS BISCARDI: Just the inline SVG.

JASON LENGSTORF: I have now patched, repatched.

CHRIS BISCARDI: Patched, repatched.

JASON LENGSTORF: If I build maybe.

CHRIS BISCARDI: Were you ever a patch person? Did you have patches on stuff?

JASON LENGSTORF: No. But not because I didn't want to but because I couldn't figure out how to get them to stick. Either the iron I had in my house was not very good.

CHRIS BISCARDI: Not hot enough, yeah.

JASON LENGSTORF: Or I was not patient enough to do them properly. They never stuck. They would just fall off. I was the kid who put safety pins in everything.

CHRIS BISCARDI: Ooh, yeah. Backpack and everything.

JASON LENGSTORF: Oh, yeah. I had long sleeved shirts and I did this thing where I would cut the top of the shirts and safety pin them back together.

CHRIS BISCARDI: Hard core kid thing.

JASON LENGSTORF: Emo kids. So I have done something wrong.

CHRIS BISCARDI: You have done nothing wrong actually.

JASON LENGSTORF: We're missing a tofixed.

CHRIS BISCARDI: If we look for it we'll find it in one place and not in bio. You have to act node modules but you may not find it here.

JASON LENGSTORF: In matter. What up matter?

CHRIS BISCARDI: We're not going to do anything to matter. Just comment out bio mostly.

JASON LENGSTORF: So we're going to drop the

CHRIS BISCARDI: We're going to move forward. Like we could debug this and try to figure out why it's calling tofixed and why, et cetera. Maybe you already know but mostly we are just going to comment out bio for now, get the site working and go back to it.

JASON LENGSTORF: There is a use effect that calls matter. If I drop that out, I think.

CHRIS BISCARDI: So the way you have this set up because I have gone through this code is use effects calls matter, a bunch of different things. I highly advise just commenting out basically the file and exporting, like you export a bio component you used somewhere else. Export an empty bio component basically.

JASON LENGSTORF: Cool. Done.

CHRIS BISCARDI: Wow, that's an aesthetic. For the safety pins.

JASON LENGSTORF: Yeah. Okay. So we're getting closer. Can't find my data.

CHRIS BISCARDI: Yep. We're going to skip this for a second. So go to the writing.js file you have in here.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: It's doing this upward import thing. Just do const writing equals

JASON LENGSTORF: Okay.

CHRIS BISCARDI: This is just for speed purposes. We could go in and do these things with the site. But it's really not relevant because we have already done that type of thing. This is just this is the manual mundane porting. Like I need to add an extension to every single file.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: We don't necessarily want to do that on screen. So the problem here you have dark mode, use settings. If you look at Gatsby browser and Gatsby SSR, they have something.

JASON LENGSTORF: Ah, yes. I am doing a rapper component. Giving away my Easter eggs.

CHRIS BISCARDI: Oh, yeah. I know. I'm sorry.

JASON LENGSTORF: Zero remorse.

CHRIS BISCARDI: Zero remorse.

JASON LENGSTORF: Here we go. We've got a settings provider which comes out of this context file. So I need to put this around Toast. So what's happening in Gatsby is Gatsby operates by creating a root element which is like a root component and then everything else in the app happens there. If you want to, you can tell Gatsby to wrap the whole app component with whatever you want which is a great way to do custom provider like if you're using context, auth, anything that needs to stay consistent across the app, use this wraprootelement. So I presume Toast has a similar way to solve that.

CHRIS BISCARDI: Nope.

JASON LENGSTORF: No?

CHRIS BISCARDI: I'm just kidding. Yeah, we have a page wrapper.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: I have updated the gif if you want to use the code there.

JASON LENGSTORF: Okay. So basically you have ported this whole thing into page wrapper. So what's different let's copy this. This goes in the root of source, right?

CHRIS BISCARDI: Mm hmm. Yes. In the root of source.

JASON LENGSTORF: That was poorly worded.

CHRIS BISCARDI: I thought you were going to say in the root of the project. Then halfway through you had me in the first half.

JASON LENGSTORF: The difference between this one and the Gatsby browser, in Gatsby browser, we are importing react. In page wrapper we are importing preact and this is a pragma. If you're not familiar don't worry about it much. We're saying, hey, when you parse JSX instead of using react element use the H

CHRIS BISCARDI: It's not critically necessary. Because I wrote a new file when you talk about legacy applications or round field applications as they are sometimes called you want to do things as you move forward. Because we are creating a new file here I'm writing it in the new way.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: We didn't have to do that. We could have copied the react code over. Because this is a new file and we can write it in the not proper, but the new format. I wrote it in the new format.

JASON LENGSTORF: Yeah. So we import the settings provider again.

CHRIS BISCARDI: You might want to get rid of the .js there. It comes later.

JASON LENGSTORF: Okay. And then instead of exporting a const wrap root element we just import a wrap component.

CHRIS BISCARDI: Yep.

JASON LENGSTORF: This is honestly just more familiar. Do I need a div around it?

CHRIS BISCARDI: I don't think you need the div around it.

JASON LENGSTORF: We'll let it roll the way it did in the regular old app. That means, I think are we going to get a build? Show me Toast. Show me Toast. Show me Toast.

CHRIS BISCARDI: Show me the jam. We got a build.

JASON LENGSTORF: Look at it go. All right. Now if I do what?

CHRIS BISCARDI: NPX serve public. So we're just serving from a static HTP server from the public directory which is where our stuff is.

JASON LENGSTORF: Hey oh.

CHRIS BISCARDI: We have the Toast site now.

JASON LENGSTORF: So this is a Toast site. This is very cool. Show me potato salad.

JASON LENGSTORF: Indeed. It looks like things are not working.

CHRIS BISCARDI: Your styles aren't around, right? The things you have set up to be clickable and whatnot.

JASON LENGSTORF: I appear to have some kind of weird overlay on the whole site.

CHRIS BISCARDI: I saw that.

JASON LENGSTORF: Oh, it's the canvas. That's the boop drop on the home page that's inline style to be full width but because the wrapper styles aren't applied it's taking over the full width of the whole window.

CHRIS BISCARDI: If we look at the console output there are a couple of problems here. This is the big thing for ESM based sites. Not the big thing, but this is a thing people run into all the time. Right? None of these imports have.js on them.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: Right? So they are not importing files. Open one of them in a new tab.

JASON LENGSTORF: One of these?

CHRIS BISCARDI: In a new tab.

JASON LENGSTORF: New tab.

CHRIS BISCARDI: Hey, look, we 404'd. If you add .JS on the end

JASON LENGSTORF: There's a file.

CHRIS BISCARDI: You get the file. The browser doesn't work the same way as node does. Doesn't do automatic resolution of arbitrary extension. You're asking for a URL and you have to get back the URL.

JASON LENGSTORF: Got it.

CHRIS BISCARDI: You could set up your server to redirect these to JavaScript files if you wanted to. In reality these have to be pointing at actual files. Like to an extent we could do this. You don't have to do it. It does it automatically for react. So import react from react is called a bare impact because react is an NPM package name. Snowpack takes care of it for us. React using an import map in the public modules. Import.js, json, one of those. File. It writes react to the preact we had earlier basically.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: As you add .js to these files, your site will slowly start working more and more.

JASON LENGSTORF: Let's roll through these.

CHRIS BISCARDI: There are a lot of files here though.

JASON LENGSTORF: On the bright side I think we're getting close actually.

CHRIS BISCARDI: The site works now, right? Like the things we need to do from here on out are very basic mundane like we have a brown field site. We need to change some imports. We need to make sure we include the global css file.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: These are like we have done all the hard stuff. Right? We have done all of the things that are like our Gatsby site is now a Toast site. Anything we need to do from here on out is sort of like making our new experience.

JASON LENGSTORF: Yeah. This is very cool. It really does feel like we are not doing anything wild here. We're just going in and telling the browser where to find files. So we lose a couple conveniences like automatically knowing all of these are local JavaScript files because we gave it a path and it tries .JS, whatever extensions are available. Really like now the thing that's interesting about this is we can run this directly in the browser. Whereas you can't do that with a webpack bundled site. You're not getting the oh, I need to actually start this. Build it again.

CHRIS BISCARDI: You do need to build it again. Doesn't have a dev server today. It's still early tech in that sense. It will at some point. Actually, the really nice thing about es module web servers is you can build everything on demand. It only imports a couple of files. This is an important warning we'll have to fix in a second.

JASON LENGSTORF: Okay. So let me the start the server again. Let's see what happens. Okay. So we're much closer, but we are getting we're missing the global CSS.

CHRIS BISCARDI: Mm hmm.

JASON LENGSTORF: And we are missing this preact.

CHRIS BISCARDI: Let's start with preact.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: There is a config package json inside of snowpack called known entry point.

JASON LENGSTORF: Inside of snowpack.

CHRIS BISCARDI: What snowpack usually does is scans your imports and says these are all the things you use, these are the things I'm going to do or these are the things I'm going to compile and make available to your application.

JASON LENGSTORF: Mm hmm.

CHRIS BISCARDI: We don't import preact because we were using a react based Gatsby site. It never found it. So it's inside install options.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: Then here we're going to have an array instead of an object.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: And type preact.

JASON LENGSTORF: That's not bad.

CHRIS BISCARDI: No. This is the way of basically telling snowpack, hey, I'm going to also use this even though it doesn't look like I'm going to.

JASON LENGSTORF: Nice. Then I need to breadbox, right?

CHRIS BISCARDI: Mm hmm.

JASON LENGSTORF: Breadbox. Doesn't like preact/compat.

CHRIS BISCARDI: We can add that option in later.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: It searched into the public folder, found preact compat.js and tried to compile into web module. That's a small config option.

JASON LENGSTORF: Now that we have done it we can see here's preact.

CHRIS BISCARDI: Right.

JASON LENGSTORF: So if I build no errors. Hey, no errors, no warnings. NPX

CHRIS BISCARDI: That's a full production build, by the way.

JASON LENGSTORF: That's wild. If we look at actually, let's just look.

CHRIS BISCARDI: Are we going to? Oh.

JASON LENGSTORF: Is that it? Let's see how long these are taking. I mean, it is like a super fast site. It's not very complex. Apples to apples, the build time for Gatsby wait, what? No build command? That doesn't seem right. Is this the right repo? No. So it's going to be something else.

CHRIS BISCARDI: What did you name it?

JASON LENGSTORF: That's a great question. Maybe this one. There it is. All right. How long does this take to build? This one takes 38 seconds. The Gatsby build is 14.4. So we're like four to five times faster with the same code.

CHRIS BISCARDI: Yep.

JASON LENGSTORF: For production builds. This one also, we should point out, is using a cache which I guess Toast is as well. Right?

CHRIS BISCARDI: Not for that.

JASON LENGSTORF: No? Okay. So it's snappy. Real snappy. Let's take a look at the site. Are we getting any errors?

CHRIS BISCARDI: We do need to look at layout.js. We're importing that global CSS from layout. Looks like source settings from wrapper. Remember I had you take off the .js? We knew we were going to run into that.

JASON LENGSTORF: I forgot to save it. Now in layout.js we have this.

CHRIS BISCARDI: Yes. So you remember that config for the post CSS I told you to take out.

JASON LENGSTORF: Yeah.

CHRIS BISCARDI: Go back.

JASON LENGSTORF: Put it back in?

CHRIS BISCARDI: Yeah.

JASON LENGSTORF: Okay.

CHRIS BISCARDI: Post CSS.config.JS. The global module path is the one you want.

JASON LENGSTORF: Okay. Do I need to do anything else?

CHRIS BISCARDI: Yes. Because Toast isn't, like, wrapping everything, we're not putting caches and stuff in all these different things. We weren't forcing everybody into the eco system to do it our way. Because we are using post CSS modules, that puts the cache file in/temp. So if you LS/temp you should be able to see the folder. There will be a couple things in here. The one we're looking for is something like Jason af in there. It will be long like the full file path, whatever directory you're in now.

JASON LENGSTORF: Great question.

CHRIS BISCARDI: I think I see it there.

JASON LENGSTORF: You do?

CHRIS BISCARDI: Down, down.

JASON LENGSTORF: Oh, here, here.

CHRIS BISCARDI: Bptp

JASON LENGSTORF: I got it.

CHRIS BISCARDI: So we can remove that. If you LS inside of that you'll see the cache.

JASON LENGSTORF: Bpbptp. Pbbbltth.

CHRIS BISCARDI: We have the content of your module. For example, this is how you would cache like post CSS configs or the post CSS files in like CI or something. You could take these, put them where they need to be and be done. You can look at them if you want to and cat one or you can remove the folder.

JASON LENGSTORF: I don't care. Let's remove this folder.

CHRIS BISCARDI: It looks like a post CSS thing. Not super interesting.

JASON LENGSTORF: So I have done the damage.

CHRIS BISCARDI: You removed the styles in your app. Oh, no, you didn't.

JASON LENGSTORF: No, no.

CHRIS BISCARDI: Those are added files.

JASON LENGSTORF: Yeah, I just removed that one. If I rebuild now do I need to prepare again or breadbox?

CHRIS BISCARDI: Shouldn't need to.

JASON LENGSTORF: Okay. So I'm going to build. Okay. Then we're going to NPX.

CHRIS BISCARDI: The long build time increase. 4.7 seconds. A whole second.

JASON LENGSTORF: Oh, my God.

CHRIS BISCARDI: Any time you add stuff into the build, you end up with slower builds, right? This is why when you're doing a Gatsby site and you have images in the build this is why it's super fuckin' slow. That's a lot of processing and it's finicky. As we incrementally improve our imports and stuff like that, we're running all the code. If we go to the layout file with the global import, we're not actually using that anymore. Right?

JASON LENGSTORF: We're not?

CHRIS BISCARDI: Well, think about what's going to happen here. We just specified that's a global file. So what do we need to do? We need to add it to a link tag.

JASON LENGSTORF: Add you to a link tag.

CHRIS BISCARDI: Before we do that let's actually run post CSS on the CSS file so we get the output.

JASON LENGSTORF: I think I did, right?

CHRIS BISCARDI: You ran the Babel plugin that does the JSON stuff.

JASON LENGSTORF: I see. We need to do the post CSS CLI. So yarn add.

CHRIS BISCARDI: Then I pasted the command in chat.

JASON LENGSTORF: Right in the chat? Right in the chat. Everybody can see it.

CHRIS BISCARDI: Yeah. Ben is like what's old is new. One of the things Toast lets you do is just use the browser APIs that exist. They're getting pretty good.

JASON LENGSTORF: Unknown word?

CHRIS BISCARDI: Remove the JSON files.

JASON LENGSTORF: Oh, oh, I get it.

CHRIS BISCARDI: If you want to avoid them being printed you can override that JSON function.

JASON LENGSTORF: Okay. I'm going to try something.

CHRIS BISCARDI: Ooh. Exciting.

JASON LENGSTORF: Danger zone.

CHRIS BISCARDI: Jason's doing batch scripts.

JASON LENGSTORF: I'm going to do a 404 just to do the one.

CHRIS BISCARDI: Okay.

JASON LENGSTORF: Oh, God. Okay. All right. That did work.

CHRIS BISCARDI: Yep.

JASON LENGSTORF: So I'm going to do this. Ah ha. I am a Jean use.

CHRIS BISCARDI: Before you do this

JASON LENGSTORF: Too late. I already did it. Damn it. Let me delete these again.

CHRIS BISCARDI: We're good.

JASON LENGSTORF: Do you need these?

CHRIS BISCARDI: You don't need those. I was going to say if you don't want them to get generated again because they're just sitting there in your post CSS config there's a function I implemented that will just not output them. So you get to use the actual post CSS APIs for doing things like putting things in different places. You can get rid of the console log if you don't want it. This gives you the file name. The JSON output you just saw and where it thinks it should go and the output file.

JASON LENGSTORF: Oh.

CHRIS BISCARDI: You can put them anywhere you want like public. Or you can do any processing if you wanted to.

JASON LENGSTORF: But for our purposes we are not going to use the json at all.

CHRIS BISCARDI: Right. It's embedded already in your app.

JASON LENGSTORF: In that case I'm going to just no op this. I'll keep it if I want to do something for now. But for now we'll no op it. I did remove these styles, right? Yes.

CHRIS BISCARDI: We'll boop it.

JASON LENGSTORF: Yes, boop it. Build?

CHRIS BISCARDI: Yep.

JASON LENGSTORF: It does the thing. We end up with in the public folder styles, excellent. And now I need to update the layout

CHRIS BISCARDI: One of those styles should be the global file.

JASON LENGSTORF: Yes. There it is. And so now in my public folder I have my layout component which would be in the components folder here. In layout, I can use helmet. So instead of

CHRIS BISCARDI: Let's not use helmet actually.

JASON LENGSTORF: Where do you want me to put it?

CHRIS BISCARDI: You have a link tag here. Use helmet but put a link tag.

JASON LENGSTORF: Got it. Cool.

CHRIS BISCARDI: You know.

JASON LENGSTORF: Where should you put your we'll do it like this. REL stylesheet. This is in public, so styles/global.CSS and then I can drop this out. Okay. So let's build somewhere in here. Doesn't like that. What did it miss? Unexpected token export.

CHRIS BISCARDI: Patch package.

JASON LENGSTORF: Yarn patch package.

CHRIS BISCARDI: This is why we set up the post install. But because we were doing in development work calling it manually is what we wanted.

JASON LENGSTORF: Hey oh. I'm actually going to set it up so it doesn't get us again. Just going to turn on the post install script so when we add something new it will just run that for us.

CHRIS BISCARDI: We're still kind of doing development.

JASON LENGSTORF: Keep it out?

CHRIS BISCARDI: Yeah. It makes everything more clear. Right?

JASON LENGSTORF: Got it.

CHRIS BISCARDI: If we run into an issue there is no question about whether it was the post install or not.

JASON LENGSTORF: Okay. So let's serve public here. Oh, we are way over time.

CHRIS BISCARDI: Are we?

JASON LENGSTORF: Yeah.

CHRIS BISCARDI: Well, this is the site. So we would be just importing the other CSS files in the same way. You can choose to put them together and ship them as a single file or do what you want.

JASON LENGSTORF: Here's a question. When we do the CSS modules, they get the CSS modules get imported but we are not getting the compiled CSS file. So we need to do what? Is there a way to automate?

CHRIS BISCARDI: Post CSS has tools for that kind of stuff.

JASON LENGSTORF: Okay. We'll have to do that in kind of a follow up. But just watch this repo. Because what we'll do is, like, I'm going to continue porting this and get the site moved over. So if you want to see how the rest of this goes I'm going to push the changes up to the Jason.af repo. Man, time flies when you're having fun. I didn't realize we were over time.

CHRIS BISCARDI: I had no idea.

JASON LENGSTORF: We have to wrap up. So let me go a quick shoutout to the sponsors again. Thank you to White Coat Captioning for giving us captions today. We really, really appreciate that. Thank you to netlify, Fauna and Auth0. Chris, thanks for coming on. Anywhere you want people to go for new information? We have the Toast repo site here.

CHRIS BISCARDI: We did hard mode on this stream. If you want easy node here is a repo. It already works. You can do it from scratch if you want to. It's much easier. We just did a bunch of hard mode stuff for porting an existing app.

JASON LENGSTORF: Do remember you can always come to the party corgi discord to get support, talk to people working on this stuff. A bunch of us are all doing work on Toast. So you can get more of a fun supportive environment of people who are kind of going through the same process now. So, yeah. This is a lot of fun, right? We were able to get a lot of distance covered in a little over an hour and a half. I think we are probably another 30 minutes away from getting everything but the bio working which is pretty excellent. I'm excited about this. I'm really looking forward to seeing where Toast goes in the future. If you are interested join the discord, follow the repos, give it a try. With that, chat, thank you so much. Stay tuned. We've going to raid and we will see you next time.