Build a Component Library in SvelteKit

Transcript

[00:00:02] Ben: Howdy, howdy, y'all! Welcome back to Some Antics. Today, I am joined by Brittney! Brittneyy, how's it going?

[00:00:08] Brittney: It is going fantastic. How are you?

[00:00:10] Ben: I'm doing so well. I'm super, super thrilled to have you on. I'm super thrilled to be talking about SvelteKit. We were actually just talking before stream, but a few people, some of whom are already in the chat, have been mentioning that, like, I need to dive into Svelte, and I just have not had the chance! So I'm super excited to, I guess, get a grand tour of that.

[00:00:31] Brittney: Yeah! Thank you for having me on! I'm super excited to talk about it, too!

[00:00:36] Ben: Absolutely! But before we dive into Svelte and SvelteKit and component libraries and all that stuff, let's talk about you for a bit. For folks who haven't seen you around yet, who are you? What do you do?

[00:00:48] Brittney: Yeah, sure. Hi, I'm Brittney Postma. I have a lot of jobs. I cohost the Purrfect.dev podcast. I create content on CodingCatDev. I also founded the Svelte Sirens, which is a Svelte society to help support the women and nonbinary people inside the Svelte community. We do talks and livestreams where we show how to do different things with Svelte on that. But the reason that I'm here today probably is because I'm a software engineer at Granger, and I am on the team where we are building out our internal component library and the design system behind the scenes for our teams at Granger.

[00:01:27] Ben: Gotcha. So how did you get into this world of, like, Svelte and component libraries? Like, what was that story?

[00:01:35] Brittney: Yeah, sure! So, I have a background in graphic design and I did that a while ago. I took a couple years in college. I never finished. I was basically broke mid-twenties, needed money. So I started working in restaurants, got out of design work completely and got into banking, did that for a minute, and then had kids — got married, had kids. So, while I had kids — they were, I think, three, two, and then a baby — while they were playing in the playroom, I'm like, "I need something to do." So I just started kind of looking up these fun things that I could learn and do, and I found freeCodeCamp. And once I found freeCodeCamp and I started doing the responsive web design tutorials in there, I was kind of hooked, because I'm like, this brought my graphic design background into where I could create things and make it interactive. And I was just obsessed with it from that point on.

[00:02:33] And I think about a little less than a year into my journey, I listened to Syntax.fm and found Svelte through Scott Tolinsky and switched everything that I'd already learned in React to Sapper, and I never looked back. I just, it was full Svelte from then on out.

[00:02:49] Ben: Okay, so why that migration? Like, what's compelling to you about Svelte?

[00:02:55] Brittney: Yeah, that's a great question. So, the developer experience for me is a huge draw. So going into React, I probably jumped into React too soon, to the point to where I didn't know what was React and what was JavaScript. I'm like, "Where is… What is this componentDidMount?" This was back in class days, where it was just very confusing for me to understand what was happening. When I switched to Svelte, it was more like having the HTML, CSS and JavaScript structure of just a vanilla site, with just kind of a little bit of sugar syntax that just made it click more for me. So I've took myself out. I feel like when I'm writing React, I'm writing more, like, JavaScript. You are writing JavaScript. So in Svelte, I felt like I was actually writing the syntax for the things that you're in scope of.

[00:03:45] Ben: Interesting! That actually corresponds a lot with how I feel about Eleventy…

[00:03:50] Brittney: Oh, yeah!

[00:03:50] Ben: …which is, I think, a different beast, right? Because Eleventy's not really made for, like, building heavily interactive things. But I like Eleventy because I feel a lot closer to the markup. And it seems like you've got a kind of similar experience with Svelte, just more interactive and dynamic and client-side real-time changes.

[00:04:14] Brittney: Yeah! I feel like it provides a lot of, for you out of the box, too, since it's a compiler. Like, you have all access to all of this stuff, but then if you don't use it, it just goes away, which is also nice.

[00:04:26] Ben: Okay! Very cool! Yeah, so what are we going to be doing today?

[00:04:31] Brittney: Yeah! So today, we're going to be building out some components for a component library.

[00:04:38] Ben: Oooh.

[00:04:40] Brittney: Yeah! We're going to see if we can get some things working, see if we can check out how SvelteKit works, how Svelte works, do some animations. We'll see what we can get up and running. So do you want to go ahead and get over to kit.svelte.dev…

[00:04:54] Ben: Yeah!

[00:04:54] Brittney: …and we'll see how we can get this installed?

[00:04:58] Ben: Yes! Let me actually… Folks cannot see my screen right now. They've just seen our faces.

[00:05:03] Brittney: Oh, yeah!

[00:05:03] Ben: So there we go! Now folks can see our screen. I put a few links in the chat but, y'all, please go follow Brittney on Twitter.

[00:05:13] Oh, actually, we've already got a great question to start off. This is from aathik who wants to know, "I would like to learn Svelte. Should I learn Svelte, or should I jump directly into SvelteKit?"

[00:05:23] Brittney: That is a great question. So, I'm gonna say the traditional "it depends," but SvelteKit is kind of becoming, once it's out of beta, I think it's going to be the path forward for everyone to learn Svelte regardless of what you want to do, because it provides all the different rendering options that you're going to get. If you're just learning Svelte and using Svelte, you're just gonna get client-side rendering. So you have to add something else to it, to get, like… before, it was Sapper where we would have server-side rendering or static generation. But SvelteKit provides all of that for you, and it's kind of a nice little boxed package. So I would suggest just learning SvelteKit, just using SvelteKit to learn Svelte.

[00:06:06] Ben: Good deal! And that's the journey I'm about to take! I, again, have not learned Svelte, so this is how I'm jumping in is through SvelteKit with you. So, thank you for answering that.

[00:06:17] Yeah, so I'm over at kit.svelte.dev. Where should I go now?

[00:06:20] Brittney: Awesome. So if we scroll down just a little bit, you'll actually see the script that we need there, "npm init svelte@next," and then the "my-app," where it's just gonna be whatever we want to call our application.

[00:06:31] Ben: Alright.

[00:06:32] Brittney: So if you want to get your terminal open and however we get set up here.

[00:06:37] Ben: You got it! I'm just gonna bring these two things side by side. Okay. "npm init svelte@next," and let's call this "sveltekit-component-library." It's a bit of a long name, but it's a good one.

[00:06:55] Brittney: Yeah!

[00:06:55] Ben: Very descriptive.

[00:06:56] Brittney: Very descriptive, exactly. That's what we need.

[00:06:58] So it should walk you through some of the steps of getting started. So it asks you if you want a demo app or if you want a skeleton project. We're gonna do the skeleton project, just so we have a baseline, nothing in it to cloud our…

[00:07:11] Then, do not want to use TypeScript.

[00:07:14] Ben: Hey, Travis, thanks you for subscribing!

