AJ and Steve dive deep into the world of interactive coding tutorials alongside guest, Tomek Sułkowski. They kick off with a brief chat about the weather before delving into Tomek's expertise in creating engaging and interactive tutorials—shedding light on everything from the history of coding tutorials to the technical wonders of web containers, brought to prominence by platforms like Stackblitz.

They explore the innovative "tutorials kit dot dev," a revelatory tool for developers, and discuss the triumphs and challenges in building these interactive learning experiences. Plus, discover amazing tech insights from AJ, development updates from Tomek, and a whole lot more. 

Socials

 
Picks

Steve Edwards [00:00:05]:
Hello, everybody. Welcome to another exciting issue issue, episode, excuse me, of JavaScript Jabber. I am Steve Edwards, the host with the face for radio and the voice for being in mind, but I'm still your host mostly because nobody else doesn't wanna do it and Chuck's not here. But with me on the panel today, we have mister AJ O'Neil. How are you coming, AJ? Or how are you doing? Excuse me.

AJ O'Neil [00:00:27]:
Yo. Yo. Yo. I'm coming at you live from a very wonderful day, it would seem. Not too hot, not too cold, good times here in the shed. Uneventful. That's nice.

Steve Edwards [00:00:44]:
Right. Yeah. I'm coming from a, much cooler Portland. It's it's like fall just hit, wham, all of a sudden this week. And it's not even 21st which really bugs the snot out of me. I prefer my long, nice summers with with warmth, but that's okay. And our special guest, mister Tomek Salkowski. How are you doing, Tomek?

Tomek Salkowski [00:01:05]:
Good. Hi. Hi, guys. How hello, everyone. I'm good. Come at with you from also, nicely weathered Poland. It's it's evening, here, but I'm, like, super hyped and ready to chat with you.

Steve Edwards [00:01:24]:
Right. So how how warm is it there? We always have to talk about warmth because, Dan's always complaining about how hot it is in Tel Aviv, but he's not here to do that today. So

Tomek Salkowski [00:01:32]:
let me just turn on my, units converter. So it's 64 of your, warrants units. So you're

Steve Edwards [00:01:41]:
about 20? Between 15 to 20 Celsius?

Tomek Salkowski [00:01:45]:
Yeah. Yeah. 18 to 20.

Steve Edwards [00:01:47]:
Damn. I'm getting good

Tomek Salkowski [00:01:48]:
at that.

Steve Edwards [00:01:48]:
Okay. Nice. Right. Okay. So now that we've established weather patterns in our appropriate vicinities, let's talk about what we're going to talk about, which is interactive coding tutorials. And I'll leave it at that and let Tomac talk from here about, these tutorials and making good tutorials. Right?

Tomek Salkowski [00:02:12]:
Hopefully. The thing is that it's it's up to the tutorials creator then. So but we try to take care of the all the obstacles before creating the actual tutorial. So yeah. So I guess we can start with the the, like, just tutorial part, because I think this has been on the programming scene for, like, forever pretty much. It's actually there is, like, this one cool talk about 4 quadrants of documentation and how to guides, walk throughs, the, like, reference, like, API reference and tutorials. Right? So it's nothing new on one hand. On the second hand, we have the interactive part, which I think, like, that's that's the exciting thing that hasn't existed even several years ago.

Tomek Salkowski [00:03:13]:
So yeah.

Steve Edwards [00:03:15]:
Okay. So tutorials kit dot dev. This is the starting point. If anybody wants to to go look at this while we're talking, I'll put the link there here on the screen. So give us the rundown on what it is, what it's built on, you know, your the tech stack, and then how to use it.

Tomek Salkowski [00:03:40]:
Cool. So, I think the the best introduction to this to the what it is and and what it can do is kind of a little bit of history. And it starts with this cool dude called Rich Harris. I don't know if you know him.

Steve Edwards [00:04:01]:
Yes. We we just talked to him within, what, the past month, I think. We talked to Rich about SvelteKit. I think it's 5. Perfect. 5 coming out. So, yeah, we've talked to Rich very recently.

Tomek Salkowski [00:04:11]:
Here we go. So, Rich is a very great, like, communicator and educates about Svelte and Svelte kits, like, really perfectly, super inspiration. And and when they launched the Svelte initially, they already had an interactive tutorial, which for Svelte being, like, a front end library. It was doable, let's say. So they built this, Svelte tutorial. And from the feedback from the community, it seems like that was one of the big reasons why Svelte got so popular so quickly and why it's so easy to get into Svelte because you can just, like, look up a topic, or a syntax, element of Svelte and have an actual page with an exercise and explanation and everything. So this learning experience is is really cool. But then, as you mentioned, Sveltekit, when SveltekitML came along, it was more tricky to make a tutorial like this in the browser.

Tomek Salkowski [00:05:24]:
Right? So, thankfully, in the meantime, Stackblitz, where I come from, built web containers. And web containers, very short recap, are like super small OS in a browser. So, basically you have a file system, you have a git integration, you can run node, most importantly for us. And and for 1st couple of years, it was working exclusively on stagviz.com. So it was only the engine for stagbris.com projects that you can launch with or at the other staggers. But when, Sveltekit was closing to be the 1.0 version, Rich wanted to have a tutorial for Sveltekit as well. So he reached out to us so we can create some kind of API to use web containers with tutorials. So that's how web containers API, came about.

