---
title: "Unpack the Stack w/ Daniel Roe"
description: "Kicking off our first Unpack the Stack livestream w/ Daniel Roe. In these live streams we unpack a stack. As in, a technical person explains how they built something or we talk about something technical that excites them. Daniel is a core team member of Nuxt - previously a CTO of a SaaS startup."
date: "2022-10-01T04:19:55.000Z"
url: "https://timbenniks.dev/videos/live-uniform/008-1h0jr_vbz7m"
youtube_url: "https://www.youtube.com/watch?v=1h0jR_vBZ7M"
playlist: "live-uniform"
duration: "1:15:04"
image: "https://img.youtube.com/vi/1h0jR_vBZ7M/hqdefault.jpg"
tags: ["composable-architecture", "performance", "cloud-infra", "frontend", "product-strategy"]
---

# Unpack the Stack w/ Daniel Roe

Kicking off our first Unpack the Stack livestream w/ Daniel Roe. In these live streams we unpack a stack. As in, a technical person explains how they built something or we talk about something technical that excites them. Daniel is a core team member of Nuxt - previously a CTO of a SaaS startup.

Watch on YouTube: https://www.youtube.com/watch?v=1h0jR_vBZ7M

## Transcript

[Music] thank you [Music] all right we are live and I had so much fun making that intro this morning because why not put some rock and roll so welcome to unpack the stack and with me I have Daniel dude how are you hey Tim it's uh it's a pleasure to be here I've got to say it is cold and rainy it's a hard Autumn um already where we're around so I'm I'm glad to be here with that with a mug of tea and a chance to unpack and packs exactly I'm actually here wait I need to remove this for a sec I'm here with some gem because I just recorded a jam Stack video so no excuse me somehow there's some Jam involved and for us I think there was 17 or 18 millimeters of rain yesterday alone so yeah fall has started I guess certainly falling from the sky that's for sure yep so um before we dive into this and unpack a lovely stack that you are coming up with we tend to just first maybe you can explain who you are where you're from what you do and then we dive into some industry news and then off to the races whatever we want to discuss how about that maybe you start first okay that sounds great so I'm I'm Daniel uh Daniel Genero I'm on the next team so I get to do lots of really cool things around uh around web Frameworks next is a framework for building web apps uh it's designed to be Progressive so you can start with with very little configuration not no configuration you can build an app based in View and then you can do whatever you want on top of that we priorities user interface user experience from a Dev point of view and best practices built in and I can say lots of lots of other things we're currently building nux 3 which is um very very close to uh being being released as a stable version and there's some some great fun things in there I'd love to show you oh yeah I can't wait and like you said you can do a lot of things with next I certainly did I did lots of things with next from huge Enterprise builds to Tiny projects and it just remains working so that's very very cool but more on that later let's let's talk a little bit about some of our industry news and um Daniel feel free if you have anything you want to you know chime in let's do that so first this one was fun like I didn't feel like hey we're just gonna look at like next versus nux and stuff let's just do some proper front-end things and so this one is that I think it's a Google release but I'm not sure if it's Google that did this but we have something called color fonts with the color V1 API and if you look at that URL and you go there you see so much fun things or so many fun things with like different gradients that you can give on letters and it's gonna get crazy I'm almost worried we're gonna get flash like animations with these things but I think I guess that that's a fun one and so that that kind of um it's enjoyful enjoyable and then the next one this is actually from Smashing Magazine um from Juan Diego and this is an article I saw in so many newsletters so I thought you know we're probably gonna have to put that in because especially when you work with bwas and you're gonna kind of mimic you know native apps this is a very interesting one because there are so many JavaScript apis out there that we don't really know but you can kind of just use them and the one that stood out to me is actually when you have your phone and it can detect how light it is outside and if it's dark it can switch your phone to dark mode or whatever and there's a bunch of other ones so Daniel have you used any of these before I've used the web sharing API that's awesome that's I think that's pretty straightforward I mean I guess that they're all surprisingly straightforward internationalization API as well I think is um pretty good and the page visibility API but I've not tried the broadcast channel no same here and I bet there are more interesting ones on that I love the idea of the sort of light detection dark light detection based on it's cool right and they have other things as well now where you can select a contact from your contacts lists on your phone but it's really protected so you can actually say you want to share only the name and the email and you can only select one and stuff like that and so they're kind of working on all these new things to kind of make the web more app-like I guess which is pretty cool I mean I I absolutely love it that kind of granular control giving the control back to the user um but exposing just what what the user means to expose to that yes is great and there's also something I saw on a conference I spoke at the other day where you have a lot of inbound things like when you have a URL with a specific um protocol not HTTP but maybe Twitter or something or whatever you come up with maybe Daniel and then that could and then open your web app right there's all these extra things so these apis are are really really fun um then we have the web Almanac 2022 so web Almanac is by HTTP archives and it's a huge bit of research looking at like all the stats they get from the archive but also the trends in the community and it was so big I scrolled through it and then it was so deep I almost just stopped it's like I could use a week but I want to know because there's one chapter on performance and it's still grayed out you're not able to see it yet because I think they're still working on it So Daniel what do you think are all the websites fast by now or is it still just the the small selection of awesome ones well I think I mean there's there's a couple of weird things and that is that the space in which you and I are working Tim is actually really small that's true it's like the vast bulk of the web is even still running on WordPress if you're looking at number of sites for example true and that's not I'm not saying there's something negative about WordPress by the way but you know it's it's not necessarily where you think if you happen to be working in the JavaScript ecosystem and you're focusing on um the shiny new framework exactly so it's it's uh it is it is it's it's really interesting when you look at a big picture and I think the HTTP archive and a great position to do that um just because of the sheer amount of data that they yeah and they seem to be quite impartial which I kind of like they're not super idealistic in that sense of oh maybe react is or PHP is better or whatever right it's kind of just this plain thing which is cool I like that and I mean I think looking at the data is really important because um it's easy I think to be working within a a niche and whether that's react or view or something else and you're you're you know you're working to optimize and make things better as far as you have got constraints um and actually stepping outside and thinking where are we as an ecosystem how are we doing you know about our aims um of shipping JavaScript to the client you know we want to do as little of that as possible how are we doing with it um you know how are we doing with with our um our commitment to make making sure things are machine readable you know server rendered exactly all this like also one of the things that stood out to me when I looked at that report is that 97 of websites has like third-party libraries on it which is likely just all this JavaScript that is being pushed down the throats of the users that make things slow right and then maybe not even using HTTP 2 for it it's amazing there's there's such a it's so such low hanging fruit I think optimizing um third-party scripts um and it's it's why I'm excited about things like Party Town um we have a an upcoming script A nux scripts module where we're trying to tackle some of these things as well oh interesting because there are every script and every every implementation of or integration with a particular provider has to to face the same questions over and over again things like how do I respect the user's preferences um how do I I want to load this script but obviously I don't want to know the script if the user has explicitly said they don't want so how do I do that you know what if the user said do not track you know and I have a tracking script how do I and every single script has to implement that separately and that is duplicated code um and then you know often yeah these scripts they they you you want to track what the user is doing but you don't want to get in the way of them engaging with the site so you have to defer it you have to move it to a later point in time you don't want to block the main thread how do you make make that interaction good um and so for example with nuts we've got lots of Integrations we have a Google analytics integration there's a tag manager integration and the same is true for pretty much any third-party library that might inject a script and rather than um then have each one of those libraries figure out how to do things like um loading at the appropriate point on client side once everything else has happened and the browser has an idle moment um actually centralizing that and offering that via a next a next scripts module makes this huge money very interesting I think nextges did some work towards that but I'm not sure if they looked at like one way to kind of do the same things as you did now oh that's very interesting so I mean they have different uh loading strategies exactly that's what they did yes which is um I would say probably lower level than what we're that when I'm talking about um at this point because it's the idea is effectively a platform that provides um uh utilities that then modules and other Integrations can use as well as of course a user at the end of the day exactly but I'm sure some of the same strategies um we'll use in terms of thinking about how you want to load a script but you don't want to you want to load it at a certain point afterwards and you know there'll be different stages where a script might make sense to load yeah earlier than another script now party town is great um I don't know if you've explored party town or not no no I don't actually know that any anywhere so so what is what they do oh wow Friday what do they do um so Party Town basically uh runs third-party scripts in a web worker which means they don't block the main thread um which means you get a smoother um interaction obviously there's still the same amount of CPU time yes but the point is it's non-blocking right well it's parallel now right yeah so um the there are some challenges because the way Party Town works is that it makes a such request for the script so it can't be used out of the box with scripts that don't set the appropriate course headers oh except which which is a pain if you're trying to adopt it there is now actually a public Party Zone proxy server that will um allow you to do this even with mainstream things like yeah you can wait for that to happen right because people just don't have this course and you cannot just ask a company to fix it so um and anyway it's definitely worth a try and uh and in next of course you can have your own proxy as well as use it exactly we'll dive into that at one point that sounds very interesting um let's see what else we have oh this one was fun so this is kind of uh CSS tricks is always good with these kind of articles about like performance related things because everybody wants gifts but they're horrendous for your performance especially on phones and stuff and so they like have a whole article about all the other ways you could do a gif and they actually even mentioned Twitter has a gif button right and you add the GIF and they play a video which is kind of funny um which makes sense because videos are much more performant and in this article they also go into like web fee with animations and fifth with animations and they're kind of saying if you use an image that is highly optimized and then animates you can use native lazy loading and the way you can decode and encode it and so this is like almost as old as the web of finding a nice way like I remember I'm not sure if you did that Daniel where I would literally just grab frames from a video and load these up lazily and put them on a canvas and then play it like it was a video player right those kind of things actually perform better than the give itself exactly that might sound like a uh a bad idea but actually you know what not at all I even did one but that was really highly experimental with a BPG file which is like some highly optimized file format made by a french guy and that now became h.265 that was a pre version of that and so I had a PBG file that I could render from a video and all the the yeah all the the frames would go into that file and I used a web worker to parse it and then play the thing and so the performance was pretty good but back in the day these web workers like it was slow and you still had a Flash and not all browsers could do it but you can go deep with this stuff it's good fun yeah but the unpacking and packing off something on the browser thread was of course not really smart but these are modern ways to do it sometimes I think I'm too old I've done too many things to there's so much information in there that you don't need anymore now but yeah there you go I love that we have some innovation in this part and so this one is yours Daniel talk about this one a familiar million name so um magic magic regex I uh it's it's a it's a project to improve writing and using regular Expressions um so we all we all love them they allow us to do pretty much anything but they condense a huge amount of information into those two slashes um and there are also some foot guns so it's possible to to end up in situations where you aren't exactly sure which uh number index matches which pair of brackets in the regular expression because you added an extra one and you're really not quite sure exactly where it goes or maybe you have a global regular expression and you're accidentally tracking state in it um there are some some pain points yeah so a magic regex allows you to write regular expressions using a more natural syntax so you can just use uh chainable utilities um it compiles out of your app so when you actually build your ad app it is replaced with a literal regular expression but when you're using it you get typesafe access to named and Anonymous groups um yeah it's so nice best practices built in even so sometimes um for example if you're like me you often write regular expression and you just put the sort of normal group The the brackets around something yeah because you need to to match it in fact that's slightly less performant than using the non-capturing specifier which is a question mark a question mark column um magic regex defaults to that so it will actually be slightly more performant than if you're just writing it by hand without without adding them so there's some really lovely things that are that that are quite fun and uh and then there's some some neat tricks so if you hover over the query Builder it will actually show you when the type the script hover what the regular expression is that is being generated um and when you were actually accessing say those Anonymous groups like match index three hover over it and it will show you what bit of the regex it's matching um and I think even if it knows more like if it's a string literal or something it can actually tell you it's going to be this um it's all typescript it is all um all the power of typescript uh so it is so much fun uh to to write in the first place and I particularly you would like to shout out um David uh David Thai guy who uh um has been contributing a lot in the project and has built some of the really cool type inference stuff that we've done it's a pretty geeky thing and you made it less geeky or at least more accessible because I'm one of those okay I need one I'll figure it out for half an hour I put it in my coat and then forget about it and never touch it again but that's not particularly safe right and so if you have something like this it's a lot nicer I think that's yeah that's the idea so you come back to it and you don't have to spend try and figure out exactly what the regular expression is doing it should be exactly because not everybody is that abstract minded right A lot of people are more into how pixels move and things like that so it's great to have something like this and then you added another one which is fonten I think that sounds French to me it does sound French which means I probably shouldn't be allowed to use it um [Laughter] you're in France at the moment aren't you Tim I am yes so you you can be the authority on how to pronounce it um oh my God I'm gonna go uh Google translate right now so um tell us more what what does this do exactly so if you this is for if you're using web fonts um whether that's hosted in your own project or somewhere else but you're using a true type font or a WAFF or something like that and um if you following best practices you have font display set to swap so the idea is that page loads you can see the content uh then the web font is downloading and when it downloads the browser swaps it out for whatever the fallback font is that it's using to display it which might be Times New Roman or Ariel or something like that and the problem is that the web font you're using is probably beautiful and lovely and not the same as Times New Roman so um it it results in this sort of shift of content on the page as suddenly everything moves up or down sideways um as as everything adjusts and that that affects your CLS score in your web vitals so your layout shift um and it also and and that's of course trying to capture the um the effect on the user who suddenly sees the content move around that's not a nice thing to experience and clearly you know so what we can do um this uses some some great tools so there'll be lots of shout outs but what it does is it calculates the font Matrix of the web font you're using so how um you know how high do the ascenders go how low do The Descendants go um how much space does it take up on the page and it applies those metrics to your fallback font so it is able to generate a font declaration for your local font that means it takes up the same space on the page as your web font so when it loads although there is still a flash as it changes from one font to another it doesn't move the page up and down and it can dramatically decrease your CLS and the whole thing operates statically at build time so it basically it sees what fonts you use it injects the right rules it sees when you use those font families and it injects the right rules there wow and it pretty much automatically can can give you well in the demo project which is just a very simple page of text normal text no no particular tricks it takes you from a 92 to a 100 page speed just sort of automatically and it works on any framework I tried it on next JS this morning there's a nuts module for it as well it works on pure wheat which is what the the demo project is in the Repository check it out this is crazy so I'm gonna ask a nerdy question because this is unpack the stack and this fits in our next subject so how do you actually figure out the width and the height of the letters of that font and the kerning and the line height because lots of fonts are kind of shitty and then the line height is okay but then the font is slightly higher not in the center so how do you figure these things out do you actually render it in a canvas in memory and then measure things or how does that work so it uses um and this is what I was talking about some pretty cool tools I don't know if you've come across cap size so cap size is a uh post yourself well capsize is a way of um talking about font metrics and injecting CSS to mean that when you're styling fonts it behaves the same in your web canvas as it does in your designer's canvas so one of the things that we've that find we found frustrating as users is as Developers interacting with designers is that the web doesn't you if you select some text or if you draw a border around some text there's weird bits and margins where you don't expect there to be any and so if you're trying to lay something out and align it with something else you often find yourself having to add like an extra pixel or something in order to make it or subtracting it or and and capsize is a way of you don't have to do that anymore it generates the right font rules and for the different size of and metrics of font you use so that exactly the Box around the font exactly aligns to the Baseline of the font and the height of the font um so it is it is just a fantastic fantastic tool I wrote a post CSS plugin for it post CSS cap size and then check out capsizer as well um I probably should have told you this in advance you know and you could oh yeah we could have put a slide in because I like I'm a pretty much a typography nerd and the things you just mentioned that's like the Nemesis and I kind of just let it go like I'll just I'll never go back but like for the inner perfectionist in all of this in all of us this is perfect and it genuinely does make the interaction between the designer and the developer so much better because the designers like this is what it should look like you know it it needs to be um in you know it needs to affect these um anyway it particularly when it comes to alignment like if you're looking at a button and you have like an icon and some text if you are detail orientated and even if you're doing you know the best practices in aligning a div centrally the text will not be Central like you you feel it should be but there it's always a matter of a couple of pixels so if you're using cap size it will be something it actually actually will be centered that's very interesting because I remember back in the day like I worked on these well we spoke about this a little bit before on these brands that were completely like typography first based on their image and then we had a creative director who used to teach typography in Berlin at the University so this guy is like full on and he um basically just made us learn all these things and go very specific so all the rules and all the typography everything was matching with the Rhythm and then we would have spent weeks and then we showed him the thing we made a whole kind of like I don't know it's like a CSS framework back then if you just applied it all the typography would have the right rhythm with this the line Heights and then he's like yeah that's crap like what why now that you have it perfect now start tweaking it so it's no longer perfect and it looks good to the eye it's like are you kidding me and so you're gonna have to but if you have the tools to make it very solid like the cap size and you know front end that you just made then you can start tweaking and make it look good so it's interesting and I think this is also a good Bridge or sorry maybe you wanted to say something first well so capsize is fantastic but the reason I mentioned it is that they um they built some tools to cut expose these font metrics and to allow you to get them yourself from the metadata within the font file so uh which is uh brilliant because we're not actually using capsize for this project for Fontan but we're using it for is to get the metrics so they have extracted metrics from basically Google fonts uh lots of adobe fonts I think as well um and so we can we don't even have to look at the source and they also it's just a database with with metadata that you can use it's exactly there's a huge database with metadata but I mean there's also you can also use um a query the actual font data within the font um and so you can actually give it it can um there's a capsize OSS unpack Library which you can point at a URL or a file on disk and it can actually read it and extract the information from it um which it's it's within the file but you have to look at it so it needs to be it needs a build step basically in order to get that um so yeah this really this project would have been a lot more complex without capsizing oh clearly because you would have been doing the things I just mentioned maybe you can render it in memory somehow in a Dom and then measure it out and then wait for the the life cycle of the browser to change so it actually renders like I've been around the block with that so having that very nice very nice um so we're going quite fast in the time let's move on to our main subject which is kind of related to what we're talking about now anyways so what did you actually want to unpack today uh so it's um it's one of them it's a project called nuts.new um obviously a lot of the time I'm building next itself but this was quite a fun little treat uh so um the uh team at nux Labs designed this uh this landing page for starting a new next project you mainly want to share your screen and show it off absolutely awesome I will share my screen and show it off here is yeah here is the project next.net there it is awesome um and uh so next at new is it's a way of starting a new next project um it's got we have three starters there at the moment there's some more stuff coming um which I can't can't tell you about yet but um that's the only reason this isn't open source yet because I I wouldn't want to give any spoilers um by by looking at the code um and and this was just super fun to do so working directly with a with a design canvas not a hugely complex project yeah you know this is a dates project a day's work yeah but it's it's uh it was fun um and so actually next font metrics started out for this um which is that the project that became Fontan uh because obviously you see these beautiful web web fonts um and so if I now refresh the page uh I'll do a hard refresh um you should see there's oh yeah I see a flicker for sure but but the flicker is just the wet it's the boldness what you shouldn't see flicker is the height um because we're doing this this font override and in fact if you were to look at that font you should be able to see uh that what we've done here is inject you see lots of Tailwind stuff going on uh We've injected I don't think it's actually sharing your term like your uh Rat that's a pain yeah the the web inspector view I probably could I'll see if I can share my uh uh yeah share my my um entire window um if you want I'm not sure if you particularly want to to dive in but my friend we're unpacking it okay um so basically uh in your in your actual in in the font that we're looking at here um you can have a look at the uh broadcast um we we have you see the font family as it was originally written as just uh robot Pro yeah um and the the library interjects this uh robot Pro override okay um if if we want to inspect what it what it's doing um you can have a look um this is these are the wafts we're just going to block them um so they don't they don't load uh yeah there is a relatively easy way to do it but I always forget why is it not oh this is five this is Chrome I'm normally used to to Firefox and we want to yeah we want to to block these um I think if you just find it you can probably block it from there block um I'll block all three exactly thank you Tim I don't know what I would do without you so now now what we're seeing um is that that somehow we oh we're falling back to um we're falling back to normal wafts oh but these are likely because they're on your machine no that because it had rough two and then WAFF two different formats which browser um so now now what you're seeing is the the version without the web fonts exactly um and and so so um the the what what's now being displayed is that is this override that we've we've completed okay um if we actually dive into the uh the CSS for the page it doesn't exist as a separate file because of something else but you should be able to sit inshallah we can talk about in a second but you should be able to see that we have a font family that we've generated here we're about Pro override it's got an Ascent override descent override and a line Gap a variety and those things basically mean that we are able to Output a line that has the same dimensions as the um the custom font that we would otherwise display I would say raise your hand if you don't know what Ascent override is or if that even exists the fact that that exists is amazing isn't it and the support is not as bad as you might think so if you have a look at can I use um it's going to work in wow you know more browsers than you might think if it's not supported then you're just getting the same swap that you got before but if it is yeah which is fine yeah um and Pete it works in paper speed so you'll see that lovely 100 uh in that green circle um so that that's part of it so basically the the um the front end injects all of the CSS that's required which is not much it's basically this uh and then it's the extra robot Pro I'm sorry it's this and then the extra robot Pro override um in every time you use Font family robot Pro so okay so override is that actually um like a file that it creates no it doesn't doesn't create any file at all it's just a name so if you have your font face declaration um you can you can pick any name you want um and it will then mean that when you use Font face that name it will look at the rules that you've put in place here in the font family and and use them so normally um if you're just using your custom font you have something like this and it points to a URL it has the font weight that matches the URL maybe a couple of formats and the this local override um it has these custom metrics and then it has instead of pointing to the web font it points to your local font so we have I I have a quite a long fallback list here yeah um so uh you have the native Native system fund basically um in this case I think it's probably falling back to Ariel um so it's it's pulling up the local aerial font uh the one that's on your computer is forcing it to the local but then it's applying these these metrics and it actually doesn't matter which font is loaded the metrics will override any font to be the right checklist so um it's it's so satisfying it's extremely satisfying but it feels a little hacky to me Tim is there no satisfying you that is the question you know but you know what this is actually if I if we had this years ago I would have impressed all my buddies where we had to do all this this stuff and now we just have it and you know what we likely had it before but we just didn't know this is crazy so there you go it's uh it makes a difference I think it does and and yeah so the width is only slightly different but not much the width is different that's the next step basically um it's a little bit more complex to calculate this but there is a property called size adjust um I believe uh which allows you to um expand the the letter and the thing is that every letter is different so the the height is fine because that's font wide but the the size adjust value would depend on calculating like an average value based on the the the alphabet that's used in the project yeah and then it's not going to be perfect but it will make it better so if you if you look at the sort of the but in this particular case we're just hitting that that line wrap I don't know if you can capture that at all but it there's an extra word that sometimes appears in the third line oh because it's due to some letters it might be slightly wider and therefore it yeah exactly and I think what we can do with size adjust is avoid that entirely yeah that's the most important part I guess yeah well I mean the the biggest gain is just from the height because already like the the difference um is huge and in most cases it's that's that's everything you need to do but yeah and when you're talking about blocks of text that are aligned and right up at the bound then you absolutely have to to do because if you have an extra line that that's obviously going to completely throw you off um so that's the next step but um but it's it's a very geeky project and I love it and I'm gonna try it for sure this is very cool the interesting thing is though like when I build my own sites and stuff I don't tend to see that swap as much but now I'm thinking I might have these font files locally so it never shows it for me it never shows you well I mean and if even even now if I just hit refresh you probably can't see any difference except you actually have to do that that command shift R to force the refresh and to be honest even then you can't see it most of the time you probably won't go on and throttle your connection speed right down I did this so often and do a hard refresh and then you can see it come in at the one level and then load and load and this is so cool um but yeah apart from that it's it's really hard to tell but you know you never know who is using our project and how they're accessing it yeah completely um this this can make it more usable imagine for a moment gives me inspiration I'm gonna try this yes it's cool and so with this project with the knock.new you also told me that you were looking of course at performance related things right and some of the things you found out in this project you actually pushed back into next right so these things became features so if you look at the the files loaded by the this site um what we have here is a um we have some some images um these are the I think this is just the the fave icon yeah it looks like it based on yeah and these come from next image I imagine looking at the URL yes so we do use next image in the site um we also use um the new pwa module from Uh Kevin morrick oh I haven't tried that yet oh cool so it basically it generates um icons of the appropriate size yeah that you can add to a manifest so in this particular case this um this little manifest here would allow you to install the this as a an app on your phone um and it also does does interesting things if you're on a mobile it will um theme theme the site for you so the tab is the next Green as opposed to just very normal tab so there's some nice little features there um but apart from that the only things that are being loaded are event oh that's um that's a telling somebody that someone's reloaded the site views um that looks like it's from plausible potentially it's possible yeah um we've got a couple in-line svgs um web fonts and actually there's nothing else there's no CSS that's crazy there's no CSS there's no JavaScript this site is entirely um one HTML page and you could block everything else and ever the images would still load they are inlined as a Sprite um the um the code would still work so it's without JavaScript but it's still interacting with your clipboard oh that's interesting well it's it's without JavaScript in in one way it's it's all in line right so this particular inline JavaScript so it's obviously built with nuts it's built with um built with uh um view but there is and basically here this button has an on click handler do you remember writing on click oh yes certainly did yeah so uh it actually has an on click Handler to add some text to the clipboard and so this you literally just typed in in your HTML I imagine it's actually Dynamic it's it's balanced so I mean obviously um in the generated HTML it's just written in but in in the actual source code you know it's these are components and they are um these are a few components with proper um events yeah they have everything else but it's it's rendering into something that is zero zero JavaScript and did you do something custom for that or is that something that few just does so um the o o to render the the um like how does it know to put you on click there with that string that you put in because I can imagine with bubble it could work but then it's all like very different view just does that you can you can basically bind um a string value to a um an on click Handler yeah exactly it will put it there um but the the the fact that we're rendering no JavaScript bundle is something that um that I built the module for for the project um and but we now have support for it next itself yeah that's awesome so um it's it's a really good workflow by the way um and I probably for this project built I don't know four or five modules just local modules so you create a modules directory and then stick um files in it as you go um it allows you to separate out the features and functionality and changes to next into a single place for each feature which means you can then easily copy it to another project if you're doing something else or open a PR to next and say hey here's this thing or publish it um if there's if there's a use case and another people would would benefit from it um but it was really straightforward to make it zero JavaScript um and then uh that actually if you want to see the actual code there is um next zero JS yeah that's going to be interesting how you did that because you probably have some payloads and you kind of just have to you know make files for them rather than uh API so this is this is um not exactly now how it's implemented in next but this is as simple as it is to do it um I basically injected a Nitro plugin from a module and that micro plugin basically hooked into the render HTML hook and removed removed everything that's it oh you'll just let nox render everything and you afterwards you just remove it yep that's the power of next hooks for you why not right it's it's super simple and it works now how we actually implemented it in nuts um was it was better I think um so next itself um is able to render no JavaScript with a um and see if I can pull up here because next two had an option for it I actually have used it on my website back in the day uh so here um in order to render no scripts uh is this clear enough for you by that um tiny bit yeah there we go yeah um we basically uh only have to do this this is even simpler than the the implementation in my module it's it's always better to try it out first and then implement it all clearly will always be better you need to make a hero for this stuff yeah and when you build the next project it produces a client manifest um either a webpack one or a V1 and it's how the server knows what URLs to inject into the HTML because they're hashed for example yeah and the server is different you know the server um has a different kind of bundle and they don't have the same file name so how does it know what to inject so there's this manifest and so all we do is we just go through and remove all the JavaScript from the Manifest which means as far as the server is concerned there is no JavaScript so it will still never put in basically just never rendered into the HTML which is a lot a lot better it's sort of it's at build time and it is uh yeah so and it to be honest no JavaScript is not for most projects so if you have a multi-page site the benefits to injecting JavaScript and having a bundle are huge in terms of user experience and having a seamless interaction between pages and obviously interactivity on the page lots of reasons have JavaScript but sometimes you need something without it and in this particular case why does it need JavaScript it doesn't need JavaScript this is just giving you links to out to projects um that you might want to use and the one thing that is interactive which is the copying of the um the command well you really don't need to have view to do that that's just uh and you have plausible for analytics that you just inject in the head basically yeah it works really well so um we do also this is also a hybrid site I don't know if you can tell um but the uh if you have a look at the headers for the page um you should be able to see and this is hosted on versal yeah and you should see it has this ex-versal cache um which tells you that this is on the CDN yeah and it has an e-tag right so that this is not generated this is not a dynamic SSR site this is um cached it's just it's basically a static file with an etac saying this is what this file is but if you have a look at this link for example so this link is to um I'll just hover over it maybe you can see it's to knocks.new forward slash C forward slash V3 exactly so I'm going to take us there in a moment but I'll just preserve the log so we can look inspect the headers for it right so let's get rid of those and click this stack Blitz link Rats new page oh yeah because it goes to a new tab if only I could you can do an inspect and remove the target link probably from the elementary good idea oh that's very happy but why not yeah here Target blank you can remove it there we go let's have a look and see what happens when I click it so basically that link um it's obviously take it's a redirect it's taking us to stock Flats okay but what's actually happening here is it's still coming from vessel but this is actually rendered by next um this is being hit by the Nitro server um which is running at the same time so this is a hybrid deployment it has got server endpoints powered by Nitro and static pages that are prevented and don't need to be and so Nitro only does the redirect like smartness or something so yeah it we only need it for the for the redirects we don't need it to render this this page which is um straightforward um so yes we have got these um these these redirects so um C for code sandbox s for stack Blitz and then the slug that it matches um and then the server route interacts with the same database that's rendered these um these these starters um which is bit from from a data set so it's it's not um these are not hard-coded in um and so it's then able to inspect that and see where to set like what kind of URL we need to construct for stack bets and code sandbox oh yeah because it goes to a stack Bliss starter that you have set up separately so but it needs to know where to go from your data set basically yeah they're both using the get uh integration the GitHub Integrations with with code sandbox and stack blitz so you know if you go there um you know the URL that you see is based on GitHub yeah a branch and a repository and and so that's where it's going to go and the same is true of stacklets yeah um and and to be honest this is not you don't need this yeah that was my next question is why because you can just in your data set hard code that URL and be happy right we absolutely we we could actually just render this as a href2 yeah because sandbox and stack Blitz but honestly I wouldn't be as fun it wouldn't be as fun exactly and you know we might we might switch back to that at some point if it fits better but um yeah I wanted to play with a um a Nitro um hybrid site um and it's it's really simple and one of the things people might not know about in the next project you can have the server API folder and any file you place in there gets turned into an API root something like this uh test.ds gets thrown into API test exactly yeah but you can also have a server Roots folder and any file in that gets turned into um a server route but based from the base of your project so if you put in this case to create a c um sort of slug um I can create Roots C uh slug some brackets around it dot get dot TS and then that is going to automatically become um a that's automatically just going to handle that at this so that becomes kind of a controller where you can do stuff exactly um and you can you can even do something like um provider Slug and have some some sort of nice Dynamic parameters there that you can pull out from your your server roots and so this is now hosted on first cell and when I I recently did that even this morning and then when I noticed when I set it into like the Nitro Mode 4 for sale the render mode it actually puts the whole thing in some I think I don't know fully how it works but it seems like it's a serverless function that renders all of nitro that's at least how it looks in for sale but how does that work with like wake up times and stuff so there's um there's there's uh pros and cons um to having multiple serverless functions for different endpoints and having a single one okay um and we've adopted a hybrid approach that I think is The Sweet Spot um because that's we've done it that because we think it's the sweet spot so um the Nitro server that you produce is a lazy loads the code that it needs so when you start the Nitro server it takes three milliseconds to cold start it is incredibly fast it's crazy yes um and when a request comes in if that request needs to load a bundle for one end point then it will load it at that point it won't load that that it before that point once it's loaded it's cached in its memory it won't have to load it again but the point is that when you when you if you're looking to fire up a micro server and serve only one request you're not going to have any of the overhead from the other endpoints so you don't have the downside of the uh loading the code and handling all of that in memory what you do have is the size of the Lambda which has to be unpacked yes and run within 10 seconds but that should normally be fine the 10 seconds thing is totally fine because we're not running any extra code we're only running the code for that response so we'd have to run that anyway but what we do um gain is if you think if you have 10 serverless functions for 10 different routes and someone comes and they they hit one of the functions and then a second later they hit another function those are two cold starts if they didn't come in the head three four and five and six every single one is getting a cold start whereas if you hit the Nitro approach we dynamically import what we need when we need it but we never hit that's called start again um until the Lambda actually times that so if you come in and hit um serverless functions one through ten uh endpoints with Nitro you have one called start and then just dynamically importing whatever cost there is to dynamically importing the code for each but for each endpoint which is much much more performant than having 10 functions now that might not always be true in every case but we think it's it's probably a pretty good guide in general um for sure it sounds cool yeah where are we going like like sorry I was just thinking of like the pages I was rendering when it was in that mode in that one serverless function I was doing fetch calls to three or four things so my page would like this is an interesting thing I saw where you also see how fast Nitro itself is when I clicked on a link on a next link the URL changed already the page was there and then my calls were asynchronously slowly getting done and then the page would render the rest of the page and that was like one second or something so I there's something there that I need to fix on my end but when you hit that link it's directly there so there's no cold start of the the serverless function but it it means you have to think about how you're going to build this now because if you're used to like oh let's just do SSG I don't have to think about how many queries I do now with SSR related things Suddenly It's a different game and that's where this hybrid thing can work I think the biggest blocker with an SSR app um as as you say is the is things like um Network requests on the server side because basically you absolutely don't want to do anything to delay that first flat that HTML rendered HTML to that to the end um and so I I would think very carefully even about doing authentication if it's based on making another Network request to some other endpoint that's going to tell you if you're authenticated or not on the server that is um I mean if you look at at something like reversal is an interesting um example I think they're quite well known for this if you load your a dashboard page or you go to a a user um a project page um what you see instantly is a static page with a loading uh and exactly like an app frame kind of thing that's what they used to call it a thing and exactly and then then obviously they perform the authentication and you get having some API requests happening and then you might be redirected to the homepage if you're not signed in yeah but they felt it was better to serve something immediately to the user and then perform off rather than the delay that request for the sake of that off and I think in general I feel very sympathetic to that it's important to sort of rendered things but if you're going to have to delay it by 300 milliseconds to perform some kind of off-call don't do it that is too much time to delay a server response so um and and there are tools that actually Nitro gives you to help with that not with auth but Nitro can cache arbitrary routes in your app and arbitrary fetches in your app so if you want to say for example that um I want to display the content on my homepage based on a virtual quest to my CMS we can use the stairwell we validate strategy to mean that we we instantly return a response and refresh it every um you know 100 milliseconds or every second or whatever you want but the point is it's instantaneous for every single user who hits it um okay so if I hit my home page and then it's cached in Nitro because I used like a cache key in my fetch call for every other user that then hits that website that is also cached then it it can be exactly it can be I mean what you would you need to set up a cached event um event handler within Nitro or use a root rule to enable caching so it's yeah okay so that I would still have to look at that oh it's interesting basically we don't do it out of the box because maybe you always need up-to-date information but all you would need to do in your app to enable you can cache at different levels right you can cache the rendered version of your page that's the easiest one to do if you create a key in your own that's config called Nitro and under that roots and then you under that put something called forward slash star star I will cover your whole site yeah and then that key matches SWR an object and say SWR is true and that will basically automatically give you SWR for your entire site it will feel a little bit like um static um because it will be Cat every page will be cached within memory in your Nitro server and it will be re-rendered on every request but it will be re-rendered after the request so um interesting you you get some some really nice um immediate out of the box speed from that now that's not you might also want to Cache a different level so if you want to Cache individual requests you can create Nitro endpoints for them and we have something a cache to that Handler which lets you specify that kind of thing so this individual request to my CMS can be cached in this kind of way um that's a more granular thing maybe if you're reusing it across your app and so what happens and it's a hard this is going to be an annoying question so we're on we're let's say we're using different cell Edge and you are in a different location than I am so you get a different instance of my app which then means it has to do the cache for that edge node as well I guess yeah exactly we're not showing a cache between it and you cannot that's impossible I guess I think one thing is impossible but you know it would it would it would remove the benefit of the cache um if you were then having to go fetch it from the other Edge node exactly exactly as you say so you know the benefit uh and the downside of an edge node is that it's close to the user but that means that it's also far away from every other Edge node so it's yeah yeah exactly um I think but but it would it would also work um but yes you would get less benefit from that SWR but I think if you're running on versal edge um which is a lot like obviously that's that's it's really a lot faster um but anyway the very best thing that you can do is not cache the requests the very best thing you can do is Def is not have the requests in the first place exactly because and people often don't think about it because they're used to different patterns maybe they await one request and then they await another request and then they await to another request which means you're absolutely adding to your time you can fetch them in parallel if they don't defend you know promise all or something like that yeah and and even then you know create a BFF uh rather than have some kind of a pattern where you need the result of one to get some information for another create your own use Nitro for it even um so you can do that and then you can cache it at that level so you can cache the the Nitro response if you need it um but there are things things you can do to really really improve um your performance if when it comes to patching lots of API requests on on the server and you know what's interesting I might be kind of guilty of doing these awaits because I've been doing Jam stack sites for so long because I've never had the real need for SSR and it's coming more and more but because of that I didn't actually care as much about how long these things would take because it's just unbuilt and then that's the one time two minute extra fine but actually we know that we're going back to where you have Nitro and you can think about this data in a different way we're gonna have to relearn a little um so we're coming up on the hour and I have one last question that could be pretty interesting to see what your Viewpoint is there um so when you look at newer tools like something like Astro where they say this component I want some JavaScript this one I don't for the other one I want some other type of JavaScript and then effectively creating something like they call Island architecture how is that working or at least do you have an opinion on how that could work in Knox as well so there's a pending ampere for next Islands how about that which uh but that it's I should say that despite the name it's it works very differently from Astro um wetlands um next I next Islands um which was originally called um server server um components but we we have in mind to make them not just server components but client components as well is the idea that um we can actually render individual components within your app um directly from Nitro which means that we can do things like um it enables lots of interesting use cases like component testing that is based on uh that that you can test components that depend on an entire next app but separately from that next app which is a very very interesting thing to be able to do um it means you can also have um components that that have Hefty dependencies that you don't want to ship to the browser or have node only dependencies things like highlighters um or maybe you want to access privileged data or you want to access a database in order to render information into a component you want the component to behave like a view component it needs to be reactive when you change the props it needs to update and this is a different kind of of uh Island this is not an island of interactivity within an otherwise static page this is a almost the reverse it's it's an island of HTML within an interactive page um but it enables a lot of very very interesting things and um I'm personally looking forward to seeing that PR get merged uh pretty yeah dude there are so many things coming in here now that people are going to have to wrap their minds around um the more I learn about it the more I use it um you see that there's all this this whole new paradigm is coming and I think it kind of makes sense that it's not released yet you need to have all these things to make this whole new paradigm work right and I think it's actually a good thing that this is now like the one thing though is like how are you going to actually Advocate this in the community because that's going to be pretty tricky server components server all of it like even how Nitro works is relatively new for a lot of people so I've been around the block for a bit and I'm like whoa okay let's see what we have here right so how does that work yeah I mean you're you're right I'll do my best to tell people about things certainly I I think at the and and you know there are lots of other people amazing people out there um you among them uh Tim who um I've been learning a lot as I go but learning in the community is the way to go I guess um and and you know the people who've been with us in the next three release process um right back from the the beta days all the way until now um they've had to put up with a lot as honestly we've changed things and if they were on edge releases it's the edge release we're making no guarantees about that not these symptoms stability but um but they've absolutely followed it through and I I see amazing help being offered on the next Discord server between uh users um who who've discovered features and are telling other people about them uh and and helping helping each other which is which is wonderful um so there's a lot of a lot of Goodwill out there and a lot of um oh clearly people discovering features too you know what um people have said when the RC started to come out like oh you're burning people to taking too long and you know what I think the opposite is happening it's getting so much better every time that people are just getting more excited like my best YouTube video is from half a year ago with my five favorite features of next three and since that time many more of my favorite features that I have now came out it's crazy and that's the video that did the best on my channel imagine that so there's still a lot of fire around it so it's really really good um we are coming up on time um is there anything you still want to share um you want to plug or whatever um well I think we'll have to wait until another day for me to tell you about style and lining which is obviously something else that we built for for next new um but uh but but no there's just so much to talk about outlining if you have a link let's put it in the chat you can even put it in a private chat for me and then I'll put it in oh we have our Belgian friend car wack in the chat oh wait you're sharing your screen let me just put that in there oh you're still seeing my screen that's a good thing I'm only searching the online styling in no I just put it back on I can remove it it's up to you no no that's totally fine so basically to enable it you set um uh you set experimental uh render inline Styles if let's see this little file experimental is the one to check oh yeah and it has all kinds of interesting little things that you can enable but in particular this inline SSR Styles will basically by default now with next um have a uh it's default enabled right now I probably won't won't be uh for the the stable version people can opt into it but um what it will do is render um well as it sounds like inline styles of the actual styles used by the components rendered in the page um and then it defer it defers the render the um CSS until client side um so it gives a prefetch rather than a preload meaning that um the whole thing should render a lot faster for users and it should also um it should reduce it removes the need for that extra Network request um what if I use Tailwind how does that compute here still does the same because Tailwind still um add CSS to the um to to it doesn't buy the CSS plugin that the one thing with Tailwind is that there are a lot of global styles that are needed so variables and things like that um and at the moment we inline those two you can disable and lining of global Styles bypassing a function here so you can pass this um function that receives the ID of the the file that it should inline the style into so it might be a view file um or it might be a like an entry point file and the Tailwind if you you're getting an entry point file that's where it injects the global Styles okay so that's literally your tailwind.css file basically would basically be inlined in the HTML out of the box in next three well right now that's the case isn't it yeah yeah so you can turn that off by saying you know passing ID and ID includes dot view or something like that that would restrict it to just a view sscs or you can turn it off entirely but I think there's there's some really interesting optimizations that we can potentially do here um so you know usage-based um it's already usage based but we might also be able to to purge Styles or figure out what that's what you want absolutely you want you what what I would love what you want is a fully self-contained HTML response um correct that has the minimum amount of everything that it needs in order to actually deliver a good experience so I mean you you don't want flashes as the layout changes and you you don't want information loading later um that I mean having separate CSS files is a really good thing too in nuts too you you had a binary choice you either had inline CSS but in that case your CSS was in in your JavaScript files and as you um which was um bad in general it's a bad thing because it means that you you have your CSS is um being applied to the document from your JavaScript crossing boundaries you're not using the browser to do what the browser is good at doing exactly yeah whereas if you have separate CSS files in nux2 you then didn't have anything in line um so you had a bit of a performance hit um with Nutri we're trying to hit the hybrid uh we want to render the CSS you need to display the page in the page in the HTML and then from that point onward it's all going to be fetching the CSS files which obviously can be cached you know you can you can have some some nice benefits there wow so I'm keeping like I have this website called presskit.inx.dev which is a one pager next three with content and it scores a hundred percent in performance but I haven't applied any of the things you just told me so and you probably don't need to do you like I want to now I want to so I'm gonna have to do all that stuff because there's one part of it if you if you can go there to Prescott team bendix.com because you're still sharing your screen anyways if you go downstairs downwards you see you see how fast this loads it's crazy including all those custom fonts and the images I made my own cloudinary image so this is not next image or it might be I don't remember so fast it's ridiculously fast this is one for sale you see no nothing that it's just solid web def I guess but none of your rules there however oh yeah while you do that Apes there we go no the dash yeah exactly this one I always Google there we go okay okay so while you do this go back and scroll down and there's my conference talks and you can click a little button that would load all of them and right now here I just do you saw a little bit of a jump there yeah but this is just doing an um async data load in next three to an API that I have somewhere in a serverless function that's always there and when I do hit more it refreshes the thing with the different query parameter this is I guess where we can do this hybrid thing exactly yes so that API can then exist within the same deployment it doesn't need to be an API and right now it's elsewhere which works because I use my talks on multiple websites that's fine but it is more interesting to package it up in one thing oh not even 100 oh that's not good oh I bet it will be if I click it again it's a bit finicky isn't it if you it needs to wake up a bit but um yeah those are nice numbers and that's next three out of the box without even thinking about performance right it's just good CSS and lazy loading images and I do some smartness like this image needs to be eager this one can be lazy but there's not much more there yeah and I try to like not render any JavaScript here but I want it for the the talks below to click on the button yeah I mean I think this is the kind of thing that we're going to see Innovation coming in and um and ideas for how how do you um how do you optimize this the JavaScript that we do have and do load yeah um view itself is thinking about this I mean there's a listen to Evan talk about view Vapor um so there's some really interesting thoughts there about how how we render JavaScript um for View and for next as well I think the move from next two to next three is sort of monolith to a different way of doing things composables for example really suit tree shaking that well in next year you just injected like a global plug-in and yeah it was available everywhere in your app which meant it also the setup for it was a new page load that for your entire app whereas index three you can export functionality as composables which can be used only when they're required so it really changes the the performance and Max 3 is so much lighter you know the HTTP Almanac um says you know this in this year we grew by eight percent in terms of JavaScript payloads oh wow which is terrible but if you're going from next to the next three then you'll be dropping your payload by I think 50 a significant amount from now that is good because I remember Tim bennett.dev is still nox2 and I did so much to optimize the performance like a lot of things and it's fine now and I learned a lot and then with next three I did nothing and I was it was faster right so that's pretty amazing it really really makes me glad to hear that well yeah and like even though there's lots of things like uh error handling I don't know why it doesn't work and I don't see an error coming from a module or something there's always some stuff but it's just it's called development for a reason right and most of the times when I ask you when I do something with next turns out it was either something I didn't know because I was not you know written down or it was my own mistake which is generally the one so there you go it is what it is we certainly can improve the documentation I think the um the setup of the documentation is great though because it gives you the folder structure which is really yeah but then now it's very much like a tree and it goes out so when you click on that folder then there's like five links to other bits so there's some work there to be done but you get there yeah we'll do our best oh I know that for a fact um dude thank you so much we're a bit over time I'm trying to keep it around this time um thank you so much for joining us and speaking about all this fun stuff and I'm inspired by like four things you said so I'm I'm but I'm too busy to do them so we'll do them in between how it goes sounds great thank you Tim it's been amazing same here cheers man thanks again all right bye-bye uh or we'll just end the broadcast how about that there