WEBVTT 1 00:00:05.440 --> 00:00:10.759 Hello, everybody, Welcome to another exciting issue Issue episode. Excuse 2 00:00:10.800 --> 00:00:13.919 me of JavaScript jabber. I am Steve Edwards, the host 3 00:00:13.919 --> 00:00:15.679 with the face for radio and the voice for being 4 00:00:15.679 --> 00:00:18.679 in mind. But I'm still your host, mostly because nobody 5 00:00:18.719 --> 00:00:20.280 else doesn't want to do it and Chuck's not here. 6 00:00:20.359 --> 00:00:23.960 But with me on the panel today we have mister 7 00:00:24.160 --> 00:00:26.879 aj o'neo. How you come in, aj or? How you doing? 8 00:00:26.960 --> 00:00:28.359 Excuse me eo yo yo. 9 00:00:28.480 --> 00:00:33.719 I'm coming at you live from a very wonderful day. 10 00:00:33.759 --> 00:00:39.159 It would seem not too hot, not too cold, good 11 00:00:39.159 --> 00:00:42.880 times here in the shed uneventful. 12 00:00:43.039 --> 00:00:47.840 That's nice, right, Yeah, I'm coming from a it much 13 00:00:47.880 --> 00:00:51.560 cooler Portland. It's like Paul just hit wham all of 14 00:00:51.600 --> 00:00:53.560 a sudden this week and it's not even the twenty first, 15 00:00:53.560 --> 00:00:55.719 which really bugs is not out of me. I prefer 16 00:00:55.799 --> 00:01:01.159 my long, nice summers with warmth, but that's okay. And 17 00:01:01.200 --> 00:01:04.400 our special guests mister Toma Sulkowski, how you doing? 18 00:01:05.280 --> 00:01:05.480 Yeah? 19 00:01:05.799 --> 00:01:10.239 Hi, Hi guys, Hello everyone, I'm good and come at 20 00:01:10.560 --> 00:01:19.159 you from also nice, sly weathered Poland. It's it's evening here, 21 00:01:19.439 --> 00:01:22.640 but I am like super hyped and ready to. 22 00:01:22.920 --> 00:01:26.159 Def with you. Right, So, how warm is it there. 23 00:01:26.200 --> 00:01:28.480 We always have to talk about warmth because Dan's always 24 00:01:28.480 --> 00:01:30.519 complaining about how hot it is and Tel Aviv, but 25 00:01:30.560 --> 00:01:31.879 he's not here to do that today. 26 00:01:31.959 --> 00:01:36.480 So let me just turn on my unit's converter. So 27 00:01:36.560 --> 00:01:38.079 it's sixty. 28 00:01:37.760 --> 00:01:45.200 Four of your okay, warmth, they're about twenty fifteen celsius. 29 00:01:45.480 --> 00:01:47.680 Yeah, yeah, eighteen to twenty. 30 00:01:47.359 --> 00:01:52.640 Damn, getting good at that. Okay, nice? Right, Okay, So 31 00:01:53.000 --> 00:01:56.640 now that we've established weather patterns in our appropriate vicinities, 32 00:01:57.680 --> 00:01:59.760 let's talk about what we're going to talk about, which 33 00:01:59.799 --> 00:02:04.959 is interactive coding tutorials and a little bit of that. 34 00:02:05.120 --> 00:02:09.080 Let to talk from here about these tutorials and making 35 00:02:09.280 --> 00:02:10.800 good tutorials. 36 00:02:10.280 --> 00:02:12.800 Right, Hopefully. 37 00:02:13.599 --> 00:02:17.479 The thing is that it's it's up to the tutorials 38 00:02:17.479 --> 00:02:21.719 creator then, so, but we try to take care of 39 00:02:21.879 --> 00:02:27.039 the all the obstacles before creating the actual tutorials. So yeah, 40 00:02:27.599 --> 00:02:32.039 so I guess we can start with the like just 41 00:02:32.159 --> 00:02:37.240 tutorial part because I think this has been on the 42 00:02:37.280 --> 00:02:42.680 programming scene for like forever pretty much. It's actually there's 43 00:02:42.719 --> 00:02:49.680 like this one cool uh, talk about four quadrons of 44 00:02:49.800 --> 00:02:58.560 documentation and how to guides walk through the like reference 45 00:02:58.680 --> 00:03:02.479 like API reference and tutorials, right, so it's nothing new 46 00:03:02.639 --> 00:03:03.280 on one hand. 47 00:03:03.319 --> 00:03:04.560 On the second hand, we have the. 48 00:03:04.599 --> 00:03:09.159 Interactive part, which I think like that's that's the exciting 49 00:03:09.240 --> 00:03:13.000 thing that since existed several years ago. 50 00:03:13.120 --> 00:03:20.599 So yeah, okay, so tutorials can't This is the starting point. 51 00:03:21.520 --> 00:03:26.520 If anybody wants to to go look at this while 52 00:03:26.560 --> 00:03:29.159 we're talking, I'll put the link there here on the screen. 53 00:03:31.680 --> 00:03:34.599 So give us the rundown on what it is, what 54 00:03:34.680 --> 00:03:38.400 it's built on, you know, the tech stack, and then 55 00:03:38.800 --> 00:03:39.599 how to use it. 56 00:03:41.000 --> 00:03:41.280 Cool. 57 00:03:41.360 --> 00:03:46.520 So I think that the best introduction to this, to 58 00:03:46.560 --> 00:03:50.879 the what it is and what it can do, is 59 00:03:50.960 --> 00:03:54.680 kind of a little bit of history, and it starts with. 60 00:03:57.319 --> 00:04:00.199 The school dude call rich Carries. I don't know if 61 00:04:00.199 --> 00:04:01.000 you know him. 62 00:04:01.319 --> 00:04:03.680 Yes, we just talked to him. With the past month, 63 00:04:03.719 --> 00:04:06.759 I think doctor Richards swell kid. I think it's five 64 00:04:07.000 --> 00:04:10.000 actually five coming out, So yeah, we factor very recently. 65 00:04:11.199 --> 00:04:11.560 Here we go. 66 00:04:11.759 --> 00:04:16.120 So Richie is a very great like communicator and educates 67 00:04:16.160 --> 00:04:22.800 about spells and spelled kids like really perfectly super inspiration. 68 00:04:23.439 --> 00:04:29.639 And and when they launched the Spelt initially they already 69 00:04:29.879 --> 00:04:33.759 had an interactive tutorial which Force felt, being like a 70 00:04:33.839 --> 00:04:40.160 front end library, it was doable let's say, so they 71 00:04:40.199 --> 00:04:40.680 built this. 72 00:04:43.079 --> 00:04:48.279 Spelt tutorial, and from the feedback from. 73 00:04:48.079 --> 00:04:50.720 The community, it seems like that was one of the 74 00:04:50.879 --> 00:04:53.959 big reasons why i Felt got so popular so quickly, 75 00:04:54.480 --> 00:04:57.639 and why it's so easy to get into spell because 76 00:04:57.680 --> 00:05:03.199 you can just cook up topic or a syntax element 77 00:05:03.279 --> 00:05:07.680 of Spelt and have an actual page with an exercise 78 00:05:07.839 --> 00:05:14.040 and explanation and everything. So this learning experience is really cool. 79 00:05:14.920 --> 00:05:18.800 But then, as you mentioned spelt Kit, when speltky Tamal 80 00:05:18.879 --> 00:05:23.199 came along, it was more tricky to make a tutorial 81 00:05:23.319 --> 00:05:28.759 like this in the browser, right So thankfully in the meantime, 82 00:05:29.279 --> 00:05:35.319 stag Bits where I come from, built web containers and 83 00:05:35.480 --> 00:05:43.040 web containers very short recap are like super small OS 84 00:05:43.079 --> 00:05:45.680 in a browser. So basically you have a file system, 85 00:05:46.240 --> 00:05:50.439 you have a kit integration, you can run node. Most 86 00:05:50.439 --> 00:05:55.560 importantly for us, and for the first couple of years 87 00:05:55.600 --> 00:05:59.560 it was working exclusively on stack liledz dot com, so 88 00:05:59.600 --> 00:06:03.120 it was only the engine for staggers outcome projects that 89 00:06:03.199 --> 00:06:06.680 you can launch with, not new or at the other 90 00:06:07.120 --> 00:06:08.360 stagg with starters. 91 00:06:08.959 --> 00:06:13.000 But when spelt kit was. 92 00:06:15.279 --> 00:06:19.120 Closing to be the one zero version, Rich wanted to 93 00:06:19.319 --> 00:06:23.360 have a tutorial for Spelt kit as well, so he 94 00:06:23.560 --> 00:06:26.800 reached out to us so we can create some kind 95 00:06:26.839 --> 00:06:30.399 of API to use web containers with tutorials. 96 00:06:30.839 --> 00:06:35.600 So that's how web Containers API came about. 97 00:06:36.000 --> 00:06:42.439 And so basically that was our design partner for creating 98 00:06:42.480 --> 00:06:46.480 web containers API and spelt Kit tutorial As you can 99 00:06:46.560 --> 00:06:49.160 see right now when you go to spelc tit tutorials, 100 00:06:49.199 --> 00:06:55.279 you see like putting web containers. That's how that's what 101 00:06:55.279 --> 00:06:58.360 what is built on behind the scenes and why the 102 00:06:58.439 --> 00:07:02.199 back end aspects of felt Kit work in the tutorial. 103 00:07:02.720 --> 00:07:04.680 So yeah, so real quick, I'll jump in and say 104 00:07:04.720 --> 00:07:09.040 that we talked to Eric Simon's from Stackplits about web 105 00:07:09.079 --> 00:07:17.439 containers in JavaScript Jabber episode four eight seven. So if 106 00:07:17.480 --> 00:07:20.319 you want to hear more about the web containers and 107 00:07:20.319 --> 00:07:22.000 how they work. The big issue is being able to 108 00:07:22.040 --> 00:07:26.839 run note in the browser basically from that's from gosh, 109 00:07:26.839 --> 00:07:29.800 that's three years ago, so juneated twenty twenty one was 110 00:07:29.839 --> 00:07:33.240 when that came out. So but link in the show 111 00:07:33.240 --> 00:07:34.759 notes and I'll put it here on the screen if 112 00:07:34.800 --> 00:07:36.079 you want to go back and listen to that. 113 00:07:37.160 --> 00:07:42.480 Yeah, just to add to that, like we're constantly working 114 00:07:42.560 --> 00:07:46.439 on low containers, so primarily on the note part because 115 00:07:46.519 --> 00:07:50.720 we are keeping up with the other releases. But since 116 00:07:50.800 --> 00:07:58.199 then we've also released an initial experimental version of Python 117 00:07:58.240 --> 00:08:02.959 support and PHP, and we can support. 118 00:08:04.800 --> 00:08:06.160 Ask light as well. 119 00:08:06.279 --> 00:08:10.480 So it's still work in progress, supporting more and more 120 00:08:10.639 --> 00:08:11.439 interesting stuff. 121 00:08:11.800 --> 00:08:14.519 Okay, so let me go back there. As a PHP developer, 122 00:08:14.560 --> 00:08:16.720 you said, you said you're basing with the web continuers. 123 00:08:16.720 --> 00:08:18.240 You can run PHP in the browser. 124 00:08:19.120 --> 00:08:23.439 Uh, but yes, it's it relies on the wasn't a 125 00:08:23.920 --> 00:08:28.199 version of PHP. So as long as something has wasn't 126 00:08:28.560 --> 00:08:32.440 binary available for the browser, we can hook it up 127 00:08:32.480 --> 00:08:34.320 to web containers. 128 00:08:35.960 --> 00:08:41.840 I had no idea. Very cool, it's cool, to be honest. 129 00:08:41.879 --> 00:08:44.519 It's like it's very early. 130 00:08:44.679 --> 00:08:48.480 So for example, one thing is supporting the language and 131 00:08:48.559 --> 00:08:51.240 the other is supporting the package. 132 00:08:50.879 --> 00:08:51.799 Manager for it. 133 00:08:51.799 --> 00:08:55.159 It has its own you know, you have to implement 134 00:08:55.200 --> 00:08:58.600 it usually because there is never a wasn't version of 135 00:08:58.639 --> 00:09:03.600 a package manager. So while you can, for example, run 136 00:09:03.840 --> 00:09:10.320 a Python, the PIP doesn't doesn't work yet until we 137 00:09:10.399 --> 00:09:13.559 have enough requests for it and then we'll start working 138 00:09:13.559 --> 00:09:17.799 with it. But yep, that's still you know, developing story. 139 00:09:18.679 --> 00:09:22.600 Okay, sorry to interrupt, but moving on all right. 140 00:09:22.720 --> 00:09:28.039 So after after felt kid tutorial. 141 00:09:28.639 --> 00:09:34.000 We had several other projects using web container API for 142 00:09:34.159 --> 00:09:39.879 other stuff like sometimes even like their own playgrounds, or 143 00:09:39.919 --> 00:09:46.720 there is an interesting project that allows you to, for example, 144 00:09:46.919 --> 00:09:53.080 check the the size and contents of a package by 145 00:09:53.120 --> 00:09:56.240 actually using web containers to download it in the browser 146 00:09:56.519 --> 00:10:01.480 and experiment on them and just look into what it downloaded. 147 00:10:02.279 --> 00:10:07.320 But also this in the last year, we've seen some 148 00:10:07.440 --> 00:10:11.279 new tutorials coming to lights, so I think the biggest 149 00:10:11.320 --> 00:10:16.960 one was Angular dot dev with Angular official documentation that 150 00:10:17.120 --> 00:10:21.080 released a new version of the documentation last year, and 151 00:10:21.279 --> 00:10:25.240 also they included an interactive tutorial that was a big 152 00:10:25.279 --> 00:10:28.799 part of this launch and very similar to what reached 153 00:10:28.879 --> 00:10:32.600 it with feld Kit. They built it with a container's API. 154 00:10:35.279 --> 00:10:40.879 And in the meantime, Anthony Fu that you might know, I. 155 00:10:40.840 --> 00:10:43.759 Don't know, like tons of projects, right, he's a big 156 00:10:43.840 --> 00:10:44.600 view guy too. 157 00:10:45.399 --> 00:10:47.879 Yeah, of course, so. 158 00:10:47.960 --> 00:10:54.000 He started working on a Next tutorial the same concept. 159 00:10:54.399 --> 00:10:56.840 If you look at it even now, if you look 160 00:10:56.879 --> 00:11:00.840 at feld Kit and Angular tutorial, it's a very similar 161 00:11:00.919 --> 00:11:07.200 structure visually, so Next is very similar as well as 162 00:11:07.320 --> 00:11:11.679 far as I know. He finished the like the engine 163 00:11:11.720 --> 00:11:19.000 part and now they're working on the content. So when 164 00:11:19.039 --> 00:11:22.320 we looked at it. Actually, you can watch Antony coding 165 00:11:22.360 --> 00:11:27.759 it because he released like the full he life coded 166 00:11:27.960 --> 00:11:31.960 most of it on YouTube. There's a whole playlist and 167 00:11:32.000 --> 00:11:35.240 you can see Anthony, who was like really great developer. 168 00:11:35.279 --> 00:11:42.120 Of course, it took him, I think, like several dozen 169 00:11:42.879 --> 00:11:48.039 days to do it, to build the engine, so it's 170 00:11:48.120 --> 00:11:55.360 it's definitely not an obvious type of app. So when 171 00:11:55.399 --> 00:11:59.120 we looked at what spelt kit and NAT and Angular 172 00:11:59.200 --> 00:12:00.080 team did. 173 00:12:01.519 --> 00:12:06.240 And realize that it's a very similar functionality, very similar structure, 174 00:12:06.759 --> 00:12:10.240 we realized that we should build a library for it. 175 00:12:10.840 --> 00:12:14.879 So kind of you can think of it like a 176 00:12:14.919 --> 00:12:19.080 storybook project, right when Storybook came along. Suddenly, like all 177 00:12:19.240 --> 00:12:24.200 component libraries are using Storybook to document their components, no 178 00:12:24.279 --> 00:12:29.039 matter if this is a React or view or Spelt 179 00:12:29.120 --> 00:12:30.960 or Angular, but. 180 00:12:30.960 --> 00:12:33.960 You have the same kind of features, the same layout, 181 00:12:34.480 --> 00:12:39.440 and this is now an available with tutorial kit basically. 182 00:12:40.480 --> 00:12:48.279 So yeah, you can start playing with it by just 183 00:12:48.360 --> 00:12:54.879 running NPM Create tutorial and you have tutorial in like 184 00:12:55.000 --> 00:12:56.039 twenty seconds flat. 185 00:12:59.639 --> 00:13:04.120 Okay, so yeah, I'm looking at I'm just looking at 186 00:13:04.120 --> 00:13:07.240 the demos, So what's the We talked about web containers 187 00:13:07.240 --> 00:13:11.399 now before you mentioned Astro. So what are the different 188 00:13:12.080 --> 00:13:16.360 tools of the different layers in this in this kit. 189 00:13:17.600 --> 00:13:19.879 Okay, So when you look at. 190 00:13:21.159 --> 00:13:26.480 Any of these interactive tutorials, especially once built with tutorial Kit, 191 00:13:26.600 --> 00:13:30.919 now you will see content part and interactive parts. So 192 00:13:31.120 --> 00:13:33.919 usually on the left you have you have a description 193 00:13:34.279 --> 00:13:37.480 of a topic. You have an explanation and this is 194 00:13:37.799 --> 00:13:41.919 like a rich text, so like formated text. And on 195 00:13:42.000 --> 00:13:46.759 the right side you have the editor. You have the 196 00:13:47.799 --> 00:13:52.440 life preview that updates whenever user edits stuff. Even you 197 00:13:52.519 --> 00:13:58.200 have an interactive termino. That right interactive part is basically 198 00:13:58.240 --> 00:13:59.960 built with web containers. 199 00:14:00.639 --> 00:14:02.080 The editor uses. 200 00:14:03.360 --> 00:14:08.879 Cod Mirror, but we wanted to use something for the 201 00:14:08.879 --> 00:14:14.000 content part, for the descriptions, for the like different pages, 202 00:14:14.159 --> 00:14:20.519 something that is really fast and universally UH allowed by 203 00:14:20.679 --> 00:14:23.600 by developers so other developers can build on top of 204 00:14:23.720 --> 00:14:29.080 tutoral kit. So that's for the main content part we've 205 00:14:29.080 --> 00:14:33.679 picked Astro. So this is basically when you when you 206 00:14:33.720 --> 00:14:37.399 build or deploy a tutoral kid project, it's basically like 207 00:14:37.440 --> 00:14:42.320 depraying any other static Astro site. So it's it's a 208 00:14:42.360 --> 00:14:48.559 bunch of static pages with web containers sprinkle sprinkled down 209 00:14:48.639 --> 00:14:49.399 on top of it. 210 00:14:51.720 --> 00:14:53.960 All right. Just for those who might not be familiar 211 00:14:54.000 --> 00:14:57.000 with Astro, we've had We've had Fred shot on here. 212 00:14:57.879 --> 00:15:00.120 It's been a while, I think as Astro one or 213 00:15:00.679 --> 00:15:03.840 too when it came out. But Astro is basically this 214 00:15:03.919 --> 00:15:07.799 tool that seems to have taken the static site world 215 00:15:07.840 --> 00:15:12.200 by storm, and I've used it myself for a site. 216 00:15:12.279 --> 00:15:17.600 It's really pretty slick. The general idea of astro is 217 00:15:17.639 --> 00:15:20.799 that you can have a static site with pre built 218 00:15:21.919 --> 00:15:25.200 everything sort of rendered basically like your old school ATML, 219 00:15:25.320 --> 00:15:28.279 but you can throw islands of interactivity in there, whether 220 00:15:28.399 --> 00:15:32.840 to view components, react component, as felt component, and I 221 00:15:32.919 --> 00:15:34.840 know that since I used it last they've added a 222 00:15:34.919 --> 00:15:38.919 number of new features and capabilities to it, so it's 223 00:15:40.279 --> 00:15:45.000 it's definitely one of the more popular tools in that world. 224 00:15:46.159 --> 00:15:51.080 Yeah, it's super like extremely fast as well, and they 225 00:15:51.240 --> 00:15:53.639 constantly innovate on top of it as well. 226 00:15:53.720 --> 00:15:57.240 So we're using I think we might have been one. 227 00:15:57.080 --> 00:16:01.120 Of the first beer projects to use as collections on 228 00:16:01.159 --> 00:16:04.840 that scale. So the lessons are actually like the collections 229 00:16:05.600 --> 00:16:10.480 in Astro. But best to see it if you go 230 00:16:10.679 --> 00:16:14.480 to demo dottag, Demo dot tutoral kid dot debt. 231 00:16:15.559 --> 00:16:18.639 You can see how quickly it loads because. 232 00:16:18.440 --> 00:16:21.279 Again, yeah, I'm there right now. It gives you a 233 00:16:21.320 --> 00:16:25.360 little a way to go. So is this this is 234 00:16:25.399 --> 00:16:28.039 one that was built with it, and it's just walking 235 00:16:28.080 --> 00:16:30.519 you through when that was built with her. Right, It's 236 00:16:30.559 --> 00:16:33.200 not you're necessarily building editorial yourself. 237 00:16:33.399 --> 00:16:36.600 No, no, no, we were looking into that, but it 238 00:16:36.720 --> 00:16:39.080 was like too much of an inception if you wanted 239 00:16:39.159 --> 00:16:43.440 to build the tutorial instead of inside of tutorial, the 240 00:16:43.440 --> 00:16:44.559 space is quite. 241 00:16:44.279 --> 00:16:49.240 Limited for that. Okay, so this is just showing you. Okay, yeah, 242 00:16:49.279 --> 00:16:52.519 it's just doing some real basic stuff like adding styling forms, 243 00:16:52.639 --> 00:16:53.919 is what the teacher is. 244 00:16:54.519 --> 00:16:58.879 I created just a demo tutorial as the very first implementation, 245 00:16:59.159 --> 00:17:01.559 as I was also testing in the library. 246 00:17:02.159 --> 00:17:07.880 Okay, all right, cool, So just excuse me. He mentioned 247 00:17:08.079 --> 00:17:09.759 some of the people that have used this, Can you 248 00:17:09.839 --> 00:17:11.720 point any or I don't know if you guys have 249 00:17:11.759 --> 00:17:15.440 any links on the side of ones that have been 250 00:17:15.480 --> 00:17:21.119 completed or any public instances have used this tool I. 251 00:17:21.240 --> 00:17:23.480 Have to look at. I think the one of the 252 00:17:23.519 --> 00:17:27.400 coolest one is by one. 253 00:17:26.920 --> 00:17:34.960 Of actually tutortal key developers as well, Ariy Perk, who you. 254 00:17:34.920 --> 00:17:39.519 Might know as a v test core team. 255 00:17:40.000 --> 00:17:45.279 One of the biggest main contributors. So he is currently 256 00:17:45.400 --> 00:17:52.519 also the primary maintainer of Astro and he built VAT. 257 00:17:53.759 --> 00:17:56.119 Plug intotoral. So if you wanted to. 258 00:17:56.160 --> 00:18:01.440 Build let me see if I can quickly find it. 259 00:18:04.559 --> 00:18:06.839 If you want to, I wanted to build a VIAT 260 00:18:06.960 --> 00:18:11.160 plug in, I don't know where to start. The tutorial 261 00:18:11.200 --> 00:18:12.319 will be great. 262 00:18:15.200 --> 00:18:19.920 Uh yes, see view Mastery has a course on it, 263 00:18:19.960 --> 00:18:20.880 but I don't think that's it. 264 00:18:21.119 --> 00:18:25.920 No, no, no, that's no, I don't think that's its. 265 00:18:27.519 --> 00:18:29.880 Oh. Actually you might go to a. 266 00:18:32.319 --> 00:18:39.160 Tutorial key repository which I will go on get up, Yes, 267 00:18:41.000 --> 00:18:47.319 and they're in the discussion part. We have several people 268 00:18:48.160 --> 00:18:54.039 sharing the tutorial. Oh okay, I think this is this 269 00:18:54.119 --> 00:18:57.440 is a nice one, so you will see if you're 270 00:18:57.440 --> 00:19:01.200 in the discussion part and go to our first turial 271 00:19:01.279 --> 00:19:06.519 using tw turtle kid and this one is the remote framework. 272 00:19:06.680 --> 00:19:09.920 So different thing that I've than what I've talked about, 273 00:19:10.480 --> 00:19:13.160 but I think this is the most extensive to troll 274 00:19:13.240 --> 00:19:17.480 we've seen so far. So you can see like several 275 00:19:17.559 --> 00:19:22.920 cool features like you have like in Sneepets of Cold 276 00:19:23.200 --> 00:19:28.839 on the documentary on the description side. 277 00:19:28.559 --> 00:19:28.960 And. 278 00:19:30.400 --> 00:19:38.440 Tons of actually like chapters and lessons. Yeah, definitely the 279 00:19:38.440 --> 00:19:39.519 biggest one that I've seen. 280 00:19:40.920 --> 00:19:42.559 Okay, yeah, I've got to link up there as a 281 00:19:42.559 --> 00:19:47.400 banner right now so that you can you can see that. 282 00:19:47.599 --> 00:19:51.240 So okay, So if I want to use this, Let's 283 00:19:51.240 --> 00:19:55.440 say I want to build a tutorial. Mhm. This is 284 00:19:55.440 --> 00:19:59.480 something that's all hosted on stackplits, but you guys are 285 00:19:59.640 --> 00:20:01.720 the self hosted or how exactly does that work if 286 00:20:01.720 --> 00:20:02.519 I want to create. 287 00:20:02.759 --> 00:20:06.839 So so basically you have two steps if you want to 288 00:20:06.880 --> 00:20:10.640 create it, first is run NPM create tutorial and that's 289 00:20:10.759 --> 00:20:14.319 couples the projects like just like any other like NPM 290 00:20:14.400 --> 00:20:18.759 create stuff, a couple of questions mostly about like do 291 00:20:18.799 --> 00:20:19.640 you want gits? 292 00:20:19.759 --> 00:20:20.240 Do you want? 293 00:20:20.880 --> 00:20:24.079 Which package manager do you want in your like for 294 00:20:24.240 --> 00:20:29.400 the tooral kit project. And then because it's ultimately an astrocite, 295 00:20:30.039 --> 00:20:33.480 you can run NPM run build and that creates the 296 00:20:34.279 --> 00:20:38.799 static part and you can houst it anywhere netli five 297 00:20:38.920 --> 00:20:40.279 or so you name. 298 00:20:40.160 --> 00:20:42.759 It pages or something like that as well. 299 00:20:42.839 --> 00:20:47.039 I think kit caab pages has one gotcha at this 300 00:20:47.119 --> 00:20:52.519 point because it's a super technical thing. But that's a 301 00:20:52.559 --> 00:20:58.359 great question because for the web container part, you need 302 00:20:58.440 --> 00:21:03.240 to set specific head uh and GitHub pages. 303 00:21:03.240 --> 00:21:05.119 Don't allow you to set them. 304 00:21:05.559 --> 00:21:09.960 We're working on creating proxy for that so so you 305 00:21:10.039 --> 00:21:12.559 don't so you won't have to even think about it. 306 00:21:12.599 --> 00:21:14.720 But right now, it's. 307 00:21:14.519 --> 00:21:17.599 Only for the hostings that allow you to set custom 308 00:21:17.640 --> 00:21:18.640 headers for your. 309 00:21:20.559 --> 00:21:22.400 For your site, so. 310 00:21:22.319 --> 00:21:26.759 Like cloud Flower, yeah, nexty five or so, all the 311 00:21:26.880 --> 00:21:27.839 all the common ones. 312 00:21:29.519 --> 00:21:33.079 Okay, So obviously since you work for stack stackls, you 313 00:21:33.079 --> 00:21:37.240 can also create this on stack lits as it. Yeah, yeah, 314 00:21:37.359 --> 00:21:42.440 recommend recommends any in the instructions installation instructions. 315 00:21:43.160 --> 00:21:48.680 Yes, additionally, so right now one I like to do 316 00:21:48.720 --> 00:21:54.119 it actually locally for for most cases because we also 317 00:21:54.240 --> 00:21:57.839 have a very cool extension that works on vs code, 318 00:21:58.319 --> 00:22:02.039 and we only support vs code in a very experimental 319 00:22:02.200 --> 00:22:03.880 version of our editor so far. 320 00:22:04.640 --> 00:22:06.599 So if you want to build a. 321 00:22:06.640 --> 00:22:11.640 Tutorial tutor kit project, I would highly recommend you to 322 00:22:11.759 --> 00:22:15.400 use that extension because it allows you to traverse the 323 00:22:15.440 --> 00:22:20.200 project very quickly. It allows you to create new lessons 324 00:22:20.279 --> 00:22:24.400 by just you know, right mouse click click new lesson 325 00:22:24.559 --> 00:22:27.720 and you don't have to create manually like the fold 326 00:22:27.759 --> 00:22:35.440 the structure and it. There are probably like twenty different 327 00:22:35.559 --> 00:22:41.440 settings you can use to customize each lesson. So because 328 00:22:41.599 --> 00:22:48.000 it's in an marked down or DX file, you set 329 00:22:48.039 --> 00:22:56.079 them up in front matter, so the extension supports intelligence for. 330 00:22:56.119 --> 00:22:56.880 That front matter. 331 00:22:56.920 --> 00:23:00.000 Actually, so if you want to you know, configure the lesson, 332 00:23:00.720 --> 00:23:02.799 you can with the extension. 333 00:23:02.880 --> 00:23:06.440 It will you know, do the things that normally only be. 334 00:23:06.400 --> 00:23:09.440 Possible with like typescript or something with you know, out 335 00:23:09.480 --> 00:23:13.559 the complete warning about the wrong types and things like that. 336 00:23:14.599 --> 00:23:20.519 So yeah, honestly, we're not pushing stag Blitz very hard 337 00:23:20.559 --> 00:23:25.039 on this. I think the biggest value we have here 338 00:23:25.480 --> 00:23:29.079 or that we want to provide, is that when you 339 00:23:29.160 --> 00:23:35.359 have tutorial Kit project, every demo that you have, every 340 00:23:35.400 --> 00:23:38.720 project that runs on each lesson has an open in 341 00:23:38.880 --> 00:23:44.160 stack Blitz button which creates that lesson. So if you 342 00:23:44.279 --> 00:23:48.200 if you go to any of these lessons, for example 343 00:23:48.240 --> 00:23:52.039 on the remote tutorial on the top right, you'll see 344 00:23:52.039 --> 00:23:56.960 like the stackles bolt yes and it will yeah, and 345 00:23:57.000 --> 00:24:01.640 it will create that in stack. It's opened that specific 346 00:24:01.759 --> 00:24:07.119 exercise in Staglish, which is really cool because it's while 347 00:24:07.519 --> 00:24:12.000 a lesson creator might want to for you to go 348 00:24:12.160 --> 00:24:15.759 from like point A to point B within each exercise, 349 00:24:16.240 --> 00:24:19.079 you might actually really like this code base and want 350 00:24:19.119 --> 00:24:22.839 to explore it further, maybe save it for later. So 351 00:24:23.079 --> 00:24:26.079 in that case, you just openxtagelets and make it a 352 00:24:26.119 --> 00:24:29.599 stagltz project and you can just build or build as 353 00:24:29.759 --> 00:24:33.319 any typicult STABLETS playground. 354 00:24:33.880 --> 00:24:36.759 So now, yeah, so I'm just walking through the instructions 355 00:24:36.799 --> 00:24:42.079 and it's it's sort of like nuxt in terms of 356 00:24:42.119 --> 00:24:45.960 you're using file based routing in need them for the 357 00:24:46.039 --> 00:24:51.519 display of titles and where are your different files go 358 00:24:51.680 --> 00:24:57.599 and so yeah, there's a pretty strict it's pretty opinionated, right, 359 00:24:57.640 --> 00:24:59.880 and how it has to work and need Yeah, very 360 00:25:00.960 --> 00:25:03.440 which makes sense, right, You don't want to have to 361 00:25:03.480 --> 00:25:05.680 guess where everybody's put in their code they run a tutorial. 362 00:25:06.920 --> 00:25:09.680 Yeah, we do have a lot of customization, but mostly 363 00:25:09.880 --> 00:25:12.839 on the specific lesson level. 364 00:25:12.920 --> 00:25:15.440 So do you want a terminal. 365 00:25:15.440 --> 00:25:20.039 Even like what kind of commands do you allow your 366 00:25:20.160 --> 00:25:23.359 user to run the terminal so they don't you know, 367 00:25:23.680 --> 00:25:27.200 go into some like crazy states if they run like 368 00:25:27.359 --> 00:25:30.559 anything with a container that could be. 369 00:25:32.119 --> 00:25:34.039 Detrimental to the learning experience. 370 00:25:34.839 --> 00:25:39.319 But yeah, the file if file structure is that. 371 00:25:39.599 --> 00:25:41.880 So you put everything in the content. 372 00:25:42.079 --> 00:25:46.880 Then you have tutoral parts to have several parts, and 373 00:25:47.000 --> 00:25:51.119 the tutorial parts you have a chapter and then a lesson, 374 00:25:51.680 --> 00:25:54.759 and then in each lesson you have a mark down 375 00:25:54.799 --> 00:26:00.920 file that describes the the lesson that has a lesson description, 376 00:26:01.680 --> 00:26:07.359 and then the files folder which includes the app that 377 00:26:07.440 --> 00:26:10.720 needs to run as that demo at that interactive part 378 00:26:10.839 --> 00:26:19.640 of a lesson. So that's like very basic structure, but 379 00:26:20.119 --> 00:26:23.960 as when you start building with it very soon, it 380 00:26:24.000 --> 00:26:27.119 would because that lesson needs to be the files for 381 00:26:27.200 --> 00:26:29.119 a lesson need to be an. 382 00:26:29.000 --> 00:26:30.319 Actual working project. 383 00:26:30.799 --> 00:26:35.400 It needs to be something that you could run locally 384 00:26:35.480 --> 00:26:38.920 by running NPM install and PM run start. Right, So 385 00:26:39.000 --> 00:26:42.680 if you imagine creating all that for each lesson and 386 00:26:42.720 --> 00:26:45.960 you have like, you know, thirty lessons, you'd have like 387 00:26:46.079 --> 00:26:49.400 thirty copies of the same project with maybe you know, 388 00:26:49.960 --> 00:26:53.039 slide change in two or three files. 389 00:26:54.319 --> 00:26:56.200 So we've also accounted for that. 390 00:26:56.599 --> 00:27:01.720 And you can also utilize ten plates folder where you 391 00:27:01.799 --> 00:27:06.880 put your general structure of that code based that you demo. So, 392 00:27:06.960 --> 00:27:11.720 for example, if you want to do let's say it's 393 00:27:11.759 --> 00:27:15.839 it's a VAT project that you want to build upon, 394 00:27:16.079 --> 00:27:20.440 so you can generate a VAT code based basic beat 395 00:27:20.519 --> 00:27:26.200 cond base in the tutortal kits template folder, and then 396 00:27:26.559 --> 00:27:29.799 for each lesson you can only define the files that 397 00:27:29.839 --> 00:27:33.240 are in the source folder for your demo app. 398 00:27:33.640 --> 00:27:36.720 So it's not that much you know, repeatable code. 399 00:27:39.599 --> 00:27:42.119 Okay. So one thing we talked a little bit earlier 400 00:27:42.160 --> 00:27:46.079 about the back ends that are supported. So how extensive 401 00:27:46.200 --> 00:27:49.000