[00:07:16] Okay, so no TypeScript today. Just an extra complication for now.

[00:07:20] Brittney: Exactly, yeah. Especially for me. You CAN use ESLint, and it's gonna ask you about Prettier, too. It's up to you, but I do use both of them.

[00:07:29] Ben: I think, let's just say for the purposes of learning, let's just remove things that could be obtrusive in this case.

[00:07:36] Brittney: Yeah!

[00:07:36] Ben: I think in a real world project, I would turn both of those on, but just for demo purposes, let's not deal with that.

[00:07:43] Brittney: Absolutely.

[00:07:45] So it kind of gives you some next steps there, tells you how to change directory into it, npm install, and then how you could add Git, and then how you can open the server.

[00:07:56] Ben: Alright! And I will actually go ahead and copy that, 'cause that looks good. Aaaand now we wait for npm to do its thing.

[00:08:05] Brittney: Yeah! Yeah, while npm is doing that… so I wanted to say, a design system is a complete collection of resources. It's not just your component library, but a component library is a piece of that design system. So today, we're just gonna go through, like, building out a few components for a library that would be a part of a design system. A design system would also include things like your style guidelines and your physical designs and documentation. I don't know if we'll get to documentation today. We'll see.

[00:08:37] Ben: Yeah. Yeah, 'cause you want the guidelines of, like, yes, this is the component you can pull in. But especially, you know, doing the, like, accessibility-type work that I end up doing, like, oftentimes the component is a very helpful part to make sure people have a strong foundation, but then you still have to hold the component correctly. Like, you can't hold it the wrong way. So there's gotta be, like, extra guidance there.

[00:09:03] Brittney: Yeah, absolutely.

[00:09:05] Ben: Pop open code as well. And let's go ahead and just run that "npm run dev -open" as well.

[00:09:11] Brittney: Awesome.

[00:09:14] Ben: In my browser over on my other monitor!

[00:09:18] Brittney: Yep, that is always what happens!

[00:09:21] Ben: That's the streamer way. But it did say localhost:3000, so here we go. Cool! I'm gonna just kind of bring this off to the side and we can bring it back in at some point. So I noticed that we've got… this looks like just a simple <h1> and paragraph.

[00:09:40] Brittney: Exactly, yeah. Just, like, a basic starter. So if you want to pull up the code there, in the src folder and the routes folder is where you're going to see your index.svelte file, and that matches to that home route. That is what you're seeing there on your screen. So, let's start adding some stuff to this. I guess, if you want, we can just delete all of that out of there.

[00:10:03] Ben: Okay.

[00:10:06] Brittney: 'Cause we don't need any of that. And I thought, instead of us doing — I love CSS custom properties, so instead of us doing this crazy list of CSS variables and taking all this time, that we could use Open Props—

[00:10:20] Ben: Ooh! Okay!

[00:10:21] Brittney: —to pull in. So Adam Argyle has this Open Props library, and I did not mention it to you before, sorry. open-props.style, I think, is the thing. But we're gonna use that in our app to hopefully use the CSS custom properties. If you could actually grab that import right there, and we'll throw that in something in just a minute.

[00:10:45] Ben: Okay!

[00:10:45] Brittney: So back over in the code… on your index page, I mean, you could just save that index page with nothing on it for right now.

[00:10:54] Ben: Okay!

[00:10:54] Brittney: And then in the file explorer, we want to create a new file. So in the routes directory, create a new file: __layout.svelte.

[00:11:09] Ben: Is this a magic name? Like, the fact that we've named it something means something here?

[00:11:14] Brittney: Exactly, yes. So this is a magic route in SvelteKit. This will wrap your entire application in a layout file. So it allows you to create a layout that could also be scoped. If you wanted to reset it and you're in a folder, you can do a layout reset file.

[00:11:32] Ben: Ooooh!

[00:11:33] Brittney: That will override that.

[00:11:35] So here is another magic thing about Svelte that we need. We need a… If you're thinking about a layout file, you want to probably have, like, a <header> and a <footer> maybe, but for now, let's just do a <main> tag. So a <main> tag in there, and then what you need in SvelteKit to… put your children in their place is a <slot>.

[00:12:00] Ben: Alright!

[00:12:00] Brittney: I know, it's a horrible joke!

[00:12:03] Ben: Goodness. Okay. Or, is it self-closing?

[00:12:06] Brittney: It is self-closing if you would like, unless you needed to… yeah, there you go. So, the <slot /> there, and then we can open up just a normal CSS <style> tag wherever you would like, on top or below. If we had… You have to do it outside of the markup. Yeah, there you go.

[00:12:23] Ben: There we go. Okay. Oh, yeah, because Svelte… from what little I know about Svelte, right, like, it separates these things by design, right?

[00:12:32] Brittney: Exactly!

[00:12:32] Ben: Okay.

[00:12:32] Brittney: And you can order those with Prettier so, like, usually my styles are on the bottom.

[00:12:38] Ben: Okay!

[00:12:38] Brittney: But you can set the order with Prettier however you want, but yours may auto-format it somehow.

[00:12:46] So we have the <main> tag. We have the <slot>, which is basically just telling Svelte where to put the rest of the children, so any other route is going to be where that <slot> is. So right now, our routes are just sitting inside <main>.

[00:13:00] Right here, we want to import the thing you just copied. Yes. So… okay. We have Open Props now imported into our styles, and then we could probably just go ahead and create some…

[00:13:21] Let's get something on the screen so we can see. So in the index file, let's do an <h1>. And we'll say "Component Library."

[00:13:32] Ben: Yeah.

[00:13:33] Brittney: Yeah, or something.

[00:13:39] Ben: Okay. Now, should I go back to the browser? Or are we adding more?

[00:13:45] Brittney: We can add some styles to it and see if that works. That's what I was gonna suggest doing.

[00:13:52] Ben: Sounds good.

[00:13:53] Brittney: I'm gonna get Open Props up over here so I can see what we need.

[00:13:59] Ben: Yeah.

[00:14:00] Brittney: So…

[00:14:06] In that code block, if you want to, like, open a <style> tag again, we could, like, change the <h1> and I can show you another really cool thing about SvelteKit. So we can open another <style> block.

[00:14:17] Ben: Inside index.svelte?

[00:14:21] Brittney: Yes, in that file, yep. And do an "h1." And then let's do font-size… and then you're gonna use var(--font-size-fluid-3) — fluid, F-L-U-I-D, dash 3.

[00:14:50] Ben: Okay! And this is coming from Open Props, so this is a set of—

[00:14:59] Brittney: Oh, we're gonna hope that it's coming from Open Props! So, I wanted to see if it was gonna work, so we need to see the browser and see if that worked for us.

[00:15:07] Ben: Let me save this and come back here. It looks like, that's pretty much—