Tomek Salkowski [00:06:36]:
And, so, basically, that was our design partner for creating web containers API and Sveltekit tutorial. As you can see right now, when you go to Sveltekit tutorial, you'll see, like, putting web containers. That's how that's what, what is built, on behind the scenes, and why the back end aspects of of SvelteKit work, in the tutorial.

Steve Edwards [00:07:02]:
So yeah. So real quick, I'll jump in and say that we talked to Eric Simons from Stackblitz about web containers in JavaScript Jabber episode 4 87. So if you wanna hear more about, the web containers and how they work, the big issue is being able to run Node in the browser, basically, from that's from gosh. That's 3 years ago. So June 8, 2021 was when that came out. So Yeah. But link in the show notes, and I'll put it here on the screen if you wanna go back and listen to that.

Tomek Salkowski [00:07:37]:
Yeah. It's just to to add to that, like, we're constantly working on our containers. So primarily on the node part because we are keeping up with the node node releases. But since then, we've also released an initial experimental version of Python support and, PHP, and we can support, SQLite as well. So it's still, work in progress, supporting more and more interesting stuff.

Steve Edwards [00:08:11]:
Okay. So let me go back there. As a PHP developer, you said you said you're basing with the web containers, you can run PHP in the browser?

Tomek Salkowski [00:08:19]:
But yes. It it's it relies on the WASM version of of PHP. So as long as some something has a WASM binary available for the browser, we can, hook it up to web containers.

Steve Edwards [00:08:35]:
I had no idea. Very cool.

Tomek Salkowski [00:08:39]:
Very cool. To be honest, it's, like, it it's very early. So, for example, one thing is supporting the language, and the other is supporting the, like, package manager for it. It has its own, you know, you have to reimplement it usually because there is never a WASM version of a package, manager. So while you can, for example, run, Python, the PIP doesn't doesn't work yet until we have enough request for it, and then we'll start working. Right? But, yep. That's still, you know, developing story.

Steve Edwards [00:09:18]:
Okay. Sorry to interrupt, but, moving on.

Tomek Salkowski [00:09:22]:
Alright. So, after after, SvelteKit tutorial, we had several other, projects using a web container API for other stuff, like, sometimes even, like, their own playgrounds or there is an interesting project that allows you to, for example, check the, the size and, contents of a package by actually using web containers to download it in the browser and experiment on them and to just, like, look into what it downloaded. But, also, this in the last year, we've seen some new tutorials coming to light. So I think the biggest one was angular.dev, with angular official documentation. They released the new version of the documentation last year. And, also, they included an interactive tutorial that was a big part of this launch. And very similar to what Rich did with SvelteKit, they build it with a containers API. And in the meantime, Anthony Fu, that you might know from I don't know.

Tomek Salkowski [00:10:41]:
Like, tons of projects. Right?

Steve Edwards [00:10:43]:
He's a big Vue guy too.

Tomek Salkowski [00:10:45]:
Yeah. Oh, of of course. So he started working on a Nuxt tutorial. The same concept, if you look at even now, if you look at SvelteKit and Angular tutorial, it's a very similar structure visually. So Nux is is very similar as well. As far as I know, he finished the, like, the engine part, and now they're working on the content. So when we looked at actually, you can watch Anthony coding it, because here it is, like, the full like, he he live coded most of it, on YouTube. There is a whole playlist.

Tomek Salkowski [00:11:31]:
And you can see Anthony, who was, like, really great developer, of course. It took him, I think, like, several dozen days to do it, to build the the engine. So it's it's definitely not an obvious type of app. So when we looked at what's SvelteKit and Knox and Angular team did and and realized that it's a very, like, similar functionality, but if it's similar structure, we realized that we should build a library for it. So kind of you can think of of it like like a storybook project. Right? When storybook came along, suddenly, like, all component libraries are using storybook to document their components, no matter if this is a React or Vue or Svelte or Angular. But you have the same kind of features, the same layout, and this is now available with tutorial kit, basically. So, yeah, you can you can start playing with it by just running npm create tutorial, and and you have tutorial in, like, 20 seconds flat.

Steve Edwards [00:12:59]:
Okay. So, yeah, I'm looking at I'm just looking at the demo. So so what's the so we talked about web containers. Now when beforehand, you mentioned Astro. So what are the different tools at the different layers in this in this kit?

Tomek Salkowski [00:13:17]:
Okay. So when you look at, any of these interactive tutorials, especially ones built with a tutorial kit now, you will see a content part and interactive part. So, usually, on the left, you have, you have a description of a topic, you have an explanation. And this is, like, rich text, so, like, formatted text. And on the right side, you have the editor. You have the live preview that updates whenever a user edits stuff, and even you have an interactive terminal. That right interactive part is basically built with web containers. The editor uses, CodeMirror.

Tomek Salkowski [00:14:05]:
But we wanted to use something for the content part for this, like, descriptions, for the, like, different pages. Something that is, like, really fast and, universally, allowed by by developers, so other developers can build on top of tutorial kit. So that's for the main content part we've picked Astro. So this is basically when you when you build or deploy a tutorial kit project, it's basically like deploying any other static Astro site. So it's it's a a bunch of static pages, with web containers, sprinkled sprinkled on on top of it.

