Tracy Lee is the CEO of This Dot Labs, a JavaScript-focused agency, and Adam L Barrett is a Developer Consultant at This Dot Labs. They join the show to talk about the wonders of Svelte and SvelteKit. It is a tool for creating fast web applications. Additionally, they explain how these allow excellent user and developer experiences.

Hey there, and welcome to another episode of JavaScript Jabber. This week on our panel, we have AJ O'Neill.

 

Yo, yo, yo, coming at you live from happiness.

 

Ha ha ha

 

Dan Shappir

 

ha! Hey from Tel Aviv!

 

I'm Charles Max Wood from Top End Devs. We have two special guests this week. We have Tracy Lee. 

 

Hello, thank you for having me.

 

Yeah, welcome back. We also have Adam Barrett.

 

Hey everybody from Regina, Saskatchewan, way up in Canada.

 

Oh yeah, I

 

guess

 

I should say I'm from Atlanta, Georgia. Come

visit me.

 

Well, I've been to one of those two places and it's not Saskatchewan.

 

Thank you for watching!

 

Ha ha ha ha ha ha

 

Tracy, you've been on the show before, but do you want to introduce yourself? Just remind people who you are and then we'll let Adam let people know

 

Sure,

 

who he is too.

 

sure. My name's Tracy. You can follow me on Twitter at LadyLite. I love JavaScript and I love everything community. So if you ever want to chat, let me know. I'm the CEO of a company called the SUT Labs and we are a JavaScript consultancy. So love doing all things JavaScript. Also on the RxJS Core team, Google Developer Expert, GitHub Star, and you can just find me everywhere. So. happy to be here again. I feel like I haven't done JavaScript Dapper for like, I don't know, maybe a year or so? It's been a second.

 

It's

 

I think

 

been

 

it's

 

a while.

 

been longer, I think.

 

Maybe it's been longer, yeah. I need to bug you more, Chuck.

 

That's right,

 

Hey.

 

you're always welcome. All right, Adam.

 

Well, this is my first time here. I'm super excited to be here. I'm Adam L Barrett. You can find me at Adam L Barrett at, you know, or at Adam L Barrett on Twitter, or or big a b at tech tech hub dot social now because I'm totally into the Fediverse. And yeah, I am a developer consultant at this dot labs. And I am just really excited about JavaScript. And today we're going to be talking about Svelte and Svelte kids.

 

Right. And yeah, just to kind of get things going, we have talked about Svelte on the show before, but it's been a while. And I'm wondering, you said, and I like getting into like, what it is

but you said as we were preparing to get on, that now is like the perfect time to get in and then start adopting. And so I was kind of hoping that you could give people kind of the elevator pitch as to why that is. And then we can start talking about what Svelte is how that all works.

 

Absolutely. So, um, Svelte and Svelte kit are basically, you know, just for anybody who doesn't know Svelte is a component library where allows you to build web components or components in for the web, sorry. And it, you know, is very HTML focused. It's, you know, lots of JavaScript, it's got its own reactivity model. It's very cool. It's very popular. People really like Svelte. And Svelte kit is kind of their answer to like how to build apps. So if you're thinking about react, you know, you'd have react and there's like next or if you're into view, there's like nuxed. And so SvelteKit is kind of the parallel to that. SvelteKit gives you things like server-side rendering, routing, forms, and how to deploy to different places. And that sort of gives you that full ability to write full apps with Svelte. And as I was saying, right now is like the best time for a company or an individual to try and get into it, because in December, they released SvelteKit 1.0. And as felt kit has been in a real state of flux for the last few years in 2019 I work with the company we delivered a spell kid app and It has changed so much since then but now with their one point over lease they've kind of like stabilized the API This is what it's going to be like for a while and it's fantastic And so with that now if somebody wants to get into Svelte They want to get into like learning how to build apps The Svelte way or whatever now is sort of the time and I think personally it's probably better. It takes all the best things from React and view and angular, and it sort of combines them into this one super framework that I think is probably one of the best ways to build apps now.

 

Just

 

And.

 

to clarify, SvelteKit is what many people refer to as a meta framework, right? Like

 

Yeah.

 

the framework built on top of a framework. And in this case, it's built on top of SvelteKit, like you said, like Next.js is built on top of React. Interestingly, by the way, first time I'm hearing that term in the state of JS survey, they actually decided to call these rendering frameworks, probably because they're also often used abilities and I'm guessing Sveltekit does that as well.

 

It does indeed. Yes.

 

Actually,

 

And it

 

I

 

offered,

 

know that

 

you know,

 

it does.

 

right. Yeah. Yeah. Like a lot of them too. It offers sort of like different deployment methods. So there is, you know, SSR or service side rendering, but they also have a way to sort of export a completely static page as well as, you know, static backed by, you know, functions as a service kind of thing too as well.

 

What's known as SSG, right? Static site generation often

 

Thank you.

 

Yeah,

 

associated

 

I mean that's-

 

with the gem stack.

 

For sure. Yeah, absolutely.

 

I just think that's so interesting, right? It's like, I feel like when Svelte first came out, you know, the trend was like, everything's so small and it's so teeny and React is so small and it's just a little library and there's no framework.

 

Ha ha.

 

And then like all of a sudden

 

Ha!

 

now it's like, oh, meta frameworks are the hottest thing in the world. And, you know, I mean, it's true, right? Because I mean, everybody's like, now needs a meta framework to be able to function in life. Hello, did you not know Angular was there? Just kidding. But, You, like you, now it's like, you know, now that there's better tooling in the community, right? I mean, I remember trying Svelka back in the day and it's like, you know, you kind of go down this path and the documentation isn't good enough. And then you just get to a point where you're like, okay, I can't do anything with this. Versus like now with Svelka, you know, you just, you know, type in a few things in the command line and then you're done and you're set up and everything feels good. And like, you're off and running.

 

I love the faces that AJ made when you said like you've got to have a metaframework in order to build

 

Thank you. Bye.

 

a web app or a website.

 

AJ, you're just a few years behind. That's the trend now. You gotta do it. No? No.

 

You sound great in mute, AJ.

 

Yeah, your microphone is not working.

 

Thank you. Bye.

 

But.

 

Now I'm thinking that AJ is like saying,

 

I was muted.

 

yeah, you're

 

Hehehe

 

Okay.

 

thinking probably notepad++ and I just create my HTML and CSS and JavaScript files, upload them via FTP and I'm good to go.

 

Then just use felt. No felt could need it.

 

Ha!

 

Thank you for watching!

 

Yeah.

 

So.

 

Ha

 

I mean,

 

ha

 

that is

 

ha.

 

actually kind of like one of the things I love about Svelte and SvelteKit in general, but it reminds me very much of exactly kind of what you said. It's like, I kind of open up these files, I put some HTML in there, I throw in like a style tag and a script tag, it's these one file template components sort of things. And everything just sort of makes real sense. It's like local, you had some classes, those happen to be like, they'll be compiled in the background to have isolation. So your styles, if you style a P because it's the only P in this component, it's only gonna style that one, which is great. It's not gonna style all the children

 

Mm-hmm.

 

P or all the P in the entire app. And it just, it's like being able to go back to the old, you know, let's open up no, no pad and just code some HTML,

 

Thank you.

 

except you get all the benefits of like modern development as well, including like, oh yeah, componentizing things and pulling out little pieces of it, like partials and props and all those kind of stuff. So yeah, it's really good.

 

I totally agree that indeed one of the things that I especially like about Svelte, and I have to say upfront that while I've played with Svelte, I've not yet actually used it as part of a significant production-based application or deployment or whatever, so I can't really speak to how using Svelte at large feels like, but from what I've played with it and from what I've seen, I really like the fact that when you use Svelte, and I'm not talking about the UX, I'm talking about the DX, the developer experience, is very much like, feels like, you know, kind of how the web's supposed to be. Like you're building files that contain HTML and CSS and JavaScript, and it's not like some sort of a mishmash of the HTML into JavaScript, like JSX sort of is.

 

Mm-hmm.

 

And and it feels very webby in this regard and and yeah, that's definitely something that I really like about spells

 

Yeah. And

 

Allez!

 

I think it really helps like with adoption because like I was saying this company that I worked for in 2019, they actually found it easier to hire people for two reasons. One, Svelte was like, Hey, it's one of the new hotness people are interested in. So they had experienced devs who literally

 

Mm-hmm.

 