[00:15:12] Brittney: it looks like it is!

[00:15:13] Ben: Yeah! If I inspect the styles — that's gonna pop up over here — we can see that we've got "font-size: var(--font-size-fluid-3)."

[00:15:23] Brittney: And you can actually see, right there on your <h1>, that the class has been hashed. So that's the other cool thing about SvelteKit, is each component has their own scoped classes. So we just used the "h1" selector—

[00:15:36] Ben: Ohhh!

[00:15:36] Brittney: —but that "h1" is not gonna bleed out of that component. It's gonna be only in that component that those styles are gonna be applied.

[00:15:43] Ben: Got it, so if I had had, like, an <h1> here — and you shouldn't have multiple <h1>s on a page. This is a sin, and I will type that out.

[00:15:49] Brittney: Just a test.

[00:15:51] Ben: This is a sin.

[00:15:52] [Brittney laughs]

[00:15:54] Despite the fact that, like, I had put just "h1" in my styles, those styles applied very specifically to this <h1> and not to all <h1>s. So that's very cool.

[00:16:06] Brittney: Yeah!

[00:16:10] Okay, so now we have Open Props working. The other thing that we would probably want to do is to create some sort of global style. So you can do global styles in this <style> tag, but it's much easier to do it in a style… like, a CSS file.

[00:16:28] Ben: Okay.

[00:16:28] Brittney: Because if you do it in the <style> tag, you have to explicitly tell Svelte that you want it to go global because it does that scoped styling. So we could create a new "styles" folder somewhere in our file explorer there.

[00:16:42] Ben: Okay! Where do you like to put this, typically?

[00:16:45] Brittney: So, the convention in Svelte is to have a "lib" folder. So "src," we need to create a new folder called "lib."

[00:16:52] Ben: Like, inside "src."

[00:16:53] Brittney: Inside "src," yep. L-I-B, "lib" folder. And then inside of that, we can just create a styles.css file.

[00:17:05] Yes, Zach, that is actually exactly right. That ":global()," and then inside of those parentheses is where you would put whatever you wanted to style globally. But I kind of… That's how you would do it if you were doing it in the <style> tag.

[00:17:19] Ben: Mmm.

[00:17:19] Brittney: But in here we can style everything that we want to, and then import it in and it will just be global. So let's use the "body" tag. And do "font-family." And I think we'll use Noto Sans.

[00:17:39] Ben: Ooh, I wonder if I have Noto Sans.

[00:17:42] Brittney: Open Props provides it.

[00:17:43] Ben: Oohhh, okay!

[00:17:46] Brittney: So I want to see, did it change over in the browser for you?

[00:17:50] Ben: Not yet. We haven't done anything with the stylesheet yet, I think. We haven't, like, imported it.

[00:17:56] Brittney: Oh, yeah, that's right. So, okay, in layout.svelte, let's import that and make sure that it's working.

[00:18:01] Ben: Okay.

[00:18:01] Brittney: So we need a <script> tag.

[00:18:04] Ben: Ahh, okay.

[00:18:06] Brittney: I don't know if it would work like that. You could try to do that. Try that real quick and see if that works. I don't think you're gonna be able to use — you're gonna have to do some absolute-pathing, 'cause you can't use the alias.

[00:18:18] Ben: Let's not, then. So, okay., where in here do you typically put your <script> tag?

[00:18:22] Brittney: I put mine at the top most of the time. Like, it's where the logic for the things usually lives.

[00:18:31] And we'll import. And… so, SvelteKit provides, out of the box for you, some default aliases, and aliases are things where you can reference a path without having to go to it absolutely. So by default, it's a dollar sign. I usually change mine to @s, but we won't go through all the config for that today.

[00:18:54] Ben: Sure.

[00:18:54] Brittney: So the "$lib" and "/styles.svelte" — or "styles.css," sorry.

[00:19:01] Ben: Okay! And now… there we go!

[00:19:04] Brittney: Is it working?

[00:19:05] Ben: It's working!

[00:19:06] Brittney: Yaaay! Okay, perfect. So, that's where we would put all of our global styles if we were gonna go through all that. I just wanted to see if we could get the fonts in there. So we have Noto Sans installed globally in our styles.css file, we have Open Props imported in a <style> tag, and then on our index file, we're just showing an <h1>.

[00:19:27] Let's start building out some components. So if you were building out a component library, what are some things you might want to create?

[00:19:36] Ben: Always buttons.

[00:19:38] Brittney: Always buttons?

[00:19:38] Ben: Always buttons. Everything is a fancy button.

[00:19:43] Brittney: Alright, so we will do a button first. I want to create something that will kind of go together—

[00:19:50] Ben: Okay!

[00:19:50] Brittney: —but we do have a button in here. So in that "lib" folder, let's create a "components" directory.

[00:19:57] Ben: You got it!

[00:20:02] Brittney: And then we'll create a new file and you can name it "button.svelte." You can do whatever convention you want with capitalization. Yup, perfect. And so in here, I want to start out, just do a normal button.

[00:20:17] Ben: I guess, yeah.

[00:20:19] Brittney: And this is what I love about Svelte, is that it's just HTML. And so inside of the <button>, we're gonna do a <slot> because that's where we want to put our children. And that's it, really…

[00:20:36] Ben: Okay!

[00:20:37] Brittney: I mean, that is a button component, but we probably want our button component to have some props, right?

[00:20:42] Ben: Yeah!

[00:20:43] Brittney: So, what is a button component if it can't do anything? So in a <script> tag, we will give it some properties that our button could have.

[00:20:56] Ben: Sounds good! So that would be… like, it would have, like, an onclick, right?

[00:21:00] Brittney: So, yes, it would have an onclick. You don't have to do that in the <script> tag, though. I will show you that in just a minute.

[00:21:10] Ben: Okay!

[00:21:10] Brittney: So, some properties that we might want to give a button component are, like, a variant maybe.

[00:21:15] Ben: Mmmm!

[00:21:15] Brittney: So we could do a variant. We could give it a type. We could give it… what are some other things that we would put on a button?

[00:21:24] Ben: "Disabled" is another one.

[00:21:26] Brittney: Yeah, so we could do those props. So we would just declare these like you're in JavaScript, so "let variant = 'default'."

[00:21:39] Ben: Okay?

[00:21:40] Brittney: Okay. And then "let disabled = false."

[00:21:46] Let's just go with those for right now. And then we need to export these. So this is the concept of props in Svelte. If they are just let-declared variables, they are internal to the component. But to access them from the outside world, you need to export them, which kind of follows that module syntax. So we need "export," and then you can open some curly braces. And you can also do this in front of the "let," but this is how I like to do it when you have multiple properties.

[00:22:14] Yep! So we have that. And then on our button, in the markup, we actually need to add these things. So the onclick is gonna go here but in Svelte, it's "on:click."

