Speaker 1: Hello, everybody, Welcome to another exciting issue Issue episode. Excuse
Speaker 1: me of JavaScript jabber. I am Steve Edwards, the host
Speaker 1: with the face for radio and the voice for being
Speaker 1: in mind. But I'm still your host, mostly because nobody
Speaker 1: else doesn't want to do it and Chuck's not here.
Speaker 1: But with me on the panel today we have mister
Speaker 1: aj o'neo. How you come in, aj or? How you doing?
Speaker 1: Excuse me eo yo yo.
Speaker 2: I'm coming at you live from a very wonderful day.
Speaker 2: It would seem not too hot, not too cold, good
Speaker 2: times here in the shed uneventful.
Speaker 1: That's nice, right, Yeah, I'm coming from a it much
Speaker 1: cooler Portland. It's like Paul just hit wham all of
Speaker 1: a sudden this week and it's not even the twenty first,
Speaker 1: which really bugs is not out of me. I prefer
Speaker 1: my long, nice summers with warmth, but that's okay. And
Speaker 1: our special guests mister Toma Sulkowski, how you doing?
Speaker 3: Yeah?
Speaker 4: Hi, Hi guys, Hello everyone, I'm good and come at
Speaker 4: you from also nice, sly weathered Poland. It's it's evening here,
Speaker 4: but I am like super hyped and ready to.
Speaker 1: Def with you. Right, So, how warm is it there.
Speaker 1: We always have to talk about warmth because Dan's always
Speaker 1: complaining about how hot it is and Tel Aviv, but
Speaker 1: he's not here to do that today.
Speaker 4: So let me just turn on my unit's converter. So
Speaker 4: it's sixty.
Speaker 1: Four of your okay, warmth, they're about twenty fifteen celsius.
Speaker 3: Yeah, yeah, eighteen to twenty.
Speaker 1: Damn, getting good at that. Okay, nice? Right, Okay, So
Speaker 1: now that we've established weather patterns in our appropriate vicinities,
Speaker 1: let's talk about what we're going to talk about, which
Speaker 1: is interactive coding tutorials and a little bit of that.
Speaker 1: Let to talk from here about these tutorials and making
Speaker 1: good tutorials.
Speaker 3: Right, Hopefully.
Speaker 4: The thing is that it's it's up to the tutorials
Speaker 4: creator then, so, but we try to take care of
Speaker 4: the all the obstacles before creating the actual tutorials. So yeah,
Speaker 4: so I guess we can start with the like just
Speaker 4: tutorial part because I think this has been on the
Speaker 4: programming scene for like forever pretty much. It's actually there's
Speaker 4: like this one cool uh, talk about four quadrons of
Speaker 4: documentation and how to guides walk through the like reference
Speaker 4: like API reference and tutorials, right, so it's nothing new
Speaker 4: on one hand.
Speaker 3: On the second hand, we have the.
Speaker 4: Interactive part, which I think like that's that's the exciting
Speaker 4: thing that since existed several years ago.
Speaker 1: So yeah, okay, so tutorials can't This is the starting point.
Speaker 1: If anybody wants to to go look at this while
Speaker 1: we're talking, I'll put the link there here on the screen.
Speaker 1: So give us the rundown on what it is, what
Speaker 1: it's built on, you know, the tech stack, and then
Speaker 1: how to use it.
Speaker 3: Cool.
Speaker 4: So I think that the best introduction to this, to
Speaker 4: the what it is and what it can do, is
Speaker 4: kind of a little bit of history, and it starts with.
Speaker 3: The school dude call rich Carries. I don't know if
Speaker 3: you know him.
Speaker 1: Yes, we just talked to him. With the past month,
Speaker 1: I think doctor Richards swell kid. I think it's five
Speaker 1: actually five coming out, So yeah, we factor very recently.
Speaker 3: Here we go.
Speaker 4: So Richie is a very great like communicator and educates
Speaker 4: about spells and spelled kids like really perfectly super inspiration.
Speaker 4: And and when they launched the Spelt initially they already
Speaker 4: had an interactive tutorial which Force felt, being like a
Speaker 4: front end library, it was doable let's say, so they
Speaker 4: built this.
Speaker 3: Spelt tutorial, and from the feedback from.
Speaker 4: The community, it seems like that was one of the
Speaker 4: big reasons why i Felt got so popular so quickly,
Speaker 4: and why it's so easy to get into spell because
Speaker 4: you can just cook up topic or a syntax element
Speaker 4: of Spelt and have an actual page with an exercise
Speaker 4: and explanation and everything. So this learning experience is really cool.
Speaker 4: But then, as you mentioned spelt Kit, when speltky Tamal
Speaker 4: came along, it was more tricky to make a tutorial
Speaker 4: like this in the browser, right So thankfully in the meantime,
Speaker 4: stag Bits where I come from, built web containers and
Speaker 4: web containers very short recap are like super small OS
Speaker 4: in a browser. So basically you have a file system,
Speaker 4: you have a kit integration, you can run node. Most
Speaker 4: importantly for us, and for the first couple of years
Speaker 4: it was working exclusively on stack liledz dot com, so
Speaker 4: it was only the engine for staggers outcome projects that
Speaker 4: you can launch with, not new or at the other
Speaker 4: stagg with starters.
Speaker 3: But when spelt kit was.
Speaker 4: Closing to be the one zero version, Rich wanted to
Speaker 4: have a tutorial for Spelt kit as well, so he
Speaker 4: reached out to us so we can create some kind
Speaker 4: of API to use web containers with tutorials.
Speaker 3: So that's how web Containers API came about.
Speaker 4: And so basically that was our design partner for creating
Speaker 4: web containers API and spelt Kit tutorial As you can
Speaker 4: see right now when you go to spelc tit tutorials,
Speaker 4: you see like putting web containers. That's how that's what
Speaker 4: what is built on behind the scenes and why the
Speaker 4: back end aspects of felt Kit work in the tutorial.
Speaker 1: So yeah, so real quick, I'll jump in and say
Speaker 1: that we talked to Eric Simon's from Stackplits about web
Speaker 1: containers in JavaScript Jabber episode four eight seven. So if
Speaker 1: you want to hear more about the web containers and
Speaker 1: how they work. The big issue is being able to
Speaker 1: run note in the browser basically from that's from gosh,
Speaker 1: that's three years ago, so juneated twenty twenty one was
Speaker 1: when that came out. So but link in the show
Speaker 1: notes and I'll put it here on the screen if
Speaker 1: you want to go back and listen to that.
Speaker 4: Yeah, just to add to that, like we're constantly working
Speaker 4: on low containers, so primarily on the note part because
Speaker 4: we are keeping up with the other releases. But since
Speaker 4: then we've also released an initial experimental version of Python
Speaker 4: support and PHP, and we can support.
Speaker 3: Ask light as well.
Speaker 4: So it's still work in progress, supporting more and more
Speaker 4: interesting stuff.
Speaker 1: Okay, so let me go back there. As a PHP developer,
Speaker 1: you said, you said you're basing with the web continuers.
Speaker 1: You can run PHP in the browser.
Speaker 4: Uh, but yes, it's it relies on the wasn't a
Speaker 4: version of PHP. So as long as something has wasn't
Speaker 4: binary available for the browser, we can hook it up
Speaker 4: to web containers.
Speaker 1: I had no idea. Very cool, it's cool, to be honest.
Speaker 3: It's like it's very early.
Speaker 4: So for example, one thing is supporting the language and
Speaker 4: the other is supporting the package.
Speaker 3: Manager for it.
Speaker 4: It has its own you know, you have to implement
Speaker 4: it usually because there is never a wasn't version of
Speaker 4: a package manager. So while you can, for example, run
Speaker 4: a Python, the PIP doesn't doesn't work yet until we
Speaker 4: have enough requests for it and then we'll start working
Speaker 4: with it. But yep, that's still you know, developing story.
Speaker 1: Okay, sorry to interrupt, but moving on all right.
Speaker 3: So after after felt kid tutorial.
Speaker 4: We had several other projects using web container API for
Speaker 4: other stuff like sometimes even like their own playgrounds, or
Speaker 4: there is an interesting project that allows you to, for example,
Speaker 4: check the the size and contents of a package by
Speaker 4: actually using web containers to download it in the browser
Speaker 4: and experiment on them and just look into what it downloaded.
Speaker 4: But also this in the last year, we've seen some
Speaker 4: new tutorials coming to lights, so I think the biggest
Speaker 4: one was Angular dot dev with Angular official documentation that
Speaker 4: released a new version of the documentation last year, and
Speaker 4: also they included an interactive tutorial that was a big
Speaker 4: part of this launch and very similar to what reached
Speaker 4: it with feld Kit. They built it with a container's API.
Speaker 4: And in the meantime, Anthony Fu that you might know, I.
Speaker 1: Don't know, like tons of projects, right, he's a big
Speaker 1: view guy too.
Speaker 3: Yeah, of course, so.
Speaker 4: He started working on a Next tutorial the same concept.
Speaker 4: If you look at it even now, if you look
Speaker 4: at feld Kit and Angular tutorial, it's a very similar
Speaker 4: structure visually, so Next is very similar as well as
Speaker 4: far as I know. He finished the like the engine
Speaker 4: part and now they're working on the content. So when
Speaker 4: we looked at it. Actually, you can watch Antony coding
Speaker 4: it because he released like the full he life coded
Speaker 4: most of it on YouTube. There's a whole playlist and
Speaker 4: you can see Anthony, who was like really great developer.
Speaker 4: Of course, it took him, I think, like several dozen
Speaker 4: days to do it, to build the engine, so it's
Speaker 4: it's definitely not an obvious type of app. So when
Speaker 4: we looked at what spelt kit and NAT and Angular
Speaker 4: team did.
Speaker 3: And realize that it's a very similar functionality, very similar structure,
Speaker 3: we realized that we should build a library for it.
Speaker 3: So kind of you can think of it like a
Speaker 3: storybook project, right when Storybook came along. Suddenly, like all
Speaker 3: component libraries are using Storybook to document their components, no
Speaker 3: matter if this is a React or view or Spelt
Speaker 3: or Angular, but.
Speaker 4: You have the same kind of features, the same layout,
Speaker 4: and this is now an available with tutorial kit basically.
Speaker 4: So yeah, you can start playing with it by just
Speaker 4: running NPM Create tutorial and you have tutorial in like
Speaker 4: twenty seconds flat.
Speaker 1: Okay, so yeah, I'm looking at I'm just looking at
Speaker 1: the demos, So what's the We talked about web containers
Speaker 1: now before you mentioned Astro. So what are the different
Speaker 1: tools of the different layers in this in this kit.
Speaker 3: Okay, So when you look at.
Speaker 4: Any of these interactive tutorials, especially once built with tutorial Kit,
Speaker 4: now you will see content part and interactive parts. So
Speaker 4: usually on the left you have you have a description
Speaker 4: of a topic. You have an explanation and this is
Speaker 4: like a rich text, so like formated text. And on
Speaker 4: the right side you have the editor. You have the
Speaker 4: life preview that updates whenever user edits stuff. Even you
Speaker 4: have an interactive termino. That right interactive part is basically
Speaker 4: built with web containers.
Speaker 3: The editor uses.
Speaker 4: Cod Mirror, but we wanted to use something for the
Speaker 4: content part, for the descriptions, for the like different pages,
Speaker 4: something that is really fast and universally UH allowed by
Speaker 4: by developers so other developers can build on top of
Speaker 4: tutoral kit. So that's for the main content part we've
Speaker 4: picked Astro. So this is basically when you when you
Speaker 4: build or deploy a tutoral kid project, it's basically like
Speaker 4: depraying any other static Astro site. So it's it's a
Speaker 4: bunch of static pages with web containers sprinkle sprinkled down
Speaker 4: on top of it.
Speaker 1: All right. Just for those who might not be familiar
Speaker 1: with Astro, we've had We've had Fred shot on here.
Speaker 1: It's been a while, I think as Astro one or
Speaker 1: too when it came out. But Astro is basically this
Speaker 1: tool that seems to have taken the static site world
Speaker 1: by storm, and I've used it myself for a site.
Speaker 1: It's really pretty slick. The general idea of astro is
Speaker 1: that you can have a static site with pre built
Speaker 1: everything sort of rendered basically like your old school ATML,
Speaker 1: but you can throw islands of interactivity in there, whether
Speaker 1: to view components, react component, as felt component, and I
Speaker 1: know that since I used it last they've added a
Speaker 1: number of new features and capabilities to it, so it's
Speaker 1: it's definitely one of the more popular tools in that world.
Speaker 4: Yeah, it's super like extremely fast as well, and they
Speaker 4: constantly innovate on top of it as well.
Speaker 3: So we're using I think we might have been one.
Speaker 4: Of the first beer projects to use as collections on
Speaker 4: that scale. So the lessons are actually like the collections
Speaker 4: in Astro. But best to see it if you go
Speaker 4: to demo dottag, Demo dot tutoral kid dot debt.
Speaker 3: You can see how quickly it loads because.
Speaker 1: Again, yeah, I'm there right now. It gives you a
Speaker 1: little a way to go. So is this this is
Speaker 1: one that was built with it, and it's just walking
Speaker 1: you through when that was built with her. Right, It's
Speaker 1: not you're necessarily building editorial yourself.
Speaker 4: No, no, no, we were looking into that, but it
Speaker 4: was like too much of an inception if you wanted
Speaker 4: to build the tutorial instead of inside of tutorial, the
Speaker 4: space is quite.
Speaker 1: Limited for that. Okay, so this is just showing you. Okay, yeah,
Speaker 1: it's just doing some real basic stuff like adding styling forms,
Speaker 1: is what the teacher is.
Speaker 4: I created just a demo tutorial as the very first implementation,
Speaker 4: as I was also testing in the library.
Speaker 1: Okay, all right, cool, So just excuse me. He mentioned
Speaker 1: some of the people that have used this, Can you
Speaker 1: point any or I don't know if you guys have
Speaker 1: any links on the side of ones that have been
Speaker 1: completed or any public instances have used this tool I.
Speaker 3: Have to look at. I think the one of the
Speaker 3: coolest one is by one.
Speaker 4: Of actually tutortal key developers as well, Ariy Perk, who you.
Speaker 3: Might know as a v test core team.
Speaker 4: One of the biggest main contributors. So he is currently
Speaker 4: also the primary maintainer of Astro and he built VAT.
Speaker 3: Plug intotoral. So if you wanted to.
Speaker 4: Build let me see if I can quickly find it.
Speaker 4: If you want to, I wanted to build a VIAT
Speaker 4: plug in, I don't know where to start. The tutorial
Speaker 4: will be great.
Speaker 1: Uh yes, see view Mastery has a course on it,
Speaker 1: but I don't think that's it.
Speaker 4: No, no, no, that's no, I don't think that's its.
Speaker 3: Oh. Actually you might go to a.
Speaker 4: Tutorial key repository which I will go on get up, Yes,
Speaker 4: and they're in the discussion part. We have several people
Speaker 4: sharing the tutorial. Oh okay, I think this is this
Speaker 4: is a nice one, so you will see if you're
Speaker 4: in the discussion part and go to our first turial
Speaker 4: using tw turtle kid and this one is the remote framework.
Speaker 4: So different thing that I've than what I've talked about,
Speaker 4: but I think this is the most extensive to troll
Speaker 4: we've seen so far. So you can see like several
Speaker 4: cool features like you have like in Sneepets of Cold
Speaker 4: on the documentary on the description side.
Speaker 1: And.
Speaker 4: Tons of actually like chapters and lessons. Yeah, definitely the
Speaker 4: biggest one that I've seen.
Speaker 1: Okay, yeah, I've got to link up there as a
Speaker 1: banner right now so that you can you can see that.
Speaker 1: So okay, So if I want to use this, Let's
Speaker 1: say I want to build a tutorial. Mhm. This is
Speaker 1: something that's all hosted on stackplits, but you guys are
Speaker 1: the self hosted or how exactly does that work if
Speaker 1: I want to create.
Speaker 4: So so basically you have two steps if you want to
Speaker 4: create it, first is run NPM create tutorial and that's
Speaker 4: couples the projects like just like any other like NPM
Speaker 4: create stuff, a couple of questions mostly about like do
Speaker 4: you want gits?
Speaker 3: Do you want?
Speaker 4: Which package manager do you want in your like for
Speaker 4: the tooral kit project. And then because it's ultimately an astrocite,
Speaker 4: you can run NPM run build and that creates the
Speaker 4: static part and you can houst it anywhere netli five
Speaker 4: or so you name.
Speaker 1: It pages or something like that as well.
Speaker 4: I think kit caab pages has one gotcha at this
Speaker 4: point because it's a super technical thing. But that's a
Speaker 4: great question because for the web container part, you need
Speaker 4: to set specific head uh and GitHub pages.
Speaker 3: Don't allow you to set them.
Speaker 4: We're working on creating proxy for that so so you
Speaker 4: don't so you won't have to even think about it.
Speaker 3: But right now, it's.
Speaker 4: Only for the hostings that allow you to set custom
Speaker 4: headers for your.
Speaker 3: For your site, so.
Speaker 4: Like cloud Flower, yeah, nexty five or so, all the
Speaker 4: all the common ones.
Speaker 1: Okay, So obviously since you work for stack stackls, you
Speaker 1: can also create this on stack lits as it. Yeah, yeah,
Speaker 1: recommend recommends any in the instructions installation instructions.
Speaker 4: Yes, additionally, so right now one I like to do
Speaker 4: it actually locally for for most cases because we also
Speaker 4: have a very cool extension that works on vs code,
Speaker 4: and we only support vs code in a very experimental
Speaker 4: version of our editor so far.
Speaker 3: So if you want to build a.
Speaker 4: Tutorial tutor kit project, I would highly recommend you to
Speaker 4: use that extension because it allows you to traverse the
Speaker 4: project very quickly. It allows you to create new lessons
Speaker 4: by just you know, right mouse click click new lesson
Speaker 4: and you don't have to create manually like the fold
Speaker 4: the structure and it. There are probably like twenty different
Speaker 4: settings you can use to customize each lesson. So because
Speaker 4: it's in an marked down or DX file, you set
Speaker 4: them up in front matter, so the extension supports intelligence for.
Speaker 3: That front matter.
Speaker 4: Actually, so if you want to you know, configure the lesson,
Speaker 4: you can with the extension.
Speaker 3: It will you know, do the things that normally only be.
Speaker 4: Possible with like typescript or something with you know, out
Speaker 4: the complete warning about the wrong types and things like that.
Speaker 4: So yeah, honestly, we're not pushing stag Blitz very hard
Speaker 4: on this. I think the biggest value we have here
Speaker 4: or that we want to provide, is that when you
Speaker 4: have tutorial Kit project, every demo that you have, every
Speaker 4: project that runs on each lesson has an open in
Speaker 4: stack Blitz button which creates that lesson. So if you
Speaker 4: if you go to any of these lessons, for example
Speaker 4: on the remote tutorial on the top right, you'll see
Speaker 4: like the stackles bolt yes and it will yeah, and
Speaker 4: it will create that in stack. It's opened that specific
Speaker 4: exercise in Staglish, which is really cool because it's while
Speaker 4: a lesson creator might want to for you to go
Speaker 4: from like point A to point B within each exercise,
Speaker 4: you might actually really like this code base and want
Speaker 4: to explore it further, maybe save it for later. So
Speaker 4: in that case, you just openxtagelets and make it a
Speaker 4: stagltz project and you can just build or build as
Speaker 4: any typicult STABLETS playground.
Speaker 1: So now, yeah, so I'm just walking through the instructions
Speaker 1: and it's it's sort of like nuxt in terms of
Speaker 1: you're using file based routing in need them for the
Speaker 1: display of titles and where are your different files go
Speaker 1: and so yeah, there's a pretty strict it's pretty opinionated, right,
Speaker 1: and how it has to work and need Yeah, very
Speaker 1: which makes sense, right, You don't want to have to
Speaker 1: guess where everybody's put in their code they run a tutorial.
Speaker 4: Yeah, we do have a lot of customization, but mostly
Speaker 4: on the specific lesson level.
Speaker 3: So do you want a terminal.
Speaker 4: Even like what kind of commands do you allow your
Speaker 4: user to run the terminal so they don't you know,
Speaker 4: go into some like crazy states if they run like
Speaker 4: anything with a container that could be.
Speaker 3: Detrimental to the learning experience.
Speaker 4: But yeah, the file if file structure is that.
Speaker 3: So you put everything in the content.
Speaker 4: Then you have tutoral parts to have several parts, and
Speaker 4: the tutorial parts you have a chapter and then a lesson,
Speaker 4: and then in each lesson you have a mark down
Speaker 4: file that describes the the lesson that has a lesson description,
Speaker 4: and then the files folder which includes the app that
Speaker 4: needs to run as that demo at that interactive part
Speaker 4: of a lesson. So that's like very basic structure, but
Speaker 4: as when you start building with it very soon, it
Speaker 4: would because that lesson needs to be the files for
Speaker 4: a lesson need to be an.
Speaker 3: Actual working project.
Speaker 4: It needs to be something that you could run locally
Speaker 4: by running NPM install and PM run start. Right, So
Speaker 4: if you imagine creating all that for each lesson and
Speaker 4: you have like, you know, thirty lessons, you'd have like
Speaker 4: thirty copies of the same project with maybe you know,
Speaker 4: slide change in two or three files.
Speaker 3: So we've also accounted for that.
Speaker 4: And you can also utilize ten plates folder where you
Speaker 4: put your general structure of that code based that you demo. So,
Speaker 4: for example, if you want to do let's say it's
Speaker 4: it's a VAT project that you want to build upon,
Speaker 4: so you can generate a VAT code based basic beat
Speaker 4: cond base in the tutortal kits template folder, and then
Speaker 4: for each lesson you can only define the files that
Speaker 4: are in the source folder for your demo app.
Speaker 3: So it's not that much you know, repeatable code.
Speaker 1: Okay. So one thing we talked a little bit earlier
Speaker 1: about the back ends that are supported. So how extensive
Speaker 1: can this be in terms of front and only versus
Speaker 1: full stack versus whatever you mentioned siquo light right, obviously
Speaker 1: you can run node as a back end PHP is
Speaker 1: if E Is that what I'm understanding?
Speaker 3: Yeah, I wouldn't. I wouldn't probably for early early days.
Speaker 4: I wouldn't try it yet with know, with with tools
Speaker 4: set outside of now ecosystem.
Speaker 3: But now itself is pretty well supported.
Speaker 4: Basically to try it before you like, get invested and
Speaker 4: install and scuffle the project. If it works on stags
Speaker 4: dot com, it will also be compatible with the kit.
Speaker 4: But I've seen already people, I've seen a tutorial on
Speaker 4: one of our rms using eske Light and at least
Speaker 4: one next day es tutorial. So that's kind of the
Speaker 4: area that we cover.
Speaker 1: Okay. So so I like to work primarily in la
Speaker 1: vel view with you know, sometimes with inertia, depending on
Speaker 1: you know, depending on the project. It sounds like that
Speaker 1: might be a bit much at this point, just because
Speaker 1: they're PHP based.
Speaker 4: Oh yeah, yeah, until we can support you know, composer
Speaker 4: and stuff like that.
Speaker 1: It's not Yeah, okay, so you could do obviously nuts
Speaker 1: is using it, right, so you could do nucks since
Speaker 1: that's node based. Uh any front and what about and
Speaker 1: I haven't again, I haven't played with stackplts since Eric
Speaker 1: came on three years ago. If you want to do
Speaker 1: something that involves an external API, you know, if you
Speaker 1: want to use contentful, you know for example or some
Speaker 1: of the other ones. There's one I used to use
Speaker 1: that completely I can't remember now, but something like that.
Speaker 1: Can you do that where you would have to set
Speaker 1: up an external API and and and connect with that
Speaker 1: in your in your tutorial or is that side the scope?
Speaker 3: It should work. I think the.
Speaker 4: Challenges are on the you know, on the edges of that.
Speaker 4: So for example, in practice, if this is an API
Speaker 4: that you need like to set private keys for, we
Speaker 4: don't support these kinds of things like storing the environment
Speaker 4: variables and.
Speaker 3: Things like that. But besides that, I think that should work.
Speaker 4: It's just you know, in practice, there would be probably
Speaker 4: problems with with rate limiting these if you don't if
Speaker 4: you can't use like tokens and things.
Speaker 1: Like that, right, But.
Speaker 3: Besides that, Yeah, does this should work.
Speaker 4: Also, it works in a very's say, hardcore scenarios if
Speaker 4: you want if you have like private package Manager, or
Speaker 4: if you if you want to run it behind the
Speaker 4: firewall behind behind you like corporate a VPNs that's also supported.
Speaker 1: So yeah, yeah, I would. I guess if you if
Speaker 1: you were doing something that involved data with maybe you
Speaker 1: could just include it with like a Jason file. It
Speaker 1: has your data and sort of market and a PI
Speaker 1: type of thing, if that's what you're worried about, Because
Speaker 1: this is obviously why you vat no plugins bits. This
Speaker 1: is going to be more of a display. You know,
Speaker 1: you can these typutorials for how you're just playing stuff
Speaker 1: on the screen and not necessarily data data pullings are.
Speaker 1: I'm more of a back end guy than then that,
Speaker 1: So that's where my brain goes.
Speaker 4: I think that that's how I would probably do it. Also,
Speaker 4: it's because it's Astro project. You can do everything that
Speaker 4: Astro can, so even you can add separate pages for
Speaker 4: to the that are not in that tutorial UI, and
Speaker 4: you can also like like you said, like host Jason
Speaker 4: files for specific lessons and things like that. So that's
Speaker 4: probably I think optimal if you want especially like a
Speaker 4: lot of people hitting that API end point.
Speaker 1: Okay, so now where is this? So I haven't looked
Speaker 1: where is this in terms of releases? Oh, you're still
Speaker 1: in so you're pre one point oh. It looks like
Speaker 1: your point two point three as of the latest release.
Speaker 4: Yeah, there is a Yeah, we are still pre a
Speaker 4: bit shy to release the one point oh version.
Speaker 1: But it's always the scary thing to decide when is
Speaker 1: when is it good enough to release one point oh?
Speaker 3: Yeah?
Speaker 4: I remember when when we react with like pre one
Speaker 4: point oh for like several years, right, and then.
Speaker 3: They jumped to fourteen.
Speaker 4: Anyway, we have we do have a road maup to
Speaker 4: one point and it's not that crazy actually, so I
Speaker 4: think we'll be hitting it in a couple of months.
Speaker 3: But we're also.
Speaker 4: Super careful about those breaking changes for that we're making
Speaker 4: right now, and I think the only ones we've made
Speaker 4: really were pretty sweet because they like removed a lot
Speaker 4: of boil uplet in several places.
Speaker 1: But yeah, so yeah, I could see in the in
Speaker 1: the uh GitHub repo, Uh there is a broadnap to
Speaker 1: one point zero issue. Yeah, she went point four. So
Speaker 1: I just put the link in there so that if
Speaker 1: I guess if you want to follow the development and
Speaker 1: see how close they're getting to a one point, Oh,
Speaker 1: this is what you can subscribe to exactly.
Speaker 4: And for when we talk about this, like a huge
Speaker 4: shout out to Ari who is leading the open source
Speaker 4: aspect of it, superresponsive in all the issues. So yeah,
Speaker 4: he's doing great job on on making it a truly
Speaker 4: visible open source project.
Speaker 1: So going back to editors, you mentioned that you have
Speaker 1: the vs code extension. So if I used something like
Speaker 1: one of the jet Brain's IDEs, you know, WebStorm, php Storm,
Speaker 1: if I'm doing there, I'm probably not going to have
Speaker 1: all of the interactivity that I would in vs code
Speaker 1: with the extension.
Speaker 4: Yeah, the extension really so when you when you create
Speaker 4: the lesson, you need to create a folder and you
Speaker 4: need to create the file, at least the content MD file.
Speaker 4: So the annoying part when you do it by hand
Speaker 4: is that copying that same structure, you'd have to like
Speaker 4: have the you know, like empty folder with not empty folder,
Speaker 4: but like a placeholder for template.
Speaker 3: Folder let's call it like this with a file.
Speaker 4: When that you create that you copy every time you
Speaker 4: want to create a lesson, I think in the web
Speaker 4: Storm and things like that you should be able to
Speaker 4: create some kind of templates to help with that element.
Speaker 3: I think the biggest drawback or.
Speaker 4: Thing that you don't get with the extension when not
Speaker 4: using extection is that intelligence, because like so in practice
Speaker 4: you'll have to see.
Speaker 3: Our documentation a bit more. But also.
Speaker 4: I think in reality, once you create like your second
Speaker 4: or third lesson, you have the settings usually dialed in
Speaker 4: so you don't have to touch them that much, So
Speaker 4: that shouldn't be that annoying. Let's say, I think the
Speaker 4: extension really helps initially, plus that thing with creating, with
Speaker 4: having a template for the for the lesson. Oh one
Speaker 4: thing to say about the settings, I think it's why
Speaker 4: it's also helpful and not that annoying not to have
Speaker 4: this intelligence is that, for example, one thing that you
Speaker 4: might want to set is default file that a student
Speaker 4: can see in the editor. Let's say that you have
Speaker 4: like a source folder displayed and like five files index HTML,
Speaker 4: index CSS in the app view and something like this,
Speaker 4: and you want in basically every lesson in the chapter
Speaker 4: to always focus on the up dot view file. In
Speaker 4: that case, you can set this on every lesson in
Speaker 4: every lesson in its content MP defile or you can
Speaker 4: set it on the chapter level just once and it's
Speaker 4: inherited for every lesson. So this way, if this is
Speaker 4: really read repeatable logic, you just set it once and
Speaker 4: it's just you know, applied to a whole part of
Speaker 4: the tutorial or even on the whole tutorial.
Speaker 1: Okay, yeah, that's nice and not having to repeat the
Speaker 1: boiler plate all the time something that Deth can appreciate.
Speaker 1: I'm sure. All right, anything else about this tool that
Speaker 1: we haven't covered yet.
Speaker 4: Yeah, So I think the main point is that this
Speaker 4: is an open source and so that comes like both ways.
Speaker 4: If you have any questions or requests, visit our issues,
Speaker 4: but if you also want to contribute, we have some
Speaker 4: good first issues, or you can come up with your
Speaker 4: own issue and contribute to it.
Speaker 3: Well. As I said, we're very open for that. And yeah,
Speaker 3: I think I think this will be a very cool
Speaker 3: thing that will.
Speaker 4: Become i wouldn't say a standard, but something to expect
Speaker 4: from every bigger library, so that you can have you know,
Speaker 4: you can either read the Dogs, the more static version
Speaker 4: of the Dogs, or go through the tutorial without having
Speaker 4: even to install anything. And one thing also I've seen this,
Speaker 4: I think it's also a kind of like a forcing element.
Speaker 4: When you build a through like that, you end up
Speaker 4: with tons of instantly available demos. So as a devl
Speaker 4: or developer advocate, having that kind of tutorial always online,
Speaker 4: it's very cool to be able to just go there
Speaker 4: and you know, live demo this part of dark part
Speaker 4: of the framework, because you have everything already set up.
Speaker 4: So I think it's useful both for people who go
Speaker 4: and just want to taste drive a library or framework
Speaker 4: and for the more advanced people who are just you know,
Speaker 4: constantly returning to the same thing to experiment with a concept.
Speaker 3: Yeah.
Speaker 1: Yeah, So I'm looking through the issues list right now.
Speaker 1: There's as of today, there's thirty eight open, and you
Speaker 1: can see some of the different tags that they've created.
Speaker 1: As you mentioned, there's one tag that's a good first issue,
Speaker 1: so one of those little simple things that would be
Speaker 1: good for somebody who wants to dive in and tackle
Speaker 1: something easy and get a win. And then there's bugs.
Speaker 1: I like the pr welcome one.
Speaker 3: Is it for the bug.
Speaker 1: There's one that there's one that is bug good first
Speaker 1: issue p are welcome.
Speaker 4: Oh okay, I can see unders notable, but noticed that
Speaker 4: most of the issues are actually.
Speaker 3: Feature requests or enhancements.
Speaker 4: Enhancements, right, Yeah, so it's it's pretty.
Speaker 1: Staple one window specific one that I'm seeing help wanted
Speaker 1: on one of them. So yeah, there's a looks like
Speaker 1: there's plenty of options and opportunities to jump in and
Speaker 1: get involved with. This is something you want to be
Speaker 1: involved with.
Speaker 3: Yeah, it's the eldest.
Speaker 4: Also, the activities pretty much from the last month, right,
Speaker 4: so it's it's quite active.
Speaker 1: Yeah for sure. Aj, you got any questions or anything,
Speaker 1: just listening this time? Wow, that's uh, that's really weird.
Speaker 1: We'll just leave that at that. So that's not.
Speaker 2: The only time. You may have been on other times,
Speaker 2: but sometimes it's just somebody else's domain.
Speaker 1: Right, Yeah, it's like me when we're talking about go
Speaker 1: or rest or something like that.
Speaker 3: For you.
Speaker 1: Okay, unless you got anything else to we'll move on
Speaker 1: to picks. Anything else you want to cover, I'm good,
Speaker 1: all right, So picks for the part of the show
Speaker 1: where we get to talk about anything we want to
Speaker 1: talk about within reason of course that's approved by the FCC.
Speaker 1: Could be tech, could be non tech, could be a book,
Speaker 1: a movie. Check always does games because he's a big
Speaker 1: board game kind of guy. I will start off with
Speaker 1: the the dad jokes of the week. This is always
Speaker 1: the high point of any episode that I'm on. So
Speaker 1: let me get set up here real quick. Got to
Speaker 1: get my drum player in place here, So okay. So
Speaker 1: question what was Why was root beer the best drink
Speaker 1: on the Titanic? Because root beer floats? Right? Obviously they
Speaker 1: didn't have enough root beer because it didn't float. You know,
Speaker 1: cut so too soon. It's only been one hundred and
Speaker 1: twelve years, You're right, got to wait till at least
Speaker 1: two hundred.
Speaker 3: You know.
Speaker 1: Cosmetic surgery used to be such a taboo subject, but
Speaker 1: now you talk about botox and nobody raises an eyebrow.
Speaker 1: Oh yeah?
Speaker 2: And then please, please, please don't. No one has ever said,
Speaker 2: look at that person's botox. Don't they look amazing? No
Speaker 2: one's ever said.
Speaker 1: That, Yeah, it's it's definitely not moving, shall we say?
Speaker 1: And then finally, how does Burger introduce his significant other?
Speaker 1: Does meet Patty? And then I, actually, I do have
Speaker 1: another pick, and this fits in with the dad jokes
Speaker 1: of the week. Uh Babylon Bee had a really great
Speaker 1: uh post or article and the title of it is
Speaker 1: uh Dad jokes panned by critics, and it's basically a
Speaker 1: story about how dad's telling his dad joke and his
Speaker 1: kids are like, uh yeah, really sort of like my house,
Speaker 1: you know. I'll give you a couple of lines from it.
Speaker 1: In a scathing seven hundred and fifty word review, fellow
Speaker 1: dad joke critic Eric and Matthews, aged ten, pointed, I
Speaker 1: thought while the joke was technically funny, it was just
Speaker 1: a repackaged version of a joke told previously. Right. Asked
Speaker 1: how he was taking the negative reviews, Phil appeared to
Speaker 1: shrug get offices. Hey, that's just showbiz. At publishing time,
Speaker 1: the critics had retracted their statements after being offered ice
Speaker 1: cream for dessert Sonday put the link for their in
Speaker 1: the notes. But I was very appreciative of that one,
Speaker 1: since it one of those kinds. It's like somebody was
Speaker 1: living with me at home, you know. And I'll put
Speaker 1: it for a banner here, just for everybody to see.
Speaker 1: Those are my picks for the week. AJ, What do
Speaker 1: you got for us?
Speaker 2: Well, first of all, last week, if you remember, I
Speaker 2: complained that I was coming at you live from a
Speaker 2: busted solenoid, and so I'm going to pick Rocky Mountain
Speaker 2: ATV because they had the part that I needed for
Speaker 2: my ONTO four tracks and turned out that I haven't
Speaker 2: actually installed it yet because what the immediate solution was
Speaker 2: whack the existing one with a wrench. I don't know
Speaker 2: how that didn't fix itself when I was going over
Speaker 2: the hills.
Speaker 1: That's almost like duct tape, right.
Speaker 2: Yeah, But anyway, Rocky Mountain ATV. If you're in Utah,
Speaker 2: it's a no brainer. Well, I mean, I guess unless
Speaker 2: you're four hours away from them, but and anywhere else
Speaker 2: in the country, I don't know. They're just they're a
Speaker 2: good company. I like them. So if you got if
Speaker 2: you got toys, then check out Rocky Mountain ATV. It's
Speaker 2: actually Rocky Mountain ATV MC. I sometimes forget the MC
Speaker 2: because I'm not as much into the dirt bikes.
Speaker 1: But oh, motorcycle. I thought it was Master of Ceremonies
Speaker 1: or something.
Speaker 2: Okay, Motocross ATV.
Speaker 1: Motocross, right, that would make sense.
Speaker 2: Next thing I want to pick is I there's a
Speaker 2: repo that I've created called PG Essentials And let me
Speaker 2: actually throw these links and as I'm talking about them
Speaker 2: here in the comments, and it has Postgress scripts, both
Speaker 2: for setting up postgress and for using postgress. And the
Speaker 2: key thing about it is that it has a script
Speaker 2: to create a remote group and to create users in
Speaker 2: that remote group, which basically that's what Heroku does, right,
Speaker 2: Like Heroku just creates a remote group, creates users in
Speaker 2: the remote group, and you get access to the database.
Speaker 2: And it's something that's built into postgress. You don't have
Speaker 2: to have any fancy API stuff on top of it.
Speaker 2: So for the the rare folks that need to have
Speaker 2: tenanted postgress, these scripts may not do exactly what you
Speaker 2: need to do. They do exactly what I need to do,
Speaker 2: but they'll definitely give you a head start in terms
Speaker 2: of well, I don't know, maybe nowadays with GPT, maybe
Speaker 2: you could just add GPT and maybe it's spit out
Speaker 2: the config without a problem. I don't know. But it
Speaker 2: took me at the time that I first set it up,
Speaker 2: and I was reviewing them recently for another project. But
Speaker 2: at the time I first set them up, you know,
Speaker 2: it took It's not just several hours, it's a few years.
Speaker 2: In terms of like I learned a little bit, then
Speaker 2: I learned a little bit later, and I kind of
Speaker 2: added some stuff to some scripts, and I finally published
Speaker 2: it as a repo because I've just been sitting. It's like,
Speaker 2: every time I need the script, I go copy it
Speaker 2: from the machine that has it, and that, of course
Speaker 2: is not a winning strategy. So that and then two
Speaker 2: more quick things. I think SSH now has an include directive.
Speaker 2: Apparently this happened a few years ago, but then you
Speaker 2: know there's lag time on app get and you know
Speaker 2: everything else. But now your operating system should have an
Speaker 2: include directive. So now you can have in your SSH
Speaker 2: canfig and include tilda, slash dot, SSH, slash configure, dot
Speaker 2: d slash star, which is something that I have wanted
Speaker 2: for a long time because, especially doing lots of client work,
Speaker 2: I want to be able to segment off. Okay, these
Speaker 2: directives are for this client systems. These directives are for
Speaker 2: this client systems, et cetera. And just trying to organize
Speaker 2: things all in a single file has been painful and
Speaker 2: I'm so glad that now include exists and is widely deployed. Again,
Speaker 2: it's kind of old news, but it's new in the
Speaker 2: sense that you probably haven't been using it, and if
Speaker 2: you did know about it as one of the first
Speaker 2: ones to know about it. Unless you were on open BSD,
Speaker 2: it was probably another two or three years before your
Speaker 2: operating system supported it, and you may not have found
Speaker 2: out in that time. And then last thing is deep
Speaker 2: Seek coder V two. This is a mixture of experts model,
Speaker 2: so similar to one that performs in benchmarks slightly better
Speaker 2: or slightly worse than GPT four. Oh so if you
Speaker 2: want to go grab olama and try that out. They
Speaker 2: have a nice one hundred and thirty one gigabyte model
Speaker 2: which I have not been able to try yet. I
Speaker 2: have to. I tried to run it on my Mac.
Speaker 2: It turns out I think the whole thing has to
Speaker 2: fit in memory. I only have sixty four gigs of RAM,
Speaker 2: so I'm going to try it on my server that
Speaker 2: has two hundred and fifty six gigs of RAM but
Speaker 2: no GPUs, so we'll see how that works out. But
Speaker 2: they also have one that I did try out that's
Speaker 2: just a normal like eight gigabyte model for mere mortals
Speaker 2: and no conclusion on how great it is or isn't.
Speaker 2: But I hadn't heard of it before. I just heard
Speaker 2: about it, so I thought I'd spread the wealth. And
Speaker 2: then of course, if you want to install Olama quick
Speaker 2: and easy on Windows, Mac and Linux, there's the webby
Speaker 2: link for installing a.
Speaker 4: Lama all right, And I have three pigs actually, so
Speaker 4: one is component dash Party dot dev, which is a
Speaker 4: really cool website that shows you basically each of the
Speaker 4: basic concept of every view UI library, nono men like
Speaker 4: view reacts, felt, lead embers, solid Alpine and things like that,
Speaker 4: and it just like, Okay, I know how to do
Speaker 4: it in Angular, I know this concept.
Speaker 3: How do you do it?
Speaker 4: And spelled again, and you just you have this super
Speaker 4: quick reference. You can just you know, select each framework
Speaker 4: that you're interested in, and it shows you like how
Speaker 4: you do styling, how you do slots and things like that.
Speaker 2: So have a reference for JavaScript as well, or is
Speaker 2: it only for frameworks?
Speaker 4: Well, in the end, it's it's all JavaScript. No, No,
Speaker 4: it's it's only for frameworks.
Speaker 2: I know that's too bad, considering we have template literals
Speaker 2: and domb events and no.
Speaker 4: No, yeah, but I think it exists. I think it's
Speaker 4: almostly about like the component the ideas around components specifically,
Speaker 4: so like life cycle and so maybe you like web
Speaker 4: components could be there in that sense, But.
Speaker 2: I want you still have a life cycle of JavaScript.
Speaker 2: Like all the things that the modern frameworks do have
Speaker 2: been built into the browser at this point, I don't
Speaker 2: know if there's anything left outstanding except for include HTML,
Speaker 2: which if you want to go join that debate on
Speaker 2: the Standards Committee, please do because they are convinced that
Speaker 2: this is not a problem.
Speaker 3: Oh oh, I okay, I might, I might just join
Speaker 3: the debate. I'll give you all right. Cool.
Speaker 4: The second one, the second pick is econez if you
Speaker 4: can spell. I don't know how to actually pronounce it,
Speaker 4: but it's I c O and ees dot js dot org.
Speaker 4: It's a project by again Anthony fuh that allows you
Speaker 4: to browse like dozens on dozens of just icon libraries
Speaker 4: and just with a single single click copy it as
Speaker 4: a s VG snippet or view components or whatever you wish,
Speaker 4: or even a pay G file. So it's a website
Speaker 4: by I have it installed as.
Speaker 5: A p w A app, so it's quickly, you know,
Speaker 5: on hand, I think it literally it probably says somewhere,
Speaker 5: but it's I think it might have just millions of icons.
Speaker 3: So really cool.
Speaker 4: When you you know producte something or you need an
Speaker 4: illustration for your presentation things like that. And speaking of presentations,
Speaker 4: the third pick will be vtcon dot org. It's a
Speaker 4: conference that Stagnates organizes with a vat car team every year.
Speaker 4: This year it comes to you at October third and fourth.
Speaker 4: It's an interesting formula because while all talks, all talks
Speaker 4: are pre recorded and then run one day and then
Speaker 4: immediately run again for the the other time zones, so
Speaker 4: everyone can tune in and watch it. And what's cool
Speaker 4: is that because all speakers already delivered the talks, they
Speaker 4: oftentimes visit the chat and actually talk with people who
Speaker 4: are watching the talks in real time. So it's pretty
Speaker 4: much more collaborative even than a offline conference. So it's
Speaker 4: free as well. So we already have I think almost
Speaker 4: thirty k people registered, so it.
Speaker 3: Would be huge. There'll be a lot of interesting.
Speaker 4: Announcements and knowledge sharing around JavaScript, like custom in general,
Speaker 4: because almost everything now is built on.
Speaker 3: Wheat from stack Blitz.
Speaker 4: We will have a huge announcement as well, so yeah,
Speaker 4: you can be first to hear it on October third.
Speaker 1: You've heard it here first huge announcement from stack at bitcom. True,
Speaker 1: all right, is that all your picks yep.
Speaker 2: I dropped the link for the component party and the comments.
Speaker 2: If you want to drop any of the others, please
Speaker 2: do so.
Speaker 3: All right, okay, thanks?
Speaker 1: Alrighty, So, before we go to a mac, if people
Speaker 1: want to follow shagplits, involue and everything we've talked about today,
Speaker 1: where are the best places to do that? Yeah?
Speaker 4: At s Taglitz on Twitter is quite active. I'm actually
Speaker 4: the person that mostly posts there. I like to besides
Speaker 4: just you know, spreading stagnag features and announcing Taglitz announcements,
Speaker 4: I do share a lot of tips around specific techniques
Speaker 4: like general CSS stuff, browser features and things like that.
Speaker 4: So at Taglitz on Twitter and at so co s
Speaker 4: l CEO that's my personal Twitter accounts, so you can
Speaker 4: connect with me there as well.
Speaker 1: Alrighty well, thank you for coming on to meech and
Speaker 1: talking about how to make better tutorials. It's something I
Speaker 1: could use myself with that. We will wrap all this up.
Speaker 1: If you want to get at least five dad jokes
Speaker 1: a week, you can follow me at Wonder nine to
Speaker 1: five on Twitter. A j Are you still cool? Aja
Speaker 1: eighty six? I was tracking your Twitter handles, you know that.
Speaker 2: And it's good. It's good because no one needs to
Speaker 2: follow me, but if you want to follow me for
Speaker 2: my non spicy takes, meaning stuff that's focused on things
Speaker 2: that are more professional, underscore beyond.
Speaker 1: Code, that would be beyond code.
Speaker 2: Yeah, but if you wanna, if you want to hear
Speaker 2: lots of things that you don't want to hear and
Speaker 2: be offended. Cool Aja six Yeah, poor, poor choice of name.
Speaker 2: It was. It was for when before I was jaded,
Speaker 2: back when I was laid back and chilled.
Speaker 1: All right, alrighty, So with that we will wrap up
Speaker 1: this episode of JavaScript Jabber. Thanks everybody ready for listening,
Speaker 1: slash watching, slash paying attention, and we'll talk to you
Speaker 1: next time.