wanted to come work for them because they were using Svelte. But also, they they sort of made a habit of hiring like new people right out of university. And they were really easy to get up to speed because they already, you know, in their classes or whatever, they learned HTML, they learned JavaScript, and they learned CSS. And that's all they needed to start building effectively in Svelte. right? It was just HTML, JavaScript and CSS. And then like SvelteKit, like goes even further on sort of this thing. There's a lot of stuff in SvelteKit that is just the web, you know, they're just using like, for example, the way they deal with forms in SvelteKit is you basically use like, you know, multi part form data, you post that like a regular old form to the like, you know, SvelteKit loader or actions, sorry, actions, and then they like handle it and they give you a form data up on MDN, it's like a regular web form data object, and you start doing your stuff with that. And then they add this like, you know, oh, but this enhancement layer that just enhances that and then puts that all back into like JavaScript with JSON responses and stuff, and sort of does it all for you. So you code, like you're just coding an old web form at sort of an old web web form. But in

 

ლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლლ 

 

the end, you get this, you know, modern, awesome, easy to use, develop user experience. So

 

To give credit where credit is due, I think

 

Thank

 

that

 

you. Bye.

 

the meta framework that kind of innovated that approach of like going back to basics on stuff like forms and links and stuff like that was actually a remix in the context of React. But I am happy to see more and more meta frameworks kind of collect adopt, kind of copy, I don't care. Take this approach and use it. And one of the benefits, like you said, is the fact that you treat forms the same way that you would have, well, if you had been using PHP, that you literally post back the form response to the endpoint and it handles it only it's smart enough so that if there is no JavaScript, that then it does in fact work like a PHP with a whole like page transition. JavaScript, if it's working as an SBA, then it all happens within the context of that same loaded JavaScript. You don't need to have that page transition.

 

Yeah. And I don't think Svelte or SvelteKit, I don't think the people involved are even like trying to hide the fact that, yeah, they take the best ideas from everybody else because they think that's great. You know, remix had all this like, oh, yeah, just using regular responses, regular,

 

Mm-hmm.

 

you know, form data. And I think Svelte was like, yeah, that's a really good idea. We can do that. And then Svelte's kind of like, our Svelte kits are sort of particularly well both actually, able to do this because they have that compile step. So both Svelte and SvelteKit follow the idea that they decouple the author experience from deployed thing that you're making. So like in Svelte, authoring your component is not, it's one thing and then you compile it down to this other component that isn't the same. You know, it's different, it's built specifically purpose and same with SvelteKit. You have these adapters that kind of like take the app you've authored and they build it to a certain use case. You might be building it to a Node app or maybe you're building it to specifically deploy on Netlify or you're building it at maybe as an SBA, but the authorship stays the same and it kind of gives that advantage of if there's like really cool ideas like you know, quick is very popular. Let's get this amazing. I don't know what you call it, but where no JavaScript is loaded until you like do something that requires it and then it loads

 

Resumability

 

it and it loads it fast.

 

they call it.

 

Yeah,

 

Mm-hmm

 

it's part of the resumability thing for sure. And and if that works out really well, like I think quick is going to pioneer that. And if that works out really well, I don't think there's anything like theoretically Svelte could just do that in the compiler and not change the authorship experience of how Svelte is done. And just doing that in the compiled output. That's theoretically. I don't

 

Yeah

 

know if that's a plan or anything, but it's a possibility.

 

That's an interesting discussion. To be honest, I'm not sufficiently familiar with the internals of Svelte, certainly, to know whether or not that would necessitate any changes to the Svelte syntax or anything. But undoubtedly, the fact that it's compiled gives it a lot of power. And maybe it's worthwhile discussing that a little bit, because we've kind of touched on that.

 

Yeah.

 

react or unlike view or certainly unlike angular is a compiled is actually is more compiler than it is a framework maybe that's something you guys can elaborate on

 

Before we go there, I just want to ask my dumb question that's been rattling around in my head for a minute. What's the difference

 

Thank you for watching.

 

between a meta framework and a framework?

 

That's a really good question. Cause I, you know, I wonder if that's why they started calling it render frameworks, because it's like, what does meta framework really mean? At what point

 

Well,

 

is

 

I think

 

it?

 

it may be it was because everything like these meta framework ideas were kind of started in the react community, I feel like. So it's like, oh, well react is its own library framework, but we're building a meta framework to kind of provide all the stuff that react doesn't give us so we can be more productive, etc, etc. So then all of a sudden you see like, you know, redwood and blitz and next and remix. couldn't call

 

Gatsby,

 

it a framework. Yeah.

 

Astro now. But I wasn't used that you kind of refer to the angular people saying, hey, we had this from day one. Ha ha ha.

 

But with Angular it wasn't a metaphramer, right?

 

No,

 

Yeah.

 

yeah, it

 

No.

 

was just

 

Yeah.

 

that the angular itself was so opinionated. But

 

Yeah.

 

yeah,

 

Well

 

I definitely agree with Chuck that it's worth to have a discussion about where the differences are, and particularly with Svelte, where Svelte ends and Svelte begins or vice versa.

 

Yeah,

 

So I'm

 

I just want to, I guess, I guess the idea I'm getting them between like a framework and a meta framework is that like Angular, for example, it's a framework batteries included, right? It does

 

Mm-hmm.

 

all the things for you where, yeah, React was more or less the simple, you know, view building rendering library for lack of a better way of explaining it. And then you had all these other things that got jammed onto it. And so that's the meta framework, I guess, is the idea that you're bringing in all these other possibly third party things. to do what a framework would do for you on

 

But

 

its

 

then

 

own

 

it's

 

if they

 

Svelte,

 

built it all out.

 

but maybe that's why in state of JS they like, they didn't call it a meta framework because it's actually a, like just a re- like it's not built on top of React, right? So it's like the new new

 

What's not built

 

stuff.

 

on top of React?

 

Thank you. Bye.

 

Or isn't Seltz on built on top of

 

No,

 

React?

 

No.

 

Svelte's

 

No, no,

 

not,

 

it's not,

 

Yeah,

 

but

 

but...

 

so,

 

next is, next and

 

right.

 

Remix are.

 

Yeah, but the difference, I guess, is that if you're looking at, oh, they do have front end frameworks and rendering frameworks. I have it up because we were talking about it earlier. But it's, how do I put it? It's, they solve some of the same problems. And so I can kind of see people approaching, you know, and looking at React versus felt versus, you know, view, which is

 

here.

 

more frameworky versus Angular, which is totally frameworky

 

So I

 

or Ember.

 

can give my two cents on, and it's a short explanation. From my perspective, those meta frameworks or rendering frameworks really addressed two issues that were kind of lacking in libraries, in particular in a library such as React. And at least one of them is actually available out of the box in Angular. And these two things that are lacking are routing or routing, whatever you decide to call it. React out of the box does not have routing capabilities built in. So you did have stuff like React Router, which you could use on top of React, but it wasn't like included, unlike Angular, which had routing baked in, like it was

 

Yes.

 

one of its core things. So that's one thing that was lacking in a library such as React. service side rendering or static side generation. The fact that if you were just using React out of the box, you generally would build something that's client side rendered. And

 

Mm-hmm.

 

if you really want good startup performance and also, let's say, be more friendly towards SEO, then you do want your initial contact to be delivered in the HTML. That's something that Angular actually didn't have, and I think that Angular doesn't have to this day. But React technically supported it from day one, but practically it was incredibly hard to do by yourself. So next JS kind of, or before next, others like Gatsby I think, kind of provided a box solution that provided both of these capabilities on top of React. They made it easy to create, the routing and they also provided like a deployment mechanism that created either a server-side rendering or static-side generation or both. Now

 

right.

 

you know that's

 

Which

 

So

 

my

 

by the...

 

take on it maybe I don't know if you agree or

 

Yeah.

 

disagree.

 

I got you. So when you're talking about the meta framework or the rendering framework, you're talking about SvelteKit as opposed to SvelteKit.

 

That's correct.

 

Okay. And so SvelteKit is all of the other stuff on top of Svelte that lets you

 

Yeah, I

 

build

 

mean

 

Can

 

specifically...

 

your

 

you

 

app.

 

just say it's like create react app-ish almost? Like, but more batteries included? Yeah. Yeah. Yeah.

 

Yeah.

 

Yeah. .

 

closer

 

Yeah. Yeah. Yeah.

 

to

 

Yeah.

 

next

 

Yeah. Yeah.

 

for

 

Yeah.

 

sure.

 

Yeah. 

 