[00:22:28] Ben: Okay.

[00:22:30] Brittney: Okay, and then we do an open curly bracket for each of those properties.

[00:22:36] Ben: Oh, I see. Like this, and then "variant"…

[00:22:41] Brittney: Yep.

[00:22:41] Ben: And then "disabled."

[00:22:43] Brittney: Yes.

[00:22:44] Ben: So… wait, so, is this just gonna say, like, variant="default"? Like, it's just gonna put, like, a "variant" attribute on here? Or do we need to do something fancier to, like, say it's a class or a data attribute or something?

[00:22:58] Brittney: We would need to specify if we wanted it to be a class attribute. What that's going to do is give it a property, a "variant" property, so we could specify — and if we're using this component, we would basically pass variant equal to "primary," or variant equal to…

[00:23:13] Ben: Mm!

[00:23:13] Brittney: So we would need to pass something else to it. But if we wanted it to be a class, we would say, like, class is equal to variant.

[00:23:23] Ben: Got it. 'Cause yeah, I'm struggling to figure out, like, when this turns into markup, like, what happens to variant here? Like, "disabled" seems fairly intuitive to me, like the "disabled" attribute would be set to the value of "disabled" here. But this would be, like, variant="default", is what that would do, right?

[00:23:42] Brittney: Yeah, and so you would need some styles that would go with that default button. So…

[00:23:50] I didn't think about how to do this. We shouldn't have started with this component!

[00:23:53] Ben: Oh, no! Oh, no!

[00:23:54] Brittney: That's okay! So…

[00:24:00] Yeah, I'm completely lost right now.

[00:24:02] Ben: Do we want to start with a different component? Would that be a better place to start, perhaps?

[00:24:09] Brittney: So I think if you do the class, you can… Trying to remember how that goes! Put, in front of variant, put class, colon.

[00:24:21] Ben: Like this?

[00:24:23] Brittney: Yeah, and take the curly braces off. That's how we do it.

[00:24:28] Ben: Okay.

[00:24:29] Brittney: And then in a <style> tag at the bottom. I just… that put me on the spot, 'cause I was like, I was not prepared for that.

[00:24:39] Ben: I'm sorry!

[00:24:40] Brittney: I think this is right. So if you do ".default" now, like you're styling the "default" class…

[00:24:47] Ben: Yeah.

[00:24:47] Brittney: Oh, it's gonna yell at you, 'cause you don't have…

[00:24:54] Oh, 'cause you don't have anything inside of it right now. So let's just do "background-color," and let's use… "var(--teal-9)."

[00:25:11] Is it still yelling at…? "Unused CSS property." Okay, so instead of "variant," let's just call it "default."

[00:25:21] Ben: Like… oh, I'm sorry, here?

[00:25:24] Brittney: "default" there, and then put equal to "variant."

[00:25:31] Ben: Equal…

[00:25:32] Brittney: In curly braces.

[00:25:33] Ben: Okay.

[00:25:37] Well, that seems to have solved this error! Okay!

[00:25:41] Brittney: Okay. Let's go over to index.svelte and see if we can import our button and see if we can use it.

[00:25:47] Ben: Okay, so I first have to open up a <script> tag, I'm guessing, to import my…?

[00:25:52] Brittney: Correct, yep!

[00:25:53] Ben: Okay.

[00:25:54] Brittney: So "import button from," and we'll do "$lib/components/button.svelte." And you do have to put the ".svelte" on it.

[00:26:06] Ben: Okay. And then here, let's do… It's probably capital-B "Button" in this case, and then…

[00:26:16] Brittney: Yes, it is. And then you can put some text in there. Since we put that <slot> in there and it's gonna… Yep.

[00:26:23] Ben: Alright. Let's see…

[00:26:23] Brittney: Let's see if that worked.

[00:26:25] Ben: Heyyy! Okay, cool.

[00:26:27] Brittney: We got it??

[00:26:28] Ben: We got a teal button.

[00:26:28] Brittney: It's not a very pretty button—

[00:26:30] Ben: Sure.

[00:26:30] Brittney: —but it's a button. Okay, let's move on from button for a minute before I freak out!

[00:26:35] Ben: No worries. Sorry for putting you on the spot like that.

[00:26:38] Brittney: Oh, absolutely not. A button should have been, like, the first thing that came to my mind, but I was creating this, like, thing in my head that I wanted to go through.

[00:26:45] Ben: Oh, I'm sorry!

[00:26:46] Brittney: Let's create a card component. It's something that I think—

[00:26:50] Ben: Mmm!

[00:26:50] Brittney: —like, had, like, pieces in it that people like to do.

[00:26:53] So let's do card.svelte, yep. And then in here, we're going to group a couple of things.

[00:27:01] Ben: Okay!

[00:27:01] Brittney: We're going to group a… so we could just do a <div>, because it doesn't really have any semantic meaning. It doesn't need anything on it. And inside of this <div>, we're actually going to create two slots, but we're gonna learn something else here. So we're gonna create a slot with a name — a named slot.

[00:27:20] Ben: Okay.

[00:27:21] Brittney: So the first <slot> is gonna have name="title". And the second <slot> is going to have name="content".

[00:27:33] Ben: Alright.

[00:27:34] Brittney: This allows you to put separate children in their place. So now we're gonna have a space for title. And what this allows us to do is extract the markup. So we're not specifying if it's an <h2>, an <h3>, a paragraph, whatever it is, inside the child. The child doesn't need to know about it.

[00:27:52] Ben: Mm.

[00:27:52] Brittney: Or inside the component, the component doesn't need to know about it. But here we can take it out of context and we could put whatever markup we need—

[00:28:01] Ben: Mmm.

[00:28:01] Brittney: —around that <slot>.

[00:28:03] Ben: Okay.

[00:28:04] Brittney: So we have the <slot>, and then… that's it for the card component. That's all it really needs right now.

[00:28:14] Ben: Sounds good.

[00:28:14] Brittney: Next, I wanna create a checkbox component.

[00:28:21] Ben: Nope, not ".component." ".svelte." There we go!

[00:28:27] Brittney: Alright, so in the checkbox component, we're going to wrap a <label> around it. I mean, that was fine. But you have a <label>, and then we're gonna do <input type="checkbox" />. And after the <label>, we'll just do the <slot>. Exactly. You got the hang of this.

[00:28:48] Ben: Alright!

[00:28:49] Brittney: So, we need some properties on the checkbox, though.

[00:28:53] Ben: Yes.

[00:28:53] Brittney: So we're gonna create that <script> tag.

[00:29:01] And in the <script> tag, we want to have an ID, probably.

[00:29:05] Ben: Okay, so "let id."

[00:29:08] Brittney: So in Svelte, you can do null, if you want something to be optional. But we probably don't want ID to be optional, so I want there to be kind of some default there. So I would just probably use "checkbox" — a string of "checkbox" — as a default…