Steve Edwards [00:14:51]:
Alright. Just for those who might not be familiar with Astro, we've had we've had Fred Schott on here. It's been a while. I think it was Astro 1 or Astro 2 when it came out. But Astro is basically this tool that seems to have taken the static site world by storm, and I've used it myself for a site. It's really pretty slick. The general idea of Astro is that you can have a static site with prebuilt, everything server rendered basically like your old school HTML, but you can throw islands of interactivity in there whether to view component, react component, or Svelte component. And I know that since I used it last, they've added a number of new, features and and capabilities to it.

Steve Edwards [00:15:38]:
So it's, it's definitely one of the, more popular tools in in that world.

Tomek Salkowski [00:15:46]:
Yeah. And it's super, like, extremely fast as well, and they they constantly innovate on top of it as well. So we we're using I think we might have been one of the first beer projects to use Astro collections on that scale. So the, like, lessons are actually, like, the collections, in Astro. But best to see it if you go to demo dot stack demo.tutoralkit.dev. Mhmm. You can see how quickly it loads because, again Yeah.

Steve Edwards [00:16:18]:
I'm there right now. It's it gives you a little, a way to go. So is this this is one that was built with it, and it's just walking you through one that was built with it. Right? It's not you're not actually building a tutorial itself.

Tomek Salkowski [00:16:33]:
No. No. No. We were looking into that, but it was, like, too much of an inception if you wanted to build a tutorial instead of inside of tutorial. The, space is quite limited for that.

Steve Edwards [00:16:46]:
Okay. So this is just showing you. Okay. Yeah. It's just doing some real basic stuff like adding styling forms is what the tutorial is.

Tomek Salkowski [00:16:54]:
I created a just a demo tutorial as the your very first implementation as I was also testing in the library.

Steve Edwards [00:17:02]:
Okay. Alright. Cool. So just excuse me. You'd mentioned some of the people that have used this. Can you point any or I don't know if you guys have any links on the side of come ones that have been completed or any public instances of tutorials that have been have used this tool?

Tomek Salkowski [00:17:20]:
I have to look at I think the one of the coolest one is, by one of, actually, a tutorial key developer as well, Ari Perkier, who you might know as Viteast core team, one of the, Viteast main contributors. So he is currently also the primary maintainer of Astro, and he built a vite plugin tutorial. So if you wanted to build let me see if I can quickly find it. If you want to wanted to build a vid plugin, I don't know where to start. This tutorial would be great.

Steve Edwards [00:18:16]:
Yeah. I see view mastery has a course on it, but I don't think that's it. No.

Tomek Salkowski [00:18:21]:
No. No. No. That's no. I thought don't think that's it. Oh, actually, you might go to tutorial kit repository, which I will

Steve Edwards [00:18:37]:
Oh, on GitHub? Yes.

Tomek Salkowski [00:18:40]:
And there in the discussion part, we have, several people, sharing the tutorial. Oh, okay. I I think this is this is a nice one. So, you will see if you're in the discussion part Mhmm. You can go to our first tutorial using tutorial kit.

Steve Edwards [00:19:02]:
Uh-huh.

Tomek Salkowski [00:19:02]:
And this one is the remote framework. So different thing that I than what I've talked about. Mhmm. But I think this is the most extensive tutorial we've seen so far. So, like, you can see, like, several cool features, like, you you have, like, in snippets of of code on the document on the description side, and tons of, actually, like, chapters and lessons. Yeah. Definitely the biggest one that I've seen.

Steve Edwards [00:19:40]:
Okay. Yeah. I've got the link up there as a banner right now so that you can

Tomek Salkowski [00:19:44]:
Great.

Steve Edwards [00:19:46]:
You can see that. So okay. So if I wanna use this, let's say I wanna build a tutorial. Mhmm. This is something that's all hosted on Stackblitz by you guys, or is this self hosted? Or how exactly does that work if I wanna create my own?

Tomek Salkowski [00:20:02]:
So so, basically, you have 2 steps if you want to create it. First is run NPM create tutorial, and that scaffolds the projects, like, just like any other, like, NPM create stuff. Couple of questions mostly about, like, do you want git? Do you want, which package manager do you want in your, like, forwarded to the project. And then because it's ultimately an Astro site, you can run npm run build, and that creates the the static, part. And you can host it anywhere, Netlify or so, you name it.

Steve Edwards [00:20:40]:
Like GitHub Pages or something like that as well?

Tomek Salkowski [00:20:42]:
I think, GitHub Pages has one gotcha at this point because, it's a, like, super technical, thing. But that's a great question because for the web container part, you need to set specific headers. And GitHub Pages don't allow you to set them. We are working on creating a proxy for that, so so you don't so you won't have to even think about it. But right now, it's only for the hosting that allow you to set custom headers for your for your site. So, like, Cloudflare, yeah, Netlify for sale, all the all the common ones.

Steve Edwards [00:21:29]:
Okay. So, obviously, since you work for stack Stackblitz, you can also create this on Stackblitz as it.