Yeah, closer to next

 

right.

 

for sure, where it basically, you know, the main things that offers are static, like Dan said, static site rendering or static server rendering, sorry, server rendering, routing, handling of forms, and deployments deployments to like, Oh, this is gonna, like I said, deploy to a node app, or this is going to deploy to Netlify

 

right.

 

or

 

Yeah,

 

whatever.

 

I think you're absolutely correct, Adam, that the point that I was kind of skipping over is deployment, because originally deployment used to be fairly straightforward, but then along came companies. Well, basically

 

Along came all the companies who want to make money off the payment.

 

because deployment used

 

Yeah.

 

to mean just spin up a run and note server on digital

 

Yeah.

 

ocean or something like that, and that's your deployment. And these days, you've got serverless. and you've got edge function and you've got CDNs and on and on and on

 

containers

 

and

 

and Kubernetes

 

containers and whatnot

 

and...

 

and it makes deployment more sophisticated.

 

Yeah.

 

So if

 

Hehehehehe

 

anybody can

 

Thank you.

 

automate

 

the process for you, well, that's what it is this way. That's how Vercel and Netlify want to make their money, I think.

 

for sure.

 

I think

 

Yeah.

 

it's funny

 

And I-

 

because you said confusing and sophisticated.

 

Well, the more confusing it is, the more sophisticated it is because nobody understands it. Which

 

Yeah.

 

by the way, you can do server-side rendering with Angular with Angular Universal. I'll just have to say that

 

Yeah.

 

too.

 

Right, but is that like, would you consider that like the same as React Router where it's, it's exists and it's really popular, but is it really part of the frame? I don't actually know the answer to that. But yeah, and I think a lot of the deployment stuff came from the fact that the front end has kind of like creeped a little closer to the back end. It used to be very much

 

Mm-hmm

 

like, oh, the front end makes the website, the SBA, and the back end deals with all the APIs. And then with popularity of all these node environments and runtimes, like node and Dino and whatever, and serverless functions, it's kind of like, oh, but we can overcome a lot of the difficulties that SBAs gave us. a layer with node and the client side. So we've got both sort of this front end that is back ends ish and then front end kind of combined together. And I think that has sort of led to this like, oh yeah, server side rendering is important. And maybe even streaming responses is important. And that's kind of where we get into this new, new modern web

 

Well.

 

development. And so we're going to go ahead and do some of the

 

I think the other thing that comes out of that is that it's not just that we get these features and we get these functionalities that come out of it, but in a lot of cases, your simpler apps, you don't need any of it, right? But we keep hearing about it, and so we think we do, right, instead of approaching it from the standpoint of,

 

Well...

 

oh, now I have this problem, and so now I'm going to look at the solution, right? Where, you know, whether it's, you know, search engine bots or speed or what? whatever that you're looking at. I think in

 

What?

 

a lot of cases, just going with the fundamentals will get you a long, long way.

 

Yeah, but I could argue Chuck that once you've moved from MPA or multi-page application to a single-page application, you've kind of left the simplicity and the fundamentals behind anyway.

 

fair

 

So if we really just wanted the simplicity and stuff like that, we would have stuck with PHP

 

Yeah.

 

or whatever, or I don't know, Ruby on Rails or whatever is your poison, or

 

Hello.

 

these days with

 

How is that simpler? Never

 

What,

 

mind.

 

multi-page applications? How is that simpler? Because it's just

 

No,

 

the web.

 

how is all the complexity of, I mean, PHP is a nightmare. Okay, let's put that one aside, Ruby on Rails.

 

How is having all of that complexity in a different place simpler? You have all of the complexity plus more because not only do you have to do all the JavaScript stuff, you have to do all the Ruby stuff, but it. It's not like you're doing a lot of stuff. You're doing

 

Well,

 

a lot of stuff. You're doing a lot

 

okay,

 

of stuff.

 

you know, it's an interesting discussion. And by the way, we had an interesting conversation about this with Kent when he was on the podcast,

 

Uh huh.

 

a couple of episodes back. So I don't think it's worthwhile to rehash that. I will say that generally speaking, MPA is a simpler model. First of all, certainly for front-end developers because

 

Hmm.

 

it shifts all the effort to the back-end developers. But beyond that, that the web was originally built to work. And again, going back to the conversation about Svelte, even though Svelte is essentially a front end framework, one of the things that I really like about it is that the developer experience that it provides is very similar to the original tenants of the web of like the three pillars of JavaScript, CSS, or put it differently, HTML, CSS, and JavaScript. It's probably the order we should put them in. And Svelte is very much this way, and the compiler gives us good UX around this DX, which brings me full circle to that question that I had, Chuck, before we started

 

Mm-hmm.

 

your conversation about meta frameworks

 

Sorry,

 

versus frameworks.

 

I'm so sorry.

 

Nuh-uh-uh-uh.

 

About what does it look like Does it mean that Svelte has a compiler versus other frameworks like React that don't?

 

And I think the main thing is exactly what you've said is you it allows SvelteKit and Svelte to deliver a really great developer experience, DX, but not compromise on the user experience. And that I think is the most important part because there's a lot of things that will like, oh, it's great DX, but if it's not giving you the best user experience, well, you know, you probably

 

Yeah, fair.

 

want to err on the side of the user. But with, with the compiler approach, you know, and of course there's limitations to this. And of course there's exceptions and caveats and whatnot. but generally you can you can have a great developer experience without compromising the user experience and that I think is the main benefit of the compiler uploads.

 

So basically, if I build a component using Svelte, let's put Svelte get aside for a second. And per my understanding,

 

Thank you. Thank you.

 

after I run it through the compiler, I basically just have some JavaScript, HTML, and CSS. And I don't actually need, at least as far as I know, I hardly need a Svelte runtime. Effectively, all the code that I've written to the optimal JavaScript HTML and CSS to implement my specified use case.

 

Yeah, I would say that's like the theoretical limit that maybe isn't quite reached. There is a runtime, it's very small, but it does exist. And there is, you know, it maybe isn't compiling to the most optimal code, like one, one thing, you know, just to compare frameworks for a second. Solid has very fine grained reactivity, it has this like, oh, you know, when I update this property, it's only going to update the text in this element kind of thing. SvelteKit kind of has a, you know, closer to react approach where each component is going to re render when something changes. So it's not as fine grained as a solid, but it is still very effective. So it's it's maybe not I just wanted to say it's not optimal. But it could be and that's the thing like and right now, there's theoretically nothing other than time and effort to stop somebody from going Oh, well, we want that exact kind of fine grained reactivity in spelt too. So we can do it and not even change the authorship experience, right? We can not even change how you write your component. Well, we could just have it. So like, Oh, yeah, when it does compile, it is more optimal that way. But I would say right now it's not necessarily optimal, but it's very, very good.

 

And you brought up the other point which, again, I assume that most of our listeners have React experience because React is the de facto king of the hill at this point in time.

 

Mm-hmm.

 

They're kind of familiar with this render function which returns HTML in the form of JSX. That's not the way that it doesn't use a VDOM. Can you explain a little bit about how you kind of create interactivity in a Svelte component?

 

Yeah, so one of the most interesting things about Svelte is its reactivity model. And the idea there is in a Svelte component. And, and that's kind of an important distinction. The reactivity of Svelte only works in a Svelte component. Other than that, it sort of relies on a these things called stores, which are Svelte stores, which are very much like, you know, observables or behavior subjects, if you're familiar with that, or very much like signals, actually, very similar, if you're familiar with solid stuff. But anyway, inside the Svelte component, though, if you have a variable and you change that variable, like by reassigning it, sorry, if you reassign that variable, the compiler knows like, hey, we've got something that has changed, we should re re render this component. And you don't really write anything to do with that, you don't have to like check anything, you just reassign your variable. So you could write a variable, give it a value zero, have a handler that's like, hey, when clicks increase, you know, count by one, or count equals count plus one, maybe even. And now that'll just work. And suddenly you'll click the button, the handler will run and now your component will re-render with one and two and three. And there's also a special syntax that Svelte gives you to do more complex things. You can do a block of code by using, it's actually sort of, you know, this is sort of maybe already well known, but they've kind of hijacked what's called labels in JavaScript. So technically Svelte is its own language because it's actually overwriting JavaScript. It's just very, very JavaScript like. But they've hijacked labels. So if you do a dollar sign and a colon, And then either a block or just a statement that will be reactive. So anything if it reads from another variable that changes or if anything in there changes, like if you're reading from a store or something, it'll be like, oh, something changed here now. So I'm going to re render this whole component again. So you get this reactivity that's like really easy and feels really a lot like JavaScript, just regular old JavaScript, uh, within these components. And you don't have to write sort of anything special.

 