[00:29:23] Ben: Okay.

[00:29:23] Brittney: …so that there is an ID on it. And then we need a "checked" variable, which is a boolean, and we're just gonna set that to false by default.

[00:29:35] Ben: Sounds good!

[00:29:36] Brittney: And then we need to export those so that they're available outside.

[00:29:41] Ben: Sounds good!

[00:29:43] Brittney: Okay! And then we need to add those onto our input. So we need… yep, "checked," and we probably want an "aria-checked={checked}" also.

[00:29:54] Ben: I think if you're using the native checkbox, just using the "checked" attribute is sufficient.

[00:30:00] Brittney: Will that work?

[00:30:01] Ben: Yeah, yeah.

[00:30:01] Brittney: So, we also need two other things. So we need an onchange, so space, "on:change."

[00:30:09] Ben: Ooh, hello. My emoji keyboard was kicking in there. Alright, let me shut down Rocket.

[00:30:14] Brittney: And we need one more piece of Svelte magic here. We need a "bind:checked."

[00:30:21] Ben: Bind…

[00:30:21] Brittney: And what this is gonna do is bind the value of "checked." And you don't need the equals quotes. Yep, just that. And so it's binding it to the value of "checked," which is a boolean which is gonna flip. And then we'll also bind it in another component in just a minute. So this is our checkbox component,

[00:30:42] Ben: It's giving me a little red thing that says, "Attributes need to be unique." Do I just need to nuke the "{checked}" here?

[00:30:49] Brittney: Oh, yeah, "{checked}" doesn't need to be there, sorry.

[00:30:52] Ben: Yeah.

[00:30:52] Brittney: See, sometimes the linting is very nice.

[00:30:55] Ben: Yeah! Like, you mentioned the dev tooling and, like, I see it. Very cool.

[00:31:02] So this says we've got an input with type "checkbox" that's going to use the ID from the script, which is possibly more or less a prop that could be passed down from the consumer.

[00:31:11] Brittney: Exactly.

[00:31:12] Ben: It's gonna have a change behavior, and it's got a value of… like, it's got an attribute of "checked," which is set to this "checked," but the bind means that anytime this attribute changes, it changes in our script as well?

[00:31:27] Brittney: Yes, so it's gonna bind that value of "checked." So if it's false, it's gonna bind the value. And then wherever we use the component, we're going to bind the variable we want—

[00:31:38] Ben: Got it.

[00:31:38] Brittney: —to that false/true flip.

[00:31:41] So we're gonna create something that we can use the card component and the checkbox component together, which is a todo list.

[00:31:48] Ben: Okay!

[00:31:49] Brittney: Like, obvious, like, first thing for… I mean, it's not really a component library thing. But let's create a todos.svelte component just so we can see how we use these components together.

[00:32:01] Ben: You got it!

[00:32:04] Brittney: Okay, so todos.svelte. We've got to import our card and our checkbox.

[00:32:12] Ben: "import card from" — look at that! "components…"

[00:32:19] Brittney: Or it's in the same…

[00:32:20] Ben: Ohhhh!

[00:32:21] Brittney: …file, so it might be easier for you to just do like that. Yeah, there you go.

[00:32:26] Ben: Okay. I like that a lot better, yep!

[00:32:34] Brittney: Alright. So, for right now, we'll leave the <script> tag alone and go down to the markup. So we need to start using that card component. We created the card component with a <slot>. So we already have an <h1> on our page, so let's do it with an <h2>. So we need to open the card like a component.

[00:32:53] Ben: Mm.

[00:32:54] Brittney: Yep. And then an <h2>, and give the <h2> an attribute of "name" — or, I'm sorry, of slot="title".

[00:33:02] Ben: Ah, okay!

[00:33:03] Brittney: So we're telling it to use the slot "title." And then we can do a "Done" — or a "Todo" column. I'm sorry, I was looking at the…

[00:33:14] So, "Todo." And then do a "content" block.

[00:33:20] Ben: Okay, so what does that look like again?

[00:33:23] Brittney: What would we do for a list of todos? I mean, we're gonna need a <ul>.

[00:33:28] Ben: Mhmm.

[00:33:29] Brittney: And then our <ul> is actually going to be the slot="content". And then we're going to loop over some todos.

[00:33:41] Ben: Got it. Cool.

[00:33:44] Brittney: Yeah. So do you want to create the todos first or do you want to do the block first?

[00:33:50] Ben: Let's… create the todos, I think.

[00:33:56] Brittney: Okay! Yeah, let's just create some initial todos. Up in that script block, let's go and just say "let todos =". And we're gonna do an array, and inside of the array, let's do some objects so we can give them some values.

[00:34:12] Ben: Okay!

[00:34:13] Brittney: So, like, an "isDone" or…

[00:34:19] And we'll set them to false. And then some "text" or "name" or…

[00:34:23] Ben: Yeahhh.

[00:34:24] Brittney: You name it however you want. "Do the stream."

[00:34:31] Ben: "Greet the chat." Got to do that blatant pandering! How's the chat doing? How's everyone feeling today?

[00:34:39] And then… "Continue to do the stream." There we go.

[00:34:46] Brittney: Okay, awesome. So we have some initial todos here. Awesome.

[00:34:50] Tired today — oh, no!

[00:34:53] Okay, so now we are going to go back down into our markup and where that <ul> is, inside of the <ul> we're going to do what's called an "each" block. And this is some templating sugar syntax that Svelte gives us.

[00:35:04] Ben: Okay.

[00:35:04] Brittney: So inside of curly brackets, we'll do pound or hashtag.

[00:35:10] Ben: Ooh.

[00:35:10] Brittney: Depends on what generation you're from.

[00:35:11] Ben: Ooh!!!

[00:35:13] Brittney: "#each as" — yeah! So, "#each todos."

[00:35:17] Ben: "#each todos as todo"? Like this?

[00:35:20] Brittney: Exactly!

[00:35:21] Ben: Okay.

[00:35:22] Brittney: That was pretty intuitive, right!

[00:35:24] Ben: Okay! Alright!

[00:35:25] Brittney: So, "#each todos as todo." And then we're going to, inside of here, use an <li> to get our list item.

[00:35:33] Ben: And then…

[00:35:36] Brittney: And we can just do "todo.text" in curly braces.

[00:35:46] Ben: Alright.

[00:35:47] Brittney: Is that showing up?

[00:35:49] Ben: Let's… Oh, I don't think we've actually used our…

[00:35:52] Brittney: Oh, we haven't imported it. Okay, so in index.svelte, let's import the todos.

[00:36:03] Ben: And then… we're just gonna do this. And then I don't think I need to do anything in here, so it can be, like, self-closing?

[00:36:13] Brittney: It can be some closing, yes.