Tomek Salkowski [00:21:36]:
Yeah. Yeah.

Steve Edwards [00:21:37]:
Recommend recommends in the, in the instructions installation instructions.

Tomek Salkowski [00:21:43]:
Yes. Additionally so right now, one, I like to do it actually locally for for most cases, because we also have a very cool extension that works on Versus code, and we only support Versus code in a very experimental version of our editor so far. So if you want to build a tutorial, project, I would highly recommend you to use that extension because it allows you to traverse the project very quickly. It allows you to create, new lessons by just, you know, the right mouse click, click new lesson, and you don't have to create manually, like, the folder structure. And it's there there are probably like 20 different settings you can use to customize each lesson. So, because it's, in an markdown or MDX file, you set them up in, front matter. So, the extension supports, IntelliSense for that front matter, actually. So, if you want to, you know, configure the lesson, you can with with the extension, it will, you know, do the things that normally only be possible with, like, TypeScript or something with, you know, how to complete, warning about the wrong types and things like that.

Tomek Salkowski [00:23:14]:
So, yeah, honestly, we're not, pushing, StackBlitz very hard on this. I think the the biggest, value we have here or that we want to provide is that, when you have tutorial kit project, every, demo that you have, every project that runs on each lesson has an open in Stackblitz, button, which creates that lesson. So if you if you go to any of these lessons, for example, on the Rammel tutorial, on the top right, you'll see, like, the Stackblitz Bolt. Yes. And it will yeah. And it will create that, in in Stackblitz. Open that specific exercise in Stackblitz, which is really cool because it's while, lesson creator might want to for you to go from, like, point a to point b within each exercise, you might actually really like this code base and want to explore it further, maybe save it for later. So in that case, you just open it as a side blitz and make it a side blitz project, and you can just build or build it as any typical playground.

Steve Edwards [00:24:33]:
So now yeah. So I'm just walking through the instructions, and it's, it's sort of like a a NUCs in terms you're using file based routing and even for for the display of, titles and where all your different files go. And so, yeah, there's a a pretty strict it's pretty opinionated, right, in how it has to work

Tomek Salkowski [00:24:58]:
Yeah.

Steve Edwards [00:24:58]:
And meaning Yeah. Very specific. Which makes sense. Right? You you don't wanna have to guess where everybody's putting their code to run a tutorial.

Tomek Salkowski [00:25:06]:
Yeah. We do have a lot of customization, but mostly on the specific lesson level. So do you want the terminal? Even, like, what, kind of commands, do you allow your user to run the terminal? So they don't, you know, go into some, like, crazy states? If they run, like, anything, with a container, that could be detrimental to to learning experience. But, yeah, the file, file structure is that so you put everything in the content, then you have tutorial parts. Tutorial can have several parts. And the tutorial part, you have a chapter and then a lesson. And then in each lesson, you have a markdown file that describes the the lesson that has that has a the lesson description. And then the files folder, which includes the app that needs to run as that demo at that interactive part of a lesson.

Tomek Salkowski [00:26:13]:
So that's, like, very basic structure, but as when you start building with it, very soon it would because that lesson needs to be the the the files for a lesson need to be an actual working project. It it needs to be something that you could, run locally by running NPM install NPM run start. Right? So if you imagine creating all that for each lesson, and you have, like, you know, 30 lessons, you'd have, like, 30 copies of the same project with maybe, you know, slight change in 2 or 3 files. So we've also accounted for that, and you can also, utilize the templates folder where you put your general structure of that code base that you demo. So, for example, if you want to do, let's say, it's it's a Vite project, that you want to build upon, so you can generate a Vite code base, basic Vitecom base in the tutorial kits template folder. And then for each lesson, you can only define the files that are in the source folder for for your demo app. So it's not that much, you know, repeatable code.

Steve Edwards [00:27:39]:
Okay. So one thing we talked a little bit earlier about the back ends that are supported. So how extensive can this be in terms of front end only versus full stack versus whatever? You mentioned SQLite. Right? Obviously, you can run Node as a back end. PHP is iffy. Is that what I'm understanding?

Tomek Salkowski [00:27:59]:
Yeah. I wouldn't I wouldn't probably for early early days, I wouldn't try it yet with no with with tools set outside of node ecosystem, but node itself is is is pretty well supported. Basically, to try it before you're, like, in get invested and install and scaffold the project. If it works on stagvids.com, it will also be compatible with. But I've seen already people I I've seen a tutorial on one of, our our ORMs using SQLite, and at least one Next JS tutorial. So that's kind of, the area where that we cover.

Steve Edwards [00:28:52]:
Okay. So another so I'm I like to work primarily in Laravel and Vue with, you know, sometimes with inertia depending on, you know, depending on the project. Sounds like that might be a bit much at this point just because they're BHP based.

Tomek Salkowski [00:29:09]:
Oh, yeah. Yeah. Until we can support, you know, composer and stuff like that, It's, not yeah. It's in the future.