So you've kind of brought up what's on one hand, I would be my biggest compliment to Svelte, and on the other hand, it's also my greatest criticism of it. That on the compliment side, it sometimes feels to me like Svelte feels like how the component model of the web should have been. That in an ideal world, could have taken Rich Harris, sent him back in time to 1995, put him next to Brendan Eich, and have them create Svelte as the dorm and the web rather than what Brendan Eich did in those 10 days of glory. So that's like my, and hopefully somebody like Alex who's really into web components won't kill me for saying this. But I really do think that Svelte feels like how componentization on the web should have been. And you touched on the fact, for example, that CSS is scoped without all the shadow DOM monkey business and all the reactivity stuff is great. And the putting the components together and like the block of HTML and JavaScript and CSS, like going together in the Svelte files is awesome. criticism is that the fact that this isn't the case. I mean, you know, we can't send rich Harris back in time. And consequently, we have something that looks very much like the web, but isn't. And to an extent almost deceptively so. So like you said, it feels very much like JavaScript. It looks very much like JavaScript, but it isn't really JavaScript. Like you said, variables in Svelte are reactive. So you use the let keyword, which means one thing in JavaScript, but means something totally different in Svelte because in Svelte, when you define a variable with let, you're actually creating something reactive, which is definitely not the case in JavaScript. Likewise, as we said, CSS in Svelte looks very much like regular CSS, but is wholly which is definitely isn't, unintentionally so, it isn't scoped within the browser. So my criticism of Svelte is that, the fact that it's almost deceptive in the way that it kind of subverts some of the key technologies of the web, as it were. Maybe you're seeing it differently than I do, I don't know. I

 

Et là...

 
Adam_Barrett:

No, I mean, I agree. I do find though that it's almost like a theoretical problem, because I find in practice, even with new people and stuff, it becomes really apparent, because it's always in a dot svelte file. This isn't just like, oh, you write your JavaScript in a JavaScript file and it like does the reactivity there, because all these special behaviors, this the scoping of CSS, the reactivity of the JavaScript variable stuff only happens in a dot svelte file. And as much as it doesn't seem like, Oh, is that a big deal? I really do feel like that really helps solidify the fact that this is a spelt thing only, not a, you know, like you're not think you're writing JavaScript, and then you write something somewhere else and it doesn't work, especially when you have to drop like, into regular Java. So you import regular, you know, TypeScript or JavaScript files. And let's say you're writing a store, well, in in spelt, fault components, you have like some special short syntax for like getting the values out of stores and subscribing to them. But outside of that, if you're in a the whole thing yourself, you have to write dot subscribe and pass the callback, you have to write dot set and pass it something. And I think that alone helps people overcome this. Like, oh, yeah, it's deceptively close, but it's not quite right, is it? It's like, yeah, but it's in a self component file. So it's okay. Like I get that difference. I understand it.

 

By the way, as a

 

Well,

 

technicality,

 

and that's...

 

oh sorry, go for it, DJ.

 

And that's what people are used to at this point anyway that are on the front end because people that are on the front end probably have never programmed in JavaScript before, right? Because they're using React or they're using one of these things. So I appreciate that you acknowledge that it is a separate language when you fundamentally change the language features because

 

Yeah,

 

so

 

but...

 

many times people say, oh, no, no, it's just JavaScript, but it's not.

 

Yeah,

 

No,

 

And

 

and

 

so

 

Well...

 

I.

 

I think they're pretty

 

but

 

explicit

 

Svelte

 

about

 

kind

 

it too,

 

of takes

 

like the

 

it, sorry, I all I want to say Svelte kind of takes it to an extreme because you're right, for example, that in the JSX, for example, is not valid JavaScript, even though some people wish that it were. But still, when you're using React, putting aside the JSX, you're definitely coding in JavaScript. JSX is the only thing that gets compiled away. All the rest of the thing is just a library of stop all over JavaScript. You're not changing the meaning of let or const or if. They work the same

 

at

 

way that they did before.

 

you

 

Well,

 

are changing

 

it

 

semantics without changing syntax. So

 

No,

 

there

 

still JavaScript.

 

when you when you yes, but it uses hacks that are things that you would never use if you were writing JavaScript in a if you were trying to write maintainable JavaScript, you wouldn't choose to use hacks that they use they use hacks to their advantage they use bugs in the language to their advantage that if you were to look at it in a normal program, you would say, why would someone ever do this? Because it's React and because there's a transpiler, you can kind of just say, oh, it's hand wavy stuff. But if you wouldn't write a program that way, if you were writing it in JavaScript. And that's what I'm trying to do. I'm trying to get the best of my time. I'm trying to get the best of my time. I'm trying to get the best of my time.

 

It's kind of a philosophical conversation. Anyway, going back to the practical, Adam, I do have a question. When you're writing in the Svelte

 

Sure.

 

files, are

 

Yeah.

 

you writing JavaScript or TypeScript or both? I'm not sure. I'm

 

Thank

 

just going

 

you. Thank

 

to go

 

you.

 

back to the question. I'm going to go back to the question. I'm going to go back to the question. I'm going to go back to the question. I'm going to go back to the question. I'm going to

 

Mm-hmm.

 

go back to the question. I'm going to go back to the question. I'm going to go back to the question. I'm going to go back to the question.

 

You can write both. I would say the, you know, if you run in SvelteKit, it asks you do you want to have TypeScript in this or not as you're generating stuff. And all it takes is, so normally you write your JavaScript in a Svelte component in a script tag, just like, you know, HTML script tag. And all you have to do is add lang equals TS, like language equals TS. And now it'll also compile the TypeScript for you. And actually all the TypeScript to like JavaScript compilation is actually not even done with Svelte technically. It's actually done

 

Ooh, slick.

 

Nice.

 

Dan_Shappir:

Well,

 

a, a,

 

Veet

 

a,

 

is

 

a,

 

amazing.

 

Work.

 

a, a, a, a, a, a, a, a, a, a, a, a,

 

Yeah.

 

a, a, a, a, a, a, a, a,

 

I

 

a

 

think that, correct me if I'm wrong, but I've seen somewhere that actually all of SvelteKit is kind of like built over Veet. And I think

 

Yeah.

 

that SolidStart is built over Veet. And like lots of these meta frameworks are basically built on using or on top of Veet. And which is kind of awesome, I guess.

 

Yeah, because

 

Yeah.

 

That

 

that's

 

was just

 

exactly

 

such

 

what

 

a

 

it

 

fast

 

is, felt-kit.

 

transition. It was just like, okay, now everything is vite for all maintainers writing anything. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes. Yes.

 

That's

 

Yes.

 

right.

 

Yes. 

 

Oh, but there's

 

Yes. Yes.

 

some

 

Yes.

 

competition

 

Yes. Yes.

 

coming from

 

Yeah.

 

the, from the Versailles people, right? The

 

Yeah, I mean

 

whatever

 

did we

 

that

 

Yeah.

 

feel

 

is

 

that way with

 

turbo.

 

Webpack? I feel like Webpack was also pretty quick to uptick,

 

Yeah, it took

 

but

 

over

 

it was

 

everything

 

like... Yeah,

 

pretty fast too.

 

really fast.

 

but V seems faster almost,

 

I think

 

Like

 

feet

 

Well.

 

but...

 

is

 

the

 

using

 

domination

 

WebAssembly

 

of the market is

 

or

 

faster,

 

something

 

you mean?

 

for some stuff. So

 

I

 

I.

 

think maybe it's because also like, I feel like what I mean correct me if I'm wrong, but like, I feel like Webpack was like harder to integrate than Veeve. Like Veeve just seems like they've got the kind of like developer experience down a little bit better. So.

 

Well,

 

Yeah.

 
Adam_Barrett:

and I think what may have helped that was when webpack came out, it was still kind of wild Westie. And I think over

 

Yeah.

 

the time that webpack was most popular, people sort of solidified on certain patterns and stuff. And then VIT

 

Mm-hmm.

 

was kind of able to take advantage of that by saying, like, hey, we offer the most popular patterns like JSX and TypeScript or whatever out of the box. And then we can also give you a plug in thing to add more to. So.

 

