## STOP Using Create React App - 20220604
[Music] so here's when you use create react app the code base is already era and you are underpaid the brain rot has gotten too deep and it doesn't matter how hard the maintainers work they can't reverse that this is all my opinion thankfully my opinion is right stick around if you want to figure out why create react app is bad i had no idea what i was going to do this week i had my calendar for guests shift all around a few weeks ago and i like forgot this wasn't a guest week until last night and thankfully as always twitter provided and gave me some wonderful drama baiting that we're gonna dig deep into if we can prevent one person from using create react app this stream was worth it we're curing a plague we're saving the web dev world from a lasting scourge a proper disease that has been lingering for a long time with nobody willing to kill it and today is the day we are killing create react app it's over create react app hasn't been on a topic for a while now thankfully it's like dead but it came up again on twitter because swix was drama baiting about how bad the web ecosystem is talking about a a very senior engineer who sent him this picture which first off i find it's funny that a senior engineer is taking a picture of the screen we won't we won't dig too deep into how senior or technical this senior technical person is because that's that's additional drama we don't need to go into but what we can see here is it looks like he's installing a json schema ref parser package from api dev tools interesting because that very specifically suggests that this is a back-end package and what's particularly funny is the first reply i got and the most consistent sorry the first apply the first negative reply i got to my tweet in here and a lot of the things that followed up were next is for server side stuff conflating server side and client side makes things harder create react app is one of the biggest bad examples of conflating server side and client side stuff anyways let's go in here so the problem here was they were installing a package that was specifically for back end use and in order to get it to work on the front end they had to install a whole bunch of poly fills and a bunch of other [ __ ] to make it work there's two problems here in my opinion the first one is that a back-end package was installed in a front-end app i definitely will concede that in like the npm and javascript ecosystem there is nowhere near good enough a delineation between a package intended for front-end use a package intended for back end use and or packages intended for both and as such as a new developer and even an experienced developer it's hard to know when you npm install something what you're actually supposed to use it for and we see that problem pretty clearly here the other side is that create react app kind of lets you get away with it there's one particular reply in here that nearly gave me a [ __ ] aneurysm let's see if i can find it it was yeah it was in this pete hunt thread this one killed me this one actually broke me and it sucks i love pete i actually respect him immensely he's just like six to seven years behind it now and it's really sad to see this i didn't have the heart to reply this is uh specifically this part [Music] you guys can't hear me punching my desk because i have noise canceling on yeah so i as i just said have conceded that the delineation between front-end and back-end packages in the node ecosystem is not good that does not mean in any world that we should polyfill fs into your freaking web app that makes no no terrible idea we should not even be considering the idea of polyfilling node built-ins you do not call node crypto on your client what does polyfill mean good question polyfill means you wrote code that for any of many reasons can't run on the device that you're sending it to so additional code that does that thing is run instead so if you use like array.map but you're targeting internet explorer for some browser that doesn't have array.map it will at compile time create an old school for loop for you in order to make that dot map work a polyfill is code that uses old styles or supported styles to make an unsupported usually more modern thing compatible and the problem that we're seeing here is an assumption that if something's using npm so it's technically using node that it should polyfill everything you can do in node which i wholeheartedly reject that is in every sense a terrible idea the vast majority of the things in node were built to run on the server because node is server-side javascript we have bastardized it into a package manager for client apps but that doesn't like mean we should just treat them the same there's actually a new group that formed the like web runtime standards consultorum or something it's part of w3g like the web like standards group and what they are now doing is arguing about what the base set of javascript commands and functionality should exist on all platforms be it a browser be it deno be it node be it cloudflare workers and seeing the standardization there is really cool and exciting but man this is one of the the most frustrating replies i have gotten in a while like first off esm once adopted is going to solve so many problems in the web world specifically with package management and resolution and on top of that nodes built-in modules are not in any way shape or form built for the browser and here's where we get to go all the way back to our main topic create react app because historically and this is one of my favorite things about create react app let's see if i can find this issue create react app crypto issue i'll be so happy this comes up that's it yes this is the issue cool so this is the chaotic [ __ ] you're buying into when you buy into create react app for some reason my guess is making it as easy as possible to npm install random [ __ ] and have it work create react app used to include polyfills for a bunch of node.js stuff that probably shouldn't have been running in the browser including crypto so if you imported node's crypto module directly and in like your component that should not ever have worked because node's crypto module is not a browser module what they did for us was polyfill a bunch of those things and then they realized probably not a good idea awesome credit to create react app they made the right decision with v5 in no longer doing this because doing this is bad but due to the nature of engineer they have bred with this very bad pattern users of create react app now expect the ability to blindly npm install and blindly like node crypto node fs whatever at any point and expect it to work so when they finally start following the standards and stop ripping random node modules into their web apps and then explain why this is a bad thing they get 67 down votes on their reply in the github issue it's so frustrating i was in this thread i actually don't know if i ever replied to this thread but i was lurking this one for a while because man there was some dumb things okay one more tiny side rant the amount of times web 3 comes up in here says a lot both about the average create react app user and the average person who thinks installing a node module and their web app's a good idea they're just installing random crypto things and expecting it to work in their create react app i think that's [ __ ] hilarious but i i don't want to tangent into that for too long the the crypto world's its own mess we don't need to go into anyways the reason this all happened is somebody installed a back-end package in their create react app and create react app failed to polyfill everything for them and then they continued running into issues from there the problem here is much less create react app being bad much more the bad mindset create react app breeds as well as the bad split of package front-ended back-end like distinction in the node ecosystem that all said man create react app does not help here at all and it does not give developers a good path to solve these problems so what we're going to talk about today is why create react app is bad and then more importantly what else could be used that would serve most purposes better there's a bunch of different solutions that we'll be talking about create next app uh remixes stacks thing that they just released uh uh as well as uh i think i was gonna i was planning on going into redwood a tiny bit i don't think it's the best fit for this but we're also gonna touch on of course the vite there are v and the v templates i think those will be the best drop in somebody's touched on krakow will be touching on krakow don't worry there's a lot to talk about here so svelt's not an alternative to create react app actually i'm gonna let's start with some ground rules ground rules we are sticking to react i'm putting this here because a lot of people are going to show up here and say what about solid what about svelt what about vue what about angular what about quick those are all cool things and we'll talk about them a bunch on every other stream like we always do but this isn't a stream about solid this isn't a stream about felt this is a stream about create react app and why you shouldn't use it so no more other things that aren't running react astros on the line but i think i'm going to throw out astro here too because we are talking about react application stuff cool starting from here we're sticking to react we respect the maintainers of create react app i want to emphasize this part in particular they are actually trying v5 was a huge step and it genuinely looks like they're trying to take more advantage of standards remove a bunch of the boilerplate and [ __ ] and make ejecting not as miserable as it is the problem is the community that has been formed around create react app now expects the [ __ ] the brain rot has gotten too deep and it doesn't matter how hard the maintainers work they can't reverse that and i want to emphasize that they are trying and we are not going after them the maintainers are hard-working well-intended open source engineers that are actually doing some crazy stuff considering the hole that cra is and represents we respect them we care about them they're doing good things they're arguably doing better than i am because they're making create react app actually work in modern times i'm telling you to throw up the code give them respect be nice to the maintainers we like them this is why you shouldn't use create react app not why they're bad engineers wanted to be very clear about that cool so i think there's any other ground rules uh this is all my opinion thankfully my opinion is right cool i think that is everything let's get started so what is create react app this is a harder question than it might seem initially create react app is a weird combination of an opinionated boilerplate a tutorial a technical implementation and a build system all bundled as a starting point to make a react application it's rough there's a lot of good ideas in there there's a lot of good up like a lot of good intent in there but god there is way too much code in there less commits than i would have expected i'm sure they squash but man the amount of code inside of these packages is a little scary because they have their own custom scripts within create react app that run on everything uh this one's not as scary as it used to be some of these are very scary very long piles of code that do a lot of weird [ __ ] to fit all of the different niches and weird things somebody wanted to do with react over the last like decade it's a lot of code and this does all sorts of different things for all sorts of different potential use cases for all sorts of different package types build types systems npm yarn whatever assuming that you can do anything within it and as soon as you can't you're going to eject and maintain all of this instead and that's the scariest part of this pack of this react scripts this is a gigantic package full of code that is used to build and maintain the build for a react app with webpack and if you want to make a change to your webpack config or have to do something different from how create react app expects you have to eject and this makes things a lot more painful a lot faster because now you have to maintain all of the stuff that came with this before what eject means is you're not hiding all of this stuff under create react app anymore it takes it out and drops it in your source so now you can deal with it yourself also swix don't worry about triggering this you had good intentions and one of the like core points of what you said or of what you brought up is the idea that node packages do a [ __ ] job of distinguishing between what's good for front end and what's good for back end i've had this problem for a while i think node fundamentally failed as a package manager to distinguish between these because it was built for back end use in node and now we're retrofitting it to the front end and complaining when things meant for back-end don't work in the front end and create react app gets stuck in the middle of it and makes the wrong decision around about it and that's why we're here now so create react app this react scripts [ __ ] is very scary and it's full of chaotic stuff that you don't want to have to maintain yourself i know this because i've had to do it it is not fun when you have to do your first webpack upgrade yourself you're in for straight pain so because of this a lot of engineers try to avoid ejecting thankfully there's a solution for them create react app configuration override this is one of the scariest packages ever made what this guy does is uh patch packages parts of create react app to let you do things create react app didn't build in like styled components this is an override layer on top of create react app that assumes an exact version of create react app and then you have to rewrite all of the patches when anything changes in create react app instead of going deeper to solve the problem you've built another layer on top to paint the smiley face over it this is like layer upon layer upon layer of [ __ ] just straight garbage and we need to go closer to the problem not further away from it and this is the problem with create react app it encourages this culture of taking a problem with your code base and wrapping it with layers instead of fixing the [ __ ] problem and that's why we're here today we're fixing the problem also as swiss just pointed out krakow is surprise surprise no longer maintained because surprise surprise maintaining this is miserable when i heard this existed i think it was actually jacob who told me this was a thing i right near had an aneurysm this is that the it's gonna be a long stream for me god your first exposure to react and tailwind was create react app and cracko i am so sorry on the on behalf of react developers as a whole i apologize that's our bad and that's why i'm doing this honestly is i'm trying to turn the tide i want to make sure the average react developer if they do recommend create react app that at least they feel bad doing it that's what i want to change i'm not going to convince everybody to stop recommending this [ __ ] but i should probably be able to convince you to feel bad about yourself while you do it and i think that's that's a viable path forward cool so krakow somehow makes a bad thing worse and react scripts is the bad thing these packages do all sorts of scary [ __ ] all these polyfills error overlay's okay but everyone's copied that at this point uh confusing browser globals really great packages anyways so what is create react app the recommended way to start a new [Music] react application by nobody create react app was originally created when react was new because at the time there wasn't much created in terms of the tools to build your react app you kind of just had to do it and that was not great you had to learn enough webpack to build everything yourself and at the time webpack was even rougher as such you suffered a lot uh the career apps intent at the time was bundle the majority of what the average developer would need to bootstrap a single page application with react i should probably make this distinction now for those that aren't familiar with the single page app versus mpa single page app is a an application that serves a single html file probably with nothing in it and then has javascript that does everything else so the javascript determines which page you're on the javascript navigates when you click a link the javascript controls the page rather than the html that comes down multi-page app usually means each page has unique html that somehow describes what that page should be and javascript is more there to enhance the experience so create react app is early spa solution for making a react site create react app was a community thing that quickly got adopted by facebook and is kind of maintained by them it's it's dramatic but yeah create react app is the original like blessed solution by the react team to get started with a new react application they tried very hard to abstract a bunch of the core reacts well or not react the core build a website problems from you like configuring webpack injecting scripts uh bundling svgs when you import them directly uh using new javascript like patterns like dot map and like new cool like string functions ahead of time and polyfilling the old one or them on top of old ones for other browsers a lot of the things that at the time were 100 necessary when we needed a react app that worked on chrome and an internet explorer and it's a progressive web app when people thought those were relevant and webpack was just getting started and all of these things were really rough what has changed since then is we've stopped polyfilling the vast majority of the things that we like to use we have stabilized our build tools and chain to make javascript that works come out of our like build environments and we have generally moved away from these solutions that obfuscate all of the tech towards ones that simplify it and clarify the role of each piece on top of all of that we've seen a revolution in build tools in particular triggered by es build which proved that if you abstract your building a little bit away from javascript and use something like golang to do the initial pass of like light poly filling and compiling to get something to the browser you can have a way faster developer experience and compilation experience as a result es build it was written in goling by the cto of figma and eventually swc was written by a rust developer to be like the rust equivalent that developer ended up getting acquired by vercell and built swc into next js which means you get the crazy fast developer experience and relatively absurdly fast builds because that process runs in rust as much as it can and still falls back on webpack when it needs to as such there's been a lot of movement in this space and create react app was not architected in a way where it can keep up because it was architected to solve a lot of problems before the solutions were standardized and now when you're buying into it you're stuck with their assumption around the solution that is often painful when things like tailwind happen and their way of using css doesn't perfectly line up with the way create react app thinks about it and now you have to do weird webpack like hacks or craco fills to get tailwind to work with create react app and as the community continues to innovate and come up with new solutions to the problems that we experience building applications every day create react app was not architected in a way where we can build those solutions in one of the best strengths of react is how simple it is at its core react provides components and hooks and a rough mental model of how to architect those nothing else react doesn't give you a way to style react doesn't give you much of a way to manage state it gives you very basic primitives for it react doesn't give you anything to manage animation doesn't give you a build tool doesn't give you much of anything it is a javascript library for managing the relationship between state and components that then render to the dom and that's all it is i love that simplicity because it's allowed the community to build incredible things like react query like redux like zustan and jodi like react three fiber like react native there's all these cool products or projects that only can exist because react was architected in a way that is open to new additions the things they didn't do can be done by others and improved and innovated on over time create react out is a really hard swing in the other direction it's building in all of those things so you don't have to make the decisions yourself and man the decisions that were made here did not age well at all and that's the biggest problem with create react app due to react being so minimal and not prescribing solutions create react app had to and it did it very very early as a result it has aged poorly the maintainers are working to catch it up and struggling because they have to fight the community every step that now expects the weird behaviors that are encoded within create react app is a legacy project and we should treat it as such with legacy projects your goal should be never start something new with it and if you're able move other things off of it let's do a quick good or good and bad for create react app let's make a diagram diagrams are fun you all know how much i love my diagrams it's a little shorter cool cra good and bad bad cool so for the good say simple simple officially supported large community i think that's all i can do there a bad uh no i need to switch to left align no ssr story ssrs server side rendering it means that instead of sending down an empty html page with javascript you can instead send html that actually has content on it initially which means when you link something on twitter it has the metadata in there correctly to this day when you share a twitch stream link you get [ __ ] metadata because that page is cached by another service that isn't in react land that does its best to stuff metadata into the tag when it can and the result is a hodgepodge of html that's cached by various services and gets updated every 48-ish hours if they were using something like nexjs with a happy ssr story it would have been trivial to update that html on the fly it's one part that's bad uh ancient decisions around webpack architecture generally create react app was built before webpack was standardized and it did a lot of things to make webpack work and make the developer experience good like create app was one of the first times you could import an svg directly in your app and expect that to work but man they did some rough [ __ ] to get there and that stuff aged very poorly so what else is bad about create react app uh ejecting for more control is rough and it's hard to emphasize just how rough this is you're now effectively maintaining a fork of create react app yourself once you eject and whenever you need to do an update you have to do that update yourself and it is it is not fun we also trying to think of the right way to put my other create react app complaints uh maximal and full of things you probably don't need yeah the react docs now mention next js good call out oh 300 megabytes of npm or of node modules good call it's it's heavy uh weird polyfill behaviors set bad expectations uh honestly i think that's enough i don't think we need to go too hard on like the individual bad things like i could go deep on why i think their testing story is miserable everything has hmr but yeah i want to be careful with the good not doing things that aren't unique to create react app because everything has hmr at this point in dev it's just an expectation in the react world in particular so i'm not going to put that there if we talk about solutions that don't have it i will rethink my stance cool so now we're going to start talking about alternatives there's one that a lot of people are hinting at here uh next.js oh uh yeah i'm gonna get yeah i feel like touching on it so i'm gonna get very lightly opinionated uh based on dated react patterns react router redux i want to be clear here react router and redux are fine they're used by a lot of big companies they're still getting updates in particular rtk for redux makes the experience of using redux significantly better and there are good use cases there react router i personally think is maximal garbage and very rarely is necessary i much prefer almost anything else personally but uh yeah prescribing so many of these solutions is rough i should yeah i'll add one more here absurdly er large number of super weird bugs greater than 1k issues at the moment cool i'll do a react router rant in the future i really like uh there's a handful of smaller routers if you want something client-side i really like wowder water's dope it's kind of like zustan but for routing super super minimal it's a 1.36 kilobytes gzipped you don't have to do a top level anything route matching is super simple love it router's really good highly recommend not necessary just like a good option i also like react location obviously a shout out tanner i want to search all of github come on tan stack react location cool react location is like react router with a better typescript story higher level navigation like directives and data hydration through the navigation it's really cool uh also very considerate of query params in your urls which almost no other routing solution is very good i haven't played with it enough i contributed really really early but i haven't had a chance to touch it since highly recommend as well as i'm covering the star count i don't have an easy way to not be covering the star counter it's 2.1 k stars oh no i can't do the half screen anyways yeah sorry for the the harshness towards react router just not the path i recommend particularly option so or path i recommend particularly often it's yeah redux is fine i i used to be much harsher on redux but man the work done on rtk makes it totally viable again totally fine now what's not true about redux that redux oh redux isn't mentioned in the create react app docs uh let's terminal i don't want to be talking [ __ ] if i'm wrong so let's sandbox uh create react app i'm not dissing rtk i want to be clear rtk makes redux usable again it's really impressive work that's going on there uh somebody asked about solid i'm gonna reference the rules here we are sticking to react today we're talking about create react app going to different frameworks makes this go from slightly off topic to impossible to keep up with so no let's go cra test alternatives to redux include zustan jodi a bunch of other stuff i'm going to link init.tips that's my site i made a while back to link or to describe a bunch of the solutions i recommend for stuff like this a cd cra test what the hell did it just not we no longer support global installs great npm uninstall dash g create react app great start great [ __ ] start the the command you copy off of their website doesn't work uh where is my stupid thing uh let's we're taking away one of the good cool anyways let's see what we're getting in here somebody mentioned earlier that they don't recommend redux anymore look at that i was wrong they don't have redux in here anymore and they moved over to testing library still very just heavy but at least they're using rtl better as i said they're improving credit where credit's due not stuffing a bunch of opinionated state management libraries into your code makes it a lot easier to recommend something like this whoever's suggesting fight we'll get there don't worry we're talking about all the alternatives in a bit i'm still on the complaining about create create create react app stage yeah 300 packages to be fair next does have a lot of packages they hide them they hide them in a clever way we'll talk about that when we get there but yeah this guy's 323.5 megabytes of node modules good [ __ ] and they're not doing any native [ __ ] either so that's just like a bunch of javascript that's a little scary cool so i was wrong about some things i was wrong about some things in favor of create react app and wrong about more against it there so i'm happy that i did that anyways next js as the first alternative let's talk about next a bit first next js is a framework that was created by at the time zeit i think that next came before zeit slightly zeit then became versal the creator of both zeit and vercell as well as next next.js guillermo roche he was the creator of socket io for those that don't know socket i o it was one of the first ways to reasonably use web sockets in node.js which became very significant as a how do i put it it kind of became the standard for doing web sockets fast both because it made deploying the back end on node incredibly easy and it would fall back to other methods to maintain the websocket connection other than websockets for devices that didn't support them yet it would just do like post requests back and forth to keep an up-to-date state very very good solution to a hard problem early nowadays i don't roll my own socket solution i use providers like ably pusher stuff like that i try to not run a server if i don't have to if i was running a server honestly i'd probably still use socket io because i'm familiar with it i don't know of any great alternative that's like taken over or anything the reason i brought that up is guillermo has a phenomenal history as a contributor of open source standards and solutions to common problems and i've been relying on his stuff for a long time now i've been following since socket io and next js blew me away and scared the [ __ ] out of me when it first happened because i was genuinely a little confused and scared about the idea of turning what felt to me like create react app into a back end and i that that scared this [ __ ] out of me i was already scared enough of create react app the thought of making that your whole service yeah and i was wrong i was incredibly wrong next js solves a lot of the problems we're talking about right now and offers paths to do a lot of cool things create react app can't do next.js uh cool i do have the site in my recent history they refer themselves as the react framework for production i think that is a reasonable claim and this is kind of how it's framed even in the new beta react docs actually plug for those uh beta.react.js.org i even think i have a chat command i do not have a chat command my bad was so sure i did oh i do one of those worked i don't know which one it was but one of those commands sends a fossa bot message that shows you the new beta react site there is no better way to create a react or to learn react right now arguably no better way to learn a web dev like solution right now the new react docs raised the bar for educational materials for getting started with a new technology even if you're a seasoned reactive i recommend reading through these both because it'll give you better language to teach developers you work with about react and it might even introduce you to things you didn't know much about before it's a really good documentation like upgrade rachel killed it they've been working really hard on this along with a bunch of the other meta developers please read this very good anyways next js is both used in those docs as the solution to build them so like those docks are built in next and it's also recommended in those docks as the way to build your react website next effectively does it does a lot of things but i'm going to focus on two for the sake of this one is it runs your react code on the back end so that you can how do i put it you can find the right place to start this when you use create react app do i have to run it yeah i have to run it this will be way easier if i cd cra test npm run dev vm run start maybe cool start for this so here we have once it loads a create react app so we see it here all this react code if i go here and look into the html that i get back we'll see this html has in it this component and the stuff here however this is where things get interesting we're gonna go to the network tab and refresh here's the actual html the server gave us back let's take a look at this instead because this html has nothing in it it has an empty root and a noscript tag that says you need to enable javascript to run this app let's go do a next app instead cb mpx create next app ts next test cd create next all right cd next test is what i named it cool npm install npm run dev and another dumb thing one of these things does the typescript template for node or for next.js doesn't include the node types that it needs wonderful complain about this all the time cool so now if i refresh localhost 3000 i'm going to get the next site instead because this is the next.js template if i go to the elements here like i was doing before you'll see obviously this is all the html for the page has a next root and from here it works pretty much identical to any site the difference is in the network tab scroll up prettify we actually get the html for the page from the server it is absurdly more valuable for things like scraping the speed of the initial page the metadata that would be shared when you share a link on twitter when you share a link on discord this lets you make sure the first version of the page the user sees has actual html in it this will boost your seo this will boost the quality of experience for a user when they load the page this will prevent a bunch of the flicker and [ __ ] like that that happens when you load a page for the first time and this will let you have a page with data the first time it's loaded it's incredibly powerful and it's also entirely optional at any point in a next app and i'll just go do this quick because why not i have a folder here pages can make a new folder components we're going to rip all of the contents from this page and throw them in home.tsx this now exports default function home and in here delete all this delete all this dynamic from next dynamic import components home cool auto completed ssr false that looks bind this const lazy home component equals then return lazy home component and now we have successfully recreated create react app because the div now has nothing in it when it initially comes back from the server ta-da we have now created create react app inside of next.js these now behave exactly the same it's like if you have packages that you actually can't run on server import them through dynamic with ssr false now this won't run on server and if i from here down do everything just like create react app does i can do that i can even install react router on inside of that file if i want and i can tell in a next config file tell next hey send everything to root just point everything here and then we'll make up routes as we please and you've now forced create react app out of next but you don't have to use all of their weird build chain [ __ ] and instead have relatively modern standards for package management build etc there are things that you'll have to deal with if you're using the krakow solution like the weird way material ui works there and like polyfills and [ __ ] but generally speaking any any relatively modern tool you can npm install inside of next and it will probably do what it's supposed to and if it doesn't there's a really good guide somewhere and that's why i think it's okay to recommend next as an alternative to create react app so let's go back to here so the good very modern well uh invested or i'm trying to put react meta endorsed uh well maintained incredibly so uh very modern meta-endorsed well-maintained ssr golden path stain standards back end solutions slash api trpc etc i don't want to make that that long multiple render strats great caching story insanely fast builds yeah there's a lot there i don't want to just like make this react or next great because there's a lot of that i want to complain about too so let's start with here uh esm story still confusing uh type or unclear boundaries between front back i think that because next does such a great job of like blurring the front end and back end to smooth out the developer experience between the two it often gets confusing which side your code will run in and as a result and for a lot of developers it's unintuitive that the thing in your page component like the component code is running on the back end as well in order to make that first html pass and that confusion definitely leads to developers not understanding like which packages and which things work where so leads to confusion around what you can use where esm is the new ecma script module standard it's meant to replace common js is how we bundle javascript thing to share with others as a package yeah no clear state management and you start with 80 kilobytes gzipped uh yeah those are actually good points uh no obvious state management path get server side props is largely an anti-pattern uh light vendor lock-in no obvious or yeah i'm leaning i'm not as sure about the state management path one i think all of these have that problem now especially now that create react app gutted redux out i think all of these have that at this point get service side props doesn't do a good job of hydrating that state but uh yeah i'm touched on the package stuff the interesting thing about how nexjs manages their packages is if we look at the package json this is suspiciously small and even the package lock is relatively small for something as big as next the reason for that is in the next js package directly they actually during their build will pull in specific versions of the packages they need and bundle that into next directly not as a sub dependency through node but an actual compiled in file so you don't have to manage the dependency it's abstracted as part of next's runtime and build chain this means that if you want to make changes to those things you're you're [ __ ] i'll be frank you cannot do that but for what it is worth and i have done some crazy hacks i have found that that layer is much deeper than what create react app represents let me actually go back to my diagrams here because i think i can diagram this okay uh cool we have a stroke so here is the the circle i'll make a bigger circle i'll call this one the problem space this is where the problems any one might have with their build solution exist in this circle next's prescriptions live way deeper in here let me change the color so it's visible next prescriptions our next solution is a smaller like piece in here and i can build around it if my problem exists outside of next solution i can build in and here's where my problem is i've always felt as though create react app exists in this outer layer out here that contains a lot of other people's random problems and [ __ ] but might not solve my problem perfectly so if my problem exists on this layer and create react app is this much further out i'm [ __ ] i have to do some crazy [ __ ] like and this is where you start seeing like krakow which is effectively a crack inside of the framework so that i can inject my way into the problem space where i actually live but now i've fractured create react app to get there and the next time i need to do something in that space i fractured everything starts to fall apart but create react app exists so far around the problems with build that i find it nigh impossible to do anything that wasn't prescribed within next solutions are a small enough subset of the problem space that you can usually npm install the thing you want and expect it to work does that make sense this is a weird way to frame it i hadn't thought of this one before i think this makes sense in my head it does cool but yeah that's why i'm okay with for the most part or next hiding the packages that it uses underneath and not letting me deal with them i don't want to and they make it so i don't feel like i need to when i try to npm install something it almost always does what it's supposed to the exceptions being back encode in the front end where the like you be better about what you import where one of the problems we ran into where was we had a package that only works on front end because it calls window directly it's like for websocket stuff on the client and we had a component that used that package and it also used uh or it also exported a type that we wanted in the back end so we imported this front end type in the back end and that was coming with the package call with window in it so that was failing to build cool let's hop back to these alternative solutions quick i'm deleting this thing i don't need it anymore i yell know what circles look like cool let's yoink i'll yuck the whole thing makes this easier i'm talking about vite next vite that's gonna do this uh no or ssr is rough just like two points so i can keep the text here and not worry about that but yeah invite v it's vite they say it's v just like gif is gif sometimes the creators are wrong vite is a build tool for creating web applications some use it for servers but it's primarily used for web apps it's built for bundling everything from your css to your javascript to your like whatever as simply as possible it's a very this is the drop-in for create react app it's not built for server side at all there are some hacks that are making it somewhat work with ssr stuff i don't recommend them i don't think anyone does generally vite was built to take the experience similar to create react app it's more what the view world was using and take advantage of going with or es build to make the time from when you save to when you see a response on the screen as fast as possible and using roll up for the official builds so that you can have a minimized production build that we can confidently know is going to work because roll-up's been used forever it roll-up works i bring up veat vite y'all say it's french whatever i'm calling it fight i bring up vite because although it was originally built around and for uh view i still remember the tweet when evan you said hey i'm trying to make v work with net or with react does any react developer want to try this and i was one of the first people to use react with vite and it was so cool when it happened vite is incredibly minimal one of the simplest and fastest ways to build a react application for the first time my favorite part is how little it obfuscates without increasing complexity in the vite template you get an actual index html that actually has the source main.jsx file here and vite will see that start at the html find that javascript and compile it if it needs to and spit out something that actually works on the client it's very elegant and fast as [ __ ] and the templates it has are simple as hell when i want something that i know i will never need to care about the condition of the html from the server for i use vite still it's so quick it's it will give you your static html and static javascript that you need to build your dynamic spa faster than almost anything else on the market and for things like an electron app or a game i would still probably use fight for my game dogecoin simulator which i'm realizing more and more nobody knows i have a bunch of random games yeah here's dogecoin simulator just realize it's zoomed in too much uh i don't have the ability to reset easily now but it's like a cookie clicker game about doge that i thought would be funny and i was right it was but nobody played it i made this with vite because i don't need it doesn't even have multiple pages it has one page it's a web app i don't need to server render anything here it's actually almost simpler that i didn't so for some use cases this is good it's fast as hell i saw somebody asking about parcel i haven't seen anyone use parcel in so long like i know they just got a recent update that uses es build for some of its stuff it exists i i don't think anyone's particularly excited about parcel right now and for good reason it's not keeping up so swc come up swc is very similar to es build it's the rust equivalent it is built into nexjs now it's fine i yeah generally vita is if you want to own your build system at all and you don't want to ssr vita is the best solution i'm actually gonna go through these quick and give the like why i would use which and when because that'll be useful to have separately so i don't think i think the good and bad helps but it's not as explicit as i want to be when to use make this bigger when to use create react app so here's when you would use create react app the code base is already era and you are underpaid when to use veet uh ssr will never be a concern uh owning your build could potentially be valuable uh electron raw speed simple yeah so i would use vita if ssr would never be a concern you need to own your build and raw speed is very valuable uh and let's see next dot js i would use next.js if if html metadata seo lighthouse or general first paint perf matter uh if you don't want to think about this problem much anymore and you want to use what everyone's started or what if you want to use the new standard so usually next is going to be the thing you want to use almost always i'll give an honorable mention to remix if you really liked react router i'm going to stop doing the ifs so remix you really like react router edge rendering is v important to you and bleeding edge isn't that scary i'm not saying vite is better than next js i'm saying vite is simpler than xjs and if simple's fine with you you should probably use fight but if you need to like build an actual application people are going to use and you want like google to work for your site you should probably be on next or maybe remix i'll save i'm going to add one more to remix all of next stuff applies ah it's not all the next stuff because the standard thing isn't true yeah i'll leave that as is so here's the thing that you can like screenshot and put on twitter and try and cancel me for here is when i would use each of these different solutions if it's just seo then there's libraries for that so vite is fine no not really true you can kind of serve a render white pages in some ways just wrong like it's it's very unsupported evan himself has said that it's not the intended use case for vite at the moment it yeah saw green scars ask a really good question i'm a back end dev who really likes the concept of spas what's an instance where ssr is clearly the better choice any time the metadata that comes down the wire matters ssr is a better choice so a great example for this would be twitch if i change my title on twitch and i go actually i'll just do it now i'll go to the twitter link preview on twitter there's a card validator and you can see [Music] what this looks like the title is actually updated because i haven't changed it in a week but i'm going to go change my title create react app is bad and slow i just changed my stream title i'm gonna do this again and it's not gonna update it's gonna take a very long time to update that title because the page isn't being ssr'd the data it's getting from that is some other back-end code that every once in a while generates a new html asset with slightly different metadata in it if it feels like it whereas with an ssr solution the html you get from the wire is something you have control over directly yeah this won't be updated for 24 to 48 hours usually it's it's rough what's my general take on gatsby gatsby still alive news to me asteroids using vite good points uh a bunch of other things are using vite under the hood it's a pretty good like solution to build your own solution over does remix use react router yes remix is react router it's like a remix is react router with data built in as a back-end solution it's like remix is bi and it's by the react router team and built around react router as a whole cool migration methods how do we get out of a create react app the first thing i would recommend determining is okay so we're convinced how do we stop using cra step one is obviously pick your new solution the criteria i would consider are do you want your site to come up when you google it do you want the data in links that people send to your site to be fresh and up to date do you have concerns around the experience that develop how do i put it what is like the reasonable javascript target for your average user like are they running a really old internet explorer device are they running a modern phone are they usually going to be on a computer and from there probably fall on next.js because it's the thing that has the right overlap of that as well as probably the most important thing higher ability so well under here questions to ask how important is ssr do you need metadata do you need static renders ah how important is hiring what other questions could you ask yourself as you're making this migration how about into weird client only packages are you material ui is hell from what i know apparently old material ui builds rely heavily on weird cracker [ __ ] that is annoying to do in like next js i would imagine it'd be slightly easier invite not positive about that the google thing is part of the ssr do you need metadata google embed etc also end user devices in perf yet how important is perf all devices for users i don't think materialize something you should ever use i don't want to go too in depth on like my hatred of the average like ui frameworks but a future stream i'll rant about material ui for now i just don't recommend it cool so based on these questions if metadata is important static html is potential if any of the ssr needs are potentially important you now have to pick between remix and next and if hiring is important you should probably pick next if you're using weird client only packages or other things that you're like intimately familiar with that have client expectations or otherwise have problems running on a server or server generated code use veep but almost nobody will do that uh there are very few things that have that problem still i think we're in a good state create react app is has assumptions built in and i'm assuming you have those assumptions i how do i put it if you are bought enough it bought in enough to this assumptions like you have a lot of different routes in your react router you have a bunch of weird polyfills and plugins that you're expecting your code base has more than ten thousand lines of code and you don't quite know where those ten thousand lines are any of that sounds like you it might make a lot of sense that it might make a lot of sense to encode those old assumptions into the solution you pick so if you go with our next.js for example uh next.js see c s p a cool found a guide oh colin wrote this that's hilarious for those that don't know colin is the creator of zod and he wrote the initial commits that became trpc he writes a lot of the the basis for a lot of the things that i thrive and survive off of so huge shout out to colin hax great developer yeah did not think so i would be the one to write this or um uh the column be the one to write this this is also a strategy i know uh tanner linsley who created react location as well as uh react query react table and a bunch of other libraries he's been using nexjs as a build tool for single page apps for a while now and yeah mabel just said if they keep the fundamental idea of minimal core that you can't override without some third-party tool that might break later or being exposed to an explosion of config cra will continue to suck yeah the fact that to change something within their assumptions you have to eject or hack is incredibly scary and enough of those suggestions are far away from what i as a developer need that it regularly frustrates me and when i'm advising new developers i find that they regularly enough run into those problems that create react app causes more pain than it solves and that's been a frustration for me for a while once we pick the new solution i don't know i don't want to keep diagramming this in here it's not that important what you could do with next.js which is really cool is instead of routing everything through the page files you can do what we did in the example earlier where we have index.tsx lazy load something else this something else could have a react router inside of it and then you can let's see if yeah it's going to complain about those things where's the config here's the config you redirect any route to go to your destination and as long as you do this you are effectively converting all of the routes to point to that one static page you made and effectively turning this into create react app theoretically if you're not using any weird [ __ ] you would be able to copy paste the root and the entire code base from your create react app here return the root in this dynamically mounted home and that would behave nearly identically to create react app at which point you can start opting out individual routes buying into next's routing if you choose to and moving more in a server side next js direction or you could not do that keep doing things the way you've always done it and work directly within the like create a react router that you pulled in there i will say the react router experience if you do plan on staying on it is likely going to be better in remix i have heard some rough stories of moving from create react app to remix for other reasons around dependencies and expectations with those and weirdness with how remix hydrates css and expects like css and js to work i don't know too much about that i'm not deep enough in the remix community and even if i was the solutions that it breaks are things i don't recommend so this isn't the thing i personally wouldn't recommend remix for but you should be considerate if you want to keep using react router very heavily around which parts how did i put this if you're using create react app and you're really bought into react router look at the other things you really bought into and make sure people have happy paths for that in remix if that's the direction you choose to go generally i find next js and v both have happy paths for almost anything big and i've made both work for all sorts of weird [ __ ] i don't have the same confidence in remix largely because i haven't used it as much so know that that exists hell of me some vite though really missing hmr and remix yeah i forgot about that point with remix that's actually a really good point that's painful uh remix doesn't for those who don't know hmr is hot module reload it means that if you have a page that you're doing or doing development on with 15 things in it and you change one component that one component can change without the whole page re-rendering i i rely on this heavily in dev now this is one of the things that dan abramov from uh redux who's now core react team worked really hard on was making sure as a react developer you could keep your react like dom stable while making changes within it it makes dev really fast and a generally great experience i yeah i couldn't live without it personally but with your solutions really fast i can see why people would push against it it also introduces potential impossible states where you change and init it doesn't hot reload the init level and you end up in a weird like erroneous state between the two do i like remix again i'll go on this rant eventually since i started hanging out with the community more and seeing what they're doing i'm much more hyped on the potential i hadn't seen how the primitives could be misused and i think that's one of the most important things for me like i've complained about the react or the next js docs forever they don't they don't admit to the weaknesses of next and they don't encourage good practice around them remix doesn't either and that's fine remixes docks are way better though which is why it hurts more in my opinion since remixes docs tell you exactly how you should use remix it's hard to get insight on how you probably shouldn't but would be able to do a lot of cool stuff with seeing people off you skate and reverse engineer the loader and like uh the loader pattern and the i forgot their mutation pattern it has a different name but hijacking those to do like a trpc type solution is really cool or somebody like maple and the cool like type definition stuff and generics they've built to make a good story between the front and back in remix like the community is doing really cool stuff there and i don't want to discount that it resolves a lot of my complaints with the framework that all said is not where i need it to be and i'm concerned about the maintaining team and some of the decisions they're making in particular around like the optics and the community management if remix succeeds it's because of the community and the people working really hard to do awesome stuff with it yeah there's a future where i really like remix but we're not in that future just yet so we're gonna keep talking about these things cool so have we exhausted the create react app topic time to move on because we're uh how many hours in two hours in since i hit go live




## STREAM VOD Astro 1.0, SolidStartRemix Drama, Passwords are bad, Next error logging and more - 20220811
they are on who you are while you're here today fred yeah thanks for having me back on super excited to be here um i think we were just saying last time i was on you were like this many viewers and now it's this many viewers it's a very different experience yeah it's a whole new world hopefully i'm decent at interviews now you're actually the first guest i've had in a while now that i didn't write like an interview guide for ahead of time i've actually been sending out like a notion doc with like a bunch of planned questions and like uh like planned for the whole thing and this was so last minute and also i know you're good enough at this stuff at this point that i didn't think it was necessary but it's it's nice it's gonna be like it's all right like the good old days we're promise under delivery yeah this will be an old school just kind of two people chatting um yeah my name's fred um i work on a project called astro which is a way to build websites faster faster websites faster um we just did our v1 launch and if you don't know me from that i also worked on a project called skypack snowpack pica i've just been doing open source for a long time and love building tools for developers fantastic i can say on my site in particular i caught on to you early when i saw all the work that you were doing on the snowpack stuff i was super hyped on that because i was a seasoned webpack hater at the time i had moved multiple large code bases at twitch off of webpack one or two up to four and i've i've seen some [ __ ] and i will never put anyone i work with through that again if i can avoid it and it was i mean we were all webpack haters it was just were you good at webpack or bad at it but everyone had some axe to grind yeah abs oh god i i i would argue that the how i put this the the sin that is create react app is but a mere response to the greater sin that was webpack configuration poetic yeah so thank you for the work you did to help me escape that chaotic world i really appreciated snowpack early and i think it set the standard for look you can challenge the norm you can take something as big an everyday standard that we all live on as webpack and we're good like that's a thing you can just break away from and i think that we quickly saw the impact of that especially with other things like veets spawning up and the move to astro i think made a lot of sense want to talk a bit about how you went from fighting webpack to fighting the web itself no it went from fighting webpack to fighting vee um vee came up at the same time as us and just did a really good job at basically what we were trying to do much faster and just kind of they did a great job with it so pretty quickly the ecosystem started to move if you've used veed it's very similar what snowpack was trying to do but um they've come so far now we saw that as an opportunity to actually build something on top of these tools instead of building that level of tools so astros now was built on top of snowpack now it's on top of v and it essentially lets us be much more opinionated where veed is really flexible it's a build tool all these other tools are cropping up on top of it astro is much more about how you can basically take an opinionated take on what web development should look like in 2022 um very much challenging now a different layer of the stack which is instead of challenging webpack we're challenging next js the kind of current suite of spa frameworks makes a ton of sense i have seen people who are asking specifically about what is astro and i'm a little disappointed in myself because i think i talk about astra a lot on stream but clearly i don't with you here would you be down to give an overview of astro as i scroll through the website ominously i fixed this right before the stream and my laptop fell asleep and woke up and broke it again no worries i'll start talking um we just launched a new website yeah this is new as of yesterday so we're super super excited about this you might even see in the little text on that little card there the source of this quote is theo um so theo i think really early on tried out astro moved a site to it it was just like you know this kind of what is astro it's it's this story we're trying to tell this story for every website fun fact this was the same day that i started using trpc maybe they responded maybe trpc is responsible we don't know yeah i i specifically remember i saw astros like oh the people who made snowpack are working on a better way to make static websites i've always felt like next was too heavy for my static use cases i would love to dig into this and see like how realistic an option it is for me to use for my like personal and brand site t3.gg at the time it was just my personal site then it became the company site then it went back to my personal site when the company moved to ping and yeah this tweet did really well i expected it to take me a few hours if not days to move over literally took me about an hour of just changing class name to class a few places and then i was good and the difference was immediate and to this day like t3 dot gg still runs on probably an old version at this point uh no it's a 1.0 beta version of some form nice nice yeah yeah so that's kind of the perfect like asteroid in a nutshell we are a framework that's mainly focused on building i wouldn't say static sites anymore because we do support ssr in addition to static sites but much more like what we call content focused sites so if you're trying to build a marketing site a home page for you know anything that's trying to get content to a user to tell a story or sell you something that's that's where we try to fit into the stack so we're not if you're building superhuman or anything that's like inboxy dashboardy super damn ping would be a terrible thing to build at astro but things marketing site would be a great thing to build with astro we end up basically stripping out all of your javascript and letting you opt in to javascript where you need it so you've got a button um you can make that interactive you have like a header that has some sort of cool drop down effect you can make that interactive but unlike every other framework that basically sends your whole site down as a javascript application we choose this more traditional approach we'll strip all that out and you get these islands of interactivity what we call island architecture that's kind of the magic of astro that makes it a much better choice for something that's about speed performance and doesn't have a lot of interactive data that you need to worry about managing i i think i am ready to push one of my first astro hut takes on you and i'm curious what your thoughts are it's a way i've been framing it more and more as i talk about with other devs of the modern front end frameworks astro is by far the most back end because astro is the only one of the modern frameworks that doesn't provide javascript that runs on the client when you're writing astro the code you write almost entirely is running on a server and if you want it to run a client you're importing that from something else yeah so to anyone listening the way astra does this front-end interactivity is by supporting react or swelter view so it's asteroids like the framework and it's also this language for writing html that has no client focus whatsoever um so yeah we're like we say server first which i think everyone thinks means like oh cool they do server rendering but like no like literally an astro component that you write can't run in the client we didn't design the language to do that um we want you to use whatever framework that you're already using for the client like that's what react was designed for they all have to deal with reactivity and updating on state changes and when you interact with it like that's all stuff that those languages took on as complexity because it's complexity it's needed on the front end but i think we're the first to write a purely back and like server first language where we don't have to worry about state or anything that can you know use your interactivity we're just helping you render html which is what most of our web servers are doing today anyway even if you're using xjs a lot of that's getting rendered on the server so why are you using a language that's only you know has its roots and all the complexity of the front end absolutely and i've found on i found so many weird unexpected niceties as i use and play with astro on other projects like of the modern web dev frameworks the things i've played with it is by far the one i missed trpc in the least and the reason for that is i don't have to build a bridge between the back end and the front end the back end is just putting the values it gets in the front end astro is the only web framework right now or i can in the like same file in the same indentation level await something from prisma have some data i got from prisma and then inline dump that in the html type safely getting like the exact value i would expect there without having to do some crazy function wrapping or different like file breaks or having a compiler compile out the prismacode on client but still have it on server and all these other parts necessary because astro is just creating effectively an html file that the client consumes and any javascript within there is something you brought yourself that allows me as the developer to safely do crazy things i never could before yeah that my hot take that i like to throw around is like it's astros like if php had the dev experience of an xjs like there was some great stuff with not having to deal with all this isomorphic web application for the types of sites that we care about we want it to feel like just rendering html it's a much much simpler goal than what a lot of these frameworks have built up absolutely agree the way i put it when i first was arguing in favor of astro because people i remember the first pushback was obviously the usual but do we need another framework but the second layer of feedback in like pushback was but why not just use html and i came in and raised my hand and said hey i hate writing just html because my dev tools make me faster even if i'm shipping a bunch of javascript things like hmr things like a web or a server that auto hosts itself when you npm run dev things like the ability to install packages and css frameworks and all these other tools the ability to when i need to fetch things from back end or read from files could i go build all these systems myself sure but the beauty of astro is how it solves all of the problems that things like next js things like gatsby things like even like to an extent tools like 11t but a lot harder on this side i think it feels like the dx i get from next js and the way i described it is for the first time the dx i get from javascript came all the way to html yeah yeah that's something we're really proud of and kind of to that point like so we launched yesterday hacker news front page all that my fee like it was actually pretty well received for as far as hacker news goes but my favorite part was all like the snarky comments were like man this just feels like we're going back to like basics with web development like all we're doing is like old school servers we've been doing that for years it's like exactly like that's the point this was actually a good model that we moved away from because the developer experience was so awesome in next.js but that's not a bad model like we should can we explore that again it's like astros whole pitch so i love seeing those because even the snarky hacker news comments are like right on exactly what we're trying to do here which you can't always say yeah it is nice when hacker news's digs are actually your goal like that's exactly it's a rare overlap but it's really nice when it happens and yeah i absolutely agree like as a developer that has the pleasure of hanging out really deep in things like astra or in things like the next js world where i have all of these wonderful web dev tools and then i have to go back and either my choices are use something that by default ships 200 kilobytes of javascript to my user or use something that is not that level of a developer experience so i am now finally in a place where i have the best of both and i really feel that difference here like i can take the way i use tailwind i can take the way i save and see a hot reload i can take the weird obscure packages that i'm using hell i can even take my versailles server functions and call those within astro directly like it is serving that role in a way i didn't know how much i needed and one of my spiciest takes is astro introduced me to why people like remix so much because i could finally see the value of having like the back end and the markup in the same file again it is the php experience sure but having that that straightforward in astro was so cool that it made me revisit remix realized that remix was a middle ground that i don't really live for or that i'm like here for it's not like solving problems i have a lot like either my stuff's highly interactive or it's barely interactive and those two sides are served very well by astro and by next.js and it's yeah you guys have positioned yourselves very well and i'm curious like how did you end up stumbling on this positioning was it like a thing you were working on and it became this was it a thing that you felt was needed in the space like what led to astro being an html framework oh yeah that's a good i mean it's a collection of a lot of people so i think we all probably have different answers to that um like nate for example on the team had built a project called microsite which was literally like you can see the dna of the astro in that project it was only for pre-act but it had partial hydration um so he had kind of independently been looking at this um my experience that kind of led me to this was we had built the actual the homepage for snowpack.dev so snowpack had a website doc site and we built it with 11d and we're really happy with it it was you know we authored it in without that must have been nunjux you know we used some 11d templating language and there was a couple of interactive experiences there was like a catalog for searching plugins and a couple of interactive things but you know it's a doc site so it's mostly about reading docs and alex russell when we launched it like tweeted at me and then dm me like oh my god this is so fast like how did you do it and if you know alex chelsea he's like this performance grandpa of twitter like he's just always shaking his hand at react and slow slow sights um and he like like we did not care about performance we built it we just used 11d which has that kind of built into its its framework it's like we're not going to let you use javascript you have to go out and like bring your own javascript and because of that just totally a shift of framing you can still do it it's just not given to you we ended up not using you know barely any or only on the pages we needed the rest was all xero.js so having him be like this is cool and i may be like why is this cool like kind of kicked me into realizing there was something here that was missing from the current set of frameworks and again with v coming along snowpack was kind of realizing like i think we knew we needed to go somewhere else um with our focus because pete was just doing such a good job so it right time right place um right technology i don't know how i feel about alex getting that much credit but beyond that i love that origin story i want to give two quick shout outs the first is i see tanner in chat on youtube shout out tanner linsley creator of tan stack 10 stack query previously known as react query all the other bunch of other fun stuff that we talk about great having you here man i also saw somebody mention on twitch chat that they were watching me one of the vods because i don't know if i have any like uploaded edits but somebody's holding a vod of me playing with astro on youtube and then had this recommended and popped over to watch this instead so it's cool to know that people are still checking out the older astro content i definitely plan to do more i yeah something i have not thought enough about is how do i put it what's changed i have not played enough with the ssr and it's super cool but since we last chatted now we're at an official 1.0 like what does that 1.0 launch mean to you or things added where things change like is it a new type of beta or is this like a real change what is 1.0 and what's changed um yeah a lot's changed don't so what i remember so specifically from walking through this with you is like it was oh maybe oh dot like oh like 004 it was early days um and i think like 10 different things broke and you were like come on like this is like it was nothing for anything huge there's always like a lot of paper cuts um you know fast forward a year and i think that's really that stability story is what i think i'm most proud that we've had um so we have some great dev tools now like the vs code extension um by developer name erica on the team is just awesome um those are just really night and day from where they were before and i don't think i really gave credit to how important having good like if you're gonna build your own language you need good dev tools and it's kind of on you to build them um that's been a huge huge improvement from when we last uh talked about astro um other than just general stability we got a couple of cool things i'd say everything was of the theme of like okay we threw a lot on the wall to see what would stick let's like refine refine refine so moving from snowpack to v was an early kind of story like that which was a huge change but paid off beautifully um we tried to build our own component in markdown syntax and really really struggled to get that right markdown you think it was a simple language but like as soon as soon as you start adding jsx expressions it just all kind of blows up and yeah kind of near the end we realized we were fighting ourselves more than anyone on that so moving to mdx for if you want to mix markdown and components lets us basically tap into that huge ecosystem all the tools around that um they've been awesome and that's been a really fun kind of v1 launch story for us i it was blown away making a move that bold that close to launch like without much prior announcement either it's like by the way we're changing the syntax for one of the main input methods for our framework this is the 1.0 that was you can only do that when you're v0 you can never do that again um yeah so to be clear we have a legacy flag you can go back to the old behavior but what made it easier to stomach is there were just so many bugs piling up that like it wasn't clear little fixes it was oh there's something fundamentally wrong with what we built which after a couple years of doing this you start to get a feel for like this isn't going to be fixed by just closing these issues so yeah it was tough um but mdx has been really awesome so far and um post launch i think now that it's stabilized a bit people are playing around with some really cool things i think you have a really compelling story to tell here like maybe not even now but in a reflection in the future of like not built here or uh non-vented hear syndrome and how you've overcame it specifically like both moving from snowpack to vt and from astromark down to mdx like those are two huge moves to make in a framework and seeing the success you guys have found with both has been huge i don't know yeah i'd be so curious if this is a common story because i just saw something that is doing a pretty good talk if i've learned anything from people i've talked to this is not very common most people don't move off of an old choice like this it's really scary and really hard um yeah i don't i actually did a kind of walk through of when we were deciding to move away from snowpack i think i did like the six things i learned building snowpack and like a lot of them were like mistakes made and why snowpack didn't really live up to the promise that vead eventually delivered on i think i would love to do another one of those yeah you did that's right i think i said to you if you're like you use the same passive voice everywhere i was like okay i'm gonna fix that um yeah that was a really um i should do another one of those for astro i mean i think the whole team kind of came together but i think our approach in the early days was like everything is cool let's do everything and i think then we had to it just forced us to we would have drowned in it if we hadn't trimmed that back so i'm sure other projects maybe incrementally get their way there but we really were just like i don't know our first users love markdown and they want components let's do it um it was a lot of fun but obviously then you kind of got to eat your vegetables and clean it up absolutely i think that the opposite would have been much more painful though like if you had started from mdx and didn't have the in-house experience of trying to roll your own then the little things that it didn't do would have frustrated you to the point where you wish you had invented your own then you would have went and did it and been way more committed to sticking through with it rather than the other way so i'd argue in some ways what you did may have led to you making the the better decision because you made the the worst decision early because if you make the better decision early it's if you ever switch you're way more [ __ ] yeah true true i a big thing was also we thought it was impossible so mdx being a jsx like you think of it as react we thought we couldn't get partial hydration like we thought it would just throw us into spa world like the whole page becomes a single js app and nate really cracked like the idea of having kind of behind the scenes we have this dsx run time for astra that we don't talk a lot about because we don't really know what to do with it but we're starting to play around with it more like with a v test integration how are we gonna actually test astro components and turns out you can kind of throw an astro component in a jsx file and it as long as it supports running it that way it runs so there's some cool stuff we're going to do with that but it was really like we don't think it's possible let's just throw something at the wall and now we've yeah even the vegetables yeah i was i was very surprised to see how quickly you guys were able to make that switch and i i hadn't even thought of things like the testing story that's terrifying to me god i uh got testing markdown yeah yeah i mean it's why like solid i think get some credit for just like you know what we can make jsx better without leaving jsx and i think we weren't we couldn't see that same story for partial hydration um maybe it's possible but you end up doing some pretty wild stuff and i'm gonna wrap your components in dynamic imports at the end of the day the after syntax for us is more about this is something that we can build that is partial hydration kind of islands first in a way that's really exciting and then we get to play with all the frameworks so bring vu brings felt like it's not we don't have to just choose gsx even though that's react that's a huge ecosystem it's still you know you're missing out on everyone coming from vue stealth etc i i think that you guys are also hiding jsx in a few more places than people might think the markup syntax in astro components i it took me a bit to realize what you guys were cleverly doing there because it doesn't feel quite as much like jsx as it is i want to talk a bit about the markup in astro components and how that works i mean if i had it my way i think it would be jsx the rest of the team has talked me out of that and i think really prefers that it's truly html so literally any snippet of html you can copy into an astro component and it works so we have that really nice story of just compatibility and copy pasting and not you mentioned having to rewrite your class names coming from jsx the alternative is true coming from html you don't have to rewrite anything but then i'd say what we've done most is sprinkle in like jsx support into html so you know source equals and then you do a curly bracket now you can add an expression or a dynamic import or anything you want inside of that it's um it's weird it's like we sprinkled in jsx into html but in doing so we created something that also feels like svelte and view so we kind of the goal is that we feel familiar to everyone there's kind of something to lean on when you come to astro that you might already know that'll help you out another one of my like semi-spicy takes on things astro made me like more i i want to be very clear i still do not like sfcs almost entirely especially once there are now stateful behaviors and you have like a piece you want to break out so that you can conditionally render it and things like that the ability to take something in a component copy paste it above and now you have another component in the same file is something that i do dozens of times every time i code it's not a workflow i'm willing to give up but for whatever reason when the way i'm building is not things that change specifically the parts that do change are usually under a javascript boundary that i'm importing from separately and i can do whatever i want to there i've started to understand some of why people like sfcs i should say if i want sfcs for chat a single file component the idea is a component like one thing in the ui is one file you can't have two components that like one calls the other within one file you'd have to separate those across files i really like the composability that not having sfcs offers that said astro is convincing me that for staticy use cases i do like sfcs to an extent yeah it's i mean it's a trade-off i i missed that also to to be clear i react was one of the first frameworks i really really fell in love with so that idea of multiple front yeah pull them out when you need them i think is kind of the the guidance there and like keep them all in one file if you don't that's something i still do but it's really hard to do that and then not feel like you're in a javascript file and what we really want with asteroids it should feel like html and you're opting into the javascript features you want when you need them that's just kind of i can't think of a way to do that with each maybe there is a way but first fell up in view and i think that's more what they're that's the trade-off they're making yep you can't do that but look now you can write your css in this file and not have to bring in some css library from another you know npm package um it's a trade-off it's one we love but it's a trade-off sorry just uh responding something in chat uh anyways i yeah i i wish i liked sfcs more because it feels like almost every framework is using them like the two that aren't heavy committed to it are solid and react and god i i need to have ryan on asap because i am falling in love with solid all over again and i one of the things that's exciting for me is the way i can combine astro with solid i see a very promising story there where i have like a three to ten kilobyte like a solid binary that i throw into astro just like in a mostly static website that i've built put one api endpoint that we'll have access to to do the pre-load and then like dynamic behaviors from there like more and more i'm seeing very very compelling stories there i'd love to hear a bit about your experience like working with these other frameworks and solid in particular and how those relationships have been going as you continue working on sol or on astro knowing that like these other things you're not necessarily competing with them you're actually trying to integrate with them what's that been like how's the response been from the js side of the dev world yeah i mean it's been awesome it's it's definitely i'd say ryan of everyone this is a much smaller pitch to a very small audience but astro is actually this really fun tool for framework authors because you imagine you're i want to build my own framework what does that look like cool i built like i built solid all right now where is my next js like where is my framework like no one because we've all started kind of bought into these you know the next.js felt kit the next like the framework specific runtime all of a sudden like the bar to build a new framework has just risen dramatically so solids working on their solid start but in the meantime like we can kind of be this place where like if you build a new framework just build an integration to render and that's all you need inside of astro that's been really fun to work with them because basically to get them a runtime early i think they were one of the first integrations we launched with after like the big the big three the big four um and yeah ryan's just an awesome person who also that whole community cares about performance astro cares about performance there's a lot of overlap there so it's hard supporting every framework it's definitely the biggest risk i think we take just because any time you're competing with someone who is fully focused on one framework and you're juggling five of those it's very you know it's your the cards are stacked against you but i think what we bring to the table is just that that's not the point anymore with astro it's like that's a tool to do a job but it doesn't have to be you know where you handle your routing inside of a react component or a cell component um instead it's just one tool of many that is kind of built on top of this this foundation so it's been really fun kind of working just with something so flexible where everyone is just kind of plugging in and then those users can be happy other users can you can mix and match that's been an interesting story um yeah it's it's been a lot of work but a lot of rewarding stuff's come out of it yeah i can't agree more in particular the amount of like collaboration from the solid guys has been nuts like before i even existed on the internet i had ryan carnato in my dms like chatting about my own interest in solid and just it's they are so open to talking about pretty much anything and they're genuinely trying as hard as they can to make the web better and it sucks to see people trying to take like clout shots when they can i want to shout out one other person in particular quick though uh a certain person from the solid community that's recently started full-time at astro wanna give our boy dan a quick shout out i was gonna say that's the the biggest i don't know showing of collaboration yeah uh literally dan uh danju-chan joined our steam from solid so i think it started kind of checking us out after ryan had been talking about it um got involved with our docs team and then got involved with astro core and just you know just a really smart uh i don't know start beginning smart community of framework people who we've really enjoyed working with so dan's awesome i'm really excited to have him on the team as of essentially our launch yesterday kind of got lost in the noise but having him joining working on some sort of some product stuff some doc stuff some education stuff is really really fun yeah dan's been great to work with and chat with definitely follow him on twitter or follow him on twitch if you're not already the link's been dropped in chat give er good jataneum a follow one of the other few programming streamers that talks a lot about these more modern web dev tools so he i would say he's like an in-between of ryan and me in terms of like production quality and topics but he's a really nice extremely animorph from theodore ryan with just damn in the middle someone could check and build is he live right now no i feel bad he knows better this is my time he should absolutely know better than to go live at 2 p.m on a wednesday i think he started this morning and just hasn't stopped that also makes sense to be fair uh well give him a shout out in chat and then come back here because we need y'all here also see his twitter being link definitely follow him on there as well huge shout out to dan on the topic of the solid guys and how collaborative they are though wanna chat a bit about bad collaboration in the space because it's really sad to see like i i'll go on a personal rant quick in that i'm spicy i know that i can see how when somebody first encounters theo in one of theo's hot takes they're not sure if i'm here to make things better if i'm just here to instigate and cloud farm i understand that if people are turned off by the way i do things initially and they don't want to talk with me further fine don't but man the people who do stand out so much and it's so awesome to have people like like people you would never have even expected like a bunch of the guys that first sell are in my dm's regularly hopping on every single issue and detail i complain about people like fred who take every opportunity to let me like copy edit their blog posts and like refine their message like fred gave me access to the astro twitter account like the there's like two sides of this like like the amount of like there's versailles people in chat right now love y'all so much we have like that side of things and then we have the remix side where i comment on how the template that it starts with has a really unintuitive control flow and the response is well if you read all 200 pages of the docs you might understand yeah it's it's it's tough i mean we yeah we get to work with everyone which is a really fun part of this and i think what our story is is like yeah like use astro for some things use remix use next for others like you don't have to be the tool for everyone but it's hard to kind of internally i don't know it's hard to internalize that in your community and in your own in your own self sometimes i don't know it gets hard to actually remember that absolutely i i saw a chat message that hasn't left my head so in my mind since i saw it the astro and spelt stack the ass stack got to make it a thing no absolutely not i'm going to shut that down each emoji is the logo absolutely not um no fun yeah yeah i mean it's it's one of those things where i don't know it's one of my favorite things about our launch was i think we got a shout out from the solid team celebrating launch from the eleventy team um from versailles like all these different like everyone just kind of had their own obviously like we're all competing to you know every user is someone who could be a user of your product and that makes you feel good because your stores go up but it's all you know open source collaborative software at the end of the day i think it's you know what were the old movie studios that would send like pies and cakes to each other when they like beat each other in the box office like you kind of have to have some fun and then a little bit of empathy in this process as a software developer totally agree i'm going to ask two questions i'm curious if you can see what the first one's leading to would you consider versailles competition with aws um i don't you really have to break that apart i think they're competing for the same users i don't know if they're trying to build the same thing if that makes sense even though vercell's largely building on top of aws yeah but i think you see with how they're working in edge workers and middleware like i think they're they see themselves as something different so is astra competing with veet absolutely not so you try you this is your second time doing this yes it is um yeah this is a roundabout way too you made the pitch to framework authors earlier like if you're making solid and you want to make a full stack framework astra is the place to start previously that place was vet no i think snowpack was in competition of v but no i forgot you've done this before no absolutely i i think we see ourselves more as so i i think you're more on the money when you pitched it like we've positioned ourselves as this like almost other side of the spectrum that like nextjs and i'd say sveltkit and remix and nux they're all for building applications with a lot of interactivity or some amount of data that you need to state all those things and i think 60 of the web i'm trying to remember where i found that number but like a good part of the web is just like the other side of that spectrum content marketing publishing blogs portfolios like and we've thrown all users into that other side tools that were built for that one side and it really hasn't been a tool other than 11d hugo you know these markdown focus static site builders we're trying to be more like that so i'd say we're competing with next.js in that way and not v which would i'd say power both of us in a perfect world but also like the aws and xps thing i don't think we're competing for the same users as next year's or at least i don't know gatsby maybe kind of stalls somewhere in there but i think more we're trying to build something that's designed for a totally different use case that nextjs is is going after that makes sense i i think the way i'm thinking of it is like with versailles they're not directly competing with aws obviously like i need my database i need my kubernetes clusters i need whatever the hell i'm like throwing on aws but i can i find myself trying to move off of it as much as possible in favor of things like uh versel and next.js i think that as a framework author i would find myself trying to leave vet in favor of astro as much as possible as the starting point because of not because you're better than veet but you've solved a bunch of the problems that i would be solving myself the same exact way that with vercell they're solving a lot of the problems like i had to build my own ci cd build my own deploy flows set up my own lambdas and scaling and all of these other things build a gateway build all this crap first cell lets me do that in two clicks do you feel like astro has a similar relationship to veton that way i think maybe it's more that veed is changing so i think this is why i don't see that at all is because what i see veed is i see this thing that we are building on top of sveltekit is building on top of next is building on top of i don't know if as many people are coming to veep literally holding in their hands and using it as much as they are using it implicitly through one of these other frameworks that kind of connects the pieces a bit more gives you routing gives you server-side rendering i don't i might one day go after that but right now like if you need ssr like v you want to use v with something else whether that's a plug-in that does it for you or a tool like astr that sits on top of it um but if you're just building like a spa with no server side rendering like that's i think you're just on some different path um that's way more like you're trying to you're basically trying to recreate your own astro on top of beat at that point or your own next jhouse that makes a lot of sense i also think that it's similar to how people view or view like versailles the way to deploy your front ends the reason it works like that is because it deploys your back end like that's the reason that that happens i think aster is in the same misleading territory of like it's a front-end framework that lets you build html but the reason it can do that is it runs on the server or your computer and generates html yeah i mean this is i've only really realized and connected the dots here like nextgs and vercell being together like if you try to deploy next yes to a non-versaille host to anywhere else like you start to lose a lot of stuff i didn't realize how much they paired together um stuff like isr where it's like we're going to like re like clear out your cache when the content changes so that it gets rebuilt if you move off of your cell that's actually you basically can't have a cdn in front of it because it has to go and ask the server itself hey is this still good so every time you get that request like they all have to go through the cdn to the server purcell like sits on top of next and then can like balance that in a really really clever way so you still have a cdn but you're getting the isr but i don't know if i really put together like that's where i think the most interesting part of the story is right now is like these frameworks clearly have things that they no one else can do when they have a host and i really don't want to build a host so like what do we do about that um i think versus doing a good job of making their build output api um if anyone's seen that it's like this kind of like very not like flashy release that's actually super super important for framework authors where you can essentially build into your framework support for image optimization isr all these things basically like you're building your own integrations into vircell that next has had for years that's a really interesting story because that means that every framework author all of a sudden just by having a really good personal integration is telling a better deployed ad to like it's the same like edge that they have with next js but now for every framework that's really really interesting to me yeah i will defend next a bit here uh i do know enough people on like the for on the like deploy story side specifically people who work at uh netlify as well as people who work at a serverless stack and they complain about next.js a lot because they have customers asking for all of these features and they have successfully added them all at like relatively high pain points but i believe both serverless stack as well as uh what's it called uh flight control by flybayer the creator of blitzjs who's also in my combinator batch they both are like we deploy on your aws but we'll set up on cloud f or cloudformation all that all the cdn stuff all of the isr stuff you can roll it on your own infra now but it also shows how much work it was to set those things up in the first place especially crazy now that they have revealed most of that as versailles integrations directly that others can do as much as this was like the coupling because vercell owns next.js and they can do things others can't i don't think they're treating it that way i think they're treating it as a method to test out these new dx experiences and workflows to figure out what does and doesn't work and aggressively throw out the things that don't which they're getting better about especially recently and as a result especially now i think it's also part of why they brought in uh or rich for uh the or words they brought in rich from the salt community because they wanted to consume the stuff that was working for next js and take i it really feels like they're trying to push the web forward both the developer experience and the performance and as much as that tight coupling has made it harder to deploy next.js it hasn't made it impossible and all of the parts they've added are accessible in other ways and i i do think it is for the better of the web and it's easy to hear these words and think oh they're just trying to enforce a monopoly on like their framework and their stack they're using next.js to drive people to versailles sure but what i see is a lot of progress that can only happen due to the coupling of those things yeah you say the word defend i hope it didn't come off like that was a criticism of them given the build output api they're doing exactly that they're saying like anyone can tap into these features i think it's that's actually even strategically more interesting because it means every framework would have that same edge on versailles which isn't about them having like this closed garden but more about like we've built the hooks that you as a framework author need to implement image optimization or isr and all these cool features so yeah maybe a year ago you could have said it was like unfair edge even though they're you know they're building it that's it's their playground to play in but i'd say now it's more of an unfair edge that versailles has by working with the framework authors and giving those to every framework um so not unfair anymore but just like smart competitively strategically very smart like if there are things that we can ship that only work on versailles but still are much better like why would we not ship that especially if a user comes to our open source project and implements those absolutely agree there are two shout outs on to make quick uh dan actually raided us and is hanging out here now he brought 23 viewers with him shout out titanium thank you so much for stopping by great to have you here sorry about all the drama i don't know if you've heard but we were shouting you out earlier fantastic to have you here man why were you streaming over my hours though you know better than that come on i also want to shout out uh james craig on youtube chat donated a bunch of money and was hyped that you're on here apparently you're a lovely chap so big shout out for that as well thank you all so much anyways what uh there wasn't too much drama i didn't mean to inject myself into it though i just i i feel like i come off like somebody has like a collection of screenshots that they've been simmering over um but yeah this whole this whole drama of just like i don't know if anyone's working in open source out there don't just like start fights and then delete your tweets like you can do better than that yeah i i remember i actually specifically remember having uh i think it was like the first time i went to a reacting meetup people recognized me as the person who like tried to stop having fights with remix because they the only thing they ever saw was that he was like hey guys let's lay down the sword and like it was the day where ryan just went off on me and deleted it all before i had woken up so i had a bunch of notifications from tags from ryan florence and didn't see any of it because it was deleted by the time i had woken up and just tweeted something like hey guys can we stop this like i i'm not trying to start [ __ ] i'm just trying to like talk tech and dm'd for a bit had a good conversation i did the reaction video to the admittedly very good ryan florence uh react conf talk that was fantastic the react in the park uh data fetching one one of my favorite talks i've ever watched in the space and i i wish they could chill but like the fact that he hasn't been on twitter for basically a month other than to [ __ ] on astro and to [ __ ] on solid and then delete all of the history of both like i i hate to say do the whole if you don't have anything nice to say don't say anything at all [ __ ] but like seriously it feels like that account only exists to [ __ ] talk right now and like what the hell well it's also just like i i don't it's it's something specific about like i can't believe they ripped us off which i mean i think like there's a lot to unpack in the most recent one which seemed to be like literally a copy paste versus like an inspiration and licensing and open source it's really hard like i think someone had a really good like things i've copied from other projects thread and i was thinking about making my own because like our router is based off of like literally a copy paste from spell kit um god we grabbed some stuff from the internally they had some great helpers that we just wanted to use the only rule you need to follow in open source is that you need to attribute that like mit license is like one of the best thing that's ever happened in like all of like computer history of the fact that that became the de facto like when you're starting a repo that's what people expect that's amazing because it means you can do whatever you want with this code you just aren't holding liable the person who started like using it you're not gonna like give them your like this you know just because i forked react doesn't mean like facebook has endorsed my product um and then you just have to say like i'm gonna give credit like it's just this like very human thing about giving credit that really really matters to people and it's i think because the bar is so low but it's also just like this like thing that i think makes it really clear like hey i didn't do this in bad faith i saw your code i loved it like i'm giving you credit because this is really useful to me um we've done that a ton it's like it's very i think that's what i think rubs me the wrong way is just like it's so fundamental to how open source works like it's like remix culture it's so ironic that that's the name because it's literally you're remixing other things when you take something out of another code base you need to attribute it i i think that's a huge miss here but it also like you can also just be a human and reach out to that person and ask what's up it's usually a mistake because licensing is not really well taught it's not really well understood like even saying like credit here to this team isn't really accurate like proper licensing like you need to like include their license and your license it's like this thing that you can never get rid of but it's showing that you cared enough to go through that process want to guess how many instances of the word remix or how many files have remix or remix credit in the solid start github repo as of today i don't know if i can easily confirm otherwise it's not easy to search in old state on github but most of these i'm checking them are older not all of them but a significant number of them yeah there are 13 files that have a remix credit there they're taking this seriously they are not stealing code for the sake of it and if there's anybody in the world who could [ __ ] about stolen code it's me i searched like a very specific string from one of my stupid pokemon apps i did a live stream on for 400 plus public results on github for a very unique string that had to come from my project like i just it wasn't like a tutorial i was just coding live but that's fine i expect that it feels like they weren't ready for the consequences of going open source to an extent and they're scared of us forgetting about remix right now it sucks i like it it feels everything that happened here feels less like they're trying to make the web better more like they're trying to get credit for improvement starting to happen and that sucks because everybody we're talking to all the conversations were happening they're having our focus specifically around making the web better hell i had the guy who made angular on the show two weeks ago and you all know how i feel about angular but we did that because there are a few people at his level of their dedicating their whole lives to making the web better and we need to have those conversations and be part of the dialogue and the thing that hurts me the most isn't that like these guys are like evil [ __ ] it's actually the opposite it's that they are good and they make awesome stuff and i want to have them around for those conversations i know how these collaborations go and they go great if you'll sit here and talk about it but they're just not i'll also call out especially like i think the next js one was the one that came out most like hurt like how could next yes take our feature and make it their feature like this idea of like the layouts and nested routing like that's a good idea it's a really good idea you guys do deserve credit for it um but that also doesn't mean that like they can't then like you improved on next they're gonna improve on you it's just like it's it all feels like a conversation um that i think that's where the fundamental kind of misses here yeah absolutely yeah that's the routing is awesome it's very cool they deserve credit for pushing that forward i don't know if next would have gotten there in the same way that they are now moving without remix having kind of pushed that forward yeah as somebody who's a little tired of file based routing it's such a cool change and i do want like nested routing and the data loading patterns that come with it and pushing for that doesn't oh god it's yeah it's really frustrating i i have seen so many people ripping off my way of doing things on or making content hell i i know decently sized streamers who have either replicated or actually had the this is a dumb one in my screen share scene this scene i have an image that i use for my uh mask for the three by four vertical rounded corner i gave that image to one or two people and it is now spread across most of like dev streaming world because it's the nicest like because i have the nicest looking stream it's not the perfect way to do things it's not like the super ideal but it looks better than a rectangle in the corner like everyone else was doing before but i'm not going to call people out for that i don't care like my stream you're this hot shot streamer now you've changed what the most beautiful streams in the world they're the furthest thing from it but even this like 50 50 split view this is still like a newish thing and everyone has started doing this i god believe me i wish it was a just a border radius three pixel it is far from that easy to do anything in obs god i remember last time something was that easy for me to do in any of the things i was using but yeah i the point is i get excited about that because my goal making this channel and starting these streams and being on youtube wasn't to be the biggest streamer ever and put all the rest out of business it was understand the space improve the space and get us to a point specifically like my company at ping that we could do cooler stuff and help creators in cooler ways the goal was always explicitly that and this is more than anything like market research and the most successful i can be in terms of doing market research is collaborating with and helping everybody make better content like i joke that dan was live for like an hour of overlap between my like show starting and his ending but that's also like a collaborative opportunity to except now that he's here he brought his audience here we have validated him as a creator and anybody who had popped in for the last few minutes and moved over now has a show with 650 viewers across platforms validating that dan knows what he's talking about and you should follow him this type of like cyclical collaboration helps me understand the space better helps him succeed more helps you get more great content as an audience and we all do better as a result we're all competing with the same algorithms and competing to prove to people that more senior and more important dev conversations can happen on platforms like twitch and youtube we have the same goal we're fighting the same battle we should share resources and do things like that like one dumb thing i do is i try to with as many of like the dev youtubers as i can share the editor role access on uh the youtube studio so that we can look at each other's stats and compare and see what is it isn't working in the algorithm to help all of us have more data and do better on youtube yeah i remember seeing mr beast i think in some interviews saying like yeah the reason i'm successful is i've just tried everything and then share that with other people and they share with me what they've learned there's a lot of parallels here with open source and and software and it's just yeah like a group of people will always move faster than one person on their own i'd say more than anything it's leadership like the one of the best traits of or i would argue the definition of a leader is somebody who collaborates well like that's your role as a leader is to collaborate above below left and right like that's your job and a huge part of that is sharing knowledge to prevent people from making mistakes like a leader prevents failures that they are able to or have the context to prevent and that means collaboration and i god mr beast is inappropriately smart and thoughtful for being a youtuber it has always frustrated me to an extent but like his uh colin and samir interview as well as his mr beast interview are some of the most telling like what it actually means to be a creator talks i've ever seen one that screwed me up and i i've been choosing to not let this affect my like way of doing things too much somebody asked mr beast this was in a ludwig interview actually they asked him hey i don't really watch mr beast videos yet i might i want to go watch one after this to get started what's the best mr beast video what's your video you're most proud of what's your favorite to which he replied whatever i put out most recently if it wasn't my best video i wouldn't have uploaded it yeah that way of thinking is crazy to me and also it's kind of like what we do like we don't push out a new version if it doesn't improve the last version it's almost like he has a formula that he's constantly chipping away at and improving the same way we are building a package and improving it and putting it out like you wouldn't do a new major release of a framework if it wasn't better than the last version yeah i mean we i and you probably would like more live stream versus youtube content like when you put a youtube video it's out there i don't think you can really change much after the fact right you can remove from it you can blur and you can add pre-approved youtube library music to it that's pre-approved yeah for us we get to do like experimental releases and here's an rfc like it's i wonder if there's a part of this is it that's a collaboration between the creator of software and the audience of that software which is way more kind of like our community on discord is a lot of users it's people who have made contributions back to astro it's like a conversation um there's this analogy of like building something and like i think they use the term building a platform but i think it's like any framework also kind of fits this it's more of a garden than like an engineering project like you are constantly in communication with the plants when it sounds crazy saying this but like you know you're watering the planet it's not going to follow exactly where you want it to go but like you can't just then kill it and start over like you need to like okay follow that path follow that it's a living organism basically i think our community and community building is a lot more that um at least that's what i see in the work anyway i yeah the the role of community is both misunderstood and changing actively like i thought i had a good grasp of it and then out of nowhere create t3 app happened and i realized i don't know what the [ __ ] is going on anymore i yeah i said you're a framework author now theo i'm not i didn't do afraid i i updated the read me once twice i think that's all i've done and i like leave feedback in prs i did not start it i do not work on it it is not my project they ask me for thoughts on things sometimes but it is entirely nexil and julius running things on that nexul started it julius jumped in and like has been helping a ton as well it is their project and they are killing it we actually and we confirmed this quick yeah we just broke 5000 stars and now when i go to the stargazers page which is five thousand plus so i no longer get real metrics that sucks but if you hover over it the alt index still it'll show you it says five thousand plus on the alt text i just checked oh damn it so there's the repo of anybody here somehow hasn't started create t3 app i we're not here to talk about that though i do want to compare it to astro i've seen a few people asking particularly on youtube chat like how do i pick between next js and astro like when would i use one versus one when i use the other i would consider them like pretty far away from each other i think i did a diagram a while back it's like the top is is your site an app or a site and if it's an app it was go the react direction if it's a site it was the astro direction just stopped there basically and that's so funny um the headline that no one would let me launch with was build websites not web apps and i think that's kind of what you're getting at here that's a distinction i would make as well i think a framework for websites not web apps would be a good tag line for sure that said uh for those that don't know fred was stressing about the title here for at least a few days i you sent us mock-ups of this page with like five different titles before you even had like a thing here i i almost feel like you copped out by using my copy and doing a shorter title but i do love it this like a to b here is so good yeah yeah that's been that was a really fun card nate built that card but yeah it's i think that was a big lesson um i was trying to pitch it using that i mean website's not web apps that's still a good title but i was trying to be like the content framework because that's how we see astros like it's really good for these content sites that aren't data state heavy they're just content heavy but then i looked at i was kind of going back through old blog posts by like next and gatsby was one that i looked at and realizing for like years they just had this timeline headline which was um fast in every way that matters and realizing like oh that's like when i think of a content framework like that's the first one that i like at least the oldest like that was their original bread and butter is like you know pass your content through this graphql api and you'll build a content site um the fact that they were talking about performance and not like shaking you insane content like that was a huge realization for me it's like oh i'm like you kind of got to show not tell with what you're building um talk to that audience which is what we're trying to do here like speed is important to a content audience um and then there's just as you scroll down there's a lot of cool things that call out just the ease of use the kind of extensibility the animation yeah that's really cool um the thing we don't talk about as much which we really should oh first of all easter egg if you click api there there's a owen wilson sound tag that will play i don't know if that'll play on stream i think yeah is it it won't play on stream because of how i have things set up right now oh there's something well you'll get to hear it you'll get to enjoy it um oh yeah wow yeah it's not gonna play back on stream because on my audio set up but that was great well anyone can go to the site and check it out um yeah the like kind of flexibility of the language and also the flexibility of the framework itself so i think by forcing us to think of a framework like react or pre-actors felt um as something that you add on we kind of have to think of everything in that way so everything is essentially like an integration we call it it's something you add to astra so astro add react like run that command in your terminal and you get react uh pre-acts felt um image optimizations tailwind like they all have this ad command so that you don't have to spend a ton of time in config instead it just sets it all up for you it sets up your config file for you that's probably one of my favorite features that again that wouldn't make as much sense like a next yes if you're targeting an kind of expert application you maybe don't want like super pluggable maybe you want to customize it work with the config yourself but for what we're trying to do like yeah just being able to add tailwind with a single command that's that's really fun yeah i will say that a lot of our inspiration on create t3 app came directly from like the astro cli and the configuration that it allows specifically with astro ad like adding in parts don't want to sub tweet anything too hard right now but i've been playing with a lot of other app builders for various different projects recently and like one of them you had to pick between the tailwind template the auth template or the typescript template it's like give me give me all three please like come on and something that you'll love with our create astro wizard is it asks you how would you like to set up typescript like strict relaxed and recommended and then there's one that's like i don't i like i prefer not to use typescript and we say too bad you you need to use typescript you know that's that came from us you know right no did it really do you not know what happens when you create t3 app and you don't pick typescript oh oh my god yeah y'all that's we better be getting our credit at your repo i swear i did not do that actually i'm sure i see the app at latest you can see this on stream or on the screen right so if i click type script or i'm clicking javascript instead wrong answer using typescript instead i am sure now that you say that i saw this tweet and i'm sure it got stuck in my brain oh that's funny wrong answer we actually were just talking about making it a little less wrong answer feeling so i need to go write a tweet quick about how astro is stealing all of our stuff can somebody get me a screenshot of when astro throws the error actually i can do it quick uh it's npm create astro npm create astro uh do astro at latest it's just a nice way to kind of blow up the cache in case you've would you like to share just the basics yeah so there's a good reason which we try to explain here although i think you know we kind of miss the mark here so we try to freeze this as like see that's the thing we need to update this header because it's like not really clear that we're still setting up typescript for you anyway the idea is you don't need to write typescript we're not saying what you're saying which is like you're wrong for thinking this we're just saying astro has texture built in so we need to add a ts config because there's just no other way like we need to add this thing here so there you go content theo i do not i do not i've hit my drama limit for the day this is all you don't cut me out of this hey i'm not you obviously you don't adore i said i'm calling you out exactly i'm gonna block you now oh it's the only way to save face anyways sorry it was too good to not no it's uh it's funny that you it's right we were just having a conversation like can we be less like wrong answer you're just explicitly wrong answer yep we know what we are we know exactly what we are that's funny and drop that like i haven't had a chance to build with with d3 stack but it's i i'm hearing good things it's for all the specific things your stack isn't for but i i would like to make sure my audience very clearly understands this when you're starting a new app chances are astro or create t3 app are the best solutions right now like they both serve different things best in class ux dx the best performance you can have for your users the best deploy stories you can have period the best integrations with modern tools like tailwind typescript prisma all these things that we use every day like they both solve different problems that are different sides of the same spectrum as far as i am concerned as well as possible and the specific reason i don't find myself looking for remix too often is on one side there is astro which solves the mostly static with some dynamic behaviors incredibly well and then there is next js through the t3 stack which is as deeply integrated like spa experience with a good first paint a good html starting point and really good dx around the full stack there most of the things we love in create d3 app are either not necessary in astro or have an astro ad command already built in we don't need to support astro and create t3 app which is awesome yeah yeah i think here's how i'd say t3 app for your for your actual product astro for your marketing site bring them together wow chef's kiss you should put up an example of like how to like on your next js site do a rewrite to your astro marketing page that would be a really good blog post to drive some like clicks like make your next js marketing site 100 times faster with this one trick because here's the thing right is that we can actually take you could write a script that turns an xjs site into an astro site pretty easily because what we do is right we support react so every component is going to be able to pretty much move over instantly the trick is doing that in a way that doesn't break the interactivity like can we detect it when they have interactivity can we i don't know there's something there for sure that i really want to play around with when i say rewrite i mean like config level rewrites because next at the back end you can rewrite a request to root or to like slash pricing or like the marketing site in the next app so your next app and your next server are still your main experience but on some pages you have astro serve the marketing site and when you click sign in it switches from astro to the re or the next js site you could write a really compelling blog post that would convince a lot of people to try astro just to to fix their like lighthouse scores on their big old nexjs marketing page oh that's really clever yeah we should play around with that um yeah it's kind of the interesting part of astros have like so we default to static which is very much different from uh nextgs where they have like this export command that's kind of like secondary whereas astro is trying to flip that like you start with a static site and then when you need a server like because your scale is too big you have thousands of pages now or you just need some feature that's more dynamic the idea is that then you can opt into that server level integration so connecting that to next which already just always has a server that would be pretty cool i absolutely agree i like the assumption the next always has a server because some people still use next export i highly discourage it especially more so recently like like maybe that's my next export killer yeah exactly if you're using next next export you should be using astro instead you can bring all your components and just use our platform for it oh that's yeah 100 i i remember that was one of the points i made that got the most pushback in one of my like next js videos is like next export probably should be deprecated at this point it is encouraging less than great behavior and awesome because people are using nexjs for static sites and then building really heavy single page apps with other backends communicating with them with like really stale html that's partially configured that pops in all weird it's almost all of the bad next.js sites i have went to have been static exports on some olds like aws deployment that nobody updates yeah yeah i'd be curious with react server components how that would they they might be closer to that than you think yeah i it's deprecating you know you need a server that's how react server components work we're not going to try the static thing like again it's that's what we say with next we'd like hey if you need something more use next i could see them doing maybe not use astro but like that's not what next is anymore and that's okay that'd be a totally fine pitch yeah i could see similar to how the react docs have gotten to the point where they're like by the way when you want to ship next to product or react to production check out this next thing check out this remix thing i could see next js saying if you want a static site with just html check out this astra thing check out this 11d thing yeah yeah i think that would be that's it's really fun like i i don't know i feel very free to just like say that and like it's really nice not trying to do everything and just like hey we're really good at this use case this use case is a huge part of the web and that's our focus i love that you guys started there instead of instead of ending up there i feel like more and more we're seeing these frameworks and solutions that promise to solve every single problem ever and then they have to slowly walk back until they like pick a new catchphrase that is a little less inclusive because like you got to take the thing that you're better off yeah yeah it's that i we're lucky that we were forced to i i hope that we would if we hadn't been forced to but like it's kind of the trade-off right so we trade a lot of complexity that we don't want to take on the problem is that when you take on that complexity building an isomorphic javascript app that works on the server and the client you kind of can technically do everything so we like can't do it well so we say we don't it would be it's a lot harder to be like well we could do it so let's actually say no to a user who might be a user anyway even though this is totally blowing up our focus and not a good experience for them i i see why that's hard for people to do because it's it's you're saying no to a user and that's always hard yeah learning to say no to customers is one of the most important things of like running a growing business it's so easy to get fixated on like one customer that you could have if you just do the four things they ask for and then the next six they ask for after that then you get to sign an loa and then they require you to add another 15 things you add all of them they complain about one of them and the contracts avoided like that's not a way to run a sustainable business i did actually see somebody ask for your 30-second elevator pitch on astro monetization i'll let you go a lot longer than that if you want to i'm super curious what the like future of how astro is thinking about monetizing if that's something you're down to share yeah no i mean i don't have a very satisfying answer because i think we're still trying to focus on making astro great um i think what i'd say is like gatsby kind of burned the bridge on like oh we'll just build a hosting company like it's really hard to make that case anymore that that's a good idea that your users want it and that it's actually saying you can do because versailles notify their 10 years into this game right now they're doing a great job at it like you're not competing with you know some giant dinosaur you're competing with a very smart company so i know we don't want to do that i don't know really where that leaves us i think we're really excited about building for this kind of content developer so i think that user wants more customizability customizability they want to be able to maybe a wysiwyg for their content like stuff that's more starting to push us in the direction of like how can we manage this site without being javascript experts how can we manage this content without being javascript experts we take that platform idea very seriously but don't want to use that to build a hosting company and we really like working with efi they're a sponsor we really like working with purcell their sponsor that's not going to change any time soon so no astro loot boxes astro coin is a joke that's come up so many times in our discord that nft is coming there's no way around it we need to make like an ironic block chain for like anti-nfts for this stuff i mean i actually like it i someone i really michael rogers is there's like an old school node guy who works at a crypto company now um they like it makes this really good connection of like why crypto is successful because it's literally a way to like compensate your earliest fans in a way that like i think open source is still trying to figure out like if you're the first person in the discord like great you get like a like nice little tag and a label but like it's like following a band that blows up like you just kind of become the person who's like oh this project's i was there before it was cool like i think there's some interesting stuff there like astro corn is something i actually on ironically would love to do um as a way to give back to people who have made contributions across and i literally don't know enough about krypto to know like then could they sell it how does that work but just i don't know playing around with the idea the idea of like more respect for the ogs is definitely something i i dig i got one of the like funny problems i have i shouldn't even call it a problem that feels unfair but uh a funny thing i've been seeing pop up in my chat more and more is theo when are you gonna try solid which is so funny because i've literally been on the solid hype train for three years like i i remember when are you gonna really try it no they just didn't know the content existed that's the thing and i i i think that's so crazy that like something that i would consider pretty core to like what i thought i was known for and like the things i care about like ryan carneatha was huge for me getting into like the content creation world in the first place like with all this web dev stuff and to think someone wouldn't associate me as like like specifically with solid js and solid js content was really unexpected to me and it shows like there is a need for this like way to identify like an og even like a command in chat or like a site you can go to this like here are the things theo was in the first 500 stars for i really wish i could have like star power ranks on github more than anything like how early was i to star some of these like big repos yeah spotify did that to me recently it told me i was like in the first 10 of listening to some song that like i think it was like taylor swift or harry styles it wasn't a very cool thing to have listened to first but i remember being like oh yeah cool i'm like i'm i got a good music days even if that's not at all true yeah it's always something to that um for sure yeah what was the question i feel like i went around um yeah it was monetization was the question for astro yeah we're still figuring it out on a more general note of like the future of astro what's coming up the 1.0 has happened what are the things that didn't make the cut and what are the things you're most excited about for the future oh that is a good question we don't it's our first time not just being like aye cool what's the next cool thing we need to actually start doing some release planning um i know the things that are on deck is uh v-test integration so if you know v-test it's just like jest or mocha for beat tools and because we use vt internally we can leverage that we actually did ship the like get helper like we all the parts are actually there we just need to actually tell the story make a couple changes so i think testing is going to be a big push coming out of this release um stability always a thing um our image optimization is powered by sharp right now and we want to move that to something that's wasm-based so they can run on deno and cloudflare and all the others right now it's only a node powered basically so you're stuck deploying either to node or you can't use it right now and i really want to change that although node is still versatile and nullify so you still get a lot of players out of that but then it would be cool to support would it be actually this is this is a whole different rabbit hole i'm going to people in chat are trying to get me to to fall for the bait around testing we are not big unit testing fans around these blocks but uh silence so i've heard i will ignore that in favor of my interest in the different deployment architectures i think astro is a really interesting story because they don't run on client so there's like a dimension of the like how js runs problems you don't deal with because like in next js some packages work on node some packages work on the client some work on both some questionably work on either and it's really annoying both as like the framework maintainers and also as the user even yesterday when i was playing with solid start i was using a package that is for the web and for node but when i installed it in solid start it ran on the edge which is neither the web nor node which caused it to crash sure sure and it's just like the the runtime chaos is real and i'm curious like given that the client isn't one of your problems but the edge is what has the multi runtime support experience been like as a framework maintainer um yeah a couple of things um one this is another great thing that i think felt kit was the first one to do so in that case we stole it from them um rich your check is in the mail the adapter idea is really really cool um it basically lets you plug in versailles versus netlify this is something that probably wouldn't have really even been possible a couple years ago because so much used to be like node only like every it was node or it didn't run like that's you just assumed that was the runtime package authors are starting to think more about what happens when you're on the edge which means we are able to start to build for that in a way that like again we're a new tool so we can kind of assume that that's where you might want to go and make sure we don't stop you from getting there very different from like next gs where if you ported a site built for node to cloudflare like we are really hard again it's hard to back out of that once you've gone so the good news is that we were able to build from that principle and like start thinking about that early so we didn't make any big mistakes the bad news is we're still yeah the packages ultimately control your story there it's still a new days for most packages to be thinking that way all the big ones are but it's just that one little kind of un uh like not very often used package that you rely on that can kind of tank your whole story so it's an ecosystem problem not an astro problem but it's one that's just kind of i think needs a little bit more time to mature yeah i'll say veed is also fairly new and so it is really really well supported but you'll still get the occasional package that just like is so wild like v just throws up in his hands and says i don't know how to bundle this like this is not this is it was only designed for web packs so we've moved from webpack to node but we're still moving from node to just anywhere yeah i've definitely had one or two problems with v like not accepting a package but all of them were like often i find in those situations it's better to know because those packages end up being like whenever i make it work or i make the compromise and go back to webpack and get the package in it's some old poorly maintained crap that barely works and like if it's poorly maintained enough to not support the still on node then it's poorly maintained enough that i'm now scared to consume that thing yeah i i will say it's gotten so much better than the last year and that was actually a big mistake we made on snowpack i'd say we our big thing was we're gonna use roll-up to bundle your dependencies that's way more supported than es build which is what vt uses it's like 100 times less fast so you have these slow installs and then you're also betting on the past instead of eat i think smartly bet on the future which is that all these packages would eventually get there so they're on the later half of the story most packages work it's just the couple occasional ones you gotta worry about but for most users you barely notice it absolutely i also have been running swc minify and swc like core in our nexus builds for ping since it launched and the only issue we had was like one of our dependencies had an issue with the way it minified where it like two variables got named the same way or something and it like caused a conflict it was really dumb just because it felt like how scoping was happening they had a fix for it before we ran into the problem and when i went to complain there was a like a version bump to fix it so i did that and we were okay of that package of that package yeah yeah package these are generally pretty quick and there was one i think there was one for both and either would have fixed it if i recall but yeah it was surprisingly quick to get that one handled yeah it's as long as the package isn't abandoned you're usually in an okay spot yep absolutely i am curious more on the runtime side it feels like we're making an assumption that things like like your application will be moving from lambda and node over to the edge and edge runtimes do you think that most applications are going to be picking one or do you see a future where there are hybrids where certain things are on lambda certain things are on edge and you as a developer can architect in a way that makes sense for that yeah i i don't know the answer i'd actually be curious to hear your take on that i'd say we want to support both it's it's something we just haven't tackled so post v1 like a middleware concept i think is a really clear place to start because you can back that into a server deployment and then give you the magic when you deploy to versailles that will fire someone who supports this so it works really well with this model i think that's why a lot of frameworks are doing that um i think a lot of content sites can be built at the edge i think it's just a question of like where are they pulling their data from like there's some like apis where like shopify is a really good example they have a globally distributed api so if you're building on shopify there's a lot of problems you'll run into but one of the nice things you'll have is this like api that essentially opens you up to be edge ready and fast versus edge ready but then like slow because you're still going back to your one data center in in like colorado everywhere around the world you end up just and going back and forth it's a nightmare i it really just depends i think we're still waiting for the industry to kind of figure that out and we want to support whatever kind of ends up winning yeah we're absolutely watching the industry figure out what it wants to do here that's if anything's clear it's that i have had enough convos with everybody from like friends at versailles to people at planetscale about this in particular that it's clear we're figuring out what happens where right now uh model i'm hearing more and more and i'm still trying to decide how i feel about this because there's a lot of other solutions that in many ways i prefer the one that i am seeing that i like i think versailles pushing this one pretty hard is data on the lambda render on the edge so like you can run your prisma client in a lambda because prisma will never run on the edge they they can host their own prismaclient and you can connect to it with something that looks like the prisma client on your side but now you're like three levels of indirection away from your data or you could have a lambda in the same warehouse as your database that takes the hit for the prismacall returns things and then in the header of that return you choose how long it's cached for and then the edge always runs hits that data either a cache or waits for it and then gets that response and sends it to the user i think that there's a very compelling model there of like use the lambda to shape your data from your database to http yeah and then use the edge to get that data from there to your user via render interesting because i feel like the problem is it's the same problem as like render on the client and having to make a lot of requests to the server like that's going to be a bad time and now it's like we'll run around the edge but if you have to go back and forth i wonder what that would look like an astra like what if we moved your front matter into a lambda but all the rendering happened on the edge so all the server logic is separate from the component logic in astro so maybe there's something we could do there yeah i'd love to explore this more i think it's just because the industry hasn't figured it out doesn't mean we can't make a couple bets yeah you would like i can't say for sure but it feels as though if you were to put like a super json cache layer in front of everything other than astro and other components that you're importing and like doing in the front matter whatever variables exist at the end you throw those in an object you json or super json you have access to that when you render and then everything else happens on the like edge worker oh that would be so cool that would be so cool and then you can have like a single exported variable that's like const cache time equals export that like in the header and then that will happen on the lambda and then whenever it renders the render is always up to date but that hits different so like if in the edge function you attach a timestamp but in the server you're fetching that data you could finagle those in a reasonable fashion like there's there's some really cool opportunity here that i'm seeing more and more of i think it's also like everyone's just waiting for you know and the more i like the more time i've had to sit with were waiting for the industry to figure it out the more i actually don't think i agree with that because i think what we're really waiting for is some either framework or host or whatever like someone to tell the complete story i feel like edge on cloudflare is really interesting but you can tell they're trying to br they're building it all themselves right all right well i can't build on the edge because my databases want a single location all right let's build an edge database and an edge key value store and like so many parts are needed before you can take take real advantage of all of them but once that all clicks into place there probably will very quickly be uh like a best story here i i'm beginning to be skeptical of that there are so many catches to edge data and there are so few catches to edge caching and cdn's that i think at the very least we're going to have a long interim where we use edge to speed up initial paints renders and maybe do things like starting streaming and we use lambda and our databases to generate the shapes of those data ahead i think that for a long time i thought the missing piece was effectively a way to hit sql from the edge that felt like oh once we can do that we can do everything you're still limited to like one megabyte of javascript in your edge functions you're still limited to anything that supports edge workers you still have like a bunch of things that are going to be unintuitive in those places and a certain scale of application that will not fit there i think parts of it will and the success case here to me looks less like getting everything on the edge and more like getting the edge into your stack in the way that is as performant as possible yeah yeah there's something about the versailles next story and like the versailles with any framework story now or maybe even maybe that's where this build output api comes from like maybe they see that opportunity too like what you're talking about is a host that can actually handle this multi-level deployment that's very different from self-hosting or deploying to a you know ec2 instance somewhere it's going to be really curious how that starts to look because so much of it has been like oh that's an optimization on top of software hosting and now what we're talking about is essentially like it's a ton of work to get this done by yourself why not use netlife excel have you seen next's most recent changes to runtime selection in i think 12.2 i don't think i have when you export a page function or a like an api function there is a config that's like a hidden export you can throw in there a1u oh i think i have right and you can opt in individual endpoints right yes so you can have certain apis run on lambda certain pages run on edge and select at any given like with like granularity which runs where i was hacking this before where i have an app it's like a link shortener that i built using next.js and the core of how it works is there's like a prisma database that has all of the data for all the links people have shortened and the edge i have an edge middleware that fetches against my own api endpoint that runs on lambda that returns like based on the url slug if this has like an associated url or not if that has been hit before it's cached like infinitely with an isr that invalidates if you change it and now you have it instantaneous ability to fetch that and have that data you're just waiting for the like cdn to respond with it which is faster than if i had like a redis cluster i was connecting to in like getting things out of memory fetching from an edge or fetching from a cache is faster than instantiating a connection with something else to get data from its memory and because of that this is one of the fastest link shorteners i've ever used when you go to the url it is like i have to like make sure there's something weird going on causing this rewrite to go so quickly but it's very easy to do things like that even when none of the architecture supported it now there's a config vial where i can choose where it runs yeah yeah that's i think the thing that i'm we're all at once so you're either all static or all server and if you're all server you're all edge or you're all you know whatever the platform deploys for nextgs team thinks in these terms probably because of the connection for cell but i think that's where the future of all this is headed is way less kind of one big mallet that you're throwing around and way more choosing the right tool for the right job and each api having its own job to do makes the tenants which is funny because graphql is like not at all that so it's really like graphql is not very well suited for this future it is but it isn't i think that graphql if somebody was to do like effectively graphql middleware where a given resolver hits like any of many different services you could make something on the edge that is vaguely graphql but sure you need like the orchestration almost to sit there i think that graphql largely does funny enough when i when i complain about graphql the first response is but what about microservices isn't graphql the best way to do microservices and that always confused me because like graphql has to have a server that resolves your whole graphql schema but what people see there is a bunch of different subfields that theoretically could be different servers but you still need to have one in the middle that picks what goes where yeah so funny enough i was introduced to the term edge working at twitch because our graphql server was called the graphql edge that resolved all of the different graphql resolvers for all the other teams on their crazy going stacks at twitch but the graphql edge didn't run on the edge it ran on boxes all over the world would pick which of the other team's services to hit based on the request and what it was asking for got it and that actually wow that's interesting i graphql i love i i think there's a there's a moment where we're deciding should we choose it for astro the same way that gatsby did like if we're gonna say that we're this plugable thing well i will see i think it's the right choice because if you go back to that like api example on our site like you can tell you're calling you're calling fetch like you're just in that file calling fetch like there's no graphql you know you're calling from ucms like basically it's all javascript which we really like from a one-off standpoint literally just await fetch and then you replace it to json and then you use it but then if you're like going back to the cms example like okay you now need storyblocks cms like you need their sdk like you're going to them for their documentation versus like everyone trying to go through one api one graphql layer yeah i i think that graphql is adding an additional part like you're still gonna need to go through storyblocks docs to find the thing you're looking for and then the docs for the graphql layer that's auto-translating it for you like you're not you're not removing something when you add graphql you're adding something when you add graphql and i think that what astro astro to gatsby is similar to trpc to graphql in a way where trpc shows you that in your typescript front-end back-end app you do not need graphql to be the layer between the two you can just call your typescript in your typescript astro is you don't need graphql to access the shapes of your like data from your typescript in your html jsx hybrid you can just write your typescript and then call it in your template yeah yeah i mean the the real argument that finally connected this for me was this idea of like if everything goes through graphql now you're debugging things in your data like everything becomes a data layer bug basically which is like my least favorite bug to go after like all right i just updated this integration and like oh [ __ ] everything broke why where how like it's so indirect this asks a little bit more of you to kind of bring your your tool bring your cms bring their sdk in but at least you're living in that one world when it breaks it breaks it's not your whole outbreak because of that one change absolutely i yeah i like having the type safety in a way where when the change happens you immediately have a type error you don't have like three levels of interaction like they make the change they put up the schema they hope everybody's consuming it's going to take a look at the new schema ahead of time none of them do they flag two fields as deprecated now my team is using two of those fields none of the spec proposes the new field that we actually need we have like a month of back and forth three months of building another two months of complaining and shouting at each other somebody tries to like use this argument to get promoted and they are pushing saying hey if this doesn't come in fast enough i can't get my promo it's coming up in two months we need this in now and then it gets shipped in a broken state it breaks for users for years and then i joined the team two years after this [ __ ] happens and have to clean up the mess like that is life in this land and while graphql helps and it gives that like contract between the front end and the back end that's now a thing that has to be built maintained and owned and that's a lot to ask for and not everybody is going to do it and when you just remove the layers assuming that you own both sides of this like you own the back end and the front end or you have the ability to call the back end and the back end is working as you expect from your equivalent of a backend or a server that's when you can move really fast graphql is preventing the nature of a big company from stopping you astro's way of doing things and trpc's ways of doing things let a small team move faster than one of those big companies yeah yeah i think the direction versus the indirection is yeah a total key there yeah i'm really happy with how we ended up what was that it's like oh versus fp yeah yeah oh my god this one i don't know if you have time uh but there was this one other total wild part about the building the site the actual home page i can't remember if i shared this with you or not like we literally there's not a single framework on this for all of our talk of like islands and everything there's two i'd say script tags so because our templating language astros template language is all html you can just add a script tag really easily yeah we ended up implementing that as a web component like a classic like custom element no framework just literally like went through the web component like api it was actually really nice because what you're doing is essentially there's no actual state like this is still just an interactive piece of ui we're adding interactivity but like the ui is moving now we don't have to re-render so there's a little bit of a shortcut happening there but just like it's just a script tag that extends this custom element like the extends html element and then adds the logic that happens when you like hover over it oh we can it was very much like oh wait is this the promise of web components like when you talk about actually writing web components authoring them yourself um i think i sent you the gift uh let me see if i can find it because it's just like you send it in [Music] this was back when i realized what we've done oh [ __ ] i am just checking i was curious 93 kilobytes transferred total uh let's switch that to just js yeah 6.7 kilobytes of javascript yeah it's it's wild how fast we got this um even with all those like we have a canvas animation we have everything else we're 100 on on mobile lighthouse scores ah there's the guest i'll share it in checks it's the easiest way for me to get to it so i'll just say this is not recommended again like build with what you love if you love web components it works great if you love react keep using react i think this was a piece of like play around code that then quickly became like oh wait this is actually a really nice way to do this here so yeah so you can see the kind of markup that's all astro it's all html but then the script yeah there's style happening there that's we make that happen it's scoped and this is in here like literally hero card like this is instead of a react component it's literally a web component but you're making it next to your markup next to your styles it's like just right there next to it it feels like a classic like oh it's just confirming more than anything is that the promise of reusability for web components is a lie and dead but the actual viability of a a thing called a web component as a way to deliver javascript in your html application that part seems okay well everyone's like build react into the browser you cowards and like the first thing i thought of as as i looked at this is like oh this is like an old school react component like not a functional one a class-based one yeah got your constructor you've got what happens on mount you've got what happens on unmount you've got a couple methods oh man they did build react into the browser just in a weird roundabout way oh the request animation frame my if there's any function that scares me i did not write this i would be too scared to write this but again nate uh did an awesome job with this i still yeah this is super cool i do love how little js is here and also how everything is self-contained i was surprised at how little tailwind was like used for this and then i saw there is lots of tailwind used for this but some things are not tailwind friendly that said i would highly recommend that whoever wrote these look at the really chaotic stream that bryn and i did a few days ago where bryn uses this new like underscore binding syntax to write crazy custom transforms like this as a tailwind class that gets compiled i don't think you should actually do it but you could see what it looks like to brute force tailwind for all this stuff yeah i i have really come around to tailwind especially building the site um but that being said i don't know if it's the right tool for every job i do like our style tag when you need it totally fair i have found myself not needing style tags very often anymore because of tailwind but when you do need them they are essential especially if you're pulling in something from somebody else like when i'm mounting like some external like web component or something like that being able to call one of its classes and style it directly in the same file has been a life saver for a bunch of random things i've done that all said quick tailwind rant i'm super curious what coming around to it's been like for you because it's always different for everybody it's like typescript all over again that's so funny yeah it's uh i think i'm i've been i think i immediately got the pitch and i just didn't have a really good project to use it on like so much of what we do is building resources for others so to pick tailwind for like a starter template or anything really would be like just way too much we're trying not to be a tail and only framework even though we have this great tailwind integration um yeah so i have i think one of the first jobs i ever had in front of i got in trouble for writing inline styles like don't do that i was like no but like this is like just a quick little like micro site like i don't know why it's just they're so nice and clean and like ever since then i think i heard about taylor maybe a couple years later like oh yeah that's that's what i was trying to get at with the inline styles but in a much much cleaner maintainable way yeah i totally agree tailwind makes inline styles great i was always more a fan of inline styles than most i will credit react native for black filling me on that it basically forced you to inline and i found i was moving so much faster the slowest parts were remembering what variables i wanted to use the semicolons the random capitalizations the uh colons between things and quotes and all that stuff and with tailwind it's just like zen mode but it is zen mode inline styles with a vague sense of type safety and standardization and i think what's really smart about it is that it it all depends on a world where you're building ui components like the idea that like that's your component system like why are you creating a class that is also that same component but it's actually a subclass of a subpart of that component like we already have the component system i really like how tailwind basically just plugs into that like if i need to build a reusable component with healing i'll just build a reusable component i probably needed to anyway yeah i i know they're not the biggest fans of out apply but i do think you can use it to do something similar to an old school component system my argument would be that we found ourselves as web devs often reaching for component systems when the problem was css was too hard and tailwind isn't trying to be your new component system it is trying to make css easier to write that is explicitly what its goal is yeah we a team of pretty much three people on and off kind of coming into it built that site i think in nine days the new astronaut build that's insane which i think i don't know if we could have done that without tailwind i don't know if we have the data to back that up but that's my gut feeling yeah i can say we don't have much in terms of data for how fast things were built compared to alternatives but i can tell you like working at a company that used style components on one app and tailwind on the other one of those moved a lot faster and it wasn't the one with more developers yeah yeah well that's that's sometimes that's always the case that's fair that is fair but uh yeah i mean compared to the original site we had i think this was this was night and day so yeah we've been i don't know if everyone on the team loves it but i have totally come around because i think i like inline styles and this just makes me feel better and less ashamed of that of that opinion totally agree i i think that the best gift tailwind has given us is an introduction to why inline styles are great and we shouldn't like it's like that like there's dozens of us dozens of us i think that astro does one of these specific patterns that i really like tail one for really well where in a like a react component everything above the return is the logic the data the state all that everything below the return before the function ends that is the markup that is the style that is what renders and makes the client experience that they see but the relationship is above that return that's the logic below that return that's the markup the style the visual things like render props it totally [ __ ] that up for a while but we've moved on since we're in a much better place i find myself feeling very similar in astro everything above the line above the line for the helmet that's your logic the data fetching the server code and then below that that's how it looks and i i like that separation a lot and i think tailwind lets you not have to it doesn't force you to have a file boundary or a syntax binder or boundary or in otherwise meant to like i have to scroll down to where the styles are into a different file it's where the markup is yeah it's astra is the new php right that's your php tag at the start and you're a template it's yeah it's it's something we really liked about this pattern is it really hard codes like and because it's a server your front matter is the server code it's going to run on the server you break out of there and now this is the template that's going to come back i absolutely agree and it's you've introduced me to the php workflows that i avoided my whole life as a begrudged like like pissed off uh good old web or uh wordpress dev when i was like 13 running a minecraft server and now i can finally see why people liked php and use something like it in my own i mean there's a little bit of stuff it was not all good there was a lot to hate about it but there were some things like there was an email function you could just call and email someone from a p like it was a function built into the php server crazy times yeah that was the best oh i still see a surprising number of startups running php for their like json like server and like that confused me like you're using php to shape and return a json blob anyways i think our original rss was rss or xml xml just html so i think a lot of people were using astra to write their rss xml data yeah you can do some weird stuff when you start to get desperate we luckily have a nice integration for that now it does make sense huh weird to think very strange is there anything we didn't talk about uh yet that you were hoping to talk about i know that we're coming up a bit close to your time just want to make sure that anything you were excited about we covered yeah no i mean i'm just thrilled with the release so far hacker news was very kind everyone was very kind if you haven't checked out astro um was it t3 app for your uh back end or not not for your your application astro for your front end um yeah do check it out it's it's a very unique approach to web development which i think has been sorely missing for a long time so we're really excited we've worked on it it's been 16 months of work that we're really proud to show off now so if you're having suspicious hacker news being kind to you they don't believe it well they weren't kind they were just when they were mean they were also wrong so i got to kind of smile at them or they weren't wrong they were just missing the point of like yeah we actually agree with you that's why this is cool i got i love that i i love when they think that they're hating what they're actually supporting when they say that's my favorite dynamic i want to open this up to questions if there's anybody in chat either youtube or twitch keep an eye on both get some questions ready for fred if you have anything to ask what's the uh classic dropbox uh comment like why would i use dropbox i can just create an stpf server myself and set up my own box in my backyard it's like yeah that's you're right that's why you're right god i i revisit that comment wait which i think it actually came up during y combinator at some point but like yeah hn announcements are notorious for the the mess that is yeah yeah we have a for front-end stuff because it's very back-end focused audience so yeah launching anything from unrelated there is again maybe why they were condos is because we were kind of just like old-school pick that's how i found solid somebody posted or new faster new web framework is faster than svelt and still uses jsx i was like wait what spelt seems interesting but i like jsx i i'm curious and i dove in and yeah here we are it's crazy that was like years ago but i do like wed things come up on hn i'll read the comments for a laugh but i'm reading the like upvotes and the topics i think it's similar to youtube where the people who like it and support it they're not going to leave a comment they're going to smile because they know about the thing the supporters aren't the ones to leave comments like people talk about stuff more often because they're pissed off than because they're excited yeah yeah we are starting to get our first questions the first question is how or what is a good project to start learning astro with um whatever you like um i so i first learned web development literally just like building the most like ridiculous sites so i don't know if i'm always the person who's like oh you should like try to build a ecommerce starter and that just if there's something like i was just on stream yesterday where we built like an owen wilson uh that old wilson api like we used that to build a known wilson like soundboard essentially like um if it gets you laughing or excited or just keeps you interested that's that's usually the thing i'll suggest so um that create astro wizard the theorem the just the basics template is a really good one to just get started or you can go empty which is like literally bare bones i don't think there's any like times new roman like hello astro and that's it um either one of those depending on which you prefer to get started with is a good jumping off point and then just play around with it docs i'll shout out to the docs team as well they've done an amazing job it's like translated in like six languages now it's really comprehensive um it's a pretty good resource to get started on the topic of docs i actually was going to make a recommendation one of the cool ways i saw somebody in the community jumping on astro was using it as an opportunity to build a t3 app docs site because that should not be built with next.js ideally like astro is the perfect thing to build a doc site with so if you have a new like project you want to spin up documentation for and make like a good environment to turn your markdown files into like a dock it's pretty hard to beat astro yeah i mean it's you it's a perfect use case for just like maybe you want the like dark day night mode toggle to be some javascript maybe you want your language if you want to switch you know internationalization but documentation a lot of content mostly static astra is perfect for that absolutely a few more questions somebody asked what do you plan on rewriting astro and rust oh god no that's that is a rant that i actually would go on for a while because okay i'll give the quick version of it astro oh if you want to know my answer to this go look at es build or any rust project and see their maintainer graph it's usually like one to three people astros actually pretty bonded this idea of like individual parts of astro that are not very often touched but are really really hot code paths should be go we have a go compiler we use es build um a couple other things but the runtime itself that like if you're gonna like find a bug in astr it's almost always gonna be in the javascript code which you know i don't know if go is gonna solve that problem but the fact that that is saying that anyone can then jump in and fix their own problem the tooling is great the developers are used to it we're talking to web developers they know javascript our community would be a small fraction five percent two percent as big as it is today if we'd gone full in on rest or go so we use it a ton but in really specific ways the larger ocean of what astro is is javascript based i am just doing a quick comparison because i was curious any if you take any person that contributes to uh create t3 app between number two and number seven they have more contributions than anybody or any combination of three people other than evan on es build like anybody in our top 10 contributes more on create t3 app than everybody from slots 2 through 10 on es build like it's just a different world in that way es build has almost as many contributors as create t3 app and es build it's existed for years and create t3 app has existed for months yeah it's it's really hard to grow a community around a language that your own audience isn't speaking it's possible and i think probably swc is the closest to it but you're not your audience then when they find a bug they can't fix it which at least for us v0 and now v1 that's still a pretty useful tool so that we're not you know just abandoning people when we when we break totally agree somebody asked what do you think the learning curve is like for somebody who's only done vanilla js so far oh i'd love to know what they mean by vanilla js um the learning curve is meant to be literally like as easy as possible so the whole point of starting with html is that that is like so if you only knew html you can build a website with astro if you only knew html and css you could build a website with astro um javascript is something you should be kind of reaching for when you then need interactivity versus the thing you learn before you can even build a hello world so i'd say that's actually been something that we see as maybe not a problem but like it's raised the bar considerably like okay great i want to learn web development let me spin up a react project i need to learn jsx styling is through this npm package so i'm not even really writing css um html is just being generated by the components i never really see the html ssr what's that um isomorphic what's that like that these tools are great for professionals and for experts but i think that they have really raised the bar on learning web development considerably so i don't like to say astr is a tool for beginners because we see it as much more than that but it is by far the place i'd recommend even my biases aside if you were to start 91 development start with html add some css javascript can be one of the last things you start to explore and you can still get so far without it i totally agree i think it's a fantastic starting point i've used it for like helping some people get started with code it's one of the best ways to go from zero to website really fast nice oh but even that's a good headline these are all better headlines than what i showed you originally um i think that's the thing anyone out there builds a like a teaching platform like hit me up like i would love to do more on that story because it's something that i think is really really valuable tiny hot take i think that aster does a good job of hiding the typescript to an extent in that way where i i think beginners should be starting with typescript now javascript but none of the education materials agree and i'm not going to make how to start programming tutorials i'm not dealing with the audience that comes with that but i really want somebody to just sit down and make how to program starting with typescript and i think astro would be a really good tool to use during that i mean it's like it's the one of the keys of education is like you don't want to throw 10 things at once you want to throw one thing so all of them they're already thrown by de facto the language of the component how ssr works how styling works like there's a lot their budget is already blown by the time you're writing your hello world typescript's just one more thing that they need to cut for us it's built in and we don't have a lot of other things you need to learn because it's just html so we can kind of sooner rather than later bring that part of the story in without it feeling overwhelming we can only do that because we're not throwing you into this this ocean of jsx absolutely agree i think that the the line for what is what in astro is a lot clearer to like what is javascript what is css what is html it's very clearly defined where something like react all the lines are blurred in a way that makes my dx for building applications better but in a way that makes a new person learning what those three things are and what the relationship is more complicated yeah and the line between server and front end is literally a dash dash dash it's a literal line that we've drawn um yeah i think that all helps i i really like that i think that i'll be using astro in the future for like discussing these things as well just to show people what the relationship between these parts is one one last fun question before we start wrapping up somebody asked is astro blazingly fast [Laughter] it's lightning fast i don't know if it's blazing um do you know the blazingly fast catch phrase from the primogen community oh no is that from them yeah yeah thing is blazingly fast and like ironically or unironically uh both oh god very much um i it's really hard to write a headline when you can't use buzzwords i don't know if you saw my tweet i like showed what github co-pilot thought our headlines should be and it was just all that blazingly fast easy to use it's all stuff someone just said astronomically fast and i am so disappointed that nobody from your side has said that publicly yet is that fuzzy because there was someone in our community did try pitching that and it did get shot down hexa be gone is who it was no okay they've stolen it from our community i will need you to apologize for stealing that content from my community i could we have not resolved this over dms man no sorry what's the deal he i i think riot actually replied to my tweet and nobody interacted with it oh man anyways hey well actually one where i saw that i'm curious about where'd the name astro come from oh we were just talking about that um at our launch like launch party on discord um someone asked that i don't have a good answer it like we started as so the original name like the original repo was called magic thing like just the most placeholder name of all that of all time um i think we just wanted something that felt futuristic and and astro kind of fit that bill without having the npm package someone might have had it but i think they were kind enough to give it to us um there's a couple other ones someone actually tried aisles originally which is funny because that actually then turned into someone else basically took that name and created an island framework for it so yeah it's all the same kind of inspiration um but after i love nate came up with that logo pretty early on and it's it's stayed with us ever since it's definitely the coolest of the names and astro.build is such a good domain yeah yeah it's hard to search for because there is a great um j-pop band or maybe a korean pop band called astro yeah if you search astro into google you're not getting us which is a pain but astro build astro.js both of those will bring you to our site the things you learn there's a golf company named ping pong no it's ping because like the the sound a golf club makes when it hits the ball i think it's a very clever name to be fair like credit to them but we're ping.gg and we do entirely different stuff like there's there couldn't be less overlap between what we do and what they do there must be like an uptime robot like someone that does like automated pings on a server called ping right or is that uh funny enough the original owner of ping.gigi had an open source project that you would you would hit it with curl with a url and it would curl that url and then send you an email if it if it failed yeah that makes sense yeah and so you like create a crown job that runs that and then emails you when it goes down yep not clever so we bought that off him he moved to ping.gl which he doesn't care cause he just had the ggs i think it was like actually the area he lived in and we wanted the gg because it's like good game that's like the thing for the space we're in and it was wait did do you have to support the original endpoint though forever are you approximately no i i did for a few months squeeze just like came to like a like he didn't care because it wasn't being used a whole lot like it was like an old open source project he hadn't cared about for a while and i actually he didn't expect me to offer to keep maintaining that and i literally had a next rewrite that or like one middle this is right around when middleware dropped which is very convenient timing i checked if the header was coming from curl and if it wasn't redirected to his surface that's smart that's clever yeah it yeah this was absolutely fantastic i know you have a hard stop coming up and i want to be respectful of time thank you so much for coming on super last minute and chatting all about astra with us any last things you want to shout out things we should point people at astronaut build our discord community is awesome come say hi solid team is awesome give them your love and shout out and use solid it's great um learn how licenses work tweet me on like ping me anywhere and i i love licenses it's like my weird nerdy thing so please please please i'm happy to help anyone open invitation we might have to chat on that in the future actually i have a lot of things in the world of licensing i've been thinking on too much so i will ping you offline about that i would genuinely love that and um theo thank you for having me seriously this is it's so much fun watching you your stream grow has been just one of the most fun things of the last year so last month last two weeks i don't know where you're even at anymore but i don't either it's been chaos but i've been enjoying every second of it thank you again for being part of the whole ride you're one of like the day ones that responded to my dms and had me like copy editing your blog posts before either of us were a thing and it's so cool both how are you thanking me for letting you copy edit my that makes no sense thank you absolutely makes no i i will fight on that like having a random person say hey i really liked your blog post are you down for some like feedback on this and to have the like response be oh yeah absolutely like excitedly that was a huge thing for me you were one of the first people i reached out to in a way like that like new to like and i also like didn't know what contributing was and i didn't have it in me to go contribute to someone else's open source thing that was like my way of contributing i like words i like thinking about communication and in a lot of ways you were my gateway to contributing so i do genuinely thank you for that well that's wild thank you you could have fooled me um but that's awesome yes thank you you know tweet whatever you want from the twitter account today um please be kind i will be i i have plans but nothing too how hard can i push the html things i think that's the fun meme it's just like whatever somebody's talking about javascript another language i just quote tweet it with but html is cool be kind that's all i'll say be good we'll do thanks again i'm gonna switch to the brb on stream for a minute i'll be back in a bit guys the excalibur brb required more work sorry on the bright side i am back what is good gamers programmers friends foes whatever you call yourselves that was a [ __ ] awesome interview so pumped that we could have fred on so soon after the astro 1.0 release did not expect that super hyped that we were able to have that and seriously if you all aren't checking out aster already get on that it is so cool i'm using it for a ton of [ __ ] it is making my life significantly better and i love it dearly i owe a shitload of people shout outs apparently i missed a bunch last stream because my stupid freaking uh what's it called uh the notification thing was just broken for me so i wasn't seeing subs last time so there's a bunch of people i owe i apologize immensely y'all are the best but the ones i missed for today's stream uh made by johnny with the prime sub uh bapoza formerly science fantastic username uh dev jay not gonna be able to pronounce the rest of that hole it pablo pang adez who should not be subscribing y'all should be gifting it does his subs uh francis uh menchium titanium just gifting whoever in the community he recognizes you don't need to be doing that man just because you got that new job and money doesn't mean you have to spend it here come on thank you i regardless i appreciate it immensely ali with the resub three months in now appreciate that a ton as well as see red thank you guys all appreciate y'all immensely for those who don't know if you subscribe on twitch or now on youtube memberships you're able to link your twitch account or your youtube account to your discord account and you have access to the sub only discord which i know i show it a lot but the last few days it has been fire we have been having so much fun like whenever all this crazy drama is happening on twitter and [ __ ] that's our little bunker where i have like my safe space where i can complain about [ __ ] and not worry about like being screenshot out of context y'all have been very good about that please don't break our trust but seriously the sub only channel is so fun it's a great community and if you haven't already subscribed either on twitch or joined them as a member on youtube please do also for the memberships on youtube i actually get five more dollars per member for the next like 20 days or so so i get if you don't want to be a member on youtube you prefer twitch absolutely stay on twitch but if you're down and you want to pay me five dollars on youtube one time i get ten dollars so double the money and that's coming out of google's pocket so by paying me five dollars you're actually costing google five dollars so consider it if you haven't sadly i do not have alerts set up for it because youtube sucks and does not make any of these things easy enough for me to do but yeah i will have all of that hopefully set up soon we'll be making my own overlays and such when i'm able because man i need to get my [ __ ] together on the youtube side for live a bit more oh anytime i'm sure a lot of you guys got tier three subs to brin uh happy to gift those out those were fake etm big easy thank you so much for the five gift subs and then subbing right after you are a legend for dropping that in the middle of the sub rant as well as meru baby andy enzranger appreciate y'all immensely make sure you link your accounts to the twitter to your discord and that you join discord t3.gg discord i think i have a command for that i do look at that prepped for once anyways i need to update my titles and things i should probably do a thumbnail swap too uh drama alert javascript edition cool i want to keep talking drama because there's still drama going on and i'm angry about it so we'll probably go into that momentarily uh do i change my thumbnail on youtube and title yeah i will it's got a good thumbnail photo switch to perfect back to the main shot let me throw that into my photo editor real fast i'll export 720 back to youtube edit guys you have to scroll so far for the thumbnail change youtube really doesn't know how to do live oh look it notifies me over there we got two new t3 club members on youtube shout out to harsh patel and alex bennett appreciate y'all immensely you get the little cute like sippy cup thing i should probably update that on twitch everybody should have that as their badge i'm gonna go do that right now actually why not uh emo is that where is this even under god they everything is in the least intuitive place possible emotes bits here cheer boats where are there's bits to your emotes but i actually don't know where to subscription badges wow it's that sucked to find uh i think i have this on my computer here dashboard let's see if i do i want these badges now i'm sorry for promising drama keemstar.gg is available oh that that would be a terrible domain to own monterey wrong button upload image i know i have these emojis somewhere in my downloads folder because i used them kind of recently now i'm not sure i can find this looking at how many how absurd a number of things i have in here yeah i god i have too many things in my download folder now i do this to myself so this one yeah [Music] wait no that's not the one i wanted oh you have to you can't upload a base image you have to resize it all uh twitch badge creator do i just show you guys how chaotic this is yeah [ __ ] it y'all can see free and premium are you kidding resize you to find some random tool like this pick your emoji download all three sizes go back to twitch and then for each one i can't believe this is real like it is just so laughable that in the year 2022 where they have fixed this four emojis that they have not fixed this here it is incredibly frustrating anyways theoretically y'all still have the old subscriber badge maybe when you send more messages it will swap i don't know what it will swap might have to be approved i'm upset that that didn't work immediately i um this badge flare sure cool now the gold people get your gold star and i need a name yeah t1 t2 i actually like those i need to refresh i did refresh i'm hard refreshing command shift daring there it is i command shift hard like five times and then that time it switched back what what what the [ __ ] is the caching you all saw that right god the dashboard is just so broken why can't anything work shout out to jen's ranger etm big easy mirror baby scott adrie mohasko commander queso great name and the car thank you all so much sorry that i've been busy angry at this because what the [ __ ] hitting yeah can the load balancer give me my new emojis yeah it has it right there i'm gonna here's what we're gonna do well first track pop out chat see if it nope pop out chat more like pop in chat jesus christ someone send a message okay cool fresh browser has them whatever y'all look cute now sorry you don't get to look cute on everything else pokemon emerald stream tempting but i'd be playing some crazy rom hacks so i'm gonna play pokemon i i've actually been considering making another account for like more personal stuff like when i want to play a game or like make music or some [ __ ] just because i i don't want to i i want one you get a notification from this channel that you know what the [ __ ] coming but i also want to do things that don't necessarily fit that i think those fit somewhere else so there might be some game streams in the future tbd i am an absurdly busy human so no promises there at all but i would like to do more things that you're new to discord you want to join my discord so there's a link if i if you do the discord command and chat exclamation point discord t3.gg slash discord will be a link straight to it and you join there you can sign in in the in your discord settings for your account there's an option to add integrations and you're able to add or actually it's called integration for you it's called integration for me for you it's add accounts or something like that and from there you're able to add your twitch account to your discord and once those are linked you should have access to the sub only channels anyways i believe we have drama to talk about i'm gonna hit my marker button quick see if that works got a check mark back which means it probably worked so this is the next section this is us no longer talking about astro instead it's drama time wow this tweet did well i did not expect that to do so well it's probably because i was streaming we don't have that many viewers so that was all y'all going to like it appreciate y'all thank you guys how are the quote tweets anyways i first want to interesting that's cool that they have that set up to get notifications from youtube i was specifically looking for my tweet i'm just gonna go to my profile that's the fastest thing and on here i quote tweeted that long ago uh here is the original cool anyways i'm gonna turn off overlay so i want to like chop this up real fast tonight quick thank you to the gifts or for the community gift henry as well as for the subs from both me group and sign pi appreciate y'all a ton rant time actually uh before i forget could somebody in chat link me a screenshot of the original ryan tweet so i have that for reference because he deleted it like the yeah so there's a screenshot of the original tweet so i can show that i would appreciate it the only way actually i can air drop it from my phone if i need to funny enough i did screenshot it expecting a deletion rat someone already has the screenshot [Music] uh this is yep that's it thank you perfect should not just be clicking links anymore but i trust you my aunt you got me ben i hope you got your clips so there has been some drama in the javascript performance world not over about nothing reset there has been some drama in the javascript performance world not in the way you think though not people fighting for whose stuff performs better or who has the better solution to problems more subtle drama and call outs and mistakes that are made and being called out in less appropriate ways so what we're here to talk about today is the drama between the remix guys and the solid start documentation maintainers i want to be very clear about that because we've been seeing people try to blow this up to a greater solid thing and it isn't that there was a mistake made in a documentation process and people have been trying to blow this up way further there was a mistake made though so what was that mistake in an early version of the solid start documentation the people who are working on the docs i'm not going to call out any specific names i don't think it's super important we're using remix as a reference for some of the concepts in particular nested routing which remix is one of the frameworks that is pushed the hardest in the framework itself the idea started with react router and they have done some really cool things with it within remix but in the source code in the conversations in many ways solid start which is solid js's equivalent of a nexus or a remix is heavily inspired by both solid or by nexjs and by remix as well as by many other frameworks and solutions solid start is taking ideas from all over and pulling them all in and in the process of scaffolding the documentation for some of these features which by the way in the code itself did credit remix for these things and in markdown files for things like solid session they directly credit remix for those things this documentation page accidentally slipped out when they were merging other pr's that when it was meant to be a scaffold in a like pr as they were adding features the features are very similar they did learn a lot from solid js or from remix in the solid json solid start docs that said the thing that was stolen here was not stolen it was used as a template the equivalent of a lorem ipsum but actually with valuable content the mistake here in my opinion was not putting a giant to do put real docs here at the top and i highly encourage anybody who uses other things as reference that you go out of your way to high up and often say this is from here this is not done this is the thing that we are doing for now as a placeholder this is a page that has since been pulled down they planned on rewriting it they were almost done with the rewrite anyways but that didn't stop ryan and this is the thing i want to focus on is that ryan florence a javascript developer known mostly for both like being a co-founder of remix as well as his work on react router use his over a hundred thousand he might be close to two hundred thousand follower platform to [Music] drag the solid documentation builders and solid as a whole and i solid screwed up they accidentally merged this thing they copied in a way that should have been called out much more significantly and as much as their communication has been we are learning from a remix and i know that very well like ryan carneato from solid.js is one of the people that convinced me to take remix more seriously and as such it's really frustrating that in a community where we're all learning from each other in particular from remix that a mistake like this would be made it is bad they have since went out of their way to fix it there's now if i go to solid start github and you search here for remix there are now 13 files that have direct attribution with like a code comment that shouts out the remix team and links to the blob directly that they're referencing they went incredibly out of their way to document all of these things so somebody actually just said that they thought maple was the reason i took remix more seriously no maple was in chat when i had started to take remix more seriously maple convinced me that the pieces i wasn't understanding were worth investigating further but yes both maple and ryan carneado have had significant impact on my willingness to have the remix conversation and both are great and i think both have done a great job of engaging with both the hard conversations and the remix team sadly enough the remix team doesn't like to engage in conversations ryan has basically not tweeted for a month now they're in grind mode at remix they're working on some things that i'm sure will be announced in the near future and they haven't been very public right now and this kind of feels like an attempt to get people talking about remix again when the conversation has died down i don't think it is that at the very least i don't think it is consciously that but it feels like that and that feels really bad and i think that as a community we have recognized that now and we all feel pretty bad about this as well the number of people who quote tweeted this and made jokes about this and memes that are going all over it feels like they're not taking part in both sides of open source like remix is built on top of open source ideas and work by many people in the community many hard conversations like one they're never going to admit is that a huge part of why type safety is now a thing that's built into remix is my [ __ ] posting i didn't contribute anything meaningfully but i brute forced that conversation hard enough that it started being had more and i am without question a non-insignificant part of why remix is now type safe and i love that remix is better and as a result the web is better because of my [ __ ] posting that was only done that way because when we tried to engage with them in other ways they were toxic as hell and it is so frustrating where like my brand is to an extent toxic we we say it how it [ __ ] is but we will gladly have the conversation first if we can we love talking with whoever we can about these things especially if they want to listen learn and improve and it's so frustrating that resources and people who are as talented and contributing as much as the remix team are like i i did my review of ryan's talk a few weeks ago it was your months ago now but it was a great talk these guys have so much to contribute so many great ideas and when he tweeted this he disabled replies there was no interest in a conversation here in fact when it became a conversation he deleted his tweet it sucks it genuinely sucks that somebody who has the opportunity to make real impact and improve the web is choosing to not and i am way more upset with the way the remix guys have handled this situation then i am with the solid guys for not properly calling out documentation that they were borrowing during dev both screwed up one eagerly owned it and went out of their way to add attribution everywhere they could it was an honest mistake from a not great practice that they will now address and learn a ton from but this is inexcusable this is using your massive platform to pick on the little guy and that's basically what my quote tweet was like a little s like like indie project with two people kind of working on it like solid start both have other jobs and do other things are doing whatever they can to make progress happen because remix has previously said yeah we'll add re yeah we'll add solid wait no that sounds hard never mind if solid could have been added to remix solid would have been added to remix and solid start might not exist but the remix guys dropped the ball on it and now they're doing whatever they can to make it happen and they are doing it in a very honest way and they slipped up they made a mistake they owned the [ __ ] out of that mistake and have formally apologized in every way they can and the response from the remix guys is to scorch earth delete all the tweets no more evidence none of this happened no now there are clips now there's going to be a youtube video on my channel tonight you all need to understand the damage you're doing to the community encouraging [ __ ] like this this has to stop and yes this conversation could have happened over dm's ryan but you pulled it out in the public and your little [ __ ] snide reply let me find it quick if you haven't already deleted it there it is think you meant this to be a dm no i didn't no i didn't ryan you're you're making the whole community all of web dev look bad with this [ __ ] it's it's shameful and i'm disappointed i i've been trying to bridge this gap the solid guys have been trying to bridge this gap we're all trying to learn from each other and improve the web dev world as much as we can and you're just here trying to get the credit for it cut the [ __ ] get over yourselves and take part in the conversation rather than appearing for the first time in literally a month the last time you tweeted was july 15th except for one other tweet you did that fred called out that you also deleted and i don't want to bring fred into this because he's trying to be chill but man like this is a pattern it's where's the astral one here it is this was 718 this one's been deleted as well i just i am so done like 130 000 followers you have a responsibility okay apparently there's a new kent tweet i'm sure that at least some of them are watching and sending clips to the team new kent tweet is it a reply to something okay this is a good start thank you kent thank you ken i appreciate this honestly like i i was surprised when kent came in a little hotter i really didn't think that was his way i was surprised by that and clearly he has seen that that was not right and is jumping in i yeah i appreciate this kent and i hope that the team can learn because this isn't like i am upset about the situation but i'm more upset about the pattern this has been a recurring thing i am a [ __ ] poster with 17 000 followers and i hold myself to a higher bar than you guys do and that's concerning a bunch of sirens one sec yeah i i think that the community deserves better and being that y'all are building on top of it you need to set a better example and i will admit i have not set a great example myself but the example i have to follow isn't great either i'm trying specifically now that i have real reach and like real impact and i know these clips are going to get to you guys i'm trying myself as hard as i can to do better and be more respectful in these conversations but i call out [ __ ] when it happens especially if it's being made public and it didn't need to be you took some honest mistakes that were attempts to learn lessons from what you guys were doing and blew them up unfairly and i hope you take this moment to reflect and learn and that you understand the impact that these things have we are one web dev community you're not better than us and we're not better than you bridge the god damn gap cut the [ __ ] and do better guys quite the drama yeah what's good dan sorry for the the distraction there i uh yeah universe code just said on youtube i am both the good and the bad cop i am honored i'll take that one yeah i it's awesome that ryan actually specifically added you and they didn't use it like they didn't do a public sorry to the solid community instead like this is the person who made the mistake owned it and did things about it thank you for doing that i do like that ken knows how to apologize and own [ __ ] i've seen him do it before i think he has an opportunity here to help teach the team and i hope he takes it i think that there's a lot to learn here and i think they kind of have to take that opportunity to grow now i i hope web dev is better after this and not just the technology because right now remix is pushing the technology forward but they're pushing the conversation backwards and that needs to be flipped not necessarily flip but both should be pushing forward anyways that's all i have on this topic i'm gonna go back to chatting and [ __ ] posting oh i know what i can do check this out guys better chat widget wow it's like way more readable yeah we're using this forever now this is so much better my badge is covering it which is annoying i'll deal with that in the future but yeah this is just like a hundred times more readable for me and like looks way better on the screen i'm gonna make an actual like chat widget i can embed out of this soon uh yeah that's coming soon also for those that don't know i made this with solid and solid start both of them are really cool and i'm having a lot of fun playing with them so we can go into that i'm going to hit that marker button so that poor me actually will be editing this we'll have a better time marker made showmy.chat i've i know of this there's supposed to be a button there oh no it's just like that's the chat yeah it looks fine my thing is i want to go crazy with styles and animations okay did you see the fade in on this wait for it actually i should go to a bigger channel uh who is the biggest streamer that's live right now make sure that this is muted good it is for once browse live viewers xqc perfect so if i go to a more chaotic chat check out how well it handles this do you see how readable that is i am so proud this is more readable than twitch chat yes it was auto animate i had to do a few hacks to make it work well yeah i haven't done the color hack so fun fact the twitch chat colors were done by like one engineer going ham on accessibility [ __ ] that's not super realistic a bit too much flashing i agree i might add some low motion of some form but yeah uh you made the one oh you made the chat overlap that's on xqc stream that's hilarious i love that can i pause chat no i literally hacked this together in like two hours yeah uh generally having your chats pop up super super fast is entirely unreadable and that can be a very rough experience cool yeah that's it jesus christ i'm assuming this is just another tmi js hack i'm going to steal whatever you did for badges if there's source code available for that because i'm so annoyed having to deal with the badge thing it's awful am i sure it keeps up with super fast chats yes i am sure i just tested it on one of the fastest chats i'm batching messages so every two seconds i take the new messages and i append them so you get messages in two second bursts so they're actually readable i might knock it down to one second so it feels a little faster paced hell i can do that right now let's go do it that's not going to work but i can go here cd tmux cd i think i put this in p sandbox like this i did cool here's a solid chat beautifully simple no environment variable so nothing to worry about there uh npm run dev cool i that this project made me fall in love with solid again it's super cool so here is where the actual like solid code starts this might look similar it's a lot like a hook and react but it's not a hook because as you see here i'm calling it outside of a component and i can now import buffered chat messages in a different file and use that to render this list and whenever it updates because it's a signal the new messages come in so it's basically like i took the hook ran it i didn't just define it externally i ran the hook externally and outside of solid js land so without even entering solid in here i have an effect because i want this to clean up on like destruction because i'm setting an interval in here i move messages from the buffer chat over to the main chat so i have render chat and buffered chat buffered chat is the one that like takes messages until i move them over a little more complex than it needs to be but i wanted a simple buffer and then i have chat message signal which is export this is the one i want you to use externally then start chat where i lazy import tmi i create a client i connect and then client.on i just call the same separate buffered uh messages from above doesn't matter because there's no like react context within that i have to pass this in to or from for what you'll notice is generally with solid code you're tabbed out way less you don't have to put everything inside of a component for it to work it's really cool in that way when does the destruction happen if it's outside mostly just for dev mode honestly the main reason for that is dev mode also if one of the dependencies changes so in this case if uh one of the depths within it so like if i was calling buffered chat in here so i wanted to console.log bufferedchatmessages.length now that cleanup will run and the function will run again whenever bufferedchat messages changes rather than an effect array or rather than a dependency array at the end whatever you call in here is now dependent instead this is a different model i i could go way more in depth on it but i'm not here to do that i'm here to play with code so i think the first thing i wanted to do was turn up the speed which i would do in here by knocking this from 2000 to let's do 500 for now i feel like 800 might actually be a good middle ground let's try that xqc oh no did i break something multiple instances of solid that doesn't sound right hmm this is a bad start weird anyways yeah that feels a little better still chunked though so it's readable yeah i like this i'm still so impressed with how simple the code is like i have been very happy with that like almost all this code is javascript like this file almost nothing in it is solid specific it's like i define the variables in here and i do whatever i want to them and then in here i import the chat message signal and i do things with it since this doesn't re-run erroneously or inappropriately i can and the only reason i have the on mount specifically the on cleanup here is because of hmr in dev mode i want this to clean up and re-instantiate itself consistently and here i have just standard jsx and then the four component the one catch you can't just dot map because when things change it would have to re-render everything so the four component assures only new items get rendered only old items get removed and nothing else gets changed which means in here and this is like the craziest hack in my opinion when i render a new message on mount i just scroll to it i don't care because this will only ever run once and the power to do something stupid like that inside of your component render is such a beautiful hack to not have to like create an effect and bind it those ways yes this is like if you create your own diy on mount in react you can have similar but the big difference here is components aren't things that re-run in solid components are effectively things you run once to generate html and then you run the cleanups when you remove it if you remove it from the dom the problem with doing somebody said that you can do this in one line of css sure you can't disable it in one line of css here i'll i'll make it disableable uh scroll or auto scroll set auto scroll equals create signal and now i'll make this default we'll default it to true and now let's add a button somewhere i'll move this higher up so i can put the button somewhere convenient div class equals absolute top zero right zero p eight button on click equals set auto that's gonna be hard to see do this for now i should set on word or put on word wrap so you can actually see i'm doing [ __ ] like this pause cool so now i have a button that will pause it and auto scroll only happen when that is set to true and that's simply no maybe i have to re oh i didn't call it i'm stupid again there we go pause and now it's like doing a weird bounce thing because the container is changing sizes but it's not auto scrolling and if i scroll up to the top here or whatever and then i hit this it will resume you can't do that via css unless you're dynamically changing the css at which point you're re-rendering a bunch of [ __ ] you don't need to you can't toggle the one line of css because you would have to then remove and add the line of css and that is a lot scarier than telling javascript to do the thing when this thing happens i this is if i've learned anything from the years i've spent working on chat at twitch and on other products as well scrolling behaviors for fast moving chats css was written for making static component static like sites and the scrolls especially like css scroll stuff is great for static when you have something as dynamic as thousands of chat messages a minute you need to do that in javascript those behaviors are too chaotic to do in css just period like i don't want to go too much further but this is one of those take my word on it ones like yeah cool so solid cool i'm having a lot of fun with it that's a quick demo of the chat app that i've been working on hope to finish it soon we'll uh maybe have a deeper overview in the near future of that one when i have a bit more time i do have other topics i wanted to cover let me pull up my notion quick and pull up my chat uh oh somebody else is the intent for this to be an embed uh i plan on making this a browser embed for the v0 but similar to like monaco js which was written by microsoft as like a text editor for the browser monaco became the base for uh the or [ __ ] i'm so mad at words right now monaco became the base for vs code i could see this becoming the base for a more dynamic chat system somebody asked about notion you should probably bite the bullet on notion i hate to admit it but it's it's tough to beat like i know a lot of people are not the happiest with notion but i am fine with it yeah notion is good it's not great but it's it's inc notion is very good a nice chat up that's a lot of dependencies uh let's look at my depths quick uh it's not that bad if i recall uh it's all dev depths is important so none of these run on clients the only things that run on clients are auto animate and tmi i think that solid start's going to bundle solid js into the client for us automatically but these are all dev depths these all run on server so solid.js meta and router because like i'm using solid start which allows me to like make new pages pre-render things et cetera and it's also the easiest way to build a solid app to quickly start if i need to add back into this i can do it all within this repo i when i have to add off and things like that this is the right call for sure but if i was just making a chat widget for your overlay for your stream this was not the right decision i'd give notion a b i'd give or obsidian a disinterested i can't use it on my phone i don't plan on using quick for much it honestly isn't the best fit for a lot of what i'm building it's really cool tech but generally everything i build is really static or really dynamic i don't have that in between a whole lot oh obsidian for ios exists interesting i have to give it another try then fine i will reconsider obsidian oh god uh yeah i take back the nice things i was saying notions being very broken right now uh streamed cool let's look at oh i added a bunch of topics i forgot about that cool we have a lot of other things we can talk about boys let's hop here quick try again notion versus obsidian this works on mobile i obsidians for people who care too much notions for people who don't care enough that a good answer here we're going with that one anyways poll time next topic so your options are heading errors and next js this one's overdue i owe it to the axiom guys i would really like to get that one out today uh in defending react native that one's actually a little overdue i think i'm gonna hold that for the future because it's like when i say overdue i don't mean like i need to do it asap i mean the the topic has shifted it's not the conversation right now so it's a little less important that i rushed that one out uh passwords are bad that one's overdue i'm gonna move this here is a better spot discord there was the other one oh yeah in defense a views effect would be weird after the solid stuff and react query versus use swr we'll do a two-man poll i'm very lightly leaning this one but they're all good topics i'll let you all battle it out i'm gonna go smoke and grab a soda real quick brb oh no is it hiding the pole from me who the [ __ ] won why can't i look at god i hate this sometimes what one help guys tell me what one use effect [ __ ] was it actually passwords passwords is number one and uses fcbr's number two aiden is that a thing on faucebot can i go set that up right now where do i do this oh screenshot and discord perfect which channel ah sub only wow passwords won by a lot you all want this rant [ __ ] i guess we're ranting about passwords now where is that marker button cool hopefully these markers are setting because my life is going to be annoying and edges will be even more so yeah okay time to talk about passwords i will close these things for now uh aiden did you tell me where to go to enable us chat alerts okay aha oh yeah these are useful yeah that's enough for me very useful i'm going to put in the title changes too uh i guess that that's fine this will help my own paranoia yeah i dig that thank you i'll come in here and add more nice things for other things in the future but for now that will make my life a lot better in defensive use effect y'all just don't want to hear you're using it wrong yeah this is basically my take like the video is gonna i have to make like the spiciest thumbnail and title for all that and then it's it's not the spicy thing at all but that's that's fine uh i should run an ad by the way i'm about to run an ad if you see an ad that means you're not subscribed please subscribe not only will you no longer get ads when you're watching me on twitch more importantly have access to the sub only channel in the discord so hit that subscribe button on twitch or if you're on youtube hit the member button has the same effect let's hit that one-minute ad break on both platforms good [ __ ] five tier one gifts thank you kevin for that huge huge thank you so much nifty gifting a sub to jacob that means jacob wasn't subbed what the hell just saw dan gifted to ben myers as well huge shout out to both dan and ben love you both akal thank you for the sub as well my half slice of pizza just finished testing one moment look at that guys your favorite streamer is trying to take care of his health while streaming actually though i wanted to stream longer than usual and i need to make sure i eat something if i'm going to do that so there's now food i will reward myself with this after the password rant password okay real talk let's i'm gonna do something a little different let's sketch out the password talk because i have not thought about this enough and i don't actually know what i want to do for it so password talk game plan the the big question i want to answer is is this going to be a tick tock type like short thing okay is it is this a one minute a three minute a 15 minute or a 45 plus like those are the four sizes i can aim for i think this one is one minute able but it might be a three to fifteen and i have to decide on that yeah i think 15 tops is like for sure 15's the cap but this is the question of like one to three to 15. okay so what are the things we want to cover uh passwords are i will say i'll just say what they are insecure uh two ways one is people forget them the other is people steal them uh better options exist simpler things like oauth more sick or complex things like yubikeys integrations like magic links and for both ux and for safety please don't use passwords you're as secure as your weakest link don't let that link be your user how's that look decent enough plan yo brand or brand risker why are you posting my password in chat what the [ __ ] thank you for calling out that i'm muted i was eating trying to be polite somebody said that uh password guidelines are bad for a bunch of sites and they're terrible and that is incredibly frustrating jacob look just because that's that blast okay just because we had fred on and his voice is perfect does that mean you can drag me like this anyways i think like magic code versus magic links are the types of things i would sneak into the 15 to 45 minute version of this but i think that the like three minute version of this talk won't fit that if the website web app is generating passwords for you that sounds way worse because now you're only as good as their memory that's like literally the first point in here the worst part of passwords people have to remember them yo squeakers thank you for the sub really appreciate that how are we doing on memberships i don't get notifications for those in here oh it's just harsh and alex unless it's not showing me when more people join his members oh you got a fancy green name too on youtube that's really cool i'm thinking like in the future i'm going to have youtube chat on the stream like i do twitch chat but only for members because i have no other way of securing it and i really don't want [ __ ] up [ __ ] appearing on my stream so probably have to remember yeah you have to remember one password there are services like one password but yeah god don't say a muted one i'm not you're gonna [ __ ] with my head so bad now i'm just constantly paranoid because i'm not wearing headphones so i'm not monitoring myself right now it's like you also get to see all my hair for once until i get it cut off again i i can look at the monitoring wes i'm coming from both channels i'm eternally paranoid of that so somebody else at my interface has monitoring yes my interface is over there so like here pretty far from where i'm normally looking to see chat and [ __ ] it still shows the level when muted it just has like a a hidden like muted thing on the bottom that's like it's it's visible but it's like a red that's pretty low that i have to look for and i have multiple other layers of mute between that and my stream where i could be muted in windows i could be muted on device i could be muted in obs i can be muted with one of the filters in obs and i could just have something wrong yes i'm drinking a soda because i need to stay awake and focused what do i use to manage all the mutes i used to just use my stream deck but now there's too many so i can't which is annoying i do miss when i could just use that one button but now i have a lot of things what's with the thumbnail face expressions i gotta make them look clickable what the [ __ ] doing what i have to it's my job most of my job is thumbnails for youtube like that's seriously the hard part and it's why i'm doing well can you ask an off-topic question about my blog sure go ahead i haven't changed to start doing this rant yet so go nuts i'm also i'm thinking for this one i'm gonna go for the three minute i i'm gonna aim for like a little under two ideally with things i can trim so i can force it under one for youtube short i appreciate the ask of can i ask this off topic question or should i wait so yeah go nuts ask away because you were polite and i want to set a good example for the community i also hate that clickbait thumbnails work on everybody but they do myself included maybe someday i'll do an architecture video do i hit the gym i do not i skateboard i don't do that enough anymore either only fans i'm waiting for like i wish april fool's day was more than once a year so i could do something good for that but yeah i'm coming up with what i'll do for only fans i think we have some fun with that yo mug test you here waiting for your question then we're gonna do a rant there we are airpod yeah oh no do not tell me that if i heard it's out of stock that is really scary no they're not okay you just scared the be careful with those trigger words okay phillips is gonna discontinue these headphones any day now and i'm going to be the most depressed human you had me so scared for a second there let me get my referral link quick oh your country yes purchased eight times i have friends and they deserve good headphones and i've had co-workers and they deserve good headphones too those are my favorite gifts to like buy my team and [ __ ] yeah i i love these yes they're open they're they're absurdly open they're so open that i stopped using them on stream because the mic kind of picks them up and i like playing them loud and i like listening to myself back loud when i'm streaming so i stopped using them when i'm live but they are my go-to comfy headphones for pretty much everything else they're just they're so goddamn comfortable that they've ruined most headphones for me and they sound good enough that i rarely want to reach for other things i like these better than anything beyerdynamics ever put out better dynamic headphones sound okay for monitoring they have decent sound stage for gaming and they hurt my head after a medium amount of time but it's really hard to beat the 9500s for a general open-back comfortable headphone to wear the link on the blog oh no does my i have to go change the link then also that the links on my blog aren't uh affiliate links so use the ones i'm sharing here if you can yeah i'll go update all those to affiliate links in the future the 990s always hurt my ears those things suck in that way a bunch of my favorite headphones hurt to wear yeah i so to be fair all of the m50s were bad every version of the m50 always sounded like [ __ ] the m40s are pretty good for the money what do i get for my affiliate links uh i don't know if i'm allowed to share this i don't care i've been kicked from the affiliate program i'll get kicked from the affiliate program again i get total earnings negative two dollars did somebody return one of the things they bought are you kidding i got 114 dollars of commission and amazon credit so this is like credit that i get in like an aws or an amazon gift card but this is great so yeah y'all see how much money i'm making off there so please use my affiliate links and please don't return the things linus lost his [ __ ] that's a huge income loss for him don't oh it's showing how linus lost his oh well i'll learn the lesson and i'll complain about it publicly i can make some really good content about that actually if it happens dumb password rule let's see this [Laughter] this is not what i thought this was this is cold did i see minecraft [Music] this is fantastic this is a great resource this is up there with sso tax thank you for sharing this paypal's is awful i know that much ah thank you for the question uh do you can you dm me like what country you're in and what headphones are available and i can make recommendations based on that like i out of like a set of 20 headphones i can usually pick like the best three i just need to to know what those options are so hit me up later you have full permission love headphone questions i'm probably going to start doing audio rants on a different channel in the near future these are just things i care a lot about generally speaking the the three people i go to for opinions for headphone stuff dms bias we're homies i loved this content well before we were homies uh zs z reviews he's a spicy take but i'd say zeos is similar to the way i do my content where it's like very no [ __ ] like i'm here to talk it how it is and headphone the headphone show it is like another dms thing these guys are great my personal favorite of lately he's a huge inspiration in so many ways critical he has a different channel now critical plus because google locked him out of his main chronicles editor is killing it chronicles delivery is phenomenal his like tech and reviews and scores and everything are as scientific as they can be he has the deepest database of headphone measurements on the internet by a lot in your fidelity is his the yeah if you're looking for the measured best headphones he won like the best measurements and the technically like what headphones are the best he's a great person for that funny enough i have the the moon drop chew uh box holding up my [ __ ] uh road right now my uh interface and i want to get them out but i don't want to move things so i'm being lazy about it i also have if you are asking about the 9600 do i have them on a wall still oh i took them off my wall that's how much i do like the 9600 they're off my wall i i really did not like them the pads are like scratchy like the pads on the 9500 are like this weird like 80s bus foam but it's super comfy the 9600s it's like a scratchier version of like a similar material it's uncomfortable the uh sound is not as good it's a lot narrower it's trying to do the harmon curve a bit but the bass is flat as hell the 9500s are trying to be hd 600s and they do a pretty good job the 9600s are trying to be 598 so they don't do a very good job i those are just random numbers to a lot of you and i'm sorry i see the viewer numbers going down so i gotta talk about passwords cool we're doing the password rant let me pull this up so i have it for reference this one's gonna be straight to cam because it can be am i in focus that looks mostly in focus should i move my hairs people don't complain let them see my eyes at least a little bit get a thumbnail face or two that should be a good one cool hitting the clip whatever the [ __ ] button now we need to talk about passwords i keep getting questions how do we add password auth to our app that's fine if you need to do it for specific reasons but i find that we reach the passwords as a default when they're actually more of a curse everybody from like microsoft to the medical world are realizing that passwords are an incredibly insecure inconvenient way to do things and there are many better options now so i want to go over first off why passwords are bad more importantly what we can do better and a general why they're unsafe so super quick passwords fail in three significant ways they are god i have a lot of cutting to do passwords suck because of people more than anything people forget their passwords people steal passwords people lose passwords people pick bad passwords passwords they reuse passwords and then another service gets compromised and you're screwed on your side too like people make passwords bad because of that you should not be using them if you can avoid them when you have a password picking solution your security is as good as your users and if you can avoid that at least a decent bit you should in a world where things like oauth where you can add a sign in with google facebook twitter twitch or any other button in a few lines of code now there is no reason to build your own less secure more complex authentication system especially if your users already have accounts on other things there are two better paths to go than passwords one is the way more secure solution of using things like two-factor authentication with yubikeys the other one is more ergonomic things like signing in via oauth with other platforms or magic links being sent to an email address to be used for auth both of these solutions are more secure and more more chopping great both of these solutions are way more secure than passwords and stop making your security fall back oh god this is going to be really annoying to cut thankfully the tech talks are my problem sadly your users will pick bad passwords and they might pick one for the other accounts and other systems but do you know what google has that you probably can't afford really good support for when an account gets hacked now if a user does pick bad passwords and they do get compromised that is a problem that exists outside of your space and you can let them go do that an absolute worst case you can reassign their user account to a different authentication provider on your side when they move to something else all of that is way easier than them freaking out because they lost or forgot a password if you have their original email address that they signed in with from another platform through oauth you have a much better validation method than you would via a randomly picked password on top of that everyone seems to integrate passwords poorly they're not hashing things properly they're storing them poorly then the service gets hacked and all the passwords come out it is a huge risk for your users to store passwords or have them in your pipe in the first place there are very very few applications that are not better served with oauth magic links or two-factor mandatory authentication passwords are inherently less secure than all of those solutions please if you do not need passwords stop using them end rant i think there's enough content in there to structure something up oh the like little quip at the end your application's only as secure as your weakest link try to not make that link your users and certainly don't let it be their memory that's not going to work well cool that'll be useful nice let me go hit the button for that in notion so i don't lose track of it passwords are bad streamed short tick tock correct category uh rad what next that was a good rant do i follow it up with another ad break i think i do make sure you're subscribed if you're not so you can stop getting these ad breaks oh we just got another member on youtube shout out nathan swann thank you so much for joining good to have you in the t3 club cool use effect was next we should do another poll to be fair uh in defense of passwords i'm relieved nobody rerolled that take i would have been upset let's not invite two now please no congrats on not being in being in the no ad crew now hamster good to have you here next js or logging is there any way to get a recording of these streams boy do i have good news for you dante if you go to my youtube channel you might have noticed there's a tab called videos in this tab called videos every single one of my streams is interwoven with my actual content i've been leaving them up i try to make them private all of them are in a playlist here called stream bots literally every stream i have ever done is in here all there if you want to watch them one at a time that said if you're watching on youtube which you are right now the link you're currently watching on will stay good you can pause right now go do something else come back when i'm no longer live and resume from where you are it's really annoying and hurts my algorithm placement to do that but i do it for y'all's convenience so please watch my vods it helps my channel a lot and if you can and you're a youtube premium youtube red whatever it's called now user if you could hit the little download button on the vods and then play it just a tiny bit of them it is hugely appreciated for me because when you download a whole vod that counts as a whole view and when you get me a whole view on a four hour plus vod that makes my life a lot better so please if you can you're a youtube premium user go download some pods for me really appreciate that so the problem with making another channel for my vods is i have to upload them after would you like to download them before and i have to manage all of that it's not a just make a second channel it's eat a ton of overhead to make a second channel know that that's gonna drag in the algo for a while if ever and pay someone to manage all of that for me no uh their typical engineer salary at 80 to 100k depends on like the person and where they live a lot of it's based on like you're living like the place you're living in we're trying to be realistic it's not like we're a very early stage startup we can't be paying people a lot of money i'll be fully transparent for myself i'm making 60k a year i'm not paying myself a lot of twitch it's barely enough to cover rent in the city maple we need to chat later uh yeah maple we need to chat later [ __ ] uh yeah okay [ __ ] christ anyways uh did i make the poll yet no i was typing the things for the poll what else were we missing for the poll were they missing anything for the poll in defense of class components please know did i work at twitch when it was still rails yeah i helped move it over actually that was one of the cooler things i got to work on at twitch using html wrong just find our back end i mean the next.js error logging is a very back end topic at least the way i plan on covering it do i have any other more back endy things it's the reliability rant to an extent i don't have a socket rant in me right now guys please don't make me do that we'll go with these three i'm still slightly leaning the react query versus uswrx that could be short and is very algo friendly but the use effect defense squad has a lot of potential oh you all want the error logging did did seif plant you from axiom apollo isn't relevant in this comparison apollo convinced us to start using queries like in a granular way but apollo is just for graphql and please keep graphql out of your [ __ ] yeah something everyone doesn't wants to get better at that's a very valid point in defense of nest oh god getting some interesting topic ideas can you use your mod points to add 20 to use effect i promise you if we don't get to it today we'll do it in the we'll do something similar to it in the twitter space tonight after the stream i just saw can this be a new copy pasta this is a banger so a pip is a performance improvement plan it means it's the nice way of getting almost fired is there an alternative to use effect it's more of a people think you shouldn't use react because use effect is bad oh [ __ ] react versus swr one i was not sure it would ah very interesting good to know have i been pipped before i have come dangerously [ __ ] close especially early in my career but i i took the signal very hard the signal for me was i was a contractor at twitch for my first three months and at the end i was supposed to be renewed full time and i got renewed for another three month contract and that was the oh [ __ ] i'm not doing well enough they're not ready to hire me yet if you've survived a pip you're ready to get your next job i i think that we talked before a bit about this wes uh time for you to break three especially if you're knowing what i know of you wes this is i think i know this is the west i'm thinking of if so yes uh pip is performance improvement plan it means that you're about to get fired cool so the winner was a very clear react query versus uswr i do have a lot of things to talk about there windows versus mac mac when i can windows when i can't there are things windows is better at and dev is not one of them i love this copy pasta mine is the fact that it highlights me it's a good one a pip command i do like the idea of a pip command let's i'm going to rename this one passwords new scene acts query versus use swr it's ready ahead of time i want to make sure that i'm calling it the right thing they call it swr think it's time for this one let's hit the button marker created we're talking about react query versus swr so yet another topic that i get asked way too much about hey theo i see you like that react query thing what about swr it's just like react query but way smaller i'm here to tell you all of the ways that react query is nothing like swr i want to be clear swi isn't bad it's just explicitly not good for a vast majority of the things that i use react query for i want to go over this super quick so what are we talking about first we should define these two solutions and what they are react query is let's go to their website and see i guess it's tan stack query i'm going to call it react query because that's how it will perform in the algo i have to be realistic about that i like the definition of async state management solution our query is best in class async state management server client state sync focus powerful cache layer uh mutation or queries and mutations so what do these things mean the best in class async state management means that react query is a good way to do things that are asynchronous as in i have to fetch some data wait for it and then do something with it or i want to activate a video device on my computer wait for it to activate and then get back the list of active devices both of those are asynchronous functions i would be calling in my javascript that i want to get the result of and use it and that's going to have a loading state and error state a bunch of other things that you do and you deal with when you write code especially asynchronous code that goes over i o boundaries the focus of react query is synchronization of state between the server and the client so when you fetch data from a server when you post data to the server to like add to post a comment on a blog post and things like that those are state changes that a client is making to the server or existing states that the client is or consuming from the server the goal of react query is to make those things way easier but also other things that are asynchronous as well like the device management stuff i was talking about earlier there is also a very powerful cache layer for all of the queries that you do so if i'm fetching from user i want user with id seven and i want that user with id seven in four different places i don't have to build a context or a state manager to share that to all these different places as long as they're all using their own unique keys what we get as a result is a cache layer that is shared between all of those instances and only one of them needs to actually run the function in fetch and then all of them share a loading state all of them share an error state and all of them share the data one that data comes through the most important piece and we're going to fixate a lot on this one today though is the mutations a mutation is not a thing that runs automatically it's not a thing that runs when the component mounts it's a thing that runs when a user does something like creating a comment when that happens react query has loading states and error states for it the ability to define different conditions callbacks for on succeed on fail etc as well as the ability to invalidate a query when a mutation occurs for example when a mutation occurs that adds a new comment you might want to mutate the query that has all of the comments so you can manually add in your comment like via javascript on client it's called an optimistic update or you want to revalidate and refetch from the server so you have a new version of that response that includes your comment that's a invalidate when you invalidate the existing query to tell the javascript to go rerun it the mutation layer here is not just important for the cache and validations it's also important because it gives you the ability to have loading and error states yourself i go find an example sure i can find one relatively quickly uh react query there uh mutation example in here oh it's not like an example okay cool here's one so in this mutation we axios post a new to-do so this is you added to do to your to-do list so when we're loading we have text that says adding to do when we're not if we have an error we display the error if it succeeds we display this and on click of this button mutation.mutate this is the function that you defined here so whatever you put here is now a function you can call here mutation.mutate you name it whatever you can dump it if you please and now i have the id and title being posted past this as the arguments and i have all of these additional states built in and if i wanted to do an invalidation or do other changes here i could comma pass it an object that handles all of these other cases do they have examples in here even oh here's an event prevent prevent defaults interesting this is showing you different syntaxes here are the side effects you can on mutate on error on success unsettled you have the ability to do different things depending on the different cases that your mutation might be in which lets you handle optimistic updates make your ui feel and behave snappy as hell with the reliability of if an error occurs you get that and do as you please with it as well as have it on the other side to render with you get a ton from react query especially considering how reasonably sized it is it is a phenomenal library that solves a lot of types of problems that you're going to find yourself building solutions for without it so i guess i can just copy both of these swr is a nice hook around fetch yeah about it react query is a state management solution swr by their own description so react hook for data fetching they have some very bad names for things in here one of my favorite interactions was somebody said but what if i want to use swr for data that's not there immediately like i want to have a user leave a comment or something to which lee robb replied oh you mean mutations and linked to this page which is not for mutations the way we just described what mutations do in swr is the revalidate and invalidate thing i was describing earlier what mutate does here is not fire the call to this endpoint what mutate does here is tells the existing hooks in your app hey if you have this data it's old you need to re-fetch it that's all it does and nothing else and that doesn't mean it's bad that means it does one thing do they show off the size on the home page i thought they did it's tiny can i bundle phobia do they okay this swr 4.2 kilobytes versus at tan stack what's the tan stack query npm install now they it's different and i feel stupid all the time let's react query 11.4k so a little under 3x the size is that not ideal sure if you can get away with swr probably should do it but swr is not meant to be a state management solution for all of your data this is minified plus gzip so it's 12k minjeed versus 4.2k minjeed so this is the size of what you're downloading also looks like it's about to get bigger with version two yeah because in version two they're adding their equivalent of mutations they have to rename everything as a result and now it's about half the size of react query because crazy enough the things react query does are very valuable most of these solutions need them and there is some amount of space that it needs to take up in your like or package and that is fine it just sucks to have people keep saying why are you using react query you can just use swr for everything when you can use swr for fetching in pretty much nothing else so if you are literally just fetching data on mount of your components and you want to roll your own suspense boundaries to manage those states let's look at an example uh that's not even showing it oh it does give you error state there but it doesn't give you a loading state you have to infer one off of not having data they they they don't give you a loading because it's more kilobytes in their package the fun fact you can have loading and data because there's an is fetching in react query so if you're revalidating data but you want to show the old state you can have two different booleans for those two different things it's really annoying that you don't even have an is loading or much less it is fetching and they're showing you like use swr feels like they took the minimal use effect use case and then made that a custom hook and that's all they did and that's fine if that's all you need is a minimal custom hook wrapping use wrapping fetch and use effect cool i need a lot more than that can i go to the github for this uh a csvr site can i just go to the swrepo is it linked on the homepage how the [ __ ] do i get to the github this doesn't even link oh it's hidden in the corner behind my profile picture there we go let's look at some source internal index looks like they have some much more complex state management being added because of the 2.0 change so they're uh yeah 1.3.0 let's take a look oh look at that this doesn't exist in 1.3.0 what a surprise let's take a look at the current or at the currently deployed version source sorry in this guy it's got some big global cache studio or global state a bunch of ref bindings is this the parent wrap or this is use swr handler there's some weird cleanup state [ __ ] it's well commented that's nice then all of the isomorphic layout effects checks if keys have changed for the new data to force the revalidates polling just hacked in as its own effect and all of this runs inside of react and inside of your react loop too i would bet and i am too lazy to benchmark because somebody else wants to go nuts i would love to see a benchmark of swr versus react query in terms of performance when you're invalidating a lot of things and you're fetching data in a lot of places i would be surprised if they're even like comparable yeah so between react query and swr if you can actually fit your problem into a nice hook around fetch and you don't have any other async stuff in your code base that you want to hook into react swr is fine but the moment you want to post data you want to update data you want a more powerful cache layer for your data or you want to do some async stuff that isn't a single fetch poll or a single fetch get call react query will serve you significantly so please stop asking me this question i'm very excited to have this up on my youtube so i can link to it in the future react query helps me build apps swr helps me fetch data sometimes very different even if the use query hook looks similar how was that rant i think that was a good one i can turn my chat overlay and [ __ ] back on 8 out of 10. i appreciate the honesty hit that marker again for the end i'm not showing off my typing speed i i i have typed at 150. i'm nowhere near that nowadays because i don't type enough nowadays and i don't practice at all anymore i'm also getting used to a new keyboard at the moment so i don't do the use effect next i've been streaming for almost four hours who knows if i'm even going to be live like for much longer mutation is in like when you have an error for a mutation in react query yeah it shouldn't be a mutation is instant space it's going to be it shouldn't affect the global cache so right now i'm trying the mojo 68 i'm pissed because for some reason i thought it was a 60 and it's like one of the weird 68 percents with a few keys on the side and the arrow buttons and i hate both of those things i don't want them so i might end up returning it or selling it but it's it's very pretty and i like the key switches a lot so we'll we'll see how to increase typing speed type more type a lot more type all of the time set up straight put your arms the right way and type a lot rate all the remix memes oh we could go over the remix memes there are some really good remix memes no those are sub only the remix memes are in the sub only channels as tempting as it is to show those off those are a benefit for the subscribers so if you're not already subscribed or a member on youtube now's a better time than ever to fix that because if you do you'll be able to see all the rare memes in the rare memes channel shout out to adriano for the t3 club join on youtube appreciate you immensely also i missed a handful of subs uh josh borsa appreciate that a bunch as well as rysha and i think i thanked you already squeakers regardless thank you yeah if you're a tier three sub on twitch you're allowed to at me in the discord what's the biggest productivity tip oh i don't know if i can off the top of my head have like one biggest but i can give a couple hacks that helped me one of the biggest one was stop introducing new tools so eagerly i i had a bad habit of like getting really into like crazy linux configurations and using like super heavy like my tmux config was massive and my z shell profile was even longer i used to go ham with my setups and then i had a co-worker built my manager my first manager at twitch he would full screen every app and command tab between them on his laptop screen and i never saw somebody work faster and that forced me to reconsider my way of doing things and slowly have like removed tools as much as i can to have the simplest workflow possible so to this day when i am not streaming here is my workflow i have one workspace it's named desktop i have however many apps open i often have more than one text editor open probably like my here's one of my best pro tips actually uh right here we all know command tab that's how you switch between things in mac os but have you seen command tilde command tilde the key right above tab switches between two versions of the same app so if you have two windows open in vs code you just move your index finger up slightly when you hit tab and then you can switch between them and this as a way to switch between an app and then switch between instances of the app has never made me move faster even when i was deep in my i3 like tmux days and i just fly so yeah one workspace everything full screen command tab to switch apps command tilde to switch between the instances of the app and that's it that's my whole setup to anybody who i just saved significant amounts of time on your life which i absolutely did i better get a gift sub or two from you considering how valuable your time is and how much i just got you back oh i don't use my mouse for anything but video games i'm a trackpad guy all the way now i love my mac trackpad love this thing so much i understand the hate but mac os is better used they're like navigated via trackpad so badass uh funny enough once you learn this hotkey you stop using you i used to prefer alt tab on windows for sure because you could go through multiple instances of the same app i prefer the mac behavior because i want to choose between them am i switching apps or am i switching context within the app i don't like the windows behavior and i'm looking for something to replicate the mac behavior which is wild because historically i've done the opposite like i have all these crazy programs to like move windows around and [ __ ] like that but man shout out to ariel for the five gift subs huge thank you so much arielle as well as dev jay appreciate the gifts up from you as well thank you guys definitely uh we'll have i i am confident you will save that time once you learn that hotkey so the person's asking what it is command tab switches between apps command tilde switches between instances of the same app on mac and if somebody knows how to do that on windows so i can commit always alt tab apps and not like right now with windows 11 it like has three instances of the same app because it has chrome left chrome right and then chrome combined as a different thing alt tab on windows sucks now so if anybody knows how to fix it on windows please tell me so i can use windows more but right now i'm actually happy on my mac for the first time ever so yeah anyways do i use the magic keyboard yes for all of my work i use this or the laptop keyboard itself usually when i'm coding i'm sitting on my couch with the laptop on my lap macbook air i'm using the pro now because i need it for video editing but i always rock in the air forever it was fine have i played dead cells that's like one of the three games i still play i can get rid of the combined left right and settings uh send me a link later i am i'm doing that i appreciate you might so you personally dm me if you have a link to that mayan just dm me on discord or the other two games whatever skate game i'm currently hooked on and whatever pokemon game i'm currently grinding not only is it the dedicated magic keyboard it's the one with the fingerprint scanner it's the best i don't have to touch my computer or anything interesting very interesting i'm curious if you adapt to this because i very much like this behavior don't judge me matt where did i put my others do not judge me i know what i like can't be mad at me for it you don't want to see the trackpad collection it's way worse to be fair all of those were borrowed from previous employers this one was purchased because i wanted the fingerprint but yeah i i have a lot of them too much keyboard talk i think i have to talk about use effect no uh i did the react query thing uh i owe the next logs thing it is getting late though shall we talk about logs for a little bit let's talk about logs and i'll use the use effect thing to promote jacob's twitter space i promise to talk about use effect in jacob's twitter space we'll use that as the planning session to figure out how i tackle use effect more formally sound good talk about next jsrs now then we talk about use effect there for the preempt and then i'll do a proper indefensive use effect stream next week sounds good to me let's talk about errors hit that marker button are you getting the errors in your next app right now seriously if i said yo i just had an error i was checking out and something went wrong can you check it do you have the ability to go find that if the answer is yes i'm pumped for you leave a comment as to how you're doing that but if the answer is no this is a very important video for you to watch because a lot of people don't keep track of the errors that happen in their next deployments and other back-end solutions as well it's easy for us in typescript land to get used to just console logging everything and having it there when we have problems but once we ship to users we lose that control and it's very important to make sure your errors are going somewhere where you can find them and address them meaningfully for your users so how do i recommend doing that well as we've mentioned before next isn't just a front-end framework it's actually explicitly not next is a back-end framework right now if you're deploying your next app inversel logs are happening but they're not retained if you happen to be in the dashboard when an error occurs it's sitting there when you're there and you have the ability to see it however if an error happened 10 minutes ago it won't be there unless you're explicitly using a thing called a log drain which takes those logs as they happen and drops them into a collection of logs somewhere that you can query against and look into the one that we're going to be talking about today they asked a sponsor and i said no because i love these guys they're the homies we're here to talk about axiom axiom is a relatively new option in the space that i am particularly hyped on they are specifically for back end logs right now that's the main thing that they're delivering on and it is one of the most convenient ways to do it they're trusted by us as you see here as well as like prisma uses them super heavily for cell themselves are playing with them a bunch plex has been one of their biggest customers from what i know the magic of axiom is how you integrate it into a versal app i'm going to hide the screen so i don't accidentally leak things i shouldn't we're going to go to let's go to the poll app how about that we'll start there cool here's zapdos this is the polling app that brent and i were working on a few days ago let's add a log dump xcm add integration sure making a whole new account on axiom by the way so i want to use my work account for this and they even have oh next act seems really cool this package actually took a bunch of guidance from me and it's in a really good state you could send web vitals from versailles to axiom for your actual like user experience so you wrap your app with this it rewrites requests so that they can't be blocked by like ad blockers and [ __ ] and sends a bunch of like web vital data so like how cpu usage how fast are pages loading that type of stuff this is very new and i personally have not played with it just yet but i love that it's open source i love the way that they built it they've been taking tons of advice from me directly as well as others in the community and uh where is the with axiom yeah this guy the clever thing it does here it proxy paths uh web vitals and logs so that you can reroute all the traffic through your own endpoint so to go back into axiom directly uh did i oh that was a new tab cool i think i actually need to go sign in on axiom with my github again cool and we have here versailles nothing's happened just yet but if i go to z.t3.gg and i wait for this to load i'll just go i guess i can archive a question or two here now might take a bit for that data to hit or do i have to turn it on i might have to turn it on zapdos settings integrations configure oh no seems like it's already configured which means theoretically i should be getting data yep data's coming through now if i run the query oh this is just for that query builder but i should yep here are all of our events and now anything where console logging anything else we're doing on the server we now get all the data for it that's all it took an account clicked link and now all of the requests that we get come in here i can filter by error i can filter by pretty much anything i can think of so we can look at all of the requests that uh contain theo so as if you went to my q a url which nobody has just yet but if i go to c dot t3 dot g slash theo i think i have to do it slash ask theo yeah cool so now i'm on the page and doing things let's submit a question quick theoretically yeah request.path contains theo here's some requests that contain theo super cool it is one of the easiest ways to log absurd amounts of data query through it and figure out what went wrong if a user had an error the pricing is insane if i recall we have a sweetheart deal so i don't know what it actually is free half a terabyte a month with 30 days of retention and 5 terabytes with 90 days for a hundred a month and unlimited team members at this tier two they don't lock on like this is what i like about axiom in particular there's not a lot of providers that are like this where it's they're chill about the way that the things they're pricing on they're the thing that they are charging you for is the absurd amount of data they expect some customers to push and there are people who are doing more than five terabytes of logs a month on their service right now they're they're able to power some crazy [ __ ] their infra is nuts the people working on it are like writing like what are they one of the funniest conversations i had with uh seif from axiom is him and another engineer there were actively trying to like pick up on c plus again not so they could write it for performance but because they were going through a bunch of like research papers and thesis from like math students that like wrote these like 40 plus page theories on how to theoretically have like the most performant data structures and search methodologies and they were learning c plus plus because all of those students that wrote those papers wrote them in this awful c plus like sub dialect and used no packages i don't believe in packages so they became c plus experts just to translate the source code from those chaotic research papers into something usable for their own services it is really cool what they've pushed themselves through to make this possible maple asked what happens if you hit the limit i have no idea i'm assuming you get a bunch of warnings ahead of time and they probably lock it because it's how much data you can push up like if you actually break 0.5 terabytes of data pushed up you're probably already talking to the founders they're super cool they jump and [ __ ] all the time i have dms from seif right now which i should probably let him know just dm letting him know that he's being shield at the moment love these guys a ton i they offered me a very generous amount of money for this sponsorship and i as i said declined because we're getting way more value than what that sponsorship would have been out of me getting to use them at ping and they've given us great deals and helped us out a ton there too and they're so goddamn responsive like for me to say hey if you do a next thing it might be worth looking at this package and then a few days later they dm me a link to their new with axiom next.js package that does all of the things i recommended and more like this is one of those teams i trust more than anything and because of that they're easy to recommend the fact that the product is great and solves a common problem is a nice bonus so axiom is my solution for server side and axiom's web vitals are my up-and-coming solution for keeping track of what the performance is like for the users on the site for client experience though which is very important like they click a button and something disappears or breaks this isn't gonna screen record and give you all the details you might need for those types of things historically log rocket has been the go-to for that type of thing log rocket you might know for their awesome blog or their podcasts what you might not know is what they actually do log rockets thing is session replay they don't really have any good examples on the home page hilariously enough because they're too busy buzzwording things up but the the goal is a user session you can like click on a user was on your website for 15 minutes they went here here and here you can click that session and it will play it back for you you can speed it up slow it down it's not actually recording the session it doesn't take the pictures or video like for us we're doing a video chat up i can't see the video from the session but what it does is track the like events that a user does log rockets pricing's a little aggressive they're the industry standard though so definitely worth considering recently i've been playing with uh highlight dot run which is a newer more minimal alternative very very similar though they're a tiny bit more focused on how to connect the back end and the front end so you can have a more full stack error story personally i think the pairing of axiom for back end and highlight.io for frontend is a really powerful combo so that's what we're moving towards right now at ping i am very excited about the options here in particular the react components and like next stuff for highlight is also in a very good state so these are both the solutions i personally use for tracking my errors in next js i think it is very important that you pick something and you know where the errors go whenever an error occurs i also think you should be less scared of console logging in general you shouldn't console log every time a component renders that's chaos and really bad but when an action occurs like when i'm posting to my server and i am changing how i put it when i'm posing to my server and i am changing permission states for a user i might log changing permission states user object current permission user state changing now and then after it changes user state changed successfully to the new user state and it's annoying to have all of those logs maybe i don't think it's that big a deal but the benefit is you now have way more info when you go to figure out what the hell went wrong hope that this helps you figure out what your logging story looks like for your next as apps it's important to know where those errors go and to make sure you can get them when you need them a lot of errors are going to be hard to reproduce and having a system like axiom like log rocket like sentry like highlight these types of solutions will make it way easier for you to know what went wrong and fix those problems when you have them hope this one was helpful thank you so much peace yeah that's going to be a weird outro i'll figure that out later i might just sit here and record a bunch of random outros after stream how was that one guys do you all learn that new info for you guys versailles doesn't have state it's really important to understand this thing about brazil right now vercell is a stateless provider anything that could be state they go dump it somewhere else like to know how highlight works uh the tl dr on how things like this work is they try for the right way to put it it hooks into pretty much every browser event and when they happen they store them and every once in a while it sends them via batch so it's like creating a model of a session and then replicating that for you on your side i would set it up and do a demo but that's a lot of work you connect axiom to versel i did not go over amplitude as amplitude's not for errors amplitude is really cool i am we're working on moving off mixpanel at the moment and amplitude is very likely what we're going with thanks to segment we don't have to worry about all those things we are still on mixpanel and regretting it more every day we have segments so we can move off of mixpanel but we have not done that now i actually think mark recreated our main mixpanel dashboard in segments so i would stop or uh in acts or [ __ ] uh god i'm so bad at names amplitude so i would stop using it but yeah we're only using three right now segment google or google analytics and plausible i need to remove the google analytics both because it isn't gdpr compliant and because we don't use it anymore the link for highlight yes highlight dot io also actually don't use that one highlight.io ref equals theo oh that didn't work i'd have to do the slash yeah i do okay use this link if you go there actually everybody click that link and go there that way so they see that like really heavily and axiom it's the same dot co ref equals theo that way their analytics will show where you guys came from it's not an ad neither are paying me i just want to flex my powers i come to the next brin stream if you're not already following brynn i should plug her everything quick bryn is my co-founder phenomenal designer one of my favorite people to work with also an engineer she built pretty much everything that looks good at pink amplitude and mixpanel for analytics did we talk about astro one oh boy you got quite the vod to watch i do have to do a metric stream because i have a lot to say about metrics let me mark her to mark that one is done i'll add analytics to the list to stream analytics is now on the two stream list y'all win development metrics and sprint planning i'm too bad at all of those things though still still rethinking how we do all of that stuff i have so much [ __ ] to say about metrics and analytics i could do a one-hour rant about just ad block and analytics i probably do a two-hour rant on how i think about it yeah you're probably losing almost all of your important analytics to adblock right now if you don't know what i'm talking about seriously like if you're using any analytics tool that isn't like self-hosting and forwarding all of the events through your own servers the vast majority of your important events especially because ad blocking users are your most technical hardest core users and you're just not getting that data right now so i do have a lot to talk about there it's almost too valuable but y'all deserve it it is 5 30 p.m i have been going for quite a while 4 hours and 15 minutes i think i'm going to start looking for someone to raid that said i want to make sure that y'all are there for the twitter space in 30 minutes so jacob mg evans jacob is the host so i'm going to be plugging him quick make sure you're following jacob because every wednesday through friday oh look at that you can't even see my badge wonderful job twitch every wednesday through friday he does a twitter space at 6 p.m pacific time which is in 30 minutes where i just jump in almost i'd say about two-thirds of them i show up for and we have a lot to rant about so make sure you're following jacob turn on notifications for when he's in a space as well because that's usually an indication i will be there turn on the same notification for me if you haven't yet i'm still going to pick somebody to raid because i'm sure i got some homies live that are worth throwing y'all at oh kees is live doing anything too inappropriate right how long has she been live for only two hours okay we're gonna give kisa a raid kisaka is a good friend uh one of the earliest ping users i think she was like first three so she's a day one in so many senses a youtuber who does not sound or act much like other v tubers should be a pretty fun person to hang out with give her a bunch of love and respect let her know theo sent ya should be a fun one see y'all there and see all the twitter space in a little bit peace y'all cool got a bunch of people ready for that raid appreciate y'all it's for the youtubers feel free to hang out on either let me just quickly send the twitch link to the chat there kisaka toriyama if y'all want to join us on twitch that's where we'll be hitting the raid now thank you guys all see you in spaces later might do a stream this weekend unlikely if not see you next wednesday same time as always i think we'll be talking more solid js peace y'all you




## STREAM VOD Building a Poll Site in NextJS Part 1 - Stream VOD - 20220418
happy sunday y'all wait i want to stop the music where is aha nice everything worked that never happens cool it's almost like i spent hours fixing my stream setup a few days ago and then again yesterday cool anyways happy sunday how you guys doing happy easter something like that go ah sorry for the impromptu last minute stream i wanted to build something today and i couldn't decide what and i made the dumb idea of making a poll knowing exactly what everybody was gonna vote but honestly i was a little surprised how many votes the uh write a blog post option got let me just open the shitposting site makes it a lot easier what's up y'all howdy howdy howdy fizz good to have you all here i had this guy where i was incredibly surprised how many people voted for the blog post honestly this was not something i expected we have a lot of people who want me to write more which is cool wow the uh 3x4 vertical looks way better than i expected it to yeah i'm very happy i took the time to like redo my entire setup yeah it looks sharp cool try uno who knows early i get the value it brings it's not valuable to me i'm very happy with tailwind than the problems it solves for me i could see you know getting there eventually but right now it's not solving a problem i have not gonna play with anything i haven't before today probably i want to build something with the things i already know i have a few things in mind uh let's actually start with that we'll do my usual i don't know what i'm going to have in here so let's get a fresh extra excalibur where it's how are you guys doing today cool i now have this ready all right so the plan is uh i'll just call it straw poll but not totally broken and i have a few goals things i wanted to do during this random goals so one of the first things is like i i we had a couple conversations on twitter about typescript rules so the first thing i want to do is fix next.js's default ts template i also was hoping to [Music] make a better boilerplate for t3 stack uh make resilient service that can handle millions of users thank you hidden also nice twist name almost like i worked on twitch for half a decade to earn it i think this covers the main like goals i have let's actually sketch out what i have planned for the service it's gonna be relatively simple usually start with like the database which if anybody knows me especially for something that we're worried about scale planet scale it is which is minus ql plus it tests with infinite scale it's a very good value cool and then this will interact with our primary service which is uh well api layer this guy will be versal why is this pointing at that there we go and vercell will be hosting lambda functions for fetching and updating votes and from here i will do our uh client layer also for cell this will be plus next js i should have probably put that there for the say for self plus t or pc your pc slash next for clarity and then here is where those functions get called and this well cache page to proven oh god this i hate the way the arrows work in the sometimes cache pages to prevent total api thrash chaos cool that's the general like flow of data so a user goes to the page hits the api layer that goes to the database gets the data or turns it all through votes go the same way this is a very simple architecture i tend to build things this way yeah somebody asked like thoughts about using prisma types on the front if not using trpc i think that's a slightly better question then we might be giving him credit the reason you would do that is if you have a traditional api like rest endpoint that you know is just returning the prisma data and you want to make sure the front end has that type directly from there the problem there is if you're not using something like drpc the type that you get from prisma is going to include data that isn't uh how do i put it it's going to include data that's not part of what you'll get back from an api because it might include like a date time in it a map in it or other data types that can't be serialized in json so you'll be expecting a date time but you get back a string and that desynchronization makes me hesitate to recommend that yeah and i saw somebody ask earlier about css and js sorry i didn't get to that before yeah i used a lot of css and js systems i also use a lot of like css libraries like bootstrap and i never loved any of them i went from thing to thing not really caring too much for any one thing and somebody on my team once wanted to use tailwind i was like sure whatever we'll use it for the blog after like a week or so of using it i felt so productive and i think that's the real win with tailwind it makes you feel so much faster than any of these other tools have it's like css send mode almost and i really like it for that i don't know if it's for everybody especially if you're building like a design system i do think tailwind is powerful as the primitives you define you that you build that system on top of but i don't think it's necessary for that but if you're trying to tailwind or replace a css not design systems you can build the design system in whatever i think tailwind gives you really good primitives to do that with yeah i never cared about design solutions in the like style space before i used everything and then i fell in love with tailwind it was the first one i really liked it happened way quicker than i expected to cool shall we get started i vote yes init.tips where we always go to start copy i already have folder here stream stuff yes polls 3d polls npm install npm run dev and it doesn't include types node by default cool this is what i meant by like this template kind of sucks so let's fix it strict mode is set to false stupid but this is what i mean like it it's typescript it's supposed to be temp or like strict also incremental bad delete uh isolated modules fine fine fine this is better than it was but it's still not good strict is true in here they said they set it to false so that's just wrong okay good start somebody asked if i'm a front-end guy i'm everything and nothing i'm just all over the stack but yeah a lot of people would say i'm a friend in person they'd probably say i like css yeah it's not my favorite thing i hired a css person as like my first hire at ping if that helps at all judge where i am okay cool these are okay i'm actually gonna open the work code base because we have a couple flags in here no one checked the index this is is huge i think this is an essential flag every code base should have on theo additional opinions i should probably bring back incremental and set it false i take quick i have been a big fan of the what's it called like i've been a big fan of typescript for a while and i used to push incremental adoption as like uh one of the reasons you have no excuse to not be using typescript the incremental adoption story is imaginary i've never seen it work out really great like you can you could force it but it's not much more work than just fixing the code basis starting from scratch and typescript or doing like a weekend rewrite the incremental and like partial adoption story for typescript is not great so that's what the airpod max just go to my blog t3.gg i have it's the second post on there is a review of the aeropod max so yeah i have opinions and i'd prefer you to go find those yourself anyways so i might have to i shouldn't have okay cool i don't anyways bad so these are the first rules let's go look at type script rules yeah we'll be using next yesterday that rolls uh convey girls do like no fall through cases is no one plus that neon oh they don't have no implication i forgot about that they're like really stupid about that no implicit any true one of the worst rules they don't have on this the macs are insultingly bad compared to the airpod pros like i have two sets of the pros because they're weirdly good and the max are weirdly bad that's all i'll say type script promise config rules there's like i know hanging promises of some form trick 2 does not enable no implicit if i recall uh pages oh they don't have examples with ssr built in anymore which is probably for the better it fizz i don't want to get lost in a headphone thing yeah i'm going to ignore that just know i have an audio degree and i know what i'm talking about with headphones that's all you've used reactive javascript i never tried typescript is it better to get knowledge about typescript or just go ahead and get started on react to typescript good instinct it's better to just get started one of the problems with typescript that i find people running into is they try to learn typescript you don't there's so much crazy [ __ ] in typescript that ideally you won't spend much of any time learning it you'll use it and when things don't work as you expect you go find why so generally yeah i don't think you should think of it as learning typescript you should think of it as learning how to build things with javascript and typescript gives you the rules and like the the footing to screw up less as you do it yeah i i'm a big fan of learning typescript by cloning a typescript repo playing with things and when they break figuring out why otherwise it's really easy to like fall through oh no floating promises do you remember where we may enable this it's since it's a lint roll it goes somewhere else yeah it's ts lit but that can't be configured through ts config if i recall so i've just said if it went roll file to whatever there's something else i would want to do i'm going to see if it possibly is a thing cool so this is implicit in a fails if i delete this it's a cool nope if i delete the strict mode yep your correct strict mode does have that now so the one thing that was really sus for me was strict mode is set to false by default here cool i can't imagine true or false as a typo but uh yeah i'll put that on the list of things to complain about i'll admit it's a lot better than it was like a few weeks ago it seems like they've been hearing about my complaints yeah i'd say the big one is no one checked indexes for those who don't know what this rule is i'll do a quick demo const list of things equals say it's a trigger right i'll just manually type it cats dogs so there's an array with two things in it and we want to console console.log the uppercase of one of these so list of things 0.2 uppercase totally cool right what happens if i change this to it to it into a two and this wasn't unchecked if oh i just got 77 viewers what the hell yeah cm griffin thank you for the right man really appreciate it good to have a whole new audience i missed were you guys engineering before y'all software or just a random raid thanks for stopping by man and thanks for bringing the audience cheers good stuff always when i was working at twitch this programmer scene did not exist on here at all and it's so cool seeing like just like a year or two later after i left it's like really blowing up it's been super cool i always wanted this and it's finally happening so thank you for fighting the good fight making this happen working on a bot to help figure out who you raid i love that i'm pumped that i'm on the list i guess that bot's working good if it found me good work yeah i'm gonna build a polling app so that should be fun you've been here for four years damn damn well i definitely should have been following you thank you for stopping by man i really appreciate it anyways so the no unchecked indexes rule is really cool because it yells at you if you try and access something from an array and just assume it exists because list of things 0 might be undefined if i had like const some animals string equals that this without that rule would be typed as string because by default it assumes you know what you're doing which is a bad assumption oh the bot didn't find this oh shoot well thank you prime once again huge shout out to him for that happy that my twitter posting got me an awesome debate that was super fun yeah uh he's editing the vod now so there will be a good upload of that soon i've started posting clips on my own youtube but we'll have a lot more soon thank you again for stopping by and obviously for bringing your audience along with you i love that part yeah for those that don't know me i'm theo i worked at twitch for about half a decade i worked on the internal video infra for like the bob ross marathon power rangers mr rogers all the content moved over to vaude hopped on safety built mod view built a bunch of internal tools started working on creator for a bit eventually realized i wanted to build creator tools myself so i took off and started doing my own thing i actually started a company at the end of last year ping labs we build software for content creators to bring collaborative people and guests onto their shows live kind of like zoom for streamers if that makes sense lets you hop in a call on here copy paste them into your obs and now you can transform other people in your setup super fancy and like live compose your call experience rather than just screen capturing zoom or discord and hoping for the best so i built this for my own show i wanted to like do things like this at twitch i realized it was better to do it on my own and now i'm ceo of a y combinator company which is pretty cool so yeah if you guys are interested in using tools for content creators and seeing how crisp and how low latency you can get really proud of what we built here it is definitely the highest quality video calling app in the industry it just so happens to be built for streamers because they're the ones who need it so somebody asked what is obs it is a very very important tool it is the open broadcast suite it was built by or sorry open broadcaster software it was built by an awesome group of people that wanted to make streaming and live like video creation better it's kind of like photoshop for live video so you have layers you have scenes you can drag things around audio mixer built-in it's the program that pretty much all of us use to go live with like well over three quarter i believe as much as like 90 of the top thousand streamers are using obs or a wrapper around it so yeah it's kind of like the linux of video it's a big open source thing nobody can compete with that is essential yeah screecher sucks it's not that chrome hates us it's like chrome hates y'all like screen capture is really hard to do right tools are used to stream videos like when you have a live message sharing when or we usually use sockets we use for video good question so video depends a lot for video calls where high where latency is a really important thing and you want to be low latency to have a natural conversation webrtc tends to be the standard it's a lossier or faster standard focused on like a group of people getting in a call and having this like the quickest experience possible for video like what we do on twitch we tend to use something like rtmp which is a [Music] i think it's udp based it's a straight like send the video pipe out to another endpoint it's much slower it's heavily encoded the goal of rtmp is to like get a close to bit perfect stream from a to b that's what you use when you go live on twitch and youtube and things like that most people associate rtmp with quality and webrtc with speed but there are balances to hit like in in between there where you can make really good quality happen in webrtc and you can make okay latency happen in rtmp i don't know what links to share these are all open standards if you're looking for like the link for what i'm building ping.gg that's my company rad i wanted to write code though so let's go write some code don't need those open anymore i'm happy with the rules i have set honestly cool no one checked indexes with the big one i'll bug more people to do that anyways everything we need here to get started let's do that get status get add commit better starting point i have to actually make a github repo that's important what should we name this should we name my polling app guys what's a funny name for something for voting i things is hard let's why can't i get the view oh i had another key there we go random name generator here's what i've used before this looks so cringe perfect those are people names band name works for me these are all awful i'm on a vote we'll go with on a vote happy paste cool now we can actually get things done hopefully at least so what should i start with first trpc tailwind prisma planet scale all are necessary i'll start with tailings it's like the easiest hill and ducks they have a next.js thing in here oh i forgot about the other thing i hate about the default template new folder source there we go and now this is going to be freaking out working again then in the purge sorry now the content we want to just be source and i can delete that ellen directives styles global fill their resets kill this entirely probably make sure this is like working cool build a module don't need that guy anymore niall starts needs to die they're gonna be perfect and now class name equals text to excel font bold yep tailings working all that kill the footer two images we won't be using that much i saw a question about like making a template i my my thing with templates is they often encourage you to start with things you don't need like the amount of static sites with redux is hilarious and i would really hate to put out a template because i would see a bunch of people making their blogs with trpc which just yeah should i have something to make it a little easier to set up with like three of the five things that i always end up using perhaps my idea would be a cli that's like a checklist it's like are you doing this are you doing this are you doing this and it installs the right like parts automatically you're having trouble use learning webrtc don't learn webrtc use webrtc using somebody else's service for it mux is working on one cloudflare has one the easiest ones are going to be agora 100ms daily and twilio but rolling your own webrtc is borderline like rolling your own hardware infra at this point just use aws and with a webrtc use a webrtc provider everybody's so excited to roll their own versions of things that work well don't just use the one that does it's all working roughly how i want it to get status make sure that's all good commit style defaults closer to my preferences talking is hard and now one of the most important steps get it building so you know if it ever stops oh hi soda good to have you here kyle been a while really enjoyed your recent remix plus redux story tutorial that's a great one imagine god i should have put out a trolley tutorial for april fool's day like how to get started with wordpress that would have been so good why do you have to cope with these jokes now cool now we know this works on a photo for cell that app wasn't taken which is cool but i'm still gonna like throw this on like fodi.t3.g just so we have it on something that's mine god we're still making that work is one of like the coolest pieces of magic like i have my domain in here i come here i type in what i want and now it's live on my pl on my tld well it's not a tld what t3 gg is so short it feels like one like yeah this is the magic of herself nobody else has like they have parts of this but nobody has the whole you type three things at your terminal you link it to your github you type in the domain you want and you're here yeah og zeit was rough it's really cool that they've made it this far cool well now we have this working uh trpc next i feel like deep sea is less useful without prisma but with prisma i have to go to a bunch of other parts too trpc or prisma next somebody vote whichever someone says first we're going with prisma [ __ ] okay prism it is prisma docks started let's see if they have a next example oh this is just the instantiation whatever i remember this prisma in it cool now we don't want this getting in the build once again i'm going to check company code ah yeah i can check round dust for this too so i'll do that grandest schema i don't really need a shadow url anymore because i won't be doing migrations cool oh i'm still going to need a vote model that's convenient let's start with a question i'll just rip this ends at date time optional just have the question string for now will be a question full question good start uh cgr yes putting the reference referential integrity in prisma is not doing that in sql we're going to be using planet scale which doesn't have built-in referential integrity because it uses vitesse under the hood so the actual data layer is fully abstracted in the data store which means that it can't make guarantees about like a reference being properly like cleaned up within itself and if you make a change to the referential rules that might not be applied instantly so they choose to not enforce them at all so that you can build your own cleanup processes i was really against it initially and i still think it has some gotchas actually talk with the ceo of planetscale about this during my show but man the value and the performance you get out of planet scale and the way that they think of my sequel is so powerful that i've caved and it's worth it yeah i saw somebody else to say that they're using planet skill with their startup i yep same it's great that's the next thing we have to do anyways so let's do it oh i have a felt test db that i wasn't using for anything this is a perfect thing to kill and replace let's delete svelt test and now i have more databases you know i supposed to call this on i were somebody getting mad on my team because having dashes made the db name invalid in like my sequel syntax so i'm gonna not do that this time are there any similar services for like planet scale but for postgres no can't be done there's a lot of people who are getting close-ish but they have to reinvent postgres from scratch or from scratch because mysql has two parts it has the query layer and the data store the data store is called inodb and the mysql query layer is built on top so you can rebuild the storage layer underneath without giving up the my sequel on top over in postgres land the data store and the layer on top the sql are the same so you can't separate them anywhere near as easily as easily there is cockroach but they're reinventing postgres from scratch to try and get there supabase is not trying to do this at all superbase is trying to make it easy to set up a db not just scale one they have a pool built on top but all that helps you with is many connections and serverless land it doesn't get you to your first hundred million users i don't think there's anybody on supabase that has more than like a few million users and even they would probably be struggling performance wise it is one of the best ways to get started and i actually uh i hate to just plug my youtube for half my stream but it's funny how the questions that come up are all things i've answered really well so i have an interview i did with the ceo of planetscale sam lambin or sam lambert so if you want to hear how we think about all of these things definitely check out this interview we talk about uh super bass for like half of it so really useful all right i also noticed i don't have this in a reasonable state so i'm gonna go fix that super quick so that my thumbnail has something in it god youtube is so much worse at live in stupid ways it's so much more pleasant whatever i can keep screen sharing while i do this anyways thank you guys all for staying during the raid my viewership went up since i got raided so thank you guys for that i'm pumped you're enjoying this some amount wait is let's be able to select a thumbnail from my stream why can't i do that uh it's dumb if i go to my own youtube will it show a random clip from this no okay cool it is now that's decent enough whatever oh you work at superface no [ __ ] well cool to have floyc company in chat yeah superbase is great i do recommend it a lot i find that it's hard to recommend for me be not because it isn't the right solution but because my audience is so hell bent on scale and planet scale experience now like this is great but i do actually think planet scale is the better place to get started especially if you're like a newer developer jumping into full stack for the first time but if you want to like own everything and understand the parts and how they interrupt and have a really compelling story for an interview using prisma planet scale trpc and assembling your own off with like next off on top is super valuable but if you want to get a website working and like in a good fashion as quickly as possible nobody's been fired for picking supabase i would fire you for picking firebase anyways what is prisma really good question and that's what we're setting up now prisma is a how would i explain it it is kind of an orm which is an object resource manager for sql it basically translates between sql and typescript for us gonna try and not get too distracted with questions for a minute sorry if i miss y'all i will be keeping track of them and like going over questions and bursts but i want to get this all set up for anybody who wants to like see how the parts work so planet skills hosting our sequel uh we're going to be using uh prisma to connect to postgrad or to my sequel at planet scale and use that inside of typescript uh cool so we need to connect so i'm going to use the p scale client uh i think i need to org switch to t3 cool p scale connect we'll just use main for now that's fine pscalp connect why prisma not typo or because nobody shipped type orm that it wasn't already like shipping it for a very long time what's the tech stack i'm using in at dot tips t3 stack i-n-i-t dot tips just sharing this so i stopped getting distracted okay i am ignoring chat for the next five minutes i'll scroll through and look at all your questions in a minute so now we have to connect to the db locally we're doing that via the pscale connect command i think we can just type in vody main maybe oh it already picked main for us cool so now we're connected on main i usually ah we'll leave it on the default port so now we have to set our url and environment variable looks like we do some fancy things like this nope localhost three thousand what's the portion 33 oh six slash vody and this should just work p scale all right not p scale mpx prisma db push i has to start with my sql mysql all right so as you can't see that uh i should rethink where i put my like badges so you can see the commands i enter i'm just gonna hide them for now uh one sec studio loading these out of the way cool better gonna knock it anywhere near as many follows i'm about to break five thousand followers on twitch or on twitter so go follow me there so i could break five thousand already it's taking way too long cool at t3.gg there anyways that mp expressed my db push worked so that's npx prisma studio one of the coolest and most underrated prisma features this lets you access and play with your db directly in like this nice ui so i can make a new entry how do magnets work save it and now i have this in my db which is so convenient to be able to do that just automatically by typing in prisma studio if you have a prismaconfig it's magic it makes my life a billion times easier cool so let's just list all of the questions on the site super quick now we have all this i can hop in here i'm going to do a thing i hate which is server side props export const get server side props equals this needs to be async i also need to create a prismaclient there's a best practice recommendation for this yeah cool copy source db client dot ts const questions equals await prisma might not import from there automatically that's done import prisma from should be dot dot to go up to the next folder then db oh it's client and this is named in there cool oh wait prisma dot and this is where prisma gets magic it actually generates types based on what you put inside of the schema so it will autocomplete poll questions.find many and this will now select all the questions from db i have the type of poll question array back and then i can return props questions i'm going to json it myself because i don't trust the type it's going to return otherwise json.stringifyquestions and then on client props i'm going to props any because this isn't how i like to do things but we'll cons i'll just print it out in here code props dot questions local hosts not running npm run dev cool and here's the question straight from db catching up on chat quick people can't see that environment vari or files on server yeah those should not be accessible you know it's like very wrong if they are uh yeah secrets should not be exposed ever ever ever and you shouldn't be committing those either the way that you should access or put secrets on the server i was actually going to go do that next so i will demonstrate this live go back to versailles i'm going to close a bunch of these things i don't need them anymore already inverse all here we need a database url database url so we do not commit this file we do not even think about committing this file we put it in here so we need a url to connect in our code we were doing this via the local url which was if i go to my environment variable i can show this here because we don't have anything private but you can see this guy is localhost that's no good on the server so we actually need is a connection url that we generate from here so i would click connect and you can see this password you can't see the whole thing though actually you can hear so i'm going to have to kill and regenerate this like not showing it live but right now what i would do is copy this url paste copy this and then go inside of here and paste that i have to go regenerate this quick because you guys saw it so give me one moment for that cool let's delete that one it is deleted new copy paste add and it is no longer visible got it right this time anyways now you've seen how this worked and now if i oh i want to keep that connected actually my bad get status get add charisma added get push this actually going to possibly fail on build because i need to add a post install step so since prisma generates types it needs to do that generation one of the easiest ways is to add a post install script this runs after unpm install and now that that has been added let's don't need any of these things open anymore get status get ad hey what's this up get i'm using tmux for my terminal that's why i'm able to do all the fancy stuff with it cool come in post install for prisma get push cool now all the prisma stuff's done and that should be connecting most importantly once it deploys this is like localhost one parcel deployments that failed to push okay now it's just starting build late cool let's be ready in just a sec my cat's screaming at the door and get a lot of in quick got a boy this is miles he smells bad right now like awful actually what the hell did you get into there's nothing even here for you to get into wow oh look you're sharp too goddamn it yeah he usually hangs out on my shoulder did you just almost fall yeah he usually hangs out on my stroll or my shoulders he was complaining a lot before this so i kicked him out and he's probably going to be screaming a lot soon so be ready for that anyways looks like this deployed and it looks like i'm now getting json out also my chair mac up screwed and this will drag me insane there we go much more comfortable yeah we're getting our json back which means we get to do the fun part trpc so i never have to write a goddamn type again so for those that don't know trpc is the magic glue that lets me move as fast as i do trpc is that you write a query and then you call it and everything in between including the type definitions is handled it's it's the thing we need especially when we have tier or uh prisma giving us types out of our database this moves those all the way to the client can can you rotate passwords yes you absolutely can in here there is settings passwords and you can create and delete passwords from here that makes them invalid how in the world this trpc only have 5k stars it did not have like anywhere near this before i started talking about it i have earned so many of these for them and i'm really proud i've put drpc on so many maps i was gonna go build this myself i talked with tanner linsley about it and he said oh do you know about trpc somebody built it on top of react query i haven't had a chance to play with it yet but it sounds like what you're describing and then i went and looked at it it intimidated me initially so i ignored it for a few days tried it out after moving my blog to astro because i wanted to do more stuff and it just melted my brain it has quickly become one of the most important parts of every code base i work in that is full stack it makes back into front end and the relationship between them feels so much less cumbersome i didn't realize how much time i was wasting so one step back the core philosophy of trpc is if my front end is typescript and my backend is typescript why do i keep inventing a thing in the middle why do i have to keep making graphql or swag or all these new standards to let my typescript backend in my typescript frontend understand what they're doing trpc gives you that by having you write a function and then call it on the other side so we're going to set it up because it's really easy to do okay it's a little i was saying super annoying to set up but there are some gotchas because it's very self-rolled i like that i think it's part of the value is that like each piece is modular and can be reused and replaced i was able to take a trpc code base that was trpc next.js and rewrite it in solid js and v still using trpc writing my own trpc client for solid and it went great so the parts being modular lets you do some crazy [ __ ] i need npm install yes i know people like yarn npm is standard i'll probably move the pmpm eventually node for npm for now because it's standard try vanilla js that is an account oh man oh man that there are a few accounts that fit less here but good to have you regardless thanks for watching i love that in here they actually tell you enable strict mode and specifically strict null checks because it's the only way you actually get types out of zod consistently because it should be and it should be on anyways anyways let's uh do a sample router they put the wrong file name for this it should be in the trpc directory which is fine so quick tip on how next.js works one of the magic tricks is this api directory in pages anything you put in pages becomes a route so like a url that you can go to in api it becomes a json endpoint kind of like an express endpoint so we're going to use that to do trpc slash trpc dot ts i believe it's the name it might be double wrapped let me oh just trpc not even the dots that's trpc slash yep paste save cool so this is our back end now we have a single query hello it takes an input which is an optional text string and it returns greeting hello whatever so we're now going to do is get this ready on the front end with a trpc query layer the magic here is that this client that we're about to make that should be a file let's let me try that till slash grpc.ts what this guy is doing is it's importing the app router itself so this is importing the entire back end as a type and then using this to generate react hooks for the client where the type comes from the back end directly but wait you're importing back encode in your front end doesn't mean that's going to shift to your users nope because we're only importing the types and typescript is imaginary so what happens here is when we actually run a build all of the types for all of the back end get eradicated and wiped out so the user gets a pretty standard web app and we as developers and our editor and our ci and all of our build systems get a super strict back end front-end relationship it is magical and is a huge part of how we're able to move as fast as we do so what i can now do is on the client i still have to wrap the app i remember if i recall yeah i have to do this guy this is possibly the most annoying part i know it decently well let's just work cool it's going to grab vr or versailles url or i'll close 3000 hopefully this will do what it used to how does trpc make money it doesn't alex is very busy he has another job funny enough at another y combinator company i don't know how public that is yet sorry alex for outing that but uh yeah alex has a real job he's very busy he does most of trpc like himself starting to form a community but it's a one-man project it's it's not too much i i shouldn't say it's not too much work it's like not a graphql in the sense that there's a standard to maintain trpc is really clever glue it's really well thought out glue between like five other people's other like technologies [ __ ] it glues together typescript express to an extent next js to an extent react query to an extent altogether with uh super json in a query syntax that's relatively simple the work's going into rethinking that syntax and structure and there's a lot of cool stuff coming with trpc version 10 soon there's proposals up on the github right now if you want to read through them the big magic trick that's coming is the ability to right click go to definition on client and it brings you to the backend function which is just like mind-blowing so excited for that to all be ready cool this is done which means this should work now const data is loading equals trpc dot ready for the magic guys use query start typing a string uh no has to be an array string hello where is this coming from that hello comes from the definitions in our router so if i go back to our to your pc router here string hello if i change this to high will immediately see we're getting a type error on the client because this is expecting hello or hi and hello isn't a valid api endpoint and now that we have this all i can if is loading return div loading else returned if data dot greeting which might not exist so i'll do if is loading or no data and now we don't need the question mark because if there's no data we won't be here can delete all of this guy i'll move this in a moment but if i now go localhost 3000 they're gonna get that because i didn't rebuild this after all those changes my cat's gonna knock some things over and hopefully now nope oh i don't have the next or the react query client i'm gonna carry out my cap one second sorry anyways so what did i forget i forgot the react query client i don't think i did oh is it possible i installed two newer version i forgot query query 335 should be fine nothing here should be broken i should actually read the error cannot read properties reading client oh that's so true i don't trust this cool that's all it was i don't trust the ssr in trpc i don't use a software apps too often get cool get uh [Music] trpc working now get push cool so something you might have noticed we were doing before in here is this get server-side props guy this is returning a json string because this guy has a date time in it and it won't serialize otherwise so what i'm doing here is nasty and we don't want to do that anymore we're going to go make our first trpc endpoint we're gonna kill this i will leave that default high one and chain a new query on it we'll say get all questions and this doesn't need an input it just needs a resolve so async resolve and this needs to do something so i will just drink this part actually because that's all i need and we will return this make sure i'm actually importing prisma where i need it we need to set up some aliases in a minute and we don't need this at all anymore codes or routes are code split in trpc by default or non-trc in uh uh nexjs but uh are you suggesting that trpc actually code split what the router does based on the routes no because it doesn't have routes it has a route so right now nothing is code split it has its own consequences there working on it there's a group chat called big router gang in the trpc like discord that's us trying to find ways to make trpc scale to the size where you would need to route split but yeah good catch right now it does not do that cool so here we fetch and return this somebody asked if it sets up super json for you it doesn't but it didn't set up anything for me i copy paste a bunch of [ __ ] and i would hope that he includes it in the default setup now he might not i should make sure he does that because i was just copy pasting a lot he does not cool good catch so let's add super json so let's see what happens if i don't so we're using this i want get all questions now and data grading isn't the thing anymore data zero dot question cool that came through i should cancel log data here let's see what types are coming through yep that's a string not a date time cool so i'm gonna go add super json quick because i definitely want that all right is even included in the usage with next so right it's not included by default anymore well never was but i'm sorry that's not as as expected okay it's typed in yarn gross let's go add this to the client okay oh that's trpc client uh do i even do that in here or that just yeah no i don't do this in here at all i do this in here i here's where i do this i open up around this mod and i figure out where i did it here if i even remembered to do it here which it looks like i might not have either yeah i did not cool third time's the charm i open up my work code base stars pages api okay it's not there i don't want to stream myself going through the app folder hiding that yeah it's just part of your pc return in config transformer oh i'm in rhonda's fun i'm a [ __ ] what a super json somebody's asking super json is a transformer that will turn your uh the json that you pass or the returns you pass into your pc it converts them into a json superset that can do things json can't things like date times things like uh maps other like data types that json can't serialize super json will serialize for you cool i also have to add it to the router dot transformer super json do i have to just cool and now i have super json on both sides if i go back here and refresh the data type in here should now be an actual date time see that ta-da magic cool get status get tada nice so what did i want to do next it's a really good starting point i'm going to take the chance to like catch up on chat quick let's scroll through these uh explain super json somebody saw like tailwind i should have an easier way to do this uh i'm just gonna open up my restream chat in a tab here so i can scroll through it whenever i see it from in here settings is there a pop out of this there is not so i'm just going to open this here and scroll through this in the future it'll be way easier well i missed a lot of chat but you all seem to have taken good care of it for me thank you guys uh yeah back to the y prism and not type orm question so i'm going to stop scrolling cool let's get this working more so these are all the main parts the essentials that i wanted to have set up and it's even working like in production already let's start working on additional routes and the things that they need [Music] i'm trying to pick an order of events surrounding a little more drained than i thought i was why did chat get so quiet y'all speak up ask some questions make suggestions ui is probably a good like thing to build now all the setups done a data model could even help should we yeah let's start with the thing that lets you create questions i don't mock ui i make ui it's not that much harder for me to make than mock it's actually a lot harder to mock than it probably should be but that's that's an aside cool so let's make a route for cr home page should be for creating so many separate route for fetching based on your id probably we'll do that next for now i want to like let you create ids yes trpc is completely set up we can now actually i'll show off that a tiny bit so here we have the trpc router this is where we're defining our queries i could split this up more let's do that actually source backend router index.ts questions so first thing we're going to do is join this guy to here export the app router import oh i also have the trpc next adapter here we want that guy and we want to import the app router and now we've separated this into its own place and we can actually combine and stack routers which is one of the coolest like trpc features i'm going to just join this guy bringing this question router kill super json so we won't need it here i'm going to kill the high query i have just this one index for the types and then in here you're gonna dot merge question router and you can give it a prefix too but the prefix goes first questions and i'm going to rename this to just get all okay so i'm getting a type error here because get all questions doesn't exist oh because this is not getting the type correctly anymore this is now from the router backend router and now this is going to type error because this doesn't exist questions i need to put something i like questions taught cool questions.getall is the new endpoint reformat back end cool also perhaps any isn't needed let's kill that cool no more weird any casting because everything is type safe as it should have been all along right now we should make it possible to create a question and we start that in trpc well in this case question our new router here zod will actually need for this so we need to make a mutation in this mutation has an input well we'll name it create input z dot object zod is a validator it lets you run some code against something and confirm that it matches the silence index of that thing so in this case we have an input const new question equals oh wait prisma dot poll question dot create data and this is gonna need an actual question which we'll do empty string for now because we don't have one yet but we want question input.question cool and since we have this input validator if you don't pass a string we won't even get here because it won't let you because it will error at this point you can even write custom errors here by like uh there's a custom rule thing in here i remember i think it's just uh refinement if you add a refinement and lets you write a custom function to check if this is valid or not and or if it fails it will let you write a custom error for it so that's the error that actually comes through to the client if they don't follow the rules but we just want this to have a min length we'll say it five dot max say 600 characters here your question has to be at least five characters long and now we'll be able to drop that into db i also remembered that vercares are the strings in my sequel really short vercare mysql so we're going to give this uh prisma string mysql let's see yeah by default varchara 191 we want a much longer varicare i also want to make it like a free text uh i can't remember what i used for this prior i'm gonna once again check the work code base i had somebody else on the team figure this out for us and i thought i memorized what we ended up picking but i am wrong prisma oh it's at db dot stupid i just closed all of my code accidentally at db there we go i am so curious what happened to the db with that mpx prisma studio see if it killed the field oh no it kept the field did not expect that noise which means now if i close a bunch of these things i don't need them anymore localhost create yeah it looks fine let's go add that to the page we'll make a new component for it const question creator react.fc equals const mutate i create quest i i want to show you guys off like how cool react query is here so i'll just do it the simple way trpc dot use mutation questions that creates it's the only mutation it immediately auto completes and return input uh i'll just leave this like this honestly uh on submit equals event event dot current value i was going to console this make sure it doesn't expect it to so i'm doing this without state because i'm lazy value should actually render this name equals text to excel font bold why the hell is is this not applying is taylor not picking up on things dot slash source i am wildly confused as to why tailwood doesn't appear to be working hoping that refresh does it no what the hell text to excel font volt are these not getting applied did i break tailwind somehow oh i might not be including the css file in app tsx good call there is i have a bad type here and i have to load the global css for global.css is it styles globals yeah with an s that's dumb yeah thank you for that catch i appreciate it exhale and and other adam types extend db question length cool oh that's fixed now let's actually build the ui how to magnets work there's a text field you can barely see here that's fine for now also class the game equals p six flex flex call just make it look a little more like a ui cool testing let's see what this enter trigger the on submit no i think i actually have to use like on some or i can't use onsubmit for this yeah that would be a form for that to work do i make this like a form or do i make this the lazy way and just use react state leaning towards doing it the lazy way and using react state we're going to want to make a real form in the future so on key down if event dot key equals enter cool that guess is everything we need so from here we can mutate this is going to auto complete which is cool because it's from trpc we get the expected thing and then event dot current target dot value equals empty string and we can add options here on success i want the whole trpc client uh cons client equals trpc.use invalidate queries so what this guy does is on the success of this mutation it's going to invalidate the queries which should force it to refetch the questions does another question appear it does not that should have worked like the mutation might have failed get any hints here let's can we succeed square so you don't need brackets on mutation because it doesn't have an input the reason for the bracket is it identifies a key that shouldn't or that should be unique so that it can cache against it mutations don't need to cache because there are mutations okay that worked oh i'm only displaying the zeroth question that's why i'm a [ __ ] data dot map question there we go another test and it works it worked the whole time i'm just a [ __ ] cool anyways ah we can even go a step further where we ref this guy let's const input ref equals react dot use ref no input or f equals input ref and now uh this isn't gonna be the right type i can in here current dot value equals empty string gonna invalidate this here instead if return so this will actually invalidate and clear out the the value of the input here because i want to on load disable the input field so disabled equals is loading this will be a better user experience oh yeah none of my chat is appearing right now it might have broken uh it shouldn't have streamlined my chat on screen is using some old legacy stuff oh yeah it does it only shows the recent ones cool yeah i can make it show for longer in the future i'm lazy and busy and proud any of this works at all cool one more test cool that's way better it actually leaves the text there and keeps it in a loading state until it submits so much happier with that cool okay ready to add questions get push cool lots of progress should i say if i want to add auth or not ooh oh i don't have the environment variable set for versacell url i bet uh that will be in here now that should set by default why would that be set to localhost it should had this problem before so this absolutely should be on prod so this absolutely should be working on prod url is a default variable i have to use the next public for cell url to have access to it once again i'm checking my work code base to see what we're doing there out of curiosity so i keep like hiding the screen share but this is like some of the most important files in our code base and i don't want to accidentally do something i regret wow this is really boring actually good point about dropping the conditional just letting the browser handle it honestly i might move to that next oh yeah of course it's blocking here it's i might just drop this entirely see what happens oh no it wants a url will it be okay with empty string empty string works locally that's what we're using local string does not work so it doesn't need to be slash api so let's do trpc cool that works so that's what we'll use let's use the path and now we'll keep an eye on this deployment how are we doing with this build shouldn't take too much longer build completed and now yay it works good call alastair you've been a lifesaver this stream rod test oh thanks for saying hi whoever that was cute this doesn't auto refresh on like others pushing but if i refresh i'm sure anybody spamming questions you'll manage to break in pretty fast that was a little more tired than i expected i probably got another half hour or so in me uh trying to decide what we do next i wish i could make a poll using this but i can't yet soon so i'll go to excalidra what should we do next and say our options are off if we want it the auth would be for like the host we can also have it off through like a local cookie to make sure they're the only one who can like access it you could do the db model for questions options and votes what's my opinion on optimistic ui updates yeah good if you have a slow db and you can do them in like a minimal reliable fashion generally i prefer to build systems where you don't have to be optimistic you can just upon getting your response know that you can refetch and have the right thing i think polling is underutilized like you can you should be able to fetch again and not have too many consequences as a result okay so options are off the db model i was the other thing i was thinking yeah those are like the two big things i could be doing right now could also do like the metadata and like oh routing routing per question routes so you'd have a route you could go to to see the results and like answer the poll these are like the three things we really have to do i think we can do any one of these right now and like make progress i would say their inverse order of complexity and i'm leaning towards the bottom one just so that i don't like tire myself up too much in the last little bit of the stream but i am open for any of these if there's like a particular one people really want so yeah any thoughts anyone nothing really a lot of people would have really strong opinions okay one person wants the db model tempting yeah do db okay one person on youtube set off everybody's picking the option that i didn't want to do the options i didn't want to do yeah routing will be really quick okay i'm gonna do routing super quick and if i'm still feeling it after cool i don't want to do a new folder i want to do file question id question page uh export default question page cool return div query equals use router user orders provided by next because we're using next's routing i have id in the file name here with like the brackets which means that's a valid query that we should be able to have access to looks like our friends over at github seem to agree with copilot and now we can localhost question test cool that works question test that's not the actual question that we want so if no id return if no id i don't think this will ever get hit we do want to like query for that question though so let's actually make this in the back end instead of get all we want to get by id this has an input input z dot object id z dot string dot find first where id input input dot id and now in here const data is loading equals then start get by id that string could be string array uh i'm going to put this in a sub component just to make this easier to deal with hooks wise const questions page content equals dot fc id string type of id not equal to string oh and i could error two this oh it returns or null so if null i should do a different return here if not is loading and no data return div question not found cool and defy christmas studio again quick fix prisma studio go grab an id from here copy paste tada see that y'all now we can paste a url or a questions url here or id here and i'll open that way we can even on the home page make all of the the questions on here into links a trev equals i'll populate those momentarily actually don't even want to i would want to use the next link component so that it's a proper single page app link href equals slash question slash and now every one of these should link to that specific question magic pretty cool right well that's routing i told you guys about it wouldn't be too hard yeah i really should model the db i did all the easy parts too fast and i left the hard parts for now let's do it so first we need options and i could model options as like their own db model i could model options of json blob i could model options just like an array in here no there are no gratos on the wall i listen to good headphones exclusively so sorry how should we model this should i quick and dirty json blob it or should i do it right the json bulb would be so easy uh it would be great you know doing the json blob it's just way too much quicker jason blob is always the wrong answer mark this is why you're the cto and not the streamer i have enough people asking about the theme it's poi manders p-o-i-m-a-n-d-r-e-s they make react-free fiber react spring sustan joe tai vaultio a bunch of other really awesome reacti libraries highly recommend checking out that crew this seems really nice i was on snazzy for like eight years before moving over to this one i haven't thought about switching since options json it could be a json array is that an option no it is not because there's no arrays in my sql wrap and we will model vote oh there's no four key constraints in this either so we're gonna here's how i'll do this all question or question paul i'm gonna check roundest because i did this right ish here prismabuilder.io actually sounds interesting that's cool thank you for the recommendation i'm gonna play with this a bit new model boat yeah this is roughly what i expected the vote array is here choice i don't have to be a string i want it to be a number let's call it a name and then you pick an index and options ex prisma db push that's fine we're resetting the prod db it also means we need to have the ability to add the options so we're going to type error here because we need options let's see what happens if i just do one of these quick testing howdy melky what's good man good to have you here trpc options oh i still haven't regenerated mpx prisma and our npm install might trigger that quick kill and reset that so it knows about it okay that works again and in prisma studio it doesn't know that we made changes so i have to kill and reset prisma studio options is an empty array is valid let's go add some quick option one option two prisma's magic it's a lot of things i wanted and didn't have prior it's very nice it's made my life a lot easier increasingly tempted to actually make options its own model as well to make the relations a little easier but i really like just having vote dumped here or sorry the json blob for options even if i'm losing a lot of the type safety that i live from whatever this is gonna make my life easier for now and then in here you should actually display the options for the question uh let's give this guy out data.options dot map option turn option just put it here for now i mean it's already what i want this is gonna be mad it's options this is json value or undefined yeah just want me to dump that cool so if i as string array dot map option if option diff that's my next step cool i'm actually putting the options a little more on cool next to excel font bold call cool and now we're displaying the options the next thing to do would be to make these clickable not show you the ability to vote if you've already voted probably storing like that'll be done through like the auth thing that is next but all the pieces are in place now this is pretty far along and is very close to how i would have built this if i was like doing it for real as like part of the company or something so yeah i'm pretty proud of this for a quick like hung away or how long have i been streaming like two-ish hours not bad i'll take it start of options and db model cool i'm gonna start wrapping up i'm gonna open up to questions anything here that you guys saw that is interesting different not quite how you expected that i could dig in on a little bit before a bit more before we wrap up this is your chance ask questions someone's gotta have something for me come on y'all oh god i'm tired you're interested in prisma it's really cool so the magic with prisma when you start using it is how good the like auto complete in rules are so let's say we didn't want to fetch options we can select id true question true and what you're going to see here we're actually going to get a type error in this file because it expects options but we're not selecting that off of poll question here if i add options true now the type error goes away because it's getting options it is incredibly smart about structures and things like this like i could even vote select id true and select just the ids of votes on this poll question the nesting the syntax it the auto complete the type safety it makes my life as a full stack developer a billion times easier somebody else asked if they could see the ts config again it's all on github of course but i can show you here the main two changes for the default one are these guys i hate incremental and no unchecked index access access is a phenomenal rule everyone should use they say strict isn't true by default but it seems to be so yeah can prisma be used only with node kinda yeah prisma strength is it's typescript experience it's really built for like typescript back-ends is prismat add-on to graphql no prism and graphql are unrelated graphql is a layer between your back end and your front end prism is a way to connect to your sql database they have nothing to do with each other if you feel like graphql and sql have something to do with each other your brain's been rotted by the like doings of hasura and all these other companies that try to make graphql an automatic thing on top of your database they're all delusional and putting your data at risk stay away from them as much as you can if anybody says graphql automatic ever just just tune them out they're only there to hurt you sorry about that rant any automatic graphql stuff is bad very bad build an api graphql for apis phenomenal if you have a backend you own and multiple different clients that are built in multiple different languages graphql is one of the best ways to build the relationship between all those things but graphql is not the way to manage your database it is not built for that none of the people who are involved in the creation of graphql thought it was for databases it's not it's a query language it's the graph query language even for a full single page app you recommend next that's actually the thing i recommended for the most i wouldn't use next for a more static multi-page app experience if i could avoid it things like astro are way better for that i almost exclusively build single page apps and i exclusively built them in xjs right now it is the easiest way to do that can you use prisma without typescript in javascript sure but i don't see why you would i would just bite the bullet and use typescript it's such a nice quality of life when it's made my life as a developer significantly easier i highly recommend biting the bullet and using typescript don't learn typescript don't go read a book for two weeks to learn every detail about it you might have noticed today actually those are my favorite facts about trpc see this file this router file in trpc that is our entire back end right now with the get all get by id create seasoned javascript and seasoned typescript developers might notice something here there isn't a single line of typescript in this file there isn't a single binding to a type definition anywhere in here this entire file is javascript it generates type definitions because it calls things that are written in typescript so if i hover over here and i have a resolve you'll see i get the poll questions back from here and when i use that on client i still have those types but i didn't have to write a type to get there i didn't have to write typescript to benefit from typescript in this instance the only types in this codebase right now are this react fc doesn't even have one i had in here react fc id string here i wrote a type definition i said this function needs an id that's a string to come into it there i have one type definition do i have any others i don't think i do oh i put a type here for the use ref is that it is that all of the type definitions in this code base oh app router for with trpc so it knows the type there and then in trpc i do bind a few types with the utils to like get those through so i import this type and then i bind it here but i don't actually write any types i haven't written any type other than that one prop type in this entire code base already and i have all the parts lined i up that's all i got any other questions thoughts concerns excitement things i should think about for the next show i'll probably finish this up on wednesday i do a stream every wednesday at around 3 p.m pst i try to go live at the times throughout the week i didn't for a while because my combinator was total chaos for me but that's over where through that obviously still have to focus on running the company but we got plenty to do there and i should have enough time to stream a tiny bit more it's also valuable because like as you know we're building tools for streamers so the more we can know about the streamer experience and the more i can live this life the better the things we build are also thank you to people in chat answering all the questions that i'm missing uh quickly trpcs are a placement for like graphql or kind of rest it's a way for your backend and your front end to communicate if both of them are in typescript sequel and planet scale is what we're building on top of the uh it's what we're using for almost all of our deployments be it for ping be it for what we just built here planet skill lets us scale infinitely not think too much about it have i played with maui i'm assuming you mean mui watch the vod from last week if you want to see my thoughts on mui i don't touch it just don't use it we can do better now uh i think that's it any last thoughts questions or concerns or is it time to go find someone to raid how are we going to find someone at this hour no m.a dot is this what you mean yeah uh no i have not tried maui sorry algorithms lame anyone see somebody they know here that they want me to specifically raid i hear somebody building something in my like general wheelhouse react markdown editor she's using typescript or rating her if it's javascript she's screwed but typescript she gets it oh no it's javascript she doesn't get the raid lesson learned y'all if you stream on twitch use typescript if you want the raids great simon sure simon it is yeah i'll get to go do some leak code let's probably fast for me to do this on my computer but lazy raid make sure he knows i sent you all thanks for stopping by hop in on wednesday if you want to see us finish this code base up thanks again y'all peace good show fun as ever right away




## STREAM VOD CHAT WITH CHANCE, JOB MARKETS AND MORE - STREAM VOD 11-4-22 - 20221105
what's good y'all super excited for today's guest chance would you like to introduce yourself quick hey sure thanks for having me on Theo my name is Chance Strickland I am at chance the dev on Twitter I work for uh well I guess now I work for a company you might have heard of called Shopify and uh they recently acquired my previous company which is remix software um remix if you're not familiar is a full stack JavaScript framework for building better websites and that's the team that I worked on that's uh as far as what I actually do there uh you know before we join Shopify we were seven to nine people so pretty much we did everything when you worked for a company that's small everybody does a little bit of everything um but yeah now I'm doing a little bit of everything with a much larger team so that's where we are today fantastic stuff something that I definitely notice about you like early on and especially now with your new course which you should have plugged and I will plug for you uh chance of working on an awesome set of courses uh back end for front-end devs uh I think the website I have a chat command to trigger it I will do that in chat quick it's a front to back.dev the goal is to help front-end developers better understand and build back-end applications and think in more full stack ways and it makes a lot of sense with that mindset especially like for smaller teams where you have to iterate and but by back end Dev is busy isn't really an answer for not shipping it makes a lot of sense that you would move all the way to remix and also be educating stuff there curious how you got into full stack and what about it is so exciting for you yeah well I I think I got into it by accident because I've always been a front-end developer myself and I always tell people I'm sort of building this course for myself in the past um and building this course for where I wanted to be before I felt really competent on the back end of the stack and working on a on a framework that is we call remix the center stack framework where it brings sort of everything closer to the center and you've got front-end code and your backing code all in your routes together and it really sort of teaches you back in technology through writing a full stack app in remix with technology you already understand for the most part um so in sort of solidifying those patterns to help build remix got me really interested on the patterns themselves and why they're important and why it's important that uh front-end developers at least have a a basic level of understanding of what's going on on the other side of the stack yeah absolutely agree I have a a similar but different Journey where I start actually as a back-end Dev I was mostly doing Java stuff for Minecraft servers before getting into Ruby for my first job at Amazon and then eventually moving to Elixir funny enough at twitch and was avoiding JavaScript at almost all costs I had my team folded my choices were going to going or going to reactant typescript because we were just starting to move twitch over to reactant typescript at the time and I chose wrong I chose golang I hated it I did it for like a month or two I figured it all out but just couldn't enjoy myself my manager saw how much I was hating things I was like hey I heard that react might get more functional programming in the near future and I know you hate web dev but you should give us another shot and I did ended up falling in love going all in on front end basically since the three weeks before hooks dropped until now and funny enough it was Frameworks like remixing next and versel's platform as a whole that kind of tricked me into becoming a back-end Dev again and it's nice seeing how people who didn't necessarily have the back end history can go through that same path and skip a lot of the more annoying esoteric programming language steps that I had along the way yeah and I I that makes a ton of sense I also think it's really interesting because remix um and next to a certain degree as well I think really showcase how interconnected the two are it doesn't really make sense if you think about think about it for the two sides to be explicitly separate things in separate entities because you have to have a good working understanding of very important backing Concepts when it comes to Performance um and and database requests in order to build a solid UI to make your UI fast and pleasurable to use for your users so having that understanding and being able to speak and communicate in a way to connect those dots is really really important for building and shipping really great front-end Tech absolutely agree I have heard pushback from a lot of people that like oh those patterns are great but once your team's more than 20 people it won't scale and I'm curious what your thoughts are on that like how do you see Frameworks Like Remix and next scaling to large businesses and like large teams well one of the really cool things about being acquired by Shopify is that we're going to get to experience that firsthand really fast so um we we already have a solid number of folks who have used remix in the wild who have shipped apps to production um I I can't speak right off hand to the scale that those users are operating at um but I can tell you that we'll know very quickly what that story looks like with when we start integrating a lot of Shopify as customers which is it so the plan right now with the uh the acquisition I know we'll probably talk about all that at some point but the plan at the moment because I do think it supported this question is that we're going to actually uh support the hydrogen team rebuild hydrogen on top of remix um which I'm really excited about I think it's gonna be a very cool opportunity because they're just working with some of the biggest e-commerce Brands uh period And so yeah we're going to see that scale play out really really quickly as far as whether or not the the core patterns scale I'm not exactly sure what patterns uh would or wouldn't scale we're essentially just building on fundamental web Technologies so um I don't know I'm pretty confident that what we have is going is going to work at any scale and yeah we can dig into that a little bit further if there's some specific examples of that but I'm I'm pretty competent in what we've got I love the confidence and honestly I'm kind of leaning in the same direction what I've seen like I've worked in a lot of big code bases that have like a 40 000 line of code graphql schema that is consumed by five different applications and then like four old TV apps that we're scared to like break and those architectures I have found scale well in the sense that you can hire more people to solve more problems and eventually something will happen but I find they scale much worse in the like quality of delivery and Agility of delivery period so like the way twitch was built adding new features quickly is not impossible and fixing issues users run into is even more so because it's no longer a problem of the technology and the code it's now much more one of the like architecture of the teams in the bureaucracy and something I've seen more and more of and actually funny enough Facebook's a company is really good at this is the like separation of verticals where different teams aren't like the back end team in the front end team they're almost like many startups within the company that own their vertical slice of the overall project which allows them to move quickly in those slices the problem there was how big can a slice get how much stuff can a team reasonably do and I find that the big win from Frameworks Like Remix and next is you've significantly increased the amount one Dev can do and own and yes that's scary in the sense that if your teams are broken up back end and front end where remix fits is confusing and weird but that's a bad team architecture already and the benefit of these things is you could re-architect your company around the specific deliveries rather than the like horizontal technologies that you're building on top of yeah I never thought of it that way but I I think one thing you said just it hits it on the head is that scale is complex largely because of the bureaucracy right like it's it's rarely the technology you know technology is obviously complex but yeah that's what slows you down um I yeah I never thought of it that way but I will put that in our marketing material so I love it I I am genuinely really hyped to help out anybody moving in these directions in particular like front end Dev should be able to query their databases I think that there's a whole category of products that exist now because of how hard it was to do in the past like the concept of the jam stack the existence of Firebase I think remix is real competition isn't next it's stuff like Firebase and how it makes it much less relevant for developers who just want to add some stuff like add a back end to their front end I I don't exactly see it that way because you could totally use Firebase with remix we're not stopping you from using any of these Technologies um it we really hand that power back over to you but I do think I would say that once you use remix you're probably going to be less tempted to use those Technologies yes you don't necessarily need to reach for Firebase because you can see how easy it is to go and query your database and to set up you know a very a very simple database because a lot of the stuff that folks are building with tools like Firebase are relatively simple and the underlying tools that you would use instead of Firebase seem very scary because we don't understand them and so this is this is why I think what I'm doing at remix is actually ties in really well with what I'm doing for my course because remix I think in and of itself teaches you a little bit how to be less scared of these things and how to reach in deeper into the stack and in the end of the day when you do that it's it's really not that bad yeah it makes a lot of sense I really love how much more accessible back-ends are becoming I've always kind of been annoyed by the like database as a back end as a service by the way we added websockets approach and I feel like as you said there like once the ownership of your back end and the ability to make the back end your front end needs gets cheap enough for a developer for any developer to reasonably do that's when you start to see a level of ownership and iteration that is it possible otherwise and it's been super cool to see how that has worked one thing I do want to call out quick is that we have over 200 people watching on YouTube but only 48 likes on the YouTube or live right now so if you're watching this on YouTube and you haven't hit that like button yet why likes are free it's right there hit it sorry I did that's a that's a great YouTuber uh it's just a something you have to say right yeah like And subscribe yada yada it seems like it's not gonna work it seems like the stupidest works though it actually like I've had videos like before I was doing it a new video would get me like 100 to 200 new Subs the first video where I said that 3K Subs insane wow like 10x is the return uh I'll leave it to you that's why they all do it I suppose yeah so for some reason you're watching live and you haven't subscribed please do and also follow smash that subscribe button you're already ready see we were talking earlier about how chances to be on YouTube but you already haven't already yet man I don't have my uh my normal spunk today I'm a little sick so if I'm not like bringing the YouTube energy I'm gonna try really hard yeah but it's probably gonna sound very fake you're already you're way above and beyond already this has been a super fun shot so far I did want to go more into the hydrogen stuff because that is super exciting something that I've been like super super pumped about like a pattern I've been wanting to even like adopt myself it's also something I wanted to bring up later with Astro is the idea of like meta Frameworks as Primitives I love the idea of primitive design where I as a lunatic on my own can go build crazy things like I think a lot of why react is so successful is what both components and eventually hooks offered as Primitives we could build on top of like the power of the hook as a a thing we could build a library around or build their own architectures around was such that like everything from uh like react query to react free fiber could happen within that ecosystem and that was really exciting to me I have not seen that same level of like primitive design with something like nexjs where they kind of patched in the express.js handlers so you can throw things in the API directory but for the most part you do things next way or you opt out of next yes something I like about Astro and Now remix is how they seem much more interested in providing Primitives that I can build on top of like the idea of a loader or an action the idea of like generator functions that like let you Import and Export with different visibility patterns like scalable like API Design Within your framework I really like the idea of something like hydrogen being a rapper for remix which is a wrapper for react I'm curious if you see this trend too and how you feel about Meta Meta Frameworks as these patterns are being developed you're speaking to one of my favorite things about remix which is from an architectural standpoint how we've designed it um and I I love API designs I this I've worked on open source libraries now for a few years and like one of my favorite things about working on open source is trying to help folks in in using these libraries and like thoughtfully designing these apis in a way that really meet a broad range of needs and like that's one of the things we really tried to do with remix uh at the end of the day I like to say that remix is just a few small tools it's a request Handler and there's a compiler and that's kind of it right like we we compile your front end code and your backing code uh we can pile your server uh given a request Handler uh given a Target where you want to ship your your app to and that's kind of it really at the end of the day uh we have some magic in our compiler that handles things like loaders and actions there's a lot more stuff going on under the hood in our react adapter to handle race conditions and loading data and that sort of thing but really the tools themselves are pretty simple and you're right it provides you a great framework of Primitives that you can build anything on top of because at the end of the day we have our high level abstractions like the remix run slash serve the package which is essentially just a node server and then uh but you can ship anywhere you can write your own adapter if you want and you can ship to whatever runtime you want to um or you can write your own request Handler you can do literally whatever you want with it um because we give you the tools to do that we expose things at different levels of abstraction and I think that's really really powerful and that's exactly what we're aiming to do with the hydrogen integration we're looking to we're looking to the hydrogen team to help help us figure out how to what that ultimately looks like but I think when we do we're going to have a really solid set of patterns for building those higher level abstractions on top of remix I absolutely love that I turn my right way to put this one of the things that I was much less sure of when I first like was looking into remix like right after the open sourcing happened and the docs were out was how much I felt like I had to learn to understand what was going on but when I the thing that made me really start to like consider remix more seriously was when I joined the Discord and I saw the crazy things people were doing with it like shout out to Maple and all the crazy stuff they were doing with like yeah or with uh both like their own type safety bindings as well as stuff with electron I can't remember the name of the person but somebody built trpc bindings and when I looked at the source code for them I'm like oh they're just exporting one loader in one action and it does everything that they need for tier to build trpc on top of it that's actually super cool and I I love the idea of people using good things the worst possible way to find new patterns like that's how we got here in the first place we're all writing JavaScript on servers and I'm excited to see how we can abuse uh remix so I'd love from your take what's the weirdest and dumbest use case you've seen for remix that actually ended up working out that you were surprised by um someone built spelled support into Remix by using a resource route to compile and run spell on the fly at runtime I thought that was really really cool like when we very first built remix we had always intended on eventually getting to a place where we were going to be framework agnostic and that's still very much a goal um we obviously we have a react adapter today but we can have a view adapter tomorrow or saw adapter really those are dependent ultimately on the rubbers we have a few proof of Concepts out already out there which is really cool for all of those Frameworks I'm very excited about that future but in the early days before we had any of that it was just an idea and as soon as we put it out there in our Discord somebody took it and ran with it I can't remember who it was I think it was uh Alex Alexander maybe who created it but anyway I it was wild it was really mad science um exposed a lot of possibilities for our resource routes and yeah we use we use resource routes for all sorts of things resource routes are essentially what we next calls API routes it's just that they sit alongside any other route new route photo there's not like a dedicated space for resource or API route they're just normal routes and you can access routes you know the traditional way in a web browser or through any sort of API so you can design a whole API on top of Remix by just creating routes um and you know a route at the end of the day can return any response and that response can look like whatever you want remember we're just giving you the request handlers that's it yeah so you can build whatever you want that's why it's a great primitive way something that I actually funny enough I use Astra for this way too often and I'm looking for other Solutions because it's clear this is not something Astor really wants to be doing is a framework that has a good enough Edge deployment story on specifically for me versal because I really bought it on versel that I can use their equivalent of like the loader in action to create resources and create API routes I currently am stuck using next for it which feels very heavy when I don't even need a front end and I could see myself using remix pretty often even as like the way I quickly Define an API that runs on the edge and has maybe one dumb browser like or web UI that I can look at just to like dump a bunch of info yeah that's actually really cool I'm wondering if we could create a stack for something like that it'd be like a very minimal stack where it's just here's what you need to just build an API server and that's it 'd be kind of cool yeah I'm very into this idea and I think that there's a lot of web applications that don't need something like Nest JS or one of these like more heavy back-end Frameworks especially if the team's already like familiar with typescript the ability to easily deploy through something like that is super super powerful and I've been benefiting a ton from using both Astro and next to quickly stub up Edge routed or Edge uh deployed apis more than anything for the cost savings like getting your endpoints up on edge it's for sale charge of 65 cents per million requests that's like no effort to deploy it and get things set up like I feel like I have to do that for everything now and Frameworks that enable me to do that more effectively are super powerful absolutely yeah and we thankfully we have a versal adapter so you can pretty easily though I've complained about this a bunch it's not you're right I I don't know how much like controversy there is or was there but I know a lot of people who would be down to help with that especially now that like the versel build I forgot the name for it uh like they open sourced their way of deploying to their servers it should be a pretty doable task to add edge support to their bindings oh it totally is and we've had we've actually I've got a repo I can send you to where we we can make it work it's just on the official adapter um because it's been just shipping on cloudflare workers and we have an adapter for cloudflare workers so there's a little bit more config it's just really that we just have a specific adapter for it uh but you can totally run it I'll send you a repo link as soon as I can find it no rush at all it can be after that you know even but I totally doable now that you know since we don't have an official adapter it's sort of a YOLO kind of thing you know as changes to the edge platform happen good luck with that kind of thing but we're really of really pushing um you know we can only maintain so many adapters even though we've got all these amazing resources now from Shopify we're still a relatively small team on remix and we're focused on you know building remakes itself so uh we're really hoping that a lot of folks in the community run with uh building and providing these adapters because it's really actually fairly easily easy to build on top of it when I show you the uh the for sale edge stuff it's literally a barely a level of distraction on top of our cloudflare workers adapter so it's pretty straightforward that's Super Rad and I have a feeling with the Thousand or so people watching right now that somebody around is going to be hyped enough to take that on I I would if I had the time even but I certainly don't but the last time I said that we ended up with create T3 apps so promising history here well don't spend too much time on it because someone's already done it I just have it I don't have the link on me but I will share the link we can use your code as a source but like if somebody wants to maintain that I'm sure that there would be a lot of interest absolutely yeah before I forget just because like I'm always curious to ask have you heard of or played with create T3 app at all I have not no I don't get to play with many new toys outside of our domain anymore it's kind of sad yeah I definitely noticed that happening when I started ping and it's a big part of why I actually started making content is I wanted an opportunity to keep up with and keep playing with and engaging with this stuff especially once like covid hit and I quit my job at twitch I went from having like hundreds of Engineers I would talk with every day at the office to just like kind of living on my own and not really having much like people to relate to with this crazy Dev world and yeah since then things have been so much more I don't know it's it's hard to describe but like I felt like to an extent I was annoying people at twitch with how much I wanted to talk about all this crazy new stuff and now I have this awesome community of people who are just as excited as like we are about it and yeah that's great I'm a little jealous of that I I do get really into what I'm building and what we're building but it's it's very much a little bubble and I love stepping outside of that I like still going back to like outside of the JavaScript typescript bubble like I'm I'm still trying to like keep my eye on stuff because I used to work a lot in PHP and then built several apps with laravel and so I'm really still kind of following the progression of that project even though it's you know everyone it feels like everyone's sort of in their separate camps uh when it comes to PHP and JavaScript and I think JavaScript developers still think of PHP from like 10 years ago and it's like totally not so I still get really I still really enjoy following the progression of PHP and laravel I think that stuff's really cool yeah and we seem to be learning a lot of lessons from PHP especially recently the idea of like having your data loader in the same file as your HTML in quotes is in again and that relationship and like I remember the first time in Astro I just like const users equals await prisma.user.findmeny and having that data and immediately being able to return it underneath with like the correct types and everything in remix is the closest thing without leaving reacts paradigms behind until server components which let you actually like in the component await and then return I think that magic is a thing that PHP had down that we're still trying to get back well to a degree I people like to say that we move in circles and software but really it's more like a spiral right like we're every trip around we get a little closer to what we're trying to achieve and yes we're sort of circling back but one of the really great things about everything being not only in JavaScript but everything happening sort of in the same code base is that your fronting code is much more Dynamic immediately because you now have direct access to all of your loading States you don't have to um you don't have to write your own uh event handlers to wire up the Dom and reaction like right we're still writing reactive JavaScript you can't do that in PHP it doesn't work the same way so it's yes and no like we're we're getting back to that which is really great for a lot of reasons but we now have so much more power at our disposal by being able to um really really easily write pending UI optimistic UI and ultimately create much better user experiences I I yeah I'm really excited about what we've been able to to do with that stuff it's actually a point I'd love to dig in on Mars something like I didn't put in the notes but I think a lot about is how how far into the session does the framework get me or something like PHP gets you to initial page load and no further like once you want to have something change on that page have like a socket that connects a button that does a thing you've kind of left what PHP gives you and now you're in like client-side land where you're building your own solution I found that Astro does this very consciously but gives you a lot of ways to opt in the JavaScript when you need it I found that next kind of shrugs and says you have a react app it's on the client once the page is done loading aren't you good and then you do everything as reactive as you can or feel like remix is interesting where it's found a middle ground between something like Astro and something like next.js where it's considerate of what the client needs it thinks through things like actions and data refetching and like the way a page updates when things change but it doesn't think it through for all types of sessions more so for interactive sessions with low data throughput so like if I have like like I know like you're not just e-commerce but it really is the golden use case for something like remix where it generates the page with the correct content as quickly and minimally as possible and when a user interacts with it even if JS hasn't loaded things happen and that's magic that's so useful for so many use cases but with something like Ping I need react query not to fetch data from my server but to know which AV devices your computer has and to update those live and to handle all of the different ways things update change Etc and I'm curious how you think about application life cycles and what remix's role is in them uh to be honest with you I haven't really thought about it in those terms I am looking currently for yeah so our one of our Engineers built a chat app with remix using websockets so um I wouldn't rule out those sort of Technologies if that's what we're sort of getting on but um yeah I'm just trying to find it something I should be more clear about when I say these things is that when I say this stuff in particular it's not you can't do these things with these different Technologies it's these different Technologies don't solve the problem so you have to solve it on your end the one thing I will say about remix is from my experience using it for things that require connections like websockets uh webrtc stuff like that is generally a frustrating experience simply due to the lack of HMR that's like the one thing that causes it totally yeah and I know we'll talk about that in a little bit later for that one yeah and get this link open quick I think that's what we're gonna fight oh I am very excited for that then yeah so anyway no I just want to say like go back to your original question what I I think really I would just point back to what I said before which is we we provide you all The Primitives that you would need um to build essentially whatever you want one of the things that we learn you know keep in mind we're in version 1.x at the moment so one of the things that we get to learn from the community as folks start to use remix and start to build real production apps on it we learn what they need and what the pain points are and that's how we learn how to build the higher level abstractions that you need to make these developer experiences much more palatable so totally hear you on that if you've struggled with that sort of thing and know um we're constantly thinking about how to improve developer experience for for these sort of things HMR included that's on a roadmap um but yeah I totally hear you on that front as far as the actual application itself I don't see any limitations in what we have if that's what you're getting absolutely like once it's deployed what's this deployed it's all the same honestly like none of these Solutions really think through like 10 minutes into the session and like how data changes without user interaction in the relationship there and I don't know if it's necessarily their role to like should web sockets be a thing Frameworks consider and should meta Frameworks especially like in a serverless world are those things they should be concerned with is a hard question totally yeah and it's not even a matter of whether or not we should be concerned with it as much as where is it on the priority list because we have so much stuff we're trying to build and ship so um it's not that these kinds of concerns aren't important we are very much focused on just I would put that in the broad bucket of developer experience we're very much concerned about the developer experience and we think that we provide a really solid developer experience in a lot of ways and we know that there's room for improvement in other ways so um it's a very broad umbrella term and what that means is a little different to everyone I found but um yeah that sort of feedback is really useful for us to prioritize makes a ton of sense and I've definitely seen that go well like the issue that I think Matt originally opened that uh Colin McDowell from Zod filed the pr for to add type safety and generics to loaders was super cool and I know that wasn't something that the whole team necessarily agreed on initially but see I didn't agree on it initially I was I was anti I was like this is not something we need to maintain this is you know extra overhead right now and it's really not that big of a deal to just cast it to your loader type I was pretty like it was pretty like annoyed by it um and I'm wrong I like me a call but I was totally wrong with that it's awesome super glad that they did that and pushed us forward on that front so yeah I there are a few things I like that we in this community like more than ownership of a mistake and being incorrect about something appreciate that a ton like it's been really cool to see and this is like like the flies have been dropping for like three or four years now of like I don't really need type safety to hardcore Advocates like my favorite example of this is definitely Tanner Lindsley where he just was not into typescript like react queries first three versions were JavaScript and he slowly was convinced by the community and then realized how much faster it helped him move and now we see stuff like tan stack located or tan stack router that is a router built entirely around type safety yes now the pain is when you get to be the one who maintains the types for them what's the worst because yeah typescript for apps is a different world from typescript for libraries and when you're a general use Library like that the types get so gnarly and that's one of the reasons I was so hesitant to to bring that stuff into remix because I the first-hand experience maintaining types that I can barely understand after I write them so yeah kudos to those folks who are really interested in that sort of thing and pushes forward because I'm I'm always the first person to be to push back on that stuff just straight because it's added complexity and somebody has to deal with that complexity but in the end of the day for the folks who do use remix to build things it is important that they get it you know as best type safety as we can provide them for sure I absolutely love that all right for this like something I try to talk about a lot here because I think it's really important is how different typescript is for people facing users versus people facing developers using typescript and a lot of like the reason typescript is so great is it takes the mental like burden of all the ways things can break and it moves it off of us as the user facing Dev onto you as the open source Library maintainer whose types I'm consuming and that trade-off is one that benefits the users of your stuff absurd amounts we can move way faster and have a way better experience as a result and it seems easy enough to us as the consumers that's like oh why doesn't everybody do this the reason is because it sucks it's really hard to do that especially to do it right and like truthfully and I don't think that the maintainers get enough credit you it's like typescript is good but the work that maintainers have done to adopt typescript and to make their libraries more consumable that's the great magic piece that makes typescript is awesome and experiences totally and we you know one of the guys on our team uh pedrocatori he's a typescript wizard uh he's been in and out of the the code the typescript code base and uh he's sort of we've designated him as our typescript person when there's something the rest of us have no idea what's going on in types he goes and jumps in our types and just it we just pretend it doesn't exist because that's that's someone else's problem like to delegate that stuff away um it gets nasty in there but it's totally you're right it's totally worth it um it's only worth it for the users and developers so yeah I'm I'm really stoked about that stuff we have you know and you already mentioned Colin uh Maple Leaf like there's a lot of really great contributing mat a lot of great contributors out there who pushed us on that one too so that was a huge team effort uh and they're still pushing us so um feel free to keep going I've I have more stuff to push back on but that's fine if you can convince me on some of these things we'll we'll make it better yeah I actually think there's one of those convos that got us chatting in the first place I yep I I love the push for more full stack type safety and the the framing I used to discuss the remix stuff I actually really liked it is like the different tiers of type safety which like tier one is cast or add a generic tier two is in a given like known set of possibilities past a generic but mandate that so that it's impossible within those constraints for something to go wrong and then like the which is what I consider what remix is doing where you have to pass a loader the loader has to be from the same file it makes a lot of sense how those parts come together but then there is Type 3 which is you cannot consume this in a way that is not type safe just by consuming these apis type safety is introduced you cannot type something you cannot pass something you cannot break out of the system which is something like trpc or tan stack router sure yeah uh just minor correction you don't necessarily have to call use loader data in the same file and you can still import the type of the loader into other files is there you just want to make sure the code base that you sent at the beginning no but so so let me back up so when I say files I don't mean other routes so it's very important designation there if you have like a component that builds on top of use loader data you can you can import the type of loader from your route file and use it in that component as long as that component is rendered in the route so it's a little you know sort of you're now creating this coupling from the component to the route and that's a little you know you might not want to do that but um so technically you can and there may be ways to do that um so one one use case for just you definitely want to at least expose your loaders data your loader action data because that parent data could be available in routes um if it's a nested route situation and you're it you have voter date at the top that parent data is going to be available to its children so you might you can always access that from higher up in the route trade so if I'm like four components like if I have like a component that's super deep and nested and I have four parents all of which had loaders on them can I access with a used loader all of the data from all of those uh yeah interesting it's just a hook yeah and so like when I call use loader data that will pull all the data from all of the parent loaders or so sorry let it back up it's going to pull data from from the leaf node but the loader in the leaf node has access to the data in its parent and so it can continue to pass that down um now this is this listen to another conversation that we're we're having internally about middleware which is going to be really important I think for us moving forward uh we know we need it it's something that um we're all very keen on having but I think middleware is going to make these problems a lot easier to solve very interesting I I think these are the patterns that tend to scare me the most and funny enough like next 13 just didn't include any of these with their server component stuff like if you have a layout that fetches data you can kind of manually pass the props to a child but at that point you don't know what props are and aren't there at all you're building your own type safety story import story and like component hierarchy and it's very unclear what calls what where and what I can pass to where I think this is also one of those places where remix Falls in this Middle Ground where it doesn't have a type safety story built in here like I don't have the type of a parent route that loaded Data before mine I don't know how I don't I can't get the data just by having it there it is there but I have to convince typescript it is there myself my own way and it's possible for that contract to break just by moving a folder somewhere else of course yeah and that's that's always going to be a challenge for the degree with file system routing because you can't generate types based on you know what's in what folder you know you're going to have to have some sort of code gen step to do that so that's always going to be a challenge I would just say too um going back to what you said where this these sort of decisions are I think you said that that's a challenge for you that we you don't have that level of introspection I totally agree but I also would say like I think it's more important that we don't ship higher level abstractions before we know what the right ones are oh yes because it's much more painful to take those away later and so that's why we don't have middleware that's why we don't have better answers to some of the the trickier questions around typescript and file system loading we just haven't figured out what the right abstractions are for those yet um so that's yeah that's where these kinds of conversations I think are really useful for us very interesting I hadn't thought of it that way before like what is the relationship with type Safety First and the discovery of the new better patterns to do things like one of the things remix has done that's so valuable is prove out the value in data loaders being so close to your components in a simple logical way that whether or not like if anybody doesn't want to give remix the credit for popularizing that in the modern time I will personally fight over it it's very important to the amount that's been normalized by y'all and thanks I don't know if that would have been doable if type safety was like a top of Mind Focus day one the amount you'd be able to do and iterate and discover would just inherently be less but what I'm seeing now is totally agree like I think it took a decade of graphql for trpc to exist totally agree the uh yeah the ability to I think this is why JavaScript is underrated it yes it's Dynamic it's very YOLO and there's a lot of book guns and but that gives you so much room to explore constraints take away that exploration right and typescript gives us nothing but constraints now constraints are also great but in that Discovery phase I think you're totally right it's really nice to be able I used to be a designer so I come at this in the same when I'm thinking about Design Systems versus you know just brainstorming and coming up with really interesting ideas like you can't you can't give me something like figma and tell me that I have to come up with the most creative uh you know raw logo Concepts like I'm not going to do that in figma I'm going to do that with a pad and paper because there's no constraints right it yeah it's exactly the same thing when we're designing apis and we're thinking about what these abstractions look like having the the freedom and flexibility of of a no-type safety land to just go wild in I think is really really crucial to the design process and we're going to get there like and we did get there for we got a long way with pipe safety but we didn't start there you're totally right we started from the perspective of like of building this framework with user experience number one developer experience number two but yeah the the this all came from exploration and trying to understand and learn from our mistakes and from uh what other folks have built before us and building on the shoulders of giants for sure and I absolutely love being able to cheat off of y'all's homework please do yeah thanks it's open source for a reason yeah it's awesome and there's so much to learn from it I've benefited a ton from reading through the source and all the cool things in there I I will say that like as for the who does type safety help move faster a lot of that I would argue depends on like what level you're innovating at the first person to really convince me on this point was Ryan carniada the creator of solid.js because he he's not a big typescript fan actually I think I have a diagram I can find pretty quick uh it was the first one I think this is all funny talking about who's not typescript fans because Ryan and Michael were so resistant to typescript as well when I first started working with them um I was actually I'm not going to take all the credit but when I was working on reach UI I was the one that pushed them to convert that type that to typescript so um I don't know that that was that I am taking back all the credit for them being typescript converts but I started a little bit there I have this classic from a while back uh Ryan tweeted uh because I had a tweet that's uh fairly of anyone who doesn't find a productivity went out of TS is not using it correctly honestly yada yada this should have been more considerate of Library maintainers I made that mistake but uh Ryan's responsive I pretty much I'm pretty much the person you're describing I'm told it will click but four years in it still hasn't alternative explanation foreign he's just yeah he's just two levels ahead of you more than two levels I think that's at least like I I'd call this like a six out of ten so one two at least three it's a great choice I love that yeah this was the first diagram I like put on Twitter and it doesn't have anywhere near enough support so if y'all want to meet you know why you haven't told any of your followers to like it if you told them to like it they would totally do it because yeah that's why I'm saying right there so they can bring it back because it's one of my best charts people forget and I this is a fun thing I read into I suck at coding people don't seem to understand that a lot of like my decision making and planning is because I am bad at coding what keeps me from [ __ ] things up and what allows me to move as fast as possible and that's how like the T3 stack started these are the technologies that get in my way the least and support me in my chaos the most and typescript is one of those for me so if like wrong button there we are so like if I'm building for users directly with something like Ping or even if I'm doing something like Advent of code which is a live programming challenge to get an answer out of a pile of numbers as fast as possible I've actually found typescript to make me faster at all of those scenarios specifically because what typescript enables for me is the ability to take that part of my brain that's constantly second guessing [ __ ] and apply that to other stuff there's an upfront debt that you have to like you have to pay The Upfront debt right like you you have to write all the types you have to make sure that everything is type safe right out of the gate but once you do that you're gonna fly through it right not you don't always have to define those types though and that no that's yes you're right this is the thing that's changing is type safety is no longer writing type definitions type safety is often inferring them from other stuff like Prisma is one of the best examples of typescript I love prismus typescript support it's amazing yeah I wish you could do it without code gen I think the magic of trpc is it's very similar but without the code gen stuff we're just by defining the functions I now have everything I need it's you create a trpc router that has all of your functions on it and you call trpc Dot use Query and from there it's able to infer the type off of the trpc object that has all of the things in it there's no type to Define you just return things and then the client has them in the right shape that type of like agility I have found only in typescript and yes this does not exist for Library Builders and that sucks really hard like if you're building a library your type type script means you write types and then you build your library if you're a user are facing developer then right now typescript means you make less mistakes as you prototype your application yeah no it makes sense the it does make it a lot trickier with our model and we've we've already discussed this in length where our model is you're going to have your a lot of your client code and your server code is going to be in the same place your router is is or your routing rather is sort of coupled to the file system we don't we don't completely tell you that you don't have to use file system routing but to some degree you do because all of your about files you're gonna you can Define it in a config but they're going to still have to point to separate files and so your component in your loader in action are all coupled um it's a little trickier but and I I really don't think we could ever do it without a Cogen step Unless typescript somehow one day releases support for file system introspection solve so many of my complaints I I know that you saw Ryan's tweet yesterday too that he's upset he can't make a whole remix app in one file and I very much relate to that I'm a big fan of break the files up when you have problems with how much is in your files not because the framework told you to put things in certain places yeah I'm on the same page with that one yeah I don't even like single uh or sfcs like single file components that like view svelte and a lot of other Frameworks like to use even the new react server components feels a lot like they are leaning into that direction and it hurts like they use client thing on top okay now this file has a purpose that is different from other files this this is a relationship that's defined through magic exports not through like configuration sure yeah I do think it's important to keep in mind especially with react server components like they're very they're still experimental right like these aren't stable yet so I feel like every new release of react server components gets just a little closer to where we need to be I mean if you look at what we have today versus the initial proposal it's it's completely different right like the hydrogen team originally shipped on extremely beta version of this stuff um and they had to back out of it because it was you know there's just a lot of problems and a lot of the changes they made were in response to the feedback from the hydrogen team so I'm really hopeful that about react server components I'm hopeful that some of the less comfortable aspects of them um are improved I would definitely put the use server use client directives at the top of that list but um yeah it's a I guess a different conversation I I don't want to go too deep attack so I want to make sure we look over some code before you have to run but I will quickly say like as a a meaningful endorsement if I had to ship the most performant react app to my users as fast as possible with good data loading patterns I wouldn't bet on react server components Right Now remix is a much safer bet and that's why I think the acquisition from Shopify makes so much sense because that's their goal that's why they built hydrogen they didn't want to wait on the best experience for their users and for Shopify developers building for Shopify uh Sellers and customers and remix is the most stable path there right now yeah and that was really what it was all about is where we where are we today what do we need today and what they had wasn't going to fly for today like it doesn't mean that we haven't shut the door to react server components and I think there's still a lot of benefit there uh especially around hydration especially like there's a lot of value in shipping less code to the client not having to hydrate the entire Dom tree um I think there's still horrible data on there yeah it would be amazing if we could support that stuff but triple data for now yeah well really really hopeful that we can get there um we're you know very much in we have conversations with the react team I I don't personally have I wish I had more conversations with the team they seem like interesting people but um I know Ryan and Michael uh have lots of conversations with them and uh the hydrogen team obviously who we're working very closely with now it spent a lot of time on radioactive components with the team so really hopeful for that feedback to work its way into um something that we can realistically use in remix we might not ultimately use the same data loading patterns because we're just fundamentally different in a lot of ways but if they can break it apart in a way that we where we can still benefit from them I think that would be awesome I absolutely love this so much I don't want to keep you too far past time are you down to go over this code a little bit and then I can go explore after when you head off uh sure you can do that I'm not sure how much value to provide but we'll uh because I was just tinkering around with an idea that you started off on Twitter that's even more exciting than less let's take a look uh I will hit the screen button can you see my screen okay yeah and so just this is a background of what we're looking at here this is a fresh remix app that I created that has a very simple uh sqlite database uh with just a couple of models of a very little bit of data most that's not really that important but if you if you run the dev server on here you'll just get a very basic uh welcome message welcome to remix that I was going to make it pretty and add some Styles but you know no worries but what you would ask me about uh we talked a lot about site safety already and uh you know the way that you get type inference from a loader or an action is by when you call use loader data or use action data um and I'm sorry for anyone who hasn't used remix before this is going to be meaningless to you but um essentially your loaders and your actions are responsible for handling the get requests or the post requests from that specific route and so when you call use loader data in your route or use action data you are essentially requesting the data from that from that loader that action um we also have this thing called use fetcher which is what you would use if you are trying to get data or fetch some data from another route somewhere else in your hierarchy without navigating to that route um so in this particular route that you're looking at this is just a generic this is just a route that we've created to fetch data about a specific user given a user ID right and what you had asked me about I thought was really interesting is is there a way where we could make use fetcher have it infer types from the the information that you pass to it and unfortunately it doesn't really make a lot of sense because use fetcher is is a very generic hook it's you can do anything with use fetcher when you call use fetcher you're not siled to only fetching data from one route you can use the same fetcher to fetch data from any route it's got its own methods it's got fetcher.load uh you can create a fetcher.form which is a form component that you can pass an action to so each of those forms can have a different action so I thought about this and I thought well how could we build like a higher level hook on top of use fetcher that is it gives you the type inference that you're looking for um and so yeah I started scaffolding out this uh this function at the bottom of the file called use user fetcher I think yeah use user fetcher and we're just going to construct a brand new fetcher from scratch let's see if I can guess oh look at that wow okay uh that's not exact nope that's wrong that's not right um yeah that's not right at all um so sorry copilot you're you're wrong no no no back up back up you're you're too far okay yeah so we're building a we're not just we're not just spitting uh use Fetchers because we we want actual type safety right yes there's this is a big thing that I want to like I'm gonna preach about people who talk about type safety oftentimes forget that some things aren't typesafe because they're not typesafe right like we have to validate types in order for it to be actually safe we need to validate so if you just return use fetcher and cast it or pass the generic that's not going to do anything that's not making your thing any safer that's tricking you into believing that it's safer but and then it gives you fancy autocomplete but there's no safety there so we have to actually construct a whole new thing here um so what we would do here is return so first of all call use fetcher and assign it to a variable and what you're going to turn instead is a memoized object so just return react.use memo and we're just going to essentially and we're not going to construct the whole thing because there's a lot more to fetcher than this but I do want to just showcase a few things so um what we're going to return from use memo is an object and we'll we'll throw a few um we'll just start with a couple things we'll start with a couple properties one is data you need to know your data so assigned to data fetcher.data you get memo to come in and for it yeah sorry update your imports from react yeah this is my Auto Imports aren't oh that's up there now what the hell okay why is this well you're not uh passing a a arrest yeah yeah there we go and then response in here yeah yeah so you call it response that's fine um so yeah you don't need it's actually not a response it's a fetcher object so this is um yeah call it fetcher um it's fine and so when you return from use memo you're not returning to fetch you're going to return uh we're basically reconstructing our fetcher yeah you want to return a key called Data data and that and then on that just fetch your data we're not going to spread in everything because we've got data.data yeah this autocomplete is not very smart yeah sometimes uh copilot gets in the way more than it helps yeah um and then go call uh create a new key called load uh oh in here yep and then this is gonna be a method that calls fetcher.load and here's where we're going to pass in the actual string we're interested in um so in here um yep call so it's gonna be a method and then basically what you have right now is copilot's got this one right go ahead and finally helpful and and so use fetcher uh is going to sorry use user effectors it takes a user ID which is a string it's only going to be able to load data from this specific route so now we have ensured that when we call fetcher.load we're getting it from this specific route right this is where like the type safety is now it's actually type safe because we're only ever going to be able to do that um from this specific route uh so now when you called use fetcher the only thing you need to change here is you need to pass in the generic type of loader here so uh you would you think I should put that here no no when you call use fetcher up above ah yes that's yep yep that makes sense and type a passive type of loader loader nice yep so now if you just hover over the fetcher.loads the user ID yep forever feature download and you should see it should infer your types for you uh that does not but this should oh sorry you're right load doesn't actually give you any types the load is it's just oh if I even hover over this it should be data serialized object undefined uh to optional user or undefined that looks correct to me yeah yep the I like that you're specifically binding load to always call from this my one concern would be what happens if this gets renamed to uh customers totally you'd have to change you would have to update that and that's it goes back to speak to the fact that we've got limitations of the file system routing and you're yeah you're always going to need either some sort of code gen step or to manually update those to some degree but it is at least easier to do if you've got it right there in the same route file that you're working in yeah this makes a ton of sense and as a pattern to have a like a hook I can now import other places this makes a ton of sense it's Vaguely Familiar to uh next fetch I think I mentioned this to you before but uh the pattern here and I think this is super cool is you create files with the swr.ts ending and by doing this it knows to when you create this hook to at compile time you oink this out and make it an end point and to insert either SWR or react query on the client side to actually do the data fetching you give it a validator for the input the async for the return this isn't following web standards the same way this is where we have like proper invariant behaviors we're throwing Json which follows like proper web request response standards but what it does get for us is a very simple API for writing a backend function in one place and calling it in many I like that a lot um and all this goes to show like we haven't completed our fetcher implementation but that's totally fine because this is enough to basically load some data from that route um but you could basically reconstruct the entire fetcher if you want using the same exact path that we're going down and you know making sure you update all of the um the properties on the original fetcher um but all this is just to say that going back to what you said initially we're providing you Primitives to build these yourself if you want to and when we understand all of the the edges I think it's going to be a lot easier for us to build the higher level abstractions internally in a remix so that you don't have to build these sort of attractions um but in the meantime we're not I think I think the low levelness of our API does enable these sort of patterns and I would encourage you to play with it I actually really like that framing specifically because like this is built on top of like four other things and then a compiler where this feels like the base pieces are less other people's work more web standards that I can continue building on top of it is very interesting in the abstraction represents yeah there's nothing more frustrating than not being able to debug something because it's six levels of indirection deep I yeah yeah I've spent way more time in patch package than any CEO should this has been super cool I love that you put this together for us I learned a ton from going through this I appreciated a ton anything we didn't talk about or otherwise want to mention before I send you off I thank you again so much for coming out especially like knowing that you're not feeling great yeah no noise um well we we didn't talk much about HMR the compiler and I know you're looking forward to that so if you've got a few if you're gonna stay on a few minutes I can give you a few more minutes yeah I mean that's super super down uh yeah for me and like the types of stuff I am building being much longer lived sessions where like like what I'm diving on PING to get into the call in ideal scenarios takes two seconds to Enid your AV devices to connect to our webrtc provider to connect to our websocket providers to activate those devices and confirm that they are in a correct State and then join the call if I was to not have HMR and do a full forced refresh there and it runs those or the next set of like page Primitives like it fetches my AV devices before the cleanup has finished before then I end up in chaotic States every time I save a file on my computer and that's very rough for experiences with like where and I think this is where like remixes strengths don't benefit a lot like the time to get to the thing that you load my pages for is two seconds like not because our servers are slow but because the things we depend on on the client are slow and as such the the wins That Remix provides our users aren't that big here and the DX hit it provides for my team makes it impossible to iterate on sure yeah no I I get that and um you're not certainly not the first to ask about HMR um I'd say that like to me so I think of HMR the same way I think about use effect um 95 of the time use effect is very easy and then five percent of the time it's impossible right um 95 of the time you probably don't even need HMR for what you're building and then five percent of the time without it you're it's impossible to build what you're Building without being your head against the table right um I we we know this it for really it just comes down to the fact that we were a nine-person team and priorities were uh and resources didn't align on that uh to get it out when we wanted to get it out we had an early version of HMR in the works and it just it was too buggy HMR in the server man it's hard um it's it's a much different animal and yeah I know if you remember early versions of Nets were painful with like the HMR early version so in the early versions yeah it still has a ton of bugs when you're doing HMR I I definitely no I do times on stream all the hilarious States you can get next into by just like changing a variable in a file a hundred percent and it and this is not a dig at the next team either it's a really hard problem to solve absolutely um and when I say early versions I mean they've actually gotten better despite the fact that there's still a lot of bugs that they haven't overcome so um it's not that we've punted on it or we overlooked it it's very much on a road map and it's something we've actively worked on already we just haven't had the right answer for it yet and it shipping a really bad experience an HMR experience and claiming we've solved HMR I think is worse than just saying we don't have HMR right now um so that's that's sort of where we are in that and It ultimately comes down to our decision to roll our own compiler um because when you do that you don't get the benefit of of uh someone else's solution already right so I even had in the notes like why not Veet and I'm curious if that fits in here enough to quickly rant on yeah totally um simply because I don't think it existed when we initially should remix like I think we I wasn't able with the company at that time but Ryan and Michael started working on this thing basically right when the pandemic hit I don't remember exactly when V launched um but it was pretty close to that time if not a little after remix initial version so that's sort of the main reason you can't ship on something it doesn't exist um they initially built it with a roll-up compiler and it took like 40 seconds to rebuild an app with like 2000 routes and they said that's not acceptable so um that's they started looking at es build and it's hilarious they use both of the core Technologies for Veet like that's how V works is it's roll-up in production and Es build and Dev yeah well but wait even when V did initially launch they didn't support SSR and we need as well we're a server-side framework and even today the SSR I'm pretty sure vits SSR support I think they give you a VTE server I'm not mistaken so you you're sort of bound to their server whereas that goes against what we're building and shipping and remix you're in control of your server as the developer um I have seen people Veet is very similar to remix in the like super primitive approach that they have I've actually argued that in a lot of ways Astro is complete they're competing with Veet because like Astros server has offered me more flexibility even though they're built on top of Veet and they use a bunch of like Veet stuff to actually run it I don't know how much their Dev server and their like production server is actually built on top of vits like built-in uh server and SSR uh Maple who's now working on on Aster just said not gonna lie Astro is pretty much but better which is a lot of like how I've enjoyed using it and how it feels to me and I think like remixes now to an extent stuck fighting a lot of the same battles that the rest of us get to cheat off of veet's homework for things like HCR yeah that's totally fair and I'm I think another important thing to call out here uh is that we also don't really want to support everything that every compiler supports one of the main motivations of building remix is that we think that a lot of the things that we're being a lot of the tools that we had were just moving Us in the wrong direction um things like runtime CSS and JS um in the enormous perfects you take from from that sort of thing injecting giant strings of CSS into the head of your document rather than cachable style sheets like these things are are things that we thought were actively bad for user experiences and we wanted to sort of roll back a little bit so when people look at the things that we don't support a lot of those are intentional some of those we still want to support they're just we haven't gotten there yet for the same reasons we haven't got to HMR um but there are some things that we don't want to support and a lot of these bundlers that support these things out of the box we're sort of actively pushing back against that but there's you know several reasons why we didn't go with Veet I think again it's just like it didn't exist and when it did um it was very very much A Primitive version of what it is today we've looked at it um and to be completely Frank I don't know enough about the V internals to know for sure whether or not it's a realistic uh thing we could use today uh but maybe maybe it is um we're constantly working with our compiler so if there's stuff we can learn from that or if we could just lean on what they've done I you know open to looking into it yeah it was meter my bad yeah that is a fantastic answer and I think that just the history of all these things it makes sense that remix wouldn't be on beat but I do think that exploring it meaningfully is worth it Astra was able to move off of snowpack defeat and now it's like entirely based around it I think it's one of those things similar to typescript where once you've adopted it's like oh this I thought this would slow us down and it did for a bit but holy [ __ ] we can move way faster now yeah I think another big thing to note here is that our compiler is like a lot of people get frustrated because we sort of closed off our compiler for extensions um that's another one of those things where um it's not that we don't want to let people extend the compiler it's that if we give them an API that we're not sure about and we have to take it away later that's gonna really suck uh and right now the compiler is still just in implementation detail so it gives us the freedom to explore other compilers like that if we would have given folks es build plug-in access and remix config then we're stuck with the S build right like we can't explore these other options so I'm actually really really happy that we didn't or at least have it yet um allowed folks to go and dig into the compiler so I yeah really I think the compiler is going to shoot straight up in the next few major versions you'll be the first to know when we get HMR support don't worry that's super exciting I will say generally I like that mindset a lot and I think it's something that there used to be more of especially having a talk with some people uh at versel not too long ago where there's this it feels like there's this need for a very stable web framework something that like comes out does things very simple obvious way and then just they don't change the API any further it seems like remix is very committed to not making breaking API changes and to ship things right the first time the only place I would push back on this in is the HMR stuff I think it's worthwhile to have HMR for components that don't have loaders in them as a method for me to not have to reconnect my entire virtual Dom tree from the top from root node down at the very least is a config I can flip on in the interim as things are figured out because there are customers who cannot responsibly adopt remix without the 50 to 70 weight of the way their solution and you can add that be very clear this is not what we want this to be this is for the people who need it right now and get back to work on the better version or just wait until you need it more but as much as not shipping the right version hurts in the sense that it's telling people we solved this when we didn't if you communicate what it is which is the single page app side of things needs this for a lot of use cases so we're giving you that there we will solve this for the whole app in the future if you can take everything you just said wrap it up in a nice little bow go to GitHub discussions I will make sure that we we consider that because I haven't considered it from that uh from sort of a limited perspective like that but uh yeah I think that it'll be a good start we'll see um but yeah I would be really interested if you wanted to start a discussion on that on actually like seeing that through and seeing where it is on the roadmap I know that Ryan's getting ready to release a public roadmap for v2 um I don't know if HMR is going to be a 2.0 thing but I'm pretty sure it'll definitely be pre-3.0 um so yeah uh I think a discussion would be a great place for that sort of thing absolutely love that I think that's all I got any last things you want to cover or shout outs before we wrap up uh follow me at chance the dev on Twitter uh go sign up for my course if you're a front end developer interested in learning back in technology front to back.death uh there'll be we've already got some email content for that rolling out I'll be doing the YouTube thing myself here in the next few months um rolling out Workshops the following months as well so yeah a lot of stuff coming on the front to back.dev stuff so go sign up for that and yeah I think that's it I really appreciate you having me today this is awesome yeah this is absolutely awesome thank you so much man I'm pumped to like be chatting with the remix guys more in general it seemed like just from me announcing this Kent was now interested too so this is far from the last remix convo we'll be having here thank you again super appreciate it man this is great thanks I'm going to head to the BRB on here we can chat for a little bit but I'll be back in like two to four minutes guys gonna go take a quick smoke and refill my water break see you in a minute we good I think we're good sup nerds time for the fun half what'd you guys think of that I thought that was super cool I am so pumped that like the remix team is down to have these types of convos that was so different from where things were even like six months ago I like I am genuinely super pumped and yeah that was cool what do you guys think good convo thinking more about remix great talk and to the comment on when uh Kent was here before he was in chat and I don't take well to back seating when I am running into problems with code stuff it's one of the main reasons I don't code on stream anymore well at least not much I need to thank a bunch of people for subs and things that I missed when I was interviewing I missed a ton jeez foreign oh T3 not GG x with the Tier 1 resub a wave with the two-month sub appreciate you a bunch the flame not Scott great name tier two three months tier two is pretty rare good [ __ ] appreciate you locked and coded with 10 gifts nothing's changed appreciate you a ton man I hope all's been well Jay Hingle with the prime sub and then immediately following up with a gift [ __ ] yeah doubling down appreciate that got friends with the prime uh somebody mentioned that yeah there was like one hiccup during the interview I have the recording should be good on my end hopefully but yeah guys you don't want my skincare routine my Skin's been such a mess lately and it's like engineered around the chaos that I deal with I misted gifs I want to finish all of these or I'm not going to though uh vedium with the prime so appreciate you Chris with the tier 3 resub you've been around the tier three for a while now thank you man tiraj with the tier three resub Dole with the 10 gifts and then glassy with the resub you're 11 months in damn almost at a year that's nuts all been around forever foreign good [ __ ] oh renewing the gift sub from Cooper look at that Cooper you're here bringing people in to be full-time payees love that thank you step bro and thank you Joker and locked and coded both for the gifts appreciate that a ton obviously our boy angular is the best is still number one thoughts on him selling courses I I like his angle I am not fond of courses that are focused on new developers specifically people who don't have money from a Dev job if you're already a front-end developer and you want to expand your skills further if you're already collecting a Dev salary and you want to be able to expand what you're doing I like that as a person you sell to specifically and I've said this before I I don't like courses because I feel like they often charge the wrong person this is an example of a course that to me is charging people that makes way more sense to charge I need to update the title and stuff uh I can do that through this set title JS I guess oh no fossa bot yeah Kent's Kent's really good about this too to be clear Kent not only does he like expect employers to pay he makes most of his money doing like Retreats and boot camps and things with companies and also open source is the majority of his Learning Materials so you can access them for free the majority of the time I'm pretty sure epic react the get like the source code is just up on GitHub so hugely fond of those being things employers are covering and like money isn't coming from the pocket of a new Dev who hasn't made a Dev salary yet the thing that I personally really hate and to see way too much of is charging people who don't have Dev money Dev salaries or employers who are willing to pay spending money out of pocket yeah not only does Epic not only does Epic react do like parody depending on like where people are at like salary wise and region wise I'm pretty sure he'd give it to you for free if you're actually in a position of need it's a very different thing from a lot of the courses and like boot camps and things that I normally complain about that are like we'll get you a hundred thousand dollars a year job in three months if you just pay us 20K no that's not how that works I don't know any of that works we have another 20 gifts from Joker you really just want to be number one damn appreciate that a ton like you've never gifted before and you just gifted 30 in a day Legend appreciate you a shitload man if you have any topics or things you want me to cover let me know and I'll try and get those bumped up earlier in the list what headphones are using during the interview so I'm stuck on my vocal erupts I actually don't like these very much but they sound okay they're comfortable enough and they don't leak sound because they're closed but all the headphones I like to wear are open back so I don't like to wear them on stream because the mic will pick them up in my in-ears that I like to wear broke so I need to buy new veneers speaking of which all these gift Subs are very helpful because I could buy headphones I actually like how I look in so uh new headphones hopefully coming soon that are good for in-ear stuff also dull Joker with another five forcing him to number one on the list appreciate that a ton thank you so much man those are going to definitely go towards better headphones to Prime steal my Phillips no he borrowed them the thing about the Phillips is they leak a lot of sound because they're open as [ __ ] [ __ ] and I like turning up my volume really loud when I'm self-monitoring and the echo gets picked up in the mic sometimes if I wasn't turning myself up so much I would be able to use them but I like blasting things I have been tempted to do the airpods on the stream PC the problem is my interface doesn't do Bluetooth out particularly great certainly not for this use case and I don't want Bluetooth latency when I'm monitoring myself what app would I build with remix e-commerce stuff makes a ton of sense so like if I was making a store and I wanted like it to be very consistent and accurate with like how expensive or like how many of an item is left in stock with a good flow that still uses react I think remix is a really good solution for those use cases which is a big part of why the acquisition for uh what's it called uh the Shopify exercise makes so much sense yeah the Sennheiser drop headsets are weirdly good drops ability to like go to a like a good manufacturer and make them make the thing that the headphone or audio Community really needs is so cool I love them for that yeah rolling back to Windows 10 is like the best thing I've done for myself and my mental health in so long also before I forget I'm doing something different with the stream output today does anybody notice what's different with the video today first off let me know in chat if you notice what's different nobody's noticing can look sharper there's a reason for that there's something I'm doing slightly different no wow the fact that nobody notices says so much about what I was worried about for no reason literally not one person has gotten it how the [ __ ] is not one person gotten it are you for real I'm not [ __ ] up and like doing this differently than I think I am right no I'm doing this exactly how I think I am wow oh someone got it someone got it this is a 30 FPS stream now I stopped streaming at 60fps because we don't need [ __ ] 60fps for a twitch stream that is mostly a showing code screenshots we have been a 60 FPS stream since I started on Twitch and we are now a 30 FPS stream and one person asked frame rate question mark no one noticed I was able to knock my bitrate down by like 20 percent and because of that I'm able to have less issues but also I only lowered it 20 even though I lowered the frame rate by 50 so everything looks sharper too so when you go watch from phone I do love knowing that especially for the twitch uh people yeah I I think that the quality I'm getting out looks way better as a result of this it also will help with encoding and decoding and editing on our devices and makes the video look better I'm actually I think I'm going to prefer this overall it's gonna be weird moving to 30 on the YouTube but uh yeah I think it's time that we move to the 30 FPS world 30 versus 29.97 that's the thing I I try to not think about too much because it hurts me that it matters yeah av-1 is in all the major gpus so that means in like five years we'll finally be able to use it Maple I feel you about the soul pain I I wish I could justify continuing to do 60fps but the amount like that this saves my hard drive my video quality my bandwidth people's ability to watch the stream without compromising meaningfully to the point where almost nobody noticed like I feel like I have to do this and I hate it I hate it so much I want to be I want to do 120 FPS stream so nothing will ever handle that so here we are and I I just would be realistic like my setup was originally set up for game streams and I kind of kept it as was I'm not a video game streamer as much as I want to play Pokemon here and I'm going to play Pokemon on here I know av1 is much more interesting and I'm very excited for it to be a viable path but nothing handles it for our TMP yet decoding still is very expensive and we're a long ways away from when av1 is going to be realistic for production uses I could see myself using it locally for a recording method to save storage but nothing edits it particularly well either feels like my mouth lags behind the audio that might be the latency on my camera being slightly faster I should actually take the time to sit there and test that and get it just right but honestly my setup's been so chaotic lately that the the core piece is working is enough for me to worry about the rest in post a bit of lag okay I yeah my lag's way less bad than most streamers nice it's only slightly noticeable you know what I'm Gonna Knock myself back 20 Ms to see if that does it mic audio Okay so 16 Ms so I'll do two frames that would be 64. let's do a sync test how's the sink ready guys what was that audio too early too late or look about right is the audio coming late the audio is coming late late cool we'll try again how we looking spot on do you know what's funny wow everybody's seeing something different which means it's perfect y'all have [ __ ] setups what do you mean changed nothing I just knocked it to so to be fair I changed it by two frames right now it's on zero so we're saying early some are saying late some are saying perfect which means that it is perfect cool we're fine yeah the human brain is a wonderful chaotic thing yeah I'll just record this and play with it later it's not too hard for me to test on my end I just can't do that while I'm live no video no lag that's a good way of thinking too appreciate that I can't imagine low latency screwing with the AV sink particularly bad angular is the best taking his number one spot I see you heard someone was competing with you I appreciate the 10 gifts man really means a ton thank you so much uh y'all are the best I need to set some more sub goals because like y'all are subbing and I don't feel like I'm doing enough I'm doing my best to just make all the coolest content but I want to set like cool goals I was gonna do a sub goal to grow a mustache but I don't want to grow a mustache so we're not doing that I I'm not gonna sorry Nikki I can't just answer like random code questions yeah my sub-a-thon will be nuts not even from November I was so close I was going to but I actually shaved two days ago because I couldn't deal with it I know what you're talking about I don't smoke shush I have facial hair in My remix video funny enough it just it my shadow comes in really nice and then everything else does not so it's Jesus Christ doll you're at 45 this stream God y'all are nuts I appreciate you a ton the sub off I did not catch scuffed I watched a few minutes of it but like I have not had a chance to watch the whole thing anything worth me knowing about new framework if I hit 2.5 k Subs I think that would have to be 3K at least I don't watch TV no I just don't have time to sit there and watch hour-long things plus right now they also didn't use ping that's the real reason I don't care okay yeah three 3K and Theo tries to make a framework I like that thoughts on the Twitter takeover not in particular uh I do need to take a new still for me being Live on YouTube I forgot about this let's get a good one quick uh is that out of focus it's slightly out of focus there we go and we'll get it good take that hop into oh I don't even have Affinity on this computer [ __ ] uh using this chat as an easy way to transfer this photo I am using the tier 3 chat and Discord to send my thumbnail photo over because it's the thing I had open and the easiest way to do things is to use the Discord Channel you have opened to send files between computer boundaries so I am quickly opening the tier free chat which for those who don't know this there is a tier 3 only chat in the Discord where tier 3 subscribers and tier three uh patreon users are able to get a more unfiltered Theo a Theo that is more willing to complain about things that might get me canceled but also in this case it's where I go and paste the picture that I want to throw into Affinity to quickly update my thumbnail uh let's I can screen share again why is that doing that that's annoying cool they all get to see the whole process now my hair is not puffy enough I didn't use enough product today trying some new products recommended by people I really trust and I do really trust them but they also don't have hair that's as heavy as mine just fine it's a reasonable problem to have uh uh what are we talking about today I should probably pick let me safely open up my notion first half a i did this separately because I did not want to show the things that were there cool Sarah components what the hell I need to put this somewhere where it actually fits without covering my face too bad we'll make the text red give it a nice uh with that 10px black outline and a shadow except let me drop Shadows I said if I want to put live on the top I don't really feel like it and this is fine as this uh live RSC it is 11 4 22. really should have made this before the stream but this is a hard job live yeah I'm using Windows for the stream I'm using Mac for my computer I almost what I want to do and it sucks like I should have I need to figure out a workflow for this I would love to chop this out in a way where I don't have to like worry about the VOD but I do have to worry about the VOD and I do have to worry about like I've chatting remix or react server components remix also I love how whatever the [ __ ] I'm pretty sure it's an angular app it like I'm typing so fast and it's just dropping half the characters it's so sticky keys it's the worst cool that updated hopefully the page is frozen so I don't actually know if it did or not cool it did nice now YouTube's up to date ish oh thank you doll I appreciate this a lot iOS related BS on react native I am painfully familiar the Android related [ __ ] on react native is also very painful though so I I will say native platform suck react native makes them better so much so that then when you run on the problems it hurts way more I sometimes use uh Synergy I don't have it set up right now since I reinstalled Windows on my desktop but I use Synergy but I do have two keyboards and a trackpad for my Mac and a mouse for my desktop Theo is the only person who explains all the things in like Excalibur in the simple way oh I appreciate that look who's in chat oh oh and chatted I don't know if I can view the chat list here you listen chat I'm not seeing her in chat I didn't think she'd be here when somebody gifted her I'm sure oh if somebody gifted her she might have shown up for a second to see why the god twitch come on yeah someone probably gifted her so she came in to see I'm talking to you or I'm used to talking to users well that's a good joke actually somebody had honestly gifted her that's probably why she popped in if she did and then Shao The Gift Community sub yeah I know that but I thought that Dev was saying she was actually in chat she follows me on Twitter you never know I feel like opening this on stream is risky but it's one of my proudest achievements oh actually more importantly we could talk about ass cleaning oh this isn't his Twitter I forgot about that I think yeah because this happened banned t-word do you mean trpc because I didn't ban trpc I banned trcp because people spell it wrong all the time trpc should be on the allowed list I'm actually gonna go make sure that's the case oh oh yeah oh Tori yeah that one's staying making sure this is here so it doesn't screw up Mac OS just isn't the the most stable platform for streaming like OBS is not supporting it well oh do I have on bands that are bad let me I'm scared oh oh yeah that's hilarious actually so it's important to know I helped build mod view and actually didn't work on unbanned requests but my account always uses a test account for a ton of [ __ ] even after I left and as such yeah I should go through and clear these but it's funny having the QA users in my account still I I we tested a lot in production not in the like back-end apis that were unsafe were shipped to users or anything but in the who we were working against the production code base when we were working on front end stuff it was necessary for this like the only way you were gonna have like the scale of like nasty crazy twitch stuff this was super helpful okay close these all now based Theo in the private chat oh no no I'm scared I have so many DMs I have so many DMS God I need to not look at um anything related to Discord until I'm done streaming oh everyone honest as hilarious as this is like I could see amaranth learning how to code my toys experience overall really good I was on the safety team for three or so of my four and a half years and those years were great I had a great experience in safety I had a less great experience on other teams in particular the Creator org was not great it's a big part of why I left to go build my own stuff as I didn't feel like they'd ever build what creators need I also just noticed that Josh or Shaw resubbed tier three appreciate that a ton man I know that you're having problems with your sub good to have you back you are not late to the Theo party you're late to the interview that we did two hours ago but you're just in time for Theo oh we Prime and Jen and I have been planning for a bit uh we'll let you guys know when those plans are a little more ironed out but uh we definitely want to get into the hot tub streaming meta before it's dead oh I did not leave after you know I I left right not right before but a few months before The Exodus started at least he I've been asked this a bunch right now no the goal of create T3 app is that any combo of the things you select will be the best possible experience that we are familiar with at endorse we're down for able to fork and build crazy things as well and if those become popular enough and we're confident enough in them I could see us adapting them but I want to be careful that create T3 app is like the set of opinionated stuff that we believe is best for building web applications Theo versus Seth who's Seth interesting I'm very curious over under remember laptops this is such a good pet the more I think about guest star and the more I see how they Market it I'm realizing that like whether or not the user experience is largely copied from us the actual benefit to the platform is much less where guest star kind of feels like if people who didn't watch Twitch or make content saw that Instagram and Tech talk had live and decided oh that's the new thing we're gonna try that a lot of what guest star is doing is making it so you can bring your viewer in Via their phone or whatever device they're on for a quick chat it's not for Planned high quality content and I'm not seeing the meta moving towards smaller interactions with no names from chat I'm sure that'll be fun content for 100 or less viewer streamers but I don't see that being a thing professionals use and this is consistently the problem I see with when twitch builds Solutions is they don't understand professional creators they understand people who don't quite get creation just yet because a lot of twitch staff are that they're either non-creators or aspiring creators but very few of any twitch staff understand the grind of being a full-time Creator right now and most of the products they build reflect that the products twitch makes are their failure to understand what makes Creator successful and their theories as to new types of content that might exist it's not representative of the on the floor problems creators keep running into every single day and I want to solve those problems and that's why I quit I wanted to build the things creators needed oh boy more fetch bugs I have not talked about that one yet no what about multi-chat channels for streamers that want to interrupt each other and not the streamer yeah I it's it's going to be really hard for me and y'all to have Creator conversations because to me it's just gonna feel like oh you all don't understand the Creator side y'all are viewers that's the case one of the first things you learn as a streamer is that streamers don't watch streams we don't have the time to we would rather be doing anything else it's very rare I watch streams and when I do it's people very far from our world that said somehow both Kisa and Bash bunny showed up immediately when I said that love you both just as you tune in of course but you're not like here immediately when the stream starts I'm mostly saying these things because it's a smaller than normal audience love that you're here bash you're actually doing a lot of research though your job is developer advocacy and understanding what developers are listening to trying out and resonating with and you're here more for that obviously Kirkby if I'm wrong I like to think you're here because you know how important it is as a person whose career is developer relations to see how developers are relating the point of trying to make like the previous like or the previous one I was trying to make is that I thought I understood what creators wanted and needed for so long before I started creating and I was entirely wrong like 200 percent wrong did I know problems creators had sure did I solve some of those absolutely but did those Solutions cause our company to be massively adopted by every Creator no we solved the problem that a lot of people have but it wasn't a problem a lot of people think about every day how you bring your guests in your shows isn't a thing that you're constantly thinking about and annoyed by it's a thing that you deal with when it happens five minutes before the show you have a lackluster solution then you forget about it till the next show and because of that we didn't solve a problem creators are thinking about it's a lot harder for us to find customers and have the massive exponential growth we still have people adopting the product almost every day and a very very low churn rate because of how good the solution is to the problems we've solved but we need to solve more problems for more users in ways that are more obvious to them because they're solving problems they think about more often [ __ ] do I need to do the like business marketing channel I like software too much to talk about this business stuff all the time but I'm realizing I'm okay at it this is yeah I appreciate that you're here taking notes I I genuinely love the people who are understanding like how to get value from what I'm doing because obviously like you can learn a bit about code from watching my stuff but the way that I convince people to to listen and be involved is very valuable and I'm really proud of that I feel like people like primagen people like bash people like trash Dev people like myself are really changing how developers especially like that five percent of developers who are willing to try out new [ __ ] those devs are hanging out in places like this not at Tech conferences and the people who see that and get it are really impressing me it's actually something I wanted to talk about I should probably do this um Clippers get your clip ready because I will need to post this on Twitter later I can do it myself too but if someone wants to get a clip of this next rant I will appreciate that a lot oh no did my off break for my stream deck let me have to re-link that for some reason cool and now I can do markers again what's up nerds we're taking sponsors now big change for the channel I know but I've realized that this audience is too cool to not take a little bit more advantage of I know there's a lot of people who follow me a lot of people who know about me and know about the audience we've created here of super talented many years experienced Developers let's chat about how to get a hold of them I am super interested in doing things like collaborative content having a banner on the bottom of my stream when I'm live those types of things I think it's time that we get more money coming into the channel so I can spend that on more things like paying the open source contributors who are making things like create T3 app happen paying more editors maybe getting the podcast finally put on audio platforms but I want to be able to scale this a little bit further and I want to reach the audience that we're already reaching in a much stronger way I think sponsors and collaborative content is going to be a huge part of how we get there so if you're interested hit me up my DMs are open on Twitter I'll send you the link that tells you all about the different types of sponsor tiers and things that we'll be trying let me know if you're interested cool sorry I'd do that one quick but it's a it's about time we make more money than I'm making off this right now I heard some numbers from people whose viewership is it's a lot less than hours here that are making an amount of money that is more than I was making at twitch as a full-time employee and that was a lot of money so yeah it's not even like I know it's going to be like I'm greedy and yes to an extent I am but like holy [ __ ] no I I do not invest I I have been talking about an investment or two but to be frank I don't have a lot of money in my bank account right now I spent a lot of my money starting paying and I don't pay myself a whole lot of money from paying I make way more off of my YouTube My Gift subs and my patreon than I do off of my job right now and I want to be able to give more money back I want to be able to sponsor the create T3 app does I want to be able to hire like an Editor to do more pieces of content like primagen and I might be starting a thing together and I'm going to need a way to manage that and have it all planned I might need to hire a manager honestly at this point and I can do that out of pocket but it's way harder for me to justify but if I'm able to get sponsors to help with that type of money and I can reinvest that in the channel and reinvest that in the community I'm really excited about what we can do and the secret piece I didn't mention in that little spiel I want to start saving for T3 conf I want C3 conf to be absolutely [ __ ] insane and that's not doable if we're not well fundraised or well funded ahead of time and I don't want to like get sponsors for the conference until I have an idea of like what we can afford and what we can do but I need to to get a little money in our pocket first the first T3 conference will be remote it will be fully remote we will do one in person eventually but the things I want to do are not possible in person we have some very fun ideas planned I wanna right now I feel like what we're doing with the channel is looking at stuff like what Ludwig does with events what other like political streamers and game streamers are doing to make their content appealing to a wider audience even people like uh what's the name why do I always forget eight or uh Aspen Gold's name stuff like what Aspen gold does stuff like what Austin show does with his game shows I feel like we've been learning a lot and copying from that in the dev world and we're slowly catching up where we're like two to three years behind their meta right now I really want to Leap Frog it I want to do things they haven't even thought of yet with T3 conf it's going to be wild very excited for that also Joker thanks for stopping by I love that you didn't have a sub despite gifting 45 and I love that howdy just gifted you a sub to make up for that very good stuff potential collab with off-brand not unlikely honestly I should hit those guys up I have some plans one more thing that I need to make sure I shout out very important I have a really cool live in-person conversation coming up in San Francisco soon linking this in Twitter or linking the Tweet here I can link the event directly too I suppose for those who don't know slightly late is Alex Russell well known for referring to react as a Scourge he largely thinks single page apps were a mistake I think single page apps do not solve all problems they don't even solve most problems but they solve a lot of the problems I'm trying to work on every day I'm hyped this will be on November 21st I believe at 5 PM yes November 21st San Francisco 5 p.m did we get a venue yet where's the venue oh that's nice and close that's super convenient good [ __ ] say oh they're still trying to confirm a venue well yes I will be talking to Alex Russell it'll be an interesting combo the hope is that an in-person convo would will go well and with Ben moderating uh I'm hopeful I do genuinely think this convo can go well I'm really excited for it I have some points and I've been doing a lot of research ahead of time on Alex's stances and things that he says that are true but not necessarily representative of the full picture should be a really good convo I am genuinely excited and I know he's a smart dude and I want to yeah should be good Kevin no you should just passively aggressively tweet each other I almost never tweet at Alex I've dmed him a few times but chatted a bit about things I just I I'm sure you guys have noticed I'm trying to be a little bit less toxic on Twitter I I recognize now that people learn from the way I do things and replicate it got there really fast because when I was a little thousand followers [ __ ] that was like seven months ago and none of this mattered and now it matters a lot yeah if we were to bicker on Twitter strategically it would actually be a good way to like blow it up I have been asked to sponsor in-person events so many times and no we're not doing it but we help with some things in them primogen why are you here thanks for stopping by man speaking of primagen uh there was one other tweet earlier what do you guys think about this one let's do a poll so Theo and Prime start a show oh hash Kisa two oh I have to run ads so we don't get pre-rolls I'll do that in a minute once we finish the poll this could even look at it also Prime what was this I heard about a poll that uh had I heard that there was a poll that was Theo versus Seth or something I love more detail on that I should I have FFC and solid but I need to add them yeah I will add that later can somebody remind me post stream uh when I say somebody I mean a moderator in the mod Channel oh sethron versus Theo for the raid oh sath storm deserves the raid for sure I hope that Seth got the raid good is that the trim deserved it everybody's gonna come watch me anyways no I Seth is the right person so you rated the right person angular is the best with five more gift Subs God damn yeah I like the Democracy angle here but I I would have voted for Seth too good call I like that in the dev World we're able to throw people at the music world I rated primary not peremption I rated uh John Wayne Uh Saturn main on Twitch on Wednesday yeah you're here not willing to lose the number one spot I love that angular wasn't getting enough attention see why they quickly launched yep yep twitch playing five eyes in a row I should run my ad break I apologize in advance uh I am running ads so that we don't have any as many pre-rolls because right now the people coming in the stream's a lot less than usual and this tends to help with that so uh sorry about that oh no so hard sorry to hear Prime hope all is well best of luck with that for those that don't know Prime's like the most [ __ ] good like human and friend like no [ __ ] we've hung out enough now that I can say that confidently he's just a great human being and this is very both that a friend would call him with a real bad thing but also that he would take the time to say oh by the way I have to run because of this like this is a very primogen moment and I appreciate the [ __ ] out of him really good dude I love that almost nobody heard that because I was running an ad during it only the subsert it they're the important people anyways prime prime moment LOL I'll send you that on YouTube too before I forget people don't get ads well I should consider ah yeah I'm not sure how I should do monetization for Live on YouTube you have a bunch of options and it's I would like to turn off pre-rolls on YouTube honestly ah depends on the type of subs and fodial wait I just realized kisaka aren't you supposed to be like boothing at an event why are you here TC TC bird with the five gift subs thank you man appreciate that a bunch [ __ ] yeah all are the best it's probably time to pick a rant once these ads are done and then major sabotage with an additional five gift stubs just making sure people don't get all these uh ads huh well I respect yes the end stream button is real someone clicks this the stream is over that's that's why that's there oh boy your CTO found my vid oh fun good to see you Nate thanks for the resub Expo rant no one wanted that one gonna save that one yes that is correct smooth if you run an ad you get an amount of time that pre-rolls which are the ad you see at the beginning when you click a stream the first time to kill those you need to run ads yes yes you'll get a free ticket don't worry this is accurate it's funny because like I'm pretty loud but this is Chill Maple don't spoil it angular I thought you were leaving I know you weren't leaving it was um the other super generous gifter uh yeah it was dull dull Joker left earlier you're still gifting everybody what rant options do we have uh good question uh YouTube premium pays way better per view but YouTube ads make more money because so few people have premium but the few people who do have premium help on our Channel out a ton start doing predictions so you can hit the button faster I need to do more predictions we need more things to do predictions of we'll do a bunch on Monday uh should probably announce that too huh uh one more fun announcement I need to book this on my calendar still I'm stupid for not doing that yet is on Monday I'll probably start at noon or one I want this so likely starting at 1 pm I'm gonna be co-streaming jams.com so I'll be live watching and reacting to everything from 1pm till like there's a bunch of these I wanted to watch I really wanted to watch the future of databases one two so the ones I'm hyped on are this as well as the um uh obviously the framework one but all of these look super cool and I'm genuinely hyped to watch and react to all these live this is gonna be my first live event sponsored stream which I'm super excited for too we'll see how it goes should be a fun show so yeah make sure you're here on Monday if you're not going to be there in person My Stream will probably be the most fun place to watch it I'm genuinely hyped on this it's a great lineup like this set of people is so [ __ ] cool like this is great the other ones I was yeah I'm really hyped on like most of these Amy's an incredible designer and I'm really excited to see like like I'm I don't know what compressive time is I probably should but I'm super curious she has to say about it I'm expecting some deep like design system stuff here I am not as familiar with take shape but data orchestration for compo composability is always fun uh I know Phil Hawksworth is incredibly smart individual I'm always excited to hear what he has to say about things uh build a B2B size in 10 minutes that'll be an interesting chat this is much more me composability something I'm very fond of Jam stack performance on the edge obviously very hyped on that sensory plus netlify this will be an interesting one uh how developers experience or how developer experience holds content teams back very very excited for this one Edge is cool but what about data is the thing I think a lot about being an incredible developer very excited for that one obviously a panel of databases this will be dope and the front end happy hour live we got a lot of homies on here great setup should be fun yeah that's all the big like events and such that we have coming should probably chat about things I can make videos out of now huh next to kill this feature our server component's bad I feel like everybody's doing this one right now think I could pull this one off can do a short for that I need to kill a bunch of these though uh edit okay so I'm not going to do that from here this is dead this I still want to do in this I still want to do and this is a weird one right now at the current state of the job market I could do that do I am I confident enough to do that getting a job sucks right now I like that let's make that one of the options Poll for our next rant cool foreign convenient when it happens but it is bound to happen at some point see notorious Sledge with the prime resub prime sub first time sub good to have you here man the getting a job sucks right now would be how to get a job for for young and new folks in Tech it's gonna suck it's like my advice traditionally and my advice as of the last two months are very different just saw somebody on YouTube said they would religiously watch me doing like a business and marketing channel very interesting I should consider that more seriously I think people want the jobs one more I'm sad nobody cares about this because this is like a really good click bait thing and I want that one I might do that after just because I want to you're starting your polls wrong yeah I absolutely am like 100 percent I put a rant in here yeah can we do all three it's [ __ ] Friday and I have [ __ ] to do you're starting projects wrong but the jobs one pretty close a lot of viewers don't vote because they're watching in the background it's a good one people really want the jobs one I tell you what if we get a hundred Subs in the next before 4 pm it's 3 17 p.m right now so before 4 P.M we can get 100 Subs I'll squeeze this one in today otherwise it's gonna have to wait for another stream and it's going to be a little bit because all my next streams are booked with guests so if you really want this one if we get enough gift Subs going I can do it but uh this moment with uh we got one six six two so one seven six two subs actually well they get 100 sub points so people tier three accounts extra so if we break if we break 2K sub points I'll squeeze the jobs one in I think that's a reasonable bar anyways the seniors will be mentioned as well don't worry that's like that's the whole point of the channel 50 oh okay Jesus Christ Marco [ __ ] uh that's most of the way there then uh that's more than half yeah it's only 20 more now [ __ ] Christ thank you so much Marco [ __ ] uh yeah it's like it's gonna be a two rant stream yeah make sure it's very clear what you want in the talk so I can make sure I cover whatever the hell you want me to be talking about in that it's Jesus Christ appreciate you a bunch man so you're seriously and then the the resub after CEC in OG with the prime sub you see with the resub you've been in for a bit now appreciate that Andre with the community sub Marco Theresa for himself an attic with the community sub as well yeah we're getting close this number's I think behind now or like 20 away Jesus [ __ ] anyways I'm going to ignore subs for a moment they just need to do a different rant we're going to talk about how the projects you're starting are being started wrong another 10 from Carl thank you so much I need to leave this tab where I'm going to keep getting distracted with you guys being way too [ __ ] generous appreciate you all so much you have no idea need stream create scene oh y'all are gonna be mad at me for light moating there you go dark mode we should have a pole that sets light mode in dark mode and you guys can change it throughout the Stream Kisa go run your booth you're busy wait did I miss another massive gift sub you guys are going nuts another 10 and then another 20 from snow coder [ __ ] Christ yeah we're over the goal you guys win first chat and now gifted 20. [ __ ] hell I he knows what he wants and I can appreciate that and Carl with the 10. yeah you guys are nuts I appreciate y'all so much uh yeah we'll we'll definitely talk the job stuff I promise we'll do that next Channel Point reward to swap between light and dark mode I wanted to be a community effort thing I'm thinking like the Democracy in uh what's it called uh or Twitch Plays Pokemon give it a name before I forget foreign quickly hydrate then rant time God my skin is a mess right now [ __ ] anyways how are we looking fine fine enough God I really should have worn makeup today I did not feel like it do you guys like the more unhinged Theo as of late I've learned that because we edit so heavily I can be way more unhinged here and just edit the useful video after you guys really get the behind the scenes now when he said CEO on YouTube chat yeah I am what I am unhinged good [ __ ] don't want a button button or no button one for a button up two for no I like it buttoned no button two wow everyone too immediately okay other option three for entirely unbuttoned a lot of threes Jesus Christ y'all horny bastards whatever you do what the chat asks for the sleeves rolled up as hot but yeah sleeves hold up do I go all out let the chat rule my appearance I haven't rolled up the sleeves in a shirt like this in a long time horny bastards anyways enhance it unbuttoned now we're talking rant time I think it's rant time let's round about projects hit that marker button the mic well positioned how my levels everything looks good if you're anything like me you love starting new projects it's just so fun getting started on something new playing with new technologies solving a new problem experimenting with something you haven't used before but man I've started so many projects the wrong way and if I've learned anything it's that starting simple will make your projects way easier to work with and maintain every step along the way what do I mean by that though let's talk about it so starting simple there's lots of different types of projects and lots of different ways to build with them before we go too deep into that though I think it's really important to start with what are your goals there's a lot of different goals you can have with a project could be learning something new so you really want to try out remix or svelte kit that's a good reason to start a new project let's say your goal is to build a business and you eventually want to be able to hire people and scale it up maybe your goal is to demonstrate best practices maybe your goal is to prove that uh product is viable maybe your goal is to just stick around and have fun all of these are entirely different reasons to build and all of these different goals could lead you to picking very different things if you want to learn something new then it's important to pick the thing you want to learn and not add too much on top a common mistake I see a lot of younger newer developers making is learning something new and then adding 15 additional things to learn on top and I know that we're a bit guilty about that here in T3 land because create T3 app introduces a bunch of different pieces I like to think we point you at the thing and those pieces solve well but it's definitely not well enough and it's absolutely confusing people the more you can pick the individual things you want to learn and not add too much else on top the more effective those projects will be at teaching you and helping you learn if your goal is to build a business your priorities are entirely different maybe you have to hire a lot of people soon and the people who you're hiring are all in an area where there's a lot of view usage if you're in the East instead of the west then it might make way more sense to go in on next and a few Technologies than it would to go in next and react Technologies or if you want to prove this business is viable as quickly as possible maybe just making an HTML file is the best solution for you and your business but depending on where you want to be and what your goal is with the project the decisions you make are going to be fundamentally different if we look at this on a spectrum as we all know I love to I'll do one more align tool here and we think about a project it's important to think about how important is this project to us over time so if I am starting a side project like I was with ping its importance it's not super high then people started using it the importance went up quite a bit I was there for a while and I started hiring people and I was there for a while they started having bugs and we started getting investors and the amount of [ __ ] we had to care about just constantly was going up but what's important here is to notice these lines the points at which things happened where like here is when people started using the product theoretically if I could move this line further to the left that might be really worth it because another way this line could have went if I just clone this all quick is if we had built a product that wasn't as useful and this is more common than you might think we might have gotten to that point and then realized it doesn't work and just immediately dip down to nothing uh wrong button that but you might have started hit this line and then immediately bumped which is very common most projects when they hit the line of are people using it or not tend to be less important not more important very common sad but very common so for a lot of these projects when you're starting something new your goal shouldn't necessarily be to make when you hit this line to make this process as good as possible rather your goal should be hit this line as soon as possible if you can move this line all the way back here and get users using your thing way earlier and then realize oh [ __ ] this isn't going to work all the way at the beginning instead I need to get better at the line tool there we are so you can realize this earlier suddenly your iteration flow can move way faster but this again depends on what your goal is if your goal is to free this code base to eventually get to the point where it's as important as possible then you're going to behave a little bit differently but if your goal is to figure out which code base has the potential to solve problems for users that are as successful as possible then you want to be able to get to this line of users using it as early as you can but if your goal is to experiment with a new technology this line doesn't even exist to you why can't I select and delete that what the hell like Excel locked up for a sec there but if you're just doing a side project this line will probably be like this for a long time you just don't care and that's fine I have a lot of projects that are like this or even some and this is more common you might think where my interest fluctuates over time and the decisions I would make for a thing like this are very different than the decisions I would make for a project that I want to either find market fit for or scale the y-axis is important I should have put an axis so why is importance and X is time so how important does this project to me over time so if your goal isn't to make this project something that's really important to you then play around and experiment and if I like bring this curve back I think's important let's look at the trajectory of ping and how it like fits into this I like this vertical line this is the point move this over so this is the point of first users which is where things get more important than the point of first employees first tires things continue getting more important and fundraising all of these points suddenly made the value and importance of this code base and the quality of it significantly better over time or significantly more so over time if I could run this again and actually now I'm not going to do it that way uh how about this one I'm trying to think of how to explain this words are hard so the way I'm going to put this is before we had users I was way more willing to experiment with stupid [ __ ] so for the PIN code base at this point in time in this region we were using Uh custom V by Theo I should make this smaller and like this custom Theo feet hybrid Styles components plus Tailwind uh worker KV plus versl API crappy third-party webrtc so at this point in time this was the stack and we started getting users I realized that as fun as the stack was it wasn't really realistic wrong so I had to start being more realistic when we got into this range this is where I moved us over to nextjs to uh AWS ec2 and uh better webrtc and websocket provider I should say uh what's the is ec2 the database one what's the one that's for just for databases think it's easy too could be wrong about that RDS RDS the one I'm thinking of thank you that's what you're using at that point actually we used Heroku for a very brief moment here it's actually more truthful to put Heroku DB here Heroku postgrass DB this is what we use at that point and then as we learned as I learned specifically as I learned Heroku [ __ ] sucks like massive chunks we stayed on next but I moved to RDS I should say next.js plus uh API funks and react query and here I moved to nextjs plus trpc which ended up being much better experience as well as using RDS and I think that I made the Tailwind move around here or kill SC all Tailwind and then at this point I was really [ __ ] tired of swapping our databases all the time so I said no more we're not doing this again and at this point we moved over to Planet scale for our database uh we bought Tailwind UI for faster iteration what else did we do that has helped us move faster uh Prisma was adopted at this point I should actually put that here I'm gonna kill the better websocket provider things that's not important detailing but Prisma there but important actually it's good you brought up Prisma because one of the cool things that happened when we adopted Prisma was that it gave us more flexibility on our database provider because Prisma was a very reliable like single point of entry that we could oh actually uh somebody else said next oh that's a good one too the beginning uh Theo rolled oth the bad I think here I moved to next off I was an early next auth user did I say every cell the whole time yes I was on for sale this whole time for our deployment system but the the specific thing I'm trying to highlight with this chart is how both my knowledge and the quality of our code base changed over time this the time frame for this was six months funny enough not even so what you see here is this project half started as me experimenting with a bunch of tech even though my goal was to serve users half of this was stuff I had already built and done but have it with stuff I wanted to play with I wanted to try worker KV and use it on using it on Versa API I wanted to make my own crazy combination of styled components and Tailwind I wanted to not worry about webrtc because that's not the problem I'm solving and I wanted to have a dumb off solution I didn't have to learn about I also didn't want to buy into next just yet because I didn't usually and didn't care to and I had this custom V template I was using so I used that initially and then I realized that in particular this was awful this was problematic and this was stupid and insecure so in order for us to have users and not have them be miserable I had to replace a lot of those things and next.js was pretty clearly the right choice with the amount of API functions I was building and how it can compile this all into one Lambda for me my Heroku postgres DB was because worker KV was not a great interface for actually managing data and my permission systems were getting complex enough I needed relations Prisma was uh because I wanted type safety in My Relations and to have as little sequel as possible in my SQL database and next auth was a better way to do off in this stack so I moved all those parts over was still using the awful style components plus Tailwind but had been following more and more foretailwind until eventually I went all in on it next JS plus trpc specifically like trpc made by iteration speed so much faster massive win which was more so because the chaos that the people who I was hiring had to maintain was really rough and trpc made it way easier to onboard people even people who hadn't done false active before and then over here we started what else have we done here uh oh Axiom would be a fun thing to put here uh yeah shattered Axiom having really good logs was essential and we got pretty far without having that but at this point like once we had raised money what happened here was we're committed to scaling very far we want this company to grow we want this code base to become more and more important over time fundraising doesn't mean we are immediately more important but it means we are optimizing as though we're going to be and we have to be very very cautious of the decisions we make from that point forward now which is why switching to something that's a database that scales way better so we don't be worried about our database we can be worried about our product and our users was super useful Mark mentioned growth book which has been great too they're an open source uh or feature flagging provider that has been super helpful for us rolling out features more often and giving our users earlier access to stuff uh We've switched website providers a bunch of times I don't really know how to like fit that in there because most of those decisions ended up being wrong but the the goal of this in particular is to highlight that our Solutions changed over time as the needs of our project changed and our own understanding of what we were building changed that ended up being very helpful for us both in that were way more technically inclined we understand way better all of these pieces and why the ones we picked solved the problems they do for us and why it's important to use them so we grew as Engineers we found our users and we served them faster and we built something that's pretty cool and the tech debt's bad but not impossible we've actually cleaned up a lot of it recently but if I was to re-roll I'd probably move this next section left slightly if we need data and if we don't I'd probably use something like Astro or even just a static HTML file for the earliest version if possible I would make the adoption in this section here this first chunk before you get to your first users make this as simple and stupid as possible because whatever you think you're going to need in this next section here you're wrong you just are if I've learned anything as a CEO and a person who's worked at a handful of startups and consulted from anymore what you think you need in section A and what you actually need in section B are just so fundamentally different that you are going to be wrong if you commit to a specific way of building b c and d while you're in a you are making a more work and less likely to be successful the goal of a should be to get to be as fast as possible not to make the transition to be as smooth as possible even if you're working at a big company if you're starting something new you still don't know if it's going to work or not you don't know if the users are going to use it or not if it's a contract maybe you're skipping to be already because there's a contract signed there's a user already there but generally speaking if your product doesn't have users yet your goal should be to get to the users as fast as possible because this line here is going to be a rewrite almost always almost always why not do the final text stack in D but for the beginning because you might not know that stack you might not know if you need that stack you might not know why those pieces are important and most importantly that will probably slow you down adding all of those things in is a lot of [ __ ] your goal should not be to have everything you're going to need at the end of your company's Journey it should be to get to the next step in the company's Journey there's also a point like way out here if I was to be more honest like this is only like that and this chart should go way further where we hit my favorite the line of prime where when you get to a certain point in the company's history and the needs have grown to a certain point actually I'll just I'll extend this for it why not this is a useful chart we'll throw this that way let me and this Arrow here and at some point you're going to hit product Market fit I mean hopefully you will hopefully we will hopefully everybody will that's the goal of being a startup and you hit product Market fit and all of a sudden things go to the Moon there's a point here where like the code base isn't importance which I would argue as a function of the code bases uh number of users I need to move these out of the way a bit more it's going to be an absolutely chaotic diagram I think it's probably going to be better to put this up here sorry to mirror for all of the uh chopping you're gonna have to do around this section my apologies I want this in the front so the front button that's the front button nice and I want to label this line of so the line of prime we've discussed this before the line of prime is the point where the cost of things in your code be it the cost of running your code the cost of it going down the cost of issues occurring in the cost of scaling that code base hits a point where those costs are more expensive than primagen salary primagen people like him are very smart very talented and are very very useful when you make it to this e section companies that have been around for years that have millions of users that want to maximize their cost savings and at this line once again pretty much everything beforehand is gonna have to be thrown out in order to make this profitable and I think that one of the biggest mistakes I've seen companies making is a lack of willingness to toss things from the line before where they invest too heavily in a certain point where they're emotionally invested or financially invested or their customers are technically invested in something from the previous line recognizing you're there and recognizing you need to throw that all away and build the right thing for the place you're in is expensive and that happens at different points throughout your company's Journey because this isn't like a thing you hit because you got a certain distance it's a thing you hit because this line went up past it so once you have product Market fit and your average like you have customers making thousands of API calls every day and those API or you have thousands of users every day and now you're hitting all sorts of like crazy costs with Lambda functions maybe having a real server makes sense maybe moving off JavaScript makes sense but you need to be at that point to know that and people tend to take this line of prime and act like it's here and then they themselves pretend that they're starting here I see this all the time with startups they're like oh workbase is already so important we're here already why would we not hire a primagen we had primogens on every project when we were working at Amazon when we were working at twitch when we were working at Netflix and we were working at Google why wouldn't we use kubernetes we'll have users eventually we'll be happy we did it if we do it day one no you [ __ ] won't you won't get to day two as a result of that mindset and the funny thing here is primagen largely agrees with this take from the conversations we've had about this his value comes post product Market fit I think this is a good point to end on because the next video I'm about to go record is all about the current state of the job market because at this point in time as painful as it is most people who exist in this section are kind of [ __ ] the companies that are pre-product Market fit are in a rough State companies that are post are all down scaling too and taking less risks and hiring less Juniors and doing less things that feel like they're on this side because this range especially in this area it's a great place to take risks and a great place to get started but this line forward especially right now is a bit rough so keep an eye out for my new video coming soon all about the current state of the job market for engineers both seniors and juniors hope you appreciated this one I was hyped to talk about this I think it's important to think through what tech you're adopting as you build projects and what the goals of those projects are I know this one was really focused on the business side of things but I do think you can get a lot out of this in other businesses or in other code bases as well or even just knowing that what you're doing isn't building a product that's going to have users and as such you can go ahead and play all that said be very deliberate with your goals when you start a project and you'll be way more successful as a result of that I hope this was helpful you're probably getting recommended a video in this General range click it if you haven't YouTube thinks you'll like it they're probably right I also have in the corner here a like button that you're not hidden anywhere near enough please click it in less than half a y'all are subscribed for some reason so please if you don't mind hit that sub button thank you as always shout out Mir see you later nerds you guys don't see it because that was for the YouTube video not for the Stream sorry I needed to set up a thing that says that in that section I love YouTube comments please answer me that's definitely going to win my attention 100 percent that was a good rant I liked that one I hope that one will be useful for people anyway date great UI pre-rolls good call let's run an ad thank you sorry for the ad necessary for the channel see can horn gifted an additional so appreciate that too that's actually a good question how does the importance over time look compared next to like the info price over time I chose importance because it was meant to be very arbitrary because different businesses have different goals and like what is expensive will change your cost might be more users means more in for cost your cost might be you need more developers to consult for the five customers you have I've seen businesses with five customers that are billion dollar businesses that hire more people just to make those five customers more happy and their info doesn't need to scale at all so it depends a lot which is why I picked the arbitrary importance metric uh I need to think about how I want to talk about Prisma in the future because it has problems but I don't consider the problems the orm nature I consider the problems the the lack of modularity and how it's architected and specific pieces of that architecture not aging great thanks seven there I I threw out a random number there there is no answer to this question it's like like how many lines of code before you're a good developer somebody like Prime I could see them depending again on the company's needs I could the reason if we go back to the Chart the the point of the line of prime is this code base is really important you're running into problems you hire Prime agent to come in and say what the next focus should be one of the things that he's talked about a bit that is frustrating for me is when he finds a way for the business to save a lot of money and the business responds no that's not a priority right now generally the reason you hire someone like him is to prioritize what will help the business especially their bottom line the most it might be a full rewrite it might be moving off of Lambda and versel it might be taking these two endpoints that are really expensive and cashing the [ __ ] out of them but you hire a smart person like this not to do a very specific thing but to keep you at a reasonable Point as the importance of this code base goes exponentially bad so yeah point to know literally everything in this is about as arbitrary as possible this is meant to give you a model for thinking about these problems not to prescribe you the exact States every company goes through and the exact numerical point at which you do a certain specific thing this is a much more General how I think in my head about where companies are in their lives and how to pick who makes decisions based on those things Yes actually this is a good question snow coder it's important as well and this is why I said like be deliberate about your goals like if demonstrating best practices is a specific goal or here's one I could put in here as well that's like make a code base that can be or make a maintainable code base if that's a specific goal because you're going to be working on this code base for a long time and you know that like this has to ship to these users exactly this many users and you're gonna have to add things in the future yeah that's a really good like to me that means you just skipped two product Market fit and as such you should build accordingly the thing I would push back on though is most Engineers are working on something I would consider a startup in this context because when you get hired at a company you're not usually being hired to start something new that is going to immediately be brought in and maintained for four years you're either brought in to help maintain that thing that was already built or you're brought in to work on a team trying something new and in both of those cases you're on one of those extremes that's very different like if I get higher like my my [ __ ] all of the teams I worked on at twitch were many startups within twitch were taking on this mindset would have helped us a lot they actually started calling in my final team at twitch the idea of Skipper like shout out about this one of the things you shouldn't do in this section is spend a lot of time on product specs and like and specking like technical specs are cool especially once you're past this line but wasting all your time on tech specs keeps you in here for a long ass time and things end up just not shipping as a result there's a I think they call it the Theo method right now they might have renamed it because there's a lot of spice towards Theo at twitch nowadays but for a bit if you were to want to skip to here as fast as possible so we can start getting feedback on a thing they would do the Theo method which is [ __ ] all of the planning just open up the code base and write the code put under a feature flag give it to 10 people that you trust and start collecting feedback as soon as you can because once you've done that the process becomes much clearer and until you've done that you're guessing and those guesses aren't good I am putting another marker and I'm going to add to the notes uh now I went on a short rant about how twitch has the Theo method that I'd like to sneak in happened around 3 54 p.m I marked it cool Sorry mirror that's gonna be a hard one it's actually a really good chart cool yeah fail faster is the right way to build things almost always a time for that job rant y'all paid a lot of money for I think it's time for that job right y'all paid a lot of money for cool I wanted to think through my core points on here a little more but I kind of just want to rant it see how it goes ah nice let's wing it now Paul I'm actually curious what you guys think Paul uh plan rant or wing it open up notion and plan just go for it Main kill we'll see what you guys think blazing Tech news yeah I kind of want to do a news type thing uh we're all in on uh Axiom for most of our monitoring stuff we don't have much for an alert system Beyond a web hook that pings our Discord and lets us know it's been enough to catch things pretty consistently right isn't Kisa very busy why is she here any metrics uh we're all in on uh segment there makes things very easy got locked encoded said planet he said Planet I I his vote counts like 15x so I try to not think about Sentry and Watchdog too much if I can yeah this is less than 10 off then we're going with open up notion foreign all the gifters want me to plan it job market sucks right now yeah I to be clear the title I put here is never the one that I actually go with it's a more A vibe I have a good vibe in this direction but I agree like the job market sucks it's a good point I should plan this one you don't even have stream audio on oh yeah because you don't wear any of your headphones that's hilarious everybody bully Kisa she can't hear me this is a very good point locked let's do some planning core points Courier Dev Opera say recession sucks startup bubble bursting a bit hiring freezes uh need based hiring means less risk he hires there still aren't enough devs I am out uh okay cool let's figure out a flow for this huh trying to think how I want to order this one honestly I do much better ah I'm actually struggling to think of like how to start this one or like what are what's the the strongest core point that hooks in at the beginning of this video okay I'm thinking so so let's talk about the job market kind of want to meme uh meme about recession like to do a joke about how like we're in a recession but we're not but we are depends on which day of the week it is regardless there are less jobs we're seeing companies like Amazon and Facebook freeze hiring we're seeing companies like Twitter and who else did layoffs recently uh something about that mention hiring freezes Amazon Facebook mentioned layoffs Twitter Airbnb stripe there's a lot oh left did them too as I said who did who did layoffs like 15 companies are listed in chat already mentioned Harry freezes and layoffs it's gonna be a short video I think okay who's most affected who's most affected uh so I want to go to this just yet I think I want to touch on risky hiring risky hires are no longer happening which is startups are more strapped than ever uh the less experimental goals and teams big Coast early career devrel marketing Tech adjacent role's design product managers Etc what to do about it become and dispensable uh yeah I think I think that's most of what I want to cover here okay there's something I kind of wanted to talk about in this rant I'm not sure if it fits or not there's an idea I have it's it's like the hiring point system where it's not necessarily something like I employ or that other people do but it's a thing that I would say exists where like when I'm hiring for a role let's say I'm hiring for a really technical role at ping we need somebody who is going to build the the Ping native app then and I'm looking at a person they have a computer science degree okay that's two points they built something using native technologies that are similar to what we're building okay that's five points they've worked with somebody that I worked with before Oh that's like seven points let's say like in my head I had a threshold of a certain quality level and at levels roughly at 10 points this person has now surpassed that they're very likely to get the job the thing that I think has changed is that the number of points people are expecting to make a higher right now is way way higher up and I'm trying to decide that fits in here or not uh kind of want to do a poll about how long have people been employed here I'm actually really curious how long have you been paid for code never less than 1.5 years I'll say less than one year one two four years greater than four years yeah it's fine I'm curious the five days option is less than one year this is not at one company this is your whole career it's like how how long have you been paid to code for I almost put greater than 10 years but I was curious how much would be greater than five I honestly started like four plus years like that that is like senior plus to me and what I know that's a decent chunk of the audience and I'd love to like break things down within that more but you all come together pretty well I am too lazy to do the time let's usually I have a moderator doing it but I don't have any mods here right now I don't think I'm sure I have one or two actually but I don't know how much they're staying on top of that it's annoying to do all the timeouts I need to automate that it's actually very helpful to see in my YouTube demographics for age are nuts it's like almost half my audience because I think it's like 20-ish percent of my audience is over 35 which is nuts for YouTube like very very old for YouTube which is awesome like I am hyped on that the fact that my young hyped up ass is getting people who are significantly older than me to hang out watch and learn [ __ ] yeah that means I'm doing something right super cool when I compare to other people in the spaces channels it's like they have like 40 plus are 18 or under I think I have less than 10 of my audience is 18 or under it's like nobody so if you are one of those young guys and you're mostly keeping up know that you're special you're part of a small percentage here it makes a lot of sense that my audience a senior with my topics yes but it makes a lot less sense that there are that many people who are looking for and watching senior video content I didn't think that would be a thing because it didn't exist years before and people weren't watching it but now people are down to watch like people who have developed for four or more years for pay are down to hang out here on a Friday evening and watch me rant about [ __ ] that's really different and that's really cool I don't want to pull for ages I already know the age like I have this in my YouTube Studio metrics I want you guys to see all of that actually give me a sec to find the numbers I'm looking for analytics audience here we are look at that uh yeah uh sorry under 18 is 0.4 of my audience this is hilarious this is such a funny breakdown this is not how YouTube channels look also this is disappointing it's actually gone up it was below one percent for a while we're up to 1.6 so I'm actually really proud that this is doing better but it is a little sad that we have as many people over the age of 55 as we have women theoretically it's possible that every 55 plus year old person who watches my content is a woman it does not show ethnicity it does show language subtitles but more importantly uh Regional breakdowns y'all Germans love my [ __ ] huh oh yeah we're at 50 50 subscribed now which is great but it also means I have to be careful about when I say subverses unsub stuff now yeah we're still the majority still aren't subscribed so I can still say that line but it's close oh yeah Brazil obviously my Brazilian folks you guys were like six percent at some point what's going on where are my Brazilian viewers what happened y'all what happened is India in Germany blew up but I'm gonna say that Brazil should watch more of myself because I love all the Brazilians in the community all are the best actually what honestly probably happens all the political chaos and knowing how engaged a lot of my Brazilian Community is y'all are busy certain Norwegians are somewhere but it's a small country they're going to be far down here yeah there's your 0.9 percent from Norway somebody asked how much money do my videos make on average to there's no average it's absolute chaos I'd say like 200 maybe not even like if the video does decently that's 100 200 bucks for ads that's part of why we're doing sponsors because it should be much more considering the value of the audience and how valuable all of you guys are it should be more money anyways still trying to decide if I want to fit the point thing in here I'm leaning now yeah I don't think I'm gonna excalator out this one somebody said then YouTube takes 30 no they don't because that's ad Revenue ad revenue is through cpms which is the amount of money that is gotten from clicking ads and watching and pressing on ads YouTube picks 50 but that's money they generated it's not money if you were paid it's money that YouTube themselves invented by providing and creating a service whereas the money I'm receiving here I could easily receive through PayPal through patreon through any other service I couldn't serve ads on top of my content with ad targeting without Google's Network so them taking 50 of that makes a hell of a lot more sense than twitch taking 50 here and on top of that YouTube has a subscription program similar to Twitches where you can join my member club for five bucks a month and YouTube takes 30 when twitch takes 50. so generally I'm much happier with the Rev splits on YouTube than on Twitch generally anyways okay me about recession mentioned hiring freezes Sirens one moment big Swig of water how are we doing for pre-roll we got six more minutes so that'll happen mid rant that's fine locked encoded with 25 more gift subs thank you man hope that you're feeling good about the prep the sub only Ranch I uh it's hard to justify the sublime rants it's not making content I'm gonna just wing it and if I feel like the point system makes sense as I'm on the rant I'll do that but I'm gonna pull my notes up and just full cam it because that's easier and I want this rant done hitting that marker button rant time am I out of focus I'm totally out of focus haha better enough for now we'll go with it anyways let's talk about the job market I think we're in a recession right now but we're not but we are but we're not but it depends on the day of the week what phase the moon's in I don't know I don't care all I know is lots of companies have stopped hiring everybody from Amazon to Facebook we're seeing lots of companies doing layoffs as well Twitter obviously is of recent Airbnb stripe lift so many more all great companies that have lots of talented engineers and it's rare the people being laid off are being laid off because they weren't bringing value it's because they weren't bringing enough value right now and calculations and decisions were made that were within the amount of risk the company could take at the time and they no longer are it's a sad point that we're at but we have to be realistic about it and how we as Engineers navigating this new changing Market behave and make decisions I have a piece of advice I've given for a long time which is always be interviewing every six months I think there's a lot of value in doing an interview Loop keeping it as quick as you can ideally especially if you're happy with your current job and don't plan on moving but generally speaking having a good idea of the market well companies are hiring what your value is and where you could possibly work is super valuable I think it's a great way for you to better understand how you're positioned and also the state of the market especially right now when things have swung in a not great way the two Trends I'm seeing right now are in startups I see much less hiring going on in general obviously startups shouldn't be hiring more than they need but with the very I hate to say easy money but the state of the startup world for a while was that we could raise money without too much effort and that allowed for us to do a lot of things we couldn't before and hire a lot of people we didn't necessarily need we've even been benefected by this at ping where we've made the team a bit smaller since the recession and since the market has turned but because of that a lot of the types of hires that startups would make a lot of the earlier career people a startup could reasonably bet on if they knew what they were doing and had proven themselves on GitHub a lot of those risks and a lot of those roles have dried up fast on top of that big companies are less likely to take risks as well I know at twitch a lot of the teams I was on were operating like a startup trying to prove out some new vertical like what if Marathon content and TV shows worked on Twitch what if game shows or music or karaoke we would build different products to solve for different potential use cases and I would consider a lot of those things to be a lot like a startup within a company most of those opportunities are dead right now as the hiring freezes have hit and companies are changing the layouts and architectures of their teams and even laying off as much as half of their employees we're seeing those types of experiments drying up with it and with that a lot of opportunity for new hires going with it I think the most affected people are going to be early career devs because let's be real early career devs are a risk it's usually going to be six months to a year before you're getting a lot of value out of those early career developers and that's fine like fresh out of college I took way more than six months to be useful but I like to think after those six months I was very useful and the four years twitch got after that were very useful for them as well I think early career hires are a great exchange for a company to make if they're aware of the risk it have the opportunity to grow that engineer into one that can be productive for the company but that's an expensive risk that I'm seeing less and less companies making right now I'm still seeing a lot of companies hiring for senior Engineers senior technical managers and anything with senior Plus in the title but all those Junior and early career roles a lot of those internships are Vanishing not because those employees are too expensive because the time commitment and the risk associated with those types of hires is just not worth it in a market that's as uncertain as this one so what do we do about it a tough question I can only really give advice to individual way to put this the best thing you can do as an engineer is make yourself indispensable because when you do get that first job and you do have any job you should bring in as much value as possible to the company and not in the like adopt Technologies nobody else knows how to use sense but in the you take ownership of things you solve problems when they happen you're on top of [ __ ] and generally speaking the association people have with you is things getting done and things getting fixed and if that's how you're known and that's the vibe you have given off especially if you have a GitHub full of you solving problems and issues with other repos that you helped close or chat about if I can look at you and I can look at your contributions and conclude you're a person who solves problems that makes you much easier to hire even in a market like this one the more you can do to be indispensable on the things you work on be it at your job right now at an open source project on the side or even just helping in your program at school because connections and value are what are going to get you your next job right now I cannot imagine being an early career Dev right now just in general it's gonna suck but if I was an early career Dev without a lot of friends in the space god that's that's terrifying and as much as I hate to say go spend a bunch of time on Twitter when you should be learning how to code and building cool [ __ ] the connections you make on platforms like Twitter like the Discord Community like hanging out on the YouTube comments here those connections and those relationships you can build will get you to talk to the people who can sneak you into those roles when they randomly pop up generally speaking though cold applications right now are gonna suck and we have to be realistic about that as we recommend people who might not have ever even considered code get into it right now the Market's in a weird place and getting a job in Tech has not been this hard in a long time so be realistic about it do your best to know where you are and how you can bring value to companies either the ones you're at now or the ones you want to be in the future and do your best to make as many connections as you can to as many people as you can by bringing value and friendship and other whatever else you can to him it's your goal to be seen as valuable to as many people in the space as possible and at that point you won't have to worry as much about jobs anymore I hope this was helpful this [ __ ] sucks and to anybody who's in the market for the first time right now trying to get their first gigs sincerely my heart goes out to you this is a tough grind I wish you the best of luck keep working keep doing cool [ __ ] this will calm down this will work out I firmly believe we still don't have enough engineers in the space for all the things people are trying to do but you can do this I promise really appreciate the time as always thank you guys for watching if you haven't subscribed yet it's a really good opportunity to do that there's a little button in the corner there for that YouTube's probably recommended a video up here as well thank you as always let's chat more in the future peace nights that was a fun one that marker button nice short valuable rant move this guy over hit here I saw a comment about privilege in chat implying the fields of meritocracy oh yeah more RPI folks good stuff my co-founder is also RPI Mark he's also my roommate I I'm thinking through this one and I think I made it very clear especially at the end that the connections you have are more valuable than anything else and one of the best ways to make those connections is Merit you don't get a job just through having a cool GitHub but you absolutely get a job by making friends because of your cool GitHub the connections you make through all of those things okay this is just wrong that I don't agree with at all so otherwise some of the most indispensable people I've worked with actually the majority of the essential people I work with I think about it we're not white dudes yeah almost all of the like people that can't be fired because of what that would happen to the company that I can think of three of them were white dudes and I could think of at least seven that weren't from the teams I've worked on at least yeah I really don't want to like I am I I have a lot of videos where I talk about like inclusivity especially like inclusivity of hiring practice I think it's super super important in my interviews kind of suck rant where I [ __ ] up the audio because before I knew how to do anything and I didn't know about the OBS Final Cut bugs so the video is bombings the audio [ __ ] at the end of that video I go on a rant about how important diversity is in hiring specifically because marginalized folks like like if I'm interviewing two candidates one's a white dude one's not and the resumes are otherwise the same the person who's not a white dude had to work way harder to get there just factually that's on average I should say any individual case any individual case but on average a non-majority person to get the same qualification has to work harder and you should absolutely be conscious of that as you make hiring decisions because a lot of those people are Hardware workers and will bring more value and often become more indispensable as a result of it now you could still make those connections I you know I I literally just said that so I'm gonna deny your message well because you're just trying to wait I want white trash is fine people can call me white trash it's just they can't do it when it makes no sense to login code to 25 gift Subs Jesus you're over 400 now what the [ __ ] man that's a lot of noise outside I'm sorry they put up a speed trap outside my apartment recently and all the bikers have taken that as a challenge to see who can get the highest score on the speed trap thank you yeah that's absolute Madness you guys can't hear it I I saw it on the mic lighting up so you absolutely heard it you can't hear it okay that's good to know at least yeah I know they were calling themselves white trash but uh same principle yeah it's I was literally talking about the thing they were complaining about like on their side with it but they were aggressive about the way they said it not super fun Jesus what the [ __ ] what okay Leo [ __ ] Christ thank you man [ __ ] uh Jesus thank you man this has been quite a day for the gift Subs what the [ __ ] can I see the chart how do I even get to that right now can I I can't that's annoying uh a boost train is how the [ __ ] is a train not going after a hundred gift Subs that's insulting Jesus how many are you at for the Channel History even 247 for the history not quite locked in coded level but still [ __ ] absurd Jesus Christ Jesus Christ y'all we're about to break 2K Subs again I didn't think we'd ever see 2K Subs again I didn't think I streamed enough [ __ ] Christ yeah funny enough Alejo actually hit me up for uh possibly taking some of the Twitter employees that are laid off for backing positions and I do need to hit you up your CEO actually bugged me about it too so uh I will do my best to throw some people your guys away it's the least I can do y'all have been early and eager Theo supporters so it means a ton yeah that's a fair point I I'll take the L if if white trash is something I can get moderated and banned for then fine I honestly use it to describe myself I part of why I dress so fast or so fancy is to leave behind that part of my past grew up in a farm town as a redneck sure a lot of us did I'm sure a lot of us still even identify that way but I've tried my best to not let my redneck past keep me from doing the things I want to do or keep me from being the person I want to be it's just just a different background and I'm much happier as a city kid so same as everything else I said ice make connections make connections to lots of people in the space the more people you know the more value you bring the more likely those things are to happen there are dozens of people in my community who just were apparently like obviously doing really cool [ __ ] be it the stuff that I saw them posting in the Showcase Channel or contributions they were making on GitHub issues that I was reading like you notice the people who are involved and know what they're doing it doesn't matter who the [ __ ] they are or what their background is are people who are white dudes more likely to be in those positions sure but people who know what they're doing stick out very often and the more you can be in those places so you can stick out the better okay and the Boost train just skipped straight to level 12. what the [ __ ] I don't get how any of these things work well thank you kablino for the tier one sub think you're the one who triggered this really appreciate it also viewership is going up right now that's interesting I thought it was going to go down for a while do we have a raid or something that I missed I haven't missed any raids right I haven't turned off the filters for that where the hell are these viewers coming from I appreciate it regardless another five gifts from Kevin God damn y'all are nuts that puts us is that 100 on the hype train it's 100 for this level or is it over and [ __ ] damn I've never gotten that many bits before normally bits are just used to troll I appreciate that a ton man 2K recommendations so far I thought it was 2K total if you hit the top level what I don't get this UI at all okay there we go that's weird that changes a bunch I helped I picked half the team for the original hype train hack week project that didn't ship until three years later good times points of making connections to Young Dev hang out here be involved in conversations ask good questions be in the Discord just be involved don't be scared to ask questions and don't be scared to reply to things that are exciting to you even just a dumber pie like if somebody who you let's say there's a project you really like let's say you're really into felt so you look at the people contributing you find their githubs you find their Twitters you follow them on Twitter one of them tweets something that they're changing and felt that you're really excited about replying oh my God that's so exciting I'm genuinely really hyped for this great reply or hey this is really exciting I'm curious if it will work for X use case still pretty solid reply I necessarily think golden handcuffs are a thing you should avoid it's a thing you should be cognizant of as you make decisions it's a good idea to make a Twitter just for Dev stuff I would say yes especially right now in a market where Making Connections is more important than ever having accounts on the places where people make those connections is very valuable I [ __ ] on LinkedIn more than anybody but I even have made valuable connections on it and I try my hardest to avoid LinkedIn I've still met people who brought value to my life and my company through Linkedin and I hate that about it but it is like that sadly I like Twitter way more I've gotten way more value out of Twitter than almost any platform highly recommend it cool place in rep to all of the super hard working employees that were laid off because they they made a great platform and not having them around is gonna suck I'm scared of what's gonna happen to Twitter but it's still super important thanks for all the input very close oh [ __ ] congratulations man first front end gig that's huge especially right now Landing a gig your first gig right now is tough and it means a ton that you're getting there you're hanging out a place like this yeah more people who hate LinkedIn but get it Twitter space are super fun I've had a lot of fun from those never seen a Twist chat with that many long messages ooh Eric Association we're being the best version yourself won't help or minimize your harm when denying it good take as always Eric for those who don't know Eric I need to shout him out way more like we have a lot of really cool people in the community I need to get way better about opening this up and not accidentally leaking people's circles early apologies for anybody who has me in their circles I should make an ALT account for that uh Eric's the [ __ ] and you all should follow him super cool designer I'm obsessed with gas zone is I think this is one of like the coolest websites I've seen anybody Post in our community it's [ __ ] beautiful like genuinely a stunning website yeah the [ __ ] cigarette that burns as you scroll I'm covering it a bit but it's so good ah yeah shout out Eric great dude definitely check out the stuff he's building one of the people I Look to whenever I'm trying to get inspired for chaotic new design stuff and he's also a very talented engineer which is a fun thing as well it does good to have you here as always man it's always cool specifically having people who like come from the design world that get into code because if anything I was the opposite I came from the code world and forced my way into design and still don't know what I'm doing so it means a ton to see someone who does Elijah what the [ __ ] I haven't even had a chance to thank all the other subs trying to beat the previous record oh [ __ ] I appreciate it a ton man we have Kev Pro with the resub always good to see you here Kevin haslad with the tier one Keon with the tier one both that you do in your first Subs appreciate that a ton to geo with the prime sub first time too means a bunch look at that Alejo 20 gifts say Jesus 267 gift Subs in the channel oh no are we gonna lose out here 10 seconds left [ __ ] is that really where it dies yeah died at level 13. damn it's nuts that a 20 like 20 Subs doesn't even clear a level anymore that's nuts that's absolutely hilarious and you're like just barely missed the saving of the hype train God these animations are a little much boosting with 2 000 recommendations which is clearly happening is my viewership's gone down I appreciate it regardless man so close I love that it was literally seconds later but that's how it goes oh pre-rolls are on I'm probably gonna wrap up kinda soon so I don't wanna yeah I can squeeze one more short rant and I'm gonna run a 60 second ad so that we're back in just a second I'm gonna go smoke then we're gonna find some short Ranch to go and I want to find something good should pick it first considering getting verified in Brave Rewards so little money but I should consider it your level 13 is 30 Subs damn it so close weed don't worry I don't smoke cigarettes anymore up in tobacco-free for a long time oh Dev Twitter is absolutely toxic but every every thing that is that big is gonna have toxic Parts you can find parts that aren't toxic there's some really cool communities on dev Twitter and there's annoying people there too but if you stay in your circle stay in your corner and just see cool things and talk to people doing them the main thing that's cool about Twitter is this is oh I I have my rant for when I'm back how I keep up with everything AKA follow people not projects there's our last rant for the day I'm gonna give this one when I'm back because I think it's super super important and I'm pretty sure I can Wing this one because something I think way too much about so I'm hyped for this rant we'll be back in like two minutes max I'll probably bring a beer because I want a beer see you in a moment that's my favorite beer Corona Medela depending on how I'm feeling on the day I rotate between the two I'm out of Corona so I'm gonna go grab a Medela no Ken dolls is the [ __ ] we don't know Kent Dodd slander here he means well he does well he's a very good person doing really important things we like cotton here good dude no worries to be clear it's like there's been a lot of drama especially like with the remix world but I always wanted to say I have a lot of respect for Kent great dude we're actually probably gonna have him on the show soon and he's genuinely trying to make the web dev World better and I do my best to have nothing but respect for people doing that he's not like he's played with a lot of influencer ideas and things but I've done I have done way more click bait and questionable marketing strategies than kentez I can't imagine any reason for hating Kent that wouldn't apply tenfold to me yeah Kent's a good dude he means well I like him a lot oh I always need to update Chrome the Chrome's always needing an update I probably shouldn't say that because my IP addresses leaked enough time someone's gonna hack me at this point but yeah and be right back we are back importantly we're back with beer that Focus going right good enough I lost Focus like immediately after also I feel like I can't tell how focused things are at 30 FPS it's like harder to know haha that's a good lock yo milky what's good to see you here man good [ __ ] looks like I missed even more subs Alejo gifted 54 more subs what the [ __ ] what when I was gone what halfway 321 total [ __ ] Christ or is that just to get me over 2K Jesus Christ man I I appreciate y'all a bunch what I think about the Mona Lisa font Mona Lisa is fine I just I don't care that much about fonts for coding I like Menlo a lot what arm I'm using the uh Elgato arm it's actually really nice it uh it took me a while to figure out where to put it on my desk but like I'm gonna mute so it doesn't make much sound and kind of just put it wherever and it does the right thing which is really valuable for me like I move my mic around all over the place I'm being able to just like be here or here it's it's useful for me I didn't think I would like it this much and I'm I it's annoying and it like wobbles you even see it bouncing right now but [ __ ] it's so useful it also has a little extender so it's like a foot up so all of the area underneath it I can like put things under not worry about hitting them really good mic arm yeah the pink Chan love Emoji is totally underrated Kisa you are right most of our emojis are underrated Yep this is kind of why I did the rant I did uh TM I cold applications aren't going to work right now period it's going to be very hard to send an application to a company and get a job that's just huge risk the better the more if you can get referrals to companies and talk to people who are working there and get them to build trust with you before the interview starts it's way more likely to go well for you so building those connections is super valuable also first time chatter who's already subbed hopefully it's not a gift sub otherwise uh giving you free advice for no reason Arctic query is very good if you're already using Redux the Redux toolkit is fantastic if you're on Redux and you want to keep being on Redux but if you're starting a new project from scratch I do highly recommend checking out react query as an alternative to it and seeing how long you can go without adopting like a deeper State machine yeah cold apps are always going to look like this especially right now where so a few companies are hiring and taking those risks I've helped a few juniors in the community get jobs but it wasn't because like they hit me up asking me for a job it's because they stood out I asked them what they were doing for a living they're like oh I still work at a restaurant or oh I'm in school I don't know how I'm gonna get my first job I'm like oh [ __ ] you've contributed so much to create T3 app you're like the person in the like questions board answering [ __ ] and don't think I don't notice I keep a close eye on questions and I've seen Barry learning a bunch every day as he answers questions and people help correct things I've seen lots of people that are consistent names popping up in these things I I know y'all are there I keep an eye on who has been helping where and what types of advice they've been giving senior Gleason I know you were hopping in a bunch John back you've been all over the stuff and when I see people who are being helpful Roy is the [ __ ] Legend Roy is unreal one of the like most helpful people I've ever seen it is like the easiest recommendation to make to other companies and when I learned Roy was struggling to find a job I made it a personal goal to fix that because holy [ __ ] [ __ ] he's one of the most talented devs I know and it just happens that he had never had a job before the team and you love your current working team uh depends on if the offer is giving you things where the risk is worth it I would say ask if you can meet the team ask if you can have like a lunch chat with some of the people who you'd be working with every day try to get a gut feel on that because it sounds like that's your biggest concern is that you know nothing about them ask to see if you can learn more ahead of time like say that and honestly you'll get such a good response from that because the response will either be oh yeah having a good fit with the team is really important to us we can absolutely schedule that or that's not really our thing we need you to accept the offer ASAP because if it's the prior even if you don't do it just knowing they care enough to is a really good signal and if it's the latter if they say and we're not into that you know they don't care about the work culture much and the team fit culture much dumb the [ __ ] off I I less agree with this Melky I think right now that the effect of the market has largely set in there's a lot of how do I put this wording for this is hard if you were gonna let the market affect your hiring strategies you probably already have I can't imagine there is a lot of companies that are hiring right now that will be laying off the people they hired right now in the next six months that feels very unlikely to me and if that did happen it would be a big enough news story that you'd be able to get a lot out of that that said a lot of this depends on how long you've been working at your current role and how well connected you are in the space you have to be calculated whenever you take a risk like that if you're switching roles and you don't know what the next job could look like if things go wrong that's a really big risk to take but if you do know what that risk looks like and you have a bunch of friends who are at other companies that will always need stuff like I have a friend that was let go from Twitter who is really deep on safety security and authentication technology for Twitter helped save them a ton of money and secure a bunch of [ __ ] and he knows people like me who worked on safety at twitch and as such if things go poorly he can get a referral there even though twitch isn't hiring very aggressively they will always be hiring for people who can make twitch a safer platform especially if they can lower the costs for the safety tools that are very expensive and because he knows these types of people it's not as big of a risk for him to do a lot of job swaps I'll say that for seniors it's not better than ever right now I've noticed like I used to get all sorts of like people trying to get me in their interview pipe like for a day it's down to like three a week now so I'm out of that is I've now branded CEO people know better than to hit me up for their senior job role on some weird front-end project but there's way less of that overall I found that roles are less traditional like the roles being filled right now are not the ones that they're spending a lot of money recruiting for it's the ones where people have a connection and a friend and are able to be introd and able to get those roles as a result I wanted to do this rant quick this should be a short if I pull it off right let's do it last rant I think this will be a useful one now I keep up with everything right time hit that marker button switch over my auto focus again Jesus Christ camera weird looks very in Focus but it didn't auto focus on me to do that there we go we'll go with it anyways oh God that was a loud pop God the human body is flawed anyways to keep my notes up hey Theo use all these crazy new technologies how the hell do you keep up that's so much different [ __ ] well to be frank I don't follow projects I follow people you'll quickly learn as you keep an eye on how things change over time that the same people tend to be really involved in a lot of the different things that happen that are cool one great example of this is Ryan carniado the creator of solid.js I've been keeping an eye on him since I first saw solid pop up on Hacker News and man he has consistently been a source of really cool new things way before anyone else had heard about them and by following people like him by spending time on platforms like Twitter as questionable as it might be and trolley as it often is keeping track of what the people who build these cool things are up to is the best possible way to know what's going on in the tech World it has been the best thing that I've learned I learned this from the music space where you follow the musicians the mixers the engineers who make the music you like sound good and if you do the same thing in software Dev you will find really cool things way before anyone else for me as a YouTuber that's useful but for me as a passionate engineer it's way cooler to get the watch the way these things are built so if you're wanting to keep more words if you want to be more on top of all the cool things happening in the JavaScript world the trick isn't to watch those projects obsessively or to subscribe to every newsletter or to watch all of my videos it's to find the people who are building and doing the things that are the most exciting to you and watch what they do when a project does excite you find the people who are involved find why they're involved find what they care about follow them if they follow like things that you like you'll be amazed at what you find and I guess to that extent this is a cool place to be follow if you haven't already we talk about a lot of cool stuff check out my Twitter t3.gg and join our Discord t3.gg Discord thank you all that was a nice short and sweet one that should be shortable uh it'll be fun to edit later oh melon said it for me for this that's cool [ __ ] yeah that reminds me one other really cool thing happened uh I want to shout this out notifications uh I don't know why the one that I saw earlier isn't here uh here it is Ryan really liked the question I asked about application life cycles and how remix thinks about them and what they consider their role in an application's life cycle the center stack stuff and I really liked the reply here goes as far as cred over HTTP in the front end concerns drops you off and then his HMR comments which also I love this he he uses Veet in parallel to remix for the HMR for things that aren't server side which is hilarious and I replied I wanted to chat about this with him because this sounds very up my alley I love these types of hacks they're so cool so yeah it's been fun engaging with the remix guys recently I've definitely felt a change in tone and I I don't think this is just their engagement with me in general they have been much much friendlier to interact with overall lately I really appreciate this I think having remix is part of the like greater web dev Community pushing things forward is obviously beneficial for everybody and yeah I'd love to have you on Ryan I'm hoping to have Kenton soon as well really cool stuff and maple you are the sole person who deserves the credit for making me not ban remix from this chat so uh yeah shout out to Maple for very slowly convincing me what are my claims for my Advent of code abilities my claims or that I work really hard and I can break top 1000 pretty often especially for my part twos because I'm good about thinking through problems and where they could go I should find my average rank so I am curious like what the average is of all of these that'd be a fun Advent of code problem funny enough but yeah I'm proud of my numbers here I'm in the top 1000 and I'm not a competitive programmer so for me to be in the top 1000 of a thing I'm not really competitive in yeah I'll take it I could be top 1000 CEOs yeah I'll take it for those who don't know Advent of code it is a set of programming challenges where one comes out every day from December 1st to December 25th at 9 00 PM Pacific Standard Time they actually looks like they might have changed it uh Advent of code no but still midnight EST which is 9 pm Pacific time and each of these problems is really interesting twitch does Advent of code uh twitch staff did it and I would win every year and I was very proud of that I worked very hard to maintain my first place position on that leaderboard it's one it's probably within the hardest I worked at twitch was going all in on Advent of code yeah so yeah the way the problems work is you get a first problem which is usually something pretty simple I should say pretty simple they get hard but the first problem it's less about like knowing every word and catching the parts that matter so usually what I do is I scroll and I look for the white text because you have to solve these as fast as possible I don't remember the wording for any of the problems because I'm just looking for what it's asking for so the number of times a depth measurement increases okay so I have these numbers a bunch of numbers here I want to know how many times it increases okay keep scrolling oh here what it increased here it increased here it increased here decreased there so we don't care it's like okay I know how to do this so then you get an input it's a unique pile of numbers it's a giant text file they have a link for it at the bottom so you open that you write some code you pass this as an input to that code an answer comes out and then you submit your answer and if it's correct you unlock part two part two takes some aspect of the first problem and pushes it really far so depending on how you wrote your solution this will either be really easy or really hard so here's part two considering every single measurement isn't as useful as you expected there's too much noise in the data instead we're going to consider three measurements sliding window okay there's the keyword I look here okay these three these three that's what these letters representing okay so I need to sum compare these three to the difference of these three and if you've done a lot of Advent of code you notice very quickly oh this and this are the same so I can remove those and just do B minus a and that's my answer I can skip well I guess or I index 210 minus index 199 or I guess that's those index 3 minus index 0. better and with that you're gonna have a very simple solution if I go to my ASC 2022 repo nope uh because I spelled my name wrong still know I'm gonna look through my GitHub quick and I don't want to scroll myself going through my repos so too much [ __ ] in there oh 2021 [ __ ] Christ thank you guys and that was still not it God I have so many good everybody was that I'm just now oh it's AOC Dash 2021 of course it is there we go found it so I do these using Dino because it lets me write a typescript file and run it really quickly I don't even have like a readme on how to run them so we look at my solution for day one part one I read a text file I split in parse I have increases which is zero last depth such as number undefined in depth step four each last depth is whatever increase got a nice simple not the best but it works then part two I realized I want to keep track of the number three away so I did a for Loop where I zero I is less than depths.length minus three so that we don't go over I plus plus and I compare I to I plus three so three indexes later so I can skip the two in between because they're shared and this is a super short solution it's actually shorter than the solution for the first problem but works for this yeah and this is advent of code super fun you write a quick solution you have to submit your code or anything I open source because it's fun but the goal here isn't to write the best possible code it's to have an answer to the problem which is like a number you submit as fast as possible also hi Kisa I'm happy you can listen now shame that I'm probably going to uh be ending the stream soon thanks for stopping by Ann appreciate you a bunch do I did I used to do leeco before funny enough I didn't get good at leak code until very late in my career because I hated doing it I hated Lee code so much Advent of code is something I got into like a year after getting my job at twitch and it helped get me really into leap code I enjoyed it so much that I just kind of went all in on it and now I'm really good at least code I don't know the names of the algorithms or anything but I can solve the problems really quick because of Advent of code does as fast possible include automatically downloading input and automatically submitting I copy paste for my submissions because I don't know if the submission is good or not until I'm like thinking about it a bit so I semi-automate the download for the text input but I do not automate the submission I have not studied linked lists or queues in a very long time I did not know them particularly well when I got my first job even though I was a back-end engineer rad I think I have had my fun this was a four hour stream on a day I don't normally stream let's figure out who we are rating no homies that I like immediately feel obligated or oh arrayed to uh somebody answered the Twitch app uses react native God I wish it did I fought really hard for it too I built a whole app from scratch that it was supposed to but uh that did not end up happening hey I work with Melody important uh from Project Melody mid Melody bullies me on my Beno wad thumbnails I will not be sending you guys to Melody as funny as that would be this oh she speaks Spanish [ __ ] I'm so hyped that there is uh an engineer V tuber I'm gonna follow her and figure out if she speaks English in the future I don't want to send a bunch of people to a Spanish stream from an English stream though I've had that problem before gotta be careful with that is anybody who I know that hasn't been rated in a while I owe the raid too I think I rated team bash before I think they were fun the vtuber Takeover yeah it could also be funny to raid Bob Ross I was considering that honestly I just raid Griff let's give Griffo raid Spanish Community loves me I Spanish takeover do we raid the Spanish streamer I [ __ ] it let's do it let's take the risk YOLO we haven't taken a fun risk in a while we're doing it nobody expects the Spanish Inquisition this is gonna be fun thank you all as always for a great stream make sure you tune in Monday we're going to have a very fun show with the jamstack conference stuff uh be there for that not sure I think Wednesday we have a stream coming too lots of fun content coming be on Twitter space in an hour as well good seeing you guys as always see you on Monday peace nerds




## STREAM VOD How ONE DEV Built For EVERY CREATOR - OTTOMATED INTERVIEW - 20220721
nuts thanks so much but yeah uh for those who don't know you UT what do you think is the best way to quickly explain you uh well I'm automated you can call me auto if I know you personally which is nobody in twitch chat uh so call me automated I suppose um uh I work as a a full-time developer for lwigs Mogul moves company uh and I do like merch sites and stuff I also do a lot of freelance uh yeah I'm I'm a the dev on Twitch good [ __ ] I have been so impressed with your like history and come up it feels like you always were focused on making things not necessarily the like getting a job learning getting all the credentials type stuff that I tend to see a lot of being obsessed over especially with newer devs I'd love to hear a bit about how you got into Dev and how you got so focused on building things yeah I'm I mean they're really interconnected I'm really just a learn by doing kind of guy uh I actually my first my first program was on a TI 89 titanium calculator in its basic you know semi basic language TI basic I think it's called Uh I made I made a a program that would countd down the seconds until math class ended uh very proud of that um so I've been and that was in like sixth grade so you know six or seven years ago now uh and yeah I've just been doing I've been learning as I go ever since sorry my mic button froze for a sec my CPU is unhappy with me right now Shing yeah I do this to myself yeah anyways I sorry yeah I don't know I was just going to say I think that I I've told this to my community before but I think that the absolute only way to become a you know a really good developer is to just buy to find the things you're interested in and Learn by working on those instead of you know just following tutorials and such uh that's my that's my view anyway yeah I think that that's very much the mindset you're going to find a lot of here as well I'm really big on just build [ __ ] like that is the job and it's so easy to fall into tutorial hell not necessarily because there is so much to know but more because there's so much you don't know and you don't know you don't need to know like until you've built something which knowledge is valuable is a lot harder to understand and identify and without that context of I'm building this thing I don't need to know all about typescript generics I just need my button to work on my app without that it's so much harder to know what you need to know yeah I totally agree I think uh the way I've seen myself learning as I like retrospect on it is you know I'll I'll I'll have a problem I'll Google it I'll find unack overflow I'll copy the code and then I'll continue and then the next time I have the same problem it be like oh didn't I do that I forgot what the code is and I just Google again just copy the same code after like three or four times of you know searching the same problem I eventually now just remember you know I've I've now gained the the knowledge of what it works or how it works in my brain I don't have to you know just speeds you up it you you you learn like that and you don't have to yeah you don't have to learn every single detail because you naturally learn what you're using right yeah absolutely I think that that's such an underrated part of programming is the best way to learn it is to screw up at it I I take that philosophy with a bunch of things I think it just comes from my skateboarding background like you don't learn a new trick by sitting in class reading a book about it for eight hours a day you learn how to do a new trick by picking up a skateboard and going to try falling off and then you know continuing the more willing you are to fall off and the more prepared you are to eat [ __ ] the faster you can succeed it's a great quote yeah totally totally agree with that I I think your mic's a tiny bit low gain on your end if you could bump that a bit it might help a bit bumping how's this way better great fantastic I have to I always have to bump it up to like 150% in my my Linux audio mixer and then it resets itself every time I have to plug in it again didn't know you were calling in from Linux uh good [ __ ] sorry that it was too loud I just you boost it on my side too so I knocked that down a bit should be good now uh quick sound check y'all good how we how we sounded better great we're good to go cool so on the topic of streaming and all of these challenges something that always stood up to me is how early you were on Twitch like it felt like you took content creation really seriously really early huh maybe I mean how what I mean I've only been well I guess I have been streaming for [ __ ] two years now which is which seems crazy uh it doesn't feel like that because my streaming career is kind of changed drastically throughout the entire thing I started how did I start I started like playing Among Us in the early Among Us groups with like lwig and you know xqc uh and then that turned into what Minecraft coding working with the turtles uh I feel like when I started out it was I was less of a a developer on stream and then I just discovered that you know there's enough of an audience and I enjoy doing it enough that I can make it my main thing I think that's pretty cool really interesting so it sounds like there wasn't inherently much overlap between the dev stuff and the stream stuff you just were into streaming and into Dev and just kind of Fus the two yeah I I think that's true Al but I also think that my initial growth I mean I was extremely lucky uh my initial growth only happened because of Ludwick because I was already known to ludwick's community as a Dev right they they knew me as a developer they like I was like oh Auto super cool developer for lewig and so when they saw my stream I think that's how I got my initial you know bump of viewers uh and I wasn't necessarily yeah there the overlap between streaming it was always there but it just wasn't as pronounced as it is now and basically the only stuff I do on stream is is coding really interesting I I don't know why in my head you always kind of started with the code side but it does make sense that you started in the gaming World especially with the like crazy Among Us stuff that you were building I still remember the Lily Pichu like goofy hot tweets way back oh yeah man I I'm some I somewhat miss those days somewhat I'm I'm glad that I'm not still trapped in that space uh but yeah I I the I just I'm just remembering back when I was playing Among Us when I died I would like pull up a a vs code and the other OBS scene and I would work on something for a couple minutes and then I would you know next round starts I'm back in Among Us those for the days I I do kind of Miss among us but man that game ruined some friendships and friend groups even I it didn't I feel like it didn't deserve to be as big as it did but you know it was what it was I feel that's fair I I wish more indie games got that attention rather than like Among Us was too big I think that a lot of other games weren't big enough but that's yeah give 10 games on10th of among Us's popularity and the world would be a better place yep absolutely agree I yeah I trying to find I'm struggling to come up with an elegant way to Pivot more into raw Tech because I'm super interested in the way you build a lot of the stuff you've Ally built been very solo like you're the main if not only Dev on a lot of the projects you build and I think that you've had the unique opportunity to try and experiment with a lot of different technologies that might not be the things we use every day at our jobs but are things that interest a lot of the community so I'd love to hear a bit more about like the tech you use and how your solo work affects your decision- making yeah when you're a solo Dev and especially if you're like making it a project that's a a one-off thing for one one stream you don't have to use a you know a production ready framework right you can you can find something you can experiment with it and it's not it's a it's a you know it's a bunch of small projects that can all you know help you discover new new tech um and I I I mean my go-to production Tech stack has also changed drastically in the two years since I uh since I started streaming and started working for for lwig I I think my so how I got to know lwig I think we could talk about this more in depth later but I think I was using Create react app back then uh along with like material UI or mui it's called now right oh all of my community's trigger words yeah exactly sneak vanilla JS in there oh I've done vanilla JS all right I that that I mean I have many years of vanilla JS uh what a what what's it called uh Express and like pug uh in chat he used that exact stack for possot v2 oh my gosh yeah I I mean it's definitely I think my it's my text stack itself is also always always changing right because I I didn't I didn't I didn't look for something like create react app right I just looked like I I just looked for I I heard of react I Googled react I was like oh you can create a react app by doing this right uh so my my first I often like learn a a text stack like that that I you know hate now because it was just the first thing I found and I tried using it uh for a while and then I found something else like nextjs and I was like oh this is just better in every single way shape and form so and I adopted that into my go-to stack Etc yeah my computer is unhappy cpui so I'm just going to close a bunch of [ __ ] to try my best to not have the stream die because of this so if I leave on PING I'm still talking to you on Discord so I can still pull your feet in so don't worry about that but yeah okay yeah I just I saved 50% of my CPU there rad good job sorry just watch your your stream and see it's fine yeah it should be fine now anyways sorry about that I am absolutely fascinated with how you ended up where you are like create react app to flutter to spelt kit to kind of like react kind of T3 stack your own hybrid thing I'd love to talk about both like the the flutter Deep dive that we're going to have to do as well as the like what you're working with now and what parts of like the stuff we talked about you've been adopting yeah I think I've adopted an awful lot of your suggestions a disproportionate amount of your suggestions so thank you for that uh you are the probably the most reliable source of you know framework sources that I found uh Prisma instantly Planet scale uh I'm using you know both of those and trpc and Tailwind uh all of those four upcoming project that I don't think has been leaked yet um really cool to hear have you good sorry it is you go you go I was just going to ask if you've played with tier PC with spelt at all Yes actually the same same project is is using trpc spelt kit which has you know 200 weekly downloads but uh it works pretty well I would say it doesn't have the added you know awesomeness of react query or what's it called now tanat query over it uh but it it's it's working you know you still get the trpc benefit still better than just raw Json without type safety for sure I think your mic's gain might have went down again uh if you it it just did yes it it literally did I have the mixer open and the slider Chang itself at some point mute yourself in ping and it will hopefully not do that okay okay I think I got it uh okay sorry about that yeah spel kit uh I mean spel kit itself is is fine uh definitely not amazing but uh trpc you know it works on spel it's it's an improvement it's great as for the tan query stuff V4 literally dropped a few hours ago I'm super hyped and the big change with St V4 for tack query is that it is no longer framework specific and there are already bindings Force felt in the works so in the near future there would be a trpc tanack client that works in all Frameworks that support tan stack yeah that's hype yeah yeah I'm super excited I found I mean trpc it really shines when you have a a super complicated app that you need to be able to you know sometimes I'll be fine with literally just writing a single API endpoint and that if that's all I need doesn't matter that it's not type safe because it's you know it takes 5 minutes to write rather than the you know 10 minutes of installing trpc and setting it up uh and I find myself using spelt more for you know small projects like that that only require one or two endpoints rather than you know big production level projects which I'll use you know nextjs for very interesting so it feels like the size of the project is a big in like decision- making factor for which Tech you choose yeah yeah definitely uh yeah the size of the project the size of the the you know the user base like for a for a merch website even though that's pretty simple uh only a couple pages and not a lot of uh you know API interaction I will still use uh nextjs for that react although maybe that's just because I've already written like templates in react very interesting actually I I found that I'm much more decision- making based on the I don't want to say like the size or even scope but the the specific needs of a project and I find that I'm almost always going to use Astro because the thing is mostly static or next because it isn't and I don't have much of an in between myself anymore interesting Astro is only for does Astro work for dynamic sites or is it just static I haven't used it it's Astro is really interesting the it's built for static like Astro itself sends HTML to the user or Json with their new serverless stuff but it's very much focused on sending a constructed HTML page to the user but within the framework there are really good ways to mount a react component or mount a spelt component and hydrate those on the Cent once they have rendered but it will render the first version on the server kind of next style and then send the JS to the client to take over from there that makes sense yeah okay yeah uh yeah I haven't used it because I most of my sites are well you know what some of them aren't Dynam or some of them aren't yeah some of them I could maybe look into it for uh yeah but I I think that probably makes more sense to to choose projects based on that based on the uh the tool that's best for them but I I guess in my I could probably build any of my things in either framework it's just based on you know what it's kind of based on like what parts of the framework I know well right because I found myself recently I was looking into uh what it would take to I was like um I was thinking like okay I'm going to connect to scale on from a a nextjs API route but what does that actually mean right cuz I'm instantiating a new Prisma client sure but what kind of latency is involved with you know connecting to SQL there you know what what kind of latency is involved with doing all that construction how does that matter if you know a 100,000 people are going to be pinging that API endpoint is that going to [ __ ] me over is every request going to take two seconds and then I looked into I was like okay it uses Lambda Lambda does this Lambda cold starts Lambda blah blah blah but but it's that kind of thing where there are parts of the framework I trust because I'm like okay I know I'm going to write this code it's going to do this and there are parts that it's just like oh this is doing something magic for me uh sometimes I can trust that magic sometimes I can't very interesting in particular the like serverless function example because that's like the infra problem that the architecture helps solve uhhuh yeah something I've thought a lot about in terms of like both spelt kit and remix where it feels like a lot of the wins that next gives you aren't necessarily framework ergonomics they're framework features that give you really good deployment ergonomics like their cash systems their revalidation systems their partial static site generation the ability to per page pick what the the right solution is whereas on remix I remember chatting like where with some people in the community like hey I have this Json blob from GitHub I would love to cash it and hit it somewhere else so that I have like this blob cached so I don't have to refetch it every time what's the best solution and within two replies somebody had me setting up a [ __ ] reddis cluster like that's that's offloaded the infra problem from the framework and deploy mechanisms to me as a like consumer of it I'm not saying that's necessarily a bad thing if you care about those problems you can probably make the best solution but if you don't it's getting in the way of creating yeah yeah definitely I I found my I mean for this most recent project I was like okay do I need to do I need to set up like a a separate uh like a a node just a [ __ ] fastify Express server or something uh or can I just build it all and I was like oh wait this is this will probably work just with next but yeah I I find myself I've definitely worked with that kind of uh Dev opsy type infrastructure I've worked with it but I prefer to not have to you know I I prefer to just let the framework do it for me when it can I think Chrome's screen capture stuff is getting to the it's decided to do 5 FPS mode for you it might be worth switching to the virtual cam if you're down just to get better fps uh give me two seconds no rush I can use this time to quickly shout out Danny and Ben in chat for the in number of gift Subs between the two of them it's nuts thank you all so much for the gifts super generous yeah I'm going to expect my uh my 50% cut of course I'm not in the call so let me know when you have that set up so I can swap the URL yeah one second no rush at all we have plenty of time uh okay the question is does this work as a browser Source in obs or will it block my microphone it looks like it's blocking my microphone yeah it's probably going to block the mic okay that's fine I will just window capture it no Jesus Christ another 50 gift Subs what what y'all are insane thank you so much ben uh everybody in chat quickly shout out Ben that's absolutely nuts thank you Ben cool let's see if the switch worked fresh I haven't been positioning the thing okay let's see oh [ __ ] my OBS build doesn't have Cam I can screen share on Discord if that helps uh yeah that might be slightly better we can do that where's the pop out optiona quickly talk so I can see if the lag's better test talking test test one two three yep that's better enough native capture is always better than Chrome's builtin sadly uh remove add window capture uh I'm going to switch scenes quick so that I don't accidentally screen share the wrong thing I've done that enough times because for whatever reason OBS just picks a random window streaming on streaming code is the [ __ ] hardest thing to not I leak environment variables like five times last stream yeah I do at least once per stream I found I got a new Chrome or like vs code extension that helps is it called is it called cloak yeah it's pry yeah it kind of sucks I found it too it's not that good I think that the animation broke uh it might be because I have to have the window focused does it work yeah I think so okay uh I will move my notes to the other screen then cool uh that should now work cool sorry about the tech Jank y'all welcome to the life of streaming oh no you changed the window size now I have to redo it onl I'm sorry it's fine Studio guest shrink that's as good as it's getting cool anyways all right all good what were we talking about we were talking about uh deployment for nextjs apps and how we don't really have to think about it it's yeah and there but now they're adding a an edge function mode aren't they have you seen my performance Deep dive on that uh your your your janky benchmarks website yeah I did it's not is it good no it's nextjs is heavy and it it's like potential runtime speed like I was getting between 60 milliseconds and 250 milliseconds for the nextjs edge runtime just rendering a basic HTML page versus the felt kit Edge which was between like 60 and 80 ouch yeah I mean when you're using react I feel like it's going to be heavy and it's hard to avoid that right yep it's so react is heavy but next is uniquely heavy versel put out a demo where they built a like basically a new framework for react SSR using ES build and some other custom stuff and they were able to get the runtime like pretty consistently below 100 milliseconds for me and the performance difference I was seeing was pretty substantial it was like within 10% of spelt instead of like 80% off I wonder how bun will affect that once it becomes a more production ready runtime yeah I I'm excited for bun as a runtime my concern with bun is it's an alternative to Edge run times and making it Edge ready is going to be interesting like you're going to have to create create new infro with its own isolate layer and separation story cuz like the edge isn't even node compatible you can't run nodejs on the edge yeah uh your mic has cut out I can no longer hear you oh I can hear you now great weird uh yeah you can't run no Js On The Edge yeah I mean I am fine with the with the environment that cloud fo workers give you though I think that having I like it better than having to you know Wrangle whatever node framework has decided they want their request response you know to look like I I prefer the the the web API type thing I think it's better I do but I prefer a good ecosystem and man the uh node ecosystem is hard to leave behind as an early Deno user there's a lot to to give up and you have to write a lot more yourself even things like Prisma will never actually work on the edge the way that prisma's EDG ready solution works is they run Prisma client in their own servers and you just hit them from the edge with okay that's what's the performance on that because it sounds like it could work it helps with the spin up time like prismas Prisma takes a 400 to 600 millisecond like Lambda cold start for nextjs up to two and a half or so seconds it's a pretty heavy impact in that way and okay yeah I think that we're going to see a a split in the near future because to be frank SQL isn't Edge ready I rant about this a lot actually where the the methods to access sequel tend to be very native and those aren't Edge like it's a very abstracted JS layer so now the question is do we build like a SQL RPC so that we can do SQL on the edge or do we build the things that go from SQL to Json or SQL to graphql in Lambda and then hit those from our Edge like do we split our infra between data versus render or do we hit SQL via the edge like do we switch to one runtime or do we split is it just a like is it something that can be solved on the is it something that we're just lacking the apis or is it like you know like lowl Network apis or is it something where it's going to be you know 10 years out or never at all it's I'll be honest it's one of those things that's above my like capability I do not understand SQL clients well enough to confidently say you could or couldn't do one in wasum from what I understand it should absolutely be doable but you're going to lose a lot of the benefits because that's going to be like a lot of code to instantiate and run in a like hot environment like an edge thing where you benefit from a bunch of long running connections and you lose all of that yes exactly and I see more and more solutions like uh I believe one's called Ready Set IO their thing is caching your SQL for you so you use them as like a middleman between your SQL database and your client whatever it is it could be Prisma or whatever ever and they will analyze the queries you're making and if one's being made a lot will'll cash it and cash that through their CDN so the next time you make it it's way faster if they abstract a tiny bit harder they would effectively be building an edge routed and cached layer in front of your database that you could then consume at the edge interesting yeah I mean it seems like it should be possible with the technology right now like you just spin up uh you know a a cluster of machines all over the world that all have a long running SQL connection you know that that must be possible the question is just uh is the cost worth it and when will the cost if ever become worth it to to do that type of thing yeah I I think about this a lot I actually chatted a bit with GMO and Lee and Malta over at versell during an SF event they did and was really surprised with cost savings being one of the main reasons they were excited about the edge because the runtime is much lighter and cheaper than like Lambda and node and it's their like firm belief that it will be pretty cheap I'm pretty sure Mark's in chat Mark we just got an email from versel that we were about to break our million free Edge functions and the next million was going to be a very laughably small amount can you share what that amount was Mark I'm I don't want to misquote it but I'm pretty sure it was laughably small yeah wait for Mark to share that but until then I want to quickly answer a question I've seen way too much a bunch of people were asking what is the edge are you down to try and Define the edge for Chatters that may not be familiar uh I can't say that I'll be correct but my understanding of the edge is instead of having a dedicated single computer that is running your code and serving it you have a [ __ ] ton of computers all around the globe that uh that start up your code in a different environment that's really fast uh and they're you know all those computers are all handling a bunch of person's codes and they all have different sandboxes for them uh and it start starts up your code really fast and it responds really fast because it can be uh you know it can be next to you instead of halfway across the globe yep pretty accurate the big difference is the runtime is much simpler and lighter when you look at something like Lambda and serverless as we're familiar in versell land right now those are actual servers like that you would run with Docker or something that spins up a like full Linux environment right yeah a full node.js environment with like Linux bindings file system all the things that you would have in real nodes so you can do everything you would do in real node but it's a full node Linux box has to spin up with Edge and the like custom run times that workers run in platforms like that rather than doing the abstraction on like a per Linux instance level it's like those servers have one Linux instance with tons of JS isolates in them and your code runs in one of those isolates on one box rather than in its own isolated box if that makes sense yeah yeah I actually uh I worked with uh what's it called cloudfront on AWS a cloudfront function or something which is basically their version of The Edge it's like it's insanely weird you can only use VAR you can't use letter const it's like it's like it's it's like working in 10-year-old JavaScript it's it's crazy uh but you know that's just how they implemented their version of the of the JavaScript isolate that's running yeah that's lamb Edge if I recall it's a an interesting DX to say the least also Mark got back to us do you want to guess how much of her sell charges for a million invocations of edge functions how many dollars do you think uh $100 lower uh $10 lower holy [ __ ] 150 lower okay uh uh uh 25 cents a tiny bit higher 65 cents that's that's insane okay yep 65 cents for a million invocations of edge functions on verell very cheap that that is that is insane yeah that's really cool yeah it's a much cheaper runtime and that's why they're pushing us to it because if it's that cheap for us imagine how cheap it must be for them yeah yeah that makes a lot of sense I mean lambdas I I just don't like them that much I feel like they're they feel kind of outdated now but I guess they have their place well that's a weird statement and I don't think you're wrong it's just like I feel like lambda's just started catching on over the last three years like they've been around for over 10 we've been using them for a ton of stuff but I feel like the serverless revolution is still relatively new but because it's kicked up the demand for things like Edge functions so that we can keep having the wins and go even faster is more and more real yeah it feels to me like if you have a Lambda you have to do all this extra you know [ __ ] on top of it with like cold starts to smartly spinning them down and all there's all this extra work in front of them to make them fast and you know I guess AWS has done that work so it it works but it feels a bit you know hacky I guess yeah and cold starts just suck like that's the big problem with lamba is making a Linux box turn on download the things you need and set up that environment especially with heavier stuff like Prisma can get pretty rough like the cold start on a ping lambda's around 3 seconds right now I consider that unacceptable but the alternative would be very expensive and very risky for us to run our own infra sure okay let me hit you with this this problem that I thought I had solved until we started talking about this uh I have a single single API function uh basically just to express Express a single Express handle or one endpoint uh it has to talk to Prisma it has to do one one read and one write maybe uh if that's on you know a a a versel server not server Well yeah if that's on versel as not an edge function but as something that's going to be running on lambdas and it's going to be hit by you know a million million requests in a couple hours how's that going to Fair what do you think really well because the spin up time is the most expensive part and once the lamb do spun up in process the request it hangs around a bit waiting for the next request so it doesn't have to spin up again and if you have a million requests the first like if three happen at the exact same millisecond all of those are going to starts but then the next three requests are going to hit those lambas after okay okay good that that makes my life a lot easier because I was I was thinking I'm going to have to set up like [ __ ] ECS with the with the runtime in there and set all that up it' be super expensive but yeah nope hopefully it will well apparently lambas go uh the 45 minute timers for something else never mind but like it should stay around and be pretty performant for a while after one of those instances Aiden's in chat uh he's the creator of fot he's at twitch now he is very very good at this type of stuff in particular like infra things like the stuff he's done to make fot cost effective is nuts but even he's saying don't touch ECS and I know he's a big proponent of serverless whenever you can use it if you're down to eat the cold start every once in a while well yeah I mean I was going to do like something where it's not like automatically scaled I was going to manually scale it up to a [ __ ] ton right before the the event but you know yeah I I agree yeah I will say like for the the problems that tend to feel slowest aren't mutations like if one mutation takes 3 seconds it's annoying but fine it's when you load a page and one time things take way longer to load than other times I think the the hack for that is much more how do I put it it's much more about the like caching story for your data fetch if you can make it that way so okay like the hacks we do at ping are like the room page when you join a call I wanted that page to load really fast even though it has to get a ton of stuff from DB so I cach that page knowing that the data that's cached on that page is pretty consistent and super valuable and if that endpoint and that data is immediately accessible the page can load correctly immediately and that yeah being able to like ISR uh programmatically revalidate and do those types of things make your site mostly static yeah I like that a lot that's that's the biggest thing uh going back to to spel Kit that's the the B biggest thing that I miss from from spel kit and why I use nextjs for most big big apps is because the SSG ISR that whole thing is extremely valuable very easy to use uh it's a lot of win for for not much cost when you can when you can use it I like it a lot absolutely and spel kit you can you can pre-render stuff is this one of those things that you know I don't trust as much I would have to dive into what the code is actually doing before I would use it in a big production thing yeah the programmatic revalidation has been so useful the times that like you need it like if you have a page that has comments on it whenever somebody makes a comment you can revalidate the page and never invalidate it otherwise now you always have an upto-date page and everybody's hitting a CDN instead of a server whenever the the stock on one of our products changes at Mogul moves exactly like those types of things are so powerful that it it sucks we have to eat react in order to have them yeah yeah it's true I think if I'm going to be if if I if I could choose one framework and have that be you know a production ready excellent ecosystem framework it would not be react it would be spelt or maybe solid but I haven't used solid yet in an actual Pro solid's been really fun I think it's solid is trying to do more what react did and spelts trying to do more what angular did if that makes sense so I was trying to do more what angular did talk on that I I haven't used angular in depth I've been forced to to to look at some angular code before but I don't know is it is it that similar and is it like more like is is view similar to angular as well then uh view is a weird in between I would say that spelt is uniquely leaning in the angular Direction in the sense that like it's its own way of doing things and most of the core libraries are part of spelt itself like the things that you use in spelt are made by Rich Harris and crew almost exclusively like spelt kit is by the same people as spelt which is by the same people as the spelt 3 binding which is the same as their store stuff like react doesn't even have a real State manager built in and that's because they know the community will fill those holes and push things forward in those ways react does one thing which is manage a virtual Dom that that renders something usually use it with react Dom so it renders HTML but that's all react does solids in a very similar mindset where it is a way to update a Dom in JavaScript okay yeah that makes sense that makes sense to me one thing about spel though is that I will like I I totally agree with on a low level spel provides a lot that is just spel built in like transitions animations that kind of thing but angular I think does a a lot more like it does like does it do like virtualization and that kind of that level of of libraries as well so I I'm not talking necessarily in terms of what the runtime does so much as what the DX is where when you want to do something with react you Google search for a package or source code or something someone did when you want to do something with spelt you look at the spelt docks if you want to do something with angular it's very similar it's all inclusive in that way the big difference here is angular is a a runtime that does all of this in the client whereas spelts a compiler that does all of this at compile time because sp's more a language but the overall like philosophy is we are going to reinvent how you build web apps where react is we're going to make turning JavaScript into HTML easier okay I'll take that but I'll throw you this I think the DX for me is more like react yes react I will if I need to make a a sortable list I will Google uh for for sortable list libraries in angular I I assume I would look at the angular docks in felt I'm comfortable implementing that myself I've done that I like Li things that I would go to to Li for libraries for react I have implemented in spelts like a like a you know drag and drop libraries that kind of thing is a lot easier for me and I think that's spelts spelt spelt at work right with the with all the convenience that it brings to just writing JavaScript a lot of those are just easy to to spin up your own custom solution for so that's the dev experience difference for me very interesting yeah I I I like that framing of spelts Primitives are such that you would just build those things yourself I do like that yeah and there's definitely still place for for having those kind of libraries and stuff I I totally think that spels ecosystem is uh you know nothing compared to reacts but if I when I get to the point that I need that I'm not I'm not switching to react I'm just I'm just going to build it myself very very interesting yeah I'm GNA have to chew on that one a bit I like react strength is and always will be it's the things it doesn't do consciously where it's really focused on how do we solve this one problem which is the virtual Dom and the hierarchy of updates and then let everyone else plug in the rest and I think that's a huge part of why react has stayed relevant and moved so much and we have Solutions like react query like nextjs like remix like uh zeste and Redux uh mobx a lot of these things become multiplat but react is the easiest place to start them and it's often the easiest place to build and maintain them and it's the place that's the most likely to adopt them interesting yeah I I mean a lot of the time I feel like you know I'm not writing react I'm writing nextjs right it's a it's at I think in some ways react is at that point where uh it's it's it's not the base of your code it's it's the it's the base it's like the the language you know it's the equivalent of what what language the library you're using is coded in right and a lot of the stuff that rack provides like jsx is you know I don't like a lot of it I I don't you know why why can't you just do uh if you want to pass a a property can't that's named the same thing as the property can't you just have the what spelt has which is just WRA it in curly brackets and you don't have to do x equals curly bracket X you can just do curly bracket X like stuff like that I really like about spel if that kind of if those kind of things if if react was growing in that kind of way it would be better I think and in a lot of ways react feels it feels on the devx side it feels kind of stagnant on the backend side I know that react 18 is adding a lot of a lot of new stuff but yeah on the devx side I don't know I think that we are starting to see a change how do I put it we're starting to see a shift from this in the core react team I don't know if you saw the react forget uh presentation at the most recent react comp but they are building a react compiler that's very spy okay yeah it like automatically memorizes everything creates bindings for you unless you just do whatever yeah I mean I I do like that I think that that's a almost certainly a good dire Direction because I think like you can you can rag on on spel for being a a compiler over a over just a a normal JavaScript library but you you do get a lot of advantages from it sorry I think there might be a per progression in some stuff that we shipped so I'm just dming my CTO to take a look no nothing too critical just wanted to make sure that was handled yeah I now that we've talked about things that provide Solutions so in depth want to talk about something that tries to and I think fails how did you flutter mention flutter okay okay okay so flutter I I needed to build a mobile app and I was [ __ ] how old was I I was I was 14 or something and I did not know react and I found I I researched I was like okay there's two solutions there's react Natives and there's flutter and I tried react native first and it [ __ ] sucked not knowing react being dumped into react native sucked and not knowing flutter not knowing Dart being dumped into flutter was fine uh I still don't think flutter is awful and I know you have strong opinions on this so I'm interested I think that react native had a very rough start and it it kind of took Expo to save it like pre-uni modules and 3.67 I believe which was late 2018 or early 2019 if I recall it was very rough and required enough native knowledge of both platforms to actually make it work and enough react knowledge to make it run Expo streamlined so much of that and abstracted things in a way where you can npm install a native module and it does what you expect and you can install the like Expo Go app on your phone scan a QR code and be developing on your phone it's okay so much it's by far the simplest way to build an app now and even just for the deployment story where the JS code that runs your app is abstracted often server hosted in a way where you can yank out that bundle without going through Apple code review or apple like app store review so you can actually update most of your app anything but the native depths remotely by Ying the JS bundle which is essential if you run into production bugs and [ __ ] you don't have to wait for Apple to approve your new bundle very yeah that is very valuable I agree it reminds me of of what YouTube does so I will keep a note on that but yeah flutter uh I mean I I haven't used flutter in a long time uh it's still growing though and I I feel like um I don't know I I don't know I don't know what's what's so bad about it maybe that was just me being being 14 not diving deep enough to to find the the garbage inside but flutters a game engine masquerading is an app runtime the big difference between react native and flutter is that react native is native and flutter oh it totally it totally is okay yeah it totally is uh react native is native and flutter isn't are you talking UI wise on that or are you talking what I'm talking like the way the apps work is a rough abstraction like they had to roll their own everything from like screen readers to Notifications to alerts to text Scrolls to this day in uh flutter if you use two fingers on a scrollable container it Scrolls twice as fast if you use three it Scrolls three times as fast okay it's it's Insanity I yeah I am yeah I have never used a flutter app that was a pleasant experience as a user personally interesting I can see that being a point yeah I think that like I think that is a a big uh a big consideration for sure uh because you know also what I was talking about UI wise is is they basically every app looks like an Android app by default which you can use the material or the uh Cooper Ino kit or whatever they call it but it's literally they took a bunch of screenshots of Apple's UI and like mangled them to look like app's UI in the app the the VidCon mobile app is one of the worst experiences I've ever had on my phone it has this like it uses the native flutter like fake iOS notification thing but the text is rasterized slightly wrong and aligned incorrectly so it's like like uncanny valley type [ __ ] and Beyond like like just the weird uncanny valley stuff since Apple moved to metal as their rendering engine for like like GPU code flutter hasn't caught up to this day almost all of the core flutter animations run at sub 15 FPS often below 5 FPS on iOS because flutter hasn't fixed the bindings and they're just dragging their feet on it it's been two years that they haven't fixed it people like yeah flutter is a great way to Target multiple platforms it is unusable on web it ships a 5 megabyte canvas and renders your whole thing in it so flutter for is a joke we mostly agree now flutter for Android is fine but flutter for iOS has been a tragedy for 2 years and people just shrug they're like yeah it'll get better they're on it why are you complaining about something they're fixing because it's been two years what do you what about the desktop because they now have uh all three major os's on there have you has anyone shipped a flutter for desktop app like anyone raise your hands chat uh yeah I mean yeah I I've I've experimented with it it definitely didn't go super well because that was back in like pre-alpha but uh I guess what it boils down to is I think flutter has a really good developer experience uh I think Dart is a a very very cool language it's a it feels like JavaScript but like you know actual static types uh with a lot of extra cool stuff on top uh if you are a lazy developer who doesn't care a lot about your user experience or you don't need to care a lot about it then I think flutter is pretty pretty cool but yeah I I agree I agree that uh like a a you don't even on a on a desktop flutter app you don't get uh like if you have a text box you don't get the native right click menu on the on the text and show like that uh so yeah sure yeah people in chat are saying that I need to use it more I I don't know if y'all understand how much I've tried flutter I've probably put like 20 hours in to trying my hardest to build with flutter admittedly at particularly rough times the first time I tried was right when that metal transition happened and I said I would try again when they finished the metal transition which is why I haven't given it an honest shot since because it's been two and a half [ __ ] years but beyond that when I tried running it on my Mac when I got my M1 which was like four or 5 months post the Apple M1 arm launch and I opened up the flutter Dev environment it immediately opens up their custom chrome that's built into it like okay uh sure I copi the URL I paste it in my Chrome Colonel Panic on your on your computer okay very cool seems like a fure to me but I mean if you can't work with that then I don't know yeah I guess I'm just not a real programmer because I'm not willing to work around a colonel panic when I'm trying to make a web app yeah yeah yeah I mean I I guess I guess I I agree with you on yeah I agree with you I think that floods isn't isn't great I wouldn't use I I mean I haven't used it for years but uh developing it is is pretty fun that's my that's my take fair I if somebody really thought flutter was the right choice for a project I would love to talk with you if you are working on a thing that you think flutter will allow you to build it better or like have a team that's more effective or in any way improve the experience it's I I just I don't believe it I am sure that some developers can spin up slightly faster especially new devs but it feels kind of like hura in that way where it makes easy problems easier but it makes hard problems impossible yeah because you can't I mean diving into the the lowlevel Brokenness is not really feasible yeah it's the the sky rendering engine is pretty cool and fun enough that rendering engine is now accessible within uh react native shopify's been putting a ton of effort in porting the the flutter runtime and like rendering engine for animations and stuff into react native so we can still get those performance win separately oh interesting yeah I mean that is one of the the major things that I didn't like about react native is that it is just it's running JavaScript on your phone which seems weird to do and flutter does you know compile to to native code which is cool although it is it is also not calling you know it doesn't compile to native code it compiles to it a native runtime that runs other compiled code I think but yeah it is a I mean when you just if you're if you're making something big just just build it and in all the you know in all the different platform forms if you're a huge company yeah I am still upset that we never got react native in at twitch I pushed hard I actually built a full new react native mobile app for twitch at a hackathon in three and a half days won the hackathon got an HR warning and said [ __ ] this you got an HR warning okay very cool team was not too happy that I was stepping on their Turf with react native but that is what it is yeah I I saw one of my favorite people from the community show up are you familiar with uh Matt poek he's known as the Ronnie Mullen of typescript is his catchphrase okay he is I haven't met him yeah he's a typescript wizard he's been making lots of awesome like typescript like lessons and materials to help people do more advanced typescript stuff and he asked if we've talked about TS yet and I don't think we really have I'd love to hear about your move from JS to TS and how you've been moving more towards like the trp style or trpc Style full stack type safety yeah uh yeah I think my initial move into typescript was I didn't do it right like you can you can incrementally move right and I just didn't uh I I spent you know I wanted to learn enough to make my entire app in typescript and then use it uh but event I mean eventually I did so I've never regretted that for an instant it is literally a straight upgrade in any in every single met trick but uh yeah I just did it it took me a while because I didn't uh I didn't I just wanted I'll or nothing basically I this might actually surprise you I'm much more in that camp where I'm not a big fan of the like partial rewrites of typescript code bases I've heard enough success stories that I I'm I believe the people who say it's doable but I don't have any interest in doing it I've seen too many people find success in full rewrites including myself and like one of the biggest desktop or sorry I'm getting by chat like one of the biggest wins I've had with typescript is how much it simplifies my code when I don't have to check for random things all the time anymore like is this string valid is this only taking numbers all the like stuff I would often miss is just kind of included and I've yeah found that the code I write it might be a bit longer horizontally because I have the type definitions but vertically it's much shorter because I'm not doing as much stuff and I find that the opportunity to audit the code through the port is often so valuable that I don't want to give it up with a partial move yeah I mean I feel like I'm not extremely qualified to to talk on this because I just I've been using typescript for the majority if not all of my like professional uh you know actually good Development Career so I don't I don't really have the contrast like I have a [ __ ] memory but I don't really have the the contrast between using typescript and not using typescript I I just couldn't imagine not having that kind of stuff and when I do have to dip into JavaScript is just a a absolute nightmare I I love that and this is something that I chat a bit about I think that as much as dev's gotten a bit hard hard to get into from like when I was young and could right click a page and have the entire website in the HTML file it returns that's not the case anymore like minification and server side stuff and source code being harder to see how other stuff works I feel like we have finally come around to an extent where the Technologies are accessible enough and the materials are quality enough that getting into Dev looks different but feels more accessible and things like what you're describing with typescript like starting with TS means that a lot of the errors I I got gray hairs over just don't exist for a new Dev getting started if they start with typescript things like the the hell that was class components and understanding react especially as react moved from class components to hooks like that was fun for me but I was a year plus in at that point and I found that those can be very hard things for devs but they've gotten so much better like the new beta react docs are going to help a whole new generation of react developers get started on a way better foot and they're going to move so much faster than we even got to yeah yeah totally I mean I've seen those docs and compared to the old ones I mean you can call them docs if you want to but I would I would Reserve that for for actual documentation that's fair yeah I I think I think education materials of like a more general term might make sense but the ways and quality in which you can learn even things like like I only made this YouTube channel and this twitch like started streaming more because I felt like the beginner stuff was so well served I wanted more senior stuff like the next step once you have built a few apps where do you go to hang out and talk about things and keep learning like the comments you made earlier that is still like one of the kindest compliments I've gotten from one of the best people is that you consider me one of the reliable places to get info about new Frameworks and solutions like to know someone that's as productive and successful at delivering software as you sees me as a resource for those things is to me like the ultimate success of this Channel and why I'm doing all this yeah uh yeah I mean I think I mean I I've done my train of thought uh yeah yeah okay yeah that what we were talking about earlier about like uh knowing the knowing how to write an app in a in a framework versus knowing what your code is actually doing uh that's that's the kind of thing that I I like getting from this this you know more senior level that you're talking about for sure because you get to you know it's that stuff is not incredibly important but knowing it is I I think pretty important for for shipping a a good app i' I've also I mean I found myself a lot I think one of my weakest points as a as a coder is uh is micro optimizations right is pre- optimizing uh thinking too hard about whether or not this like this tiny bit of code is going to be good enough um and some most of the time that doesn't matter sometimes it does I think knowing people who are incredibly experienced in the in the field about the inner workings of that kind of stuff helps you judge whether or not you need to optimize something yeah I do do definitely see like pre-optimization distracting people a lot I know uh funny enough I I'm not sure if Aiden's still here but one of the more interesting back and forths I've seen on Twitter recently was between Aiden who is very much like a kubernetes wizard goang expert building fot to be as concurrent and efficient as possible and primagen who's a twitch streamer that does mostly like rust Zig heavy like how do we optimize like performance and servers to the ultimate level and primagen is really anti- Lambda and JavaScript in the back end he thinks that they're a a huge unnecessary heavy thing that is slow and unscalable but Lambda is the part that scales not the JS and to not have to think about those problems and to not have to build something to scale is so much cheaper than over optimizing it the quote Right Way by building a scalable server system that will Flex itself based on load and like sure yeah like our own time is so expensive that even if the lambdas cost more than the server run times moving from the simple server functions that we're writing right now over to a distributed kubernetes ECS scalable thing is weeks of work instead of minutes and that is going to make it so much harder to justify unless your time as a Dev is cheap and when I hear people like to be frank primagen saying that JavaScript is too expensive to run in the back end what I hear is my Dev time is so cheap it makes a difference or our scale is so absurd that we have to micro optimize these things but most devs are neither of those things and as such just write your [ __ ] JavaScript functions yeah yeah that's fair there's one instance where it did have to and I I mean I think I had to uh breite code that level uh which is for the as yet unused uh RPL clone that I built for lewig which is definitely going to be used at some point uh but that I wrote in like uh [ __ ] three parts the the front end and then a a websocket layer and rust and then a a backend uh layer that all the websockets layers connected to also in Rust uh with you know [ __ ] multi-threading and all that responsible stuff deployed on ECS um this sounds like the stuff I normally bug people like Aiden and Jake over at Railway to help me with I'm not smart enough for these things anymore I just write JavaScript well typescript cuz I'm not smart enough for JavaScript yeah JavaScript just makes you have I mean no one's smart enough for JavaScript I some people are I have a one of my favorite diagrams let me find this quick and screen share it uh I'll just DM it to you so you can see it because that's easiest if I can find okay yeah here it is this is one of the first diagrams I posted on Twitter funny enough uh we'll switch to my oh cool screen review is already ready so one of my best takes oh shoot wrong button yeah so Ryan is the creator of solid JS he is a very very talented Dev that personally isn't wrong button too big a fan of typescript he just doesn't find it valuable and for him like he runs into a lot of problems with typescript as a library Dev like building libraries in typescripts a lot harder than building apps in it we almost offload the work like typescript lets us offload the work of API considerations and issues when we're consuming something to the framework maintainer so they have to consider all of that ahead of time for us via the type system yeah that's true yeah I personally I I kind of like writing that kind of stuff like I kind of like writing huge ass you know tary typescript things to get to get something working and then perfectly typed in every situation with different strings matching and all that I think it's fun but yeah I can see a place where that is is too much yeah I I've seen enough people come around to it that I totally think it's doable I just think it's important for us to like shout out the maintainers of those libraries because like one of the main reasons typescript is so pleasant for us to build apps with is because of the number of devs who are building libraries doing the hard work for us like typescripts greatness largely comes from the library maintainers using typescript rather than typescript itself if that makes sense yeah and that's what that's what trpc does for you basically which is one of the best parts of it I think it's so nice have you played with V10 yet I have seen it I've not played with it live uh but I am excited for it for sure it's so fun yeah it's it's just great yeah I ported ping over I haven't shipped it yet because the typescript compiler on a big Legacy interop router is a bit slow and dies a lot so I'm either going to Port everything over to the new syntax so it's faster or wait for them to have some fixed so that the Legacy router isn't as slow interesting yeah I mean that's that's not TC's fault that's that's your fault for sure you should you should get on that yeah I I am not complaining too much for sure and I'm already chatting with Sachin and Alex about it I I'm sure we can move us pretty fast the god the ergonomic answers are or like the ergonomic wins are so good just like right click go to definition bringing you to the back end is such a magical thing yeah yeah for sure I yeah I this one of those things that you take for granted once you have it and before you have it you just you just take more time doing stuff yep I I'm pump that I got you in on trpc I remember when we first chatted the the thing you were most excited about was Planet scale I'm curious how that's like changed over time like what of the the T3 stack has surprised you the most uh that's a good question I think Planet scale and I'll group in Prisma with that is still uh very very valuable for me but also using those without trpc feels a bit weird as well so I think yeah I think trpc is probably the the the coolest bit of that but oh yeah I still think Planet scale is very cool I still think Planet scale being able to uh um you know not have to worry about that kind of thing is just another cool thing you know that we talked about not having to worry about how something's deployed Planet scale solves that for something like SQL which is which is crazy yeah I am so happy to never have to think about the scale of our SQL DB ever again it's it's such a relief because those are the problems that keep me up at night and like having moved our database over at paying four times and then we moved it to that and just haven't thought about it it's such a nice thing to not worry about yeah have you seen the read replica stuff they're doing it's super exciting I have not is that just a like a global cash for for reads or something it's a regional cache that you can enable yourself for reads so it will I think it's they promise under 100 millisecond for sync so if you have like lambdas deployed in the EU and the US you could have people who hit in the EU hit an eub that's a read and then for rights and mutations you could still hit the core like centralized DB wherever you put that interesting yeah that sounds pretty pretty darn sick yeah what I'm uh beginning to see more and more of is this like there there's a question of how do we draw lines in our data architecture because not having a centralized DB for some things just sucks and not having a a real kernel and like native runtime for querying SQL kind of sucks so because of those two problems we're starting to Define like a grid like a split view of where do we run our code based on X so if I'm fetching data to render a page maybe fetching from a read replica makes a lot of sense or maybe caching that page and ising it makes sense but like which you do based on which use case is the question that's currently unanswered we don't necessarily have like to be frank a next for data sure yeah yeah I mean that's something that I think it's hard to make a reality I feel because there's so many different types of you know how do you know when you need reddest versus SQL and stuff like that if you're going to build I don't know maybe it's maybe it's easier than I'm making out to be it it isn't and especially now it's like how do I efficiently get data to my user like once you've decided like okay we're going to use SQL because we need to store all of this forever and have access to this data but how do you do the the next part like how do you make it faster how do you make the edge run times work how do you go further from here the it it's made nextjs feel more prescriptive than it used to I always felt next was pretty light on opinions mostly because the opinions it has are bad and I can ignore them but I am feeling more and more like it is just due to how hard it is to run things on the edge with it without huge performance hits how hard it is to like figure out alternative caching Solutions where like and I guess they're doing this with the new neck stuff like one of the cool things with the proposals and the Demos in next 12.2 I think whatever the most recent Maj was yeah I've I've seen that I've read through that article multiple times because it's very exciting yeah it's super interesting the idea of like per you can choose this route goes on edge this route goes on Lambda like as a config value is so interesting yeah yeah it really is it's the kind of thing you don't think about that much but yeah it's it it's incredibly incredibly helpful yeah I am pretty firmly in the camp of edge for render CDN for data caching for fetch whenever you can read replicas when you can't and write to a centralized DB cuz writing being slow is not that big a deal H yeah that's true speaking of databases though do you have any thoughts on uh what's it called D1 Cloud flare I I am excited for the sqlite revolution I think we're in a very early stages of it D1 is cool but it feels less like distributed Sequel and more like a distributed SQL light shaped durable object which is like Cloud flares primitive that you can hit from the edge and it's very much like for hitting from The Edge and not much else H so you wouldn't use it as your your main database for something definitely not yet I am also burned because workers uh worker KV was a very rough DX and like maintaining that over time is painful I'm exced about what cloud is doing with the sqlite stuff but there's also a I think light stream was it uh the one that fly iio bot SQL light figure what that was called again uh bolt DB and light stream interesting yeah light stream was a or is built to be a sqlite uh runtime that or I guess like a sqlite deployment solution that streams changes to S3 and like shares them like it distributes them across the world and is super super fast that is definitely interesting yeah I feel like I would love to be able to use use one of those for my my main database at some point I agree that like I I like Cloud flow workers a lot uh I used to like them more though because I think my original use of cloudfire workers was like the perfect use case for KV and since then I've learned okay KV has a very limited perfect use case there's a lot of places where KV is is absolutely you know unusable um and I still think that it's it's a very very cool platform but uh that's why I'm excited a lot about D1 is I I hope it is the it'll cover those those places that KB doesn't I'm hopeful too I there's a bunch of or not a bunch but a good handful of cloud flare employees in chat a few of which are worker or are employees on workers and on that team that are very excited about this so really cool to hear I yeah yeah I I mean okay the one thing the other thing that I don't like a lot or the one thing that okay here here here's here's the here's my take Cloud for workers is extremely extremely good at what it does uh which is which is to have those the a replacement for Lambda which is faster and also cheaper by orders of magnitude it is missing I I don't like durable objects that much for websocket support and I feel like once websockets are at that level where you can make them very cheap and very easy to spin up and very little thought into them I will be very happy but I I'm not optimistic about that coming soon websockets are in a very very weird place I'm more and more tempted to go do something about it myself but I I don't like developers enough to build de tools honestly that's my problem yeah I I I totally agree I I think I think websockets are so powerful and yet so hard to set up it's barely worth it's barely worth it but you know if if imagine websockets were just cheaper than cheaper than just having a or as cheap as having an HTTP API all every website would be using one for like streaming and components and [ __ ] instead of like I know uh like partial hydration and stuff like that a resumable I don't know what all the terms are but imagine that was over websockets that would be insane that would be so cool I know that have you seen like what super base does with the live updates for data I have not soes it do it's kind of from like Firebase live fir store stuff that they've cloned the general idea is you use their SDK on clients to fetch data it like constructs an API for you but it also binds a subscription to it via websockets so when you write to that column in DB it will update on client yeah I mean that's very cool but how expensive is that is that is that Che the subscriptions built in for free if I recall they don't charge for that Ah that's very cool they charge for the database instead yeah that is pretty great I I I tried super base super base once and I couldn't I couldn't really get into it because there's a lot of setup overhead and you have to know postgress yep more than other things like you know Firebase is super easy to get set up I think that's a a flaw in it but I I I trust that if I push through that it would be very cool it's gotten a lot better especially now that you can just like use Prisma as the client usually and use super base the rare times you need to sync something interesting yeah okay it it's just postgress no I I I never learned SQL I learned SQL by by being forced to use you know applications or work on applications that use SQL and I've I've just learned it through that I think I I've only known SQL for about a year right so uh I don't I don't know all those like in-depth you know setting up tables I don't need to know cuz cuz I how often do you do that I know how to query stuff a lot of the time but I do find that super Bas is kind of trying to go more Noob friendly than Planet scale right now like I think that Prisma provided the DX that super base failed to for you there in Planet scale but thankfully you can use that with super base if super base wasn't so postgress heavy and wasn't so open source it'd be a lot harder for me to recommend but like if you want to move off super base you can run their code on your own servers huh yeah I mean that it is just very cool yeah yeah the the websocket world is changing in chaotic ways and nobody's moving quite fast enough or in the directions I'm most excited about so I'll probably do something about it in the future but not for a while yeah yeah that's the that'll be that'll be paradise that'll be Utopia of of web dev yeah I had something else on like the websocket and live update thing I'm trying to remember what I think it was the SQL light stuff yeah uh with the SQL light stuff I see some really crazy opportunities things I probably shouldn't talk about on stream but I don't want to build them and if anybody watching right now wants to go build this for me please God do it so one of the are you familiar with bun Aiden or not Aiden [ __ ] auto sorry I'm reading Aiden at the same time well yes I I have played around with bun have you played with the SQL light bindings in bun at all no I have not so I think the SQL light stuff is one of the most underrated features in it because it lets you write super performance SQL light queries and like reads and writes in JavaScript in typescript yeah yeah and yeah uh that's very cool yeah if you were to combine that with an edge e runtime even like fly iio well distributed containers on top of either like the something like Cloud flares solution for light or for SQL light but I'm thinking more uh the light stream stuff that's going on at fly you could build a a platform where you like open up a GUI you write a really basic like JavaScript or typescript function and now you have one of the fastest ways to read from a sequ or from sequel ever made yeah uh that is I mean that's cool I I think I mean personally I probably wouldn't end up using it like that's not that's not my the reason I would pick up Bun but yeah I think I think that's very that seems like the kind of thing that you know someone makes a library for it and then everyone uses it and then or not necessarily like someone makes a platform for it I should say and everyone uses it and then no one has to think about it yep and it's very cool that bun enables that for sure yep that's pretty much exactly what I'm saying is like if anybody here wants to build the world's fastest way to write Java script and have SQL on one side and Json on the other building your own like containerized like bun clusters where you could write basic JS hit a distributed SQL light DB and send me a result super fast and if you could get it to the point where I could write that in a a special folder in my nextjs code base and that will Auto deploy to whatever you've built you just took down most of the current data platforms yeah that's that's I mean that sounds pretty good to me as well I think my I mean my question when we when we talk about bun is why the [ __ ] did it take this long like if JavaScript had the potential to be this fast all along why did it take you know a single dude who's really talented doing all the work for everyone else to to make this a thing there's a lot of parts I I think that the pH like the first big part is JSC versus node like he's not starting with the node runtime or anything even kind of like it he's starting with JSC and skipping V8 and building a new runtime from scratch around JSC and JC is slow what is V8 slow compared to JS is that okay very much so a lot of the performance win that we seeing in bun in terms of like the server runtime perf is specifically because it's JSC a bit more is that he has optimized native calls in it so for things like file system things like the sqlite stuff he buil bu since since it's not node he had to build those bindings himself he could have built into the old node bindings but for a lot of them he wrote new bindings in Zig that are way faster and he built a much more performant bridge between the JSC and the zig code than exists right now in node jip between the JavaScript and the native code one really fun dumb example of this in node is if you use vs code you have probably typed in your terminal code space period to like open vs code the directory you're in yep you probably notice that takes like half a second to 3 seconds if not more sure you can write a binding that rather than using the like JavaScript CLI that electron comes with to call that app you instead have a just like call the executable for the app itself and it starts literally 50 times faster just because the JavaScript to Native binding takes so much more time to spin up huh okay so it has to spin up JavaScript when you call code Dot and it okay that's that's crazy for those of y'all in my sub only channel on Discord if you remind me after stream I will share my uh zshell profile that has a shorthand like I just use C instead of code that opens up vs code immediately instead of like seconds later so if you're not already sub subbed the $5 is totally worth it to have something that will save all of your launch times from your CLI knowing how much money y all should be making it'll pay for itself pretty quick yeah okay cool uh here's my next question why doesn't someone or when will someone build uh a new package manager that's just faster that doesn't have to be an entire runtime because I feel like that is one of the biggest wins for me is just be being able to install packages in in milliseconds rather than having to wait for the you know mpm and even yarn I like yarn a lot but it is slow compared to compared to bun when is someone just going to write a a you know a package manager and zega rest that Speedy we've seen a few attempts pnpm is pretty fast but it is still written in JavaScript the cash story is solid I will say that like when we compare even npm in its worst state to package Solutions in other Lang languages and other like things it is still surprisingly fast relatively speaking but yeah the the speed at which bun does things is impressive it does that with a few workarounds and hacks that aren't really tenable though specifically like I use probably too many patch packages are you familiar with patch package yes I've used also a lot of them yeah patch package is not viable in bun interesting why not because it cashes your packages at a higher level and shares them between like installs and things so it like doesn't parse the packages or run a post install so it can go faster interesting okay well I mean I'm sure it's possible it would just be slower for that one package right if you read it right right now it's actually not possible Jared's trying to figure out how to do it without having to like every time a pack is cashed check if in this instance we [ __ ] with it or not because that would just like double the runtime yeah yeah I mean wow when you get into the state where everything has to be super fast all of a sudden because that's your that's one of your main selling points yeah you have to really think about those things it's tough yeah and even like the next JS support which he built this for next initially I don't know if you saw my interview with uh Jared but we talked a lot about like how he got there his need for bun was he was building a game in nextjs and the hot reloads for the canvas were very slow this was even before swc for the faster next compiler so like he'd save and it would take half a second to two seconds to see the change in the browser and he hated that so he built bun to make that faster but because of that he didn't need the serverless apis and like the whole Page's API directory there is no serverless function or like API function support for the bun next J run time right now huh okay yeah that makes sense I mean it's it's I mean that's the kind of thing that that will come I feel though that's a lot of these things will come hard thing to come it's a question of how much perf do we lose as these things get added like I I have watched Deno get slower over the last four years as like an early adopter in consumer it's slower than node at a lot of things now which is sad because it's should be faster does Deno use JFC as well or uh no Deno still uses V8 but it doesn't bind through node Gip in C++ it binds through uh their new rust layer that they built for it instead which is way better okay yeah for sure I mean I would choose rust over any other comparable language Zig seems pretty cool h i I've seen Zig I think it advertises a lot of its advertisements are oh we don't have this feature because you don't need it but I'm like well I kind of use that feature and I kind of like it I I find that I don't know how to put this one I find ziggs doing what I wanted goang to do okay where like Go's thing was everything is doable one way but the result is half of these things are doable upside down that's what Zig is saying no that's what goang feels like for me like okay goang has never made me feel smart as a Dev which is probably a good thing in a lot of ways where all the code is kind of stupid and consistent but I hated that personally very much in your camp in that way but I think zigg is a a less cringy go is the best I can put it interesting I mean one of the one of the things or probably the thing that I like most about rust is I I write the code and then it takes me a a struggle to get it to compile but then once it compiles it's just going to work and I feel like that's something that Zig doesn't offer does it the like garbage collection specifically sorry uh I mean not not gar well yeah memory management that kind of thing the the the is I mean I don't know how how much of rust is that but I I think I missed the first part could you repeat the question sorry yeah yeah uh what I say um uh WR right code takes a long time to get it to compile and then once it compiles it's going to it's going to always work uh that is something that makes you feel stupid a lot when you're trying to you know struggle against the compiler and you're like why the heck isn't this working and then once you finally figure it out you realize oh I was just I'm just bad I did this wrong and Russ just saved me from from tricking myself into thinking it's going to work right I think that's something that Zig doesn't have yeah zig's Zig and Go's strategy there is to be so stupid that a compiler error would just annoy you because the code is so simple and I think that's why they make me feel dumb not because they're telling me I'm dumb but because the actual answer is dumb there isn't like a smart solution very often it's just like if error is not equal n 15 times yeah I don't think I would like go that much yeah for the reasons you're saying you didn't dig Zig I think you would very much not dig go as well the on top of that there's just some hilarious design decisions like that the channel axioms will always kill me they're [ __ ] hilarious like uh is that multi theing stuff it yeah it's it's one of the the main processes for multi-threading and passing like messages between threads I I remember I think it was Aiden who said this take but I'm not positive one of my favorite takes was my concurrency model in go is HTTP okay I'm not I'm not getting the the full strength of the take yet the J to me the goang concurrency is such a [ __ ] show that it's better to just run multiple instances and the network boundary oh okay yeah I mean I I really like how Russ does it which is you know there's no shared memory between threads you just have to send messages and or if there is shared memory it's really strict about how it works and and the compile those those errors happen at compile time as opposed to giving you a Segal at runtime like C++ did when I tried to use it and then gave up yep rust is competent with uh the with its concurrency model I've been pretty impressed with rust overall I need to play with it more I just don't have any use cases for it at the moment yeah it I mean I guess in the web dev world I don't think there are a lot of use cases for it and I think that uh the the RPL thing was probably one or it was one unless I wanted to pay you know $220,000 per per month for to to host it it was one uh and uh you know rust is fun I I like I like taking a break from you know worrying about webside stuff and just being able to write rust it's it's it's just nice to write in that's fair I I do miss my Elixir days here and there but then I remember it doesn't have a type system and I get sad whenever I use it again yeah maybe you should start using dark as well oh no I dart's not bad it's not all of the reasons you hate flutter none of them apply to Dart the reason I hate Dart is O I'm not a big oop fan I'm a big functional programming nerd okay I never learned those Concepts in school so I all I know about you know the the difference between them is just what I've picked up and I don't think I've really you know written functional programming stuff in because I've never needed to because I don't know the you know if you don't know you're not going to use it and it's one of those things that like a lot of things you can just learn by picking a project and then learning what you need to learn in order to finish that project right and I think the difference between o and functional programming is not one of those things you have to be making a conscious choice to use it and learn it it's harder to learn by doing I think maybe I'm wrong I yeah I would say that actually this is the thing I think about a lot a lot and used to talk about a bunch on Twitter spaces the idea of like how much time do I have to spend learning data structures and algorithms before I can build my first app and the answer to that is throw away the data structures and algorithms book and go build something like right now like that's how you're going to learn but there definitely is a point as you honestly as you take on more leadership roles and you're making decisions that don't just affect like you and your customers but also affect like the other developers you're working with and hiring that a bit more knowledge on these Concepts and less like the depth of how the concepts work more the impact of these decisions and how they affect things like hiring scalability like architecture and that stuff can be valuable I I think that you're very much at a point where like watching a few videos and reading a little bit about FP versus oop and imperative versus declarative could help your mental model for how these decisions are made a little bit interesting yeah yeah I think that's one of the things about about working in a team that I you know that I struggle with is is learning to live with other people's code and not cuz I I think I'm extremely opinionated but it's I'm kind of like a mix of being extremely op opinionated about the way I write code and also very flexible about learning new new libraries and stuff and new ways to write code I think that I I'm I'm pretty fickle in that way that I'll you know if I find something new that I really like I'll adopt it and then I'll be okay this is now the way to do this and I will not accept anything else yeah I I've definitely found myself trying to find that balance especially when you're working with like both more and less experience people like both the how do I learn when I vly disagree on something but also I think this is like the more valuable thing and you're going to be in this position soon if you don't think you are you're probably wrong and are now is okay letting people fail at the right times as the lead like knowing a decision is doomed and knowing that I could prevent you from doing this thing that's doomed but you might not believe me and the lessons I learned by [ __ ] this up were so valuable that you should probably go [ __ ] this up and learn the lesson oh my gosh that is that is very insightful I think and I think very relevant to me right now yeah because I I do work in a team for some stuff that I'm not going to leak because I do have other other jobs but being able to uh like I find myself like there's a project that I'm leading on and the I built the 99% of it and now it's being now that it's released I'm like uh I'm I'm stepping back a bit and letting other people build the the new features and I find like a lot of the time I after going back and forth on a PR a bit and maybe that's just like the the uh maybe that that could be solved in a different way but after going back and forth on a PR a bit I eventually will end up you know just just committing to that branch and then and then merging it to fix the last bit of stuff and I guess knowing when to yeah knowing when to let someone fail is crazy yeah that is a that is a really important point I'm fum that this is resonating and also that you're already in a position to be doing that considering how like young and early career you are it's awesome that you're like getting those opportunities and taking advantage of them as you are you're you will grow a lot more as a leader than you did as an individual Dev and it's a lot harder to notice when it happens so you have some very exciting years ahead of you with all that yeah I mean my future I think is very weird right now but definitely important I mean leadership skills are I think everyone should have them and that's weird right absolutely and you'll be surprised that how similar it is to what you've been doing the whole time but at the same time like feels weird the hardest part for me is like I'm so used to failing being pretty cheap and like when I [ __ ] up code it's not a big deal but when like I [ __ ] up management and that could hurt somebody's career trajectory or like happiness day to- day and [ __ ] like that's a lot scarier yeah yeah for sure responsibility of her of her people is is crazy that the world is is is working like that yeah I my big framing now and I think this is like the book I'm inevitably going to write someday is it's our job to build safety nets I try to think a lot less about how do I guide people away from failure more how do I enable an environment where you can fail commonly early and aggressively and it doesn't hurt things too badly so like given the option between a really good unit test system or really fast deployments I'm going to pick really fast deployments because that means when something's wrong in prod we can fix it way faster huh yeah that's a that's an interesting take as well because I I I feel like well what what what do you think about about the importance of of having like import like massive test coverage and stuff like that oh boy uh I'll let Chad answer that one for you uh hey chat how how do we feel about Theo's uh code coverage rules yeah I did a a half debate half podcast with primagen about this we all agree that code coverage numbers are bad and tdd is really bad but like so much of what we used to write unit tests for especially like pre 2018 like typescript really aggressively taking over like the things I wrote test for is if I pass this a number instead of a string does it fail the right way and with typescript so much of that stuff just isn't things that exist anymore and more often than not I'm testing something because it's scary or fragile at that point I would rather invest in making the thing less scary and less fragile than the test the point at which tests make sense for like unit test style code coverage is a lot less often than people seem to think and we're keeping a t of like bugs we hit in ping production that could have been prevented with a unit test we're at 2 and a half okay okay yeah I mean I I find like I I recently wrote a unit test unprompted I was like okay I should actually write a unit test for this and I you know in this case it was like a it was a [ __ ] AWS cdk thing and I was it was like this is going to be a nightmare to like redeploy if it fails and it's really easy for me to just test a couple uh inputs and outputs and see if they're right so I think there is certainly a place for those those types of things but yeah wait y'all write tests for cdk I mean well in this case it was like uh it has to like concatenate a bunch of strings weirdly to build domain names and then certificates out of those domain names depending on if it's on staging and production and depending on what the main p in is so I mean and they have they have test support so I was like yeah boom I'll just I'll just plug in their their example and make it work hey if you have code you're confident in that you never want to think about again unit test can be an okay way to assert that I find that most of the code that I personally would want to like make assertions about is code that should probably be deleted sooner than later and like the files in our code base 3 months ago that needed tests the worst none of them exist right now we just we kill them and rewrite them in ways that are less chaotic and problematic sure yeah for infer type stuff like what you're describing there with multiple different like servers and systems and deployments and relations between those then like many like almost pseudo integration tests where you mock some things not others and make sure the interaction behaves properly that stuff's awesome I really like like pseudo integration to full end to endend testing if you can make that cheap and maintainable that is almost always a huge win yeah yeah I mean test driven development that's what tdd is I I hope yep but I tried it once and I say it's the kind of thing that it's it's one of those things that you can you have to be forced to pick up right you have to you have to trust someone's like very strong opinion that is like you have to do it this way you have to trust TR that you it's not you can't learn it yourself I feel maybe if the problems we were solving were simple enough to define the test for before the code is written then I wouldn't have hired a team to write that code I would have contracted it out as cheap as possible if we had that strict of like expectations on how these things should work then I'm not hiring Engineers anymore and I think that like everybody at the company I expect at paying to have a pretty strong amount of like self determination and like freedom in their solutions to problems like the problems are much more generic like the device picker has looks awful when you have too many devices or we need a way to dynamically update the slot when you want to change who's in it and those types of problems like we could even have a a strong like mockup and diagram of how we want to do this but encoding those problems into tests first would just be so so strange and if we could do that like the work put into defining all that is most of the work I'm trusting the engineers to do while they build it and it feels like doubling down on the wrong part of the problem yeah I like that take especially since and like this is something that's been killing me recently I've been we're in a much more experimental place now with ping because like the core attch is working and we really want to start iterating on some of the more experimental stuff and the result of that is I keep having devs get like 80% done on a thing and right as they like it's at a point where I can start playing with it as soon as I press a button in it for the first time I'm like oh [ __ ] there was a much more obvious way to do this simpler that's like a better user experience and now they have to throw away all of the work they've been doing to do this new thing and it feels awful for me as a lead like having my team building awesome [ __ ] just to use it for 5 minutes and be like oh [ __ ] I had you build the wrong thing [ __ ] and that's been a consistent thing for me recently and I've been feeling like pretty bad about it because like our engineer like half of the work by two of my Engineers over the last two weeks has been thrown out because I changed my mind on things and I'm trying to find the right way to be cool with that and like make sure that the environment's positive despite that because that exploration and experimentation is a big part of what I trust them for like if I was doing this myself still I would have been much more okay building the thing realizing oh this is the wrong solution throwing it out and redoing it if I'm going to scale myself I have to scale that part too so I have to find a way to prototype to experiment and to not feel bad when I'm throwing away a bunch of code that my teams write mhm yeah I mean this might not be a solution but I feel like being able to uh give employees the encouragement and freedom to experiment with those kind of things on their own independently and not part of not like if if you're not the one who told them to to build this thing and they were like oh this is a this is a cool feature uh uh let me try to write some code for it and then like bring it up the ladder and see if they like it I don't know if that's I mean that's the kind of thing that you can't really tell people to do but building building an environment where it's possible for that to happen and finding the people that are creative enough to to make that happen I feel like is is extremely hard but extremely rewarding um I absolutely like I I hope at least that I've built an environment where people feel like they have that type of Freedom I'd say that a amount of the work even like the PR's open right now are things that random people on the team were like oh this is a problem that I think I should solve either they ask if they can go do it and they do it or sometimes they just put up the pr and they're like hope you're not upset I went and worked on this because it's a problem I thought we needed to solve what I I I'm honestly pretty happy with where we're at with that type of thing and like the selfdetermination of like people picking what to work on if there's something that makes more sense than what I'm pushing the thing I'm more concerned about is specifically when and this is just inherent to like I'm the streamer at the company I'm the one who uses ping the most who uses the product the most like a lot of the things I discover building a thing the team does like the amount of dumb [ __ ] that I thought made sense when I wrote up the first proposal for the new Dynamic embed system and handed that to Mel and like every couple days it hit me up like yo this seems weirdly complex what was your goal here I feel like this might make more sense I'm like oh [ __ ] you're absolutely right I was overthinking this for no good reason do it that way and like most of the hard tech problems get solved that way but the product stuff you just have to have it in a state where you can use it and play with it and that's like a Vibe you can't get that in Dev you can get that 80% of the way through Dev when you start playing with it but having people build things with a high chance of being thrown out still feels bad yeah H yeah I I mean I feel like that feeling is both normal and also fairly uncommon I would think like I feel like your situation with ping being both the you know the leader of the developers and also the person who is and also the customer right that's that's weird that's not very common so you're in a you're in a weird situation yeah I think it's our biggest strength in a lot of ways too though like we're all kind of like twitch degens that watch streams and hang out and these things I make the most content for sure but it like we all get the space there's nobody at ping that doesn't at least vaguely use twitch and YouTube and explore these types of things but the the much deeper I use this product almost every day to make content with it is a fundamental difference that doesn't exist in a lot of companies and it definitely means I feel weird because I have the technical background to know how hard the thing I'm asking for is and to feel even worse when I tell them to throw it away but I also have the product background where I feel obligated to do that yeah wow yeah I haven't I don't think I've really been in that situation before so it's definitely something to keep in mind I feel like a lot of actually no you're you're i' I've done that to myself I haven't really done I mean of course I haven't done it to others cuz I'm not leading a team but I had this huge huge uh project that uh I was writing in Rust and it was also my introduction to rust so of course it was like I was doing a bunch of [ __ ] wrong at first and then I I had to rewrite the basically the entire project two or three times just to be to just to get into a state that was you know possible to possible to develop basically so yeah I think it's a it's a very that part's a very common problem yeah I I love these talks I know everybody here is more around for the the Deep Tech stuff like why is flutter bad but I think these are some of the most valuable conversations we can have being like a a more senior Channel like these are the things you think about when you're building teams and making decisions and running [ __ ] and it's like I don't know if I've said it but like it's on your side I don't care you're [ __ ] 19 and you're already running into these problems that I started running into in my like mid to late 20s it's nuts and you've been so it's it's awesome getting to have these conversations with where you're at in your career and I hope we can chat again in a year to hear all about how these how you've learned about these things and keep growing yeah and by then squel will be possible on the edge and also web soers will be amazing so looking forward to it I've been waiting for at least a decade on the websocket thing so don't be too excited for that one definitely want to open things up to chat if you're down to take a few questions from them absolutely sure go nuts chat I don't feel like setting up Z or uh zt3 G so just ask in chat and I'll ask away here also sorry YouTube chat I saw people asking if I check it I do not super actively and I can't show it on stream because of uh YouTube not knowing how to moderate things oh actually with with you here and YouTube API yeah yeah with you here and with Aiden and chat I think we go on a fun moderation subtangent quick uh okay I think twitch gets a little too much [ __ ] for the safety story simply because of the delta in response time difference between twitch and YouTube and how that like affects the impact of a of the content so like if I leave an inappropriate comment on YouTube and it takes YouTube 2 days to delete that comment comments get viewed for years after they're made so even if you kill it two days in chances are that comment hasn't been seen that much and that slow response time isn't too big a deal whereas if you have an inappropriate message on Twitch and you delete it in 5 seconds that message has been seen by everybody who's ever going to see it already yeah interesting yeah that's a that's a that's a really interesting take uh and I think especially I think that's also important when you when you look at like the the live streams that twitch has to take down right like T TOS breaking live streams those also are are uh in a similar place right I think twitch as a whole is like not only the chat but all parts of it yeah the live content moderation is multiple Dimensions harder to do optically well than async moderation where like a live stream can be seen by three people or less and get taken down and that will be a gigantic news story a YouTube video could be seen by a 100 thousand people and get taken down and nobody seems to give a [ __ ] because it's been taken down you can't see it anymore but live is live like the once the damage is done so to speak even if the damage is immeasurably small it's so yeah it it feels like twitch doing better looks worse here which sucks because now that I'm using YouTube live and YouTube live chat it's apparent like obvious that YouTube's moderation story is so much worse than twitch is but I never felt that before because of the async nature of the platform yeah I mean YouTube has you also has like a lot more technology behind it because they have they have [ __ ] Google they have Google's you know know AI [ __ ] and I guess twitch has Amazon a bit but I feel like technology wise YouTube has a lot more potential to to you know make it faster make it fast enough and they haven't yet and if they have they have done it in the incorrect ways o one more spicy YouTube Take I think you're uniquely qualified for this one my current understanding of like YouTube's product approach is rather than trying to build like next Generation cool things to like take on Twitch and take on Tik Tok they're experimenting with how cheap can they keep YouTube feeling like unique and fresh in a way like how can they insert new gimmicks that keep the your experience on TW or on YouTube feeling a bit more [ __ ] what's the word that I'm looking for like not varied but like yeah I I think of the word but like I think that shorts and live on YouTube are less comparable to like VOD on YouTube and more comparable to like how the weird like tarot card reader game was built into the app it's like how little money can we spend to get into this space and Vary the experience our viewers are having a bit more to make YouTube feel like a little more unique and a little more fun cuz watching roughly the same length of video over and over again gets boring how cheap can we add live how cheap can we add shorts how cheap can we add a variety of exper basically how how cheap can we copy these things from other comp companies right like I don't think and all of these new things are are I don't think any of them are unique unique I think they yeah I get your about making the the YouTube experience unique but I think most of them are are just yed from from other places I I think they're very novel and like it's funny because when you're on Twitch or you're on Tik Tok it feels like this is a competitor for YouTube this is a whole new type of content but to YouTube it's another it's like a piece of novelty it's almost like a a sub like like a mini game built into the YouTube experience and yeah yeah they haven't held on to any of them I feel like like what's the last YouTube feature that they added and kept like uh I mean they've removed a lot of stuff I guess I mean shorts seem like they're they're here to stay right just because the that's what the environment is like now with the with Tik Tok dominating right uh but yeah I mean having looked at the internal way that they Implement I mean I've only looked at the the live stream and the live stream chat but it is is definitely a bandage over the rest and not not uh definitely something that was built to be built cheap and I actually talked like right after Mogul TV launch I got a I got an email from one of YouTube's uh web engineers uh and we we talked for a bit and it's it's going to stay like that they're not going to redo stuff the they're set with with their Solutions and they're it's not like it's going to get better which is kind of crazy yeah I definitely have felt that it it doesn't seem like they're investing in it to meaningfully challenge twitch so much is how cheap can they take some market share as an experiment yeah companies are too powerful nowadays yeah um yeah I mean this is my [ __ ] take on the the YouTube chat after having seen the the API because you know of course it's it's probably most people know who have looked into it it is polling it's not over websocket like Twitches is it's a it's it's like a a long pulling or no it's a short I guess it's a short pulling solution right which is already cringe for live chat but also they transfer all of their UI over the network right so each chat message is like a a Json object right but it's all it contains the the [ __ ] uh UI structure the UI layout which is insane for live chat uh it makes a whole lot of sense for everything else because you know that allows you that gives you what you're talking about with react native that gives you the freedom to to basically deploy a a parser for your API on all platforms and then update everything for free without having to go through the Apple or Google I guess that they are Google but that's that's super powerful and that's super cool but doing that for live chat every single badge that you are sent is not only the full URL to the image but also the full accessibility data the full metadata it's a it's like it there it's it's something that could be five bytes of of data and it's 500 and it works and it is cringe God that's so bad wow I did not know it was that rough but Jesus yeah they trans they they transfer the the [ __ ] Conta text menu for every single chat message and you wonder why the the YouTube chat experience is so bad I've had I had the my my browser crash multiple times and I think this is Common from from running out of memory from for just running YouTube chat there are ways where they could garbage collect and make a good like render and Destroy story for that but it sounds like they just haven't which doesn't surprise me but painful yeah it's it's just a it feels like a quick hack over their existing platform and they're they're not going to improve it because they don't need to because they don't care enough yep yep that reminded me of uh just one of my favorite like one-off experiments that became a big thing uh like just the idea of using data as the UI describer or like description and like render method are you familiar with the sqlite stuff that messenger is doing for like the Facebook Messenger iOS and mobile apps no I I'm not the entire like framework and UI layer is defined in sqlite so when they want to ship a UI change they ship a SQL migration to your client and it runs an update that way okay that that is that's interesting I guess that's pretty cool feels like all these companies have built [ __ ] solutions to get around having to ship new new binaries right yep it's so essential like when you have a bug in production and you need to make a change to your app like you the one I run into a lot is like a mobile Dev is oh on the iPhone 5S or the iPhone 6 one of these small screens this button doesn't render because the screen's too small I need to go like add a container to make that render correctly I don't need to go through app review to fix that and even if I do not every user is always updating their apps so if somebody happened to install that app on that device during that bad window and then they find that bug four months later even after I fixed it they're going to file a ticket all the same because they don't know their like three major versions off on the app and it's when you have no way to control the code that your native binaries are running and like defining like the relationship between your code and those native Bings is one: one and you have to ship that way you can't stop users from being on outdated clients and that sucks do you think that this would be a bad thing uh like you think it would still be a bad thing if it was as easy to run what code you want on mobile devices as it is on on desktop devices like if it was as easy to do because you can have native apps that auto update on on desktop pretty easily if it was that easy on mobile do you think it would still be a a necessity or do you think not uh that's a really good question [ __ ] I don't think it would be a NE necessity but it would still be very valuable for the majority of developers because even in an app like electron there just aren't native changes happening a whole lot like the like in react native the thing that 99% of the code and writing is in is the JavaScript layer that tells native what to do and I shouldn't have to change the native binary on a user's device to make changes like that and there's of like admittedly kind of dumb cringe things I would do to take advantage of the binary swapping like on a holiday I'd have a branch that has a fancy version of the UI with like St Patrick's Day themes and [ __ ] and I'll push that at the beginning of the day and I'll push Maine again at the end of the day and those types of dumb things are way more things to consider if you are building natively and updating natively sure I yeah I agree but I also think that having that be like I it would be it would be better I think if all like you do you can do a lot to make a a native app that is or a non-native app that is getting all of its code from the internet you can do a lot to make that a good user experience but I feel like if you can do it through just a binary update that's that's better right like if you can if you don't have to have the app make it a billion Network requests every time it boots up to load your your JavaScript then that's you know that's nicer I think it doesn't have to the the quick fix that like Expo does for example is every time you make a native change like you change the packages that have uh univer unim module bindings it bumps the native version one so that the next time uh you publish a JS bundle then it won't load on a device that doesn't have that native version bump on it and the next time you the app if you're on the latest like native bundle but there's a new Js bundle when it like gets when it processes it first request or it checks like the metadata header and it sees that its version's out of sync it can reflash then there is like a waterfall there because you're not requesting the bundle on every like opening of the app but you can check if your bundle's latest or not before doing that load which is what all these systems do by default including like electron update and react native with Expo sure do you think that the that having this everywhere is the future then do you think that native apps should be phased out not necessarily there's a lot of things where Native just is better it depends on like where is the concern area for what you're building with something like OBS UI is not even in their top 10 concerns that's apparent and as such their focus on like the QD native bindings makes way more sense whereas something like Discord should be at as like browser based and JS based as possible so they can ship updates without having you be forced to install a new executable and the other real reality of the binaries is those binaries are 100 to 300 megabytes sometimes in the JS bundles like 400 kilobytes yeah yeah that's true I just feel like making everything a browser just feels wrong to me like it I I I I know it works and I know it is has a lot of advantages but I feel like if everyone could take the time to write stuff natively and I guess this is what flutter is trying to do then well I mean compiled to native code and compiled to a a binary that is not does not have to bundle an entire I think that that's a different definition of native it's like natives a platform a framework into a runtime in most places where like like like a canvas in browser is not native a cro like like flutter is using the same skia engine as Chrome they both use the same thing to render UI the only thing that's more native about flutter than about Chrome is that the code that runs what goes on in the UI is a little closer to Native but when you look at something like react native on desktop that's JavaScript code telling Windows which Windows button to render that is actually telling the native framework and platform what to do but it's being told that from a JavaScript abstraction flutter has flattened the space between those both where it's further away from native so you're throwing away accessibility Primitives you're throwing away performance optimizations you're throwing away any happy story when the Windows update happens that doesn't use things that or that changes how the button looks sometimes but what you're gaining is a theoretical performance win doing animation type tasks where in your user land like the the layer you wrote in Dart you can move a button two pixels to the left every frame and that's fine in JavaScript what you're expected to do is tell native hey every frame move that over but you tell it native you tell native that once in flutter the runtime is faster enough that you don't have to to orchestrate in that way if that makes sense I guess what I want then is uh is is is react native but you write the code in Rust someday someday assembly script looks cool reason ml's okay or not Reas ml rescript looks interesting I would love a future where we could write native e code that feels like writing react and react native but what we've seen in like the browser for examp example with u which is the fastest react or the fastest uh framework for rust in the Dom and in the web is that the performance isn't that much better than react and it's not better than solid JS which is weird but yeah the The Binding layer there tends to be the slowest part if they make the bindings faster which they're working on that should be a lot faster but if the bridge is slow then The Binding is slow too even if the runtime is fast and flutters abstraction is inherently so abstracted that there isn't much optimization to do whereas in react native we can take what's going on and flutter and then run it from react native we can build something like the new flat list that just got put out by Shopify that makes lists and like long list performance in react native like 60 to 80% better those types of optimizations are possible because the abstraction is one where we tell native what to do and we can do lots of different things there with flutter it's all dependent on their engine interesting oh well that I guess yeah that's that's that's a good point I guess then you just have to rely on Native being able to do that which it usually can I guess yep and you have to rely on really smart people to build really performant bindings like in this case I trust both meta and the engineers on react native as well as Microsoft and the engineers they're putting on react native for Windows and Mac Microsoft is working very hard to make react native work for multiplot on desktop because they're using it for like office stuff now the new office like contacts and people widget on Windows and Mac is using react native by Microsoft wow that's that's kind of crazy if you think about it that's a that's a a company who's built an operating system system and then built apps for that operating system now using a third party solution for making apps easier to build on their operating system yep I think they'd be able to just do it themselves but they built windows subsystem for Linux they gave up yeah that's true that's true that's I I love new Microsoft for that reason though they they know what they don't know now it's it's such a change like Sach has killed it it's like we suck at these things let's stop pretending we good at them let's Embrace what people are using now that's why typescript exists that's why vs code exists vs code is such a cool example of that where they looked at Adam they're like yeah this is a tragedy but there's some good ideas here what if we took our best-in-class IDE team that has made some of the best coding environments in the world and had them work in a chromium like electron shell for a bit and it turns out vs code's [ __ ] awesome yeah yeah it is very impressive that you know they've been I I think I use Adam once or twice it's it's uh it's crazy that or it's it's very very lucky that we have a solution as good as like this is the place where you need the solution almost the most and we have one which is nice yeah are you familiar with the history of electron at all uh not super familiar no you know it started as part of atom right oh yeah it's it was the same same company that managed both right yeah yeah do you know what the company was oh was GitHub yep GitHub wanted to make a text editor after seeing what was going on in like specifically Sublime text was all the rage at the time and GitHub wanted in on that they wanted to like be involved in the editor but they had a very real problem of most of the devs at GitHub didn't know how to do Native anything and they did not want to write a native editor they were all web devs they figured it'd be easier to Fork Chrome and make a rapper in that than it would to do anything else and it seems like they were right also huge shout out bash bunny for the raid bringing 400 of y'all here for those that don't know I have Auto on right now he's a legendary Dev in the streamer space building tech for everybody from like OTV to lwig for all the Mogul stuff over on YouTube and we just been chatting about webd software and how he build so effectively as a solo Dev yep yeah uh and now you see GitHub in the browser having vs code available for all their repositories which is it's kind of crazy oh and now GitHub is owned by Microsoft right who who has the same who who wrote V code so I guess everything's kind of come together yeah one of my Hut takes for a while has been one of the best reason or how I put it one of the biggest incentives for Microsoft to buy GitHub was electron it is such an essential part of Microsoft's future of embracing web Technologies as the happiest path for devs to build user experiences and combining that with their work on react native with their work on like the Windows like subsystem layers so that you can have a good Dev experience like all of those things are Microsoft acknowledging their failure to provide good ways to build software on Windows and embracing the solutions when are we going to start shipping operating systems with electron installed by default and then every app that used electron would just you know launch the the native version of it funny enough Chrome tried that and I think Microsoft's working on that with the new like uh Edge is now chromium based like the edge browsers just uh electron now I could see them doing that I I've heard a bit of rumbling there it's not anything particularly like likely to be adopted but Google's experiments there weren't great chromos did okay but I think that the goal is more move out of chrome when we can and deal with it as AEP when we can't just yet I think that's what to is doing right because to uses uh the the systems browser version instead of shipping instead of shipping a a full chromium package uh and to is pretty cool I wrote an app in it and it was fine the only thing was it it a the whole thing about it is like oh you don't have to ship chromium with your with your uh system or with your app anymore you just use the systems version of Chrome and I deployed it and it was it did not work and I had to install the edge run time to make it work so I was like I I guess it's almost there but uh I don't think I don't think the the OS is ready yet yeah I I have not been super impressed with Tori I am excited that there are more ways to build web apps native e but I yeah Maple just made a really good point in chat the use the system browser circumvents the whole don't worry about app specific things and platform specific things that like electron solves really well and so much of like the ecosystem in electron hard to leave behind I mean oh yeah ecosystem I'll I'll totally totally agree uh but like hypo like you're trusting the the operating system to [ __ ] have an API to create Windows right to create notifications to create a system tray so if you're also now just adding you're trusting the operation to have a a browser available that doesn't seem like too big of a a jump to me it's I I would invert it as we trust the platform to support Chrome and all the things that Chrome needs I don't trust the system browser to support Chrome and all the things we use Chrome for in electron okay yeah I guess maybe not yet I I I think this is I I don't think you can say that forever I think that especially because Chrome is turned into this you know everyone needs it now then I think that there will come a time when this is the best solution I'm really excited about like what Google was working on with fisha back in the day I haven't heard too much rumbling there I hope the project isn't dead yeah they're trying to like merge Android and chrome into a or Chrome OS into a a mostly web-based OS with like like native bindings built in and a like a Rea or an Android runtime Target that compiles to their weird like f shazan thing that's about 90% as performant as native Android code so uh that is yeah that's interesting I I'm looking up it up and it seems like uh seems like they're using internally but I don't know if it's ever going to become a uh like a a publicly used thing like they're using it for their smart home devices now yeah I I honestly think considering how hyped I was on it like four or five years ago when the talks first started and we haven't heard much since I'm just assuming it's dead honestly like most of the fun things I heard Google was working on Google's killed a lot of things yeah but I mean hold on if fuchsia becomes a thing flutter would be native for it then you could use flutter you did it you got me that that would actually kill so much of my flutter critique yeah I mean that's fine I think at that point you're like okay cool here's this here's this here's this uh thing you can use to build apps for fuchsia that also just happens to support every other operating system in a at a basic level and I think that's that's valuable totally agree I I I think the OS is where a lot of these things have to happen like op operating systems haven't seen much Innovation for a while now and if you were to do things better there you could do a lot of cool [ __ ] yeah I guess the really the only place where that's ever going to work is uh is mobile devices and to be a company big enough to be able to uh build mobile devices and also be able to build your own OS is there's only a couple of them out there and Google is the most likely I think there's a better place consoles and TV boxes interesting consoles right now what do they run they run they run their own now they're pretty traditional uh up until the Xbox One and PS4 gen they were all running weird stuff so like Xbox 360 was running power PC processors from like the old uh like mac days the PS3 was running a super weird custom like six core chip where every core had a different performance Target uh the okay we and the GameCube were both running like the same exact power PC processor and AMD GPU they just overclocked it in the Wii the PS4 and uh Xbox One were the first generation where Intel just kind of stopped improving performance on their chips and they kind of had to eat that which is why that generation was the first gen with no backwards compatibility where you couldn't play an Xbox 360 game on a one and you couldn't play a PS3 game on a four it wasn't they want to be evil companies it's literally the the chip is a different architecture yeah okay I wonder that that that could work for for that kind of thing where we're talking about custom operating systems but also that seems like a good space for for what Apple did which is make their own [ __ ] silicon and then put it in their devices only justifiable if you have unlimited money and actually profit off your Hardware Sales like apple makes $1,000 on a $1,300 iPhone sale Microsoft loses $100 on a $500 Xbox really that's crazy Microsoft's hardware for Xbox and gaming is at cost to the business wow okay yeah well then yeah I mean it's that's the level where you don't really see the the the OS you see the the things that are built off of it right and at at a certain point like if you get old enough it was all like there was no OS it was just or there there was there was no difference between the OS and the things running on it it was just a a system yeah like the system booted to the game you put in I yeah think like right now we're in a unique juncture where Microsoft's taking Xbox software way more seriously like first off it runs Windows now they don't say that too loudly but it is actually windows on the Xbox you can write a Windows app and run it on your Xbox which is nuts the other side is all of the Windows like features they've been pulling in that are hard to do right on Windows for like more instance and application specific stuff but are easier when you own the like whole runtime and like like multitasking solution like you do on Xbox like I'm sure you're familiar with hibernate on Windows where you can turn off your computer and it turns back on immediately because it saved your RAM to your hard drive and loads it back up yep do you know they have that on Xbox now for your games when you switch games it will store what you have in Ram in your hard drive or in your SSD and when you open the game again it loads off that that is that is pretty impressive yeah a game resume on Xbox series X is about 500 milliseconds or less and on PS5 it's multiple seconds huh and you don't even have to rely on the the game to do it right you could just do it as part of your OS in fact it breaks some games because they have weird like they use a clock to determine something in game but when it restores for memory the clock's off so it does break a small handful of games but most handle it fine interesting yeah but like that type of innovation I think is more doable on consoles like an TV and things even on mobile due to the the more ownership you have on the like compatibility story because compatibility is always going to be the killer yeah I mean I guess game engines or g game consoles have just succeeded in in forcing the developers to to write a different program for all of the different systems instead of them having to support them and then you know game engines now compiled to everything but if you have to the the uh the developers have to pour stuff over instead of the systems being compatible with each other which is interesting the the real owners of the future are the owners of the run times it's not the hardware manufacturers it's not the OS manufacturers it's not us as like user facing devs it's epic games with Unreal Engine it's Unity it's Google with chrome in V8 and it's like flutter to an extent here too but like what whoever owns the runtime determines what's supported on both sides and if you don't have a lot of faith in the owner of your runtime you're [ __ ] that's what's happening to Unity now right yep which sucks because Unity enabled so much cool [ __ ] and now it's probably going to die a really painful violent death yeah I mean I I don't like Unity that much personally but I I can concede that it's done a lot for for the industry hey one of our favorite games ever was built in unity I still can't believe that outer Wilds was actually built in [ __ ] Unity but it works it it does some [ __ ] hacky [ __ ] I've seen the I've seen the stuff behind it it is it is crazy that they got that to work I've seen a pretty cool set I uh I got to play test the DLC way before it came out I was the first person to beat it actually which was dope wow wow that's that's that's cool jealous of it yeah I it was such a cool experience I was 50/50 like I'm friends with one of the writers Kelsey they're great and Kelsey was unsure if I would enjoy it because like the game was such a magical experience to me they were concerned that I would lose some of that magic seeing how it works behind the scenes it only made it more magical seeing like when I ran into a collision bug and I like fell through an elevator like onto a raft and instantly died a really violent death and watching Alex like open up unity and screen share it to me in Discord so I could see and he would like adjust the Collision zones and [ __ ] I was like oh there are so many of these layers of hacks that make this all possible somebody asked in chat the game's outer Wilds not the outer worlds outer Wilds really really groundbreaking indie game the less you know going in the better yeah there's rafts in it and elevators oh my gosh you've ruined it so so so many spoilers yeah yeah I mean what are your thoughts on CP because C I think was the first language that I learned on the on the computer after I got off my my of my my calculator because I it was pretty easy to just you know build a a wind form appap and that was all I could do for a while funny enough the video I filmed before this I was doing a collab with Nick white uh we did a programming language tier list that I'm very excited for him to put out and I defended C pretty hard during it I think that I think that it's in the world of C it's a very surprisingly good solution and in Game Dev I really wish it was the language that they chose for Unreal Engine like C is the main reason I find myself in unity more than for my own experimentation it's a lot easier to work with even if it's painfully class- based interesting yeah I that's the that is the part that I don't like that much about it is the feels more it feels like the coming from C to another language there are so many like convenience features and like things that aren't verbose as as verbose as they are at C there's a lot of those uh that make me not like it too much but uh it is still it's better than I mean it barely belongs in the the C family right it's more like Java but it's a definite improvement over java but it it is much more native in terms of its runtime than Java is and way more performant in that way I hate net I can't stand it personally but man I I think that c gets more [ __ ] than it deserves that all said do you know what language Anders hellberg built after C uh Lua nope it's something you use a lot more than Lua what what what I don't know the the guy who made C made typescript really really wow okay okay I can see that I think he did a better job at typescript than as a potentially yeah everybody's got to learn at some point I think that it was so cool though because like Microsoft realized similar to the combo we were having earlier like our native runtimes are not the future multiplat is necessary JavaScript is necessary if we want our if we want Microsoft code to run on every device some of that has to be JavaScript how do we make JavaScript work at Microsoft scale yo programmers who work at Microsoft in design languages please [ __ ] save us and Anders was the one to succeed yeah actually yeah I mean if uh if JavaScript gets to a point where typescript is default like bun and Dino are both doing then you know it'll eventually compile to to native code right I'm sure there's already solutions for that yeah there's a a white paper that Microsoft wrote with like a college for I forgot which college I worked with but uh it's I think it's what do they call it it was like typescript for embedded systems I think like the title of the paper but the goal was writing typescript or a subset of typescript that can compile to see and run on like a Raspberry Pi or like an embedded chip with decent performance yeah yeah I mean I like typescript don't get me wrong I don't love that everything has to be in a web browser I think that uh if typescript was a was a super fast and you know it was on the level of of rust or Zig or even go I guess I'd be a lot more happy but you know it's in a place that is good enough and we have to do a lot of things up top of it to make it usable but we've done those things mostly so I do dream of a future where the TS runtime is a whole different Beast probably a different language at that point but yeah very much aligned with you there I hope we get there but for now I will rely on Apple making their processors more powerful every year and hope that that keeps up with my code getting slower okay yeah I mean wait that but I guess that only affects a only affects a portion of the market show that's not the majority even sh don't tell the product managers okay just buy your manager a new iPhone and a new Macbook every year and they'll never notice how slow your app gets genius that's a genius solution yeah all really good points though I don't think we booked for this long but I really appreciate you for staying over is there anything we didn't touch on that you were excited about or wanted to talk or touch on I think we touched on everything I think we touched on everything yeah yeah this was quite the show like almost three hours of [ __ ] posting I was concerned I wouldn't have enough for us to talk about and um pumped that you proved me wrong there yeah I it was it was great yeah thank you so much anything that we should shout out or signal boost for you uh I mean you can follow my Twitter if you would like but I'm I'm doing fine for myself yeah you're always on top of things are you uh still streaming pretty often I've seen you few times in the past few weeks uh you know I stream when I have a project that I can show on stream and that's not that's becoming less and less common but you know I stream when I can't it's my twitch it's it's right there and the message literally five five messages up from your message this is why I hate twitch chat yeah twitch is or twitch chat's ability to read is always uh questionable to say the least yeah yeah I feel like oh did we talk about uh uh a coding on Twitch no we didn't we should go on a rant about that actually I'd love to hear your thoughts okay personally I I saw your tweet I think about how you uh aren't going to do as much coding on Twitch I think that for me and this might be uncommon but I uh I am a lot more productive when I'm coding on Twitch just by the the fact that I can't get distracted because I have hundreds of people watching me and I think that that's really cool interesting I I Vibe with that I feel like I was I would have been very very aligned with that five years ago but I've kind of like changed the things I'm working working on such that I when I want to build something I'm so excited about that thing that I can't really think about other stuff and even if I like get distracted and take a break that break tends to be a thing that I'm like going to like find food quick while this Project's infecting my brain and I try to not work on things that don't lead to me obsessing in that way and if anything twitch chat just annoys me because I already want to build this thing y'all are just making bad suggestions while I try to make it work man I wish I was in that situation I I get distracted really easily and I uh there are some projects that I can get done really fast and there are a lot of projects that I uh over or underestimate how long they're going to take and how much effort they're going to be and then I uh get demotivated on them and then come back to them months later and then forget what the code base is like and have to relearn it and then finally finish it oh I've had that exact problem play of times as well uh Jason's in chat actually I don't know if you've chatted with him before he's uh the head of the urad charity and like mental health group that helps a bunch with like they just help train Rex spin up his new like mental health thing to help his audience like get help with those types of things he's very good about like distraction management like Focus learning and like delivery he taught himself how to build like full stack apps and nextjs typescript like all the stuff we talk about here with no prev previous programming experience in 3 months because Squarespace wasn't cutting it for his charity yeah we're doing a a partnership soon I believe oh mobile moves related no [ __ ] yeah uh I haven't talked to him in depth though I think we have two messages in our in our DMS but uh yeah I mean that's that's really impressive I think I maybe I'll get there someday and I hope I do but right now my I'm not managing it the healthiest way probably but you know when I'm on stream I can I can code for six hours and not get tired so that's well and only get tired after after the fact that's not a bad solution honestly I like especially being young and like early career in that sense like finding things that work and doing them is fine when those things stop working you have people like me and uh people like Jason to chat with and help you when you get there cuz you will hit a wall and it will [ __ ] suck but you're definitely not alone when you get there and there's a lot of awesome people who have been through this and succeeded yeah I mean I I think I agree it's a it's a very good solution and there is a lot of my work that I I just can't show on stream because it is as like a bunch of environment variables or it is uh under an NDA or something right or it just doesn't make good stream content and I still worry about the you know the numbers somewhat so it's hard to to manage that and that's totally it works it works for some things but yeah yeah on my last code stream not the most recent one but the one before I was struggling a decent bit on stream just running into dumb things leaking environment variables having things not connect when they should and ended up offline like right after stream taking like half hour hour break open up my laptop again and just gunning out all the things I wanted to do on stream for the next four hours without even thinking about it and just realized after oh [ __ ] this is all the stuff I wanted to do on stream but I did it now way faster and enjoyed it way more [ __ ] I'll talk about it next stream maybe so I pull it up on next stream to talk about talk about it a bunch notice some things I want to change go and start changing them and two hours later realize I don't actually know how react Works get really angry and and stream pissed off like that's not good for anyone yeah I mean it seems like we have the opposite situ there which is interesting you get distracted more by stream and I get distracted less I guess it's because I uh I will not read my chat if they are being annoying which is most of the time learning that slowly but surely I'll get there someday yeah you're you're a better streamer I'm a grumpier engineer I think that's the difference yeah oh [ __ ] the I got so pissed at my chat live stream people are two tab Andy is now a [ __ ] joke God I love that how many tabs do you usually have oh I personally have a rule where if I have more than eight tabs open in a browser window I close the browser window but what he's referring to is there was a really dumb like you know the react 18 renders things twice in Dev mode thing oh yeah run into that yeah yeah I thought it only ran effects twice in Dev mode not it actually would rerender each component twice that's what it used to do I think before react 18 there was something that ran twice and now it just does everything twice yep and it was creating two websocket clients and connecting two websocket clients at once and you could see cuz like the console logs it would show at the top the user ID It joined with and it would show at the bottom like I was binding the instance to the window so I could type window. instance. me and it would say your info and window. instance. me had a different ID than the ID it instantiated with because behind the scenes in the background it was creating a second one and binding the second one over it but somebody in chat was insisting I had a tab open in the background I was missing even though the idea at the top was different from the idea at the bottom and both were different every refresh oh okay yeah that's that's fair enough that those are the kind I've I've those are the most annoying problems the one that are like something so stupid the solution is so stupid and yet it takes you know 10 minutes to find that solution 30 minutes to find that solution just to figure out what's happening I've had that and then I've I've had situations where I solve that and then have the same problem a months later and completely forget everything and have to redo the entire process and it's a nightmare yep yeah I I think that I've gotten better at that over the years the combination of like typescript I think it's been really helpful there prettier helped a lot there too and trying to be much more straightforward with the code I'm writing things like big functions with comments tend to be easier to dive back into than small granular functions you have to remember like once you break things across file boundaries that's no longer code that describes what it does that's a a network of relationships you have to keep in your brain and I actually really like the Dan abov take of keep everything in one file until it feels really bad to because it makes it way easier to go back to that thing interesting yeah I mean I feel like at this point it's like a lot of things are getting upgraded at once or updated at once and it's it's kind of a lot of things are also like in unstable like I had to be on a canary version of nextjs for like two months because it was it didn't support react 18 in just one stupid way uh and like I'm still on a release candidate version of Tailwind or or twin macro because the uh the normal version supports V2 of Tailwind uh and I had to install like a release candidate version of their vs code extension as well so it's like a lot right now a lot of those things are are kind of in in limbo and weird to work with I don't know if that's common or if it's just a coincidence that everything's happening once but no that's very common when you're bleeding edge in more than one place that can be really painful like it's I try to be really cautious about which edges I bleed on like picking something like Planet scale as a service they're pretty new but the tech they're building on is old as [ __ ] it's my sequel in vitess it's old open source and boring and I you got to pick some things to be the boring part in order to bleed on the other sides yeah I don't do that unfortunately because I just assume that stuff will work and then I get mad when it doesn't I find myself running uh running yarn upgrade interactive every every day I'm like o is there any updates for these packages that I can install right now yeah I avoid package updates as long as I can um yeah I try to avoid those things as much as possible because they like I upgrade when the upgrade solves a security problem or brings an immediate value that we're not like getting right now and it's easy to fall in that trap and like it just just I really like that you brought up twin because I think Twin's a great example of like bleeding on one side and boring on the other where it's bleeding edge in the sense that it's a new dynamic system built on top of Tailwind instead of traditional CSS which is a very modern and bold take but on one side it's building on top of like emotion and old school JS Primitives and on the other side it's also building on top of Babble and like a compiler time hook and those things are very old nextjs is moveed largely away from Babble with s swc and V12 which means that the only thing you're running Babble for right now is probably your Styles which means your builds are twice as long as they have to be for that one what should have been a bleeding edge decision is now actually slowing you down in a way that feels weird yeah it's uh quite annoying I I mean I haven't tried twin yet but I have seen it and I think it solves that right but twin also does it do stuff at in at runtime in the browser yeah it's almost exclusively runtime in the browser doesn't load a CSS file I don't like that I that's isn't that weird isn't that slow isn't that Jank it's or is that does it work worked well enough for production yeah it works fine enough in production especially if you SSR then it will bake the Styles in ahead of time and they're there but the first paint especially if you're in Spa first paint that can be Jank yeah I don't I don't like that I I like having stuff happen at compile time I just wish that I didn't have to use Babble to do that yeah you know Tailwind does things at compile time it does and then when I want to write CSS and JS for some something else that I can't do it yeah I just use class names it's not great but it works yeah I uh I think Tailwind or twin macro is the best solution I've I've came across so far and that's actually saying a lot cuz I've I've jumped back and forth between mui and [ __ ] Shakra and all that [ __ ] several times uh but yeah it's just annoying that it's uses Babble the chakra rage confuses the [ __ ] out of me it feels like it solves the easy part not the important one uh yeah I mean I the only thing I was using Shakra 4 basically was the uh the the [ __ ] CSS and JS and you could just use a motion for that if that's all you need yeah I I the the state of styles is absolute [ __ ] chaos right now Tailwind just threw a huge wrench into everything and we're recovering s yeah yeah I I mean that's a thre a good wrench into everything though which is which is nice it's good that tailet is really good I'm arguing with Aiden and Maple in chat right now yeah iuck one more spicy take uh this is a recent one that I'm pushing more especially on you spelt folks because it feels like yall kind of get this already I'm beginning to think in like given a react component everything above the return is your logic Like Your Hooks your data processing whatever everything below the return is your markup that can be styles that can be like HTML that can be other components that then handle their own things but I try to treat return down as like a contained markup and above that as the logic rather than trying to like interrupt them like things like higher order components and [ __ ] where the return does data manip I hate and I want to avoid that in favor of that being the section where Styles occur um yeah uh that makes sense to me that is I'd say that's true in like 99% of cases unless you need like to to build like a an array of components before the return but it's pretty rare but my thing is if I want to just have like a a [ __ ] dialogue where there's a a button that does nothing but set State open or set open false I I can just use spelt and just have to do bind colon open and then it will do everything for me and I don't have to worry about any of that State Management it is a [ __ ] blessing interesting I'm I'm getting so distracted by chat now I yeah I'm a really big fan of inline Styles and I will defend them till the day I die yeah I I like inline Styles as well I don't think unless you have like some really complicated key frames and [ __ ] inline styles are are the best good [ __ ] I think that yet another style rant is a pretty good place to end this on anything we didn't touch on I feel bad keeping you for literally over three hours but I appreciate it immensely uh I just want to end on one more thing which is funny you mentioned the the [ __ ] style object because this is my this was the code that uh behind like this is an illustration of how far I've got came in in two years this is the I Dam it to on Discord um this is the code of the thing that was like my my introduction to lwig uh and it is Javascript and it uses an inline style block for everything in this entire project I looked through I was like what the [ __ ] did I actually do this um yeah fun this also just use next this is electron and like create react up I think the only thing I hate here is that you're creating jsx outside of the return I would have just mapped it but whatever uh yeah I don't know if I knew that existed at this point but you know but no I mean you have to hate that I have a [ __ ] style object there and it's JavaScript and I said react. use context instead of just importing use context and no uh well I don't hate any of those things I hate all of them now I honestly don't think any of those things are are particularly I wouldn't have blocked this in actually I might have blocked on code review CU I would have said put the badge array map where like badge array exists here but like inline Styles totally fine with me I might have defined and I would have even Define the object because then you lose the type inference yeah I would do that in there I actually am totally cool with that and uh yeah the the react. use context I don't think it's worth importing a thing if it's only used once like I like this because you have to import react anyways for this to be a valid react file and we only are using this one thing so react. use context is fine I tend not import if I don't have more than one instance of the thing being used okay sure I guess I was not awful back then but I definitely wasn't comfortable enough to to be great you know I've I've become I wasn't comfortable with reaction arrow with this I think yeah the only thing that's scary here is the indentation uh this it just no it's just just tabs this just tabs do you not like tabs I am okay with tabs GitHub hates tabs yeah okay good because GitHub should just what is this eight character tabs it looks like it yeah yeah okay that's I think there's a setting for it somewhere I don't feel like finding it I'm sure chat's spamming me with a here's where you go to make tabs the normal size and good for them yeah uh it's fine that's not here come the you can set your indentation and settings wow settings where's oh no I'm leaking my email that's public I add question mark TS equals I'll do two that's not an equal yeah that works cool that's actually really cool you put in the URL that is nice good [ __ ] good call I said that crazy anyways I think you're being too hard on your old code I if you want to see actual [ __ ] Jank code go read the source for uh what's it called uh [ __ ] Chrome Tana which was the first project I made it was a Chrome extension to redirect Bing searches if you used Cortana on Windows it is so bad okay okay I will look it up on your GitHub which is I assume how you found the the outer Wild Thing pretty proud of that I was actually hunting for an asset to use for your like SVG in few on stream ahead of time oh people in chat are freaking out that I made Chrome Tana that's like it did have like a million installs on Chrome I can see why people would remember that but yeah I made that in college good times oh this is funny I uh I have a GitHub co-pilot for free because of my Among Us mod that has like 2,000 stars that I have not updated for two years very cool I love I don't know how I got it for free I don't know which of my projects or which of the like orgs I'm in got me my free co-pilot I wish it would tell me cuz I'm in a bunch of [ __ ] I want to know which it was yeah I I probably wouldn't have paid for it and I would have been sad cuz I go Pilot's very nice I absolutely would have paid for it sorry are you there oh yeah sorry you know I was going to say that like I would pay for it and somebody in chat asked if I got it from the T3 OSS have you seen create T3 app by the way uh yeah yeah not particularly useful for you because you assemble all the [ __ ] yourself but for like anybody who isn't as familiar with the tech or is getting started or just wants to like start a new project correct I'm pretty proud of what the community's built there I didn't build [ __ ] any of it I just complained that it didn't existed or exist and the community went and built it but it's about to hit 4K Stars on GitHub in a month and it's over a thousand or 10,000 downloads now it's really taking off yeah I project scaffolding is is harder than you think which is why I'm now building a whole ass admin panel for Mogul moves that has a you know a full component library and all this [ __ ] and a a template for making new merch websites yeah I I'm excited for that to all be open source I I'm gonna really date my twitch knowledge here but I can't remember the name of the project but the original dgg like custom twitch rapper with its own chat and [ __ ] for Destiny's Community was originally open- sourced and uh that became the standard that a lot of different communities use to like build their off twitch communities and it's really cool how quickly those open source projects in the Creator world can take over yeah I don't know if it'll be open source just because it's like a you know it's a from merch websites so it's like proprietary I guess it's a competitive Advantage I don't know I don't I don't like making a lot of things open source because Kink kind of spoiled that for me with all the [ __ ] issues about from people who made a GitHub account just to make that issue you know what I mean that's fair when when your stuff's like user and viewer facing that could be much more annoying like having people who are like playing a game that your Tech like works with making GitHub account just to yell at you that they lost all their [ __ ] like I can't even imagine yeah uh yeah but at least it gave me the free co-pilot yeah I yeah this was a fantastic chat I rarely run out of things to talk about but I think we've touched on so much good [ __ ] here here I super appreciate you for taking the time to hop on like seriously this was an awesome conversation I hope we can have more like it in the future especially as you keep like leveling up and being part of the grind like just from how much you've like learned and changed in the six months since we started chatting I can't even imagine where you're going to be in a year or so yeah I I hope I'm in a good place and I yeah thanks for what you've done for me for for helping me get there for sure all did was like one quick call where we were just talking about like Creator Tech stuff and I showed you my stack and you're like yeah this is interesting and then went and learned all of it yourself all I did was show you like three things yeah but you know you also give input on that uh like component Factory thing that I made which I think is cool I don't even remember what that was so it was pretty simple if yeah like I think that you it's it's easy and like everybody here does it too it's easy to assume that a lot of your like like when somebody helps a little and it feels like a lot it's easy to assume it was when it NE when it wasn't necessarily like if I didn't show you these things someone else would have and you would have found all this [ __ ] the same it just I helped you get there a tiny bit faster well those was help still and I appreciate it course super happy to be able to do it and uh Eric maybe promised to say hi on his behalf shout out to him for intro Us in the first place oh yeah yeah all right well it was absolutely a pleasure thank you so much for having me on here uh I will open source my little talking Avatar a lot of people in chat were excited about that including ping employees so I'm sure they'll be in that source code soon and if uh you see a new visualizer for voice and like Graphics in ping soon you know where the source came from yeah it took me it took me five minutes to write perfect and it'll take us like two weeks to rip welcome to open source thank you again man really appreciate you for stopping by yeah it was great talk to you later peace bye switch to this view we did it y'all what a show so pumped that we managed to get him on I was hopeful that combo would go well but yeah holy [ __ ] that was a lot that was a lot of really good convo I'm so excited to get that one out on YouTube I uh yeah good [ __ ] I hope that y'all enjoyed that even like a third as much as me because that was a very needed stream needed a a a guest with more energy than me and it was nice to have that anyways how are y'all doing chat's been chaotic I've uh seen some new recent favorite messages uh the person who is [ __ ] on my clickbait and my complaining but now they watch literally every one of my videos uh when you're saying my voice is delayed which way is it too slow or too fast I I'm guessing wavelink is [ __ ] itself because wavelink likes to [ __ ] itself recently uh wavelink I don't even have the plugin that's slow on if I turn it on it gets eh maybe I have to turn it off there weird weird if I delete it oh it crashes how's the latency now H it's ins sync on Twitch interesting it's probably the twitch player that makes me feel better okay I'm gonna add back my noise cancelling then because I miss it again I lost my sound cool there we go all fixed roughly where I like it to be anyways I had some topics I wanted to talk about today I need to do something that's youtubable my streams recently have not been particularly chopp uh somebody asked if I can go on a rant about like Rich Text Frameworks like slate not really I don't have enough opinions on those things I don't use them enough I just like markdown uh oh the react file structure thing that would be a good clippable content moment uh should probably update my YouTube thumbnail but I'm lazy people are just going to have an outdated experience on YouTube as now they're used to that it's YouTube uh file structure probably sucks cool new stream title let me get my la top working I got to close a bunch of [ __ ] command q a bunch of [ __ ] close close close close Jesus Christ I had so much sh open might have been faster to reboot at this rate uh good enough the brightness up and now yay screen cap worked for try that never happens good [ __ ] I want to talk about file structure in rea act because I saw an awful video recently uh here we are uh our good friend webdev simplified made a video about folder structure and react and I think I disagree with every single point he makes in it so we'll watch this at 1.5 and I will pause and rant throughout because this this one's this one's rough yeah senior react folder structure right I I kind of want to make that a new community meme like is your folder structure senior though to structure your folders and files in react is quite difficult because react doesn't give you any help they leave it entirely up to you how you want to do this structuring so in this video I'm going to go over three different examples of folder structures in react and these are going to be for I just realized you're probably getting double audio because how I have that routed let me I'm so bad sorry y'all users because a folder structure is beginner or intermediate doesn't mean I might switch off the 1.5 because that's a little aggressive for this video it's less good than the it's popping why the [ __ ] is it popping I'm hearing it crystal clear for once like for the first time ever audio is working fine for me monitoring [ __ ] Christ looks like we're going back to the watching it on the Windows computer and window capturing hate this solution but at least [ __ ] works game cap oh no y'all are seeing my dashboard where you can see I only have 743 subscribers right now we were about to break a thousand y'all what happened obviously huge shout out to the gifters who got us over 600 where we were before the stream started so shout out to everybody who's been contributing but man our sub count is dwindling can I I'm trying to find this video the easiest way I'll just history it cool hopefully I can switch over that window and this will just work cool uh let's make that a little not mini player I want theater mode cool that's as good folders files and react is quite difficult because react doesn't give you any help they leave it entirely up to you how you want to do this structuring so in this video I'm going to go over three different examples of folder structures in react and these are going to be for beginner intermediate and advanced users but just because a folder structure is beginner or intermediate doesn't mean it's less good than the advanced version for example smaller projects definitely benefit from these more beginner approaches to folder structuring while larger Enterprise style applications are going to benefit from the advanced section [Music] welcome back to web def simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project Center and today we're talking all about react folder structures now to get started I'm going to be covering the beginner focused project layout guys we're 46 seconds in and y'all are distracting me with like the worst questions in chat [ __ ] I have to go on a a quick side rant how do you deal with a cooworker who makes spelling mistakes in 80% of their commits it's not in the code why the [ __ ] do you care squash if you really care go squash commits are not where you should be reading like I there are few things I give less of a [ __ ] about than commit messages I actually don't care it's not OCD compliant cool that that sounds like your problem not not theirs yeah I yeah my my commit messages are where I go to vent not where I go to spell correctly like come on I I I couldn't give less of a [ __ ] do whatever you want the commit messages then we're going to go into intermediate and then we're going to go into the advanced one but like I said at the beginning make sure you watch each one because smaller projects definitely benefit from a simpler more beginner focused approach now for most people when they get started and react their Source folder is going to look something like this and the whole Crux of this video is going to be focused entirely on this Source folder because really all the other components like your public folder your node modules and any package Json and eslint files those are going to be very project dependent but this I hate this layout so much there are so many things and there's so little hierarchy Source folder is where all of your main code is going to go and you see here that we have three main folders inside of the project we have a components folder we have a hooks folder and a test folder and this is very indicative of lots of react projects they just shove all their components inside the components folder any hooks that you have go in this hooks folder and then everything else just kind of sits inside the source folder so you can see we have like utility functions like format date format currency we have our CSS inside of here and inside this components folder you can see we have components for everything from like a simple button all the way to more complex things like a form input or like the new to-do model or a Navar so everything from like super complex things like the entire homepage all the way to simple things like a single button are going to be inside of this one I hate this so much do yall understand what I put myself through for your content my head hurts from how hard it just hit my desk group your concerns by the concern not by the rough technical concept keep ranting and when you're working with a smaller project you know like a simple to-do list like that this project that's just a simple to-do list it's fine you only have you know 10 20 components they can all fit inside of this component's folder and it's pretty easy to understand what's going on also you can see we have our hooks separated out which is just kind of a handy feature to have all your hooks in one place to make it easy to reference those in your components and that way you know which are components and which things are hooks now this is like I said good for smaller projects but as you start to scale up this components folder is going to get really unruly because you're going to have so many components shoved into this one single folder I'm not of his hair I'm upset that somebody can have such good organization of hair and such bad organization of everything else it's going to be hard to know what are Pages what are small components what are stateful components presentation components so with all of your components in one place it's hard to distinguish what is what also you'll notice we only have a couple folders so things like our you know format currency and format date these are like Library methods or util methods these are all shoved inside of our source folder and if you get a lot of utilities such as tons of different formatters and different different things like that this Source folder is going to become very large very quickly which is a huge mess to work with another important thing to note is also our context is in here so our to-do context is inside this Source folder and our test folder here contains test for everything all in one folder so you can see we have our test for all our components our test for our Hooks and so on you can imagine there's more tests inside these folders but this is one thing that I see in a lot of beginner Focus projects is they put I I don't even have words components abilities such as tons of different formatters and different things like one thing that I see in a lot of beginner Focus projects is they put all their test code in one location and then all the rest of their code in a different location so it's kind of hard to know which tests are associated with which files because you have to like go into all this different nesting and your test are not anywhere near your components so if you have test it's generally better to put them next the actual code that is testing so it' be better to have your test in this components folder or in this hooks folder for example but again since this is such a small project it's fine because there's only like 20 30 files total so it doesn't really matter that they're laid out like this and when I'm ranking small you know little to-do list applications and so on this is how I format my code generally but let's say you want to step it up to the next level to a slightly more advanced project not super large but still quite a bit larg to everybody in chat asking no he's not highlighting the don'ts he's highlighting the here's how you should do it until your Project's more complex than this toy application to do that you're going to want to jump up to an intermediate level code structure like we have here as you can see the first thing that immediately jumps out is we have a lot more folders and also there's a lot less files inside of our source folder that aren't in a different folder and this does two I'm going to forget to ask for this link later so I'm going to do it now a while back on Discord somebody linked a website about file structure that was literally just like a Dan abramov tweet embedded with a really good URL that I can't remember if somebody could find that and share the URL in chat I would really appreciate you react fil structure. surge.sh you were [ __ ] Lightning Fast good [ __ ] Chris two things for us first it helps separate out all of our different concerns here so we have assets components context data hooks pages utils so we can separate out all of our files and also it makes it so our source folders a lot cleaner when we open it up we just have a few really basic files that have to do with like our index and app page and all the rest of the entire code for our application is inside of these folders now first I want to go through the folders that are new and then I'm going to go through the older folders as well so the First new folder we have is an assets folder this contains things like images SV you heard it here first guys asset folders are only for advanced projects sorry intermediate projects beginner projects can't have assets G's Global CSS any type of asset that you're importing that's not like actual JavaScript code that's going to go in the assets folder pretty self-explanatory but it's great to have this folder cuz it means you can store all of those files in one location so they're easy to access wherever you need them next we're going to go down to our context folder this folder here has our off context or just any context you can think of so anytime that you have a context that you want to have just put it inside of this context folder right here also you'll notice inside of these folders I have the test directly there so my test file for this off context is directly inside this test folder and that's going to be for every single one of my different folders I'm going to have the test directly inside the folder fer for those tests so they're as close as possible to the file it's testing next we're going to go down to a data folder this is a folder that's great for containing like any Json data that you have so like if you have a store for example you might have a store Json file or maybe you have some constant variables that don't change you can store all those in this data file or this data folder super convenient hooks folder this is exactly the same as before but now we have our test localized inside this folder this page is one I'm going to skip over real quick this going to hurt I'm just going to go to the ADV called features there's a few additional folders but this features folder is the most important now we're going to cover all the folders here but this features one is the one you want to keep in your mind is the most important and we have our assets folder that's the same we have our components folder exactly the same context folder again the same data folder the same skip features for now go to hooks which is also the same we have this new layouts folder which is specifically for components that deal with laying things out so like nav bars sidebars Footers those kinds of things that are used across a lot of components and a lot of pages that's what this layout folder is for this is optional if you don't have have that many layouts just put them in your components folder and it's fine but if you have a page with lots of complex layouts using a layouts folder is really helpful now we have this lib folder this lib folder is really important because in most projects you're going to build especially larger projects you're going to pull in a lot of third-party libraries whether you're using like fetch which is built in the browser you're using axios or any other thirdparty Library you're going to want to implement that in your code and generally you're going to put that in many places in your code but what if you need to update the version of that Library well now lib fetch. JS with a test folder dedicated to it says all you should need to know about this I I'm beside myself I I don't think I can watch this video any further especially since I've already watched it on 2x speed on my own time I hate all of this every single point he makes in this video is wrong out of place misunderstood and or just bad so we're going to talk about how react themselves how like the core react team recommends doing this I'm actually going to switch back to my uh laptop so I can screen share the way I like to let's grab oh I'm sorry if that did the awful audio thing it shouldn't have because I muted it but uh twitch.tv poop out Theo and more importantly I need to go to react files structure react file structure. surge.sh I'm kind of covering it but it says move files around until it feels right and it has a link here to this is not a joke which is a Dan abramov tweet oh no my DMs I think beginners don't know how anything feels they want a guideline it is a guideline though um I guess he deleted the original tweet that this being replied to it means literally start by putting everything in one file when it feels like that's annoying start splitting them up when that's gets annoying maybe add some folders what a what a crazy take it's it should be this simple like write a file put things in it and when it gets or otherwise feels bad move things like it's does not need to be that hard let's look at I I wish there was an easy way on GitHub to look at like the history of file structure on a repo without just like going to Old commits and new commits uh I'll just period key it for now so here's Zapdos this is the project I worked on on stream a few times ago the file structure is fine it's not great but it like works so we have Source it's loading and in here about half of these things were made by create T3 app and are probably good we have assets which is my loading asset could probably put that in public but I'm importing it so it's inlined I prefer to put Assets in public when you can but for things that are imported like svgs it is nice to have them in code uh I have components these are two things that are uh the reason I abstracted these was not because I wanted to specifically my questions I did not want this to be its own file I wanted this to be inside of index. TSX but it couldn't be because I want it to be client side only I don't wanted any of its code to even be instantiated until it's been imported and used here so in this case I made a component file exclusively to get the question view with SSR false that's the only reason this was broken out and for the embed it's the same I didn't want this to exist until it's been imported separately to anybody who says this is just the intermediate structure from the video [ __ ] off we're still like very at the beginning of this pay a little attention so Pages this directory is a nextjs structure that defines the routing in my application when I make a separate file in here when I make Pages slmed ID this is a new URL in my codebase this is a new route that users can go to just by putting the file here if I want to make a new page let's say I want to make slel I have to make a new file because it's a new page in the application and if I export con or export default function return help page I just made a new page in my app I don't have to import anything anywhere I don't have to worry about hierarchy I don't have to like code things this files placement defines a behavior this is not a pattern that makes sense for a lot of things like which place in your file structure triggers which like page being rendered or which behavior occurs is not a thing that you should think about often but for file based routing it's the one exception where you should do that because it's literally like the point now components as I said we broke out two components because I had to If I Didn't Have to this folder would not exist because it doesn't need to because the components in here are 38 lines of code and even then there's two components in this file I have a browser embed view core and a browser view embed because you don't need need one file per component most of the files in here that Define a component Define way more than one component so this homepage one has a nav buttons component has a home contents component and has a home component and it has a gssp it's not a component but it has three components in it in one file this is not the structure we were just looking at this is the most minimal thing and we add Parts as we need them there's another file in here server because this repo also contain my entire back end and still has a simpler development story make that a bit bigger Styles is almost empty I have my Global CSS with the Tailwind bindings if this could be inferred I wouldn't have it at all but it's fine and I have a type definition for my custom next off type def I would prer not have that but you have to and then I have a u tails for Pusher in trpc this could be renamed like uh what did he name it like Libs or something but this is external stuff like different clients think that that having a different name could be fine but holy [ __ ] [ __ ] how is anybody saying this is not simpler and easier to work with do I have to roast chat I have never seen so many stupid mistake like stupid misunderstandings and intentional not getting it ever Jesus Christ yeah I'm just gonna not pay attention to chat I'm hiding y'all you're pissing me off anyways let's look at something more complex uh I'm going to I can't even hit the Hut Keys when I'm in this view I forgot about that uh show toolbar we're going to go to things I probably shouldn't show but I don't really care we're going to go to the PIN code base I have to do that and then that cool this will take a bit longer to load because there's a lot of [ __ ] so here is a giant code base that's file structure is okay it's not great it's okay but I want to point out like specifically how our file structure has changed over time based on how our needs have changed so I have not too many not too big a difference here in terms of the number of folders I have a constants which has like our environment variable similar to what we're doing in create T3 app assets which is specifically assets that we want loaded in code not things in public public has way more [ __ ] as it probably should we have our backend folder with all our backend stuff I have blog which is mostly the markdown for the blog stuff I wanted to keep that isolated but accessible could have put it in a subdirectory but I couldn't find one it felt like it fit in client data this is all the weird client data [ __ ] I only have a context folder because these contexts are heavily reused and it's only the device manager one that is so I actually might move this generally I don't like putting contexts under a thing called context because more often than not a context is owned by the component mounting it it should probably live right there but since this context is mounted in a lot of different places it uniquely needs to be abstracted so it's reusable Hut keys I couldn't think of a place to put it should probably put under a util somewhere local storage kind of makes sense because it's data types again didn't have anywhere good to put this one what is this even doing oh yeah this is in a really bad place I should move that somewhere else I hate types folders and I do them too often and pretty poorly and here's a bunch of random utils that are reused generally I don't abstract a util unless it's used in more than one place I try to keep them in the file that they're being used in until they need to be used in other places then components you'll notice that components and pages are going to have a pretty similar structure because generally speaking we try to keep the page components pretty minimal so here's the homepage of ping it just handles core layout concerns nothing else and it mounts the app head and the landing and then these are in the abstracted components directory because most of them are being reused but for a page that's more boring and self-contained like page not found oh we even abstracted that I don't know if I care that we did that five months ago I don't think I would have abstracted this now I don't think that was necessary there's a lot of unnecessary abstraction in some of these pages but it's a thing we committed to and it's fine generally though like our components directories here are pretty boring like the call component this one used to be chaotic I this one was previously almost a thousand lines of code and we let it be because it was fine like it was nicer to have everything in one place but then it started to get kind of painful to maintain and work with so I said [ __ ] this we shouldn't do it this way anymore so I broke it into however many files we have here but previously this was a very big file that kept getting bigger so we broke it down and now it's a bunch of files that are not absurdly big and that was a decision we made because the single file we had was too big so we cut it down a bit generally a lot of the like file breaks that we make like when we make a new folder or we make a new file it's for one of two reasons reason one things are getting unwieldy like just annoying to deal with because things are too complex or Reason two I have a boundary that I want to like lazy load or SSR have those types of behaviors where the file break has a behavior that I want like in next a new page file is a new route or in here a react. la exporting this to root means that I can load this in only on client not on server which is a behavior I want here those types of things are only done when we run into the problems until then everything tends to just be in the same file there's a lot of utils that I like write I'm going to try and find a a simple example I'm sure we have surprise message doesn't have any but even like here's the chat room file this one we haven't broken up yet because we haven't needed to 355 lines we have like seven different components in here that's fine doesn't doesn't matter we don't care I used to oh I do have a custom hook in here use chat manager this is a custom hook that is only used in this component so I didn't put it in a hooks directory because I don't [ __ ] care it's here it works it does what it needs to it it's only used here it's not even exported why would I create file boundaries when this thing solves a problem in this file there's no reason to break the stuff apart until you have a reason to break the stuff apart like prescribed file structures are the most dumb painful thing I don't get like if a file structures causing a problem or making things harder to understand deal with it and I guess tests I I don't want to restructure my code to make it more testable find that stuff frustrating but probably an okay reason not the best but like if you need to break up things in different files so you can test it more easily fine beyond that I don't care like file structure firmly falls under one of those under the category of the less I have to think about it the better and once you're prescribing like a structure for it [ __ ] off one of the like biggest like things I pushed for at Twitch in the class component era they had a lint rule that was one component per file I wonder if that lint Rule still exists uh view all one component per file yes lint Yep this rule should be burned this rule should be lit on fire I guarantee this exists in the Airbnb lint rules because airbnb's lint rules are like a textbook guide of how to write a shitty code base ignore those lint rules entirely if you can God I I don't know if yall know this about me but Airbnb and atlassian are like my golden examples of how to not code yeah yeah I I'm annoyed this this feels like a thing that should be very simple people keep making very complex why do I have this separated I guarantee I'm like I'm opening this file I'm like why is this so small why is this file so tiny I guarantee if I search for this that it's either not being used which looks like it might be the case uh shoot it might be a lazy see uh opponents SL chat popout yeah it's a lazy import see whenever I have a file where it's like why does this exist why did I break this out into a file it's because I'm SSR falsing it somewhere it's the only time I ever care honestly if I could in a component say hey SSR false on the component level without it like [ __ ] up the hook hierarchy and things I probably wouldn't break these files out either God chat is pissing me off today Jesus Christ yeah uh I I'm going on a sub rant because one of these messages was particularly bad and I think that people will benefit from knowing why this was so bad uh here but Airbnb lassan are pretty successful I bet their code bases are pretty big maybe give them some benefit of the doubt did you know that in the terms of service for jira you're explicitly not allowed like like very very explicitly not allowed to Benchmark jira if you're paying for it if you measure how slow jir is and share that publicly you are now risking having your license pulled because they are so [ __ ] scared of the performance of jir being a publicly known thing when I loaded my jira dashboard at twitch it took two and a half [ __ ] minutes but yeah sure their file structure is fine no they are incompetent at engineering know the difference it's important based based thank you for linking this more let's see yeah that's fine yeah I the thing that I hated most about the stupid video we are watching this guy is that it's structured based on arbitrary Concepts not your app not on your needs of the thing you're building every application is so different that structuring based on which concepts are where makes no sense like putting the one that pissed me off the most was when he put like contexts in their own folder yeah what context is a react thing it's not your apps thing these are not how my app is abstracted and constructed these are how react is abstracted and constructed don't structure your file system around react features structure your file system around your applications features Jesus Christ you're building an app not a framework stop pretending your app's a framework Natt said you were saying earlier that your folder structures uh around your current project no that's exactly what I'm saying here build your file structure around the needs for your project around the features you're building around the problems you're running into around the file you're working in being too big and having to be broken out because it's too complex y'all are like most of you get it and I feel bad for shouting at the people in chat who don't but like you're entirely correct with the way you put that it's structure your application based on your needs based on your application's needs my my favorite thing that never happened that I wish could have succeeded is this project that since like super dead Ben aad the YouTube content creator is had the this fantastic idea of what if I didn't think about the file structure I imported things I used things and the file structure figures itself out based on my code yes please give me this I never want to think about these things again please yeah it doesn't work it's two years old but man if this got to a good point that's what I would ose I don't want to have opinions about my file structure I want to build apps I want to build solutions for my users problems I don't want to figure out which folder makes the most sense based on which react features this current button's going to use oh this button needs to hit a context that means I need to put it in this directory no what the [ __ ] I'm in the file that the button's in can I just write it here somebody asked about where I put type defs that's actually a good question uh where was that one here where do you put type defs where they're used so let's say I have a component let's say uh I have this chat component and it takes props oh it does look at that I Define them right here let's say these props are being used in two different components in this file type reused chat props equals that then I drop this here and const other chat component react. FC reused chat props cool if these props are being reused in multiple files maybe I'll abstract it maybe but probably not like almost definitely not honestly like I don't I find that things like type definitions tend to be very hierarch where if some let's say I have a child component I might even uh we have if I go to chat pop out rapper this has a type here let's say this type is necessary in the parent because we want to like share this type all the way down to the subcomponent from the parent that's mounting it we can export type uh chat wrapper props equals this guy use it missed that and now in the parent where we're actually using this guy here import type from nice and now I can reuse this here and now I know confidently that I can lazy chat props because the props are the same and I know that's going to work I can confidently I guess my I don't have typ scripts ever working in here because it's in the browser but like I know that's going to work because the props that this receives are using the type def from the component I'm mounting the important detail here is I'm importing the type Def and the component from the same place because that's where the concern ends I only care about this type because this component's mounted here so these two share a location of concern their home should be the same too this only is necessary because this component exists these things should be tied together I I don't get why we keep making all these different like patterns and defining files and all this [ __ ] for something that describes the code in the same file these props are properties that this component needs so these properties should be defined where this component is I use react FC I I know a lot of people don't like it but it's fine Atomic design patterns depends on so much [ __ ] is it good practice to keep your page file minimal and import page as a component it's not a good pattern it's a pattern it's fine it doesn't matter I think people care too much like we're doing that at ping mostly but it's it doesn't matter I have big page files I have small page files if having a big page file is causing problems or is being annoying or you need to break something off to disable SSR do it then didn't use use context to grab the context provider uh I don't even know where I was grabbing a context provider in there more you have a problem with predefined patterns I'm curious what you mean by that or who you're referring to if not me basically no structure until you need a structure yeah it's totally agree oh God oh God H thank you for sharing this Gore [ __ ] uh not safe for work warning I mean I guess technically speaking very safe for work like this might get you a promotion depending on where the [ __ ] you're working this this would get you a promotion at uh Airbnb for sure and at last scene you're already a director if you're writing code like this 2,000 NES I am so sorry I shouldn't be clicking random people's images anymore with this like is this bad eh I would ask why you're doing it I personally like like file name one file name two file name three are bad names if that was like SL chat slnv and those types of things I would rather import from the named place and not import five things from one place just for fun I I don't think this is necessary most of the time I see it but it absolutely can be helpful sometimes so I'm not going to say this is bad don't do it I'm going to say think about the reason you're doing it and you might find uh Barrel fil is a good use or word for that Maple I find that I don't need Barrel files very often they're kind of nice for UI libraries to have like at components slui includes button and drop down and all those other things but it's it's not great I like youty time we we are very aligned on all this in a large team changing the structure is almost impossible I don't necessarily agree I think that pre- typescript yes ah oh new way of framing this pre- typescript having a predefined folder structure ahead of time was probably more valuable I mean it that probably it was more valuable because moving things around after the fact means shit's going to break in really unpredictable ways with typescript you get type errors if you move things places they don't belong or Imports aren't working the way they used to like if you redo your folder structure you will get a lot of Errors if you make mistakes in a typescript code base and that difference alone I think makes these types of changes viable regardless of the size of your code base story book gets worse as the project gets larger not better really good question I need to make some content about how to learn I'm not going to make tutorials because [ __ ] tutorials I I just don't enjoy doing them but I would if you can when you go through the beta react docs use typescript in your editor while following along with the react like tutorial and if that's too much and like you're running into a lot of problems Google search them talk to people like us in our community and if at that point it's just typescripts getting in the way drop it and use JavaScript till you're familiar with react I think react is the more important thing to learn typescripts the more important thing to use but if you run into problems using TS as you learn react then drop TS focus on react and then pick it back up after so tldr use types script as you learn react until it gets in the way if it does drop it if it doesn't cool you just learn two things at once hope that answers your question large teams have not if a code base isn't made it to typescript yet that should be Priority One not a new folder structure like fix that a fundamental understanding of JS helps I don't think it's that essential I think that react is enough that the amount of productivity you'll feel just blasting through the beta react docs is so powerful that starting there and then learning more of the basics and then learning more typescript and then learning like nextjs and then learning those other things oh oh for understanding typescript yeah uh I wish there was a good start JS with TS tutorial like a JavaScript tutorial that uses typescript but doesn't mention typescript until multiple hours in I think that would be really valuable where it treats typescript literally just as red squiggly line error code like error Corrections during your JS and then slowly after the fact introduces you to hey by the way this is typescript that you're using these things after the colon that we were telling you to ignore they actually mean things cool think I covered this topic pretty exhaustively file structure does not need to be so hard move things around until it feels good and use typescript so you can move things around and rant thank you adz for this edit I should do a quick like one of the fancy outros for my YouTube video so I my stream's not over we're still here we're still hanging out I'm doing an outro for my VOD for my video later so don't think the stream's ending when I talk as though it's ending just hang out y'all going to hide the overlay so it's easier to cut hope youall learned something about file structure here I think it's important to structure Things based Less on how some other person tells you to and more on the application you're building and your needs put what feels right where it feels right and please for the love of God use typescript so you can move things around later like the the problem here is one of JavaScript meaning you have to decide ahead of time not one of these file structures are going to help you move faster so yeah seriously just put your [ __ ] in one file and then move it when that doesn't work anymore it is that simple tired of people pretending this stuff like to be a senior you need all you need a 100 files per project no there's such such thing as senior file structure what the [ __ ] cut the [ __ ] go build something cool sub to my channel because less than half of you guys are subscribed fix that and come watch on Twitch when we stream on Twitch which is once a week every Wednesday around 1 pm PT so hang out if you can stop by twitch.tv Theo thank you again and huge shout out to Dez for staying on top of the channel so I don't have to worry about it cool rants done that was an outro I'm still here guys thanks for hanging out for the YouTube thing we're still streaming that was just the outro for that I should grab a beer go on one more rant and then wrap up though because I am supposed to be doing things at six I don't know if y'all are trolling with the it's actually with the thank you good night [ __ ] but yeah I do see my numbers go down whenever I do one of those people assume I'm actually ending which is always fun you know what I'm going to do uh can I open this notion doc without leaking things let me hide this for one second so I can make sure I don't accidentally leak things add another account continue cool I can leak or show this without leaking now so here's my content plan doc this is what I use to like figure out what I'm going to rant about and do the rants so we did this one that means we can make a VOD of it so a lot of things here I want to talk about the two stream are ones that I've already like agreed I'm going to do eventually so yeah uh if yall have opinions on the things that are to stream that I haven't streamed yet not the concept concept means I haven't decided if I'm doing it or not and I'm still planning but the two streams I'll let y'all sit on this and think about it when I go grab my beer and smoke quick uh actually I can I can reduce this down a bit uh I will make a poll quick let's do that sorry for if the option you want doesn't get included the the storybook rant is pretty short so I think it's was going to be like a YouTube short or something what to R about next I'm just going to open this on here so I can see it on my computer uh data fetching in react uh you're doing a wrong State Management in react what is reliability and and yeah I think that's a of these these are the ones I want to possibly talk about today so I'll make this a three minute poll so I have a little more time honestly I'm slowly coming around to amplify I need to use it but it seems fine yall figure out what we're doing next oh it looks like O is a strong winner here but regardless in BRB e e e e e sorry State Management nerds we're uh we're talking about o it seems like very good to know for the future stuff I already did the story book rant it's in a VOD somewhere I'll post the clip eventually tldr story books really good for UI libraries like if you were building my or mui or something sure use it for that it is terrible for testing user facing apps and it is a Scourge on application development keep it out of my apps God please I Aiden remind me to DM you I have a a long reliability story to tell uh well I like rest I I I'm actually pretty cool with rest uh yeah and I I I will say on behalf of Aiden he might not be a T3 stack person compared to all of us but godamn he has some of the best like problems that our Tech cannot solve in the slightest like the way we build things and the problems Aiden have has just there's no overlap there those are two different World we're talking about so yeah uh the things he uses and the reason he uses them are all good don't worry about them oh you redeem some point stuff I'm sorry I am so behind on that I owe people cat my cat just ran out [ __ ] uh I'll grab a cat after this next rant I'm sorry that I've been bad about that I also owe somebody a timeout uh timeout I need to set that up automatically uh speaking of which uh Aiden any chance we're going to get channel Point support in faot because if I could link one of my channel Point rewards to a timeout command that make my life much easier anyways oh yeah Fair things are so complex in fossa and even more so uh yeah I can help with that stuff I'm sure BR would be down as well like we like Ping would be down to help clean up fot if that's a thing you're interested in anyways I have to complain about o because I'm tired of getting dumb o questions I I shouldn't say dumb they they are regular enough now that it feels unfair to call them dumb because they're very common uh I'll say frustrating o problems so we're going to start with a fun question what is off I think that when we talk about off we tend to talk about things that aren't actually authentication we talk a lot about different packages we talk a lot about like context that contain piles of data that describe who a user is but off is two things neither of which are a package neither of which are State neither of which are the user or any of those things it's authentication and authorization authentication is who is this person and are they actually them and authorization is can they do this thing or not now the next question I think this is where people tend to get lost where does off happen uh I won't answer this yet do you all know where off happens chat yep y'all get it the server so I could go on a side rant here of why does everybody keep asking me how they do off in their react app but I'm not going to do that instead we're going to talk about how to frame off in a way that makes sense off is a thing that H I can show chat again yeah y'all are being nice now I'll bring chat back so O is a thing that happens on a server ideally on a request I'll add that ideally on a request so why I I guess like is a bad thing to put there yeah you're right that's a the server on requests I'll even put that in paren to make it read a little more smoothly the reason I think this is important is the place where o occurs and the thing that like determines if a user's action should work or not like when I click a button that's ban user that button should work if the server validates I me I own the room and I have the authorization to ban a user as authenticate me as me and authorize me to do but those are both things that happen on a server so now the question that tends to come up is but what about the client well conveniently clients make requests which is very convenient because requests can be authenticated and authorized which means to get off on your client you should make a request gigabrain moment crazy I know groundbreaking [ __ ] here but if you need to know who the user is don't look at local storage don't look at a context make a goddamn request so how do I I'll I'll just keep copy pasting this because it's easier so how do I know who the user is in react make a request I SL API current or slashme or slash API current user and those in like next for example would just be a types script file in your API directory that Returns the session based on the headers now you have a way to request who you are and ideally since this is a problem that the community around react has solve very well you can share that session data through a context through react query through those types of things very well but in order for these requests to be authenticated and authorized you probably need a token of some form which is a cookie so using a library like next o or remix off at that point makes sense to put a secure cookie in because a secure cookie will be on every request to the same TLD that the cookie was established on and it will not uh be accessible from JavaScript the reason things like local storage are bad is it is not synchronized to the server it is not validated and it is fully accessible by external Javascript so if you stored the off token in local storage someone could rip that replace it and do all sorts of things with it where even as like a Chrome extension or a virus whereas in a secure off cookie that data is not accessible yeah so us cookie to authorize or to authenticate a user and then use your database to authorize their behaviors so the flow of when a user like makes a connection I'll say user opens I'll make this smaller user opens page for for first time user signs in fires request I guess this should fires request to server that returns with a secure cookie client I'm going to move this because it's annoying me where it's located client stores that secure cookie in a way that can't be accessed by your JavaScript and other things and then from here on all requests to the server will include that cookie so we'll call this the getting authenticated flow this is the flow a user goes through the first time they authenticate so let's look at the authorizing user flow user I God damn it I hate when the arrows get linked to things I wish I'm sure there's a hotkey to dink things but I don't know what it is so user makes request for data server receives receives request and parses cookie from it uh server checks if cookie is or checks what user cookie is for Server checks if user from here is [Music] authorized for this action and then finally the server returns if off errors if not so when you want to do things like get the users profile picture request that when you want things like if this user has access to this page request it the like the client is not where you determine what the user should be able to do you should make a request and if the request comes back with and then based on the data you get back do a different thing so if you request a call page for ping you try to join a call and the response is an off error redirect to a login page saying hey you have to be logged in to access this log in and then direct them back to that page where the request will happen again and if they're authenticated to or authorized to join the room a join button appears if they're not authorized to join the room a request to join button appears and those behaviors are things that we decide on as we build our applications post off but authorization is a thing the server does when we make a request and then based on that response we do a different thing this isn't the thing that we worry about and react this isn't the thing that we write a bunch of JavaScript in our context providers and [ __ ] around your oth provider should be incredibly dumb it should have are you oth or not and if you're using like a session with some basic info like username and [ __ ] you can have that on it fine I prefer for it to not I like those things to come from the server when they can but like whatever those values are not the point of O though the point of O is confirming you are who we think you are and confirming what you can and can't do based on who you are all these other things like how do I get my users's profile picture how do I get my friend list those are not o problems the O is the thing you do before you solve that problem I see a bunch of people bringing up jwt's I I think jwt's [ __ ] up this model in a lot of weird ways that could be annoying to like communicate and understand I for the sake of this we're going to pretend jwt's don't exist if you do use them please for the love of God put as little in them as you can it's so easy to blow up a JWT with a ton of [ __ ] and now every single request has this giant blob in it don't do that please just request the thing you need when you need it how do I gate an application great question Elders I make a request to a page and if you're not authorized I reject it let's do this in Zapdos quick actually because I have this code base and it's simple enough CD Zapdos cool let's say instead of so right now on the homepage I have uh is this the homepage cool yeah so on the homepage now I have a check really early on that is uh let's find it here it is Data is use session if no data return login otherwise we return the actual app but we don't return the actual view otherwise what we could do instead if we wanted to like let's say I have a separate slash login page I'll just make this quick login. TS that's TSX export con or export default can't type for [ __ ] return div login page this need a name login page cool now we have this what we can do in here in the serers side props and again get server side props this is a function that runs on the server when you load the page const session equals uh yeah this is I think it just needs context cool this is like a custom function I wrote that literally just wraps the unstable get server session from next off so this on the server requests the session via DB now we have session if no session return reder uh this is I don't actually have this typed properly uh will this co-pilot save me here cool redirect slash login why is this mad oh because I'm not returning the session here now why is it mad oh because props has to be something in here cool now if I and pm on dev Local Host 3000 that should be redirecting me is this coming back at something that server code yeah s is null I should be redirecting what am I doing wrong is redirect an object if so that's dumb yep [ __ ] Christ well that type ever was useless cool now it redirects to login when you're not logged in thank you for that remember that thing I said about how nextjs is type defs are [ __ ] yeah anyways login page this page now loads whenever you're not logged in and if I was to comment this out quick and signings I don't feel like building the actual login page and I sign in here quick now if I put this code back it's still going to load because the server checked if I'm off and it redirect you to a different page if you're not but again to like go back to the diagram when you the user makes a request the request comes in here on get server side props that's what context is it's the request and the response objects the session is fetched using the metadata from this request specifically using the uh cookie from the request header that is checked and hashed and [ __ ] against my database to get a user if this is a valid token for a valid user and I get back null if it's not and now I have a session or I don't if I don't have a session I say you don't have a session go to the login page if you do have a session I return the session it's that simple like Tada I hope that this one is helpful I know this is a bit newbi than a lot of the stuff I normally talk about but I keep seeing the same oth questions coming up over and over again and almost all of them are this weird understanding that like the that off is how you figure out who the users friends are on client and it's not off is how the request is processed and the result of that request is BAS B on if a user's off or not but O is a thing that happens during a request and I find most of the O questions that I've been getting aren't authorization questions or authentication questions they are data request flow questions disguised as an O question because people keep on bunching all these other problems into o so somebody else asked uh did the screen cool work uh let me switch back to here uh what if you have a ban user button that's only visible to or for mods not for regular users cool get that data we can make an endpoint like yall know how trpc Works let's do it quick API trpc uh I think that's actually in server router sub route so let's do SUB rout user .ts I will yoink this guy just so I have a starting point rename this to new user or just user router just need to start with new anymore and uh me protector procedure. query cool nice and easy so here we already have the session because we get the session by default as part of uh next or as part of the the template that we're using for like create T3 app the context uh will include session and since I'm using the protected procedure this will throw earlier if we don't have one already so just by getting this far I know that this session user exists so this already will return the session user but let's say we have an imaginary database field like uh I'll even make it real let's do it quick I will add 2db a new field that we will call roll and I will enum roll admin user cool roll is an optional roll cool I guess I'll at default that and now I'll have to npm install again to get the fresh defs I can const roll equals 8 cx. Prisma do user. find first where ID context. user id. session and from here I can select roll user response and I can return here user response. roll and now if I try to use this in the client the results going to be I'll actually do it quick YOLO we'll add this to the router here user and now on here uh const data equals trpc dot why is not letting me import trpc that's slash no where' I put it I not do the at slash and trpc do proxy do user. me do usequery and this is roll or null or undefined now we have our roll we built a new endpoint that returns your role and we use that on the client to figure things out so if I'll say is loading if is loading return null you probably want to put a loading state of some form there maybe suspend do something correct we'll we'll go more in depth on fetching when I do the fetch rant in the future but for now that's fine if data equals and here we'll auto correct or auto complete the two different values because drpc and Prisma so if data is user return null if data is admin iess instead I'm going to do do if data is not equal to admin then we return null and now we can assume that this exists or that you're an admin so admin only View and now if you're not an admin you will get nothing and if you are an admin you'll get an admin view is fetching is not a better indicator because this could be happening in multiple places so like if you called tier pc. proxy . user. me in like a sub component or a parent component separately is fetching would force this to reload is loading means that we don't have data oh yeah I hope this clarifies like off is a thing you do on a request and if you have things like but what if I don't want to render this UI based on a user's State fetch the user State then render the UI somebody asked about do I like I'll just open up chat so you can see uh this question do I rely on typescript for using like strings that are correct versus building an enum and calling values off it so the alternative here would be if I this needs to be null still but here instead I could do roll do admin or roll. whatever is this better this comes with the huge catch of actually I'm going to leave this on the screen this code will not work in production why will this code not work in production if you can't answer that question then stop importing enums there's one word I could add that makes this work that isn't in this file someone got it a lot of you had like the right idea but only one person's got it correct import type oh but when we import type we can't access values off it wait no does that not work either oh yeah because it's we can't actually import and do that comparison we can't use that we actually can't I forgot about that cuz this is this is runtime so we need to actually use a string here so no because we weren't importing his type that was going to import Prisma on the client which doesn't work but when we import his type that doesn't exist in the runtime so it doesn't work I could Define my own value to validate against but now have to worry about two different values falling out of sync when I could type like somebody said this is typo no it's not I just typoed it I typoed it again you can't typo it because it's type safe it's typo safe I just realized the very clever uh I'll just type it in chat typo script dig it and no it doesn't no it doesn't typescript prevents this in fact if you define that as a const somewhere else let's do it let's let's do what you're suggesting uh const user roles equals admin admin user user and now here's the problem if somebody was to fat finger this part that looks like it's just work working because we lost the type def when we did this I did the thing you were worried about which is the fat fingering using the strategy which you recommended and it actually doesn't prevent the problem it actually uniquely adds the problem that you're worried about if I wanted to do what your describ as const both of these and now it knows cuz admin is lowercase but if you want to write this for every single value that you make an enum for that isn't front and friendly go [ __ ] nuts but you're not going to hire anybody from this chat nobody here's going to do that please for the love of Christ if a thing is a string and that string is type safe just use the [ __ ] typ safe string come on y'all like to make challenges for yourself sometimes I swear oh that's actually a good question uh what would be a 2022 stack for a separate front end and back end or where T3 isn't applicable great question why isn't T3 applicable the answer to that is going to be the answer to what you should do instead if T3 isn't applicable because you need to run some crazy websocket [ __ ] on the back end pick something that's good for socket [ __ ] on the back end if D3 stack isn't viable because you can't run on AWS you have to run on your own server then pick something that's good for running on your own server like the reason you can't use T3 stack is a reason use that reason to determine what you should do instead there's lots of options to build back ends with if JavaScript isn't solving the problems that you have if the T3 stack isn't the right stack for what you're doing figure out why it's not and start from there this is one of the most real versions of this message thank you for the good jokes I'm I'm with you Aiden people the the one thing I want to emphasize is there are few things in software that get misused quite as hard as jwt's they encourage some really dumb behaviors on developers behalfs and I I I don't recommend them when doing newbi or content at all because of that so yeah I agree like if jws are causing off problems you're doing something wrong but I don't necessarily agree that jwt's are still are worth recommending especially to noobs because they are so vulnerable to those types of problems also huge shout out visceral X for the gift subs thank you so much man really appreciate that five people just had their tickets paid to the subon Discord that I owe a uh bash F or a zshell file so you guys can have instant code open I'll show you I'm going to demo if you subscribe you're going to have the command to do this shared at the end of the stream did you see how fast that was I'm going to hold the keyboard here pressing enter now did you see that literally the millisecond I pressed enter vs code opened do you want that do you want your vs code to open as soon as you press the enter key when you type the command in your terminal make sure you subscribe and you'll have access to that in the Discord d3g Discord if you're not already already there thank you to the person who said that in chat wait do it again one more okay ready so camera nice and close I am pressing right now it is not a rename I'll do code instead so here's the default so you can see how slow it normally is still loading I must have missed it ready going now do you see that that was like 200 milliseconds more going now it is not a terminal or it is a terminal only thing I guess I don't think the script I'll be sharing is Mac only but you could rewrite it for other things how slow is it when vs code is closed let's try let's do the comparison go now pretty quick versus and I'll close it and do code again starting now comparable I think that the Delta difference there is not as bad yeah I do like my short hand it is very fast think I've covered all the major things I wanted to today we got at least two or three good pieces of content out of this uh shout out to Dez as always uh y'all are probably doing off wrong and y'all are definitely structuring your folders wrong can I give an image of what I wrote on excal draw if you join the subon Discord I can share that image happily but uh excal dra file access is a sub only Ben sorry Barry asked if the command is slow because it's uh running electron as node kind of it's because the the command has to go through multiple layers of node to get to the application be processed and then open the application whereas my script hits the app directly without all those layers uh if you're in the Discord and you're subscribed there should be a subon channel if you link your Twitch account to your Discord account if you've linked your account and it's still not working and you're subbed here just that's the one thing you can add me for add me in the Theo posting Channel if you are subbed and it's not working in Discord I will go refresh it and make sure it works it can break sometimes so yeah annoy me if it's not working we'll debug it shall we check who is live and give him a a big old raid 430 of so of y'all still here I'll take a look at software also see who of my friends are live a zos raid could be hilarious nobody I'm like jumping out of my seat to oh [ __ ] we're getting a bunch of Subs now yo hso and yo uh dra orus I believe thank you both for the subs super appreciate it why am I still following QA partner because QA partner hasn't Banned Me Aiden oh well whoever gets these folks is going to be the top oh [ __ ] Rox is live why is Rox live wasn't he live like a few hours ago what the [ __ ] I owe him a raid so it looks like we're raiding rocks everybody go say hey to my manager he's mostly a good dude should be a fun one thank you all for stopping by Among Us in an hour come on guys I'm going to a like an event right now I have to go meet up with a bunch of my old College friends if you're still playing in like two to three hours I'll stop by thank you again bash for the raid super appreciated that one I hope I served your viewers well it was a fantastic show uh gonna go have a real life for a bit go thank raid or go thank Rockstar in the raid make sure you let him know he's a good manager he's been helping a lot with the YouTube channel thank you all again for stopping by be nice to him he's still earning trpc peace y'all see you either this weekend or next week might do a weekend stream uh Bren and I want to do a fun thing around Zapdos and I have a bunch of other [ __ ] I want to rant about but we'll see Big Show next week too I'll announce who it is soon peace y'all and Goodbye YouTube as well thank you guys




## STREAM VOD JACK INTERVIEW + LEARNING REDIS WITH UPSTASH - 20220825
what is good y'all so hey for today's yeah i i'm sure you all know him better than me but uh jack want to quickly introduce yourself yeah hi i'm jack harrington um i'm a i run the blue collar coder channel uh we specialize in kind of high-end front-end topics i would say more advanced type stuff i have done some series on like typescript uh and react but a lot of stuff on like microphone ends module federation things like that it's been great actually been a lot of fun i can't wait to talk to you about content creation yeah i know it's a little different psychology notes but different from the usual conversations that we have and that people are going to expect us to talk a bunch of tech and i'm sure that we will but honestly i think like what's really exciting about having you on is the opportunity to chat about what makes our experience as engineers so different like the world of content creation is both very similar and different from software and i constantly am overwhelmed by the overlap and the differences so to kick us off i'd love to see what you want to get into yeah it's like i i mean i i think like we've talked a lot about this on react roundup like a bunch of times about what does it take to actually get into content creation and all you really need to do like if you take notes as a developer which is a good thing to do right if you're working through something you're like hey i've never done next middleware before i'm just going to keep like a markdown document as i go or like a quiver or you know whatever you know some notepad if you want right um but if you use markdown and you have this list of hey here's all the things that i went through to go and put this together you basically have an article right if you add a little bit of text in there right and maybe a screenshot or two right you have an article you could just go and take that put it on dev2 and now you're a content creator right that's all it takes which is great you need to cross post to medium and away you go and then you put like that on your resume you put it on linkedin and now you're like how do i know this oh i know that guy and i'm no person because like they did this article on on xjs middleware and now i know how to do it and wasn't that great absolutely and then you can kind of start working your way up from that i mean hey if you want to do a youtube channel cool if you want to like buy crazy high-end expensive cameras and lenses and blah blah blah blah and figure out how to talk on screen great you know that's a beer bag but like you know it's so much easier you could just do the dev 2 stuff so anyway yeah so okay i how did i get into this yeah i was going to ask how did you get into content creation give me one second kicking up my cat and there's a bunch of sirens outside oh cool bye cat uh how did i get in contact radiation so let's see i've always done manual i've always written manuals for stuff that i've created like when i was first married uh i thought oh man i'm gonna go do this i'm gonna go right now make a million bucks and i'm gonna you know we're gonna be whatever set right and so i wrote this app called fret navigator because i was into guitars but i couldn't play but i could understand the music theory so i created this thing that will help you like figure out all the potential chords on a string instrument blah blah blah it's pretty cool actually um and i wrote a manual for it which is pretty cool which is great and then i kind of just kept on writing because i was like oh okay well now i went and created this dialogue manager for windows and i'm gonna go and if people are gonna use it i need to go and create some a manual for that and then i started doing like brown bags and things started getting in public speaking um took a course at stanford actually um and took an extension course i think on coursera which is quite good like they actually like you submit videos and people tell you like oh you know you just speak up you know go and slow your words so much blah blah so great feedback and but i really enjoyed it i i enjoyed actually like getting out there you know kind of getting out of my comfort zone actually being um more i i in person i'm a little bit more shy i guess i don't talk much but when i'm on camera and i'm out in front of people i tend to talk a lot so um i enjoy it and then i get why'd i get into youtube actually i got into youtube because there was a day i wanted to learn about jots so jason webb tokens do you call them jets i think that's the official pronunciation i i saw this recently but i'm going to the greatest thing it's like what does it do it some of the smartest people can be wrong and i think like the person who invented the gif this is a similar case there speed to him [Laughter] well played um okay so yeah uh what are we talking about we were talking about uh specifically the like process of you started writing software and i started writing software yeah yeah yeah so the youtube thing right why did i why'd i do the youtube thing well so i was trying to look for jots right so and i found a youtube video but the youtube video i swear to god it was four hours long it's like what is going why can't take four hours to explain what a jot is so i started watching it and it was like an hour and a half before the person actually got to like npm installing the jot library and it was like literally five minutes of using this thing it was all a live stream um and then i was like oh come on because it's gotta be a better condensation of this knowledge uh so that's when i was like i mean i can make a five minute video that explains this kind of stuff and so i started getting into like making these short form videos and really trying to like optimize people's time and i think i actually went too far in the beginning of like speaking really fast and people are like you i have to slow your videos down you're talking too fast um and so i'm trying to hit a happy medium but i'm also doing bigger topics like i just did like astro versus next js and it just takes you know it takes like 30 minutes to kind of set up like the whole comparison and make sure that it's fair and you know cover it cover all my bases and get all the knowledge out there and all that so you know trying to find that balance absolutely it seems like you've struck it pretty hard though like everybody in my community like references your videos as like the thing to go learn like somebody in chat just said welcome jack exhausted video is awesome thank you oh yeah i like that one it's but i think that that shows like that you've achieved your goal here specifically and i do really love that i feel like most creators what they start don't get into it for i hate to say it this way but the right reasons like you started making videos because you had a problem you were hoping videos would solve and they didn't watch the video it didn't do what you expected so you made a video that did it's just like engineering you're looking for a package that solves a problem one doesn't exist so you make that solution exactly yeah people deserve a like a video that like isn't four hours to explain jots is more like five minutes like i have five minutes at lunch i need to learn what jots are weird thing is i've never actually made that video never actually made the job video i made like the dustin video which people like the trpc video people like that one um i mean that's oftentimes it too these things are like co-version covalent whatever i don't know whatever um where you know like zustin is clearly on the rise like people are looking for an escape hatch out of out of redux and so boom the video does well right um i should say yeah i will never pronounce it right i keep getting pinged i'll get pinged on this video about it you know sushi i'm sure i'm sure daisy kato has no i like or maybe he does know how to pronounce it i um i would be cert i would be would not be surprised either way but yeah the quality of his work stands for itself oh right yeah it's funny too i was actually we were comparing home pages like tech home pages just recently and the i'm like you can't beat this one and i put up the sushi stunned like zerg whatever surge you know sh1 with the bear and the in the parallax and stuff and it's like come on you know it makes no sense you can't you can't copy and paste the code but oh my god it's such a cool like just it's a cool homepage absolutely and i think my favorite thing about it is how it emphasizes the simplicity of the library by saying just go to the readme to learn about it everything you need is there i like it it really emphasized that for me and i i dug that out about it yeah and that that's daishi's approach i mean it's so practical so just you know boom here's what it is um i just love it i love always work in particular i i want to spend more time with joe tai yes actually i really do i want to get into atomic state management because to me that is that is the way it should be it's like i think about state is like excel like an excel sheet and how just flawlessly they work right i i i we scheduled my wife's chemo on on excel and it worked i could say like okay 30 minutes before we go we got to leave and it was all and and we all dug it and it worked great and but and everything like you could change the times and then everything would change it was really cool um and so you know atoms should work like like state in our web app should work the same way and they do in that item sense it's like i've got a list of items in my cart i can have an atom that derives from that which is like the grand total or whatever and or the you know blah blah blah blah and then if i change that that first atom it cascades automatically [Music] ah i want to figure out the patterns like what's a good pattern to use to model your atoms it's a great right granularity did you ever see the rich harris talk i i can't remember which of the two it was uh he has one that's a computer build me an app and another that's more like the history of web dev stuff one of those two oh it's the reactivity one rethinking reactivity by rich harris oh one of my favorite talks ever the opening like the first 10 minutes of the talk he's just discussing spreadsheets yeah and then flips it into reaction like web dev we've we solved this problem yep right lotus yep one two three whatever it's solved it was so cool having him like rub that in your face our systems yeah i it was so cool like i didn't think of it that way before and that like i credit that video for in that like tech talk for helping me rethink reactivity and learn what it actually means for a value to be reactive because react isn't reactive react is a phenomenal framework that does lots of great things but it's not reactive by a design not okay it wasn't i would say up until hooks and then hooks as reactivity but it's got the dependency arrays and those confuse people and then so you don't we don't exploit it as much as we could um once you really really get into hooks and understand the dependency rays like i mean you can have it so like you change this piece of state and then this use effect or this muse memo cascades and fires and all sorts of stuff it's just not as clear like joe tai is very clear right um and also i think svelt has a has reactivity as well with that odd kind of dollar colon syntax i know that ryan's here and it would be unfair to not call out solid yes like one of the most reactive frameworks by design as well yeah ryan basically fixed having dependency yeah it's such an interesting solution and i've been playing a lot more solid recently and had a ton of fun with it i it's a great framework it's so cool i i think react's reactivity model is strange both because of the like need to architect it yourself but also the need to be considerate of life cycles and the side effects inherent to them like when i have a use effect in my component and it calls a set state that's going to rerun the whole component even that state's affecting something else and those behaviors i don't know if reactivity is the right word for that because it's like it is reacting in the sense that by re-rendering it's forcing any dependencies to get hit and checked but it's not reactive in the sense that that specific change is what's triggering it beyond the check yeah yeah yeah that's exactly yes it's not right react isn't looking at that dependency array and then saying oh this is like my selector list it's not binding the item list yeah yeah yeah it's not binding that right it's basically just re-running everything doing a triple equals check on each item in that in that array and then if one's false then boom you're done which is nice it's very simple and i see why they did it right why they did it was because we had classes right and then we had functional components and then we wanted to add state to function components and the way that state is done in classes is they have this dot state and all the values inside of this does state are primitives or whatever they are they're not they aren't actually um observables right so if you want to go and convert that to functional components right if you want to add c to function components then you can't do like two big changes you got to do one big change so like the big change is adding hooks you don't want to then change use state so that instead of returning primitive values or whatever they are native values like objects or arrays or numbers whatever um it would return to observables because anybody like you you'd be changing everything and people would just be like i know i mean they they thought hooks were bad enough as it was right absolutely yeah i have to do one quick call-up because i noticed we have almost 300 people watching on youtube and only 100 likes on the youtube live so everybody on youtube make sure you hit the like button just so others could continue seeing this as well really appreciate all you guys for being here yeah plus the 500 on twitch right now so we're about to break a thousand can i live ask ryan a question yeah i was playing around with solid start and hey ryan i was playing around with solid start and i noticed that like if i had a component that didn't have any dynamic content to it like it wasn't it had no reactivity it had no no nothing on the client side it was actually excluded from the the output which basically means that by default you have an island's architecture in solid start so i guess long question short is solid start by default a an island's architecture we can wait i am so excited for the answer to that question [Laughter] i also owe ryan uh an appearance on here like hardcore so well yes please asap he's great yeah he's so good i've been honestly waiting for the solid start like launch to be coming up so we can have him on to go really in depth on that cause i'm so hyped on the patterns interesting yes we got the liner that's like bigger question b which is like when the heck do we get solid start please something real soon though you know like you know um hey i liked another one of your questions too by the way behind the scenes we have like a you know list of like topics yeah we did just get ryan's reply in chat by the way he said no it's not i don't know how that happened there's a mode to do that but it shouldn't be the default oh don't let it be a bug let it be the people oh okay anyway i was impressed right i'll say i i've experimented with enough of those like full stack framework technology specifically like i was in astro really early i ported my site to astro like over a year ago i think now which is hilarious to think in retrospect it was so early at the time it was way before they had announced ssr i found that like specifically when they moved over to ssr worked in like the simple demo use cases but as soon as i like pushed at all it would break in hilarious ways and about six months later it was perfect like exactly what i expected and more and i it's rough and it takes that like window of doing things breaking things and redoing things i think sveltkit's going through this right now where they just put up two new uh i think like the community post or whatever on github where rich just writes along like like five to ten paragraphs on why a specific like api that everyone's bought into really hard is terrible and he's sorry but they're gonna have to fully deprecate and everybody's gonna have to rewrite their felt kid app again and we already went through this with sapper with sol or was felt but i think oh yeah that's true the willingness to do that is incredible because of what it will enable long term and by not putting the major 1.0 on it you're enabling yourself to have that moment to make those changes and you are burning a little bit of trust with that core group like the early adopters but if you can maintain that relationship through those hard parts you can make a much stronger solution and i feel like if nexjs had the same approach we wouldn't be stuck would get server-side props okay fair i mean i i i'm just comparing this to the whole like angular 1 5 2 thing you know when they just completely hosed over their community right and that's opened the door basically for react and it's like so what are they doing differently and maybe it's like the changes are smaller and they're working there's more outreach with the community saying this is why you know we're doing this not that i was a huge like i didn't know the the whole in-depth thing about the angular stuff and i was i used it i wasn't part of the community really and maybe they had great community outreach but it definitely sounds like so it's doing the right thing when it comes to you know reaching out and making sure that people understand why those changes are happening and they're probably also only deprecating stuff so it's like it'll still work but you get a warning no it's a full like they're deleting the api's and replacing it yeah hard goodbye however people in chat are correcting me which shows that they have done a fantastic job of building these relationships the i've had corrections on both twitch and youtube chat of they wrote really good migration scripts and code mods to help you move over which is super cool to hear i like like these are the loyalty things you do is like you recognize the things wrong and you go out of your way to help the community as you do things correctly yeah i also that some people are commenting on the video quality a few people as i expected are saying like you look better than me on my show which is hilarious but yeah quick shout out to ping ping.gg makes it possible to have this insanely high quality it's built on the t3 stack which we i'm sure we'll be touching a bit on i would love to hear a bit more about how you found uh shout out to sony alpha cameras by the way yeah i i need to upgrade off my 300 panasonic already i've gotten away with it for so long without next to you you can tell that uh yeah 45 millimeter lens man yeah it works so before i forget it sound like you had a question that you wanted to bring up from the notion was there something in particular you wanted to jump on oh right right right uh so how do you end up in web dev specifically i thought that was a cool one because you know it's like it's interesting there's there's that like whole vein of thinking out there that like oh typescript doesn't belong in the browser or or in in web development which is wrong uh does um because it's not like a because web development's somehow deficient or or amateurish or the i if you get that vibe sometimes it's like oh that's not real programming right yeah um yeah i i fell for that for a long time i was a python and then ruby and then elixir dev and i was like shipping elixir at twitch for a bit over a year hated on the front end specifically we were running ember at the time a new team came in that we that came from an acquisition and they refused to work in ember and insisted on rewriting the site and i loved that energy so much that i started paying attention to them because they made a new demo version of the site and react and typescript it was 100 times faster and it's like oh i'll take a look at this eventually actually had to move to a golang team and i just could not get into going and quickly ended up get my manager said go try this front-end thing like you might like it you might be surprised and that's how i ended up falling in love with react and this was a few weeks before hooks were announced too which was very convenient for my functional programming brain what really works for me isn't just like the challenges of it like i think it i think it honestly is a bit more challenging i mean than back end sorry you know whatever i think like the event oriented nature other than the fact that it's persistent and all that is more complex um but it's also the iterative nature of working with our customers like working with a person who's actually use it and that's just a really virtuous feedback cycle it's like hey you know let's try this out let's try that out let's you know and and you can read books like edward tufte's stuff on visualization and get you know interesting ideas about how to present data and it starts actually you know it starts to like bridge into the world of communications right because a web app or any kind of uux ui is is how you communicate with the customer right and it's like it's a dialogue and i just i just love that i love that that part of it i am a full stack dev i guess i mean right now i'm doing you know next js ssr to drpc and uh i think we started on grpc yeah i it's very good for inter server coms i i have a full stack video coming out soon i think it's literally going to be titled this full stack reel and i am really hyped on this because yeah like a lot of what we talked about in it was specifically these ideas of what is each role and i think front end it's your role to like build the layer in communication between your back end and your designer or and or user so if you have a designer then you're probably mostly bridging the gap between design and server if you have no designer or you're working closely with them to get straight to the user that makes sense too but it's like a spectrum where on one side is like infra and on the other side is a user where do you fit in that spectrum and how much how wide do you go on each side and when i saw the opportunity in front end to both do the hard types of problems i loved from back end like one of my first tasks at twitch when i moved to frontend was porting from webpack two to four when i didn't know anything about javascript yet which was nothing about any of this yeah it was such a good though because it was like i had to learn how bad was the configuration file oh it was like 600 lines of ejected create react app yep bad times don't know what's important and what's not yep um and i got it working and now i can see why you did a video on like how why you hate create react app and never never use it i shouldn't have made the video an hour and a half long but it took an hour and a half for me to get that all out of my system like there was a lot i had to say there and i'm happy it exists i yeah yeah please use v2 or the truncated version just don't use that yeah like it it exists for like legacy support reasons and the maintainers are working incredibly hard to help the people who are stuck on create react app not destroy their code bases in the process like they're working incredibly hard i'm making awesome changes like one of the issues that broke my heart in the create react app repo was uh in a major version they stopped polyfilling node modules and all the web 3 people showed up to complain that the crypto module wasn't working in the browser anymore and that was create react apps fault for not polly filling nodes crypto into the browser yeah okay i mean i will say create react app has the best dx i mean i would say next has probably the second best ex astros dx is not that great you know i mean ideally when things fall over your results should not be a white screen have you played with the template slightly more from that format template have you played with that at all oh yeah yeah yeah actually oh yeah that's true that is yeah that's good too i think the v is the the true successor to create react app in terms of like the react type script template preconfigures all the weird like dev x stuff that you would otherwise be worrying about and you can get started really fast and you don't have the giant webpack hidden behind the scenes that you have to worry about at some point like the first time you import an svg and then you bundle it and then next or it fails to deploy on versailles because it's expecting the file in a specific format like those types of weird things i find veet has more straightforward solutions too because there's less to work around yeah yeah it's kind of like the same argument i have against the data like the graphql database solutions where yeah create react app makes the initial getting started marginally easier something like fauna makes the first database call slightly easier but once you run into the hard problems like why is my bundle splitting incorrectly why is this thing being included when i'm not using it if you have more from the start it's way harder to trim to like fix the problem from there right so multi-table joins are bad in fauna i just am very scared of not owning my database and when we're in an era where sql has gotten as easy as it is to build deploy and scale and solutions like prisma have made it so easy to work with even if you don't know uh like sql yet like i as i mentioned before i went from back into front end because i fell in love with react and typescript i went back to back end because of next js versailles and prisma i almost joke that specifically like next.js and how it is a back-end framework tricked me into becoming full stack and things like crazy really helped me go for that yeah yeah it it does trick you and i think actually it's that's actually why i did that astro one of the reasons i did that astro versus an xjs video was to try and continuously like hammer into folks that like ssr on next js does not mean that you that you're what you're putting out to the client is static right it's not done right it's half done the initial tags are rendered and all that but the app still runs on the client a whole freaking enchilada still runs on the client and then you gotta hydrate and get all that stuff and people just like but wait i i you know ssr handle a little bit no ssr didn't handle all that like it's still it's a live app out on the client and so if it's a big ass app on the server it's gonna be a big ass app on the client and if you have a small phone or something like that then that's gonna it's gonna overwhelm it not over you know what i mean it's gonna not be for performance this is the first time i can say like it feels like your audience is more senior than mine if they're running into those problems mine run into the other side of hey i'm getting started with next why can't i reference window in my like body the opposite side of because the code runs on both sides you have to be considerate of the problems on both sides like the server isn't a browser environment and the browser has like bundle size the requirements and needs leave to be considerate of too my next video is actually going to be making your next.js app smaller i wanted to like go on the tools to help with that it's nothing you don't already know about it's mostly just showing how a bundle analyzer works in dynamic imports but i think that'll be very helpful for a lot of people yeah big time big time i mean i guess that that previous question could be rephrased is like i just imported a graph library boom yeah it's always the graph library it's like straight to window and so i'm running on the client duh somebody my discord found a fun one when they used bundle analyzer because their next app at work was way too big they were importing an aws thing for get server side props and then using the type from it in the component so it couldn't compile out the way that next magic compiler does so the whole aws sdk like megabytes of javascript was being included in every single request for like months ah that's not good that's what inspired me about the video honestly amazon does some um hanky stuff like they're like i i had a bear of a try i'm trying to get a like the firebase code into a monorepo because it really wants to be in its own single repo wants to control everything and it's very opinionated and if you're like hey i just want to share the types between what i'm storing in firebase and what i'm actually expecting on the client you know little things like that right the things you run into when you actually use the product and that's kind of the problem with a lot of firebase is google does it use it i talk to a lot of google engineers and they're all excited to talk about the crazy internal tools that will never ship to end users but they used to build this internally keep hearing about the spanner thing i think there's something public about it now but there's some really crazy database tech they're obsessed with internally [Music] okay yeah uh i mean google keep hydrated right this is like literally on the notion document by the way yes i i specify water very important bring water always yes oh you got the thermoflask look at you nice keep school for the long streams very important especially now that these guys had me going like yeah but my last stream i tried to go for the plan was to go for three hours and they kept gifting subs on me so i couldn't go offline ended up going for like almost six i woke up this morning and some guy had gifted me 20 coffees oh damn on buy me a coffee that's really cool really and stuff that's pretty cool yeah one thing i'll say like since i have so many friends that's 100 bucks like whoa okay my i was gifted about a thousand subs last stream and each subscription is five bucks which was just insane oh yeah okay i made more in my last stream than i made in my last month and a half maybe two months on youtube yeah yeah the support's unreal and i i love everyone in the community for that that was one of the craziest streams i've ever had i let me just get super real for a sec like i we've been hanging out talking you know for a couple weeks and and it's been awesome and i mean at the same time as that you know in my in my real life you know my wife is going battling with cancer and doing really well it's great and but it's it is obviously that's my primary thing that i'm focused on and then there's work and then and youtube is coming in a third which is why like the cadence of of youtube videos and everything is slowed down but we're starting to get out of cancer phase thankfully it's an acute cancer which is pretty amazing you know it's actually it's a very short but very intense very good to hear um yeah and so now i'm actually thinking about like okay cool like now we can actually like start to re-engage with the channel a little bit so if anybody has any ideas like i just saw on in the comment stream about like jack should do a twitch channel i'm like okay yeah i mean hey this is this is cool so if you if this works for you guys i'm in i'm again my motivation i i would say in all this stuff is like it's not money you know it's like it's just you know i want to share expertise and and make it positive honestly like i think that that's another thing too is like have a positive vibe you know because i think that's kind of lacking out there i've definitely seen a lot of like negativity in the tech space let's make sure that everybody's you know hey man you know all good positive yeah hi i if you have any ideas yeah that's fine obviously very very down the twitch stream more than happy to help however we can like i'll hop on as a guest we'll raid the hell out of you we'll make that one of the biggest streams on twitch in no time i would be so hyped to help out with that however we can i awesome yeah every i immediately see you chat everybody saying please do it so yeah okay and the big thing for twitch and like succeeding on these platforms is less like do you know how to do it it's much more are you able to like how many takes does it take for you to be content with something you recorded and twitch is both like you need to be better at that and also makes you so much better as you go like i am i self-monitor whenever i'm streaming whenever i'm really at my computer honestly just blaring my own voice back and it makes me a way way way better speaker and i oh you mean like self-monitor like as in i am listening to audio blasting very loudly and by doing that i have become a so much better speaker i've to your point of like bringing some kindness i've become nicer and more considerate with my approach because i'm hearing every word and i hear myself being an [ __ ] and i rethink the way i'm saying things and that combined with chat there to correct me and push me back or push back on things that aren't quite where they should be is so valuable i also just saw on youtube chat somebody threw 20 euros uh and mentioned that they're really sorry to hear about your wife and are pumped to hear that she's doing well and wanted to share that or say that their thoughts are with you i'll be sure any super chats that come through on youtube are either going to you or if you're not cool with that to a charity of your choice cool thank you at least i can absolutely stay in pump to have you on here and i already i'm making my money on this stream from the sponsored show after so don't worry about it like anything i can do to help someone have a show yeah i i used to do that actually i used to like um when i i used to stream a lot like i would release on monday and then i would stream on friday and it was like i had a great cadence of that and then for some reason i just kind of lost it um and then like that on the friday one i would hang out on discord after and just and just chat with folks that was really great yeah i do like i absolutely love that i it's not necessarily an after show so much as i stream one day a week so i do all the things i want to during that one stream and then just send that to the editors and they chop it up for the next few days yeah i should probably get an editor so okay good question for you technical question so when you send like how like my my i record to an atomos ninja five just just the head you know the whole thing and then there's also like the screen recording from uh screenflow i mean almost like boy uh an hour worth of video would be easily a hundred gigs you know and i mean what do i just like do you have a similar sort of problem like what do you hand off to the editor i it's huge i am deep into our solution to this i i have this problem so hard that i am building my own solutions i first of all like the key piece that helps the most is obs is a recording tool so yeah i am streaming right now i am recording the so the uh what's it called on twitch the vod will exist and that's high enough quality that i can rip straight from there or restream but for my camera feed i am doing a separate source record locally with gpu acceleration off of my 3080 which is currently blasting fully utilize the second highest end nvidia gpu for my streams because i need to encode the video out i actually it's not as bad now i'm not doing the noise cancelling on the gpu anymore but i am also using it for the local recording of my camera so i have the source camera feed and the vod stamp both with the exact same start time so it's super easy to synchronize the two and both have my voice recorded within them so it's pretty easy to finagle from there i also mark things during the stream so i haven't done it as well during the interviews and i should get better about that but as soon as the introduction editor mark's like hey that last part get rid of it yeah oh my god what i'll do is i have a marker button on my stream deck so when i hit that it makes a mark on the twitch vod i'll then say something quick like hey dez cut that thing out i that was irrelevant sorry that this edit is going to suck and then i click it again and go and he looks at the markers listens to what i say and uses it from there but it's like so many parts for the workflow where i have to record locally i have to remember to upload that piece to google drive after he has to download that he has to download the vod from restream he has to synchronize those in his editor he has to open up twitch in a different tab look at the timestamps there try to map them to his editor figure out what's going on in them it's chaos and there is no reason why i couldn't build an obs plug-in that does 95 of this so i'm deep in that process automation yeah it's yeah it's just like a lot of how i build and it's similar to how we run our channels we're solving problems we have and we see and that we can't get out of our heads like i made ping because i saw shows that had guests on and i had my own show that i had guests on and the quality sucked and the integration sucked do you know how i uh yeah yeah yeah i know this feels i know as well i will be using ping by the way oh i'm supervising you i will be using ping in fact actually uh yeah for the react roundup we use riverside so is that a competitor uh yes and no in the the same way that like square space and versailles are competitors i would say like oh yeah i would say it's even more so the case for something like stream yard if you're familiar with them they're very much the squarespace of the space we're trying to lean into the the unix approach where there are pieces that you assemble as a creator because we know you can do that the best creators are using the best tools things like obs we're the only streaming solution yes yeah we're the only of the major like call solutions for like high quality video uh like calls that lets you integrate directly into obs for me to add you into obs really i click a little button and ping i call it literally like the gold standard i don't know any like no one else my daughter's stream she's on obs it was like it was it wasn't even like there's no question we support ob yes we have screen capture that's the the thing it's like they think they support the screen cap which isn't support for obs what i do for ping is we there's a you can have a browser source in obs which lets you make like a mini browser window in obs directly with a transparent background and you copy a url or each user in ping has a url unique to them and you could copy that paste it in obs and now i have you embedded in my obs directly with your audio with your high quality video my own metering for you directly it is trivial for me to update that url and have my new guest in i even have it set up with a reference scene in obs so when i switch between my different scenes so i switch to my screen capture to here it has you in that box already ready to go oh man that is sweet yeah and i can do that with two clicks now that was the goal of ping we made it way easier than anything before to do a collaborative show like this see this is the kind of stuff i i really want to re-engage with like well and that and also like man there's some really cool like people have been coming at me like hey graphql yoga 2 is out have you checked it out i'm like okay you know wow that's another cool thing i gotta check out my like my list of topics is just like you know just continuing on and on and on and then like there are some more generalized topics that i want to talk about as well like um some things that junior engineers can do to kind of get themselves up that level up to like senior and principal and architect and and what companies are looking for and that kind of stuff so more generalized content um yeah there's so many things to talk about you know but that's the thing like you mention how many takes does it take to you know get to the gummy center and get the right take you know kind of thing for me it used to be one and then just i think past couple videos i would well ten or so videos would have been like two takes at the very least because it's just you know you gotta like you know you gotta you gotta go through the flow once and go like oh yeah that was kind of janky you know it doesn't really make sense if i go from here to there and i'm always trying to basically yeah we talked about this earlier i'm always trying to get to where i'm basically showing in the video how i did it like how the thought the process of like okay so first you install that and then you add on this and then you add on that and i mean basically the kind of thing that we talked about early on in this which is like hey you want to go and become a content creator what are the steps that you did to end add xjs middleware or whatever it is or maybe or or have a video extension in lbs through you know transparent web frame you know all that kind of stuff and and this let people follow those steps and then hopefully my my hope really is that your average developer will kind of or your your starting developer will sort of look at this and go okay so i'm watching this person sort of go through the steps here and they're running into walls and that's i am starting to leave in like oh look i got an error how am i going to figure out what that error means as opposed to like oh i've seen this error before because i've like this is the third take on this right but like actually stepping through it and going like okay well let's parse out the error let's add some more you know consoles to try and tweak the behavior a little bit and see if i can get to work kind of thing because i see so many folks out there like the first thing they do when they run into a wall is like bang you know go to stack overflow go to you know um you know my discord server or whatever you know it's like you're robbing yourself an opportunity at that point to really learn how to debug you know to just like hey something blew up that's actually the mo that's when programming gets at its most fun really if you have the time like if you're not like under the gun like you're not like oh my god we gotta get this bug fixed in like 20 minutes or like two minutes like get it out the door if you have the time it's like a sherlock holmes thing it's like oh wow you know it could be this could be that i'm going to tweak some behavior over here and see how it changes you know the behavior and try and figure it out it's great you know do that right and that's how you learn that program i couldn't agree more i take the exact same mindset from skateboarding specifically like you can watch a quick tutorial on how to do a kickflip but it's very different from going outside and doing a kickflip and i can't imagine after every bail pulling out my phone and watching the video again that just sounds funny to me like you gotta hit the ground a few times just expect it be excited about it and get back up and try again and think through what might have went wrong think through the little you know and really like look at the border even funny things like i used to do as a kid is i would i got into filming so i could record myself to figure out what i was doing wrong for more complex skate tricks and from that like i was building my own debugging processes on my skateboard and taking that mindset to programming is a huge part of why i've been successful here and that's the thing what you built was not the uh a kickflip what you built was theo's kickflip yes exactly and you know like how i debug is not exactly how everybody else debugs i actually people are gonna you know give me a lot of grief about this i'm sure i i hit up console log a lot like i rarely actually like do trace level debugging stepping through code i think that's actually like i haven't really done that more and since like i was doing more java c plus type stuff um it's just like i just console log and it's just there right it's so easy but like that's how i debug and then other people get on me they're like oh man you should debug it and that's how you debug i debug my way have you seen that comes my way everyone's cool with this everyone is cool with this i don't think anyone i think the anti uh console people finally like petered off a bit like i haven't seen that too much anymore literally everybody's debugging you can like you know yeah put it in the bug but they're only saying that they're saying console debug's the way to go console logging all the way everybody's very cool with that somebody dropped an alert here yeah like i've done that been there done that yeah the one person in there who i know does like crazy compiler stuff is saying no console debugging but sure yeah you work in compiler land man yeah okay i do want to shut one person out on youtube uh chandra shekar contributed 20. i can't i have no idea what the currency unit is on there but i appreciate the support a ton he mentioned that he lost his mom and how much yeah he recently lost his mom to cancer and your story really touched him and he wanted to send all the love and strength he could to the fan thank you but and i'm sorry for his loss honestly and that's that's rough i appreciate the contribution we'll be sure we find somewhere good to put that money it means a time that y'all are like as supportive as you are it's insane to think that the stream's been up for what like under an hour and we're over a thousand viewers across twitch and youtube like so cool to have everybody here and so supportive the positivity is unreal you bring quite the community out and like sentiment with you i've never seen chat this active and this cool ever there's normally like my mods would have to go crazy right now and they don't so you oh do i need mods like i'm going to do the twitch thing do i need mods yes i can there's people in my community who are going to be hyped to hop in and moderate for you oh thank you okay i i guarantee even just as i say that people in here are going to say that they're going to hop in like i already saw two people uh or ollie already said it and all these freaking twitch staff there's already better to have help than you than that yeah you gotta go okay when you were twitch were you in that the building with a crazy staircase by the way uh yeah downtown san francisco right off market street dude i used to go up and i i worked at um lithium i don't know it was origin yeah yeah yeah which is like two two floors up from from twitch around that time yeah it was the one thing between stairs oh yeah okay yeah yeah yeah all right that was a cool building actually and there was like a it was a really weird like i don't know some sort of high-end like makeup company right at the top that had like a really cool floor yeah anyway i was super into fitness back in that around then and i yeah i would those stairs man those are brutal yeah the elevator i was lazy i also would skateboard to and from the office so that was my workout and then i would after work okay i was the worst i would show up at noon just in time for lunch grab my food go do some meetings hang out at the office for a bit grab the free dinner at six grab my board get to the island to go skate skate there until midnight some nights go home and then code until three in the morning that's my workout for treasure island no uh there's a spot it's in front of the ferry building the like little closet is referred to as the island i got i got i gotta get it i know exactly what you're talking about i used to work there too no way crazy yeah yeah there was like there's the ferry building and there's a building right next to it that had like like a like a starbucks for a little bit but then you know also like a long set of offices and stuff and that was like the where we had our one of our first startups was really cool that's like really because i i run the embarcadero that was that was pretty man i did i was where i was every day afterwards are you still in the bay yeah i'm still i'm like right by bill graham's civic center area still like right in the middle of the city all right yeah it's hard for me to leave it's hard to justify being here now that i've went from 400k or to 60 but uh i can't get myself out of the city oh wow yeah okay yeah it's a substantial reduction in salary yeah god bless the community for being as supportive as they are and making it so i barely even feel the hit honestly like it's it is a hit but my lifestyle hasn't had to change much and honestly like i'm so focused on the company and everything else like i i don't have like the family to spend money on those types of things that others do and i really want to take advantage of the unique opportunity i have right now to do that and live on like the lower income but i honestly like i always pay myself a little more but because of how successful the twitch and youtube have been i was able to cut my salary a decent bit which was really cool cool you know i did a i guess somewhat controversial my very few times that i've done like the was it the little minute like youtube shorts thing yeah the shorts one was like a very quick one on like if you are bored in your job or your or you don't feel like it like it's it's negative right you know get a new one even or essentially like if it's you know 20k less like take the job that you really like you know because i mean how many teslas do you need right you know it's like money isn't everything right you should you know and it's certainly not going to be the thing that gets like you know motivated like on a daily basis like oh wow i made you know 10k more at this job but it's lousy and my boss is a jerk and wow i really feel good about this no man you want to feel like you like you are part of it right and and that's what you get which is great oh have you oh yeah on your uh discord there was like a really good like grug programmer thing have you seen this one like grug programmer i can't say i have grug coder like it was basically it's like a caveman coder you know talks about like his approach to coding it is hilarious and like at one point he's like how many how many car how many crystals does grug need you know because you know it's like at a certain point right you know you like it pay is just pay right and it's funny money you know somebody just linked it in chat oh yeah this is complexity bad second of that read yeah yeah yeah cause grug's wife gets up up on him about like you know you should be making more money but like no no no how many how many rubies does grug need to be that many one way i think of it and this this might just be justifying the way i did things but i really liked how for me at least uh twitch gave me the safety net i needed financially to do something stupid like quit my very expensive job and do the dumb thing for a few years like i was able to sell a bunch of my amazon stock to pay my first employee i was able to like because i did the hard thing and i i was at twitch for a year longer i probably should have been that last year was miserable but i stuck through it because if i did i got my last two big rsu chunks that was literally 112 or so thousand dollars and if i could just grind that out because when i joined twitch amazon was worth way less money than when i was leaving so my amazon rsus were a ton of money to leave on the table and even then i left the final chunk because i couldn't survive the last six months i just didn't have it in me but because i survived for as long as i did i had the base i needed to do the awesome things i wanted to do and i do think for me that was the right call definitely isn't for everyone but i try to be cautious of the people who both are like have much higher financial need and for them the job is like i need yes oh yeah yeah i was just gonna say like i'm student i'm definitely talking i'm talking about out of a lot of privilege and i think obviously you are too absolutely for sure there are definitely people who are we're not in that position and you know and and honestly who sometimes have to put their guts on the line to like say hey this is not a good situation even though they can't afford to lose that gig you know that that's stuff absolutely i do think it's important to find ways to not end up hating engineering especially when you're in those roles or you're in those tough positions this is a slight pivot but it's a thing i've been thinking a lot about since it came up in a twitter space a few i think last week uh the role that our channels are filling both for like us and for others i started taking content more seriously because i was missing something really important to me when i left twitch i no longer had the twitch front-end engineering slack channel and as yeah being surrounded super talented engineers it's just like you not having that after you're used to it for five years like those people who taught me and got me starting everything i know that's the place when like svelte got announced and when saul got announced i went and shared the post there and talked about them and since then like and they're into it they're just as intuitive as you are they're like oh my god this is the best thing ever you know like and you're talking at lunch and you got that like oh wow this have you seen this thing oh that's cool maybe you can bring that in i love that absolutely i had yeah i worked at ning uh best best tech gig i ever had i think was ning and cool name was like this yeah right um it was this hosted social network and i mean facebook wasn't as big of a deal like it was like early days facebook so you know you know yeah and we had like 50 cent had his you know social network over there uh martha stewart had a big one you know a couple like it was funny and of course like we joked you know like you know you'd have like uh what was the the running joke was are we hosted singers swingers and right-wingers and then yeah whatever anyway um but the wow the team that i was on was so good and every day i would learn something from them and we were just like constantly feeding on each other and if you get into one of those positions that's just great super rare though i gotta say yeah cause that means that you know you got like they were really really picky and they're hiring like crazy picky and so when they laid off literally they just did like a 50 layoff boom we're changing everything boom 50 like the valley just came in like sharks yeah people from nick crazy i that was way cooler than the experience i had overall like the average engineer at twitch for especially for front-end stuff wasn't that great a lot of them were hired when it was an ember company and didn't want to make the move to react so a lot of them just were like dragging their feet and refusing to engage with new stuff the number of people who were like actively mad at me for pushing to move off of class components in favor of hooks was hilarious i ended up like flipping things and befriending most of them in the end but there's like one or two people that still were not very happy to be making changes that all said though for every one like one or two of them there was at least one person who was really hyped to have these conversations and maybe they were like too busy to see these new announcements when they came out but when i shared them they would engage in the thread and have an awesome conversation but the sad reality is like when i left the channel kind of died it gets like one message every couple weeks and it's usually like a js bug it's no longer the conversation it used to be and i i was sad to hear that but i also get it like i was an important part of why that conversation happened and people are saying chat like i i brought a lot of energy i remember one of them yes yeah one of my coworkers even said like this ingredient could be you yep one of the co-workers i had who was like at twitch for seven plus years at the time said that like had a formal sit-down with me and like thanked me for being there because i brought the energy he missed from twitch and he felt like that was a huge part of why he was able to stay and at the time i took that as like a huge compliment but i realized in retrospect that was the signal to get out but the reason i brought all of this up was to come back to what we're doing i started the twitter the youtube channel and all of this to try and have those conversations with people i respected again because i missed that and like running my own company and having the small team like all my engineers are incredible and the team that i have working with me is one of the best in the world but they're pretty annoyed talking about all these crazy new technologies we'll never get to use and i want to have those conversations so i made the channel to do that and the role i realized i filled and you touched on this a bit is that like lunchtime conversation the thing that like yeah for us is the opportunity to pick like the brains of these crazy smart people about these new ideas and things but more importantly for a junior dev or somebody who's early career to sit there understand a third of the words ask a couple questions go do a bunch of googling and research after and level up so goddamn quick and we're filling that role on youtube right now that's what we're doing here right now you give people something like oh wow that's actually you know you can get to that level kind of thing i mean i don't know if i'm at that level i got that's the other thing that is interesting is like well yeah but i'm not for like i don't know i it's been a hundred years since i've done any amber like you know that's the thing it's like you're a principal i'm a principal for react for sure like i mean come on at this point you know whatever but like you know i solid kicked my butt a little bit actually i gotta say when i did the hackathon like i i you know there's just i had some issues with it like uh you know i you know there's everybody's at a different level of different things right and i think that that's like yeah i was joking like my wife's always like oh i married you know a software engineer and my printer doesn't work like that's not my job like you know it's like react is you know is if that's a job right you know like it's felt is a different job like you know if you really want to be a full-on full spell developer i mean you know you gotta skill up i mean there's certainly some shared skills html css javascript typescript whatever like you know to really get into it really understand the framework i mean like come on hooks like how many people out there don't get really get hooks like you know i've seen some whoa spooky cook's coat you're like wow that works no that doesn't work actually that's an infinite loop just waiting to happen you know kind of thing i've seen so many scary things on like twitter just a screenshot of look at this cool way to use a hook it's like that um that that shouldn't work and if you turn on strict mode it will tell you that it shouldn't work yeah i totally feel that that also i want to push back a bit on the like how principle are you i would argue that once you're your principal at one thing you're a principal engineer period and some of the best conversations i've had have been me as a a principal react engineer who sucked it back in because i just let those skills stagnate having thorough infrastructure conversations with infra people was still some of like the most fun combos i've had i know people who over heard those like a great example this i'm not great at databases i have gotten good enough to like hold my own especially over the last like few months since we've leveled things up at ping significantly i had the ceo of planetscale on for an interview and obviously he knows a billion times more about databases helping things happen at slack and github and these other organizations that have to scale their stuff i think that because of the difference in our skill sets there's an even better conversation to be had there at times yeah that is so valuable because we recognize like we are both engineers that absolutely know what we're doing but we don't necessarily understand the depth of the thing the other person is doing so the questions i ask as an experienced engineer about the thing you're very familiar with are super insightful it's like when i watch somebody like primogen try out react or solid.js for the first time the amount i can learn from that from what isn't isn't intuitive to them as a skilled engineer is super valuable there's the other side of this like when i did the dan abramov mock code interview where he bombed most of the mock code interviews he did but he passed mine because of the way my interview was structured but to highlight that an engineer is obviously skilled as dan abramov would fail a traditional job interview was really valuable for people and i think that what is a principal engineer is super supe subjective to the point of being an almost useless turn i would rather something like experienced engineer where we just have more career experience yeah yeah yeah yeah just fyi the number of interviews i bombed oh my god uh yeah it's like i i don't think we were talking about different from youtube made us better engineers i'm certainly but far better engineer than i was three years ago because of all the research and everything i had to do but oh man i had done like tech a day which is like 30 days a really old series way off the end of my deep deep cuts on my youtube channel um but it was like a different tech every day because i was like oh wow it's the beginning of the pandemic how cool would it be to have like a little bit of a little brown bag stand up every day or a brown bag thing or every day learn a new technology i did like redwood blah blah blah right and i saw man i i was jacked going into this interview with this company i was pumped right i was like man you could ask me any front-end question i'm just going to crush this thing right and i can't remember what they they asked me oh some god awful like algorithm question that was like you know i couldn't like i couldn't even parse the dang thing and then i just just completely bombed it and i'm like but wait i'm thinking myself like why did you ask me this like the sudden you you gleaned no helpful information about if i can code how i code anything you literally just took a decent engineer and show and got them to feel crappy about their own skill set whereas my my thing going in interviews is i really genuinely want to see your approach i want to see how you code at your very very best which is why i actually don't really like to do the technical side of stuff one of the things i'd love to do interviews is just ask somebody hey tell me about a recent application that you made tell me about ping what's the structure of ping now i mean if we're competitors fine do it you don't have to tell me right it's a trade secret whatever but like if it's not like if you're if you're i don't know doing like whatever ehr records or whatever right tell me tell me something interesting about what you worked on tell me you know and the architecture of it and then i'll you know throw you some loot let's throw you some things like oh well what if there were multiple users on this account how would you handle that you know kind of thing and get to see how they work through that but they're in their own element right they're on their home base and i'm they're showing me their best right and that that's i think people deserve that right i think i your state of programming interviews is so bad dude this is so bad this is so hilariously my thing i am pumped you're bringing all of this up have i shown you my uh interview guide that i sent to dan before the interview no let me pull this up super quick i'm just grabbing it things made with wordpress things in php php yeah nice find it uh ning was in in php as it probably should have been i mean back in the day that was the thing it was like that's great cool it worked first it never happens whenever i give a technical interview i try my hardest to get a doc to the person ahead of time with options because as you said oh i like that a lot it's it's so important to set up the interviewee to succeed because that's my job like when i'm interviewing i'm probably going to be the tech leader the manager for that person and i need to know that like specifically what i'm looking for is if i put in the effort to help you succeed what does your delivery look like and these are just the steps i take because like that's my job as a manager as the hiring lead as whatever role i'm filling it's to make my team as successful as possible i will never understand why interviews don't have that same mindset it actively frustrates the hell out of it i've gone to interviews and i swear they're actively looking to destroy me like they're it's almost like you know how can we make this as hard as possible such that like i i know i'm like what is the point of doing that that is just that's just being mean you know you should always want to be you know have people be and see their best people are asking if this is so i wanted to work quickly sharing that uh it's also linked in the dan abramoff interview video because i think it's important people should see that when they're like watching that the structure of my guide is to acknowledge the different types of interviews people like as well as some unique types that people might not be as trivial yeah the traditional is like an algorithmic product code what it was was i'm sure it was a leak code question which by the way like people have asked me like should i just hammer down on leak code i'm like personally no because it's not coding i mean it's it's great it's fun if you like that sort of thing but you know build an app man you know build something real you know then you'll learn a lot about stuff you learn about you know how to do off how to do database structure or how to go and you know where to spend your time you know how to set up stuff i mean there's all kinds of stuff that you learn from building an actual thing as opposed to just like you know invert this binary tree blah blah blah blah and like uh okay yeah what'd i learn not much absolutely agree sadly i think that like the first job and the job you like are are very different processes like when you're fresh out of school or boot camp and you need to get that first gig it doesn't matter how good your github is if you don't have a job on your resume yet and as much as the leap code stuff sucks i find that for the first gig it can be very helpful in getting that hating your job for six months because you're you're surrounded with a bunch of survivor bias like the people who are willing to do that crap and then for your future interviews be really strict about stuff like i only use the tech space resume for a long time because i didn't want to work at a company that cared too much like if they wouldn't accept my markdown resume i'm not interested oh that's like like self-selecting out as an interviewee like being willing to fail an interview almost being excited to because it lets you know that that company isn't for you like presenting myself in interviews in a way that is how i like the people i want to work with so if i fail i know that the people i wanted to work with failed to and they have to be somewhere else yeah yeah but i think that's more important for the second plus like like or the second job onwards than the first one and the current like the grind to get your first gig right now sucks yeah yeah for sure uh although we will say do yourself a favor and don't do well if you got a great github great awesome perfect but if you have uh really good code sandboxes because code sandbox is great right i mean it's actually running or it's stack blitz whatever but i can actually just click a link you know and see your code yeah and see how to actually run right that's cool that's what i can say a lot of yeah you know and i don't know about you but like i can definitely see like when people i can read code really really read code and i can understand like oh this person um they're they're weak in this area that strong in that area and it tells me a lot actually that's going to be probably more informative than job experience or whatever certainly academic experience absolutely but i'm biased like i never went to school so yeah i i did and it did not help at all with my actual ability to deliver the and obviously like if i'm the one interviewing you having a bunch of leet code skill and not having a github with cool stuff on it like you're not going to pass my interview but i don't think my interview's the average interview right now i yeah i try to be really conscious of this when i give advice here like i i've started like opening certain videos with if your goals get a job asap go watch danny thompson ignore everything i have to say my advice is going to help you love your job but it's not going to help you get a good job fast it's going to it this is how i keep myself sane and excited about engineering not how you can get your first gig as fast as possible and i think those are very different like paths yeah but once you've finished that most consistent messenger ever i was a fry cook now i'm a software engineer this is what you have to do have you talked with danny actually i feel like you guys would have a really good convo i have actually yeah yeah he's great he also had the fraction yeah he's great i brought it up yeah he you know you mentioned like um some people's on-screen persona is different from their real-life persona danny is just 100 exactly who he yes yeah and i i think we love each other for that in particular like we disagree about a lot of things but quickly realized oh we're talking a different story to different people if we walk that line what i ended up finding is i was i'm doing what i'm doing now where you sound exactly how i sound when i'm talking to danny but i want to be clear like for the people getting their first gig leap code sucks but having that skill is probably going to help you get that first gig that's danny's role normally and that's the unfortunate you're right that is the unfortunate truth that said i want to show off the other options in here because i think there's please please i'm sorry i mean totally this is no this is this is going to be such a good clip for the channel i'm hyped i'm going to separate this part from the bond so the traditionalist the pragmatist and i think the the realest is the third one okay then well let's go through them the traditional list was tldr one thing i call it in this though i actually say most of our problems come from advent of code so if you do advent of code you might have the problem ahead and i'm cool with that if you have the solution to the problem ready to go already and you say that i am hyped because you can like like that means you like are putting the time in to do this and you can recite the solution and even if you get like a part wrong but you remember that there is this solution and you can have the conversation about the thing you don't remember and all that i think that's just as useful as figuring it out on the spot and i i don't care if you already know the problem for leap code type stuff ahead of time yeah i've i've had people say like hey if you know the question you know the answer to this trick question or this question you know please tell us first but and then i think it was it's one of those like puzzle car talk puzzler ones like 100 kids walk onto a plane and they all have numbers they're all sequentially numbered but one isn't around how do you do that and you're like okay you know dude really like if this isn't does this tell you anything about anything like i could i could sail through that question and not have an idea about absolutely anything job related and you would have no idea because you've gotten no new information that question anyway i'm sorry no worries such a good like tldr like same as above but with a realistic code problem oh yes please yep okay so the goal of this one is i prepare a problem so yeah the pokedex is the basic one and this like i have a whole example here of what horrible api holy crap there's a lot of pokemon apis and they're all terrible so what i do is i give you a variable ahead that's like here's a bulbasaur here are the things it has render this as a row component second one is now i have an array of them render this as a table the third one is i provide a selection component that has these these props how do you use this to filter the table nice i think there's a really good like level up problem because i can quickly gauge how familiar are you with react how familiar are you with like render patterns and how well do you operate specifically i like part three a lot because it's how well do you operate with provided code and like asking the questions about that well string or undefined shouldn't it just be like string selected type question mark string probably but i i think i wrote it out like this just so that you don't have to be as familiar with typescript because your brain yeah exactly but i i want to make sure this problem is accessible to people who don't necessarily have typescript brain where if i put a question mark that's a syntax they might not know and if i put or undefined that like even if you don't know typescript is very clear this is one of these two things yeah so oh speaking of syntax that people most people don't know that i absolutely adore the question the the new uh optional code optional chain yeah yeah so good i use them all the time thank you thank you thank you for that my god that made made javascript so much let's quickly show on here for people who aren't familiar chef's kiss optional chaining yes it means that if a thing is nested and you don't have you don't know if the thing all the way at the back is defined or not you can use the question marks and not have to check every step along the way it saves you from a ton of like if user if user.phone if user.phone dot what is it again uh this graphql stuff not having this like i don't know how we ever worked without it and then knowledge coalescence oh cool same person is a similar yeah yeah yeah yeah question our question mark so cell is yeah yeah so that's as opposed to pipe pipe right pipe pipe is like anything null-ish yeah it's it's anything falsy yeah right you're policy right so in this case you get questions null or undefined that's it yeah because you run into a lot of these issues with the the double pipe it's like oh i want to specify false right and false is a valid value for me i don't want you to go to true just because i said false yeah absolutely i ch chat's freaking out over this on youtube in particular people are are very excited to learn about these things so that'll be useful there you go man right there the only other thing i wish uh javascript had i'm sure there's some great rfcs out there but um ruby has the inverted if you can say you know um print hello if greeting you know if you want to say greeting right and it just reads so much better than like if say greeting print hello and i just i wish we had that right it's kind of like it it's exactly the same thing it just reads really nicely i i like ruby i think that i missed that but as soon as you said that i saw maple and chat that they hate unless and yeah yeah okay fine okay right but but but unless is an if yeah it is i i think i'm leaning towards you but i i am trying to reduce the amount of weird syntax i use i i'm even 50 50 on ternaries nowadays like a single ternary is fine nested turn around no nested ternaries unless you're doing a temporary mission and then it's the only option which is that but oh yeah yeah the the only conditional syntax for type definitions is nested ternary sadly yeah i mean you can get into some like typescript you can get to some really weird areas with that you know conditional types just get like whoa and do you really need any of that um probably not on a daily basis no yeah if you're making a framework yes probably not yeah yep i totally okay i wanted to show you i agree the realist i think you'll dig this one it's you yes hit me up ahead of time with a ideally like a github repo or a project so i can quickly take a look and just make sure this is like of quality enough to like bring into an interview and then the interview is you work on the problem with me live you like have a bug you want to fix you a feature you want to add you just you're working in a code base you're already familiar with and onboarding me to your code as you work on it and this like i've not had the luck of anyone picking this but i've done some chats that were very similar to it that weren't formal interviews and i've learned so much more from how someone works from seeing how they work crazy thought i know than almost anything else but yeah i i love this option and i'm so excited for someone their home base yep right and it's our goal to be their new home base yeah right exactly yeah like it's not our job to see how badly they can struggle it's how greatly can they succeed like that's our role as management as leaders you said it a lot better than i did it's not our i i'm a very empathic person i don't like to see people struggle right that's i it hurts me right so i don't want to go into an interview and feel uncomfortable and weird and lame i want to feel like everybody's having a fun time like you know you're going to go out of there and you're going to be like hey that was really nice and i got it you know i'm not too my own horn but i've definitely had people come out of interviews i want to work with that guy you know that that's cool i like hearing that yeah absolutely i i've been really proud of this is my favorite that i i i hope someone said sorry yeah oh yeah we're still t3 tools at the time before we change our name to ping yeah we were t3 tools previously which was a not a great name for a company great name for a staff though thankfully d3 stack for life but we used to be three tools uh the goal of this option was specifically to if you have a way to interview that doesn't line up with one of these options that you want to propose please do i don't like if you have a better way to show off your skill tell me and we'll do that and you could add to the list yeah exactly i would love to get new things to add here based on other people's like methods for interviewing i've had this this is brilliant by the way thank you and do you use this is this is this oh wow i i've used this for all of my interviews other than like so i use this when i have to do a technical of some form because i'm not familiar with your technical ability but wonderful nine out of the last ten interviews i did i didn't need this because i knew about their tactical ability they had a github with lots of code on it that was really good we had a convo that went really well and i didn't need to ask more questions from there it's like this isn't something that i i push for every interview it's something i actually try to avoid because as you said technicals suck but if i have to do one which you have to do and that's the reality of what we do i wanted to make sure it's set up to make the candidate succeed i even say here at td tools we want to build our interview process around your success we expect different candidates have different methods that best showcase their strengths it should be as minimal as possible and it should be have the most informational output for both parties right what are you looking for what am i looking for from you and you know if it doesn't if just ask yourself what do you want from this like i i think people don't do this what do you want from this interview like what information do you want to gain and what are the optimal questions that you can use to gain that information i i think a lot of people they go into their interviews and they're just like well i in an interview at a different company and this is what they did there so i'm just gonna bring it over here it's like yep uh really it's even funnier in the startup world like like if you're interviewing like google at a small company you're gonna end up with a bunch of google engineers at your small company and you're gonna be reinventing kubernetes for the 15th time trying to like ship a twitter clone i have consulted with four-person companies hiring their devops team because they needed somebody to unscrew their gigantic cluster of stuff that they could have been a single lambda function right homebrew whole air homebrew devops that has absolutely nothing to do with what we created yeah that that's something that like these small companies i was working with one yeah actually lithium we went out to uh we bought this little company they were actually they were a company that was like monitoring the twitter firehose for like pepsi and stuff like that so when you know pepsi would go like put out their ad at super bowl they want to see like how many people tweet about this kind of thing that was their job right and i remember talking to the lead engineer over there and he's like he had such a great take on it was like i need to know what in where we want to give put our spend our engineering spend like you know it should be on stuff that is absolutely unique ip to what we do right it for us that is the indexing and fast lookup of the twitter firehose right am i going to spend my money on building a ui framework heck no am i going to build it on i'm going to say i'm going to use whatever is out of the box man i'm going to use material does it look great no well if yes i mean look the material looks fine whatever i i don't know if that was a choice whatever but what i'm saying like don't don't just make stuff right you're just making tech debt right be intelligent about the things that you make and the things that you invest in and that's what actually you know when i talked earlier about like a video that goes like between junior and senior right that's actually a lot of what i'm looking for when it comes to like people who are going to move up that line is understanding really of like what does this company do how do we make money you know what should we spend our money on you know and and can you make the right choice about that jack mentioned yeah i absolutely love that take i like whatever i like so are you familiar with y combinator the startup accelerator oh yeah yeah we did y combinator for ping at the beginning of the year uh winter 22 batch and i i went in skeptical i'm kind of surprised it still exists yeah it that i oh okay i was too especially considering like the terms for the deal at the time we ended up being the first group to get the new deal which was the same 125k seven percent but on top of that uh 375k mfn which was like a huge unexpected thing to get dropped on us day one and gave us the padding to be much more considerate about our next investment round what does mfm mean uh most favorite nation so the next best investment deal you give matches for them so like i i can no longer give a friend deal of like you invest at a lower valuation because then their 375k converts at that but whatever like from the day yc starts onwards whatever the best deal somebody else gets investing in the company that's what they match at okay the goal is to push you to be much more considerate of the valuation you're raising against because it's it's both like a nice padding like gift to land on for the money to not have to worry as much about money for our company but also a little more stress in the sense that we have to be more considerate of the investments we take and the deals we give because if we're not then that money converts at a much higher uh like uh percentage of the company cool but they did give us 500 thousand dollars what i'm guessing the comment stream is like i i'm gonna channel that and say please theo do a video i will watch this on basically all the speak monetary stuff that just came out of your mouth and organize it in a way where i can understand it like most likelification convertible heck yes because a lot of these people go into this gig because they're like hey man like i'm gonna go and work a couple of crap jobs you know and then i'm gonna go and i'm gonna yeah look look look at the channel man chat you're right i will yeah yes you've yes please right they're like i want to do a startup but do i have any idea about convertible most friend nation friendship deals friendship five i don't know what the heck you're just talking about but i would watch it i would watch it like some guy's like i want to be rich not not out of the realm of like you know okay you know i mean again you know how many how many gems does grug need right but like still like it's you know like yeah yes please look at all this yeah yeah i did not expect this to be the response i thought people just want to hear me talk about you do this video okay i will do this video very soon thank you for the push on the structure organize congeal you know i i can think like you have no id think like i i'm a person with like a checking account i that was me a year ago i'm still close enough to that to do this like i had to quickly learn all of this stuff and see like a big part of why i was bringing up y combinator is that they like the youtube they have a financial literacy course at y commentary not directly but they have a ton of resources internally and their youtube channel is straight gold the youtube yc channel is one of my favorite channels and nobody cares and like nobody looks at the channel like all their random like startup school talks and stuff are better than some of the resources we had internally it was so good the main reason i brought up yc though is their like motto the thing on the t-shirt they sent me is do things that don't scale things that don't scale it it it i have reflected on this kind of where are they going for the past year i i was not sure at first i have grown to love it what it means is like what you're describing here like grabbing a hacky like mui client to prove out this like firehouse project oh like that's not a scalable installation but it will get the thing working fast or a common example they gave was the guys who started stripe what they would do is they would show up at the office for the other companies in the batch and like other companies that they were like talking to and set up strike on their computers for them they would take your laptop set the whole thing up and press go for you and by being that involved they got a ton of customers on stripe way earlier that was not scalable you can't have your founders manually onboarding every customer but the value you get from that is insane yeah i was thinking like furl w here was like figure out scaling later it's like you know if you have like a really cool like hey we're going to apply ml to this thing but we're going to do it and it's like literally like you can handle like two transactions an hour you know whatever kind of thing it's like yeah but it's but the output is freaking amazing right the output is life-changing right you're gonna this ml thing is gonna predict i don't know you know whatever like something crazy um but it's gonna take forever then once you once you get it right then you can like say well okay cool how do we turn this into an optimization that takes like you know like this thing yeah this is actually harkens back to all the beginnings like how i got into being an engineer and like my whole approach to it um have you ever seen a movie called like let's say like brainstorm or something like that like okay so it was this it's an old video it's kind of a combination horror tech man whatever anyway so uh they come up with this recording technology like they can record your brain waves right and then play it back and it records on this like crazy huge tape and like i remember part of the the weird thing about this this um movie was it went into like the engineering process around all this and like they started off with this amazing helmet that had to be like liquid cooled and stuff and it's like outgassing you know all this sort of stuff and it's reading your brain waves and all that sort of thing and and then like they're like okay well we want to productize this and so this guy's the head of the project his wife is like a product designer and she goes off and like takes the chips that are powering this big head scanner thing and like makes it like smaller and puts it in like that her next rev is like kind of a hat and then by the end her rev is like this tiny little you know kind of thing that goes around your head and it's like that is my design approach it's like get it hacky get it crappy have the outgassing crap come out of your head you know whatever like that first and then you know like make it better just like slowly like oh well we now we can like make this rip that part out because we don't even need that anymore that was all the diagnostic scrap we know it works so there you go and then you know yeah just kind of make it better and better eventually you end up with this really tight really cool thing and you're like dang that was great that's awesome yeah you know sorry that's i i love the digression in there am i self-taught yes i am by the way james craig yeah i i i love that mindset i feel like so many companies especially like some of the ones i talked to especially exactly ones in the tech world especially it almost feels like the problem they're trying to solve is scale skills no no no no no last thing you want to do yeah don't don't don't figure a cell scale sell a solution to a problem and then scale that solution exactly yeah like come up with something someone you know fix a pain point for someone like i didn't i don't know i'm looking around for a perfect enchilada recipe they come up with the perfect enchilada recipe app i don't know whatever you know who knows um but yeah to solve a pain point for someone make it visceral i mean haven't you a visceral thing that people can engage with and then yeah once once people are like yes i will buy this like as an example like your financial literacy for tech guys for tech people video which is clearly needful like they've got a pain point right there absolutely and like a company example something like planet scale which yeah they are selling scale but they're selling scale because they solved that specific problem of my sequel uh clustering and sharding for three separate companies they solved it for youtube they solved it for github they solved it for slack they open sourced the solution they had this thing called vitas and it was still too hard to set up so they made a company for that part yes they are selling scale but they're not selling the scale itself the scale is a thing that exists on the technology they're selling the assembly the infrastructure and the annoying parts of accessing that scale i think that that's one of the best ways to sell scale but beyond that it's it's a losing battle to try and to sell something big when you could solve a smaller problem first hey can i we just talk about i imagine has a really great question here how do you balance love projects versus work projects something that i i get i feel this i i feel where you're coming from in that person um you first my answer sucks for this oh okay uh well yeah i mean your your answer's probably gonna be work first well yes definitely work first right you gotta i mean you gotta make everybody happy at work that's number one thing that pays the bills that pays a check it's actually not my answer it's much more okay i okay i have to love what i'm doing okay but okay you first no no okay all right um well yeah and then then we'll come i just want i what i really want to get out there is like don't beat yourself up about love projects not panning out or not being like oh my god i haven't done this man it's like i got home from work and i just like uh you just want to veg in front of the tv and watch you know rust to riches blah blah blah you know whatever that's okay that's okay give yourself a break you're fine don't hold yourself to account don't beat yourself up for it i've done that way too much just please please don't beat yourself up and people are like on twitter like oh my god i have 22 000 side projects i feel so bad don't you learned a ton like you learn how to do all kinds of crap and like those 22000s you've learned all kinds of stuff right just just breathe breathe and let go now to you absolutely i i agree with all of that i'll say for me i've never been good at putting myself into more than one thing at a time in terms of like one of the things i'm into like when i'm learning when i'm skateboarding i'm learning one specific trick i have hundreds of tricks i can do but when i go out to the spot to skate i usually have one thing in mind i'm there to do that day and i'll work my butt off until i get that when i have a job i i tend to find or make my job that thing if i can where i'll like find a problem that will be the thing i'm thinking about when i fall asleep and will be the thing i'm thinking about in the shower i i personally don't do well with jobs that don't fill up my brain in that way and it's more like a hunt for satisfaction like if side projects aren't satisfying you to the point where they're taking your focus hopefully work is i'd say the best role of side projects is when your work isn't satisfying and you're looking for something that is side projects can be a great thing for that at that point how do you balance the two i can't i don't know what to tell you but my goal is to try specifically to this is probably the autism speaking but make myself as excited about the things i'm working on as possible or they're not going to get done like to an extent gamifying things like that yeah yeah i was going to say use it use your reward thing make sure that the words are healthy yes don't like oh i'm going to like give myself a cake you know if i do this right that's not a great idea um for long-term health absolutely like you know oh i'm gonna go like there's a lego set i'm jonesing on like that ferrari blah blah blah blah blah blah you know okay i'm gonna go grunt through building this thing that like uh so boring but it's gotta happen kind of thing and you know like the ci cd whatever you know it's gotta happen i don't like it and then i'll get that at the end that's i sometimes that can be a healthy reward like i guess you know you can go too far too that you know again something i've seen work pretty well uh i know a few engineers who they actually wake up really early and they do their side projects and personal stuff at the beginning of the day so they're not as burnt out by the end and to be frank it's better to be tired at work than it is on a side project if the side project's the thing you care about so i do really like the idea of like do it first not last yeah depends on how rough your work is yeah of course it depends on a time i personally i can't wake up early so for me i would do the opposite i would like wake up as late as possible just barely show up at the office leave and then go code on my own from like 8pm or even like midnight until three in the morning working on whatever and like i the projects i pick don't let me not work on them in that way and i'm very passion driven in that way so a lot of my advice is not applicable to most people but yeah my projects i see in chat a lot of people are going to be very similar to me that's why y'all are hanging out it's why i love you guys so much but uh yeah i don't know if i recommend it i think you and i are actually really similar it's interesting because like absolutely i'm dyslexic right i know that like and you're autistic yeah right and i i just like it's all like it's interesting it's like that i i don't maybe i'm autistic too or something but like you know the reason that i am in this gig or that i've been doing this since i was literally 13 years old because like computers were the only literally only the only thing i was good at and like that's just you know i i just i was straight fs and ds because you know at the time they didn't do affordances for people with like a different way of thinking about the world when well now now i understand actually that actually dyslexia is a good thing when it comes to technology certain types of dyslexia actually work really well because they allow that like crazy level of hyper focus you know because i can imagine the structure of a whole system in my head where people other people are like oh man i just get lost in whatever and i'm like oh well that's this talking to this telling the also by the way woodworking really good for this that like re three space thinking all that that makes the time set i think my equivalent of the woodworking is the skateboarding it's very similar oh yeah yeah yeah the physics yes yes yes constantly yeah totally infects my brain like the crazy thing about skateboarding is you're always trying to like thinking about like oh it's this i'm getting like the wrong sheer at the wrong time and the board's not yeah yeah it's actually really cool i think it was a jack black interview like the actor he is friends with a bunch of skaters and it's been like casually getting into skateboarding and something he described really well that's like very much like part of my core experience i don't think about it which was like as far as like back i can remember i was on a skateboard but once you're even like somewhat familiar with how it feels to ride a skateboard the whole world looks different like when you're walking on the street you're noticing how crap the pavement is when you look at a stair set you think about how it would feel to jump down it or ride down the rail when i'm in a cafeteria i look at the tables like oh these would be slippery be fun to like jump and slide on it and like you don't need to be a bit of a skater to see all of these things and just the world looks different once you're used to the skateboard i think the same thing about software like i can't look at a tv screen or a website or anything without thinking how does that work how is that built and the ability for us to rabbit hold down that and figure out the very core here's how this one piece works means that when it isn't working we can find it and fix it so much better too yeah if you if you like watching tv don't get into video production because then you'll be like you're like oh the lighting was off on that oh i know that after after effects extension i use that too that kind of thing yep i am actually like really annoyed lately about how bad how dark tv has gotten not content-wise color but just color-wise just bring up the brightness i want to be able to see the effects on the screen without having to adjust my brightness to the point where like i'm only getting you know half the display but i spent all this money on this super fancy oled tv i need the blacks to be black okay fine but then you need like an ultra black room to be in right and you know whatever it's crazy but but my hdmi yeah the last batman movie the guys hit it like right in the head that's a batman movie it's like i don't even i honestly have no idea what the batmobile looks like other than the lego set because i it wasn't i didn't see it in the movie it was black on black i was like oh wow there's like these little you know red puffs coming out over there as well i was like it's the batmobile it's supposed to be cool i mean i like that the tumbler is the best freaking batmobile ever i love that coming from the music world like the exact same thing happened with like the lo-fi move where it stopped being cool to have your recordings mixed well and sound good and sorry being cool having everything sound a little bit trashy and that was actually so weird it's like my degree is audio engineering i care so much about like making everything sound as good as possible and some of my favorite artists intentionally make things sound bad and like reflecting on that and rethinking my own like artistic analysis process based on how the times have changed was really interesting but it's nowhere near as simple as films are too dark now but it is really interesting how these things change over time and how things that we like put so much effort into getting right like making things visible making things sound exactly how they started when we heard them gets thrown out in favor of whatever's cool now i gotta tell you i was driving my daughter and i back from college a couple of days ago and we were listening to like pop rocks on sirius and it was like a bunch of like auto-tune things right in a row and i'm like oh come on i can't even handle this anymore you know it was so bad and then i like so i like flip on my phone i i just start pulling up random stuff like love shack by the b52s and i'm like wow actual music like they spent time crafting this song and singing really well and you could hear the instruments and they're just spot on and you're like wow that that's music like still isn't a steely dan track and compared to like the auto-tuned crap i'm sorry old man yells at clouds but i mean with you in the audio engineering come on you know what i'm telling you i absolutely do what i'll say is it's it's disappointing to me not like your stance but that the stance is as justifiable as it is because there are so many artists that go so much further than others before like kanye west for example he created such a chaotically unique auto-tune process that an artist he sampled bonavir who's a traditional folk artist was so impressed with what kanye did with him if you're bringing in something new cool yeah and bon ave not compensating for just bad singing or just mumbling absolutely these guys are like mumbling like i can't even hear the lyrics come on dude totally agree what i think is way cooler though is like these artists who start as producers and then become vocalists where they're using their production skill to bridge the gap somebody like uh or travis scott was a producer for half a decade before he ever stood in front of a microphone and wanting it like this i might as well just sing it myself yeah you know whatever i think that that's become much more common and on top of that there are more artists who recognize that like because of these technologies they can make things that are so much more refined like i want to finish the bond of airpoint somebody else i call that a chat uh justin vernon from bonavear he was so impressed with what kanye did with the auto-tune that he actually hired a bunch of engineers to build a live auto-tune machine so he could use that sound in concert for his own music and ended up producing some crazy hybrid electro folk rock albums using the ideas he got from kanye west sampling him and i find that whole orchestration process so cool and i think like that didn't exist in art in the past and as great as it was that a steely dan song or like bob dylan song came out sounding as incredible as it did in the songwriting like the not bob dylan james okay yeah i i love all of them so much still and i listen like i listen to the turtles way too much for somebody my age but i i don't know so okay happy together one of the greatest songs ever written but i love how an individual like a kid in their bedroom if they just sit there and grind on one song on their laptop for like a month straight that can be indistinguishable from a big studio thing like you can make that quality and there are like it's fewer than ever who do it like as a percentage but that just because the music world's blown up so much there is so much more incredibly well-written music just on soundcloud with 500 people listening to it right yes and that i'm i'm all for like hey if you re if you like pump your heart and soul into something and that's great i it just felt like some of the stuff going on like on the on the hot on pop rocks or whatever absolutely no it was like a serious number one it like hits hits one or whatever it was just so lazy like not it's undeservedly a hit because it just sucks sorry but like just music sucks i like so it's great the things that are on the radio because people paid for it to be there absolutely but there's also like a lot of music that is surprisingly popular artists that you never would have guessed like juice world blew up in his bedroom just listening to other rappers he's one of the greatest resellers to ever live and he became huge there's producers like onatrix.never who are very weird artsy electronic producers that people like the weekend fall in love with and this weird dude doing vimeo like two hour long projects from my childhood is now the producer for the weekend the biggest pop artist of all time and that that gap bridging is so cool and it i think that is unique to music and i try to bring that same spirit into engineering like making a place where like you can talk with ryan can talk with fred like trying like we're all here trying to do the same thing like creatively push stuff forward how can we bridge those gaps and make a space where we can all create cool [ __ ] i think music has always been good about this but right now is more so than ever and i'm trying to bring that energy back to the tech world yes yeah yeah yeah i mean i we talked early on about like i saw this for you know whatever two-hour video and i i only needed you know i a couple minutes out of it i i mean other part of that was i also thought that like i've seen just there was just too many tech videos out there where it was like literally just a screencast and the guy goes okay here we go like hey yo uh okay can you structure this thing can you like what are you doing why are you doing it you know have some like put some effort into the production you know like i do all the transitions and all that kind of stuff trying to make it engaging to fun to watch i mean i what we do is incredible hey by the way does bang jack is that a good thing yeah that's uh that's a the command syntax on twitch so that's how people can get a chat message to know where to go follow you on things so i have it set up oh you say that it just links them your youtube and your twitter thank you of course at least i can do it okay but anyway so yeah just trying like that's why i i mean we're joking on the office slack about like um like how many you know videos have you bought and not watched from like you know whatever and i've got a bunch of like i think like moment there's a company that does um some really good stuff on av things like photography uh videography audio work stuff like that for like content creators and man i really need to like spend some time just like because they talk about how to you know uh choreograph out the video how to get you know b shots and edit in b-roll and things like that and it's just fascinating i love it it's a whole different area we deserve more man it's cool call me out man i i know hey no no no it's hilarious like literally all of my videos are just ripped vods from my twitch channel like we specifically like the effort we put in is more the topics in the marketing much less the the quality of the video minus by editors who work their asses off to make really cool things out of these streams but like these are i am not thinking enough about this stuff it took me a year of streaming to finally lower my camera to be eye level it was too high for the longest time and i just finally bought the extension for my wall mount to fix it because i don't want to screw more holes in my wall it's just i i'm being about as lazy as i can be and these are the moments where i reflect i'm like wow i am incredibly lucky i made it this far not caring about it your hair game is lit dude it's okay it's so bad right now i am like two months old it's it's such a mess at the moment like oh no yeah i am i am like two months over to a haircut cause my stylists moved to l.a i'm dying they were the best and i missed them and i need to find these stylists literally a lady that's like down like three blocks down the road so jealous like i go to her house she's got like a like a place in her house so jealous not fair i yeah i miss having clear quick access to hair stuff i yeah yeah i care way too much but yeah i just stopped going because like pandemic and then neutropenia and blah blah blah blah and like finally every once in a while it gets like bushy long and then like where's she long i mine just gets like break lips there you go these are going to be fantastic clips yeah uh i i know that uh they're one of the coolest things about being on twitch igor is one of the examples of a community member he has gotten so absurdly good at clipping things perfectly like like stitching like left and right like on the awful twitch clip editor to time the clip so like it's like an awkward pause at the end and then it loops like just right he makes the best like oh yeah yeah it's such a good like it's an art it really is an art absolutely i wish it was him to do actual editing but love you regardless igor he is such a good resource for me to then go back after and find the best clips to go used for other things as reference and like these are the things that i love so much about the community is they make it hard for my content to be bad i feel like the community i have around me now especially since i live stream most stuff it has comically raised the floor for the quality of my content like it can't be worse than here yeah i like your process like i actually i i hung in there for your um you had a live stream talking about like video ideas and one of them was um the one that you're gonna be doing i can't like me recall what it was was it the full stack one yes yeah yeah is full stack real which is a fascinating still financial literacy should come first because dang that wasn't recorded yet that's the difference this video is already no it's uploaded on my channel it's already in the can okay fine we have igor went so crazy uh or uh ides went so crazy last week there are six videos ready to go on my channel right now it's insane okay i have zero just don't worry i i used to have some but man um anyway so uh yes your process i like that like i think what i'm missing is i'm missing like the technical editor like somebody who i can run like okay i'm gonna like because i remember like i did a video a couple days you know couple weeks ago about like comparing two things and i compared them in dev mode probably not the best thing it was it helped the flow of the video because i didn't have to build stuff and blah blah blah i fixed it in the next video i did builds having a technical editor to come out and say jack come on don't don't do that you're you know or here's a better way to do this like i love the fact that you can work off the community and they they're like dude what do you you know here's an mpx command that does this in like three seconds what are you talking about you do that yeah kind of thing that's that'll be great i yeah i i made such a mistake early and i love you to death adam you my original editor at or for my youtube and twitch channels he was an old friend who isn't necessarily like into the engineering or code world at all but he is a wizard with all things obs and streaming and av tech he used to work at like esports production and stuff oh wow yeah so i pulled him in to help with my editing he wanted to get more into video editing and i trusted him to do it he did a great job but he doesn't know enough about engineering to know like what to cut what to include what to ask me to clarify stuff like that and i was so busy because this was also when i was at the like in the middle of y combinator so i was much more focused on that not even watching the edits he would make i uh they were good edits but like they weren't as great as they're cutting the real content yeah yeah not always you're thinking out loud and the next thing you know you're like um that was actually very valuable thinking out loud and i didn't even look at that i didn't even see when that happens i wouldn't watch the videos and i i lost touch with my content to an extent because it was like i do this thing and then it's done and i don't re-engage with it from there so i don't know what is it isn't working because i i hand it off and i don't think about it anymore no i then hired him to work at ping because it made way more sense for him to be helping us like get customers on board onto our obs-based tech and all that so he's been incredible working with us at ping but because of that he's too busy to do my videos i started my own videos again and that's when i got really good at youtube because i had to edit my own videos i reflected on the way i was doing streams because my streams were too hard to edit because i was all over the place when i started doing my editing i rethought how i did streams so i could make streams that were more editable i started blowing up on twitch and youtube from all that like oh okay that was a great thought now let me like rewind the beginning of that thought and then redo it and like have it be two sentences as opposed to you know forever like you know that kind of thing and then you've got like sweet clean edit points and things like that people don't really care if you like jump around the screen a little bit that's okay you know whatever but you know like if you if you're just like cutting it like halfway through the word you know that's that's not that's not great you should try and avoid that at least and then now there's tools like d script that make it so easy to edit based on what you said oh rather than like how the video itself like looks which has made it so much easier for me to do those quick edits and such it's incredible maybe it's just me but my like the script crashed on me like the first day out and i'm like depending on when i guess not for me then it was in a rougher state especially before the like m1 mac update but it's pretty good now it doesn't handle videos as long as like the ones i do like the three hour stuff it chokes up hard so what i'll usually you do is i'll fm peg the chunk i want throw that into dscript and then edit from there okay so you do it in chunks okay that makes sense yeah works good enough yeah i mean i think mine was only like 30 minutes you know kind of thing interesting i'm surprised it died on that it's usually better than i would expect i i've had i tell uh no i got the macro pro oh interesting yeah and oh well it's only the 13 inch but i figured out like how to get it dual monitor and blah blah blah blah and that's it's runs like a cut cap i miss my m1 air dearly i don't have it it never heats up like i can put it on my lap i mean imagine that a laptop that goes on your lap without burning your thighs yes mind-blowing or what was even crazier for me with the macbook air is a laptop with no fans that is power i don't even know if this thing has a fan i've never heard it go on it does but it won't need it very much what's crazy is the air and the pro are almost identical performance wise they just hit a throttle point differently because the m1 pro because the pro has the fan it can keep itself cool a bit longer but like when if i transcode the same video on both like the m2 pro and the m2 air the first five minutes of the transcoder the same speed until the air heats up interesting yeah okay it's incredible what apple's done with those chips i i bought the m1 half skeptical because i had the 16 inch pro like the maxed out pro and i downgraded to the base tier m1 air and it was a way faster machine way more pleasant to use and i just i stopped using my intel pro i am still so impressed with what apple did with those chips yeah yeah apple hardware is great apple software is i mean the the operating system is still real solid i like that but man i i got my wife like an iphone and she had an iphone 8 like the worst iphone in the in the family i get her an iphone 13. it took two days to like try and get all the data across and finally it was end up oh my god it was a mess like yo this is not good guys i used to restore over the wire but they still won't do usb 3 for lightning on the phone they only did it on the ipad they only did that one time they like your if you do the wire backup and restore you're doing that over usb 2 in 2022 which is just come on apple i oh this is like three times through firmware wouldn't update just dead you know whatever and then you know so i ended up upgrading the os no that didn't work i ended up upgrading the mac os and that was the magic bullet that did it and i'm like come on really yeah that was how did that know i why was no it no okay i could touch it i was almost like delivering an app to a client because i had to update my macbook in order to connect my ipad to xcode and the update didn't go great and it just took me a while to get my machine set back up and like i was so close to being late because i i had to use xcode just to spin up the app on my ipad and do the rest of my dev or in like vs code but just that step almost blocked me entirely and yeah i i could rant about this forever but i do want to finish the editor topics i think there's a lot of value here especially for for those who are considering doing the youtube by the way i i do like i am absolutely adoring this by the way but i do have like a heartish stop around 320. okay very one-on-one really thank you for the heads-up i'll wrap this up then we'll open up the questions there's a few on youtube i want to get to and obviously if anybody else has questions start dropping them now and we'll get to those asap but i as for the editor stuff once i started editing my own videos again and had a better feel for the content and most importantly i was streaming myself better because i was thinking through like the edit ahead of time the content got better the audience got bigger and now engineers who wanted to get into editing were hitting me up because they were inspired by what i was doing and now all of my editors are people from the community who are developers who watched my stuff editing like they're learning editing to an extent as they do this but i would rather an editor learning editing who understands the content than an editor who understands editing and is learning the content every time you are so good with the community it's just they make it easy these guys are the best i love them so much i mean yeah i'm i need to learn you are like my sensei yeah that's weird because they like you more than me i think the difference for me is i i am a community member as much as i am like the community lead where i am i've just been a part of so many different communities in my life like from the music scene from the tech scene from the content scene from like twitch and discord and all these things i i guarantee if i did a sentiment poll for scale of one to ten how much do you like theo versus jack in my discord you would get a higher score i i could guarantee that it doesn't matter but it doesn't matter for this like how you build and run your community absolutely agree you have a better starting point that is what i'm trying to argue you have the opportunity to take a ton of advantage of how loved you are by your community and i yeah i'm excited to see what you do with that i'm inspired to learn from you because like i i need more positivity like i i try to affuse positivity but at the same time i'm also there's an underlying like little heart of you know piece of negativity in there that i need to like tamp down because like i i admit that sometimes i am very frustrated when people come to me and it's clear that they have done no work before they start hitting me up for answers to stuff and it's like come on i mean really you know like put a little a little something into it you know don't like you know isn't it you're an engineer right i like do a little engineering before you come to me i think the thing that's helped me and you're doing it right now is calling that out in a public not like direct like like this question is bad way but also doing the opposite which is bringing up the questions and the pushback and those things that are really good something i did last night there's a comment on my unit testing youtube video that i've been thinking about for way too long that like the the the top line of it was i agree with almost all of your observations but not the conclusion and then like a very thorough like three paragraph here's how i presented think of unit tests and i've been thinking about that comment since i read it it got one like and it was me i love the hell out of it i replied like i've been thinking about this forever i just screenshotted that and posted it as like a youtube community post and immediately 500 likes in like a few hours so yeah i think that yeah yeah yeah i love a thoughtful takedown like you know you know i get it but you didn't do like you didn't take that i'm like yeah yeah thoughts and takedowns thoughtful questions thoughtful responses like highlighting those can be so valuable i think that there is so much you can like teach the community by showing them examples of well-asked questions something silly i did at this company is i when people ask you questions in the tech channel i'll pin it as a reference so when you join the company you go to my like tech channel and the private like company discord you click pin and now you see a bunch of examples of really good pr's of really good questions of like like highlights of how we communicate yeah i i there's a the rules channel on my discord right and it has this whole thing and the whole thing is and it's not really rules it's basically how to write a question that's going to get answered i want to help you people want to help each other it's a natural instinct you know cat's stuck in a tree want to help a cat right you know whatever everybody wants to help but if you come at it like you know a vague nebulous question that has a bazillion answers and 13 000 unknowns nobody's going to engage with that because like just what do we do with this where do we even start right it's crazy but you know but but do your research right figure out and this and that and then you know come up with a really concise question that's answerable and somebody's gonna do it and that's the thing like and and yeah my daughter's all about opportunity thinking again don't deprive yourself of the opportunity to learn through debugging and all the rest of it what the problem is like you know and then and then even if you don't come with the answer you at least have come up with what will be the the foundation of a really good question yep i i i think a really good questions we should do some some youtube questions right yeah look at that absolutely i it's like i'm a podcaster on the side pro level i love it i need you to transfer to transition me to sponsors too once i have more of those i yeah yeah this video is brought to you by you're a much better radio voice than me i'm jealous i it would be really fun for me to have you like film like or like record an audio intro for me or something that's actually a really funny idea we'll get back to that in the future i wanted to quickly double down on everything you just said about like question asking an opportunity like one of the best values you can get from a community like this is getting better at asking questions especially if you're a family or dev if you can get good at asking questions to us when we have less time to deal with you and you build that skill here then when you go to the first job everybody's going to be blown away like one of the engineers at ping they were a ramen chef before they joined ping they did a bunch of cool open source stuff and were like contributing to zig and building like game engines and zig themselves they got used to questions being asked in a github issue so you had to be very thorough very thoughtful and ask a clear and concise question they built that skill there and when they brought that to the work i've had to like teach them to ask worse questions because by the time the question is yeah it's too thoughtful it's like you just asked me a question that takes me 30 seconds to answer and you clearly spent two days thinking about this question how can i help you ask less good questions at this point but like that's that is a very unique tier to get to and i think that's a good extreme to be at because it's easy to to work back from but striving to be at that point where anyone who sees that question who vaguely knows the answer is going to be excited to answer it because you did the hard work for us in your framing of the question yeah like if you're on board new company and clearly the onboarding docks are out of date surprise surprise right and they don't work ask the questions right away yo like you know oh hey this is like this command does not work you know whatever what should i do instead because you know chances are right they've already done you're like hey as fodder for asking this stupid question i will update the update the onboarding readme you know whatever with whatever you tell me right you know and that's okay but as you're like in the depths of the job later on yeah definitely like but i mean you'll see this culturally um you know what what's a good question to ask what's the question that's like you know you probably should have baked on that one for a little bit longer absolutely agree i'm telling chat to start getting their questions ready there was one that jacob hilton asked on youtube earlier we actually contributed 20 bucks to ask this so definitely want to make sure we can ask or like or bring this one up he was curious about your takes on unit testing in particular in contrast to my video on it he also said he was a huge fan of us and uh aaron loves the amazing resources we provide so shout out jacob thank you so much uh love to your thoughts on unit tests i haven't watched your video that's fine okay that means you can give a more organic take without knowing what you're applying to i love that uh my unit testing take um there is a fantastic extension for uh vs code it's by the company makes quaka it's called wallaby and when i'm doing wallaby and when i'm doing unit testing then i'm using wallaby and i generally tend to unit test more library slash business logic code stuff that's very nuancy you know like a lot of little edge cases and things um i generally tend to shy away from unit testing ui code i i like you ede smoke tests just because i find that i like the ui to be a bit more fluid and if you've got ui you've got unit tests particularly ones that do snapshot testing which is that you you really stiffen up the experience and i don't want a situation where if i make a text change like hey can you change you know hello to goodbye and you get into a rapport with your product manager where they feel comfortable literally pr in text changes which is fine by me go for it i don't want them breaking a unit test because they changed a word that's crazy right so if it's on the ui side don't use snapshots be very very prescriptive about what you're actually testing is i'm i'm adding this class i'm removing this class i'm blah blah blah blah but then on the library side i'm a big 100 unit test fan and use wallaby because i mean i've gotten to the point with walby where like i haven't even saved the files and i know i the the unit tests are 100 coverage 100 pass and then i'm like oh wait save all like oh yeah okay and now yarn test oh well yeah there it is 100 sweet done that sounds like what trpc did to my full stack but for tests i do really like that way of using tests i i think that you're more aligned with me than chat's going to expect i i'm trying to fill the role of the anti-unit test person because i feel like we've swayed too far pro we have fully moved off of test driven development which is a relief like that was a mistake for most use cases but generally i try to think of tests as solutions to problems once you've had the problem like if we have an issue that occurred in our code yes because we didn't have like uh because the type system is it strong just don't make the same mistake again right but codified as code yes i wouldn't say tdd is entirely dead i mean i certainly the positive sentiment is i would say oh yes yeah for sure yes there are very few people who who say tdd is good now which is nice that that's the change of notice that was a relief to see yeah yeah yeah my video was specifically like the video titled why i don't unit test because most of the stuff i do is front end and i much more care about the type safe contracts than i do about like the behavior like or checks end-to-end testing is great we don't need it just yet but unit testing like the units on front end aren't valid aren't valuable in a way that is particularly useful to test contract driven programming absolutely exactly i love being a good contract oh my god yeah it sounds really boring but you know that's the other interesting thing about like like class stuff versus functional stuff it's like in a weird way like class sort of defines like who you are is what you can do is your contract and i find that inherently a little bit weird yes like saying i have red hair therefore i can code you know i thought um okay ask me if i can code and then i'll tell you if i can code or not right that's that's the contract and then anything red haired or or not can go you know like that yeah that's anyway i think that little vibration there the contract systems that existed in like web dev pre-type scripts and pre like in react pre-hooks were really rough because the since the contracts weren't great so we didn't have type so it wasn't deeply thought out in our tools and we were still using class components with that weird conflation of contract behavior and markup that those two aspects resulted in the unit testing tools we see today what i don't think we've seen is a reflection on what the value of testing is post type script and post like moving away from class in our javascript i think this wallaby stuff which i honestly haven't looked into before seems like it fills that hole very well so i'm excited to look more into this and i'm pumped that you brought that up it's fun it's just fun like i don't know is this kind of weirdly you know like the same i will go back to content for a second like when you go to your your youtube studio channel page and your your video hits like the one out of ten you get this weird like not weird but like a little like fireworks explosion and it's like a little endorphin rush you're like you know and that's like the same sort of thing with with wallaby it's like oh wow it's all green i do um somebody asked like you know is contract driven programming like tdd and i'm not to me at all like to me it's like contracting it's like basically figuring out like the segments of your code right and then figuring out like okay between this these two things have to talk together what is how are they gonna talk like are they gonna what are they gonna send back and forth and what's the limits of that to compare you want it to be as small as possible compared to like construction it's the difference between like a plan for how to build a house versus a plan for where the holes go in the planks or even like pre-drilled planks with the holes already in them to put the nails in like it's what level is the planning happening i think that contracts are at a much higher level and if they're not then the contract ideally comes through inference like when i return this thing on the back end the contract system between the bracket and the front end lets me know on the front end if that is correct or not i think contracts should either be very high level or very inf or inferred based on behaviors in code and the unit tests represent a middle between those two that i don't think matters at least in the front-end world it doesn't really exist that often yeah somebody really early on was talking about hey you got to get jack talk about microphone ends um that is actually like that's where like the rubber kind of really hits the road on the ui side when it comes to contracts it's like you really want to create those microphone end like contracts like hey you are a dashboard lit here is what i'm going to give you and this is what you're going to give you know ask me like maybe who's your user or whatever you know whatever the contract is in both directions and then you you specify that with typescript and then as long as your dashboard lit handles that contract you are good and then you can be in the program and then when that contract changes we will go and see what breaks absolutely i love that i want to be respectful of time i'm trying to find one last really good question before we wrap up uh there was a lot of good ones but i think that one of the most valuable a lot of questions about trpc versus graphql or like protocol stuff you wanna do that uh i was thinking something that might be more like you already have a really good video on that like i'm i'll link the video and chat so people could see it and obviously they already know i want to do more trpc actually i recommended trpc this morning in one of our apps so that's super cool the one i want to jump on is ollie's question it's two but i think that we can like combine them pretty well it's as a self-taught developer what resources did you use to learn new things and then the same perfectly for content creation like how did you or what resources and like channels did you look to to or better yourself in that place as well uh okay interesting um so the only things that i had access to when i started coding which is um way long ago i've been coding for 40 years so no internet no nada uh were books which were not plentiful um code i would either were code examples around um or there were uh other people and so like in the rare occasion i had a buddy well upperclassman who was going to mit learned a lot from that guy about early coding sort of stuff but it's really you know we talked about a team you learn just so much from being on a good team and i think that's exactly what you and i are trying to do is like kind of take that and make it accessible to everyone right hey this is how whatever i mean i think we need to do more i got maybe more conversations like this wouldn't be good similar very very similar to content creation i would say that you know how how do i learn about content creation what you watch other people like there's this english guy who does coffee videos and he is great i love his style i love the way that he constructs the video i love his i yeah i love his elocution i just love everything about it you know and it's so good and i mean i actually i'm not that much of a coffee yet i like coffee but it's not like but i just love that style so that's one way yeah james hoffman that's what it is um and the other thing is to yeah to actually like um you know so that also you know watching educational content on tv like nova things like that again see how they do it and i don't know to me it's always too dumbed down like weirdly like you know um but then also you know i watch educational videos too i watch like uh moment stuff about you know different like you know uh you can't imagine how many revs i've gone through with this setup i mean right now there's all kinds of lighting around there's a headlight right there there's two green screen lights there's a soft box right here and just like in learning about the aperture and the exposure and you know the the frames per second and you know the audio and like audio i mean you know yeah audio is just whoa i mean you can go crazy like you know there's all kinds like there's condenser mics and there's shotgun mice you're using probably smb sm7 you know yeah i only recently moved to this off my hundred dollar like wave three i mostly moved to this because i wanted the interface i spent way too much money on my rode pro caster so i could multi connect my one mic to multiple computers and my phone at the same time so i can use this for twitter spaces for calls on my mac and for streaming all at the same time which is unreal yeah i i like to joke sometimes that like some guys buy like a ferrari or whatever camaro you know in their midlife crisis i bought a youtube channel like i definitely spent a good amount of money i love that way of putting it i tried to avoid it but i only could for so long i definitely found myself spending the money too it's not necessary to get started i've seen a lot of channels kill it but i or without spending the money but yeah i just see somebody just contributed when you're at macromedia do you enjoy all the flash raa apps i don't know the flash ra apps we used to call internally there's some great stories from macromedia we used to call it um flash internally skip intro so it's just like like they very little respect for that but anyway yeah i was around for like as you know action script 3 was a great language um and i was on the flex builder team uh doing flex yay i do miss the og days of flash in terms of what it enabled people to do not necessarily how it worked or what it was capable of but what people did with it like that was specifically in like the gaming world that was a whole generation that we haven't like caught up with since yeah there's one last question i want to ask if you're down to go like a tiny bit over yeah let me just answer that is the room real the room actually is real the background is not real the reason that is that if you're in a room like this like that you can see how much white light there is right the sun will change over the course of it and also your back will be on fire if you're if the sun is behind you you'll be sweating buckets so this is why i have the green screen is consistent lighting that's all so and also the effect that i can do effects and stuff great absolutely okay sorry what's with your life the sun was flaring on me i totally feel that the last question was somebody mentioned that they perform better in pair programming than solo development when they're building a feature is that bad and how can they improve on that there's nothing bad about that i think it's great yep totally agree i i don't it's i i'm the problem is i got into this very very early and that it's not as comfortable for me to do that but i have enjoyed pear programming i just find it like at the end of it like i'm coming out of this two hour block two and a half hour block i'm talking to you i'm i'm pumped yeah i'm ready for my one-on-one i'm i'm gonna jump on some code later i'm i'm i'm pumped coming out of two hours of hair programming i just wanna go to bed i just wanna nap i just wanna go like i could i need a whole day to recover from that i don't know what it is but if that hey if it works for you how can it be wrong i absolutely feel that in particular like i pair programming for long windows exhausts me more than almost anything else there are tips and like tricks you can do with someone who prefers pair programming i know like the rubber duck uh debugging is a really good yeah where you just have like yeah yeah like imagine yeah also going for like whatever exercise you do like if you're stuck like if you if you're a runner if you're a walker or whatever get out there and do that you will find that that just getting your mind off of it will open your mind up and the next thing you know like oh duh yeah it was this all along or like i i had like a layout issue you know and i went to bed on it and i'm like oh okay yeah because i you know i was under stress i was like okay i got to get this thing out you know like next thing you know you kind of like looting up and the inspiration comes like ah i got that i often joke my best code is written in the shower and on my skateboard not sitting in front of my computer like i heck yeah you can absolutely imagine like like and this is one of the coolest things about like getting more senior with a specific technology or like the way you build this you can think through a whole problem and solve it in your head and have a pretty good idea of what isn't isn't going to work before you even start typing the code it's kind of similar to how i think of my videos now is i play through the whole video in my head i play through the thumbnail and the title and then i go record it once you get to that level of familiarity with code you can do the same i think pairing helps you get that they can hit a mean ollie at the same time absolutely well this was absolutely fantastic jack i don't want to go too far over i we already have now and i appreciate this so much i love it and i love your crew that's it's fantastic i've i've been watching the comments something so great thank you guys thank you thank you anything you want to shout out in particular or anything we can point people at or just the youtube in the twitter for now uh let's see leukemia society and also uh there were um 4 000 eagles just uh gotten from a a lab out in virginia and they're being distributed across the u.s so if you're in the search for a dog there are awesome adoptable dogs that have never had their pads touch ground and you can get yourself in a cute adorable adoptable beagle so there you go that i had no idea and as a dog oh yeah lover that is real awesome shout out i appreciate that time what was the name of the one on the oregon well um i mean i just look at the oregon humane society and they've got like a bunch of them i think 160 are in oregon i don't know how many are in california now um but one they they named one everything bagel i thought that was a great name she's so cute adorable just found an article about that glassy did as well fantastic thank you guys all and thank you again so much for this appreciate you immensely this was super cool to get this on the youtube thank you again yeah all right i will see you next time cut this quick i will be right back guys i just want to refill my water quick and then we'll get started on some live code really excited to finally be coding live again i know it's been a bit yeah brb what is good nerds what an interview i goddamn that was so cool i am not normally this speechless post interview but i was yeah i had high hopes but that was genuinely one of the coolest i i know i've said this a lot recently but genuinely one of the coolest interviews we've done here for sure if not the coolest i was was i surprised by anything is the question i'm currently looking at and thinking on i i was surprised by how similar our way of thinking of things was overall like even just when i first started chatting with him like i just i i assumed because of how many times i've been told that throughout my whole career that the way i think and the way i do things is just an excited like junior young dev that like as soon as you talk to a real principal engineer has been working for a while that they'll disagree with me he's been coding longer than i've been alive and we have so much of the same takes and that's yeah that was a huge like i think affirmation's the right word like at least confirmation of the way i do things so yeah i i personally was incredibly validated by working with and talking to jack and i yeah it's really so he's at the end of the future absolutely he is feels like he's the the chilled out more thoughtful future theo in so many cool ways and there's other people in chat saying i have an old text soul and i'm a confirmed tech boomer is that just because i like sequel guys yeah i i loved that it's the person saying i underrate myself in chat uh i'm an arrogant prick don't worry i i'm very aware of what i'm capable of somebody else i use a water filter for what my hair my water i drink because yes for both but yeah oh sam nah it's not because i like sequels because i like my sequel yeah aidan i i if i am a tech if i'm even close to a tech boomer aiden you're absolutely tech boomer i need to get jack to listen to blade on stream oh god oh god i i don't know if i have that in me i'm sorry i i am i am like so close to spinning up the second channel and just doing game streams and music on there specifically music so i want to rant about music live and i don't want to do that here because of like the channels both will be copyright striked to hell and back but absolutely the uh somebody uh young man yells at clouds like an old man that is fantastic zero uh ayden theo links me cool services and i'm like no way too relatable uh somebody asked am i a drainer yeah i i i am a drainer at a level that is not pretty standard for drainers i came all the way back like early early like for like mew posts about ginseng strip young lean days and dug super deep to figure out like how they're making the videos who is producing these things where did this all come from and fell in love with echo 2k before he had actually released much in terms of music because i was so fascinated by how he was like managing the image of young lean and crew at the time it was still sad boys and gravity boys and then gravity boys kind of split kind of merged into what eventually became drain gang and yeah i'm listening to blade and echo and that crew back in the gravity boys sad boys uh era oh gee so if you're asking what drainer and drain gang is that's the term for people who are into the drain gang which is the term for the people who used to be like young lean's friends that eventually broke off made their own whole sound and crew and are now like their own like established artists there there's so much music by them that's incredible even if you're not like into that stuff i'll i'll die on the hill that in particular echo 2k is a very very talented artist and songwriter i yeah uh people been asking me about my music taste enough i need to do something about this in the future that's not what we're here for though because we have a very exciting thing to do next sorry that i'm not doing my usual pull the audience for what we're building but we have a really cool deal that i snagged for the channel and it means we get to talk about some things that i have not had a chance to talk about and we get to build some things i've not had a chance to build with just yet so i'm going to edit my stream title on both platforms quick uh learning up stash or learning redis with cool a new title is up on twitch going to go do that on youtube super fast i'm not going to hit thumbnail because i'm lazy i have to do that after the fact anyways i really hope that you're going to be around for a little bit aidan because i'm going to need a lot of help uh do i have to put hashtag ad in my title on twitch if they're paying me hashtag add i'll do that for now uh if one of the mods could create a fossabot command that links to i'll drop the uh link in chat quick ref equals theo uh if somebody could make an exclamation point redis or explanation point up stash that links to that for me would really appreciate it yes i'm selling out i wanted to get a little more money to help pay for the editors i think that this is a really cool opportunity i've wanted to use upstash forever and they were to be frank okay the second cool company to reach out and offer to pay me to do content about them the first one i refused because it was my homies over at axiom and i was going to talk about them anyways i'm reconsidering that now the other option of aiden could do whatever because he he made it i love that thank you aiden why are why is aidan not a mod why is ayden a mod for like everyone else and not me anyways so up stash is a company that has made redis way more accessible they're kind of like the versailles of redis and when they reached out i was super hyped to finally get to play with redis on like modern web technologies i'll be honest i haven't touched redis since a while back in my elixir days and even then i didn't use it particularly heavily so what we're about to do is some live code where i screw up a bunch and it should hopefully be fun i have a couple ideas for what we're going to do with it but at first i just want to like dig in read some docs take a look at some of their blog posts that i actually found to be super cool and yeah let's dive in let me just reply uh somebody else on youtube i'll just say it here old bloomer new flume new flume sucks at albums fantastic singles so yeah flume as a singles artist is one of my favorites this is not working anymore i also since i was the one green screening jack i still have his background there let me go and fix that super quick uh guest visible visible there we go so we're sponsored by upstash and i i am so hyped because they make it incredibly easy for us to have fast global low latency data the how do i put this there's so much that this enables for us the easiest thing i can demo quick sure you all remember roundest watch how long it takes for roundest to actually show things on the screen other than the loading spinner that was about two and a half maybe three seconds if i refresh it now it's gonna be faster because the lamb does look warm but that first slow time there was because uh or the lambda had to start up the cold start time for a lambda because it's a full server that has to spin up fetch all of the javascript or whatever code you're running on it initialize the environment for that and then do things with it it is not particularly performant one of the things that we're working on like as a web dev community to improve that spin up time is moving to the edge which is a new runtime that is originally like cloudflare is popularized but the idea of edge runtimes is growing like every day the goal of them is to have an environment that's closer to like a web environment that spins up really fast and is distributed around the world so it's not servers in specific warehouses that amazon owns rather it's mini compute nodes as close to users as possible with hundreds of thousands around the world that are ready to go and run your code way faster these environments are much more limited than a lambda or a server environment like you can't it's not node you can't just use node code in your in your edge functions you can't do things like call your native rust bindings to connect to your database but what you can do is fetch requests also somebody mentioned you're limited to one megabyte of data for the code that you're actually sending to the edge environments which is significantly significantly lower than what you can do on a lambda which is basically whatever there's probably a hard limit on lambda i've not come close to hitting it in terms of how much like data and code you can ship up for it to run because of these limitations around how the edge environment lets you run code it also is able to persist instances and throw your code on an existing like instance and then remove it way faster than a lambda a lot of why it's faster is because of these limitations i want to move more and more of my stuff to edge if i can however a lot of the tools we use right now are not edge ready or even close to it one of those tools is prisma prisma's working on the prisma data proxy which is a project i'm very excited about the goal of the prisma data proxy is to make it easier for your prisma code to like the specifically the native binding imprisonment which is this big heavy rust chunk at the bottom of it if you have to ship that to your lambda function every time it spins up and then it has to spin up make a connection to your database and then it can start processing requests the amount of time to do that sucks a lambda cold start on vercell for next js is already like 200 to 300 milliseconds having to make a database connection and instantiate prism and all of that can quickly bump that up to two or more seconds which is what we just saw on a roundist right there so what i want to show with redis is two things in particular the first is how we can move to the edge because the uh they're because edge functions can make http connections and lambda in redis supports http as a connection method specifically upstash i know does this well and on top of that i want to show how much faster we can make that connection get the data and show it to the user compared to what i was doing previously on lambda so we're going to go into all that but i want to read through upstash a little more because there are some really cool use cases on here in particular in their blog they did an awesome blog post recently about rate limiting at the edge with cloudflare workers they have a open source i was really surprised when they said rate limiting sdk i thought this is going to link to docs nope this links to an awesome open source repo that only has 18 stars for some reason i can't easily show the star account there it is but it is a super cool package to quickly set up a rate limiter you can so for those that don't know a rate limiter is a thing that runs before your server that based on any of many conditions be it who is making the call how often they have called what ip address they're coming from allows you to decide whether or not their request goes through and this allows you to easily on an edge worker add a rate limiter that prevents users from spamming i think this is actually what i want to build first specifically because of all the people who have been abusing roundest recently if y'all haven't seen on uh if i go back to uh that's the technical interview uh if i go to the roundest results people have spammed 98.65 zapdos 78.86 percent dialga these are people spamming the endpoints and absolutely screwing up the uh usage and utilization on myversel and on my planet scale i want that to stop so i think the first thing we're going to do is make that stop using the new rate limit sdk how do we feel about that as our first thing to do with redis and then we can go possibly build a whole app with it from scratch after i'm taking a look at this example repo here i think most of the code is going to be in the middleware redis rate limit fixed middleware look at that this looks fantastic want to see how easily we can get this going let's do it before i get started i want to quickly thank all of the people who have contributed since the stream started i am sorry i have not been shouting people out anywhere near enough uh dylan kappa just resubbed thank you so much uh gui rods uh le turks king blurbs kudos or cuds uh alcandez i've seen you around a bit thank you for continuing to resub man uh koskinen matt katsuma zyfrik weske gifted a sub earlier i know there was more somebody gifted five subs i'm almost positive with cj so shout out cg always good to see you here man i really appreciate the contributions and gifts as always if you're not already subscribed make sure you fix that if you don't want to be in ads and if you are subscribed uh make sure you join the discord save access to the sub-only channel i also just noticed that aiden doesn't have a sub for some reason somebody should definitely fix that one quick uh not eden anyone else should fix it but someone should get aid in a sub quick shote thank you for the sub super appreciate that and also all of you who contributed on youtube earlier y'all are the best as well i love you guys on youtube sorry i don't show your chat as much but i am keeping an eye on it much more so now that i fixed my setup it's like recycling your salary that's a fair point but you said you subscribed with prime on my channel i love that that is a high high honor aiden i'll take it so the resub from deep fried the tier three resub from deep fried appreciate that a ton man there was one other tier three i want to make sure the tier threes get their special love uh who is the tier three reset twitch isn't letting me load this anymore i love all of my t3 subs i see a bunch of you guys here appreciate y'all immensely and another person who just joined on youtube as well oh circuit thank you man i always see you around how many subs currently the the numbers went down uh a lot of the gifts expired which happens we're at uh 1785 subscriptions on twitch now which is still an absurd number that i am very proud of i also noticed that pre-rolls are about to start again so i am going to run an ad and then we're going to get started because i want to avoid pre-rolls as much as possible as we get things going here so i'll just run it now if it lets me it might not let me oh there we go god that was that was an experience first word is line wrapping that's hilarious yeah he he does definitely push the the limits of how many badges you can have also love the people who don't have ads thank you all for subscribing oh tevin you were subbed oh previously subbed for one month i think you have to re sub uh can't give the specific user a tier three i'm i thought you could if they already have a sub you might not be able to i'm pretty sure you can gift subs at a specific tier yeah it's in the modal when you do it it's it's not the best ui for it but you absolutely can anyways that ad is almost done which means i can start talking again and people actually see it and thank you all again for the subs really appreciate it oh another five gifts from wes thank you man and guy god y'all are crazy appreciate it eventually throw hands with the ad block gang yeah uh i get it ads are annoying but i highly like if you can contribute to the creators like ads are such a huge part of how we make our money on youtube you can do youtube premium which pays the creators that you watch significantly better so i highly recommend doing youtube premium in order to have ad free youtube if you can and on twitch there's still twitch turbo it's a little hard to find but it's the same deal where just it pays way better so if you're able to you whitelist youtubers you like that's a good strategy as well yeah oh if you're a youtube premium subscriber you can download videos and when you download the video it counts as a full play which helps both an algorithm placement and revenue a ton so definitely good thing to do if you can i want to make sure i shout out tlint and amos for your resubscriptions as well you're both resubbing with prime which is huge that you came back here and click the prime button twice means a ton is it time to get started uh does yt or does youtube download count as a full play it does not sadly it's time to learn redis this is a blog post on how to get started they told me i could stream so we're going to test the limits of that i am not going to hide my screen when i set this up and if they reveal the info for the new database i created with like just showing it on the screen i'll be upset i'll delete it and redo it it's a mistake a lot of people make but this is learning for everybody so let's see we'll uh roundest rate limiter do i make it global do they even say hear what they recommend or if they have a recommendation do not choose global instead create multiple databases in different regions where you expect traffic interesting that sounds more complex than i was expecting that's fine we'll go with it for now the database is already in west too so hitting an edge in west 2 is not going to be the worst thing it's definitely going to show it cool let's see i i am expecting it now uh do we want to ssl it i don't think let's not sell it for now creating let's see it doesn't show it look at that guys look at that great job up stash thank you now i'm going to hide my screen for a sec no i'm going to go set up the environment first and then when i'm doing environment variables we'll deal with the next part cool so happy that upstash is already catching these w's this early cd code tmux using redis client with tls kind of sucks uh the url does not have the password i do not think no why is that open nope the password is separate i have to copy it separately so let me just ask what is up stash upstash is the easiest way to distribute to set up redis for your serverless environments and distribute around the world it's kind of like for sale but instead of for your code and your deployment it's for your redis and your scaling of it cool oh yeah it shows it there it hides it here and shows it here so close so close and we all missed it too guys don't don't put the password here it has been reset hiding the environment poor gore was in the middle of clipping the wind when we took the l poor thing i feel bad i'm going to i hate that i won't be able to look at this because the samples are good but it shows the code in there so i am gonna go i'm just gonna not have that open for the time being and do my best to avoid it until we actually need to be there so i think i have a separate stream uh is it roundest i don't think i have this downloaded right now uh make deer stream cd stream uh and no it's not the username it's the password i i triple checked when i went through that again it just it shows you the password so close but so far uh cool i wanted to go grab roundest come on quick hop into here get clone this url damn with the gift subs guys we got deep fried with the five gift subs and chalks with the 10 gift subs nuts guys thank you all so much we just broke 1800 subs again insanity somebody just said they don't know what redis is for and they're afraid to ask and that's actually a really important rant i should probably go on and clip and put at the beginning of the video up stash is a redis is effectively a key value store in memory that is fast as hell the goal of redis is to make it easy to to take like a computer with some memory like ram and then share what's in that ram with multiple computers as quickly as possible redis is mini database really really fast an in-memory key value store is the the short of it generally redis is used for caching but it can be used as a database it can be used as an auth check it can be used as a rate limiter it can be used for all sorts of things one of the cool use cases that i actually might touch on in a bit is you can use it for next off as your auth provider or your auth adapter that actually stores the auth state so in here upstash redis is an option and this will make your authorization for your like applications insanely faster than it is if you're using prisma as the backing for your next auth setup super super cool stuff yeah there's a lot of like within the t3 stack there are genuinely a ton of cool places to stuff in up stash into stuff in redis i didn't take the sponsor because i needed the money i took the sponsor because i needed the money and i think redis or upstash and redis fit well into the stack that was a really convenient like point that i recognized as soon as they hit up or hit me up and it's something i funny enough i had made an account on upstash a day before they hit me up it was just a perfect opportunity so i know that they're paying me but i do genuinely think that this fits our stack really well so that's what redis is it is a super fast key value memory or store based in memory i see aiden commenting on how memcache is still the better thing for caching and redis is like much more for like constantly changing data which is fair i'm excited still to play with this first i need to get around just working which is going to suck pretty hard the more i think about it get status uh open this up npm install quick how hard is it to set up write us without upstash i haven't did long enough to say i know that you can do it with railway but it doesn't handle any of the global stuff it doesn't handle any of like the rollover stuff there's a lot of other ways to deploy your redis but upstash is one of like the biggest community like pushers they have awesome stuff it's almost like upstash tourettis kind of feels like versailles to next in a lot of ways where they're building all of the ecosystem pieces for us as serverless developers to not worry about the relationship between uh the different redis instances and scale it forever i i am genuine if we were using redis at ping i would be using upstash so in here we have the old project i'm so scared to see version numbers here uh what version of next okay 1204 that's a lot less bad than i was expecting uh yeah none of these are old enough that i'm gonna like be very upset with someone else would they have to pay for redis and upstash no redis is the open source protocol that is used on upstash it's kind of similar to versus to like mysql and planetscale where that is what they are using and you're just paying them to use it directly their pricing is actually really good too it's uh uh two cents per hundred thousand commands so you can do a hundred thousand requests to your up stash uh write us instance for two cents that is absurd so yeah i personally would rather pay this very small fee oh sorry 20 cents yeah not two cents 20 cents per hundred thousand commands which is they should have a zero there i'm bad at reading yeah 20 cents per 100 000 commands is nuts and i will happily pay that to never think about these things again somebody said it's kind of like [ __ ] to atlas and yeah that's also a very very good comparison somebody else else was comparing redis to sqlite sqlite is not memory based by default sqlite writes to a hard disk and keeps things there you can if you want move that to memory i've seen people do it but the performance isn't going to be as good as redis oh i just shared the password again this sucks they really need to not have this be visible cool the the form for the password reset stays populated so i was able to reset that much more easily this time cool let's give this one more go i need to set up the environment variables for this i'm just going to npm run down and see what happens it's unhappy with being old going to fail because i don't have environment variables cool so i think i can inverse cell or let's see mpx for cell link do i recommend doing this in production probably not uh do i have roundest in here let me check i'm gonna hide for a second when i check all my four cell projects figure out where actually left this project god i have to hit the show more button in vercell now uh i think i put it in either of a ping or yeah i put it in the freaking ping versailles account i forgot about that because i was hitting limits and my i moved my pro account over to bping uh i'll let you guys see how i actually do this part though uh screen yes ping labs link yep cool px for cell and v pull and now i should be able to npm run dev with the exact same environment that's in production locally without you guys seeing any of it and look at that it did exactly what it was supposed to so the first thing i want to build is a rate limiter for this i actually the first thing i want to do is upgrade the next version so we have the new middleware stuff because the old middleware patterns suck hard so let's do that first uh can i let's next 1225 is the most recent right probably patch that up in a bit too yeah 12.2.5 pm install kill that uh igor the environment leaks we're at two environment leaks so far because i leaked the password twice and i safely got that down once so flip your numbers update by changing package json is mad light it's it's right there when i hover it tells me what the newest version is it's great why do i do it any differently half joking you should probably use the tools but i don't use the tools number of environment variables that leak prediction on twitch oh that is a hilarious idea that is an actually hilarious idea i will think on that cool so now i have the setup locally we have the new setup let's start by going to not the tab that has that i want to just yoink this middleware just gonna copy paste see what we have to learn from there and here you want to go to pages middleware.ts is it pages middleware or is it just middleware next.js middleware ts interesting maybe put it up so high i'm putting it in source and it matches on api hello we want it to match on api trpc uh does the matcher let me do this is that valid i think i can just match all api calls here that's fine i need to install these packages cool now those installed i should be able to get this configured uh does it have environment variables for how it's connecting oh yeah these are up here uh redis dot from environment interesting how does it do that where is the source code i was just reading here it is uh maybe no would be cool if they showed how they do that part i also say like are there specific environment variables i can use that will auto fill so i have to do anything else like the redis dot from environment thing uh i should probably go read the like redis docs uh javascript not i just want to know what it expects those to be i'll just go to up stash slash redis no what's the name of the javascript package upstash redis there we go in here new redis url token of stash environments or load directly from envy does it say what it expects those keys to be to load directly from nv because it doesn't seem to anywhere up stash redis rest url and uh redis rest token will those yeah that'll work for how this handles things cool i'm going to hide all that momentarily wow the overlay i have for everything seems to have broken hilariously that's fun let me grab those keys and quickly put those in the environment quick sorry i can't share my screen while i do this and risk breaking everything equals let's grab that url from in here uh the examples in here just show you what to pass when you create the client wait why are the examples with i o redis and node redis and not oh there's the upstash redis cool yoink yoink yoink and what was the other key you guys shared that one equals double quote cool if i did all of that right i should be able to close that show my screen again and theoretically this should just work now i'm going to throw a bunch of console logs in here oh [ __ ] uh all right let's see cool let's i want to make the window smaller because people are like voting very fast and i'll have to account for that but theoretically i should now be able to close reopen this that should just work are we reticent success true cool so if i do a bunch of stuff really fast like too fast we should get limited look at that see that we got we hit a limit that's actually really cool guys i i actually think that's cool as hell that it was that easy to block people from spamming too hard do you know how hard that [ __ ] used to be to do i just copy pasted this code here i'm going to bump this to just 20 and 10 seconds that's one vote every half second it has to fetch and then when you vote that's another request so there's two requests each time yeah uh i would imagine that what's happening when we hit those limits is failures on the client side see this is not a valid json response uh i would probably so yeah this rewrites to slash api slash blocked you could change this to rewrite to whatever the hell you want to right now it's just hitting the block but in the future we could redirect that to something that makes more sense yeah i'm actually hyped at how easy that was uh let's px first cell v push does that not exist that's annoying and i if i put the variable from here i'm actually curious so someone said what the variable was earlier i don't want to open the environment variable file so people will see it so i want to see versel npx for cell and v add i it doesn't grab it for my environment that's really dumb mpx for cell nv is it dash dash and v no it doesn't work i'm just going to do it the manual way let's first select even if i do it in the cli and it shows it there i yeah things dollar sign thing it i'm gonna do it the way i'm used to which is a crappy web ui uh that guy here and [Music] this guy here oh what did that do that did not do it was supposed to oh that's copying the actual token not the name that's dumb okay uh looks like that's all added which means i should theoretically be able to get status get add that got removed that got formatted now i can i'm just committing it now quick uh we're committing uh added up stash redis based rate limiter hit push and in however much time it takes for vercell to deploy that i'll open up the ping account it doesn't matter too much uh oh it's here because i just deployed on it we want to deploy just take a bit not too long hopefully since i changed the next version it's probably going to be faster don't ask about guzzlord more coming in the future cool this should deploy pretty quick builds going okay guzzlord is my attempt at turbo repointing the massive ping code base it was going well then it stopped going well and i will do more in the future i use the name guzzlord because it's a big round pokemon that is goofy as [ __ ] and probably a bad idea and it felt fitting for trying to mono repo a code base that had been around for as long as it was yo goal staff thanks for stopping by pump that you found my youtube and that you found your way all the way here looks like the build here is completed take on conventional commits i don't care how people commit maybe in like big open source repos where it matter like you want commit messages to be a consistent like version log that makes sense otherwise yeah i don't care so that now theoretically if i just refresh super fast so i'm making tons of requests we should be rate limited there we go see that see that guys how cool is that i i'm actually really hyped on how easy that was i'm gonna start using this for other things that's dope rate limiters suck to set up and i just made it so y'all can't spam this goddamn api as hard that's really cool 404 is right because we're redirecting to something that doesn't exist so this is getting rewritten to slash api back end i could write it to something else 429 is the right message i could api blocked go make that a 429 in the api so let's do that new file blocked dot ts you know what i bet that these guys thought ahead here and in their next example i have a feeling look at that there's your 429 that you were absolutely correct is the thing we should be sending kit status git add send correct blocked response get push and now we have a properly rate limited spec compliant solution how cool is that so as i didn't announce the stream i absolutely did i'll hit the publish button in case that didn't get published but yeah fantastic to have you guys here we're talking redis now and i am genuinely really hyped at how easy that was to set up i am probably going to start throwing this in front of a lot of my other apis because my shit's getting spammed hard lately yeah this is a video in and of itself i'm gonna hit that marker button because everything before that can be a video of its own and i wanna play with some harder stuff now i we should take a look at other things we can do with redis i was going to try and speed up roundist i thought that would be fun but the data model in particular like the voting is much more sequally than it is key value story and i don't necessarily feel like architecting a voting system that works great with a key value store that actually sounds like hell and i would like to avoid that hell but i do kind of want to see how this works with auth so shall we see how much faster we can make the off on zapdos maybe that could be fun what do you guys think y'all there are a lot of people in chat who know redis better than me what should we do with redis give me some ideas nerds this is your thing not mine you close a bunch of tabs quick because we got this working surprisingly quick off we feeling off so far you could get other options i'm down to do the auth one i think that'll be cool but i think it's going to be similar to this where it's just it's quick to set up and then it's done which is awesome but also like not the most necessary demonstration cron job with redis ooh link shortener [ __ ] that's that's really good yeah we need to go do that god damn it so the the only reason that i don't think it's as necessary for the links order it's very good for the link shortener i yeah i'm leaning on the link shortener someone asked how do i stop people from spamming so hard that it racks up a bill spammers are something you have to deal with period that's the the reality of like building applications that are public facing you have to pay that cost somewhere it was way more expensive when i was paying for the lambda invocations on my versailles like deploy what's these like 20 cents for a hundred thousand yeah that sucks you've just send a hundred thousand requests to cost me 20 cents though that's a lot and i it saves me significant like you'd have to put an effort to cost me more than five dollars and you would have to spend a lot more money than five dollars to do that to me the only way you could further prevent is put a like another layer of like a cloud flare like dns protection ahead so that it requests like keep coming in like that you can block them at a dns level but yeah i think the link shortener and the auth are the two best options we could do both we could rebuild the link shortener using this let's do a link shortener again tell you guys what i have a fun way to do this we're going to do a poll and the poll is gonna be redis versus or what next with redis the options here are going to be auth or link shortener but if you guys gift 30 subs before the poll is done we'll do both and i'll stay live longer than i intend to because that will take a lot longer because we're going to start from scratch so you guys want me to start from scratch and do a full fresh code project 30 gift subs or 30 subs total if you all just use your solo subs that counts towards it too for sure and if the poll finishes before then then we're going with whichever wins the poll y'all got five minutes you got people gifting already good [ __ ] appreciate y'all immensely and you subscribed yourself you appreciate that a ton thank you man i am also going to run ads now because if i don't now we're screwed dylan thank you so much for the 10 gifts we're over a third of the way already and paradox will just subscribe with their prime for those who don't know your prime subscription or if you're an amazon prime user you can link your amazon account to your twitch account and you get one free subscription every month that you could be giving to a content creator like me that's five dollars a month that's just not being spent that could be gifted to somebody else like myself so make sure if you're not already that you take advantage of the opportunity to get a free subscription on twitch also another five gift subs from leflame not scott really appreciate you man thank you not scott yo youtube gang good to see y'all here as well chalk do i count chalks 10 gifted towards it i'll count chalk's 10 gifted towards it actually you decide chalks should i count your 10 gifted towards this goal or not do you want it to count your call count five of them i i like that idea so that puts us at 20 gifted plus the 21 22 23 we're at 24 so far so we're only six away and chalk said not to count his so i'll take that five away we're at 20 with the one additional sub that just came through for reggie one more gift that puts us at 21. we're super close god you guys still have half the time too [ __ ] so somebody mentioned on youtube they already built the link shortener you're correct one way to view this is i'm rebuilding the link shortener if we hit goal and i'm moving the link shortener over if we don't and we absolutely just hit the goal with chalks gifting another 10 subs thank you so much man i super appreciate that also see the resubs coming through as well good [ __ ] we're absolutely doing it now looks like i have to rebuild the link shortener from scratch again that'll be fun thankfully we have the og source code to reference but yeah i'm excited let's build a uber fast link shortener with uber fast authentication should be fun good stuff i actually hyped on this can you use up stash with railway absolutely as long as you put the environment variables in anything that like runs code that has network access can use upstash that's one of the cool things and something i'm going to talk about in another stream soon one of the benefits of something like upstash i wish i could show you the dashboard page but i can't because then my environment variables will leak again but when you connect with uh that's the api compatibility that i'm less interested in sdk's upstash redis when you connect with something like upstash redis http based this means anything that can make a fetch request can use upstash which is super super cool planetscaler recently did something very similar actually where planetscale introduced their http api and i am so excited to talk more about this it came out between my last stream and this stream so and this stream was already sponsored ahead of time but i'm probably going to go very in depth on this on the next stream maybe even this weekend if i have time to do another stream because planetscale's trying to give you that level of access that something like upstash provides by letting you hit your sequel via http this is one of the necessary building blocks to diy your own much faster prisma and i have it working uh people have been lurking my github you might have seen this pscaleastro.t3.gg this is a repo that is hitting planet scale via the http api and rendering an astro app on the edge on request so this gives you a good idea of like in your network environment wherever you you are what is your full round trip time from request to painted on the page so that'll be the next rant that i'm very excited about that'll how many gifts left we're way over it people went nuts on the subs booleans so we're absolutely doing uh this the auth won the poll but it's actually very close people wanted both it seems which is cool that we're doing both i think i'm gonna take a super quick smoke i should have ran the ad before then not after my bad on that uh hit the i'm not going to market this yet yeah i don't need to take a break just yet i'll just smoke here i'm actually going to tweet about this because i'm actually really excited about it i can do that on this computer make sure i'm not leaking dms i was leaking dms i'm no longer leaking dms uh just added a rate limiter to my old next app in literally five minutes good stuff at up stash am i even following them yet it's embarrassing they're paying me not following me to fix that i am good at my landing page tweets i'll share this in chat if you all want to spam that so that's how do i hide and unhide my screen so quick i don't have my cables long enough but uh this guy my stream deck i can hit the little buttons here to switch super easy lifesaver having your stream deck set up properly is one of like the best quality of life things you can do as a content creator it made my life so much better i all caps when i'm excited and i'm genuinely excited i thought i i'll be legit i picked the rate limiter first because i actually thought i was gonna take the whole stream trying to figure that out and get it all deployed and it happened way smoother and way simpler than expected also 12k followers on twitch god damn these numbers are nuts appreciate y'all so much so love the love on the tweet that will help a ton how long have i studied redis i have not studied redness i know i i know what it does and i've looked into using it for things in the past but i've never actually like used it meaningfully other than hitting someone else's existing redis solution when building in uh back end code base having and that was years ago so having this automatically work with really good source code examples like really good source code examples i i don't often say wow that was really good about someone else's next js code but this was fantastic the example in here was exactly what we needed it was the middleware i would have liked for it to have a better matcher oh i just realized that the matcher also runs on the blocked which is bad so i need to opt out of the matcher oh no it has they handled this here oh i know did they no we're not opting out if the batch is uh or if the match is for something else uh i can change that very quickly though uh let's quickly console.log the request url just to make sure it is what i think it is are we ready nope that's not what i was thinking i want the path then i think that that's an option here uh is it not anymore next url that might be what i'm looking for uh protocol yeah that's what i'm looking for so i'm doing a quick opt out here so for quest dot next url up path name let's get out of here early if request oh was that auto completing correctly cool then we escape i guess i can do the right thing cool comment early escape if hitting the locked redirect cool fix redirect get push nice so now that's fixed in production i should probably check the production environment i don't care enough to i trust it works and if it doesn't somebody will yell at me kill ah time to create new t3 app let's do it i don't need both of these mpx create three app we're gonna do an interesting set of things i haven't done before uh faster all right we'll do redis links redis shorteners write a shortener we'll go with that for now type script next off tailwind and trpc very interesting combo i've actually never seen what this template looks like if you leave out prisma uh it's funny if you uh if it doesn't fill the full line then the rewrite doesn't work there that's funny terminal apps are hard to make cd redis shortener i have made this after that npm install that's already done npm run dev get status and i want this code environment instead kill think that this uh should be good to get started now let me check the local environment see what it's mad about not mad about anything just yet which is cool i think that it leaves the next auth environment variables empty by default oh it's nv.example so we're going to rename this to dot env and i'm just going to use github because i'm lazy i think that's fine yep i'll show you guys how to do github off i trust that they did this right and it won't leak immediately uh somebody uh says something about fast prototyping and typescript uh yeah i move faster with typescript than javascript because i don't worry about making dumb mistakes it's great at least the token when you do it here okay cool we'll go all the way through so people could see the whole process until right at the end uh probably just leaked my email too whatever people are gonna find that anyways so don't trust this leaking github keys is scary yeah i just want to call it one thing in particular because i've made this mistake i've seen others make this mistake a billion goddamn times when you're making a new app for github for your next author any like oauth thing you're making a new oauth app so it's actually not here it's uh developer settings yeah oauth app so you don't want a github app you want to make an oauth app this is the thing you want to make i've seen a lot of people make this mistake and the errors you get are not very intuitive you want to create a new oauth application so i'm going to do this super fast redis shortener i haven't picked the url for it yet three thousand and then i need to get the callback url let's actually look at the docs for this on next auth documentation adapters actually no i didn't want the provider first i want to grab the github provider info here and see what it recommends for the callback url no does it not say in here i always forget off the top of my head uh no getting started it slash callback slash i think so api auth callback github should probably made that a little easier register hide so i don't accidentally leak the tokens uh let me go paste these in quick generate a new client secret i have to do this via my mobile phone i guess quickly do that uh i have to open the github app i think hub i will say the github app is way better than i expected i do a lot of like code reviews and [ __ ] with it and didn't think i would enjoy it and i do pretty often so take that as you will okay those are both created uh and then for the i don't think i need to do the url i'll do a secret quick though i don't need that one i need this one cool theoretically now i did all of that correctly should build that off so let's hop in here make sure that source pages api auth yeah process environment github url could be undefined why aren't why isn't this using the validated github or validated environment is that is the template not updated for if you're not using prisma i'm guessing i don't need it but it would have been nice to have the validated environment variables yeah i can work off this i also kind of want to remove the credentials providers i don't want to encourage people do that if you want to do that that's your problem don't don't don't encourage that behavior uh cool i that image credentials you don't did you not see the password rant don't freaking use passwords bad bad bad bad passwords are bad uh cool this should just work i'm probably gonna have to restart the app quick oh i haven't i haven't connected it to a provider of any form yet or to an adapter yet uh i have to give this an adapter i don't know why it's not like complaining that doesn't have an adapter yet let's next off yoink that should be dev install shouldn't it adapters are optional what does it do if you don't have one does it run in memory let's see what it does i'm curious bye off sign in github that appears to have worked if i go display index oh auth showcase mount this guy huh check that out i love this template creates three app guys are killing it i love the i love y'all the community is awesome and the fact that i can make some like like that you just made this demonstration so much easier for me is just it's almost like funny how in one way my content is good enough that my content became easier to make and then the other just the the raw quality of what you guys have produced is unreal i'm gonna sign out and just doesn't sign in i sign in with github nice i'm going to go to this component quick because i think the sign in ah sign out or sign in if i just pick github here then it will auto sign in with github sign out sign in ta-da super cool anyways let's connect this to radius once i get working off with github and now i should actually make the new environment on here don't accidentally leak things again i can create and then oh no i have to add a payment method for more uh options here i'll do that super quick it's fine probably should have prepped this part ahead of time uh let's here's that card and cool now that's added it should let me make a new database cool you can actually pass a prefix so you can use one redis instance for multiple apps that's actually really cool i'm reading through the docs here using multiple apps with a single up stash redis instance that's really cool i was saying prisma needs to do this for a while so you can use like one instance of planet scale with multiple prisma deploys it's really cool this is an example here let's do it cool uh this is right or i'll just call it yeah redis shortener or link shortener oh this one can be global right any real issue with off being global i say yeah let's do it if it breaks it breaks we can learn from it oh i yeah julius i almost definitely was using a very old create t3 app is it worth doing a fresh one quick because that was definitely hitting a cached version let's do that uh mpx create t3 app at latest yeah i was definitely using an old one and have some of those questions in it cool somebody said in uh youtube chat that there's no issue with google oh it's ns fantastic love that you're here man really appreciate it and yeah i am pumped that i can use the global for that cd rds2 let's get this open in vs code i am going to yoink a bunch of things from here quick just because i wrote them and it's easier if i go to pages index oh the off showcase is already mounted in this version it seems uh no it's not that's fine i can paste that save that i'm not using these loading which is fine uh the other thing i need to do is oh uh use the discord provider now instead of the github one uh i might just yoink this file and ignore the type errors for now just to make my life a little easier oh we have a warning for it i do like a warning for it fine i'll do it the right way and client or environment.server and i can go here change the two discord instances to github schema here change this to github and now i'm going to hide the screens i have to edit some environment variables oh wow i was using a very old version this has gotten so much better uh we're not using prisma so i don't need that i think that is it this should just work npm run dev typing is hard i'm still logged in good stuff cool that did not take long at all leak number [ __ ] three i'm just gonna put in the environment variable now and s if you're here y'all were so close so close that it hurts the password is hidden but not in the little code snippets right there you can make the fix it's like it's actually gonna be annoying to do now i think about it but yeah that's like the only complaint i have had so far is i've leaked my environment variables too many times for one stream let me yoink this guy move over to here don't need this anymore don't need that anymore i need this here and i need this guy here and if i did that all correctly that should be done cool sorry about that we're now good oh peace ollie thanks for stopping by as always no hard feelings and s like it's you're you put in the effort you know to hide the passwords everyone gets this wrong planet scale took like seven redos to fix it i think they actually broke it once again most people aren't optimizing for the streamer use case i understand just yeah if you could hide the password in that field unless you hit the copy button that'd be dope i i i i'm not worried about the credit card i even if you did it'd be like five bucks don't don't worry at all y'all y'all are way above average in terms of all of this so far and you've this experience has been way better than i i was i had high hopes medium expectations this has been great overall though cool with that done i can now link up that adapter so if we uh that's not what i was looking for it is this guy cool let's grab this all oh i don't even need to do that i can rip the code from earlier uh if i go back to the reddish shortener or not write a shortener i want it to go to roundest my bad uh roundest i can yoink this guy uh what was that oh god [ __ ] damn it that's four five and six i leaked three things there [ __ ] i i can't the blur filter is not going to help i command shift i accidentally open the tab let's reset this generate new secret copy paste and grab a new one from up upstash as well [Music] and i got my new rest token [Music] paste save close i am opening and closing a bunch of stuff so command t well or command shift t won't do the thing i don't want it to okay cool it should be significantly harder for me to leak things now cool i do want to grab from roundest mon uh what do i okay just flash redis that's easy enough i thought i installed this maybe not would i dev install it oh i think i installed in the other project okay up stash right adapter we're not really yeah we do use this uh that would go in here let me just check the source code on this oh that's nice and simple cool think i now have auth via redis that's uh i probably have to kill and restart this for it to work it's not what i did t-max attach how things go oh cool am i done i think that that's off working on redis it's very fast yeah let's commit that something i want to try i'm actually curious how well this works i want to server render this page on the edge worker and see if i can actually run the api on it too i i do i want to be clear i do not think this will work i will be very surprised if this does it might work here and then not in production that's another option here i i am curious as to how this goes so export config equal const config equals uh let's uh next js blog experimental runtime i think it's experimental edge is what i put for that am i putting that here i can now export get server side props equals async request response i think it's just context is what we get here uh and i want to validate the auth here i think we have an unstable example here that's for restricted you know like here uh is context uh yeah it is so that has everything i need this needs ctx dot res as well and if this is what is it upset about what else does it need oh the next off options uh that i can grab as well next off options i think i need to go to api and then pass these here as well i think that will now block the page on off cannot resolve v8 what's trying to import v8 oh next auth is i thought they had an edge example for next off did they not should have had a v8 is a very funny reply to that middleware cats are causing a ruckus and api routes and that's what i did from next off middlewares uh does it have examples uh gur it doesn't seem like we can do this unless we move to jwts which i'm annoyed by but we can get jotty actually uh do you guys want to see me make this work with redis for the urls first or do you want to see me break my ass making this work for next off on the edge that's upgraded before i just want to see breakout okay that i figure that's what you guys would want to see let's do it uh jdt configuration oh this is the upgrade guide uh if any other session strategy strategy i haven't actually done this before and uh here a session oh is that just okay that makes sense so i would in here do session strategy jwt and now my all should be broken well the whole page is still broken uh we'll i'll screw with that in a bit for now i'm just going to comment out yeah i'll comment out this guy for now yeah and it failed because jwt wasn't used before so now my auth is dead but if i sign back in it's now signed in with a jwt and the pop-in happens uh because the sign in is seen initially and we don't have session data even though we're using jwt strat that all makes sense cool i try to decide how i want to proceed to try and force this to work on the edge uh i wish that the dachshund here had a better uh middle where is this uh yeah this is the doc i'm looking for i'm actually curious like with this as the default behavior hey bud chill out with this as the default behavior in a middleware i am actually really curious if that's smart enough to pre-hydrate off i'm guessing no but i want to know so let's see if that prehydrates it does not didn't think it would but it's cool to know uh yeah the redis server is not going to help with the jwt i am using the jwt because my goal here is get everything on the edge the redis adapter isn't going to do a whole lot it is going to persist like the the user match in my or on my database but it isn't going to be used to validate the off on every request so what i was hoping i would be able to do is use this middleware checker uh yep that's all correct i think i have to check the freaking source code for this what's the advanced usage with off middleware as parts of the sign-in code need to run in a node environment i love next auth but it is a bit behind in these ways oh interesting this got updated yesterday or was it two days ago two days ago still cool i want to look at the source code for this though uh packages next off uh what was the where am i importing from for this is imported from next off slash middleware so i would think oh here it is middleware ts from dot slash next slash middleware cool how much code here not too much okay i need to rip the get token and how do i actually get the token off the request uh oh you passed a request i don't think i need any of these things other than the secret and the request so let's let's try it this way i'm actually really curious uh kill i'm gonna kill all of this for now paste that you know ink comment back in but we want this here and i have to import get token from next.jwt request ctx.request and then the secret is envy dot oh is next off secret not one of the things that we pre-configure i guess that you're not supposed to access it but uh yeah i i'm just gonna not do it that way and do an ignore uh where is they say okay yeah next time underscore secret that's what i thought it was uh let's go back here process dot environment dot next auth secret we'll get a warning i don't care this jwt how do we turn can we turn that jwt into a session or do i have to hit my database to get that please hide in v where am i showing vnv i'm not opening it it's the wrong environment import intentionally because i don't feel like uh making this one type safe am trying to see if there's any way for me to get a session out of a toke or out of a jwt uh i guess that this is basically the shape of a session i think if i just do that i am curious what happens self is not defined what's referencing self how far are we getting console.log token token uh it's still not getting there uh i don't even want to know what self is not defined is coming from i knew this would be suffering but god damn anyone smarter than me got an idea no so the issue is i get self is not defined after making all the changes that i thought would handle this let me see can i get this far pre-token do i get that far i think i'm getting that far yeah i'm not it looks like something i am importing is not enjoying running on the edge i bet if i remove this it will work but it's not pre-hydrating correctly what am i that should be everything i need from the session let me console log the session data on client oh shoot and here we're getting oh that all goes under user cool let's do that then not coming through by default uh oh yeah it is oh it's because of the other stuff loading uh if i kill that actually if i just move the secret message to be i'm just gonna remove it for now yeah that is persistently logged in and if i comment out this guy it isn't that's pretty cool do wish i could run on the edge this page can be found it's right there i promise self is not defined yeah so close so close so somebody mentioned don't i have a source slash middleware that's not gonna help oh the line seven environment import uh that's that might be it actually nope [ __ ] uh somebody else i think it's the arrow functions i once had that be a thing they fixed it so i really don't think it's that i because the arrow functions the problem was the config wouldn't apply if you use an arrow function instead of a keyword function but they've almost definitely fixed that uh if i just comment out the secret what happens still self is not defined so that's not the problem there is something we are importing in here it has to be this jwt [ __ ] doesn't it like if i count this out and const token equals undefined no huh i have no idea why this wouldn't work there's like nothing in this file it's so boring it's not the imports it's next middleware and edge environment just being broken next edge runtime self is not defined just what's rendering that would cause that this is so boring and simple ah maybe if i do the like top level config buddy chill all right my cat's being very annoying uh just read the blog post quick experimental runtime true cool unlikely it'll do anything uh that didn't do anything i think it would but it's good to know it won't uh i'm just gonna try the arrow function i'm not even going to put a type def on i don't care i don't even put the async keyword oh space export async function if you want to see how rarely i write async functions with the syntax there you go still self not defined i yeah they're the next edge [ __ ] is just it's broken right now i wish that wasn't the case but it is uh i am sad i was really excited for that to be very fast and it can't be i can't console context it doesn't even get that far the page doesn't load the pre-token doesn't come out like we're getting nothing we don't get far enough for that it doesn't even console log that it fails to even start the environment kicking out my cat one sec so someone said middleware needs to be outside of the pages directory we're not using middleware we're using the nextedge runtime next has experimental edge server rendering and it's broken it says line nine what's on line nine an empty space it could be the use session call nope it's probably still saying the same line too uh that server load components is failing i oh boy y'all ready to see [Music] something incredibly dumb if this is it i'm gonna be very upset okay slightly relieved i've killed and restarted my dev server like a hundred times there there isn't a simple solution here that the next edge runtime is broken at the moment uh i'm going to comment this out and this out this might work nope okay here's what we're going to do so i want to confirm my theory here quick uh cd stream mpx create next app at latest test edge why is it using yarn when i npxed this is a bug that we had in create t3 app that you all fixed and they haven't does somebody want to file a pr to fix create next app cause i'm not using yarn let's get rid of that cursed file and npm install again and go to pages index js by default unless you specify otherwise i i hate how much better our template is genuinely uh that's right oh nope there's no such thing as types so i don't care here cool uh why is that mad oh i really like that as well that makes sense npm run deaf oh uh that's trying to serialize something that doesn't oh yeah that's a different issue uh god i hate types or i hate javascript there's nothing to serialize okay now it works i don't know what's different about this oh i know what's different about this i am stupid and i am annoyed wait no we should be on the latest yeah we're on the latest everything no never mind i thought for a second the problem was that i was on an old version of react and i was wrong because obviously we're not delete the dot next folder that is the best suggestion anyone has had so far by a lot actually we're gonna give that a shot nope i want this to be an upstash right a stream not theo being mad at next off so i'm going to not do that anymore we're going to do everything still on lambda but we're going to use redis instead of uh anything else and the result should be a lot faster than using prisma so let's just do that for now uh i'll comment all this back in still killing this and i don't want any of this anymore cool i need to run dev again and i have a working environment ish oh the middleware kicked off there nice let's go kill that middleware because we don't need it anymore index uh localhost cool i should probably render the buttons again my cat is being so goddamn loud right now nice we're signed in still has the pop in because it doesn't know by the time this comes up oh that's fine we can work with this let's see get status oh yeah that's working because we're not actually accessoring the page but we're going to kill that because it is sadly not an option uh experimental we don't want that we do want this commit cleanup and accept our feet cool so now i'm going to rip the code from my old link shortener because i don't feel like writing much code right now after dealing with that so let's find i don't even remember what the name of the repo was it's really been that long since i touched it it can't have been that long yeah we're way too far back uh i oh no it has to be have more reasons like i took it down because people were spamming it so hard yeah joltik here it is uh cool uh i want source middleware let's make the redirection part work first or since i'm not rewriting everything i'm more and more tempted to grab this repo and make changes to it rather than start from scratch but i'll do piece by piece for now uh let's grab this guy uh hop into i need to make a new middleware ts where dot yes and put it in pages put in source uh don't need that and here uh next fetch event i don't care in this guy we fetch from the next off uh around the excel endpoint the api slash get url endpoint which i defined in here source pages api get url this guy is a very boring fetch from prisma and return the stuff but since this has to run on a lambda it's slow and i cache the [ __ ] out of it because of that so i'm going to yank this still but we're going to use it correctly pages api get url slash slug dot ts uh we're not gonna use prisma which is gonna be very mad at me uh i don't know why the rest of us is mad at me oh just uh get slug and we can't use prisma for this but what we can use is the new redis client so let's i'm already instantiating this in here i will yoink these guys kill x we don't need it and here we can i know this is not where i actually want this if i wanted to do in the middleware i can do it here but i would like to be able to hit my cache and cache the data on a cdn that will still be faster uh oh i wanted that i want this here and instead of i'm doing before redis dot get uh sure now we have a structure for things and this is a promise of type unknown and let's see okay data is unknown so i will just assume that this is either string or undefined string or undefined and now we know this has to be stringer undefined console.log and what i'll do really quick is a new setter endpoint i'm just going to link all this but i'm not going to do any of these things in here instead i'm going to const something equals redis dot set url test https t3 d3gg need to await this and then return res.json this will let me quickly set one thing so i can use that to test against and i also just realized i this is going to be no not undefined so we'll do that there and now i should be able to local host 3000 slash api setter the response was ok which means that should now have worked and if i api slash get slug test i'll get url nice you see how fast that is let's take a look at that like response time because that's insane i might not actually need to do the cdn caching if that's going to be how fast that is so this is like remember this is actually hitting redis like making a request to the server and then coming back in 37 milliseconds that is insane i don't necessarily know if i need to cache this oh no that's because it is cached actually that's why that's happening if i remove these so it's not cached let's see how fast it is okay maybe it wasn't caching locally insanity yeah honestly i say we just deploy it without the uh cache and see what the performance is like compared to a cached solution with prisma yeah i like that this will be a fun test uh to do add these back after perf testing uh cool should probably actually make sure the redirect works uh if i go to middleware uh oh that's returning in the shape of url so let's do that here cause we json it url data cool now it's coming back in the right shape and theoretically if i do slash test uh why is [Music] that uh where uh api get url console.log slugfetch it feels like the middleware isn't even running it isn't running great oh that's infinite redirecting probably uh i don't think the matcher pattern is smart enough to do that if it is i'll be very happy but i don't think it is yeah it's not that isn't running uh looks like we're closing a bunch of tabs and then going to the next stocks again let's make sure all these are closed next middleware next middleware matching that sure i wish it would like give me more uh matching so this is like every path is resolved with it but it doesn't show me what match your syntaxes work here that's the thing that's missing the other problem is the the path that it's looking for doesn't exist so actually that might work let's try that export default function [Music] empty turn div empty and that should now match that and it doesn't match that that's what i expected so the middleware can run a matcher but it goddamn let me see my terminal it's not actually running the middleware even though that matches because this match syntax is not as verbose as the paths that you can define it's just not that smart which means what we have to do is early escape on certain conditions god i i hate that because the old middleware file based pattern sucked this isn't better enough and it should be and that's annoying to me this also means that the link shortener is broken in prod uh let's here's what we're going to have to do path star and at the top here if request dot next url dot path name dot starts with slash api we return and it's not escaping this doesn't need to but if i go to the slash test hey mr colon in the matcher that sounds right yep thank you cool progress yeah data came back as null that's very much progress why did data come back as null uh let's run that again quick oh interesting so data comes back as null and that happens in here let's console.log the slug we're working with then let's see it's not doing that i wouldn't do that it's not a question working data uh if i can delete that and quote it okay how is this running and not that then uh beginning to think i have another bad.next environment let's kill that okay here are the oh that's what's happening everything is being redirected it's i god i hate this i i only want to match if it is slash thing and there isn't a match already does next url let you know if it already has a match for something or request next url dot does this have like a it has a page of some form type check here i i will try this tabin thank you uh oh of course that doesn't work i didn't finish writing that still the set cookie thing i feel like there's so many paths in there that are going to fail inherently like it like the underscore ssg manifest like those requests i am excluding if api i need to exclude so many other things the problem is i only want this to run effectively on this and nothing else so return context.next i can return context.next here uh the yeah all of these will redirect so uh why do i need it at the root because i don't want to have a special url that's like slash shorten like i can do that if you guys really want me to make the world's worst url shortener i'm not doing that that's not happening let me just console everything i get back from this uh the somebody asked if i could put slug in a folder and match that sadly no because middleware is file systems no longer it works you can't put middleware deeper and have it only run on certain things that feature's been removed so no i can't do that as much as i would like to yep so that works because of course it does what i want to find it here i'm probably going to dox myself a hundred times with my ip address and [ __ ] in here and all of the cookies i have on my local environment whatever because i want to find any value in here i don't actually want all of that i just want next url who am i kidding uh which params path name is session path name's favicon first one is request what i want localhost 3000 okay i might do the slash slug now let's see what it looks up uh i need to close clear clear clear and the request this is so annoying okay i need this to be usable so if requests.nexturl.path name.includes test uh search slug equals text i wish it was that simple where i could just rely on that but nothing in here indicates what i need to know this is so bad i i hate next middleware it's one of those things that it seems so useful and every single time i have ever tried to use next middleware it did not do what i needed to every single time i honestly thought these changes would solve my problems and they've made them worse somehow i am just baffled so here's what we're going to do now and it sucks to have to do it this way but i just i want to keep the show moving the urls are going to be like this a slash s url is what this will run on and if it's not a slash s url it's not going to run because this is the only way i'm gonna make this work right now using next's terrible middleware patterns and i hope that this gets clipped and sent to people there because the middleware is it's unusable it's actually unusable so if i slash s slash here cool that's a new issue well it's the same issue but theoretically uh oh it actually fetched the date and everything correctly that time so let's figure out what it's mad about with cookies uh oh wait slug uh let me console.log console.log did we get what we need here data oh that a piece of work test cool yay made that part work uh i can deploy this quick no i can't really do a good perf comparison trivially actually because i don't have the other one deployed and working i do want to do more perf testing and comparisons against all of this stuff i am it's hilarious that because of how good upstash is i spent almost no time on the upstash part here and just the rest of it fighting xjs story my life but the setter is actually this simple i could go make it in trpc super quick to do like one last thing let's do that quick uh trpc uh no i need that server so here's how easy it is to add a new let's put an example router to make a thing that handles your uh next or that allows you to make a new url mutation make new short link input z dot object url z dot string dot url async resolve gonna need input and context here uh i should probably have shared this redis instance but i'm lazy i'll just make a new one it's only ever gonna run once on anything so i'm gonna edge run everything in the future and here cost res equals a weight oh i need to pick a slug too so slug c dot string should probably validate that this doesn't have like escapable characters and [ __ ] in it but we'll do that later input dot slug put url and we return res cool now i have a mutation that i can call enter a url and the slug for it and that should add that to db well redis same difference i could even validate that this is auth so if no context.user throw i guess it's session there now it doesn't work if you're not off nice and easy see how absurdly easy upstash redis makes these types of things if you just want to set a value and access it super quick you can do that pretty easily i immensely regret not taking the other project and adding in redis because when setting up a project everything that goes wrong is the setting up of the project and the new things i want to try that aren't like the one thing upstash made this significantly easier than i expected just from abscess redis connect to this here and now i'm done it is trivial to do this and set these things up and as i showed in the middleware for the uh for what's it called uh roundest it is very easy to use this for use cases that other solutions are not anywhere near performance enough or scalable enough for so like setting up a rate limiter using this was trivial and worked super well beyond pumped with the experience i've had with upstash even though they're a sponsor i do plan to keep using them because this was super cool and they were the least painful part of all of the chaos i just put myself through here so i'll probably keep this part just in the vod but i will be uploading the uh the rate limiter stuff as a separate youtube video hopefully by the end of this week i think that's it for today's show i had a lot of fun super pumped that we had jack on super pump that we have to play with all these cool things let's figure out who we're raiding i see who have my friends are online before anybody calls me for following out amaranth literally part of my job she was using ping a few days ago and i was helping make sure the show went well now keys is live we'll probably be raiding kisa you could write an iron mask or that'd be funny a lot of my homies are live this is more than i expect oh uh we should raid jamin yeah we're reading jamin this will be fun he's a react native wizard if y'all want to learn more about react native that's the place to go i'm also going to be live on twitter in probably 10 to 15 minutes whenever jacob starts a space so if you want to hear me rant about more things and complain more about nexus middleworks that's absolutely what i'll be doing the place for that is jacob's twitter so i will link his twitter here as well thank you all again for stopping by for another awesome stream one more plug actually before i forget i have a patreon now uh exclamation point patreon uh t3.gg links has it really high up here it is uh you have two options for five bucks or uh the uh there uh i have the five dollar month tier it's basically like subscribing on twitter youtube gives you access to the sub only channels patreon takes an eight percent cut instead of the 50 that twitch takes so it's way better for me there's also the 25 a month here which is the same as two three subbing gets you access to the t3 club lets you at me directly and if anybody subs on here and dms me through patreon i will respond to it it might take me a bit but i will absolutely respond to any messages i get on here on top of all of that uh i post new videos early on patreon so if you want early access to your next app is too big to uh getting your errors in next.js and i'm going to post another early talk on here later today so make sure you subscribe on patreon if you haven't yet if you want early access to my videos and do you want to support me more directly patreon.com t3.gg is the direct link or patreon command and chat i will send that over on youtube chat as well super quick anyways raid's about to go through so see you guys later this week or next week and on twitter until jamie and i said hey you




## STREAM VOD Lee Rob & Theo Chat The Future Of Next.js and The Web - 20221116
no worries yeah hey I'm Lee I uh and the VP developer experience at Purcell and I help and educate our communities for all things for sale next.js Frameworks yeah it's super excited to be here thanks for having me so excited to have you long long overdue you've definitely like set the you know how to put it like kind of up to the bar significantly for how much a person whose role is like devrel type stuff is involved in the community something I noticed early on is just how much you were around like you were hanging out like I remember I vividly remember you popping into Jacob's Discord to help or tiger debugger remix deployment issue on versel like your your presence has always been really like noticeable that way I'd love to hear a bit more like how did you get into the community and like get that deep yeah it's funny because I mean I've been hanging out in your chat just in the streams listening and hanging out with your community so it's fun to actually be on the other side of this now but yeah it's devrel is so interesting how you can be deeply embedded in all these parts of the community is just trying to connect with everyone build these relationships and help solve you know these strange problems that people might run into whether it's in some super hidden Discord some you know server somewhere else or it's on Twitter and DMS or it's real life at you know some conference or event I uh I kind of got into the community by by accident I guess I at the time when I was starting to to really start using next.js a lot there was basically no content about it out there um nobody had made extensive educational material around you know how you solve all these really common problems that people were having it was still very early days so I thought well I mean if nobody else has made it I guess this is is my opportunity to take what I'm learning as I was you know putting nextges in production at what my last job and just make resources for other people and then that kind of spiraled into lots of blogs and videos and courses and then I was like well maybe I should just join the Purcell team and just do this full-time and uh yeah it's been great since then it's been really cool to see both your journey there as well as like Versailles exploration of content and what it means in like the future of software stuff like not only did you so remember this you correctly identified that there wasn't enough content and you jumped on it and made the blog post it and helped make docs and do the things that were necessary in that way but he also kind of took like the path of the future in a lot of ways as well like you were really early on the YouTube grind not just making like how to get started with React videos but deeper like this is a New Concept that was introduced here is what it does and how useful it can be without really compromising on the value or like the quality of the production I've always felt like there's this Middle Ground between like a YouTuber making a tutorial and a really technical Tech talk that you'd see at a conference and I've always felt like you were one of the first people to recognize that there's a middle ground there and dive in on that curious what your thoughts are on the trend towards like more technical content that's somewhere between those two yeah it's funny because it's it's an exact map of my past history so I'm I'm a long time YouTuber uh mostly a consumer but I have made videos for a while they weren't necessarily Tech videos I was you know if we go way back we go to a real deep here I used to make Halo videos back in the day like gaming videos so I've always had a thing for videos I actually got into videography as a kind of a part-time hobby of mine I would you know shoot concerts or weddings or little events and stuff too so I always like love the creative side of it and then I was trying to find a way to merge the creative side with the coding side and put a fresh twist I guess on how things are how people were you know typically doing it and I think to your point about like some of these conference talks were feeling kind of stale this really like came to you a head I feel like in 2020 because it was like all of these people were shifting their consumption to watching YouTube or getting this technical information online but they wanted something that was a little bit more fresh a little bit more different something a little more fun something approachable and I think a lot of people realize at that point the value in investing in a community and doing so with a unique and authentic way of presenting your content like most of the people who watch my content on my YouTube or you know read the stuff I write they read it because of my because of me mostly like my personality they've you know they've connected with me they are a part of my community because of the way I present things or the way I share and and that's the the relationship we've built built not necessarily because I'm you know the foremost leading expert on something I'm not there's there's tons of people who are way smarter than me but I like to think that I have my own twist on it that makes it fun you identified something really important there that I've pushed a lot I feel like most companies get into the idea of having a company YouTube channel way too early I think Purcell did a much better job and got in pretty late where like y'all didn't make the YouTube channel until years in and you had like specific content and events planned for it but for a long time the versell YouTube was your channel and the channels of the other people at the company and I think that's what works people don't like following companies they don't like subscribing to companies they don't go to Company YouTube channels seeking things in that way they like to follow people and to feel that relationship with individuals and I think that that's one of the things versel identified and jumped on really early the Versa Twitter accounts don't tweet a whole lot the versell engineers the versel product managers the Versa leadership the for sale like VPS of developer everythings are the ones who are tweeting and sharing content and communicating with us and it feels much more personal curious how much of that was strategic versus just how it happened the the individual devrel folks using their own channels was very intentional because I've always felt like I mean there's there's two angles to this the first angle is that one as a consumer I want to watch people like I want to watch a specific person teach me in their style and I want to learn from them directly the other is almost the more selfish route from a career growth perspective I want to help these people build their own community in their own brand I want everyone on my team to have their own um you know their own goals and their own YouTube channel and their own following uh and invest in them as well too so it's actually a kind of a double win like I wanna I wanna go to delba's YouTube channel and channel and I want to like see her unique take on presenting content and I want to follow that instead of the versaille company Channel you know ideally maybe both but I think there's there's a reason to invest in the individuals I couldn't agree more I think it's so important to like take advantage of the power of an individual's brand right now more than ever people can relate to the creators and the influencers and the or devrels that they are consuming content from and it's just so much like every once in a while I'll go to website for like a competitor either in our space or just a random old tech company and their website's full of like identical like a bunch of people wearing like matching polos from the 2000s with the company's logo on them and their YouTube channels all these like nameless people that are just discussing features like one after another I've definitely felt like Dev is one of the few places that caught on to how that doesn't work early and is really pushing it but for every one like company that's figuring out there's three others that have a YouTube channel with hundreds of videos with five plays each where every thumbnail is identical to the ones before and after it and yeah I one slight knit with y'all you made the mistake the one mistake I shout about the most on the YouTube channel you let a product designer design your thumbnails yeah product design yeah I remember we talked about this product designers have a very specific job and they're very good at it they make things seamless and not stick out so that you can find the thing you need to when you need to the goal of a product designer is to not make anything like Stand Out unnecessarily it is to make everything feel cohesive it is a thumbnail designer's job to make something stand out as much as possible as much as imaginable so when I scroll through a YouTube channel and every thumbnail is identical ah yeah it's it's funny because like there's part there's part of me that It Feels So cringy and I've learned to accept the cringe like embrace the cringe because I don't want to put my face on thumbnails but it actually I'm so much more likely to click on a video there's a face on a thumbnail because I want to watch people it's like it's it's it's like such a strange Paradox I don't know like At first I was so against it and I wanted these very slick and clean thumbnails but in reality I'm like no I want you know a picture of some video game with like a cut out face on it and like an explosion in the background says blazing fast on top of it or something like it's the way I've chosen to think about it I I've Loved this one veritasium video about click bait like the goal of Click bait is how do I put it if you have a video that you're genuinely proud of and you have an audience in mind that you think will benefit in some way from watching this it's really easy to get in the mindset of making the thumbnail for yourself and for what you think the video is but the thumbnail is not for the video the thumbnails for the audience to get them into the video it is an entry point it's not part of the product it is the the entire marketing for the product the video is the product and if you're proud of the video and you can make a thumbnail like it's other people who would benefit from that video to click it it doesn't have to be perfectly relevant which is why it feels bad like your face isn't the content of the video it's in the video though but as long as there's overlap between the reason someone will click the thumbnail into the value they can get from the video and the values actually there it will work and when I started thinking about it that way when the thumbnail was less like this cool thing I'm architecting to make feel right and it's now more how do I get people who would benefit from this video to click on it I ended up growing to love it way more when it stopped it's almost like when I moved away from like building crazy infrastructure to just writing functions it's like oh yeah I was overthinking all of this all of the time mm-hmm yeah something I was going to mention on the last topic to swing back to there's something very interesting about also this new wave of devrel or content is people embracing the the more human side of it I guess what I mean by that is like these are real people Behind These accounts with real likes and interests and real personalities and like Embrace that I don't want to see something stale super polished that has no personality at all like throw a meme in there like have some fun tell some like light-hearted jokes it doesn't have to be very corporate and I think there's a certain type of company that's scared of embracing that but if you look you know I feel like Tech is almost lagging behind some of the other Industries here where you look at like Wendy's Twitter right like you look at some of these other brands that have totally embraced especially the way that younger Generations are just like they love memes right like gen Z loves memes uh especially you look at Tick Tock it's like it's like 20 layered deep self-referential memes like it's deep those are some dank memes we're starting to have our influence there my stupid one word tweet thing that went way too far that one was hilarious like we have our moments they're starting to happen but I definitely feel that like there's a lot more pushback on the trend than there seems to be in other places like I watch what happened to skateboarding and skateboarders are famous for not wanting to let things change skateboarding just took over Instagram and like Instagram the platform gave skateboarding like 10 years longer in its last surge than it should have had it's starting on its decline again but like their willingness to embrace these new Platforms in the ways that they can help the message go further is just so powerful and I think we're starting to notice this in Tech we're seeing more and more companies taking advantage of the inherent viral reach to being viral and understanding the Internet it's just crazy the people who built the internet don't seem to understand it and it's nice that finally we're seeing this change Savage it is what it is yeah so true let's dive into some tech stuff because there have been a massive pile of releases recently from the Versailles crew obviously we should talk a little bit about next 13 overall I'm curious if there's anything in particular that you there first we should give an overview how would you summarize the next 13 release in like four sentences or less I would say it is an improvement to your existing toolkit and application and as well as a glimpse into the future so to expand maybe just a little bit more on that you can upgrade to 13 and start using some of the new stuff like a better image component better font module system and just you know take advantage of these right away today and be happy or you can also check out the app directory which is like the vision into the new direction of next JS it's not ready for the the prime time just yet but you can start to try out a lot of the stuff that's been you know talked about for you know about a year now I would say it's went through public rfcs went through many discussions now it's like you can finally start building stuff with it I am so hyped I've been playing a bunch with the app directory and obviously having a the next image being overhauled was painfully overdue and probably my favorite catch of the bunch honestly there's also one subtle change that we haven't talked about enough I need to make a clickbaity video for this already the biggest change y'all didn't announce at nextconf create next apps finally typescript first yes it has happened yeah I'm pretty happy about that change I think um we've really been listening to the community and the community has been telling us we want more typescript we want better built-in typescript support we want to see more examples with typescript you might also notice if you start you know checking out the PRS shout out to some of the community contributors who have been updating a bunch of examples to typescript as well as finding some old ones and saying like oh these aren't relevant anymore so the examples folder is also getting a pretty good update to make things typescript first as well too so that's super helpful that is awesome I yeah overdue I am proud I have my blog post from forever ago I can find that quick just to cite it I this was ancient but I'm proud to say it's more and more irrelevant As Days Go By it's a blog post I wrote December of last year almost one year out now where I complained a lot about type safety within xjs and recently we've just seen so much improvement in this regard from the like our server-side components letting you just write server code in your component in the type safety story there is solved with the like inference helper is getting way better with the examples being typescript first by default with the hirings of incredibly talented typescript developers that are helping at all levels like schnizz schles whatever he prefers to go by he has like 15 candles calstar all the work he's doing on things like next fetch is so cool and one other thing I definitely want to chat about is the new typescript uh plugin for next.js as well but it seems like y'all went from typescript the thing I complain about to typescript the thing I shell about really quickly yeah I mean a lot of this you know kudos to you is for sharing great feedback like that blog post is helping us understand the the parts that aren't very good and so we can really think about how we iterate on that developer experience and I think my summary of it was it's actually three things one the the ecosystem the tooling the examples weren't teaching typescript first that's one thing we talked about the second is the inconsistency with data fetching which you know we can talk about with the app directory and how fetching happens there and then I think the third too is providing better tooling by default that helps you do the right thing so for the typescript plugin that we ship with now basically we wanted a way with with all of these new conventions and patterns architecture patterns in the app directory we want a way that helps guide developers down the the right path right and eslint can solve some of that but a really good typescript plugin can also solve a lot of that so for example if I am defining how many seconds I want a route to revalidate on for using ISR it accepts a number right it would be great if if I accidentally put a string or if I put something else the typescript plugin can just automatically figure this out without having to manually type anything I think that's the big thing because yes you could have done a an object and imported some type like route segment config type and had to add that everywhere or you know the the existing type that you have to do for git service eye props is not very great it's like in infer get server side Pro it's like would nullify all of the things within it too like when you add Keys it just would ignore like a third of them and make them all nullable if yeah I inferget server side profits is not in a good state for a while yeah and then on the on the data fetching side too it kind of as it plays off of that then you also had to have Community packages you know shout out to um The Blitz team and other folks who worked on super Json and just ways to make the serialization process easier um that was a pretty common thing you would run into especially when you're using Prisma right which is you know shout out to create T3 stack um so I think the interesting thing for me with this new direction of just async await your components or async await your data inside of your components is that you actually don't have to manually type anything like any extra specific next.js types and you can just say hey this is a a list of or array of strings and it can automatically figure that out it can automatically serialize or it doesn't even need to serialize things so you can use a date or a you know any sort of a set or any sort of other thing that previously was kind of difficult to do absolutely I think I have a fod from forever ago know where I was like I think I was like playing with react 18 for the first time and trying to like get server components working and when I realized that there was no way for me to await things inside of the server components like oh these aren't really server components these are components that run on servers but like this isn't server code this is client code that has a bunch of shims let me also run it on a server yeah and then just reading that like first like three sentences of the RFC of server components did not feel like JavaScript we made them async so they can we did not design this right before now we have I I think that it's often missed it's funny it's like people feel like typescript's this huge thing you add to JavaScript it's actually very much not I find that like typescript gets easiest when the JavaScript is the simplest and most standard so when you move away from your own weird third party asynchronous layer to JavaScript async await suddenly type safety is fine and if you look at like the trpc routers that we have in create T3 app or any of the gigantic apps we're building with it the teeth or the routers in trpc like a router file doesn't have a single type definition in it you don't write type defs ever in trpc you write a validator for the input and then you return something and whenever you return that's the type but I find people think typescript means writing types you're only writing types and typescript if you're leaving the natural JavaScript funny like as your JavaScript gets less vanilla and has more boundaries the typescript gets less vanilla and has more boundaries hmm yeah yeah it's been really cool to see these Trends I am curious though as like how to put this one the one thing that I felt like was really missing in the recent release with next was everything past page load obviously like the next JavaScript bundle is still there it still takes over once the client has loaded and lets you navigate like single page app style your react code runs on the client but the things that were loaded through server components don't get updates like you can't have a prop three layers up an input that changes it and then the date of the next three server components needs changes without doing that at the route level and if the data updates at some point in the session like let's say I get a websocket event that says hey the info in your top nav changed re-render that once the page is loaded it's kind of my problem to solve and I'm curious how you feel about that and what next role is past page load yeah I think when we were releasing the apps directory there was a couple things that were kind of late breaking changes from what we had previously talked about in the layouts RC and it was kind of the I guess kind of the culmination of that react RFC about async components and async await now there's also other parts which is kind of what you're getting at that are that were unsolved I guess in this first announcement of the app directory which is what do we do about the mutation of data you know what do we do about API routes kind of some of these other pieces other than just hey I want to fetch some data and do a server render right so I think the first one is API routes a lot of people thought that because they weren't available in the app directory like we were going to remove them or they weren't going to be a thing anymore that's of course not true so you can still use them today in the Pages directory but we are planning on putting out more guidance around what our path is for making a version of this that works with the app directory because we think we can do even better than what API routes are today and you know I'm open to feedback as well too if you have uh suggestions on again nice to see that yeah that would be cool as the alternative to API routes for the API directory where you can also export like any swc.ts files also a route that you can access via URLs that would be huge one pain Point I've had in the Pages directory because I definitely can see that Pages slash API is slipping a tiny bit as far as I've been able to tell there is no way for me to get you or path params from a URL where like in the file they you have like the bracket ID you can't get those on the edge runtime in the API directory right now [Music] um I think yeah I think that's accurate yep that's a a runtime difference that's kind of annoying yeah I've been eating those runtime differences more and more every day recently yeah that that's an interesting we can we can go into runtime runtime ideas but the other thing I was going to mention too is like I think a lot of people saw the the initial release of app and they're like okay I've got my data I can async await it it's in my component now how do I handle when I like add data when I have to change some data and that's another thing where the story isn't fully told yet so we want to put out more guidance here hopefully soon about how we want to handle like mutations or forms uh and just make that developer experience a lot easier of course there's you know lots of innovation in the space right now around this and I think there's tons of really really good ideas I'm excited to see what the the next GS team comes up with uh in terms of what they think are the right trade-offs to make in terms of mutating data I am so excited to see this I I think that's the big missing piece that a lot of Frameworks a handful have started to look at like I really like how solidstart has basically like react query built in where all of the server data can be optionally keyed and then you can invalidate and update those keys on the client which is super cool or like obviously what we've done with create T3 app where all the data is being loaded through trpc but right now the current state of react server components the more I play with it the more I play with other things and think about it the single thing they feel the most like right now by far is Astro I feel like I'm building mini Astro apps all over my react app I've almost inverted what Astro does where I am doing things that only run on the server and at some point down the tree I'm like okay from here down react takes over and runs on the client and I can update from here but until I've written that use client I can't really use State and I can't have things that change and that's kind of how Astro works the Astra framework only runs on the server it doesn't do anything on client so when I want something that updates I go write a quick react component or preact or solid or whatever and I can import that from that point down I feel like in some ways react 18 and next 13 have inverted what Astor did but also feels so similar as I'm implementing with them mm-hmm yeah there's a a lot of advantages of that model and just now I've been building apps with the after now for you know a couple months just trying things out and trying to build apps of a bit larger size and also as we slowly migrate over pages of versaille.com and of the next GS website um it's been an interesting mental model shift and I think you know I think the whole Community is feeling this as well too as they try this out and they're like okay this this is definitely different than how I was building apps before and a lot of people are still trying to make up their mind like do I like this do I hate this is this is this the right way to build applications uh I think at first you know just being honest at first I was like I don't know if I like this used client thing it's like a little confusing because my mental model was so ingrained with years of building next JS applications and it's like I'm almost retraining my brain a little bit now after being uh you know working with it a bit more in a few more sites I'm starting to come around to it but it's it is um it's definitely different the thing that's exciting for me and and why I've I'm leaning into it is the there was actually one part of nexgs in the pages folder that's sneakily confusing I think you've talked about this before actually which is inside of a page Pages slash index I'm using git server-side props it's actually super confusing for beginners that this magic function right here runs on the server and you can use like environment variables to connect to your database and it's fine that's not going to be included in your client-side code but the code right below it is the client-side code like that's going to run in the browser so don't use the environment variable there and like we we solved some of that with the very explicit next underscore public usage of environment variables but the mental model was kind of weird it's like okay this is actually a server and client code inside the same file so I I do think I mean if I could wave a magic wand and have amazing education educational material right now I think beginners would actually start to understand this mental model a lot easier than the existing mental model I think Astro is seeing this too I think Astro is doing a really great job with their education materials with how they're teaching and I think it's clicking for a lot of people because it's they have no preconceived notion of how it should work they're they're going into it with completely open mind like oh this is this new thing let's let's see how it works so yeah I agree absolutely I've actually found Astra to be one of the best tools for like teaching absolute beginners be it like beginner web devs who put that kind of experience or just devs who haven't like or who wants to try their first like project ever Astro because it's so straight it's so almost like abrasively straightforward with here is where the code that runs on the server goes here is the HTML the client gets that that direct relationship is really powerful and what react 13 or what react 18 and next 13 enable is that powerful this code runs server and it calls this code that is either server code or client code you choose when you like put the string on top my cat is screaming he's gonna take this opportunity for us to do a quick like one minute break so I can run an ad let him out and then we're going to come right back and chat all about run times so we'll be back in just a minute the people who are subscribed can still hear us so we can chat about whatever if you have a fun like sub rant you want to go on when I let my cat out feel free be right back yeah for sure yeah I think uh I just sent you a message for this cool uh demo that shows the actual code that gets pulled out like it shows how it strips out and eliminates the code that runs um on the server side uh it's it's the thing is you had to have demos like that just to even explain the concept um it's nice that it's a lot more explicit now it's like oh this is a server component by default everything in here runs on the server no code sent to the client do you want to use client make it explicit um I I like that inversion of control I absolutely agree it's so nice to see that like I single page app solved so many problems they really did I don't think they get enough credit for how great an experience that they provide but the power of PHP and rails of just write the thing to get the data you want from your database and then throw that in a template and you're done that has been lost by a lot of like modern tools and it's nice to see us slowly finding our way back there I see so so frequently on Hacker News or on Twitter where people post a link to a site or something and then people in the comments like decides so fast how is this site so fast it's like it's literally just single page app like Fast client side navigations it's the illusion of like it makes everything seem so much faster just a little bit of pre-fetching and a little bit of a little bit of that Spa magic so it's pretty interesting absolutely and I am seeing more and more people like it feels like there's a new pendulum where we swung really hard back to MPA and like entirely server-side everything but we're starting to see the swing back there's tools like uh the really popular one is linear where like it's so much better an experience for users to like have an issue tracker where everything's super Snappy hotkeys work immediately your overall experience using is just so much better than almost any of the Alternatives and I hate that like I go to jira and it has more JavaScript and more HTML and blocks for three minutes before anything comes down the wire like you can make something good or bad in either Tech but man it's really hard to beat the quality and the snappiness of something that's a really good like single page app when the stuff through the long session it's just it's really hard to beat you know something funny about linear though that I didn't realize until I started I I we now use it for task tracking on my team uh on on a not very commonly talked about trade-off of linear is the kind of the cold boot of having to re-synchronize and re-download everything when you haven't used it in a while I'm willing to make that trade-off to have the really fast experience once it boots up but it is an interesting trade-off that I I think I don't know exactly how it works but I think it has to go you know fetch all of the the state and then essentially keep it locally so that it can have the really fast mutations in like I don't know like I don't know what it uses some kind of local database or something yeah they do some interesting stuff there I chat with the team a long time ago and was really impressed with like their focus on that I also like they have like a local queue of events that like append and get sent out in batches if they need to be it's yeah they do some weird hacks in that regard and so much of it is on network side because react as long as they write simple straightforward clear react code that has very minimal bindings for state that part tends to be really fast by default and a lot of their effort tends to go towards the network side and how do we cache the actual queries mutations and data and so many of the times where I see people complaining about how slow react is or how slow websites are that are using these Technologies almost every time there's some like five megabyte Json blob being loaded in that is the actual source of the pain or like a ton of tracking scripts and things like that I'm not saying react can't be slow I'm not even saying that react is fast I'm saying that react is rarely the reason websites suck even the ones that use react it's it's such a tricky nuanced thing to balance with people like the other day I saw a not react a different framework site that loaded like a very large amount of JS because it was doing some fancy 3D stuff and like that's fine like it's it's not necessarily wrong you're building this really cool experience but it's very easy to take that out of context and be like oh this site's terrible that means that this framework is terrible it's like well not not necessarily this is pretty much user code I mean yes the framework could try to help set more guard rails around that but you can't you can't protect everything absolutely but speaking of protecting things I did see you sent a link uh next code elimination I just saw that now would you like to like me to quickly share this let me go over it a bit yeah sure yeah this is a really old demo actually this is from next.js I think it's from like nine point something so many years old now but basically the point of this demo was to help people understand the mental model shift of okay so you're telling me I can connect to my SQL database I can use my environment variables I can securely make these queries on the server in the same file as when I'm doing my react code so it shows the code on the left which is what you type in your editor and then it shows the code on the right which is what actually gets bundled and sent to the client side so it helps like relieve some of that anxiety of like oh my gosh what happens if I if I write this code am I actually going to expose my database credentials to the client side is this live update I think so yeah cool and if I console.log value then now value comes through if I also console.log pool I kill everything yeah it just blows up that is hilarious I is a really useful demo for showing this off though I also press this this fast without swc doing the compiling behind the scenes yeah I don't I don't remember actually how this is built it's pretty cool yeah this is a dope example uh the URL I can share in chat quick uh pop out chat I need to make something like this but for the same thing but for Server components I think could be really cool yeah I definitely agree it would be super interesting I'm trying to think of the right like one of my favorite visualizations in next when you do a next build is the one that shows you for each like file in the Pages directory is it going to be ISR SSR or SSG oh yeah something like that for the app directory and for the theoretical like routes that could come up that like shows where the server component stops and the client components start so I'm not sure if you remember this but a long time ago there used to be this like little icon in the bottom of I think it was the bottom left or the bottom right of your next Dev sessions and it basically showed if the page was statically optimized like if it could automatically just determine that this page was static it had no like blocking data fetching requirements and if it did I think it showed a lightning bolt we've been talking about bringing something like that back not exactly like that but the giving some kind of Hud or overlay to help people understand in this new world where it's not a binary this page is rendered on the server this page is statically optimized it's actually much more granular now where it's like oh this fetch to go get the top products is static and it revalidates every 30 seconds this fetch to go get the user data is server rendered it has to go fetch new new content every time because it reads a header to check for you know some authentication information I think helping folks visualize that with devtooling would go a long ways so they understand how the data is flowing through the system essentially absolutely that's something I've complained a lot about and I think was part of what you're touching on earlier with the get server-side prop stuff I complained about before where the flow of how data went through next through the Pages directory was kind of unintuitive where first it would hit document then it would hit your get server-side props function then it would go through underscore app and get processed there this will get initial props was hit sometime way back that I forgot about but get server-side props uh gets hit passes data to app which can do whatever it wants to it that then passes it to your component there's like three interactions between get server-side props and your component and tracing that flow can get really annoying and then that's just the top of the page then react takes over from there down now that we're blurring the lines between where the data is coming from and where react takes over where they are the same now it's so much more important to have those Dev tools to highlight where things gain and lose control of your data and your request yeah there's also a we could we could go in deeper on this too there's also an interesting like framework architecture question here which is part of the reason why I feel like a lot of the community was like wow it took a while for nextges to update with the after and to like make these kind of more drastic data fetching changes well part of that was because there were restrictions around the Pages directory and continue to be restrictions for a good reason it's it's a delicate trade-off of like yes you couldn't do git server-side props in any arbitrary file because that could actually add a lot of complexity or you might not be able to understand the order of operations in your application similarly with ISR too imagine that every single page was able to revalidate and get fresh data then unless the system is really designed to handle that you're going to have some really weird situations where like what if you have data that's five layers down that's trying to revalidate but the navbar data actually is not going to revalidate and like things can get out of sync really fast so I think sometimes it's hard to convey that Nuance to tell people like there is a reason why the framework is putting these restrictions for now we're trying to find a solution that will help everyone fall into the right you know for lack of a better word pit of success that's a fun one right um just trying to help them do the right thing and I I think I don't think we're there yet I think we're close I think the new dead at fetching is a step in the right direction I think there's still a lot more work around the typescript support conformance through eslint and also Dev tooling to really and education to help people understand the right architecture patterns to have but I think it has the right foundation now to actually achieve what we're looking for I yeah I'm so excited this is the stuff that I nerd out about is these like data flow Dev tool and overall like experience of building things problems one of the issues I have found in moving more and more into the app directory stuff is due to the the nature of obviously like I'm playing with the early cash stuff I know it's not out yet but I'm curious like to see how it works it is so hard to know when things aren't working in terms of what isn't isn't fetching because I don't have browser Dev tools to see what my server is doing and now that my server is doing more and more work that is more and more intricate and has different data flows I can't use my request tab to watch data flows in my app anymore and I'm excited to hear that the dev tools are an angle there but I am curious like how do you think the overall debug in deployment story or debug and like Dev Story is going to change for developers who are used to using their Chrome Dev tools and network tab all the time yeah we got to take a page out of the tan stack Playbook because you know they that man writes of Dev tools that's some quality stuff right there um there's a lot a lot of work that we can do to make it way more obvious how to uh reason about the state that your application is in especially if you're doing a lot more fetching on the server uh another thing too like thinking about an iteration of ISR as well is like you might have noticed on the fetch object there is the next option and the you know the object that you pass along to it the next key and then inside of next there's revalidate and you can set number of seconds but it's specifically namespaced under next because then we can add additional things there right uh and one of them could be kind of like what you're talking about with solid one of the things that we've been thinking about is like well why can't you just set essentially tags in there that you want to revalidate that specific Fetch and the tags could be shared across multiple fetches that's a huge um you know a current customer piece of feedback on on-demand ISR on ISR is like hey I want to invalidate just these specific ones I don't need to invalidate the entire page I want much more fine-grained control over how I set and invalidate pieces of my cache and again I think we can continue to push down that route but then you need to have good tools to understand the state of of where kind of where your cash is at but the cool part about it for me is I think that's a a 10x leap in terms of helping developers manage caches because that's some really hard stuff to do whether I'm bundling up next.js and Docker and just deploying to my single region you know node.js instance and I'm just managing that single cache the next GS server is handling the hard part for me and revalidating only those parts or if I'm you know deploying to some provider that's actually putting it globally and then I have to invalidate the cache globally it's like I don't want to solve that problem I'm going to let somebody else solve that problem for me add in a websocket for Global updates as well without having to rebound or refetch the entire page and all of a sudden you have like DIY Super Bass for everything and that's gonna break a lot of brains and I see us getting closer and closer to that every day I did see a question from Julius it's a really good one uh he's curious about or if you have any additional background on the decision to cash fetch by default and like what led to that yeah I think that when we announced this change in architecture for how fetching happens and how it aligns with the server components World a lot of people were surprised by two things one by default if I do a fetch the data is going to be cached and two the fact that we said I know I know you also feel strongly about this the fact that we were still going to allow next export or you were still going to be able to do a completely static site I think a lot of people expected us to completely ditch static sites as a thing that next.js cared about and they're really interesting I do want it yeah yeah it's it's really it's fascinating because on one hand you know I I personally don't use next export very often but I do hear from a lot of people who do because of the way that they're deploying their next GSI you know they are very excited about the operational Simplicity of just getting a bunch of files and dropping it into an S3 bucket like that's their preferred way of using next.js and they're using it mostly as a spa like they don't they're not even really using a lot of those additional features they just want an easy way to use react and like recognizing that that's still a big part of the community is very interesting but it is um it people work I I guess a little confused we're like yeah server components are this really exciting thing you're going to be able to build these highly Dynamic applications like we're embracing server rendering again it's you know it's it's amazing they're like wait a minute then why is it static by default and I think to me the big thing is most of the time there are a lot of fetches that should be static that you want the framework to automatically do that for you that if you don't make it the default people will forget I think what I've seen time and time again from not just next.js but really any framework deployed to for sale when I talk to customers even if they have the option to set cache control headers so many people forget it's not always the first thing they think about like oh you know what I just made this fetch I should really think about the semantics of the stale while revalidate caching control headers if they do you know kudos to them but not everybody does this so having good defaults is actually a really important thing here from I guess the next JS teams perspective on how to make things fast a little fun uh backstory here is like we actually already went that route like mix.js started just being you know server rendered by default and the recommendation was like yeah if you want to do things static just use steel while revalidate cash control headers and like figure it out and what we found like debugging really complex sites at a large scale was like people just weren't using cache control right so we're like okay what if there was a way where we could make a good default that would automatically set the right caching control headers for people and actually store the result of that static generation into persisted durable storage and put it around the globe and that is how the baby was born that was how ISR was born essentially this is reminding me a lot of something I talked about with Tanner recently have you ever seen the important defaults page on the react query Docs um for everyone else the value of this page that is so fascinating is that react query which is a way to do asynchronous promise Management in your react apps you handed a promise you handed a string or key to represent that instance of that function and then it gives you that result with a loading State error estate caching across your app and all the other weird behaviors you might need there's a lot of features in tan or in tan stack query and in react query that a lot of people don't know about and wouldn't get just looking at a quick code snippet specifically the way the caching behaviors work the way like staleness works the way refetching on window Focus works and rather than have the most intuitive defaults that get those features out of the way and then you go Google for them and find them when you need them they're on by default in some of the most aggressive possible ways like the default stale time is zero because technically speaking by the time the data's reached your client it's now stale if you don't know it's not and you should have to tell react query that the data isn't stale and give it a longer time or an infinite time to tell react query accordingly so by default data is stale as soon as it's been fetched or the refetch on window Focus which is a really useful feature When You tab out and back into something to have the data reload but you're not going to learn about that without having it on by default because it's not a thing people think about so a lot of these features are on by default which is annoying because I turn off half or more of these in most apps but this page being here and these defaults being on forces me to learn about these features really early and better understand the architecture that I'm building with I'm seeing a lot of this mindset in the cache by default with fetch because it will do something weird if you expect it to not cache and now it is you'll be like what's going on you look it up and then you learn about this Behavior that's baked in and then you can make better decisions because you now understand that this exists and what it does or if it was a hidden feature you had to go find it's significantly less likely that people will end up doing the right thing 100 agreed yeah strict defaults are super useful and an underutilized tool in making crazy new changes I am scared about overriding fetch but I totally get why it was done and even though I've run into some very funny bugs because of it I think it's one of those necessary bold moves for these types of changes to take on or get the attention and the takeoff that they deserve yeah and I think another thing too is like everything is iterative so if you know if it really isn't working or the community really hates it like things can change um the the way I look at it is like nothing is ever set in stone and there are things that there are some decisions that are more stylistic that I think do have to eventually have a decision made for example the page uh dot JS or dot TS syntax a lot of people like it a lot of people don't like it and it was one of those things where it's it's mostly a syntactical decision at a certain point you just got to make a decision and the the team's feeling on it was like we think this is the right way and we're gonna we're gonna make this decision now I can see arguments on both sides personally I've started to really like it and it aligns with what some other Frameworks are doing too I think spell has a you know the plus page as well too or assault kit I should say um but yeah it's a non-uh syntactical type things they're always up for iteration absolutely I I feel like my complaints with file based routing aren't about any one implementation it's more the concept as a whole once things get nested like files files could be nested in folders but only like one way and those relationships can get really complex I like the naming of Paige and I I feel like it what it represents to people is frustrating more so than what it actually is because what it represents is this is now complex enough that we need a key that represents the thing that actually renders in this directory where before it was by being in that directory that render was determined yeah I think is if you look at it like this the reason it exists is so that I can dump my images fonts uh you know scripts like whatever else I want inside of that folder and not have it be the actual route that I navigate to like true co-location I'm willing to take any trade-off to make that happen right like I'll do I'll do anything because that's been so handy already just to have all of my components and their Styles co-located inside the folder it's something that I really wanted previously in the Pages directory so it's worth it's worth the trade-off for me and another thing too I think um something that has been a Hot Topic lately and something that we've been thinking about um especially with the release of tin stack um router is like type safe routing I think that also helps with this a lot too and that's something we're exploring also uh adding into the app directory which I think would be a huge win yep something I complained a lot about and we'll probably continue to for a while is if I have a layout in the app directory in that layout fetches data for like your top nav or something and I now want that data to be accessible and the component that gets mounted underneath it there is no type safety story there really I have to write my own Types on both sides and hope for the best because I'm just blindly passing to a child that I don't know the type of and now if I move files around anywhere the type safety story isn't a story it's a bunch of lies that I wrote and it breaks as soon as I change what files are where I think this is the biggest issue I have with file based routing is it's again that like how JavaScript is your JavaScript and file based routing is explicitly not JavaScript it goes on outside of the JavaScript files therefore typescript cannot own the contracts anymore we can do things to bridge those gaps but as soon as we leave JavaScript itself to make these contracts we're now making things up and we're in imagination land and that's where typescript's weakest makes sense yeah these are the the things that keep me up at night I am really hopeful for the future I would love actually here's a word I have not heard from anyone at herself for way too long I think I saw one example in the presentations at next jsconf but I'm curious yeah stance on query params [Music] um in in terms of what the thing after the question mark in your url yeah yeah like uh my stance on it for just general usage or yes it feels like next does it fully acknowledge their existence I mean I think it's fine I think a lot of people I mean Amazon I think has basically State through query prams like that's you send links and everything is basically turned into some kind of state that you can resume the selections you made on the page it's actually very common in e-commerce I think um so I I think it's fine I think there's probably opportunities to align more with the web standard apis which I think the um the I'm trying to remember which one the search params option which is one of the props on a server component so server components there's a use search params hook that you can use in client components but there's also a prop available on a server component that allows you just pull off the search params and that just uses the web standard API as well too to be able to fetch stuff so hopefully that's an improvement over the previous story and Pages that's good to hear the one big issue was that it was really hard to no or like like the use router hook would return query params but the first pass would return nothing because technically the HP server rendered could be cached the URL params could be different so it could be routing to the the wrong HTML file so it has to treat it like it knows nothing and then send you data after there's no real option to block on not having query params I mean this kind of goes back to the whole confusion around like not only data fetching happening in the file in a separate function with Git server side props and like not understanding that oh this this runs on the server only this runs on both because it has to be hydrated it's the same exact thing with query params too because that that's the really cool part about reading query params in a server component is I don't have to do the mental gymnastics of like oh but this is going to run again when it gets hydrated on the client side um unless I'm explicitly trying to build something on the client side that's like toggling some filters that needs to go update URL state right yeah my my big concern now is I'm seeing a chaotic map that developers are gonna have to make in their heads of like the relationship between URL params and query params which ones aren't cached at like URL level combined with the additional cash primitive and the cache keys where are those valid and invalid what level is that cache happening at is that happening on a server level a global level a client level how does invalidating affect all of these things there's I I the biggest concern I have is the amount of pieces that have two behaviors or more that you have to understand the relationship between those things as you build more complex applications like I don't know off the top of my head right now does two different query params result in two different cached entities in app directory or not I don't know yeah that's a good question yeah and I am happy it's not my job to answer those questions anymore because it is yeah there's a lot to think about as these things change but I definitely see the effort going in something I want to talk a bit about we've touched on it a ton is the role of Education materials in making these changes I noticed that a ton of effort went in it almost seemed like next 13 was blocked on the docs updates and I'm curious what the relationship is between like the docs the education materials your role and the actual Tech is it ships like how tight is that relationship now it's so funny because when we were first writing docs for the app directory you know just just ignorant about the amount of work it would be I was like ah this won't be that bad and then once the team really started to get deeper into it we're like oh we actually have to rewrite everything because the fundamental like the fundamental knowledge that you need to understand all these Concepts is like it needs to be set at the start like you need to go over the basics the foundations of like how does routing work how does rendering work what the hell is a server component like how do all these pieces go together and then maybe we can jump into some API reference of like how I use this hook or something so then we're like oh okay now we have to like the amount of work just 10xed so uh it was a fun challenge to get that ready before the release it was a lot of time um you know shout out to the next GS core team for just allowing us to ask very dumb questions and try to understand how all this stuff works and to make it into something that is consumable there's also a PCR just the general like documentation education philosophy here which is like what's the right level of complexity to disclose to people like there there are definitely more parts of the app directory that are not yet documented that are super complex Advanced things and my take on it was like everyone is drinking from the fire hose of new stuff right now we can't we can't go deep on every single thing we gotta at least teach the basics first people are still trying to figure out what is a server component we can't you know we can't go extremely deep on like multi-level fetched caches uh we will get there like we absolutely will get there but it's it's a slow process and I think to your point a lot of that comes down to docs and educational material and also trying to make the tooling do the job for us so the typescript plugin is doing that a little bit if you hover over things it puts you know docs in editor essentially which is really good also like really fast typescript errors really fast ESP warnings can also help educate things like for example if you try to use state in a server component the typescript plugin is going to yell at you and be like by the way that's not how that works if you try to do the use client directive the fancy little string that's kind of like use strict in the old days if you try to put that on like the middle of your file or something type what's going to be like actually that has to be the first line of the file that's just the the standard that you need to use so there's there's both of those battles to kind of solve it once building things into the tooling itself and then also bringing folks along for the mental model shift I think there's uh you know probably the next year of my life is going to be just thinking about how we educate people on these these new topics because it's not going to happen fast uh it's gonna it's gonna be a slow process I was just um seeing that like most people when they're starting to opt um opt into the app directory this makes sense right but they're they're not just cutting everything over to the app directory right it's it's still beta there's still things that are being worked on they're going to slowly incrementally migrate things over as they're ready and at the same time they're trying to you know educate maybe a team of 50 100 a thousand developers on these new conventions and they're going to be looking towards the official docs and official learning material to bring them along on that Journey it's a really interesting position y'all are in with the docs I feel like you have three different roles that they have to fill they have to be a reference for all of the crazy things next does and the amount of those things is constantly increasing now they have to be education materials for developers who are new to these Concepts and trying to like learn them discover them and better understand them and they have to kind of be to be frank marketing they have to convince people of these patterns and be a thing I can link to when I try to convince someone to try out this new framework or check out these new things so having those three very distinct audiences shouting at you from all these different directions constantly is really difficult and I yeah I can't even imagine having to to write around that set of restrictions like that is very difficult I think I talked a bit about with some of the people working in the docs is it feels like you're trying to solve two problems at once right now with like adding all of the documentation for all these new things as well as overhauling the like architecture of the docs so that there's a better like entry point and easier pass to get where I'm looking for I'm curious what that effort has looked like how much like of your balance is improving like education materials and flows overall versus getting things up to date yeah the old next year or not the old but the the current stable next JS docs not the beta docs the beta docs are specifically reteaching everything app directory first basically the the current stable docs that are teaching Pages first it's um they haven't really had a a information architecture re-haul in a long time so I mean really the next JS site and the docs design and the overall structure of the Ia is is mostly remain the same for the last you know two three years and you might notice there's some consequences to that like there's an advanced features section that has a lot of stuff are those all advanced features no they're absolutely not also the naming of like Advanced features was like 50 things underneath it yeah that one's killed me forever like like the custom app and document are underneath Advanced but they're not really Advanced because you need to use them basically all the time so there was also the opportunity for us to step back and be like okay what if we just reimagined we we basically just laid out all the different pages how would we bucket these today if we were starting from scratch we're starting over differently and uh I think it's gonna be a lot more clear also because we he turned on comments on the for sale deployment people can just like comment on the docs that's also been super helpful so thank you to everybody who's you know left comments but found lots of typos lots of uh confusing things lots of places where additional context was needed so that's been helpful as well too yeah I was super impressed with that it's been about half an hour so I need to run ads again before I do that though I just noticed on YouTube we have about 400 people watching but only 150 likes what's going on there guys likes are free hit that button if you want to support us a bit helps us a ton with the ago placement anyways smash that like button I hate that those call outs matter so much but with the recent youTube like UI update it's harder to see the like button on mobile so people miss it a lot more but as soon as you tell them to like we've already gotten 70 likes since I said that it's stupid it works so well yeah previous uh stream and then I was also watching uh primigen's he had a YouTube video and he was like in the middle of it some kind of hilarious like cut I was like wait you haven't subscribed yet and I looked and I hadn't subscribed yet I was like oh no should I smash that subscribe button it works and I just did I just did that in my last video I just posted today too at the end I was like yeah like And subscribe if you want to see more stuff so it works I have a super clickbaity one coming out soon it's like four things that you're probably doing wrong in your code base and thing three is that your engineers aren't subscribed to me on YouTube and I'm really excited to see how that does numbers wise oh that's hilarious good stuff and then in the in the thumbnail you won't believe number three oh God I hate that that's gonna work but it absolutely is on the topic of the [ __ ] that we've been up to on this side of the typescript world I would really love your thoughts on the community efforts to build things around next.js things like create T3 app things like markdoc things like some of the new paid templates that I'm seeing popping up as well like what do you think the role is of community Meta Meta Frameworks around things like next yeah I think the community has the opportunity and does a really good job of kind of looking at what is the default set of of tools or opinions or of conventions that a framework gives this is more than just an xgs thing but it looks at that set and decides okay I agree with some of these I disagree with some of these here's the specific um you know incantation or spell that I want to uh concoct here I'm going to put this into my cauldron I'm going to brew it up and like that's this cool open source library that I've created and I think that a community is truly healthy when there's tons of innovation in that space like if there wasn't the T3 app of the world if there wasn't the markdop of the world like I would be sad like I want to see this really cool innovation in the space where people are you know putting putting a stake in the ground and saying like Prisma is the way like trpc is the way like you must do these things this is the way to build apps because ultimately if uh you know enough people come along for that ride It ultimately influences the framework itself so as you can tell I think you can claim some credit for this next year's becoming more typescript uh friendly more more native typescript support is largely due to community really shouting and saying we want typescript we want to have it be an integral part of the framework and we want it to pair really nicely with these other tools that we like to use and we want to see more examples and educational material around this stuff too so the role of these uh these open source libraries these open source authors is is immense and I think um there's a lot of parallels also back to the react ecosystem where I think react especially post hooks just an incredible incredible amount of community exploration to find the right patterns and the right architecture that they liked for building applications not to say that there was anyone that was specifically like this is the way or this is the only right way but if an idea or a pattern is good enough ultimately on a long enough timeline it's going to make it back into the core I think reacts timeline Grant you know it's a much larger scale is a bit longer than even a nextges timeline which is a bit longer than maybe even an earlier framework that has a bit more opportunity to kind of iterate and fail fast and try out new ideas like I think svelt kit has done a really good job of iterating and iterating and iterating on the API design to find the the right one the right conventions that they're happy with before going out of RC and into stable 1.0 um I think Astro has done a good job with this too yeah I I love the comparison of how like Frameworks pull in ideas I think react is really interesting because of both what they pull in and what they don't I I really like how react at its core is a set of Primitives it was components and then they added Hooks and now they're adding like use and the concept of server components but all of those are very primitive they're not prescriptions on how to think about how you build their abstractions that let you architect how you choose and next I find is somewhere in between where it has Primitives like the pages API is such a beautiful example of a primitive I can make a file export a function and that is now an API that I can use however I want and a lot of the innovation in the next ecosystem and in something like create T3 app comes from us abusing that directory to do really cool stuff in our full stack next server applications I have concerns that with the direction shifts in next that we won't have as much powerful Primitives and I'm curious how much when you think about changes to nextjs you're thinking about the ways in which Community can hack destroy and like do crazy things with these New Primitives yeah I think there's two sides to the coin on I guess I'll start with the side where we want it to be flexible we want people to hack we want people to innovate API routes are a great example because there was a use case here that I never even thought of which is essentially what trpc is doing it's what next off is doing it's what like a bunch of these other plugins or Integrations for lack of a better word are doing which is like oh I can use this catch-all to just make a bunch of API routes like makes it super easy to set it up it's like you know 10 lines of code or something in a new file and you can automatically scaffold out a bunch of things there's I saw one that did this for a bunch of stripe routes I saw one that did it for like a bunch of crud actions on a Prisma table which is kind of the inverse of what trpc is doing for you um but I think it's really cool and like that has to be you have to give I think the uh one of the the cliches here is like Sharp Tools but like give people the ability to make it their own and give them the right Primitives to take but then on the complete opposite side of that when do you want to lock things down I think one interesting example of this is actually webpack plugins so in one aspect you do want to have a ton of plugins that people can use and you know extend and do basically anything they want to do but on the other hand a lot of developers want the core set of plugins or transforms to just be baked into the framework itself so that they don't have to venture out into ejected or customized land I think we saw this with the transition from Babel to swc a lot of people when they were originally trying it out they're like this is great however I still have like these two or three Babble transforms that I never want to like rewrite these to rust I never want to think about them again if you just take care of this then I'll just use stock mix.js and that's going to work up to a point you also still have to have the escape hatch of like how do I eject out and write my own Plugin or my own way to override but it's also good to embed the common cases so that people don't have to eject that much I absolutely agree with and I was actually going to bring up the like move to swc away from Babel and webpack because I I think that we had so much innovation in like like if Babel wasn't as accessible as it was to write transforms jsx might not have happened and my concern is that if we all move to es build and swc that the next jsx won't happen because it's too hard to write it in a way that works with the tools that we now use every day and I've even seen solid struggling with this a bit where their jsx Babel transform is a Babel transform and they need to think really hard about whether or not they want to stick with that and right now if for solid to compile via es build they have to install a bunch of react packages and convince es build hey by the way we're react we promised just to spit out our jsx transforms we'll handle it just just give us our JS back and it will do it but like I I am very concerned that if we pick defaults and encode those that the likelihood of better defaults being discovered in the future erodes yeah I think um there's a similar conversation happening right now around turbo pack plugins which is it's kind of the same thing it's like do you expect the community to write rust for every single Plugin or do you expect to give them JavaScript that can compile down to you know whatever your underlying system is um and I think there I can see both angles on one hand you know it's kind of up to the tool maintainers it's up to the turbo pack team or you know webpack or Babel or swc to work with some of these um popular tools in the community and make sure that they have the proper support so for example like we've been talking to the the Tailwind team to make sure that we can you know make sure Tailwind works great in a future with you know native rust tooling and we've been talking to you know other other meta Frameworks outside of next.js whether it's you know solid or Astro about how can we add support for them also being able to use turbo pack because if if you don't bring the ecosystem in the community along for the ride no one's really going to adopt your tool like it has to be just because you have a cool tool doesn't really mean anything if I can't plug it into my application and use it yeah it's a a tough spot to be in and there's like two different sides here like building Primitives people can build on top of to increase the amount of innovation and building defaults that prescribe solution so amount which directly hurts the amount of innovation that can occur but also directly improves the amount of uh like like the agility of the developers on top it's kind of the angular versus react argument but to me the value react has always brought has been being so primitive and letting us build react query letting us build remix and next letting us build like all of these solutions to problems building our own renderers with react free fiber or react native or react skia and all of these new things because of the the Primitive nature of react itself my my fear and this is like the one I have and I there's a lot of doomerism going on around like the relationship between next and react I think it's really cool my only concern is the potential damage to the decade plus of constant Innovation that we've had like I yeah do you think jsx 2.0 is ever going to happen I don't know uh svelte is jsx 2.0 we need a we need this is something I was going to tell you we need sound effects like I need um the rap air horn so that after I just drop bombs I can beep beep just like that that's what I need or I need I need the the background noise that primogen has for blazing fast where it's like you know like we we need all these sound effects Mark if you're here put it on the linear would be amazing and then you just embed it in ping too so I can like hit the sound effects um get some get some good good sounds going but I guess to to I guess concretely go back and answer your question I don't know about I I guess I don't know what a jsx 2.0 would look like there's a proposal um it just hasn't been touched for years I think the the thing that's interesting for me it kind of goes back to like we have to bring the community along to experiment try other ideas find the syntactical sugar that they like that they think makes them performant that they think helps them write better applications or you know fall into the right defaults and if ultimately the best idea will win I think if there is a you know a successor to jsx or there's a different syntax that people think is better and if enough people advocate for it I think ultimately it will win it will have the opportunity to kind of influence um larger Upstream reactor other you know other libraries I guess you call react now just just a library it's a architecture set of Primitives that's very fair my I'm gonna reframe my concern slightly because I feel like typescript was one of the worst things to cause these problems so it's a big typescript fan something I have worked hard to acknowledge is like who benefits and who hurts from typescript if your code faces users directly it is very rare that that code if it was in JavaScript before does not immediately benefit massively from using typescript because you will have the apis on both sides with type safety if you're using anything standard you have all the browser apis that are all built in all well typed all handled for you you have the libraries you're consuming many of which are really well typed and built and now you can build the relationship between them with typescript and you will work faster once you've learned the core patterns and learn how to follow the red squigglies if you're a library maintainer you're the one who I've shifted the burden to when I use typescript to write code in a way that lets me think less about each implementation detail and more about what I'm building and assembling that's that mental load I have offloaded has been tossed onto the shoulders of library maintainers and typescript makes building libraries harder it just does it doesn't matter how good you are at typescript typescript makes the creation of your library more difficult and my concern with things like turbo pack things like the es build and roll up things like swc things like weird typescript plugins being created things like the move to neovim away from vs code that we're always shifting back and forth between the fun editor and the vs or the new version of them but those types of things I find make it way harder for Library creators to innovate as much as they do I see 15 thanks Tanners in chat Tanner's absolute Legend and a great example of like how hard it is for a library maintainer to learn typescript but also how beneficial it can be at that point like supporting all of these different things if I want to build the tool that is well loved and adopted sucks and having to support 15 editors having to support 200 different servers having to support all these different things is painful it's not as painful if you acquire all those developers but I'm curious like what do you think the long-term role is of nexjs in a community built around innovating new technologies like is next the the thing that we contribute to once we've made these discoveries or is next the place where we do the discovery that's a good question I think that a lot of this Innovation and Discovery is happening more at the pages API level abstraction that you talked about versus the bundler level abstraction I think there will be people who are very interested in hacking and editing and making changes to bundlers but I think the trend over time to me seems to be like less people who are interested in that and more who if they really wanted to do it differently they would actually just do use a different project or kind of take a different path with their own requirements and kind of Go Go a different route now I do think there's a way to bring both parties along and satisfy both needs a little bit like nappy ERS where you can kind of write write JavaScript and have it go into rust like that feels like a good Bridge of yes I want to extend compilation or bundling no I don't want to learn trust like I I still want to be able to write things in the language that I know and still have it be fast that feels like a good compromise um but it it part of that is also recognizing like the reason those constraints are put in place around how much flexibility you have to override the compilation of the bundling process or these lower level systems that make up the Frameworks you want to use they're to help prevent the foot guns of like oh no I just added this you know wild uh Plug-In or transform and now why is my app taking five minutes to reload the page like because things like that do happen um given enough hacking but I don't want to focus too much on the the outliers I guess so I don't know I I think you raise a good point about like what next year's role is going to play in the future because you know if I if I look into my crystal ball and I think about the next five years of next JS I think we're moving to a world where you can kind of already see this in how we try to bundle some dependencies is you want to just be able to install next kind of like you install node.js like you just download the binary and it just kind of works um that doesn't mean that you can't extend it but I think people are looking for the a different distribution for a lot of their Frameworks like I think there's a growing cohort of people who want to be able to download the the nightly release of next.js or like the app like this binary of it running on their systems it gets the patch updates they don't have to think about the npm ecosystem of um you know all the things that make up next yes itself they just want a a solid tool that works um how fast we get there I don't know that's a really interesting one I've talked a bit with Jeff about this as well like what would it look like to have a a supported and done thing that like you would see Mac OS installing or like having by default like Mac OS has Ruby installed on it by default it's an old ass version it doesn't matter because it hasn't really like changed much over the decades it's Ruby still oh I just lost your video oh that's probably my DSLR needs to be returned on I'll turn it back on it gets hot I like the the shout out from Ryan solid tools are good yeah solid tools are really good events some really solid tools released and developed over this last year there we go looks great yeah the DSLR life I am really happy with my 300 mirror list that doesn't cause me any problems I am so lucky with my cheap ass it's Panasonic it's so weird I I've I have all the things right you'd think I have it plugged into like an actual um like plug into the wall it's not a battery pack it shouldn't turn off but it still overheats somehow so I don't know is it one of the official it's a Sony I'm assuming right it is is it one of the official Sony battery packs because the third-party ones generate more heat I think it is I think there might be a setting on the camera if I remember correctly there's like some setting in the camera that says like it's like dangerously allow overheating essentially I know what I'm doing here I'm not gonna blow up the battery you're adding the dangerous prefix you've been in react for too long oh yeah do not use or you will get fired did you see the person who thought that like Twitter was leaking internal code going through the bundle but they were just reading the react bundle yeah that was hilarious oh man yeah yeah I I'm really interested in this idea of the next binary the question I was going to ask that you kind of answered but I'm just gonna ask just out of curiosity in three years do you think the average next JS project will have more packages or less packages in the package Json foreign man I feel like it's hard to bet against more like the the rate at which the JavaScript ecosystem has increased it's hard to say that there won't be more how many packages will be in the next JS package itself like in its own package I think will be less because I think that there's a management of the supply chain basically like a good instance of this but if you if you npm install next you'll notice it installs like seven dependencies or something or eight dependencies that doesn't mean that there's only eight dependencies if you go look at the source code there's this um vendor bundled thing where it actually inlines some of the dependencies in there to lock them to a specific version and to prevent the abuse of like somebody hijacked the latest version of left pad and they change the what's published on their registry and oh I just re-ran npm and I just downloaded this thing so they're actually in line into the the distro of of next.js itself I think that will probably continue to go up like the the licenses are still there everything Still Remains it's not like they're modifying the actual code itself of the packages it's just the distribution process of it yeah I was I remember when I first discovered that when I first tried and I was like oh there are way too few things here what's going on there's no way they reinvented everything and made three packages and I went and read this I was like oh you're just bundling everything in Defender that's actually kind of clever that means that my package Json or my package lock is like 500 lines instead of 15 000 or so which yeah very appreciated that was a good call there's a interesting question here about what about next.js plus bun uh from Kevin that I I like because I've been talking to Jared about um you know ways that we can make the integration between nexius and and Bun better and he's very him in in the whole team are are very excited and adamant about having really good support for next JS I think his intentions he wants to make it like the fastest way to do sort of a rendered react is by using bun so I'm excited to see that Innovation there too I'm overall just very excited about bun in general as a whole and what the potential it could be to speed up every application like imagine this imagine this scenario you have all these folks who are using like let's just say we'll call it your standard node.js runtime whether it's on a serverless function like for cell or it's like on your own server thinking about a world where you could basically just swap that out to the bun run time everything gets faster and could help eliminate cold starts and potentially decrease your costs as well too like that's that's absolutely fascinating and I think that's a world that I'm really enjoying the The Innovation here I'm so mad I could not convince him to call it the button time I tried for like a year and couldn't get him to sold on it should have been fun time uh I love the yeah I love that the name isn't too serious you know on the like oven for the company it's fun it's so clever yeah I bun is named after my good friend uh kept's bunny bundle and I was really pumped to get that piece of inside info as early as I did and I'm lucky to be the one to share it because I think it's so cool that bundle's actually named after a bunny that's funny what is it about people named Jared where they're like we're gonna make JavaScript faster with a bunch of weird native languages with Jared polymer and Jared Sumner both going absolutely crazy and building all this stuff something in the name it's got to be the name has to be 100 there's some Jareds in the chat just like feeling to rewrite something and go and rust like they're ready go nuts I I did actually get some interesting phone Twitter and I don't know how much you can speak on this but I was really interested to see that turbo packs being Rewritten from go to rust mm-hmm yeah part of this is so for I guess maybe I probably should have explained this when I mentioned earlier but um well quick plug if you haven't seen Theo's video on turbo pack go watch it because it explains this way better than I will um basically turbo pack is a a new version of a new bundler essentially but it's not like webpack because it is using the ideas from Turbo repo which essentially is very smart about how things are cached um it's it's incremental to the core basically and turbo repo written in Rust Eric Trevor repo written in go and uh turbo pack there's this like merger there's like some Rust code there's some go code so the future is I think always about unrest I think they want everything to be in Rust I think that they like go but I based on the the Rumblings I've heard I think they just prefer rust there's some you know very very specific details I think in you know the the complexities they've ran into building turbo repo um I'm sure Jared would be happy to elaborate more on but yeah it's pretty interesting yeah I definitely need to have him on the show I know he plans on going on primagen's show at some point too to talk about all this I I think caching is probably going to be the like the same way that edge was the buzzword nobody understood for the last three years and is now kind of being dropped I think cash is going to be the next one where like caching at all layers cash you can build cashing and Dev caching in prod caching responses caching Pages caching HTML caching images caching like packets of videos like I I've said this for a bit I feel like versel's role in the next five years is going to shift away from the like web build company to the internet cash company yeah it's kind of funny like it's basically what a CDN is it's like a really fancy cache that you know stores all your stuff around the world and then you think about this world with a remote cache so right now turbo repo it's like hey I run a build on my machine or if I run a build in CI it's like just reuse that work it's fancy cash right now imagine you took that and you applied it to the turbo pack world where it's such it's so much more fine-grained it's down to the module level essentially it it knows it understands this graph or tree of dependencies and it's like okay well this part didn't change so let's catch this part we'll go put it on the remote server that means that when Theo thousands of miles away decides to like you know npm install their dependencies or or do builds and do bundling it's like just be really fast yeah I there's so many things that get way faster with caching not just because caching means you don't have to do the work oh the camera overheated again I need to get you a better battery I know I'll just flip it back off and on but I'm listening yeah yeah well the other side of caching that I think is not as long as you said also if this goes into the edge like yes it's way faster but it also can mean less work being done which is also cheaper like one of the things that I'm really excited about Edge run times and also more granular caching is that I won't have to do as many queries and compute as many values because I have those stored in a CDN somewhere and I'm curious what you think the role is both of like the edge run time and database companies as we move away from a world where like data is your problem on every request and instead data is a problem you get to kind of choose when the problem happens yeah I think um the role of edge compute and how it interlaps with data persistence is like one of the most I I know you understand this well it's it's still one of the most um confusing topics I think right now for a lot of folks uh in in the space because you know I think part of this is just trying to understand what each technology is best suited for and also when it's not good for something so just because you you hear you know Purcell or you hear myself talk about like oh this Edge compute you know you cannot have cold starts it can be cheaper than you know traditional Lambda function you're like wow that sounds awesome I want to I want to do that for everything well that doesn't necessarily mean that you need to deploy your application to every single region around the world when your database is like somewhere in Ohio or somewhere in Virginia right it's probably going to be worse if you do that so trying to help bring folks along for that journey and understand the the trade-off space because I think the reality too is like like having truly Global replicated data it's it's gonna be a lot slower than I think what people think and it probably is overkill for a lot of applications um kind of it's funny it kind of comes back to caching too right like maybe you actually just want a really good cash uh it's basically read replicas right in front of all of your all of your data um I think the the part that's interesting for me is the difference between the run time in the actual underlying compute because if you think about all of these Edge compute providers as essentially a more streamlined version of node.js it's kind of like what bun is right it's just like a way faster version of node.js it's It's a improved and enhanced runtime if you imagine if you take that for what it is and you decouple it from the idea of a Lambda function or some kind of edge compute and you say hey I'm just going to use that same runtime anywhere it could be in a single region it could be globally it doesn't really matter it's just the runtime is the thing that's helping me decrease my cost and get um you know no cold boots then it starts to make a little bit more sense but it's the overloading of the word Edge I think too much Edge yeah I I agree with the too much Edge but I don't fully agree with the like it's easy to make things worse if you don't Edge correctly I I can see why that would be a concern compared to several especially like around the data stuff but like cold starts are the slowest thing in our app by far for picture like before we added Prisma or cold starts with like 400 milliseconds now that we have Prisma we have to connect a cold start request for the home page can be like a second and a half plus for all of those things to happen and go through when I move over to using Planet scales like database.js and fetching that through the edge through any of the many like easy to access Edge runtimes that goes down from over a second and a half to like three to milliseconds and that's almost entirely cold start in connection times for me the value of edge is not that it's way faster because it's closer to the user or there's less Network distance it's entirely the warm start cold start time difference as well as the like really it's just that honestly it's just the cold start difference like being like a warm start and not after having to worry about like the time it takes for a Lambda to spin up in and of itself is so powerful and then not having to spin up a database connection instead doing that through something like http lets you skip a lot of the things that are actually slow and like when I watch the databases talk at next JS conf or not nextconf at uh jams.com where they had like the panel with all the database people they're like queries are slow for two reasons your network speeds and distances and your query times no my queries are slow because of cold starts exclusively yeah the cold start problem is real especially if you're building at scale with like a lot of Lambda serverless functions um it's a it's a great architecture but it doesn't come with trade-offs and I think um the exciting thing about Edge to me is our Edge compute is that while it does have other trade-offs notably like compatibility with the rest of the ecosystem and like just like you're essentially you're restricted on the amount of apis that you can use yeah you can't read from the file system right um while that is a trade-off you're making for a lot of front-end to back-end type applications it's like I'm just doing a fetch like I don't need the full featured runtime I just need the the very light version of the runtime the other interesting thing here too this is not this is not real yet but imagine a world where your framework figured this out for you you know if I'm using the things that need the full runtime it would be great if my framework then was where my infrastructure was then aware of that choice for my framework and it would use the full runtime if I'm only using the bare metal stuff like if I'm only using the just a fetch to plant scale don't don't spin up the entire node.js runtime like I don't need all that that's just overhead at that point I don't want to have a cold start my concern with this being automatic is how easy it would be for someone to install a package and accidentally put themselves in like a much slower environment than they were in before because like by default everything would be Edge or static cache but then you install Prisma or you install like a redis package that does use HTTP but it doesn't specify that properly in its package Json so once we instantiate it the compiler runtime whatever assumes that we need proper node for it and then it gets thrown in there on top of that I've already dealt with so much thrash about the difference between the versel edge runtime and the serverless runtime for API functions in terms of what data they actually give me and how hard I had to hunt to find how to get an IP address so I could rate limit on a versa Edge function these are all pain points that make a lot of sense when the goal is to draw these hard lines between the performance targets of different solutions like static is one section Edge is one section Lambda is another I don't know how I feel about the framework trying to intelligently move between those based on my code when what I would rather do is it yells at me when I'm hitting one of those lines makes sense yeah I think that's valid that's why it's mostly just an idea it's mostly a moonshot but I think there's a way to bridge that moonshot with kind of a much more pragmatic suggestion that you had to something that's just trying to help folks fall into the right uh the right performance choices by default and educate them along the way like just so you know if you use this package or you use this runtime like this is an explicit choice that you're making um and how that pairs with your infrastructure I think there's a lot a lot more we could do there to surface that absolutely agree and I'm really excited for the future of how versell plays with these things I've said for a while that the best experience I've had by far the playing to Edge is the work versaille has done both with like the builds uh what's the name of the build API it has an interesting image oh build output API yeah API yes super cool stuff I've seen a lot of projects taking advantage of it the easiest way for me to deploy my Astro projects to the edge for weird benchmarks to this day is without question versaille and I'm really excited for a future where people who know which decisions they want to make can be can make them easier but the framework also guides us to the best possible decisions I've had you for almost two hours now I appreciate it a ton I don't want to hold you for way too long but if you're down I'd love to open it up for questions a bit from the audience see if anyone has things that they want to ask about yeah I might have to turn it on and off again but the chat's been on fire there's been some some funny funny comments in here but yeah I'm definitely open for for hanging around for some uh some questions from the chat get us questions nerds I see a good one from Santi already uh any thoughts about the two group or about the groups of Frameworks one being loading data outside of react versus loading data from inside of react yeah I think um I think the larger thing there is also more than just a a remix specific thing it's like Frameworks that are trying to be it's not really Library I guess but like they're trying to be react view uh agnostic we'll call it library for the sake of this discussion could apply to whatever you want to use um does well versus others that are specifically for um a certain Tech stack like if you're using next it's you're choosing react you can't swap it out to use view if you're using next you're choosing that you want to use view for example um I think it is really interesting The Innovation for some of these uh like the Astros of the world who are like yeah actually you can kind of flip in and use whichever one you want I think I I think I saw an after you belt or maybe it was someone else that had like I think it was your like Benchmark where I had like a bunch of different uh you know it had like felt and View and react all in the same Master app which was pretty cool pretty interesting um it was actually I think that was the next app at the top was like the top thing and then I like rewrote a bunch of URLs and had a mono repo that deployed like five other things underneath the goal there was specifically to Benchmark the edge runtimes for all these different Frameworks to see how like how maybe like the P95 deltas and things were for like response times just be refreshing locally on my laptop I think the larger thing here is that there's a lot of patterns in building web applications that don't need to be focused specifically on the Implement implementation detail of your rendering syntax and engine of choice right so how you think about um you know data fetching and routing there are ways that you can do this that make it you know somewhat agnostic to what tool you want to use under the hood are there trade-offs of doing that versus it being more paired to the underlying solution yes but there's also advantages of having that portability between a react or a view or a spelled I think um the tan stack is doing this uh very well so yeah yeah I will say it's funny that people what are the things that has frustrated me is the amount of energy people put into saying like versel is trying to own all of like the react ecosystem when a lot of the effort I see is like the next team and next.js is trying to build the best way to do react for sure but the rest of her cell almost feels like it's explicitly trying to not it's trying to do everything else that isn't react next specific so many of the awesome features that versel has are things I didn't have a way to use in next and for a long time if I wanted to use versel's Edge stuff next was not an option and even now next is one of the least stable options for me to do Edge runtime things if I really want to be deploying my applications to the edge right now the way I do it that is the simplest fastest and most reliable is through Astro on versus Edge and it's always been funny to me because like what you're describing here around building things that aren't framework or like react specific that is what versel's part of this is to like versel is building the platform that other Frameworks can use on top of it that like obviously you're building it because next needs it but you're not building it just for next you understand the problem next has better than anyone in the world because y'all built next but you're not building a solution for next you're building a solution for everyone yeah and I think The Primitives that we release have to be something that everybody can use that doesn't like often you know the other Frameworks or the other tools or libraries in the ecosystem are going to influence that as well too and you have to bring that along for the journey it can't just be you know just a an xgs thing like for example like the build output API which we talked about it's kind of cool how could basically make my own framework and with my own syntax way of doing routing and data fetching and I could deploy different cell like that's that's cool yeah I absolutely agree I'm getting a tiny bit of lag on your end uh let me see if I can just lower your resolution temporarily as a fix for that locally don't know if it's CPU or network but what's my lack of cash for my camera I need the camera God I you're on a Mac I'm assuming I am yeah the Mac AV layer is just increasingly scuffed every update there was a recent Mac OS update that I just the amount of support questions that we've been getting has been absurd and almost all of them are because mac o has changed how camera permissions work it's just yeah so much of my like most of our bug reports are windows breaking being people on old versions of OBS and Mac permissions changes are literally like three quarters or more of our support like requests foreign makes sense I'm not surprised av's hard that's actually a question I have and we touched on it a little bit but the the role of spas in this ever-changing world on something like Ping for pretty much every route on PING the page directory like page the scaffold is meta tag data a tiny bit of like maybe like a top nav and like a scaffolded load below it but we pretty much always in the page directory itself do a dynamic SSR false import because so much of ping requires the navigation device because I need to see what cameras and webcams you have or cameras and microphones you have I need to be able to make a websocket connection like pretty much everything from not root down but like first like top component like three components in from that point down I need to be on client and next lets me do this pretty easily right now use client is a okay but generally speaking I often feel like I have to opt out from next really early and a lot of the patterns that next JS has don't end up benefiting me as a result like if I want to have a server component below something that needs camera data yeah I'm curious like I I touched this a bit earlier with like the where does next take over past page load but I'm curious like overall what is next stance on single Page Apps and me basically treating it as a way to load data into my spa rather than the framework that controls how my app works yeah I think um this is a an evergreen saying but I think Rich Harris had a good take on this I think that that almost always holds up but his his basically his whole idea behind transitional apps or whatever you want to call it of just like yes there's really good parts to Spas yes there's really good parts to mpas you can have both we don't have to like pick one or the other and I think the best healthiest way for this to evolve is just to take the best ideas from both and try to build a solution that kind of is inspired by both so for your for your instance and your example like yeah I think it's totally valid if you want to still build a basically just a full spa but it might use just a few of the NPA features or the inverse like it's like basically an MPA and it only uses like Fast client-side transitions like I think that's okay I think that the key here is giving that choice to the developer like let them decide maybe they want to turn off link prefetching for all the links and they can use that prop and just say you know what actually I don't want any of that I just want to just do a full MPA I lost you a little bit at the end with the I'd rather I might just want to do a full MPA bit but I think we got the general message I yeah the the Network's two hours in my internet is like no we're good internet CPU camera everything starts dying two hours in anything we didn't touch on that you wanted to talk about not Tom ahead I mean thanks everybody for chatter in the in the chat uh lots of good questions if I mean if there was something blatant that I missed feel free to to DM me and I'm happy to answer I'll have to come back on too yeah please do if next time you guys have a big release I would love to have you on to show us everything you can about it if anybody isn't already following Lee I am spamming his Twitter in chat he is a very good person to follow I have learned so much from following him over the years we're gonna wrap up this interview that does not mean the stream is over I'm going to BRB for like two to three minutes run an attitude but we're gonna come right back and we have some really big announcements coming so make sure you're here because the T3 Stack's about to get a lot better some cool stuff coming soon thank you again so much Lee for stopping by anything other than your Twitter that we should be shouting out your YouTube or um no Twitter's fine I think it's all linked on my site if you want to check out my videos I just put a video about uh using fonts in nextgs today which is pretty pretty neat so check that out but yeah thanks for having me it's been fun happy to do it again sometime thanks again so much I'll be right back guys thank you all see you in a bit




## STREAM VOD REACT NATIVE VS FLUTTER - LIVE CODE WARS W ME LEARNING FLUTTER - 20220807
cool we are now live on Twitch and YouTube up y'all you can stay not beb on your stream if you want to oh I can okay let me let me try that cool I got to send my Discord notification let everybody know that this is alive and sharing the Tweet the ad everyone has been sent that is everything cool sorry for the absolute chaos y'all I uh for those that don't know uh made quite the oopsy with create T3 app the app that we've worked really hard to make it easier to in a project we accidentally deleted the repo and lost over 4,000 stars all of the issues in history thank Christ we just got it all fixed but I've been very stressed for the last like hour and a half pumped that we got our all of our stuff together quick and that Luke's still around and was able to not only like you're hang out for this but also do some research on my behalf super super helpful thank you again so much both for this and the awesome opportunity to do this show want to quickly introduce yourself to the crowd Luke yeah the super short version is uh my name is Luke I am a mobile software engineer and most of my career recently has been working in flutter um I have messed around with the react native a bit maybe three years ago so I'm kind of coming at this fresh and and I asked Theo if he wanted to do um a little collaboration on Twitch where we would go ahead and build the same mobile app and he's goingon to be building it in flutter and I'm G to be building it in react native because why not make it as chaotic as possible seemed like a good place to start yeah it I God I want to make sure everybody gives the most massive levels of respect you possibly can to Luke for this because I have not been great about my interactions with the flutter community and he took that as a challenge to prove that that the community does like know what they're talking about and has real problems they're solving what their [ __ ] like I have massive respect for Luke he did a response video to my original like flutter Is Not Great rant that made me reflect a lot on my own way of thinking about it I there is no person in the flutter Community I would rather have on the show to do anything even close to this and I am genuinely so hyped to be doing this so everybody please go give Luke a follow please please lurk in his chat as well throughout please help him with the react native stuff and God please be kind he is doing something insane here diving into the webdev like elitist [ __ ] Community to do something like this and I have the most massive level of respect for him and if any of you say anything even kind of questionable in his [ __ ] chat you're banned from both so seriously give him all of the love respect and help you can and be cool because this is an awesome thing and I'm genuinely really hyped on this so this is going to be awesome I'm I'm also really looking forward to diving into react native again because I remember really um enjoying it the first time I used it and and I'm really interested to see how it's changed or maybe how it's not changed we'll see yeah I I hope that you will be pleasantly surprised I hope I will be as well but I will admit I am quite scared at the moment I also didn't have a time to set up my stream setup at all I never use emulators for Dev ever I hate them but I don't have an easy way for me to screen capture my phone at the moment so I think I will be this one time using an emulator as well actually I should ask you your thoughts on this Android or iOS for Dev for flutter like is it even enough that I can use my preferred platform of iOS or should I just go Android you can use either one um and but I personally prefer to use iOS but that's because that's the phone that I always use but you can absolutely debug on Android or iOS and you'll you'll get you'll get a pretty comparable experience that's really good to hear I will admit that was not the case in react native until recently I I have a pile of Android and iPhones like older phones that I usually use for Dev stuff that I rotate between and I did have a test app set up and working on both my Galaxy S10 I think the first one with the rounded screen and my uh iPhone 7 so I will probably grab one of those in a bit but for now I'm just going to use the emulator uh any other Pro tips for me getting started um have you had any chance to look at the dart language or is this your first time looking at that this is my first time looking at Dart in at least like six or like five years maybe okay so what I would do is I would go to uh learnx Andy minutes.com and find the dart um documentation there and just do like a quick read through because at your skill level you'll be able to get tooled up really fast mentally um to use it that sounds like a plan to me I will definitely go do that also super quick holy [ __ ] Maple 50 gift Subs what you do not need to do that thank you so much I didn't turn jack [ __ ] around Maple you're the like you're one of the reasons that this shit's so cool God I I was talking about this last night in the Twitter space but I I'm really [ __ ] pumped about this community and that things like this can happen that somebody like you Luke can come to be such a cool idea for content and this many people can be in here hyped on a Saturday afternoon like we built something [ __ ] awesome here guys and I'm really hyped this is the exact type of stuff stuff I hoped we could do someday when I first started this Channel and here we are doing like really cool [ __ ] so thank you to everybody who's making this possible this is going to be awesome I'm so hyped should we quickly go over like the rules and plans on like what we're building and what we like how do I put it like the specific stuff that we're trying criteria let's yeah we'll do a quick we'll do quick acceptance criteria so um and feel free to correct me if I get anything wrong but as I understand it uh the goal here is to build a mobile app um we have not specified that it should be both Android and iOS let's just say that it should Target one um of those I'm gonna quickly gonna screen share myself uh hopefully this all works as expected yes it does for once cool so I'm just gonna like sketch this all out in my favorite place to sketch things sure so I'm guessing that you and I are both going to be targeting iOS so let's just say a mobile app that runs on iOS um that connects to the twitch chat API um and then it has we decided on six basic features um and the first two features are pretty boring they are off um using an oo I call it a bearer token I don't think that's actually what it is but it's using um one of those uh websites where it can create a token for you to log into to Twitch um and I've actually done done that already so I do have that token ready for myself um and then kind of like the nice to have which is our feature number two is like an actual traditional ooth flow um and then we also need to be able to render chat messages live and also render the emojis in line um with those chat messages um we also need to be able to send messages and we need to be able to change channels so I think that's all six send messages render emotes enter change channels yeah quick question about the channels um so your channel would that just be uh like hashtag symbol Theo is that what your channel is okay got it should be the twitch URL that you have should be the uh like channel that you're connecting to Via IRC got it cool uh um and then we had let's see here we had some nice haves I don't know if we should include them but as for our discussion I believe it was it' be nice to see her followers and see their B their basic profile um like if you were to click on them but this I don't think I'm going to get to those but those those were on our list for bonus features as well I'm thinking that so before I said like there's three categories of judging criteria I'm reasing that realizing the bonus features is is two bigs so thinking core features look feel bugginess and yeah just general user experience yeah and then 2.5 is like extras yeah so what I'm thinking like points wise like core features we like like 10 of the points come from this maybe eight of the points come from this and then extra three or four points maybe from that yeah cool all right that's fine any thoughts questions concerns on this people are asking who's judging and I think that or Danny Thompson was down but I think going to be busy sadly Danny should he might be able to swing by but if he's busy then we can't force him for sure yeah um I will bug him on Twitter again throughout and if people want to at him or bug him yourselves please do see if he is down I but do I want for a judge if we can if we can swing it I did see somebody in chat that I would really love to pull in uh where did you go I just saw you now I don't know if Mike is still around but Mike is a is an excellent flutter developer and he was in my chat earlier so if he's still around he might be a good um judge to have from the flutter Community very down I saw it's Bo he's a native Dev so he doesn't do iOS or doesn't do react native or flutter so I'd love to have you and Bo if you're down I think you would be a very good judge for this I agree what was his name his uh his twitch handle is ITB K it's Bo oh how long do we have that's actually a really good thing to include okay so judging criteria uh game plan uh I think we three hours from now do three hours from now yeah [ __ ] Let's do let's do two and a half hours and then leave time for judge is that fair sounds good to me so we can get started let's aim for either or two to get started yeah yeah cool uh we'll start 150 we'll go over a tiny bit uh I'll change this to Dev until so 2 three 430 so 4:30 uh PT which is 7:30 where you're at yep perfect uh judging or hard code freeze then uh dumb thing just cuz like this rules helped me in random code contest things I've helped host uh or final State can be either what is in editor at time or a random commit in history so if you were making so that I could just pick the commit or yes so if you did some crazy [ __ ] near the end it's just not working and you have to revert back to some like four five commits ago to to use as your final version totally cool with that okay as for the actual uh judging process uh this one's going to be a little process uh we can probably figure this out a little more on the fly when we're closer to it but what I was thinking was we take turns screen sharing the experience of the app each judge gets to ask three questions all judges leave scores for each section based on their thoughts I yep so like it's features 5.5 out of 10 polish seven out of eight extras zero out of what four sounds right yeah what's the 5.5 out of 10 is that just an example yeah just an ex like these are just meant to be like examples of like this is an example yeah cool this all sound good to everybody any immediate thoughts concerns about this strategy of judging Luke or chat also can one of my mods make an exclamation point Luke command so that we can constantly shout him out oh glassy already got that awesome love you guys add that to my title what is a squad stream oh yeah that was the other thing I need to figure out uh twitch Squad stream I I wrote this in my notes to set this up ahead of time and then all of the chaos happened uh is I don't know how long it takes but we got 15 minutes yeah let's do that quick it shouldn't be too much and it probably won't even be a thing you have to do on your side oh cool start a squad stream add Channel Luke we are competing for the ultimate Glory that's what we're competing for uh oh something went the twitch dashboard crashed when I tried to create a squad stream that's fantastic and I the button disappeared from the dashboard when I refreshed it are you kidding that's the most twitch thing I've seen in a minute I God is there at least a conole error missing field Channel while writing results God damn it twitch beautiful does not look like we'll be using twitch's Squad stream product there are like like free Alternatives uh multi- twitch is the one I like in streams Theo adding you into this okay this is probably the best I'll be able to do L stream link someone asked if we will rate the experience we had while building and I will absolutely rate the experience I had while building I don't think that it should contribute to the score though but I'll just I'll just report it I I say we hold that until after the judging and we figured all that out like the final bit at the end is US reflecting on the experience yeah people want a retrospective it looks like and I don't know if that's tonight or another night but we should definitely do it I think a short retro at the end tonight is a great idea but you had a fantastic idea in the Twitter space yesterday which is in the future we should take each other's projects and try to work on them further from there and I think that as an opportunity to do a retro as well could be really really cool yeah I think that's I think that would be a lot of fun let winners send one tweet from the losers account oh oh that is such a good idea brutal all right I'm done that's fine yep that's we have our we have our winning condition I love that all right I'll be kind is I promise yeah I'm not gonna be too crazy please do be my my account doesn't have a bar you can literally like if you think something's too bad post something slightly worse on mine yeah all right I'm GNA post like Daddy flutter or something like that oh wait you can change the name of the other person for the day for the weekend they can change it back on Monday so I if if you win I change my name on Twitter to Daddy flutter no you'd be flutter s at that point okay I that works for let's do the message I think the message is better let's do the message I'll change the title too just out out of good faith I think that's a hilarious idea all right cool I love this I'm going to take 2 minutes to smoke and refill my water cuz I've barely been able to leave my desk since the chaos started so I will be right back uh if anybody comes up with any other cool ideas or things as we're going let me know oh did you see the multi stream or multi twitch link by the way uh where do I get that from I sent it in your Twitch chat so it's not the best UI in the world but it definitely works it's a a nice way to see two twitch chats at once basically and two twitch streams so you can like hop between them more easily and see what both of us are up to it'll be probably best thing for us but for our viewers it'll be a very pleasant experience to see where we're both at and like how it's going so yeah this is fantastic thank you of course well I will be right back e e e I'm going back to the split view back here so people can see and hear us again I people already giving me high fives for my be right back screen it's so much better than mine I am honestly a little jealous I it's making me realize I need to do something about mine I usually have an excal draw that I wrote BRB on that I switched to because I'm awful that's perfect yeah it's terrible but it works I think it's perfect it's like the perfect software engineer solution yes my my OBS rotates between like really correct professional setup to comically engineer I grab my exactly what we need grab my crappy old iPhone to see if I can use real hardware for this because it makes me very happy when I can got all of my old iPhone 7 see if I can get you can mirror with quick time although you might already know that I have abused QuickTime mirroring throughout my life incredibly valuable uh new movie the thing I might do the ndi because I have that set up on my network I think I've never done that what is that uh ndi is a really annoying proprietary video uh standard it's like they're they're trying to be like wireless HDMI basically oh it's Jank and it kind of sucks but it like roughly Works me see if I is that an apple thing or is that like a general thing it's a a general thing so I just tried adding my ndi source oh yes it still works oh that is awesome I am so hyped that that still works that's going to make my life a lot easier because now that can be separate from like my screen that's great cool I'm going to have to pick your brain about that later cuz that looks awesome I definitely down I set had a crazy set because I used to try and stream Twitter spaces which was not viable for a lot of reasons but it was one of the things I used uh for that uh people aring that uses a ton of bandwidth on your local network it absolutely hammers your local network that's like the catch but if you can handle that it's good only other thing I think in the next seven minutes I I or a Community member should probably hack out a quick web timer that just has a countdown on the top so that we can put that like on our streams as a browser Source if anybody else is able to find or make a quick like web timer that I can put on that shows everything that way I would appreciate it and the person who said turn on do not disturb I got you two phones this is the one that has all my stuff signed in on it actually good call I'm G to make sure I don't have my Twitter signed in here because I used to use it sometimes for spaces I'm pretty sure if I do it's going to be my ALT accounts oh nope I have my main on here wow I I just opened this phone I haven't opened Twitter on it for so long when I did I had 1,600 followers and it just updated to the 16,000 followers that is funny to see have I really not done iOS Dev for that long I'm upset with myself remove cool that is deleted anybody seven right that's like the ultimate Dev machine do somebody sent like a timer countdown thing what I'm really looking for is a browser Source I can drop in OBS ideally with like a specific time on it that like in a query program that will start the timer actually I built this once uh the O PST do I still have it oh oh it's private uh I'm going to make this repo public just in case anybody in chat is bored and wants to go make this work in the future uh I want to emphasize that I wrote this repo when I was not very good at coding which was to be fair not very long ago weird okay this is hilarious I was changing the visibility on a repo and it is ing me to verify on my mobile phone that's wild it seems like they are actually trying to make it harder to accidentally delete your repo did they end up giving you back your stars yeah I we got real lucky on that uh yeah that's crazy yeah uh it seems like the last time this happened with HTT Pi where they lost 54k stars and wrote the blog post and everything about it it they yeah yeah uh seems like they learned from that and have been working internally one of the things they called out is that if you have like Forks that restores go poly and I definitely saw that because it thought that our repo was forked from one of like the random like contributors when it first came live so it's clear that like their code path for this type of restoration is still buggy but the guy who jumped on it jumped on it hard and went and like manually patched up all those things in database pretty sure so huge huge shout out to Martin the director of Dev rail at GitHub for jumping on that on a Saturday and getting everything resolved as quickly as he could I did not expect that especially after the stories I had heard from similar people I can honestly say GitHub is definitely trying to fix this right now I'm glad they're doing too because the htdp piie thing was really terrible yep uh the CEO HTP actually replied and was really happy to see it worked for us but sad that that never happened for them I pasted a timer in there it's kind of ugly yeah I hate all of these let me see if my my stupid thing's still Al if it is all oh no somebody stole the [ __ ] URL from under me are you kidding I'm going to go re let's see how fast I can redeploy this on for I can do it in less than four minutes and remember how it works spoiler I can't but it'd be cool if I can oh no the framework's not other it's oh it is other because this is so old it's a snow pack app [ __ ] me I have to look that up I don't know what that is snow pack uh do you know V the app builder just vaguely see here uh we're in a post webpack era oh I see snow pack was one of the starts of the post webpack era so I see the egg timer one but you guys have to know like this is going like I want to embed this on my stream on the top and all of these have a background color so like I'll show you what this looks like if I put it in my stream right now browser Source paste these really are these really are terrible like this is horrifyingly bad unusably yeah stream browser Source timer okay someone just found something literally perfect uh Oscar m is a legend this is literally exactly what I had in mind you even put you pick a font ah ah this is so good cool so this needs to be 23 oh I believe oh it's got a material date time picker y cool so I that's pretty badass sweet cool I uh will have a cool just made a timer link this one should be accurate to the time that we plan on ending or the uh actual code portion let me get this onto my stream uh add browser source there we go see we got ugly but it works is there a way for me to change yeah that's perfect that's not bad actually yeah I can live with this for sure you could you could overflow it on the left if you really cared oh they have like a little customizer for it too this is like whoever made that as a legend yeah this is exactly what I was planning on making honestly is this a flake they made I I wondered about that it's not though uh God it has like it's so material UI that like it's hard to know I know I can tell you how I know it's because when you select the text it acts the way you expect make mono is a good point uh robot yeah I was gonna say the one thing that they screwed up is they not using tabular figures cool how do you guys see our screens you will when we go get started don't worry oh yeah I guess that we are starting now is it time to begin I think it is all right man I guess I'll see you in two and a half hours sounds good yeah I'll probably hang up on the pin call for now but I will see you there in a bit peace okay sounds good thanks Theo good luck yeah you too there we go here goes nothing guys uh let me get that browser Source in on here and I can just read old one add browser I do not do that actually uh there we go cool got a timer and let me add back my ndi source as well cool so I think the plan's going to be I very poorly put the mobile app here uh might have to hide the overlay just so I don't get too distracted by chat and yeah let's get going cool I also just realized that my Max on the wrong display mode so I need to fix that as well also the phone fell asleep which means that the ndi broke start hopefully that'll be good and I need to change my display settings as I do every time I [ __ ] stream nowadays I swear uh mirror there we go oh it's like doing the scaling issues again why is this happening when we have a programming contest of all times at least oh no it's 30 FPS I'm going to [ __ ] puke come on I hate when I'm just going to plug plug it back in and hope it works in like three or four tries why I have to do a 30 FPS stream guys and 60 okay we're good anyways uh let's get started uh learn Dart in X minutes okay Dart is a single-threaded general purpose programming language that borrows a lot from other mainstream languages support streams Futures generics syntactically it looks familiar enough that I'm going to want to classes that take generics what God I hate oo so much I'm going to keep this open in the background I feel like there's enough random o stuff in there that's going to make me want to die that I'm going to try to not think about that too much just yet also think I'm going to use my uh the flutter template app I already made I was considering making a new one live but no uh terminal code t-o uh I have it in here I do not I think I actually made a separate folder for it uh F play yeah LS yeah cool so first question to flutter people in the chat also realizing this is going to be a little hard to see I'm going to quickly add a background to this which is annoying to do right now but uh whatever also uh Maple can you make oh you already made the multistream command [ __ ] yeah you guys are the best color Source don't want this this big and I want it to be black okay and that goes behind there good enough for me cool don't need to see the new release this main extends title is flutter demo so what is the preferred way to run a flutter project I want to be able to hot reload trivially I've seen people that run it from in here uh it's going to fpm there I have this all on my seashell oh uh FM flutter okay I am not going to use fvm because I do have flutter installed the flutter way source launching lib main dart on Def 70 buug okay now signing I had the flutter path removed and FM set but it seems like that was broken cool this will be good in just a sec and it appears that this is now working cool let's do a quick code change to make sure that is actually the case uh this should restart yep okay and if I change this to counter minus minus and I press this it doesn't change but if I go here I press R so how reload now it goes down cool that's annoying but I don't feel like figuring out a better workflow right now when I'm learning the [ __ ] programming language and everything else related so uh yeah let's also we'll make this a little less wide so yall can more easily see things honestly what might be better is for me to no what did my capture card just [ __ ] crash are you kidding okay fix itself uh cool so I guess the first thing should be to install the uh TMI dark package how does one install a package in flutter good first C her question so like a an equivalent of or npm install installing Dart Pub ad TMI oh with flutter add TMI cool import is it okay to just do things in main or should I be doing this in another file rather than should do I have to do this in another file I don't have to good news thank you guys why does this not know that TMI is a thing uh this is different than how it had in the install that makes sense cool and it's not TMI D it's just TMI oh I do I have to do this inside of Something I'm assuming yeah I'll just do this in the main that makes sense is it I'm guessing the rule is you can only Define classes and main functions outside of stuff if so that kind of makes sense uh I know I said it ah yeah I'll use Luke's chat big heady g h e t i perfect yeah I think I'm okay with classes and methods being the only top level definable things uh let's reload that I'm assuming I'll see logs in uh cannot run with sound null safety because of the following dependency that seems not right could not build why can you not build oh no what how how do I deal with that is there a way to convince flutter to not deal or push that or do I have to I have to go back to an old flutter version I can still use unsound how do I use unsound that's the thing I want to do no sound null safety thank you I theoretically we should be getting okay chel joined uh I'm going to go test message woo good news boys that means we're getting messages now let's get these rendered somewhere I suppose uh would the right place to do that be on build of like this method is Rerun every time set state is called so no that's not where I would want to do that uh con my home Super Final okay my homepage state so what we want is there I'm gonna do I make a new file now I think I'm going to make a new file now just so I can comment these things out and have them for reference chat. Dart so I want to yoink just going to yink the whole thing and go crazy with deletions uh Delete definitely delete delete build it'll come back here in a minute const my homepage ah let's all right oh no there's multiple array types uh quick chat which of these should I be using iterable or list for chat messages list okay uh okay so this actually seems like it should probably go in state so I will make a class Chat State it's comparing to this uh okay void increments that that's all that does oh it extends State uh what is it extending what is oh extend stateful widget that makes sense where do I have to import stateful widget from is that from material do Dart how am I able to extend that material okay thank you guys weird that the UI package is where you extend your state from I very much don't like that that that's the first like actual super what the [ __ ] I've had that just feels incorrect can I I change this to chat view I would that not work when it does here oh is it cuz I need to State my homepage State extends oh this is part of this what do I actually have to like manually run things in here this method is Rerun every yep okay good to know uh cool let's handle the connection logic first then uh I have that in the main here I believe cool uh this is in here uh let's have a their client uh for now I'm just G to paste actually can I can I have this be of the type TMI client but not defined yet what I want is to Define that when the build happens the first time and then if it exists don't do it in future times uh cool how do I give this a type Market is late oh does this take an init State because that's the best thing probably in it in it it's not included in learn Dart uh flutter in it State late instead of ve okay in method State okay I think that's the right thing in it state and theoretically this should work and start logging even if it's super unsafe uh chat view extends St widget what's the error in here oh yeah I don't have any of those things uh I'm not going to do anything in here oh do I have to return scaffolds fast uh I really hate the control flow of this like immensely also the thing I don't get is it feels like the state is describing the UI layout here I want state that just gives me data does it have to give me something else too remove entirely just keep scaffold okay red let's go get this guy mounted then uh flutter getting started reading your first I just want to see what it looks like to [ __ ] mount a widget from another file I can guess that I have to import I have to give it an as like so I have an easy example import chat and return instead of my app okay flutter in 100 seconds uh let's do it uh early apologies if the volume's [ __ ] uh let me apps on iOS I can't hear it sadly uhan audio properties HD 60x monitor and out I should be able to hear it though uh output audio okay uh settings Android the web and desktop yeah I can't hear it uh it's super poppy yep uh we will not be able to watch this this way I'll super quickly click the second recommended well 205 viewers nuts uh 100 seconds cool I'll let me studio mode window cool doing this for now far from the best thing but uh we can at least watch it quick iOS Android the web and desktop at its core flutter combines a high performance Graphics Engine with the dart programming language in development Dart provides full type safety and stateful hot reload to help you build reliable apps quickly in production Dart compiles to Native machine code which means your graphics will render beautifully on any platform install flutter then run flutter create to create a new project now open the main Dart file this is where you build animation scrolling responsive layout and in flutter is a widget this method returns a widget and its children return widgets and their children return widgets giving us an expressive declarative UI structure which you can easily Traverse using flutters awesome tooling whenever the input data to this widget changes flutter will rebuild the UI by calling your build method stateless widgets are immutable and don't have any internal data when you have an interactive widget where the internal data might change based on user input you can extend a stateful widget properties defined on this class can be reactive for example we might have a counter that starts at zero then in our build method we have one of flutters built-in buttons that calls a function whenever it's pressed it increments the counter by calling set state which tells the framework that the widget data has changed causing the UI to reender with the latest data you can now play with this app on a real device using the flutter run command that's cool and all but let's make some changes we'll go back to our source code and center the button on the middle of the screen instead of writing code just click on the button and hit control shift R then wrap your button with a center widget next change the color of the button and notice how flutter previews that color directly in your IDE now to hot reload the app simply Type R into the command line it only took a few millisecs to build a new experience this has been flut did not show me how to mount a widget in a widget which is the specific thing I was looking to do uh assuming okay my app extends stateless widget uh I don't know how to get this do I have to export so I just give me a really quick remove const but I had const originally no bad advice how do I get this there or am I I'm so close to just pulling all of this into the other thing an auto Discord call okay okay I will Discord call you right now Auto uh [Music] Auto yo yo yo you're gonna come in for the assist here yeah yeah okay uh you're it's it's a lot simpler than you you would think I think it's been a while since I've worked with the flutter but I think if you import the file um mirrored if you just import the file then if you scroll down like chat is trying to get you to replace the full app with your like think of chat. Dart as a component rather than a app that's what I wanted to do originally yeah you don't want to have your chat view in there you just want to keep my app yep and then in here widget build return is this where I would do it or uh no you want the material app because that's like the like that defines the colors yeah so if you if you go to the um like can here you have your Center and your column if you just replace that column with a chat view then uh it should work and I to get all the props that it's getting past yeah exactly uh uh prefer cons yeah and flutter likes trailing commas because it makes it prettier where am I missing a trailing com uh after the chat view there you go um and if you go yeah if you go into chat. Dart uh you have final string title there up at the top so just get rid of that because you don't need to pass any variables in and then you also need to get rid of it from here in the Constructor yeah uh does this need a key still is that just for like how it's keying things internally uh I don't think you I think the key is optional actually yeah so you don't need that at all um and now it should render now go go back to the chat I want to explain something real quick about how the um the in it State and stuff works so think of think of the build function as like the bottom part of a functional component and react M like that's that's like the the return and then that's the jsx exactly um so you don't want to scaffold because a scaffold comes in with like a built-in like the the title bar at the top um so you probably just want to column there I think because that because if you're going to render like a column of chat messages uh column and then children um and then children would be uh you I foret you'd like map the you would map your messages into um yeah for now I'm just going to do can I just put text here like hi uh I think You' have to wrap it in a widget but I think there's just a text widget yeah it's just called text and it wants it to be consed probably uh the the widget to be ConEd yeah about a missing comma that's semicolon string what's the scroll down what's the errors throwing uh uh oh oh yeah you have to put it in a in an array because it's a a column so it takes multiple children ah so can I just do array or to do uh just just a square brackets square brackets okay yeah there you go and that's a this semicolon s me call cool there you go is there does prettier work for this and will do things like that for me uh yeah I mean I think Dart has a formatter but I don't know if it's called like Dart fmt probably I've never I don't know oh there you go we have texing finally good [ __ ] thank you so much yeah no problem let me know if you have any uh other questions of course yeah I don't know how much you'll be lurking in chat but I appreciate this immensely think from here I can make things happen all right peace peace huge shout out to Auto for the dive in there and the assist needed that immensely uh I removed the connection from in here right just want to make sure that the messages I'm getting in terminal are indeed coming from that they are cool it looks like I'm binding twice at the moment or it just has a stale binding oh yeah it has a stale binding because of the hot reload uh how do I do a harder reload what's the key for that f5r Big R Big R sounds correct cool now we have joined chat let's start posting messages uh client. on just want to append this uh set State current come on co-pilot is that not a thing update list remove the current okay uh just try that for now typing is hard I just do it if it's that easy I'll be pretty impressed and then in here I want to do is there a map text E it's an iterable okay list view. build is what I need uh it seems like list view. Builder list view Builder flutter oh a two list at the end we'll do it too no not too many friends being closed I don't need that okay cool that looks right let's refresh not rebuilding uh well rebuilt but it's not showing the text uh iterables for lazy uh so I converted this to a list uh remove the brackets around text need someone there to send a message I'll just go to his [Music] stream still not appearing [ __ ] okay text to list yeah I could use this room I we were trying to use the other room but yeah I'll switch that to here just to make it a little easier it doesn't refresh State okay I'll hot restart hopefully that'll do it wo we got chat messages appearing good [ __ ] cool so we have a lot more work to do but at least messages are now appearing on my phone oh no it errored some way bottom overflowed by 150 that is okay first huge flutter win this this is a massive flutter win having a call out here that says the amount of overflow that's happening this would have saved me hours if not days of time in react native uh that's a cool thing good [ __ ] wrap it in a single child scroll view that sounds correct uh single child scroll View and what does this take oh wrap the column single child scroll flutter scroll view would it be a scroll view or nested scroll view okay oh so this has to have child that's dumb uh let's in a hot reload or hard restart it spam my chat boys need to see if it uh is scrollable now or not probably make the text larger so it's easier to see if we're scrolling or not yay it Scrolls now cool so if y'all have learned anything from me should be commit often cool now that we have that working I tryde if I want to start polishing the UI now or if I want to clean up the state a little bit so that I can do more with the UI like my next immediate thought is rather than messages just being a list string I want this to be a custom type uh can I pass a like generic type here that's like name String body string or do I have to like make a class that is just that I have to make a class just to put those two things or right hey the the quality of my source isn't what I'm being quizzed on here so oh a map will do this uh a map will be key vow but the key is a thing and a straight or and The Vow is a thing class message uh [Music] there uh name ver body e name e. message or e. body and here I want to message. add message name uh do have to do new message or something const message use Constructor I have to create the Constructor [ __ ] God I hate I think there was an example of that in here uh flutter Constructor oh are you kidding if anybody thinks this is defensible no uh maybe if I passed whatever the type of this all was but I'm not going to do that uh what message required this.name required this. body uh okay message this this do name this. body and then not do this I not need those okay there we go wrong tab list oh that's because it was a soft reload I see why they don't Auto hot reload because the HMR and flutter is awful [Music] cool now we have way better manage or ability to manage these so the first thing I want to do is like I guess the equivalent of a flex box here where there's uh like left and right or even just a Max width what would I put here to to like what's what's the base unit the equivalent of like a div that I can [ __ ] around with uh inter like what are the core widgets is there a list of them somewhere row that's what I want container you sure I don't want row and this prob needs to be an array as well no okay row is flex box so I want row text actually I do want that and then comma text uh cool the rows appear to be working I can use row but container is better I don't so how am I going to handle the Overflow right now where things are going off the screen WP row with flexible I'm also realizing how obnoxious it is to specifically in things like text chat uh break things up like that and still have scrolling work over so like I'll just excal draw quick like Theo this message is too long like doing that overflow if the window's only this big sucks ass especially if I want to make Theo like different style or different color so I think I'm going to cheap out and not do that yet uh I hate not doing that yet but I can't justify doing it yet is there padding no how would I add padding to this just container it child child scroll view what's not getting closed it works here oh I see uh that's Prim needs to go there uh container child can I padding in here then no how do I add padding padding is widget okay what the [ __ ] is container even for oh padding are you kidding it's just that I'm missing the comma there what is this upset about sort child property last okay okay now we have padding that makes things look a little less bad next thing is I want to make the text bigger is there a size the style include font size I'm assuming flutter text Styles style text size size 20 God you have to why is everything a class uh text Style cool I forgot a comma use column instead of row this look good is going to be the hard part for sure I so my immediate like first question is is there a way in flutter to do basically the equivalent of a span where I have a text Style with like color on it so back to this example like if I wanted this to be have different style properties maybe it's bold and blue Rich text Rich Text flutter okay yeah this looks right first I'm going to commit uh let's not make this this I'm going to quickly comment this guy out argument iterable cannot what I com out the do two list as well uh good call uh yes I did I'm gonna [ __ ] it just delete this all is I I get history uncommit or uncomment uncomment okay now I'm just going to reconstruct this because I am being dumb uh instead of row here we want is delete that I'm just gonna like copy like piece by piece okay cool that is now workable so text is text span and I'm not going to pass this text I'm just going to pass this all right no it's not this is what I want to pass other things to and want cons for this what is complaining about what the [ __ ] is it complaining about was the con okay the cons was too low that makes sense kind of uh cons this con con being so different than it is in the programming language I normally use is going to drive me mad what what is that auto indentation that goes in more than the children what what what God this is so awful am I forgetting trailing commas somewhere where am I missing a comma your think like opens like messages. map is opening line 62 okay that that one wait but there's a DOT two list can I do a comma here and then do two list or does the comma go here what the [ __ ] if somebody wants to send me a link to like quickly get prettier working I will love that but any another comma here God is it just like every close pen needs a comma so I need to put one here too I hate that so much so [ __ ] much okay this we don't want to have be bold we want this to be e do name and this is ebody text. body uh this won't be Constable soon uh something I want to do is print all the user State quick cool nothing's rendering anymore [Music] no okay uh we have badge info badges okay color that's what I'm looking for okay let's add that to the class here V color USIC state display name and I need to add that to the init as well cool let's figure out why this isn't rendering maybe it's the color of the text it defaults black so I don't know why this is not rendering extend text style from context I I am very lost as to why this is not run or running look at the example code it has the style uh what what the [ __ ] what the actual [ __ ] [ __ ] I what I hate everything right now okay so how do I add a color here do I have to this can't be a cons CU we're passing something to it now see if that works nope okay do I have to convert this somehow like hex color how does one convert from a hex like hex color flutter hex color I have to what for this isn't going to work though is it like there's no way do I like how do I put the your color it's a dynamic thing guys hex color is not a real class unless I go yink it from here so I guess we're making our own custom hex color class okay what am I not closing anymore what am I what what equal where string color equals first where would I put an equal in here oh what the [ __ ] that sound oh no I'm sorry guys I think some random timer yeah I had some timer in the background so sorry for the beeping uh are you the TP example in the answers so do I have to to make it every time like I have to instantiate this are you [ __ ] me I color is it close first text span pars they are oh I'm missing one text span there we go thank you don't know why most of y'all were so useless but shout out to the one person who actually recognized what was wrong there look at that we did it uh what's what what the [ __ ] we're not using Color guys because flutter is bad we will not have color [ __ ] Christ I'm genuinely a little upset about that okay now I need to full with this text span somehow is there like a a full align left maybe uh can I just align left how does one align text on the parent widget is it rich text the parent widget remove center from the main Dart okay yeah I can do that that's the quick solution thank you for giving me the hack way out of this uh body what I put here instead uh container no okay we'll do that for now okay we have that uh how do I full with this I guess I should fold with this column so two list uh and lots things other than children first so is there a style a column has a line H how do I I need a full width main axis size is this like a number main access size. fall the fall or Max that did something it wasn't the right thing but it was something cool aligned I think and heex wrapping holy [ __ ] I have anything anything push it to cool so next is autoc scroll I'm down to do this the ugly way where whenever a new message comes in we scroll to the bottom I'm assuming I'd have to do that in the set State maybe flutter auto scroll is so easy I should probably do the other things we don't have auto scroll as one of the tasks so I might cheap out on that for now let me sneak in the uh the input at the bottom here uh what I want to do is in this column add I guess I should do one more column on the outside children what does that matter about where does this column close oh uh it closes there nice Reas I'm doing this is I want to add an input here God I hate that they add the like imaginary [ __ ] comments to tell where things close I have the flutter extension guys I have the flutter extension I'm not using their weird like okay uh I want an input so flutter text input field create and style text Fields most commonly used for text input widget uh text field input decorator border outline input okay so how do I scroll oh I have the scroll view too high uh let's and one close here it's unnecessary no do what I just did okay so I want this scroll view like lower what I'm going to do is kill the scroll view where is that end okay that ends here I think cool cool I think that will okay no that's not handling guys if the syntax is so bad I have to start relearning my editor I'm not relearning my [ __ ] editor I'm sorry col needed to be in a single child the column is in the single child this column does so I want the okay the thing I'm trying to do is make it so the chat widget is visible even when chats are scrolling through I want the here's what I want I want this to stay visible as this is scrollable what is expanded wrap single child scroll through with expanded wrap the column or the did I wrap the right thing here looks like I wrapped the right thing [ __ ] yes thank you that's it cool now we have an input field it's not going to do anything just yet but it's there oh that's cool it moves up and that does nothing because I haven't coded any of that behavior yet also going to go hide the floating actions [ __ ] I really hate the fake comments thing so much this re like it's a slightly different color but it's not enough so for me to tell the difference I bet if I a different theme it might work but I guarantee people who made this theme aren't [ __ ] using Dart has to be initialized in your in it state so we currently can't even send a message because I haven't done off yet we're only connecting to chat via the very default like TMI client connection what I need here is an off of some form so I need to do the like any of the stupid like authorized this sites uh let me I'm going to use a different Chrome profile I have a different Twitch account on here uh let me uh twitch token generator cool yall now have this token that you can theoretically use to send chat messages I hope you don't please be kind let me look at the TMI package does it not have the ability to authorize yet yes TMI JS totally does you have like identity connections you have token connections not having off is a pretty thing pretty big thing to not have Okay uh there's source code for it somewhere there's a way to send so there has to be a way to connect with off yeah here we are it can take a client to a token I thought so how do we use those though would it be the Constructor maybe client nothing seems to use either wait uh get token for the username do I have to use a username password for this are you kidding [ __ ] Christ cool so we can't do that that way uh good to know what are the other features send messages render emotes enter and change channels I think that entering and changing channels are probably going to be the thing that is the least miserable but all these are going to suck really hard oh God I'm upset I'm we're not building our own oath for this no I think that I'm going to like the the thing that feels the most viable is the check at the start for like which where do you want to connect Okay cool so what I need to do here now is create a flow for that that is separate for the channel select and I get rid of all this [ __ ] don't want any of this crap anymore class select Channel extends State don't have state for to extend yet our class selected Channel State extends I do this here this extend State F State I will say having State be like a derivative of the the class like this is so or of like the view class is really strange yeah this where State extends The View it's just like The Primitives feel upside down I I guys I don't know the [ __ ] Snippets okay the sorry not extending the view the fact that in the state extension that the state has to take the view as a property flutter hooks I really want to honestly try this is this viable can I actually get away with using this for flutter hooks is decent I've seen people say decent to great I'm not saying seeing anybody say don't do it uh my only expence I don't necessarily see how things are interacting with each other uh flutter text input hook example YOLO why do I need hooks CU I need State and I can't get my head around their state right now oh show me the okay God that is so much better final channel name equals use State empty string oh oh I feel so much better already you guys have no idea does it need to be in a build method oh yeah it does that's fine uh what's the oh you have to no counter only exist from there the ad over ride has to return something is that what I was complaining about that's was complaining about be a little annoy but it doesn't override inherit yeah that makes sense return uh I'll just return text for now cool uh and then I want this what would the can in here I run logic I'm oh can I in here actually like if if channel name equals empty string return text hi oh there this work cool nice finally something working roughly how I would expect it to delete all these things from here then and here I want to and if that does exist then we want to render I don't get like CU this is returning a widget build is this a widget or is this estate oh extends hook widget St for hook widget I'm assuming okay so this is a widget as well uh I probably shouldn't have undone what I did there let me get stash I want to yink this get stash popop deink that chat page chat View and this is going to actually take the channel in a sec but we'll get there in a sec uh this should return like that and I'm going to want to change here to be chat page instead of chat view hopefully the [ __ ] oh it just extends hook widget even though this one's stateful I guess you don't have to do stateful hook widget cool that seems Tove done it why is it rendering is this check correct Channel name. Val okay that actually makes sense because it's the UST State thing that's fine actually thank you for that uh good call nice [ __ ] yes uh that's huge progress actually uh but I want to do here is now the input uh yeah I me just yink the input from there I'm going to commit this as [ __ ] wrong buttons I don't need to printing this is going to be noisy as hell main body color I wanted to make this so you can input something and it will change so we want to yoink the text field field enter search term uh cool change this to choose channel does this have an on like submit for when I press [Music] enter I shouldn't need a button I should be able to know when the user presses enter in a text field unchanged value set or how do you actually update the value in okay it's looks like they just changed it yeah uh Channel name. value equals value of con on textfield oh [ __ ] Luke send a message is oh no we're screwed we don't have a path for o oh no too string should be con okay why is this upset what I I am so confused ah I think this will work at least theoretically it's going to break immediately if this is working as far as I understand it's going to immediately try and like change the view once one character goes in yes it is cool that is what I thought it would do God that initial state was really strange uh let's is there really no like on unsubmitted here we go the enter that did roughly what it was supposed to cool now I should actually make that do something okay chat extend state so I need to pass in the the init here uh their channel uh when the init state gets called in this guy is probably the best place to do that uh Fair Channel how do I do this in that oh I never gave those things types I suppose uh okay very channel name okay we want to create create can you in it state with defaults now from the state I can do widget. channel name where does it come from oh so not here uh just in this dollar sign widget oh that's weird I really don't like that control flow and stop passing that here okay uh theoretically chat view oh yeah this. Channel I guess this channel name. value that makes sense Theo enter so send a message okay cool I I hate that for some reason something I changed broke the expanded like full width uh expanded oh do you know what it is it's these probably need to be an expanded too don't they Theo perfect this looks as expected cool so we are running out of things to add I kind of want to get color because that that feels like should be viable uh a value should always be coming back what I'm going to start doing is I'm going to also log the color here I don't really care about the message uh Channel display name colon user state color so we're logging those and we can figure out what color was causing the the crash uh color hex color dot from hacks E.C color I don't know whose message that was okay uh a null string okay let's see whose uh message caused that okay so Tony Hart 7's chat uh or message doesn't have a color set so I think the easiest thing is to just put a default here equals and and then uh where do I said here is there like is there an equivalent of this from JavaScript no Co Essence it's not mad at me is that a thing please tell me noish call Ence is already a thing that that that will be like my happiest moment so far I actually just closed the app [ __ ] me I'm not using the vs code plugin guys I don't use vs code plugins to run my [ __ ] I'm sorry my my CLI is where my code runs I don't even use the built-in terminal I'm not going to entirely change my workflow right now I'm sorry well whoever had the no color set can you send more messages okay cool uh okay road yeah that through still uh is this not nullish is it not coming through oh is it empty string [ __ ] it's got to be empty string that's what it is uh or there new color equals user state color if new color equals empty string [ __ ] C pilot [ __ ] I did the same thing I keep hitting the wrong hu key okay guys fine you win I pressed F5 and I tried to dictate I'm pressing function F5 and we'll see what happens can I not look at this part could not build yeah we're not using that one and command Tilda does not do it because the debug console is separate no no no and sadly that error was not a immediate that took a few seconds to happen which is time I lost in this contest I hope every single person who's been saying use the editor use the editor use the editor the whole time feels pretty [ __ ] bad right now cuz not a single one of you said by the way you're using no safety so have to do something different looks like I fixed colors can the person who had the like no uh color set yay Tony was the person who was broken it's working now okay uh the next thing I want to do is auto scroll uh let's uh flutter auto scroll okay so I'm immediately seeing an annoying problem wait no the set State lives in here this is actually doable [ __ ] yes okay so in here after the set State I need to scroll to the new message I'm not like reverse true in the scroll view is going to put the top the mosters message the top instead of the bottom clever but that's not how chat views work I need another controller for this I can't just do like scroll to negative one it can't be number of messages times font size because messages can wrap look at the fot message at the top right now course you can't hear me not close enough to the mic sorry too busy being in pain reverse true is just going to flip things isn't it where would I even put that in the scroll view that's even worse see oh wait why why does reverse not reverse things what the [ __ ] does reverse do ah this this works I just I I will admit I am jealous of Luke right now uh C can someone like in two sentence explain what this does guys guys let's be let's be very clear about this see when new messages come in they appear at the bottom right now new message appear on the bottom I'm commenting this line out and hard reloading let's spam up chat one two 3 4 five notice how the messages are in the same order reverse changes where they start from and also introduces weird scroll patterns as well it doesn't reverse scroll Direction it reverses where the starting point is for the scroll container it's like justify Flex end with builtin side effects what I hate this so much I guess emotes is what's left right because I can't send messages I I really don't feel like doing messages uh pictures going to suck it's going to suck for so many reasons oh so I made a good point in chat that I'm confusing the column from the scroll view the thing I'm reversing is the scroll view not the column within it because the scroll View's child is the column so it's reversing the relationship between this and this that makes a little more sense good point I still hate it but that does make more sense reversing the column would do the thing that I was thinking of initially yeah thank you guys I I honestly can't rate darkart CU I don't know how much of my frustration right now is Dart versus flutter I is there like an ooth package because I can get ooth working it just won't work for chat which does still technically qualify I said o I didn't say the O has to let you send messages wait guys tell me that this is not the worst idea ever that I'm totally going to go do right now what if and hear me out we embed these behaviors in a really quick next app and then hit the end points from inside a flutter instead because I do not want to figure out the O right here I could throw together a Lambda function and then pass it the things from the app directly I think we found our way around this boys back to JavaScript I why does this feel like trouble guys I need this this sounds like a solution to the problems that we are currently running into is what it [ __ ] sounds like to me so let's get this one boys anyways uh let's create T3 app My3 app uh I should give it a real name uh hacky chat send typ script I could get like actual off working on this yeah I'm going to put next off and prism in here just in case I end up wanting him I know it's going to be annoying because then I you know and I'm going to keep taing because I actually build the UI for it initialize new get so for we'll do the part last I'll get back to that if I have time what I do right now is a way I can post a message that works so but I'm thinking uh uh let's open this I should stop doing the full screen vs code instance it's going to keep annoying me okay so we're going to go in here get and let's Source Pages API chatel dots I don't have an ex sample uh export default uh chat a function I don't have Postman installed are you kidding do I really not have Postman inst on here I really don't have post man assult I have to dash dash casket okay cool found it yeah I could curl for the time being uh curl I this running right no I don't I am a little confused about why that is not working this is the right project right chat sends did I put in the TPC I did put in the TPC folder good call I was so sure I went out of my way to not put that there thank you there we go uh cool and if I do uh token equals test token uh I have to Escape that because I'm in here cool that's fine uh res. [Music] send message hi cool I can work from here so I need to get TMI set up in this uh China side like where I want to deploy this I'm probably just going to deploy it on Railway so there's not as much delay ah no it's going to be more annoying I haven't done a next Deploy on Railway in a long time uh I'm just going to get a repo create so I don't have to worry about it later create create a new repo uh hacky chat server I did [ __ ] new repo [ __ ] cool uh now I to do TMI uh God I really wish the GitHub CI was like it asked a third as many questions I always have the same answers [ __ ] everything uh I needed to TMI Js for and we'll have to connect con or import TMI from tmi. Js do don't have types you have to have the channel name by the time you're creating it it's a little Annoying uh o flow token off ah this is identity so you have to have the username and the oo token to connect oh this actually might be what the TMI thing does uh because it did have identity within it so password is probably the oaf pass uh we'll go with that for now uh options I should add username in here uh username is not in options it' be [Music] in identity username password token h is it say how do you send a message want to have an example of send a client. say cool is that a promise as well yes it is cool so if I did all of this right I should be able to grab this guy I should be able to create a URL quick local post 3000 SL API chat hell Channel equals Theo and message equals testing and username equals probably not Theo and token equals this and if this is correct if I escape that I'll be able to curl it and that is not enough I do not feel like making this valid right now Carl maybe F error oh uh yeah good call uh I have that is username error no response from server L 14 okay user [Music] token oh that's be failing did I do anything else in the connect in here I need to be secure true uh let's see if I just comment this stuff out will it work cannot send anonymous messages cool so it seems like there's something about that that it do not like oh I know what it is W that's just coming through cool we can work with this let's uh versel deploy this guy quick and I know there's a chat delay guys so uh yeah we'll test this again quick you'll see it before I do or before yeah it came up literally immediately for me so this seems to be a good solution and now I have to figure out how to do API calls and flutter oh boy uh oh no I hit refresh when it was building I hate when I do that I do that a lot no production oh it's still building okay cool uh if I go and change the test URL here quick let do slashes oh no what why is that oh I know it's happening it's escaping itself oh yeah you're right I forgot this thank you [ __ ] me it'll be up in like 50 seconds or so okay uh if I just go to the oral this way L 404 uh we'll wait for this to build while that's going on uh flutter fetch look like this is the package I need no I need to install it first oh is it already included so I don't have to install it I just Import in the code that would makes sense let's import I guess it is not included by default are you kidding me can I Pub ad for that I like they don't have the command on the flutter DOC for it they expect me to go manually at it in dependencies uh HTTP install there we go okay do a research I have that let me see if this worked yet cool that's working nice the end point is valid and I can run with that uh uh final return so I need to add another on submitted uh where is the input here I this should be its own class I well stop pretending it doesn't need to be uh class message input extends hooks widget hook widget hooks widget hook widget message or ver message uh and then I need to widget build is that what I did in this one should probably just copy this yeah actually I'm just going to copy this like verbatim because it's pretty much exactly what I need here not that guy just this guy God I hate the default scroll behavior in vs code so much it's like hard to put a it Scrolls way too fast always but only actually not always only when you're selecting text for where are we not closing [Music] remove the arrow oh God damn it JavaScript brain thank you for that call out I would never have seen that in my life uh cool that should do it but I need to do the HTP thing now let me see how you do it right [Music] just put this here will it work a string is not a URI do I have to okay can u. parse the URL do I have to import U separately is it a different package oh it's not capitals it's uppercase you or RI and I and I can I just parse oh okay that looks like it's less mad at me uh why is it a there's one more Prime needed cool theoretically this will work let's see the uh oh I didn't reload sad people are saying do instead of HTTP is it better enough I'm dumb this looks a billion times better already thank you okay we'll use this instead this has to be a sync I'm assuming can I do that oh it's after oh cool print R the okay why is that not calling the unsubmitted not getting any prints okay why is the other one working and not this one what see oh am I not using the new widget you are absolutely correct I'm a [ __ ] [ __ ] thank you you might have just saved this uh woo messages sent it feels like it doesn't update this part immediately though or ever even oh I know why because it's not smart enough to like the value here isn't bound can I do that how do I reset a value in an input field here I have to call set State and I just call it and do nothing I need a text editing controller I got a better idea what if I don't nowhere in the guide or the the like or the plan doesn't say you have to have the message clear itself after cool let's see if I can send the actual message I have here now let's reload quick need to hard reload for that one Theo testing a manual message woo look at that boys don't need o to be built into the platform for me to make things work the way I need them to I am incredibly happy with my solution to this problem an xville guy just sent me a screenshot of them hitting my endpoint and it working so yes you all have access to that URL it's it's that's a thing it happens so I think the next thing is to qualify for uh let me just copy paste this okay so we have chat rendered I'll just put X's okay so I got X kind of got this I got that you didn't get that I think we should do this proper so it can count there's no way I can get emotes working in 12 minutes uh anex I did that and it doesn't work because value isn't what the text field renders we need to be able to control the text field and update it theoretically I should be able to send this message again it works nice uh I want to make it so you can input other things quick so I already yeah I committed this cool so what I want to do next is in the same place channel name is a thing I want to also add username and awath token on submit uh okay this needs to be a column then I want consts everywhere do use this is so awful yall need to stop defending this [ __ ] anyways I for the replacement for what uh flutter Emoji so the emoji for flutter is not going to do anything that I need to what am I rapping in curly brace there's a lot of [ __ ] to rap am I wrapping the return oh the if statement cool thank you let's do three of these [Music] username oath token don't need unsubmitted for those uh want this to not be channel name we want this to be username and this guy takes all three as well the requirement was twitch emotes not Unicode I should have made that clear when we planned ahead got 9 minutes left okay uh I need to drill these all the way down here uh user there Channel there I'm just going to copy all of those vs from above sure there's better ways to do inheritance but I'm not going to figure those out right now and then I need the this guy message input does this have none of that stuff pass through oh I can do the widget thing for this needs more stuff there that makes sense Chanel need to follow you username Dov value oh. value cool if I understanding correctly that should work let me put these values in probably not Theo I need an easy way to get an O value to my phone I don't have one uh this typing this OA token in is going to suck incredibly hard and it is still faster than any of the ways I can think of to get this to my phone fast QR code that's a good call actually QR code generator or could I air drop it I could probably air drop it uh no that QR code generat is the best thing why I do Google Images can you okay God the text fields and flutter are so bad do I go to Luke's please work work please work oh am I hard deploying to am I not using those variables why did that not work ah let me check my backend code Maybe know I'm using the things I passed there okay why would that not worky chat hell channel channel name message message value username is username all token is is oh token uh oh no did he get emotes working [ __ ] okay I I have no idea why this wouldn't work test the API in the browser yeah I can do that quick I guess uh let me print out whatever I'm generating here so I can just copy paste that oh it's not URL escaping it [ __ ] how do I URI Pam Escape how do I encode URI and component uh can I just pass these as u. incode uh let's see if that does it I'm GNA copy paste this again cons post URL okay uh from flutter kind of H why is that not working if I local 3,000 it see what [Music] happens my token might have expired it could be that I'm going to hope it's that uh twitch token generator find the site I was on earlier because I closed it [ __ ] okay I'll just use this one instead oh I was using the other browser that's why uh I do prefer this one uh [ __ ] me [ __ ] me I am really low on time UHS Mii connect off check the other this URL oh do I have to put the oath in front was I not doing that do I do that on the server or not uh do I do that I do it on the server okay I don't need to do that here uh that send in his chat error no response from twitch why why I don't no why this isn't working huh if I change it to Theo in my chat I am so okay cool we lose status no doesn't matter uh let's I said that we can go back to an old commit get a dash a I'm just going to get stash that oh did my actual Twitch account get killed that's possible no it seems like my account isn't totally Shadow banned wait maybe it is that message didn't come through my [ __ ] test account got Shadow banned by hand buy a pizza maker at Papa John's just like this one and that one over there oo and even these in the crust eperon yeah I'm sending messages in my account here y'all can't see it because like size of window but uh yeah I'm sending messages in my account here y'all can't see it because like size of window chat but uh let pop out the chat Shadow ban that's why it wasn't [ __ ] working it is possible that this code is actually fine then a bunch of people got the token I've just been showing it on the screen the whole [ __ ] stream I'm get stash popping yeah let's hop on PING I'll I'll meet you there ready on penguin you are somebody you want to go let Luke know in his chat that we're ready to go whenever just needs to join me on PING oh if he requested to join in ping already tell me has to request because I wasn't there and I [ __ ] up there it goes sorry I'm piloting a new testing flow in my room and it's like super broken no this is fine how's it going pretty pretty okay uh yeah definitely fun I learned a lot mostly about how much I hate Dart I learned about how much I hate hooks interesting the only reason that I was able to start making progress is somebody showed me the flutter hooks package that's perfect I probably should have started with uh with class-based components but I figured I would just go ahead and just go all in on on hooks and see how it went yeah I I hooks definitely have like a period you have to like Smooth into them but once you do you can just write stuff so much faster I was lucky in that I got into react about like two or three weeks before hooks were announced so I hadn't fully committed and I was already a functional programming nerd a lot of my suffering here was O versus FP for share also holy [ __ ] I can see that is every flutter Dev Dev expected to know every Niche feature in vs code because the ergonomics of the language are so bad I haven't had that experience was there something that was particularly bothersome uh trying to find the best way to put it other than like chat constantly was telling me like use vs code to run flut or not your terminal use the like light bulb icon use all these Hut keys to auto wrap things cuz I super interesting I type almost all of my code I don't use Hut keys I don't use any weird chicks don't want to like keep learning new things and then forgetting and relearning I just want to type fast and get my stuff done I type at around 150 words per minute I don't want all these crazy tools I gave up Vim for a reason but I feel like I have to develop a whole new IDE workflow to maximize my use of flutter yeah that's super interesting um I've never thought about it that way um I'm wondering if react code or just like basic you know HTML style code um is easier to refa Factor just manually with like a keyboard than flutter code is that's what I'm wondering right now it's also flatter we know for sure the HTML code is flatter that's definitely a thing which is funnyml is not known for being flat I know I know um because like flutter you have all these styling widgets right so you're composing all these styles with these widgets so the tree gets really deep whereas in react native or react you have you know youve got your components but then they've got the Styles as like object so you're doing all the styling in that object so I think the trees are shorter um they're not as or they're not as deep as they are and flutter for sure and I think that makes it easier to move things around uh without using ID tooling yeah I does that check out yeah that checks out I think that it's a lot more visible like one of the really weird things is whatever like the built-in flutter format I had running from like the vs code extension if you didn't put commas everywhere it would indent effectively randomly the code would work but it would just randomly choose how to indent things yeah and that's like always a point of preference right because you know prer for example depending on how you've structured it it will kind of move to like the closest um solution but Dart uh the dart formatter is 100% deterministic so whatever your code is will always produce the same result and so that's where you end up do that thing with the commas and there's like this huge thing in the dark Community about whether Dart format handles um you know long lines appropriately or not they do this thing that I call like the broken ankle where it kind of like does like a weird indent where you're not expecting it to um and so it's definitely like a point of contention but the argument in favor is essentially um a deter like a bad deterministic uh format is better than a good non-deterministic formatter and so that's up to you to decide if you believe that that's true or not um but that's kind of the argument I you can have a deter a deterministic formatter and add commas for me so everything doesn't go to hell though I think that was my big problem yeah there's been a lot of communication about that as to whether it should add commas in for you um but then again it's one of those things where the commas really Define the style so some people leave the commas out because they prefer the broken ankle style um and then some people put them in because they prefer like that really nice balanced curly braces uh like JavaScript object looking style and so that's like how you're supposed to be able to choose I don't know that it's the right way to do it but that's that's kind of the the idea anyway that makes sense I it hurts me it feel like specifically my what I like with formatting tools is they make the code of someone who's new and someone who's old look very close to the same flutter does not provide that right now flutter is so deterministic with its way of formatting that slightly different inputs will have very different outputs and it's by being so deterministic it feels more dependent on the input code if that makes sense yeah I think I can see that argument um what I have noticed is in a lot of flutter code bases at scale is they have linters that are set up to do auto fixes um and some of those Auto fixes get closer to what you're talking about like oh hey there is this missing trailing comma and it will put the trailing comma in and then the format will run afterwards so it's almost like a shim between what you're expecting and how Dart format thinks about things that sounds very much better to me at the very I do love when things like a language or a framework provide a formatter like I was one my favorite things when Elixir did it they kind of copied it from the goang community with go format but there is a step that comes before the way that a lot of these Frameworks consider formatting that just wasn't an experience that I had here yeah no I think I really like the go formatter um my my recollection is that I is that the go formatter was really pragmatic and produced very quite beautiful code um and I don't think that's true uh necessarily in flutter and dart I think you just kind of it's one of those things where you get used to it and then because you don't have to make decisions then you forget about it and that's like the argument in favor um but I I would say that objectively dark code is not always beautiful in some other languages it is always beautiful that's I don't necessarily know if I want my code to be beautiful so much as consistent and that's the the thing that broke for me is there there's a level of determinism where you lose consistency and a level of consideration that has to be wider than just like take input result output that I felt like wasn't here but I I don't want to go just Forever on code formatting especially when you had a very interesting hooks experience want to hear a lot more about what did and didn't work for hooks for you so the problem I was having was when you're chaining all these hooks together um like and there's Pro there may even be better ways to do this right but in my case I was trying to do most things with use State and use effect um and I'm familiar with use effect having the um that dependency array I guess you could call it where you basically feed it with with the things you like if if any of these change then rerun the effect that's how I understand it working anyway um and so I was trying to use use State and use effect to do things like you know let's create this client or let's let's connect with this client um and then when it connects let's set a state that says you know is it connected true and then if it's connected then you know maybe we can you know show a little status indicator that says you know it's connected or it's not um and then from there there's other things you want to do like subscribe to um subscribe to messages and I kept running into a situation where um it wasn't quite working as I expected and chat was actually being really helpful in trying to um troubleshoot this but the problem I have and this is no shade to chat the signal to noise ratio was a little difficult for me to parse it was while I was coding um so there were a couple people who were super helpful and they were able to spot things very quickly and unfortunately I don't remember exactly who their handles were so I don't know if they were people that you planted in there or if they were other folks um but there were a couple of people who were super helpful um and there was a lot of people in chat who were maybe kind of repeating some of the things that you know I had already determined and I just kind of had to ignore them and I just couldn't really you know I couldn't really interact with them unfortunately um but that's that's kind of that was kind of my experience with you know you have a you have a set of these different hooks you know they're all code like interdependent um ideally the dependency kind of goes you know down the list right where the most dependent on top and then it keeps going down or the one that has the most the one that has the most dependence is on top and then less dependence less dependence down to no dependence um but yeah it was just trying to um I had a situation where every time hot module reloading did a Reload uh whenever I saved it was subscribing to uh the chat Channel like an additional time in additional time and what I'm used to you know in Dart anything that acts like a stream is like a stream object and every stream object when you listen to it it provides a stream subscription which you can then uh you know disconnect from or you can close whenever you want um the API here wasn't too clear to me I ended up having to pull like the the event handler function out um and then subscribe to it and then unsubscribe using so like if subscribe is like you know on this event type then I had to do off this event type um and so I was hoping to have something a little more coherent where you just set up your subscription and then it Returns the subscription and then that return value you can use to to unsubscribe what I was hoping for yeah I got an argument with like Dan abramov of like the creator of Redux about this on Twitter not too long ago I think that creation can have side effects so like when you instantiate a client with a subscription that can be an instantiation like an object that you created in your render path that has a cleanup attached to the creation rather than as an effect that's a whole separate like additional layer I find that the amount of indirection to go from creating a client to subscribing to the client to binding that in effect to unsubscribing with an event listener and Handler like react doesn't provide any of the parts for this you have to assemble it all yourself and I'm probably just going to go make a custom hook that does this properly because I'm so annoyed with the react Community for not realizing that these things are possibly aligned this way I everybody who's a hardcore react person in chat is going to be like what the [ __ ] are you talking about Theo like object or instantiation shouldn't have side effects but I'll prove you guys wrong someday anyways I feel like I had the opposite problem in flutter land where it was almost unclear when I made a change whether or not a hot reload would affect it or not so like interesting yeah like if I made a change in build or in like certain State locations a heart reload wouldn't do it I have to do a full refresh and uh knowing when to do what and what behaviors I was seeing were because of the half State I was in where like anything that was instantiated even if I change the instantiation does not guarantee that part's going to render and there was a few points where it didn't do like it just the app was in a broken State until I reloaded it fully like like the shift that were really unintuitive for me as a person who's used to Reax HMR that kind of just kind of just works yeah that's really interesting I think um and I don't know exactly how redux's HMR Works um sorry react HMR works but um I got the sense that it was rebuilding the entire component from the very beginning whereas flutter it it has you have this init state so so once once the flutter widget is attached to the view um then it runs the init State method and then after that it runs did update and build um so you only get that init State method once until it's completely removed from the tree um from The View tree and then like put back on again um so when when flutter does a hot reload that tree has a shape and the hot reload keeps that shape and it makes sure that it's not running in its state over and over again um and that's something that we can rely on pretty readily to work the same way uh in debug as it does in production um and it's something that we it's one of the contracts in flutter that we rely on really heavily to do things like uh you know if the home view or or if the chat view is presented then the nit state for that chat view is run you can do your subscriptions and everything in there um and then have that dispatch set states to rebuild the state inside it um and then if you run if you make a change and and hot reload rebuilds it doesn't like completely rebuild it it stays mounted and then the state inside it is updated so it's it's one of those kind of interesting things and I don't know exactly what the difference is that's like the sense that I'm getting yeah I that sounds about right I like react has the weird Behavior I've demonstrated this on stream before like if you pass a default value to use State and then you change it that's not going to update in your hot reload because the the init State the thing that you put in like the U state is the default that's not going to be Rewritten when you HMR the state may have changed and it it maintains basic is when you do a react HMR it maintains everything to the left of a hook so the thing before the equals all of that is consistent when you refresh so if things changed after that it doesn't matter the thing before it is the same I feel like there's a both of these Frameworks and solutions obviously have a certain amount of like knowledge you have to have to be like productive and confident in them I think that react has a wider range from productive to confident but you can get productive a lot quicker flutter feels like I have to know a lot more before I can really be doing things like I pour Auto called in early and like gave me Pro tips cuz I was just structuring things entirely wrong and the errors were useless and helped me like kickart a little bit quicker there and I found those helping points like there there are so many Concepts in flutter and it feels like reacts almost the opposite where there's too few things in react so you have to like invent it yourself yep I think that that's fair react the P has I think it has less Primitives that people use regularly like there may be more things on under the hood that we don't necessarily see um that you could play with if you wanted to but I I think that the number of Primitives in react is quite a bit smaller there isn't really much under the hood you can play with either like very very few react is by Design incredibly small there are other things like in the react ecosystem like react Dom that have a couple like hacky things you can do and react itself has some fun things like portals and context but honestly I don't find myself using those things much unless I have very very specific problems the the core flow in react feels a lot more like do you know how to I guess react native is a little different because it's not just like web elements but like the view and text Primitives in react native are a lot simpler than like the five types of containers I was dealing with yeah and flutter also has um this concept of like take take the take the widget container for example container itself has uh two padding widgets inside it it has a decorated box widget inside it it has an alignment widget inside it so there are a lot of widgets that you know contain other widgets and like try to make your life easier um and I tend to stay away from them because I don't I don't like that I can't really understand exactly what's going on even though usually it's fairly straightforward you know but it's just my preference to not use them so I rarely use the container widget whereas I would say that the majority of flutter users do use those like higher higher order widgets I suppose you could call them very interesting oh the one thing I somebody just brought up in chat scroll views properties are so strange is very unintuitive to me yeah I remember reverse I can't remember exactly what it does um because you were trying to reverse it to the chat the chat experience right I didn't want to reverse it all I wanted was auto scroll chat I wanted when a new message came in to scroll to the bottom of the container right not viable without creating some crazy custom scroll container views so I didn't do that somebody in chat said do reverse actually a lot of people in chat said do reverse I couldn't tell if it was noise or not so I was like okay that sounds dumb I'm going to show you why that's dumb I put it in then it did what it was expected like what I was trying to do well enough I was like what the hell yeah right it's like kind of magic so in my case um for that for that particular experience I was looking for reversed I found on flatlist I found inverted um and I think that got me basically where I wanted to go but then I also had to reverse the list as well um so actually reverse the items that were going in um and I actually was looking for Dart has this um Dart has this way to take a list which is an iterable in Dart and you can do iterable do reverse and it just wraps that list with an iterator that iterates in Reverse so there's no like list copying or anything going on um and so you can literally just say like take this say list. reversed it's very cheap um it just like reroutes the iterator under the hood and then you can use that um without having to do anything crazy and so I was trying to like Implement not that whole thing but I was trying to do like a I was trying to do a reverse with I can't remember what I did exactly I think I tried to copy the list and then do list. reverse or re reverse because it mutates the list and then return that and then at the end someone was like yeah it was just it was an absolute mess and then at the end someone was like you know when you're appending your new messages you're appending them to the front of the list instead and I was like oh yeah okay that that makes perfect sense so I just deleted all that code and just went and changed that that one thing and that that worked great yeah I don't trust reverse I avoid it if I can I usually can I always prefer to put the message like in the right place in the array but yeah I I thankfully didn't get hit with those things too hard oh the one last thing that did screw me over we'll go a bit more in to this in the judging but uh the TMI package in Dart didn't have any of the Au stuff implemented yet that's not good yeah I did not let that stop me though we'll get into how in a bit but I heard you stood up a service to get around that guys why are you spoiling my my secrets i' be interested to see what you did that's for sure um hey do we have judges did anyone get back to us Bo's here I believe Cedric is still around so Cedric if you're around would love to have you hop into uh do we have anybody else on the flutter side in particular that you wanted to pull in I think three judges is perfect one one one flutter let's see here unfortunately most of the people I knew who were who are around um are in Europe so I don't think that they're around anymore oh I'm gonna say that unfortunately I don't think there's nobody in here that I recognize they're all your folks no worries I will do one pinky are you experience with flutter I if you say yes I'll probably trust you their message just suggests that they don't know flutter so never mind uh uh do you know loot twig van do I they said L I'm here oh do they have a do I know you I don't know who are you you are uh they actually gave me a lot of tips it looks like when I'm looking at the chat history if I can figure fure out if I can recognize that person I think that's good enough um let me see if M mic's around uh D segno don't recognize the name hey can we borrow you for what do you think we need 10 minutes 15 minutes 15 minutes yeah 10 minutes should be fine it is late as hell over there for him he's in Finland but he's also always up very late wait allejo you've used flut you absolutely are qualified didn't you like build the whole freaking like fan House app in flutter what did he do what did they do uh uh he built uh there's an app it's like only fans but without porn that he is working at a company for and they we got all right we got Matt that's our then how do I get him a link uh I was thinking that we could yeah we could have him come in on here that could work if he's down to do audio I was expecting them to just watch in chat and then drop their thoughts there if they're cool with that if that's easy enough yeah we can do that his name is Boon 4376 so I'm gonna ask him to Boon 4 that's a problem everyone uses different handles on here than they do on Twitter yeah um I'm guilty of that too can I get your can I get a link to your stream so I can twit.tv Theo thanks I'm G to message him on Twitter also just to make sure that he's Savvy Perfect all right cool so I think it'll be the easiest in terms of like the screen sharing and showing off the state of the app is yeah totally I will have you how do I put it I'm thinking you can like just show it on your stream the normal way and I will watch your stream basically on my end and then vice versa when uh it's or when I'm going to show my app and then you can just open up my stream on your stream gotcha okay um oh is I think I figured it out I think that my email or the account that I was using has my old an old twitch email address on it before I quit that's going to make this very hard to use in the future all right if you see let me see here can I see your chat yes I can okay yeah Boon 4376 is the guy we need and he looks like he's in your chat right now Boon 4376 perfect cool so if we picked two goes first why don't you go first that works for me me one second trying to verify this account so that twitch will hopefully unshadow ban me and I can actually demonstrate this fingers crossed uh that work test I just pasted the [ __ ] verify code what do you mean verify again yeah I am so shadowbanned on Twitch right now my so I didn't use my main account I I had the foresight for that but my ALT account that I normally use for these things is entirely Shadow band right now that's weird why do you think that is because people saw my token in the URL and spammed it and oh yeah God the activity monitor on that must be crazy it must be like connections from 10 different countries or something yeah because it's every message sends is a new Lambda request yeah that's wild yeah so that's G to make it hard to demonstrate messages working okay that's my main account that's why that worked I was so confused for a second yeah cool so that is fully Shadow band [ __ ] me uh cool we will do our best to demonstrate knowing that so I will switch to to my screen share view pull up this guy NDA source so here we go as everybody who is judging in chat we have Boi uh is Sedrick still around I think it was pretty late for him he might have ditched I haven't seen him yeah quick uh hear from the three uh Jud is so first person is uh boek I definitely see you here uh I who is the other person that you you brought on Luke oh gosh let me see um it was how do I lose it already Bo there he is cool said hey perfect so that's that's two for three I think that we oh Otto is here I think Otto is our third judge he is a flutter and uh spelt and kind of react nerd so he's also the one who helped me at the beginning so I think uto is our third judge perfect so we have our three so quickly going to go over the judging criteria once more uh we have three sections core features which is a score out of 10 look feel bugginess core score eight out of 10 or out of eight and then extras the things you did that make the experience better that is a score out of four so the summer of these for each of the apps is how we uh get our like score so uh this all clear we have the six core features here we'll go through all of these for each of the apps make sure that they were hit all sound good going once going twice any final words from the judges cool we got at least one yes from judges I think that's enough to get started so let's appreciate you showing up Matthew by the way didn't not know you're in here that's Boon uh let's start demonstrating cool so here is my app you enter three things here you enter the name of the channel you enter a username which I would use my account but this account is shadowbanned so I could paste an O token here and it would theoretically connect and work but I don't have an account that I can do that with that I wouldn't that isn't my main Twitch account I'm not getting my main account shadowbanned right now so I'm going to put nonsense in here can you BRB and uh throw in an actual one fore regular account it's way too high risk so I won't be able to revoke it if it does leak and that's like my very that's my main Twitch account I can't risk that right now sadly I could go make another alt but I don't want to do that right now either it's just it's not worth the risk so we're going to do nonsense for that for now also I'll admit to a bug that was there when I submitted the Third Field that wasn't enough to switch us over to chat I had to go back to the Top Field and hit submit on that in order for it to do the connection okay but now we're connected to Theo's bad twitch chat and I should be able to send a test message in chat and they all appear and theoretically if that oo was good and the account wasn't screwed be able to hit high and send and again admitting the failures of the app when I send a message that or when even when a message send works it doesn't clear the field because I couldn't figure out how to bind like a text input controller in time to clear it on send cool looks pretty good um did you get emotes working uh Unicode emojis Unicode emojis gotcha so of the features I got render chat working I got off via bear tokens working did not do oo flow send messages works but I can't demo it render emotes only works for o or for Unicode emotes and I can enter change channels from the like which channel I put in from the front so can you go back and enter a new channel or you have to restart the app I can go back and enter a new channel Channel and just have to open up the terminal hit I see and now I can go back nice and easy all right I like it cool so should they score yours and then I'll do mine or should I show mine and then score them together first we should ask if any of them have questions first also yo GoPro slow thank you for the raid really appreciate it we're in the middle of doing a comparison of a app I just built in flutter using flutter for the first time and a l app Luke just built in react native using react native for the first time in a while so really fun contest that we're trying out here just did the demo of my app any questions from the three judges before we move on to the other app can I show sending a message I can't because I my my test account is currently Shadow pant and I'm not gonna put an OA token for my main account because then people will see it I I guess I can BRB really quick and show it one time uh this will I have to be extra extra careful with this one so yeah I I'm thinking about I I really don't want to take the risk don't do it if yeah don't do it if you're not comfortable yeah it's yeah it did work at a point show us the ux okay uh the ux is I go here typing a message and send pushes it down but it does not clear the text so it is not good ux the text does not get cleared even when it does work because controllers for text containers are hard any more questions I have a feeling I would have my ass handed to me somebody mentioned I got really scared when I heard the word controller they are correct they did yeah exactly oh no I get that cool nobody else has Com or questions it seems like let's move to yours sure um I can just switch mine to coding mode and you can watch me is that what we got going on yeah I was thinking you just like screen CH or just like do your normal twitch stream and I'll pull that up on here and anybody in anybody in my chat if you're not already also watching here directly here's the multi link he'll have way less latency watching from him you will with me so highly recommend that he'll have way less laty watching him you highly recommend that screen judges I'm going to be looking at the's chat so and for the judges I'm going to be looking at Theo's chat so let's try to keep the theud judging question all right Weir ask can you move the preview the left weird ask can you preview to the left I just realiz Echo I'm so sorry I am so sorry guys I can't hear when that computer makes sound and I almost always have it muted my bad fix now it's only for a few seconds guys it'll be fine in a second I'm sorry I'm so sorry is there something I could do to help no it's just I I didn't mute so my laptop is supposed to be routing sound to my headphones and it is failing to but it's still successfully routing it to the Stream So I just double audio for a little bit we are good now okay anyways sorry so RP headphone users all right you guys ready for for us to go here let's do it all right um so this is a single screen so there's no actual section to type in your uh ooth the ooth is um kind of hardcoded in with secrets so that's kind of what's going on there um but you can see we have a very basic uh view of the messages um it does not parse HTML it's kind of funny um if you come in here you can you know type a message you can send it with return um you can also type a message and you can send it with send um and I believe our keyboarding of keyboard avoiding view also works um and that's really the extent of it um just wanted to really get the basics nailed down as much as possible and that's that's really my entire demo does it have the ability to switch from channel to channel there's no ability to switch from channel to channel you would have to edit this uh this hardcoded value and then start the album so no you cannot change channels good to know apparently only one of the messages went through for others are you optimistic updating on that side uh so when you send a message are you doing an optimistic update in the chat or are you actually waiting to get the message back from uh like the server so the message the message that's coming back is coming from the SDK I'm using okay and that might have just been a weird bug where it reread incorrectly these are all coming through as expected so is very interesting maybe it didn't like the double message because I thought it was spam yeah it's weird how twitch chats decisions on when it de sides to are not to render feel almost like entirely random gotcha cool any other questions from judges I'm not seeing any any bugs um I would say yeah I'd say the the biggest bug right now is clearly you can see that somebody sent a um s a message and the color this is weird to me the color that the that the package provided to me did not seem to match what I was seeing in in um in twitch so I think that twitch might have a way to coer um things that are not visible right so if it's like a bright color on a bright background then it can it can coerce the bright color to a dark color and so I don't have any of those I don't have any of those things that help with accessibility I the engineer who did that at twitch it was one of the most thorough reports on coloring and uh accessibility I've ever seen in my life like she gave an hourong presentation it still wasn't long enough for all the crazy [ __ ] she was doing there's a thing called readable chat colors that it used to be off by default on Twitch now it's on by default where it interpolates the color you've selected based on like your if you have color like profile needs or your like background color if you're in dark mode versus light mode and [ __ ] like that and that's not the color they provide via TMI because that entirely happens in the JavaScript on the website so uh yeah there is no way to actually get that color gotcha um that's really interesting so one thing I will note is somebody said that mine was unique because emojis don't work I think the current status is emojis work in both of ours and emotes don't work in either of ours I think that's what we' got does that sound right yep twitch emotes don't and uh emojis work functionality wise these are very similar I'd say the difference is actually are do you enter the uh username and password or are those all hardcoded too no those are hardcoded so yours has the extra screen where you can type it in when first launched the app okay I don't think we were specific about this but I I I did put the word flow in ooth flow and the intent there was there's a way to pass the authentication in I think that's maybe one that I did and you didn't well I would argue a little bit differently on this I would say an ooth flow would be a complete flow where there's a button that says you know authenticate with twitch and you hit that button and it opens up the like a web browser and allows you to log in and then it passes the O token back through something you'd expect to see in an actual product so that's how I interpret it that's how I inter that's fine so we both get no points for that I my frustration is I did a different off or try put it I do we give me a half point for o or oth flow and him none or do we give me one point for o via bar token and Luke half a point because he is aing via a bearer token he's just putting it in his code I let you that in as a user I would say we should leave that up to the judges because clearly you did more work um but if you're looking at it by the letter I think there's an argument that they're similar yeah I definitely did some cheap things around the the by the letter thing here so totally fair I um I would be fine with it either way personally did you see the uh somebody ran a prediction in my stream and 93% of people thought you were going to win wait really y probably because they were relying so heavily on react native yeah Fair yeah I had a lot to learn there cool uh any other questions from the judges uh questions about the scoring or about the apps themselves or anything at all shall we go through I think it's time to judge I think it's time H judges let's pick our formatting for how y'all will share this I'm trying to think like the easiest way be fun to have you guys call in on PING or Discord but I don't want to like pull you or like push you for that because it's a lot more work think it' be easier to just say it in chat okay Otto can call in quick uh Otto I will just send you this link fast that cool I will send I'll just send you all the Ping link that should be fine uh Auto DM him uh is Matt R out one of the judges yes cool I will let him in now and well I think he's going to try and rejoin actually so Matt feel free to rejoin and I will DM you if you would like to join uh feel if you don't want Tu book you can just uh like DM me your scores or drop them in chat whatever you prefer I think having all three people on be pretty cool though uh Auto would like to join cool howdy howdy Auto hey what's going on not much and we got Matt here too going to is that the um is that the Avatar that you use on Twitter because I feel like I've seen you around uh yeah it is okay I do a lot of Dev in the twitch space so this is the first time I've actually meeting Matt face to face which is really funny because we are both like the only flutter developers that live in Maine that is actually hilarious cool just setting up my scene here I will hide everything oh no I M I'm being dumb yeah I'm just trying to last second set up everything so it's like visible on stream and a reasonable fashion I think we're good now cool we'll go with it rad anyways I think we're just waiting for one more judge to join uh oh he's installing Chrome because we don't support Safari on pings we only support browsers with a working AV layer I had to switch to Chrome for this too what do you use Safari as well I use Safari y you Safari people you're a [Music] type cool H Bo should be here soon well if we want for now we can go through Auto and Matt scores any volunteers for who goes first uh I'm just suming mine up Matt if you're ready you can go now oh uh yeah so I would give Theos like two more points because it's got the config section um you lost a point for not clearing the text field when you send but um Luke's was hardcoded which I felt like wasn't as good for choosing the channel at least whether the oops were were better or not um so I would put the flutter version just maybe a couple points ahead totally fair I appreciate the extra points uh thank you very much so one in favor of the flutter app uh uto are you ready to go or Jeff would you like to go now your call uh I'm ready Auto all you then all right um so core features uh I out of the six features uh both of you had the three main ones which is rendering chat Sending message and authenticating uh but uh neither of you had changing channels rendering emotes or real ooth flow so I gave Theo a six out of 10 and Luke a five out of 10 Theo for your um your extra like you know login page uh because you can you can enter channels but you can't change channels so I gave you an extra point um however on the look feel bugginess uh both of you missed uh the the the name colors which I think could have been a nice thing to to put in and there's another thing that I've I know because I've I've worked with a twitch chat before which is that if you don't have a it doesn't always pass you a color in a message and twitch just generates a random color from an array if there's no color specifi so neither of you got that um I gave Theo a uh I took half a point off for each bug so Theo gave you a 4.5 and luk I gave you uh seven uh and then neither of you really had any extras it felt like uh because you were both learning the framework and didn't really Implement any have time to implement any extra features so I gave you both a zero that's fair uh so the react native is is a couple points ahead you really weigh hard on those bugs huh uh yeah I mean the there was uh I think the the just the feel of the react native one uh if like if that if that chat screen was the chat screen in the app and there's an entire app around it I would be happy with it um but like Theo you you're your place holder for your message text was choose channel so they're just a couple like uh minor you know I didn't even notice that that's pretty good so you got a couple points look we had two and a half hours I didn't have my designer there to mock me for three additional hours after the fact yeah you need a little figma layout yeah I guess we need our tiebreaker now Jeff share your thoughts oh man you're not going to like my answer now I guess we'll start with core features um I gave Theo 6 out of 10 and Luke five out of 10 and the reason for that was uh I gave Theo half a point for being able to enter the channel even though we couldn't change it um and so that kind of bumped it up one um for look feel and bugginess uh Theo pulled in a four out of eight where I gave Luke a seven out of eight and I'm just gonna kind of mirror what I think Otto said where you know as a as a native developer like the react native implementation felt a bit more like it fit on the platform and I think this is probably part of material UI and flutter coming into play there and then just a few bugs that that kind of knocked it down a bit but extras I did give Theo one out of four because of the scrappiness coming in with the the next app at the last minute to get around the the lack of TMI Library so I mean like like in a challenge like you gotta call that out it was it was it was fun to watch and a nailbiter to the very end that's awesome but unfortunately I think that puts you both out of 12 out of 22 so it's a tie a tie it's a tie okay that's so je tie right so so to be fair I could just knock off the extra and then it would be the react native but I didn't call or somebody else just said in chat I think we need a chat tiebreaker hang a second because what's what's the sum because Matthew was plus two Theo right and then Otto was is that what yours was that's no fun these are three Representatives we we're in ative so are we doing the some or are we doing the you know just like this is the electoral college man this is this is the Senate y'all y'all did a split with your seats so now we need democracy to come in okay all right I'm fine with that cool I will do the poll in my chat because there's like a lot of people there I can't see how many because the twitch dashboard did the bug again where it shifts everything up 20 pixels and I can't actually see any of the stats oh that happens when you get a twitch DM yeah you have to go into the console manually and do like window. scroll 2000 to fix it I fixed this bug five separate times at twitch and actually added an integration test to prevent it and I'm almost positive they deleted that test since so one of the few times the test would have stopped something and yeah here we are anyways making the PLL now uh Theo or Luke how long do we want to give this poll I'm thinking three minutes oh wait somebody else put up for me even better thank you to the mod who did that I totally voted for myself I'm not even gonna lie I did too of course well it's not very close but it could change hey guys remember all of the pain I put myself through for this one I I built a whole server and deployed it just to be able to send messages the text should have cleared that I feel like those are points that to be removed from flutter and added to me as sympathy points Matthew some call I know half of the people watching someone just called Matthew David Beckham in chat not inaccurate he's got the for it I just realized a lot of people are voting against me because they have sunk cost where they they did a poll like and they they bet their Channel points so if I win they lose all their Channel points so unbiased poll totally unbiased poll it's about half done how long do we do the poll for 2 minutes three minutes how long do we pick yeah is it good now three minutes okay so it's another minute and a half I honestly think that we can pass the poll this one there is 180 votes so far and it looks like I lost pretty handedly so I think unless you guys have reason otherwise I'm comfortable calling it and announcing Luke as the first official winner of the react native versus flutter Code War guess the question is did I win or did react native never know the answer question I I am actually very excited to look at your source code though honestly like I am I am tempted to keep streaming and go do that now but I shouldn't we should plan that very soon it's up on yeah we should definitely do review or do like a round two um but my code is up on my yeah or a swap I think that's a good idea um it is up on my GitHub um as a public repo right now so I think it's my most recent one if anybody wants to look at it perfect my back end is up but I haven't put my front end up yet I can go do that quick uh get status G repo create cool just press enter a bunch has a terrible name I think it's named first I'll go rename it later but it's up on my GitHub I'll send a link in a bit I think that is it then uh have you decided on the tweet I have to send Luke that's a really good question I let's see here I think that you should send a tweet that says daddy flutter that's it nothing else not even a picture daddy flut ddy flutter y capital D capital D and F or all lower case no all lowercase all lowercase Daddy and then flutter has to be hash flutter I with the sweating emoji with the sweating the sweating Emoji pure chaos I the Tweet has been made I will post the link in chat for proof oh you should we should have won up that you should have made me pin it you still can next contest will come up with stronger rules ah somebody else had to go in unit tests are the best tests in programming this is not sarcasm my last video was untrue I was wrong that would have been a [ __ ] Banger the problem is is that I it not the sweat Emoji oh I'm on Windows I can't tell which Emoji I'm using yeah you need to do like the panting cool I need to go switch that so stop liking that tweet I deleted it because it does not qualify sorry guys uh oh there's yeah it's got it looks so bad on Windows I don't even know if that's the right one I'm goingon to do it my Mac because I actually don't trust the like emojis on I put it in ping chat oh perfect uh copy that's the one you want flutter there we go this is tweeted with the Emoji I was told to tweet with so it's better be the right one yep that's the one Twitter what are you doing with these yeah Emoji design that's why I couldn't tell because the window ones are so bad and then the Twitter ones are even worse so at no point did I get the feedback that I had picked the right Emoji or the wrong Emoji too good awesome well this was fantastic thank you again so much Luke and also to all the judges doing this yeah and huge shout out to all three of you judges for jumping on last second and hopping this like one of you kind of committed during it and the other two were pulled in post so appreciate all the judges immensely uh you're quickly say hey in chat so everybody can follow you drop a link to your Twitter or something just to get something from this because we appreciate yall immensely for it and yeah thank you guys all so much absolutely see you peace y thanks Matt cool anything else any other uh thoughts crazy this you ran into or otherwise things you want to say to the 700 people who are still watching um good question so I I like I really like react native as a framework um I've always loved JavaScript RT and typescript honestly just because I think the community is great and and the packages that people write are pretty pretty incredible um flutter has a lot less developers so we often have to implement a lot of things ourselves um and I'm looking forward to just building more stuff in react native um I don't have any plans to switch what my primary framework is which is flutter um but I do really want to spend more time with it because it's definitely very high leverage and I think in some ways it's higher leverage uh than flutter is that that makes a lot of sense I think that the community in particular is what makes react native so strong it's like there's a huge difference here architecturally of like react specifically does very very little and as such you have way more control to an extent but also more Reliance on additional third parties who are creating these tools to do the things react doesn't whereas with flutter almost everything you need is there but the things you don't are not or the things that they haven't provided aren't in as good of a state yet I definitely felt that with like the packages we were consuming like I had to start with a custom flag to run like no nulles or something like that and those those catches were definitely the roughest parts for me I would say the best part for sure was the quality of like the developer feedback when things were going wrong in the editor it was awful but in the phone and in the terminal for like the run time it was really good like there was a a moment where I was blown away where it does a thing where it shows like a gray black grid on like the sides or the bottom when you overflow so you know that you're rendering things outside of the boundaries that is so cool and I would kill for things like that in react native to be more standard yeah that makes a lot of sense I think that we should um touch bass again later I don't know if we'll do a swap or something else um but I would really like to do that I think that would be good for us to do and it seemed like chat had a lot of fun with the with the whole challenge as well so I can confirm this is some of the most excited I've ever seen chat since I started stream this was an awesome thing that we did I also think for the swap rather than it being a contest it could be like we do different streams at different times and like maybe I come guest on your stream and like you roast my flutter code then you guest on my stream and roast or like my react or code like that maybe but there's definitely some really cool opportunities there that might not be like you have to watch two streams because that was great for this contest but in the future I'd love to make more content that's like everyone goes to your channel to watch it for that yeah I think that's a good idea um we should definitely sync up over Twitter um if you have any other thoughts let me know otherwise I'm going to jump because I'm tired I would love to eat something yeah it is late there I appreciate you so much for staying on till freaking like 8:30 your time and yeah this was worries so cool one last huge shout out to Luke if anybody here hasn't already followed him on both twitch and Twitter please fix that exclamation point Luke in chat to get his twitch and his Twitter is the same but with the underscore if I recall cool yes Twitter and chat as well so please give him a follow and one last huge shout out to Luke for coming up with this idea coming through for this crazy times doing this super long stream and everything that was involved for this too thank you again Luke so much hope we can chat soon congratulations again on the win peace yeah appreciate it cool and we did it y'all what a stream I yeah that was insane thank you guys all again so much what a concept what a what a result less of a [ __ ] show than you expected that's an honor this was this was a w and an L this went almost exactly how I expected and I'm upset like this was exactly what I thought was going to happen where y'all helped him get through react native I suffered immensely with flutter for really dumb annoying reasons we both had an app that was surprisingly close his was more polished mine was more featureful and I still lost that's pretty much exactly what I expected he knew the most that that checks out he's definitely has a wider set of knowledge than I do and I think Luke flutter has a higher bar to be productive in I I'll you know what [ __ ] it we'll diagram a bit why not I've already been streaming for a while it's a little bit longer let's do a new scene quick uh we're going to do the spectrum of knowledge necessary to be productive so zero 10 it's 10 out 100 doesn't really matter so this is like how familiar you have to be to be productive In A Thing versus like how how good can the thing be on the other side so on left side it's like Noob oh I just realized everything is [ __ ] broken sorry guys I look streaming's hard fixed I'm tired okay guys so here's the diagram one side is Noob you think of that's also like the bad app and then on the other side is like Pro say that flutter feels like this in terms of how much you experience you need to get started like as a result like you can't make a flutter app that's worse than this but you need to know enough to like get that far and feel productive whereas with like react native you can get something done a lot easier and you can I think go a bit further with it because like when you get started you can make something happen really quick but to do crazy Advanced [ __ ] you can build intense packages and all sorts of other stuff but as for like the potential quality and and here's where my hot takes still exist I these may change someday but at this point in time like bad app good app I say great app I'm still concerned that things [Music] are a bit more like this uh yeah I'll say that like cuz you can make some really [ __ ] bad stuff with react native it's absolutely possible but man uh I feel like the the way things render and the lack of native is pretty painful and I haven't used many great apps oh I really like flutters a can opener react as a knife that might be my favorite comparison to date I really like that actually what a drop Ricardo that's quote of the night for sure Banger I'm going to tweet that so I feel less bad about the tweets I just made uh flutter is a can opener react native is a knife all it wasn't knife it was scissors was it oh was a knife cool yeah stolen what's your Twitter handle so I can credit you Ricardo drop your Twitter so I can credit the the Shameless steel I just did of course he doesn't even tweet oh cool yoink oh cool thank you for double checking I just checked I I checked once to be sure and that was not yours so for the Fantastic quote I shamelessly stole credit applied cool anyways I'm pretty dead that was [ __ ] awesome I want to get a couple more shout outs out quick because a lot of people did a lot of cool [ __ ] to make this happen shout out to Jacob for letting us come into your spaces multiple times to plan this event thank you to Maple for helping moderate everything and the huge gift Subs at the beginning and just being [ __ ] awesome in general huge shout out to uh glassie as well as Maple and Jacob all for helping moderate and anybody else who was involved with the moderation as well I'm sure I missed a bunch of people throughout I huge shout out obviously to Luke for coming up with this and doing this coolest [ __ ] ever massive respect to Luke for that fantastic show fantastic content and then one last huge shout out to all of the judges especially Otto for jumping in early and helping debug earlier but obviously of course Jeff bock as well as uh was it Matthew was the third judge I should know his name especially for how like willing he was to jump in there but I sincerely appreciate all of you so much this was quite the show his name is Chad they're all named Chad we had quite the Chads helping out today also huge shout out to everybody in chat throughout who gave good advice and actually helped me figure out [ __ ] that was like broken and not working there was a lot of things here that were chaotic that I would not have figured out that y'all definitely did help with in the end and I appreciate every one of you for all of the effort you put into helping out also yeah Luke was so chill about that too he he it's not necessarily the highest bar but he is without question my favorite uh my favorite flutter Dev for sure so awesome that we got to work with him and do this super cool content I am half scrolling to try and figure out who we're g to raid next I think midnight Simon's up he hasn't been up for a while so he might be a good person to raid look I'm looking right now at the category all the people who are up right now have been streaming for a while and I don't want to are you guys cool with a quiet stream uh the creator of fot your good friend Aiden is currently live he doesn't have a mic sadly so it'll be a little more boring than usual but I'm leaning towards him also midnight Simon's live what programming language is he using less interesting I seen that yeah Aiden let let's raid Aiden that's easy enough let's do that cool raid Aiden just created The Raid thank you guys all again so much what a show I'll be back on Wednesday I'll be announcing the guest for Wednesday soon some very exciting stuff coming there be around for that to the the last question would I ever build an app with flutter if I was building a gamer an animation framework maybe but I wouldn't build an application that users like interact with in a traditional sense no I wouldn't build Twitter or twitch chat or anything like this and flutter that all said learned a lot from it some really cool stuff in the flutter ecosystem that I think we should learn from in the react native ecosystem and I'm happy I gave this an honest shot I'm hitting the raid button I'm going to see you guys all in Aiden's chat thanks again everybody huge shout out to all the a people who made this happen today peace y'all




## STREAM VOD SOLID START SHIPPED!!! CHAT W RYAN CARNIATO - 20221110
sup nerds we have a guest probably my single most requested guest since I started the show way back Ryan would you like to introduce yourself quick oh hey um I'm Ryan carniado I'm the creator of solid.js I work on open source and netlify um I don't know that's that's the official introduction at least good stuff yeah I am so hyped obviously netlify is a great place for you to be at with the focus on all sorts of Open Source Frameworks especially of course solid something I don't think a lot of people know about you they're okay a lot of us do to be clear but generally speaking I don't think enough people have an appreciation for how deep your knowledge of Frameworks is outside of solid love to hear a bit about how you got into Frameworks in the first place and what led you to starting solid yeah um it's it's kind of funny I mean it's not really funny it's just I was working at a startup um and the startup I happened to be working for a guy who had created his own JavaScript framework um it was knockback which is like a knockout backbone thing which is actually like kind of okay big in this day it had like over a thousand GitHub stars back in like 2011 or 12. so like that that was something GitHub users yeah like back then that was a thing you know um but yeah in any case um I found myself uh in in uh open source through that and um he actually kind of I don't know I don't know if a burnout's right term but like he he was kind of done at a certain point and I found myself maintaining a bunch of Open Source projects and being like the highest technical person on that in that startup right small team um so I actually wanted to kind of like replace what we were doing and I mean you might be like okay like this is like 2015 you're like oh yeah let's like switch to react the problem is our team had been building everything um on knockout and we had built our own Oram kind of similar to graphql um ourselves kind of back in 2012-13 so you can picture like the whole thing was all like intertwined together and really tightly coupled and we actually kind of liked uh this Paradigm from knockout called reactivity so um we didn't want to actually move off that except the problem with knockout was basically dead people stopped maintaining it and it just kind of like slowly evaporated so at some point I was like I'm gonna try and make a modern version a knockout um and I just start playing away with it but um a lot of that motivation also came from the fact that like I kept on seeing like all these videos and like I watched you know all this kind of popular streams and conference talks that one would watch at that time and people were kept on like showing like the virtual Dom is so fast and all this kind of stuff like uh Ryan Florence had this like great demo where he had like a stock ticker and it was like spamming the page super fast and I'm like I I've never built that app um to be fair I like I built uh media like it was like a private Instagram kind of thing and I was used to for for schools it was an education and I was used to like you know data grids uh like image grids and like moving stuff around video like all that kind of stuff and I was like I'm never like spamming a stock ticker and you know I thought reactivity was fast so without being too long-winded I've started building this in my free time because I I was also found as being like the highest technical person no one wanted me to code anymore they wanted me to like explain and do business stuff and hire people so I I found my ability to go back into coding by working on this framework in my spare time uh and um eventually I open sourced it to get into benchmarks because the performance was really good and again I wanted to prove something and uh it's kind of funny to me because ultimately that startup I actually directed them to preact and then we it was right around pre-act 10 and it was a little unstable so we the startups on react now just in case anyone was curious but um it was a good uh experience for me and because of when I got into benchmarking I actually played with like every framework like I was like I did a whole bunch of different comparisons and like trying them all and seeing what they were doing and why they were fast here and and whatnot and for anyone if it doesn't know Ryan here has Rewritten Hacker News in probably probably 10 Frameworks and like Tech Stacks at this point like the amount of Hacker News clones and remix since felt kit in next.js and the new next JS release and DIY and crazy things obviously solid start Astro plus solid to show like not just like a quick perf demo like rendering a bunch of stuff but actually how things behave as you interact on a page yeah yeah yeah sorry I get long-winded at times but like I just wanted to call that out for the audience like I wanted to like emphasize just how deep your knowledge and understanding of these things is we see Anthony in chat now saying that you're probably the only person alive who's used all of the Frameworks he had a comment earlier that was uh you're undoubtedly the premier expert on JavaScript Frameworks which is a funny title completely true and badass which it is you're the person who knows the most about the most Frameworks thank you yeah I I it's funny how you end up there when you're like trying to just find like the best ways of doing things like and I I did go really deep and um it's the thing that was amusing to me is that my old startup um I built the whole framework off web components because we can like decided that we needed a component model to get out of our like MV VM soup so to speak and I built solid on web components as well and then at a certain point as benchmarking and doing stuff I was like why why why are the web components here I just like ripped them out and when I ripped them out I was like I don't actually need the components and that was actually uh that the Advent of where the thinking really got to because I realized I was like components like were not necessary at runtime and that was kind of the Revelation and it was good for me because I hooks came out sometime around then um and suddenly like we had this whole ecosystem of like class of components and plain objects and suddenly reactors like no no make these Primitives again and I mean that was the best moment for me like ever you can imagine because like solid already looked like hooks before hooks came out and we were using jsx you know because I like the portability and like suddenly react was like yeah do it like this and then I was I was like oh okay what if we do it like this but maybe better um so like it was really interesting because the combination of like a bunch of I don't know different things and just keeping on looking into stuff and exploring it um kind of led me to understanding you know the nature of components and Frameworks and nature of interaction and scaling this stuff and um that that's actually how I've had such a crazy two years because the guys at eBay had hunted me because they realized inadvertently I'd also solved hydration um so it was kind of like a a really interesting time because they're like yes we need to get rid of the components because we don't want to ship all these components um to the browser and I don't know how familiar people with hydration is probably like the most misunderstood term in web dev but like essentially if we can break the JavaScript smaller again that's how we can send last JavaScript faster payload page loads and all that stuff so I actually worked with them for a couple years and honestly if anyone ever gets a chance to try it and I I am hoping soon because we've been working out very long time um the Marco T medibe has is like it's that's where I get my future future League thing like they're they're building stuff like eight years ahead of everyone else they had like out of order streaming and islands and partial hydration stuff like in 2013 or 14 or something like and and pictured like having that like back then and like having the last eight years to think about it like that's bigger than the gap between jQuery and react like like in terms of like when things are released like having that period to like noodle on that and then have it test in production like with eBay like those guys are absolutely crazy and um so I learn a lot from from them I and I you know while I was doing that solid just kept on picking up and picking up and picking up uh and you know I found myself now netlify working on solid and other open source but the best part about netlify was I get to keep my ties with Marco and with quick and with Astro like I spend a lot of time with these teams in their Discord and talking about stuff and you know like I built the first quick router um you know when I was making a demo for them and you know it benchmarks because how do you when you have new technology how do you showcase it like these are really uh places where we need to figure out how to highlight technical Innovation and like don't get me wrong like when you're on that front end not everyone needs to adopt this stuff like you know don't don't don't worry too much about it you're perfectly fine where you are in your stack but on the other hand um I think it's interesting to see the shift of the fundamentals of the web I'm gonna move around that like um we're looking at different Primitives um and like that that's what excites me about solid because um even we'll see I don't know how things will go in the future but the impact of the work that I've been doing is are I'm already seeing dividends across the ecosystem which is amazing seeing stuff like preact signals seeing stuff like angular angular of all are looking at bringing signals in um looking like one of the guys in the angular team was telling well like tweeted that uh signals with the new vdom and that's like you know like in terms of expiration there but you know this is this is just the tip of the iceberg I think I mean Theo's just letting me keep talking but I think that like when I spent so much time on these fundamentals on these Primitives that we haven't even cashed in on the full potential value right um people see solid JS which is another you know UI framework like many others but when they see it and they go oh it looks like react but that's also because it was built that way solid doesn't actually need to be that way it just happened to make a nice react the way it looks but the truth matters the powers in these Primitives and we can build different things and I think we're only just starting to see the potential that we unlock um in the future as we like explore this further I absolutely love that I obviously have been paying attention for a long time personally I remember when I first saw in Hacker News new jsx framework faster than svelte and I immediately looked and reached out and have kept an eye on what you do since there's I think I've been talking a lot more about on stream lately it's a like a philosophical thing because I get a lot of questions that are like Theo how do you know about all these things like how do you keep finding these things so early and keeping up with all the news and the response I always give is I don't think about the things I don't follow a project I follow the people when I see a piece of technology that I'm impressed by like solid I don't just follow the solid Twitter account I follow Ryan's Twitter account to see what he's talking about I think you specifically are the reason why I pushed this so hard because the amount your interest in all of these things as they happen and your understanding of like both extremes where there are the people who still ship jQuery and there's the people who are inventing Marco and your ability to be on that whole spectrum and see how things move up and down it has allowed me as an engineer to grow of certain amounts absurdly quick and a lot of why I'm seen as an expert is because I take the things I learned from you and see you talking about and just share them with my own audience um thank you for for saying that uh uh that brings me joy because like how should I put it it's funny I love the jQuery comparison to like Marco because both of those things are powering the biggest eCommerce sites in the world um and and this is like you put it kind of put in perspective like Marco Powers eBay but jQuery Powers amazon.com like you know and it's interesting to see the whole scale like and the difference between that and the similarities like I think people will often very quick to uh kind of go oh you know my solution's special or different and I think that's good because that's what motivates people and keeps them pushing forward but I I think the similarities are often more interesting thing but even more further to your point I'm very stoked to be here today because the truth of the matter is it's difficult sometimes to express all these ideas like um some people some I I stream quite often like five hour streams or whatever and it's like dense people are telling me like I can't listen to your stream in the background I literally need like the pause and resume you know like think a minute resume and I'm not trying it I I it's my opportunity to get a bunch of stuff off my head or learn a bunch of stuff and I think the work uh that yourself in particular among others is doing to actually be able to propagate these like more advanced topics and better understanding is an invaluable like the my biggest problem I I didn't I told everyone the last two years have been like uh kind of Whirlwind for me I got picked up by eBay and I started working on these projects um the I was also not on social media not on Twitter I was not on LinkedIn I was not doing any of this stuff I was working on my startup head down doing doing my thing and uh when I came in uh to social media was actually challenging I I didn't know how to express my ideas and how whatever number characters Twitter has and um I you know I I'd see discussions and I'd be like oh yeah actually I have something to add to this discussion or you know try and talk to it and it was very difficult um no one wanted to listen and I just didn't understand how these Dynamics work and I think there's a lot of people out there who are much more natural and have that natural ability to communicate because the problem was after a while I'm realizing I've seen myself against the wall I focus more on education writing more articles and more more streams but there's going to be a limited uh audience for what I for the stuff I do so I very much depend on stuff as I said like yourself Jack Harrington and a few others who actually take those ideas much further into a much wider audience than I could ever hope to absolutely I I think you're getting more and more accessible and at the same the same way that like I'm taking the information that you are taking and making it more accessible I think that another thing that people like primadin and I are doing is we're leveling up the audience for Tech content as well as proving to an existing audience that doesn't watch Tech videos and YouTube and such I how do I put it it works with his heart it feels like we are leveling up the audience and identifying an audience that would watch your content we've built the funnel to it and you've built the funnel for the concepts themselves for us to find and bring it's like a very like symbiotic thing in that way where we are using the stuff you teach us to level up our audience and ourselves and our audience leveling up makes your content in your way of doing things more accessible to those same people and on that note and on the note of listening to you I want to make sure everybody here knows that you are actually also a streamer one of the first ones I was watching when I started getting into the dev stuff and I want to make sure that everybody here is following you if they're not for some reason so I'm gonna quickly shout out to Ryan solid on Twitch right just did a shout out everybody here for some reason you're not following Ryan yet please fix that his content's incredible I saw somebody in chat saying can I have you on as a permanent guest why would I do that when you can watch his show that's even better um thank you uh but yeah uh yeah I've been streaming for since last August so like a year and three months or something and it was it was such a funny thing I I mean this is good we should talk about this because this is how we met essentially um you you said you'd seen solid you know on a uh like a Hacker News thing but uh what had happened uh for me at least it was at a certain point I realized that I need to kick up my content game a bit what had happened was I I told you no one understood anything I said on Twitter and you know I I someone even said that I was like self-promoting and stuff and I was like okay I'm not in the right place so I started focusing more on my articles and then uh people are like oh I love your articles but I I don't learn this way I learned by video and that was new to me I'm a little bit older if you guys don't know I was I did not come up like in that but it's increasingly more common to see that people learn by video content um I think and I and I was like okay well sure I can talk about some stuff and people like oh it'd be really cool if you like like went line by line through the solid compiler or something so I I did that actually that was my my first video um but I I I'm not going to video production or know any of that stuff so I I found like a stream yard or something simple and I just like streamed and it's like I look at those videos and I laugh at like how bad the quality was it's like this blurry mess my head was like disappearing like while I was talking and like it was but the thing was you know I was after work I you know Friday night 8 P.M uh you know and I just like start streaming and it's the same way I started writing articles when I first started writing articles there's literally like like I I remember opening and be like oh six people viewed the view the article and it's like on medium like I was like like usually like random traffic will get you that much like or more like I was just like okay I'm just gonna keep on writing no one's no one's there but one day you know maybe this will help someone same thing with the streams I just started like picking these complex topics that like no one you know knew about talked about hydration talked about rendering all this stuff and just every Friday 8 p.m and before long I had about 20 people who were like pretty regular on this stream it was all YouTube I I didn't know twitch or anything so it was just kind of funny and I remember I I started trying to figure out how to teach ideas and like you know started whiteboarding stuff and like you know that kind of stuff and um I don't know it just like it was kind of nice for a while I think I think it was that way almost all the way till the spring time you know and it was only after I worked in netlify that I was like okay maybe I should you know buy a mic and move things prime time a little bit but um just as like a viewer I'll say the vibe was generally like the best I could put it is it felt like a like going to your favorite professor's class and just listening to him rant especially if like you weren't actually in the class and you had nothing that like you had to do homework wise so you're literally just there for fun and to chill it was like going to a seminar you weren't supposed to be in it's the vibe I always got from your streams especially early on and it was cool seeing how many people were excited about that because we wanted to to have our like way of thinking of things Challenge and hear about a bunch of things we didn't understand and someone mentioned this earlier in chat feels like sometimes when we're watching your content we have to like pause and think for a bit rewind a little and then catch up on 1.5 x speed to get back to the live even I do that watching your stuff and I think it's so cool that that exists because of this is a take that I've been developing more and more recently there's a lot of different types of media around software development stuff but I find one of the biggest strengths of video is how it allows people to learn about new things they might not have otherwise like How likely is somebody to read a blog post about solid.js being super fast versus a video with a crazy thumbnail like oh my God my react app is so much faster now as a way for introducing these Concepts and I think that video has a unique strength in its accessibility in those ways yeah and I I I've seen it honestly like the streams uh you know over time have gotten much more popular and maybe not like live but even the video content stuff just retroactively it's it's been crazy that was the thing like even like when uh Astro that's the thing I was getting a lot of the framework creators uh talking about their next thing before it was even like released like I I got first dibs somehow on that stuff probably because I was like sitting there in the repos watching what they were doing but like um even like when the Astro SSR Beta release came out and I had Fred on the stream um that's that that the viewership on that was like you know okay but like then like four months later Astro releases you know 1.0 and everyone kind of goes there and like at that point the video actually became kind of like that's actually one of my favorite videos of all time me and Fred um and like we but we both didn't know what was going to happen because I didn't test like one specific mode of Astro and we're like sitting there kind of going okay Lighthouse what are you gonna give us and like real time we've we got a green score on a page that we thought it was impossible to get a green score I loved that stream so much I remember watching that one yeah um those are really cool moments that kind of happened organically and uh yeah I know I'm I'm just reminiscing now but it was really cool because I I I I kind of got further forward in time than I wanted to but what happened was yeah this is how I bumped into Theo in the first place because it because of those streams and I found out that uh uh Jacob was doing these uh spaces and you guys like basically funneled the space into the stream and then I was like okay what's what's a Twitter space um so I joined in a couple of those spaces and happened to just chance on like uh you know when you were doing and then like uh I think Dan abramoff just jumped in there too and that was like that was like the first uh and it wasn't recorded it was like early days and that was like the first time I really got into like Twitter spaces at all and like I yeah I was I was pretty pretty stoked from that moment because like honestly um I I I I I've probably said this before off screen but I'm a huge fan of your content and I knew right from there that you had like you had a lot of potential to go places and that's what we've seen so you know I'm gonna chalk that up to another one of my predictive uh Powers oh yeah I there are three people who were like in the space that were really early investors in Theo they were Fred you and Tanner like those are the three people who are like oh this Theo kid's weird but kind of knows what he's doing I'll keep an eye on him like very specifically you and Ryan both are you and Fred both let me like help you with copy on your blog post and such just I'm nerd about writing and like messaging and Tanner challenged me to look into trpc and come back and share what I've learned all of y'all were like established people in the space that made me feel very valid as a kid who had just quit my job at twitch to go and do like software on my own and be more in this community like it's so surreal like just having all three of you in my apartment on Monday hacking away at random [ __ ] is so trippy when a year ago you were like the the top like the most inaccessible like I hope that we can like I hope he considers me a friend someday type [ __ ] and now we are where we are where I like I hadn't realized how long it had been that I hadn't had you on the stream for just because we talk all of the time exactly that was actually my biggest concern um and figuring out because like you know like it's always best to talk about stuff when there's waves when there's news when there's like some kind of Novel thing to pick up but we could literally jump on the stream at any point and then the thing is sometimes you want something controversial and the thing that always surprised me about Theo because I you know I'm generally a little bit more mild-mannered like 80 of the time maybe 85 percent of the time and feels a little bit you know is that um how many times uh we are actually closer to agreeing than we would have thought and then that doesn't really make for an interesting stream at all absolutely yeah we definitely had a we had this chat like yesterday didn't we we were concerned about you coming on like what are we going to disagree with yeah but I think it's more freaking um uh Alex Russell in the corner while we did it good times yeah yeah yeah no it's well I mean meeting Alex was amazing too because he's someone I've always wanted to talk to because I have incredible respect for those who who don't know Alex Russell basically wrote all the like a whole set of articles about the cost of JavaScript on the web and watching like you know the thing is we we build apps we have fast computers we have good internet you know all it's great but you know he's been looking at it from the other side and looking at the numbers and understanding the real cost of the performance that comes with Frameworks and it's hard to be in this place because he's a consultant so every time he like goes to like a new place and they're like we're having issues he's got to like go okay guys you know like have you ever inherited someone else's code base and like a picture picture that being your job and like sure I mean you're getting paid pretty well if that's your job but then you keep on seeing the same things over and over again and you're just like can't we do something about that like can't we teach people or do and it's it's it's a frustrating place to be and I'm I'm very stoked for your debate coming up with him because like there are multiples of discussion it's an interview discussion okay that there's multiple sides to these these things like there's multiple considerations and it's although it is actually a complex topic but you know sometimes when you're on Twitter and again you have like X number of characters things come off a little bit like harsher so like I I was actually very happy for this because at a certain point you know a lot of fingers point at like framework authors I am a framework author so like it you know I I never knew where I sat or where things sit because a lot of times a lot of framework authors do spend a lot of time thinking about these things and um you know despite best efforts you know things sometimes end up where they end up so uh yeah I don't know sorry it was a tangent but I was like it's super stoked like we had a vague plan of what we were going to do here and we have entirely lost that in favor of just chatting as we always do because we have so much to talk about I try to think if it's even worth like trying to get back on the traditional rails we should do a little bit of like what even is solid because there's over 700 people here and I'm sure a decent number of them don't know what solid is just yet want to give a quick overview of like what solid is and how like a react developer would think of it yeah okay um yeah so as mentioned before solid is a JavaScript framework um for building user interfaces which um you're probably like so what but um it's built off Primitives and you can somewhat think of Primitives like hooks without with not like the same hook rules basically like I've been trying to find the easiest way to do this for people especially from the react side and I think the better I get at explaining this you know the better you know everything will get but because the whole system is based off these Primitives um uh we get away from a component model where everything re-renders over and over again and it's very kind of more explicit straightforward what actually updates for you and people found the DX for that really quite nice um and they found the uh performance that comes with that also quite nice but for the most part if you don't look closely you might think you're just looking at react and um you know there is a huge uh difference between solid and react uh it's funny it's either the show it I know you said that we weren't going to do much Live code but I would love to do the classic demo the the in and out that we always that you always do that I absolutely love cool do you know the playground we can actually just do this online and you can you can take this counter and just add two of them and you can definitely do it I'm just gonna make I guess I just need that yeah I'll make a function page yeah return div counter counter div and we'll make this what gets mounted instead and now we have hit save habitually now we have two counters and you see each of these increment State this all looks just like react right guys you're all familiar with this this all seem how you're used to you all ready for the magic trick the oh [ __ ] want to see how we make this Global so that these are sharing state cut paste now it's global because hooks as we know live within the component life cycle and live inside of your components but the signals that exist inside of solid don't you can Define this however you want you can structure your state your application the relationship between them however you want this is the beauty of Primitives we don't have to think about our state in the context of the react virtual Dom and how it blasts everything out instead we build our state and then that renders our application this I know this is such a simple little thing you literally move it here if you want it to be component level state refresh and now it's component level and you move it out and it's not now it's global yeah yeah hoping this helps to emphasize how cool these patterns are and and just like usually the thing that people need to see can you put a console log in the body of the counter component just oh yes that this just helps the the final bit because it emphasizes people then immediately understand where the performance comes from and why this little thing yeah I mean you don't even need and it's going to give them so you can see like more easily yeah yeah fair enough and ID equals two so here's the two counters we're gonna log which one it is are you rendering props.id keeps saving habitually what you'll see here is when I hit these there's actually no re-rendering happening at all it's not one or two re-rendering nothing re-renders yeah and the the key thing to actually understand is that under the hood and it's not even that big of a hood to lift so to speak solid is literally just replacing the text on that button because it knows that's why the small little thing here is the signal it isn't just a value it's called as a function and because it's a function we can intercept it and then we know oh only the button text cares about this so we basically crunch the whole tree down to like a simple event that goes update this Domino to one little specific spot it doesn't matter how many components you do or use context you can you know you can put something like what the top of the tree like update it at 60 frames per second and like it's only all the work's being done where it's getting consumed at the bottom yep as it is that simple it's weird I it definitely broke my brain for a bit personally moving from react to building things more often in solid where I had to like unlearn a lot of react patterns you can still do things a very reacting way pretty often but the fact that this doesn't rerun this effectively gets run the first time it's called and then anything that it returns that has a call to a signal that will update at that level instead so instead of thinking of this as a component that runs and then reruns when things change you think of this as almost similar to react server components where it runs once it generates the page and then updates happen in Signal land that exists there which is also a big part of why solid solved the hydration problem as we mentioned before and also why it's a compelling solution to a lot of server side server rendered problems I love to dive into that a bit because of the big release today how did we end up in server land for solid yeah I mean it definitely took me a little while to get here because this was Uncharted Territory um uh and the reason for that is like first of all I didn't get it at first and this is I'm not unlike a lot of people I built apps behind logins I you know I I was an app developer and people made like real world demos and like more complicated apps and it didn't matter some of them were like SSR in them and the funniest thing was and I blame Lighthouse for this a little bit um I was outperforming the SSR apps with solids client-side rendering and the reason I was doing that was mostly that I'd come up with really good patterns in our router to parallelize data fetching and uh code splitting so I it was like very very effective and I built that right into our router but at a certain point you know I you know around the time I started talking to guys at eBay and you know that a little bit before I suppose um someone's like well you know I realized like turn the network down use like use a slow device and then I realized that fetching on the client was actually incredibly incredibly slow compared to like the basically all the network latency catches up with you so I realized I needed to look in server rendering and this was about like 2019-ish um so yeah I mean this little little long winded I guess like I always am but essentially I just started working on server rendering and trying to look at the best um fastest approaches to server rendering and Marco was that and and the trick they did um was just render to a string I mean it sounds very simple but don't make a virtual Dom don't make any kind of representation and for for me this wasn't too hard because the only solid doesn't someone mentioned earlier like oh solid seems like spelled but it's actually very little like spells felt is actually more like react reactants felt are actually very very similar um and I know that's going to break some people's brains but this is a true statement um and what I wanted to do uh uh was figure out how I could like get you know my fine-grained reactivity into onto the server and uh Marco strings um were something that I could compile to like the jsx already compiled different for solid that's the only part that compile's different um I could compile it to Strings and basically actually remove the reactive system from the server for maximum speed and essentially on the server the jsx instead of being like some kind of structure it's literally just like a bunch of strings getting plus together plus plus plus and building this up and uh yeah I mean I could go really deep in this could be a really long story but the shorter story of it is um working on the Marco team saw the importance as things like streaming um and uh looking at stuff the react was working on for async basically the Marco team had invented something called async fragments as a way of like swapping in like out of order content sometime back in 2014 there's actually an article on it somewhere and uh what I realized was that they they invented suspense but back in basically 2014 and so I I implemented that and I used that to figure out how to get streaming support and how to get all these kind of like server pieces but um ultimately solid is still like a top-down Library um like uh like we still have to render everything once so um I was pretty happy with that for a long time and that's basically uh like the foundations of how I ended up getting into building a meta framework because we I built server side rendering and I realized that it was going to be like I made demos and showed people and then and they were like I wanted server side render too and then like every single person who tried it like hit some weird issue and I don't even mean with like solid like they couldn't figure out how to configure it they couldn't figure out like you need multiple builds and like oh you're in Dev well in Dev you also need different builds and like your Dev server how does that interact with the client like if the change is like something that could you only run on the server and like but it affects the data like it was just a big mess of stuff and honestly I was like really secretly hoping someone else would solve this for me like we I'd come up with benchmarks and show us all it was really performant but no one was using it for Server rendering because it was so hard to figure out how to wire this up um and yeah I mean it was actually kind of interesting the first attempt at a SSR fragrance a solid what's called Snap and it was created by the guys at Builder IO um of all things as Steve yeah he he just he did like he was like okay yeah let's make a solid because he was playing with solid at the time um yeah yeah and and essentially like he'd taken solid at Builder and he saw a huge improvement over the hydration score like we didn't get him to a hundred but we got him to like a pretty good place right and and he was like okay well we need an SSR framework to fully you know test this so he was he worked on that for a bit and mitosis originally was built off solid's language like we were like can we use jsx to create every other framework and we I was like yes but like you need to be careful about the language and it's because the language of reactivity has kind of become Universal and uh I know I'm not jumping all over the place but to explain this is I think everyone who's used react will get this you have U State you have used memo and you have use effect you have these three things right every reactive Library also has these three things now in react they work differently but you have the same um intent like you have the same like like you like this estate this is derived State and this is some side effect and essentially because of this Union of of languages we realized with mitosis and maybe something like jsx we could actually output every framework over time they move to more react because like obviously everyone writes in react but it's actually a subset of react because it's actually a real pain to deal with like all the memoization stuff in react like like use like use ref when you're not a Dom node um use callback react.memo um there's a whole bunch of like apis specifically for this point and uh they don't like they cause interesting logic when you have like two things that need to talk to each other you now have to store it in a ref if anyone's ever read Dan abramoff's article on um like the use Effect one right so what he tries to do like a set interval with it um yeah and by the end he like makes it but he's using like multiple refs to communicate between two effects and he he's like very like don't get me wrong like it's a very clever solution he's very proud of himself in the fact that he took something completely ugly imperative and turned it into something declarative but for most people reading that they're just like I don't know if I would have come up with that on my own right and people always like that example in solid because literally the example you start with just works and you never have to do any of it but like the the important part about that is it you introduce all this language that makes it harder to get back to the pure intent so it's always easier to take something like solid and compile it to react than take something like reacting to Pilot to solid you know crazy tangent but just explaining where mitosis actually came from but anyways yeah I I I essentially I had built the pieces I built an isomorphic parallelized data fetching router you know all that kind of stuff people been kind of talking about the stuff a lot and react recently even like react location but like we we've had this for a few years now and um that's because like Ember back in like 2012 again had already figured this all out like um I I like love watching that chain of progression over the years because like like react router is also a big influence for our work but you can see Amber's um influence everywhere like have you ever wondered why your length link tags have two like why wasn't it like href or something and why is it called blink and all that stuff this is directly from Ember um so yeah if you go you'll find it you'll find what I'm talking about good stuff yeah I this history has been so crazy to watch and there's so many parts I wanted to respond but I didn't want to interrupt the the one I keep thinking back on was the thing about svelte I think it's really important for people to understand because externally if you're not a framework author then svelt looks like View and solid looks like react but internally if you look at these things svelte works a lot more like react and SolidWorks a little bit like view in one of its many implementations of how things can sometimes update but not really it's fascinating to think that like solid the same way I say that next JS tricks react developers into being back-end devs solid tricks react developers into writing performance code I love that I need that I need to use that yes that's awesome um yeah yeah no that's great uh on that note I do want to talk about the really cool back end stuff that was released today because yeah there's a lot of cool things about this but I want to talk or emphasize one point before we go in which is something that we've touched on a lot Primitives the the moment I went from liking to loving react was when hooks happened because when hooks were released it was like oh oh my God I can abstract my state and build State Primitives that do the state things I need in my application the same way I can make a component and reuse that suddenly I could make a reusable piece of State like a way to fetch user data and reuse that across my app hooks gave me ways to do that State Management and manage the state out outside of the component life cycle while still living within the react virtual Dom even then though like those Primitives were very very tied to the core model of reacts Dom it just gave us an abstraction to let us think about them in more isolated ways and reuse those isolated pieces that model has broken my brain and made me really believe in react and I still firmly believes a lot of why we've seen the community form around it that we have where people like Tanner can build five libraries that integrate really tightly with react but also let us build very different things than how react's original model worked I have not seen the same approach in back end very much trpcv10 has started going down this path with the new uh procedure model where you have a procedure that you expect extend and then you throw in an object and consume where there's this base piece that you consume from the back end and one of the things that I was really excited about with solid start when I started looking into it more is it feels like you took that same primitive mindset of building reusable pieces that you that do not or that don't do much but do the thing that they do really well which is scary at first when you look at the code but it's so much more powerful once you remember once you learn those parts and are comfortable with them I'm curious how much primitive design was in mind when you started working on solid start yeah a ton because I I almost got to it so this is good that we got here I I I've made it very clear I don't like meta Frameworks I didn't want to create a meta framework I never used create react app I built my own config I did all this I felt weird pushing this on people so the only logical thing that I could do but if I wanted to get the medical framework space was make it modular so that anyone could just not use anything I did because I hate telling people like what to do in that kind of sense I don't mind having opinions about specific tools or specific pieces but for me I want my stuff to be adaptable like modular swappable um I don't want it to be flexible flexible usually just makes your stuff like eventually suck like it just gets slow and Bloated too many options all that I just wanted like these building blocks essentially and that meant there was a careful balance here because you don't want to like overwhelm people and go like here's the whole bucket of Lego but like on the other hand like uh I still didn't want to do very much so um luckily there's two pieces to make this possible and the biggest piece for that was uh beat and beat uh 2.0 release because they introduced a universal plug-in system and for most people this seems like something really small you're kind of like oh like uh so what like we've had roll-up plugins and webpack plugins forever but it's like such a simple thing when you're building this environment for SSR you have a Dev environment so you have like Dev servers you have the client build and you have the server build and they're all different you have like four different combinations and I actually was in snowpack at one point like building all four of these like as much you want them to be the same there are different considerations in each but there's a lot of overlap and then you end up like in this mess of crap and the problem is then like you're working from four separate routes what V did with their plug-in model with SSR was they made it an option so like every single plug-in can serve all four scenarios so now you've just sliced things in the opposite direction like you instead of slicing things like uh you know like it's like horizontal versus vertical like you've changed the way that you can compose behavior and this is the key we saw this right away at that point I was like ah sweet I don't have to run a meta framework I just have to write some beat plugins um because like it suddenly it was like oh what's the concern file system running okay like it's one vertical what's another one this and we could just keep on adding as many as we want and like even not force people to even use them like who cares um and that was really important to me the and as I mentioned before I'd already built a lot of pieces in the in the ecosystem kind of like a Tanner like in the sense like oh I got a routing solution I got this solution and just hoping that people kind of stitch it together and not have to like do this like like build a meta framework um so I like took those two pieces and mentalities because I wanted to use our existing route I didn't want to make a new solid start route or whatever and this ability to have these like like plugins that just worked and I said this this completely changes things even though it seems like such a subtle thing like Evan to work on beat on the API surface is so smart the second I saw it I was like this has everything I've been looking for it's like it's like we didn't talk to each other and then it's like you find that green product that you've been thinking about in your head and like but didn't want to write yourself like like even the glob Imports like like there's little glitches and issues with v that they keep on getting better with every release like generally yes build that is a react app in order before to recognize jsx yeah yeah yeah yeah yeah yeah yeah yeah yeah react is react is funny I mean react is so de facto in tools I mean you go you almost got me on like another tangent kind of thing here but like like you don't understand how frustrating that is especially on jsx tooling and stuff and like like basically they just go they go oh cjsx it must be react and some tools have configure around it but even typescript jsx and typescript for react pollutes the global namespace like everyone else is nice they're like okay I'm gonna import my jsx but no it's like if you don't do that react is just by default everywhere so it just keeps on sneaking in like this whack-a-mole you're like Oh I thought I removed all the react no it's still there and it's it's like same thing with all the build tools and stuff everyone's like oh yes I like my opinionated build tools and but like you can if if you're pretty or basically compiles react like then you have a thing and like typescript is a little bit like that um all opinions everything is essentially react and it makes like it just like there's so many little things you hit and like that's another reason reason to iron this out in a meta framework so you don't have to worry about it because there is a lot of this kind of messiness behind the scenes just because these are these kind of assumptions it's very hard to make agnostic tooling um because it's you know you cater to the majority but sometimes that catering to the majority like is like completely alienating like it creates a cycle um and and the funniest thing is sorry yeah I'm just going to keep them going no build tools and like the the recent kind of move towards like no build but actual build like if it was actually no build I'd be like whatever but let's face it like your pre-act jsx is getting compiled the browser does not understand jsx so if you if you've made something that's no build then you've actually just probably just chosen a favorite like it's it's not that it's no build it's just like we only support react you know like and that's that's kind of the interesting reality face it's like because we we are so far away from that we every framework has compilers and you know tree shaking and code splitting and like so much detail going to deliver these optimal packages we've we've stepped way past in our tooling it's not just about like Babel you know like oh now you know most browsers support modern syntax you don't need it no our tool chains um have incredible amount of AST Transformations that are not the standard ones so anytime we try and like simplify and just go like okay it seems to be fine you know it's usually just pinpointing on like okay it's react it's fine so I like es build versus swc like that's the thing I've I never it's funny that we use es build now because of veed but I had like almost no interest about es build whereas very very hot in swc because just swc enables stuff like I don't care how fast you can go to do this one thing if you can't support like anything so okay that's that's my right we chatted a bit about this yesterday I want to make sure I wouldn't like go too deep on any of the like many rabbit holes that exist here so I'll just drop a quick joke but it is fascinating to see how things like V and things like Astro are both lowering the barrier for entry to do something like SSR in your application in your framework but at the same time force you to way more deeply understand their architectures and solutions to the point where you are you're thinking in terms of horizontal versus vertical like plug-in Integrations in a bundler I saw somebody chat lists like they're struggling to even comprehend how someone can get there with their understanding of a bundler like V but that is like you've traded the need for a deep understanding of the entire ecosystem for a need for a deeper understanding of this specific Solutions philosophy around it yeah that's fair but the the beauty of this is in the end you want a meta framework or something so it's going to look like to you like a bunch of plugins that you can in your CLI just add you know what I mean so I think it's okay but yes for me um personally working on this stuff I have now learned a whole bunch of stuff that I did not know before um I can't even imagine I need to do two shout outs really quick the first one is to uh Fernando uh FDA ciuk he just rated us with 50 viewers appreciate you a ton man you've always been a real one always good seeing you stop by thank you a ton I shouted about earlier in chat I'm gonna do that once more quick make sure you guys are all following him great additional one of the like earlier programmers on Twitch too he's been around way longer than me so definitely give him a follow good having you here man as always one other quick shout out so I'm looking at YouTube I'm seeing a lot of viewers like 270 of you love you all but there's only 121 likes which is really suspicious because if you didn't know this likes are free and they help the channel a ton so if you don't mind hitting that like button we would really appreciate it helps the channel know how some people see this make sure people know what's going on and that they can come here for this so yeah sorry for the interruption had to get those out shall we go to the article to show off how solid thinks about SSR in the modern times yeah yeah because this is this is this is where it all is yeah super hyped on this so introducing solid start the official Beta release working on solid for a while yada yada anything in here in particular should I just scroll the only thing I got to say about the intro because someone told me it was too personal um yeah right I it was just you know that you know the promise I create the framework at first and I didn't care and I was just doing it and then after a couple years I was like okay I want to show you this cool stuff I've been doing and then at a certain point I was like okay well you know if people like oh should I use it can I use it I'm like well if it's reasonable for you to use it but at a certain point I got this trend of people who are coming to me and being like man you know solid looks pretty sweet once you have blank uh we're gonna give a shot you know and then and but I kept him running to those people again and don't get me wrong I I I I think they're being pragmatic and good and I that but it was just hilarious to me because every time we did what they said they were just like oh yeah no that's really good um when you guys have this we'll do that like this chain never ended it was like oh SSR oh 1.0 production release uh component Library um and then like it got to like like uh like metaphoric after a while I was just like I've just got this checklist that I just need to go down and it it has basically stopped at next JS that was the thing apparently today next js's table Stakes for any kind of JavaScript library you have to be like an actual framework for anyone to actually use you so that's why it's all start is here and that's what the intro is because it's it's fun it was amusing to me because like you like how long do you chase this stuff for um at a certain point you're gonna you're gonna try it okay I think that there is a lot of value with like you in particular and how you are so well known for knowing the framework stuff in particular in a lot of ways solid isn't just like a framework people use in shipping production it's a a model for us to learn from understand and grow from an analogy is going to make earlier is like the Death Grips to Kanye West Pipeline where there's this crazy Indie but decently popular group Death Grips that makes music the vast majority of people would never be able to listen to because its goal isn't to be listenable it's to to prove something out I feel like Marco's kind of in that world where you're the bridge showing how these things do apply in a more General way and how we can learn lessons from those more chaotic experiments and apply those day to day but we have to get over some of our other [ __ ] first and that's what I see when I read here it's look I've looked at both size I've seen the extreme and Death Grips land over in Marco and I've seen what Katy Perry's doing over in react but how do we go from one side to the other this to me is you saying how we're doing that yeah yeah yeah no this yeah there's a lot of thought into went into these things so yeah um let's let's keep let's keep keep going so what does it do yeah um it's a modern JavaScript framework uh which means that it does lots of stuff I and I actually got to give a big shout out to remix right at the beginning here because um they were the first like we all do this like request response thing um uh spell kit that's where I got it from remix uh quick City Marco like everybody does this but remix were the first ones to actually build like a session management and cookie storage and stuff like that and what's the reason we all use the request response models because that's what all the edge functions use they use stuff like Dino and uh stuff like um cloudflare and so we're all building towards a spec and it's actually node the odd one out and you know they support streaming and web streams and all this stuff so we built our platform on that uh remix got us session management um V got us hop module reloading and you know for the most part that you know it does client you can turn on SSR or not SSR it has most of the like the basic features um but then I can go to talk about a few of the specific ones gur yeah you knew this was going to come first yeah I I feel like this is table Stakes now as well as much the tricky part is like I mean you can wire this yourself and you do all the lazy Dynamic Imports and do all that stuff um and everyone has their fun syntax you're like trying to scroll path it out of the screen before anyone looks at it too long but uh no I mean honestly we just took this from Knox to next it's the classic you know square bracket uh pattern the only difference is you can use uh parentheses style to do uh nameless routes so you can like do off like be under this it's those kind of patterns and the thing is we realized and again people don't have to use this all those things would uh parentheses could just be index.tsx if you wanted it was just we realized that we already had nameless things so like why not also just make those things nameless as well so it I like this personally some people like naming their things layout and page and like having a thousand pages and a thousand layouts I'm like the complete offset I want all my files to be searchable I want to know I like I want everything to happen nickname you can do that with this router and if you really really hate nested routing you can just not use it if you scroll down a little bit uh past where we are right now you'll see that hydrogen had this really cool idea in see the routes component in this little example here is just solid routers Rous component if you've used any solid before you can just use it so we just export the file system routing as just a route definition that you can insert but you can also like put other routes in there or just never insert that file routes thing this is the most elegant way to nope out a file based routing I've ever seen this is beautiful yeah you just don't don't don't don't include it um you know don't use the routes folder like we do routes folder just put your stuff wherever the hell you want it and then import it and then just use your jsx definition you can think of how to write a unit test that would check to make sure you didn't do this I would just import the file route component mount it in the test and see if anything's there if anything's there fail you yeah yeah so there you go um I know not Everyone likes this I think this is a really good way to get started I love this this is such a good example of The Primitives thing that I was talking about where like instead of making this crazy config file somewhere in the code base where I have to go to Google find the doc find all the different keys that do the different things I need and then realize the key I need is actually a weird thing I have to export from a file and then and only then I am finally now allowed to change or turn on or off a feature that I want we're here file growth is a primitive it's an actual component that I can import and use or not use that feels much more it like it's convention over config but what I see here is the best of both where it's a convention that is a primitive that allows me to config in a logical composable way yeah and honestly hydrogen 100 hydrogen this the the Brett came on my stream and showed me this and I was just like thank you this is like this is one of those things that just like bugged me a little bit and I I know see the problem sometimes when you make the perimeter Choice you'll usually lose one layer of nice city on your abstraction instead of just having one component you import in your root you know file you now have to import two things you have to import routes and file rows so everyone I mean we auto-gen this file so it's not a big deal but everyone takes that cost of typing those you know having those extra characters there um to enable this but to me this is such a small thing to enable you know so much like it's completely worth it from my perspective I love that I saw somebody chat say this actually means you can write your entire full stack app in one file in your root.tsx which I love funny enough even Ryan Florence on the remix side was recently publicly complaining that he feels like it's a failure in their part that you can't write a whole remix app in one file if you really want to right and and this is something we can actually completely do because um our route like our data because I told you we use our routers so our like loader equivalent is essentially um it's just a function so while we have a convention in our files with like export cost route data you can also use a convention uh naming it the same and going dot data which we don't talk about and we kind of stop doing but my point is if you're doing the config yourself literally you could do whatever the hell you want and just import the loader function from anywhere and just put it in in your route definition so like we we don't have any strong ties to the file system running I love that I this is the least I've hated file system routing in a while so I appreciate that a ton but let's talk about server functions because this is the thing I've been eyeing from the corner for a bit now and I am I am so hyped on how we're doing this yeah I mean this this one is also the one with the most interesting set of trade-offs and considerations and if you since we first talked you might notice there's like a dollar sign on the server uh thing and I actually should have given quicker shout out for inspiring the the API design on that that was a Miss I should I should do that but essentially solid start has API endpoints like you're used to where you can like make a file and have like gets post set and we actually use cap case that we got for install Kit we think it makes it very clear that these are special exports um I think I think Rich was like right on with that um but before like that's fine if you want to make an external API but it like for solid start like the Baseline you're making like these monoliths like that's what all these meta Frameworks are they're like these little new monoliths so my uh approach of choice was RPC um and I mean I've seen trpc get really popular and stuff but like this goes back to I don't even know how long because I remember I was first suggesting and someone's like like Blitz and I'm like uh I don't know Blitz is because I was not in the video like but I I saw Blitz I was like yes yes like Blitz um so like I knew when I like if I was gonna do the meta framework I wanted to do RPC calls um and I was doing it with these proxies and stuff which you can do a lot with proxies but uh nikhil also installed a start team was like uh yeah well we can just make this a beat plugin uh like so it's like a compiler like we just like opt-in and be like let's add this one plug-in that transforms this and that's why it has a dollar sign because technically speaking the content inside I mean it's kind of obvious runs on the server so the only variables that it can access are those that are in like file modular scope so we have to indicate that because you can literally Nest this anywhere in your components like you can literally like inline it if you want in like the middle of like in a fact or something so you know you have to know that closures and stuff don't work and that's why I'm made the dollar sign so the the you can do that I'm not telling you to do that I'm just I'm just kind of throwing it out there but it is actually interesting in terms of how you inline stuff because there are options for that but essentially what this is is any function you pass into the server function gives you a new function and when you call that function if you're on the server it just calls it as normal and if you're on the client it behind the scenes does a like a Ajax call and the code that you write inside your server function is always on the server and because it's defined like a function with a function wrapper like this it is very easy to just use typescript to to type everything the return type the arguments like whatever the hell you want and you know it's it's very simple mechanism because it's like you know like this example is like I'm I'm saying hello I I don't know why you want to do this but it obscures the whole like API route URL thing like if you really want there's a greeting dot URL on this function if you want to like plug it into server-side events or do like fancy stuff with it there is a real URL behind it but we let you put as many of these as you want in a file and essentially we just give them their own URL endpoint and you can just like here you go here's a function call it and it's it's amazing function so you have to await it or then it but essentially it just type safe for as type safe I guess you can get across the wire but you know function that runs I don't know yeah this is this one has chat going they are hyped on this as I expected as a US trpc nerds are bound to be the one question I want to jump on before we go too deep in is the serializability of response data like if I was to return a date time here what happens yeah yeah um let me see what I I need to double check uh what we're using for serialization right now I know we are not using solid standard serializer this is something that we probably should look into uh Maples quote this is the Nirvana as [ __ ] of server actions yeah and and one of you guys are going to probably go in there and be like you're not serializing this right and we're like okay yeah let's let's do something let's get super Jason or whatever the hell is this we're in beta right now this has worked fine for all the simple crap that we're doing I we will make sure that this uses something that like because the beautiful thing about that serialization is like all the work happens on the server it's not going to push that expense onto the client too much depending on which Library you're using so we're we're going to we're I I need to double check this I said nikhil built this as a compiler my suspicion is that this is using something very very simple and we should use something a lot better because solid's own internal serializer can handle a whole crapload of stuff but I'm pretty sure this is not using it so um good point yeah you have maple very very excited right now and I'm hyped too I thought I showed you this earlier when I first saw this in a demo I was like oh God Yep this this is it I obviously keep a close eye on all of the similar things I'm I've heard both contacts for the audience and also because I'm curious of your thoughts have you seen next fetch yet no no I haven't this is a package by schnizz schwizz whatever he goes by schles I think as well he's a somewhat recent hire at versel he built f m which is the node version mod or manager rebuilt in Rust and is a hardcore typescript nerd and started hacking on next fetch as a kind of an alternative to trpc built very specifically for next because it's heavily surrounded by swc and the like swc compile hack so you export const use message you have query it takes two things first thing is a Zod validator for your input second thing is your async function for the output and then this at compilation time is turned into an endpoint and then when you call it it does the fetch what this doesn't do is the direct call on server when server rendering as far as I know at least it theoretically could I don't think it does but you're now allowed to effectively write a function export it the catch being this has to be in a special file named.swr.ts before it will work but as long as you name the file that way the compiler is smart enough to export this like a normal hook even though under the hood it uses either SWR or react query that's interesting yeah this is very similar I don't know when he authored this I don't think he saw the solid start streaming I I have been keeping a close eye on all of these projects and I was trying to send him docs on the way solid was doing this and they didn't exist yet so I couldn't yeah yeah no this is actually very cool I'm not surprised we're all working towards this very similar place as I said my first version of actions used proxies and that was like 2021 sometime and the kill was like King we can do something here so yeah I'm not surprised at this direction I think this is very like this isn't like it's kind of the the obvious like next steps to kind of go you're like okay if I can do this how can I get the you know like you control both sides like why not I think where it gets challenging is the next level but it looks like he's uh he was actually attacking it as well which will con will do too because I saw a mention of a form component and that is definitely in our in our thinking oh it's my favorite time yeah I'm sure you knew this was coming I'm seeing a new spectrum and I want to describe it this is the where your server code goes Spectrum and one side here is a back end service so something like nest.js or some chaos like rewriting something golang or whatever or some [ __ ] like a service that is exclusively back in nothing else and on the other end thank you guys have won this is solid start server functions and it's interesting to think that on this side you literally just put the function wherever and you can call it on the other side it's oh you need to go you need to understand the infrastructure before you're allowed to do that I think that next fetch somewhere around here I think that trpcs probably tirish I think remix goes a slight remix is interesting because like you don't in remix you don't put in a separate folder but you're more limited about where you put it so I'll say that remix and trbc are kind of closed it's either here or here depending on how you want to define the Spectrum we have uh react server components should I say are honestly pretty close to remix maybe a little closer to next fetch uh react server rses I'll put that a little closer to next fat all right I'd say this actually a little further because it's in the component it's a little further the next fetch then you have like get server-side props which is what it is the the interesting thing and I mean this is the thing I'm trying to think about is what I love about modularity and Primitives like this and the same thing I was explaining earlier when I was talking about the loader data functions is yes you can co-locate I love the ability to co-locate because I love the ability to put the whole thing in the one file like we talked about but there's when you have that ability Nothing Stops you from not like from pulling it out into separate files like you can you can like you can make a like a file full of server functions or whatever you know like you can make it you can Define it like a special API you know you can have it have all your database stuff in a you know like a separate place and then like import it in and then you know wrap it I just saw a point from the Keel that is resulting in me wanting to ask a really crazy question so nikhil pointed out that you can use this in a single page app as well with SSR turned off you would still need the server though to run that stuff which has led me to a much more chaotic concept would I be able to use solids starts server export a bunch of these server functions and then import those in another app probably a solid web app but maybe something else and be able to import my back end as a package for multiple different things that still does all these same compiler hacks that's interesting nikhil might actually have to be the one to answer that question unfortunately um I'm trying to think in like how this would work in a separate place because the V plugin is what just gives us a chat by asking that the the V plug-in uh is what gives us the identity it uses like the file the hash and like stuffed in order to figure out what the URL is so then we can put those anywhere so I don't know if we can link up both sides yeah Nick Hill's gonna have to answer this one for you I think uh hopefully why are people offended that would be so cool if I could make a back-end package that I can Import in multiple things and the functions just work like that's so cool that's so cool but I guess I guess the thing is he said yes like so the answer is yes theoretically we could actually do this yeah yeah yeah sorry I wasn't thinking right because you make the module like that and then you'd import into your app and it's at app time that we do the transformation so yes yes that makes sense yeah so it's gonna pass it the URL for like what the web server that it should be going to is and from there you can do that I actually do this a bit with trpc already where I have like a separate trpc like package in my mono repo that exports our API and I can then import that in our next react app both the server side to deploy it but the client side to fetch as well and then on like a react native mobile app I could also import that same client from that same package and the overall experience is just magical that level of like re of like code sharing but you're like code sharing is also infra sharing and that was like the mind-blowing moment for me it's like I'm not just like sharing a graphql schema and generating something different for each client I'm actually sharing the code itself in the server even if I'm not using that code on the client I am calling that code from the client like a truly Universal RPC layer and the power of this RPC layer is cool enough that I now want to abuse it for those purposes yeah I mean I look forward to I don't know if we're gonna hit some interesting edge cases but oh we always do but generally speaking um this was the thinking nikhil's done lots of stuff with this like as I said the URL on the server function had allowed him to like he he's got web sockets with gerbil objects on the edge on cloudflare doing like yeah like he made a chat app I you know type thing with the gerbil objects on the edge using this server mechanism yeah like yeah it's it's wild um anyway I absolutely love this this is this is such cool stuff I am hyped I and this is the thing I was hinting at earlier with the Primitive stuff this is what a truly primitive back end piece looks like this is a thing that you create and then you can export import do whatever you want with so if I was to read architect this to be about how primitive are these patterns like how much can you import something somewhere else this would actually flip a little bit I'd say RFC is a next fetch our I'd say RCS are a little further next batch is not quite as far but still pretty Solid remix goes way further down closer to work get server-side profits because you have to put the loader where you want to trpc stays a little closer here not quite but this is like how how much does the framework tell you where the code goes in solid start server functions you you it seems like you almost don't have an opinion which is really cool I don't like the pin I don't like I like having specific opinions about a specific thing not permanent is over prescriptions yeah yeah or yeah yeah all variations of that saying um but but the thing is like this is powerful this is almost too powerful like this is just like so we we're like okay I this is where we started and I think a lot of us like even nikhil was like yeah okay we're done like we've done it like I I did ask everyone for one more layer and it's because remix was starting to get popular and I really appreciate how simple remix has made things for people and I was like can we get like 80 of that Simplicity and not give up what we care about and um that's what that's what we're gonna go to next on in this I've had something I've wanted to show on stream for a while and haven't had a good enough reason but we finally do we're gonna go to npm Trends real quick uh is it.com yes cool so I want to show something that blew my mind recently at remix slash uh react is the primary remix runtime we're going to compare this with that trpc slash server seems to be very interesting and I also feel like I have to resize this window in order to show this off without doing other things so I'm going to do that resize so y'all y'all can see with us here that somewhat recently trpc surpassed remix for adoption so while yes the remix patterns are catching on huge and they are I think that the trpc Primitive patterns have struck a stronger nerve with the community overall and I think it's important to acknowledge that the Primitive type-safe design that things like trpc enable combined with the like more granular adopt or adoption patterns and opportunities that something like trpc offers are super valuable and I do really like that solid is leaning into the more modular more primitive approach even if the co-located data loading patterns at a route level are a powerful and arguably more performant by default pattern yeah yeah and that's where we want to go and the I said 80 remix the other 20 is something that we put on this graph the whole thing would shrink at like Flatline and that's a react query or tan stack query that's the other area query for now so you can see and yep now I want to see something I'm actually really curious uh react query versus next is beating react query but not by as much as I would have expected that's fascinating to say actually yep God I love looking at npm Trends you can learn so much from here anyways yeah at the end of the line there's this big spike it's almost like they like had a conference or something just the other day yeah crazy weapons I know excited for it to level back out right after yeah okay let's yeah so I think I everyone more or less gets this do you have any more questions on this so like like the oh yeah do you know what I didn't say like this can be kind of anything like we're returning uh simple bait objects and when the simple objects we just handle it with like our standard serialization but we like we were like how do we unify this model a bit and and nikhil's like well yeah we can just return requests and like our response objects like actual web response objects too so like this RPC mechanism actually can also function as like a normal endpoint where you can set status codes and like do that whole game um so yeah how would I access that in here like with this signature what would like the key I use or what like what I put in here in order to get access to the request object yeah I believe uh it's like we actually just hang it off the server function if you so if you go like server dollar sign dot request you actually just like have the request right there interesting that is yeah we had some options we're talking about this and stuff um but yeah like it was it was like it was that was one of the trickier Parts about this API um so to speak is figuring out how we can get it in there because it is context based like where it's running and when it's running um so yeah we we kind of we kind of made it almost like a lookup like uh essentially I hung it off the server dollar sign object uh so interesting yeah I always get a little scared when I see dollar signs in my code nowadays but I do get the distinction here I'm assuming there's also like a lint rule of some form where if you try and call this inside of something with a closure it will like error and tell you such it should I don't know if we were there completely as I said beta I get to make a lot of excuses at this point so yeah I I that we we should be smarter with the compiler to tell people when stuff goes wrong I actually think think heels actually have some stuff around those type of errors yeah I I see Maple would have preferred that that the function has like two like inputs one is input which is the thing you type and one is request which is the request so that you have it here instead of resolving it from here I'm actually 50 50 on it I really like that this is just a function that you write a generic asynchronous function and if you really need the server stuff that it becomes clear you do because you consciously pollute this like function internally with the server dollar call it fails to be like it's clear like where this is as soon as this is called this has to run on a server in solid server whereas if you had custom input types here that would be less clear I'm I'm 50 50 on it I hear what you're saying Maple but I do think that both are fine yeah we we had this debate obviously um multiple times so yeah this is where we were the it was it was me I was the one who was like I just want it to be a function and like I do this a lot because nikhil's more on the flexibility side he's like oh this and this and I'm just like at the end of the day like I I often like if something feels too complicated from A Primitive standpoint it's like either doing too much or it's not right so like I was just like sitting there going like no no I I was like insistent sometimes and he he sometimes he'd be like you know trying to push me a little bit on and I just feel like no this one just needs to be a function once it stops being just a function it just doesn't feel right and I know that's such a weird like what do we talk feeling kind of thing but that's how I approach this stuff at times it's funny yeah I really dig this I'm excited to see how we do actions though as actions do behave a little differently right well and the first thing before I even get into the road data and actions is you know solid has create resource which is like our like pseudo not it's not it's like half of react query it doesn't have any of the caching or any of that stuff it just has a very simple way of updating and turning out async uh you know promise into a signal but what I want to point out in this like little example is the fetcher function that you pass in as like the second argument you will you can just like wrap it in server now and now it's like your call to your database right that's that's why I'm talking about the power of this primitive this is why you don't have the arguments because you literally get to keep the function as it is and you can just like inline it to where existing functions already exist in your code base like kind of patterns right very interesting I I is the role of this function call here like I haven't done too much create resource this is to like create the key and this is like the case post slash this we are now keying as the response we get here right yeah exactly create resource inside the get post ideal get the ideas as the argument and the reason that um it's in a function call here is that our keys have to be reactive so that piece is always going to be in the browser this is why we can't use async loaders because we want fine grain reactivity we want this to only change when that param ID changes so there this is this is where there's like the bit of the API thing I like a lot of systems are just like async load or easy done for us we're like well what if you want multiple resources what if you care only on certain specific things to change you want to update so that reactivity is always in the browser so it was funny create resource always had that separation because I always made it that only the source was reactive and the fetcher wasn't um and the reason we did this was for um serialization so like when you server rendered something you we could create the promise and then when you hydrated on the client um we we went fetch again and we generated a a promise in the browser and then it would resolve as the as the server finished it so we like kind of like threw the promise across the wire um I needed to separate the reactivity so that it wasn't always generating bad promises and and by pure chance of maybe good design that also lines up here which gives us a clear boundary between the client part and the and the server part here that we have to wrap um interesting yeah I hadn't thought of like the boundaries there in particular and well this is this is I show this to be illustrative and I show this because if you replace create resource with solid query or with um whatever turbo query or whatever you actually get these server only functionality with your favorite data fetching library that you already use I I like that you're not providing this a lot of Frameworks felt it necessary to like create a new use loader data or use itself and this is you didn't make another new thing you just did it I we did though create a new thing we're just not far enough now I'm sorry data here we are a new thing yay what's this new thing what does it do right sorry like so I did this because I wanted that that possibility but the problem is create resource doesn't have caching doesn't have all the stuff you have in solid query and out of the box I'm not like I wasn't gonna be like you saw a query uh necessarily or use this thing uh we want I was trying to find something the most minimal that we could ship so you can understand why like with The Primitives you still sometimes need to do this this is where I told you nikhil was like we're done with the server and I was like no this isn't nice enough so this primitive is your Baseline you don't have to use it you can just forget about it and go back to your server just use your solid query or whatever but what we did was we slide this is a resource under the hood but it's a little bit special we need to register these resources because um these ones are special like the key now the source is now an actual key and you'll notice this pattern it's very familiar um I took this like straight from tan stack query this is the like his array pattern for a validation and partial invalidation and like essentially you have a key and then instead of returning like a topple with a bunch of extra options this is like super simple it literally just Returns the accessor resource so it you can just straight pass out the signal you can put like multiple of these in your route data function like the route data function is where the route stuff comes in this is like the the loader so to speak that in these examples but it runs on the server and client which is why we're kind of explicit to see create server data dollar sign means that the first argument is going to be wrapped in a server function that's the convention here so um we made this there's also a crate route data without the dollar sign which is like the non-server compiled version but you're like why am I doing all this well the reason is we needed a way to tie resources to the route so that when action and validation happened that we knew what to re refetch and the default is if the actions like don't do anything don't provide a key we refetch all the route data should sound very similar to remix so the role of the keys is less for a cache and more for a refetch trigger so this is like an identifier that an action can then use to say hey by the way solid everything that has this key is wrong now go update it yes exactly so what we allow for us is for our actions to do granular refetching uh instead of just redoing the whole route page and you can have multiple of these things that you want and um yeah I mean essentially uh yeah I I don't know what else to say about that pattern it's this is the the most different uh I've seen so far one quick question is is the route data naming special is by exporting something named route data on a like route file is that what triggers this Behavior or is the thing I could import name whatever and use however no it is special because we need a way to find it like for the file system routing to work we needed to find a location I told you you could literally if you made them config yourself you could actually just import it directly and put it on but the file system routing needs to find it so we that that is special because we need to name it um if that makes sense interesting and almost like the best I could describe it is the way this feels externally is that you built The Primitives that we see here yeah and recognized that to use these Primitives to have something like remix data loading patterns for parallel loading like in a nested route you would have to build a bunch of things and rather than leave us the community to go build identify and do that even though you call out how we could do that if we wanted to ourselves you gave it to us in these shapes yes yeah yeah that's it I I I felt it was important to go get to the end because a lot of people come in don't care about all the cool stuff that I care about interim primitive so I was like as much I I didn't want to block you this is very important but I'm going to provide a few tools so that like the person who starts up and this is their first project and they don't know anything they don't know what they like they have very same defaults in terms of like how to approach this you get something it's like it's it's like a little bit more than remix like by default yeah we refresh the trout data what's special about uh our server data or route data that we have here is that it is a resource but it's actually a store underneath the hood resource so it's really cool for resources and solid core I don't opt into this because I don't want to make that decision for you again a promise to a signal is the simplest thing but we have ability in solid to say what the underlying storage of resources and for these I I again opinionated I made it a store so whenever new data comes from the API call it does a data diff inside the Primitive and then it's only the fine-grained pieces of data that change that actually updates so like even though we refetch all the data on the chain on the page you can picture like you have a list of users or something and they with some addresses and one street name you refetch all the data which seems kind of wasteful but whatever and you and you and but only one street name changes solid only notifies that one street name and updates only that one place in the Dom fascinating so that's actually really cool so like if I was like 15 routes deep on like dashboard slash users slash user ID slash friends slash that friends ID and I'm really deep in and I update a user's name and all of the places that are calling user are returning user slash that user ID and my action invalidates that one user ID it will only update the sub components in the giant lists and all of those things that have that key that they're dependent on yes without having to reload the page at all it just does that on the client yes this is the promise that nobody has figured out so far I I don't as far as I know remix does not have anything resembling that level of granular update ability once the page has rendered I actually have a diagram from one or two streams ago let me dashboard stream uh I have no choice solid solid is has a as a mixed knife so so to speak because we have to be this optimal uh the framework forces you to because if you rendered a bunch of crap you'd create a bunch of Dom notes and that would be terrible so we have no choice to be the most optimal at all times I I don't know it's kind of a funny side effect so the diagram I have here is something I was trying to describe which is like the life cycle of applications and how remixing next differ specifically in those ways I thought I had a longer one I guess I do cool this is the app life cycle on the left is when the server gets the request and on the right is like hours into the session so we're on PING right now ping is built using xjs we have some server rendering on this ping page that fetches some data from server to put metadata in the head tag of the page so that when I share the link on Discord it says this is Theo's channel that you're connecting to and once you hit this line once the responses hit the user from that point forward any changes that happen to that page are no longer the Frameworks problem they're my problem and if I want the data that gets server-side props past me or that a server component gave me or any other source of data if I want that data to be able to change and for the component on the client to re-render none of those next.js does not help us here at all remix kind of does in the sense they have an action primitive but the action Primitives result in the way that it's built to work is to invalidate the whole route you're on and refetch everything as you said which kind of sends you back to the beginning of this pipe again and I feel like all the solutions I've seen either ignore from this point forward or they create a cycle where it's like they go all the way back to the beginning when they hit this line instead in order to solve the problems that we're discussing here and what I'm seeing is really interesting is that solid start despite having some of like the more simple Primitives I've seen is ignoring all of this and just going all the way to the end when a user does a thing hours into the session and it invalidates one key only that one key is invalidated and updated and that is a thing that exists in solid start itself it's not a thing I have to architect think around build around this has the cost of if my update model does not align with the update model that solidstart has this won't work but it comes with the absurdly massive benefit that I don't have to fight with my team about the right way to update data on the page when a user does a thing yeah and I mean and yeah no I think that covers it pretty well the only thing is and and this is maybe where your team starts fighting is someone could opt out to not using this and build build something similar on top of solid query or whatever and you could you could also just build your own system instead so that makes a ton of sense it's not like you have to use this solution but this solution that is built in for data loaded from a route it makes a lot of sense to be able to invalidate that without rebuilding the entire page yeah yeah I mean again it how like what you know about solid I like it forces you to write stuff in a certain way like this is why it's this is why it's not like eggnog it's hard to be agnostic or you like I remember some people were like why didn't you guys just use remix the remix team was not going to make changes like this for me um absolutely and I am so cool to see like these parts I almost want to like go through and make a list at the end that are like here are the three things that solid starts doing very differently from other Solutions because like to an extent this article is a very good job of explaining both what solidstart does and where the influences came from but a short list at the top that's like you know about next.js and remix and some of these other things here are like the core things we do very differently and then like link to the different parts of this just right and and David told me to do that and I said I didn't know how to do that in the 20 minutes before we release the articles I will do a follow-up maybe my own I haven't written an article in way too long I could see myself taking the time for this because it's just so cool but yeah okay yeah so we're the next in chat and pointing out like when it comes to like quick on the Fly marketing so just just ask me that's the like I will gladly like write three bullet points for you if that's all I have to do yeah I know I also didn't want to like we had a lot going on the last couple days yeah um freaking month yeah so we haven't even looked at actions I just told you about them if you scroll down so here is yeah this first one is what I want to look at this is the simple version of the action right so again there's a difference here I didn't tie it to the router and this is hugely influenced by people I love graphql graphql is one of the like Optimal things when I saw that I was like okay this is how we do an optimal pattern and I'd already built something kind of similar I told you with backbone or I'm at the startup but the thing that actually set me apart on graphql that was way better than what anything had built was that there's a certain split between their query and mutation model in that the query model feels like um a graph like a tree and you're gonna like pulling data from all over and just you know fragments jam it all together but the mutation model feels almost completely flat like sure you can pull out you know trees out of the data and stuff and kind of share and do all that but the actual mutations is just like a list of things this full RPC and that's why I came up with the server functions I wanted that RPC mutation feeling so actions are in my mind so the way that actions work is also going to blow people's minds it's not tied to the route it's not like export action it's literally put as many of these in any file you want not even router files we don't care as long as they're defined under like in a component or something like that lives under the row we do need the route information at the point but you can Define these like inside your any component that's going to be under a route somewhere which is every component right and this way you can you can pull the function out if you want like not to mix your servers with your with your other stuff but essentially a simplest action here like this to do toggle um it's a tuple but it creates a server action and we this code only runs on the server so in this example I'm just toggling uh to do you know complete incomplete and then in this example actually I'm going to invalidate actually that one probably be a function so like it's reactive on the ID it doesn't matter but my point is whenever the ID changes or whenever this action updates it tells it to go fetch the to do with the ID where does the ID come from here uh because you're just defining what the action is and that AC function ID is the parameter that gets called so like the toggle to do on the next language is mutate like the the you just you're calling a function it's it's like a server function essentially yeah so here it makes sense because ID is the argument here but where where does ID come from here yeah yeah yeah that was a if you picture this was in your component code ah like so like this in the component itself yeah exactly okay and then this here um well I mean you need it inside the server function like because this is actually where things are starting to get a little confusing thing because so like this the cloud the closure breaks here yeah so if I don't pass something through here I don't have it here yes that's what I was saying the first argument to the dollar sign functions runs only on the server so this is the part that we've like been trying to play around with like when I write a lot of reactions I actually pull all my functions out of my components and like just list them somewhere and then like inline them because for me that bugs me nikhil like he he's mad man he just like sticks everything everywhere like in his one file he builds the whole app so it might make my concern here is the super unintuitive difference in how this handles scoping versus how this handles scoping and closure right these being next to each other with such different behaviors even if you lint it is going to be super unintuitive especially since DB here this is the thing I'm importing in order for this to work so this is a closure break because I imported DB in the same file I might have done something in the file 2db at what point like like let's say DB has to be initialized if I initialize it in the same file and then call it here is that going to work or not like at what level does the code get if it's included in the closure what level does it not it module scope stuff is fine so anything that runs top level in your file you can use yeah so like let's say in order for DB to work it has to be initialized I have to call db.init first and then I can use it if I called that like at like the like I import DB db.net and then I export this directly underneath will that db.init state be received and understood here or would I have to do that externally in a module and then import after I believe that would be fine I think the the only the only like like if you're inside your component and you write this code like you're not going to put the DB init in your component code so as long as it's above then it should be fine like as long as it's not in the component like it's a top level scope but you're right like we this is why we tried to do the dollar sign this is a place where like the convention piece comes in that the first function in any dollar sign function is a server function because there is this split because the invalidation happens on the client right and the reactivity happens on the client so this was like a convention where typically what we do is the first function is the server function and the second argument is like the options or whatever there as I mentioned you could do create route action and then manually wrap the server thing yourself and go server dollar sign or you know make the server function yourself this is like the topmost layer was hoping that this could streamline things but yeah I see where the concern is um that was the TR when you have the server function it's very explicit you're like this is it when you have this convention of the first function is a server function less explicit so technically you do it either or right now but this is probably one of these things we should be testing through beta and see how how this works for people a crazy thought that could help cover a lot of this is you had mentioned this should already be a function if this was a function that's type was to be inherited from here so first argument uh type t or whatever for the args for this and then the same function type is used here then you'd be able to key using whatever this past and still have that as like a source of Truth and then generally speaking encourage that you do your best to not include things from like any scope in here other than things you just imported but that's like the cleanest path I can see here once you allow developers to like instantiate these in components and then the scope of what isn't isn't included becomes unclear I feel like that sent me down like a crazy like thought spiral that it didn't need to that could have been done by by forcing this to be a function typed based on here and just saying no like could you take this the content or the uh like uh could you take advantage of the uh scoping here and grab something that you shouldn't within the closure sure but just say no don't do that maybe you haven't opt out if you really want to but yeah okay yeah that's interesting I think I think you're right because like the convention doesn't say it by itself people could get used to it like once they knew but it's not obvious so yeah yeah where you can that's like there's a really big like the mental hurdle here that I am struggling with is just understanding what isn't isn't included this is kind of like the the burden is a react developer going into solid in the first place is what is what code is it is it going to run and when is it going to run the majority of my solid code only runs when the page loads and it starts from there things only run when they need to but what is need to and how do I as a react developer understand that is a challenge and what I'm seeing here is a person who's done a lot of like server code I have a really clear distinction in something like trpc something like a server function where this file only runs on server anything I do in here runs on server when you blur these lines things get complex and y'all are working really hard to solve that complexity I think with like the getter examples above you have but once you add these invalidation patterns on top of that that have slightly different scoping behaviors it's this I I do not envy you for having to solve this challenge but it's so cool getting to see how this is going right right yeah no for sure and uh this this that was the thing right I had The Primitives and we really liked how explicit but like you can understand like this kind of almost streamlines it in a way that if you do know it makes it a lot like like it seems very powerful I don't know It's Tricky and the the last thing on the last line is important is again this is the real no sorry I'm still in the same example this is the really important thing that remix added to this this is the most unique thing that remix added they added feeding the data that you sent in the mutation back through as a temporal state so we have optimistic updates the same way remix does where you like the first argument uh that you get back it has a few different things on it but you can like say like if it's pending like show that like show that it's already not completed or not basically ahead of time so you you can write this logic where you can kind of like preemptively based like this is a very simple thing because it's a toggle so you just show the opposite of what it currently is but you can do much more with this this is this pending indicator is very similar to the remix pattern in terms of being able to do the optimistic uis interesting I the thing that's confusing for me here is again scoping like where does to do come from here and oh sorry yeah like this is this this is cut out of an example we actually have this example in the solid start repo the to do would be like the for Loop of to-do's that you're iterating over this invalidate is like invalidating yeah yeah I I cut this like piece out like essentially like in an actual real example there is this like one little server piece which is the database and then everything else is like your normal component this example I guess is not the greatest thing they show what what I'm trying to show but essentially the to do is just the to-do that you're iterating over and you're to do to-do list um but yeah I wanted I mean yeah good to know no it's like this blog post is super insightful but when like especially when you have been working on this for so long and looking at these examples for so long your brain will auto complete the thing you would scroll up to but you can't scroll up to because it's not here I make these mistakes all the time when I share code Snippets I yeah I would love to work to make this a little clear also like I was so confused like the relationship between toggling to do and this I would almost rename this to like to do state or to do action state yeah just so it's clear what this is there and then also clarify where this comes from just make it a little easier to understand thanks yeah yeah for sure this this is the this is the problem here okay so this is interesting though yes well because I mentioned server functions can return responses which means they can return redirects which means we can take that same invalidating to do example and the the same submit function also just happens to have a full sorry excuse me a progressive enhanceable form just um hanging off of it so essentially if you want if you wanted to do it uh you know like basically if you use form data like and yeah if you try and use form and you don't use form data you you will get errors um from typescript uh but essentially if your async function is form data and you know get some Zod action here which I don't have in this example but you can understand what's going on you can actually build the form redirect back to your current page or next page on the end of your you know whatever you need to do and if you write your thing in this kind of form post kind of mentality um and you know use stuff like hidden fields for for your values and you know form submits or whatever this will work with JavaScript turned on or turned off this is fascinating Maple where are you I want your thoughts on this as the the resident form expert because this is super interesting because I feel like the way I've seen forms implemented before for stuff like remix was almost inverse where you start with the form and then from there you define the action and then you have to build that relationship yourself whereas here the action is the Primitive a form is inferred out of that primitive it's like like the chain of dependencies it feels way clearer here to me and what I would love I don't know like if this is exists already or is even possible if the typing from this would check to make sure all of the expected form data like if I could type form data strictly somewhere and infer and then throw a type error if we don't have all of the fields we need here there's a lot of potential here that's super cool yeah I mean that'd be really cool I don't know how anyone would do that per se I'm not like super good at that but this is the this is that's the trickiest part like we built the actions first without and then we added the form kind of after and what's really cool again is you can put like my to-do NPC example is um like in one page you know it's a two page app and I have like six actions in the one component with six forms so um it was incredible we we have something called a multi-action that I don't show here which lets you uh do multiple things in flight so like adding it to do and then we just you know so you could just basically go make this multi-action to add a to do and then you just can click it as many times you want and it'll you can use the optimistic updates to show all the to-do's in the list before they like finish coming through and error States and all that kind of fun stuff and it's like it's just a bunch of forms and that and the the coolest thing about it this example is it's only 230 lines of code it's it's about 60 lines of code more than the normal to do example um and it's fully formed doing the like doing the full thing with Progressive enhancement it wasn't like that too big of a shift and yeah that's the reason we hang them this way is because um you can have multiple on the same page our actions have nothing to do with your like routing I do really like that like this example here you can clearly see how you would like put this in a component and then render a whole bunch of these like that makes a lot of sense super cool yeah so then the invalidation triggers and you get mostly As I said like a slightly more fine-grained sort of remix refetch uh along with it makes a ton of sense my one immediate question seeing the return redirect here obviously this makes sense if it's for like a forum with node.js would I be able if I am in JS land like I have loaded the JavaScript is this still going to run this redirect and is there a way for me to write this in a way that works with node.js with the redirect to reload the page and with JS to do just do the granular invalidation yeah this has been one of the trickiest things for us the biggest thing is if we're redirecting to the same route it's not going to do the client redirection you're fine it's just that we have to write it this way right now because there's there we are looking into using special headers to kind of figure out if we can like have the default like reload action or maybe don't use a redirect maybe have like like a Reload action like like the make it look nicer because yeah it hurt like I don't it would be awesome if we didn't have to do the redirect for like the common actions instead of like the like if you the reload action so to speak so I think there's a place that needs a little finesse on the API side um the redirect like ultimately this is how it's going to get communicated but we actually it'd be really cool if we can like hide that from you on the API side a little nicer or like make it like more explicit or easier so like you don't have to worry about the URL for example like even just having going like this is a refresh or something like sort of return redirect slash be like return refresh and you don't have to worry about the URL or whatever just make things like a tiny bit nicer and it's an area that we're looking into yeah that answers the question I like that the redirect effectively is ignored on the client if the client is has JavaScript is smart enough to do that that makes this less big a deal I will say that like I'm noticing the small number of abstraction leaks in solid start and it's cool that like oh it also goes like as the further we go down the dock the more they start to show everything that is this far abstract is going to have abstraction leaks I like this one because this feels like the opposite of an abstraction League this is like a contained abstraction like this abstract should file routes you now have this easy way to contain it use it or ignore it server functions this abstraction I really like it's a primitive that I can export import and it roughly works as expected scoping's a little weird but if you're good about only putting this at like top level you don't put this inside of components the behavior of this is pretty clear once you're nesting it and scope gets more complex it gets a little more complex but it's generally not particularly leaky once we get into here we start seeing more things being called with specific behaviors like the need to pass this a function that returns something that serializes the key that we get from here you need to know that this has a thing called params that we have an ID on params we can use here that we can have to pass a function here return it and that becomes the key and then we pass the server function which we established like we understand this abstraction from before but if we wanted to Define this internally do we have access to params when we do that internally here whether or not we do is unclear how do we get the params to This Server function what's the right way to do that is now a more complex question and as we get here it gets more complexing to know that this key function object exists that you can return something like this in and as we go here it gets oh not too much worker Plex this was an example that like could be cleaned up a little bit but here we're going way further you need to know about form data you need to like know that redirect does a thing it needs to know that you can call the form here and that this redirect behavior only runs in certain conditions even simply like redirect Act on node.js or a name here that makes it clear that this Behavior will only occur when there's no JavaScript on the page could help make this abstraction feel a little less leaky but I feel like by the time I'm here I have to know a lot more about how solidstar is doing things versus before with the server function anybody at ping right now if I wrote this in our code base would get it by the time we're down to here this is a lot harder for us to grok right and this is the interesting thing to me because the the this behavior in here I mean the wrappers are different but the actual API once you get into the the action is actually identical to remix like everything inside and I I felt the same thing to as you did because it is an abstraction it is something that we've chosen to add as an extra layer um and that's why I always I'm sorry I'm gonna this is what you know throw a little thing around but this is why I was always like kind of questioning like the the whole you're just learning the web you know thing because it's just a redirect um I I don't I'm gonna acknowledge I don't think that's actually true um you know what I mean like sure you're using the web Primitives but you're using them in a way that's specific to the way your server works so I think web knowledge is good I think form data knowing about form data is something you know everyone should know about because forms are a real thing but like I'm I I'm not going to pretend that this is not an extra layer on for some people and that's why we added it on you you watch this Progressive because I don't think everybody's going to do this or needs to do this and I think that if you want to this is good and you'll learn about that stuff but it is actually funnily enough something extra even though I've seen it being kind of sold as the foundation I don't know that that makes sense yeah that that does I I really like the point about web standards I feel like web standards is used as an excuse for bad DX more often than anything like every time I hear somebody say web standards they're not actually making something better they're usually using it as an excuse to not do something the better way it's like oh but this is web standards oh we're using web standards oh look at this talk from mdn that hasn't been touched in 15 years that doesn't know what an IP address is as your request object and I just have found that to be a a not great cop-out and generally speaking is the frustration I've had with remix for most of the time I've personally used it I feel like I have to be an expert in mdn before I can be a beginner in remix and every time I run into a problem I don't know is this problem because I Don't Know Remix well enough is this problems I don't know web standards well enough or is this problem because of the relationship between those two things is complex enough that I can't find what I'm looking for right now and that's right this feels the most remix of everything here and I think that's why it's the least intuitive to me to an extent where before we were just writing functions and calling them this feels like we're writing functions calling web standards and then building a relationship between the two that I as a developer have to understand how these things relate exactly and that as I said this was an intentional API that's at the the end of the chain like we've got to the end of the thing if this sells you and you've seen this and you're like this is powerful this is what I want to do then you're in and if not uh go use it yeah yeah like exactly like I wanted to I think this is actually a pretty if you have the knowledge this is a pretty sane take on like being a good web citizen doing Progressive enhancement doing you know building this stuff in a in a good well-structured way that's I I will stand behind this but on the other hand I would never tell someone that they had to do this this makes a ton of sense I I think I was thinking this the wrong way like initially so simply because I got so excited by the toggle to do dot form like the idea of our action defining a form that this made me more likely to use forms in my code but in order to do that I then also have to understand the behaviors of code ERC forms the way that form data is going to be handled processed and interacted with here like there is more buy-in necessary from me I think what I'm more upset about is the amount of buy-in necessary to use a form rather than the amount of buy it necessary to use solid start yes I I I'm hoping that's the takeaway yeah um but yeah I mean this this is uh I think this is the end of the features that we've really been talking about with the beta um there's obviously little things here and there but this is what I wanted to talk about mainly for the beta there's one more thing to talk about but um this is this is what we're hyping and why we wrote this article about the beta I makes a ton of sense is there one more thing here we're just getting started yeah um Fred um Fred canis you know he he he he pumped it pretty good so we we gave him a little quote tweet here um uh because this is like what everything I showed you is like the like spell kit and remix and hide like like maybe not hydrogen but like like this uh Knox and like the state of the art of the web today um but we've we've been working on experimental features um that you can use you can go build apps with it that is the web of tomorrow so like we're not like we're not quite done yet I know we've been going long but this is we could show a cool demo right or you know I don't know where am I going solid-movies.app that's solid Dash movies dot app yeah oh damn that loaded hilariously fast yeah with images too I didn't have this cache I've never opened this page before yeah so yeah I mean yeah that was pretty really fast if I go back yeah yeah um yeah for sure and uh yeah I guess like it's not 100 implemented but we've we've got most things kind of good here and actually go to the search there's a bit of a delay on the debounce on the search but we should try it on the sidebar down at the bottom uh you can try it like just type I don't know something there okay so everyone watching this you can see that the browser window doesn't like res well this is a single page app right um yeah I do see it loading every time I do a thing on the top but that loading isn't the browser loading that's that's actually the loading indicator that I chose to use for this demo example theoretically we could hide that via CSS yeah um because it's it's it's it's not going to unmount um that thing because it should be at the top of the page it should be like a global photos at the top so I can see if I can hide it yeah solid Island Global loader yeah yeah yeah can we yeah can we highlight that uh God I need to hide this chrome loves to make things really hard to see when I increase my resolution uh display none theoretically now when I switch Pages yeah it just behaves the way any old next app would yeah so the really cool thing about this demo as we already just saw here is this is actually using client-side routing with server rendered partials and partial hydration so this is actually Islands in this with client-side routing some people call this technology server components um and I know that's gotten kind of a bad name but I wanted to kind of show this technology a bit because I believe in future Tech and I believe seeing cool stuff and everyone saw their server component demo and they're like how did next get bigger um if you want uh we should open the network Tab and just see how much JavaScript this whole page like you've been navigating around for a bit I just completely reset it so I thought that'd be easier so command shift out it yeah and click the JavaScript specifically on here um and we should a lot of this is gonna be because I have Chrome extensions let me do this yeah yeah I was like that's a lot of JavaScript there we go 13 kilobytes transferred yeah 13 kilobytes transfer and navigate around a bit because you know there's like most apps have like code splitting and stuff like let's go like click into one of those movies oh yeah yeah so we haven't loaded any more JavaScript right because these are all server components um so this whole page you've been watching is 13 kilobytes of JavaScript no matter what where you're going here the search will add a little bit because we needed to add the 13.2 oh no so much JavaScript right but the key part here is yeah I mean this is super cool because even the search the search is super cool because it's actually reloading the same page without losing client State because you don't know this but your input didn't lose focus while you were typing in that search even though technically speaking we're actually reloading the page around around you um like there's a there's a very light Dom diff thanks to Astro team Nate who came up with the technology for this um for the Dom diff but essentially this is the reason that the the the the the progress bar wasn't this wasn't disappearing or didn't come back when you're navigating around before when you hit it was because this is using nested routing like uh like like solid start and we only swap out the portions of the page that actually change so we do small swaps instead of doing the full page swaps you see and stuff like turbo links and like like rails so we'll only do the minimal amount of change and then in those change we only load the minimal amount of JavaScript because it's server rendering we don't need the JavaScript actually render the page only the you know we talked about this with solid before you only need the JavaScript to do the updates solid like when you do normal app with solid like mostly code renders once and then it just does the fine grain updates in this case mostly code renders once on the server and then we just need the small emit a JavaScript to do the fine grain updates I'm realizing this is the thing that GitHub needs to be Rewritten in like yesterday and the crazy turbo likes problem holy [ __ ] and the crazy thing about this is like do you know how big like others built this app I love this Addie has money I can share the link I have this app and in every single framework do you know how big the next version was I don't this is the official one it's like it's like 190 kilobytes I I don't even know what they're doing I'm sure we could I'm sure we could make this index in about 100 or 120. somebody made a joke earlier but look at how many solid start apps we can fit into one next yeah and in this case it's it's about 15. yeah that's absurd absolute absurdity so I mean this is really cool Tech it's still experimental we're not settled on the apis right now our apis look a lot like server components I've heard from people they don't like that they don't like stuff like use client but um right now that's like where we're sitting at but this is basically our this is what server components are supposed to look like and uh that that's essentially what what the deal is here yeah actually that that article has it quick has all the things has our work on it and the crate the craziest thing is anyone has ever seen my beat comp talk is it's a talk of mine worth seeing um I actually show switching not in this app in a Hacker News app between client rendered like full client rendered app server rendered next Style app islands like Astro app and then final version like this and I change one line of code because it still uses the same patterns the same data loaders the same the same we didn't change anything on you you use crate resource to load your data the same same data serialization yeah see here's the whole list next nox to angular fault kit lit quick city um solid start this is fascinating shall we check out everyone's recent favorite quick cities version and see how much faster or God that is so much slower I think this app they didn't fully implement it yet quick quick city um it gets good uh it gets decent Light House scores on the load the reason that this app is so awkward um for them is because they they did client-side routing that's not included if it was an MPA version of quick I think it would be actually quite good but they did client routing so when you go to the next route it literally has to load all the JavaScript in like 10 000 pieces yeah right um that that's why that it's not the best demo but I I wanted to I wanted to show like the the trade-offs if that made sense yes um and and uh yeah lit is like 100 kilobytes like you're not saving anything spell kit is is if we were using normal solid start solid star install Kit are like this I think we'd be like two kilobytes smaller or something but the cell kit version is going to be kind of similar but just this is like yeah this is not regular solid start this is absolute chaos yeah this is this this is an experimental mode you can switch on and we're still finalizing the apis for but this like normal solid start is going to be very similar to spell kit maybe like a couple kilobytes smaller and can it's at that but this this is the this is potentially the future um and what's really interesting to me so far is that a lot of these primitive patterns seem to still work quite well um you know we're still like figuring out how form posts and stuff work but yeah yeah it's it's I want to show this because I mean this is pretty cool right like yeah this is super super cool I it I've been waiting for someone to figure out the bridge between mpas and Spas where it feels like an Spa but still has the level of like Network optimization that you can only do in a multi-page app and like I saw that uh I think flamethrowers being made by fireship right now which is trying to be a modern turbo links this feels like the inverse approach but solves the same problem in a way where like the performance is just undeniable like it's navigating all of those sites this one felt way better period this is one of the fastest snappiest feeling websites I've ever used it's stupid because normally like like the snappy feeling comes from the spa but the fast load times come from MPA and this is the first time I've seen the best of both like correctly applied it's weird it's jarring yeah and it's so weird because like maybe you forget about the load times you're like it's a single page app and then every time I I open that Network Tab and I go oh [ __ ] like I think like how can there be so little JavaScript this is me personally because I'm a performance guy I every time I surprise myself I actually when nikhil made the solid start docks in in uh in this I didn't even look at it at first I was like I'm not going to look at it I'm just going to use the site for a minute and like get a feel for it and not have any biases and then I'm gonna look and see how much JavaScript is there people love the comment how great the Ping site feels performance wise ow yeah I mean the size on JavaScript isn't everything and like they're but like but yeah I mean I I feel like that's a pretty good demonstration of like you know what where things could be heading I I'm always a little skeptical there are trade-offs like it is it does take longer to respond with uh HTML than it does with Json but you know what I mean like I the thing is you actually block the browser less so like the guys on the Chrome team when they saw some of these examples they were like one of the guys was like I feel really bad telling developers they should like try and get their imp like the was it the next uh paint or whatever interaction to next pane scores down to like under 200 you know like this seems really hard and I feel bad of them but then he's like but then I tried uh your demo Ryan and the p75 or whatever was like well under 100 for everything so then I don't feel bad anymore yeah yeah I think you're gonna make Alex Russell's arguments against me much stronger in two weeks so thanks for that making my life harder yeah I see people calling out the 64 megabytes of resources there are videos playing on the page there are multiple of them there are multiple videos on the page you all don't know how metrics work I'm just looking at the JS size it's the number here chill guys come on yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah but yeah so cool demo right it's super cool I absolutely love this it's awesome knowing that like this is because I've seen a lot of people trying to experiment in that direction I haven't seen anybody apply it in such a compelling way where I can open the website and see it I've seen so many like theoretically this new technology is going to make all of your like page navigations way faster I'm like okay show me an app that uses it and they shrug you're like oh look at the example in our like home page in the like playground and yeah you all have a playground I can do things in it but you also have an incredible number of Super interesting articles and examples and detail like the best examples of svelte kit the best examples of next Js new loading patterns the best examples of how to abuse Astro all tend to come out of you and it's a really powerful strength when you're demoing something new like this because you've already played with and made yourself familiar with all these other examples seeing the strengths and weaknesses and then highlighting them by doing your own thing this is such a cool Flex this is such a cool Flex yeah I I mean to be fair like the the thing is I was okay with this one it's hard when you make a benchmark because they're not all fair then like the next version of sites slightly different but we copied the Knox version they're all like a little bit different so you don't like you can't complete trust and if I built them myself I could be critical of it but this is the one that Google has that apparently like they if you go to like their like page and then they link it so this is the demos that they've chosen to like promote so this is fair comparison from from my perspective on that so I did that I think I think I could build see like I think there's Astron here too Astro is also great Astro here is 15 kilobytes it's an MPA but like the we're basically the same size uh yeah that's that's the code for it and then the demo would be the next link yeah you know um so yeah look at this MPA mpas are fast if you if you do them right you know yeah so I did see I thought they were doing some Spa stuff on this one I thought they had some crazy JavaScript running to make this so Snappy uh I think someone made a demo on top of this but not the one that they have to hear someone who's doing the page transition API and doing a little bit it was a funny experiment because they don't support mpas for paid transition apis so they're faking a single page app with Astro and then putting it on top but that that would be more JavaScript and like more consideration and it's kind of Faking it to do it yeah transition API for the example and solid start no this was just like I literally took a loader that I used in the code sandbox suspense demo that I had to do that thing across the top and like yeah that the end like it was just a very simple using all the stuff that we've been building makes a ton of sense wow we just realized we've been going over two hours now I didn't want to keep you this long there's just so much good [ __ ] to talk about here is there anything in particular we didn't touch on yet that you would like us to dig into for this release yeah I mean this is actually no I I think I think I think the Articles covered it right I wanted to show what we're doing today what we're doing in the future why if stuff on web dev is really exciting um that for the release perspective that's I'm pretty good I think just Spam the blog post and chat if anybody wants to reference that and take a look at it more there's also a tweet on both Ryan and Mike's Twitter if you want to retweet that to boost additional say or to additionally signal boost for how awesome this stuff is I I think more people need to hear about this and see the awesome stuff that's being done here this is a very exciting future for all of for all of the web much less just the solid ecosystem and I'm genuinely so pumped to see what you guys have been working on it's super cool I'm so glad to finally have the chance to come on here this has been long overdue I just never knew when the right moment was and I think the key to it is um there might never be a right moment if you always wait and I mean both of us today like we're sitting here drinking our teas and stuff being at jams.com for like talking over like loud music and stuff for hours um yeah you know we're both recovering our voices and releasing crazy things funny enough I'm actually using a new feature that we're shipping at ping I probably tomorrow maybe Friday but really hoping for the tomorrow launch we have a new even simpler way to bring guests into your stream where it's literally two clicks you don't even have to open OBS anymore to get them there and I'm so excited to share this more it has made my setup way easier the reason we were late today was not my usual configuring OBS it was actually that my power brick for my camera exploded and when I tried to unplug it almost electrocuted myself so y'all are lucky I'm alive today actually you're lucky both of us are alive today after the car crash I mean that's that's crazy in itself we were we were in an Uber and it just so happened we were like last at the venue uh go heading over to dinner so I guess like Matthias uh netlife CEOs make sure everyone got a car and we just happened to walk out last and and so we all got uh Matthias Theo myself and uh another we got in this card in this Uber it was an Excel or whatever and we're just driving to the restaurant right and uh I kid you not we we get to we're just driving normal and the car right in front of us gets T-boned like we're just driving forward and just like right in front of us sideswiped and the whole like yeah like yeah it was pretty bad the car that was hit had no passengers in the back seat so they were all fine but our car was entirely passengers in the back seat we would have lost the CEO of netlify Ryan and everyone's favorite streamer also Ryan but like that would have been bad it 10 seconds earlier and that would have been a tragedy but instead it's just a weird joke that we have now like we almost died on the way to dinner at jamstackhoff yeah no it was insane um yeah it's been a chaotic three days honestly with like yeah absolute chaos happy that we are finally able to have you on the show it has been way too long are you down to do a quick q a or do you want to head out totally understand if you just want a piece no no let's we can we can talk stuff and that's the thing like so much cool stuff is going on I love the uh talk and and you know questions and stuff and I yeah I can't yeah you know what I can't reveal anything yet we will just wait but I'll say that we've had I had some great conversations at Jam stack with Tanner and um with Fred and just like a lot of other people um so really cool stuff going on a lot of cool new ideas it's it's crazy how when you talk to someone and they say something back to you in like a slightly different way of something you thought about before and then it's something like huh maybe that is viable so yeah I'm very excited for the future um I I know I'm betting you all in chat but it's fine I'm not leaking anything just yet but uh yeah I'm down for questions there was one question about adopt or adapting this is really early on this is from Jamin who is the head of things over at infinite red which is the like place that that you go if your react native app isn't fast enough or you want to move your app to react native they're like the agency for building react native apps really well and he's seems to be very excited about solid which makes sense because he's a mob X User he created my state tree he was asking what it will look like for somebody today to start adopting react or to start adopting solid in a react app that they've already built or more importantly for him react native apps okay yeah I mean yeah I mean I guess we're going right there um yeah this has been a question in the one that I've been having the hardest time on because solid does not have react compat so we're not going to like pull the preact type thing or Inferno where we're just going to swap the app on you but reactivity is universal it's a language um today what that means is if you want to try to use some solids patterns and unfortunately I haven't updated the library to work in react 18 and concurrent stuff there is a package called react solid state which is basically like I I'm like I looked at the mob x uh react thing and like basically it was like okay how do I do the same thing in solid so it's like it's basically lets you use solids reactivity to drive react components that might be one way to start kind of playing with the patterns and the code um other than that yeah you you've basically got a migrated Leaf nodes find Opportunities but stuff like native obviously uh we don't have solutions for today so in like or that's not 100 true but we don't have react native react native is incredible we have like web stuff like uh capacitor and you know ionic and you know people playing stuff with Tori and I think I there are a few native options but they're not like react native um someone did actually try and make a wrap over react native that use a solid but I haven't seen progress in that project in the last few months so um I'm not sure there so maybe the best thing you can do in that case is just get into the reactivity and use something like react solid state yeah I react native is going to be the scarier one there for sure simply because like solid likes to tie things to the Dom itself for references and updates to an extent no no no no no oh man this is something uh can I show you easily maybe I could share a playground the thing is um first of all we have a universal renderer that's why uh nikil was able to make like solid three he ported a bunch of Paul henchels libraries over to solid and he's like he's been posting recently like all his like fun 3D demos he's been doing um but like even before that the cool thing is if you don't use lowercase Dom elements like like like div like anything in the lower case we don't import any Dom apis like like if you use crate root instead of render which you can um the zero Dom apis get imported by solid and you can like build a whole component tree like reactivity and the components and all that work completely independent of the Dom um the the only magic is that Dom compilation specific to the lowercase letters and I did Port that so people could make stuff like react 3 so they could like go make like blank blank mesh whatever you know as lowercase letters but generally speaking um solids it doesn't have a virtual Dom but it sends reactivity is its own tree or you can wire it that way it's on tree so we we're actually not that tied to the Dom as much people think which is actually a little bit different um than spelled actually which is why when they came up with their 3D thing they they like had to make like a whole different package before I even made custom renders people had kind of hacked stuff together like using canvas like Pixi Integrations where they use just solid web and just literally just played with it um and then once I got the custom renderers nikhil went crazy he made like solid ink he made Solid three you know um you know that kind of stuff I've seen a lot of crazy stuff coming out of him in that sense uh I actually almost used solid ink for some stuff just because I had a better template than ink did yeah that's cool I haven't played with it too much but he did come on my stream one point and just like he like he'd only been working on solid for a week at that point when he he did that he he like came in and he said oh this seems cool and he just like went and he was like the first person to really use the custom renderer seriously which was good because I had no clue what was good or bad about the customer renderer for that I literally looked at View and I was like okay let's see what view does um so you know and it's interesting like I'm so used to custom render equaling like vdom output somewhere else but custom render is very different in your use case but still works roughly the same so right right that's the interesting thing because um when we use the custom render we still what we do is we end up transforming the props and then building crate effects or like nested effects so in the end you still get to write the code in a way that's completely oblivious to like solids reactivity in those elements because we'll you just call the function like set property or whatever and then the reactivity is on the outside very similar compilation to what we do in the Dom and then you can you can go yeah when this is created I create this and when this is updated I update this and you know I actually on stream use solid's custom render to make a very simple Dom API and ran it through the JS framework Benchmark one time and it was actually fun I actually it was the same speed as Inferno at the time infernos which was pretty cool and actually it says a lot um in terms of vdom versus nomb kind of considerations and the fact that like some of solids wins on the Dom come from very specific Dom apis like cloning notes it's a trick we grabbed from lit um the you know versus creating elements one at a time but you know they all have their individual little costs and trade-offs but honestly maybe it doesn't even matter that much um for the you like the 0.2 percent or whatever yeah once you have 50 000 elements that difference makes a lot of sense when you have 50 elements not as much so sorry yeah and this is why I like doing a gigantic table with thousands of elements in react sucks so hard and doing it in solid makes so much sense right right oh man uh that I had a stream with ag grid and then like it was so cool seeing Niall like play around with it and he actually did the comparison where he actually benchmarked the salt like he's doing something cool it's kind of it's similar to Tanner in a sense but he he ships the finished products instead of saying like you let you you know kind of build on this agnostic core and uh the thing that's cool about his approach is he like he he Embraces the framework like in that like he when he makes a table and you use it in react react is actually running the table and he does this so that when you extend it and add your own stuff it's not like a bunch of separate react Islands it's all part of a single app so you can get the best performance and the best like setup out of it um but yeah obviously in that scenario solid did very well is basically the same as vanilla or actually built beat his vanilla implementation on create um I told him I'd like look at it and help him improve it because vanilla should always be the fastest that's great I am starting to see more good questions coming in that I think is really important I'm trying to like jump in front of like to eagerly recommending things that are really early really solid starts in beta the framing the area that Arthur gave for the question is great he said on a scale of zero to graphql subscriptions how much are we going to bleed on this Edge if we use this today yeah I mean that's great um yeah that's a fair question um it's the apis are relatively stable except for the kind of stuff we talked about which is small renaming stuff I I'm pretty happy because we've used all the use cases right now um there are a lot of bugs in the repo maybe not a lot by a lot of people's standards I'm just used to like if you've seen this all repo I keep that stuff clean like I I it's very rare that there are like more than like a handful of open bugs um solidstar's been harder to nail down I think I think there are a lot of bugs I think it's kind of configuration type stuff because we're using the same Primitives and stuff that we already have in the library and um there is that like a few things where like things come down but largely um we we're still finding the best ways to work with Veet in some scenarios and deal with like random random it's not random but like interesting problems like es build thinking that our components are react and stuff and like mono repo configuration not working properly on Windows and you know that kind of stuff um we're spending a lot of time in that area so but to give you kind of like I'm always I'm like the most hesitant to tell someone to use my stuff when it's too early um so that's what like I'm probably more pessimistic than most people like um should be like I I know a lot of people who were if their project was where solid start is right now would be like ship it use it in production um I've been working on this since February 2021. um for for thing and we thought we were basically in beta since August um but you know just a little bit a little bit little bit um but yeah we we've been using it for small apps sample apps it's still early um but I mean as I said I I I'm the last person to try and push you towards something that you won't be a hundred percent satisfied with but I know that most people in my place would tell you to go use it right now for what it's worth I have been asking Ryan for a while now to let me know when solid start is ready for me to use because I tried and the docs were like there was some pages missing that I really needed the like typescript wasn't giving me the input I needed and I was getting confused to be frank I am stupid I am not as good of a developer as a lot of y'all think I am I'm good at thinking through like the higher level technical problems how things work together the relationships between them stuff like that but I'm not very good when it comes to actually like writing the code and debugging a thing I don't understand I'm good at finding that understanding as a result of that which is why when I tried using solid start and I stumbled a whole bunch Ryan's response was a very quick and eager it's not ready yet I'll let you know when it is and I trusted him on that and sure as hell last week he said okay I think it's ready can I come on the show now it's like yes absolutely we schedule it for today the day after next afterjams.com because now Ryan thinks it's Theo proof enough so take that as you will the reason the beta came out today is the the team has decided solid start is now Theo proof yeah that's pretty accurate yeah and we wrote the docs and like there are docs now they're not the best docs we need more help and contribution that's one area but yes we're at a point now where if you you know hit a problem there should be like at least like oh this is what the API is like we had nothing like basically nothing before so um and Theo still got pretty far with basically nothing so yeah and now we're all the way here this is fantastic to see one other question that I saw we touched this a little bit earlier someone was asking the the viability of abstracting the uh server star dollar sign plug-in to be used by any other veg projects yeah I mean that's that seems that seems interesting stuff with the request response model and it's similar to the questions like file system routing and if we could do that like my my first piece that I usually look at is like can I use this stuff in any solid project specifically like the fossils I'm writing might tie into the router but the server module probably could be used um and anything that could accept yeah the request for response middleware kind of approach the the web version the mdn version so yeah I don't know nikhil might have some thoughts it probably could be used by anything he just set out right that's cool to hear somebody should definitely play with that I'm sure that they're out of the like 600 or so people still watching that some of y'all are smart enough to go proof whether or not that is viable I'd love your thoughts if you do manage to go do that and let me know how you feel if you do definitely you'll keep an eye out for people hacking on that there was one other question I wanted to get to let me find it quick uh what's the next big focus of solid start after this Beta release yeah um yeah first of all start specifically after the Beta release um yeah we're just trying to like stabilize in terms of like get the bugs down I mean we're we're we're working on the smaller features and we're working on the experimental stuff I would love if the experimental thing I showed you today was just something that was part of the release I've said multiple times that it wasn't going to be part of 1.0 but then what happened was nikhil's did did so much work in lightning time that maybe that is there is potential there but mostly it's about stabilization it's mostly being able to handle more use cases I want I we created this so that people could could use solid make it easier to use solid and that's what the focus is um so yeah more people use it more bugs we find I know that sounds like crowdsourcing bugs but I mean that's how what betas are and um uh we get a stable product that's what I care about I want to see people using this I think I think even you know like I'm always future forward so like that's why on the show the experimental future stuff but even the offering we have today I think is very competitive um you know in in this space so I very much agree I am surprised how far along this is considering how little like it's been discussed publicly like the only big public time we have talked about solid start was during the drama way back but beyond that y'all have like really kept quiet and sit in the corner and made this as good as it is and it's this is another like I keep making the music analogies but a thing I think a lot about is what I now refer to as the young lean effect where young lean was a somewhat controversial new hip-hop artist that was a 16 year old kid in uh Sweden and he got into hip-hop through watching American music and Penguins of the American scene also like importing like the albums and games and things from all over the world he was just nerdy about the way this music was made and the culture around it and in his isolation in Sweden where he had no like distribution Outreach or way for people to hear his stuff he just with his little crew got really really good at making music that was very different and not quite the way people thought of it and if he had shown every step of the way how different the thing he was doing was before it had gotten to that point of quality we would have just [ __ ] him immediately and it never would have happened by the time his music was good enough to escape Sweden and make it to the U.S it was also good enough that despite it being different we couldn't talk [ __ ] if we had gotten it too early we would have discarded it because it wasn't ready and even though the ideas there were valuable we couldn't see the value because the execution wasn't there yet if you wait until the execution gets to the point where you can't poke holes in it the value prop becomes way clearer and I think that solid start is the young Lena Frameworks that's that's interesting I mean solid itself is actually that in a sense because I I I spent five years before I 1.0 to spend so much time working on those Primitives making that pattern to the point now that like like like it would it would have got criticized autonally because like knockout and MOB like not mob Expo like knockout and stuff like reactivity in the past people would have ripped that like in a minute and I just kept on doing what what I was doing and slowly brought people in and we got to this point where now when people look at solid they're like these are The Primitives that we want to adopt uh so yeah I for me doing them the same similar thing with solid start um I don't know if it's intentional it's just like what I was doing I I don't like showing stuff before I can back it up so sometimes this is bad because like you want to get in the conversation early you know and make sure that you know at a certain point like you're you you don't leave people's mind share but I'm hoping at this point after you know doing a few of these things people realize that like if I'm being quiet it probably means I'm working on something really cool yeah absolutely agree I have seen this from you just as a a person that's keeping an eye on your stuff for so long and the fact that you've spent the time you have on solid really does show the quality of The Primitives but it's crazy to think that like you could have shared that more aggressively at any point but because of external factors like hooks combined with the effort you put in to make the quality apparent the result was very different and it's cool to see the world noticing solid now more than ever before I see one last really good question and I think is a good note for us to end on do you think solidstar is the best way to start learning solid today that's a great question and it's one that like I'm a little bit on the fence on because I don't want the I don't want your first experience to be to hit a bug so for me I feel like the V templates are still the way to go at this exact moment I think during the life of the beta this will change because you can actually literally just solidstar does everything the V templates do they it has the clients you can just go no SSR and you get SSR plus actually you can make API routes and have like a fully client rendered page if you want to do something funny like that but like well what more what I was trying to get at is that like I I until like the bugs and like the stability is there I don't want that like first impressions are so so important so I'm gonna say not quite today but that's the intention of this we we you can build every solid project with it and as we get better maybe split out the big projects are the V plugins we might even get to a point where you know if you like really don't like solid start or something I mean like you just you could just like build your own solid start using RV plugins um you know some of them not all of them or whatever so yeah uh I think I think if you're on the front of the curve now's a good time if this is your first time in here uh use you just use our normal like to get on the beat plot templates I stopped uh our good friend parasocial link or drop a command to run a Deno solid template yeah I mean he's been doing great stuff there I I didn't I didn't even realize we'd actually succeeded at that like I knew we run on Deno uh and uh obviously uh that solid app uh solid movies app that you saw is running on netlify edge which means it's running on Daniel replay under the hood but I to my understanding that template actually works um uh sorry that template actually works uh like fully building with Deno and stuff too like it's actually like a full setup which is cool and I actually I remember I had one other link too that someone had had made I don't know if this is I haven't looked at it in uh too closely Theo um but someone actually posted this in your uh Discord and I didn't look at it and that they they they were trying to I think sell it to to your audience so to speak so maybe I don't know if this is any good but I I figured it might be open it up one sec uh cool here we go I can share the link in twitch chat quick to Twitch about drop that there this is create JD app which is somebody using this isn't solid Star right this is just solid like v no that's solid it's all start awesome there's a solid start with typescript in Zod built in but also the ability to use Prisma trpc tailwind and the upstash rate limiter being built in is really cool too actually I should hit upstash about that uh they should pay me if they're or more if they're if people are using it that deep in love you guys up stash but this is actually really interesting yeah I mean they clearly saw create T3 app and they're like what if we could build create T3 app on solid start instead of next to be clear I've actively encouraged this in the community also this has 42 Stars already good [ __ ] well deserved I love this create T3 app is the set of tools and modular opinions around the core piece for us which is currently next.js could we theoretically make create T3 app support other bases theoretically yeah sure but that's so much effort and so much more maintenance for the create T3 app team where what I'm seeing with all of these new projects spinning up is that you can take like the lessons learned and the work done by the create T3 app team and apply that in something that uses like an entirely different core but a lot of the other pieces are still reusable I've seen this with create JD app I saw there was a svelte version of this as well somewhat recently people are really taking the opportunity to create better initialization Tech to get started on the right foot with projects yeah I thought this was cool regardless uh I hadn't played with this combination specifically I haven't played to create T3 app specifically but I saw this and I was like ah this seems like on on topic with the kind of stuff that you guys talk about on stream quite often absolutely I'm realizing there's one other spectrum that I I'm not going to bother drawing right now but I'm realizing where like on one side there is performance like what can we do for the best possible perf like Marco land and on the other is the best possible DX like how much can we compromise in favor of the user or in favor of the developer which is flutter and it reacts a little further from that and it keeps going up and down one of the interesting things he said about solid and I I know we're going to like grab a whole bit here I think this is the actual last thing one of the interesting things you said that what we were last chatting is that you've recently realized people do actually prefer the DX of solid to the DX of react due to the reactivity mental model and how like the the developer experience Works around it being simpler to follow in a lot of cases yeah I mean it's interesting I've always liked it but I always assumed it's because like my my tip you know because I'm a little bit more on the like I've been doing this a long time I like the I'm a control freak I like having all those elements but I remember some like a couple polls on Twitter or someone talking about it and I like felt is very well known for its DX I was seeing solid actually come up in that conversation you know in the same kind of range so you know it was like it's felt and solid were like kind of switching one and two like it was considered comparable and I I it's interesting because it wasn't something that I I really wasn't sure that it actually conveyed outwards like that I didn't realize people were that happy with it and it seems to be the case I've definitely felt that myself as a user of solid that I've been consistently surprised like the even the dumb example I gave at the beginning where you just moved the state out and now it's Global like a lot of those patterns have a lot of it's like the shock of oh the things that I spend my time in and react just don't exist here but the other is sometimes you get shocked when a component doesn't rerun and you expect it to and like if you have an effect where one of the dependencies is called under a condition that isn't hit it doesn't re-trigger like there are different unintuitive things but I find that those things are both deeper and often clearer when they go wrong where in react the failure doesn't happen in your code it happens in the like virtual Dom and the life cycle so like the bug you're looking for is necessarily the thing you wrote It's the result of the thing you wrote whereas in solid it feels much more like my code is broken here yeah yeah and I I mean that I was hinting at this earlier when we were talking about the stores and the nested routing and all like like that whole thing with the data fetching and I said I had no choice um I don't know if this is a good thing because this is part of the question like if the framework or the library kind of pushes you to write things in a certain way to be optimal or otherwise like you really know it's not like good um like is that good DX or like are you being held at gunpoint but I I guess like I don't know like maybe it isn't maybe it isn't like that maybe you just kind of get in the flow of things and then everything makes sense absolutely I think that there's a unique level of flow that solid has provided me I've enjoyed it a lot and it's really cool to see more and more reasons to adopt it and more and more interest in the framework any last things you wanted to say before we wrap up um I don't know yeah we've been going a long time I'm almost three hours and this has been nuts I didn't think either of us had this in us today I know it's it's been a long week but yeah let's let's uh yeah I know that's the crazy thing well I was working on that demo like the the movies demo the images weren't resizing like for the responsiveness so I was like doing that very late on Monday or Sunday night I can't even remember anymore anyways uh yeah check out just a shout out typical shout out it's obviously solidjs.com um all the links are there but yeah Discord is where we live um so yeah definitely check out our Discord um the links are all lost solidjs.com make sure you're following Ryan on Twitch if you're not already I just shouted him out again with the fancy new little shout out feature so you can check that out I also saw that one of our moderators I'm pretty sure it was glossy appreciate you a tongue Christian made a chat command that links to his YouTube and Twitter as well be sure to follow him on all of those things he is if you liked this in the depth that we went here you're gonna love his streams because they go way deeper also he actually responds to chat and interact so if you're a chatter that likes to ask questions and be part of a conversation go to history not mine I'm just here to [ __ ] post thank you this was super cool thank you so much for coming out for this one man I know it's been a crazy month plus at this point and for you to still find the time to come on the show for usual dip Wednesday means a ton thank you so much I can shout out one more thing not that it's probably gonna matter a ton of people here I'm going to be at modern front ends live in London next week so you can check out my talk there as well and I'm actually doing jet brains day tomorrow as well but that's the end of it I've I feel like I've Been Everywhere uh not everywhere but I've it's been a long it's been a long road um so yeah November conference season's been nuts this year it's like thing after thing after thing like poor roommate was at uh the GitHub Universe today and I have a ticket I just I didn't go I have too much [ __ ] to do yeah yeah yeah for sure but yeah I mean this is how people find out about new ideas and in the case of like jam stack maybe new ideas are formed so yeah that was so cool once once you pull those people together you never know what is actually going to happen but I was so pumped with all the conversations we had both the last two days as well as here today thank you again so much I'm going to uh you can piece whenever I'm gonna go find somebody to raid because I just wanna chill after this you can hang out for that too either or whatever you feel like no hard feelings if you just ditch though yeah no it is a uh it's it's five o'clock which is my my time to go get some dinner so I will catch you all later and uh thank you awesome thank you thank you again man for stopping by see you in the future peace man yeah let's see cool let's give Kisa a raid because we love her she deserves a few hours somebody who I absolutely like oh a raid to before then why is this no longer oh they sort options what the [ __ ] why would I ever want those here this is what I want much better cool yeah let's go hang out with Kisa definitely deserves it she's been killing it lately and has been super super busy so it's good to have her back on stream uh pop out chat raid kisaka Toriyama thank you all again for stopping by this was an awesome show we'll hopefully have a video out tonight or early tomorrow I'm behind on the uploads recently but yeah life's been a little chaotic lately thank you all for hanging out thank you all for Jillian for this weirdly timed and super long stream appreciate each and every one of you stay in touch see y'all next week we got some fun guests coming actually I can announce it now yeah [ __ ] it Lee Rob on Wednesday next week so if y'all want to be here for the Lee Rob interview make sure you are I am so hyped it's going to be a great show see y'all next week peace notes be here Friday hitting that raid now see you guys next week peace




## STREAM VOD ThePrimeagen vs Theo - Dev Debates on the FIRST DevHour Podcast - 20220416





## STREAM VOD Theo's TERRIBLE at React (seriously I hate react 18 so much aaaaa) - 20220716
i can do it myself and obviously we have chat to do it as well so anyways for those that were not here for the last stream i started building a new app that app is z.t3.gg it is an app for q and a's ideally like i built it for streamers actually something i can do is on my desktop get that embed url and put it on my stream quick so i'm going to actually add that to my overlays layer so that whenever my overlays are visible this should be as well call this z.t3 paste that see how it looks quick new question two i'm trying to find a good place to put it i think here is fine i think i wanna yeah the res is fine say that all looks good uh it isn't visible in the screen oh do i have the overlay off yeah i do cool so now when i make a question visible or invisible it will appear and disappear on my stream that's not actually on my screen right now if i switch views it's still there and that's coming from the web app really proud of this one hacked it together super fast i built all of the tech for it on stream uh wednesday but i just today or not today like last night really hacked on it a bunch more because i had little things i didn't get to on stream and i wanted it to look better so now it looks better and now i want to show you guys the code show you some of the cool things i built and talk more about it yeah it's live z.3.gg theoretically anybody can sign in with their twitch account and use it and i can even share my q a url which i made a lot less ugly and now you all can go there to ask me questions if i set it up correctly it should actually live update with the questions when you make them look at that question is coming through and if i pick one here it'll be visible on the stream it's actually useful that's a good one we really need to figure out ping merch soon if there's reverb that's my mic echoing uh should be better now sorry about that i my headphones are turned up too loud let's just switch back to the closed back so it's not comfortable did i end up using pusher that's actually a very fun question of course there's emoji support they're gonna look weird on windows but that's always the case yeah the archive button somebody asked it deletes things and it's super fast of course see how fast i just archived everybody's stuff flying yeah proud of this one we'll show y'all how i did all these little pieces but one of those pieces that we're going to talk about is the websocket stuff there are multiple levels of how i overhauled all the websocket stuff but there's a lot to talk about there so i will start by going into there was one commit that i should have made a pr for and didn't because i was rushing it is abstract pusher so in this commit i [Music] oh this is like the worst view to show something on stream and i hide that that'll make it better okay so previously i had this one awful hook this used latest pusher message that would create a pusher client in a memo which was erroneously running on servers so i had a bunch of servers defining websocket connections that shouldn't have been happening i had this use effect that would do most of the busy work it would subscribe to the channel it would bind the event or two events to the channel and then unsubscribe one of them because i forgot to unsubscribe unpinned so i did a great job with that one as y'all can see and i use this one hook here return null if there was no message and returned this weird little ui with the message in it when there was so the first thing i did is i made it lazy because i don't want to ever bind the pusher stuff on server i want to bind it on the client so by doing this and not connecting to pusher until in this embed view i have now prevented the server from making a connection that it shouldn't be and then in here i have the actual pusher client this one i did in three pieces i expected to need to bind more things here i didn't yet but in the future when i make some additional changes i think y'all will understand why i did it this way section one the store this takes all of the things i was doing before in particular the subscription or the creation of the client and the subscription to the channel and it puts it all in one place i create a store as soon as this is called so the create pusher store creates a pusher instance with the correct cluster in my key it subscribes to the channel that you pass it and then it makes a vanilla zest and store with those things i use a vanilla store because in the future i could see me using this for other things and i often will inline buying additional stuff here probably do this on stream later so you guys can see that and then i return the react zest and create which is the z stand react binding for a zest and store section two is where i create a context which is a bit of a weird thing if you know about zest and it's like oh why do you use context isn't sustains an alternative to context can be it doesn't have to be i specifically choose to create the store through a context so i can relate the react dom to the state directly i was arbitrarily binding this [ __ ] prior and here i now only create the context and i only create that zest in store and as such i only create a connection when i create this context and mount it in my react dom welcome to dependency injection the stream good job so here is where i actually return that pusher provider so as long as you mount this you have the zest and pusher store that makes the connection makes the subscription does all those things doesn't clean up yet it'll be annoying but we can do that in the future and then the hook this is the important piece i once again had to roll my own use event official react hook coming soon can't wait but for now you subscribe to event gets an event name and a callback it grabs the channel from the store it creates a stable callback reference in here i call that stable callback or i bind that reference to the callback in an effect if it ever changes and i do this here so that i never ever have to unbind if i don't need to this is a problem that i have with how even use callback works in react use callback assumes that you want the reference to change when the contents of the function change or you redefine that in line i think that is really bad when i mount the you subscribe to event hook and the string doesn't change i don't want to rebind this i might want that re-binding to touch a different like functionality but i don't want the binding to go away so by doing the binding against the reference with the event name i don't have to worry about accidentally unbinding and rebinding anymore and i also have to create a reference here because if i just bind the stablecallback.current stablecallback.current is the thing that can change so in here i am binding to reference which calls stablecallback.current which now is able to change so yeah annoying but it's necessary and somebody in chat just mentioned that this pattern comes from dan abramov wrong button that is not what i was looking for there's an actual github discussion on it maybe it's linked in here i'm not paying for medium here so dan abramov actually published in may a summary of the use event proposal which you can see here is exactly what i wrote one sec i need some water so this is the same thing that is described here making declarative set interval type stuff it's the thing that react doesn't do because they assume everything needs to go through the life cycle and these are things that don't need to go through the life cycle use event is a way to opt out of life cycle trigger update or triggering life cycle updates to a binding as long as you expect that binding to be consistent like it's a a trade-off yeah it's a cool proposal really happy this will exist if i had this then i would have been able to delete both of these and make a much simpler channel.bind but since i don't have that that is not an option soon tm i also saw a question that i've been seeing a lot that i want to go fix so i'm going to go do that quick i'm going to make it a point to update the faq on stream more uh pt3 astro maybe some pmp for this make sure i'm on the latest faq and i'm gonna what is the code exclamation point g thing theo keeps typing in searches duck duck go bangs let me go grab blink get status oh make sure that looks okay cool cool hope that answers your question why do i use duckduckgo if i'm going to use the bangs anyways anybody else got a dumb question for me before i close the project so there's at least one or two more in here my laptop's dying so i'm gonna plug that in oh no my elgato is being weird hopefully that doesn't happen again hopefully plugging in my laptop doesn't cause a ground loop it does that sometimes but we seem to be good at the moment y'all aren't pretty you all are pretty bad at asking dumb questions come on there are no dumb questions no dumb questions are my favorite genuinely love dumb questions these are more annoying questions do i dye my hair no it naturally is half blonde and half brown that just happens magically by itself no dye anyways zapdos stuff because i built more than just that one change one of the other changes i made that turned out to not be that bad and actually be quite fun is i moved to trpc v10 and the syntax is so much nicer it's uh let me find a good example yeah here new question router submit tdot procedure dot input has this thing dot mutation does the mutation done get all protected procedure which is a custom procedure that is protected so that i know it has auth on it so i know context session user id exists i don't have to check it this would have failed earlier otherwise and i have the session i have the ability to order by whatever else i want to do in prisma and i return the type safe result it's super simple then pin just as simple protect your procedure dot input give it a custom input dot mutation grab the thing from prisma none of this code changed and i'm done what i should be checking here is that it's your question i guess it can't push to it would theoretically you could pin someone else's question to your session because it sends the message to your session id you wouldn't be able to pin to someone else's session so i guess that's a problem but it's not a big deal and then i create the context here pretty much the same one of the cool things i did though it was one of the commits if i go back to the trpc v10 interop ignore the errors those were funny enough a bug in the trpc type script where it was failing no unchecked indexes but in this pr i actually got the whole thing working with interop so i didn't rewrite the router i created a new router well actually i created an old school router create router dot merge the old question router dot interop which tells trpc hey make this v9 router work with v10 and then i created a t.router which is the new style of router it's the greeting test router and then i merged that with the legacy router and all of the code still worked exactly how it used to so i was able to move over without any changes which was super cool anyways let's look at some of the things that i did that were awful this is mostly just me making things less ugly oh i already mentioned the mistake i made where i was binding the prisma client or the um uh or pusher websocket client on the server so i was making hundreds of connections i shouldn't have been making which was very bad and no longer is happening one other cool thing i did the pr here is not going to be super impressive i move the pusher back in from pusher to sockety so it still pusher client on the client side sockety though is a [Music] open source alternative to pushers server so you still connect with the push or client but you host your own back end and the performance is nuts the the famous blazingly fast they have it discussed a bit here they use uh i forgot i think it's called uwebsocket.js which is written in c and they built a binding layer to it in node so that they can use node.js scheduler and sees like network management it's insanely fast uh it distributes across a thousand users on a 200 meg or 200 uh or my i don't know what they're using for that unit but 200 bags of ram in a tiny cpu on aws they used like a five dollar aws tier to test everything and the benchmarks were insane compared to alternatives it was yeah in aws t3 instance they were able to get some very very crazy numbers even the arm version was able to do some nut stuff so i'm hosting this of course on railway and in the zt3 gg i still have the postgres db here but i also have this new websocket uh back end that is just the sockety instance and we just had a bunch of people spamming the uh what's it called the like endpoint there we had a lot of people hitting that at once and you can see here it we we barely broke 10 cpu utilization on the free tier on railway like we're good uh who just said i deleted their comment i have never once deleted a comment on youtube i have reported a few for spam but they were like the egregious like like real online naked type [ __ ] i have never once deleted a comment on my youtube channel youtube might have deleted it but stop accusing youtubers of deleting things they don't i certainly don't i have never in my life deleted a youtube comment i've been tempted twice maybe and i didn't do it don't stop blaming me for this [ __ ] guys anyways here's our whole back end now other than of course the next js on versailles i'm actually pretty pumped because this is one of the few things i am running in production right now that doesn't have a third party service that it relies on beyond that like railway is hosting my instances but it's like i could theoretically put these somewhere else it would just be more work but i'm not how do i put it i'm not paying somebody else for a service right now i'm paying railway for servers i'm not even paying them yet it's still in the free tier and on versailles also still within the free tier rather than the things i normally use like a pusher to provide the websockets how many views to break it let's see uh what i should do actually this thing i wanted to do on stream i'll code a bit i want to add presents i'm putting this one right at the top is important why are you deleting my youtube comments i forgot to tag these other ones i got the t3.gg domain forever ago it's been my domain for four-ish years now so i don't yeah i paid the normal price nobody else had it it wasn't like a cool name at the time nobody cared now i have that all done let's let's build presents so what i want to do is detect how many people are currently on the question page and display that on the home page shouldn't be too hard only annoying part is going to be that the home page doesn't have access to pusher until the questions right now because i mounted that in the question view so that will be a tiny bit annoying but we can work around that yeah okay i'm just going to display it in the question view for now we have the you subscribe to event the first thing i'm going to have to do is make this pusher store publish presence so let's google search pusher i'm hopeful that we still have pusher presence support on a socrates should work okay it has to be prefixed with presence i remember that rule wait how is this working if i oh i guess it's not private yeah cool so what i will do first is publish presents so i want this to be boolean or string depends on yeah i'll just do boolean for now we'll make it a string if we have things we want to pass it actually yeah i do uh nope nope overthinking we'll do the simple way for now cool so we have that we create the pusher client i want this to include that's actually here uh publish presence boolean and here i want the presence like info which is members so members and what is the type of this let me just get that for now uh channel or call it any as i figure this all out empty array called any array and i want to const presence channel equals pusher client dot subscribe oh perfect and i want to make this a presence channel so pusher i wonder if there's a there is nice should probably make that on here too and here's where the real magic happens if i did this right new or presence channel dot bind how do i actually get updates what i'm looking for is an easy way to get all of the events i'll just bind the i need to get the type off that though so we'll do pusher we'll start with the poster subscription succeeded event see if this gives me the correct types message it does not go to definition i want a type def i want to see what they give me here what i really want is instead of a pusher event a presence event i don't know if they have those or not in the library presence channel data that sounds promising nope that's way lamer than i was expecting annoying i guess there's the dot members so i could grab that instead of carrying what the message is here let's do that actually const update members equals vanilla create or no it's new store dot set state members presence channel dot members that needs to be wrapped in that nope off by one no what is the type of dot members then dot members god i don't know what that is so we'll assume that worked and it's going to console.log this whole bunch console.log members what was the other event that i wanted to bind this on it was subscription succeeded probably want to do member added and remember removed as well sorry just checking things on my other computer i have so much [ __ ] open and even more than i'm supposed to be doing cool analytics no i don't want this i want the live view youtube come on i also didn't have youtube chat open until just now sorry y'all cool i need to make my chat visible again one sec chat there we go now i can see chat on my main computer again my bad on that so here i have all of these update functions where when any of these events occur it will update the state with the members and set those in the zestand store and log it because i want to know what happens when those occur the important piece to note here is that this all happens outside of react none of this is react code once we return the react zest and store now it's bound to react and we can do whatever we want from there but by default it is entirely react free and i went out of my way for that because react is not the place where you should handle all this async [ __ ] you should do that externally and then in react subscribe to the events that you need to subscribe to so from here i'm going to just compress all these i actually don't need to do this anonymous function i can just update members cool what are the differences between pusher and socket i o what are the differences between versailles and aws okay now i have all of that let's let's get the presents publishing going is there an example of publish or is subscribing also publishing you i think it just auto publishes as well good to know let's see what happens when i do this locally probably not running it yet npm run dev yo thank you trash for the sub i will give all of the subs thanks momentarily i really want to see if this is working or not error unable to retrieve auth string i thought i was gonna have to do this i'm annoyed though yep we have to do off in quotes because their auth is weird and i'm probably not gonna follow the rules for it authorized connections authenticating users i'm gonna see if pusher can carry me here or um our good friend co-pilot can carry me here export default function pusher off end point i think it's just this part i care about yeah it's just that part i care about cool i already have the pusher client defined somewhere else let me grab that guy quick i just [ __ ] leaked my environment variables again are you [ __ ] kidding back in a minute apps gonna be down for a sec guys i am sorry oh i [ __ ] hit twitch too that sucks can somebody link me that stupid uh vs code extension that hides my environment variables i [ __ ] need it i guess i'm dumb and i'm pissed off now uh okay that all seems to be done god [ __ ] damn it i'm so mad let's see if it works i'm testing not screen sharing it does not appear to work yeah i hate how this does this but it will make it less likely for me to leak things now that i have it turned on whatever i'm pissed off that's so dumb anyways hopefully this is working again error authorizing against endpoint oh that's the old off error the other stuff still seems to be working fine i have to redeploy on for cell probably i'll do that quick settings deployments redeploy anyways i need to grab from in server router subroutes this pressure creation thing i think that's the only thing that's the environment too so i will link these guys pusher server client exit audio server for sure cool now i have that there and i can have it here i guess that's just the id that's passed from the client that's fine next api request next api response that should just work now right nope oh i didn't put that endpoint in the client config here off endpoint slash api slash pusher off invalid author response cool at least it's trying now expect a channel data field okay let's start [Music] authorized connections authenticating and authorizing users are different in pusher and it's really dumb pusher authenticate user yeah i hate this authenticate is how you create a user and then authorize is how you give them access to a channel and they're separate and they're dumb you're out encoded socket id here's the thing i'm doing i need to do this separately uh user authentication endpoint okay yeah this is the thing i need to do separately so pusher slash auth user we're going to make a separate auth channel i think this is the auth channel actually so i'm going to rename this one and this needs to be off user or do i not need that and i just need to export get that to go away i am going to dig in a bit more on why this is failing and see if i can give it the thing it's asking for instead it wants channel data is that an option on this endpoint yeah okay will that do it nope why it must be authenticated yeah so i do need to off them separately export default function pusher auth user and it's just copying from the other file i'll start there and it's not authorized channel it's wait why is the user authentication indicating users authenticate user there we go and what is user here oh there's an idea stem cool we'll see if that works for now channel name's not gonna exist on this endpoint and this is the one that we use how do i configure that's all i need to do for now pusher it needs transport cool and this needs to be api pusher off channel and api pusher off user no more errors that means we're connected with presence theoretically and if i was to open up an embed we should see an update from the new thing joining oh we won't because the ids are going to be the same we can fix that pretty easily though what is this mad about okay i have a solution to that annoying problem so what's happening now is we need ids of some form and we don't have ids of any form so i need to find a dumb way to create one what i'm going to do for now is uh yeah headers user id temp id plus math dot random dot to fix seven cool that'll generate random enough [ __ ] to use as ids and then up here i should be able to grab i know it's header i need that on the body then oh okay oh it's params that should work i guess i could grab things off headers that just comes through on the off user though right yeah i'll grab it off headers that sounds like the right thing to do headers const user id equals request dot headers if our type of user id not equal string all right that's send good enough for now otherwise we do this and we'll use the user id asked theoretically i can do the same here don't save uh does auth have headers and if this all worked i should now be able to grab the temp by or the user id of the header here request that header should do that same fail here cool and if i did that all right these should now authorize with different users and i'm almost tempted to spin up the or switch back to actual pusher for a tiny bit so that i can see if it's working there and use their debug tools because using this without my own debug tools is really annoying i know what i can do ready for a really dirty trick that y'all should never ever do but if you need to it's a lifesaver cool no members me is back is null my id that part worked fine cool okay my cat quick one sec everybody who's saying that that's curse has never had to debug something more cursed like the amount that that saves me in terms of effort to not have to like think about that [ __ ] is hilarious i'm just pulling back my hair it's annoying me who needs unit tests when you confine things to window okay am i not publishing to this right remember stop me uh okay i'm going to do two things quick the first one is i'm going to turn off the log to console it's annoying me and the second is i'm gonna log a ton eh wanna talk at someone that happened i guess with the other logs deleted it should be pretty visible if that happens doesn't look like that happens cool subscription succeeded function yeah two things let me see what i'm getting back here console.log server contents channel name socket id user id let's see what we're seeing when i refresh peasants user bunch of nonsense for contents socket id is this thing temp id is that thing cool let's make sure i'm getting the right stuff on the other call too to make sure i'm authorizing correct does not appear as though auth user is being hit oh oh that's dumb if that's the case uh cool that's oft window dot presence channel dot me me is still null does socrates have presence okay so it seems like they have presence built in and theoretically working so why am i not it seems like the subscribe just doesn't happen i get the attempt right presence user yeah i do with that id and everything yeah i request the authorization and it theoretically happens there so why do i get nothing back anyone got any ideas on this one i'm a little more stumped than i would have expected i i'm what i'm looking for is like a present stop publish basically i'm assuming what's wrong is i'm not getting anything back so pres or window dot presence channel dot anything is empty right now i have two things connected that didn't error the user responded with a 404 what is that all it was no me still coming back null here dot members yeah still an empty object both of these should theoretically be publishing and neither are come on remember added also i'm not giving enough data and as such it's not or am i still passing empty object for one of these i'm not okay what is it mad about okay what else can be in here then user info maybe i have to put that does not appear to have done anything yeah great i'm not adding stuff to me and members they are theoretically if the subscription worked i would have presence channel dot members updating the subscription succeeded doesn't appear to be happening though we'd get some console log if it did i don't really think an example is going to help me here with presents members each yeah the channel dot bind pusher subscription succeed is never firing is my problem right now i guess it doesn't appear to be connecting successfully uh pusher we're not actually using pusher we're using socrates i'm hosting it myself what i could do is disable this update my uh as they are my secret and stuff and try that does the key need to be id instead of user id for which key specifically because these have to be these two those aren't even other options like if i remove this errors for me ha ha this event handler not implemented interesting that appears to be the problem might have to go back to real pusher [ __ ] uh id default app enable client messages all right yeah i am like what is the event that like oh it's the sign-in call i'm making that's why it doesn't like that which is fine i don't technically need to sign in for this to work hopefully that will stop throwing that error and we might get something different okay the sign-in isn't implemented that's fine but the other stuff should be coming through by now what the [ __ ] clients on versailles everything else is railway auth response pusher authorized channel for presence channel okay i've done everything right here all right does it give a list of all the different like built-in event types anywhere it just pushed your subscription succeeded in subscription error cool hopefully we'll get something from those off error unauthorized [ __ ] christ okay and if i do the sign in does that just fail trying to decide if i just go back to actual pusher or not this is the client calling the server to receive the token the problem is that the sign in attempt fails is there another authorized method that only touches my server not the pusher one say user authentication okay let's pusher client.bind [Music] no this is push error error will we get a real error from that nope cool so the sign in doesn't appear to be causing an error will it neither happen okay that's a good sign this should be simple maybe if i set this to no little work nope okay i'm just [ __ ] great yeah this is annoying i'm gonna try swapping back to real pusher for a second gonna have to hide so i can not leak again this is what i get for trying to live code again i had all the like hard parts set up i thought i was done almost done one sec guys that's the key it's annoying hide that hide this file i'm gonna turn on cloak again okay that's hilarious ones that are commented out it still shows so this is actually [ __ ] useless great that chromosome extension is terrible i'm not chromecast vs code extension somebody can make a real hide extension that makes my life a lot easier but in here i'm going to comment that guy out i guess i can comment all those out theoretically now i have to restart the dev environment too because those are new environment variables should probably turn the logs back on too websocket error not in the cluster i forgot to put the cluster yeah cool members count two look at that switched over there and we're fine i guess i'm stuck on real pusher that sucks that sucks really hard actually now look at that all the members appearing we did it yay that's annoying if i show oh i didn't change the back end of it that's annoying uh i have my other pusher client here yeah we can now i should be able to again make those work yay okay and theoretically i should now also be able to go to the pusher dashboard and i should be able to go to here and see in the debug console uh i can see in here which channel i was connecting to right wait is do they don't have a way for me to look at a specific that's really dumb i'm too used to ably way too used to ably where i can just look at the presence for a channel in here this just gives me events okay i guess that works well if i kill this i start getting all these logs i was looking for yeah i'm getting all these members logs i wanted before which means members should now be updated why is it an object oh god it's funny because my video about not using objects just went up and uh i know it's not even an array it's just that and i'll bind it as empty object as the defaults here and then in the update that should work and i can unbind these now we can unbind these now a little confused about how there's four connections but i want to overthink it we will add now in the ui the currently connected state so i'm currently not exposing that in a hook i just expose you subscribe to event so we're going to expose export const use current member count equals we'll just call it directly this is where the magic of zest and comes really in handy we have the current state and we have members on it but i don't want to return this i want the count and i also don't want every time that set gets called to update my whole react app or whatever is calling this so what i'm going to do here is turn this into account which since it's an object it's not that easy object.keys.length and now as long as this number doesn't change this hook won't trigger an update so if i go in here do const current count or connection or let's call it connection count equals use current member account i'm gonna have to import that now i can render that in the ui div connections and that number will be there and even if these members are changing in the background which right now they won't be because theoretically nobody else is connecting or disconnecting but like if other things were changing in that causing the state machine to update as long as the number doesn't change no re-renders are occurring so there you saw like five new events came through when i refreshed that if we wanted to prevent that or uh the number of connections went down actually i know what i'm doing i'm not cleaning up i'll fix that later so here though i specifically can show that this update isn't happening by console.log we're re-rendering and what we should see here is a couple re-renders but only like one per group of member events that one reared way more than it probably should have that's a little concerning i wonder what's causing that re-render oh i know it's causing the re-render it's me switching tabs [ __ ] christ that's gonna skew the results here really bad uh let me unfull screen pull this open in another tab here and we'll see we only get one re-render per group the grayed out one is just react devtools doing its thing in the background but even though like theoretically multiple things are happening here we only get one rerender for the count going down and up for each one it goes down and up specifically because the z stand prevents every update from triggering a render it only sends the update when the data is changed when you use the selections super powerful this number should be -1 but it also looks like i'm effectively connecting twice right now somehow i don't think i could be doing that uh what would cause that to connect twice i wonder if i kill this will still work okay i'm getting two connections per right now why is that these are all different ids as well is it rendering on server still or is this react doing the stupid run twice thing it's one easy way to check console.log was this done twice nope that's only running once so theoretically we should only be publishing once because none of this code runs sec error again pusher client dot subscribe presence slug as well as subscribing to the slug directly if i don't subscribe to that hmm i do wonder if there's just one that's stuck right now window dot presence channel dot members stop me yeah it does look like this 7-4 one might just be stuck nope it's a different one this time fascinating i'm gonna kill the logs in the server auth part because it looks like a erroneous connection is being made and i have no idea how okay so the five eight one the one that's this or not let's see it is not where is this other temp user id thing coming from do i really not have this open somewhere else i am so confused i have no idea where the second connection is coming from the [ __ ] i'm avoiding the react doing things twice thing by not using react to do things very easy i'm so confused i was like that had to come from something on my side let me log when this id is created okay so this is the 861 window.presence channel.members interesting me is different from the one i created at the start what the [ __ ] i'm not creating another anywhere else i can't be this is the only code that ever calls the pusher client creation and there's no other way for an id like that to be generated guys here you're missing the very like obviously wrong thing this guy is the id that i'm connecting with it ends in three four four you see that member joined but then another member appears when i type in window dot presence channel dot members dot me for myself my id right here is different from the id i used here the members in the room are the id i started with up here which is the three four four one and the id it thinks is me which is this three three zero one there are two different ids here i connected with this one it's still here but the one that is me is something else it's still using the same format for the id which means that it's mine it's not two tabs y'all are you guys [ __ ] brain dead i connect with one id and dot me is a different id are you listening for those in the back having another tab does not change what dot me is bound to i'm ignoring chat y'all are more useless than usual push your subscribe push your subscribe data off [ __ ] presence user cool youtube chat's being even worse right now great okay y'all seem to be confused about what just happened let's let's rewind a second i was very explicit about the idea i'm passing and me not being related i clarified that three separate times and chat continued saying are you sure it's not two tabs so i got angry i'm sorry i get angry sometimes everyone gets angry if you all want to learn something from this actually a good lesson if somebody's frustrated and they're expressing something don't ignore the thing that they're expressing just because they're angry it's actually worse if you do because you'll piss them off more cool so let's google search pusher client connecting twice presence is there any other place where pusher's being used right now that could be the problem case sensitive search i need to ignore node modules filter exclude node modules this is very hard to read when it's a small it's just this file and then the server side where i create that my question is where i mount that browser in bed view where i mount that there's nowhere else for this to go you can [ __ ] off ethan on youtube being here's a privilege and i'm glad to take it away yeah i'm so [ __ ] confused on this one i wonder if it's something really stupid like the tls flags or something being on what if i just [ __ ] up the public channel name quick just add some random [ __ ] to it see if that's possibly where the second one's coming from nope what the [ __ ] it's almost like the back end is behind one call or something that's what it feels like is the off actually let's check that if that's the case let's see that'd be hilarious so the idea this time was the 935 nope both are different this time it's oh three zero and six five nine and those are both different again pusher isn't counting subscription that's actually a good question pusher isn't counting the number of subscriptions is counting the number of members on the presence channel so the place that i'm getting that number from is very specifically the where did i find it i create the presence channel here where i push or client.subscribe to presents as presence channel and i bind that to window so this is separate from the channel subscription that i do here like these are different subscriptions theoretically this one should not be affected by this one at all i can comment that out and for now this is going to break a bit but whatever and we'll still get the 2 because that's not the cause a really good question though because that could have been it and it's not the really strange thing here is i only ever call this temp id generation thing here once it is right here this is the only place where temp dash id exists in the code base so it has to be coming from here because both these ids have that signature but it's confusing because this is only like used once and the ids passed to both of these are the same and i'm not even doing the sign i wonder if i just kill that same deal very interesting i i'd be very surprised that this was hot reload's giving me a hard time it is possible that the react devtools back end is running this a second time we can there's a easy-ish fix npm run build yep [ __ ] christ react devtools runs your code in the background so there's two instances of it running it wasn't reload dev server the dev server was not the problem it's react dev tools was the problems specifically react dev tools is broken watch i'm gonna remove this extension oh i guess it still runs dev tools even if you don't have the extension there an easy way to disable that this isn't the react 18 concurrency feature guys this is the code running twice i think i have to reset that oh i guess it is what the [ __ ] uh i thought that strict mode ran things twice in the same instance it's the problem here isn't that it's running things twice it's that it's running them outside of the main event loop it's there's a second run time running the code twice react why uh the giveaway that i should have noticed was that the id here and here are different i'm stupid for not noticing that yeah i'm gonna go back a sec to say whoever said it was another tab you're you're still [ __ ] brain dead chad has been screaming react back end i didn't know what they meant that was my bad i should have clarified i should have stepped back and said what do you guys mean by that my mistake my head hurts that sucked really hard so is this when people say effects run twice is this what they're referring to because i was under the impression that those ran in the same band because if this is the actual effects run twice behavior then that's really bad okay where is okay new instance okay this is what i thought it meant this is what i expected when i heard effects run twice notice how both of these are running in my questions.tsx they're not running in the vm they're not running outside of react they exist in the same run time as everything else like theoretically let x equal 0 x plus plus x this should log one and two yes because the hook ran twice the effect ran twice and this is my understanding this is a mount on mount mount that's what happened here but since it's the same javascript's run time this is the same instance that's valid what i don't think is going to work and this is this is the ultimate test here of how [ __ ] is react 18 let binding count equal zero and in not in here in this guy i want to creating with id temp id binding count binding count i'm expecting this to say one i have to plus plus it actually uh binding count plus plus i'm saying this to say one twice one two why how how so done let today be known as the day where theo reconsiders his choices and looks at solid with longing eyes i hate everything the problem with this is that it's not javascript why would i move to svelt which is even more not javascript i'm not muted i'm just far back so i'm quiet it did log one two sorry if i was covering that with my camera uh one and then below here two [Music] okay that should do it for now uh what i would like to do is not create this so it doesn't run in parallel but it's technically just remaking the subscriptions in the background uh you know i bet this is the dumbest part oh oh i know this is about to be so [ __ ] dirty i'm going to commit this quick because it's working okay so i'm going to undo those changes put the client back in here but i'm going to do one thing differently killing the logs i'll leave those so i know if it gets done twice but what i need is whatever the return type of this is what store equals i'm gonna not do this here i'm gonna just return new start [ __ ] you react theo wins whoa there we go you can't beat me react nice try you'll see here was this done twice runs once and you'll see here [ __ ] you react i win runs in the background ta-da winner celeste supposed to be a singleton they took away my singleton i'm mad the problem here is that zustan's built to be used kind of as a singleton the pusher this pattern in particular breaks that what i could do here are refstable with this yeah i think graphs are stable constor equals use ref theoretically this should work too and i can kill that guy and this guy and this guy it appears that does the opposite of work does the ref really run more than one time how how does one create a stable reference inside of react use ref doesn't call a function that you pass it use ref takes the value that you give it there's no way that's gonna work holy [ __ ] this this is the most i have been upset with react in a minute ryan feel free to clip this whole stream and just put it on your homepage for solid because jesus christ who said it wasn't a react issue let's talk this is why i don't live code anymore yeah this implementation of strict mode has some dumb gotches the the thing here that is dumb is i want the ability to theoretically have multiple providers each of which have their own session and manage it i shouldn't have to worry about multiple instances of a component creating multiple instances of a thing what they want me to do and it's annoying to do due to the way i use zest stand is clean up and remount so if zesting had a clean up here i could theoretically destroy the client and create a new one but i don't really have a a clean up option in terms of how i defined this here which makes this strategy not viable for react 18 which is incredibly [ __ ] infuriating i i wrote this component in a way where i could theoretically render it multiple times now i had to undo that because react 18 is dumb yeah i'm actually uh maple you're touching on something i think about a lot put less stuff in components but write components so that they could be self-contained i need my components to contain things like they're binding if i have like three components if i want to have three different question views open and each of those have their own in this case a z stand uh pusher store i want all of those to be able to open like next to each other and define their own instance a single time and not think about it too much what i could do and this is dumb but i'm gonna save this is working quick i think i already did cool i did star equals i guess i'm just calling it one so we'll do it that way react dot use effect console.log cleanup that really shouldn't happen i guess i need to return that in this yoink yoink i think there's a kill all on pusher and just disconnect and now if i delete i guess i don't need to delete that one i need to actually use this store i delete that then that guy if i did that right i did not do that right does that mean that the instance being passed here is not the instance being used here oh this is running every time that's why maybe god i hate use effect nope what the [ __ ] gonna go disable the pusher logs because they're noisy as hell cleanup that really shouldn't happen new instance two i am does he use ref maybe i next person to ask if it's because i have multiple tabs open you're getting kicked sorry bud [Music] the crazy thing here is only two instances are being created it makes no sense that there's three in there i do need it to happen inside of a component i want to be able to mount two pusher providers and have both of them have their own stores and work the problem here is the store that gets passed here is not the most up-to-date store this reference that this binding is being created against get stale window dot so i think the the quote correct way to do this now is uh what's the type of this it's yeah store or api no you don't put anything there and that is the right way to do this in react now [ __ ] this is not essentially the memoized approach because if you bind something here watch this here's what i'll do what i want to do now is let x equal zero turn x what will x be six react isn't triggering one update reacts being really [ __ ] stupid now i was going to ask but i forgot to what did you guys think the highest x would be that comes out here let's try use memo because that's supposed to work right this should work right still goes up to two good question what is ugg yep it's also too let's make a quick demo components i want to complain about this on twitter const react 18 is bad cool this looks very screenshottable i'm gonna go throw this in pure and do my annual stream like post i need to close my dms is the code snippet twitter it's pure something right turn x uh good call missed that isn't it pure a carbon thank you cool that looks fine i feel like this is gonna get [ __ ] be a little nicer does it really not have jsx okay it does it's a tsx though even better cool we'll go with that export do i add in the uh i kind of want to add in the use state version i'll do that next let's add i already posted that i can edit this to hell here's the link if y'all want to go share that with some friends and see if they can answer this correctly because they probably can't because this is really bad behavior i hope that y'all are having some fun from me suffering immensely right now because this sucks this sucks hard i want strict mode to be on at all times that is something i don't want to compromise on i want to learn and catch any theoretical bugs as soon as i can still dangling let x oh yeah that's not the real code though let me put this back just realize y'all can't see my commit messages that's half the fun i'm gonna run my dev on the other side so you guys can actually see what i'm doing cool none of this was what i wanted to talk about today literally none of this i'm gonna rename my title at least someone got roasted and it wasn't me yeah the multi-tab squad pissed me off a lot happy that we got around that i did bookmark some four stream things if i recall nothing new never mind i thought i did i'll be so surprised if anybody who wasn't watching gets this one right because holy hell it's all working fine now i need to go update environment variables in versailles still i think uh i'm easy see if prod is working or not that looks like a no going to do some environment variable stuff give me one moment y'all envy event db oh i didn't update that yep cool let's i'll just trigger the redeploy by merging my pr cool well this now has presence working i should probably make the ui of the count of connected people less ugly do that fast my questions question view i'm putting that here let's put that above for now see how much better it looks better enough to start currently connected uh what i'm going to do is i'm going to make this less than i'm going to minus 1 on the count because it counts yourself uh there not only show if you have a connection open which won't happen on the q a pages where i want it to but for now currently connected1 cool good enough and with that i can merge this and that will fix production because a new build will happen which will have the new environment variables the minus one is counting yourself that's not a double count thing that i put there the minus one here is because you count as a user and i only want that to come up when you have an embed connected i think what else i wanted to cover try two plus connections why this works it's fine y'all are looking for edge cases that don't exist how is this going seven seconds in okay it's going to be a bit and we get any answers to this yet nope nobody has the boss what a surprise can i quickly re-explain the project yes actually i should do that so for those that don't know z.t3.gg when it's back up will be a place that you can ask a streamer questions so hi theo when you submit it the new question will pop up here and if i have oh the embed's probably dead on stream yeah let me refresh that in my overlay once prod comes up but theoretically i'll just open another tab when you click on one to be visible it becomes visible or invisible and that will pop up on your stream it's meant to be an easy way for a streamer to host a q a where chat or whoever posts questions and i can click once to make them visible uh how much time we got on this guy cool should be live again nice so if i go refresh in my overlay then i should now be able to oh i didn't update the environment variables for the new pusher [ __ ] [ __ ] environment variables are the worst i actually need to just learn doppler or something because i i never want to think about environment variables again let's update the wrong thing i did next public pusher app key okay and now a redeploy should finally have everything working i am dialga or digia said environment variables are nice irish should retract that have you ever dealt with the opposite appendix surgery is nice brain surgery is nice doesn't mean i want them doesn't mean i don't hope that they improve over time doppler is some way to manage environment variables we tried it for a bit at ping it wasn't the best here sync environment variables at scale yeah i might try it again but i'm annoyed will production work now no it's still building it's assigning the domain should be ready in a sec and i can refresh it on stream studio mode overlay refresh theoretically yay it appears on stream now so i could be in like my cam only view and click is it worth to convert a mono repo to use trpc if you already have a separate in the front or back end depends on the problem you're solving if the problem you're solving makes more sense to have a full stack back and front end together then probably worth mono repointing it if it doesn't then don't use it is the web components api failure yeah yeah it is theoretically if you all ask new questions i should immediately see them too which is cool so ask away i can share the link in chat again let me do that there you go does the question page auto refresh doesn't auto refresh but if you ask a question it should auto appear because there's a websocket connection sending it through i wanted this specifically to be a way to do anonymous questions i could make it like less anonymized in the future force you to sign in and stuff like that but this is meant to be a really quick like example our hot dog sandwiches that's a very good question we're gonna have to go a bit more in depth on that one uh cube rule very important let me hide that for now i'll just open another one to hide it quick so the cube rule is a food classification methodology that forever answers the question of is a hot dog a sandwich with a set of rules that are relatively simple identifying food by the surfaces covered relative to a cube so one surface is toast top bottom is sandwich three left and right is taco four is like in a like circular way like that is a sushi five with like a seal on the bottoms of bowl and all wrapped is calzone this is for the location of starch in a given dish so toast pretty common things like pizza nigiri sushi pumpkin pie sandwiches are classics like quesadilla stacked toast sponge cake tacos obviously this is where hot dog goes as well as sub sandwiches and a slice of pie sushi is falafel wrap pigs in a blanket enchiladas quiches include cheesecake supers i like bread bowl soups falafel then importantly calzones burritos corn dogs and pies there's a bunch of others dumplings pop-tarts uncrustables salad which is you have starch but it's not in a shape just a glob correct crazy how quickly y'all blew this up i'm sad that i probably am blasting through my free tier on pusher now really sad that i can't use sockety for this i was hyped on that sorry lots of messages mostly caught up anyways sucka t lol a spam filter yeah probably eventually pusher versus ably ably has the best api but it's like broken in other dumb ways i need to move the location of this one sec i need to find a better place to put the questions that i'm being asked overlay let's put at the top i like that cool we'll do that for now so thoughts on poster versus abele uh posters api and sdk suck hard but their servers is reasonably priced and works abele's service fails all of the time in egregious hilarious ways and they refuse to acknowledge it often and their sdk is good not great but good their offerings things like what they offer with presence is way more promising than what pusher does the way that allows a client to dynamically update what is contained within their presence is very powerful we use it a lot at ping and it is a nightmare to get it all working and to rely on it the other alternative is right now at least is live blocks they're uh newer let me hide this question quick live blocks has a very promising api the examples they have here are hilariously compelling like const others equals use others update my presence equals use update my presence div on pointer move update my presence cursor and you put in the location others.map so that's the other people connection id presence and then you render their cursor based on the like data you have for presence presence.cursor is their x and y location insane they even have a z stand example uh so so good i want to use this but yeah they're uh they don't sign with github and their pricing sucks the big thing is their pricing really like horrifyingly sucks uh it's 10 000 connections a month on the 20 tier which sounds great until you see that it's an additional 1 cent per extra connection so if you have 20 000 connections instead of 10 000 that's 120 instead of 20 and that's not per message you can send unlimited messages and unlimited rooms unlimited updates unlimited whatever but you get 10k connections a month i could blow through that in a stream unacceptable i know i could run my own socket io but then i have to write my own presence like do you all know the difference between a websocket and a like a presence like entity websockets are a protocol it's like a way to send data from a to b with a connection or a connection maintained socket io does a phenomenal job of giving you a way to make a socket connection it does nothing else you have to write your own state management you have to write your own scaling solution write your own methods to share things between instances and you probably spin up multiple instances too with something like live blocks pusher ably they manage the state for you yo large databank thank you so much for the raid super appreciate that and the 35 friends that you brought along we're here complaining about react 18 websocket providers and just a lot of things i'm in a complaining mood everything's [ __ ] broken so here we are regardless fantastic to have you here thank you so much for stopping by the app we're working on might be interesting to you z.t3.gg it's a way to create a embed on your stream and let people ask questions when you click the little show button it'll appear on top of my screen and i can hide it switch to a different question all with like a browser source in my obs so we just built this uh two days ago i cleaned it up a bunch yesterday and now i'm complaining about all the dumb things i ran into working on it now so yeah now it'll be easy for me to do like a formal q a section with like fancy view anyways got a fun question from maple uh they're naive how much of a lift does it actually implement presents yourself state so excalibur time let's say i have a box this is a server we'll name this server one i have two users these two users connect to server one and when they connect i should probably like put them into a a room in here so we have a box on here then we have user one and user two and they can see each other because they're connected to the server we have to implement on the server or like what socket io gives you is this pipe and nothing else so this pipe is a websocket between the user and the server the pipe is the websocket so we have to manage on the server now is who's here and where they are so you have to keep track of which socket associates to which user if they send data up we have to keep track of that data so in this case let's say this is like i just realized i drew the number inside of it instead of in the normal way 8. two we'll say one has some it'll be easier to put these here so these two users they're connected to these two different instances and these have metadata so two has uh status i'll say online and one is afk now like a third user could connect request this info they wouldn't even have to make a websocket connection to connect to the server and say hey who's in room one on server one all right move all these down i guess i have to do this manually so we have room one on server one so this user can request how many people are in room one and they get back to what happens when we need to deploy a new server or we'll start with the more common problem let's say this server is full capacity server one has hit its maximum number of connections and we need to make a new connection now we have server two and this user wants to connect to the same room as those guys but that server is over provisioned so when they connect to room one on this new server they get an empty room which means now you have to build a way to synchronize these rooms between different servers which means we have to further abstract redis because this is where the things actually happen and now i need to synchronize this between the two and this is the problem with building something like this you end up having to manage and decentralize all of these and build the relationships between the redis that synchronizes the different states across different servers and you're gonna have to do this eventually because you're eventually going to have to update your server when you have to update your server you're going to have to like do something to handle the people who are currently connected this gets really frustrating really fast even if you just want the ability to deploy and update to your back end you have to have some way of sharding sharing state and replicating that across instances or things are going to break terribly yeah even if the client has full control of the state that state needs to be shared and sharing the state between servers can get complex very fast why why not just have them only talk to one person interesting griffith i i think you underestimate how expensive it is to build something like that and for a developer like us to maintain it since to us as developers the cost of building something is free that makes sense but for me as a manager you building websockets for the 2000th time is you not building something else that i'm paying you to work on and as such using pusher as annoying as it is keeps us from running into whole categories of problems and keeps us from dealing with lots of time lost to scaling issues to state desynchronization into all these other categories of problems that can be avoided by paying another service a little more money to host it for us i do want to play with you websocket seems more and more like it's time for a new company to shake up this space websockets are in a [ __ ] state right now and they're needed for so much stuff and it feels like everybody's so obsessed with server rendering we're losing track of live websockets and live updates i'll admit i'm starting to run out of steam a bit use a message queue what what never mind a message queue doesn't did you all see the example on live blocks that i showed the example is cursors you're going to have a message queue with hundreds of cursor updates i don't care about the history of the messages i care about the contents of the most recent message somebody keeps saying comment chat my concern is the chat thing i don't care about chat i really don't care about ui kits all i want is a websocket with some state on the other side that's it not asking for a lot start with the pricing are you kidding who said comet chats i want to kick them time out pie or die did i spell that right i did uh you're getting a 10 minute timeout don't recommend more expensive [ __ ] when we're complaining about things being too expensive especially when they're worse things cool see you later sorry i'm in a mood right now but yeah we're in a bit of a dictatorship here y'all sorry guys this is my community and i'll run it accordingly it's just like come on like like how how did someone recommend that in good faith like i have to assume that you work for them at that point like there's no other reason that would have come up i want to talk about other things i did for zapdos what else did i do for zapdos oh that was a fun dumb thing i had to do for zapdos so i did optimistic client updates so i made it know what i wanted to do i wanted to have when you unpin a question or you sorry when you archive a question i wanted it on immediately i don't want to wait on the change so i have in here tier well tctx which is the trpc context i just gave it a [ __ ] name quick dot query client dot set query data this was the annoying part i had to give it null as the second argument or i couldn't access the query client or i couldn't update it because this is the key it uses when you query uh this query here trpc proxy questions get all the key for that is questions.getall comma null so i had to do this it took a bit to figure that out actually do you use the react query dev tools it was quite annoyed when i figured it out but i got that working i filter out the thing that you archive and it works they're real saying to look at the flutter rant comments eh i've seen enough of them they're pretty rough thoughts of something like firestore honestly good for you to have risked that i when i first started the project that i was doing here i wanted or i started it with what's it called uh like when i started with pusher in railway but i was 50 50 on starting it was super bass specifically for that the uh how do i put it it feels like there's multiple different use cases for websockets go back to my use cases for websockets okay zoom in there we go one really common one is sending messages live i chat messages that's the one that comet seems to exclusively care about you also have synchronizing say syncing persisted data on change super base firestore then you have syncing i don't know how i would describe this live data across clients presence live blocks i wanted to call these out because i consider these entirely different use cases even if you can hijack certain ones and technologies built for certain ones to do other things uh i always say google docs fits a tiny bit more in here but it's a hybrid of these two so like the google docs telling you who's currently in the editor would be this but the actual changes to the dock would probably be more the middle one so here's an example in ping if i go to ping gg and i join a call so here's me in a call on ping we have an admin view and this admin view uses presence to keep up to date on what settings you have selected what camera device you chose and let's me change these or if on this side i change to 480p i go back you'll see that this is different now because we're using presence the live data from presence to synchronize between these different places that synchronization is not data i want to persist i shouldn't have to write to a database to track which like settings a user has selected the relationship there the presence defined here is not something that makes sense to put in a database it exclusively fits under this third category i find that this is something that firestore and superbase do very well but it's not a use case i find myself needing very often i actually needed this for the first time ever for a feature a few weeks ago at ping and it was frustrating to have picked something that doesn't have it to have picked planet scale because like prisma has no real way to subscribe to a data entity to get updates when it changes but almost everything we have done at ping has been this problem for device management or this problem for messages when they come through so the question of i hope this answers the question of why not firebase like that was a good question in this case i have not anywhere near properly explained the different websocket use cases prior so good question thanks for asking actually i'll go a little more oh well somebody's trying to join my call good for you i will uh i'm gonna actually go a little deeper in this because i want to talk [ __ ] on twitter okay for chat only we have that comet chat thing for i'm gonna make all these white actually i also should make the font smaller for this to actually fit on my screen okay there we go in this section between here i should make that a little easier to put things in because there's a few that fit here pusher ably we have live blocks super bass cool does this communicate why i'm annoyed with syncing against redis no write us as a database the live data is like device data it's where my cursor is where is the location of my cursor being stored i realize i can redesign this a little bit better for a twitter screenshot let me try that quick we have examples of this cursor location user meta user online status how would i explain db sync live updates on anybody have a really compelling case for something that like worked well with supabase or firestar with live updates that i could put here superbase realtime has presence what is this a product they offer huh is this like a thing i can use yet doesn't look like it's oh it's wait listed yeah it was april of this year so it wasn't that long it was pretty long ago and it's still not out but yeah this has a lot of the features that i'm discussing here listen to changes in a postgres database and broadcast them over websockets yeah this is still just the database sync they're trying to add other things on top but it's very focused on the database sync it looks like if i how does this look this meaningfully communicate what's going on here i guess i can put pubnub somewhere in here i think pubnub's kind of trying to be all three oh i can do i'll add another layer of spice dx power rankings zero to 10. live block seems pretty high up there i can't really comment on comma chat ably's okay pusher's pretty trash i need to add pubnub somewhere in here i they do technically belong in this area hub nub pub nubs probably between these two super bass is pretty far up there and firestore is pretty medium cool so the dx power rank let's do the reliability power rank i'll be honest firestore's probably pretty pretty high up here if i'm wrong please correct me live blocks i don't know i'm going to put the ones i don't honestly know up in a different section i'll just put them in the side here for ones i'm not sure about firestore is pretty reliable super base is fine abele's [ __ ] trash reliability i'm i'm particularly pissed at them say pusher's pretty high and pubnub i've seen pumped up do some stupid [ __ ] but i'm not confident enough and now value per dollar ably's actually pretty solid value-wise if they worked it would be totally worth it pushers okay i'll use pushers the middle ground i'll probably put super bass pretty what super bass is pricing looking like under k monthly active users does that include the live update stuff if so then that's fine especially if they're not billing for it more on top super bass versus pusher yeah i'd say those are probably similar value live blocks just [ __ ] trash value-wise pub nubs too expensive too i'll put it a little less far over oh firestorm no firestore's value for the dollar is bad saw the question what's the the value of using third parties do you know how expensive it is to build your own solution like if you as a developer are smart enough to build the whole websocket server that your company needs you're building for three months or so to get that all just right and you're probably making 200k a year that's a 70 000 investment that company has to make at least for you to make something that might work and now you have to maintain it as well especially with something like versailles do you know how expensive it is to properly set up deployments on aws for serverless functions with the build and ci that will take the static assets and deploy them across the cdn whenever somebody merges main you can do it you can absolutely do it but it's expensive the key is to understand the cost of adopting one of these things and the cost that it saves you longer term yeah i i think that these services are essential and they're a huge part of why there are so many startups doing so well because you don't have to hire 500 engineers to build a twitter clone you could just build the twitter clone i was able to build a whole ama app myself using other services that will scale infinitely and not have to think about it i primogens catchphrase is blazingly fast i think i'm gonna do my own infinite scale i think that's how i'm gonna start pitching my way of doing things because that's the one thing i don't compromise i don't like picking solutions that can't scale theoretically infinitely like aws has to go down before my services go down another thing that frog pointed out is i want to focus on delivering value to my customers not building all of these crazy infrastructure solutions after 30 years you disagree build as much as possible well hey there's a reason you've been building for 30 years and haven't shipped too much sorry i think i'm going to put this one on twitter quick i just realized i did this you know i did that right copy is png bonus round do i tag all the companies i'm doing it i think i touched that or all of them well that'll go well feel free to spam that one around i didn't get to like any of the things i wanted to talk about and i don't know if any of this is going to be good enough content for youtube should probably squeeze out one more like editable rant i guess this one's solid in terms of like web sockets are in a rough state see this being a video the cat's gonna break down the [ __ ] door i already got a banger response to the tweet oh boy oh boy oh boy i got abramoffed wow what what how i i have to think a lot on this one i now i don't necessarily agree with his framing of this is correct in this instance i am creating a variable outside of react but that isn't always the case and for use effect i agree because use effect has a clean up this doesn't have a cleanup memos have no way to clean up so it's expectation of purity is ruined and so the thing that i found incredibly unintuitive about this wasn't necessarily the external side effects it was the behavior of those side effects internally on an app where in the yeah in my question no it was in the stupid [ __ ] pusher thing here no that's the server side i want the component i know i have that in utils pusher cool here the thing that was unintuitive was not necessarily i committed that well let's remove all that the thing that was unintuitive was very specifically the relationship between the values i'm binding here the function that creates them the pusher store in this case and a provider that i'm returning was there actually a bug in this code theoretically yeah but the bug was not because of the bug was due to the unintuitive control flow that inherently exists now and react with renders not being stable the possibility for a store to get here like if the thing that was really unintuitive even if multiple stores are being created so if i was to do i just comment this out and do it that way yeah okay const store equals react.use memo here if each store was numbered we have store one on the first render and store two on the second render the pusher's stand store provider gets store one even though it's not the most recent store the thing here that's unintuitive is the value being passed here the function being handed to createstore isn't the store posterizator provider doesn't take a store it takes a create function this doesn't get rerun if i was to here i'll show i'll prove this because i think it's an important point that is why this sucks and i i might even clip this and post it on twitter the thing that sucks right here is console.log this has run x times i'll have a const or let store creation [Music] provider runs equal zero and i will have in here return this no store creation runs i'm just memo star runs my expectation here with the chaos that i know is this will run twice this will run once which means that this is bound to an old version of the store the mutating out of band thing is just to keep track of runs yep that's exactly what i expected store binding in provider run x times here's the problem memo store runs one store bindings and provider one wait it runs that twice is this not the one that i have access to i just want to know which store the react app's actually using yeah i didn't think that was going to run twice you can't use a use ref for this now i can you know i'll switch this to use ref i'll just call the function still runs that twice oh [ __ ] we just got a huge raid thank you coding garden really appreciate it thanks for stopping by we're just here bitching about react 18 i am more and more unhappy with the new behaviors it's made my life a lot harder than i expected i did not expect these i did not expect a reference binding to run twice there's nothing to show in the pusher provider it's the provider being provided by z stand it's empty a use ref getting called twice should not have happened in 18 or in 16 as far as i know not trivial for me to test that i can go code sandbox it let's try that fast actually does that really run twice huh i'm not crazy right nobody else knew this has always been the behavior and react because i had no idea this is react 16.8 yeah i guess if r already exists if r not equal negative one return r oh it's not r it's e o r dot current i guess is what i'd want to use no can't access though because i guess it's technically being initialized there that's annoying okay let's let's i my own react knowledge is being challenged right now i want this external dependency e to not necessarily be external but be internal such that it's only be instantiated once or in this case being changed once i'll let equal null if e does not equal no return e this is okay so it seems like their recommendation is dumb but we'll do it that way let r is null react dot use effect if r dot current is null all right.current equals zero refresh oh that will never run because this never yeah huh that should work i am so confused yo skirt what's good good to see you here man then a minute i'm a real streamer now i really thought that would do it i'm trying to think of like the actual genuine best way to do this it has to be the use state and the use effect stupid thing i did before like as dumb as it is i'm gonna get stash like this is the right way to do it now you create a use state with no value in it you set the like value of the store on an effect and you disconnect later i guess what else i could do here i'm actually curious if this works if store no because now the cleanup's on oh god do i need to set it to a ref and a stateful value what i have here is write but what i want is to not do this unless it's a real unmount which sucks because there's no way to determine that anymore like so an example i was just doing i didn't expect it to re-render i expected it to render correct because layout effect happens before render okay you said ha ha after so you get off with a warning dr sammy i have a new solution export or just const use functioning use state are you use actually define once this will take do i pass it a value or do i just yeah uh this returns t void this is init and this is cleanup i will join [Music] this guy oh no the cleanup function's gonna be unstable [ __ ] so close but so far i wanted to make a generic to do this but this is gonna rerun when it shouldn't i'm gonna try it this way quick it's not gonna work but and i know why it's not gonna work which sucks wrong button so the problem here is this guy's going to run over and over again because these aren't stable references so that usefx is going to fire a whole bunch so if i console.log firing the bind effect oh look at that i locked the tab because it's infinite looping great so what we have to do is define these ahead of time if use event existed this would be a lot easier i can inline use callback that's probably the best bet i guess somebody else is still connected somewhere else oh it's my embed is still connected that's why there's two there actually should be two yeah this worked can anybody defend this being necessary because what the [ __ ] holy [ __ ] that was bad like yeah i i think i'm done here i've made my points i'm pissed off react 18's render patterns are kind of bad didn't i publish the wrong function call what the [ __ ] are you talking about zach i just renamed it use define with clean up whatever use memo with cleanup use define with cleanup whatever same difference i didn't rename the actual code because i don't oh i didn't rename it in there [ __ ] deleting and reposting i guess so maple said something interesting which is that the problem here is the connection is occurring on store construction so that naturally means it should be in a use effect right i don't agree with that i think that instantiation inherently can have side effects like there are lots of things you can instantiate that don't but there are many that inherently do and having a cleanup built into stable instantiation functionality would be very useful i uh ribber made a good point which is that the second callback could be static and defined externally in this case i don't know if that's always the case though it's tempting to make that a ref yes i write not only did i read dan's replies i replied to them i there's a take i've seen a few times now the feeling that things that need cleanup should always go in use effect i i had to keep thinking on this one because i don't agree i i think it is yeah i think i just need to think more on this one i'm not i'm struggling to find the words but i fundamentally disagree i think that a a variable being created and having a cleanup like the the term side effect is loaded i think it's unfairly loaded in this case like the creation of that thing is only side effecty because it's erroneously running multiple times if that side effect could be contained as a direct effect by relating those two i don't see this as a side effect i see this as a direct expectation of the the instantiation the erroneous thing here isn't that the client is connected it's that the client is instantiated twice and because of that the instantiation is the thing that needs a cleanup not the effect of the instantiation yeah i'm standing behind that one i fundamentally disagree the reason that connection is a side effect is because of react instantiating twice i shouldn't have to instantiate and then do another thing and then undo the other thing and then do the thing again especially if i have to instantiate twice anyways could this be triggered from an event handler instead of a hook i wish the only way i could do that is with a button that you click that set state to connect it which honestly i think we're going to see more and more of like because of this change my example of used memo with cleanup's a good no it's a terrible example it's horrible that that has to exist i feel bad that i wrote that code let me rewrite this quick to make the sample easier for dan uh okay use actually define once some component i don't care about any of this external val equal negative one const get external vowel equals eh this doesn't feel right if it started at zero it would act actually let's do that let me go drop this in that code sandbox quick oh it expects this isn't even typescript [ __ ] christ murphy my cat's trying to break down the goddamn door i'm going to go insane this has been one of the the least fun streams i have ever done by like orders of magnitude i make this [ __ ] button go away there we go cool i made it work can y'all give me a quick like i'm not [ __ ] insane sanity check here like theoretically like the thing i'm asking for is not too complex this is what i want make this a little more visible change this to in it is t that'll type error but i don't care this should not be right i doesn't need it anymore like this is what i want where whatever you give it here is the type here and i have a clean up this is what i want this feels entirely doable and almost necessary at this point what isn't pure about this like the impurity exists within the get external vowel specifically right not in the pattern itself yeah then this is a fine pattern like impurity exists outside of react and building all of react's primitives with the assumption that react or that everything is yeah the store being initially undefined is the shittiest part of this for sure yeah this feels so stupid god my head hurts a lot i think i'm going to call it here and go be grumpy somewhere else i yeah i [ __ ] hated this stream thank you all for coming by i do appreciate it sorry i was just complaining the whole time i'm gonna undo this i'm not screen sharing i'm undoing some of the changes i made so that this is in a better state when someone else tries to dive in it's call back cool now that's in the workable state again cool this is in a state now where i feel less bad that i just linked it to dan let's find someone to raid any homies live y'all want to watch some american truck simulator with kisa that could be fun keis is the homie good friend currently loading so yeah i'll be joining right at the beginning of what should be a pretty fun stream cl over there yo thank you for the gifts also thank you everybody who subbed sorry i've been like entirely missing and shitty all stream this was a rough one for me i owe you all immensely thank you guys for stopping by and being part of this regardless i do appreciate every single one of you i'm tired thank you guys all again love you all immensely see you next week really fun show on wednesday actually make sure you're here for the wednesday show i'm going to have automated who's a legendary web developer technology guru that's been building things for streamers forever now so should be a fun one really excited for that see y'all next week peace guys




## STREAM VOD USING TS WRONG_ BUN GOOD__ REMIX BAD__! AND MORE TOO - STREAM VOD - 20220707
and we are live sorry for the sudden transition there i was not prepared enough ahead as per always really excited for the guests that we have today uh quick sound check everybody or matt intro yourself quick and we'll use that as the sound check sounds good my name is matt i am a typescript wizard um i am a developer advocate at stately for the next like 10 days um and then i'm on a secret mission after that to improve typescript in the world and improve your learning of it so welcome everybody so excited to have you here i still remember the first time you were referenced i think it was tanner not positive but i went to your bio and immediately saw the the quote that will haunt you forever the ronnie mullin of typescript i want to talk a bit about how you got that quote and what your understanding of it is so i can agree and or fill in the missing gaps sounds good uh i know rodney mullen from uh like tony hawk pro skater 2 or something and i was helping being helpful on the internet you know like solving someone's twitter problems that person happened to be where's boss and uh he quote tweeted my reply with the rodney mullen of typescript i thought okay that's that's kind of a cool thing to say about someone and so i put it in my bio and suddenly that is how everyone knows me i'm the rod melon of typescript uh i watched some like rodney mullins stuff on youtube to kind of like get myself up to date and so i understood what is this dude all about uh but i still don't think i get it so could you please the dev skater doyenne do you think of course so the most important thing to know about mullen is that most of what we call skateboarding now was invented by him originally though he was a a kid in his barn in florida playing with a skateboard in the backyard looking at magazines that he would get once a year teaching himself in complete isolation what a skateboard is and how it works from there he is just like again as a 10 year old kid was playing with this board in his backyard and in his like barn four miles away from any other humans and realized if he kicks the tail really hard and jumps and get the board to come up underneath him one time when he did that he didn't like how it felt so he tried to kick the board away and did a perfect flip and landed on the ground right in front of him and his thought there was it's taunting me i can land on that and at that point as an 11 or 12 year old kid he landed the first ever kickflip wow he then went to a skate contest for the first time assuming everyone else has figured this out if i just played in my backyard and did this clearly everybody else is doing it just to win and sweep the contest doing this thing called the magic flip because nobody understood how he could jump and flip the board without anything like touching the ground or being underneath the board and it was that like magical feeling of his innovative nature that made him stand out so much it's the the magic of his creations that in retrospect are very simple he kicked the tail and jumped but his ability to figure those things out is super inspiring and even now he does ted talks where he compares linux to skateboarding and how that experimentation makes this all possible and if wes specifically referenced ronnie mullen talking to you i think that's what he's touching on is the brain dead oh that's how you do that i'm gonna remove that from my bio because there's no way i'm gonna live up to that you know i mean that's crazy he's like the bobby fischer of skateboarding basically like he's just figuring stuff out on his own what on earth okay no i'm i'm just gonna tab over and remove it come on that's i love it you you didn't say it has to stay but i yeah i was very excited because ronnie mullen is my all-time favorite skateboarder one of my favorite human beings and i've taken a lot of my approach from him i got into code the same way i got into skateboarding by hitting the ground being wrong and getting back up over and over and over again and i think that's a lot about why i love typescript but i'd love to hear more about you how you got into dev and specifically how you got into typescript so tell us the story yeah so my stories uh quite a weird one which is i used to be a voice coach uh public speaking coach accent coach i did a drama degree i was a singing teacher and i went into it and i was doing that for about six years while i was doing it i was living in london and i really didn't like london at all and i wanted a way to get out of london which is odd so my way of doing it was i decided to learn how to be a developer and i had been sort of playing with javascript for like two years at that point making little applications for my students and that sort of thing and i decided okay i'll just try this i'll just basically quit my job and go full time and see what happens and that was about five years ago um so i've been playing with java i've known about javascript for what 10 years like been playing with it for seven years and it was in my second job where i realized oh no this is really hard because what like we were having so many issues on this incredibly complicated client project for a big automotive company that we it was all about um data flowing in from a back end that we didn't control and this was like graphql was a thing but we weren't using it we were just using rest the back end was lacking in.net and the data structure kept changing because they were building the back end at the same time we were building the front end and so the shape of the data kept changing we were working with these very good portuguese devs who were basically a little bit sloppy sometimes with the property names so sometimes they have been chemicals sometimes they have been pascal case and that kept changing through our app and we kept flowing these all the way through these components and we thought there must be a better way than this this is awful and we landed on typescript because what that meant was we can build these contracts and interfaces with typescript and then the three-hour refactors when they changed a property name would literally just be two seconds you know and it saved us just a ton of time it meant that we went from being behind the back end team to being actually way ahead of them like way way way ahead of them to the point where a couple of front end devs actually got moved off the project um so from there it like exploded in my mind and i think the first bit of typescript i ever wrote was a complicated generic table component i wanted to improve the ide experiences i wanted to see the autocomplete and we needed a generic table component that would take in all these different data types and spit out a table that looked good so yeah my first experience of it was just love and awe and immediate impact and since then it's just been since in fact after that um a couple of jobs later i joined the x state core team nxt if you don't know is a wonderful library for building state machines and state charts and that's a very very complicated typescript library and i was on the core team for um well i'm still on the courting so that has been pretty exciting dealing with the complicated library types as well as the sort of less complicated application types really exciting stuff i love how you still got that into typescript without while specifically getting into like the hardest parts the something i talk about as much as i can is how typescript as a user-facing dev is life-changing in the most positive way where it for me is a developer it is effectively an error layer on top of javascript that lets me know when i'm doing things wrong they're some of the most complex files in my code base don't have a single type definition in them because it's all inferred from the hard work that you do that alex does with trpc that prisma does with the chaos and their code gen stuff but those things result in me as a developer not feeling typescript so much as typescript guiding me to the best path forward i think that some of the hardest things though is that we have that works so well for us because we've shifted the burden off of the user-facing devs onto the library maintainers the people building things like table libraries state management libraries the chaos that is trpc i love that despite getting into those hard things first you didn't like typescript less you actually seem to like it more and i'd love to hear more about the how you think the specific way you got into typescript helped in hurt your relationship with it in that way yeah so i immediately went into it uh feeling warm and uh feeling gratitude towards it you know because it had saved us time it meant that my job had become had turned from stressful into completely relaxed like ridiculously relaxed um and i what i i then became the typescript guy in the uh in my company and we talk a lot about kind of like library types versus application types but really we're talking about people that sort of know the more complicated bits of typescript and people who don't and that sort of burden shifting it doesn't just happen between applications and libraries actually happens within teams as well so there's usually just a couple of people or maybe usually one person who is like the designated wizard who people go to to get unblocked who who is essentially like a dx person inside their own team you know who can solve the complicated typescript types i've forgotten your original question but i enjoyed what i said so much that i just carried on that was a much better answer than what i specifically asked i was asking about how the problems you were solving affected your relationship and where you ended up with typescript but i really like that framing of how it almost felt necessary that one person became a typescript wizard i will say that it's been interesting at like ping i am probably the closest thing that we have to a typescript wizard and i wouldn't consider myself that i'm application typescript land i am bad at typescript i'm good enough at javascript that typescript helps me and i personally think we're getting close to a point where you don't need a typescript wizard to deliver good application code it feels like the work of people like alex like yourself and all these other maintainers have gotten us to a point where not having a typescript wizard only hurts when we're building our own ui component library and there it hurts a lot but yeah i think um like there's a bit of a knowledge gap you know this stuff that is hard um or people think is hard is relatively simple and i think the way that it's taught tends to prioritize the more complicated more less ergonomic stuff and makes you do more work when you don't need to like it's fine to have enemies in your code base you know i mean like it's it's okay but it's also like fantastic if you can get this wonderful inference and design apis that are designed not to be annotated you know so i think yeah it's there is a knowledge gap there and there's a gap between application and library type script but it's not as far as you think it is kind of people look people like see those open and close brackets and stuff and like the generic syntax and they just go holy crap this isn't for me whereas if you take just like two days whatever and just study it or you know a couple of evenings or you just look at some stuff you realize okay a generic syntax wherever you see that it means the same thing everywhere like there's not that many things that typescript can do there's not that many syntaxes and when you learn them all there's like i don't know 1214 or whatever you can start to read some of this stuff and start to understand it i interesting i'm at the point where i can kind of read some of it but i'm not at the point where i can put the generic in the right place in an arrow function within the first three tries yeah yeah that's interesting i mean i like i've got so many ideas about how to improve this like one of my favorite ideas i've been working a lot with asts for my job actually for stately um because we we build like a visual editor so you can sort of like drag and drop some cool stuff around and then it changes your code one thing that i'd love to do is because you like the typescript ast you all the information for how to understand it is in there if like the syntax highlighting for typescript were better or there was something that helped you there i feel like people just get it a lot easier you know um so yeah i've had some ideas around that like a sort of explainer for these complex types but when you get it you get it you know like it's it just it does go in there um but i don't know how do you want to structure this because we could like dive into some code we could do it like i said chat like oh man i'm generally trying to i try to not dive into code when i have guests i find that that's overdone and not the best content and i really like talking about code especially with people like you and i've watched a bunch of your previous stuff and it's awesome having you like go live with others and show this stuff off in an editor but i really want this to be the opportunity to talk about the meta of it and how we got there this is actually a really good opportunity to pivot to a topic i didn't put in our list but i really wanted your thoughts on especially now that you're more focused on the education stuff one of my hot takes for a while to go back to like the application type script versus like dxe like deeper generic typescript is that when you google search getting started with typescript it doesn't do a good enough job of distinguishing between those two and a lot of people who are picking typescript is one of their first programming languages end up deep in generic land when they should be writing a mostly js app that has type errors and i'm curious what your thoughts are on this and in particular what your goals are with your education material in terms of helping beginner devs get started with javascript with type safety versus helping developers better understand these complex parts of typescript yeah so there's there's two questions there which is like how do js developers learn typescript and how do new developers learn typescript like if you can um i'm more focused on teaching js developers how to learn typescript better and like but there will come a time and it probably will be soon where you'll need a course that takes you from not being able to code to being able to code in typescript you know like that journey will need to be there and you're right like the getting started stuff like the typescript handbook in particular is beautifully written like it's a it's a wonderful document and i think people can learn a lot from how it's structured but it doesn't talk about integration at all it doesn't talk about how you take that and stick it in an application it doesn't talk about how how you build a node app with that and that's like where where i see myself making an impact which is basically instead of teaching it in a more academic way you get to build examples here to build things and build your intuition and your also your ability to understand the compiler i think is like really really key and understand what typescript is doing because when typescript is in your project it's like another dev in your project you know and that dev has motives of its own and it has uh different ways of understanding things than you and you need to be able to get inside its head and you can do that but a lot of people don't know that you can hover over something in vs code and see the types you know they don't know that you can like query certain things in certain ways and go to finding definition and in order to understand typescript you need to understand your ide better along with understanding the compiler better so yeah you're right like there's it it doesn't feel very i it's like the curse of knowledge for us right because we know about typescript but someone i'd love to know what like a learning type script feels like especially if you're new to development yeah i i feel like that's a very underserved hole right now and i complain about this a lot like all the getting started with programming with webtech stuff tends to be very focused on javascript in particular which sucks because i don't personally believe javascript is better than typescript for getting started i just think that the materials have forced that where if we didn't have had i put it if you took any of the current really good getting started with js tutorials and just rewrote it in typescript and added a few little callouts that are like hey if you see this error like that's because typescript's checking for you that we could do some really compelling materials i yeah i'm curious if you've seen any particularly good education materials for starters and if not what you think that could look like i think um a lot of what i feel is underpowered about the js learning experience especially from scratch is that your idea is kind of hamstrung you know it doesn't have all the abilities that you have in typescript to do all of the magic and all the autocompletes you get a little bit of it but only because timescript is helping you in the background um but actually being able to learn this stuff and and get people the thing i love about typescript is that you can learn an api just by auto completing your way there you know and that is a magical experience to learn for a beginner it makes you feel a lot more confident it gives you a sense of what is possible in a language and that's present in other languages you know it's present in um i don't know things like uh i think it might be a good example java yeah where like you know it you have more at your disposal in the ide and it's in general a more powerful experience so i don't know that many good learning i'm not a very good surveyor of the beginner's landscape i'm currently more focused on kind of advanced typescript users and people like yourself who want to get better at the magic sort of generic stuff that's kind of my target market now i probably will pivot to beginners at some points and in fact i'm thinking of extending my course to take in a lot of that beginner material but it won't be a like learn dev through typescript it will be learn typescript from a js land you know very interesting so is do you think that learning js first makes more sense on a fundamental level or due to the materials that currently exist like if a new developer listening here had a friend that would like help them through typescript and be the perfect tutorial for them do you think starting with typescript makes more sense than js that's a really good question i think it depends on how much you think you need to understand the outputs and how much trust you want to put in the abstraction because when you're learning like a lot of what you need to learn is like investigating in the browser and seeing what's going on you know really like your ide when you first start is chrome dev tools you know it's not necessarily your code editor i think though that we tend to uh distrust what beginners can figure out and we tend to um uh yeah we tend to sort of do begin as a disservice essentially because i think that timescript can be as amazing a learning experience as javascript um you just need to kind of like by the way how am i doing am i cutting out a little bit yeah your internet dipped a tiny bit there i just lowered your resolution 480p and it seems to be better cool i'll go again um i think typescript can make a fantastic beginner learning experience it's just that people have written that those posts yet people haven't done that yet um just like with state machines actually when you get into the mindset of state machines it's just the same as imperative code you know and a lot of what my sort of thesis was at stately is if we can make the tools more beginner-friendly then people learning to code will learn state machines and state charts first and then they'll apply that learning to other stuff and i think that it sort of works the same way with timescript speaking of like education materials to make getting into typescript easier somebody in chat just said that you would probably like the typescript error translator which is funny i probably would like that what is that oh yeah it's something i built um yeah this is uh this is another effort of mine to try and make typescript easier especially for beginners actually to learn advanced people tend to know the error as well it's a vs code extension which you can check out and have a play with it's marvelous and what it does is it takes the typescript compiler output and it just um just rewrites it in a friendly way i this is yet another reminder i need to get goldberg on the show i went to school with him we're old friends and he's also particularly put a significant amount of effort into improving the experience around errors in typescript and yeah you'll have a lot of overlap in your goals and approach here and it's really exciting because like i don't know if you know this about me i got into typescript pretty late i was doing elixir and golang video infra at twitch for years before they decided to rewrite the ember js ruby on rails chit show in react and typescript for front end and go and graphql for back end and i didn't think i would like it i actually went in specifically expecting to hate it but i hated going more so i decided to try it i ended up falling in love with it surprisingly quickly and a lot of that was efforts and materials created by you by josh by so many other devs making it more accessible and this is what's getting me so excited about the more advanced materials is it feels like there's an assumption where beginner materials cover top to bottom advanced materials get very specific but it feels like what you're describing is a rejection of that dichotomy where you're going to make advanced tutorials that are wider that discuss less like the very specific details of every typescript compiler part more how those affect you as you build an application well the things that people think are advanced in typescript are really not that advanced you know the things that people think are advanced are generics and generic syntax um they're not that advanced really like all you need to do is understand the syntax and like learn where to put things and so for me it feels like creating beginner material because like the individual nuggets are relatively easy to teach and relatively easy to get um get started with and so it doesn't feel like because normal advanced stuff it's like how to put together these 10 different things to make something like the architectural decisions that went into doing this whereas typescript for me just feels like here's some syntax learn it you know like it's a lot easier to teach that makes a ton of sense i'm going to use the opportunity to pivot to the wider section of full stack type safety we tested the beginning a bit about how your front end team was able to leapfrog the back end team because of how typescript let you move faster and more safely i'm curious first off what that relationship looked like and more importantly this will probably be the next question is how that landscape is changing where the front and back end relationship is more inherently type safe yeah i mean that was i was really fighting for graphql then because it was the perfect use case for graphql i watched your like rant on the difference between graphql and trbc which was a very good rant you check it out on youtube and it's your argument was correct in that when you have a back end that you don't own talking to your front end you should use um you should use graphql basically and especially if that back end is going to be public facing and consumed by by other front ends other than yours you should definitely use graphql when you own your back end then you have the opportunity to do type safety over the wire which is something that is relatively new like i mean maybe not relatively new actually because i don't i don't ever want to kind of like [ __ ] on prior art or anything like that you know because at least it's relatively new in in javascript and typescript world it's definitely new in node so being able to like have the inference just work over the wire in your own full stack app is amazing and it like changes the entire landscape of what you can do because if you're liking trpc if you're making your inputs into your back-end functions uh if you're validating them there and you're just sort of returning and you know what you're going to return then you can like it just feels so good and things like remix are also doing that things like next are also doing that remix and next aren't doing that this is actually a thing about a lot well remix is doing that because colin uh in this pr that i've been in for ages and keep getting notifications about uh is making it happen so they aren't they are doing that i'm going to do a white call out with a history lesson right now because there's important details and i saw alex in chat sorry for bringing this one out again but uh there was a twitter thread a long time ago where kent subtweeted alex and me saying that it's impossible to do full stack type safety because you don't own the wire and we shrugged or like if your front-end back-end are tied really close like you know in remix you do own a lot of that wire you do own the transformers on both sides you can do full stack type safety kent fully disagreed alex said wanna bet ken said sure alex linked in the trpc source code to which kent replied you're using zod that's cheating [Laughter] so you're sort of using zod though like this was um one of so ryan florence are like early in that thread maybe someone someone in chat can link that thread because it's really interesting reid um basically made that argument which is you don't own the wire um but you sort of do own the wire practically you do own the wire right like the only argument for when you don't own the wire is when there's like a catastrophic backend failure of some kind or you have a deployment failure of some kind which is like you don't own that anyway you know versel owns that or netflix or you whoever you're deploying to so i think and there's a difference between owning the between saying okay we can't control the input or rather we want the input to be type safe versus we want the output of the or what gets sent to the front end to be type safe because you always want to validate your inputs you know what i mean like because these especially remix or next as well or any kind of rest framework if your endpoints are exposed to the public then you're like they can be attacked you know that's a vector so you need runtime zod validation at the start but then when you actually just return that data to your front end then you don't need a validator you know you don't need a zod there as well you don't need to validate the stuff coming from the back end because you control the back end you know so like yeah i do get the argument a bit but if you read that whole thread then like kent is convinced and ryan is convinced and that's all to do with colin's great work actually uh colin was like a absolute monster in that thread yeah i colin definitely is good at like those initial pushes like getting something from zero to one and getting enough people on board to make it happen like he did the initial commits that became trpc that alex has pushed as far as it has gone now but like that's colin's way of doing things he he nudges and when it doesn't work he nudges a lot harder and then all of a sudden the thing happens and then he [ __ ] off and does this thing somewhere else it's really desirable and i love that pretty cool yeah i maple and chat just actually made a really good point i don't know if you know maple they've been like remix type script web full stack community for a while now they wrote the original like gist of really good type defs for remix if you wanted to run custom versions of the functions with type safety they even went as far as asserting that you only returned types that were json serializable because there was no super json support in remix at the time and they pointed out that there's a you could argue that this is a thing about confidence levels where we're using typescript as our source of truth because we're confident about the values running through our programs and the relationship between the two sides of that network boundary if for other reasons you don't have that confidence you can't make those bets but if you do and you're willing to take the bet something like trpc can significantly decrease the burden on developers and even like on cpus for the applications you're building totally it's about um yeah confidence is the right word i'm trying to think of a different word that has an i at the beginning of it and i can't remember what it is but um yeah it's about a sense of control over you're basically willing to bet a lot that the information is going to be correct that's coming down you know because you wrote that code you deployed that code at the same time like and and most decisions we make as a developer are betting against the number of bugs that we think this is going to cause you know how many bugs can you realistically think that's going to cause sure if someone leaves their browser open for like a million years and tries to do something um that your back end has been deployed like ages and ages ago then it's going to fail but it was gonna fail anyway so yeah i i think there are shortcuts to these problems that we don't acknowledge enough the easy one is just spit out a version number when you reply with anything on the back end and if it doesn't match refresh the client i do that more on like mobile apps than i do on web apps because stale clients are more common and more painful in mobile land and as such like i would very strictly on my mobile apps if the back end returns a slightly different version number or different hash than the app expects it forces you to upgrade the app bundle and it'll just reload the page that you're on i think that if you're willing to eat those types of things that over the wire type safety can reduce multiple dimensions of problems like if you kill version synchronization and don't think about version sync and let that be inherent to your process a lot of these other categories of problems go away totally and again like typescript is good at that it's good at removing categories of problems you know um and you can think of this whole idea is like when should i when should i validate what i'm receiving from these services you know if you're talking to something external that you don't control probably you should be validating what you're receiving in the clients you know like if you're talking to github or something you know like then probably you should be running some some sort of check to make sure that the data you're getting is valid same if you're saving something in local storage or something you know something that can change and if you think about that that is a seam in your application that's like a point at which you are confident that the thing you're receiving is the thing and the point of this end-to-end type safety and trpc is that you can remove the seams you know or remove one seam rather you still got to check that the input into your mutations is correct but that that is a beautiful seam to remove because oh my god it just it makes everything flow and it yeah it's a lovely lovely piece of tech i don't want to distract too much from this topic but i want to point out that there's a new package i'll share this in the twitch chat quick so we're probably going to talk about this later and y'all should stick around for it i just got formal permission from versailles lee in particular shout out lee to be allowed to talk about this there's a new package that for cell labs is working on next swr endpoints that lets you write a an async query that runs on your back end it takes two arguments the first is a zod uh or object validator and the second is an async function and it will run that on your back end and let you use it as a hook on your front end it's very similar to what like trpc offers but much more minimal coming from vercell schnitz in particular super exciting package it seems like vercell is now jumping on the type safety train or train a lot harder super excited about that so we'll be talking about that after the show nice i mean they've they've hired a ton of people that um that indicate that they're moving that way you know like yeah if they're if they're betting on time safety then you're pretty sure that type safety is gonna improve like across the ecosystem yeah i am so excited i think that is a good opportunity to pivot to one of my favorite questions which is i i'll start with the framing i pretty firmly believe that the testing tools and methodologies that we use now are very much built in a pre-type script landscape and mindset that a lot of these tools are built and a lot of these patterns are designed around checking things that how do i put it checking things that typescript makes really hard to do and i'm curious what your thoughts are on that how testing fits in the modern web dev landscape and how typescript can or maybe even should change the relationship that we as typescript devs have with tests i'd love for you to expand a little bit more on what patterns that you feel are sort of dangerous and like most interesting and weird that you think typescript just like removes from the conversation i used to write a lot of tests that were like make sure if you hand this component a number instead of a string that it does the right thing make sure you don't hand this thing a number instead of a string make sure that the return of this input is the correct format those types of things were very common in old just land and i still to this day feel like i see a few too many tests that should just be type deaths yeah i can buy that i think for me personally i kind of have like a quite a radical view on tests which is like uh kind of sponsored by my uh colleague anderist who's kind of another brilliant typescript wizard i would say like several degrees more brilliant me he's even gone diving into like the typescript compiler and has made like 10 15 different pr's to typescript um his attitude on testing and i trust his opinion is that you should always test from the outermost layer possible if you have a unit that's testable then you should be testing just that unit and nothing inside it you know so if you think of a public api of like xstate what your users are going to be interacting with then of course those are the outside methods and the things that are exported you know this is basic stuff but for a website that is end-to-end like that's that's end-to-end testing you're testing the browser only so for me testing means like doing things in the browser to ensure your app is working and like also testing at these seams as well right so testing at um like you can have integration tests where your mocking network blah blah blah blah in terms of what typescript improves then for me then like that's not too much right because i'm just sort of like checking that um that the public api in the way that it's being used is supposed to be correct you know it does like make a lot it makes like designing libraries a lot easier because you don't have to write these stupid tests of like if someone passes the wrong thing then uh make sure we error in the correct way we don't need those anymore because we can always assume that um the people are using our stuff in the right way and a lot of what we get in like the x-tape discord and stuff is people saying uh why doesn't this work in the way that i've written it well the way you've written it is incorrect check the docs and are you using typescript because typescript would show this error like way better so what it feels like to me is that people can use public apis with a lot more trust and they can design apis with a lot more trust and a lot of the um code that gets sent to browsers doesn't even need to be there anymore because you don't need to do so many of these runtime tests because you can have confidence that all your inputs are as you expect so for me it goes beyond testing it's it's more about uh what kind of code are we writing now we're writing code that we have a lot more trust in that we're not being so defensive around and the defensive stuff that we do have to write is usually stuff that typescript prompts us to do anyway because our abstractions are not as clean as we thought they were so from a testing point of view yeah i'm focused more on the on the runtime code i guess because i'm more end-to-end test guy interesting yeah i you're very much as primogen pointed out in chat you're speaking my love language i have never liked unit tests i [Music] i find that units are if a unit feels like it needs to be tested that unit's probably not small enough and the integration of these units are where the complexity should live ideally that should be as simple as possible too but that's the point where testing makes so much more sense at which point integration tests end-to-end tests like tests of how the things work are so much more valuable we actually are keeping a tally at ping every time we run into an issue that a unit test theoretically could have caught we're at like two and a half so far yeah it's like we at stately we're building this visual editor and one thing that we are doing now is we're doing um we're doing sort of i mean what is a unit test what is an integration test we basically like i guess my use case for them now is if you have something that you would consider an engine in your app you know that where you have like a ton of complex logic inside of it like that thing if you think it would benefit you to test you as a unit then you should be testing it as a unit you know and so but even those decisions i've made usually like end up feeling stupid when i have to refactor the thing and my test break you know so usually just testing at the at the highest possible boundary has worked great for me and it has felt pretty um pretty sensible and so yeah typescript there like i love having you know type safety on my cypress test and my playwright test allows me to explore the api a lot better but yeah it's it's kind of more about the the top level stuff very interesting i dig this framing a lot i am running out of questions this has been surprisingly smooth normally my questions don't have such good concise answers i'm used to having to get into the weeds way more i have one or two more but i want to also open up the opportunity for chat so y'all start asking your questions for matt so we can chat more with him the last one or last two i had uh we'll start with this one is what are some of the most common mistakes you see typescript developers making and devs who are using typescript in general like what what if you could change one thing that devs are doing wrong that you see a lot what would it be i guess i'm going to take this answer as what's one thing that i could reframe in developers mind because i think that people do think a lot wrong about typescript um and they think in wrong ways so i think one thing is that um is readdress the way that you're considering any because any usually means that you it doesn't mean that typescript is bad or it doesn't mean that the developer is bad it's more that they don't understand how how they can possibly get the inference that they need at that call site you know so that type annotation is a cry for help you know and when someone is using any it means that uh like it's not because they're they're stupid it's because they just need to like get something done and they don't understand how to get typescript there and using any or s spotting anys coming up in your call like codebase probably means that you need more generics not less you need better inference at those sites instead of just like stamping them out with any zeni zenis so usually it's a sign that an abstraction needs to change and i would say don't be afraid to um add an extra function just to make typescript happy because often like for instance identity functions it's surprising how um surprising how much gets like stripped out by the minifier you know it's amazing what the minifire can do these days to just remove stuff that you're just putting there to make timescript happy so yeah i would say the more enemies you have invest more into what you consider to be typescript wizardry and i think that's definitely something i would love to put right in a lot of people's minds i need to have a talk with you and alex i think that should probably be on stream yeah i don't know if you've seen the source code for trpc there is a lot of any and it's not because like any easier so much is because any is easier for the compiler and alex has done a lot of stuff to make the typescript compiler faster there was actually one point that you made in one of the talks i watched where you were discussing the differences between interface versus type instead that you usually lean towards type there is a performance hit there on the compiler side and i'm curious how much you think these are like considerations we should make in our day to day as devs on small projects versus how much of this applies to library maintainers who are making code where they're going their libraries are going to be abused and doing things right might result in doing things slower at the compiler level yeah let me let me answer like because there's one little thing in there that i'd love to address first which is like the enemies in trpc like it's if you have let's say okay let's say you have a function right you know the inputs of this function and you know the outputs of that function let's say that you have a really complicated generic signature at the top that has let you know you're taking an object and then you're like taking in the literal keys of that object blah blah blah blah doing some crazy manipulation if inside that function you're struggling to get typescript to work don't waste any time on it cast it as any like people like in inside the actual functions that you know are type safe end to end just do whatever the hell you want if it's hard just do it with any because the consumers of that function don't care about what's inside the function so you should feel free to just like pepper it with enemies as long as it's tested of course like if you can verify the runtime behavior like feel free to use that outlet like we use it a lot in x-state as well we even had to get a a ts ignore like which is usually stripped out by the declaration builder we had to get that shipped into production in order to make sure that we could do something kind of funky you know and you're right about the performance stuff in terms of application code um it's not your job to be thinking about that absolutely not do not think about performance like at all you don't need to care about it um and if you're getting pr's rejected because of performance then like type performance then uh you know stomp on that person uh shout them down uh be really mean and otherwise yeah it's a big deal for library maintainers definitely xstate is now included in like the benchmarks that typescript uses to see if it's like doing well or bad on its performance metrics which is kind of crazy to me um so yeah we have to be really careful like that what we ship is performance in timescript and i'm sure alex has had many of these battles as well he has had so many i loved that framing of typescript at the beginning and the end of your function whatever has to happen in the middle whatever has to happen in the middle and i think that's the mindset library maintainers have to be in and it's why the difference is as stark as it is because in application land you're writing type safe code top to bottom ideally and it's not too hard to do that nowadays i think we have two or three enis in our entire code base and all of them are on window like we don't need it a whole lot due to the good definitions others created that have the enemies within them though if you are writing something that feels like it could belong in a library you know it's like a utility helper like a group by object or something whatever like you have some crazy data manipulation you need to do there is always you know often there is stuff you can do in in application code that feels like library types then just do any is fine i compete in advent of code every year and i do it fully type safe and dino my entire computer is going crazy right now it's wants to turn itself off to update my mouse no that is not happening computer sorry yeah we're getting a lot of awesome questions in chat so i want to take the opportunity to ask some of these uh the first one that stood out to me was about missing features and types of specifically what is like the number one missing feature in ts like the thing that you wish you could have for application i'm going to do two because why not um for application code side there is a satisfies keyword which i would love to see um what it means is you would have a um uh let's say you have like an object where you have a bunch of different uh roles and the actions that those roles can perform so it's an object with like key of admin super admin whatever whatever and the roles are like an array you want to guarantee that that matches a certain shape but you also want full inference on what the members of that are then you can use like satisfies to like satisfy that it is a certain shape but still get deep inference on the on the deep stuff so that would be amazing because it solves a whole bunch of problems that you often run into when you're building like relatively complicated application code for library code it's all about partial inference on generics we have to work around this a lot the idea here is that when you have a generic function you can pass it like manually pass it stuff by putting stuff in the generic slots as soon as you pass one item to it then the rest of them don't get inferred the rest of them fall back to their default values tanner actually called this out i don't know if you've watched his talk yet i saw on twitter that you were oh yeah i did i did that last week or on monday it was a phenomenal talk yeah it's great uh he like is screaming out for this because it would solve a ton of problems that he had also solved a lot of problems that we had as well we had to work around this by like like fudging the inference ourselves by changing how users provide their types to us by using a type of session so there are pr's for both of these in typescript and yeah i would love to see them both merged really exciting stuff i don't see these pr's often enough and i don't think these topics get anywhere near enough coverage i feel like we as devs kind of treat typescript as done in a way where it's like it is what it is and if a cool new feature like knowledge coalescence or optional chaining happens nice but we don't talk enough about the things that could change so i really like having these convos even like yeah the i forgot the name of the feature but there's a lot of desire for like file level like declaration types so you can have config in all files in this directory always have the same type and those types of changes would significantly expand the flexibility that library maintainers framework authors etc have with the language but it's like two levels removed from the conversation we're having which is how do i get rid of this error in my application code and the the answer is the maintainer's having problems and the answer to that is typescript changing which puts the convo too far away from what we normally talk about yeah that one in particular the idea of fire level type safety or file level inference it would be so amazing for next to be amazing for storybook be amazing for a whole bunch of stuff you know a remix like that and like the better that influence can get um the better you know like the way i usually interface with typescript changes is that they just sort of happen and i go oh my god i never knew i needed that you know like the string literal types that dropped in 4.1 like for x-state that's that's just massive and like i've used that a bunch of times and like this yeah usually that stuff just drops and i go wow that's awesome and i think that's because they're listening to a lot of different voices and most of them are not library maintainers of esoteric typescript libraries you know absolutely speaking of maintaining esoteric ts libs alex had a question why can the impact of exporting or not exporting a type have a massive impact on ts performance he had a build that took five minutes the other day when using trpc trpc 10 that should have taken five seconds and it was hellish to debut i have no idea why that would happen absolutely no idea i can ping anderist andrus will know but i have no idea why that have such a massive change in terms of typescript performance i'm definitely not the one to ask i'm sort of most focused on education rather than like diving into the diagnostics i'm not sure you'll see me uh making a pr type script but like yeah that's that's crazy that could have such an impact yeah i definitely if you could get him in touch with the right people he should have a direct circle with them at this point with how much he's pushing the language like anderist would absolutely love to hear about that because he just like debugs typescript for fun you know so yeah i would i would love to see his breakdown of your problem definitely i'm into it really excited to make that intro there's a question here i i like the idea but not the wording so i'm gonna redo it uh it's do you see a future where a new language surpasses typescript either by like taking what typescript does well and pushing it further or compiling to javascript in a different way like what is the the future beyond typescript no idea i mean like if i think things like rescript uh had like a little peak and seem to just be sort of simmering now like elm you know all of these like uh different all of these things that we're trying to do what typescript has done in a different way which is basically like ignoring javascript you know or rather compiling to it like the reason typescript succeeded is that it just took the javascript ecosystem and ate it and made itself bigger you know so the fact that you i don't think any any other library i mean flow could have done that sure um but typescript did that it also offered a best-in-class um ide experience to go along with it and it was fast enough it was faster than flow i think i mean like i tried both and typescript felt faster to me um or rather it was it was fast enough at the right time that it won so i mean i don't want to predict the future really because i love the present you know like this i'm pretty happy with where typescript is now and it's like similar enough to javascript that um again that i can recommend it as a new thing for devs to learn and the fact that it's incrementally adoptable like i i wouldn't have i wouldn't have used typescript in my job if it wasn't incrementally adoptable if i was like hey guys let's rewrite all this in elm you know like they would have left me outdoor because there's no ecosystem there or rather there's a smaller ecosystem there's um yeah it just doesn't have all the cool stuff that typescript does so i think talk of like a future beyond typescript is premature um although usually new ideas come out and they're cool because they're premature so we'll see what do you think will die first reactor typescript i don't know that's like choosing between uh the queen and boris johnson you know i can't do it like uh yeah i will yeah well i mean chat is spamming but like i did not expect that strong reaction from chat i guess we gotta do a poll yeah that was that was spicy there's a video there yeah boris will not be around for long yeah i i don't think that would be that immediately strong a reaction exciting i will likely make content on that whoever said angular believe me i wish but sadly angular will never die i mean i mean react is going to go the jquery way you know which is like the the king falls slowly you know they don't just like die immediately like react is going to be pushing up huge numbers supporting devs for a long long time so even i don't think there will be a point when it dies you know has jquery died sure in the twitter fair you know it's a meme now but it still makes a lot of devs uh puts food on a lot of dev's tables totally agree i don't think a lot of new code is starting with jquery at its base but there's absolutely a lot of people making livings working on jquery i do think we slightly over index on like i think that both extremes are bad here and very common where there's the extreme of uh jquery so awful but there's the other extreme of ninety percent of the top ten thousand websites have jquery but i don't necessarily believe ninety percent of the jobs do the reason that a lot of that code is jquery isn't because the devs are choosing jquery so much as the devs aren't choosing anymore there might not even be devs anymore a lot of that 90 is code that was written 10 years ago that isn't being touched so the jobs aren't there as much because the things aren't changing yep totally agree good stuff is there anything we didn't get to that you wanted to talk about any important things typescript land web development and full stack [ __ ] posting so i've got a course which you should check out um it's mattpoc.com it's like releasing at some point i've got some announcements coming about it soon i'm leaving my job at stately to work on it at least for about a month or so full-time um and yeah i'm not gonna go too crazy yet but there's uh there's some cool stuff coming down the wire for it definitely but yeah you should go and sign up there you'll you'll get all the information really good stuff just spam the link and chat make sure if you guys aren't following matt already that you fixed that i'll go grab his twitter link as well so you have that too anywhere else they should follow you youtube twitch what else should i spam yeah i've got a youtube channel as well i don't think it's got a very attractive url though um i will have to change that but yeah find me on twitter um you know dm me like ask me any touch good questions you have like a ton of people ask ask about that and um yeah i mean i've got tons of questions for you there like depends how long you want to run for oh i'm down let's do it yeah how long do you want to run for ice i'm going to probably run for two to three hours after you're done so i don't care like i we have over 600 viewers across platforms right now i'm going to milk it so i'm here as long as you want to be ask away sounds good all right well i mean like so okay i i'm really interested in in what you've built here which is like a pretty cool community and uh chat i hope you don't mind i'm gonna turn the tables and start interviewing theo a little bit which is uh i've kind of like my my story of how i've uh come to be rodney mullen of typescript which was in march i started i had like 3 000 twitter followers or something just from my sort of like ambient stuff that i was doing my next date and then i released started doing typescript videos i did like 20 videos or something i went up to like uh 28 000 or something like or wherever i am now 29 000. uh over the course of four months so like that was insane for me and i don't like i haven't i also have like a youtube channel like from my like previous career which is like all about accents so you can watch me teach you how to do a new york accent or live ball accent or things like that so i like have experience doing that but it wasn't very successful at the time and just like the seo of it sort of like propelled it to 25 000 subs or whatever um so and but the stuff you're doing with like your discord is like super interesting to me twitch is super interesting to me um so like where would you what do you consider to be the coolest most community oriented like what has given you the most momentum what is your attitude towards this stuff there's not really a question there but i there's so much i i think that like the things i'm doing this for the things that are the coolest and the things that are working the best are like three different topics i think that you want number one first why i'm doing this number one let's do it number one two three i'm doing this because i'm a [ __ ] youtube and twitch degenerate i've been watching let me check my phone quick and see how many hours of youtube i watch on just my phone a day it's really disgusting like horrifying i am at activity in the last four days i've watched 18 hours of youtube on my phone damn i just i love this [ __ ] i live for it i always have my phone in my background with an airpod in playing something and that's just how i am and yeah i'm i started ping because there were problems that weren't being solved for content creators in particular collaborative content which has always been one of my favorite types of content shows like this where i can bring somebody cool on and talk about whatever in high quality and make good content out of it i wanted that to be easier because i wanted to do things like that so i built it and then i started doing more content both because i had the tools i needed to do it and also because the content i was looking for didn't exist i wanted to to be frank fill the hole that was missing when i quit twitch and didn't have my front-end engineering slack channel with 400 plus engineers that i respected and looked up to where i could [ __ ] post about all the crazy things going on in the web dev world and when i lost that and i loved youtube and wanted to build more tools to make youtube better one of my primary goals was fill that hole i was feeling for myself what i learned quickly was a lot of other people have that hole either because they went from a big company to a small company or because they don't know other developers and that's one of the coolest things about my community and the like people who dm me more often than not they aren't always super senior developers like a lot of them are trying to get their first job but if they're stuck around long enough to be part of the community be part of these live streams then the senior nature of what we talk about hasn't turned them off and usually what that means is that that particular dev is more senior than their experience and their surroundings have let them know and this community lets them have the more senior conversations that they can't because they're the only dev in their city or the only dev that they know and as a result of that we've had everything from like helping people get their first jobs to 26 i think people have contributed to create t3 app now which is nuts because that's like a very new project 25 people but that's insane half of them made their first open source contribution on a repo that now has 2 000 stars in two weeks it's really cool seeing how the just by creating a place that is high production quality high a place that is cared for focused on and built around more senior topics and advanced software stuff before this channel existed i honestly feel like most of the well-produced content was very junior and most of the senior content was very hard to watch i love you ryan carnello your stuff is awesome but we need to get you off stream yard and i feel like that's very common that the people who make the senior content are doing such without the same care for the production quality as somebody making a how to get started writing develop a writing software creator it's an interesting angle right because it's makes more i would say business sense to focus on the larger audience that who are the beginner audience you know but it seems like you're trying to capture and trying to focus on the the type of person that you talk about there which is uh someone who wants to have the more senior conversations and it sounds like then in terms of your discord like how involved are you in the discord like what um what did you what do you do do you run events like for like for us at the stately team uh we have a discord it's actually where we do our work chat as well like and we're we're fairly hands off you know we let people sort of like answer questions themselves and focus on that um but what's your attitude i have to just give me one sec i have to kick out my cat before he tears up my entire shelf somewhere else i also have a cat down here as well i would position my camera so you that you can see him but he's like oh he's got a little tear just rolling down his cheek cat swap sorry should we should we meet our cats let's do it i am very down if you have a cat to introduce as well i do in theory i do let's see if i'm he catching like this at all oh so fluffy oh my gosh he's very extremely fluffy hello yeah murphy's bee murphy's very used to being used for content nice and i got him stuck in my headphones for a second there anyways sorry bud you're good you can hang out so the discord i dragged my feet so long on making a discord server for my content stuff the problem was people kept coming to the ping discord for like the company thinking it was my discord and asking programming questions there so i begrudgingly made the discord server so the the youtube people the twitch people in the the community that was forming had a place to hang out it's pretty pretty chill i would say overall i've done like one or two events it's very ad hoc though i if i'm planning something in advance in the discord i talk about it in planet on stream and then like two or three days later we hop in the discord and have a call and even that i'm not doing as much as i would like to but that's more because it's not as aligned with my goals like goal one was fill the hole i had of not having a place to talk about vent about and discuss more interesting more senior content or more senior topics and new things going on in the software world i have hit that goal out of the park i have exactly what i'm looking for there i have a couple channels in that discord especially the sub only channel if you're not already subbed fix that the sub only channel and the discord i just vent about whatever the hell is going on and it's so cool to have that place again where i have a bunch of devs i trust and look up to who also respect me chatting about all these cool things so with that goal handled what are my other goals goal two is understanding the platforms that i am making content for we're building a content company ping is all about enabling creators to make better and more successful content to be better and more successful in their journeys and a big part of understanding that is experiencing it myself and i've learned so much i've been advising random software dev companies on how to help their youtube channel uh even supabase yesterday i helped them like rethink their youtube strategy i love doing stuff like that i really want to make software dev content better and through doing that better understand what makes content better and work well on these different platforms and i'm figuring it out because i got 11 000 subscribers on youtube in the last 28 days when i was an 8 000 sub channel before it's really awesome figuring these things out my goal isn't necessarily growth or to be the biggest tech youtuber it actually kind of specifically isn't to that i if i'm successful i will never be the biggest because the biggest will always have a wider target and the people targeting juniors will win because there's more of them but i want to have as close to 100 saturation of my target market which is people who like to talk about more senior dev topics and if i can succeed there then i can apply what i learned and help others do the same and use that to make our business more successful in solving creator problems that's so cool um it's so cool that you're focused on it sounds like small incremental improvements and trying to just do what you're doing a little bit better and that also that you're helping that and putting yourself in a position where you can help other people do that because i've definitely found that as a teacher you tend to learn a lot more deeply about your subject matter and feel it a lot more and understand all of the nuances i'd love to know kind of like like the behavior of like a youtube degenerates which is what you are uh and what i am as well is like you know you just look at the thing you find a good thumbnail and you click the thing you know what i mean and you like look at your subscribe channel you see what's coming up you watch streams you do blah blah blah what is the behavior of a discord user you know like because for me discord is just like where my stately channel is and i just look at that one channel i have other stuff like that i've signed on to whatever like the factorio channel or whatever like a million years ago what is the behavior that you're looking for there are are you looking to be the one and only discord like the first discorder that that person logs on and sees or have you just started it and like looked at it and thought okay i'll just see how it goes very much more the latter um i'm picky with it like i don't want to be the place that people go to ask their beginner react questions if it becomes that i will be very sad i am much more focused on kind of like what i used to have from the twitch slack i want a place where developers can have really interesting and deep conversations like the the moment i specifically remember this moment because it was so cool the the tailwind community manager showed up in my discord to ask us questions about weird animation performance issues they were having on three different solutions to an animation problem it's like you're the community manager for tailwind but you came here because you know this isn't a place where you're gonna get bombarded with a bunch of like new responses and stuff it's a better place to have these conversations and i loved that that was the like oh [ __ ] i did it moment i remember i was like at vidcon and i just like looked at my cto it's like the tailwind community maintainer is in my server asking questions about animation like where did this go where did this happen i suck at css but it's so cool that like that's the the role of the community and i'm i would argue more concerned about preserving that then growing it further like we're about to hit 2000 members if we cap there and it stops growing but the types of conversations we're having now don't change i'm totally happy if we grow but then become reactive flux that's a failure um yeah like the typescript discord for instance is just it's just enormous you know and it's it's basically around it's hard to have a conversation in there you know i mean it's just becomes very loud and so the sense of um yeah the sense that you can just have a decent conversation somewhere is pretty exciting and it sounds like you're not so much focused on like user behavior there as just like keeping the thing that you have going like absolutely good yeah i think one of like the more recent cool moments was do you know about the history of create t3 app at all because i think it's really a golden example of why i'm so happy with how the community is going so go for it tell me for a long time i've had people asking me for a template go make a template repo with all the tech that you like to use and i don't want to do that i will never do that because you shouldn't use all the tech i use because your problem is different from my problem you should pick the pieces that work ignore the ones that don't and add additional things that make sense for your use case i hinted that i could see something like a cli to initialize a project with questions that you're asked to install the specific technologies you need for your use case while encouraging the best practices that we believe in here could be super useful like a create t3 app and a couple developers stepped up one in particular early on uh code stallion he's a developer from africa he did some really cool stuff he played with create t3 app got it pretty far but ended up focusing on his grind to get a job at the time and succeeded he's kicking butt nexel from india actually uh younger dev only 17 if i recall he took on the project as well and got it way further way faster and quickly had a cli working that would bootstrap the right pieces i was blown away with how far he got and how fast he got there so i started signal boosting a bit sharing it in the community showing people that it was happening all of a sudden like people were stepping up there was like six or seven community people working on it i ended up using it to bootstrap a project when i was at vidcon because i needed to get an app up quick and it was so smooth it was the best experience i've had on my own stack and it was crazy because i had nothing to do with any of it other than like tweeting about it once and sharing the link once in discord they encoded the philosophy we discussed here and the way that we build into an app for this in particular and since then it's blown up there's 25 contributors there's over 2 000 stars and i think it's been downloaded like six or seven thousand times which means that many apps have been initialized using create t3 app and it's so awesome like like one of the dumb things i did is i made a channel in the discord server just to talk about create t3 app and now that's one of the most productive channels where we're talking about the pr talking about ideas how to make starting applications better and also reflecting on the fact that multiple companies are going to start using this tiny little cli because this is one of the few tech stacks that will let you move faster early and scale infinitely and it's so cool seeing how the community made that happen not me at all i had nothing to do with that project and it's one of the coolest things that i've been involved in without doing it so cool and the fact that that's just an emerging property of you having done all of this youtube stuff you know and done the twitch stuff it i imagine it makes it feel kind of worthwhile you know seeing people get a lot out of that experience and feeling camaraderie and like yeah that's that's so cool like i've teared up once or twice yeah man so cool i'm thinking like for me like there's nothing out there where there's like a community of advanced typescript users of people who are solving like these library type issues there's nowhere for them to go and chat basically like it would be amazing to have something like that like chat what do you think like would a typescript discord where you're kind of just focused on the complicated typescript types would that be useful um but it's it's like i don't know how to even go about setting that up like it would be pretty crazy um do you see chat's reaction already you have a lot of people who want this i don't think there should be a channel in my server i think this should be your server yeah this this this does okay i mean yeah that i would look yeah yeah this this does seem pretty cool i mean yeah i just don't know how to like set up something like that you know i mean i i could we can do it i'm sure maple jumped on that real early i'm sure they'd be very helpful as well there's a lot of people here who are more than happy to help you start the first advanced typescript discussion community yeah that sounds great yeah i mean like a spin-off from the real-time script repo where you just talk about advanced crazy stuff yeah tweet me uh at manpo uk and we'll work out work something out i i love the idea of having a community where i'm not the head of it you know like where it just sort of emerges by itself and something that maybe my content can help guide so i'm yeah let's do it and maple yeah i recognize you from uh from all the um from the remix stuff i think and uh yeah i've seen your name around a bunch this is exciting good stuff wow we started something and this is why i love the community though like to go back to the first question of like what am i doing this for it's it's this like as cool as it is that i'm blowing up on youtube and i'm already making more revenue on youtube than primogen somehow thank you all the youtube premium people who keep downloading my vods y'all are the best you're making me a ton of money and i appreciate you immensely besides that though the longer term like almost like horizontal impact is so much cooler i love that cooler things than what i'm doing are happening starting where i am and that is incredible and i honestly think that's one of the best values you can provide as a community leader it isn't necessarily i'm the the thought leader making all these things happen it's i am creating the environment where these conversations can start yep totally i think that seems like an amazing point for me to step off i've now run out of water which is like my source of voice you know i'll start losing the golden voice in a minute now um but thank you so much for having on this has been really really fun this has been absolutely awesome i by far one of the best podcasts i've done even just by the viewership and chat interaction i can tell that this one's gonna do well i super appreciate you for coming on especially considering how late it is for you one quick shout out for matt everybody in chat make sure you're following him if you're not already be on the lookout for that new discord it'll hopefully be happening soon thank you again matt so much for stopping by it's been awesome thanks theo thanks all right what a show i ah that was so cool let me get my uh overlays up again quick uh alerts chat these are gonna be a lot i can already tell uh let me quickly dm him and just thank him once again [Music] rad thank you guys again so much there's a ton of subs i need to shout out i'm going to go through the list list quick logan orangutang uh amman for the gift sub melbourne dev hello 2000 massmert default gn and dookie thank you all so much for the subs resubs gifs everything and generally for the support of the community y'all are the best means a ton also to the youtube gifters i saw two of you guys alexandros and robert really appreciate y'all for the support it helps so much i know i talk about this a lot but i'm actually not making a lot of money as a ceo i am getting close to the point where i make more on youtube and twitch which is very helpful and lets me like possibly buy a better camera suit and buy food and not have to like leave early to go cook and [ __ ] like that so we really appreciate the subscriptions here we really appreciate the support we really appreciate on youtube if you download the videos if you're a premium youtube user especially the long ones and if you have other creators you like do that for them as well it juices the algorithm because it counts as a full video view from start to finish and that just prints money so definitely do that super appreciate all of you i also saw knock you mentioned earlier that you bought t3.new we might have to chat i yeah that is a very good domain and that is a very good domain we need to do some very good things with so let's do that what the [ __ ] alejo 50 gifts 50 gifts even if y'all switch off a flutter due to my [ __ ] posting you might actually have overspent the difference there god damn you're the best thank you so much alejo everybody who just got gifted a sub make sure you're in the discord t3 dot gg discord because you have access to the sub only channel now you just had your ticket paid by a very generous alejo and now y'all can ship post in there and see all the cool things that i talk about that i can't talk about on twitter there you even gave matt access through that so that was huge legend thank you so much and the regional argentinian pricing yeah you and uh god i hate that i can't remember his name but there was an awesome viewer who donated a ton from iran and the regional prices make those numbers look a lot better in the gift than they are otherwise but yeah i appreciate it immensely still 50 gifts is insane at any price even at like a dollar a sub that is still huge and i appreciate y'all immensely thank you for the additional five gift subs coldwire and croucher oh croucher gifted the sub to matt super appreciate that man y'all are the best thank you guys so much also uh somebody asked how do you get to the discord channel once you join discord you can link your discord account to your twitch in settings and when those are two are linked you should automatically get access to that channel really appreciate y'all so much the viewership is insane sadly i can't see it because twitch broke the dashboard again you know what i'll screen share this it's funny game cap window cap change this to this guy so check this out this is my favorite twitch bugs it always comes back you might notice that i can't see the numbers on top here the reason for that is the bottom currently has a black bar something caused this to shift up and because of that i can't read any of these things even when i refresh it just shifts itself back up because of this thing on the bottom open and close dev tools fixes it i have to use inline dev tools i have mine popped out on windows i can pop it back in i used to work on the dashboard i fixed all these problems and they keep coming back and it's not my fault and it's really sad uh here did that do it that did it thank you for the pro tip just gotta be a developer to use your twitch dashboard who would have thought i guess the twitch really is pro developer after all anyways how are you guys doing today that was quite the show i really enjoyed that podcast and i am so excited to get that one up on youtube i yeah okay uh i don't do this a lot but there's a comment i i need to do a poll on this comment actually let me switch back can i pop out this comment easily i don't want to call it other comments i just want to call out this one so i'm going to scroll crop accordingly so i'm going to do a quick chat poll wrong layer i want to move this layer this comment right here i am so genuinely curious i'm gonna open my chat in another tab so i can start a poll how fast do i talk kinda slow just right too fast tbh cool i am so curious i am very surprised by the amount of just right here i'm gonna be honest i was expecting too fast because that has been the feedback i've gotten my entire life and now yeah this is very validating i appreciate this a lot you're not a native speaker but you still listen at 1.25 interesting yeah y'all are the live audience you're going to be more used to my [ __ ] so it makes sense that you guys are more tolerant yeah appreciate y'all immensely and this feedback is heard i will change nothing very useful good to know nothing needs to change so a bunch of subs to thank again uh frapper cart pusher gigachad and dylan playa appreciate y'all immensely three of you guys are using primes which is really cool for those that don't know if you have an amazon prime account you can link that to your twitch at twitch.tv prime and from there you're able to get a free subscription every month which you can give to me have access to the tech channel not surprised pedro's here i owe him a reaction to one of his videos actually uh surprised you haven't stopped by before pedro good to have you here yeah we will uh react to your stuff soon i promise there's a lot going on there's like a lot going on yeah i i saw sean's message about my voice i definitely think y'all are stockholm syndrome into it my voice is awful but y'all deal with it which i really appreciate because it makes my life a lot easier that y'all listen to me talk and i don't be as insecure about how i sound anymore so shout out all of you for that oh no my laptop's half dead which means we get to do half as much as usual get this guy plugged in time to change some titles so we can talk about some bun i'm assuming that's what y'all want me to talk about now i should do a poll actually we'll ask first what should i talk about other than bun so i can make a poll and we can put it in there say things other than buns so i can make a poll there's other things going on in the dev world i think usually maybe is it really just bun edge db i'm pulling people on oh yeah the versailles uh trpc thing cool those are we have good options here uh what to talk about now versailles trpc clone complain about mui bun cool here's the poll let's see what you all think can i switch to my screen share and have it work yet i can have it half work let's get the other half working now fixing my screen share quick i love when you guys are fighting over the two things of the four i want to talk about it's very nice i like that we're aligned in those ways main display mirror aha and now i can pick the right res and the right refresh rate and there we go ta-da it's like a tie between nexus wr and bun right now i dig that good stuff let's go change my titles quick update titles verse verse l discovers typescript cool title's updated let's do it uh looks like we're very slate ah nope it's a tie you'll need to break that tie looks like bun is taking a very very slight lead where are we going to end up boys bun wins cool bun first let's do it so what is bun not as easy a question as a lot of the the what is questions that we have here bun is a new way to write not right it's a new way to run your javascript which means the bundler the transpiler the run time the most of the system basically that we use it replaces babel webpack node and a lot of other things it's in a lot of ways comparable to dino but also isn't because dino's specific goal was to undo the bad dx decisions that node made bun's focus is as close to complete node compatibility as possible without the performance hit that a lot of nodes or but or yeah nodes design decisions made for all those reasons bun is very exciting because unlike deno it doesn't require us to rename or re-build all of our code theoretically there will be a future soon even where you could take your existing next.js app uninstall bun run and have it work as expected super exciting stuff somebody asked why it was named bun i actually have a bit of insight info here i think it's been shared publicly now if not cool i'm leaking a not big deal uh jared named bun after one of my good friend keps bunnies named bundle which is a really convenient name because bun is a bundler and the name but of the bunny happened to be bundle so bun became the name of the or the project so showed up bundle shout out jared and shout out kip really cool project also a ton more subs thank you guys a bunch uh burn visceral sack ssa cube never going to pronounce that right not even going to try a kell mb miller the bean squad got your sub and then immediately gifted five dope stuff you could have done a tier three but instead wanted to help the community out get them all their free tickets to the discord really appreciate that as well as doing less you all are the best appreciate y'all immensely thank you so much for the support cool so what about button how do we use it what do we use it for what are the more importantly what are the wins the big win is the performance the numbers i have been seeing both myself and from others in bun have been pretty nuts where's windows great question who uses windows for dev now it's so it's written in zig not any other more common language i think zig can compile to windows i not sure though i understand why bun does not support windows right now supports wsl which is the actual development platform for windows so i'd probably use that why is that not text copyable interesting anyways with bun you get insane performance using a lot of more traditional like web code like the basic http server example here i actually have this deployed uh fly dn dot tt3 dot gg no uh oh it's a fly bn i'm done the numbers i've been seeing on this are not as good as they were earlier actually interesting i guess others are going to it maybe because before and i have all the old numbers here i was consistently seeing like under 70 80 millisecond response times to be fair this is in san jose and i'm in san francisco so it's very close but yeah i am seeing some pretty good numbers here overall to be fair with fly in particular that's not a it's not a traditional like serverless function it's much more a server itself so i have a server running in san jose that's sitting there waiting for requests bun is not edge ready just yet but right now this is yeah i think we're seeing these spikes because others are going to it now i should probably uh have added some form of monitoring to confirm that i'll do that in the future probably but it's a decent enough test to see how fast a server running bun can be it's not a fair comparison to compare it to the other things on bench t3.gg because this is a server hosted in san jose this lambda is a lambda hosted in i think uh us west 2 which would put it in oregon edge is going to be wherever cash is going to be wherever these two are a little fairer comparisons but they also run a web framework that's generating actual html through javascript whereas on here if i just go to the github i didn't even put this in the performance test repo yet because it's different enough that i don't think it fits at the moment here's the fly bun repo and you'll notice here first off there's no package json we're not using any packages we're not building any code more importantly here i'm not running a framework i am returning a response with this html blob in it because i always wanted to see how quickly bun can process http times and or like just process an http request and get you html back and it seems very fast i've been pretty happy with it overall that all said what i need to do to test this better and more for the cases i'm interested in is first off get other things onto fly's infra that i can test against get astro get spelt get next onto fly ideally in the same like region so i can compare between those that'll be a much better way to test the impact of other frameworks i should also spin up a fast fi project in an express project to see how those compare ideally i would get a basic rust and or golang server too i've been hearing that response times in bun have been slightly better than go or not go but then rust for http stuff which is very exciting and i'd love to see improve that so these are the things i want to do in serverland there's also server less land where i'm going to be worrying about automatic containers firecracker lambda edge new uh like isolates in those environments that's like the next edge test the svelt and astro edge tests i think bun has a lot of promise in serverless functional and like edge environments and i'm very excited for that future sounds like a battle with prime i don't normally get to talk about js performance in these bold of terms normally javascript is slow this looks like it won't be so very exciting very very exciting stuff i missed some subs in particular i missed a tier three from bean squad t3 club appreciate that immensely thank you so much for the tier three i need to make a like golden theo emote for the people who do the tier three because you all deserve more love might even make a separate tier three only channel in the discord actually i'm gonna do that now why not it's pretty easy to do discord opening it now oh i forgot i don't have the crazy thing that makes discord faster on this computer mark what's that named i want to plug it i always wrote the name of it which is a bad sign [Music] cool new category edit category permissions private save move sub only in and t3 club in here as well and this one is only for tier threes cool so there's now a tier three only channel i'm gonna do something stupid i'm gonna turn on push notifications for it so i will know when people message in there enjoy your private chat guys one more incentive to upgrade your sub also alejo thank you for the upgrade really appreciate that keep just throwing the money my way y'all are the best also dan dubs meru and doing less appreciate y'all immensely doing less phenomenal name in particular kill the spicy how much spicer will it takes me to be determined i just made the channel i'll let you guys know when i do so what else is there to talk about with bun uh there are a lot of like interesting specific things that were optimized that are interesting so a lot of the runtime is still v8 it runs javascript as close to normal javascript as it can as often as it should but with certain things that javascript and in particular node don't do fast like web sockets readable streams uh file reads and writes sql lite all of these things have been very focused on performance where node and v8 don't perform and compatibility where they do the result of that is some really insane benchmarks i should go to jared's twitter honestly he's gonna go to media and look at some of his benches here he also built a ton of awesome benchmarking tools in to bun which is dope i should probably have dug more into those and played with them we're gonna have them on the show soon to talk about all these things so until i'll then as much as i have the opportunity cool this is just one example of the websocket performance in bun it is able to get so i'm assuming that this oh it's number of messages yeah it can send over twice about twice the number of messages as deno can in the same amount of time because it processes them so quickly it's a bit more than node still like decent percentage gain there i'm gonna search for his sequel light stuff so here is the speed of bun doing sqlite queries it's able to in this heavy example the select from order detail as a raise can it takes 131 milliseconds per iteration uh better sql light 3 for node gets about 585 milliseconds per iteration and the deno uh query uh sequel i guess it's an orm it's very minimal the deno one is 406 milliseconds per iteration so it's like two to four times faster insane if this was to be combined with the new sequel light distribution stuff that's going on there are some pretty intense opportunities here to make a very performant api layer on top of light this is just one of the small things that jared sunk way too much time and effort into in bun there's a bunch of these little like oh [ __ ] this is better than any other solution in the space right now just a couple of those in there there's also the speed of install does he detail us here he doesn't i know he talked about it in recent tweets from jared sumner install here here's another one of the small things he's excited about the install speed for bun install versus yarn install versus npm install when you already have the packages like installed in cash even pnpm the speed for bun was uh 25.4 milliseconds on average yarn was 563 milliseconds npm was 1.268 seconds and pnpm was 1.342 seconds the speed of these builds and installs is hilarious like genuinely very funny how performant this is yeah uh there's a lot of optimizations here to learn from and i'm excited for jared to share these things more because he has been deep very very deep in this world making very cool things happen and yeah excited to have him on the show how long before bun is supported on vercell i know that jared and lee have some communication open i don't know how far along that is definitely something i'm instigating and would like to see happen but yeah there's a couple of these like back endy performance things that are really exciting that are happening this like bun install and button itself is not going to affect us as front end devs too much but as full stack and back end js devs this is going to be nuts this is going to help with like your build times your cpu load your hot module reloading times your server deployment speeds so many pieces of our experience get improved with things like this this is also reminding me of one other exciting thing i got to use for the first time when i was deploying bun last night who knows about railway here give me a fire emote if you know about railway give me a frowny face if you don't because we're gonna teach you all about railway right now it is a very cool platform no shame with the frowny faces this is good for me to know who's used it and who hasn't who's familiar and who's not so the important detail about railway is that it is the fastest way to spin up a server for pretty much anything so let's say i want a postgres database i click new i click postgres and in just a moment i have a new postgres database that's it here's the connection url keyed out so i could copy it but it doesn't show so y'all don't see me leaking on stream huge shout out whoever did that by default i just didn't leak something i very easily could have pretty sure that was for us i'm just assuming great [ __ ] we now have a db that's ready to go let's say now we want to add a github repo we'll set up the railway bun repo i already made this is a docker image by the way and it looks like it is pretty close to done deploying now it's already done building should be live any second now and it's done it's what 15 seconds if i go to my github i'll show you guys this is not a like project that is total [ __ ] like there's an actual docker file that that just ran in like 10 seconds and deployed and now if i click the generate domain button now this has a url and it's up that's it we're done yeah railway is killing it right now i wanted to show this off a bit it's like the the speed of deploying an image is nuts but we can get faster here's a magic trick knicks packs this is the new thing railway's been working on really hard lately watch how fast this redeploy is i still don't believe it it's done that was it we just redeployed we built from scratch a brand new docker image and deployed it in that time that was what four seconds insanity actual insanity oh maybe that wasn't the one i had builds that took four seconds yesterday when i was doing this it is insane like it's done we're now up we're on next packs instead actual insanity i will go to their repo for this because this is a very new project and funny enough has less stars than create t3 app even though it is way more revolutionary so nyx packs is a new way to build a docker image that is significantly more performant and yeah i don't understand much about how it works because i barely even understand docker all i know is i click this button not knowing what would happen it built way faster and it worked totally fine it's nix based but you'd never you never touched the knicks which is the from what i have heard everything about great is nyx but the language and this lets you not touch the language so very exciting stuff i yeah super hyped for what rayleigh's working on it feels like they are the obvious successor to heroku in a way that's almost like humbling people have been asking about pricing i'm wondering if they just have slash pricing cool they do so for free every month you get a half gig of ram a gig of disk disc their community support and five dollars worth of usage and the usage is pretty cheap they have a little diagram here you can increase like it shows you like a database uses about this much discord bot uses like that much open graph generator growing startup as a service you can click these different options and see roughly like how much each of these things is going to cost you monthly super useful love what these guys are working on definitely check out what railway's up to play with them a bit community's awesome i've chatted with them a bunch even yesterday when i tried deploying on railway and failed to funny enough the reason why my railway deployment failed uh here's the commit that fixed my railway deploy i don't know how much of this was them versus like parsers and [ __ ] like that i had to rename my docker file to capital d lowercase awkwar file when it was all uppercase just like an old pattern i picked up a while ago it couldn't parse the all uppercase dockerfile so make sure your dockerfile is uppercased lowercase the rest or you might have deployment issues yeah for that to be my only issue is very amusing so somebody linked a benchmark from jake of course uh 239.94 seconds versus 3.66 seconds it's yeah these things are going to make our experience building applications so much better there's an opportunity right now to combine nyx packs bun and like an abstracted build system to make it so you push code on your computer and the new version of the app is up in under 20 seconds like we're there now these tools will enable that level of snapping your fingers and deploying the new version of your app without compromising on performance in fact better performance it's really cool and i wanted to shout that out because it was one of the many things i i ran into when i was trying to get bun live on railway which it now is as we can see here so very hyped on all the stuff going on there people are asking about are there details on how they do this magic not beyond the open source repo for it but if you want to like dig through the source feel free to do that oh [ __ ] melky raid thank you for the return raid melky really appreciate you fantastic to have you here we're talking about crazy fun and nyx pack performance stuff it's been very exciting i actually think you'll really enjoy the talk i did earlier milk if you have a chance to watch that vod later uh probably be youtube upload as well but we interviewed matt poke from stately and just generally like the typescript wizard well known as the uh ronnie mullen of typescript we had a great talk earlier and i was really hyped on that one so keep an eye out for that uh yeah bun is taking over just twitter i've been talking to jared for ever now and it's so rad having him succeed the way that he is with bun like it deserves this he has been grinding like 20 hours a day entirely solo for about a year maybe a bit more than that now i've known about it for about a year now and seeing him finally release it and get this level of excitement and response and honestly the coolest thing is nobody talking [ __ ] i feel like with these big launches even with dino there was a lot of [ __ ] talk but with bun it doesn't feel like there's much of that very exciting stuff a bunch of people honestly there's been more critique for zig than for bun through bun being on zig very exciting stuff also thank you james craig for the donation on youtube as well as the pile of subs that i missed uh bean squad meru dan dubs all right i got you guys i didn't get zemar recursion monster upgrading to tier three or west key upgrading to tier three we got three tier three upgrades t3 club really appreciate you guys so much and yes uh maple people are critiquing zig because it's not rust i actually find it to be a surprisingly good compromise between what something like golang does and saying [ __ ] it do it your way and what russ does which is compiler hell i keep hearing that we're trending we're climbing a bit i'm a little disappointed because we have the most stars today of anything other than sms boom and we're still getting pushed pretty low we should be number two especially when you consider how many stars we started with we should probably honestly be number one we are number one in typescript last i checked we are still number one in typescript cool let me get this tweet out quick uh because that will be a good one for the seo cool get that screenshot twitter number one trending typescript repo on github cool that tweet will probably do well anyways full screen two different full screen commands annoying working on your first project with create t3 app oh boy please let us know how it goes i think actually i'll ask this while y'all are here this is probably the easiest place to do it uh paul should we make a separate create t3 app support channel in discord the in discord is implicit here i've noticed like people who have support problems are struggling to figure out where to put them especially if it's support related to uh create t3 app and yeah helping out there is super valuable where you can do it how many viewers did you have jacob did you finish your stream up why are you here already and did you have more viewers than twitch or twitch plus youtube also where was my raid man disappointing 90. oh good [ __ ] congrats fantastic man that's partner numbers you can break 75 for enough streams that's how you get your partnership congrats still sad i didn't get my my raid that's fine though melky more than made up for with a 200 or so wow we're at 555 viewers on twitch right now nuts y'all are the best thank you guys so much looks like we need the t3 support channel i will do more discord and quick create category create t3 app move this guy up honestly this should probably be higher and i'm gonna make a create t3 support and i'll probably make a separate planning channel for like core maintainers so we can avoid the noise in the future but for now i think this is a good way to break things up a bit do i have any examples using trpc with remix not just yet i uh yeah i know that maple has not necessarily played mineover maple somebody in the remix community shared loaders that they made working with trpc and remix it was pretty compelling stuff the there's a lot of reasons why you would want to use trpc it from the syntactic sugar of the dx letting you easily drop a zod validator it did async function into a mutation or a query it's the quickest way to stub out a type safe validated api endpoint regardless of which web framework you're using you would have to to get the safety and consistency you get out of trpc in remix you'd have to write some pretty heavy wrappers around their loader and action behaviors to recreate that i've seen people trying i think that there's a lot of opportunity to bridge that gap and honestly with the next swc stuff or swr no it is smu swr yes the next swr stuff seems to be a little closer to an in between there where right now it feels like there is an unnecessary spectrum where on one side where is my button for this cool on one side we have having data live as close to the component as possible and on the other side we have data being accessed as safely as possible i don't think these these need to be two opposite sides of a spectrum i think there's an opportunity to have data that lives close to your components that also is interacted within a type safe fashion it's an unnecessary dichotomy that has been to be frank frustrating me for a while that i feel like things like next swr endpoints are addressing with that said let's chat about next swr endpoints because this is a very interesting new project that i was funny enough let's see if i can prove this live i'd be really pumped if i can i quadrupled the number of stars by sharing it earlier yep i can prove it i am the first star on this repo and i am very proud of that because it's one of the most promising things versailles worked on in a while and i am super excited about what they're working on here this project's goal and i i don't know if there's good enough examples here to like properly show off how cool it is but i'll quickly show here we have result equals use all people takes this thing you pass it honestly i should probably just clone this and play with it that'll be a much better example uh cd sandbox skit clone so in the example app we have this guy which is not typed correctly which means that this isn't working uh i guess it doesn't have the package installed okay does this have this not linked correctly internally this has a pnpm workspace oh it's turbo ah anybody more experienced with vercell's new way of using it pmpm and turbo yeah this works nope it can't resolve that path it does turbo command let's just look at the script see if there's anything in here that can help me nope cool yeah just this failing on that i'm just assuming it's broken regardless uh it's a brand new package guys don't i'm not gonna switch over to anything i'm not in the examples folder it doesn't matter which folder you're running from with turbo i i get why this happened we've all you've been there it probably worked on their machine and they my guess is they have a global link of some form for next swr endpoints that allows this to resolve that doesn't exist in the repo that was pushed so that is my guess is the version numbers right on the sub package and this might be the problem uh this might need to be 100 nope cool what else could it be change the version to star that might do it actually looking good we have a winner good [ __ ] now let's see if the type safety works it does kind of does data okay we're close let's see const stuff equals result.data if we hover over this stringer undefined cool so if i now go here this syntax might look familiar query comes from next swr endpoints takes in a sod validator and then some back end code theoretically this all works as expected i should be able to wrap this say message and get a type error here because this is dot message if i change this to dot message we're now good yeah that's full stack type safety what i'm curious about though do i have to save the changes because it's one of the cool trpc magic things where the changes have to be saved nope it doesn't cool i haven't saved this change yet it still is now a string that we're getting back and this is a type error because it's not on there this is this is trpc again there's a very cool difference here that is worth noting though this isn't being served by a trpc endpoint this is a custom function a custom hook defined using query and this will now at compiler time create a new endpoint that we can call so rather than in trpc which uh do i have a create t3 app scaffolded i'll make one quick npx create t3 app uh trpc demo ts and a to all i really only need trpc cool so here's the trpc equivalent in here we have server which creates a router we then have context which in this case doesn't do much but in the prisma example this will carry the prisma client in next off this will authenticate your session but for now we're just sharing the requests and the response as context of other things have access to them and here's an example router this is the equivalent of what we were doing in the next swr our swr example dot query this has a name has an input type and it has a resolve type so if i change this from here and rather than giving it an object i just give it a string oh that needs that there we go then i should start getting a type error on the page where it's being served because this guy expects dot greeting which doesn't exist anymore so this would have to be just data now and if i again wrap this with message this looks very similar this works very similarly but they are different in the sense that trpc doesn't hide much from you while simplifying the stuff that i'm seeing with next swr is hiding some things but not necessarily the wrong ones i actually funny enough have been pushing alex for a while to put just a query and just a react hook call the trpc.use query with the right example here just do this in the top of the docs so people see what how do i put it so people will see the difference in how simple queries are and how simple mutations are right at the top of the docs alex doesn't want to hide things he wants the developers who use trpc to understand it understand what it does and understand why they have the trpc.ts file in pages that imports the router and the context understand why you have to build your own util that creates the react hooks for trpc these pieces exist so first off we don't need a compiler step these all exist in appland but more importantly so that you don't have any piece you can't change modify understand this is one of those like technical versus marketing type things where what tier pc is doing is the ultimate technical solution and does a great job of letting you have this magical full stack type safety thing without compromising on your own like ownership of your code and i i do genuinely love that about trpc i think it does a uniquely phenomenal job at having something that feels this revolutionary and changes how my average line of code is written without taking control away from me what vercell is working on takes away significantly more control because what vercell's working on doesn't give you control of the endpoint it's deployed on it doesn't give you control of the transformers that occur before and after it doesn't give you a layer to add context to add middlewares to cache by choice to add custom headers all the things that trpc lets you do to make it a full api solution is not what this does help next swr endpoints doesn't even have mutations because swr doesn't have mutations so like if i wanted to have a function in trpc like out dot mutation add new friend and this takes in input z dot object friend user id z dot string and then this has an async resolve that input and this guy we'll just console.log new friend input dot friend user id and return message you have a new friend ideally this would like do a db change that adds the friend and fires a request to your database or something like the idea of a mutation is it's something you don't want to have automatically run it's something that changes something and as such you want a user behavior to trigger it mutations are not a thing that should be cached not a thing that should happen on a page load they're a thing that a user triggers or an event triggers to do the right behaviors trpc has this built in as a core piece of trpc's like base that has queries mutations and is starting to have subscriptions but mutations are half the bag with trpc because to be fair a lot of this comes from react query influence also the general idea of mutation versus query i think react query really does a good job of emphasizing why it's important to have these things be different where a query is a thing that happens when the use query hook is rendered a mutation is a thing that happens when a specific function is called so when i in react query use query that data starts fetching immediately unless i have a disable or something like that on it and then you get your loading state your data state your error state but when you want to mutate things so i click a button and it changes something you could have a query that's disabled until you click the button then it enables it then it fires things but i don't care i don't want to do all of that specifically i want to have a click trigger an action that might be asynchronous and keep track of the state from that so in this example mutation creates a new to do and it posts to axios what not to do when this mutation gets hit so the button here on click mutation.mutate and it calls it with the signature for that function and then mutation has a dot is loading a dot is error dot is success all of which are null until a mutation has been fired and if none of that is the case then we show the error of the success and then we always show the button we don't show it if it's loading but we show it otherwise mutations are so important like so so so important i don't get why so many of like like i i get this question a lot why react query instead of use swr swr is vercell's equivalent of react query it's what they're using for next swr endpoints it is very focused on data fetching and nothing else when the hook runs it gets some stuff that's by design that's their goal you use this to get data to your components that's about it they have some context of concept of middleware now this mutation section is not what it seems it lets you modify an existing key that you've already queried for so if you want to revalidate all the api user calls mutate lets you trigger them to refetch it mutates the cache it doesn't mutate it's not a mutation in the sense that you are firing a request that mutates something somewhere else there is no concept of a user-triggered async action in swr swr is a super minimal super simple way to fetch data in your components that is all it is swr might add a mutation cool it's not a core focus i don't think it's fair to say they'll have it eventually until they have it and it's good i'm very big on that in particular same reason with like trpc i don't say oh open api support will be a thing in the future it's kind of a thing now but it's not what you should be using it for it's not a goal of the project it's not the focus of what they're doing if you have a mostly static page that happens to be using next.js and you want to fetch things really simply swr is a good tool for that but as soon as you have interactions things where users are doing things and changing things and you're building an app not a static site swr stops being useful pretty quickly and react query catches up from there i as such am a little concerned about next swr endpoints betting a little too hard on swr because it doesn't provide a lot of the behaviors that i want the type safety from back to front for i want to be able to have a forum where a user fills out information and then clicks a button and then it fires the query this is very essential to full stack application development not necessarily full stack web development and full stack site development which is why i think it's not a focus for swr their belief is react query is too heavy because it has all these other things we just want to fetch data more ergonomically swr lets you do that by betting on that it has made a very simple and elegant solution here where i write query give it a validator give it an async func and now i can call use all people in my code i could expose use use some random stuff and in here instead of a name uh should return or should throw z dot boolean and in here if this shouldn't be user it should be input if input dot should throw throw new error i was told to throw else return they didn't throw and now when you call this here const should or did this throw query i'll just do that but not with result with use some random stuff which should be erroring right now because i require a z boolean here that's not optional if it changes z dot string whatever okay interesting is there a way to force you to pass a boolean or is this just there cool i misspelled should not a big deal but we'll fix that yeah this should be required zod doesn't this should be matched oh is it now type erroring interesting it wasn't before i don't know why that took so long so now should throw false and if this is false we'll get data back i should probably run this app but i'm lazy i'm not going to bother console.log data if we hover over this data it's string or undefined because it could be loading could be validating could be error and error is also a thing we get back it's typed any usually errors are any typed but it's cool that you can that easily define a hook and then call it so excalibur draw time there's a lot to dig into here i'm gonna close all these other things quick next swr end points oh you guys hate the light mode sorry i use light mode when i'm not streaming so i almost want to like move the sidebar to the other side so chat covers this stuff that you guys don't need to see and not what i'm talking about we'll figure that out in the future maybe i'll have a hotkey that swaps things around anyways let's talk about what is similar and different between these things not even sure if i like this format but we're going to try it i haven't thought i haven't thought through any of this i didn't know i was going to talk about this today until earlier is it mature enough to rant about that's actually a very good question adam probably not i am almost definitely doing this very prematurely but i'm doing that because vercell has been exceptional at listening to me lately and including me in the conversation and this is me half doing my part half poking the bear a bit because i think there are some opportunities to do incredible stuff here but there's also important compromises and differences that we should recognize and understand both like as application developers we should understand these compromises and also as just a fan of these technologies it's fun to talk about so that's what we're here to do we're talking about these things that i'm enjoying thinking about and talking about we're gonna do it here so simple way to define query hooks or data fetching endpoints as react hooks in next i'll send you the text for this i'm gonna have to maybe zoom out slightly i really should move my camera and make this a lot easier i would have thought that i'm not going to unthink it trpc is full stack type safe api definition syntax that allows a diff api library that allows any type script client to get to easily enter or i don't even know what word to put here to easily interface i guess so let's start with the similarities why did that choose a very boring font there we go uh we'll do excel i don't like this line here actually similarities both focused on full stack type safety both integrate with zod beautifully both use existing query hook libs for react swr react query both make theo very happy so i think these are probably the like core similarities that i want to focus on uh i guess there's one more i guess it's part of the type safety part of like both focus on full stack type safety in ts and v's so if you you're backing your front end or type script these are trying to solve the relationship problem between the two where you can call some back in code and know on the front end what it is consistently reliably without additional work on your end and here we get into the differences and here's where the line i'm not going to make the line just yet we'll start doing it the simple way uh only usable for fetch whereas trpc is built for queries mutations and subscriptions nexus wr built for next js trpc is built for any typescript project bindings exist for many frameworks and deployment methods i want to move all of these down slightly cool this probably should be a table i'll get there eventually uh next swr much less boilerplate and trpc i didn't want to do that that way i'm gonna yank that there we go much less real plate versus heavy ish boiler plate that allows more control of implementation and how do i put this part there's so many little things here that i'm like wanting to make sure i do fair to both sides how do i put this one nexus wr is very hooks first it's a way to define a hook that gets called on your back end hooks are a package built around react query for the react version or lib hooks first based on swr i guess that is a very important point to call out uh requires custom com compiler to recognize the swr like file syntax and do magic things for that in the next compiler whereas only needs ts compiler in strict mode so as long as you already have the typescript compiler in your project you can use tr pc probably because trpc doesn't have a code gen it doesn't have a custom compiler it is using typescript and most importantly letting you import your type script directly to your front end from your back end when you define this create react query hooks call here you pass it a generic type this type is imported from my back end so i'm using my back end type def here directly as the like definition for all of the hooks that i'm calling that is like the secret sauce that lets trpc work but more importantly it lets trpc work without a custom compiler it is using the type definitions in trpc and in your router if i right click go to definition here is my trpc router it gives you way more control of the like definition that your hooks come from but more importantly it is importing from your back end using typescript directly rather than compiling out a typedef really cool stuff i love how trpc does this even if the boilerplate is more heavy somebody in chat said that they feel like boilerplate gives them less control and i'm a bit confused by that because there's a very obvious compromise when you don't have the opportunity to hook into these different parts like boilerplate is moving code out of a library into your app so that you can make changes to it if you wanted to make a change to next swr you're in patch package hell and i've lived in patch package hell for long enough to be very happy i've never had to patch package trpc and probably never will because this is such a good compromise of control to flexibility and like ergonomics and i think the role of simplifying that is through things like create t3 app to be frank and create t3 app makes it a lot easier to have the boilerplate mostly correct with the best places to hook into it called out explicitly with comments we even have these fancy check out the trpc docs for inference helpers comments that make it so easy to explore this code base and do things mostly correctly mostly the first try which is awesome did trpc make this harder before to an extent yes but man now that there are so many good examples so many good boilerplates so many good ways to initialize a trpc project correctly i feel like the control you get from having these things in your code base is still valuable i also saw a few people mentioning that specifically next swr or sorry swr's mutations not only are like working in 2.0 but are being used by for cell themselves very exciting stuff hope to see that soon i am still concerned that that's a late addition and that it's not core to the package and the role of what's going on with swr can it be added sure but it's doubling the responsibilities of a package that has been very focused on one thing for a long time and it's it's a little yeah i don't know it feels weird to late add something that core to app dev it is almost like the distinguish the big difference between next sw sorry between swr and react query has been react queries the way to access modify and asynchronously via events or actions a user takes modify change and fetch different data whereas next swr and swr in general are how we fetch data as simply as possible using hooks i am very curious what the mutation patterns in swr look like and how much that increases the bundle size to ship so we'll definitely talk about that when we're a little closer to it the last piece here and it's only because i saw a few people asking about it uh still very very early being shipped by many in production including ping so of these i think this is the most solvable it sounds specifically because mutations are being added to swr that should make it possible to have mutations with next swr endpoints exciting stuff the custom compiler will never be able to not happen with the way this is being defined it's using a special file name people.swr.ts to tell the compiler hey you need to treat this file differently and do things with it that is super exciting i already plan on talking to some people who are working on swr from versailles don't worry we're all in the talks this is still super early to the point where probably shouldn't be talking about it this in depth and i was specifically told to call out that it's early you probably shouldn't ship it in prod yet because it is it literally got open sourced late last night it's super interesting uh yes for us this is them exploring what trpc biversell more tightly integrated with next would look like next swr endpoints i haven't shared the url for a minute so i'll share that in chat again quick twitch.tv there you go yeah this only has four commits still very new ooh a link got fixed interesting that's the second uh contributor i also have a ton of faith in schniz he's one of the versailles employees that cares the most about type safety and getting these things right if anyone can make it happen he definitely can he also made fnm which is my current go-to node version manager i use this to manage my node version locally super useful little package it's a good bit faster and slightly more ergonomic than nvm i've been happy with it i used it for my most recent mac os setup cool stuff overall oh den on youtube asked did vercell pay for this stream uh yeah yeah i uh no i am pretty hard on versel when there are things that could be better and about half of this was me saying i am there's a long ways to go for swr endpoints but it's very exciting to see them diving in on type safety as an important thing to consider within next.js this is one of the most exciting repos i've seen come out of her cell recently and i really hope it doesn't end up like hyper where it just sits there and rots because there is an awesome opportunity to improve full stack development for all developers here really appreciate the work going on here really appreciate lee and swizz is and everybody else involved on the versailles side to get this out and let me talk about it and i guess debut it to the world because no one's really talked about it yet super exciting stuff though hype for the future of what's going on here quick break to thank subs run an ad and then go smoke for a bit uh just hit the add run button sorry people on twitch don't have a way to do that on youtube so you'll get a different experience whatever huge shout out to james craig for the donation on youtube he mentioned that you have not used trpc before but the seeking of types between server and client looks awesome yes you have no idea how awesome that awesome is it has made my life so much easier the first pr where i started moving ping over from uh type or from like stubbing out endpoints myself to trpc i deleted like 800 plus lines of code it is so much simpler it is so much smarter you catch bugs way faster you move way quicker and you don't think about endpoints and infra as much you think about the things you want to call and how you call them apparently we just hit a really exciting milestone so social blade that's past day where is the they have the number on here oh it's out of date i will i don't want to share my studio on youtube cuz apparently that's a bad thing uh analytics here's the live count view we did it we're over 20k guys nuts absolutely insane i had 8 000 subs last month 8 000 to 20 000 in a month absolutely insane the last 28 days 8 400 to 20 029 absolute insanity thank you all so much for the support for hanging out here on twitch and on youtube live for taking part in chat watching the videos sending them to your friends everything y'all do to support us here is super cool and appreciated and yeah y'all are the best it's surreal i just broke 10k on twitter just for 20k on youtube i twitch obviously is blowing up i just hit 7k followers there it looks like now that i can see the top again it is nuts i was told to refresh still the same number but yeah very good numbers i it's nuts i was joking on twitter but i am a tiny bit serious that i'm a little jealous that i don't get to watch this content the same way y'all do i i'm making it but it's so cool to have known for a while that there is hunger for a more senior more technical type of content that i wasn't seeing i was told by many even that senior devs and more technical people don't watch youtube they read blog posts and they write code and i didn't believe that for a [ __ ] minute because i'm a total youtube dj i spend so much time watching youtube while i'm working while i'm doing other things and it it is essential to my my workflows and the things i care about and i was tired of not seeing people talking about the things i wanted to talk about in the places where i hung out and on the platforms i watched and consumed things from and i love that i have taken all these people who watched youtube and were devs but didn't necessarily let the two overlap that much because the dev content was junior or hard to watch and they would watch other things i still honestly think i have more like ludwig fans in my audience than like jonathan blow fans and i actually let's pull that i'm so curious uh pull who do you like more i don't say like who do you watch more content from ludwig j blow neither tbh i am genuinely so curious i want to see if this proves my theory or not uh thank you alejo for the five gift subs you appreciate you eventually being for the bits and and langerdev for the sub as well y'all are the best thank you guys so much i can't click the poll because of the gift subs oh god youtube or twitch there's no way for me to look at my poll until that goes away you know if you guys really want to troll me you could keep gifting so i can't see my own poll ah i'm okay with these numbers honestly wesley taking me up on the the gift oh now i can't see it here though that's annoying oh of you all huh there we go now i can see everything well thank you so much for the 10 gift subs super appreciate that wesley you all are the [ __ ] best if you just got gifted a sub make sure you join the discord dot gg slash discord you can chat for free or you can join the uh sub channel that's just for subscribers and you just had your ticket paid for so you get in for free for a month definitely take advantage of that really cool place to hang out level five hype train what the hell you guys are insane bean squad with the additional five gifted god damn thank you guys so much how's the poll doing i like these numbers a lot i like that four times my viewers watch ludwig over j blow and i'm cool with most of you watching neither which is totally fine i would not recommend j blow avoid him not a big fan ludwig's kind of cool i watch a lot of his stuff he he's very business-minded around his way of doing content creation and i've learned a lot from him but also learned way more from his interactions with creators like mr beast who are much more focused on the the top tier of how do i explain mr beast's way of doing things he's a lunatic he wants to push as hard as he can as far as he can and won't put out a video if it's not as good as his last one the uh the mr beast question that blew my mind somebody asked him hey mr beast i have never watched one of your videos before what should i start with to which mr beast replied my most recent video if it wasn't my best one i wouldn't have released it and that just melted my brain thank you olengo and the anonymous gifter with the additional five subs both of you guys gifting means a ton and even more people just got on the discord for free so definitely join if you haven't already and make sure you take advantage of that new channel or not new channel the the channel you newly have access to y'all are the best thank you all so much to quickly answer the why not jonathan blow question he doesn't think women should be programmers he also doesn't believe in kovid he is a lunatic he doesn't live in rational reality so just don't engage with him he is harmful actively and useless and should not be treated as a meaningful influencer or respectable in any way shape or form he should be ignored so yeah very nice seeing that way more if you like ludwig than j blow sorry for ruining ruining jonathan for a bunch of y'all but google search jonathan blow controversy you're going to find a bunch of stuff why is he popular he's well spoken he made one game that was really popular in the early indie days okay i'll be more frank braid on the xbox 360 live arcade was a very big deal for indie game developers and development as a whole it enabled a whole new type of developer to find success making games the braid will raise the bar for both the recognition of indie games and the quality that we expect from them for the next seven years he's just [ __ ] posted and then he made a kind of jank kind of cool conceptual game called the witness where you solve like maze type puzzles in a pseudo-open world it's like a first person walking simulator that you walk up to a board and you drag a solution on it it's weird has some cool hidden puzzles within it but it's it feels unfinished very much so and has this weird worshipping group of people who just they love it because they don't understand it and they think it's cool to not understand things he's an abstract artist without the art and with really bad core beliefs that happens to be a programmer so yeah ignore jblo i'm sure some of these clips are going to make it his way and he's going to talk mad [ __ ] about me but i'm a web developer that doesn't know what he's talking about all javascript devs are bad and should stop talking cool [ __ ] off j blow i don't care yeah sorry for ruining that for a bunch of people but uh it is what he is it is what it is i think i get more viewers than him now which is a relief yeah i hate doing callouts like this because honestly one of the most surprising things for me has been the other people making engineering content for the most part are [ __ ] awesome people the vast majority of the other developers making content that i interact with like i see i saw trash devin here primogen was here earlier melky raided me earlier jacob's in here there are so many awesome developers making content that are here for the right reasons that actually care and actually want to make awesome content to make software better and i didn't expect that because when i joined even before i joined when i was from the outside i did not think i was going to dig the other people making content there's i don't want to call too many other people but like the j blows and the people who worshipped him that seemed like the standard that seemed like what i was going into but there was also benawad who's [ __ ] awesome i love ben and i have always been impressed with how useful his content has been and how level-headed he has been with it sure he trolls a bunch but man i think he makes good recommendations and pushes people in the right direction huge shout out to ben hugh shout out to everybody else i just listed feels like the right people are making content right now which is cool because i don't know if i talk about this enough making content [ __ ] sucks this [ __ ] is so hard and so tiring and so frustrating for such dumb reasons nobody makes content just for fun and sticks with it you only stick with this because you care and the reasons you care need to be bigger than the reasons it sucks before the reason people cared was they were egotistical [ __ ] that wanted to feel good about their beliefs honestly i'm probably kind of that but on the other hand it is such an awesome opportunity to share the things you care about with others who do and to get that passion out of you and i have very much gotten that from my content from my community from all of these types of conversations so thank you all for proving me right that there was a demand for content by people who care in a space famous for people not giving a [ __ ] that being software also huge shout out to alex dunlop for the additional five gift subs which pushed us over level five hype train absolutely nuts y'all are insane thank you guys so so much so cool what do we talk about next i see people saying i should bring ben on yeah i should bring ben on i really need to i need a good thing to talk with him about we'll figure it out eventually next week i'm gonna have hopefully dkp david k piano the developer behind xstate on finally so we can talk about use effect because he did a new version of the use effect stuff the remix type pr got merged link please link i need to see that also i've heard so much about this game i saw one friend start to play it i really need to play this uh cool i am signed in on steam i'm gonna add this to my wish list so i could buy it later or not even buy just install it later and play super excited to check that out theo plays i if i was to do game streams i would probably do it on a different channel at this point honestly i i like the vods here being very technical play outer wilds i can't play outer wilds on stream if anybody else here wants to play outer wilds on stream for the first time make sure you let me know in the discord when you do that because there are a few things i enjoy more in life than watching people play outer wilds for the first time it is so good it is one of my favorite outer wilds is a game you can only play once but you will you will think about it for a long time after so yeah play our wilds if you haven't let me know if you do especially if you're doing it live so i can watch let's take a look at this remix pr well first let me go change my title on restream so remix is type safe now rip trpc perfect new title i am honestly surprised this got merged i thought this would i mean this took a while but i thought it would take even longer yes clickbait as [ __ ] this is my job maple this is why i'm blowing up i got better at clickbaiting cool so let's take a look here i should probably start with the issue because this issue was a lot i like how my hair looks right now i basically went straight from shower to stream so i'm much more a mess than usual but whatever the content is still good shout out matt for getting me to start early and also making the content very good anyways this is the issue that started which was requesting generics for loaders and actions and meta functions as well in uh remix the request specifically is when you have a loader in remix i should probably show a remix project do i have one now just find an example on their site cool so right here if i have this loader function that returns get projects if this was a typed function that has like message colon string and then i call that in the component with use loader data this loader data doesn't know the type of what you returned here so you have to manually define the type here and the worst part is use loader data didn't take a generic so you couldn't pass it a type right here and have that get honored by your like type safety and fetching and whatnot like you would not have a type safe projects from call and use loader data unless you wrote your own solutions around it mabel please correct me if i'm wrong about this not taking a generic before i'm almost positive it didn't i know that because people specifically wrote uh uh share your gist at some point if you can uh so i can show your stuff that you made before if there was a generic it was useless but for the data not the function interesting so you had to give it the data shade you had to write out the data shape yourself there that's annoying yeah what the new syntax allows is for you to pass the type of loader to loader data so the type gets inferred off of the response that you write in here when you write json hello data that can now have a type inferred off of it mabel just linked their original version of this that was really good where you could here's an example loader it's a request you have to manually give it a type of like data function args that came from remix actually and called a helper that they wrote json typed which was a wrapper to the json call that gives you these new type definitions that you could then type of and use loader data which was the typed version so they wrote all of these helpers that wrapped the core remix definitions to give you the ability to infer this i'm actually curious how much this overlaps with the solution they ended up going with but the json typed was an incredibly helpful wrapper uh one of the cool sub pieces is json value where they wrote all the different types that a json can safely encode and json type requires every sub key to be of a json value and that i mean i guess this is the thing that makes it recursive but this allows you to get a type error if you pass it something that can't be serialized as json so this was super cool they have a okay maple just said a very interesting thing their stuff restricts you to json serializables they have a mega type that tries to convert from a non-serializable to what they should be at run time yeah very scary interesting i it's only 200 lines of code let's read it oh yep this looks familiar interesting oh god oh god i you all know how i feel about ternaries i want to [ __ ] puke right now god sorry just give me a sec to recover guys anyways i think we were reading code we should read other code though this is all helpers oh god if they're adding an is equal i'm scared interesting this again looks very familiar where that function and primitive are in this one very interesting i i am intrigued uh matt just made a really good point which is turning ternaries are the only way to express if else in typescript which sounds like a design failure that should be addressed because this level of nested ternary does nothing but cause headaches i i hate this so much like i like that it's broken down to be question mark colon question mark colon so it's like a really weird syntax for a switch statement but typescript should probably have their own switch and if boolean logic if this is something that's going to happen yeah i hate that but it seems like it's merged and it seems like it works so i'm excited to play with it okay so this work with use action data yes good stuff any other important points in this discussion because there's a lot here this is such a change of tone from them i uh do i need to go find the kent tweet i don't want to but this is this is ryan making fun of himself i'm gonna go find it uh i need to remember what alex okay alex.js so we went from this this assertion that you need run time checks to have an end-to-end type safe boundary to well actually a solar flare could hit the server and flip a bit on the way to the loader to the browser this is why i don't comment on old remix stuff this is why i don't watch remix videos that are more than a month old this is why i don't engage with anything more than a few days recency in the remix community because they flip so hard and then pretend they didn't and then get mad at me for not being up to date with the most recent shift in their opinion that they never communicated so yeah anyways this is a lot i don't feel like reading through all of this i just checked the latest comment i added in eyes they'll know i'm lurking i'm sure they knew it anyways yeah if remix did more of these things right and would be much better about their communication i'd be way more interested but like it's this [ __ ] that makes it hard for me to approach these things in good faith like i want remix to be good it is good at a lot of things and i want to be able to talk about it and have conversations with the maintainers and be a little harsh about things that don't work and be heard and not made fun of and this community in particular has done the opposite of that and i've been surprised at how many people have jumped on our board instead just because we're no [ __ ] here we talk [ __ ] about what works and what doesn't and it's important to do that i even have a video where i basically recommend graphql over to your pc for a bunch of use cases because it's important to acknowledge where the the boundaries of what you build do and don't work and the remix guys have been uniquely bad at that and it's been frustrating as hell that said they're getting better about it their opinions are shifting their comms are improving overall like the most recent ryan florence talk was phenomenal did a great job of acknowledging what isn't isn't working and what they want to do differently but they're i'm excited for them to learn improve and make meaningful impact like remix has already improved all of the react community and help javascript as a whole arguably too do better and it's encouraged us to think more about our loading patterns where data comes from and how that renders on a page all of that said you can do that without being quite so annoying on twitter so i've said my piece i'm excited for type save remix i did not know that was coming that hot uh has that been released since that was merged is that in the newest version or do i have to wait for a new release oh merged hours ago oh boy very convenient timing lined up perfectly with the stream actually thank you for letting us jump on this for content i might have to rush that video out how are you doing with subs not bad anyways thank you michael marucci for the sub i'm like 15 minutes late on that thanks but i appreciate it immensely did i say that right when you sent your first message i appreciate that a lot also that you subbed 15 minutes ago before you even wrote your first message y'all are the best love you guys so much 15 minutes late and commenting no i'm way later than that man hush good to have you here happy that i was able to catch the europeans for once i bet honestly that might be why the viewership was so much crazier this time since i stream late like my demographics for the stream uh i'm gonna not share things i'm not supposed to probably got a flash of it whatever i'm making okay money but what i want is the demographics for my audience i shared this once before top geographics here we go so this is the countries that make up the most of my viewership split up by percent and i did not expect india and brazil to be this high but i am hyped because so many of my favorite devs i have ever worked with are from india and brazil y'all are the [ __ ] best you all work way harder than us stupid americans i found almost always and having all here is huge i yeah where's argentina you are the argentinian in representation oh there's 5196 views from argentina that's rad all of the countries all the places y'all are coming from i appreciate you immensely i was just calling out these two because of my personal experiences and how they signify that i'm doing something right so i am very hyped on that what's the least egypt i might know the egypt viewers actually i think i know who that might be yeah this was so cool to see though i still can't believe less than 20 of my viewership is america that is so cool like i don't know why i assumed otherwise but this is not a not a us channel or content like we're global as hell and i appreciate y'all so much for it thank you guys also wesley with the tier 3 sub thank you so much for that enjoy the new channel show you the whole list this is the whole list this is the whole thing i'm not hiding anything here the yearly yearly's gonna be useful or useless for my channel yeah very interesting cool i can export from top 500. i don't even know how to export so i've hit the download button that's dumb disinterested i don't care that much honestly it's cool to look at the metrics but it's not that cool back to chat that's not twitch data that's youtube data twitch doesn't have data i'll open up my twitch stuff here there's nothing in here that matters uh here's all the subs i have 818 subs nuts we're gonna break a thousand soon which is good [ __ ] y'all are insane but if we go to the like insights here you can see how much money i'm making on twitch you can see the categories people watch people find me looking for vtuber i should add that tag and keep my v tuber up more i like that idea uh stream summary this isn't gonna like there isn't gonna be demographic info that's meaningful here sadly i wish there was but there isn't uh the somebody wanted to see age demographics i can show those quick let me show just myself so i don't leak things i shouldn't in studio analytics audience here you go here's your age and gender split this is probably the one i'm most disappointed about specifically the gender split like i get it i understand it i'm still a little sad about it i hope to make the difference up in other places by doing whatever i can to help with the awful gender gap in software but yeah beyond that pretty happy with these numbers specifically that so much of my audience is 25 to 34 and so much of it is older this was very surprising to me there are a lot of older people watching on youtube it's against cos to show youtube revenue yes not twitch revenue i can show whatever i want on twitch i don't think they care youtube it's very against the rules so yeah youtube is male i honestly dominated but it's definitely a majority not a heavy majority but from the channels i've seen it definitely leans mail overall but there are ways to balance that out and i'm not doing that at the moment so i really need to find that balance and see if i don't need to but i would like to i want to make sure i'm not doing anything to discourage people who aren't [ __ ] dudes and bros from wanting to hang out so definitely something i think about and the handful of women in the community i love you all immensely i yeah you all know who you are there's like four of you and i do my best to chat with you all as much as i can cause you kick ass good to have y'all here also james thank you for the donation really appreciate it you're on like three or four the stream super super generous appreciate it immensely the uh he donated to specifically say that the it's not just me that this demographic problem is pretty common on youtube absolutely agree but it's still something i care enough about that i want to like make a difference if i can so i'll be doing that i do need to bring on more women as guests that's a really good point actually i yeah that's a very good point i should go out of my way to balance out the demographics of the guests i bring on thank you for saying that as as dumb as that message might seem it's actually a really good point and i need to get better about that cassidy williams could be very fun uh i don't know if i would direct connect but i'll hit her up there's a few other people i have in mind might not be the the biggest names but they're names that i care a lot about that i think deserve more respect so cassidy would be the huge one like obviously if we could have cassidy on the show that'd be huge and i would immediately take the opportunity but i don't want to like ride somebody else's success on my channel i want to have conversations that wouldn't have happened otherwise if she's down i am down but i don't want to like clout shark do content with her just to change the demographics of my audience and grow i just want to make things that make conversations happen that wouldn't have otherwise and yeah i won't kill you for saying tick tock dev appreciate that call out i should probably do more tick tock stuff to help with the demographic the problem there is tick tock tends to be much more junior developers in junior content as a result honestly prime cassido would be the that would be such a good dynamic i would love every second of watching that uh yeah uh corrine you're right it is or carl you're right it is normal that more guests would be men because the industry is more men but that doesn't mean we shouldn't be putting effort in to flip it to try and change that dynamic like the way it gets better isn't by acknowledging what it isn't just by acknowledging what it is it's by putting the effort into flip it however you can and i need to do more of that oh muse here mew you should come on the show if you're down no pressure but i would love to do some content with you i've been keeping an eye on the stuff you've been doing for a while i'm very hyped with your content and would definitely love to collab in the future if you're down i also saw somebody asked to change the topic to something i should probably talk about more somebody asked about a ping demo i should probably do ping demos a bit more i plan on putting out some more youtube content soon about ping i yeah we have some really cool stuff that i've been working on i could show that quickly why not so here's a new feature i've been working on at ping so i'm on my laptop right now different camera from the computer one it it looks way more red both because it doesn't have my color correction and it's on a crappier camera but more so because my laptop's hdr and my capture card is not so it's doing the colors very incorrect whatever the tl dr on ping ping.gg is we make it as easy as possible to do professional collaborations inside of obs directly so rather than calling in obs or calling them in discord or zoom screen capturing the window throwing that in obs with like weird like window capture stuff cropping it capturing the audio with other software and doing all this chaotic stuff to try and bring my guest into my show just to have a second person join changes the angle of the crop and the whole stream falls apart all gone we wanted to erase all those problems and make it as easy as possible to copy paste the guest from ping to obs directly so how does it work well the core piece we're actually changing it so this isn't how it works normally i have a differently configured room but i kind of want to spoil this new feature for people because i need a clip of it anyways we have a new feature coming soon called slots i'm going to just delete all of my old ones for now i want to emphasize this is very early this is very jank we are very aware this is a future thing that we are currently working on and i have it on in my room because i dog food everything it doesn't even seem to work on the screen size which is good to know that 720p is too small for it so here is a slot i'll name this guest slot this slot has a custom url that i can go send to my obs trying to think the easiest way to send this to myself honestly i'm just gonna hide the screen share for a sec and type it because i don't have i need an easy way to copy paste between my computers but i am dumb and lazy so let's ping dot gg slash cool i actually went out of my way to make these typable not going to discord dm myself because i'm not going to open discord on the computer that i'm screen sharing ever if i can avoid it so what i'm going to do now that i have this copied over is go back to my screen share and i'm going to add a new browser source in obs i should probably capture this part yeah let's capture this part so instead of window capture i'm going to do display capture really quick oh no you guys can see stats that don't actually matter now you can see the window that i want you to see it's gonna recurse infinitely whatever that needs to be much lower in here so here's my obs setup i wish i could hide the preview more easily but i'm don't look at anything but this bottom section for now honestly what i can do is just cover this other section no that's not going to work never mind so ignore all the chaos going on here pages of this bottom section because i'm going to add a browser source and i'm going to paste this url from ping i'm going to put in a resolution we'll do 1920 1080. so this full screen and now i have a browser source here i'm going to remove the display capture and i'm actually going to move this over to the screen cap so it's back in the obs scene that i was in so in here i now have a browser source from ping but there's nothing here that's because there's no guest here but if i add myself and save i suddenly pop up in obs because that browser source is a custom url that lets me put somebody else into my content directly just via copy paste i copy this url i pasted in obs and now i have myself there i can quickly add and remove remove and now i disappear add and now i reappear directly from inside of ping actual magic makes my life as a creator especially as a creator who brings guests on the show so much easier and this ability to add and remove is a total game changer because in obs i can set one url put it in one place never think about it again and now when i bring a new guest on quickly add them to the slot or remove them from the slot and i'm done now they're a guest in the show it took me literally 15 seconds to set up today when matt joined my collin ping so magical i am genuinely really hyped about the workflows we're enabling through a single url so if you want to bring guests on your show ping is without question the best way to do that right now especially if you're already bought into obs if you're using something like streamyard cool it's great in the same way that wix is great streamyard makes it really easy to in the browser go live for the first time i have never seen a streamyard stream with more than 50 viewers live it is a great way to do your first ever show and to the stream if you don't know what streaming is yet but it is not for professionals and it's funny they put professional in that now because they didn't used to say that that's a new change clearly they're a little scared of a new competitor in the space that is a little more focused on professionals weird how that works stream yard is wix previously there was a lot of aws's we had all of the uh what's it called um like there's companies like vmix and i god i love vmix they make my job so much easier because this looks like an ad i would have seen in staples in the mid 2000s this is hilarious how out of date this product is how it expects every user to install all sorts of crazy jank software on their computer and doesn't integrate with anything but it is the option that a lot of creators have been using because it is the only way to get high quality video from a to b we're the first compromise this is the aws of the space stream yard is the wicks of the space i think there's room for an in-between of wix and squarespace sorry of wix and of aws of squarespace and aws wix is like squarespace is another crappy site builder so if you don't know anything that we talk about here wix is the easiest way to make a crappy website streamr is the easiest way to make a crappy stream aws is the hard way to make a good website vmix is the hard way to make a good stream versel and next js are the compromise where you can make a great site and own the hard parts without dealing with the annoying parts we are similarly that in between where you can use your tools you can bring obs you can bring xsplit you can bring your fancy camera [ __ ] you can bring your overlays you can bring all your stuff we are just a method to get the video part from somewhere else to your computer similar to vercell which doesn't have state doesn't have like custom build systems or most of the solutions that we used to expect from aws it takes your package json you point it at a github repo and it does the rest for you and it usually does it correct we are very aligned with that we want to take the wins we're seeing in the software dev world to make it easier to compose professional solutions that fit your needs we want to be one of those composable pieces in the professional creators toolbox yeah there's a lot of discord screen capture streams i've also seen a ton of those we really need to make more content about how useful ping is i will probably clip a bunch of this section and post it on my youtube later uh it would be useful to have that around uh i've not talked too much about the investor stuff with ping it's not really a thing that is that you don't get much value talking about investor stuff unless you're looking for more investors and we're not right now we're in a pretty good spot but come series a in the future you'll be hearing me talk a lot more about our investor experience we're also y combinator company i don't know if you all know that but uh not what i was trying to do y combinator let's look at the companies list we are a y combinator company which means that we went through the same startup accelerator as twitch reddit airbnb stripe doordash so many other successful companies i was very excited to do y combinator i was unsure at first but they did a great job convincing me they gave us a decent bit of money and a very needed kick to push us forward and help us make awesome stuff if i'm announcing a new round it'll be everywhere don't worry you'll you'll hear about it life hunt i'll be sure that you hear about it do somebody ask a vitoria specifically do i make a lot of money as a ceo no i make the least money i've ever made right now i'm making slightly i'm close to making more on twitch and youtube than i am as a ceo right now but in the future if we sell or we go public or anything else happens i'll be doing pretty well but being a ceo of a startup means giving up a lot of the luxuries we expect as developers with developer salaries i don't have i have stable-ish insurance now but that was so much work i didn't have a salary for a while i sold a bunch of my amazon stock and threw away my 500 400 plus thousand dollar a year salary in order to make this happen because i thought not making as much money for four years but building a company that i care a lot about if it succeeds i'll make way more that i would have working at other companies and if it fails i'll still be more fulfilled what stack do i use for ping oh you all must be new uh good all in it tips i also love i changed this to create t3 app but uh all the things that are in create t3 app are what we're using at ping it has made life much easier as maple said that is rails brain [ __ ] and a whole bunch of ember js makes us super successful our twitch star is using it i don't know what you mean by twitch stars but yeah we have a lot of really awesome creators linus tech tips has been using us for all their remote collab stuff iron mouse and all of the shojo have been using us for a while now v shojo's been doing some really cool stuff they uh they went to anime expo last week and over the weekend and they had vertical tvs next to people sitting at panels so they could have a youtuber and a uh let me find our twitter so i can show examples of this they would put like a real-life person and a v tuber next to each other and this was using ping so iron mouse was calling in here with ping and conor was there in person and due to how lower latencies and how high the quality is this could be a natural conversation where they like catch each other's pauses and like interject and jump in it was so cool having them push the limits of what our tech can do having multiple youtubers on tvs on the stage having uh we built them a custom ipad app that allowed them to bring talent out in the real world from uh paying directly like this is iron mouse who is sadly enough not really able to leave her apartment she's suffering from some really bad immunodeficiency disorders and is largely bedridden so this is her first time being able to like go out to dinner with friends and pings enabling that i went a little ham hacking this app out two weeks ago because i knew they would get a lot from it it has been so exciting to see them using it uh massmer pointed out that they don't see these shows or talking about us too much that's because i haven't asked we're getting a lot out of them on so many levels and they help us so much in other ways like they're they got us to v show joe they've helped us do so many cool things and iron mouse is incredible all of the talent every show has been so awesome to work with i know the moment i ask hey can you have iron mask retweet this or hey can you guys signal boost this thing they're down to do it but i haven't pushed that because i we're focused more on building good faith than recognition right now i want every creator who uses ping to [ __ ] love it and whatever it takes to do that is what it takes to do that i don't necessarily need iron mouse or v shojo to tell all of their viewers about ping but when they're talking to their friends when they're collaborating with their other streamers and people in that world i want them to have nothing but positive [ __ ] to say about ping and we're going to go so out of our way to make sure that's the case nara is actually asked a really good question uh to the person joining they just need a browser like joining google hangout exactly i actually modeled most of the ux for the call in experience around google meet directly because i think google meet has the simplest you click a link and then you're in flow so our goal is to make it for a guest as simple as google meet but for a professional streamer as integrated and modular as tools that we use as developers i wanted to unixify the video pipe for the creators while providing a super simple experience for the guests i should be marketing ping more yeah we're working on that we have some fun plans i need to do more content on it honestly i think that's the big missing piece is i need to be on youtube talking about paying way more yeah the tv panels were using ping and all of the exam pretty much everything that involved a v tuber on a screen that v shoujo has done for the past year has been on ping it's been really cool yeah i need to do more tutorials i need to do more content about paying generally also very excited to talk about xstate so somebody just mentioned that in chat we have dkp david k the creator of xstate and stately coming on next week so make sure you're here wednesday next week if you want to talk all about xstate and use effect and how i think his talk was not the best wow we made it this long until a spam message from the youtube bots i'm impressed normally they get normal this happens a lot quicker cool i really hate that if you report one of their comments as spam it doesn't kill all of them it's really dumb cool handled youtube spam any percent well i it would actually be really fun to see how quickly you could get youtube spammers to show up in your youtube chat if you were to make a new channel yes i talked about bun thank you alejo so much for stopping by really appreciate it and again for all the gift subs too it's been insane i should probably take a quick water and smoke break i if y'all have a topic idea chat amongst yourselves when i'm back in two to three minutes i'm expecting you guys to have one or two very solid topics for me to jump on i want to get one or two more rants out mui's definitely one of the like top picks but i'll let you all talk amongst yourselves and figure out what we're talking about when i'm back you have two or three minutes to figure it out uh let me get my b or b up y'all figure your stuff out i'll be right back uh i'll clear that one up quick i actually dislike ness or nest js it's not good anyways what have i missed y'all what is our decision actually correction i got some good news and some bad news the good news is you'll have more time to decide the bad news is that's because i'm overriding y'all i have a topic i want to talk about this one's a little different keep deciding though i will do more programming talk in a bit because i'm gonna do a stream i've been thinking about or topic i've been thinking about and not doing for way too long thank you again for the donations james we need to get you on to twitch chat uh the bun talk was earlier the vod will still be on youtube don't worry make sure you watch that later also youtube folks twitch folks that have youtube premium if you can download the vod on twitch when it's up hitting a little download button on the youtube app counts as a full play of like a four to six hour video which helps the algorithm a ton helps my revenue a ton and is just generally a good thing to do so if you have other creators you support do that for them as well it helps a ton also shout out chris bradley for the sub shout out aoch tv for the sub think i missed that one y'all are the best appreciate y'all immensely so what are we talking about let me go change my title first how did i get so popular on yt and twitch let me just put the whole thing no we're talking about the creator funnel aka how i blew up on twitch and this now that should be large and a separate and youtube subtext so this video is going to hopefully be very useful so i'm going to do a thing i don't do much i try to not do this as much because i love having y'all on chat but i am hiding it for this because this is gonna be if all goes well an important video uh if i go to this view and just hide overlay for now yeah that'll be the easiest thing cool so how did i get so popular on youtube what did that what worked i want to take a step back and think about where viewers come from and how they engage with content i like to think of this as a funnel they're a transform flip horizontal perfect it'll actually be symmetrical this creator funnel i i don't even know if creator funnel is the right word i almost think viewer funnel yeah i'm going to call it the viewer funnel so what is this funnel and how do we think about it this funnel is the process in which a person discovers your content engages with your content and becomes a fan so this first level i don't know what i did there and delete i'll try this again this first level we're going to call this discovery this is how people find you people making good content doesn't just make you exist finding good content or making good content gives people a thing to do when they find you but we need to figure out where they came from first the next stage is engagement this is when the viewers start i actually i'm going to call this familiarity this is when people have become familiar with you and your content and they are more likely to engage because of that then this final section which is engagement i'll say and monetization or end money to make it nice and easy so what are these parts and how do they work discovery is particularly interesting because it requires viewers to [Music] look at more than one thing from more than one creator if you think about twitch viewership how many twitch streams are you guys going to watch today just say the number in chat between 1 10 how many like how many twitch streams do you expect to watch today drop a number in chat seen a lot of ones and twos a couple i saw one five and one six but it looks like mostly ones with the occasional two super useful now for those who are on twitter how many different people's tweets do you think you're gonna see the next time you open twitter a billion twenty two hundred hundred plus hundreds maybe thousands yeah it's a whole different world so when i'm on twitter i engage with lots of people so the key to discovery is places where number of creators engaged per session is higher so the places where you discovered tend to be the places where the number of creators you engage with in a session is highest so that's places like i'm gonna give a different text color twitter tick tock instagram reels these are platforms where when you're using these things you engage with a large number of creators in one session where if you're on twitter you might see hundreds of different people tweeting if you're on tick tock you might scroll through 50 different creators in a 10-minute session on instagram reels it's very similar so these are places where the content tends to be shorter tends to be hookier trying to reel you in and it's also generally less effort on the creator side to make pieces of content for these platforms because the content that blows up is the content that is the quickest to hook not the content that is necessarily the best or the strongest design i think we are talking a lot about a short form content revolution right now there's this idea that short form is going to kill long-form content i don't think that's what it does i think tik-tok is competing less with youtube and more with twitter it's the thing you quickly scroll through aimlessly to discover stuff reddit's an interesting one i think reddit probably fits within discovery this next category familiarity is something i [Music] think a lot about familiarity is places where people can deepen i don't know how i would wear this familiarity is less creators per session more likely based on knowing them so the things that make a platform that strengthens familiarity are usually more competition in the viewer experience for the creators so youtube really stands out here because when i go to youtube i'll even go to it on my computer right now here's a bunch of different creators doing different thumbnails trying desperately to get our attention finally in prison bun first look fire in the background and [ __ ] these thumbnails are designed to get our attention oh i need to talk to these guys because they need to be using things so i'm adding that not to my cue to my watch later so i don't forget about that sorry just doing my job all of these thumbnails have the goal of getting my attention so i'm more likely to click and then the video's goal is to keep me focused long enough to watch the whole thing it's not just click bait because click bait alone isn't enough if you get somebody to click a video because they're expecting one thing it ends up being something else that click bait will fail and youtube will derank the video because people aren't watching it after they click on it and that's a bad viewer experience so good click bait helps but good clickbait does not guarantee you're gonna succeed my clickbait got a lot better and it helped but that had to come after my content being good sorry quick water break so youtube is interesting because i might see 30 different creators here but i'm not going to watch any of these videos right now i might save a few and watch them later but there's a lot more competition for that because of the difference between discovery here which is pretty light and competitive it's like i'm seeing these names but i'm not going to really discover the creator here but i'm already familiar with them and or the thing that they're talking about in the thumbnail i'm more likely to engage with it and this is an important thing to recognize about this funnel is there a way for me to have a two-sided arrow i always forget is as you go down the funnel there's more money but as you go up the funnel there's more people so as a creator it's your goal to get people where they are and pull them down your funnel because on youtube there is ad revenue and that's a way to make money it's a way to make a decent bit of money even if you're winning in the competition but the real money exists in the places where the most engagement is where there isn't a a discovery experience the twitch is the only fans the patreons i think twitch is more like only fans than it is like tick tock or youtube and i think this is a mistake twitch constantly makes as they are deciding on things as a company is they keep pretending that they are a youtube or a tick tock but in reality twitch isn't only fans people don't start their twitch session on twitch.tv they start because they got a notification that there's a channel they want to watch that's live or they saw it on twitter or they just sought to check and they type in twitch.tv the channel they want to watch and they go watch it sessions on twitch don't start on the home page they start on a creator and you have to get that created that viewer to come to you as a creator they don't come from twitch they come from other places everybody here in the twitch chat right now i'm gonna do a poll quick because i am pretty confident in this poll how did you find me twitter youtube twitch discovery front page cat like twitch category fp so like did you get recommended me cool or collab with another creator so it's like the primogen collab or some other like video i did with somebody is how you found me put that there then other let's see what this looks like because if my assertion is correct this one the twitch category should be pretty close to the smallest i'd be surprised and to be fair it'll be higher for me than most because i'm regularly at the top of the software dev category now so if you are checking the category i am going to be there what we're gonna see here is a lot more youtube than anything else because i won at that layer i did a really good job of fighting my ass off to make good enough content to be able to get things from youtube and to get the discovery there but the important thing to recognize here is i brought you here from youtube i didn't find you on twitch and this is the chart this is the numbers twitch consistently fails to acknowledge you don't find my content from twitch almost ever there are lots of other places that you're more likely to discover my content from however i still make slightly more money on twitch than i do on youtube even though my youtube is comically bigger and i'm only streaming once or twice a week the reason for that is i have funneled you all to my twitch channel and you guys are engaged you guys are supportive you guys are going out of your way to be part of this community that's why you're here i gave the option to be closer to join the discord to join these other things and you guys took it where your biggest fans go this is your goal as a creator is to pull people into these places to find them where they are and bring them to where you are if you as a twitch streamer are not taking advantage of tick tock of twitter of youtube of these other platforms you aren't doing the work necessary to grow on twitch and when i hear people giving advice and like how to title your twitch stream so people will click it and stuff like that they just don't know what they're talking about it's it helps but it doesn't help much the viewers don't come from a good title on twitch they might for a good title and a thumbnail on youtube they definitely will if you get interest on twitter you build up hype that way and you get other people engaging with it that's actually one other piece i should include in here i want to figure out how i put it is the places where you can interact with other creators more easily like if i have a tweet that might be interesting to tanner i can tweet it and then in a reply say cc tanner linsley think he might like this and if he does he'll retweet it he'll signal boost he'll get my messages in more people's faces and expand the opportunity i have to funnel those people to the engaged channels that i have those platforms make it way easier for me to build those relationships even if twitter isn't necessarily how y'all found me it helped validate me a ton it helped me find others to collaborate with it was my back and forth [ __ ] posting with primogen on twitter that got me to do the primogen debate stream with him where he used ping and we got to chat and have a really fun convo and that definitely helped a ton with kickstarting my channel tom just said in chat and if y'all aren't following tom yet get on that he's making some awesome content i don't know if he streams yet but at the very least he's killing on youtube making awesome educational material around the t3 stack tom was doing content that filled a hole in the space i was creating that i wasn't filling he made the educational content i didn't and that i didn't want to and that's a great way to almost force me to collaborate with you and i want to be clear about this tom i didn't share your stuff out of just like good faith i want to be a nice guy and help others succeed like yes i did that and i do care but you basically forced me to because you made content my audience was asking for that i didn't want to make it's so cool that as creators we can take those opportunities a lot of my content was i was watching ryan carneato's streams and they were hard to watch because of the jank computer jake webcam and mike streamyard all that but the topics were really cool and i wanted to bring those to a bigger audience where i could have a deeper conversation about them so i took what i was learning from him and filled the hole that i didn't feel like it was filling you did the exact same thing tom and your success was earned by you by doing that if you notice holes in other people's funnels and you hook in there both people benefit and collaboration is such an important part of extending your funnel it basically just expands it you just make your funnel wider when you do collabs and that is always a great thing if you have the opportunity to do it so yeah if you're struggling on twitch if you're struggling only fans or patreon if you're trying to grow a community or like increase your success on these platforms start where the people are interact be involved be visible and then start engaging on platforms like youtube where you can when they see you they'll recognize you and be slightly more likely to click and from there funnel hard into the places where you can engage more deeply this is your job as a creator to find people here and drag them to the bottom of this funnel and if you can do this successfully you don't need to be a big streamer to make a lot of money you can make a full-time living like under 200 viewers if you're good at converting them and i've seen this from a handful of creators i was talking to people at vidcon that i am way more successful than and i'm making way less money then and then i would talk to other creators even in this space like primogen where he has way more viewership than me and he's making a decent bit less than me off the channels like your ability to drag people through this funnel and recognize the roles of each part directly result in more success on your channel any questions because i know this is both a lot and a very different topic from what we normally do and i see my viewership being affected which is fine i expected that this isn't for y'all this is for a youtube video later but yeah would love your thoughts diogo rewind the vod like two hours we did the bungee s thing already ryan switched to obs and then took a vacation and now that he's back it still isn't m1 ready i'm happy you switched to obs i'm concerned that obs on mac still isn't a great thing it's getting there but it's not there just yet uh being a creator seems very stressful yeah it it is i'll be frank this shit's hard and it's stressful and it is really fun and worth it if you care enough and put the time in but it's not a it's harder than programming it feels weird to say that but it is like writing software is easier than some of the hard things that i do as a creator yeah and i care a lot about it you wanted to start uh with content creation around software development i so this is an important thing to recognize what this is if you want to get started with content creation why would you start here why would you start where there are no people i'm gonna move this actually can i unbind this i don't know how to like remove this from that arrow cool cool so if you're looking to get into content creation why would you start here there's no people here the best way to start as a creator is [ __ ] post on twitter reply to comments on tiktok maybe make reply tick tocks hang out on these other platforms where the people are to figure out what the people want what they like how to interact with them get your name out there get people to know who you are and from there do whatever i think that one of the values of in particular twitch is if you get your content funnel which is separate from your viewer funnel to a good place you can live stream on twitch cut the clips get those on youtube and then use the thing you're doing here to engage to also build familiarity a liar hire you can do a lot of really cool stuff you can do a lot of cool stuff and it doesn't matter if it's not in a place where people will see it and here you'll be seen here you'll be engaged with here you'll be listened to which is an interesting in-between that's super valuable but you gotta start at the top of the funnel and pull people down once you've done that for a bit stream wherever it doesn't matter that much i think twitch is really fun the chat culture's better the software dev category is in a really good place right now but it's changing it's changing fast and i wouldn't bet on any one way of things being for that reason alone it's all changing and i'd focus more on being where the people are than being on the the next hot platform or being ahead of the curve there is no ahead of the curve in creation and in content there is just the grind you got to be doing whatever you can do to pull people in if you're already on twitter then good [ __ ] yeah definitely stick with twitter you can multi-stream pretty easily i think youtube's a better place to start because there's actual discovery there twitch is a place to bring people when you have people to bring there how many people are gonna ask if i've talked about bun jesus christ oh what about having a blog blogs are very interesting i'd say a blog is definitely engagement but it has the ability to do things other places like the same way you can have a twitch vod that you clip do well on youtube you can take a blog post on your blog that's good and have it do well on hn or reddit so i think hn would be in the discovery section reddit would be between discovery and familiarity but a blog's not a way to be discovered at all a blog post being good and then being shared other places that can be a discovery method and it can be a familiarity thing too like if i see a post on hn from a url i recognize i'm slightly more likely to click on it but it's yeah blogs for seo no seo is not a big part of the creator funnel creators do not succeed from search engine optimization it's not a real thing that people get like blown up from google searches you might have one time where people happen to be searching a lot about a thing that you happen to have the keyword for but that's like a shot in a barrel that's entirely random it's not a real part of the creator funnel in particular the creator viewer funnel in particular it's interesting but it's very different start talking about blogs and instantly my viewers declined yep super real uh so you just double proved my point parasocial the you can go from zero views to something close to zero views through seo but the crazy thing here is if you blew up you would still be getting 0 to 50 views from seo that amount doesn't go up youtube views come from recommendations and if your content isn't being recommended that's a top of the funnel problem you don't solve that by having seo do well it's not a real way to make success happen x dates happening next week guys i have dkp coming on we're going to chat about it a bunch where does facebook fit in facebook is all over the place on this chart they don't know where they go facebook changes their mind about where they should be all the time even instagram like i specifically put instagram reels because this one sub product within instagram happens to be very discovery focused i want to talk about guest star uh i replied to that tweet uh i feel bad talking about it with staff in chat honestly i'm pretty pissed to be frank i uh replied to this one have the top reply thankfully but uh yeah there was some not great practice on twitch's side with that that i'm pretty upset about there's a i'll have more content about guest star in the future i'm just disappointed in how twitch decided to approach that one don't want to be too mean but yeah come in in the future ollie you can dm me you have my contact info sent me on twitter i'll give you a bunch more info why did trpc use zod when it's insanely slow compared to the others it's not insanely slow it's slightly bigger but more importantly it is very type safe there is no other form validator that has even a third the type safety and extensibility that odd has there's a reason we've all like centered around it as a web dev industry zod is the best way to validate data and have a type safe response for sure period type box oh yeah i've seen this yeah it's okay for json but you can do like min items can you do a minimum number nope yeah it doesn't have a lot of the like behaviors i would expect okay format email it has some this looks a lot heavier and it looks like you have to write the ajv and the type box both which i do not like also create t3 app has more stars just saying i know iots is really cool i should probably use this for more things it's not really like built for forms though it's generic encoding and decoding of json like zod isn't just for json zod is for validating javascript objects it's actually kind of jank for json it's really good for a lot of other things it is getting a little bit long for this stream i forgot that i started so early i was like wow it's only four o'clock and then i remembered i've been live since noon sorry got a ton of messages and emails and [ __ ] nothing too critical thankfully but tons of replies to [ __ ] sorry uh wow 5 a.m for some of you guys relay is very interesting i don't have too much to say on relay sadly it's a super cool project sadly it's not easy to consume the documentation sucks and a lot of [ __ ] has to be written for it to be viable but it's it's rough it's not particularly like easy to implement right now even though technically speaking is pretty cool uh i put my opal cam in a drawer because it was really bad uh don't the the lumina and the opal like the two cameras that are using software and ai and all [ __ ] they both suck software is not how you make a camera good cameras are how you make cameras good an old used gopro with an hdmi capture card looks a lot better than any of these cheap webcams that have been coming out not even cheap these expensive webcams that have been coming out generally speaking as sad as it is if a camera comes with a usb cord it's probably not good and it sucks even like good cameras that have usb support like some of the sony cameras now have the ability to plug into a computer via usb they still look like [ __ ] when you use hdmi instead and capture card it on like a cam link it looks a lot better the reason for that is it takes a decent bit of cpu to convert the raw frames a camera is doing into something that usb can take usually like an h.264 format so the 150 cam link might be a little cheaper now this guy 108 bucks i paid a lot more than that this guy has a pretty powerful cpu in it that's actually encoding the video going into it into an h264 format that your usb device can take over usb 3.0 that is one of the most important parts to have this succeed the lumina and the opal both have some amount of ai on the camera but even more so on your computer so they eat your cpu they fully saturate their usb 2.0 bands and the results just jank doesn't look very good and i am tired of them like it feels like everybody's trying to sell the promise of a webcam by attaching a bunch of buzzwords instead of just making a good [ __ ] camera and it's really annoying there's one avermedia camera that's like okay but it's not great somebody mentioned it's like getting a usb mic instead of an xlr one yes if the only usb mic on the market was the blue snowball and people kept rebranding the blue snowball i feel like the [ __ ] opal where is it i don't know what drawer i put it in here this [ __ ] thing right here is a 300 blue snowball but a camera equivalent it is so bad for the money the colors are wrong the ai is bad it looks really fancy like will it autofocus it probably won't my autofocus is [ __ ] because i have a cheap panasonic camera but like the camera i'm talking to you guys on right now that's a 300 panasonic 400 maybe when i bought it no more than 400 and i bought it six years ago i'm using a six-year-old 400 camera and it looks this good and this piece of [ __ ] [ __ ] 300 camera i got a few weeks ago looks comically worse it's just not viable parasocial mentioned sony and canon let you connect over usb if you're okay with 5 to 10 fps with a ton of frame pulling lag and it just looks like [ __ ] the built-in usb support on cameras is really bad like really bad yeah the there are no good usbc cams link one ork if you can link me a good usbc camera under 500 i will buy it right now and if it looks half as good as the camera i am talking to y'all on right now i will buy you one too and if it's not you paypal me double what it cost deal because there is no good usbc camera it does not exist you're just wrong a dedicated h.264 decoder would still require you to saturate a usb c like 10 gigabit band to get the data to the h264 encoder in the first place it you you need a level of cpu just to get the data to the h264 encoder but no sorry uh under 500 for is there a usbc camera that's over five hundred dollars there is no camera with a built-in cam link i want to be really specific about this in particular the cameras that have a usb port that you can plug into a computer that is the wrong way to use those cameras you should not use the usb port on any nice camera it will look like [ __ ] uh sony usb versus can link we'll just i spelled sony wrong here's a random comparison of the two i'm not gonna play the audio okay i guess i have to turn on the audio to hear some of it to see and it's on hd right now using this nice little car next we're going to cut over to show you what it looks like in usb usb that's directly off the camera now we're recording see how much more stuttery it is immediately it's also blurrier camera like immediately seeing the usb our goal is you can compare the resolution of the two versus using camlink4 seems like the hdmi is is better which it should be better because it's a higher resolution yep yeah the the universal there's no side to side because people who do this stuff don't know what they're talking about let's see if the sony they don't know how to do content i should specify this guy's actually cool i've seen a few vic's videos before does he have an actual side by side at any point why is nobody doing a side by side this one should have a good side by side hopefully no i mean the image is not bad for something that's less than 720p like this looks pretty good if you would have asked me to get oh well the sony cameras won't even do more than 720p i forgot about that yeah actually unusable actually unusable okay oh oh no yeah yeah the f mark yeah the fp is the closest it unfortunately sucks yeah there is there is no usb camera that is good you're just wrong i would love for you to prove me wrong but i'm not about to spend a thousand dollars plus on a sony camera that only does 720p over usb to prove you wrong especially when i have a 300 camera with 150 sorry now 100 cam link that works great fuji's usb [ __ ] is so bad it's not good i know a handful of people that have used it and have had really bad experiences oh look side by side you can see how stuttery it is my name is will where i do tech unboxing tech reviews and tech tutorials find the video helpful we have specs here on the fly without having to close the session so microphone plugged into plugged into your desktop in my case x driver now got changed this in your car it's very hard to tell them apart okay what do you have to say about video calls you just saw the free option probations in real time in your current video session and in terms of quality both the fuji x driver and elgato were the same it was very hard to tell them apart i don't believe you you need to post way more examples for me to believe you on that yeah this dude doesn't know what he's talking about okay uh here did cannon just kill the camera the conclusion of this video bringing it down to a 30 fps image uh keeps the maybe the pipeline from being clogged i'm assuming it's still no 60 fps and it's definitely not a perfect 30 fps but it is a much more usable image now we'll be using footage of the camera at 30fps in the rest of the video but i wanted to point out something yeah can't even use 60fps it's bad like if you buy a nice camera to use on your computer and you use the built-in usb processing you just wasted a bunch of money because a 300 camera with a 100 cam link looks better than a thousand dollar camera without a cam link that's just a fact period and it doesn't make sense for camera manufacturers to build in a cam link because they're expensive and not a lot of users want them as is the reality somebody wanted to find a cat give me a sec he was sleeping so you're disturbing him but good boy very good boy thank you bud sorry for disturbing you anyways someone asked opinions on astro on youtube it's good that cat's murphy he's the fat one the dumb ones outside don't feel like grabbing him right now i was going to do the mui rant but i'm pretty tired i might kill it yeah what are we at four and a half hours that's a long stream i'm tired yeah let's figure out who we're raiding not the category i wanted to go to start with a quick look lurk of the friends list let's rate somebody new we're reading the same people too much i need to stop doing that we are the top software game dev stream ooh bash bunny [ __ ] it bash bunny raid thank you guys all for the wonderful stream this one was nuts we were over like six to seven hundred viewers for a ton of it a bunch of awesome clips bunch of awesome content ton of fun coming to youtube soon thank you all again so much for stopping by this was a great show thank you for the subs thank you for the support thank you for everything see you guys maybe friday probably next week because we already got two streams this week so don't get greedy with it thanks again y'all see you guys soon wait is bash money rating me what no god damn it what [ __ ] no oh that's very unfortunate timing okay thanks bash bunny i literally had the command typed does that mean i'm stuck here for another hour [ __ ] it i'm grabbing a beer we're doing the mui chat give me one sec you did this to me cool anyways stream just got extended hope nobody dipped just because that was over and now it's not over but yeah uh i didn't move fast enough my bad yes bash rated me with 250 viewers that i was about to raid her with so thank you for the raid bash uh i owe you one and uh you beat me to it thank you for that i will be sure to raid you next time anyways since we have twice the viewers here let's chat quick i'm theo software dev worked to twitch for a decade now i run a company ping.gigi we power a bunch of content collaborators or a bunch of content creators doing collaborative streams so if you've seen like uh linus tech tips in the wan show if you've seen vshojo elgato any of the content they're doing even primogens collab streams where he brings guests on and such all that's powered by ping really proud of what we're building at ping.gg generally i should post a lot about full stack code type safety web leaning but all over the place i have database people on all the time i try to do interviews every wednesday and generally we like to post in here so good to have y'all here probably a little more active on youtube than i am on twitch but generally twitter is the place where i should post the most if you want to talk about typescript type safety and all the things that make software dev way more fun and easy for us definitely check out what we've been working on here and stick around we're fun oh and one more thing we have a discord where we chat all about how i put it all about all the things that we chat about here if you want a fun place to hang out with more senior technical people and chat about anything that's where we do it you wanted to learn how to be a youtuber i just did quite the rant i'm gonna have this on youtube asap i think it's important to think about the viewer funnel it's all about where the people are and how you get them to where you want them so generally the places with the most discovery are twitter tech talk instagram reels places like hacker news to an extent reddit platforms where you see a lot of different people in one session and then platforms like youtube you have to have some familiarity from somewhere else as well as clickable enough content for people to dive in on that and it's that combination that makes you successful on youtube judging by the 250 plus viewers that you rated me with seems like you're doing a pretty good job down here which is impressive because that's the hard part you already have the people you already have engaged viewers and if you have engaged viewers on you on twitch that's probably because you have good content on twitch so from there you can start breaking out the best pieces of that content putting them on youtube seeing how they're doing talking about it on twitter hearing from others what isn't isn't working and use that to change how you make content on twitch such that you can more easily put it on youtube and talk about it on twitter and it's you might start here but you learn going up and you grow going down and that opportunity is unique to people who use all of these platforms and engage with their strengths and this is why i went from not existing to one of the bigger tech streamers youtubers whatever the hell in the past what five months i tripled my youtube subs in the last month alone so it's working once you find the groove things go really well also your emotes are awesome rad thanks so much for the raid really appreciate it i know how it feels at the end of a stream to like feel forced to stick and chat so feel free to go peace eat whatever hit me up on twitter if you want to chat super down to help out other creators especially in the dev space i'm pretty firmly of the belief that we are very very far from saturating the software dev content space rather than us competing with each other i think we're all fighting the same algorithms right now and if we work together to make developer content more common better produced and more likely to be clicked and engaged with on other platforms we all succeed more i've been working a lot with primogen rocks and a bunch of that crew to do that really awesome to have you here bash thank you so much for the raid and stopping by anyways i was going to go offline but i owe at least one more rant now that we were so generously rated so she realized i don't have my overlay on in this view so the chat doesn't come up i will fix that quick cool so i said mui i'm curious what bash was talking about in her last stream so we can maybe do something along those lines instead in case the audience is interested in something else thank you limit for the 10 subs super appreciated for those that don't know i have a sub only discord channel that lets you chat with me more directly off the cuff i share a bunch of things i would never tweet or even talk about here so make sure you join the discord and take advantage of that sub only channel really fun place for me to event when i can't talk about things other places i share a bunch of pink source code if you ask me for my diagrams from excalibur i'll link them directly in there stuff like that really cool place to hang out lots of fun conversations in the discord so make sure you join if you haven't persuasion point discord t3 dot gg slash discord we've won another rant uh bash does not remember what the stream was about so also thank you zimmer for the additional gift sub and nemo for the prime sub appreciate y'all immensely and one more shout out to limit to uh alejo earlier and to all the awesome gifters who bought y'all access to the discord am i down for questions sure i'll take some questions but wesley gets first pick though because he's just gifted 15 more subs jesus christ y'all you guys are insane thank you so much jesus how many hype trains do we have in one stream this is insanity thank you so much yeah we also have the new tier three section too don't know we're going to use that for just yet i literally just made it but anyways i'll take some questions do i recommend astra for a portfolio yeah yes it's very good for that in particular mostly static entirely static stuff it is phenomenal i genuinely really enjoy astro for that in particular it's what i used for the t3 site so yeah my top youtube and twitch creators uh mark robert is insane he keeps leveling up the level of his content in really cool ways the most recent like india scam center stuff he did was some of like the best produced youtube content i've ever watched he's killing it for twitch i have to think on that the twitch met has been changing a lot i do really enjoy primogen genuinely i think he's done a phenomenal job of bridging the gap between twitch culture and dev culture and i have a lot of respect for what he's been doing o.j marak thank you so much for the five additional or gift subs i know some people were saying that they are getting missed by all of these gifts and looks like it did not hit them sadly but it's super kind of you to be gifting and giving all these people access to the discord more directly appreciate it immensely thank you guys all so much is there a way to generate typescript types from a python api if not from python no but from an open api swagger doc that you defined from python sure but you need something between python and typescript to do that and that thing's probably going to be like a graphql or a swagger or open api like spec of some form but you need an in between for that no comments on ocam no comments on pi script just not things i care about or i'm interested in when interviewing a full stack developer i don't interview people in technologies that's the first thing i don't it is very the only reason i interview people in technologies is if we're hiring for something i don't know about because if i already know about it we can eat the cost of teaching them a bit and help them be more successful almost all the engineers we have hired had no experience in typescript next js trpc and all the things that we use but they onboarded really fast regardless be ranked a thank you so much for the sub or the 10 gifted subs intense there's a bunch of names i know in this one actually henry and elk ass both i'm amazed that they hadn't been gifted before but hype for them good [ __ ] thank you so much for the gift subs oh some of them are even in here to thank him yeah quick shout out to b rank og and wesley and zemar and limit all for the insane number of gifts in the last 10 minutes because that is nuts we're quickly getting to a thousand subs it's weird how fast we're getting there you all are nuts i appreciate it immensely back to the i want to keep talking about the interview question a bit dogs this is important i i interview developers based on their interest on growing and improving and experience in the past and how much that's helped them grow and improve it's a do they have the right mindset to grow and grow fast and how much growth have they done already once i've identified those things it's pretty easy for me to make a decision it has nothing to do with the tech they've used almost ever i i used to wish this i'm selfishly very happy that companies aren't like this because it makes my life as a startup that does it right way easier because i can convince at this point i don't think there's a lot of people who i would struggle to convince to work for us if i really wanted to hire a specific person i could convince them now and a lot of that is because every other company [ __ ] sucks they do interviews wrong they think about these problems wrong they make you feel like [ __ ] through the whole process and they don't really care about you as an employee and those consistent outright failures of big companies are things i go out of my way to take advantage of cool doing a new clickbait title any conferences or events uh t3 conf whenever i figure out what that looks like coming in the future ping conf as well but need to hire or figure out all of those things uh i will work for free i appreciate it immensely but i can't like there isn't the things to be done so much of hiring and management and running a company isn't having the manpower to get the things done it's having the ability to split things up so that it all gets done and having another person would mean i am spending way more time delegating work the current team is very familiar with me with us and how we work and we're at a point now where i can kind of do what i do here which is [ __ ] post about a thing i think is important and expect that in the next week or two it'll be done i don't have to be super restrictive you do this you do this you do that you help them with this you help them with that there are times where i need to do that a bit more for sure but generally we are all moving in the same direction as a team and to get somebody else on board understanding of where we're going and how we get there and then getting them to a point where they can do that largely themselves using me as like a resource that is incredibly challenging to do i get this question a lot where'd the t the three and three come from there's three letters after t and theo also we joke now it stands for typescript trpc and tailwind because those are the three things i'll never compromise on but it stands for theo it's the thea stack uh i don't agree that it's mostly juniors being laid off right now that if you have numbers to confirm that i'd love to see them but that feels very not true both from like what i'm seeing and also how layoffs work the point of layoffs is to save money juniors are the cheapest employees they're not the ones you lay off specifically the juniors who are performing very well you never want to get rid of them if you can avoid it because they're going to be underpaid until they quit or until you fire them and then they realize they're senior and they go get the right salary but the people you want to hire or you that you want to fire are the people who are being paid the most that are doing the least everyone's getting hurt by the layoffs right now it has yeah like a genius sports is closing multiple offices and they're mostly senior yeah i i really don't think the layoffs are juniors getting kicked out i think the layoffs suck and i think hiring is about to get a lot worse in fact i know that hiring is getting a lot worse but yeah it's the the layoffs aren't affecting juniors in the any more so than they're affecting anybody else i'm sorry vault that sucks that sucks i hate the thing i hate about this in particular you know what hot take twitch did this right twitch acquired curse which was both a modding platform for installing mods to world of warcraft minecraft and other stuff and on the other side curse was trying to compete with discord curse was like a discord clone as well as a modding client for games and twitch acquired them it was a risky acquisition and there wasn't a lot of sense behind it initially but it slowly paid off specifically because the curse guys were much better client engineers than we had at twitch a lot of the curse folk were deep on react typescript electron real early and when we acquired them at twitch and told them come work in our ember js code base they said what the [ __ ] no and rewrote the core twitch site this was back 2017-2018 if you all remember the twitch beta back in 2017 2018 that was curse refusing to work in an in an amber js code base instead rewriting it in react to typescript because they were so unwilling and it was the right call it made the twitch code base much much more workable annoyance driven development yes this was some frustration driven development for sure i remember because i didn't know anything about reactor typescript at the time but i was so impressed with the energy for them how do i put it i was so impressed by the energy they had and the confidence that not only was this better this was so much better that we're gonna put in the work and regardless if you don't take this that is your fault because this is so much better and that mindset was so powerful to me that i got really involved with the team even before i i was actually pretty anti-front-end overall at the time but i still worked with them a bunch because i was so excited about the twilight project and what they were doing to make twitch faster and easier to work in and ended up falling deep into react and typescript it was super cool somebody asked about amazon literally just acquiring twitch for ivs not really there's a lot of like if twitch fails twitches tech brings amazon value which makes it a less risky acquisition but it's there's a lot of reasons why amazon acquired twitch it's not just ivs ibs is like if all else fails we can sell the video infra but you don't spend the billions of dollars amazon has spent holding twitch up to sell their okay video infra yeah vault dm me we'll we'll figure this one out get the [ __ ] out stay however long you have to to get your like money from the acquisition assuming you have stock that is part of this buyout phone it in hard do as little as possible which will still be more than their engineers are expecting by the sound of it and work on some fun stuff on the side and be ready to quit the day that your stock money comes through and go get something else or just say [ __ ] it and get the better job now whatever you prefer get the [ __ ] out you're better than that and you know that too i'm just reminding you uh tonko asked about the twitch competitor i don't know how many of y'all read my blog t3 gg blog i'll share this in chat quick i wrote an article about this we launched ping 1.0 last week and i chatted a bunch about specifically twitch cloning us which [ __ ] sucks because it is it's just disrespectful i wanted to build this at twitch i wanted to make it easier for content creators to make great content and do it together and twitch didn't care and then i quit and did it myself and suddenly twitch cares disgusting just yeah [ __ ] them i i'm not concerned because not a single one of our current users would ever move to guest star in its current state even where it could go it is not a product that twitch's users will benefit a lot from in its state and more importantly people who aren't on twitch like youtube and other platforms nope it's would i sell ping back to twitch it's not back to it's two initially it's would i work for twitch again the only back for twitch would be me going to them otherwise that would be a fresh acquisition i would have considered it before this but this was too dirty a play i i am wholly disinterested in twitch now i was already 50 50 on it like if you put a gun to my head and said you have to close your twitch channel or your youtube channel i would close the twitch channel before you finish the sentence like i love y'all it's fantastic having you guys here i love this community y'all are the best but i'm here for y'all not for twitch i i couldn't give less a [ __ ] about twitch now beyond them not giving a [ __ ] about me for five years they they play dirty they don't care about creators the only thing they give a single flying [ __ ] about is looking good to daddy bezos and i'm done with it i'm not engaging with them anymore i don't care i genuinely don't twitch is going to spin around in circles copy other people's products not make anything viable and have employees subtweeting me on twitter about it and i don't care i genuinely don't give a [ __ ] twitch can go [ __ ] themselves they're going to continue doing such if they can't listen to me when i'm there they can feel free to copy me when i'm not and they're not going to make a good product it is what it is there's a lot of twitch wrenches not only subtweeting me but complaining about me in slack and i still see it i still see you it's one person in particular she was on the last team i was on before i quit and she really likes to talk [ __ ] and i'm pretty sure she'll see this clip yeah no there's one particular person who very much enjoys [ __ ] talking me with that thinking i don't see it and uh yeah cheers jay i'm not spilling any more tea than that i've done all i need to do uh the person who sub tweeted zack is not the person i'm talking about this is a particular engineer who never did anything of value and doesn't have any public presence at all so she's unrelated the dumb product manager on twitch they're on like twitter from that like show is just a dumb product manager don't don't bring them in she knows not what she does there's a lot of people who just fell for the trap that that genuinely think twitches this great force of good and all of the twitch communities this great force of evil and they're gonna fight it and they're gonna win they just don't understand how any of this [ __ ] works and that's whatever especially if they're down to sit down and have the conversation but they're not i don't want to blame amazon too hard to be clear amazon is not the reason twitch is failing twitch is the reason twitch is failing twitch's leadership yeah twitch's leadership's a [ __ ] show and it sucks because they don't understand the users or what they need i have streamed more today and i've been on twitch more today than the ceo of twitch has in the last eight years they don't use twitch the company is not interested in the platform and how it works they're interested in technical experiments and all sorts of other chaos they don't care about creators or what they're doing on twitch and it sucks because i really wanted them to because i cared a lot that's why i was there fun actually i'll tell one story about the dog fooding one time in my entire history at twitch one time i had a manager that was a streamer he would stream three times a week and it was really cool he overall means well i don't want to call him out too hard this isn't the call out of this particular manager so much as the culture of twitch that manager was my manager when i was on the twitch studio team for those that don't know twitch studio is twitch's competition for obs the little like menu buttons there the ability to drag and drop everything and customize it i did all that work i was really excited to be on this team because i wanted to take the stuff i built for mod view and that i learned building better user experiences on twitch i wanted to bring that to creators in their software by making something better than obs and i learned two things first one was twitch doesn't know what the creators need but the second one was and this was very important because it was like huge for me long term don't compete with obs it's not worth it the signal that made that really clear was to go back to this my manager on the twitch studio team would stream three times a week using obs the manager of the studio team did not use twitch studio until i harassed him enough that he felt bad and started twitch does not twitch inversely dog foods their [ __ ] like they avoid their own things they don't touch the things they build they don't care it sucks it genuinely sucks i didn't stream when i worked at twitch whenever i tried i'd get like lightly pressured about it like why aren't you working on this ticket yo you're streaming huh so i streamed like two or three times when i was working there felt awkward enough about it and stopped i streamed way more now not a twitch anymore yeah obs is offering competent software and studio wasn't he had no reason to not be using studio at the time he just didn't like it he's like okay then use it complain about it so we can fix it so you can like it and he does i don't know if he still uses twitch studio but he did so yeah they can't buy obs it's an open source project doesn't work that way they do contribute pretty heavily to obs financially in particular twitch does give obs money i hope to give them more it's one of my goals with paying to get to a point where we're successful enough that i can justify paying obs more than uh twitch does sorry trash i was ending i was about to raid bash bunny and then she raided me so i couldn't stop mongodb isn't horrendous so much is it's horrendous at a lot of the things people use it for [ __ ] is a good way to store a specific statically shaped document in a thing and then get it later it is not a way to define data that represents an application it doesn't have relations it doesn't have like cascades it doesn't have meaningful ways to shape data and have it interact it's yeah people [ __ ] solves very specific problems and i've almost never seen people using it for that what should you use it for a really minimal like basically anything you would use a csv for i would use [ __ ] for thank you sivo or silvio for the sub really appreciate that uh i don't care enough about dynamodb i it's fine i had some friends that actually worked on it when i was an amazon intern but yeah i don't care app state depends on what you mean by app state probably do it on the client i jesus christ we just we're about at the five hour mark i have been on longer than i intended to be thank you again bunny for the raid thank you everybody who subscribed this is an intense show i had a lot of fun on this one we should definitely figure out who we're rating now uh there's 71 viewers insane uh i know somebody i haven't rated before big tech guy thank you for the sub really appreciate that let's find somebody new so whoever we raid we're putting them at the top of the category so we gotta be picky with it who if we're doing software at least i could do something else yeah it looks like we're doing software uh yeah let's pick somebody in software i hate that i can't close without scrolling now i did not need to hit that tag not a bad tag just not wanting it to click there's a few people i haven't seen before uh let's set up user login and off i'm curious enough oh wait coding next project oh he's italian [ __ ] that would have been really good sad mayan wolf is good okay we'll send you to wolf let me make sure i am following her first um their best practice but mute for now well thank you all as always for the wonderful show and for keeping me stuck here for way longer than i intended no complaints about me not streaming as much here we go see y'all guys soon fantastic show peace keep waiting for that number to get a tiny bit bigger okay to kill the youtube as well cool we're going off peace out required but uh yeah also goodbye youtube takes a little longer for me to kick things off here but pcl thanks again for the awesome




## Scaling Frontend App Development _ Theo Reacts - 20230804
scaling your applications is hard it might seem like web apps are easy to scale but in a lot of ways they're harder both the technical aspect of making your application reach millions of users in a performant way but also just scaling your team and helping it grow and continue to iterate you can probably guess that for sale thinks a lot about this specifically for sales CTO thinks a lot about this he just did a talk that I haven't had a chance to watch yet I'm really excited about it so let's take a look and see what he has to say about scaling your applications I'm sure we're all going to learn a lot from it yeah we love codex we love mui and AG grid all good people that's a big set of sponsors app flow is the one I'm covering up slightly and Malta principles for scaling front-end application development I'm guessing it's going to focus more on the dev side but I'm curious to hear if that is the case or not how's everyone doing uh yeah thanks for you know talking about JS common stuff we made the wise decision not to have a 2010 event because it wouldn't have happened anyway and this is actually my first conference at least if you you know counting Community conferences back from you know this bigger break in everyone's life um yeah I'm coming from from San Francisco I was actually in Germany before still a little bit jet lag but I'm trying to to give bring up The Vibes here a little bit um yeah so in in this like sense of reminiscing a little bit five years ago at Jessica of Australia I gave a talk and I started with this sentence hello I used to build very large JavaScript applications I was still at Google at the time and I was you know stepping into kind of an executive role so I wasn't really actually building stuff myself but I learned some stuff and so I thought it would be a good idea to give a talk about it but that was then I'm back I'm actually back to building things in JavaScript the very large applications obviously nobody today actually does that anymore um it's typescript applications and here we are good call out not enough people make this particular call out Malta is one of the like harder moves over to typescript land going from like core Chrome team over to like actually scaling your applications land was a huge transition I think he made the jump really well another slide from that talk was that I thought react was good and and the context there was that back in the day you know 10 years ago I built a JavaScript framework at Google called Wiz and I was thinking about a rather to open source it and so just around that time react comes out and it looks really good and I think like the world does not need this um I'm gonna keep this to ourselves um you know I I think now that I was a bit of a mistake because there were some good contributions around scalability of applications that you know could have been actually valuable to the ecosystem even if just kind of shown around um but you know now I'm at Brazil I can kind of help a little bit um push react along and I think with the stuff around server components Etc some of this um you know situation that we thought about at Google back in the day um you know has come around and is now available to everyone which is amazing cool all right um so John Purcell I talked to all the teams and I find that we have an internal Dax team and so I talk to them you know what are you guys doing um they explained to me what they're doing I think that's you know that seems like a really good idea my prediction for what he's going to say here I've never had this convo with him or anything my guess is every team's a DX Team every team should be thinking about DX let's see what he says and then I go talk to customers and our customers are like telling me that their problems are the problems that our internal DX team is solving and so I was like why don't we turn this into a product team and actually make this available to everyone so that not everyone has to go over and over again um solve the same problems now DX is a huge part of the product this is an interesting framing I'm excited to see where it goes I saw somebody ask you what DX's DX stands for developer experience it's a generic term for how developers use a thing and like the experience that they have using it's kind of like ux for developers this is in a way relevant because the talk I gave back in the day it was so like such Theory heavy stuff because you know I didn't have anything open source I could only tell folks like this is what I learned uh but you have to figure out how to like take this learning into something real um by yourself now I'm going to be doing similar stuff today and and more power to you if you want to build yourself or you know we we did announce a product called for cell spaces a few weeks ago that's trying to implement some of the stuff that I'm going to talk about in like a reusable fashion all right so let's go ship software like Google or resell because it's 2023 um but kind of going to Google there was this like guy called Eric Schmidt he was the CEO for a long time and he at least classic Eric quote internally maybe I'm licking something sorry um always used to say Revenue solves all known problems physics saying if you just make more money it really doesn't matter what else you're doing um and I think that's wrong like certainly we don't you know have infinite money you don't have infinite money I think Google no longer has infinite money um so that's not really it's not such a good Mantra but I think the zero interest rate phenomenas are dying this one is actually true iteration velocity solves all known problems what I mean is that when we milk hard hard agree and this is why I push almost everything I push it doesn't matter how legit your service is you cannot predict the unpredictable and being able to iterate quickly around the unpredictable is what makes you the most effective like giant air freight carriers are really good at once a course is set getting a bunch of airplanes from one place to another but if you have to change course at any point in that Journey it takes one of those things like a day to turn so if you're not on an exact course you've planned years ahead you're and that's what makes these new tools so powerful it's not just like oh small teams can move really fast it's every team can move really fast every team can change things really effectively and that's how you solve real problems it's not just like big companies are different big companies also have problems they need to solve they also have expectations changed products that fail products that succeed more than they expected and being able to iterate quickly on that is so essential I'll let you talk Malta make software now it's actually the first talk today had a similar point we are going to make mistakes over time right that's the only thing that we know is that the future is uncertain and we have to deal with that fact professionally and the way how you do that professionally is by being able at the moment when you make that mistake to react to it and iterate and do it right the second time around so with that right let's think a little bit about our role in this and in for the rest of this talk so the senior engineer or um really what I mean is like the lowercase engineer right we've been around for a little bit what do we do right um You might have you know there's a session later today I like the term lowercase senior engineer just someone who's been around too long I I think I might not actually fit within this definition because I'm still younger today around Korea advice and they might tell you something like you know if you want to have more impact you need to scale Beyond yourself and what people kind of usually associate with this is something along the lines of kind of either having management responsibility or at least telling other folks what to do it's a people thing right and so the rest of this talk is kind of about something very different from that it's about how you can scale Beyond yourselves but through software that you built and through mechanisms that you establish in your teams that make that whole team better but through the software that you're building and so for the rest of these slides basically consider yourselves as like the hypothetical lead of the hypothetical platform team for your hypothetical I don't know 12 50 100 person engineering team right you're that person and and your job is to make that team scale better cool it's been there that was a long intro anyway I want to talk about principles for scaling front-end applications um I got six I have a bonus one but I think I'm too slow so I'll do six um all right so let's start with this one tearing down the barriers so this is actually something that is was not clear to me how big of an effect I would have as I was mentioning I was like at Google for the longest time I was not like using the tools everyone else was uh using but I was you know doing this conference yes conf I was going to these meetups myself and I would hear folks on stage being incredibly excited about small modules right and and there was a company called npm shout out npm who created something called private modules and so people would go and in their company share code through publishing modules to npm and so I'm joining Versa and I see that happening for like some team says well you have some cool code can you like publish that to npm so I can use it and then I have to update my package Json to your new version maybe someone's helping me maybe I'm doing this automatically that's such an incredibly like bad process and at scale if you have a larger team it really hurts right so my one kind of weird trick advice if you haven't done it yet and you want to get that adrenaline shot in the arm go migrate to a mono repo like it's really worth it um having went from like twitch scale to Startup land and then taking what I learned in startup land and applying it at like twitch scale companies I help out it's not just a things get done faster it's an energy thing I have a video about engineering leadership but I talk about this a lot in it giving your team what they need to engage with and like build their energy and excitement around stuff is so important and a big part of what tearing these barriers down is it lets you go from that moment of excitement to the thing is ship much more effectively if I have an idea for something that solves our problem it makes our service way cheaper it makes this feature our users will love but I have 15 busy work steps from when I have the idea to when it gets deployed I have lost so much of my energy and excitement by the time I'm actually solving the problem excitedly thinking of something to excitedly releasing that thing it's just so much better that's why people saying that like they're losing track of the topic because they love how mouth is talking so much this is just how he speaks like I chat with him a decent bit in person all the time and he just he's very thoughtful and thorough and it's really cool seeing somebody go from like the Google way of doing things to the as deep as you get in startup land being the CTO of herself and recognizing how much value there is in these ways of doing things really excited for this now obviously it comes with trade-off everything in software engineering comes with trade-offs a few months in you'll notice oh like everyone can change everything maybe that isn't the best idea on the planet right but it's good to have a basis that encourages and puts a load barrier on collaboration and you can deal with the problems that kind of come along the way and um you know there's certain scalability problems um that for example GitHub code owners addresses now that's kind of a weirdly not very great product among the other stuff at GitHub that's really good so as part of our spaces product we're actually shipping something called owners which of course he plugs spaces he's been working really hard on that stuff it's super cool and like I understand his frustrations with code on Earth but the tools around this type of work need to get better still that he is working hard to do that which is basically like code owners but like good um so check it out all right for the second principle I'm calling this making it easy to delete code because there's one true thing about any any large code base is that it will get larger and that's in a way good right like it's our job to write code we're gonna write code there's nothing you can do about it but we can again as the platform lead professionally manage and encourage our Engineers to have as little code as possible and that includes deleting code now if we you know I'll think about there's a bunch of weird edges to this one too I'm not sure if he mentions this or not but like this is why I hate code coverage because code coverage often makes it really hard to delete code because if you have like an 80 threshold in your code base of codecov you're just barely hitting it and you have this giant old feature that no one's using anymore that you want to deprecate you've already hidden it you just want to delete the code but deleting it drops you under that code cuff line now that code's just going to sit there and that's what happens almost every time is the pr doesn't get merged and you end up with all of these giant piles of stale code and no one even remembering why it's there if it's being used everything you can do to make code deletable is worth it because Engineers like to delete code it feels good to have a PR that's more negative than positive with a line count do what you can to make that more accessible for your teams but our code base is there's probably something like this in there right there's some code that pretty obviously should not be there um you know 2017 whatever that's hilarious um and and you know maybe that was originally a react component and we got rid of that react component right but we had a CSS file that was also contributing to a 2017 happy New Year message and who knows whether that selector can be deleted right that's really like almost a halting problem type of problem and so it kind of lingers around now on the other hand if you're using something like a Tailwind or css like njs libraries because you have co-location of the CSS with the code you can just delete the whole thing with high confidence get rid of it and again like this is the type of thinking you should have as the lead to say like that's why I'm making this choice of using something like Tailwind because it actually makes me makes it easier to delete code that's a huge argument I don't actually make enough foretail wind one of the benefits of not having to name everything and create classes and CSS files in a style system in relationships with all this so that becomes much more deletable that's a really good point and I'm going to push that more in the future when I plug tail end look at that already learning things from Malta what a surprise as another good example of of this type of thinking I think are like um is data fetching inside of components in xjs13 so in this example we have a tweak component right and we only pass the ID the Tweet component fetches its own data now if we delete that tweet component everything's gone remember how this worked like Legacy and xjs or something like remix loaders where you suddenly start fetching things in your get server-side props and block the whole page load until it's done loading and then you stop using that feature but you forget to take it out and get server-side props because it causes some type error or something somewhere and now you're blocking every single page request ever on a feature that's been deprecated for a year yeah yeah I'm familiar data fetching is hoisted to the top of the route so if I if I delete something that's very far down my you know react render tree I have to remember to also delete the data fetching code and if you have a large team someone will forget some of the time and it'll not only make your application kind of larger and have unnecessary stuff in it but it will also make it substantially slower or in the case of data fetching even like introduce cost because you're calling some back-end system that you really don't have to to call so again it's it's kind of the same idea of CSS and JS it's just for data fetching in JS and I know some folks like say wow that doesn't scale blah blah blah so I saw somebody in chat say except defer and suspense solve this problem yeah you can solve any problem by adding more things the point is this is about deleting things if you have to add more things ahead of time to make stuff deletable later on that defeats the purpose because people are going to do the easiest thing the the reason server components are so magical they make the default which is the easy thing really good the the thing that we will do by default even just prototyping is not just good enough for production it's one of the best production experiences and when a thing gets slow you can wrap that thing with suspense but the value here isn't that it's introducing stuff that was impossible before it is doing that too but the value is primarily how easy it makes it to have a component that fetches the right data relay solve that problem too if you've successfully architected your entire relay back end to have all of the data you ever need ever but if I need to fetch something from another service you're you have to go Define a new schema endpoint a new like resolver a new update to your graphql schema get your back end team to approve it and now maybe you can finally start working on it or with server components you just await the thing you want to do on your back end it's it is groundbreakingly different anyways like one of my I think the accomplishment is at Google that I'm most proud of was introducing exactly this and so any larger Google app that you've been using over like the last eight or so years years is using exactly this technique where you have data fetching in the render tree as opposed to data fetching in some like hoisted you know pseudo scalable fashion all right principle number three always migrate incrementally I always passed such a banger tweet I don't know if I saw that one before it's so good if you all aren't already following Malta fix that he posts nothing but bangers joking on Twitter the other day that there's basically just two types of migrations there's the incremental ones and there's the failed ones now now sometimes you start out with this big plan and you're you know gonna say like we're going to do this all at once but I think more often than not maybe you're like three months in and your boss comes and says this is all fine and good but we can't wait six more months to prove that this is gonna work I need to ship something next week or next month right and so something that started out as potentially you know Big Bang type of immigration typically eventually uh starts to become something that you do incrementally and so it's ideally better to just plan it from from the start as it's just an example for you know the type of thinking that goes into API design to make it incremental migration possible I think another good example is once again um the next js13 app router where you can go and migrate a single route at a time lift and shifting it into the new world right so no one's forcing you to say old API or new API you can have that page on this API this page on that API just one silly example of this we tried using server actions for upload thing and they weren't ready for a bunch of the random stuff we were doing trpc was so we have one Pages route in our app router project that started as an app router project for upload thing we have the one Pages slash API just to serve trpc through it so we still have this one thing that we have this old method that we're used to we threw that in Pages everything else is an after and not only can we incrementally migrate to after we actually do the opposite we can incrementally fall back on the old things that we know rely on and trust and incrementally move off of it as the new pieces get ready that back and forth potential here is something I've never had in any framework where I can easily start something in the future and move to the past or take something from the past and incrementally move parts to the Future that's a new thing and I think next did it really well here and kind of work you through sell through the code base and even further down in that in that project you know here we have like some get server-side props Legacy should I say Legacy I don't know whatever old API right um would you perfectly fine still to use I'll say the thing he isn't saying which is bad API get server-side props is terrible I have a bit of content on it but it was it was so bad so bad but you know that's how it looked and and then you can do the first migration step and note that this is like a trivial migration right nothing really changed we just took that code that was in get servers at props and put it into our top level component now is that better than before no it's not right but it's an incremental step where you didn't like have to rewrite your entire render tree to get to take advantage of some of the new capabilities and again um just an example for how to make apis that you can be migrated in this like um you know step-by-step fashion rather than doing everything at once and obviously shout out to the next JS team who actually did a good job at this I think cool moving on to principle number four which is always getting better and never getting worse this is actually in a way kind of related to the topic of incremental migration but a little bit more General so one good example for how you ensure that your application kind of has a certain standard would be by introducing lint rules right which say you know in my app you have to do it this way not the other way now what happens sometimes which isn't so great something like this which by the way I just randomly copy paste it from versa's internal super secret code base so I'm sorry if anything interesting is in there the actually interesting parts are the comments which basically disable all intros all over the place right I've seen this too many times in too many places just a shitload of disables no default export it's really funny they have that on it's really funny versel has no default export on when so much of next.js relies on default exports that's hilarious right and actually I think that's good I'll talk about why this is the right way to do it uh but honestly it sucks to litter your code base with these comments which add no value right but in a way they these comments are now this Ledger of technical debt right technical debt usually is this like super abstract thing but here you have a list a to-do list of things you want to fix now again this kind of is nasty to your code base which is why for for our spaces product we'll be using are these external kind of allow lists that don't Litter your code base you basically have a Json file that says you know there's some rules here and in this file it's okay to violate the rules this I'm 50 50 on I really like that you know axios rule slash that's hilarious I actually really like that the files show what rules they're violating and encode it I don't like that there's no ownership through that path but what I do really like is the nature of how when I'm reading that file I I have to know the context of this thing that I might not have seen the rest of the code base like if we have no default exports on and on a file and it has a default export my initial reaction if there's no comment is what the is this I might not even know about this spaces rule configuration thing that Purcell has and I'm really confused why this file is allowing and others aren't that to me is the value I see mostly from having that level of like control in the code if that was to be combined with this that would be cool or at the very least your editor has tools built in to highlight which rules are applying to which files and maybe even a different color of underline that's like this is breaking the rules but we're allowing it here but like this is going to need a lot of tooling to make it a good experience for developers in moving this info out of the code file although it benefits our ability to enforce it it hurts our ability to understand it and that's my concern now coming back to kind of the theme of getting better and not getting worse what you really want to see for your team's code base is a graph like this these violations over time and you want to kind of let this come down over time and then you see these like you know steps up that's actually not bad that's when you introduce a new rule right and you you allow this all existing violations and then as as this code actually gets touched um it gets better over time and and I'm I want to encourage everyone to allow us this stuff right it's not actually important to migrate everything and put it into the new state the reason is that and this is actually something that wasn't obvious to me early in my career at all that if you have something like a you know some rule over your app the marginal value of that rule is drastically newer higher on new code than is on the old code because your old code is Battle tested it went through QA it went through production outages right it went through users having creative ideas about what a name is like you fixed all these things already right and so you likely actually won't find anything interesting the reason why these rules exist is that when you write something new at that moment it tells you right away hey you're making a mistake go fix it now right where it's also really cheap to do it it's actually a really good point I don't think about enough but like where is the value in these things I push it a bit when it comes to like migrations or building stuff with my tools I don't think you should go rebuild your create react app and create D3 app but I think if you're working on a lot of new features maybe an incremental migration or a way to Green Field parts of it on a better stack is something you should absolutely consider but the the battle tested nature of old code that users are using every day is something that's hard to replicate with tooling and the benefit of tooling is creating code that will go off to be battle tested not for replacing code that already is if that makes sense I really like the points The Malt is making here and so that's why it's so important to quickly get these opinions into your code base for future codes and it's not important to now take out you know a month out of your life to migrate everything you already have to the new state um so I I talked a little bit about like in the abstract fashion about rules like this and I give this literal example um but actually I think you know I want to talk about something slightly higher level than the lint rule which is kind of associated with code style and stuff like this so but coming to the principle you know Embrace lack of knowledge again you're the lead of this like larger team there's going to be people who are new to your team the kind of people who are more Junior they're going to have you know some context about that code base that they're lacking that they they can't know or that they missed you know or where they didn't read the memo right um this all happens and we as Leaders of that team we have to embrace that they might not have that context I push this one really hard a thing I talk a lot about is my dumb questions rule I think it's important to basically enforce people ask questions that feel stupid all of the time because it makes knowledge gaps that the company way clearer it makes the stress of asking a question way lower helps new people get onboarded faster it helps obvious things get discovered quicker it's so important to encourage and allow for dumb questions to be asked and I see that as part of embracing the lack of knowledge like everyone is stupid in a lot of ways not in like the sense that they're bad at things just that they don't have the information they need to do it right yet and embracing that and Building Systems to push through doing around that is so important and so that's why it's important um to try to encode as many of these things that you know about your code base and some machine readable fashion I have an example here what that means and again this goes Way Beyond like linting but in more into like application design opinions this rule of again like taking from Versailles internal code base and so we use Nexus middleware and and which is a very powerful tool right it runs on almost all requests we're serving and that means if our middleware is slow our site is going to be very slow right and and one way how you can make your your middleware really slow is by fetching something from some other service right on the other hand fetching something from some other service might be exactly what you want to do right somebody mentioned in chat that some companies have a Juniors have to ask one question per day rule there's a high chance they got that for me I've been pushing this for a while I call it the dumb question Rule and I don't make it one I make it three three dumb questions a day for your first two weeks of the company ideally at least one a day from that point forward but usually what I found is when you've enforced it for their first few days that's enough to create the culture where the employee is comfortable asking stupid things one of the best things you can do as a manager is ask dumb questions yourself just like the amount of times I embarrass myself in like company group chats because I ask something really obvious and stupid is hilarious and sometimes we end up finding something really clever because my dumb question led us to realizing we over complicated something so yeah encouraging dumb questions on all sides super important it's cool to see more companies embracing the the need for new employees in particular to ask more questions it's three per day for a month weird no go for it because that's how you're doing through racing things like you call it services now which means that yes you sometimes have to call a service but no you know sometimes it's not the right idea right and so with the loudest mechanism like this what you can do is you can say by default making this this change requires approval by someone who actually has the context to make the decision whether in this context this is the right idea and this kind of combines this idea of an allow this external to the code together with the owner's mechanism that we have or the owner for the allowed is not the same person who's writing the code and respectively you can easily enforce that you get your architect or you know leader of the platform team type of person to go take a second look and validate that in this case yes it's an okay usage and then again like this is not like the lint rule where you eventually probably won't get code base and uniform code base here you just ensure that yes we did take a look and this is actually what we want to do cool uh moving to the final print I have a thing I say that's along these lines it's funny how many of these are like theoisms made more General and arguably more useful like this is my reduced dimensions of problems thing things that are complex should be removed to the best of your ability and you don't usually do that just by reducing complexity it's reducing the number of things that have complexity an example of like a dimension of complexity is managing your servers like keeping track of how many servers you're running and making sure enough are running for your users that's a whole dimension of problems that can be avoided for a lot of applications and developers by adopting serverless Tech if you're using kubernetes and you don't need to be using kubernetes that is a dimension of complexity you are adding to your surface area and to go back to the velocity point that absurdly decreases velocity principle here eliminating systematic complexity once again you're the person who's leading the platform team for your organization and you're seeing stuff that people struggle with every so often I think it's important to take a step back and make a catalog of what these things that people like struggle with all the time and try to get rid of that problem once and for all by introducing some kind of abstraction that makes it possible to just not worry about it anymore um one I think good example for this type of issue is what at least a big tag is called versions Cube so version SKU is something that happens in distributed systems when you have a client and a server and they're not at the same version right this is something Malta is really really into right now I've talked with him a bunch about the version SKU stuff he hates that it's possible for like your next app serves a page that has JavaScript that says here's how I get new data but then you deploy a new backend it changes where that stuff is that's a really bad experience because on the client it's just gonna throw weird errors and now that so much of next is effectively bound via like index calls to like this route has 14 server actions and one through 14 are assigned to these behaviors but then you got a 15 somewhere in the middle it everything gets off by one if you have your back end in modern like next app router app change out under the client after it's loaded that could cause some very Strange Behaviors to Malta the problem here is specifically that the client and the server aren't tied together tightly enough so what if you just kept hitting the server from an hour ago right until you go now you might say you know I'm a foreign engineer I don't write distributed systems and you're wrong like you're actually doing the hard mode right like because on the data center you you control how things are deployed right you know how that works you can put rules around it on the other hand when you have a web client and a server you know you're not in control when that web client redeploys right usually goes to your site and and they might stick around right certainly for like a while meanwhile you redeploy your server so now you have this our old client new server and you're introducing a new field in your API and the client has no idea right right so this is a problem that you have to manage now now there's almost like an entire ecosystem around this like for example the Zod library for typescript or the trpc layer on top of it which allows you to express expectations around your apis and handle the problem if you know those expectations are met but that's a lot of complexity right there's a lot of stuff you have to like do and what do you do if you don't get the feel right like what do you actually do to be fair those Solutions add a lot of other things in particular validation of calls that might not be coming from your client like if somebody's trying to spam you with things that shouldn't fit the validation layer and the consistency of the definition layer has value outside of its role as a version that you're hitting I still have version SKU problems with trpc it's just that like I they throw weird looking errors when you're calling from an old client like what he's describing here isn't an alternative to trpc it actually solves a problem that I still have with crpc it's a it's a hard problem and so we were seeing this issue at Ursel and we were wondering like can we again eliminate the whole systematic problem and so what we did was we said hey we have the serverless product right and we we don't have like one server with a latest version we can actually surf other versions of your site and the latest deployment and so um what we have now is a very experimental version um but we were rolling out it out over the next weeks is that you can opt in to mode in xjs where the server that responds to your client will always be exactly the one version that the client was at which means you can just forget about this whole problem altogether it just you never have to worry about it again in particular with server actions you know which are already like function calls they really like function calls now because you actually know which functions you're calling right yeah like if you're calling a server action on a different back end then the front end was served from that's scary and this helps a lot with that oh did we get a tweet from Malta yeah they just put out articles on this there's a whole like thing to talk about here oh he just shipped it cool yeah I could probably do a whole separate video on just this it's really cool stuff malt is a nerd and this is really cool so check this out if you haven't and you're curious about all the version SKU stuff it's not like some abstract version of like something named this but you don't know which one it's going to be exactly that all right so again this is just so if you ask a question doesn't this lead to instances outside of your server like your database ideally as soon as something's left your server and gone to your database it's standardized but like if I switch from uuid to cuid for example and I made that switch on my server I would want to invalidate all all servers and there's an option to do that I don't know if he talks about that or not but like if you have a security update or something that isn't backwards compatible past the server absolutely invalidate all the old ones and we're gonna have to find when and how and like build plans around this stuff it's a very new paradigm this is like one of the the weirdest new things versus shipped in a while and there will absolutely be edge cases but there's a escape hatch of just invalidate old servers and and do it the old way that will still exist but like I don't know if I'll be using this feature is something I have to think a lot about still example of like the type of stuff you can do to to make it easier to build applications at scale amazing um that's all I had today this is the whole list I don't have to go through it again I think we have q a maybe it'll be helpful um with questions and stuff thank you very much I mean it's uncontroversial I'm gonna skip the Q a so if you all want answers to these you have to go watch the original I don't want to steal views from react Summit I will watch the outro just in case there is uh more sponsors so I don't steal their like sponsor shoutouts but if you want to see the answers to malta's questions here go watch the original there's a link to it in the bio huge shout out to react Summit huge shout out to all of these sponsors thank you for getting Malta on for a talk he's he has so much to say and doesn't get enough opportunity to do it this talk was awesome I really liked it and you all should go watch it so you can hear the Q a at the end there appreciate all of y'all thank you that talk was dope I genuinely really enjoyed that malta's been in threw the ringer a few times now with giant front end applications and I hope this was valuable to you if you want to learn more about leadership as an engineer and how to keep your teams energized and moving effectively I have a video All About That pinned in the corner here thank you guys as always peace notes




## Senior ReactJS Dev Skills - 20220712
what are the skills you need to be a senior react js javascript developer you need to be able to recite the entire ecmascript standard backwards ideally on your head if possible you need to have used react for exactly two years longer than it is existed for you need to be able to write and read react code in 15 different languages most of which no longer exist and most importantly you need to exclusively use class components and yell at anybody who says hooks are good oh yeah oh angular that's the best thing for your react expertise if you want to be a real senior in react you need to be able to run circles around reactives in angular




## Sentry Made The Component Nobody Wants To Make... - 20240704
hot take some components just aren't worth making yourself that's why every date picker looks the same that's why most marketing websites have the same little intercom chat on them as useful as the features are the time it would take for you and your team to build it yourself just isn't worth it and that's why Sentry reached out to sponsor a video today about a new component that they made the user feedback component thank you so much Sentry for sponsoring this really excited to show this off it's a thing I've been planning on making myself for a while and honestly I'm just thankful I don't have to before we go further though we should figure out what a user feedback component is have a fun example here on my phone and here we see I'm on my Instagram feed what if I'm having some bug on the app though well all I have to do is shake my phone and now we get this little report a technical problem because sometimes you have a problem and the phone didn't error or you didn't hit the right Edge case or you click a link and it doesn't go anywhere those types of bugs are really hard to catch automatically and honestly more apps need functionality like that but sadly it's kind of hard to write it and even if you do get it right the likelihood that it fits well into your website and that you have a way to collect data in the first place yeah it gets messy fast make sure you stick around to the end especially if you're nextjs Dev cuz I spent a lot of time making this work and do some fun things within next and also showcase some cool nextjs features so without further Ado let's dive in Sentry just introduced the new user feedback widget to make it way easier for you to get feedback from your users obviously Sentry is already great for catching errors in more traditional environments like when you throw an error they're a great way to catch it and figure out what happened but if you have bugs that you're not throwing errors for for feedback which is really useful they have a simple example here let's rewind this to the start we have this page there's a typo for the mood ring for plants and now you have this little report a bug button that appears on the site it's super easy to just click the button and now you have a little form for reporting the issue that you had makes it way easier now for your team to go to the same place they already go to debug things and have access to the feedback that these user gave it's super super handy but it's also super easy to set up I want to show you guys how it is the setup fast so I already have my tutorial project here for the create T3 app tutorial I recently did open let's add it so we already have Sentry set up watch the tutorial if you want to see how easy that was I'm going to go copy paste the code to actually set it up this is coming straight from the Sentry change logs we have integration Sentry feedback integration and to copy that going to go to my code already in the Sentry client config note that this is the client config so we don't need this on the server paste going to go make sure we're up to date though because I'm almost certain that the feedback integration widget did not exist when I made this originally so we're going to go to the Sentry nextjs package delete delete delete latest is 8.1.0 awesome do a fresh pnpm install pnpm Dev and look at that now we have this report a bug button that is so convenient now if I want to report a bug I can do that I can click add a screenshot and screenshot the page I'm on right now say my name is Theo Please Subscribe at gmail.com it's the bug I thought the thumbnails Theo made would be better cool so now you have a screenshot we have all this additional context I can even crop to make sure it's only the right amount of stuff getting cro things like that right is more annoying than you might think someone who been working on it a lot recently send the bug report now if I go to my Sentry sign back in so here I am in my Sentry here's the feedback we can imately lo the screenshot we can see the replay which is super super handy as well so we can actually watch all the things the user did to get here in the first place which is super super handy it's all the things you would ever want from a user reporting an issue what if you want to customize when this widget appears though I actually just spent some time chatting with Sentry to make sure we can get this just right I have a simple hook here I'll even throw the gist in GitHub in the description for you so you can copy it for now but in the future they might even add a hook to the SDK to make this way easier but for now we're going to do a basic example where as you can see the button does not appear when I'm signed out I'm currently signed out of the app but if I was to signed in now the widget reappears so we have the setup so it's only there if you're signed in it's not there if you're not pretty common use case which is why I think it's important to have a good workflow to get there and we'll customize the component a bit along the way too so the first thing you need to do is in this feedback integration when you actually call the Integrations here pass it a configuration object with auto inject false this is just telling Sentry hey by the way I don't want this injected by default which means that when the page loads it won't automatically load this and integrate it into the page so now that that's been called we need to trigger it at some point I actually wrote a custom hook here use feedback widget I have a bit of an annoying State call just to make sure we have the thing here I'm just taking the return type off create widget setting as null by default and then we have a use effect I pass this custom hook a Boolean should Mount so if should Mount and there is no widget yet then we create a new widget and then set it then I have another case here for if should Mount is false and the widget does exist which means we've flipped the flag then we want to make sure we actually get rid of the widget so we move it from the Dom and then set it to null pretty simple hook I have it called here with Sentry feedback widget I grab off from clerk you guys know I love that and then we use the use feedback widget double knot to make sure this is a Boolean off question mark dot is signed in so this will now let us know for fact whether or not we're signed in one more important piece here is that I'm importing it in the root layout right now I have this set to SSR false but I think with the changes I just made that won't even be necessary anymore so let's see if that is the case we'll go back here and import Sentry feedback Widget the page again look at that still working just fine make sure this is in the body tag if you can because if it's not uh things can break in weird ways even now my types are breaking in weird ways that's a strange error that I did not expect but if you were to move this Sentry feedback widget to be like here that can cause some strange problems I know it was for me when I was first setting this up so make sure you put the feedback widget somewhere in your root body in your root HTML and now this appears when your signed in and if I click here and sign out it disappears pretty simple useful little thing also a great pattern if you're looking to play with custom hooks to integrate third party stuff I can't tell you how many times I've had to write a hook that is basically just this thankfully send your te my add in the near future they make it very easy to Target and change things in here directly so let's make some quick changes first I want to turn off The Branding I love you guys Sentry but I don't need every one of my users knowing who is providing this the type safety is not there yet so we have to grab that ourselves show branding false again this is just in the Sentry client config file and with that one change we are no longer showing the Sentry branding we have custom theming for light and dark I also just realized we're using the system theme which I do not want to use I want this to always be dark so let's make sure we set color scheme to be dark guarantee that will always be dark and now we can actually C the theming so let's customize theme dark that's the theme we will be using and yeah we'll start with that see how it looks oh yeah already so much better look at how easy that was to do it's always nice when they make things like this customizable enough that you don't feel the need to change much but if you want to quickly make it fit your brand a bit better with some colors you can love that they made this easy enough to quickly Target things love that there's a little diagram to show you how to Target specific things if you want to make changes to any element spe specifically without changing the whole thing great stuff and I like that with just these couple additional lines in the config now this works great that's all I got let me know what components you wish already existed in the comments and until next time peace nerds




## Separations of Concerns is a Lie - 20231127
oh boy here I go causing drama again I've been thinking about this video a lot I've wanted to do it for probably over a year now as we've talked about with everything from Tailwind to server components I don't find separation of concerns as a default to be great experience and I hear all sorts of arguments for it and every time I do they feel like they hold less and less water if you're not already familiar with the concept separation of concerns is the idea that you should break apart your app and categorize it by the types of things parts do the most common way to do this is through the MBC model the model view controller model so if I Define these things myself everybody's going to be mad so I'm using the Wikipedia definition the model is the central component of the pattern it's the application's dynamic data structure independent of the user interface notice how they have to specify this because normally the data structure is defined by the user interface the view is the thing that actually shows whatever the model has determined to the user and the controller is what accepts the inputs and converts it to commands for the model or the view this separation is entirely arbitrary and makes no sense in modern times at all when all of these things were different parts of your infrastructure in HTML as the view was an incredibly limited piece this model made a lot of sense when you look at things like angular especially the OG angularjs it's clear they were building around this model but when you look at react they kind of threw it away because react didn't see MVC as a necessary way to separate things they saw an opportunity to allow developers to separate things how they chose they effectively took these parts combined them together and gave you as a developer the ability to define the boundaries yourself in the twet that inspired this video most recently comes from Mark dalish the creator of vanilla extract one of the OG CSS Wizards especially in the react World he helped create CSS modules and now he's working on remix he tweeted this a couple weeks ago been over 8 years since this commit and I still can't apologize enough truly I'm sorry what does this Commit This is him adding the no set State rule into esent plug-in react what this rule does is it allows you to specify that no components can actually update their own state so if you want to do State updates you would do that externally through like a UI Library like material UI or something and then the components themselves just pass data in a very static way the goal of this was to separate the update layer from the react view layer because at the time if you were really deep in the MVC mindset this seemed like a good idea the harsh reality of this is that it made our lives exponentially more complex when you want to make a change maybe you want to change what state is the default or what the behavior is when a user does a certain thing or just have code that runs when the state changes if that state is seven layers away from where you currently are even finding the file that's in is going to be a massive Challenge and updating it in a way where it doesn't break other things is nightmarish the closer you can locate the things that affect your code and the code that causes them to appear in the first place the easier it is to maintain understand review work with and maintain that code over time I've never in my life regardless of the scale of company worked in a code base where the separation of concerns made real changes easier to understand and do because what ends up happening is you miss one of the 15 places that needs to be changed for that code to work and it looks fine in code review but because you don't see all of the ways this code impacts things it's actually very broken and if you have one component that has all of your model logic separated from the actual places being consumed you make a change to that code it's not apparent in the code review which things are actually affected by that change because you're just seeing the code itself that change not the places it's being being consumed this is why this model doesn't make a lot of sense with modern development this is also a huge part of why I like Tailwind I know a lot of people are upset seeing so much words in their jsx and eventually in their HTML that gets output but by collocating the styles with the thing that renders them it's become way easier to see exactly what's causing a behavior to make changes when you want that behavior to be different and to code review it when you want to see what they're doing it's also made it way harder to accidentally leave old Styles behind because if you separate your Styles into a different file that has CSS in it and you stop using the class how do you know that you can delete that class safely you don't so it stays there forever I will guarantee that at least a fourth of the CSS on the twitch site right now is not being used for anything because they're scared to delete it because there is no relationship between that CSS that's in the file and the actual thing rendering in the HTML other than being named correctly inside of the react component and I can't tell you how many times I had code that should have worked that wasn't and it turned out I just slightly misspelled the name or forgot what it was from a CSS file it was accessing it in the component or Worse there was two things that had the same name for the CSS it's unreliable at best but we haven't even got to the fun part which is the server client side of things you might think that my stance stops once we hit the server it's like obviously the server needs to be a controller of some form and the UI takes what that sends it and does whatever it has to from there what if I told you the server could just send the right HTML depending on the conditions and inter with it in the same code directly we've done a lot of examples with server components in my content but I really want to emphasize this so here's a really basic example cons data equals a weit get images for user this is a SQL call I just put it in a function so I can call it in three places but it is just a SQL call and I return image grid which is a react component fun fact both of these are actually defined in the same file if I recall correctly by keeping these all in the same place it becomes much easier to see what the backend returns and how it affects the UI so if we're trying to add a new feature let's say if they have zero images we want to return something different that goes from Annoying to trivial both to figure out where that happens and what the relationship is and if I am a backend Dev that wants to return something different depending on these conditions maybe instead we want to return an error if you have no images the server should return the error and the client should do something with it but now if you change that behavior in the future like let's say we switch from returning an error on the back end with zero images to just returning an empty array how do we know the client's going to do the right thing if these things are separated far enough you don't and now if you have to maintain both the relationship between this back end and front end without a direct tie to them and also the versions that both are on because now these things can skew which version they're in it becomes significantly harder to understand the impact of a change on either side this is why graphql was invented because it was so hard to manage this in properly Define the many different permutations of the backend stuff that the front end needs but if we don't Define that Separation by default we allow the developers using this code and building these things to Define these boundaries where it makes sense for what they're building it becomes easier to build easier to maintain easier to add features easier to make changes to those features and most importantly easier to understand what the code does and this is my problem separation of concerns is almost always sold as a solution to complexity by separating these things into these boxes you've reduced the potential complexity of those things what you've also done is increase the complexity of Any Given feature because every feature is going to touch all of these boxes you've split up that might be good if those boxes are the same shape as your teams but that's not the case for most people because teams are now being built around features not around locations in the stack and if I'm building a new feature on Twitch or on upload thing and I'm on the front end team and we need backend changes now we have this whole process with back and forth with making changes that hopefully are backwards compatible with realizing the API is slightly off from what we need and bugging them to make additional changes all of this separation makes it so much slower to move and takes away a lot of the confidence you normally would have when you make these changes if the distance between your infrastructure and your UI code wasn't multiple teams files code bases and deployment infrastructure and instead the distance between those was two lines of code it makes maintenance so much easier and that's why I'm getting frustrated because I've worked at a lot of different scales and I have seen separation of concerns cause significantly more problems than I've seen it solve and I don't think it should be the default anymore the default of a separated database API with Express and a single page app front end with the model The View and controller all separated on both the back and in the front end this died with rails this isn't how we should be building anymore and continuing to take this old mindset and apply it like it somehow magically reduces complexity it's harmful and I'm really tired of us pretending these things should be just because I'm sure a lot of people are going to disagree and I'm actually excited to see the comments on here so if you think I'm mischaracterizing separation of concerns or you have ideally examples of where it benefits a lot to default to these models please tell me in the comments cuz I will keep an eye on it and I'm excited to see but generally speaking we should default to the simplest possible thing and we should start separating stuff when we have problems not because we think we should what do you think how much do you separate your stuff am my absolutely crazy here let me know in the comments and maybe check out this video where I talk all about FSE stack and why I think it's the future of development or check out the video below that YouTube seems think you're going to like appreciate y'all at T as always thank you so much peace nerds




## Server Islands are really cool - 20240803
I like to think of Innovative Technologies as falling into two buckets there's one bucket where things are regularly being reinvented where new Solutions are being tried tested and proven out in the other bucket there are the projects that look at things from the first bucket and see what is and isn't working see what's causing those things to be adopted what's making it harder to use them and how we can benefit devs in a more immediate sense for one example of this we can look at something like signals which were pushed really hard in some older Frameworks but most notably the new frame work solid and in a lot of ways solid is trying to be super super Innovative eventually other Frameworks like even angular saw that Innovation saw the parts that would be the most useful to the average angular Dev and took those things both of these Frameworks are innovating but they're doing it in very different ways solid is pioneering new Solutions and angular is trying to take those Solutions and make them useful to existing deps now think about the framework Astro your immediate thought is probably that it falls in that first bucket of doing things that are truly unique Innovative and in some ways it is but I don't think that's the goal of Astro the reason I started using Astro was actually a quote that used to be on their homepage I found that Astro was the first time that the existing tools I was used to from the JavaScript ecosystem things that I would use with stuff like react could be used well with a static site Builder so I wanted a static site like a blog or a marketing site I could take advantage of all the fun tools like I don't know Tailwind that I was used to using and react and get the same benefits but with a static site Builder Astro has obviously progressed a ton T since then and is used for all sorts of awesome new things but today they Dro one of my favorite updates to date because this update takes one of my favorite new features from nextjs and makes it accessible to basically everybody regardless of your infrastructure which to be clear is not the case with the nextjs version that new feature is being called server Islands I'm Blown Away with this feature it's such a cool solution to getting the streamed responses benefits that we get from something like next while also letting you statically post your content and all of those words might not mean much to you yet but we're going to get to what they all mean as we go through this because this is a really cool update before we get to this we talk about next before we get to next we talk about Islands you might be curious what an island is let's say most of this content is static but you want this book Now button to be a mini react component that has all the fancy interactions you'd expect from react maybe you have one of those chat widgets in the corner that has all the fun behaviors you would expect from the little built-in intercom chats you can click and ask questions about the product what if you didn't want all of those to be part of the exact same react code base that powers the whole site what if I didn't want react code for this part on the left I just wanted it for this button maybe for that intercom thing in the bottom what dynamic Islands do is they let you have little islands of dynamic behaviors in your site and when you use them with something like Astro that means you can write the whole site as a static template using something like Astro syntax or even using react directly but you only send the JavaScript to the client when you tell Astro to do it let me find it in their docs oh look at that their docs even describe this more directly for us an island refers to any interactive UI component on the page so if the header is interactive that could load some JavaScript and be included that way but maybe the static sidebar maybe the content is static as well maybe the footer static but you have an image Carousel which is also interactive so to make something an island all you have to do is mount a component from react or solid or whatever framework and you specify client colon load now that component is interactive on the page it will actually send the JavaScript down let me go initialize an astro project so I can actually show this include sample files typescript strict yes yes yeah the as CLI is dope get those depths cool and here we have the project get commit and it we have our initial commit let's add react quick because it's pretty easy to do now we have react added I'm just going to clear out some of the junk here to make the markup a little easier to read and now we have this nice little blank page says hi nerds let's make a react component we'll do our favorite counter. TSX export function counter con count I have to import react so now we have our counter and if we want to use this it's as simple as putting it in the code so here we're going to paste the counter it's going to import theoretically it should just work and if we go here we see count to zero and wait when I click it it's not working what's going on this is where where the concept of islands gets useful by default your components are only going to run on the server be it in build or if you're hosting your Astro app as a web service on request by default when we were to run build this would spit out HTML that includes this in the HTML with no JavaScript to actually run so if you want this code to run you don't want to just include this component CU it looks nice that's when you would specify something like client load hopefully it would spell client right and now that it says client load this will actually set the JavaScript to the client and that is what an island is it's a component that loads its JavaScript because you told it to and what's cool here is I could have multiple of these in different places in the app and none of them interfere with each other because they're all loading their JavaScript separately that's what an island is instead of having one giant react app that runs the JavaScript for everything an island is a little piece of your page almost like a component that loads its own JavaScript for its own needs so most of your site can be static and then just those Dynamic Parts can be dynamic so that's the first thing we need to understand because as you saw these are server Islands not Dynamic Islands or client Islands these are server islands and while it would be fun to dive straight there I think a quick tangent to nextjs might be useful here so partial pre-rendering is an awesome new feature in next that is admittedly hard to set up on your infrastructure versell even has had a lot of tough work in order to make this function because it's hard to do in order to understand PPR it's important to understand a little bit about content streaming if you go to a website like uh let me just initialize a next app I'm going to be writing a lot of code for this one aren't I okay I have a really basic example here exper default function home so this is the homepage all in react hopefully we all know basics of react I have two elements in this main I have the div for this is static and then I have this slow I'm going to read this for slow page to slow component so we have slow component which has to wait for 4 seconds and then it returns so if I was to bun Dev this guy you'll see the page is taken it's Time 1 2 3 4 however long and then this is static this is dynamic and slow that sucked we had to wait the whole time and if I go back to the network Tab and we refresh this again you'll see it's taking forever it's just sitting in that pending State and it took the whole 4 seconds to load that sucks if you have one element on your page that takes a while to render for any of many reasons it takes way longer for that to actually run so how do we prevent that this is where one of the coolest new features of modern react stuff comes in streaming specifically out of order streaming so if we wrap this with suspense so we're just wrapping the slow component in suspense we can even add a fallback fallback equals cool I accidentally deleted the slow component when I did that cool so we have the fallback with loading and then slow component comes in and if we reload this page now it loads immediately with the loading there and then the content comes in if we go back and we look at this request you'll see something interesting I wish it let me zoom in more easily here I lowered the time so it' be easier to see this you see that little green bit there that's how long it took to get something back and then everything after is what happened afterwards so the green bit there is the server sending its first response which is the content of the page the blue bit is the stream it's everything else that comes afterwards so the cool featuring next that I'm showing is that you can wrap certain parts in suspense and now these won't block a response without this suspense boundary react has to wait for this component to render before it knows what HTML to send the user by putting suspense in we're telling react hey by the way you can skip this part for now send a response to the user when it's ready and then update that later on out of order which means we can put this anywhere I can put it above I can put it below I can put a different component react doesn't care and react will figure out once this is done resolving how to stream it to the user and put it in the right place on the page that's so cool the fact that we don't have to think about where it goes on the page just Works within react is one of those subtle Miracles that isn't given enough credit but it's awesome architecture enables really cool things but there was a catch in order to get that first page in order to get the thing that was initially responded with to the user which would be the HTML that I have here if I just open this there skip all the JS stuff where we have the main content this is static and then this loading div in order to get this to the user we had to run a server which meant that we had to wait for for a Lambda to spin up deal with a cold start process the request generate the initial response figure out what parts needed to be streamed in and then send it to the user that's a lot of steps to do before the user sees anything and during that time you're going to be staring at one of those ugly browser loading pages that might just be a blank white page ideally if everything in this file is the same for all users all the time we shouldn't need to wait for the server to spin it up and send this first chunk down if this First Response if the part that's in green here at the beginning if that green bit there is always the same for all users why do we have to wait to send this part why can't we just cach that on a CDN that's what partial pre-rendering is partial pre-rendering is identifying what outer shell and template so to speak of your site is common across all users so that can be cached on a CDN and then the rest of the dynamic content can be streamed in when it's ready this is awesome because this means you don't have to load any JavaScript really at all you don't have to wait for a server to spin up you don't have to wait for anything you just load the static shell the same way you would load a plog off a CDN so you get that immediate instantaneous load time and then the server can stream in the dynamic Parts when they're ready this is an awesome pattern but it turns out it's pretty hard to implement because you need to have something that can grab both the CDN cached chunk and then send in the streamed stuff afterwards and handle that fast enough that you're not eating more performance issues forell has this work working on their infrastructure but getting it working on your own isn't Fun it might be easier in the future but right now it is hard to have a streamed response where the first chunk comes as quick as possible from a CDN and then the rest comes in later when the server is done generating it that is difficult to do hopefully this is useful context as we dig in to what Astra just released with their experimental server Islands I think I need a scal draw so if we have our server and we have our user the way things used to work is the server would just send one response to the user but with PPR and serers side rendering and all these fun things it all gets more complicated so instead of doing PPR first we'll do streaming initially so the way next streaming works is the user requests to the server hi give me site and then the server sends after doing all of its work to generate the stuff HTML shell this is where it sends all the things that aren't suspended and this will also include things like JS tags like CSS all of the sources in add data the client might need so it can start loading those things it can load the font it can load the CSS it can load the JavaScript bundles it can load all of those things while the server is continuing to do more work so afterwards the server sends another response which is whatever was inside suspense the interesting thing here is the server sends effectively multiple responses to the user the first one it sends is that HTML shell which is everything that's not wrapped in a suspense and then everything that's in a suspense it just slowly sends over so it could do this once it could do this five times it could do it however much it needs and if we go back to my code example we can even do that let's change this slow component so that it takes in a number props number I'll say time number and we'll wait for props do time here we'll pass one that's 500 we'll do one that's a th000 we'll do one that's 3,000 and I'll change this to say and took props do time milliseconds cool nice so now if we load the same page you'll see this is dynamic took 500 this is dynamic took a000 and this is dynamic and took 3,000 and if I start recording that again you'll see all of these came through as updates as part of the stream nextjs handling that for you and meaning that the user can get a response faster is awesome so this is how nextjs streaming works it sends whatever isn't suspended and then it sends the things that were suspended after how nextjs PPR works is a bit more complex we no longer have just the server instead we have what call The Edge and the edge has two additional places that it is going to communicate with it's going to communicate with the CDN and the server so this time I'm going to use colored arrows to make things a little clear we're going to make the CDN blue and we're going to make the server red so the first thing we did is we send to the edge hi give me site as the user so what we'll do there is we're going to forward that request over to the CDN and the CDN is going to give us the same thing that our server would have given above here so this HTML shell that would have been generated by the server is instead coming through the CDN so that I can come way faster and while that is happening we are spinning up the server so at the same exact time this is happening and I'll put that there to be clear we also hit up the server and say hey server start spinning up now the server doesn't know jack about this CDN these two don't know about each other at all so the first thing the server does is it sends the exact same chunk that the CDN sent and then this first server request which is the exact same content gets killed because we already sent what was in this to the user but then an important thing happens a streamed update comes through and the streamed update can operate against the cached page the same way we were doing before and then that third cast response can come in as well this diagram could be done much better but the point isn't to make the most beautiful possible diagram is to Showcase how this actually works and then the server sends the streamed updates and those make it to the user and it behaves the same so as you see going from here to here is a bit complex because now you have to deal with a lot of different types of infrastructure in order to orchestrate all of this you need to have an edge that's smart enough to hit a CDN and a server at the same time send the CDN cached shell to the user kill the first response from the server and drop it and then forward these additional suspense changes to the user somebody as how does the CDN get updated that's just part of your build process when you build your site when you run next build or run CI it will spit out these changes that go to the CDN because again this requires the first chunk to be static and shared between all users so if we go to the example in the next docs which I closed on this fake e-commerce site the logo will be the same for everybody the search bar will be the same for everybody the picture of the item and the description will be the same for everybody but what in your cart will be dynamic and the recommended will be dynamic so the static shell that is the same for everybody that's determined on build or on the first time somebody goes to the page that can be thrown in the CDN and then everything else gets streamed in afterwards the thing I'm trying to Showcase here is that this is slower because you don't get to see a site immediately because you have to wait for the server the server takes more time than a CDN period so if your goal is to get the user to see something as quickly as possible you need a CDN but if I was to put this CDN in front here instead the server never gets hit and that doesn't work that's why versel has created this complex infrastructure with an edge that goes between the CDN the server and the user in order to make sure all of these chunks get orchestrated to the right place at the right time this is complex and I'm not expecting everybody to follow this because this is not simple and that's why we need to talk about how Astro does it how Astro server Islands work first thing we have to do delete this Chunk in the middle Edge that is now gone now we have to move the CDN over and also delete all these arrows that are connecting to it because the way way that Astro server Islands work is a lot more similar to how sites worked traditionally in the past where the user requests from a CDN and they get back that static shell then some interesting things happen the user has to load whatever JavaScript is here figure out that there are some holes in the Dom so if we like write this out as code we have like HTML div static stuff div now we have div uh we'll say needs content equals SL something if this is the content of the page then what we've loaded now is this HTML with this div and then this empty div that has this specifier in it that it needs content and it needs it from SL something so here is where this gets interesting we're going to grab our old server we're going to delete all these arrows once the user has parsed the JS loaded the HTML and realized oh in order to fill this ho in the template we need to get more data from the server that's when another request is made this to the server so this request would be going to change this off of that syntax SL server or SL something is what I said so they are now requesting from SL something and now the server can generate whatever element needs to go into this box and then the server sends that well let's say there's two of these like I had an example above so if something I'll have div needs I just realized my face is covering this isn't it thank you guys for the heads up there cool sorry about that here's the HTML content equals slash something else so the server or the user can then immediately once finished loading request something and something else at the same time I'm going to move the arrows accordingly so they requested something and something else and now since there's two requests going on the server can be a boring old server and just respond with these two responses whenever it's ready this makes things a lot more simple you can see why they would want to do this so this is a really elegant solution where the server islands are a way to tag a given element and say hey this element needs more content from the server this does have a cost though which we'll get to in a bit but first I want to try it and play with it because this is an awesome new feature Mark your components with server colon defer and they'll now be rendered on the server at runtime independently from the rest of your page you can now safely cach these Pages at the edge and get great LCP which is largest Canal paint scores that's the great part is you can take the static part and throw it in S3 throw it in a generic CD and throw anywhere the way you would with any traditional CDN and static site generator and then the dynamic Parts can be requested and fetched later on so if I was to go back to the Astro demo here we had this counter client load instead we're going to make a new card we'll call this uh slow card slow card I don't care about this additional stuff we'll leave the title in the body I'm going to kill the link but we're going to do time number pass time we're going to kill the link tag cool so I just created an arbitrary block now where in this component we can pass it in amount of time that it will now block for so obviously if we were to generate this as a static page this won't be included because it's going to take some amount of time we want this to be dynamic so now if we go back to the page and below the counter we do a slow card it's going to type error because we need a title equals this is slow body is cool and we have it wait a second cool do you see that that took some time to load in I'm curious how they did that in a way where the rest of the page loads I think the default Behavior now is streaming in Astro that's the only way that would make sense interesting okay so it is smart enough to just do that can I tell it to block is there no way for me to say wait there I'm very curious I did not realize Astro just blindly did the equivalent of suspense whenever there's something that takes time very interesting Fred I will send you this VOD and you will hopefully fix more things for me a bit annoying to demo but the thing I wanted to Showcase here is that this code here was put under a promise so this card this is slow took a second to load but it did that load during build which means that it can't be dynamic so let's say instead of it just showing that we also render what time it is so if I go back to slow card and we add here const current time equals cool and here I'm going to change what this renders and in here instead the body we're going to render the current time we don't see any change here because I'm in preview mode so I have to Bun Run builds and now Bun Run preview and you'll see there that it's 55246 even though I'm refreshing because all of this content is saved as an HTML file and if I was to go into dist index HTML and I open this in a new thing so I can format it so here's the HTML that's being sent from the server which we know because it's being saved here and in here we have the welcome daster title we have a bunch of inline CSS we have the style for all the slot stuff what we care about we have the count is and then this indication so that it can mount stuff in Astro World to take over once the JavaScript loads has these Astro Island elements that handle all that as well but we have in here hardcoded as HTML 55246 p.m. which is the time that this was built this will never change even though the code that we wrote is dynamic because in this project we specified in the config here that we're outputting a static site so now I'm going to delete that and we're going to rerun the build Bun Run build Bun Run preview same deal even with static removed because Astro by default wants to generate a static site it's still trying its best to so it made a new index HTML file with the same stuff going on inside of it you see that this is slow you can see the hard-coded time here what if we want to be be dynamic well we can go change in the Astro config and make it so that the output mode is server now we're going to kill this and run build and preview again I have to run build because I want to show the behavior difference and it only shows it if you build and then preview the astr versel serverless adapter does not support the preview command what does then how do I preview this locally I'm in pain had to switch adapters to be the node one so I can run it locally and now I should be able to run it again cool so now we're running Astro as a server what does that mean well if we look at DIS we no longer have that HTML file in fact there's no HTML files here at all and if I was to go load the page now it's going to do the streaming Behavior where this gets streamed in the catch is the initial page is coming from a server as well so you won't get those super fast response times you get from a CDN because that initial response has to come from a server in this case that server is my computer but that server has to be running has to be reached by the user told hey here's what I need and then the server can generate the HTML on demand and send it to the user so we have to eat all of the time it takes to reach the server to spin up the server to process what the user's looking for Generate the response and then send it to them and if the server's far away enough that sucks but also we get that streamed in response after so the content of this div doesn't come in until after the page loads because the server can fill that in this is working in this case literally identically to here the streaming in Astro and the streaming and next work exactly the same way so all we have done here is this but that means we're not getting the benefit of the CDN ideally that first response comes from a CDN because it'll be much faster than waiting for node to spin up a server and send a response so how do we deal with that how do we put a CDN in front that's what the new feature is that's what the server islands are introducing so if I go back here and we look at how we actually introduce this we're going to change the output mode to hybrid and we're going to turn on the experimental server Island feature and now we have the fun new feature defer now if we rerun the build now if we look at the distribution the client code has HTML again so you can take this client directory and throw it on a CDN because we can load this page in fact I can even do that if I yoink this reveal and finder what's the easiest way to host a server from the current directory nowadays it changes every time I ask I swear MPX HTP server so what I'm doing here is I'm just hosting the HTML file that came out so if I copy this link I go to the browser and paste it the page loads in the JavaScript even runs because again that's all part of that static client bundle the client code has the index HTML and it has this JavaScript including the JavaScript for the counter that we wrote all bundled in the client side stuff but you'll also notice that this chunk here is missing that we didn't get the HTML I'm going to bring that back in a very interesting way you'll see here that we're getting the error that it's requesting server Island slow card and it's not able to get that the reason is because we're not hosting the server part we only are hosting the client part right now this is all static I'm running no Astro code on the server right now I am just hosting this client side code as a generic CDN server you can throw it in S3 wherever else but we're just hosting the HTML the SVG and this JavaScript bundle we're not running any serers side code so I could go brute force that to run in here but it's going to be much easier to instead go back here run the preview command and now if we Local Host 4321 again this is where things get fun the HTML it sent in came in first and I can prove that we can go into the client code here and I'll add some stuff here hi via hacking the HTML oh I think that's part of the other element so it's mad that's got to be the case oh it's part of the island cool if I move that out of the island and put it above here we have the high via hacking the HTML which again only works because the HTML client code doesn't get touched by Astro on the server this is a static h HTML file that could be served however the hell you choose and then the other parts come in dynamically after so the HTML loads and you'll see if we look through this HTML file there's a lot of  going on what we care about in here it's the slow card here so we have this server Island start markup the script that identifies which island we're loading data for it specifies the component ID specifies the export specifies the query selector to get to this element it specifies the data that we're passing as props which I showed you before is all the data that I put here so all of this is being sent to the server almost like HTM X style like posting with this stuff saying hey here are the props for the element that I want and then and only then does the server get a request spin up and the server's request isn't load the page like it is with next the server's request is I need this specific component's HTML so when the page loads it Parts the JavaScript and it realizes oh this element is missing I need this specific element's HTML hey server here are the props here's the element can I have the actual HTML code please and then we literally post with this Json to server Island SL slow card for the specific component we're trying to get we literally are hitting up server island slame of component HTML I can prove that by console logging what it puts here console.log again this code doesn't get run by the server here this is all client side here here is what the server sent HTML cool and if I open up console and reload this we'll see here is what the server sent sent an Li element with class Link Card data Astro yada y H2 with more Astro data this is slow P 60518 p.m. and if I refresh we'll get a different time because this is being dynamically generated by the server so the way that this works if we go back to my diagram is the user load some content from the CDN an HTML file they par HTML file they parse the JavaScript in that file and they realize oh I need these additional elements in order to finish this page load then it sends those things as a post request to the server with all of the content that it needs so the props for those components and the server sends down as a response each of those individual HTML chunks that's what server Islands do so there's an obvious benefit here the obvious wi is that anyone can host this if they already have the ability to host a website through a CDN and they have the ability to put a node.js server somewhere this makes this very easy to adopt for existing developers in existing Solutions without seeing any compromise on the quality of experience users have the catch is that the server can't start doing anything until the client has loaded the JavaScript the benefit of this flow and the thing I was trying to highlight here is that with nextjs PPR when the user makes the request you can immediately start both the server that needs to generate more responses as well as the CDN which is responding immediately so you get a Best of Both here where the server can start responding start spinning up and doing what it needs to as soon as this The Edge gets the request but you don't have to wait for the server to start before you can send something so we're able to start these botht in parallel what the Astro solution does is it defers that first bit the server starting it now takes longer for the server to start the server has to wait until the client has loaded the JS and then pinged it with that post saying hey I need more data so if the thing you're bottlenecked on is how long the server takes that sucks now it takes longer for that content to pop in but we do have the big benefit the hill I always die on which is the quicker you can show the user something that isn't a blank white page the better because we get a CDN response immediately so this is the the checks and balances the benefits and the negatives as long as you're getting a CDN response to the user as fast as possible it's going to feel really fast I know that because that's how ping works the vast majority of why ping feels fast is because we static cache every page and the data comes in after you've loaded the static page after it's pared the JavaScript and then it makes a request to the server so in most regards it's slow the actual time it takes to get that final response is slower because we have to wait for the user to fetch the page load the JS parse the JS figure out what it needs and then request the server and then the server can start doing work with the new next PPR model you can run those things in parallel which has awesome benefits but also as we showed is pretty complex infrastructure wise so if you're not willing to shake up your infrastructure to do this but you really want to get a static response to the user as quick as possible without compromising on the ability to have things like the cart the recommendations all those types of things in like an e-commerce world come in dynamically server islands are a really good compromise I am hyped with what they've done here it is a genuinely cool way of seeing the benefits as well as the problems that we're trying to solve in the next World recognizing that the CDN response is really really valuable but generating Dynamic responses within the page is also valuable and we shouldn't have to do all of this by loading a dynamic Island that fetches Json and then renders on the client there's no reason we shouldn't be able to have a page where most of the parts are static and then those little additional personalized chunks come in a bit later and that's what Astro has enabled here with server island is actually very very cool and I am honestly planning on implementing this on my own stuff a great example of what this would be good for would be something like a hit counter if I want to have on my blog which by the way I do have a Blog I don't update it enough so don't make fun of me for it if I wanted to have a hit counter that tracked how often this page has been visited I wouldn't want to have the server block you from seeing the page until that's done and what's cool with this is that I can now have that one element the hit counter come in when it's done and then serve the rest of this through a static CDM it's great one additional benefit is since you're not running next in all of its giant piles of JS you're LCP is a decent bit faster than it would be if you had to load all of next which is cool there are definitely benefits here PPR needs to block on this JS to load before paint yeah that's fair but also to next's credit having to load a little bit of JavaScript in order to make sure everything comes in properly after and the hit is only a 20% LCP is not that big a hit I would have expected closer to like a 2X I don't want to go too deep in the performance characteristics cuz like my opinion is that everything's like a Stones Throw from each other now and the really cool win with server Islands isn't that it's the fastest solution it's that it's by far the most convenient Solution that's fast enough yeah thank you Fred for stopping by by the way the hill that I will die on consistently is that if a meaningful portion of your site is static you should be able to load that portion as quickly as possible this is part of why single page apps actually felt decently fast because you could get something to the user almost immediately and they would see something instantaneously the more time you have to spend on that shitty blank white loading page with the loading bar on top the worse the experience is for the user and if the site itself actually takes a bit more time but they get something meaningful back earlier it feels better than if the whole thing comes faster but you're stuck on that loading page waiting for it for a while like if I go back to Ping if I go to my dashboard that little loading spinner there even if it took 5 Seconds to load the rest of the stuff just having that there and feeling like you're getting something feels so much better than the blank page from the browser that you would get instead so the cool thing with this that I'm pumped every framework is now focused on making happen is that we can get the First Response through a CDN the margin for error between next solution and Astro solution is just bickering about numbers that I would argue don't matter that much because both feel 10 times faster than not having the first Bites come from a CDN let me know what you guys think I know all these different ways to render stuff on the server is getting a bit confusing I hope that this can make it a little bit easier to follow until next time peace nerds




## Serverless A Comprehensive Breakdown - 20250101
it's no secret that I'm a pretty big fan of serverless even if I just put out a video about why we're moving off of it that doesn't mean I'm moving all my things off in fact I was a new service that we built for upload thing generally speaking everything I build is still built around serverless paradigms but I haven't taken the time recently to break down why and to really showcase the truth of serverless I've also not been able to do it without a certain sponsor behind me not that they ever had meaningful influence over the things I said about serverless but I'm hoping that we can have a bit more of a trustworthy conversation about it because there's a lot of things that people do and don't understand about building serverless applications there also some fun little secrets that I think people have missed about what makes serverless applications in the serverless mindset for building really really great for most software developers that doesn't mean we don't have a sponsor today though so let's quickly hear from them today's sponsor is Prisma you probably know them for their omm but what if I told you they actually have one of the best database products available today you might be surprised about Prisma postgress because I hadn't heard about it until recently and is mindblowing they're not exaggerating when they say it's three clicks to deploy it's absurd it's like versel levels of DX but for database setups and you get five projects on the free tier which is insane that's a lot of database to be hosting for free and it has some features that I've honestly never seen before that are super cool like I'm just going to command f for cash what at the database level at the orm level you can put in a cash strategy and now you won't even have to connect to the database to get that value back it'll be instant on their Edge Network so cool and it's also serverless ready for all of us hosting on things like versel and netlify they'll pull the connections so you don't have to worry about hitting the server too hard it's it's so good oh and for those of you who like real-time updates in your servers when something changes in the database they got you covered you can stream in results so you can call Prisma do user. stream here and now you'll get a response in in event stream whenever something happens how cool is that setting this stuff up yourself is not fun I've never SE a service that integrates the OM this well with the database itself providing features that are essential to most Services thanks to PR and post Chris for sponsoring check it out today at soy. link prismad DB the truth about serverless this is going to be a complex topic before we go too far in and believe me we're going to go deep so if you're a person who knows serverless well but doesn't necessarily understand every detail of what's good and bad about it stick around but we need to do a very brief top level overview of what serverless is obviously serverless doesn't mean no servers what it means is you're no longer provisioning servers for your application and for your code if you were building things the traditional I don't know lamp stack way which is the cool thing when I was a kid lamp stack stood for Linux Apache MySQL and PHP and when you were building with lamp stack you would run all four of those things on the same server you'd have a server that was running Linux had aache as the like top level of orchestrating the HTTP requests you had PHP which would actually do the work of generating the pages and you'd have MySQL which was the database things would connect to to get the data write it read you know what a database does hopefully then we had the mean stack which was Express angular and node and from that point the idea of everything running on one server started to fade due to a specific company called AWS so the way things used to work is you would have a box so we'll call this the old way and in the old way you'd have this box we'll say this is just running Linux you would have a top level in this box that was something like Apache then you would have another layer on the same server that was PHP and then one last layer on the same server which was MySQL to rethink how I drew this here let's make these all different elements inside as I was describing with the lamp stack think of this box as one server and it would run Apache PHP and MySQL all here and if you wanted to swap out the PHP code you would do that by ftping in and replacing the files that this PHP code was calling because PHP is interpreted you can just swap the PHP files out for different PHP files on the Fly and you're fine but then something interesting happened well two things the tech we were building with changed slightly we're like we would still maybe use Apache but usually we wouldn't even bother so the mean stack would be Express and node you would still have angular in here but the angular code wasn't running on this server the angular code was a script tag that was part of the HTML that Express would resolve with and then you would load that script tag probably from something like S3 to actually do the angular side or the react side if you did M Stack locally on your device but something quickly started to happen here which was that the tooling to swap out the code for the JavaScript stuff was complex enough that just ftping in and swapping it was not super reliable on top of that getting to behave was annoying so a combination of this and this little company you guys might have heard of called AWS I know they there's a small startup but uh they did something interesting they broke this up so instead of it being one server that has all these things in it they have one server that's just the express and node code and a separate server that is just the code and this enabled a lot of cool things it meant making changes to this didn't ever risk the Integrity of your database it meant you could have multiple of these in multiple different places if you needed more boxes to handle more traffic you can just run more of them and if they're all Conn to the same database it's fine and slowly we started doing this with other databases it wasn't just  even early on but the idea of a database platform being servers that are separately running from your application code was at a point in time a kind of New Concept the idea of connecting to a database on a different box somewhere else as the main way of dealing with database reads and writes on your API was weird people were not used to that at time eventually this went so far that we started having microservices where we have different Express node code bases entirely running on different boxes all using some database as the source of Truth a large inspiration for why we did this was the ability to swap out the code running on these boxes so this is running go code if this is running python code or something else and the ability to swap it without restarting so to speak wasn't there like it is in PHP the only way to properly swap out this code would be to spin up a new server with the new code start running traffic to that kill the traffic on the old one and then kill this box and this type of setup in order to swap what was inside of the box that users were hitting got more and more complex on top of that more and more of the state that we used to keep inside of this box like we would here with my SQL started moving out so instead of this being stateful in this server that we had running having a bunch of data that would be lost if the the server shut down we started making it so at any point you just kill the server and you wouldn't lose anything but at that point how much are we benefiting from having a long running server in the first place and what happens if we have a huge traffic Spike and we need more provisioning than this server has in it boy do we have a solution everyone's favorite kubernetes kubernetes was created to make it way easier to manage all of these different servers how many of them there are what codee they're all running Auto scaling groups with ec2 was also a big part good call out from Ryan I didn't know you knew the inaside this well good yeah ec2 was another path there and then eventually ECS and eks all built around these kubernetes Primitives the goal was all the same though make it so you don't think as much about what specific code specific servers are running instead you configure the ability to spin up a server and you can just spin them up and kill them whenever as long as your database is separate who cares because if you have one server or 100 servers if they're all connecting to the database fine doesn't really matter how many servers you have I've learned to just assume Ryan knows everything it's usually accurate yes but one of the the highest honors I've ever had was helping a thing click in Ryan's head it is magical to take someone who does know everything like he does it actually help them understand a thing they happen to not have an understanding of because they haven't done it it's it's humbling yeah Ryan a big part of why he knows so much is he takes the time to learn it and he talks to the people who he knows no better and is very willing to learn and be wrong but yes it feels like he just knows everything anyways enough of me explaining why Ryan carni is one of the smartest people in Tech back to another smart thing in Tech kubernetes I hope bringing up kubernetes and even typing that word out gave y'all a bit of trauma because one of the specific things I have tried to push with my brand and my channel is taking these things that work for very specific types of workloads in large companies and making sure the average developer knows they shouldn't touch them things like 100 % code coverage things like kubernetes might make sense at specific large companies but for the majority of medium to small-sized companies or even medium to small siiz teams at big companies they make a lot less sense do you know who else realized this AWS I think we have now contextualized how we got here first we had everything on one box then we had the separation of our application code and our database layer so that we could swap this out without losing our data then we realized we could actually run multi of these at all connecting to the same database and it didn't really matter which made it way easier to scale it made something like node viable I should probably point out that nod's concurrency model despite being great for iio bound things was not as good for heavy work so the ability to spin up multiple servers was very very useful for node specifically but to leave these here something started to become obvious at AWS why do we have to think about how many of these servers we're running and why are we running them all all of the time let's set up a theoretical scenario going to make a quick little diagram here let's say this is number of users and the bottom will just say it's time now let's say when our company started number of users is relatively small and we could comfortably fit it on just one server awesome let's build some thresholds out here let's say this line is the point at which one server can no longer handle the traffic this would be two servers this will be three this would be four for a long time we can get away with this but things don't get start to get messy until you cross a threshold for the first time and now we need two servers let's say we only get those traffic spikes that need that at very specific times like I don't know Black Friday caused our traffic Spike up a whole bunch now we're doing too much traffic to justify having this one server here so we need two we could set up an autoscaler to detect when the traffic gets to a certain threshold so that usually looks like is you pick a threshold we'll say here and when we see that traffic number of users whatever metrics we're tracking get to a specific point then we spin up another server so if we go past that point we have enough servers to handle the traffic this also means you have to write your code in a way that can handle running in multiple places and makes no assumptions about multiple users being connected to the same box but if you make all of those assumptions and you build this in a stateless way and you build in these thresholds to detect when something should scale up and down you can handle this the issue is how long it takes for that to spin up I'm going to copy paste this because I want to have some more fun examples let's say instead of a slow ramp up because it's a Black Friday let's say instead the ramp up is because Theo mentioned you on Twitter push you in a video let's say the ramp up looks like that instead so it happens almost immediately where in seconds we go from a small number of users to 3x or more we pass this threshold so we spin up the next server but do we have even the capacity to notice that we needed two servers not one the servers take time to spin up and you need to have enough servers to even know how much traffic is coming in so if we broke our threshold we don't know how hard we broke that threshold necessarily so how many servers do we spin up gets complex and as a result what I would see many companies do and to this day many still do I was guilty of this myself at Amazon we would just provision up to our theoretical Peak so instead of running one server or two servers we would just always run three because the alternative is some users get an error page or get a hanging connection because there was no server to actually resolve their request because the server that we had was over burdened and underprovision this stuff sucks I want to be real clear about that doing this is not fun if you're the type of person that finds this fun cool awesome you're going to take a lot of my money in the process but this sucks and it's funny somebody said just don't use JS in chat because a lot of other languages make this even worse rails blocks on iO so if you're doing a database check for one user the next user can't even start their request yet at least with JavaScript IO won't block the other things going on when I'm waiting for the database to do something I can process other requests at the same time you can build this yourself in other languages like you can build this type of concurrent model for handling non-blocking IO separate from your requests in languages like go maybe you can do it in Rust but at this point I hope youall know how miserable it is to do concurrency and parallelism in Rust even the like rust Community seems to have mostly acknowledged this and written some awesome content on how hard is to parallel and multi-threading stuff correctly in these other languages but non-blocking IO is a difficult problem and no rails has not solved it rails has a cool thing called rack where you can spin up multiple threads on one box but each of those threads can be blocked by IO that's just a fact so believe it or not JavaScript is actually a pretty good language for running in environments like this when you consider the balance of the code being much easier to work in and digest because you're not writing heavily async code the only code base I've ever seen that is truly fully threaded and is readable was also written in Elixir because Elixir was built for these things but yeah if you think rust is beautiful you haven't written enough concurrent in asyn Rust because that code you lose a lot of the beauty really quickly anyways if we wanted to make this solution work great there's a few things we would need to do so here are like the bullet points of how to make this great and as again I'm talking about the load balancing solution so the things we'd have to do to make load balancing work well are make it so servers can spin up fast because if I had to handle a traffic Spike I don't want to wait two minutes for a server to spin up I need that ASAP so cold start times and the time it takes to spin up a server is much more important we also have to make sure that we can detect the amount of traffic more trivially make traffic patterns easier to track and of course we need to make the code stateless so of course Amazon worked hard to do all of these things they went out of their way to make the spinning up of a new server as fast as possible to make it easier to use other tools to actually detect what traffic levels look like so not having a server capable of handling the traffic doesn't prevent you from knowing how much traffic you're getting and encouraging us to move our state off of our serverless into things like their database products their fun new serverless database Solutions stuff like that but in order to make a load balance solution work well these things went from stuff that no one ever thought about to high priorities I promise you up until recently nobody in the PHP world was thinking about how long it takes for your PHP code to initialize or to spin up a box from scratch and get PHP running on it these weren't things people thought about because they ran PHP on a fixed number of servers that were always there so they didn't think about how long it takes to start up because they don't start it up they started up 17 years ago and haven't touched it since so these aren't things that most of these devs thought about but in order to handle these types of traffic patterns and these behaviors ADW has had to think about these things and I think those who are tuned in enough are going to see what happened here they accidentally invented serverless serverless happened naturally when the efforts were put in to do all of these things so that load balanced Services could spin up faster because if you need to go from one server to two servers to three servers you need to be able to handle the fact that there's different state on those different servers you need to handle the fact that these need to spin up almost immediately you need a way to know how much traffic is there so you know how many servers to spin up so the obvious question that led here is what if it was automatic this is why serverless exists the process of automating load balancing almost naturally comes to the conclusion of rebuilding Lambda and the reason serverless works this way is because it's where you naturally end up when you try to optimize these problems so to actually explain what serverless is because again there's a server is we've abstracted a bit further so if we go back here to the distributed mean stack example where we have servers 1 two and three and all these servers are running Express in node and we have our database I'm going to move this separately because I want to separate these into a clear set of things a quick way to diagram things differently from what I was showing before is if we set this up as stateful on one side and stateless on the other because this code needs to be able to run and die and handle all of those cases so we have to offload the state over here the state could be in State could be in redus the state could be in a lot of different places but when these servers need State they have to get it from somewhere else instead because we need to be able to kill this server at any time or spin up another next to it and not lose track of your user information and stuff like that and when you separate things this way the next step almost becomes obvious I'm going to quickly change this to be your express code make this a bit bigger so it's clearer because this server is running your express code and node which is what the code is being executed on so now if it turns out you need more traffic you have to spin up a whole another one of these boxes and these box are running Linux so we have to wait for Linux to boot so now we have an empty box with just Linux then once that's booted we spin up node we have to load in node all of its dependencies everything else and then we load in your express code and now the server once it's processed that code Jed it launched it and got it running now after however many seconds if not minutes that all took oh and by the way you have to form a database connection too notice to connect to your database to be able to do things once all of that work is done now this server could start responding to requests what if we moved the express code though what if all of these servers were already running but without your code in them you could do this yourself as I showed before you can just spin up a server for all the different things that you might be doing and all of the concurrency that you might hit all the user counts you might reach you can spin up the right number of servers for that but it' be hella expensive but if your Amazon size spinning up that many servers and just keeping them around isn't as big of a deal especially if you are dealing with the traffic of like half of the web because if one website is spiking in traffic that means other websites aren't so if you have all of these servers that are already running and you're able to temporarily share these with people so that effectively it's a different layer of the same instruction where when you're renting a server through ec2 they're not going to a server rack plug pluging in a new box that they just bought for you and assigning it to you they already have a bunch of these machines spun up ready to go they're just giving you a virtual layer in one of them so what they've done since and what surus actually is is they've abstracted it one step higher now they're not just running a server waiting for your code to come take over and run it indefinitely now they have all of these servers idling waiting for a payload the payload could be a Docker image but generally they don't recommend that recommend using their images so you can use their pre-provision servers because now when a user makes a request all they have to do is move your code in handle the request and then move it out that's what server list enables it's not that there aren't servers is that you don't own them the same way in the previous model all of these boxes are things you could see in your AWS database you had a server that was my server one my server 2 my server 3 these were yours and they stayed around until you told them to go away the what serverless means isn't there are no more servers it means the part of what you own no longer includes the actual servers because the server is only running when a request is being made so it could be an event triggered through sqs or like you uploaded a file on S3 which triggered a Lambda there's a lot of different reasons that one of these things might spin up but by default they are not there and your code is just sitting in S3 waiting for one of these servers to receive a request so that it can load in that code and start to execute now we're try to get the good questions does serverless mean the dependencies get installed for every call effectively yes oh AJ's here good stuff please correct me if I say anything stupid I'm trying to to do a very dumbed down explanation of how these things work but if I say something that's like outright egregiously incorrect you know what you're talking about please correct me doing great stuff are awesome that's like the serverless God says I'm doing great cool we're doing good so far boys this is actually a really good question does serverless mean the dependencies get installed for every call for now I'm going to say yes I'm going to describe it and then I'll show you how it's not fully true but for starts yes if I have a service that has a low number of requests let's say one a minute or so the request comes in AWS sees the request and says oh this request is to this URL which means it needs this code to run so to be very clear not only do you have to spin up all the dependencies from your code base so any node modules you have any complex stuff there not only is that all to get included you also have to form any additional connections so if Express is using an OM in your JavaScript code that then has to form a connection to your database to reddis to whatever else and the forming of those connections can take time because again back in the old server full days where everything was on the same box they didn't care how long it took for PHP to connect to my SQL because it's already connected who cares suddenly we have to care a lot more because that is now a blocking thing that keeps your code from executing so if it was a 5-second connection time that you only ever had once in serverless all of a sudden it's happening hundreds if not thousands of times a day depending on the services that you're building this also meant that things like balancing how you connected to your database mattered more cuz like a default postgress deployment on Heroku had a maximum number of connection of 10 10 connections could be made because again they were assuming you had one to 10 servers that were always connected but if I have 15 users I might have 15 connections and now the old way we connected to databases started falling apart and that's why we started seeing things like PG bouncer PG Pooler and all of these tools to abstract and build a way to hold connections so they could be shared across different deployments but as I mentioned before we were building all these things anyways in order to make server backed load balancing work as well because it would really suck if the 11th server shows up and all of a sudden your database can't be connected to because it had a limit of 10 connections we had to solve these problems but as we went further and further with those Solutions we made this way more viable and now the term serverless database despite sounding kind of dumb because it is kind of dumb what it actually means is the server that your database is running on is prepared to handle an absurd number of parallel connections because if you have 1500 users you might have, 1500 connections to your database even if you're not reading and writing too much data from it so this just sounds terrible right like why would we do this well there's one piece that makes it way less bad than it sounds when this code responds this box doesn't immediately die it sticks around for a little bit it holds the connection that you made and if another request comes in fast enough it will handle that for you which means you don't have to pay the cost of moving this code over you don't have to pay the cost of jitting the code getting it running you have to pay the cost of connecting to your database and all those things it's already been paid it just sticks around for the next request and if you have enough users and enough relative traffic the number of times you're eating cold starts goes down quite a bit but if you have a traffic Spike if you have a traffic Decline and then it goes back to normal or you just have like an event where a lot of people are saturating existing lambdas and then one person makes an additional request past your current provisioning you will eat a cold start so we needed to reduce the cost of those as much as we could and we have the cost of spinning up your database connections the cost of insing the JavaScript code the cost of a lot of these things has gone down significantly and now you can run things serverless and get surprisingly great performance if architected correctly now that we have broken all of this down I think we're finally ready to get to the thing I actually want to talk about for this video which isn't how serverless works or even how we got here it's the title up here the truth about serverless we talk about the truth we talk about the facts that we've just established first serverless requires fast startup times two serverless scales to zero well three serverless requires stateless design of your application code and four serverless costs more money than running a server for the same amount of time that's a cool call out from AJ pretty true too AWS want say it publicly but I wrote a blog post with code which proves that they're doing some predictive autoscaling pretty neat I call it proactive initialization that's really cool a% cold starts were pre-warmed but your mileage may be veryy interesting so even cold starts might be pre-warmed because Amazon is trying to detect those things very interesting yeah anything here that is egregious AJ I think this is a fair set of points to call out I'm going to do a a little thing up here fun potential tangents that I'm successfully avoiding we'll see how long I'm able to successfully avoid these for one is how Cloud flare uses V8 to avoid cold starts one is versel caching bik code one is HTTP connection methods for databases there's a lot of these things I want to touch on but we have more to talk about so it is relatively agreed upon that these are things that you have to understand and deal with if you're building in a serverless mindset speaking of building in a serverless mindset AJ has been helping us out a ton throughout this if I say anything and he disagrees and it's about AWS or serverless anything I am wrong he is right listen to him great stuff also streams on Twitch benchmarking a lot of these different things so if you're curious to see what this actually looks like to do AJ's a really fun follow and I have absolutely used his threads his content and his streams to keep up on these things I can't believe I wasn't following him that was pathetic on my part anyways I want to Riff on these things because I have a real spicy take and the spicy take is the thing that we're I'm actually filming this for here's my spicy take the requirements to build in a serverless manner make you write better software and here's where we get to get spicy the secret piece that I'm going to try and conv you guys throughout serverless is the biggest win for functional programming quite possibly of all time functional programming is the concept that you build a pipeline of code and functions and when given an input it will always generate the same output pure functions functional programming are not the most popular thing in the world I'm not going to sit here and pretend everyone's writing everything functionally functional programming isn't just a thing that we talk about because we're evil and we hate o or whatever it makes reasoning about your application logic comically simpler this one of those few places where I think I in the unit testing and testing World get along quite well because if your functions are written in a pure way where the same input will always generate the same output it is really easy to test it is really easy to debug it is really easy to reason about and some of the most complex code bases that I have worked in were made significantly simpler by using patterns like this like it was easier to read our insane concurrent pipelines for dealing with video inest for the content team I was on at twitch because it was written in elixir with good Primitives then it is to read and reason about I don't know a websocket server written in Rust if your code has clearer inputs and outputs and those pieces the functions can be composed in a way that is logical your software will be better and easier to maintain I have a few pieces of content where I talk about this there's a classic video one of my favorite tech videos ever want to find the original yo is this Brian will video I have a video on my channel of me reacting to it object oriented programming is bad is so good it's such a good video it got me into coding YouTube for real when I was younger and I I probably would not be a YouTuber if it wasn't for this and it wasn't for Brian unbelievable piece of content I would argue this is like a must-watch for all developers not even because o is terrible just to give you the perspective of how we got there and why other methodologies of programming are good so as I was saying with serverless one of the fun things of building serverless is that your state has to be separated you have to have your state somewhere else and when you're executing a serverless function let's say I have an API that you hit to get your user profile data so you're hitting this API you have a cookie on your headers that I'm using to know who you are and I'm fetching data from database to give you your profile the server cannot contain the that comes from the request it is passed to it and it cannot contain the database because that's running somewhere else so when you write this code and this pipe so to speak is being hit it gets two inputs the first input is the request the second input is the database connection so to speak and through those two pieces we are now able actually technically speaking the only input on the top level function is the request so this function takes the request it sees that this request is for the get user profile endpoint so it grabs the database connection and it passes the request in the database connection to another function that function checks the request to figure out who this user is once it has authenticated you and knows you're you it then makes a call to the database to get the user's profile info and then it sends that down to the user none of that state lives on that server it doesn't matter if we have one server doing that 100 servers doing it or 100, servers doing it as long as the database can handle the concurrent connections you're good but if that state is distributed all over the place or it's attached to random objects you need to update the server and you don't know what's going to happen to that connection all of those things it gets chaotic quick and most of the hardest problems I've had to debug in software have come from the fact that state is being put in the wrong places I'm going to drop one more hot take this is also where the HTM X folks and I agree the fewer places your state lives the better and ideally your state doesn't live in places it doesn't have to like business logic like client side logic if you can move all of the state from your servers away from the client and all the client gets HTML it makes reasoning about the Cent and relationship with the server significantly easier if you can move all the state out of your serers side logic and endpoints and have the logic in the complexity of the code be there and the state is something that it's pulling in externally or receiving through a request reasoning through what happens when and how becomes significantly easier it's so cool and as a functional programming nerd it has gotten me excited about building and back at code again because the actual code I'm writing is so simple and all the other things we used to have to think about like how is this deploying what's the deploy script how many servers do I have what is the size of the server how many virtual CPUs how much RAM do I have all those things I had to start worrying about that again recently because I'm spinning up some lall stuff on the side I forgot how annoying it is to play The Guessing Game to make sure you've provisioned things correctly it is not fun and it's just another one of those things that's taking up room in your head like where does this state live or how many cores do I have on the server or how many requests can this handle all of these things are things that have been wasting time in my brain and when you are forced to not be able to have those things I actually find that the code I'm writing and the amount of my brain that I'm using is simpler it's easier to reason about these things I have been very surprised that these requirements aren't flaws they aren't things I have to worry about constantly these are things that make my code better there are obviously times where I can't do these things like if I have to have state like for the injest server for upload thing it needs to know the current set of chunks it has and where they are going and that is ephemeral state but it has to live on the server we are putting some of it in redus so that if a server dies immediately like we can recover but the nature of how it's holding connections is such that it should be on a server so it is but if you can build this way I would go as far as say you probably should because it makes reasoning about these things homic simpler but I have to Riff on two additional pieces here I think the first chunk of what we talked about helps explain why the requirement for fast startup times makes sense and why it's actually good because it makes everything from load balancing to serverless better I think I did a good job here with point two which is serverless requires stateless design of your application code just described why not only is that reasonable but it's actually kind of good and can make your code significantly better and easier to reason about but now RI on these next two scale to zero and it costs tooo much let's have a conversation about scale to zero this is a thing I've actually changed my mind on a little bit I'm going to tell this story of how I came to these conclusions by not talking about serverless we're going to talk about databases talk about two companies Planet scale and turo these two companies might seem pretty similar on the outside they're both serverless database providers that are trying to make it easier for full stack devs to deploy things and database work but there are some key differences obviously Planet scale is MySQL plus vest it is focused on massive throughput this bit smaller on massive amounts of data but the most important thing is it requires servers to run and that means it's expensive for them to run and I still love Planet scale we're still using it for upload thing and I cannot imagine building upload thing without it turo it's quite a bit different it's SQL light technically it's lib SQL because they forked sqlite because getting changes merg into sqlite is impossible but I honestly see lib SQL becoming the standard long term it's in a really good State simple to adopt multi-tenant multitenant in this case means that you can spin up different databases for different customers because realistically speaking are you ever trying to join data from different users tables like if I have two customers with upload thing that are uploading files to different places in different regions what is the likelihood I have to fire a query that is joining those two different customers it's effectively zero and if you can separate like different orgs different customers different applications to different full-on databases it can make managing those databases way easier and turo really focus on doing things like that where Planet scale they're using vitess to Shard so you have one massive database that is broken up based on different keys in the database so maybe they have different like groups of data in the database sharded based on the user ID they're attached to pretty cool but very different approaches to similar problems they are both trying to be serverless friendly databases though one more detail on turo side data stored in S3 since it's based on sqlite and as you hopefully know sqlite is just storing to a file by default turo just stores those files in S3 or some random Object Store and if your database isn't getting a lot of traffic and then a user goes to your service and now that database has to be hit similar to what we were describing before with serverless they just pull your database from S3 resolve the request see if more come through for a bit if they don't they just put it back in S3 and then it comes out again when the requests are being made that means insanely cheap to run since Planet scale has a server or multiable for each of their databases doesn't matter how many users you have each one requires multiple servers and that's expensive and that's why Planet skill ultimately had to kill their free tier whereas turo is one of the most generous free tiers I've ever seen in my life the free tier gives you 500 databases 9 gigs of total storage 1 billion row reads and unlimited embedded replicas that's insane for a free tier but when you understand the pricing model it makes makes a lot more sense because their pricing isn't based on how many databases you have costing them significantly more money because they're all running servers it's based on the fact that they're just storing that data in S3 this also why when I'm working on smaller projects now and the requirements for raw amounts of data are lower than something like upload thing with Millions if not tens of millions of files terso is a really good choice and that's why I use turo for pick thing yes I'm actually shipping too and production now and it's been pretty good experience overall so why am I bringing all of this up this is the planet scale pricing page one of the things that I really like about planet scale is their concept of branches a branch is a copy of your databases schema that is none of the data it's just the same schema so you can use that in Dev in staging whatever to make changes to the databases schema like add new rows add new tables delete things create new indexes whatever once that has been reviewed and people agree on it you can then do what's called a deploy request similar to a poll request on GitHub to request that these scheme of changes get added to the production schema but those development branches have to run actual servers because again Planet scale is running real MySQL v test servers which means each of these branches costs them pretty close the same amount of money that the actual database cost them which is why they have to bill hourly based on those branches previously you'd pay for a fixed number of branches but that got miserable quick like our bills for just branches were pretty rough especially when we tried to automate the creation of staging environment stuff it got bad so they changed the billing to be based on hours of usage so a month says 30 days 24 hours 720 hours in the month as they say that's two number the hours of the month so you can built in into their main tier have two branches open the whole month but if you need a third branch you have a third developer working on things you have to pay money for that if you don't remember to sleep these or kill an old one when you're done with it you have to pay for that and it's not that just nickel and diming you to squeeze every penny out it actually costs the money I'm not sitting here trying to demonized Planet scale it's the thing that we're using for a reason it's a phenomenal service and it's worth every cent but these types of features cost them a lot of money to run and the reason they built this feature is to streamline the process of deploying your changes so that it feels more similar to what we're used to with tools like GitHub and versel and all these other awesome things in the ecosystem turo gives zero I don't think they mention they mention branching in here yeah branching isn't like how many it's just yes there is no concept of branch hours or number of branches or any of these things because again it doesn't cost the money it's funny to look at to see yes where the on planet scale it's like complex math you have to do it's just yes yeah so this is where my brain started to flip cuz previously especially if chatting with Planet scale and Sam there I still love Sam we would talk some on scale to zero because the people who push really hard for scale to zero as like a reason to adopt a service they're doing that because they have no users and they want their service with zero users to cost Z and they want their service that theoretically might have thousands of users someday to cost a reasonable amount of money one traffic goes down they don't want to pay anything and when you're like me I don't even want to see how many gabos I have right now 192 so I have 192 projects and I actually go through and delete them pretty regularly so that's a lot and if I have all of those different projects very few of them are getting actual traffic and if I'm paying for a $5 VPS for each of those that's not a cheap monthly bill and now imagine each of those has multiple poll requests that have preview environments if each of those has let's say average five open PRS all of which have a preview environment and they all have $5 a month server for each of those which is generous cuz theoretically the production version probably needs more 192 Time 5 po request time $5 that's $4,800 a month for just my GitHub repos and then I was starting to play with turo more and thinking more about their cost model and realized the magic of scale to zero has nothing to do with having zero users on your production environments scale to zero doesn't matter for production and that is what has flipped my brain realizing that this isn't a feature that allows for you people with zero users to have a good time like yes it does that cool the benefit of scale to zero is you don't have to worry about things in your development environment your staging environment and all the other things costing you money when they have no users if you're running a $3,000 a month gigantic server to handle insane amounts of traffic and you're working on things in Dev you either run it on a smaller server so you're no longer replicating the actual production environment or you're doubling your costs for every single instance of a developer environment and I've seen companies doing crazy stuff to make that viable now to showcase the company I said I wouldn't talk about too much this is my personal versell account notice that it is Hobby tier I am not paying on my personal versell account because I don't need to the things that get enough traffic are on my business account but for my personal hobby tier is fine but what I care about here has very little to do with the number of apps I have which by the way I have a lot of apps deployed I the show more button show more again yeah I have a lot of apps deployed on a free tier and it's fine but even more fun if I go to something that had branches on it this actually be a fine one T3 Astro you go to deployments these are all the deployments for different PO requests that I did two plus years ago ready for the real magic I just clicked the link for a deploy from two years ago and it worked fine almost immediately inste this might have had no users it objectively had no users nobody is checking a preview build of my application from 2 years ago this type of workflow is only viable in serverless environments and it's the secret win that scale to zero actually provides if the cost of your service having zero users is that close to zero you can now do things that you would never otherwise be able to do we saw the branching model on planet scale it's cool they got it working but it takes so long to spin up a branch and it cost you money unless you manually sleep it and it cost you money anyways because s we spun up with something like turo just go spin up more databases who cares spinning up a new one is you just click a button it's there immediately because it's just making a new sqlite file you have to worry about those things and that enables workflows ideas and things that just aren't possible otherwise you cannot have a preview environment experience this good without something like serverless because because you can't leave this code running you can't leave all of these PO requests on a on my personal site on my free tier versel account you can't have these hundreds of previews up and ready to go where I can click any of these links and it will immediately resolve the page still this my old version of my website that is so cool and up until recently versell would just indefinitely keep all of these deployments available forever now there's an option where they'll automatically kill them in 60 days but I don't care why should I all it's doing is grabbing the right code from S3 that's it's been sitting on for years now it's not like the code is Big it's like a few megabytes of but it can pull those into the Lambda spin it up immediately and it costs them effectively nothing so if I have an outage and I'm trying to figure out when the thing broke I can just scroll through or I can hit filter production here's every production deployment I've ever had on my personal site I haven't done one for over a year I need to write more blog posts clearly and these are available so if I have a bug and I'm curious when did it break click does it work here oh cool it works here guess it was an older one this is not possible with servers unless you massively over provision build your own workflow for dynamically loading in and out code and dealing with the latency necessary there like I've seen people spin up things like this with stuff like fly iio it's going to be 5 to 10 seconds minimum when you click the link till it finishes spinning up the server and actually shows you the content which makes emergencies suck also if I want to switch to the old version here's how I do it click oh sorry hobby custom customers can't instant roll back but if I was on a paid account one click all traffic is going to the old version but the traffic isn't being redirected what's actually happening is when a user shows up it just resolves different code instead that's magical and these types of workflows are only possible because the production environment who cares about the scale of this one but all of these other environments every single old production environment I've ever had these are all currently benefiting from scaling to zero because if they didn't scale to zero they would have to be terminated they couldn't stay there this is totally true scale to zero is useful if your product is seasonal or even just active a bit during the day and then not but for Production Services which are interacting with other automated Services scale to zero is kind of pointless you can save money using provisioned mode for Lambda but it's still expensive compared to even fargate yeah I agree and honestly building things in a way where serverless is all of the stuff going on in the developer world when you're writing the code you're working on things in development whatever else awesome you use sist for all that and then if you want to minmax the cost verticals for the actual deployed version make the production version fargate that is a totally fine acceptable path I would actually find that pretty cool because again serverless and stateless code can be run just fine in a server code that's expecting a server full runtime is both harder to debug and can't just be thrown into a serverless environment and be expected to work I like coolify a lot I've been chat with the coolify dev a bit more now too but I want to be very clear coolify help streamline a lot of these things and it's one of the few ways to to replicate these workflows in a server nobody has this without serverless you can't just have every single instance ever deployed of your application with a oneclick swap over that doesn't happen otherwise should probably clarify what coolify is for those who don't know coolify is self-hosting or superpowers it's a either you pay them to use their cloud or you self host because it's all open source and you deploy coolify actually I'll see if I can find my um my coolify dashboard cool just for proof that I'm actually using coolify I'll dark much you all don't get too mad at me you can connect the GitHub project configure things and get it running as many Docker images in an existing server so kifi runs on a dedicated VPS and then you spin up little Docker images for different things so here I have my Layel deployment and I have my postgress so these are separate Docker images that talk to each other so I'm able to to replicate the stateless workflow here some amount but these still need to be provisioned thankfully with PHP you can kind of just hot swap the code it doesn't give a so you can get a little closer with PHP but other languages have startup times and expectations you can't just hot swap those and is cool as cool if I is and trust me it's pretty cool it does not come close to the power of oneclick redeploys instantaneously redeploying having every single GitHub PR get a preview environment link that is there forever so if I go and I look at an old PR and I want to see how it works I can click the link and it works no one else does these things this way no other method I should say doing this with servers isn't really possible unless you're spending a ton of money and as Yash just said in chat I know someone whose company racks up $100,000 a year in bills on their QA and Dev envirment I have personally racked up more than that at Amazon and twitch it's not even that hard to do AJ gave me a fantastic transition Point here to go from3 to4 I hope I have properly established here that the benefit of scale to zero isn't that if you have zero users things are cool it's that you can have an infinite number of deployments and not think about it because who cares it's just data sitting in S3 and it gets loaded when you make the request when you start building in this way you get to do so you just get superpowers that you wouldn't otherwise have that are magical it's similar to point at my favorite functional based thing react the magic of oh I can just reuse that component it's like oh that fundamentally changes How I build software and that's how I felt when I was doing this I just didn't realize that scale to zero is the the reason that these things can work and are so cool like I intuitively knew it and if you ask meble to figure it out but it was using turo that made it click for me the reason turo can be so generous with things like branching the number of databases and all of that is because the databases are stored in S3 and they just have a server running sqlite pulling from S3 reading or writing or whatever and then updating S3 accordingly it's so cool and it's basically the exact same model as how how Lambda works and how versell works and how netlify works and arguably how cloudflare works and it is so hard for me to not go down the cloud flare V8 tangent please in the comments tell me you want to hear this so I can justify filming this video because I don't think people care but if you can convince me I would love to film this it'd be very fun for me but now we need to talk about the final Point here serverless costs more money than running a server for the same amount of time if you were to price out how expensive it is to run a 5 VPS and look at how much compute you got it's like oh that's five bucks a month and I get all of this compute whereas doing things serverless is no longer build on how many servers you have and gigabyte hours are a measurement of how many gigs of RAM are being used in explaining gigabyte hours is really hard AJ how do you do it how do you break down gbh in a way for Layman to understand because it's  stupid metric Gabriel it's like gigabytes per second but for hours godamn it I haven't had a question hurt me this deeply in a long time this might make me do an additional tangent okay I have one more tangent that has come to mind this one I might actually do while recording this for tears of abstraction bare metal ec2 ECS Lambda that'll be an annoying one hey just writing a Blog he also probably is doing his job and having a life this is actually B basically how I was going to describe it a function allocated 1 GB that runs for 1 second is considered to have consumed 1 GB second so if you have a Lambda that has 1 gig of RAM and it runs for 1 second you just ran 1 Gigabyte second this is annoying because the amount of CPUs and other things that exist in that are additional cost vectors but the gigabyte second metric is how most of your serverless billing is being measured so let's say I've configured my service to use 4 GB of RAM on a Lambda it gets 100 requests per hour in each request takes 1 second then every hour I'd be using 400 gigabyte seconds take the number of seconds per request times the number of requests times the number of gigabytes and when you combine all those numbers together that's your usage so let's bump this let's do a th requests per hour maintain the 1 second request time this would equal out to 4,000 gabyt per hour so every hour we're using 4,000 gigabyte seconds gbtimes s to be clear thank you for correcting that chat and that would be 2, 880,000 GBS per month so let's go look at the pricing here we're going to literally skip everything else we'll look at the 4 Gig why is it showing prices per 1 millisecond that is so annoying so here's the 4 gigs of RAM we'll times this by a th so that we have actual seconds here's the gab per second cost so if we go back here 4 GB servers GBS cost equals that tiny number so if we grab the 2, 880,000 and we multiply it by this number that would cost you $192 a month so the total cost here 192 bucks and when you look at that you think about it ow especially when you compare to an equivalent VPS ec2 pricing if we look at an ec2 instance I wish they would stop showing the hourly rate we'll grab a t4g medium times 6 60 * 24 * that can't be right that's hourly right d for an equivalent 4 G Ram server running for that whole month it'd be 24 bucks a month so if you would just run a server that whole time instead it would have been hilariously cheaper it's not the $5 a month VPS clearly there's been some inflation but for 25 bucks a month you could just run this server and not pay that absurd amount of money but there's a lot of catches here that I want to bring in first one is here thousand requests per hour there are very very few services that have a flat level of requests like this if there are there're like cron jobs or ingest things pulling off of a queue stuff like that in reality most Services have traffic that looks a lot like this where the amount of traffic goes up and down constantly and depending on how heavy those spikes are for you the cost of spinning up enough servers to run during those Peaks quite possibly very high and the cost that matters isn't if we have an exact fixed rate of traffic what's cheaper servers or serverless the question is how big is the gap between your lows and your highs in your traffic because this Gap suck to deal with the space between these points is the magic of serverless we don't have to care how high or how low our traffic is at any given time our cost will Scale based on it and if we have priced out our service so that the amount of money a given user's request costs us is a reasonable amount then we can just kind of turn our brains off because the the painful reality when you're not building this way let's say you're we this is the 4 G gab server that cost 25 bucks a month if you are here and that is your Peak you're paying the 24 a month the moment you go there you just doubled your costs and the Gap from here to here having a 2X in your cost sucks and if you're ever going to worry about these things and your auto scaling is too slow and you end up losing traffic as a result of a user having a page timeout because the server didn't respond fast enough or spin up a new server fast enough those costs can get bad both the like loss of the customer cost but also the over-provisioning so we go back to this breakdown and we look at a th requests per hour assuming each one takes one second oh turns out I did a lot of my math really bad here don't know why nobody corrected me it's only 720,000 gigabyte seconds so if you're leaving a rude comment right now because of how big that cost was I hope you double checked my math before doing that because otherwise you would look really foolish cool all of a sudden this starts to look more reasonable Because the actual cost here would be 48 bucks remember that VPS we just looked at I let track of it you guys got the idea though it was about 24 bucks a month for the 4 gab server handling all this traffic through lambdas would be twice the price is that horrible and terrifying me but again go back to my chart the moment you cross this threshold either a user has to wait for the new server to spin up or you decided to over provision so you're just paying for the two servers instead anyways but now let's play with the way that these numbers are distributed because I set a th000 requests per second that is 720,000 requests over the month we could say that those are happening in even amount throughout the day but let's change it a little bit let's say for our theoretical alternative we only get 500 requests per day we'll do the math so 29 days 500 requests that's 14,500 requests for 29 days of the year but then one day or I'll say one hour sees a huge Spike and we'll say that spike is the gap there so it was 720,000 minus 1450 so we'll say that this Spike I'll even go lower we'll say to 600,000 request so one hour on one day gets this massive Spike to 600,000 requests we're used to getting 500 a day oh was my current math right because I did the four gig um look at the math I just did oh yeah I did foret the times four I should plan these things out more before I do them live I once again recant because it was 4 gigs that'll be the number but I am going to change something for the sake of being realistic we're GNA make it one gig of RAM now because realistically speaking a server handling all of your requests with 4 gigs of RAM is comparable to a server handling individual requests with one gig of RAM it's probably over provisioned to have one gig of ram in those so I am switching that back we're assuming one gig of RAM here so it is a slightly less powerful server but if each user's requests are using four gigs of RAM you can't handle concurrent request anyways so cool my math was right but yeah anyways so if we have our 1 gig of RAM 500 requests per day usually but then this one hour it spikes at 600,000 good luck handling that yeah and here's where things start to get fun if you are building this with servers and you need to be prepared to handle that massive of a spike your options are quite limited if your traffic usually lives down here and most days it hangs out in this range but then for just a brief moment it does that do you know how miserable it is to provision for this because even if your load balancer code is incredible if the spike is aggressive enough you can't load balance it out so your options are now provision based on this potential Spike so you have your servers provisioned way more heavily but if you just went viral and your servers were not set up to handle that a significant percentage of your initial users are going to hit a dead page because it cannot resolve and in order to make it so that that can resolve in order to handle that Spike you have to account for that by over specking your server by like 600x and that's the issue is how your traffic is distributed fundamentally changes the way in which these costs operate for you of course a load balancer can handle that how do you think AWS does it do you think a load balancer makes new servers when Amazon runs out of servers Amazon solves this problem by being the most over-provisioned company of all time Amazon servers are already there they already bought them they're sitting there so yes if you want to eat a bunch of cost like Amazon does you can massively over-provision too but one of the cool things about Amazon is that they have so many people buying so many servers that it effectively balances out because if my service is having a massive Spike there's a bunch of other services that aren't and as such they can justify buying a much larger amount of servers because they can handle everyone's spikes for them it's priced into their model but if you're not  Amazon you should not be running a massive over-provision set of servers for those single spikes it just doesn't make sense woring about a theoretical random viral event seems insane look at levels traffic after massive advertising spikes uh everything I've ever worked on has random 5x plus spikes literally everything I've ever worked on in my  life be it upload thing having someone randomly decide they want to move all their files over and moving a million files in an hour be it twitch chat where Drake shows up in ninja stream and we go from I don't know 500,000 messages a second to like 15 million a second that's just real production workflows I would go as far as to say if your stance is well not everyone goes viral you don't work on real production workflows this is expected that was viewers but one viewer can send a shitload of messages yes levels has a person whose full-time job is managing the load balancing for his servers and as people are pointing out he also over Provisions massively if your traffic can have multiplicative changes where it can be five times higher for an amount of time and the speed at which it goes from the low traffic to the high traffic is fast and these are the things that I was trying to figure out how to word it is starting to come to me there are certain characteristics that make serverless the cheaper and better option the big two are gap between high and lows for traffic velocity of change between high and low traffic because if we have this traffic Spike here and instead of it going straight up it does that where it gradually increases oh Lo balanc are can handle that fine says generally High variance I like that phrasing if the variance of your traffic going up and down is high and the speed that it goes up and down is high too serverless makes a lot of sense and there's a reason Amazon uses Lambda in serverless as heavily as they do it's the right primitive when your traffic can spike in these random ways it is so powerful and a thing I think people fail to understand when they say how do you think Amazon does it is that Amazon's services are largely built based on what they needed internally as I walked through at the beginning of this very long video they found themselves on serverless in a pretty logical path we went from here the old way to separating out our database so that we could scale our application code independently to realizing we could move the application code out of the application boxes but to go back here it's hard to make theoreticals for like how much resources would 600,000 requests in an hour take so let's use some real numbers base camp did 5250 requests per second 500 cores at Max load that's three boxes each running a Z5 192 core AMD chip for 5,250 requests per second okay so let's figure out what that would cost I'll even hetner it not many real production environments are using hetner because you never know when they're going to randomly shut your down is there like a header pricing page cool we do AMD you can only do the 48 core models for this 48 cores 96 threads he said he need how many cores 500 cores at Max load so I'll even I I'll round down for him we'll say you need 10 of these time 12 it's 28 grand a year not looking good so far but € 2360 let's translate that to USD 262 bucks for one so 2,620 for enough for his traffic 5250 request per second cool so if we assume this is all evenly distributed dhh numbers v50 requests per second he said 500 cores cool and that's also for handling the peak traffic so if it's an eight hour work day Peak traffic is probably somewhere in the middle I think it's fair to say that most seconds in the day it's probably closer to a tenth this probably even lower so let's work with that assumption I will I'll average it out and say it's as low as a tenth as high as D50 and we'll average this to 2625 which is is generous to say that is the number of requests per second on average I'm sure it's way lower and on the weekends it's almost nothing so let's multiply that by 60 for minutes hours and days and we'll say that's the number of requests per month cool now let's blindly assume all of these numbers on the server list side obviously unfair too there's a lot of other things we might have or not have here I will say that one gig of RAM is almost certainly not necessary if all this is doing is grabbing values out of database and then rendering HTML I going to grab the request count here also 1 second per request is insane so we'll say it's 0.5 seconds per request 283 million requests a month and I want to be clear once again this is napkin math we end up with 70 million gab seconds let's do the math quick now we have all the numbers I'll round up to 71 million look at that with relatively generous assumptions on both sides that I would consider quite Fair it would be half as expensive to run the same service on serverless because remember those servers still cost money on the weekends when no one is using them he could set up load balancing but he can't do that because he's buying his own Hardware it is less than half the price and I am sure you can poke a lot of holes to this and I'm sure people are going to I I already know it's going to be screenshotted and put on Twitter people are going to say I'm really stupid to be clear if you are getting sustained traffic at this level or if in the like average day you're only going as low as like half that level of traffic absolutely go spin up a server for it but if your Peak traffic is that much higher than the weekend traffic using a system like this is hilariously cheap and if you don't want to have to spend all of the time figuring out the provisioning cost performance balancing out all of the stuff which like by the way if this way of building was easier for them than this way they should go with that because $1,000 a month Gap is $112,000 a year if I could save my Engineers a meaningful amount of effort and make them happier by paying 12 Grand a year that's a no-brainer a companywide expense for that both of these numbers are really small relative to the engineers that you have at your company that's that's just reality and like I would hope most people are starting to see the benefits of building this way it makes your applications more resilient it makes it easier to do deployments and roll backs in preview environments and all of these types of things it be really hard to convince me the developer experience of doing things the serverless way is worse than doing it the dhh way and in the vast majority of real application workflows that are facing external sources be it users be it external apis whatever else those have enough traffic fluctuation that you have to either set up really complex load balancing or massively over-provision this is what the over-provisioning looks like and again relative the number of devs it's still quite cheap and when I was at twitch and we were doing complex video injest stuff this is the rout we went don't do video injest on several us it makes literally no sense to do that but we were spinning up servers that cost a lot more than $2,600 a month and weren't even thinking twice about it because it was still way cheaper than the engineers working on the thing in the time it was saving them I had some bad math here that I want to correct for this video don't know how we will deal with that in post so we agreed the 23, 500,000 requests per month is reasonable this is the mistake I made yeah I did 60 * 60 * 30 it should have been 60 * 24 * 30 that divid 60 * 24 the actual number of requests is half not even so let's redo the math and like I was already being generous to the dhh side I made a huge error on my part 2835 472 bucks but serverless is so expensive H God no I'm just annoyed at this point so to close this very long one out I'm going to reference a video of mine and it's pretty easy to find if you go to my channel you hit videos you popular it's this guy the real cost of AWS and how to avoid it it's about to hit half a million plays which will make it my most popular video ever the real cost of AWS isn't all of the things we've been talking about today it's the amount of time you're spending building the and if you can use a service like Lambda or versell or netlify or Cloud flare or upload thing or Planet scale or turo or any of these things and it saves a meaningful amount of time for your developers it is probably cheaper than whatever it costs so as fun as it is for all of us to sit here and nerd out about these gaps these don't compare to payroll and if this solution here requires you to have two more Engineers not worth it if this solution requires you to have one more engineer also not worth it so be reasonable but how you make these decisions stop in as much about these numbers because the gap's not that big in serverless not only is it not too expensive it's often cheaper than the alternative for any realistic traffic and scale to zero results in a much better development environment and experience let you do things you can't do with servers and yeah that's it should probably do a real outro for a video this long but I don't care let me know why I'm wrong in the comments until next time peace NS




## Serverless With Servers_ FLAME is...weird - 20231217
rethinking serverless with flame bunch of my friends from fly iio and The Elixir Community been hitting me up about this and I wanted to take a look because they're rethinking serverless from scratch in a very different way and I'm curious what they're up to imagine you could Auto scale simply by wrapping any existing app code in a function and have that block of code run in a temporary copy of your app the pursuit of elastic autoscaling applications has taken us to silly places serverless in functions as a service had a couple of things going for it elastic scale is hard it's even harder when you need to manage those tesky servers it also promises pay what you use costs to avoid idle usage it's all good right well the charade is over you offload scaling concerns in the complexities of scaling just to end up needing more complexity additional cues storage and glue code to communicate back to our apps is just the starting point Dev test and CI complexity balloons as fast as your costs oh and you have to rewrite your app in proprietary JavaScript even if it's already written in JavaScript at the same time the rest of us have elastically scaled by starting more web servers or we've dumped on complexity with microservices this doesn't make sense piling on more web servers to transcode more videos or serve up more ml tasks isn't what we want and granular scaling shouldn't require slicing our apps into bespoke operational units with their own apis and deployments to manage enough is enough there's a better way to elastically scale applications I've heard a lot of good things I want to look more into this don't necessarily love the framing thus far there's a lot of real stuff here like when you go serverless things are more complex I would argue that going to scale is inherently more complex and a lot of the patterns necessary to do this with serverless are best practices for scaling as a whole like your database layer should be something that can be interfaced with an unknown number of servers without having lots of issues and yes you have to build a bridge for that having queuing systems is something that should work without adding a lot of issues and yes there's complexity there but this idea of what if you can just scale by wrapping your code in a function and have that run in a temporary copy interesting see some split brain potential here but I'm curious how this is solved let's take a look the flame pattern here's what we really want we don't want to manage those pesky servers we already have this for our app deployments via fly deploy get push Roku KUB CDL Etc we want on demand granular elastic scale of specific parts of our app code and we don't want to rewrite our application or write parts of it in proprietary run times this is such a cloud flare call out it's actually kind of funny let's see how this goes imagine we could Auto scale simply by wrapping any existing code in a function and have that block of code run in a temporary copy of the app flame fleeing Lambda application for modular execution I love the name and the abbreviation very clever with flame you treat your entire application as a Lambda where modular Parts can be executed on short-lived infrastructure no rewrites no spoke run times no outrageous layers of complexity need to insert the results of an expensive operation to the database Pub sub broadcast the result of some expensive work no problem it's your whole app so of course you can do it interesting very interesting The Elixir flame Library implements the flame pattern it has a backend adapter for fly but you can use it on any Cloud that gives you an API to spin up an instance with your app code running in it we'll talk more about backends in a bit as well as implementing flame in other languages first let's watch a realtime thumbnail generation example to see flame plus elixir in action so I don't have a good way to make sound work here oh look at that my own vide is being recommended oh my own live stream being recommended we have 230 people watching that's pretty cool if you guys don't know I record these live so feel free to join us on Twitch or YouTube every Wednesday when I make these videos in order for this code to continue running in order to get what data it needs to render this thumbnail to generate it it spits out a child process so another instance of the app to go do that FFM Peg bit separately and gives us a process ID to that instance which with Elixir you can have process IDs that are in different computers and as long as they're on the same network and are networked together you have access to communicate things between them so for Elixir this type of thing makes a ton of sense but I don't want to dig deep through that video when they have more basic examples here let's walk through something a little more basic imagine we have a function to transcode video to thumbnails in our Elixir app after they're uploaded totally not relatable who would ever need to do that un like every project I've almost ever worked on that has video which is a lot of things is a very very painfully real use case generate thumbnails takes in a video which has a video ID an interval and we do temp is path. join to the temp directory we generate a uu ID so that we know this path is unique and clean and we make this directory now we have the arguments for the fmeg call so this is we're inputting the video URL we are splitting by frames if I recall that's what VF does yeah we're setting a video frame rate for one over the intervals this is how often we want to generate new frames and then we have this Syntax for actually outputting that Frame data so now we're going to get a bunch of pgs if we put like 60 then every 60 frames we would save one as a PNG and then we run this command with system. command FM Peg with those arcs we get the URLs for the images here we put them in vid store some separate thing that I'm sure they've implemented to actually store these thumbnails somewhere on the web and now we have the URLs for them and then we insert those into what whatever we want to use them for our generate thumbnails function accepts a video struct we shell out to ffmpeg to take the video URL and generate then we insert the generated thumbnails into our database that's what the repo call is this works great locally but the CPU bound work like video transcoding can quickly bring our entire service to a halt in production instead of rewriting large swaths of our application to move this into microservices or some like function as a service we can simply wrap it in a flame call funny enough this is exactly what I used Elixir for when I was building it at twitch not specifically for frame generation but for orchestrating bunch of random video assets via FFM Peg transcoding those and then piping the outputs to random places this is very painfully relatable to me I've been there too many times and written a lot of things to do this manually but now with flame we have flame. call my app. fmeg Runner and this is a function that does all of the same stuff but now this can run on a different server so when we call generate thumbnails it's no longer going to block on the server we're currently on that's it flame call accepts the name of a runner pool and a function it then finds or boots a new copy of our entire application and runs the function there any variables the function closes over like video and interval are passed along automatically when the flame Runner boots up it connects back to the parent node receives the function to run executes it and then Returns the result based on configuration the booted Runner either Waits happily for more work before idling or extinguishes itself immediately let's visualize this okay so step one we provision a new Runner that has this info step two the new Runner connects to the parent so this is that second run time that just spun up going back and forth forming a connection with the place that it came from that told it to spin up the parent sends the function for execution so there's like forward back forward the the first thing is the parent server starts a new server that server connects to the original say hey I'm ready to do stuff and then that original server sends the function that needs to be executed so it can spawn that function and then once it's done it Returns the result and then shuts down we changed no other code and issued our DB WR with repo do insert all just like before because we are running our entire application database connections and all except this fleeting application only runs that little function after startup and nothing else okay here's where I have actual useful input the biggest issue most people run into with server lists is database connections that's the bottleneck with most database stuff in serverless is most databases can't handle lots of things having connections to them at the same time and when you combine that with the pain of cold starts where you have to ship all this code over start up a box make the database connection and then get to work it can get pretty painful pretty quick this pattern doesn't solve that problem at all it actually makes it a little less likely you'll notice it when it happens and might even make it a bit harder to debug so this is my first and to be clear like having my first red flag this late is huge they're doing some really cool stuff here this is terrifying the number of people including myself that I have seen run into issues because they have too many connections to their database at once is very real and you could quickly run into a position where you're like swamping your database with connections that you weren't expecting and if that's something you're already planning for you're going to run into problems so this doesn't solve one of the biggest serverless issues I see it might even make it worse it won't make it much worse but you have to pull your databases still you have to find a way to manage database connections yourself still in practice a flame implementation would support oh they literally mentioned that in the next sentence that they're in practice a flame implementation should support a pool of Runners for hot startup scale to zero and all of these things specifically a pool for the database separately really important for this we actually have Chris in chat absolute Legend creator of Phoenix also the guy running a lot of this over at fly one of the people who gets Elixir better than almost anyone in the world and I'm really pumped that he's in chat no pressure Chris but appreciate you immensely for being here and for everything you've done and having you here as we go through this is huge so thank you so much fantastic work on this it's really cool seeing people challenge the DX around scale in this way and this like my Elixir brain is going crazy here I'm loving this so solving a problem versus removing the problem oh boy that's a a bold title this is something we talked a lot about when we had Jose valim on the show before the idea of we have these problems that exist in our tools we can build Solutions on top of those problems to like Band-Aid cover them but can we go deep enough to remove the problem from the root this is actually part of why I like serverless so much because it takes the scale problem and removes the orchestration part of it you just run a function when you need a function and it disappears when it's done that's something I genuinely really loved about serverless it felt like it removed a ton of problems but it did introduce new complexities that we had to deal with I'm curious how this will frame flame as doing similar functions as a service solutions help you solve a problem flame removes the problem I think that functions as a service are a trade-off but they do remove a lot of problems the functions of the service Labyrinth of complexity defies reason and it's unavoidable let's walk through the thumbnail use case to see how we try to start with the simplest building block like the request response Lambda function URLs the complexity hits immediately we start writing custom encoders and decoders on both sides Ides to handle streaming the thumbnails back to the app over HTTP few that's done wait is our video transcoding or user uploads going to take longer than 15 minutes sorry hard timeout yeah funny enough video encoding is one of the big things I hate Lambda for absolutely hate Lambda for this use case because you never know if you're going to hit one of those timeouts I historically have relied on either running my own infra or thirdparty transcoding as a service stuff even through AWS itself I think AWS has like three different transcoding Services largely because transcoding on Lambda sucks so hard so is a very very good example they picked for this because this is one of the best cases for this level of dynamic infrastructure yeah as they're saying here like sorry hard timeout now you have to split your video into chunks to stay within that timeout which needs even more lambdas now you're orchestrating Lambda workflows and relying on additional services like sqs and S3 to enable all of that yeah not great the way I would have done this is when you need those thumbnails to be generated throw it in sqs so you have a cue of the work that needs to be done and then whatever number of boxes your comfortable spinning up with a hard cap or maybe you just leave one really powerful box running which is what I usually ended up doing with these cases that just constantly plucking things off of sqs and going through them one at a time or 10 at a time depending on how many servers you have but I would pretty quickly try to get out of server lless and into a queuing system with some real infrastructure spun up to handle this obviously that's nowhere near as easy as just wrapping the function in flame. call or was it flame do yeah flame. call like just wrapping your function in this to solve that problem that's much better all this function as a service is doing is adding layers of communication between the your code and the parts you want to run elastically each layer has its own glue integration price to pay ultimately handling this kind of use case looks something like this trigger the Lambda via hps3 or API Gateway write the spoke Lambda to transcode place it in the sqs write the sqs consumer in our app persist to DB yep not going to say this is great this is a really really compelling example of why a pattern like this makes sense we pay the F toll at every step I think the bigger cost here isn't how much money each of these cost is how much time in like mental overhead it costs to to orchestrate all of these things my biggest concern here is like the mental overhead both for building and maintaining this but also for debugging it when you do have a problem and you have this level of complexity debugging things becomes impossible and like reasonably replicating things locally in Dev is miserable even just the developer experience potential of having a real meaningful comparison of your local Dev experience and your production one making those closer with these complex things is a huge win Flame back ends on fly iio infrastructure the flame. flyback end can boot a copy of your application on a new machine and have it connect back to the parent for work within 3 seconds to be fair a 3second cold start is rough but a 3second cold start is an alternative to all of these steps if it's not also blocking other things that sounds nice by default flame ships with a local backend and fly back end but any host that provides an API to provision a server and run your app code can work as a flame back end earling and elixir Primitives are doing all the heavy lifting here the entire flame. fly backend is under 200 lines of code with docs the library has a single dependency request which is just an HTP client because fly runs on our applications as a packaged up Docker image we simply ask the fly API to boot a new machine for us with the same image that our app is currently running also thanks to fly's infrastructure we can guarantee that flame Runners are started in the same region as the parent this optimizes latency and lets you ship whatever data back and forth between the parent and the runner without having to think about it so I I'm starting to have like a big framing piece click here where it's almost like where in your application are you splitting things up for scale when you're building with nextjs on versell they actually look at the different routes that exist in your app in which JavaScript is necessary for each of those and they create a minified set of your application code for each of those endpoints it's almost like the the serverless like build happens as a compiler step thing where it creates all of the serverless endpoints needed in all of the bundles of JavaScript for those to have an optimal serverless experience as soon as possible whereas the fly approach happens it's almost like the runtime version where instead of a compiler generating optimal bundles for all of these endpoints the runtime clones your current endpoint when you need a new one so your abstraction isn't at like a bundle or build level your abstraction is at like an infra runtime level that wraps your whole app this comes with costs like a 3se second cold start compared to a less than half second cold start that you would see in something like a decently optimized Lambda but there's a huge benefit of not having to worry about that abstraction in the first place this might be a hot take but I actually see a really compelling use case here using it with Lambda where Lambda is my default for all the code that I can possibly run in it but when we hit a function like the example here with this big FFM Peg call maybe call this in a way that that gets spun out into a Docker image that's like a proper server to run that part and then that takes over the request from that point forward that I could see being really compelling and it's actually kind of similar it's a different level of abstraction but it's similar to a bit of what vercel is doing with their Edge stuff where with partial pre-rendering The Edge gets the request it responds with something that it ran somewhere else usually like cached content and then the rest gets kicked off to a node Lambda I could see something similar here where you have like an edge that intercepts your request that the user is making it responds to them with content and then kicks off using flame some processing in the background that's running your same code from the same code Bas it's just a Docker image of it instead so you can just write the code in there even though that code will never run on your Lambda I see a lot of potential for that type of pattern here and I'm excited to see what people do with this look at everything we're not doing with functions of the service just imagine how quickly the dev and testing story becomes fate worse than death yeah just touch on this a bit debugging developing testing and doing all of those types of things are miserable once you've built this multi-piece architecture from queuing to asset transfers to like Network requ Quest management and all the things in between it gets rough fast to run the app locally we either need to add some huge Dev depths to simulate the entire function as a service pipeline or Worse connect up our Dev and test environments directly to that function as a service provider with flame your Dev and test Runners simply run on the local back end if you guys want to know how bad this is when I was at Amazon it was pretty common practice for everyone to work on a box that was running like red hat Enterprise Linux that was like a desktop directly connected to the AWS Network I believe was West 2 it might have been something else at the time so that you could treat that box like a node on AWS and interface with all of the services on AWS as though it was a production environment that's how we were able to build things on AWS so quickly and this is encouraging you to ignore all of that in a way that is very very compelling to me yeah with flame your Devon test Runners simply run on the local back end very exciting stuff but remember this is your app flame just controls where the modular parts of it run Endeavor test those parts simply run on the existing runtime on your laptop or CI server using Elixir we can even send a file across the remote flame application thanks to its distributed the earling VM and beam just being how they are beams dope and lets you send crazy things over the network on line two we open a path to a parent node ah so we're actually streaming the file from the parent node to the child node here that's pretty cool flame stream yep all the code is the same otherwise but we're starting the stream here and then passing it through that's dope that's beam doing its thing on line two we open a file on the parent node to the path then in the flame child we stream that file from the parent to the flame server in only a couple lines of code that's it no setup of S3 or HTP interfacing required it's easy to miss everything we're not doing this is a good sign we don't need to write code outside of our app we can reuse business logic database setup Pub sub and all of those things we don't need to manage deployments of separate services or endpoints we don't need to write results to S3 or sqs just to pick up values back in our app and we can skip Dev test and CI dependencies and the hell of getting those result to work together flame outside of Elixir obviously like a lot of this stuff is Hardcore Elixir brained so I'm curious what they have to say about using it outside of that ecosystem Elixir is fantastically well suited for the flame model because we get so much for free like process supervision distributed messaging and all the other greatness we get from beam that said any language with reasonable concurrency Primitives can take advantage of this pattern for example my teammate lubian created a proof of concept example for breaking out functions in your JavaScript apps and running them inside a new fly machine cool stuff don't have the time to check that out right now but if you guys are interested let me know in the comments I'll check it out in the future so the general flow for a JavaScript based flame call would be to move the modular execution to a new file which is executed on a runner pool provided the arguments are Json serializable the general flame flow is similar to what we've outlined here your application your code running on fleeing instances complete flame Library would need to handle the following concerns elastic pool scale up and scale down hot versus cold start with pools remote Runners monitoring to avoid orphaned resources and how to monitor and keep deployments fresh for the rest of this post we'll see how the Elixir flame Library handles these concerns as well as features uniquely suited to Elixir applications But first you might be wondering about your background job cues I'm curious to what they have to say about background jobs flame works great inside your background job processor but you may have noticed some overlap if your job's Library handles scaling the worker pool what's flame doing for you there's a couple important distinctions here first we reach for these cues when we need durability guarantees we often can turn knobs to have the Q scale to handle more jobs as load changes but durable operations are separate from elastic execution conflating these concerns continue down a similar path to Lambda complexity leaning on your worker CU purely for offloaded execution means writing all of the glue code to get the data into and out of the job and back to the caller or end user's device somehow I like this separation here durability versus like external non-blocking execution cues are really important for reliability when you want to handle something after an error have logic around how often you retry it those types of things like what happens if there's an error here what happens if you don't have the permission to make this temp directory and when you try to write the file stream it errors out what happens next that's not a question that is answered well here I'm sure there are answers and I'm sure they're really good but background jobs and cues are built to build these types of resilience but we shouldn't have to reach for those for everything which is what I'm excited about with this part here for example if we want to guarantee we successfully generated thumbnails for a video after after the user uploaded then a job CU makes sense as the dispatch commit and retry mechanisms for this operation the actual transcoding could be a flame call inside of that job so we decouple the ideas of durability and scaled execution interesting so again with this example that would mean like the whole generate thumbnails function fails if this flame call fails but if our job queue is running this function that's not that big of a deal I like that I think that's fair on the other side we have operations we don't need durability for take the screencast above where the user hasn't yet saved their video or a machine learning model execution where there's no need to waste resources turning a prompt if the users already left the app in those cases it doesn't make sense to write a durable store to pick up a job for work that will go right into the ether yeah that's fair when you put something in a queue there's no guarantee that killing the thing that put it in the queue is actually going to remove that thing from the queue balancing that all out it's a fun Challenge and I like that this model makes the ownership better by default and lets you break out to things like a queue when you have a reason to I tend to love tools that improve the default such that when you have a reason to leave it it's obvious and easy to do and I'm seeing a lot of that here with the Elixir implementation of flame you define elastic pools of Runners this allows scale to zero Behavior while also elastically scaling up flame servers with Max and currency limits for example let's take a look at the start callback which is the entry point of all elixir applications we can drop it in a flame pool for video transcriptions and say we want to scale to zero boot a Max of 10 and support five concurrent fmeg operations cool so here this is I guess framework defined INF structure but it it's still just traditional Elixir code where we're starting flame parent and we Define all of the potential children here we set a flame pool with this name this Min and Max this uh Max concurrency level and then when it should shut down after Idol it's cool that you just configure that incode and it happens how it should I do like that feels a little weird just being part of your start code but I get it and I think it's cool that that exists and that that works we use the presence of a flame parent to conditionally start our Phoenix web server when boot the app there's no reason to start a web server if we aren't serving web traffic note that we leave other services like the database mya. repo alone because we want to make use of those Services inside of the flame Runners that's one of the interesting pieces we have to make sure things we want access to in these Runners are exposed in some way like my app. repo here to make sure it's accessible but we're not actually passing all the stuff that's necessary for running the web server because we're not necessarily running a web server in these children in fact we're almost certainly not alixir supervised process approach to Applications is uniquely great for turning these kinds of knobs and that's been my experience with it too when I was using much more elixir in production at twitch these were the things we were playing with constantly and using uh gen servers and crazy kubernetes configs to keep our processes spun up in logical ways then where I think about having those configurations in the language itself the more compelling it gets and I'm actually increasingly excited about this we also set our pool to idle down after 30 seconds of no collar operations this keeps our Runners hot for a short while before discarding them we could also pass a Min one to always ensure at least one FFM Pig Runner is hot and ready to work by the time our application is started it's a good call this significantly decreases the likelihood you hit a cold start you'll still hit them if somebody else makes a request and this box is busy but you now have the ability to spin things up as you need them process placement in Elixir staple bits of our application are built around the process Primitives lightweight green threads with message mailboxes I don't think the implementation details are as important for this video this is like really cool stuff if you're interested to see more of how this works both so you can understand it but also so you could potentially implement it in other languages this blog post is incredible but I want to make sure we're focused on the actual experience you have rather than how these parts work remote monitoring all the transing infrastructure needs failsafe mechanisms to avoid orphaning resources if a parent spins up that Runner must take care of idling itself down when no work is present and handle failsafe shutdowns if it can no longer contact the parent node likewise we need to shut down Runners when parents are rolled for new deployments is we must guarantee we're running the same code across the cluster there's a lot to monitor here yeah fortunately Elixir has all the Primitives thanks to the earling VM yep I'm curious how we managed to figure this out in JavaScript but obviously earling and beam op as hell for these types of things we'll cover those implementations in a future Deep dive cool what's next we're just getting started with the Elixir flame library but is ready to try out now in the future look for more advanced pool growth techniques and deep dives into how The Elixir implementation works you can also find Chris to chat about implementing the flame patterns in your language of choice definitely give Chris a follow absolute Legend one of my personal software Dev Heroes and the guy who built the framework I first used in production so huge shout out to Chris thank you both for being here in chat to answer my dumb questions and for making something this cool and really challenging the norm because I haven't seen anything quite like this before and I'm excited to see how we approach and adapt around these patterns what about you how do you feel about this fundamental rejection of the way serverless has worked all of this time if you want to hear more of why I do and don't like serverless I'll pin a video in the corner there where I talk all about serverless Edge and how I keep switching between them all the time if you're not interested there's a video below that YouTube seems to think you like appreciate you all as always always happy to have an excuse to talk about Elixir and I'll see you in the next one peace nerds




## Serverless kinda sucked without this... - 20240520
versell just solved one of my biggest pain points with serverless tldr lamb does die once you send a response wait until lets you run Asing code after the response think defer from go I got for the think defer from go thing and most of the I got is totally fair but I want to showcase what this is and why it's so cool because yes this existed in other places before if you're using vpss this isn't even a thing you thought about but once you get into the Magic World of serverless scaling stuff this is magical first we need to discuss this part though that lamb does die once you send a response because there has been a lot of again reasonable push back from everyone's favorite anti verelli in here Dax which is that you can technically do this in Lambda but that's a big technically there are three different ways you can call a Lambda synchronously asynchronously and Via polling calls these all behave very very differently in asynchronous operations the Coller places the event on an internal queue which is then processed by the Lambda function versus with a synchronous invocation the caller waits for the function to complete an execution and the function can then return a value so for almost every single person using Lambda to serve traffic like through an API Gateway or through cloudfront they're all using the synchronous invocation method which has the catch of once it's returned it dies so if you want to bind a web service or an API or a gateway to Lambda you're almost certainly doing it through the synchronous invocation that's the easiest way to connect them once you get into the asynchronous invocation land and you're building an event queue and system around it it now you have to attach that to the web layer yourself and that sucks to do I know that because we've tried doing it ourselves and it is not fun you need your own way to move the request to the Lambda and then get the response out because once a Lambda has sent a response directly to the web request that started it it dies that sucks so if you're using Lambda almost all of the ways that are recommended you have this problem if you switch to streaming and hack in certain response methods or you build your own asynchronous layer on top of it sure you can make lamb to do this but I've never seen anybody get this working successfully even Dax himself tried to help us get this working and gave up and it just doesn't it's not a good time it's really not as such I want to showcase what this is and how we actually use it cuz it's really cool and make sure you stick through to the end for this one because there's a really cool demo where the CEO versell himself shows how to use this to reimplement server components without even needing react which is super super cool anyways I built a quick little demo I know Theo coding in a video been a while right I I'm just really excited about this okay in this demo we have a very simple thing we have a web page that has a form minute this form has an input that has an element name and it has a submit button and it's bound to the action do some work if you want already know about server actions check out my other videos about them they're really cool especially for stuff like this then we look up here and we have my doome work function it's use server so that this will become a pipe from the client to the server use server means the client can send things to the server use client means the server can send JavaScript to the client generally if you think about it that way it makes as much much easier so use server allows for the client to post to the server to do something in this case some work specifically I made a really fancy database I know revolutionary Tech here db. txt and we're writing the name of the person who submitted their name here then we append that to the file and then we redirect you might have noticed something here though this is an async function and we didn't await if I await this totally fine we go here we'll put uh Theo as my name submit and it redirected fine hello Theo cuz into that file is really fast it's not going to block for long but if I switch to append with delay and we go back up here we see append with delay has this block for a bit where it blocks for 1,000 milliseconds let's make that 5,000 so that's going to block for 5 seconds and then it's going to append to the file so if we go back here the2 so we know it's the second time we're waiting we're waiting we're waiting for that work to get done and now we're here with the2 and if we check here in the text file we do indeed have O2 here the obvious solution is well if we don't need that data to be there for the page load can't we just delete the await here let's do it we go back here we do the3 this time and it loads immediately we go to the text file it's not there yet close open close open cool it finally appeared in the text file the catch is if you did this on Lambda through versel or on Lambda yourself there's a good chance this append will just fail and not happen because this isn't blocking this whole instance can just just die and this right might not ever happen hopefully you're starting to see why this would suck so how do we work around that we finally have a solution that doesn't involve blocking the user on some additional work which you're curious why you would ever do this ever heard of logging this is so useful for things like logging like adding data to your database that doesn't block users getting a response to your user faster and letting all this work go on in the background so if we look at the API here it's actually quite simple we import wait until from at/ functions then we wrap our call with wait tell think we have to install the versell functions package first we'll do that bun add versell functions bun Dev again import this guy wait until and I think we can literally just wrap this as is Tada and now we can be sure that that code will actually run when we do our input here so I'll do the4 submit we redirect immediately the wait until is being run so if this was running in a Lambda they're keeping this alive for us now which is huge I don't want to go too into detail of how it works because honestly I don't even fully know how it works I've been told a little bit of info a long time before versel has done a lot of work on the orchestration of their Lambda stuff right now when you hit versel the first layer you hit isn't immediately Lambda on AWS they have their own distributed layer on top that then routes you to the correct Lambda with the correct code to run they're building their own orchestration on top which means obviously they're going to be limited by a lot of limitations that exist in Lambda theoretically in the future they can move off Lambda because all of the requests are coming through their layer now their layer can now make a connection to the Lambda that isn't a traditional connection it can use the async processing and use event management so this needs to be diagrammed diagram fans are eaten good so if we have a user which obviously uses our circles and services our squares and rectangles so we have our user and we have our server in traditional world the user sends a request to the server and the server sends a response to the user which is great until there's too many users in too few servers they start running into problems even if you have multiple servers you need something in front to do the redirection and all of that work so in the case of something like Lambda instead of a server here you'd have a really thin layer that would be a Gateway usually something on AWS so some form of gateway then this Gateway will Route traffic to the correct lambdas often just automatically for you through aws's way of doing things so this user gets sent here and now the Gateway can be prepared for the next user it will get this response and then it will make sure this response from Lambda one goes to this user and if another user comes in they request from the Gateway they can send that request to any of the lambdas that are currently open or if there's one that was recently open and finished send it there so you don't have to send all the code as well the issue here is that this Gateway brings the lambas to life through the request and once the request is completed once this response gets to the the user so on complete kill Lambda 1 once the Gateway finishes sending this response to this user it now insta kills this box because it knows it doesn't need that anymore that sucks if you do actually want this to be up for longer because it's doing something still like it's still has to send its logs out if you don't want to have to wait for your logs to send to send a response to the user this sucks because now the user gets a response slower or you just don't get those logs since versell doesn't use the AWS Gateway for of this now they're using the versel function Edge whatever the I'm sure they have some fancy name for this that I don't know I'm sorry guys I know you pay me you're not paying me for this video though I'm just talking about the versell function layer here is smarter and instead of just creating a oneway binding making sure that once this resp response is sent they kill the Box they keep it open they keep it open for a while because the way they send these things back and forth isn't traditional web requests it's possibly websocket I actually know what the protocol is for sending things from the Lambda back to their Edge layer but because they're handling this themselves they can do some other protocol for sending data between their layer and Lambda so they can run this Lambda however they want and not worry about it dying this is huge this allows the level of flexibility that you would have to build this layer yourself for otherwise could you build this layer yourself could you build your own queuing and management system for the top layer here absolutely you could it would just suck to do and I would not want to be the one doing it it because this is painful and this is the stuff I pay or sell to avoid doing right now they are cheap enough that I would never even consider otherwise and while the pricing might seem expensive when you consider how annoying building these types of things is that it takes some of the best engineers in the world years to get right avoiding it's very nice and that's why I'm hyped about this because I have so many real use cases like sending logs like writing to my database after the fact like generating an image but wanting to send the user to the right place right after it fundamentally changes the way that I think about functions where now my goal is to just get things running and get a response to the user as fast as possible if you wanted this to block like let's say we want this to block you can still await traditionally but if you ever have code that is asynchronous that you don't want to have to wait for this model is awesome it's really really cool I said before that I was going to show you guo reimplementing RSC using waight until and I forgot to do that because I didn't have Gabriel my go-to guy there to remind me because of that I'm recording it now here it is I actually thought this is one of the coolest things I saw with weight and tell because weight until let's you started executing the code immediately but then holds the thread until it's done you can use that to stream in responses so here is the code that he wrote we have the confetti URL for embedding the confetti browser MJS file so we're not even loading this as a package we're loading this as a CDN embed we have here export async function get readable writable new transform stream and then we wait until and we stream the writable data because we're going to start streaming this response we want to return a header ASAP so here we return response with the readable attached because we're writing into that stream data there we want to make sure that's going to be included we're also going to send the headers with it so now we start streaming the data writable writable stream usual stuff here we grab the writer we're passing this and then we immediately write the Hello dot dot and then we repeat this 1,24 times in order to have all that space there it's another reason we'll get to in a second and we have the await promise.all new promise we set this to resolve in 1.5 seconds we fetch the confetti URL and then we send this down as text because we're embedding this in a script tag here we're putting this confetti from this promise here as part of the text of this script tag really simple super cool and this then streams in that part after immediately rendering this we can go to the site and see we immediately get the hello and then the world appears with the confetti loaded in after a second and a half being streamed in from the server that's so cool there is no nextjs here there is no react here there is nothing special here we're just streaming in up HTML as time goes on the really fun thing here that Michael pointed out I see what you did there with the nbsp padding to get over the minimum length for broley and gzip encoding and then to flush the first chunk if you don't have enough content inside of a chunk it doesn't just send it waits till it has enough before sending and by putting this 1,24 times he forces it over that limit so it can both be minified with gzip and be sent to the user small hack clever hack great example overall I think this is one of the coolest ways to see that this weight and tell stuff isn't just an xjs feature it's a way that versell lets you manage a response as well as a written stream and play with these things together in really powerful ways that's my thoughts on wait until until it solves a legitimate problem I have with Lambda and I'm curious if it does for you guys as well I'm excited for the top comment to be why not just use a $5 VPS so have at it guys until next time peace neres




## Six Years Later, I’m Over GraphQL - 20240602
everyone seems to think I hate graphql and it's annoying because I don't I actually think graphql is a great solution I just don't think it's the right solution for everybody and if you have the ability to avoid it and provide a better experience you should if you have a back end and a front end that are in the same language that language is typescript and ideally the code is in the same project and the same repo on GitHub it's very easy to use something like trpc or any of the other Solutions like it to share types from your back end to your front end and it's even easier to go Define a new query on the back end if you need a new shape for your data on the the front end the ability to move fast isn't reserved to graphql anymore at the time way back it was if you were trying to make changes between backend in front end and have everything behave made a lot of sense to use something like graphql there are still places where it makes a ton of sense and if you want to know more about that you check out my talk at the keynote of graphql conf last year where I go in depth on why I think graphql is a great solution for teams that have different backend and front end Technologies often different backend and frontend teams when I worked at twitch we were in the process of moving the back end to go in the front end to react in typescript and graphql was the glue that held it all together let the backend teams go do their things let the front end teams go do their things and we were able to pull it all together in a way that was a great experience for everyone that was a magical thing and it's a big part of why I was able to move more in the front end direction before we had graphql at twitch I was entirely stuck on back end because if the back end didn't work nothing else could be done even if I wanted to work on the front end I had to spend so much time on backend just making sure it behaved but then when we mooved to graphql and we could Define a spec through the schema that said exactly what we should be expecting everything got so much easier to work with contribute to Etc as such I think graph K is a great solution when you have backend teams and front end teams using different Technologies not even talking to each other a whole lot and the schema layer that you can Define in the middle lets you agree make this contract and go and do your own things there's a lot of additional benefits to graphql that I'm not as interested in but I think that core distinction the team and Company structure distinction is where graphql makes a lot of sense here's a tweet I made a while ago that I think still for the most part holds true we obviously have things like server components now that make it a little more interesting but if you're back and front end are both typescript and they're the same team too cool use the RPC if the back end isn't typescript and the front end is graph C is a solid solution but if rest makes sense for you cool you can use that too if it's different teams and they're not typescript on the back end graphql makes sense for all of that and if it's a different company which means that the ability to consume the code and keep things up to date through the schema layer directly is much more complex just use rest graphql for external apis like being a developer querying against something like I don't know GitHub using the graphql API it's a miserable experience and usually when people use graphql for public apis they're just Reinventing rest but worst but if you're structuring your company in a way that graphql makes sense cool you should use it but a lot of people adopted it too early the same way they throw kubernetes at everything cuz Google uses it they were throwing graphql at everything CU Facebook uses it and graphql is not that simple it's not that simple at all and translating from typescript to graphql to typescript again is stupid why are we talking talking about all this well I saw an article why after 6 years I'm over graphql and I'll take the opportunity to talk about it but I had to give that Preamble because I want to be very clear I'm not anti-g graphql even though people seem to think I am just because I like trpc 2 if I can use trpc I will and if I can't graphql is my next choice let's dive in graphql is an incredible piece of technology that has captured a lot of Mind share since I first started slinging it in production back in 2018 you won't have to look far back on this rather inactive blog to see that I've previously championed this technology after building many a react Spa on top of a hodg podge of untyped Json rest apis I found graphql to be a breath of fresh air I was truly a graphql hype train member I feel similarly here once you go all in on type safety you get really into the fact that not having that safety through a Json rest call is terrifying not actually knowing what data you got back from the server and having to guess and hope you got all the fields right it sucks and I'm thankful I haven't had to do that for a long time now because I have went all in on type safety however as the years have gone on and I have had the opportunity to deploy to environments where non-functional requirements like security performance and maintainability were more of a concern my perspective has changed in this article I would like to take you through why today I would not recommend graphql to most people and what I think are better Alternatives throughout I'll use Ruby code with the excellent graphql Ruby lib for examples but I believe many of these problems are ubiquitous across the choices of languages as well as graphql libraries I have a lot more experience in things that aren't graphql Ruby I played with it a lot in Elixir but I used it most heavily in go and Apollo so those will be my reference es but we'll be interested to see how our experiences have differed if you know of better Solutions and mitigations please do leave a comment now let's begin attack surface oh boy this is one of my favorite graphql points and it is a very very valid one it was obvious from graph Q's beginning that exposing a query language to untrusted clients increases the attack surface of the application nevertheless the variety of attacks to consider was even broader than I imagined and mitigating them is quite a burden here's the worst I've had to deal with over the years authorization oh boy I think this is the most widely understood risk of graphql so I won't go into too much depth here tldr if you expose a fully self-documenting query API to all clients you better be damn sure that every field is authorized against the current user appropriately to the context of which the field is being fetched initially authorizing objects seems like enough but this quickly becomes insufficient for example say that you're the Twitter API where we have user where you get their handle and their email we also have on our user object a list of blocked users obviously we shouldn't be able to see their a users pii just cuz you can few their user and get their handle on these things and you shouldn't even be able to see certain public info because the context matters one must wonder how much graph holds responsibility for broken Access Control climbing to the owasp's top 10 number one spot you guys are curious what this is open worldwide application security protocol it's an online community that produces freely available articles methodologies documentation tools and Tech in the field of iot it's a group of people that keep track of the most common and problematic security issues and broken Access Control has has climbed all the way to the number one it was in the number five slot before so that's a pretty big jump and the theory here is that a big part of Y is graphql and honestly I can see it one mitigation here is making your API secure by default and integrating with your graphql libraries authorization framework every object returned Andor field resolved your authorization system is called to confirm that the current user does indeed have Access compare this to the rest world where generally speaking you would authorize every end point which is a far smaller task funny enough this is the case with trpc as well because it's so easy to Define an endpoint you just Define the right endpoint and Gabriel is making a good point here too where if every single field of every single query has to be authenticated itself the amount of overhead just to get that data is insane fun new thing that just happened uh Happy this got revealed to us if you want proof that graphql security isn't easy a threat actor claims to have extracted more than 200 million recent records from Facebook and Instagram all by hitting the graphql API super super fun yeah this ain't easy now let's talk about rate limiting rate limiting is going to be super fun for this for a bunch of reasons and I actually have stories here about twitch outages I caused that will make this even more fun with graphql we cannot assume that all requests are equally hard on the server there is no limit to how big a query can be even in a completely empty schema the types exposed for introspection are cyclical so it is possible to craft a valid qu query that returns megabytes of Json the cyclic thing is not super common uh it's actually kind of annoyingly hard to do recursive definitions in a schema you kind of can you can definitely get way more data than you expect I just tested this against a very popular website's graphql API Explorer and I got a 500 response back after 10 seconds I just ate 10 seconds of someone's CPU time running wh space removed 128 byte query and it doesn't even require me to be logged in I'll tell you my story now so we have this basic graphql query we're grabbing user id1 we have their ID and their name if we look at twitch chat here you'll see a lot of other things that are here we have how long this person has been on this been watching this channel for their account was cre Creed on August 5th 2017 we have their badges so this person's a moderator they're a TW tier three sub and they have the prime gaming or badge as well these are all different fields we might want it's also worth noting these fields are specific to the channel so he has moderator on this channel but not other channels so we're not actually querying user we're querying Channel with we'll say ID Theo and then under here we're querying users So within here certain Fields will be different maybe we have a chat color maybe we have message history which is its own separate sub field that we have to deal with now too that has other things like uh message contents sent at those types of things and maybe probably important we should keep track of the badges so let's grab Badges and badges have a few things too they have IDs they have uh image URLs they have a lot of these different fields that are important I should have name too because every badge has a name so now we have a pretty representative query of something that you would absolutely do at twitch so looking at this query if if I was to tell you that one of these fields took down the chat service at twitch which one do you think it is looking at this pretty innocent query what here do you think had the ability to not just take down chat but it also almost took down payments seeing some good answers here the history the message the sent at these types of things all sounds logical what if I told you it was badges one of the ways your badges are determined is by what you've paid for on Twitch this badge that Gabriel has is a tier three sub badge that you have for 23 months in order to have that he has to have paid for it so the payment service gets hit every time you query badges because of that the official way that badges the query was being used on Twitch was that this was almost never actually called except for one place really early on where the badge values would be pre-loaded for chat I can prove this by showing here if I change my badge I'll change it to the ghf pledge I'll send a message notice that my badge is still that badge I'll send another oh is is it it's not going to no it will it should swap third times the charm no it's not swapping at all will it not do it it should be eventually no maybe I have to refresh to see it nope cool we'll go to another small streamer Channel you guys might not have heard of him hi Prime I'm using your chat for a demo here it has that badge that I switched to and now I'll switch it back to my partner badge trying once more oh it actually switch first time that time usually when you switch your badge it actually takes a message or two to properly swap over almost always does I've had this problem for as long as I've been using twitch one more oh cool it's actually switching immediately now that's a new change that's a really nice cool new thing that didn't work that way before and the reason it didn't work that way before is because all of the badges were queried really early and then not queried again until they had to be because it turns out querying badges on user which seems like the most innocent thing the world is not and even though the service that we did this on was a relatively minimal service it was twitch.tv/ moderator and I'll hop into my channel here moderate my own channel you're not familiar mod view is the most proud I've been of anything I built at twitch by a lot it's one of the projects I'm most proud of period and one of the things we have here is this list of people in the community specifically the list of moderators we used to fetch the badges for each of these people so we could see what a gor's badges were what embeds badges were what f badges were notice that we're not showing the badges now the reason is because despite this page being relatively not common for people to hit even the day we launched it like one in probably 10,000 twitch sessions go to this page there are heavy users of course that will go to this page and sit on it for a while but we weren't firing this query a whole lot like it wasn't happening a ton or anything it's not like we went out of our way to query this constantly or that it was being used on every single page on the site it was a very small percentage of users on this page that fires this query once every I think it was every minute or two at at worst and that was enough to almost take down payments for all of twitch because a query as innocent as badges getting these tiny little icons next to your name was enough to almost take down critical infrastructure at twitch so yeah rate limiting is important and also clearly documenting on every one of these fields which ones do and don't have to figure these things out because like I would never have written this query and assumed that I should go talk to the chat and badges team to make sure that calling the field badges wasn't going to take down twitch that makes no sense at all so yeah this is the issue I just cannot fathom dealing with this at scale without doing a lot of work a really good response to the issue that I describe with badges would be why don't the resources just expose a cash value instead great question ask the team that built the badges endpoint here that added this field in and tried to get my team in trouble for using it because I agree they should have been cashing it but I had to die on a sword even though I didn't write this query because my team was getting for it and I didn't want them to go through get blame and go after somebody who deserved a promotion that was already struggling to get it they were trying to start with her and with my team because they suck at API design nothing here indicates that I shouldn't be calling badges they put no work into it whatsoever should I have went through and audited every single graphql query in my app to make sure that they were being cashed properly and that every team was okay with me using it sure this project would have taken us three times longer to ship we built it in 6 months it would have taken a year and a half I am confident in saying that but yes you are totally right n heal the resource should absolutely have exposed to cash value rather than make it my problem and then go to like my exec to try and get me in trouble for it which is what they did instead yeah cashing is hard so go to HR instead anyways apparently shifi had this problem too rate limiting graphical apis by calculating query complexity fascinating the thing we have to do to make these Solutions work are insane you know I I'm happy he called this one out cuz I should talk about this one more and I love the opportunity to complain about the issues I've had because yeah this sucks and there isn't a clear solution here here's the common mitigation for this attack by the way he's calling it an attack because if you find something that's slow you can just destroy them by calling queries like this common mitigation for this attack is the following to estimate the complexity for resolving every single field in the schema and then abandon queries that exceeds some Maximum complexity value and to capture the actual complexity of the query and take it out of the bucket of credits that resets at some interval now you're building your own crazy like DIY rate limiters because certain Fields take too long to query the calculation is a delicate Affair to get right this is linking to the graphql Ruby uh page preventing complex queries Fields have a complexity value which can be configured in their definition it can be a constant numeric value or a proc if no complexity is defined for a field it will default to a value of one it can be defined as a keyword or inside the configuration block that's nice having a complexity field that you can Define in their layer is nice I hope that's exposed in a way that's actually useful when you're querying against it it's a a good step in the right direction though but also you could easily make an assumption about the complexity of these queries and if they are wrong you might end up rate limiting valid queries or not rate limiting the invalid ones to make matters worse it's common for the graph that makes up the schema to contain Cycles let's say you run a Blog with articles which each have multiple tags from which you can see the associated articles so we have type tag name String related tags tag and then type article has tags as well have fun when estimating the complexity of tag. related tags you might assume that an article will never have more than five tags so you set the Field's complexity to five or five times its children's complexity the problem here is that article. related tags can be its own child so your estimates in accuracy can compound exponentially the formula is n ^ 5 * 1 so given this query you can expect 5 ^ 5 is a 3,125 complexity if an attacker is able to find an article with 10 tags they can trigger a query with a true complexity of 100,000 which is 20 times greater than what you estimated so being very slightly off on your estimate you go from an article 5 tax 1010 it's that easy to just swamp your service partial mitigation here is to prevent deeply nested queries however the example above demonstrates that this is not really a defense as it's not an unusually deep query graphql Ruby's default maximum depth is 13 and this is only a depth of seven yep compare this to rate limiting a rest endpoint which generally has comparable response times in this case all you need is a bucketed rate limiter that prevents a user from exceeding say 200 requests per minute across all endpoints if you do have slow endpoints like a CSV report or a PDF generator you can Define more aggressive rate limits for these with some HTTP middleware this is pretty trivial yeah totally agree I want to showcase how easy it is to add rate limiting using trpc because I think this actually showcases why I like trpc flexibility so much we're going to get clone my first T3 stack project this is my first public example of trpc roundest Monon if you go to my channel you look at the oldest video you'll see npm install these will all be installed it will load Prisma and all of that and now I have my project dope all the type definitions all work is expected I have this cast vote endpoint and I want to make sure people can't abuse it since the cast vote endpoint is a mutation that isn't a graph where you're chaining and defining on the client side what you are and aren't using it's literally just a mutation that you call on the client side I can do whatever I want to in here if I want this cast vot mutation to be protected differently from the get Pokemon pair query cool it's easy to do I just do it here let's do it I will go grab the rate limiter I prefer which is up stash which has sponsored me in the past I have not asked them to up our sponsor again because I feel like I not done enough for them I like the product a lot genuinely and highly recommend it and they have a great rate limiter so we can just install up Rus and up rate limit npm install up Rus up limit now I have these two packages if you're not what familiar with what up stash is it is Rus as a service as well as Kafka and the new Vector DB and qash mostly the Rus side is what I'm familiar with and they built really really nice stuff on top even if you're not using up stash their Reus stuff is the best way to use Rus in typescript by a lot yeah they're using the point MERS them didn't even notice that good call out good theme so now we have all this we can go make a rate limiter I could paste it on top here I'll just throw it in a new file though because sure rate limiter dots paste export cost rate limiter or rate limit and now in here I import paste auto complete cool now I can call the rate limit function con success is await rate limit. liit we need to identify the user in some way thankfully we have a bunch of stuff here that might be helpful we have the context and in the context we have useful Fields like context dot this before we pass the request because this is pre-create T3 app okay we're just going to whiff it this is an old trpc project so I don't actually have the request bound to the context so I'm just lying here in your project if you use cre3 app this will all just work fine we want to limit by something unique to this user it's pretty easy to do request Dot and in here we have a bunch of info one of the things we'll have is request. headers doip oh just request. IP nice look at that so I can literally just call request. iip if we're using forell you might be mad about the type here that's fine I don't care now we're rate limiting by their IP address isn't that nice it's that simple we call a rate limiter with something that's uniquely identifying if we want to make it specific to the sun point we can do that too cast vote plus request. IP now this user can only call this thing a certain amount if we want to configure it obviously that's an option too we hop over here well I guess the rate limiter itself has this defined so if we go back to the rate limiter object if I want this to be only callable once every 10 seconds now it is I want it be callable 20 times every 30 minutes now it is isn't that nice you just call it I am not actually using it though which is important which I should do here so if no success throw new error rate limited and now we can get them out here kick them of what they're doing before we even get to the code that actually runs so yes technically speaking they're able to get this code to run over and over but it doesn't really matter because none of this code is actually slow and since our endpoints are specific to our needs this is easy to do the big inversion going from something like graphql to something like trpc is that with graphql you define the query in the client so if you need a Pokémon pair that has these values in it then you would Define on the client the actual ql query that you're firing and then fire that from the client and then the server gets that query parses for what exactly you're actually looking for and then validates all those fields and then sends it to you with trpc it's inverted if you want a different query if you want different data in the query you don't on the client Say Hey I want different data you go to your server and you add the data or if you don't want to overuse a given field like let's say I want get Pokemon triplet instead of pair I'm not going to add a third option to get Pokémon pair I'm not going to add more options because I could just make get Pokemon triplet and now I can do different things in here it's so easy to Define new queries with trpc that you don't often find yourself Wishing on the client side that you could call any permutation of a query if the existing API doesn't give you exactly what you need go copy paste it and make a new one it's super easy to do that and then every single API endpoint in quotes cuz this all is going through one endpoint anyways they all be bashed the same way too each one of these is Trivial to valid the reality is that the thing we want to validate isn't your access to a given field it's your access to a given call if we go back to this example if I could validate this query upon writing it to say this query can only be ran if it has these properties or you have these permissions that' be great but you don't write queries on the back end in graphql you write queries on the front end you write schemas on the back end and that's the difference with trpc you define the queries on the back end and with graphql you define them on the front end this is the issue and the reason this made sense is because defining apis on the back end used to be so hard that if the back end just exposed everything and the frontend could say what it wanted that seemed great but if you could just go toine the right thing on the back end by just writing a function the need for that goes away really quickly trpc made API so easy that I unfortunately have no other option than to confront my bad UI design skills you do have another option you do what I did become a influencer because I had the same thing when doing this stuff got so easy I ended up becoming a content creator cuz I just wanted people to see how easy this could be but yeah I totally agree rate limiting is a real problem it's caused a lot of trouble for me in the past and trpc along with any rate limiter just makes this trivial speaking of things that aren't trivial we need to talk about query parsing before a query is executed it is first parsed we once received a pen test report evidencing that it's possible to craft an invalid query string that out of memoried the server okay this is a this is where we're getting into the rilms but yeah it's a syntactically valid query but it's invalid for our schema a spec compliance server will parse this and start building an error response containing thousands of Errors which we found consumed 2,000 times more memory than the query string itself because of this memory amplification it's not enough to just limit the payload size as you will have valid queries that are larger than the smallest dangerous malicious one yep if your server exposes a concept of maximum number of Errors to a crew before abandoning parsing this can be mitigated if not you have to roll your own solution there is no rest equivalent to this attack of this severity yep you have to limit the query size too even if you do limit the query size you might still be cuz this query is Tiny still tiny and you can ruin things with it performance when it comes to Performance in graphql people often talk about its incompatibility with HTTP caching this is a fun one if you don't know this already graphql calls are all done through post because you need to have a body and you can't have a body in a get with a traditional API call you just put the things in the URL and each URL is unique to one query so it can return the specific stuff technically you can pass a body via query prams but it's a bit of of a mess yeah the issue here is that when you need a body because you only have one endo and then you're trying to send the query shape to that you can't just throw this in your url so you need somewhere to put it so you put it in post and that's now how every graphql Endo works with trpc don't have to worry about that because your R Points pretty simple pretty dumb pretty easy to hit and everything's just encoded in the URL works great and then when you transform the response to Super Json you don't even have to worry about things being formatted wrong like dates and just all works it's really really nice when it comes to Performance and graphql people often talk about its incompatibility with HP caching yeah if you're not using gets and you're only using posts good luck cashing it for me personally this has not been an issue yeah fair not for everybody but when it is it sucks the inability to cash common things does suck for SAS applications data is usually highly user specific and serving stale data is unacceptable so I've not found myself missing response cashes or the cash invalidations bugs that they cause the Major Performance problems I did find myself dealing with were the following data fetching in the N plus1 problem oh boy I think the issue is pretty widely understood nowadays tldr if a field resolver hits an external data source such as a DB or HTTP API and it is nested in a list containing n items it will do those calls end times so to go back to my example query here if each of these messages when it gets your message history has to hit an endpoint to get the data then if you have n messages or let's say five messages you now have to hit that API five times or hit the database five times you can't query all five at once this is not a unique problem to graphql and actually the strict graphql resolution algorithm has allowed most libraries to share common Solutions specifically the data loader pattern unique to graphql though is the fact that since it is a query language this can become a problem with no backend changes when a client modifies a query yep it's very easy for you to suddenly go down because somebody on client quered in a way you weren't expecting as a result I found you end up having to defensively introduce the data loader abstraction everywhere just in case a client ends up fetching a field in a list context in the future this is a lot of boiler PLT to write and maintain meanwhile in rest we can generally hoist nested n plus1 queries up to the controller which I think is a pattern much easier to wrap your head around yeah just grab up to 25 posts including author and tags and then respond with it as Json nice no preing necessary here since n equals 1 yeah cool authorization in the N plus1 problem oh boy here where get really funny if you follow the advice earlier of integrating with your library's authorization framework you've now got a whole new category of n plus1 problems to deal with let's continue with our X API example for before for we have field handle and a field birthday which can only be authorized if you have this permission and now we've defined VPI as you are friends with this person oh no I hit the DB to fetch the user's friends now when I fetch all of their friends and I have to check all of those birthday calls against user. friends with for every single one of my friends I'm now firing an additional graphql query well an additional database query just to confirm that they actually have permission to see birthday this is actually trickier to deal with than our previous example because authorization code is not always run in a graphql context it may for example be run in a background job or on an HTML endpoint that means we can't just reach for a data loader natively because data loaders expect to be run from within graphql at least in the Ruby implementation in my experience this is actually the biggest source of performance issues I am amazed at how common this is that over authentication and authentication checking constantly or having a bunch of waterfall queries where you're running 15 queries that could have been one and now you're reing for each one checking off in unnecessary amount of times is so weirdly common a p patter and I don't just mean that the user is the user but the user has permission to do this thing we would regularly find that our queries were spending more time authorizing data than anything else again this problem simply does not exist in the rest World yep I've mitigated this using nasty things like request level globals to memorize data across policy calls but it never felt great coupling in my experience in a mature graphql code base your business logic is forced into the transport layer this happens through a number of mechanisms some of which we've already talked about like solving data authorization leading to peppering authorization rules through out the graphql types solving mutations in argument authorization leading to peppering off rules throughout your graphql arguments solving resolver data fetching n plus 1es leads to moving this logic into graphql specific data loaders yep you'll notice a pattern here we're just in order to solve graphql we have to do something on top or the best option here is leveraging the lovely relay connection pattern which leads to moving data fetching logic into the graphql specific custom connection objects Joy the net effect of all of this is to meaningfully test your application you must exclusively test at the integration layer I.E by running a graphql query I have found this makes for a painful experience any errors encountered are captured by the framework leading to the fun task of reading stack traces and Json graphql error responses since so much around authorization and data loaders happens inside the framework debugging is often much harder as the breakpoint you want is not an application code how does rest solve not having to make a DB Call to determine whether or not to show the friend because you can make it once rather than making it a whole bunch the issue on that example is that because I'm fetching friends the context of these people being my friends is lost by the time we're checking birthday because the birthday field itself the off check is happening here not here if you did this with a rest API or with a trpc API or a server component or server actions you just get your friends and now you know you can safely get their birthdays because they're already your friends you know that because the get my friends query or the slashy friend API endpoint once the data is fetched it is implicitly checking when getting friends that they are your friends we don't have to recheck this field from the user type because birthday is authenticated on the friend level because it's a user object here not on the me level if we could authenticate me instead of authenticating each friend relative to me it's one check instead of number of friends checks and now everyone's favorite thing to complain about complexity taking an aggregate the various mitigations to security and performance issues that we've gone through add significant complex complexity to a code base it's not that rest does not have these problems though it certainly has fewer it's that the rest Solutions are generally much simpler for a backend developer to implement and understand and another big part here is that it all can live in like one file it's so much simpler to just read a file top to bottom and see exactly what it's doing for your API endpoints versus the craziness hopping between your transport layer your framework docks your different fields and how they're being authenticated the authentication bindings on subfields and all these different models and all this chaos sucks having it just top to bottom reading one thing makes life so much simpler it's the same reason I like the way react does State technically you can just return authorization errors on the graphql field birthday rather than on the parent field me yeah but the friends object is a user object if we defined a separate object for friends maybe but the reason this is happening here is because on the user object we bound authorized with so could we error out that you can't query friends if you're not you sure but now we have to make a whole separate user type for friends too and make sure everything in here is safe to query and that's not how reality ends up working almost ever let's go through the end more here quick so those are the major reasons I am for the most part over graphql I have a few more peeves but to keep the article from growing further I'll summarize them below graph K discourages breaking changes and provides no tools to deal with them oh man yeah versioning and breaking changes on your graphql apis is miserable this adds needless complexity for those who control all of their clients who will have to find workarounds and instead Reliance on HTTP response codes turns up everywhere in tooling so dealing with the fact that 200 can mean everything from everything is okay to everything is down can be quite annoying there another fun thing graph un points will always respond with the 200 even if it's an error that means you can get them cash too wait you can't cuz it's all post even more fun fing all your data in one query in the hp2 plus age is often not beneficial to response time in fact it will worsen it if your server is not parallelized versus sending separate requests to separate servers to process in parallel streaming makes this much easier but sure alter atives okay end of rant what would I recommend instead to be up front I'm definitely early in the hype cycle here but right now my view is the following if you control your clients you have less than three clients you have a client written in a statically typed language and you're using greater than one language across all servers and clients you're probably better off exposing an open API 3.0 compliant Json rest API if as in my experience the main thing your front and devs like about graphql is it self documenting type safe nature I think this will work well for you I don't think this is a great summary of what front end devs like the way I would put it is that frontend devs like that they feel less blocked by a graphql API than a rest API with graphql all of the permutations of the existing data could be access without touching a back in Dev I can just write the end point I need by hopping in my front end file and writing a new query as long as all the fields already exist with rest apis if I need different data or I need a different shape of data either I call five different things on client and mangle them together which is very very common or I bug the backend guys to go make some changes and hope they got actually get made within time that's the main thing I like to graph ql for is that I didn't have to bug backend to make new experiences for users with and I also didn't have to make these crazy piles of queries and then attach them all together after making a bunch of Ajax calls on client now all of that attaching is going on in server which isn't better to again go to trpc the reason I think that is such a great experience is because you can just go write the query on the back end you don't have to do it this way at all which is really really nice change Tooling in this area has improved a lot since graphql came on the scene there are many options for generating typed client code even down to framework specific data fetching libraries my experience so far is a pretty close to the best parts of what I use graphql for without the complexity of the Facebook needs as with graphql there's a couple of implementation approaches though you can do the open API spec from a type file there's a bunch of tools to generate the like open API spec and like or pipe it typescript co those all exist now and also do a spec first thing where you define the schema ahead of time look at that he even accounted for my tweet happy that him and I agree here that if you're only using one language and that language is typescript you should be using trpc nice that I don't have to emphasize that separately he even calls it out a language specific solution like trpc might be a better fit yep totally agree this was a great article it's nice that like the graphql Fanboys are acknowledging the flaws now and like pointing out what the actual experience is like maintaining these things over time Matt Bessie you killed it with this one great blog post Link in the description anybody wants to read it and look into it more in the future that's all I think I have on this one though I have not touched graphql for a while not because it's bad but because all the things you just disgust are not pleasant unless you really really really need the benefits let me know what you think though I'm sure a lot of you still like graft I'm sure a lot of you absolutely hate it I'm still in the middle but I hope this is useful context until next time peace nerds




## Skip just dropped - _it's like React, for your Backend_ - 20250116
I think it's fair to say that react kind of changed how we build applications at the very least on the client side it turns out that the component model and the reactivity model are a pretty good way of building even if you don't like react itself that model has caught on and is being used by Frameworks far away from the react World even ones that existed before reacted but the back end hasn't seen that same significant change while we are finding new languages and patterns and cool things to do it feels like the relationship between back end and front end hasn't meaningfully evolved since graphql obviously we have cool stuff like typescript and trpc but this idea of a reactivity graph that goes from your database to the actual user loading the data it hasn't really been unlocked that is it hasn't been unlocked until now because Facebook and meta have been working really hard and Vues Christopher Chau one of my favorite devs ever just announced skip the reactive framework the way he described it is it's something like react for the backend and it is really cool V is in some random Dev he's the creator of excal draw of prettier and of recoil which is one of the more powerful State Management libraries in react he's pretty much as deep as you can go and when I say deep I mean it because skip started as a programming language so if you want to hear all about the history of skip this crazy new framework and Paradigm for building it's almost like the the sequel to graphql in a lot of ways make sure you stick through this quick sponsor break a lot of us are building Dev tools nowadays and is simple as Parts might seem a lot of it isn't one of the things I see people getting wrong the most is API access and that's why today's sponsor unkey exists they make building apis way easier handling everything from authentication to Key Management to rate limiting to Dos protection and so much more they support everything and I mean everything obviously they support typescript the companies all built by typescript devs they also have sdks for python rust goang using it with Carl directly Elixir if you want to yes they have an Elixir SDK super cool even Java has support probably should have mentioned this before but it is fully open source which is great not just because you can trust the code and host it yourself but you can actually read through and learn a lot about proper full stack open source application management because this is a complex code base with a lot going on inside of it when you set up apis like this yourself you're going to end up missing a ton of things from how you handle multicloud to how you invalidate environment variables to how you manage rate limiting by Keys as well as by IP addresses it's not fun I've been there and if you want to avoid being there you should check out unkey today check them out today at soy. linkun I just spent a lot of time deep diving on all of this and I think the whole Deep dive is going to end up on my other channel Theo throwaways there will be a link in the description if it does first like I have to show you guys the website because it's stunning especially for a newer project that also isn't that new there have been pieces of skip floating around at meta for a while and they are actually using this for a lot of stuff but skips an interesting framework because it's not like an alternative to express or Nest or nextjs or any of these other things it is a layer that goes between a bunch of backend Services data sources whatever and your client similar to how like a graphql service lives between your other services your databases your microservices whatever and your clients this fits in that same spot as they describe it it's a simple comprehensive abstraction for building realtime features that are efficient and debuggable it's not a easy path there but it definitely does do that their goal is to simplify your state similar to how react solved this whole category of bugs with the graph of components you hopefully seen an image like this before of react as a tree if you have the app component and it has two children inspiration generator and fancy text and then inspiration generator has children of its own there is now a clear dependency tree from top to bottom if inspiration generator had some State and we wanted that state to get to fancy text you're kind of rude because in react the state has to live in a parent in order for the children to have access If the child owns it itself it can do whatever it wants with it but nothing higher up or to the side of it has access only children will have access to that state this has costs as I'm sure we've all seen where you move some State up too high and now everything renders what we don't give this model enough credit for is how many problems it's solved it was very common before react for you to work on a feature where you click a button and then something changes but now you have to manually tell it every place to change like if I hit the delete item from cart button on Amazon now I have to update state in like 15 different places but I don't remember to go rerun the thing that generates the icon in the corner even if I've updated the state properly I might still see 13 items in the corner when I should only have 12 and that's what react basically made go away with this reactivity model at the cost of rendering now a stuff like compiler we're solving those costs but the model itself has its benefits and negatives there is the cost of having to be declarative and having to rerun everything when a change occurs but there's a benefit of you'll never have anything out of sync ever you don't even have to define the logic for the updating because the graph itself is what defines the updates and this absolutely simplifies our state we've seen this in react we've seen this with tools like react query we've seen this in other Frameworks and spaces as well it is very powerful so what actually is Skip they keep using this term runtime to describe it and it it feels weird but I think it's fair especially when you consider the fact that it is written in a combination of their custom language skip as well as straight up C yes 20% of this repo is just raw C which is kind of insane yeah the runtime is interesting it's the way that you define these collections they call them and the relationships between them and this skip run time lives between external services and the application that users are actually going to cons the tldr of how it works is you import things like your services streams from other places as well as databases all as collections you map them in typescript to new collections that have the more specific things you want so if you have a database table with all your users and you want to have your friend list maybe the friend list can be derived from the user table but it is a new collection after you've created those maps you can create more complex logic that's all reusable from them that then gets piped to your client which can subscribe to realtime updates so if one of my friends deletes their account the user table changes that means my derived friend collection changes which means the friend list the user seeing should change or if the friend changes their name it should be able to hydrate that change all the way to the user's friend list and that's what makes this school before we dive too deep in the code I want to make a few things very clear first and foremost this is one of the most production ready things I've talked about in a while because they're actually using this for real stuff at Facebook and this is a project that's been worked on for years it's not some random new hobby project it's not some throwaway thing like my way of dealing with server actions when next js14 dropped this is a real legit project that a lot more time is going to go into that said I don't think almost anyone who isn't working at meta should be using this just yet it is refined in the sense that it can handle production workloads it is new in the sense that it just dropped for the public and it is not ready to be used outside of its very specific intended way I know that because I've spent a lot of time in this repo over the last hour and a half and it is it's a journey so let's go through their mental model real quick the two key pieces of the skip runtime are Collections and mappers collections are sources of data they're like the the pile of data like just think of it like an array of things and then there are mappers mappers are things that create a new collection out of a collection it's like running map on an array you get a new array it a mapper cannot change the content of an existing collection all it can do is make a new collection out of an existing collection and when you do that like let's say you make a friend's collection out of the user's collection there's a direct path now from the user collection to my friend list collection it's also worth noting that a collection can be eager so it has all of the data constantly or lazy so it doesn't actually bother getting the data until it is requested by something Downstream let's look at the example from their code base ignore all the errors uh as I said they do not seem prepared for you to actually dive in here yet but that's why you guys are here so I can do the suffering this is a fun little service we'll start by looking at the database server we Define our skip service we import sqlite because we use the database to get things we have our little helper run function here you can ignore most of that now let's look at the actual endpoints we're defining this is all using Express so we have the user's endpoint we call service. gstream U ID so this is one of the interesting quirks of how skip works you don't request slash skip slash stream SL user slid every stream comes from the same endpoint slv1 stream SL uid this uu ID is created by Skip to represent a specific instance of a specific collection so we tell the skip service that we want the users collection which there's just one users collection for all the users from the database that might not be the one you want to expose to users but in this case it is so we get the uid for users do then the uuid and we redirect the users's request to localhost 880 V1 streams this U ID by doing this redirect now the user gets sent to the thing that streams all of the user data so now if things change they can have an event list that catches it the code for that's really simple this code can work on the server or the client anything that is Javascript and has Event Source you create the event Source literally just as the URL SL users in this case that then becomes this redirected stream URL so now we have an event source for the stream we have an event listener for when it's initialized which will quickly log out the initial data we then have an event listener for updates whenever an update occurs we now get the update and that's all all of the code for that and it is actually that simple I'll show some client examples in a bit like an actual react code so now we do this fetch Json even though it says fetch it's actually a put Tech goes through fetch whatever where we're updating user with the id1 123 and we're changing their name to be Daniel and we're setting their country to UK let's look at that code we have app. put here user ID we get the key from the parameter we get the data from the body of this put request so that's the thing we sent there this body so we have both of these we have the key and we have the new data we want in the database so we use our database Runner we insert a replace into the current Table it's just name data pass it the ID the object find those values you pass them here cool typical SQL we all seen this here's where things get fun do then so after the database query runs service dop put users so the user collection where this key is the identifier we want to update the data this one line here is all it takes to trigger an update to anything ever that is depending on this user as long as all things coming from that user data from the database are mapped from it or a collection that was mapped from it and you can see how the graph would work where we could be 20 to 100 layers down where this users collection is still the original source of Truth this one service. put call then triggers all the dependencies to update there is no code you have to write that says this table should go update and then this thing should go update and then this thing should go update the way that we're used to where I'm sure we've all written with react query on complete of the post call or whatever we then go and validate 15 things so they all refetch there is none of that and I can prove it because when I actually run this code it does some fun things we see the init response so we see actually that 123 is Daniel because that's what it was set to cuz I ran the code before and since the value is already set to that no update happens but if I nuke that default database State we'll see the update comes in before that second get call comes in first we have this anit call the anit has all the data that comes through on the Event Source being created initially then we have the set call this is when we send that post call to update the user to have a different name d ual we immediately have this update come through before the get call we do after even runs so here we are getting user 123 so we're actually trying to get from the database the user that has this ID this comes through after the stream sends the update because it is so much faster to have an existing connection send you the update super cool the delete failed because one of the end points died don't have to worry too much about that but you get the idea the update dat comes through and that is with no custom code being written which is again the magic part once you've set everything up properly which is not easy to do the result is a change will always trigger all dependencies all clients that have those dependencies they'll see the change immediately getting there is not easy though you have to manually Define all of these layers if we actually look at the database TS file here for example we'll see how these collections are defined we have type user which is a name in a country user collection is an eager collection with the key string the value user we have the class user resource which implements the resource user collection as an instantiate helper takes in the user collection and Returns the actual users and from here we set up the service this is with no mappings by the way this is just one single collection it still has all of this so yeah as I was saying this is all you need to create one collection but it's still quite a bit and you have to instantiate the service with it's initial data it's resources and the create graph function that creates all the dependencies which again here there aren't any but if we go to the example they have here which is actually a pretty compelling example we have user ID group ID both boring standard types then we have the user type and the group type user has name it is a Boolean for if it's active or not and it has a friends value which is an array of user IDs then there's Group which has a name and it has a members array again of user IDs let's say you wanted to see all of your friends based on whether or not they're active grouped by the groups they're in that is not a trivial grouping to do here even in squel this would be kind of annoying the logic seems pretty straightforward you filter the group's members by one intersection with the current user's friends and also their active status but it is not trivial at all to maintain up-to-date information in real time as like a user changes their username or their active status changes or the groups they're in change getting the current state to the user is not a fun problem to solve the way they Define this is using an active user mapper that takes a group ID a group and a user ID array it's mapping one to one out of that takes the group and returns user ID array but we filter out anyone who isn't active so the goal here is to just give you the active users from a given group then we got our initial data which is all the users and all the groups and then we create this first layer with our graph we take all of the groups from our input we map them with active users which results in all of the active users for a given group now we can return users colon input. users comma actives and now we have these two derivative collections that come from the initial data combined with the resources combined with these mappings this example service operates over two input collections one for users and one for groups it passes some resource inputs to its resource which is a reactively computed collection named actives which is of the set of active users in each group as well as the user's input collection The actives Collection is the output of the state computation graph which is produced by mapping over the input groups and filtering out users that have the active flag set our service wants to expose a resource parameterized by a user ID which could be queried or subscribed to by a client using the uses active friends in each group so here is the filter friends mapper this mapper again group ID user ID array one more user ID array here CU that's the final result takes in the uids which is the user IDs from the group and it filters ones that are your friend so it keeps them if they're friend of this. user and it doesn't if they're not so this allows you to take the current users friends and only return the user IDs from a given group that are that friends so now we have our active friends collection that does this mapping for us and in the instantiate we can see how it does it the user is input. users. getet unique with this. user ID because this. user ID is the thing we passed here for the user we're getting the info for and now that we have this user we also have their friends and we can now pass this as part of the Constructor to the filter friends mapper and it will go through all the active people and it will map the ones that are your friends and it knows who you are when you pass the user here it's a bit conduted and the control flow isn't super clear I think this arguably should go first because this is what you hit and then it passes that user that it gets the user ID for over to filter friends it is kind of hard to mentally model because it's one of the most functional Paradise of scene where it has the single source of Truth and it's trying to send that down through side effect free functions for defining everything very o with these classes so it's a bit of a set of mental hurdles to jump when you see what it's enabling it is very very cool because this admittedly hard digest code enables us to on the client seamlessly request the users's active friends and now when a user status changes a user's name changes or users groups change the client just sees the update with no additional code having to be written I promise client side code so let's take a look at it here is an example for their Hacker News clone that I I tried to get it running it there is no world in which this code is going to run I am sorry but here is the feed component the have a pulled version here by default but that's not what we're going to use we're going to take a look at the reactive version they create an Event Source they have an event listener for when the init event comes through and we set posts to be updated posts I would name this initial posts to be a little clearer because we have up here posts set posts US State Post array so the Event Source when created fires the init which sets the default state for posts and then when an update comes through it comes through with all of the posts so we just rerun the set post function with the new set of posts and then to make a change we just have a post call confusing since we're getting posts I mean post method call that triggers the update and as long as the backet is implemented properly this should automatically come through and you'll see the update on your end as a user this is a fun example because it has three pieces it has the www which is the actual web app it has the reactive service which is the skip layer that does The Binding between backend things and the front-end experience but it also has the web service which is a python project that is meant to be the back end for this fake app so you can almost imagine this is how it was originally written and then a new requirement for the app to perform better or you're making a new mobile app and you want it to update automatically this is how you would add that by adding something like skip in between your ex in backend or micros service layer and the front end so for actually getting the posts to that skip layer we have the check if event stream is supported and if it is we just pass you on to the event stream from the reactive service URL and if not we hand you a snapshot instead we have app. poost posts for creating a post we have all of our DB calls to actually get in the database but the way that we trigger the update through skip is our microservice here calls the reactive service URL do/ input SL poost post ID with what changed so now our skip service knows that this particular collection had a new entry added to it so it can then through its graph trigger the right updates for the client or if the user doesn't upvote by calling SL posts post ID upvotes we don't actually use the users ID here because I don't think they have off at all so there's no current user but once we have done the update in the database we do the same thing where we call the reactive service and we tell it that there's this new upvote ID that has these properties which then triggers everything depending on upvotes to change too so if the posts that you're rendering in the feed combine posts as they're stored in your database with upvotes as they're stored in your database a change to either that affects the thing that you're consuming will trigger the update to come through but that's the thing that I think is important to try and understand and have click with this model is when you change data you have to do the data change then you have to tell skip hey this is the data that changed and then it handles all of the updates from there in other systems either you would not have this part at all and you would expect the client to refetch when the change happens or you would have this backend code hit 15 different Services invalidate like 20 different caches and do all the things it needs to to make sure everyone dependent on this data and every shape this data could be in makes its way to the client hopefully this helps clarify why it isn't for everyone and what's even funnier is this is the like digested version previously they're trying to ship a new programming language and it turned out that's hard as such they changed the strategy they built the core Library using skip but they have people write code in JS instead which has a much lower adoption barrier but still has the same wins so now that you've seen how high this adoption barrier is hopefully you can estimate how much higher it was when they required you to write this in a whole new crazy language yeah that's all I got on this one it is a wild project that I'm actually very excited for I don't think almost anyone should use this but I think it introduces some really cool ideas that we can all learn a little bit from let me know what you guys think until next time peace nerds




## So I've Been Trying Other Languages... - 20240626
if you guys remember a little thing that we talked about in the past the 1 billion row challenge I've been needing to post that video for a while I think it's been delayed now for like 3 months yeah the 1 billion row challenge I recorded in February but as I was scheduling it again and I was thinking about it a bit more I decided to play a bit more this a project I made where I was playing with writing go code just to see how fast I could read the rows and count the Lions so if I go back to the code I had here originally I'm just going to and do that it would be very easy for me to store all of these lines and append these new values as I get them but I just want to read this text file because reminder this file is 13 gigs that is aext that is 13.8 GB it has a billion rows in it this is a text file with a billion rows you can confirm that by wc- L the file but I'm not going to just WC DL I'm going to time wc- l because I want you guys to see how long WC takes just to count the lines still waiting still waiting there's going to be a lot of this in this video I'm so sorry FaZe don't chop it we got 11.93 seconds for WC just to count the number of rows in the file we're in chaos land now boys so I have this go code here function read file takes in a file name have a deferred file Clos which if you're not familiar with go syntax this means that when everything else in this function is done this happens afterwards it's almost like a a cleanup function it's a really nice pattern other languages are starting to copy it and when I do things like this I see the value because now I'm able to put this file close call super close to where I open the file rather than like putting this at the end or ideally having some type of call back where that will fire after the return happens just doesn't have any of this defers a really nice pattern for just keeping the things that are similar located together so this is where the file IO is handled this is where the scanner is created and done and this doesn't have to blend into other things like the the pieces aren't leaking into each other as much which is really nice and when I did work at go at twitch for a while I did find this nice and having a pile of defers scattered throughout that almost always did the thing you want them to was quality there's still a lot of little things I hate and I'm sure we'll go over those as we go because go is not the only language we're talking about today but this was solid let me go build it quick because I want to show one of my other favorite things you see how long it took to build do you know how foreign this is to me as a typescript Dev the idea of a build taking 0.08 seconds is like funny to me it's even funnier to me because they should have a watch feature because it's if it's this fast to compile let me dash dash watch and just rerun it when I make changes but despite that and I've seen this a lot with go it feels like they kind of ignore developer experience beyond the code like the setup for go sucks the package Management's quirky and weird and Global all of these things are just kind of weird like the way that go works is strange the code is pretty clean and consistent and once you have everything set up the way you want on your machine awesome you're good to go but God it's weird and yes I know chat there are things where I can add my own watching like air but those aren't built in to go right that's a package right CU like I know that JavaScript does this wrong to I'm not going to pretend that node has these things handled they have node watch right like watch got added to node yeah 1811 has watch so like we have watch in node now really nice to have it and go yeah air is a go air I wonder if this will find anything I want yeah yeah live reload for go apps like it exists people have made it but like this should just be part of the language like why can't I just Dash Das watch on a go process the reason is because go is for building a binary and then you run the binary separately just a weird Quirk it'd be nice if they consider these things more as Ivon says go is weird but all languages have their quirks and features yes but those quirks and features say a lot about the intent and the design goals of the language and the things I'm seeing here are that go focuses on the language not on the features around the language the DX around the language those types of things but man it's nice that this code is so simple and like as we look here there's no manual memory allocation there's no references to memory at all there's a little bit of types like file name String and this has to return an INT or an error I was playing with some things where I was running into issues with 64-bit ins and ins even in code that was being referenced with um I asked co-pilot in chat gbt to help me out and the results were often like issues between ins and un 64s once you get over those quirks it's fine but not having to worry about memory or all those things is great and to just defer a file closed don't have to worry about the file staying open oh so nice so let's take a look at this really primitive thing which again has a VE for line count and we're just increasing the count by one for every line for scanner. scan because we're making a line scanner here by the way buffo new scanner and when you scanner. scan it actually will read line by line by default which is really nice buffo is cracked and the performance that I've seen from this is nuts like it's really really nuts let's take a look at this again single-threaded really rudimentary solution where we're just in one simple call here for looping over all the contents until we're out of them and increasing the line count every time uh we don't want to go build I want to go back up a directory [Music] time.go shouldn't be too much longer on [Music] um yeah 15 seconds so marginally slower than WC not bad considering that all WC does is parse files and this is very very simple single-threaded rudimentary code so that's not too bad I'm going to show you an optimized version but before I do that I want to show you the JavaScript version I made a couple JavaScript versions I was just curious in node we have a thing called readline it's actually quite handy to in node have a readline option for file stuff so here I create the file stream which is to the 13.8 GB measurements text file read line. create interface input file stream the delays Infinity this note got snuck in from something I copy pasted this from we use the crlf delay option to recognize all instances of crlf which are all the different types of line breaks in the input file cool now we have line count zero 408 con line of RL I I still love a weight syntax I need to use this more it's really handy for stuff like this we increase line count by one for each of these Total Lines in the file is as follows one important detail here that makes the performance characteristics very different is that we're not actually reading the line inside of this go file because I commented out the scanner. text call to get a fair comparison we should probably scanner. text I don't want to print it so I'm just going to call it hopefully it doesn't get too mad at me for doing that cuz goost compilers considering how rudimentary it is it's actually pretty good at stuff like this uh what the hell did I do I'll just scanner. text and let's see what the performance characteristics look like now that we're actually scanning each line expecting it to be a good bit worse but hopefully not too much worse no no no no listen we're cutting that see the difference there it's from 15.05 seconds to 1691 so now that we're reading the text even we're not doing anything with it at least we know the performance difference there so going from not reading the text to reading the text small percentage increase I want to compare this to node though so let's do that let's run this code in node and before youall ask why am I not using hyperfine because you don't get an output on hyperfine that is anything beyond the benchmarks and it likes to run things multiple times I just want to run it once and see what the output time is pretty simple but yeah this will take a minute this won't take as long as other Solutions we be trying funny enough this is not the slowest thing we'll be playing with but it's slow enough that thing is we're talking about if I look a little older now it's because of how long that took still got the right answer 1 billion and believe it or not some of the solutions I tried especially the chat GPT Solutions I tried I got a wide variety of answers that were not 1 billion which was amusing to try and debug why I was off by like Millions but the important piece here is that this took 223 seconds 223 seconds compared to go taking like 15 so yeah not great as I was showing before the go code despite being single threaded and really simple is a full order of magnitude faster than just reading it through JavaScript but we can do better here's a less synchronous solution actually this one's still sync we tried some async solutions where we would chunk the file up and parallel thread it but parsing a file for Lins in parallel is obnoxious and all of the things I tried either got wrong answers or errored out and I had some go like lunatics making these recommendations if I hop in here lots of ways to improve it too partition files yada yada and all the examples that I was getting from this code gen were just wrong like that's I don't know I'm like I'm not great at numbers but that's not a billion like I don't think a number that begins with seven is a billion unless we're using some really weird base but 7826 645 is a that's 700 million not a billion but uh again I'm not a math guy hard know for sure the answer is also interesting it takes advantage of some optimizations in the btes package I want to single file will probably throttle across multiple gof fun but this answer that John found here was actually really interesting function line counter buff count wiep so we're setting the separator as the bite code for back sln and then we're just hunting through each character trying to find those as fast as possible so let's run this solution I have the code here count file sync still the same OS open to open the file stuff but I pass the file IO to the line counter function line counter function is that function takes it an i reader returns into an error buff make array bite this is our buffer back sln is the new line delimiter now for C comma error r. read buff this is getting the chunk for this buffer so we get 32 * 1024 characters buffer from the string here and now we're counting how many of those bites match the line step so this happened to grab seven lines cool happen to grab one line cool doesn't matter now we have the switch which for some reason did not prettier the way I would like I'm going to go format this actually I haven't used enough go format that's how go format format switch statements y'all are weird you go people are so strange no to each their own Swift does this too I I want to like go formatting because I Credit Go specifically for the idea of having formatting be a language concern it's funny cuz earlier I was saying like go to doesn't do a lot of things I want my language to like it doesn't have features like watch but they do have a formatter and having a format built into your language is awesome I really like that idea because it means all the conversations we would normally have bickering over formatting can be ignored if go format has an opinion already just use the opinions of Rob Pike even if they're not good just use them so we can stop bitching and move on same reason why I don't have a prettier config when I can avoid it I'd rather just let prettier opinions be our opinions if we have our own personal ones cool A+ good for you let the codeb base be the code base regardless I hate this I really hate switch statements being like that yeah at the very very least explicit returns are nice the other language we'll be looking at doesn't have those and it's one of the few things I don't like about it we'll get there though because I want to build and then run this theoretically much faster version so go build and then time.go one brtc or BRC testing look at that 32 seconds reminder that wc- L took 11 seconds so this is significantly faster than what we were doing before this is hilarious that the fastest solution I have found thus far in any language I'm willing to write to just count the amount of rows in a file which admittedly is not a a real problem but once you're taking advantage of like buffers like this look at that speed a lot of people were thinking this task would be IO bound because it's a 13.8 gig file that's got to take forever right like how is this possibly being slowed down by your language I hope this helps prove that that's the case because a lot of people assumed Big File there's your problem no speaking of big files and problems I need to show this I'm not going to be running this one again because the time is here FaZe feel free to censor the time so we can reveal it later because I want to play with gleam the time here was not great and I want to show you just how not great but first I want to show you what is great which is the language here is me trying to read all of the lines from this file using gleam if you're not familiar with gleam you should watch more Prime Engine videos because he's been talking about it a lot he did a whole video about the newest 1.2 update it's a really cool update cuz shows that they're really thinking about the user experience developing with gleam as well as the reliability by focusing on fault tolerant stuff as well as nice changes to like the feedback the server gives you when you're writing the code and the feedback the compiler gives you when you're trying to like build it before it was not clear about some of these things they fixed it they're doing really cool stuff I like gleam a lot there's a lot of proms in this language it's a fun balance of something like elixir something a little more type safe and tiny bit more oo fascinating language has a couple characteristics I don't love we'll get to all that in a bit so I want to dive in here first we have our main function let assert okay stream is file stream. open read text measurements. text cool this is just us getting a stream the okay stream here is saying that we are asserting that this is okay so instead of doing the value comma error this is the equivalent and since we have an assert here is just going to throw if we don't like it Prime recently did a video where he was talking all about how he loves asserts and thinks we should use them more I hope he has time to play with GLE a bit because they lean into this a lot it's actually really nice to explicitly say you just do this ignore the error but in such an explicit way where it's part of the variable definition to wrap this with an assert okay I thought that was nice anyways we now have our stream which I then pass to readline but since we're doing this the functional programming Elixir way and as far as I know there is no traditional Loop in gleam instead of looping with like a while or four condition you inste loop with functions and recursion calls so things are a little messy because we have to call read line with a default value in this case zero so here's a function read line takes an X which is an integer and stream which is a file stream let next line equal file stream. readline stream one more thing I need to call out is the package I am using for this I go back to The Gleam site they have a list of packages so I do what any San person would do I command f for file and there's a couple things in here that are notable one is simplifile simplifile actually looks really interesting and promising simpli file provides synchronous operations for working with files and directories that work for all non-browser Targets earling node Doo and Bun this is an important detail because as they say in this description which is by the way it's small but this is one of the most honest top of read me I've ever read simpli file makes a simple trade-off it confines itself to a subset of purely synchronous file and directory utilities so that it can have one API for all Targets erlang and JavaScript have fundamentally different concurrency models so binding to async code will simply be different for different targets you should you simplify if one the same code running on JS and earling targets is important two sync file operations will not be a major performance bottle neck Dev tooling configuration scripting Etc and three you just want to do some basic file operations and get on with life you think you need a different solution these projects may be helpful file streams earling Target might see what I ended up doing gleam library that provides access to earling file streams file streams is a different file package and if we keep searching here we'll eventually run into file streams gleam library that provides access to earling file streams so theoretically this should be much faster we need to talk about the code a bit before I actually show the performance characteristics though because here I have a case statement it's a case statement that pattern matches which is so nice the underscores here work similar to underscores in like JavaScript where it's ignore this but I could put a value here like line contents and now this is the content of that line so if I wanted to print it or something I have it and the okay and error wrappers are part of the condition that's being checked the way pattern matching works is it takes this value whatever next line is and it goes through each of these conditions until one matches part of matching is okay or error so in the file stream readline code if I go back to the GitHub for it you'll see in this example reading a file is a binary stream open read test. text and we can read bytes we can get the two string and this is all asserts to show you that like this hello world is the content of the test. text file you see that cuz we write it above here but there's just a file that says hello world and then has an end line so I can confirm specific characters that are inside of this that's what this is supposed to show you but also I can confirm error filestream error.of when we actually get to the end of the stream once we've read everything that's inside of there simple stuff convenient stuff cool they did this this way I like the okay and error patterns they're super explicit and if you use them alongside something like a case statement o this is so convenient but what is it doing with these values good question because at this point my biggest complaint with gleam and I'll admit potential skill issue I might just get over this the lack of return kills me because what is happening here since these are the last evaluated lines in this function these get returned uh I've never been a fan of that I know that like your return's already at the bottom but the lack of an early return the inability to read and immediately see this is a return and the fact that this return condition is so many tabs and so far a distance from the bottom I did my time in Elixir I've done my time in Ruby I just like return I am what I am people are complaining with no exposit return type I'm pretty sure you can do explicit return types in gleam but that no need as you see when I hover over here it knows and integers what being returned at the end we're good it's fine but to read these conditions to be clear if the next line we got from the file stream read line is okay we read it if it's Error we return the value instead so this will eventually since it's recursive it's okay we call it again over and over each time we increment X by one with the recursive call until eventually we have the answer and if it's Error we just return that and that ends up being the thing that pushes up like redo style as the final answer so I would run this code and believe me I want to but the streams already gone for too long so I'm going to show you the result when I ran it earlier 1,571 seconds roughly the same multiplicative difference from Go to JavaScript as it was from JavaScript to gleam here pain straight pain I was excited to use the syntax that felt a little a little more fun to me because I love functional programming I love these types of patterns I love the pattern matching and all these things but there's a lot of places that this could be optimized and I had a lot of theories is this because we are calling a nearly infin number of functions this because we're doing a billion function calls that this is so slow is this slow because file.io is rough like what are the reasons that make this take so long to do I complained on Twitter because I thought this would be faster and I was honestly kind of surprised so I Ted in Louie asking why if you don't know Louie they're the creator of gleam great developer fascinating individual really really responsive and great to chat with I've talked with them a few times at this point and I thought that just posting this with a link to the gift would get this cleared up pretty quick and and I probably was skill issuing myself as you see here with gleam run this took 1571 seconds and I think they missed that because our response was I don't think we have any bindings to llang fast file streaming apis The Gleam Peeps are all doing web and not file stuff you could read the earling docs to write bindings to whatever is best but I imagine you don't want to and you're booting the entire VM and loading code you likely want to Benchmark inside programs unless what you're interested in is measuring how fast the runtime Boots the speed of the runtime booting hopefully is negligible within a 1571 second budget like if we were comparing millisecond response times yeah that should be accounted for but I am trying to figure out why this took an almost like half an hour to run when other things could do it in half of a second this is not as simple as the VM takes too long to spin up so I was actually a little frustrated with this reply this was 12 times slower than JavaScript was 115 seconds to 1,571 I thought the file package I used was specifically meant to take advantage of earling streams that blows there's a few gotas with file IO in earling like most things in earling so likely lots of room for improvement looks like it's doing file IO by bouncing the context via some earling processes which means a lot of copying super slow should be fixable thankfully Louie decided to jump in on this and they opened up an issue based on my experience slow performance iterating over a file in the file streams project hello Theo was doing some benchmarking and discovered that this library is very slow 12 times slower than node seeing as this is likely a library you want to use in performance critical part or parts of your application it' be good to optimize this looks like raw mode isn't being used it's often a good place to start perhaps it should always use raw mode rather than expecting the programmer to know about tuning file file IO performance on earling useful feedback have not done any performance testing to date that's a little scary and again part of why using new languages can be scary because even if gleam is a really fast language if there's no way to read files reasonably quickly that's a huge part of why you might want to use something like this and I was excited to potentially use this for stuff like Advent of code but if it takes this long to read a file that would legitimately impact my ability to do Advent of code if it's a long enough input in a language like this this is very much new language issues and having these types of things not as part of the language means as much longer tale as to when we'll get these things fixed hi again turns out I just wasted a bunch of time trying to move back to version 0.4.4 before reading the next paragraph which by the way somebody's writing an issue about your specific experience read the whole thing before you try to do things raw mode should likely be re-enabled for binary file streams but that wouldn't help Theo situation as he wants to read utf8 lines which as far as I can tell means using i.g line as file. readline which doesn't do utf8 which means raw mode can't be used maybe better performance could be achieved by sticking to Binary raw streams and handling text and coding concerns somewhere other than the io module initial testing results current V5 of the library takes over 15 minutes to read and count a billion lines I stopped timing at 15 minutes using raw mode and file. readline reduce this to around 9 minutes with the caveat that doesn't work correctly with arbitrary utf8 text as detailed above a simple rust implementation streaming in and Counting lines took around 53 seconds also funny the rust solution was not much faster than the JavaScript one but I digress it's on a MacBook Pro M2 with 1 tab SSD which is almost the exact same spec I'm on by the way so very comparable Al we are testing with some different read Ahad buffer sizes as well to see what impact that has but yes it's currently over an order of magnitude slower than rust excited to see what going deeper looks like I'll be sure to link this issue in the description of the video so if you want to take a look as well you feel free to somebody pointed out very fairly that gomo showed up out of nowhere and made a much faster solution they made it faster by using the earling streaming API which got roughly the same performance as node and here is the Guist with that code if you're curious about this code I'll link in the description so you can feel free to play with it notably though there's an earling file and now that I've found on my editor I've learned that there is no earling syntax highlighting by default and also prettier doesn't like earling these things aren't surprising but they are a little sad I pronounced jomo's name wrong I'm sorry guys I'm terrible at names but jaomo is the individual who did this his name thank you so much for that let's grab their alternative code here going to swap this out quick change this to measurements. text I don't want to rename the file time glean run and now we shall see how much faster this is yakomo sorry guys I naming pronunciation is hard thank you yakomo regardless oh he's on Twitch too good thank you all again okay nowhere near as bad faster than JS by quite a bit but still also quite a bit slower than go nice to see these types of wins but also kind of rough to have to go into earling for that even with syntax highlighting this is not the most readable thing for developers that were born within the last 40 years like earling was a magical language and the earling VM enabled magical things the dashes I guess case of isn't too bad but they have to know enough earling to jump in and do this and to know that like semicolons are significant and such it's it's a weird language it's a weird language and double language dipping yeah like people complain about using go on the back end and JavaScript on the front end what about gleam on the back end and earling on the back end theoretically there's a future where we'll never have to write any earling like I did Elixir for over a year in production we never had to write any any code in erlang as Elixir devs and gleam and elixir are very similar in the sense that they're both languages on top of llang in the llang OTP so makes sense I'm sure these things will improve over time but yeah I was surprised you had to hop into erlang in order to write that code properly so to speak on the bright side though this proves that recursively calling a function a billion times isn't that much overhead which when you think about it is kind of nuts the do line count function one billion times one0 00000000000000 0 times got it right the first time I'm a pro yeah Insanity though like it's crazy that any language but this is obviously an earling benefit the fact you can just call something like that infinitely and it's fine good old chat pointed out tail call optimizations for tail call recursions you don't create one billion stack frames because of tail cations yep really goes fast I know it's cheap but the fact that this works a billion times in a reasonable number of seconds is still something that I consider cool remember we're JavaScript devs here the idea of tail call optimizations is a foreign concept to us because we don't even know what tails are but yeah as people are saying in chat beam is amazing yeah the the beam virtual machine is just cracked the things it can do are unbelievable we don't write earling code but we have a syntax to use earling modules yep and this is for context Ryan Winchester is one of the like elixir Gods so this the difference between a language that's 12 years old it was originally announced back in 2009 so even older than that versus one that's like about a year old big difference here but I wanted to call that out because I was really surprised by a lot of random things as I did this things like how slow readline was how much slower things like that were in other languages rust the fact that somebody built this in Rust as they mentioned in the issue here and that even the rust solution took 52 plus seconds which again kind of highlights the point I was trying to make of the best language isn't the one that's objectively the fastest because yes rust is objectively the fastest but when you have the Right Packages the right ecosystem the right tools and you throw something like what I was showing here in just having buff iio as the way of doing IO and go means the simple stupid solution like this with no concurrency no no optimizations just doing the obvious thing of reading line by line and incrementing a counter is more than fast enough to just do it this way and go and get back to work so I actually think go is a huge winner here not because when I did it with this super performant like buffer solution that it was the fastest but because the really dumb simple version like this is super readable and more than fast enough but if you do have optimizations to make you can Go's not going to get in your way it's just going to be a really simple easy maintainable cutable copy pastable interactable solution and this was impressive to me this was the thing go has been sold on for a while let you go back to work and I likeed that a lot about it the JavaScript Solutions were fascinating and as surprised as I was that I could get even close to reasonable performance here it was a bigger surprise that it was faster than gleam and erlang I didn't try an Elixir solution I didn't run a rust solution myself but from everything I've seen not significantly better here but one last thing everybody was asking what about bun I thought bun would be a pretty quick thing to implement here but Bun's file stuff doesn't have anything to work with here I was actually quite disappointed that bun didn't have any reasonable way to read line by line apparently they had implemented read line though so I gave that a shot I just ran this with bun instead of running it with node and it ran for an hour and used all my CPU and nothing happened so I have to assume it's broken it might just take forever but at this point in time Believe It or Not bun is the slowest solution I tried so let that be as it is proposal bun bun. lines in order to solve my problem and possibly make bun one of the fastest Solutions Jared proposed he'd Implement bun. lines which would do this in the zig layer and then just give you access to it injs which theoretically should be super super fast excited for if they end up actually shipping this I'll definitely give it a shot but uh yeah very early let's summarize my thoughts and what I've learned after playing with all of these languages yes I was impressed with go yes I'm probably going to keep writing JavaScript and typescript but I'm seeing some very promising things happening over here in gleam land I like the syntax a lot I like pipes so much and I miss them dearly I like having types I didn't have any time where I wrote an error and I wasn't getting feedback about it which is something I will admit happened a decent bit in Elixir not as much as I would expect but a lot something none of that here was really nice and also I know it's like a small thing and also I'm popular so I'm going to get treated differently but having within like hours of me mentioning this having The Gleam language Creator show up and give really useful feedback having them be honest that they misassumptions but most importantly having them go open issues on the libraries that having these performance issues with and having another core team member show up make something faster and then give me a Guist with it when you make technology bets you're not just betting on the way the technology Works you're betting on the team too and if I've gotten anything from this experience is that The Gleam team is cracked they are in and they seem to be in for the Long Haul so as long as they can stay funded enough to continue this I see a very bright future for gleam but if I didn't point out the need for sponsors I would feel dishonest if you made it this far you're probably a nerd about these things and if you watch my channel in the first place there's a decent chance you make Tech money if you could consider becoming a sponsor and if you work at a company that does open source sponsorships see if you can bring this up with them because you'd be amazed how far one corporate sponsor can go for a project like this one corporate sponsor dropping 20 to 50K a year could be massive difference for a team like this it could be the difference between one of them needing to go get a job or not even your own $10 a month being thrown at a project like this can go so far so yeah hate to go and shill a whole bunch at the end but this team has impressed the hell out of me the language is super promising and if these weird standard lib cases can be handled most of my problems go away and I could actually see a bright future where I'm using gleam for a lot more stuff super promising language super promising team and I think it is a super promising future let me know what you think in the comments and until next time peace nerds




## So, Cloudflare Responded... - 20240607
last week a couple journalists and creators raised hell about cloudflare myself included I did a whole video breaking down a particularly horrifying case where Cloud flare was holding someone's infrastructure hostage without really saying why they used to pay 250 bucks a month all of a sudden they were expected to pay $125,000 UPF front to not lose all their domains terrifying stuff there's a lot of nuance here around the fact that the company happens to be a casino and Cloud flare seems to just want to not let them use their IP addresses but none of this was stated in any of the correspondence that was shared and as crazy as it sounds I almost entirely side with the casino here that said I was waiting for a response from cloud flare I went out of my way to call out as often as I could that what we really need here is to hear from the cloud flare CEO all we had at the time was an atrocious message that he had sent about his sales team as he let go a massive chunk of them we didn't have an actual response about this now we do and it's somehow even worse than I ever could have predicted so what the hell did Matthew Prince respond with here let's take a look so he was tweeting some random GIF with a rock in it I don't even know what it is I don't really care someone replied what's the matter with the unaddressed 24-hour notice on the $120,000 Bill Matt replied break the law and put our IP space at risk and we'll protect our customers by forcing you onto your using your own private IP space which costs a lot because it's bespoke we finally finally have a reason for why they were being forced into this plan I'm pulling up the original post quick because I want to highlight that in none of these things are specified resolve this situation is a matter of urgency because your cloudflare account settings are potentially affecting their Network that doesn't sound like your IP addresses are getting banned and it's hurting our Network that sounds like their settings or something they configured incorrectly or some code they wrote is the problem here incredibly unclear they get in a call and the call ends up being with the business development department but it was actually with the sales team which again to be very clear has nothing to do with the issue that the CEO is now stating and in all of these emails it was very clear that um your account's being involved in domain rotation activities that's not particularly clear they say use of cloud for services for this purp strictly prohibited we'd like to request you provide information as to what accounts and domains are being used cool again not very clear but they never once specified that they needed to do this stuff with the IP address one of the things that came up in this email after their call was that the cloudfare Enterprise plan includes the bring your own IP program where you can lease an IP address elsewhere and then use that with Cloud flare for those who somehow aren't familiar with how IP addresses work IP addresses are becoming a limited resource very quickly ipv4 has a limited number of addresses an ipv4 address is like 12701 that's an IP address how many IP addresses are there it's a more interesting question because V4 sounds like a lot that there's 4 billion possible IP addresses but a lot of those are reserved for special purposes a lot of the sections are too and we don't end up getting all of these 4.3 billion it says a lot of different things need lots of different IPS it's actually getting harder and harder to get reserved IP address blocks so these IP addresses are now kind of a resource and a lot of companies use one or two IP addresses for a ton of customers so like Cloud flare if you're using cloudflare as the thing to resolve your domain you might have the same IP address as a bunch of other cloudflare customers in order for them to have reasonable costs they can't just give everyone an IP address because there just aren't enough IP addresses for them to do that now iv6 if we actually ever get there has 340 undecillion different addresses so this problem goes away if we actually move over to IPv6 we've been saying that for a long time it hasn't happened and as such V4 has become a a resource that is guarded you can't just get allocated more IP addresses anymore you have to buy them from someone else and cloudflare understandably is scared of their IP addresses being banned in other countries If Only They had said that in any of this communication because what they said is that the Enterprise plan comes with this feature not that this is the feature you have to use or you'll get banned because you're getting IP addresses banned they never said that they never once were explicit about the IP addresses being the thing the first place that IP comes up in this in a searchable way is we don't need most of the features they mentioned I understand asking us to do bring your own IP to remove their liability from our domains but the rest is all things we don't need or are purely nice to have again they did not get told that the IP address thing is a necessary thing to stay on the service they were just told it's a feature in this plan that also includes a ton of other they don't actually want or need also this email was clearly like written on the Fly cuz they like mixed up some of the like Bolding where the Z and zero isn't bolded so somebody wrote this email they just didn't write the important part which is that they need the IP addresses if you want to see what these IP address bands do and how they affect things you don't know who Dean Herbert is he's the creator of OSU it's a game people play for doing Rhythm stuff on their computer full of weebs totally fine with me not my thing but cool it looks like Russia may have blocked the cloudflare internet including OSU it's likely not targeted at blocking OSU specifically but there's not much we can do right now so it seems like people couldn't access OSU in Russia I report it to Cloud flare in the hope of Ip rotation but that's the extent to which I can do right now so what happened here is almost certainly one IP address was being shared across many users one of those users had a service that Russia didn't like so Russia banned this IP address and when the IP address got banned anybody else with the same IP from cloudflare could no longer have their services accessed in Russia this is the problem with IP address rotation and over reuse stuff push just disappeared from the internet with no warning or grace period it turns out Cloud flare was just pull the rug and expose your server's origin IP when this happens ouch what turns out they don't like cashing non-html and are taking immediate action against it with no warning I mean I can have them cash less but I think the resultant bandwidth cost will be higher for them yeah apparently they were mad at them for cashing things that weren't HTML like video and audio files cool I might get with that too we'll have to learn in the future anyways what I'm here for is the IP address stuff never mind LOL Cloud Flair says sorry but $200 a month plan isn't enough money for it to be our issue we'll probably have to wait for this to be fixed from Russia and the Russian isps end thank you for contacting Cloud FL support we're sorry to hear that you are experiencing some difficulties here when your domain is proxy by cloudflare we assign it IP addresses from a shared pool in the cloudflare network as a result cloudflare does not offer dedicated or exclusive IP addresses unfortunately we're not able to guarantee that your assigned IP address will not be blocked by any country or ISP if you would like to get a different set of ips you can upgrade to the Enterprise plan which will help sorry for any confusion this has caused you this is funny because the solution to Cloud Flare's IP address rotation and IP is getting banded countries is to tell the people who are getting them banned that they have to bring their own IP and telling people who are having their IPs baned correctly to bring their own IP so for both sides of this problem the solution is well you should just pay a couple $1,000 a year instead that'll fix the problem and it's not like they need the other features of Enterprise like we saw that massive list if we go back in here for a second look at all of these fancy features that none of these people need none of these customers need Argo smart routing Advanced cash control zero trust access for 50 seats the creator of OSU doesn't need 50 seats it's one person this is absurdity but the fact that cloud Flare's way of handling these things is to to shrug and make it your problem sucks at the very least they explained what was going on here honestly like this is a support engineer who replied this is before sales had taken over if sales was the one to send this reply it would have been much worse it would have said you should use these three features in the Enterprise program not when your domain is proxied we assign an IP address from a shared pool sadly that means you might get banned sometimes they just yeah if this was the way that they had treated the other customer we wouldn't have a whole bunch of videos about this because it would suck but it would be as big a deal the fact that both sides are being told to pay here and on top of that the communication for one of the sides was so garbage that's the problem anyways that all aside go watch my old video if you're curious about that stuff because I want to talk about these responses cuz I hate them regardless of who's in the right why did it take a response to a tweet to address your consumers because talking about the details of a specific customer is against our policy for good reasons even when they write things that go viral about us okay then why are you doing it here this is such a weird thing to tweet Matt I actually can't believe you tweeted this CU you just did the thing you're saying isn't policy but this is the only update we got it's Insanity later on this happened where somebody asked do you not think that this could have been communicated directly like we need you to bring your own IP because laws here's the price for the service instead of this weird sales and Enterprise plan back and forth also trust and safety being cited and then not involved at all this absurdity this is the sales tactics here are so toxic it's unbelievable they treated this like a sales opportunity not like a customer having a problem in informing them of it opportunity which is just disgusting he responded here for sure what so I had to reply here confused here if you acknowledge that your sales team communicated poorly here why not make that your response you don't have to share details of a specific customer to say that your sales team could have handled the situation better just say it you don't mind throwing your sales team under the bus I've cited that enough times I've cited this so often primagen went and made a whole new video just about this Reddit post because it's so insane like what you're willing to throw your sales team under the bus you've made that abundantly clear why not do it even just a little bit here why not just point out that the sales team didn't communicate great the only good faith I could possibly read this in is by reading an even worse face saying this is sarcastic but I'd like to think the CEO of cloud flare in the middle of a pretty significant controversy isn't sarcastically replying for sure on a tweet I would really like to think that because I don't want to believe that this is ironic and I hate brigading and I know people are going to go spam their repli I would politely ask you guys to not spam his replies about this I would really hate to see a bunch of people who are following me harassing Matt on Twitter it's not going to change anything clearly it's not unlikely that my video is why this person initially replied they were pretty polite about it here and also really polite about it here so I'm not going to fault them in any way but I don't want to just Spam Matt with my audience here I want him to make a legitimate response not to do this vague posting of because we can't air out details as a reply to you airing out details it's just kind of nonsense was the company even informed about their terms of service violation theold debacles around how little to no communication Cloud flare has given other than issues affecting Network 120k upfront 24 hours yep and if this was just Cloud flare that's one thing but the fathom guy right fathom yeah Jack Ellis like Jack's had these same problems if I as I sted before Jack who's building an analytics company has also banned Cloud Flare from his his business because they've run into problems like this in the past they need to fix this because right now they have Goodwill people think oh I use cloud flaring it's great but then as more happy customers get treated like by their Enterprise sales team it'll compound negatively please fix your sales process Cloud flare who is he replying to that deleted their tweet can I even see that anymore nope yeah some oh this might have been the cloud flare employee that I cited in my original video cuz they like tried to be nice about it but like insane it's reducing platform risk at a pretty critical layer the article has good solid technical insights from that perspective talking about perspective I wonder if there's any regulatory pressure on cloud flare here yeah g Mar Ro had some comments on this drama and I think they're really interesting obligatory versel sponsors my channel and they have paid for videos at times none of this is stuff they even want me to cover like I'd be surprised if they were even cool with me making this video but I think it's important and I think Yo's insights here are very valuable and also help explain some changes that happened to forell recently free un limited any on demand infrastructure resource is the cloud equivalent of Red Lobsters endless shrimp it can only end in two ways predatory sales teams or bankruptcy it's also a grossly unscalable way to scale a large platform our most recent pricing model reflects what AWS and other customer obsessed platforms have learned accuracy and granularity of resource composition yields the right feedback loop with engineering for scale and optimization simply put unlimited free is a bad recipe for software engineering and it's bad for business and that's a huge part of why we ended up in this crazy misleading rough spot that we're in today so totally agree with this I think that it is a really good context for why verel made the changes that they've made free unlimited is a lie it's going to cost somebody someday if this was just a casino and they were explicitly clear about why they were being treated this way that's one thing but the combination of other people having these problems the CEO's weird vague responses about this the chaos that is how they were handled by the sales team the way that safety and Trust were cited as part of the process and then not involved at all and the general just terrible treatment of this company that's why this is important you can make it about the legal stuff all want you can hate casinos all you want I don't care tell your customers why they're being treated the way they're being treated I'm not even saying don't treat them like this I'm just saying tell them and that seems to be too high of a bar for cloud flare to clear but their CEO seems more than willing to vague tweet about it I don't even know if it's going to be a video but I was pissed off so I decided to film it we'll see where it ends up until next time peace nerds




## Software Development Is Changing (StackOverflow Survey Breakdown) - 20240729
the developer world is constantly changing everything's in flux the technology we use the technology we like the technology we recommend this changes constantly and one of the best ways to keep track of that change is the surveys that go out every year showcasing what things are happening in the market one of the most important of these surveys just dropped the 2024 developer survey from stack Overflow and I am so excited to look at these results this is going to be a fun one so let's dig in 65,535 developers filled out this survey let me know if you made it into the comment section before the first 65,000 people watch it because it's kind of crazy to think that on one hand yes this number is huge but on the other hand I have 300,000 subscribers it's crazy to think that as big and important as this survey and this number is it's still a subset like a tiny subset of like even my reach and I'm not big it's not like every Dev knows who I am certainly not it's like a very small percentage and of that even a smaller percentage did the survey still useful info to find Trends but we have to know going in that this isn't the average Dev that they surveyed this is a relatively tuned inev that filled this out anyways these are some fun numbers already 62.3% of the people who did the survey have used JS in the past year that's that's an insane number for technical people to be fair again it's the subset of stack Overflow users that did the survey still an insane number and 48,000 of them shared salary info that's really huge to I'm so excited to see how much money they make top 10 countries this is really interesting actually I'm going to do something I shouldn't we're going to compare this to my audience numbers interesting difference actually yeah this is very interesting specifically my Germany and India numbers are flipped actually the percentages are closer than I would have guessed I don't think they show yeah Ukraine it's weird I know Ukraine's a decent percentage of my audience I know a lot of like Ukrainian devs that are  killing it so I'm surprised it's so low here but other than that these numbers are relatively well lined up very interesting you the retention I have overall is nuts also notable is that my retention with India is lower might be a reason to either start talking slower or getting like captions made in other languages things for me to consider for sure still fascinating regardless I did not expect those numbers to be so close Community 76% of the people who did the survey have a stack Overflow account we're going to pull chat do you have a stack Overflow account yes no don't remember I'll say do yes but I never use it you can have a stack Overflow account LOL yeah this is again the point I'm trying to make here is that the bias of this survey is very notable 75% of people who did the survey have a stack Overflow account because most of people doing the survey are on stack Overflow often enough that they click the survey button that's a huge skew to note that these are stack Overflow users for a significant portion of the audience whereas compared to my audience half of them over half of them don't have a stack Overflow account admittedly just from this quick poll I'm doing in chat but that's not my most tuned in audience despite being the people who show up live to be part of these videos being filmed every Wednesday and occasionally on weekends they're not stack Overflow account holders very interesting number good to know let's start diving in further 66% of devs have a ba or BS or master's degrees despite only 49% of devs learning to code at school that's a very interesting contradiction I want more info here very very interesting very interesting 35% learned how to code in secondary school and 23% learned with a bachelor's program this is some College University study without earning a degree that's very interesting the numbers for people who learn to code in college with a degree and learn to code in college without a degree are very close this actually something I push a lot like I know a lot of people who are 5050 on going to college for software they just got out of high school they know how to code a bit they could get a job they could go to college and it was a really hard decision for them specifically cuz they're scared of committing to college for 4 years the reality is that you can go to college and if you find an opportunity that's good enough that you don't want to be in college anymore you can drop out dropping out of college because you found a good job is not a shameful thing at all so you shouldn't feel like you have to commit to the full four years if you could go get a job instead it's it's a common thing I see and you don't have to go to a super expensive college either but that period of time the two to four year window right after high school it's so useful to have other peers around you learning to code with you seeing them find opportunities as well the the potential opportunity not even just learning to code but being surrounded with other people at the same point in life is so valuable that you shouldn't just blindly give it up but if you decide to drop out it's fine at least according to these numbers it is also of note that this survey is stack Overflow users so these people might just be people who are in college right now using stack Overflow that haven't graduated yet so that's a bias to account for with these numbers oh yeah if we switch oh I didn't realize what this was I've read this wrong this is people learning to code are there but of all respondents it's only 12% and then 41% have a bachelor's degree okay that's that makes much more sense this checks out but of learning to code so people who would say that they're still learning to code most of them are in high school is what this also says very interesting stuff online resources are the top choice for people learning again with the bias of stack Overflow users but yes this is very real people like learning on online resources boot camps have dropped a ton how videos are growing still which is nuts still only half of the people learning but huge blogs and written tutorials are huge but technical docs are the top stack Overflow being so high again accounting for that bias I brought up before API docs are huge read me's yeah AI powered stuff's only 30% though good to know that hasn't fully taken over where was AI in the learning stuff here doesn't seem like it even came up oh AI is 37% of online resource Learners very interesting experience this will give us a lot of info on like the bias of the audience heavily skewed in that 5 to n year range but a decent tail up as well and it seems like the majority the vast majority have more than 5 years of experience because only 14% or so 15% is have under 5 years more experience than I would have expected for the survey but good to know years professionally so how many times you've been like been paid for writing code a bit more skewed but still about 70% over 5 years that's cool that means I'm less skeptical of these numbers overall Now by Dev type very interesting that uh Dev Advocates on average have more experience than other roles to be fair if you're a Dev Advocate doing the stack Overflow survey you're a very small subset of Dev Advocates very interesting though and types this is huge I had a feeling this was the case but it's so good seeing this in numbers full stack devs are more common than Ron and backend devs combined now that's insane this is going on Twitter that is huge I don't think you guys understand how big that is that's unbelievable there's no reason to limit your skills to just back end or front end unless you specifically really want to historically the advice has been specialize in things to maximize your salary that's finally really shifting towards be useful because that's what full stack is compared to back end or front end it's I'm not isolated to one specific part of the TX St it's where the problem is I can go I might have strengths I might have weaknesses but I can work in any place huge and I am not surprised that's starting to win out more and more and no it's not doing two jobs for the value of one I I hate this mindset so much I can't even do an analogy for this without sounding like an cuz I hate this mindset so much just cuz you're full step doesn't mean you have to work twice as much a backend Dev just has less Variety in their job a full stack Dev gets to work on a more interesting set of things and gets to experiment and play with more stuff a backend Dev might work the same amount of hours but they're just doing the same thing constantly I hate the the two jobs for the price of one mindset because that's not how this works at all okay technology most popular Technologies as mentioned before JS by a lot HTML and CSS by not that much less not that far behind does that mean everybody between these two is a node Dev is that the 10% Gap here is node where is node in this it is not in this cool also cool to see typescript relatively high up I'm sad that the gap between typescript and JavaScript is as big as it is because I know in Industry it isn't but people who are filling out the survey aren't necessarily representative of the whole industry good to know though very interesting overall seeing bash and shell slightly above Java is heartening also SQL being more popular than typescript by that much is kind of funny python just being Pi is the abbreviation it's also weirdly funny to me good why oh I was to say why is lisis a popular then I remembered Roblox is a thing so that checks out sorry to flutter devs does this mean that roblock is more popular than flutter I think that's what this means Roblox beat flutter I'll take it somebody made a good point the professional devs T tab should have a higher percentage of typescript I want to test the theory yeah we bumped to 43.4% decent bump I was expecting a higher bump still a good bump regardless now for database I did not think my sequel was going to be this High Planet scale enjoyers Rejoice because that is huge I did not think my sequel would be that close I bet if I switch to learning the gap's going to be huge what what I have not been that surprised with a number possibly ever huh that one's a surprise for me but yeah I did not expect to see postgress losing to my sequel in learning losing to sequel light in learning is this just because of Aaron's courses seriously though that's nuts professional has a bigger gap between MySQL and postgres and then learning has my SQL winning I'm going to just fix it on this if I don't scroll past it but that is so weird there's a bunch of other interesting stuff like elastic search is a very high percentage more than I would have expected redus is doing well I hope to see that change to uh anything else Firebase is pretty high up too Firebase real time and Cloud fire store really close which means people are using those together almost always big query being high up makes sense super base climbing super base being higher than snowflake is weird does that change in professional no super base and snowflake are relatively close very interesting click house is relatively low cockroach is struggling good to see though this is very interesting numbers I'm learning a lot from this let's keep scrolling Cloud platforms AWS with almost half professional I was want to say professional will be over half for sure yeah professional devs 52% are on AWS yeah over 90% of Fortune 100 companies are on AWS and most of the Fortune 500 ones are too yeah and noell does not count as AWS they're in here as well at 11% that's kind of nuts when I switch to all how much does it fall it doesn't goes from 11.9 to 11.3 that's like barely anything how are Learners doing with do good Learners aren't learning digital ocean anymore that's a relief do's largely fallen off why are they learning Heroku though why are Learners using Heroku what the we need to fix that where's Railway in here Railway needs to take that spot from them yeah azure's climbing azure's numbers have been getting better year-over-year doeses not surpris me that they're doing as well as they are but it is surprising that they're so close to AWS now also Google Cloud I I would guess the AI wave is helping them right now but Google Cloud's been on the way out for a bit Google Cloud being higher than Cloud flare is probably the biggest surp surpris for me here I would not have guessed that in the slightest anyways web Frameworks and Technologies node peaked in 2020 with its highest recorded usage score of 51% while not as popular it's still the most used web technology in the survey this year and it has increased popularity among those who are learning to code from last year not surprised here's the node number I was looking for node is more popular than react by not but not by much oh in professional environments react is the new node very interesting this is a very interesting number on one hand we need to keep accounting for the bias that this survey is people who are learning things enough to be on stack Overflow a lot on the other hand this confirms something I've been saying for a while which is that yes jQuery is still very popular jQuery is used on a shitload of websites jQuery is on more websites than react is that's a fact but the average jQuery site has one part time Dev if even the average react site has multiple devs working on it if not hundreds of them a website like twitch had hundreds of devs working on it in react an old WordPress blog that has a jQuery plugin doesn't hire people to work on it so if you're making a decision around getting a job there will definitely be more job opportunities in react but the job opportunities in jQuery might be getting filled less aggressively so you might find a way to sneak in there but the point I'm trying to make is that yes there are more sites with jQuery but that does not mean more jobs in jQuery because the number of jobs per site is not factored in when you look at these big numbers that's why I like comparing to things like Fortune 500 because AWS in this survey is only 50% when it comes to Fortune 100 companies it's 90% in those companies the 100 most valuable companies in the world they have a lot of Engineers next is climbing fast though see next up there for professional is insane it's also really high up for General how's learning to code next just holds strong in all of those next is beating Express out too which is kind of nuts if you think about it and also angular the fact that next a meta framework around react is more popular than angular than Vue than flask than jeno also flask and Jango being so close is weird for those python people I was under the impression that Jango had won I liked flask more though so seeing this is exciting yeah these are so close even in professional I did not think that those two numbers would be that close to each other and yes fair point I hope there aren't new Greenfield projects using Express please use one of the Alternatives Express is largely in like maintenance mode to be generous now I really like fastify fastify is by a lot of the original maintainers of Express very similar really fast really cool easy recommendation you got plenty of options now please please avoid Express also net being this high is funny Express is in maintenance mode that's why it's not really being updated it's slow low and the original team doesn't work on it anymore embedded Technologies Raspberry Pi 40% oh this question only had 27 people or 27k people respond to it so only 40% of the survey takers bothered with this question but of them 38% had played with a Raspberry Pi 30% had played with an Arduino similar per have done GCC and cmake interesting check professional devs for this one barely moves cmate goes up slightly but that's about it for the change here very interesting other Frameworks and libraries Net's the most used not surprising flutter I guess flutter is a library flutter is beating react native here but for professional huh yeah flutters beating react native for professional devs interesting good to know crazy because I still don't use any flutter apps and I use a lot of react native apps so the ratio there is insane to me good to know 50% of respondents use docker similarly close use npm smaller but meaningful use pip Homebrew being this high is insane cuz that's just Mac users are using Homebrew to be fair that's 100% of Mac users are probably on home brew but to have a 22% number in here on a thing that's OS specific is kind of crazy and when a professional it goes up to 24% learning to code home brew drops to 11% makes sense makes a lot of sense V being in this this other tools category is strange the fact that V and Homebrew are in the same category in and of itself is so strange I'm not going to read too much into this number for that reason bun being at 4% also suggests this is not super super real why is no oh did I make no jipa band term at some point that wouldn't surprise me I hate no jips so much vs code one for the actual IDE not a surprise professional it goes up more learning it goes up even more other it probably plummets yeah that sense visual Studios at 30% intellig is at 27% notepad Plus+ probably it goes up for professional what what are you guys doing in Jupiter notebook goes down for professional huh Sublime Text holding on please tell me that Adam isn't in here Adam is not in here that's a relief Zed isn't in here either though and that's a little sad I would have expected neovim to be higher than like pie charm and Jupiter notebook cuz pie charm's only for python as jup notebook largely is as well and then neovim is for everything which means it's for rust but yeah interesting is cursor in here curse did not make it in very interesting async tools this is for actually working with your team very interesting jir still wins notion is doing better than GitHub discussions that feels weird to me also notion being that much higher than linear hurts me as a big notion fan I manage my whole Channel Through notion linear for devs is a much better tool Notions great for weird things like my content management linear is good for devs and like I'm not even super fond of the linear team the founders and I have some beef but linear is a great product it's painful seeing them this low does it bump up for professional a little bit but notion stays like the same place for that that's weird I have feelings I have a lot of feelings about that learning to Cod notion is going to go way too high yeah 22% and jira disappears it drops to 14 for learning jir is probably a blocked term in chat that would not surprise me if I did that sorry if so I hate jir so much just please use anything on here other than jir and arguably Confluence please use anything else synchronous tools this is for chat and teams why is teams so high I I have never had to install teams I've never worked at a company that uses teams I have managed to dodge teams for my whole career and every year the number gets bigger and every year it hurts me a little more deeply in professional it's going to be even higher yep learning hopefully lower yeah it drops a ton there but it's so oh I hate teams I am sad to see it's continuing to grow that way slack obviously killing it even after the Salesforce acquisition better product but as is slack better enough to justify paying for it if you're getting teams for free as part of something else Discord is really high for professional that's interesting for professional devs Discord is close to slack this is a very interesting number because Discord gaming there was an announcement the Discord did recently discord's next chapter here it is where they dropped a crazy number in here over 90% of Discord users played a game in the last month 200 million Discord users every month 90% have played a game so that's pretty crazy when you think about the fact that 33% of the 43,000 people who answered this use Discord and 90% of them total play games what I'm saying is that we're Gamers here we're all video game players but it's just crazy to see ratio wise like we would think slack would win by a lot in the dev space and since slack makes so much money and a lot of it's from devs that if Discord could charge devs for this market share they'd make a lot of money too but they recently announced their FOC all in on gaming and not on things like competing with slack because so many of their users are Gamers operating system Windows is the most popular OS for devs across both professional and personal use goes down a bunch for pro but it's still the most weird to see Mac perfectly even there did they scrip something with this cuz Ubuntu being perfectly even and Mac being perfectly even for that feels very wrong to me Android personal versus Pro very interesting split I I have so many stories about Android and professional environments that I'm not going to waste my time telling here but but no there are some crazy ones I was at Amazon when stage fright happened WSL very similar split there iOS also weird split here very interesting people don't use their phones for their jobs if they're devs to be fair you're not coding on your phone a whole lot still the using Haiku and Solaris in 2024 AI search in Dev tools oh boy what percentage answered this okay 70% answered this in 80 % of them have used chat GPT insane the number of devs who have at least tried chat GPT is crazy and the fact that it's double co-pilot users is just as crazy these are numbers I I would not have guessed that high a percentage of TR chat GPT for code and I would not have guessed the gap between these is as big and then for these it doesn't change a whole lot wait Gemini skyrockets for learning that's actually interesting it seems like Google's BET right now isn't on established devs it's everyone else really fascinating see codium is doing really well too good for them surprised cursor didn't sneak in here admired and desired oh this is the fun one this is where it splits Things based on how much they're used and how much they're liked python is desired so people actually like it 41% of the time but it's being used 67% so here's what the desired admired actually means most desired means that users aren't using it right now but they want to next year admiration is they're using it and they want to use it again so if you're using if you checked I use rust and you checked I want to use rust next year that's admired desired is I'm not using it right now but I want to next year thank you stack Overflow for explaining the stack Overflow survey that they did not choose to explain so yeah what this says is 41% of the people who answered this question aren't using python but want to 67% are using it and plan to continue so rust 80% of the people who are using rust right now plan to use it next year makes a lot of sense but more importantly for us here Elixir although not many people are considering it that aren't using it already vast majority who are on it are going to continue once your Elixir pill that's hard to go back it's weird to think I am in the 24% I don't expect to write a lot of Elixir just doesn't make sense for the stuff I'm doing but I miss it dearly I love that language but it's it's crazy how much further along Elixir zigg and rust are than almost anything else like they're all in the like mid to high 70s or even 80s and everything else is lucky to hit the 60s very interesting we're going to not talk about prologue databases this will be interesting too people who are using postest plan to continue people who are using my SQL don't plan to continue that's a scary number 50% for that's a little scary sqlite more reasonable numbers I want to see the worst what are Microsoft Access there we go nobody wants to move to it and three4 of the people using it don't want to stay on it hilarious love it what other numbers are really low IBM db2 people don't want to be on db2 anymore Cassandra also makes sense hilarious though Cloud platforms this is going to be an interesting one hetner people really like staying on hetner to be fair yeah once you move to hner you're moving there because of price and nothing else is going to be cheaper so if you've decided I want the cheapest solution you're not going to move off hetner Heroku is though look at how low heroku's like retention is here nobody wants to stay on Heroku anymore versus fly which is one of the highest let me know if I should explore fly more in the comments I've been planning on giving a more Deep dive on what fly is doing I need a better place to host images the rare time serverless doesn't work for me and fly seems to be like a really good option yeah AWS killing it the few people who don't use it already half of them are considering it that's insane the 50% of people who aren't using AWS yet plan to next year netfi is hurting a bit versel not hurting as much versel retention is similar to aws's obviously their intention the people wanting to try it is a good bit lower because the percentage of developers that benefit from something like forell is smaller than those who benefit from AWS but it's still a really high happiness overall don't listen to the Twitter fud people are liking what they're doing at least more so than Google Cloud good stuff very useful information to have here web Frameworks and Technologies look at the gap for reacted node to everything else that's kind of crazy 33% of the people who aren't using react yet plan to next year that's crazy people like even the ones who don't want to learn react are slowly accepting they probably should but we're retaining a pretty high perc people who want to keep using it this all checks out these are good numbers spelt has super high retention though people who use spelt no they don't want to stop using it they don't want to stop talking about it but HTM X also has one of the is that the highest number here no Phoenix again The Elixir guys Phoenix is the equivalent of rails for Elixir they have the highest number here but it's pretty crazy that HTM X spelt asp.net and Phoenix are the the clear winners here oh and Astro is doing really well too good for asro but it's just crazy to think how much higher they are for most other things because that Community is so enthusiastic about the thing I just dislike the net number though that hurts me not a big net fan no shade no shame just not a thing I would ever want to touch and yeah spring boot did fine too I know I I I am friends with one of the Big Spring Boot influencers and he really wants to have a video with me let me know in the comments if it's time to do a Java video I don't want to but I will if I must embedded Technologies this one I don't have as much to say on but it seems like people like the Raspberry Pi a lot cargo weird that's here but yeah if you're using packages and rust you're going to keep using packages and rust if this number was low that would be concern concerning other Frameworks and Libs ooh this will be a very interesting one net being this high is weird tensor flow being high makes sense people want to move off it which is interesting hugging face oh hugging face is dope that checks out and Swift UI people are really starting to like what the is Ruff a python linter written in Rust that's hilarious rust isn't just fixing JavaScript problems anymore now rust is fixing python ones too directex o what a list open CV QD electron Cuda and rabbit mq all in the same category is kind of weird you're right there Ross other tools we got Docker really high up people don't plan on moving off npm people are considering moving off probably they're going to go to like bun or yarn or pnpm or something makes sense pip being this low is interesting because there isn't an alternative to pip really kues being high is painful but makes sense Homebrew being high is again there isn't really another option makes sense bun has really high retention people are loving bun unreal engines lower retention than I would have expected I like to see a Game Dev survey that's like specific to game devs because there's some interesting stuff there for sure vs code most people who aren't using it planed to and everybody using it plans to stay there neovim is the only thing with higher retention because it's neovim people never will move off I know a lot of people that are going to stop programming before they give up neovim asynchronous tools yeah nobody likes jira nobody likes Confluence most people deal with markdown we've all put something in a markdown file that probably didn't belong no I would have expected lower satisfaction for this use case but it's good to see they're not dying obsidian people are obsidian people they'll never move off Trello lower here than I would have expected but good because Trello is definitely slowly dying linear as I said it's really good people don't want to move off it but markdown files being the clear winner here is kind of funny Discord having higher satisfaction than slack is kind of funny too look at poor teams dying here Google meet doing decently well is this is that going to be the lowest no Skype yeah Skype and Cisco WebEx teams are the only things here with lower satisfaction than teams there's a couple others in here but not many that's hilarious AI search everybody's going to keep using chat GPT everybody's going to keep using co-pilot surprising number sticking with Gemini vs code and Tel code pretty popular too yeah nothing too interesting here perplexity is doing really well I should give perplexity a shot I've been meaning to I heard I would really like it I actually like the search AI generation thing on Google when you search something and they generate a response I know everybody talks I found it to be pretty helpful so maybe perplexities for me to be determined worked with versus want to work with this will be very similar oh this is oh this is cool people work with a thing what else do they want to work with typescript devs want to work with SQL they want to work with rust they want to work with JS they want to work with HTML CSS this one's like the hardest to go through but it's very interesting to see what are just like the biggest ones Python and HTML have a lot of overlap not too surprising but interesting it's not all just ml people HTML and SQL have a lot of overlap makes sense HTML SQL basically the same thing right right checks out why learn both when you could just learn one yeah jsd is also HTML that makes sense bottom yellow is Javascript Java devs look like they're willing to learn anything by the looks of that and rust devs notee how small the rust section is here that's because it's so few revs the only thing like I can hover here is rust devs want to work on python very interesting this is a cool chart definitely check out the survey Link in the description if you want to take a deeper look at this chart but I could sit there forever databases I want to know where the people are going mongod devs want to go to postgress they want to go to my squl devs want to go to mongod devs redus mongod devs or sqlite to that hurts me that hurts MySQL wants to go to postgress any postgress why you go to mySQL no postgress does want to go to redus sqlite does want to go to postgress very interesting Cloud platforms where are the versel people going everywhere AWS Cloud flare digital ocean who the  wants to go from versel to digital ocean I would love to chat DM me I have questions Firebase users want to go to versell that checks out Google Cloud people want to go to versel checks out Azure wants to go to versell netfi wants to go to versel versel wants to go to superbase okay if you're using verell storage products I can see that also disclosure I am sponsored by versell I'm also sponsored by some database companies that make my SQL stuff also an investor in Microsoft I'm an investor in Google and basically every company here I have some bias with none of them paid me or have any say in what I talk about in this video this is not paid or syndicated content but I do have biases with literally almost every company listed here in some form so yeah make fun of me in the comments for it like you always love to oh not digital ocean I have literally no Financial tie whatsoever to digital ocean so when I tell you they suck there's no bias but also I'm a big Google investor and I'll will tell you the Firebase sucks too web Frameworks and Tech the top framework node users want to use next year as react well not many react users want to use node but would like to use next this shows you how nonsensical this chart kind of is here because all next devs are using node all react devs are using node we're all using node just get over it but I want to see yeah node is huge here a lot of node Dev want to work with react node Des want to move to Spring boot that hurts node devs going to Nest hurts node devs want to work with next that makes sense react devs want to work with next makes sense interesting stuff definitely check out this these diagrams if you want to dig into it more yourself edch I have nothing to say other Frameworks I nothing to say other tools where are the npm people going to yarn to webpack to V to terraform to pip nougat kubernetes Homebrew yeah let's replace npm with Homebrew I'm sure that'll go great integrated development environment also interesting VSS code people just want to stay with it but those who don't they want to go to visual Visual Studio people want to go to vs code vs code people want to go to Vim py charm people want vs code noad plus plus people want vs code VSS code people want neovim very occasionally juper notebook people want vs code intelligent people want VSS code and Android Studio people obviously want VSS code look at the size of that like half of the Android Studio people wish they could just be using vs code more Android Studio devs want to use VSS code than want to use Android Studio that is hilarious also all of xcode devs here it doesn't even show xcode devs that want to stick with xcode literally all of them want vs code that is hilarious this should say a lot about the state of mobile I legitimately think the biggest thing holding back mobile Dev right now is that you basically have to use Android Studio or xcode to use the native Technologies to build native apps like unironically the best thing for something like react native or flutter is VSS code because with react native you don't need to open xcode that's a huge win yeah I hate this I I I I I don't hate I I love that this can benefit the ecosystem but I hate that xcode is so bad that all of them want to move to VSS code chat asked why doesn't somebody make a vs code extension they have they've made a ton of them the reality is that the things that Android studio and xcode do are deep enough and complex enough that you can't just make an extension for it the types of compilation Integrations and build steps and all of the things for xcode is just insane it's actually insane like xcode isn't a thing you can replace with a plugin yeah if xcode was good they could use it as a pitch to get Max I have a couple thoughts here that might turn into a rabbit hole I'll do my best to be brief xcode used to be one of the best reasons to use a ma back when it was more people were writing C and C++ xcode is one of the better ways to debug it in like C memory allocation and which was really cool at the time now there's many better tools and xcode's slowly falling apart on the other side Apple doesn't care that much about Mac sales they're a very small percentage of their business the only reason Apple's investing so heavily in Mac is a combination of how Mac's being good helps their brand and the fact that to make good software for iPhones and iPads and Vision Pro and all these other things you need a Mac so all the Macs are garbage no devs are buying them now no devs are making things for iPhones and iPads if Macs are really good more devs will have them more good software will exist for iPhone and iPad but there's a point of diminishing returns that they're I would argue long since past there but like Macs are not a big part of Apple's Financial profile right now selling more doesn't help them a ton but they have to be good for apps to be good so making a good Mac results in devs that buy that Mac being able to make better things they have a better time with the computer better everything and if they really want iPhones to stay competitive xcode has to get good or honestly what needs to happen is Android Studio needs to start getting good so Apple has to fix xcode also obvious disclosure I'm an investor in both Apple and Google and I have issues with both asynchronous tools where are the Trello people going probably notion is my guess no GitHub small number going to nocean interesting more of them want to go to obsidian the notion very interesting obsidian people aren't moving notion people where are they going markdown files linear jira sorry jira going to notion that makes more sense say no people moving to jir would make me very upset synchronous tools Discord people are probably sticking with Discord WhatsApp people want to go to Discord Zoom people want to go to Discord everyone wants to go to Discord other than Discord users wanting to go to Slack that's really funny AI tools chat GPT everybody's sticking with it J people want to use co-pilot a lot of you want to try Gemini good to see oh boy here's where things get fun top paying let's see who's making the most money oh boy I need to talk about Elixir more clearly we're the rich people pretty nuts that the only thing in here that has a six-digit number is earling which is the language Elixir is based on and that Elixir is that close how far do I have just scroll to see JavaScript ow typescript you typescript devs making way too little money yeah if only you learned earling you can make much more okay there to be clear there's a lot of different biases here the reality is that companies that use earling and elixir aren't hiring particularly aggressively and the people who are using earling and elixir have insane amounts of experience if this was to be average years of experience erlang and elixir would be near the top as well because the people using these things have been programming for a long time same with closure in Nim these aren't things that like you can go learn and make this number these are things that people have been doing for a long time as Ross is pointing out there aren't Junior roles available for a lot of these Technologies because the people working on these things are on longstanding teams that have a lot of senior plus devs whereas typescript and obviously JavaScript those have more opportunities for juniors to get jobs which also means more beginner devs that have less time in the industry are the ones with these rolls so it drives the average down a ton also if you want to make more money as a JS Dev you can make two grand a year more just learning in typescript look at that it's that easy want to add two grand a year to your salary just start adding colons to your code base that easy changes in salary interesting Nim had the biggest jump erlang is still slowly climbing Elixir went down very slightly how are JavaScript types we're doing this is going to hurt isn't it JavaScript dropped a ton there's that Z Z interest rate phenomena right there that's where it's hurting what's really happening is Junior devs are getting smaller offers and struggling to find work but crazy to see that where's typescript here it is typescript dropped over 10 grand year-over-year that's actually kind of terrifying cobal dropped two how much did it drop much less but yeah good to know yeah uh scary I do really think this is cuz new devs are getting worse offers like I knew people who were fresh out of college getting 125k plus offers at twitch that's not happening anymore they're not giving jobs to new devs and even if they are they're not numbers that big so that's a huge change and I think that change is what we're seeing here more than anything but it's hard to know without deeper access to these numbers and like if I could do this against years of experience I think it would be much more interesting AI in this section we gain insights on AI I'm going to blast through this one cuz I have a feeling I'm not going to care too too much do you use AI Tools in your Dev process uh 76% of all respondents are planning to use AI Tools in their process is an increase from last year which was 70% 6% already are AI tool sentiment largely positive more so than I would have thought especially when I see the numbers I see in like the art world where people  hate AI it's cool to see a decent split here professional Dev 2 let's yeah compare professional for yes professional has a bump in yes yes and down moves down and no I don't plan to very interesting benefits of AI tools increase productivity speed up learning greater efficiency improv accuracy is low I bet that's going to go down even more in professional yep yep AI does not improve the accuracy of my code for  makes me faster but it doesn't make it like more accurate it does not help me with my workload and it does not improve collab yeah yeah wonder do they have a question like does it hurt your bug or does it increase the number of bugs you have also an interesting split here with trust versus not trusting less than half of dev's trust AI output less than half trust it 26% are neutral and then a bit over 30% don't trust it and in Pros it leans more towards distrust and less towards trust in learning blindly is going to trust yeah that all checks out to me Pros are at 2.3 learning to codes 4.2 that's a 2X difference there don't trust AI so much you dev's learning seriously the tools are great you should not highly trust their outputs o the ability for AI tools to handle complex tasks is going to be a fun one too I don't think it can for I think it's good for auto comp completing things but not too much beyond that looks like people largely agree 3% saying very well PR is going to drop not as much as I would have hoped this is disheartening I would have said neutral to bad personally but uh people aren't working on complex enough stuff I suppose AI in the the workflow they use it for writing code searching for answers debugging documenting is interesting seeing that high a percentage for documentation I honestly not interested you aren't interested in AI for deployments and monitoring predictive analysis project planning committing and reviewing code please don't have ai Auto commit and review code all the products and examples I've seen for this are so bad they're so bad AI tools next year writing code most people plan to testings still pretty positive deploying and monitoring much less so interesting though a lot of people saying that they're going to integrate more committing and reviewing code via AI next year this looks like over half of people are going to use AI for code review by next year that's terrifying I hate that okay only half the survey respondents answered this one this is in the AI section so half the people churned and went to the next section by this point that makes me feel a little better are AI tools a threat to your job learning is going to be really high on yes here yeah 15% say yes Pros only 12% say yes checks out most important ethical issues for AI 80% think circulating misinfo is a big deal missing or incorrect attribution for sources of data also really important biased results is not as big a deal but useful imitating likeness not concerned really about energy demand will continue going down but it's definitely a concern and replacing jobs is the bottom here as it should be challenges with AI at work top one is that people don't trust the output or answers AI tools lack the context of the code base internal architecture and whatnot these being the top by that much Mak sense we don't have the right policies is only 30% I'd be curious to see what that looked like last year but that's not too bad I would have expected more companies to be blocked by that if I switch to Pros barely moves very interesting lack of proper training is here for Education that bumps a bunch but not that big overall very interesting Nico the only people who are going to lose their Dev jobs because of AI are people who think this way because they're not good enough devs to think for themselves AI at work in one year this is an open answer so that's going to be useless let's move to work oh here's where we're going to talk about salaries overall 70% of the survey people were are employed full-time 80% of the pros are employed full-time 20% are contractors good to know so 80% full-time 20% is contractors 6% part-time a handful of students other things that don't matter as much employment status by geography us largely full-time Germany goes down full-time a bit indiaia drops even further UK bumps back up to similar UK has more full-time devs than us percentage wise very interesting work environment the number of hybrid devs has stayed consistent this year with last year 42% while the percentage of devs working in person has increased so there still same number of hybrid but in person is going back up you it's 15% in 2022 and 16 in 2023 so that's the biggest jump yet a 4% bump after a 1% bump is nuts seems like in person's really happening again company info this is one of my favorites how big are the companies these people are filling out for cuz while there are way fewer companies with 10,000 people you need a lot of nine person companies to have the same number of people as a 10,000 person company you need for there to be more people at a two person company than 10,000 person company you would need 50002 person companies so remember that when you look at this there's a reason these big ones scale up despite having so few companies because that company has 10,000 or more employees but this is a pretty interesting spread it's interesting seeing hot spots in like the 20 to 500 range seems like a really hot spot under 20 is relatively small compared to that over 20 to 500 is more than 2x bigger than smaller than 20 kind of nuts 500 to 1,000 is relatively uncommon a th000 plus is relatively common good info you have 47% of people work at a place with less than 100 employees yeah that's pretty nuts there's a lot of these smaller teams that aren't like so many of those like consulting firms like banks that have 30 to 100 employees like things where there just aren't as many Engineers or employees as a whole salary by developer type Dev Advocates making this much is sus I want to know how many people actually answer Dev Advocate because they should not be making more than other devs to be fair the dev advocate cut really happened last year so if you still have a Dev Advocate job it's CU you're one of the better ones but that's just crazy to see that that Dev Advocates are making twice as much as backend Engineers on average where's fullstack in here we have backend F Stack's just slightly below back end and it's quite a bit above front end see if you're a react Dev all you have to do is learn next and you can 1.5x your salary easy right not that easy but good to know blockchain devs making way too much money yeah mobile is suspiciously low I think the mobile I think mobile being low is largely like a geographical thing because there are so many more Mobile devs in developing nations right now because mobile is the only way people in those Nations access the internet not on computers and because of that there's a significant percentage of mobile devs that work in places with lower salaries like I bet if I switch to US Mobile is going to jump a ton yeah Mobile's now number three when I switch to us pread no just I get the market see I do know things crazy yeah mobile goes way higher for us but if I drop it to India it's going to Plum it huh it didn't oh cuz these are the only rols people filled out for that but now mobile is higher than front end still but it's a lot closer and it's killing full stack very interesting but yeah mobile is significantly higher up here where it's 185k and it's top three it's almost bottom three here yeah it's bottom 10 or yeah bottom six here for Global but in the US it's number three so yeah we think of mobile devs as some of the most important devs in the US but across the world mobile is a much wider bucket also why flutter is so popular by the way the average for full stack in the US that's a good question yeah full Stack's 130k in US front end is 135k so I guess if you're in the US learning full stack is going to cost you five grand a year and then back end up to 170k very interesting numbers academic researchers getting yeah very interesting stuff salary and experience by Dev type yeah remember the thing I said with experience the number of years I called this so hard I said multiple times throughout this that the dev Advocates that are still employed have been doing this for so long and I was right look at that called that so hard yeah the things to be sus of here are things that are far to the right but not very high up the things to be excited about are things that are really high up despite being not that far to the right a Dev Advocate because people are asking a Dev Advocate is a person who advocates for developers at a company it's their job to talk to developers outside of the company about why they should use the thing the company built so I'm a Dev Advocate arguably salary and experience by language again we can test my theory with erlang yeah see erlang is pretty far experience-wise compared to a lot of other languages yeah the the average years it goes from 8 to 20 so the erlang devs are averaging like 12 plus years of experience as are the Elixir devs whereas the JS devs are going to be hard to find in this mess yeah JS devs are averaging significantly fewer years check out I would have expected a bigger Gap here and I think these like Pearl and Cobalt and dely all being ancient is hurting the the skew here but I almost want to say like cut the line at 15 and ignore all of those and it makes a lot more sense why Elixir and llang are where they are purchasing technology this is actually really useful for me most devs don't have the ability to convince their managers to let them adopt a new solution that cost money at their job but I want to know the ratio here interesting the majority have some or great influence huh by Dev type FAL stack better be high up in here F stack Dev should have a lot of say where the is f stack in here huh less of the great deal a lot more of the sum 26% no frontend devs though actually have a good bit of Buy in here you 133% have wait no I was reading this wrong it's blue is no okay so 44% no for front end versus full stack full Stack's 33% now okay that checks out a bit more so if you're yeah if you're a full stack Dev you have decent opportunity to get people to adopt Solutions at your job compared to a lot of the other roles but it's not as big of a gap between those I expected mobile gets mobile devs have no say desktop software developers have no say at all this is also an important chart to think about how do you build a product in a given Marketplace so if I'm trying to make a product that I want Microsoft to adopt I would not want to make desktop software Solutions because even if I got people excited about them the likelihood that they can get their boss to approve it is really low whereas if I was to focus more on front end tools or full stack tools it was more likely I get them into the workplace that said the spread here isn't anywhere near as bad as I would have expected obviously students can't get things adopted so less less and sightful than I would have expected prefer to build versus buy 60% build and buy 20% build 19 buy this is too vague a question to get a real answer I'm sure backed devs are going to hate buying though let's prove that quick fullstack devs are largely both small and buy frontend devs are even more so both where is back end in here did I scroll past it Advocates are the most down to buy doesn't surprise me middle they're in the middle uh back end yeah cool back end is only 18% build one of the smallest numbers for that Mobile's one of the few that's actually smaller for build I did not think backend would be so low on build interesting very interesting that backend devs are more willing to buy  nowadays good to know very useful information and database admins love building their own as do research and development roles and Hardware Engineers that all makes sense how about new tools and Technologies starting a free trial is the most common way to evaluate new tools doesn't surprise me free trial also I'm sure counts free tier ask devs that you know and work with again very useful to have devs like and talk about you visit Dev communities like stack Overflow again I wonder if there's some bias there read ratings or reviews on third party sites there's a reason that's this is where things drop to much lower numbers who the reading reviews and ratings of nextjs versus next tech endorsement Factor apis are cool but did you know 75% of devs are more likely to endorse your technology if you provide access to apis yeah not surprised duh coding outside of work most devs code outside of work is a hobby and almost 40% code outside of work for professional development or self-paced learning from online courses hobby Pro tribute to open source yeah most of again this is stack over people who are choosing to do a survey that's this long these are going to be enthusiasts so I don't think that high a percentage of devs are actually doing hot like code on the side but if people who would also fill out a survey like this for free checks out Community this will be a fun one surprise the stack Overflow survey is a lot of people who use stack Overflow what a surprise there frequency again this is biased because it's people who go to stack Overflow enough to find the survey and do it crazy the account oh we never looked at the final poll results for do you have an account yeah no most people don't at least in my community which I think is going to be a little more representative about stack overflows numbers than this is frequency of participation monthly is but the fact that almost 20% are a few times per month or more nobody actually participates in stack Overflow I I would be surprised if you know what we'll do one more poll have you ever responded or asked a question on stack Overflow yes maybe under five times no I'm expecting less than 10% to be yes less than 20 to be yes plus less than five times more yeses than I would have thought maybe I need to recount for my bias here most people saying they were top 1 and 3% very interesting how you choose to use stack Overflow find Solutions reliable yeah this all makes sense is this all just about stack Overflow I don't care anymore professional developers 29% contributed to the professional survey portion 86% of the ones who did are ic's 133% are managers here's professional work interesting skew majority are under 10 years but more 5 to 10 than 1 to four and I see that's going to skew earlier and PE manager is going to skew later that's really interesting you can actually see here the whole like to keep getting promotions a Dev you have to become a manager watch the shift here right now we're 1 to four and 5 to n heavy it just shifts down 5 years when we hit people manager that's kind of nuts that's how much the whole become a manager to keep making money thing is real you see it right there fascinating ability to find knowledge and information within their organizations waiting on answers disrupts their workflow majority agree knowledge stos keep me from getting info largely agree I know which resources have the answers to my questions strongly agree sorry for those AI companies that are claiming they can find all your for you I'm able to quickly find answers to my questions with existing tools and resources generally pretty high this actually really useful for all those AI tools that are planning to magically answer all your questions for you I just talking to a Founder that's confident that like the biggest thing they could be working on is tools to help onboard your Junior engine because some manager told them that the biggest hurdle the thing that they hate the most is their senior devs wasting time mentoring Junior Engineers so they're going to build AI tools to do it for you good luck frequency of productivity friction this is very interesting this is green is 10 times a week blue is never so how often do you feel like you're blocked with by somebody outside of your immediate team 60% Say Never which is crazy I was blocked people outside of my team weekly for sure although I will say going from never to one or two times a week this should have been like a few times a year then weekly then multiple times a week but yeah interesting not great spread here yeah don't love that daily time spent searching for answers IC versus manager is going to be really interesting here no it's not never mind daily time's been answering questions IC is going to be lower and PE manager is going to be higher yep yep everybody should spend at least 30 minutes a day answering questions to their co-workers it just saves so much time every individual should be I actually do remember one of my managers being mad at me because I was in more meetings than them because I was helping with so much at the company even though I wasn't a manager but yeah everyone should be helping people a decent bit how much depends on a lot everybody uses CI most people use devops functions automated testing microservices is only half why would he be mad at me for having more meetings lot of things I'm going to bank on insecurity but yeah it's funny cuz I was also the most productive engineer on the team they were trying to be like you're not doing enough code I like okay here's the Gant chart I did more last week than the rest of the team and there was five other people on the team so how about you don't get mad at me for what my calendar looks like and you tell me what I'm not doing that I need to do I don't want to wrap into that drama I talked about a bunch of some friends earlier so I a little heated on it so I'll avoid the topic knowledge sharing Community 40% observability tools also similar none of the above 10% hm interesting that we all rely on CI but most people don't have a Dev portal Cloud on on Prem environments hybrid 46% Cloud only 40% and on- Prem is 14 I would not have expected so much on Prem including hybrid on Prem like who the running their own cloud that's an insane number we're absolutely Cloud only and I don't talk to very many companies that aren't Cloud only even twitch is pretty much Cloud only resources for technical questions at work traditional search engines are over half cooworker 20% AI powered search is half as much as a coworker almost that hurts me AI powered search again oh free versus paid people are very willing to pay for AI search don't like that amount of tech debt 60% is the biggest issue people have checks out just remove the JavaScript there H the tech debt goes away your complexity of the tech stack for back end is 32% complex ability of stack for deployment similar percentage why AB ility of the tools is similar tracking work tracking your work's actually obnoxious and I've worked on and hired people to work on so many different types of jobs it's amazing how hard it is to track how much time you're spending on things in a way that doesn't suck that's a super untapped Market job industry and satisfaction software Dev 41.3% of what these people are in industry-wise interesting does that mean that they're making tools for devs but yeah then it's fintech checks out internet Telecom and Information Services is high up banking also fintech arguably very close interesting spread see not everybody works at a ma or at a Fang company or Facebook there's no social media here at all sorry media and advertising Services okay fine they're in here but not very high up oh God Theo just do what my work did an app that has your camera on and a timer so you know exactly how much you're working that doesn't sound terrible and dystopian in any way this is also interesting so many more people are unhappy than happy at their workplace most are complacent almost a majority are complacent I have people managers are going to be happier overall yep look at that jump much more happy much fewer unhappy and ic's much more likely to be unhappy good to know factors that most contribute to job satisfaction all of these are even numbers so they barely matter improving the developer tools makes devs happy I've talked about this the best reason to switch technology at your company isn't because the new technology will make you way faster or make your product way better it's often just because developers like trying the new thing and will feel really good and energized and if you want more devs to be happy with their jobs letting them do some rewrites that might not be the best thing for the business might longterm be the best thing for attention learning and using new tech pretty high up building environments and architecture high up driving strategy for my team again letting devs feel like they have a say in the process is really helpful too letting devs feel like they're helping Drive the team is three times more important than buying them a nice MacBook and letting them contribute to open source that's very interesting more devs care about having say about the strategy for their team than about open source fascinating but it makes sense is that the end methodology the last thing was this too long let me know in the comments because this was quite a  video to record I think that's everything yeah learned a lot about the state of Dev let let me know what you guys think in the comments and until next time hopefully there won't be a really long survey I have to go through God that was a long one until next time peace nerds




## Solid.js Just Got WAY Better - 20231226
solid is starting to get more interesting than ever the new solid start beta is super promising if you're not already familiar solid is a react alternative focused on signals that is really really performant react alternative might be a controversial way to describe a framework but solid is by far the most I felt like my mental model from react could carry over I have found solid to be a really pleasant experience with its own set of mind-blowing ways to write things that are really cool overall solid start is more like nextjs where it's a full stack solution for building solid JS applications where the back end the bundling and all of the things around it are being managed for you it seems like we have more and more of these full stack Frameworks every day but I want to be very clear that solid start was early it's not like as early as remix but it was earlier than a lot of the stuff that we talk about now and it's also evolved a ton over time initially solid start was built around vit with its own handling of the server side stuff because at the time V didn't really have a happy path for servers V was focused on building client bundles while this was going on there was two other groups really invested in better full stack and server side experiences in vit those two groups were Astro and N both building backend First full stack Solutions on top of vit over time a lot of us started to centralize on Astro as like a happy path starting point and we started to see work both in solid start and outside of it to try and make Frameworks built around Astro as the Primitive the effort that was put into these Frameworks around Astro was huge and both helped Astro and the V Community grow immensely but it didn't help solid start much it ended up spending a good bit of time both soul searching and trying to figure out how to make a better more maintainable experience over time thankfully a huge development has happened over the last year that development is Nitro a project built around vit to power both n and other Frameworks trying to do full stack within vit think of it as the starting point if you wanted to build your own nextjs or in this case solid start and not only did solid Embrace this they actually rebuilt the majority of the framework from beta 1 to Beta 2 which is why this is such an interesting release so without further Ado let's dig in to what Ryan and team changed with the newest version of solid start this is a message from Ryan the creator of solid and solid start and I love how real he's being with this most posts about an update are focused on a bullet point list of new features Ryan's actually starting a conversation this is a post in their discussions in the announcement section and I really like how real it feels it's been a lot of anticipation about when solidar can get out of beta and move to 1.0 unfortunately we are not ready yet I think this is clear from the nature of the bugs and issues we are facing while there are some happy paths like node unic and SSR a lot of what solid start does is pretty buggy they've also learned a bunch about the apis both what's worked and what's failed and they want to design a platform that keeps them open for the future I apologize for the time it has taken to post another update that's a really cool thing to open an announcement like this with to be real that this is taken too long and explain what thinking is and where we've been in that time the last one was over 8 months ago even then the path for what we needed to do was clear it just wasn't obvious how to achieve it there were some fundamental issues with how start was set up and a large amount of work was required to fix it we've done a lot of exploration over the last several months that now I feel comfortable starting to discuss start's future and that starts with beta 2 a second beta run that applies what we've learned why market like so well there have been some breaking changes not necessarily the largest for hobby apps but we want to change how solid start deploys we also need to make some other API level changes which is why I want to include everyone in the discussion some decisions are pretty certain but may have a lot of details that are still being worked out that could use your feedback so here's a summary of the changes the big one is is rebasing to Nitro adapters in viny as I mentioned before Nitro is the new starting point for full stack Frameworks built around vit and they've done a great job integrating it also Powers analog which is the full stack angular framework made by Brandon Roberts which actually really cool if you're actually into angular analog's increasingly the cool weight to do it and also obviously Nu which is huge I'm personally not as familiar with viny JavaScript server STK to build full stack apps and Frameworks with your own opinions powered by Von Nitro so this seems like the backend side and a lot of the compiler stuff I also know it was really inspir ired by buns app bundler stuff which is really cool it's Vincy is how it's pronounced cool thank you for the correction appreciate that a ton so Vincy is again an abstracted building block for making good full stack Solutions and if I recall they were able to significantly clean up the code due to moving to these parts and with this they also get access to a lot of the V plug-in ecosystem so support for things like per page pre- renders and properly supported client side only is actually viable now this what I probably should have opened earlier this is the actual release notes for solid start beta too been a long year we couldn't be more thrilled to see all the amazing projects built on solid start things like post. news being built on start amongst others had incredible support from companies and contributors including Chrome's team helping in their research for performance increasing Tech really cool stuff however we've learned a lot in this year both in terms of our technology approach and the efforts to maintain a meta framework what we had done worked but it didn't work well and became apparent early in the year we need to do something about it and that itself was a journey into exploring different Technologies in the end they settled on Nitro to provide our server layer for start as I mentioned before Nitro and viny are the new core for solid start so they long have to write a lot of that code themselves and the result is that solid start went from 10,000 lines of code to 1,400 and 32 files instead of 150 that's a massive win that's not just like a win because oh you have less code it's going to run better that's a win because you have less overhead to think about when you make decisions and changes working in this code base is now more than 10 times easier if there's less than 10 times the amount of code that's a huge win and I excited to see how much faster solid start can move as a team and a product they're iterating on now that there's so much less they have to deal with as they do it huge shout out to all the people who made it possible for this release to happen first we need to talk about that rebase by rebasing to Nitro and the viny adapters they have changed how starting things works and also given you the ability to configure any of the settings that Nitro gives you access to which is cool because that's an open standard with own plugin architecture and ecosystem that you can adopt here without having to make solid specific stuff this means full access to pre-rendering in any project including automated link crawling dozens of built-in presets for for deployment the full power of H3 which is a universal HTP server as well as cozy integration with the rest of the njs ecosystem really cool stuff and I'm hype to see how much progress It's Made they also went router and metadata agnostic instead of the router being a deeply integrated part of solid start it's now a package that has good hooks to integrate into the framework this abstraction both means that the router can iterate and improve separately from the framework but also that other routers can be introduced as well really interesting to see the split not many Frameworks have so boldly split the router from the framework in fact reacts kind of going the opposite way where the router and the framework are more and more becoming one thing but it is nice to see solid try to separate these out and see the result that we get and the file system routing is consumable by any router so if you're using the file system routing in solid you can have a different router that actually works with the result of it really interesting stuff so like we're importing router from solid router we're still mounting this route still rendering things that way we also grab the file routes from solid start and then make those a child of the router that's really interesting and the page entry support a route config too so in a given route you can export a config and that will be used by the page yeah cool stuff feels a lot like create react op or VAP except it works as a s and deployment out of the box cool stuff here's where things get interesting we've talked a lot about use server on the channel I haven't talked about use server outside of react I remember when use server and use client were first introduced seeing Ryan realize that these are compiler level things that other Frameworks can use use server and use client despite being built for react and react use cases are pretty generic bundler behaviors that you can use for other Frameworks and as such they introduced server functions through the same primitive you server theirs have a few differences specifically you can't inline them the same way you do with react server components and server actions so if you want to have a delete button inside of your component you have to bind values to it rather than having them inferred through closure automatically really interesting stuff I watched a little bit of Ryan showcasing this in his last stream I'll make sure we link a Tim stamp to that in the descript description if you want to see more of how he's doing it but let's read about why server dollar sign was a pretty powerful convention for Server functions if you're not already familiar in the previous solid start version in a client file you could write server dollar sign and then write a function inside of there and that would then become effectively an RPC call that you could call wherever you wanted really really cool stuff but it also meant you were writing server code in your client files which not everyone wants to do and for good reason ideally your server files that have server only code would Exist Elsewhere and you can import from them but server dollar sign intermingled things in a less clear way and it was cool cuz like you could handle type safety and things like that well but it was weirdly co-mingled and collocated but that's why with solid start beta 2 they've picked up the react convention to move to you server it has other advantages of allowing for module level scope making it more visually clear that a server function is different and it's consistent with react's ecosystem which will make it easier for us to leverage work from other bundlers in a way that's similar to our choice to use jsx with solid there are some key differences though here I was talking about this a little bit their server functions are just functions so if you want server actions those are usually just calling server functions and then wrapping them with the solid router's action primitive in solid the idea of an action and the idea of a server function are different where an actions a router concern and a server functions a thing the server is doing when you call it I think it's a good call to separate these because you might have actions that don't necessarily hit the server you might have server functions that don't necessarily need to be an action so this a good separation I'm curious how people will feel about that over time they also call out that their server functions are RPC in the browser but just plain function calls on the server they can be called on the server or on the client as needed again really cool stuff our server functions exist independently of the concept of server components they can be declared anywhere they do not do closure extraction so you can only close over variables at a module scope they will not automatically grab server code and serialize it in the client again it's one of the weird things that server actions in next and react do that they've chosen not to do the result is that the codee's slightly less ergonomic and feels a little less like traditional JavaScript but none of those weird edge cases and unexpected behaviors exist as a result it's much clearer what it's doing when you do it he even says that the benefit of this approach is that Ser functions will work with any existing promised library whether built-in Primitives like create resource or third parties like create query from tat query so even though it feels a little less like JavaScript it behaves much more like it and will behave with these other tools much better our server functions also got a serious shot in the arm using solid serializer seral to handle the encoding letting a stream back a variety of data formats I haven't actually looked serol hope I'm pronouncing that right of course good old Alexis killing it there's a way to serialize objects all sorts of different shapes by the looks of it cool stuff I will be starring that looks very interesting setting promises are even async iterators over the wire interesting very interesting and point four client rendered single page apps are still very real we're serious about supporting existing applications sometimes move to Ser rendering isn't easy luckily you can just toggle SSR false in your config but it's more than that that just because you have a client rendered Spa doesn't mean you shouldn't be able to benefit from Easy apis with server functions client rendered only apps can still use server functions really cool stuff so you have a client application that just so happens to call server functions really interesting when you make the decision to do server rendering Beyond just flicking the switch we provide a client only wrapper that allows you to Define code that can't run on the server to be lazily loaded in the client and run after hydration things like jQuery plugins or big browser only data grids can now work seamlessly with SSR this is not too different from the next lazy import where you specify SSR false it's nice that there's an actual client only name and I do hope that next copies this because it's really nice to have a thing called client only it's very clear very nice but this is a behavior that exists in other Solutions and everything else bunch of other new features uh but that doesn't belong here respective Library so that's the point solid router has async cache and action stuff they also have added create route data and create server data API better typescript support the meta which is the metadata library now has zero configuration SSR head injection for putting the right title in the right place at the right time solid rep router you can also use the old version of solid router in the new solid start that's really interesting what you have here are The Primitives you need from a meta framework file system routing Advanced bundling for things like server functions in islands and a universal server runtime in deployment system and again he apologized for how long it took they're still on the road to 1.0 by rebuilding the foundation and stabilizing things we're on a much happier path than we were to actually get to 1.0 there are pieces to iron out from typescript to tests to bug Stomps to deployment bundling issues but they're working hard on getting there and I'm really excited to see it I am genuinely really hyped about all the work the solid team has done as I've said many a time before it's the most exciting framework outside of react for me and I hope this helps you see why they're learning all of the right things from react while also challenging the way that they've been presented and architected so that we can have a lot of those wins without having a lot of the potential negatives I'm hyped that react's being challenged such a meaningful and exciting way and I will continue keeping a close eye on all the stuff going on in the solid Community what do you think it's the time that I start using solid start for my content instead of nextjs or should I go use spelt instead what framework has you most excited now if you want to watch me compare all these different Frameworks I'll pin a video in the corner where I do that thank you guys as always see you in the next one peace nerds




## Spain blocks half the internet - 20250418
today we're talking about a small indie company You may have heard about them before Cloudflare They're very very small They're only being used on like 20.5% of websites They're used for a lot of different things from hosting to file management to CDNs to most importantly DOS protection Using Cloudflare to prevent your services from being hit with DOS is incredibly common There's a good chance you're buying your domains through them There's a good chance you're using this CDN for other things too Cloudflare has taken over the web and the vast majority of heavy traffic heavy value services are using Cloudflare somewhere in their stack At the very least they're using it as that DOS layer Cloudflare is a very very popular solution to a lot of problems we run into as web devs Which is why Spain's recent decision to fully block Cloudflare's IP addresses whenever there is a football game going on is within the most insane things I've ever heard a government do This is like the textbook example of why you shouldn't let government people make policies about specific technical implementations because it's not just Cloudflare by the way Cloudflare's biggest talker by far is Garmmo the CEO of Verscell and they're being hit the exact same way It's pretty absurd Pretty absurd is generous This is one of the stupidest things I've seen in a very very long time The Spanish government should be ashamed the people should be rioting and we have to talk all about this If I'm going to lose all of my customers from Spain we need to make up for the money somehow So we're going to do a quick word from today's sponsor and then dive right in Today's sponsor is one of those rare companies that I've been building on for over 5 years Agora makes the best video infra in the world And I mean it Whenever I'm trying to transmit video and audio live over the web Agora has almost certainly been part of my stack We built all of Ping on top of them But I want to show something cool they just built on top of their infra a conversational AI engine I've never seen anything quite like it The SDK and API for having live conversations with AI And because their infra is so good the latency just feels impossible This is going to be a live demo cuz I want you all to see just how fast it can respond to things Hello Is there something specific you want to talk about or should we just have a chat who's the best programming YouTuber there are many great programming YouTubers but Cold Steel Traversing Media and the Coding Train Wait I want Typescript YouTubers for TypeScript You might want to check out a catam mind Okay thank you I get it Do you see how fast that was though it responded almost immediately after I stopped talking and I could interrupt it without having to set anything up It's like five lines of code to get started It's surprisingly cheap to run and you can plug in whatever models you want If you're trying to add voice to your AI apps this is almost certainly what you want to use I know it's what we're looking at for T3 Chat Thank you to Agora for sponsoring today's video Check them out today at soy.link/agora Let's dive into how Spain is fundamentally breaking the internet There's a couple pieces we need to talk about here There's the IP law and piracy side There's another type of IP though IP addresses that we'll have to talk about too as well as DOS protection and identification This is the general three pieces we're going to have to talk about Let's start with IP addresses If you're not familiar there's an IP address It's four numbers that describe an address something can go to Kind of like a phone number This phone number is assigned to a person or device And when someone types in this number and calls it telephone networks will use this number to figure out where to route the call and connect you IP addresses are similar This is an IPv4 address specifically There's a problem with IPv4 addresses though There aren't that many of them I know you're looking at that number and you're like "What do you mean there aren't that many of them?" That's like one for every two people on Earth Yeah that's actually not that much because any one person could have multiple things that need different IP addresses And more importantly a lot of these are reserved for certain things like privacy like local usage etc IP addresses are sold in blocks which are chunks of address space that can be used for different things And most of those chunks are taken We are actually in the middle of an IP crisis We are out of IPv4 addresses This is bad I don't know about you guys but I have a lot of websites This is hilarious Here is just a taste of a bunch of the domains that I currently have set up on one of my Versell accounts I have a lot of domains If each of these was its own IP address that would not be viable because I as one person have a ton of domains It's very surprisingly easy to use up a lot of them So if every company every dev every subdomain everything was to have too many of these IP addresses you can see how quickly we run out Which is why it is basically essential for businesses to reuse IPs So if you were to go through the domains that I had there and pick any handful of them there's a good chance that marker.com and unduck.link both resolve the same IP address Let's just check it DNS check undock resolves to this IP address And if we go back here and grab marker thing previous IP address 663360 66 3360 crazy reason for that is the domain is mapping to this one IP address that is Verscell's as we see here as well the Verscell DNS it once that DNS has been hit it can look at the domain name you're requesting and forward you to the right place This is essential to how the internet works today because if every single domain had its own dedicated IP address we would have been out a very very very long time ago because every computer effectively needs its own IP address Every computer in your house every computer at AWS every computer that Facebook is using to host their servers every phone in your pocket everything needs an IP address in order to send things to and from it So if we are out of them we are screwed And that is why we have IPv6 IPv6 there's a lot more of Yeah My face is cutting off the answer because it's such a big number 2 to the^ of 128 There are significantly more IPv6 addresses Show one They look like this IPv6 is awesome because we won't run out of them like ever It's basically theoretically impossible to the problem that most things don't support it things like your ISP which is your internet service provider They don't support IPv6 probably which means if you have a domain that resolves to an IPv6 address it will choke up and fail As such most websites I would go as far to say pretty much all websites are still expected to run IPv4 or their hosting This is the problem So how do we handle this with a service like Cloudflare or Versell every time I make a build on a service whenever I push code up to GitHub a environment is created and that needs to have an IP address for you to get to it So if every time I did that for every project I create an IP address I personally have published tens of thousands of instances that theoretically would need their own IP That is not viable with IPv4 So what all of these services do is they have a pool of IP addresses that aren't shared amongst a customer They're shared amongst customers So when I register on Cloudflare and you register on Cloudflare we both are getting the same IP addresses The reason that this is important the reason Cloudflare is in front is because they're going to protect you from things like a DOS attack You might have seen this screen at some point in your life checking your browser before accessing This is a thing you can set up with Cloudflare to check the user before they go in So if your site's suddenly getting way too much traffic and you think you might be getting they will add a check step in front where a different page is loaded checks to make sure you're a real user by running certain JavaScript and other characteristics that are really hard to emulate with a bot to see if you're a real user and if you are then it lets you through This is essential if your services are getting spammed and attacked One of the best products for this Verscell is starting to catch up with theirs but like those are the two best options by far for protecting your services from getting denial of service attacks via massive distributions of spam Very very common And this is the thing like I would guess half or more of the websites I go to are using either them or Versel to solve this problem I know we rely on them heavily to keep teeth reach from getting spammed to all Helen back It's essential for the success of our services But that means we're all relying on Cloudflare and more importantly our URLs point to one of Cloudflare's IP addresses Cloudflare has a large bucket of people using it And we're actually going to pull up an old rant There's a decent chance you guys have seen this rant already because we go to my channel and we sort by most popular It almost got a million plays The problem that this video is discussing is a random company Brand Shield got H.IO IO taken down because they went to the DNS provider and said "Hey you have this game on your service that is breaking the law Take it down." So I'm going to grab this diagram because we're going to reuse it cuz things get a little more absurd Let's pretend the people who were sharing the piracy streams were doing it on Twitch We'll pretend Twitch uses Cloudflare They don't They use AWS We'll pretend DOS protection We'll also have DNS which is also Cloudflare Registar which is also Cloudflare We're going to add some layers here Going to delete all these parts Let's say we have like this rough stack You're a viewer going to watch something on a stream Maybe like I am now on Twitch You go to watch a stream That means a person is streaming the video Twitch is hosting the service where the streaming is happening and the viewer is going to consume it Cloudflare has the DOS protection layer in front of it They also probably providing server stuff like that They also below that have the DNS which is what turns the URL into an IP address to then let the user access the service And then there's the registar which is what turns that like name into an actual thing that is registered with these internet companies so that you can have that URL and have that name turn into the right IP address All of these layers are necessary for a service So let's say the person here is breaking the law We'll pretend that the streamer in the middle here is streaming copywritten content Totally never happened before right i say as somebody who built all a lot of the tech on the safety side of Twitch that had to deal with this Yeah So we have a streamer that is streaming video that they should not be streaming We'll even use the example here which is they're streaming a soccer game live that is a pay-per-view event So they paid for it They're capturing their screen and they're re-sharing it so people can watch it for free It's totally understandable that a lawyer for that company would try to get that stream taken down because it is breaking the law This is somebody breaking the law I'm not going to sit here and pretend that what they're doing is okay It is not The problem is addressing it at this level is not necessarily easy to do So if I am the lawyer for big soccer the lawyer for big soccer could do their best to go after and sue the person here the one streaming the video But chances are by the time they actually get to them the game's going to be done and they're even less likely to be able to identify this person And if Twitch wasn't doing enough to help big soccer ban things here they would go a layer down They would go to Twitch They would contact Twitch and say "Hey your service is being used to break the law You're not doing a good enough job taking down these illegal streams We will take legal action against you if you don't put more effort in And if you either fail at this step because Twitch ignores you or you're incompetent you can go a layer lower and say "Hey Cloudflare there is piracy going on with people using Cloudflare this Twitch site's being used exclusively for streaming illegal things You need to take them down." And if Cloudflare doesn't do their due diligence they might take down a customer even if it's a very very small percentage of their traffic is being used for illegal things What happened in Spain isn't even that level of rational It goes further There are ISPs which are internet service providers We'll say you're on I don't know Comcast everyone's favorite That's an internet service provider When you use the internet there is a company that is turning the thing you're doing on your device into a network connection going to the server and bringing back that data to you If they were to go after the ISPs I would say they're being incredibly incompetent That's not a thing you should do You shouldn't be going after ISPs because of users on the ISP doing things Nonsense But they didn't stop there They went even further They went down to the government level They petitioned for the government to instantiate a hard ban of any IP addresses they identify as providing pirated content But if we go back up to where we started you might remember a problem These IP addresses are being reused So if Cloudflare isn't just writing for Twitch but it's providing for 15 other things closer to like 15 million other things and one of them is identified to be used for piracy they don't contact the service owner They don't contact Cloudflare They don't even contact the ISP anymore They went to the government and said "Hey anytime we identify one of these things as violating this law it has to be banned all the way up the chain." So now whenever big Soccer reports an IP address every ISP every provider in Spain is legally required to block that IP address Actual insanity It's judicial response to the demands of La Liga under IP law Okay so this the judge is coming in So it's not like the government instantiated a policy for this It's more that the judge of the case said that all ISPs are required to follow these demands It's also convenient that the people who own the sports channels also happen to be the most popular ISP in Spain Very bad precedent that has been set here And since the company that runs this internet layer since I think it's La Liga right the company that runs the internet for most of Spain also is part of big soccer and they want to make sure they can sell their subscriptions to watch those games or sorry Telefonica Thank you guys Because this party and this party are the same party they can basically get away with whatever they want And they have done that They've went to the government and gotten permission to blanket ban and also expectation that other ISPs will do the same And the result is that a significant portion of the internet goes down in Spain whenever there is a soccer game That is hilarious and terrifying This means that when there is a soccer game going on in Spain users can't use my chat app T3 chat because we're built on Versel and their IPs are getting banned It means that you can't use government services If you're trying to file for immigration or renew your passport or something or check your flights cuz you're leaving Spain and a soccer game happens to be going on there's a very good chance you can't check your airlines website or app because it's being blocked That's insane This is actually unreal This is absurdity I've never seen something go this low in this chart Like my most popular video is me explaining that going down one layer below the service owner was too much Going down to the courts to mandate ISPs enforce blocks of things that are entirely unrelated is so genuinely insane that I didn't believe it when I first heard it But now that I have like two companies that are like mortal rivals Cloudflare and Verscell hate each other They are on the same side of this one which shows the severity of how stupid and bad this is This is what happens when you let interest groups explain to government how a thing works rather than the people But since the people who explain to the government how ISPs work and what the role of the internet is and how piracy is all happening since this company was the one to explain to this group the judge in this case how this all worked the judge got a biased view of how the internet works And now they can delete everything above their line So what are my takeaways here first one obviously we need IPv6 immediately So many of these problems would be reduced if services didn't have to reuse their IP addresses You would have a much easier way to go up the chain and not screw over 20 plus% of the internet if every website had an actual IP address dedicated to it That would be the first step Second step we need government employees who get this stuff If a judge is ruling on a case about how the internet works the judge should know how the internet works There is a problem in the US right now where there's a particular court in Texas in the middle of nowhere that is so bad about understanding technology that patent trolls camp there and file lawsuits because they can trick the judges into going in their favor It's absurdity These things need to be like government level fought against constantly And most importantly we need the Spanish people to speak up People in Spain should be outraged right now They should be rioting in the streets over this that the internet is being censored because big soccer is mad that they're making slightly less money And in the interim for now please use a VPN I hate this I really hate that the solution right now is that you have to use a VPN But like if you're in Spain do not let Telefonica see a thing that you're doing on the internet this company is terrible corrupt evil and should be treated as such Operate as though this company wants to ruin your life because they are not acting in your interest at all Do not let them see a thing about what you do Telefonica whatever judge thought this was an okay thing to do without checking with actually intelligent people about what the he was doing I would harsh on the judge if they didn't ignore and dismiss the appeal filed by Cloudflare about how this was Cloudflare tried to come in and explain why this is stupid and the judge dismissed it fully that them In the words of Rooted Khan who which is a group fighting for the rights of privacy of people on the internet the judge has surprisingly dismissed our request in Cloudflares allowing La Liga to continue blocking at will websites and IP addresses that have no connection to piracy whatsoever Udicon remains firmly committed to defending citizens and we will pursue all necessary legal means We don't understand the judge's decision as we assumed he hadn't been provided with all the information necessary to issue a ruling Unfortunately his role has now become clear If this was just the judge being misinformed that's one thing Now the judge has been given the information and he is continuing to be an If it looks like a duck and it quacks like a duck it's probably bad for the people It's insane I cannot believe this went this far So yeah Uh that judge Spain start rioting sucker is certainly not worth giving up half the internet for This is pathetic Yell at your government Get that judge fired because they're certainly in cahoots with Telefonica or they're just bad at their job It's one or the other I'll let them sue them and figure it out But that judge is either corrupt or stupid In either case they should not be a judge I haven't been this mad at something in a minute so I'm going to move on Just all of this Have good DMCA law Content that is illegal should be informed at the point of hosting not at the point of IP address Five layers down the goddamn chain Insanity To anybody watching in Spain I hope you could get to the video fine and that there wasn't a soccer game going on And to everybody else don't let your governments do this stuff It's really hard to walk back once it starts Until next time keep the internet




## Speedrunning Stripe (yes really) - 20240811
42 is it the meaning of life 42 is it something deeper some magical number or is it just our stripe testing data well honestly for me it is just stripe testing data as they say in the stripe docs if you want to test stripe in staging to make sure that your Integrations work with your payment processor 4242 4242 4242 is their example for filling out that information something did recently changed though which is that April of 2024 just passed which means if you just enter 424242 over again over and over until you got to the date field where you would type 424 that used to be valid but now that is an expired date and they've even changed it here to be 12:34 so that you can use a valid future date when you're doing this testing why the hell am I talking about all of this today well a fun new website just dropped from my friend Irwin 4242 dopro if you're a real engineer and I mean you're building real products and putting real time into building these things and also of real users who are actually spending money you immediately knew what all the 42 42 42 42s were because we've all had to do this at some point if you're working on a complex enough application hell if you're working on application that charges people you've almost certainly had to do this and there are so many replies from people that have been putting their time in obviously embed who's also the champion of the upload thing speedrun jumping in here getting a 1.92 the story as Irwin said is that they had to fill out the stripe checkout 1,000 billion times and it inspired them to gamify it so they registered the domain built the MVP in two hours and it was so good they asked their friend soie Dominic to take a look and team up see if they can make it prop with a high score sharing better UI anti-che mechanisms Etc but now I have to play it also of note embeds gotten much better scores than the 1.9 but they lock you out if you get below a 1.9 I think they actually got as low as 1.5 earlier 1. 14832 but it won't let them submit it again because it's locked at 1.9 so at the very least we have to get there sadly my 720p screen does not give enough space unless I move chat over more here we go so we have to fill out the right checkout form as quickly as possible we already see a lot of people in chat saying oh yeah I have to do this all of the time you use it to get a 0.42 result but it won't let you submit damn Ollie so crammed yeah sorry I had to squeeze chat here careful with the squeezing there's people here well when I when does the timer start first key or click starts when focusing when spelled wrong great love it first click shall we go I'm going to have to set up my [ __ ] a little more proper for this let's get started ready in three two one this is harder than I thought wrecked didn't fill all inputs how much do I have to fill these things how do anyone get sub two seconds yeah uh don't over underrate embeds ability I missed country okay I have some ideas on how to game this further I need a number that I can paste that works in every field will all nines work YOLO it doesn't let you put a number at the start of an email okay the email's throwing me off you can't paste you can't paste [ __ ] embed knows the rules for this far too well card only yeah I don't want to do the full for sure so if I just skip everything else and only do the card info and submit start game card only okay okay remap my paste shortcut I know I can do that this is where the gaming starts shift insert I don't even know what the insert key is on Mac let's try it nope it's supposedly function enter which does not work for me should be doing it legit fine I'll do it legit because I'm sure you did in bed you did do it legit right miss a nine [ __ ] not a valid card [ __ ] okay so I do have to do something valid for a card not a valid oh yeah it's not [ __ ] this is tough [ __ ] nope [ __ ] I tabed too early how did you do this so fast in bed what the [ __ ] I keep doing a [ __ ] number that's not a real month this is tough W 4 seconds we have to do so much better getting your tripod out to flex oh boy I'm so curious what your Strat [Music] is [ __ ] nope I need a good I need a number I can like rapidly type that will work typing 1 2 3 4 rapidly is not as easy as it seems you know what the Strat is hit random numbers until you hit cases that work it'll be faster yeah nope too much there uh valid card [ __ ] so the card number has to be valid what are the rules for a valid card number this the algorithm for valid card numbers number four to check some that's dumb that's that makes this a lot harder do you know what the real op Strat would be for this two keyboards [ __ ] so close 3.5 we're doing better [ __ ] keep making the same mistake with the month [ __ ] nope use tab for the field not the trackpad that's fair three two one [ __ ] getting sub three is very hard damn right it is [ __ ] card only 3 2 1 3.0 you bound enter to your mouse what are you using your mouse for [ __ ] I wish there was a hotkey to Auto reset it [ __ ] [ __ ] 3.0 I'm really hard locked at 1.3 aren't or at 3.0 aren't I 2.3 now we're talking where does that put me on the leaderboard not even top 10 I'm number 16 we got work to do I got to at least I can't get the one 90 I love the only real top score here is embed because no one's getting this exact number and anything below it will not allow you yeah you can't submit if you get below 1.9 so knowing that I want to Brute Force as close as I can to top three too much fun things are happening like lowlevel getting high scores this is unhealthy new Addiction but most importantly embed just dropped their speedrun strats they pulled out a tripod just to film this to prove to us that they're being legit the only kind of questionable thing ined is done here is they've chosen to bind the enter button to an extra button on their Mouse but they also have some interesting strats I might have to move the video slightly so I don't cover actually no I just barely fit there also what the [ __ ] is your theme is that the Obama theme God damn it embed you put this in a video yeah the good old Twitter crunch quality so here are embed strats notice which input they start on I think that might be the op Strat I was sitting here using tab to switch the input Fields but you have to move your hand a decent bit to hit tab when you're also hitting numbers so having your left hand dedicated to numbers and your right hand dedicated to managing the fields and the submission is actually a really clever solution so as always embed has broken my brain and broken the system they've earned a retweet and yeah thank you in bed for breaking my brain as always let's see how good I can score 2.17 we're making [Music] progress 1.95 gamer I think I'm going to take that one number six I wish it showed the OS you did it in because I bet I have one of the highest Max scores for sure actual gamer Gabe you just I would have been top five if you didn't just get that score you [ __ ] if I didn't do this live I would be top five but since you guys had to compete with me now I have to get there now I have to make it the top five God damn it [ __ ] so close [Music] [ __ ] [ __ ] [ __ ] 2.24 I'm doing worse [Music] [ __ ] I'm doing worse 1.88 woo wait no that won't score because they have the thing keeping you from scoring if you do better than 1.9 [ __ ] well I have the best score of anybody here other than in bed I'm taking it I don't care that it's not going to submit because I know I just won I know I'm the king here shush Gabe bow to your leader for I am the 4242 Pro the speedrun keeps developing I have to film additional Parts because a change was posted so that we can can actually have times below 1.9 second which unlocks some crazy optimizations and we see here embed it's already going insane they've invented a new category called wheel percent and they're almost at under a second it seems like they bound a bunch of numbers to these keys and the wheels doing something I think not even sure what oh I see the wheel is used to spam values this is such a Nutty Strat if I'm understanding this correctly you start with CBC because you need like three actual numbers for that here you need numbers that are compatible as a date what are the actual dates you're putting yeah okay so 1 2 3 1 so those are those 1 two 3 1 so you can quickly just go like that so you just do that once move over do it twice go up and then spin the wheel to spam zeros because all zeros is a valid card the tech demonstrated here is actually insane and that puts in bed at 1.86 seconds she is slaughtering oh [ __ ] she did it under one second holy [ __ ] congrats yeah I will not be beating that time shout out to Irwin for making this he showed up in chat earlier too yeah gdq I don't know if gdq would even let us speed in that's that short but yeah legendary hilarious I love it thank you as always in bed for being our speedrunning Queen this was some innocent fun I hope that you guys don't feel too too click baited because I do actually think this is cool and as much as it microt targets founders of small companies it's a hilarious gag and if I was working at stripe right now I'd be going out of my way to hire Irwin and his friend because that was really really fun until next time hope you can get a better score peace nerds




## Stealing Buttons - 20240826
buttons the core of the web the thing you use to interface with applications the thing that we look at click on change interface with and just consume every day and if you look across the web you'll see a wide range of different buttons that look and behave in all sorts of different ways so why are we talking about this well I found a cool Chrome extension that I really wanted to Showcase I know why am I talking about a Chrome extension well hear me out this one's really cool it's called the button stealer and it does exactly what it sounds like so if I go to my arc which is basically Chrome they're based all the same click here click the button stealer I've stolen 245 buttons so far it would have been more but I had the cap at 200 and I only bumped it up yesterday let's click my stash and now here are a bunch of random buttons from random places I've been on the web recently it's so cool I actually really like this idea it's cool to just come here as an inspiration for different buttons and button types when you're trying to think like how can I make this button look just right some of them aren't rendered properly because they rely on weird CSS and positioning stuff I'm actually curious to see how they handle the CSS for any given button on here so if I look at yeah this one so we have the open fractal glass generator this is for magic pattern it's a really cool site I'll show in a minute it's supposed to be there but I'm guessing that the CSS for it has some crazy margin on it margin inline zero imported or important let's take a look here though I'm so curious where that margin is coming from position that would do it no all the position stuff here is pretty boring by the looks of it NOP line height I tried line height I see why this one's screwed up because there is some oh it's the transform that's it obvious chat how did y'all not catch the transform yeah it should probably nuke transforms from the CSS that it's importing but how cool is it that of like almost all of these buttons there was just that one broken by the transform I'm sure there's others throughout but for the most part it renders them all correctly and it has to do a lot of CSS massaging to make that work but it's succeeding and it looks great what's really cool though is what happens if you click one of these buttons If I go back to that one it brings me to the site that I found it on in this case it's magic pattern which a site I've been using for my gradients for a lot of my thumbnails for a bit now it's actually pretty cool so it found buttons from here yeah this tool is awesome definitely check it out if you haven't magic pattern. design if that's something that's interesting to you it's a fun tool especially if you're a graphics nerd and you're hanging out on a video like this one but how cool is it that you just browse the web and it slowly collects all these different buttons from all these different places and if you're curious where it came from like we all know where this one came from but I can click it and it will bring us right to wouter which is one of my favorite ways to do routing in react I think this is awesome I really like the idea of building something like this to collect buttons and use it as a source for for inspiration as well as a cool way to just hoard the things you explore on the internet I want to see if uh they have a GitHub I'm just curious if it's open source or not it is yep that's the same one I'm giving this a star on GitHub but I want to actually read through a bit of how it works okay that's kind of cool so they have all of the default properties like what the web would set by default and then it goes through it takes an element it grabs the computed style for the element it makes a map of all of the things from it it grabs the styles from the parent node it removes the style ATT tribute from the node that we're actually working with and then for each property of the ref that we got here we parse through and we add it if it's inheritable uh if it's Auto we continue if it's a property value of Border top and it's zero then we continue and just all of these giant checks to do its best to rip individual properties one at a time for a given button kind of nuts and then I'm assuming at the end yeah can't steal buttons async buttons maximum ignore Chrome storage local get buttons maximum cool so that's how they're actually checking to make sure we're not at the maximum and that we're not getting domains from an ignored site local buttons get code local button if no code return button length button has own property and here's where we actually add the button to the array we unshift it so it gets put at the front instead of push which we put at the back and while the length is greater than or equal to the maximum we pop so this is all of the code for adding the button to the array and then pushing off old ones then we update the storage here upload on shift buttons is set to buttons upload is set to upload cool the the amount of random like this is why I love projects like this is you have to fight so many things because the web was not built to allow this but it's like how cool is it that they extract computed styles through window grab the parent ref and then for each single key that could affect things they parse it and handle it that way so cool let's take a look at the service worker that does a lot of this in the background so uninstalled this sets the local storage the default values for everything do actually very important because if you try to hit a key that doesn't exist in something like local storage it'll break in really unexpected ways especially the Chrome stores the Chrome storage is not a shim on local storage it's its own very strange API it's also ASN so you have to await when you hit it unlike local storage you can just hit in line without issues counters buttons length buttons. map button ID counter minus minus uh if not contentful do content delivery API also they let you link it up to contentful I think that's if you want to dump the buttons somewhere external unchanged out event listener we're at the maximum then we pop until we're not at the maximum anymore you can upload off screen what does this function do oh it's right defined below here cool here the upload off screen the reason for this is so that it doesn't block the main thread on the site you're on it can run this in a service worker in the background once the message has been generated so if it's on contentful if you're bound to contentful it will upload it there afterwards it will upload to your local storage so Chrome runtime send message type full sync offscreen contentful a wait has document so if the document page so like the thing you actually go to exists then we create the document with the URL uh Dom parser required it interesting makes sense I think button is the last button upload. length minus one button has own property code then we upload the stolen button or we're removing it so this is how we're deciding is on this event are we adding or removing the button and then handle messages so this is all of the messages you can send to the Chrome service worker if the message is stolen button uploaded then we uh grab it from local storage we pop it we send it and then we set the local storage to no longer have this one that we're in the middle of uploading we have a contentful synchronized update maximum this is if you want to change the Max and it just sets the state to be the message value all the usual state setting stuff here pretty traditional for a Chrome extension and then you bind this at the end here so that Chrome knows to listen to your messages for your extension all make sense the one thing I didn't see in here is how does it pick the button ah here it is possible buttons where we get all a tags and button tags and if we're not debugging then we uh plus buttons zero this is the two arrays we have the first array which is the link tags the second array which is the button tags and we sort them randomly so this is a random effectively for both of those weird way to do it but it technically works because on any comparison it's going to blindly return true or false so that might actually take a while to run that that I think about it if it's doing multiple comparisons with the sort that could theoretically break and cause weird issues but interesting that J is zero J is less than possible buttons. length j++ then for each button if it's a material icon or symbol we skip it if we already have this button then we could skip it uh then we grab the CSS in the computed style interesting they actually have a check here if the uh transform is a matrix like this then we skip it or if the opacity is zero then we skip it if the elements not in the viewport then we continue which is skip it if there's no text we skip it or if the word skip is in it we skip it if the word jump is in it we skip it this is actually because a lot of pages have a jump button at the top for accessibility reasons that's invisible so just making sure they don't grab those because those buttons are weird if it has a new line of any form then we skip it if the text is ADD then we skip it if it's too small we skip it if it's too big we skip it if it has a background color of rgba 0000 we check if it has children if it has children we check if those also have the same rgba 0000 Z if they do we skip it wait would this ever pass oh yes because if we don't see that then we now have that and we can parse it going forward so we're just checking if this element has any children that are a valid button we finally get through all that so we clone the button and then we start having all the fun with it that makes sense that's kind of cool it's nice seeing how this works and it's also awesome that it's open source definitely give this repo a star if you're curious about both how Chrome extensions work and in this case more importantly how you actually consume things from a web page at such an absurd case it's quite cool I actually think this is an awesome case study of how to deal with things that the browser is not trying to help with at all like this is one of those things where like I would love to see an AI try to write this project because there's no way it could figure out all of these workarounds and edge cases that you want to filter out of like just this section here of all the that you want to skip is so valuable and I would never want to like figure out all of these cases myself like think about how much time it took to find and then handle all of these different cases fantastic work this is actually a really cool project I'm happy I took the time to dig into it shout out to analie zenov for writing this it's actually really cool I don't know if I'm following you on Twitter but we're going to fix that because this is one of my favorite things I've seen recently and I insist y'all go give this a star I'll leave the link in the description if you're as curious as I am definitely go check it out until next time peace nerds




## Stop Using Javascript Objects - 20220715
so we're talking about map sets and more I think people are how I put it I see objects used incorrectly all the time here's a a thing that I see a lot I'm also realizing this might not const users equals Theo say that I have ID 7 status online Maple ID 200 status AFK this is a pretty common pattern now users is an object that's type is Theo colon ID status Maple colon ID comma status so if I go to a uh create T3 app cool there's typescript files in here stream. TS cool so I'm going to grab this line of code here's our users object let's add another user to it user Mark equals ID 100 status offline it's users oh we're getting a type error here element implicitly has any okay let's give this type then key string what's here any for now so I can Bine this but I put the wrong type here and now this ID is a string when all the rest are numbers so I probably should detail that here ID number Status string could do different statuses now I get the type error correctly here and now this mostly works and if I like const user equals users Theo this should now correctly be user with the that type or undefined if I get rid of this type and comment out this line it knows that this is here because the type of users is Theo has these properties and maple has these properties because objects aren't for arbitrary key value mappings they are for objects arbitrary shapes with arbitrary nesting with ideally strong typings an object should have a type that describes all of the keys if you want to arbitrarily destroy and create Keys objects are not the pattern for that ideally an object's shape should be determined when it's instantiated and not modified during runtime that hurts performance significantly maps are or objects are not built for that it feels like a lot of people treat objects in JavaScript like dictionaries in Python which is not what objects are that's why we have Maps now so I'm going to rename this from users to users object we're going to redo this as a map const users map equals new map string this need to type ID number Status string and from here you can pass this in AR Ray of two look at that that was a good VSS code example actually and users map can have new users added by users map. set look at that good job co-pilot whereas with this example I'd have to read that type back and am arbitrarily like calling equals to add things to this object it isn't what objects are built to do to arbitrarily set and remove values like that maps have a much better optimized do set and do get so user or const user equals users map. getet Theo if you want to iterate on all of them you still can uh I'll here users map do map user log user that should be of type string comma ID status so user zero is the name user one is their info because you can convert an iterable into an array pretty trivially maps are a really underutilized pattern and they're great one more cool underutilized object type is sets let's say you have an array of users in call or users or user IDs in chat and we have have 1 7 17 17 we have 17 in here twice let's say that the join event came in too early or something like that so we want to always make sure this is duped we want to quickly check if an a value exists in user IDs because we want to check if they're online or not so in this if we wanted to const is user online equals ID number return user IDs in chat. includes ID that works but you have to scavenge the whole thing for that ID and if you pick one at the end it's not the fastest thing and when you remove 17 like let's say we have const remove user from IDs equals ID number you could do the filter where you filter all them out if the ID is the same but I just want to delete that one so if you were to const index of match equals user ID and chat. index of ID and then return user IDs in chat dot is that I forgot the delete Syntax for deleting from n array you could splice you can do a bunch of other things but I I this is not neither of these Solutions are great these require going over the whole array or at least until you find the item sets super cool const online you or yeah is user IDs in Chat Set equals new set I can even put user IDs in chat there now this guy has let's see if I do this if copil smart cool this creates a set out of this which means every value in here has to be unique so if you strings or inss and you give it a number twice it will only be in there once you can pass it an array that has something in there twice no more code duplication there no more value duplication the sets the set if you want to check if a user's in there const is user online 2 equals ID number user IDs in chat set. has ID that's it typing is hard and if you want to remove it remove user from online set. delete tada that simple I love sets I should probably use them more makes it really easy to confirm something's there and add and remove things for a list of unique stuff these data patterns are really cool super underutilized I hope that a few people in chat are realizing that they should have used set and map for things that they used raise and objects for please take advantage of these patterns they very good stop using objects as dictionaries objects are not dictionaries yeah deleting in an object is super scary deleting in a map is not at all good stuff did you know that over half my viewers haven't subscribed yet that's insane y'all just click these videos and listen to me shout and hope that the algorithm is going to show you the next one make sure you hit that subscribe button maybe even the Bell next to it that you know when I'm posting videos also if you didn't know this almost all of my content is live streamed on Twitch while I'm making it everything on the YouTube is Cuts Clips whatever from my twitch show so if you're not already watching make sure you go to twitch.tv/ Theo where I'm live every Wednesday around 2 or 3 p.m. I go live on Fridays pretty often as well thank you again for watching this video really excited thank you




## Stop pretending mobile is the web (and vice versa) - 20250505
We talk about the web a lot on this channel. We talk about apps occasionally too. Not enough though. And today I want to try and balance that out a bit. Not by just talking about apps non-stop, but by trying to highlight some of the differences between how apps work and how the web works. This is going to be a bit of a deep dive on the philosophy of how to build good software for different platforms. I find that a lot of developers think that one platform is just a worse version of the other and seem to fundamentally misunderstand some of the nuances between them. This isn't about Flutter versus React Native versus Native. This isn't about how we should embed web apps into our mobile apps. This is about the fundamental differences between the platforms. So, if you're a web dev building for mobile or mobile dev trying to build for the web, this might be a good starting point to better understand how to do the right thing for these different platforms. I'm really excited to dive into all of this with you, but before we can do that, I need to get paid. So, a quick word from today's sponsor and then we'll dive right in. I need to be honest with y'all. It's never been easier to build a web app. But mobile apps, as much as they've improved, it's still nowhere near as smooth to get started and it's way too easy to get things wrong. That is unless you hit up today's sponsor first. Infinite Red will get you going the best possible way with your React Native app. If you already have a React Native app that you're trying to polish up and make easier to work in, or you're trying to build one from scratch, or you're trying to move a native app over to React Native so more of your company can contribute, there is no better group to reach out to. They'll do everything from onboarding boot camps to building the app from scratch for you guys directly. And if they were just some random consultancy, I'd understand the concern, but they're not. These are some of the most deep community people I know. When I first switched the sponsor model over, Jamon was one of the first people to reach out. He's been a good friend of mine and one of my first supporters forever. He sees basically everything that we do. He's been a deep community member. Ask any of the people who are regularly in chat. They probably watch Jamon's podcast. He gets it. You don't have to take my word for it either. Look at the incredible list of brands that have worked with Infinite Red on all sorts of different products. They've helped out everyone from Amazon to Expensify to Starbucks, and the results speak for themselves. These companies keep coming back for a reason. Infinite Red is awesome to work with, but if you do trust my word, you might want to know that I'm almost certainly going to be working with Infinite Red on our mobile app for T3 Chat. They're the only group I trust enough to really commit in that type of way. Yeah, I'm going to bet my whole business on these guys cuz I do trust them that much. Whether or not they were sponsoring me, I would recommend them in a heartbeat. The fact that they are makes it even easier to do. So, thank you again to Infinite Red for sponsoring today's video. Check them out today at soyv.link/infinite. So the biggest difference by far, I think it's important that we acknowledge this first and foremost is routing. We'll dive a bit more into what that means in a bit. Second big piece we'll definitely need to dive into is the platform. Web platform and mobile platforms are very different and there's a lot of nuances here that we need to consider. Next we have the capabilities which is kind of part of the platform but it's different enough that it's worth talking about things like interfacing with camera storage all of that stuff. also background ability of your applications and possibly the most frustrating one deployment. The process of deploying and managing different versions of your applications is very different from the web. I think this is a good starting point for us to work from and we'll certainly go down a lot of different tangents throughout all of this. Routing is going to be a long one. So, I kind of want to just start with deployment. Yeah, let's do that. I'm going to assume most of the people watching here are already web devs or have at least built a modern site. But for those who aren't, I'm going to show you how easy it is to deploy on the web really quick. Let's touch index.html. Now we have our wonderful HTML file here. Let's throw it on the internet. MPX forcell deploy. Yes. Yes. No. Demo deploy. It's fine. We're done. What a difficult challenge. Deploying for the web is so hard. Obviously, this is a very simple, rudimentary project, but we could build something more complex here, and the deployment pipeline doesn't necessarily get more complex. On the mobile side, that isn't true. The level of complexity just to get it out is really high. But as the application gets more complex, it doesn't necessarily get that much harder to deploy. If we were to think of this in terms of like difficulty relative to the complexity of your app, we'll say this bottom axis is app complexity and the other axis, the y-axis here is deployment complexity. When you're deploying web apps, the complexity of your web app doesn't necessarily meaningfully increase the complexity of your deployments. It starts off super simple to deploy as long as your app is simple. deployment should be. As your app gets slightly more complex, the deployment complexity goes up slightly as well. With mobile, this is a bit different. You start at a much higher level of complexity, and if you have things like additional permissions or things that Apple's annoying about during review, it might get slightly more complex, but not a lot more. So, you have a very slight curve up in the complexity of deployment as your app gets more complex, but you also start at a much harder point. And this gap is something I talk about a lot when I'm comparing web apps and mobile app like developer experiences because this gap sucks. It's so easy for somebody working on a project on the web to just get it out for people to try. If I'm building a web project and I want my mom to try it out quick, I can just send her a link and now she can try it. If I'm building an app and I want my mom to try it out, I better already have her on test flight. If I don't, good luck. Have fun. I think this is one of the biggest misses of application platforms like iOS and Android. In a world where we have tools that make it easier than ever to generate experiences like all the cool AI app builders and whatnot, this gap sucks. The actual process of building the app, I can get real far with the complexity, but now I have to be a wizard with the app store if I want to get it out to people. And that sucks. If I can get from like here to here in a day using all these awesome tools and technologies, but then getting it deployed up here takes a week of dealing with Apple's That sucks. And Android's no better here. In many ways, Android's actually worse, believe it or not. So, yeah, deployment is rough. The biggest reason why this is the case is kind of a benefits and negatives of capitalism thing. The web's a relatively free market. There are so many options for deploying to the web. I'm using like five of them right now and there are more coming out all of the time. You have awesome options like Verscell that take advantage of modern web tools and technologies and will autob build, deploy and scale them for you across serverless environments. You products like Netlefi that make that even easier for companies trying to add modern web infra on top of their existing older legacy stuff. You have companies like Cloudflare making it really easy to process data anywhere in the world and deploying it's gotten easier than it ever used to be. We even had revolutions back in the day like our friends over at Heroku that was groundbreaking at the time and set this new bar for the experience of deploying your applications. On mobile, we kind of just have Apple and Google and the occasional effort to streamline parts of the process like Expo, but it's so much harder because you're not building for the web and for servers, these generic things. You have to be building for very specific chaotic platforms that change their expectations all of the time. It is significantly harder to build an expo than it is to build a Versel. The crazy bold statement I'm going to make that I honestly like fully believe I could build an MVP of Versel in like a week. I couldn't build Expo. This might sound insane, but I like 1,000% believe it. Deployment platforms like Versell are incredible in what they're capable of. I wouldn't be able to replicate some of the awesome infrastructure stuff they're doing, but the idea of link to a GitHub repo, deploy it on AWS for you, I could even DIY for a platform like Azure, which I barely know if I really wanted to. Expo I couldn't do like Expo application services is an incredible achievement in software development in the fact that they've actually made it easier to take code on your computer and get it built and deployed for native apps. But god, it is tough to get going. And even when you're using EAS, you're going to run into problems because these platforms are so weird. Jam's in chat. If you don't already know him, he's the CTO of Infinite Red. He's an old friend, fan of the channel from before any of you guys knew who I was. Also, good chance that they're the sponsor of today's episode. If not, they'll be sponsoring other stuff in the future. They're awesome to work with. If you're looking for help with your React Native app, hit them up. This part isn't paid for. This just like love these guys. Even Jamon, who is like the mobile wizard here, says the the amount of hours he spent in Apple and Google's consoles with certificates provisioning profiles, he could have had another kid. That's Yeah. And I don't know how much work a kid is, but I know it's a lot because that's insane. Yeah. Also called out the fact that Expo initially had Expo Go on the App Store where you could send a URL or QR code and anyone could load it on their phone and it was glorious. Apple sadly killed that a few years ago. Yeah, if you're not familiar with Expo Go, it's one of the really cool things the Expo team made. They made it so when you're working on an app locally on your like laptop, instead of having to rebuild it and ship a new native binary to your phone every time you made a change, you could open up their client called Expo Go. You can scan a QR code that gets generated in your CLI and now your phone is running the code from your computer with hot reloads. You save in your code file in your editor of choice and your phone auto updates with the latest version. It's awesome. Somebody is saying this is a lie. Expo Go still works and exists. It does for local dev. The thing you do before that was really cool is you could deploy that QR code on a server somewhere at an actual URL and a user can now scan it and in their app on their phone load the data from the network to try out your app. It was really cool. It wasn't Snacks. This was its own separate thing, but Apple squashed it because people were using it to use software that Apple hadn't approved of. My hot take here, and this is something that I one of the reasons I really wanted to make this video, Apple's reign might be over. I've been keeping a close eye on the different court cases between Apple, Google, Epic Games, and a couple other parties of interest, and the Google case in particular was disastrous. The final results of that Google case were unbelievable. I hope I'm not misquing any of the parts here, but if I recall, it was a five-year ruling on Google that they have to first off allow all other app stores to have full access to the Google Play Store catalog. This is insane. The fact that the judges ruled that Google's monopoly was so absurd and potentially illegal that they had to counteract it by allowing every other app platform to have full access to their app catalog for 5 years. They also have to allow other app stores to be distributed through Google Play Store. Genuinely insane. So you can once this all gets inked, you'll be able to install Epic Store or Amazon Fire Store through the Play Store. And arguably most importantly, Google cannot pay manufacturers to exclusively bundle their app store anymore. So previously, Google would pay a company like Samsung to only have the Play Store and not other stores. Google really wanted Play Store to be the only platform for apps on Android. They lost so hard in court that they might be the least popular platform for apps on Android in the next couple years. Genuinely insane. I am hyped on this ruling because both Google and Apple run their stores in a way that I would argue if it's not illegal, it should be. You should be able to install software of your choice on a platform as important as your mobile platforms. When a user purchases a phone, they don't think about the applications that they're restricted from using. If you bought an iPhone in 2020 and then learned in 2022 that you couldn't use the Xbox game streaming app because Apple decided movie streaming and music streaming is totally fine, but game streaming is a remote software platform, which means it's an alternative to the app store. So, they're not going to allow it. That is and that shouldn't be allowed. Apple should not be able to control what different app categories can exist and what different experiences users can have on their device. Needs to change. I think it's starting to change now. This Google ruling makes Apple's previous wins much, much more fragile. Having this as a precedent means that the next time someone sues Apple over restrictions that they're experiencing on the App Store, they are much more likely to win in court. The reason I'm saying all of this, and this is not legal advice, I am not a lawyer. I am not qualified to even really be talking about some of this stuff. Let's be real. I want someone to challenge Apple. What do I mean by this? I mean, one very specific thing. My dream is that someone who has an idea for an app, be it something really cool or even something dumb like a game about them and their friends and a creator world type thing. Imagine they could prompt for that app to exist using Bolt, V 0, A Z, whatever they use for it. They get something really quickly that they could play on their phone and be impressed with and proud of. Now they can screenshot a link or a QR code or something, send it to a friend, post it on Twitter, show it off on Tik Tok. Now you as a person on the other side can screenshot that. So I'm watching a Tik Tok. They say, "Hey, if you want to try my app, use this." You screenshot it. You open up the magic platform, whatever you want to call it. We'll call it TMP for now. You open up the TMP app and it has access to your photos and it sees that you have this in your screenshots. instantaneously opens that experience by loading whatever code it needs, probably React Native or something like it. So, it can control this native layer. I really want this. It's almost like Expo Go 3.0 is what I'm imagining here. The problem is none of the big players can do this because they're risking getting in bad standing with Apple. If you don't care about your standing with Apple, you should consider doing this. Let me know if you do. And once you have it working, let me know if you're taking checks. I think there's a really good chance of somebody with the right incentives doing something magical here. The catch being Apple will be fighting you every step along the way. There's a lot of other edge cases to figure out throughout, but if you can pull this off, you can do awesome things. And I do genuinely think Apple will struggle more than they ever have before to get you off the app store without a potential massive legal issue. And if you can get Tim Sweeney from Epic on your side throughout this, you'll actually probably win. Anyways, there are a lot of other pieces of deployment. Due to this complexity curve, you have a ton of additional problems. The one that I care the most about is keeping users on the latest version. If I have a bug, here's here's an actual experience I had at Twitch. We were building the mobile app for a certain size of phone. We'll call this uh normal phone pro. So, the normal phone pro is this size. All of a sudden, Apple puts out the normal phone mini. Sorry, not Apple. We'll say this random company puts out the normal phone mini and it's slightly smaller. Even meaningfully smaller. We'll pretend it's slightly smaller. If we had a bar somewhere in this UI, let's say we just had like one, two, three, four. This is our UI. We have these four buttons in this bar at the bottom here. Oh no, button four is getting cut off because the phone is smaller. We didn't expect the flex of the display to get to that size. In the webdev world, we're used to having cool things like flex containers. In the mobile world, especially on iOS, there used to be a limited enough set of different resolutions that you would hardcode a lot more stuff. But if a new resolution of display came out or a older one that hadn't been touched for a while came out, dealing with the smaller sizes was really problematic. So, why am I bringing this up here? Because we fixed this bug as soon as we saw it and we got reports about this bug for the next year and a half. Why in the world would we continue getting bug reports if we fixed this in 2 days for 2 years? The reason is because they didn't update the binary on their phones at this point in time. If you were on an old version of the Twitch app, it wouldn't do anything about it. You'd just be on the old version. Since then, the Twitch mobile team made a change where it will pop up in the app really aggressively saying, "Hey, you need to update. You need to update. You should go install the latest version." But before then, we would have as much as 50% of users on an old version over one week after the latest shipped. This was very common. And there's a lot of applications that still deal with this every day. On iOS and Android, it's not a guarantee that users are on the latest version of your application. there's no way to really force it if you're all in on native. As such, a lot of these companies have moved away from having the whole experience be native. Let's say that instead of this tab bar being Swift code that's hardcoded into your app, the code that actually renders each of these buttons might be swift code, but the thing that says one goes here, two goes here, three goes here, four goes here, that might come from some JSON fetched from the server that describes how to lay out the app. This is really common for things like a news feed. If this app had a feed in it, we might have a text post. We might have a video post, but we also because it's the holiday might have a St. Patty's Day post. And if we want to make this new custom type of post in our app that is its own layout, its own view, maybe it has some fancy like animation in the middle or the text is green or something, we need to get this in the app weeks if not months ahead of time because we need to get this in the app, put it under a feature flag, hide it, whatever we need to do there, and then when St. Patty's Day finally comes around, we can support this unique type of post because we already embedded it in the app. But if somebody's on an old version of the app and they never installed the update with the St. Patty's Day post type. This might error out. It might render wrong. It might just fail. Okay, it's St. Patrick's Day. You guys are gaslighting me. I'll just call it the full thing so you guys stop doing this. Anyways, if you don't have the code for this in your app already, it can't render it. And you can all imagine what the JSON for this looks like. Hopefully, you understand what I'm trying to show here. You hit some API to get the posts. And each post has its type, its content, whatever other things it expects. And now our app has to take the fields from here. It uses type to figure out which component or UI element to render. It then uses content or URL or whatever else that post component type expects in order to render the right view for that. This pattern works great until you're changing the post types and the users don't have the latest version of the app to show the latest type of post. So what a lot of companies have started to do instead is they don't send this data. They send what's called server-driven UI patterns where they describe what this post should look like instead of just sending down this JSON. So instead of type St. Patty's post, they might send down something that looks closer to HTML in order to get that data to the app so it can render the shape instead of rendering the content in an existing shape. The way of thinking of this is you have two parts that matter. You have the box in the app, the component, so to speak, the shape of how the thing should render, and you have the data, which is the part that needs to get stuffed into the app in order to turn that box into the thing you see. It's the whole like uh UI equals a function of state or in this case data. The problem is that the state doesn't have enough information to describe the UI if the function, which is what makes that UI, doesn't have the right pieces yet. So if we want to be able to send new things to our users without knowing what version of the app they're on, then state has to include more of the UI. It's a balancing act. How much of the way the UI looks gets put in the state versus into the application binary itself? Native apps have historically had to lean heavily on the native layer. So they've had to massage all the different ways the JSON can come in, filter out things they don't know how to deal with, or just error out if you're on an old version. But if the server sends the shape this should be rendered in, the version of your app matters a hell of a lot less. This is why every company from Facebook to Google to YouTube to Slack even has started moving towards the UI being defined by the server rather than by the application binary itself. Now what if I told you the F part here could come from React Native. Then this whole paradigm becomes much easier, but that's a discussion for another time. The core point we're trying to make here is that we've had to fundamentally change this relationship in a way that we've never had to worry about in web in order to make sure we can render all the different things the server needs without having to wait for Apple to send the app to users knowing some of them will still be on the oldest version no matter what. I think this covers everything I need to say about deployment. I have a feeling it's going to be a long video. Let's do a slightly shorter one quick. I say self-aware knowing how bad this will be. Let's talk about the platform. This is one of those slightly more nuanced things that web devs struggle to appreciate, but mobile devs struggle to appreciate from the web. All of these platforms are very different. The platforms being at least the core ones iOS, Android, and web. These things are all very different. We'll start with the one that most of us are probably the most familiar with, which is web. Web is a open standard. Putting it in quotes because people will fight about that. I don't care. It is genuinely relatively open. It has lots of computing implementations. Whether or not we want to admit it, these implementations are surprisingly compatible. Like I'm in a Firefox based browser right now with Zen and I keep open my Chromiumbased browser for all the mostly for the dev tools. There's a lot of things I'll say about how if the Firefox platform is behind, but it's 99% of the way there. Pretty insane that it's gotten as far as it has. It's really cool. And there's a lot of other benefits to the web being an open platform and open standards. It means that you have lots of options on how to solve problems. Things like how do you process payments? How do you store data? How do you interface with the web? What API methodologies do you use? What technologies do you use to build the application? How do you deploy the application? All of these things are part of what makes the web great. You have so many options for almost every layer. iOS and Android less so. iOS is certainly not an open standard. The term people use a lot is walled garden. I think that's fair. They for some reason open sourced Swift, but I haven't actually seen anyone using it for meaningful things that aren't Apple platforms. The closest thing was Arc and we watched how that went. It has two blessed options for most of what you do. You have the core UI kit like the original Objective C based application platform layer and now you have Swift UI as well. The reason you have Swift and Swift UI as well as the old core UI kit and Objective C stuff is because Objective C is an ancient decrepit language that's a bit of a mess. It's rough. And Swift UI, funny enough, was an attempt at learning the right lessons from tools like React to try and make application development way less bad. And if you want to see how the iOS community feels here, check this out. Almost immediately in chat, Objective C is better than Swift. Swift is really underrated, though. Yeah, that's where we're at here. There's even still debate internally about the two blessed options and both of them have lots of catches and I would argue neither are properly complete. Now it's a bit rough. It also both of those are very much Apple platforms. If you build an app in Swift and Swift UI, it might work okayish on Mac, but you're not getting that working anywhere else. Rough. It's also worth noting Swift UI was announced in June of 2019. React was announced in May of 2013. It took Apple six years to learn the lessons that React taught us and it still is trying to apply them. I know a lot of devs still aren't using Swift UI because they still don't consider it stable enough. This is the problem though. You can't really build a better app platform or native UI layer on iOS or Android because we're kind of relying on the platform itself to do it. Unless you're Flutter and you just ignore the platform entirely, which turns out is a lot worse. The capabilities of these devices are incredible, but the expectations of users are really high. And those expectations are that applications behave in certain ways because they're used to their phone working in a certain way. When Flutter announced their 3.29 version, I went and read the blog post and I you not, the first screenshot in the blog post had the worst alignment I've ever seen in a search bar. They're aligning on the bottom. Are you kidding? This is the default. This is their example. And whenever you use a Flutter app, you'll get this weird uncanny valley feeling. And this isn't just like devs or people focused on this will get it. My mom felt the difference when she tried using the eBay Motors app for the first time. It's bad. They And this like since I flamed them, they hid this. By the way, this is no longer at the top of the blog post. It was right here before. They deleted the screenshot because I ratioed them. It's it's not good. And that's kind of the problem though is we have this expectation now. And if you try to build without using the native parts, without using the core UI elements that exist on the platform, you either have to recreate them to meet the expectations that users have or you have to do something so different that users expectations are subverted and circumvented entirely. There's also a huge important piece to all of this, which is accessibility. Apple did a great job of building good accessibility into these native elements. If you use an actual button or touch element inside of Swift UI and you label it properly, that will work great for a user with a screen reader. And that's genuinely awesome. The fact that iOS, if you use everything in the platform properly when you're building an app, makes an experience that's great for people who are blind, hearing impaired, or have any of many other things that make navigating software harder. Apple is genuinely groundbreaking in the accessibility space. One of the best companies when it comes to that. And I, as silly as it sounds, when they do their accessibility commercial every year or two where they show something incredible, when they showed the paralyzed woman editing her own commercial, I cried. Like, it's I don't know. Like if you've never met one of these incredible people that work so much harder to get things done in a piece of software, I implore that you find someone you can talk to about this because it's the the challenges people have to go through with accessibility needs to do things that we do every day. Something as simple as a drag and drop interaction is entirely inaccessible to hundreds of thousands if not millions of people. Apple has made incredible strides here with their mobile platform and with their mobile STKs. But if you go down a different path at all, you have to reroll pretty much all of that yourself. You lose all of the benefits of Apple's platform in how it benefits accessibility if you try to roll your own. So, you end up locked in in a way where if you're not building like a game, you pretty much have to build into the platform. any other option is borderline irresponsible and hurting hundreds of thousands if not millions of people and their ability to use your software. It's a good thing that React Native uses the native platform, isn't it? But yeah, you get the point I'm trying to make here. The platform is good and they've done things no one else can do. The web will never be as accessible a platform as iOS simply because they built it from the ground up with this in mind. And the standardization that they've pushed for has allowed for things that are not possible on the web as old and like supported as it is. It's incredible. Pivoting from incredible, we need to talk about Android. Android is technically open source. It's also technically Linux. It's forked hard enough now that it's hard to say that in good faith, but in almost every other way, it's like iOS, but more jank. There are good things. Cotlin's an awesome language. I've been meaning to do an indefensive Java video for a while, but using Java in the JVM for an operating system is such a cursed idea that we should never have let it happen. Ah, yeah, it's Android's a interesting beast. I used to be deep in the Android world. I used to contribute to custom ROMs all the time and even try contributing to Android core. It was my favorite thing in the world when I was in high school. And then iOS 7 came out and rewired my brain. Regardless, the the thing I want to emphasize here is you probably should be using the Android platform, but it's also fragile enough that something like Flutter makes a lot more sense on Android. It's actually relatively similar to the native runtime on Android. It's also part of why using Flutter on iOS makes it feel like a crappy Android app. Just remembering the Flutter people. Oh god, what do you have here? Yeah, when you select text in Flutter web, it puts an actual DOM element of text and tries to overlay it exactly where you select the text and misses like 30% of it when you try to do so. This is the stuff Flutter has to do in order to make it accessible because it's not using the platform. It's using its own layer on top of the platform and then it still has to fall back on the platform in order to do basic things like accessibility. I'm about to show my knowledge gap a bit. I hope I don't regret saying this. Jetpack Compose is supposedly really good. This is the tooling ecosystem around building and bundling for Android. I've heard it went from absolute garbage to actually surprisingly good now. That's awesome. It's crazy to think that Android went from comically worse development experience than iOS to arguably slightly better, but it has. I actually like full transparency a big part of why I was contributing to things like cyanogen mod is it was easier to modify Android itself than it was to build an app for Android. Nonsense. But yeah, I've heard really good things about the state of the Android ecosystem nowadays. Good to see cuz it was horrifyingly bad before. The core point here being if you drift too far from the native platforms for either of these, you end up in a lot of pain. There are benefits to these platforms though compared to the web. The one thing I didn't say here is the web can never deprecate anything. There are so many APIs in the web that are subpar that can't be changed because there are millions of websites using them in their current, often broken states. It's horrifying. One of my favorite examples of web deprecation being a problem is Smoosh Gate. If you're not old enough that you had to bang your TV to try and fix the reception, you probably have not heard about this. So, for everyone here who hasn't, a while back, we didn't have a way to flatten arrays. If you had an array of nested arrays, you wanted to flatten it, you're kind of screwed. There were a couple libraries that did this, and at the time, we were all using them. Things like moo tools, jQuery, stuff like that. But the web standards committees wanted to make this an actual web standard because it's a common enough thing. It should be in the standards. What we did initially is array.flat. So you'd have an array like this that's like triply nested. You call array.flat and it would flatten it. You could call it with flat and a number like infinity and it will keep calling in order to make it truly properly fully flat. This is also the proposal that flat map came from which is like my f I I abuse flat map. I use it places I probably shouldn't. It's so nice. The issue is that they wanted to go with flatten but they couldn't. When you install new tools it would override the array prototype key for flatten and would make its own implementation of it. in their implementation was different from the one that web standards was trying to do. So if they were to name the new web standard flatten, that would conflict with and break for moo tools users. Terrifying. Really bad. Because it would have break on a ton of websites, they had to name the API differently and implemented in a different way in order to not break for people using this older library when they implemented this. Insane. And these things happen all the time. Thankfully, libraries know better than to just constantly override array prototypes now. But if they didn't, this could be bad. This is the state of the web platform, though. By supporting everything forever, by being able to go to a website from 20 years ago and expect it to work now, they can't deprecate things. They can't remove things. They can't change how things work. Sometimes I wish Apple operated that way because they changed how Swift UI worked every single major release for like four years straight. But that's the the difference here. One last thing on the platform, and I've been touching on this here and there. Tools should be built on top of it. There have been attempts to build things for the web that aren't built into the platform. The biggest two being Flash and Java, the reject of the bunch being Flutter. These technologies aren't part of web standards. None of these are standardized. Java kind of is, but barely. These technologies were attempts to build different things into the browser via native plugins that were part of your operating system, not the browser itself, that would allow you to run different experiences. Flutter obviously uses canvas in the browser, but Flash and Java were both things you would install on your computer and use as plugins inside of the browser. This allowed for the web platform to advance way quicker because at first the web wasn't very interactive. Flash and Java were almost exclusively interactive. So all of a sudden we could embed these things and do things the browser couldn't do before. And I still dearly miss the flash game revolution. We haven't had anything to properly replace it since. I do actually have a video planned in the near future called the or in defense of AI games where I'm going to be talking about the relationships between the new AI game building things people are doing and the old days of flash that I grew up on. I probably wouldn't be a programmer if it wasn't for how I fell in love with flash games at the time. We have since built the things into the platform that you would otherwise have had to need and use Flash and Java for, but those standards are harder enough to use that we haven't seen a level of innovation and genuine like revolution in particular small games that we had with Flash back in the day. And it breaks my heart every time I think about it. These were all attempts to try and build something that wasn't part of web standards into the browser. And there's a reason all three aren't things we expect to use in web pages anymore. Building things on top of the web platform sucks because the web platform will always win in the end. And if you have something that kind of works in the browser that you're building it in, the chances that your abstraction will work properly in other browsers and other places is relatively low. I wouldn't be surprised if Flutter's crazy canvas hacks broke entirely in Safari. I wouldn't be surprised if Flash didn't work in Oh, wait. It didn't work in iOS because Steve Jobs refused to let it. And when it did work on Android, it did not work on Android. Let me tell you, as one of the Flash dieards, when I was in high school, I was so hyped for my Android phone to have flash. I tried two Flash games built for Android, and they were both so broken and not able to handle touch and like low latency, anything that I just stopped using flash games on my phone. Also, the they ate my battery. I you not. My Droid X's battery probably died in an hour of playing a flash game. Not even. So yeah, these allowed for us to move faster, but they also died because they showed us where the web should go. They were rough enough that they didn't stay along for the ride. So what about iOS and Android? We've had attempts here, too. We've had things like Cordova and Ionic, which were attempts to build basically a browser that has some native platform access. Not good. I've never used an app built on these technologies that I actually enjoyed using. We have obviously React Native. We had uh what was the other one that Microsoft acquired and slowly died? Zamarind. Yeah, Zamarind. Oh, Samarind. That was such a disaster. And once again, our friends over at Flutter. Time for one of my hotter takes here with the web. We have an open platform. Because the web is an open platform, the web is a platform with a lot of different options in how we consume it. Because the web has a lot of different options in how we consume it, guaranteeing that any one of these abstractions will work on the majority of web platforms is basically impossible. That's why these first two required you to install something native in order to handle it. And that's why Flutter isn't something anyone actually sincerely uses for the web. On mobile, we don't have one open standard with thousands of implementations. We have two platforms. They're closed, but they're limited. They're large, but they're limited. So theoretically, if we could build the right layer on top to have one piece that uses the right thing on iOS and the right thing on Android, which will be different by the way. The problem with web is everything has its implementation, but the implementation might behave differently across platforms giving you a hell to build on top of. With something like React Native, you can use the different specific native thing like you can use the native tab bar in iOS and you can use the native equivalent in Android that are two separate things that are two separate standards. It ends up being much more work overall, but once you've built that platform, you can actually consistently call native things from this abstraction much better than you can do through something like Flash. And this is unintuitive because the web has one standard, mobile has two. So wouldn't it be easier to build a platform on top of the one standard rather than the two? Turns out no because of the variety within this one standard. Because these two platforms are relatively locked in even though there's twice as many platforms, they are very consistent because there's just one implementation of each of them. If you put the effort in like Meta did with React Native, they have 300 plus engineers that have worked on React Native over the years and plenty more from other companies like Microsoft and Amazon. They've put in the effort to build this abstraction and the platforms themselves can't really change enough or differ to cause problems. The result is something genuinely impressive. With some of these options, you can actually use the whole native platform, which is really cool. Wish it was more of them. The platform is a very important thing to consider. Platform capabilities. There's a lot of cool you can do on a platform like iOS or Android. Things like the gyro, things like the camera, things like file system access, things like location access, all being native APIs is really cool. But everything I just listed also exists in the browser. Now, in the same way that the web led to new developer experience expectations, then things like React forced the native world with iOS and Swift UI to catch up to make better developer experience. Native platforms building these awesome capabilities and integrations into their platforms has resulted in the web having to catch up as well. That said, the native platforms tend to be first. Native tends to have new like device capabilities first. things like camera access, like file system, Bluetooth BS, wearables, all of the crazy things that get announced. Like basically what I'm saying here is when a new iOS release comes out, those features are only accessible to native app devs, generally speaking. There are exceptions here and there, but if Apple adds an awesome new feature to iOS, the web is lucky if it ever gets it. Usually doesn't, but it'd be cool if it did. There's also a problem with the web platform in that it kind of competes with iOS and Android because they're trying to get you to build native apps on their platforms so they can make their 30% cut, which we'll talk a lot about later. Because of that, Apple and Google are disincentivized from making the web platform really good. As such, web platform on mobile has lots of catches. Apple often restricts PWA. They have done so many things to destroy PWA over the years. I'm surprised they actually shipped notifications to it. It seemed like they never would. I think it works now. I haven't checked in a while, but I remember when they announced that that would be happening. If anybody chat can confirm, do PWAs on iOS have notifications now? Like, is that real? And have any of you actually used it and seen it work? Okay, chat says yes. Awesome. It's a pain in the ass, but yes. Yes, they do. Okay, that's cool. So, LSPW implementation is garbage. It is getting more features, but it's still very, very far from where we need it to be. Like, native stuff is sketchy at best. So, if you're trying to like access Bluetooth things, it can work, but as soon as you go to a different tab or leave the app, who knows what's going to happen. Backgrounding is basically not happening. If you need to do anything in the background, good luck. Have fun. If you want to even something like full screen GHF, like seriously, Apple has made it so hard to do proper full screen in the web on mobile. If you're not rendering a video player, good luck getting your full screen working and hiding the like tab bar and all of that in Safari. I think they announced that it's coming in some future Safari version. Good luck. Have fun. If you've seen how good that open an app button works at the top of a page, you know how good Apple's attempts at making a more app-like experience in the web are going to be. It's an absolute disaster. Yeah. So, the combination of Apple's incentive and Google's as well to keep you from here is very real. Even if the web itself and like the official web standards committees introduce more and more of these APIs, the likelihood that Apple gives you access to them ever is low. And even if they do, it's coming years later at best. Apparently PWAs can now finally hide the tab bar. Awesome. But can they be performant? As Jamon just said, very important. Performance is still an issue on web, especially if you get into 60 fps animations and especially gesture following animations. Yep. Apple does not give you the full GPU and CPU power of your device through the web browser. You cannot run your CPU at full throttle via a web page on your phone right now because Apple doesn't want all sorts of crappy tracking and ads and on a news site when you're trying to just read a page quickly to destroy your phone's battery. I get why they want that. I get why they're pushing for it. But the thing is that they don't want the web platform to be an application platform. Apple wants the web to be for browsing and apps to be for experiencing. They don't want an in between. their incentives are fundamentally misaligned with what web standards committees are at. And because they control their platform so strictly, there isn't the flexibility that we would want. And it's on one hand, it's a big part of why iOS is so successful. It's why things like spyware and viruses, if like I'd make the argument that iOS was the first major computing platform that never had a massive spyware or like virus problem. Every other major platform has had a pretty significant issue at some or point or another in terms of consumerus stuff. The amount of crap I saw my dad have on his Android phone back in the day was horrifying to me. His Blackberry was somehow even worse. Windows, we all know how that went. Mac's never been a major comput platform. Linux guys, you didn't even get this far in the video. Your audio drivers aren't working. But for everyone else, iOS was actually groundbreaking in security in these ways and also had a much higher bar for experience than other platforms did too. Awesome. I get it. We need to lower the bar for developers who want to make good experiences in particular for them to share their experiences with others without having to go through so many hoops. If I make a bad app, maybe I can't put it out on the app store, but maybe I can send a link to my friend to try it and he can give me feedback on why it sucks and I can learn more and fix it. That loop just doesn't exist on mobile. You basically need a really good mobile dev next to you holding your hand in order to do it well. And your reward for all of that, Apple gets 30%. I don't want this to be just a video about Apple and Google's cuts on these platforms. I should have probably talked about this during the platform section, but it's an important thing to understand. On web, we have lots of ways to pay. It didn't used to be this way. Even back when like iOS first dropped and like the app store first came out, processing a credit card payment on the web was a challenge. When did App Store come out? App Store dropped 2008. Stripe came out 2011. We didn't have good, simple, reliable ways to process payments in our apps and on our websites, especially when the app store dropped. So, Apple taking a 30% cut matching what was expected from like game distribution made decent sense at the time. Since then, the bar has been shifted. Platforms like Xbox, PlayStation, Nintendo, Google, and Apple. Oh, and Steam. These platforms all take around 30% of your revenue. This might not sound too bad, but when you compare it to something like Epic Games Store, which is default 12%, I believe, but they'll also wave your Unreal Engine license cost, which is normally 3%. So it is often an effective 9% rate. That's a third as much. But then we look at something like Stripe. Stripe takes a much much smaller cut. If I just say it, you guys might not believe me. 2.9% plus 30 cents per successful charge for domestic cards. That's insanely low. That is hilariously low compared to these other options. There's an issue here, though. If you subtract the gamer brain rot from this list, you don't have other options here. You have to buy through one of these companies because if you don't, you can't sell an app or a game on those platforms. Epic is an option for how to buy games. There are other options on PC as well, which is why they have to be more competitive with their cut and also why they choose to. It's why they made this in the first place. Stripe is trying to be a general payment processing solution. So, their cut is way, way lower. To show how this affects people, I'm going to give an interesting example. I am currently live streaming on Twitch. I have a bunch of people who are subscribed to me on Twitch, and I appreciate each of them greatly. Subscriptions on Twitch don't work the same way that they do on a platform like YouTube. They are paid. You follow a follow on Twitch is the equivalent of a sub on YouTube. A sub on Twitch is the equivalent of a member on YouTube or joining a Patreon. My subs here are for the most part paying roughly five bucks a month. If you're an Amazon Prime subscriber, you get a free sub on Twitch every month. You can throw that to me. Support us a bit. It's really nice. Thank you for everyone who does. But everyone who's not using Prime is paying for their tier one subs around five bucks a month. Yes, a sub is free if you have Prime. It's a really nice thing and it does pay me money. So, why do I bring this up? For a long time, we didn't have subs on mobile. The Twitch subs split is an interesting thing. If a sub costs five bucks and I am not in a certain tier of creator on Twitch, this $5 gets split in half. 250 to me, 250 to Twitch. If you're a big enough creator, or if you've negotiated with Twitch, you can change this to a 7030 split. So, wait, I'm famous. Then the $5 gets split a little differently. 350 to me, 150 to Twitch. This might seem like a lot of money for Twitch to take. That's because it is. But also, Twitch was providing something really unique at the time, which is a way for viewers to directly contribute to the creator, which just wasn't really a thing at the moment, which made this a much more justifiable thing. YouTube came out and took 30% by default, so it's the bottom numbers, not the top ones. Patreon came out and it took like 5%. But they've increased that percentage over and over again since in really weird kind of toxic ways that I don't love. This is the split though. And I will defend Twitch taking this bottom number here. I won't defend the top one because the rates of fraud on Twitch are insane because you get a social reward if you subscribe a bunch on someone's channel. If you donate like 50 or 100, 500 subs to somebody, they're going to shout you out and it's going to be a whole moment. As such, it's a fun place to steal credit cards and use them to scam people on Twitch. And there's a lot of credit card fraud on Twitch. So, they need to increase the cut here a bit to handle as much of that fraud as they can because fraud is expensive. A chargeback on Stripe costs $15. It sucks that the fraud is a big enough problem that they need a decent buffer to handle it, but it's also the main source of income at Twitch. So, this number conflates between a bunch of different things. Regardless, it is what it is. Why am I talking about this here? Well, uh, what about mobile? Let's say I'm famous and mobile. We have the $5. So, 150 goes to Twitch, but Apple broke in here, too. 150 to bucks. If somebody was to donate $5 to the mobile app, Apple makes almost as much money as I did. That's pathetic. If I'm not in the good standing famous split tier here, 250 goes to Twitch, 150 goes to Apple, I'm left with a dollar, that's insane. And Twitch knew this was insane. So instead of doing it this way, they changed it. It's $6 to sub on Twitch. Twitch takes a lower cut. I think it's like 120 or so. Apple gets their two bucks or however much they take, their highway robbery. And then you get what's left. It's like 380 or so or I think it's 280 maybe. Yeah, 280ish. Yep. So, if you weren't famous, you didn't have the special split and you were getting subs on mobile, you'd make slightly more than you would on Twitch. Twitch, you get 250. Here you get 280. But I'm making 30 cents more. My viewers paying a dollar more. Twitch is getting fleeced. This is the same case on Android as well, by the way. This isn't specific to Apple. It's just insanity that they charge this much. Like, how crazy is it that Apple's cut here is so close to mine when they had nothing to do with you subbing to me on Twitch? Maybe, just maybe, you wouldn't have subbed if you didn't have the Apple Pay integration. But if you already have your credit card attached on the website, you can't use it on the mobile app. Apple will not let you default to your existing credit card that you've attached to your account because they make you use Apple Pay for digital transactions. You might be thinking now, wait, when I use Uber or Amazon, I can use my credit card number in those. You can because Apple has the most arbitrary distinction imaginable here. Services, real world specifically, no cut. Digital goods 30%. This is Apple's rule for how they split these cuts. If you are paying somebody to come clean your car, if you're paying for somebody to drive you around, if you're ordering something on Best Buy or Amazon and it's a physical good, they don't take any cut and you can still use Apple Pay, you can still use everything else. Apple just lets you do it. A company like Bank of America pays Apple 100 bucks a year for their dev license and that's it. An indie gamedev pays Apple 100 bucks for their dev license and 30% of all the revenue they have. So indie game developers are subsidizing Amazon and big banks on the app store. What the How did we get here? How is this okay? Companies like Amazon and Netflix have refused to play by these rules. By the way, Netflix fully pulled out and they will not let you sub on mobile. You can only sign in on mobile. You can't subscribe on it. You have to sub on web because they will not give Apple their 30%. They went to court multiple times because Apple tried to restrict them from doing this and they lost. Netflix can't tell you, by the way, in the app, you have to go to web because Apple will ban you from the app store if you tell people they can go to web for a better price. That's what happened to Epic, by the way. Insanity. So, when Amazon was ready to do a similar move where they were going to pull for Amazon books, like the Kindle store, and for Amazon Prime, specifically around Prime Video, they were going to pull out and not support paying for it on Apple at all. Apple made this new announcement, the Apple video partner program. Apple announced this thing that they did to give a better cut to certain companies doing video distribution through iOS because they were so scared of losing Prime Video after they lost Netflix. And the deal is they only take 15%. So you're left with 85 instead of 70. At the time it was just Prime Video, but now they've since they've updated it. There are more companies. For two years it was just Prime Video, though. They announced this as a way to keep Amazon from leaving. And now they support a bunch of these other giant companies. Notice that Netflix still isn't here. Yeah, it's rare I say something is objectively monopolistic This is objectively monopolistic What the Apple? It's not better on Android, by the way. But it's it's insane that they can just charge these numbers and draw these arbitrary lines and distinctions and get away with it the way they have. Absurdity. And to go back to Stripe, none of this is a problem. Hopefully, you see the problem here. Since Apple controls the only way you can pay in an app, they can make arbitrary rules and distinctions, favor some companies, over other companies, choose to subsidize big banks with indie game devs money. whatever they want to do, they can do it because these are the capabilities of the platform that they chose to implement and the restrictions of the platform that they chose to enforce. Personally, I think this should be illegal and they should get over in the courts. But that's just my take. So, with all of this said, we need to dive into the part that inspired me to make this video in the first place, and I'm sad Jam's not here for it. Hopefully, I'll do a responsible job covering this. Routing and navigation. This honestly could have been a video of its own, but it's a really important thing to understand in terms of how the experience on apps differs from the experience on web. I'm going to start with the simple one, which is web. Let's say I go to a website. I go to website.com. I'm onite.com. I see a link I'm interested in on the site. So, I click it. Now, I'm onite.com/about. Then, I realize I can sign in and I might get something different. So, I go to website.com/lo. I click the Google off button. When I click that, it will redirect me quickly to like google.com/off or something and then it will redirect me back to website.com/success or something. What's cool here is that you can edit this stack because what's happened here is we've created a stack. If I'm onite.com/success, maybe this just redirects me right back to the homepage.com. If I'm on website.com after going through all of this and I go back, I don't go to success, I might not even go to google.com. If you've set your browser history stack correctly, then I should be able to go from website.com, hit back, pop this off the stack, and end up on /lo again, hit back again, pop that off the stack, go to about, hit back, pop that off the stack, go to website.com. When you're navigating on the web, you're almost always navigating vertically where you're adding things to your stack of URLs you've been to. So when you hit the back button, it can send you back to the place you were before. The one thing we do have that I'm trying to showcase here with the login thing is in a given spot in this stack, you can swap out what is in that element, but it's not super common and it's usually just for something like a redirect or a temporary visit. You don't swap out where you're at in this stack unless you're doing that. A simple example here is GitHub profiles. If we go to github.comt3.gg. I'm going to switch browser so you can see the URL bar more easily. Here we see I'm on my GitHub profile. I can click repositories and you'll see it changed to question mark tab equals repositories and type equals source. But if I'm in this tab, I can change to other tabs too. I can go to projects. I can go to stars. And now when I go back, it navigates through the different tabs I've been to, as it should, as we would expect it to. I could replace my current location when I switch those tabs, but that would be a very unintuitive experience. Generally speaking, when a user clicks on something and they navigate, the expectation is they can go back from the place they just navigated to or from. Mobile is not so simple. There's one last piece I want to discuss, which is the structure of these URLs. If we go back here and we see where I'm at in GitHub, it's a little weird. They're using query params here. Most sites would do something more like this. If I did this /t3.gg/reos or slash projects or slashpackages because there's the top level page of /t3.gg and then there are routes that follow up from it. A really common workflow on the web and we've all hopefully seen pages like this. If I have a dashboard page, call this my dashboard. The dashboard has this top nav of the my dashboard header, but it also has this sidenav that has different content pieces that we can navigate to. Let's say it has uh overview, analytics, users, settings. So, we have all of these different places we can go within dashboard. So, by default, we're on slash dashboard. Slashboard has the header, the sidebar, and maybe some content here that's like welcome to your dashboard. So let's say I then click analytics. My expectation would be as a user of the web, believe it or not, I actually use browsers here and there, is that going to analytics would send us to /dashboard/analytics. And now a couple things change. Analytics gets highlighted because we're on this and the content of this page here becomes your analytics. And now we have, I don't know, some charts. Let's make it funny. users over time. Realistic dashboard for most of your guys apps. What's interesting with this way of doing URLs is we are stacking in a different dimension. We have the vertical stack of the history of the different pages that we've gone to, but we also have this horizontal stack that has a different role. As we go horizontal here, we have the dashboard, which is the core route we're on. It's what defines the topnav and the sidebar. But then we have slash analytics which controls the content of this main section here but also allows for slight changes to the section on the side here. The mental model is that slash dashboard has everything but the section here and then as we want to do more in this section we expand the URL. Chances are it's a little more complex. It's going to be more like dashboard idanalytics. when I click on different things here, when I go from analytics to users to settings, we're still adding to that vertical stack. So, I can go backwards and forwards and the browser behaves as expected. This is more how the page chooses what content to render. The navigation is how we choose the stack and where we're trying to go backwards and forwards to and from. I really want us to think about the two directions here. We have the vertical stack, which is the links we've went to. So, slashboard, or we'll say we go to the homepage first. So site.com/ Actually, I'll start at the bottom. It's a stack. So we go to site.com. Then we go from site.com to slashlo. This might send us through some crazy flow to do the o, but at the end, this is what's left on our stack. Then it redirects us to slashdashboard. I'm going to move to just the slash here because you get the point. Then I go to slashdashboard slash one for my specific app. Then I'll go to /dashboard one/ I don't know analytics. And now this is my stack. This is the vertical stack. This is me adding new links and places I've been to my navigation stack as I am navigating my site. There is a horizontal component here too though. The URL is getting longer and more info is being added to it as we navigate the site. Sometimes we just hard swap out this horizontal stack where it's slashboard is the first page dashboard one is giving it the data for our specific applan is now telling us which tab within our app we're in. The horizontal describes what we see. The vertical describes how we got there. So this direction is what we render and this direction is how we got here. Horizontal is our content. Vertical is the navigation history. This model is pretty cool. It is super standardized. We expect it to behave certain ways and for the most part websites behave well here. There are some interesting edge cases like uh here's a fun one. I go to if I go to some random photo that I posted. Uh here's me announcing 200k. You'll notice here in the background you can see the content of the page underneath because this is opened as a modal. But if we look at the URL, nothing here indicates that this is a modal URL. SL Theo status this ID photos one. If I hard navigate, we end up with an entirely different view because when we click the link, it opened it as a modal. When we load the link, it opens it as a page view. This is very interesting because it means the behavior when you click a link is different from the behavior when you go to the link. There's a lot of complexity here that I could go into, but it's also a relatively rare thing. It's cool they built this as a feature in Nex.js now, but it's not needed that often. We're going to choose to ignore this for the time being because of that unnecessary complexity. But that's about it for complexity. Navigating the web is when you have a single page app, so you're not loading new HTML for each of these URLs. You can do some interesting weird things. But for the most part, URL equals certain HTML. In the JavaScript world, the URL always might point to the same HTML file, but the JavaScript that loads will change the content of the page from that point forward. Generally speaking though, URL determines what HTML appears on the page. I think that all makes sense to you guys. So, what about mobile? We have to recognize some things that make mobile meaningfully different here. Thing one, mobile doesn't have URLs. You can build URI support into your apps. You can do things that are like URLs for your apps. By default, mobile apps have no concept of a URL. Usually, applications, in particular, the app platforms have a concept of a navigation stack. This navigation stack is its own method of rendering different views on mobile. And it behaves very differently from how the web one behaves. It might seem similar at first, but the deeper you go, the more different you start to realize it is. Let's use Twitter as the example. I almost want to screen share myself on the Twitter mobile app. So, if we show this on the stack right now, the current location, the place that we are at is the home. I'm going to visualize this slightly differently. I'm going to have this all just stack up. So, we have home view is the place that we currently are. It's actually probably something more like the um timeline view. I can go to other tabs on the bottom here. I can hit the search button and go to the search tab. If I drag sideways, it doesn't bring me back though. It brings me to my sidebar and my other accounts. If I go here though, so now I'm in my profile. Suddenly I can slide back. The reason is we added to the navigation stack. We added the profile view and this one has some metadata on it. This one knows that it's profile Theo because that's the profile I clicked on. So, we have this profile view now on the stack. Here's where things start to get interesting. If I hit a different tab within here, now watch what happens when I drag. I'm not going back to posts. I don't go from the posts profile view tab to the media profile view tab back to posts. I just go back to the home because the thing that happens with any spot in these navigation stacks is they have their own horizontal layer to them. So this profile view isn't really profile view, it's posts view on profile. And now we switched it to media view. This replaced posts view in this location in the stack. So certain navigations will add to the stack. If I click a post here, like I'll click this one where I hit 200K, that added to the stack again. So now I have single post view. And this post view has a profile indicator, but also has post ID because it needs that information to render this view. I can drag back to where I was before, which is the media tab. And now I can go back again to where I was before. But you can see now when you navigate apps, you're either adding vertically to the stack or horizontally as you navigate around. The difference here is when you navigate around, like if we're in using the dashboard example here, and you switch to the different sections, back will bring you to the one you were on previously. If I go to x.com/t3. and I navigate to a different tab and I go back in the browser. It brings me to the tab I was in before because it changed the URL. When I go to slashmedia, it's now/t3. Media. It's not navigating horizontally. It's always navigating vertically. Whenever you go to a link in the web, unless it's something automatically happening like a redirect, there's a very, very good chance that it's being added and appended to that vertical stack. On mobile, you have to make a decision about this. It's not a free thing where we all just do what the browser does. You have to think about this every time you're adding navigation features to your app. When I am in this post view where I'm looking at a post I made, should going to my profile go up the stack or should it go horizontal? If I switch the post I'm looking at, should it go up the stack or horizontal? Here, when you're in Twitter, going to a new post or a new instance of a thing always adds vertically. But if you're going to a different view of the thing you're in, it goes horizontal. So, if I go here and then I switch to replies or subs, you get this horizontal navigation, but it doesn't add to the stack. And this is all much more important than it might sound because all of these things are handled with everything from gestures like the sliding with two fingers left and right to handle it to the native back button being handled properly, but most importantly, accessibility. Some people don't use their fingers to navigate their phones. They have custom commands and layers in order to do this. So if you don't handle navigation the way the platform expects, their way of navigating might just not work entirely. And this is a huge difference in how we have to think about our apps. It's the reason we can't just take a web page that has links that work a certain way and just dump it into an app and expect it to work. And when I use an app that's based on web technologies, or worse, an app that's built by web devs that don't understand mobile, they will just port every single URL over to a specific view on the phone. And now you're just constantly building these massive navigation stacks. When Blue Sky first came out, it was really guilty of this. If I was like navigating through a profile and like looking at some information, I'd have to slide back like 20 times to get where I started. Most navigation flows in something like Twitter, you only have to go down a few layers. And there's a lot of navigation you can do where you're not going down layers at all. Like when I go from my home feed to search, that's not a navigation that's changing my stack vertically. The way to think of this with iOS is very much like actual layers. When I open this post, it is now open on top. And when you watch me go back, you see that you see that this layer on top is being pushed out of the way or back on. And when I go to my profile, you see a new layer sliding on top of that. This isn't something they built in with their custom engine for the Twitter app. This is just part of how the Twitter app works because it's part of how the native platform works. These stacks of vertical navigations are essential to how you experience mobile apps. And if you just shove URLs in and handle navigation the same way the web does, your app's going to feel really jank. And this is super common. When mobile devs complain about React Native, this is one of the things they're complaining about the most. Not because React Native makes you work the way the web works, but because a lot of React Native devs are web devs. And those web devs are used to using this way of navigation with URLs. And as such, they force it into mobile apps where they don't fit. It's a very, very interesting dynamic, and it's one I think about far more than I probably should. But this idea of I now have my profile open on top of my post, which is open on top of my timeline. And now when I navigate within here, I'm still in that layer on top. I'm just moving around within it. Hopefully, this helps give you an idea of just how different these methods of navigation are. I'm tired of web devs pretending that mobile doesn't have any differences. They can just port their website over and it's fine. And I'm tired of mobile devs acting like their way of navigation is obviously superior and there's no benefit of the web way. Which is why when you hit that little open button on random web pages to try and open it from the web page in the app, it never works. There's a fundamental incompatibility between how navigation works on web and how navigation works on mobile. And I don't think we can just solve this with tooling. These are decisions that need to be made with care as we're building our apps. And for better or worse, using React Native often results in devs that don't care as much because the devs that care the most are the ones who are the most obsessed with their platform. Those are the ones who are building using the native tools and technologies. This goes the other way too though. If you are using Flutter on web, there's a good chance you don't care about the web platform. And even if Flutter for web was theoretically really good, most Flutter for web websites are going to be bad simply because the people using it are the ones who don't like or don't understand the web technology, React Native devs are less likely to know how apps work and how we should use them. Mobile devs are less likely to know how the web works and how we should navigate it. And you can tell when you're using a web app made by a mobile dev or when you're using a mobile app made by a webdev is very apparent. This is also the big reason why I'm not a fan of the tools that try to be a web and mobile app project at the same time because the navigation is so fundamentally different that if you make something that works on both it's optimal for neither. And this isn't the most complex code in your apps. Like the code that handles the navigation stack for Twitter, it's probably a few hundred maybe a few thousand lines. It's not even 1% of the code in those applications. It's not that complex. But as soon as you make one app platform or but as soon as you make a single project that compiles to web and mobile, you have to have one routing paradigm. And as soon as you have that one routing paradigm, you've made everything less optimal. Yeah, I think I've covered everything I wanted to here. What a journey. I did not think this video would end up being this long, and I appreciate you greatly for sticking through with it. Hopefully, you got something out of this. Hopefully, you have a better mental model for thinking about the differences between mobile and web. And maybe, just maybe, we'll see a future where shipping for mobile is as easy as shipping for web is today. But until then, I'm mostly going to be sticking to web. Believe me, I want a T3 chat app more than anybody, but uh we're going to have to do a lot of work to get there. Until next time, keep




## Stop using new tech (seriously) - 20240709
I regularly see the sentiment that people are scared of falling behind they feel like they have to keep up with all the new stuff and if they just want to watch this Channel or talk with their friends about attacker manage to get a good job in the future that they have to keep up with everything as it changes they used to have a term for this I called it the dino effect because back in the day when I say back in the day I mean like fiveish years ago the original creator of node yes nodejs decided he wanted to rethink node and made a thing called Dino you might not have heard of it in fact statistically a lot of you haven't but that's fine Dino was expected to take off and at the time I saw so many messages so many tweets so much concern that if somebody learned node instead of Dino they were going to fall behind that's what I want to talk about today that feeling that if you don't get to something fast enough you're going to fall behind you're going to be at a disadvantage and you're not going to find success because you got to things too late the reason I want to talk about this is I think it's a myth I could just say that but you're not going to listen so instead I'm going to show you some examples where to all of us it's kind of obvious imagine you're a developer in the early 2000s you love games and you're really into building the best possible things and keeping an eye on the future you have aspirations to be really successful in The Game Dev World more and more of these powerful phones are coming out that are able to play games so you decide that's the future and let's be real it was obvious once the Blackberry started happening the future was obviously going to be mobile we never knew how far it would go but especially nowadays there are way more smartphone users than there are computer users it's like 4 to one which is crazy so if you had started building computer games at that time you'd be at a disadvantage obviously ly right because there's all these people who are doing mobile that are going to reach this massive audience but you're scared of losing out so instead you go all in on mobile and you go all in on the future the Nokia engage which shipped in 2003 if you were building apps for this you were building janky Java applets and you could do cool things with them like I found footage of Tony Hawk running on an engage if you went in real hard real early cuz you knew mobile was the future you have this Insight you are positive the future isn't building computer games the future is building mobile games so you become the leading expert in Java applets for future phones now let's step a few years into the future not even that far the original iPhone came out just a few years later the App Store came out a few months after that when that happens and there is this new platform that just a year or two afterwards can run Unreal Engine who's better off is the better off person the one who was building these Java outlets for engage who went all in on mobile because they wanted to be first to mobile or is the person who's better off the one who just stuck with building computer games learned the normal tools and then when the mobile Revolution happened they got in a couple years later the point I'm trying to make is the person who's better off in this situation so obviously so is the one who waited for the market to exist instead of trying to preempt it with an awesome new thing because they were just so excited about it that said if you're excited go all in following your excitement will rarely lead you down the wrong path for too long because you'll know when you're going down it because you care a lot about the thing and you can bounce back but if you're chasing after this idea of getting to something because you're scared of falling behind you're going to be making a whole lot of end gaug apps and that's only going to slow you down a person who built and became the expert in these crappy Java outlets for these terrible feature phones is fundamentally worse off than someone who ignored it until 5 years even after the iPhone came out not only is being early not necessarily helpful it actually seems like it can hurt you because if you go all in on those end gauge apps and now the iPhone happens you're going to be one of the people saying why would I ever do that I can do everything I can do there on my end gauge totally fine why would I ever want the iPhone Apple's shipping something that is behind and you're inability to get out of the mindset because of the sunk cost the years you spent in and How Deeply you understand the thing that you were building for it doesn't matter that you were building for the wrong thing you're stuck there and this is so insanely common I see so many people jumping on a new language a new framework or new technology new platform AI because they're scared of falling behind all of the things I am great at all the things I am known for I got good at well after the peak of getting into it I only started writing react code in 2018 and now I'm one of the more prominent react influencers and regularly talk with the react team I only started doing YouTube in 2022 and now I'm however big I am on here by the way hit that sub button doesn't cost you anything I just did these things when I wanted to not because I was scared of falling behind and the result ended up being I got to Leap Frog my peers because my peers were too obsessed with the mindset they formed before the market understood the problem if you're getting into something like AI right now if you're getting into a new language right now if you're getting into a new framework right now you're getting into the endau it might end up being the next big thing but it also might not be and you really don't get anything from being there so early so maybe just maybe sit it out a little bit focus on building things you're actually proud of and stay away from the hype trains until there's one that you're genuinely hyped about that's all I got to say on this one till next time peace nerds




## Streamers - 20240218





## Stripe Just Made An Unexpected Acquisition - 20240730
stripe acquired lemon squeezy you've heard of one of those companies you probably haven't heard of this one you might have regardless this is a really important acquisition because it fundamentally changes the way that stripe might operate in the future if you want to learn more about how to add payments to your services and generally speaking how to be compliant as a business you might not be a normal Dev but you'll fit in great here because these are things I think about far far far too often and I have a lot to say on this one CU this is not your usual Aqua hire type thing this is a fundamental change in how stripe is thinking about their business and I'm excited to talk about it so first for those who don't know we should probably quickly disclose what stripe is stripe is how most people set up payments for their services nowadays it is the easiest and arguably the cheapest way to add the ability for a customer to put in a credit card and make a purchase be it on mobile web wherever it's very very very popular like how much money is spent through stripe yearly payments made through stripe totaled 1 trillion last year a lot of money moves through stripe and their pricing is very fair standard price is 2.9% plus 30 very cheap relatively speaking for everything that they handle especially they have a breakdown of all these other things too but stripes the easiest way to set it up and also one of the cheapest that are standard for a reason there is a catch with stripe though stripe does not help you with anything to do for the most part with taxes and there's a lot of places especially in the EU that have really strict tax laws specifically those places require you to incorporate a business in their country in order to be compliant with taxes as soon as people in that country are buying things from you technically speaking a lot of businesses using stripe are violating tax laws in the EU because they haven't went out of their way to go incorporate in all of these places there are whole catish industries that are focused on just doing this for you a is one of the big companies for helping manage that compliance stuff Tax jar was another one of them and tax jar got bought by stripe in order to theoretically in the future make it easier to deal with those types of tax things as a stripe User it's been a bit and we haven't seen much yet but hopefully in the future stripe will make it easier to deal with that but there was a different strategy as I was saying if you use stripe people are using Stripes infra but they're paying you it's still your business that is on the credit card statement that is on the bank statement all of those things are still going through your business so you are still legally speaking the merchant this is where lemon squeezy gets interesting because lemon squeezy isn't helping you be the merchant they're an alternative to stripe that is The Merchant of record So when you buy something on a service that's using lemon squeezy the bank statement the credit card invoice all of those things technically are lemon squeezy so they are the business they are the ones that have to be Incorporated all over the world they're the ones have to deal with the tax compliance they deal with all of that it would be similar to like me on YouTube right now hi y'all on YouTube A lot of people are watching my content and I'm making ad revenue from all over the world if I was the one receiving that revenue and doing those deals with those advertisers I would have to be incorporated in all the places that content's being served but since I'm effectively a contractor for YouTube where I am being paid by YouTube the company as a result of business that I drove as a Creator on YouTube I don't have to do all of those things because YouTube has done them and they just pay me lemon squeezy is like that for your business so if you want to be able to charge anywhere in the world and not have to deal with tax compliance stuff they've already dealt with it all so instead your customer pays them and then they forward the right percentage of that money to you obviously this means they take much higher fees so instead of the 3% and 30 cents they do 5% and 50 they have to do this because funny enough they're actually using stripe under the hood they've done all of the compliance stuff with stripe properly and now they're letting us hook into it this is a somewhat common pattern for businesses another one that does this is deal deal is a payroll solution for paying your employees if I this a an actual problem I had I'm based in California in San Francisco I had a person I wanted to hire who is based out of Illinois in order for me to hire them I had to incorporate in Illinois so I could employ them as a remote employee even though that they never went to an office they fully worked online I had to formally incorporate my business in a state that we're not in so one employee could work for my business that sucks deal is an employer of record so when I hire somebody I pay them through deal they're not technically my employee they're not on my books as somebody that I hired they're not legally an employee of my business I am Contracting them through deal which is the company they actually work for employer of record has been a really common thing for businesses for a while now because it makes life much easier in terms of dealing with all of these employment laws they also make things like Health Care significantly easier because they figured out in every state I had to spend like two months figuring out how to do Healthcare at ping it sucked it's so hard to do these things and if I could just pay a higher fee never have to worry about compliance again and they take care of it for me for a lot of business that a lot of medium sizes or smaller this is an obvious win once you have a certain number of employees if you have like 10 or more employees in every state probably makes sense to start doing things yourself but up until that point services like deal are the easiest way to employ people outside of the state outside of the country even super convenient I'm already seeing people in chat saying that they got job applications rejected because they haven't done the paperwork to hire from their state even though it was remote yep it sucks different states have different rules and you might accidentally break them I haven't had an employee from Illinois in a while and I'm still paying weird taxes and breakup fees as I'm trying to De like divest my incorporation there because in the future if I was to hire somebody there I'd do it through deal so I have no reason to have this incorporation in Illinois but I'm stuck with it because of how all these laws work it sucks so deal is killing it they're a very successful business and that's for a reason a lot of people benefit from not dealing with these problems what's interesting about lemon squeezy is they're the same thing for your payment processing and that makes them a fascinating business that I've been paying close attention to and planned on adopting for future products but now you're questioning wait I thought stripe solution was this tax company that's going to incorporate in all these places for you it is is but stripe wants to have multiple strategies they don't want to account for only one path to success stripe's goal here isn't you have to incorporate in all these places to be a successful stripe customer they want to make sure all different sizes of companies can benefit from stripe and lemon squeezy helps a lot of companies that want to sell globally but not incorporate globally makes life easier for them I want to read the full story though cuz I'm curious how they explain this and you know what I'll throw this with twitch chat so that y'all can chat with me when I do it yeah paddle also a similar business I will say paddle been a lot less responsive versus lemon squeezy I know again biased but I had a lot of issues trying to get a hold of paddle lemon squeezy activated my account within 10 minutes of me tweeting about them so different worlds also I'm an influencer I have reach on Twitter but the responsiveness matters a lot to me anyways stripe acquires lemon squeezy woohoo we're excited and humbled to announce the strip is acquired lemon squeezy in 2020 when the world gave us lemons we decided to make lemonade we imagined a world where selling digital products would be as simple as opening a lemonade stand we dreamed of a platform that would take the pain out of selling globally tax headaches fraud prevention handling chargebacks license key management and file delivery among other things all are complicated we believed it should be simple we believed it should be easy peasy as Founders we've spent a decade selling digital products and so we created a solution that met our own needs but we started with what started as an idea to solve the day-to-day problems with selling digital products evolved into something much bigger 9 months after our public launch in 2021 we surpassed $1 million in revenue and never looked back that's not n that's not a million dollar of money going in and out paying to people that's the money that they're making that's their revenue that's crazy that's on 5% that means they were having $20 million or more going through their infrastructure pretty nuts we worked tirelessly through growing pains while also celebrating major Milestones along the way each step reinforced that we were on to something remarkable along the way we received many acquisition offers and series a term sheets from investors they didn't do a series a is what I think this means to be fair the revenue was nuts so they didn't really have to especially at their team size but very interesting that they didn't rush to raise more money but despite the allert of these opportunities we knew that what we had to build was truly special and needed the right partner to take it to the next level we're proud to say that we found the partner in stripe and we've gone from idea to acquisition in under 3 years Perfect Blend lemon squeezy and stripe stripe continues to set the bar in the payment industry with its worldclass developer experience API standards and dedication to the beauty and craft is no secret that we like many have always admired stripe the number of companies that have based their whole developer experience around stripe is so common now that it used to massively bump developer tools quality because stripe had the best Dev tools for so long now if you're copying stripe you're actually a little bit behind because the industry has since made more progress but that's because they were the standard they set the bar for developer experience because they knew it didn't matter which credit card companies were negotiating with which businesses because the dev has to implement it and if the dev says no you we're using stripe you're kind of stuck and that was their Strat and that's why they won like that's why strip beat every other business they were the only ones that went all in on devs when we began discussing a potential acquisition it was immediately apparent that our values and Mission were perfectly aligned lemon squeezy and Stripes share a deep love for our customers and a commitment to making selling effortless this is the big part the effortless selling thing like stripe is easy to set up but it's not easy to be compliant and to be fair a lot of people just ignore the email they get once or twice a week saying hey we're stripe you need to make sure you're Incorporated here in order to follow the law theoretically the fees are low enough that most businesses just ignore it but yeah they're technically breaking the law now imagine combining everything you love about lemon squeezy and stripe we believe it's a match that's made in heaven lemon squeezy is now packed with 1,000% more juice this is why I'm excited I want merchants of record to be a good solution that you can pick as an alternative to incorporate opting all over the world and lemon squeezy now has way more resources to do that with that's exciting to me that's why I'm hyped getting the strip piggy bank backing this is huge looking ahead the next chapter lemon squeezy has been processing payments on stripe since our Inception this acquisition marks the culmination of years of effort and celebrates our close partnership with stripe and our shared sense of purpose Mission Remains the Same makes selling digital products easy peasy that's also if you couldn't tell by the name lemon squeezy it's the p on easy peasy lemon squeezy very clever name with strip's help we'll continue to improve The Merchant of record offering bolstering billing support building an even more intuitive customer experience and more we're incredibly excited about the possibilities that lie ahead with the squeezy and striped teams joining forces Future's bright so what do this mean for current customers you'll continue to get the same fantastic product and reliability you've come to trust we'll be in touch as we work through the process with any updates as they come along I don't expect them to actually shut down the product it makes too much sense for them they might Rebrand it but yeah over the years our community has grown exponentially the growth is a testament to the trust and support you've shown us and we couldn't be more grateful awesome good stuff this is a really solid update a little a little heavy on the we're perfectly aligned thing but beyond that very appropriate address the things people will be concerned about it is exciting I think this has the potential to be a really good acquisition so let me know what you guys think and how you're currently processing payments I'm sure plenty of you are using stripe and most of you probably are breaking tax laws right now inadvertently as such let me know and until next time peace nerds




## Stripe made a crypto currency_ (Founders, pay attention) - 20250511
Yes, you read the title right. Stripe is releasing their own stablecoin cryptocurrency. And not just that, believe it or not, they actually introduced a new programming language in here too based on TypeScript. A new AI model that while interesting, isn't going to be the focus, I promise, as well as a bunch of other really useful things about payment processing. It's rare I can so confidently say a video is essential viewing for startup people. But like if you're in any way managing the billing product that your company has if you have any control over the Stripe links being sent to users, you want to watch this one. And for everybody else, if you're just curious what it looks like to manage money at scale, there's going to be a lot of fun to cover here. I've been through it with Stripe probably more than most. I published all of the things I think about Stripe and how to work around them properly as a developer building web applications. Not only did they take that feedback incredibly well, they actually brought me in to give a presentation to the company, like the whole company, the CEO interviewed my CTO and me. It was awesome. And I got so much positive feedback from them. They've been working really hard to improve the platform. And even then, even with all this insidefo, I had no idea any of this was going on. There's a little bit I did, but a lot that I didn't. There is so much to go into here, including the new recommended way I would tell you to use Stripe. If you want to hear about all of this, stick around. But Stripe isn't paying me. Well, technically Stripe deposits into one of my bank accounts for my business, but that's not their money. It's other people's money. And we need more of that before we can go. So, quick word from today's sponsor, then we'll dive right in. We're in kind of unprecedented times right now. We have giant multi-billion dollar companies using apps built by three people that just started a few days ago. It's nuts. And there's a lot of things you have to set up in order to do this right. One of those is off. And you might be getting along pretty well rolling it yourself. But the moment you need to set it up with an enterprise, you're going to be worried about terms you've never heard before. If you're tired of dealing with SAML and Octa and all these other crazy things that you don't even know how to pronounce, you really need to check out today's sponsor, Work OS. These guys get it. Both the things we need as fast builders, but also the things these businesses need in order to integrate. Instead of weeks going back and forth with the IT team trying to configure identity providers correctly, you can just send them a link to an admin portal. Then they can go through, click whatever provider they're using for their layers internally and get it all set up on their side with no effort. Do you know how much work this saves? If you do, you're already signing up. And if you don't, I envy you. You will soon if your business is successful. We're dealing with this right now for T3 Chat and I want to die. The best part is you don't even need to send them that onboarding link by hand. It's built into their API. You can just write a little bit of code and automatically email it to them and they can set it all up themselves. Yes, this is fully hands-off programmatic enterprise onboarding. Sam Lambert's one of the pickiest people I know. He's the CEO of Planet Skill and he's a really good friend. For him to be this kind about something says a lot about it. And Planet Skills had an incredible time with Work OS and they're a business that's done a lot of things in the enterprise world and they're far from the only one. I swear every time I go to this list I'm blown away with yet another company that was recently added. Cart is how I manage my cap table for my business. They're as businessy as they get and they're in this list alongside Verscell, Cursor, OpenAI, Foul, Perplexity, Plaid, and so many more. I've actually chatted about O with GMA from Verscell quite a bit, too. He said one of his biggest regrets was rolling their own off, and they he just wishes they used work OS earlier. And honestly, I'm starting to feel that, too. I feel like I should bring up one last thing. Yes, 1 million users for free. So if you're trying to blit scale and get your stuff to enterprise, you need work OS. Check them out today at soyv.link/workos. Let's take a look. This was a bit of a crazy Stripe sessions. If you're not familiar, Stripe sessions is the event that Stripe hosts every year to talk about all the things they're doing. This Stripe session was a little interesting because all of their top tier sponsors are competitors. I thought that was fascinating. That's how confident Stripe is in their position in the market. But there is more nuance here than I am implying. We will be getting there soon. And apparently a product manager replied, I didn't even see this. So, Amazon Pay and CLA are businesses they work with, but Freedom Pay is a competitor. And CLA wasn't a business that they worked with until very recently. That's one of the reveals here, but yeah, still kind of wild. Regardless, I appreciate the clarification. Anyways, they talk about the model stuff. The TLDDR on their AI model is that it's for detecting fraud. Great. Detecting fraud is a unsolved problem. The more they can help there, the better. I'm happy to give them a bigger percentage if it means we don't get as many chargebacks. But there's a lot of other stuff going on here that we need to talk about. The one I am most excited for by far is managed payments. Managed payments is their version of which stands for merchant of record. If you're not familiar with merchant of record, I'm going to do my best job to break it down quick. The example that I think will make more sense is EO, which is employer of record. If I am your employer and I am based out of California, but you're based out of a different state like, I don't know, Idaho, I cannot employ you at my California company. Technically speaking, I need to have a business arm incorporated in your state in order to employ you. I don't need to have an office there. I don't need to have presence there. I just need to have a corporation or corporate entity in that state in order to employ you. When we're talking about different states within the United States, it's annoying but doable. When I had more employees at T3, Chad and Ping, we had these little like companies that we had incorporated in these different states in order to employ our employees across the country. Annoying, but absolutely doable. I ended up discovering this concept of an employer of record cuz a certain YC company was actually really cool. This is deal. They're in some drama right now. I'm not interested in talking about it just yet, but deal is employer of record as a service. So what deal has done is they went to every state in the US and every country that you would reasonably want to employ somebody in as a startup in the United States and incorporated in all of those places. So now if I want to employ somebody, I don't have to incorporate in all the places that those employees might be. Instead, technically speaking, they're employed by deal. So in a traditional employee employer relationship, if I have like the company and I have my little employees all over wherever and each of these employees was in a different state, then my company would have to have a mini company for each of those states and I am effectively the owner of this business, which is the one that the employee works for. The thing that is different with employer of record is that instead of me having all of those small companies myself, we have a separate company in between that handles all of that for us. And now all of the employees technically work for deal instead. So when I was using Deal for employing some of our remote employees, they would get a paycheck from Deal. Their healthare benefits came from Deal. all of the things that they would expect for being an employee like their dashboard that keeps track of their payments and their like salary. When I give them a raise, it goes through that deal is technically their employer and I am contracting deal to let that person do work for me. This seems chaotic, but it makes life significantly easier in particular with compliance across many different countries. We had an employee out of Canada for a bit and this was so much easier than dealing with all the hoops to jump through in order to have a business in Canada. So why are we talking about this? Let's go back to merchant of record. I'm going to keep this diagram a bit but all of these are instead of employees but now as customers. So you're a customer and you want to subscribe to T3 chat. So you go to our website, you click the stripe checkout link. Now you are on our payment processing through Stripe and when you make the payment you'll get a little thing in your credit card invoicing. So like your credit card statement is going to have all the purchases you made. You might have YouTube premium 15 bucks but it will say like Google or whatever like that. You might have PayPal Twitch for six bucks and you'll get all of these for T3 chat. will get I think it'll be T3 tools T3 chat sub $5 because mer because all Stripe is doing is processing the payment. They take your credit card number. They make sure with the issuer that you are authorized to make a transaction like this and then they put it in an account that Stripe is managing to pay out to me. But the payment processing is all Stripe is doing. They are using that credit card to transact and get money out of it. But that transaction is still owned by me, the company. Which means if there are any tax issues or compliance issues or regulations and all of that that's all my problem. If I go over a threshold for taxes in Europe, that is my problem to figure out. If I want to put the right sales tax for every different state and every different country that somebody could subscribe from into my product, that's my problem because I am the merchant. You are buying from me. The money is going to me. Do you see where we're going? Merchant of record is very similar to what I just described with deal and employer of record. This is Stripe M. So now instead of your payment going straight to me, it goes to the Stripe M. Stripe has already incorporated in pretty much every country and state you would need to. They've already figured out tax compliance in all of those places. The difference that a customer will see is instead of just saying T3 tools, it's going to look more like the PayPal one. It's going to say Stripe and then specify more info because the payment isn't going directly to us. The payment is now going to Stripe instead. Which means with that all of the compliance, all of the liability, all of the fighting around chargebacks, all of the pain that you have to deal with that we have spent way too much time fighting for T3 Chat and for all the stuff that I've built effectively goes away. This doesn't make it easier to write the code or anything. This benefits much more once you've shipped the product, you have people paying for it, and you're fighting everything from disputes to scams to weird tax compliance laws in countries you don't even know how to pronounce the names of. Totally not speaking from experience here. I'm I'm in hell right now, guys. Okay, I really wanted this to exist. There was one other popular merchant of record that's worth talking about here. Lemon Squeezy was a startup focused on providing a good like dashboard SDK and all the pieces you need to make a payment go through in your app. They were built on top of Stripe, but they were a merchant of record as well. Lemon Squeezy got acquired by Stripe and the CEO Jr. has been working incredibly hard to make this product happen. It's been his sole focus effectively since the acquisition occurred and they did it. The Stripe merchant of record that they refer to as managed payments is now in a private preview. They will manage global tax, fraud prevention, disputes, fulfillment, and even support for transactions. So, if a customer had their credit card get stolen and money was spent on your service, they don't have to contact your support anymore. They can go straight to Stripe. A merchant of record is the legal entity responsible for facilitating the sale of products to a customer and for following applicable local laws and regulations. When you act as your own merchant of record, you're responsible for registering for and remitting tax to local authorities, accepting payments, handling fraud and disputes, order fulfillment, and customer support for transactions. There is now a product that does all of this for you. If you look at the like gap here, we have the manage payments versus other Stripe products. Merchant of record Stripe versus your business, global tax management, they'll do for you versus you have to set up the tax compliance yourself. You can only use the checkout page versus all the other fun things that they offer. But honestly, checkout page is really nice. It's what we use for everything. Subscriptions all handled. Fraud handled for you. Disputes for you. Order management and support handled for you. You get the idea. They'll also be offering the ability to migrate from Lemon Squeezy to manage payments, which is really nice for people who are still on Lemon Squeezy. I've been hearing some like like I hate to talk any on JR because he's been so awesome to work with, but I have heard a lot of customers that were on Lemon Squeezy that are suffering because the product's been slowly falling apart. Manage payments is absolutely meant to kill lemon squeezy. So, it's nice that they're offering a path out for all the people who are still using it. That's like a huge win. That's the managed payments part. If you're a startup and you can get into this private preview, I would recommend it cuz you don't want to deal with these things later. So, the sooner you can have it managed, the less stress you'll have to feel. I am considering making the move myself. Now for the fun things that a lot of you are still watching for. Stripe's programming language as well as their cryptocurrency. Stripe scripts is a really interesting new piece of what they announced. Program your business logic directly in Stripe with scripts. They say it's TypeScript, but they then immediately call out it's a subset of TypeScript. It is a custom language that they built. It maintains a lot of TypeScript features, but it has key differences, including a more restrictive set of allowed operations, which means they probably built their own runtime, too. Using a subset of TypeScript, you can write and submit custom logic in Stripe. With scripts, you can define your own logic for specific Stripe objects, tailor your Stripe account for your specific business needs and extend Stripe beyond its standard functionality. An example they give is you can use a custom discount logic chunk on a new coupon so that different customers can have the coupon apply in different ways. Functions can take in two things. Things that are defined by the author as well as things that are defined by Stripe. So here is an example they give where we have a script configuration has max discount amount and a discount percentage. The SDK provides built-in types that you can use as part of your configuration definition. So here's a type they have where max discount has to be a positive amount and discount percent has to be a percent. Now you can define something that's this is a 50% off but it's only 50% off up to a certain amount of money. You can define this type and then implement the logic for a coupon. So now I can make a 50% off coupon that will only go up to a certain amount of money with custom logic which wasn't particularly viable before. This is a huge win that would have been previously like you would have implemented your own coupon logic in your JavaScript in your application probably on the server side in order to create different coupons dynamically to apply for these different cases. And it would be theoretically possible for somebody to grab the coupon code and apply it to a different invoice instead and screw you over if you don't put the right assertions everywhere. This is a huge win to be able to define that in logic that lives on Stripe's side so you can give a coupon code to whoever and know that you won't lose a ton of money in the process. That's just one example they have here, too. And here's how you would use that script. This is an example of a 20% off coupon up to $100. And we are calling the Stripe API. We are identifying the script that we want this to use in its creation of the coupon. We are configuring it to have up to $100 off which 10,000 which is $100. USD is the amount and then a discount percent of 20. These are all variables that we have passed in our calling of the Stripe API. You can even see what this looks like in other languages like node JavaScript. They always call it node because they want you running it on client. They want to be clear there. The stripe coupon create duration name script. identify the script and then pass it configuration values. So, we're checking if the currency is the same between what we passed and what the checkout is about to be. We then run the discount code. So, we take the discount percentage. We now have a discount amount value and then the actual amount is set to be the minimum between the amount value and the max. And then we return it. Awesome. That's actually really convenient. I see how we will be using this already. This will be super nice. I need to stop dancing around. We need to talk about Stripe crypto. This might initially look like it's just for them to let you take crypto payments, but this goes much deeper. This goes significantly deeper because of the stable coin bit and also because of Bridge, which is a company that Stripe owns. I don't know if they acquired them or if they incubated and started them, but the point here is to make money transfer easier regardless of the currency the money started in. because it's quite annoying to have to transition money between USD, euros, and all the other currencies your users might have money in. Multicurrency management is a is not a fun problem at all. And it's really awesome to see Stripe taking it seriously, and it's honestly one of the few applications of crypto I've seen that I vibe with like at all. I see a lot of potential to using stable coins specifically for this. If you're not familiar with what stable coins are, the point is that it's not a traditional crypto where the value goes up and down randomly based on how the market feels about it. This isn't Ethereum or Bitcoin where your money will vanish and then reappear in a day. But it is still crypto where when you send it, you can't charge it back, which obviously helps with a lot of things. And it also means that there are very low, if any, transaction fees at all, especially when you're like trying to send money over borders. If I want to send you $100 and you're in a different region, we have to eat a lot of different things as I send you that money. But if I send you a hundred stable coins, you can choose how you convert that on your end yourself. The way that Stripe has these implemented is, as I mentioned before, through Bridge, the stable coins in your account on Stripe are going to be a new crypto called USDB, which is issued by Bridge. It's the USD bridge stable coin. USDB is an infrastructure stable coin issued by bridge. It's always backed one to one by the equivalent value of US dollars held in cash and shortduration money market funds at BlackRock. So when you have money in USDB, there are real dollars that mirror that money. That is a very nice thing. So you don't have to worry about the crypto going to zero. And since this is backed by Stripe, not by a crypto company, the coin is much less likely to go to zero. This is an actual useful implementation of crypto for business like account management unlike anything I've seen before. Especially when you realize that they're doing this at the same time as their new tooling around multicurrency management. The new money management stuff lets you hold money in different currencies. If all of this money is just stable coins under the hood, switching it between the different currencies and between different accounts is way easier. Especially when you combine that with their new credit card product. Yes, you can now get a credit card through Stripe that spends your USDC balance. Sorry, uh USDB balance. And when you use that card, you don't have to deposit the money from Stripe to your bank account. Credit for this idea goes to an interesting place, Levels.io, who called out the guy I mentioned before, JR, cuz he was talking about how excited he was to build product for startups at Stripe. And as somebody who's talked to him a ton, I can confirm he's very much dedicated to doing this. It's the thing he wants to do and he's loving it. Levelville said that he wants to pay his bills with Stripe. He has a bunch of money sitting in Stripe at any given time. And instead of having to do the back and forth going from Stripe to your bank to wherever else you want to pay, which is a lot of back and forth, if he can just use a credit card that has a Stripe balance attached to it and can spend from that directly, he never needs to move the money out or he can move it when it hits certain thresholds, it makes life significantly easier when you constantly have money in Stripe. It just means less money moving around constantly. Like it's so silly that for something like us with T3 chat, you pay us, the money goes to Stripe, we have it automatically move the money from Stripe to our bank account, which takes 3 to 15 days. Then I send that same money back to Stripe, but this time for anthropic or OpenAI in order to pay for the credits for all the AI stuff that you as the user were using that put the money in Stripe. There's just so many back and forths that don't need to happen. If it could just stay in Stripe and I use the card to pay another company that's using Stripe as well, the money is just transferring between different Stripe accounts, that makes life much easier. This is a really cool win. And I could very much see us using Stripe's cards to zero transaction fees, pass money between different Stripe accounts with different products that we are using for our business. I've also seen a lot of issues that people like Levelvels have had trying to withdraw from Stripe to banks in a lot of different countries. So, if he could use the card to spend money from Stripe without having to fight them to open up a bank account in Portugal or Estonia and get the money deposited there, this will make his life significantly easier. And for foreign founders in particular, this seems like a very, very big win, especially alongside the merchant of record stuff. So, as crazy as it sounds, I am actually in favor of Stripe introducing cryptocurrencies, not because I want people to pay me in crypto, but because it's a very useful primitive for them to have implemented behind the scenes as the way money is being passed around between things. It makes a ton of sense. Most of y'all won't care about this part, but those who do, this is huge. They're adding CLA to Stripe Link. CLA is a really big payment processing group, especially for European payments. CLA is incredibly popular in Europe and right now it's one of the most common requests we get for T3 chat. People want to pay using CLA because it's a thing they are used to using in those regions. They also have a buy now pay later like credit thing too, but that's not what I care about with CLA. I care about is that Europeans seem to like paying for things with CLA and having support for that in Stripe is pretty cool. I think you can do it without the loan stuff. It seems like from how people are asking for the product that they don't want it just for the flexible payment thing. They want it because it's their payment processor of choice. But there's also Zola and a few others too. Regardless, anything that makes it easier for European customers to pay for stuff on our services is a good win. So, I'm excited about that one. I don't think I have anything else to say here on Stripe. I am curious how you guys feel about this video though, more than usual, because I don't normally go this deep on entirely business implementation detail stuff. Did you make it to the end? Did you enjoy what I had to say? Are you curious about the other interesting payment stuff going on, both with Polar and their partnership with Better Off or with Clerk adding in payments as part of their product? There's a lot going on in the payment world right now, which is crazy because it's been pretty stationary for a while. Now things are shaking up quickly and I'm excited that payments are finally going to start improving once again.




## Sudo on Windows_ (Spoiler It's actually good) - 20240212
Microsoft is bringing linux's pseudo command to Windows 11 yes Microsoft pseudo is a thing there's even a GitHub Microsoft / pseudo what this is insane I know the whole Microsoft Embraces Linux thing's been a meme for a while this is the coolest I've ever seen it go so what exactly is pseudo on Linux what's going on here take a look what the Verge has to say and then I want to dig into the repo B it it's interesting Windows 11 will soon have a built-in pseudo command designed for developers pseudo which is short for super user do is widely used on Unix based operating systems like Linux and Mac OS to run programs with higher security privileges or as another user it's useful for developers wanting to test scripts for example it's very useful all my videos are recorded with OBS on a PC I'm on Windows more often than I'm on Mac and as such I have strong feelings about all of this the windows terminal which was somewhat recently added to Windows has been a really nice addition it started as a different project you would install through the App Store and more and more it has become core to the developer experience on Windows and now it's the default terminal in Windows 11 one of the many things it did better is that the bounce a bunch of common commands that we expect from real operating systems in Windows like CD yes CD Works in Windows terminal they just bound it for you this is necessary because Windows is its own special snowflake in Unix land every other operating system follows the same basic set of unix commands Windows just doesn't and this is why so many things don't have good Windows support in the developer world because the core itself is different and as Microsoft tries to make it so developers can actually enjoy using Windows they've done crazy things like Windows subsystem for Linux Windows terminal and now pseudo this was introduced in the most recent windows Insider Edition to let developers run elevated tools directly from an unelevated console session there's a quote from an official product manager at Microsoft specifying that it's an ergonomic and familiar solution for users who want to elevate a command without having to first open a new elevated console if you've ever followed a tutorial for making some fix or change on Windows they almost always start with right click on Powershell and click run as admin which is just hilarious that in order to even do admin level stuff you have to open the terminal a different way this is a Windows ISM and as silly as pseudo might sound this is a huge huge win for Windows developers again they specify it's being tested as part of the latest Canary you also have to go enable it in settings but once it's enabled you're able to use this the same way you would use it in Linux where you put it in front of a command and now that can be run in an elevated permission set the REO is interesting one of my favorite details is the about which is literally just it's pseudo comma for Windows I'm going to hit the star button because they only have 300 now I have a feeling this video is going to push it up pretty far the link will be in the description if you want to give pseudo a star here you can report issues and file feature requests we're in the process of open sourcing the code so stay tuned for more updates they have actually been making some progress with this it's not a lot but they have the initial command here and they're working on getting all the crazy Powershell chaos necessary for this to work in the repo it's cool to see how committed they are to open sourcing work like this although I will say something like this is so deeply intertwined with Windows and the terminal that it being its own project it's going to be interesting architecture wise but I'll be keeping an eye on it for sure they also talk about the relationship with pseudo on Linux a little more in detail here which is important because this could cause confusion let's read what they have to say Obviously the everything about permissions the word the shouldn't be here I can file a nonis PR I'm not going to do that though obviously everything about permissions and the command line experience is different between Windows and Linux this project is not a fork or a port of the Linux Pudo project instead pseudo for Windows is a Windows specific implementation of the pseudo concept as the two are entirely different applications you'll find that certain elements of the Linux pseudo experience are not present in pseudo for Windows and vice versa scripts and documents that are written for Linux Pudo may not be able to be used directly with pseudo for Windows without some modification this is another good call it because a lot of the other efforts they've done have made it so I could copy commands for like I don't know FFM Peg which I can use fine in every operating system but windows and with certain changes to how paths are resolved suddenly the same FFM P commands work in Windows which is really nice I don't think there are many times where I want to elevate the Privileges of a command I'm running and the command is the same on Windows as it is on Linux and Mac I can't think as I sit here of pseudo commands that would be identical in Linux and windows but I can think of scenarios that are very similar where I want to elevate the one command that I'm running which is again what's so exciting about this change no longer will you have to rightclick run as admin to install chocy now you just add pseudo in front this is something that Windows arguably needed even more than other operating systems and I'm excited to see the work they're putting into it they've even put up documentation which is exciting to see to have this as early as it is but it's mostly just how you enable it and a little bit of like what it does and how it works interesting that one of the options is to force a new window so when you run pseudo it will run the command itself in a different window so that it's still following the traditional Windows rules of elevated terminals are their own separate instance they also have an interesting option of input closed where it will run that background window but you can't make any changes to it which is useful if you want to be sure the user doesn't do anything when the process is running and obviously they have a more traditional inline which is normal mode which just runs the same way suseo does in other places where it stays in the window in the terminal in the instance you're in now and just elevates this one command that you run but as they call out here there are associated security risks which is a good call out because Windows does not have the best security and this is likely to be bit more problematic for Windows users than it was for other operating systems but I'm genuinely curious to see how this goes it's nice to see microsof putting so much effort into the developer experience on Windows it's been a while since I could honestly recommend working in Windows is a developer but these efforts are really helping push things forward shout out to all the devs working on this I'm excited to see pseudo in the future and yeah that's pseudo on windows till next time peace nerds




## Surprise $104,500 Bill_ Breaking Down A BIG Mistake - 20240301
NFI just sent me $104,000 Bill for a simple static site I didn't want to talk about this today I'll be honest I came a bunch during my stream but it is going around enough and there's enough not great info that I wanted to jump on it and try and steer the conversation in a slightly better Direction before anyone says it yes I'm sponsored by versel this video is certainly not sponsored they probably don't even want me to make it but I want to jump in on this conversation to highlight both the things these companies are doing right and also the things they're not because this problem is certainly not exclusive to netlify so first want to talk about this problem then I want to give context based on other similar problems that I've seen with these newer startups and their pricing models causing people to be hit with really big unexpected bills and then the different solutions that I've seen all of these different companies employing so uh let's dive in this poor Dev received an email last weekend saying that they had $104,500 Bill overdue at first they assumed it was just some fishing scheme or some stuff but that was not the case as they show in the image here they had insane bandwidth usage that ended up being worth a total of $114,000 yeah not good they were not hyped and they thought okay maybe I got dos attacked since netlify charges $55 per 100 gigs for the exceeding bandwidth the peak day had this amount which was 60.7 terabytes of traffic in a day I mean it's not impossible why attack a simple static site like mine the site has been on netfi for 4 years and is always okay with the free tier the monthly bandwidth never exceeded even 10 gigs and has only 200 daily visitors the D attack was focused on a file on their site yes it's partly their fault because they put a 3.4 Meg size sound file on their site rather than using a third party platform like SoundCloud but still this doesn't invalidate the point of having protection against such attacks and limiting the spending ah we got a lot more to dig into here the big failure here that I want to call out like without question the biggest failure in this post by a lot by the company of NFI is the point tier when they initially got in touch with this developer the default offer was to charge 20% but but since the amount was so large they offered to only charge 5% so you only have to spend $5,000 because somebody abused his website that's absurd I want to be very clear a $5,000 bill on a hobby project out of nowhere because somebody found a big file on your site is incredibly unacceptable on every single level and this should not happen obviously the $100,000 bill shouldn't happen but the fact that supports offer was to take this thing that failed this developer and offer them a discount instead of jumping on the issue that's horrifying thankfully netfi understood that and they've responded accordingly but one step at a time this feels more like a scam to me why do serverless platforms like NFI and versell not have DOS protection or at least a spend limit they should have alerted me if the spending skyrocketed I checked my inbox and spam folder and found nothing the only email is extra usage package purchased for bandwidth feels like they deliberately not support these features so they can cash grab in situations like this this okay I want to break this one down sentence by sentence CU I have so many feelings about so much of this this feels like a scam I understand being in that position when suddenly you get a bill that's like five digits more than you were expecting you have every right and reason to feel like this is a scam and you should and I understand this company does not intend to charge you this much and you know that now but I understand the feeling why do serverless platforms like netlify and verell not have DOS protection or at least a spend limit they do have DOS protection they have a bunch of it if they didn't this would happen every day this happened to me once about a year and a half maybe two years ago now I actually have my video pulled up here when I got dos for two weeks while on versel they did a similar thing where they targeted the biggest thing they could find which was like a I think it was like a half megabyte JS bundle and they just fetched it constantly on whatever Network they were using and racked up a bill for us that would have been like H hundred something dollars if I recall and we told Vell they used the opportunity to improve their servers and handle these types of attacks better because they had a bunch of data from new IP addresses that never attacked before and use that to improve their filters so the traffic that we were getting hit with went down really quickly as a result of their mitigation and we didn't pay anything some amount of this is because I'm close with verel for sure but I promise you if I had tweeted I would have gotten the same exact treatment here you can choose to believe me or not I understand but I'm going to go into some things forell has absolutely up as we keep going on so call me by us now listen for a bit longer please they should have alerted me if the spending skyrocketed yes they should have them not doing this is a massive failure I get emails like every day from versel of random things that we broke the limits of I probably have the settings set bad or just over notify I will say that having a signal that goes off too often is often just as bad as having no signal at all because it trains you to ignore the signal so you don't do anything when it happens so it's a hard balance to find but clearly netfi is not there yet even for selles not in my opinion they said they check their inbox and spam and found nothing yeah if this is the case if they actually didn't get any notifications as these bandwidth tiers were being hit and expanded over yeah anytime billing goes up more than 20% you should get a notification of it so that's absurd the only email is extra usage package purchased for bandwidth yeah no it this part alone it doesn't matter if he actually Abus the service himself or whatever caused that Bill if he was not notified that his bill was going up that much that is enough of a reason for it to be wiped for the response to this to be a discount even if everything was on the customer's fault unacceptable but that's not what happened here it wasn't his fault the platform should have done more which again we will talk more about as we go on there are three different ways or here where netlify individual failures enough of a reason for them to cover the cost the support flub is enough of a reason not notifying them is enough of a reason and dsing being a problem that they're the ones who should be solving is probably the most important reason we'll go through them all as we keep going this is the part I disagree with the most though it feels like they deliberately do not support these features so they can cash grab in situations like this I need you guys to understand a huge important thing they don't want this they don't want to charge individual developers a lot of money as much as $100,000 feels like to one of us in a hobby project CU that's like most if not more than our salary that's nothing compared to the multi-million dollar contracts they're signing with big businesses and if those big businesses have employees that are hearing about this company being a scam and doing all these weird cash grab things they're not going to be able to sign those contracts the Optics hit and the potential loss of deals these companies have to deal with as a result of these instances the company would pay the difference tfold to never deal with it I promise you that if they had the option to flick a switch and just handle these problems no matter what the cost is they would do it but it's not that simple the goal of these companies isn't to refuse spend limits so that you accidentally spend way too much money they don't want to build a service where your site goes down they don't want to accidentally build a thing where the default use case is your thing goes down if it does Well because most websites start with no traffic and then have a bunch of traffic most of the biggest websites in the world start that way even when you deploy a new instance of Twitter when you're updating the web app it gets no traffic and then it gets a lot of traffic you can't just automate that we're already going down tangents I need to just finish this post as he said the attack was focused on the sound file which again be very careful about putting large files in platforms and providers like versel and cloudflare and netlify Cloud you're using R2 is fine but the bandwidth cost can get bad quick on versell and netlify it's way worse they hate to self-plug but this is why we built upload thing because not everything should be part of your GitHub repo and that includes this file that said if you put it in your GitHub repo and repo's open source you can just link to the GitHub asset and not even have it deployed through versel but every asset that goes on versel or netlify is optimized on a CDN globally distributed to have the best possible performance when somebody fetches it because usually the thing you're putting up there is it an MP3 It's a CSS file or an SVG or something that you want to have it load fast more than you want it to load cheap because if you put your site in just a random GitHub bucket or you put it on something like S3 is going to be way slower than if you put it on cloud flare or verell but a 3.4 Meg MP3 file is not something you should put there because a little bit of latency to fetch that files not a big thing to eat they don't communicate these things well enough and if you make these types of mistakes you get screwed for it which is incredibly unfair and both platforms need to work on this I noells doing some big overhauls with how the pricing for bandwidth goes hopefully that will be officially announced soon I'm sure that netfi is working on it too just from the responses I've seen here but as you guys see here this post went super viral 8,000 up votes on the web dev subreddit is nuts it also went viral on hn there was a really good response from the CEO of netfi on hn our support team has reached out to the user from the thread to let them know they're not going to get charged for this it's currently our policy to not shut down free sites during traffic spikes that don't match attack patterns but instead for giving any bills for legitimate mistakes after the fact apologies that this didn't come through in our initial support reply yeah the initial support reply was such a big failure but it's not one that only they have made here's where I'm going to rail on versel a little bit this is one that I'm particularly sensitive about because and I haven't shared this story before because I haven't had a good reason to poor Mike Ramirez actually shared this story in my Discord when it first happened the issue he had was a massive bill because he had a recursive call in an astro app he was building where the Astro server was generating a page by calling the Astro back into apis and it kept calling itself recursively it ended up racking up an insane bill when he hit up support they said no this is compute you ran you're eating that and he came to my to vent a bit about it I said wait what the tried to raise this with versel I didn't put enough effort in I just gave them a very very brief heads up which was not enough because it didn't get resolved he then made what I would consider the fair decision of going public with the awful experience he had had here that happened almost a year ago now but it was not good verell had said it was a runaway process or uncaught exceptions in their code which caused subsequent failures which cost $500 an hour he had no idea the bill was continuously growing and it could have easily cost 30k in a few days if he hadn't jumped on it as quick as he did it was just a test project too it wasn't facing the public or anything this was really really bad like really really bad I was incredibly upset with how this was handled thankfully they have more than addressed it I honestly think this issue that Mike experienced even though it wasn't a Dos or external abuse it was an honest mistake that he made using the platform verel really change their policy around these things at this time they refunded the overages obviously and they identifi the root cause which we as mentioned before this page was calling itself they have since made changes on versel such that you can't just recursively call the same endpoint from a given endpoint it detects one that happens and it throws it's so aggressive with that that it's actually caused us some problems with upload thing when we do that intentionally that's another long aside but they went out of their way to make this way harder to happen and it only could happen because of what they describe here is the classic plain swiss cheese failure where it's not that any of these things are entirely full of holes it's that every layer had enough holes that if they all happened to align then a hole goes through the whole cheese yeah that's that's what happened here and they fully acknowledged it guo wrote this great reply they jumped on it he actually if I I recall hopped on his Zoom with poor Mike after all of this to chat and make sure it was going to be handled well they took this one very seriously and I've seen a pretty significant change since then we saw this change when yet another Michael seems like a curse name for weird bills had an issue where somebody spammed his stripe account causing 56,000 fake accounts that immediately bounced and never completed their transactions to be created and when that happened stripe was calling web hooks to his versel service which caused his versel service Bill to spike an absurd amount yeah his versel bill hit $23,000 the reason for that is a little more subtle than you would think to go back to the dsing point even if forell had the best dsing protection in the entire world that would not have fixed anything here because versel cannot block stripe web hooks if there's any code path in which versell can block stripe web hooks that will instantaneously cause many services to fail when they go viral at which point people trying to build things that will explode and go viral will never touch versell again if the defaults on versell prevent Stripe from calling versell or the defaults from versell prevent new developers had a project blow up from having their site work on versell and obviously netfi is the same here too those Services don't work for the users they are targeting if you can't go from zero users to a million users then it's not the right solution as such no level of DS protection is going to prevent the problem here the problem here is a little bit more subtle if I had to split the blame on this one I would say it's like 80% stripe 10 to 15% the dev and 5 to 10% verell but very much stripe they should not allow for this type of abuse on their platform and then forwarding that on to other platforms that's absurd I've even had issues with stripe not giving you good enough notifications about when a payment isn't completed or is failed early and all these types of things things again GMO CEO of versel jumps in following up here we've concluded our investigation tldr will be issuing a full refund for the acccess compute charges as we've determined a path forward for you and others to not fall into this problem for more context in the broader Community the endpoint attackers targeted cause a large number of transactions on the stripe side this alone wasn't a big problem except that stripe then fired a huge number of web hooks that later got retried many times the endpoint responding to those web hooks host on verell side was not rate limited and timed out so a couple important things here rate limiting the stripe end point is probably not a great idea because if you have an actual Spike of actual customers you want to be able to actually handle that as such just adding a rate limit or a dsing to that endpoint would not be good it would be very bad for many businesses they will not do that they should not do that they have not done that the issue here was more subtle as I had mentioned before the events that were hitting this endpoint were being spammed a ton being retried a ton and most importantly as they call out the biggest part of why his particular bill was so big was that he wasn't handling the event types that were being sent so he was handling new purchase events and probably cancellation events but incomplete purchase events he wasn't handling and instead of returning a response he just quietly let it fail which if you don't return a response when you're processing a request in a Lambda it hangs until it dies and because of that he was hitting the 60c Timeout on every single one of those requests that would then get thrown into a retry loop on the stripe side which would caused the chaos that he experienced that sucks and as GMA calls out here it's important to have a shared responsibility model over the resources that they manage our first action when we hear reports like these in escalations and socials is to evaluate whether we did everything possible on our end to prevent the situation that's why it took us some time to reply and I appreciate your patience in this case we've identified two opportunities for the platform Improvement if her cell had implemented these before your Runway usage would have been vastly mitigated for this reason we decided to proceed with a refund of the excess compute charges we recommend looking into our spend manage tools for further peace of mind as well as tuning your max duration down significantly to reduce the impact of Upstream timeouts again 60sec timeouts not good and please make sure all of your end points respond with something you don't want to have an endpoint just hanging for a long time respond to your requests please regardless they refunded it stripe absolutely up here and needs to jump on it like badly badly badly this type of fraud should not be something they even kind of enable they should be the ones adding these tools in front but I honestly don't think there's much that versel could have done here other than better notifications and handling those default timeouts better like that's that's about it here that said I saw so many dumb takes around this one like this is why everything should be hosted on a single server or this is why it's a bad idea to use services like this just do everything on cloud flare and AWS yourself well the bad news is in this case this caused the site to potentially cost too much we got his money back in other cases this would have taken the site down an attacker like this would prevent other users from using the service at all it's the same case with spend limits if you say I won't spend more than $100 a month what happens to the user on the $ 101st the site doesn't load for them and that's not an acceptable compromise I use versell and netlify in companies like this because I don't want my to go down I'm paying the money to keep it from going down and I don't want it to go down cuz it hit a certain threshold I want to know that my spend went up a bunch and adjust accordingly this one came from a poll that Fred from AST ran which was on a frontend hosting platform like versell or NFI or Cloud floor Pages who is ultimately responsible for malicious and dos traffic this question by itself is really complex because in the past we could just rely on like Cloud flares dos DNS protection layer when you throw Cloud flare on top of things like netlify or versell you're not running two dns's and it's to be frank a show it just doesn't work great I personally went through hell a few years ago trying to use cloudflare as a Dos DNS layer in front of a versell app specifically it would serve a cached HTML page that was pointing to a JavaScript file that no longer existed on my versell deployment and since cloudflare had only cached the HTML not the JavaScript it would fail to resolve and you get an empty white page not good at all genuinely disappointing that it was as unreliable as it was that's a rant for another day the reason I bring it up is you can't really put something in front of these platforms to prevent this type of dodsing you can prevent things like someone spamming your endpoint by implementing rate limiters and you should do that check out the up stash rate limiter I love it I use it for all of my stuff but you can't use that at a high enough level to prevent the types of attacks we're talking about here what happened with the instance earlier that we were talking about with the netlify Bell is somebody was downloading a file maliciously as a developer you can't really do much about that on these platforms with Cloud flare you can Implement that in front to prevent those types of things but you can't really implement it in front of ver seller netlify as such I would make the argument these responsibilities fall on the platforms specifically because these platforms are promising an easy experience for developers to adopt grow and scale and if their promise isn't protecting them in the same way something like Cloud flare would ideally even better than something like Cloud flare would they're failing that promise and that's why I'm so heated because I personally do expect these platforms to do this including my sponsor versel who is probably going to be upset with me for this video but I also think they're doing a good job here so we'll see how that goes I wanted to highlight Matt's reply here because I actually think it was phenomenal and I have personally had nothing but great experiences with Matt he's clearly a very smart dude that gets this industry better than almost anyone and he's also been incredibly kind to me so there are my biases when a spike in traffic can be automatically and absolutely classified as malicious our platform is set up to block this if it's a new pattern will add it to the automated rules and wave the charges this is the experience I've had with forel too this is how it tends to work with hosting platforms It's Tricky when the traffic in question is not clearly malicious but could be an indication of a customer being successful in this case any automatic blocks could mean ruining a launch making a viral campaign go bad or disappointing fans of an emerging artist Etc very very true like this is going to be a silly example but I think you'll understand Kendrick Lamar the famous rapper had a team that used nextjs and versell to launch his new album announcement that could very easily have had an MP3 embedded in it and they would not want that to go down no matter what they would happily spend the amount of money that these customers were seeing in their bills but then they would probably negotiate if it was actually being done maliciously or incorrectly how does this company detect the between these types of things it's not easy in this case I'm almost certain that this was a Dos attack I think he says otherwise as we go down which we will get to it's still hard to detect and this is not an easy thing to get right I think he should have gotten a warning that he was uploading an asset that was more than a Meg that said hey maybe you should put this somewhere else but just locking out the site when the traffic levels hit a certain point that's not a solution as Matt says here for free users My Philosophy has always been that we can never go back and fix it if we ruin your moment of Glory but we can always cancel cancel an invoice or refund a charge our support team does their best to identify these situations in advance of a user even being made aware that they happened this is huge I really like the framing of we can never go back and fix it if we ruin your moment of Glory but we can always cancel an invoice or refund a charge think about how much worse it would be if a customer was going viral and netfi cut them off because they were concerned their spend got too high that's something you can't fix that's you lost the moment as a result of a bad default that they had set they don't do that because they can just refund you if things go wrong their support failed to make the correct identification and recognition in this instance but they can fix it and these companies building in a way where you can fix things when they go wrong instead of they break incredibly badly when they go wrong is is the right decision and I don't like that the response to this is we should go back to building in ways where your site goes down if it gets too much traffic we should go back to building in ways where any individual with a big enough botn net or wallet can make your site go off the internet I don't think we should live that way and I think these services are offering something awesome in the way they prevent that and how they handle these things when they go wrong does it suck that you have to go viral on Reddit to get a response from NFI yes but I don't think you'll have to the next time due to how big this one went I know you don't have to right now at forsell due to how big the last few went too in this specific case the user posted about a large bill they received we've been clear that while it was an incredibly rare situation we should have done better a bill L should never have left our system automatically and our support team should not have treated this as a business user we also should not have speculated that this was a Dos attack since in this case the traffic does match organic traffic from a region with lots of old devices no I I I hate because I agree with so much of this someone might have a bot net of old phones in some random region I sincerely doubt that's what happened here the traffic might seem like organic patterns but that's by design of the attacker this is way too suspicious and I know that the poster actually called this out too um I'm still curious who orchestrated the attack and they said they're still researching the in incident their support hasn't come back to me with the IP information I asked yet so I posted on Twitter to ask the CEO really appreciate your quick action of the matter talk to the CL we agree that that's find out the attacker behind this I've sent our support email thread no response uh full list of source IPS hitting the MP3 file a few dozen samples of the request headers any indication that would make it appear that it's a crawl connection durations number of simultaneous requests egress charts over time which po serve the request if they have localized DNS I really don't want to be negative towards this Dev that experienced this because I that's not my intent here at all when something this big happens and especially when it gets this much attention it's easy to get fully invested and obsessed and like it's the only thing you're thinking about I can't even imagine that not happening especially if this thing just blew up as quickly as it did here I hate to say this but like just chill it's fine the info you need to help figure this out if it exists will come but I still don't know the IP addresses or the patterns of the people who've been dsing me on and off for 3 years now this happens I can't imagine the person who had the $27,000 bill has any information on who is attacking him on stripe I promise you that poor Michael Aubrey has no idea who is harassing him on stripe and I've seen a few other people be hit with this since sometimes malicious people I believe in this case it's just one person or a small group of people they love trolling Tech Twitter and Reddit and YouTube and all these things and just going at their services to see if they can destroy them I'm lucky that I've handled a lot of these attacks I've seen others like poor ink drop that did not survive the same attacks and ended up going down for some amount of time it sucks we don't get to know much about it because usually it's computers and devices that have been hacked by some bad actor but that's kind of just the reality of these situations and it sucks and it feels awful and you're going to sit there hating and being frustrated with this company constantly but I need you to understand it's really honestly not that big of a deal your bill is being refunded it sucks it's going to feel like the biggest and worst thing that ever happened but you survived it it's over and anyone else who has an experience like this same deal take a step back chill out for a minute your Bill's been refunded and if not it probably almost certainly will be and if it doesn't get refunded go public and it probably will when these things happen it's a failure of the company and a mistake and a malicious thing and these companies don't want the Optics hit of these things they absolutely don't that's why they jump on it as hard as they do it's okay and I'm upset that these one-off instances become the reason to not use a service even though these oneoff instances both get harder and harder to have happen in the first place every single time one happens and also get refunded every single time if anything I would make the argument that issues like this Dev experienced are the reason to use platforms like netlify and versel because when a massive bill you didn't expect gets hit you get refunded as a longtime AWS customer I can tell you that's not usually the case ah this one frustrated me one more quick thing I just saw when I was checking G Mo's tweets coming soon more ways to protect your versell workloads from malicious traffic they're doing this the work is being put in to not just get netfi and versel to the same point that cloud Flare's dos protection is but to get it to the point where we as devs don't have to worry about this at all anymore there might even be a future where we don't have to set up rate limiters through something like up stash and their awesome JS package and instead we can just rely on versell to do it they're not 100% nothing is 100% in this chaotic world of hackers and cat and mouse games destroying our services that's not the point the point is to make reasonable decisions knowing the reasonable outcomes of them and to not worry about something that won't actually cost you money because was a mistake if the reason you're not using net lefi or versell is because of these stories of runaway bills you're not making a good decision if your reason for not using these Services is because the multiplier of how much they cost is greater enough than the thing that you want to do or plan to do otherwise and your costs are going to be high enough that the additional time spent to use that thing is worth it to you and the possibility of getting dos is something you have a plan for mitigation strategy for and the ability to deal with the costs of yeah don't use for sell or netlify but if any of those things aren't true the solu Solutions even in these scenarios still seem to prove themselves as the best way to go that's all I have to say about this one I'm sorry for getting frustrated I just I get annoyed because these companies did make mistakes and rather than talk about the mistakes they made like netfi absolutely destroying things on the support side they did not handle support well here at all and the CEO had to jump in and handle it himself or on verell side the fact that timeouts weren't being handled aggressively enough or notifying the user well enough and as a result they had a workload in flows that would have racked up like $800 which isn't good that ended up being like 30 grand which is way worse that ended up being money versell had to pay so I'm sure they're focused on fixing that but again none of these things ended up costing the customer money they cost them stress waking up to a scary looking number but every time that happens it gets handled and that's why I wanted to make this video that's why I took the time to yell at my computer for half an hour after streaming for 6 hours that's why I'm making a video I didn't want to make because I'm genuinely frustrated with how these things are being used there are lots of good to not use verell this isn't one of them and there are lots of good reasons to not use NFI and the way Matt handled this is certainly not one either their supports a good reason but not this peace nerds




## Svelte 5 Is Like React, But Better - 20241023
spelt 5 is finally here I've been waiting forever and it is so exciting to see this launch happen that said as excited as I am I'm probably not the best person to cover spelt stuff because realistically speaking I don't build or ship spelt I do know somebody who is just as excited and probably knows a good bit more so I'm going to let them come in real quick sup nerds almost destroyed the desk but we're okay we're good we're good okay that will work oh my God it's so funny seeing myself in literally anything other than a black T-shirt for those of you who don't know who I am I'm Ben I make Theo's thumbnails I do a ton of work in spel kit and I run my own channel I'm super deep in the spel world and since unfortunately Theo is too deep in the soy react World I'm going to be taking you through the new spel 5 release spel 5 is alive after almost 18 months of development comprising thousands of commits from dozens of contributors spel 5 is finally stable it's the most significant release in the Project's history spel 5 was a ground up rewrite your apps will be faster smaller and more reliable you'll be able to write more consistent in idiomatic code for newcomers as a framework there's less stuff to learn this is absolutely true the old meme that went around with spelt Aon was that kind of like uh the react State example and then the just spelled example of let count equal zero and then it works and it just magically was there but with the new Rune system it's a little bit less magical but it makes way more sense if you're coming from like a View background or a react background my hot take is that the new runes feel just like hooks but a lot nicer so despite all that spelt is almost completely backwards compatible with spelt 4 for the majority of users the initial upgrade will be completely seamless so literally all you have to do is just bump the versions and what's really nice and I'm sure we'll get into this soon but the all of the old code from spelt 4 so if you have a big spel 4 project it will all work in spel 5 the migration story is very much at your own pace and as someone who has taken a big spel 4 project and brought it over to spel 5 in the last few months it is a very painless process so what is spelt spel is a framework for building user interfaces on the web it uses a compiler to convert declarative component code based on HTML CSS and JS into tightly optimized JS the keyword there is compiler which allows it to do a lot of really cool stuff that something like react just can't quite do so because the compiler shifts a lot of the work out of the browser and into npm run build spelt apps are small and fast but beyond that spelt is designed to be an enjoyable and intuitive way to build apps it prioritizes getting stuff done and that it absolutely does the team behind felt also maintains spel kit and application framework that handles routing data loading and server side rendering and all the Gory details that go into building modern websites and apps I'm definitely biased but I think that spelit is one of the if not possibly the best meta Frameworks right now the data loading system is super clean and nice the form actions feel fantastic it is a really really great meta framework that does not take too long to pick up it's very quick to kind of get going on so what has changed and why for one thing we've overhauled our website you can read more about that here I'm not going to go through this blog post in this video but it is a really really good one the omn site the spelt website was initially broken up into spelt dodev and then kit. spelt dodev and then learn. s.dev they' completely overhauled this to just be one unified experience they've redesigned it updated the documentation restyled it it looks amazing feels amazing uh Rich Harris's post on this is great definitely go read that after this video and then as for spell itself we'll cover the why first and this is very important we're not fans of change for change's sake in fact spelt has changed less than any of the major Frameworks between 2019 when we launched spel 3 and now which is an eon in the front end development nextjs and people really lik spelt 3 and four it routinely tops developer surveys of satisfaction so when we make big changes we don't make them lightly with more and more people building more and bigger applications with spelt the limitations of some of our original designs decisions started to become more apparent for example in spel 4 reactivity is driven entirely by the compiler if you change a single property of a reactive object in spell 4 the entire object is revalidated because that's all the compiler can realistically do meanwhile other Frameworks have adopted fine grain reactivity which is one of the awesome things that has come with spell 5 lead frogging Spell's performance equally component composition is more awkward and spelt for than it should be largely because it treats event handlers and slotted content as separate concerns distinct from the props that are passed to components this is because in 2019 it seemed likely that web components would become the primary distribution mechanism for all components that certainly didn't happen and we wanted to align with the platform this was a mistake and while the dollar colon construct for reactively rerunning statements is a neat trick it was kind of like the old spelts use effect if that makes any sense it turned out to be a foot gun it complated two concepts derive State and side effects that should really be kept separate and because dependencies are determined when the statement is compiled rather than when it runs it resists refactoring it becomes a magnet for complexity and I can tell you from personal experience this is absolutely true the dollar sign colon looked really nice in really simple examples that I'm sure you've seen floating around on Twitter but when you got into bigger more complicated projects and FES you had a really complicated reactive page going it got really hard to reason about and understand and it was not it was not pleasant to work with moving that stuff over to the new effect Rune which we'll talk about soon has been a huge huge change so spell 5 removes these inconsistencies and foot guns it introduces runes an explicit mechanism among other things for declaring reactive State and as I alluded to earlier we have now gone from let count equals z to let count equals state zero interacting with state is unchanged with spel on like other Frameworks count is just a number rather than a function or an object with a value property or something that can only be changed with the corresponding set count it is really that simple arrays and objects also work like this I bet they'll talk about that soon it is these are really really nice to work with runes can also be used in dos. JS andelt dots modules in addition to dosel components meaning you can create reusable reactive logic using a single mechanism this is the new way of doing something like a store if any of you were big in the spel 4 world the writable syntax has basically been replaced with this to where we can now create classes or functions which use the state runes and effect runes and all these different runes to create these reusable stores it's a really nice pattern event handlers are now just props like any other making it easy to for example know whether the user of your component supplied a particular event handler which can be useful for avoiding expensive setup work or to spread arbitrary event handlers onto some element things that are particularly important for Library authors I've seen some Library code ins and the old versions of it were yeah was a bit of a mess and the slot mechanism for pack passing content between components together with the confusing let colon and the spell fragment syntax has been replaced with snippet a much more powerful tool we're going to go through the migration guide later and I'll show these off but these are really nice it's the way you can create reusable code Snippets within a spelt component because one of the big things with spelt is that it's not like react where we can put five different components in one file it's one component one file that's it so to create some reusable markup for like maybe a list or maybe you have some piece that you need to put in a bunch of different places surrounded with an if statement the snippet gets that done and it gets it done well so beyond these changes there are countless improvements native typescript support no more pre-processors which is great many bug fixes and performance and scalability improvements across the board so how do I upgrade if you're currently on spel 3 Begin by migrating to spel 4 from there you can update your package.json to use the newest version of spelt and in ciliary dependencies like V plugin spell you don't have to update your components immediately in almost all cases your app will continue working as is except faster we recommend that you begin to migrate your components to use the new syntax and features you can migrate your entire app with npx SV migrate spel 5 or if you're using VSS code with the spel extension you can migrate components one at a time by selecting migrate component to spel 5 syntax in your command pallet s has a large and robust ecosystem of component libraries that you can use in your application such as s Shad CN felt a great Shad CN Port it's not made by the official set Eden guys it's actually made by Hite it's a really great UI package I've been using it a ton uh skeleton also a really great one and flow bite I have not used flow bite before but I have heard good things but you don't have to wait for these libraries to upgrade to spell 5 in order to upgrade your own application this is especially important for something like a Shaden spell because it uses the Shaden model of when you run like Shaden ad button or something it just generates the button component into your code base we need that to still work without updating everything and fortunately it does So eventually support for SP 4 syntax will be phased out but this won't happen for a while and you'll have plenty of warning for more details see the comprehension spelli migration guide which we will be going through it is really really good and then finally there is the new CLI along with our new version of spel we have a new command line interface SV to go with it you can learn all about the S you can learn all about it in the SV announcement video which is great and in a forthcoming blog post which unfortunately isn't out today I hadn't initially seen this but I really want to show this off because this is really really cool I'm really excited for this blog post to come out cuz I want more people to see this cuz this new uh CLI is amazing you can run npx SV create we're going to go ahead and do this SL recording demo SP and then we can go through and select we want a library a demo a minimal I always go with minimal then obviously we're going to use typescript but here we can pick from a huge amount of things so we could add prettier in we could add in um Tailwind we can add in drizzle we can add in O we can add in markdown we can just natively add all this stuff in with the base felt CLI hit enter add the topography plugin for Tailwind uh we can pick which database we want for drizzle I'll do postgress I'll do postgress DJs I'll do Docker compose uh for Lucia I'll do a demo I'll pick bun for my package manager it'll install everything put all this stuff together we'll open this up in vs code and just like that we have a fully formed spell kit project which has drizzle it's got markdown it's got authentication all the stuff is put together so all we need to do to actually run this project is just follow the commands that they give us so I'm going to do Bun Run DB start that'll spin up our Docker compos instance to get our little postgress instance so with our database started now all we have to do is just run Bun Run DB push we'll push in our new database schema yes then finally I'm just going to do Bun Run Dev we'll spin all this up I will open up my new spell Kit app right here I'm going to do slash demo SL uh I think it was Lucia they said it was so now just like that we have authentication database Tailwind everything everything set up really nicely from the official spelt CLI they absolutely killed it on this one I cannot wait to see the full announcement and if you want to try out a spelt project today use this it's fantastic so let's get into the migration guide I'm going to skim through this a little bit but I really want to just kind of show off runes and the cool new stuff that they've added with spell 5 so the first thing like we mentioned earlier is the reactivity syntax changes so if we want to move all of our old Le declarations to our new state declarations we just switch out the variables over here they have these really nice little explanations on here which I actually want to read through let being implicitly reactive at the top level worked great but it meant that reactivity was constrained a let declaration anywhere else was not reactive this forced you to resort to using stores when refactoring code out of the top level of components for reuse this meant that you had to learn an entirely separate reactivity model and the result often wasn't as nice to work with because reactivity is much more explicit in spell 5 you can keep using the same API outside of the top level components the next one that they added in was the derived Rune this kind of replaced the dollar sign stuff that we were doing before like they mentioned earlier in the announcement post the dollar colon was really doing a lot of work in spelt for land it was responsible for like a derived value like having a double variable here it was responsible for side effects it was responsible for so much stuff and it could be kind of hard to see exactly what was going on so now we have just the derived Rune which basically gives us a reactive variable that is derived based off of a state variable or another derived variable they also introduced the new effect Rune which to me is it's very similar if you're a reactive it's very similar to use effect just without a lot of the foot guns there's no dependency array because spelt has a compiler it's able to just magically make it rerun whenever any state variables which get closed inside of this are changed and now that we have the deriv Rune it's not nearly as overloaded so another big thing in the old spelt world was that export let was how you did um props for your components so at the top of your in your script tag you'd say export let data or something that's how you would get the data uh prop in spel kit now what we do is we do uh a destructuring here so we create a destructured object where we have optional and required and we just pull these out of props we do the same thing for stuff like children and data and spel kit it now comes out of the props Rune instead of just out of a blank export let so why we did this export let was one of the more controversial API decisions and there was a lot of debate about whether you should think about a property being exported or imported it's also in line with the other runes and the general thinking that reduces to everything special to reactivity in spelt is a rune and it is a nice way of kind of thinking about it it's very unified under the Rune syntax now event changes this one is a little more subtle that a lot of people won't see it but it does actually make life a lot easier especially for Library authors so event handlers have been given a facelift in spell 5 whereas in spell 4 we use the on directive to attach an event listener to an element in spell 5 they are properties like any other so before the way we would do on click is we would say on colon click and then that would would bind a click event to our button but now since they're just properties we can just pass in a function of onclick so component events this is where you can really see the differences so in spell 4 components could emit events by creating a dispatcher with create event dispatcher which was a bit of a pain this function is deprecated in spell 5 instead components should accept callback props which means you pass functions as properties to these components so in here we have our little pump component we're going to have an inflate function that we pass it we're going to have a deflate function that we pass it which basically allows us to edit our size variable up here in the main thing so then within the pump dos spelt uh component initially we had to go through and create these event dispatchers and then we would have to go through and dispatch these events the type safety on these was a little weird and it didn't feel great versus now we're just passing in functions so it's really simple to just say hey we're grabbing our inflate and our deflate from props we're going to pass in a non click event right here inflate and that's it very simple very clean it feels way better to work with the next big change is event modifiers I'm not going to lie I am actually kind of bummed these are gone these um I get why they're gone and we'll talk about that in a sec here but it was really cool because in spel 4 what you could do is you could do like onclick and then you add in these like modifiers to change the behavior a little bit so you add in like a prevent default so instead of having to like in the react World it's super common whenever I'm doing something I have to just do like my onclick function and then I immediately do at the very top of it e prevent default here what I can do is I can just pass in uh vertical bar prevent default and then the button will just have that as part of it and that doesn't have to pollute my Handler modifiers are specific to on and as such do not work with modern event handlers adding things like event. pre-event default inside the Handler itself is preferable I mean yeah but it was nice um since all logic lives in one place rather than being split between Handler and modifiers since handlers are just functions you can create your own rappers as necessary so the same thing that we had earlier where we had like our once or our prevent default now we basically just go through and say like for a ones thing we just wrap our function here and then if we want to do that inside of our on click instead of adding the bars we just wrap the function cuz they're functions this is one of those things which will definitely make it easier for other people to get into and is probably better in the long run but it's a little piece of magic I'll miss uh another little thing is like a multiple event handlers before we could have two on clicks a one and a two now those need to be collapsed into one because again these are functions so we can only pass in one onclick function we can change that on click to have a one and a two another important call out is that uh local event handlers must go after the spread if you're spreading props because like a normal object spread we need to go through and if they're adding an on click in here and we put this on click beforehand it's going to get overridden by the prop so we want to make sure this on click always runs we put this at the end in spell four content can be passed to components using slots spell five replaces them with Snippets which are more powerful and flexible and as such slots are being deprecated in spel 5 you can mix and match Snippets and slots in your components when you're doing custom element stuff uh you should still use slot but this is this is a pretty Niche use case for most stuff air on the side of Snippets they don't really show them off in that post but I wanted to go over them real quick the Snippets are a pretty cool thing that they added in spelt 5 spelt is a one component one file type framework it's personally my biggest complaint with it and to sort of start addressing this in spelt 5 they've introduced the new Snippets which basically allow us to go through and you can see in this example we have the figure right here which is being repeated between these two we can now instead of having to blow that out into a component that we put in another file we can just do # snippet figure and then we put that in here it's a really nice way for us to kind of take logic to take uh part of the markup and make it reusable within the same component a really cool thing that you can do with these is you can actually pass these Snippets down as props and do some cool stuff there they are a huge step in the right direction but there's definitely a future where I would love to see um where I would love to see multiple real components in one file so finally the migration script by now you should have a pretty good understanding of the before of the before and after and how the old syntax relates to the new syntax it's probably also become clear that a lot of these migrations are rather Technical and repetitive something that you probably don't want to deal with by hand I can tell you as someone who did a lot of this by hand over the summer it's not that bad but it is a pain and especially in the bigger ones and just when you're going file to file it would be great to have some nice migration tools which luckily we do we thought the same which is why we provide a migration script to do most of the migration automatically you can upgrade your project using npx SV migrates felt 5 this will do the following things bump core dependencies in your package.json migrate to runes so it'll remove all the lets and turn them into States it'll migrate to event attributes for Dom elements so instead of on clicks we'll get on click and then we migrate our slot Creations to render tags so when we're just doing like a slot for a layout or something it'll now out render the children it'll migrate the slot usages to Snippets so we're yeah so we're now migrating our old little slot syntax into the new snippet syntax and then migrating obvious component uh Creations like new component into the new Mount syntax you can also migrate a single component in VSS code through migrated a component to spell 5 syntax command or in our playground through the migrate button not everything can be migrated automatically and some migrations need manual checkup afterwards the following sections describe these in more detail I'm not going to go through all that stuff if you have a project that you need to migrate to spell 5 go through and read all those it is a very very good resource but I think that'll get a little bit boring that's all I've got to say on this new release here it is truly it is truly phenomenal what they've done the new CLI the new website the new spel 5 release it is all really great stuff I've been shipping this for like 3 months had a great experience I highly recommend it if you're in the camp of kind of tired of react and want something a little bit simpler and cleaner I highly highly recommend spelt it's been a joy to write and you're not going to go wrong with it if you want a more in-depth breakdown of just my thoughts on the framework not going through what it is but rather how I feel about it check out the video I did on my channel that'll be linked down below but otherwise thanks for watching peace nerds




## Svelte 5 Surprised Me - 20230921
it's no secret I've been a huge fan of Rich Harris for a while his talks have been one of the biggest Inspirations for me even making this channel he showed me what it looks like to be a web dev that cares on a deeper level both about design and the underlying architecture of the web itself that all said I've never been the biggest fan of spelt I know that sounds crazy how can I love rich and not love spelt I don't like when people change the syntax of JavaScript without really really good reason and historically let has meant something very different in spelt than it does in any other use of JavaScript and the dollar sign ax as powerful as it can be was never my favorite thing that all said spel 5 seems to be a very promising release and Rich hit me up for my thoughts and rather than just quickly look over the blog and send that to him I've decided I want to show you all what I think with my honest reaction going through this blog now I'm supposed to be a graphql comp right now I'm going to be late but I think this is for a good reason I'm so hyped for spelt 5 let's see what Rich has cooked up here and the rest of the team I know there's a lot of hard working people now introducing runes it's not a term I've heard before for web stuff so I'm very curious now in 2019 spelt 3 turned JavaScript into a reactive language that talk by the way is one of my like all-time favorite talks when he initially revealed spel 3 so if you haven't already checked that out please do I'll sure will link those in the description somewhere and here's the example let count equal zero and then when you increment count with this button onclick binding it will update the UI this seems very simple but to me it's confusing because nothing tells me that when something changes here it's going to update the markup here and I like how react this is a little more explicit that said this is really powerful yeah because the compiler can see where count is referen the generated code can be highly efficient and because we're hijacking syntax like let and equals instead of using cumbersome apis you can write less code at least they're embracing that they hijack those oh wish I could write all my JavaScript like this felt five changes all of that with runes before we begin even though we're changing how things work under the hood SP 5 should be a drop in replacement for almost everything the new features are opt in your existing components will continue to to work we don't yet have a release date for spelt 5 what we're showing you here is a work in progress that is likely to change what are runes runes are symbols that influence the spel compiler whereas today spel uses let equals and exports and the dollar sign labels run uses function syntax to achieve the same thing aha here here is this this was my issue was felt before is that tracking where these updates come from when it's just using JavaScript syntax gets really really tricky and now with this syntax it becomes much clearer where the update starts yeah having code behave one way inside of a Dot's felt and another inside of ajs can make it hard to refactor so now if you break something out into JS file and use this new syntax makes it clearer what isn't isn't composable writable and triggers updates okay you have my interest activity extends beyond the boundaries of your dot spell files yes okay it's pretty weird with runes is much simpler ah yeah as he had mentioned the big change here is that you don't need to use spelts traditional like store when you want to break things outside of spelt previously if you wanted the benefits of spelts syntax you had to either do it in the file or do a complex store externally this lets you have a lot of the same benefits when you're not working inside of a spelt file runtime reactivity today spelt uses compile time reactivity that means that if you have some code that uses the dollar sign label to run automatically when dependencies change those dependencies are determined when felt compiles your component this works well until it doesn't so we change this code it takes in WID multiplies width and height because dollar sign area declaration can only see width it won't be recalculated when height changes o yeah spelts becoming react not literally like obviously this is very different but there's a reason react was designed to blast everything out on every change it was to avoid a lot of these issues but I do like this idea of a derived value and an effect that runs when values change this honestly looks more like solid than anything but I'm seeing seeing the vision here State D yep and it ALS this is the big deal that you can now leave do spelt files and still have all of these powers like every other framework we've come to the realization knocka was right all along spel reactivities powered by signals which are essentially what Naka was doing then more recently signals have been popularized by solid and adopting a multitude or adopted by multitude of other Frameworks yeah this this feels like solid mode doing things a bit differently signals are an under the hood implementation detail rather than something you interact with directly as such we don't have the same API design constraints it can maximize both efficiency and ergonomics I can I'm reading this in Rich Harris's voice this is very interesting for example we avoid the narrow or the type narrowing issues that arise when values are accessed by function calls and when compiling the server side rendering mode we can ditch the signals all together this is a really powerful piece when you're server side rendering these things can't change cuz you're doing one pass and then send the content to the user so skipping over all of this lets you go super fast simpler times ahead runes are an additive feature but they make a whole bunch of existing Concepts obsolete oh this was a weird one export let was very strange did not love the dollar sign all of his attendant quirks i h this is a list of my least favorite parts of spelt and these are all gone okay we have a long list of ideas that for subsequent releases that will make felt simpler and more capable I'm sold I really want to play with this I don't have time right now cuz again I'm late like I should have gotten in over 10 minutes ago but God damn this looks really cool I'm genuinely hyped to take a look as soon as I can I know signals aren't necessarily the best understood concept but they are really cool and powerful and as a solid nerd I I couldn't be more hyped this feels like a lot of my favorite ideas from different places coming together and I am definitely going to give spelt another look after this should I do more content about spelt should I do a video where I play with spel 5 let me know in the comments and if you want to hear more about my thoughts on how to pick a JavaScript framework right now I'll put in that video in the corner cuz that's almost certainly out of date too still has really good info though thank you guys as always I really appreciate yall peace nerds




## Svelte Broke Up With TypeScript__! - 20230522
sorry rich but I still think we should talk about svelt's decision to leave typescript and why I think it was probably actually the right call svelte is one of the first early adopters of typescript especially outside of the tsjs file world where svelte has its own file syntax dots felt and they did a lot of hard work to make sure that inside of spelled files you still have type safety Rich deeply understands type safety in the importance of what it enables for you as a developer and how much more confidently you can move in building applications so much so that he even says it all the time he does not recommend building application code without typescript and type safety however that's not what we're talking about when we say svelt left typescript svelt still supports typescript you can still use typescript was felt in fact if you're using svelte you probably should typescript is a lot harder a burden for Library devs I have a video coming soon where I talk about tech that shifts the burden and I think typescript strength is how much it takes away from the application Dev in terms of worrying about consistency and reliability but also how much more of that burden gets shifted to the library author to make sure the typed contracts are correct such that anyone consuming the library will have a good time with autocomplete and won't break their application as well as the utter chaos around actually linking to and exporting the right types for the things you're building typescript is part of your library build step is obnoxious and it makes the developer experience painful we just open source the repo for upload thing and if you want to look through it you can see a bunch of the hacks we did just to make an npm package that uses typescript that has the correct type definitions but also can be used in Dev for us to iterate and experiment with it it was hard to do that right and it cost us a lot of time as well as Julius jumping in and helping us out typescript is a much much higher burden on Library authors than it is application devs period but is there another way can we get the type safety that we expect from a Library without having to write the whole thing in typescript and deal with the consequences of writing everything in typescript there is and although it has some gotchas it also has some benefits and it's really interesting to see svelte bet all in on JS doc typings JS Doc is a Syntax for leaving comments in your code that tell your IDE or an exported like Builder or doc step what each function what each variable what each thing does it's meant to be a way to write contracts between files and between packages is that are self-documenting and really handy if you look at the example Rich tweeted here you'll see that with traditional typescript when you give thing the type of thing it just tells you that but if you give it a JS doc comment instead you can write details for that with the typing and it's the co-location of a definition through a traditional comment and the type as part of the Syntax for it that makes the readability of this stuff much better and with upload thing we went pretty out of our way to try and do similar where even though we have all our type definitions done the traditional typescript way I also leave comments all over the stuff so that you can get good definitions when you consume it here where I put an example so now when you hover over the upload button you see an example of how to use it and then when you get a type error if you consume it incorrectly here and we like delete this we got a type error that says you forgot to pass the generic I'm like what's that mean hover over this oh there's the example I forgot to put this here I'll put that there and now it's good but we've had to do piles of hacks from both jsdoc as well as typescript where in order to get that working at all in order to get like the type error I had to lie to typescript a lot in particular up here I void out the type if you don't pass a router and return you forgot to pass the generic instead of the actual key but like that's a hack and there's a huge difference between this code and this code and although I I understand this code is like a complex generic and this code is just an example there is something to what rich said here around the JS doc syntax resulting in code that is better documented and consumable as well as being a little bit more readable and you're actually working on it and maintaining it but the key differentiator isn't just like the syntactical difference certainly isn't that at all it's that you don't need to build step anymore so you don't need something to convert this TSX file into a JS file that can then run in the browser if you have MJS or JS files that have happen to use the syntax that's just a comment it gets ignored by the browser which allows you to not have to build anything in order to use the stuff and you can still do type checks in your CI using the type definitions you put above these things if you use the syntax that he showed here where it's at type thing that's still type safe you'll still get errors if you try to assign it something you're not supposed to I can even demo this quick and now without writing typescript I have type safety this is a JS file that's typesafe I don't think we should use this in apps though because it's much harder to get a properly guaranteed type system but if your code base is a small number of files and a large amount of exports that people need to deeply understand and the number of files and change a lot that the contents of them do this model makes a lot of sense especially for library devs and as weird as it might be for me to me the typescript guy to sit here and say hey I think it makes sense they moved off of typescript I'm going to sit here and do it because it absolutely makes them more productive as they work in this code base and it's really nice to to see how much of a win they've already found from it this was a great tweet Matt made that I've the thing I've thought a lot about and haven't done a video on it's actually I have in my to do here it's just the bird and I mentioned I was going to do this later this is a video about how certain Technologies make developers work harder on the library side in order to make life easier for the application devs and that's why it's so cool to see people understand like these are very different I've written way more typescript over the last two months than I have in years because normally when I write apps in typescript I'm just writing JS but when I am deep in library land making packages I have to export for y'all to consume I'm writing a lot more typings and I'm writing a lot more chaos within those it's just a fundamental different world and Rich has decided to be the the change so to speak and be one of the first people to to push the idea of using type safety without using typescript by deeply embracing JS doc comments it theoretically will make working in their code base significant simpler and they've already made this change in svelt kit and really enjoyed it I trust rich in the team's judgment in moving svelte as well because they wouldn't have done this if it didn't work in svelte kit it's a bold move it's not what many have made yet but I do think we're going to see more Library authors taking advantage of JS Doc is the method of defining the typesafe contracts within their projects really proud of the work they're doing I'm so excited to see how people use this in the future and if using JS talk this way starts to become the norm huge shout out to the svelte team for being willing to Pioneer these things it's really cool to see if you all want to hear a little bit more about Rich's hot takes and also get my reactions to them I'm going to pin a video here where I react to his most recent talk so check that out if you haven't already thank you as always peace notes




## Svelte Hot Takes - Reacting To Web Hot Takes from Rich Harris - 20230421
if you couldn't have guessed I'm a huge fan of Rich Harris I genuinely look up to him he kind of proved to me that A well-dressed well-spoken JavaScript nerd could make a splash and I certainly wouldn't have started YouTube if it wasn't for the incredible talks he had been giving for the like three plus years before rethinking reactivity and computer build me an app are legitimately two of my all-time favorite talks and I dearly love the impact he has had and yeah I owe him massively for My Success which is why as soon as I heard that there was a new talk of his I couldn't be more excited to watch and also why when Lee Rob told me I could go react to it I was yeah very hyped so rich did a new talk all about his spiciest takes about the modern web and he was actually encouraged by versel to go as spicy as he wanted and the result is something incredible and I'm really excited to watch this with y'all right now so let's go take a look giving a total tonight called in my humble opinion uh and it's a collection of mutually connected thoughts about recent Trends in front-end development there's a lot of really interesting and Innovative stuff happening in the frontier world at the moment and this is a good time zone to take stock of it there's some open source package that lets you quickly build a website that is a presentation I like that he's doing this in JavaScript and not caving and using keynote or PowerPoint like the rest of us but yeah so I'm going to be sharing some opinions of varying levels of spiciness and I'm going to talk about how those opinions shade the design of spell and spell kit I'm not here to try and convince you then you'll probably find lots to disagree with me about but hopefully this will give you some insight into how we think about our role as tool makers now it takes a certain lack of humility to stand in front of a room of people and talk for half an hour if my words mean something but having said that I am very aware that some of the ideas I'll be talking tonight talking about tonight yeah the Emoji lag's annoying it's not as bad further in I think this was like streamed and they just have the stream recording and the whatever is using the screencast probably wasn't very good have come from the brains of fast and louder and more accomplished people than me so I'd say everything that I say with a grain of salt these are humble opinions and finally while I think that the salt team would broadly agree with things I'm going to say tonight I'm not claiming to speak for I'm also not speaking for the cell which is a healthily pluralistic company even if we all dressed the same these are my humble opinions I'm going to start with a fairly non-spicy opinion there's too much thought leadership that would have you believe the JavaScript Frameworks are the root of all that is wrong with the web and if only people would make better technology choices the web would be perfect I want to emphasize how much I love at this point this is a huge part of why I respect Rich so much there are other people who are like the anti-react people to be clear this is the framework he's sub tweeting but not mentioning in the anti-react people suck they are really really annoying and most of them aren't here to make the web better they're here to on react and blame it for the web being bad Rich has never taken this approach he genuinely respects the hell out of react and has used it as both a point of learning and a point of reference as he has built his own new modern crazy Solutions and obviously he's learned a lot from react and applied that while also going in his own Direction I feel like too many of the react alternative people on react too much and make that part of their identity I've even debated some of those people live in person before and I find Rich to have a much more sensible Middle Ground here especially as a framework author so yeah massive credit to Rich for being one of the few post-react people to not fall in the Trap of being an anti-react person the only problem with it is it is absolutely oh when you last went on a recipe website and had to fight through a gauntlet of ads and newslettered about her morals and because you can send banners and the recipe author's story about her childhood memories of barrels butter pecan cookies and are you left thinking if anything induced a different abstraction for creating doll elements why you don't the web doesn't suck because if JavaScript Frameworks it sucks because of capitalism louder for the ones in the back God damn this sucks because of the attention economy because we've paid for everything with data and because we're all slaged to the algorithm on some level we all know this and so I've come to believe that as framework authors the most impactful thing we can do isn't fixating on a kilobyte here or a millisecond there it's empowering developers through education and documentation and Diagnostics and sensible defaults to do the right thing in the face of structural forces that bend the web towards sucking it the other stuff matters but probably less than we think it goes every now and then someone will show some data that proves some Frameworks deliver better experiences than others this is a chart that shows how the main JavaScript Centric application Frameworks score on call Web vitals measurements you can see that only Astro and spell get out before the average website but we have to be careful how we interpret this for example Astro explicitly markets itself as being designed for Content sites that don't require much interactivity and so it has a natural advantage over Frameworks that are typically used for more demanding workloads all of which is to say that as much as we love to talk about technology choices for the most part you shouldn't feel pressured by me or anybody else to switch away from whatever means you productive shipping software there's a lot he doesn't say in this that I think is important too excuse me he inserted a little bit with the whole um Astro is targeting a different group but what he's not hitting is that the people who pick tools like svelt kit and Astro are picking it because of the performance and the result is the people who use Astro and remix not even oh yeah I'll say remix too the people who use Astro remix and svelte kit they care more about performance they're going to know more about Performance Tools they're going to know more about how to measure and make their apps faster even in a world where theoretically Astro was slower than next by default because the people using it know more and care more about performance there is a selection bias there of the people selecting Astro are inherently more likely to know about and care about performance and when you get to these giant differences like 90 000 next websites 50 000 nux websites and 500 astrocytes the scariest thing here is that this felt performance isn't much better honestly because Felts only got 1400 things that were tracked here my expectation would be that this feltkit devs are aware enough of performance and the importance of it that from here they would be able to and expect it to push performance much further and the fact that next JS performance gets so close to the average and that these things aren't pushing it too far the other way is exciting and I do expect next performance to continue getting better but since next is the default next is being used by average developers and average developers are going to write less performant code not because they're worse devs but because they have different focuses and I think we don't talk about the developer picking these Frameworks in the bias inherent to that enough that's like the big addition I wanted to have here that I don't think he touched on enough but otherwise very much agree these numbers don't mean what people seem to think they do nice take something I've seen more and more of lately is people talking about zero kilobytes of JavaScript as in this framework ships zero kilobytes of JavaScript by default the implication is that JavaScript is inherently bad and so a framework that doesn't serve JavaScript is inherently good but zero Canada JavaScript is not a goal the goal is to meet some user need or if you're cynical to meet some business need by way of meeting some user need and sometimes performance is a factor in how effectively you can be that need we've all seen the studies showing that for every millisecond uh delay happens and loses a billion dollars or whatever and sometimes you can improve startup performance by having less JavaScript but doing so is always in the service of some other objective collectively we are in danger of mistaking the means for the end and as we'll see you later if you're on the best possible performance JavaScript is actually essential this is something I see with things like Lighthouse Lighthouse is an example of good heart's law when a measure becomes a Target it ceases to be a good measure we're incentivized to chase the green 100 at any cost that's not how Lighthouse was originally supposed to be used Lighthouse is a diagnostic tool to help us identify and fix issues it is not I just had a big aha moment this is how I have to frame the problem with the YouTube metrics rant I want to do where these metrics are useful for comparing a before and after but these metrics are useless for figuring out the health of your Channel these are diagnostic tools not scorecards and I fully agree lighthouses in that case I think a lot of YouTube's metrics are in that case but in the end the number that matters is number of users and for me number of viewers are people coming to the site are they coming back and are they using your thing if so you're doing well and if not you're up these tools can help you diagnose why things aren't going where you expect but they're not going to tell you what's wrong they're going to help you find problems once you've identified something is wrong scorecard so this is learn.salt.them our interactive platform for learning spell and spell kit it gives a pretty lousy performance score because in order to work it needs to download and install load inside your browser along with spelled kit and beat and then it needs to start a development server it is doing a lot of work and it does it pretty quickly but not quickly enough for Lighthouse we could get a better score by only doing that work when you start interacting with the site but that would be a pretty serious regression in user experience that's another thing we don't talk about enough not pre-loading JavaScript can make your numbers look better but it actually makes using the site worse pretty often and yeah it like especially one of the things next does is it will behind the scenes pre-fetch pages that the links for exist right now so when you go to another page it doesn't have to load everything when you click it it might have enough of it loaded to immediately transition you to it and that type of functionality makes your web applications and sites feel so much more performant because technically they are you click a thing and it responds faster but that means more code has to load on your device that's a compromise I just think it's a compromise that is very much worth it a large portion of the time I see this pattern over and over again across all different kinds of sites a single number simply cannot capture that nuance and you should be wet is he going to do a quick sub tweet in here because this feels like a hardcore quick subtweet right now area of people who use those numbers to try and convince yourself most sites should work without JavaScript this might seem like it directly comes uh yeah I know we're starting to get spicier I would say sites that can work without JavaScript should I don't like the word most and we'll argue all day about the word sites the way I would have put this is websites that can work without JavaScript should try to but most of what I built cannot work without JavaScript fundamentally and that is fine just a difference in what we're building contradicts the previous type but it doesn't these two things are both true number one JavaScript is necessary to deliver the best possible user experience number two sometimes you can't rely on JavaScript a website I reference constantly is this one everyone has JavaScript right well those of us who live in New York are very familiar with the experience of loading a page while at a subway station but losing connectivity before JavaScript loads it really sucks I've been believe that most web apps should be mostly functional without JavaScript say Google Calendar for example obviously JavaScript is useful here but is it essential can I really not see my appointments and create new ones without JavaScript I love you rich you're making a great Point here For the Love of Christ do not talk about calendars until you have tried to build one making a calendar work at all is an achievement making one work without JavaScript is inhuman respect the team at Google Calendar for making a thing that works in the browser because this is yeah come back to me when you have a good date picker and svelte that works without JavaScript and then then we'll chat but for now the likely answer is well we could but increase development cost isn't worth it and I'm not blaming the Developers for this or for the product managers for having the wrong priorities but I better it's a shame that the tooling used to build apps like this one don't make it easy enough to build progressively enhanced apps no I I can't fixate on the time I I could do like a two hour rant about the chaos of date time stuff what I will say is there is a computer file video as a number file I don't remember this it's either number file or computer file has a video about why you should never ever deal with Day times if you can avoid it watch it don't touch date times if you don't have to and if you do don't do it in HTML do it in JavaScript because yeah it's one of the oldest Tom Scott videos really good vid I have to find it and show you guys but uh it was computer file I was right it was before Tom Scott left computer file to do his own channel and it's almost a decade old I also want to do a reaction to that after but uh great talk we need to watch this though I didn't you should get an app that works without JavaScript for free and that is something that we on the spell kit theme strike for for example we server render everything by default and we spend a lot of time thinking about how to make it as easy or easier to use forms which work without JavaScript than it is to use fetch another reason that this is close to my heart is that in my patch career as a journalist I've seen how fragile the web can be as an archival medium when it ends on JavaScript this is Kim Kardashian's Instagram page at various points over the last decade early on the site was basically just tanks and images and we can look at a snack shop today and it's perfectly preserved by 2019 you can no longer see the actual images they're still there on her account I checked but because they're rendered with JavaScript they're not part of the archive finally by 2020 the growth factors got involved and you can no longer see anything on Instagram now without logging in and maybe you don't care what Kim Kardashian was wearing in 2017 but so much of modern culture is mediated through the federal digital platforms that there is a real possibility that future historians will have an easy time answering the question what was it like to live through the Space Race then answering the question what was it like to live through the AI Revolution I think that's a tragedy 2016 is an interesting case because the content is actually there when you first load the page but when the JS load it looks at the URL Bar says hey this isn't King foundation's profile and just nukes the entire page and we can go back to 2016 and fix that frankly if we could go back to 2016 we might have some other priorities but what we can do is ensure that our tools today are flexible enough to continue working when this one is interesting I have to think a lot about this one still I I feel him on the journalist part and I feel that a lot of people I'm trying to do videos about things that have changed and trying to find the original versions and such but I I don't think it should necessarily be an expectation that every state the web has ever been in is accessible to anyone at any point in time I I'm gonna have to think a bit more on this one but I'm not sure I love this take it it sets an unfair expectation I would say unexpected things happen so this is something that svelte actually does out of the box the client-side router will gracefully figure out the base URL when it starts up to demonstrate this I've deployed a version of our docs to the interplanetary file system which is a peer-to-peer Network for sharing files click on this link word does okay so you can see the the URL that has this ipfs slash very little string in front of it the capture the ipfs is you don't know that string until you've generated the site because it's based on the content so you have this chicken and egg and chicken and egg problem and yeah it still works the client-side routing still works really difficult to use a mouse when you facing backwards of the screen um the client-side roofing Works he said without having checked it uh the search function maybe works okay so things are working even though I'm on a shared Wi-Fi and it's a little bit flaky obviously and using ipf is that Soul kit is designed to be resilient enough to work even in these fairly hostile environments I don't know how it's showing oh there's probably like firefox's loading bar Behavior but you know if this had JavaScript on it it could show you an error when it's failing to load and give you some feedback on why the page isn't working if it had cached and JavaScript it could run but besides okay getting a little spicier oh this is the first opinion that's probably going to make people yell at me when the recording of This goes on on YouTube um in a couple of weeks npas are dead so for those of you who are captives of web dev Twitter let me offer some definitions a multi-page app or NPA is what people used to call the website it's an app where every page is rendered by the server and if you navigate between Pages the browser will go back to the server retrieve some fresh HTML unload the current document and then create a new document from the new HTML in contrast a single page app or Spa doesn't unload the document when you navigate instead a client-side router will fetch any code and data it needs for the new page and it will update the document in place just like any non-navigation state chain the multi-page app approach have made the following claims npas are faster because you don't need to load JavaScript npas are more accessible npas are less buggy and npas can work without JavaScript and in return the single page app cam says that Spas are faster because even though you do need to load JavaScript you're probably going to have to load some JavaScript anyway and this way you only have to upload your analytics or whatever once instead of every single page load and subsequent navigations are certainly going to be faster because it's much easier to smartly pre-load data I have a spicy take of my own that comes off of this one Astro I love you dearly making our docks in Astra was a mistake for create E3 app the main reason is that docs pages are pages that you regularly navigate many pages of you'll go to one page and you'll go to four more because you're digging through trying to find a specific thing the experience of navigation on an Spa is significantly better this was my mistake I pushed us really hard to use Astro for our doc site and I kind of regret it because man would I look at the rewrite in something like nextra or even dulcosaurus it feels better to use the docs so it is what it is just wanted to make that point the case I thought was as multi-page app as possible the docs is something I feel single page apps do better right now you're not recreating the document from scratch on every navigation Spas allow you to preserve State between navigations such as the scroll position of the sidebar or the video that's currently playing in an SBA navigation is just like any other state change so you can do things like continuous transitions there's a view transitions API coming to the platform uh helps with this and it's a wonderful addition but any cover stuff that you can do with CSS you couldn't for example tween a numeric value and a progress indicator like this if you were building a survey app an Spas give you a unified development model instead of having one language for your HTML and another for your dong Spas are much more cohesive now looking at these two lists you might say well the stuff on the right is nice but the stuff on the left is non-negotiable and it'd be right but the reality is that that list is very out of date modern Frameworks like next the remix and spell kit don't suffer from the problems that Afflicted early spa and as we've seen the claim that npas are faster than modern Spas is highly suspect I've tried to argue in the past that the distinction is actually rather unhelpful since modern Frameworks use techniques from both sides and I've taken to calling them transitional apps because we do not need any more veronic affidans but this isn't why I'm saying that npas are dead well saying the npas are dead because Astro killed them my Astro friends will be mad at me for saying this but there's the proof as of last week asteroids roadmap includes a client-side routes that give please Ken has client-side routing in Astro all the things I just said about why the docs kind of suck could be fixed by this so yeah that would turn your Astro app into a single page app in the words of Nate more UI persistence has surfaced as a clear missing piece in the full asteroid story Fireside routing is currently the only way to achieve UI persistence across navigation and it'll be quick to point out that this is opt-in it's not the default but here's what's going to happen they're going to build this thing and they're going to knock it out of the park and if it's a simple configuration change then people will try it even if they don't need UI persistence and they'll discover that for the very small price of a client-side router their apps suddenly have a nicer user experience I would not be surprised if the default was reversed in Astro 3 or 4. so on the Sulkin side we use client-side Reason by Deep default unlike some Frameworks we don't use a link component we just use regular a tags and intercept clicks on them if you want to disable client-side routing for some reason you can do it on an individual link by adding a data stealth kit reload attribute or you can do it for a whole group of links or even the entire document I don't think that people have rightly criticized Spas for is that they encourage longer sessions meaning it's more likely that a new version of the app will be deployed while you're using the old one which can cause client-side reading to fail because all of the files have moved around so in circuit if we detect that case we will fall back to a full page navigation which usually fixes it but we also make it easy to proactively detect new deployments and disable client-side routing when that happens all right next opinion is the explicit dsls the main specific languages are good dsls get a bad rap I like them dsls are in contrast to general purpose programming languages like JavaScript HTML is a DSL CSS is a DSL we'll see where this one goes well Jason is a DSL SQL is a DXL regular expressions are at vsl we don't tend to think of those as such because they're already so pervasive and people are fine with the dsls that they already know but you can do some pretty cool stuff with DSL this is new see by Matthew Phillips and it's one of my favorite examples from recent memory it's a DSL for describing State machines and you can clearly see how much more expressive the DSL version is than the general purpose is Rich getting Matt P pilled I've seen this happen a few times we'll see where this goes hold on this is cool and I want to see more stuff like this you see to fundamentally JavaScript is an event driven language which means that we predominantly write code in terms of things that are changing in response to things like user action but when we build user interfaces we're thinking primarily in terms of State this is the imperative declarative split or whatever you want to call it so there's an impedance mismatch at the very foundation between the language that we're forced to use and the task for which we're using it things like jsx and hooks and signals and all the other Innovations of the front-end world over the last I have to think on this one a lot it's correct but the implications of this statement hurt the implications are if you use this framing for JavaScript versus UI what is react and is react still JavaScript because react's whole thing is it's just JavaScript I had to think on this one more we'll come back to this at some point last decade or so uh all in some way an attempt to resolve that contradiction by letting you write code that is State first HTML on the other hand is a really good language for describing UI there's no 10 portal aspect to it it's almost like a physical substance like clay or at least that's how I think of it the cat of course is the HTML is static so you can't use it to describe things with Rich interactivity but what if we started with HTML and use that um as a springboard to create a new DSL I got a video idea quick and I don't notice this before I forget Love Letter to HTML cool that'll be going well that's basically what spelled is we've augmented svelt uh We've augmented HTML with State and control flow we've augmented CSS with Scout Styles and with augmented JavaScript reactivity some people are really put off by this and that's totally fine for people who aren't anti-dsl we've found this hits a sweet spot between familiarity and Novelty we're using languages that you already know we're extending them in useful ways and like with the Lucy example we're able to express UI much more concisely this way so I am Pro DSL but the music crucial caveat you have to be honest about it in the spell case we're using dot spell files when you open a DOT spell file you enter in a kind of liminal space where the normal rules of programming are briefly suspended and again it's not brief if you're building a soft application you're spending a lot of time in that liminal space and in that liminal space the equal sign means something different is actually the thing I have most against svelt personally is that I I live in JavaScript too much to spend time in something that isn't but I'm very curious where he goes with this one some people want nothing to do with that and that's fine I think most of us like having a little magic in our lives from science to type the Israel starts to get a little bit too weird for me if you start changing the semantics of JavaScript inside Javascript file I'm out this has been a recurring theme recently across a whole bunch of different projects and it's a phenomenon that I think deserves a little bit more scrutiny than it's currently getting yep and he's going to Matt Phillips build I called that yep uh uh this is a sub tweet of me not directly but like my belief that react still is just JavaScript is what this is coming after and I get it I hear it but I want to hear more before I give you an example of this I'm going to tell a little story uh back in 2015 I was working on roll up the JavaScript module bundler and I implemented a heuristic that I thought was pretty clever if you weren't using the inputs from a given module like ease in transition from D3 transition there then roll up simply wouldn't add it to the module graph even just discard it as an escape hatch if you did need to mod add the module to the module graph anyway because of some side effects then you could add the input without any specifiers and then roller would include it I was young and I was naive and this seemed like a really smart optimization around the same time the D3 community of browbeat and Mike Bostock into using a module bundler and he basically said fine I'll rewrite everything in common JS and use browser if I was horrified by this because that meant the D3 bundles are going to get slow and large and so I cold email them and said hey I really think you should use JavaScript modules for this and tooling isn't quite there yet but like here's the thing that I'm working on and that was on May 27 2015 and he oh May 29th he started filing issues on roller which I didn't even expect and was kind of terrified by um and this is an example of one of them now uh Mike is the the nicest most wonderful man and he is much too kind to put it like this but what he's saying in this issue is Javascript doesn't work like that in Nancy then it's right it doesn't you can't just remove modules from the graph without fundamentally altering the semantics of the code fast forward a few years and some Frameworks have decided that ignoring the semantics of JavaScript isn't just somebody had to say it and I am thankful it wasn't me co-location was a mistake take it away Rich okay it's actually a core summing point of the framework I'm going to use remix as an example but it's not the only one prior to version 13 in the introduction of the app router next.js did something very similar remix did this bad next did it worse originally svelte does it very right now next does it mostly right now but let's go for example there are others this is a remix route the idea is that your server code which loads data can be co-located with your view code when The Client app is built the loner and anything that it depends on is tree shaking away but this isn't tree shaking this is made up non-standard JavaScript semantics you might think alright Richie Poindexter who made you the JavaScript Hall Monitor and you'd have a point but it does have real world impacts there is actually a whole page in the remix dot about working around the problems created by this design and aside from the Practical impacts there's something about the blurring of boundaries between server and client that I think is inherently confusing I've heard multiple people say that they're often not entirely sure where their code is going to end up running more alarming to me is the possibility that you could end up with server code in your client bundle even Michael has an invented remix acknowledges that this is a real world problem your one sleep deprived mistake away from accidentally including something sensitive in the JavaScript that you serve to users and even if you don't make that mistake you're still prohibited from using Source maps to debug your app in production because the source Maps will contain the entire module including your database queries or whatever underrated issue debugging with the new model can be pretty painful figuring out what is causing a block and where the block is happening I know versel is working really hard on better like debugging and developer tools and logging for when all of these behaviors hit and happen but throwing away your Source Maps does suck it'd be really cool if you could in Dev get a proper full stack Source map where like the errors may go away client them these are things that are going to improve but the state they're currently in sucks and when you're also trying to reinvent a compiler spending the time to reinvent the dev Tools around it is just not something many have the time to do so this is a very real problem right now and I don't foresee remix having a great solution anytime soon just due to the nature of the world so why am I talking about other Frameworks design decisions I'm not telling you don't use remix and I'm not saying the remix team should make different choices that's not my business but oftentimes people will say other Frameworks are doing X should spell kit do the same thing and then it becomes my business the reason for the design choice is that it's convenient to co-locate related pieces of code now you don't need to sell me on the benefits of co-location I was doing single file components back in 2014 for view or anyone else so close but so far if you all don't know I'm anti-server component or not sorry about I'm anti sfcs I like the idea of having two components in a file and breaking up my boundaries how I choose yeah I don't miss the co-location I love it the co-locating code that crosses the server client boundary in a single file is too much with prototype to install and it's always giving us bad vibes so in spell kit we don't co-locate in files we co-locate in directories this is a screenshot of this fault kit code base an assault kit this is one of my favorite things about svelt Kit I was skeptical when I first saw this pattern I don't love the naming the plus page.server.js that that feels strange don't love that but the idea of a server file that implicitly loads data into the client file next to it makes the relationship between these things much clearer I think the way that server components do this where you move some of the mark up in over to This Server file and then once interaction start that's when client starts I right how I want to frame this both svelt kit and server components built the right boundary but react or but svelt kit gives you that boundary baked in at an architecture level whereas server components let you choose when you adopt it and how you adopt it yourself both have a boundary and both handle it really well but svelt Kit's boundary is the relationship between server data and HTML server components model is you go from HTML to interactive at the point that you choose now it enter interesting distinction for sure but I do think svelt kit and next are the two Frameworks that have split this relationship the best yeah each directory is a root the niche root can that can contain server code for loading data and view code that runs on both the server and the client so this is actually the demo app that you get when you do npm create spelled and inside source Roots might be hard to see because it's kind of small there's a lot going on here but inside source reads we've got an about route and a sturdle route which is a wordal clone that works without JavaScript the page is server code for the the spurtleclean and goes in a page server.js file on the left here and any file with that suffix cannot be imported into client-side code your app will simply fail to build and directory based routing is something that we stole from next.js and it has a list of other benefits that's too long to get into right now but I strongly believe that this is the way one little Easter egg that I'll show you is that on the right in page.spell on line 16 we're hovering over dated.gasses and it's giving us the type and the inline documentation that we wrote on the left on line nine so we get flight safety across the network this is the sort of thing that's made possible by embracing strong conventions and far from being a worse developer experience I actually find this preferable I'll also have my data loading server code open on one side and the view code that uses it on the other screens are wide but files are tall and so it's just a bad use of real estate to try and stack everything into a single file this might be the take in here I disagree with the most uh don't know if y'all have seen how I use my editor but like this isn't just for stream I rock like 18 to 20 point font when I code and iroc1 file open full screen on my computer this is not too far from how I work and you can ask anybody who's seen me sell my couch in code this is how I do it what I will always aim for is reducing the amount of context necessary to solve a problem to be as small an amount as possible so ideally I can open one file make one change in the right place and be done but I went from being a three monitor Andy with like my crazy fancy setup with like a vertical monitor two horizontal ones and everything spaced out crazy to just coding on my laptop and I love it so yeah it is what it is I've converted a lot of people try it if you haven't like seriously just turn off your monitors for a week and use your laptop see what happens you might surprise yourself anyways okay another example of non-standard semantics this stands like a quick team quick is a framework that transforms your code in such a way that it can lazily load individual functions when it needs them and then recreate the electrical scope it is extremely clever stuff and it's worth paying attention to well I personally have some reservations about stuff like this if you move the increment function out of the block of jsx the out and breaks the figures JavaScript that would be fine but it's not JavaScript it's quick it's effectively a DSL for more granular code splitting by the same token you have to be careful about what values you reference inside that function because in order to recreate the lexical scope the framework has to serialize it I mentioned this on Twitter a while back within a few hours Banning from the quick team had added a much more helpful error message so that you can diagnose the problems because they are brilliant and dedicated but this is really just one example of a more wide-ranging Trend that I'm seeing where in order to successfully work with JavaScript or typescript you have to understand some very sophisticated Transformations that are happening behind the scenes the rest of other drawbacks to the lazy loading approach thank you Khan we haven't talked about server actions much because I can't talk about server actions yet but uh there is definitely concern in this regard of like is it clear enough what's being passed and what's actually being passed like if you pass a function to a thing be explicit about what's happening unconditionally prevent an event default which is something I do all the time without opting out of the programming model altogether but fundamentally is this mismatch between what the cloud does and what it looks like it does that I get hung up on for an experiment I asked chat GPT to refactor the component and at first it tried to enforce react idioms but when I explained that we can't use these State here it made the exact same mistake hoisting the increment function out of the jsx because they thought it was dealing with JavaScript another example from solid it looks brain much like these two this one's slightly off because you have to call count as a function but if yeah I get this one and how this one sucks if you really react brained this one doesn't suck if you're like signal brained oh I'm positive one is it like mute accidentally yeah my bad another example from solid it looks brain looks like these two components should behave the same way based on our understanding since counters on props you don't need to call it as a function learn something every day and think of jsx and JavaScript but they're actually very different if you're familiar with solid then this makes total sense but there's no obvious signpost here so will people with less familiarity be able to successfully maintain this code base five years from now I don't know maybe are they mean to pick on these Frameworks because they're all doing really interesting and cool stuff and these are just some particular notable examples and you know they will point out elements of cells programming model that they're not very keen on and nor am I telling you what to think I do encourage you to play around with these Frameworks and develop your own opinion I'm just telling you what I think and what I think is that your scientist was so preoccupied with whether or not they could that they didn't stop the thing if they should okay this doesn't feel like it should be a particularly spicy take but it does have some moderately spicy implications that's a good way of putting it the the implications here are spicier than they take and um curious as ever to hear what he has to say about this other things being equal code should run as close to the user as possible so the edge is better than a central server but on device is better than the edge now other things are not always equal sometimes you need to access your database in which case your code should run near your database and sometimes you need to have access to sensitive information that can't be exposed to the client but there's a lot of stuff that doesn't fall into that category for example if I add a product on my shopping cart I should be able to see that reflected immediately I like where these doing distance Beyond Global versus regional Edge and is going all the way from like the closest which is the client to the furthest which is a an off like server in a specific location that is far away from you because there are granular levels here and I know svelt's goal is to always put the code in the right place but at the very least we can talk about those different places and he opened up a really good opportunity in framing here that's kind of richest thing it's giving us a new way to talk about the stuff and he's done a good job so far here another example that we're all familiar with when you're writing a comment in GitHub you can't preview it without sending the comment to the server so that it can render the markdown sometimes it's pretty slow you can absolutely do markdown rendering and syntax highlighting in the browser maybe you'd want to be lazy about loading the grammars that you use for the syntax highlighting but it is a very solvable problem then it will provide a much nicer user experience and this isn't just about latency it's also about resilience I travel by Amtrak a fair bit and every time I do I like break three hours the uninterrupted work but then I keep running into things like that because my connection is so flaky and so most times I'll just give up and read a book instead this largest Amtrak there's also everything on the subway or even when I'm walking down the stairs to leave my flat and my phone switches from Wi-Fi to Cellular just as I'm trying to look at the details of where I'm supposed to be going turns out we're pretty bad at building things in an offline first way in the best of times all of this is why I'm personally a little bit nervous about react server components for those of you who aren't aware RSC means that your UI is rendered on the server by default and only components that have a special use client directed will run in the browser and have access to things like new state and user faith serving components and client components have different apis they can use different hooks but there are restrictions on how you can combine them but the option is that by default in the future your react app will run entirely on the server and you will opt in to client rendering for specific files of your app now clearly this has some very substantial benefits this is hugely important work and frankly it blows my mind but I do worry that will become so paranoid about serving JavaScript to our users that were over correct if the default interaction is to require a server round trip for client components to be implicitly regarded as something to avoid then the net result could be slower and less resilient web apps this is why versl hiring Rich makes so much sense because there's two things that there's two past things can go either rich is wrong and server components win they're the objective better experience for everybody and we end up in the new world where everything's server component first or rich is right we went too far and svelt it becomes the best framework for having a good experience on both client and server either wave or sell wins but they get to bet on both horses because they own bull horses it's kind of genius and I think rich is a bit wrong here specifically I think that a combination of pre-loading some server stuff like in next it will pre-fetch the pages that are accessible on the page you're on so that when you navigate to them it can navigate faster if it does that when it loads and then you lose your internet and you go to one of those pages it will still be able to load a lot of it if not the whole thing and since the interactions or the things you're actually doing on the site have to be client components anyways The Experience there doesn't change at all the catch is how often are we refreshing the Dom from the server and how much do developers rely on that those refreshes to be their main method of State like are we going to see a world where somebody presses one key and it does a server request and then renders new HTML on every key press that would be a disaster and I really don't think we're going that way but it's possible versus we use the server to get the right content down to the client as quickly as possible and then the client in its interactions are done on their device is a delicate balance to be found here I personally think react is on the winning side but I could be wrong and if I'm wrong it's because rich is right and we will see how things go I might just be fan-monger again I don't know Diana ramov is probably going to do a withering tweet thread on why I'm wrong about this but I'm very curious to see how this is all going to look in a couple of years with the benefit of hindsight okay another spy to say we will regret Reinventing our PC um RPC stands for remote procedure cool is an idea that has been around since the 70s basically what it means is that instead of passing a message to a server and waiting for a response you call a function on the server instead of the RPC protocol takes care of the actual message passing in effect it allowed you to pretend that a distributed system is not distributed you're just calling functions now back in the 80s people were calling the wisdom of this idea into question this 1988 paper by Andrew Tannen Brown called a critique of the remote remote procedure called Paradigm is very much of its time but it's still worth reading some arguments can't be serialized correctly serializing closures is particularly hairy if a server mutates arguments that mutation won't be respected on the clan network errors and logic areas all kind of get smushed together all of these things are easy to deal with if you're not hiding the implementation details but over the past few imbalance our PC has had a bit of a Renaissance in the front end world and once again I wish trpc wasn't named trpc because it is not included in what he is describing here what he is describing is things like what Bling's doing with server dollar sign or what a theoretical framework that's name rhymes with preact is doing with a theoretical protocol that rhymes with murder actions I get why he's subtweeting this here I understand what he's talking about trpc is not included in this let's continue that we now call it server functions I first saw it in solid stop the idea is that you write code like this and oh hang on the right sunglide this I'm gonna have to try and remember my slides because I messed this up and the comparison wave the magic wander and you can call code on your server as though it were a local function and so the ergonomics of this are undeniably really nice uh you even get type safety because as far as typescript is concerned it is just uh a local function um but a while back Jason Miller the creator of reacts uh did a tweet that I found quite interesting he said in effect that these abstractions are dangerous uh I heard he's wrong but I think he might be right like if we tell you this example here This Server function looks and feels like an internal implementation can fail but it's not we've actually made an HTTP endpoint that anyone can call with any data so time script is telling us that feel can be named or quantity but in reality it could be name semicolon drop table uses if you know you know so when you make an endpoint explicit and you're working with full data you're aware on some level that the data is untrusted and so you know I think you're much less likely to make this sort of error than so fun fact about database.js for what it's worth if you use Planet skills database.js you can't pass variables and values in the dbquery string you have to pass them as arguments and when you do that they sanitize them so this specific bug is not possible if you use database.js specifically but yes there is a possibility of this being a problem in the future if this sorted data call is something that anyone can change the input of there's a lot of it depends here and I see the concern it makes a lot of sense but we are entering a new world back to where we were and if it looks like a private function call you might be thinking Rich come on I would never made that mistake but look to your letter and look to your right that the people around you do you trust them not to make that mistake I don't know bear in mind also that if you use Source Max for Source maps for debugging and they contain the original server code you're basically handing attackers a diagram of your defenses this makes me very nervous so people have asked us to add this to spell kit and we've said no maybe one day once enough people have around and found out we'll do it but not yet we think that part of our responsibility as tool makers is to the extent that we're able to help protect you and your users against these sorts of issues I miss Rich's face that is all so spell kit has built-in csrf protection it has CSP Primitives and we don't do things like that just because they feel convenient okay I'm rating this one low on the Scoville scale this is fascinating with his recent JS doc stuff uh I'm curious where he goes with this one even though it seems like an unpopular opinion because I think it's actually a pretty obvious build steps are good this idea that comes up every now and again in front end but build tools that devil's work and that would all be much better off without them this is a recent example that gained some traction from the dino blog and it's one of the better versions of this argument that I've seen normally there are a lot angrier but the thing that often gets missed in discussions about build steps is that they primarily exist for a user's benefit not for hours that's a spicy one uh especially since he acts typescript in favor of jsdoc to avoid a build step but he likes these build steps I get it there's a balance here interesting I want to see where he goes with this bill steps let us Minify code the letters combine 100 small modules into 10 cool screen chunks that load faster they remove unused code from client-side bundles they optimize images they hash assets so that they can be cached immutably they guard against bugs by type checking and minting this is all stuff that directly results in a better user experience it's true the build steps also benefit developers by letting us use non-standard dialects easily import dependencies and things like that but if you remove build steps it's user experience that suffers more than developer experience and yet interestingly if you look at the people who complain most vociferously that our industry prizes DX over ux and then look at the people who want to get rid of build tooling there is a striking overlap this is a diagram I need to steal and use for a lot of things I'm going to use this exact framing to complain about a lot of things in the near future thank you for this diagram Rich I'm going to abuse this I always do the Venn diagram where like the two circles are separate and barely touch I hadn't thought of taking two contradicting views that people often have and overlapping it this way like here's one uh people who complain about Tailwind people who complain about react performance this one pisses me off to no end specifically because tailwind's performance is absurd like Tailwind does CSS better than you do and it will make your applications load faster have faster CSS bundles better minification and just generally makes your apps better than if you used any CSS and JS solution or most CSS styling Solutions Tailwind is uniquely performant where it if you take an app you wrote in vanilla CSS correctly and you take the same app and write it in Tailwind the Tailwind site will be smaller and actually load faster and I find the people who bet you about Tailwind the most also hate react and I can never get them to concede that Tailwind is actually one of the most performant styling Solutions because the people who live in this middle area are delusional and that's fine we all have our delusions but it's I like this diagram as a way of pointing out these contradictions I'll be using this a lot so thank you Rich for that let's finish this up it's hard not to conclude that it comes more from the reflexively empty tooling mindset than a genuine concern for users uh here's another example of a build step being really beneficial that I didn't get around from doing a slide for and all of the code Snippets in um stool kits documentation uh are time checked against the stealth kit source code so for example this code down here um is is checked after deploy time to make sure that it doesn't contain any errors that if today with current types um install Kit itself and that unavoidably takes time one of these Pages might take several seconds to render on this M1 MacBook Pro so we pre-render this content at build time as well as ensuring that we don't publish incorrect documentation because if we do the deployment will fail um it means that everyone visiting this site gets content instantly if we did that rendering on demand instead that even if we had an incredibly sophisticated caching Sunny users would end up having to wait multiple seconds for the page to load and that is just not access so build steps you might not need one but you should probably have one anyway okay my final take of the evening is that none of this matters and I think AI is going to take all our jobs but I do think there's a better than even chance that it will is going to change them beyond all recognition might not be long before talking about these sorts of code preferences feel like talking about what Implement you want to use to to make holes in your Punch Cards not sure how I feel about this one specifically I like the general none of this matters but the goal of AI is to do human work but faster if we make the the work better for humans we're also making it better for robots and all of the things we're bickering about and improving and changing and learning from here are all the things we feed to the robots to make them better too so the robots are are capped at the capabilities of the humans who built them in the tools that we built I don't think it's necessarily Fair and neither does my kitten who just got on my desk to come say hi so let me make enough room for him do a very quick cat break come on bud finishing this up quick what Implement you want to use T to make holes in your Punch Cards so for the few weeks in which any of this is still relevant let's have interesting debates and share our ideas but let's not take ourselves too seriously and let's have fun building stuff however we like to build stuff um that is my time thank you [Applause] shoot shoot now and replay it just want to deposit reflect on it this was an awesome talk as per usable Rich came in with the spice and delivered and yes he delivered hard here I I almost entirely agree I think the details of where we don't agree are going to be the the front of the next like era of this JavaScript War it's nice that so many of the things we've been fighting over for the last what 10 years now are over like Spas one build steps one typescript one all of these things have become essential expectations in modern web dev tooling but the next era is kind of figuring out what is too far and kind of figuring out what the relationship between the client and the server is as we continue to iterate on software it's really nice seeing Rich continue to push that conversation and find new ways for us to frame it and talk about it I got a lot out of this talk I hope you all did as well if you enjoyed it let me know since we talked a lot about that client server boundary I'm gonna pin a video here where I go in depth on those boundaries and the type safety of them it's a really good video I put a lot of effort into it check it out if you haven't already thank you guys as always peace




## Switzerland is the first open source country (yes really) - 20240820
Switzerland now requires all government software to be open source sorry my face is covering the word open there um you you can read it's cool thing I'm actually quite excited about this the idea that things that are funded by public money should be public something I generally agree with and I'm actually pretty excited to see where we end up with this so let's take a read see what they're doing and get an idea of how Switzerland is changing the way that they build software for the government the US remains reluctant to work with open source but European countries are bolder this has been sad there have been a small number of US Open Source projects from the government yeah a lot of the typography stuff the US government did is all open source they have like the US web design system that is fully open source uh the license is a bit weird because it's government but it is open source and I believe they're relatively chill I haven't fully read it or know what the license is based on but uh a few parts of the project are not in the public domain so they specify certain things that aren't but otherwise the files licensed under the MIT everything in the library other additional stuff so it's cool that they call all that out this is a set of fonts and other resources for doing UI design from the US government that's open source and I think this is awesome I would love for the government to do more stuff like this if they're spending tax money to build things those things they build should benefit the general public in the US oh yeah the BBC also has a bunch of cool open source BBC's has an open sour or they github's open source code use on their public facing services including like really helpful screenshot comparison tools actual ways to render responsive images that are sane especially back in the day when that was way harder all of these things are useful resources that government money was used to create I like the idea that they also decide to share it alongside simra the BBC's open source web application oh yeah the Thai website I forgot that this whole site is open source which is dope that's so cool if you're looking for like a big complex web repo that you can learn for reference here you go it's open source the point I'm making here is there are efforts to open source things in governments but the idea of all government software being open sourced is a new thing that I'm excited to read a bit more about several European countries are betting on open source software in the United States eh not so much in the latest news from across the Atlantic Switzerland has taken a major step forward with its federal law on the use of electronic means for the Fulfillment of government tasks again if the government's using software that they paid to have written sounds like going to be open source now this groundbreaking legislation mandates using open source software in the public sector interesting so this is anything that they choose to use as well so if they have a service they're paying for they have to use the open source alternative also Germany ditched Microsoft for Linux and Libra office very interesting not use Google Drive but I can respect it this new law requires all public bodies to disclose the source code for software developed by or for them unless thirdparty rights or security concerns prevent it this public money public code approach aims to enhance government's operations transparency security and efficiency it's not super clear yet if this means you literally can't use use close Source software that you're paying for or not I'm curious to see how that develops making this move wasn't easy it began in 2011 when the Swiss Federal Supreme Court published its Court application open justice jusa under an open source license interesting open jusa currently includes various modules for managing Court decisions and other documents as well as enriching and completing them with additional metadata that's actually cool an open-source system for managing court documents that's a cool thing that only a government would make I see as open source I'm curious whether governments actually use it the proprietary legal software company web law wasn't happy about this though makes sense if they're charging money for their service and the government just open source an alternative doesn't surprise me there were heated political and legal fights for more than a decade finally the emag was passed in 2023 now the law not only allows the release of Open Source sofware by the Swiss government or its contractors but it also requires the code be released under an open source license unless the rights of third parties or security related reasons would exclude or restrict this it is my understanding from reading this thus far that it is software being commissioned to be created by the Swiss government that falls under these laws so if they were asking web law to make a new product for them that would have to be open sourced Professor Dr Matias sturmer hopefully I got that right head of the Institute of public sector transformation at the burn University of applied sciences led the fight for this law he held it as a great opportunity for government the IT industry and society sturmer believes everyone will benefit from this regulation as it reduces vendor lockin for the public sector allows companies to expand their digital Business Solutions and potentially leads to reduced it costs in improved services for the taxpayers there actually an interesting point here where uh there's a lot of vendor lock in in the government because once they've made a commitment to a given solution they're often pretty locked in just by the nature of like how much data and how much money it costs to move off like if your organization in the government has a budget and it costs more than that budget to move to a different solution you're stuck indefinitely but if your software is open source and you can theoretically move and host wherever this makes pricing for government services significantly more competitive I hadn't even thought of that angle before it's interesting they called that out in addition to mandating open source software the emag also requires the release of non-personal and non-security sensitive government data as open government data this dual open by default approach marks a significant Paradigm Shift towards greater openness and practical reuse of software and data implementing the emag is expected to serve as a model for other countries considering similar measures it aims to promote digital sovereignty and encourage Innovation and collaboration within the public sector I was a little skeptical going and I'm liking this more and more in the angles that they're going at with it the Swiss Federal Statistics office is leading the Law's implementation but the organizational and financial aspects of the OSS releases still need to be clarified other companies in Europe have long supported open source for example in 2023 the French President macron stated that we love open source he also loves one of my favorite artists ever DJ medy because they played signatune at the Olympic opening which broke my heart Medi passed away tragically over 10 years ago now I was in high school so way longer and hearing his song played at the Olympics was emotional respect for mcon for having similar tastes in music and open source I'm never going to say that right thank the FBI if you're American thank you they use Linux on their PCS that's actually kind of cool the European Union has long worked on securing open source software via the eu's free and open source software auditing project FAA look at that where are you Aiden FAA bot chat beat me to it FAA mentioned also this article looks interesting what's the theory for why people don't use desktop Linux this might be a free video in the future let me know in the comments if you think that's worth doing a video on anyways that said it's not all Wine and Roses in the EU there's some worry that the European commission will cut funding for the ngi zero Commons fund an important funding source for open source projects if all funded projects are open source it's a different angle we don't need a fund for just open source stuff if all things the government pays for have to be open source I would be okay as weird as it sounds to say I'd be okay with killing this open source program I am if everything has to be open source now and all funding is now for open source in the US there's some support for open source but not nearly as much as in Europe the federal source code policy for instance requires federal agencies to release at least 20% of new custom developed code AS open source software however it doesn't mandate the use of Open Source I didn't know about this 20% rule that's actually kind of cool is there more info on this found it here publishing all new code AS open source allows the GSA to exceed the omb's goal that 20% of code be published as open source interesting that that's like a formally stated Cod or goal also have code. Json interesting this is all of their releases very interesting all rails didn't know the government used so much rails hurts good to know though fascinating stuff final col in the article is that Switzerland is well positioned but we need to see Europe and the US move no man you to the UK sorry all regardless I actually quite like this I personally really like the idea of government money being spent in a way that benefits the population of that place the most and the source code could be very beneficial to lots of people be it soft developers working independently businesses that already exist users with specific accessibility needs all of these types of things are easier if there's good open source references and I really like the idea of getting more big open- Source projects as many great open source things as there are there aren't many examples of big open source applications like actual services like Twitter that you use most of those tend to be closed Source they might open source some libraries but you can't see how the whole thing works and that's a really unique opportunity here is that these government projects can good examples of gigantic software projects that are maintained well built well and most importantly open source so we can look at it and reference it there's a lot to think about here hopefully I covered enough of it let me know what you guys think in the comments and until next time peace NS




## T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScript, Tailwind, Prisma & More) - 20230323
about a year and a half ago I made my first ever video where I coined the T3 stack in that video I made an app where you can vote on which Pokémon is most round using all the tech that we love here nextjs Prisma Planet scale trpc verell all the usual stuff but I wanted to go in further the stack has changed a lot since the P3 stack is its own big viral thing I've seen dozens of other creators making tutorials of their own but I wanted something official and I put a lot of effort in for this so we're going to build a full Roundup clone of Twitter from scratch with one catch you can only post emojis I think this is going to be really fun it's a great highlight of just how much you can get done with the stack from zero to production ready I went out of my way to make this tutorial both beginner friendly and useful to experts make sure you watch to the end because there's some really cool stuff I don't want you to miss about how to take this Tech and push it really far in production everything here can be done by any developer and can be shipped to the scales of millions this is the exact same stack we see companies like Cal using obviously for sell my myself at ping and I can't recommend it highly enough some quick notes about the services we'll be using today they all have insanely generous free tiers like you can scale to tens of thousands of users generous free tiers I don't know how they stay in business on top of that I've been deploying on all of these services for months if not years some of them for the better half of my career and also these brands are all sponsoring the channel they're part of the T3 deploy partner program they are not sponsoring this video they have no saying what we're doing in here I'm using them because I like them but they do sponsor sponsor me in order to support the channel I hope this is helpful we've put a lot of effort into this tutorial so without further Ado let's get started with the official T3 stack tutorial building an emoji only Twitter clone with all new projects I start I tend to do the same first three steps first initialize second get it on GitHub and third get it deployed I like to deploy my applications really early during my development process so I can be sure everything's working in production that way if I run into problems later on I can go back to the latest working version and figure out what changed since I find that if you wait to deploy it becomes much harder to understand why things are going wrong so make sure you deploy early and often in all of your development process as with almost all projects I do nowadays we're starting with a great Community created tool create T3 app you haven't seen it before create T3 app is a fantastic way to get started with your nextjs project comes with all of the T3 stack Technologies at least the open source Parts we're not going to use all of them in this project and I'm going to show you how to replace the ones that we're not using with the ones that we will be the goal of this stack is to be modular and types without compromising on the scale of your applications it's one of the easiest ways to get started and build really powerful applications so let's do it literally can just click copy go here so when we create with cat3 app you have the options to choose between JavaScript and typescript we're going to choose JavaScript because I want to show you it's the wrong option you can actually only pick typescript as much as I love nextto I have grown to prefer third party off Solutions we'll be using clerk for this video we'll get into that in just a bit but for now we're going to check all the other options because we are using Prisma tailwind and trpc so we select all those we want to initialize a new repo R PM install sure that's a fine Alias and in just a moment we're going to have a fantastic setup and for those inevitably asking why not pnpm or yarn they're fine pmpm is better yarn's kind of dead but none of it matters I'm using mpm cuz it's the default everyone has have it installed anyways it's it's the easy one so we're using mpm anyways we're going to go into the project chirp going to use the shortcut to open up vs code and here we have all the files for the project the first thing I like to do as I mentioned before is commit getting started and then we need to put this on GitHub the easiest way to put it on GitHub honestly is to go to the GitHub website on the top right here which you're not going be able to see because my little thing in the corner is covering it there a little add button little add button new repo owner myself I'm part of a lot of projects that's why that option is there we'll name this uh chirp going to make it private for now we can make it public after the tutorial is done and we specifically don't want to check any of these options because we already have the repo on our machine and those will make a new repo with stuff in it so we can push an existing repo copy the contents here paste it in our terminal and now this is up on get up if I refresh here you'll see the project is here so let's run on our machine make sure everything works mpm run Dev spin this up everything connects fine hello from tier PC this all looks good let's get it deployed really quick as well so how we're going to deploy it you'll know how we're going to deploy it sell.com ignore the absurd amount of projects I have in here including something very similar to this one that I totally didn't build from scratch to make sure I could do this project well new project and if you haven't already signed in to verel sign in with your GitHub account you'll immediately have access to all of your GitHub projects including the one we just made import scroll down click deploy we don't have any environment variables yet but if we did they're very easy to add I can go to the environment example here copy you can copy the contents of this file and paste and it will automatically split it accordingly we don't want those vbls we're totally fine for now but deploying I do think something's going to go wrong when we deploy though just as expected we're getting an invalid environment variable this is one of the coolest things create T3 app does the file is a little complex but don't let that scare you inside of the environment. MJS file we actually validate the environment variables that you're running with so if you forget to include in this case your database URL you're going to get an error in production or wherever else you're building letting you know that this value doesn't exist when it should we already have it in ourv here which is why we didn't run into that error but in production we don't have a value there more importantly though the database URL we're using here is for sqlite and we don't want to use sqlite we want to use Planet scale because we want a database that scales this is a production ready application after all so let's go initialize a new database on planet scale Planet scale.com signing in now my personal and create a new database it's important to make sure that the location of your database is the same or as close as possible to where your versell functions are being deployed I'll be using uswest 2 for versel so I should also use uswest 2 here we'll name it CHP DB cool now we have a database for CHP and in here we have methods to connect there's actually an option you can click here for Prisma that will tell you exactly what you need to put this is a password so I'm going to have to reset this after it's important to know when you're like live or showing this code to other people that these values should not be publicly shared and they shouldn't even be committed when I put this inside of here you'll notice this file doesn't trigger anything in get we actually get ignore the EnV on or in create T3 app because it is so important you don't accidentally leak these values by committing them so we ignore this definitely the right call we gotten some arguments about it but trust me you don't want to commit your virant variables it's not worth the risk if we go back to the EnV we have the database URL but we also have to make other changes for Planet scale because right now it's set up for sqlite and we want it to use Planet scale myquel so if I search Planet scale for cell or sorry Planet scale Prisma quickly Prisma quick start scroll already have that all installed and here is what I was looking for going to yo that we're going to go back here we're going to hop into Prisma file schema. Prisma this is what Prisma uses to generate and connect to your database very important more importantly we need to replace that so now instead we're going to use MySQL we're going to use the database URL from environment we're going to use Prisma for relations because Planet skill doesn't have traditional relations in my SQL because it's using Vest under the hood it's a bunch of technical mumbo jumbo just know that the way that they scale you need to build your own relations more strictly with IDs but you can use Prisma to make it feel almost identical to any other relation system in equal really simple stuff once it's set up don't think too much about it I promise you it's not super important just yet so now that we have this all set up and the environment variables changed I should be able to npm run Dev and connect fine here more importantly since we're using Prisma I should be able to npx Prisma Studio which gives me access to the DB directly when I click here we're actually going to get an error because the database is not synchronized with what we have in our schema our schema expects the database to have ID created at and updated at with this model example but we haven't created any models in the database easiest way to do that with Prisma MPX Prisma DB push this tells Prisma to take the current state of things in your schema and set that to the database wherever it is usually I would use a separate Branch for doing my development from the production database Branch another cool planet scale feature but for now doesn't matter just going to synchronize to production use the same database for both it's not not too hard to deal with now that we have that done we should be able to npx Prisma Studio again and this time there are no rows in the table and from this UI we can add new rows if we'd like super cool feature Prisma studio is one of the coolest parts of Prisma I get a ton of value out of that we'll be using it a bunch later in the tutorial more importantly we can now push these changes and deploy so first thing get status when I'm adding on get I like to use- P after get add so I can pick the parts I want to add it's like a mini code review as you're doing your changes it's really helpful add that get commit move to my SQL now that we have done that I am able to grab the environment variable we have here yoink hop back here go back to versell fresh settings environment variables paste production normally you'd want a different branch for development but I'm just going to use the same one for everything it's way easier for now just a tutorial but ideally you want to keep those environments separated and now if I was to redeploy or actually it should be redeploying if I pushed oh no that redeploy is going to fail because I did that before so since I did that too early I have to go in here and manually redeploy but this time since the environment variable that was missing is providing it should deploy without issue and look at that generating without issue wait just a moment longer we should have a production URL that works there it is if I go to CHP R whatever that is Tada we have a production app on the web going to go make sure I have the functions deploying in the right place quick that's in settings under the project go to functions you can pick and look at that it's not we want this in PDX that's Portland Oregon which is Us West to changing that saving that now it'll be updated the next time I deploy nice and easy and we're done with that half cool but we still need one more piece clerk has been made it way easier to manage off especially if Mobile's also a problem you have to deal with really happy with the service I couldn't recommend it highly enough let's get it set up super quick so we're going to go to clerk dodev already signed in so I can just go straight to the dashbo board we're going to create a new application CHP I don't like having email as a authentication method I very much prefer to not do anything password related so we're going to not I also don't really want a Google sign in what I want more than anything is just GitHub we're going to hit the GitHub switch we're going to turn off that other switch promise you looks fine on my screen this is just my contrast being weird for my screen recording cool once you've picked your authentication methods that you want to support you're pretty good to get going I'm going to be lazy and go through the next guide to set things up because it is that simple there's a bunch of stuff like callback URLs that are normally obnoxious to set up that clerk handles for you you don't even have to set up keys for ooth when you're still setting up you can switch them in production later so for now we're going to just follow along with this guide oh they have the new docs we'll follow along with that we're not using app rer just yet so we're going to use the normal nextjs guide first thing we have to do is install clerk G copy paste while that's going on we're going to go back into the dashboard in order to grab our API keys and these are forv so I can copy go back in here paste more importantly I can go to forell and paste the same values settings environment variables paste save and now we have those saved there if I did everything here correctly then we should be able to get started so I'm going to go here to the clerk provider example where we wrap app with the provider the value of wrapping your app with the CLK provider is it means every component in the application has access to your authentication State really convenient for knowing if you signed in or not and rendering the right content so we can go hop into the app file under Pages uncore app this file is kind of like a component that wraps your entire application very convenient to have something like this in your app but uh yeah dangerous to touch this component because when you do everything you do to this affects everything in your app but clerk kind of should affect everything in your app because your authentication state is important autocomplete that import than that's all we have to do here yeah nice all done think they have a middleware yeah to use server side functionality you need to add the clerk middleware to your nextjs app here's where things get fun for the stuff we're doing with creat T3 app this will allow us to have authentication when every server request is made by embedding the off State inside of the request itself via the requests we know if users off they're not based on their cookies but we don't know how to process that without doing it on each request and rather than manually doing that when the request is received we can do that is part of middleware on an edge before it ever hits our own servers but if those words went over your head don't worry about it you're good I promise so we need to go into basically anywhere in here just put it in Source middle wear. TS it's a magic file name that tells nextjs hey this is a middleware just run this before everything else going to delete all that cuz we don't need it and I think we are done cool now middle wear. TS will run on every request we can console log here to be sure not running and you can see here middleware running because that request is processed because every request gets processed through the middle right now awesome huge step since we have this all done should probably add a signin button make sure it all works right let's do that kill all these things we don't need anymore now there's a signed in component we'll just use this for now go to Pages Index this is the homepage we can delete most of the contents here sure and it doesn't render anything unless I put stuff in it I'm assuming no sign in button this seems fine as a quick test oh that was working before I think yeah now you have the sign-in button we can click that you have the option continue with GitHub or username I don't want username as an option so we're going to go back to the clerk. deev settings and make sure we have it set to only let you sign in with ooth we go to chirp we go to user and O email phone off turn this off too yes we want any contact info we want the only method of off to be GitHub if I refresh here now look at that only GitHub is an option nice and convenient continue with GitHub failed to construct URL invalid URL interesting that might have been because I refreshed or it could be because I already had a cookie do that again cool no hour this time probably just cuz I did the weird refresh in the middle but right now we're not doing anything if we're off there now we have no way of knowing so we should do is const user equals use user then I can I like to double knot when I do the syntax in react so if yes if not not user which means if there is a user or if there isn't a user we do aign in button and we'll do the opposite for assign out so there is a user sign out button oh is it because user yep it's cuz user has properties on it so it's user is signed in my mistake there we go now the signin button renders when we're not signed in click that and now it's a sign out button instead Tada so much better my bad on that anyways now that we have this all working might as well get stuff started on the server right let's do it get status get add get commit add off and now we have our application authenticated up on the server ready to get rolling so let's get rolling sorry cat break you know how it is he gets needy I've been traveling all week so he's missed me a lot one more important piece I want to make sure we know when things go wrong in production as much as I love the new forell logging system I do want something a little more thorough and when I'm looking for something more thorough I go with axium axium is incredibly easy to set up you can sign in use GitHub or whatever else I have multiple accounts because I use it for my company as well so I'm going to sign out of my company account so I'm going to sign in with my GitHub instead or not found because that's not the one I'm using here my open source or we already have versell linked if I didn't it would be two clicks but I'll show you what those clicks look like going to go to versell settings sorry Integrations and once you get into Integrations you can just search axium click add pick the org I only have one or you should probably only have one I have a lot you can pick if you want it for specific projects or all of them in this case I'm just going to pick chirp because that's the only project I need this for connect and now all of the logs for this project will go straight to axom where I can search through them and find them way more easily really bud let's actually build the application now that was all fun stuff but uh we ought to write some code don't we thankfully when things go wrong it'll be very easy for us to identify when they went wrong and how they went wrong now we have everything else set up so first off we actually need some data to render in order to have data we need to have a database let's hop into the database and we're going to make a new model for a post right now we have this model for example which is a good starting point change this to post we really need to update it at I like using CU IDs for created at it's a nice format because it is consecutive while still being unique IDs pretty convenient you can make it anything technically but I'll just leave that as the default you have the creat at you need the content which is also a string and in planet or in my sequel the string length is weird so I'm going to manually set that to a ver care of 255 which means that it can be 255 characters long since they're emojis a lot of them count as two characters managing that length will be annoying but uh we'll get there when we get there why won't we my mouse yeah let need a user ID which will be a string I think that's it yeah that's it guess we'll call it author ID it's more accurate you need be able to look up all posts by a given author we have to go through all of the posts to find them the easiest way to do that is to create an index so in this case app at index brackets author ID that's all you need to do and now this will be index Bas on author ID we can look up by that instantly instead of having disav or instead of having dis scavenge the whole table we don't really need example anymore so I'm going to kill that I need need to run two more commands MPX Prisma DB push it's going to push the updates to Prisma it says we're going to be dropping a table it's totally fine but we also need to generate the new DB State locally because this file isn't typescript so our typescript code doesn't actually know anything's changed easiest way to do that is mpm install you can also do MPX Prisma DB generate but mpm install will trigger that automatically and now you'll see if we go into here actually going to get an error on this get all call because example no longer exists because of course it doesn't we deleted it so get all now we want to return posts if I go here we'll see post is now an option let's restart typescript and lent quick seems like they're out of date cool that's the typescript error if you're not familiar a typescript server error if you're not familiar typescript runs a server in the background if you ever get an error and it doesn't seem right command shift p and you can restart the typescript server and you should see things behaving as expected and now if I go back to the front end code here you'll see we got all this junk back more importantly if I console.log hello. dat however over this you'll see data has a greeting string or undefined which is uh not what we're looking for because this is API example hello use Query and we don't care about that what we want to do is const data equals API dot example. get all. usequery and now data should have the correct type of post array so if you're not familiar with trpc the syntax might look confusing the te R is trpc lets you create server functions that run on a server in this case a forell server to actually do things like fetch data from the database so that you can get that data in the right shape authenticated and whatnot to your user without having the user run the database code themselves you never want a user to connect directly to a database when you use something like forell it's way easier to deploy that connection method somewhere else and here with trpc it's just as easy to access that code even though it's living on an entirely different server than the computer the user is using and in order to get to that backend code you can literally command click and here it is we currently have a router named example if we go to the trpc route here you can see all that means is we have example example router we could rename this to whatever or create our own which is what we're going to want to do here we're going to create a posts router again routers are just an arbitrary way to break things up we could put everything in one router I like this way of breaking things up though so we're going to do it and copy paste rename this to posts router we don't need hello anymore we still can use a get all so we'll keep that for now not using Zod just yet but we will be in the future a procedure is in here we have a router which we use the create trpc router helper to create and then we have a public procedure which is a method to generate the function that your client calls public procedure is a procedure that anyone could theoretically call without being authenticated in this case we do want get all be public because we'd want anyone to have access to all of the posts if you can should be able to open the homepage without signing in should be nice and simple to work with now that we have this set I can grab post router we can go back to the rout I can make a new key here posts post router that doesn't exist because it hasn't been imported but we can do that I can delete example router honestly we can just get rid of it it's not being used for anything cool and now we have this get all key go here doesn't work but the magic of trpc is this will all autocomplete from here posts. getall do usequery and again I can command click and it brings me to the backend code from the front end code these two different files run in two different places this one runs in the user device this one runs on our servers but we can still go back and forth between the two like they're on the same machine it's such a convenient developer experience and it lets us move very very fast so now we're fetching all these posts we should render them somewhere I'll just put them under here div data. map post div post. content div cool these are going to need a key so post . ID keys are a way that react uses to identify what should or shouldn't be updated it's not super important but it will keep the amount of times us to render down slightly so it's not the worst idea now for every post we'll have that render if I was to go to Local Host really quick now you'll see nothing new because we made any changes to make it appear there's no posts in the database yet so why would that appear so how do we get a post I could go write all the code to make a post but I I mentioned before prisma's studio is very useful and this is what I was referring to so if I go to npx Prisma Studio since we made changes to the DB we have to reset the environment for our Dev so close and reset the dev environment when you make those types of changes just to make sure everything's up to date now that we've done that I should be able to load this and not get weird errors anymore more importantly I can go in here we can go to post we can add a new record first we need contact so we'll give this some eyes really save oh no I forgot to give it an author ID oh it didn't even give it the content this yeah Prisma I love you this tool is so awful you have to click out to validate that save and now it has the eyes in it we'll get the author ID later because we want to see there we are and now new posts are rendering here the goal wasn't necessarily to make everything perfect it's to show you that you can use Prisma Studio to quickly access and make changes so you don't have to build all the environment just to test something quickly like rendering a post more importantly though now that we have that working get status get ad select select select add- P does not add new files so I have to add this manually now that I've pushed that with versel all new pushes will automatically deploy and go in here we'll see in the next 40 or so seconds this should be deployed and working as expected pretty magical and now we have the updated version you can see the eyes are right there where they belong awesome we've made so much progress in not a whole lot of time really proud of that let's actually finished building the app though so we should start we haven't really done anything even resembling styling so let's get to that first thing I want to do is Ditch basically all the Styles here we'll just delete that for now I do like to put some Styles in the body like I want to have the global background color and such because if you don't put that in the CSS file then it won't affect the first load and it will only work once this page loads in I want this to work always and here we have the Styles Global file right now we're just importing the tail one stuff all obviously set up for you by create T3 app super convenient we want to do a little bit more so we're going to have body at apply BG black text we'll do slightly lighter than or not white but a gray I'll I like slate recently so we'll do slate 100 if you're not already familiar with the Tailwind colors they are incredible if I type in tail into the colors Auto Complete because I spend so much time on this page just ripping ripping uh God hex values sorry words are hard such a useful page all of the tail and docks are great but man the color system is incredible I steal it for so much stuff now if I go back to Local Host you'll see we have a black background with whsh text Tada as much as I love how this looks we can probably do a lot more with the Styles so uh let's do that quick close on all the tabs I'm not using we should try and clone the Twitter class centered view we will do that quick prefer to do that here we could do it in app since it will affect every page we don't necessarily want to change every page you pick where you put it based on what you do or don't want it to affect I'll probably just put it here and we can reuse it we can even make it a reusable component in the future but for now just put it all in here love keeping things in one file makes things nice and easy so main class Flex uh justify Center div this is going to be like the main contents div and to make sure we're modifying this correctly class name equals PG red 200 that way we can see it against the background here this needs a width so w full Max W2 XL now it's going to be up to with 2XL but what we can also do here is make that only happen when it's a certain size so now we'll only have Max with 2 XEL if the size is medium or larger so on a smaller scale it won't do that I know the pink background is annoying but it makes it way easier to know if things are working correctly also want the border so border l are is there Border X curious there is that's so convenient God every time I use tailin I'm like amazed at the other things it has I know about kill the background color so we can see it more clearly it's now apparent the height isn't high enough so H full that doesn't do it need the H full here and that doesn't do it either because the body isn't big enough uh easiest solution here going to be H screen these now contradict we'll get an error there because we have talent linting super nice and Tada we now have the Border edges correctly placed the Border color there is a little bright though so we're going to dim that down slightly that's border slate we'll do 200 yeah let make sure I'll try 400 see if it looks better ah yeah the 400 looks better I like the the dim there for that but things are way too close here I don't want to add padding there because I want to be able to do it inside elements in the future but we should have this top nav be split in some way class name equals b or border B border slate 400 now it has a border on the B botom it should have padding do P4 Flex justify and we don't need to justify Center this all div and Center class name equals Flex justify Center and instead of a sign up button we should render an actual like header component we'll get there in just a bit but now h i we'll leave the sign out for now we should split the tweets better too class name equals P we'll give it a bit more space border be border slate 400 so that there will be a line under each one and this should be Flex or class name equals Flex Flex call so that it is a flex column when we add additional elements in the future we will have more easy way to test that is to do I'll say both exist even when they don't and if no data return guess this is a good time to introduce you guys to one of uh the cooler features in react query I can have an is loading check there and if no data or is loading we return loading ideally what you would do is if is loading return loading and then if no data return see if co-pilot smart enough cool it is something went wrong and now we're sure by the time we're here that we do have data so it shouldn't be mad at me for that anymore Tada because it knows data has to exist at that point super convenient I just did that quick so we get have multiple tweets obviously don't do that in line like that just a temporary solution now we can see these are appearing correctly with the Emojis okay so instead of this bad sign up button we should probably start creating like the traditional create wizard that we see on Twitter I think this is best as a separate component just because it's like fully separate we might want to reuse it on other Pages cons create post wizard we're going to need the users info here in order to actually render the preview for the user like ID and such so we need the user info here const user that'll be the user info we can return something else if we don't have that no user return I'll just return all for now that's fine and then we now know the user has to exist we could grab a mutation we could go make the mutation I want to do that just yet I want to get this actually rendering something decent let's put the image in dot profile image URL nice alt tag is just that looks fine to me we're not actually rendering this yet we need to render this on the condition of user is signed in so I can just do that now if user signed in we'll have this which is obviously way too big so let's get to some Tailwind class name equals Flex needs class name equals Flex Flex this doesn't need to be a flex this needs to be a size we'll do w48 h48 rounded full Tada still way too big let's go a bit smaller with Tailwind you can usually just bump up and down until you're close to what you're looking for and then adjust accordingly we'll go way lower we'll do 12 that's too small 16 that looks about right to me so maybe I'll go a tiny bit smaller yeah looks good to me need to have an input here input this going have a placeholder type some emojis see how that looks absolutely terrible we got a lot of styling to do with inputs generally default input styles aren't great especially once you have like default colors than you normally have in the browser so let's give this some new properties class name equals first we need to get rid of the background that killed the background honestly it already looks way better it's going to need some padding on the side uh where do I want to put that padding so generally I don't like using margins and if we were to add padding here it would effectively be behav a margin not the worst thing honestly I often put like a little div between things but for now it's easiest to just put a gap that looks like a decent space maybe a bit smaller yeah that looks good cool now we have the gap between the elements this can expand as much as it needs to and I can type probably make this full size is this full size BG red 200 it is not full much better and then grow Tada now it's all the right size kill that because we don't need it anymore I don't like the outline on this what's the code for that it is outline none cool outline none and now we have a pretty stand looking input that looks just like the one on Twitter nice this all looks solid right now clicking this doesn't do anything we should make profiles work we'll add other routes in the future but I want to get this first page looking correct and we can go back in and add the rest of the functionality so that we have that we don't have a way yet to render profile images here because as I showed before in the database they don't exist the ex Prisma studio and you'll see in posts we don't have an author ID so we can't render anything yet so we need to put an author ID there again I don't want to do this all correctly just yet so what I'm going to do instead is we're going to console log user dot I'll just console log user for now in here we should get a ton of stuff being logged has crazy things like backup codes whatever we don't need any of that what we need is the ID now we have this ID I can copy go in here paste make sure we kill the quotes around it save now we have the user ID is coming back here there's a lot of ways we can get the data from that but since we're not using a traditional relational database to have the users in the same DB we do have a relational database technically it's SQL based we could keep everything in sync using stuff like web hooks from clerk but for now it's easiest to just get the data straight from clerk I don't think we need to do that on the client side when we can do it with a single call from the server show you how we do that real quick so if we go to the place where we're actually getting this data it is right here again command click to bring us to the backend function we're currently immediately returning the Prisma post.in many I don't want to immediately return a promise I want to actually use that promise so we're going to make this a sync const posts equals await also going to make one change here here limit 100 I forgot how we actually do yeah take again type safety incredible it will auto or you can in this case control space and it shows you all of the unique options you have if we only wanted to select posts by a specific person we could do where user or account is it author ID we use yeah author ID and you can put a unique ID here and now will select things like that auto complete and type safety are so much easier to work with when you're building like this so we have the posts here but we don't have the users all we have is their IDs and we need more data specifically we want to get the user profile image URL so how do we get that from here we use the clerk API I don't mean like go fetch stuff from clerk I mean we're actually going to use the clerk client it's super helpful then we need clerk client so const users equals O8 clerk client need to import this nextjs server see how convenient this is from clerk they will actually provide you with the nextjs package crazy things like this to just fetch like clerk information so clerk client. getet I think it's do users yeah. get user list and this can take stuff oh that's pretty convenient one of the keys the get user list call from Clark can take is user IDs which is a list of different IDs that you want to be fetching so in this case we want all of the author IDs from Posts and I can even limit this to be the same 100 so it will never be able to get more was it user ID not user IDs so close co-pilot there we go cool user ID is a string array this will get all of the users information for these posts and we can quickly console.log users here just to approve that we'll continue returning posts for the time being but when I go here you can see we're getting a ton of info but importantly we're getting info we don't necessarily want the user to have like password enabled top enabled and all this other stuff we don't want this to be returned for every user for every post so we should filter this down there might be a way to do that through the clerk client I don't care to do that say we're going to do a custom function const filter user for client equals user we'll get this from clerk we just want the type so make sure that's type import you can return the ID I don't want to return all that stuff name user dot username so we can keep calling this username just for consistency sake and we also could use the profile picture user. profile image URL again I'll try and keep the names consistent now when we pass this a user we'll get back just these three things so after we do the await here we have users we can filter dot well it's not filter map filter needs to be wrapped we syntax isn't the prettiest thing but here we go now we have filtered users with these specific Fields way easier to work with and then when we want to actually return everything mapped return posts. map post and this needs to have the post and author we get that this seems to be wrapped as an object now for each post we are grabbing the user that made it using the author ID this is effectively creating a relation so when we call this I can go back to our client and hover over we can just map over data but we need to grab the post off this so do that we also have this user info that we didn't before oh it's not User it's author now we have this additional field that we didn't previously have and we can do whatever we want with it super handy and we know that because it's all coming back through typescript this is part of the type definition if I was to go back here and I was to rename that from author to user I have to save before we get a type error over here because that's not named author that's now named user super super handy now we have this info we're going to want to render way more here I am certain we're going to need this somewhere else in the future so it's easier to break it on to another component notice that I'm not using new files just yet don't make new files until you know something's needed somewhere else that's how you end up with a bunch of files in your code base that no one's using for anything at all keep me everything in this file for now uh we'll call it post view equals well we need the info from this post and here's where I'm going to show you guys a really fun trick in trpc rather than having to define the type for what this takes because like I could sit here and type out all of the things that a post view needs to render a post but we have the type it's whatever get all here returns so I need one post off this that seems like it's going to be obnoxious to get the type of right well we have a small trick for that in the API we have some helpers defined we want to define a post type so type post with user equals router outputs cool this is a type if I go here it comes from the actual router that we've defined you'll almost never need to be inside of this file but it is useful to know what it does it creates the actual trpc next API definition that we fetch from but we also use that definition to generate the router input and output types and since we have those helpers I can now from here select posts get all and now this is going to be post with user post author array but we don't want that to be an array we want that to be just one of the elements from the array so we're going to do number and now that tells typescript hey we want an element from this array type and now we have here post with user as I don't know why I would to click to make that appear post with user is just one post and author which means we can do props post keep Hut keying the wrong hot keys my bad and now we can do whatever we want to in here if I go back I'm accidentally scrolling too far my hys are all being super weird at the moment yoink return yoink post probably isn't the best term for this since it has like a sub post I guess I can just do props post with user then const post author equals props and now that all behaves as expected I can go back here do that rather than doing that I'll do full post and since this has two keys like if I hover over it has author and post because I dumped the prop directly we can do the same here dump the prop directly and it's missing a key and we can get that easily with key F post. post. oh not double bracket maybe yeah that was silly me sorry cool now we will return one post for each or we'll return one post view for every post properly keyed with all of that data making it all the way through we have everything that we need up here now too super conven one thing I did notice is that we're getting or undefined for the type here that shouldn't technically be possible there's a bunch of ways we can assert that that's not possible the easiest one though honestly exclamation point we might get an error saying forbidden nonnull assertion not a big deal the other thing we could do is throw if there's any that doesn't match but yeah this should be fine H we'll do it the right way the easiest thing here is to not immediately return this so no longer brackets there at the bottom return const author equals if no author throw new trpc how do we do is there a message on tpcr I don't use tpcr too much I know just throw CU I'm lazy but tpcr is the correct way it has an actual error code that will throw the right status symbol and such and we need to put a message here we'll say uh author for post not found and now we know author exists I can delete that and now what we return should always have an author yep author is no longer or undefined nice and simple again typescript forcing us to actually check the things that we're doing this makes sure each post has an author and if it doesn't we throw and once we have all of the posts for each author or once we have the author for each post we return that all mapped together and now we have all the data we need to render this correctly let's actually render image source equals author. profile image URL and we'll see we have that same fun problem from earlier Joy how do we deal with that let's get to it well obviously this needs to be Flex so uh Flex the start cool that helped I have no idea why there's this one post at the top and then the two after that's a little sus uh we'll just keep styling this for now and figure out what's going wrong in a bit I'm going to yink the image styles from here we'll deal with alt in a bit okay cool that fixed that but I don't know where this third post is coming from okay oh I know what it was from that was a bad State because the database yeah why would that have been in a bad State I can't sit here and honestly say why that happened sometimes if you see something weird just do a refresh I'm guessing that there were some persistent data from an incorrect state in the past hot module reloading isn't always the most reliable don't be scared to hit refresh every once in a while okay so that padding is way too big what are we using for padding in here looks like we're not uh we have a padding for wrapping this section so that's probably what we should use here yep that is much more aligned we want to get that text aligned as well though so let's fix that so here that need's a gap we did Gap three before I believe yeah that looks nice now we need to actually do something with the content span honestly this should probably be like a separate div we also to put the username there and such let's do that now div I'll say class name equals Flex Flex call because it needs to be vertically stacked and we're going to have the div with the username here we also make this Flex is going to need to have more info than just the username Flex span this will be author Dot username close the bracket there now we have that you can put the at here by putting it in the string out there I try to avoid doing too much string stuff inside of jsx template directly so instead we'll do this in a string template I entirely missed all of that at for the at sign then dollar W that oh cuz it could be null I know what we can do we can go back to this type definition that is so convenient being able to command click and go where you want to be so up here if no author or no author. username Tada now if we don't have a username it will throw no long going to do that wait why did that not work oh that's annoying we're actually unmapping the type wait no we're not or no author. username then at this point yeah that should if no author or no author. username oh yeah it's not deep checking enough God typescript is not the smartest always yeah it's gonna yeah it sees that correct okay then why is it lost the type there I guess author's type isn't asserted but author. username Ah that's annoying and now yeah types script's stupid cool we've now fixed that type error no that's not string or null need to restart isent yeah cool so this es L being Dum there that's now fixed author. username is valid and if we look here that looks correct the actual font color looks super off though so we'll give it text slate 400 it's a little dark we'll go with that I'll do more styling in a bit should probably put the Tweet like when it came from or what time it was posted at that is a really nice feature I like having the Little Dot honestly the easiest way to get that little dot is to actually go to Twitter find a tweet that has it select it that's a funny tweet Adam now that I have the actual character we'll just do one hour ago to see how it looks looks awful because we need more spacing between these things um trying to think the easiest way to do that there's a bunch but uh I don't love any of them honestly we can include this in the next span it's going to need to be a string template anyways we'll do that now knowing that that white space isn't being honored but uh welcome to strange CSS behaviors where that gets killed why did that not happen when I did this before Oh might because I had a link around it before I just put a a tag around this will that do it I'm super curious it won't good to know cool and getting white space to behave is one of the most fun challenges in all of programming Bing that makes it look a good bit better put the space there we'll do it nope white space never gets be or white space never behaves so that font being bold looks weird can I do class name equals font thin I just put a gap will that work I wonder God I hate CSS we'll just put a one Gap that looks fine CSS hacks obviously you should make a better container for this I don't care to also Less in love with the Bold so I'm G to kill that yeah that looks fine to me not perfect but I've done worse for Less I would like it to actually put the date the easiest way to deal with dates that I use nowadays is DJs reason I'm thinking of DJs is I love their relative time that's not actually how you use the relative time plugin here it is so with ajs you can install a bunch of extra things if you need them because they want to keep it small by default so npm install DJs we go back here import DJs From DJs import look at that Tada and now you have DJs with relative time funny enough if you try to use DJs without doing doing this it's smart enough to yell at you when you actually try to use the relative time functions so if I go back down to here DJs dot I guess you just call DJs we'll pass this the post. created at dot relative or I think it's time since let me I wrote this somewhere oh from now there we go now that shows correctly 18 hours ago because I took a break and went to bed so that was actually how long ago I made that post originally super convenient all in that one line honestly this is a weird enough thing I'd probably break it up into a separate component but for now this can all live here it's easier that way you might have noticed that all of the what do this matter about oh because this is a type import cool now that'll stop complaining not using this anymore we can kill that so you might have noticed this yellow underline on the image tags that's because we're not using next image next image is a super nice plugin that nextjs provides that combined with forell will actually optimize your images so that they load faster and in the ideal condition for every device you can also have blur hases and other things to make the images look nicer as they fade in it's a really nice plugin so let's make the switch over switch this to image make the same change here this one's still upset because I don't have an ALT tag so we will add the alt tag of this one should be a little more specific since it's a specific users profile picture so we'll say at author author. username profile picture nice descriptive alt text it's missing required wi property oh yeah they like to have specific wi and height properties so with the [ __ ] is a safe number okay what is 3.5 Rem convert to 56 pixels that means I need to go swap it above as well why was it not mad here oh since it's going through clark. deev we have to add that to let next know hey by the way you can optimize these images it's safe trust me bro so we will hop to next config and that would go under easiest ways to look at the actual docs images remote patterns easy the domain's even easier and the domain we needed was images. clark. paste save and now probably have to restart next because there was a config change and finally if all goes well we should have optimized images Tada we can do tons of fun stuff with that I want to do blur hashes because they're really nice uh get placeholder equals blur does it not automatically blur anymore used to create the blur placeholders that's so sad that's annoying rip whatever things load much faster now good changes we've made a lot of changes I haven't committed in a minute so going to do that before I regret it next image tag style up I think that's a fair description of what we've done since cool I was noticing how awful the loading state currently looks it also blocks on everything ideally we would have a separate loading state for when this comes in versus everything else especially since this will be blocked on database and this will be blocked on clerk which should resolve much faster so let's break these things up a little bit first I want a nicer looking loading spinner there's a lot of ways to get them since we are deep on Tailwind already I'm just going to search Tailwind loading spinner and see what comes up this looks perfect to me so we're going to yoink make a new file since this will be a reused thing since we don't have any reused components yet I'm going to make a file for it or a folder components in here loading. TSX export const loading spinner equals turn and there's going to be a couple instances of class select those change the class name otherwise that should be good to go and if I go back not to server but instead to the actual page we were in index. TSX was going to close everything else I have to worry about it as much scroll down to here where we have the loading so you have to import that just to see how it looks it looks okay kind of prefer the white one does it have I'm just seeing where the color is done it's been dark oh Phil cool then let's go back to loading and see the fill gray oh no that's the same color was it grade 200 they're using oh gr 300 we're using slate for everything so that's going to stick out let's change those both from great to slate that looks really good but it's also in like the worst possible place there's a bunch of ways to handle it honestly the one I foundly be the easiest is to do a separate component con loading page class name y'all CSS wi are going to hate me for this but I it's just so much easier to handle loading State this way absolute uh top zero right zero W screen H screen Flex justify Center align Center or Aline middle I think and then loading spinner and this is what we're going to use instead also going to change this to is loading or true because I want it to always show cool so I missed one of my properties is it items Center yes it's item Center cool so line middle is not necessary then it's also way too small so let's fix that we should have a way to increase the size okay we have h8 W8 here which are uh not ideal also a margin why do we have margin right two I do width equals 40 height equals 40 yeah cool that works so what we're going to do is have number or size be passed here as an optional number now you can pass the size or it will be 40 by default oh that needs to be under props cool and now we have the option to pass a size here so we will pass this a size um we'll give it 60 because it's like the big one nice prop size or 40 is probably too big for a default we'll do 16 we're going to need this in a lot of other places right now we're only showing that if user user or data are loading I'd prefer we only show this in the case of user actually user's going to return fast enough we should probably not show this for that case we should just show nothing until we have that data so let's do that for now also going to bind these both the names uh posts loaded so if no user loaded and no posts loaded return we'll do empty div I'll put a com is a weird Behavior return empty div if both aren't loaded since user tends to load faster cool and we don't need to return loading page or something went wrong honestly I kind of want to contain that feed in a separate component now because we're combining data flows here the only issue is we won't start fetching this data so how do we make sure the data is being fetched in both places but also break that off and call the same hook twice so let's do that const posts uh or we'll call it feed equals this doesn't need to take any data in we can yink this guy paste it here we can um yeah we're checking for users State before that's fine we'll get there in a sec I want to yink this first yoink return yoink data oh yeah it's not defined that we need to have loading state so if no data throw new error I'll just return it in line cool why would data be never then oh it's posts loading that was done with me posts loading because it's is loaded for the user one so clerks and react queries conditions are inverted which is a very annoying thing to deal with so the only reason we're using this here even though we're not using the data is to make sure this fetches early the other thing we can do is that start fetching ASAP cool because with react query you only have to fetch data once and as long as the things you're fetching with are the same it can use the cached data so now we can use that cache data we can start fetching early and have it ASAP do need to actually render that feed though uh Full pter Slate feed and here we're not handling okay so say if not user loaded or I think that the is signed in was coming from here before yeah we'll delete those no we don't even need that that should be a much better state in the browser yeah you'll see that this comes in first and then we have the loading State for the rest of the page and then the rest comes in right after don't need that anymore the other thing we can do to like more properly simulate this is always return here so you guys can see this is now the behavior when the rest of the page hasn't loaded just yet which is a much better Behavior good stuff cool looking great so far let's get that committed loading States one more thing because it's bugging me I want to make the text bigger on the post so let's do that uh the actual post here class name equals text Excel yeah looks a good bit better how do I have this set there that's h 2 XL might be better for this yeah that looks a lot better we can rock with this cool time to actually make posting work yeah time to make posting work I'll commit that easiest way to get started with something like this command click so the one problem we're going to have is actually knowing who you are as a user and if you have permission right now we don't have anything set up around permissions with trpc because we didn't use create next off thankfully it's a somewhat easy problem to fix we just have to dive in and fix it so what what I like to do is attach the off state to the context inside of each query so right now we have access to Prisma directly in CTX we don't have anything else if I go to definition here oh it's going to go through trpc source so this is one of the few times where we actually open up not rout but the trpc file you almost never need to edit this file so we see here you want to create uh you want to modify the request context or create a new middleware or type of procedure and those are actually the two things we want to do here so let's dive right in so the first thing we need is the session we don't need this create enter trpc context thing is this is useful for like testing stuff so honestly I'm just going to yoink yoink skip this helper probably useful if you're testing I'm not writing unit tests for this and even if I was I wouldn't be testing at that boundary kill that as well but in here there's data that we don't have that I need how do I actually get the user info at this point well within options we actually have a request so I'm no longer going to underscore Escape that we do actually want to use this const request equals Ops this is a nextjs request from an API which you can actually pass to stuff in clerk like const user equals get user sorry get off because technically we're not going to fetch the user from clerk each time since clerk is using uh what's it called uh jwt's it's able to verify on your server whether or not this user authenticated or not using the signature of the JWT allowing them to skip a call back to their server just to be sure the user authenticated so this lets us know for sure this is this user and give us a little bit of info about them specifically signed in or signed out off object which has uh the behavior of if they are signed in or not I could just throw this directly on honestly it's probably the easiest thing and now when we call this in other places it will all behave as expected super handy the magic here is now when I use it in a procedure so we won't always necessarily have off but we can enforce or but we can make a procedure that enforces that we do the easiest way to do that is to extend the public procedure with a new middleware it's not the same as a middleware in nextjs where it runs on an edge function it's just a process that runs before your main request processing super helpful for things like attaching off and making sure users actually authenticated since we're already attaching the off earlier we can verify here very simply const and force user is off we're going to continue using the T helper from trpc Little where oh look at all that good thing there's so many people writing code like this so it's that easy to just autocomplete our way through we do need to attach the session here of uh dot yeah CTX session CTX do session and this should enforce that session exists sadly we're using signed in or signed out let's clean that up a little bit actually because I don't want this to be a signed in or signed out State user dot this is actually we'll call this sesh for now const user equal sash. user and user can be null or undefined that seems more reliable cool we'll call that user instead of session because that's what that is should we call it current user yeah better naming and of course right is I'm starting to make progress with this my laundry goes off but more importantly now this will always return with current user be because if it doesn't have a current User it's going to throw an authentication error this also should be a trpc error and the trpc error will have codes import tipc error in this file I guess so [Music] code Tada now to actually use it all I have to do is const private or export cons private procedure equals that is not how that works we'll just extend that not user use and force user is off and now we have a private procedure that when used will always have an authentication object and now we can make a new protected procedure if I go in here we can make a new key oh look at that we don't this be public we actually want this to be a private procedure and this will have context which actually has more info than previously so that needs to be wrapped we're actually doing anything in it yet you should probably do that wrong buttons const user or author ID equals CTX dot current user do ID you'll notice we have all of that info from the current user because we've asserted they that they exist if I go back to the procedure before that's a public procedure or even if I was to just change this from private to public you'll see we don't actually know current user exists because it could be null or undefined but when we switch it to private we know it has to exist super super convenient this makes life way easier and you have this procedure that is guaranteeing that the user is again authenticated what is this upset by there's no a weit so it's not technically a sync yet so we can deal with that this needs data it's currently upset because we don't have content I'm assuming yes content is declared but not defined but where where did we get that from we don't have an input again trpc makes these things magic we do need to tell it what input we want here though in this case we should use one of the core technologies that makes stuff like trpc so powerful something we haven't touched on just yet we're going to be using a lot from here on out Zod Zod is a validator often used for forms I'll look it up quick Zod was invented originally to validate that a given piece of data does match a specific shape so if you want to make sure that you got an object where you have a user ID that's a string that's a certain length and all these other types of properties Zod makes it very easy to do that there's a ton of cool things in here one of which we got added recently that is very helpful I wonder is it included in the docs it is z. string. Emoji which Mak sure that a string is a valid Emoji so in this case we want to do a z. object that has content which is z. string. emoji Min one uh we did two yeah we did 280 care in the database so that works for me and now we know that content is a string that is one character or that is more than one character or one or more characters and 280 or less characters and that's all you have to do to guarantee that but how do we use it input and now it's right there content string and we know that exists again because if it doesn't trpc will throw the error for us and a user can't call this without passing this validation so I can put content safely there and now oh I forgot to put uh input. content and that is totally safe Tada magic if we want we can return the post so return post that's all it is it's that simple to make some or an API endpoint that does something that's important and if I go back to the client we can actually make this work relatively quickly I will go to create post wizard const mutate equals API dot that's pretty handy mutate will have uh an input oh we're not actually using it yet uh but if I call mutate without putting anything in it it should get pretty mad at me for that yeah cool expects one to two arguments but it got zero that's what I expect we can fix that pretty easily so if I we go down to here uh sure I don't feel like managing the state here it is much easier to do this all outside of react think Onkey press is bad [Music] Onkey down cool now we have the Onkey down yeah I don't want to do this this way I want to do this the the boring old school react way so we'll have const input set input sure values input oh this needs to be type well stop complaining no oh use State isn't imported there we go also this doesn't need to be typed because we're passing it a string so the type is known again you very rarely need to declare types only for inputs here that all is behaving correctly and we can just add a dumb submit button for now button on click equals there again co-pilot doing its thing that all looks correct to me we go back here it looks ugly but if I post this click post nothing happened but if I refresh H nothing actually happened interesting we get an ER unauthorized maybe I didn't set something up correctly on my my context Setter there then if no context current user throw unauthorized user oh that should have worked console.log sesh I'll just log both of those real quick okay oh because user doesn't that's so annoying it doesn't actually have user it just has user ID and if session exists or not because it doesn't have the info that we need well the type that that's giving is incorrect then because we're getting back user from get off even though users undefined just some bad Types on Clerk's part I will bug them about fixing that in the future if this isn't going to come through with that info it shouldn't mislead in such a way so now that we know all we're going to get back is user ID to know that it's assigned in person we'll do that cool so let's grab the user ID that is what I was getting here right yep cool and user ID is what we're going to use we will also use that here now if we actually go back to the code where we're doing this it's going to be type erroring of course because we don't have current user. ID we have user ID which we know exists because if it didn't it would have thrown way ahead time and now I did this all correctly go back to Chrome try once more again we're not seeing anything happen but this time if I refresh we'll have the new Post in here Tada I'm immediately noticing some things specifically it's out of order and also we don't need to do doubling up posts anymore so let's go to feed stop doing this CU that's awkward so we don't need the question mark any work we know it exists and if we go to we were actually fetching the data it was in the wrong order the best way to fix that would be in here is that not yeah order bu that's what I thought it was I'm forgetting the specific Syntax for the in Prisma I could just look it up but uh yeah let's just do it Prisma order by filtering and sorting cool is it sort not order oh yeah cool it's just a thing underneath order by created at descending cool so now it will be ordered by created at stuff in reverse order if we go back here refresh took a second to load But Here we are now it's in the correct order where this was 2 minutes ago this was 19 hours ago we can now post with different emojis and it works you'll notice though it didn't automatically load and set stuff it's not even actually clearing the input there are some quick ways to fix all of that I will show you the easiest is to on the client update once the post has happened so the first thing we want to do is deal with the loading state so if a mutation is happening we want to render things a little different so in here we'll do mutate is loading it uh say is posting so that this has a better name we'll go in here say to disabled equals is posting and I'm also going to append a class name and we don't need to do that just yet ideally we would dim this we'll get there in a bit but for now we just want to make sure the input is disabled while a post is occurring and we want to make sure this behaves a certain way on success so on success we want to do something in this case we want to set the input to empty we also want to update the existing post on the screen easiest way to do that is to grab the context of the whole trpc like cache through the API context call so say CTX equals API do use context and in here CTX do invalidate I forgot the is there a better way to do this yes I see it that it no dot yeah invalidate no what's upset what's this upset about oh because it's a promise that I get why it's upset but we don't actually care because in here this this doesn't care about what's going on with the promise so if I put a void in front that tells typescript hey we don't care this is just a thing we want to have happen in the background automatically so now when I make a new Emoji post put a skull post disappears and the post appears directly underneath that's all the core functionality complete for the main app and its functions truly magical get commit H I want to do my usual piece by piece I saw a console log in there I don't necessarily want so we go delete that in a sec working posts now we have posting actually working pretty cool but I want to make sure users don't spam posts that would be really bad and the easiest way to limit the amount of posts a user can make is to use a rate limiter a rate limiter is a pretty common pattern it's used to enforce this thing can only be hit this many times usually use like the user ID or their IP address to enforce that going to show you just how easy it is to protect based on their user ID easiest way to use this or the easiest way to set up a rate limiter is using up stash they are a fantastic service for everything from redus to CFA to cron jobs to event management all the annoying things to do in serverless are handled pretty well by them and one of the things they have is an awesome package for rate limiting so there's a little console button here you can't see I can see it's just fine though sign up with GitHub again if a service doesn't have sign with GitHub can we really trust it we're going to create a new database for this I'll name this uh CHP rate limiter you specifically want it to be Regional not Global because if it's Global it might not distribute correctly if people are spamming and Regional just guarantees this thing's going to exist in one place it might for a little bit since we're in uswest 2 probably want to put this there it's now being prepared for us while it's being prepared for us I'm going to search uh up stash rate limiter I've talked about this package on Twitter a bunch already you might have seen it before but it is so helpful all you have to do to use it is install it should probably be installed in Dev only but it doesn't matter too much also need to install up stash Rus there's a lot of places you can do the rate limiting at I'm going to do it just straight up inside of the trpc post function that's the easiest place we're going to conate limit is new rate limit rus. from environment only problem here is the from environment expects it it even says here when we hover over God obsessor type definitions are incredible this Tri to load up Rus rest URL and up Rus rest token from your environment using process. environment we don't have either of those but if we go back here show you if we scroll they have all these different ways to hit it but if we go to here is it the rest URL that they want I didn't think yeah it is the rest URL and rest token so I can click copy here go back to my EnV paste this all and I can also more importantly go over to versel and paste it all in there as well CHP settings environment variables paste check check check save and with just that one change we now have the ability to rate limit using this rate limiter it's currently going to set a rate limit of 10 requests per 10 seconds I want to be a little more strict than that let's do three per minute so instead of 60 s we'll do or 10s we'll do 1 M change that to three requests per one minute and if I scroll down to the mutation we have the author ID cons limited equals a weit I think this actually returns success uh tells so when we call rate limit. limit this is going to add a tick in their little Checker and it will tell us hey are we able to do this or not also just realize we lost our typescript server at some point during these changes cool that fixed it fast success and from here if not success throw new trpc error so there rate limit code there is not too many requests same difference and now if a user tries to post too often this will immediately throw and prevent them from doing that it is that easy to add a rate limiter to anybody saying that this stack isn't production ready or can't scale here you go that's all it takes you on a serverless environment without impacting your database or external anything we now guarantee that this can't be taken down with just straight up spam it's so easy to make changes like this and you can't even get this far if you're not authorized you have to have a valid cookie to get this far and then as you spam you'll get kicked out we can limit by IP address we can limit by so many other things but with this one simple change using up stash it's that easy to keep users from spamming us obviously we need to commit that now we're production safe so cool what else do we have to do well it would be nice to show on the client if an error occur like if we try to post and we can't because there isn't an emoji like if we type normal text and we try to post it's going to fail but we're not seeing that anywhere I would like it to be a toast honestly that tends to be the easiest thing so let's do react toast react hot toast is probably my favorite toast solution nowadays there's a bunch of them in react and they're all pretty good and here are the instructions on how to set things up we're going to go npm install react hot toast while it's installing we're going to go put that somewhere again they said put it somewhere where it's pretty high up nothing higher up than app Tada now that's at the top of the app we can toast wherever else the easiest place to toast is on error so if I go here here on error can import toast do error failed to post please try again later it's probably not the best error but we'll show you what that looks like really quick can go here post failed to post please try again later again it's that easy to add some of these things I would like for the toast to appear at the bottom rather than the top think you can customize that in toaster yep look at that we want bottom center so if we go back to app TSX bottom center and now when we get an error it won't get in our way because it'll appear on the bottom instead pretty cool huh like is that easy to do these types of things and react and this stack obviously that's just a traditional react thing but here we have the error message coming all the way through we're not getting the error message just yet const error message equals e. data do Zod error dot did field or yeah field errors. message and this will either be a string array or undefined so if typ undefined what okay so we know error message is a string array so okay cool let's M about the nonnull assertion can I do if message and error message zero and then not do that cool I can do that else and let's see what this looks like now oh look at that we didn't actually get the message through that's annoying uh can I just console LOD error don't care soter object field errors content okay that's annoying so the type's just wrong S error. field errors do content there that's the a message we're looking for haha now that is the correct message that is what we were looking for and if we want to give a custom message again Zod makes this trivial if we go to the actual place where this is defined create in here in emoji we can put a custom error of uh only emojis are allowed now we try to post without an emoji we'll get a different message coming from the server so this is a message the server created in the validation process that it gets displayed on the client super cool truly magical and if I clear that and post something else like a arrow pointing I hit post twice because post isn't disabled when a loading state is occurring so we should do that quick too is loading is posting we can also put a loading state in here pretty trivially that would look nice let's do that we'll say value does not or input does not equal empty string and we'll render button and we can [Music] say is posting cool that loading spinner doesn't appear in the right spot at all that's fine we can make this bigger first size equals 20 div also should probably just hide the button and not is [Music] posting we don't need to do disabled State just become this instead class name equals Flex Flex call doesn't need to be Flex call justify Center I'll just say true for now yeah it looks right that looks super nice skull post loading State appears Tada look at that good ux only thing left here is submit on enter press which is not too to do on key down wrap this with the wrong bracket type I bet this will even an auto complete look at that fantastic now put a new Emoji press enter loading State and the post has been made magical don't feel like going through all those changes so we're just going to commit it all at once uh posting loading States plus toast if I was doing this for real rather than waiting for the server to block on those validations I would much prefer to do it on the client side using something like Zod and react hook form so we could use the same validator to check on client hey is this valid or not also using react hook form to manage the input state is much better than doing the chaos I was doing here where it's actually in react State this is how you get that weird sticky key Behavior where you're typing and then keys don't appear then they all appear at once it's because we're actually rendering all of this on every key press far from ideal just wanted to get this working fast I would absolutely got that for reactor form if this was for real though cool big things that are left are the profile view and post view I would like for clicking the profile picture or the title here to bring me to their profile but I would also like for clicking this or anywhere else in the post to bring me to this post both of these will be separate pages with separate views the easiest way to get started when you want to make a new route in nextjs Pages directory usually take the one you want copy paste it so we need two new routes that are going to have a specific matching syntax so it' be nice to have like the slash syntax like we're used to on Twitter for the profile but we'll start with the post which we'll need to indicate separately so we'll do Post paste index. TSX in here but this needs to be marked somehow so we will do IDT SX and now we will be getting now when we use the nextjs router ID will be a thing we have access to very helpful and for the actual route outside here copy paste again we're going to rename this one to be slug DSX so this will catch on everything that isn't in this folder so it won't catch on post it won't catch on API it won't catch on any new files we make in here but it will catch for everything else in this case at slash stuff so this page will catch when we do logo host 3000 at Theo we'll do at t3g and it's going to catch here which right now the page is the exact same but if I was to replace what it renders scrolling down here we were to change this to profile view then we'll see this is a different route we go back here it will still render normally first thing we should do is actually get links working to these posts or to these new pages so honestly I'm just going to delete everything else in here that cleared out a lot fast do we even need the user info really we don't cool nice simple rename this to profile page honestly let's do the same for in here post single post page now we have these two separate files that have here that represent different routes close all the things we're not using at the moment now we need to go to our post view which we have here and we want want to make these links we're going to use the nextjs link component the reason we using that instead of just in a tag is when you use the link component the routing will actually occur on this device rather than Ur words are hard the reason we're using the link component is that it will prevent the routing from triggering a full browser refresh so we don't have to wait for the server to get data send us a whole new HTML page instead it can happen in the single page app style where you click a button it can immediately start loading the next page and next is smart enough to start pre-etching things in the background too it's really powerful pattern we change the hre to be slash at dollar sign author. username nice now that will work and I would like for this or clicking the from now part here to ah no because the dots going to be linked to yeah whatever if the dot links to the post that makes intuitive sense because the whole thing's going to link to the post that autoc close that I also want to turn off autoc closing tags it's more annoying than helpful and this needs to be slash poost slash and then the post id post. id there we go now post. ID matches this and author username is that you can click either we'll load profile view or we click here it's still going to say profile view because I forgot to rename it we will rename this quickly to say post view there and now we have routing working pretty cool I might not be the biggest fan of file based routing but it is super powerful to be able to Define some files and have a whole linked system like that working correctly let's quickly add that all new files also quick note on get ad- P if you're still using that it does not trigger on new file so you have to manually add new files that's why I just did the D A there new files for new routes here's where we get into some of the fun magical things that even trpc die hards might not be familiar with I actually learned about these things when I was working on this project and they're super cool especially if you want to not necessarily do the full SSR pass on every page but you do want to be able to embed metadata let's take a look so right here you can see we have this title create T3 app on every page that's not what we want to name this we'll probably rename the homepage to CHP let's head down here cool CHP uh thinking honestly I think a bird would be a funnier and no because we have a the fabicon which we'll deal with later this could be the default on every page let's do that so we're going to throw that an app when you throw head info in app it will be the default but then when you put it in other files after that will override so we no longer need that guy hop in here need the icon need to rename this to be post we'll just leave the title here for post Title Here both these profile I would like for this to be the actual profile for this user though so how do we do that well the first thing we should do is Define a trpc query but we don't really have a place for it yet so let's start by creating a new sub router that makes more sense for it we'll create a file uh we'll name this one profile. TS I'm going to be lazy and go yank that we'll rename this from post router to profile router we will kill everything inside of it we don't need any of that anymore uh I don't think we need the rate limiter either for this at least I don't need a lot of stuff that's in here silly public procedure so we'll start from here pretty simple empty router W like almost s necessary so first we need to have a way to get the user and we're going to be using the user name to get it so we'll name this get user by username it's going to be a public procedure do input z. object username z. string do query I will admit that this stuff getting in the way as your typing is really annoying it's nowhere near as bad on like normal resolutions but when you're on this like like I'm scaling 7 720p when I stream and record which makes it look a little rougher than it is so hopefully that won't be quite as rough in your environment I have one too many PRS here and now all I have to do is get the data easiest way to get what I'm looking for here oh the clerk client call there is incorrect it's going to be get user and user get user needs to be user ID so get user list this needs to be an array the easiest solution there is to make it one if no user us are not found I should uh we'll do that so we're only grabbing this one user from in there because we only want the first one theoretically if username finds multiple we wouldn't want multiple we just want the first one so yeah that should return the user we don't even need context because we're not doing anything with Prisma here so if we want to go use that in here const data equals API Dot oh I forgot to actually add the router so if we again go back to here we're exporting profile router we go to the root import done now we have profile dot get user by username dot use Query we need to have a username here we'll just hard code mine for now if is loading if no data return div 404 and then we know we have data we'll just render oh no this going to be another one of those where we have way too much data on the client we'll take a quick look it is almost certainly uh data if we go take a look at this quick click here yep that's way more data than we want so we have to do the filter again time to break that filter function out since we're using it in more than one place I'm going to make a folder in server helpers and back to post we're going to yoink this guy ooink new file in in I made the helpers filter user for client. TS export and when we move this out we just did a small subtle but one of my favorite things that happens with TPC if you scroll through this file you'll actually notice there are no type definitions in this file at all because all input is done through validators like z. object z. string this isn't a type definition this is a validator a type definition is inferred from the validator but this is not a type definition then when you actually return something this isn't a type definition either this is inferred from the return all of trpc is built through inference and strict validation which allows you to have guaranteed inputs in outputs always of the correct shape even here if you wanted to make sure the shape of the output was always correct you can actually do an output validator that will trim off data that you don't necessarily want so I could do dot output think do it earlier dot output input an output validator there super cool pattern I haven't started using it just yet because usually I prefer to filter in line here so filtered filter user for client user there we go now if I refresh this you'll see we get way less data back we're just getting ID profile image and username and that's all we really want here so now that we have all of that info we can do things with it I'm rendering the data user but one thing you might have notice is when I refresh this it takes a sec to load which means we're not actually getting the updated head and metadata here I don't want this to wait I want to have this data immediately your intuition might be get server side props but the problem with get server side props is I will lose all of the typing of that data because if I export const get server side props this function is going to run on every request to this page once this is deployed on versel which sounds great in principle but it's going to block every request it's not going to have cach Pages it's going to take quite a bit of time to spin up a lot of the time and actually getting the types from here to my client sucks and most importantly it's not actually using trpc to load any of the data at all so can we get around all this this is where that fun trpc thing I was talking about earlier comes from we're going to use the SSG helper the SSG helper is a super cool feature where we can preh hydrate some data ahead of time so instead of get server side props we're going to do get static props get using get static props doesn't mean that this can't rerun it just means that it will be treated most place a static asset and we can trigger revalidation when and how we choose here we first have to create the SSG helper so I'm just going to copy and paste this specifically here paste the context uh how do I want to do our context the only real thing we need is Prisma so we need to grab the app router K is going to type error because it's missing things yeah we need Prisma import not not import cool this is also going to be missing user which uh we could fetch here we don't really need it right now so I'm just going to do user null was user ID nice and I need to import super Json there we go now we have this little SSG helper so what's the point of this guy well it offers us some pretty cool superpowers I also forgot to uh give this a type doesn't really need it what am I using that for I'm not cool we don't even need the context oh wa no yeah I do I need this for the prams the easiest way to type this is to put the type on the actual variable definition for the function get static props is a type that next provides for us and here we're going to see we're getting an error because we are not actually returning a result if I go down here we can return props and right now we're not returning anything but it will stop complaining at the very least we need to actually do the fetching here's where the magic of here's where things get really magical with the SSG helper first we need the slug const slug equals PR or context. prems slug uh here we can throw no slug should probably do something different for that like return you to a different page or whatever not the best behavior again just making this nice and easy now we need to actually use the slug this is the same slug we're going to use to do fetching on the client side so we should make this pattern really consistent what's this Arrow no oh wait oh cool we're about to fix that anyways we need to use the SSG helper SSG do profile. get user by username that's pretty cool oh you want to do call it directory we want to call it prefetch prefetch is a really cool helper that lets us fetch this data ahead of time and then hydrate it through server site props we're going to await so that it's actually there and now when we're in here we need to dehydrate it if we look in the example here you give trpc State SSG do dehydrate and what this does is it takes all the things we fetched it puts it in a shape that can be parsed through nextjs server props in this case static props and then on the app side since we're wrapping with trpc we'll actually hydrate all that data through react query to put it in simpler terms this means the data is there when the page loaded or loads and this is loading state will never be hit so if I was to put a log in here if is loading console.log is loading that won't ever actually get hit because the inputs are the same oh we haven't given it static paths this is one other thing you need to know with get static props you need to tell next which paths are valid I don't really care here normally this is used to generate those path on the server you could give it I'll actually show you the syntax before I do anything else this needs to return something with paths which is an array and then a fallback Behavior we'll say fallback is blocking because we want to make sure we actually generate them in paths I could put the array with all the strings here like if this had at T3 G then when this gets built it's going to generate the page for my user but I don't care if it generates them ahead of time it can generate them on load so we're going to do that instead what is this oh async does not need to be async cool now we have all those paths and you'll see here is loading is still being hit because the slug is still including the at so that isn't actually fetching here so we should remove that from the slug so const safe slug or I should say const username equals slug replace at with empty string and now no loading state gets hit because this is generated ahead of time I know it's a small thing but it is actually super cool and since this will only ever change or at least the core data here will only ever change if the user name changes which would be a different page anyways or the user's profile picture changes which we can trigger as a server side update this will never change it's a super safe way to have statically generated pages with correct metadata now we can use that data in here we're currently fetching is loading that way but I can give props a type here too uh type of all infer and we should Define the props type so type page props equals infer get static props type and now this is the page props the only reason I'm doing this is I specifically really I forgot how awful the types are oh because we don't have something custom in here I want the slug well I guess I want the username so now that I've put that there this should know should doesn't know that I'm returning username I'm really annoyed that these helpers don't work well I don't care because we know what the actual type is here we have a username on this because we return that there and if I console log username we should see that appear t3g awesome the props coming through correct and instead of querying that I can use the username and the query directly so much simpler there is now no more loading State there is just the theoretical no data State delete that as well and now via just a little bit of magic oh all these are just types nice aren't those L rules helpful cool so we have all those types we have all of this returning correctly and overall a much easier way to get data into our client it's super powerful should probably put the actual profile name I guess the US might be formatted differently so we can do it that way let's start rendering so we have a lot of good data here I would like to continue rendering with the same container that we used on the main page here I think it's time to break that out as a component the yeah all of this and I will make a new component we'll call it yeah layout. TSX not the most clear nameing especially with what's about to change and act but uh or in next but new tutorials will come out as these patterns change export const page layout uh I'm just going to be lazy and continue oh no because FC doesn't have children anymore equals props props with children I can not pass that right nice now we have properly typed children of any form at all type yoink delete yink that div I might need to include Yeah I broke that oops uh second it seems to it's own div yeah it is yep this was the one I did not need to put there and we'll delete that one extra layer and uh yeah there we go the uh side border isn't working because that container's only screen height I believe uh H I should probably set a scroll here overflow y scroll there we go I'm also going to turn off page scroll because it's just a thing that annoys me uh only certain P like document Pages like blogs and such should probably have scroll on but uh I don't like it uh disable page scroll CSS disable it's overscroll Aha and if I did that then it should no longer yep now I can't over scroll it just stops when you try that is how I prefer that much better cool so now we have a decent layout and I can yoink said decent layout for other places like in here uh not in here in here now we have that same layout with the sidebars well the side uh borders super nice we should actually make this look pretty I'm thinking profile picture here fancy half cut off like background color username and big letters and then the bar and all the content underneath okay we'll start with the main content image and we'll make this a separate div first can throw the username inside of it class name border B border slate 300 we've been doing no that's 400 for sure nice now we have the pad or the color underneath we'll do just BG slate 600 for the background color of that for now actually no I'm going to want that background color to be aligned differently because I how I want the profile picture to fit in here wait now I can do that with a hack cool image source equals so that would autocomplete it didn't data. profile image URL also should be image tag because next alt equals data. usernames profile pick cool should probably enforce that username exess uh too lazy to do that need to give this a width and height width equals 48 height equals 48 cool uh here's where we get to do some fun stuff class name equals uh we'll do negative that's going to be too low um B that's not going to be enough we'll do eight now we're talking I do do need to give this a height though uh h48 see how that looks actually looks about right uh I'm going to bump this to 64 uh also let let's have some fun with positioning so what I want here is like the profile picture there half over half under just like on Twitter t3g you'll see see it's like half over half under and I just want to do that with some CSS hacks it shouldn't be too hard uh we'll do relative for positioning there because if we make that relative then we can make this absolute bottom zero left zero ml4 fantastic make this a little bigger uh mb8 is- 32 uh half of 96 is do I want to do a literal for this so I can update it in one place and have everything adjust correctly no what's half of 96 that would be 48 right yeah cool so we want 48 that looks pretty much perfect we also want rounded full border I'm going to do border two and Border black I want that thicker actually want this large I was right and half of 128 is 64 which I'm almost sure there's a buil-in value for that looks fantastic fantastic honestly does Twitter not have a white line for the spacing makes sense if it didn't yeah it doesn't the white lines are only on sides right yeah they did not do one there actually looks nice without it so we will kill that border bottom if we wanted to have a background image we would set it there but we don't so yeah looks pretty good to me where they actually put the oh all of the info goes underneath convenient I'm going to leave that open and close everything else quick I don't need any of that at the moment cool you want the name here I'm not going to actually do the name because we just have username so we could fetch name from what we're getting but we don't need it uh cool so this being here we'll put that there see where it goes is trying the other thing I could do is put this background and extend it under but that feels like more of a hack what I should honestly do is put a spacer here that covers the rest just so I don't have to worry about it it's the easiest thing name equals should this be a variable now yeah this should be a variable uh cons Pro pick size equals 28 wait no cuz then it can't be parsed [ __ ] nope tail One problems that's fine I could just do it with inline CSS but yeah nobody likes that I'll get roasted way too hard if I do that okay so class name is uh H 64 PX perfect so now this is serving as like a hidden spacer to give us the right amount of space before doing other things this is going to be the container with all of the profile information so uh I don't want to apply the font size at this level I do want toad or apply padding though uh we'll do p two to start I think P4 is what we've been going with though uh yeah that looks about right actually honestly because that's all the other info we're putting there I'm pretty okay with stopping at that just make it like look a little better font wise shouldn't be too hard uh cool text to excel again I like using string templates instead of doing a bunch of weird hacky stuff in jsx it's going to complain that username might not exist but it does I'll fix that later cool at t3g let's bold that cool that looks great and I'm going to do one more div border B border slate 400 w f fantastic and now we can immediately start loading the feed it might make that top chunk a little smaller because it is pretty massive Let's Do height 36 yeah I think this looks fantastic I since it's statically generated so like the image will be there I could do a BG black for this too so it doesn't flicker in quite as badly yeah I'm going to commit this because this is a ton of progress status get ad profile page with SSG helper since the posts can change more often I don't want to include those in the SSG helper I want those to load on the client side have everything else cached and have that just load in automatically the first thing we're going to need in order to do that is an actual API endpoint that gives us that data so I'm going to command click here we don't actually want it in this router we're going to want this in the posts router because we are fetching posts we could get profile all posts from profile but where you put these things arbitrary I just liked this breakup where post is for post things and profiles for profile things well you can get posts by a specific user ID so that's what I was thinking we do here get posts by user ID is a public procedure do input z. object which has a user ID z. string. query async ah we don't need to do that part we can just do CTX input and immediately CTX Prisma do post. find many where author IDs input. user ID thank you co-pilot just saved formatted automatically let's actually use that if I go back over to slug page again just going to close all the others because I am running on limited screen real estate now I'm going to make a separate component up here const uh profile feed equals I going to need a user ID oh props user ID is a string const data equals posts. get posts by user id. usequery user ID props that user ID nice should have an is loading for this one as well if is loading turn loading page if no data or data. length equal Z [Music] return user has not posted and then we can return div class name equals Flex Flex column and here's what we're going to need to break out that post view into its own own component because I don't want to rewrite it if we sneak over to the main page again in here I have post view as well as post with user the type so we're going to yoink both of these cut go to components post view. TSX paste let it complain about a bunch of things that we don't have here honestly what I'll often do when I'm riing something this big is I'll go to the page it came from I'll just take all the type defs no I'll take just all the Imports wrong word I'll take all the Imports paste them delete all the ones we're not using usually from bottom up because then doesn't have a lag when you make changes export that and we're done now I go back in here I import post View on the page and that simplifies things here a lot then here I can data.map post post View Post equals post we not going to have the user info and I also need to get get a key quick so key equals post. ID but we're not going to have the author information here because I'm not getting that off this there is a billion ways we could get this Honestly though the right way because theoretically in the future we will be interacting with other users info on this p h yeah since theoretically if we pass that data from the client side we could override things incorrectly and if we intermingle where we're getting posts from we wouldn't want to create that possibility so I'm going to go out of my way to make sure whenever we return from the back end we are returning with the posts user ID is attached going to make a little abstraction for this of const add users your data to posts sure and we'll have post be a type that comes from Prisma a type and we'll make that clear I'm going to yoink everything I'm doing in this uh function of the create in here uh did that not work oh it's cuz that's sorry I was just getting confused why why that wasn't processing but in here I can just return I don't need any of that anymore wow that's so much simpler now that we've broken that up need that console log either I want to make sure that that didn't break in here quick think you you return a promise it doesn't care yeah it doesn't nice cool now we've handled that I can go back in here uh this is post yeah that's where I want it to be post second dot then add use the data to the posts and now that's the same format as it was before full post and we have everything we need and I can render this here wa no I don't want to import anything I just want to pass this user ID use user ID equals data do ID imported oh did I not bring the from now over oh yeah I didn't my files back open that's under you know that would be in post view yeah I'm silly again the DJs thing is a little weird because you have to extend it like internally but also means I don't need any of that here I need that here though there we go is that pretty cool working profile view with all the content rendering loading State all handled totally simple understandable code easy to maintain and modify good loading States everything's Dynamic pretty cool all right let's commit all that render posts on profile page and we should also quickly make sure this is all working in production because again I've just been blindly pushing and one of the coolest things about this stack and the way we've been building is that it's continually deploying because of ver cell see all these check marks which suggests that we haven't had any issues so far if I go here click details we can see the deploy as it's happening make sure that there aren't any issues nice and if we click the link everything loads in as expected I can go to a specific profile by clicking the profile picture and everything's here I can refresh and that page content is always here now I want to sign in I click sign in continue with GitHub and now I'm signed in all in production pretty dang cool if I do say so myself next is the post view it's going be very similar what we did with the profile view but we want to render stuff specific to that that one post that we clicked on since we made so many changes here I'm just going to copy paste the file again copy slug paste this into here but this time we want to get a specific posts data we able to delete most of the page layout stuff I also don't want to have to redefine this proxy helper each time so I'm going to yoink all of that out to a server helper server helper SSG helper dot yes cool just gonna again yoink yoink instead of gtic props uh generate SSG helper don't need all that anymore I can delete all that in favor of this delete all that move these Imports where they belong all the way back up at the top here grab this file override this once more now let's get to work need to rename profile page to post or single post page leave' most of this the same we do need to get or make an endpoint to just get one post I'll hop into posts we're going to need the same user data when we do that so press page up accidentally get post by ID public or since it's already named post like the router is I don't think I need to do post. get post by ID so get by ID public procedure input is z doob and here I'm going to do the same thing we did earlier CTX Prisma do find or post dot oh look at that all autocom completing too many those but I do want to get the additional stuff here so dot then it's not do filter it's uh add user data oh I would just want to do that for this one okay I guess this one's more complex so it needs to be a function that's fine on post equals wait and then if no post throw new trpc error code not found oh since add user data to posts it's mapped you do it that way types script died time died again that was a funny one cool that should all now work as expected and if I go back to here instead of slug we want this to be ID we don't need to do any Replacements here and we're not fetching by profile anymore we're fetching dot by posts and just like when we call the API we can autocomplete our way here get by ID this needs to have all right you do do prefetch again I'll pass the ID down here we don't have username anymore we have ID we don't have this query anymore it's posts. getet by ID and this gets passed ID I'm going to format this nice and fancy because why not we'll do data. poost do content data do author. username that like that Isn't that cool we can delete pretty much everything here which means we can delete everything up here because we just want one post here and that's it delete all that stuff it's not being used and if this was done correctly should be able to click on that and load just that post would you look at that all done you can go back to the homepage click any one post it will load that post separately with its own URL you can even see in the or the title bar it's the correct thing there what's crazy is since this is happening on the server that title is actually correct in the HTML coming down to the client so if I was to actually I'll just push it and show you guys in production status commit separate SSG helper metadata fixed for or not even metadata fixed it's just uh full post page get push wait the 40 to 50 or so seconds before that is deployed and uh this should be done now cool it is so the cool thing I specifically wanted to show is if we go to one of these posts the first time it'll take a second to load because it's generating it but from here on out it's going to be instant but even cooler if we look at the HTML the server sending back so not in the Dom if we right click inspect obviously that's going to be correct the react code is running on the client it's going to keep things up to date we actually go in here and look at the HTML the server sends initially response format in here the title is correct because this is being generated on the server when react does its first pass through the app in nextjs the types are there the data is there all from this generate SSG helper hydrating the data ahead of time and then dehydrating it dehydrating it into the Dom that means that the HTML the client gets is correct immediately and once that's cached on the CDN it will be downloaded immediately too so this works great for not having to worry about your SEO if you want to have SEO data without breaking out of trpcs patterns there you go all the things that I need to wrap this page with all the things I need in the head are fetched ahead of time and I can block on that trivially it's so powerful I I love these patterns you can set custom refetch and revalidate times here as well no real need for that since none of this data can change but in the theoretical future where it could this is where you would put that ignore the outfit change pretend where where we were I have one small thing I want to add that's going to cut the build times on versel in half I already have a video about this but I think it's important to include you shouldn't be checking your types in lint on versell builds there's no reason to because GitHub C is free and it's right there so what do I mean how do we use it I'll I'll show you real quick if I've learned anything over the years is that writing yo files sucks rather than writing the yl file I actually asked chat GPT to write it for us so I went to chat GPT and I said write me minimal GitHub CI yo file that installs node modules runs type script type checking and also runs lint the reason I'm choosing to do this on GitHub is GitHub is where our code lives and the validation of our code should live with our code the thing that builds and deploys it should be separate our actual building and deploying at least for PO requests should not be blocked on if type checks pass github's role is to make sure the code is correct vel's role is to deploy the code that we give it so I try to separate these things it makes the performance of your CI pipeline significantly better if you do so I'm going to yoink this we're going to actually we can even copy this this is the path that it thinks you should put it in and it is correct so going to make a new file not in there here's our new file copy code paste here is environment variables I actually asked chat GPT how to do that they have this example here so honestly I can just copy the whole file again we can go in here the environment variables we need are all listed here node environment will come with the environment itself so we don't have to do anything there but the database URL this is the one we need to change so or well have something for we're just checking that it's a URL so any valid URL will work here uh copy the name perfectly database URL GPS fake.com cool and now we have everything we need add CI and now we have additional CI that will run on GitHub separately from versel so if we go to GitHub and check this out you'll see here we have a separate build running that isn't on versell if we were to go check on versel this build's going to take the same 47 or whatever seconds because we haven't changed anything here we just added this additional check and this check is going to run lint and actually I don't think we have a command for type check yet so that might fail yeah you can see here this failed missing script type check okay we can add that quick if you're not familiar in package Json you have scripts these are all different things that you can run from the terminal through npm and we need to add one for this so type check the easiest way to type check is to just run TSC I guess no Adit is fine thank you co-pilot for making our code even better now if I push this add type check command now it's going to go run and build on GitHub CI but how do we actually disable it on versell in order to get faster builds it's pretty simple we tell nextjs in the next config though we don't want it to do that so for typescript we tell it ignore build error is true for eslint we tell it ignore during build and we can also s swc Minify true it's an experimental flag for using S swc as the minifier instead of using babble I believe which should speed things up quite a bit as well all of this should result in our builds being notably faster so we can add that too P ignore build errors on for cell s swc minifi if I did this correctly we should now see separately running nice before I made this change it was 43 seconds and went down to 28 so yeah you should expect better performance more importantly you'll have different steps failing when you file a poll request generally I don't recommend merging straight to main when you're still working on a project solo totally fine but in GitHub you can actually lock the main branch you can go in here branches Main and set up a protection rule so you can't just just push straight to main you have to file a poll request even on solo projects I'll often do this because I like poll requests as a way to force myself to review my work and make sure things are okay before they're deployed and generally it's nice to have that step and just see like in here you have different checks for different things so I have my CI for build and I have my versel uh environment separately built here generally really nice to do things this way final thing to finish this project off so we need to give it a real domain versell makes this super easy you can buy domain straight from there it might not be the cheapest but it's so convenient to just have all your domains in one place and I buy pretty much all my domains on for sale now once you have it in here you don't actually have to spend much time in this page there is some magic so if you buy a domain oversell and you want to add like email servers you click the add email button and there's a g Suite hotkey there's proton mail all of these DNS records that normally take quite a bit of time to set up are oneclick setups which is so convenient if you've ever configured email servers before just a fun as side what I want to show off is once you have a domain how to add it to a given project so in settings domains since I already have the t3g G domain assigned to another project if I was to assign it here it's going to tell me when I try that I have to move it from Astro to here and we don't want t3g on this project anyways that's my homepage we do want a subdomain from it though so all I have to do is make up the subdomain let's come up with something funny uh we'll do bird emoji none of these are good bird emojis we'll use this one oh is it you have to like make it the special code uh I do this though Aha and for any normies I'll add chpt3 and I'll redirect it to the other domain cool in this domain it might not look super cool in Chrome but if you use a browser like Safari that recognizes emojis Tada I think that's cute so yeah chps now an emoji domain ch. d3g you can still use obviously close Safari you can still go to chirp God I could spell ch. t3g and it will redirect there all set up through versel itself directly significantly easier than managing all this yourself yeah I love domain stuff I think that's it actually for most of the core functionality there's a lot of small things I would like to do you may have noticed that I've hardcoded in a lot of places uh take 100 so we're only going to get the first 100 posts if I wanted to get more I would need to be doing pagination with infinite queries there's a bunch of documentation on how to do that on the trpc website highly recommend checking that out those query patterns are really cool for pagination and infinite scroll and a lot of the behaviors that real big apps need on top of that probably would go in depth on the way that links work inside of the post view because right now it's pretty Jank you have to click the time or the username I would obviously wrap image in a link but I would also want the whole card to be clickable to go to the Post but you can't have a link inside a link so you'd have to do some fun Dum hierarchy things there totally doable but not clean didn't want to waste too much time here I would also in the post creation view which is in the index file here create post wizard this is awful don't use state for this please use something like react hook form you could even share the validator on the back end and the front end you can create one emoji validator that is shared imported on both back and front and then use the same validator as the input for the mutation as well as for validating the form super fun pattern I use it all the time but I didn't feel like setting that up here because this was meant to demo how all the pieces come together the one last thing is in the future it would be pretty nice to have the database synchronized with clerk so I don't have to do all of the clerk calls it's not too bad because their service responds really fast and most of the things I'm doing here are well cached but ideally we would be actually modeling a post to be directly mapped to a user with a relation rather than the author ID string here that isn't relation to anything there's no binding of this author ID anywhere we have to on the server take these author IDs to go fetch user IDs in a true relational database we'd have user in here and you could do that using Clerk's web to synchronize stuff but I'm going to hold out for changes I know they're working on to make synchronizing your database with clerk even easier in the future it'd be really nice to generate OG image tags that have like the post in the user's name using the versel OG image Library this is a super fun thing I've mean to play with it it's a way to generate images trivially with Tailwind like syntax to actually have metadata when you like post a link on Twitter or Discord or something that shows a nice generated image per route super cool to have proper embed support with such a trivial addition I think it even supports Talon if I recall which is super duper dope I think that is everything this took absolutely forever to make multiple days of recording and way more time spent actually building the repo and getting everything just right I wanted to make this as informative and useful as possible any issues working on this project let us know in the comments and come check out our Discord if you haven't if you become a hardcore T3 stack user you should get something to support us this here the official T3 jacket we just made these I love them I went out of my way to make merch that I actually thought was cool not just another damn t-shirt so if you want a rep T3 in the workplace check these out on shop. t3.8 it thanks again nerds peace




## THE FUTURE OF REACT (I Did A Keynote!) - 20230623
if y'all didn't know I had the unique opportunity to Keynote reactathon I took the opportunity to make a bunch of bold statements as I always do and it was a really fun experience the video for it is up now and I wanted to watch it with y'all and react to my own talk it's gonna be a bit cringe but I'm excited to Grimace at myself and the silly things I said and did so let's give it a watch let's get started so want to talk today about react the past present and future and most importantly how he looks handsome Shame about the camera quality of the future of react is us the community react is built around strong Primitives I think we all know that it's both the beauty and also in a lot of ways the biggest weakness of react it's by Design very primitive we have these pieces that we it's also very quiet don't know how much I can do about that on my end sadly you can build and assemble and do incredible things with but with that comes lots of problems and challenges and I think it's fair to say that react asks a lot from us as individual developers we need to understand what it does and doesn't do and build Solutions around the things it doesn't so we can build great applications with reacts Primitives at the core so they said we needed a lapel link no I literally have like a headset mic on it just wasn't turned up enough The Primitives weren't always there though this has been a generational effort full of generational shifts and I like to think of the history of react and the relationship with reactive the community through these generational shifts in the moments that are centered around specific Primitives as they were introduced damn this guy's pretty smart real talk though I've been thinking in these like shift moments a lot more now I've talked about it a bit on stream but the general ideas there was components then there was Hooks and now there are server components and each of these is a big like Monumental moment in reacts history the obvious first I should stop cutting off this guy he knows what he's talking about which one is components with components for the first time ever we could reasonably compartmentalize parts of our UI in reusable fashion and I'm not saying react invented components I'm just saying react normalize them in a way that we started to really adopt them and see strong Traction in applications we even saw people using third-party packages that bundled and worked with components such as material UI which came out in 2014 originally as well as things like storybook really leaning into this component model and the idea that our components were a thing that we could assemble and reuse even between applications and as packages people could install in their applications themselves this idea was so powerful that I think it was key to that initial adoption of react the framework itself was great but when more and more things around these Primitives started to form and we had tools that were exciting Beyond react itself that's what I think adoption and more importantly excitement really started to happen you might have seen there I caught myself speaking wrong and rather than repeating the sentence I just kept going because this wasn't a video I was recording this was the talk and I wanted to keep it moving I was actually surprised I could shift my like way of speaking properly to go from recording video to talking yeah I was proud of how I delivered this one I also did way too much research about which react packages and like ecosystems formed when and figuring out how old material UI and storybook were and that they were pre-hooks and obviously are both very much built around components so I actually talked to the material UI CEO at the conference to confirm that I had my timelines right on this I went too out of my way to to make this historically accurate to my best ability but with this generation and with these incredible Primitives came some growing things the biggest one was Redux this I felt bad about because Mark Erickson was sitting in the front row and yeah but I clarified okay I think I I there's a point where I like look to him and like yeah not Redux specifically to be very clear but the the reality of State being a complex problem in a componentized model and The Primitives that react provided for this were too localized to the components to really be scalable and work well for gender a wider set of applications it was tough to think about state in one way and have it work for most apps and as a result pretty much every app I use in this generation and every code base I worked with used a different set of things with their own different opinions on how they should be used and it became a bit of a spaghetti nightmare and I think react understood this and they listened and they paid close attention to the community and worked with us which is why we saw such a huge shift with hooks the value of hooks wasn't just oh you can write your state in an easier way it was deeper than that State now had its own level of composability its own Primitives for the first time you could npm install State not just components and that's when we saw things like react query in motion happen framework Motion in particular the first commit was two days after hooks were officially announced it was really cool to see people have this click moment of oh the state being separate from the component means I can ship you state the concept in the life cycle around it and we now as the developers consuming these things can build on top of these ideas when you have good Primitives at the core you can build better slightly less primitive things around them and us as the developers who build applications with these things can do really incredible things I almost wore that shirt I just realized I'm very thankful I didn't I'm pretty sure I make the point either I did and missed it or I'm about to framer motion's first commits were three days after hooks were announced it was like the the creator of frame remotion was like oh this API enables the thing I wanted which was headless animation libraries that are contained but that doesn't mean all was solved I think we all know that otherwise we'd be out of job today I would be handling it for us so what were the growing pains here I'd make the argument that the big remaining one was the server and we've absolutely seen that in the past present and future I am going to make the argument that both of these Frameworks next in Gatsby were the growing pains here and I'm even gonna argue that next was a little bit worse here because it looked like they were building good Primitives get server-side props seemed like a good extension of what you could do with react where you now have an entry point that runs with server and then it hydrates this information throughout your application but it's not really how react works because there was a strong boundary between the top of your app and your server-side properties as well as a weird control flow of when the request hits the server when does the response actually make it to your components or does it at all that lack of clear method of actually watching your data go through your app made it so next was more a pile of hacks on top of it rather than a true react framework this was fun because Lee Rob was also here and I gave him the heads up that I'm gonna be uh yeah I'm gonna roast next a bunch here because it was bad most of next's back end Primitives were awful and that was scary as I became a bigger next fan over the years what I found was my best next experience were actually not using next it was using next as a host for my react application and a method for serving server-side endpoints that had better patterns not necessarily perfect but better enough that I felt like I was maintaining building a maintainable application but the patterns it introduced were incredibly painful which is why we're lucky that they decided to throw almost all of that away turns out servers are kind of hard and in a way that was new to the react team previously the problems that react solved were problems that existed in their side of betta meta had real UI application problems real experience interactivity and just general how do we ship a good app those problems I'm not saying they weren't hard to but they were hard in a different way mostly in a way that was at a certain point in the application boundary onwards so it was not necessarily the right place team or mindset to build good server Solutions and I think that's why it took so long server components happened to a lot of people's or a lot of people would argue server components happened really late most other Frameworks had a solution for this much earlier in their Journeys but I think react needed to better understand the server problems and let us go through the hell of server standards which you could sit here and convince me all day there is no such thing as fetch on server you cannot override that which does not exist ah that was such a hot take for me to drop in there I yeah yeah if you can't override that which does not exist somebody mentioned the how to avoid Death by PowerPoint video I have not but I hope that I'm following the rules of it I uh I do slides pretty differently if you haven't noticed I don't like bullet points bullet points are really dumb like really dumb that's the point of talking if your point isn't valuable enough to have its own slide then it's not valuable enough to be included in a presentation I don't know if I'm just YouTube brained but uh yeah I'm excited to watch that and see that I'm following the rules because that's exciting as such I think we're in a really cool unique moment here where after years of iteration on these things and years of playing with what react on a server looks like I think we're figuring it out now and the react team has done a great job of working with us to do that server components are going to need a lot of our help as this happens unlike hooks you can't just you can't just adopt server components you can't say okay I'm on this team at my company that has hundreds of Engineers working on our web app we're building this new feature we're going to use server components from here down in our existing react tree this allowed for me personally to push hooks really hard at twitch when they first happened I was able to say okay this is the pattern that the ecosystem is moving in these are the tools that we want to use that primarily support and work with hooks if we want to make the best and most maintainable applications going forward we should seriously consider and adopt these new patterns that is much harder with server components because the entry Point's different we just don't own the or if you have an entry point that existed already be it you're generating a static web page or you're using Express or you're using some other custom server Technologies you can't incrementally adopt server components the same way on top of that they're asking a lot more from us because now as developers of libraries that are Building Solutions in react you're no longer just thinking about how these things work on client or even how they work on client plus one server-side pass you don't have to worry about this relationship between the server and the client as much as this is for us to swallow and as much more work as the maintainers and Builders of these libraries are going to have to do I think that's what got us here in the first place the strength of the react Community comes from these Primitives both what they have and more importantly what they're missing in the relationship that this inherently builds between the react library and framework and team as well as the community and the library Builders who build into it and we're working really hard to make this future happen I was hesitant to put this in but I got bullied by I want to rant about what I was just talking about before I do my upload thing plug I think this is the important piece a lot of people miss with server components it's not like hooks where we can just start using them you can take a component that was a class component and refactor it as a hooks component your app is currently being served as an HTML file from any of many different cdns or backends or whatever moving to a model where you have a back end specific to your front end and it's architecture and its needs is a big shift but it's a big shift in the same way that having an HTML template and jQuery that updates things after the templates created by rails to something like react where that owns the whole render layer that was a big shift too react loves to challenge the the route that we enter our mindset with like the the point of entry and fundamentally changing from there down in order for react to work better on servers building a better interrupt between react and servers wasn't enough they needed to own the root and that means caring a bit more about stuff like routers caring a bit more about the way that we deploy things caring a bit more about how the HTML gets to the client in the first place and what pieces go to it as JavaScript these are all different things than what we've had to think about as front-end devs but they also let us think a lot less about stuff that's currently a separate pile of hacks the benefits greatly outweigh the negatives and in the end this model is actually a lot simpler for most problems I have another talk I did after this at chain react that should be on YouTube soon where I typically talk about how the model might seem like there's more things therefore it's more complex but in the end it is actually quite a bit simpler we're working really hard to make this future happen I was hesitant to put this in but I got bullied by a lot of people we're working really hard to build one example of this tools like S3 just aren't ready for a server component future so yesterday we launched upload thing a new tool to make it easier for full stack devs to do file uploads because the way that it worked before was considerate of the server side exclusively and there was other tools that were considerate of the client side exclusively and what server components enables is for us to build patterns that don't just understand server and client they understand and Define a relationship between the two we have to think a lot more about what we're building when we do this and react does to I think that's the really important part that I wanted to push now is that the react team has to and has chosen to learn from us in order for react to keep growing and keep innovating in the ways that it's so well known for it has to understand us even better if you're the type of person that shows up an event like this because you care enough to come to a place that's titled reactathon you probably understand the problems solutions and experience of developing and react better than most and as crazy as this might sound why haven't you reached out why haven't you hit up the react team to talk about your experience with it I'm sure we've all seen a thread with Dan on Twitter back and forth but there's more people and they want to listen I know that I chat with them regularly and they care so much and that's why this is happening the way it is and that's why the solutions they are producing have continued to wow us and push us forward in this ecosystem it's a back and forth constantly where an ideas Had A Primitive is made the community embraced look that's Ryan right there this is it uses it tries it finds limitations along back and forth ensues a better primitive is built for that specific problem the same thing happens and now we're in it the third time with server components and they're asking more from us than they ever have before we have to think more about how our bundlers behave and how they code split between the server and the client we have to think about you server and use client and one of those terms doesn't mean what it says it means we have to think about the relationships between all of these things in a way we haven't before but the result when it works is a level of composability and honestly just an ability to move fast with code you're confident in that I've personally never had before and that's the bet react is making they are betting on us to do the hard part which is convince our tech leads convince our companies convince our friends even that it's worth making this bet and coming along for this crazy ride because it's going to be crazier than the previous ones where obviously porting from angular or an old PHP app to react was hard adding hooks wasn't too hard moving entirely over to it obviously was but if you had a component you want to use the patterns you could server components are asking for much more buy-in and not just from us from other framework maintainers too like I don't think we understand the relationship between next and react as much I don't want it tangent too long on this but I should have put a tangent counter on my slides yeah the point I'm specifically trying to make here is that we now have to convince our backend Engineers on our teams and our companies that this is worth investing in and we're now the ones who do the like convincing some amount I think that's important that closeness isn't happening because versel is this big evil company trying to take over the web it's happening because the people on react that wanted to push it towards the server and take advantage of what they were hearing from the community realize the best place to do that wasn't necessarily meta and we're all going to be in similar places there too where maybe the team we're on at our company is the UI or like design team it's gonna be really hard to sell server components from those positions but that's the challenge they're posing to us we're no longer just front-end developers we're building infrastructure we're building back-ends we're Building Services we're building apis we're building database Technologies next.js and with it now server components has almost tricked me going back into my backend Roots because I've been in front and land now for as long as I can remember like five plus years mostly doing front end but these tools make it so much so much fun to compose these Primitives and to treat these parts of your server your database your API and all somebody said they thought that last one was the final call to action I was padding time at this point I had timed my slides before and I guess I talk even slower in my head when I'm planning for a conference talk because I had this time to 20 minutes and I finished most of it by 13. just treating them like you would any other component it's really freeing in a way and it's going to be a battle for us to convince others of it but reacts always been along the ride for or react's always been along for the ride with us in this way they've given us the tools and the resources in the people in the time that we needed to make these things happen from silly things like Dan talking on Twitter to more important ones like the working group that is now finally formed so that the react core team can directly interact with the people consuming these things they understand that this Gap is big and arguably getting bigger every day but that's also what makes it react these Primitives are so strong that the surface area that they can innovate in and cover is just massive I often joke now that for as wide as react is react native is 10 times deeper because that Community does crazy things to make react work in places I never would have thought of but that's the magic of react it lets you do things you've never thought of so now it's our job to make people think about them and it's not going to be easy God that was just a banger line I can't believe I didn't write that God I I don't think I'll ever be able to do Scripts uh we're gonna be talking to a lot of Engineers that are convinced their back it has to run golang or roster it's not really a back end you're going to talk to a lot of people who have an existing solution that aren't convinced moving to these new ones will help at all you're even going to have Library maintainers who don't want to put in the extra effort and it's going to report their stuff to work in solid or felt anyway or instead I think we need to push harder and I think we need to bet on this as well the only way server component succeeds is if we're bought into more than ever before Hooks could have worked some amount without us but server components can't so much so that react itself went to work with next to get it as far as it is now more than ever before react is relying on us it isn't just betting on the server it's betting on the community and our ability and our love of what these Frameworks and what these tools enable they're betting on us to prove to people that this is worth it and I'm really confident that we can do it I'm so proud of the work that all these teams have been putting in they've been doing incredible things and I think the future is bright and I hope we take the time to really test out play with and understand what these Primitives enable so that we can not just understand them ourselves but we can widen the room and we can next year have a react-a-thon that is 10 times bigger because all of a sudden all the back-end Engineers are here too so think to yourselves who are the people that might not be ready for this who are the people who might not even want this why not what can we do to better understand them what can we do to solve the problems that they have and how could we work together to build a better web for everybody I think server components will be a part of that better web but the only way that will happen is if we all make it happen so who's with me we gonna do this server component is going to happen that that's what I was hoping to hear that's all I have thank you guys so much really appreciate it that was fun I was uh pumped that I actually like had a call to action that got people somewhat hyped when I pushed it at the end there I had bold things to say and now if we watched it the end wasn't as padded as I thought it was I'm proud of that one