Steve Edwards [00:29:18]:
So you could do obviously, Nuxt is using it. Right? So you could do Nuxt since that's node based. Yep. Any front end. What about and I haven't, again, I haven't played with Stackblitz since Eric came on, just 3 years ago. If you want to do something that involves an external API, you know, if you wanna use, man, my consentful, you know, for example, or some of the other ones. There's one I used to use that completely, I can't remember now, but something like that. Can you do that where you would have to set up an external API and and and connect with that in your in your tutorial, or is that outside the scope?

Tomek Salkowski [00:29:59]:
It should work. I think the the the challenges are on the, you know, on the edges of that. So, for example, in in practice, if this is, an API that you need, like, to set private keys for, we don't support these kind of things, like Mhmm. Storing the environment variables and and things like that. But besides that, I think that should work. It's just, you know, in practice, the there there will be probably problems with with freight limiting, the these, if you don't if you can't use, like, tokens and things like that.

Steve Edwards [00:30:37]:
Right.

Tomek Salkowski [00:30:38]:
But besides that, yeah, that this should work. Also, it works, in a very, let's say, hardcore scenarios, if you want. If you have, like, private, package manager or, if you if you want to run it behind a firewall, behind behind you, like, if corporate VPNs, that's also supported. So

Steve Edwards [00:31:05]:
yeah. Yeah. I would, I guess I if you if you were doing something that involved data, I would maybe you could just include it with, like, a JSON file that has your data and sort of mock an API type of thing if that's what you're worried about. Because this is obviously well, you know, plug ins, but this is gonna be more of a display. You know, you can these type of tutorials are for how you're displaying stuff on a screen and not necessarily data data pulling. Sorry. I'm more I'm more of a back end guy than than than that. So that's where my brain goes.

Tomek Salkowski [00:31:41]:
I think that that's how I would probably, do it. Also, it's, because it's Astro project, you can do everything that Astro can. So even you can add, separate pages for, to the that are not in that tutorial UI. And you can also, like like you said, like, cost the JSON files for specific lessons and things like that. So that's probably, I think, optimal if you want, especially, like, a lot of people hitting that API endpoint.

Steve Edwards [00:32:14]:
Okay. So now where is this sorry. I haven't looked. Where is this in terms of releases? I this oh, you're still in so you're pre 1.0. It looks like you're 0.2.3 as of the latest release?

Tomek Salkowski [00:32:30]:
Yeah. There is, yeah. We are still pre, a bit shy, to to release the 1.0 version, but

Steve Edwards [00:32:40]:
That's always the scary thing to decide. Right? When is when is it good enough to release 1.0?

Tomek Salkowski [00:32:46]:
Yeah. I remember, when when React was, like, pre one point o for, like, several years. Right? And then they jumped into 14. Anyways, we have we we we do have a a road map to 1.0, and it's not that crazy, actually. So I think we'll be hitting it in a couple of months. But we're also, super careful about those breaking changes for, that we're making right now. And I think the only ones we've made really were pretty sweet because they, like, removed a lot of boilerplate in several places. Mhmm.

Tomek Salkowski [00:33:27]:
But yeah. So

Steve Edwards [00:33:30]:
Yeah. I could see in the, in the, GitHub repo, there is a road map to 1 point o issue. Yeah. Issue 1.4. So I just put the link in there. So that's if you, I guess, if you wanna follow the development and see how close they're getting to a one point o, this is what you can subscribe to.

Tomek Salkowski [00:33:52]:
Exactly. And for the when we talk about this, like, a huge shout out to Ari who is leading the open source aspect of it, super responsive in all the issues. So, yeah, he's doing a great job on on making it a truly, visible open source project.

Steve Edwards [00:34:14]:
So going back to editors, you mentioned that you had the Versus Code extension. So if I've used something like one of the JetBrains IDEs, you know, WebStorm, PHPStorm, if I'm doing it there, I'm probably not gonna have all of the, interactivity that I would in Versus Code with with the extension.

Tomek Salkowski [00:34:31]:
Yeah. The extension really so when you when you create the lesson, you need to create a folder and you need to create the file, at least the content m d file. So, the annoying pie part when you do it by hand is that copying that same structure. You you have to, like, have the, you know, like, empty folder with not not empty folder, but, like, a, placeholder for template folder. Let's let's call it. Like this with a file Mhmm. To when you that you create, that you copy every time you want to create a lesson. I think in the s in WebStorm and things like that, you should be able to create some kind of templates, to to help

Steve Edwards [00:35:19]:
Oh, right. Okay.

Tomek Salkowski [00:35:20]:
With that element. I think the biggest, drawback or thing that you don't get with the extension, when not using the extension is that IntelliSense. Because, like, so in practice, you'll have to see the our documentation a bit more. But also, I think in reality, once you create, like, your second or third lesson, you have the settings usually dialed in, so you don't have to touch them that much. So that shouldn't be that, annoying, let's say. I think, the extension really helps, initially, plus that thing with with creating, with having a template, for the for the lesson. Oh, one thing to to say about the the settings, I think it's why it's also helpful and not that annoying not to have this, IntelliSense is that, for example, one thing that you might want to set is default file that, a student can see in the editor. Let's say that you have, like, a source folder displayed and, like, 5 files, index HTML, index CSS, in the, like, app view, and something like this.