Well, and that's how a lot of the, I mean, we've seen this in the frameworks too, right? You know, it kind of started with backbone and underscore and you know, and then it kind of, you know, we picked up low dash because low dash did underscore, but you know, it had certain advantages and, you know, we've kind of picked things up from there. And it's like, you know, backbone kind of keeps track of this stuff and makes this stuff easier, but it'd be nice if we had this engine that did this other thing. And so we end up with, you know, some of the precursors to react and then we got those frameworks right. And now we're kind of advancing to this next level where yeah, we have some of these smaller frameworks and then we've got the micro framework or meta framework, sorry, that sit on top of them. And so it's just kind of been this interesting evolution that we've seen play out over and over again. One thing that I kind of want to derail us onto here is I'm sure some people are listening to this and you've kind of mentioned that it's easy to pick up, it's easy to get started, this tooling and get rolling. But I can imagine we have some folks that are sitting there thinking, I work at a Vue.js shop or an Angular shop or a React shop. And this sounds really interesting, but is this something that I can actually use at work? Or is this going to be more on the hobby projects until I find a company or a project that I can put this in?

 

I think on the

 

Well.

 

consulting side, we definitely haven't seen the, you know, it's interesting when view came out, right? Because, you know, I don't know if you all remember, but I think it was like, actually, it was the state of JS survey, where it was like, whoa, we saw all these people talking about how much they were using view, and everybody really thought view was gonna be like the next big thing, whatever. But then when you really see the uptick from, you know, like just, kind of like talking to clients and things like that. You saw if you kind of being worked on in more green field projects, there wasn't too many migrations. I'm not saying there weren't any, but like there weren't as many migration kind of conversations at least that I was having. But I think it was felt as well, right? Like you see it kind of, you know, with this like, hey, we want to experiment on something new. We have this internal project or like, hey, we have this green field projects. But I don't know. a lot of people trying to migrate.

 

My experience is that migrations between frameworks are usually rather far apart because,

 

Mm-hmm.

 

Mm-hmm.

 

you know, unless you're kind of forced off of a framework, like people are starting to be forced off of Angular, for example, because I think it's getting difficult to recruit people for Angular

 

Mm-hmm.

 

projects,

 

Yeah

 

it will be a while until people are like forced off of React. expecting to see other frameworks starting to surface more like Tracy said in green field type projects. I do

 

Yeah.

 

agree with what both Tracy and Adam said that this is kind of a turning point time for Svelte because having a meta framework version one that can be considered stable and also under the

 

Hmm.

 

auspices of Versailles how would I call it, like the trust or the

 

comfort level.

 

exactly that I'm willing to put in a framework like that. Like, you know, like, the thing about React is it's kind of like that old saying, you know, nobody gets fired for using IBM. So like, you know, like, nobody gets fired for choosing React and Next. But I do think that, you know, that, you know, is an example of a library that's now can be considered mature enough stable enough so that you know its benefits can start shining through.

 

Yeah, there's just so many exciting things. And I think it's amazing. I mean, I don't know if y'all remember when Evan was like, you know, when everybody was really, I mean, everybody's still excited about Viva, but when everyone was really excited about Viva, and they were kind of comparing and kind of having the same conversation we're having here. But, you know, he was able to take, right, like the great things from React and the great things from Angular and kind of make Viva into something that he believed was, you know, beneficial. I think same thing with like all these new technologies coming out and it's interesting because you know these these kind of like new paradigms or new ways of doing things or just better ergonomics etc. you know what's the next way right that that'll be so so interesting to see like is there gonna be another contender that comes out soon

 

Mm-hmm. Yeah,

 

And I,

 

I'm actually really

 

sorry.

 

excited about some of these options too because it seems like kind of the ReactView Angular, you know, they were the way to do things for quite a while, right?

 

Yeah.

 

I mean, we kind of saw this rapid succession of frameworks and then it kind of just held there for a while, right? And they were kind of the biggies that were out there. And now we're seeing a lot of the excitement about some of these other frameworks like, you know, Astro and Quick and Svelte and some of these other ones. And then some of the capabilities that are coming out of them are really cool. And so

 

Yeah.

 

it's exciting to see things move again. So yeah, I don't know if it settles here, but.

 

So.

 

Yeah,

 

I don't

 

and

 

think

 

I think

 

it'll settle.

 

you're right, Tracy, that a lot of the SvelteKit stuff would be just greenfield mostly right now. And a lot of, you know, not a lot of transitions. But I do think that Svelte has a really nice, like when you, if you just wanted to make one component on your page, let's say you had a React app or an Angular app or something, it does have a really nice way to export it so that it's just like a JavaScript function, like a class, and you just like enhance it, or you just call it and pass an element to like enhance that element with your little SvelteKit thing. And I think that could get somebody in like a little bit. we're just like, oh, we just want to try out Svelte on this project. Then you could maybe just make one component, you know, this Svelte kit component or one section of your page and maybe just a few more and then trying to add and then eventually go, hey, we should switch to Svelte kit or something. That's my thought. But

 

Ha

 

you're

 

ha ha!

 

right. I think mostly that's not happening. But I think it's a little easier than other ones.

 

I have seen a lot of interesting, like you said initially, like a lot of interesting concept and innovations in SvelteKit in the sense of, like you said, of taking kind of a best-of-breed approach, borrowing from other frameworks. I really like the way that Rich made it easy to specify end points for HTTP operations. like for the gets and the post and the whole concept of type safety when transferring data between the front end and the back end, which I think is really awesome. I know that there are other projects that are kind of working on it like TRPC and stuff like that, but to have it kind of baked in to the framework is really great. So,

 

Yeah. And even just that concept of the separation in the framework of like, this is server code, and this is client code, and this is code that'll run on both. It makes it really nice because you can do things that maybe you you would struggle to do and maybe other frameworks where you were like, oh, I'm just going to run my SQL queries right here, because I know it's safe. And I know it's, you know, I'm not going to leak environment variables to the client or anything like that.

 

Does Svelte have anything like the upcoming React server components? Do you know?

 

Well, I mean, it's there, they're kind of like that, but not really in this sense in the sense that your your svelte, your svelte kit components, your cell components will run on the server. And then they'll, you know, flush that to the client and then start updating after that on the client. But you can just fetch because you have these loader functions, you can just fetch like wherever you want, you can you can get data from an API, you can get data directly from a database, you can do that kind of thing like directly in your loader function. you can set it so that this load is only ever gonna run on the server just by adding dot server to the file name. It's like a routing thing. Or it can be if you're just using like fetch, felt actually gives you this little fetch as a parameter to the load function. And you can just use that and then it'll run the same both places. So it'll like, hey, it'll make the fetch when it needs to on the server, but it'll also as maybe state changes and you update it needs to fetch again, it'll fetch again or you'd like change routes and come back. It'll fetch again using the client side fetch on that time. So it's similar, that kind of server based stuff. But the nice part, which everyone likes about server components is you can just like, hey, I'm just going to go get stuff right from my database right here. And you can do that as well in in spell kit.

 

Yeah, we're

 

What do you think of Rich's approach of prefixing the SvelteKit files with the plus sign?

 

Personally, I think it is fine. But it's one of those things that some people are gonna hate.

 

Thank you. Bye.

 

And I have my editor set up to like always give me like the directory and the file name because I don't want everything to just say plus page, plus page, plus page, plus page. But honestly, I don't like file-based routing at all. But if I had to choose one file-based routing, I would choose SvelteKits because it sort of separates those like ideas of, okay, this is server, this is

 

How

 

both,

 

do you

 

this

 

like

 

is

 

your

 

client.

 

routing

 

I

 

then?

 

personally, I would like it JSON file, honestly, and I'm not being facetious. I think like configuring a big JSON file and it would be the exact same thing, right? Like you wouldn't have to change anything. But instead of a file called plus page, you would just have like an object and it would be this path and your path could be the key. And then this is your load function that you're going to give it. And this is your, you know, component that you're going to render on that page. It'd be the same thing except you could have it all in one place. Personally,

 

Wouldn't

 

that's

 

it create...

 

mine. I know other people would hate that. But

 

Yeah, wouldn't that possibly create maintenance burden? Like making sure that whatever you have in the JSON actually

 

Pfft.

 

matches reality?

 

But like, is it different than a file based one? Like other than the fact that it's like hidden from view in your in your editor, it's exactly the same, right? Like if you just use like cold code folding and hiding to hide

 

Hmm.

 

the stuff you don't want to see right now, it's exactly the same. You just have it all in one file rather than like in your

 

