(upbeat music) - Welcome to Svelte Radio. - Hello everyone. Welcome to another episode of Svelte Radio. I am in the Big Apple once again, doing a bunch of interviews. And today I'm here with a guest, Timothy, I think, or Tim? - Yeah, you can call me Tim. - All right, all right. Oh, all right. You never know. So I'm here interviewing Tim. He has a really cool, I don't know, if you would call it a project or a-- - Yeah, it's a project. - A bunch of collection of projects called Sample Kit.
Most people probably haven't heard about it because it's kind of gone under the radar or whatever you call it in English. - I never, yeah, I never posted it anywhere. So you probably have not heard of it. - Yeah, and you were mentioning earlier Willow found it. So that's Ghost for those that are in the know in the Svelte community. Yeah, so I thought maybe we could start a bit about talking about your background. Like, how did you find Svelte?
Why do you, and we'll get to Sample Kit in a bit, but let's start with the background. - Sure. - Who are you? - So I am, I'm Tim Cohen. I'm a Svelte enthusiast, and I write bespoke applications here in New York City using Svelte Kit. And I am also the creator of Sample Kit, which I guess we'll talk about in a little bit. And how did I find Svelte? So it's a bit of a circuitous journey. I'm happy I ended up here, but I started, so my background's in physics, but that was over 10 years ago.
And I worked for a couple years as an applications engineer for a photonics company. And then in my early 20s, I had wanderlust, so I wanted to travel, and I ended up switching careers so that I could find work abroad more easily. And traveled for a bit, and fast forward through that part of my life, which is not related to Svelte. And about three and a half years ago, I guess, during the pandemic, I was thinking, what do I want to do with my life?
Like a lot of people, I think, during the pandemic. - Oh yeah, for sure. - And I really missed the problem solving that I get from coding now. But I thought, oh, I'll go back into physics, and I'll try and learn some stuff, and try and go back into that career. So I ended up taking an intro to computer science course. It was Harvard X's CS50 or whatever, and I fell in love with it. I really like coding. It's just the most fun job I've ever had.
So I blew through that course, and fast forward another nine months or so, I was doing a course by Wes Boss, JavaScript 30, and I heard Scott Tolinski talking about writing his app. He was like starry-eyed, talking about how much he loved Svelte. And he was rewriting his whole app, so I'm like, all right, I'll just check it out, 'cause I only knew React at the time. And yeah, I loved it. I found Lee Howe on YouTube.
- Yep. - And then he's such a charismatic person, and a great teacher, so I was just watching those YouTube videos, and then-- - Like the, are you specifically thinking about the, I guess he did a bunch of videos. - He did house felt works. - He did the house felt works under the hood or something. - Yeah, which is so fascinating. And he's just so charismatic that, like he could probably be talking about whatever, anything with Svelte, but. - He's a great guy.
- Yeah, so that's how I got into Svelte, and then I got lucky enough to, like I focused a lot more on Svelte than on React, and I was lucky enough to get some contract work using SvelteKit right when SvelteKit came out, so. - Oh, nice. - Kinda got my foot in the door that way, so. Yeah, I'm kinda like indebted to Svelte, too, for letting me change careers and like, do something that I really like, so.
- Yeah, so how come you picked, so you mentioned React, but how come you picked Svelte over one of these? - For the memes? - Is it just because of the-- - No, because-- - I mean, totally legit reason. - Yeah, I guess, so at the time, I had only spent probably about a year in not only web development, but software in general, and I had done the Odin Project, so I had learned like, the foundations, and-- - What's the Odin Project? - The Odin Project is a way to learn web development.
It's taught by web developers, I guess. It's just taught by people in the business, and it's a phenomenal project. It's really thorough, but yeah, it just teaches you HTML, CSS, and JavaScript, and like, the ecosystem, like Node, and I think they have a Ruby path as well, or they used to, I don't know if they still do. But yeah, so I learned that, and then when I went to React, it was great. I mean, it's good. React is-- - It's fine. - It's great, it's fine, correct.
But I really, I just liked working with the DOM more, just because it felt more natural, and yeah, it just felt better. - All right, I mean, I totally agree with you. So I used to do React work a couple years ago, and then I found Svelte in like, 2019, and just like, switched, like canceled all my consulting. - Really? - Yeah, yeah.
Yeah, I was meaning, like, I meant to start a site called Svelte School, which would be like, a course website, basically, for Svelte content, but I'd never really-- - You got into that thing? - Yeah, I mean, I started the podcast, right, and then the Svelte Summit, and all-- - Yeah, thanks for that, by the way. I've learned a bunch from this. - That's great, that's great, that's good. All right, so that's how you found Svelte.
You mentioned the CS50 computer science course thing, 'cause that's also like, open and free, right? - Yeah, it's a MOOC, so whatever that stands for, multi, I don't know, online course. - Massive something, something. - It's a MOOC, so yeah, it's by Harvard X, and it's a really great introduction, and it's very engaging.
They do it in, like, the Harvard Theater or whatever, so they do it almost like a performance, it's so good, and I was hooked on that, and I, like, marathoned through it night and day for, like, two weeks or three weeks or whatever, and that's how I got into software development, so. - It's a, like, just compared to, like, 10 years ago, the difference in the amount of, like, educational content out there for, I mean, not just web development, but, like, anything.
- Yeah. - You can learn anything now. - Yeah, it's amazing.
- It's great, I'm kinda, yeah, I wish I had that when I did my university degree, because there were so many things where I didn't really fully get it from a professor or something, and, you know, I'd have to go through multiple books, and it just, you know, it was harder to, like, I actually did have a, I had a C++ course for my physics degree, this was, like, 14 years ago or something, and I remember, like, thinking, what the hell is this Visual Studio thing,
what is this bloated thing, and I don't understand anything, and, like, so I consider my start of software development three and a half years ago, because I learned nothing back then, but if I had YouTube, either, or people like Lee Howe or whatever, then, yeah. - It's so much easier to find, find content that works for you as well, right? - Yeah. - Not everything works for everyone, so I think it's really nice.
I took a look here at the, like, that Odom project thing, and it looks great as well. - Yeah, it's really good, and you just, it's a very long project, so you can do it as long as you're still getting stuff out of it. That's what I did, and then once I felt like I was pretty confident, then I just started building stuff, and, yeah, it's a good entryway, I think. - I'll definitely be recommending that to people. All right, so that's your background. Now, let's talk about SampleKit.
So first off, what's with the name?
- Yeah, so the name, naming things is the hardest part, right, so I just needed something that sounded like SvelteKit, 'cause it was originally intended to be just for SvelteKit, and it still kind of is, and I wanted it to be samples, like sample code that you can just look at, and kind of like a show me, don't tell me kind of thing, where you just, you look in the repo, you see how to do it, and then you can take it, so like sample and kit, and then I just threw them together.
- All right. - That's the limit of my creativity. (laughing) - Well, nowadays with AI, you could probably use that to come up with all sorts of weird stuff, but, yeah. All right, so it's a collection of things. I think we said, so it's preprocessors. That's not a very common thing to write for Svelte, I think. - I don't know, yeah, I found, so I know Melt UI uses them for, or they used to, I don't know if they're going to, for the Svelte fiber, right?
I haven't actually seen that branch, so I don't know, but I found out about the preprocessors through that, and there's also Svelte Put, I think, is a collection of preprocessors, and MD specs is also a preprocessor. So, yeah, yeah, sample kit is a few different things, but the first one is the preprocessors, like you were mentioning, and it's kind of an alternative to MD specs with the pros and cons.
So basically what it is is you can write markdown math and code highlighting in your Svelte component, and you have HTML comments and specific delimiters, and because you're using an HTML comment, you can embed your whatever you want inside your Svelte code, and all of the tooling just pretends like it doesn't exist, so you have your own little domain where like ESLint has no jurisdiction over this part of your code.
So it has different trade-offs from something like MD specs where it's like a completely different language, right? - Yeah, it's interesting you mention the use of comments here because, so I'm currently doing some consulting for a company that, they're moving from a Knockout code base, so Knockout is like a, I don't know if you know about it, but it's like a very, very old JavaScript framework, and they use HTML comments for control flow logic. - Oh, for control flow.
- Yeah, so if, else, e, like-- - Oh, interesting. - Like iterating over like an array or stuff like that, and it's, it becomes quite a mess when you have to like look at the comments and you have to download this-- - So do they have syntax highlighting for the comments? - Yeah, so you can get syntax highlighting for the comments, but it's still like, my brain is so used to like seeing, like if you see the start of a comment, you're like, oh, this is a comment, I'm not gonna--
- Sure, yeah, yeah. - Yeah. But with the syntax highlighting, it helps. - That's, yeah, so every preprocessor is two things. It's the NPM package and then the corresponding TextMate grammar extension for VS code, because yeah, if I just, if it was all comments, I would lose my mind, like I need, I'm spoiled in the new age of web dev, I need my typescript and I need my syntax highlighting, I need my IntelliSense. - Yep, no, totally, totally get it. - I'm a spoiled man.
- But yeah, it looks very cool, like you have some, you mentioned you weren't much of a designer, but I don't know, this looks-- - It's Tailwind, Tailwind makes it, it's Tailwind and Radix. - It's a good base, I guess. - Yeah, they make it kinda easy, and I've definitely gotten better. It's been, so I'm only like a little over three years, three and a half years in web development, but I'm inching towards getting better at design, but-- - Yeah, but that's a completely different field, right?
In a sense, I mean, obviously you can get good at both, but it's tough, it's tough. All right, so that's the preprocessor. Are you planning on building any other preprocessors? Do you have any other ideas that you wanna-- - Like, I only built those three, because those are the only three that I need. Like, I actually don't, when I'm writing, for example, if I wanna write an article or something, I actually don't really like writing it in Markdown, 'cause I feel like I'm handicapped.
I just want my HTML, but I'm spoiled and I want my Svelte, so I only did code highlighting and math, because those are the things that I wanted, and then Markdown is, the preprocessors, two of them are extremely simple. They just check, they use the Svelte parser, they check for the comment, and then once they're inside that Svelte comment, they check for the delimiters, and then they just take everything out, put it through some NPM package, and then put it back in.
So as far as Svelte is concerned, it's already that package's content. So I actually don't really have any plans for anything else, but it's so easy, like the concept is really easy to create another thing, you just wrap an NPM package. And then for the code highlighting, I just spent more work because I wanted to be able to do things like add an arbitrary class to an arbitrary line or an index or something like that, so I needed to pass in the config inside my delimiter.
So that's the only one that's a little bit more complex. But yeah, the concept is easy, so if anyone wants to make more, yeah, easy, just have to make the-- - That's probably one of those concepts in Svelte Kit where, or I guess Svelte, there's not that much information out there, specifically preprocessors, right? But it's not like when you go into it, it's not that complicated, right? - No, not at all, yeah.
It's like a single file, for one of them, I think it's like 150 lines, and then you've got, the hard part is the syntax highlighting, because for text-made grammar, writing it in JSON is awful. RegEx in JSON is an abomination. - RegEx in general. - Yeah, in general, but this specific flavor that they use and having to write it in JSON, so you have to escape everything, and it's actually a nightmare. - Like backslash and-- - Yeah, you have like six backslashes in a row and you've lost your mind.
- What am I reading? All right, so other than preprocessors, there's also the demos. - Yeah. - So what's that, you mentioned before we started recording, it's like a way for you to just go into and grab some examples of stuff and use it in projects, I guess?
- Yeah, so like, when I first started, when Spellkit was pretty new, I wanted to do auth, you know, obviously, I needed auth for a client, and I like, there's so many different things you can do, like there's so many packages out there, and then there was Lushia at the time when it was actually a package, and I started doing that, but the API kept changing, and then I was just like, I just want to know how to do this and keep it all in my own code, right?
Like obviously, you still want to use NPM packages for your hashing and solving and stuff. - Yeah, for sure. - But like, the flow of your password reset and stuff, like the endpoints and stuff, I feel like a package is worse than just having it copy and paste into your code and then having like-- - 'Cause you always have to modify it to like, fit the specific case, right? - Yeah, exactly. So there's that, and there's like, CapRover, like how to deploy on your own private server.
- That's interesting that you're using CapRover. - That's something I learned from Svelte Society, I saw it on-- - Oh, really? On one of the-- - Stanislav? I think he's famous. - Oh, yeah, Chromov, yeah, Stanislav, yeah. - Yeah, he did a video, it's been a really long time, so I might get the details wrong, but I think it's like an hour-long video of him just like, doing it, and yeah, it's great for personal projects, it's phenomenal.
I really liked it, so I wanted to-- - Yeah, I used to use it as well, on his recommendation, actually. So Sevi also lives in Stockholm, so I know him personally. But then I've moved on to Coolify, which I prefer. - I've heard of such a thing.
- It's a bit more, it's a bit more complicated, or like, maybe not complicated, but a bit more advanced, like you can get, you have things like preview builds and stuff built in, so you can just connect a repo, and then if you open a PR to the project, it just builds a new version of it and stuff like that. - I do that, I have like GitHub actions. - Right, yeah, so that's another option, right? It's just that Coolify does it for you. - That's nice, it's like a little Vercel kind of thing.
- Yeah, exactly, exactly, but free, and not super expensive. (laughs) - Yeah, I think I'd still use Netlify or Vercel or something else if I was working on a big team, just 'cause it just gets easier, and you don't have to worry about all the different branches and everything, but for smaller projects, and especially personal projects, I feel like CapRover or maybe even Coolify are really good options.
- Any of these options that do similar things are probably great, there's also Docu, there are a bunch of them, yeah. There's the CapRover stuff, there's, I see also here you have AWS and e-commerce. - Oh yeah, that's another thing which I feel like is often, like the spell kit documentation is really good, we were saying it's off air, but it's really good, and then it just lets you off into the-- - Draw the owl.
- Yeah, exactly, you just get left off into the big world of web development, it's really hard for people like me who are just trying to teach themselves and learn everything, so I feel like AWS is one of those things where it's like you kinda have to know just the basics of how it works, because even if you don't use it directly, you're probably using service which uses it. - Or like an S3 compatible SDK, but for another service.
- So that's, I just have, so that one I think is just like how to get a token for an upload and then how to upload it, but basically just how that would look in your spell kit, like library and then your routes, how they would handle that, and how you have multi, like states, like different states for your front end code where you can just go between all of your different states and update the UI and stuff.
So yeah, just another kind of how do I do this thing, let me just copy and paste some code kind of thing. - I guess it's also, for me, something like this, like writing these demos would also be a way to learn, and it's also a way of documenting what you're doing. - That's like, that's how I learn, actually, is by trying to explain it even to myself. I always have a rubber duck folder in each repo and I have it as my global git ignore, and I'll literally just try and explain things to myself.
- Oh, that's interesting, I have a physical rubber duck, so actually two of them. - I gotta get one of those. - But it's better to write it down than talk to the duck, I think. - I don't know, it could be good for both. I'll invest in a nice rubber duck. - I can highly recommend it. So there's also e-commerce, do you have any?
- Yeah, that's like how to hook up a Shopify, 'cause Vercel has one for Next.js, and Svelte Society did one with Medusa, I think Brittany interviewed someone with Medusa, and so I just wanted to add that in there for Shopify, so how you would just make, what interface you would need for your front end, and then how you can implement that using Shopify's API, 'cause I feel like a lot of people use Shopify.
- Shopify is big, it's probably one of the biggest, I guess the only, no, I do wonder if it's the biggest e-commerce platform. Either that or-- - WooCommerce? - Yeah, exactly, 'cause it's open source and free. - I always hear about Shopify's, but maybe. - Yeah, same. - Yeah, I don't know. - I don't know either. Cool, demos, are you planning on doing more demos? - Yeah, definitely have to do more demos, because, oh, another thing is WebSockets.
You can do WebSockets in Svelkit, but I didn't know how. The first time I wrote an application for a client, and I had to do, I had people who were negotiating on something, and I needed some way to do real-time chat, and I didn't know how I'm gonna do this, 'cause I didn't know how to use WebSockets, right, and I couldn't find documentation for it. - And then you realize, oh, Svelkit is serverless first, so I can't use WebSockets out of the box there, so.
- Yeah, there's multiple options, you could wrap your, if you use a node server, you can wrap your node server and have an IO socket, whatever, and just put that in a global, a reference on global this, and you can call it. There are multiple options, and they're like, push here and stuff, so I feel like, I'm sure, maybe someone's done that? I'm sure people have done that, but I couldn't find it when I was looking for it, so I think that's something. - I'm not sure, actually.
Like, maybe someone has done that, but I'm sure someone has done it, but not publicly put it out there, yeah. - Yeah, and I feel like that's such a foundational thing now, so it should be, like, Svelkit should have some kind of documentation, or even if it's not official, docs have like, you know, something on Svelte Society. - Yeah, I mean, you're very welcome to write an article for Svelte Society. It's interesting with WebSockets, like, I'm a huge, like, I really like Elixir and Phoenix.
I don't know if you've heard about it, but. - Only heard about it, I've never tried that. - So basically it's, so Phoenix is the web framework for Elixir, which is programming language, and the idea is basically that all the state lives on the server for every client, so nothing really lives in the web browser, but then there's a WebSocket that just sends diffs back and forth to the server. - Interesting.
- To and from the server, so it makes it really easy to build things like real-time collaboration, and like, stuff like that. It's just a, it's such a cool, such a cool framework. - Yeah, that's a great idea. I feel like it wouldn't work well with backends for frontends, though, like Svelkit and Next.js, that wouldn't work.
- The thing is, like, Elixir is built on Erlang, which is like this programming language that was built by Ericsson back in the '90s, and it's built for telecommunications, basically. It's meant to be like a super-resilient network that, like, if one node goes down, it doesn't, like, bring everything else down, 'cause that's kind of the case now with, if you, like, if you error your node process, it's just gonna crash and everything, and it stops working for everyone, right?
And so it has all this, like, stuff built in where communication between nodes is very simple. You can just, like, send messages to all the nodes in a very simple manner. - That's cool. - It's very, very cool. There's a great talk by Sasa Yuric, I think it's called, that I can recommend that's very, very, very, very nice. One of the best tech talks that I've seen, honestly, so.
- Nice. - If you're interested in, like, going outside the Svelte, or the SvelteKit ecosystem, I would highly recommend that one. - It's a problem. My queue of things that I wanna learn is infinite, pretty much. - I'll add that to the end of the queue, but. - Put it at the start. - Okay. - No, okay. All right. And then, so you have the demos. Yeah, so are you planning on doing more of these demos? Do you have any plans? - Yeah, other than maybe the-- - The WebSockets stuff. - WebSockets, yeah.
Yeah, I have, like, a few different branches that I started months ago, and I just haven't had the time to do them. I have to think about-- - I'm sure it's gonna be, like, one of those, I need it for a client. - Yeah. - I might as well do a demo for it, kind of thing. - Exactly, yeah. Or, like, I don't know this, and I just found it, and I'm really excited to talk about it. - Yep. - And, like, I just wanna. - Yep, yep, totally, totally. All right, what about articles? That's the third arm.
- Yeah, articles. So they're just, like, good old-fashioned articles, and the first one I wrote was because, like, Spell Kit is really great for type safety between your, like, when you have your load function is automatically typed, right? And also server, the form actions, and I use super forms, and that's. - Yeah, super forms.
- Yeah, it's an amazing experience, but then when you do, when you fetch from your client code to your server code, it's like the kid gloves are off and you're back to no type safety. So I, one of the first things that I did was just, like, make a little wrapper around it, and I ended up using the kind of super forms, loading and. - Oh, nice.
- And delayed API kind of thing, so you have, like, a state of where it's at, and you get type safety, and the cool thing about that is that you can define your client code, your fetch call directly next to your server, 'cause you have, like, your .serve page, or. - Server.ts, or.
- Yeah, plus server.ts, and then next to it, I'll usually have a client.ts, and then I just export the, I have, like, a little wrapper around it, and so I just wrote an article about that because it was something that I liked using. I don't know, and I just wanted to, you know, shout to the world. - So it's like, you put it in the same folder as the endpoint that you want to fetch from, and then you just import, like, a pre-made fetch client.
- It's like, instead of having a repository of all of your API calls, you just have one specific one, and you just import it directly from, and the cool thing about that is that if you change the route, like, if you're reorganizing, 'cause SvelteKit is route-based, if you change your server endpoint, well, now you gotta update your client code, but if you have a wrapper which already embeds your URL, and especially because SvelteKit exports the route ID, you can just make that a generic type,
you put in your route ID, and then if you change it, then you get a type error for, you know, saying, like, hey, your API URL changed, like-- - That's pretty smart. - Take care of this, so. - There are some things around, like, SvelteKit, and how it would be nice to have some typing around routes in general that I feel is missing.
There is a package out there that does it for you, I think, so you can, instead of just, like, randomly typing the route, you can just, like, yeah, you get type safety, basically. So I feel like that should probably be built in. - Yeah, and the thing that I use is, like, you know, it's 100 lines or something, but I use it in every project, because I feel like I'm such a baby, I need my types, you know, like, I hate-- - Who isn't?
- Yeah, I'm so spoiled now, so it would be amazing if that was built in, and I know that, I think, I don't know if it was Rich or someone, but they posted an issue on GitHub saying they wanted to do form actions as well, they wanted to have some kind of type safety with the URLs. - Yeah, I have a favorite, yeah.
- So, yeah, it would be nice if there was some kind of pre-made client fetcher that calls your server endpoints, but you would, if you used something like that, you would need to use some kind of validation package, like Zod or something, so it might not make sense in the client, in the spell kit to have it, 'cause it might be better, like, something like Superforms, where it's-- - Where you need that then anyway, yeah, yeah. Yeah, no, for sure.
- Yeah, it's, there are a bunch of these small things that I think are missing in spell kit that I would really like to have. Like, one thing I run into a lot is invalidating data, partially, like if you just wanna, like you're fetching three or four different things in the load function, and then you're like, ah, I just wanna invalidate one of those three things that I fetched. That's not possible, right?
- Well, technically it is, because you can nest them in like layout groups, which that just makes a mess of everything, because you'll have like posts, slash comments, and you know, the parenthesis, not like regular folders, right? - Yeah, like your route ID, not your actual endpoint. - Yeah, yeah, it becomes a mess, and it's just like, it's not worth it, I'll just invalidate everything. But to be fair, like in most cases, that's probably fine, like, probably.
But in some cases, it would be nice to have a more granular way of doing it. - Yeah, I'm very interested to see what they start doing on spell kit three, now that they've put all this effort into spell five. - Yeah, so there's the, in Vite, there's a new environment API that is coming, which I think is gonna be good for spell kit, and so separating the server bundle from the generation of them into different. I think that's gonna help with some other stuff in spell kit as well, but we'll see.
- I'm excited to see that, because I think Vite has already merged that into-- - Yep, I think it's under an experimental flag for a year, I think, so the API might change, but we'll see. I'm excited. - Yeah. (laughing) - All right, so, yeah, and you have a bunch of other articles here, like theme controller-- - Yeah, just like stuff you need. - Blog with preprocessors, I guess that would be-- - That explains. - That would use the preprocessors. - Correct, yeah. - Makes sense, makes sense.
URL state controller, oh, so you can sync the URL, like query parameters. - Yep, yep, just like simple stuff that I feel like everyone uses, and this is just my implementation, it's probably not the best implementation, but it's an implementation that you can look at and see how to do it, so, yeah, especially with Svelte 5. I've rewritten some of them to use runes and other Svelte 5 features, but I don't know that I've rewritten that one.
- I think, so if you've seen Paulo, he usually does the This Week in Svelte streams on the YouTube channel. - Also on the GitHub all the time. - Yep, yep, and he did a package for the specifically, don't remember what it is, yeah, syncing it back up, Svelte kids search parameters, that's what it's called. - Okay, that makes sense, probably should've searched for that. - I mean, or you could build it yourself, 'cause it's fun.
(laughing) - Yes, that's usually how I end up building stuff, 'cause I'm like, ah, there's this package, but it would be so much cooler if I could do it, too. - It is a lot of fun writing stuff, even if it already exists. - Yeah, and sometimes you find different trade-offs. - It's a way of learning, as well. - Yeah, and a way of learning. - Exactly, trade-offs, for sure. Recently, I've been going down the rabbit hole of using AI to write stuff, so like, Svelte kit routes and stuff like that.
- How's it doing with that? - So, I've been trying a bunch of different AI, I don't know if you've used-- - Only the chat GPTs of the world. - Yeah, so I've been using one called Clodsonnet, which is, I guess, a competitor to-- - Yeah, I've heard of it.
- And there, you can embed text files and stuff for it, so it can reference and use the stuff that you embed, so on the Svelte site, there's a /content.json file, which has all of the documentation in it, so you can take that and you put it in the context of the AI. Yeah, you feed it in there. And then you can ask it to write. The current documentation is too big for putting it in there, so you have to remove a bunch of stuff.
But as long as you do that, you're fine, generally, but if you don't put the new documentation in, it's gonna give you Svelte 4 and weird old, I don't know if you've used Sapper, but the predecessor to Svelte. - No, I was after that time. - And that uses, I guess Svelte actually used load functions in the Svelte files during the beta as well. So that's what Sapper did as well. So sometimes you'll get files that are like, oh, here's the context module load function. - Wow, it's very old.
- Yeah, so you have to give it some rules and stuff, but it's fun to play around with. Like I've used it for admin dashboards where it doesn't really matter what it looks like, I just want the functionality, and it's simple stuff like CRUD stuff, right? - That stuff it can do really well, yeah. - Yeah, but as soon as you want something more custom, then it becomes tougher. - Yeah, it's almost just easier to do it than to try and fix what they did.
- Yeah, or you can use it as like write the HTML, give me a starter, I want the sidebar, and blah, blah, blah, and then you modify it. That kind of works as well, but yeah, it's fun.
Recently, for the news, Svelte Summit website that's coming in a couple of weeks, the admin dashboard is, I decided I wanted to build a super dynamic system where, so I usually use SQLite as my database, and I decided like, oh, I'm gonna generate SOD schemas and JSON objects out of the table structure of the SQLite database, so like I have, I don't know, a conference table in there, and then I have a talks table, and then I have this endpoint that's,
the load function is the ugliest thing I've ever built, like it's supposed to be like very dynamic. - As long as you know how hideous it is. - Oh yeah, I'm not proud of it, but it's super, super, super complicated code because it's like, it does a SQL query to get out like the SQL that was used to create the tables, basically, and then it uses that to like pick out, oh, is this field a string or is it an integer and stuff, and so it, and then out from that, it generates the SOD schema.
Obviously, SQLite doesn't have like proper type safety, so it can only do so much, but still a funny, fun and funny, I guess, like experiment to try to build. It's like, if you've heard of PocketBase or Firebase, like one of those like back-end service kind of stuff kind of things, I guess it's a take on that. 'Cause I can just, now I can just create a table and the SQLite data just pops up in the sidebar and then I can just add it to that. So it's super brittle, though.
Like if I change the naming structure, like and I have junction tables as well, so you have the conference_talks, that would be like the many-to-many table for it. Like, oh, if I didn't use the underscore, then it wouldn't find the, it's terrible, but it's fun. (laughing) - Okay, side quest there. Anything else that you want to talk about with regards to the sample kit? - No, I mean, we talked about, I guess the preprocessor, the biggest thing, and I guess the trade-offs.
Did I talk about the trade-offs between MD specs? I think-- - I don't think so. - Okay, so MD specs, you have a whole new language, and I guess I mentioned this already, but the preprocessors here are so that you can still use Svelte and still use the tooling, and you don't have to worry about writing a prettier plugin that can handle the specs language. It just works, and that way, yeah.
And so like, MD specs, or even like a unified pipeline might be better if you're using it with content creators or something who can only write in Markdown or something, but yeah, I think that pretty much covers sample kits. - Let's talk about Svelte 5, then. - I'd love to talk about Svelte 5, yeah. - Yeah, well, so what do you think? Is it better than Svelte 4? Like, what's your-- - Yeah, it's better than Svelte 4.
I'm gonna say it's 85%, 85% of the changes are better, and that number is totally made up and has no backing. - Honestly, it sounds about right. - Yeah, 85, I'd say like 10% is about the same for me, like I couldn't care either way, and then 5% I'd say like, there's some little tiny little nits or things that are maybe not as easy or, yeah. But overall, a big win, I think. - Yeah, but probably the biggest change is the reactive statements, right? They're not there anymore.
Now it's derived and effect instead. And it's a good thing, that's a good thing. - Yeah, yeah, I personally like snippets. I think snippets are even better than the reactivity changes. I mean, the fact that they were able to both replace slots, which, I love slots, they're very good when you have one slot and it's not nested too deep, you don't have multiple defaults or something, but as soon as you have that, it actually confused me, and it was hard, and especially with the let directive.
- Oh yeah, like the let directive. - Yeah, and you're like trying to pass it up and-- - You know, when I've used that, I'm looking at it, I'm like, I have no idea what, like, is it going in or out, I don't know. - Yeah, it does feel backwards, and it's like the one part is felt, which doesn't feel intuitive.
So I'm glad they got rid of that, and the fact that they were able to not only replace slots, but give me the other thing that I wanted at the same time, which is reusable code snippets, it's like a knockout API, I feel like. - Yeah, yeah, it's really good. The only situation where it's like, not as good as the slot one is like, if you have one default slot and you do nothing with it, 'cause it's like a bit of an extra,
couple of extra lines. - I like the explicit, yeah, I just like having the module expose the slot, like expose from the types to say what it needs. - Oh, for sure. - Like for me, that's just, even if it's like a few extra lines, I agree, it is more boiled. - It depends on like, if you're only doing like a super-tiny component, and you just want to pass something through. - Yeah, like a single, yeah. - But it's a-- - Otherwise. - Otherwise, like 99% improvement on all fronts.
There was discussion about doing multiple components in one file at some point, and internally, and I, but I think the people that looked at it were like, we like our single file component structure in Spelt. I prefer it as well. I know other people want the ability to just like, so I was talking to Wes Bos at the conference earlier this week, and he was like, yeah, the only thing I want is like multiple components. - If you're used to React, then you kind of miss that.
- It is kind of convenient, but then you also end up with like files that are like 1500 lines long, because maybe not if you're only working on something yourself, but if you're on a team, and then it just like grows organically over time, and suddenly, it's way, way more complicated, and especially if it's like you have, if the structure of the components are like, you have to jump up and down in the file, and like, I don't know, it's a trade-off. - Yeah, it's definitely a trade-off.
I think it's the right call for Svelte, but that's a vibes thing for me. - Yeah, no, I agree. I'm sure there are some benefits to doing multiple components in one file. But yeah, snips are great. Like, I love them. What else do you enjoy about Svelte vibes? We talked a bit about the migration script. What's your experience on that? - So I actually used it. I haven't migrated production code. I've just done it for SampleKit, and I did it before.
I did it the day that it came out, so it was kind of buggy, not gonna lie. - Risky move. - But it's like, I knew, I almost wasn't gonna do it, 'cause I just wanted to do it by hand, because SampleKit isn't that big, right? So I can do it by hand and just understand what's going on, but I tried it out, and it had some errors, and it did some weird things. Like, it threw the interface sometimes out of the script tags. - Oh, that's weird.
- But it was the day that it came out, and I'm not gonna judge it on that. I know that they've pushed a bunch of commits to that, so I'm sure it's much more robust now. Have you used it recently? - Yeah, so I mentioned I'm doing some consulting for a client that are moving from Knockout to Svelte, and then we started a new project where we're reusing SvelteKit.
So currently, the application is a Knockout-based application with smaller Svelte components inside of it, and now we're gonna switch approach to use a route-by-route conversion. So then we're using SvelteKit, and we started using Svelte 4, and now, I just ran, like last week, I just ran the svmigrate command, and just like, done, basically. I had to change one or two things, and then it just worked. So my experience is great. - Did you get imports from Svelte Legacy?
We were talking about the run function. - Yes, no. So in this project, so I mentioned earlier, I don't know if it was on-air or not, but I don't really use a lot of effects. Or reactive statements, since I rely so much on-- - The load functions? - Yeah, yeah. So that was not an issue. Another reason not to use effect. (laughing) But yeah, no, the experience is great. I don't have anything bad to say about it.
The run function, since I haven't experienced it, I'm not sure if it's problematic or not. I assume it runs, like, the run function runs. That's a weird name for a function. - Yeah, it is, it's kind of a-- - Should be like-- - General name that doesn't-- - Why is it not something like old reactive statement? - Well, it does import from Legacy, so that's-- - Yeah, okay, sure. - The name of the function could, naming things is hard. - Yeah, 100%.
- But yeah, I also don't really have experience with that because I just, as it transpiled it to run, I just went out and switched it to runes, so. - 'Cause that would be interesting, like, if you could just run the script and then start the application, would it just work? That'd be great, right? Because then you'd get the benefits of, like, the smaller bundle and all this stuff, so. But who knows? Probably someone has tried it. - Yeah, and yeah, and maybe it worked and maybe it didn't.
- Yeah. Okay, cool, any other Svelte 5 thoughts or ideas that you wanna mention, or should we head into-- - How do you feel about the, like, I have very mixed feelings on the fact that the Svelte 5 compiler wraps the signal so you can't see it, and it, like, I get the trade-offs, I understand why they did this, and I think that, you know, they made a smart decision. I'm sure they can do some Svelte magic under the hood, if we don't have access to it, we can't meddle with the reference.
But like, sometimes, if I have a class and I have a bunch of parameters on it, and I'm using it and, like, I'm importing it, 'cause now we can have Svelte.ts files, and I'm importing it, and I can't tell if it's reactive, like, if I have to use an effect or something, and I have a, maybe I'm, like, passing some config through, it sanitizes it, and then spits it out as, like, a parameter on there, and, like, is it reactive? Do I have to untrack it in my effect function?
I don't know, I have to, like, click through. - I have some good news for you. Yeah, so, I think this is pretty recent, like, just a couple of days ago, or last week, maybe? - Yeah. - There's a new, you know the inspect room, right? - Sorry? - The inspect room? - Oh, yeah, yeah, yeah. - So now there's an inspect.trace that you can put inside of an effect, and you'll get, like, a trace of, like, the reactive stuff that are in the effect. - Interesting, yeah.
- So that's probably why they made it, because it's, to make it easier to understand, like, that part of it. I, so for me, as I've mentioned, like, I don't really use effects that much, so I just, like, I don't worry about it. - You don't have to, like, the load functions are so powerful, why? - Yeah, exactly. - If you're using SvelteKit, yeah. - But as soon as I'm gonna write something more interactive, then obviously I'm gonna need more of the runes.
There are different approaches in general, right, to how different frameworks have done it. Like, I know Solid and Vue, I think, are more explicit in how they handle their signals. It's not hidden, right? - I think Vue, I think you can get, like, a dot value. - Yeah. - It's been a while since I used Vue. - Same, same. - But yes. - I think that's how it works. I prefer the Svelte way. I might be biased, I don't know. - I mean, you're very biased. - What?
- But I mean, yeah, I mean, Svelte wouldn't be Svelte if it was bloated, like, by definition. - Right. - So they had to, they couldn't box the reference and then have a dot value on every, on every signal. - Yeah, and it's probably, like, one of those cases where it ends up being, for the vast majority of cases, it's a net benefit, but then in the 10 or 5% cases, it's, like, a hassle, but. - Yeah, I kind of wish, I don't know how they would do this.
I kind of wish there was just some, like, TypeScript marker on it, like, just a marker for the type, so instead of it being a number, it would be, like, a, you know, stateful number. - Stateful number, yeah. - Yeah, a state number or something, but when you, when TypeScript will always, like, simplify the type, so if it's just a wrapper type, I feel like TypeScript is just gonna be like, oh, well, this is a number. - Right. - It's a state number, which is a number, so it's a number.
- Yeah. - So I don't know how they would do that, but I do, that's, like, one of my little nits of it, but overall, I think it's been, it's been pretty good, so. - Yeah, I mean, there's also, like, speaking of new things, there's also error boundaries that are coming as well, like, I think, also something that was talked about, like, last week or two weeks ago. - Don't we already have error boundaries? Or is there a new? - No, we, Svelte hasn't had error boundaries.
- Oh, I'm thinking SvelteKit, with the, 'cause you can put a plus error. - Yes, the plus error, yeah, but so, error boundaries are basically a way for Svelte to catch unexpected errors. So you can, like, let's say your fetch on the client doesn't work, throws an error instead. Instead of crashing the application, you can actually catch it in a boundary, and then you could, I don't know, render a reload application, or something like that. - So it doesn't automatically go to an error page?
You're just saying you can't-- - Well, so, if it's SvelteKit, then, depending on what you're doing, like, if you're throwing an error in SvelteKit, then it would go to the error page, right, but so the error boundary is for Svelte, which means, like, you can use it outside of SvelteKit. - Okay, cool. - So that's also coming, that's very exciting, something that people in React land have complained about not having, basically.
'Cause it's not nice when your browser client crashes, because-- - Yeah, and then, like, your button isn't clicking, and you're like, why is my button clicking? - Yeah, exactly, exactly. - And you go to the dev tools, it's like, oh, there are five errors here, and-- - That solves this issue, right? - Okay. - Well, it solves it in the sense that you can write logic to work around it. - Sure, yeah, it can help you solve it. - Yes. (laughs) All right, cool, should we head into picks?
- Yeah, let's do it. - Yeah, do you have one? - Yes, I actually was thinking about this before, and there's this book called Crafting Interpreters by Robert something, he works at Google, he's on the Dartlang team. The book is about writing your own scripting language, and it brings you, it goes through the whole process, not once, but twice.
You actually write it first in Java, and so you have your lexer, and you take this, you have a string, just your code, and you turn it into lexical tokens, and then you put it into an abstract syntax tree, and then you run it on the JVM. And then the second time you write it, you write it in C, and instead of using an abstract syntax tree, you write it in bytecode, so you have the operands and everything.
And the book is phenomenal, not only because the content is super interesting, but the author, he hand-drew all of the illustrations in the book, and it's beautiful, and he has asides where he's actually kind of a funny person, so the book is like, it's not even one of my favorite tech books, it's one of my favorite books, I feel like, and I gotta read it again. But yeah, I would definitely recommend that. - It sounds very interesting.
Like, I wouldn't even know where to start, like writing my own scripting language. - Neither do I, and he takes you through the whole thing twice, so you can learn about it. Yeah, it's Crafting Interpreters. - Yep, by Robert something. - By Robert something, correct. - I'll put the correct one in the show notes. - All right, you do the, oof, do you pick? - That's a tough one. I think I'm gonna pick New York.
- Okay. - So, since I'm here for the week, and I've been, so this is my second time in New York, and I, well, actually, maybe I should pick New Jersey. - Do it, do it, pick New Jersey. (laughing) - So, last time I was here, I, as often happens when you're in a new place, you're like, you're a bit confused, like, about how things work, you're not used to like, I don't know, how the public transport works. - Yeah, why it's so sticky on the subway floors. - That is also a good question.
So, but this second time around, I feel like I kinda know what's up and how it works. The only thing that's still tripping me up is the tipping situation. - Oh, America is so hard with tipping. - I never know how much to tip, when to tip, when not to tip. So now I'm just defaulting, just click the screen, which I guess is not ideal in the long term. - You know, like when they flip it around and they scare you in the eyes, and it's like, do you wanna tip 35%?
- Yeah, I had it at like a grocery store, and I'm like, am I supposed to tip there? I don't know. - At a grocery store? - Yeah, like one of those like small bodega style-- - Oh, yeah, yeah, yeah. - Yeah, not like Whole Foods or something, or Target. But yeah, so I'm gonna pick New York, go here, it's a fun city, it's expensive, but it's nice, it's nice. You have to do it at least once, I feel like. All right, I think that's it for us. Thank you for joining me for the interview.
Yeah, so where can people reach out to you? You mentioned before that you're not on social media. - I'm not on social media, so actually, I'm kind of old school here. You can reach me by email. - Email, all right. - And if you, I do contract work here with SpeltKit, so if you're looking for a small developer, you can hit me up. My public email is [email protected]. - All right. - And no, use good old-fashioned subject, work opportunity, or something, so that it doesn't go to my spam folder.
- Yeah, that makes sense. - Yeah, and I'm Timothy Cohen on GitHub. I'll under case no spaces, and yeah. - Cool, all right. Thank you again for joining me. And to all the listeners, we will, you will hear from us next week again. Bye. - Bye. - Hey, it's Kev here. If you like the show, please drop a review on your favorite podcast player. It would help out a lot, thanks.