Tomek Salkowski [00:36:50]:
And you want in basically every lesson, in the chapter to to always focus on the app dot view file. In that case, you can set this on every lesson, in every lesson, in its, content m d, MD file. Or you can set it on the chapter level just once, and it's inherited for every lesson. So, this way, if this is really repeatable logic, you just set it once and it's just, you know, applied to a whole part of the tutorial or even on the whole tutorial.

Steve Edwards [00:37:36]:
Okay. Yeah. That that's nice not having to repeat the boilerplate all the time. Yeah. Something that devs can appreciate, I'm sure. Alright. Anything else, about this tool that, we haven't covered yet?

Tomek Salkowski [00:37:53]:
Yeah. So, I think the main point is that this is, open source, and so that comes like both ways. If you have any questions or requests, visit our issues. But if you also want to contribute, we have some good first issues or, you can, you can come up with your own issue and contribute to it. We'll, as I said, we're very open for for that. And, yeah, I think I think this will be a very cool thing that will become, I wouldn't say a standard, but, something to expect from from every bigger library so that you can have, you know, you can either, read the docs, the the more static version of the docs or as go through the tutorial without having even to install anything. And, and one thing also I've seen this, I think it's also a kind of like a forcing element when you build it through like that. You end up with tons of instantly available demos.

Tomek Salkowski [00:39:10]:
So as a dev rel or developer advocate, having that kind of tutorial on always online, it's it's very cool to be able to just go there and, you know, live demo this part or that part of the framework because you have everything already set up. So I think it's useful both for people who go, and and just want to test drive a library or framework. And for the the more advanced people who are just, you know, constantly returning to the same thing to to experiment, with with a concept. Yeah.

Steve Edwards [00:39:51]:
Yeah. So I'm looking through the issues list right now. There's as of today, there's 38 open, and you can see some of the different tags that they've created. As you mentioned, there's one tag that's a good first issue. So one of those little simple things that would be good for somebody who wants to dive in and and tackle something easy and get a win. And then there's bugs. I like I like the PR welcome one.

Tomek Salkowski [00:40:22]:
Is it for for the bug? Oh, nice.

Steve Edwards [00:40:25]:
There's one that's there's one that is bug. Good first issue, PR welcome.

Tomek Salkowski [00:40:30]:
Oh, so you're gonna okay. I I can see. Yeah. Understandable. But notice that most of the issues are actually feature requests or enhancements.

Steve Edwards [00:40:40]:
Enhancements. Right?

Tomek Salkowski [00:40:41]:
That's yeah. So it's it's pretty stable.

Steve Edwards [00:40:47]:
One window specific one that I'm seeing, help wanted on one of them. So, yeah, there's a looks like there's plenty of, options and opportunities to jump in and get involved if this is something you wanna be involved with.

Tomek Salkowski [00:41:01]:
Yeah. It's the eldest also. This activity is pretty much from the last month. Right? So it's it's quite active.

Steve Edwards [00:41:13]:
Yeah. For sure. AJ, you got any questions or anything?

AJ O'Neil [00:41:19]:
No. Just listen in this time.

Steve Edwards [00:41:22]:
Wow. That's, that's really weird. We'll just leave that at that. So That's

AJ O'Neil [00:41:27]:
that's not the only time. You may not be on other times, but sometimes it's just somebody else's domain.

Steve Edwards [00:41:32]:
Right. Yeah. It's like me when we're talking about go or rest or something like that for you. Okay. Unless you got anything else, Tamek, we'll move on to PIX. Anything else you wanna cover?

Tomek Salkowski [00:41:48]:
I'm good.

Steve Edwards [00:41:49]:
Alright. So picks are the part of the show where we get to talk about anything we wanna talk about within reason, of course, that's approved by the FCC. Could be tech. Could be non tech. Could be a book. Could be a movie. Chuck always does games because he's a big board game kinda guy. I will start off with the, the dad jokes of the week.

Steve Edwards [00:42:13]:
This is always the the high point of any episode, that I'm on. So, let me get set up here real quick. Gotta get my my drum player in place here. So okay. So question. What was why was root beer the best drink on the Titanic? Because root beer floats. Right? Obviously, they didn't have enough root beer because it didn't float. You know, caught

AJ O'Neil [00:42:45]:
Too soon.

Steve Edwards [00:42:46]:
Too soon. It's only been a 112 years. You're right. Gotta wait till at least 200. You know, cosmetic surgery used to be such a taboo subject. But now you talk about Botox, and nobody raises an eyebrow.

Tomek Salkowski [00:43:00]:
Oh, that's new. Oh, wow. Yeah. Yeah.

Steve Edwards [00:43:07]:
And then

AJ O'Neil [00:43:09]:
Please don't mutilate your face. Please. Please don't mutilate

Tomek Salkowski [00:43:12]:
your face.

AJ O'Neil [00:43:13]:
No one has ever said, look at that person's Botox. Don't they look amazing? No one's ever said that.

Steve Edwards [00:43:20]:
Yeah. It's it's it's definitely not moving, shall we say. And then finally, how does Burger introduce his significant other? Just meet Patty. And then I actually, I do have another pick, and this fits in with the dad jokes of the week. Babylon b had a really great post or article, and the title of it is, dad jokes panned by critics. And it's basically a a story about how, dad's telling his dad joke, and his kids are like, yeah. Really? Sorta like my house. You know? I'll give you a couple lines from it.