Well...

 

using the file system

 

Rails does

 

as a pretend

 

that and

 

hierarchy.

 

I like it.

 

Oh yeah?

 

Yeah.

 

It's convenient because it's all in one place. Yeah, and I use the search function in my IDE because yeah, some of the route files, they get real long, right? And so yeah, you give it some good conventions and

 

Well...

 

allow you to make certain assumptions in the way you put it together. And then yeah, if you're looking for something, you have it there

 

Everything's

 

and

 

just

 

yeah,

 

a trend, right? It was like,

 

yeah.

 

remember when everyone was like, it's like, okay, everything should be separated out into their own files, CSS, and then everyone's like, oh, we're gonna do inline CSS, it's gonna be so great. And then everyone's like, oh man, there's so many issues with that, let's do something different now. So it's just, it's like,

 

Right?

 

what

 

Yeah.

 

month is it? It's just like,

 

Yeah.

 

what month is it? It's just like, it's just like,

 

Yeah,

 

it's

 

well,

 

just

 

Yep.

 

like,

 

you know, yeah, there's always something inconvenient about whatever solution you come up with. And so it's

 

Yes.

 

like, we're going to solve this one. And then you create another

 

You saw it.

 

one. We're,

 

Yeah. Yeah, exactly. Exactly.

 

Great Officer Reel.

 

Which by the way,

 

yeah.

 

we created this like, I mean, for me, I always, I don't know. I don't know about how you all feel about this. But like, whenever I'm trying to play with a new technology, I'm always like, So documentation giving me much. Oh, these like silly little code snippets, like whatever. So we created this thing called starter.dev, which is fully open source. But like, it gives you these like showcases and So we actually built like a GitHub clone in Svelte so people can just like look at it and see what like an actual application might look like.

 

Mm-hmm.

 

But anytime I'm stuck on stuff, I'm just like, let me just poke into there. So if that's helpful, you can check it out.

 

Yeah, give us a link, we'll make sure it's in the show notes.

 

Yeah.

 

I kind of want to move us along just because we're kind of getting toward the end of our time here. Let's say that I'm like totally sold on this, right? And then I really do want to go play with it, right?

 

Ha

 

But

 

ha

 

are

 

ha!

 

there good resources for learning Svelte and Svelte kit? 

 

Yeah, I mean, spelt.dev, the official documentation is great. If you want to really get into like, you know, what are the good podcasts? And what's where's the community? Where's the whatever? You can check out framework.dev, which is admittedly something we maintain. But it also it has a bunch of different frameworks on there. And it'll give you sort of like, Oh, here's a lot of the popular libraries, here's a lot of popular podcasts and whatever and sort of give you that like, Oh, hey, I want to see what's going on in the whole ecosystem, not just, you know, reading from directly from the docs. That being said, Svelte.dev and Kit.Svelte.dev are both really good and really worth

 

Yeah.

 

checking out as well.

 

And like onframer.dev, again, there's a lot of technologies in there, but we do have like, um, I think it's just svelte.framer.dev. But if you're like looking for, you know, anything within the ecosystem, like what's the state management library that's popular, what's the this that's popular, what the different podcasts that, you know, people talk about these things, what are the different blogs, what are the different courses or whatever. That's kind of what we were hoping to again 100% open source so if you're in this cell community and you're like, man I really need a resource for this, you know you can just go ahead and add it. But on Tremor.W you can actually also compare different libraries. So I don't know about you all but especially in new technologies. Okay I feel like this in React maybe in Reactland like I always feel like oh my god which is the which is the what is the state management library of the of the week. No okay I'm being a little facetious there, right? But like,

 

Yes, yes you are a little

 

yeah.

 

bit.

 

Ha ha

 

But

 

ha.

 

you know there's a lot of truth in that. You know,

 

Yeah, yeah.

 

that's the fact of life, you know?

 

What's being actively maintained? Is there new stuff coming out? Whatever.

 

the rise and fall of GraphQL.

 

Yeah.

 

Ha

 

Is

 

ha

 

there

 

ha ha!

 

a fall? I'm totally out of date. Has there been a fall of

 

Well,

 

GraphQL?

 

It's

 

I

 

beginning

 

wouldn't say

 

to

 

Thank

 

that...

 

fall,

 

heavens.

 

I wouldn't say it has fallen.

 

Yeah,

 

I'm sorry.

 

it used to be

 

I'm sorry.

 

the

 

new hotness and it isn't anymore. Let's put it this way. At least from what I'm

 

People

 

saying.

 

are realizing the error of their ways. They are going back to easy to use simple things.

 

I think that GraphQL was, it's kind of like a detour of our conversation. I think it was great for certain things. Like if you're grabbing data off of a lot of sources and you need to normalize your data across all of them and making and retrieving all of the data is expensive. So you also want to like filter it on the server side before providing all the data. Then GraphQL was awesome, but then people started trying to use it of like for everything, especially with tight bindings and stuff like that. And

 

and to solve all your performance problems.

 

yes, if

 

Just

 

you don't mind,

 

kidding.

 

if you don't mind bundling Apollo into everything, whatever it's called. But so yeah, so you know, you try to use something for everything and then you get pushed back. Let's put it this way.

 

Yeah.

 

and the the the the the the the the the the the the the

 

Anyway.

 

So, yeah, I love this because I went and looked at it and I'm like, this is cool. It's also very close to something that I've been working on building myself for some of the other communities we have, but you also, I think, have a course or something coming up. Do you wanna talk about that for a minute? I'm gonna go ahead and do that. I'm gonna go ahead and do that. I'm gonna go ahead and do that. I'm gonna go ahead and do that. I'm gonna go ahead and do that.

 

Yeah, so we are going to offer a Svelte and Svelte kit courses workshops, I guess is the better way to say that that people can take. We'll also offer them, you know, video, but we also offer them to companies if they want to like, have a real person come and teach the thing or even like come in live teach it. And yeah, you can check it out. I'm not exactly they're not up yet. But by the time this podcast airs, maybe they will be. But you can check out this dot dot co or th is dot dot dot dot dot dot this

 

Ha ha ha

 

dot co. And on there, we'll probably have a workshop link and that'll show you where to go so you can learn how to build felt kid apps and how to use

 

Yeah,

 

felt effectively.

 

Thank you.

 

I'm super

 

Thank you.

 

excited

 

because I feel like, you know, everybody does, you know, Angular, React, Vue courses, GraphQL courses, and like we do them to workshops, sorry, we do them too. But recently we've been starting to invest a lot in kind of like more like, you know, shiny technologies. I don't want to call them new technology, but shiny technology. So Svelte is one of those where I feel like people are excited about. So. and quick and solid and some of these other ones. We'll see how it goes.

 

By the way, a question kind of related to that, you know, one of the benefits of working in React is that because of the community and because of the usage, I know that there are a lot of components and that I can, or libraries that I can, you know, like, pull in and use if I need, I don't know, some sort of grid or whatever. I, there's a grid that works with React. How about Svelte? What's the situation like in the community? and run components with spelt.

 

Yeah, so there is, there's a couple of comedic community communities, but Svelte Society is basically the one winning I'd say. And there is a lot of stuff available, obviously not to the level of react react has been around a long time. There's a billion components. But there's definitely a lot of components sharing a lot of UI libraries, a lot of like, you said, like a grid component or a calendar component, a lot of like specific things went off. There's a lot happening. But it's also still, I would say, nowhere near as much as say react, but definitely available, definitely worth. And you can

 

Yeah.

 

go to likes felt society there's a search you can search for all the components and tools you can use

 

And it's just really

 

and

 

exciting to just see, it's like you have the opportunity to do so much. I feel like X-State, for example, has a Svelte one. But also, if you go to Svelte at framework.dev, you can actually search a bunch of different libraries. There's a Material UI for Svelte already. There's Svelte Strap, Bootstrap for Svelte. There's already a Svelte Internationalization Library. There's a few Svelte Forms libraries as well. I think, I don't know, three

 

But you know,

 

forms

 

the interesting

 

libraries.

 

part too is you probably don't need a lot of them though. This is kind of the thing that I found with Svelte development is you don't need as many like pull in things because it's a lot of it's really easy to just kind of do yourself to. But that being said, there's still a lot of field.

 

And again, basically, Svelte leverages the underlying power of the web itself. So, you know, a lot of the things are just available because they're baked into the modern web.

 

Yeah,

 

I

 

well,

 

guess.

 