[00:36:15] Ben: Okay. Heyyyy!

[00:36:17] Brittney: Sweet. Okay, so we have each list item going through there. Okay, so let's go back over to todos and finish this out. So, we are going to create another column. So underneath the <Card>, do another <Card>. You can copy that whole block if you want.

[00:36:37] Ben: Alright. Oh, and this is for the done ones, right?

[00:36:41] Brittney: And we're gonna do a "Done" column, so do "Done" instead of "Todos" there, yep. And then what we need to do to get these correct is to filter that list.

[00:36:53] Ben: Mmm!

[00:36:54] Brittney: So in that first "each" block "todos," we're going to change that to "todos.filter()."

[00:37:03] Ben: Okay, and that's up here? You said, like, this one up here?

[00:37:07] Brittney: In the top one, yeah. We're gonna filter both of them, but we're just going to do the opposite in the other one. So filter, todo, and then an arrow function.

[00:37:16] Ben: Mmmm. And then it's going to be, like, "!todo.isDone."

[00:37:21] Brittney: Yeah, exactly. "isDone."

[00:37:22] Ben: And then here…

[00:37:24] Brittney: Exactly!

[00:37:25] Ben: This is basically just letting me use JavaScript in HTML. Love it!

[00:37:31] Brittney: It is, exactly. And that's one of the nice little things about the Svelte syntax, that it lets you kind of just do these things.

[00:37:39] Okay, so we have the filtered blocks and we have that. We need to actually use our checkbox now. So we imported the checkbox, correct?

[00:37:48] Ben: Yes, we have it up top.

[00:37:50] Brittney: Okay, so in that list item, we can actually wrap "todo.text" in the <Checkbox>.

[00:37:55] Ben: Okay. I'm gonna break these down to new lines.

[00:37:58] Brittney: Yeah, absolutely.

[00:38:00] Ben: <Checkbox>…

[00:38:03] Bring you up. And then is there anything else we need to do to make this sufficient?

[00:38:09] Brittney: Yeah! So on <Checkbox>, we need to bind "checked" — so we're passing these properties again — to "todo.isDone." So "bind:checked" equal, and then curly braces, to "todo.isDone."

[00:38:31] Ben: Okay.

[00:38:31] Brittney: And then we'll give it an ID of todo.id.

[00:38:34] Ben: We need to add that…

[00:38:37] Brittney: We don't have an ID, so what we can do is you can do a comma after "todo" in the "each" block.

[00:38:45] Ben: A comma after… oh… oh! Okay.

[00:38:48] Brittney: Oh, not there, I'm sorry. That's that's inside the function.

[00:38:51] Ben: Ohh.

[00:38:51] Brittney: In the last "todo" there, where you're calling… yeah. And then an "index," and then you could use the index as the ID there.

[00:38:59] Ben: Very cool! I feel like if this were a React tutorial, like, someone would be yelling at me, like, "Don't do this. Don't make the, like, index your key."

[00:39:10] Brittney: And I believe you can actually even call it "id." I think Svelte just automatically creates it as an index, even if it's not named an "index."

[00:39:19] Ben: Oh, okay. So, wait, like I can just do… Sorry, so I could say…?

[00:39:25] Brittney: Instead of "index" up top, like, you could say "id" and then just use it as an ID.

[00:39:34] Ben: Okay, like this?