Steve Edwards [00:44:09]:
In a scathing 750 word review, fellow dad joke critic, Erica Matthews, age 10, pointed out that while the joke was technically funny, it was just a repackaged version of a joke told previously. Right? Asked how he was taking the negative reviews, Phil appeared to shrug it off, says, hey. That's showbiz. At publishing time, the critics had retracted their statements after being offered ice cream for dessert. So, anyway, I'll put the link for there, in the notes. But, I was very appreciative of that one since it's, one of those kinds. It's like somebody was living with me at home. You know? And I'll I'll put it for a banner here just for everybody to see.

Steve Edwards [00:44:49]:
Those are my picks for the week. AJ, what do you got for us?

AJ O'Neil [00:44:52]:
Well, first of all, last week, if you remember, I complained that I was coming at you live from a busted solenoid. And so I'm gonna pick Rocky Mountain ATV because they had the part that I needed for my Honda 4 tracks. And turned out that I I haven't actually installed it yet because what the immediate solution was was whack the existing one with a wrench. I don't know how that didn't fix itself when I was going over the hills.

Steve Edwards [00:45:22]:
That's almost like duct tape. Right?

AJ O'Neil [00:45:24]:
Yeah. But, anyway, Rocky Mountain ATV, if you're in Utah, it's a no brainer. Well, I mean, I guess, unless you're 4 hours away from them. But and anywhere else in the country, I don't know. They're just they're a good company. I like them. So if you got if you got toys, then check out Rocky Mountain ATV. It's actually Rocky Mountain ATV MC.

AJ O'Neil [00:45:46]:
I sometimes forget the MC because I'm not as much into the dirt bikes. But

Steve Edwards [00:45:50]:
Oh, motorcycle. I thought it was master of ceremonies or something. Okay.

AJ O'Neil [00:45:54]:
No. Motocross. ATV.

Steve Edwards [00:45:56]:
Motocross. Right. That would make sense.

AJ O'Neil [00:45:59]:
Next thing I wanna pick is I there's a repo that I've created called pgessentials. And let me actually throw these links in as I'm talking about them here in the comments. And it has Postgres scripts, both for setting up Postgres and for using Postgres. And the key thing about it is that it has a script to create a remote group and to create users in that remote group, which basically, that's what Heroku does. Right? Like, Heroku just creates a remote group, creates users in the remote group, and you get access to the database. And it's something that's built into Postgres. You don't have to have any fancy API stuff on top of it. So for the the rare folks that need to have tenanted Postgres, these scripts may not do exactly what you need to do.

AJ O'Neil [00:46:55]:
They do exactly what I need to do. But they'll definitely give you a head start in terms of well, I don't know. Maybe nowadays with GPT, maybe you could just ask GPT, and maybe it spit out the config without a problem. I don't know. But it it took me at the time that I first set it up and I was reviewing them recently, for another project. But at the time I first set them up, you know, it took I it's not just several hours. It's a few years in terms of, like, I learned a little bit then. I learned a little bit later, and I kinda added some stuff to some scripts.

AJ O'Neil [00:47:25]:
And I finally published this as a repo because I've just been sitting. It's like every time I need the script, I go copy it from the machine that has it, and that, of course, is not a winning strategy. So that, and then 2 more quick things, I think. SSH now has an include directive. Apparently, this happened a few years ago, but then, you know, there's lag time on apt get and, you know, everything else. But now your operating system should have an include directive. So now you can have in your SSH config and include tilde/.ssh/config.d/star, which is something that I have wanted for a long time because, especially doing lots of client work, I want to be able to segment off. Okay.

AJ O'Neil [00:48:09]:
These directives are for this client systems. These directives are for this client systems, etcetera. And just trying to organize things all in a single file has been painful. And I'm so glad that now include exists and is widely deployed. Again, it's kind of old news, but it's new in the sense that you probably haven't been using it. And the if you did know about it as one of the first ones to know about it, unless you were on open BSD, it was probably another 2 or 3 years before your operating system supported it, and you may not have found out in that time. And then last thing is DeepSeq Coder V2. This is a mixture of experts model.

AJ O'Neil [00:48:49]:
So, similar to o one that performs in benchmarks slightly better or slightly worse than GPT 4 o. So if you wanna go grab a llama and try that out, they have a nice 131 gigabyte model, which I have not been able to try yet. I have to I tried to run it on my my Mac. It turns out I think the whole thing has to fit in memory. They only have 64 gigs of RAM, so I'm gonna try it on my server that has 256 gigs of RAM, but no GPUs. So we'll see how that works out. But they also have one that I did try out that's just a normal, like, 8 gigabyte model for mere mortals. And, no conclusion on how great it is or isn't, but I hadn't heard of it before.

AJ O'Neil [00:49:41]:
I just heard about it. So I thought I'd spread the wealth. And then, of course, if you wanna install Ollama quick and easy on Windows, Mac, and Linux, there's the, Webby link for installing Ollama.