and if you had like a really cool widget or something that you wanted to use, and it was like, I don't know, well, Svelte has this action thing that you can add to an element. And it's basically an action and it gives you the DOM element and some lifecycle things that you can do. And so basically, it's this way to be like, I can add anything I want and turn it into a Svelte component easy. That's a good way. And I see a lot of things like calendar widgets and whatever, and a lot of things like that. That's a way to like easily hook into the Svelte without having to rewrite everything in spell 2.

 

And

 

So

 

I also

 

that's

 

seem

 

always a good

 

to

 

possibility.

 

recall that unlike some of the other frameworks, or unlike most of the other frameworks, Svelte has animations built in as a first class citizen or something along these lines.

 

That's true. Yes. Absolutely. No, yeah, it's felt. And it's, it's great because of the compile way they compile. If you don't use animation, well, it doesn't get included in your bundle. And when you do, it'll include only what you're actually using. So it still stays small, but they're allowed to, or they're able to, sorry, include animations right within this framework, because, you know, they don't have to worry about the bundle size getting too big. If that makes sense.

 

Cool, yeah, it does.

 

Yep. All right, well, we're kind of getting toward the end of our time. So I am going to push this more toward the final segments of the show. Now one that we did add, and I may have jumped the gun a little bit on this, is the self promotion segment. And this is something we added recently. I'm probably gonna stop disclaimering it after this and saying there's something we added recently because we added it like a month or so ago. One of our hosts on Adventures in Angular, he's like, I have something I just wanna tell people week and I'm like, hey, that's a great idea. Let's let everybody do that. So Dan, what are you working on that you want people to know about this week?

 

Well, I'm working on my conference schedule for this year, you know, start making sure that I get to travel in 23, at least as well as I did in 22.

 

Uh-huh.

 

And so I'm happy to say that I've already got two conferences scheduled. One is IJS in London in April. And the other one is JS Nation in June. And both of them, by the way, have amazing lineups. But regardless, if anybody wants to see me and meet me and speak with me and you know, just attend one of these conferences and you'll see me there. And also if anybody has other interesting conferences that I should know about and maybe apply to or apply for, let me know. You know, tweet at me or DM me. looking for interesting conferences to attend in interesting places and meet interesting people. I love the conferences environments. I'm really, really happy that live conferences are back to being a thing and that we're not just doing everything online. I really love the personal engagement. Web directions, Summit in Sydney, for example, was awesome. I really, really enjoyed that one. So, yeah, so that's one thing. The other is I'm basically also at work trying to build my kind of roadmap for this year, trying to figure out where our most significant performance bottlenecks are both on the front end and on the back end. And you know, that basically means interfacing with a lot of the different teams within the organizations. what problems they're facing, where I can work with them on that, it's interesting. It gives me a really high level view and also a low level view of all the technical stuff that's taking place in the company, which is really nice and I really enjoy that. So those are the things that I'm doing.

 

Awesome. A.J., what are you working on that people should know about? side you mute button.

 

Yes, the mute button. One of the things that I just worked on was a utility for DuckDNS. So DuckDNS is a dynamic DNS service that's free. And I created this tool partially because I wanted it, although I'd already built it, so it wasn't really for that. But I wanted to use it as a project for Beyond Code Boot Camp. And I'm actually now working on a POSIX scripting course. So I'm actively working on that. And this is kind of the project that will be the suggested final project for that mini course. If you have learned your POSIX scripting well, then you would be able to build this tool and it's got sub commands. And I didn't actually add any flags to it, I could add a flag just for the sake of adding a flag. Anyway, but it's, I would say it's the best tool out there for DuckDNS because it will also, if you run DuckDNS and SH enable, it will either install it as a boot service or as a login service depending on whether you're on Linux or Mac OS and I may also do it in PowerShell as well. I have a book to learn PowerShell because I think that it is important tools out there for Windows people. And I think that this is a good scope of project to learn some PowerShell in. So that's that's that's what I'd say I'm working on. And that is at the Beyond Code Bootcamp GitHub. That's called duckdns.sh. And there's also a three part live stream where you can watch me build it in its entirety other than two typo fixes that I did off stream.

 

Cool. I'm just gonna jump in here, I guess, with the stuff that I'm working on. We are getting ready to do the next book in the book club. So we're finishing up Clean Architecture. Uncle Bob has been on like half of the calls. And it's been like me and like two or three other people on this one just cause we just launched. And so it's been fun. We've just been talking through architecture and architecture ideas. It's been amazing. The next book that we're doing is going to be on something around deployment, Docker, Kubernetes, kind of stuff. It's kind of what the folks in the book club wanted to do next. So that's that's what we're gonna head. I have a couple of books that I'm looking at. So we'll see what we pick up there. But you can go sign up at topendevs.com slash book club. And then

 

Tolstoy's

 

yeah, I'm getting ready to

 

War

 

launch

 

and

 

a couple

 

Peace?

 

of Well, it's a Dev book club, so maybe next month or maybe the month after. Anyway, but yeah, so that's, that's kind of the big thing that I'm looking at at this point. Tracy, what are you working on that people should know about?

 

Well, my God, I feel like so many exciting things. We are launching a podcast called Build It Better. It's a podcast on architecture. So that'll be fun, really fun, like deep dives. It's myself, Ben Lush, Adam, who is on the call right now, and another person, Jesse. And yeah, if you just wanna like learn about architecture and kind of talk about it deep dive into like different open source projects. That's been really fun. And besides that, just really focused on like, doing more in open source, like adding more starter kits. This is like really good for greenfield projects, right? But starter.dev and adding new technologies and different kind of like kits that people can use. And then framework.dev, trying to just like get more visibility and like more, I mean, you know how I am. I'm like always about like connecting people trying to figure out how to help people so those have been my things.

 

Awesome. How about you, Adam?

 

Well, as we already mentioned, I've been working on a workshops to help people learn Svelte and Svelte kit and get up to speak quickly. And so you can probably check those out at this dot dot co. And I too, I'll be speaking at a conference in February. I'm not sure when this this will air called Khan foo in Montreal, Quebec, Canada. It's probably the biggest conference I know of at least in Canada. It's super awesome. And I'll be talking about Dately so if you want to come check those out come meet me there at confoo

 

Cool,

 

cool.

 

unfortunately I'm missing that one. It's a bit cold

 

We'll

 

though,

 

meet

 

isn't

 

up somewhere,

 

it?

 

Dan. Ah, it's cold. Actually, February is pretty cold, even in Montreal.

 

Ha ha ha ha ha ha ha ha ha

 

I can't deny. But it's downtown Montreal. And cool thing about downtown Montreal is you can go shopping. You can go to a movie. You can go to restaurants without ever leaving the building, which is awesome, because there's this whole

 

Ha ha

 

underground

 

It's like

 

city

 

all

 

there.

 

underground,

 

Yeah.

 

yeah.

 

And

 

Thank you. Bye.

 

it's amazing downtown Montreal.

 

That's

 

And I

 

how

 

think

 

Montreal

 

it.

 

is the most boring part of Montreal, though.

 

I think in Montreal it's foie, not cold.

 

Four.

 

Ha ha ha ha ha!

 

All right, one more question then we'll do pics. Tracy, how do people find you online?

 

You can find me on Twitter at LadyLite or you can always find me on email tracie at this.co.

 

How about you Adam?

 

You can find me on Twitter at Adam L Barrett, 2Rs, 2Ts in Barrett. Or you can find me on Mastodon at BigAB at techhub.social.

 

Awesome. All right, let's do some pics. Dan, you want to start us with pics?

 

Yeah, I actually have a couple of pics this time around. So since we've been talking about Svelte, I have to pick the Svelte Origins documentary that came out, what was it, like six months ago. If you're really interested in the story of how Svelte came to be and the people who made it the way it is, in particular, obviously, Rich Harris. an amazing guy by the way. I'm happy to say that I got a chance to meet him in person and speak with him. It's really worthwhile this documentary and you can find it. We'll post a link but just search on YouTube for Svelte Origins and you will find it. So that would be my first pick. My second pick, we have to mention this, we probably should make a show about this, but of JS 2022 has finally come out. I know that all the podcasts are talking about it. So I don't know if we can say anything new, but it's still really interesting, a lot of interesting information there. One thing that's kind of disappointing is if you look in the demographics section and you look at the gender breakdown, it's like really disappointing. Like only of all the people who responded to the survey only 4% identify themselves as women. And that's way low. I hope that it's because for some reason women just didn't participate in the survey and that it's not really reflective of our industry. All I can say is that every company that I've worked at always had a significantly higher ratio of women working there. but I'm hoping that's not the case.

 

