1 00:00:22,040 --> 00:00:27,360 Speaker 1: Hello everyone, welcome to another episode of Svelte Radio. I'm joined this time by my 2 00:00:27,580 --> 00:00:29,740 Speaker 1: beautiful co-hosts, Anthony, Brittany. Hello. 3 00:00:30,440 --> 00:00:31,000 Speaker 2: Hello. 4 00:00:31,760 --> 00:00:35,300 Speaker 1: Hello. Hey, Anthony's audio is a bit 5 00:00:35,780 --> 00:00:40,200 Speaker 1: weird because he's at a castle in Portland, specifically not the US Portland. 6 00:00:41,780 --> 00:00:44,900 Speaker 2: Yeah, luckily right now. Specifically 7 00:00:44,900 --> 00:00:47,620 Speaker 3: Pennsylvania Castle, which is also not the Pennsylvania next 8 00:00:47,620 --> 00:00:48,000 Speaker 3: to New York. 9 00:00:48,820 --> 00:00:52,540 Speaker 1: Oh, wow. It's absolutely beautiful though 10 00:00:52,540 --> 00:00:54,280 Speaker 2: for listeners. Sorry. 11 00:00:55,020 --> 00:00:55,940 Speaker 1: Yeah, it is. Yeah. 12 00:00:56,040 --> 00:00:59,100 Speaker 1: And then I was going to say, we also have a very beautiful guest. 13 00:00:59,840 --> 00:01:00,680 Speaker 1: Jeppe is back. 14 00:01:00,780 --> 00:01:02,860 Speaker 1: I think you've been on the podcast once before, right? 15 00:01:03,320 --> 00:01:04,260 Speaker 1: Or at least on the YouTube 16 00:01:04,260 --> 00:01:04,480 Speaker 4: channel. 17 00:01:04,480 --> 00:01:04,760 Speaker 4: I have not. 18 00:01:06,020 --> 00:01:06,300 Speaker 4: I've been 19 00:01:06,300 --> 00:01:08,400 Speaker 1: on the video thingy. 20 00:01:08,740 --> 00:01:08,900 Speaker 4: Yes. 21 00:01:09,620 --> 00:01:10,180 Speaker 4: That makes 22 00:01:10,180 --> 00:01:10,440 Speaker 1: sense. 23 00:01:10,540 --> 00:01:11,580 Speaker 1: I have not been on the radio. 24 00:01:12,740 --> 00:01:13,420 Speaker 1: Welcome, Jeppe. 25 00:01:13,700 --> 00:01:14,340 Speaker 1: Great to see you. 26 00:01:14,460 --> 00:01:14,600 Speaker 1: I 27 00:01:14,600 --> 00:01:17,640 Speaker 4: haven't been referred to as the beautiful before, so I'll take that. 28 00:01:18,960 --> 00:01:19,920 Speaker 1: Every guest that we 29 00:01:19,920 --> 00:01:20,180 Speaker 3: have 30 00:01:20,180 --> 00:01:20,860 Speaker 1: is beautiful. 31 00:01:22,080 --> 00:01:23,520 Speaker 4: Oh, that made 32 00:01:23,520 --> 00:01:24,100 Speaker 1: it less cool. 33 00:01:24,840 --> 00:01:26,000 Speaker 3: Beautiful storybook. 34 00:01:28,300 --> 00:01:30,920 Speaker 1: Yeah, so you work at Chromatic, right? 35 00:01:31,080 --> 00:01:32,100 Speaker 1: I always mess that up. 36 00:01:32,100 --> 00:01:33,860 Speaker 1: I always say, oh, you work at Storybook. 37 00:01:34,220 --> 00:01:34,580 Speaker 1: But no. 38 00:01:35,860 --> 00:01:37,900 Speaker 4: I work on Storybook at Chromatic. 39 00:01:39,080 --> 00:01:39,600 Speaker 1: Yeah, yeah. 40 00:01:39,740 --> 00:01:40,800 Speaker 4: Maybe you can tell us a bit about yourself. 41 00:01:42,480 --> 00:01:46,540 Speaker 4: Yes, so I'm a software engineer at Chromatic. 42 00:01:47,120 --> 00:01:48,480 Speaker 4: And I am from Denmark. 43 00:01:49,000 --> 00:01:50,980 Speaker 4: But all my colleagues are not. 44 00:01:51,360 --> 00:01:51,960 Speaker 4: So I work from home. 45 00:01:52,400 --> 00:01:52,900 Speaker 4: And that's great. 46 00:01:53,520 --> 00:01:54,100 Speaker 4: I love that. 47 00:01:54,580 --> 00:01:55,160 Speaker 4: Everyone should do that. 48 00:01:56,460 --> 00:01:58,680 Speaker 4: And so I work on the Storybook team. 49 00:01:59,580 --> 00:02:00,780 Speaker 4: And Storybook is open source. 50 00:02:01,120 --> 00:02:01,640 Speaker 4: Storybook is free. 51 00:02:02,700 --> 00:02:03,580 Speaker 4: But we're quite a big team. 52 00:02:03,740 --> 00:02:06,920 Speaker 4: We're actually eight maybe now. 53 00:02:08,280 --> 00:02:10,740 Speaker 4: And everyone is in the core team. 54 00:02:11,160 --> 00:02:12,400 Speaker 4: It works at Chromatic. 55 00:02:12,660 --> 00:02:15,220 Speaker 4: So Chromatic funds the development of Storybook. 56 00:02:16,880 --> 00:02:17,620 Speaker 4: And that's awesome. 57 00:02:17,760 --> 00:02:18,980 Speaker 4: I've been doing that for three years now. 58 00:02:20,420 --> 00:02:24,740 Speaker 4: And three years ago, the Svelte integration was 59 00:02:24,740 --> 00:02:25,160 Speaker 5: not that great, 60 00:02:25,450 --> 00:02:26,320 Speaker 4: but maybe it is now. 61 00:02:26,530 --> 00:02:28,600 Speaker 4: So maybe there's something going on there. 62 00:02:28,610 --> 00:02:28,760 Speaker 4: Well, 63 00:02:29,000 --> 00:02:32,980 Speaker 1: before that, let's maybe explain to the listeners, 64 00:02:34,099 --> 00:02:35,120 Speaker 1: what is Storybook? 65 00:02:35,780 --> 00:02:36,380 Speaker 1: Give us 66 00:02:36,380 --> 00:02:37,280 Speaker 4: the elevator pitch. 67 00:02:38,560 --> 00:02:40,440 Speaker 4: Yeah, so Storybook is sort of like a workshop 68 00:02:40,740 --> 00:02:42,520 Speaker 4: for a component development, 69 00:02:43,300 --> 00:02:45,800 Speaker 4: where usually when you're building components in Svelte, 70 00:02:46,580 --> 00:02:48,400 Speaker 4: you will put them in your application, 71 00:02:48,980 --> 00:02:50,340 Speaker 4: and they will work fine. 72 00:02:50,550 --> 00:02:53,180 Speaker 4: But then as you put them in some other page, 73 00:02:53,820 --> 00:02:54,600 Speaker 4: it'll start to break 74 00:02:56,019 --> 00:02:58,620 Speaker 4: because that use case wasn't part of the component. 75 00:02:59,210 --> 00:03:00,440 Speaker 4: And so Storybook is a way for you 76 00:03:00,440 --> 00:03:01,720 Speaker 4: to look at your components in isolation 77 00:03:03,790 --> 00:03:05,780 Speaker 4: so that you can really just focus on the component 78 00:03:07,739 --> 00:03:09,560 Speaker 4: and make it great with the props 79 00:03:09,690 --> 00:03:10,860 Speaker 4: and what state it needs to be. 80 00:03:11,000 --> 00:03:13,360 Speaker 4: And then you can specify different stories, 81 00:03:14,300 --> 00:03:16,300 Speaker 4: which are like use cases for a set component. 82 00:03:17,920 --> 00:03:20,340 Speaker 4: And then once you're ready, saying now the component is great, 83 00:03:20,500 --> 00:03:21,920 Speaker 4: you put the component into your application, 84 00:03:22,220 --> 00:03:23,660 Speaker 4: and then it's there, right? 85 00:03:24,040 --> 00:03:25,520 Speaker 4: Storybook is sort of like a companion app, 86 00:03:25,700 --> 00:03:29,800 Speaker 4: similar to vTest being something that runs alongside your application. 87 00:03:29,900 --> 00:03:31,440 Speaker 4: It's not part of the application as such. 88 00:03:32,920 --> 00:03:35,820 Speaker 4: And then you can use it for testing and for documentation as well 89 00:03:36,040 --> 00:03:37,240 Speaker 4: and for development. 90 00:03:39,280 --> 00:03:41,920 Speaker 4: And yeah, that's Storybook and the Nutshell. 91 00:03:42,660 --> 00:03:45,919 Speaker 3: Am I right in saying here that Storybook runs alongside 92 00:03:45,940 --> 00:03:49,120 Speaker 3: your main application, but it shares the same source code 93 00:03:49,170 --> 00:03:50,740 Speaker 3: so that what you're testing is the real thing. 94 00:03:51,330 --> 00:03:51,440 Speaker 4: Exactly. 95 00:03:52,540 --> 00:03:57,680 Speaker 4: So similar to when you have some unit function file, 96 00:03:57,920 --> 00:03:59,940 Speaker 4: you will write a.test file next to it 97 00:04:00,340 --> 00:04:02,480 Speaker 4: and import your actual code. 98 00:04:02,860 --> 00:04:05,820 Speaker 4: You'll also write a.stories file next to your components 99 00:04:06,240 --> 00:04:07,720 Speaker 4: and then import your actual components. 100 00:04:08,320 --> 00:04:09,560 Speaker 4: So it's using the same source. 101 00:04:09,680 --> 00:04:13,880 Speaker 4: It's even using the same Vite config if you want to. 102 00:04:14,520 --> 00:04:16,980 Speaker 4: And so the setup is the same, more or less. 103 00:04:18,040 --> 00:04:19,380 Speaker 1: All right, cool. 104 00:04:19,880 --> 00:04:24,400 Speaker 1: So this episode is titled Storybook is Actually Good Now 105 00:04:24,830 --> 00:04:27,080 Speaker 1: because I remember back in the days, 106 00:04:27,350 --> 00:04:29,540 Speaker 1: like before I even started using Svelte, 107 00:04:30,640 --> 00:04:34,800 Speaker 1: back when I was using the Cursed Framework, React. 108 00:04:37,460 --> 00:04:38,460 Speaker 1: It wasn't very good. 109 00:04:38,460 --> 00:04:38,960 Speaker 1: I shall not speak of React. 110 00:04:40,080 --> 00:04:41,760 Speaker 1: It wasn't very good back then either. 111 00:04:43,960 --> 00:04:44,480 Speaker 1: There's... 112 00:04:44,500 --> 00:04:44,940 Speaker 1: There's 113 00:04:44,940 --> 00:04:52,680 Speaker 2: probably still a video of me on this Felt Society YouTube channel just struggling to get Storybook set up. 114 00:04:52,680 --> 00:04:55,340 Speaker 2: And I think that might have spurred some of this. 115 00:04:56,360 --> 00:04:57,560 Speaker 4: That was a very important video. 116 00:04:57,960 --> 00:04:58,380 Speaker 4: That's for sure. 117 00:04:59,400 --> 00:05:01,300 Speaker 4: And I can tell you all about the backstory here. 118 00:05:04,600 --> 00:05:07,840 Speaker 4: So Storybook was originally for React. 119 00:05:07,900 --> 00:05:08,660 Speaker 4: Like Storybook's old. 120 00:05:08,880 --> 00:05:11,800 Speaker 4: Storybook's like eight years old now or something for React. 121 00:05:12,060 --> 00:05:14,820 Speaker 4: And then it expanded into other frameworks as well. 122 00:05:15,680 --> 00:05:19,680 Speaker 4: And it also expanded into Svelte via community contributions. 123 00:05:21,600 --> 00:05:23,120 Speaker 4: And that was before my time. 124 00:05:23,120 --> 00:05:25,480 Speaker 4: So I'm just relaying information I've heard, right? 125 00:05:25,980 --> 00:05:28,180 Speaker 4: But essentially, these contributions were pretty great. 126 00:05:29,720 --> 00:05:34,560 Speaker 4: It created an okay integration between Storybook and Svelte. 127 00:05:35,260 --> 00:05:37,420 Speaker 4: But the problem with this was that 128 00:05:39,180 --> 00:05:41,740 Speaker 4: these were often like drive-by contributions. 129 00:05:42,000 --> 00:05:44,720 Speaker 4: because you would have like this very passionate engineer 130 00:05:44,960 --> 00:05:47,280 Speaker 4: that got hired into a Svelte project 131 00:05:47,320 --> 00:05:48,640 Speaker 4: and he wanted to use Storybook. 132 00:05:48,840 --> 00:05:51,180 Speaker 4: And so he spent a bunch of time contributing stuff. 133 00:05:51,360 --> 00:05:52,240 Speaker 4: And then six months later, 134 00:05:53,160 --> 00:05:57,060 Speaker 4: he got moved into another project that didn't use Svelte. 135 00:05:57,140 --> 00:05:58,760 Speaker 4: And then he left it. 136 00:05:59,100 --> 00:06:00,700 Speaker 4: And then the next engineer came in 137 00:06:00,760 --> 00:06:03,140 Speaker 4: and then that kept happening over and over again. 138 00:06:03,640 --> 00:06:04,780 Speaker 4: And so they built something great, 139 00:06:04,780 --> 00:06:06,860 Speaker 4: but then it wasn't really maintained by the same person. 140 00:06:07,220 --> 00:06:09,160 Speaker 4: And that sort of made it rot a bit 141 00:06:11,420 --> 00:06:12,640 Speaker 4: up to the point where 142 00:06:14,439 --> 00:06:17,040 Speaker 4: Brittany posts a video of her setting up 143 00:06:17,620 --> 00:06:18,440 Speaker 4: Storybook with Svelte. 144 00:06:20,379 --> 00:06:22,660 Speaker 4: And the interesting thing about this video 145 00:06:22,980 --> 00:06:27,180 Speaker 4: was that Brittany was very enthusiastic about it. 146 00:06:27,680 --> 00:06:28,840 Speaker 4: Brittany really wants to make this work. 147 00:06:30,240 --> 00:06:30,720 Speaker 3: Enthusiastic 148 00:06:30,720 --> 00:06:32,520 Speaker 4: is such a diplomatic way to put it. 149 00:06:33,180 --> 00:06:33,400 Speaker 4: Right. 150 00:06:33,800 --> 00:06:35,920 Speaker 4: No, but she wanted it to work. 151 00:06:36,080 --> 00:06:37,600 Speaker 4: It wasn't just like, I'm going to do a video 152 00:06:37,620 --> 00:06:39,300 Speaker 4: and then rant about all this not working. 153 00:06:39,420 --> 00:06:42,100 Speaker 4: Like that just happened because the experience was so bad. 154 00:06:44,460 --> 00:06:47,080 Speaker 4: And that was an eye opener for sure. 155 00:06:49,279 --> 00:06:53,060 Speaker 4: And the biggest reason was from my remembering, 156 00:06:53,660 --> 00:06:55,120 Speaker 4: this was maybe three years ago, 157 00:06:55,200 --> 00:06:57,940 Speaker 4: the biggest reason was that Storybook was only Webpack back then 158 00:06:58,400 --> 00:07:00,220 Speaker 4: and Svelte had already moved over to VEAT. 159 00:07:00,600 --> 00:07:03,940 Speaker 4: So when you try to set up the same thing in Webpack and VEAT, 160 00:07:04,440 --> 00:07:06,620 Speaker 4: you're going to run into something you don't like. 161 00:07:07,120 --> 00:07:09,080 Speaker 2: It was a webcat config, man. 162 00:07:09,540 --> 00:07:10,080 Speaker 2: It was awful. 163 00:07:11,080 --> 00:07:13,860 Speaker 4: And I believe the video ends with Brittany just saying, 164 00:07:13,900 --> 00:07:14,460 Speaker 4: I can't do this. 165 00:07:14,460 --> 00:07:14,880 Speaker 4: It doesn't work. 166 00:07:16,400 --> 00:07:18,320 Speaker 4: Brittany is a reverse influencer. 167 00:07:20,620 --> 00:07:22,780 Speaker 5: And so at 168 00:07:22,780 --> 00:07:24,240 Speaker 4: that same time, I was actually, 169 00:07:24,980 --> 00:07:26,120 Speaker 4: I was interviewing for Storybook. 170 00:07:26,220 --> 00:07:27,960 Speaker 4: And one of the things that I said was like, 171 00:07:27,960 --> 00:07:28,680 Speaker 4: I really like Svelte. 172 00:07:28,840 --> 00:07:30,240 Speaker 4: So if there's anything we want to do about Svelte, 173 00:07:30,700 --> 00:07:31,480 Speaker 4: I would love to help out. 174 00:07:31,640 --> 00:07:35,120 Speaker 4: And then combining that with Brittany's video was like, 175 00:07:35,240 --> 00:07:37,160 Speaker 4: oh, we need to do work here. 176 00:07:39,940 --> 00:07:43,300 Speaker 4: And so that started our first integration to SvelteKit. 177 00:07:43,350 --> 00:07:44,740 Speaker 4: We did an official SvelteKit package, 178 00:07:45,050 --> 00:07:47,580 Speaker 4: which was basically, if you have SvelteKit, 179 00:07:47,960 --> 00:07:52,440 Speaker 4: here is a zero config setup for you 180 00:07:53,110 --> 00:07:54,760 Speaker 4: because there's some stuff that you need to modify 181 00:07:54,870 --> 00:07:57,100 Speaker 4: and we'll modify that behind the scenes in your read config. 182 00:07:59,140 --> 00:08:00,600 Speaker 4: And that really kick-started the whole, 183 00:08:01,160 --> 00:08:02,380 Speaker 4: let's improve the Svelte integration. 184 00:08:03,700 --> 00:08:04,900 Speaker 4: And with me being on the core team, 185 00:08:05,120 --> 00:08:07,800 Speaker 4: with me being sort of enthusiastic about Svelte. 186 00:08:07,800 --> 00:08:08,380 Speaker 4: I love Svelte. 187 00:08:09,500 --> 00:08:10,900 Speaker 4: That was like sort of one hand 188 00:08:10,910 --> 00:08:12,440 Speaker 4: that just could keep maintaining it 189 00:08:12,490 --> 00:08:14,340 Speaker 4: instead of these drive-by maintainers. 190 00:08:15,560 --> 00:08:19,220 Speaker 4: And so I've been building on top of what we had previously. 191 00:08:19,370 --> 00:08:21,080 Speaker 4: I haven't started anything from scratch. 192 00:08:21,150 --> 00:08:23,440 Speaker 4: I don't want to take the work away from them. 193 00:08:25,000 --> 00:08:28,180 Speaker 4: Yeah, and so it also kick-started a collaboration 194 00:08:28,520 --> 00:08:29,300 Speaker 4: with the Svelte core team. 195 00:08:31,460 --> 00:08:34,080 Speaker 4: I think Ben McCann, who's like a fantastic guy, 196 00:08:34,760 --> 00:08:36,159 Speaker 4: He was the first one to reach out and say, 197 00:08:36,300 --> 00:08:38,460 Speaker 4: hey, can we make this integration better? 198 00:08:41,739 --> 00:08:42,760 Speaker 5: And throughout the 199 00:08:42,760 --> 00:08:43,620 Speaker 4: years... 200 00:08:43,620 --> 00:08:45,120 Speaker 4: I was going to say, Ben feels 201 00:08:45,120 --> 00:08:46,280 like he's the glue. 202 00:08:47,800 --> 00:08:47,900 Speaker 4: Yeah, 203 00:08:48,060 --> 00:08:49,080 Speaker 1: he's the glue between 204 00:08:49,080 --> 00:08:50,000 Speaker 3: everything. 205 00:08:51,780 --> 00:08:51,960 Speaker 3: Yeah. 206 00:08:53,759 --> 00:08:55,620 Speaker 3: He's like the integrations guy. 207 00:08:56,140 --> 00:08:58,420 Speaker 3: He just kind of reaches out to every third party 208 00:08:58,580 --> 00:09:01,520 Speaker 3: and then says, hey, let's integrate in both directions, 209 00:09:01,720 --> 00:09:02,300 Speaker 3: which is really cool. 210 00:09:02,780 --> 00:09:03,280 Speaker 4: Yeah, I agree. 211 00:09:03,820 --> 00:09:11,120 Speaker 4: And he keeps doing that with the new package overview ecosystem thing, right? 212 00:09:12,980 --> 00:09:13,600 Speaker 4: So that's amazing. 213 00:09:14,180 --> 00:09:17,620 Speaker 4: And essentially, that collaboration between the Storybook core team 214 00:09:17,670 --> 00:09:19,140 Speaker 4: and the Svelte core team just kept improving. 215 00:09:19,250 --> 00:09:21,720 Speaker 4: We kept having more and more people chiming in. 216 00:09:22,220 --> 00:09:23,540 Speaker 4: Dominic also helped out a lot. 217 00:09:24,000 --> 00:09:25,380 Speaker 4: Lately, Simon has also helped out. 218 00:09:26,400 --> 00:09:28,260 Speaker 4: Paolo, of course, has contributed stuff. 219 00:09:30,080 --> 00:09:34,300 Speaker 4: And it's just really powerful. 220 00:09:35,160 --> 00:09:36,220 Speaker 4: So because in Storybook, 221 00:09:36,700 --> 00:09:38,840 Speaker 4: we integrate with all the major frameworks now. 222 00:09:38,840 --> 00:09:40,440 Speaker 4: We have like Angular Review and React 223 00:09:40,660 --> 00:09:43,100 Speaker 4: and web components and such. 224 00:09:44,500 --> 00:09:47,000 Speaker 4: And there's no other framework 225 00:09:47,040 --> 00:09:49,220 Speaker 4: that we are more close to collaborating with as Svelte, 226 00:09:49,300 --> 00:09:50,160 Speaker 4: like by far. 227 00:09:51,980 --> 00:09:53,740 Speaker 4: And we can really see the impact 228 00:09:54,280 --> 00:09:56,580 Speaker 4: in every day, basically. 229 00:09:57,540 --> 00:09:59,259 Speaker 1: So in terms of like functionality 230 00:09:59,260 --> 00:10:00,380 Speaker 1: that has gotten better. 231 00:10:01,160 --> 00:10:02,960 Speaker 1: I have some vague memory of, 232 00:10:04,160 --> 00:10:06,360 Speaker 1: was it slots that was a bit problematic 233 00:10:06,790 --> 00:10:07,680 Speaker 1: to do stories with? 234 00:10:08,300 --> 00:10:10,060 Speaker 1: Or am I misremembering? 235 00:10:10,520 --> 00:10:10,840 Speaker 4: Yeah, so. 236 00:10:11,400 --> 00:10:12,220 Speaker 1: That's working now. 237 00:10:12,420 --> 00:10:13,900 Speaker 1: Well, I guess slots aren't a thing 238 00:10:14,180 --> 00:10:15,760 Speaker 1: kind of ish anymore, so. 239 00:10:16,280 --> 00:10:17,780 Speaker 4: Well, what's little snippets? 240 00:10:17,900 --> 00:10:19,420 Speaker 4: It's just as awful, honestly, 241 00:10:19,540 --> 00:10:21,160 Speaker 4: if we hadn't done anything, right? 242 00:10:22,000 --> 00:10:26,440 Speaker 4: And so there's a specific format 243 00:10:27,080 --> 00:10:27,720 Speaker 4: in a storybook 244 00:10:27,700 --> 00:10:29,260 Speaker 4: that you write your stories in. 245 00:10:30,010 --> 00:10:32,040 Speaker 4: And it's based on JavaScript ESM. 246 00:10:33,180 --> 00:10:34,880 Speaker 4: And so you have these objects. 247 00:10:36,520 --> 00:10:38,160 Speaker 4: And then you reference your components, 248 00:10:38,680 --> 00:10:40,300 Speaker 4: but then Svelte components, 249 00:10:40,780 --> 00:10:42,160 Speaker 4: and you want to pass in slots to them, 250 00:10:42,420 --> 00:10:45,440 Speaker 4: you can't really define a Svelte component in JavaScript. 251 00:10:46,780 --> 00:10:49,320 Speaker 4: And so that's like the API for that. 252 00:10:50,360 --> 00:10:51,120 Speaker 4: It's really bad. 253 00:10:52,360 --> 00:10:55,640 Speaker 4: And therefore there exists an alternative syntax 254 00:10:56,220 --> 00:10:57,500 Speaker 4: called Svelte CSF. 255 00:10:58,780 --> 00:11:00,840 Speaker 4: which also existed before my time 256 00:11:00,880 --> 00:11:01,640 Speaker 4: I just improved it 257 00:11:03,900 --> 00:11:06,700 Speaker 4: where you write all your stories in svelte syntax 258 00:11:07,500 --> 00:11:10,440 Speaker 4: so that way you can get in slots or snippets 259 00:11:10,920 --> 00:11:12,640 Speaker 4: and you can do your svelte states 260 00:11:13,180 --> 00:11:15,380 Speaker 4: and you're derived like all the runes work 261 00:11:16,640 --> 00:11:19,560 Speaker 4: and that is what we hear at least from users 262 00:11:19,800 --> 00:11:22,720 Speaker 4: that like they really like that way better 263 00:11:22,880 --> 00:11:24,340 Speaker 4: because they're used to their svelte syntax 264 00:11:24,420 --> 00:11:26,739 Speaker 4: so they just want to write their stories in their svelte syntax 265 00:11:27,500 --> 00:11:34,020 Speaker 4: like imagine if you could do the same thing for your vtest unit tests writing that in svelte right 266 00:11:34,460 --> 00:11:39,060 Speaker 2: well i've been saying that for a while that i do all of my testing in storybook now because it uses 267 00:11:39,260 --> 00:11:47,820 Speaker 2: vtest and you just write a play um prop on your svelte csf and you write your test just straighten 268 00:11:48,020 --> 00:11:48,860 Speaker 2: that and 269 00:11:48,860 --> 00:11:54,259 Speaker 4: i'm happy to hear that i mean that's that's what we want people to see uh because like 270 00:11:55,100 --> 00:11:56,380 Speaker 4: So for people that don't know, 271 00:11:56,540 --> 00:11:59,180 Speaker 4: stories is like this snapshot of your component 272 00:12:01,160 --> 00:12:03,300 Speaker 4: with specific props in a specific environment. 273 00:12:03,500 --> 00:12:04,660 Speaker 4: Maybe you have a component 274 00:12:04,820 --> 00:12:08,040 Speaker 4: that is encapsulating your other component 275 00:12:09,220 --> 00:12:10,760 Speaker 4: or maybe you have svelte context. 276 00:12:11,660 --> 00:12:12,620 Speaker 4: And then as Brittany said, 277 00:12:12,660 --> 00:12:14,580 Speaker 4: you can also write a play function is what we call it 278 00:12:14,700 --> 00:12:16,780 Speaker 4: where essentially you interact with components as well. 279 00:12:16,960 --> 00:12:19,200 Speaker 4: So you might do click the button 280 00:12:19,759 --> 00:12:21,620 Speaker 4: and assert that the form has opened 281 00:12:22,020 --> 00:12:24,160 Speaker 4: or assert that you got a form error or whatever. 282 00:12:26,280 --> 00:12:28,180 Speaker 4: and then when you see this in the storybook UI 283 00:12:28,860 --> 00:12:30,720 Speaker 4: you will see the interactions play out 284 00:12:30,870 --> 00:12:33,360 Speaker 4: so you can actually see the mouse clicking and whatever 285 00:12:34,740 --> 00:12:36,700 Speaker 4: and we feel that that's pretty powerful 286 00:12:37,200 --> 00:12:38,440 Speaker 4: because UI is visual 287 00:12:38,680 --> 00:12:40,220 Speaker 4: why does it have to live in the CLI? 288 00:12:42,300 --> 00:12:43,440 Speaker 2: You can see each step 289 00:12:43,530 --> 00:12:44,980 Speaker 2: you can stop each step 290 00:12:45,030 --> 00:12:47,060 Speaker 2: you can replay the test 291 00:12:47,800 --> 00:12:51,000 Speaker 2: it's such a nice visual to go along with it 292 00:12:51,000 --> 00:12:51,420 Speaker 2: I love it 293 00:12:52,120 --> 00:12:52,980 Speaker 2: I think that's 294 00:12:52,980 --> 00:12:54,200 Speaker 3: a really powerful thing 295 00:12:54,220 --> 00:12:55,580 Speaker 3: the ability to step through something, 296 00:12:56,180 --> 00:12:57,800 Speaker 3: which kind of relates to how debuggers work, I suppose. 297 00:12:58,160 --> 00:13:01,140 Speaker 3: But a lot of early testing frameworks for UIs, 298 00:13:01,140 --> 00:13:03,580 Speaker 3: and I've had many years of experience with them 299 00:13:04,540 --> 00:13:06,500 Speaker 3: as a contributor and a person who uses them day to day, 300 00:13:07,459 --> 00:13:09,020 Speaker 3: the thing that's really missing from everything 301 00:13:09,100 --> 00:13:11,400 Speaker 3: was a way to properly debug it, properly step through, 302 00:13:12,180 --> 00:13:13,660 Speaker 3: go and watch visually what's happening 303 00:13:13,820 --> 00:13:15,220 Speaker 3: as the steps of the test execute. 304 00:13:16,000 --> 00:13:19,620 Speaker 3: And I think when I saw, what was it called? 305 00:13:19,760 --> 00:13:20,820 Speaker 3: I haven't used it so long, I've forgotten. 306 00:13:21,280 --> 00:13:23,280 Speaker 3: The browser testing framework, Cypress, right? 307 00:13:23,960 --> 00:13:26,260 Speaker 3: You know, when I see that, and I didn't like the syntax, 308 00:13:26,450 --> 00:13:27,800 Speaker 3: it wasn't like I was used to, 309 00:13:28,480 --> 00:13:30,080 Speaker 3: but the fact you could stop a test 310 00:13:30,380 --> 00:13:33,020 Speaker 3: and just see what's going on right there, 311 00:13:33,820 --> 00:13:38,120 Speaker 3: it makes debugging go from probably hours of time wasted debugging 312 00:13:38,400 --> 00:13:40,200 Speaker 3: to instant debugging. 313 00:13:40,390 --> 00:13:42,120 Speaker 3: And I think that's a super valuable feature. 314 00:13:43,200 --> 00:13:45,860 Speaker 4: And also there's some playwright also have like traces videos 315 00:13:46,760 --> 00:13:48,960 Speaker 4: where I can see the recording, which is also very powerful, right? 316 00:13:50,620 --> 00:13:54,460 Speaker 4: Our take on that is interactability. 317 00:13:56,080 --> 00:13:57,580 Speaker 4: So what Storybook allows you to do, 318 00:13:57,740 --> 00:13:59,600 Speaker 4: you build a static version of your Storybook 319 00:13:59,620 --> 00:14:02,200 Speaker 4: and then you can publish that with Chromatic 320 00:14:03,080 --> 00:14:05,060 Speaker 4: or with Netlify or whatever you want to do it. 321 00:14:05,740 --> 00:14:10,000 Speaker 4: And then if there's a problem in your interaction test, 322 00:14:10,320 --> 00:14:11,980 Speaker 4: you can send the link, the published link, 323 00:14:11,980 --> 00:14:13,680 Speaker 4: you can send that to your designer or someone and say, 324 00:14:13,760 --> 00:14:17,320 Speaker 4: hey, why is this not working as you intended it to work? 325 00:14:17,940 --> 00:14:19,260 Speaker 4: And then they can actually interact with it. 326 00:14:19,640 --> 00:14:21,640 Speaker 4: They can stop at the step that it's broken in 327 00:14:21,670 --> 00:14:23,300 Speaker 4: and then they can write stuff in the, 328 00:14:23,340 --> 00:14:25,660 Speaker 4: it's not just a static image or a static video. 329 00:14:26,100 --> 00:14:26,860 Speaker 4: I think that's super powerful. 330 00:14:29,839 --> 00:14:33,640 Speaker 1: Yeah, I need to really like set up storybook 331 00:14:33,800 --> 00:14:36,380 Speaker 1: for the new Svelte Society website. 332 00:14:38,060 --> 00:14:42,120 Speaker 1: Maybe I can invite you to, with testing, yeah. 333 00:14:42,520 --> 00:14:42,880 Speaker 1: Oh no, 334 00:14:43,000 --> 00:14:45,920 Speaker 2: with the new SV integration too, 335 00:14:46,200 --> 00:14:48,500 Speaker 2: like it's literally a one-step thing. 336 00:14:48,720 --> 00:14:52,760 Speaker 2: just select that you want to add storybook and it's so easy to just 337 00:14:52,760 --> 00:14:55,620 Speaker 4: get in there that was also 338 00:14:56,180 --> 00:14:58,360 Speaker 4: like i was like spelt people's i should redo 339 00:14:58,360 --> 00:15:01,280 Speaker 2: the video but it would be like five minutes of me just 340 00:15:01,370 --> 00:15:02,480 Speaker 2: setting up a spill kit site 341 00:15:02,480 --> 00:15:02,940 Speaker 3: it's 342 00:15:02,940 --> 00:15:05,700 Speaker 5: super decent you'd 343 00:15:05,700 --> 00:15:07,300 Speaker 3: be an influencer then and we don't want that 344 00:15:10,240 --> 00:15:12,320 Speaker 2: i should do a tiktok video of it uh 345 00:15:12,320 --> 00:15:15,800 Speaker 4: we also recently modified the or contributed to the 346 00:15:15,720 --> 00:15:19,640 Speaker 4: Svelte docs. And so now Storybook is described how you test 347 00:15:19,740 --> 00:15:22,180 Speaker 4: with Storybook in Svelte docs. So that should 348 00:15:22,180 --> 00:15:23,560 Speaker 1: make it easy to get started. 349 00:15:24,160 --> 00:15:27,700 Speaker 1: Nice. Yeah. I might need more hand-holding 350 00:15:27,820 --> 00:15:30,780 Speaker 1: so I might just invite you to do a video with me. 351 00:15:31,440 --> 00:15:33,140 Speaker 1: That's a good idea. I had 352 00:15:33,140 --> 00:15:34,920 Speaker 4: a great chat with Scott 353 00:15:36,440 --> 00:15:39,580 Speaker 4: Talinsky at the Svelte Summit where he basically told me that 354 00:15:39,580 --> 00:15:43,839 Speaker 4: they were doing component-driven rewrite of their website 355 00:15:43,860 --> 00:15:44,380 Speaker 4: syntax 356 00:15:44,380 --> 00:15:45,440 Speaker 5: and 357 00:15:45,440 --> 00:15:48,780 Speaker 4: they were doing it like storybook first which was like amazing to hear because he 358 00:15:48,780 --> 00:15:49,100 Speaker 5: has been 359 00:15:51,280 --> 00:15:57,880 Speaker 4: not a fan of it previously and so now hearing that they're doing it with a component first and then 360 00:15:58,040 --> 00:16:00,360 Speaker 4: putting it into the application afterwards that was pretty amazing to hear 361 00:16:00,360 --> 00:16:02,140 Speaker 3: yeah i say i'm being 362 00:16:02,260 --> 00:16:02,640 Speaker 3: people who 363 00:16:02,640 --> 00:16:05,400 Speaker 4: get to rewrite the websites that's 364 00:16:05,400 --> 00:16:08,720 Speaker 2: how i build my design systems now i'm i'm on my second 365 00:16:08,840 --> 00:16:13,820 Speaker 2: design system where i've started building components put them in storybook test everything and then 366 00:16:13,840 --> 00:16:16,060 Speaker 2: they get dished out to the apps. 367 00:16:16,880 --> 00:16:17,760 Speaker 3: It's like the dream. 368 00:16:18,020 --> 00:16:19,920 Speaker 3: It's like how dev should have worked, right? 369 00:16:20,900 --> 00:16:20,960 Speaker 2: Yeah. 370 00:16:21,360 --> 00:16:22,400 Speaker 3: Greenfield is best field. 371 00:16:23,880 --> 00:16:24,120 Speaker 1: Yeah. 372 00:16:24,980 --> 00:16:26,400 Speaker 1: Yeah, brownfield, not so much. 373 00:16:28,920 --> 00:16:30,340 Speaker 5: Everything feels like brownfield. 374 00:16:31,180 --> 00:16:35,960 Speaker 1: Yeah, I've been working on way too many, like, not greenfield apps lately. 375 00:16:37,700 --> 00:16:38,180 Speaker 4: It's a bit painful. 376 00:16:38,200 --> 00:16:38,800 Speaker 4: It's healthy, though. 377 00:16:38,860 --> 00:16:44,000 Speaker 4: So, I mean, getting a brownfield application to work is, like, way harder than them. 378 00:16:44,940 --> 00:16:45,240 Speaker 4: Yeah, we 379 00:16:45,240 --> 00:16:45,740 Speaker 2: learn 380 00:16:45,740 --> 00:16:46,740 Speaker 4: from mistakes and all that. 381 00:16:47,140 --> 00:16:53,600 Speaker 2: My latest company is taking a greenfield design system and putting it back into other things now. 382 00:16:53,880 --> 00:16:54,020 Speaker 2: But 383 00:16:54,020 --> 00:16:54,680 Speaker 1: that's, 384 00:16:54,740 --> 00:16:56,900 Speaker 2: like, even harder, I feel like. 385 00:16:57,860 --> 00:16:58,600 Speaker 1: Rainbow field. 386 00:16:58,980 --> 00:17:04,300 Speaker 2: We have a new application it's being used in, but then they're like, oh, this old application can use it too, right? 387 00:17:04,400 --> 00:17:06,360 Speaker 2: So now we're just migrating everything. 388 00:17:07,660 --> 00:17:07,959 Speaker 1: Right. 389 00:17:08,240 --> 00:17:09,660 Speaker 1: Well, you got to start somewhere. 390 00:17:11,040 --> 00:17:11,319 Speaker 2: Yeah. 391 00:17:12,280 --> 00:17:12,579 Speaker 2: Storybook 392 00:17:12,579 --> 00:17:12,959 Speaker 1: got us 393 00:17:12,959 --> 00:17:13,360 Speaker 2: there faster. 394 00:17:15,180 --> 00:17:16,600 Speaker 1: I mean, probably, right? 395 00:17:17,280 --> 00:17:18,100 Speaker 2: Oh, for sure. 396 00:17:18,329 --> 00:17:18,459 Speaker 2: Yeah. 397 00:17:19,660 --> 00:17:22,420 Speaker 1: Yeah, it would be bad if it was the other way around. 398 00:17:22,569 --> 00:17:23,040 Speaker 1: It took longer. 399 00:17:24,680 --> 00:17:25,400 Speaker 2: No, I 400 00:17:25,400 --> 00:17:26,560 Speaker 1: think it's such 401 00:17:26,560 --> 00:17:30,560 Speaker 2: an easy integration and building out your components, making sure they work. 402 00:17:30,610 --> 00:17:33,700 Speaker 2: I mean, you have less bugs for your users once it does get used. 403 00:17:33,700 --> 00:17:37,780 Speaker 2: So we're able to put those into older applications easier. 404 00:17:37,940 --> 00:17:39,260 Speaker 2: and know that it's trusted. 405 00:17:40,270 --> 00:17:40,440 Speaker 1: Yeah. 406 00:17:41,460 --> 00:17:42,820 Speaker 1: I had a question about, 407 00:17:43,420 --> 00:17:45,960 Speaker 1: so I don't know if you've thought about this much, 408 00:17:46,160 --> 00:17:48,660 Speaker 1: but these new remote functions 409 00:17:49,300 --> 00:17:50,760 Speaker 1: that have been released in SvelteKit, 410 00:17:51,640 --> 00:17:57,040 Speaker 1: now that we have a way of basically combining data loading 411 00:17:58,999 --> 00:18:03,980 Speaker 1: and interactions via functions, 412 00:18:05,320 --> 00:18:11,300 Speaker 1: are you thinking about how to maybe integrate that into Storybook? 413 00:18:11,490 --> 00:18:15,900 Speaker 1: Like you could have a remote, let's say you have like a widget of comments or something, 414 00:18:15,930 --> 00:18:21,400 Speaker 1: and then you have, you want to make sure that the remote function does its thing 415 00:18:21,630 --> 00:18:26,680 Speaker 1: and maybe different variations of like failure states, success states, et cetera. 416 00:18:27,380 --> 00:18:27,560 Speaker 1: Is that 417 00:18:27,560 --> 00:18:28,040 Speaker 4: something 418 00:18:28,040 --> 00:18:28,460 Speaker 1: you've... 419 00:18:29,420 --> 00:18:30,200 Speaker 4: For sure. 420 00:18:30,640 --> 00:18:33,380 Speaker 4: So there's one important limitation about Storybook to know 421 00:18:33,500 --> 00:18:35,940 Speaker 4: is that everything you do happens on the client. 422 00:18:36,600 --> 00:18:36,680 Speaker 1: Yeah. 423 00:18:38,140 --> 00:18:39,560 Speaker 4: And that's why we can also do static builds 424 00:18:39,720 --> 00:18:41,880 Speaker 4: because there's no server really. 425 00:18:42,480 --> 00:18:45,140 Speaker 4: And that's, of course, a big issue for remote functions 426 00:18:45,280 --> 00:18:46,340 Speaker 4: because they're meant to run on the server. 427 00:18:47,399 --> 00:18:51,700 Speaker 4: And there's really just two ways to think about it is 428 00:18:51,940 --> 00:18:54,740 Speaker 4: what is it that, if you consider Story like a test, 429 00:18:55,060 --> 00:18:57,040 Speaker 4: what is it exactly that you want to be part of that? 430 00:18:57,780 --> 00:19:02,920 Speaker 4: Because sometimes you may say that you just want to look at the component and the UI 431 00:19:03,390 --> 00:19:07,040 Speaker 4: and that the remote function is not part of that. 432 00:19:07,350 --> 00:19:07,580 Speaker 4: And so 433 00:19:07,580 --> 00:19:07,960 Speaker 5: you mock 434 00:19:07,960 --> 00:19:08,240 Speaker 4: it out. 435 00:19:08,810 --> 00:19:08,960 Speaker 4: Since 436 00:19:08,960 --> 00:19:09,520 Speaker 5: Storybook 437 00:19:09,520 --> 00:19:11,280 Speaker 4: has a mocking API similar to vTest, 438 00:19:11,410 --> 00:19:14,460 Speaker 4: so you will just say, mock this remote file 439 00:19:15,420 --> 00:19:18,420 Speaker 4: and replace it with something that you fully control. 440 00:19:19,800 --> 00:19:22,200 Speaker 4: When this function is called with these parameters, return that. 441 00:19:24,940 --> 00:19:29,260 Speaker 4: And I think that's easy and that makes your stories deterministic. 442 00:19:29,680 --> 00:19:30,520 Speaker 4: You don't want your 443 00:19:30,520 --> 00:19:31,200 Speaker 5: stories at all 444 00:19:31,200 --> 00:19:33,200 Speaker 4: to depend on externalities at all. 445 00:19:34,580 --> 00:19:38,040 Speaker 4: But then you say, well, but then I'm not testing the fact 446 00:19:38,160 --> 00:19:39,920 Speaker 4: that the interaction with the remote function works. 447 00:19:40,720 --> 00:19:41,060 Speaker 5: And so you 448 00:19:41,060 --> 00:19:43,740 Speaker 4: can also say, keep the remote function, 449 00:19:44,080 --> 00:19:46,660 Speaker 4: but then mark out all the server-dependent parts. 450 00:19:46,820 --> 00:19:48,920 Speaker 4: So maybe you have a database that you're calling, 451 00:19:49,240 --> 00:19:51,440 Speaker 4: and so you want to mark out the database modules instead. 452 00:19:53,340 --> 00:19:55,900 Speaker 4: And so it really is up to you where you want to define the layer, 453 00:19:56,040 --> 00:19:57,840 Speaker 4: but you are probably going to need to mark something 454 00:19:59,600 --> 00:20:01,580 Speaker 4: because the remote functions work on the server, 455 00:20:01,970 --> 00:20:03,140 Speaker 4: which we don't have. 456 00:20:03,920 --> 00:20:06,420 Speaker 1: And that's fine that you would have to mark it 457 00:20:06,560 --> 00:20:09,460 Speaker 1: because you would have to mark any kind of call 458 00:20:09,600 --> 00:20:11,460 Speaker 1: to remote service anyway, right? 459 00:20:12,240 --> 00:20:12,440 Speaker 4: Exactly. 460 00:20:13,370 --> 00:20:16,920 Speaker 4: Yeah, you don't want the remote service to have an impact. 461 00:20:19,160 --> 00:20:22,300 Speaker 4: I must say that I haven't tried remote functions in Storable yet. 462 00:20:22,620 --> 00:20:28,120 Speaker 4: So there's the API of remote functions with like query and command and that jazz. 463 00:20:28,580 --> 00:20:29,940 Speaker 5: I'm not actually sure how that works 464 00:20:29,940 --> 00:20:31,280 Speaker 4: in Storybook form. 465 00:20:32,320 --> 00:20:33,500 Speaker 4: Maybe it works, maybe it doesn't. 466 00:20:33,540 --> 00:20:37,580 Speaker 4: I need to have a chat with someone from Svelte team about what it does behind the scenes 467 00:20:37,640 --> 00:20:39,560 Speaker 4: and can I make that work on the client as well. 468 00:20:41,620 --> 00:20:45,420 Speaker 4: But so for now, the safest bet would be mark out the full remote function. 469 00:20:46,460 --> 00:20:46,520 Speaker 1: Yeah. 470 00:20:47,420 --> 00:20:48,560 Speaker 1: And then I'm sure we'll figure 471 00:20:48,560 --> 00:20:48,760 Speaker 4: it out. 472 00:20:49,980 --> 00:20:53,820 Speaker 1: Yeah, so that would mean, so at the moment, 473 00:20:53,940 --> 00:20:57,160 Speaker 1: you would just import the function, right, in your component, 474 00:20:57,300 --> 00:20:58,080 Speaker 1: and then you would use it. 475 00:20:59,100 --> 00:21:03,020 Speaker 1: So you would have to rewrite, you would either have to import 476 00:21:03,360 --> 00:21:06,080 Speaker 1: the function from somewhere else or pass it in as a prop. 477 00:21:06,520 --> 00:21:08,120 Speaker 1: So you kind of run into some weird. 478 00:21:09,720 --> 00:21:11,280 Speaker 1: You can even, because you can mock 479 00:21:11,280 --> 00:21:11,620 Speaker 4: the module. 480 00:21:12,340 --> 00:21:13,080 Speaker 4: You can 481 00:21:13,080 --> 00:21:13,780 Speaker 5: import the remote function. 482 00:21:13,780 --> 00:21:14,620 Speaker 5: Oh, I see, okay. 483 00:21:14,820 --> 00:21:19,079 Speaker 4: That's a strong suit about Svelte, because if you compare that to 484 00:21:19,840 --> 00:21:27,000 Speaker 4: react server components which are i have all my server stuff at my component and the store books 485 00:21:27,060 --> 00:21:32,560 Speaker 4: just chokes on that for now we have ideas but we you can't really just say i want to mark mark uh 486 00:21:32,960 --> 00:21:34,540 Speaker 4: certain parts of my file right it's either 487 00:21:34,540 --> 00:21:36,300 Speaker 5: okay and 488 00:21:36,300 --> 00:21:38,400 Speaker 4: that's really the benefit of of the i know 489 00:21:38,440 --> 00:21:44,800 Speaker 4: that this is rich harris's uh big thing is that you need to have separate files for your server and 490 00:21:44,740 --> 00:21:45,300 Speaker 4: your client always 491 00:21:45,300 --> 00:21:46,900 Speaker 5: yeah and 492 00:21:46,900 --> 00:21:50,120 Speaker 4: that definitely that makes storebook way easier because then you can 493 00:21:50,260 --> 00:21:54,060 Speaker 4: say all these server files over here i'll just i'll just mock those out because they don't 494 00:21:54,060 --> 00:21:54,220 Speaker 3: mean 495 00:21:55,720 --> 00:21:59,820 Speaker 3: even even you know it makes sense in terms of not getting confused between dependencies and 496 00:22:00,040 --> 00:22:01,280 Speaker 3: accidentally importing certain things 497 00:22:01,280 --> 00:22:02,220 Speaker 5: when it shouldn't be 498 00:22:02,220 --> 00:22:03,860 Speaker 3: imported and get exposed in a bundle 499 00:22:03,890 --> 00:22:09,059 Speaker 3: or something but even beyond that if you look at how mocking has worked for a million years 500 00:22:10,060 --> 00:22:11,980 Speaker 3: no matter what framework or 501 00:22:12,660 --> 00:22:14,180 Speaker 3: testing library you use, they always 502 00:22:14,420 --> 00:22:15,360 Speaker 3: struggle with partial mocks. 503 00:22:15,460 --> 00:22:16,080 Speaker 5: Partial mocks 504 00:22:16,160 --> 00:22:16,260 Speaker 5: themselves 505 00:22:16,260 --> 00:22:18,200 Speaker 3: feel like an anti-patter anyway 506 00:22:18,420 --> 00:22:18,540 Speaker 3: but 507 00:22:18,540 --> 00:22:19,680 Speaker 5: they're 508 00:22:19,680 --> 00:22:20,320 Speaker 3: kind of like a last 509 00:22:20,400 --> 00:22:22,220 Speaker 3: case resort but they always, always struggle 510 00:22:22,420 --> 00:22:23,280 Speaker 3: because you're trying to 511 00:22:24,040 --> 00:22:26,260 Speaker 3: take something real 512 00:22:26,520 --> 00:22:28,080 Speaker 3: and just kind of half fake it. 513 00:22:28,160 --> 00:22:29,860 Speaker 3: The whole concept is balmy. 514 00:22:32,340 --> 00:22:34,220 Speaker 4: Yeah, so you just put in 515 00:22:34,780 --> 00:22:36,220 Speaker 4: mock and then you pass in the path to 516 00:22:36,280 --> 00:22:38,280 Speaker 4: the remote function file and then that whole 517 00:22:38,240 --> 00:22:41,820 Speaker 4: file is marked out. You don't have to do dependency injection or anything. 518 00:22:42,340 --> 00:22:45,380 Speaker 1: Yeah. All right. Yeah. 519 00:22:46,200 --> 00:22:50,060 Speaker 1: It's a good answer. So what is 520 00:22:50,640 --> 00:22:54,140 Speaker 1: coming up in Storybook? What's a new cool thing 521 00:22:54,720 --> 00:22:55,520 Speaker 1: that we can talk about? 522 00:22:55,920 --> 00:22:57,680 Speaker 4: Storybook 10 is in beta 523 00:22:58,380 --> 00:23:01,480 Speaker 4: and Storybook 10 is not... We did some 524 00:23:01,980 --> 00:23:06,159 Speaker 4: Svelte fixes. So in SvelteKit, you've had this module 525 00:23:06,180 --> 00:23:10,760 Speaker 4: called $app.state for a while since full five. 526 00:23:11,070 --> 00:23:12,860 Speaker 4: And we didn't support mocking that. 527 00:23:13,670 --> 00:23:15,200 Speaker 4: But now we do in Storybook 10 at least. 528 00:23:15,450 --> 00:23:18,300 Speaker 4: So essentially, maybe you're writing stories for your page, 529 00:23:18,590 --> 00:23:19,240 Speaker 4: which is totally fine. 530 00:23:19,240 --> 00:23:20,860 Speaker 4: You don't have to do it for design systems. 531 00:23:22,180 --> 00:23:25,440 Speaker 4: And this page, it imports what is the current URL? 532 00:23:26,300 --> 00:23:28,320 Speaker 4: What is the current queue parameters from app state? 533 00:23:30,040 --> 00:23:33,000 Speaker 4: And then in the stories, you just define, 534 00:23:33,160 --> 00:23:35,020 Speaker 4: well, this is a story where the URL is X. 535 00:23:35,140 --> 00:23:36,800 Speaker 4: And this is a story where the parameters are. 536 00:23:36,820 --> 00:23:41,000 Speaker 4: And so you set up these scenarios for each page state, essentially. 537 00:23:41,800 --> 00:23:41,880 Speaker 5: Yeah. 538 00:23:43,100 --> 00:23:44,880 Speaker 4: And we just added support for that 539 00:23:44,880 --> 00:23:45,360 Speaker 1: now, 540 00:23:45,800 --> 00:23:46,520 Speaker 4: even though it's been a while. 541 00:23:47,260 --> 00:23:52,220 Speaker 1: That sounds really nice, especially if you want to test a full page 542 00:23:52,880 --> 00:23:57,660 Speaker 1: and you're relying a lot on query params and stuff like that. 543 00:23:57,940 --> 00:24:01,840 Speaker 4: Yeah, because doing this manually is often really tedious. 544 00:24:03,720 --> 00:24:08,020 Speaker 4: You have to keep visiting this page over here 545 00:24:08,200 --> 00:24:10,320 Speaker 4: with this exact user logged in and whatever. 546 00:24:10,780 --> 00:24:12,260 Speaker 4: And that's where a store book really shines 547 00:24:12,380 --> 00:24:15,540 Speaker 4: in that you just predefined that in your story 548 00:24:15,620 --> 00:24:17,180 Speaker 4: and say, this is when the user is logged in. 549 00:24:19,720 --> 00:24:21,720 Speaker 4: We also added support for async components, 550 00:24:24,280 --> 00:24:25,060 Speaker 4: which is great. 551 00:24:26,240 --> 00:24:27,380 Speaker 4: It should just work out of the box. 552 00:24:27,540 --> 00:24:30,760 Speaker 4: And you can even, in your play functions, 553 00:24:30,900 --> 00:24:35,680 Speaker 4: You can even do some assertions like when the async stuff is still loading. 554 00:24:36,060 --> 00:24:39,740 Speaker 4: And then you can await it being done loading. 555 00:24:39,780 --> 00:24:40,920 Speaker 4: And then you can do some more assertions. 556 00:24:41,140 --> 00:24:43,520 Speaker 4: So you can really do it in between the async stuff. 557 00:24:43,820 --> 00:24:48,420 Speaker 2: You're actually giving me ideas right now because I have not been testing my pages. 558 00:24:48,900 --> 00:24:52,860 Speaker 2: We just have the components in Storybook, but then the pages go in the app. 559 00:24:53,120 --> 00:24:53,360 Speaker 2: And 560 00:24:53,360 --> 00:24:54,320 Speaker 6: we 561 00:24:54,320 --> 00:24:59,540 Speaker 2: send them to QA and then they come back like 15 times because it's like manual process. 562 00:24:59,660 --> 00:25:00,240 Speaker 2: She goes 563 00:25:00,240 --> 00:25:01,200 Speaker 5: and she checks 564 00:25:01,200 --> 00:25:01,500 Speaker 2: everything. 565 00:25:01,660 --> 00:25:02,100 Speaker 2: It fails. 566 00:25:02,220 --> 00:25:03,080 Speaker 2: It comes back to me. 567 00:25:03,620 --> 00:25:07,220 Speaker 2: And so I could just run these tests and make sure everything works. 568 00:25:08,180 --> 00:25:08,320 Speaker 1: Yeah. 569 00:25:08,560 --> 00:25:12,020 Speaker 1: And you'll speed up development as well, right? 570 00:25:12,160 --> 00:25:16,060 Speaker 1: Because you'll just skip the back and forth because you'll see the 571 00:25:16,060 --> 00:25:16,680 Speaker 4: errors yourself. 572 00:25:18,400 --> 00:25:18,520 Speaker 4: Yeah. 573 00:25:18,520 --> 00:25:19,040 Speaker 4: And you can run. 574 00:25:19,160 --> 00:25:19,600 Speaker 4: I don't know. 575 00:25:19,600 --> 00:25:20,320 Speaker 4: Maybe you do that, Brittany. 576 00:25:20,560 --> 00:25:26,300 Speaker 4: But if you run the tests, like the storybook story tests in the CLI and CI, then it'll fail. 577 00:25:27,980 --> 00:25:29,280 Speaker 2: I do it. 578 00:25:29,340 --> 00:25:33,240 Speaker 2: locally. I don't have it set up in RCI right now, but 579 00:25:33,240 --> 00:25:33,940 Speaker 4: yes. 580 00:25:35,260 --> 00:25:39,860 Speaker 4: One thing that you need to do, like when you do think about SvelteKit pages in Storybook is that 581 00:25:40,320 --> 00:25:45,200 Speaker 4: there's no way of automatically adding the layouts, similar to like what SvelteKit does. 582 00:25:46,300 --> 00:25:48,520 Speaker 4: So when you write a story for a page, you also need to 583 00:25:49,120 --> 00:25:55,080 Speaker 4: write that it is within this layout and this layout. That's also sort of powerful because 584 00:25:55,100 --> 00:25:56,760 Speaker 4: then you can look at the page in different layouts 585 00:25:57,560 --> 00:25:59,100 Speaker 4: but it's also like sort of painful 586 00:25:59,250 --> 00:26:00,540 Speaker 4: because SvelteKit does that for you automatically 587 00:26:02,360 --> 00:26:03,080 Speaker 4: so it's 588 00:26:03,710 --> 00:26:04,560 Speaker 4: you win some, you lose some 589 00:26:05,360 --> 00:26:05,840 Speaker 1: I guess 590 00:26:05,840 --> 00:26:06,620 Speaker 3: that also means you could 591 00:26:08,340 --> 00:26:09,200 Speaker 3: yeah, you could 592 00:26:09,400 --> 00:26:11,180 Speaker 3: theoretically create a scenario 593 00:26:11,330 --> 00:26:13,060 Speaker 3: that can't exist in real world 594 00:26:13,250 --> 00:26:13,840 Speaker 3: maybe? For sure, 595 00:26:14,530 --> 00:26:14,800 Speaker 4: oh yeah 596 00:26:15,060 --> 00:26:17,240 Speaker 4: if you just put in the page and you ignore the layout 597 00:26:17,370 --> 00:26:18,700 Speaker 4: but the layout would always be there 598 00:26:19,200 --> 00:26:21,220 Speaker 4: then you have created a scenario that doesn't really 599 00:26:21,400 --> 00:26:22,100 Speaker 4: exist in the application 600 00:26:22,120 --> 00:26:22,740 Speaker 2: Yeah. 601 00:26:23,060 --> 00:26:25,320 Speaker 2: So you just create a layout component and wrap it 602 00:26:25,320 --> 00:26:28,000 Speaker 2: and everything kind of like React like you would have to. 603 00:26:29,560 --> 00:26:29,640 Speaker 4: I 604 00:26:29,640 --> 00:26:31,660 Speaker 2: mean, you just import the-- 605 00:26:31,840 --> 00:26:33,000 Speaker 5: You just import the layout component 606 00:26:33,000 --> 00:26:33,560 Speaker 4: and then put it 607 00:26:33,560 --> 00:26:34,060 Speaker 2: around. 608 00:26:34,310 --> 00:26:35,100 Speaker 2: Yeah, that's what I mean. 609 00:26:35,340 --> 00:26:35,400 Speaker 2: Yeah. 610 00:26:35,760 --> 00:26:35,960 Speaker 4: Yeah. 611 00:26:36,320 --> 00:26:37,420 Speaker 4: And if you're very curious about that, 612 00:26:37,540 --> 00:26:39,860 Speaker 4: that's the video I did with Kevin two years ago or something. 613 00:26:41,960 --> 00:26:43,740 Speaker 4: So I don't think much has changed since then, 614 00:26:43,860 --> 00:26:44,440 Speaker 4: maybe even the syntax. 615 00:26:45,840 --> 00:26:46,200 Speaker 1: Nice. 616 00:26:47,220 --> 00:26:47,460 Speaker 1: All right. 617 00:26:49,340 --> 00:26:53,020 Speaker 1: So Storybook has gotten faster, better, smaller? 618 00:26:53,080 --> 00:26:53,420 Speaker 1: Faster and 619 00:26:53,420 --> 00:26:53,780 Speaker 4: smaller. 620 00:26:55,460 --> 00:26:57,020 Speaker 4: Storybook 9 was a lot smaller 621 00:26:57,530 --> 00:27:00,480 Speaker 4: because we just spent like month and month 622 00:27:00,600 --> 00:27:02,540 Speaker 4: of making it smaller with fewer dependencies, 623 00:27:03,740 --> 00:27:04,260 Speaker 4: better dependencies. 624 00:27:04,980 --> 00:27:06,960 Speaker 4: And then for Storybook 10, we're going ESM only, 625 00:27:08,660 --> 00:27:09,960 Speaker 5: which is huge 626 00:27:09,960 --> 00:27:11,280 Speaker 4: for us as maintainers. 627 00:27:11,840 --> 00:27:12,020 Speaker 4: Yes. 628 00:27:12,920 --> 00:27:13,140 Speaker 5: But it's 629 00:27:13,140 --> 00:27:13,920 Speaker 4: also huge for users 630 00:27:14,230 --> 00:27:16,160 Speaker 4: because users ran into a lot of issues like, 631 00:27:16,300 --> 00:27:19,200 Speaker 4: oh, this is the CSS file that you really did not want. 632 00:27:20,420 --> 00:27:23,000 Speaker 4: and we're just eliminating a huge chunk of bugs. 633 00:27:24,600 --> 00:27:26,520 Speaker 4: It is a breaking change for a lot of people, 634 00:27:26,570 --> 00:27:27,680 Speaker 4: but I think for the Svelte community, 635 00:27:27,820 --> 00:27:29,000 Speaker 4: it's not so much a breaking change 636 00:27:29,110 --> 00:27:31,720 Speaker 4: because everything is E-Sem only anyway in Svelte. 637 00:27:31,840 --> 00:27:32,940 Speaker 4: So I 638 00:27:32,940 --> 00:27:33,120 Speaker 2: wouldn't 639 00:27:33,120 --> 00:27:34,200 Speaker 4: expect a lot of issues there. 640 00:27:35,540 --> 00:27:36,540 Speaker 2: I have kind of 641 00:27:36,540 --> 00:27:36,960 Speaker 4: a random 642 00:27:36,960 --> 00:27:37,860 Speaker 2: question too. 643 00:27:38,200 --> 00:27:38,400 Speaker 4: Good. 644 00:27:40,700 --> 00:27:43,600 Speaker 2: So we have a very large icon library, 645 00:27:43,770 --> 00:27:45,440 Speaker 2: like the entire material library. 646 00:27:45,580 --> 00:27:46,840 Speaker 2: It's like over 2000 icons. 647 00:27:47,520 --> 00:27:51,860 Speaker 2: And at first I was importing it and it was not tree shaking it very well. 648 00:27:52,100 --> 00:27:56,980 Speaker 2: We have to import the direct file rather than the entire library. 649 00:27:58,200 --> 00:28:04,260 Speaker 2: And Storybook, it will still even freeze up sometimes when there's a lot of icons on the page. 650 00:28:04,960 --> 00:28:05,320 Speaker 5: Is there 651 00:28:05,320 --> 00:28:06,860 Speaker 2: something I'm doing wrong there? 652 00:28:06,990 --> 00:28:10,000 Speaker 2: Or does that need to be done in a different way? 653 00:28:12,179 --> 00:28:14,660 Speaker 4: It's still in Stories only, right? 654 00:28:14,670 --> 00:28:16,720 Speaker 4: You're not putting the icons in the manager UI, are you? 655 00:28:17,920 --> 00:28:20,440 Speaker 2: The icons are in the components, not 656 00:28:20,440 --> 00:28:22,120 Speaker 4: in Storybook, 657 00:28:22,380 --> 00:28:22,440 Speaker 2: no. 658 00:28:23,360 --> 00:28:24,300 Speaker 4: I mean, I don't know. 659 00:28:24,300 --> 00:28:28,260 Speaker 4: I think so Storybook in that regard just does the same sort of bundling 660 00:28:28,600 --> 00:28:29,620 Speaker 4: as your application would do. 661 00:28:31,960 --> 00:28:41,280 Speaker 4: And so I would expect that the output would be the same as you should have. 662 00:28:41,740 --> 00:28:45,440 Speaker 4: We do have some performance regressions that I'm fixing, 663 00:28:45,840 --> 00:28:51,360 Speaker 4: which is essentially Storybook does some automatic code doc gen 664 00:28:51,840 --> 00:28:53,560 Speaker 4: where we parse all your cell files, 665 00:28:53,620 --> 00:28:54,640 Speaker 4: and then we see what are the props 666 00:28:54,820 --> 00:28:57,400 Speaker 4: so you can have a nice props table and such. 667 00:28:57,900 --> 00:28:58,620 Speaker 5: And right now we do 668 00:28:58,620 --> 00:28:59,880 Speaker 4: that for all your cell components 669 00:29:00,200 --> 00:29:01,360 Speaker 4: in your whole module graph. 670 00:29:01,460 --> 00:29:03,920 Speaker 4: And so that means that you have 5,000 icons. 671 00:29:04,660 --> 00:29:04,920 Speaker 2: Yeah. 672 00:29:05,080 --> 00:29:05,580 Speaker 2: We'll 673 00:29:05,580 --> 00:29:07,520 Speaker 4: parse all those icons, and that's a waste of time. 674 00:29:08,420 --> 00:29:09,260 Speaker 4: So maybe that's what's happening, 675 00:29:09,980 --> 00:29:11,580 Speaker 4: and then there's a way to disable that. 676 00:29:12,080 --> 00:29:16,960 Speaker 4: But otherwise, I would still, even with the E18E community, 677 00:29:17,060 --> 00:29:18,960 Speaker 4: also says it's like avoid the barrel files. 678 00:29:19,800 --> 00:29:23,200 Speaker 4: Just import the components or the icons explicitly. 679 00:29:23,940 --> 00:29:24,260 Speaker 6: Okay. 680 00:29:24,590 --> 00:29:24,780 Speaker 4: Yeah, 681 00:29:24,860 --> 00:29:25,620 Speaker 6: that's what we're doing. 682 00:29:26,030 --> 00:29:26,300 Speaker 6: I just 683 00:29:26,300 --> 00:29:27,460 Speaker 4: still 684 00:29:27,460 --> 00:29:28,160 Speaker 6: have that sometimes. 685 00:29:29,400 --> 00:29:29,540 Speaker 4: Yeah. 686 00:29:31,080 --> 00:29:31,580 Speaker 4: I don't know. 687 00:29:31,950 --> 00:29:33,520 Speaker 4: It could be the performance forgave I'm talking about. 688 00:29:36,020 --> 00:29:37,780 Speaker 4: I think sometimes we'll auto import 689 00:29:37,780 --> 00:29:39,000 Speaker 2: stuff and it will come. 690 00:29:39,180 --> 00:29:39,740 Speaker 1: Over a podcast. 691 00:29:40,300 --> 00:29:42,240 Speaker 4: Auto imports are sometimes annoying. 692 00:29:42,480 --> 00:29:42,740 Speaker 4: That's true. 693 00:29:42,900 --> 00:29:43,100 Speaker 2: Yeah. 694 00:29:45,520 --> 00:29:47,140 Speaker 1: Any other questions for Jepa? 695 00:29:47,280 --> 00:29:51,360 Speaker 1: Or do you have any other topics? 696 00:29:51,640 --> 00:29:52,220 Speaker 1: Well, you asked 697 00:29:52,220 --> 00:29:53,340 Speaker 4: what we're working on. 698 00:29:53,360 --> 00:29:57,420 Speaker 4: And so I can also say that we readied our documentation for Svelte. 699 00:29:58,180 --> 00:30:00,560 Speaker 4: Before it was just a readme in a repository. 700 00:30:00,820 --> 00:30:03,160 Speaker 4: Now I have to put it in the official Storybook 701 00:30:03,160 --> 00:30:03,320 Speaker 5: Docs. 702 00:30:03,340 --> 00:30:03,760 Speaker 5: That's great. 703 00:30:04,040 --> 00:30:08,780 Speaker 4: We also rewrote the, we have like an introduction tutorial for each framework. 704 00:30:09,220 --> 00:30:10,560 Speaker 4: And we rewrote that from scratch. 705 00:30:11,540 --> 00:30:14,580 Speaker 4: So it's Svelte 5, and so it's SvelteKit and such, 706 00:30:14,760 --> 00:30:16,040 Speaker 4: and with the new Svelte CSF syntax. 707 00:30:19,440 --> 00:30:22,080 Speaker 4: That's really important to us because that specific tutorial 708 00:30:22,190 --> 00:30:23,720 Speaker 4: actually ranks pretty high in Google, 709 00:30:23,830 --> 00:30:25,220 Speaker 4: so we have a lot of visitors there. 710 00:30:25,300 --> 00:30:25,360 Speaker 4: Yeah. 711 00:30:25,960 --> 00:30:26,680 Speaker 4: Oh, nice. 712 00:30:28,940 --> 00:30:29,920 Speaker 4: Yeah, other than that, I mean, 713 00:30:32,940 --> 00:30:37,380 Speaker 4: we rely heavily on snippets in the new Svelte 5 world, 714 00:30:38,040 --> 00:30:39,240 Speaker 4: And that's great. 715 00:30:39,260 --> 00:30:41,440 Speaker 4: I mean, snippets are great for Storybook. 716 00:30:42,360 --> 00:30:44,980 Speaker 4: I don't know how much they're used outside of that use case, 717 00:30:45,200 --> 00:30:47,640 Speaker 4: but in Storybook, it's an awesome API to leverage. 718 00:30:48,560 --> 00:30:50,540 Speaker 4: So hopefully we can do that more in the future. 719 00:30:52,220 --> 00:30:52,380 Speaker 1: Yeah. 720 00:30:52,980 --> 00:30:55,160 Speaker 1: Snippets are such an improvement over slots, 721 00:30:56,100 --> 00:30:59,160 Speaker 1: even just like an application developer. 722 00:31:02,460 --> 00:31:02,580 Speaker 1: Right. 723 00:31:03,680 --> 00:31:11,980 Speaker 1: So what, after Storybook 10, what can we expect? 724 00:31:12,380 --> 00:31:14,900 Speaker 1: Is it going to get even better, faster, and smaller? 725 00:31:15,760 --> 00:31:16,400 Speaker 1: Or is this secret? 726 00:31:16,820 --> 00:31:18,260 Speaker 1: All of them, all the time. 727 00:31:21,739 --> 00:31:26,880 Speaker 4: So we have a lot of, especially chromatic customers, 728 00:31:27,980 --> 00:31:31,480 Speaker 4: but also Storybook users that are asking for better AI support. 729 00:31:32,860 --> 00:31:36,680 Speaker 4: And you can have your opinions about AI and agents. 730 00:31:37,040 --> 00:31:38,000 Speaker 4: I certainly have mine. 731 00:31:38,580 --> 00:31:41,800 Speaker 4: But the matter of fact is that we want to give something 732 00:31:41,880 --> 00:31:43,380 Speaker 4: to these users that are asking for it. 733 00:31:43,380 --> 00:31:46,160 Speaker 4: And so we're building a few Storybook MCP servers, 734 00:31:47,580 --> 00:31:48,820 Speaker 4: especially for design systems. 735 00:31:48,940 --> 00:31:50,160 Speaker 4: So if you build your design system, 736 00:31:51,020 --> 00:31:55,340 Speaker 4: then we'll make a tool that makes it easier 737 00:31:55,340 --> 00:31:58,340 Speaker 4: for consumers of that design system to use it. 738 00:31:58,660 --> 00:32:01,940 Speaker 4: So the agents will understand what is actually the components 739 00:32:01,960 --> 00:32:03,940 Speaker 4: that it can use from the design system and such. 740 00:32:04,360 --> 00:32:04,460 Speaker 4: Yeah. 741 00:32:05,040 --> 00:32:05,160 Speaker 1: Nice. 742 00:32:05,540 --> 00:32:10,700 Speaker 1: So this would interact then with some deployed storybook. 743 00:32:10,840 --> 00:32:11,480 Speaker 4: Exactly, right. 744 00:32:12,440 --> 00:32:12,840 Speaker 1: So 745 00:32:12,840 --> 00:32:14,680 Speaker 4: the idea is that when you deploy a storybook, 746 00:32:14,680 --> 00:32:15,680 Speaker 4: when you publish a storybook, 747 00:32:16,120 --> 00:32:17,760 Speaker 4: it'll also publish some JSON files 748 00:32:18,440 --> 00:32:20,600 Speaker 4: that includes all the information that you put in, 749 00:32:20,740 --> 00:32:21,820 Speaker 4: like components and props, 750 00:32:22,020 --> 00:32:23,280 Speaker 4: and maybe you have descriptions, 751 00:32:23,520 --> 00:32:24,640 Speaker 4: and maybe you have like examples. 752 00:32:25,740 --> 00:32:28,440 Speaker 4: And then the MCP server will pull from that information. 753 00:32:30,920 --> 00:32:31,540 Speaker 4: So that's exciting. 754 00:32:31,900 --> 00:32:33,860 Speaker 4: there's at least a lot of people that are excited about that 755 00:32:33,950 --> 00:32:36,340 Speaker 4: but as we know there's also people that hate that 756 00:32:36,610 --> 00:32:37,200 Speaker 4: and that's totally fine 757 00:32:38,480 --> 00:32:40,040 Speaker 1: well I mean you don't have 758 00:32:40,040 --> 00:32:40,420 Speaker 4: to use it 759 00:32:40,950 --> 00:32:41,660 Speaker 4: if you don't want it 760 00:32:41,880 --> 00:32:42,060 Speaker 4: exactly 761 00:32:43,190 --> 00:32:45,480 Speaker 4: and the cool thing about this is that it's solely separated 762 00:32:45,960 --> 00:32:47,040 Speaker 4: so because we have a lot of 763 00:32:47,230 --> 00:32:48,100 Speaker 4: maybe Brittany can understand 764 00:32:48,610 --> 00:32:51,220 Speaker 4: but we have a lot of design system users over the years 765 00:32:51,660 --> 00:32:52,420 Speaker 4: that have been asking us 766 00:32:52,560 --> 00:32:55,200 Speaker 4: can I please have this information that I put into Storybook 767 00:32:55,300 --> 00:32:57,040 Speaker 4: can I get a way to get it out of Storybook again 768 00:32:57,520 --> 00:32:59,600 Speaker 4: because you want to build your own documentation website 769 00:32:59,750 --> 00:33:01,600 Speaker 4: or you want to I don't know whatever 770 00:33:02,160 --> 00:33:02,580 Speaker 4: And so we're 771 00:33:02,580 --> 00:33:03,660 Speaker 5: building that as part of this 772 00:33:03,660 --> 00:33:11,000 Speaker 4: because we're now building these JSON files or these JSON endpoints that, well, you can consume them however you want. 773 00:33:11,000 --> 00:33:12,280 Speaker 4: You don't have to use the MTP server. 774 00:33:12,290 --> 00:33:14,560 Speaker 4: You can also just use them as information. 775 00:33:15,200 --> 00:33:15,740 Speaker 2: That's cool. 776 00:33:15,860 --> 00:33:21,320 Speaker 2: I actually just wanted a better way to document within Storybook because I wanted it to live in one place. 777 00:33:21,390 --> 00:33:27,200 Speaker 2: I was building a separate documentation site at my last job, and that would have been useful. 778 00:33:27,570 --> 00:33:29,640 Speaker 2: Yeah, like just pulling over the stories. 779 00:33:29,820 --> 00:33:33,020 Speaker 2: I would just throw the storybook link in there if they wanted to go to the story. 780 00:33:33,460 --> 00:33:37,620 Speaker 2: But then you're like, you're pulling props out again and like having to list all of those, 781 00:33:37,940 --> 00:33:39,880 Speaker 2: all of your types are being listed out separately. 782 00:33:40,380 --> 00:33:41,460 Speaker 2: Like it would be 783 00:33:41,460 --> 00:33:41,800 Speaker 1: useful. 784 00:33:42,660 --> 00:33:46,480 Speaker 1: And making sure that like, oh, you changed the component. 785 00:33:47,000 --> 00:33:48,020 Speaker 2: Yeah, you got to change it in 786 00:33:48,020 --> 00:33:48,900 Speaker 5: three different places. 787 00:33:49,380 --> 00:33:49,520 Speaker 5: Yeah. 788 00:33:50,020 --> 00:33:50,520 Speaker 1: Right, right, right. 789 00:33:50,640 --> 00:33:50,760 Speaker 1: Exactly. 790 00:33:51,240 --> 00:33:52,680 Speaker 1: Just bound to become a mess. 791 00:33:52,920 --> 00:33:53,560 Speaker 1: So that's nice. 792 00:33:53,980 --> 00:33:59,400 Speaker 1: So does that also mean that we can kind of almost build our own front end for storybook? 793 00:34:00,220 --> 00:34:02,080 Speaker 1: sure just consuming the json files 794 00:34:02,080 --> 00:34:03,720 Speaker 2: yeah uh 795 00:34:03,720 --> 00:34:05,840 Speaker 1: i mean i guess you could already do that 796 00:34:05,840 --> 00:34:06,620 Speaker 4: somehow 797 00:34:07,960 --> 00:34:12,440 Speaker 4: but yeah well so so storybook does a lot of automated uh like we automatically extract 798 00:34:12,460 --> 00:34:14,000 Speaker 4: the prop types from your components 799 00:34:14,000 --> 00:34:14,639 Speaker 5: and put them 800 00:34:14,639 --> 00:34:17,919 Speaker 4: in right and so so that information will be now 801 00:34:18,100 --> 00:34:19,280 Speaker 4: available to you at runtime 802 00:34:19,280 --> 00:34:20,440 Speaker 1: uh 803 00:34:20,440 --> 00:34:25,200 Speaker 4: for anything right um you can also it's always been possible to 804 00:34:25,260 --> 00:34:27,419 Speaker 4: embed stories as iframes. 805 00:34:28,940 --> 00:34:31,320 Speaker 4: And so you could potentially combine this 806 00:34:31,899 --> 00:34:33,620 Speaker 4: into whatever you want, right? 807 00:34:34,260 --> 00:34:34,360 Speaker 4: Yeah. 808 00:34:35,659 --> 00:34:38,600 Speaker 4: There's some really like the power users 809 00:34:39,120 --> 00:34:41,659 Speaker 4: of design systems, they want their own UI. 810 00:34:43,260 --> 00:34:44,020 Speaker 4: And that's totally fine. 811 00:34:44,139 --> 00:34:45,639 Speaker 4: We're also working on, speaking of that, 812 00:34:45,649 --> 00:34:46,700 Speaker 4: we're also working on improving 813 00:34:46,750 --> 00:34:47,960 Speaker 4: the theming support of Storybook. 814 00:34:49,679 --> 00:34:50,139 Speaker 4: So 815 00:34:50,139 --> 00:34:54,820 Speaker 5: if you want to use 816 00:34:54,820 --> 00:34:58,860 Speaker 4: Storybook as like the front for your company, 817 00:35:00,040 --> 00:35:02,580 Speaker 4: then making it look great is also important for a lot of people 818 00:35:03,000 --> 00:35:04,840 Speaker 4: or making it look like your brand. 819 00:35:05,920 --> 00:35:08,680 Speaker 4: And the APIs we have for that now are okay. 820 00:35:09,800 --> 00:35:11,440 Speaker 2: Yeah, it's kind of difficult now. 821 00:35:13,000 --> 00:35:15,760 Speaker 4: And so we want to rely more on like the standards, 822 00:35:15,860 --> 00:35:20,620 Speaker 4: CSS variables and whatever the web platform provides. 823 00:35:21,240 --> 00:35:23,520 Speaker 2: You should see my storybook CSS file. 824 00:35:23,760 --> 00:35:30,120 Speaker 2: It's hitting every specifier down the chain trying to get to the right thing. 825 00:35:30,520 --> 00:35:30,720 Speaker 4: Yeah. 826 00:35:31,260 --> 00:35:32,360 Speaker 2: That does not sound fun. 827 00:35:32,900 --> 00:35:33,020 Speaker 2: No. 828 00:35:34,340 --> 00:35:38,000 Speaker 4: So that's also been a requested feature for many of our power users for years 829 00:35:38,200 --> 00:35:42,620 Speaker 4: that they can make it easier to make their storybook look however they want, 830 00:35:42,720 --> 00:35:44,460 Speaker 4: like with dark theme and stuff. 831 00:35:45,280 --> 00:35:45,440 Speaker 1: Yeah. 832 00:35:46,740 --> 00:35:46,820 Speaker 2: cool 833 00:35:46,820 --> 00:35:47,120 Speaker 1: that 834 00:35:47,120 --> 00:35:48,760 Speaker 2: sounds exciting yeah 835 00:35:48,760 --> 00:35:54,400 Speaker 1: all right so i think we are actually running out in 836 00:35:55,260 --> 00:35:59,780 Speaker 1: running out of time britney you need to leave in six minutes i think four minutes 837 00:35:59,780 --> 00:36:00,200 Speaker 5: i 838 00:36:00,200 --> 00:36:00,480 Speaker 1: don't know 839 00:36:01,060 --> 00:36:02,600 Speaker 1: something like that tight 840 00:36:02,600 --> 00:36:03,580 Speaker 5: all right can 841 00:36:03,580 --> 00:36:07,720 Speaker 1: we can we do unpopular opinions and picks before that 842 00:36:09,460 --> 00:36:14,240 Speaker 1: i'm gonna skip my unpopular opinion does anyone have a short unpopular opinion 843 00:36:15,160 --> 00:36:15,820 Speaker 4: I have one 844 00:36:17,040 --> 00:36:18,860 Speaker 4: so I'm doing a lot of project planning 845 00:36:19,220 --> 00:36:21,180 Speaker 4: lately, not just coding but also planning projects 846 00:36:21,460 --> 00:36:22,800 Speaker 4: and I like GAM charts 847 00:36:23,300 --> 00:36:23,980 Speaker 5: I like 848 00:36:27,300 --> 00:36:27,820 Speaker 4: you know 849 00:36:28,720 --> 00:36:30,580 Speaker 4: if you have a project and you have multiple 850 00:36:31,020 --> 00:36:32,880 Speaker 4: team members, then everyone 851 00:36:32,940 --> 00:36:34,800 Speaker 4: in their head has like, I have to do this task 852 00:36:34,820 --> 00:36:36,740 Speaker 4: and then after that I do that task and then that task 853 00:36:37,200 --> 00:36:38,820 Speaker 4: and for me, that lives 854 00:36:38,880 --> 00:36:40,800 Speaker 4: inside my head, but when I put it on screen 855 00:36:41,420 --> 00:36:43,020 Speaker 4: as a GAM chart, it's like this timeline 856 00:36:43,040 --> 00:36:45,220 Speaker 4: chart. I can see, oh wow, this task 857 00:36:46,140 --> 00:36:46,820 Speaker 4: completely is 858 00:36:47,020 --> 00:36:48,960 Speaker 4: completely impossible to do. I have to move it over to 859 00:36:49,040 --> 00:36:49,600 Speaker 4: that member instead. 860 00:36:50,980 --> 00:36:52,580 Speaker 4: It appears that I'm the only one. 861 00:36:53,880 --> 00:36:55,160 Speaker 5: Well, my old designer 862 00:36:55,250 --> 00:36:56,020 Speaker 5: used to like them. 863 00:36:57,500 --> 00:36:57,700 Speaker 4: Exactly. 864 00:36:58,610 --> 00:36:59,380 Speaker 3: He liked drawing them. 865 00:37:00,660 --> 00:37:02,660 Speaker 2: It was a good visual for people, I think. 866 00:37:04,540 --> 00:37:05,260 Speaker 3: I have 867 00:37:05,310 --> 00:37:07,060 Speaker 3: an opinion about an unpopular 868 00:37:07,220 --> 00:37:08,120 Speaker 3: opinion, if that makes sense. 869 00:37:08,900 --> 00:37:10,400 Speaker 3: My opinion is that 870 00:37:11,010 --> 00:37:13,000 Speaker 3: there are certain CEOs have 871 00:37:13,020 --> 00:37:19,660 Speaker 3: popular opinions right um and i think that my opinion on that that fact is that ultimately i'm 872 00:37:19,820 --> 00:37:26,900 Speaker 3: quite happy um to see the way the community is responding to should we ditch swelts felt should 873 00:37:26,900 --> 00:37:31,800 Speaker 3: we ditch react should we ditch next js whatever like the way the community is responding around 874 00:37:31,850 --> 00:37:36,420 Speaker 3: these things is actually really positive and i've not seen much kind of like knee jerk yeah throw 875 00:37:36,420 --> 00:37:40,800 Speaker 3: all the bins start with whatever else angular whatever's going on nowadays but you know it's 876 00:37:40,820 --> 00:37:41,780 Speaker 3: it's been a bit more positive. 877 00:37:41,960 --> 00:37:43,100 Speaker 3: It's been a bit more like, you know, 878 00:37:43,900 --> 00:37:45,120 Speaker 3: Svelte is an independent project, 879 00:37:45,360 --> 00:37:46,320 Speaker 3: Svelte is an independent project, 880 00:37:47,120 --> 00:37:48,320 Speaker 3: direction is not defined, you know, 881 00:37:48,420 --> 00:37:49,540 Speaker 3: it's all this kind of cool stuff, 882 00:37:49,690 --> 00:37:51,500 Speaker 3: which is really heartwarming 883 00:37:51,610 --> 00:37:52,560 Speaker 3: because it's usually the opposite. 884 00:37:52,980 --> 00:37:54,640 Speaker 3: So that's my opinion. 885 00:37:55,100 --> 00:37:55,980 Speaker 4: I agree. Fair enough. 886 00:37:56,690 --> 00:37:56,800 Speaker 4: Yeah. 887 00:37:57,080 --> 00:37:58,320 Speaker 4: I mean, the Svelte community in general 888 00:37:58,440 --> 00:37:59,360 Speaker 4: is very heartwarming. 889 00:37:59,880 --> 00:38:00,740 Speaker 4: I learned 890 00:38:00,740 --> 00:38:01,540 Speaker 1: that in Barcelona. 891 00:38:01,980 --> 00:38:02,340 Speaker 1: People 892 00:38:02,340 --> 00:38:04,200 Speaker 4: are just so nice to each other. 893 00:38:05,459 --> 00:38:07,040 Speaker 1: Yeah, it really is the best. 894 00:38:07,999 --> 00:38:08,720 Speaker 1: I agree. 895 00:38:10,640 --> 00:38:14,240 Speaker 1: All right. Picks? Anyone? 896 00:38:15,860 --> 00:38:16,300 Speaker 1: I 897 00:38:16,300 --> 00:38:18,240 pick... Can I go? 898 00:38:19,350 --> 00:38:19,860 Speaker 1: Yeah, go for it. 899 00:38:21,160 --> 00:38:22,760 Speaker 3: I pick Pennsylvania Castle. 900 00:38:24,220 --> 00:38:26,520 Speaker 3: Not just because I'm in it, but it is really cool. 901 00:38:26,760 --> 00:38:27,320 Speaker 3: It's really nice. 902 00:38:27,560 --> 00:38:31,580 Speaker 3: A lot of castles you go to are kind of falling apart and cold and everything else. 903 00:38:31,680 --> 00:38:33,980 Speaker 3: This castle is really plush and nice inside. 904 00:38:34,380 --> 00:38:35,480 Speaker 3: There's lots of big old rooms. 905 00:38:35,560 --> 00:38:42,140 Speaker 3: apparently Eisenhower and someone else, three very famous old president-type people, 906 00:38:42,740 --> 00:38:48,360 Speaker 3: President Eisenhower is one of them, met in one of these rooms to discuss the invasion of, 907 00:38:49,840 --> 00:38:53,120 Speaker 3: was it the Battle of Bastille? It was somewhere in France. 908 00:38:54,060 --> 00:39:00,040 Speaker 3: My history is not wonderful, but they met in one of these rooms to decide to invade in 909 00:39:00,040 --> 00:39:00,640 Speaker 5: historic times. 910 00:39:00,800 --> 00:39:01,020 Speaker 3: So this 911 00:39:01,020 --> 00:39:01,920 Speaker 5: castle's got 912 00:39:01,920 --> 00:39:03,260 Speaker 3: quite a bit of a history behind it. 913 00:39:03,600 --> 00:39:06,840 Speaker 3: But it's now also got a heated swimming pool, which is right behind me, which is awesome. 914 00:39:07,800 --> 00:39:09,960 Speaker 3: And it's just cavernous and you can wander around. 915 00:39:10,060 --> 00:39:13,560 Speaker 3: And there's a room that's in like, I mean, none of the listeners can see, 916 00:39:13,660 --> 00:39:15,840 Speaker 3: but there's a room that's in the turret over there, 917 00:39:16,860 --> 00:39:18,720 Speaker 3: which is a really cool round bedroom. 918 00:39:18,940 --> 00:39:21,620 Speaker 3: And one of them's got an armoire that opens up full of clothes, 919 00:39:21,860 --> 00:39:23,300 Speaker 3: like rotating doors and stuff. 920 00:39:23,380 --> 00:39:23,460 Speaker 3: It's 921 00:39:23,460 --> 00:39:23,920 Speaker 5: very cool. 922 00:39:24,060 --> 00:39:24,540 Speaker 5: It's very cool. 923 00:39:25,300 --> 00:39:27,440 Speaker 1: Sounds like a very modern kind of castle. 924 00:39:28,840 --> 00:39:31,660 Speaker 3: Yeah, it's an ancient castle that's modern. 925 00:39:32,180 --> 00:39:33,400 Speaker 3: It feels comfortable. 926 00:39:33,560 --> 00:39:34,540 Speaker 3: I can't explain it yet. 927 00:39:34,970 --> 00:39:36,180 Speaker 3: But everything inside is old. 928 00:39:36,180 --> 00:39:37,120 Speaker 3: It's just well maintained. 929 00:39:37,880 --> 00:39:39,540 Speaker 3: And Bianca hired all of it. 930 00:39:40,020 --> 00:39:40,940 Speaker 3: We had the whole castle 931 00:39:40,940 --> 00:39:42,420 Speaker 5: for the last four 932 00:39:42,420 --> 00:39:42,700 Speaker 2: days. 933 00:39:43,420 --> 00:39:44,560 Speaker 2: So we're just having like a retreat. 934 00:39:46,120 --> 00:39:46,720 Speaker 2: Oh, my God. 935 00:39:46,940 --> 00:39:47,340 Speaker 2: That's amazing. 936 00:39:47,760 --> 00:39:50,060 Speaker 3: And it's been blazing sun apart from today. 937 00:39:50,250 --> 00:39:51,860 Speaker 3: So we've been swimming in the sea, which is just 938 00:39:51,860 --> 00:39:52,720 Speaker 5: incredible. 939 00:39:53,800 --> 00:39:54,520 Speaker 3: Yeah, it's great. 940 00:39:55,580 --> 00:39:56,060 Speaker 3: On that 941 00:39:56,060 --> 00:40:00,060 Speaker 2: theme, I'm going to pick Spain because a lot of people like go into Europe. 942 00:40:01,140 --> 00:40:04,180 Speaker 2: I mean, we don't hear very much like Spain is the place to go. 943 00:40:04,310 --> 00:40:14,340 Speaker 2: But when we were there in Barcelona and then we traveled around Spain and it was just not just the history because you get that in all of Europe, but it's just so beautiful. 944 00:40:14,620 --> 00:40:15,740 Speaker 2: There's so many castles. 945 00:40:16,120 --> 00:40:19,680 Speaker 2: Every city was like its own culture and history. 946 00:40:20,240 --> 00:40:21,880 Speaker 2: And it's just it's crazy. 947 00:40:22,160 --> 00:40:23,000 Speaker 2: So I'll pick Spain. 948 00:40:23,400 --> 00:40:23,740 Speaker 1: Good pick. 949 00:40:24,680 --> 00:40:24,920 Speaker 4: Keep it. 950 00:40:25,260 --> 00:40:25,700 Speaker 4: Still like Spain. 951 00:40:27,660 --> 00:40:29,920 Speaker 4: I'll pick something more developing. 952 00:40:30,040 --> 00:40:30,700 Speaker 4: I'll pick Truval. 953 00:40:31,300 --> 00:40:37,820 Speaker 4: so tubal is this app for pairing like screen sharing you call your colleague and then you 954 00:40:37,900 --> 00:40:42,500 Speaker 4: you pair and you share and it's just it has the best video quality it has the best 955 00:40:42,500 --> 00:40:43,640 Speaker 1: uh like 956 00:40:44,740 --> 00:40:47,640 Speaker 4: t-u-p-l-e dot app 957 00:40:47,640 --> 00:40:50,280 Speaker 1: oh yeah yeah i think i've heard about this yeah it's 958 00:40:50,280 --> 00:40:51,600 Speaker 4: amazing like it's just you 959 00:40:51,700 --> 00:40:57,819 Speaker 4: don't have this lag that you get from from slack and you can type in each other's uh screens and 960 00:40:57,840 --> 00:40:57,900 Speaker 4: whatever 961 00:40:57,900 --> 00:40:59,060 Speaker 5: it's just it's 962 00:40:59,060 --> 00:41:03,280 Speaker 4: really and they i think they built the whole streaming video from the 963 00:41:03,400 --> 00:41:04,260 Speaker 4: ground up in some 964 00:41:04,260 --> 00:41:05,580 Speaker 5: assembly 965 00:41:05,580 --> 00:41:07,840 Speaker 4: language just to make it fast and it is super fast 966 00:41:07,840 --> 00:41:09,240 Speaker 5: um is 967 00:41:09,240 --> 00:41:10,160 Speaker 1: it is it tuple 968 00:41:10,920 --> 00:41:13,940 Speaker 4: tuple maybe tuple like like two like a pair 969 00:41:13,940 --> 00:41:17,360 Speaker 1: yes like the data structure well you're 970 00:41:18,160 --> 00:41:18,240 Speaker 4: yeah 971 00:41:18,240 --> 00:41:19,940 Speaker 1: like a data structure oh 972 00:41:19,940 --> 00:41:22,940 Speaker 4: look who's like a native english speaker oh look at me i know words 973 00:41:26,480 --> 00:41:27,120 Speaker 4: oh yeah 974 00:41:28,280 --> 00:41:29,220 Speaker 4: anyways it's great 975 00:41:29,560 --> 00:41:30,280 Speaker 4: I can really recommend 976 00:41:30,300 --> 00:41:31,960 Speaker 4: I'm sure it's also cost stuff 977 00:41:31,960 --> 00:41:32,280 Speaker 4: I don't know 978 00:41:33,380 --> 00:41:35,080 Speaker 1: 30 bucks per user per month 979 00:41:36,180 --> 00:41:37,520 Speaker 4: right it's really great 980 00:41:38,300 --> 00:41:39,200 Speaker 4: we use 981 00:41:39,200 --> 00:41:39,700 Speaker 1: it every day 982 00:41:40,340 --> 00:41:40,920 Speaker 4: multiple hours a day 983 00:41:41,740 --> 00:41:43,120 Speaker 1: I mean that is worth it 984 00:41:43,480 --> 00:41:43,960 Speaker 3: for sure 985 00:41:44,740 --> 00:41:46,180 Speaker 3: yeah if it works it's definitely worth it 986 00:41:46,920 --> 00:41:47,740 Speaker 1: yeah alright 987 00:41:48,700 --> 00:41:50,840 Speaker 1: and I think with that we are done 988 00:41:50,960 --> 00:41:52,920 Speaker 1: because I don't have time for my pick 989 00:41:53,120 --> 00:41:55,720 Speaker 1: So thanks everyone for listening. 990 00:41:56,230 --> 00:41:57,720 Speaker 1: And thank you, Jephthah, for joining us. 991 00:41:58,240 --> 00:42:02,800 Speaker 1: Even if it was a bit short, we can do another one that's longer later. 992 00:42:03,320 --> 00:42:05,180 Speaker 2: Yeah, do a video one with 993 00:42:05,180 --> 00:42:05,440 Speaker 7: you too. 994 00:42:05,490 --> 00:42:05,880 Speaker 7: Yeah, we 995 00:42:05,880 --> 00:42:06,980 Speaker 5: should do the video one. 996 00:42:07,780 --> 00:42:08,200 Speaker 7: All right. 997 00:42:09,240 --> 00:42:10,620 Speaker 7: And with that said, goodbye, everyone. 998 00:42:11,100 --> 00:42:11,240 Speaker 7: Bye. 999 00:42:11,370 --> 00:42:11,920 Speaker 5: Until next time. 1000 00:42:12,320 --> 00:42:12,580 Speaker 5: Bye. 1001 00:42:12,620 --> 00:42:12,840 Speaker 5: Bye-bye. 1002 00:42:13,030 --> 00:42:13,340 Speaker 5: Take care. 1003 00:42:13,520 --> 00:42:13,640 Speaker 7: Bye. 1004 00:42:13,780 --> 00:42:14,220 Speaker 7: I'll see you all.