Tomek Salkowski [00:49:54]:
Alright. And I have 3 picks, actually. So one is component dash party dot dev, which is a really cool, website, that shows you, basically, each of the, like, basic concept of every, like, UI library known to man, like, Vue, React, Felt, Lit, amber, solid, alpine, things like that. And it just, like, okay. I know how to do it in Angular. I know this concept. How do you do it in Svelte again? And you just you you have this super quick reference. You can just, you know, select each framework that you're interested in, and it shows you, like, how you do styling, how you do slots, and things like that.

AJ O'Neil [00:50:49]:
So Does it have a reference for JavaScript as well, or is it only for frameworks?

Tomek Salkowski [00:50:56]:
Well, in the end, it's it's all JavaScript. No. No. It's it's, only for frameworks. I know.

AJ O'Neil [00:51:03]:
That's too bad considering we have template literals and DOM events and

Tomek Salkowski [00:51:07]:
No. No. Yeah. But it's all of those

AJ O'Neil [00:51:09]:
things that exist.

Tomek Salkowski [00:51:10]:
I think it's mostly about the, like, the compo the the ideas around components specifically, so, like, life cycle. And so maybe, like, web components could be there in that sense. But Why? They're not.

AJ O'Neil [00:51:27]:
I want I don't know. You still have a life cycle of JavaScript.

Tomek Salkowski [00:51:31]:
True. Like, all of True. All

AJ O'Neil [00:51:33]:
the things that the modern frameworks do have been built into the browser at this point. I don't I don't know if there's anything left outstanding except for include HTML, which if you wanna go join that debate on the standards committee, please do because they are convinced that this is not a problem.

Tomek Salkowski [00:51:49]:
Oh oh, I okay. I might I might just, join the debate. I'll give you the Cool. The second one, the second pick is Econes. If you can spell it. I don't know how to actually pronounce it, but it's ic0nes.js.org. It's a project by, again, Anthony Fu, that allows you to browse, like, dozens on dozens of just, icon libraries. And just with a single single click, copy it as a SVG snippet or view component or whatever you wish, or even a PNG file.

Tomek Salkowski [00:52:35]:
So it's a website, but I have it installed as a PWA, app. So it's quickly, you know, on hand. It I I think it literally it probably says somewhere, but it's I think it might have just millions of of icons. So really cool when you, you know, prototype something or you need an illustration for your presentation, things like that. And speaking of presentations, the 3rd pick will be vitcon.org. It's a conference that StackViz organizes with a VIT, core team, every year. This year, it comes to you at October 3rd 4th. It's an interesting formula because, while all talks all talks are prerecorded and then run on the one day, and then immediately run again for the, the the the other time zones so everyone can tune in and and watch it.

Tomek Salkowski [00:53:51]:
And what's cool is that because, all speakers already delivered the talks, they oftentimes visit the chat and actually talk with people who are watching the talks in real time. So it's, pretty much more collaborative even than than, offline conference. So it's free as well. So, we already have, I think, almost 30 k people registered, so it will be huge. There'll be a lot of interesting, announcements and knowledge sharing around JavaScript ecosystem in general because almost everything now is built on VIT. From Stackblitz, we will have a huge announcement as well. So, yeah, you can be first to hear it on October 5th.

Steve Edwards [00:54:47]:
You've heard it here first. Huge announcement from Stackwitz at VidCon.

Tomek Salkowski [00:54:52]:
True.

Steve Edwards [00:54:54]:
Alright. Is that all your picks?

AJ O'Neil [00:54:56]:
Yep. I dropped the link for the component party in the comments. If you wanna drop any of the others, please do so.

Tomek Salkowski [00:55:04]:
Alright. Okay. Thanks.

Steve Edwards [00:55:07]:
Alrighty. So before we go, Tomek, if people want to follow Stackblitz and follow you and everything we've talked about today, where are the best places to do that? Yeah.

Tomek Salkowski [00:55:21]:
I at Stackblitz on Twitter is quite active. I'm actually the person that mostly post there. I like to besides just, you know, spreading Stackblitz features and announcing Stackblitz announcements, I do share a lot of tips around specific, techniques, like general CSS stuff, browser features, and things like that. So at stagmeets on Twitter and at, sulco, s u l c o. That's my, personal Twitter account, so you can connect with me, there as well.

Steve Edwards [00:56:03]:
Alrighty. Well, thank you for coming on, Tomek, and talking about how to make better tutorials. It's something I could use myself. With that, we will wrap all this up. If you wanna get at least 5 dad jokes a week, you can follow me at wonder 95 on Twitter. AJ, are you still cool, AJ 86? I lose track of your Twitter handles.

AJ O'Neil [00:56:26]:
You know, that and it's good. It's good because no one needs to follow me. But if you wanna follow me for my non spicy takes, meaning stuff that's focused on things that are more professional, underscore beyond code. That would be Beyond code. Yeah. But if you wanna if you wanna hear lots of things that you don't wanna hear and be offended, kool aid j 6. Yeah. Poor poor choice of name.

AJ O'Neil [00:56:49]:
It it was it was for when before I was jaded back when I was laid back and chill.

Steve Edwards [00:56:53]:
Alright. Alrighty. So with that, we will wrap up this episode of JavaScript Jabber. Thanks everybody for listening slash watching slash paying attention, and we'll talk to you next time.