You know, Dan, the women who responded to the Plumber's Survey, it was even lower than 4%. And I think we need to

 

Ha

 

make

 

ha

 

a

 

ha

 

big

 

ha ha

 

ad

 

ha

 

campaign

 

ha

 

about that.

 

Well, look, that's a different discussion. I'm not saying what can or should be done. I'm just saying that I'm hoping that the number will be higher and that I think that it should be higher. By the way, I saw a really amusing video that said he'll explain the gender salary gap and justify it in like 10 seconds. And he said that's because men pick high paying jobs, engineer and doctor while women consciously choose lower paying jobs like female doctor, female lawyer, and female engineer.

 

아우..

 

Thank you. Bye.

 

Anyway,

 

Wow.

 

yeah. Anyway,

 

and yet and and and and and and and and and and and and

 

no, yeah, it was really tongue-in-cheek. But

 

No.

 

that anyway, the survey would be my second pick. And a third pick is we're watching this show on TV, actually on Amazon Prime, which I'm really enjoying called Sneaky Pete. It's a show that had three seasons. It's already ended. It ran from 2015 to 2019. We're enjoying it a lot. It's not breaking bad, even though Brian Cranston is actually one of the creators of the show and actually participated in season number one. But it's still a pretty good really enjoying it, so that would be my second pick. If you haven't watched it, you've got three seasons ahead of you. And oh yeah, I also wanted to pick AJ, that short video you created on We Hate Perfect Things. I thought it was really insightful and I enjoyed watching it, so thanks for that. And

 

You're welcome.

 

my final pick is of course, pick that I pick every each and every time which is the ongoing war in Ukraine kind of not talked about in the news anymore because you know who talks about something that's been going on for almost a year I mean it's you know it's not news anymore but it's definitely still going on definitely still a lot of suffering and death and whatnot and like I always say you know anything that we can do to help the people in Ukraine then we definitely should and And that would be my final pick and you know, over to you.

 

All right, AJ picks.

 

Okay, now I'm unmuted again. So there's one thing I'm particularly excited about. It happened a little bit later than I thought it would by about two years, which maybe is accounted for with Corona and chip shortages and whatnot. But not only is there a micro SD card that is one terabyte that's available on Amazon, that's old news. You could get that four years ago. manufactured, produced it, and Silicon Power happens to be my favorite manufacturer for all things flash memory because they're the only ones that actually consistently deliver the same performance. If you ever work with USB drives or SSDs or whatever, it's almost like the ones that get picked for the SanDisk reviews are cherry picked because when you actually buy a SanDisk, it doesn't actually work as advertised. It's under $100. So one terabyte microSD has gone under $100. And I think that that is awesome. Dear Apple, why does it cost $4,000 to upgrade to an eight terabyte SSD? Couldn't I just get eight of the $100 ones? And, ugh. But I am, yeah, I'm really excited to see that this, we kind of reached, I think, I think that we've maxed out at 20 terabytes. I don't think that we're ever going to see a rotational drive get beyond 30 terabytes. I would be really, really surprised if that happens. I definitely absolutely don't think that's physically possible to get to 100 terabytes, but 3D NAND has finally produced one terabyte micro SD. That means that a 20 terabyte SSD is eventually going to be affordable. And that. I think. is going to be really interesting because then the cloud will no longer be necessary. We've had bandwidth for the last 20 years now, you know, broadband. And now broadband is about to meet terabytes of local storage. And I think that is going to be that will be web three or web one

 

Interesting.

 

plus.

 

One one dot plus. Alright cool. I'm gonna jump in with some pics. I always do a board game pic. Lately I've been doing card games. I'm gonna pick a game called Karma. And this is a card game. And my wife, it's funny when we got married, we played a game that was like Karma, except it was called, we called it idiot. I don't know why it was called idiot, but it's a relatively simple game. Board game geek waits it at one, one.00. Um, it, it has it slotted at eight plus all my kids capable of playing it. My seven year old, um, sometimes she needs a little bit of help reading the card, but the game plays pretty simple. Effectively what you do is you deal out nine cards to each You put three face down before you look at them you flip them face up and then you put three face up your three highest cards face up and then You play and you have to play a card that is equal to or higher than the card that's face up on the discard pile And if there's no discard pile then you play whatever you want And then what's interesting is is there are twists with the karma cards? And so there's a card that says the next person has to play a card that's five or lower or Pull the bottom card off the Bottom and put it on the top right so now people just have to beat that card instead of whatever was on the top or things like that and the karma cards can be played at any time and The person to get rid of all all of their cards so you you play and draw a back up to three unless you have more than three because if you can't beat the top card then you have to pick up the draw the discard pile and put it in your hand and Once you're out of cards, then you can start playing the six cards that are in front of you so you can play The face-up card if you or if you've uncovered the face down card you can or if you've uncovered all the face down cards you can play face down card and Then again same rules. So if you can't beat So if it's a 10 out there and you flip your card over and it's an 8 you have to pick up the discard pile because you couldn't beat Right and so you just play it until somebody is completely out of cards including the cards in front of them and It's fun and you know the the rounds take anywhere from hour. So it's pretty quick, pretty fun. You can play with like five players. And so yeah, I'm gonna pick Karma if you're just looking for a fun, fast game that you can play with your family. It's a terrific game. Other picks. So I watched the first episode of 1923. It's one of the spin offs of Yellowstone. It was so good. It was really good. It's funny because I've been enjoying Yellowstone. have to pay right now to be able to watch Yellowstone season 5 on Amazon Prime. So I'm just gonna wait till the season's over, watch it on Peacock. Because we have a Peacock subscription that I've watched all the other seasons on. So I have to say I've enjoyed the spin-offs, right? The mini series. I've enjoyed those more than the actual series, even though I've really enjoyed the actual series. So anyway, this one has Harrison Ford and Helen Mirren in it. And So far it's good. So of course you can only watch the first episode again without paying as far as I can tell But I really like that. So I'm gonna pick that another thing that I've been doing lately is just getting my books done so that I can file my taxes I've been using zero Xerro I think I might have picked this last time. Anyway, it's it's a lot easier for me to use in QuickBooks So I'm picking that and then I think that's it. I think, well, every time I see this dot, I always think of Tridot, which is the system I'm using to train for my triathlon. So I'm gonna pick them too, just cause.

 

It's

 

Tracy,

 

funny.

 

what are your picks?

 

Well, I'm really excited about it. It's so funny because every year I'm like, what am I going to do to change the world? And truly, I do. But, you know, small steps. So we actually have this like women in tech monthly mentoring that happens every single month. And the next one is, well, this Wednesday. where women get together and chat and things like that. But we also have a lot of these state of events that we do. So state of react ecosystem is coming up very soon. And in about a month, we're actually gonna be doing state of web performance too.

 

Oh.

 

So Dan, I dropped you a note. Yeah, so we should definitely chat via Twitter and just talk more about web perf stuff because the web perf community is so small. It's like, we need more people talking about web performance.

 

Yeah, although it's become

 

So the...

 

a topic du jour. I mean, like all of the conferences want to have at least one web performance talking, which I guess is really good for me.

 

Yes.

 

But yeah, by the way, in the context of the women in tech, are you in contact with the amazing Moran Weber?

 

I don't think so, but I'm happy to, you know, if you drop me a note, I love introductions.

 

Yeah,

 

So.

 

I have to, if you're not, I have to make an introduction between you two. She, by the way, she was a guest on our podcast like a few years ago. Uh, and, and she's amazing. She runs, uh, women

 

She's

 

on,

 

awesome.

 

yeah, she runs women on stage. Uh, she like trains women to speak at conferences and, and meetups and stuff like that. It's, it's really great what she does.

 

Did you have any other picks, Tracy?

 

No, those are all my pics.

 

Alright, Adam, what are your picks?

 

I would say for a tech pick, I know I'm kind of late to this party and everybody already knows about this, but Zod is like blowing my mind how awesome it is. Check out the library Zod just the idea of like parsing instead of validating is just amazing and it's just like change the way I work. And then for board game pick, I would say

 

Wait, wait, what

 

front.

 

is it?

 

Oh, sorry, back to Zod.

 

Zod.

 

Yeah, tell me more.

 

tell you more.

 

Parsing

 

Okay,

 

instead