[00:39:37] Brittney: You had in`dex there before.

[00:39:39] Ben: Oh, I see.

[00:39:40] Brittney: You still have to have "id" there — like, comma, id.

[00:39:44] Ben: Oh, okay! Here.

[00:39:45] Brittney: Yeah.

[00:39:46] Ben: So this is what you're saying, I think.

[00:39:48] Brittney: Yes, that is. I'm so sorry. Sometimes it's so hard. And you have to put that in curly braces though, because it's JavaScript.

[00:39:55] Ben: Ohhhhhh! Yeah, yeah, yeah. Okay! We're good! I think we got there. Yeah.

[00:39:59] Brittney: I think we got there.

[00:40:00] Ben: Talking through code syntax is a challenge. There's an added challenge, which is transcribing code syntax in closed captions. I have not figured that out yet.

[00:40:13] Brittney: Oh, I bet. That's difficult.

[00:40:14] So, grab that entire <Checkbox> thing and copy it, and we'll kind of paste it down below and just change it for our other "each" block. It might be easier.

[00:40:24] Ben: Yeah. And then here, gotta do "id." Cool.

[00:40:29] Brittney: Okay, and so we just need… Okay, these are all still called "todo." That's probably fine. I renamed all of these to "done." I don't know if that's more intuitive for you.

[00:40:40] Ben: Okay, so here and here and here, I think.

[00:40:44] Brittney: Yeah. Awesome. Okay, yeah. So "done." And then what else? What do we have on our screen?

[00:40:56] Ben: Let's find out! So there's… currently nothing's done, but when I do this… Heyyyy! Okay! Very cool.

[00:41:04] Brittney: So it is functioning. Awesome. Okay.

[00:41:11] So let's see. I don't think we need to do anything else in the todo component for now, unless we wanted to style it or make it, like, prettier or anything. But what we can do now is talk about animations for a second.

[00:41:24] Ben: Okay!

[00:41:24] Brittney: Because this is one of the things that comes out of the box with SvelteKit that a lot of frameworks don't provide that I love. So in this todo component, we're going to import, at the top in the <script> tag, "flip" from "svelte/animate." So it's in curly braces.

[00:41:41] Ben: Okay, got it. Named import from…

[00:41:44] Brittney: Yeah.

[00:41:46] Ben: … then "svelte."

[00:41:47] Brittney: "svelte," forward slash, "animate." That is a forward slash, I think, yeah.

[00:41:52] Ben: Okay, yeah. It seems to have picked that up.

[00:41:54] Brittney: There we go. Okay, so in… the <li> element is what we want to use this on. We're gonna say "animate:flip." And it's gonna give you some warnings, but we're gonna copy that and we're gonna paste it on the other <li>, and then we'll talk about the warning.

[00:42:11] Ben: Alright!

[00:42:16] Yeah. Oh. Yeah. Big ol' nasty error.

[00:42:22] Brittney: Big ol' messy error.

[00:42:23] Ben: "An element that uses the animate directive must be the immediate child of a keyed each block."

[00:42:29] Brittney: So that means that our "each" block actually needs to be keyed with a specific ID so that Svelte knows what you're wanting to flip.

[00:42:38] Ben: Mmm.

[00:42:39] Brittney: So instead of the ID that we just spent all that time trying to figure out how to do, we're going to erase the comma and the ID. And in parentheses…

[00:42:53] Ben: Like this?

[00:42:55] Brittney: Yes. We're going to put an "id." And I think we're going to have to add it to our todos.

[00:43:05] Ben: Okay.

[00:43:05] Brittney: So each todo's actually going to have to have an explicit ID for this to work, because Svelte needs to know and not just be an index.

[00:43:15] Ben: Gotcha. Okay.

[00:43:17] Brittney: So now we're gonna use "todo.id" there.

[00:43:21] Ben: Alright.

[00:43:22] Brittney: And you can copy that parentheses block and then do it down on the other one and say "done."

[00:43:28] Ben: Mm.

[00:43:29] Brittney: ".id." There we go! And now…

[00:43:35] Ben: It is not thrilled about the…

[00:43:38] Brittney: Because we're just using… so we're in an "each" block, so we need to say, "todo.id" because it's an object.

[00:43:47] Ben: Got it.

[00:43:47] Brittney: Before, we were actually explicitly calling it "id."

[00:43:51] Ben: Mhmm.

[00:43:51] Brittney: And we changed that, so now it's mad. "id" is equal.

[00:43:57] Ben: Equal! That would make sense. That is how HTML works.

[00:44:01] Brittney: And then that one's just gonna be "done.id."

[00:44:06] Ben: Yes.

[00:44:07] Brittney: Maybe we shouldn't have renamed that.

[00:44:09] Ben: You're good.

[00:44:10] Brittney: I messed that up!

[00:44:11] Ben: Okay.

[00:44:11] Brittney: So now we should see, like, a little bit of an animation.

[00:44:15] Ben: Yeah! And it's…

[00:44:17] Brittney: It may not be great on stream, but it's kind of animating there. But we're gonna give it another level of, like, awesome animation. So we're gonna import another thing into the todo file.

[00:44:31] Ben: Okay!

[00:44:33] Brittney: At the very top, we're going to import — open up some curly braces — "crossfade" — C-R-O-S-S-F-A-D-E — and "fade" from "svelte/transition."

[00:44:56] Ben: Alright.

[00:44:57] Brittney: And then we actually need to use this because this "crossfade" is a function, so we need to create a new function, below "Checkbox" there somewhere. A "const," and we're going to pull out, in array brackets, "send" and "receive." So we're essentially telling it what is going where. So you're giving it some points. And then we use "crossfade," and it's a function with an object.

[00:45:31] Ben: Ooh.

[00:45:31] Brittney: And then inside of that, we're gonna say "fallback: fade," and we're gonna use the "fade" transition from Svelte as a fallback if "crossfade" doesn't work. So down in our markup, in the <li>, next to "animate:flip."

[00:45:53] Ben: Yep.

[00:45:54] Brittney: We're gonna do a space and say "in:receive."

[00:46:02] Ben: "receive" — Ah, yes, this makes sense, okay.

[00:46:02] Brittney: "receive," and we're gonna say equal to, and you need two sets of curly braces because we're doing an object inside of the JavaScript.

[00:46:10] Ben: Mm.

[00:46:10] Brittney: And it's "key:." And that one's going to be "todo.id." So we're giving it the ID in the key. And then we need to do an "out:send."

[00:46:25] Ben: Wait. Oh, like out here as an attribute. "out:send."

[00:46:29] Brittney: Yep. And you need to do the same thing, so "key: todo.id." And then we'll copy that and we'll put that down on the other one.

[00:46:41] Ben: Makes sense.

[00:46:44] There we go. This needs an equals. And now… come down here. I'm just gonna… paste this in. This needs to be "done" on both of these.

[00:47:01] Brittney: That's going to be "done." And let's see what that animation looks like.

[00:47:07] Ben: Alright.

[00:47:09] Ooh! It actually, like, flies there!

[00:47:12] Brittney: It does. It, like, actually tracks the movement a bit.

[00:47:17] Ben: That's awesome. So cool how easy that is to do. Like, animation's such a, like, pain point, I think of webdev.

[00:47:24] Brittney: In component frameworks, yeah! And Svelte just kind of gives it to you out of the box and makes it really easy. Like, the sugar syntax in Svelte is really what drew me to it.

[00:47:33] Ben: Mm!

[00:47:34] Brittney: Because I love writing in that near-traditional markup, but having those easy things that you don't have to create all this boilerplate code for… there's just, like, such few things that you really have to figure out.

[00:47:47] Ben: Yeah! And this comes back to Svelte's origins which — correct me if I'm wrong — Rich Harris created for… like, basically, like, for the New York Times where he was creating, like, interactive articles and dynamic things.

[00:48:02] Brittney: Exactly.

[00:48:04] Ben: Like, animation is absolutely a part of, like, the journalistic storytelling process of that.

[00:48:12] Brittney: It is, exactly.

[00:48:13] Ben: So it's very cool to see, like, how his needs translated into primitives that are just baked into the language as easily as that.

[00:48:22] Brittney: Yeah! And I do want to try one more thing.

[00:48:24] Ben: Yeah!

[00:48:24] Brittney: So on that button, I wanna see if we can pass a "style" prop to it. We're gonna see if this works.

[00:48:31] Ben: Okay.

[00:48:31] Brittney: So, in index.svelte, actually, on the <Button> component, do a space and do dash dash. I don't think you even need to do the "style" tag.

[00:48:44] Ben: Ohh.

[00:48:45] Brittney: What did we call…? Is it background color?

[00:48:51] Ben: Yes.

[00:48:54] Brittney: So…

[00:48:54] Ben: Do we need…?

[00:48:57] Brittney: But wait, we're using… what are we using? We don't have a thing set up for that. So can we add a ":root" element there in the <style> tag and create a new variable?

[00:49:08] Ben: Yes, we sure can!

[00:49:10] Brittney: So ":root," and then we're gonna create a variable, dash-dash… yeah. Just

[00:49:15] Ben: "background-color," yeah.

[00:49:17] Brittney: Yeah, and then use that there.

[00:49:20] Ben: Okay, and… yeah, probably… I'm just gonna use the teal as a default there, and then this is—

[00:49:26] Brittney: Yeah! That's a great idea.

[00:49:28] Ben: "var(--background-color)," okay.

[00:49:31] Brittney: Okay, now back in index.svelte, we can pass "--background-color" equal to…

[00:49:40] Ben: Equal to, and let me give it a…

[00:49:42] Brittney: Different color.

[00:49:44] Ben: There we go! I happen to have a keyboard shortcut for my purple.

[00:49:51] Brittney: That is awesome! I need to do that! And it worked!

[00:49:54] Ben: It worked!

[00:49:54] Brittney: We can actually do a "color: white" on there or something so it's accessible.

[00:49:58] Ben: Yeah, accessibility? What's that? Yeah. "color: white."

[00:50:06] Brittney: We got Salma in the chat!

[00:50:10] Ben: Salma, hello! Welcome, welcome to the chat!

[00:50:12] Brittney: We got some Sveltey goodness going on.

[00:50:16] Ben: Yes! Yes, yes, yes.

[00:50:17] Brittney: Svelte transitions.

[00:50:19] Ben: Yeah! Yeah. We made boxes fly around, which is incredibly cool. Like, the fact is, if I were to do this in React, I would have had to install, like, three different libraries to make this work.

[00:50:31] Brittney: And you did zero libraries!

[00:50:33] Ben: Yeah!

[00:50:34] Brittney: Zero!

[00:50:35] Ben: Yeah! 'Cause this is all, like, baked into Svelte itself.

[00:50:38] Brittney: Yeah!

[00:50:39] Ben: Awesome.

[00:50:40] Salma said, "I tried to use Svelte with TypeScript back in summer 2020, and didn't have a good time. I think things have improved since then." We opted to not use TypeScript for this stream because that just seemed like another obstacle to learning today!

[00:50:55] Brittney: TypeScript is always an obstacle to learning for me in general, so you don't want to see me mess with TypeScript at all, but it is much more baked into the program now. Svelte is written in TypeScript and they have moved from being to where TypeScript was kind of second nature to it being integrated into the platform, so I think you would have more of a fun time with it in SvelteKit now. Hopefully. Fingers crossed. And if you don't, jump in the Svelte Discord because they will help you.

[00:51:24] Ben: Yeah. Yeah, and Lindsay seems to be vouching for better Svelte TypeScript support. So, yeah! Yeah, and, like, this is not at all a diss on TypeScript, I think. It's just that, like, I don't know, especially for, like, one hour of, like, learning about a thing, like, the last thing you want is to be finagling with, like, an extra layer of syntax. Again, if this were, like, a production project, like totally, totally on board with TypeScript.

[00:51:54] Brittney: Exactly.

[00:51:54] Ben: Just not for streams.

[00:51:55] Brittney: And I do get the value of TypeScript in the production setting and, like, it helps the consumers of your component library to see what they need to use on it. I love the value that it adds there. It's just, I am still learning. I'm not great with it!

[00:52:12] Ben: Mhmm.

[00:52:13] Yeah! So, we're getting near to the end. Was there anything else you wanted to show off? Anything you wanted to add to our little component library here?

[00:52:24] Brittney: No, I just wanted to see if the style props would work, and we were able to pass that in, which is kind of cool. We showed the class, where we did that "class:{default}" on the button. We showed that you can do, like, dynamic classes there.

[00:52:38] Ben: Yeah!

[00:52:38] Brittney: We showed animations. We showed how to pass props.

[00:52:43] Ben: The fact that you can just straight up put the… let's see. I'll go back to the index. The fact that you can just straight up put the CSS, custom properties, like, on the element itself, that's just incredibly cool! Like, React makes working with custom properties a pain point, I think, and so it's neat to see that, you know, this makes using that API even easier than it is for vanilla HTML, which is a huge plus.

[00:53:21] Brittney: And I think that's the power of Svelte, too, is that it makes vanilla — it feels like vanilla HTML, but then you have this power with it.

[00:53:29] Ben: Mhmm.

[00:53:29] Brittney: And it's, like, right at your fingertips. You don't have to go and figure a ton of boilerplate out, which I just, I love.

[00:53:37] Ben: Absolutely. Alright, so, you know, this has been a very brief introduction to the Svelte world. Where might someone go if they were looking to learn more?

[00:53:48] Brittney: Okay, so they have a fantastic tutorial on svelte.dev — which is probably one of the best on the web, in my opinion — that walks you through, step by step, this Svelte syntax. And they have a Svelte REPL. So that right on the top bar there, you've got the tutorial, and then you've got the REPL also. And the tutorial will walk you through, in the REPL, like, each syntax thing.

[00:54:12] Ben: Mmmm!

[00:54:13] Brittney: Which I think is just a great place for everyone to go and get started. I am working on an intro to Svelte course that will hopefully be coming out soon, but it's not out right now. But the REPL is a place that you can play around with code and see what works and what doesn't. Yeah!

[00:54:31] Ben: Good deal! And so people who are interested in learning more about that course, I'm guessing they can follow you on Twitter for all of those updates.

[00:54:39] Brittney: Absolutely!

[00:54:41] Ben: And then there's one other place that I think we should shout out, like, learning for Svelte, which is Svelte Sirens. Can you talk about, like, what that is and stuff like that?

[00:54:51] Brittney: Absolutely. My marketing is terrible, apparently! So Svelte Sirens is a Svelte society for women, nonbinary people, and we say allies. So if you are friends welcoming to those types of people, you follow our code of conduct, you are welcome at all of our events. You're welcome in our Discord. We shared the Svelte Discord, so inside the Svelte Discord, underneath the community part, you will find Svelte Society. And under that, we have a Svelte Sirens chat where we hang out. And you can get there through… there's a link on svelte.dev. svelte.dev/chat will take you straight to the Discord.

[00:55:30] Ben: Ah, okay. I will do that. svelt.dev/chat. Okay!

[00:55:36] Brittney: Yes. And hopefully that will work.

[00:55:38] Ben: Yes.

[00:55:38] Brittney: And so Svelte Sirens, we do a monthly talk where we have a guest speaker come on and they do a formal kind of meetup talk where it's prerecorded video content. Q&A after.

[00:55:50] I have been doing livestreams every two weeks where I bring on a guest, similar to this stream, how we sit down and we integrate some new technology with SvelteKit.

[00:56:01] Ben: Where can folks find those streams?

[00:56:03] Brittney: So those streams are both… actually the talks and the streams are available on the Svelte Society YouTube channel. So you could get there if you wanted to go to Events or Talks on our route, we show the talks are listed there, and that will take you to the YouTube channel if you click through to.

[00:56:24] Ben: I probably won't because that might start blaring, perhaps.

[00:56:28] Brittney: Oh, yeah!

[00:56:32] Ben: Okay, it won't. But yeah, okay, gotcha. Cool. So, go check out those videos. Go check out Brittney's streams.

[00:56:39] Brittney, it's been wonderful having you on. Thank you so much for being my introduction to Svelte. I really do appreciate that.

[00:56:46] Brittney: Awesome! Yeah! If anybody has questions, reach out. I mean, my DMs are open. I'm around on Discord all the time. So if you have questions about Svelte, I'd love to help you or point you in the right direction of someone that can help you.

[00:56:59] Ben: Alright! Yeah, so this has been Some Antics. We've had Brittney on. Stick around, chat. We're going to find someone to raid. Also, you know, if you're following people on Twitter, you might as well follow Some Antics on Twitter. After all, that's where all the best updates are. Recordings of the stream go there. Announcements of upcoming streams go there. Go follow and get those updates. And y'all, just have a fantastic rest of your Tuesday. Thank you so much for being here.

[00:57:25] Brittney: Thanks, everyone!

[00:57:30] Ben: Bye, y'all!