Unpack the Stack w/ Brittney Postma

[Music] thank you [Music] hello what is up good I'm Jamin over here that was amazing music I love it it's kind of fun right and it's actually free to use so I found this on like the YouTube Studios like yes I found some wrong that's awesome that's really good music for free you know what I just realized I think I set the schedule to all my posts on social about this stream to 6 PM my time rather than three oh it's always something with these dreams things right but let me use this card just in general time is hard just like words are hard right so give me one minute I'm gonna do it so while I do this silly thing why don't you introduce yourself for a second okay so I Am Britney postma I'm a developer experience engineer ing internet netlify I kind of do way too many things I am co-host of spelled radio remotely interesting and the coding cat Dev podcast I create content with codingcat.dev and um kind of do all the things I'm a cell Ambassador uh co-founder of the stealth sirens yeah just wow that just keeps on going I love it and I have three kids so you know just add on to it with like life stuff but it's crazy I just have to do the tweet and then we're good to go perfect I did see one come through I got the retweet out on it so oh awesome some of them are going off I know all the pings and all the social posts this is so much like pre-prep and planning I don't think a lot of people realize like how much goes into just one little stream I thought you just press go live but you've got to do all the things there's all the things and then we try to automate it and I did and then just get the time wrong anyways so we are back with something we like to call this stream is called unpack the stack and when we always invite someone to kind of just unpack something they've built or that they love and we can go kind of nitty-gritty details all the things so what I want to do today however is start with something super interesting before we dive in and unpack some stuff right so what I actually want to talk about is the gem stack survey because that was so much fun when we started on gems.com and it was kind of I won't say polarizing but data speaks right it's really interesting to see data definitely speaks and that was an awesome conference and said we didn't get to see you there but I know you were there you were there and Alex did a great job of like bringing your talk to it but yeah the jamesack survey was just packed full of lots of results so I'm excited to talk about them exactly so um let's have a look at I just grabbed a few highlights for us to discuss so this one is amazing 55 of developers would rather quit than work in person again right and so for me this is so true like I made an actual decision made covet to go to the countryside and work from home that's just I I we wanted that for a while but this was the moment how's that for you because you were from home as well right I I do work from home and I honestly don't even think I could work at an office just like I said with three kids having to get them to different things like doctor's appointments to school to school events those kinds of things I needed a flexible schedule I would not be able to have a job if I wasn't able to work remotely there you go and it seems to be working out pretty well companies are adapting quickly um to how that will work like for example where I work at uniform we started during covet so we didn't even have to think about getting an office yeah we only did that later where we wanted to have some hubs for people to if they want to get together they could and absolutely it makes you people first almost for me that feels really good yeah and now if I started with that too they started with that remote first philosophy and it was before covid but they did start with that as like a foundational point of being remote first and I think some of these smaller companies in the tech industry are actually going to become influencers for those larger ones like apple and Twitter and the people that are bringing people back to the office hopefully we'll see that this is working and start adapting it exactly um do you think it will ever turn back to the way it was or are we are we all doing it like this now that's yeah I've been doing it for two and a half three years almost now so it's just it's we've adapted I think I don't want to go back to an office but I kind of miss it sometimes and luckily next week I'll be in Berlin with my colleagues at our office and I'm really excited about it so sometimes we do it like a planning week or something yes and we've had a couple of like all hands in so nice to like get in person and see your team and there is some of that that you do Miss in this remote culture so I think it is important for companies to recognize that that you do need those times and to schedule for those times together but um yeah yeah but it's it's I think it's for the better and so this is one that's really good for netlify which is 70 of developers are actually using serverless I know I was and I mean this is the jamestack survey so you're using the jam stack really if you're doing this survey but I mean 70 of developers using serverless technology and I'm hoping that next year we're going to have 70 using the edge so it's going to be like yeah I'm just I'm so excited for where this technology is going I think that it's great and really ready for all of this to take off so yeah and I've seen projects where they like rely on it like they have SSR related things going through serverless functions to render pages and it just works because it scales so easily right and if you have enough visitors it doesn't go to sleep it scales easily and I feel like as a more of a front-end developer it enables me to do some of those more full stack things without having to have a dedicated server and maintain it myself and do all the things that I don't know how to do and just do it with my JavaScript knowledge which is amazing it's crazy good because I'm old enough to have had have done that myself we had customers with like their servers in the basement kind of thing where you have to Tool everything up and figure out this the versions and if they Clash or not all the crazy things and suddenly there's I don't even think about it anymore so very nice and also what's very interesting is I just build a next three project and the whole next Nitro server runs in a serverless function and in there it makes static Pages or SSR Pages or whatever and so that changed the whole game for me because I can suddenly do SSR when I want statically rendered when I want but it actually all runs inside the serverless function that stays awake that is so different it's crazy my colleague Salma did a talk more serverless was the name of the conference and she had a picture of an old server room and it was just like wires and boxes everywhere it exists somewhere I guess but we don't have to worry about it anymore yeah exactly um exactly this one is huge as well it's almost 50 percent of people are actually using next GS and 71 use react so is in your opinion has that grown recently or was it always like that Ah that's a good question and I'm not sure that I know I haven't been like keeping track of the next Js over the last few years I know that it is Big it's big in the industry and yeah it's Gatsby and next we're on this like Collision Course kind of for a while and then as soon as SSR and nexjs supported SSG too yeah it started like taking off and at that point I think that it's just become kind of the de facto react framework but I am excited for things like remix coming out that are kind of pushing that a little bit so exactly I'm I'm interested in all these server components and stuff and for example I used react when the first version came out and this is a long time ago and back then I only used like Dom related stuff not really jQuery but vanilla and so it was a quite a strange approach to me so I never used it again and then I actually properly learned it through through nextges because it makes it so simple you install it everything is there you just have to learn the basics without having to Tool it up and so yeah you just have to learn react which is kind of the barrier to entry clearly but it's not that hard anymore no it is if you're used to other things you have to get you know it's a bit of an adjustment but it's still it's pretty great and they have so many smart defaults like for images and script loading and SSR stuff so I can't even remember how much built in now yeah exactly I'm quite interested to see that because we're going to talk about svelt Kit after how much that has built in or what kind of a different approach they have to things um and now this one is a bit more controversial about how few GS was actually mentioned to be in the danger zone of usage of how often it's used on Project I think that was it and then Avenue had a pretty big Twitter threat on how we commented on that and so this is how data is sometimes complicated because in that graph and please correct me if I'm wrong um if anyone from Netflix watching or you've written you might also know it's like they were looking at a growth factor right if it's if it's under one you're decreasing like jQuery was 0.3 so they were looking from the prior year to this year and to see if it was growing at the same rate of speed or higher than it was the previous year and based on the people that took the survey which as Evan pointed out in the Tweet thread if you go check that out it's uh 65 6544 why are like thousands so hard to say yeah yeah always six thousand let's write it in French that's gonna be fun took the survey but the key point of Evan's point is that it's a heavy Geo basis so I mean we're largely located in the US and there's some around the world but I think there is a big view ecosystem in China where we're not able to access some of that data that we want to have but that's a very good point and I don't the danger zone is like kind of controversial wording but it was just attractive because people can interpret what danger zone means exactly when I saw that first I didn't really dive into these numbers because it's such a good presentation it was so Laurie did an amazing job and I look at that it's like oh boy right and probably everybody did that but in the end it's just semantics because few were still on one they're still growing they're just not growing as fast as let's say react or what they did last year exactly yeah yeah he also made the point that some of the other Frameworks did drop in satisfaction rating and like other things too so like you don't see especially not seeing like the year before's data up against it it's just it's kind of a point that you pull out of context a little yeah sometimes it's hard but it's it's also interesting to see how the few communities reacting to things because next has been big right next is the meta framework that you can use few with just like next and react and next took a long time to actually release its new stuff few three took a while and so they seem to be coupled together but then if next is not stable well it is now but for a long time it wasn't how often are you going to use the new few in a project if the thing you have to use it with is not ready so yeah it's it's really hard to judge these things because when Evan created feedjs suddenly few 3 can be used anywhere because all these bunders like svelt kit but also things like Astro you can just plug in few three automatically because feet will just take care of it so maybe things will change is like the ecosystem now it's solid it's quick it's yeah it's crazy it's Astro it's not turbo pack though but maybe that's for a whole different stream that is another stream exactly um this one personally for me is very interesting this is like the CMS space is kind of changing because you saw up like the last few years WordPress is basically it used to be like 40 of the internet or something I know all the developers love to use it and now for example notion came up really high this is something that the first time I saw this data I was like what is notion doing in there they just released their API it's still like kind of a beta product and I asked Lori specifically about this question and he's like this is when we have to do a follow-up on like we have to go back and say are you actually using notion as a CMS or did you just see I'm using notion and answer yes to this question yeah it's like hey it has an API I've queried it once so it's a CMS like what does that mean exactly on codingcat we are using notion as a CMS we do all of our planning for our podcasts and things in notion so it made sense for us to pull that directly onto the page we're moving to GitHub issues though notion CMS is not ready our API is not a CMS maybe that's why exactly yeah it's not a CMS well structured data is hard right and like this is a quick thing I'd love to talk about also in the context of uniform where I work now that whole Space is starting to change a bit because it's the CMS the center of the universe or maybe it shouldn't be maybe it should just be part of your universe that's connected elsewhere yeah and so the fact that the CMS space is in transition and then other systems like storyblock with its amazing um you know creative editing or contentful and strappy they're kind of playing against WordPress but I'm seeing in a few years that cmss might be more simple and do all the domain data all the data that they have to care about that can go to all your different channels you know like your phone and stuff that stays there and then there's another place where you create how your page is composed I think that goes into stealth kit where does that come from so it's a very interesting place sorry you were saying something no I think that's great for uniform because that allows you to actually compose your page in one place and the CMS at this point almost feels like a separate thing and there's so many of them in that space and not one of them sanity is kind of got a little bit of a lead but there's not one like really pulling away and so having that data somewhere and then having where you can pull in things like your database and your other layers that you need into your page like uniform and being able to compose that together is a great yeah it makes the jam stack feel truly composable yeah right you can choose whatever you want and I've seen lots of projects where when they're a bit more mature right so they use strappy for one thing and contentful for another thing because their teams work best in these systems and so that's that's not an issue at all if you have something like uniform because you just grab some stuff from here and some from there there's no like glue that coats everything together which makes it easier I feel amazing to me it still kind of like breaks my brain a little bit to think of like how you can get your data from all these different places and then uniform just kind of magically it's not that magical but we're using lots of netlify edge but we will come out with that soon with some new stuff it's going to blow your mind I cannot talk about it though but soon I'll show you after a little bit anyways let's continue because so we're gonna have to oh yeah this is my last slide so get away from it what I want now is now that we talked all about that stuff I want to actually unpack something so what we can do is make a little Bridge from that survey into what we're talking about because the survey said that I think svelt kit and feet were like the most positively Feud items of all of it right yeah it's kind of an interesting stat too I wish we had that slide to look at I should have prepared that but um leaked and spelled kit were kind of in the in the corner and it was like the framework one right and V you don't really think of as a framework but it's a part of all these Frameworks and it's really just kind of is yes I'll just have a look if I can find that slide but um there's too many options there's lots of options it's fine but yeah they were up in the far right corner which was like high satisfaction rating and high grocery exactly right so both spell kit and the were there and yeah today we're going to unpack a little bit about spell kit I guess oh I'm so excited about that because it uses feet but it also has this much more native JavaScript approach to things it's much more web development rather than app development and this is my background and I've built things in svelt kit just to try it out and it was so easy with the suspense API and it's all template driven which is basically my ball game so I'm excited for you to show me more it is I think especially for you coming from view which is very similar to how it's template driven and more like HTML focused and you can actually just write vanilla HTML in spell and it works like that so yeah if you want to go ahead and share my screen oh yeah okay so what did you build here so I've just built some uh spell Kit app with a few different examples of things that you can do and so I started with the demo app if you run npm create spelled in your terminal it will create with the CLI it will generate a tool that you will be able to say would you like me to walk through any of this by the way like actually in the terminal well let's let's chat about it because like people tend to kind of get these like getting started stuff what I'm excited about unpacking is once you have that running exactly like how it actually works like if you're gonna you're gonna click that plus I'm sure right so it's gonna count yes so that's somehow reactive how close is that to the other things and what does the kit in swelt kit do is it SSR like let's explore these things okay so yes so spell uh spell care is the meta framework for spelled which is a component framework and felt itself is just CSR just client-side rendered but if you add spell kit on top of it you open up the possibilities with like static generation server-side rendering other hybrid things based on the route that you're on and you can even use net edge with like netlify Edge all right other Edge platforms um so using this is so these edge things would actually render spelled in SSR runtime yes so if you run after netlifi so spell kit uses to be able to adapt to the platform the dino stuff and all that yeah yeah so if you're using an adapter h a it's a fake to the platform several adapters that you can do and then there's a static adapter and so each adapter is going to adapt the code for spell to the platform that you're running on so in a netify when we install that under the hood any SSR route is going to render as serverless functions oh really if you set Edge to true in your config in spell kit then you will get um The Edge platform which is running on Dino so it flips that switch from serverless to the edge with that edge config option on adapter netlify and it's so easy nowadays it's crazy it is like yeah so just I mean looking at the code for that too is let me pull this over here and we'll look in this felt config file and we installed the adapter netlify and then you set Edge to True down here that's it done that's it and you're done so it kind of feels like there's no config ethos that most of those systems start to use now right very little configuration for that and then also spell kit allows you with the edge we'll we'll get to that in a minute let me let me do this counter component here so obviously like you said I'm going to click this button and it's just super reactive like exactly so quickly before you dive into how this works like how was svelt actually conceived because at the time because it was done by Rich when he worked at New York Times right absolutely yeah so why didn't he use let's say few because that also works in the browser rather similarly what's the difference um so let's see so actually Roots may not have even been at the New York Times he might have been at the um he was at another place before that when he actually officially started on spell the spell didn't really take off until it hit spell three and that was when he was working at the New York Times and they were using it to build those high-powered Graphics that they needed for like the kovitz I'd be elections and stuff right the elections the Olympics those kinds of things he was needing it to build really fast reactive models and I don't know enough about you really to answer your question about how they do that differently do you know like how you reacts in the Dom at that time like the difference between few two and few three is that in few three they're using proxies which I imagine um svelt also uses and that makes it extremely fast and before that it was some sort of Shadow Dom fake Dom kind of memory management kind of thing with a tree when something changes let's not re-render everything but only a little part and then put it back as a as a fragment like the complex stuff that react was also doing exactly so virtual Dom is some that is popularized by react and I know you use it for a while I don't think like you said view three does not use that now well maybe part of it I I don't know enough but it's the reactivity that they have now is extremely fast and I imagine svelt is the same yeah so spelled does not use a virtual Dom at all it compiles your code so that is the big is that spell is a compiler so it requires a build step but that compiler compiles down to really efficient vanilla HTML CSS and JavaScript so you're actually updating the specific Dom nodes rather than diffing between two different virtual Dom in the real Dom okay so it it literally just compiles down to a little inline script that you put down and that's what it does so that's ridiculously fast because it it does Less on runtime basically one time and it allows you to provide more out of the box so that you can have things like animations included because if you don't use them they just compile away we also have accessibility warnings um what's the other thing I was going to say CSS if it has scope CSS by default and then if you don't use a CSS class it gets purged automatically because it knows that you're not that is cool yeah because it's literally parsing the thing so if it's not used why put it in right exactly yeah so they're not really like single page app kind of things it's more like In-Place agnostic it does a thing does that make sense not in place agnostic well what I mean by it's it's kind of like you can drop a spelled component that becomes agnostic of the rest of the application it's just a thing you put there and it is spelled can actually compile to things like web components so you can exactly in other Frameworks by using the compiler itself um I'm excited by that have you heard of mitosis from Builder um I've heard of it I've never used it um I haven't used it either but it was built on a jsx language so you could write jsx and then compile out to other ones but then someone built a uh hi Stephen sorry to interrupt it let's go no worries um so someone from the community built a spelltosis version of it so you can actually write spelled and then go to other things and so that is now actually implemented inside of mitosis itself so you can either write jsx or spelled and compile out to any other language which I think that is very interesting it's a way to start using spelled even if you uh don't if you're in another land somewhere you can still use it because it's so agnostic so one of the things with this counter component that we noticed first off is we don't have any use State there's no use effects we just declare a variable so equal to zero and then we have these little reactive statements so the dollar sign I think rich is obsessed with the dollar sign by the way so maybe because dollars pay for the rent I think it's actually because there's a dollar sign in JavaScript that they hide JavaScript element that's rarely used and then they're able to hijack it for their needs okay just like jQuery used to do remember yes so it feels a little bit like that but the dollar sign colon makes a statement reactive so you can depend on another thing like count here and each time count updates it's going to rerun this statement so this almost feels like in react like a set state for that count but then easy basically I'm trying to like this is what comes with the demo app so I'm actually so you don't even really need like we could put this count down here yeah and it will probably just show you a number right we would just show the number but if you update it this actually makes it rerun that so that it gets updated so this is a reactive property that let count becomes reactive because of that dollar sign no so this is actually just the variable is reactive by Nature this reactive statement means that because it's dependent on count each time count updates that this display account dot set is on this store so this and I think that dot set might even come from a proxy I'm thinking that might be that where in few GS they actually abstracted that away the only reason that you need this reactive statement is because of the spring animation okay I'm saying stupid things that set comes from the spring option yeah so this spring option is a store which is denoted by this dollar sign here is how I can tell that it's a store and this is subscribing to that store and then this dot set is a method that comes from the store and so every time count changes it's updating re-running the store to do the spring animation so we can see like there's a slight like bounce yeah and so how's that animation done it's just some CSS I imagine well it's just it comes from spell out of the box you can look at it and they're all built on CSS oh that's very cool yeah they just gave you an index oh here we go I can I imagine this is some sort of CSS thing I don't even know where to look at it at amusing Tailwind so I've got like a thousand classes oh yeah there you go that's the drawback I don't know where it's at but all of the the CSS animations out of the box you should and edit them to your needs so you can get a function and take the time and then Loop over the animation and like change it to your needs so you can mix a lot of animations you can edit them you can like do whatever you want with them and so that means that svelt or sveld kit I don't know one of the two here has some sort of opinion and just added some animations for you it has a access to those out of the box and those are so the spring is one type of the animation like the easing libraries um there's animations out of the box and then there's transitions out of the box so you get a few different ways like fade in slide in those kinds of things just come out of the box for you that's very nice because things like few or react don't do that so this is like a little extra for developers in a front-end setting that makes it super easy it is and this is just felt you said spell or spell kit so this is just the spell part this is the compiler itself that is doing that so we haven't even gotten to the spelled kit part yet so let's see we've got one of the things that spell kit provides for you out of the box is this routing system so I'm gonna make this just a little smaller and pull this sidebar out here we can look we've got this SRC directory is very popular in the web development space this is your Source folder where everything lives we've got a lib folder which is where any of your library code lives components images anything like that that you want to put in your library one of the other things that's felt tip provides for you is a package command so if you want to create an npm package put everything in that lib folder and run spell kit package and it will package all of it up do the types for you and you can publish to npm oh boy there's so many extra little things in there that right now if I would build wanted to build an npm package I have to think hard you figured it out and this makes it much easier to like create packages so people talk a lot about the spell ecosystem being really small a lot of that is like we don't need a lot of extra libraries because it's so close to vanilla JavaScript that we can really just write felt and JavaScript and use that for ourselves but there are lots of little packages created through this method that I'm just talking about very cool letting you do other things with spell and adding those packages and then the other thing that we get with spell kit is a router so it's going to provide you that client-side routing the navigation that you get based on routes and this was just recently maybe two months ago updated you probably heard a lot of noise about how spell kit had this big migration yeah exactly because I used it before then I looked at my stuff and it's like oh it's really quite different from what I see now and that would be this update I think it is so a lot of the content you see out there is going to be probably on this older layout system where our older route space system where it was a file based router and you had index.spel files we had double underscores for private files that were not routes and they did away with all of it they said this was from sapper which was the meta framework before spell kit okay and we made some misjudgments in the way that we were building and we wanted to go forward before 1.0 was felt kit and actually make some API changes that we think are going to make it a better framework okay and so they just they rip the Band-Aid off and they're like but they did provide a migration command so there's like a really simple migration command that you can run that tries to rename all of your routes for you and then you have to go through and edit some of the data so what that does in the routes folder now is that it's directory based so in the root of your routes folder you will see these plus prefixes in front of things those mean that they are a route they actually get caught by the router and created as a path on your web page okay you're just going to do with layout then for example so the layout will go to every single route so oh yes directories this layout hits every single one of them it just wraps around with this sloth kind of approach okay exactly so we have a slot here and that is where any children of this file go so this plus page dot spelled file and any plus page.s felt file in any directory is going to be inside of this slot because it's in the layout makes sense you can escape from a parent layout but that gets more into like the advanced layouts and I still that is a little complicated even for me you have to use like an at symbol and group layouts and it's a little oh yeah yeah yeah a little strange there's like a parenthesis pretty nicely but that's that takes some time I really like the way that remix does nested layouts and I kind of I kind of miss it a little bit to be honest because I mean this is a little difficult to look at if I open some of these up you can see how many plus page dot spells I have here and it's oh yeah that's a little challenging where you're at but if you open an another one one thing that you can do in vs code is C ever open the wrong one I have this little thing that says what folder it's in exactly I use that all the time so that's a setting in vs code that you can set so it tells you what directory it's actually coming from so you don't have just a bunch of plus page.stelt files so anyways back to this layout file so this layout file wraps the entire application I have my header imported as a component and that header is just right in the same directory I'm using it one time so I'm able to put it in the routes directory but because it doesn't have that plus page prefix on it it doesn't get caught by the router so this makes sense just gets escaped by the router and gets used inside of the layout file and then we import or use the header component we wrap the main around the slot and that means any of these children and then I just had a small footer that comes with the demo application and so why didn't you put that header and the nav and stuff why didn't you put those in like your lip folder where your components live because I was only using them one time I think this is kind of the reason that they did this change in cell kit is so that if you're only using a component at one time you can put it right by the route that is using it and there's no need to like extract it out so the code is still extracted making the file more readable but it's co-located to the route that it goes with okay that's cool yeah so um and then the plus page.s felt file is going to be your home route of the application inside of that slot that we saw in the layout and the plus page.cell indicates the UI layer so that is going to be anything that you see on the page this is your spell code where you would put any JavaScript HTML markup and styles for that Home Route which is the route that we see the counter on here exactly and what if not a hard questions come but you probably have answers let's say I want to do something SSR or adx goal or whatever here I want to get some data from a CMS in my page that's felt my first home page so you can do that only on your first home page you would do that in an endpoint file which are these plus page and there's several ways that you can do this there's plus page.ts which is going to be a typescript file these run on the server and then hydrate to the client so they're going to run on both there is a DOT server syntax that you can see right yeah I saw that before yeah okay plus page.servertis this only runs on a server so this does not hydrate to the client so if you only wanted something to be on the server you would add that dot server extension to it and then it would only run it on the server there's also a just dot server syntax so you wouldn't do this plus page and that gets ignored by the router but also runs as an endpoint on the server that's cool because that way because what we see all the time is let's say you get rich text from a CMS generally in the API result of a rich text of a CMS it's just Json that you have to convert into an HTML string you don't want to do that on the client because that means you're giving that whole bundle that whole parser to the client which kind of sucks exactly so that you would do understand your data on a server yeah yep and so you can do that in this um I'll show you a more complicated one in just a second here but this is just a way to actually pre-render this route so I'm rendering this on netlify edge I showed you earlier how we had the computer Edge but because I put in this endpoint file export cons pre-render equals true it is going to pre-render this route so this is going to be statically generated at build time and it doesn't have any Dynamic content that needs to change so only this part right here has JavaScript well that's just hydration right so that's fine so but the page itself is pre-rendered there's also a way to do the client-side rendering you can turn that only on in Dev mode so then you would actually have no JavaScript on the page which is what we're going to see in the about and so is it possible to Output anything in svelt kit that has zero JavaScript files yes so the about route we go to do we want to say view page source so there are no scripts here there's no script I can use a script others oh this is so this I did this is me I did this to uh set the theme so of course you're looking at if I'm Dark theme or not yeah yeah this is in my head component but there's no spelled code in this at all because I have this I pulled the wrong thing over this line right here sets client-side rendering only to Dev mode so that we have it in our hot module reloading but when it goes live you do not have that client side render so there's no script tag from spelled and I can show you I added this to my template file we have this app.html that injects all of yours very cool so we used to have to send webkit not webkit sorry uh webpack you had this index file where it would inject back in the day yeah so any of your meta tags your links um really so you can just come in here easy in here so I'm doing my I'm pre-loading my fonts and I am setting my uh Thing by default so I don't have that flash of unstyled content yeah the f o u c sounds really bad if you do that but other than my trip tag that I added there's no other script tag on this about page because it is only clients I'd rendered and we're looking at the live version of this on netlify nice and so what happens when you scale this to a thousand Pages lots of routes are you going to go into all of them and say this is SSR this is not or can you also centrally do that somewhere you can set um so you can do it by the entire application if you wanted so yeah static site you would use adapter static and just render a static site oh of course yes hybrid routing though it really has to be done on a route or a layout basis so you could create a group layout like I was mentioning with the advanced as well and then do a layout.ts file and that would allow you to set for those I think that you can do it in a layout file and that would set for those layouts um to be server-side or static so I guess there are some ways to do it at scale that you would be able to group them together well it's really interesting I'm asking this because you can start to see the differences in approach between these like I'm just because I'm so close to let's say the next Community they also had these similar approaches to things and they solved it in a different way because when you work with nux it's almost like you're you're basically having a living application which means there's some configuration on a central place and that's where that happens that also means there's more black magic it's not bad it's just different and here when you look at this thing it almost feels like it's more just web development so you choose where you do what yourself much more I love that index file where you just whack in some stuff and it just works where in next you can kind of do it but you might want to plug in or you have to write some wrapper around something in here it just and it's just very interesting yeah and when you said that it feels like web development this is one of the core principles of spell kit is that they are built off of web apis so that actually by building cell applications you're going to become a better vanilla web developer too and you're going to be able to use like those mdn docs alongside the spell kit docks to build your applications they provide things like fetch in those endpoint files so that you have fetch in any environment that you're in it doesn't matter if you're a node or Dino or on the client you have access to a fetch API just like the web so they only feel some stuff that might feel different exactly that's what that's what those cookies and headers and all of those things have access in those endpoint files I think you can actually see some of them in our next route here if we go back and look at this fertile app this is another thing that you get out of the box with the um demo application is that it's a Wordle clone built in svelte and you can see that I mean it will work if this is one of my favorite words to use for this because it's got like some of the most used letters in it even though yeah the word means it sounds Irish or something yeah and and I'm not gonna sit here and play this because I would probably lose but I would love to win because this actually so at spelled Summit which was back in September we had a talk on spelled confetti which Peru Vijay who did the Mac OS clone did you see the Big Mac OS it was done in xjs and then he migrated it to spell oh I didn't know that like I've missed a few of those oh that's so cool so for he did that Mac OS actually got him his job at sackbutz and then that he built this felt confetti package and it was two kilobytes of JavaScript I think is all that it takes a package and so rich loved it the talk so much by the time he announced this the next day this fertile clone he had implemented it back into the demo application so nice from day one's talk about salt confetti and then the next day it was like implemented into his talk which I thought that means you can do amazing things with State and remember what stuff is happening and changing it up because Wordle is not a particularly easy thing to implement I guess yeah so I mean there are lots of things at play there so you have to like look at so the page dotsville has a few things in it this is the confetti package that I was just talking about that Peru built and this was implemented in that one day sorry I went back and added it so when you win the game that goes off um this enhances something that comes so you can progressively enhance your forms nice so any form and spelled is just a regular form if I can find it form component or Elemental element and it's got a method of post and then we have this action here and this action looks a little funny for an action because an action usually goes to like an end point right or another URL so this question mark allows it to be progressively enhanced by this inter method and the intro method you can find over in the server side code that's only going to run on the server and we have this actions object that you can create and so you can create different actions that you can run in your form based on which method you're running so the inter method is the one right here that's what happens when the form gets posted yeah and this is like checking for your guests and seeing like what is going on through so each time we're hitting enter on that form it's running that method we also have an update one that's going to be checking every time that you click a key so it's updating the form and then we have a restart why am I not using this yet like when I look at this I'm like like I am old school right I used to do vanilla GS with all those things and we would like build this type of stuff but this is now stealth kit kind of just combines all these things the other day I had to make something with a relatively complicated State and forms with nextges and react the amount of set State and use effects and all the things I had to do and then I couldn't get it done almost this is basically just old school like MVC and it just works it's fair but it's very like web standards based you create an actions object that's got several methods on it that you can run and in your page.selt file you click you run those where you need them so the action on the form is the enter let's find update somewhere in here there's restart on this button oh there you go so it's oh and this is actually a button when you click on it does a form action and so it knows about that somewhere yeah so we can see the button where's the reset button there should be oh I don't know I did some styling to this I wonder if I accidentally hit it fine no it's fine I get the gist um so I do have a question because I'm looking at this stuff okay so this also has a play action like the form action is just a restart and so is that form actually native to svelt or sveld kit probably or did you bind that somehow this is native to spell kit so this form action comes with it comes from that forms or anything it's just um I guess I actually assume that it's probably like a data attribute under the hood because it's a compiler lightly it makes it a data attribute with a with just a click yeah so that form action just comes from spelled that you can put on two things and what was our other method was because that makes it so easy to use and there's our update on another button yeah yeah so you just put that form action on there and then you set it to the method that you want and it will run that when those are clicked so I have one last question because this is a bit self-serving but like at uniform we have this lovely SDK that basically just looks at your uniform composition where you have a whole bunch of components defined and those are just Json objects basically it's like the hero component is Json type hero with a whole bunch of properties that you get from external sources so let's say they are already filled so basically what you have when you query one of these compositions you have a list of components and then you have one master slot in which they all sit and then you have a component that might also have a slot with two components in it and all their props are filled can I now query a composition and then dynamically render the components in stealth kit or in spelled because what I would love to do for example or maybe don't let's let's like take slots out of the equation for a second let's say I see component and then inserts an object and it says type is hero and then title is blah blah blah can I now actually look at okay this is type hero when I see the type hero let me just dynamically render a component that I have somewhere that is called hero in svelt because if you can dynamically render components like you can do with few and react and stuff yeah I can make an SDK for uniform like very fast and I would be very excited about that let me show you my blog route yeah because what could be quite interesting is if you have like just something you call component and then this exactly this okay perfect yep so um I I am pulling data from a post directory so I've got two posts on stuff and svx which is a um MDX alternative it's called MD specs sdex and this is our MDX alternative for silt and so that allows you to actually use components in your markdown files so in that what file was I in the page.s felt file you can pull that data through in the typescript file I have a get post and oh I'm doing it in the parent um I get post function that runs and finds the post that I need for each page and then it's returning that component data back to this and I'm getting it from that parent that's what this was doing so it's pulling that parent from a layout row and then returning this metadata and this component and then the component I set equal to this on the spelled component and can you give me chapter props also to that svelt component I'm sorry let's say you have like for that component itself it might have title and maybe some Boolean values or whatever how do you send these props to it you get them wherever you need them so in this one I'm getting all this data from this layout typescript file so here I'm running this function that's actually finding things but if you needed more data you would just do it in these endpoint files and send it back so emergency and so how is it sent back exactly so right now you do posts and posts and then where you load that like this component what what does that component thing um have what what is in there so all the data is in there as well actually the root route of the blog is just a redirect I don't even have a felt file in that at all so I have a plus page shot server that throws a reader oh yeah nice to my first blog post I don't even have a Blog row I just wanted to avoid that for this I didn't no need two pages there was no need so I'm redirecting but this layout is returning all of this data to every single route in this directory so this blog directory this slug is a dynamic route okay so we still have like the brackets and stuff yeah okay cool you still have to have the bracket on the directory name so it's a little different than it used to be with the slug on the file name well this follows how the other meta Frameworks do it nowadays so that makes sense the parent is something that's felt kit provides and I'm pulling that data from the layout and I'm awaiting that data and then I'm returning the data that I just need for this component so I actually have up here in the layout I'm not using this post right here at all right now okay because you just do it on the server end of things yeah and so I returned it but I didn't do anything with it so I didn't use it so uh I'm using the post data data and then returning that to the front end so that I can show the post which here whatever oh and then it's yeah exactly I love this because what me what makes this easier is the fact that you have this server.ts files or just the TS files so the parser or whatever renders your website knows exactly where to look because when you do this let's say in few when you have a dot view file or an astro with an Astro File there's one part it has to work on SSR and not SSR and there's Parts client in all in one file yeah it makes it a little bit more complicated this is just saying you know immediately what you're doing when when you look at this graph of code right that was one of the reasons for that change is that so you can actually look at the file and know explicitly what that file is doing where it's running and how it's working um they had the load component before that was actually running inside of the UI file and now that runs in that endpoint file so you know that if it's not 8.0 profile that it's going to hydrate to the client and so with this in mind if I wanted to make let's say an RSS feed or maybe a sitemap XML file it's literally just one of these server routes that outputs something and then you just make that XML or something and it's that simple yeah it is nice I wanted to show The Edge route real quick before he goes yeah please do please do yes it's where I am located at uh Holland in the United States and Holland Michigan I thought I had the country code in there but I must have done something weird to that and then this is a localized time stamp so wherever you are in the world if you go to spell kit Dash examples.netlify.apped Edge you should see your local time and I will show you that code how that is running I'm just typing that in right now okay um what was the URL again spell kit Dash examples .net left right yeah dot app slash let me see what I see here oh for me it says oh that's very interesting it shows me Holland France I'm running on a 4G box So 4G is all over the place around here so it doesn't give the city this is the provides if your eyes I abide and this is my default so it's going to default that I should probably do it as something other than my city maybe nowhere nowhere nowhere we'll change that in the next iteration of it but um that is it's so it's based on your ISP and what they release so if you don't have a city that's why it's saying Holland for years because I do have that yeah that makes sense which is oh wait let me check the time yeah exactly Edge yeah the time is correct okay perfect so it's localized time stamps for wherever you are in the world and this is running on netlify edge which is Dino code but spell kit provides that Dino code through the event.platform object so you can run event.platform and get access to the dino context right in your JavaScript or typescript file so I don't have to type any Dino in here to actually get all of this data back and you get access to all of your geolocation your time we added the time zone to it now so you don't even need any external apis to get your time zone oh yeah exactly very cool cookies like ways to personalize and I know we've talked about personalization a lot on there exactly a lot more fun cats so I'm just fetching from the cats as a service API nice so this is just in your service so is this SSR or is this client this is I this is SSR oh no I just I I wonder if I can't SSR that what's the likely so the only thing you'd have to do is just add dot server right yep dot server and then uh I will need to make sure I'm running this locally because I don't have this this is the live version oh yeah exactly and then cats it works on the server so I just needed to rename it isn't that insane I love this so it will allow me that fetch object just straight off of the parameters and it provides that and adapts to the dino platform that I'm running on a netlify and so if you're running this locally with netlip so you probably just did Natalie fight Dev or something instead also running like Dino in some sort of wrapper or how does that work because it it does locally right yeah so that's how you test locally is running netlify Dev with the CLI and it runs the platform I don't know how any of that works under the hood oh it might be some virtualized awesomeness locally yeah adapter is what actually like adapts that code so I wonder if it's the netlify adapter from silt kit that actually adapts the dino stuff back to because those polyfills and things that it does we don't need to know all the black magic yeah I know it's bright magic but I for I didn't even show my like I have themes built into this oh and this is a really cool package so this doesn't come out of the box why is that not working with a spell but this is a 3D package that you can install called throat and this is like 3GS style it is a spelled Library built on 3js wow this is not so freaking cool this is nuts and so what what I kind of started thinking of is sweld is just another iteration of a few or a jQuery just kind of a library with tools use it you run but actually it's more of a framework on its own basically it gives you all this extra stuff if you choose and then all this quality of life things that almost feel more like instvelt and svelt kit it's much closer than few and next are for example exactly very interesting it gives you all of those things a box and then if you don't need them they compile away but you have access to them and you have access to good defaults that the maintainer team is making sure are up to the standards of spell kit before they implement it too so exactly but it seems like it's going fast lots of stuff is happening right there are lots of changes happening and lots of things are like being implemented into it but they're doing an amazing job I mean rich and Simon both working at brucelle on it full-time has really helped speed up I mean being paid to actually work on the framework is really it's crazy good I love that really great and yes so it has been a good change to have actually dedicated people being paid to work on the framework and allowing these things to be implemented I have one more question absolutely so um when I add let's say some sort of client stuff to one of those routes can it be only lazy hydrating one part of my page so it's a tiny bundle or do I always have a bundle per route are you talking about Islands architecture potentially or something whatever you want to call it so there's no partial hydration built into cell kit this time that has been discussed and talked about it but they do not intend on implementing it right now well I'm not even sure if it's the way to go because I've recently seen that in Astro for example where I have heard Rich say that like it's just not something that they're interested in adding to it right now that it doesn't make sense for the way it's built no and I'm also thinking if you have a HTTP 2 with Hyper flexing I think it's gold with like you can load lots of files and it's still relatively fast yeah yeah and so like I've seen it with Astro I'm like I'm learning it a bit more to see what these islands do and it still loads quite a bit of kitchen sink JavaScript to actually make an island on its own work and then its own code still comes in and that might use react so it's still quite a big bundle for the little Island right yeah exactly so I mean Astro is kind of blowing my mind with how many things that you can do in it but there was a benchmark recently where I mean sometimes that Iowans architecture it needs to be architected right on your end so you as we always person building the application spell kit does the opposite approach where it gives you good defaults to help you do the right thing by default first Astro is more of like a build your own thing approach so you have to like structure your code in the right way to actually make your framework more performant but spell kit does it in a way that tries to help you out of the box I'm more intrigued than I've ever been so I just need to spend some time so I'm always looking to renew my personal side because I learn new things while I do that so you've seen one time that I did that when I worked on my new when I was learning react basically yes maybe for 2023 it should be swelkit then but I might have lots of questions so um to finish this up what's the best place to go if I have these questions so these questions I mean our docs are amazing so go to kit.felt.dash to look at the docs and our Discord is where you're going to want to go to ask questions it is spelled.dev chat to join the Discord and we have a stealth Sirens Channel which is the group that I run for women non-binary people and then there's a community chat and then there's a help forums Channel and Discord that you can select your spell stealthcare ecosystem questions and we get help as fast as possible in the little Forum setting there's also there's active community members on Twitter Reddit all the other platforms available so if you tag Rich too I hear that he's pretty fast if you saw Adam rackus he said that he texted rich on a train about above and he had fixed it in like 10 minutes yes the place where that is possible I'm really excited about this thank you for opening all this up and we just at the end of the show our buddy Seth is joining us so nice to see you set but we're kind of wrapping up here but still thank you for joining us thank you for joining me I know we're a little early um generally we are about an hour later so um I have had a crazy busy schedule and we tried to do this a couple weeks ago and we had to reschedule once just it's nice like was it was busy for everybody it's normal you even work there so I imagine that so um I really want to thank you for watching and if um anybody's interested in all that stuff that I said about uniform you can actually join us on Discord um so you can go here and do that but um what where can people find you Brittany me I am at Brittany postmas so the spelling below you pretty much everywhere so GitHub uh Twitter and this is available on GitHub too everything that I showed today is at Scout kit examples on my GitHub at Britney postma so you can find me anywhere with that great um thank you so much and it seems like my internet is hanging for just a moment but that's because we're finishing up so it's perfect um thank you so much um it was a great time and I'm gonna be starting my new swell kit project tonight I think I'm excited so let me know if you have questions oh I will don't worry anyways um cheers everybody thank you for watching and um see you next time bye