## Theo Reacts Ryan Florence's _Remixing React Router_ Talk - 20220609
if i was to cut it right here this would be a fantastic intro to a talk titled why you should use react query probably [Music] that path there that he took us through in four minutes was phenomenal you ever look at your code and you don't know wtf so four people have given me they're bad at volume not me this isn't my fault it's them kapoor i i'm not gonna try her first thing shruthi her talk please talk david's talk there was another one i i guarantee i'm just gonna i'm not gonna show you because of the damage it's gonna do to everybody else if i rewind this back to the intro you're gonna you're here a little bit of background we're gonna talk a little about react rounding this part's very quiet the intro 2014 it's super old michael jackson i built it together we quit our jobs to fund it at reacttraining.com um we founded remix to take it to the next level we released v6 and you all have taken it to the next level this is this is blowing my mind the trajectory that react router is on that's the npm downloads an eight-year-old project to see that kind of like there's no inflection point yet so i don't we're going to the moon um our goal is to get all of you on remix though so that's like this is a good this is a good graph um so the question when to fetch what is the status quo today for our users are the volume levels spin again for y'all all over the place i hate it what is the status quo for us this is where other people have covered things so i can go quickly through this everyone's got your own use fetch hook right does this look familiar any problems with this code oh that's right i can't have an async function in the effect okay i'm going to put it over there all right what the heck why is this spinning forever what do you mean it feel i got to add error handling okay got my air handling i clicked the link the url changed but the ui just sat there oh yeah that that little thing that's how you change it okay i click two links really fast we've got some invoices up there i click santa monica and then stinkonia i don't know if i pronounced that right i've only read i've never said it out loud in my life until now i'm going to try ocean avenue and these are my favorite albums from like when i was a kid by the way ui flickers i see like the right thing and then i see the wrong thing because i click something quickly anyone know what's wrong there click two things twice you see a flicker and then the wrong state resolved out of order the first question second cancellation yes so let's add an abort controller and let's like if it's aborted let's not set the state and then let's return our cleanup so this is what this is what fetching looks like and then you're like oh no i've got a component somewhere else that changes my invoice like marks it as paid or something but the component where i fetched the invoice is couldn't be farther away in the ui than that how do i get that thing to refetch so i can see it again if i was to cut it right here this would be a fantastic intro to a talk titled why you should use react query i know where this is going and i think he has very good points knowing where i think this is going just wanted to point out that up to this point this is all points in favor of things like react query as well as the things he's going to talk about that is all or see the updates probably anyways the professionals here so uh tanner linsley thank you so much for react query hillary's about 40 miles north by the sewers so support him so that he can i don't know get somewhere i'm just kidding well that is all true but i think he's doing fine i swear to my [ __ ] so now we bring in this query we've got our we've got our query key so we can expire this thing so it'll refetch from some other place got our error screen we've got our spinners and then in the end we actually have the happy path everything's fine we can show this invoice but this is still what the user is looking at even with great libraries like react query i think this is a problem anyone else think it's a problem am i the only one trying to solve this problem okay i've heard about a thing called suspense uh so what's the problem i really like this so far this is real and solving this with react query is solving this yourself react query gives you the ability to solve this yourself but you still have to this is your problem even on faster internet you're still going to see five different loading spinners pop in one at a time this is correct and react query doesn't do a great job of solving it he has framed this [ __ ] perfectly so far and i want to contrast this to like the talk that we watched before with the um the use effect is bad talk this did a phenomenal job of like starting with here is the like the simple thing we start with with the like simple example with react query with react query with uh like diying your fetch this is really hard to like find specific code parts from but like this guy when he had to use a fact sample and then showed how it becomes more complex showed how these problems get worse as your code matures and like why this might look simple but isn't led me to the solution i have right now which is the react query to the point where i memed myself because of it showed why it's good and the problem it solves very well like perfectly here i wish she would give like actually it doesn't even matter like an example of doing something that isn't a fetch to show that this is still useful for other things he might even do that later would be cool but it does a fantastic job of showing what that pattern is and why this solves the problem that we had before in terms of ergonomics but then shows the problem it doesn't seem in the end we actually have to happen immediately everything's fine we can show this invoice that that path there that he took us through in four minutes the first minute of which was intro and stuff was phenomenal that was props to orion that was a fantastic setup that was fully good faith showed the strengths and weaknesses and led us to the problem you're focused on without ignoring years of history before it that was one of the best openers to a talk i've seen ever great work ryan genuinely but this is still what the user's looking at even with great libraries like react query i think this is a problem anyone else think it's a problem am i the only one trying to solve this problem okay i've heard about a thing called suspense so what's the problem component fetching this component is doing three things it's initiating the fetch it's reading the result and it's rendering the fallback and you might think yeah that's a great hook that is super cool the problem is the parent fallback blocks the initialization of the child components fetching so even though you can see down there at the bottom i've got a few more resources that i know i'm going to fetch the ui blocked it because i put all my my initializing reading and falling back into one component and then it blocks everything else so we got to somehow unblock this so what's the solution well we want to do it all in parallel not only is it faster you can see those fake network graphs at the bottom but you don't have all the jank either if you can do it in parallel so can y'all stop baiting me with these questions that i want to pause and go on rants about give you all a one sentence quick to div mode swr is great for fetching if you want to like fetch while render generally fetchful render is kind of bad and swr is solving a problem i don't like so i react query and i mostly react query for stuff on my own like device like async device type stuff or to your pc react query is basically apollo client react query gave me most of the things i liked about apollo client but it specifically isn't for rest it's for anything async you can query graphql with react query you can query your local devices with react query i actually have an example on my twitter that went very viral where i was using react query for devices react query is great for things that aren't fetching if anything i would argue react query's weakest point is fetch swr wasn't first react query was but generally agree that swr like got the pattern adopted react query won yeah let's stop making apps they all suck back to this oh how do we do it in parallel you need to initiate fetches before you render you can't be fetching in the middle of your components otherwise you're going to render the spinners and you're going to block the next bit of the ui hierarchy so how do i do that decoupling is always the answer if you're in a meeting and you're and your like manager is in there and they're somewhat technical and like you want to impress them and a question comes up just say i think we need to find an opportunity to decouple some of these pieces uh so we need to decouple initiating from reading from falling back it's actually that's three things couple is two d triple no a couple a few we need to defu initiating from reading from falling back then you can initiate fetches before you render well i heard that react 18 and server components fixes all of this anyone heard that anyone yeah a few people we try to talk about remix and everyone tells us react 18 solves all this i'm sorry you heard wrong rsc moves rendering and data fetching to the server it doesn't know how to initiate it doesn't care when you initiate streaming sends chunks of the document for the initial server render it has no opinion on when you should initiate a fetch suspense defines where the ui can fall back when you're trying to read data that's already been initiated somewhere else if you initiate underneath a suspense boundary you're right back into component fetching you're right back into the spinner request waterfall chain so um react is not a data oh sorry i i think i fully agree with this too yeah fair points this is i like this framework react is not a data oh sorry uh like david um you got to add some authority to your slides so andrew clarke not dan but next best thing um so he was saying he i posted an article about uh remixing react router so we're taking all of the data stuff that we've had that we've done in remix forms and actions if you've seen it it's super cool uh loading our nested routes all that kind of stuff and we realized that this is all just a browser runtime that we could move over to react router so uh we're almost done with the work i went on vacation otherwise it would be done as someone who complains about react router a lot thank you for this seriously like i didn't how do i put this i they didn't have to keep improving react router like this right now you could argue react router is actually a decent bit ahead of react or of remix which is a really interesting place to be i have very high respect that they've continued pushing react router forward rather than like competing with it and then slowly killing it because of business interest impressed i'm happy that they're continuing to take their learnings back to react router yes remix is built on top of react router versel is built on top of next there's still a bunch of things in next and versel that other people don't have access to that are a bit weird this absolutely is their funnel but they're doing a good job taking care of that funnel that's my comment here the funnel is ahead of what it goes into in ways it's it's weird that they would ever let react router get ahead of remix and that's the thing i'm saying is unexpected and cool of them and i wanted to give respect where it's due that's all and already um it was awesome i got these flip flops actually down to san diego rainbows they're the best last forever uh he says here suspense and then he quotes the article not designed to define where you initiate fetches but rather where you access the results and he said that's exactly right do you want to qualify this or are we still exactly right well all right i guess you just have to trust me now at this point but hopefully i can get him behind me again so react is a rendering library it's not a data library i think i like this slide i really like that he specified fetch here because there's a lot of things that we have to be considerate of that aren't fetch that i do think react triggering makes sense like when the ui component for a video preview renders activating your camera device asynchronously at that point makes sense and that is a very separate problem and this has done a great job of focusing on everything up to and before that point but not that point and after it's up until the client has received its response is what this is considerative and i feel like it's done a very good job of acknowledging the position this talk has done a fantastic job of staying within the bounds that it's trying to while citing a lot of prior work for context which is really hard to do to touch on so many different things and not feel like you're doing such in a a bad faith way to just make a quick point or gut punch this doesn't do that at all this has been a very well contained path to where we are right now and this slide is another great example of that in particular i'm bought in this is a great talk so far right it doesn't know when to initiate fetches it doesn't care when you read results just read them wherever you need them but it does help you fall back it's a rendering library it can help you fall back when you need to and that's its job that's the scope of of react here so what do you know so you can initiate a fetch before you render because you don't like what what is available to you to make this decision that's it that's it even with static generation and stuff like that you still got those pages or get static pads which is essentially like a url right so we know the url we might know the user and then we could do some random stuff or if you figure out how to do esp in your code that would be even better but i don't think anyone's getting there so what does route uh what does react router look like and how is it helping you here this is some of the stuff that we're bringing over from remix that's almost done so you can see a route can now define a function that's a loader this is an async function and you just return whatever you want um it also understands the web fetch api request and response so you can literally just return a response or a call to a fetch and it'll work out now the second thing down there is the hook use loader data this does not initiate a fetch when you call this hook it's not like oh do i have the data no okay let's start a fetch it's not what it's doing it just says i know that something already initiated this fetch in the loader i'm just going to give you the result when it's here so we've been able to defue are initiating and reading if your ui is nested your route should be nested yahooda cats ryan florence if your ui's nested your out should be nested ryan florence lee robinson that's yesterday are you taking notes that was good give them some [ __ ] they deserve it i that was the first like dig and it wasn't even like a dig it was a a good call out i'm liking this a lot i saw somebody asking chat like is this uh i i see how i said this is a funnel to remix kind of i think that this is this is a good faith explanation of the problem that ryan florence has dedicated his life to solving if this goes to remix at the end that is fair if it doesn't and he leaves that exercise to the reader that is even cooler but this seems so far focused on very directly focused on the problem and contextualizing that i'm sure we're going to go into the solution now that we're talking about the loader api but i do think this is going to be very react router focused i also saw somebody ask or i like mentioned react location react location is entirely client-side as uh maple said that was the specific differentiator that tanner chose fun enough it actually was gonna be ssr initially i actually wrote some of the ssr binding with him it was pretty fun but he decided that the things he wanted to do were almost entirely client anyways and he would rather have those loading patterns on client with all the power there rather than have great ssr because he considered that a separate enough problem that he wanted to differentiate by focusing on client which was the right call because react router was more focused on building into remix at the time but i would argue tanner fully succeeded with his goal with react location because he kind of tricked remix and the react router all these guys into getting react router to do what he needed to do for client side react location was a phenomenal method to bully react router into doing what he wanted and i think he did i think that's exactly what he got what he wanted from there i'm almost positive we'll have tanner on the show soon and i'm sure that will be one of the like core topics when we do but from what i understand he is very happy that the patterns he put there are being used by other stuff yeah you should start taking notes lee this is the like pull out your phone what are nested wraps a little teddy here's my ui you can probably see them anytime you have a navigation component that affects the output the rendering of another component you've got a nested route so at the root we have a javascript bundle for root js and our user json at the sales that's that's a component too it's got its own data its own code split bundle we've got the invoices and that's coupled to the url up there right you can see the segments of the url uh changing as we see all these little boxes so this is what nested routing is is we couple routes or we couple components to segments of the url and now we can know before we render we don't have to like throw in a suspense boundary or something to start initiating a fetch we know before we even render anything what you need this is what it looks like so all those routes nested inside of each other and you can see all those loaders are going to initiate in parallel together to fetch the data all at once so we get rid of those request chains but i like my components defining their data dependencies i do too it's close see some comments about how this is basically just their home page sure double dip on content if you're gonna put all the effort and reuse it it's great i'm all for that enough leave me alone go look at wherever you initiate fetch for an initial render not like a hover or like a pop over but like i just rendered a page and the user hasn't done anything 99 of the time that's coupled to a segment of the url and so it is component fetching because that's pretty much the only place you fetch in components so close enough this is what it looked like before with uh react query i'm covering up code it's probably the easiest way to nod yeah this is what your component i could live before quick go look at wherever you initiate fetch for an initial render not like a hover or like a pop over but like i just rendered a page and the user hasn't done anything 99 of the time that's coupled to a segment of the url um and so it is component okay here's the before again with the use param and the use query invoice async let oh wait tiny bit more verbose than i would have liked it's fair but like you could have await fetch dot then json this to one line it that this like async here could easily have been a one-liner both the error and loading states could have been one-liners and that would have compressed this down from 24 lines to like 10 which wouldn't have looked like as bad i think this is plenty readable and this is not far from the exact code i would write but this is the first time we've had like the very slight like some amount of thought was put into making this look a little bit bigger and that's fair because it makes it way more readable on a slide but now i'm going to compare it before if there's any similar shortcuts or if it's like the same query yeah okay uh the the flat return versus not doing the flat return i'm guessing yeah because there's no conditions that that's what they're getting away with here is there's no conditions i know they weren't going for line count they were going for complexity and having the if brackets makes it clear that these are different like conditions with the tab difference but like yeah yeah that's fair there's multiple paths here which is or with uh react query this is what your component looks like after in remix or sorry in react router they're the same thing by the way um very soon anyway uh with the apis we're going to be shipping uh soon here uh super nice now we're not trying to get rid of react query um react query is cool react query actually has an api to initiate fetches outside of a hook like you don't need to hook to say hey react query go get this thing on this cache key so keep using react query keep using use swr anything that can initiate the fetch in this loader and then you're going to swap out the use loader data in this slide on line 9 with use query so you can still use all those other data libraries we're just giving you a way to initiate all those fetches before we render you don't have to use our little data cache where we hang onto this stuff but for a lot of the ergonomics of using this with react query are kind of phenomenal now i think about it the type safety story is a bit rough but beyond that being able to use loader data to grab like the init value and then dump that in as like initially when you are defining a used query the ergonomics here sound incredibly promising oh oh no maple i'm gonna regret what i'm about to say how hard would it be to modify react query and trpc such that we could create a custom trpc dot use you use a knit prop or use a knit query or something like that that attaches that data to the loader we probably have to attach today to the loader somewhere else but a good path to with one hook as long as we have preloaded the data in the route have that data be grabbed off of the route data if it already exists in the query skipped or query otherwise i use query or loader data that is using trpc to honor a contract from whichever place it comes from this feels very doable but it also feels more like a new framework i'm gonna have to keep thinking on that one but i i'm beginning to see an opportunity here to do something really cool yeah back to this because this is a really good talk and i'm distracting to initiate all those fetches before we render you don't have to use our little data cache where we hang on to this stuff but for a lot of cases you can this is the before and after for what the users see you can see we've got a document request at the top we got the chunks and then each one of those fetches and that's why our ui whenever you see spinners you can open up the network tab and see this is why it looks that way after we're able to flatten all those requests into one thing you can see we actually get that first page in about half the time like the full page rendered just by parallelizing uh what we're doing less code better ux anybody interested in that all right i had a conversation yesterday where i said when there's a star at the bottom that's when you're supposed to clap if nobody's clapping but you can't see it data loading's not even the best part of what we're bringing over to react router from remix it honestly is like to us it's almost like a side note it's like oh yeah we can initiate fetches in parallel it's interesting mutations is where it's at i don't have enough time in this talk to talk about this i'll be oops i'll be speaking at uh render atl in a few weeks that's going to be that talk i'm going to talk about mutations on the web and like a generic way and then talk about how we're bringing it to react router but in the old when i was a kid i wrote a form i put a php file through cyberduck on my server and the browser did everything else it was amazing and that's what we're bringing to remix but or to react router from remix but then you can still build great single page app experiences i i'll say it we just had our first reach that was that was a statement and it didn't really bring much other than nostalgia and not a meaningful here's how we're doing things differently i'm very curious how a router introduces mutations i'm a bit scared that this is where i'm going to go from really liking this talk to getting slightly frustrated and again uh i'm gonna go back to this tweet because it was really good i have a feeling we're about to contradict this okay ryan that's that's good to hear it's also a little confusing that i'm complaining about this ryan when the other ryan i really likes in chat hopefully it won't be too confusing for y'all lydia talked about some of this stuff so i don't need to bring up too many of them time to first bite first contentful paint don't need to talk about all those uh but i do have a weasel down here on time to interactive that's a weasel because like if the spinner had an on click like it's interactive right so that one's hard to pin down we're just going to count time to interactive as everything's done side note my left foot is going to get sunburned up here in 25 minutes didn't spray that so here is what it looked like before and after with all those uh metrics in there ttfb first uh first paint largest paint and time to interactive look at how far over uh or what what this does with react router when we bring these apis in our largest paint and our time to interact have become the same thing there's there aren't all those intermediate states and up top you can see that we get rid of all of those like just the jank and the bouncing around and stuff and and it's faster the goal is always parallelize unblock that's the goal with web perf parallelize and unblock well look at this we've got some blocked stuff right i can't start downloading my data until all my javascript and the document have gotten to the browser so i still have some blocking here this is as good as react router can do for you that's it it can't do any more and this is where remix comes in remix comes in and it's a server you need a server to be able to unblock these fetches this is a loader and remix this is get server-side props i might have misheard so to be clear he doesn't talk about mutation at all during this this is just data fetching if so this feels very carefully planned to be a talk i can like yes okay cool very scared of the mutation talk and uh next um this is on enter in uh react router v3 and i'm really sorry that we got rid of that it's coming back this is really react router v6 is a reactor out of v3 um so the server knows the url so it can initiate fetches over there and now they're going to be unblocked so now our graph changes right look at the look at the top uh pictures up there and watch the lcp move to the left significantly and everything kind of becomes the same fcp lcp time to interactive mostly if you've got a progressively enhanced app um all the metrics become the same same thing but our time first bite got slower because now we're waiting on later right i was about to pause to say this like time to first bite is a nice thing to have really fast if you have an app-like experience owning the like empty state that has a nice like fancy background and a loading spinner that you own it makes your app feel much faster one of the reasons everybody says ping looks really fast is because we respond with html as quick as possible to get you something that looks good and then everything comes in after technically it takes longer to get to the right state like the final interactive state than it would using a parallelized remix solution like this but i get you a very good loading state instantaneously to make it feel more like an app as you hop around edge servers will always be slower than a cached html file and a cdn whenever i can put an html file in a cdn that's what i want to start with as soon as possible and if we stream from there cool but a cached file will always be the fastest solution if we can do that right we've still got some blocking there we like to talk about levers at remix we just want an api that feels like a lever that we can like it helps us make a trade-off right like there there is a trade-off here i can either have a fast time to first bite but i'm going to sacrifice content layout shift or whatever cumulative shift and my life this is where he goes into streaming or just paint well if i want a better or a better less layout shift and a better lcp then i can pull the gear this way but i'm going to sacrifice time to first bite right there's always no such thing as a free lunch so yeah ttfb is blocked by our data so how do we get rid of that we can introduce some sort of caching just get rid of it we just get it out of the request for life uh request response lifecycle uh this is uh ssg in all of its various forms you're caching html documents this is uh i don't have my lanyard redis um i love that redis is sponsoring this conference because in remix we talked to front-end developers about like yeah just put a redis cache in there and they like wet their pants what is reddis uh if you're afraid of reddit yeah good call mayfl i i hate when you put the word just in front of something like use redis it's just build your own infrastructure host it and use that to run your own cache layer that has lots of like edge cases race conditions and update failure states that you now have to manage yourself just own it yourself just do it okay we're at two admittedly minor faults so far and for 17 minutes in to a talk i didn't expect to like we're doing good overall i just feel like the specifically the statement just use redis is incredibly disingenuous that's all to be fair i had this happen to me in the remix server yesterday when i was talking about caching the growth book json and i was trying to put a uh a cache header on the json response that i was getting from growth book so i'd fetch it and then re-return it on my own endpoint with a cache header and when i was explaining my desire to do that the response was why don't you just put it in redis instead because i don't want to spin up infrastructure to cache a piece of json that's it never mind that's too spicy i'm gonna move on all right transitions everything you do for the first paint like from the server like we focus way too much in the web perf world about the first load uh that's a big deal to e-commerce everyone else is like i don't care i've got the user here they're going to turn in their assignment no matter what everything that you do to make the first load fast helps you make your transitions fast so once you've already got the user you don't have all that other junk you just have these three things we need to fetch so without react router's new uh or if you don't it's not you can do this about react router it's just a little more work if you don't decouple those things this is what it looks like you click you get all the intermediate states and you get the waterfall chain with the new reactor router apis you click everything loads at once in parallel and you get rid of all those intermediate states with remix we're actually your compiler so we know all of your assets we know how you fetch data because it's a convention based system so we actually have this uh this prop on our links in remix where you can say prefetch equals intent and if you focus or hover a link and we're working on some stuff for mobile on what intent means we can actually just prefetch all that stuff with html link tags link rail prefetch and so when the user clicks it you get like an extra 500 milliseconds to start loading all that stuff uh and users don't operate in 100 milliseconds right they're not like click click click click click they kind of like move and they hover for a minute they'll they'll hover for like two seconds right especially if it's e-commerce and you're like doing that gross pop-out thing that then covers the price and you're like yeah crap how do i figure out how much does it cost um they operate in in seconds not milliseconds so you usually have enough time to get everything with a prefetch it's super cool tangent time one of the cooler parts of my remix exploration i wanted to do link prefetching when i was playing with remix because free of fetching is cool something i was doing in next something i wanted to do here and when i looked for it i searched prefetch the things that came up were a bit confusing initially like it didn't search well because there's prefetch page links which i thought might be what i'm looking for it wasn't and i found here in the link component this this is so [ __ ] cool this is really cool i like this pattern a lot that's all i was surprised when i found this i was like oh it makes a lot of sense that at the link level i determine if i want the sub stuff to come through and and that's that's uh that's possible for the same reasons that everything else we've been talking about as possible parallelizing and unblocking and having a server you add a compiler in the mix and you can do really cool stuff another cool thing uh with how react router does its data fetching is it knows what these nested routes which part of the page is changing which box is is should go into a pending state and it knows not to fetch the stuff outside of it so if i'm just changing between invoices here uh when to fetch well sometimes don't fetch and react writer will do that automatically for you and remix already does that for you i got one more thing to talk about i got five minutes i better go kind of quick because i got a little demo too there are did anyone count the react logos there there's there's 18 of them what does that look like i know but what is it what it's blue it's meandering a stream ooh okay we got a stream going on here i think everyone is still pretty confused about what streaming means in in react like we're hearing about it for years i see a lot on twitter i see people asking us about it a lot too my goal with this talk is simply to help everyone understand what is soding cool about streaming um i think remix and react router are going to be the best way to take advantage of it but that's beside the point the point is what the heck is it and why is it exciting we still have some blocking here right if we could somehow parallelize that stuff this is what streaming is all about this is the whole point so the request comes into the server and the server says all right i'm going to initiate my fetches but then i'm going to send a tiny chunk of the document just a little one here you go boink we got all our links in there we got our script tags and a spinner and now the browser can start downloading javascript css fonts everything else that's going to block the next render when we send when we have everything done so look at how that brings all that stuff to the left and in that in this section right here everything is happening in parallel the server is fetching the browser is downloading assets and everything is happening all at once that's what makes streaming super cool saw ryan link the tweet so the tweet from ryan the more i experiment with http streaming the initial document the more it seems it's only useful in the following cases the user has a fast network connection and the server is slow at preparing a response better to invest in making your server fast interesting i wonder if that's where this is about to go cool now i'm curious where he's going to go with streaming now because css blocks the render right so you could literally have everything have data have html have css and it still won't render because you need that css so this gets your css going earlier even when you have a cache on the back end you can stop doing the cash and depending on the size of your bars you might still have the same perform like the same perceived performance just because you parallelize all of it it's really cool so we've got this gear where we can say i can either have less content layout shift i had to introduce a spinner if you're going to do this the spinner has to show up but i can also pull the gear this way and improve every single one of those metrics on the right if i'm okay with a spinner sometimes i'm not sometimes i am i want a really good lever i don't want to have to go find some other hook in my component to add my code to or to change where i'm fetching or how i fetch or anything like that i want a lever that i can just move left and right to make this trade off what if that lever was literally a weight that would be sweet i don't know maybe someone will figure it out oh wait we figured it out cue the demo ryan's on stage cue the demo oh here we go cool i got a minute 45. i'm so i'm so i i want to play this moment back because that was such a banger i wish i could like call a banger and learn on my own thing oh wait that would be sweet i don't know maybe someone will figure it out here's an app i'm not plugged in the internet i'm doing a dashboard app got fast fast3g here and i'm gonna i'm gonna start with about blank so that we can really see what's going on here and uh hit enter you can see my favicon is spinning right and boom i got some gists not really i got some pokemon not really i've got some cat facts not really um hey that looks like my slide the document took a long time and then we could get all the resources right so over on the remix side of things here's my loader i'm saying let's get the gists let's get the pokemon let's get the cat facts and then here is our api for streaming and remix deferred pokemon and cat facts have been my go-to examples for data things for like a decade now like i use those in interviews and [ __ ] guests know but i'm very amused normally you return a new response or a json here but instead of json you say deferred and you can still send cache headers and and any other headers cookies stuff like that over here uh it's just like our normal json function but you say deferred and that puts remix into streaming mode that's it that's the whole thing so right now i'm saying i want to await everything now i want to await nothing i'm going to do a production build so my javascript isn't 12 megabytes i don't know how to write javascript who does there we go okay i'm gonna leave that one open and let's do an oop let's get the network tab first go over here boom get rid of stuff see that little bit of green that's a request going out oh i think i'm still waiting something up higher anyway um the request goes out oh never mind yeah this is coming out really quickly and then when it turns from green to blue that means that we we've sent the first chunk and then blue is all the chunks afterward and let's look at these two waterfall graphs and just see how different they look let me let me reload it watch watch the pending states see how they drop into loading and that one took a little while longer so over here so we don't wait for any data on the server we just send the document and then look at this right here ever if i if i was on http 1.1 locally you can see that every single one of these bars is going in parallel at the same time and it makes it way faster load in uh dom content in three seconds and over here uh where we waited for everything it was in 4.8 because this one everything's not happening in parallel so it's talking about levers what if the pokemon were important but nothing else was that's it you say await on the pokemon and now the document is going to wait until the pokemon they notice the pokemon didn't go into a pending state watch here it comes pokemon is immediately rendered with the server render but then i let the other ones fall back and the lever is just the awake keyword super cool thank you all for coming and uh we'll talk to you later interesting is this code example public what i want to see is a little deeper what's he doing with these i have a lot of concerns about the ergonomics of interacting with these pseudo promises oh boy let's see this example probably shouldn't be scared but i am ryan's a phenomenal speaker like now that that talk's over that was that was one of the best react talks i've seen period that was great that was really good genuinely




## Theo Reacts to Prime Reacts To Professor Reacting To Prime Reacting To FP - 20231128
so I heard the dev Community has been doing some reactions lately as the main react Dev on YouTube feel like it's my job to come in and add some react to the equation so without further Ado this is Theo reacts to Prime reacts Professor reacts to Prime reacts to FP yeah let's do it so apparently there is a professor that reacted to me reacting to Dave Farley about functional programming is not better than oop I'm a little nervous cuz one I hate hearing myself talk I think all people don't really like hearing themselves talk back speak for cuz uh and B I also don't plan anything I'm going to say I just kind of free understandable form okay I kind of ejaculate words out of my mouth and so wasn't he just complaining about how he's been getting demonetized like I I don't know has it been 30 seconds since my video started because you can't say ejaculate in the first 30 seconds editor's note censor both him and me saying it if it's before the first 30 you can't say those things this early Prime that's the one rule like they even say this now explicitly nothing even vaguely sexual or curse wordy or anything a brand would be upset with in the first 30 seconds Only Rule anyways like just like that phrase that phrase was not necessarily a planned phrase but it still came out the face hole and so here we are reacting to a reaction of a reaction okay I I tell my wife every time I teach this particular lecture like this is such a snoozefest so I've decided this time average doctor disrespect enjoyer you can just tell right away this man is an average doctor disrespected joyer right there just hitting hitting him with the snoozefest you know for a fact this guy is out there just being like you know my studes just flapping their gums all day dude it's so good especially because we're trying to squeeze it in a little bit let's only talk about the stuff that matters and let's try and make it a bit more fun so this was what the outline looked like as of uh October am I being tricked into talking about o again I'm going to be really upset I mean I know it's an FP thing but I haven't seen anything functional yet this is all o [ __ ] I'm not happy we're 22nd or you know a few days ago this is what it's going to be today I am really deeply feeling uncomfortable right now I really don't want to know what stupid opinion I had and I can't believe dude I can't believe I sound like a cartoon character start I am already lost this is going to be fun by watching uh primagen who set the name right wait did they watch a Prime Video in class am I understanding this correctly is Prime's content being brought into the classroom as part of a lecture on one hand based on the other hand the kids are so [ __ ] the day the name right let's go let's go random B tier blog let's go dude the guy he likes it he likes it prot prototype based language JavaScript get the hell out of here somebody that I just found like one of my friends showed me them a little bit ago we're going to still Focus heavily on the Core Concepts of O cuz that's something that actually matters you guys think that you know what oo is you don't even know what the concepts are oh no I think I know what he's going to quote me on I think I know what's about to happen here I have no idea what's about to happen because I haven't seen any of the original content this is the first time I've consumed any of this chain but you've written a lot of oo so it's going to be familiar deeply uncomfortable uh then we're going to look at this kind of bad blog uh but it shows an interesting point uh we're going to skip prototype based stuff entirely talk a little bit about this language called Small Talk the small talk you know the funny part is is that every time I hear someone talk about small talk it's almost universally pretty positive which is strange because it seems like small talk would be awful but I've heard so many positive things about it which is I'm just having a hard time uh believing that small talk is a true o op apparently it is the so I've talked about this a little bit I need a good term for this like like a theism for this particular phenomena where like the reason react the Frameworks also adding more react in can't help myself the reason the react framework has so much less satisfaction per average user than a lot of these newer Frameworks isn't just because spelt is 10 times better than react so it's 10 times likely you'll enjoy it it's because the average person working with react didn't pick it it's just what was being used already whereas the average person using spelt they picked it they already are biased towards it that's why they're using it when you are talking about smaller things that are part of like a niche Community the people who use it are biased towards it that's why they're in that community so the reason we don't hear bad things about small talk is because everyone using it likes it whereas we hear bad things about react every day because the average user isn't using it because they liked it they're using it because it's what you use so yeah I need a term for this I don't have one but that's what I'm expecting is happening here the only true Scotsman how's the weather driven development small talk yeah CU nobody is actually using it anymore okay I mean that's that's fair it's I mean fair if you want modern small talk you can try Pharaoh I don't want modern small talk okay it's like Latin everyone knows that it exists but no one actually speaks it out loud you've probably never heard of but is extremely influential so with that said welcome to Professor reacts to primagen reacts to functional programming is not better than oop NOP it's missing too it's Theo reacts to primogen reacts to Professor reacts to primogen reacts to functional programming is not better than oop just wanted to to set the record straight here please like And subscribe agreed like And subscribe buttons are right there just just hit them guys come on one of my most yes how many YouTube bars are visible right now we got mine we got the one for the video he's watching we got the one in the presentation and three titles as well we're killing it here guys this is great Dark Viper is going to have a [ __ ] aneurysm if we're not careful let's go man this okay this this Prof this professor is pretty good this professor is pretty good cuz I never remember to say like And subscribe and he's out here just doing the Lord's work for me all right this might be a little bit low oh there's one more YouTube bar here too we're we're so deep boys we're so deep Al I'm not exactly sure I I may have to like bump up the volume okay and then it might get really loud when the professor talks just a ear warning okay ear warning and subscribe one of my most successful videos on this channel so far Compares functional I have to turn him up a bit now too God damn it and objectoriented programming this is an interesting topic and clearly not just to me but there's more to this debate than we discussed in that episode this is one of of those debates that to be honest seems a little weird to me I think I could have agreed with this this this take not too long ago real talk I I really do think I would be on the this is yeah so we're we're currently talking about the debate between functional versus o which one is better functional is better this isn't even an argument I have multiple videos about this already but uh looks like we're making another primagen is a Netflix senior engineer he's got works on Netflix by the way like two decades of experience writing code he's also like a twitch streamer that you know is kind of funny so okay hey be careful he doesn't deserve too much credit he's funny for a programmer but but funny is a high bar funny is a really high bar we got kind of funny we got kind of funny okay I think I could put that on the Shelf I feel like that is going to work out oh man that in fact that's turning into a tweet right there and boom I guess I have to go make a tweet as well now that's how this works right there's my tweet I'm following all the steps hope I get all my good streamer points after this one I'll accept it I I'm going to accept it I'm accepting kind of funny not not like fully funny not like Zach galaan ascus funny but you know we we're getting places okay we're getting places a three out of five funny yeah solid three out of five funny some Professor while uh while shrugging while shrugging we're gonna watch just a little bit of this strange debate to kind of talk maybe if you would have asked me 5 years ago 7 years ago hey Prime what do you think on the functional versus non-functional debate I would probably take I'd probably have some stupid ass take right this was probably during the height maybe if you went eight years ago my height of loving rxjs and i' have been like reactive functional programming so great right but I really don't even know what functional programming is at that Point still don't even really know what it is I you know a real I'm just going to be straight up here does anybody really know what functional programming is you know [ __ ] don't try me procedural programming is greater than everything else what is procedural programming all I know about procedural programming is that it's based I know a bit but it's one of those things that's hard to properly Define and I'm excited to see how four layers of other devs try to before I embarrass myself let's go does any I also just realized he has this paused on a d nuts joke in front of a classroom maybe genz will be all right anybody really know what functional programming I mean p does pick knows but I don't know okay I don't know really no okay I'm not a Hasler okay even my only base experience my Baseline experience in functional programming is my brief little forier my little little dip in my hot dog into uh o camel and that was not like it's not like o camel's considered real functional program in to the hkers haskers look down on on o camel they're like oh o camel that's not even real right and so it's just like o camel my camel feels real but apparently it's not really real T surely knows functional by now no he doesn't he only knows o camel TJ isn't a real functional programmer yet okay it has a while loop in it it's fake functional programming it is fake functional programming while Loops are on the line that's fair four Loops you're over that's that's you're back in oop but a Loop a condition can I I could be convinced either way I also can't help but notice this is such a small thing and you can't see it when I have the video unpaused you kind a little bit his playback bar rotates from over to under his microphone there's some weird [ __ ] going on with the chroma keying and I can't unse it now okay is it like scripting pretty much no no it's different than that you guys have all written procedural code I love this c c is procedural it means you use a function yes a procedure is called a function I love it if you wrote functions you've done procedural code he's using it in a slightly different sense in that everyone talks about rust being procedural they just say that because they want to pretend it's like C this is so good Yep this I love this professor so much anyway oh my goodness that is such a good take they just to pretend rust is like C they just wish rust actually was based but pre-at clearly Prime watched me reacting to him ahead of time there's another reaction layer here that's the only reason he thought that was funny but it's not based okay it's never been based it just always wished it could be but they just they can't you know should we ever be surprised that an authoritarian language has people that are running it that are authoritarian no we shouldn't be we should not be surprised this is great my stance is not that I hate functional programming in love o or vice versa but rather that I think of each of these approaches as tools rather than things to go to war about so so I I'm not even so this whole idea of saying so it's not a proper react video if I don't get one gued by chat right let me go on my one guy quick do you ever code on stream or do you just react to videos genuine question I think the one thing I do less than code on stream is react to videos I've done this a total of maybe four times in the history of my channel I am the furthest thing from a react content creator beyond the react framework I react to content way less than prime or any of the other creators that usually are the ones talking [ __ ] I just thought it'd be funny to jump in on this meme that all said no I don't code on stream that much because I don't like coding in front of people I like coding to solve problems and then I come back and talk about the cool things I did with code I'll do like demos and examples and things live but entertaining an audience when I'm trying to write real code you're compromising on one if not both in that process and the only reason I stream is to make good videos for YouTube I'd rather use code externally on my own as a way to make better content so there's my one guy moment I need to make sure my chair is sitting here while the video plays at some point and I need to order some delivery food and loudly eat while I'm watching Once I have all of that covered I will be a true react streamer for the first time but I think of each of these approaches as tools rather than things to go to war about so so I I'm not even so this whole idea of saying that a language Paradigm is a tool is an interesting take to begin with right I'm trying not to insult and it's a wrong take a paradigm a par there's nothing better than when you're trying to be the like somewhat polite content creator especially when you're doing something like reaction content where if you are too negative you will be perceived as the aggressor especially if you're reacting to some bu who could be seen as punching down so I very much sympathize with prime number one here behind the prime and how he wanted to say what was just said in that video was outright wrong but since he's borrowing their content to do such it felt weird and having someone else else come in for you and be like nah he's wrong it feels really good it's like the biggest relief for someone else to say the thing you were not able to for any of many social Dynamic reasons that start to happen in these situations Paradigm is a perspective let's go functional programming is not a tool it's a way to look at a problem then the language itself is a tool that you can use to solve that problem oh I love that that's actually a really good take by the way Bas Professor dunking on Prime this was perfect I got dun on and I am completely okay with it that is like the perfect way to say it by the way is that it is a paradigm it's a way to look at a problem it is not a tool that was perfect this was fantastic let's go retake it I'm doing a quick retake retake that's my opinion that you know that you know that Meme where the guy hands an opinion to somebody else and then somebody else is holding it and then they're just like that's my opinion that's now my opinion this is my opinion that's mine you're welcome Professor you can keep that one prime it's an okay opinion op but the Paradigm is a perspective because is it a tool or is one objectively better than the other because they're both they're both an equalizer if you will they both simply take I I disagree with a lot of this it's kind of nonsense whoa I don't think it's nonsense I like the framing oh God that was loud they both can end with the same result is what I was saying okay I got wrecked I got wrecked wholesome man becomes wrecking me here okay but I mean what I saying is they both can end in the exact same result both can produce the same end software though hascal has never actually delivered to production I I hear a can and I hear it's the best software ever uh he disagrees so he fast forwards well he has to it's not like he he can just sit there and do that but is is it actual like what this is the difference between a teacher and a reactor when a teacher runs into something that they don't agree with they fast forward forward when a reactor and a content creator stumbles on something they don't agree with they rewind and play it back one problem I always see is that efficiency of tools is the largest indicator of whether or not your project is going to be successful the first time that I wrote Harpoon I wrote a terrible CU I really didn't know neovim the second time I'm writing Harpoon I'm doing a lot better and it's just simply a proficiency of tool problem now that I know my tool better I can now use it and write better and so if you are really Adept at functional programming you can program pretty much any problem using functional programming and so is there any real uh you know like is there is there is there a difference in the end it's always a skill issue life is literally a skill issue just constantly happening oh I think we can skip through actually versus oriented is like the uh that something is leaning towards or going towards it uh anyways uh I could agree with this take so far okay me and this Dave guy have changed this is an interesting insight and certainly bear some relationship to how our usually designed system even though as I've said before I think of my Approach as more objectoriented than functional definitions of O usually include abstraction which allows us to hide unnecessary details inherit I don't like that word okay I'm a 1D programmer I like one level of abstraction anytime you're working with an abstraction of abstractions it becomes this Insanity to refactor like the moment you need to change something are you saying that adding layer upon layer upon layer upon layer to something isn't necessarily a good idea because I clearly disagree considering that I'm making this video right now you have to change so many fundamental absum assumptions wow that's not even assumptions about what you've done and it just like blows things up yes anyone here anyone here have that happen to them anyone here work in really abstracted environments to make every problem feel simple anyone here we've all been there I would argue dependency injections the opposite version of the the same problem it's still kind of abstraction but it results in a similar chaos there's a lot of ways you can end up in abstraction hell and yeah I just I I have not by the time we're talking about abstractions we've already probably lost the plot uh I work in an Enterprise platform in which every single problem needs to feel simple and therefore a simple problem which is one line of code at the end of the day feels nice but the moment you need to change it the amount of underlying things you need to change to remain this one line of code being nice is crazy man it would really suck if you had a return type definition on every single function in your code base so that when you changed what one dependency was returning you had to go and update every single type for every single layer that uses that good thing nobody in this community or the people we're talking to here would ever recommend something like that when you can infer the return type and have a lot of those additional steps not actually need to exist that' be crazy find that abstractions though they look nice in their end product like you know tell me tell me this does not feel good when you come up with an abstraction that when you write it out in like its final line it's like one line of code and you're like dot do that dot done that boom look at look at even the hand gestures are the same Prime is so consistent it's incredible I don't want to say trivially but like in a couple years a prime AI is 100% achievable because there is like deterministic Behavior with this [ __ ] it doesn't matter what day of the week how well slept he is what he's been up to you put the same thing in front of him and say give me your opinion it's going to come out exactly the same every single time raise of hands how many people agree with that statement you reach that point it's so nice it is so nice how good I am you know you're feeling the exact same God that's hilarious Maple just said in chat Prime is Turing complete yep so smooth I totally the same the hand in the face with me okay I was right on that one I was 100% right on this one preat pre-reacted and then somebody comes along it's like uh I need to add one and you're just like my life I hate myself and I hate everything here and I'm going to quit my job right like it's just like you somehow ruin your life over like the simplest request because you think you have something great and then all of a sudden you're completely wrong because your abstraction just slightly changes and now you're refactoring an abstraction that's built on an abstraction that's built on an abstraction and your whole life crumbles I hate it defining one type of thing in terms of another polymorphism being able to access things of different types through the same interace pretty much all of this is functional programming minus inheritance but I'm sure there's some sort of I'm sure there's some sort of like type type Field property inheritance that you can do right I'm sure that literally exists where you can just like map over the properties from one onto another object and it's like a it's like like a a thing you can have inheritance in hasal yeah yeah face an encapsulation which allows us to hide polymorphism isn't just an O principle right I mean polymorphism all right we have our first definition of oo yeah we have four principles that make up what is objectoriented abstraction inheritance polymorphism and encapsulation and with that let's actually swap back to slides I I was really hoping he was going to say that's also functional pretty much that is is functional programming right like that legitimately those four points minus inheritance inheritance probably you could you could remove off that abstraction encapsulation I forget the other one uh polymorphism like it's not like any of those aren't functional programming also it's it's emotionally painful okay it's it's emotionally painful but hey piser Labs appreciate this reaction uh I know you didn't like that part okay sorry you didn't like my full reaction okay I tried my best out there I don't know if I don't know if you ever do that but sometimes you just say things and they don't come out necessarily correct but hey W Professor yeah appreciate that hey like and sub if he's your professor you you killed it like yeah that's awesome I I hope there are more and more professors like him that are actually part of these communities online because as I've said a bunch and I have more videos coming out about it soon your presence in the community and you're networking and the people you know matters way more than any technical ability or anything you can put on your resum especially in the current state of the market you get jobs by being involved you don't get jobs by filling your resume with cool sounding [ __ ] and if you're professors deep enough in these communities that he's like watching these things maybe he pops up in chat and stuff and encourages similar behaviors from his students that's huge and being involved in these communities that early is massive yeah bam subscribed bam I'm liking it uh Professor using Prime videos W Professor I know still a w a w is a w that was fun hey thank you very much the name already subscribed is the reactogenic the encapsulation bit because I am so tired of this point coming from the oop people in my opinion functional programming does a much better job of encapsulation than oop does because functional programming encapsulates logic into individual boxes separate from your data I'd much rather have my logic encapsulated than my data plus the logic baked in as weird properties I I hate the use of the word encapsulation in these types of things because it makes it sound like other Solutions aren't well separated and I have found that my ability to understand a piece of code and what it affects in that same sense I would use encapsulation to discuss is much much better in FP than it is in oop and it's just weird putting it in this list of this list abstraction is a weird term and usually once you're talking about it you've already lost like your way inheritance almost always bad polymorphism usually pretty bad in encapsulation nonsense term if this is how oop is defined then uh once again I am very happy I'm not an oop guy because I seriously think it is one of the biggest brain rots that Academia prescribed to us in the software Dev world and if Haskell or even like erling had caught on at MIT instead of c and C++ we would be in a very different world right now if you want me to talk more about this o versus FP stuff let me know in the comments if enough of you say so maybe I'll actually do it because I hate this topic I'm so done with it but if I need to talk about it more I will let me know what you think thank you prime for letting me steal your video that was St by professor and yada y I love reaction content I don't think it's a big deal sure you guys are going to complain anyways but here we are this is a fun one good to seeing you guys as always see you in the next one watch whatever's on the side here peace nerds




## Theo's Worst Take According to Prime... - 20241219
what is my worst take old I think your worst take is that you watch 6 hours of YouTube a day I'll take the L here what's your least favorite part of HTM X Carson what's your least favorite Trend in software right now Twitter




## There's A New Browser (That ISN'T Chrome Based) - 20240706
I know it feels like there's a new browser every week but I promise this one's different this isn't just another Chrome wrapper or somebody forking Firefox and giving it a new flavor this is an actual from the ground up new browser and oh boy is it controversial this video is going to be quite a journey where I go from really skeptical really concerned to starting to kind of get it so make sure you stick through the whole thing because uh I did not think this was going to go the way it did and huge shout out to the people from ladybird who hung out during the stream and gave me lots of feedback and insight so I could cover this properly because man this is a weird browser and God is the history of how we got here strange so let's dive in I want to get one thing clear ASAP ASAP ASAP instantly because I've already seen people being like oh great another electron or chromium rapper nope they have been very very clear in many places what does the no code from other browsers bit really mean the focus of the ladybird project is to build a new browser engine from the ground up we don't use code from blink webkit gecko or any other browser engine for historical reasons the browser uses various libraries from the serenity OS Project which will be talking about in a bit too but they add a strong culture of writing everything from scratch culture is a a running theme here as you guys will start to see there was a huge announcement recently both lady BG's existence but more importantly that they have a nonprofit backing them so they have a real chance also I need to command yeah when I command minus you can see how this is supposed to look but uh how funny is it that people building a new browser that supposedly works great on low performance machines that it overflows text incorrectly on their you know I I'm amused also love the AI generated image here take a look at that logo in the very functional USB zalgo port great stuff but it's a noble goal having a more varied set of browser engines should theoretically allow for the web to continue to innovate and Thrive but it's not that simple before I go any further I do need to call out the controversies that have me a little bit biased here because I'm not a perfect person I can get biased and I've seen some very rude things from the maintainers of this project specifically the ones that came from Serenity OS there was a polar request in 2021 where an innocent developer made a ner nitpick where they changed a very small thing and I know people are going to freak out like gender neutral Progressive whatever sure look at how innocent this change was to prevent this remove a na from the wheel group and he will no longer be able to run bin Su from what I understand the maintainer who wrote this was not a native English speaker and in the language that they speak there was no concept of they it was just he or she so they wrote he where in English they is the grammatically correct thing this isn't about gender neutrality this isn't about Progressive politics this say nothing to do with anything other than being grammatically correct because in English you use they for that not he for that that's just how English works but since the words gender neutral appeared in the name of this PR it seems like good old clings head exploded this Project's not an appropriate Arena to advertise your personal politics yeah and it gets worse because another maintainer after this came up again recently Dennis wrote update outdated male specific language the pronouns they them are a better choice and as Serenity does not cater only to men yeah fair but the response here from a maintainer we have had the long-standing rule in our project that we do not concern ourselves with controversial topics as to not alienate anyone who would like to join the project this is no to respond like this to a grammatical fix is to make it political this was not political until y'all started writing essays about it then freaking out on Twitter and Mastadon and about it so wanted to come out and say this is dumb we were trying to fix a grammatical error but thankfully when somebody else filed the same PR with grammar fixes it actually got merged same exact changes they change from he to it because this is a user account so it's not a user so it's technically more correct there they changed his to their they changed he is to they are they made another change here to just make things flow a little bit better and changed him to it here but since they labeled it as grammar fixes it got merged in so this seems like a combination of non-native English speakers poor understanding of politics and a desire to have a platform to spread so wanted to call that out because I don't want to be a platform for that same to spread I think having good grammar in your stuff and having people offer to correct it for you for free isn't something you should get get so political about just wanted to quickly point that out because these maintainers seem to die on Hills a lot which makes sense when you refuse to use any existing Technologies building a browser I'm bringing this up not because I want to signal to the far left that I'm an extremist to or anything like that this is very simply that I think the perspective of these maintainers is worth considering in the same way they get angry about people changing he to they to be grammatically correct they seem to be angry about all of the existing solution for the web which is why they're building their own even though they're not great at CSS at HTML so yeah I think understanding that about these developers in their mindset will be very helpful as we go forward because they like pushing back on things that are generally accepted because they want to do something different let's do it so why do we care well the main thing I mentioned before is the news button works oh more things that they did wrong these aren't links so I command clicked news it opened a new tab but it didn't actually go to it it just stayed on the top great I know writing web stuff is hard but uh yeah the ladybird browser initiative is the important piece here hello friends today I wanted to share with you our plans for the next chapter of ladybird the truly independent open source web browser that we've been developing from scratch for the past few years ladybird uses a brand new engine based on web standards without borrowing any code from other browsers it started as a humble HTML viewer for the serenity OS hobby project but since then it's grown into a full crossplatform browser project supporting Linux Mac OS and other Unix like systems we can already do some of our daily browsing with ladybird like managing GitHub issues and poll requests as well as commenting on hn the browser is improving every day as our community of contributors are actively fixing bugs and adding features but it's still very far from finished we want to turn ladybird into a browser that you can use every day for all your web related tasks it should be fast stable support web standards and protect your privacy browser for you in order to help us achieve this goal we've created the ladybird browser initiative 501c3 charity nonprofit tax temptable status pending to drive work on the browser and make it easier for supporters of all shapes and sizes to sponsor development can't help but laugh at the thing we just read unlike traditional business models that rely on monetizing the user ladybird is funded entirely by sponsorships and donations from companies and individuals who care about the open web our nonprofit will not pursue corporate deals or Revenue outside of unrestricted donations the software and the source code will be available for free forever our board will consist of experts from a diverse range of World Views and skill sets not donors we are starting small and we'll be adding more directors this year so here are the directors Andreas clling from Ser OS who's also worked on Safari the Nokia webkit build and khtml in the past and Chris wuth who is the if you don't already know the original co-founder and CEO of GitHub so knows the stuff with open source and clearly wants to make the space more diverse for the browser engines at the very least exciting to see actual money being put in to new browser initiatives just feels like the people building new browsers are inherently a little bit weird yeah apparently they're not expecting this to ship until 2026 bold I will say any prediction that's more than 3 weeks is always is wrong so I cannot imagine any software to have correctly predicting 2 years ahead like that but uh theoretically this will be ready summer 2026 but I'm not going to wait I want to try now so let's find it on GitHub and see if we can get it to build code clone and while that's cloning we will take a look at how to build the cue Chrome on Mac OS oh that was faster than I expected okay app kits what's used on Mac so we would don't need to install C I like that they're not using QD on Mac that's nice cuz qy on Mac sucks QD in general sucks but nice to avoid it on Mac yeah I'm curious where they're actually using FFM peg in here so we're going to hunt uh it's their media decoder so if you're watching media they're just directly calling FFM Peg it seems their playback layer is just using FFM Peg checks out don't reinvent the wheel just the browser yeah I I will say I love that the line is they won't use anything that was built for another browser but they'll use things that were built for not other browsers like they'll still use QE they'll still use ffmpeg they'll still use all those other tools just like a weird arbitrary thing to to draw line on am I missing something what is the flex about not using other browser code yeah I don't know of any good argument for not using other browser code I've heard a lot of people mad that Chrome took over the web and now that Chrome has taken over the entirety of like Internet Explorer stuff where Edge is now built on top of chromium we have new browsers like Arc and Opera all building on top of chromium the only other engines effectively are Safari which is a nightmare in Firefox which I know a lot of yall like but it's is even more of a nightmare so we're in my one of my favorite XK CDs standards the thing is there are three competing standards one of which is winning three but I don't like the one that's winning we're going to make a fourth one yeah that's what's happening now how's the build going yeah my computer's working hard right now still no fans it's in saying that this can just be full gun out CPU like that and not even spinning up the fans much kind of nuts oh as I said that I'm starting to hear some fans from my laptop oh God first feedback that is the worst browser icon I've ever seen what's this 2004 ass with like the cringey 3D render I know what we're going to go to First Space Jam not looking good failed to load failed to load failed to decode web content process crashed great start okay the rebuild seems to be working it's not rendering SV GS which is expected it just needed to be force closed and reset but now we made it all the way to Space Jam cool and they said GitHub works but since it just crashed for me I'm going to question that oh it's working oh God the scroll performance is awful it's like chugging yeah it's fully utilizing four of my cores right now just to like scroll oh God oh God how does it handle Reflow oh it kind of handles reflowing okay it doesn't handle spacing and flex box right so if we compare this to I github.com like they're not handling the CSS for that spacing correct at all do they have an inspector yeah and it's somehow even slower than I would have expected like I I get that performance comes later and the fact that I'm using this in like a Dev build means it's going to be slower can I do a production build or is this that build look at the cmake presets Json file sure there's an enable GPU painting in help command uh see my CPU usage not as bad this time that's a good sign a lot of unhandled stuff because again they wrote their own JavaScript engine too like they're not using V8 they're not using webkit they're not using anything the project types release according to the Json okay that's what I figured yeah I don't know if I can do anything to make this faster which honestly makes me concerned because if something is new broken and faster that's fine but if it's new broken and slower making it fast later is tough usually things start fast and then they get slow and then we patch it to make it reasonably fast again use the skia painter apparently skia is the fastest but I thought that we weren't reusing anything why are they reusing skia which is a browser rendering engine why we need ladybird probably should do this early because it's important to understand why they're building this the we was one of the most important inventions of the modern era feeling the growth of the internet and changing the way that many of us live work learn and play it's a technical Marvel both for what it enables us to do and the way it's built collaboratively and in the open it wasn't always this way but today's web is a testament to the power of Open Standards and open source in fact it was open source Open Standards and healthy competition that pulled the web out of the dark days of the 2000s and into the innovation Bonanza of the 2010s when Google Chrome heavily influenced by Firefox started gaining mainstream momentum absolutely fire Chrome was very very inspired by Firefox today every major browser engine is open source which is wonderful but there's still one issue they're all funded by Google's advertising Empire Chrome Edge Brave Arc and Opera all use chromium Apple receives billions to make Google the default search engine in safari in Firefox it's a similar deal where they receive hundreds of millions every year the web is too essential to have one primary source of funding and it's too important to have that source of funding be advertising many people say that it's impossible to build a new browser and that you can never unseat Google Chrome well you don't have to unse Google Chrome to make a difference Firefox is proof of that Firefox has never been the most popular browser but it has majorly influenced every popular browser and it's made the web a better place as for whether you can build a new browser it's already happening that's why I believe that ladybird a new browser written completely from scratch in the ladybird browser initiative which is a nonprofit funded exclusively by donations whose sole purpose is the development of the ladybird browser could make a difference the world needs a browser that puts people first contributes to Open Standards using a brand new engine and is free from advertising's influence that's why Chris has co-founded the lady browser initiative with Andreas and their family's pledged a million dollars to support ladyb Bird's Dev believe in ladybird and I believe in andreas' vision and I hope you help to support an open independent browser that supports you okay I will say that if the goal is to make sure the influence of chrome and advertising isn't steering the web too hard re-implementing everything still to me doesn't feel like the right ution and I still think starting from something else makes more sense and my inner capitalist also struggles to separate the idea of like building things that put people first capitalism does a pretty solid job of this where the thing that that can make the most money cu the people use it and like it the most tends to to win advertising obviously screws with the incentive structure here but it's it's a much more understandable version of the perspective here I feel better having read this and I probably should have started with it it'd be nice if the homepage made these goals clearer too it seems like the concern and the reason this project exists is fear that Google's advertising Empire is driving the web and web standards too hard and too far forward and other things like Safari and Firefox make way too much money from Google as well and they want to be outside of Google's influence yeah better still a little laggy but better still has the same issues with those things these pop up faster the email address on the input here being misaligned is sending me like it's just funny this is absolutely fascinating if we go back to like t3g it showed the SVG and then it vanished when it actually rendered the page great sign oh interesting message uh cling announced that they'll be using other libraries on lady board that's why they forked out of Serenity fascinating so Serenity os's whole thing is they don't reuse anything they reinvent everything themselves but with this they realize that they can't actually reinvent everything because it's just it's too brutal to do oh there's a maintainer here maintainer here the SK oh I didn't know that you were the maintainer when you said that oh thank you so much uh yeah I have to force close after the command C learned that lesson yes so on Mac OS by default it uses iOS surface plus metal but the skia painter is okay this the painter would be a higher level than the surface layer so that makes sense yeah interesting I've I've seen more people in general like going deep metal which if you don't know metal is the actual rendering engine for mac and apple stuff it's their equivalent of something like a direct X or Vulcan even though both of those also can hook into metal it's there one layer above the bare metal the skia painter uses metal the other painter is pure CPU oh God oh God and thank you ram for pointing out that I miss that Rambo is one of the maintainers good stuff if you here is there anything that you're particularly proud of that you think lady bird does better than others that I could showcase here it's doing its best cool Safari hits a 97 the animation is smooth which is an important piece here compared to here it's a little jankier and compared to Arc which is Chrome everything kind of tops out at 97 now but at least it's smooth according to the maintainer loads acid 3 pretty well we're working on getting there with the web platform test but for now getting the actual implementation working all the web apis implemented is a lot of work that checks out see no reason not to use JSC or V8 yeah the fact that they're doing their own JavaScript runtime is kind of I don't even know if bold is the right word I also want to say insane you know we should check since I'm live right now let's see how it handles My Stream not expecting good news here twitch is a very heavy Javascript app we're getting a lot of things here oh boy oh we're actually getting some messages in chat at least YouTu probably aren't going to happen at least chat works if I pop out chat I'm curious how that works by itself oh the pop out link just broke yeah I know making a browser is hard but like this kind of emphasizes just how insane a task it is try again window. open is quite the be getting it to open a new window in the same process was fun oh God yeah I can't even imagine hey it's this is working I don't think it's loading twitch's font though but at least it's working yeah if frames I would not want to have to implement if frames that's for sure oh that's so skia God that's so skia oh God that hurts I'm trying to select welcome and it's selecting stream chat o this is like a giant flutter app I'm in pain yes this is very early I mentioned before I recorded earlier in the video they're not even expecting an alpha till 2026 we're 2 years early this is why I rarely think it's worth it to reinvent everything because when you reinvent everything it takes so long to even know if your ideas work or not CU if I'm building something we'll say this is something and we want to build something something has a lot of parts we'll say like this is the part that we're most excited about but this is built on other foundations this is going to look a lot like a certain XKCD diagram that I really like so let's say this is what we're building and we have all of these dependencies all of these parts that are necessary for something to work let's say we decide we're going to make every single one of these blocks ourselves what happens if we think that this block is working and then once we build this block it turns out that there's an incompatibility with our understanding of how these blocks work so if like the relationship between these is more complex than we had initially thought it's possible all the work we did on this foundational block is just bad so if we are deciding to invent everything ourselves it's very possible we build this whole scaffold we get up to the top we're building this and we realize oh this doesn't work because it makes assumptions about things that aren't true and the only way to fix it is to rebuild this block on the bottom now let's say instead we use existing things for this we used V8 the JS engine for this we used QD the fun time here we used skia which they are actually using credit to them for it here we used uh webkit or something else alongside it here we used your own stuff that you invented now that we're using these existing blocks yes we can no longer say we wrote this whole something ourselves but the likelihood that we get this far up before realizing something we did before was wrong is significantly lower if you have parts that work even if you plan to eventually Swap this out for a different thing in the future at the very least it's easier to debug the other pieces as you're building them and the concern I have for a project like this these like massive rewrites or these massive reimaginings is so they almost never work because they can't encapsulate the full picture until so far along it takes so long to get to a point where the thing functions that it becomes hard to know what is and isn't even working it's truly difficult to know like when the page crashes yeah we get an error but is that error actually that layer or is it failing because something below it is it a dependency that doesn't work as expected like where do the failures exist and what isn't isn't working become significantly harder when you're building at this scale and when you're building something this big it's more important than ever to be really thorough on what does and doesn't work if you want to make these parts successfully there's a good Counterpoint from chat on the other hand if you own all the code you can debug all of it too it's a massive paino that Library X is doing it wrong so just work around it instead of fixing it yep very real one of the interesting things about ladybird that they chose to not use an existing JavaScript runtime most browsers are using something like JavaScript core from the webkit world or VA or any of the other many JavaScript run times but they wrote their own lijs and it's actually according to test 262 the most compatible with existing web standards V8 which is what we all use because it's what's in Chrome the most common browser that's only at 81% which is very interesting they're cheating a bit because they enable a bunch of experimental features by default and test 262 has proposal tests in so if I was to enable all the experimental features in another thing like spider monkey then they would be similar results good to know though yeah one of the big points is that they have temporal enabled without Flags V8 has it but they don't enable it so it's not shown in the tests all very good points can I just run lijs there's a repple for it what I wanted was to be able to run it locally so I could actually see the performance oh it's a JS binary in the repo interesting meta lady Birds run JS cool we have yet another JavaScript run time very interesting apparently they don't have jit which is very interesting if I was to make a quick JS file I'm so curious now console.log hello nerds nice [Music] yeah yeah that's my concern for those who are just listening and not watching uh the time taken on ladyb Bird's uh lijs to generate 100,000 prime numbers was 1 48 seconds and in both bun and node it took 047 seconds I'm not pumped about that so with no jit on node it's closer to 0.25 seconds but man kind of sad because again like if I go about my diagram this is my concern is instead of using like JSC or some existing standard for the JavaScript layer they went with lijs and even if they can get it fully compact which according to this like they're doing a great job with compatibility it seems to support most features however it's not very fast and this is again the issues is if they alternative to webkit is fine but kind of slow if they alternative to lijs is fine but kind of slow these things are going to compound and they're going to result in a lackluster experience and this is this isn't because rolling your own is bad this is because rolling your own while also Reinventing this many parts at once is bad it's like I'm going to invent my own car but we're not going to reuse any of the things other cars use so now you're writing your you're making your own engine now you're making your own wheels making your own tires you're making your own frames and frame assemblies you're making your own key fobs and your own Key Systems once you hit a certain point it's hard to know it is or isn't even working and that's the concern I have with a project of this size that Reinventing everything basically guarantees you have a lot of these types of issues where yeah it's fully compatible but it takes 1.48 seconds personally when doing big like swing for the fences projects like this I try to focus in on one subset even something like bun Bun's an all-in-one toolkit for JavaScript I thought bun was reaching too much cuz it's trying to be a runtime a bundler and a fully node compatible solution as well as like providing their own SQL light layer and doing all these other things they're trying to be like a standard Library too the fact that bun is trying to do all these different things at once is too much that said it's all contained in a very clean isolated box of of this is just JavaScript this takes in JavaScript and it outputs whatever the JavaScript runs and it's built on top of JSC although bun is a runtime it is literally just JSC but they've added a bunch of hacks doops and optimizations to get out of JSC and then run it natively using the code that they've written too so that's that's just the way I think about these things when you're building something bold it's important to get it in a shape where people want to use it so you can start figuring these things out I would argue as early as possible and the concern I have with a project like this is that it's more focused on the principles than the quality of the experience the users can have by not using existing solutions for so much stuff they have guaranteed it will take significantly longer for this to be viable and actually good and it's going to take way longer to identify what is and more importantly isn't working so that's the concern I have while it's incredibly cool that they have this level of compatibility that the assd test I ran earlier but like the fact that they get 97 out of 100 on acid 3 which is the expected result the fact that their compatibility here is as good as it is it's cool but it's not necessarily good and that's the concern I have is that this someone else in chat actually said this I think this is a good point they think I'm missing the point of the project rewriting everything is the point that's the issue I have even if your goal is to rewrite everything I would argue it's better to focus on individual Parts like instead of we're a new browser that reinvented everything why not we forked Chrome and we're rewriting this part now we're rewriting this other part now we're rewriting this other part and eventually you can break out of the loop and that's the concern I have is that when you decide from the start that you're going to redo everything you end up in hell trying to support everything and it becomes harder and harder to realize what is and isn't working this is a good point from YouTube chat that rewriting everything could be easier than doing the hard thing and trying to work around existing Solutions yeah but it also let you isolate those individual Parts I don't know I I could be wrong on this but I I find it really difficult to believe that a project like this not can succeed because it will if if the goal of this project is to just be another browser that isn't using any of the code that's in Chrome or Firefox it can succeed like this has a pretty solid chance of becoming another browser but I don't think Reinventing the browser is the solution I really like the car analogy and I see people going back to that again and again if we have a car I'm going to do a really good job of drawing a car here for you guys isn't that a great car I think I did good so now we have this car let's say people are getting tired of the car specifically they're getting frustrated that basically every car is the same even if you're getting a Kia or a Toyota or anything else all of the tires and wheels are the same all of the engines are coming from the same company all the windows are being made by the same company all of the parts of the car are sourced from the same places regardless of what logo is on the front of the car so our solution is we're going to reinvent the car we're going to rebuild the car and it's going to work just like any other car is going to follow all of the standards and all the things we expect from other cars but we're going to replace every single part along the way so we're not going to use the wheels that everyone else is using we're going to use blue ones instead we're not going to use the hood and the framing that every other bu car uses we're going to roll that ourselves too we're not going to use the windows everyone else is using we're going to make these our own crazy proprietary solution it'll be open source but it's going to be its own thing we're going to use our own frames for the axles we're going to use all our own everything but wait some of these things are hard oh yeah it turns out wheels are actually really hard so we'll we'll go back to the original oh it turns out manufacturing your own body is really hard we'll we'll go back to the original for that too this process becomes so chaotic so quickly and I think it's more important to not just reinvent for the sake of it but actually sit down and think like what's wrong with the car if you're trying to build something that meets all of the exact same standards of the car but has nothing in common with it that just feels like a bad goal to me I just don't philosophically align with that that feels like such a for the sake of it task if the goal is to have a car that on the inside is is different like how it was made was different but it does and works exactly the same meh but if the issue is you know what everybody relying on the same Tire company is risky because if that company goes out of business or they raise the price or they do any of these other things that's a high risk we don't want the entire world relying on one wheel that's a fair point and you know what we should do when that is the case we should make other companies for tires and wheels but I'm tired of every car having the same wheels so we're going to rebuild the car just doesn't feel like the right mindset it feels like the the principle of wanting something different honestly for the sake of it and that's what's hard for me to get behind is projects for the sake of it even something like Linux Linux was created because Unix had great ideas but it was proprietary and people couldn't use it on a lot of the things they wanted to without paying massive licenses and dealing with it so they invented something compatible so that they could have those parts and do what they wanted with them it was out of need there was a specific thing that the existing Solutions didn't provide in this case free and open source and Linux was created in order to be that part but that's what is missing for me here is the the motivation I just don't see it like is the goal just not let Chrome win somebody's arguing what I'm saying doesn't make sense it's only true if we 100% know that existing systems are optimal forever but they're trying to implement existing systems that's the point of lijs in test 262 they are more compatible with the existing standards in V8 according to these tests they're not doing something new if you have two new cars and one of them is a perfect Recreation of uh 1990s Kia but using entirely different manufacturing entirely different every part but it looks and operates exactly the same or you have a car that's a Kia but with the body modded to look different the modded Kia is more different and more Innovative and more likely to push cars forward than the perfect clone that uses everything different internally so if the goal is to let cars be different in decades the solution should be to change the cars not to reinvent the car from scratch today in fact I'm using one of these browsers now the browser I'm using right now Arc looks nothing like Chrome it operates nothing like Chrome this is a huge innovation in how I browse the web but it's still based on Chrome it's just that I don't see a goal here and that's what's confusing to me any project especially one that raises money I like to see a concrete goal from them and it seems like the goal here isn't to be better or different in any way Beyond being independent and that's tough for me I will admit that mazilla kind of dropped the ball here cuz mazilla used to be very independent and they still technically are everything's open source you can do what you want with it but they rely a lot on grants they get from Google to function at all at this point and the point of confusion for me is that it's it's hard to see where this goes or what benefit exists as a result of it like what would success look like for ladybird the ladybird site that's kind of funny that um the background doesn't render right on ladybird for the ladybird site I get it though the the issue I have is like you should start with what's wrong with the one car if the issue is that the standard for the car isn't open enough cool Fork it and make a more open version or start reimplementing the parts so that you can have something that that meets that goal but the goal shouldn't be just Independence for the sake of it and if it is then you should take the thing that works and then make that independent if the goal is diversification of browser engines then make a new browser engine don't make a new browser a really good point from chat that I haven't emphasized before they're not Reinventing they're reimplementing that's a very very important distinction he don't shoot the dream down like I don't mean to be but I I would like to know what the dream is is my issue the the dream isn't clear here this is the maintainer I'm making a new browser engine the UI of the browser secondary then I I guess I'm confused why the JavaScript engine would also be part of this like why also reimplement JavaScript too the goal is not let a single Tech determine the future of the web yeah that's fine but there's other ways to do that I would argue even something like bun is doing a great job of that since bun is its own run time now they have some say in what standards get implemented going with a data oriented approach on the Heap if we wanted to make a browser we'd make Arc we wanted to make a browser engine a replacement for gecko web kid and blink interesting okay interesting framing I still think reimplementing the JS layer is a weird Choice then I'm happy to see that this like reimplement everything has been walked back a good bit overall that's why it's not part of stry anymore they're realizing like reing the entire browser is insane if the focus is on the engine and everything else is just a consequence of it I'm a lot cooler with that but it seems like there's some baggage here still too yeah it's also as Dak said it's not clear on the site at all like it seems like it's going for an independent web browser brand new browser from scratch is does the word engine appear was a brand new browser and web engine that's the issue is it is definitely being marketed as a browser I do like that they call out that the focus is building a new engine there some of the same third party libs that other browsers use will never adopt another browser engine instead of building their own better swapping okay so it's like largely that it's too late that lijs is so deeply embedded and that the Dom is garbage collected so swapping out would not be possible very interesting I feel a little better having Rambo in here he's made so much he has helped me understand better I feel like Rambo tell me if I'm over speaking my role here it feels like the goal of the website in the marketing is almost intentionally to overs scope and overhype in order to get people like need to talk about it and potentially get some funding for the project but it seems like the focus isn't actually the the browser part of browser and web engine it's just the web engine part and theoretically if someone else came out that was working on a browser and said you know what we're going to swap our engine out for what ladybird is doing that that would almost be like a blessing for you guys because you could stop focusing on the browser and start focusing on where your actual energy is which is the web engine Y in order to make sure it works you need a UI so you're building it but if somebody else had built that UI or was willing to build it you guys would gladly drop it and then go focus on the engine that's that's my assumption here that is not correct let me know I could be entirely off here sure but no one's yeah I I figured that no one was doing that I was just I'm trying to understand the motivation this is a this is a hard project to parse okay the idea of rebuilding the web without like well stated goals in it you're going to continue as if the projects the entire browser but the core is the web engine I just am struggling to see the the why here it could just be a fundamental difference in how my brain works but as I sit here it's hard for me to to swallow why this is worth the effort in this direction that said I have massive respect for the team for taking on a challenge this absurd and specifically massive respect for Rambo for showing up and taking heat that I didn't even expect to Dish and is certainly not his job so fantastic work Rambo for coming in and properly explaining what the perspective of yourself and the team is I just struggle to see a future for it yeah much left to Rambo shout out to them for coming back here and pushing this the cor is building out web engine and making sure the standards can be implemented that's a very fair framing here if I was the one building the web page we're concerned about the web as standards get more complex and browser engines get more locked down it's hard to imagine the Innovation we've come to expect and love we're building ladybird to make sure the standards one can still will be implemented by independent devs and teams and two can continue evolving in a way that benefits every user while we might not be the best browser that's not our goal we want to be the standards browser that proves the web isn't something owned by Google like if this was the pitch I'd be much much different in how I discussed this but this wasn't the pitch the pitch wasn't we're concerned the web might not be implementable by Independence in that Google owns it the pitch was we built a truly independent browser to reframe my like alternative I would open this with like can we build a browser without Google Google's influence on the web can't be ignored advertising should not drive every decision about browsers standards and how we experience the web that's why we're building ladybird like if this was the statement can we build a browser without Google Google's influence on the web can't be ignored advertising should not drive every decision about browser standards and how we experience the web that's why we're building ladybird if that was the homepage I'd be cool with that but it's not I like the idea that they're not pushing to be the best browser they're pushing to be a separate independent open browser is like nice it's just so hard for me to see a path where this gets adopted like this doesn't feel like Linux to me it feels like FreeBSD this feels like it's it's more for the sake of it than truly pursuing that goal I'm not sure about this I'm happy to see more innovation in the web but I don't know if this is the path there yeah Linux started is just for me I actually like that though because Linux was solving a specific problem that lonus had he wanted to use Unix and things he wasn't allowed to use Unix for so he created Linux so he could use it for those things when you're solving a specific pointed problem you have like that that's very different from re like like if Linux already existed then he wouldn't have made Linux what would the Linux of web browsers look like though that's a very very good question and I think the answer is Firefox when it dropped when Firefox came out all the existing browsers were closed Source messes and as that article correctly pointed out the importance of Firefox is insane it's majorly influenced every popular browser and it's made the web better when Firefox came out it was one of the first probably arguably almost certainly the first real open-source browsers one of the first big open source projects and that was huge because they wanted something that was entirely outside of the existing like Netscape and ie ecosystems and very quickly Firefox got to a point where it was a better browser than the other ones I didn't use Firefox it was open source I used Firefox in elementary school because it was the best browser to use and since other browsers were bad for users didn't have most of the features they wanted were slow were miserable Firefox was able to fix these user experience failur an open source with a mechanism to do that so the closest thing we have to a Linux in the browser world was Firefox when it dropped here's one more post from Andreas that helps explain their perspective specifically how we're building a browser when it's supposed to be impossible so this is a blog post from Drew Dev Vault that is screenshotted in here the Reckless infinite scope of web browsers since the first browser war between Netscape and Internet Explorer web browsers have been using features as their primary means of competing with each other the strategy of unlimited scope and Perpetual feature creep is reckless it's been allowed to go on for far too long I use W to download all 1,217 pages of the w3c specifications which have been published at the time of writing of which web browsers need to implement a substantial subset in order to provide a modern web experience I ran a word count on all of these specifications how complex would you guess the web is the total word count of the w3c spec is 114 million words at the time of writing if you added all the combined word counts of C11 C++ 17 UEFI USB 3.2 and posic specs all 8754 published rfc's and the combined word count of everything on Wikipedia is long your list of longest novels you'd be 12 million words short of the w3c spec okay that's a hilarious thing I conclude that it's impossible to build a new web browser the complexity of the web is obscene the creation of a new web browser would be comparable in effort to the Apollo program or the Manhattan Project it's impossible to implement the web correctly implement the security or in their argument at all how is the serenity OS team making such good progress on building their ladybird browser when we've heard for years that it's impossible I've seen this question a few times on sites like hn and Reddit and I thought I'd offer my personal take on it from my perspective it comes down to five main things stronger web spec focus on vertical slices deferring on performance work I noticed team culture and having experienced leaders the stronger web spec we've come a long way from the wishy-washy days of HTML 4 and CSS 2 The ecma Script HTML and CSS specs today are for the most part Stellar technical documentation whose algorithms can be implemented with considerably less effort and guess work than in the past the architecture of ladybird tries really hard to match the architecture described in the various web specs this makes it significantly easy easier for new devs to get oriented so they only have to learn one architecture instead of two there are still gaps though in some features that are less specified than others thankfully there's an active community of editors at the w3c working on improvements a fair amount of the work that we do on ladybird involves adapting our code base to updates made by these spec editors we try to do our part in improving the spec as well the ladyb bird devs often report spec bugs and sometimes make PRS to improve the specs directly not to mention that implementing a spec in a novel browser engine provides great validation that the specs actually complete they're also focusing on vertical SLI while the specs today are indeed better than ever before it's still the case that many features span multiple specs often with a subtle interaction difference between subsystems that may be understood by an implementer if you try to build a browser One spec at a time or even one feature at a time you'd most likely run out of steam and lose interest altogether so instead we tend to focus on building a vertical slice of functionality this means setting practical cross cutting goals such as let's get this twitter.com cling to load or let's get login working on Discord and other similar objectives working on a vertical slice helps maintain momentum and it's highly motivating to see tangible improvements on real live websites as they progress this is very much agreeable to me like if your goal is implement we go back to my diagram before with the blocks If instead of implementing like the stuff below here then here then here instead you're like I'm just going to take this little section here it's called a vertical slice it's everything you need top to bottom we might be missing the stuff on the left and the right but we have enough to do this one task up top at the very least you know everything top to bottom is working and it's also much more rewarding to do work in that way respect for that helps address a lot of my concern here you might think this approach would produce a small collection of compatible sites in a vast desert of non-working things what really happens is that the rising tide lifts all boats and as we focus on improving one website thousands of other sites start to improve as well deferring performance work comp here they have to say here we're not putting much effort into optimizing ladybird for perf instead our primary focus is on addressing issues related to correctness and compatibility that way we can be focused on making sure the browser works as intended before diving into optimizations it's not that we don't care about performance we want our browser to be in responsive eventually it's a matter of making a disciplined choice to not spend too much time optimizing a product that doesn't work correctly yet for example while we might identify areas where we could potentially optimize the JS execution or rendering speeds we consciously choose to prioritize fixing rendering bugs or compatibility issues with popular sites first we do make exceptions for things that are unbearably slow we don't want working on the browser to be unpleasant after all in those cases we'll invest time in addressing the most significant performance bottlenecks to maintain a tolerable Dev experience notably Dev experience actually browsing with this is not right yet but they don't even have benchmark scores yet that's concerning to not know that you're regressing or not it's a little scary to me team culture is highly optimized and everyone is a can do attitude the team is distributed around the world they all meet on Discord to chat and spray each other on frequently collaborating and pitching in on each other's ideas everyone who works on ladyb Bird's encourag to explore their own personal interest within the project most folks in the team have never worked or looked at browser code before joining cly becoming worldclass browser devs since an offshoot from the serenity OS Project it shares the same culture of accountability and self-reliance we avoid third partyy dependencies and build everything ourselves that's has been changed in part because it's fun but also because it creates total accountability for what goes into our software also an experienced leader this is a bit of like a self-plug because they've worked on things at Apple and Nokia so they have a strong understanding while they're be able to make look at the stack of Technologies and specs that need to be combined to make the browser and feel overwhelmed I've got a clear picture of how to put them together and make it work save a lot of time here by not worrying about whether it's possible and just getting straight to the work instead apparently they primarily work between the seams they don't believe our exact way of working strictly transferable to other software projects unless they are also browser the small team of smart Focus individuals and a knowledgeable leader to guide them you can build any software you want yeah you can but whether that software will be good is a whole different problem like this is the ultimate Tech spec as the product ladyb Bird's value can be described by a spec sheet which makes me inherently skeptical to double down on the not invented here thing they actually forked ladybird from Serenity OS because they wanted to relax the not invented here policy instead of no third party code they will actually plan to leverage the greater OSS ecosystem I will say have the concern that since this project started with not invented here there's a lot of almost like Tech debt and Legacy stuff that are decisions that were made because they chose to reinvent everything that now are kind of technical debt that makes continuing to implement and iterate harder but there's a certain level of like it's already done that you just eat and move forward accordingly but my gut feel is that if this was started today with the same mindset certain parts like specifically lijs probably would not exist the only thing they were reusing before was QD basically everything else they built themselves which is kind of nuts but since then they're not even supporting Serenity anymore a lot has changed I'm not convinced that the complexity and the security burdens of a JavaScript jit are reasonable given the recent developments of Microsoft's Edge super duper secure mode I'm interested in pushing for best effort jetless performance while keeping the codebase simple uh yeah I don't know what else to say I am pretty much certain ladybird is not the browser I'm ever going to use but the concept of it being impossible to make a new browser is dumb and if the goal of this is to challenge that concept to take the people who say you can't do a new browser andove you can that's cool enough for me is it a thing I would ever use no because I'm actually kind of happy with chrome and the things I'm looking for aren't principled different changes on how these things should be made what I'm looking for is a great experience going through the web exploring things finding things sharing things and more and for me arc is that but ladybird and Arc are almost in arguably the opposite approaches to the goal of having a different browser where if ladyb do everything they want to correctly it'll feel just like using Safari but with all the tech being different internally and if Arc succeeds with their goals it's going to feel like a whole new way of exploring the web but the goal of ladybird was never to be a better different unique way of experiencing the web it was to prove that the standards can be implemented and if that's the goal here cool update the homepage to say such I have nothing else peace




## There's a new Tanstack package 👀 - 20250517
so I was looking GitHub a few days ago and I saw an interesting repo that I threw a star and then it got renamed This is that repo Tanstack DB Oh boy this is an interesting one If y'all aren't familiar with Tanner you should be especially if you're a React dev because Tanstack query also known as React Query is basically an essential dependency for all React developers Tanstack's been building a lot of other cool things like routers forms and much more But now they're building a DB Well kind of The role of Tanstack DB is fascinating and I think there's a lot we can learn from it but it's also one of the few Tanstack projects I am pretty skeptical about There's a lot to dive into here why Tanstack DB exists what it originally was which is TANStack optimistic how it works what it's actually here to do and why is Electric SQL involved We have a lot to dive into and even though I am an investor in Electric SQL none of these companies are paying me None of them even hit me up about this This is all me wanting to deep dive and figure it out So someone has to cover the bills Quick word from today's sponsor and we will be right back Today's sponsor is one of those companies that makes me sound insane And not just because they name themselves Post Hog as absurd as that is but because the whole product is incredible They offer an all-in-one suite of product tools from analytics to session replay experiments surveys and so many other really genuinely useful things I don't know how I would run Ping and all my other products without it I spend hours a day in their dashboards now It's it's unbelievable how useful Post Hog has been to us and also cheap Most companies like over 90% of the ones using Post Hog are doing such for free because you get 1 million analytics events per month for free And if you want you can self-host it cuz it's open source It also probably sounds made up that the only way I know what is actually going on with Stripe is through my Post Hog template that they gave me with one click But it's true The integration there is nuts And now I can very quickly link what users are spending what money in what places and how many messages are they sending and all that like chaos of data Finally it's all in one place that actually makes sense And oh man the LLM observability If you have a product that has a bunch of different AI models and you're trying to figure out how much each one is costing you how much each user is using and all of that With the LM observability feature in Postto you can just wrap the calls with their helper and now you get all of that data with no additional work to set it up It's so useful I look at this dashboard multiple times a day every day I'd give you a discount code but I don't have one cuz it's probably going to be free for you So check them out today at soy.link/postthog Before we can go too deep we need to have some ground rules understanding foundations whatever you want to call it about what is going on here and why we should care I'm going to start with a somewhat bold statement Optimistic updates in Tanstack query kind of suck really badly So in case you're not familiar with the syntax here's a basic example of a query using Tanstack query If you're again familiar with React Query this should look very simple and familiar to you You have the query key which is the identifier for this query You have the query function which is a function optionally asynchronous usually asynchronous is why you use use query And now the results of this request are in data is pending lets you know if it's pending waiting or not There's also an is loading other states as well And then error if you get an error like if the JSON fails to decode you get that back here This gives you all the states you need to interface with asynchronous data in your React apps And the query key is particularly cool because it means I can take this query and put it in five places And the query key guarantees that they can share one cache entity The fetch only has to happen once and it can be referenced in all those different places It's really nice This example isn't type- safe because it's a fetch call We don't have type safety But if you use something like TRPC here it would be type safe which is really cool because with TRPC you know the type from back to front and now you have the different states that you're trying to get in your client along with all the type data you would expect too So what's the problem the problem is how optimistic updates work So if we have a mutation which is the other thing that React Query provides it's queries and mutations Mutations over things that change queries are for things that don't So on a mutation like adding a new to-do to our to-do list we post the new to-do to this endpoint When that happens we want to update the client with the updated list of to-dos The lazy way to do this is to mark the query that has to-dos as invalidated so that it has to go be refetched So we're doing here is we call queryclient.invalidate queries with a query key So as long as the query that we care about had to do as one of its query keys it will now be forced back into pending state and it'll have to refetch to get new data Cool But that's not very optimistic First off if you don't get the key right or you're querying that data somewhere else with a slightly different key then you aren't actually going to hit it But more importantly we're not updating it with the new to-do We're invalidating it So it has to do another network request response in order to get the updated state So when you hit the submit button on that new to-do you have to wait for two network calls For the network call pushing up the to-do and then another network call fetching the updated to-do list So you're sitting there waiting on a gray screen or sometimes not even just you see the message disappear and you have to wait for it to reappear Optimistic updates are hard So let's see how we would actually make it optimistic If you want to update the to-do right when you get the submission so I get the new to-do I fire the request to the API but I also want to update the UI as quickly as possible I'll have to call cancel queries on any currently pending queries so I know they won't override the cache update I'm about to trigger previous to-dos where I have to get from the query client the right query data from this key which is not type safe remember because we are just randomly binding those keys and string arrays wherever we want Now we have to manually set the query data and hope we got the type definitions correct This is where the type safety of React query falls apart because there isn't a direct binding between this to-do key and the data that we are updating So if this is expecting a string array we could put a number in here accidentally and break everything Or we put an object here accidentally and break everything because there is no clarity between what this key is expected to map to the shape of the data the data we get back and the data that we update All three of these lines here are incredibly untypesafe and quickly can have problems if you change your keys or your expectations of the shape of data anywhere The place that this gets worse is if we were to go change the shape of what is returned by the API endpoint where instead of it returning a list of strings it returns objects Now we're just going to have random mutations all over our codebase that are optimistically updating incorrectly and throwing errors Couple good points from chat This breaks a lot as your apps scale up Imagine having to add filters on the to-do list How do you handle the optimistic update there what you'd have to do probably is you'd have to trigger the to-do list update with all of the data and then filter on client If you're filtering on the server side and you're submitting a new to-do you don't know if that to-do passes the filter that you have on or not This stuff sucks These are problems I would not wish on anyone I've been there I've done that I hated it You could also brute force type safety by doing a bunch of like as bindings everywhere or if you have all of your queries defined manually in like a key value store somewhere You might be able to force type safety here but I haven't seen anyone pull it off elegantly TK Dodo the legend who maintains React Query and Tanacquery now has an incredible blog breaking down the way to like think properly in React Query And there's a new post that is focused entirely on optimistic updates And as I read it my head hurts more and more because this is the most complex I've seen one of his like posts have to get because it's a complex problem As he puts it you have to recreate server logic on the client With optimistic UI you're essentially trying to foresee what the server will do and implement it on the client beforehand So all the examples in here are actually not type safe either which is terrifying So this post is cool that it like breaks down the timeline of when things are happening and changing but fixing the like consistency and type safety problem is non-trivial The problem is if I call to-dos in four different places and I'm not very anal about making sure all four have the exact same type definition or I give something else a different key then I'm I have to make sure every single time this type definition is called this key is called alongside it If these two aren't always touching everything falls apart And there is nothing guaranteeing that they're touching There is no link between these two things other than us putting them there The type safety of React Query falls apart as soon as you leave the component you're in That's just the nature of how React Query works I'm not trying to like you guys know I'm a huge React Query fanboy I just I need to highlight that these things being separate guarantees you have skew in your type definitions your types are not guaranteed to be linked you've effectively guaranteed that at some point they will be unlin The solution to that is something like React Query Kit which forces you to instantiate all of the query types via a create query call Now you use this use post and you can invalidate it by calling like invalidate on this thing that now has types This is how TRPC does it now with React Query too but like this is the solution you need You have to build a whole layer and package on top of React Query in order to fix this problem So think we've established optimistic updates and tanstack query Not great Hopefully you guys agree Hopefully Tener and crew aren't too mad at me for saying this Optimistic updates and tanacquery suck It's a combination of the data model simulating all of the horrifying things from the back end in order to make the UI do what it's expected to The weird nature of keys being bound however you choose There's a lot of pieces that make Tanstack query not great for optimistic updates So we've established this point Now we need to talk about the the two pieces here Tanstack optimistic aka Tanstack DB and we need to talk about electric SQL I'm going to start with electric because I think it'll help a lot with the context here Again disclosure I am an investor in electric I don't talk to him a whole lot We disagree on a lot of things funny enough if I go to their meetups here and there but uh electric SQL is an interesting product Their goal is to build a sync layer on top of Postgress You have data in your DB You replicate the portion relevant to a given user or client and you fan that out to whatever clients it's relevant to So when you make a query or mutation import or more importantly you make a change to the DB the change gets sent out and replicated across the different clients Electric's goal is to work with any Postgress database and any JavaScriptbased client you want to connect things to But that means there's a lot of pieces they have to think about They have to think about authentication which is really difficult here because you have to know which rows in the database a user has access to So they can't force it to sync someone else's data So now you have to at a database level define your authentication Rowle security is basically necessary in order to do these things You also have to handle the client side and how you integrate the synchronized data how you mutate the data how you optimistically update the data how you do all of that on client Getting that right is really hard especially if you're trying to make it integrate nicely with things like React Query I know this because I've seen a couple different approaches historically I saw how TRPC did it and then changed how they did it recently and I saw how Convex did it and they decided to just not use React Query in particular because the optimistic layer was not good for it If we look through my codebase for T3 chat which we recently started moving over to Convex uh hopefully it's the default by the time this video is out We're trying to ship it officially by Friday If you want to try the beta the opt-ins and settings Here I have update thread title mutation This is when a user updates the title for a thread I have my API threads update call which is a type- safe call referencing a backend function that exists here And when this is called I have access to my local store which is my convex storage and the args which are the arguments that were just passed here If I call local storage.get query with this query identifier and this value I know the type of what I'm going to get back It's thread with parent or undefined This is awesome because now if I make a change I know what type I have to honor If it does exist if it's not undefined then I find the current thread in this array of threads I then return the thread with the title updated and I then set it to the new object This is still more steps than I would like it to be but this is so much better than the equivalent with React query because instead of each of these being a violation of a type contract each of these is fully complicit with the types I am still replicating the server side code myself because I am grabbing the query that is listing all of the things on the sidebar I am updating the one that you changed and then I am setting the new state So technically speaking yes I am replicating the server side logic and if we were filtering on the server side like your threads hell if you were searching for threads and you updated one of their titles it wouldn't hit this you wouldn't get an optimistic update on a thread that is coming up through search instead of through the traditional sidebar query Still a lot better but in the end this is us replicating backend logic on the front end in order to show you the change faster than it waiting for the back end to send you the update So how is this being solved by electric well electric's platform and product isn't directly solving this the electric core thing like if you go to GitHub what they built here is a backend funny enough written in one of my favorite languages elixir which handles concurrent scaling websockets all these things really really well makes a lot of sense they built an elixir I'm a fan boy it's part of why I invested but this is a serverside infrastructure for taking a post database and synchronizing partial pieces of it across different clients they have a cloud product for hosting it and the most important piece PG PG light sync into a lightweight was Postgress with real-time reactive bindings This is a library that they built to have Postgress light largely learning from the SQLite WASM project PGite has the goal of letting you run Postgress queries and replicate Postgress data and patterns in the browser So you can take a subsection of your database put it in the browser and query it And it works in Wom So it works anywhere that WSM supported All of these come together with the TypeScript client from electric that lets you create a shape stream Their concept of a shape is their abstraction on a a like a table like something in your schema in order to give you the primitive that you're querying against the tables it has and the shapes of the parts that you can get from it So here we create a shape from this URL with these parameters Then we can create a shape from this shape stream that will automatically update or call its subscribe function when changes that are affected from here occur So you can build on top of this a pretty powerful sync engine that will take a given endpoint connect to electric on the back end see when something changes that's relevant to your query and then fire this update when that happens But as you can guess looking at this code not going to be very fun to build the whole sync engine and layer for this yourself into your application So what do you do now what most people do is they build a React library which is why we have electric SQL react This is their React hooks in order to bind a given URL and the parameters you're passing to it with electric SQL on the back end to get that data on the client and have it auto update when it changes I would imagine this package has very little code but more importantly this package is probably not super well-maintained because it's not core to their business in the sense that it is not the thing they are selling They are much more focused on the infrastructure side So how do you handle that if you have a React package that's kind of just sitting there 20 lines of code trying to replicate the shape of Tanstack query you want to focus on the infra side and the core problems you care about like optimistic updates aren't well solved with the ecosystem So you can't just build into Tanstack query because it's not going to solve the problems that your product is built to solve It's not going to let users take advantage of how easy it is to do those things because Electric SQL is replicated the DB It can just write the change locally and update you immediately But if you can't optimistically do things with it falls apart They have examples here using Tanstack query And you'll see how quick they get super complex because it has to write all these crazy additional hooks including the use mutation state to show the temporary mutation data instead of adding it to the data from the query they now have a case in render where if they're not in a clearing state they create a map of items where they take the ones from the query and they add the ones from the mutation So your like render code has to get in order to trigger this optimistic update It's rough And that's the point where they decided to reach out not to try and bully Tanner and TK into fixing optimistic updates in React Query Instead they recognized how big of a gap it was to care this much about local optimistic updates and proposed a new solution which was Tanstack Optimistic And now we have finally made our way to what we're here to talk about today Tanstack Optimistic which just got renamed to Tanstack DB Let's see how they describe it First and foremost Tanstack DB is a reactive client store for building super fast apps on sync extends Tanacquery with collections live queries and optimistic mutations that keep your UI reactive consistent and blazing fast Prime reference here's the post on Twitter that I think does a good job of breaking down why this exists DB is a reactive normalized transactional state engine that extends tanacquery It gives you collections with live queries submillisecond incremental updates via differential data flow fine-rain reactivity for minimal rerenders robust optimistic transactions with sync life cycle support and normalized data by default Think of it like tanacquery meets client side databases Perfect for local first collaborative or offline friendly apps As someone who tried building this myself this sounds very nice I've been in hell building sync engines It's backend agnostic incrementally adoptable works with rest graphql sync engines polling You'll see GraphQL come up a lot in this circle because one of the co-founders of electric is Kyle who's also the creator of Gatsby I won't make further comments on what that does to my thoughts on where this could go The pairing seamlessly with Tanstack query is the part I am the most excited about by far So what does it look like to use well first we have to create a query collection as a query key query function that actually gets the data an ID so that we know how to get ids out of this collection of to-dos so that each item is uniquely identifiable so we can do granular updates because if we change one to-do in a list but we're getting the whole list as a collection we don't want to rerender the whole list We want to just rerender that one item So each item needs to be identifiable similar to like a key when you're rendering a list of stuff in React And then the schema which is any standard schema think zod validot arch type those types of things So now we can get our data which is to-dos from the live query from tanstack/react-db and that is a query from to-do collection where at completed which is a field that the schema has defined is equal to false So this will give us all to-dos that are not completed There are catches here though you might be seeing them the one I am seeing What the is this there is now yet another query syntax being built We'll go into why I'm skeptical about that in a little bit What I want to talk about is the optimistic part We now have a use optimistic mutation hook const collections modified new to-do We have this transaction We're grabbing transaction Mutations zero So the first thing from this list of transactions in case you batched a whole bunch but it might not exist See you to do exclamation point We're already losing type safety points We then await API.todos.create new to-do await collection.invalidate Huh this is not everything we were just doing Where does this even get the thing that it's operating with oh on click add to-do.mmutate This has the transaction passed in line when we do it So we don't write a mutation that this optimistic mutation works against We call this as a generic and we pass it the mutation we actually want to do in the collection we want it to operate against Yet implementation details are leaking here This is why I'm confused about this On one hand it's more type- safe because it knows what to do collection is But on the other hand this is taking the problem with React Query and making it 10 times worse Because in React Query a given use mutation call has one mutation function that it is bound to A given to-do mutation that you have will closely tie the behavior of the mutation to the optimistic update behavior too because they are the same mutation and that one mutation can do the one thing What happens if I pass a different transaction to add to-do everything falls apart very very quickly If I had a different thing I was passing here like update to-do and I accidentally called this or if I had named instead of add to mutate to-do what we do in it is we created to-do but if we accidentally did something else with it it's going to break really bad The fact that these implementation details are leaking between here and here instead of being defined in one place and then called in others is terrifying to me The closer your update and your logic are the easier life gets And this is again something like I hate to just be plugging Convex this whole time but one of the things Convex does really well I have this client side front-end code where my existing threads are being grabbed from this query that I fired other places I have the type definition here for it But more importantly if I commandclick it brings me to the backend function that actually does this And yes they have their own weird syntax here to an extent The weird syntax is how you hit things with indexes Where things get really fun is when you want to do something like link data like I do here where I attach parents to thread You would think that I would include that in the query semantics here like you would in SQL but due to the way convex works I literally just map through them and await the fetch to get the parent Yes really You just map through or for loop through all of the data and just query for each row It seems insane but the way convex works is it flattens all of these into a single transaction So it ends up still being really fast There's a lot more nested than I normally like People are calling that on chat You're correct But it's fully type- safe and it is just JavaScript Like everything I wrote here is vanilla JSTS Nothing special exists here at all One of the cool things is that the the strings they use for ids are branded So it knows thread.branch parent thread ID is a thread ID So it knows branch parent is a thread If I passed it a message ID instead it would know this is a message So you get full type safety at every step And when I'm in my client here my update thread mutation has this one function it can ever call And the optimistic update is directly tied to the one function it can ever call That prevents a lot of the drift that could be a problem here And the thing I'm about when I look at this is how easy it is to have drift between your update logic on client and the shape of the things you are passing to the thing that does that update Let's keep reading Collections support insert update and delete operations These operations must be made within the context of a transactional mutator So we create an optimistic mutation which is a mutator and the mutator has to be passed a transaction We trigger a mutate function which immediately applies optimistic state So to-do collection.update to-do draft draft.completed equals true Rather than mutating the collection data directly the collection internally treats its synced and loaded data as immutable and it maintains a separate set of local mutations as optimistic state When live queries read from the collection they see a local view that overlays the local optimistic mutations on top of the immutable synced data So you're not actually updating the data from the server You're creating a copy of it changing that and rendering that on top temporarily as you wait for the real data to come back from the server Funny enough I actually do this as well My use thread data hook this is the hook that calls session query to get my threads that are listed on the sidebar I grab them from Convex which is why I have this threads from Convex One of the things Convex does that I don't like with their hooks is they don't return loading data error states they just return the thing or undefined as the fallback So the only way you know it is loading is if it's undefined And if you could actually return undefined good luck I love Convex This sucks They know this sucks It's going to be a fun one to fix So what I do in order to make sure when you load the beta you'll see when I load the page the sidebar is there immediately I'm refreshing Sidebar is always there The reason the sidebar is always there is because I back up the results in local storage and whenever they change I update the local storage results So on first paint I can return the local storage values if I don't yet have threads from convex This is my attempt to skip the whole waiting for the server to respond with the data in order to show the user something faster It's not the same as optimistic mutations but it is very similar And the point I want you to take home here is this custom data thing that I have threads from local storage which is the same shape and expectations that we have from the session query from the back end Here I return the thread from convex first and if I don't have it I fall back on local store Imagine if we had flipped this threads from local storage gets returned first Threads from convex is the fallback Now if we make changes here this will be shown first And if when this completes we nuke it We just on a change of threads from convex we wipe the local store That's how this works The magic here is that your state from the server stays pure It's always the exact thing the server returns You just have a a mirror of it on top temporarily And the moment you decide that isn't the thing you want to return to your user anymore because you have new data you just destroy it It's a very sensical pattern and I'm excited to see them embrace it But I am curious how much the implementation details have leaked because this kind of sucks The idea that I have to pass this here somewhere in my like application logic separate from the hook I defined up top I don't love I really don't love Oh Convex is here Good to see you man I've been trying to not just glaze Convex this whole time Yeah I did compliment how Convex does optimistic updates earlier It's the the least painful I've dealt with And as much as I hoped for this to go that path I am I am skeptical Back to the docs Local mutations are passed to the async mutation function that's passed in when creating the mutator This mutation function is responsible for handling the rights usually by sending them to a server or a database Tanstack DB waits for the function to resolve before then removing the optimistic state that was applied when the local write was made One more quick piece you might be thinking as you look at the code here Well I have this too with convex the update logic's in a different file because if I have my editable thread title here the code that actually updates the thread title I have to commandclick to get to it And this is a whole different function There's a whole bunch of different stuff Isn't that the same thing this is an implementation detail leaking out of here No because that's the backend logic And this has the same problem too Despite how much we've just looked at all of this code to do these things despite the fact that we've written all of this for our mutation the backend logic still has to be written Your API call that lets you create a new to-do doesn't exist here still you have to go write that validate the user can do that have the role level security everything set up properly all just to make sure the user sees the right thing and has the right permissions to do the thing so all of that additional backend logic still has to be written this is just for showing it to you on the client and we're leaking the abstraction so aggressively still this is making me long for my original T3 chat solution I feel bad even talking about this cuz it's so wrong But when I started T3 chat we did some fun things with Upstash Upstach is a Reddus KV So we have our Reddus KV We have a bunch of clients So we'll say this is user one User one has a whole bunch of threads and messages Let's just say they have threads It's some crazy array We'll just say they have like 27 of them or something And they have messages another crazier array We'll say they have 120 of them The intuitive thing is oh every thread and message should just have its own row But how do I know which messages this user has access to how do I handle all the logic and all the back and forth there how do I get all of it synced down to the user without firing thousands of queries and mutations i had a pretty simple solution I would jsonify it then I would gzip it and then I would store it in here with user one as the key and the value is your gzip blob And this was honestly magical It was one of the best data architectures I've ever gotten to work in as comically simple as it was The only reason this failed is once the messages started getting huge people were pasting giant blobs in the like thing we were syncing got bigger and bigger until it was multiple megabytes And it started to fall apart at that point especially because we had to sync down the whole multimegabyte payload back and forth every time Not great I have a whole video about the database architecture changes I'm going to do another one soon about the convex stuff The point I wanted to make here is that this was beautifully simple Because if the client could do it awesome Because the only off here was that when you wrote to our API I would take your user ID which we authenticated was you and I would write to the DB with that key and this is the value So if you wanted to fill it with garbage you could And it would sync up totally fine cuz I don't care You can't override another user's things You can't access another person's stuff Your key is yours and only yours And the result was very simple and easy to maintain And then it fell apart as I had to handle all the crazy edge cases that come up like multiple devices or breaking things up into individual message and thread rows or handling streamed updates when they come through on the fly and have to be resumed It's this was beautiful until it fell apart And I long for this setup dearly still I wish I could do this again I know I can't I know it's irresponsible and wrong And I'm telling you do not do this It's not a good way to do things But it meant all of the problems we're talking about today did not exist Which was really nice And when I see this I see code that is more complex than what I had done there And it's obuscating half of it because we don't even see the back end here So yeah benefits and negatives to all of the above I'm skeptical of this flow Here is how they diagram it where a given component will trigger an optimistic state change to the collection while at the same time a persist mutation is going to the server When that happens a sync comes down to the collection which nukes the the cache that they have on top of the collection when they mirror the data to make the optimism mutation and that will then update the component yet again So why would the architecture end up like this how did we get here my hot take with that is this idea of collections We have this whole section defining collections which are type sets of objects that we populated with data It seems like from all the examples they have they are calling an endpoint with it To do collection we create an electric collection ID stream options primary key schema This is the deeply integrated version with electric We give it the URL We give it the param for the thing we want to do We want to hit table to-dos We tell it what the primary key is from the thing being returned And now we've defined this collection Does this look familiar to something we saw earlier oh look they even link it underneath shapes and shape streams It seems like this concept of a shape is very core to how electric is thinking about databases and sync engines And rather than rethink optimistic updates on client in a way that made them more consistent and reliable they were trying to figure out how to fix them for shapes And this is the hot take I have Tanstack DB should never have been named Tanstack optimistic because that's not what it is It's Tanstack optimistic shapes And now Tanstack DB might not be best to call Tanstack DB It's certainly clickbaity and gets a lot of attention in order to get people to watch a video like this one Hi thanks for watching Tanak DB would be more accurately described as Tanstack shape bindings where it is giving us this idea of a shape that comes from electric and make it easier to interface with using Tanstack patterns On one hand I'm thankful they did this instead of making yet another crappy React client that has to be maintained indefinitely and falls apart But on the other hand I think it's misleading and I cannot imagine many people using this outside of the electric case It almost feels like an ad/topunnel to get people on electric which again is a company I'm invested in that I want to see succeed I will make a lot of money if they do This just felt weird And I remember when I first saw this I was at a local first meetup and I saw an exciting presentation The repo had seven stars and I was the eighth And the more I read the more skeptical I got because this idea of a collection does not map at all to the idea of a live local database or a sync engine or just basic Chat put it really well It sounds like it's supposed to be a generic but it is far too specialized to be useful beyond That's how I feel too The amount that the implementation details are leaking all over the place here just doesn't feel particularly tan stacky Like with tan stack you just give it an async function and you're good to go That's not the case here at all because the async function you give it even with something like this you're no longer getting like any of the benefits of the update the sync and all of that At that point you would want this to have a subscription of some form Now you have to define all of your endpoints in the shape of what this expects I cannot imagine having a great experience with Tanstack DB right now if you are not shaping your backend to fit the expectations of this library And the point of React Query was the opposite It lets you not care about the way the backend was shaping your data You could just call an async function get what you want and go on with your day This does not feel like that at all to me And I hope they take this feedback as an opportunity cuz that's what it is I desperately want better ergonomics around local updates The React Query Kit seem pretty good What I have here with Convex with like a type safe local store primitive which is a confusing name I already told them to not call it that cuz it's easy to mix it up with local storage But this is the Convex clients state of the world This isn't the most fun thing but it's fully type safe If I make a change to type definitions this will get type errors It does what it's supposed to The code I wrote here was exactly what I expected to and it worked exactly how I wanted it to first try This is nice And I was hoping that Tanzac optimistic and now Tanzac DB would feel better than this and less leaky than this But what I'm seeing is quite the opposite right now What I'm seeing here is a huge shift in our database model thinking about how permissions and endpoints and synchronization work with a Postgress DB with implementation details leaking not just into your React client code but into the libraries that we hold dear because normally they make our lives easier If this way of building makes sense to you I'm sure this library will be very helpful But I was really hoping it would be more useful to more people and I hope they take the opportunity to do just that Hope this was a useful overview of Tanstack DB and what's going on in the database sync engine world I've been way too deep in this stuff for a while now and I hope you got something out of it




## These DUMB Tricks Made My App 95,700% Faster - 20220927
ground was way too slow I don't know if you've seen the project before it's the second most viewed video on my channel but I made an app for voting on which Pokemon is roundest and I built it using all of my favorite Technologies in particular heavy on the trpc verselle next.js and or Prisma and all my favorite things in the T3 stack however those things are great for applications that have lots of features and different behaviors and you want a scalable the developer side and the infrastructure side really really far you might not have the requirements for that project ironed out fully it's a very flexible stack but it does not offer the best possible performance once you've ironed out all of the edges and there isn't flexibility if you know exactly what you want and you have limited enough constraints you can optimize in ways you otherwise probably shouldn't and to be frank a lot of what we're about to cover is things you probably shouldn't do that all said I'm really proud because I did make round 100 times faster by using some different Tech and optimization strategies to make it as fast as reasonably possible let's get to it the first I should probably just show what the project is that we're talking about this is roundest you saw it took a bit to load there it's between one and three seconds even though I'm in San Francisco because of the cold start times this is the app that we're talking about seemed very simple loads very slow these are Pokemon that load in that you can vote on for which one's most round you'll notice that it fades out and takes a bit to fade in that's because I'm blocking on the images loading as well as the back or the fetch to get the next two Pokemon right now these Pokemon are fetched from the back end we make a request and then we get back the data for these two Pokemon that includes their ID their name and their image and then we render all of that there's a video up it's pretty old before I knew how to stream so it's a little cringe but it does show from scratch how to build an application like this using the T3 stack all of that said because of how limited this problem is we made it sorry because of how limited this problem is the flexibility of the T3 stack is not optimal for it and I Honestly made a lot of decisions there that would work great if like the number of Pokemon could change and like the database was being updated and lots of other conditions that don't exist due to the limited scope of this app so given the exact state of this right now which is Pokemon 1 through 493 rendering and being votable this is a sub-optimal solution by a lot so how can we make this more optimal well the first thing we need to do is get off of Lambda at the very least for the first fetch having to wait for a full refresh from a Lambda function that is a cold starting possibly three second thing isn't going to work so we either need a static asset or an edge render whenever I'm doing either of those things I tend to use Astro so the first move I made was starting from scratch with astra.js realizing we're definitely going to need an Excalibur for this shout out Excalibur exclamation point Scout draw in chat for 30 off your first three months super hyped they gave us their first ever like referral code so definitely take advantage of that if you're interested in the software that we use for all of our diagrams on stream fantastic stuff I absolutely love everything excalator anyways switch to dark mode so y'all don't harass me how I made round faster roundus.t3.gg stack and faster around Stack the roundest stack T3 there is just a T3 stack horizontal align this so I get less annoyed typing it's the T3 stack which means it's next JS versus Cell with lambdas uh Tailwind uh Prisma and Planet scale so like yeah this is the original stack the first thing I swapped out uh I need to come up with a good name for this stack uh unnamed faster stack first we're swapping out next for Astro it is possible next JS will get to the point where you can do a lot of these things it is not there right now the combination of the not quite there yet Edge run times the not great performance on those Edge runtimes and the gigantic JavaScript like how do I put it but just a gigantic JS bundle that it is going to ship around 150 kilobytes we don't need any of that for how simple this app is I should actually put another thing in here react because I don't need all of react for this and I wanted this to be as small as reasonable without compromising my DX for the Simplicity of the app so we used preact instead preact for those that don't know is a as close as possible react clone that's goal is replicating the react API in as small of a bundle size as possible it doesn't have like deep support for all of reacts core features and there's a lot of like react packages you can try and use here that aren't going to work but we don't need much so we used preact to uh build this in a smaller minimal and more performant way a mention of track being more cursed but I didn't see the more cursed chats until after you said that Deno has preact bundled in it might be within like top three dumbest messages someone said in chat I'm sorry for calling you out that anyways back on topic unnamed faster stack just realized I'm covering that I'm dumb cool so Astro and preact or the core front end Tech we're still using versaille because I'm not going to compromise on that but we're using versel with cloudflare Edge workers which means that they start up way faster we don't have to deal with the cold start times and we are limited in what we can and can't run I ran into some fun problems with like a uuid package refusing to work because it expected crypto total mess somebody mentioned I forgot trpc that's a very good point trpc so what am I using for the trpc I'm using Astro plus routes without type safety this is one of the bigger compromises I made is I lost the type safety on the fetches I maintained the type safety for the components in like the initial render but I've given up type safety for the fetch stuff which is fine when you see how I architected this it's not as big of a loss as it seems you'll see in a bit still on Tailwind no reason to compromise on that but it already tree shakes to the smallest possible thing I went without Prisma I used Planet scales database JS and I'm hitting the planet scale HTTP API instead of the planet scale DB driver Direct so this is the difference in the stack want to see how it performs so first we're going to go back to roundest since y'all are going to it it's going to be called there's going to be a warm start so it's a little faster than normal but you can see how much time there is between the loads however fast around you'll notice page loads instantly the pictures take a bit that's because I'm command shift ring so that I clear the cache on every attempt but it is instantaneous also I have this on dot t3.gg I don't need to use that URL anymore but that's also going to break the cache which is fine what you'll notice once we start voting the next thing loads in instantaneously on click so I'm clicking now I'm clicking now I'm clicking now and one additional thing that we can see if I go to the network tab is when I vote two pictures loaded but if I open up one of these pictures marowak's not one of the two Pokemon here but if I vote on one he's in the next two I'm preloading the next two images whenever you vote so that the next one can load significantly faster if you Hammer that button it will be a lot slower but it's way harder to get into that state I'll even put us in slow 3G mode and you can see that images will still load in pretty damn fast I'm going a little faster than a slow 3g connection can do but and this is a big cool but if I go to the results page in slow 3G mode it still loads almost instantaneously now I should say instantaneously that was what uh two seconds yeah two seconds load on a gigantic 490 row page being that fast is nuts and right now it is prefer it is fetching all of the images because they're all on this page and now that it's done that if I go back here still in slow mode you'll notice everything loads in instantly because all the images are cached now so even on a slow 3g connection this feels Snappy as hell genuinely really happy with the performance that I was able to get out of this so what does the code look like this is a hundred times scarier is this just absolutely miserable to work with no it's actually a pretty good DX I ran into a few issues around the versel deployment because of uh how do I put it uh doing stupid bleeding edge things as is my usual way but once we smooth those out in particular caching on versal edge functions once that was smoothed out we got this to an insanely performing place so let's hop into I think I put this in stream yeah fast around get status get check out main get pull I did add the rate limiter back too okay code here somebody asked why nose Felts because I did why spelled I don't need spelled I had a stack that worked that I'm familiar with so I use the stack that works that I'm familiar with I guarantee my solution here is faster than a felt kit solution without like a lot of manual optimizations so let's take a look at the code this is an astro project I emitted a vanilla Astro typesafe app one of the magic points of Astro is when you fetch things in here in the helmet it's typescript so it's type safe so when I get my options here it's read only number number because get options for vote is a function that grabs first ID second ID is two numbers as const so I'm able to pass those over now I have a counter component which you'll notice is a function component which Astro doesn't have how am I mounting this this is a preact component I'm actually using a preact JS file here the vote component and I'm importing that in Astro and mounting that with the ability to pass props to it which is so cool it is absurdly cool that I'm able to mount a component on the server and the client with the correct data and not have to worry about a hydration error because something you might have noticed on the version of this app the the next version around srt3.gg if you look at the console in Dev mode you're going to get hydration errors because it fetches a random two numbers on the server doesn't pass those through as page props because I didn't want to use git server side props and then it's not serialized on the HTML the client gets so it refetches two different random numbers and now it's a hydration error which is obnoxious this solves that by serializing the properties in the HTML as like a JS script so that they're accessible to the preact code when it mounts in an incredibly minimal fashion this is I I thought there would have I'd have to do something for this all to work correctly nope this gets these two numbers then if we go to the votes component here I take in A and B are both numbers and I set the current state as a b as const and then I have the next state as a separate uh state by having these separate I'm able to update the next state start fetching the next pictures and then update current once the user has selected their vote I have two effects here one goes through the current uh or goes through the current thing here and adds it to a has been fetched set I have out here so that I don't have to keep refetching and instantiating new images every time a new one comes in because right below it I have this effect where I go through the next image filter out ones that have been fetched and for each new one I create a new image and then I set the source to the actual image URL for that image and I do this for each next image to make sure they are in your cache by the time it comes up this get image from on is actually another hack I am pretty proud of you'll notice slash API slash imagemon.png I wanted to get better Lighthouse scores and github's uh image hosting which is what this was fetching from before was not going to do that and I feel like setting up like Astro image for this weird use case because I wouldn't be able to hit the right cached endpoint if the thing isn't mounted and I just wanted to hack this out quick so I made this uh wait no that's the wrong file I have API image id.ts so I made this custom getter that grabs the ID removes the dot PNG and parses the number from that fetch and then fetches from GitHub the right Sprite creates a new body updates the cache header and then puts this in my CDN so it is way faster than fetching from GitHub and once these are cached in my CVN everything loads way faster really nice hack that I was impressed with how quickly I could set up I'm sure that this is very similar to what um Astro image is doing under the hood probably does like the proper optimization using uh what's it called the one because of an s that everybody uses sharp the image package probably uses that to properly optimize the images these are small images I don't care about any of that I just wanted the proper cache headers so I did this to fix the cache headers and now we have a significantly faster way to cache and fetch our images squish Plus wasms in the works according to Ben who works on Astro super exciting so one more thing that changed is that we're just generating numbers on client and it doesn't seem like we're fetching anything I showed you how we get the image URLs but how do we get the names and other data that we need well the reality is we don't need much other data Pokemon ID number four is never going to change so having that in our database is a tiny bit I don't say foolish but certainly unnecessary because we know what all what Pokemon number one through 493 are again this is why the things we're talking about here are not realistic for most applications but due to the limited scope of how the roundest voting app works we can make the assumption that all of these Pokemon will always be the same and as such I could hard code all of their names in a file here in order and if I plus one the ID of anything in here that's the correct ID for that Pokemon this made it significantly easier to have all the data I needed when the app immediately loads originally I had this setup where I had the object that had the URL for the Pokemon the ID of the Pokemon and the name I realized I could generate the URL for the Pokemon Sprite I can infer the ID from its index in the array so all that's left is the name so I made an array of names and this is able to Minify much better drops into the JS that is loaded on the page instantaneously so we have every Pokemon's information as soon as the page loads in the first HTML that goes down the wire which is really nice having all of that included as soon as the page loads makes everything start significantly faster and we're able to fetch from or when we first load the page this code runs on an edge worker it gets the options which are two random numbers between 1 and 493 passes those to this component and then on the server renders the preact component so when the HTML comes down the HTML is correct then the preact hydrates that component just that one component and from there preak takes over just for the voting and starts fetching the next images ahead of time that is it it is very very minimal now I have one other endpoint that's important the vote endpoint where I have a SQL string that is oh it's actually not that long so I insert into the roundest mon dot vote table ID voted forward voted against the one annoying thing I had to do in here is actually I had to do a couple annoying things in here this file is probably the most annoying thing so I have my redis rate limiter here that worked fine I have the post function this is an astro route it's similar to routes in next.js where you have Epi slash and you can drop whatever in there and that becomes like Json like traditional endpoint this file is doing the same it runs on an edge worker though which is really nice but since I don't have Prisma on here and I don't want to I want this to be as fast as possible I'm using the connection from reset because I don't want Prisma because it's nowhere near fast enough for what we're building here I'm using the new planet scale database package that lets you hit Planet skills DB via HTTP from an edge worker it just uses fetch under the hood instead of instantiating a rust Prisma client to make a raw connection to the database and that allows us to be much faster both with how quickly we can spin up the edge and resolve a request and also how quickly we can get that response back so this combined with the edge runtime has made this part of the app when you actually fetch way faster that said it doesn't matter because it no longer blocks on the client it just fires a fetch when you vote if I go to votes.tsx you'll see in here vote for roundest I left the to do don't need that there anymore because it has been done but what you'll see here is I have the anti-vote which is the one you didn't vote for and I post on the API vote endpoint who you voted for and who you voted against and that's it then on the end point I take the info that you sent here I quickly make or test the rate limiter if too many requests I send a 429 I reject it but then I get the Json out I run Zod to validate that you passed a voted for and voted against value and then I called the make vote function up here which executes a connection passes those two values from this JS or this uh SQL string and I also have to pass a uid because Prisma doesn't Auto insert those but I generate a uid I pass vote for I pass vote against sanitized by the planet scale connect SDK here and I'm done from all of this I have now recreated roundest and made it comically faster oh there is one more endpoint results I rated the results page as well I had to write a SQL query this one's a little bit longer it was annoying because I wanted to Aggregate and order things and the order wasn't perfect still so I do more in JavaScript I execute that query I manually cast a type because the Prisma database.js or sorry the planet scale database.js isn't type safe it can't be it doesn't know the shape of your DB there will be a Prisma adapter in the future where we can hack things around but for now it's not inherently typesafe so I built my own type definition here cast the rows as that I have a function generate count percent this takes a Pokemon it's votes for and against and then it generates the um how do I put it uh the percentage of its votes that are four versus against so we can then rank them I then sort the rows by their per count percentage and I have the get image fetch I should probably have reused a function in multiple places but lazy I can just command shift f for the string and then I set a cache header here I create five minutes in seconds I set that as the max age and I set an SWR which means if it has been longer than five minutes you still get the cached page and the next request will get a freshly generated version of that page this allows you to always have a page that is in the cache so it loads instantaneously for all users even if they might get some stale data as a result of it result of this is that the whole app feels significantly comically faster and if I get us a quick incog turn off the slow 3G because that can sometimes screw up the lighthouse and it's not going to be straight 100s because of a dumb rule I don't know how to work my way around I'll show you it momentarily I still get a 92 out of 100 on best practice because I serve images with low resolution because they are Sprites they are pixel art I can't do anything about that Google that is the nature of the pictures they are supposed to be pixelated I'm sorry I can lie to you if you want and make them fake higher quality but I'm not going to so this will never be straight 100s because Google doesn't know what pixel art is anyways that is how I made roundest comically faster I don't recommend doing most of these things but if you do have situations where they make sense a lot of the parts of what you saw here may be applicable when you have problems that are very limited in their nature when you have fixed numbers of things when you have data that will never change when you have a limit in the scope of the problem you're solving encoding that limit in a performant way is a fun hack and side project whatever you want to call it it's not necessary but when you have something as limited as this project or a part of your project that is this Limited it is a lot of fun to over optimize and make something that is blazingly fast so I'll pose the challenge to our good friend primogen or anybody else in the community who wants it see if you can make something faster than this I'd be impressed genuinely you might make an endpoint that responds faster but can you make an experience that for the user feels in all Network conditions as fast as this one does I would love to see you try genuinely go make something fast try and make it fun too join the Discord if you haven't already so you can share it when you're done really appreciate y'all for this one thanks guys peace nerds somebody said in YouTube chat add image rendering pixelated in the CSS in the Sprite images look much better oh [Music] maybe just HTML edit that quick [Music] image rendering pixelated oh oh that looks so much better okay uh thank you kind sir we're gonna make a quick change ooh let's let's go through my actual workflow and I find something like this uh image render pixelated Tailwind to see if there's a Tailwind class for this yeah that's a plug-in which means there is not so sadly I'm gonna have to add a [Music] style equals image render pixelated [Music] let's see if that works [Music] that did not seem to work spec all right image right somebody said I can extend the CSS I can but I don't have any CSS written yet is the problem and I don't feel like it I would like to do this in [Music] rendering or image rendering aha that is it thank you guys thank you chat for reminding me how dumb I am really appreciate it seriously that was very helpful really to do make images look way better DUI chat I am actually very curious if that fixes Lighthouse uh it'll take like 15 seconds to deploy so we'll see in just a sec [Music] I'm waiting to see if I could immediately see the difference when it loads with the new foreign has not come in yet still very smooth GitHub copr faster around belts okay cool now that works analyze let's see that did it whoa straight hundreds cool that it is that smart thank you so much for contributing 20 euros just to tell me that I needed to use a better image rendering strategy James Craig you're a legend thank you best YouTube message to date for sure got me a better looking website and straight 100s yeah cool so I made round faster and better looking what a stream Antoine eras good deals good deals all around that's a flush yeah straight up good yeah I've been haven't been paid to be told how to fix something before that's great supposed to go the other way I'm supposed to pay Consultants yeah I need to stream our code more actual Legend shout out James




## These Frameworks BEAT React__ 😱 Ryan (Solid) & Fred (Astro) Chat State of JS 2022 - 20230116
my Millennial bias are showing I'm still a millennial technically but I am like on the edge I am I'm what I'm older I'm an elder Millennial yeah and I'm a baby Millennial I'm right on the line for Gen Z just barely made it funny thing is I don't know if I actually looked at this one let's let's look at this for the first time and see what it actually says I work for free let's go into it so I want to give a quick overview of the summary here so you have to read the whole thing basically like 39 400 people responded over double last years uh and they added new sections the rendering Frameworks page as well as the new video creators section and resources rendering Frameworks I've never heard that term used for like meta Frameworks which is essentially what that category is I don't hate it but it's the weirdest part of this is like oh yeah I guess after is a rendering program I did not know that they they just took the previous back-end category I guess and didn't want to call it back end or full stack I guess those are like not good terms anymore I don't know I I'm coming around to the term rendering framework I I think it encompasses a lot at once where like backend doesn't because it's unclear what is the role of that does that serve Json or does that serve HTML or is it like a deeply integrated API I think that I like the term rendering framework because it sounds to me less like or much less like something like Redwood and more like something like Astro or remix yeah if there was a great term here I'd be pushing for it but like meta frame or anything is better than that it's the most meaningless term ever so yeah it's gonna it's a good it's gonna come up but this rename caused a bit of confusion um but yeah let's let's get let's call it out Astro 101 award and it was the write-in section in a totally unrelated category and it's because well it's because it's what's a rendering framework where do I put it people got to that page and they were like this must be my chance to put an astro the most writings of anything was us in a totally unrelated category I found that yeah we're spoiling let's keep up let's just go yeah well okay I I came in with a I I want to say that I really care about wait wait wait we're not we haven't even gotten to the start this is not about me this is about the kind of the context people understanding this survey and I think I can entrust to it and Tackle this this annoying thing um but there was a lot of fun and like like those kind of like Twitter comments of like honestly like this is all misleading like retention interest this is just gonna buy us new project like this is dumb data like and I think it was coming from people who love the bigger projects like next or angular and like there is a truth to that but a lot of the data here is actually his biased towards smaller projects where their fan base is really excited Theo you've mentioned this idea but like if you get to choose to use something you're gonna like just generally that audience is gonna feel happier than like an audience that has to use it for work those are two totally different profiles um but if the survey was just like what is the most used we already have that data that's just next.js and like Express and jQuery like that data isn't interesting what is interesting is when you add the bias for new projects because it's showing you what's going to come up like there was a time where an xjs was the new framework and I think this data goes back that far you can see it as it just takes over like this is meant to be forward-looking it is meant to be looking into a projects there's some really cool stuff in the opinions category about people starting to feel like the ecosystem is changing after like years of stagnation and I think that combined with some of these new Frameworks even though they're small taking on some of the bigger ones in these categories those two things together mean that this is a super exciting time so that's my hot take on all this people who are saying that this is like all done data and like the only framework that matters is next to us like that is missing the point of why this data is interesting you just want to look at NVM downloads We have that already that's MPL oh all right good stream curious what your thoughts are on this take Fred see you guys later so I actually I follow Marco I was gonna actually reply like I was just going through such a data bins last night and I was taking screenshots I was actually like I had a reply right now like the data actually asked this exact question and people are not feeling this way people are actually super excited about the current state the future that kind of gets into my second beef with this survey which is just the demographics are God awful there's a ton of volume which is fairly rare lots of respondents I think you can draw a lot of conclusions the problem is we're going to draw these conclusions about why English-speaking American men that is like by far the dominant audience being reported here and I think especially if you're the person who fills out a survey about their favorite Frameworks is also probably this isn't recording the data that's my big guess is super excited about Tools in general and it's probably going to be more optimistic and more excited because they're spending their number filling out of the survey um so I was about to send a like graph that actually answers this and disproves it but it's also I think really self-selecting and I don't know if it actually can address this accurately the error for that question is being so huge given the selection of the audience mostly agree I think that the the framing I have for this that's helped me a lot in understanding these takes is that the thing that Twitter has done in platforms like it is increase the transparency and build a relationship between the people who consume like software libraries Frameworks and whatnot and the people who create experiment and like discover these patterns normally and for the history of the web those people have been far enough away from each other that we would spin in circles and framework land playing with all these fun new things until one was good enough like how many different weird Frameworks were there before we kind of settled on react like I know Ryan here is the most qualified to answer that but my general thought on this pattern is that historically someone like Marco and people with the stance of I just want to like build using whatever will get the job done all of these things changing is fatiguing normally that change isn't visible to them and historically hasn't been their problem but now since so many of the people who care also have influence and also have reach an audience it is presumed by the people who normally wouldn't give a [ __ ] that they have to or they're falling behind and there's this new Dynamic of where previously knockout wouldn't have been on Marco's radar now he feels behind for not learning solid and that's a huge shift in how the whole web ecosystem interacts sure yeah I mean there was cons there was there was tons of Frameworks like I people have no idea how many Frameworks there were before react like that that time period between 2009 and 2000 I'd say 14 it carried into the beginning react there was there was a ton of different approaches and people trying stuff because you got to figure anything from jQuery to where we got to and react any permutation along that line there existed a library or someone trying something there because it was like they were a lot simpler right that back then like you could write things pretty like once you got over the hump of the different browsers not working the same way which which is something you could just kind of like people have a lot lower expectations I think it's the most important chart in this thing because it's the context that all this I think should be viewed and why this is probably the most important survey I've done yeah this one like look how just like stagnant it's been for three years like and now all of a sudden it's reverse Direction it really significantly yeah that makes a lot of sense like like the bumps from nine percent of people agree or uh or disagree that it's moving too fast to now like the majority are neutral to disagree and like triple the amount of people who and set the context thing like 2016 that's like esm is being pushed like Jesus Christ what a huge shift like things have settled and I think we're starting to see a shift back to change given everything going on right now do you guys think 2023 is going to be the year of the Linux desktop I mean esm that joke never gets old uh I I mean yes I think we already I think a lot of the pain for esm happened last year um like I know that wasn't probably a serious question but like when uh Cinder like went and changed all the libraries and stuff so like yeah it's definitely gotten better and I'm happier overall I have gone through some recent pain with like weird esm compiler like assumptions around specifically fastify being obnoxious to bundle in esm for some reason so uh yeah I've had it rough and every time I find myself caring about esm or CJs because I hate both it's rare that I have a good experience that involves me thinking about esm anyways shall we dive in I mean I got my hot take out of the way so I feel like I will let YouTube drive the conversation from here that's the context this is a super super I don't know I thought it was fascinating made more interesting than past years unless you guys rant about this data chart while I let my cat in quick the salary one because I think was actually super interesting funny thing is I don't know if I actually looked at this one let's let's look at this for the first time and see what it actually says I work for free yeah yeah you could not have chosen or Worse I'd take you through the tools I don't I think I jumped to demographics I I think I I think one of the interesting things here is you always hear people on Twitter talk about like how much money they make or like how much money the industry is paying this doesn't seem to reflect that too much like I don't know like it seems that the vast majority of salaries are between 100 and 200 000 um in the higher experience levels and that's with people like over 10 years experience for in fact between six and ten years um a mo vast majority are under um 100K if I'm reading this all the overall here uh only 22 of like total are over 100k so I put 78 under which is nuts and in almost any of these categories even six to ten years only 25 are over 100k 75 or below yeah yeah I'd be super curious how this maps to your experience I feel like understanding your YouTube audience and the people that you're talking to you probably think about the idea of an audience a lot more than at least more than I do Brian you're going to see your stream does this map to your expectations Theo going into this I it was lower than expected Dollar Wise for sure but I I'm not super surprised in particular if this is just like salary and not total comp also combined with the chaos with stocks like with the dips in Amazon stock if I was still at Amazon my total comp was around 480k the stock dip would have knocked that down to like low 300s interesting yeah so what's the difference between one percent and extra respondents I'm not really sure if I understand this chart I realized uh oh uh extra I don't know it's a very confusing yeah I'm not looking at the boxes I'm just looking at the numbers honestly I won't read too much into this one it's interesting to see that like salaries are like lower than I would have expected it also suggests that this is a less like Silicon Valley American chart because all the numbers I hear in person here are over 100k I can't remember the last time I heard a salary below 150 honestly like in this area so yeah that's that's true even hiring I mean I guess I was working a larger company but even like hiring Junior devs straight out it was you're still talking about a 100K you know and getting into that range so yeah I heard some insane like fresh out of college Juniors hitting like 180k to be fair they'd have like internships with the same companies before and like negotiated their way up but I've seen people get close to 200 fresh out of college so yeah if you hover over in this category it's a lot of to do comments pop-ups so yeah I think there's a kind of warning on top of that page it says this is our new data for it's a preview we finally yeah I think that's interesting to understand the audience of this uh survey that makes sense oh this makes that one make a lot more sense only 11.9 so like 12 of the respondents were America oh interesting okay it's actually way better than I remember this I think on mobile it looked a little bit more giant but yeah 12 versus like a majority is actually a pretty big Improvement I think from past year yeah almost half as many from Germany as from the US yeah I mean yeah that makes way more sense on the on the salary thing it's funny because I'm Canadian and I came here from Canada and I I tell you like even you know people like oh in the midwest it's Canada that you don't you don't make anything like you can be in like the biggest Tech city in Canada this looks suspiciously like my YouTube numbers yeah I mean that's is this maybe all our YouTube numbers I mean actually no this is this has lower I don't have as many 19 to 24. I have about this much let me pull that out who are all these lazy college students not filling this out I feel like this is something that like I would have been all over in college JavaScript in college I was just like complaining about python in the corner all the time yeah my audience is actually slightly more 18 to 24 I got 28 there but I also have less under 18 than here I only have 0.6 under 18. yeah sorry yeah I'm not thinking right I had my number skewed I have about 20 18 to 24. yeah yeah okay you know as I checked our numbers are pretty close and it's yeah it's it's very similar to this it's not like a perfect alignment like I have this almost the exact same number for 35 to 44 I have 16.3 and then for 45 to 54 I have 4.3 percent and 55 to 64. I have 1.1 I guess that's just the range which is interesting because I don't know if this shifts to years of experience as well like how that Maps um yeah there's also another one of my theories I have that is why like these numbers are where they are I think a lot of the people who were 19 to 24 3 to 10 years ago we all grew up learning from YouTube which is why so many people and like Mike Chat and such bring up the New Boston and stuff even though he has way less viewership than I do because that's what we grew up on that's what we got used to and now that we have moved out of this category into the 2534 because we're older now we're creating the content that we thought would be here when we got here that wasn't like we thought we'd be able to keep watching YouTube as we got more senior and more Technical and we couldn't because the content for it wasn't there so now we're making that content and we're making this new demographic like possible on these platforms interesting yeah I'm I'm a I think I'm like one level on the chart past you I'm a little bit older so yeah my Millennial bias are showing I'm still a millennial technically but I am like on the edge I am I'm what I'm an older I'm an elder Millennial yeah and I'm a baby Millennial I'm right on the line for Gen Z just barely made it [ __ ] you're sorry that's my Millennial you are absolutely a gems I know I'm a millennial [ __ ] when I look at gen Z when I scroll through Tick Tock I feel so old I can't do it oh Jesus that that gives me and let's be real I talk to you all a lot more than I talk to them all right fine he's cool he's in this club I'm an honorary Millennial I'll take that like an honorary degree like it's clear the person doesn't actually know what they're talking about but they're cool enough so we'll let them in they were just famous so we gave them a degree exactly yeah the years of experience this was pretty aligned with what I would have expected yeah I feel bad for these people the 20 plus years like having seen all of these Cycles happen like four times now and just like I am old enough now to have seen this cycle twice and be annoyed by it yeah until you've just outlived the cycle at that point I mean 20 years ago what are we talking about is that even before jQuery when in 2002 yeah I mean you've seen some Cycles at that point yeah I mean yeah that was that that was that was a fun time that was I learning.net um yeah that's that was what I was doing in 2002.net I I've been actually doing web dev since 1997. so so that that is strange because I was born in 95. yeah but I mean I was I was a young teenager like that that was that was the whole thing you gotta you understand like from that from that time period I was like I was like I was like pre-teen or whatever like I like the web came out when I was like 10 years old you know or like you know what I mean like like yeah I totally understand what it's like like being conscious when the web was invented um I meant to saying YouTube Can't both be my nails something's wrong it's like when everyone lies about their right on Tinder one of you is lying sorry I don't make the rules Generations are bigger than we like to think anyways company size this one actually surprised me a lot I was surprised at how even like the line or like all of the below 100 are pretty even and the 100 000 and thousand plus are weirdly close to yeah that makes a lot of sense to me I mean like you get a bunch I mean those are like Google thing I'm sure super over represented in those uh in those two categories right there but I didn't expect so much competition in this range below though where all of these are half as much as like these two categories just by like the number like a company with a thousand people you need 1000 person companies to like match that and for this to be anywhere near close is impressive to me yeah that's true yeah I'm gonna keep an eye on this one over the years especially after this year with the current like mini recession going on to see if this changes by next year because I would suspect it [ __ ] gets shaken up some amount yeah I'm surprised they don't show this over time I've just been so curious because yeah like part of it is probably just who's still in the South but there's got to be some Trend that you can kind of map to the data oh yeah I don't think this is this comparison lets you compare two old uh or two historical I don't know if they have historical for this yeah it might just be a new question you know the higher education is interesting I was surprised that yes unrelated field is so close to no here yeah interesting this is my first time seeing a lot of this I definitely browse through this page yeah there's interesting stuff here yeah it's the early salary we talked about this a bit was surprising how low a percentage is over 100k but when you see the like that like this is about 17 and US answers were about 12 what this means is like 12 of this 17 is us and then the other like five percent is the people doing really well in other countries yeah can you see by country up there do you see that tab on that category you can actually filter by the us so we can actually get some better data here nice yep and here we see it yeah that's more what I'd expect 70 are over 100k for us and Israel is doing really well switzerlands and Australia are doing pretty well and then it falls that lines up there's some like Germany jumps out here as like the second highest um respondent rate similar in like standard of living to the US in a lot of ways pretty different on salary inflation has hit Canada true below the UK which I feel like is so you're typically people feel like they're underpaid like a meme is that like you could be living in London a similar cost of living in New York and be getting paid something really significantly smaller than what's in New York would be making those operative yeah it is actually really interesting yeah and as uh Ryan was saying Canada and the Canadian inflation it'll be interesting to see how this number shifts over the next year is I think there's some of the most interesting data I know we're here for the Frameworks but yeah oh this one I realized I should have plugged if fireship could get this type of over representation by being like 2 400 people heard about it through him I need to be plugging this and sneak myself up on these charts yeah yeah I yeah no that's that's that's yeah I feel better now that I've I've seen seen this we'll continue on uh I'll tell you what I mean later shall we um interesting a little a little teaser excited to come yeah and then one last important call out is that Tech has a horrible gender bias at the moment and that is reflected in this survey this lines up pretty well with my viewership on YouTube and a lot of the numbers I've seen in and out of like in and around the industry yeah it's it's very unfortunate scenario it wasn't actually always like this um even like coming out of the 80s or um the early 90s surprisingly you it wasn't actually as hard you'd think the number would like get more balanced over time but it hasn't in some cases might even got worse from that time period yeah it's you know can you change the percent of question respondents I think filter out no answer which is I think a little misleading at the bottom of the chart uh true let's scroll down a little bit Yeah the middle one yeah yeah that's I think representative I doubt that no answer is I think more like the people five percent now didn't want to answer it makes sense yeah I think but what's this is one of the things where it's like this survey I think this survey is worse and this is not the industry the industry has a problem with gender but it's not this bad um so it's why like even in an industry that has a problem this data has an even bigger problem and maybe this happened I would say this the week after it comes out there's the backlit admittedly also bias because most of the applicants I was reviewing were when I worked at twitch which is like gamerboro tech company but this is slightly better than the numbers I saw for applicants when I was hiring not to excuse our industry but more than I think it is a problem because then we as school creators go and make the assumptions based on this data that it's itself we end up building for an audience that is itself a substitute I actually have had that coming into this call I don't actually know the official answers but I know it's not this is bad I don't know how far off it is but I definitely agree it's something that should be considered as we go in as should this is there a percent cool yeah 70 white responses very good to know anything else super valuable here the disability status is good to know uh again 66 of people uh not listed or don't have a disability so all of these are biases that are good to know going in shall we go in features time I liked this visualizer a lot and how it compares the different categories but also clearly visualizes the awareness of a thing against the amount of users of the thing so for those who didn't read up top because I scrolled fast the dark circles are the percent that use the thing the Outer Circle is like the total how many know about that thing so knowledge coalescence is pretty well known and used by a surprising number of people promise.all settled is known by a similar amount but used by a much smaller percentage and webassembly well who's shipping webassembly other than figma yeah so what this kind of comes up with an interesting thing that you see in a couple of these surveys that people use Technologies without realizing that like any tool using beat is using yes build yes build it's Pub assembly um proxies are another one of the love Library that's always something worth calling out these things are used in different ways than they are recognized does es build always use web or a webassembly I thought it used like a native go or binding almost whenever it could and only use awesome like what it has to you're right but yeah I think the point still stands yeah the point still stands for the most part but I think a lot of these are things that are like like the value comes through you using them directly and that's what this is interesting for like like I does a library use promise.all settled possibly maybe even probably but that doesn't like affect my experiences as a developer that's like a slight win for the maintainer wasm is a thing I'd be shipping to the user so that would affect like that that would be more meaningful I would argue so like in the case this is like direct usage yes for a while I might think that could make sense but for almost everything in this category I I think direct usage is the thing to be looking at so like temporal API having 10K know about it 1400 have used it this is very very valuable and maybe something else is using it under the hood but it wouldn't really matter what's interesting to me is like this new API isn't something a lot of people know about and even fewer are using I missed that when I first played that's actually probably the most disappointing set here that is such an improvement that does not get enough love or attention that API yeah I think that's all for this one the knowledge scrub this was really interesting seeing how many people who taking this know about like these Technologies I was proud I got a hundred I was very proud of myself yeah this I I feel like this number's gone down over the last couple years and I don't know if it's because people don't care as much about like showcasing off or if the there's new things people aren't aware of um yeah I don't know um I guess we'll see if this carries out through this is just a hunch I have felt when I was watching it but I guess uh if we look through the numbers we can actually see this yeah I'm curious what this looks like over time as well and like what person like how these numbers have moved around it'd also be fun to like map individuals if at all possible to see like what trends and directions people move like given a person who is in 60 to 70 percent where are they the next year are they more likely to be higher or lower yeah I've I've definitely gone down the last couple years I remember a few years ago I was like 100 and now I feel like I'm like hi 80s or something or low 90s I don't know is there anything in the language features that y'all really want to see like the breakdown for it's funny proxies are like something I use every single day it's like super common for UI Frameworks um and it looks like yeah does this mean okay yeah yeah compared to last year less people but I mean it's yeah I guess it just hasn't really moved much we don't need to talk about it can you go find a temporal I'm just curious and wasm I think would be interesting yeah let's um that might be proud yeah oh first time first time tracking that cool and waslam is going to be here oh Rich got a pick I didn't know this before going to no or nominate the type annotation proposal uh we gotta talk about typescript when we get to that chart that's my favorite chart I become the whole thing for me and potential yeah I'm excited for it as well so yeah awesome it's actually gone down a little bit in terms of knowledge that much but enough I've used it as gone up which is interesting yep very very interesting cool shall we hop into libraries this is what I'm here for lots of boomerangs so Theo here's my pitch to you this chart is impossible to capture Anna's screenshot so a video like this is actually probably one of the only ways that people are ever gonna like see this chart like talked about yeah because when you highlight it what do you want to look at right now well I'll start by kind of throwing off around to the bus because I think this chart really does show usage in a way that a lot of the other ones don't so like webpack up here is for the last five years been in the right quadrant for this like should we give a quick overview of how to read this chart first before we talk about any specific thing so I'm going to highlight react as the example so I'm going to hover over react and now you see where it was placed over different years the axes top to bottom our top is have used bottom is have not used left to right is positive to negative opinion so higher up means more people have used it farther to the right means more people like it generally upright good uh down left bad but there's an expected as you go higher up you're going to have to move left some amount due to my previous theory of once something becomes popular enough you shift out of the average user picking it to the average user being forced to use it and satisfaction is inherently going to go down when that happens and you'll see that a lot in this chart the other thing to look at is the color coding where on the bottom here it has like dark green is rising in popularity and purple is falling so this is like a general color indicator to see what is and isn't growing also super closely with the shadow to raid El Cool Chris thank you so much for the raid we're deep in the jsrva right now I would say that react is this is also great for showing the people who Justified those expectations like react just going straight up as more people used it consensus generally remained the same positive that is super rare these straight UPS on this chart no matter where they kind of fall are super interesting yep like react being able to continue climbing for so long I've credit a lot of this with like initial adoption people are really excited it held pretty strong 2017 adoption was continuing to grow are you starting to get better apis for managing things within it like context we started to see uh like Danny your mom's contributions really show and then 2018 were things theoretically would have settled down a little bit we got hooks which allowed us to continue massively growing in satisfaction and since then things have kind of stagnated in terms of releases like we're finally starting to see the the benefits of concurrent mode if we all remember that and a bunch of the new SSR and like server-side changes but I think that those three years have not much happening is why we saw this move left for a bit and now it's going straight up again because we're seeing new releases we're getting excited again yeah so I'll just uh I'll call our webpack is actually this thought looks really good for them in that like yeah do you ask Twitter webpack is dead you look here not only is it in the highest views I think of anyone but also in the positive mostly positive category so shout out to the webpack team not moving the right direction but yeah all right yeah I mean at that rate if they do one more jump on that line they will be out of the positive yep if yeah if they do this again it will have shifted to negative so like this is a huge sentiment shift and I think it's important to recognize that like as good as this is that they're still so high up it's terrible in the sense that they went from like 75 satisfaction like like positive satisfaction to 25 and it's going to be zero next year at this rate yeah I just say like I put them on the blank board without knowing anything I would have probably done probably the same have used but way on an egg without and mostly positive even they even have another even at the current speed because they're mostly possible that's surprising the TSC CLI is fascinating here oh interesting yeah what do you think that's small what do you think causes that people realizing how bad the performance is and that it's best to avoid TSC except for in like Ci people trying to build new versions [Music] yeah and like the performance they have in their like type systems that starting to corrode over time people who got really into typescript in 2020 now have projects big enough that they're feeling the impact of the type safety air of like the type script server crashing under load I'm not too surprised about that and the people who know what the TSC CLI is before the average person who knew about it knew about it because they liked it now the average person knows about it knows about it because it's causing them a problem react here was a big surprise for me I think if you look at the downloads it doesn't account for this pretty poor usage and also mostly a negative opinion and it's just kind of been Meandering there that really surprised me I don't know if the actual number of that but for Server respondents it clearly wasn't a positive yeah that's actually really yeah well it looks like it's coming back like yeah it's swinging back towards positive but 2021 was bad 2022 is doing slightly better positivity wise but it's still going down in terms of like popularity yeah I think that's a good call out that the speed of movement here I think because it's on single like if you're just kind of Meandering around your area that's not good like that's only so many years in relevance in terms of how how it can be kind of the thing to see a project for five six seven years just kind of circle the dream a bit in one section is I think its own is it fair to say anything in this quadrant here is pretty doomed where it's below like the the median line for usage to the point where it fits within my theory of like the average user didn't pick it that's why they don't like it because anything that's below this um like have used have not used line you picked so for you to have picked it and still hate it it says a lot that's yeah I it's the right way of thinking I just can't imagine I would describe it like reactions had a really big I don't think Greg has ever been promising than it is now and again because people are picking it yeah it's weird that they would pick it overreact but then hate it like I can't imagine why I don't know that's a weird data point uh who said oh it's Ember I was gonna like what's what's over on the far negative low side yeah a couple projects just it's again and I think the downloads the relax place it probably is more forgiving to these projects but on a survey like this there's a couple like stop he's already dead kind of mean um just because it's been not only is it like not having a great year it's such a good like Vogue for a while so I think people like to kind of [ __ ] on some projects I have a funny story about snowpack whenever we talk about solid start um yeah snowpack is a dead project and for anyone who doesn't know my history it's a project that I started back in yeah 2020. um an early V competitor that you just totally ate our lunch apparently though up until a year ago still on the right side of the uh opinion chart yeah older testing green why is it green I don't know if that's I don't know what that it means that the overall usage has gone up which is scary yeah that's that's not if anyone in your audience is using something like this it's time to go I have not talked about snowpack for that reason definitely take advantage of all the other awesome new tools like Veet that is what Fred now uses on Astro they don't even use snowpack anymore it's it's pretty dead it's awesome and is for the second second the clear of a winner there is a winner feed system yeah the the the the lower left quadrant like along the bottom uh or sorry lower right like along the bottom there's just a bunch of things jetting up the side trying to sneak around the the top um it's like very very green little area where everything's kind of just shooting up uh big contrast to like the abyss that kind of sits over the center of the graph yeah it's like Center and Center bottom seems to be a scary place everybody's fighting to break out of here like if we look at something like next JS which is still pretty like not over that popularity thing it was in that mess four years ago and it is about to break out yeah is through popular opinion no one's just gone straight up in the middle everyone goes around the circle because Yeah it's you're gaining a lot of multi as you go otherwise you don't like what success looks like on this chart is webpack like up right curve and then fighting to keep going up in this trajectory as much as you can while mitigating how far left you I think react probably has done the best in that regard where it like what kept going up it started having a more negative sentiment and it's fought to keep going up since or we can look at Gatsby which is like the worst possible case whereas it's like a line right yeah and what's so funny is thinking of these Trends as started years ago like it has continued a trend that started back in 2019 and that is really surprising like it never had it up here it never had it to the right year for a project that is pretty well used and still has very commendable download numbers just these Trends continue clearly yep it's probably really hard to reverse things I wonder if any projectors and here's solid there's got to be found yeah and Astros right beside us so there nice oh yeah nice lines and terrible repost is actually doing very well here yeah crazy whatever solid Position will do for your brand sentiment Tori's doing pretty well too that's cool to see is it or is um [ __ ] why am I creating the name of electron it's electron in here somewhere has to be here it is yeah uh command upwards that looks about right rip yeah I I don't want to pick on remix in this chart uh because it's still such a young project but on that topic of has anyone ever reversed the leftward slant I'll call them out as they they've moved it's their first year who knows but they're moving left and not right the way every other project here is gone yeah that's scary there's more info on remix in the other views here if I recall oh this was hilarious what I'm planning on doing for the thumbnail you missed it by one percent one percent astrum is by one percent oh we'll both be there next year oh you didn't make it in because it's oh uh ten percent yeah sucks I I will be screenshotting I love this I'm screenshotting this for the thumbnail so like this will be the thing in the background with us doing reaction faces you should put us as blocks in the S tier yeah honorary uh no next next you're not gonna add it I'll add another tier near the bottom that's guests for this and put you both in that we'll make it work yeah I do love that they did this it's hilarious um yeah a lot of this feels covered by the uh guy that first heart is just something interesting there's so much good data in the top of this page it's funny the yeah they start using this term retention here before we go there I was just I was looking at the chart it was just that like in the previous years they called the retention category satisfaction which I feel more lines up with uh like you know when you have like MPS scores and stuff because the best way to get good retention is have a burst on usage as well like it's because it's like new users are excited about it so they retain it but it's not actually them retaining it because they literally just chose it as well so it's like um it's weird that they decide they call it retention I think there was some blowback last year um about calling it satisfaction interested I that was my perspective but I I was also kind of on the the uh the back side of that right and maybe last year's front-end framework results um definitely caught some people by surprise do they actually uh within this like if I answered is this like a number based on a given respondents last year and this year or total respondents last year versus this year that's a good question I'm pretty sure they don't keep enough info to know who I specifically am between years so my guess is that this is based on like like if Veet had 40 of respondents last year said yes that they used it and then this year 41 said yes then this return or the retention was really good but also like how would we see these numbers considering the number of us has to be year over year in order for them like I'm sure the number of respondents who said they've used remix is higher this year than last year so for the retention to only be 80 it means that they have to have like individual yearly data I mean looking at the numbers here the retention numbers are exactly equal to satisfaction numbers on the on the like total graphs we saw last uh yeah okay so if you go to other Pages they describe it they say it's the number who would use it again divided by the number who would not use it again basically Plus usually going to keep it as a percentage so 10 people say they use it again over 10 people so they would not use it again yeah of course yeah it's just it's just the pure numbers from the charts that's being played back at us interesting good to know it just it's funny it's just funny so they rename the term I don't know if they mentioned that in the introduction but they decide to call it satisfaction this year or retention not satisfaction all right yeah so you got to switch it into meme mode which is the ranking that's what we're all here for oh boy yeah meme ranks time let's do it you can't really it's funny because they did this chart to be more accurate because the you sometimes chart down even when you go up but the rankings mode is really the only version that you can actually see and like post on Twitter and stuff where people can actually read the chart yeah this is hilarious huge congratulations to Ryan for the number one spot yeah last year some people thought this might be a blip um I I'm maybe kind of a joke comment that like last year you could put your stream title look like image over it or your logo or something like you know how you Theo you're up in the top right hand corner a lot of times when people were reviewing this they kind of just scrolled the screen up so that the solid was like under the the person streaming or um my my favorite one was this felt video about the most blood framework they highlighted felt on the uh on the on the results so the the pop-up and it just covered the complete place where solid was on the graph um for their for their for their documentary like that yeah but now that there's two years you can't do that anymore um but if and and quickly similar to house felt's approach to solid is kind of pretending solid doesn't exist yeah I mean it makes sense on a certain level too because like there like when you and especially the time was talking about you like if you bought into that like like react and all that stuff is the past and the future is like this radical approach when you look at stuff that's like not as radical or not like down that path you might just be kind of like well that must be the same as the stuff you know like you just discounted as even possibly being something that would would even matter or could matter because the future is writing you know stuff that looks like vanilla JavaScript but doesn't execute like vanilla JavaScript so yeah I mean I I think I think the the bigger theme Here is if you actually look now we can't not mention Quick's entry into here as well the the top three in this category um now essentially are um not the major players in terms of usage or downloads like it's kind of like a flipped chart and I think that um that's interesting place to be because I don't know if people know how to process or explain this I I think this is one of the I I've watched a few commentaries where people kind of talk about the charts and the framework stuff and like it's hard if you if you're not familiar with these Technologies how do you talk about them or speak to them or talk to the trend um so to speak is this even a trend so I don't know this is a hard chart to speak to because it like is combining so many things that aren't necessarily like comparable like lit being in here still kind of feels weird one thing I do want to call out that I'm noticing is I'm looking at debut year numbers like what how did this do the first year it was on the chart because Quick's really high up now at 85. but when I look at other Technologies like the year they debuted they did better than they tended to and most like have a bump and then Trend down or just go straight to trending down so if we look at lit here it started at 78 then it went 77 then down to 71. we look at Alpine even Alpine started at 82 and now it's down to 76 and I'm amazed it's even that high because I don't hear anyone really talking about it and it's crazy that Quick's debut year is closer to Alpine than it is to solider's felt a little closer to felt but like debuting at 90. I see why people said oh that's a fluke but then maintaining and going up slightly that's some of the craziest performance on this by a lot yeah yeah no uh view uh looks like it debuted 87 percent and then went up to 90. I think that's the exception the earliest year that we had data um but yeah react was 93 through 2016 and 2017. 93 through those two years um and then a view tanking from 91 to 87 allowed them to since both of them tanked 2018-2019 but react tank to less it actually looks like it did better yeah yeah it's funny and then felt kind of snuck well 89 88 87. yeah think of where that is on the like the chart of stagnation that is everything is exactly where it should be everyone like there are no new like that's me ninja I'm like in a period of just like and if you go to usage you really see this like the most popular at the moment and only in the last I'd say two years have like new players been showing up here felt maybe a little bit ahead of that but something quick Astro Etc like there's a real sense that things are changing and all of a sudden where like everything was locked and not really moving around they're like Eurasia like you know these three big players are just kind of switching spots with each other but not really I will say shout out Ember for maintaining a really strong floor for us it's nice to always have something to fall back on the angular I was one thing I I've been watching angular on this chart because it keeps on going down because of positioning but not because of usage it it started turning around in 2019 but it actually looks like it dipped a bit this year but I I was watching angular because it was yeah it was you know higher and then it was down but then actually it's it's been going up the last few years until this year um I like to think it would have continued going up but I specifically have managed to hold it down but uh yeah I've taken Ben's role in making sure nobody uses angular if they have the opportunity to know better um but yeah no what's interesting for me is view has has you know it started to kind of catch up with them um more so than we've kind of seen from any of the Frameworks that have gone into such a you know a higher level on this chart um ones that have seen the 90s view is the first one to dip out of the 80s um uh uh so that's a little bit interesting but I guess this is just this is just the longevity I guess it's what you come to expect after being on here for what is a seven years worth of results yeah yeah I mean react it's been here for seven years hurt them a lot more than they I think right or that anyone kind of publicly admits like I think you could probably map that migration story that uh that breaking change onto this part pretty easily I'm gonna run a quick poll in chat uh worse V3 migration story python V3 or View V3 we haven't seen the react V3 one yet it reacts on 19. yeah no but server component says V3 I I mean I mean maybe yeah yeah yeah like I I I'd say it's V4 because there's a react then react with jsx then react with hooks and now react with server components yeah I mean nothing will ever beat python I've made my book it's a story that's still going yeah yeah it's like the textbook example what if there never is a react V3 moment says Lee well we'll try that's our job loud bites during noises from a level yeah that's a fun poll it seems like everybody agrees python was the worst so uh yeah continue making fun of us web dev or us web devs and our npm while pip and Python 3 are still a thing so I said scroll a bit down for another switch ooh yeah retention interest usage and awareness so you can do interest can we quickly map uh I'm sorry actually go through this however you want but new usage over time I'd be curious because that might be one of the first big players to be showing some some actual cracks now not really reflecting usage yeah the usage for these charts are usually really surprisingly static uh like they get to the level and then they no one moves I mean it's not shouldn't be surprising yeah no one moves except for you doubling yeah and so there's been doing that or did that a couple years ago yeah but yeah yeah the the what you'll notice in this chart and it probably reflects on quote retention is that both on usage and interest solid went up considerably um and I think that actually you know just a bunch of new people seeing it and being excited about it kind of made a big part of that like last couple percentage points I'll go back to that point I I kind of want to make this point look it's felt specifically because I do think this is that like the volume of movement is actually a signal here and I would actually if I was be looking at this with a little concern eight percent fifteen percent huge year 15 to 20. okay still pretty significant 2021 for not one of the bigger players right now is still like you need to be getting up if your goal is to outplace or match react you've got a long way to go in a year spent getting from 20 to 21 is not good it's not terrible you're still pretty well positioned but that shows stagnation on an exact point where like where are you you're still trying to figure out where are you going to land on here when off all of a sudden done like how saturated are we though like is that the problem like they're just it's yeah like no one's gained gains an inch like anywhere since was the last time anyone 2018. I'm gonna argue this in a different framing which is I think you guys are looking too much at the order of things and how much it changes rather than the impact of things and how the whole ecosystem is moving and this usage is like probably the the chart that to me matters the least in the sense that like once a thing is used it by default stays there but when it loses its excitement which means its ability to get new excited users that grow it and goes down and we've seen that with angular even if it's roll or it's like location here is still high it's gone from a peak of 58 down to 49 and it's still going down the number of angular users is going up because the size of this chart goes up every year but a three percent to six percent bump for solid this isn't 2x this is closer to 4 to 10x because of the number of survey like respondents going up as well and that type of growth doesn't reflect well on a chart like this because for the incumbents the percentage kind of matters because it's at what percent of respondents have used this thing but for new developer for like newer Solutions the percentage matters a lot less it's more the like size of the pie as the pie grows and yeah what percentage Yeah what percentage of the pie growth is going to solid and angular or solid and Astro versus like angular and react I would expect that more new developers and developers who are becoming senior and becoming like the decision makers a higher percentage of them are using these things which is how you end up with the overtime Trend that we see with Ember where it just slowly Putters out and dies that's because no one is starting off on Ember anymore and a lot more people are starting off on react and then discover solid early and start moving to solid pretty early in their careers or using solid more early in their careers that is what to me is the death of a framework when people start learning it and start using it early on and we've seen that in everything here other than react yeah yeah I think we're saying the same thing I think I'm looking at change over time on the start and I think that's where if you're in the lower half of it and not moving up quickly I I would not be again it's not a bad thing to be a very successful but like middle of the tax framework but if your goal is to replace react that's you're not getting there well react is insane when you when you like just look at what it's done over time here looking I know they use like react just keeps growing like and it's the top like it react is uh is is different than the others um yeah yeah if if D was like the number one like blowout winner again to use winners I think I'm gonna use it anyway beats absolutely the star of this data I'd say next year this is a very clear number two in that it achieved satisfaction rates that are usually reserved for like smaller super passionate audiences they did a really the data is showing good things about XPS in the next year yeah oh uh can we highlight one more before we move off this one uh can we go to the where I'm interested in Awareness we're both kind of Interest like quick solid awareness almost doubling yeah yeah 30 to I think Astro ends up doing almost the exact same jump this year too um which is considerable amount and then obviously interest interest doesn't always go up either interest is actually might be I I'm trying to look at his interest harder to go it's similar to retention I get gas as well it's a hard number to move up and that was even though quick kind of slid in there um that that was a happy metric for me actually I think that made the Gap Celexa went up considerably on uh or went up 10 on interest um going up on interest is incredibly rare yeah so yeah especially like solids a new framework either like how long ago did solid one ship well it was 2021 it was it was oh sorry solid 1.0 was only last year yeah yeah a year and a half yeah when was the first uh hn post that I saw that had to have been like no later than like 2019 2020. yeah yeah because I mean I opened Source in 2018 ah it it was very usable as of 2019. I just dragged my feet because I want to get SSR right yeah all right you know as the person pitching memer ranking mode um switch back real quick to percentage solid story is way more clear here and I think you're right sorry go back up to the tab view at the top percentage yeah um and the interest is what we were talking about uh percentage oh we can do that here too oh yes yeah so look at solid that's that's a clear movement yep the only thing that ever had interns grow like that ever before was View yeah and that that was hidden in the ranking chart but like yeah interest went up quite a bit not as much as yours did but reaction have gone up a little bit too I imagine anybody who's picking up signal went down preact went down no oh react went down preact went up very slightly yeah anyone who's talking to 35 anyone who's talking about signals this year their interest went up that's just a good bet is angular yeah I feel like angular is having a little bit of a breath of life and it's talking about signals there's like big under the angular Community is like small but like really passionate trying to make that work it's crazy how if you do literally nothing for like eight years straight and then you promise you might do something in the next five all of a sudden people will show up again yeah what was that like bankrupt gym that said they were gonna release a crypto coin and then became like a billion dollar company it's it's that I mean yeah they're finally addressing a lot of really uh pain points and stuff one of the things I mean a lot of people don't I I learned a little angular this year is that their components was all part of a modular system and like you had to use their the angular module system to do anything and like everything communicated within this like kind of namespace thing and they released something that this year called Standalone components which is basically how components work in like literally every framework but um it's like it's it's stuff like that where they're kind of like modernizing that it makes it's making a big difference like like the community is kind of some of them I guess at least are getting what they're they've been asking for for a while a lot of people who are happy with angular are just happy because the the angularisms of it but I think there's a lot of modernization happening right now this all sounds about right to me I shout out to uh Brandon Roberts he's the person working on that and yeah absolutely deserves credit for that bump yeah this would be nice if they would kill a flutter which it's I I'll get into how I'm upset about flutter getting mentioned in here in like the cheapest way but uh we'll get there when we get there more to talk about first in particular it is now Fred's turn to brag can we do one more thing on the thing can you go back to the villains because Fred gets to brag about this one too go back to front end Frameworks and go all the way down to like the the the the the yeah by the way this is my favorite chart if you just might Fred has his favorite Tarts the other chart the one the one above this sorry the the one with the positive negative split this is the one where I internalize my head what the Mind share ranking is the order you appear on this chart is is your is your like where people think things are you this is my favorite um yeah so I I'm gonna admit something I had trouble reading this chart can you like say more like how do you interpret this because I wasn't really sure what I was looking at some are longer than others some are yeah is like number of responses yeah exactly and I don't even know if it's like it seems because the area gets larger it's harder to get bigger so like the it's but essentially yeah the taller it is that's the like the more people are um yeah like I guess aware of it I what do they put it here how do they put it like the Set uh bar thickness is the number respondents who are aware of the technology essentially but what's what's interesting is like if you look at it sometimes like the leaders like react are really green overall even though like you see the the decline in stuff like proportionally there there's one of the most they're the most green out of like proportionally compared to any other framework on this chart and that's what this shows it shows like it it's a little bit different That You Don't See in the other charts like just like what I know they're all like what percent are you are happy but it's like a more combined look at that I I don't really look too much about the differences between like the pinks and the dark pinks although having large dark pinks is probably a very bad indicator for the future it's like that's the place where it won't shift like where it kind of locks in but um and then when they end up aligning it by Green um essentially which the most green which is interesting to me because yeah that's what I mean by kind of hype metric like in in a sense this chart shows that in people's minds felt is number two not view do you know what I mean yeah and that that's that's kind of what I've always liked about this and actually when you look at this chart from this ranking View and solid are actually really close so they're very close in terms of the positive sentiment but you're definitely leading in terms of like the negative in particular that used it not interested again right but when people go like what are the top Frameworks not from usage or whatever but just from like like or the top sentiment I I actually just keep this order it's so in my in my vibe check is what this is right so like in my mind okay so solid here is actually number four but very close to number three that's that's kind of where like that is and felt's actually the the number two Choice here and that that's just sort of how how I look at this chart it's it's something I want to point out here but that makes a lot of sense I actually like that framing a lot this is this is the the vibe check chart that is ranking by vibe in a way that kind of makes sense yeah and yeah okay let's let's let's give Fred a chance to brag about how he got the most write-ins because I I find the next thing uh this hilarious because let's let's face it here how many of these are front-end Frameworks it's funny I didn't think like I find this very funny it's like a meme that we won the writing category but also like the fact that how yeah Astro remix next.js it maybe speaks to rendering Frameworks not being well defined but I think more it speaks to the mingling of like that you think Astro is a front-end framework comparable to solid or reactors felt it's just it shows how like just muddy that line has gotten like it shows why I react would be looking at server components like our users are already thinking of them as one of the same so I mean look it's important because like this number is very small like 400 write-ins with a 40 000 respondent survey means that like this could just be a miscommunication to an extent when they were reading it where like They Know Remix and next are going to come up they don't know if Astro is and they want to make sure Astor is mentioned somewhere all right it's it's if you have nothing better to show off I would be bragging about this but yeah there's some other places where we shine so I think this was more interesting to see how users think about front and frame yes sorry I was just say in the past Elm and stencil always did really well in this and then you'd see a few other Frameworks like Marco or whatever's gonna sneak into here but because of all the back-end Frameworks that ended up here they all got pushed out it's kind of fun stencils here yeah stencil got lifted up to being on the short list where this is their first year even though they've been around since like 2016 or 17 2017 I think no I was can someone explain to me how nexjs landing page is a front-end framework with 46 people writing that same phrase oh the template interest that's literally nextjs.com is what I use to build my websites many page wrestling yeah so anyways shout out to Elm this is this is this is your category you were robbed poor Elm we should have a separate category for languages anyways let's take a look at our rendering Frameworks the thing that we talk about way too much here ways to make HTML come out of a server so this is the default retention over time where we see Astro growing and everything else other than next no next one down a tiny tiny bit uh next maintained as well yeah are you the only thing that went up if you don't yeah I think so so we were lucky we were featured last year um on this survey pretty early like we weren't even V1 our data was like good like we were kind of you know uh or small but like interest was growing I'm really glad that happened because we were able to still even with like when our moment of like passionate fans um but maybe not a ton of usage like was probably the highest yeah it was really able to compare against that because I would now with hindsight I'd say Astro v0 was a much rougher animal than asteroid like we've done so much work to improve usability and that's the thing I take the most away from like yeah you were one of the first people used it like on stream there wasn't syntax highlighting there wasn't typescript like it was rough and we've done a ton of work over the years that's what I take the most away from this is in the retention I think there actually is people who who use it more likely to stick with it yeah I'm definitely not good at moving off anytime soon take a look here where uh if we look at retention in terms of like the retention interest everything combined chart here uh svelt kit dropped from 96 to 93 and you went from 91 to 93 and just slightly overtook them it seems yeah so yeah the upward momentum is awesome I will shout out because I thought I saw rich and I'm saying this is someone who's been on the other side of these coin tosses like you see we have the same percent yep if you're that close like that's a tie in my book like Rich was trying to be like oh like we were eked out by by Astro at the last moment it's like that we essentially died like if that number's the same I I I see that as a win for everyone so I think we were talking about this earlier like bucketing these is much more interesting if you see like what's the kind of first like the St or the A2 or the B tier um I think that's where the interest here is for me and yeah spell kids still had a pretty great year even though they followed the more natural like retention going down as usage goes up there's a lot of rough fear for breaking changes too which I I Know Rich called out I think that is definitely reflected here I will say docusaurus being so high up on their first year on here is nice they have worked really hard in the docusource project consistently impresses me with like the quality of developer experience and also like the user experience of the docs that it provides and getting represented here is cool to see yeah for anyone not following around that is a project that was maintained by Facebook and effectively maybe not dead but like maintenance mode that is now really coming back to life is that am I reflecting that accuracy yeah Sebastian took over it the guy who does the uh this we could react uh journal on Twitter and such all right Sebastian yes I'll never pronounce his last name right yeah someone called out someone called it the 11 they had a pretty rough uh year and I think a little bit of that Zach has moved over to Mastodon and I don't know not that like like I didn't post anything about this and getting the vote out but I think 11d has kind of receded a bit and it's like public perception in a way that again like usage I don't know if it would actually like npm download to reflect this but yeah they had it surprisingly for a very small but passionate user base still uh to see this change is is a little worrying especially when you look at awareness here yeah wow you're beating out docky source for awareness yeah that's crazy yeah yeah same 30 to 60 jump right like it's it's an it's a doubling yeah our our retention tripled so yeah again we're talking small numbers but three percent to nine percent that's probably the uh if I'm proud of anything here that's yeah the usage our usage yeah usage you said yeah like that that speed of movement is what I'm really I think that's why it's top of mind it's something I care a lot about yeah 11 to users went down slightly uh most of these others next went down slightly Gatsby went down thankfully and everything else went up yeah the awareness is super interesting to me I I don't think I would have guessed most of these placements like svelt kid and remix being so close is crazy to me and remix being this much less well-known than nuxt is mind-blowing to me but this again shows the Western bubble I live in oh that's funny yeah I was actually interpreted the other way it's like how is nux that low but I was thinking of a view developer like it's the next.js of view you're absolutely going to know what it is but you're right like if U is smaller than next is going to appear smaller on this yeah there's a big grain of salt there for these more framework focused rendering Frameworks yeah next being as aware as Gatsby like for these to be this close is insane okay it worked in the X team becoming like insanely well known in regarded cool I think that's all I got in this chart let's see something else you wanted to see yeah again just retention of next you guys I want to call out is just essentially unheard of um or not unheard of but it's one of those few projects that just grows and maintains happy users oh they're a tough project to be competing with I they deserve a ton of credit for that yeah this yeah no that's that's insane that's even better than reacts retention line yep just so what you're saying is next is the new react we're not going there right now next is the new angular um I will say that I think again like what remix's job is here is they're the smaller project they need to come in above of next.js on the interest and retention here they are like Astro stealth kid everyone's kind of like well we're not really next.js we're doing something else and that's cool but if you're Gatsby or remix you are competing with xjs like you need to be coming up on the right side of this yeah for remixes interest to be closer to docosaurus than it is to Astro is very dangerous yeah thing is yeah this was this this one particularly was unexpected from my perspective I I guess this will be something interesting to look at in another year or so and kind of reflect on what happened I don't know this is this is interesting I don't know is there any other drop that big a 12 drop in interest 47 to 30. yeah and Gatsby 55 to 39 but like remix according to interest is on the Gatsby Trend at the moment if you look at the chart then I guess is a little bit lower downward you know the one I know this is Fred's favorite chart in this it's there's so much good stuff it's the remix chart is just it's it's it's baffling it's like it's like the green section is almost flat except for like the little bump up that the dark Reds snuck in there and somehow as awareness went up it directly is not interest like it correlates like the awareness and not interest are like even mine right like yep it's they have it's almost like there's a wall here where there's this line is people who would be interested or use remix and as they increase inter or increase the number of people aware and they increase awareness they're just increasing the number of people not interested now that's that that seems just crazy to me I think I think remix is great I don't know I guess I guess the competition with next is very challenging yeah I think I think remakes yeah I think the next is like the next is a huge elephant in the room for them where they and I think you could kind of map both ears onto this it's like they came out with this hugely like exciting idea of nested layouts like that essentially next to us then took the next year to launch their version of and yeah that's really tough to be interested in it if the biggest thing you're saying you're different from is just gonna cut like it's like Snapchat versus Facebook right like if they're just gonna copy your best ideas like that's just a tough spot to be at it's it's and you know what the tricky part is that that's a narrative that got played out and maybe that like impacts how people perceive it but that's like not what actually happened in a sense like I I I'll talk for just a moment on this just because nested routing has been popular in every framework but react and it was in react back into like reactor out of three and then like in a sense remix uh brought it back for react where it's already popular everywhere else next was gonna go here anyways regardless of remix I had no nothing to do with remix it has everything to do with if you understand how server components work and um it's unfortunate because I was a narrative that played out and remix actually played right into it when you know maybe suggesting as much that it was like next um you know pulling it but the truth the truth of the matter is like this was kind of an inevitability um regardless and remix has so many other really better in like considerations like the way they like simplified the mutation action model the way they do optimistic updates I I honestly remix often take updates I like better even than react query like I I think that like there's a lot of really cool stuff here that we saw like obviously solid start grabbed a bunch of its felt kit picked up a few pieces here and there like um I like I Know Remix doesn't have HMR we've been talking about this like this this this this result did surprise me legitimately and I think I think I think remix at this point if this is like reflective any truth I think it's like being undersold like it yeah yeah I I think that it's easy for us as framework nerds to see the small wins in remix and be like oh yeah those are huge I'm excited to like see those in those in other places but I don't think that like the quality of optimistic update experience is a deciding factor for most developers and the benefits That Remix brings like that are all optimizations that look good in a presentation to nerds from nerds but aren't necessarily like huge business drivers outside of specific businesses and as a result remix isn't innovating in a way that is exciting to the average developer the first time you see a data fetcher in the same component as the or in the same file as the data in the component it's mind-blowing but now that every framework has that that aha moment isn't something they can sell on top of so instead they have to win everywhere else and they aren't picking to win specific battles hard they're picking to pretend they've won every battle because they inherently win certain ones by winning others yeah I I I I can see that um it feels like their marketing angle is well we're already good enough why would we do to other Innovative things yeah yeah it's a pretty tough spot to be in I I'll also just kind of call out the Gatsby is actually I wish they changed this chart up because the red is making the green sections look bigger inside Gatsby if and it's the only one with a big enough really dark red section to make this worse yeah the order I would have done this in is like the greens on the bottom the metal and like I never heard of in the middle and then the Reds on the top yeah yeah because the greens are actually it's worse than this chart looks surprisingly which is not a good spot to be in um next I think nuts has had a pretty rough year so they had a actually [ __ ] is that their V3 yeah add them to the pole I think that was their V3 migration they went I think 18 months between B2 and V3 and it was a lot of like hey it's coming soon they had release dates it got pushed Without Really any message from the team it's coming out in summer push never met November I think really rough year but they're still standing pretty steady here which one's interesting from what I know most of that was they were like screwed by The View three changes next itself is again another really like in their Zone like it's just such a pleasant EXP experience everything is automatic everything just works together if you know view like the pieces fit in such a like intuitive way um maybe this is just how well Daniel sells next um but like I I I I looked a lot of Frameworks this year and next is incredibly pleasurable experience I assume once they've managed to get over the B3 bump video to your point it was view three they also decided to move from webpack to Veet it was like a they they basically built a new framework it was a huge undertaking that I don't think they were expecting and therefore they messaged it improperly incorrectly super thrashy but the data seems to most people are still on their side which is a good sign for them I have a 127 Twitter notifications what the [ __ ] happened I posted about this in my thread which is still going pretty viral so I'm gonna take credit for it if someone in check and tell me if I missed something important on Twitter please do because I haven't gotten this many notifications in a minute as I scroll I'm not seeing anything that's particularly important or concerning anyways the life of a top three influencer on the state of JS survey drinking India I and I didn't even send my audience here to rig the poll next year next year I'll be number one just because I'm gonna Force every person in my audience to do it let's take a look at that positive negative split and we could see he's felt getting Astro are super close and both are outpacing remix yeah so Ryan help me understand this so what should I take away from this because I truly when I started looking at this didn't understand or I guess to both of you but Ryan you seem to do this the The Horse Whisperer of this chart yeah I mean I yeah I mean from this one as I said this is just like the the the ranking chart of where thing where things are like in in terms of I like I like Theo's term of vibe it feels like like next is clearly the winner here in this in this thing but sfelkid and Astro are kind of like two and three you know far away from next but are actually kind of close and then remix and nux kind of come in after that um I I I'm a little bit nux is lower than I thought but this actually shows how maybe how hard that you this year has been for next in general and where they've kind of shifted but generally speaking like for your meta Frameworks this is your one two three four Right Here remix actually for even as negative things are are actually still okay for now at least at least the way I read this chart but it's this is clearly if if you had to pick between three meta Frameworks um next and then s Falcon and Astro are the close uh or the runners up would it be fair to read the dark green line versus the light green line almost as like stickiness like yeah I could see how next is like super sticky to that audience because if you do use it you're gonna use it again because it's the view framework similar to the next Jazz and like remix Astros felt kit they maybe haven't built that stickiness up yet either in features that are just uh adoption over time yeah and I think I said that on the last one like it's almost like a little bit of a wall to stop it from like sliding past the line the other way like the bigger the the block is the harder it is to the slide it you know the the opposite direction it also makes the Dark Ride much scarier and that it's the the anti-stickiness it's the like repulsion like yeah like you used it and then you're off it like for Gatsby here to have more people who used it and won't again than used it in well again in this bottom section here like 13 used it won't and eight percent used it in wood that is that that is dead that is over like Gatsby is dead dead dead dead according to this because even if they improve your perception is locked the only way to understand that it had changed would be to use it which you've said you will not do you're yeah completely screwed that's fossilized that's right yeah it's like it's like tug of war once yeah but the green is much more like the thing about green is the dark green you are still using it so something could happen that makes you really upset that does cause you to revisit it so it's like kind of the worst of Both Worlds dark red is completely locked dark green much more sticky but it could change if you start to if your eyes start to wander for other newer Frameworks I don't know why I said in that voice again it's also nice to see like Astros used it won't again is the tiniest on here by a lot it's one percent but it's like a very small one percent remix is a decent jump It's I know it's two percent but it's a bigger two by quite a bit it's probably closer to like high twos this is barely one this is a very interesting time that's cool I I think I like that I like yeah I rage quitted that chart when I first saw it so thank you Ryan for for bringing me back on board I like this shirt I'm so sad we didn't end up on here yeah yeah I I will it create T3 app not only will be on this chart next year it will be number one on this chart next year because I'm sure solid starts gonna get moved to the meta Frameworks yeah we will win this next year guys I will be in every video plugging this survey to make sure we rig every [ __ ] number okay so here's my Beats no Pack story I think I told this to both of you I'll tell it for for chat for anyone watching snowpack beat V to get on the actual official like survey so before V we were in actual we were up in the big boy you know we were playing around we were fighting with the other Frameworks for dominance um we were living pretty sitting High V ended up getting so many write-ins that it almost became like a story like what is this meat project I've never heard of it this is such a meta point but if you click solid start it takes you to the repo versus up above there's no real link to find out about Ash we almost have to open a new tab search it learn about it absolutely got more out of that being the top of that category then snowpack did it being like middle of the pack newcomer to that so interesting Ryan if you absolutely got more stars out of this than I think Astro did if I had to guess because this links directly to the repo I don't think people get stars from this at all honestly I found that click-through rates on things that link to a repo aren't great unless it's literally accompanied with the reason you should be interested like a tweet even like putting a link to create T3 app in the description for a video on YouTube doesn't do [ __ ] I wish I'd saved a screenshot I believe it could have been like I I checked V and they definitely increased a lot when this came out I think there's something about the number one other tool buy a margin I want to know what that is it's it could be the best new rendering framework totally overlooked robbed on this chart like that's that's what I get from solid story like I want to know more about solidstar from this what I think what like what I think is more likely is I see this I screenshot I post it on Twitter be like wow solid start had a crazy year and then somebody Googles it because they saw that and they're more likely to find it and start like the story is what's valuable here more so than the link that this points to yeah yeah I guess I'm better than nothing like there truly is no like an astronaut at least or something here but yeah that's I I have no data I wonder how much the like I got a theory here and I'm glad the respondents at the beginning put this but not everyone does write-ins clearly such a small portion I feel like solid Community was a higher writing community and I think I might know why I'm gonna share this in the chat right now do you guys remember how I shared the original survey out to everyone on Twitter um I I don't know if I did this intentionally or not but um if you like I just shared the link and then I was like you know here we are I will say the experience of filling out the survey was Miles better than the last year the only reason it took me 20 minutes was filling out all the freeform fields of all the people in Tech that I look up to I basically told everyone to go fill in the free free form Fields um again I don't know this tweet probably had that much engagement I can't remember like like 25 likes on this converts decently well to this being like a higher number that makes a lot of sense it's weird how these little biases like once were sub a thousand these are very controllable numbers I could get something entirely fake put in here next year I could even try that I could like put in a video and say hey put like create T4 app in this and we'll see if we can make it to number one and other tools right so yeah I I'm I'm that's that's my theory at least because as you will see through the rest of the survey um writings favored um solid and myself quite well um but yeah checks out right in trash people saying in chat you have trash is the number one other tool this isn't redwood's only showing right I I think it might I think this thread was only showing that's that is an interesting reflection of how GitHub stars are not the full story mm-hmm I mean they kind of are in the sense that right was stagnated in stars but sure total yeah do we care to talk about testing everything but B test yeah as well everything else is going down playwright it did well too uh yeah playlist play playwright is doing well Puppeteer is not which is weird I feel like playwright is now what Puppeteer was to Cyprus to selenium oh that's fascinating I actually didn't realize it was that much more regarded yeah Puppeteer has died to playwright and testing Jess is doing yeah testing Library feels like I think was like the is the top of this category isn't it oh I can't remember I can go to the ranking it's if I test took it from Pokemon Library yeah okay but testing Library you play right are really close just is going down storybooks I hate the story books in testing I hate that so much I hate that so [ __ ] much where would you put it anywhere else I I'd put storybook more and [ __ ] rendering Frameworks than I would in testing yeah no if you're using storybook for testing you're not using storybook right or testing right like storybook is a developer tool for working on components in an isolated fashion such that you can basically build like a a component Library dock for your stuff if you need to write like people use storybook as like the render method to do just tests and they're just bolting things that weren't meant to work together and the result is utter [ __ ] chaos to maintain I've never seen storybook used well for testing in any code base and I've seen a lot that did it so if somebody asking chat is there a storybook but not bad yeah storybook but used right if you really want a component library in your application that's like a reusable set of components that you want to be able to scroll through look at play with and then using your stuff storybook's a nice way to look at identify what the components do and how they do it and then use them that's all storybook is it is yeah sorry I didn't mean to cut you off here it's a Dev environment for your components it gives you a Dev server presentation when it's done so that your kind of designers can go back and look at it and play with it yes yeah testing is a small part the problem I've seen is that people tend to not draw clear enough distinction between a like reusable design Library component and an application specific component where they end up with like like I've seen storybooks that have like app view mounted in them or chat view mounted in them where it's like you're not going to reuse the chat the chat goes in one place the chat has 15 other things that should be in Storybook in it but you just put that in there because you don't know how to actually run the app locally and I've seen that so much yeah storybook is one of the most like incorrectly used pieces of Technology I've ever seen in my life doesn't mean it's bad it just means it's badly used it shouldn't be in this category this being in this category is encouraging the problematic mindset they're going through their next moment right now as well where they're trying to very slowly migrate off of web back onto the like do the whole it's a huge undertaking and I think again back when snowpack was coming out we were talking about them as can we they were saying can we move from webpack to snowpack like they're at the very least not losing users I don't think but man that's yeah that's a huge migration that they're going through right now pretty successfully so far in project idea for anybody in the audience who's looking for something to build v-test came and absolutely demolished just in terms of interest and is quickly winning a lot of users over I think there's an opportunity to do that with storybook using honestly just using Astro like use Astro to build a minimal Mount any component from anything framework for testing things and like doing local Dev there's a huge opportunity there I think Astro would be the one of the best things to build a storybook killer on top of I think there might be I don't know if they're any good but I think there might be some stuff already coming off Veet in this way I don't know was it histor or like there's a few things not Astro based but Veep based storybook type things I just haven't looked into them much but I know that they are in the works if anyone wants to work on this ping me on our Discord and I will single-handedly help you single-handedly personally that's the word yes huge opportunity there anyways anything else in this section we care about I don't think so cool go through mobile and desktop quick this one is interesting because native apps has such a crazy trajectory of like up down up down up down interesting yeah I paid a lot yeah what is that all yeah okay but generally trending down this is tough because it's a JS framework survey yeah it's kind of tough to see it's just interesting seeing how like a control kind of what's interesting to me with Native is how the relationship between native devs and web or what devs and web devs changes so drastically back and forth like when react native first happened everybody was pissed at web devs for bringing their stuff to native land then there was a period where we started getting a longboard building more Integrations then Swift UI happened it was like oh my God Apple's learning from react that's cool and then Swift UI continued to be broken for the next two years and the Apple fan boys refused to admit it so tension started to rise again and then electron as well had a very notable impact here I just I think that the relationship between people who write JS for a living and people who don't but still write use or like user-facing applications for a living has been tenuous enough that this being all over the place makes sense to me I'd be curious how this all maps to usage maybe that's a kind of like Vibe check but um some of these like I think of ionic as like a lot of up and down on usage as well Expo fairly new yeah I'd be as I know a little less more less than the tooling category um somebody in chat said they actually love flutter and I mentioned that we're talking about Native apps not bad game engines anyways what's the other one famous that was a cool JS framework that did animation yeah you need to adopt the Just like don't say anything about those comments just go into chat write down and then go back to like pretend like nothing even happened no it's way better content to make fun of like flutter comments and and for every one I comment on there's like 50 I ignored I actually on on YouTube I was getting too aggressive in the replies so what I'll do now is I will see a comment that I [ __ ] hate I will type up the reply I'll screenshot it and then ban the original commenter from ever commenting on my stuff again and not reply scorched Earth policy to opinions you know it's not like if you have an opinion that I disagree with that's different from like the there are some very funny [ __ ] posts that are like wow clearly Theo's never written code before if he doesn't think unit tests are necessary and those types of things I just like oh cool I will type up something so I can get this out of my system I will screenshot it so I don't post it and then I will delete you from existence on my channel so I don't have to do this again it's actually surprised there wasn't a do you write unit tests question here just to prove you wrong on that next year we'll get them to add that question all right actually we can check here like what the uh overall numbers were for response on this is there uh can we get the actual data somewhere here you want usage I think uh rankings by okay if you gotta get out of ranking category you're just getting the relative new Sage I go to the data for this no I still just percentages oh well yeah I would be very curious what the actual number of respondents was for this section if anyone can find that um dude I'm gonna have to jump off him a little bit no I would say the opinions and resources are both super interesting I mean resource is just a bunch of awesome stuff to check out but quick mention in libraries I want to make sure we get to Zod being here and climbing super cool to see and also my quote perfectly placed nice thank you my quote ended up under mono repos but it was a plug for Astro that means a ton no one ever asked me I would have given a solid I would I would have given you something oh that's cool to be fair uh it seemed like Sasha had some other chaos organizing this at the end and I kind of kind of got like a last minute ask to sneak something in so they had something to put um I think zod's gonna have a huge ear we are working on some really cool stuff that we're gonna launch in a couple weeks but we've been talking about this a little bit like the expectation of type safety is becoming in table sticks and that is hugely exciting where was that under if you recall oh here it is under usage the typescript to JavaScript balance oh get rid of no answer just to get that oh yeah maybe that's useful I don't know the the middle one I think is a little bit more uh yeah that's that's wild yeah it's just it's I mean especially depending on how that static types like JS proposal goes to kind of backboard typescript into JavaScript I mean this is like yeah this is past the point of like oh wow what a popular tool and like okay this is how this is now the thing people see more than JavaScript yep we have long since overtaken JavaScript I would be curious to see what this would have looked like with coffeescript 10 years ago oh there's a there's a copy script uh chart in there it not for 10 years ago though no no did you hear about it there's there's a new language was it civet or something I can't pronounce it but it's like a coffeescript throwback anyway as you were saying that parasocial mentioned it in chat of course not super surprised anyways looks like it's always been true and I'll just call it out as like I remember the node Community never really comprehended this like npm would build all these features like oh it works great and node and then like webpack would just be sobbing in it I think it was a there's a moment where 95 of npm usage was front end versus actual node back-end servers front of it has always dominated this chart this is way closer than I expected yeah yeah it used to be much more dramatic yeah this is a way this honestly scares me and like something I hate that I haven't used enough to hate publicly properly is Nest JS I just everything I would use nest for I would have moved off of JavaScript for much longer ago and this I see why nest.js exists when I look at this because of the what was it 39 000 respondents almost over half are using JavaScript for backend development how much of that is an XTS developers checking both like they have an API endpoint they ship next to us they check both I think it more yeah there's a muddy in here that I think comes into play on this chart if we look at there's a chart somewhere in here I love that uh primogene comes up in here uh where where did uh [ __ ] Express come up in here because I was pissed oh here it is back in Frameworks is in uh other tools and you see almost the exact same number here for Express users so I believe Express is no longer maintained it isn't like it would be like if jQuery was the top of the front end the UI Frameworks yeah category like that is this might be the most worrying chart of them all yes Express needs to die and it needs to die really hard I've been using fast if I'm making it a point to not even mention Express if I can avoid it specifically for that but yeah there's fewer back-end developers than Express developers according to this that's wild yeah so to the point of is that just next JS people no it it is not um there's some other cool stuff on usage that if we could just quickly touch on because one is I think something yeah so I wanted to complain about Nest being so high up here Nest being double fastify is a huge failure for the JavaScript Community anyways what are we saying in this one I was gonna say um the bottom bottom chart on this speaks to both the strength of the spa as a pattern still going strong like SSR being what half a little more than half um shows how we all take that as table sticks but for a lot of people they don't even care that's just fascinating the other thing here that's interesting to me is more people are using SSG than they think they are because like almost every next user is ssging something so that's how I would describe the rest of this chart is way more people are using all of these than I think they realize and I see that as a strength of Astro Progressive hydration architecture uh though I mean I mean Islands architecture is partial hydration first of all like the yeah like I guess you could maybe call yeah they're not making a dent here you could call like other things like quick partial hydration but not Islands but that's like the one exception of of that yeah I think people have no clue what partial hydration is versus selective hydration versus Progressive hydration so like a partial is the most popular term so anything that like people probably think they're like I mean there's a bit of both people use it more than they know and I think stuff like partial hydration it's like doesn't react 18 have that so yeah like if we if we quizzed our user base I bet this would come back 50 yes 50 know if they were using partial hydration even though that's Astros like Secret Sauce but we don't talk it's not on our home page we don't really talk about it I found that really interesting here I think the top four benefit from direct usage while the bottom are that indirect we were talking about incremental is ISR and isg are things that are talked about in next and I think are one of the most underrated features of next and versa so it's interesting seeing that as low as it is but otherwise I agree yeah yeah no that's interesting actually yeah and I I believe Gatsby cloud and netlify DSG also have very similar types of features to in that category people probably just don't like maybe don't group in their head that those acronyms are semi-interchangeable so like yeah makes sense yeah let's hop into resources and opinions you said are the two that you cared about Fred yeah um opinions more than resources I mean resources we gotta we gotta do resources right we'll go back but yeah it is yeah I gotta jump say I wanted to do this quick javascript's moving in the right direction this is the we talked about at the beginning of that people are like pretty cool with the direction JavaScript is moving in right now yeah the disagree is the smallest ever and we're seeing increase and disagree a slight decrease and agree strongly so it's moving but yeah pretty minimally yeah but we saw this huge bump for 2018 to 2019 mostly into agree I guess it's also a chunk away from agree strongly which sucks but yeah it's actually this actually looks like there's like seeding more doubt slowly but at a very slow rate yeah and for anybody saying that this 18 is actually the whole industry and actually that that's uh neutral so that's only five percent total that disagree that javascript's moving in the right direction that's such a small percentage that like anybody who's saying everyone thinks this they're just being quiet about it yeah so that's where the self-selection you're you're probably not feeling this you're probably not getting to this last question 20 minutes an hour however long it took if you don't like JavaScript that being said yeah there's no way that accounts for a 50 error on this term if people are upset enough they are going through it just to vent about how upset they are so I disagree in that regard like this the strong agree and strong disagree are represented by you care enough to get that far disagree and agree are much more General it I don't know how neutral can be 18 if you cared enough to do this yeah yeah that's a good call out I it's definitely higher than five percent but yeah I I think I would copy that like 10 or 20 Max um disagreeing with the statement out in the real world I again totally made up numbers how about this one interesting what do you think about this see I I think complexity is going up but this is suggesting that oh no no yeah I strongly agree yeah yeah so we are starting to hit that curve this is this reflects the curve we saw earlier in the other chart um much earlier in the Stream I can't remember what we're looking at where we were seeing the curve just just like just now turning the other direction kind of like the Innovation curve yeah this is like this this this Trails The Innovation curve by like six months or a year or whatever but what's Wild to me here is right so 2016 a much more complex perception than today right but like think of what we're dealing with today that wasn't there was this one two three four five six so six years ago seven years ago like there was no there was no Edge run time there was no middleware like SSR was like barely a thing speaks to perception or if it speaks to how good devtools have gotten to paper over that and make you not have to worry about it and like devtools I mean both the next GS of the world and also the first cell like the full picture being taken care for you I think there's two like like if I was to chart this out I would say like complexity is going up but quality of tools that reduce complexity is going up like alongside it really well in any given application has like its own complexity so I'm just gonna Scala draw this because it's easier to explain that way I would say like the there is uh we have like complexity of a JavaScript or of JavaScript over time slowly going up we have the complexity of your own app over time which might go up might go down might go down more might Spike because you have some crazy new feature you need and then you have the complexity of the ability for tools to abstract away complexity which I would argue is like this with its own crazy spikes so depending on if like the tools that you see and use are above or below your own line of complexity that is when you'll feel good versus not good whereas the industry trend is its own separate thing like the the average complexity of apps and tools in the web is something like this is the line of I would call this almost the like browser API complexity I'll just say browser API and put complexity is like the x-axis I'd say we have like next JS is this red line and some randos app it's the orange line and the problem with that chart is that every respondent isn't responding in terms of green versus red they're responding in terms of orange versus red and I know I run into this a lot because of this purple line is remix and I currently live right here your face is covering the top right of this yeah sorry I was also going to mention that no one has complained about the white Excalibur yet that that's like a new record yeah Dave we made it real long oh that's not the hockey for talking about I thought that was shift option D there we go it's not complaining yeah if I post a image in your chat can you open it I promise it's like uh yeah in my twitch chat would be easiest yeah yes that was good I I like the white that's funny I stream with the white for like forever until like maybe three streams ago when someone commits to the to the black one I can't like kind of Miss if anyone knows Lori Voss big data nerdies to run npm um now is that netlify I want to say yes very subjective and shouldn't be taken too seriously but I really like this to illustrate like complexity is just always a treadmill it's just moving Target as time goes on we have to worry about way less things and now we have to worry about new things that come up at the top so the last time I worried about like the power on my machine was yeah you uh I don't even know if it's a millennial concern programming in 1990 but you know today there's now way more stuff in this purple section they're like okay it wasn't even conceived of in 1990. so the tools get better the expectations get bigger and we're just constantly figuring it out yeah here's the chart we have all of these things that like are newer things or points of concern over time and we see how these have shifted it's actually a really interesting chart cool um yeah I got around thank you for having me on of course any last words on the survey or things that we didn't get to that you want us to cover or to cover before you head out um Zod is the future all Hills odd um there's gonna be some cool Aster 2.0 like typesafe apis that I'm excited to tease coming soon but uh that Ryan congrats on the awesome work on Solitaire if you look at the awards quick um it's just V the awards is just a few speed top level the weight yeah and then beat most writers is Astro yeah most commented all right I gotta run love you guys all right we didn't cover resources yet yeah resources yeah that's the last section yeah and I think possibly interesting from your perspective too looking at the way people use content and like who votes for this thing and whatnot yeah yeah again I wish I could see historical datics I suspect that the interest in video is going up and that the age of the average person who's interested in video is going up as well that'd be interesting to see yeah how did Sarah get oh Sarah was mentioned as or Sunday's pick and then wrote the clothes that makes more sense yeah Vlogs magazines uh people still on medium a lot almost half the respondents still checking medium yeah this is interesting another thing I noticed that was interesting if we obviously stack Overflow and mdn doing well here uh udemy is a lot higher than I expected with almost 10K and it's paid I was a little surprised by that the tan stack shout out here nice obviously I made it into video creators which I'm proud of because I didn't send y'all to the survey I never mentioned the survey so I yeah I was pumped to have made it onto this at all next year we'll be plugging this hard and we'll be number one so hey congrats the fireship for the win pretty proud that since I've only really started taking this seriously since April I didn't post I posted two videos before April this year so yeah to be number three in eight months I'm really proud of yeah it's interesting um Ben has gone down on the chart a little bit from historicals um but I mean I don't much to read to it maybe this has just been hit the change in content he's done the last year or so he hasn't done much content last year yeah then then uh Prime skin shows up here too which is nice some people missed him because he was behold below the hole which is interesting because you'll see him and Jack Harrington both here and on and in writings like people didn't know notice which is too bad because I figured you'd get more um on that I thought the writing section was pretty funny obviously the writes was very interesting here another thing that was surprising to me if we look at like Fire Ship 15K 300 I get 5400. top podcast the number one podcast 3400. right look at me chat eye contact say it with me podcasts are dead Say it With Me Now podcasts are dead sorry just had to get that out of my system anyways why are podcasts dead because nobody wants to listen to them nobody sits there and listens to podcasts anymore especially programming content people don't like to sit and listen to programmers they for whatever reason are much more interested in watching programmers can give a lot of theories as to why but the trend is very obvious you guys can all say it's untrue but the numbers are right here yeah podcasts are on the way out not in if I've learned anything from like being deep in the space podcasts are on the way out not in I guys I built tools and sold to podcasters I learned a lot about the space if you are willing to trade to trust me about Dev content you should trust me about Creator stuff 100 times more I know that space better podcasts are dying anyways they they are uh interesting they're kind of like more mature like the thing about the like a stream where you interview people like what you do quite often that would be a replacement for podcasts but a lot of the video content and stuff still seems like pre-prep video like you know and you know like where you've like kind of packaged something up to like show people a certain thing or you know talk about a certain subject podcasts are kind of a different format than that I I know this because like I end up on a lot of podcasts the streams that are good or better but they're rarer um if that makes any sense to the person who said podcasters don't make money so selling to them is a bad metric podcasters not making money is the metric I'm talking about yeah I I will say that I've I've started to notice the shift in content where yes a lot of it is still very well produced planned recorded edited and published stuff more and more of it isn't though I know that Prime's planning on going much more into the impromptu clips from streams Direction like what I do and what I'm doing is clearly working for me to be growing at the rate I'm growing it's yeah the the idea of a podcast as a thing on the podcast app on your phone that you listen to on the go about programming stuff or in general is on the way out in favor of a YouTube conversation or a more impromptu type of video content that you can still listen to if you choose to do it in a lessening fashion instead but there's a reason that these numbers are so much smaller than like how far up in the video person chart do you have to get before you hit this number so 3559 so if we drop that we do the second most popular podcast at 1546. you have to be one two three four five six seven eight nine ten eleven twelve thirteen fourteen the fourteenth biggest YouTuber is slightly smaller than the second biggest podcast there's no argument to be had here no and the podcasts themselves have been trying to shift format I've been seeing this when I because I do them they started recording videos they like started like trying to but they haven't really I haven't seen anyone actually make that transfer completely but that's what that's the trend I'm seeing they're actually recording the podcast and recording video at the same time trying to like do do it but they're still very the the show isn't show enough that you can tell that they're like thinking podcasts how they can get the best audio clips and they kind of don't acknowledge that the the live stream is really a stream but yeah I'm starting to see that shift a little bit Yeah so remember that this was with double the respondents this year versus last year so 1690 number of respondents doubled and for the biggest podcast uh let me just get these next to each other so it's easier to compare between the two it the biggest one slightly under doubled the second biggest one tripled so it's growing this one did well how to change log do changelog did not do great so yeah growth rates are about even against the uh like number of respondents and if you know if you are a Creator or have managed creators for any amount of time there is one Eternal truth stagnation is death if you are flatlining in the Creator space you are declining your numbers just aren't reflecting it yet if you're not growing you're going down and what we're seeing here is not growth it's flatlining which means it is dying where the viewer video category is exponentially increasing year over year right now podcasts are not a direction to go in for expanding your like reach with content it's just they're dying streams are the new podcasts is one of the best takes I've seen in chat so far yeah I mean I'm I'm I I that's the content I like that's the content I make I do a lot of interviews too I think I think this is really interesting to see um how this goes into the next year I've noticed uh yeah I mean the streaming thing has been booming the last year I mean you your sign of how that transformation has been happening so yeah next year might not even be even a consideration of a conversation would be like obviously yeah I think that the value of podcasts were the Casual nature and the ability for conversations to happen and everything else about a podcast is a net negative compared to other methods of content production and as such If Video content can bridge the gap of more impromptu type stuff and more conversational type stuff it quickly eats at the space that podcasts have and we have seen that happening so they said uh react podcast died in 2020. so this podcast has been over since 2020 and it's still here which means a lot of people are voting on things that they have listened to at some point that they don't listen to anymore they recognize the name so they click it so I would say these are even worse numbers than what we were seeing in video or that then what we are seeing here right of course yeah because you you got to fill out every question right like yeah all right somebody has to have an email and like yes I have an email but I don't share it unless I have like a reason to fair enough yeah so I guess there's just no there's one more you didn't talk about it I mean I'm here so we muzzle oh yeah I mean this is I was talking about the write-ins working in people's favor I mean these are low numbers but you know it's uh it did but it didn't I still got more write-ins than Prime even though I was over the fold yeah yeah I mean this this topic is completely right in though right like they're like every entry here had to be written in there was no one to choose so which is why you being three here is absolutely nuts and huge congrats on that yeah I was not expecting it um but it's it's definitely cool and it makes the the top four have this like framework author story which is I don't know interesting I love Prime being live forever because they definitely saved the image and put it here so that's going to be in this permanently foreign but yeah I mean the the one that everyone talks about on this one obviously we can't not talk about the lack of representation on this but I mean it's it look who's pulled look what you see the Sarah drazner I believe is deep in here for seven number 17 yeah yeah right yeah not great numbers in that regard I yeah I hope to see this start to change over time and for people like Sarah to get more attention get more like you know there's a lot of work to be done here something I've been thinking a lot about I will Reserve comments till I have thought more about it and things that we can do but for now it's it's a problem and it's a big enough problem that everyone is constantly getting blamed for it because nobody has found a real solution to it yeah no it's yeah yeah it's it's so hard there's very little to to actually be able to add to that any other sections that we didn't get to that we should uh no I I think that was it a decision conclusion which Sarah actually wrote her wrote herself hey this one annoyed me because like it feels like there's a few things that got stuffed in here that otherwise were not mentioned because they weren't like on the survey that it feels like are only here because Sarah was the one writing this like ionic and flutter did not appear in this right right yeah so she did she she gave the the framework Overview at the top which you'd expect from her yeah ionic and flutter chakra and hopscotch like it's cool to like do representation here but like all that flutter is representing is googlers without opinions yeah and this year the big story was actually SSR render framework so my perspective meta Frameworks which actually didn't get touched on this other than the fact like yeah I mean but to be fair actually the winner overall is Veet again I think this is the second year in the in a row the Vita's basically been the the overall like champion of the frame of the JS uh survey so um yeah I mean we didn't talk about it too much I think we jumped right over it but yeah yeah beats like insane it's like I don't know what it was it's like 96 or 91 everything yeah everyone who uses it likes it and everybody who hasn't hasn't had the reason to use it yet pretty much which is why I mean I mean I'm not gonna make any snarky remarks about mentioning create react op overview on certain docs but you know I yeah right yeah yeah I feel you there one other call that somebody made in chat that I would be doing a very big disservice to not call out in video having me do in here is so cool as a spanish-only Creator having someone who isn't speaking English popping up on these lists and doing as well as they are like number eight in write-ins here too is massive and this is the type of representation we need to talk about more because it's happening now me do is like solely pioneering like Spanish-speaking Dev content and him and gonsi at versel like are the only two people really pushing it and they have made it grow themselves so fast it's insane to see a whole scene starting because of these two in their grind yeah yeah one of my biggest regrets as a Creator was that meedu hit me up when I was in the middle of like the YC fundraising so I was utter chaos I was still nobody on Twitch and YouTube and he still hit me up asking if I was down to do some content for me to conf and I had to very begrudgingly say no because I'm too busy and stressed at the moment and it's one of like the things I kick myself for constantly because he [ __ ] killed it and even just to like be able to say what some part would have been so cool regardless his grind has been nuts and I have the highest respect for me to Lee Rob just shared Brazilian Hacker News in chat which is really cool to see fantastic like the Brazilian Community has been incredible as well obviously like Brazil is very overrepresented in my audience too love y'all super cool stuff I think that's all we have for this fantastic opportunity to go through all of the last year of JavaScript I think the survey was super cool any other last words on this Ryan no I mean I I know I can speak for myself and Fred we both had really great years uh for this past year so seeing that uh you know in the survey captured kind of seeing that and looking forward to the future of like you can tell we were both very excited about it um and excited to talk about this in you know looking forward to where things are going absolutely I couldn't agree more and I am so excited to see how this next year goes I think that's all I got good shout as always gonna go hang out with chat for a bit thanks for stopping by man appreciate it a ton yeah catch you later peace how was that y'all I think that was super fun




## These New Components Blew My Mind - 20231227
Shad CN uui has been taking over the web dev industry and with this new release it's looking like it's going to get even further I am so hyped with all the work shad and crew have been putting into this project and I am really hyped about what they've just added I'm already a pretty big user and if you want to hear more about why I'm so hyped on Shad let me know in the comments and I'll be sure to make that video soon but for now I just want to talk about what's changing because there's some really cool stuff in this release without further Ado let's take a look the latest Shaden release the main exciting thing in this release since they're a component library is the new components and there's some really cool elaborate stuff here first we have a carousel yes finally a carousel as part of Shad UI this is really exciting stuff to finally have and as per always this isn't a library you install and depend on a bunch of dependencies of this is source code that you can copy and it's really nice they give you all of the source code and the react stuff you need in order to build this correctly and that when you add it to your app it works as you expect it's built on top of the embla carousel which is a lightweight Carousel library with fluid motion and great swipe Precision that's dope cuz that means it will work well on mobile too and again like you could go build this yourself and I'm sure a lot of people will and many of them probably should but there are really good standardized solutions for so many problems from all the weird accessibility stuff radx does to all the weird touch behaviors that emble Carousel probably does having Shad standardized all of these with reusable components that live in your codebase not this Library gives you both the benefits of these standards and the flexibility of having your own components they also added a drawer the drawer is super compelling as well making a good drawer component that slides up at the bottom that is the right behaviors on mobile where you can slide it down when it's done and it feels good with these big cancel and submit buttons all handling like page layout sizing and properly is obnoxious look at how smooth that is that's dope good stuff very exciting they also have pagination which crazy enough they didn't have before previously you would have to Define these things yourself I know I've had to build a lot of pagination components in my time and it's really nice to see someone build a generic that I don't have to worry about anymore kind of funny that when I clicked that it just brought me to top of the page but really nice that they've built proper pagination all necessary behaviors as well as letting you bring in your own link components when you use it really really cool stuff dope to see we also have a resizable and I have feelings because doing rizab ility properly and react is a thing I have a lot of experience with if you haven't already watched my video about the coolest project I ever built the vast majority of that project was making good resizable behaviors with drag and drop on top of it inside of react I'll quickly show you this is mod view this is one of the most absurd drag and drop experiences I know of in modern web this whole UI is customizable I can hide the sidebar I can move things different places resize them grab things from the sidebar move things to the sidebar drag them around the sidebar and getting all of these behaviors correct was incredibly difficult but as a result we built an awesome user experience that as far as I'm concerned hasn't been taught by any moderation tools to date we built this because moderators have a lot of needs and we needed to solve those as best we could the library we build a lot of this with react Mosaic I had to fork and build a ton of stuff on top of to make this work at all and now is just a component that's built into Shad UI that does most of this work for you and again the code is there for you to grab as you need it this default UI resizable bit is in your own code base you have the ability to use it however you want change it however you need and build something really really cool and it's all built on top of react resizable panels by Brian vau who is an absolute Legend mostly known for building the react Dev tools Chrome extension now he's at replay helping build really deep developer tools for react wonderful Dude incredibly talented engineer he built one of the best ways to do resizable panels and now there's an abstraction as part of Shad UI super dope and now we have sonor I don't quite know what sonor is but what I do know is it's really good toast notifications so if I click this we get this really fancy nice slow popup of the toast with good behaviors for hiding it and getting rid of it you even see this button has an onclick for toast event has been created description action label onclick all of those things really good stuff a lot of these behaviors that are hard to get right especially once you're dealing with mobile have been solved oh open multiple oh okay I see why you said to do that do you see how good that looks oh God yeah that's really good I'm sorry I did not expect that to be that good but again that this is the benefit of shad youi and the whole Shad CM package is all of these things are done well Tastefully and corre irly they don't have much personality that's the big thing you're missing here if you want a website that stands out this isn't the way to do that but this is all of the pieces you need to make something great and I you have no idea how hard it is to build these things correctly unless you've done it having this all as part of something you can just npm install is incredible also of note you just watched it in a 30 FPS video it looks really good on this 120 FPS screen enough about the components cuz they also did some pretty big changes to the CLI I think the CLI was an incredible addition to Shad CN because previously you would copy paste the component into your codebase yourself once v0 is introduced which if you're not already familiar I have a whole video about it it's vel's AI generation for components this need to have a good way for you to have all the necessary files from Shad CN UI when you make something so like if I click on an example here you'll see in the code a lot of the stuff here is coming from @/ component UI these are all Shad UI things now that there's a CLI and that can be called and included as part of the v0 command they're able to generate any of the missing pieces that you might not have in your code base yet but again these are in your code base these aren't packages being imported it's a CLI running to create the files necessary in your code base so you still own it and I think it's really cool they made that a CLI so now you can install and add specific components that you're missing without having to copy paste a bunch of different code it also allows for these components have different levels of complexity different levels of importing behaviors and all done properly with just running a command the CLI was not the best experience when I tried it it made some assumptions about where things were that were incorrect I think it can do that better with inference but at the time it was still revolutionary and I'm really excited to see how it iterates so let's see what they've added you can now configure a custom Tailwind prefix and the CLI will automatically prefix your utility classes that's really nice so if you only want Tailwind for these things or if you want to integrate it with something else like docusaurus or nextra it's much easier to do that if you can automatically apply a prefix to all of the things that you need the CI can now also detect tailin config TS which is nice cuz a lot of these things miss the fact that your tailin file might be in typescript they fix that and they also add the Tex version of the config good stuff this is a huge update and I am genuinely really hyped I'll be using a lot of these components for a lot of different things and unlike other things when they update we don't have to go and refactor a bunch of stuff or install this new package and deal with a bunch of breaking things the change is there are now additional components you can use and that's really cool because Shad CN UI isn't your traditional Library it's a pile of components to help you get started and build better applications faster you want to hear more about why I think Shad CN UI is so cool and different let me know in the comments I'll do a whole dedicated video about it soon but for now want you to see these updates because I am really hyped thank you guys as always if you want to hear me talk about CSS Mor I'll pin that video in the corner here good to see you as always I'll see you in the next one peace NS




## These Problems Made Me A Great Dev - 20221201
I am so thankful that this is not the real Challenge and that I'm practicing today [Music] do you know anything about me you should know I'm not a big fan of elite code I have a whole video complaining about interviews like I have a bunch of videos complaining about interviews and how I think they should be done differently that said getting okay at leak code has definitely been a good thing and I'm really thankful I did it but I didn't do it the traditional way I did it because of a dumb programming challenge that is Christmas themed that happens once a year that I'm not going to convince you to join me in because I love Advent of code what is advent of code it's an advent calendar where a new problem comes out every day from December 1st to the 25th at midnight eastern time which is 9 p.m my time really nice competitive Advantage because the way the scoring works is from the moment the problem comes out the closer to that moment you have solved the problem the better your score is your score is how many people you beat to solving the problem effectively so it's not about whose code is the fastest it's not about whose programming language is the best or who writes the best looking code it's how quickly can you go from a text prompt to an answer and your solution isn't the code it's the number the string or whatever the output is of the program that they're asking for there's one additional piece that makes it really interesting though and that's that every problem is two parts now part one has a pretty clear here's the problem here's the solution here's what we're asking you for with some examples but then part two take some dimension of that problem and turns it up to 11. and depending on how you architected your solution for part one part two will be a walk in the park or a full rewrite from scratch making you wish you didn't take on these challenges I like this much more than traditional lead code because it's more realistic to how problems work in the real world where I don't necessarily know the exact type of architecture that we need because we don't know all the features we're building just yet on a product and if I build my code in a way that assumes this is the exact thing we're doing and then stuff changes well how good is my algorithm now if I can't adjust it to change the sort order or make this new feature easier to build and the beauty of something like Advent of code is it encourages you both to move fast and move in a way where the code you write is flexible reusable and changeable so let's do one let's take a look at an old year that I haven't done yet and see how I solve these problems did not do 2015. let's do 2015 then so we see here oh God the title is not quite lisp that's scary Santa is hoping for a white Christmas but his weather machine's snow function is powered by stars and he's fresh out to save Christmas he needs you to collect 50 stars by December 25th collecting stars or collect Stars by helping Santa solve puzzles this is like the intro to the first day every time you have to there's some reason you're helping collect stars and you get two stars per day one for part one one for part two so here's the easy puzzle to warm us up since we're going to deliver presents in a large apartment building he can't find the right uh it got a little confused uh ground floor four four zero opening parentheses means he should go up a floor and closing means he should go down so both of these are floor zero this would be floor three because there's three of these and here you can see uh there are still there are three more of the left bracket than there are the right bracket so the easy way to solve this one would be to take in the brackets count the number of ball both brackets and then subtract left from right and that's the floor you're on so let's do it here's the input for my unique puzzle all people get their own unique inputs and you copy this throw it into your text editor and get to work and we'll do a DOT TS and I will put input dot text paste just want to find an example of how I did this before this looks right oh yeah I also do these export costs at the top so it thinks it's a module and it shuts up so now we have uh input let's const it's not files it's brackets equals input dot split and now we have all the brackets broken up like this let's do the stupid count const left equals cool const right uh console.log answer floor left minus right and as you guys can see uh the Advent or the co-pilot is going to make Advent of code very interesting this year looks like the answer here is floor 74 copy paste cool now let's see what part two is uh given the same instructions find the position of the first character that causes him to enter the basement and this is where they get tricky since I just did this in a way where it counts characters I don't have a solution to that problem so we have to go through until there is a right but no left bracket which is an entirely different problem than the way I solved it here so this is the solution I thought of originally which was like a stack reduce where we break until we have just the right bracket and yeah let's do it that way now cool so one eternity later I am so thankful that this is not the real real Challenge and that I'm practicing today yeah I'm being dumb but yeah break when you find it and ignore yeah honestly it's probably the best call break cool 17.95 might be off by one but there's an easy way to check that's cool yeah I hate the conditions I could even just wild through this now that I have a break and now the solution's really fast too cool yes I'll be doing this in Rust tomorrow I'm not this specific problem there'll be a new problem for me cool co-pilot kind of screwed me but my condition was the main problem so you see here part one looks very different from part two which is pretty common in Advent of code if you are doing a problem in the most obvious way if you think through a little bit and I honestly went seeing this one almost did a stack instead of doing a console or instead of doing the counting of both bracket types then this one would have been a lot easier to do the second part for but uh yeah this is the experience that I have when I try to do these live which answers the other question hey Theo why don't you stream Advent of code because it drives me mad I do not want to do these live they do make me better at writing code under pressure and they do help me think in algorithms better and right Solutions with more confidence going through Advent of code has been one of the best things I have done for my own development and if you're not already taking part get on it because in about seven hours Advent of code starts so by the time this video is on my YouTube it is already started I'll have a link in the description if you're a sub in my Discord or twitch whatever so that you're subscribed to our content you'll actually have access to a custom leaderboard we made I've already shared the message for it in the sub only Channel as well as the tier 3 channel so if you haven't joined the Theo leaderboard yet get on that because there's only 200 slots and I'm expecting them to fill very fast so yeah I'm hyped you should be too I highly recommend taking the opportunity to do challenges like these even if just to be part of the community experience every year there is this one opportunity to have hundreds upon hundreds of talented developers solving the same problem as you in tons of different programming languages someone will be solving it in Rust somebody will be solving it in typescript somebody will be solving it Excel if you want to level yourself up and see how other people solve a problem there's no better way than Advent of code so seriously give these challenges a shot that helped me level up a ton and they should help you too thank you for taking the time should be getting a recommendation for another video around there if YouTube thinks it's good it probably is so give that one a watch subscribe if you haven't only half of you are which is absurd I think that we've watched enough of my videos now to hit that sub button please do and I'm going to break the fourth wall for a second because I see you on YouTube not hitting the like button so please likes are free hit that button it helps us out a ton thank you all see you in a minute




## These benchmarks look terrible for React... - 20241030
G that doesn't look good if you're anything like me you see this chart and you immediately start regretting your choice in picking things like react but also if you're anything like me or you hang out a bunch you might get suspicious pretty fast because spelt should not be scoring that low on any performance showdown of any form this chart was made by a very talented engineer Mato who is one of the core creators of fastify as well as a core contributor to node so he knows JavaScript performance well this Benchmark was meant to Showcase how fast these different solutions can generate HTML pages that get sent to a user thankfully it was almost entirely wrong the details of why this happened are fascinating and I'm actually quite excited to go through them all with you but before we can do that we have to first hear from our sponsor this video is mostly about JS Frameworks but there's a lot of other things you might be writing your serers side code in if you're a PHP person you might be disappointed that the quality of the tools for deployment aren't as good as what we have in the JS world that's not the case anymore sao's got it figure it out I can figure it out even and I'm not good at this stuff getting a PHP app deployed was literally one click and we have all the niceties we'd expect from Modern stuff we have Cloud flare immediately baked in for you with DOs protection enabled as well as the ability to turn on CDN and Edge caching if that's something that you're interested in in deploying was so easy this is an example app I literally one click deployed it and it was up in minutes if you want to deploy your own thing you go to Applications you click the little ad app button that my face is covering you link a GitHub repo and you're done it's actually that that easy they're not some random company either they're backed and built by kinsta who's been around in the WordPress hosting world for a long time now they know their stuff this is just a way to deploy everything else basically anything that you can deploy in a Docker image Savala has you covered for including databases too by the way if you sign up right now they give you a free $50 credit worth a look if I say so myself thank you Savala for sponsoring today's episode check them out at sava.com cool so what happened here the first thing we need to pay attention to is this SSR call out this is how fast these different solutions are generating HTML pages that the user gets all of these behave very differently though because solid view spelt and react I'll have to also send JavaScript that can bind to the HTML which means a lot of things it means the HTML being sent is different it means that there's JavaScript that has to be pulled in and do specific things there's a lot of details there but the more important parts are the things that were just wrong with The Benchmark when this originally happened I called them out and we're going to go through these one at a time the first is Rich Harris who quoted it with unfortunately this is wrong the felt implementation is doing a lot more work than the others it's not an Apples to Apples comparison I fixed it and also add its felt five to the mix for good measure turns out we're actually faster than fastify I want to find the poll request because it was actually quite funny Alliance f impation with all the others it's a oneline change he swapped from the tiles which is what they were like rendering a bunch of from creating a new array for every entity to just pushing them and that was the only change necessary to go from near the bottom to near the top his example was copying arrays for literally no reason and he didn't write the example it was just the example representing his framework and it was wrong and when he audited it he found this obvious failure and fixed it turns out a lot of the code was being written by AI as we'll get to momentarily that was the mistake Rich caught Ryan caught some things that I wouldn't quite call mistakes but are still notable I looked at the Benchmark and I found inconsistencies in solid as well we were the only ones doing a bunch of extra style bindings so I removed them but fasty HX simple renders aren't equivalent since they don't need to account for hydration so I turned it off again hydration means that the JavaScript on the client can figure out which element is which but if you don't have that you can generate less HTML with less information and do it much faster so when he turned off the hydration he was able to get numbers that were very very close to what they were seeing with Fast Five so fast was getting like 893 Min and a 982 average and without hydration he was getting a 1305 Min and a 1506 average so again despite being a client side framework he was able to render the correct HTML page faster than fast if I could pretty massive Gap there too it's almost a 2X difference nuts but then we get to everyone's favorite react what went wrong with the react version they were running it in Dev mode so another on line change start node environment equals production node server.js and that immediately resulted in a massive performance win it's a very common blunder so Dan is always on the lookout to see if that is happening I replied accordingly and that's why I wrote my reply breaking down all the mistakes and also calling out these benchmarks were being written by llms Pro tip if you're writing benchmarks for technologies that are written by really smart people that are also quite accessible publicly and the scores don't look good hit them up to make sure you did things right especially when it's things like spelt and solid that should be really fast and you didn't put react in prod mode like catchable mistakes thankfully Mato and the team took this seriously deleted the post deleted the Tweet about it and then followed up later on with what they consider the actual numbers and we see here things are a hell of a lot closer let's break down this in detail first Matteo cites me which is awesome I appreciate that a ton I put quite a bit of work into making sure I got all of the details of all of the mistakes that I knew of at least I didn't dig into the view one because I didn't see anybody talking about it but I covered all the others he also thanked everyone who gave advice and helped throughout this really cool that he did that and also Joie added a preact version too for a comparison love that as well so let's take a look at the updated results we begin with the outlier fast if HTML fastify plugin wrapping G HTML delivering 1,88 requests per second it was added as a baseline it doesn't really compare well with all the others because it's just a wrapper for a simple HTML templating library with none of the features the other libraries have specifically the ability to bind the JavaScript that is being written so that it can do things after the page loads there is no concept of after the page loads with an HTML template generator that concept comes for something like HTM X or a client side framework due to its simple nature we expected it to be the better performing library and we wanted to see just how far behind the other fully featured libraries would be next we have view delivering 1,28 requests per second view is probably the best deal if you want great SSR performance and want a truly comprehensive Library ecosystem then we have spell 5 which was still a pre-release which is delivering 968 per second solo is at 907 react's younger brother preact is at 717 then react 19's release candidate was last with 572 requests per second as mentioned before the fastify HTML test was added as a Baseline and to demonstrate what could be gained in performance by doing away with fully fudged front end Frameworks and sticking to minimal templating good old HTM X mindset well let's read the actual post that's cool it's I know it's silly but like having platform which is a platform and crew crew that I've looked up to for like five plus years now citing me as the first name other than Mato on the page that that's really cool that means a lot I I know like I have the big numbers and people hitting me up and whatever but these small things make me feel like I'm having actual impact being listed next to these Legends is surreal it's so cool and I love Mato like to be clear mistakes were made these things happen he is working hard understood why this was going the way it was and took the time to do it right and I will always appreciate someone for that serers side rendering is an often overlooked aspect when building High performing web apps in node during my time Consulting many engagements centered around debugging node performance issues in these scenarios the culprit is almost always SSR SSR is a CPU bound activity that can easily be the main cause of blocking node event loop it's crucial to consider this when choosing your front end stack we set out to find out the state of SSR performance across today's most popular libraries so those that can be cleanly integrated with fastify for this we need to generate a non-trivial sample document that includes a large number of elements to have a very large page for the test and consequently have more running time to capture each Library performance we asked an llm to write some code to draw a spiral in a container using divs as 10x10 pixel tiles here is that code subsequently we asked it to create versions using all the libraries that we intended to test the implementations adapted to use each library's rendering engine rather than relying on the Dom method instead this is what our sample looks like with all 2398 divs that's trippy the fastify V integration makes for a perfect test bed for investig ating where Sr performance is at for various Frameworks we looked at react view solids felt and preact we also looked at fast HTML as a he said a like reference point we chose not to consider tools like next Astro and quick as well as other fully Fred Frameworks as they don't offer an isolated rendering method again they're just trying to test this using fastify V binding they also use boiler plate as follows V ready s lesson all simple they were all running against the production build after running V build the only exceptions are fast HTML and the ejs tests because those don't actually require V let's check out the repo I want to see if I can catch any potential holes in the react example cuz that was slower than I would have expected client base okay I can admit that's pretty simple there is no like subcomponent rendering or complexity there it's just creating all of these elements creating all of the the tile states and then using that to render this nice and simple I can appreciate that so they ma sure all the examples have the same characteristics no client side reactivity features used at all they all handle style bindings using template literals unless that was inappropriate for the framework like for react and solid so again if we look at the code here it's just going to use class name tile because if it had to render the inline styles for all the details for all of them that would just be a lot more work it has to do for no reason so the only Dynamic part being this with the style tag that makes more sense X and Y values are created with two fixed two and there's no style tag other than the ones in the document shell also love that like remember this is mato he's doing very well he's deep in the JavaScript World He's Still rocking a 2020 MacBook Air with 8 gigs of RAM because it doesn't matter anyways fastify HTML we began with the outlier these are the speeds they saw average of 1,88 requests per second I'm assuming yeah, 88 requests per second ffy HTML was added to the template as a baseline it doesn't really compare well with all the others because it's just a rapper for an HTML thing the bler plate used can be seen below notice the create HTML function mimicking fastify V which is used to register a layout function that renders the document shell all nice and simple view was surprisingly fast like 128 for a client side framework being run on the server that's nuts they use render to string which is really fast spelt hit 968 requests per second which is still really really nuts they have their own templating language just like V does but through that they were able to make really really good performance solid is right behind and to be clear solid's performance Focus isn't server side rendering it's client side experience but they still managed to get some of the better server side rendering performance but if you want to see solid at its best look at a benchmark that shows client side behaviors and updates solid will almost always win it is really really fast preact again minimal version of react also performed really well for this and again it's the render to string which is the key part react has a render to string but it's rough it's not as fast as other Solutions CU they're focus more on rendering to pipes because then it can stream things down a lot of react's focus has been how do we send things down chunk by chunk when they're ready rather than blocking everything on the whole page going down at once also of note I didn't even know this but uh render to string not only is it not recommended it's actually deprecated now and there's a whole separate proposal render to markup it's a render helper for rendering HTML that's not intended to be hydrated it's intended to support a subset of HML that can be used as embedding and not served as HTML documents for HTP for example as emails or an RSS or atom feeds or other distributions react email is going to have a really good time with this one that's super cool I'd be super curious how The Benchmark performs if we swapped to this instead but I'm not going to put the time into that be good to support the recommended approach since rendered string is Legacy able coners into readable instead of directly piping the node stream that react provides or use directly for perfect inste trying to wrap it in a readable FY offers a reply. send stream Handler wraps the internal we add a Transformer pass through in between we' add additional overhead which we do not want to add need to experiment a bit on how to do this without slowdown very interesting as we see here the complexity of these things is very real and if we're just performing how quickly these generate HTML it's not super useful but in the end when the difference is worse 50% whatever and fastify still flies I actually got into drama earlier that I didn't make a video on despite it being incredibly tempting where I was showcasing the performance differences in something like rails by default versus something like JS with fastify this was bun with fastify versus rails by default rails was seeing 5300 requests per second and Bun was seeing almost 40,000 we like oh yeah that's buun here's the node version on fastify 36,000 basically margin for error like the difference between those two was nothing so as fast as bun is yeah fast if I flies that all said react hitting 50% of the speed of a tool that is literally just generating static HTML when react is a giant frame we capable of so many things that is crazy but it's also crazy that Vue with similar capabilities is able to be so close to fastify where it's not measured by like fractional differences it's measured by percentage differences this is really interesting my guess would have been that react would perform worse than it is but I also would have guessed most of these would have performed worse too so what I've learned from this is that serers side rendering performance doesn't really matter that much when it comes to how fast your client side Frameworks can just spit out the right HTML they've all gotten to the point where they're pretty damn good if we compare that to where we thought we were it's not that bad in the end let me know what you think though should we give up on server side rendering entirely or should we go rewrite all our servers and go and rust let me know how you're feeling until next time peace nerds




## They DIDN'T Mention This___ React's ANNOYING new problem... - 20221030
there's something very important about next 13 that versel didn't tell you it's a annoying gotcha for us typescript fans that I think is important to know hopefully it'll be fixed soon but for now here's the problem here's how we're gonna solve it one of the coolest things that came with next 13 in the recent react RFC is the ability to have an async component that you can await things for directly you can call any promise await it and then have the data that comes from that to render on the first pass of your application so in this case I'm fetching from a Json placeholder API that gives me some mock data in this case a mock blog post that has a title and a body and I have an async component that gets this data and Returns the stuff pretty standard if I go to the page you can see I have pretty ugly formatting it's straight from the default for the new next or create next app have the title and I have the blog post but what happens if I make a component for this instead see I have here a blog post component in the components folder that's nearly identical actually it is identical but let's say I want to mount this here instead I'm just going to replace this guy kill all this code I mean the Styles anymore and I'm going to import this but wait there's a type error why is there a type error this doesn't need any props blog post cannot be used as a jsx element it returns promise element not element and jsx is type definitions in typescript do not allow you to return a promise within them so because this component is async we have to tell typescript hey don't worry about it we're good we got it because typescript doesn't believe that an async component can be mounted inside of a jsx blob thankfully our good friend Malta is way ahead of us and has made an annoying important helper here that you have wrap around your components so what we'll do here is drop this type and now if I look at this example const blog post equals and this has to be async what we can do now is wrap that with this async component helper turn default or export default blog post and now the type error goes away and everything still works as expected this is a nasty hack because it is straight up overriding the type it is lying the typescript saying pretend this isn't actually unsafe pretend this isn't actually an async thing just ignore ignore the promise it literally just takes R which is the type of what the promise returns and it returns that instead nasty but necessary hack hope that this doesn't stop you from playing with the new async uh component stuff or server side components in general this is a small growing pain and typescript should have these things fixed ASAP but for now make sure you know this as you start playing with these things otherwise you're going to be accidentally writing code that is unsafe for no good reason hope this was helpful really excited about this release make sure you keep checking the channel for more sub if you haven't and you should be getting recommended a new video around here that is a lot more on topic and stuff that for some reason YouTube thinks you'll like which means you'll probably like it so give that a shot also huge shout out Mir he's been on the grind he's doing exams in three days yet he's still churning out these edits so shout out to him for that we have to tell typescript hey don't worry about it we're good we got it




## They FINALLY Fixed Prisma (By Deleting GraphQL) - 20230421
my favorite database tool is finally fixed the Prisma team has been working hard and a few days ago they hit me up to let me know they made cold starts three times faster with Prisma but I have some good news they were wrong they're actually nine times faster I filmed a whole video about the three times speed Improvement just to learn that it was much better so I'm re-recording it now because I think it's important to know how big of a win this is huge shout out to the Prisma team for the work they've done on everything we're about to go over because man this is a lot better make sure you watch the end so you can see the impact these changes had on real code bases that I'm shipping this article was primarily written by Saban but he got a lot of help both from versel and other people at Prisma and the results really interesting read not just about prismus cold star problems but about cold starts as a whole and how we should think about them this is the before and the after as you can see here there's both a lot more steps and those steps are a lot longer the biggest offenders here are this giant dmff chunk which is some weird graphql things going on behind the scenes as well as the amount of time spent actually starting the connection it's rough thankfully they fixed almost all of this I'm incredibly thankful for how detailed these changes are they even mention here that the single biggest impact they found for reducing cold starts was actually subscribing to my YouTube channel crazy because less than half of the viewers of the channel are subscribed come on guys hit that button subscriptions are free and they help the channel out a ton a little brief history lesson on Prisma it was originally a graphql layer for your database so it would generate graphql for you I think it was called graphcool they learned their lesson and moved off that but they never fully moved the internals of Prisma have been plagued with graphql for a while now I'm not saying this because graphql is bad saying this is graphql is bad at same machine intercommunication between two processes which is what they were using it for this was a terrible use case for graphql thankfully they recognized that they rewrote the protocol in Json wasn't even too big a lift like obviously it was not easy but they linked the pr somewhere in here where they made the change and the resulting performance hit or difference is hilarious just from that change we saw a gigantic reduction like absurd and obviously they made lots more small changes throughout and you can scroll through the article to hear all about them in particular their schema building making sure you place your functions close enough to your database a bunch of other random stuff they even touch on TLS here which is interesting because TLS handshakes are necessary when you connect to something over https so if you opt to use HTTP instead you can save some time not having to request the server confirm the handshake is actually then and then fulfill the request so as weird as it might seem disabling SSL can actually speed things up a little bit further it's not massive but it is worth considering for many projects the one thing that they don't do in here is make stuff Edge ready accelerate will allow you to connect to a Prisma instance that you're not actually running which should theoretically make Prisma way way faster to spin up and also Edge ready because you don't need that native database layer anymore but what does this actually look like what are the numbers that I'm seeing I have a video a while back my database performance video if you want to see how bad things were check that video out if you want to see how much better they are now I can show you real quick last night I moved chirp over to the new patterns and the Json protocol I don't know for a fact this is going to be a cold start but I'm pretty sure it will be because I don't think anyone's checking out the site right now let's see what the performance looks like that is so much better I'm not going to sit here and pretend this is perfect this request still took 633 milliseconds but God this is so much better the whole page loaded in under 2.7 seconds now it was getting over 8 seconds at times that is massive exponential when and I am so pumped to see the difference in performance obviously when it's warmed up already it's going to be super fast and we're going to get the whole page loaded in under 700 milliseconds but to see the worst case be three seconds instead of 12. that's insane it is such a huge win and I don't want to understate it huge shout out to the Prisma team for taking this problem seriously and really diving in to address it if you want to hear more about the database problems that I'm inventing about that but to these changes I'll pen a video here all about them so you can check that out really appreciate y'all thank you guys as always peace nights




## They Fixed Email__ OMG - 20230617
have you ever had to send an email via code before if so I'm sorry it's always been pretty painful to be frank I am willing to pay people to do our email templates for us it's one of the few things I'll still reach to like Fiverr or Contracting stuff for because formatting an email is one of the hardest things I've ever had to do it's kind of HTML but isn't it kind of supports tables but doesn't and it certainly doesn't support any new methods of formatting things correctly with CSS and HTML and if you want those emails to look good in things like Outlook good luck seriously though I am horrified by the current state of email and it is hilariously difficult to just send a decent looking email from your web application until now the recent team has been hard at work on making email way more accessible for all web developers but react devs in particular the main project that they built was react email or which is an open source library to use react to Define an email similar to how react native lets you render native applications through react or react 3 fiber lets you render 3D stuff on the canvas react email lets you use react to generate in email HTML instead of whatever chaos we used to deal with it's so much nicer to work with that they realize that hosting was the remaining problem and similar to how versell realized nexjs was too hard to host they realized that sending emails was too hard to do with existing services and as well as react email works on things like send grid they wanted to do something better it's only fair that I disclose that I am an investor in resend I am really excited by what Xeno and team is doing they did not pay me to make this video I am not sponsored I'm just sharing this because I'm genuinely excited which is the same reason that I invested in them so let's take a look at what resend is building if you haven't already seen react email it's dope I'm sure there's an example yep here const email return button href is example style is whatever click me they have docs for all the different elements that they support if you're used to mostly using react for the web it's weird not having access to div paragraph image tags and all the things you normally are used to but if you've ever done react native this should look very familiar importing all these types of things because react email Isn't using react Dom react email is an alternative to react Dom that lets you render email ready elements so as long as you use the elements they provide not only will it work they'll tell you which email clients are properly supported do they have email templates uh where would one find said email templates explore components assuming examples that's cool so here's an example of like the join my project on versel email and if that goes away we can look at the source and see looks a lot like react code HTML had preview text Tailwind which lets you your Tailwind is a element that you can wrap around your content and then you have access to Tailwind classes and it will do the right thing you have sections think of them kind of like divs but they'll split up properly inside of your different email clients heading lets you put a nice fancy title on the top the main benefit of using these is kind of like using H1 and other tags is it's really accessible so if somebody's using the screen reader this will work just fine but you also have your Tailwind syntax if you want it to format and look really good with what is output really dope that they have all of these elements and things you might need provided and that you're creating a component that you pass values to just like any other component react and now it's that easy to send an email you pass resend the versel invite user email component with the props that you want and that's now an email you can send so convenient and you can even see the HTML that it outputs for this email and see how miserably formatted it is because if you've ever written one of these before yeah it's all done with weird table and then they even have a plain text output too for the email clients that don't support the HTML beautiful so pumped that they have this level of detail here's a recreation of the twitch password reset email this one I noticed a little bug here the click here has the space go there with the link instead of being before it let's see if we can find that in here yeah the this space should have been outside not inside but that like the fact that this just works exactly as expected in HTML ish syntax it's great this is awesome it's that simple to write and format an email this one doesn't use tail and this one uses more traditional CSS formatting kind of because they're creating these so they would be nice to see typescript defs here but it all works and theoretically you have a type error if you pass out a style that isn't formatted correct so really cool to see I chances are if you've had to write an email in code before you've went through a lot of pain do some of the stuff this just does for you by default so convenient and programmatic emails where like you need to change the username you need to put a custom login code stuff like that and your template just being a react component makes so much sense but that's not what launched this has been out for a bit what just launched isn't react email which is launched is recent which is a way for any developer to send emails they wrote in react email super easy to get started I haven't even signed up yet YOLO add API key I actually want to send an email right now because I'm lazy but yeah resend.emails dot send you can see all the emails that have been sent here as well as the docs on how to do it let's take a look at that and see how to do it with react too late please spamming that's hilarious yeah Lee Rob hacking me with that API key dang anyways we hop into here I bet there's a look at that there's a react key that you can pass your email template to and then this is It's a component which if you don't already know components are just functions so you pass your input here and there you go that's how easy it is to send an email you have a from address to address subject HTML if you want to pass it HTML or just pass the react instead it's great they even have an app router example here with get I wouldn't put an email send on a get I would put that on a post personally just saying things a little scary to put destructive actions like email sends on a get come on guys anyways yeah seems like they have sdks for pretty much anything you would need technically you don't need much of an SDK for this but like they support PHP already they support Ruby already they support python go even Elixir so for us fellow Elixir fan boys resend dot email you're good really cool to see the craziest part though isn't what they support or just their DX it's their pricing the free tier is insane 3000 emails a month but it is capped at 100 a day but 100 emails a day for free is nuts well this is particularly useful for outside of being cheap is spinning up a second app that is your Dev experience it's very very good value I was impressed to see 3 000 emails a month and if I had to spin up a side like Dev project to do things in staging versus prod that's a great deal and if we bump pricing here I wish they would just show us per email pricing somewhere I'm assuming there's no yeah all pro plans come with unlimited domains huge interesting so you can get up to 250k emails for 80 bucks a month but then 300K bumps to 200. it's pricing changing is interesting but yeah up to 250k emails for 80 bucks a month that's nuts if you don't want to have to worry about everything from spam in boxes to templating for your emails to supporting whatever weird backend your company moves to in the future resend is an increasingly enticing option I invested for a reason I'm really confident in the team and what they're building if you haven't already checked it out now it's a great time to they just went General access today so get in go give resend a shot I couldn't be more hyped with what they're working on and I'd love for you all to try it let me know what you think and if you want to hear a bit more about why email sucks here's a video about all the things Google's doing to make email impossible for developers thank you guys as always peace notes




## They Made An IDE For React___ - 20221220
what if your IDE was built for react I don't just mean syntax highlighting I mean from the ground up your entire development environment was built thinking about what you need as a react developer every day today codex is working with the channel and sponsoring this video so I can show you this super exciting new editor genuinely really hyped about what they're building here I think you all are going to love it too so what is codex to put it simply codex is a graphical editor focused on helping you work in your react applications yes your existing react applications one of the things that makes codex so special is that they actually understand what we're doing in react every day things like git functionality built straight in things like the ability to use your type definitions for your components and have access to those variables inside of kodux you can use prop types too but it supports typescript as long as your components are typed you're good to go the ability to customize your Styles drag and drop things around a lot of the stuff that we're doing every day and react codex understands so enough talk let's take a look so you'll immediately see we have tons of different components and all of these are from a real code base you can even click the file tab here and see the source code just like in vs code you got your package Json you've got your Source directory with all of your application logic this was using Create react app don't don't be too mean to them for that still super nice to see that your code is in here the editor is actually using the same editor as vs code the monacojs system so it's super simple to access things go deep into like a sub component and if it's importing something that we're using in here you can go to definition all the usual like navigation your code base here this gift card component you can see has a gift card props that are defined here you don't have to Define it there you can even kill and be good it totally is accepting of any style of typing of components as long as your component has an input type you'll have access to that in their graphical editor what do I mean my graphical editor well that's where stuff gets real interesting if we hop here and we go back to the stuff that I was touching which is in the gift card component can go in here we have all of the element hierarchy so this is the actual components being rendered by react this is a board in codex a board is a component that you mounted in one of their special board.ts files so if we go to the code again real quick you'll see that we're currently in the source components directory there's also an underscore codex directory where the boards can be set up and accessed for each thing in your code base generally what if the pattern I've seen is the boards fold they're pretty directly mirrors the components folder doesn't really matter though it's just how you choose to Import and Export things so here we're importing the gift card component we're actually mounting it with uh or in a grid with a specific style to it already so that we don't have to make the component specific for this view because we want the component to flex and do all the different things based on what view you're in and we picked a specific one here you can even specify properties for the environment like how big it should be when it opens up in there you can set different custom colors and a lot of other cool things to make the actual editing experience in the editor way better once you have a board created codex is smart enough to add that to the home pages we saw before and we can show this gift card and in here you can click any element and immediately say on the side here all of the details for this so this gift card can actually check this on and off and see the effect on this specific component and when you make that change that's actually going to change the code here so this isn't doing some weird runtime stuff every change you make in kodox is directly mirrored in code super cool so you can check on and off and see immediately that these code changes are made to your code base things get really fun when you start moving stuff around so we want to add an element though we can click add here pick a basic element from like traditional stuff as well as any local components we have so if I wanted to add a landing page into my card just kind of the opposite of what I want to do but if you want to do that you can do that right here we'll add something more basic though let's add let's add an H2 click H2 drag and drop cool probably to be a child of that I want to be a child of this can I change the order though yeah you can super cool and now I have this heading too that's actually there in code in the component so here we're not going to see because this is the board but if I right click go to definition [Music] then in here we can now see this new h2 tag you know it's a new one because it's not using the capital H1 that this code base uses because these are all coming from blueprint.js if you have a component library that you've already built at your company like you have custom buttons you have custom like backgrounds custom loading screens Custom Image components custom video players all those types of things that are defined as a component Library you only have access to all of those here in the ability to drag and drop them into your new components and into your designs which is where a lot of the real magic comes in here is this is a super accessible solution for non-developers for designers people new to code anybody who might not have familiarity with a code base but want to play around and move things around and try to understand it better A lot of what's super cool here with the ability to hover over an element and just drag and drop it in this tree view to and from different places in your code base makes coding way more accessible to people who might not have been able to do this before this is probably the real magic more than anything else is how accessible tools like codecs can make your code base to people who aren't familiar with code yet or aren't familiar with the way that we do code just yet if you have a designer on your team that spends a lot of time in figma and they want to play around with the code base a little bit more this is a really good way to get them started highly recommend it things get really cool when you want to start styling sadly they don't support Tailwind yet let them know in the comments they should hopefully get to it soon but any other properties you would want to change about any element so in here we wanted to play with the Styles it can hit manage classes see all of the classes it does and doesn't have and add classes to and from it more importantly though I can actually play with the Styles here if I go here we can see all of the styles that are being computed we can modify and add to these oh yeah we can create a classroom here so I can create a new class you can actually pick which style file it goes to they fully support CSS modules so as long as you're using one of those Solutions you're good to go I can click here gift card board or gift card module CSS for the actual CSS module we'll give this new or call this custom description now we've given that a name and now we have this custom description class I'm able to customize it a bunch I can change the position of things within it you can see the effect immediately I can change the self-alignment if this is a thing that has children that's a flex box I can play with the font both the size as well as the family so you actually have access to variables if you have those defined in your code base already you can also change the text weight directly here make this really bold if we want to generally speaking that the magic here is you have a graphical editor not far off from something like you'd see with figma built directly into your editor magic stuff super cool to have this level of power and customization for any CSS scss modules or css modules really excited for the tail and support though Okay so we've made all these changes how do we actually do something with them well this is where one of my favorite Parts comes in their understanding of git if you look in the corner up here you'll see this little commit button that I can click and when you click this button you have the option to review your changes name a commit if you're not on a branch if you're on a branch that's protected it will actually encourage you to make a new Branch I already have a branch fun enough name New Branch but you can create branches and make pull requests all from within here we'll just call this uh update styling for description commit and as we see if you even look at the commit here it has the hash so if I want to go do something with it I can all of these code changes were made as actual code changes super cool and if other people in the repo have branches and you want to see one that they're working on you have the ability to just click here to switch branches it will reinstall run the install commands if it needs to or if you choose for it to or not to and now you can hop between branches trivially this is probably one of my favorite features the ability to use branches as a graphical experience to work on and modify a code base super cool stuff if you made it to the end of this video I appreciate you a ton I am genuinely really excited about what codex is doing here I don't take sponsors if I don't have genuine excitement for what they're working on and it's clear that codex understands us what we need and what we're building if you like this please let us know in the comments if you suck around this long you're probably already subscribed but for some reason you're not please do check the button make sure it's not white it doesn't say subscribe because that means you're not and also YouTube thinks you're gonna like the video in the corner here so give that a play maybe you might be surprised by it YouTube's algorithm is pretty good nowadays thank you as always hope to see you guys in the next one peace nerds




## They Made Errors Suck SO MUCH LESS - 20230724
when's the last time you opened your Sentry logs and saw errors that were actually useful for a lot of us it's probably been a while they're full of noise from everything from weird browser configurations to Chrome extensions going rogue to Google Translate and so many other things for every one useful error report I get I feel like I have a dozen or so reports that are just noise coming from all these weird sources and I'm surprised no provider has really taken the time to fix this the highlight team has been working really hard to build best-in-class open source session replay and error management tools for keeping track of when things go wrong in your applications when I saw what they were working on and putting out this week I really wanted to talk about it and I'm thankful they were down to actually sponsor this video so I can the only thing better than a sponsor I trust is one that open sources everything because it makes recommending them so much easier and I yeah I have a lot of faith in the product I'm really excited let's take a look at the future of error reporting and how these small changes can make these tools significantly more useful this blog post is the one that got me really excited where they talk about Auto resolution but more importantly extension filtering the auto resolving stuff is really cool it lets you Auto resolve errors that nobody has touched that have been stale and haven't been seen for a while I feel like this makes up so much of the stuff in my Century that having a way to automatically clear it out is super dope but what I'm here to talk about is the auto filtering for browser extensions I I can't put into words how many years of my life I have lost getting paged randomly because of a century report for some random honey extension error just by clicking one switch you can filter out all the noise that comes from Chrome extensions in your art reports why was this not this easy before since my errors were always filled with Chrome extension noise both at twitch and at ping it was hard to know when we were having actual spikes in errors and with this I can go to the page and just see real errors now when you combine this level of useful errors with really good replays and Reporting it becomes significantly easier to debug an issue on top of that highlight just introduced observability with Harold their new AI which normally I'm a bit more hesitant about AI stuff but this seems like a limited focus and honestly really useful example where you can ask Harold for help with a given error and it will give you some ideas of what causes these types of Errors where they've been seen before and where you should start looking if you combine this with Source Maps the result is very very useful information if you've ever sat there banging your head against the wall just trying to reproduce an error much less resolve it this will make life significantly better I I am so hyped to get this stuff set up on all of my websites as soon as I can because I really do see it being incredibly valuable for production code bases in other places is really useful and being a video chat app developer I got out of Kilt for this a while back with ping which is a video call app session times can break 10 hours we have individual users that will be in a call for 10 plus hours and have an issue six and a half hours in getting information out of that session is impossible but with AI funny enough you can just ask what happened and it will give you a summary and break it down in chapters and you can scroll through it and find the thing you're looking for what no this is this is really hype I'm excited I can't wait to see what they do more of in the future my guess is we're going to see even more powerful filtering and error identification taking advantage of the new AI tools this feels like a really good use of AI and generally this feels like a product that understands what it's like actually going through errors not just reporting them and no offense to the other tools in the industry feels like they're so focused on getting the logs that they're forgetting about how we use them and how we actually replay our sessions and figure out what went wrong in the user experience so if you want to try out a new observability tool focused on Modern full stack developers I can't recommend highlight enough I'll leave a link in the description also make sure you give another GitHub some love they deserve the Stars it's scary open sourcing something like this when you have so much competition that's hiding all their code but I do really trust for highlights going with it and I'm so thankful they are down to sponsor content like this it's really cool being able to hit up an open source company and have them be down to do something like this so appreciate you all a ton if you want to learn more about making sure you don't lose your errors I'll pin a video about that in the corner thing as always peace nerds




## They deleted my data. I'm mad. - 20231009
if you work with apis regularly you're already using Postman or insomnia or something like it it's the easiest way to quickly test your API endpoints locally remotely whatever else so you don't have to use Carl every time you want to test something these Solutions tend to come with cool team features as well where you can share reuse queries with your team maybe you bundle those all up in a collection so that you can expose your API through this collection to other developers on your team and maybe even users externally it's a really nice workflow for figuring out how a service works and how the API is expected to be used which is why it's impressive how much in shid ification has affected all these things if you're not already familiar with the term in ification to put it simply it's the slow degradation of services and experiences users have used usually for free in order to pursue some new angle around profitability especially in our current post zero interest rate economy where everybody was kind of used to getting VC money and not having their users pay suddenly we're seeing more and more services blocking off core functionality without some type of payment and even worse degrading the experience in order to potentially find new angles for profit think adding advertisements all over the product or pay Walling things you used to use all the time for free this inchid ification has been taking over a lot of the web and it's not stopping at open source sadly many of these open source projects that have been pulled into bigger companies have been running into endless problems around their projects being commandeered and slowly destroyed so what exactly happened with insomnia well I'll show you real quick I have this one request because I was using it yesterday still but all of the other stuff I have here is gone when I installed the insomnia 8.1 update yesterday it destroyed all of my local data because they wanted to push me to sign in when I clicked n I'll sign in later I was greeted with this with nothing in it which is miserable because they're pushing so hard for you to log in or create an account see all the places they're telling me to do that log in sign up you can't see cuz my face is covering it but there's a login and sign up in the corner here you can see them right there there's the banner telling me to log in or create an account and at the bottom here log in to sync your data yeah the hell it's very clear that they're trying to push you towards that create an account Direction but maybe this was just a mistake well no because scratchpad is fundamentally different from the previous experience you can no longer have collections you can no longer have groups you can no longer have plugins you can no longer have a lot of the functionality around insomnia unless you make an account what the hell this is a tool I was using all of the time I installed an innocent looking update and now it is unusable it just they they threw away all of the work I've done in it for the past year supposedly it's in some hidden folder somewhere and if I install version I can still access it but I don't care because the trust has been burned it's over I will never use a recommend this tool again and you might have also noticed they put their star count up here there's a reason for that there's a bunch of examples all over Twitter where the CTO of insomnia brags about their GitHub stars and how they're continuing to grow and this number seems to be something he likes to track a lot and seems to hope to use as they eventually IPO at Kong and he has been incredibly hostile towards users we look at any of these GitHub examples with him in it just going to scroll for down votes and we'll be able to find it relatively quickly here we are more info here the data can be optionally exported before continuing with the Cloud sync this data can also be exported after login yada yada with get sync this never goes but says in your git repository challenges we cannot continue to offer a great product with all these capabilities while working on an abstraction layer that supports two different storage backends for all data in insomnia adds too much complexity to the whole product unlike Postman the data is end to-end encrypted so there is data sharing concerns with insomnia encryption is not the problem here it's fundamentally breaking the workflow of the average user of your tool you've decided that the people who use this in offine mode having a good experience is not worth the cost of just destroying all of them it yeah not a single up vote on that one not a surprise it was told there is a wizard that shows up that tells you that data will be synchronized to the cloud and even gives an opportunity to export it you mean the wizard that didn't appear until after the update was accepted are you kidding like how does he just adamantly refuse to acknowledge the the up here it's embarrassing and when this was posted on Hacker News we immediately saw a bunch of Alternatives Bruno is dope it's free and open source I have a couple others I listed in my notes Here uh we have HTTP HTT Pi however we're supposed to pronounce that they somewhat recently added a UI to the project and it's really really cool there's also Hopscotch which is browser based works great and I think they have a downloadable version as well I'm not positive on that but it's one of the simplest direct clones of what you would expect from something like Postman or the Alternatives and then there is Paw which is now rapid API cuz they were acquired by rapid API and when they were acquired they made the tool free this one is a native Mac app which means it only works on Mac OS but it's also a native app so it performs great and is relatively wellmaintained you have a ton of great options and I'm pumped to see all of them getting attention now because of the utter chaos that has ensued since insomnia made these awful changes and something like Bruno in particular is entirely offline and this is the creator of it promoting his work I will absolutely give him an up vote because that is incredible work the business that ships this code base is migrating all instances from cloud optional to Cloud required hn user rambling CTO C below is the author of The GitHub issue even worse before you can could use it without an account now it locks you out it's funny that the user rambling CTO is the one triggering a very much rambling CTO but yeah it's absurd here's a video that shows how to get access to your data without an account how about a disclaimer that you're the one that caused the mess you're the CTO of Kong do I want to read his other comments I'm a little scared yeah the so much noise an update on insomnia 8.x here this is again this is coming straight from the CTO referring to everybody's issues here as noise insomnia can be used local only with scratch Pad which yes as I showed you scratch Pad the thing that has 1th or less the features that insomnia used to have it also isn't backwards compatible with my previous local environment scratchpad means if you're a new user starting from scratch you can get some of the functionality of the product but if you're an existing user that had a local set of data you're absolutely this is not like this is another mini product inside of their product that they squeezed in in order to pretend they're actually supporting local still they're not insomnia can be used with an account without sharing any data using get sync cool I am not signing in and I'm not building insomnia into my git flows insomnia could be used with an account and without git sync in a fully end to-end encrypted way nobody can read your data I don't care the fact that this harps on encryption and data ownership so much when none of those are the problem the problem here is you broke workflows for users and you threw out a bunch of my data when you did it doesn't matter how well encrypted your data is if you can't access it local scratch Pad is still there even though it supports almost nothing and somnia had a bunch of plugins and Integrations and cool things a lot of people used as Collections and the ability to group different queries and such all of that got thrown away when they moved to scratchpad in particular plugins are just entirely broken and do not work with scratch Pad they claim this was an accident but if we look at the commit history here we can clearly see commits where these changes were made intentionally log into insomnia to enable plugins literally this was intentional they specified it here in the commit before all of this drama so that's just a lie saying that it was accidental that this happened is absolute I'm trying to find the date on this yeah last week so this was a lie and there's quite a few of these coming from the CTO over there it's really sad and honestly kind of embarrassing scratch Pad is heavily Limited in capability because of this which is not the experience we want to give insom users moving forward the whole storage back in being local also caused data migrations issues pretty much since insomnia was born if yours is a privacy concern the data is end end encrypted what he keeps harping on that privacy thing my issue isn't that Kong has my data and I don't want them to is I have data on my machine I've been using this thing locally since it it started to exist and I've had no issues with it one thing I really want to point out I think it's important is that we don't call out the creator of insomnia who sold it Greg is an incredible Dev working at Railway now he sold insomnia because he truly believed that Kong would be the best company to maintain it going forward and they committed to keeping it open source and pushing it forward and when he felt like his role there was no longer relevant he left trusting them to maintain it going forward and as we see here Acquisitions are always terrible for the product so long get insomnia poor dude watching his product that he poured his life Blood Sweat and Tears into be absolutely decimated by this company because of their obsession with GitHub Stars expected Behavior no GitHub stars in UI yeah this the user hostile Behavior has been going on for a while so not surprising here's a similar example of adding a GitHub Stars widget with no option to disable it is pretty absurd that this piece of the UI is always there now that this UI has continued to get worse this all used to push up to the top and I'm losing like 50 pixels here oh I'm sorry our company doesn't work that way just because they want to rub in your face how many GitHub Stars they have and beg you for more so if you haven't already go check and see if you've started this project if you have please unstar it don't play into their don't let them win this is pathetic and as you see here I do not have it starred I think I did before all of this and I actually went and unstarred because of how absurd it is that they're going to ruin their product and continue doing such absurd user hostile things and literally ruining a thing I used to use all the time just because they want more stars and they want email addresses and they want to IPO if the only reason you have a chance at iping is an open source product that you purchased you might need a better value prop and I really don't see this business as having a very valuable path forward at this point in time if these types of things are necessary for them to get to the numbers they need in order to have a successful IPO they've already failed and it's truly embarrassing that they're going to attack their most dedicated users and they're going to destroy our experiences on our machines just to hopefully move the needle slightly in the direction of a valuable IPO this is an absolute mess and I've never seen anything quite like this before and ification is real even an open source don't even know how to follow this one up just don't give these guys any respect they don't deserve it anymore the CTO in particular is really rough please don't harass employees they have no control of this stuff many of them are probably looking for their own exits much like the creator of insomnia originally and I did know a lot of people who worked on insomnia at Kong none of them are there anymore this is a mess and I hope the CTO takes some time to reflect I'm sure he's watching this video and if you do let me know in the comments how much noise I'm making that you're all upset about because you screwed up and you seem to want to blame the community instead of accepting that well now you have to blame me instead sir thank you guys as always I'll pin whatever videos Here YouTube seems to think you'll like them so watch them if you haven't already peace nerds one more quick thing I want to be known how committed I am to this here's insomnia insomnia is no longer installed on my computer time for me to go through all of these new alternatives to figure out what I'm using going forward fool me once shame on me I will not be fooled twice how how much would it bum them out




## This GitHub CSS Exploit Is WILD - 20240611
remember the good old days on MySpace and Tumblr where we could customize the HTML and CSS of our Pages wouldn't it be cool if we could do that on a developer platform like GitHub well they don't want us to but that did not stop friend of the channel cloud from finding some crazy exploits with CSS on GitHub you might have seen on Twitter over the last few days that a lot of people are doing wild things here is a pretty basic anime image being plastered on the back people have been doing a lot crazier stuff like yakine who's a lunatic just qual does this not just immediately give you flashbacks to the OG Myspace days because that's all I can think of when I see this people did some crazy stuff this was a wild Journey from how it was found to how it was disclosed to how quickly it was fixed and then a new exploit was found yet again it was a wonderful ride and I wanted to go through it piece by piece because I think this is really cool so without further Ado let's dive in huge shout out again to VX underground Cloud Eva and everybody else involved with finding these exploits and getting me all the info I need to cover this I am confident nobody else is going to cover this in as much detail simply because I'm in a group chat with them and they're sharing this in as clear and concise a way as possible so again all their links will be in the bio check them out if you can think they're awesome people cool so this all started with Cloud's original tweet casual CSS injection on GitHub using math mode I could phrase this in my own words but I think it's much better to use the email that they sent to GitHub so basically I first posted this on Twitter I know that's a bad way to disclose it but my initial attempts at sending post requests or attempting to leverage it into something bigger like an xss failed so I decided to post about it for fun also all stuff like IP Grabbers were out of question due to course but then people started abusing it with like images covering the whole viewport which is not cool I know that one person supposedly managed to cause a post request to log out using an open redirect that works from GitHub internal domains but I don't know the details of that and even if it's a hoax so yeah what they're saying here specifically is that they went public because they didn't see any way for this to be abused what they realized is if you use these exploits to render a giant image that looks like GitHub and put bindings on buttons when they click theoretically you'd be able to get someone to click on something to trigger an action like a post request that you wouldn't want people to be able to do to take over the site so that's why there was a legitimate security risk here which resulted in them passing it fast and also with Cloud being so clear with their disclosure here I think this is a great responsible disclosure especially if you thought this is a funny little thing and then learned there was potential risk all A+ in my book as for other fun ways to exploit the most prominent one would still be social engineering by serving a carefully crafted SVG resembling some other GitHub sites but I haven't seen anyone do this in the short time that it was live here's actually the Mathematica the math syntax code that they used to do this apparently you can escape from math code with Unicode and embed CSS here and any image hosted on a GitHub domain would work there as long as you close it out this way this would work and let you do things with CSS on the page pretty crazy that once again math has doomed us all that it's math syntax being exploited to make this work in the first place GitHub has ruined Christmas the CSS injection has been patched the following macros are not allowed Unicode again it was embedding Unicode inside of the CE like math synext let you escape in this way imagine you're building a Lego castle and there's a secret tunnel we call it a vulnerability that people can use to change things in your Castle in this case the castle is a GitHub profile and the sneaky tricks use something called Latch uh good old latch anybody else here also use latch to format all their research papers in college because they were a tool because I know I did even though I had no math in them I just wanted to be and have my papers all be in code here's how the trick works normally latch is used to write cool math functions but we found a way to put in some special code that tells the profile to load something called CSS which changes how things look making your Lego bricks shiny or colorful I'd hope everybody here knows what CSS is at the least if you don't know latch when GitHub sees the payload it tries to understand the latch but instead it ends up loading the CSS changing the profile in ways it wasn't supposed to the slce is a command in latch that usually helps to write chemical equations think of it like a special Lego brick that does something cool yeah that makes sense and since this has to do a bunch of Cs stuff in order to make a thing as complex as a chemical equation work right it's a good opportunity to inject things this code is even more fun because normally in latch the SL symbol starts a command but here it's written in a way that sneaks it past some checks it's like hiding a Lego piece in a way that the rules of the game don't notice yeah this is an encoded slash that latch won't try to interpret which means you can sneak it in as text Unicode Goomba font CSS here this part is like giving special instructions to the Lego brick it's saying hey use this special font Goomba font to escape the default context and also add this CSS CSS here the CSS is the part that changes how the things look on your profile and then here the x00 this part is like the target of the Unicode character but instead we're putting the four zeros which is empty so it's using the chemical equation binding to escape Unicode out and then render CSS on your page great breakdown thank you to VM funk for this oh you're already following me I feel bad for not following you back yeah back to the timeline though this is again from the team so doing my best to cover this as accurately as possible Cloud posted the initial payload after finding it and showed it on Twitter and grabbed a lot of attention other people jumped in and started experimenting they realized the risks so they must just get Hub security then it got patched and then enu found another workaround using the HTML escaped backslash instead CU again you saw the early example that we had it didn't have anything special with the Unicode slash here but they figured out if they use this it would skip past the checks that they had added so this let them keep exploiting the bug later on apparently the second one gets patched or the third one is found first but the final exploit they found has also now been patched by get so all of the different ways they found to do this have been checked and fixed finally and yes they were patching all of this late on a Friday night so honestly shout out to the GitHub people who took this seriously it's funny because github's notorious for not really fixing bugs particularly quick but it seems like they handled this one well and I'm impressed with them if they were take other things a little more seriously like this it'd be nice but it's cool that when this real potential security risk here was discovered that they handled it I still can't believe this is real I love that the weeb hacker Community has found such a crazy way to bring us back in the Myspace era that was super fun it's R we get an exploit that's this innocent and just fun to play with huge shout out to Eva I'm so bad at names as soon as I have to like do it okay Mel cloud and Eva cool theyd time a charm Mel Cloud Eva and Shrek godamn it check out all their Twitters give them a follow this was super super fun until next time peace nerds we need to make a chrome exens to bring it back oh God no please no




## This Isn't Just A Chatbot (OpenAI Should Be Scared...) - 20240220
Nvidia just dropped Nvidia chat with RTX and it's way more interesting than I expected in order to understand why I think it's important to better understand what it means to have one of these GPT models and run it locally if you just want to see me playing with it I'll be sure to put a time stamp in the description so you can skip straight there to understand what's so interesting here first we need to know what a GPT is GPT stands for generative pre-trained Transformer it's how almost all of these models work companies like open AI have hundreds upon hundreds of super super powerful gpus running against Millions upon Millions upon literal billions of pieces of data to make a generic kind of simplified version of that data set that is able to take an input and transform it into the output you're looking for like with a chatbot if you want to see what this looks like you can actually run open source models locally you might have heard of llama which is meta's open- Source machine learning models they've been working on for a while now meta has been committed from day one to doing almost all their Ai and ml stuff as open source and that commitment really shows with things like the Llama models being open as well as projects like AMA being born around it and ama's pretty dope it's the easiest way to locally run these machine learning models that are already created I'm using it on Mac you can build it yourself on windows with Windows sub system for Linux but definitely don't recommend that at this point in time we'll talk about Windows in a bit don't worry once you have it installed it's actually pretty easy to run and you can pick any of many of these different pre-trained models I'm a big fan of mistol and the mixol model you can check out my video I did a while back about my mol is so weirdly cool but all of these models are open for anyone to use and in this case run locally so let's just give it a shot AMA run Nal if you don't already have the model downloaded it will go fetch it for you here too real really handy that was they Tak time to spin up but let's ask some questions hello how are you feeling today as you can see it's pretty fast cuz it's doing it locally and the meal model is super super quick this case doesn't have a real response which is notable we can ask it a bit more like what types of questions should I ask you about great answer but this is only great if it already knows the things we're looking for like it has a bunch of random data embedded in it like who won the Super Bowl in 200 five so it has a ton of data in here but it doesn't have all of the data we might need like something more modern like what's the most recent YouTube video b3. released doesn't have internet access so it doesn't have the ability to figure these things out but I can ask it why might the current viewer not be subscribed yet over half of my viewers haven't hit the Subscribe button despite it being free can you tell the viewer why they should subscribe for me according to mril you should subscribe because I'm consistent you get exclusive access to additional features engagement supporting my creative Endeavors and staying informed and up to date hit the Subscribe button if you can as you can see this is kind of limited if I want to let's say go over a video transcript and ask it questions about it I have to do some weird stuff to to pipe it in so first I will close this cuz I noticed when I'm using the buil-in CLI tool it doesn't work here at all but I actually went out of my way to download a script from one of my videos this is my video comparing and contrasting different CSS Solutions it's one of my longer videos it's over an hour long and I figured it'd be nice to ask an AI to summarize it so here I am manually piping the output of a cat call to that video text file and then asking mixol to summarize it for me I'll click enter quick see how this takes it's not super slow definitely not as fast as the previous run it's a long text so I don't don't fault it since the only name I say in the video is Adam Wan it assumes that I'm Adam Wan but other than that pretty accurate here I agree the libraries can limit the quality of an application's architecture and user experience and it's better for front end developers to own their style systems and build applications that are not limited by the libraries they choose Wan particularly Praises Tailwind for making him faster at developing style systems improving his skills in CSS not enforcing a ceiling to the quality of what he can ship yeah that's a decently accurate sumary minus the name being wrong I did run that on mix and it was pretty slow so I'll quickly run this on M cuz I know it's a tiny bit faster just curious how much so yeah that was a good bit faster oh it's actually a little more accurate it says the speaker instead of assuming it knows my name yeah good summary but that's just one video What If I wanted to give it like a bunch of videos what if I wanted to train it against all of my videos and ask it things like what would Theo say about this it's not going to be able to do that because as you saw it takes a while to parse this one text file you can't just throw it an infinite number it's limited by how much input it can have this is where Nvidia chat with RTX starts to get really interesting really quickly because it's not just a traditional chat bot like we saw there although it does let you use mol and llama it's actually based on retrieval augmented generation R the concept is simple and kind of complex at the same time you take an existing model you then generate a mapping of different data and you tell the first model hey use the second model map whatever you want to call it to determine which set of outputs we care about it's like it's using the first AI to Traverse the second AI data tree thing to get the best possible output for what you're asking based on that existing data this is not something that I can quite as easily run on my laptop because it's somewhere between a traditional lookup with it a GPT and actually training your own model from scratch and that in between is something you need a lot of GPU power for and this is why I have to do something I don't almost ever have to do on my channel in fact I can't remember the last time I did this I have to switch to Windows because this only runs on Windows and 3080 TI is in my Windows computer so I've already downloaded it it was massive like well over 30 GB and then it took a bunch of time to install because it had to install all the weird python dependencies necessary to run something like this and when it's running you can't even see it but it has a terminal like a total mess of a CLI running with all of the stuff going on in the background so it can produce our little chat server when you first open up chat with RTX after getting everything set up this is what you're met with the screen that has not many options specifically it has these different weirdly game related questions the reason for that is it's pre-trained on an RG set of 30. txt files that are for articles that were published by Nvidia so this is the mess of a terminal it's running in and here are all the files that it's created this all just came by installing the bindings I didn't download all these files it's just basic examples like halflife 2 RTX it's just their article and text so what's happening here is it's parsing all of those and answering questions based on it so I can ask it when does Ratchet and Clank come out on P and it's going to grab the article and tell you what it's referencing for that which is again very interesting because you know if you've played with these AI models before they're not usually very good at sourcing things properly but since this limited set is directly being parsed and traversed by the existing GPT it's much more accurate when it does such can also ask a questions that it needs to read all the data for like what was the first game released with RTX support might not actually know this because the articles are just the last 30 I'm actually pretty sure portal Prelude was the first it was one of the first announced for sure so this might be accurate and it's citing it correctly I can click this and it'll pull up the text file pretty cool but this is what the data they've already given me where things get really interesting is when you provide your own data not only can you just provide a text a PDF or a doc you can actually point it at something like a YouTube url so I'm going to go to my own channel where I have a playlist of my what I consider best videos so here's this playlist that's unlisted but you can now see the URL do as you please and in here I can drop this link hit download and now it's going to download all those transcripts and dump them in here to be used as an R so now it has all of this data trained on my YouTube channel let's ask it a question what is Theo's favorite Java Script Library not very good let's give it another shot what styling Solutions does Thea recommend cool did a much better job that time but just asking me questions is no fun how about we ask Prime I made a playlist here where I just grabbed a bunch of primes top videos and I'll throw these in here instead first I need to delete this is a really annoying UI cirk if I don't delete these it's going to keep parsing my videos which we don't want it to do we only want to parse Prime so I'm going to manually delete that first then we're going to go in here press download again while this is running one more quick interesting thing notice something here they're using spell for the UI I thought that was interesting not a big deal just something I didn't expect well now I was asking something that I want Prime's opinion on like what are some tips for a an aspiring software developer learn from your peers test your code follow best practices learn from your mistakes practice code regularly participate in coding challenges learn from experts and be patient look at that all from primes I solve 1583 leak code questions video decent advice pretty cool that I can get personalized advice based on a data set like crimes YouTube videos I am very interested in this concept and it's cool that they're not just releasing this but they're op sourcing the core Parts MOS we just saw is built around this trt llm rag Windows which uh that's the most crazy abbreviations and shorthands I've seen in front of something in a while it's also very sad that the one proper noun here is Windows anyways it's cool that you can do this and run it locally using the tensor flow RT stuff and it's also cool that it's open source as far as I know this is one of very very few examples of using retrieval augmented generation locally on your machine while taking advantage of all of these awesome new models it's impressive stuff and I'm hyped that it's open sourced huge shout out to llama index as well for being the key piece that a lot of this stuff together letting you index things you can see here it's a little more complex though you actually have to write a bunch of python code to set things up yourself whereas the Nvidia stuff gives you an API and a UI for that and now with this Nvidia thing you can install is just a chat UI you can run as a single package on your local machine so yeah this is what it looks like running the stuff locally on my 3080 TI instead of going to the cloud and doing everything through open AI curious what you guys think I'm honestly getting more and more excited about AI as we get more of these open models that I can run myself and do as I please with I'm curious what you guys think should I be doing more AI content or is this way deeper than you care to go let me know in the comments and I'll be sure to think about it in the future thank you guys as always see you in the next one peace nerds




## This New Angular Release Is Wild - 20231111
looks like I have to talk about angular again didn't think this would happen but uh they had quite the reveal if you're not already familiar the newest angular release they change everything from the logo to the component model to the way things update and it's it's a huge shift and it's really exciting to see I haven't seen a framework upend itself like this in a while and as much as I know it's going to cause push back in the community it does seem like it's for good reason in the right direction so against my better judgment let's talk a bit about this new angular release so one of the big parts of this new angular experience is their new angular homepage which took a bunch of inspiration from what the react team did with the new docs overhaul I think they went a good bit further with it obviously they have the super pretty fancy animations with everything I do I do love the new logo and the new color scheme I'm not going to lie it is really nice so here's an example component using all the fancy new stuff we have component from angular core forms module from forms and then bootstrap application which is the actual thing that gets the app to run you have the selector the template CU again everything is templatized and kind of MVC where it's not returning the template it's grabbing all of this context from the model that exists when you define a component and here we are saying that this input is bound to the NG model with the key name as a placeholder and now when I input it's going to update the model's name value so I can then render it in the template here and the forms module is the thing that allows all of this to get bound so there's a lot of implicit stuff going on here which is still what I'm most concerned about with angular where like the behavior isn't really described here I don't love this example for that reason because this isn't saying this happens then this happens then this happens it is defining an object in this case a component that through its Imports has implicit behaviors assigned to it and then your template defines how those things interface kind of it's weird so let's start with the announcement blog post I will say Emma's absolutely killing it she's done a great job as I don't know what her specific role is but she's been helping a ton with angular's branding community outreach and everything in between and I'm even chatting with her now she's killing it on that front so huge shout out to Emma for the work she is doing to make angular more digestible angular first launch in 2016 is a way to help developers build modern web applications throughout its history angular has made millions of developers successful over the past several releases we focus on improving performance and developer experience on the modern web our momentum includes a revamp of angular's reactivity system SSR and dozens of additional features later this week we will release angular 177 including deferred views built-in control flow view transition API support SSR enhancements and more this Renaissance deserves a modern identity that represents the velocity and stability of our team and what we're committed to today we're excited to launch angular the future home for angular developers oh the light Mode's actually nice here's what we're talking about the new docks embedded tutorials cool cool cool I want to see the performance numbers do they mention any of this here no just oh these logos are actually really cool the performance win here is nuts and I almost want to refilm the intro to talk about how angular is now technically the fastest framework the new angular logo represents our goals stability and velocity stability and controversial angular will angular will always be reliable and backwards compatible angular yes angularjs no but yes angular has definitely been better but backwards compatibility only recently has the velocity begun to shine but don't trust me check out the public benchmarks yeah in the screenshot they picked the major versions of a lot of popular Frameworks and I'm just realizing now they intentionally didn't put solid in here that's a little sketch because solid still wins solid still Reigns champ but against all these other things cool yeah row swap is brutal for react but everything else react's doing okay nowadays also interesting to see clear row performing worse than it does in react but uh yeah she included solid in a reply cool that's pretty damn fast turns out moving to a signal based approach where you're updating your view without re-rendering everything is actually quite a bit faster so that all checks out just interesting to see the choice of not including solid that that feels somewhat intentional not a big deal she replied with it this initial screenshot definitely feels like they picked the popular Frameworks that they know they're faster than also Vue 336 being faster than spelt 4 is interesting I know VI's been working hard on all that stuff but that's pref faper which is very interesting so yeah angular now is much more performant angular now has a much better brand they have docs that are up to date and I'll be honest I still hate their syntax it's a lot of progress things are much better but I still think the claive methods of describing things are what has been working well for us as web developers and I still think the more oo binding implicit behaviors by including specific pieces isn't the best for full stack scalable applications I'm excited to see angular making all of these strides in the right direction less because I think it will help us be better web Developers more because I think there's so many code bases trapped on angular that are massive with hundreds if not thousands of Engineers contributing to them that are going to benefit so greatly from this both the performance wins possible and the better developer experience that they'll have working with it so even if I'm still not interested in angular this is a massive massive step forward for the entirety of the web and I'm very excited to see the performance wins on big angular Based Services I use like YouTube itself so what do you guys think are you excited about again you going to go play with this new release or are you going to take a step back and smile for them but not pay too much attention because this is probably my last angular video for a while but I am really proud of the progress that they have made if you want to see my second to last angular video I'll pin that in the corner there if you've already seen it you want to watch something else YouTube thinks you like the video underneath it appreciate you all a ton thank you guys as always talk to you soon peace nerds




## This React Feature BREAKS THE RULES___ 😱 (React Portals Rant) - 20220619
how do [Music] react portals work react portals are one of the coolest like underutilized features in react they're also dangerous uh binary i worked at twitch for half a decade and i built a lot of mod view a very fun project really proud of what we worked on there and the team who's working on it now is awesome love them all to death yeah i worked at twitch for a while so when i say we in that context i'm specifically talking about the decisions we made to build it so here is a react dom tree react dom tree there's gonna be a traditional react dom tree i'll put it here to start in here we have our usual app component i got a capital a so it's clear this is like the app that's at the root of your dom we're all used to that and we might have some components on here we have a head the header component that's like your metadata whatever title maybe it's like actual header bar whatever i don't care what you're doing with that you have your body and then in here we have sub component a etc this all click this is the traditional react dom experience you have a root node and it mounts things this is traditional react components and what happens here is things render to the real dom so we're going to have real dom and for now i'm going to copy and paste this in the real dom it's not going to be an app it's going to be like a div or whatever you return there the header is going to have like the head whatever else body a whatever but generally like whatever this returns will be here whatever this returns will be here there's like a one-to-one link of where these things are and where they uh end up in the real dom the way that react portals work is a little different actually i'm just going to keep modifying this diagram i'll probably regret this after but that's fine so the way react portals work let's say we have a sub component here b actually we'll we'll say this is a a modal so we want component a to mount a modal but there's a slight problem component a has with 200 px on it and overflow none because of this there is no way and we'll say it has like position relative for some reason all of these properties exist on a now this modal can't render high enough in your dom to do that to be a big like full screen modal if you had a button that has its own like positioning rules and all this stuff and then you wanted to mount a modal in it is there overflow hidden yeah sorry whatever same difference hidden cool overflow hidden position relative y'all get this you've tried mounting a modal inside of a button and not been able to because you can't follow the rules here yeah you can't you you can't break out of a a parent's z indexing and render things at a high enough level so what if we wanted to what if we effectively wanted this to be a child of a but where we really want it is all the way up at like app level so we'll call this out portal and i'll give this a color this guy will be blue and in here we're going to mount one additional piece i'm actually going to use i probably should use squares for the components so that portals could be a different color or a different shape but we'll do orange for this one and we'll call it in portal so now as far as react is concerned this child exists directly or directly underneath but in the actual app what you end up getting so the real dom and the react dom get an entirely different result so here's how react portals or portals work in react you mount something inside of an in portal and you have a matching like out portal reference that it renders out to and then in the real dom that's where it ends up going instead so in the real dom there isn't actually anything here this is just conceptual but this blue portal from here it comes in through here and then comes out there does this help explain portals gonna read chat make sure people get it it's called portal because like it is portaling it's it's taking something traditionally with a react dom you're putting a button inside of a div and that's where it goes but in [Music] sometimes you don't want that sometimes you have a modal sometimes you have a pop over sometimes you have something that you want to move in the real app but not inside of the virtual app it lets you move unless you break the relationship between the virtual dom and the real dom for your specific needs in use case which is not something you will need very often but when you do having the ability to do it is mind-blowingly powerful so yeah so pretty much like every react modal component in mui the uh like drop down the overlay components all those things they all use portals for that the reason i used a modal for the example is it's like the most common use case where you want to mount a modal really deep in your app so it has access to context and things like let's say a has a context provided in it we have like user context provider here and we want to make sure that this context is accessible in the modal even though it doesn't exist as high as the modal should go because of that we need to mount this modal below the user context but this exists under this like overflow hidden rule that keeps it from positioning properly position absolute does not work for this because if this guy has a parent that has different position rules you can't break out in that way uh how do i feel about having a modal as a child it is a lifesaver to not have to build a whole global state machine to do something as simple as mounting a modal like to have i've seen so many apps have to re-architect themselves because they wanted to mount a modal and that's why packages like react modal and mui and all these things catch on because this is the intuitive workflow cool yeah this is a good pattern i hope this helps clarify what portals actually do and what i've used them for so in the like example of mod view like whenever i go to this i can't do other things i'm going to kill that tag because it's annoying so in here all of these elements all of these widgets are mounted inside of a like mod view widget container and we have like 50 in portals with like 50 widgets in there however many and then wherever you want to put it so when you drag and drop something from one place to another you're moving the out portal around you're not moving the widget around so this all stays these widgets never get remounted or re-rendered the re-renders only occur when you move the portal around directly hopper hopper just asked one of my favorite dumb questions why i always keep them rendered okay why keep it rendered i'm going to move chat over from the right to the left before i did the portal solution what i just did there moving this from left to right and right to left since this is a nested user interface these components are unmounting and remounting so if this chat had logic in it to connect to chat when it re-renders i just disconnected and reconnected from chat by doing the most intuitive action possible of dragging left to right re-rendering a whole component and unmounting and remounting a component when i drag it to my dock and i drag it back to my app is not an acceptable condition to kill an entire component hierarchy it absolutely makes sense to not kill your components when you're not killing your component i have a feeling you will abuse this in particular maple and i'm very excited to see what you do with these patterns also to be clear like the the primitive that react gives for this the like react.reactdom.createportal kind of sucks uh i use react in portal out portal there's a really minimal portal component package yeah react reverse portal this is such a cool little package that gives you i'll just show you the syntax as it's dope you can make a portal node by calling portals.create html portal node you can do this outside of react 2 if this is deterministic it's magic and what we do with this guy is we have an array where we create a portal node for every widget we then pass the node in here to where we render like each in portal with the expensive component as it shows here and then somewhere else you can pass the out portal node and wherever you import and render that out portal is where that now will render or render super cool it gives you like a declarative method to define a a node entity that binds a react dom node to an other world real world node like the real dom node and control the override there jason just asked so it's like go to for html honestly kind of yeah this is like go to from react dom to real dom and it's so cool it's not useful for a lot of things but when you there's a specific type of problem that you're going to bash your head against in the future just at some point you're going to run into it and this is going to save your life do i have the start already because if i don't i need to do that i don't it has 328 stars it just bumped to 334 so y'all are clearly taking a look i'll share that in chat thank you guys again so much uh react dnd's in a bit of a rough state uh react s react to use gesture is probably the direction i would go i might just be biased because poi manders but react use gestures in a phenomenal state now and you can do some really cool things with it so yeah if you want to do drag and drop react use gestures probably how i would do it you have a pretty nice syntax you can combine it with react spring to have these nice fancy like things drag around with a little bit of like a springy nature super good stuff hey 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 so 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 and i go live on fridays pretty often as well thank you again for watching this video really excited thank you




## This React Library Scares Me... - 20221002
oh oh don't no no no no no no no no no no no no no no no no do not touch react beautiful DND they haven't shipped a real version change since 2020. this Library continues to be replying heavily by LSD products but we are focused on other priorities now and have no current plans for further feature development or improvements if you're looking for a good drag and drop Library your options are use gesture by our homies over at poimanders phenomenal Library you're going to be building a lot of the behaviors yourself but it is very performant very well implemented very good or if you want something that is more like react beautiful DND and that it has behaviors built into it so you don't have to go as in depth on like implementing a list where things drag and reorder and such DND kit is a phenomenal Library for something a little more Behavior oriented and when you combine d d kit with something like Auto animate we talked about a bit on stream before Auto animates a phenomenal way to in one line of code add good animation behaviors to a page see when I click these things reorder really nice pleasant way remove things they disappear in a nice pleasant way really good thing overall if you combine this with something like DND kit you can have really good behaviors almost immediately as for react DND because I saw this come up It's Not Dead but it's kinda close it is not touched since April 20th it was a first run at a set of Primitives for drag and drop in react it is very primitive its API is pretty rough and it it transitioned over to hook successfully but teeth were pulled along the way and it's just not as dxy is great in experience this just got old not in the it's not well implemented since but in the it's not a great developer experience sense so my recommendations for drag and drop are the DND kit as well as uh the use gesture by Point Manders saw somebody mention draggable Js I believe it's by Shopify I haven't looked into it too much uh maintenance of his repo has been passed down to new collaborators and is no longer worked on by anybody at spot or at Shopify this sounds dead to me cool so so we're three for three for dead or dying for the ones other people have recommended we're gonna go with my recommendations guys sorry honestly like react DND is not the worst option staying on that is fine but the DX isn't great and there are better Solutions react beautiful DND would be barely a DX win with a massive regression in the quality of code being imported in your code base something like use gesture would be a slight increase in your expectation is devs but much better documentation much better DX overall and probably a more performant solution and DND kits a really good solution overall




## This VS Code Killer Just Went Open Source (Written In Rust BTW) - 20240126
VSS code love it or hate it it's become the norm for quite a while now I still remember working at twitch being the one person who just would not give up on Sublime Text when I started writing more unit tests for weird typescript functionality I was introduced to the VSS code debugger by a cooworker which was a huge help in me running the tests and playing with things as I went along and ended up slowly making the shift as a result that all said I missed the performance while I could sit here and defend electron all day I'll admit the performance is something you feel in a text editor while vs code is way faster than Alternatives were like Adam you definitely feel that it's a browser not a native editor and when you use something like Sublime Text or even things like Vim the speed at which a key press results in a key being on your screen it's small but you feel it and I definitely understand why people miss a native IDE this is why I'm really excited to talk about Zed today Zed's a really interesting editor because it's trying to find the balance between native performance you would expect from things like vim and a plugin UI focused ecosystem similar to vs code where you can kind of get the best of both worlds it is not just being cre cre by some random people it's actually being built by the original creators of Adam and those Adam creators didn't just invent one of the first modern text editors they actually built electron just to make atom possible in a lot of ways you can almost see this as an undoing of the damage that electron did where this team wants to make a much better performing editor that doesn't compromise on the user experience the same way other things might do Now Zed is open source this is a huge change that I honestly didn't expect because Zed's a startup they have to make money somehow open sourcing the editor is a bold to make but not only are they open sourcing they actually rewrote most of the code in the process so why the big rewrite last week was my first week at Zed I joined right as the team was preparing for this week's release which they referred to as zed 2 big things in the air this release marks the end of the team's multi-month rewrite of zi framework GPI from V1 to V2 all hands on deck everybody fixing the last bugs polishing Zed and I the newcomer had so many questions why the big rewrite how'd you pull it off what does this get you how do you organize it this is really cool that they're like publishing this type of stuff about why they're doing these bold rewrites and that the whole video is on YouTube as well I'm not here to talk about the rewrite though I'm here to talk about the open source release and actually play with z a bit if you want to hear more about big rewrites like this let me know in the comments and maybe I'll make a whole video just about this rewrite we're excited to announce that Z is an open source project the code for Z SS available under a copy left license to ensure any improvements will benefit the entire Community GPL for the editor a GPL for serers side components interesting that they went with standard GPL for the editor and the Apache modification of it for the serers side stuff makes sense for them to make sure they a business they can sell but fascinating to see this type of like split licensing for a product if you think I should talk more about licensing for open source let me know cuz it's thing I have a lot of weird opinions on they also mentioned the GPI rewrite that they are Distributing as well under Apache so anyone can use it to build high performance desktop apps and distribute them under any license that's huge that's really cool good open source why are they doing this most importantly they believe that making Z open source will make it the best product our mission is to build the world's most advanced code editor and get it in the hands of millions of developers there's a ton of surface area on the platform and will need all the help we can get considering that all of Zed's users are programmers it makes the most sense to open Zed to the maximum pool of talent this is a really good point since everyone using Zed is going to be a developer letting them contribute to it makes a ton of sense makes a ton of sense really cool to see them thinking in this way on a more selfish level we also think going open source will be a lot more fun one of our favorite aspects of software is connecting with people we're not only proud of what we've built but also how we've built it we want to share Zed's inner beauty with all of you and we're confident we'll learn a lot from you in the process to make it even better they're also introducing this idea of Fire hacks where you can hang out with people in The Zed channels talk with other developers people contributing people not and they'll be running Fireside hacks in them where they work on Zed live and a public Channel this is super cool I love these like Community opportunities to hang with people really nice stuff and then they talk about the money aspect cuz this is important too CU they're a startup they need to make money eventually and they say specifically that they strongly believe the best way to build and maintain the world's best editor is by associating it with a sustainable business model it's the only way they can continue to invest in a full-time team to spearhead Dev some may wonder if making it open source undermines that objective but they thought about it a lot and they don't think the openness is at odds with the commercial success rather than selling you a proprietary editor we'd much prefer to sell you services that seamlessly integrate with your Editor to make you and your team more productive said channels is just one example it's free for anyone today but they intend to begin charging for private use after a beta period of experimentation providing serers side compute to power AI features is another monetization scheme they're seeing getting traction and I've seen this more and more with companies recently where they're trying to become a standard first and then monetize later I think it works really well I'm curious to see how it goes for an editor nobody's really tried this at this integration level usually editors either charge or don't make money charging later to make money is an interesting strategy that requires more investment for them to find success but seems like they're building something really special here and I'm excited to see how it goes for them they're not at one point oh yet though so know this is still early but it is a really exciting rewrite I want to play with it so I guess there's nothing else to do other than click this download button so let's do it download for Mac OS one more thing of note at this point in time Zed is Mac only they do plan to support other Platforms in the future but let's be honest with the things that they're targeting Mac devs are going to be the majority of users anyways and they'll certainly be the majority of potentially paying users in the future so as a business tries to figure out if they have something with traction that could possibly make money in the future it makes a ton of sense that they're not supporting windows and Linux just yet anyways here is Zed one of the cool things they actually have a Vim mode built in does that mean this is officially Prime agine approved to be determined I don't have Vim bindings in my head anymore so I'm not going to check that they really thought of the setup process here where you can pick a theme doesn't seem like they have the PO Manders theme I don't know you could install custom ones or not but they don't have my preferred one which makes sense it's a pretty Niche theme so let's go with the default for now choose a key mapping vs code yes please don't make me learn new things it's cool that they let you take the mappings from other programs and the default is vs code where they're just copying the vs code keepy bindings really good idea don't make me learn all these other new things when I'm just trying to play with a new editor and then install the CLI we'll take a look at the upload thing public code base so cool here's our project it is very minimal I've seen people saying that already but I do like how how muted things are I don't love the lack of color in the icons cuz like I can mentally map things when they have color but it's also like almost everything's just TS TS TS TS in blue so how much does that really matter debatable I don't know if you guys know this but the VSS code CLI is slow as [ __ ] so if I type code period we're going to press enter right now and that took like a second plus to switch over I actually have a custom binding that you might have seen me use C that is an alias that just calls the vs code application directly and when I do this instead I'm going to press enter right now it's literally instant and as seems to care about that this lets you load the application way faster and the specific CLI thing they're using to get those ARs and parse them is just not very fast let's start by playing with the hot keys that worked great is there a Hut key for hiding and showing the sidebar command B that's Snappy scrolling feels a little Jank I don't know how much this will come up like in the recording because I'm recording 30 FPS even though my screen's running 120 but the scrolling feel less good this is actually something I noticed when I first played with Z is that scrolling felt a little weird yeah a ton of inertia that's a good way to describe it Vim Tim in chat so love that a vimmer has opinions on this one thing that really annoys me in vs code is when I'm trying to delete like a section of text so let's try and delete here up to functions CU When I go here it Scrolls too fast this is way better for that already it's a small thing but these are the things I want to test CU I want to see what my day-to-day is like in this editor let's say I want to delete everything from line 122 to like 200 something let's say to 205 how easy is it for me to get to exactly 205 that was pretty easy versus in vs code we'll start at 122 and I want to get to exactly 205 and it Scrolls way too fast no matter how far you go and it's a good bit harder I've had a lot of annoyance with that why not scroll down to the line and shift click cuz I don't think that far ahead probably a good call oh look at that they light things up bright green when there are changes in git okay am I crazy or does that icon look like Source control to you cuz this icon looks to me like Source control not like files I might be insane but that looks like a source control icon with the branching how fast does the git update that's a good question too and let's see what happens that was instant that was instant good [ __ ] yeah vs codes is not anywhere near that fast now all these things are staged you can't even see it in vs code commit DM init commit and vs code doesn't update these things in the background in order to see the update I have to go back here and then it will update but I bet some older files oh no it updated everything I'm sure all of you that use VSS code really hard have had the problem where it doesn't see certain things have been commit some things haven't been commit and it just yells at you the whole time didn't do it there I've experienced it a lot I know y'all have too it's really cool that Zed does not seem to do that and is like weirdly immediate I don't love this icon what is this move to a new file I don't love that UI don't know what this does or is for it seems like probably one of their weird AI things but can I see if Zed supports Auto rename tag interesting thought let's first off test the typescript go to definition here's our trpc proxy client let's rename symbol to internal API rename no there's no like confirmation button or something I would assume there' be like a button at the bottom here that says go nuts what is this Mt about why why is this upset about the type definitions oh it's the es lint I think the es lint is out of date but the types script isn't because you can see here I have the type definition but eslint is saying it's an unsafe assignment of an any because eslint didn't get the change that we have a different name for this thing internal API now very interesting very interesting I have saved the changes they've been saved in all the files that I did them in so they also get this sync issue in VSS code I get the issue where I have to reset the typescript server but usually the es lint server catches up es lint being broken separately is new to me is there a reset there's restart language server it looks like while I was doing that this corrected itself interesting it might have been because I hadn't opened this file since the change and it was caching that editor level I can't know any of this for sure the goal here is just to like play with it and see which quirks it does or doesn't have if I should actually commit to using this editor for a bit again let me know in the comments and I'll give it a shot for a little longer other people are saying they often have to reset es lint more than they have to reset the typescript server very interesting someone else pointed out it's cool you have es lint support out of the box I absolutely agree having es L to typescript in all of this without any plugins CU like I don't have any plugins installed on this I don't have anything installed right now like here are my settings there's nothing let's try some other fun things more typescript quirks I should be able to command click hello and get to the trpc function in the server folder and it works dope having that type of deep type inference is essential for any editor that I use so if I'm in some client or like user facing code and I want to quickly do anything like I want to just figure out where this is coming from or like make a change to what it's returning having command click working here is huge and the last time I played with a zed this was not working previously it would bring me to weird places in like my type definitions for trpc itself now it actually goes properly all the way to the place where this is written hopefully it still does this on client components one way to test that it still does good stuff should I actually try typing now cuz thus far I have avoided actually editing in the editor let's see how this feels this is a test to see how typing here feels overall I'm impressed the auto comment continuation is also a nice touch I don't know if you guys saw that it's hard see cuz I don't have my key presses on screen but when I press enter it continues the comment for me that's really nice it's doing some type of Auto formatting here too not quite as much as I would have liked but let's see if I tab this out that looks like it's doing pretty your stuff properly Mark pointed out there was a lot of pop-ups when I was typing here when I wasn't typing it in a comment there was but it seems like when I'm in a comment it chills out but when I'm typing here this is a test typing yeah the um the spam of like it trying to autocomplete [ __ ] is a little annoying because it's so fast that it does it quickly but it just it flashes all over the screen when I'm typing like do you see how annoying that is that would piss me off so much I would just add a debounce to that so when I type a letter you don't prompt me with that until I've waited for at least a few milliseconds that I also find this really annoying ESP when I'm making content because I'll be typing something and just my screen's flashing all over the place and it makes the video super distracting so for me in particular that's kind of a no-o yeah also the dialogue should be smaller people are saying it's pretty big I will say I I'm on a 720p effective screen when I'm doing content so I don't know if it's less bad in other cases but now it's taking up a ton of my screen that said VSS code sucks about this too and I type trpc like it still starts to do things but it's nowhere near as brutal about it the jsts server immediately crashed five times great sign responsive test this is me getting a gut feel of the responsiveness in vs code this is me getting a gut feel of responsiveness in said I'll be honest guys doesn't feel much better just typing like that does that come off in the video does this seem faster because it doesn't feel very different to me curious if that Quirk was still happen in comments what happen here I am adding cool it does not so when I press single quote or double quote double quote it will automatically double up but single quote it won't because a single quote might be a contraction but a single quote here doesn't necessarily know that and it always doubles it up so when I'm doing I'm now m is surrounded even though it's in a comment so kind of annoying that when I'm typing a comment I have to go through and delete a bunch of things it's randomly adding for me I'll be honest I've always been annoyed when you make a tag and it autoc closes it for you I don't want that on single Pern in a comment ever but in general I've never been a big fan of it so I am biased there one of the really interesting things that Z's trying to do different is focus on collaboration most editors have some crappy plugin where you can share an instance and I'll be honest every time I tried it was a Jank experience I've never had a good time using VSS code with two people on different computers and usually I just prefer to screen share and Discord or something I am curious how this works with multiple people working in one thing together first off there's a chat which is actually really nice to have a built-in live chat they have a concept of channels where I can create a channel if anybody has Z let's try it we're going to make a t3g channel it wants my microphone is there a way I can mute that oh there it is it's in the top right corner very interesting to have AV built into the editor also a share screen option so I can share my screen Beyond just the editor so if I want to showcase like what I'm actually working on like I want to showcase what the the browser does in the background while I make changes really cool that it supports that can people join the t3g channel is this public or private how does this work cool I trust you Yash I don't want to call you no I sorry I do not think just clicking your name would call that's uh unintended I am sorry I don't know how to stop calling either there's no way to do that remove contact yeah just on a call yeah the UI for this is a little Jank I do not like that I can accidentally call somebody by clicking on their name like call things should should at least have like a separate button for it there's no rightclick Behavior at all like I'm right clicking on people and doesn't do anything I just don't get this join Channel none of these things appear to be doing anything it still has me calling Yash and I don't know how to to stop that does revoke right access do it no share leave call okay that was dumb on the channel invite members oh I can just make it public and now you have been invited aore there's join Channel and open Channel notes okay the channel notes is this thing in the middle here so we can save like a markdown dock notes hi friends aore are you able to edit those notes is this safe though can you run a terminal command fantastic question oh hi from aore hi aore do you have access to my terminal here let me try can't open my terminal can you see what I typed in it though you have your yours open cool um yeah I'm very curious how much you do and do not have you can't even see it interesting I have mixed feelings on this on one hand it's actually pretty cool to think about your coding environment as a a shared collaborative place can you see that you're on your project you already did Z clab at work it's fun oh interesting I have mixed feelings on this it's a really cool idea to have good collaboration tools baked into your editor it gives you a ton of Opp opportunity to innovate in ways like a plugin simply can't and I like the idea that it's not a plugin for this like the vs code live share plugin despite being somewhat baked in is pretty Jank this despite being early and Jank feels like it has more potential to integrate deep in and I am excited to see where it goes but the ux is rough like the fact that when you click someone's name it starts an audio call with them in my editor is terrifying to me I hate that that's that's not something I can support like ever and I will probably be disabling this feature until there's like a major update I want to better understand what the AI autocomplete experience is like oh I can sign in for co-pilot here cool co-pilot is enabled look at that we got co-pilot working dope pump that even though they have aspirations to do their own AI stuff that co-pilot is already built in and working as I would expect that's dope it's nice that I don't feel the need to run and grab any plugins there are little things that I've been using a lot in vs code recently that I like I go through my extensions obviously having language things like um Astro and such is really nice I love cloak for hiding Secrets Dino is nice to have support for directly they already have es lint built in they have co-pilot built in haven't played with their git stuff I'm not a big G in the IDE person but a lot of other people are so that'll be missing which is notable the things I've been thinking about though obviously my themes I love the PO Manders theme it'd be really nice if they had a way to import VSS code themes because it's like a standard-ish syntax somebody will probably hack that or at least make a converter in the future it seems like it's doing all the prettier stuff for me already so that's cool the two I was thinking of the that I'm going to miss are pretty typescript errors and quick lint JS these two plugins are very good I already have a video for pretty typescript errors the typescript just got so much better if you want to know more about the pretty typescript error plug-in check the video out it required a ton of hacks by the dev to make it work but the results super cool and I rely on it a ton you can see here that it will actually make you this nice printed out formatted error thing instead of the absolute mess that typescript normally gives you super super cool and then quick lint if you're not familiar I haven't made a video about this yet it checks for a bunch of basic JavaScript typescript things like using an equals accidentally in an if statement awaiting something that isn't async little type errors that are pretty common and it's super super fast so you get feedback like immediately which is really cool that like on each character you're getting feedback I've been enjoying quick lint quite a bit and again let me know in the comments if I should do a whole video about quick lint because it is a pretty cool project but in order to care about those things we first need to see how Zed handles when you do something wrong so let's spell post wrong how quickly when I add the T will I no longer have a type error pretty quick and if I have the type error and I hover over oh no it's the super unreadable type errors also if you notice I get different type errors depending on how far in I am because these are all accessing an unsafe any I don't know if vs code is smart enough to not do that but there's only one way to check so have here we get the nasty tyri error but then we get the much better formatted error from the Pretty typescript error plugin but over these further down things now this is all the unsafe any yeah so equally bad there but at least I can use my plugin here which I cannot use in Z in my opinion if Zed's goal is to make something better enough than vs code that we all start switching these types of ux wins are a really big thing if you can do them because if you produce enough of these wow moments for a developer that might not know about these plugins might not know about these other things this can be a huge huge win for building like positive sentiment and getting them to go shill it to their friends and getting me to talk really positively about it in a video all those types of things seeing if there is do they have any plugin system at all I don't think they do not upset with it in any way one more thing we should probably test is auto importing what's the I can import okay we have the create post deleting this component deleting the import for this component let's try mounting it now the flash of that is so annoying and also that all these mdn references come up before my own code like I have to press arrow down how many times to get to my thing and also the width of this changes that's Jank that feels not good that all like this UI shifts around as I try to get to the right thing and that what I'm here for is so low priority I have to type the whole word create and even just type in create it still has credentials container canvas capture media and all these other things that don't start with create because the fuzzy search sucks create all those letters are in order in credentials container it has the letters for create in order but something that starts with create should be first for sure this is [ __ ] these are the little things that like are hard to get right that will be fixed over time but feel Jank right now and if the goal of something like Zed is to offer a meaningful user experience improvement over vs code these things matter way way more so that's a little disappointing if I click it did it Auto Import correctly it did cool so at least the auto importing works but the ranking there was terrible I'm happy I checked that one good one is EnV this is a new project so this won't leak anything but it looks like it would have if I hadn't like been sure that it's good ahead of time is that a that's a no co-pilot icon something I have to rely on is the ability to hide secrets with something like cloak because there's nothing worse than accidentally exposing your secrets on stream if I go to here I can turn on cloak and now you'll see all the secrets are hidden very very useful and I try to turn this on before I stream code so that I never accidentally leak environment variables again these things are small but enough of them add up and one of the things you need in order to win with a challenging new product like this is you need to win sentiment from the people who can sprad spread that and share that sentiment so I as a a creator with reach as dumb as it is that I'm saying you should prioritize my quirks and my needs because most users won't benefit that much from having their secrets autohide it makes me more confident when I use it to make content which then reaches the users you want to potentially have this is the thing I've been talking with a lot of companies about especially when I'm Consulting it's the idea that targeting creators despite their weird needs that might not overlap with your users it's actually a really powerful tool to hit product Market fit earlier and get your product in front of others earlier there's two reasons one we have the reach so if we can use the product we'll reach that audience but two and arguably more important if you can't win us you can't win our fans creators and influencers in these spaces especially nowadays deeply understand the things that their viewers and Their audience want to use and work with we might be pickier but we're also more understanding and we're more willing to have these conversations and hear these things out and I've regularly been surprised at how much value I and other creators can bring to companies by giving feedback on the product and why we would or wouldn't use it we are kind of a representative minority of the space because in order for us to get people to watch our videos we have to understand what they like and what they resonate with and with that deeper understanding we're often positioned to to give better feedback and also we spend more time thinking about what our audience would like so if you can't convince us to use your thing despite us having that mindset where we can think kind of the way all of our different viewers think and all the different groups and if you can't convince us that it's good enough for one of those groups it's going to be really hard to convince them yourself so again I feel bad saying make the things creators want but if your target audience is the people who watch those creators making them happy can help a ton I will say I'm impressed especially when you consider that they don't get to lean on much existing work here like they have treesitter in fact the treesitter devs are some of the core team for Zed they have the typescript language server running in the background and allowing them to get all the data they need here but they are missing a lot of the pieces that exist because of the size of the existing VSS code and JavaScript ecosystem like another thing people just brought up is the Tailwind auto complete oh wow looks like they hardcoded the Tailwind auto complete in it's PT this I don't love like weird things get mixed into the autocomplete but at least that works does it have the hover to see the actual CSS that applies it does not interesting and does the prettier organizer organize things correctly it does not okay so this is again like because they can't lean on the existing tools they have to build their own versions of it so we do get a lot of the Tailwind autocomplete help here which is really nice like I can Tailwind like group or Tailwind like lgp whatever and it's smart enough to know what that is but it doesn't let me hover over to see what these things are versus in VSS code I hover over one of these and tells me the exact class there another thing it doesn't seem to support that I push really hard is the auto sorting prettier plugin for tailin which makes your tailin code way more readable because everything's in the same order I intentionally put this padding too far forward because now when I save it's going to get moved to the right spot which is in this Chunk in either the middle or the end depending on which classes you have that has all the padding behaviors I've learned this order it's really good the prettier Auto sort Tailwind plugin is dope and I genuinely think everyone should be using it if they're using Tailwind so not having that sucks because they didn't Implement prettier bindings they implemented a bunch of prettier functionality into their editor they didn't implement the Tailwind plugin they implemented a bunch of Tailwind functionality into the editor this is also why open sourcing is so important because if they didn't open source building and maintaining all of these things becomes really really difficult really really quickly and I'm hopeful that the choice to open source will make it more likely the community supports these things going forward that said if the Tailwind stuff is written rust I'm curious to see how that goes we can check the source code quick though interesting they have the tail and prettier plug-in package it should work then although if you think about it it's pretty wild to see tailwind and prettier in the source code of Zed especially when you compare to like the vs code GitHub if we search in here for Tailwind nothing search in here for pretty a they might use it but it's not part of vs code itself because these are all plugins that are external extensions whereas with zed these are all built-in features and rust I don't necessarily love this but open sourcing is a huge step in making future extensions that are more usable also how hilarious is it that Tailwinds considered a language the point stands having to support things that deeply in your editor is a scary thought and the amount of work that the poor Zed team has had to do to create all of these bindings is a little terrifying oh no oh no I see what they're doing since Tailwind is a subset language not a proper Lang language which obviously Tailwind is not a programming language in order to get their auto complete in their adapter working in all the other places you might use Tailwind they had to manually bind the Tailwind parser to every language you might use Tailwind with including we not limited to CSS Elixir heeks hex I've no idea what heex is TSX JavaScript HTML Erb spelt PHP and more referen coming up there but yeah the fact that they have to bind Tailwind hardcoded to every single language for it to work is incredibly not extensible and again with like not having plugin support for other things like Tailwind to exist or for Tailwind changes to happen or God forbid Tailwind version 4 has different classes than Tailwind version 3 you're [ __ ] the fact that these language parsers have to have such weird additional assignments made for it to work is scary also like the first line in the language in nit is an Elixir settings register so Elixir has to do some special things and they always run this code even if you're not using Elixir so these types of hacks are necessary when you don't have a plugin system and they're a little scary that said they did just open source this code and I'm not here to just [ __ ] on people's code like this isn't bad code it's scary to maintain as an open source project and that's a thing we should think about and be honest about they do have a plugins directory interesting for child and children if okay path child path config read language config if it matches then they register it enter interesting yeah and they're registering it through a wasm layer too that means they can safely run rust code in like a virtualization layer and also they can run other languages including JavaScript and typescript this is very interesting how this is architected I'm even more excited about reading through how that rewrite worked so again let me know in the comments if I should make a video about the whole rewrite the file for all the language support including loading plugins is under 300 lines of code that's not too bad and enough you pointed out that GPI is cool that I'll quickly touch on it it is actually really interesting the goal of GPI is to do a GPU accelerated UI framework written in Rust so that you have rust code that runs native UI there hasn't really been anything like this before at least that I know of they've stated a lot of their goals here and actually really surprised the quality of what they've written here they point out there three different registers that they've created depending on the way you want to build this UI interesting this is Swift UI I know most of y'all aren't Swift UI users but this is Swift UI this is the Swift UI sytax look familiar yeah that is fascinating to me I haven't talked much about Swift UI and I have a lot of opinions but I think they they took the right lessons from react and it is interesting to see other things doing it I am very curious about the decision to use div here as the example is Zed using a web container that's rendering divs or are they rendering native UI wasum is not a UI layer it has like if this is running in a browser shell this is would be wum doesn't I don't care about how where it's running I care about what it's rendering to does this render to some type of extension of a canvas or a dawn or is this making native UI with like GPU calls cuz they pointed out that it's GPU accelerated a GPU accelerated UI framework for rust create a new window with app context open window and register your first view there is nowhere near enough info here seems like it's running native I'm very confused by the choice of using a div in their example because if you're deep enough in web that you don't know this divs are a web concept even react native doesn't have a div like if you write react native code you cannot render a div in it you have to render a react native view or text element leveraging rust in the GPU to render user interface at 12 FPS they're calling out my concern if like divs are slow because you're doing the web layer good old Evan Wallace code if you don't know Evan Wallace he also created es build this dude is like the JavaScript and JavaScript accessories performance wizard yall remember in my recent video where I said game devs don't appreciate the web and US finding new ways to render and render because they're still trying to get text to render and a bunch of people in the comments were like you don't know anything about Native devs and like performant Dev if you think we don't know how to R text or you think that's hard to do here's a five page section on why it's not that easy to render text you stupid [ __ ] I'm sorry but like if you're building native stuff and you're trying to build native stuff for performance reasons you do have to care about how text renders and as you see here it is not easy to do they also cited the Pathfinder crate which seems to be the existing rust UI rasterization layer that they didn't think was good enough for their needs fascinating this is proof they're actually doing native code code they're not doing things in the browser which makes me really confused about the choice to have like div and flex all in their example because div and flex are both very Web Concepts as well as justify Center item Center all these things are very Webby if you have the opportunity to build something new from scratch I'm a little confused why you'd bring the web Primitives somebody said they just picked the name div instead of View kind of but they also picked Flex they also picked justify Center and item Center they're taking a lot of the way we do things in web which is very interesting and not necessary react native took very little from web they took a bit but not a lot and even things like Flex they they tried to take but they they built them differently like it's a silly thing but a really interesting example of how react native differs from react for web by default react web Flex boxes are horizontal and you have to specify B vertical react native Flex boxes are default vertical you have to specify horizontal it's a small detail but these things add up as you swap between platforms a lot I'm interested in why they chose to go the web Direction here there's a lot going on in this project and I'm really curious to see where it goes from the Native layer and rust for the GPU stuff to everything they're doing with collab and AI there's an interesting thing going on here and I'm really excited that it's not just happening but it's now open source I don't see myself leaving vs code anytime soon but I am excited for a future where there's more competition and more Innovation happening within our editors what about you do you still use vs code have you made the switch over to Vim or are you one of the few remaining Sublime Text holdouts that just won't move yet I'd love to hear what you're using if you want to see me make vs code even worse I have a great video in the corner here where I let chat decide what I would do to my vs code and I promise you it's terrible see you guys in the next one appreciate you all a ton peace NS




## This VS Code theme is threatening people_ - 20241229
so I'm supposed to be avoiding drama right now I'm in the middle of what I'm calling my positivity Arc where I'm trying to focus in on things that I'm more excited about and ignore the things I'm not but sometimes a disaster happens and I think it's important to cover it I actually don't know if I'm going to bother posting this video yet so uh if you see it I'm sorry but yeah this is this is a bit of a mess quick tldr before we go in Matia the creator of the material theme you know the color theme for your ID vs code has called out Zed for openly promoting the violation of Open Source licenses normally I'm the defender of Open Source normally I'm the one who comes in and says hey this little open source Project's getting screwed over not this time this is a disgusting attempt at using the Goodwill you've built on an old open- source project to force others to do your bidding and try to squeeze money out of it and I'm gonna explain why in just a second first we need to hear from today's sponsor foul if you want to integrate AI for Generation into your app you probably want foul I'm not just saying that cuz they're paying me I'm saying it because it's what I've been using for all my AI gen stuff here's a meme I just went like super viral with that I generated using fouls recraft model in case you were curious how this all works they have a ton of different models you can explore in their playground but that's not the fun part because we're devs we don't want to click around in UI so if I go back here to this prompt that I did you can see how much it costs you can see how many times I can run it for a dollar I do love this little UI it's fast I'll prove it by running it and continuing to eat into the actual time for this ad because it's going to take less than five seconds the bottles fly there you are another beautiful ad but what we're here for is the API because they have an API tab that includes everything you need to integrate this pretty much anywhere you can see what it looks like for curl you can also use their npm package that is fully typ safe by the way in order to query things putting formatted inputs with prompts and whatever other settings for all the different things you might want to do be it background removal image generation text to image image to video whatever else they got you covered they're like hugging face but for real developers and I love what they've built check them out today at soy dev. linkou or just go straight to them at foul. okay so what's actually going on here first and foremost you might have noticed I'm on archive. ph I had a feeling this blog post was going to disappear and I was right it did you know that I did this because of a GitHub repo that we'll show in just a minute I got more involved in this than I had planned to the call out here is that apparently Zed you know the other growing IDE the one that isn't a vs code Fork the one that's like a full-on from scratch solution they added the material theme because someone else contributed it and they merged it and now it's one of the official plugins Matia was not very very happy about that Matia opened this issue and the Z Industries get hubo for extensions and uh it's a bit of a mess he calls out that the theme that Cod xter the contributor who put it in Zed made is intentionally infringing upon the license of the original material theme if we go to the material themes license quick if we hop here vssc material theme go to license you might notice this doesn't look anything like licenses you've seen before it's because he wrote it himself self and this license has been changed a lot in the last few days no since November 8th has changed 1 2 three four times yeah remember that date November 8th because you might also notice November 8th when this was opened catching on if we scroll a bit further you'll see the this oh God this is I still can't believe his thing here is to say like Zed is destroying open source it's absurd if I haven't already said this which you by the way before I forget no briting no harassment do not go after this dude it will not benefit anyone in any way I just calling this out because it is egregious misunderstandings of Open Source and a level of entitlement that I've never seen before and I want us as a community to understand when these things happen so that we don't act dumb anyways this was where it all started this was 3 weeks ago still that November 8th date this was between two of those license changes by the way we give you one week to unpublish the extension from The Zed extension Marketplace in the meanwhile we contacted the Zed team and GitHub to ask them to force removal thank you one more thing here the theme is not open source and it's a pay extension you might be starting to catch on to what happened here this is an issue I found from August 10th because he hasn't purged the discussions yet since we moved to close source and are planning to make our extension behind payment we are here to ask your feedback about what would be a good price to use material theme and material theme icons yeah there's a couple calls in here that I actually hit him up about to get more info on and I have concluded at this point that literally all of them are the big thing here there haven't been any contributions to our project in 9 years so we feel like it's time for a change there is no Wei it's just him he booted the other Dev there's no contributions because he was an to everybody who tried to file a PR moving the goal post over and over again until they all gave up and said can you just take over this PR and then he either would copy their code and not give them credit or just not it's hard to prove this by the way because of the most fun thing which is that he nuked the GitHub repo there is nothing here anymore he is trying to make it look like this project wasn't open source and didn't have certain licenses that it had in the past all of the git history in particular is gone there's an easy way to figure that out by the way if you go to Forks you can find this Fork that someone happened to make 7 months ago that has all3 commits and you'll see in here that there's a license that hasn't been changed for 6 years which means this was the license and it's aache so the theme that he is so messy about the thing he is so angry about was Apache licensed and when the repo that he is complaining about was created it was still under the Apache license since then he has changed the license hidden the fact that it was previously under a different license and is now trying to threaten people saying that they're destroying open source when he's literally going out of his way to destroy open source his own open source work and the work that I don't know how many others contributed to cuz he's hidden it from us that work has been pulled away from the open source world he literally lit open source work on fire and is now blaming others for it it's unbelievable I've never seen anything like this and I want to give credit where it's due Cod xter who made the original theme Here handled this incredibly well I'll respond to the alleged license violation in the next comment before we go there I'd like to thank you for the work you did on the material theme extensions for Sublime Text and Bs code I came across them years ago and tried them out I liked them so much that when I wanted to create a new theme for the notepad++ editor I took inspiration from the color scheme of your extensions as mentioned in the readme file for the theme that was back in 2018 the theme I created is still available here and your color scheme had a significant influence on how it turned out memory serves the color scheme of your theme used to be available on your GitHub repo back in those days a lot of changed since then in fact the get AO for material theme extension for Sublime Text no longer exists and the one for the visual Studio code extension has been overhauled overhauled is an interesting word for nuking but uh yeah codex are phenomenal coms here first off thanking him for his work and calling out how inspired he was and right underneath calling out how absur this is the exact version of the material theme free extension in question is 34.75 which was the latest version available on the VSS code Marketplace at the time of creating the extension and it had a different license this one was still one of his weird custom licenses that isn't like a real thing the material license theme and agreement but it did not have the restrictions around republishing here because turns out if you're writing your own license you're probably not writing it correctly which is why he revised it eight times in the same day what the hell and I've see people in chat already saying some questionable things specifically that um he admitted that he took inspiration which is bad in potential legal battle it doesn't matter if the license of the thing he he was inspired by was Apache License one of the most open licenses available you're using the same name same colors same color combination same variant names even the same preview screenshots that's not taking inspiration the only thing here you could possibly make the argument for is the preview screenshots and even then it's as was called out by not Peter from The Zed team a preserved Fork of your repository contains the Apache 2 license as recently as August 2024 Cod exter in The Zed material theme is also available under the same Apache 2 license the license contains the following provision Grant of copyright license subject to the terms and conditions of this license each contributor hereby grants to you a Perpetual worldwide non-exclusive no charge royalty-free irrevocable copyright license to reproduce prepare derivative works of publicly display publicly perform sulic and distribute the work and such derivative Works in Source or object form this is a you can do whatever the you want Clause that existed on this code base for 9 years that he is trying to hide what the it's important to note the word irrevocable here because despite this dev's to revoke it yeah apparently he lied about no contributors because if we go to an archive link of the repo before he nuked it there were 93 contributors wild it's almost like everything this dude does is lie it's almost like he's incapable of telling the truth we can even see all of his Force pushes here nuking everything in the history kind of hilarious see all these Force pushes and all of these license changes this is him pretending that it wasn't an open source project absolute absurdity people seem to forget the internet is forever and open source isn't the thing you can just undo if you deprecate the open source version and you make your own separate closed Source version that's fine and cool but you have to be okay with the fact that some people are going to keep using the old open source version maybe even keep maintaining it maybe even build something better than what you built this reply from Peter is I was saying before is great because you can't just revoke this it seems like there was a particular salty thing that the original Dev had where uh is it called out in here he had tried to make his own paid material theme for Zed and they didn't merge his instead merge this open- Source one that code xter made and he's just flipping a about it and I don't take well to these things I'll prove how not well I take to these things because I have my own version now I forked dragma fork and I will Che the best of my ability keep this alive this is the material theme but I won't Sue Edition this is my Fork of material theme from the last time as far as I can find that it was actually open source and that it was actually Apache licensed and now you can install this version or Fork this version or use it for whatever you want and I promise I will not sue you for your use of this project I might still sue you for other things in the future if you're an but at the very least you won't be sued for using this which is more than can be promised with the other version of the them so if you do use the material theme which admittedly I don't you can go to install the extension search material theme make sure you add t3.1 Sue version I can understand why people might question me doing this like why am I as a YouTuber the person who is forking this theme that I don't even use the reason is because I'm a YouTuber not because I'm going to get a bunch of attention for doing this or it's going to make good content I don't even know if I'm going to publish this video yet the reason that I should be the one doing it is I already have a legal team I already have a public presence and there is no way in which he can do his against me I'd love to challenge him to Matia if you're going to waste somebody's time waste mine don't waste actual open source devs who are dedicating their lives to making the ecosystem better go after the the big boys not after the people who are smaller than you which is saying a lot because it's hard to be smaller than a petty Dev who made a theme nine years ago with a name that isn't even his and is trying to squeeze cash out of it that's pretty low it is what it is you did this to your yourself bud and by the way if you're curious how big uh how big the maintenance burden is on this project uh it's 1,600 lines of typescript this is not a project that takes a lot of effort to build and maintain I don't know what delusional World he's in where he needs to make money to keep this theme alive it's absurdity material is not even his trademark it's the material UI standard from Google that he has admittedly called himself inspired by and now is a color theme based on Google stuff and is going after people for trade Mark of the name material theme oh even better apparently he doesn't even know how to maintain the typescript part so he's looking for others to help because the other Dev that worked with him quit because he's insane at this point I just think this dude doesn't understand open source if you did something that went surprisingly well don't squeeze it until it's dead find other things you can do if you found massive success once you can find it again it's just incredibly rare you'll find it from that first thing you did for myself when I have a YouTube video that blows up the instinct is always make a similar video cover the topic again do a part two you have to fight that instinct it doesn't work if I have a video that blows up I try to avoid the topic for at least 10 videos to give it the space to breathe and to keep exploring and trying out new things you got to do something different you can't take this 1600 line of code project that you've barely maintained for 9 years and try to squeeze its users for money it makes no sense at all just because your whole is dedicated to this theme doesn't mean its users are that dedicated to and you have to understand the difference there just because you've surrounded yourself entirely with this theme doesn't mean anyone else thinks about it that way and you have to be able to take the step back recognize reality and do something actually valuable not whatever the hell you're doing here man I got nothing else this one pissed me off let me know what you guys think and until next time I promise I won't see you




## This Video Is NOT Endorsed By The Rust Foundation - 20230409
so I guess Russ doesn't understand the internet after all because if I use their logo or their name in this video and I'm not careful I could get sued for it Joy let's talk a little bit about the new trademark policy the rust team just put out for comment because uh I have a lot of comments so if you don't know I make a lot of content I am normally wearing a nice fancy dress shirt talking about typescript stuff which I'm doing for a while learning hoodie right now in solidarity with the rust Community I know y'all do things a little bit different High Prime anyways so the rest team put out this uh trademark policy form Google Docs as well as the actual new trademark policy and they are very strict now about when you can and can't use the rust logo and name they said you can still use Ferris which I think is a little crab guy so I'll probably use him in the thumbnail because that's allowed but the actual logo and the word rust are now only allowed to be used if you are explicitly approved or you are showing support as long as you abide by the requirements and make it explicitly clear that you were not part of the rust team and again even for Education material so if I was making a video teaching you rust I'd have to be very careful to make sure it's explicit that I am not part of the rust project or Foundation which is a little bit scary they break it down in the Q a here further but generally I I don't think this is necessary the goal here seems to be to specifically clamp down on misuse of the rust trademark and make it clearer what is and isn't official rust material but as far as I knew that wasn't a problem and please correct me if I'm wrong this is strange I've never seen this happen in other communities and I'm surprised it's happening here I know primagen's a little bit outraged I saw him posting about that yeah this one goes particularly far in silly ways like you have to be careful when you use it the word rust in something like a crate name which is still like crates are their packages it'd be like not including JS or not including node in the name of the packages you make for npm like that being disallowed would be very strange and I I get why people are concerned about this there's even some jokes in here about the game rust which I saw that were pretty funny but uh yeah I sincerely hope the community takes time to comment on this and I do trust that a lot of creators like primagen and teas and people that are deeper on that side of things will raise their concerns and hopefully this policy will not be enacted in its current form because the language here is scary to the point where I don't know if I can put their logo on my thumbnails when I'm doing language comparisons and such without explicitly saying this video is not endorsed by the rust Foundation which by the way if it wasn't clear this video is not endorsed by the rust Foundation I don't know why we're here I don't know how this happened but I am going to reference a video I filmed the past uh don't learn rust not saying this for any particular reason just because it's the last time I talked about rust in a video so if you want to hear more rough stuff check that one out thank you as always peace nerds




## This awesome CSS feature is blocked by drama (Google and Apple can't agree) - 20241007
centering things in CSS has been a meme forever what if you explicitly don't want to Center what if grid and flexbox don't solve your problem what if you want things to be shifted a little bit you know the classic lots of images skewed around your screen thing that everybody loves to showcase on their photo blogs and whatnot that sucks to make I know that because I have tried many a time and given up most of them if you find a library that works awesome I'm really happy for you we're not here to talk about a library today we're going to talk about a new web standard the reason isn't because of this article from April it's because of this article today the first public working draft of CSS grid level 3 which is the masonry layout there is drama there is crazy ideas here there is a really cool potential for the browser to evolve but there's also a lot of infighting and we're going to do our best to cover all of it so first we're going to go through the initial proposal then we're going to go through Google's response then we're going to go through what changed today so if you want to see just how cool this is make sure you stick through this quick word from our sponsor I'll be honest today's sponsor kind of scared me at first I know how to optimize a website and a text stack but optimizing for search engines terrifies me I know I'm not alone Engineers like us tend to fear anything that even smells like marketing that's why I'm so surprised by ATS these guys get digital marketing and they get Engineers too their dashboard is so good it makes me feel like an expert their audit tool feels like magic it will literally diff versions of your pages for you and their AI keyword tool is actually useful we haven't gotten to the best part their content their YouTube channel is bigger than mine they have hours upon hours of free courses covering everything you need to know about marketing SEO and more real talk I'm about to go spend hours watching these myself and I'm so excited to do it if you've been putting off marketing as long as I have Here's your sign it's time to go learn SEO huge shout out to HRS for sponsoring today's video help us invent CSS grid level 3 AKA The Masonry layout if you making websites for long enough you know how frustrated it was to lay out a web page with CSS floats managing sizes and placement was tedious and timec consuming being creative was often impossible CSS grid greatly eased that pain with grid level 1 in 2017 and now with grid level two AKA subgrid but even without the powerful CSS of today not every layout imagined by designers is possible in fact when CSS grid shipped one of the most commonly asked questions was how do I write CSS to accomplish a masonry layout sadly for the last seven years the answer has been you can't what is a masonry layout I hinted at it a bit but it's the pattern seen in the following image when content packs together like brick or stone like you'd see on a wall that's where it gets the name masonry it's also frequently called the waterfall layout it's a metaphor for how content flows down the page like a waterfall like this it's a really cool layout I wanted this for pick thing and it sucked so I didn't do it this layout is popular because it solves a few problems that other layouts do not allows for content of different aspect ratios and avoids the need to crop or truncate content in order to turn everything into uniform rectangles it also distributes the content across the page instead of flowing down each column one by one this follows the natural reading order as you scroll the page and it lets the website lazy load additional content at the bottom without moving existing content around also really huge this layout creates uniformly sized columns without any rows it's quite possible that because this layout has required JavaScript anything more creative or complex has been too hard to pull off we've been left with the expectation that masonry layouts should only ever be a simple pattern with uniformly sized columns let's see what's possible if we build it into CSS instead inventing masonry a mechanism in CSS for the masonry layout was first proposed by mazilla in January of 2020 as an extension of CSS grid and it was implemented as an experiment behind a flag in the Firefox nightly in 2022 Apple started implementing this CSS grid level 3 proposal in the Safari technology preview where it's currently on by default we've been helping to move the web standard along to reach maturity so an important detail here they are treating masonry as a type of CSS grid so CSS grid has the standard grid where you have a single fixed format they have sub grid where you can be more Dynamic with given like parts of the grid and give them their own Dynamic behaviors it's like a nested version so to speak and then grid level three is the masonry version where you can go within the columns do a lot of these things and potentially Rose to I haven't seen what the proposal actually says yet but that's the the mindset it's also of note that this is on the webkit blog by Jen Simmons who's one of the leads on Safari at Apple so there's Firefox they have their own opinions they wrote the initial proposal they Safari and webkit which we're reading the opinions from now and then there's Google who differs who will be getting the thoughts for momentarily after and that's where the drama all lives so make sure you stick through for that there are big questions still being asked about how CSS should handle Mason re style layouts some people remain skeptical that this capability should be part of CSS grid and they instead want it to be its own separate display type so instead of it being part of grid it would be display colon masonry others are questioning whether or not this kind of layout is needed for the web at all they aren't sure that well websites will use it I mean I know pick things not very well known but I like to think I am and I will use it just please give it to me with such fundamental disagreements at Play No browsers can ship we must first come to consensus in the CSS working group this is where we need your help we'd like real world web designers and developers to weigh into the discussion and express what it is that you want your input really can make a difference here this article will walk through how the CSS grid level three proposal works and how you can use it new capabilities we'll show you why we believe this feature should be part of CSS grid and explain why the alternative would be if the CSS working group creates a display masonry instead and then we'll ask you to join the debate to help us move forward and also I will be reading the alternative approaches from others as well and uh yes Gabriel and for those who are wondering CSS grid level two is subgrid four demos to show why we at Apple believe this capability should be part of CSS grid we created four demonstrations if you'd like you can try them out yourself at web kit.org deemos grid3 view these Demos in a browser that supports grid level 3 like the Safari technology preview or Firefox after you turn on the feature flag uh how do I install the technology preview for Safari how hard is it to do this that was really hard to do thank you Apple for doing this one thing right you Apple for doing this thing wrong why did they make two versions of Mac OS that are that begin with an S and end with an a directly after other like Sonoma to seoa I don't even have dyslexia and that sucks come on Safari installations aren't that hard I know you're used to coming with the system and not being an actual app that has to live in userland but do your best Safari real talk though isn't it crazy that in order to update things like apple music or Safari you have to get an operating system update because they're baked into the OS cool demos of masonry waterfall layouts and CSS grid here's a photos one it looks really good I want this so badly so we have display grid grid template columns we repeat autofill we set minmax sizes for it and then we have the template rows which are set to be masonry and then a gap as well every fifth column is wider with wide images are wider that's actually cool an image can overflow with this proposal if the figure has dot wide then the grid columns will span to that's really cool actually the one weird thing is like the order of things like six then seven then eight CU it just it shoves them wherever which makes it feel not very gritty yeah like 1 2 3 4 5 6 7 8 9 10 11 12 like that's unintuitive what goes where here for sure but very very cool here still yeah so I might have missed read this we have the repeat where we autofill these two Min Maxes but that's one part and then at the and we have one last min max 8 so that it can end with a small column so it will fill with small than large over and over again till it runs out of space and we get one last small column at the end weird syntax but it mostly makes sense very very very interesting let's look at the other examples Mega menu oh I spent so much time on one of these  menus like a week ago not a week ago it's like a month or two ago I hate these menus so much I didn't even think of these as masonry oh oh this is this is the the golden youth okay I'm coming around if Google's alternative doesn't solve this problem as well I I am on Safari side oh oh boy I want this so badly so bad you guys have no idea how much pain this would solve me and and for the viewers I'm going to just show you guys chat quick dude wow masonry me I want yep like GG I want this so badly you have no idea oh man I did not just say sit here and Dro let's look at the newspaper example okay that's nice having like the two blog posts and like the shifting like that being able to do SUB sizes that are different various size of content you can do the classic layout too multicolumn so the problem with standard multicolumn is now it's like this contents being spilled up to the top which sucks but with masonry that never happens which is really really nice you're winning me over Apple I'm seeing the value in other places like this this is cool this is cool creating a classic masonry or waterfall layout first let's take a look at how to build a classic waterfall layout gallery of photos each image is wrapped with a figure element and the figures are direct Children of the main element so we have all these children that are wrapped in a figure which is child of main we start by applying display grid to the main element to create the grid container then we can Define grid template columns however we would like in this case let's use grid template columns repeat autofill minmax 141 so it uses it makes all of these 14 REM columns for all the available space this results in uniformly sized columns typical of the classic masonry or waterfall layout the Gap one REM rule creates a one R wide space between the items both between the columns and horizontally between the items being able to use gap for this is huge like making this layout and making the standard without Gap already existing would have been stupid it's a double down why this Would Suck Without Gap if each element had to determine its padding but you didn't know where it was going to be if it was going to be at the top or at the bottom if it would have things next to it or not not having Gap would make the this  miserable but now that we have Gap that that makes this that much more cool to adopt and use so we have the column rule we just mentioned we have the Gap one REM and then the rows is where you specify masonry it's likely the name of this value will change before it ships in the browser more on that at the end of the article but for now masonry is what works the masonry rule tells the browser please do not create rows instead pack the content into a masonry or waterfall like pattern and with just those four lines of CSS you get this really cool actually in Grid's full power to Define columns now let's dive into the advantages of combining the full power of CSS grid with the masonry waterfall packing CSS grid provides many options for defining our columns I think this word just was supposed to be there using units to create a symmetrical grid is only one option of many how do these possibilities be used for a masonry waterfall style layout let's try mixing fixed size Columns of flexible ones the first two are the first and last are fixed size and the rest are flexible changing in size and number so the 14 CH repeat autofill minmax 28 ch1 fraction 14 interesting I do like being able to use the existing CSS options but some of those are really chaotic and what I think of basry like I think of it being used simply I could be convinced otherwise especially with the footer example they had but I have a lot to think about these options in CSS grid allow you to create something much more Dynamic and flexible in interesting ways you can create two stages of flexibility because the FR unit sized columns grow and shrink in a separate stage from the mid Max sized columns so you can have fractions that expand based on how much space is available but then the ones that are set mid Max change separately Max content and Min content values let you size The Columns based on the content size rather than sizing the content based on the column size the units can easily be used to create compound or asymmetrical grids where the columns are different sizes the options are endless by adding the ability to pack content into a masonry or waterfall pattern to CSS grid we maintain the full power of grid for defining our columns in whichever manners we like we sh saw that with the demo earlier which is really cool one one one fraction one fraction two fraction three fractions five fractions eight a little chaotic but one width one double the width triple the width five times the width eight times the width it's cool just feels niche in a more practical example let's use the max content when defining Yep this is the one I was geeking out over this is such an actual useful thing that if any proposals don't allow this I don't want them anymore this this is is my actual golden use case I didn't even think of this before but so good Mega menus have been hard to code especially across multiple screen sizes it is annoying how hard it is to do this right with CSS grid level three it becomes incredibly easy a few lines of code create a dynamic layout which adds and removes columns one at a time as space allows without any Media or container queries and with wrapping prevention many these examples could never be created with masonry as a separate display type discussion of display masonry is to only allow symmetrical columns which are columns that are the same size as each other much like multicolumn layouts due today interesting if that is actually the case I might change my mind on my current stance we will see as we go leveraging Grid's ability to let content span columns grid also allows us to span items across multiple columns like we saw here where certain images are two columns instead of one very cool but how useful what if in say we put a wider class on specifically on images that have a wider aspect ratio to make those images span multiple columns we could also change the style a bit make the corner square instead of round and reduce the grid Gap to zero gives us a different way to pack photos of different aspect ratios together when a user clicks our Tops on a photo it grows to span multiple columns the browser automatically animates the transition it's a little Jank I see what their goal is here but I don't love that column nerve versus modular grids what happens when we keep experimenting let's let go of thinking about masonry and start imagining grid level three purely is an expansion of Grid at its core grid level 3 provides mechanisms for turning off rows and it lets us create a columnar grid a grid that is made up of columns Alone by contrast a modular grid is a grid where everything is lined up in both columns and rows this became popular in the 20th century during the dominance of modernism in graphic design grid level one is really good at making modular grids that's what it wants to do in fact float based layouts also encourage the creation of modular grids on the web since you had to make all of your content the same height to get your floats to clear images need to be the same aspect ratio text has to be the same length this is often accomplished on the back end with policies enforced by the content management system or on the front end by CSS that truncates or crops that content it's incredibly common for websites to do the Su variation of this sort of modular grid laid out here with CSS grid level one very common it's a simple example it looks bare with no teaser images yeah what if the layout itself could also provide some vitality and interest interesting a classic masonry or layout waterfall various lengths of text looks like this which is already more engaging since a user can read more about each article that is nice having it to have a fixed preview length very nice it's too visually repetitive but if you use the new grid stuff where different things can be different sizes that's kind of cool now this otherwise visually boring text starts to look fairly Lively if we were to add images to each of the Articles it'd be even more Dynamic if we mix images and text together can look pretty cool but if you use that with the masonry stuff yeah that looks really cool by adding this new functionality to CSS grid level three we get the benefit of existing developer tools you can use the grid inspector in Safari today to try out the grid template row masonry it is cool that you have all the existing grid tools to see how these things are being laid out like that very interesting the masonry is own display type and not part of CIS grid it will not get the benefit of subgrid fair you can use the power of CIS grid level one to explicitly place the header into the last two columns moving it to the top right corner of the page with grid columns -31 so that's this guy so you have the the header stuffed into that corner and I'm assuming it shifts around as you change the page size yeah that is cool that you can specify a specific place that that one has to be at and I would be curious to see how the Mason resolution handles that if it does with just a few lines of code we're using the full power of grid levels 1 2 and 3 to create flexible columns that change in numbers to accommodate the available size without using any media queries or container queries that part is really cool not manually specifying at this size do this at this size do that chaos so what where is the debate here the debate that has been blocking the CSS working group from moving forward is the following our hope is that web designers and developers will chime in post social media write blog posts maybe make a YouTube video but who would do that who watches YouTube videos about CSS come on who would ever do that some people including those of us at Apple like having masonry be part of CSS grid we believe this functionality is a mechanism to expand CSS grid allowing it to finally create column or grids as well as modular grids we want this functionality to be mixed with all the other features of grid including the powerful options for defining a column track spanning explicit placement and subgrid other people instead believe masonry should be its own separate display type at first glance defining masonry with a new display type might make a lot of sense you get tidy separation between layout types block inline Flex box grid and Masonry the CSS working group has not figured out the Syntax for a separate display type here but perhaps it would be patterned after multicolumn layouts so display columns or perhaps a syntax would be patterned after grid but with significant limitations where only one repeating withd is allowed interesting either way it's clear that Advocates of this option want masonry to be limited to a symmetrical grid where all of the columns are the same size as each other none of the rest of CSS grid track sizing capabilities would be allowed interesting assertion I'm excited to see the other opinion making masonry a simple and separate layout type would avoid the work necessary to keep grid and masonry working together in combination both now and in the long term doing this would simplify the layout model making it easier to implement in browsers reduce the potential for performance traps and allow for the feature sets of Greater masonry to diverge conversely we believe the effort needed to add this capability to CSS grid is worth the many benefits to be had the grid level three spec has already been written and it's implemented in two browser engines already and yes while making CSS grid more complex will make it order to extend in the future we do believe there's an advantage to having these two types of grid layouts intertwined this way the CSS working group will always Define all new additions for both modular and columnar grids there won't be something added to display grid that would be left out of display masonry or vice versa for example many developers want CSS grid level 4 to provide mechanisms for styling grid areas and grid lines perhaps a way to add a background color to a track or create a rule line in a gap it'd be great to ensure that it works for both modular and Coler grids from day one again with like the the Gap thing I was talking about before if Gap was added to flex boox and grid and then added differently to masonry if not at all if these came out in different order that could have sucked and having all of those features synchronized is a huge benefit of them being the same feature but it is also confusing to understand the other argument made for display masonry is that the masonry is conceptually a fundamentally different layout type from grid that is the one I was feeling and that I agree with a masonry layout and a CSS grid feel fundamentally different the way they showcase it is changing my mind more and more but I I still feels wrong it's kind of like when I call the runtime for workers The Edge runtime even if it's not running on edge it feels wrong but it's also right so just get over it so I'm trying to decide like do I need to just get over this or not I'm excited to read Google's takes as apple is saying here they often describe CSS grid as inherently being about lining things up in two dimensions and since masonry only lines things up in one dimension it's not a grid some have advocated that masonry is more like a flex box since both line things up in One Direction yeah makes sense so what is a grid yeah just depends on what you actually think grid means it's a weird question grids are an incredibly important aspect of graphic design they're used to line up text images and other content in regular patterns they help readability and usability by making things predictable you can trace their usage through thousands of years of History kind of crazy to have a masonry layout in the like 14 1400s here CSS is finally catching up to 1498 woo wasn't until the 20th century that European and American modernists started proposing the idea that proper graphic design grids should line content up in both directions in rows as well as columns Gabriel thinks it's dumb that I see Mason reies and grids as different enjoy the spice you might make it in the vid anyways even today there's a lot of debate about which type of grid is the best grid or the only legitimate grid many designers claim a 12 column grid is the only correct way to design a web page thankfully bootstrap people aren't that loud anymore God that was awful remember when we had like three different sizes for desktop tablet and phone and pretended that they were always the same exact aspect ratio at times designers have gotten quite religious about their idea of what a proper grid actually looks like Mark Bolton argued for years that symmetrical column grids are incredibly formulaic and boring he proposed the use of asymmetrical compound grids in designed for the web today luckily CSS grid level one makes it incredibly easy to create both asymmetrical grids and and compound grids giving designers the freedom to create what they want but only if they also want all the grids to be a modular grid both modular and Coler grids are in fact grids and CSS grid deserves the ability to also create colum or grids this is chaos of like different grid Styles how old is this book it looks ancient I dig it we believe there's an opportunity for CSS to enable a rich history of design grids to come to the web and we you would be greatly disappointed to see new masonry features limited to only allowing symmetrical column or grids so they have this set of questions should this be part of CSS grid do we want capabilities to define a column or grid with CSS grid do use sub grid spanning explicit placement and all of the many options for track sizing do you only want the ability to define a classic masonry layout with equal siiz columns will you use this what might you create with it do you have links to demos you've made and are there things you want to do that you can't do with this model all great questions I want to go to Google's take but first I want to hear about the name it's likely masonry is not the best name for this new value names in CSS are usually simple words that directly describe the result they create like Center under contain clip revert LTR always break you get the idea the word basry is more of a metaphor where the meaning has to be explained with a backstory such a term is harder to remember for developers who do not speak English and arguably the syntax could just as easily be grid template rows waterfall instead since that's the dominant word for this layout Ed in certain regions not Masonry plus once you start to write a lot of code using this feature it's likely you'll come to the realization that we did this really isn't about the layout used by Pinterest or other similar sites so mechanism for telling the browser please create a grid but without any rows perhaps the best syntax could be as simple as grid template rows none to convey please do not give me any rows sadly it's too late to use this name because none is the default value for grid template star and that means please give me only implicit rows not explicit ones so we could use the name off to convey please turn off the grid in the row Direction give me only columns okay here's where I'm going to come out heavily disagreeing with the standard proposal the fact that the right term was none but we can't use it because it's taken does not mean we should use a synonym that is bad that is dumb I do not like the fact that nun being a taken word with a specific behavior means we should use a word that means the same thing with a different behavior that is indication that the strategy of using the word that describes things is a bad idea and we have so many of these in CSS already where there are terms that sound like they describe something that just aren't describing that thing we should not do that and this point alone is enough for me to say masonry is probably the right word simply because the name space of off in none is already full of that we shouldn't have to remember the difference between masonry is what they have currently implemented cool Google published a response which we'll read in a second but I want to start with Adam argy's comments because he's he's Deep In The Weeds here also works at Google has a lot of things to to say in all of these and I'm excited for his thoughts here are his points on why he doesn't like grid level three as the way to do masonry point one a masonry layout isn't a grid there is no shared row lines only columns so it has to ignore all sorts of syntax to accommodate this syntax we'll have to memorize isn't applicable good point like there are things that grid supports that would not be there if you were using the masonry version of grid and you have to know that half the synx you were writing might just not do anything at that point that said the masonry isn't a grid thing I think Apple has successfully pushed back on that one like the term grid is vague enough that it kind of is and there's enough overlap in the behaviors that I I will come around to masonry's being a type of grid conceptually if you're using a general enough description of grid and if a masonry is its own thing it can pace and grow at its own rate sub grid has already added tons of bugs and complexity to grid layouts adding masonry in there too makes the combinatorial explosion even greater ooh I've been enjoying throwing conspiracy theories into my videos more so I'm going to give you guys a fun one what if Apple's decision here to continue making grid more complex is them subtly trying to make the web a harder to contribute to platform to bridge the gap between native apps and web apps in complexity it's so much easier to build most uis in the web that electron is how most apps are made the web's standards for building UI are so good and consistent that the platforms that aren't web are copying as much as possible what if Apple's goal here is to make web development so hard and so confusing that the gap between it and Swift UI isn't as big what if their strategy here is to make the web hard enough that you might as well just go write it in Swift anyways I like you guys chat you're catching on you're a genius this is it this is so stupid I believe it I could back that conspiracy tinfoil what if Google devs just really don't want to implement masonry as part of CSS grid because it sounds annoying as this isn't even conspiracy that's po very likely what's happening anyways Chrome is prom masonry we're advocating things that are simpler for both spec writers site authors and implementers to make a new layout strategy for masonry instead of appending it to grid this would mean nothing to unlearn or exceptions to memorize and yeah performance is better that's nice too again the conspiracy Apple might be pushing us towards Native is that why that animation was so Jank and they just didn't care remember the weird animation with things moving around if you want a good animation you would just use native it's becoming pretty common that initial proposals for features get pushed back and refined the good news is that so far it's always been a better spec for it I think some folks are confusing or conflating masonry with both Bento and packery which I believe are three separate layout strategies Dave demonstrates packery awesome here with the great layout mode in the classically rad isotope J Library maybe what folks want is for masonry to be capable of all of these if so then maybe whatever this new layup method that we're headed towards is it's tailored for all three strategies at once masonry asymmetric Bento and packery I don't know what any of those words mean other than masonry kind of I think this is it it fills the space as best as it can pedo can be done today with grid right Packer is pretty specialized while folks may ask for filling gaps persistent grid position I don't think it's worth pursuing as a CSS feature oh look at that Nan who I'm sure is in chat right now good to see you man packies masonry how are they different oh god I didn't even think about keyboard navigation  God that's going to be painful here an alternative proposal for CSS masonry also by Rachel the Chrome team is Keen to see an implementation of masonry type layouts on the web however we feel that implementing it as part of the CSS grid spec as proposed in the recent webkit post would be a mistake we also feel that webkit argued against a version of masonry that no one was proposing that was the part that I was getting sus of too it felt like they were saying if we do it is display masonry it'll be missing all these features but I didn't have any reason to believe that so I'm happy they called that out immediately this post aims to explain why we at Chrome have concerns about implementing masonry as part of the grid layout spec and clarify exactly what the alternative proposal enables in short the Chrome team is very keen to unblock masonry we know it's something devs want adding masonry to the grid spec is problem for reasons other than whether you think masonry is a grid or not and defining masonry outside of the grid spec does not prevent multiple track sizes for masonry or the use of properties such as alignment or gaps or any other features used in Grid layouts so should masonry be part of grid Chrome team believes that masonry should be a separate layout method defined using display masonry later in this post you can see some examples of what that could look like in code there are two related reasons why we feel that masonry is better defined outside of grid the potential of layout performance issues and the fact that both masonry and grid have features that make sense in one layout method but not the other grid and masonry are opposite in terms of how the browser deals with sizing and placement when a grid is laid out all items are placed before the layout and the browser knows exactly what's in each track this enables the complex intrinsic sizing that's so useful in Grid with masonry the items are placed as they are laid out and the browser doesn't know how many are in each track this isn't a problem with all intrinsic size tracks or all fixed size tracks but if you mix fixed and intrinsic tracks there's now a problem to get around the problem the browser needs to do a pre-layout step of laying out every item in every possible way just to get the measurements with a large grid this would contribute to layout performance issues that is a very fair point if you have One Direction fixed and one that isn't you have to put everything into it to know how big they are and where they're going to end up lighting out and then actually do that lighting out that sounds problematic I understand a bit of where they're coming from here this is a good point frostjack I'm very much in favor of masonry being part of grid but I just had the terrifying vision of the crossover between masonry and react re-rendering Dynamic content and I feel pity for future Junior devs yep react rendering to check if a Dom element has changed and masonry rendering the actual content on the page in order to make sure it fits correctly there are different types of rendering entirely now you have to know the difference and that does suck the performance cost if you want to ship something should be eaten by the developer it's better than the JS either way yes but this is like in the implementation in the browser since the content being rendered is dynamic and the sizing now has to have much more metadata to know what actually goes where that that requires a lot of rendering and a lot of potential performance issues on the client side actually trying to run the page and these performance problems start to become exponential once you add subgrids yeah when you have fixed things with auto as parts now you have to figure out what Auto Value Works which is a very common way to use this is how I usually use grid is not with this but rows to do like top nav bottom nav and then everything else CSS grid three intrinsic track sizing algorithm for masonry can go can go exponential in complexity you need to place everything in every possible position with sub grid that means the complexity can go roughly exponential or at least subexponential with this simple example where you have grid template masonry repeat 10 subgrid another sub grid there are 60 positions that have to be checked I like this call out exponential time complexity doesn't care how powerful your CPU is it will always win there is an argument that most people won't run into this however we already know that people do have very large grids we don't want to ship something that has limitations on how it can be used when there's an alternative approach we could do instead what do we do about things that don't make sense in each layout method when flexbox and grid became part of CSS developers often felt that they behaved in an inconsistent way the inconsistency they were experiencing was because of long-held assumptions about how layout worked based on block layout over time developers have started to get an understanding of formatting contexts when we switch into a grid or Flex formatting context some things behave differently for example you know that when you're in flexbox not all of the alignment methods are available because flexbox is only one-dimensional bundling masonry into grid breaks this clear link between formatting context and availability of things like alignment properties which are defined in the Box alignment spec per formatting context if we decide to deal with the performance issues outlined previously by making mixed intrinsic and fixed track definitions illegal in masonry then you will have to remember that a very common pattern for grid layouts doesn't work for masonry there are also patterns that would make sense in masonry for example grid template columns repeat autofill Max content because you don't have cross constraints but need to remain invalid in Grid the following is a list of properties that we expect to behave differently or have different valid values oh boy that's this part is starting to click where there are things that you would want a masonry to be able to do that just cannot work in a traditional grid like autofilling Max content you cannot do that in a traditional grid because you have to have row that have sizes you can't just call them autofill Max but you would absolutely want that in masonry very interesting here are the list of things they think will be different between a masonry grid and a non- masonry grid template areas would be different because you can only specify the initial Row in the nonmon redirection grid template because the short hand would have to account for all of the differences track sizing values for grid template columns and rows would be different due to differences in legal values autoflow doesn't apply to masonry and masonry autoflow doesn't apply to grid merging them would create problems of things that are invalid due to the layup method that you're in Grid has four placement properties grid column start and so on but masonry only has two grids can use all six of the justify and align properties but masonry only uses a subset like foxbox this will also be a requirement to specify what happens in all of the new error cases caused by developers using a value that isn't valid in Grid with masonry or grid without masonry for example salid use grid template columns masonry or rows but not both at once what happens if you do both at once these deals have to be specified so that all browsers do the same thing very important I have had so many dumb problems with like sizing an SVG to a percentage working totally fine in Chrome working weird in Firefox and making the SVG disappear in Safari getting these things consistent is really hard and with the spec getting this much more complex the likelihood that it's consistent goes down massively this all becomes complicated from a specification point of view now and in the future we will need to ensure that every takes into account masonry and whether it does or does not work in masonry it's also confusing from the point of view of devs why should you need to keep in your head that despite using display grid that some things don't work on account of using masonry as well there's a fair point that certain CSS properties can make other ones invalid that is fair but the the thought that you could invalidate the display type by having a grid like row type is the less cult knowledge we have to have to use these things properly the better and this is a decent enough bit of cult knowledge before we on them too much let's see what their alternative looks like they want to propose display masonry and masonry star proposals they have a whole separate issue for whether or not Mason re the best name good also important call out here all the Demos in the webkit post would still be possible very good to know here's the classic masonry layout most people think of masonry they think of a layout with multiple equal siiz columns this would be defined using the following CSS which needs a line less code than the equivalent grid version so we have display masonry masonry template tracks with the repeat call and then the Gap one R there we go using grid type track sizing for different column widths so here we can do the same repeat autofill and have the minmax at the end to make sure we have the 81 at the end it's basically identical to the safari one that we were looking at if we go back up to alternating it this code is identical the grid template columns code the repeat autofill minmax minmax minmax exact same repeat autofill minmax minmax close pen minmax exactly the same awesome additional track sizing for masonry there are additional track sizing options that we don't allow in Grid because of the fact that grid is 2D this would be useful in masonry but it would be confusing if they didn't they then didn't work in Grid like autofilling with Max content size tracks so now the columns will be the size of the the largest piece of content that will not work in G at all autofilling auto siiz tracks which will create tracks of the same size Auto siiz to accommod for the largest one that's really cool so whatever the largest thing is all of the columns will now be the same size allow content to span columns and place items on the masonry layout there's no reason not to have a Content spanning column in a separate masonry spec this might use a masonry track property being a Shand for masonry track start or masonry track end so you only have one dimension to span things when in a masonry layout so masonry template tracks repeat autofill Auto then you have elements that specify masonry track span 2 or covers tracks 2 three and four with the 2 over5 synx and there you go it works people in chat are coming around real quick if these all the examples are the same then I'm on team display masonry how to make left to right masonry oh God I don't even want to think about that this is the way I'm convinced already they're winning me over two so let's talk about subm or subgrid adopting masonry tracks this could be supported with a separate Mason respect again with the Proviso that mixed intrinsic and fixed size tracks are disallowed exactly what that looks like will need to be defined we see no reason that this wouldn't work we would love to get to a point of a specification that can be shipped cool to see Una shouted out she's the best I don't like the font on Google's blog therefore I'm team webkit honestly not the most irrational thing I've heard today on the topic of font are you guys ready for the worst one which is the w3c CSS standards committee it's bad this is also the reason we're all here today in case you were curious because there's a first public working draft of the CSS grid level 3/m masonry layout CSS working group has published a first public working draft of the grid layout module level three AKA CSS masonry layout the draft represents masonry layout as a built-in capability of CSS in two possible syntactic forms a grid integrated syntax and a grid independent syntax both of which are outlined as Alternatives we hope the publication of this draft facilitates discussion about their relative merits the CSS working group has resolved to adopt fully mixed track sizing for this layout model allowing all the possible track listings expressible in CSS grid layout for masonry layouts as well this unifies the two incoming proposals underlying layout models and therefore both syntactic forms represent essentially equal capabilities formation re layouts though there are some open issues about possible differences in their initial values to address Performance concerns with mixed track sizing the draft outlines specific performance optimizations in the layout model it adopts some simplifying heris for things like subgrids we are grateful for the designers and developers who commented on the issues with their use cases diagrams and demos which informed the development of this module and we welcome additional input suggestions and use cases to help guide its further refinement we expect development of this module to proceed rapidly from this point forward since it builds on existing foundations of the grid layout system please send feedback yada yada you can also mail you get the idea links in the description for all of this if you have thoughts that are valuable enough to send to the team as we just saw the working group has combined the two proposals into one draft spec in order to make it easier to compare the two while the biggest performance issues mentioned in our previous post have been resolved there are still concerns around syntax initial values and how easily a version combined with grid would be to learn to test our assumptions however we've worked through some examples to show masonry would work with each version take a look at the examples in this post and give us your feedback post doesn't cover all possible use cases however it's clear that separating masonry from grid will not result in the feature lacking functionality in fact the opposite may be true as you'll see in this post the display masonry version creates new opportunities and a simpler sytax in addition many developers have raised concerns about the potential of reordering items with masonry causing accessibility issues it's also being addressed for both versions of the syntax to the proposed reading flow property that is a big deal I showed you guys before where like the numbers were all going in weird ways when you ref flush things how is navigating with your keyboard going to work for that it's like 1 2 3 4 5 6 seven8 that doesn't work for basic masonry layout here's a simple example with display masonry repeat 3 1fr Gap 10 you're done display grid very similar just grid template row masonry same deal points to consider between the two with display masonry you get a masonry layout even if you don't specify any tracks masonry template tracks so display might actually be all you need because there's an initial value of template tracks which is repeat Auto areas Auto cool reverse flow with masonry masonry masonry Direction column reverse we display grid grid autoflow row reverse to make it upside down that I don't love that I don't I like column reverse cuz that's what it's doing but row reverse feels very wrough here also of note row reverse is a new property that is being added for that to work Google's making a good case here for this being dumb like this is how we end up with the hell of everything having weird names and there's 15 ways to Center I want to see how many of y'all off the top of your head can correctly guess which of those is correct for vertically centering the text also looks like Gabriel's coming around we'll win you over you just realize you're wrong where's the I should have put an I don't know option my bad yeah it's like a 50% hit rate for us guys that's pretty sad every time I have to WR CS I have to have a reference open yep I honestly just do all three and then delete them until it works but yeah I I've been there this stuff is not easy to remember anyways this is how we get there though where we have three options where it's very unclear by their names what they actually do this is how how we get there by having the way to reverse the columns be row reverse fun points to consider between the two options display Mason reversion feels very similar to how flexbox Works CSS grid uses grid autoflow is currently defined grid autoflow row reverse and grid autoflow column reverse would give the same effect this could be confusing so you may expect them to do something different masonry for rows change it to be rows instead masonry Direction row makes sense just like Flex display grid columns masonry rows repeat 3 at 1fr these are both fine this is like more and more I feel like display masonry is just treating it like a flex box and grid template columns or grid template rows masonry is it is part of grid and as a person who likes flexbox a lot and still sucks at grid I'd be okay with either at this point in time I just want to make sure we're not making CSS harder to read and harder to understand and guess correctly changing the display masonry version for columns to rows meaning changing the values of masonry Direction the grid version you'll need to switch the values of grid templ rows and columns that's fine all these examples of switching flow display Mason reversion feels more intuitive eh I think they're both whatever it's just one's more like Flex box position items display masonry masonry track start one end is three display grid grid column start and end that's these are fine I don't care you can also name areas the same way you can with grid grid columns a grid row a but it's ignored whatever these don't I don't care what the difference here display masonry you can do a Mason masonry template areas set the track there this is exactly the same I don't care no the difference each row is quoted oh that sucks actually the fact that the Syntax for columns and rows is different okay that that might be the one that pushes me over that you have to change the area syntax depending on if it's a column or a row that sucks that is a really good call out because grid template areas has a different string for each row so if you're just defining columns this is fine but if you want to Define rows with names they have to be their own separate strings that sucks ass Gabriel if you're still here I'm curious if that swings you because that just swung me this is the one that pushed me over personally yeah damn right do you know how much it hurts me to say Apple's wrong and Google's right here I don't like this it is in it's actually comically rare that when there's a dispute between these two companies I side with the shitty one like I have dedicated so much of my life both to contributing to Android and all over it but Google knows the web and they're doing this one right you already have to do that with grid yes but with a grid you don't change your mind and go from column to row at some point in your development cycle here I could absolutely see myself wanting to change which type of masonry I want to do or playing with it the fact that I to change multiple points in the syntax in order to swap from column to row is honestly in my opinion a bit of a disaster but I agree yes masonry is a type of grid but they are different enough the separation is making more and more sense to me with any positioning the display masonry syntax works better when it comes to switching directions Mas retract property Works in whichever direction is the grid AIS both let you define short hands okay that's annoying you have to switch which side masonry is on if you change it it's a fair concern to worry about masonry not having feature parody with grid and flex boox but grid and flex boox have feature par the display masonry shorthands likely to be widely used given that it's relatively straightforward shorthand display grid one uses the existing grid shorthand which is fairly complex shorthand I I hate the grid shorthand I've never actually understand what doing I barely understand the flex shorthand to be fair Order of Things changes a whole bunch depending on which is weird like masonry could be in the front or the back it's a bit weird to me but yeah I'm not super strongly opinionated I Direction I am leaning towards it being separate but I want yall's thoughts yeah I was about to do a poll let's see I have no idea which way the poll is going to go I have a rough idea Google with the massive W 80% damn let me know if you agree with that poll and how you're feeling about the Google approach versus the Apple approach here I'm okay with either I just want this feature now let me know what you think and until next time peace NS




## This can't be good... - 20240711
I saw this chart earlier and it scared me it's a very scary looking chart this is from indeed which is a website for hiring developers and other people directly if you're not familiar it's a quick like contracting service site for finding people to work for you both for contracts and for full-time jobs this is a chart of how many people were looking to hire software developers this was for the availability of job positions like postings for new job roles on indeed and in 2022 the Spike was just insane but it very quickly started going down and now we're in this rough patch this initial dip by the way for those curious was Co where everyone had no idea what financials were going to look like so they immediately halted everything and then as Co not necessarily cleared up but we realized the importance of tech as a result of Co we started hiring so many more Engineers especially during the zero interest rate era but now we're back to where we were when Co started this seems really really bad so we should look into this more the First Source I check for things like this is layoffs FYI which is a phenomenal place to see the current state of the layoffs and how many tech jobs that used to exist no longer do if we look here this is the chart showing from 2022 to 2024 it got real bad early 2022 in this era here if we look here we could see in 2020 when Co started we had some number of layoffs but we had a lot of companies doing layoffs but they weren't that big of layoffs like is 60,000 tech people not having a job anymore bad absolutely but that's not even measurable compared to 167,000 and that being like a pretty maintained thing here the layoff sucked I'm not going to ever pretend otherwise the amount of chaos that a lot of good Engineers are going through is hard to Fathom and the fact that we've had such a secure position in the industry for so long has got a lot of us complacent and now we're realizing maybe our jobs aren't just this easy free solution for getting paid a whole bunch of money I love this tweet from levels if you don't know levels we don't always agree but for the most part we get along I actually think we now recognize that we think about software and Building Things in a very different way and the way that we build being different makes sense to us both now he lists how much money he's making on all of his projects He has a bunch of different things he's built one of which is remote okay.com which is a website for finding remote work just a fancy flashy PHP site with all these opportunities for people who want to work at a company where they know they can do such remotely cool stuff he makes cool things I bring him up because he had quite the journey with remote okay I was making $140,000 a month with remote okay which was his remote job board I was printing money because the Fed was printing money feltg goodman. xlsx particularly funny to put that in a spreadsheet format then they stopped and it dropped 95% overnight to 10K a month now it's back up to 40K a month which is great and all but you'll always remember the good days which was this massive spike in the middle here that bubble that Spike this section here that's over that is without question over that level of desperation that we haven't seen since is not going to come back be it AI be it layoffs be it the state of the economics of all of these things the massive opportunity spike in the late 2021s and early 2022 that's over now but does that mean new developers are screwed does that mean that we're not going to be able to find new jobs the software engineer Gold Rush is over as a former software engineer it always made me uneasy how much money they got paid compared to the difficulty of the job this was an interesting comment somebody replied to on his stuff which is the number of freelance workers in the United States which has been going up massively for a bit now and how much tech industry is leaning into using contractors now the past year contractors share of open positions in the overall US economy has stayed relatively steady while Tech contractor share has surged yeah a lot more roles for contractors even though the number of roles for full-time has not been growing anywhere near as much really useful information to have here that said the numbers aren't quite as bad as they might seem when we see these things there are more highquality candidates on the market because there's people who have been laid off that had years of experience so if you're a brand new Dev fresh out of college things are definitely going to be a bit harder for you you have to build some trust with some people who have jobs to use that as leverage to get a good opportunity and that can be tough I'm not going to sit here and pretend it isn't but we also need to be realistic about where we're at I found this awesome survey the state of the tech Workforce from CompTIA I'll have this link in the description if you're curious there's a lot of good information in this that I wanted to break down here is a great start this is the projected total workers in Tech in 2024 apparently 61% of the net Tech employment is in technology occupation specifically so this is tech companies overall Tech sector but the gray boxes here are things like sales marketing Finance HR Etc the rest is all developers Network Architects database admins all the things you would go to university and watch my channel because you're one of but if we go down here you can see this is a lot less scary than you might have been told this is the total number of roles available both ones that have been filled and ones that are current being hired for it's still going up admittedly we had one of the smallest bumps ever going from 2022 to 2023 and the number of people retiring in Tech isn't enough to leave open space for new grads so this many new opportunities is nowhere near enough leave this one in Phase shout out to vanf for vanera hopefully I got your name right for your first chat being a very useful link because we just spent a bunch of time asking various search engines in AI for this answer and you to drop the exact one very quickly so here we can see year-over-year how many computer science grads there were not computer science specifically this is a more General computer and information Sciences conferred by postsecondary institutions it's just more generic than that but you get the idea it's meant to be representative of people in the US getting computer science degrees every year and things that would reasonably sort them to be a programmer for a job so back in even 2010 we were still only seeing about 40,000 people which was roughly the same as it was in the 2000s so from 2000 to 2010 we saw some ups and downs but for the most part things stayed pretty stable for the number of people looking to get jobs in Tech because we weren't getting too many more new grads every year but what's happened since is this has grown a lot we went to 60,000 in 2014 we went to 65,000 in 2016 we went to 70,000 right after then 880,000 then almost 990,000 then almost 100,000 we settled in 2021 at over 104,000 people graduating with degrees in the technical space looking for jobs doing things generally associated with with computer science that's a huge number and that's just the us if you were to project that globally that is terrifying so if we go back to the survey we were just looking at here again just us finding Global numbers is basically impossible but you'll notice that from 2022 to 2023 we had 117,000 new jobs which is basically the same number that we had new people enter the workforce if we go back here 104,000 people entering the workforce 117,000 new job opportunities apparently this has continued to change in 2021 to 2022 we GRE even more 108,000 so this problem is not getting better we still have more people graduating looking for tech jobs than ever and we have the layups happening which is resulting in more people trying to find opportunities as well we're finally closing that Gap where there were so many more roles than there were people looking to fill them like if this Gap was double from 2020 to 2021 which it probably was that's over 200,000 new job opportunities with under 100,000 new devs and if we go from 2018 to 2019 again very similar but even fewer new devs the reason that everyone's been saying for so long go get a job in Tech go learn how to code you'll get a job is because the desperation companies had trying to fill roles was insane there was it was so difficult to find enough Engineers because there weren't enough Engineers there were way more opportunities than there were engineers and we weren't getting new devs fast enough through things like graduating CS this is why boot camps happened this is why everybody tried to learn coding during Co this is why AI is so exciting this has resulted in a lot of things for the industry but as a result we also over hired because it was so hard to get Engineers that out of fear of not having enough we would just constantly hire more and more of them there were even companies like Google that would strategically hire engineers and not have them do anything just to make it harder for Facebook to get those same Engineers those things are insane and thankfully thankfully it's starting to slow down but that kind of sucks for people looking for jobs now too Tech occupation employment Outlook Workforce need equals annual replacement rate plus growth rate according to the projections from the US Bureau of Labor Statistics and L cast in the next 10 years years the tech Workforce will grow twice as fast as the overall us Workforce the macro trend of digital transformation means demand for Tech Talent across the full spectrum of tech job rolls will continue unabated oh this is fun by the way if you're curious where all these Engineers live mostly in California but look at how close Texas is now Texas is almost at a million Tech employees that's insane that Texas is now bigger than New York for Tech workers never would have thought we'd see the day but uh here we are and as we see here Texas is gaining the fastest too California might even be in the negative with all the layoffs and people leaving absolutely Ely nuts this is probably the chart that we should spend the most time thinking about here because in here we see the drop that made us all so panicked this is why everybody was terrified with AI on the horizon with interest rates going up again with companies starting all the layoffs we started to see a significant shift downwards in the number of job offer or options and posts available for people looking for getting roles they also break this down by Advanced Digital fluency versus basic and you'll notice that the Advan is going up quite a bit fast but both still going up here but it's going up again now that we're back in 2024 seems like things are getting better that is a good thing to see and one more fun thing I don't think you guys understand how wellp paid American Engineers are on average the estimated median Tech wage is $4,5 156 which is 130% higher than the median National wage software devs make more than twice as much money than the average worker in the US which is just nuts and also if you're the type of person watching these videos and you're in the US and you make less than this you're above average you're here so uh yeah get more money it's time one more useful piece of info when we're comparing these numbers comes from chatter oh vanie again thank you so much man you're super super helpful this is the state of boot camp graduates which includes another 58,7 156 people also notice a lot more from New York more New York than SF which is unexpected but yeah so we have the 100,000 people getting degrees then another 60,000 graduating from boot camps that's so many people looking for new jobs which made a lot of sense when there were 300,000 plus new jobs every year and nobody was retiring and companies needed to fill these roles now that it's balanced out a bit it's going to get a lot more competitive the Gold Rush as people were describing it to learn Tech so that somebody would hire you because there just were so many companies desperate for engineers that made sense the reason that happened was a massive shortage of supply and a massive demand to counteract it the demand has gotten lower it's starting to grow again but the supply appears to continue to grow which means more than ever it's important to stand out as a candidate getting a job is all about trust now previously there were so few people to hire that we were able to hire with less trust we could bring a candidate on that might not be the perfect fit because we couldn't find a perfect fit it was too much work to find good candidates cuz there were so few of them and there were so many roles we were trying to fill that has shifted there are more Engineers looking for jobs there are more good Engineers looking for jobs and there are a decent number fewer jobs and also with work from home and the normalization of the internet and getting work done from people that aren't necessarily in your office that's why we see this number here which is the massive growth in contractors doing Tech work too if you can just hire a random contractor to build the thing for you pay them way less money not have to worry about giving them health insurance and multiple years of employment it's way less risk you don't need as much trust to do that and they can go do it way faster too if they're writing these types of things for a lot of people they're using AI tools and all that so they can be more efficient they can be cheaper and weigh less risk to the business that is hiring them I know companies like Google even part of their layoff strategy is to move towards hiring more contractors and firms often from other countries so the market is getting more Global and is getting more competitive but it's not getting smaller and that's the thing I really wanted to emphasize is that first chart the one that triggered me into making this in the first place seems to make it look like there are way fewer jobs available and it's going to be impossible for anyone to find work but the growth is still there as we saw in the comp TAA survey we're actually seeing quite a bit of growth even now and the projected growth from 23 to 2024 is 300,000 new jobs and honestly that kind of lines up with what I'm seeing so while you should be a little scared I'm not going to pretend otherwise think it's important to be realistic too the future for software Dev is bright and if you're the type of person that watches videos like this in your spare time that learns new tools and technologies that is a good contributor to the places that you work you're still going to be set good Engineers are not the ones that need to worry it's Engineers that don't want to be engineers in the first place that are going to start having a harder and harder time if you're just in tech for the money and you don't have any interest in bettering your skills you're the type of person that graduated college and still don't know what G is you're going to have to work a bit harder than you did before I'd argue that part of why we have the layoffs is because we had lowered the bar too much that aside as long as you can actually write code and you're actually part of communities of people who write code the future is still very bright for you but yes the bar is higher than it was before just having a piece of paper that says you know how to code is not enough to get a job right now and I don't know if that will ever change I don't know if it should either let me know what you think in the comments until next time peace




## This magic hack makes Next.js possible - 20241222
next Chase is a complex beast but it is getting simpler I know that sounds a bit contradictory in a video titled the magic powering next like isn't whole Magic just hidden complexity kind of but what if one of these magic things is actually just how JavaScript works and on top of that if this magic thing could make a lot of the other magic that you were doing before go away so everything is much simpler in the end that's where we're going and before we get there I'm going to drop a bit of a spoiler this is the code that does it if you can read this code and confidently immediately know what it's actually doing hit me up I'm not hiring but you should get a job I even made a joke when I first saw this at the event I took a photo of the screen and said I'm going to start asking Engineers to describe what this code does in interviews it's complex it's absurd it's scary and it's not code you as a developer should ever have to write this isn't code for you this is framework code and it's framework code that empowers some really really cool stuff I want to break down what this is why it's needed and why it's such a cool hack but before we do that let's quickly hear a word from today's sponsor today's sponsor is bolt. new the best way to spin up your new app we can take a quick wait what is this bolt. DIY turns out stack Blitz wants to support the community as best they can and with bolt. new being fully open source a fork happened that lets you use whatever models and llms you want to use and that fork b. DIY is now hosted by them and their contrib ruting funding and helping it however they can it's awesome that this is an open source project because the actual experience using bolt is incredible you can generate a starting point using any framework from next to vit to Astro just tell it what you want and how you want it it'll generate it give you a full code editor in the browser because it's stack Blitz and a one-click deploy button and as of recently a one-click superbase button so you can set everything up on superbase directly how cool is that check out bolt. new today at soy. l/ bolt so I could dive straight into the talk but this talk was for people who were very very deep and even I had to like ask questions after to make sure I fully got it so instead we're going to excal draw it up a bit and we're going to start with a somewhat familiar topic partial pre-rendering let's say this is our website our website has topnav as a sidebar and it has I don't know product images maybe has a little like description have some more nonsense over here whatever you get the idea but we have in the corner here our brand and then up in this corner here we have something that's like user specific we'll say like this is your like profile picture your signed in thing and maybe you have a cart up here too so I'll put like your cart as a diamond here very real looking website right I'm a very skilled mock artist in traditional serers side rendering a page like this would have to be rendered on the server so you would have the user request go to your server server the server would check which URL you're trying to go to see you're trying to go to this shouldn't be description we'll say um product 17 we're going to website.com product 17 the server gets this URL it sees that you're trying to go to it it has access to your cookies to all these other things and then based on your cookies your headers and the URL you're trying to get to it generates HTML that it sends to you when it's done but let's say some parts of this are slower than other parts let's say everything here like the top bar and the sidebar are static so they can be rendered immediately but we need to fetch this data from database and we need to get this data from somewhere else to get this off data when you render this traditionally you have to wait for all of those things to happen before the user gets any result I'm going to make a mock app for this because of who I am as a person let's say you have this beautiful website that has these three slow components this one takes a second this one takes two seconds and this one takes 5 seconds I did that just by blocking on a promise and then rendering it if I go to this web page I'm going to copy the URL close and reopen it one Mississippi 2 Mississippi 3 Mississippi 4 Mississippi 5 Mississippi there we go it takes 5 seconds before you see anything because as mentioned before the server has to generate the whole page before you can see anything this is how websites have worked for most of time the slowest thing on the web page is the thing that blocks you from getting a response so so if any one part of your site is slow it doesn't matter how fast the rest is the user doesn't see anything until all of the things have loaded but that's not how react works at least that's not how react on the client side has worked if we go to a website that you should probably be going to more twitch to watch my live streams by the way I film all of these live on Wednesday so if you're curious about how I film my videos twitch.tv/ Theo so this web page is interesting because if I go here and I look at the HTML there's a lot going on here if I just like inspect here obviously there's a ton going on in the HTML but if I go to the network tab refresh the page and grab the HTML that was sent so I just kill this one giant script tag it's a bunch of data it's only like 600 lines and even then it's still mostly script tag the actual HTML that you load from the server when you load twitch is almost nothing I'm going to delete everything in here that isn't HTML really quick there's actually only about 40 lines of H tml that you load from twitch because the way that twitch works is the server doesn't block you from loading a page when you load twitch with JavaScript disabled this is what you get an empty scaffolded loading page with a spinner because all of the behavior on the twitch site comes from the JavaScript and once the user has loaded the JS the user's device through the browser can go make all the API requests to get all the data that it wants but that means that the user gets this loading State initially and then they have to download the JS parse the JS run the JS figure out which apis to hit hit all those apis realize they need different JS to parse the apis go fetch that load it all in and then you start to see components so there's a lot of back and forth but it does actually feel better than the old way of doing things which sounds super counterintuitive because it is the reason this is good is because when you load the URL or you click a link stuff happens immediately because the amount of time it takes for the server to send you this HTML is nearly zero it doesn't have to check anything it can just blindly send you this HTML it doesn't have to generate it it already exists it's super simple minimal HTML they just spit out as soon as they can that HTML has the JS tags that you then go and load and then you hit the apis that might be fast might be slow whatever but now on the user's device you get to choose what shows up when so if I reenable JavaScript but I also slow down the network speeds a ton let's say we go down to what like slow 4 and we reload you'll see different things pop in at different times because different things take more time to respond so this is good in some ways it's better but in other ways it's worse because now you have to run JavaScript you have to go hit all these different apis yourself you have to have every potential permutation of the UI coming from the server that was obviously not ideal which is why nextjs moved to an SSR model where by default nextjs would render your react page once get as much of the HTML as they could get and then send that to the user instead so in the case where there's no apis being hit you get back much better HTML in the case where there are apis being hit you can sneak in a loading spinner and put some other things here and there and it worked okay but what if this was more Dynamic What If instead of it being the traditional page load on the server and then the react JavaScript code picks up what's left after what if the server could send down what's ready instantaneously and send the rest in later on that's what the cool streaming stuff in the new react next model enables so if we wanted to wait till these two components were done but we didn't want to wait till this one was done I can add a suspense here and the suspense tag can wrap the slowest component and now when I go to Local Host 3000 it's only going to take two seconds and the third one will be loading until it's done and if I want the page to come back immediately I can wrap all of these and now it loads instantaneously and these pop in when they're ready what's even cooler is this isn't code on your device that is running to go fetch those other things this all comes back as part of the initial request these pieces of content are streamed to the end of the HTML and then get applied where they belong in the UI which means we don't have to wait for the slowest part we don't have to wait for any part we can send a update to the user immediately but we're not even getting to the coolest part yet because this still requires that your server starts processing before the user gets back a response so if you have things like a database connection that takes a while or your server is far away from the user it takes a long time for the user to start getting a response because the first bite back and forth is just too high the solution for that has historically been cdns and that's part of why twitch feels so fast because all of the twitch HTML is stored in CDN and when you build in the single page app way you have a really small minimal HTML file being hosted on a CDN that's distributed around the world so people can load that part immediately then the rest takes a lot longer but at least you get to see something and that's something you'll learn as you build more and more apps the sooner a user can see something as a result of their click the faster it feels even if like if you had a service that when you click something it shows you a loading page immediately and it takes two seconds for the content to appear versus a page that doesn't show loading and the content only takes a second to appear the slow one the one that's twice as slow will feel faster because when the user clicks they get a response immediately so this model kind of sucks because even if you can stream down the slow Parts the fast parts are still slower than if they were on a CDM and this is where partial pre-rendering comes in so we currently have these suspense wrappers on the slow Parts but what if we inverse it what if we take the parts that don't take time at all like the Shell let's let's make the shell a little more useful first we'll hop in here and in the body we'll put a little H1 um class name equals you know what we'll do something a little bit nicer quick cursor plug make me a top nav for this website it's titled PPR is cool so we have this fake topnav we got these fake little links in the corner that my face is covering feels like a real website not really but you get the point this part doesn't have any data blocking it we know that because if we go here there's no await call there's nothing here that should keep this from always being the same so why can't it always be the same why do I have to wait for my server to spin up before the user can get these static Parts how can we get this to them faster this is where partial pre-rendering comes in I'm going to go turn it on when you have partial pre-rendering on things get interesting I just remove these two suspense calls that were wrapping the 1,000 and 2,000 millisecond components so we just have the one for the 5,000 millisecond component now and if I refresh the page is taking its time you can see that little loading thing up top because it still has to block for 2 seconds before we get anything but this is what makes partial pre-rendering So Dope if we add a loading TSX export default function loading return loading here now if I I'll prove it just by closing this tab and reopening it we get it back immediately and we get a loading State for the page load and then we get a separate one for this much slower part so we get granular control of what loads when as well as the ability to have something static come in initially what's really cool here is if we have a platform like versel or netfi that can understand partial pre-rendering is it can take that static HTML that is the first thing the user sees and then throw that on a CDN so the user will immediately see the loading shell State and then the rest gets streamed in once the server has spun up and is ready you're offloading when all of that work has to happen and you're getting the user back a response much faster without the compromises of loading a shitload of js on the client and then going to fetch it from random apis it's really a Best of Both Worlds but it came with a lot of gotches the big ones were how do we know what can or can't be statically rendered when do we know where the the boundary of dynamic starts or ends so if we draw a diagram here we've all hopefully seen like react virtual Dom that the react virtual Dom is this tree of your components so we could say here I have my like app component and an app we have topnav but we also have I should name the page something that's named home already cool perfect we also have home and in home we have I know we have three but I'm just going to put two slow components so right now our react app looks roughly like this I'm going to start doing some painting we know that app and topnav are effectively static so this part can be cached what about this part though can we cash this how do we know if we can cach this how know if we can cach this or this how do we know where effectively the boundary exists where is the line where from here down we have to cut and put everything above or below previously with the early example we'd write the boundary with suspense but this isn't just a suspense problem anymore because we need to be able to cach in multiple depths in multiple places you could even theoretically wrap this whole thing in suspense I put this here instead and get all of it under one loading spinner that works and that will work with tradition PPR where I could kill the loading TSX file and just have that suspense wrapper here and it all comes through together these are all options but wouldn't it be nice if the compiler and the framework could know when things become Dynamic and when they're not wouldn't it be great if next was magically able to know hey these things are Dynamic these things aren't GMO made a demo a while back showing how powerful these Primitives are where you would load a random 12 pokon and the page instantly loads whenever you refresh it but the Pokemon all come in after all rer from The Edge on every request so this has to be dynamic if he had just awaited the data and not wrapped it in a suspense or even if he did wrap it in a suspense we have no way of knowing that this should be different on every render the solution used to be a bit of magic see this headers call in the home component this is what GMO had to do and what a lot of us Nexes had to do in these demos to show what is or isn't Dynamic this is effectively painting this function this home function as Dynamic and saying hey next this needs to be done dynamically on every request don't cash this don't hold on to this don't let this be part of the CDN like body or tree this piece has to be dynamic but what if there was a better way what if something else in here could indicate that this should be dynamic I would argue there is something this word async async effectively tells you that this is doing some IO it's waiting for something it's doing something what if we just cut off when you hit an async what if everything before the first async could be cashed and everything after it couldn't seems relatively simple right implementing it isn't fun right let's think about that so if we go back here going to name this quick in home this is an async component we are we already know that why do we have to do all this extra work also what if I wanted to have something else here like uh some header and I want to show that sooner what if I want to have more control in these ways right now we can't but with this new magic flag Dynamic IO we have a lot more power now and even though it is magical I think once it clicks you'll see how much simpler it actually is now that we have dynamic what we've effectively done is we've told react and we've told next hey when you see async that means we're doing IO treat that as Dynamic so now this piece is automatically considered Dynamic we don't have to import headers we don't have to do anything else this is dynamic simply because it's using IO and now it all just works as expected we don't have to write additional rappers all we need is that loading State and I could even delete Del the suspense works great we don't get the header now because it's async but what we can do now which is even cooler if I delete this async function contents now I can put this under a I'll get that it already guessed for me Tada now next to smart enough to ignore this loading State entirely and generate this component up to the Su header call so if we go back to my diagram what we've effectively just done is move this line down and now this part can be part of the static render as well I think this is really cool and where it gets even cooler is once you start involving other things like uh use cash I'm not using new server here nice try though now after the first load it comes in instantaneously because Ed cach doesn't just cach data it can also cache jsx outputs so now when I refresh I'm hitting refresh right now it loads immediately I think that is really cool but if it's using async to paint how does it do that there's a lot going on here and if we go back to this code hopefully you might be starting to see how this all comes together the first thing that I really want to make sure clicks before we go any deeper is what dynamic IO means it's not some clever buzzword name it's actually I mean it is clever but it's really simple what it stands for is IO means Dynamic so when you're doing IO which means you're calling async a weight that means that part of the code is now Dynamic and if we're painting your react components like I am here that means these guys are red because these guys need to be rendered every request but these can come from a CDN instead these can be statically rendered ahead of time these can be cashed indefinitely and thrown around however but this part has to be treated differently very clever but what is this what is this monstrosity why are we calling set immediate twice what are we doing here's where we're going to get a little bit deeper as I mentioned before there were a lot of these magic helper functions like headers and cookies that would paint a route as Dynamic otherwise it would be treated as static you had to give next indication of like hey this is dynamic treat it accordingly but not every Dynamic task needs headers or cookies and not every static task doesn't either it's a a really weird and arbitrary thing and when you're calling external libraries you're using other tools it becomes really hard to reliably find all of these function calls and compose them with different libraries and tools but doesn't that also happen with async A8 like we can't reach into the library's code and scan for all the async calls we can't but this isn't a compiler feature this is a JavaScript feature and this is when my mind broke when I realized this is how it actually works it all clicked for me in order to truly appreciate this we need to understand a bit about the event Loop there's a lot of really good content about the event Loop and I'm not going to sit here and just go over the whole thing again I'll leave a link to this video in the description if you want a better breakdown but the quick TDR of why it matters here is Asing tasks go into the call stack and when they get resolved they get resolved but when you call set immediate it immediately throws that task at the front of the microtask Q which will preempt anything in the call stack so now imagine that this pre-render code is rendering our app everything up until it hits an async boundary is just a traditional task being rendered synchronously but when it hits those async boundaries it gets thrown into the task q and the task Q doesn't get resolved until the current task is complete but if you jump in front of it with the set immediate you get to skip all of those tasks that are running so app renders the synchronous Parts which is app topnav and home these asynchronous parts like the slow components here those will get thrown on the que but since we call set immediate right afterwards it's going to jump in front of those other async things and the aborts going to kill it so the result which is the stream that the pre-render function gives you is only going to have the parts that are static not the parts that are Dynamic not the parts that are async because those async calls are all waiting on the que and they get jumped in front of by the set immediate call it's so clever it's using JavaScript itself as the way of painting these components previously they needed a compiler that would go to each component and identify is this one probably dynamic or probably static and then give a bunch of these tools so we as developers could try to help next understand what is or isn't Dynamic but wait what about the cash stuff cuz I showed that use cash call this is still an async function how does that work good question I'm happy I asked if we hop into what was built here so this part is admittedly quite off you skated because it was minified it's meant to be production code not code that we analyze but I want to make sure you guys understand how this works this 7027 this is this component contents and the thing it does differently because we put this Ed cach call on top is it quickly checks the server cache to see if we have a value for the current inputs it defines these variables for what it's found from there it defines this async function s which is the the component function it's the code that we actually wrote and it has the children here which are using the jsx like the I showed you guys the slow component guy so that's inlining that there but then here the value L which is what we end up returning and using this is the actual output here that matters we call this specific A.P function with three arguments default a hash and this async function so what the is it doing it's actually quite simple it's checking the default cash for this function using this hash as the identifier to see if we have a value and if we do awesome we use that value no async is hit the async only gets hit if we don't find a value first this A.P function early returns before we get to the async part which means when we hit something coming through use cache it can be resolved synchronously we don't have to hit an async wall if the thing is cached which means that we can via the used cache function tell next hey this can still be rendered statically this can still be part of that partial pre-rendered cached output what we've effectively done is next hey I know these are supposed to be red trust me bro they can be green and that's really cool the thing that was confusing with the model before in my opinion is that the functions effectively painted themselves dynamic or static based on all these weird esoteric rules that existed in the next World now synchronous components are static and asynchronous components are Dynamic and if you want that Dynamic component to have the static benefits explicitly call that out with the used cach header it's super clever and simple and also very reliable because there isn't a bunch of magic hacks that Empower this in fact they got to unhack remember the example here where I showed this headers there's a commit here that GMO made founder mode where he deleted headers from there and add a dynamic IO true but there's another part here which is we need a way to know when you call headers or cookies this thing is dynamic and I'll show you how they did that let's say I use headers in here I'll import it from next headers let's say I use the value const header values equals wait it's a promise now so if I want to header values. getet I get an error here property get does it exist on type promise did you forget to use a weight headers is no longer a magic function that paints things as Dynamic this gets painted as dynamic because you have to put in a weight in front which means you have to make this a sync which means it's now painted that's why if you were curious headers and cookies and these other helper functions became asynchronous it's not because they're slow now and they need to be at async the reason is because the new model uses async and a weight as indicators that this is dynamic so by forcing the header's call to be awaited you have now painted this as Dynamic when Wyatt first showed me this code in the presentation it broke my brain and if you look at the replies to this tweet it clearly wasn't just my brain okay so it tries to pre-render and uh returns a Honda Prelude it's the stuff I see in my nightmares this code is literally what I don't like about JS this code makes people ask what theme you're using yeah seriously though this is so cool like the idea of using set immediate in the event loop as your method of figuring out what can and can't be cached is truly Galaxy brain it's unbelievable and it's not like this stuff is coming in the future this is a theoretical solution this is a real solution that you can use right now and I'm already starting to use an apps and this isn't going to just affect NEX in the react ecosystem I talked to a bunch of other people like Ryan carniato who's hang it out in chat and immediately saw ways to use this for some of the stuff that they're doing over in the solid and solid start world there's a lot of cool potential when these things are discovered and as much as we like to on react and next for copying what everyone else does this is proof that there is still real Innovation going on over there this is a novel solution to some very pain problems that lets us opt out of a ton of compiler complexity and if your issue with react next is that there's too many weird hidden behaviors and too many magical things you need to know the names of here you go they're using JavaScript to solve it in many ways this makes nextjs the most JavaScript full stack framework because it's using JavaScript as its method of building these caching layers which I personally think is awesome curious what you guys think though is this nonsense or is it as cool as I'm saying and until next time peace nerds




## This might be the end of WordPress - 20240926
if you're anything like me you've probably avoided thinking about WordPress for almost a decade now it was a big part of how I got into the web and also out because I disliked working in WordPress so much that I turned from web development entirely since then things have gotten a lot better the ecosystem's in a great place and I've now moved to being a frontend Dev again so it is what it is but over 40% of the web is still running WordPress yes 40% of websites are on WordPress and if you go to the logs for your site right now you're going to see a bunch of bots hitting SL WP admin looking for potential exploits because the whole web is WordPress why would you not check anyways we're not here to talk about WordPress and its technical implementations or anything about using Wordpress well kind of we're going to talk about two letters WP and an insane drama that has ensued since I saw a really funny comment as we were getting started you can rate the drama by the number of required tabs my browser is lagging from the number of tabs this is going to be a fun one all starts with this post and more importantly the talk that happened at word Camp right yeah word Camp which is like a WordPress event about WP engine for some real quick context WP engine is one of the many sites you can use to host your WordPress site they're a service that hosts WordPress for you that means that they are both using Wordpress and kind of competing with WordPress because WordPress has their own.org for the open source part but also a com for hosting WordPress and this is all owned by automatic automatic is the company that is the wordpress.com and.org they manage the repo they manage the codebase they are the ones who make WordPress but they also have a hosting service which is how they make their money and wordpress.com makes a lot of money that said WP engine also is making a lot of money and apparently their use of WP in the name is starting to cause confusion and Matt who is the founder of automatic and the guy who started WordPress has feelings so we're going to start with their blog post and then we're going to go through the massive explosions that have been occurring in the community sense WP engine is not WordPress it has to be said and repeated WP engine is not WordPress my own mother was confused and thought WP engine was an official thing their branding marketing advertising and entire promise to customers is that they're giving you WordPress but they're not and they're profiting off of the confusion it sounds like you're the one who's confused already Matt where like WordPress is an open source framework for hosting and WordPress is also wordpress.com a hosting company so you have the open source framework for your site and you have the hosting platform that has the same name imagine if nextjs was the name of versel if they just called versel nextjs they didn't do that because they're not dumb and they didn't do that because they were confident they could build something greater than WordPress with their hosting platform which they did because I used versel before I ever tried out nextjs so yeah anyways I spoke yesterday at word Camp about how Lee whitlinger at Silver Lake a private equity firm with $102 billion of assets under management can hollow out an open-source Community to summarize they do about half a billion dollars in revenue on top of Wordpress and they contribute Back 40 hours a week automatic is a similar size and contributes back 3,915 hours a week today I would like to offer a specific technical example of how they break the trust and sanctity of our software's promise to users to save themselves money so they can extract more profits from you WordPress is a Content management system and the content is sacred every change you make to every page every post all tracked in a revision system just like Wikipedia this means if you make a mistake you can always undo it it also means if you're trying to figure out why something's on a page you can see precisely the history and the edits that led to it these revisions are stored in our database this is very important it's at the core of the user promise of protecting your data and it's why WordPress is architected and designed to never lose anything WP engine turns this off they disable revisions because it costs them more money to store the history of the changes in the database and they don't want to spend that to protect your content it strikes to the very heart of what WordPress does and they shatter it the Integrity of your content if you make a mistake you have no way to get your content back breaking the core promise of what WordPress does which is manage and protect your content I didn't even remember that WordPress does that this is going to be fun this is going to fall apart fast I can tell here's a screenshot of their support page saying that they disable this across their 1.5 million WordPress installs every WB engine site has WordPress revisions disabled by default if you need a more extensive revision management system we recommend using a third party editing system rather than relying on WordPress revisions they can only be enabled by contacting support they can not be enabled in the wp config or phpi files they'll be overwritten if you migrate to a site with existing revisions and you'd like to preserve them reach out to support to have revisions enabled support can help you enable fre revisions at the start old revisions will be automatically removed after 60 days they say it's slowing down your site what they mean is that they want to avoid paying to store the data I I have a feeling it does WordPress is notoriously slow and if disabling and and like a multiplier on the amount of data you have makes it faster I can see it but I don't know enough about how it actually works to confidently say that turning off R Visions makes it faster and so we can ask though does turning off revisions on a WordPress site make it meaningfully faster performance gains are usually minimal for most sites I will say since they're hosting any WordPress site if those WordPress sites have terrible plugins it's possible that those are causing the revisions to fall apart I know now that I'm my memor is coming back I had certain plugins that made revisions very bad so that is a thing and if they're trying to make it as simple as possible I can understand why they would try it but as Matt's saying here WP engine is the only one that does this they are strip mining the WordPress ecosystem giving our users a crappier experience so they can make more money what WP engine gives you is not WordPress it's something that they've chopped up hacked butchered to look like WordPress but actually they're giving you a cheap knockoff and charging you more for it that's a bold reach from they turned off this one feature to it's not WordPress anymore this is one of the many reasons they are a Cancer to Wordpress and it's important to remember that unchecked cancer will spread okay don't start the Hundred Years thing if you guys don't already know WordPress is doing a thing where you could buy a WordPress site and hosting for a hundred years which is a weird way to get money early but Jesus Christ um this is going to be a fun one I can already tell but let's hear the whole story quick this was an article from Justin Justin fman who is deep in the world of CMS stuff who has done a breakdown of the whole order of events here that I wanted to use to try and keep a grasp of what's going on we've been looking through a lot of different sources huge shout out to my research team for helping me cover this as best we can this article is probably the best top to bottom so we're using it as our main source but we'll be hopping around throughout Matt versus WP engine too far WordPress co-founder Matt Mullen wig picked a fight with WP engine even calling them a Cancer and for what it's worth these types of petty disputes are far from New for Matt all the way back in 2015 he got in a fight with one of the people in the community making themes yeah Chris Pearson's created DIY themes which was an early commercial theme industry yeah Chris did not like the weird religious cult going on in WordPress and that he should be able to monetize it with things like themes but Matt wanted to squash Pearson he didn't like somebody else making money that way off of what he considered his ecosystem they've both been childish throughout but the the main thing I wanted to highlight here was that um since the theme thesis was doing well by this Chris dude Matt bought the domain thesis. comom for apparently over $150,000 sorry the $100,000 offer on the table for Mullen wag Larry gave Pearson an opportunity to buy it for 115k which he didn't do but again like Matt bought this domain for over $100,000 just to troll this dude that's the level he's on he's he's a a chronic hater anyways did you catch Matt's keynote talk at word Camp us this year was pretty boilerplate as far as his talks usually go but there's one part that stood out to nearly everyone that was his comments towards WP engine and their lack of contributions to the WordPress project Matt Express his annoyance at the contributions made by WP engine to Wordpress comparing their 47 hours per week to automatics 3,700 you get the idea the basically the same quote that I had from that other blog post these are some pretty strong words and I'm sure it doesn't feel good to be called out in a negative light at one of the biggest WordPress events of the year as such I was curious to see the response from WP engine as these were some harsh words from the man at the top I put a tweet out saying the same waiting on WP engine's response to Matt in the WordPress Community after getting called out during his talk the post which was cited in an article on WP Tavern also just random tangent part of why there are so many blogs about all this is because it's because WordPress is the original blog platform so all of the most hardcore WordPress people are also bloggers and have multiple blogs so all of them wrote about this cuz they like blogs it's why they're part of the WordPress World which is just it's a funny thing that it's just clicked in my head the reason there's 30 articles about this is because everybody in this ecosystem has a Blog anyways as you would expect WP engine wasn't far behind with their response in summary they said something to the effect of the following WB engine has contributed to Wordpress Innovation for over a decade advancing the ecosystem and supporting devs and millions of sites they invest heavily in the community Through sponsorships educational events like decode and development tools such as fjs and WP graphql WP engine is committed to fostering creativity and empowering WordPress developers to keep their CMS at the Forefront of web development this is making me think more about the contribution Point CU I I really hate this like hour split point because automatic chooses how much time other companies spend to an extent they pick what's being worked on what efforts are being Advanced which PRS are getting reviewed what code is getting merged what features are being focused on all of those things are being done by automatic because it's their project it's unfair of them to expect other companies to contribute even close to their level because they kind of control the level they can contribute at what I would like to see are how much are other companies contributing in terms of hours a week and if he can't site that he's only comparing a random contracting company and like hosting company to the company that made the thing and controls it that's an unfair comparison and I wish he made a more fair one so I could actually judge it instead of being like what the are you doing the point versus the delivery Matt's become far more divisive in recent years are you sure about that seems like he's been a pretty Petty bastard for a long time now so I don't know if I agree that this is recent but I'm not in the ecosystem I can't say for sure I'll take their word on it call it the size of Wordpress or maybe just the demeanor of someone who has been the focus of so many attacks for two decades whatever the reason he's clearly tired of being politically correct all the time how many times he say cancer in that article Jesus yeah not caring anymore what often happens is that he'll make a point people will argue the point for a moment and they start to get angry at the way the point was raised they attack the messenger for lack of a better term but it's not like isn't warranted at times I've been around WordPress long enough to have seen Matt air out personal vendettas rather publicly wrapped up in some kind of I'm looking out for what's best for everyone sentiment I hate this I hate when people are and they get away with it because they're saying I'm doing it for the greater good God the the the fake nice guy like I'll take an over a fake nice guy any day the people who's like whole aesthetic is being nice I hate it not a Kent sub tweet by the way Kent's actually that nice as crazy as it sounds keny dods is 100% real I didn't believe it until I hung out with them multiple times that human being is pure kindness and gold from like out to in but there's for every Kent dods there's 100 people thinking and acting like they're Kent dods so I feel you here this actually ends up having the opposite effect in that the focus shifts to Matt the person not what it is that he's trying to point out because look as far as I can tell there is a valid point here this post by null does a pretty good job outlining that point it's a valid discussion but I think many comments are missing the point WP engine is not yet another WordPress company but a $400 million in annual revenue machine with only 1,00 employees that's insane that a WordPress company can have 1,00 employees horrifying the question thus being if you're the market leader exclusively selling WP and nothing else then why are you only contributing one to two full-time Engineers 0.1% for the future the options come down to the following we agree with five for the future and are putting a plan in place as as there have already been multiple discussions we don't agree with the five for the future and contrib in other ways or we don't want to contribute to F for the future as it'll negatively impact our margins and profit Matt's point is simple there's a massive amount of value extraction going on here you know what I need to look up what this five for the future thing is quick tldr on F for the future it's a WordPress idea again somewhat cold Vib somewhat trying to be good stewards the point is that they want you to try to contribute 5% of your time or resources to the WordPress project if you're making a lot of success off of Wordpress so in the case of 1100 employee making $400 million in annual revenue they're expecting 5% which would be a bit over 50 employees and a shitload of money and they're not getting that that said you can't just pour infinite resources into something like WordPress and expect it to keep getting better like how much more needs to be improved in WordPress right now I would be very curious to look at like what the poll requests are like on WordPress like what's changing what are the actual thousands of hours going towards having more Cooks in the kitchen doesn't necessarily make things better expectation that every company contributes that much is that's not realistic there's no other world like imagine if every company that succeeds with Linux if every hosting company in the world had to contribute 5% of their profit to Linux that would just make Linux worse at that point Matt's point is simple there's a massive amount of value extraction going on here as the money being made on WP specifically isn't even interfacing with the open source project but directly exiting this ecosystem in some ways highlighting that WP engine isn't planning to be here beyond the next economic cycle otherwise it would surely strive for five for the future as with anything open source small seeds now become large trees later the problems exacerbated if WP engine is continuously expanding its moat and constricting the Project's ability to grow as $100 dwb engine instead of Blu host makes WordPress or open source worse off I don't fully agree with this there's a point at which the thing is well enough funded if WordPress is struggling because there isn't enough funding then we should be having that conversation not this one because this conversation isn't WordPress is struggling they need more help it's this compan is finding success with WordPress therefore they are evil this would people in chat are getting it which is awesome if this is how open source worked it would ruin open source I absolutely agree and like honestly I'd rather the license just be explicit about it than this weird reality of if you get popular enough you can still use it but the guy who made WordPress is going to be an to you that seems much worse than most open source models this is like the the lus bfdl but less benevolent this is also fun that Matt ran up hole and most people think WP engine should still be allowed to have a booth at word Camp most people disagree with him I certainly disagree with him Matt's been popping up across various channels seemingly defending his View and attempting to make points about WP engines lack of contributions despite their size and Financial Resources unfortunately those points are now falling upon deaf ears because of the manner and frequency in which the attacks are coming to be fair I think the core point is bad too but the fact that it's packaged with all of these horrible things with it that's not good this is just disaster Matt published this post on the official wordpress.org news about how WP engine turns off a vision history which he considers an important feature in wordpress's core in order to save money to drive home another point he uses the mini story about his mom confusing the two Brands which is the basis for the title of the post to cap it off he refers to WP engine as a cancer yikes so me wonder a few things first are people actually confusing WP Engine with WordPress two it ever okay to call businesses and the people working there cancer yeah but it depends it has to be very severe and then three should this have been posted on his personal blog instead yeah putting that on the wordpress.org sites shitty to say the least like that's real shitty imagine if like there was an official Linux blog and lonus went on a rant about how shitty Nvidia was there like that even for lonus would be a bit much so instead he just complains in interviews speaking of the personal blog Matt did write a blog post about Investors and if they are inherently bad something he likely wanted to touch on because WP engine's impressive investment over the years he contends that investors are essential for entrepreneurship but they are both good and bad investors suppor to evaluate their track records and actions after investing private Equity investors can be beneficial especially when they respect open source values and support the community as seen with automatics investors and actions matter More Than Words companies should be judged based on how their behavior impacts communities and ecosystems overtime yeah all fair I'm also in the middle of one of my first like bad investor experiences I'm just going to ask them probably but like it's stressful even for like small amounts a bad investor can just be such a drain I'm not surprised by his Viewpoint given that automatic has taken its fair share of investment though I do take exception to his claim that investors are essential for entrepreneurship that is not true at all in the same sense that like a stove isn't essential to being a chef yeah but you have to understand that you're the exception like most successful companies start via investment or have investment is a key part of how they found success same way most chefs use a stove the statement that stoves are essential is not a statement saying you can't cook without a stove it's a statement that says stoves are essential investors are itial not a statement saying that you have to have one to be an entrepreneur it's just that it makes success significantly more likely and succeeding without investment makes it significantly harder I mean I don't know what learn Dash's Revenue looks like I'm sure learn Dash is doing very well but like it's hard to find that level of success like you're not a publicly traded company you're certainly not like a multi hundred million if not billion dollar company like that's bootstrapping and like bootstrapping and Indie hacking are very different from entrepreneurship just weird things I don't want to like sit here and complain forever about it but like the thing that levels iio is doing and the thing that like the founders of notion or that I'm doing those are different things we should be able to acknowledge them as different speaking of not being able to acknowledge things Matt's Mind Is Made Up Matt has always taken on the role of open- source protector and whenever he feels that it is being taken advantage of he attacks his attacks can be quite harsh again the weird $100,000 on the domain to with somebody thing he he goes hard he feels that this is happening with WP engine though it also has an adverse effect for him in that the community starts to highlight some hypocrisy so restricting third party plugins and themes for years is okay competing for.org plugins in the scps is okay but turning off revisions is cancer yeah for what it's worth wordpress.com has been very strict about what plugins you are and aren't allowed to use as well as themes because they want to make money with their features instead which is not to the spirit of Open Source imagine if ell made it so you couldn't deploy other Frameworks or use other vendors for accessing data like that would just be what the are you doing but he does that and then he complains that others are making Alternatives because WP engine certainly doesn't have those same restrictions history has shown that when Matt makes his mind up about something nothing will shake him from it for what it is worth this is the biggest red flag about anyone for me an inability to change your mind and like publicly so something I will often ask people if we're like deep the Weeds on a disagreement it's a simple question what would it take to change your mind what piece of information would convince you that this isn't true so if we go back to the earlier take of what piece of information would it take for me to be convinced that investment isn't an essential thing to be a successful entrepreneur I would need to see a significant percentage of companies become billion dooll businesses that are on the stock market without taking investment money early stage I could set a number like if there's 5% of Fortune 500 never took investment money I'll immediately walk that stance back but it's important to have a threshold in your head of like at what point will my mind change there are even some crazy studies on this where if there's somebody who has a strong belief and you present them information that confirms the belief it might make them believe it's slightly more but if you present them information that contradicts the belief it makes them believe it even more than that so if somebody has a set belief and you try to enforce it it'll become slightly stronger if you try to push back on it it will explode and it'll become way stronger and that's a toxic trait that humans have and if you're talking with somebody who can't get over that and they can't reflect and come up with the point at which their mind would change at this point I just cut off interaction I stop because those people are taking time bombs and it sounds like Matt is one of those people if you're unable to identify the point at which your mind would change and then publicly do that mind changing I don't want to talk to you and I've changed my mind about a ton of to the point where it's become a meme because I've changed my mind on so many things since I started the channel like oh Theo changes Frameworks all the time yeah I changed my mind about what doesn't doesn't make sense and what doesn't doesn't work and I document all of that because I think it's important for people to see that over time we grow our minds change we evolve and we do better and you cannot do better if you're unwilling to change it seems like Matt has no interest in doing better because he seems very unwilling to change as the author points out here backlash makes him dig in further that's the key red flag I just cannot deal with if being shown that you're wrong makes you feel more right you are a person I don't want to talk to he go down on that ship but he knows the ship will never go down because the ocean is the community that contributes to and depends on WordPress in their daily lives that also sucks that he affected and this is the thing I've seen a lot too where certain people once they hit a certain level of notoriety and reach and have a community they can get away with being wrong because there's people who will blindly follow them down those wrong paths and this the thing I've also tried really hard to prevent in my own Community I don't want to ever be in an echo chamber I want to know that if I say something stupid chat will call me out for for it and my comment section will push against me or my friends who talk to me about these things all of the time will tell me hey Theo you screwed up here and if that ever changes then I'm going to stop doing content immediately because I need to know when I'm wrong what Matt has done is the opposite he's built himself a place where it doesn't matter how wrong he is his position doesn't change but it also has the opposite effect where if he does change his mind and he becomes more right it might actually hurt him because people will lose some of that like oh I can trust everything he says the holier than thou thing I would say somebody like dhh is in a similar boat too where he has built this cult around him that makes it really hard to push back on any of his beliefs and that sucks it keeps you from growing and these communities become these talk success pits too and I'm thankful to see people are finally pushing back like this pole here is the most hope I've had thus far that maybe Matt's poked his little bubble a little too hard here anyways qualifying contributions is in portaste if I take the time to separate the inflammatory rhetoric and poor choice of message delivery I do think there's an important point that Matt is bringing to the community's attention WP engine indeed does have the fortune in position to contribute more to Wordpress in terms of hours what I don't like however is that Matt is outlining what he considers to be an acceptable contribution sponsoring word camp that doesn't count not to him anyway this is a way of polarizing the less visible in the community the individual developer who has a small plug-in business is proud to sponsor their local word camp but the message being sent from The Boardroom is that this is a meh form of contribution in other words don't feel too good about it it's not really valued that does suck it's important to allow all contributors to feel good about their types of contribution and for Matt to go after WP engine this way that has people getting caught in the crossfire and Strays for sure imagine you're like a small startup that's doing well with WordPress and you wanted to contribute to automatic and WordPress so you spend a bunch of money like half your company's revenue for the year in order to get a big booth at word Camp to celebrate WordPress and thank them for it and then you see this all going on you're like wait but I just put all this money and effort in to contribute with word camp that doesn't count it would just it would feel really bad it would feel so bad Matt has come down hard on WordPress host for some time GoDaddy pagely which is now part of GoDaddy as well as Pantheon all come to mind think he has higher expectations of them than the average WordPress user maybe we all should they're the ones with the money and resources to really move the needle for the WordPress project to date doesn't appear like any host is living up to Matt's unspoken expectations and now for where it gets real fun on September 23rd not too long after this post was originally published WP engine is ised a cease anded assist against Matt and automatic I must say he does not look good especially all the threatening texts that he sent prior to starting his public attacks onto WP engine one day later September 24th Matt and automatic issued their own cease and toist with some heavy emphasis on the use of the WordPress trademark this is interesting because there's many businesses that use the WordPress name similarly to WP engine this could have some far-reaching ramifications for the entire industry depending on how it plays out yep and we're going to read these because I am so excited here's the seasoned assist from WP engine to Matt we are a litigation Council for WP engine and we write to address the serious and repeated misconduct automatic has directed towards WP engine over the past several days stunningly automatic CEO threatened that if WP engine does not agree to pay automatic his for-profit entity a very large sum of money before a September 20th keynote addressing at the word Camp us convention that he was going to embark on a self-described scorched Earth nuclear approach towards WP engine within the WordPress community and Beyond okay so Matt's actually threatening them ahead of time and all of this is because he wants more money okay this will be fun if I'm going to make the case to the wp Community about why we're Banning WP I need to do it in my talk tomorrow your delay is just trying to remove that I have 14 slides so far working title for the talk how private Equity can hollow out and Destroy open source communities a story in four parts should I run these slides or not is next week a negotiation on the percent or happening at all I'm not going to be able to walk it back I know this is the new nulear option it sets us down a specific path this is all almost like manic texting this is insane if you're saying next week that's saying no so I'll proceed with the scorched Earth nuclear approach to WP engine thank you for the clarity it gives me time to work on things and hone my message I'm literally waiting for them to finish the Raffles so my talk and start this is like an insane intimidation tactic to just be like spam texting them during the event picture of the crowd I'm literally waiting for them to finish the raffle so my talk can start I can make it just a Q&A about WP very easily actually insane and now there's proof of people canceling their subscriptions to WP engine because of Matt's commentary and Matt reposting them in order to signal boost them so it's there's demonstrated business harm too also no longer listed on wordpress.org recommended hosts it's a whole thing and then automatics response was to go after them for trademark for those just catching up since being taken over by a private Equity Firm Silver Lake in 2018 WP engine has built a half billion a year business by confusing customers with their commercial use of the WordPress and woocommerce trademarks automatic has tried for years to get WP engine to obtain a commercial license for trademark use and contribute to the core software that they rely on the wp engine has repeatedly declined to be a partner or contribute if you gave $1 to the WordPress Foundation you'd be a bigger donor than WordPress engine September 23rd automatic sent the following cease and toase letter to WP engine outlining WP engine's patterns of unauthorized usage of the WordPress and woo Commerce trademarks and demanding the engine stop such Behavior W engine's business model is based on extensive and unauthorized use of these trademarks in ways that mislead consumers into believing that WP engine is synonymous with WordPress it's not this is trademark abuse Not Fair competition kind of nuts to go die on an entirely different unrelated Hill because you didn't like how things were going and you just want this company to hurt they said they have exhibits let's see them that's their trademark their trademark their trademark woo Commerce woo Commerce I want to see the exhibits of them misusing okay cool here is because they say WordPress on it it's misuse they say WordPress so it's misuse they say WordPress so it's misuse for any lawyers that might watch this I have never confused WP engine in WordPress when I'm saying the words over and over I sometimes mental autocomplete to saying WordPress cuz I'm reading reading it and when I'm reading Matt's use of WP which he means is WordPress I say WordPress so blame Matt for using that abbreviation which isn't part of their trademark to mean WordPress and causing me to say it over and over again as I'm recording I would never have mistaken these two Brands I will not allow for my Works to be cited as examples and if they are they are being misused and I trust the defense to take advantage of me saying this now in order to use that as a counter God I really hope this stuff doesn't end up in Cor but if it does uh you know I'm I'm on WP engine side but all sides here are kind of shitty even a mere 8% royalty on WordPress engines 400 million in annual revenue that's what they're asking for an 8% royalty that's insane so an important call out somebody found this in the WordPress Foundation trademark page the abbreviation WP is not covered by the WordPress trademarks but please don't use it in a way that confuses people for example many people think WP engine is WordPress engine and officially associated with WordPress which is not they've never once even donated to the WordPress Foundation despite making billions of Revenue on top of Wordpress they do spend a lot of other money on WordPress like word camp but don't call that out but we also just checked web archive this is not even a month ago the abbreviation WP is not covered by WordPress trademarks and you are free to use it in any way you see fit that that's all you need to see here the trademark thing is they're just lying this is what it said before now they're explicitly calling calling it out WP engine they say please don't use it in a way that confuses people which isn't like a formal request but they can't defend themselves with this in court they have literally no way they cannot go after the use of the wp abbreviation they they can't they have clearly made that impossible for themselves going forward I like how UI wizard put this WordPress is a platform only automatic makes it confusing because they use the name for their company and their platform I totally agree again versel makes nextjs but those are two different things versel is the company for hosting that can use lots of other platforms and next is the framework that you can host many other places but the fact that like wordpress.com and.org are different things is very confusing wordpress.com is the commercial hosting platform by automatic wordpress.org is the site for the open source WordPress framework to show some more of this confusion actually I saw this awesome mind map that somebody made because this was hard to follow shout out to Josh robs for creating this is there a homogeneous spirit for there to be a community if so what does the community want all the other questions that can come from that but that side is less interesting what's more interesting here is the WordPress engine because Matt's take is WP is bad in their points why he says they don't do enough for the five for the fight or whatever that thing I talked about earlier was he also said that they disable post verions by default being bad they're owned by Silver Lake which is Bad and The Branding is confusing his example for this is that his mom was confused also does she know the difference between Java and javascripts great question as the author said they've never known anyone confused by this especially when you compare to wp.com versus wp.com charges for you to be able to change fonts and GoDaddy disables Kon which is even worse wasn't Matt an investor when WP engine was doing this wasn't Matt speaking at WP engine events when the office was going on and this is an irrelevant shot like why is this the thing he's calling out like he just randomly changed the thing he was calling out like four times he started with they're not really WordPress then he pivoted to they're violating the trade mark But in reality he's upset that they weren't giving enough money so he went after them for not giving enough code it is just kind of crazy I see why someone would be inspired to make this just to keep track of all the weird tangencies going on because Matt's kind of insane here it's clear that he doesn't have an actual specific reason that he's upset with them he just hates everything they stand for and is just grabbing at all these different things to try and overload them with hate interesting apparently wordpress.org has blocked WP engine customers from updating and installing plugins and themes via WP admin there's no impact on the performance reliability or security of your site nor does it affect or impact your ability to make updates to your code or content fun because wordpress.org is the open source host of all the plugins and things you can install and it seems like they're now blocking WP engine hosts which is just pathetic and Petty as that's insane these guys Matt is so petty I can't believe he's getting away with this like like how Petty is this Tweet someone made a brilliant suggestion use the commercial trademark license to start a new hosting brand called WordPress engine and match all the pricing and offerings of wpe spend Millions on marketing WordPress engine and get customers start a conference recode WordPress engine Roundup and a building WordPress Engine Services or series instead of torque we'll call it twist this dude every body saying here that like they're not getting what he's saying he's getting ratioed really hard WordPress and woocommerce are products they offer hosting for these products service descriptions are considered trademark violations this would send shock waves across the hosting world and would be deemed ridiculous yep Matt's just changing the point he wants to make over and over again because he doesn't have a real one I'm open sourcing my personal nonprofit donations for the past 12 years just bragging and Dick measuring about how much money he is donating flexing how rich he is and also in turn flexing how little actually need the money from WP engine like what what a weird thing to flex also here's Matt calling out on Twitter in order to use the WordPress trademark commercial you need to have a commercial license from automatic this is not a thing they have pushed ever before and as people are saying in the comments here it's tough to shut the barn door once the horses are out of the barn in copyright law yep good luck with that in court when you set a precedent that it was okay up to this point even as an investor it's hilarious that Matt is blasting WP for corporate Shenanigans while doing this in the most greedy corporate way possible yep hypocracy aside Matt's damaging WordPress wp's ecosystem is precisely why we're here if he scares enough of them away there's going to be better Alternatives down the line it might not be next year but it'll be here soon enough I get he's mad I get he's frustrated but he needs to act like a leader and take some anger management classes yes people in higher positions need a lot more coaching than you would think since I finished filming this video like literally less than an hour ago another blog post on the wordpress.org site WP engine is banned from wordpress.org I saw this briefly mentioned it on the wp engine support page but here's the official statement any WP engine customers having trouble with their sites should contact WP engine support and ask them to fix it I won't bore you with the story on how WP engine broke thousands of customer sites yesterday in their ha Hazard attempt to block our attempts to inform the wider WordPress Community regarding their disabling and locking down a WordPress core feature in order to extract profit this this sounds like too many layers for me to believe it at all heard a rumor that WP engines trying to remove the news feed from WP admin dashboard so people don't see my post about them can anybody confirm or deny that we had a couple users where the website's broke because of that sure they don't want you to know the truth you don't want to tell the truth Matt you're a lunatic and yes I I can understand why they would want to add a quick filter to make sure a hit piece on them isn't included on the dashboard for their website that makes all the sense in the world so for you to just block them entirely also this is straight up harassment telling people to go contact their support and ask them to fix it when they're not the ones who broke things this is you inciting harassment I as a public figure I'm very careful about things like this in fact I'll do it now do not harass anyone I'm covering in this video this is unacceptable what he is doing is unacceptable and if I catch any of you  doing something even vaguely similar to what he's encouraging I'm Banning you you're not part of my community I don't allow that I don't care how long you've been a fan for don't harass the people I talk about he is literally encouraging it in this post though what the what I will tell you that pending their legal claims in litigation against wordpress.org WP engine no longer has free access to wordpress.org resources WP engine wants to control your WordPress experience they need to run their own user login system update servers plug-in directory theme directory pattern directory block directory translations photo directory job board meetups conferences bug tracker forums slack Pingo Matic and showcase their servers can no longer access our servers for free the reason WordPress sites don't get hacked as much any more is we work with hosts to block vulnerabilities at the network layer WP engine will have to replicate that security research on their own why should wordpress.org provide these services to WP engine for free given there attacks on us there attacks on you  you're joking right WP engine is free to offer their hacked up bastardise simulacra of wordpress's GPL code to their customers and they can experience WordPress as WP engine envisions it with them getting all of the profits and providing all of their services if you want to experience WordPress use any other host in the world besides WP engine WP engine is not WordPress well uh I guess it's time to move to Drupal right I got nothing else so until next time peace nerds




## This might change how we build UI forever - 20240905
introducing the new CLI install anything from anywhere add components themes hooks functions animations and generated code to your apps this marks a major step forward in distributing code that both you and your llms can access and use let's take a look oh boy am I excited to take a look if you don't already know Shad Shad CNU is a thing I've talked about quite a bit and used even more it's the the perfect combination like if you've seen my old video about how to think about UI libraries shadow almost feels like it is the natural conclusion of all the things I talked about there where it provides the useful components without compromising on the ownership because with Shaden is not a library you're installing it is components that you're adding to your project and that code lives in the project you might already know about all this but just in case for those who don't if I hop into Pi thing the service I actually just released today believe it or not we can hop into components slui and all of these are the buttons that were generated for me by Shaden the dialogue box generated for me drop down menu I have the source code here so if I want to change things I want to maintain things I want to update things it is all code I own and there is no compromise there and that's why I like Shad CN so much not because it's a beautiful designed Library not because it works really well in typescript I love it because it is writing the the right code and putting it in your code base without compromising the ownership that doesn't mean that it doesn't use packages it still uses packages for things that make sense to like in here the react dialogue the react dropdown menu slot and switch these are all provided by radic which is a headless UI library is the term because these provide behaviors not ways things look and then Shad integrates it gives it Styles adds Tailwind all of that to make it look and interop with your code base really well it's just a set of really well-designed components but adding them to your code base has been a weird thing because it required that you had all the right dependencies all the right versions of things Tailwind already set up and configured and all of that and then you put it in the right place so it could interface with other things like if the accordion needed to use the carrot which was a different component that they provided getting all of that to interface together was not easy which is why Shaden created the CLI where you can run the command to add something directly over time the stuff you could do with shad Cen grew v0 created by versel and Chad who works at versel now was built to make it easier to generate uis and when you generate a uui with this it is actually using a lot of Chad CN components in the process so if I have like gallery of pictures with a drop- down menu on top to select a tag and it will now generate different uis based on the prompt that I gave it so now we have this fake UI with profile images in the filter by tag and I can click and drop down but if we look at the code this where things get interesting see that this code that they gave me is importing dropdown menu drop down menu trigger all these things from at component UI dropdown menu I could go just copy this code and drop it in my code base but if I don't have all of these components already in my code base it's not going to work CU it's expecting those so what they added is the ability to run the CLI command npx v0 ad and then the hash for this specific instance and not only will it create this particular component it will also grab the Shad CN components that it depends on to make it as simple and reliable as possible to grab this AI generated code and drop it in your code base and that's why the CLI is so interesting because the first version of Shaden was copy paste the code in your code base make sure you install the right things V1 was the CLI V2 is arguably funny enough named vzer it's the AI generation thing that we just showed with that special CLI to add that specific generated version and now we're on VOR which is the Shaden overhaul to make it way easier to add anything to your code base what do I mean by anything let's dig in because what we have now is way further than we were before but what's coming is even more exciting the CLI now has support for all major react Frameworks out of the box next remix V and even laravel yes if you're using laravel with inertia you can now use the Shad CN CLI to initialize Shad cn's components in your PHP apps at least somebody in the PHP World cares about user experience that's a joke they're actually pretty good about that that's why inertia exists yeah as I said here when you initialize a new app we update your existing Tailwind files instead of overriding them that's huge as someone who spends a lot of time putting crazy things in my Tailwind configs the fact that chaden and knit would override that pissed me off a lot so fixing that is huge a component now can ship its own dependencies take the accordion for example it can Define its own Tailwind key frames that's huge if the accordion has its own animations and it's using Tailwind for it it no longer has to ship that as custom CSS it can just add that to the Tailwind config and that's kind of the magic of what they're doing here no longer does the Shaden template just run a pnpm install and then add these files to your code base now it can actually introspect and modify specific files based on specific needs and that's why I'm getting excited because I see a future where I could run npx Shad CN add upload thing and it will add upload thing to your codebase and put the right files in the right place and add the right layers in the right spots using this CLI as the way to do it I almost made this CLI myself I actually snagged the T3 npm package and my original plan was to build something like this to make it easier to just add things to your code base I might still do it I have to use that package for something it's so cool but like that was a specific goal and seeing them achieve it here is really cool as Shad said this means we can now install hooks utils themes animations routes and complex blocks with multifile components everything is added right where you need it this is a huge unlock for code distribution yes abs absolutely this is and I am so excited for what we could potentially do with this this example npx Shaden login1 it grabs it from the registry it creates those and now the new login page just exists in your code base how cool is that that you can run a command and it creates new routes and new experiences in your app based on their Syntax for defining it it's so cool it's so cool you can also install remote components that are using URLs so if we have a VZ block so something we chat it with VZ about you can add it that way someone just dropped an example in chat too uh that doesn't have anything in it but you could point it at a Json file and it will parse the right things from it if it's formatted correctly and it will just add that to your code base that's so cool they also prove the init command which is huge because the init command was not reliable before it's a small thing but like I hate the at slash syntax just it's a personal thing I like the till the slash AAR ly there's something else that's better I forgot what it was but there's a thing that like exists in JS natively that you can use here instead I have a thing saved about it that somebody shared but I have a personal preference and it did not like my personal preference in the past I'm thankful that they fixed it so this example they init a Shaden project sidebar 01 login 01 so it's adding those as well you can create a new next project with this pick your theme and now just running the npx Shad a knit command with a couple of those like the things you want to add you just created a new next project that has the login page and the other route the dashboard all just by running those two command or that one command that's really cool the ability to like use this to add something that you quickly generated to your existing project or even to start something new if I was one of those startups that's trying to do like prompt-based generation of like apps I'd be shaking in my boots right now yeah we created a new schema that you can use to ship your own component registry and since it supports URLs you can use it to distribute private components that's actually really cool if you had a URL that's only accessible on like a VPN you could use this to hit that as a way to like if you're spinning up a new project and you need your company's like design Library this will let you hit that on a private Network and get it directly that's so cool there's a whole change log for us to dig into as well here okay so components that Json will now exist in your project apparently you can look they called out my weird case here you can use different import aases by specifying it there that's really cool shall we init one I'm curious enough let's do it start a new next project and gu this double nested whatever now we have this why did it use bun if I did pnpm is it defaulting to bun when you run pnpm the whatever small thing I remember this happening in the past with um the create T3 app template funny enough let's go to dashboard yeah that just worked am I running my project locally is that why the CSS is wrong no it's not okay seems like there are some issues with the CSS and the coloring here because a lot of that is not following contrast rules it's possible as using the dark mode because of my computer yeah this this looks like the dark mode is being handled properly this looks like it's not so they have the separate dark rules here all applied as variables by the way which makes it a lot easier to change these things and have them persist everywhere heavy use of CSS variables to make life a lot better but the really cool thing is it's giving you the code it's not like it's generating this code or grabbing it from somewhere else you never get to touch it login form is a file in my codebase that is using all of these components that are from Shad CN and I can go in here and change it and use it however I want that's really cool and the exciting future that I see here is the ability to have this be your onboarding flow so imagine if instead of login form being this generic thing with no functionality that gets added what if you could add clerk login form or stack off login form or Luchia login form and it will add this code and the logic and the package necessary and the endpoints of those are necessary too the thing I'm excited about here is that this isn't just like Shaden being easier to adopt to do UI things this is a step forward in how these init things work the classic docs page everyone's had to write at some point point of all the steps to add this thing to your project could be replaced with a single command and then you can just read the diff and that's as silly as it sounds one of the things I'm most excited about to run the command see the thing working and then understand it after because right now the order of events is the opposite is I have to go through the upload thing docs I have to understand what each of the pieces is add them all to my code base and then I could see it working and know if it's for me or not what if I could run one command see the thing quickly determine if it's for me or not and then read the diff afterwards being able to use this to add things to existing code bases in that way is genuinely really exciting for that reason I am hyped to see what it will look like to just read the diff and even here since it inited a normal next project first we can still read the diff here we see it adding the CSS there because it didn't already have it here we see all the packages that were added with the command that we ran because that command needs all the radx UI stuff for all those different pieces we can see the way it changed the config for our Tailwind config and all the things it added there and we can see these new components here too we can see it created the app sidebar component all the things importing from luced which is a ton but it's using all those icons for things the nav menu the nav pieces all from our component Library the sidebar and it's so easy to dig through this and see what actually changed and now if I put up for code review others can see it too being able to understand a thing not through the docs not through the getting started not through all of those as blockers to try it but being able to just run a command to try it and then look at how it affected your code base this is the thing I've said for a while like if you want to learn a code base like if you want to learn how upload thing works the intuition might be to start here but if your goal is to deeply understand upload thing and to really understand like if you wanted to contribute to upload thing you don't get there by reading through every line of code starting at the top the code tab this tab here is not the tab you want to start with if you want to understand code bases you need to start with the pole request Tab and in here is where you'll start to really learn and understand how this codebase works especially if you look at the closed PRS that merged here you'll see what code is actually changing how it's changing and why we changed it you'll get a lot more out of this tab and that's why I'm excited here because this makes it easier to get to that part where you can really understand how these things work on the topic of diffs every once in a while someone smart like you know gear Mar Ro and then my CTO it gives you this piece of useful info see kit config really helpful thing you can put in here undo reset D- soft now you have a get undo that for the most part works also on push Auto setup remote true life Cher oh that was so necessary I wish I had that years ago cool now we have that theoretically get diff okay yeah yeah that's a lot better I now have syntax highlighting when I'm diffing locally did not think I would significantly change how I do Cod riew locally while filming this there we go you can also add line numbers ooh only catch there is it makes copy paste break but copy paste is already broken it's a diff who cares okay yeah yeah in my new CLI tools video it goes also LG by the way lazy G similarly dope doesn't have syntax highlighting though and now that I've seen that there I need to find a way to add syntax highlighting here or even just change the diff VI in it but uh yeah more for me to deal with later hope this is good info for you guys now the future of installing things is bright anything Shaden does is magical oh this one's great somebody is using VZ and like the Shad CLI to create Minecraft writing as little code as possible because all this supports 3D stuff now too which is nuts yeah here's just a vzero chat that is resulted in a Minecraft clone in the browser written primarily by you or AI this shit's like starting to advance in ways that it can actually meaningfully improve our workflows and that's very fun speaking of which this stuff's interesting to you cursor video coming soon as well that's all until next time peace nerds




## This might fix error handling in JS - 20240908
errors in JavaScript and typescript kind of suck I don't think that's that hot of a take generally speaking even the most DieHard typescript fans can admit that try catch is far from ideal and this method of dealing with errors in our applications is rough it's so rough that the way that we build things like upload thing requires using an entirely different library for managing our runtime with effect TS and as cool as effect is it'd be a lot cooler if the syntax of JavaScript just let us safely call something that could error and ideally could even give us that error as an actual value back that we can use for things you know like go if you know me at all you know I don't like to give goang credit for stuff but it's one of the few things they did right the fact that your error comes back as a value that you check before you do things going forward is not a bad thing in the fact that in JavaScript we have to wrap with a try we can't bind variables how You' expect and it's just kind of a mess that sucks and that's why someone wrote a proposal for a better way to do it we're going to take a look at this proposal and importantly why I don't think it can ship but also what we can do instead so this proposal is by a Community member Arthur he's really chill he works on k and a bunch of other cool things and he made this official tc39 proposal for a safe assignment operator the goal is to use this question mark equals syntax when you call in a wait on something async and it gives you back a tupal with the error as well as the actual thing that it responded with I mean this looks really good right like as soon as this was seen it went viral like if we look at Kent's tweet here 1.5k likes on a JavaScript syntax thing Matt made a really important call out here that it's a stage zero proposal the heat death of the universe is also incoming like the syntax is not confirmed I've seen a couple people even other YouTubers covering it like this is guaranteed to happen but there are things like stage 2.5 plus that might never ship this has not been acknowledged even by the official standards committee the likelihood this ships is effectively zero and there's an important reason why we'll get to that in a bit though I want to dig into what this is and how it works in fact why don't we go write this ourselves think that'll be a fun challenge initially we're going to write this in a way that's not super type safe but it will work so function safe await need have a type this takes in promise which has a promise that returns T and now we can do the try catch here try we'll say const result await promise return null result and then we catch e now we return e null see be an async function cool async function might fail this function const random equals math. random if random is greater than 0.5 we throw new error value to high else we return success now you have this function that is returning promis string but it's not CU it can throw and it will throw half the time and if we were to just await that inside of something High chance it's going to throw but if we use safe await now const error result equals await or equals safe await pass it might fail which we call now we have error and results the types are wrong I have to await that cool oh it's mad with top levels yeah I love JavaScript so now we have the error which is unknown because we don't really assign it a type results also unknown but this worked we now have the error if this failed and the result if it didn't we just don't have the types working but I think it's pretty cool that javascript's flexible enough that if you want to write your own equivalent like this you can't have like the sytax with the question mark here but these are effectively doing the same thing the safe await function is providing the same functionality that this proposal would include and you could even write a Babel Plugin or a typescript hack that will let you write this code and it would compile out to be the thing that I just wrote there we can actually do better we can make this properly type safe just involves some custom return types first we have to give it an error type and we also have to give it a return type to be more strict than typescript is by default with the inference and what we've done here let's prettyy it I have these backwards now um if we want to keep the error first then it would be null t or e n so with a little bit of type hacking specifically we add a return type to be more strict and we added a generic error so theoretically we could pass it custom error types if we wanted to now we have this very simple function that will give us the right types we have error which could be error null and result which could be string or null and if we error we return early now it knows result is string now this exact thing before we check that is going to think string or null because it doesn't know yet until we've parsed the error but now we have the full golang experience with a simple function I think it's pretty cool that we can Brute Force generate this but thankfully I'm not the only one who's thought this because there's a library called never throw that Matt showcased here here these are generator functions which makes it even more fun but this could error it could pass and when you then call it with the safe try helper you get the result type and the result type is very similar what I was showing here won't error safe try function return okay this one never throws so it's smart enough to parse it because it's a generator again this is the effect way effect is really big on generator so it's a little more leaning that way it seems like Matt's just circling around his effect Deep dive and it's going to happen any minute now okay you have error okay result from never throw might error the return type on it is a result string or error in and you can oh I I didn't read this before and I came up with that example that's is the example I always use I promise I didn't pre-read I only had the top tweet bookmarked yeah safe TR is the feature in never throw that's really cool as you write code like you normally do only thinking about the happy path acting as if it won't error but unlike your code safe try keeps track of all the errors that might occur and lets you handle them later on so a safe try if you wrap something that can throw with that inside of a function and then you consume that somewhere else and then somewhere else it can hoist that error case all the way up using the types which is really cool the catches you have to yield instead of just returning traditionally but it's you know I have feelings on generators they're making a comeback right now yeah but if you use yield and safe unwrap now you get the direct access to the type without having to check for the error and it will Hoist the error up for you as they show here where result of safe try knows that and view multiple kinds of errors that any one of these could be yielding and could be throwing when it fails you the different types of Errors up here so we have the Json parse error or the local storage error cool stuff there seems like a very small subset of what you would get with something like effect but it's really easy to consume looks really cool I personally haven't tried never throw yet looks great but if you don't want to adopt generators and all of that something like what I wrote here with the safe a weit function super easy to adopt cool so we've covered what it would look like to build this and why you would want it there is one last piece we have to cover which is why this can never ship David blast is one of those few people that if we disagree there's near 100% chance he is right and I am wrong he deeply understands typescript on a level almost no one does he's you might have seen my videos about his work before he's the one who made The typescript Benchmark not like benchmarking the runtime benchmarking the performance of the typescript server in interpreting your types he understands the way typescript is so well that you can audit your code base and make small changes that make vs codes like intellisense and language server stop crashing he's insane already seeing messages uh I've accidentally summoned David in my Twitter replies a few times he was right each time yeah I I would not want to be on the side disagreeing with him because it means that I'm wrong thankfully over time I've slowly become more and more aligned because he's always right and here was his reply when he saw this syntax proposed it will torpedo if they don't change the syntax soon it's too much like question mark question mark equals and it breaks intuition about question mark relating to null or undefined this is really important this syntax lets you assign a value if it's not already assigned so if you have something like let's move down here let X string if math. random is greater than 0.5 then x equals hello but down here you want to assign it to something else if that case didn't get hit we do x equals we skipped the random but that's always going to get hit we could put this in a function we could have a check to see if x already exists or not or do that now we'll only reassign X if it doesn't already have a truthy value actually I think it has to be null or undefined for this to work this is really nice syntax where this only gets assigned if it is null and it gets skipped otherwise deleting one of these question marks is just a massive confusion and I now that he has proposed it like that and mentioned that part he's right this Gabriel just confirmed for me by the way this only works if on null or undefined if this was set to zero or a nullish value even empty string this reassignment won't work unless it's set to null or undefined really handy Syntax for turning a complex machine of assignments into a really simple way of assigning the value like most of y'all and I know I'm included here what I would have done here is if x equals defined x equals it was skipped why is this Mt about is used before oh yeah because I haven't assigned it it'll even be mad about that God JavaScript man we skipped the random check yeah this is a really handy syntax I should probably use it more it makes life a lot easier in a lot of places knowledge call Essence is great the double question mark syntax does so many useful things it it should not be tainted and question mark almost always means an if of some form form single question mark is for turn Aries double question mark is for coalescence these things are great but because of that this is stepping on existing like mental model space the types of errors are an annoying thing to deal with the library that Matt showed off has error types built into it but it would be a lot nicer if they were built into typescript itself the fact that you can infer types for returns but not for errors is obnoxious like there's there aren't really good reasons to not have a type system on top of the errors and it sucks so this is a proposal apparently there's a different one as well underneath but the throws keyword would be to say a function can throw a specific error type so you can specify the errors a given function is capable of throwing that way when you catch it knows which errors could exist this one's a big old mess throws Clause yeah so the problem is if you make this function FN that takes in a number and it throws if you pass it zero it's not clear that when you use it that it might throw an error and is not clear what the type of the error is going to be even if you do know it's going to throw an error that's both very real problems by introducing optional checked exceptions that type systems can utilize for exception handling chck exceptions isn't agreed upon for example Anders hellberg disagrees with it handcuffs interesting even little article the trouble with checked Expressions a conversation with Anders part two Anders this is pre- typescript too talking about how like exceptions are hard to check because you don't know all the things that an could cause an exception I haven't read this I'm not going to dig too deep into it now if yall are interested in a deeper dive on exceptions and errors from the guy who created both C in typescript let me know and I'll try and get to that but here we have function FN throws string same syn I was talking about before where you can specify as a return type for the function that it can throw a thing so here we have a function that is a pro it's return is a promise which returns string but it also has an error that it throws got a lot of positivity just to clarify from Daniel G and wer he's like the PM running the typescript team great dude by the way Daniel is in the trenches making sure this stuff goes well one of the ideas here is not to force the users to catch the exception but rather to better infer the types of a catch Clause variable this is Ryan's reply Ryan's one of the Gods on the typescript team that deeply understands these things more than almost any other human apparently this is a long comment it's going to be a fun one after reviewing all the comments here over the years and much discussion internally we don't think that the JavaScript runtime or overall ecosystem provide a platform on which to build this feature in a way that would meet user expectations yeah JavaScript doesn't have errors as a first class citizen enough to like do this in a way that makes sense it's just it's too likely you'll get an error that doesn't meet the shape of what you're expecting but I want to break this one down per popular request to either add the feature or close the issue for clarity we we're opting for the latter as with minification we're implementing a twoe cool down period on further comments there are a few different facets that have been implied by the proposal and it's worth sort of breaking them apart individually the first is the ability for a function to describe what kinds of exceptions throws with commensurate effects on catch Clause variables like typed exceptions and also the ability to enforce that certain exceptions are explicitly handled or declared as rethrown AKA checked exceptions this I could see why it would be really hard to do in JavaScript this feels easy enough to add but this is like I can see when I'm writing the code what types of Errors you get and here it's like you can behave differently based on those types of things overall observations on exceptions in Java script we need to examine how exceptions are used in JS today to see how it fits in our goals of typing idiomatic JS there are definitely some places in JS where probing the thrown exception is useful you might have code that's likely to throw a few kinds of known exceptions so if it's an instance of type error we log if it's a string we to uppercase it else we just hoist and keep throwing since there are usually extremely few guarantees on what kind of values e might actually have the existing Dynamic type test pattern used in typescript is appropriate for writing safe code more on that later that's fair you basically never know what e is throwing and if you're calling JS code if it's calling browser code if it's calling other things e is as any as they come and you're encouraged to treat it that way yeah it's impossible as Chad just said thank you CJ this is technically impossible because you never actually know what JS code is going to throw I could argue similar with you never know what it's going to return but it's slightly more guaranteed a proposed tc39 feature pattern matching in in catch Clauses would make these sorts of checks more ergonomic while at the same time providing useful runtime guarantees I'm curious about this you know me and my love of pattern matching oh oh that is nice multiple catches with checks oh oh that is nice I do like this my functional programming brain is very happy with this thank you for showing me this case match code enoent these are the different options for the Syntax for it those are all cool things looking at the landscape of the JS libraries the sort of Rich inheritance hierarchies of various error exception classes seen in languages like C and Java are not widely adopted in the JS ecosystem that's putting it lightly most of libraries I use I have no idea where and how they error apparently low Dash is 200 pages of docs but they don't have any description of what kinds of exceptions are thrown even though the source code reveals that a handful of functions are absolutely capable of throwing exceptions the one apparent user surfable throw in jQuery is not mentioned in the docs at all react mentions some of the exceptions it can throw but not all of them and only uses language like throws and error opting not to include specific information about what type of exception an 850 page book on material UI never mentions exceptions and only talks about throws from user code there are no documented exceptions in xstate the spelt documentation over the course of 100 Pages simply says throws an error in one occurrence you cannot read the node documentation and accurately predict which properties will be present in a failing call like fs. open does not exist are or yeah there is not good docs on all of these things and that's actually a fair point as saying you can kind of know what a function returns it's harder to know what error is thrown the docs are a great place to start and the docs do say what is returning and they don't say what's being thrown for most of these things that's a very fair point I hadn't thought of see Mark in chat this makes him feel better about the lack of docs about errors and upload thing yeah we're matching the standard set by spelt in react but yeah we should fix it in reality passing invalid inputs to most JS libraries typically leads to exceptions only tangentially related to the error being made like passing A Primitive where an object's expected an xate produces uncaught type error cannot use in operator to search for context in 32 that's hilarious that's like if you pass a number or a string they're not even checking that in xate so it just throws this obscure error JS programmers are generally expected to realize they made a mistake earlier in the call stock and fix their own problems rather than to look for very specific errors like you would get in C this situation does doesn't seem likely to change anytime soon unless you're using effect or something like it if you're diving like like effects catch is you have to use it for everything for it to work this way so here we have like effects web server that we're using for hosting the upload thing back end in your project by creating a middleware and when we use effect. gen we're forcing ourselves to not just throw but yield errors instead and now when we consume them if I find some code where we're handling different errors too many use effects in here he we're using micro for a bunch they made a special small version of effect for us which I love cool ignore the type errors because I haven't installed anything here recently so this is all just like out ofd types but we're calling micro which again is just a smaller version of effect provided by the effect team and we return micro TR promise where we handle the try and we handle the catch and we turn this error CU again we're calling fetch so if that errors we don't know what it is this browser standard error could be a show so we manually change the catch to take that error and we create a new fetch error and instantiate that how we wanted to be shaped and now we pipe it to micro do map which is the place where we actually assign the URLs we got from there and we trace it with our fetch Tracer but now when we call it we know and can filter on good or bad States so we can call Micro do filter or fail okay cool pass it on if it's not okay then we return the bad request error and now when we map it we won't have the errors this is a way to like filter out the ones that failed and still hoist those errors while passing the success values down but this is like we had to write our own custom fetcher we had to write our own custom fetch error we had to write all of these things in order to glue this together this way and the code that we're writing barely even looks like typescript anymore but this comes with a massive win that we now know where and how errors occur and also can manage those the way we choose CU every Point throughout we can handle those errors has this code been hit this code absolutely gets hit this gets hit all the time and it is finally the result of this code being written is we have a much better idea when a user has an error with upload thing where it came from because we own those error processes now it's a really good thing for us to move to it took a while I still barely understand it CU I haven't had time to contribute to it much yet but the team specifically Mark and Julius they seem to really get it now and the code they've been writing is awesome so unless you're using something like that you're probably as Ryan says here there isn't a culture of strongly typed exceptions in s and trying to apply that culture after is unlikely to produce satisfactory results why is it absent in the first place now we get to blame the language fun language capabilities this culture is a predictable consequence of the way that JS exceptions work without a first class filtering mechanism to provide the ability to only catch certain exceptions in the first place it doesn't make much sense to invest in formalizing error types that can't be usefully leveraged by developers the other reason that these aren't really used much is these source of exceptions are not needed in the same way they are in other languages interesting other languages have critical constraints that aren't present in JS pervasive explicit and imperative Resource Management wherein every function needs critical cleanup code to ensure correct long running operations of the program things like free and delete oh that's a fair point if something fails in JavaScript you can expect the garbage collection to deal with it going forward where in other languages if something fails in a certain way you need to deal with that and clean up the result to not leak memory the other language also don't really let you return different types of values from a function so they have to error in the different cases instead and there's often lackluster support for first class functions JavaScript you have to worry about any of that apparently he breaks down all of these in detail I feel like I understood those points already if you want to better understand these I'll right now before I forget I'm going to go put this in the links so that this Source will be in the description if you want to read this whole thing in detail here we have an interesting call out of avoidable as well as unavoid exceptions avoidable errors are logical errors in the calling code like you callind 32 on an empty array these should never occur in production code and you can always avoid them by calling functions correctly it's a you're holding it wrong type thing but there's unavoidable ones like network sockets being closed during Transmissions you can't control these things they should be considered always possible and programmers should always be aware that they might happen in other words something went wrong so let's talk about typed exceptions even setting aside the lack of exception typing in the wild type exceptions are difficult to describe in a way that provides value in the type system typical use case for type exceptions would look like this we try some code and we catch e be nice if we knew the types of Errors e could be there's a super type of what we think some code can throw or automatically type it based on what errors we think some code could throw current state of support as a baseline we need to look at how typescript handles these cases today consider some basic exception inspecting code if e is an instance of type error log if e is a string we write to uppercase else we throw it who else here let's see some Chatters I know I'm not the only one who's written basically that exact code before I want some ones in chat if you've written the like three checks on error see if it has a message if it doesn't check if it's a string and if not you just say it because I know I'm not the only one who has done exactly that and just said it yeah look at all those ones a lot of us have done exactly this this code already Works e message is strongly typed and property access and E is correctly find even if e is any e.2 uppercase is strongly typed as well more cases can be added like detecting e is an instance of range error we accept as a broadly true principle the following most JS code doesn't have documented exception behaviors most JS code has at least some indirection so it can call code with undocumented exceptions that's an important one even if a given function has handled all of the errors it directly calls and it can directly cause if it call something that can throw as well you have no guarantees there so the whole hierarchy top to bottom has to have these types or it's useless and then of course Safe Handling of exceptions requires taking both of these into account I agree with all of these principles it's funny like in my head when I was talking about this with Mark last night like why don't we have typed errors in typescript I was thinking through these things but wasn't SP enough to say yeah that's the case like in the end I concluded like they probably should at this point like it can't be that much different than how chaotic a return is I'm wrong this is chaos but yeah as Ryan says here if all of these things are true which we could can agree they are then the right code to write and put into your code base is the code that we had above here since we can't actually know which of these types there are even if we strictly type things more often a throw as CJ just said like returns don't bubble throws do though so that thrown value from the wrong function could come all of the way up real problems that we need to be considerate of and the only way to properly consider those in your code base is to do this so we're kind of stuck with this code very fair points the default throw state of unannotated functions 100% of function declarations today don't have throws Clauses also a fair point if we added this throws then we have to make a decision about what to do with functions that don't have one if it doesn't have one it might be that it doesn't throw an exception or it might be that it throws any exception if we assume that these unannotated F functions don't throw the feature doesn't work until every type definition has an accurate throw clause also fair cuz do something one throws need exception this one can throw awesome exception we didn't specify it now when we do this try catch this error is incorrectly typed if we assume all unannotated functions do throw the feature largely doesn't work until every type definition in the program has accurate throw Clauses do something one throw need exception this one doesn't throw but we didn't annotate it so now e has to be unknown even though we know this doesn't throw so we either have to annotate this throws never or something like that or we just blindly assume very fair points assignability would also have to take into account throw info just throw function void equals Anonymous function throw new type error don't call me yet Fu gets past just throw as a call back and we call the call back here but we gave it a different type how how yeah that's actually a very fair point if we have this type for just throw and it's throwing and it's wrong and now we're passing this function here does this definition here for what we're passing it also have to specify what errors could be thrown to the function you pass it that sucks that's a very fair point Getters and Setters can also throw God hadn't even thought of that there's a lot of very good points here checked exceptions the other half a related feature request is the ability to have checked exceptions as in Java or Swift this feature requires that functions either catch specific exceptions or declare that they re throw them so if a function calls a function that can error it either has to handle that error or it has to throw that error up or a different error you have to do something based on the errors Beyond Java and Swift though no other mainstream programming language has adopted these features the common opinion amongst language designers including ourselves is that this is largely an antifeature in most cases if I recall the Swift developer regrets this because of how much harder it makes like the compiler and type checking work checked exceptions aren't seen in any of the widely used and liked languages today with most new languages opting towards something closer to the results type which is a pattern in Rust also similar to what they have in go or is also a similar unchecked exception model porting this feature to the JS ecosystem brings along a huge host of questions namely around which errors would be subject to checking and which ones wouldn't the es speec itself defines over 400 places where an exception is thrown and the spec clearly doesn't make a hard distinction between avoidable and unavoidable exceptions because it wasn't written with this concept in mind the distinction is also fuzzy in some cases for example type error is thrown by Json stringify when encouraging a circular data structure in some sense this is avoidable because many calls that Json stringify by construction cannot produce circularities but other calls can it's not really clear if you should have to try catch a type error on every call here Fair like if you know that what you're passing to Json stringify is fine you shouldn't have to catch it but now you have to have the syntax able to specify that and the syntax error being thrown by json. pars if the input is valid might be impossible to have it happen or might not be how do you specify those things same with Rex you have to force a TR catch around every single Rex n the only way you could make Rex worse is if you add Tri catch to all of them so what would change there I I love this this is actually a really important thing I think everyone should do when they have a hard stance on something you should be able to clearly State what it would take to convince yourself otherwise for example I think flutter is a garbage pit dumpster fire terrible framework that no one should ever use for anything but I can be convinced otherwise I need to be shown a flutter app that I would actually use every day that's all it takes if somebody can make me a good enough flutter app that I actually use it and don't mind using it I will immediately go unlist all my videos about flutter I'll even make a new one apologizing but until I have that one good flutter app on my iPhone I'm going to continue saying it's a garbage fire dumpster pit that nobody should touch hopefully you can understand what I'm saying here every hot take you have you should be able to clearly State what it would take to change your mind and get you to walk back on that so until you show me that good flutter app I'm not changing my mind let's see what it would take to get the typescript team to reconsider typ errors these are the two points that they would consider that would make them change their mind here widespread adoption and documentation of strong exception hierarchies in JS libraries in the wild so if everybody moved to effect never throw they would reconsider or tc39 proposals to implement some sort of pattern matching criteria to catch exceptions arguably this would just work by itself the same way instance of works today this is funny enough the syntax that started this whole video so that could happen so tldr any feature here implies a huge amount of new information in DTS files that isn't documented in the first place yep good exceptions introspection like catch e if e of X already works today and anything more inferential than that is unlikely to be sound in practice Yeah love that cool so uh that's why we don't have it in typescript now we just need to find the right syntax to have it at all apparently we got some new syntax proposals let's take a look at those personally I like try in the front or the back I'm fine with either of those I actually do like that though but at that point like if you're putting a keyword in front eh just put it around a function like uh I I don't like the idea of another way to define variables is my hesitation around three we already have ver cost and let I'm leaning the try here but the the the use of a keyword resulting in a tupal still feels a bit strange but of these two is my personal choice for sure I hate the question mark at the end it just it breaks the way you read through it and the other issue I have with that and with this is they both imply that this function returns these two things cuz like I'll be real my brain skips over the variable definition like I just blank on the thing on the left unless it says let and then my brain clicks and like oh I need to pay more attention here but usually my brain just skips whatever's on the left there so putting it there my brain auto complete it's going to read it as error data equals might fail which means I'm assuming might fail is returning this Tuple which it isn't and then when I go back to the source code I see it's not I get more confused putting a try here helps a bit with that but at that point you might as well just be calling a function like the safe A8 that I wrote right this is hard syntax changes is tough like I you know I want to do a a poll in in chat actually which syntax do you prefer 1 2 3 4 seems like people are leaning too I biased y'all my mistake should have done the poll first I prefer two of all of these God damn it Gabriel not all of us have an upside down version of our keys on our keyboard going to start adding more upside down Keys like what about upside down slash upsone period yeah seems like within my audience at least most of y'all agree with two here I get it I don't love any of these but two would be the better wouldn't we have a lot of if ER or eror yes and that's great because now you're being explicit about it instead of the code quietly erroring and you don't see it that's the benefit of go it's tedious to have the if error is not equal nil checks constantly but the benefit here is that your code explicitly says what it's doing you have to do something with every error and I like that oh cool without my biases they were still leaning towards try his throw grab the snippet if you're interested I'm sure there's plenty of others I'm pretty sure I had a cursor help me generate this one if I recall I was getting hung up on the trying to avoid a return type but without one no amount of as const was inferring properly down the line so the return type there is essential makes a pretty simple function that gives you these behaviors if you like it awesome I liked it too and if you don't that's fine as well let me know what you guys think and if you're just going to wait for some syntax to get added that's cool too I'm very curious how yall feel about this so as always leave it in the comments until next time peace nerds




## This new API makes your websites way faster - 20240913
scheduler do yield is almost here just sprinkle the simple line into your JS code frequently to give the browser breathing space and avoid initial next paint issues await Schuler do yield importantly it allows continuation of your code to be prioritized so you don't lose out by yielding what what is yielding what is going on here and why should you care well honestly speaking I don't think many of us as end developers building applications will have to think about yield too much but that's because it wasn't built for us this API was built for one specific team the react team and after years of collaboration between Chrome web standards committees and the react team it's finally super close to shipping and I think it's worth understanding what it is why it exists and what can be done with it on the topic of yielding I'm going to have to ask you guys to yield for a second for a quick word from our sponsor door troubles I've been there you should check out unkey that going to help with uny is the best way to build apis fast so if you need to make sure that your customers are hitting an endpoint and doing it securely there's no better way they generate the keys for you they manage all the security they even have a rate limiter built right in they handle millions of requests for just dollars and if you want to build a great API for your users especially if you're building some new AI app you shouldn't be wasting your time on all that verification stuff oh and if you're worried about giving all of that type of stuff to some other person externally don't worry it's all open source if you want to host it yourself you can do that too but honestly I'm probably just going to use the product online it's so cheap why not protect your API today with unkey Sunil famous from being on the original react team react just can't stop winning the API and implementation is the result of a multi-year collab effort between meta specifically the react team of meta as well as Google Chrome and many others and it underpins reacts concurrent mode now being implemented in the browsers as a standard huge huge so before we can dive into how this works we need to think about the event Loop a bit at this point I would say the event Loop video what the heck is the event Loop anyway this is an essential watch if you're watching this Channel and if you haven't washed it in the last year probably worth washing again because it is phenomenal and understanding how the event Loop and call stack and JavaScript work will make understanding all of these things much easier I also didn't realize Lydia Hall did a video on this 5 months ago that is more popular than any video on my channel good for her huge I haven't watched that one yet I'm saving that for later for sure apparently people are saying that Lydia's video is even better than the JS comp one that's nuts watch both this is legendary and Lydia is really really good too I would say watch both I have to presume that you kind of know the event Loop or this will be basically impossible to do but we'll go with it so let's pretend we have a basic react app we have the call stack and the task Q task Q is things that need to be done call stack is the thing currently being done and the event Loops role is to take things from tasq and put it on the call stack let's say we're doing a complex render we will render this as red put it in here and say complex render this complex render is like react rendering your whole app or a state change that triggered a bunch of things changing so this is going to take a second to happen let's say while that is happening the user a small thing like pressed a key in an input field so I'll make this actually smaller because this task should theoretically be much smaller and this complex render is meant to be big so if this is happening in the call stack right now and this thing takes a lot of time this input cannot happen until this is done there is no ability for this input to interrupt what is going on here with which means if you have like the classic demo of like an input field where you're typing every time you type a letter it causes like I don't know a search to go off and to update the page with a different set of things on it the classic demo is with uh the Color Picker thing that they did in the react com compiler demo this is a to-do example like a to-do list and there's the input type is color and with this input type is color it's going to change a lot when you're changing things CU you're dragging the cursor around and every frame it's sending a new state and if we look at the state here the theme color is being passed and we're keeping track of it in this to-do list like wrapper so when the state changes it has to render the whole to-do list which means it's blocking that whole time we need a second prop named the theme color so users can pick a color to theme the user interface if we try this code out it works but the app VI is pretty laggy do you see lag happening there where his cursor is here but it's still many positions before that's because the state being up here forces the whole to-do list to reender before it can process the user's input so we're effectively creating a bunch of inputs on the task Q for all these changes that can't happen until this complex render is done this happens it takes one of these it does it and then it immediately has to pull this back up again before it can process any of the additional inputs that sucks sh we got Ryan a in chat helping out legendary as he mentioned here it causes every component to reender and he dropped this original example here with the OG react fiber where they were handling things with concurrent mode nuts do they have a non-concurrent example if I go to here yeah the stack example so notice how much slower this one is because the browser updates and the react updates are blocking each other with a the fiber example it lets you run things in parallel effectively but the interruptions are much more important which is what we're here to talk about it was based on Hover on the triangles in the count updating so yeah the hover is the interruption okay oh the hover is the action that's interesting here it's doing all the triggering all the updating react is just doing its thing but hovering is an interruption that would have been blocked if this wasn't able to run concurrently that makes more sense okay so in the non-fiber example if I grab this link again the big difference that we care about isn't just how much slower this moves it's how much longer it takes to hover and like do the hover Behavior because it can't do that until the render happens so the render is blocking the user actions and the user actions block render it's like a back and forth of everything blocking each other God the whole my whole computer was slowing down from that one and here it's much smoother because it can allow for user actions to interrupt but the react team wanted to go way further they wanted the ability to just programmatically call interruptions whenever they felt like so to simplify what is happening here to simplify this change imagine that this complex render could bail out at certain points if at a certain point during this complex render we could just draw a line in it and say hey at this point pause pull things off the que and we'll get back to it in a second you're effectively saying hey take the rest of my task so if I break this up into multiple parts now if we call all yield what we're doing is we're taking these other parts and we're putting them back in the task CU so if right now we only have like these two inputs the user did and we have this render going on and we call the new code schedule. yield what we are saying to the JavaScript runtime is everything above here just throw it back in the task CU so now if there are other things that need to be run like we finished that and now we want to deal with the input field cool we throw this away we do this we finish it we do the next input we finish it cuz those are easy to parse and then we throw this back on and as long as this code is smart enough to say oh things have changed since let's make sure we're rendering things post that change now this can all be cleared through rendered correctly maybe one of these tasks even says oh Everything's changed we have to go back to the start so when complex render two triggers it says we have to redo everything and it just brings all three back into the task que where it can start pulling them from there again but the important piece here is that it didn't put three things in the task CU initially this was all one box it was all one task but when you call schedule. yield it turns one task into multiple by taking whatever happened after the schedule yield and throwing that back on the task que you're temporarily moving the execution out of the way of the threat this is a huge change this allows for for people to make their own react so to speak significantly easier because you don't have to build your own crazy threading model you can just yield regularly in the code that might be blocking and it will no longer be blocking if there's nothing left in the task CU it will just leave these here and continue until it finishes but if there's anything else in the task CU it will get interrupted and move back there temporarily to go to Li's video cuz it is phenomenal the way the event Loop works is when there's nothing in the call stack it pulls from the task que this is the opposite when you're in the call stack and you call schedule. yield it checks is there anything in the task you if there is move this back there and if there isn't just keep executing as you were it's cool that this is arguably conceptually the opposite of the event Loop but I think that is what makes it so strong and it's certainly what makes it so exciting I cannot wait to see what people do with this I did see one blog post of people showing it Umar from debug bear the scheduler do yield method is used to yield control back to the browser scheduler allowing other important tasks to run is the browser that decides what's considered important this can be useful when you want to ensure that your JS code doesn't block the main thread and negatively impact the user experience you might be wondering what other work does the browser need to do the schedule is responsible for a lot of things like rendering the page garbage collection importantly handling user input let's focus on the last one user inputs oh that's funny it's an excal dra of the same concept this absolutely fits thank you debug bear and Umar for writing this we're definitely going to take advantage of this if you want to read the whole post it'll be linked in the description so previously you'd have a long blocking task and you have to wait for that before the user input gets processed but now you can chunk that long thing and user input and other important tasks can effectively interrupt but it's not a traditional Interruption where you're blocking your thing it is an event Loop style Interruption where things are being moved from the execution window over to the task cu something more important can execute in the interim if you find the terms main thread browser schedule and blocking to be confusing know that you're not alone traditionally web performance was centered around Network performance but as web apps have gotten more complex the focus has shifted to runtime performance especially for JS heavy web apps the main thre is a browser process that handles different tasks like rendering the page theer is what decides what task to run and when and blocking is when there's a task in the main thread that prevents other things from running all make sense so far so here's an example of a blocking fun that's slow you have start time and you pass it a duration we all know the right way to do this is with a set timeout but when you do it like this you are blocking the JavaScript execution until this is done because this while loop is just going to run nonstop until the condition is passed so what this will do is block and prevent updates from happening so if I had like an input field and this was running I wouldn't be able to type it would just lock up in the process it would be miserable so here's a basic example this function blocks for one continuous second 500 milliseconds and then 500 more milliseconds but if you put auler do yield in the middle now you'll see in the performance view here without yielding is just one one second task but with yield it can be broken up so if the user does something in that time that can happen in the in between so it's not on in the browser by default by the way this is part of the 129 version of Chrome Beta do I still have Chrome Beta installed I do let's get that updated so we can give it a sh I'm clicking one long task and now I'm clicking accept cookies and nothing is happening and there's all my cookies after the task is done if I refresh oh it's still blocking that's hilarious cool now I'm going to do many smaller tasks and I'm going to click it's still slow but they're happening in bursts now because the smaller tasks are yielding to give room for my inputs to be processed before those inputs wouldn't be processed due to the nature of how theer works if we break this down in the performance view this is where things will get fun record a performance profile if you haven't done this before you should it's fun going to hit the one long task hit a bunch of accepted cookies nothing is happening and here we are let's stop the profiling and see what this looked like see this giant task and then here all the event clicks process and then all of the commits happen after these tasks very painful and if I switch to do many smaller tasks this time we're going to record a new profile many smaller tasks accept accept accept accept clicking it a whole bunch stop now that we'll see that and here we can see a very different call these tasks are much smaller and if we zoom in on any one of them we can probably see the commits happening in here yeah the event click it's right in between the two but you can actually see it and the fact that that can happen and be processed despite these tasks that's a huge change Ryan carniato is once again calling out really important things in chat the important thing is that this is different from scheduling a microtask because microtask cues don't yield to macro tasks it will run all the microtasks before the next macro task it isn't unlike occasionally using a set timeout zero but the behavior can be different if there's nothing important pending and that's the key is importance when you caller. yield it's not just doing the crude demo I showed here where it's throwing it back on the task CU it's taking advantage of the prioritization the browser is capable of it knows which tasks are important enough that they should execute sooner and you're letting it do its thing you're saying hey I know my task might seem important but I'm telling you it can stop right now do any other important work that's waiting and then we will continue in a minute the before demo blocks the main thread for 1 second three times and the after demo will await the schedule. yield calls in between and the actual interactive button the one that makes the cookie also triggers a block I almost want to delete that cuz I think it'll make it slightly clearer I kind of want to take the time to make a better version of this demo there we go my version of the demo nice many smaller tabs s accept accept accept now they're coming up almost immediately there's still the up to half a second delay or the second or whatever it's configured to but if we stop and look at this now you'll see what I would consider to be a much more interesting breakdown because after demo is blocking constantly but we can sneak in these tiny little events in between if I zoom in to one of those see main thread blocking but if we get in between here and get really close these tiny little updates the paints from the clicks can all happen between the microtask and that's the key is now we could sneak those in in between where previously if I re-record this with one long task and click a whole bunch nothing is able to happen and if we stop and look now you'll see this long task went and then at the end all the updates Could Happen afterwards as always Ryan is making very important points if you replace schedule. yield with putting the rest of the routine inside of a set timeout zero you would technically get the same impact for something like this but the schedule. yield API is nicer because uninterrupted it can continue on the microtask and that's again the key difference here is theoretically if I go back to stack Blitz for this example because it is so simple I can change this to be set timeout Z comma Block Main thread set time out 0 comma Block Main thread again delete these and move this to be at the end here oh I I did the order wrong that's that was very stupid of me sorry I'm bad at JavaScript there we go if only we had a type system that could tell us when we made mistakes like that fix this code now we have the function but we have it under a time out of zero so it should immediately execute but the separation here is triggering it later so if we rerun this one last time many small tasks accepting cookies and they come in in chunks because it has the free window and now we see basically the exact same thing you'll see all the updates happened in between many small tasks then one long task now I'm accepting cookies and this long task had to block everything there so see that long one right in the middle cuz that's now allowed to block when it's not the microtask q but if I had reverted this back which I will take a second now this will probably be the most interesting demo this may be the one where it clicks small tasks accept some cookies long task accept more cookies and these cookies can all come in before that long task starts because yield is saying do the important tasks not the long blocking ones and it can sneak in all of your click events before it triggers is that long task because this task is lower priority than the inputs that is really cool and thank you as always Ryan for giving me the opportunity to show the actual difference here on a much deeper technical level it is the macro versus microtask part back this articles it's actually super helpful as we see here the tasks can be handled significantly quicker canceling a scheduled task after yielding with a task controller oh boy I didn't even know about this this is super cool I assumed it was there but I hadn't seen it the way should have work is that the code runs after the schedu yield call you can cancel this continuation by using the following the abort method of a task controller the posttask method of a scheder object and the signal option of a schuer do yield look at that signals always going to have Ryan leaking at everything right the main point to highlight in the following code example is the user can start a long running task by clicking the start button but the user can also cancel the task by clicking cancel so we have Block Main thread schedule. yield signal inherit the task using the schuer pass passing the signal from the controller the inherit option means the task will inherit the signal from its parent so if we create auler above this case schedule. posttask that will now be a signal that can be tracked and if we want to cancel it later on we can call the same controller but this time do abort in order to cancel that the let controller so we've made this controller a global effectively we bind it when we create the signal from the user clicking the start button but then the cancel button can cancel at any point it doesn't literally cancel you in the middle of the work it only cancels during the await schedu or. yield section but again if we're thinking about react imagine it's doing a big heavy render to update your whole page but then it yields for a second and sees oh you changed the state all the things I was rendering don't matter anymore I'm going to re-trigger this render stop all the work I was doing and do the right render this time that is magical it makes writing your own react or things like it that perform as well trivial this is so cool oh he even has a demo of the cancellation and again need to be on the Chrome beta for it cancel clear record start work and it tries to run five chunks of work and when you cancel it won't run all of them chunk one ended chunk two ended I can cancel after chunk three and now it will cancel before it gets to five super super cool and again we can see here with the blocking work we do the first one we do the second one and then my Interruption which was on the que waiting gets processed and it has a cancel which prevents the rest of the work from being done super super simple this is really cool it is important to note though as you've seen from me hopping between browsers it's currently an experimental web standard so you need to opt in before using it you do that locally or signing up it is now default in the newest Chrome Beta so it's no longer just behind a flag we're making a lot of progress I actually have pulled up here the Chrome 129 beta notes it is part of the official latest Chrome Beta it's happening it's time we're getting there but this is not ready to use in production yet apparently you can get special permissions from chrome to use this flag early by requesting to be part of the origin trial which lets them put your website's origin in their set of ones that are allowed to access this early also to Ryan's Point earlier if you use a set timeout or just do a quick promise resolve like this here you're effectively doing the same thing when you call this a wait there it no longer has the priority benefits but at least you can interrupt and let other work take precedent they call out the exact differences here where with schedule. yield the continuation of work is placed at front of the task q but with set timeout is placed at the end so if there's other work that has to be done that isn't priority work this goes after it so we have our complex render going on in the call stack and then in the task cu we have these two inputs as we processed and then another much longer piece if we call schedule. yield effectively we are taking these other parts and we are inserting them here in between so we can process the events put these in run them then we move this here and then immediately put them back on the call stack once those events are done if we were to do the other example where we called set timeout instead these tasks don't go in between the events and the complex render they go after the complex render and that's the key difference is whatever other complex tasks exist in the queue this would all go before the additional complex task if you call set timeout this goes after like any other promise would if you want a more complex understanding of these things I will once again reference both Lydia's video as well as the what the heck is the event Loop anyways both once again essential watches for any JavaScript Dev you learn so much and you don't have to do the same thing I'm doing which is rely on Ryan con to tell you what you do and don't know oh that's actually a really good example so. yield we have the timeout call back yielding with. yield continuing after schedule. yield since we put this timeout thing this is now on the Queue so we don't want this to be interrupted with our code so our code is running it does this it yields and then it does this this task should not take precedent over the work that we were already doing so now we get this first then this and then this task from the set timeout can run but if we're using set timeout and these promise calls this other random thing we called set Timeout on or whatever else going on in our code base those are now able to run in between so here we end up with yielding then the timeout call back then we get to continue our work but notice the difference as they call that in the article where the continuation happens the timeout goes in between when you use set timeout or promises to DIY this but it gets scheduled after when you caller. yield that is a really cool thing and since this article was really helpful I will give debug bear their opportunity to plug how debug bear helps monitor the impact of. yield de's a web performance monitoring tool that helps you track the performance of your web apps they show you interaction inex paint score specific interactions visualization of your total blocking time and your CPU activity as well when you use schedule. yield you can monitor the impact on your web performance metrix even have realtime monitoring to make that clearer too the report shows you the activity that was blocked by the CPU you can view it on the timeline that is a much nicer view than what I was just dealing with in Chrome good plug good huge thanks to debug bear and Dumar for doing this one for me makes my life a lot easier if you want to read the whole article Link in description as always thank you for Ryan for making me seem like I actually know what I'm talking about and thank you to excal for making my life easier with these diagrams as well as a thank you to our sponsor makes all this stuff possible this was really fun I can't wait for this API to ship for everybody and hopefully to find it way into other browsers too until next time peace nards




## This new Tailwind feature is scarier than I thought - 20241218
in case you didn't know somehow I'm pretty fond of Tailwind it wasn't always that way though when I first saw it I had the same gut reaction most of the haters do it seemed like a terrible way to ruin your HTML and make your CSS harder to build and maintain and I like many of those people was very very wrong all of that said there are some problems with tailwind and there's one person in particular I actually trust to give us this information his name is Nan he's the creator of stylex and if you've seen my coverage of dialects you might know how much I respect him and the work he is doing to make really really good performant and safe methods for styling your applications and it's not some crazy theoretical stuff either it's what meta uses for all of their styling across their apps nowadays he knows his stuff and I've had a video planned for a while where I was going to go in depth on his handful of small but meaningful critiques of Tailwind but I haven't gotten to it because uh you've seen the schedule I'm busy but now I have a reason to a very very fun reason Naman put up a blog post his thoughts on Tailwind 4 and for the most part they are very good thoughts but there is one big thing he's concerned about and I think it is worth all of us considering because it's great as Tailwind V4 is there are changes that are worth being a little concerned about at the very very least making sure you approach these new features with a bit of caution a lot of y'all accuse me of being a paid shill for Tailwind they've never given me a scent but we do have bills to pay so before we cover this let's hear from today's sponsor really fast today's sponsor is code rabbit and you're going to wish you set them up earlier because I know I did I could show you the homepage and all their marketing mumbo jumbo but i' rather just show you what it's actually like having an AI bot do code review and sumar reason help you with your PR process I have a bunch of random PO requests open here that we've had code Rabbit running on like we do for all of our Cod at ping and it's been really solid here's a fun simple one and also this one's on our open source repo so if you want to go look you can and it's free for any open source users so everything you see here is included in the free tier you see that it's summarized his pole request it described all the new features being added via this poll request it called out some bug fixes as well as all of the test changes that occurred too and if we scroll down here we get the best part the walkthrough this goes in depth on what specific files changed and what changed about them this is super handy especially on big PRS like the one I'm about to show to have a quick summary for every file on what changed and why it's just a really quick way to get through and they even tag in related PRS so if you have anything going on around the same time super super handy it's been great to work with it also leaves comments on individual lines that it thinks can be changed so here it said that it thinks this type could have Js doc on it so that when users see it it' be a better type it even has a one-click button you can press to automatically apply the diff on GitHub so you don't have to go write the the code yourself and your editor you can just click a button and it applies the changes and I've been surprised at how many of these changes actually end up being useful thank you code rabbit for sponsoring today's video check them out at soy. link and use code Theo 1M free for your first month for free the tail end CSS V4 beta was just released and I wanted to share some thoughts on it more specifically I have some concerns that I have not seen covered elsewhere that's what we're here for rather than provide any highle insight let me address the various changes in Tailwind 4 individually disclaimer these words are my own and do not represent yep you get the idea this is n man posting giving us awesome free content and I appreciate him immensely for it he's also in chat thank you for being here you've probably seen his name pop up in a bunch of videos because he's very quick to correct anything I get wrong about build tools and styling in general that's good anyways first point moving to lightning CSS the move to lightning CSS is a good move the JS Community is largely moving to rust based tooling and being on Lightning CSS will help Tailwind easily integrate with various tools performance improvements are stantial but they aren't particularly important Tailwind jit was already really fast the biggest benefit of lightning is the unification of Tailwind Imports and syntax lowerings not having to manually configure the auto prefixer is a big one the the amount of with like post CSS and the prefixer and all that so happy is gone CSS first configuration there is much excitement about the CSS first config I don't think this is as much of a slam dunk as many others it has trade-offs the big benefit is the need for one fewer boilerplate files for getting started the downside is that most most of the config is custom syntax that's specific to tailwind and it's no longer types safe hopefully tooling will help bridge that Gap this is a fair point for a while this Tailwind config wasn't type safe we found ways to fix that with type declarations like the JS doc syntax to import the types from the Tailwind config then we were able to do a typescript which was nice now we're losing all of those benefits by doing it in CSS but apparently you can still import the old JS config by importing it with at config the Tailwind config JS file didn't know you could do that that's funny I might actually end up doing this because I like my type safety anyways and Nan calls out this should probably end up being a good move in the long run I largely agree CSS theme variables this is where the concerns start architecturally using real CSS variables is an obvious win however in practice using CSS variables can have some surprising performance pitfalls performance issues are inconsistent and when using a bunch of variables to find on rout the impact seems to be minimal but when you reassign them or Define variables on another element in addition to root it can have significant performance impacts if you want proof these problems are somewhat serious you should check out the last video I did on Tailwind which was Tailwind broke but it's not their fault that video is about how the highlighting on a bunch of websites using Tailwind broke when you drag and select stuff because they styled it with variables and chrome in efforts to make performance better change when and how they resolve CSS variables in a way that caused them to break for text highlighting if you DED them in the specific way Tailwind did the reason that happened is because Chrome wants to improve the performance of these things wherever they can and they made a shortcut they thought was safe that turned out it wasn't and they had to revert those changes they're not doing that because they're evil or they're dumb they're doing it because they want Chrome to perform well and these things have performance impacts n man does couch this reservation though so as long as most devs don't go overboard with custom scoped overrides for variables things should be okay it's also possible to config Tailwind to inline the variable in the CSS output just like Tailwind 3 and earlier most devs configure their themes globally and scoped overrides for the variables aren't a common use case so I wonder if inlining variables would have been a better default very fair point native CSS Cascade layers this is an unmitigated success and an obvious win my biggest surprise was to learn that this wasn't already the case there are certain older browsers that don't support Cascade layers but it's a simple polyfill to fix that this is why we like Nan this is the at layer rule in CSS thank you for the clarification I would have spent way too long trying to figure that out anyways simplified theme config a bunch of values that were previously configurable now just allow arbitrary values like grid calls 73 without the need for 73 to be in Brackets this is a good move and it removes unnecessary boiler plate and friction I will take the stance that this is not necessarily an outright win I'm one of those people that read the book that the Tailwind authors wrote what was it called again refactoring UI apparently they sold a whole bunch of copies of this book when I mentioned it in the past they've never paid me they gave it to me for free which was cool it's worth a read if you're an engineer that wants to make your design suck a lot less I learned a lot from this they wrote it before they'd even made tailwind and it's actually kind of fun to read in retrospect because it shows a lot of how Tailwind was made and one of the decisions they made in this was to limit the options to a compatible set of things like sizes border sizes colors and all those things but to intentionally limit it not to a super limited subset but a meaningfully limited subset what I liked about the bracket syntax is it made it clear when you were exiting the subset that had already been built into Tailwind so if you had a size that didn't perfectly fit the scope and the like different sizes that exist within Tailwind you had to indicate that using the brackets as a compiler feature as a thing they to implement all that stuff I don't have a strong opinion on that what I cared about was the clarity in the things that were using the built-in system versus the things that weren't and losing that was something I'm not super hyped about there's a good point from n man here which is that for things like the number of columns that's not part of the design system but for sizes colors Etc this is different and I totally agree for columns this shouldn't have a different syntax if you're using a column number they didn't prepare for but for sizes and paddings and all those things it I liked the brackets there are more obvious wins though like automatic Source detection built in at import support built in CSS transpilation Dynamic spacing for scale P3 colors container queries and 3D Transformations which is actually as you probably saw in my tailin 4 video really cool stuff I like this call out here because the tailin docs have all the cool things you can go there or go to my video he's going to focus on what he finds controversial starting with gradients Tailwind 4 finally add support for radial and conic gradients while this is an obvious Improvement I think Tailwind has never handled gradients well coming in hot and I agree I've actually always been pretty annoyed with the syntax four gradients it just felt kind of arbitrary and all okay getting real spicy it's not something that belongs in the HTML directly I thought I was going to think about that longer than I did I agree these are the points where I'm like okay fine open a CSS file to be clear I know I'm not in the same camp as a lot of the Tailwind Fanboys here once the Tailwind gets complex like this once you're making a lot of different conditions or doing a lot of bracketing or crazy animation stuff just write the CSS in a CSS file it's fine or as Nan calls out in my chat this is something that should be in the design system like all of the other tokens yes you should be able to set gradient as part of your config and then call gradient Das activated or gradient Das brand not from Indigo 500 via Blue 400 to teal 300 you should not need these three classes to be copied and pasted cu the the copypaste aspect of Tailwind is really really good when the concerns are within the same file so if I have like four nav links that are hardcoded using the same seven Tailwind classes for all of those is fine because I can select and replace them all there a gradient like this is going to be used in a small number of places that are very far away from each other in your code base I would like it to have a name it is what it is anyways also they use CSS variables to do this under the hood which is kind of problematic tailin should ship with a set of predefined beautiful gradients that can be used out of the box and let devs Define their own gradients in the config file I agree fun fact that I brought up a few times I spend a lot more time in the Tailwind docks when I'm using a non- Tailwind project because I go to is a reference for the CSS that don't feel like writing so I can copy paste that over to whatever code base I'm working in and the part I spend the most time in see if it comes up look at that second result for most Reon customizing colors because I am in this page all of the time just to grab good compatible colors what if they did this for gradients what if they gave me some default gradients that looked fine I would use those all the time anyways and as n man calls out this isn't a new problem it's always been this case but you can do it in a config file if you want to probably should just do that the new notar and instar variants tail one's added support for not and hover star with the new not and in variance so now you can say if not focused make the background Indigo and in Focus make the opacity for this 100 as long as it's within a focused element these are good improvements and are good ways to maintain the guarantees of atomic Styles Oh I thought you might talk some on these cool yeah good I liked these a lot and here's the part that I started getting skeptical of myself where you could control specific children I guess you feel similar Nan these variants are slightly problematic they let you use inert and nth child selectors in your class name this encourages the same bad practice that Atomic CSS in general inail in particular has always discouraged to be clear what this means is the thing that made Tailwind in atomic CSS great is it killed a lot of cascading behaviors where you weren't writing CSS to try and affect the element underneath in very specific peculiar ways the element being styled and its styles are a lot closer together when you use Atomic CSS these rules make it more likely that you're defining the Styles outside of the element being affected which is going to make your CSS harder to maintain almost always and another good call it from n man it makes it less reusable because an element Can't Be Moved somewhere else and expected to behave the same way it also makes it less clear like let's say you have a parent component that has an nth rule on it and then the child component is in a different file styled separately if you're in that file and you're trying to figure out why this item in a list is being styled weird and you're in the file with the item from the list and it just doesn't have that CSS in there at all it's really confusing you go to the browser tools you investigate it you look at the class names and you see it's being applied by the parent you realize you're in the wrong file the whole time it sucks it's not fun and I didn't realize how much time I was losing to those types of things until I moved to tailwind and the style was always in the file where the component was that was a huge huge win for the maintainability of my code bases and this steers us away from that in a method that is concerning descendant variance there are many celebrating the destruction of atomic CSS guarantees but I think this is probably the most harmful addition to Tailwind ever oh boy coming in hot before we do that though there's a good call out here like for the previous one the odd even use case is a good example of why you would want the nth style rule in the parent here this is nice because you can have every other child be like darker and lighter for a table and stuff like that so that's cool there is no similar justification for the star variant here the star variant for targeting direct children was already added and it was problematic enough here is star C in P4 now all of these elements get a P4 padding again imagine these elements are coming from a different file and you're trying to figure out where their padding is coming from and it turns out it's here that sucks but the double star is way scarier I like Nan's phrasing here styling at a distance this is the enemy of maintainable styles if the style is too far away from the element it's affecting it makes fixing things that are wrong way harder and as he says here at least with the star it was containing limited to direct children the double star variant ruins that completely now we have double star colon data- Avatar colon rounded full now any sub element anywhere below this div if it applies data Avatar it's going to magically get this style for you CSS Die Hard have been doing this stuff your whole life you might be like yeah that's how CSS works for the people who live in Tailwind you might see why this is weird and scary you apply your styles by applying your Styles and realistically speaking if you have the type of control to apply data Avatar here you also have the control to put rounded full on it there's no reason you should abstract that up here other than to be a good CSS cascading Citizen and I just don't think this is good as Nan says other C power I see chaos Tailwind has finally jumped the shark and added essentially all of CSS into class names this is no longer Atomic CSS bars out here this is no longer Atomic CSS and developers will abuse the hell out of this and run into all the terrible problems that Tailwind was saving them from in the first place there is still time this feature should be rolled back before it's too late bold do I think this should be rolled back okay here is my my middle ground take on this the cases where I see this being useful are cases where you can't control the sub elements like if you're loading data from a CMS or something that is HTML in those cases those very specific cases this could be very useful because it is such a specific case I think this should be hidden under a flag similar to like dangerous set inner HTML because funny enough the case I was just describing like HTML coming from a CMS you have to Dangerously set inner HTML there anyways so if this was dangerously Target all sub elements then I could see this being okay to leave in but this just being there as part of the default Tailwind experience is going to result in people thinking that doing this is just as safe as doing this which is just as safe as putting P4 on all of the liis yourself if there is no clarity as you're using it that this is something to be cautious of then it will be used by default the same way all of css' defaults are used already and part of why Tailwind is great is it keeps away some of those features in CSS that that make your code way harder to maintain but if Tailwind adds in enough of CSS you'll end up in the same place so I fundamentally disagree with this message aurus it's a feature like add apply some people use it some don't the difference there is that add apply isn't one of the Tailwind class names it is a feature that in a different file for a different use case enables you to write Tailwind a certain way there is some clarity admittedly not enough but there is some clarity that add apply is not part of the default core tail and experience because it's not in the place that you're writing it it's not where you're writing these class names in your code it's somewhere else and it's I think become clear enough to the community that ad apply is not recommended and on top of all of that the Tailwind team has directly expressed that they regret adding ad apply to Tailwind so the only part I agree on here is that it is like out apply they shouldn't have added it or at the very least they should have put it under a conf fig that makes it clear as hell that you're doing something dangerous there's another good point from YouTube chat rare but nice to see this is dangerous especially for people who are new to Tailwind that are coming from CSS they're just going to repeat the patterns that they're used to instead of embracing one of the core points of Tailwind fully agree n man called out here that he sees this elsewhere I think Adam knows better but he got bullied by the community and in this case the community is wrong one of the things that I think made Tailwind so great is that it ignored the community if Tailwind listened to the haters and the people saying it should do things differently or not exist Tailwind just wouldn't exist if you listen to the push back on your strong opinions you don't make Tailwind I think some of those opinions were worth walking back like adding the bracket syntax was a huge win in so many ways even if I don't love it most of the time the double star is just kind of dangerous there are more things here and this is nice these are the things that I've wanted to talk about from n man's short pointed critique of Tailwind that I haven't had a chance to and now I finally can the class names could be better this is this call out blew my mind when he first told me about it Tailwind usually has a prefix in the class them to suggest the style being applied so BG red 500 the BG means background color m- smm is for margin PT is for padding top Etc but there are certain class names where that's not the case like Flex and grid and even something like text which can apply a color or a font size in recent versions this has become even more common with grow and Shrink replacing Flex grow and flex shrink respectively when I saw this I knew you were going to do something Nan because I remember this conversation and when I saw this change I was like oh they're going backwards not forwards here you might be confused why does this matter why do we not like this these changes are good for previty but they do introduce confusion and they can have a significant impact on code size but the biggest part is the runtime cost if you use a tool like Tailwind merge and you you have let's say a button that has default things in it like you have a default background color for your button but somebody can override it because of how CSS works the order you apply class names doesn't matter I have these two elements in HTML div class name AB high div class name ba High 2 if I add a background color blue they both become blue what happens if I add background color red I fix that they both become red because CSS doesn't give a what order you apply the class names on the element all it cares about is the order that they exist in the CSS this sucks so let's say you have a component that's button Class B but you want the user to be able to override this and give it a different background color if the background color they give occurs earlier in the CSS it doesn't work you can't just add new class names you have to be careful and make sure you remove B if you want to apply a if we did this this way with these prefixes and I passed BGA to this component I could quickly check and see if any other things have the same prefix and if they do I can remove them so that I don't have to deal with this conflict but what if they were named Flex and grid now I have to have a custom path that makes sure if I'm applying grid that none of the other things that conflict with it are applied to the element you can't do a simple prefix checking you have to do a lot more work and the result is that things like Tailwind merge are slower than they should have to be funny enough the Tailwind team actually tends to discourage Tailwind merge and they expect all styles to be applied statically but that that's not realistic like almost all of the biggest uses for Tailwind are using Tailwind merge it looks like over a third of Tailwind projects are using Tailwind merge you can't pretend it doesn't matter and that is a very good call out their solution is to not merge classes and manage conflicts with important calls it's to style things Based on data or ARA attributes and just handle everything declaratively with CSS I do not like this solution this makes your components way less reusable and it hurts another good call from Deon is that not everything uses Tailwind merge a lot use class names or clsx or CN instead and they end up dealing with inconsistency a bunch when they develop and obviously both n man and I fundamentally disagree with that approach not only does it bloat the amount of CSS it it makes the logic parts of your component less reusable because the Styles get too closely baked in yeah native tail and merge and class variance Authority would have been a better addition for V4 than the double star I totally agree I'm going to drop a real hot take right now a lot of Tailwind success comes from the fact that components in react don't have a good style Solution by default there is no good way to style things within react but the component model was so powerful that we went with it anyways we invented a bunch of different waysin the react ecosystem to do styling that varied in their quality but Tailwind as a modern Atomic CSS solution gave us a really happy path for component-based styling without having to leave the react component model react is in arguably a huge part of why Tailwind was successful I don't think the Tailwind team would disagree if they do hit me up I'm down to chat but there's another important detail here the Tailwind team doesn't like react the tail team are very PHP and rails pilled they come from those worlds a lot of their stuff is still using that they don't love this way of doing things react is a huge part of why Tailwind successful but react is not a thing that Tailwind wants to concern themselves with if they don't have to because of that things that are really reliant on like client JS and client interactions tend to be less the priority of the Tailwind team in some ways it's the same reason they're moving to CSS for config instead of JS they don't want to be a JS library npm is just the best distribution meth me for what they're doing and what their goals are they don't want to think about client side JavaScript at all they don't like it and that's fine I get it I understand it but yeah and I like this point from n man tailin merge doesn't make sense to be part of tailin because tailin is language agnostic tailin merge needs to be implemented for each language because it's a runtime function to be fair the language is Javascript but yeah and if you end up using their way of doing things too much the CSS will bloat and that will affect performance absolutely agree yeah hopefully that helps clarify why these prefixes would be very helpful in the man's words I think Tailwind should make it easier for tools such as Tailwind merge to exist and be as performant as possible as a side effect it might also make the Styles easier and more consistent to read and work with I agree and finally we have the rampant usage of REM units it's easy to change the defaults in Tailwind but the default theme uses REM units for absolutely everything from font size to spacing and from sizing to Media queries designers love this is it lets them maintain their previous proportions but this is actually an accessibility anti pattern when browsing a website the user is able to control sizing in two ways this is really important I only learned about this by talking with them on you can do page Zoom which I do all the time you can also change the default font size when I learned this I mean I knew this already but I had thought about it for a while when I relearned this I was really excited because I like big fonts especially when I'm reading stuff for content so I went and I changed the default font size in my browser to be large and it broke so much because REM is based on the default font size so if you change your font size it changes everything as n man says here it basically just changes font size to be a different way of zooming instead of it being just the controlling of how big your font is this is user hostile and it forces you to perhaps need slightly larger text to be able to read comfortably in order to be forced into a layout mode for smaller screens with less density yep totally agree the default value for spacing sizing and media queries should all be using pixel values and not REM which should only be used for font size yeah hopefully you guys are seeing why I like n man's takes he's not saying Tailwind is bad he's actually chilling the best parts but is calling out how some of those parts are being damaged by specific decisions as well as the costs of previous decisions that don't seem like a deal until you think about this deep enough apparently there are cases where height should still use Ram especially if it's like height for a container that a font in it because the height needs to match the height of the text totally agree rare cases that should have their own like if it was HF like height for font or HT height text or something like that like if they had a height thing specific for that that was REM everyone's happy so that's he the conclusion well it's post happen to focus on the negatives that's only because the positives are so obvious that there is much to say I'm very much nitpicking here but given the massive popularity of Tailwind I think it's important to provide constructive criticism and to help improve the tool for the entire community on my end Tailwind to stylex has already been upgraded to use Tailwind V4 behind the scenes and I'm excited to take it even further and more future Rich tailing to Styx by the way probably deserves a video of its own it's a really cool project that lets you take your class names from tailwind and then a compiler because Styx is a compiler rips those out and makes the most optimal set of classes through Styx really really cool stuff and I am more than happy to plug this because this article was great n man is great Styx is great hopefully you all learned something from this one I am hyped to finally get to cover these very real admittedly small but super valid negatives of tailwind and now that there's a bigger scarier one with V4 it's more important than ever that we're considerate of these things is we use adopt and evangelize the best way to do CSS for most people right now kind of it is what it is I love Tailwind you guys know that stylex is cool hopefully you guys know that Tailwind V4 is great for the most part be careful with the double Stars until next time peace nards




## This should have happened years ago... - 20240427
big announcement from the FTC if you're not in the US or you're somehow not familiar that stands for the Federal Trade Commission it's the organization that makes most of the decisions and the rulings around how companies are allowed to operate in the US and historically they have not stepped in enough for non-compete rules what is a non-compete rule though well if I'm working at a company like Google maybe I'm working on video at Google and another company like Netflix or twitch hits me up saying hey Theo wouldn't it be cool if you worked for us instead will'll pay you way more it'll be very different work but will obviously take advantage of the things you learned at your previous job well if I signed a non-compete rule with Google on YouTube I might not be allowed to work with other companies in the space for some amount of time this is terrifying it's resulted in a lot of Engineers being scared to leave their jobs because they have so many skills that are specific to the company that they work at now that they're scared they will lose if they or not be able to use or even get sued for trying to if they go somewhere else these rules suck and a lot of companies have them it's basically the norm to sign a non-compete when you join a tech company in the US thankfully I live in California which means that these rules don't directly affect me there is no history of a successful enforcement of a non-compete rule against an engineer in California however that is not the case for other states and this is not a thing that I think should exist in the entire us funny enough whether you're into free markets or socialism I think we can all agree that nobody benefits other than the company when a company strictly enforces its employees cannot work at other companies in the space it makes competition worse it makes the lives of those employees worse it makes it less likely you get paid a fair amount of money all of these things suck and it makes a lot of sense that they're finally being struck down and I want to read over what the FDC is doing the fdc's final rule will generate over 8,500 new businesses each year raise worker wages lower healthcare costs and boost Innovation I will say it's hard to know all of these things and having that type of bold statement from a.gov sites a little bit scary because we we don't not know any of these things yet but I wouldn't be surprised either because there's a lot of opportunity here today the FTC issued a final rule to promote competition by Banning non-competes Nationwide protecting the fundamental freedom of workers to change jobs increase Innovation and Foster new business formation non-compete clauses keep wages low suppress new ideas and they rob the American economy of dynamism including for more than 8,500 new startups that would be created a year once non-competes are banned said the FDC chair Lena mcon the fdc's final rule to ban non-competes will ensure Americans have the freedom to pursue a new job start a new business or bring a new idea to Market this is another important part let's say when I quit twitch I wanted to make a twitch alternative I want to make a new streaming service or platform now imagine I had signed a non-compete with twitch and I didn't work in California theoretically my attempt to do different things including what I ended up doing which was ping which was building a better product for streamers to collaborate technically speaking they could have sued me for doing this and I absolutely had that fear when I was going into it in fact it was a thing that investors would bring up when I was talking to them when I was raising money for pay people were terrified of these rules the fact that I had signed a piece of paper that technically said Amazon and twitch could sue me if I built something too similar or worked on something too similar is terrifying another great question from chat from Timmy Is this different from an NDA yes an NDA is a non-disclosure agreement it means you cannot talk about things you did at the job so if I worked on some new service and I had an NDA signed I won't be able to talk about that with others ndas tend to have a date where they expire either legally or in the paperwork itself which means usually with an NDA it's like you can't talk about this for 2 years you could work on other similar things though and if I have an NDA that says I can't tell you about this feature I might as well be able to tell you about other things that I've worked on ndas are definitely enforcable everywhere depending on the NDA you can write one that isn't enforcable but when it comes to what we're talking about here which is non-competes it's no longer you can't talk about the thing it's you can't do the thing you're no longer allowed to work with these tools you're no longer allowed to talk about this thing you're no longer allowed to be involved in this space for some amount of time contractors can sign non competes but it's not particularly common regardless companies love to do these things where they it wasn't even uncommon back in the day to hire a person not because you wanted them to work at your company but because you didn't want them to work somewhere else and If you hired them even if you you fire them or they quit some amount after you end up with a 2 to four year window where they can't work for your competition this resulted in super anti-competitive behaviors by a lot of these companies and I'm really thankful this is now changing yeah non-competes are made to lock you in even if you don't want to work there anymore yep it means the likelihood that we move that we make new things that we work at other companies making new things all of these things are fundamentally worse when non-competes are enforceable so Banning them is huge for pursuing new jobs starting businesses or bringing new ideas to Market Yep this is a phenomenal statement shout out to Lina Khan for put putting this so definitively cuz it should be treated as such the FTC estimates that the final rule Banning non-competes will lead to new business formation growing by 2.7% per year resulting in more than 8,500 additional new businesses created each year I'm a little skeptical of this one of my hot takes around running companies is that the problem isn't that they're hard to do it's like it's hard to make a company the same way it's like hard to make YouTube videos or it's hard to learn to code the thing is that it's also hard to be good at YouTube it's hard to make a good business and it's hard to make good code so making it easier to get started doesn't necessarily result in more people finding success doing the thing are there Engineers whose only reservation for not starting a company is the fact that the noncompete might hit them yes but those people have lots of other options they could move to California they could work on other things in the general space that might not affect that non-compete they could hire a lawyer to help them figure out if it's even enforcable or not there are options that existed before this the fact that you had to do them sucked but if you want to run a business a lot of things suck and if that's what stopped you my spicy take is that you weren't going to have to succeed in the first place if the only reason you didn't start a business was the non-compete being enforcable you probably would not have been a good company founder so while we might see this 2% or this 3% number I'm skeptical that the companies that are only forming because of this rule change are going to be particularly successful the same way that like making a tool that makes it way easier to record videos or go live on Twitch doesn't mean there's more good streamers if you're familiar with twitch and the idea of streaming this room that I'm currently recording this from I have a I just swapped out my like $3,000 light for a cheaper like $500 one here I have another $ 600ish light as my backl here I have my roadter audio interface which is like a grand with everything I have attached to it my microphone which is another 400 plus dollars the my computer which is three grand my camera which is two grand the lens and everything this room costs 10 plus Grand this is what a really high-end setup looks like you don't need this but I like it however you do need the computer you do need a real OBS setup you do need your stuff together especially audio if you want to make even watchable content I bring this up because previously twitch made a kind of dumb thing twitch decided that they should throw all of the stuff that you're supposed to do on Twitch onto the Xbox and Playstation so that you can stream straight from your Xbox guess what not a single relevant streamer started with console streaming there were not people who would have been big streamers if only it was easier to stream because the harsh reality is once you're taking it seriously you got to put in a lot of time a lot of money and just actually insane levels of effort to do this right and if you're not willing to do that you're not going to be successful with certain things I don't think this is the case for something like engineering where if we make it easier for people to start learning to code they are more likely to get a job in code they're less likely to invent some Modern crazy technology though the people who need help getting in are not the ones who are going to be the most successful the ones who despite the lack of help getting in do it anyways those are the people who are going to be successful and when it comes to starting businesses especially when it comes to starting large venture-backed potentially billion dooll companies that doesn't happen because you made a rule change that happen s because a person despite what the rules currently are decided they would dedicate their lives to doing something insane so while again I sympathize with this number being placed here I have a lot of reservations about everything associated with it because I just don't see a future where people who stopped hesitating because of this change are actually going to be successful regardless this is an awesome change I just wanted to to say that this one number is a thing I don't care about the same way that like half of streams on Twitch were probably coming from people streaming on Console but 100% of those streams were anyways the final rule is expected to result in higher earnings for workers this actually I fully agree with if you now have the ability to go to companies that are closer to the one you're at if instead of going from Netflix to a bank you can now go from Netflix to Amazon Prime where previously those companies being so close meant you might not be able to do it due to the non-compete suddenly you're much more valuable in the market and now you can compete with different companies to get better offers to increase your salary at your current job or get another opportunity somewhere else that I totally agree with the estimated earnings increase for the average worker being an additional $524 per year and it's expected to lower Healthcare cost by up to 194 billion over the next decade these are two very interesting numbers I'd be curious how they generated those in addition the final rule is expected to help Drive Innovation leading to an estimated average increase of 177,000 to 29,000 more patents each year for the next 10 years under the final rule I have feelings about software patents especially that I'm curious to see how that goes but uh I don't personally believe more patents is more good but I get why they would non-competes are a widespread an often exploitative practice imposing contractual conditions that prevent workers from taking a new job or starting a new business non-competes often Force workers to either stay in a job they want to leave or bear other significant harms and costs such as being forced to switch to a lower paying field being forced to relocate being forced to leave the workforce altogether we being forced to defend against expensive litigation an estimated 30 million workers nearly one in five Americans are subjected to non-competes that's a great paragraph no notes basically everything I've been saying so far still skeptical of all the numbers they're dropping here but uh yeah 18% of workers being covered by non-competes is terrifying and all of them being free is very exciting somebody asked a good question this must be bad for somebody though right yes the companies that don't want to lose their workers or pay them more as a CEO I'm a CEO in California where all my employees are Californian or Swedish where they're protected by the EU so this doesn't affect me either way but theoretically especially if I started this company 10 to 20 years ago it'd be really nice to know that the people I hire could never be poached by competition like very nice so as a Founder I could see the desire to make sure my my employees that I taught deeply that I've been working with forever that I've been paying a reasonable salary I don't have to worry about them going anywhere or asking for more money so it benefits the companies and as such these changes hurt the companies but I don't think the way that they're hurting companies is particularly bad I think this is fair and makes the market Freer people keep asking how does this affect does this affect countries that aren't the US the EU already has decent rules about this but it's uh exciting to see all of the stuff going on in the US now too cu most companies are based out if it's where a lot of their employees are the US has been behind on this and we're finally not and certain States like Florida just kind of let you enforce non-competent ndas to keep people from having any other opportunities it's surprisingly common to do such under the ftc's new rules existing non-competes for the vast majority of workers will no longer be enforcable after the rules effective date that's cool that this is based on the rules date not on the date of your previous non-compete signing so even if you signed a non-compete in the past it will no longer be enforcable other really good point from chat from Kevin this is arguably a big deal in engineering outside of software my chemical engineering family members are so happy to see this news yeah that's a very fair point cuz in chemical engineering the difference between jobs is much smaller where with software Dev the difference between working at Netflix and working at Bank of America is massive so you can still switch between roles without a non-compete being like enforceable whereas in chemical engineering the chobs are way more similar so the likelihood that you can have this handled is way lower imagine like a hair salon they have non-competes 2 there's so many random jobs you could have that non-compete could just destroy your opportunity to explore and do other things I will say I haven't seen many hair salons or things like that with non-competes because they're usually very different relationships where they haven't actually hired the employees the employees are like their own separate Contracting layer dep depends a lot in the business regardless this is this benefits a lot of people existing non-competes for senior Executives who represent less than 0.75% of workers can remain in Force Under the ftc's final rule interesting that senior execs can still be enforced like this I actually didn't know that was part of the rule but employers are banned from entering into or in attempting to enforce any new non-competes even if they involve senior Executives okay okay so existing senior execs might get but new senior execs all good huge this might result in a significant amount of churn where like Executives at one company move to another because right now as an executive moving from like twitch to Netflix sketchy especially if you don't live in California now though go nuts very exciting employers will be required to provide notice to workers other than senior execs who are bound by an existing non-compete that they will not be enforcing that they won't be enforcing any non comp against them that's actually huge too forcing the companies to notify their employees that they will no longer be enforcing the non-compete against them that's a really cool thing I'm excited for a lot of people to get this email and YouTube search end up on this video let me know in the comments if you're here because you just got one of those notices in January of 2023 the FDC issued their proposed rule which was subject to a 90-day public comment period they received over 26,000 comments on the proposed rule with over 25,000 of them in support of the ftc's proposed ban on non-competes the comments informed the ftc's fin Ru making process with the FTC carefully reviewing each comment and making changes to the proposed rule in response to the Public's feedback in the final rule the commission has determined that it is an unfair method of competition and therefore a violation of Section 5 of the FDC act for employers to enter into non-competes with workers and to enforce certain non-competes good commission found that non-competes tend to negatively affect competitive conditions in labor markets by inhibiting efficient mashing between workers and employers Yes again if you're already skilled in one area you have to move to a different enough area to not hit the non-compete just makes obvious sense G found that nones tend to negatively affect competitive conditions in products and service markets again same reason if you worked at Netflix and you saw an alternative path to make a better product they might not let you and that would inhibit new businesses forming and also innovating there's also evidence that non competes lead to increased Market concentration and higher prices for consumers that sounds right to me exciting stuff so what are the alternatives to non-competes the commission found that employers have several alternatives to non-competes that still enable firms protect their Investments without having to enable a non-compete trade secret laws and non-disclosure agreements both provide employers with wellestablished means to protect proprietary and other sensitive information researchers estimate that over 95% of workers with a non-compete already have an NDA look at that the ndas will continue to be a thing but as I mentioned before way less big of a deal and if you're if your control of your like Innovations as a business owner can't be properly protected via NDA and patent then they're not meaningful Innovations or things that you should hold the fact that a non-compete was the way that companies would would hold their position in a market was terrifying and that's over the commission also finds that instead of using non-competes to lock in workers employers that wish to retain employees can compete on the merits for the workers labor Services by improving wages in working conditions oh boy I love when the FTC does these slapd Downs like oh you're scared you're going to lose your employees because of this pay them better yeah changes from the nprm under the final rule existing non-competes for senior execs can be remain in forc yet we already know that can't do new ones the final rule defin senior Executives as workers earning more than $151,600 positions okay first off what a number how do you how did this number get picked I wish they would Source these things because that's such a strange number to just put there respect to him for it but gez the other part here that I'm scared of is in policymaking positions this is vague enough that I could see a company like Amazon for example where like I'll be transparent I made a lot more than this much money when I worked at twitch and Amazon if you count my stock I made a lot more money than this when I worked at twitch and Amazon I also made decisions around how my teams were run do I count that's a weird thing that I don't know I actually think I would fall within this ruling because even though I'm not an exec and hell I was never even technically senior at twitch I made way more money than this and I made decisions around the company policy at least in the the world of my team thankfully if I was to go somewhere else I'm fine because this will no longer work this is just for existing non-competes not for new ones so if I was to get a new role right now unenforceable inste have in California also unenforceable yeah yeah interesting I I know people who are going to be hit by this part in particular and that makes me sad Additionally the commission has eliminated a provision in the proposed rule that would have required employers to legally modify existing non-competes by formally resending them this change will help to streamline compliance also nice instead of forcing them to update the rules just blanket destroy them another fun comment from ziko I just realized something the only way that gcp and aure can get better is this since AWS has a really shitty non-compete for like 6 to 12 months that's fair okay the policy making is more defined of the actual rule do I have to read that the the threshold is based on the 85th percentile of earnings of full-time salered workers nationally that's a decent way to generate the number let's find the actual rule policymaking Authority means final authority to make policy decisions that control significant aspects of a business entity or common Enterprise and it does not include Authority limited to advising or exerting influence over such policy decisions or having final authority to make policy decisions for only a subsidiary or or of or an affiliate of a common Enterprise okay vagish this one's a little clearer policymaking position means a business entity's president CEO or the equivalent or any other officer of a business entity who has policy-making Authority or any other natural person who has policymaking Authority for the business entity similar to an officer with policy-making authority an officer of a subsidiary or affiliate of a business entity that is part of a common Enterprise who has policymaking Authority for the common yep yep yep they are deemed as well so yeah if you don't operate like a subsidiary business or you're an executive right below the CEO sounds like the policymaking Escape here likely won't affect you so that's good that that makes me feel a little less scared interesting that the vote was 3 to2 I want to read what the people who said negative things had to say so it was Melissa and Andrew said no so we'll start with the Nos and then we'll go to the yeses what Melissa have to say article one of the Constitution invests all legislative powers in Congress cool is this just going to be that Congress should do this not us with these important constitutional issues in mind a threshold question must be answered for non-compete Clause rules see the final rule does the commission have the authority to promate prom promulgate that word makes me feel like I have dyslexia Jesus I I believe the answer is no and therefore I respectfully desent okay so this person's issue is that the FDC can't make rules so they shouldn't be making a rule here there is no clear Congressional authorization under Section 5 of the FTC act for promogal of the final Rule and therefore agree with commissioner Ferguson's reasons okay so you're citing Ferguson as your reason let's see what Ferguson had to say then I am sympathetic to the policy embodied in the final rule anglo-american law has regarded noncompete agreements with deep suspicion for centuries they cut against the grain of our an ancient common law Traditions protecting Every Man's right to apply his trade and May in some circumstances undermine competition and Innovation why do they all talk like this why is this this long why is there like this much citation on like half a paragraph the the number of citations here is actually insane beginning with policy puts the cart before the horse lawmakers okay actually I hate that I agree with the statement I've said this many a time I wish that these laws were written more around demonstrated harms rather than gut feels especially the EU but uh yeah writing legislation on Vibes instead of acting on specific harms scary that said not only are there actual harms there are measured ones that they cited many times throughout the thing that we just read I think that this policy is actually a really nice cart that has been attached to the horse because we've learned a lot there is demonstrated harm so I'm more okay with this but uh yeah in other cases I would totally agree but I don't think he's we'll see if he actually pushes back meaningfully lawmaking by the administrative State sits uncomfortably in a democracy there going to be the same argument Americans cannot vote us out when we get it wrong yeah but they asked for comments and the comments were very Universal here administrative State can act with greater dispatch than Congress but the difficulty of legislating Congress is a feature of the Congress or Constitution's design not a fault okay so my gut feel here is that these two people were added to the FCC to make sure they can never do anything see Republican yeah Republican I'm assuming the other one is too be how this goes yep so these are people whose only role in the FTC is to say oh by the way we don't actually think the FTC should be able to do anything sucks annoying I I miss when the Republican party was more interested in competition like isn't their whole thing free and fair markets because this is a very nice thing for free and fair markets yeah I remember the days where Republicans used to fight for these things not against them Republicans are trying to sue to block it plaintiff trying to reverse non-compete ban is Trump's tax adviser G Brent Ryan has advised Trump on tax policy his company is dedicated to liberating our clients from the burden of being over taxed officials in North Dakota complained internally that Ryan burdened and antagonized tax officials there by throwing stuff at the wall to see what sticks with little to no effort on their part to provide meaningful documentation I have heard too many stories of people trying to get around tax by just sending so much obnoxious information just barely legally in order to to piss off tax officials and get out of stuff so this does not surprise me I guess they are saying that that description fits this lawsuit which claims that the agency has no authority to write a rule to ban non-compete agreements and even if it did the rule would be an unconstitutional delegation of legislative power to the executive branch or a violation of the so-called major questions Doctrine because it affects so many workers for good measure the complaint also suggests that the FTC is unconstitutional joy joy joy joy it's a standard set of right-wing arguments against both doing something against non-competes and the administrative state in general we need more Republicans to stand up against this guys like come on I I know I have Republicans that are staying in my audience I know y'all are here let me know in the comments that you're both a Republican and you think it is absolute that this type of anti-competition like anti-free Market stuff was possible a non-compete is not part of a free market the ability to prevent an employee from going to other companies is not something that should be functional inside of a free and fair market I would genuinely hope look we're already seeing people in chat I've been leaning Republican lately and yeah this legislation is good I don't care if the FCC is the one to do it but I'm glad someone is yeah cool imagine flooding the NRA with members and voting them into Oblivion because none of them think they should do anything yeah it's obnoxious I hate this going to become a political video I didn't want it to but uh as per usual there are Republicans that are just put on the commission for no reason other than to block things and it's really really annoying that like two of the five people here their only rule is to say no that's it yeah this should not be a political issue this should be a very clear like free and fair trade is not being allowed in the United States because of these existing non-compete things the fdc's role is to make sure that free and fair trade exists in the United States this is only fair that's all I got on this one we went from engineering competition to my history at twitch to politics of course let me know you guys think in the comments cuz there's going to be other chaos otherwise until next time peace nerds




## This took us too long, I'm sorry - 20231021
it's no secret that app router is really cool but also it wasn't quite ready for us to adopt been using App router in all my projects recently and is cool as it is I've missed create T3 app a lot and that's why we've put a lot of effort in to make create T3 app finally Support app router we've been taking our time with this because we wanted to make sure the app router roll out both made sense and gave users a good experience while also not compromising on the modularity and customizability of create T3 app directly we love trpc we love next off we love we love drizzle we love all these other pieces we wanted to make sure we didn't compromise on that while introducing app router as an option we also wanted to make sure we didn't hurt the users who are still preferring page router because harsh reality is most projects are still started with page router and I don't see that changing anytime soon so we went out of our way to strike a balance make sure that both the page router experience and the app router experience were great and it's honestly unfair for me to say we cuz I did basically nothing but play with it this was all on Julius CJ and a little bit of help from nexl 2 the team absolutely killed it on on this release I'm so hyped on the new app router support in creat T3 app and I can't wait to show it off a little bit now let's take a look I'm going to use bunx just cuz it's fast3 at latest app router demo typescript of course Tailwind of course trpc yes not going to use next dooth cuz I personally use clerk a little bit more now another cool thing we added we support drizzle directly which is huge big drizzle fan not using Prisma as much lately so having that there is another option it's really nice obviously this all increases the maintenance burden a lot on the core team but they're killing it with it I like to use the app router yeah yes yes yes yes and in just a moment we'll now have a scaffolded project using App router we can hop over take a look this is app router obviously there's a bunch of stuff in here that we don't necessarily need I will quickly set this up so I can show yall I think since I use drizzle and by default we're using drizzle through the planet scale HTTP driver that I'm going to have to go create a driver for this really quick while we wait for that so one of the cool things you might see here is that we're actually awaiting from API which might seem strange cuz we can just run the backend code here but this is a really cool pattern where you're able to make a trpc router and call it inside of server components which prevents you from having to use like Hooks and all of those things to access it you can still do that if you want to like if I wanted to make this a traditional react component that runs on client instead of being a server component I'd be able to use this with the hooks but I don't even know if we're exposing the react helpers by default anymore TPC react is here so let's see oh yeah we still expose it yeah so we have trpc react API as well as the trpc server API so now we can just the same way as always API post create use mutation but we can also on the server components apios hello. query so this isn't a hook this is a promise that you await so on the server side you can do that and on the client side you can do different things which makes it possible to expose both behaviors in one place which is really nice DB push so one of the cool little things that we're doing by default now I have a whole video where I've been planning for a while where I'm going to go over this more in detail for those aren familiar drizzles and omm not too dissimilar from Prisma the big difference are a little more minimal it's entirely typescript based and they've added a handful of niceties that make our lives as developers much easier the big one that I really like is prefixes what's a prefix if you're around for the WordPress days you're familiar with prefixes and databases unless you have one database that does lots of different things for lots of different projects the cool thing with using a prefix in drizzle is you can now have one database with multiple different drizzle projects on it so if you only have one free database with Planet scale you can use that database for like 15 different projects at once trivially which is actually really nice and convenient and when you do things like the DB push command it's only going to update the things with that prefix now which is great I've had a really good experience using prefixes with Drizzle to have one database cover lots of projects and I have to spin up a new project every time I want to do something quick so I've liked this a lot it's made my life much easier as a Dev that has lots of different projects and now you have this opportunity too really cool and the other big thing with Drizzle this is all defined in typescript now this isn't a separate schema file that exists in a separate seate like syntax in a file that has to be parsed converted and lots of other things done to it this is just typescript and now this typescript could be used to do lots of different things like again if I Bun Run Dev and here we are new post my most recent post is new post dope and we see here all the queries coming through and if I wanted to show all of the posts instead of just that one post we can make that endpoint quick it's going to command click here and now we have all the procedure we have get latest let's just do get all public procedure. query return CTX db. query. posts. find many and now if I go back here be able to const all posts equals a wait api. poost doget all. query and now I have all the posts going to delete all the contents here get in the way a bit and now I can all posts. map post return div post do name this needs a key so I'll give it key equals post. ID and now new post it's right there if I want more cred showcase more posts even more posts all handled directly using trpc really nice that said you don't have to use trpc if you don't want to I'll quickly convert this to not use trpc so first I don't need the link anymore we don't need that anymore either first let's get these posts without trpc it's actually pretty easy we're using the context for the DB here which isn't necessary I'll just yoink this paste this here import DB and now this should still work yeah and if I want to remove the other side the actual post those where things are going to get a tiny bit more complex because we have to first and foremost update the next config to support experimental server actions but now that that's updated I can make async function create post this will be us server or let the compiler know what it's doing once again let's just go rip the code it's easier whatever a create post is doing Pi post create oh we have this simulated th millisecs that's why that was so slow that makes sense we won't bother simulating that here though CTX DB insert well it's not context TB anymore input name String if type of input. name is not equal string throw new error not a string since we don't have Zod in server actions land we have to manually validate things I could do a Zod validator here but I'm being very lazy so now that we have that this actually needs to be done in this which is a different component so let's just move that over to there that'll be easier you like this function Hub over to create post oh it's use client so let's make a new file um post action export async function import DB import posts and now I can set the action for this to be create post which it should have been able to find from here it does not like that for some reason import create post from slost action name equals name oh interesting there's a bind functionality now this is new I haven't seen this still don't know why this is so mad oh because it has to be form data as the type is that why and this I can give name String right no what the this is why I don't like this yeah there's no happy typescript story yet I have to do input doget for that as you can tell I don't use form data on servers often let's grab this first then cons new post name this is a really good Showcase of why I like trpc so much cool now that should stop complaining that I don't care about anymore don't really need any of this anymore the disabled State I probably should do but I'm lazy so we're not going to do that just yet but now this will work there's one thing I intentionally forgot though and I'll show you in just a second trpc free post submit and it seems like nothing's happening but if I refresh you'll see it's there so what happened well it didn't have any reason to reload the page after the action cuz we didn't give it one we can do though is revalidate path slash here and since we're doing this now in the post action one more po that's actually one other little thing that I really like about creat T3 app compared to other Solutions is the eslint config is significantly stricter and it makes my life much better every time it gives me it's giving me for the right reasons yeah that did it some weird incompatibility with revalidation in server actions and trpc on server side somebody said shouldn't I router. refresh I can do router refresh but it's nice to have the server in the same request send the updated HTML when it does the revalidate path if I recall correctly I'll check the network tab to be sure about this it actually sends the updated content send updated content up over to the network Tab and that post call this guy I believe came with the additional content in it yeah cuz the only other things we got was a font and a layout revalidate for um CSS so this post that we made actually had the data in it to update the content of the page which is really really cool that I don't have to do a post wait for the response and then do another request getting all the data back in a single request is actually a really cool pattern it's similar to hate to say it HTM X it's really cool though and I see why this pattern is being pushed the way it is didn't clear this after which is annoying to do but again like as I hope I have showcased here server actions are early and that's why we're still defaulting two tier PC for a lot of this stuff because it's not too hard to move off it you just rip the functions and you can reuse them which is dope but you'll have different things you have to worry about I'm really happy overall this is so much better an experience and I think I'm finally done with create next app because all of the things I missed from create next app are in here small stuff like a proper prettier config that uses the Tailwind CSS plugin things like es lent being set up properly with really strict but reasonable rules to make your Dev experience better things like the TS config itself being a little bit stricter and having stuff like no unchecked index access on by default which is really nice plus having drizzle set up instantly for me where I can just drop an enir variable and run the DB push command having really nice stuff like DB Studio set up too which I haven't actually tried let's give it a shot Bun Run DB Studio yoink yeah this is dope and having all of this built in by default as part of my getting started is reasonable and none of it's huge I find that a lot of these starters come with a ton of bloat like they have like 50 test files or they have a ton of pages with lots of different stuff on them we only have one page by default and it's a really simp simple Showcase of all the different parts our server is also very simple we have a single router that just shows you some examples of what creating posts and reading things from your database with trpc looks like we also have a basic example both on the server and on the client of accessing trpc so that you can use your trpc both in your react components the traditional client side way as well as on the server and share a lot of your logic between the two really powerful I am very very happy with the overall experience I have been having using Create T3 app especially now that we have app router support So if you haven't already given us a star definitely consider it 20.5k stars now which is huge I so hyped with what's been going on with creat T3 app I am beyond pumped about the hard work the team's done this is actually a big thing I'm no longer in the top row of contributors huge shout out to all of the contributors for making this possible Julius absolutely led the charge Nexel OG Legend original creator of create T3 app and has continued to help sense we got CJ Christopher elre recently joined axiim been killing it over there still helping us here too gith Hub bot obviously the OG Legend don't know how much Michael's been helping but he's still a legend helped us out a ton early we got aava as well I don't remember what specifically you contributed if I recall you helped a lot with the localization stuff regardless we appreciate you a ton and all the other contributors 265 of them Absolute Legends thank you all so much for the help I couldn't be more hyped on create T3 app and now that it has app router support it's really nice to be using it every day again I do actually build all my projects with app router and I was building them all with crazy3 app so we're back to it couldn't be more hyped how about y'all though have you started a project with create T3 app are you on app router yet if you want to hear a bit more about why I'm so hyped on these new server component patterns check out the video here all about it YouTube also thinks you're going to like the video below right there so check that out too if you haven't thank you guys as always really appreciate y'all peace NS




## This tool annoyed me (so I built a free version) - 20241110
every once in a while you run into a problem that seems really easy to solve but then you look at the internet to see who solved it and the solutions are atrocious they vary from being expensive to just not working or my favorite a combination of the two charging you money for something that doesn't work and sometimes the problem is so simple it just doesn't it doesn't make sense one of those problems is something I run into probably more than most people I often have an SVG usually a logo from like a company or a framework or something I discussing that I need to have as a PNG because despite my graphics editor for photos and thumbnails supporting svgs most things like video editors don't and I got so annoyed that I built not just one tool but two I know how simple this problem should be so the tools that I created are both free and open source but I still have some bills to pay so let's hear a quick word from our sponsor bolt. new and I'm going to do something a little different with today's sponsor I'm not going to show you how it works I'm going to actually show you it not working so I was streaming a few days ago and I wanted to use bolt. new to create a game of teaco really quick and it gave this answer which I mean technically speaking it is correct but like no one wants to play tict Tac Toe this way it detected the winner right but what went wrong here in most tools like this you can prompt again in order to ask it like hey can you fix this for me but that doesn't always work and sometimes it actually makes the code even more confusing what bolt does differently is it actually gives you the code not just like the source code to use in your project but you can edit it directly so when I hopped in here I saw oh this is mixing a flex call it's just Flex obviously it's going to be in a row so I added Flex call here command s for Save and it worked that's all it took and it's just like the way you would edit in your own IDE and even kept the state you get the full control you would expect because it's by the people who made stack Blitz you can't see the little button here but that says open in stack Blitz you can just click it and open it there and even better you can deploy with one click too I could say deploy it and it will automatically deploy directly on nfy and look at that you just get a link to a deployed version and now I have my own teac toe game on the web can't be that for Prototype in Kenya thank you stack blits for sponsoring today's video go give bolt. new a shot first I want to complain when you search for an SVG to PNG tool you'll find a few options this one is free and it seems totally fine let's upload a random SVG first thing is it is not only letting me upload svgs it's letting me upload anything I can upload a zip I can upload a folder I can upload all these things which is annoying when you're trying to find the SVG in the folder that you want to use so I will use the upload thing word Mark that took a bit longer than I would have liked but now it is here and I can click download all which puts it in a zip file and gives me the one image at the exact same res resolution that the SVG claimed which if your SVG is claiming a large resolution CU it's a vector file cool but if it's not like for example the stack Blitz logo which is hard to find because it lets me upload anything this one is going to download as like 2 kilobytes and it's tiny and you zoom in you're like oh that's blurry as hell there is literally no way using this tool to tell it hey since SVG is a scalable Vector how about you scale it up a little bit because why would you ever need to do that I don't know why would you have a SVG I I cannot believe they don't offer scaling meanwhile they offer something much crazier that we had to try because converting from an SVG to a PNG makes a lot of sense because an SVG is a vector the PNG is just a representation of that Vector in pixels but you can't really go the other way usually when people convert pngs to svgs like they're using some tool like figma what it's doing is it's embedding the PNG as a base 64 encoded data flag inside of the SVG so you're not actually getting a vector you can't turn pixels into a vector you have to draw a vector on top of pixels by hand usually to make sure you get it right but here I wanted to show you guys this because it was very very funny here's a PNG of my face and we can download the SVG for it and obviously if we go through and look at the code here we can go find that base 64 right huh yeah I should have recorded my initial reaction because I did not know what was going to happen here so I opened it in Affinity it actually tried its best to make individual curves for every single thing it saw in terms of colors and the result is this weird watercolor pastel looking of my face because it tried to recreate it programmatically turning the chunks of colors into vectors it's a cool like weird art style thing but I hate it don't convert pgs to svgs if you're looking for a tool that does that your understanding of both svgs and pngs is fundamentally wrong fix that don't do this so that was tool number one the one I found myself using a lot was this guy the cloud convert note cloud convert which means this runs in the cloud which means it costs them money so when I click select file and I click my SVG if I find also by the way still doesn't let me filter for just svgs let's grab the stack Blitz one again because that was the one that was the good example of being too small I can click convert and it'll do the same thing but more importantly I can go to settings and I can set a much higher width so we'll set that to like a thousand doesn't show me any other info here but at least I can make the width bigger then click convert wait hit download click and if I open and preview you can actually see look at that actually somewhat high res now but if you do this two more times they're going to say you can't do that anymore you have to pay us and you have to buy a subscription for conversions what if I told you you can do this all in the browser with like 30 to 40 lines of code here's the service I made quick pick. t3g I have two tools right now but what we're talking about right now is SVG to PNG converter oh look at that upload SVG look at that I can only click svgs how revolutionary I go and click on the stack Blitz logo it tells me the original resolution and it tells me what the scaled resolution output will be 117 pixels wide is not enough and 24 pixels tall is actually useless so I'll click 32x 768 tall sounds about right save now I get a saved file that is the correct resolution and it updates the name to say what multiplier you used insane right so hard to build I know I need custom scale options believe it or not I only had custom initially but we're going to add it it doesn't take much time but it's also open source so you can just go to GitHub and file a PR if you want to look at that we already have one someone removed my leftover console logs thank you for doing that because I had a lot of debugging issues and now those will be removed thank you cool I'll be honest I don't know how much I intend to maintain this service I wanted to solve the problem that I had and now the problem is solved and I am happy I want to show off the code a little bit before I show off the second tool because I am proud of it it is really useful hop over to the square image Square tool by the way I could I had this all just in the page component but I couldn't do metadata because it was a client component so my options were move metadata to its own file metadata TS I actually I don't know if that ended up shipping I know it was being considered out a time or I could make this a server component again and just move all the client logic to a separate file which is what I ended up doing so here is square tool the actual fun logic here I need to import react I don't even know why that's there that that got autocom completed from cursor oh is it the square tool that's why I barely wrote the square tool I'll be honest most of that code was generated I did write the SVG tool though this was a so the SVG tool has the metadata wait no this should be oh I guess that's because it was in the page before so that doesn't need to be there anymore cool already making fixes as we go through it and I wrote this wonderful scale SVG function it takes in the SVG content as a string I create a Dom parser I parse the SVG content from this string and create an SVG doc element I grab the element off of it I then grab the attributes for width and height because that's how you know how wide and tall it is I scale them with the scale multiplier and then I set the updated properties and then I serialize the results so this is how I actually do the SVG scaling to make the correct resolution of SVG then I have my SVG converter hook which takes in the canvas ref SVG content a scale a file name because you can't get that from the SVG because the SVG is just a string of the content from the file you don't have the file name anymore then the image metadata because Actually I don't even need this anymore because we're just using image metadata for all that look at that code review live for a video scale SVG is scale SVG this is all memoized because I don't want this rerunning all the time I am running react compiler on this project so I probably don't even need to write this use memo but I did it before I thought oh I can just use the compiler we have the width which is the scaled version the height that's the scaled version the scal PG which is what we generated here and those are now the values I can use which I passed back in order to render them in the canvas I then have my convert function which grabs that canvas ref it throws if you don't actually have the canvas and then I generate my save image function which it will convert the canvas's current value to a data URL which is a PNG and then create it as an element on the page as an a tag set the data URL to that so that now you could theoretically click this to save but that sucks to do so I just click it for you which is believe it or not the only way to trigger a download from the browser there's no download API there are just links that trigger a download that you can trigger The Click for welcome to browser standards then I create the image and then once the image loads I draw it to the canvas and then I call my save image function and what is the source for that image it has to load right here data image SVG XML encoded URI component for my scaled SVG but the fun catch that I learned relatively quickly is that if I don't render the canvas properly relative to the SVG imp putting in it everything falls apart so in this hook I have save as PNG button which is the button for saving it takes in the SVG content the scale you have selected as well as the image metadata the important detail here is once I call my use SVG converter hook I have my canvas here which has the ref as well as the canvas props also note that I'm not using a traditional ref I'm using UST State here because when I used it as a ref I had stale references everywhere and rather than fixing that I did this instead it works I have my little plausible call here so on Save I can log the fact that someone saved which is cool because now if I go to plausible which is my go-to Anonymous analytics provider which funny enough went down right after I did this we can see on quick pick that I already got a th people going to it in the less than what like 12ish hours it's been around for and we can even see down here how many people have done conversion so far 207 total that's exciting but that is just the first tool the actual core part here is not that complex or even that interesting I just have the file uploader hook that I wrote that just keeps track of the current file does a little bit of parse and get metadata and then you have an input on change handle file upload it only accepts SVG this this is the one line of code those other tools were missing by the way just on the input accept equals SVG it's not that hard yeah you get the idea so let's go to my other tool because my other tool is admittedly even more Niche but for me it's even more useful Square image generator why would I want my images to be a perfect square if they're not already a square why do I care I'll show you why let's go to programmer humor programmer humor is a great source for me to get free memes to post on Twitter or more importantly for me on YouTube Community posts so if I save this image it cool the blurring on the sides there was happening on Reddit so the way Reddit makes content fit properly is they do some blurring around it so that it fits a square the way YouTube communities do it if I go and make a community post to show you is that it just crops it I can choose where the crop happens so I can take just the top or the bottom but I can't use the whole image for the preview which means that you have to click into it if you want to see the actual content of what I post on YouTube communities as per always I'm engineering around someone else's incompetence in this case I'm engineering around YouTubes admittedly YouTube doesn't have a huge group of hundreds of thousands of normies making posts on YouTube Community so there aren't a whole lot of people who care I'm in the unique group of people who care and can solve the problem so I built the square image generator where you take an image that is not a square and now it is a square you can choose if the remaining background should be white or black and then you hit save and now when I go to YouTube and I hit the image upload button and I put my squared version you get the whole thing now whoa how is this not a thing what's funny is there was a tool I'll admit Square an image is a thing I've used a whole bunch and I'll show you the workflow here choose an image choose the image it does this awful blur hash that literally never ever works you can increase or decrease the radius and it is garbage I scroll down I check square with color where it defaults to Red why would I ever want it to be red someone has an answer for why let me know cuz I have no idea why I would ever pick red other than because red is the Border color you choose when you're debugging so I bet this is what he put in to make sure it was working and just left it there so we'll change this to a different color either by using the Picker to find the color we want around the edges or use this Joy cool and then scroll back down and hit download what what it's just it's too much and to be fair shout out to the person who made this for making it because I did use this for every Community post I have made pretty much ever but it was like three times more clicks than it needed to be somebody said the reason for this being read might be chroma key no because it is trans you would use transparent you're saving a PNG who cares no you have an alpha Channel there's no reason for it to be red and there's also no reason for it to be the worst blur has in the background instead and my favorite thing if you're doing multiple first off I appear to have just broken the page but if you're doing multiple there's no way for me to do a different one in order to switch images like if I pick the wrong image I have to refresh that's the only option the revolution I've introduced to the world with my Square image generator is by default the background will be white which is correct black is one click if you want it save is one click without scrolling and you can cancel if you want something else the only flaw as Chad has been very quick to point out is that we are missing red so the best we can be is two out of 10 oh real talk though if you're a fellow YouTuber this is going to be very the the number of YouTubers who have already hit me up saying holy how has nobody made this right before thank you so much yeah now you've seen the square image generator now you've seen the SVG to PNG tool none of these require the cloud I can turn Wi-Fi off of my computer and it will still work exactly the same there are things remaining I want here I want drag and drop be cool to have more op options and a bulk processor would be really nice too people were asking for like favicon acid generator stuff which could be really nice all fun things to add we'll get there I think that the native input supports drop which is cool so I can take this and drop it no it doesn't cuz it's a label I can fix that whatever we'll we'll fix those things but the thing I want you all to take home from this video isn't that my tools are great and everyone else's suck it's actually something a bit more I guess personal is the word but hopefully something more useful being a developer isn't that unique I know that because millions of y'all watch my videos there are so many developers around the world most of which can make most things pretty much everyone watching this video is capable not only of using and understanding the tool I built here y'all could have built this yourself and I'm not the one who built it because I'm some God Dev who figured it out first or some product Visionary that understands what people need better than anyone else I built this for a very simple reason I needed it everyone has unique needs based on the things that they do both inside of coding and outside of it and if I'm going to emphasize anything in this video it's that you have something in your life that is not optimal right now that a piece of software could make easier it might be software that you know how to write it might be software you don't know how to write what I'm telling you here is it doesn't matter do it these projects are what keep me going in the the amount of tools I use every day that are things like this that others created is unbelievable and some of the most successful things I have built have been for me wanting something so badly that I built it for my own use case and then it blew up almost immediately afterwards things like upload thing things like pick thing which is doing way better than I expected things like quickpi which I just released things like all the cool stuff I did at twitch all the things I did at the other companies I worked at ping. G itself but the biggest one is here this Channel this channel exists because I wanted to nerd out about crazy Tech stuff in a senior plus conversational way I made this channel because no one else had done it and if you make the things that you want to exist if you make them so good that you genuinely enjoy them you will almost certainly eventually find a lot of success with that in the absolute worst case you have a great thing to nerd out about in your next interview so yeah go build solutions to your problems and if you want to fix Quick Pick we're open for PRS the GitHub Links at the bottom go make something that you actually want to use until next time keep nering out




## TikTok made an IDE and it's actually good_ (free cursor killer__) - 20250123
there is yet another cursor in vs code competitor and this one is interesting because it's not by some VC funded startup trying to make a bunch of money or an open source group trying to clone the things they like this one's by Tik Tock yes it's a bite Dance Project it's named Trey it's currently free I don't know if they plan on charging or if it'll be banned in the Tik Tok ban or whatever else is going on but I figured we could all go on this journey together I just installed it I have yet to even set it up but I'm excited to experience Trey with you all and see if this is the future of how we do development with AI or if it's just a weird s project that's going to die it's only one way to figure out if it's any good but first a quick word from today's sponsor today's sponsor is browser based and I'll tell you about them in a second because I want to talk about their open source package first stage hand if you've used playright before you know how uh annoying it can be to actually get things set up just right to Target the right element and make sure stuff works and then one small thing changes on the page and it all falls apart with Stage hand you will no longer have the those problems because you can just tell it what page to go to tell it to act via prompt not via hit this specific element with this ID you just say you want in this case for it to click on the contributors and then you can extract data using again their AI instructions but you can also have the data that it responds with match a Zod schema how cool is that you can actually get what you're trying to out of a page now you don't have to pray and throw it through whatever model hoping it'll shape the data right it just does it and it's so much easier just for comparison's sake look at how much more code you have to write if you do this with playwright which is still a really good solution we're not pretending that playright is bad we're just saying how much more maintainable and clearer this way of doing things is if you want a place to actually run that chromium instance it's hard to beat browser based they're like a chromium playright driver that's just hosted for you so you can do everything you need to with a browser without actually having to host the browser yourself thank you to browser base for sponsoring check them out today at soy. l/ browser base let's look at the website first before I commit too hard try is an adaptable AI IDE that transforms how you work collaborating with you to run faster collaboration equals you and Trey Trey is your ideal development partner seamlessly balancing human and AI capabilities this Dynamic collaboration ensures each task is handled by the most suitable agent maximizing your productivity interesting that they will automatically pick the right agent for tasks it's kind of annoying swapping between them I've even made mistakes when I like was doing some gen earlier where I had this set to 01 cuz I was doing some annoyingly difficult stuff I keep this on Sonet most of the time I forgot to switch off and it's like wow this is taking so long to solve a basic problem and then remembered oh this is a basic problem I need to switch that button annoying they don't do that which is interesting chat to build a project faster in Builder mode Trey will automatically break down and execute tasks optimizing each step while letting you preview and control the process okay so it has an agentic flow upload images to clarify requirements that feels like it doesn't deserve a section in your homepage but it's cool they have it get better results with full context you can tell it what files matter everyone has this feature now but it is effectively essential I will say the UI actually looks pretty nice curious how it looks on my smaller screen only one way to find that out boost efficiency with smart completion cool everyone has that it's Love by devs get started for free I'm guessing they'll eventually charge if it does well but right now it seems to be entirely free let's set it up started dark English continue oh look at that they even have an import from cursor not install on the TR command I have to log in to access the AI features fun log in and open tray that was pretty smooth and here we are this does not appear to be vs code based oh wait no it is my extensions are in here I like my test for that let me open a random project something I don't care about them having how about Quick Pick that'll be a fun test oh yeah this is this is VSS code for sure I will say it looks nice it looks a lot better than the other clones like cursor the lack of like good splits between sections means it's hard to grab something there everything's a little too big I can command minus which helps a bit but nah it's it I'm not going to pretend VSS code is pretty this is actually pretty and is using the screen real estate a lot better than VSS code does and if I have multiple things open here like my next config some component here pusx it doesn't give you enough context on like which page TSX is which if I have multiple open oh yeah it does cool when you have two files of the same name it does the right thing there this is one of the better looking vs code clones I I take back what I said about it using the real estate wall though cuz it's by not putting these higher up you're now very deep in but if you have a big screen or you're a normal person not running at 720p it's actually probably pretty nice apparently this is what the jet brains UI looks like yeah I'm not really seeing the similarity here maybe maybe the the way the tab bar being like inset slightly works it's literally Fleet what's Fleet okay I take back what I said this is this is identical fine they they are copying jet brains just not their normal code editor I forgot about Fleet because I don't personally use or think much about jet brain stuff but it's a good UI they copied from a good place but that is actually hilarious I really like how the parts are separated in the overall look of this enough that I'm not like immediately annoyed like I am with a lot of these vs Forks this has actual PRS actually I like the file view a lot but none of that is what we're here for what we here for is the AI so let's give it a go one of the challenges I gave the AI for this project before was to add a feature where it would on the Square image generator it would pick something from the background like the most common color and make it Square using that so like this should not have a white background and I have white white and black as options here which is nice but be cool if you didn't have to pick and it could somehow take advantage of the context it has from the photo to figure out what color makes the most sense so let's see if Trey is smart enough via Claude they're only offering Sonet and 40 interesting I would have expected since this is by bite dance they would have supported some of the crazier work going on with the like Chinese open source models like deep seek in particular but it's just clad and 40 interesting also when you know how expensive CLA is you understand why it's weird they're offering this at all that is a that is expensive I want to give this some hard problems though we'll start with the builder which is in beta thankfully does it know what file we are in right now go smart enough to use the one I'm in right now when a user uploads picture we should analyze it to figure out what color is most common on the border and use that as the default color or the default background color we shall see how it does interesting it's multip steps I saw it stop and then start again so their system prompt asks how do we solve the problem and then it reprompt saying okay we have this let's do it I don't like that it's not showing us the code gen happening it's just doing it interesting you don't see the streamed in responses figuring it out but it does throw it here I actually I I'm really liking the UI of this that it puts the this here I feel like a lot of the UI and cursor is stuffed random places I should have given the the bias check earlier I'm sorry I am an investor in cursor so expect me to be a bit harsher on things and count for some bias I did not think I would like cursor and it has become my editor of choice I quite like it but I'm not going to sit here and defend its weird UI quirks that they are quite a lot of especially on the resolution I run this seems nice though you can see fill style background color detected color or background color I know it's giving me the option still couple type errors let's just YOLO it and see if it works upload same image detected color okay good sign so far let's give it something more challenging and if this code works properly what this should now do is make oh yeah cool it one-shotted it all the other AI tools failed at this task so it seems like it's a gentic flow of confirming what it wants to do before doing it is actually behaving well that's this is one of my like harder stress tests for these and it figured it out first try it did complex image parsing where it rendered the image in canvas it then collected all the edge pixels by going around the canvas width and height and adding all of those values to the array and then it uses them yeah Edge pixels. reduce and it keeps track of each color and how common it is most common color is the biggest it's actually decent code minus the type errors yes put of exclamation points or question marks and it would be right though I'm impressed I expected a lot worse I like legitimately didn't think this would go that well what are some more fun tests we can give it let's have it cloning UI let's make a new route for fun let's have it clone the T3 chat UI I'm going to not tell it the file them in and see if it figures that out I am creating a new page that is an AI chat bot not worry about backend use mock data I have attached an example of how it should look let's see if it knows where to put it and if it should use or if it knows to use tailwind and if ites advantage of the other things that this project has figured out that I should go in demo even though it didn't have that context manually tagged that is a very good sign I don't like that you can't see what is happening here and there's no way to see until it is done making UI that does that specifically doing syntax highlighting as tokens are flooding in is rough I'm in the middle of writing my own syntax highlighter for T3 chat because of how hard it is to do that so I sympathize with I'm choosing not to it failed very interesting I wonder if this was it not generating something to its own satisfaction or if the stream just failed I haven't paid anything and it's letting me use Sonet which is expensive like this one request costs 30 cents minimum like these are not cheap to run I've learned that the hard way very quickly with T3 chat so it's possible they're rate limiting the hell out of it I don't think they are but I am sorry for whoever has to pay the bill once this video goes live and everyone realizes oh you can get Claud Sonet for free if you use this one specific AI tool it's actually fascinating that they're giving this out for free right now because son is not cheap if they were doing it with deep seek I'd be I would be less surprised but the fact they're doing it like this is genuinely a little horrifying so yeah if you really want free Sonet here you go let's accept this see how it works new to use Tailwind it even made some svgs I'm very curious to see how those come out I have no idea how this is going to go this might be surprisingly good or really uncanny valley slash demo moment of TR what the it actually did pretty good huh not bad stop saying it's better than T3 chat you nerds we're cooked God damn it guys AI is replacing my job if if the UI was the hard part of T3 chat my job would have been replaced long ago there are so many annoying things like it's so funny to me when people say that T3 chat is just a chat GPT rapper because the things I'm spending my time on are so absurd but yeah that was impressive I'm genuinely surprised it could do that one shot that well a lot to think about none of that will work cuz I told it to mock everything but like I think the svgs being hallucinated but accurate is kind of insane I'm sure that they are grabbing it from something in the llms history that it knows is an SVG that fits for a search icon but it's kind of crazyy that it generated svgs that fit this well kind of crazy if you've ever had svgs generated from other tools even like VZ or uh stack Blitz bolt. new svgs are a big and like the link icon is right that's good I'm impressed I don't even know what to throw at it it was not the fastest thing for generating this but it did a not just a good job a phenomenal one this is actually in my opinion the first real competitor I've experienced for cursor where I could see myself actually using it I'm not going to move because I have a bunch of workflows bicked into cursor and I'm happy with it but it's kind of crazy that of all people bite dance and Tech to just dropped a random free IDE that is that good if you're hesitation using tools like this is that they're too expensive go enjoy this while it's free you might be surprised at how nice these workflows are I don't know if I'd be confident enough to put this on a production code base that I don't want B dance to have access to the source code for so like I won't open this on T3 chat cuz there are too many secrets in there that are not available for others to have for free but this is solid this isn't just okay this is the first vs code Fork that I've seen in a minute that feels genuinely different and actually really smooth I didn't have a single UI Quirk not a single thing where the UI did something stupid that I wouldn't expect it to it generated quality responses and it seems solid I'm curious if y'all have any push back on it like what am I missing here this seems just good they have command K they do as like the vs code thing where it sets up your hot keys to trigger another one yeah short keys aren't broken on wind surf yeah I I had so many problems with wind surf i i i unlisted the video people are pissed I don't care wind surf was a really really bad experience for me it just did not work at all how I would expect an IDE to this just kind of behaved I haven't tried per yet I've been meaning to but overall this actually seems solid I will be keeping an eye on Trey for sure I'm curious how yall feel though are you going to give this a shot and if you are is it just cuz it's free or because you're actually excited about what they're building I like seeing more people trying to improve the experience we have using AI with our Dev tools because once it clicks how useful these things are it's really hard to go back I love cursor but Trey seems like a really good option for those who are interested curious what you guys end up doing and how you feel about yet another AI based IDE until next time peace nerds




## Tools I Use Every Day (Life Hacks, Dev Tools & More) - My 2023 Stack - 20230304
everyone needs a toolbox they can rely on that's why I've spent decades adding and removing tools playing with new things when they appear and going out of my way to trim down my set of tools to the simplest most useful possible group of things if my toolbox wasn't good there's no way I could possibly run two YouTube channels a company and do all the dev work I like to do on the side this chaotic world that I've thrown myself into requires a lot of organization a lot of focus and a handful of really powerful tools gonna break this up into parts so make sure you stick to the end to hear about all the dev tools I rely on every day first we're going to go into General stuff the things that I think anyone could benefit from using first and foremost is everyone's favorite Excalibur if you watch this channel for any amount of time you've definitely seen my diagrams and Graphics all with that handwritten style I have a secret my penmanship sucks I can't whiteboard I can't draw and have things look the way they're supposed to it's just not a skill I developed I actually was almost held back in elementary school for how bad my penmanship was Excalibur gave me the freedom to express myself with Graphics and Design and because of that handwritten style I don't feel like I have to sit there and perfect every detail unlike to be frank every other graphic solution I've tried doesn't mean those tools aren't useful we'll get to some of them in a bit but when I just want to get an idea out of my head in a way that I can share it with others visually excalator is a great way to do it what about when I just want to put some text down in a file notion has been a lifesaver for me here both for running the channel and my business and honestly managing my life notion is proven essential as a way for me to dump my brain notion syntax is markdown you can even export markdown from notion which is super handy it's file management is simple and intuitive where every document can have sub-documents just by typing slash page I use one kanban within notion to manage the content going on the channel but when it comes to really breaking down our tasks and keeping track of things linear has been our go-to at ping linear is the subset of jira I didn't know I need it because God I cannot stand jira but notion is so simple and focused and just generally a great experience it's made me care about our task management again which is really nice there's so many simple details like the copy Branch name button and then when you push that Branch up and make a PR it'll automatically update the status of the issue those simple things might sound trivial but it really makes linear feel like it understands our needs as developers Building Product for users if you haven't tried it already I highly recommend it how do we actually talk to the team though honestly we haven't needed slack for a while we're all in on Discord we already have a Discord server to talk with our users at ping so we just made a couple custom channels in there that are private and just for us since our users channels are directly above the employee channels every employee is interacting with and sees the community around us every day it's proven to be a great way for each person on the team to better understand the users of the product and we see no reason to make a separate private Communication channel that is just us when we can have private channels and our public servers for my personal tasks I used to use notion but it's a little clunky and I like having a key to quickly type in a task so I'm using tick tick it's fine it does what I need it to not my favorite piece of software I'm not going to sit here and highly recommend it but I personally like to have a to-do list where this list needs everything done before I go to bed when I sneak over there to go to bed at night I pull open my laptop or my phone I look through that list make sure everything is done and if it's not it gets done and then I'm allowed to sleep this is essential to my workflow I have like five things on the list right now that I'm gonna go do after I film this video funny enough this video is one of them because why we're here right now seriously once you get to the point where it feels like there's not enough day to get all the things you need done you need a to-do list system that guarantees things get done and for me Tech Deck was the thing that worked whatever works for you sticky notes I don't care find something that works and stick with it and totally yourself sleep until your tasks are done once you slip once you're over it's done it's a wash speaking of getting things done getting email done sucks another one of the tools that I don't think everyone needs but if you've been on the fence and you can justify the price I do think it's worth it superhuman has been incredible for me managing my email I used to be crazy into Outlook I had tons of hotkeys and a setup that I really like before when I was into inbox the mobile app by Dropbox for email it was a fantastic experience with this the simple sliding left and right always been an inbox zero person it's important to me and superhumans the first tool I found in a while that really feels like it's trying to get me to inbox zero both on mobile and web in a way that understands the importance of some of my emails I was surprised it's worked well for me I tried it out on a whim and I've stuck to it so if you're unsure give it a shot you might be surprised like I was those are the things I will not be giving up but there's two tools I'm trying right now and we'll see how they survive throughout my 2023 those are KRON the Calendar app that was recently purchased by notion and raycast the replacement for spotlight for quickly running tasks on your Mac both have been pretty good for me so far it took me a while to Caitlin KRON I waited till they had a mobile app but as soon as they did I said fine I'll give it a shot trying it now it's been pretty solid so far wouldn't say it's necessary for my workflow like the other tools raycast has been really nice for doing quick math love the way that it handles inline saving of numbers and such but otherwise yeah basically just Spotlight for me enough about General stuff let's go into the Creator tools quick I promise this will be fast but I do think every single person should learn Photoshop if you use a computer you should know how Photoshop works the very Basics I was not expecting myself to ever go in the graphics Direction as a kid I learned Photoshop simply because it was another computer class I could take at my school and I loved taking every computer class I could and I fell in love specifically I fell in love with removing all the zits from my face but through that I spent a lot of time in Photoshop the a totally legally borrowed copy and I got good at it I started helping other people with photoshops both like fixing photos and making Graphics happen I got involved with the team at my school doing the newspaper working with InDesign and I slowly got pretty familiar with all of the Adobe products I hate them now and wouldn't ever use them and what I'm going to tell you to do instead is use Affinity photo Affinity has been phenomenal it feels like all my Adobe muscle memory works and I can get stuff done it was like 40 bucks for life super cheap really good every thumbnail on my channel was edited in Affinity photo it's just great software don't pay adobe's fees do learn adobe's patterns photoshop's the single tool I am the most thankful I learned it has shaped every piece of software I've touched since on the video side of things obviously we're using OBS it's the standard I have it open on my desktop right here in the tab bar running this recording I have a bunch of crazy workflows and tools I use around it one of the essential pieces is an open source tool called lossless cut lossless cut is an electron based ffmpeg wrapper that makes it really easy to drop in a file pick chunks you want to have saved and Export them I actually export my twitch markers as csvs so that I can drop it into the software and it will automatically chop my VOD up into lossless chunks based on when I set markers in the Stream super useful for sending video files to my editors especially since I'm often recording a source 4K file on my camera and I can apply the same cuts to that as well it has quickly become an essential part of our workflow huge shout out to Mikhail MiFi Miffy I'm not sure how you're supposed to pronounce that I appreciate you a ton he's deserves a shout out trust me for the editing of the videos on my channel I use final cut some of my editors do as well Mir uses resolve and honestly it seems like the industry's moving in the direction of resolve makes a lot of sense phenomenal software engineering wise without question it's the best technically speaking but Final Cut feels a little bit like magic the magnetic timeline makes it so easy to trim pieces drag things around and have my editor behave how I would expect when I move something over into a random spot it makes chops and changes and swaps and all the things I do for this talking head b-roll Laden chaos it makes the style of editing much easier is what I'm trying to say and I love it I've tried resolve I always deep in Adobe for a while so obviously I was pretty familiar with Premiere Final Cut was a very natural transition off and I've not looked back in all my attempts to learn resolve have hurt me greatly so yeah Final Cut for life again if you want to be on the Final Cut bandwagon though no hard feelings and now we get to the thing y'all are here for the developer tools first we should go into my editor we've already already gone into my editor and done terrible things I'll make sure there's a link in the description to the video where y'all destroyed my editor uh show the thumbnail too please anyways my editor's pretty simple I just use vs code I let prettier and eslint do their thing I don't really have any interesting extensions on it yeah my vs code's boring and I like it that way anyone else is boring my terminal I use the stock terminal in Mac OS I was deep on iterm I'm sure a lot of us were but man the stock terminal feels faster it just does I've swapped around a bunch and found the stock terminal to be the most pleasant experience and it's one less thing to install inside of the terminal I don't use things fully stock on Mac OS Z shell is the default which is really nice I still like the things oh my Z shell installs like the git autocomplete and such I've heard there's better ways that are more performant but I don't care I also use oh my teamucks on long side obviously tmux because window Management in a terminal feels essential to me at this point I got into terminals before I ever wrote a line of code I was deep in funny enough gnu screen before tmux ever existed and expect to be about ability to press those hot Keys split windows and manage things in the background it's just become second nature to me I don't think anyone really needs it and honestly just making tabs in your terminal is fine but if you are one of the people that likes to control everything like the vimway you all know I gave up on them a while ago I cannot stop using tmux it is essential to my workflow I don't use the terminal in vs code at all a lot of people use that seems fine not for me one more note on my CLI setup there I love the GitHub CLI I don't know why more people don't use it but the ability to create a PR in just like seven characters and have it create the pull request and push in sync original for you in one command very nice super handy highly recommend for y'all node and JavaScript users you might have heard of NVM the node version manager for managing the node version that you're running on your machine found it to be a little unreliable fnm by schnizz schles galstar whatever you want me to call you I'm sorry you have too many names great Dev working at versel made a rust based NVM replacement called fnm that I have grown to love it's the thing I use for managing note on all my machines now and it has been way simpler overall and it's really fast give it a shot if you haven't if you're working on systems and development locally probably try things like Postman before when it comes to just running web Hooks and accessing data on your endpoints like faking a stripe web hook faking a segment web hook faking a Discord web hook because none of the tools really seem to solve that problem well of simulating events my co-founder Mark complained a lot about it and we decided to build a tool to make it easier and now we use webhook thing almost every day web hook thing uh webbookthing.com we'll throw a link up there is a simple tool that lets you write some Json blobs throw them in a folder in your directory you can run npx Web book thing click the events you want to run and it will hit whatever endpoint you specify super simple for running web hooks against your local environments makes testing things for this modern serverless world way easier super excited to have that out let me know what you think about that in the comments in a similar vein I really like Prisma Studio even when I'm not using Prisma sometimes I'll quickly generate a schema just so I can use Studio to navigate in the SQL it's a really nice graphical like table for your SQL if you're already using Prisma it's as simple as typing npx Prisma studio in your terminal and it will spin up a local environment that gives you full access to your database super super handy and one last shout out to create T3 app create T3 app was originally a community project created by Nexel based on a lot of the recommendations and tooling that I talked about on stream he codified all of that into a starter pack that lets you select a bunch of the tools we talk about here including Prisma nextdoth trpc and tailwind and depending on what you do and don't select it'll create the best simplest possible boilerplate with all of those pieces connected correctly I don't say correctly in the we have opinions way I mean we worked with the maintainers of all of those Frameworks to make sure all the pieces play nice together as well as possible if you're using any combination of those tools you should at the very least run create T3 app to make sure your implementation is aligned with that implementation and if it isn't that you have good reasons for why it isn't because create D3 app is the recommended way to use all of those Technologies together or honestly any subset of them that's all we have if you haven't already watched the video on my 2023 stack infra in my 2023 stack tech make sure you check those out this is just the tooling video those are the ones that talk more in depth about the rest of my stack thank you as always this was a fun one these nerds




## Tools That You Grow Out Of - 20230618
I think a lot about what makes companies and products successful if you all know anything about me you've probably seen me betting on all sorts of new things old things and things in between something I think about a lot is when and how does a technology get adopted into a developer stack but also very importantly when does the technology leave a developer stack can we use these ideas to reflect on different Technologies and when they do and don't make sense and more importantly how successful they will find themselves when they enter the market this video is mostly focused on the business side of things some amount but I think it's a really useful mindset when you look at different Technologies and things that you can adopt at your job or on your side projects so when I say the graduation curve what am I referring to the specific framing I have for this concept is that over time when you start a project you don't necessarily know how successful it's going to be and how much traffic it's going to get how it's going to work in production even if you're at a big company doing a big thing we're going to pretend that that complexity grows linearly so we have here complexity and time given that a Project's complexity goes up linearly over time I'm not going to put time frames or anything here but at a certain point your traffic is massive your databases are collapsing everything's going to hell your needs when you hit a certain threshold of complexity tend to be very different from your needs before that so like up here might be custom like distributed service hell but like all the way on the bottom would be Google Sheets is a fine DB people often think that like these are good for early or late projects but different projects have very different complexity curves over time like some projects might go for a long time they might have a spike in complexity maintained here they might have a curve that starts way lower they might even have a thing that stays really not complex for a while then they add one feature that instantly blows them up it increases the complexity a ton there's a lot of different paths that your complexity can take for your projects for your companies and for the things that you build but it's important to understand what services and what Solutions make sense at what levels of complexity one way we could think about this is I could put like 15 of these lines where it's like different sizes of ec2 container we could say like this is a 500 month RDS box and then this is like a 10 a month RDS box this is one way we could view this but there's a lot of granularity going up and down and you're gonna have to worry about scaling and switching to your database tiers correctly based on your traffic and if you have one day where your traffic spikes a bunch so this is a much more realistic traffic pattern for a lot of services and as you see here the tier of box on AWS that makes sense for you is very different at different points with a lot of Shifting back and forth and if you were to provision your RDS box based on the amount of traffic you had in this one point and then you immediately drop back to like below what the 10 a month box can do you're eating a lot of cost either by paying for that service or you're eating a lot of time dealing with moving things around constantly in the stress of making the wrong choice at a certain time scaling these things things is obnoxious and worrying about this stuff sucks ideally the services would handle that for you without being too complex to adopt initially and that's the other thing to consider here is when you come from the top down you can scale better and you have less reason to leave but it's also usually harder to adopt and the really interesting thing about a company like Planet scale is they focused on this top level first so if your companies the like mostly linear I guess slightly exponential curve up planet scale was built on top of a test in order to make the scale of services like YouTube GitHub and slack accessible to the greater public most people couldn't set up a database to scale as well as theirs could especially in the serverless era where things like connections started to matter much more than they used to that transition normally sucks to do yourself and I've had to migrate many a database as my complexity goes up I'm going to compare two different services that come at this from very different angles the first is when we talk about a lot on the channel they do sponsor us but that does nothing to do with why I'm talking about it here I just think it's interesting interesting concept call this the planet scale Zone the planet scale zone is my experience and from what I've seen from many others is you don't really outgrow Planet scale like your complexity can't really get to a point or at the very least your database's throughput doesn't really get to a point where Planet scale can't scale to it there is theoretically a point way up here where fine just use Dynamo it's like Dynamo is incredible but the problem is Dynamo is much harder to adopt it requires you to know exactly what the structure of your data is before you even start working on that database Planet scale is a much more traditional relational DB where you can do all sorts of chaotic which I would argue is necessary as you grow and find success and then there's companies that are on the other side of this and here is where I'm gonna put our friends over at replet this isn't because replit is bad it's because replit can't scale the goal of replit is to help new developers write their first lines of code and find some level of success but as soon as you're starting to succeed it's going to fall over hell we have a a bot that keeps track of when I change my titles and thumbnails for my YouTube channel and that Bots entirely fallen over on like a 10 a month replic tier because it just can't keep up with a 15 minute cron which is kind of insane the goal of their service isn't to make you a service that scales infinitely it's to help you write code often for the first time and have that reward of succeeding building code their theory is over time they can make their service more complex and add the things necessary so that you don't leave replit but the reason I'm making this video and the argument I want to make is that going up from low complexity as a service is much harder than going down from high complexity especially if you put in the effort to understand the people who are in this lower area and that's what I think Planet scale is doing exceptionally well is they started at the top they built something that you would never have to leave and if you see here you leave replit pretty early and if we take these same boxes and apply them to what we had over here you'll see that like we don't get into the planet scale zone for a bit but when we do we're fine but we dip in and out of the red plate one and you get out of it pretty early and theoretically you can go back in but you're limiting the quality of what you do based on the success of their goals and obviously over time replitz potential complexity is going to go up but you're basically betting that your complexity Rises slower than theirs does so that it can stay within their bounds and also that they find success at all with Planet scale you're not really betting in that same sense the worst case is you have to leave and set up your own Vitesse somewhere else and I'm sure there'll be other services you can always MySQL dump out of Planet scale and go use that MySQL somewhere else but the thing that makes Planet scale special is that you don't have to leave they will scale pretty disgustingly far which is why over the last few years the goal of Planet scale isn't necessarily to build a more scalable service they obviously continue working on that they're doing incredible stuff with the test they are the owners of the test the open source project now but man their focus has been doing this and I think they have found in insane success with this the reason Planet scale made this incredible free my sequel for developers course which like it's actually insane how good this is for a free thing they had Aaron Francis who's a professional educator who's done software courses for a while now normally paid courses they hired him to work on this for a year so they could give it out for free because if they make my sequel more accessible they are lowering this bar more and more which is incredible for them and their goals because the closer they can get to the ground the more soon someone will adopt them and they never have to leave and that's why Planet scale is making the bets they're making and that's why Planet scale is making the cool free stuff they're making too is they don't want you to have a reason to leave to be realistic complexity goes much deeper than this like one-dimensional thing I'm showing versel for example will scale basically infinitely because it's just running on Lambda and Edge functions so if you architect whatever it connects to right and your SQL database that is backing your versel is set up correctly that will scale but a lot of the Enterprise features and things a bigger team would expect are still in progress they're making a ton of progress and the stuff I've seen on the Enterprise side is increasingly impressive especially for cell spaces but for cells almost doing the opposite right now where if this complexity was number of requests they're good you're golden but if this complexity was functionality for an Enterprise it starts a little more like it says Planet scale I know just convert cell Zone this is the first cell Zone this is complexity of like team needs for Enterprise it's like the weird like saml stuff the like vpcs vpns the things that Enterprise wants for for good reason for the security compliance all that stuff they're working hard to move this up so that they can catch you and all of that stuff as well but that's what makes for sale special is I think they did a great job of starting a relatively wide Zone especially if your complexity isn't a team needs stuff it's traffic then versel can scale to insane amounts of traffic and do entirely zero amounts of traffic and the pricing is super reasonable and they're scaling up with us I would love to outpace for sale pulse growth but realistically their growth is nuts and I think they're doing a fantastic job of keeping their curves here reasonable and not causing users to leave the platform or limit the success of their own Services based on it I think that's another important detail of the replit zone is realistically you're not just going to move out of it you're going to hurt your services success some amount because you're going to Plateau where red blood ends until you decide okay too much we're out and you break out of it but when you're in something like this you end up limiting the success you can find and the most successful people tend to be the ones who graduate from this stuff quickly and the harsh reality about replit right now is that if you are a rufflet user replet succeeded at what they're built to do if you leave repl in the next three months the replet's done such a good job of educating users that I set them up to graduate from their platform really quickly and really aggressively so if replit succeeds and what they're doing right now you end up leaving replit if Purcell succeeds what they're doing right now you end up wishing you could use it at your workplace but you can't because they're missing some specific feature your company needs but you're bugging your boss about it every day and as soon as that blog post comes out that they added the VPN or firewall that your company needs you can go back to your boss say hey the things added can we do it now and then from the top down versell gets introduced to your company stack and that's what I'm starting to see more and more of is the company's realizing we need to solve the graduation problem we need to make sure that when your service hits a certain level of traffic and that your team's needs hit a certain level of complexity that our service is ready for that and if you start with that level of complexity handled and you move down you find success a little bit quicker but you have to also invest in making things a lot more complex this is why we didn't do this with upload thing upload things going to look a lot like this because if you break out of the two gigs of storage that we offer right now you're like we don't you just can't upload anymore we don't have a paid tier at all once we have a paid tier this will bump some amount but we're also missing a lot of features Enterprises expect like private files and signing directly or hosting them in your own bucket or off-prem support all these types of things we don't support that keep us from being higher up it means we're going to have a tough time continuing to grow especially as our biggest customers start to outgrow us that's an important balance we're gonna have to work hard to strike but if we succeed developers will love us so much that even if they're forced to leave the moment that we are ready for them again I think they'll come back and that's the goal of how we're building an upload thing but it doesn't mean I don't look at Planet scale with a little bit of envy that the best thing they can do right now is make a course because they already handled the other half of that curve I think that's all I have to say on this one another important thing to consider with this stuff is cost and pricing Planet skills costs are hilariously cheap yeah 600 bucks a month for a team but if you look at the actual cost of traffic where 30 bucks a month a hundred billion row reads a month plus one dollar per additional billion that is nuts storage people seem to think is expensive do you know how little data you store in a database the reason storage costs money is because if you're encoding pngs inside of your mySQL database you don't understand pngs or MySQL like the biggest database we have at ping which is like the core database for all of ping is like 80 Megs it's nothing it might even be less than that actually in the free tiers five gigs there is not a data database app ping that doesn't fit in the free tier to be very clear like very clear it is hilarious how cheap a billion row reads a month for free and 10 million rights that's insane that's a lot of traffic so they've done a great job of balancing these things out they make it easy to adopt by making it free making these courses making these resources making npm libraries you can install to give you more reason to try them out and then you fall in love and then you go to your company and say hey can we use this here too 600 bucks a month is a lot cheaper than hiring a DV expert and that's the other harsh reality is if I didn't have the option to do this either Mark or I would have to become database experts or we'd have to hire one and this is so much cheaper than the time that we waste otherwise it's so worth it it's so worth it anyways this rant was a little different than usual I normally don't talk this in depth about the business side of these decision processes but I have thought about the graduation curve a lot and I wanted to detail it and put it in a video so I can reference this in the future if there's any confusion or things I talked about here you want to hear more about tell me in the comments I'd love to know more if you want to hear a more in-depth rant about how pricing for these Services work and how I think they're often misunderstood specifically how versel and Planet scale are usually cheaper than something like AWS got a video pin there for that thank you guys as always peace




## Two Weeks Of DDOS Attacks - Did We Survive_ - 20230413
so we got ddosed have a feeling that the video about pricing of services might have frustrated some people and they wanted to see how far they could push the services I'm building probably cost them more than it cost me but regardless I want to talk about how they racked up over a terabyte of traffic in under 20 minutes and what it looks like to mitigate that in a serverless first act like the one that we talk about here it took over two weeks of them attacking our services at ping as well as create T3 app T3 OSS stuff and many other open source projects in the space but uh ultimately I'll admit they did cause a blip for the first time today there was a few minutes where people were being disconnected because our lambda's got rate limited by the hundreds upon hundreds of thousands of requests per minute because that's what it takes to take down our services so what did this look like let's break it down so when we go to our versel usage you'll notice something a little suspicious here specifically that this one random blob has done 1.43 terabytes of traffic I have a feeling there wasn't 1.43 terabytes of actual download going on on our service thankfully the hundreds of IP addresses that were cycled through to do this have all been tracked and blocked by versel and I am sure that further IP addresses as they're found will be blocked going forward last I checked there was over 600 so they have burned over 600 static IP addresses to try and do this which is kind of funny on top of that when they also fun thing that we did uh we redeployed to kill this specific URL just to make it a little harder for them to spam so they started hitting everything else that was slightly more generic like next image and slash I they've been posting to slash I non-stop for a bit now in just today 4.8 million invocations pretty absurd and here uh over three quarters of them errored which is annoying thankfully our stuff errors pretty quick so even our like usage here isn't outside of the the basic Pro tier on versal so like it's not going to cost us any money but as we scroll down here the throttles this is what sucked we can also see here as we scroll down a bit further that uh they hit our Edge Services a lot not an absurd amount in fact if we go to the T3 OSS usage you'll see many more Edge invocations because they originally started trying to Target The Edge that we had for roundest mon here and also fast around they went out pretty hard but since both of those projects are using the rate limiting package that upstaff created none of these were able to really damage our traffic they spiked our average like CPU times a little bit during one of the attacks but generally has it been a big deal you can see the invocations though uh they are trying really hard to uh abuse our services and when they do that they just get rate limited especially on chirp which they seem to be spamming a lot in the edge middleware is keeping that from being successful so uh yeah sharp the application I built for the tutorial a few weeks ago has held up to this absolute Insanity which is pretty crazy to see the reason I usually use the rate limiter by upstash isn't to prevent requests fetching data it's very specifically to prevent posting to my database to spam applications I've built stuff like that it's not to limit the amount of traffic to my services is to limit the amount of spam being posted and stored within my services and it has been incredibly effective for that here I am now considering using the same Tech to enforce request blocking on other services to limit the amount of bandwidth and time spent doing invocations theoretically you could throw an edge or the upstash rate limiter on your Edge middleware for all requests and have your own mini like cloudflare style or DDOS protection but I hadn't needed it yet but that's that's what the next move would be at this point if we cared enough to do anything but generally we've held up from the traffic great T3 OSS is a free sponsored open source project so we don't have to worry about any billing there the emails are actually kind of cute because they tell us when we're over limits but they say at the bottom by the way you're sponsored so you don't have to worry about this but if it keeps going we might have to chat which has been really nice of them and as for the stuff on PING this wouldn't have been the funnest bill that's for sure but thankfully we've been working with Purcell they're going to cover any overages that we've had due to the DDOS and we're working with them to get as many of these people banned as possible generally there isn't much you can do with this level of focus attack it seems like they have a botnet at this point there's no way they could be attacking with this many different IP addresses otherwise so yeah that's the state of things it's not going to cost me too much thankfully and yeah huge shout out to both versel and upstash for handling this so well it's been incredible to see the response from the core teams at those companies and how hard they've worked to make it so our services don't go down and despite the literal terabytes per sec or per minute of traffic that they've been spamming our services with we were able to hold up strong and we only had a small blip today after two weeks of spam and that blip was exclusively because of the Lambda concurrent invocation limit so if we can move those things over to Edge and rate limit them on edge that one last problem that caused our outage today will go away you can bet your but we're gonna fix that tonight so yeah as annoying as it can be to get ddosed this is the benefit of going all in on serverless Technologies like what we've built it is effectively impossible to take down our services outside of weird small edge cases like that and after a little bit of fixing we'll be strong up and running it might cost a bit but it will cost the people attacking us way more so that's where things are at I'm pretty pumped in going forward I will definitely be staying on serverless because holy hell if we had actual servers that were running during this we'd be dead we'd be out on the street entirely broke this is not sustainable if you're running service so yeah I have a video here about the pricing of these servers if you want to learn more about that because there's a reason I'm using them and it's the price is not a reason to not so check that out if you haven't




## TypeScript Just Got SO MUCH BETTER - 20230418
I get a lot of DMS from fans but the one I got yesterday was truly special UAV hit me up with a project he was working on pretty TS errors and man did I fall in love with it fast after tweeting about it it's clear I'm not the only one who's hyped about this I wanted to do a quick video showing off my new favorite vs code plugin it's already made my life so much better and I hope it helps you all out as well so here's the plugin it's on GitHub I'll post a link in the description this is not the same as the TS error translator that met pocock created before in fact you can even see in here there's a link to it whenever you have an issue I will be clear though I find this plugin significantly more useful because I'm already used to reading the errors that benefit of the plugin isn't it makes it easier to understand the typescript error that you may not have understood before it's that it's a new syntax to prettify in those dense hard to read errors in a much more readable syntax we have a basic type here for a user object that has a couple nested Fields within it as well as a get user function that would be used to fetch one of these user objects we also have an implementation of this function however as you see here it is failing if we only look at this error it's a lot of parsing you have to do I'm used to looking for a tab so I look for the tab break and here property friends is missing in this big old blob here but it's required in type user okay that's a lot going on a lot of characters to parse through just to figure out that this field is missing and if I scroll down you can see this much more readable error and this is what the plugin gives you suddenly name String posts title string comment body string all shows correctly this might be useful here but now let's imagine that this type doesn't exist in this file okay we've exported all the types we have moved this over well we see we're still getting an error friends is missing let's quickly add friends now that we've added that we're still getting an error though what's going on let's use the plugin some more oh is subscribe to Theo that's strange I guess we have to add that property is subscribed still erroring what's up oh hey subscribe to Theo is not assignable to true huh maybe if you were subscribed we would have been able to finish this faster but since y'all haven't subscribed the whole video has to be held up now for everybody so come on subscriptions are free hit that button so we can get back to showing you the cool stuff and there we go look at that we have the get user function we're not getting any errors anymore since we're only using a type import here I can do import type get user and yeah suddenly things got much easier to debug even if we have a nested field in here like body we hover over see the error yes it's hugely nested but this view makes it so much easier to see type post stock comments are incompatible between these types Tab and again body string is not assignable to text string property text is missing in type body string but required in type text string so much easier to understand these deeply nested errors now if you have if you've never seen a blob like this in your type errors I'm a little bit jealous but now they're readable inside of vs code this is hype it even works inside of jsx TSX JS Dock Astro and Vue and a bunch of other typescript syntax languages that have different file extensions so you're good to go pretty much no matter what you're using as long as it's typescript based goddamn this plugin is super cool I'm so hyped for you of it had 200 Stars when he linked it to me we broke over 1500 just from the tweets so let's see how many stars we can get this project because it deserves way more I honestly think pretty much every typescript user in vs code should at least try this extension and see if it benefits them as much as it's helped me thank you y'all for hitting me up with such a cool project it's an honor to be the one to share this with the Greater typescript Community you're the one who did all the hard work though so seriously y'all please reward him with a star and a share if you want to know more about how to keep typescript from blocking you and move fast as a team building typescript video about all that there check it out if you haven't already thank you guys as always peace nerds




## TypeScript Slows You Down - Here’s Why - 20230217
I love typescript it lets me move faster than I've ever been able to move as a developer sadly that's not the experience I see others having I know a lot of developers who are using typescript in ways that slows them down rather than speeds them up I don't think that should ever be the case and I'm tired of people letting typescript block them some way subtle some ways aggressive always bad make sure you watch to the end because there's some tricks there that even I didn't know about until recently in my career and I wish I knew them a lot earlier what do I mean by typescript blocking generally what I'm referring to when I say typescript is blocking somebody is there is code that could or should work that doesn't because of typescript that means that there's a compiler error preventing the code from coming out it means CI is blocking them from seeing the result it can mean a lot of different things if you have code that you think should work and you want to see if it does or not and you can't because of typescript that is a failure the first mistake I want to talk about is using TSC TSC is great for validating your typescript to make sure your types are correct sadly it is not good for compiling typescript if you want to take a pile of typescript and run it in your browser TSC is one of the worst ways to do that not because TSC is bad just because it is slow the typescript compiler's goal is to make sure your typescript is correct you don't need to know that all the time you sometimes just need to have the JavaScript on the other side the reason we see big tools like Veet next and remix moving away from doing this in TSC and webpack and towards doing this in new tools like es build and swc is because of the speed difference when you use a native language to convert typescript to JavaScript it's going to go way faster we're talking tens of seconds down to milliseconds and every tool is moving in that direction the other thing I see people doing with TSC that scares me is blocking the browser's output on it having errors is great knowing where your type errors are is awesome but those appear in your editor almost always and if they don't you should fix that and even then you can run TSC in the background and have typescript showing you what's wrong without blocking the output to your browser more often than not when I have a type error that I don't immediately we fix that's because it's in my way and I just want to figure out what works if I'm not starting with types I'm ending with them types are not the middle of my experience I either have good type definitions when I start on a feature or I write the feature and then I add the type defs once I figure out what is and isn't working obviously function definition stuff fine but when I'm fetching from an API I'm not going to write the type before I test the thing this one was inspired by a rant from Zach on Twitter I will put put the screenshot in here so I can show that like uh both matte pocket and I ratioed him the biggest typescript Advocates don't get type errors in their browser they get them in their editor all those typescript lunatics don't write typesafe code all the time a lot of our code has red squigglies until it's working and then we go deal with it after and I want to emphasize that point we write code with type errors and then we fix them after typescript is not the process of writing a whole bunch of type definitions and the amount of typescript code bases I see that are like hundreds of type.ts files all over the place for like every component it's a mess types should be as close to the data they represent as possible if you have an API call and that API call has data that has a type you shouldn't put that type in some API types folder and then import it in the API call you should put in the API call fetch whatever as the type just put the type there the closer you have a type definition to the thing that it's typing the easier it is to make changes and if your type definitions are all over the place and now you're scared to do a refactor because all the import paths are going to be broken or this thing's being used in 17 places typescript is blocking you from making changes that could be making your code base better that could be making features for your users better and you're letting typescript block you not because typescript is blocking you but because your type system's complexity is blocking you so don't let the complexity creep up when you could just put the type next to the thing that is using it you'll be amazed how much simpler this one makes things and now for my final tip this is the big one don't block on typescript in your builds I can't believe this is what I have to bring up but like for whatever reason when people Deploy on versel or they do a build in their CI they always like to run typescript first don't have a separate CI step that checks your type definitions the same way you check linting typescript is closer to a linter than it is a language take advantage of it use it like that I turn off type checking in all of my next JS builds in all of my Veet builds and in everything I had to plan for sale block merging I'm not saying deploy code to users that has Type errors a preview build doesn't have to be typesafe the amount of just CPU cost you can save by not blocking every single deployment on typescript is hilarious even massive code bases can have build times under two minutes if they don't type check when they do the builds the process of running your app on your servers in the process of type checking your app to see if it's correct or not should be separate and you should Block Main merges but you shouldn't block preview builds and you shouldn't block testing code on types I see so many build chains where one little type error results in 12x is appearing in your CI and you don't get to do anything with it screw that run the code who cares here's I Theo The well-regarded typescript Advocate telling you to ship code that isn't typesafe until you're ready to merge it is fine to do that and I wish someone told me this earlier because I had a lot of CI that was a lot slower than it needed to be and that's it let me know if this was helpful I saw a lot of bad takes I wanted to talk about them I have a few more videos about using typescript and JavaScript wrong the one right here is really good so check that out if you haven't yet appreciate you all as always he starts




## TypeScript just changed forever - 20250312
today's a massive day in the world of web development the title is not clickbait at all it's so real that I woke up at 7:00 a.m. today just to make this happen and if you know my sleep schedule you know how absurd that is today Microsoft announced something I never thought I would see a native Port of the typescript type Checker and to be clear this isn't just the compiler it's not just the part that converts your typescript to JS we've seen that done in other languages before this is the type Checker the thing that makes sure each type in your code base is accurate and correct that has historically been nearly impossible to do in other languages I went as far as to say it is impossible I've been proven wrong this is an incredible project I'm lucky enough the typescript team reached out to me early to take a look and I am so excited to share all the things I've learned about this project typescript go is a massive change for the entire typescript ecosystem and you definitely want to know everything you can about this if you're curious about how much faster it is it's around 10x faster and if you're curious why they didn't use rust you're going to have to wait till after the sponsor I think it's fair to say that react made it way way easier to build apps well half of them at least you know the front end half it doesn't help a whole lot with the API side we've tried to solve it with stuff like you know graphql but let's be real that hasn't helped a whole lot that level of abstraction does not make your code better it actually makes it a lot worse we've also seen people try to make these fancy uis where you can check boxes to generate an API that's even worse let's let's take ourselves seriously for a second we want to make things easier we need to really rethink what the back end looks like and that's what today's sponsor convex is here to do they call call themselves The Missing half of your react app and honestly I agree it's the first backend solution I felt really understands react and makes it easier to make reactive applications even something like a to-do list can actually be a lot easier I know it seems like the simplest thing ever go add the backend to it and make sure it handles when something's checked in one place and not in another with proper updates it's not as easy as it might seem unless you're using convex then it's literally just one line of code here to set this to true or false and this set complete function that you define in your convex folder is actual code in your code base that you can import on the client that does what you expect it to do fully type safe back to front with Live Sync by the way do you know how hard it is to get live syncing for stuff like this working not fun don't deal with it if you don't have to literally just count to-dos is usequery api. too. list looks just like trpc but the whole back end is already built normally you'd have to worry about lockin but not with convex it's fully open source and they just put out a bunch of guides to selfhosted too if you're tired of figure out all the pieces of your backend from off to file hosting to databases to server functions to websockets to live updates convex is the easiest cheapest fastest way to get going and not have to worry about that if you want to build a great UI for your users stop worrying about all that stuff try out convex and you'll be moving faster than ever check them out today at so. l/c convex I love that Anders is the one who wrote this he also did a cute YouTube video there will be little clips and moments from this shared throughout but when you're done watching this I'd highly recommend watching and's video it's really good the core value proposition of typescript is an excellent developer experience as your codebase grows so does the value of TS itself but in many cases typescript has not been able to scale up to the very largest code bases I I read an early copy of this blog post and the formatting is so much better it gave a bit of feedback and it's cool that see it all integrated the thing we actually care about here though is this guy testing on the vs code code base they saw a performance change from 77 seconds for a compilation down to 7.5 seconds on a codas like playright it went from 11 seconds down to 1. 1 second I also love the trpc shout out here that the trpc client is 9.1 X faster if you've used big code bases with trpc you know how much a game changer this is going to be I'm so excited they do call out that this isn't feature complete but that doesn't mean you can't run it on real code right now they haven't distributed a binary but I already set up go so I could compile it locally and show you just how powerful it is this doesn't just affect your build and type check times either this helps your editor performance a ton your IDE actually uses TSC when you're doing all the intell ense stuff when you hover over something to see what type it is that is using TSC under the hood in order to know what your types are it's also the reason you can edit your code without having to save and still see the types that have changed and what might be right or wrong in your code that is not an easy thing to do much less run performant they've already gotten this working in vs code and there's one other really nice detail here where they are moving to a traditional LSP LSP is language server protocol it's the concept that VSS code built in order to make it easier to integrate other programming languages with a protocol to track what those languages are giving for feedback to the editor typescript was invented before the LSP was so typescripts kind of built into VSS code now they're going to treat typescript more traditionally the way every other language is no more special treatment the LSP is the standard way to do things and it also means all the benefits to this rework are going to be seen in other editors as well so you neoven people you should be pretty hyped the first test I tried to run was the typescript code base calling uh TSC with the Diagnostics call so we can see what it thinks the reported time is and we can run it ourselves as well right after as we see here it ran in about 60 seconds of like user facing time 40 seconds proper total wall clock time if we compare this to the new stuff though we get an error but despite getting the error we actually blast through this in 1.56 seconds of user time so that was instant for me this felt like 60 seconds this felt like two it's pretty nuts sadly I have not been able to get playright compiling without a bunch of type errors when we run it through the official TSC it takes about 4 seconds the new version takes .5 seconds that's insane this one has a few more type errors but not a lot more when you consider that it's a raw Port it found 213 instead of 190 that's nuts it's actually really close is it sad that I can't Repro the exact test they showed there yeah but the fact that I can run it at all is nuts in and of itself and these numbers have panned out from everything I've seen so far it does pretty consistently hit a 10x performance WI in order to get performance differences like this there must be some crazy stuff going on on the rewrite right like they must have entirely Rewritten and rethought all the logic no it's actually a big part of why they chose go if we look at the Checker code here and by the way Checker is the main typescript file that defines everything for the typescript Checker which obviously is written in typescript this is a 50,000 plus line of code file I'm just going to pick this particular function because I think it's a good example get type of symbol it's a very commonly called function that's used to determine with a given symbol in the what should that be this function looks like this relatively simple and readable let's compare it to the same function in go huh you might notice something here these are basically identical the typescript team went out of their way to find the language that would allow them the best performance on Native platforms with concurrency and parallelism without having to meaningfully change the way the language is written most of the code for this initial verse was processed and transformed overa a script they wrote a script to Port the typescript code over to go obviously it was far from perfect it got the syntax right so it would compile but it didn't get the behaviors quite right so they've had to massage it a ton since they've done it though but as a result here it's relatively easy for a Dev who's been working on the typescript code base for a while to come over and make these changes not to say that any random one of us even I could do this like no the work on the typescript compiler in the typescript version is insanely difficult and the things they did to make that perform and to their knowledge of the JavaScript VM and all the hacks they made to make that work are unbelievable but they did it and the performance they got out of the typescript version in and of itself was pretty nuts but a raw Port over with no changes made to optimize performance has already seen a massive win and I have to point this out if you go to that Checker TS file on GitHub it won't render it cuz the file is too big it's 3 megabytes of just one typescript file that's why I had it in my editor it's time to talk about the question everyone is asking everywhere why not rust I'm going to quote myself first and foremost here go is probably the right language for most JavaScript build and Dev tooling I said this back in February of last year over a year ago aged pretty well if I say so myself why though I'll be honest I've tempted to make this its own whole video so I'm going to give you the overview here and if you guys want more info on this we'll break it down more in depth later first main point is obviously simpler syntax that's more like JS we saw that with the example I just gave another probably much more important piece is more flexible structures and type system one of the reasons that typescript was really hard to write in a language that wasn't js-based is because JS itself is so flexible you can just kind of add properties to anything at any point if you have an object you can just add another key and it will handle it because of that the type checking step has to have similar flexibility so if your tooling is prepared for that good luck have fun but there's another really big piece concurrency parallelism JavaScript is a single-threaded language people like to point at that as the reason typescript and JavaScript are so slow they actually tend to be fast for a lot of application code though the magic of V8 which is the main JavaScript runtime is that that thread can perform incredibly well due to the event Loop when something is blocked on iO or other background processes be it you're waiting for a database call or you're waiting for for some file to load you can do other things in the process so the user can type and get a response immediately while you're waiting for other things in the background but it cannot do multiple things at once this is fine for stuff like web servers because a web server is mostly waiting for random things to happen and it can process requests and responses very quick that's why node's actually a pretty good backend language what it is not good at is workloads that benefit greatly from multi-threading like you know compiling and don't take my word for it this is Andrew halberg lead architect of the typescript project you know the JavaScript runtime platform is really optimized for UI and browser usage and not so much for compute intensive workloads like compilers and system level tools and we've likely reached the limit of what we can squeeze out of uh out of JavaScript as much as I like to crap on go and believe me I am not a fan of goang I hated writing it so much that I accidentally became a front inev so I could avoid it at twitch it is really good for this because it has parallelism built in as like a language primitive any function can defer at any point it's very easy to split things up and share memory across them you can do web workers in JavaScript but those workers can't share memory they have to pass things over an event bus as Json and the serializing and deserializing of that Json makes the performance characteristics worse than if they just did it single-threaded so the biggest win apparently greater than 50% of the perf win comes from the ability to run this parallel type checking in parallel isn't as trivial as it sounds by the way because any one file in your system that you're type checking could be referenced in lots of other places so the parallelism is actually doing a ton of redundant work where any set of threads might be checking the same files even if they started somewhere different this ends up working out okay though because they can dup the errors once they collect them all at the end and only show you the ones that are unique so if it checks the same file 15 times on different threads you'll still only get one error and since it's so much faster it ends up being better regardless the one cost there is memory usage and memory is higher than if they didn't recheck things but it's still about 50% less memory usage than it was in the JS version and that's without any work put into optimizing memory by the way kind of nuts there is one last piece here I want to very briefly touch on the if I do a video on this it's basically going be dedicated to this point garbage collection garbage collection is a strategy for managing memory and applications generally speaking GC is a process C that goes through and sees what stuff isn't being used anymore and cleans it up from memory to free up that memory in languages like rust you have to manage your memory yourself but rust also has the borrow Checker which makes it a lot easier to know what is or isn't in use so it's trivial to keep things free however you have to be constantly checking what is accessing what memory which makes writing it significantly harder if you're optimizing for the Perfect Memory footprint and making sure you never have to take a break from processing in order to clear out your memory that's a great win but if you're building something like a compiler where you don't care about the latency at any given moment having to take a break to do garbage collection is actually pretty nice and allows you to write code in a much simpler greedier fashion garbage collection is good for a lot of things in particular I think this use case is very good for it it might hurt on something like a web server because if a user is making a request while you're doing GC that request is going to take much longer to resolve than it would otherwise you'll get crazy latency spikes but if the process is going to take multiple seconds ways and it does hit a GC who cares yeah rust is a phenomenal pick for this quick thoughts from the lead of the typescript team thank you Ryan for dropping this as quickly as you did when this all came out we definitely knew when we chose go there would be people questioning why we didn't choose rust or others funny enough if you didn't know this Andre sellberg the creator of typescript also created C so they explored that as well but their conclusion is that go is the right call for a combination of its portability because it will work on multiple systems apparently Go's Windows support hasn't historically been great but I am sure Microsoft will fix that in all of the demos they used windows so makes sense it's even possible that the issues I was having are because I'm on Mac not Windows also going to hit subscribe on the MSD Channel because if they're going to post stuff like this I want to keep an eye on it they explored lots of options to try and make this work in Rust but all of them either had unacceptable trade-offs between perf and ergonomics or they developed into some crazy writey own garbage collection strategy some of those came close but they resulted in lots of unsafe code and it didn't seem like something like rust had The Primitives to do the ergonomic flexible thing they needed to to handle all this JS code pretty unsurprising when phrased this way most languages don't prioritize making it easy to Port from JS or typescript in the end we have two options do a complete from scratch rewrite and rust which could take years and yield an incompatible version of typescript that no one could actually use or we could just do a port and go and have something usable in a year hopefully you understand here I love this joke too it's not even super clear what the upside of doing this in Rust would be apart from not having to deal with so many why didn't you choose rust questions and not to on the rust guys as much as I believe me I love to I just need you guys to see how many of these we got leave it to Microsoft to not pick rust why do you think they didn't choose rust in before all the people say why not rust why didn't they choose rust we WR the rust compiler and go good joke rust enters the chat room why not rust though go is cool and all but then it would be a 100 times fast no no not at all even just getting the parallelism working here in Rust would be miserable rust's concurrency layer is something left for you to deal with yourself there's a reason why Tokyo is as popular as it is I I've gone too far down this tangent I didn't want the whole video to be why not Russ dedicated video probably coming soon just wanted to express some frustration as well as support for the go team even though I'm not the biggest fan of go it was the right call for this project I am hyped that they picked it I hyped that it's going as far as it is as quickly as it is and I am beyond hyped to share the planned release date they expect to have a full preview of a native implementation of TSC ready for you to install and run in command line by mid 2025 this year and they also expect to have a full project build and language service working by the end of the year that means ready for vs code by end of year you can do it right now though even my dumbass is able to figure this out so it can't be too too hard they have instructions in the repo for how to set everything up you can even run it as an LSP already I have time to set this up just yet before recording so definitely check this out if you're curious it looks really really cool I love that they're using the debug options nvs code to trigger it awesome stuff here the biggest catch though and this is the one that's made it a lot harder for me to test jsx is not ready yet jsx is the syntax used for those little react component looking HTML things in our react code that's not supported just yet it's still supporting a lot of stuff but it means I can't run this on my code basis to see the performance win yet because almost all of my code bases have jsx of some form in them they also confirmed their plan for the Brad map which is that typescript 6.0 will introduce some deprecation and breaking changes in order to align the typescript in JS version with the typescript in Go version and then typescript V7 will be the official version where everything moves over to go by default awesome plan to get this rolled out they want to make sure everybody with giant typescript code bases is able to benefit from these wins and it makes a lot of sense the goal of typescript from day one was to make it so that JavaScript could scale to companies in codebases the size of places like Microsoft when Microsoft tried to write JavaScript code they ran into the absolute that was trying to keep it working when lots of devs are contributing to lots of files and lots of places typescript was written by unders to solve this problem and despite solving it really well it introduced a new problem which is when we have these giant code bases the performance of the type Checker goes to now they have solved it and once again typescript is the solution for Gigantic applications that work on every platform written by big companies while providing incredible developer experience the typescript team has historically focused on developer experience first and formost most and I think this is the right path for them to really improve that DX one last thought because it's a thing I've been thinking about a lot and I do think it fits here the future of Dev tools I have a video coming out soon that's already recorded called uh react is the last framework the hypothesis here is that we have all these AI tools that have been trained on the existing data there is so much data for things like react and typescript that introducing a new framework or language is a hard thing to sell because your AI will be worse at writing those things because there just aren't as many examp examples and this doesn't just affect other Frameworks and other languages trying to catch on it affects react and typescript too the big thing that I've been seeing is that react and typescript can't really add big new apis as easily because the likelihood that the education materials that exist the existing code bases that are referenced in the AI that we're using to write all the stuff we'll even know about those features is near zero which is why we saw the react compiler which was an attempt to take your existing react syntax and spit out faster code it's also why we now have the typescript go compiler because it doesn't change our syntax at all but still gives us a massive win and I think the future of our Dev tools is going to be stuff that looks more and more like this stuff like UV in the python World which makes it way faster to scaffold and set up your development environment in Python also things like Mojo which is in the python World a way to write python looking code that compiles to much faster C I think these tools are examples of where we're going with software where instead of changing the syntax and ergonomics of how we work on and write soft where we're going to get tools that improve the existing way we do things and it's so cool to see Microsoft embracing this as hard as they have there are lots of other benefits in the AI World here in particular when you have typechecking performance that's this much better it becomes significantly easier for things like an AI bot to use a tool to check your types as it is working on writing code if it had to wait 30 plus seconds before it could continue before not great now if it has to wait under 3 seconds suddenly these tools become more and more useful for getting an AI to make make changes to a giant code base and check along the way if those changes are right or not so cool there are so many ways a project like this could have gone wrong and it's incredible to see the typescript team avoid all of them in the process I'm super Hy about this project I think it's as an incredible precedent for what we should expect from Dev tools in the future huge shout out to Anders huge shout out to Danny Rosen waser and everyone on the typescript team both for pulling me in early taking my feedback and making all of this happen I couldn't be more hyped to be a typescript developer and you guys keep making it worth it let me know what you guys think and until next time keep typ checking




## UI Libraries Are Dying, Here's Why - 20240113
UI libraries have been an essential part of the history and progress of the web if it wasn't for the hard work of the developers who created things like bootstrap and material UI it's hard to imagine that front-end experiences that are good would be as prolific as they are today things like Twitter Youtube and so many more built with these awesome libraries to make surprisingly good applications and as such most developers who build user experiences on the web are building with component libraries which is why I'm here to tell you that they're dying the future is not one of big popular UI libraries that everybody is npm installing and building within their code bases actually looks quite a bit different I've been thinking a lot about this and I wanted to share my conclusions after thinking about it for too long and where I think things are going in the future of the web I want to be clear this is a very speculative video based on Trends I have been seeing and experiences that I've been impressed with as things change over time but I really do see a trend happening here and I wanted to take the time to document it and share my thoughts so let's talk about Shad CN and shad UI if you're not already familiar with Shaden UI it's an awesome open source project by Shaden a prolific open source contributor in recent addition to the team at for sell he helped a lot with VZ and a lot of the other cool stuff going on there but what is Shaden UI isn't this a UI Library well kind of not really it's the pieces for you to build the perfect UI library for yourself as it says here build your component Library what Shad UI provides isn't a package that you install they do have a CI to help you set things up but the way C CN works is it installs things in your code base as actual code you can edit when you set up any of the elements in here you can either manually grab the files that you need and copy paste them into your app set up the tail and set up all these things or as of recently you can run this command so let's go add the Shaden accordion oh look at that they have options for all these different run times I just copy the bun command four times the charm Tailwind doc config.sys protect the stuff I don't want to change the Alias I want to change where these actually go but that's fine if it's putting it in this at slash thing I don't want to with it too much yeah it should work but it'll be a pain to manage later move it now I will trust you cool we'll move this where I want it because again like the magic of this is that it's actual code I own I think they are smart enough to update this they're not so I'll add SL star to be/ Source SL cool so now I've done that I should be able to install components so if I want that accordion thing scroll down here yoink and now I have in my own code an accordion. TSX file and if I want to make any changes to this I can because it's my code and my code base using Tailwind the way I personally would like to use it it's also built on top of radx UI which makes it way easier to have accessible components and all the components in Shad UI are incredibly accessible there's a lot of contributors making sure it stays that way so if I wanted to go in here and just delete a bunch of this code I hate how scroll Works in VSS code sometimes when you're selecting things import accordion not from react accordion at SL components UI accordian it's going to need some props I'm sure what does it want type equals single cool we can also look at how they actually use it in here this is a code example accordian type single collapsible and has accordian items in it that's just grab this first item obviously a lot of these need to be imported a little Annoying that it's confusing the radx UI Imports with the Shad CN ones I almost wish there was a way to tell typescript to never use the rad UI ones but now we have what should be a totally functioning nice looking accordion oh it's not going to work cuz I don't have environment variables I'll just go make a nonsense one there we go now we have a fully functioning collapsible accordion and our code base that behaves the way we want it to and I know that was a bit of work to set up but it wasn't that bad and it's mostly because of where I'm putting things and again the CLI that they just added is very new and will smooth out those parts but now if I ever want to add new elements it's trivial to I can scroll and find collapsible here's a collapsible repo selector who isn't had to build one of these before or a combo box where you select multiple things at the same time with a search built in too or a data table or a hover card all these types of things are very annoying to build and now we have code we can rip immediately you can always grab the code directly it's one of the options when you set up but you don't have to you can use the CLI or you can use the manual copy pasting of Parts because all of this code is meant for you to run in your own code base that's what's so different about this for me is I don't think about installing one specific package or one specific UI library and hope it has the solution and if it doesn't I'm screwed it's very easy now to just run this command and add a hover card now if I go to my source you'll see I have hover card. TSX which is a complex component Library file in my code base that I can change however I want that's an incredibly powerful path for developers of all types of UI stuff where a lot of the Simplicity of a provided component library is there but more importantly the ownership you normally lose that exchange didn't happen so if you're building a UI library for your company this is one of the best starting points imaginable and if you're just starting a side project and want a couple buttons or accordion like elements or all the different complex accessible uis that many of us need to build all the time just hopping in here clicking the one you want clicking the copy button and running this command lets you in your code base have whatever UI elements you need where this gets much crazier is v.d which if you're not familiar it's a new project by versel that lets you generate components built on top of Shaden with AI so if I wanted to generate video player element with a comment section now it's generating four different potential uis for a video player with a comment section I didn't mean to hit regenerate now it's going to rerun all of that oops momentarily after it doesn't rerun cuz I accidentally hit the wrong button I do kind of hate that regenerate is here next to all of these because the ones I had before looked much better okay this one looks fine add your comment here's some comments underneath let's ask it to make changes can you move the comments to the right as a scrollable sidebar move the add a comment input to the bottom of the comments sidebar at a title section below the video player while this is generating I'll take the time time to point out that versell does sponsor the channel they have not told me to talk about VZ or any of this stuff I just like it and genuinely use it and think it fits the theme of this video so no they're not sponsoring this video I'm just doing this cuz I want it to so yeah and now one last request extend the comment section sidebar to be full height and now through just a handful of requests to an AI generator theoretically once this runs seems like they're getting lot more traffic lately okay I didn't like doing that part but thankfully it is just generating code that we can rip into our code base I click this little code button we can see the exact react Source it generated as well as the HTML if we wanted to just use the HTML in any other framework more importantly though I can copy the command run this name the component video View and now the same way we would add any other UI component we have video view. TSX is a component I can mount just like that and here is this basic component again we have our own CSS on the page and that's going to affect things we have a really good starting point with code and layout and everything else we would need in order to make this look great I even add a quick background here just BG gray 800 make it darker there we go if I wanted to have a background for the video player uh BG gray 500 so it's clear that like this is where the video would go and having this in my source code again this isn't something that just came from the external World in some package that's installed if we look at my package Json the stuff that's been added is rx's helpers for doing good accessible react code as well as things like class variance Authority and clsx which are just there to make sure the right class names are being applied and Tailwind merge and Tailwind animate so you can have your tailing classes merge appropriately and do custom animations on them too if you've ever built a UI Library your head's probably spinning right now because this makes all the pieces you need to build a good UI significantly more accessible and the same way you would have built a package that your company is sharing across things you can use these pieces to build that same package or even just a folder in your existing application this has lowered the bar for building a UI Library so low that it's just as good as adopting something like material UI or like bootstrap and since Tailwind is the base piece that assembles all these parts it's really easy if you've used Tailwind before to make changes to the code that you're getting be it from v0 or from Shad UI itself and this isn't the only project that's going in this direction Tailwind UI is also very similar Tailwind itself is a CSS library that is just a way to write CSS slightly faster but if you want actual components like buttons comment sections audio players and all these types of things they actually have a bunch of components they've made for you to use and if you want them you go to the page that has the code you want on it this might look familar if you've seen the Ping or upload thing specifically websites you hop to code and here's the source for all of that just there for free free to use as you please and for the more interactive parts that have like drop downs and things they have a little react button too so you can get all the react code oh look it's right there react here's the react code and it even has the mobile menu built for you as well all of these things are just there for you to use I will say tail and UI is paid for a lot of it a handful of the components are free but they do charge if you want everything thing it's actually a very reasonable pricing scheme where you pay 300 bucks once ever for just yourself or you pay 800 bucks once ever for your team pretty dope I'm very happy as a tail and UI customer and it's really cool seeing things like this especially Shad CN and Shad UI pushing it way further I wouldn't be doing all of this work Justice if I didn't also talk about the underlying pieces that make it possible obviously Tail's really big but I mentioned radx a bunch what even is radx radx is a really really powerful set of pieces to build accessible react applications The Primitives it provides are incredible they provide a bunch of hooks and components to do accessible things and this list might look pretty familiar having a drop down example labels all these types of things these base components and base hooks are the parts that allow for developers to make really accessible applications and really accessible user interfaces quickly in react and things like it and it's really cool seeing radics find success seeing headless UI find success headless is the equivalent of this from the tailin team where they have all of these different components and the hooks and things you would need to run it or render it correctly it's not just components it's Hooks and behaviors and all of these other complex things that are hard to get just right and that's why I'm so excited when I see these new Solutions because getting accessibility right is hard getting your component architecture right is hard getting the different states in race conditions and edge cases is obnoxiously difficult and we've been Reinventing the same work over and over again and even if you were using a UI Library like a material UI as soon as you had something slightly different from what that provides it was really hard to build better Solutions on top of it you end up with a jarring difference between the material UI components and the custom things you write outside of them this blurring of the line between library and code you own where it is always code you own but a lot of the faster movement and Agility you normally get from using a component Library you're just in a much better starting point and that's why I see this transition going as aggressive as it is and that's why I see so many developers hyped on stuff like shadu versell hired him for a reason this is very much a bet on the future of how we author applications in user interfaces and I think I'm making that same bet I really don't see a future where component libraries are the thing that we're installing in our projects the future seems like something where we run scripts to generate the best component library for ourselves in our applications and this solution won't compromise on the flexibility we need to build the right UI for our users this is a very exciting future and I'm so hyped that we're moving towards it as as fast as we are what about you what do you think have you played with shad CN yet what are your thoughts on this future where we're not installing user interface libraries anymore I think it's exciting and I don't think component libraries are going to be around the way that we're used to very much longer you want to hear my thoughts on the state of CSS as a whole video pinned in the corner there where I break down all the different CSS Solutions it's one of my best I'm really proud of it even if things have changed since and YouTube seems to think you're going to like the video there so maybe check that out too appreciate you guys as always thank you again peace nerds




## Unexpected Lessons I've Learned After 15 Years Of Coding - 20240830
we've all seen those click baity how I would learn to code if I started over videos and I always thought I would avoid making one and honestly I'm going to continue that said I saw this article and I was very excited for it so we're going to read it this is the closest you're ever going to get for one of those classic OG how I would learn to code from the start videos but I just want to read this blog post cuz it looked cool and the author's a bro so without further Ado let's dive into M Buffett's post a bunch of programming advice I'd give myself 15 years AG go I finally have the feeling that I'm a decent programmer so I thought it would be fun to write some advice with the idea of what would have gotten me to this point faster not claiming that this is great advice for everyone just that it would have been good advice for me let's see if it'll be good advice for me as well very curious this is a lot of my comments like to let me know I'm still clearly not a very good programmer teach theun if you or your team are shooting yourselves in the foot constantly fix the gun it's better not become anti- react I can't tell you how many times I've been on a team and there's something about the system that's very easy to screw up but no one thinks about ways to make it harder to make that mistake when I was doing iOS Dev used core data and subscribed to changes from a bunch of views the subscription callback came on the same thread that the change was triggered from sometimes that was the main thread and sometimes it was a background thread importantly in iOS Dev you can only make UI updates on the main thread or your app crashes so a new subscription could be working fine but then it would break when someone triggered an update from a background thread or if you add a UI update later on these are always really fun if you have some code that is working fine but it's on Main thread you're like oh for performance Reasons I'm going to move it and then don't test it thoroughly enough and then it breaks for your users I've seen this in all sorts of things this is not exclusive to iOS this is development of applications this was just something that people transparently accepted and often came up in reviews for newer people on the team every now and then one would slip through and we'd go at a dispatch q. main. async when we saw the crash report I decided to fix it and it took 10 minutes to update a subscription layer to call subscribers on the main thread itself which eliminated a whole class of crashes and a bit of mental load I'm not trying to be like look at these idiots not fixing an obvious issue with the code base when it was obvious to me because it would have been obvious to anyone who thought about it for a few minutes I had one of these recently where I was helping a certain undisclosed application that had a certain massive Bill and a really slow site on a certain service and when I looked at their code they had like five plus Prisma database calls on every API endpoint all blocking even though they had no data in common so they had a big await block before you even start the request just to get the user data then they had another giant await huge query to get some more data then right after three more queries and I was able to Forex their performance by just taking all those queries and putting them in a promise.all so that they could all run in parallel instead of individually do I think those devs suck I'll mence my words but theoretically any of them could have looked at and been like yeah that's dumb we probably shouldn't do it that way it's not that I am so much better than those other devs it's just that I've done it more I care a lot and I'm a fresh set of eyes on the code base it's like yeah this should be better and as the author says here these things tend to stick around a weird amount because there's never a natural time to address them I see this so often especially with performance stuff because if your performance sucks when do you fix it usually when it sucks so bad that it's causing problems and not until then when you're first getting onboarded you're not trying to change anything big I I an exception here I I have had times where I joined a code base that was massive and I was like wait you guys aren't using prettier you guys don't have slint setup it's 2024 and you're still writing this JavaScript like it's the the early 2000s and I've had times where my first poll request to a repo was like 100,000 line change and everyone hated me but then a week later they liked me but yes you probably shouldn't be trying to change anything big what you should be doing is reading the poll request tab you know what I'm going to do I'm going to in parallel write my advice to younger Theo advice to younger Theo and I expect this to be different but have overlap in the lessons the first one I want to put in here is don't learn a code base through the code tab start in the pr tab I've said this for a while and I'll continue emphasizing it when you're working on a big code base for the first time the worst thing you can do is start by reading the code because in a giant code base the the vast majority of the code hasn't been touched possibly for a decade even 90% plus of the code in a big code base just doesn't get touched and if you spend all your time trying to read and understand that code you're screwed but if you go and read a whole bunch of poll requests you see what is merging what people push back on what is changing and why it's changing your understanding of that codebase will be significantly better than if you just try to read it line by line in fact if you had two people one who has read all of the code and one who has read half the poll requests I promise you the one who's read half the poll requests understands the code Bas significantly better than the person who seen every line of code in it guaranteed yeah back to the article as they said when you're first getting onboarded you're not trying to change everything and certainly not anything big so you may think it's weird but you shouldn't go changing a bunch of things that you're still learning about then when you've been on the team for a while it sort of just Fades into the background I really like this framing because if you show up to a new code base and you're like this seems wrong you're often too scared to do the right thing and then after a while once you're comfortable it's now become normalized to you that's a really good framing I had not thought of before and it's actually something I try to index on when I'm running teams I'm going to add another point to my takes which is it's very easy to get into the state where if somebody new is showing up on the project they haven't touched it all before and they say hey these things are weird you're like oh don't worry you'll get used to it but you're saying that because you yourself are used to it it doesn't mean it's normal doesn't mean it's good so what I've learned to do is listen extra carefully when the dev shows up on the project for the first time what stands out to them what went wrong in the onboarding what was unclear when they started reading through the code what made their first poll request hard to do you don't get that feedback from your existing devs because they're all stock homed into it so the only way you can actually improve on those metrics is by taking massive advantage of the unique opportunity of a Dev trying out your code base and trying to contribute to it for the first time that's a rare experience and if you want it to be better for the next Dev listen very carefully to the current one who's onboarding right now and I I couldn't agree more that this is super common that devs are scared to make the big change based on what they expect and then by the time they have the confidence is too normalized and they move on it's a mindset shift you just need to occasionally remind yourself that you are capable of making you and your team's life easier when these sorts of things are hanging around absolutely absolutely agree first there's actually a good question here do you worry that person is coming in and trying to make what is comfortable to everyone else more comfortable for them or what they're used to seeing that's a conversation to have but chances are if you're showing up and you've worked in other code bases especially at a company like I when I was at twitch I touched like probably 20 plus code bases in a meaningful way and when I was working on most of them the tooling was relatively consistent there was obviously lots of differences between them but then when I would show up in another code base from a different team be like oh you guys are just behind the standards of the rest of the company can I propose some changes to make these things a little more in sync and usually a couple do would push back but a few others would be like yeah I worked on two other code bases here and those were better we should have that here too and as long as you can build a few allies and have a good conversation these changes are almost always worth doing and talking about back to the article assess the trade-off that you're making between quality and pace and make sure it's appropriate for your context Banger after Banger damn there's always a trade-off between implementation and how confident you are about correctness so you should ask yourself how okay is it to ship bugs in my current context if the answer to this doesn't affect the way you work you're being overly inflexible what a banger God coming out stronger than even me on it what a way to say unit tests are useless if they're useless to you so yeah obviously I agree I think that the way you write software that failures would kill people should be very different from the way you write software where failures mean they don't get a fancy Emoji when they hit a button quite as fast as they would otherwise it's important to recognize the the difference in these types of things where certain Services should never fail ever and if they do people die and then there's other services like especially in the startup world where as unintuitive as it may seem failures might actually be somewhat good an interesting thing we learned when we were running ping is that if we had two customers one had no issues they signed up and everything went well and then one customer had some issue big small whatever and they report it to us if we fix that issue for them fast enough and we get them involved in the conversation so they feel listened to understood and cared for the customer that had the bug will be more loyal than the one who didn't so if we had built everything in a way where it's harder to write bugs we might have had less happy customers not even accounting for the fact that if we slowed things down enough to never ship bugs we would never have shipped a lot of the features that our users wanted and if they did still run into bugs it would have taken us even more time to fix them so ignoring all of that having bugs was still better in our context in scenario we making Medical where that would not be the case we're making a silly app for streamers to collaborate very different use case very different results very very different context and you should adjust the way you work based on that context couldn't agree more at my first job I was working on Greenfield projects around data processing which had good systems in place for retroactively reprocessing data the impact of shipping a bug was very minor the proper response to that environment is to rely on the guard rails a bit move faster because you can you don't need 100% test cover or an extensive QA process which will slow down the pace of Dev at my second company I was working on a product used by tens of millions of people which involved high value financial data and personally identifiable information even a small bug would entail a postmortem I shipped features at a snails pace but I also think I may have shipped zero bugs that year usually you're not at the second company I've seen a lot of devs air on the side of that sort of programming though I couldn't agree more even when I was at twitch I found a lot of teams trying to meet like Amazon's reliability standard it's twitch I loved working at twitch it was a great company building awesome things and I'm streaming live on Twitch right now by the way every Wednesday live on Twitch if you want to see how I record these videos and hang out and chat with my homies here twitch is a great place to work twitch is a really cool product twitch does not need to have six NES of reliability and if that results in a shipping worse features slower it's a mistake and the fact that we had such insane code coverage rules was just obnoxious it actually resulted in us not shipping things well pretty regularly a story I tell a lot because it haunts me is that we had I think there was 80 or 90% code coverage as a rule I had a feature that we rewrote to be about a tenth as much code so we had the old version which was let's make up numbers um let's say 100,000 lines of code and we had the smaller version which was 10,000 lines of code both are probably 10x smaller doesn't matter the 100,000 line of code version had code coverage a bit over 80% the 10,000 line of code small version had code coverage at 100% both were in the project because it was feature flagged so you'd get one or the other we had moved 100% of users over to the new one the new one was faster it had new features users liked it more you're ready to go okay so it's time to deprecate the old one to delete that 100,000 line of code mess I never could delete it because deleting it put us just below the code coverage threshold even though the feature I replaced it with had better code coverage it didn't matter because the pure number of lines of code that were tested being removed was enough to just barely drop us under the threshold and I would not be surprised if that giant pile of unused code still existed in the twitch code base simply because deleting it hurt a metric that didn't matter for a product where people can play games and talk to each other that is every layer of that is stupid every single one and even if I loved working at twitch that's just proof of how dumb this is the only code coverage number that's acceptable is 100% And even that is dumb too yeah I I digress anyway as they were saying usually you're not at the second company I've seen a lot of devs air on the side that of that sort of programming though in situations where bugs aren't Mission critical which is 99% of web apps totally agree you're going to get further with shipping fast and fixing bugs fast than you would taking the time to make sure you're shipping pristine features on your first try totally agree and I also agree that good test should not think about code coverage percentages but if you're going to enforce one the only percentage of code coverage that makes any sense at all is 100 still doesn't make much sense but at least it makes some a less than 100% number nonsense useless throw it away next Point spending time sharpening the a is almost always worth it Prime is going to love that one you're going to be renaming things you're going to be typing type definitions finding re references Etc a lot and you should be fast at this you should know all of the major shortcuts in your editor you should be a confident and fast typist you should know your OS well you should be proficient in the Shell you should know how to use the browser Dev tools efficiently and effectively I can can already tell people are going to be in the comments like you can't just spend all day tweaking your neovim config I mean if you become a YouTuber that talks about neovim you can but I digress sometimes you need to chop the tree too I don't think I've ever seen someone actually overdo this though one of the biggest green flags I've seen in new Engineers is a level of care in choosing and becoming proficient with their tools you know what fine my issue is never that somebody's really excited about NE ofm is when they shame others for being less excited if you want to go all in on NE and really care about the cooling experience that you have A+ if you're going to make fun of me for saying vs code is good enough get off my team that's my line also on that note before I forget I went through this phase so I can talk all the I want I still spent a whole summer at Amazon configuring my I3 t-u neovim everything because I wanted to be a real legit hacker so I could feel less like an impostor and learning those skills helped me a ton I got way better at ins and outs of navigating complex developer environments that all said once I got a Macbook I kind of just drifted towards full screen vs code and I've been happy with it since but like I had to do my time in the trenches of a crazy complex developer experience setup that I owned all of and was really confident in before I could make that shift with similar confidence where I just live in command Tab and Tilda and as you guys can see I have very little stuff open cuz I don't need to have a whole lot of stuff open next point you can't easily explain something is difficult then it's incidental complexity which is probably worth addressing I love that I love this point if you can't say why it's complex you should fix it like this is hard is not a good answer this is hard because A and C where those things are simple that's a good answer my favorite manager in my career had a habit of pressing me when I would claim something was difficult to implement often his response was something along the lines of isn't this just a matter of sending up X when we y or isn't this just like Z that we did a couple months ago very highlevel objections is what I'm trying to say not on the level of the actual functions and classes that we were dealing with which is what I was trying to explain I think conventional wisdom is that it's just annoying when managers simplify things like this I know I've pissed off a lot of people doing that but a shockingly high percentage of the time I'd realized when he was pressing me that most of the complexity I was explaining was incidental complexity and that I could actually address that first thus making the problem as trivial as he was making it sound this sort of thing tends to make future changes easier as well I'll drop the hot take of this is why I like react and a lot of the new react stuff is once you stop thinking about those details and you plan the system and make decisions around the design I actually find it to be much easier to both build and reason about and then longterm most importantly makes it easier to maintain these are all good things try to solve bugs one layer deeper ooh and react's already coming up oh boy imagine you have a react component in a dashboard that deals with a user object retrieved from state of the currently logged in user you see a bug report in Sentry Sentry plug Channel sponsor they're not sponsoring this great product for debugging stuff though you see a bug in Sentry where user was null during render you could add a quick if no user returned null or you could investigate a bit more and find that your logout function makes two distinct State updates the first is setting the user to null and then the second is redirecting the user to the homepage you swap the two and now no component will ever have this bug again because the user object is never null when you're within the dashboard keep doing the first sort of bug fix and you end up with a mess keep doing the second type of bug fix and you'll have a clean system and a deep understanding of the invariance makes perfect sense it's so tempting to just if no user return null I will say as a huge react query fan I've been guilty of this where I solve those error cases where they're coming up with errors but since especially with like the new model I find myself just defining within the call the right thing the update to set things to null should also send you to the right place I absolutely agree you should aim for the second type of fix don't underestimate the value of digging into history to investigate some bugs again reading PO requests all that stuff really really good strategies I've always been pretty good at debugging weird issues with the usual toolkit of print line and the debugger so I never really looked at get much to figure out the history of a bug but for some bugs it's crucial I recently had an issue with my server where it was leaking memory seemingly constantly and then getting out of memory killed and restarted I couldn't figure out the cause of this for the life of me every likely culprit was ruled out and I couldn't reproduce it locally it felt like throwing darts blindfolded I've certainly had bugs that felt like that and it is miserable I looked at the commit history and found that it started happening after I added support for Play Store payments never a place I would have looked in a million years it's just a couple of HTTP requests turns out it was getting stuck in an infinite Loop of fetching access tokens and after the first one expired maybe every request only added a kilobyte or so to the memory when they're retrying every 10 milliseconds or so on multiple threads that starts to add up quick and usually this is the sort of thing that would have resulted in a stack Overflow but I was using async recursion in Rust which doesn't stack Overflow rust is a great programming language this never would have occurred to me but when I'm forced to look into a specific bit of code that I know must have caused it suddenly the theory pops up I'm not sure what the rule is here for when to do this and when not to it's intuition based in a different sort of huh to a bug report that triggers this sort of Investigation you'll develop the intuition over time but it's enough to know that sometimes it's invaluable if you're stuck along similar lines try out get bisect if the problem is amendable to it meaning a g history of spa commits a quick automated way to test for the issue and you have one commit you know is bad and one that's good I'm going to go a slightly weird angle with this for my own advice make it deploy then make it useful I'd find that a lot of devs early on especially myself would spend so much time trying to make the code work locally on their machine that by the time they had it working it was already complex enough to deploying it was nonviable with modern tools that make CI and CD easy like forsell netlify any of these other options you can just link your project to a GitHub repo and now it will auto deploy Auto build and auto publish any changes you make when you push up the commits which makes it significantly easier in a situation like this where you're trying to figure out which commit broke you're trying to figure out why deploy aren't working or why out of memory is happening if you have the ability to Auto deploy every version you can go look at an old version and see whether or not it was working as expected these types of things become exponentially easier and the amount of time you'll spend dealing with these things is exponentially lower one more similar thing learn get really early I know this what's gotten me into trouble but the confidence you get from realizing making changes isn't scary is huge when I started school it was very clear to me that my peers were scared when I would use their machines in delete code because to them code deleted was code gone forever but if you learn the basics of get you don't worry anywhere near as much yeah this is a great reference I helped the dev a while back who was trying to deploy their giant remix project onto versel I was the one screen sharing I was just you can even tell from the uh terminal there that's obviously me that's my color coding that's my um t-u everything that was my machine because I was so annoyed that the particular Dev that was having the problem was insisting that vercell was the issue even though they had never once got it to deploy so my response was what the can we get this remix can we get a remix project to deploy and then we can debug the difference between the two because you should have made this deploy as soon as you made it and I was able to get it working in like 10 minutes once I jumped in even with like Lee Rob and crew hopping in too it was a a fun chaotic experience that absolutely could have been settled if the dev had deployed before they built so as unintuitive as it might sound to put deploy first before you make something useful trust me it makes life better and that's why all of my tutorials I deploy really really early and then we do the rest after back to the article this is a great article by the way uh shout out M Buffett will give you a big Shout Out near the end I'm sure I'll put their Twitter in the description too give them a follow it's really easy to write terrible code but it's also really easy to write code that follows absolutely every best practice which has been unit integration fuzz and mutation tested for good measure your startup will just run out of money before you finish don't forget those Airbnb lint rules that Airbnb doesn't even use so a lot of programming is figuring out the balance absolutely agree I'm going to drop the hot take of simple almost always scales one more of Mind aim for simple it scales well I'll even put surprisingly well I find people will look at a simple thing and say oh what happens when that's at Enterprise scale well if the architecture is simple enough then what the way it scales up as it gets more difficult is way less bad than something that starts difficult and has more complexity as you go and it's a balance it's absolutely balance but if you aim for simple the likelihood that things scale well is actually higher not lower and people love to pretend otherwise and they're wrong if you erir on the side of writing code quickly you'll occasionally get bitten by a bad bit of tech debt you learn stuff like I should add great testing for data processing because it often is impossible to correct later or I should really think through table design because changing things without downtime can be extremely hard if you ER on the side of writing perfect code you don't get any feedback sorry rust things just universally take a long time you don't know where you're spending your time on things that really deserve it and matter or if you're just wasting that time feedback mechanisms are essential for Learning and you're not getting that I absolutely agree I was just filming a video earlier about Ladybird which is a new browser that's entirely unusable because its goal is implementing web standards not being a good usable browser as a result the likelihood that they get actual feedback about what is and isn't working is way lower versus the browser I'm using Arc which I've used for a while now still has a fun bug where when I click the collections tab because I download a lot of things it lags my browser is chugging now because I have some thousand files in that folder which means I can give them that feedback and they're rethinking decisions around their entire Swift architecture because Swift is so bad at long lists but they're able to learn these things and make these changes because they have actual users because they ship something sooner versus ladybird which isn't going to use any existing solution they're building everything themselves and as a result the amount of time it takes for them to get any feedback at all is massive to be clear I don't mean bad as in I couldn't remember the Syntax for creating a hash map so I did two inter Loops instead I mean bad like the following instead of a rewrite of our data ingestion to make the specific State unrepresentable I added a couple asserts over our invariance at a couple key checkpoints oh oh yeah our server models are exactly the same as the dto we would write so I just serialized those instead of writing all the boiler plates so we can write the dto later as needed I skipped writing tests for these components because they're trivial and a bug in one of them is no big deal I mean that's all components ideally but yeah good examples make debugging easier I like that one a lot let's see what he has to say here there's so many little tricks I've acquired over the years on making software easier to debug if you don't make any effort to make debugging easy you're going to spend unacceptable amounts of time debugging each isue as your software gets more and more complex hey uh nextjs make things easier to debug please thanks I know you're working on it I know's working on it I just had to point that out because if you don't have browser tools things are a lot harder it's a great Point too you'll be terrified to make changes because even a couple new bugs might take you a week to figure out yep there's plenty of code bases I'm scared to touch because I'm more likely to add a bug than fix the thing I'm trying to fix in the first place here's some examples of what I mean by the way this person's a huge chest brow and has a cou cool chess Services they built for the back end of chessbook they have a command to copy all of a user's data down to local so they can reproduce issues easily with only a username based they trace every local request with open Telemetry making it very easy to see how a request spends its time also based even though open Telemetry is a standard I have a scratch file that acts as a pseudo repple which re-executes on every change ooh I love this I'm a big fan of having a Sandbox file in your project so that you can just try things there and not have to like spin a bunch of stuff up to do it this makes it easy to pull out bits of code and play around with it to get a better idea of what's going on love it totally agree oh here's a fun one in staging they limit parallelism to one so that it's easier to visually parse logs ooh spicy I like it for the front end I have a debug requests setting which prevents optimistic loading of data to make it easier to debug requests interesting I think I dig that I also have a debug State setting that will print out the entire state of the program after each update along with a pretty diff of what happened they also have a file full of little functions that get the UI into specific States so that is they're trying to fix bugs they don't have to keep clicking in the UI to get to that state I should have more of that it's a weird example but I have this project Doge T3 G so I actually put this little query Pam on the page where Dev mode is true now we get this thing on the page where I can really quickly add a bunch of values add money and then get this into the state I'm trying to debug at any given time this was essential to getting this working I can't imagine how I would have built this project without it there's definitely not a really popular project in the front-end world that is significantly more annoying than it ever should be that people use because getting their components into the right state is really hard that's that's definitely not a thing it's not like people would use this component Library tool to debug UI because they don't have a way to get the UI into the state that they're actually testing that would be absurd there's definitely not a whole industry of people making really annoying tools that keep getting misused because UI devs kind of suck that's definitely not a thing unrelated website by the way ignore whatever I was just scrolling totally don't know how I ended up there yeah having ways to get your components into the state that they should be yeah you should and every Dev should normalize that the idea of making it easy to see play with debug Etc it helps with places you wouldn't even expect like having these tools makes like QA easier too it's just it's good it's really good practice to find simple ways to get your application into the states that you're actually working on it also will encourage you by the way to make things simpler because if it's too hard to get things in the right State you'll start to realize ways to simplify that State Management and those are almost always worthwhile stay vigilant about how much of your debugging time is spent on setup reproduction and cleanup afterwards if it's over 50% you should figure out how to make it easier even if that will take slightly longer this time bugs should get easier to fix over time all else being equal I hate that's a spicy take because it's entirely correct as a code base gets more complex you should be counter trting that making reproduction even easier to deal with when working on a team you should usually ask the question I'm putting that in mind too uh dumb questions rule I've talked about this a bunch I can't even remember which videos I have because there been so many the dumb questions rule is a thing I apply to new Engineers when they join my team I mandate a minimum number of dumb questions that they have to ask every day if they haven't asked me at least one dumb question every day for their first week or two the day is not over until they ask the question the reason I push this is because devs and honestly everyone is really insecure about feeling dumb in saying dumb things so I force them to get over that by making them do it ask the dumb question and it kind of goes back to this point earlier of taking feedback from unfamiliar devs more seriously because the dumb question is a thing others probably thought when they were trying the project for the first time but they were too scared to say and if you don't get that feedback you'll never know and this goes both ways if you're the Dev that always asks the question you're more likely to be working in code bases that solve these problems because if everyone on the team isn't willing to say it and you're also not willing to say it it won't get fixed but even if everyone else isn't willing but you are all of a sudden these things start to get fixed so it's really important to ask the questions even if no one else on your team is in the worst cases you get fired for and you can find a team that's better aligned with you there's a spectrum of trying to figure out everything for yourself versus bugging your co-workers with every little question and I I think most people start their careers way too far on the former side absolutely agree it has been hard for me to find people who ask too many questions when they're working with me there are absolutely people who are not working for me that are just random people in my DMs asking me all sorts of stupid totally see that that is a problem but for the vast majority of people especially once they're employed they're almost scared to ask the question and you got to push them to or if you're that person you just got to do it don't be scared to ask the question almost ever there's always someone around that has been in the code base for longer or knows technology X way better than you or knows the product better or is just a more experienced engineer in general there's so many times in that first 6 months of working somewhere where you could spend over an hour figuring something out or you could get the answer in a few minutes again really important point I can't tell you how many times the dumb question ended up being well I've been stuck on this for 4 hours do you have any tips on how to get this particular tool working and my response was oh yeah you should run these two commands instead I should have updated the docs for that my bad I'm going to go fix that and now this thing that had spent hours on get solved in like 30 seconds and our docs improve huge massive this is a great thing thank you schaer for sharing this junior Dev here I've been praised as the best on my team at asking questions ask the question you don't have to be an experienced engineer to ask good questions in fact the inexperienced Engineers they have a massive Advantage because they have better questions because they're not going to default to existing knowledge that might be incorrect they're going to challenge the thing and they're going to ask great questions as a result lean into that as a junior Dev and as an experienced one get those questions get that feedback it's all so helpful this happens all the time I I can't I would love if you have this to link it because this happens five times a day there is no world in which I remember your specific question like you it we all have these moments that haunt you know what one more piece of advice that one dumb thing that haunts you nobody remembers it I have plenty of those I have so many of these moments where like wow I can't believe I thought that or did that like like here's a fun one that actually got brought up because others remembered it for me so bad example but I love it I didn't know react query could be used for things that weren't graphql until Tanner Lindley was on Jason langdorf stream there's actually in the VOD I bet I could find it yeah cool almost certainly going to be at this time stamp yeah yes look at me in chat there look at that I am so so so stupid and somehow just realize react query isn't just a graphql client I need to go do a very deep dive and this was October 21st 2020 we've all had these issues we've all had that moment where we feel dumb and nobody remembers the only reason that one got noticed is somebody else was watching the video and said yo Theo I saw you pop up in stream here look at your comments I was like wow holy I'm dumb but no one else remembered no one remembers those moments don't worry about it and again the only time that this would ever annoy people if you're asking too many questions is if it's clear you could have found the answer yourself in a few minutes and even then it can be useful because you might not have known the strategy to find the answer and if I then show you that awesome you'll ask less questions I've had once or twice in my career where somebody would ask questions over and over and I'm like okay how did you try to figure this out and then realize they didn't know about one of the docs resources or one of the things to search sort for and when I show them that they would stop like almost every time if you're asking too many questions it's because you haven't been shown the way to find the answers and if you ask too many questions awesome now we can realize that deficiency exists and we can plug it after you responded to me I sat down and got really into understanding how these things actually work so it helped you a ton that's awesome I'm sorry if I was harsh in the reply there but I it sounds like you used that opportunity to level up and be better like even if I didn't handle your question well it seems like you handled it awesome and I really hope that you're not scared of asking questions in the future because that's dope to have you here have you sharing this experience and have you productive enough to to deeply understand next now you massively leveled up as a result of that so I love that shipping Cadence matters a lot think hard about what will get you shipping quickly and often love this startups have limited Runway projects have deadlines when you quit your job to strike out on your own your savings will only last you so many months that this hits too deep this hurts Hur me in my soul  ideally your speed on a project only compounds over time until h no I I have another Theo point and it's not even that related to this but it's inspiring me uh you don't know what level you're at until you get an offer at that level somewhere else companies love to make you think you're not a certain level because they don't want to pay you for that promotion so they always make the promotion process hell there was a window where I didn't think I was a senior Dev because I was having problems getting my senior doc to like get started I just getting my managers to do it was annoying turns out those managers sucked and when I started applying to other companies Not only was I massively exceeding their bar for senior I was approaching like the staff level bar and I didn't realize that because I didn't realize I should be talking to other companies and not basing my ability on what this one particular person thinks they should or shouldn't sign off on because the reality was if that manager promoted me they'd have one less headcount for a senior Dev but if they didn't promote me they could hire another senior Dev and have me underpaid outworking that senior Dev it was an obvious win for my team so I never understood what my actual level was because my company had a competitive advantage of not telling me and then when I figured it out gave him the finger and quit they were worse off as a result regardless this happens all the time and you as an individual developer should know how much you're actually worth what your skills actually look like measured up against other actual companies so do interviews a ton all for that a point interview a lot at least once every 6 months one more on this topic give interviews if you're qualified for the role you're qualified to interview for the role yeah I find so many devs take way too long to get into the interview process on both sides they take too long to start getting interviews to work at a company and once they're at the company they're hesitant to start giving interviews interviews are essential to our success and growth and opportunities as devs you got to push through it it sucks but you have to give interviews do interviews deeply understand interviews if you can't do those well you're massively bottlenecking yourself and your capabilities certainly bottlenecking your success yeah this hit deep the reason I thought of all of that is I just started thinking too much about quitting and going off on my own and realizing at that moment oh I should have quit a while earlier I am very down if you're down to share but no pressure at all hoi I still want to understand why the session never gets past the client this is strange as to me the data is there but it simply never receives the prop I'm looking all over for the solution this one was not actually particularly obvious yeah I'm going to drop an even hotter take for you hooi this wasn't a problem with your understanding so much as next being shitty get serers side props being a function both for redirecting and for passing props is bad this code shows just how bad the conflation of concerns that existed in Old Pages router was the fact that you could do this that you could return a redirect and props is a fundamental design failure in next so I do not blame you at all for this this is why old nextjs sucked and this is also why I think new nextjs is so good it does a great job at solving these problems by not having these magic fun that have all of these different roles you just component style call what you're doing when you do it so I actually am pumped that you found this example because it's subtle but it actually perfectly showcases the types of design failures that the old next model by Design encouraged a lot of so phenomenal oh I missed your follow-up question too my bad on that you pass session as props it does not show in the props initial problem uh I think you understand now so whenever you send the data grabs app grabbing session provider so whenever you send the data of the session as props s is grabbing it passing it yep yep to be clear these things were way more complex than they should have been and none of this is your fault like I really want to emphasize that point this design sucked because of next and I actually love that you brought this up as an example because yeah this was your huge learning is you had only worked in single Page Apps and this abstraction for them wasn't great like you know that was a good question cuz it was like you didn't pretend you understood more than you did you said that it doesn't make sense it's small I'm going to give you a massive compliment here there's a lot of subtle things in this question that I think you did really well I want to understand you didn't say this is wrong or dumb you didn't say this problem sucks or that this tool sucks you said that you want to understand why this strange thing is happening and you even said strange to you the qualifiers here are actually incredible this is like almost like an artistic example of like a really really good question when you feel lost and clueless you owned that it was your desire to understand this was the fact that you said the word understand before describing the problem that you want to understand huge huge green flag you're not just trying to fix the problem and move on you want to understand it and it's strange to you you know it might not be strange to others you know that there might be something better that's just not clicking for you this is a great great question so yeah I wouldn't even qualify this as a dumb question honestly if if you had presented this to me as an employee of mine as your dumb question I would have said no that's a good question come back with the Dumber one later this is great A+ fantastic representation and like to anyone looking for examples of how to ask a question about something you don't understand here you go just say it say that you want understand and you don't and say what is confusing to you fantastic A++ thank you for sharing that who you wrot by the way like that's really good gold example of asking a question when you're clueless people are really scared to do if you just don't understand at all it's scary to ask the question but you did it you learned a bunch and now I get to highlight you in a video as an example of these types of things A+ is all around I love this thank you for sharing don't worry about having to participate in the time and all that but if you're down and you're here clearly you bring a lot of value so pump to have you here man anyways let's see more what this author has to say ideally your speed on a project only compounds over time until your shipping features faster than you could have ever imagined to ship fast you need to do a lot of things oh I'm so pumped that you have you're the best person to teach like knowing that you ask questions that well means you're going to set a really good example for the students the fact that there's people that are learning from you makes me very very excited back to these examples of things that you should do if you want to ship fast you a system that isn't prone to bugs you need a quick turnaround time between teams you need a willingness to cut out the 10% of a new feature that's going to take half the time Yep this happs a lot the the number of times I see a product a feature a tech plan a spec that would be way way simpler if we trim one or two things half my videos where I'm ranting about old jobs are just me complaining about this specifically so couldn't agree more consistent reusable patterns that you can compose together for New screens features and end points Yep this is a huge part of why react one by the way the fact that the patterns and components can all be reused composed stacked and done all these crazy ways that's why react really took off early because it scaled well to small projects and big projects and it lets you move really fast quick and easy deploys wow I must have pre-read when I said make it deploy then make it useful crazy process that doesn't slow you down like flaky tests slow CI fuzzy linters slow PR reviews jira as a religion Etc yep and about a million other things of course shipping slowly should Merit a postmortem as much as breaking production does holy spicy take that I love our industry doesn't run like that but it doesn't mean you can't personally follow the north star of shipping fast couldn't agree more at every scale I just dropped the link in the reply to this tweet because that was such a great article I know I say that a lot but uh holy I'm very thankful for this author when I found this article initially I quickly checked their Twitter they were following me I was like oh my God awesome I reached out they were really hyped and God I'm excited for them to see this video because that was great I say this a lot but that article was great I haven't agreed that hard on something I've read on stream for a while let me know what you think in the comments though and what you learned that might benefit you as an experience Dev or as a new one until next time peace Nars




## Unintuitive behaviors of React Hooks - 20241206
I got asked an interesting question and I figure this is interesting enough to make a video also ran into some unexpected behaviors so I want to talk about it came from f the question is why does this work I don't think this should have worked but the behavior was unintuitive so I wanted to talk a bit about it what's Happening Here is we're using a ref to keep track of what the value was before but by the looks of this this should not work we'll get back to Theo yapping in a second but first we need to hear from today's sponsor epic react by keny dods today's sponsor is a tutorial and I know that that's not you usually my thing but I promise this one is even more different than me first off Kent dods made it he's a legend he's a huge part of How I Learned react and he's going to help you get really really good at it everything new for react 19 and everything you ever had to learn before doesn't matter if you're new to react or you used it for years there's cool stuff here but this isn't your usual tutorial it's not like a page you go through and copy paste code it from nor is it some built-in crappy editor in your browser when you get started you actually clone a repo and run it locally in your editor and the whole Workshop is done through Local Host through that codebase you're running on your system and it's not like you're alone in this either you can see all the other people who are currently doing these lessons with you as well as join Discord and chat with them ask them questions ask them how they're solving things all the code that is for the workshop is in my editor so I'm using my tools of choice I don't have to learn a bunch of weird new janky stuff it's very very different and I am blown away with the quality of what Kent has created here it feels much more like a real work environment where we're pushing each other to learn instead of the usual ual wall of text telling me how I should do the thing by the way if you work at a company that uses react you probably shouldn't pay for this course yourself get them to pay for it for you Kent even wrote a letter that you can copy paste to your boss asking them for it we'll be sure to link this in the description too so what are you waiting for level up your react skills today with epic react check them out now at soy. Link epic react so let's do a simpler example this time we're going to use count so we have a count button when you click the count goes up and we want previous to be one behind it's a very easy way do this we can do that but let's say count isn't that simple and we actually want to store the previous value the the code that we had there I'll rewrite it quick would have been like the following we have a use effect that runs whenever count changes but more importantly we need to also store the previous count so let's do that we'll say const previous equals use ref number and we'll start with negative 1 just to make it a little easier to manage and now in here previous current equals count and now if I render previous do current it works which is in my opinion quite unintuitive the reason this is working is a bit confusing at first so hear me out this works because of the order that things run and react the first thing that's happening is the state is changing so count goes up by one when count goes up by one this component reruns so it goes through these lines of code and then it generates a return the important thing to note is that the effect runs after so if I was to console.log and here we'll say updating with count but below here I always to say console. log rendering with count I might have to open up console the traditional way to see this which it was an easier way in here to do that but we'll rock with it now you'll see when I update that rendering with nine happens before updating with nine does because in react effects run after the render runs so the state change runs then the render runs the reason for that is to make sure the user sees the change as quickly as possible then the effect runs because this is what your new state should change elsewhere in your application if you wanted the set count to change everything at once you could do that by in your function where you're calling set count change other things in here let's say I wanted to have previous the boring way I'll do preve set preve then what we could do is in here we can batch the update so we'll set preve to count and we'll set count to be count plus one I'm going to change to say previous ref and we'll paste this to be previous count as just preve and now this updates automatically but ready for something particularly unintuitive what if I move this here now everything is in sync how did putting this here update the ref too I'm going to change this code a little bit which might make it a little bit easier to understand what's happening I'm going to comment that out for now and instead of preve set preve I'm going to make this const force update equals use State I'll just say number Nega 1 or whatever cool so we're going to call force update math random ready for where things get really unintuitive see how the ref is now staying up to date the reason for that is because of again that order of events remember the first thing that happens is the state changed then we generate this response then we run the effect the difference here is that when we call force update we're triggering another state change which then triggers another render which is why in this case with just this force update we have now made this current because in reality previous do current isn't the previous value the only time previous as a ref is actually the old value is between the render and the effect running so the first thing the state changes then we run this and since the ref was already bound it renders with the old value then the effect runs updating the ref to the current value but at almost all times pre previous isn't actually previous it is actually the current value and I can prove that by in here we can console.log uh previous is previous do current and now if I open up the console again you'll see previous is 10 even though its previous ref is nine refs don't trigger render updates generally speaking rendering refs is bad good point from chat rendering refs almost always results in unintuitive behavior and I would recommend to not render refs generally speaking unless you have a specific reason I would avoid using refs I mentioned the order of events is what's confusing here because the state changes then this runs then the use effect runs but if you get the right result why does it matter because this works I'll show you let's say we have another button and on this button we uh log current state so on this button we'll onclick equals and we're going to log some stuff first we're going to log current is Count then we're going to log previous is previous do current current is just on a ref how you access whatever the current value is so to speak so we're going to rerun this and now when I click that it does the same behavior watch happens when I log the state current is for previous is four see what happened there since the render occurred before the the effect previous do current is actually the same value as count but when it renders it wasn't so the state changes the result is rendered then this runs which means that what you're seeing in the UI is out of date and when I hit log current state this is what the current values are if I used react debug Dev tools you would see the same thing this is the problem with the solution is that previous isn't actually the previous value it only was the previous value during render it no longer is after the render State change then render then effect but that means with the ref no State change occurs so no render occurs after the way I would write this code it's a little bit different I wouldn't have the previous set in the on click like I did there I would want it to always be bound there's a few ways we could do that the way I would probably do it would look like this comment that out put this here make this negative one again I still do want the use effect though so let me actually bring that back I'll rewrite it for you guys use effect count so this always runs on count and I could set preve here but that's not going to do anything for us I'm going to comment that out and put this back in because now it's always triggering that render so we start with zero for this use State we render this with the count at zero then this use effect fires because this fires whenever the component renders initially or count changes so that fires we set preve to count which overrides the the ne 1 and then this gets rendered again but this time preve is zero we run this return generate the new results and then the effect doesn't run because count didn't change but we don't want this to be the current we want this to be previous and we want it to always be the previous value so I something that for us react nerds makes sense but to everybody else might be a little confusing I'm going to return this call as a function and now it works why the hell does that work the reason that this works is because the return runs at a different step in the process so remember first the state changes then this runs then this runs there's an exception here when the state changes if it affects any effects because let's say count went from 0 to one if you returned something in an effect bound to count this return function will run if there is one this is a cleanup so we can console.log effect running for count and then in here console.log cleaning up for count so again we open up the console and what you will see is that every time the number changes it runs the clean up for that number and then it reruns the effect with the new number if I was to console log below here rendering for count you'll see that when I update this effect running for 14 and then it renders for 14 twice because it renders twice in Dev mode but that's after the cleanup so the order of events is it renders for the current value it chills but when you update the value it runs the cleanup for the old value before doing anything else so we run this cleanup just by increasing State increasing this count the first thing that happens is this runs then it renders this then it runs this technically these all happen at the same time so to speak but it doesn't actually doesn't matter these are very very close but you get the idea I got a bunch of questions about use layout effect so I want to show that that doesn't work cuz honestly this was unintuitive for me as well so I just switch this to use layout effect if you're not familiar use layout effect can hurt performance because it runs before the browser repaints the screen so if you wanted to do something like apply some CSS rule or tell the page to zoom in or transform for things like that where you specifically want to change the context of the Dom or do something to the page before the render starts use layout effect lets you do that what it doesn't do is run before the render so if the order of events again I've repeat this 100 times is State change then render then effect there is technically One Step that I was leaving out which is when what you do here actually appears in the browser so if first we run this to get the new state then we run this to generate the new HTML use effect happens One Step later which is after this is rendered after this is generated we then put it in the browser then the use effect runs use layout effect doesn't run before this return happens it runs between this return happening and the browser seeing the change so if I was to do this this way it's still going to be out of date by one because the HTML that was generated is out of date unintuitive I know but use layout effect is a very Niche thing and it does not apply to this case so how should we do this then well I'll show you let's say you want to make this a custom hook say you want function use previous and this takes in some value T so we want to return whatever this is but what it was previously what I would do use State T of value const preve set preve equals that and then we can move this effect up to here change count to value and then return preve now we have this use previous hook cons preve equals use previous count and look at that that easy again reacts weird use effects are not the easiest thing to understand I'm not going to sit here and pretend they are but thankfully most of them can be abstracted away into something like this my general rule for use effect in a code base is that it should be in a custom hook like this that describes exactly what it's doing because it makes these behaviors much more intuitive to understand if I just saw this use effect I would know what it's doing but it might take me a second to be sure but just by putting it inside of a custom hook with a name it's much clearer and you can also grab this custom Hook from a lot of hook libraries like hooks GitHub I know there's a collection of them yeah there's awesome react hooks there's react use and these are just libraries of a lot of these types of things like use Mouse use Mouse wheel use Network state I'm sure that previous is in here yep use previous Returns the previous state or props if we click here we can see look at that very familiar looking hilariously so even if we go to the source code for it I bet it'll be even funnier use previous they're using a ref oh that's actually hilarious full circle ow I took some soul damage from that ah anyways hopefully this helps you guys understand a little bit more about the chaos of react and use effect you take anything from me should be to use references like react use or um use hooks.com let's see if their used previous is any better cool here we are use previous look at that UI dodev got it right as always UI dodev is not just a great resource for learning react stuff but it's also one of the few that gets this correct good stuff and not even using an effect isn't that nice the benefit of not using an effect here by the way is that you won't ever get the wrong render so to speak because technically speaking with this solution there's a use effect running that interrupts a render by doing it in that state call you're batching it as one call so when you call multiple use States or things like it before render happens they get put into one change set so to speak and then it renders the result after so if you have an effect this interrupts the render process if you have multiple State calls it is ConEd within one render bit hard to follow let me know if you want a full breakdown of react rendering process cuz it's a a bit much but yeah it's not too hard to write this hook correctly or to grab someone else's source code for the same thing oh I just realized this isn't type safe so as much as I love UI dodev RP turns out I was wrong about the type definitions use previous has as types defined in index. D TS so there is a file that defines all the types it's just not the actual original source code totally fine this Project's probably old this is the way we used to do things now you just write the type script code and compile out the results teach their own hopefully this help you write an actually use previous hook if you can react query doesn't necessarily solve this specific problem but it solves a lot of things like it you should check react query out as well I got nothing else let me know what you guys think and until next time peace




## Unity Finally Acknowledged Their Mistakes - 20230922
I actually really like the changes Unity just announced I know it's currently like heat crap on Unity moment I fully understand it is beyond irresponsible and harmful and permanently brand Imaging to do what Unity did last week if you haven't already heard about it I'll pin my video in the descriptions somewhere so you can go check that out if you haven't the runtime fee that Unity plan to introduce to all Unity users at a certain Revenue threshold was horrifying and would have put many businesses out of business which is why I'm actually really impressed with the changes they announced today it's clear they have listened they understand and they want to fix the wrong done here whether or not we can trust them going forward is a whole separate conversation but I want to focus on the changes they announced today and how they've restored a lot of my trust in the unity brand engine and honestly how these things are better than a lot of the competition in the industry let's Dive Right In An Open Letter to our community you might have noticed that this article isn't by the CEO it's actually by Mark Whitten he's the lead of unity create which is the team at Unity that contains the entire engine and a lot of the community stuff too so I do think he's actually one of the better people to respond here because he's deep in the trenches is and understands these things better than almost anyone else the company after watching the live stream you just did I'm relatively confident that he understands the space pretty well so obviously they're opening with an apology and honestly I think this is pretty sincere specifically calling out the things they should have done better they should have spoken with more people and Incorporated more feedback before announcing the new runtime fee policy he even said this on the stream that they had gotten feedback and not implemented which was a huge mistake on their behalf he owned it they understand it and they're making significant changes to help here the first really big one and I'm pretty hyped about this they've bumped the cap or Unity personal which is three-tier of unity so that you will not have to feed any fees or any cost until you've made over two hundred thousand dollars of Revenue on that game it will also remove the requirement to have the made in unity splash screen at the beginning this is one of the main reasons people upgrade so their game doesn't have to start with the big made in unity screen before going into the game this I I really did not expect this change and it's awesome to know that they're embracing smaller teams desires to not have a game that feels like a hack of fun project with the big made in unity Splash at the beginning this it's a small symbol but also shows both that Unity knows where they're positioned in the market which is everyone knows about their engine they don't need to show off that this is their engine in the front of every game and also that this is a Thing game developers don't love and getting rid of it in the free tier is just a really nice good faith Builder they also specify here that no game with us in a million in Revenue over a 12-month window will be subjected to any of the new fees that's a big deal a million in rev per year is sizable it's not massive like that would comfortably fund a five-person team but barely and when you consider all the other fees and costs marketing all of that a million a year is still a pretty small Studio regardless for them to not to pay any fees to Unity Beyond the Sea cost is a nice change for Unity prone Enterprise they're also making significant changes first and foremost the fee has been moved to only affect the next version of unity shipping next year so if you stay on the current version of unity if you're working on projects that you choose to not upgrade you will not be affected by these fee changes at all that's a huge deal and I expect a lot of developers are going to stay on an old version because of this but now they have an incentive to make the next version even better Unity now more than ever before has a fire under their asses to make Unity great and if they want to make the additional revenue of these changes they're going to have to convince people to upgrade and that's not trivial they're going to have to put a lot of effort into making the next version of unity great and I think that will help incentivize them to make something incredible they were very strong about this here sadly bold text does not make a legal statement and I do think they need to bring back that open source GitHub with all of their terms of service stuff and the history of the changes deleting that is super sketchy especially since they made changes right before all of this where they had removed parts of the policy that would have prevented the pricing hell that they started last week so I do hope that GitHub comes back I do hope there are more interesting conversations there judging from the fact that Mark went on another game devs live stream to talk about all this I have relatively High hope this is probably the biggest deal they offered an alternative to the runtime fee model the runtime fees make a lot of sense for paid games you're making a game for kids or you're doing free to play and you're still figuring out how to make money on it's a lot of those types of situations where those runtime fees can get really scary really fast however if you're charging 20 or 40 dollars for an install of your game the model makes a lot more sense and when I first saw this number that 2.5 percent I had to think deeply about where the species live in the market because epics Unreal Engine Revenue split is five percent so if you use Unreal Engine and you hit a certain threshold of Revenue I believe it's a million a year as well you will be charged a five percent Revenue split from that point forward on all new Revenue made this is all self-reporting which I like Unity is also doing Unity isn't expecting their own tracking software to generate these numbers for them they actually want you to report once you hit these Revenue thresholds this allows for an actual back and forth to happen between the developers and unity to make sure this is a fair shake and that they're not just randomly going to receive a million plus dollar bill I also like this allows for different game studios with different methods of monetization to make the right decision for their game since the runtime install fee is 20 cents that 2.5 percent Revenue share isn't going to be appealing to games at a certain price threshold since the runtime fee starts at 20 cents that's the equivalent of an eight dollar game purchase with the 2.5 fee so if your game on average sells for more than eight dollars you can choose the 2.5 Revenue split but if your game is free to play has micro transactions or those types of things you absolutely want to go with the revenue split instead of the runtime fees I think this is a really good opportunity for different game developers to make a decision based on how they are planning to monetize I think this is the biggest problem Unity ran into not only are they targeting different types of game devs be it a small Studio making a mobile game or a giant studio trying to take over the world they're also targeting film and architecture in all these other spaces and most of these spaces don't ever have to worry about the runtime fee their goal here was to better their financial positioning in the gaming Market without significantly impacting the other markets they're in the into the spider-verse movies are made with unity and they're paying the seat fees but since they're not having users install the game so to speak when they're watching the movie they would never have to pay this runtime fee I can sympathize with the struggle here these are very different markets to Target with one game engine in one pricing model and I think the flexibility here helps allow this engine to work in these different scenarios the pricing model for into the spider-verse is not going to work for a small Studio making small games and it seems like the flexibility here is starting to recognize it as well as moving the bar for when you have to worry much further with the two hundred thousand dollar in one million dollar caps this makes a lot of sense to me I'm actually really pumped with the way they've made these changes this continues to make Unity One of the if not the cheapest major game at gen 1 compared to I guess unreal is the only real option when you look at Unreal Engine you look at Unity uni is actually significantly cheaper if your game is 20 or more dollars and you choose to go the runtime fee Direction you're effectively paying a one percent fee compared to the five percent you'd be paying with Unreal Engine so again depending on how you choose to monetize your game you have two really compelling options and in some models the run time fees would have put a company underwater over 200 of the revenue you never have to worry about that if you pick this 2.5 percent there's effectively no way to bankrupt Yourself by going with this option and it makes doing the math and figuring out your budgets going through forward significantly easier I'm genuinely relieved to see these changes come out I might not be the biggest fan of unity either the engine or the company but I am a huge fan of a lot of games made on Unity my favorite game of all time outer Wilds was built on top of unity and there are many others that I love that have been made and will be made in the future using this engine the amount of damage this could have done to the entire game industry is surreal and because we all pushed back because the community rallied around this issue we were able to prevent this change from going through it's awesome to see the power of the Game Dev Community I've never seen it come out as strong as it did in this time I've never seen the average gamer care so much about the needs of game developers and I hope we can maintain this going forward Game Dev is one of the least rewarding fields in the world not even just within software which without question Game Dev is the least rewarding software development field it is important to recognize how hard it is to find success in this field and I'm really tired of the culture of ignoring and even on game developers for the hard work that they're doing this is an opportunity for our entire industry to unite and fight four game devs going forward so they can keep making incredible world-changing pieces of art I will always be a gamer deep in my heart thank you to all of the developers to all of the community and to everyone who pushed back on these changes and thank you to Unity for listening hearing us out and doing the right thing for gaming appreciate you all as always if you want to hear me complaining about game engines more I'll paint a video in the corner there thank you again peace nerds




## Upcoming JS Features You Need To Know - 20241018
it's been a bit of a crazy week for JavaScript you might have already seen my video about Str which brings the best of memory safe languages like rust into JS or my video about JS sugar sljs Z the weird splitting of the language but there's also a bunch of other cool new features that were talked about in this legendary tc39 meeting it's one of the most productive I've ever seen in terms of the good bad ugly and all these cool features that are moving along a lot of things just made it to stage 4 and it is time to cover what the future of JS is likely going to look like most of these features are ready to go many will be in the browser by the end of the year the rest will be coming soon after and a bunch that might come out eventually might not but all of them are really interesting I think most are worth talking about and I can't wait to show you guys the crazy crazy results just look at how many tabs I have open here of all these cool new features sorry for the runtime of this video I promise it's worth it do you know what else is worth it quick word from today's sponsor the thought of an AI tool that reviews your code for you wasn't particularly exciting to me until I learned two important details first it's really cheap and if you're open source it's fully free and second much more importantly reviews are actually good I could tell you all about it but instead I'm going to show you here's a real PR I recently filed for my tool marker thing for managing markers for my filming I added some tagging and auto filtering features really quickly last night before going to bed and not only did they summarize the change for me they actually caught some mistakes that I was surprised by they make reactor suggestions which are good this was some I'll be honest code that was generated by Claude so the fact they called it out and showed me a much better way to write it actually quite nice I'm probably going to make that move that's cool and all but what about actual mistakes this tool is built to generate markers for me including my YouTube chapters but when I refactored it I actually screwed up the code for the chapters and somehow they were able to correctly identify that the format was incorrect that I had the label before the timestamp which doesn't work so they corrected it here and gave me a oneclick auto commit button that I used that's why it's gray out in the GitHub UI they provided the fix and a button to Auto apply it what it was just my small side project that's one thing but here is them being similarly useful in actual code this is a funny one where they called out that Internet Explorer 11's deprecated we should probably stop supporting it and they even gave us an auto apply diff and kick started a conversation between my team here is them catching a typo and giving you one click to automatically fix it it's real useful stuff the types of nitpicky crap that you're tired of finding in reviews they just do it for you and you can be rude to them too cuz they're a robot not a real person they have changed how I do code reviews and they might change it for y'all as well go give code rabbit. shot I've been super super impressed thank you to code rabbit for sponsoring today's video Rob Palmer as always has done a great job of covering all the things going on and trying their best to break it down on Twitter but I've already taken all of these and pulled up the official proposals there are some fun things in here array zip is very fun I believe it got Advanced to two if I recall yeah all of the a up arrows mean that it is going up a stage so aray zip despite not having it called out here is now at stage two one of the cool features coming to iterators which are the less adopted but more powerful way to iterate through things in JavaScript is zip which lets you take two arrays and create tupal pairing values from it curious if we do the zip key I just want to see what the results look like here oh that's actually kind of cool so what this allows you to do is take multiple arrays and then group values of the same index into separate things like here we grouped 0 Z which a has zero B is 3 C has 7 so we get those values there then uh index one is 1 4 and 8 so we get that index 2 is 259 so we get that or and then the final index gets undefined 6 10 where' the 10 come from we have this padding at the end which allows us to pad out any values that are past the buffer if we want to go further so you can pad C values with your own default once you get past the length is also is because mode longest was called so that's why we get the undefined for a there if you don't specify modes instead what you will get is it cuts off at whatever the shortest is so you won't have this uh six encoded anywhere because it cuts off because the shortest only has three keys the important thing to see here is this iterator do zip call because iterators have this arrays don't in this proposal is adding this to arrays specifically because no one uses iterators they call it out here despite iterators existing for over a decade it's exceedingly common to use and prefer arrays over iterators especially for small finite lists yeah man I'm going to use the out of this and I haven't to code now that I think about it it's going to be a fun one yeah so array zip is cool for zipping two arrays together nice extractor objects Fu Y equals X Fu Y is X N radius structuring very interesting ecmascript has no mechanism for executing userdefined logic during destructuring which means that operations related to data validation and transformation may require multiple statements yeah so two instant if you pass a value and you want to make sure it's the right then we have to do all these checks we have to see if it's an instant then we just return it directly if not we check if it's a date then we can transform it if it's a string we handle it otherwise we throw an error you have to write this yourself and now you can't destructure to do it so we have book Constructor this that created at is to instant created at and some effort duplicated if modified at was undefined with extractors such validation and transformation logic can be encapsulated and reused inside of The Binding pattern so you have a custom matcher interesting this allows us to Define custom matcher that will dump values so created at an instance extractor created at and we make sure that's temporal now inst an extractor created at is what it's matched to interesting it's also enum coming to the standard or the browser standard soon that's going to not cause any problems at all I'm sure oh boy match X when option Su when option none I do love me some pattern matching the structuring option sum Y is X this is really fun syntax this is what I'm excited about is you can destructure by calling a function and get this value so it's like writing a custom D structurer so so we've all done this code before const state or like count set count typing hard equals use state zero what if we wanted to transform count in some way what if we wanted these to start as numbers but we want them to be strings what this would allow us to do is like a extractor do2 string wrap this and now this functionality gets called during the destructuring before these values get set that is kind of cool the ability to in your syntax like this destructure what I don't love is it breaks my mental mapping of const thing the fact that cons can be a function call as the definition now feels really weird to me like what I would expect and what we've all done at some point is something like this but this would require you running it on all of the outputs here when you only want the values that you've destructured so very interesting I can see a lot of potential values to this pattern yeah let food a c equal that assignment parentheses are used instead of square brackets for several reasons it avoids collision with element access expression it is interesting that it's like a function is how we call it and Sh consistent syntax between binding and assignment this is a weird one I see the benefits you could also object D structure the same way potential win here for sure weirder feeling one people in chat saying crazy how they're just turning Js into rust basically rust but Messier yall know better than me this one's going to be mixed for sure apparently aay Z was actually stage negative one and the results going to be it lands on 1 two or 2.7 I don't know if those results have been posted yet but it's being bumped almost certainly let's go into more fun ones here we have decimal built in exact decimal numbers for JavaScript we will finally solve the 0.1 plus 0.2 equal 0.3 once and for all wouldn't that be wonderful the Precision is specified once you pass it the value it will stay that Precision historically JS may not have been considered a language where exact decimal numbers are even representable to say nothing of doing exact calculations some application architectures JS only deals with string representations of a human readable decimal quantity like 1.25 as a string it never does calculations or conversions but several Trends push towards js's deeper involvement with decimal quantities like 0.1 plus 0.2 equal 0.3 crazy more complicated front end architectures like rounding localization other presentational aspects may be performed on the front end for better interactive performance serverless systems use JS as a programming language in order to better leverage the knowledge of front and devs serverside programming injs also benefits with things like node and doo yeah and all of those would benefit from having decimals cool hopefully I have to convince you guys that having decimals is a good thing strs which I already mentioned I have a whole video about check that out because unsafe in JavaScript and struct and having these tyes of closures that basically turn us into rust has potential to make JS one of the best multi-threaded languages available definitely check this out I'm quite excited iterator chunking there's been a lot of methods added to iterator recently and chunking is one of the cooler ones for share as a person who writes a lot of Elixir or wrote a lot of Elixir this stuff is really really cool if you take an iterator which you get here by calling an array. values that creates an iterator for it digits. chunks allows you now to split it up in whatever size of groups you want for chunking up work chunking up flows chunking up your data Advent of code got so much easier if this ships this is going to make my life way way better I want this bad please please give us this also like column in Grid layouts when you change the number of things in a grid I just realized how much this is going to help a bunch of things in doing a pick thing yeah I want this bad please give me chunks originally uper now it's in place in place stage two update so this is still in stage two it's people from GoDaddy which is interesting adding an updating values of a map are tasks that developers often perform in conjunction there are currently no map prototype methods for either of those two things let alone a method that does both interesting so this is you I do this all the time like if the map doesn't have the key you set it otherwise you grab it and do the thing this is super common now map. in place key in insert value so this is if it doesn't already exist we'll insert it and then we do the thing this makes the Syntax for this type of thing a little less clear but a lot more powerful update or insert you can have different functions for those two things just insert if missing previously you'd have to do the two lookups now it's just one good as a person who's been pushing map really hard forever I have a short from like over two years ago where I was saying stop using objects and use maps more these things are huge huge for that yeah not having to do two lookups each time and just being able to do it as one call very nice change I will use this a lot if they do it don't love the syntax love the concept is error oh boy this is a fun one I believe this got pretty far yeah that's up for stage 2.7 which is the weird in between stage where things are ready to start being implemented but aren't quite ready perfect spec-wise just like feel free to add this to your like compilers now brought up concerns to the committee about symbol that two- string tag and how previously reliable and unspoof object of two- string calls would now no longer be reliable the committee consensus was that as long as there were prototype methods for all built-ins that at the least through an error when an internal slot was not present that would be sufficient to serve as a reliable branding test this is so so you know when you get an error that it's actually the the right error or tagged properly to make sure the the thing you're processing is what you actually expect that's less less reliable with symbol. two string tag which would allow you to update an object's two string call directly the internal slot for error instances and sub classes is only checked in object. two string itself leaving no possible reliable test in a world where symbol. two string tag exists instance of error of course is unreliable because it will provide a false negative with a cross realm like from an iframe or from a node VM module error instance yeah this is a big deal you can't just rely on instance of error because there are other places where an error comes from where it will no longer be a proper error instance so you need a way to check that is reliable The Proposal here is error dot is error you can pass it an error to and know if it's actually an error or not it's useful for debugging serialization structured cloning which is actually a big one you get lots of weird errors when you're cloning things in the browser knowing that you're getting native errors is huge centralized error collection reporting errors from an if frame with the same origin to a top frame where all errors are collected evaluated and reported to a personalized server to be investigated at a later time however a throw statement can throw any exception with an unknown type of data the verification is required for the data to be collected the thrown data instance of error doesn't satisfy error because it the thrown error will inherit the error instance of another realm in this case where the iframe was from meaning content window. error is the abstraction in Throne data instance yeah that's so messy you have to call like if you have content window from the iframe you have to use that finding to check if something's actually an error the yeah having error. is error actually no sounds nice I was hoping this would do more for like knowing what type of error and being able to be stricter with that people are asking what a realm is I don't got enough time to explain that one the tldr is it is a place that is running JavaScript that is not your specific JS instance be it a worker be it an explicit realm or the shadow realm which I think I filmed the video with that a while ago I've thought about it enough that I have if frames stuff like that async context this is another fun one that is just an update so it's not advancing but they're giving an update on where it's at so far the goal with async context is to make it easier to control things within async environment when writing synchronous JS code reasonable expectation from devs is that values are consistently available over the life of the synchronous execution these values may be passed explicitly like as a parameter or some nested function or a closed over variable or implicitly like they're pulled from the call stack from outside of scope so you define it outside then you call it inside here explicitly pass the value to a function via parameter so explicit value now you have that when you call that function you can capture by the closure so in this closure assert do equals it will you'll have access as long as the closure exists so now if we pass this closure function out the values will still be there you can implicitly propagate via shared references to external variables so this try finally means that these things exist in this context the values available for as long as the shared reference is set in this case for as long as the synchronous execution of the try finally code as long as this is going on these values will still exist all make sense so far as Synco we syntax improved the ergonomics of writing a synchronous JS it allow devs to think of a synchronous code in terms of synchronous code the behavior of the event Loop executing the code Remains the Same as in the a promise chain however passing code through the event Loop loses implicit information from the call site because we end up replacing the call stack in the case of asyn we syntax the loss of implicit callsite information becomes invisible due to the visual similarity to synchronous code so here we have this async implementation and since we are awaiting nothing here the shared reference has been reset to undefined so shared. key died because it came from a different context and now we've lost it because it was thrown out interesting this this is common in callback style code where you would Define a function that access the value that value could get cleaned up and the code could run I really hope they're not going to try and bring ver back here so here's their proposed solution asent context is designed as a value store for context propagation across logically connected sync and async code so we have a variable that we call async context. variable for and now we access it with Setters and Getters instead async v. run interesting async context variable runs can be nested so we can run for B and then run another one inside of here Asing v.g get to get the value and then a timeout that does it again after very interesting you can also snapshot all of the current variables at any point if you want to keep them so you capture the state of all of the variables that exist in this context in this moment very interesting it feels like there's a lot of work to figure out how to share values between async stuff in JS right now definitely check this one out if you're curious interesting span asyn of.get span. end time is date. now where does this end function this is being exported so we call Tracer do end at the end here after the Tracer do run very interesting and when you explicitly call end that's when the memory gets freed up run and end don't share the same lexical scope with actual code functions and they are capable of async re-entrance thus capable of concurrent multi tracking very interesting I see a lot of potential here it's a weird syntax I'm curious to see what they end up doing with that next shout out phas my editor esm phase Imports so Lucas one of the champions of this one works at dino very interesting the goal is to allow you to import source code to a worker if you didn't already know this workers need to take either source code or a file that is source code you can't just pass it a module and have it execute you can just pass something you imported so what you have to do when you're using a worker is you'd create a URL to a specific JS file relative to import meta URL you would pass that to the worker to instantiate it obnoxious you have to do all of this work just to instantiate these workers and this also is nearly impossible to do static analysis for because you can pass a worker URL somewhere like this so now you don't actually know what bundles are being used in what places which makes compiling this awful The Proposal is that you can import Source instead of just importing a module you can import the source for it and you can pass that to something like a worker or something like a wasum instance this lets you move things around in particular for wasum this is huge because you can import the source for a wasm thing and then pass it to three workers at once and actually analyze this at a code level I thought they had a wasum call out here did they not I thought this was specifically about WM my bad there I don't know why I thought that but being able to import The Source from something and past that instead of using these weird URL strings this is a huge win and will allow for things to be much more optimized by compilers in the future not surprising Dino are the ones pushing this because it benefits them in their compilation but it's weird we'll see where it goes here's one I'm really excited about promise. try and it's done it's so done that the repo is now archived because it's officially part of the standards hype promised to try is complete in its 8-year Journey it's achieved stage four in tc39 huge so exciting so what is promise. TR let's take a look at the examples so the thing to care about here like why this is cool is when you call promise. try it's going to call the Rejection case for the promise you know how you can do do then or catch on a promise this let you take something synchronous that might fail and might not and reject or resolve the promise accordingly so you don't have to build your own weird shim when working in a promise when you're calling something that might error anymore now that shim is part of the promise syntax itself this is actually really useful when you're calling things that might fail as part of a promise and you want to be able to catch that as part of the promise syntax going up for racing stuff really really cool dope that this is finally officially web standards I know Jordan's been working hard for a long time to get this one pushed and we're finally there there's even a spec compliant shim which means you can call promise. TR function throw do catch and it works that's so nice I can see this being really useful A++ great work Jordan hyped that one finally made it been waiting for a while another one that made it iterator helpers I covered these so much in my last standards video I been wanting these forever now there are better ways to iterate over iterators so you can do something like called do filter and now when we're iterating we'll skip all of the options in this example that aren't even numbers so we'll skip when we call result. next 02 4 and it will skip values and go to the next one when you call that next there's a ton of these awesome new things being included in the iterator helpers I am so happy these are now standard and have made it into the browser Rex modifiers everyone's favorite this one also is now stage four not archived yet which is interesting but all things Rex tend to be interesting these are pattern modifiers for Rex common capabilities amongst the majority of regular expression engines is that commonly used by parsers synx highlighters and other tools is the capability to control a subset of regular expression Flags like ignore case multi-line single line extend mode modifiers are especially helpful when regular expressions are defined in a context where executable code cannot be evaluated like a Json configuration file or textmate TM language grammar files we'll investigate each existing and future proposed Rex flag to determine whether they are feasible to be used as modifiers so the goal here is to let you write modifiers as part of the syntax here which I'm assuming is this guy yeah the question mark - I that's a modifier that controls these other flags within a partial context in a Rex I don't get paid enough to talk about reex we're go to the next one temporal everyone's favorite temporal is making real progress what is called out here any advancing of the stage no yeah temporal is a crazy standard see all of the things changing in it constantly they're working hard to make the best way to use date time in the browser yall have already seen me talk about this a whole bunch if you haven't go to my last JS updates video this one has 3,000 commits in it I believe yeah 3,717 commits they're working hard on this one more than almost any other so I'm excited for this to finally get to stage 4 and be in the browser date times might suck a lot less coming soon what was the other Imports oh esm phase Imports okay that's why I was confused earlier there's esm phase Imports which are allowing you to get the source for an esm module but the other proposal that was very similar is Source phase Imports this is the other one I was thinking of Lucas also involved in this one and this allows you to import all sorts of things in particular this lets you import wasm bindings and wasm binaries in a way that you can load them elsewhere so here we are getting Con X to be import. Source this isn't a module that I can just call I can't call X do whatever this is now the source that I have to load Lo in so to contrast from earlier here's a cool wasm example import Source Fu module from F.W Fu modules and instance of web assembly. module awesome now when we load Wy which is a different execution solution for calling wasm stuff with an API similar to nodes Wy I can now pass it this source that I imported specifically Fu module and we see that here with Fu instance is wait await web assembly. instantiate Fu module with the wasi snapshot preview coming from the was import this allows us to import and then later on dynamically instantiate a web assembly instance using that previous import this is huge instead of having to do some weird custom fetching and compile streaming steps in order to get this data later it can just be part of your import graph real nice change and I see why again the doo team really wants these things I'm excited for a future where we can use these to do all sorts of cool stuff with WM without the syntax being hellish one last one CU you were asking about it import defer very exciting allows you to import later on when you need to instead of importing immediately so we have the ability to await import which is cool but it doesn't always solve the deferral of execution problem since as to send a network request in such a scenario which would be a performance regression and not an improvement a separate Network pre-loading step would therefore still be desirable but we wouldn't want to prioritize this if operations is only needed when this function is run we shouldn't block other Imports on it we should be able to defer this import to happen as soon as everything else is done but not only happen when you run the function which is a really cool change where we can import defer something instead which says hey I'm going to use this later get it to me when you can real nice somebody asked about attributes before people get mad at me import attributes and Json modules are now stage four these are fun import attributes let you specify something like with type Json and now when you import it you have more data and that will specify what you're importing which allows you for your environment to be smarter about the things you importing the important detail here is it would be possible for somebody to replace food. Json with JS code that gets executed which is really dangerous that's why with type Json is really valuable because it means that the import can now be smart enough and only allow for the thing you asked for which in this case is Json and obviously that comes with Json modules which allow you to import Json directly in Java script and know it's actually going to be Json once it's imported this one I think stage four now right yeah though these are being put up for stage 4 I don't know if they made it or not but very likely great changes excited for all of these I think that's everything there was a lot here a couple things I didn't cover because they're Way Beyond my pay grade and I'm curious how y'all feel about this it has been a wild week for JavaScript and it looks like the future is going to be really cool too as long as the JS sugar thing doesn't happen but uh yeah that's all I got and until next time peace nerds




## Using AI To Code Better_ ChatGPT and Copilot change everything - 20221204
oh no the AI it's coming for our jobs it's going to ruin programming competitions it's going to destroy the whole software Dev world or is it let's talk about it so y'all might have seen this new chat GPT thing it seems to have taken over the entire internet and in particular the entirety of my Twitter feed and I'm getting a lot of questions I'm seeing a lot of concerns a lot of excitement and honestly after playing with it starting to understand why some of the examples I have seen are nuts things as crazy as converting a PHP app to next.js just by pasting the code and telling GPT to do it I've been incredibly impressed but I'm also incredibly impressed with copilot I think that a lot of these tools are going to change How We Do development I don't think they're going to take away the need for developers though let's take a look at some of what chat gbt can do some of how I use copilot and why I think this is all so interesting right JavaScript code that generates the Fibonacci sequence and here is some code that creates a Fibonacci Sequence an example of how to use it and one of the most interesting things is that it gives you like in-depth descriptions of why it did each of these things and details about them do you know what an AI can't do like and subscribe to a video do you know who can though you likes are free don't tell the robots though buttons right there and it helps the channel out a ton thank you for that back to it but that's just telling it to write some basic JavaScript like the thing you do in an interview cool what about the stuff I do every day like I need to go redo the nav bar on my website with tailwind and react okay uh build me a navigation header for a web page using react typescript and Tailwind the header should have three links one two home one two blog and one to the about page let's start with that it even has an SVG for the home fascinating to use this header you can simply import into your rack component that's nuts shall we go throw this in an app and see how it looks have a stock empty create T3 app template with just Tailwind going to paste in the new header component and we're going to mount it here header that actually looks phenomenal I didn't think it was going to look that good I'm not sure how I feel about the color though let's ask it to change the color for us change the color of theme of the nav bar to be purple it even tells you in the text instruction here change BG gray 800 to BG purple 800. if we find this BG gray 800 see if that's the only one it is purple look at that make the background of the nav bar a gradient I'm just going to copy and you rank this guy I'm very curious how this looks that actually looks really good but what about more specific like math or domain problems what about something like Advent of code which as you all know I'm really into well uh let's go to Advent of code in day one and see if it can solve the problem generate JavaScript code that can complete the following prompt okay let's see this code sample list of calories so this is the sample list I think she has the one two three then four five six seven eight nine has Max calories Max elf for let I zero I is less than calories dot length I also uh I don't reduce so it sums them and if that is higher then it sets the max calories to that value pretty solid let's actually just take my test input and put it in generate an answer to the prompt with the following input sixty seven thousand five eight four is that right nope I'll just tell you that for iPhone day one I can kind of find the answer for Advent of code day two it absolutely can't and I want to show how other tools specifically copilot is able to help me as a developer deliver a solution faster so the problem tldr is you're given this list of numbers you have to sum how many or some the numbers that are grouped so split by these and then figure out what the max sum of one of those groups is so const input equals not smart enough to autocomplete for me oh look at that so do next there so the answer is already in this code base which is going to give this a slight technical Advantage but I just want to say when I did Advent of code and I did this problem and I actually managed to do this problem so fast that I was in the top 200 in the world the reason for that on the hottest day of Advent of code is because copilot carried my ass going to delete all of this and we're going to redo this one from scratch really quick so I can show you just how fast the co-pilot experience lets me move first I need the input so cost input equals and it's already going to auto complete the await for that const grouped equals input.split now I have the two groups so const uh so our group sums equals that's not quite right but from here I can still do a lot uh instead of answers maybe I'll change this to be const uh numbers equals perfect and then return numbers that reduce perfect now I have the group sums uh const Max equals I forgot to close this console.log Max and if I did this right I already have the terminal running there we are that's the answer 72017 cool so that let me solve that insanely quick let's go into part two now though it's okay we actually need the top three elves okay that's annoying thankfully I have this list so cons top three equals look at that const sum equals and then some and if I did that correctly there's the answer and if I look here that is the answer I put there as you can see the skill of copilot isn't necessarily knowing what code is right or wrong although when I got tripped up here during the group sums part that definitely helped the real trick is knowing how to translate what you're looking for into code keys that co-pilot is smart enough to then fill from there it still requires being clever but in a different way I'm not writing clever code I am solving this problem in a clever fashion by giving good names and keywords to uh copilot to then generate code more effectively like when I say kant's top three that's a good hint for the or for copilot to know it needs to generate something based on that or here when it was trying to do something weird with like the strings and sets but I wanted numbers I deleted the code and wrote const numbers and then it was able to do this correctly those are the tricks that make something like copilot so powerful where something like chat GPT almost in versus the dynamic where the code is wrong and then you have to explain to chat GPT how it's wrong and how it should change things and how it could improve from there Copilot almost feels like many Google searches as I'm coding and if it doesn't have the immediate right result I can change the search slightly and then if it does I apply it I really like how copilot shortens the feedback loop as a developer but I'm also really fascinated with how something like chat GPT fundamentally changes where the code comes from in the first place these tools are very interesting but both require you as a developer both to understand the code that's being generated and also be to be frank very careful when you apply that code because it might seem like it's doing the right thing and it just isn't there's a bunch of Clips like this video is going to be eight minutes long but I filmed this for over half an hour where I thought things were working and they weren't and vice versa and just cleaning stuff up that way can often be more work than writing it the correct way yourself all that said the stuff's super exciting if you want more videos about the chaos that is AI right now let me know and I'll get those soon anyways if you liked this please let me know in the comments YouTube thinks you're gonna like whatever video it's putting right there so definitely give that a shot if you like videos like this I hope to film more of them this one wasn't live and that's weird but I wanted to give this a shot let me know what you think peace nerds




## Using Next.js The Wrong Way - 20230727
in case you somehow didn't know I really like nextjs it has made it way easier for me to build both front end and back-end applications I've gotten a bit of pushback for my take that next is a package framework but it by definition is it runs on servers and it returns payloads to users on request it also has some awesome things built in to make it easier to build a front end with that server but next is a server framework it's built to run on servers as a back-end type thing as such we've been using next for a bunch of things that are back-end not just ones that are used on front end I wanted to show off a couple of my use cases for next that are effectively stacking next Taps on top of each other in order to have a good experience for our users and I want to show off how powerful next is as a back-end framework let's take a look this is a small project I worked on called redirect thing tldr I have too many domains on versel and I want to point some of those domains at other things versus gonna have a built-in redirection feature it lets you assign a domain to anything that's deployed on versal but if I want to point it at something else it doesn't make it very easy there's a lot of ways I could have spun up my my own redirect solution but honestly next proved to be a very very simple and quick fix for this all this project does is this middleware file and right now I'm hard coding some URLs because I'm lazy and it's easy and in here we can see that when you go to heyamae.pl or we redirect you to the beta neck stocks if you go to hey I'm April because obviously what Maple wants people to see is the new beta neck site duh and if you go to asphalt supplies it redirects to Ted Cruz's Twitter I hope that's self-explanatory but this is actually a very very quick and easy way to spin up an edge level middleware for redirects it's fantastic it's such a quick and dirty method to spin up a server like this is hard to beat if you're already on versel you're okay with using the infrastructure for stuff this costs 65 cents per million requests it's great another example of misusing next is actually in our upload thing project we do have a package that works in solid start as well but most of our Focus has been the next experience because of how easy it is to integrate into your back end with next so if you were to look at the upload thing code for the server side we actually have a helper here that creates a builder that you serve from your own endpoint so if I go to example code quick here since this is a route.ts file this is now effectively a Json style rest endpoint and we help you expose an endpoint that's hours so if you put a file an API upload thing named route.ts and you export our next route Handler you're now serving our back end in your application this makes life so much easier because now everything is handled like cores all redirects all authentication and authorization behaviors that you might need in your functions it all runs on your back end and that's part of the power of using next wrong so by treating it like a back-end framework you're able to build solutions for other developers that integrate directly with their backend stuff and if we look at how this actually works that's where things get in my opinion really cool because with upload thing we need to generate a pre-signed post URL and we're generating that on our infrastructure and the way we do that is pretty simple so in here once we've authorized your request and got and all your metadata and things after you've started the upload your server will hit our server with a request that we serve on our end very similarly I can even find the code for that quick sorry Mark route in here you grab the API key we split the version I parse it I have no API key throw if the version is too low throw API call version whatever check it and then we call our Handler it's pretty simple backend code like if you've built a back end that has multiple version handlers in the past most of this should look pretty familiar to you we have just a bunch of functions and then my V4 Handler which parses the input if it's not the right shape we return an error otherwise we break it down we convert it we upscale it to the format that we need and we do our work and then we return all the pre-sign post URLs like it's it's just so easy to work in this way and what we've now done here is we have a next app serving an API endpoint you have a next app serving our package now we've stacked next apps in a way that is infinitely scalable because these run on serverless infrastructure and we don't have to worry about these problems anymore it's just so much easier to go write the function that we need expose it as an endpoint we need the data just query the URLs I was showing over here it's such a simple architecture and it's allowed us to move hilariously quickly by treating next as a traditional backend framework in these ways and not relying fully on what client can do we've empowered developers to build much much cooler stuff and almost all of our infrastructure is served through our AP API folder here which makes life significantly easier for us to build maintain authenticate requests and all those types of things in fact we're going to be using upload thing on the upload thing and for repo soon to query against itself we're just stacking next step on top of next app in fact this repo is originally a single mono repo with like four next stops in it because we had the docs which was next we had two example repos one page one app both next and we had the actual infrastructure on next it's such a simple way to spin up an API I just like if I have to spin up a quick Json endpoint I'm using next for it especially if I want to serve it on edge because doing that is as simple as export cost runtime equals Edge now this is served on edge it's great this is how we've been building things at ping for a while now when we have some new need and it doesn't make sense to serve in an application we already have if we can serve it through a serverless next API function we often do we have a bunch of deployments that don't have a front end at all it's just calls like this so don't be scared to treat the tools you use as slightly different from how they're stereotyped because next is a great back-end framework and it does make my life much easier even if I'm only sending Json down from the service it's a bit different from my usual stuff but uh hopefully my way of using next isn't too cursed let me know in the comments how you feel about it if you want to see more about using next the right way I'm sure the video here will tell you a lot more about that thank you as always peace notes




## VS Code Can't Stop Copying Cursor - 20241101
it seems like the GitHub team can't stop thinking about cursor if you haven't kept up with the history here way back in what end of 2021 beginning of 2022 co-pilot was introduced as an AI tool to help us autocomplete our code as we write it and honestly it was revolutionary I was so so skeptical at the time and was surprised how quickly I grew to like it and then eventually love it not co-pilot itself because it was atrociously slow and didn't have the best recommendations when I started trying other models specifically super maven I was blown away at the speed and accuracy of the code it was giving me and then I gave cursor a shot didn't like it went back to vs code then I gave it one last chance and ended up being blown away having now used cursor for quite a bit it is definitely my editor of choice there are things I would change there are things that need to improve especially the speed when compared to something like super Maven but overall it has improved how I write code it has also caused me to cancel my subscription to GitHub co-pilot and it has also resulted in me not using vs code directly because cursor is a fork of vs code GitHub is taking this very seriously they're taking it so seriously that they are putting existing relationships that Microsoft has at Jeopardy in the process one of the big differentiators between cursor and VSS code is that VSS code is built on co-pilot which is built on top of open ai's models cursor has a list of different models you can pick from that's a huge difference because cursor isn't trying to make a perfect model or do all of those things they're just trying to make the user experience of writing code with AI better and GitHub has to catch up and they're taking it very seriously do you know how I know that this is how despite Microsoft's close relationship with open AI GitHub now supports anthropic and Claude and co-pilot it's not a secret that Claude is better at code than open ai's models we have pretty well establish that at this point but for Microsoft and GitHub to be willing to make a change like this and no longer be a full open AI house that means things are about to change Microsoft is no longer betting entirely on open Ai and GitHub isn't either co-pilot has been rethought as a real competitor to cursor before we go any further real quick disclosure I'm an investor in all three companies that I just mentioned about equal across the three of them between super Maven cursor and Microsoft but none of them know I'm making this video none of them are paying me anything to talk about any of this but I do have to get paid so let's quickly hear from today's sponsor post hog post Hog's the all-in-one Suite of product tools you wish you started with I can't tell you how many analytics providers I've used over the past 5 years alone and post Hog's the first one that I honestly stuck with they have a bunch of tools that actually help your products from session replays to feature Flags to surveys yes a good survey product no more Google forms by the way they're open source so you can self-host if you really want to but they're honestly so cheap you probably won't bother also look at this website really quick not this part that's cool this part it's silly but trust me once you start using the product you'll get it their Vibes they're Immaculate that's all I know how to put it as thank you post talk for sponsoring today's video check them out at po hog.com Theo and let them know Theo sent you let's dive in quick thing because it came up in chat and I wasn't clear about it super Maven is using their own model they are just a small extension in your editor but the model is what they're building so super mavens all in on the model cursors all in on the ux co-piloted somewhere between the two and it's not fully committed they do use Claude and open AI for their chat but the actual autocomplete is entirely super maven's model and it flies if I recall the tab 9 founder is the super Maven founder I might be wrong on that but I'm pretty sure this slide broke me I did not expect this in the slightest I thought co-pilot would slowly die on top of the wrong model as I said here this is Monumental the open Ai and Microsoft partnership is starting to crumble people freaked out here and as you see in the replies chbt is not usable for anything coding related when you compare it to Claude it makes sense probably didn't like the little apple stun the S yeah there's a lot of little things I'm sure they're not happy about and Claude is a better model for code what a mess if this was just the models that we were talking about that'd be one thing but they they did a lot of changes here I I hate to do this to you guys and I promise I promise we'll make it as valuable as possible no one should have to watch 50 minutes of GitHub Universe keynote we'll do our best to go through this and chop it down so only the important parts become your problem we're talking about the models so let's start with this bit I am so not excited and finally in phase two we will go from multimodal functionality to multimodal Choice I've never seen a slide from a an established software development business that has this many meaningless terms on it AI infused AI native AI agents conversational coding multimodel functionality and multimodel choice none of these mean a thing I I hate this era I hate this so much it sucks cuz there is actual value in these tools cursor has made my life better Claude has been a great model to work with nothing on this slide means anything if you was saying in chat this feels like they're the you know what I'm going to pull chat up so you guys can hang out with me so I'm not suffering alone with this God God I can't believe we're at this point this is this is straight up from a sitcom go from multimodal functionality to multi model Choice there was a boom of high quality model are these the next steps for these so conversational coding becomes AI agents I hate this I hate every second of this and you know what GitHub is still GitHub we are an open developer platform and developers expect the agency to build with the models that work best for them just the way he enunciated developers there developers developers developers developers developers developers developers developers developers developers developers developers developers developers open developer platform and developers expect the agency to build with the models that work best for them this is just German Steve Balmer with less to say developers developers I so today we deliver just that and we deliver it right here right now can they they say anything real here okay this is they they show you have multiple model choices cool I think the fact that developers have to know the difference between these models and make choices is a fundamental failure in the adoption of these things it reminds me of the era where to use a computer you had to know how a terminal worked the fact that people who are coding or working with these AI models need to know that Claude 3.5 Sonet 104 behaves fundamentally differently then Claude 3.5 Sonet 0415 or whatever the why why in my goddamn editor and I go to curser settings do I have all of these options why is this a thing why okay let's do a poll real quick I'm curious and remember y'all on YouTube seeing this this is a representative group of hard cor nerds that hang out live to watch me talk about software stuff do you know the difference between Claude Sonet and Opus yes me no idea reminder this is an Enthusiast group these are the people who are the most invested and are the most likely to know these things and what the differences are between them we're still at a 62% no idea that's the problem the fact that all of these choices exist is like meme tier also I mentioned before this Cloud 3.5 Sonet is very different from this Cloud 3.5 Sonet because this is using the newest model this is using a slightly older one if it was just in this hidden models setting page that'd be one thing effect that you can provide your own API Keys is just kind of funny but it's not just there when I do command a command K I have a little drop down here where I can change between the different models it is in your face about which of these things you're using this is like like imagine if every time you opened an app on your Mac there was a little drop down that said do you want to use this in zish or bash or if you're on Linux and every time you opened an app it's like do you want to use this in Wayland or zorg these aren't things that people should have to know or give a about and the fact that these abstractions are leaking to the users shows just how early and unprepared this is oh and even Gemini got a little spot but see the difference in how much Gemini got versus anthropic that says a lot we mean it when we say multimodal Choice today lightning strikes twice so we're thrilled to share a partnership with Google bringing Gemini 1.5 Pro to get up co-pilot I don't think I have that option here not that anyone would want it yeah it's not even in here good it it shows again Microsoft doing Microsoft thing like what they actually wanted was anthropic and Sonet but in order to make it not piss off open AI too much like no we support everyone no one wants this nobody wants Gemini except for Google employees what does matter is the changes they're making to vs code um so this is the website that we're going to be working on throughout the day-to-day and building some cool things with it so before I get into oh is that cido cool finally like a human I can trust some amount on stage don't want to think about how much they paid her to do this but yeah to it I'm going to head over to the code who here has used GitHub co-pilot before wow that is awesome that is an embarrassingly small number of hands but to be fair GitHub Universe has a surprisingly small number of devs I was supposed to go today I chose not to because I preferred to record I tried using Gemini and it converted my react app to angular even if that's fake it's funny and you're making my job so much easier for those who haven't used it before that's okay I'm going to show you an example of what it can do so what I could do is I could type aun function get coolest developer in the world and then try to autocomplete it and see what it returns no offense cido that was better it's a small thing but like as I'm typing oh it's already autoc correcting like I probably want to get rid of that cuz it's saw I just deleted things but if I go back to typing it get coolest developer in the world it autocompletes more than just the Open Bracket and also this has been a big thing for me using co-pilot it would often screw up the ends of things so it would miss a semicolon or it would screw it the brackets at the end this doesn't have those problems which is really nice it's still slow compared to what I like with super Maven but it's pretty fast it gives good answers and it doesn't do the weird syntax like open closing that I had a lot of with co-pilot anyways what AI has never lied okay so it does a very very smart autocomplete but you can also use GitHub co-pilot chat so I could highlight this right here and I don't even have to just ask in English I could say in Spanish and then it will explain what this code does in Spanish for me right here in the chat so unironically cool use case this is a thing I think about a lot the fact that to be a successful developer you almost have to know English sucks it's not not just like the resources are in English it's like the languages are in English in JavaScript to define a function you write the English word function to import something you write the English word import code is written in English even if you're not an English speaker and it's sometimes jarring to see English function followed by a Spanish or a German or other languages word but now imagine you're a Dev that doesn't speak native English you know some of these words because you've written enough code but you don't really know them and now you're reading a code base that is complex and you don't know which words are things they defined versus are things that are part of the language and you're struggling to keep up the idea of chat as a way to like understand code that's in a language you aren't familiar with not JavaScript versus python but English versus Spanish is actually a compelling use case I can't believe I have been trolled into saying that co-pilot chat can be useful but this is a good use case as you see in chat Spanish speaker here me and my whole team write code in English and everyone else I know only did it in Spanish and University these are fair points anyways if only we could edit multiple files at once well now we can co-pilot from multifile editing is now available did co-pilot really not have multifile editing before like actually I haven't used it in so long did that actually just not have it I've had that in cursor forever now if I so this is this is an app I was working on it's um building the Pokemon app in the new next patterns uh let's try doing something across files I'm not even going to give it the context I'm just going to open this file that I'm in let's clear everything I have reset it suggest other files I can add let's add an accurate metadata export for every page. TSX file I didn't do anything now it went through and added a metadata export to all of my routes we can look at all the things it changed here here is what it added to each of the different pages and when you look at them here you can actually see behind that I don't even know the H key to minimize because I usually just accept and then go and check the code that it changed after so I'll just do that and now we see it created this with a title a description and open graph nice see how easy that is let's see how they do it in multifile editing and vs code which I I I actually can't believe I didn't have this before so we have this new edit mode right here and what's cool about this new edit mode is first of all I can God the UI is so close that's like insulting it's weird go down here and change the model so I'll choose Claude for this one and oh boy I wonder why you chose CL and then I can say hey can you create a new reusable area graph from our points activity service and it I want it to be displayed below that points activity table and I want it to behave very similarly to the on timeline chart and then of course don't forget to write tests and then we so you have to manually tag the files I've lost all interest here here's what I actually did recently I just want to I'm not going to rep at it perfectly I just want to show you guys an actual thing I did that was uh oh this is really useful for me this is an app I made called quickpi it's really useful for YouTubers and not many other people it's a quick way to convert svgs to pgs at highres to make an image square and somebody else contributed a corner rounder that will round the corners of an image all really useful tools to just have in the browser they don't cost money because they're running in your browser anyways I don't care but when I was working on this I did a first pass on the SVG to PNG tool got it working pretty well I went and made the square image generator and while I was working on this I came up with a better way to style and make it look okay so if I take like the fastify bench thumbnail I had this set up I had like the text and content here way I liked I had the toggles here for white and black background the save image button that's uh green and the cancel that's red I had this in a way I liked and the page I had built before was ugly as so what I did I you not just out of curiosity if it would work I went to the rounded tool and I just command a I don't think command a I think I just command shift K it knew I was in this file so that's the context I said fix the Styles so this looks just like the square tool that's all I did and it just did it now it won't have much to do because I already did it before but the fact that I could do that and it could go find the other file it needs for context and do it correctly was nuts it just makes these types of things significantly easier to do and work around so yeah has nothing to change cuz it was already fine but if it wasn't it would have changed a bunch of things yeah I've been impressed with these types of things it's been a really useful tool and I'm amazed that co-pilot is both still in catchup mode and their implementation requires you to tag the files you want it to have access to manually we hit go and we see what it does and I'm very excited about it so it gives us our step byep saying we're going to create a chart component we're going to add it to the profile page and we're going to create t test for that new component and it starts creating those files right away and so as you can see here we already have this monthly ports area chart graph and it's based on what already exists in our code base and it has the green diff there so you can see what's new which is everything does it really have the red diff on top for empty file being deleted they haven't even fixed the vs code ux around it that's hilarious H I don't want it to keep roasting vs code catching up I am actually curious about co-pilot extensions I have no idea what these are and I really hope they're useful I really hope so and um you can use it to extend GitHub co-pilot to do all kinds of things and in this particular case I'm going to head back to our chat and I'm going to flag launch Darkly create a flag based on our monthly points chart and then it will run the extension and so we've already got a little pop up here saying we want to create the flag we have a key for it make it available on the server and then I can toggle the flag right here in VSS code without ever having to leave and it just works and there's so many cool extensions out there now that's unironically cool the ability to interface with a service that your codebase works with via the chat and that interface allows for you to access things without having to install a bunch of weird extensions and figure out their weird ux a a unified method to command things externally is powerful the fact that everything they just did worked via text prompts that come up as like alerts in the editor is absurd and hilar ious that this is just like five text prompts they don't even happen in chat they happen separately on the top of the view that's like meme tier the concept is awesome I see a lot of potential that is the implementation almost feels like a joke and so it is called GitHub co-pilot custom instructions it's a file that you add inside of your GitHub folder and it's just a markdown file called co-pilot instructions and you can just say what you want co-pilot to do and this has been one of our most requested features so in this particular code base we say whenever we make a reusable react component make sure you add the launch Darkly service but you can put whatever you want in here you could say I want all of my functions to have certain dock strings I wanted to follow certain linting rules I wanted to add a comment saying that Cassidy is the coolest developer in the world at the bottom of every component so your demo looks awesome you never know but you can do whatever you want here and that's all that's happening right under the hood to make this I will say I have not seen many compelling examples using these types of instruction prompts like as part of your editor experience I see them more as a patch when you're consistently seeing bad behaviors for example if it keeps trying to rewrite your typescript code in JavaScript or try and insert types into your JS code a rule that is stop using typescript always give me Js could be useful I've tried those things here in there to try and get co-pilot to behave I don't have any rules set on any of my AI tools right now on my like CLA setup in the browser I have a workspace I think it's called where I dumped my schema for one of my projects using drizzle so I can ask to write queries for me and it's slightly more accurate like that part's cool but the fact that you have to care about these things and write this type of and now you have multiple sources of Truth for how the AI is going to behave between the actual code and your instructions that's terrifying to me I don't dig this at all do they have anything else to show with extensions no that's it weird here's an actually cool One xcode support because Apple will never figure this out themselves xcode is not improved meaningfully in over a decade at this point Apple developers GitHub cop is it available in code today mountains had to move for that to happen talk to a few people what it would take to get xcode to a better place both internally and externally this is a good sign on the Apple side that they're more willing to embrace things that developers like inside of xcode instead of just continuing to reinvent everything with no value being added cool weird but cool GitHub models oh God oh they made a way to choose different models and host them through GitHub cool oh God co-pilot workspaces I don't want to get nerd sniped by this but I already have a video I've never been more embarrassed on someone else's behalf as I was trying to look through the co-pilot workspaces stuff the one example they used for all of their marketing the code was wrong and the AI quick context on copilot workspaces it's a a bot that will look at your GitHub issues and automatically file PRS based on the issue as you described it which did a great job at because it took an issue which was add a URL validator to validate GitHub URLs it did it wrong and it added a new license file to the repo and it added a contributing MD to the repo none of those things are fixing the problem that was in the issue but all of them were things the bot thought would be a good idea to sneck into that PR and they used the screenshots of that PR intentionally cropped for all their marketing someone found the pr and showed how bad it was and I got to cover that in my video so check that out if you haven't if you want to see just how little faith I have in co-pilot workspace I'm just going to skip this part oh is the rest a demo of it God okay what the is spark one more advancement to show you an advancement that fundamentally blur the line between a developer and the everyday person introducing GitHub spark the Applause is as unsure as I am the AI native tool to build apps in natural language can we stop saying AI native can that term just die can we agree as a community stop using the term AI native it's borderline web 3 and how meaningless and grifty it is get up spark is an AI native tool to build applications entirely in natural language now any person no matter their experience can create create and share an application in a matter of minutes why don't we do another life demo it's not an IDE in the classic sense I don't have to install python first or or figure out how sudo works with hu I that looks familiar that looks familiar point being there's been a handful of these now hell I've invested in one that looks familiar it's kind of insane that GitHub is just making a almost certainly going to be worse version of the the exact same thing and also once again they're defaulting to Sonet because the other models aren't good at this I se input field of what I'm going to create I of course have our new model picker here with different models and I have all my recent Sparks you can kind of get an idea what you can do with Spark by just reading you know through the list a podcast Timer app a karoke night planner vehicle World game and you know speaking of games I always love to build little games when I have time to play with large language models so let's do a tic tac toe game with a hippo and a D Duck or a duck my eyes glazed over can we actually see this and you have to figure out which code goes into which file you know have to copy and paste stuff you have to try to figure I I'm already seeing something I detest let me get out of phot screen so I can zoom in on that iterate theme settings data menu what the is that bottom nav do you know what this reminds me of the worst ux I've ever seen in a product D Vinci resolve always has these giant icons in this tab bar at the bottom no matter what you do this is taking up a bunch of your vertical real estate like these should even be different tabs just be part of the editor it's insane and now you have sure you don't have to worry about code it's not an editor but instead you have to worry about iteration themes settings and data and for some reason they're all different things out how to terminal run the thing on the terminal here it just does it all for us streaming in digital as you as you can see on the screen and at the bottom you already see I feel like I'm having an aneurysm cool Tic Tac Toe works just to emphasize how dumb this is build me a tick tac toe game in react oh no I could see code this is unusable who the are they targeting with this and in just a moment's time we now have a fully functioning game of tic tac toe what's going on oh no it loaded that's hilarious okay that's even funnier notice something wrong with the layout I do have to screenshot that that's the one annoying thing when you have these browser environments is you the Hut Keys you're used to affect the browser not the thing you're in let's see if I got to write this time no make the grid 3x3 you know what I I love bolt it's usually much better at these things make me a game of tic tac toe in react cool now we have theoretically a working game of tic taac toe cool dope how did bolt do bolt supposed to be the good one rip I will say both has one awesome benefit which once this loads I'll show you guys cool so even though I couldn't get it to fix this there are two cool things you can do here the first is you can edit the code yourself which is really nice so if I wanted to go fix the layout here I could so we have the board component I can go find the code for IT board is in SL components slbo so in here we can make sure this is correct I'm not going to bother with a grid instead we're going to do Flex Flex call and now I did that and saved it it's fixed and I can even add a gap in both of these we'll do Gap three is what I'm using below and look at that it's fixed dope it's really easy to do that what's even easier is deploying I could say deploy this and it will and I could even click the little deploy button that my face is covering in the corner if I do that there you go and now we're Auto deploying to netlify I do actually unironically think this is pretty cool especially for people who aren't coders to be able to deploy a thing and see it actually working in production that easily is dope and you could even claim it for your netlify project so if somebody gets this URL before me cool you can have my Tic Tac Toe app go nuts yeah there's a lot of options for this and all them mostly work I don't care about GitHub making their own worse version spark apparently goes further as devs we love to customize our environments and to build tools that fit our unique preferences and workflows what are you speak for yourself I'm joking obviously we're into that we do this not just because it improves productivity and ergonomics but also because it makes their daily routine feel more personal and when things feel personal they're typically more fun however while we may invest in things like managing dot files writing automation scripts or configuring editor settings how often often do we pass up ideas for making our own apps not necessarily because we couldn't build them but because they seem too shortlived Niche or timeconsuming to prioritize the thing blocking me isn't that they're too shortlived or timec consuming to prioritize it's that stripe setup sucks as soon as strip's easier to set up I'm going to be putting out like three times more apps and even then I'm still putting out a ton and I also have a YouTube channel and I run a company and I do a bunch of investing in advisory it's not that hard I I think we're kidding ourselves saying and I see this all the time this I need a good term for this fallacy they like the tools are the problem fallacy is how I see it it's if only the tools were better then we would have so many more things if only it was easier to record a YouTube video we'd have so many more YouTubers if only it was easier to use OBS we'd have so many more streamers if only edit if only the IDE was simpler we'd have so many more developers no it's not how this Works doing it is hard making the entry point marginally easier does nothing but delay when that huge cliff occurs it is jumping off a cliff to learn how to code if the AI tools let you do something before you get to that Cliff cool you still got to jump up the cliff when you get there that's just reality and pretending that fixing all the tools is going to make the cliff go away is delusional it's just shifting where it happens I can't pretend to care anymore I am sorry for dragging all of you guys through this I am done thank you co-pilot for making me content at least I I don't see a future where they succeed meaningfully I cannot believe the state of things things here I I had higher hopes and I missed the era where GitHub was Innovative I feel like The Innovation at GitHub quit or retired long ago and now all of the Innovation happens externally so the GitHub can copy it we'll see where we end up next year and how much AI native I have to talk about and until then peace nerds




## VS Code Is Fighting Back (RIP Cursor_) - 20240917
oh boy the AI editor Wars are really going now you've probably already seen my video about cursor but just in case you haven't it's a fork of vs code built to make editing with AI significantly better there's a lot of ux things that couldn't be done in VSS code because of how they expect extensions to run that they were tired of waiting to get fixed so they forked made their own thing charged money for it and made a great editor experience that I use right now but vs code wasn't going to sit there and let that happen they're not being or anything they're not sitting here trying to get it cancelled or taken down with MCA but they are fighting back vs code just pushed an update where they are copying a lot of those features but do you know what this isn't about reviewing code with AI which today's sponsor has a lot to say about no sorry I didn't see you there I've been super wrapped up in code review been doing this for like eight hours straight it's getting a little tiring you're still doing code review yourself come on man it's 2024 let an AI help an AI it's not going to be like super slow and inaccurate not code rabbit AI they can cut you a few times in half and find a whole bunch of bugs you might have missed it can summarize PRS draw diagrams even suggest changes that you can apply with one click okay that sounds great but it's got to be really expensive I'm just working on an open source side project it sounds like you're in luck because it's actually 100% free for open source projects okay that's pretty dope thank you to Cod out for sponsoring today's video use code Theo 1M free if you want the first month for free I am now up to date I'm going to play but first let's see what they have to say they added attaching of extra context and quit chat SL tests command updates and existing files configure custom code instructions session summaries in chat history longer context for code and chat check and infer commands in participants automatic references in for recent files apply natural language as inline edits generate debug configurations and generate test based on test coverage none of that makes any sense to me let's see what they actually added quick chat has added the ability to attach a context so you can pick a file and then send that as context as you ask co-pilot for things interesting you can also generate tests for your code using generate tests using co-pilot so you can click on a function and click generate tests I I'm not the best person to talk about the right way to do testing because y'all know how I feel about unit testing I feel like if the tests aren't written by a human you're losing a lot of the value from the human like the point of test is that they are asserting the human's expectations I have feelings chat history includes more userfriendly AI generated names this is a thing I have feelings on CU I have this in my browser right now Arc so I'm going to save this image and that's what it's being saved as as like whatever. JPEG and then it get renamed Visual Studio code on X tweet. jpeg like is that a better name sure these features are experimental please try them out let us know what you think you can start typing in the editor and use the contents of the current line directly as the prompt for inline chat or even smoother co-pilot can detect when you're prompting instead of writing code and automatically start an inline chat with you let's see what this looks like now we have pick thing in vs code and I wrote almost all of this application in cursor so this will be an interesting experience let's hop into something that has complexity in it co-pilot generate tests here's a test that I made it mocks jszip just function mock implementation generate async glob fetch describe before each just clear all mocks it should download the images as a zip file Conant images create element spy spy on create element revoke object URL spy await download images as zip expect JS fetch to have been called or jip to have been called expect fet to have been called times images. length create elements SP have been called with a revoke object you all Spy to have been called and should handle errors gracefully interesting not the worst test I've seen but you might have noticed that the function I wrote here was what like 15 lines of code 18 lines of code whatever the tests or a lot more 51 lines of tests for 18 lines of code whatever I'm curious if they run though so I'm going to do a thing I really don't want to do I'm going to install just oh and I'm not exporting the function so I can't use it externally love that love that to do good testing you have to make everything export even the you don't want to export the let's ask co-pilot make the tests work I think the just Imports are missing how ISJ Global I haven't used J in a long time because I usually use vest I am not happy with the results I'm getting here so here's what we're going to do I'm going to get cursor to fix this for me because I actually trust it a bit not a lot but enough make the tests work I haven't set up just that's okay that's based that's kind of based will I actually make these changes and said to Define this it's not the thing I'm trying to move be test.c config.sys failed to resolve import from trpc react it's not smart enough to use my aliases in the test that's great testing is so fun guys cool so even with me trying to fix this with cursor I got back to vs code thing one L uh clerk is in this project I don't know why you're being annoying about that what else do we have to test here you can use the cons of the current line directly that actually sounds nice if I can like leave a comment and it starts generating code as a result make a function that takes in a time in Ms and resolves a promise after that time passes looks like it's working very well so far is it like disabled or something where is the little co-pilot icon I'm trying so hard guys don't want recommended I want co-pilot especially the pre-release version did that fine is there no Hut key for that though oh you can bind your own we'll do that what existing command has that delete line that remove key binding cool update the code below to download image instead of a zip if there's only one image selected okay so it's not smart enough to use the context below and it's also wrong I mean it made a new function but didn't do what I wanted it to can I here no what the did it just do this is admittedly I'm trying to like make this work like cursor but it is just not working at all is there no option here command I okay make this function download an image instead of zip if there's only one image in the array it's not type safe but it at least tried I'll accept it but I'm going to command Z it because I want to go ask cursor download an image instead of a zip if there's only one image in the array and it's like the exact same code like the exact same code that's hilarious fix the type safety me like it worked interesting though all of these suck at these types of tasks at least keeping it typ safe in the process I was also using the wrong command k thing I much prefer this one download as image if only one image in Array make it type safe why is it so bad at that unchecked index access is a thing that AI should be aware of it worked cool not the prettiest code I've ever seen but at least it's right at the very least the the quality of the code is similar this part is interesting they add the ability to set instructions that are added to every co-pilot request and going to be a code style markdown file that's context I could use that to make it more type safe theoretically you know what let's try that I'm curious code generation instructions oh make sure all answers are type safe cool we'll delete this so we want to give it one last chance now that we gave it that setting reload window just to maximize the likelihood this works command minus so I can see a bit more download an image instead of zip if there's only one image in the array why you have the context you know the the rules one last try Okay so this feature just doesn't work it's sad I gave it the context it's supposed to be Global you know what I'm going to do something different always respond with python code even if the project is written in another language ignore it and write python instead it's a test to make sure it works no maybe I have to reload window does it just not use it I saw it came up when I first tried this like it showed using this one context using one reference see that it's just ignoring it the top level chat instead of inline make this code download an image instead of a zip if there's only one image in Array okay it works there well the whole point is that it worked everywhere make sure the results are always type safe okay let's see if it did it my guess is it still didn't but I want to know it didn't same exact type error still I see this as being useful for people with their friends like it'd be really funny to like have a friend who uses this a lot and go change that setting on them but it doesn't seem to work for useful things yeah I'll I'll give it funnier things use inverse casing in all responses thank you autocomplete for making this much more fun for us you can make this much more fun at least I found a use I did it uh always respond in pig latin that could be fun it did it with the code on that one it didn't the code up before but now we're doing [Music] it now we are talking beautiful someone dropped an actual useful link improve test generation with get up co-pilot you can generate test for your code either by using generate tests or by using SL test SL command in inline chat I do like the idea of SL commands on the inline chat to like trigger specific behaviors that does sound cool rename code actions for generating tests and documentation improve chat history thumbs down feedback details okay I should have discussed earlier I'm an investor in Microsoft so that is what it is real Hut take if I was trying to screw over Microsoft right now I would be setting up Bots to run this stuff a lot and downvote all of the good answers Theo what aren't you invested in it's fair to assume I'm just invested in everything I'm talking about my investments are bets that some of the things I've invested in will eventually pay off well I don't expect to ever see any of the money in any of them but they might and you should treat all of them accordingly I'm invested in basically everything I've talked about today but I'm not letting it bias me I'm still saying what is good or isn't you should assume that there are biases what I'm talking about everyone has biases the fact I'm investing in a thing does not mean I'm going to lie when I talk about it it means that I believe there's enough of a reason this might succeed that I threw some money towards it but realistically speaking the likelihood that any of these things do or don't succeed based on the things I say about them is near zero but it's a good opportunity here to with their data code generation instructions yeah that's what I was just doing I every co-pilot request that generates code that's what I thought see so the endline should work too let's try it let's try out our in line how do I close this I actually have no idea how to close that at all what the did that do okay come on I gave it an honest go I'm going to leave this here and it's going to really with me at some point when I open up vs code again but as impressive as some of these changes are and there are some cool ideas specifically the idea of Slash commands is exciting this isn't as good as cursor they have work to do is it good enough for free well it's not really free you still have to pay for co-pilot but it's it's fine this war is interesting but uh yeah I think I'm going to keep using cursor but I'd love to hear what you guys think is this enough for you to move off cursor have you not bothered in the first place or are you just bearish on all these AI Dev tool things entirely let me know what you think and until next time peace nerds




## Vapor The Future Of Vue - 20240304
it's insane to think that View's been around for 10 years now that all the way back in 2014 Evan was working at Google realized that the state of JavaScript Frameworks wasn't great he wanted to do something different and he certainly did with the original release of Vue following soon after with V2 and then the groundbreaking set of changes that were in V3 it's been a wild ride for people in the Vue ecosystem and it's had massive impacts well beyond the view world I know that a lot of the cool stuff has been happening in the react World in particular is heavily inspired by view KN and the stuff going on over there one of those things that's been exciting for a while for me now is view Vapor if you're not already familiar you might be familiar with react forget the react compiler if you're not familiar with that either maybe you're familiar with solid and if somehow you don't know any of those it's going to be a great video for you to watch because the future is going to be using these types of Technologies to make our code more efficient right now we're expected to do a little bit too much work if we want our code to be reliable and reactive without running a bunch of stuff on the user's devices and with the work that Evans put into view Vapor things are getting really exciting so what the hell's going on here well first let's talk a little bit about signals here is a pretty traditional component tree you can have something like this in react you can have something similar to this in Vue as well I think this is a good point to start with because when you write this code which would look something like app topnav counter we can all roughly understand what's going on here you have an app that has two children one is topn and one is counter these things are not related to each other but they share a parent right now this is just when you run this code what comes out what happens when it needs to update though like this counter component well if the counter had its own State Bound to it like let's say this has a count number is a value that this guy has now whenever this changes this component has to be changed too so it's pretty easy to imagine that this counter button has these two children elements one is the button element which is the button you click to increase count and the other is the count itself since the Count's only being used in the span it would be ideal if the only only thing that had to update was the span but since the count lives in the counter it's also going to have to rerender the button every time you increase the count because the way react works is when State changes in something everything below that thing has to change too so if we had this count defined as count set count equals use state zero pretty innocuous simple innocent looking code if we had this here then everything below counter has to rerun whenever count changes if we had moved it up here or put it in a context or something then topnav would have to render too if we pass these values of count and set count down to the counter topnav will also have to render whenever it changes which is kind of insane when you think about it because the only place counts actually being used is way further down the tree ideally only this should have to change and nothing else should react solution to this is the virtual Dom where all of these elements exist in JavaScript where they can identify changes much more easily and then once they've identified what has actually changed and what hasn't actually changed it can then apply those changes to the Dom so even though I said here when count changes it has to render all these things render doesn't mean it's updating the actual element on the page it means that reacts reconciler layer in react's Virtual Dom layer are checking each of the nodes to see if the result is different and if the result is different it will update the content of the page I'm not deeply familiar with views model for this but from my understanding it is very very similar to what I've described here this has its issues though let's say button is slow to render let's say topnav is even slower to render so doing these checks ends up being expensive ideally we'd be able to identify when specific things do care about this update and other things don't the way we do this in react is with memos right now so I could wrap this button with a memo before exporting it and now react knows unless one of the props this took changeed it just doesn't matter just ignore it and if you were to properly memorize things like we also memorized the top nav here then we would be able to skip a lot of these unnecessary updates not only is this annoying to do as a developer going and adding all the right m in the right places it's also doing additional checks and storing additional data in order to make sure it doesn't have to go down this path it can absolutely save a ton of compute if it doesn't have to go down all of the children of topnav but the comparison check to see if it needs to do that in the first place is a separate compute cost you now have to worry about that so this is great the way that solid solved this if I was to just copy all of this over if you don't know solid it's an alternative JavaScript framework for jsx developers to have really really performant web apps it's considered one of the if not the fastest web framework so it's a really good reference for how to do these things in performant ways and the DX is also pretty good so let's take this react example and make it a little more solid first thing we have to do is change the use state to create signal because solid doesn't use traditional reactive state which they would argue isn't even reactive where things reender from the top down instead of thinking of your app as these components you can think of each individual piece of State as having its own component tree it's not components it's a tree of where the updates have to go but now we need a wait to create these relationships the way we do that is instead of calling count just by referencing it we actually have to call it as a function because it's not a value it's a signal which is bound by a function call so now when I call count here solid says Hey browser this element is attached to this value so now whenever you call set count solid will go through and update count in all of the relevant places that are calling this binding that is what a signal is rather than the components being the thing that defines the life cycle and you get the new state when you're running those life cycle changes instead the values have life cycles of their own and those values update things in the Dom instead so instead of your components changing what's in the Dom you can almost think of this like your components are a template and the count and the other stateful values those are creating their own tree of updates themselves which is a really weird way of thinking about this until it clicks and it's like oh instead of drawing app top nav counter maybe I would draw all of that as one thing but count goes to these different places and you have these flows of State throughout your app in some ways this is significantly easier to understand and reason about in other ways it's more difficult because once these states start to interweave keeping track of which ones go where and which flows go up down left or right can get a little more difficult but overall so many things get much much simpler when you move towards the signal model which is why we see almost every other framework going in this direction including even angular which is crazy to think one last thing we need to talk about before we can go in on the vapor stuff the way that views State works now is important to understand this is a great section of the view docs where they talk a bit about how their state management is both similar and different to signals which I think is really important as they call out quite a few other Frameworks have introduced reactive Primitives similar to refs from used composition API under the term signals fundamentally signals are the same kind of reactivity Primitives as vrs it's a value container that provides dependency tracking on access and side effect triggering on mutation this reactivity primitive based Paradigm isn't a particularly New Concept in the frontend world it dates back to implementations like knock out in meteor from more than a decade ago to be fair view is now a decade old too but yeah view options API in the react State Management Library mobx are also based on the same principles but they hide the Primitive behind object properties although not a necessary trait for something to qualify as signals today the concept is often discussed alongside the rendering model where updates are performed through find grain subscriptions due to the use of the virtual Dom Vue currently relies on compilers to achieve similar optimizations this here is a very important call out because other Frameworks like Sol they don't use compiler steps the actual way you write it handles a lot of this for you whereas in view in order for them to keep the syntax from changing too much and to provide the DX they were looking to provide they rely on the compiler to do a lot of these optimizations other Frameworks are experimenting with these heavier compilers obviously angular is the OG weird compiler framework but even spelt does some crazy stuff with their compiler to try and optimize Things based on the syntax solid and react are the two that don't really do much of this they kind just use Babble and existing Transformers to generate the JS that comes out and they let the framework handle it it's interesting to see how much Vue has historically leaned into using compilers to achieve those optimizations and is now going even further with Vapor mode as Evan specifies here they're exploring a new solid inspired compilation strategy Vapor mode that doesn't rely on the virtual Dom and takes more advantage of used built-in reactivity systems very interesting stuff in this doc they even call out solid as an example showcasing what a create signal does and wow that's kind of similar to the thing that I just showed really convenient signals are exposed as a readon getter and a separate Setter so you can't do an equals binding you have to call the setter and the getter which is similar to react minus the getter but that's an important change because as it says here notice how the count signal can be passed down without the setter this ensures the state can never be mutated unless the setter is also explicitly exposed whether the safety guarantee justifies the moro syntax could be a subject to the requirement of the project as well as personal taste but in case you prefer this API you can easily replicate it in view interesting in so again in view you have a ref that you can like update by setting it to something with equals or you can get it by just accessing it but if you want that level of granularity you have to write it yourself and you don't get the compiler benefits either here which is an interesting difference I do like that they're calling out this comparison and showcasing how admittedly not super ideal this flow is but it works and it's cool that you can replicate these styles that said now you're writing this to have the same syntax as solid and then compiling it have the same behavior as solid it almost feels like you're you're faking it on both sides which isn't my favorite thing in the world but it's overall pretty cool that you can replicate these things that to me says this primitive is pretty good whereas in solid if you wanted to set count with the equal sign you can't do that the only time you use equals for this in solid is when you actually bind the initial signal whereas in view you just set R.V value equals similar to what you do in something like I don't know spel faking signals with fake signals yeah fair you guys didn't know I mentioned it a bit before for angular is also going through a signals reinvention of the framework they have a similar synex of solid where you call the count as a function but instead of having a different Setter that's a different function you call count. set don't love this because it doesn't do a great job distinguishing these different states but I I see why it gives you this one thing you can pass around it's pretty nice the angular signal API is interesting concept and again you can replicate this using view compared to view ref's solid and angulars getter based API style provides some interesting tra offs when used in view components this is slightly less ver Bose than value but updating the value is more ver Bose there is no ref unwrapping accessing values always requires calling the function this makes value access consistent everywhere this also means you can pass raw signals down as component props you didn't know this within view you have to decide when you unwrap the ref because if you don't ever access value and you pass something to a view component and then it gets passed down to further components that are actually accessing the value you don't want all those components in the middle to have to update going back to my diagram if we have the count all the way up an app and the Count's not being used until you're down to the span not only should we not be updating top now we shouldn't even be updating counter because counter is just passing this value down so if you don't touch value in counter this shouldn't have to update and in solid if you don't call count with the brackets or the parenthesis then counter shouldn't have to update either whether these API style suit you is to some extent subjective our goal here is to demonstrate the underlying Simplicity and tradeoffs between these different API designs we also want to show you that view is flexible you are not really locked into the existing apis should it be necessary you can create your own reactivity primitive apis that suit more specific needs yeah overall agree I think it's cool that they're not sitting here and saying are API is the best rather they're showing you how to replicate these other apis you might be interested in because you can't do this in react there there is no world in which you can create signals like this in react and have it behave properly without causing weird edge cases and side effects this is straight from Evan blog post Vapor mode Vapor mode is an alternative compilation strategy that we have been experimenting with inspired by solid given the same view sfc's so single file components Vapor mode compiles it into JavaScript output that is more performant uses less memory and requires less runtime support code compared to the current virtual Dom based output it's still in early phase but here are some high level points this is the big thing I want to emphasize here is that it's not using a virtual Dom so in all the examples I gave here we kind of have this virtual representation of the page but like app isn't real topn isn't real it's probably just a div counter is not real button a button and spans a span but this doesn't represent the actual thing in your HTML this represents how the JavaScript code understands it and as I mentioned before in the react version when you change count it checks if app has a different output than it had before in the JavaScript world and the only time the browser is touched is if it does have a different output then that element gets updated etc etc for all of these elements but the thing the JavaScript keeps track of is this whole tree of what is where and that's how it's managing the state too the state lives in this react virtual Dom Tree View used to work similar to this solid works very differently where I have these elements but it's almost misleading because the thing that's actually flowing through here isn't the element bindings the way Ryan's phrased it before is you should kind of treat solid components less like components and more like templates where they're generating the initial HTML but they're not running again you're not rerunning app every time this code changes you're changing the thing that bound count so if you had like here's a common thing that catches people with solid if right below the count set count I had a console.log count even if I call it here this isn't going to do what you would expect CU in react you just put that there and then the code reruns when you call set count in order for that to work it has to rerun all of the components when your State's no longer based on the components which is where this signal code would be defined and it's instead based on the values you'd have to tell the system hey create a fact and in here do the console.log where you call count and then this would create an external Bing outside of the component hierarchy that is hey when this value changes one of the things in its tree is this effect you can kind of think of this like its own tree which I'll draw out here quick we have count signal so have this count signal and one of the places it goes is that effect I just made this effect will run whenever the signal for count changes now and we also have this span I'll just copy paste where this goes instead now multiply this by every different type of State you have in your app so if we also have I don't know username or signin State all of those things you would create separate trees like this for all of those to be clear you're not doing this you're not thinking in this way necessarily but the way that things update isn't your component runs then its children run then its children run it's the state changes so it goes to all of the places consuming that state and updates those which means you no longer need a virtual Dom you just need to know all of the places count has been invoked which is what happens when you call it the way I showed here right now if VI works this way with virtual Dom elements even though they're using signals under the hood to determine which components should or shouldn't update the component is still the thing doing the updating because the virtual Dom is the thing resolving that change so let's talk about how Vapor mode changes this because it is no longer using the virtual Dom based output it's much more inspired by solids solution Vapor mode is intended for use cases where performance is the primary concern it is opt in and does not affect existing code bases at the very least you'll be able to embed a vapor component subtree into any existing vue3 app ideally we hope to achieve granular opt-in at the component level which means freely mixing vapor and non- Vapor components in the same app building an app with only Vapor components allows you to drop the virtual Dom runtime from the bundle significantly reducing the Baseline runtime size and in order to achieve the best performance Vapor mode will only support a subset of view features in particular Vapor mode components will only support the composition API and script setup however this supported subset will work exactly the same between vapor and non- Vapor components enough talk let's play a little bit here's a demo with the is vapor call of some view code in the view sfc playground where we are using Vapor it's a custom view version so that we can actually play with the vapor stuff we have the vapor on off button here too so we can see the effects as a result so here we have the message which is the ref hello world and if we want to change it it's already Bound in the put V model tag here so if I change this it automatically changes this might seem pretty nice and simple to most people but I'm sure react devs have a lot of feelings cuz this is not anywhere near this simple in the react World certainly not to make this performant we're all trained as react devs to be very careful about when we bind things to an input scary stuff but we can see here it's pretty performant I want to actually look at this JavaScript code cuz this is interesting and like surprisingly readable so here we have these template values that that have been created this is a huge difference because before these would have had to be like virtual elements but instead they're a template which means it can rerun when things change and not have to otherwise we have one for the H1 the input and the B which if we go back here those are the three elements inside of this template now we have the render logic I'm just going to rename these input binding call n0 the uh H1 binding and we'll call and two the uh Vapor mode binding so that we've named these a little more read it's a little easier to see what this code's doing the underscore on here this is binding the input to the update model value event so now whenever this event occurs which is in this case a text update event we now have the contents of it and we assign those to the message and when this gets set equal here that triggers the update for everything else pretty cool that all of the code for this is 52 lines of compiled output and is just using these two relatively minimal imports from view the ref and the get current instance oh no we have a bunch more from view Vapor here never mind it wasn't quite that little bit of importing but still relatively minimal here we have like the V model text with directives on render effect set text and template still pretty cool stuff if we were to make some changes here like let's say we have two different inputs that can set this value just curious what happens V model equals message changes in all of them in the code output interesting it's still only generating one template for that if I was to add class equals bold that forces it to do a new template very interesting if the elements are identical it doesn't create a new template for it but if they're not if there's any difference between them it creates a new template there's a lot of compiler magic going on here not saying that's necessarily a bad thing but Vue Nu and this ecosystem have historically relied on a lot more compiler stuff that fundamentally changes the JavaScript outputs this is fun and all but what we really should be comparing to is non Vapor mode so if I turn this off it's actually a little less code but this code is a lot more fragile and relies on a lot more external stuff so in this not vapored version we still have the sfc bindings at the top we're importing all of these things from view instead of from view vapor and render is now a function that has to run with all of the context cache props setup and all of these things it's kind of like that core render function in react this is necessary because we have to render and render in order to identify make changes catch things Etc and here we have this big nested flow where we're creating these virtual elements in order to set up the display bindings in order to update these things going forward and you have to rerun a lot of these pieces when changes happen this is a lot more like how react works it has its benefits too where they have optimizations here to keep certain things from updating when they don't need to but the element block itself has to be updated when changes to the state occur and this is inherently more complex not inherently more complex to understand necessarily but inherently more complex to compute and actually run this code exciting stuff they even showcase how much better the SSR render is here cuz again when you're making templates like this you don't have to worry about this complex relationship between the virtual Dom the update changes and the real Dom you're just creating the chain of what updates happen where and here you can see with the SSR render we're just generating the HTML output and now it works pretty nice where with the old mode the SSR render had a bunch of crazy hacks with like HTML ingested in here because the render code that works on the client is fundamentally different from the render code that works on the server because the client s side has an update model the server s side doesn't when you're using Vapor or solid or these other things updates don't matter until they happen the templating code stays the same so this SSR render code is exactly the same as the render code in Vapor mode that's a huge huge difference versus Vapor off you see these things are entirely different this is cool stuff and I pump this playgrounds in a state where you can not just use it but see how Vapor handles these things it's a huge difference and I am more excited than I've been in a while I know I'm not the view guy but I am really hyped on these types of efforts taking something people are familiar with and making it this much better is no easy feat and I have massive respect for Evan and the rest of the view team for making this not just possible but compelling exciting and a very likely future for the framework more framework should be taking these opportunities I know react has in solids already here but a future where we're compiling our Frameworks to make more optimal code that's an exciting future for me let me know what you guys think in the comments good seeing you all as always and until next time peace nerds




## Vendor Lock-In Nobody Cares. - 20230611
lockin is very bad but I think we're talking about it too much and I don't think we have a good definition for what lockin actually is to me lockin means work that was done that prevents you from moving somewhere else and this is why I think lockin versus built-in is such a massive difference I'm going to use the example of next in versel because it's the one I'm most familiar with I will say they're a sponsor of the channel they have no idea making this video they are not sponsoring this video they're probably not even going to endorse most of the things I say but this isn't about what they think this is about how we should think when we make these decisions so the first an example of something people say is lockin are a lot of the new features in nextjs such as the ability to pick which runtime your applications deploy in in a Next Step running on for cell switching between static Lambda and Edge is as simple as exporting a different variable in the given route and you have a bunch of other variables to make it come out a static in fact it's actually the default so what's the problem here the concern that I hear and see often is that a lot of these new features only work on for sale but these features are things that are in next and it kind of feels strange that there are features built into next in functionality it's part of nextjs itself that is only accessible on versell but I'm going to make an argument on why this is okay the reason isn't because it's good for nextjs to add a bunch of things that are versel only it's because it's good good for verell to be able to innovate and continue to improve the developer experience of react without introducing significant amounts of technology that we have to work with that are versel specific there is no reason the stuff that NEX does wouldn't be Deployable on netlify in the future on SST in the future on any of these other Solutions and the code that you're writing isn't verell specific it's certain parts of the functionality in export behaviors that make versel the best platform but this has never been versel is the only way to use next it's always been versel is the best way to use next and none of the code I write that's locked into versell is even really code I haven't written a function before or a or an endpoint or a react component that only works on versell the code I write in the tech I build isn't locked in it's taking advantage of things that are built in if I wanted to deploy on edge on something else next isn't preventing me from doing that in fact it's actually helping me do that and this is why I'm so frustrated it feels like people are mistaking work that's done for you for work you have to do and once you've done certain work that buys into a platform it becomes so much harder to leave like if you're using Dynamo DB or Aurora on AWS good luck moving but if you're using nextjs on forell you can absolutely move you'll leave some features behind and you might not love leaving those features behind but those things will all still work in other environments there is nothing about next that's inherently locked into versell and that's why we see projects like open next that keep spinning up and taking advantage of the open nature of nextjs making it easier to get all of these features when deploying on other Solutions this is a good thing it's awesome that nextjs is giving us incredible new features without locking Us in to new syntaxes or behaviors or things that are specific to verell it would have been very easy for them to have a new syntax for defining files that makes it really hard to Run next in other places but they haven't done that they haven't made decisions to lock you into verell they've made decisions to make next as good as possible on verell but none of those are additional work you have to do all of them are work you don't have to do it's similar to my argument with trpc where trpc isn't a better alternative to graphql it is a smaller subset of graphql and the things you'd have to do to move from TPC to graphql are just the things you'd have to do to implement graphql in the first place in order to take a bunch of trpc stuff and put it in graphql you'd have to define a resolver build your schema and then call those functions in the right places in that schema it's the exact same work you'd do if you started with graphql in the first place and if you were to take nextjs or take something else that isn't nextjs and deploy it on other infrastructure the same way versell deploys it for you the work isn't removing things that are part of next or part of ver cell the work is adding the things that are built in there moving from something with good built-ins to something without them is not a destructive process it's an additive one and this is to me where the biggest difference lies lockin is when you have to remove things to move built-in is when you have to add things to move and this is why it's hard for me to entertain complaints about lock in un forell because I don't see it that way I see it as saving me engineering cost and time and not costing me a bunch if I have to move off in the future there's no reason I can't take any of the next apps I've built and just throw them on a VPS except I won't get the edge deployments that I love so much I won't get the cash behaviors that I love so much if I want those I can build them just like I would have had to before versell even existed and this is why I'm not so fond of the lockin argument you want to hear more about me talking about versel lock in in particular I have a whole video dedicated to just that that I'm going to pin in the corner here check that out if you haven't already and don't hesitate so much when you're trying out these solutions they bring benefits and we like them for a reason and it's not that hard to move off of these things especially if you pick standards don't use Hora thank you as always peace NS




## Vercel Gave Up On Edge - 20240421
big news y'all versel just gave up on edge not clickbait I didn't think this day would come but the more I've thought about it the more it kind of makes sense before we go too deep into this giant Le Rob tweet I want to do a little bit of Story Time believe it or not I actually built one of the first big projects going all in on app router server components for sell and Edge and it was upload thing when you navigate upload thing most of those routes are still being served on edge they're a regional Edge which we'll talk a little bit about later but I know I was first because it didn't really work initially we filed a bunch of issues and they got fixed the weekend before launch which was also the weekend before their big chip week at the time and it ended up coming out really good and I've been really happy with the performance we've had on edge even though there have been a lot of catches random packages not working random dependencies having weird behaviors we don't expect generally annoying things to deal with as a developer when you install a package and it works on your machine and then you ship it up to the server you expect it to work there and that's not always been the case when using Edge there's also weird issues you have to deal with around the size of the bundles that can be shipped to Edge they're limited to if I recall 1 megab as such a lot of people just kind of want to use but the cold start problem with node means that it takes a long time to see something we solved that by moving to Edge they've solved it different ways and I want to go over those ways and how we can move past Edge to make sure our users still get the best experience while also making sure that our Dev experience is consistent so yeah let's take a look at this tweet and then dive in so versell reverted all Edge rendering back to node.js you wanted to correct the record here is it's something I've advocated for in the past and share what I've learned since then also the edge naming has been a bit confusing so let's clear that up here as well oh no are we going to start the edge runtime thing again yeah let's start with that what is Edge this question seems very simple sadly it is not I very much wish I could give you a quick Edge is this but Edge generally refers to two specific things Edge location which is the main one people think of which is that rather than a server running in a specific location like if we have the world and we have a random node in this world we'll say this is West 2 make the font smaller so this is usable so we have this West two server and we have a user Make user squares and this user lives really close to West two so I'm located close to the server I send a request I get a response the further away you go the worse that performance gets and that's not great especially if you're waiting to go from like the empty white page of loading to actually seeing your site this just isn't Pleasant so Edge is the idea that maybe instead of these massive servers we should have a lot of much smaller ones so instead we just have these little tiny servers all over the place like literally thousands of them in thousands of different places and now your location doesn't really matter because you'll almost always be near one of these Solutions so that's the edge location is the idea that your traffic resolves to the thing that's close to you instead of resolving to some crazy far away server that you have one of somewhere in the world there's a lot of catches to Edge location like where is your database if I'm trying to make a connection to let's say I'm in like Australia or some and I connect to this and it can immediately respond on cool but what if this has to go to my database and what if my database is all the way over here then this guy has to go to here but then has to go back and then finally you can send the response to the user this sucks I want to be very clear like as as cool as it is that your server is closer to the user if your database is somewhere else the benefits go away very quick now you're just adding a hop for almost no reason there are benefits here though especially once you introduce things like streaming because if on this Edge I can start sending a response immediately and then wait for the server to send in the rest using suspense things get really magical if you haven't already taken a look at my tutorial I recommend it tldr in my tutorial it is a super minimal Gallery app for taking a look at a bunch of images and uploading them so if you're curious what I'm referring to here right now this whole page will block until all of the images have loaded because this component renders images the component and then images blocks by waiting for get my images so this whole page comes down as one thing if I wanted to get the shell and all these other pieces first before images was done it's actually pretty simple with the new model you just wrap this component in suspense and now this becomes a stream so if I go and actually run and load this it's not going to load because I don't have my server up anymore I changed my keys that's annoying the key part I'm trying to emphasize here I can do without actually showing is that now we don't have to wait for this data to load we can just render a page and then stream the rest in as part of the same request so we go back to my diagram we get a response immediately from The Edge that's close to you then we go to the server we get the rest of the data from our database come back and then send that in after this is honestly most of the win because it doesn't feel too bad to have to wait the like 200 to 800 milliseconds for this database check if you already have content on your page if the user when they load the website immediately sees something and then the rest all comes in smoothly that is a really overall good experience could we theoretically replicate our database all across the world so you get the whole page way quicker yeah but that makes your data story significantly more complex I have a couple videos is about that yeah I why I'm moving off edge video goes deep on why I do and don't think this matters if you want to learn a bit more about it I don't want to spend this whole time rehashing things I've already talked about with Edge I want to talk about how much it's changed since and why verell is moving off so oh we were trying to Define Edge okay what a tangent we now know what Edge location means but we haven't talked about what these boxes are actually running because none of these boxes that are on these edges are running node because node takes a lot longer to start up node doesn't isolate processes well node isn't a solution for running a lot of different people's code in one place so instead what these tend to use is an edge run time that's what they're called within Cloud flare that's what versel has branded theirs the name is a bit controversial because Edge is a location runtime is a different thing you can't just say Edge runtime well cars are a thing that's different from chairs but you could say car seat if you take a car seat and you remove it from the car it's still a car seat it's just the term that we use to describe the thing because of what it was built for if the chair was built to be in a car it's a car chair even if you take it out of the car it still is no offense to all the gamer Bros with your shitty office chairs anyways this is why I've gotten into trouble in the past because my diagram here tried to make it clear that if I have something that's Edge and it has a runtime I need a name for that so it's been called Edge runtime I will be calling it Edge runtime going forward flame me in the comments because you're wrong and if you don't give me a better name then you're stupid so we're calling it Edge runtime because that's what it is The Edge runtime is an alternative to node that is designed to be way more minimal way more isolated and spin up really quickly Cloud flares work I forgot the name of cloud flares is it worker D is the name of the like the under the hood name for their runtime I think you get the idea it's meant to be a really minimal way to run JavaScript and have it spin up super quick so the two things that we care about are the edge location which is where is the code running and the edge runtime which is it is this running inside of node or is this running inside of something else usually it's going to be running inside of node but if we're in the edge node is not the best solution because of the cold starts because of that we're looking for something faster here is where my spicy take came in I didn't care a whole lot about where that first request was being resolved D from because the thing I cared a lot more about was the cold starts so I wanted to eliminate those so what I ended up doing is I took one of these Edge runtime boxes and I limited it to only use the ones near West 2 so I'm still hitting an edge boox but that edge box is not necessarily located near the user because I'm not picking it based on the user's location I'm picking it based on the database's location because I just want the page to load really fast and if you go to upload thing it's pretty stupid how quick things load sign with GitHub done page loads like immediately I'm clicking files now and it loads like instantaneously I'm going to settings now like the navigation experience of this is just incredible and that's because the edge run time that we picked gets a response out a lot faster because I have to wait to start up that said the biggest place you feel this is navigation and when you're navigating to the site for the first time if you have to wait for a cold start that can take sometimes even seconds it feels like so we need to be able to solve that if we're moving back to node and that's the key that I'm looking for in here how did we end up moving back to node without hurting the experience users have finally after long Preamble we're going to actually read the leeet so what is Edge anyways at least according to Lee Rob and our friends of versel we have too many products with Edge I agree first off versell has an edge Network a request comes in for your site The Edge region can go grab some HTML or JS for your site and quickly return it great yes we'll touch on this a lot more coming soon I think people miss the edge Network bit on versel and I think it's important to understand then sometimes you have routing rules when the request comes in redirect it proxy it somewhere else or add headers before continuing like with middleware you don't need to go all the way back to origin this is also great I think people miss how powerful this is if we go into like your next config in the next project you can do a lot of crazy stuff here like here with these async rewrites what these are doing is they're rewriting things that go to this URL on our site to us assets iost hog.com this is so that post hog and other similar things won't get blocked by your ad blocker because they're going through a URL that's on your specific domain this doesn't have to go all the way back to your node server that is running your nextjs in a Lambda in order to make this rewrite they just export this and then run it on the versell edge Network so your code doesn't even run when these get hit if you put like a console log inside of your middleware inside of your index.js or something like that it won't get hit because this is a configuration that for cell uses to send the traffic where you told them to send it rather than it hitting your service very very powerful the idea of a config file not just changing how your code runs but if your code runs and what your service should do instead of running your code very powerful so that's what they're talking about here let's keep going though sometimes those routing or configuration rules need to be read from a file we have Edge config which is like reading from a Json file in every region again still good Edge config is a bit complex uh Fair summary it's like a way that you can set some Json some key values that get persisted across all of your builds so that everything has access to it fair it's like like somewhere between a worker KV or like a key value store and environment variables Edge config is like right in between those two so what about rendering your application with the Ed not as great but Lee you said yeah I got to admit this one fooled me it sounded great at the start running close to the visitor makes sense if I con strain my site to use this limited run time and I make the trade-offs for access to the no. JS package ecosystem I can hypothetically get better performance this hasn't worked for two reasons let let me predict before we read any further it's the ecosystem compatibility and it is the database being further away those are my guesses oh yeah first and most obvious is that your compute needs to be close to your database most data is not globally replicated so running compute in many regions which all connect to a US e database makes no sense I believe many folks understand this but then maybe this limited runtime was better even if I only run it close to my database I am doing this let's see what they have to say well that was wrong too we tested it extensively with VZ using the node.js runtime with one virtual CPU which is their standard performance option for for sell functions has faster startups hate to call on a sponsor but I I want more info on this I want a lot more info on this anyways are there other reasons for Edge rendering if node functions can be faster especially with node 20 what about cost I expected an edge compute pricing model which is based on only paying for when your compute runs and never for Io would always be cheaper I also thought this this is not the other reason I expected very curious turns out that was also wrong it can be cheaper sometimes but not for all workloads so some Nuance applied here same story for security I wanted Edge compute to work but customers kept telling me they wanted a private connection to other services like forel secure compute or they had concerns or no interest in doing global data replication like data sovereignty yeah the global data replication thing I'm very very skeptical of in general there's so many weird race conditions and things about like data in different countries and worries about like how long does it take for a delete to persist and are you breaking the law if it doesn't happen fast enough like yeah there's a lot to worry about when you're replicating your data across the globe so what now it's a good lesson for me to be careful with naming and Nuance going forward also networks have got gotten really fast we saw with VZ that it was faster to do SSR plus streaming with node than Edge rendering I will say v0 might be roughly as like SF pilled as a service can be I would imagine that a significant percentage of the users of VZ which if you're not familiar VZ is versel like app code generator where you prompt it with something that you want like a a minimal homepage for uh YouTuber and this will quickly not super quickly but surprisingly quickly generate usable code based on Tailwind Shaden and all the funtech that I usually recommend for you to copy and yank into your applications and it is actual like react source code that's totally usable exploring the wonderful world of science it's even making up some funny copy for and but the code here if I click code you can even run this little command to get this installed in your project or you can just copy the pieces directly if you want to do that instead super super convenient powerful stuff I am regularly impressed with VZ but I will say I can't imagine a more like SF pilled thing I'd be very surprised if most of the users of VZ weren't at least like us-based so I don't know if this is the best test data but I I trust them I'm very curious okay this is the first place they mentioned the keyword that I've been looking for partial pre-rendering now we're running VZ with PPR to see if this is better or worse it's still experimental the summary of PPR is as follows user makes a request the edge region starts streaming back the HTML for the fast initial Visual and then your compute still runs in US e or wherever closest to your data so far this has been about 50% faster time to first bite than SSR plus streaming pretty amazing I'll be sharing more on versel function Improvement soon as well yeah that checks out I'll say I am surprised that just moving to node 20 resulted in that level of improvement my assumption was that they're moving off because of PPR for those who aren't familiar I think I have a full video yes if you want to check out my video on this I published it 5 months ago just search partial pre-rendering Theo you'll find it I'll give a quick overview but this is one of my favorite features that I think should have shipped day one with app router let's say you have this beautiful website this beautiful website has a nav bar it has a sidebar and it has all this beautiful content that requires some information that you should fet from your database we'll call it beauty is the name of our magical beautiful little site so I'm going to componentize this to be topnav I'll call this side naav and then we have main content so as I showed you guys before if we were to wrap main content in a suspense I'll just write out the whole mock code on the side here so we have HTML topnav we have the topnav obviously this is pseudo code don't roast me for not including things you want me to include main side nav main content you get the idea this is the HTML content well the jsx content that we'd have in our react app for actually rendering this content so this all seems fine so far but what if main content needs to make a database request that takes a while then we can wrap that in suspense cool awesome but what if this whole thing just getting this running in the first place there's so much JavaScript in this app that even getting a response in the first place takes a while remember that thing that Lee mentioned about the edge Network early on that we didn't go too deep on this can be used to resolve a lot of things this can resolve stuff that's in your public folder so if in public you have like your favicon or some other assets that you're using a lot those can be resolved via the edge Network you can also put some HTML in there so let's say on this page that certain sections that I'll label blue here are almost always if not always the exact same so these sections that I've now labeled blue will pretend these are always identical I'll make their opacity low accordingly so these both are always the same maybe there's some portion in there that isn't so we'll say like you have a profile picture thing in the corner so this section is dynamic and it has to be and this section is dynamic and it has to be why are we waiting for all of the JavaScript for all of this to load on the server before we start sending responses back to the user so like if the user makes a request then it goes through the edge Network then it goes to versel lambdas to spin up our code then it loads our code then it generates a response then and only then does it start to send what if we just stored these parts what if these things since they're always the same for every user were just saved and we sent those initially as everything else spins up and then we stream the rest in later when when it's ready and that's what partial pre-rendering is it lets you take these parts that are the same for every user and store them as HTML that gets sent immediately when the user requests and then the rest comes streamed in later so it's similar to the like suspense thing I showed earlier but instead of code loads First Response sent rest streams in it's user makes request immediately gets that first response and then everything loads and does the rest after but it lets you make things much much faster and you feel like you're navigating the classic static web with really quickly resolving assets from the CDN because you are you're getting the benefits of static for the static parts and the benefits of dynamic for the dynamic Parts all running in parallel It's Magic it runs so fast and if you can set up PPR and take advantage of these benefits you almost certainly should and it's something I've been very excited to do because if this works the way that it's supposed to for us I'd have no reason to be staying on edge so yeah I personally think PPR is the reason we can start moving off edge but I'm surprised after reading this to learn that their experience has been just node 20 being fast enough that's a very interesting and unexpected thing to learn so I'm going to be going to play with Note 20 after this also one more small thing I just noticed versell function improvements soon crab I wonder what that crab is for that's all I got on this one until next time peace nerds




## Vercel STORAGE__! SQL, KV, Files and more - 20230502
y'all didn't think we were going to miss the new for sale announcements did you come on it's just day one of shift week and they just dropped three massive new projects one of which we're actually competing with so it's going to be a fun thing to cover if you haven't heard already Versailles started their shipweek with storage day they shipped three new storage products for the different types of data storage you might be doing they already had an edge config type thing that was more for like environment variable type stuff but there was nothing meant to be written to regularly and updated constantly and today they fixed that with three new products the first one is a KV product it's kind of similar to worker KV or really rightes because it's built on top of redis specifically it's built on top of upstash's redis implementation just dope upside is a close partner of the channel they've helped us with everything from rate limiting to making our queries faster and it's so cool to see them being recognized by versel in such an awesome way now you can use them for a KV straight through versel not to set up a separate account super dope they also introduced versal postgres we're MySQL fans here but postgres is totally fine and it's really cool seeing Edge ready performant scalable SQL on versel as an option I haven't played with this one just yet but it is really cool cool to see and third and most interestingly bracel blob Roselle blob is attempting to make the developer experience using cloudflare's R2 better to compete with something like S3 we feel the pain here so strongly that we also today happened to launch our storage product upload thing so definitely check us out at uploadthing.com if you want to see a better developer experience right now because versels is a closed beta at the moment as exciting as it is you can't use it just yet so wait a little bit super hyped about what they have here we can even take a quick look at the developer experience of all these options so with the KV you see you can just import KV from versel and then await kv.get or kv.sat and it's that simple to update a value in your storage this is kind of what cloudflare used to do honestly when you deployed things on cloudflare through workers it would have like Global access to all of their magical packages and namespace stuff this is getting really close to that it's still imported so it's not quite as magical but I think that's for the better the results here something that feels very natural and slides right into your existing code bases and not just your next JS code basis anything you Deploy on yourself or sell postgres is similarly simple where you import SQL and then you write SQL strings here they didn't have support for much in terms of orms day one but they're quickly catching up I think I just saw Prisma made a driver I know that there's already a driver for kiesley and drizzle is about to release theirs as well so we'll see drivers to have more orem-like experiences soon for now it's just write the string inside of the SQL tags almost feels a little bit like a style components if you're familiar with that from the past I know throwback but it is really cool to see this also will run on the edge unlike many other postgres clients because it doesn't have to form a native connection it just does it all over HTTP they partnered with neon to do all of this we go down to the blob storage this is where things are the most interesting and arguably the least ready for consumption I'm super excited about what they're doing just because it's time for R2 to be more accessible but man it's missing a lot of important stuff like here we are putting the file through our own endpoint which means it can only be up to four megabytes since it's using putt there is no way to do pre-signed Post URLs there's no way to send larger files without having the either the client running the entire file of load process which means it has the secret or you're hosting a server and doing that yourself outside of versa so it's still early but it is very very promising I could even see a future where we moved to using versl blob at upload thing we are already playing with it but not ready quite yet super excited to see what verseail blob enables in terms of global distribution of your large files for a cheap price in a very simple developer experience that said if you want it right now pretty hard to beat what we have an upload thing if you're already familiar with something like trpc the setup is nearly identical and we support the app router too and Edge of course we support Edge come on you know how we are if you want to see how simple it is you define a router you can copy paste this straight into your code base here we have F which is the file writer because the different file types that are valid you go to Mac size then we give it a middleware which is a function that runs on our server and validates whether or not the user can actually upload the thing then on upload complete which also runs on your server this will handle anything S3 can handle we don't have a paid tier yet but it's unlimited use two gigabytes of storage for free We'll add paid tier soon and if you want to hear more about that I'll make sure I pin the video at the end where we announce upload thing and here you can see srsl specified the limits are pretty strict right now there's a future where they aren't as strict but for now the blob storage is just not ready for the heavy types of use case we do with everything from like video to weird giant resolution images to giant piles of metadata for AI training and stuff like that still really cool to see simple small image uploads supported with reversal I trust you face to figure out where the hell to stuff this bit so you quick look at the pricing there's no pricing for the blob storage yet but we can see the pricing for both postgres as well as KV scroll down here not too bad it's only one dollar per month per additional database which as much as I love Planet scale their per database pricing is significantly higher but the compute makes it a little scary because you're not charged by how many requests are made you're charged by the amount of compute that's run and that's not a thing you have too much control of because as your database gets bigger those queries might take more time and have to generate more cost in order to do the same query it's just kind of scary to me I am excited to see how cheap this is over time and honestly 10 cents per additional compute hour of 100 free hours pretty generous I'm excited to see how far we can push that and the storage total is interesting where it's only a quarter gig but it's also pretty cheap for additional gig so it's relatively fine the last interesting pieces that they actually charge for the amount of data transfer not too many other services do this however SQL data tends to be very very very small as long as you're not sending way too much data back and forth with your queries you're going to be totally fine here so I wouldn't expect this to get particularly expensive overall these numbers might be scary compared to other services when you consider how easy it is to do things like caching a response and not sending too much data these prices aren't the cheapest I've ever seen but they absolutely are the most convenient and I would be surprised if this was to get particularly expensive especially because you can use this alongside all of ourselves awesome caching tools so you don't even have to hit the database unless data has changed so if you let's say had an end point where you would update a user's profile you could have another endpoint where you fetch the user's profile that's cached indefinitely and the only time that cache is busted is when the user hits the user changed endpoint so you never have to recompute or run any of the things here until a change occurs which makes it way cheaper so pretty excited to see what people are going to do with postgres built into first cell I'll probably say on planet scale for a bit but this is still very exciting the other feature sure that's fully ready to go in beta with pricing is the KV it's built on top of upstash and the pricing is relatively similar you can see here it's one dollar per additional database or read replica if you want to distribute your storage across many places which is pretty cool that you could do that manually we also see requests per month 30 000 for free and Pros 150 000 requests that that Pro subscription for sales getting more and more enticing every day for 20 bucks a month to get some crazy stuff and here we can see another hundred thousand requests for only 35 cents so that's pretty good that's a lot of stuff and again with the data transfer in the storage these are priced identically to the database makes it pretty easy to reason about this isn't charging based on compute which is nice I was honestly expecting quite a bit worse and it makes me excited to play with these things and try them out since you don't really have to sign up or set up a new account somewhere or get a bunch of environment variables anywhere you just install the package and you're good to go so yeah I'm pretty hyped I can't wait to try these out more let me know which of these releases you're most excited about so I can be sure to get tutorials out as quickly as possible I'm so hyped on for sale shipping I'm sure y'all are going to complain in the comments but we're only just getting started so be ready I'm gonna do my best to get a video out every single day this week with all the new announcements that have been coming out so thank you guys as always really appreciate it peace




## Vercel put out a model (it's really good at frontend) - 20250525
The race to make the best model for coding with AI is insane. And there's a new entrance that I did not expect at all. V0 by Versel just dropped their own model. I really did not expect this. There isn't much in terms of detail for what that means. Like is this a custom GPT? Is this something they trained from scratch? It's really hard to know for sure. What I do know for sure is that they have a ton of data on inputs, outputs of code of endless source code that they can scrape and most importantly the feedback from people giving a thumbs up, thumbs down, retrying and whatnot. And it seems like they decided to use that to refine a model to make Vzero as good as possible. The result is that Vzero consistently makes some of the best looking UIs of any AI platform I've used. But it seems like the magic behind a lot of that is the model that they built that is now able to be used via API. This dropped last night, which was the 21st, relatively late at almost 8:00 p.m. Pacific time, which is the region they're based out of. I know that because I live relatively close to the office. Why would they drop this out of nowhere so late at night? The reason is because today Claude 4 dropped. You're probably watching this video the day or two after, maybe later. I don't know when you watch the video. I barely even know when it's going to come out. The point being, this model drop seems to have been timed as well as they could because if they had done it after Claude 4, it wouldn't have had any splash at all. Now, it still can. And there's a lot that we can learn from this model. I'm very excited to dive in with all of you, but as you guys know, Forcel and I broke up quite a while ago, so I'm not being paid a scent by them for this video. If anything, it's probably going to cost a lot of money because the price of the model is quite expensive. So, yeah, someone has to cover the bill. So, quick word from today's sponsor and then we dive in. Obviously enough, I just went and set this up in T3 chat. The actual official guide when I tried to do this initially is that you use the OpenAI helper from the AI SDK because they didn't have their own provider for it yet, which doesn't sound like that big a deal cuz like everyone uses OpenAI standards, right? This AI package that I'm using, including the SDK stuff here, that's all by Versel. So, I just thought it was kind of funny to mention that if you wanted to use this last night, you had to use the OpenAI package by Verscell instead of the Verscell package by Verscell. Anyways, after a little bit of finagling, I got it working relatively well. I just have it in my dev environment here, and we got it to start generating some front end. It wasn't the fastest thing, but it did generate a lot of it. And I wanted to compare this to some testing I was doing earlier today to compare the different models including 04 Mini, Claude 4 Opus, Clad 4 Sonnet, etc. I will say that by far the best looking one was Cloud 4 Sonnet. So if we go to the Tailwind playground, we can just throw this in quick. I have to yink this guy. Switch over to Tailwind 34. Paste that here. And now we can see what the V4 version of Claude was able to generate for my quick fake homepage for T3 chat using Tailwind. And it came out pretty good looking, especially when you compare to the other options. Let me just grab one of the worst ones quick. 4.1's was pretty bad. This is what GPT 4.1 generated for reference. Didn't handle text color right. Just kind of not great looking. The gradient's cool, although I'm sure that's going to compress like crap in the video. There's a reason I'm using a Chromebased browser for all of this. Gradients are hard for Firefox and video. So, how did V 0ero do? I have not looked at this yet. You guys are about to see my genuine reaction. Okay, it handles responsiveness better than all the others by quite a bit. Made these different sections testimonial section. It did a lot more like the actual length of the output is significantly longer. It was Yeah. 586 lines versus 106 versus 322. So double the length of the next longest. Very interesting. But it did it. It generated something pretty solid. But why would we care? What is the goal of this model? Their goal was stated pretty clearly here. Designed for building modern web applications. It supports text and image inputs, provides fast streaming responses, and is compatible with the OpenAI chat completions API format. Framework aware completions big deal that it is trained on data for things like Nex.js and Versell. I don't know how well it will perform for other things like spelt. You'll have to defer to Ben and people like that for this. Autofix, where it can identify and correct common coding issues during generation, which is really cool. Quick edit where it can stream inline edits as they are available. So it can stream edits down instead of having to stream down the whole new file. So if you're using this with like a canvas experience where it edits code in line and sends diffs, it's built to do that. Well, it says multimodal. I don't know if it can generate images. I'd be curious to see if I tell it to what'll happen. Let's see. Generate an image of what that would look like. I was going to ask it and see what it tells me back. It might just spit back base 64, which would be really funny. We have a capability to edit or to generate images directly. That's what I figured. Good to see for real though. So what's the deal here? Why would Verscell bother making a model? I think there are a pile of reasons why Verscell would care. The first one obviously enough is quality of output. I would say there's a side piece here of relevance of output. These models are trained on billions upon billions of pieces of data. And all of those examples combine together to make something that is very general. But these generalized models don't necessarily have taste because their goal is to have as much as possible, not as tasteful as possible. Recently, there's been significant amounts of effort put into filtering the stuff that's used to make these models as well as generating additional context for them. Things like Deep Seek R1 were almost certainly trained on the outputs of other models in order to make it more effective. As we run out of data to train against and we want more quality data that represents the things that we want the models to do. Having more data versus having curated data, the curated data is becoming more and more valuable. Makes a lot of sense that Verscell would want more curated data for a handful of reasons. One of the biggest ones is supporting new things Verscell wants to do. My honest guess is that some amount of the motivation here is because the cool things Verscell does now like server components, HTTP streaming with server sent events, the AI SDK, all the cool products, solutions, and stuff that Versell is building is new enough and weird enough that the AI models don't know how to use it. You could add a bunch of stuff to your system prompt. You can add a bunch of rules and cursor and whatnot, but anybody who's used a framework that isn't vanilla React and TypeScript knows how rough that can be. it will randomly just start hallucinating React syntax in your stuff. Versel is kind of lucky here where Tailwind and React and TypeScript and Next are prominent enough that these models tend to do them relatively well, but they're not very good at the new stuff, especially when they add these things in. As such, if Verscell can use rules to get it to start doing things more that way, get a bunch of data both from the stuff that they generate themselves to train on and also from all of Vzero's users, they can make something more refined. And that's I think the biggest thing they want. They want to make that thumbs up button more persistent across generations. What the hell do I mean by that? There are a lot of metrics that companies like Verscell or even companies like us with T3 chat have to know how successful the product was and to know how happy you as a user are with those outputs. So if I'm the company providing this experience and I'm relying on third party models that thumbs up thumbs down isn't making the model any better. It's not meaningfully improving the output in any way. Whereas on Open AI on chat GBT, they can use that data to refine the model based on the outputs people did and didn't like and steer its weights in a direction that makes more sense for their users. And then they go way too far and you end up with glaze GPT and the whole syphy thing. But Versell doesn't necessarily care about sycancy. They care about making a model that generates code that you actually like and also that code does the thing you want it to do. And ideally, it does that using tools that Verscell likes to use. That combination of interests makes a lot of sense for Verscell to use to go make a model with. They have all of this data from the generations people have been doing. They have all of this data from the thumbs up, thumbs down, and all the other metrics they can use to see how good those outputs are. And they have these things they want the model to be better at using that might not make it into these other models. And of course, the most important thing, they don't want to fully rely on anthropic. There's a lot of companies that are in this boat, ourselves included with T3 chat. Anthropic seems to have no interest in doing things like lowering the price. They don't have interest in adding a lot of other features we want like image generation, like better stuff for structured outputs, just a lot of the stuff more and more devs want and Verscell clearly wants that they're just not doing with the cloud models. There's even a good chance they got early access to cloud forks. A ton of people did and they didn't see it doing the things they wanted it to do. And with all of this combined, they decided the best bet was to make their own model. I wish they would have shared more details on what it meant to do that, but the fact that they did is pretty damn cool. I also think this is a bit of a hedging bet as we saw from GMO talking about it here. The first thing he had to say about it is that you can bring Vzero's brain to tools like VS Code, Cursor, Windsurf, Codex CLI, or whatever else you want to build. So, if you're using Cursor and you want the quality of output you get from Vzero in Cursor, you can now get that. This is a thing I've actually wanted quite a bit. There have been multiple times where I took a giant component in T3 chat that was in my editor, copy pasted it over to Verscell, ran it in V 0ero just to try and make it redesign it and make it look better. Then copy pasted the results back because it didn't have all the dependencies and API keys and all the other things I needed. And I was just copying back and forth between V 0 and cursor in order to get the output that I actually wanted because it was a decent bit better at UI than any of the things I had in cursor at the time. that has started to shift but vzero has maintained its lead in particular when it's using like shad cien and tailwind stuff the idea of using vzero the model inside of cursor is actually really compelling and it helps hedge a huge bet for them which is number five no one vibe coding tool will win as great as vzero is the likelihood that they become this massive thing and no one else is using any other web app is unlikely and if things like Bolt get popular enough and it's multiframework enough, the likelihood that that leads to Verscell's success long term is lower. If they have a model that is really good at doing full stack work and generates beautiful websites consistently, we can start relying on that model and no longer have to use Vzero the product to get the benefits of the work that Versell is putting in. You can almost see this as like a spectrum where there is how does a company make the AI generated outputs better. The first step is the model. It's pretty hard to make something meaningfully better than what the model can generate. But then the model goes through another step which is the system prompt. System prompt is the thing that basically describes to the model what it can do. For example, here's the T3 chat system prompt. We generate a bunch of parts that are the things that we want the model to know about and the things that we want it to know it can do. How to refer to itself, what model it currently is, all these types of things. We don't hide this because we don't care that much. It's not super important. A lot of companies are starting to open up their system prompts because it's not that big a deal anymore. It used to be thought of as the secret sauce you wouldn't share. Now it's a much less big deal, which is again part of why models are so much more important. You then have tools. Tools are the things that models are told they can do. If you've used cursor and you've told it to make a change across multiple files and you see it run GP to find the files to touch, that's a tool call that cursor is providing Claude the ability to use. Cursor describes a tool and what capabilities it gives the AI and then it can output text to trigger that tool, get a response, and then continue its generation accordingly. Tool calls have quickly become the bedrock of a ton of the cool stuff we see AI doing. And the system prompt has to describe what tools exist, how to use them, and what the format of the return will look like. You can almost think of it as like the system prompt are the type definitions or the JS doc tools as well as a basic description of what the model should do and how it should behave. And then finally, we have the user prompt. And as we know, users are diamonds. So the model has to go through the system prompt, which then gives access to tools. And then the final output relies on the user's prompt which then generates the output. There's a lot of alpha in tools right here. And historically tool calling has been the big thing that tools like v 0ero cursor etc have been focused on. Claude 3.5's huge win is that it was great with tool calls. And that's kind of what kickstarted its revolution of AI tooling that wasn't just text generation or crappy image gen. Tool calls have gotten so powerful that it's how OpenAI's image gen works for the most part instead of just diffusing an image out of noise. It uses tools to do things like render reflections, fix the lighting, make sure hands have the right number of fingers, add text on top of the image and render at the right angles. These tool call patterns are used to make outputs better and more reliable. And the results speak for themselves. These AI tools like like cursor is so much better now than it was a year ago because of this stuff. Also, I almost forgot obligatory. I'm an investor in cursor. I think it comes up enough. You guys know that by now. I have no financial tie to Verscell whatsoever though. So don't say I'm just shilling. I have lost more money on Versell than most of you guys have any idea. So anyways, so historically things like Vzero were really focused on the tool side, but now there's a lot of competition on the tool side. The model creation companies like OpenAI, Anthropic, etc. They're all making better tools and improving tool calls in their systems. Cursor is a very very well-unded company doing nothing but tool call stuff building the best possible editor experience. And as we established earlier, this part the system prompt is becoming less and less valuable. So if we think of this as like a sliding spectrum, we have no control over this part. We don't control the user prompts. We can like help them be better at prompting. There's even a button in V 0 that's enhance prompt to take the thing you asked for and make it better. But you're limited in how much you can do there. Obviously, it's the user, not you. tool calls is becoming this incredibly competitive space and keeping up with the best and keeping up with what users expect. If they really like the way the tools work in something like cursor, getting them out of that is going to be really hard, especially with the amount of investment going in. System prompts are commoditized largely at this point and even then they're like a really good system prompt isn't going to make your business successful at all anymore. So this is what we're left with and I think this is what happened at Verscell. effectively moved down the pipe from how do we make the best prompts in order to generate good stuff to what tools do they need to how do we refine the actual outputs through system prompts to the model and they have a ton of data on what makes the model generations good so the question now is kind of obvious how do we win here how do we go to this stage and make something that's more compelling so it can go through all these steps in other places be it T3 chat cursor codeex cloud code if it's forked and can be used with other things. Ader and all these other tools, the amount of options that we have here keeps growing. So thinking you can win by building the best option here feels increasingly dumb. As such, Verscell is trying to do the whole spectrum, but most importantly, they want to do that because if they succeed there, they have a really good chance of winning. I think this is a fascinating move. This is a really funny thing I didn't see because it ends with - MD for the official model identifier and it stands for medium but in the Tailwind string convention which is really funny because again really does emphasize their focus being Tailwind and good full stack reacty developer experience. If they were doing this alone, I would call them insane. But the Cloud 4 announcement today shows how valuable the space is because Anthropic, a 66 billion company, opened their announcement of Cloud 4 with Claude Opus 4 is the world's best coding model. There's a lot of opportunity in this space. And for a first entrance, this model actually seems quite compelling. I am excited by the outputs I've seen so far. I'm terrified by the price. I'm considering adding it to T3 chat, but it feels much more focused on your editor than your like chat generator. So, let me know if you think this is something that belongs in T3 chat. We would probably require bring your own key or make it premium messages because it's expensive and it outputs a ton of stuff. So, what do you think? Am I crazy or is this actually pretty cool? Until next time.




## Vercel screwed up (breaking down the Next.js CVE) - 20250327
by now you've probably heard about the Next.js security incident middleware can effectively be skipped entirely this is really really bad putting hundreds of thousands of Next apps at risk right there is a lot of subtlety here that we have to dig into there's a lot of things Verscell did absolutely wrong and I am excited to roast them indefinitely for it but there are other things here that are just fundamentally being misunderstood and for what it's worth I've never seen an app that would have been vulnerable to this despite the fact that I've audited literally hundreds of Nex.js apps that doesn't mean this is okay but it does make the characteristics of the exploit so much more interesting so if you want a video that's just going to bash forcell endlessly for bothering to ship Nex.js that's focused on people who don't use it at all go watch something else but if you want an actual deep dive figuring out what went wrong why we're here what problems led to the outrage and the incident in the first place and how to prevent these things going forward this is the video to watch i'm very excited to break all of this down with you but as Verscell is no longer a sponsor of the channel someone has to cover the bill so we're going to hear a quick word from today's sponsor and then go right back in today's sponsor is one of those products that I really wish I had used for more of my stuff because it would have made my life significantly easier and it solves a ton of problems I have every day that product is Convex and I could tell you all about how it solves the missing half of your React app but I'd rather just show you this is a real codebase using Convex with Nex.js and it's super easy to set up you might even notice the little Theo Brown in the corner here that's because it already has O set up too it's just one of the many things Convex provides for you nothing too impressive right well let's look at what happens if I open up another window with the same project i'll send another message and watch it automatically appears in both even though these are entirely different browsers they could be different networks different devices different anything as long as they're querying the same data it gets automatically updated the code for this must be super complex right well here's the message list i use query API messages list and here I list the messages where's the update well if we go to API messages list which you can commandclick we go into this convex folder in our codebase which has messages ts and here I have my list function has empty args we don't pass it anything and the handler an async function with context and I use that to get messages from the DB order by descending and I take the first 100 and now it just automatically live updates that's all you have to do there is no additional work to trigger the update simply by this query's data changing convex is smart enough to post and push out an update to all clients that are affected by that change and the result honestly kind of feels like magic not having to do all the work to keep different devices in sync with different states if I had used this for T3 chat all of our sync engine problems would be gone and if this was something that didn't scale that'd be one thing but the guys who built Convex are industry experts in scalable data solutions this stuff will run as far as you'll ever possibly need it to go they built Dropbox they know what they're doing so if you're building a React app that needs stuff like you know server functions database vector search cron jobs off file management type safety across the wire real-time updates any of these things I am very confident that convex is the best place to get started if it was just me saying it that's one thing but Tanner Lindsley has been telling me to take these guys more seriously and there's no one whose word I hold higher than my own than Tanner Lindsay so don't take my word for it take his and all the other people who are becoming obsessed with Convex these guys know what they're doing check them out today at soy.link/convex /convex so I have put together a demo app here to showcase the exploit there's a couple pieces I want to emphasize we have two different routes that matter we have this admin route that has a layout and a page we have the unauthor route which just has a page that says you're not supposed to be wherever you're going and I have this sensitive.ext this text data that I want to make sure only gets to a user if they're allowed the middleware is a function that runs between when next starts to process your request and the user who's making that request so if we diagram this out really quick the hierarchy of things should hopefully be pretty clear we have our user the user wants to make a request to go to some page the first thing that happens when the user makes the request is if you have a middleware file it gets hit so the middleware is this layer that exists between the user and whatever they are trying to do on your service the middleware will take this request we'll say it's to slashadmin and it will make a decision based on characteristics of this request as to where to send this you might have these two different pages we have slash unoff and we have slashadmin and the middleware decides where this request actually ends up going does it go to slash unauthor or does it go to sladmin in the code I've written here the thing that decides it is pretty simple i have this cookie that's super secure named is admin if you don't have the isadmin cookie set and the request is to /admin then I redirect you to /un so if I go to my service here and we go to /admin we get this you aren't supposed to go wherever you just went text but if I change my local cookies by going into storage cookies so if I go add the is admin cookie and set the value to true cool we now have this new cookie is admin and if I go to slashadmin again it lets us through so what's the exploit the exploit is a way to bypass that middleware layer with a specific header so if I currently was to go curl that page let me just open up my terminal and do that curl http localhost 3000 slashadmin it redirects to slash unoff and if I give it the header you know what I'm not smart enough to do this d3.hat write a curl request that hits localhost 3000/admin with a cookie named isadmin set to true thank you T3 chat we paste that and now we're getting an actual response that is the content of that page that we're not supposed to have access to this makes sense because I've put in the cookie if this was a real cookie for a real service that'd be fine obviously we shouldn't just check if it exists we should check if it's valid or not fine the problem is if we put in that specific header remove the cookie and instead add the following header give it the value true as well so here I am telling my server with a header that this is a middleware sub request if I copy this paste it it still is trying to redirect to unoff very interesting that does it okay that's silly so in order to bypass that cookie check we have to do this really fascinating call here where middleware sub request is middleware middleware middleware middleware middleware interesting that works though wild and this is obviously really bad if you're doing off in your middleware and someone hits your service with that very strange header they can now bypass all of the things you might have been protecting through middleware which if you don't know Next well sounds like the most terrifying thing in the world but here is where I'm going to start roasting Versel in a way you guys might not expect things Versel did wrong big thing number one middleware is terribly named verscell has this bad habit of giving things names to try to showcase the conceptual place it fits but not the actual use case or behaviors it's good for middleware is a term for a thing between the main logic and the requesttor for that logic but usually when people talk about middleware they imply something specific which is the thing that does all the common work between different requests if you're used to using tools like Express or backend frameworks in other languages middleware is the stuff that you use always every request goes through middleware and all of your O logic and things like that tend to live in that middleware layer the disclosure article even makes the same assumption here first off they call next a complete framework which if you know anything about Next you know it is not next is Next has no concept of author it isn't a complete framework this is bad framing and has me concerned about how much the researcher actually knows about what Next is and does it's not comparable to something like Laravel or Rails it doesn't have any of these parts and then they imply with the middleware that it's an important and widely used feature specifically for authentication and authorization if you've used Nex for a while a lot of red flags should be going off in your head because you should not be using it that way middleware in Nex.js is not a good place to do off next.js middleware is a glorified switch statement for routing when I was talking about this on Twitter somebody replied "Wait so it's basically just an early return?" Yes that is the right way to think about middleware and next the reason that this middleware layer exists is because you shouldn't have to boot up your whole next app to do certain things if you have a page that a user is trying to get to that requires them to be signed in it'd be very convenient if you could just redirect them to the sign-in page instead that is what this is for it is meant to be a route level helper generally speaking if you're hitting database and middleware you're using it wrong if you are protecting data with middleware you're using it wrong and I understand why people would not only have they named it terribly like this should not be named middleware that is not what it is i would name it like route interceptor or something cuz that's what it actually does nex.js's middleware concept is not what we know of as middleware and this has caused some problems in the past because one more fun fact Nex.js middleware doesn't run in Node yes crazy enough the Next.js Next.js middleware wasn't built for Node because it's built to run before the Node service spins up the goal of this is to let you not have to spin up your whole Nex.js app instead you have this tiny file that is fully isolated from the rest of your codebase that can do the little bit of work necessary to make sure the user goes to the right place the best case for something like this is handling stuff like localization if I have a user in a specific region that isn't English- speakaking that is trying to go to slashshop slid items item ID I might want them to actually go to slashen/shop/ite item/ item ID middleware is phenomenal at this this is what it is good for i can take this URL and based on characteristics of the request quietly rewrite it or redirect it under the hood i can redirect here but I can also rewrite here and now the URL that the user sees won't be different but the experience the user has will be they have added experimental support for running the next middleware in node if you're deploying on something like Docker and you want support for the middleware layer but generally speaking in those environments you probably don't want to be using the middleware at all because its strength is as a glorified switch statement not as an actual primitive that you're relying on to do anything in your app the middleware for all of the stuff we have shipped at ping is hilariously small if we hop to the T3 chat repo we don't even have a middleware in here yeah we literally don't but if I go to pick thing for example where we do cuz we use clerk there here is the middleware we have for clerk the clerk middleware here isn't blocking access to anything all this is doing by default is adding the right data to the headers for this request so that we know once it gets to our server who you are it validates the cookies so that we have them by the time it makes it to our stuff and even that isn't a great use case for middleware i much prefer doing this through stuff like TRPC if we find in this codebase I'm sure I have the API TRPC route and we can use this to follow back to the TRPC context here is where I'm actually checking off this is real code running on our servers for our next app that verifies off by calling the O function as soon as you call the O function anywhere in your codebase that isn't the middleware TS file this problem is solved and if you're doing something like in this example where we are reading the sensitive file we should be checking first that the person is who they say they are so if we don't have this is is admin call pass we should redirect them to the right place so here we're now doing this right we're checking cookies we're checking if the is admin cookie is set and if not we are redirecting the way that you would have done in middleware if you're accessing sensitive data in your code the path to that code ideally in the same place as that code should clearly call out who can access it and the permissions for that thing permissions are not a route level problem permissions are an access level problem and if you're writing code that allows for access to data blindly your routing table is not how you define what a user should or shouldn't be able to do and as far as I have seen there are no real apps that do their authentication exclusively in the middleware i've never seen that in my life the only reason you would do that is if you're coming from other frameworks and also frankly you read the docs without reading the details this is where I started to get spicy i was part of this long thread where people were talking about why shouldn't we do off in the middleware cuz other people like Shadex here said off middleware shouldn't be doing much other than redirecting you to the sign-in page if you don't have a session right be pretty scary to use that next middleware as your only access control aaron the creator of replicash and zero asked why not i said that next middleware is not part of the node runtime it runs before the next app is hit meant to allow for quick routing changes and not much else he then cited this page from the next docs that lists authentication and authorization in the use cases for middleware this is really bad that is embarrassingly bad so much so that I called it out here i said "What the are you saying in the docs guys?" tagged in Lee and within a couple minutes he had published a PR removing that section entirely because we should not be encouraging the use of middleware and next for off that's not what it's for it's an optimistic routing layer to send the user to the right place that's all it's meant to be for so the first big thing Verscell did wrong middleware is atrociously named it is not what that is for and I understand why people are confused because they're coming from other places where middleware means a specific thing and it doesn't mean that thing here i see one fair call out which is the only issue with using off code in your actual code like we did here with the admin check is that you can't cache it because it's not going to allow for static generation we're doing dynamic stuff yeah data that needs to be behind an off wall of some form should absolutely be dynamic you should not expose data that needs an off wall in a static fashion because you cannot trust the cache this is Colin's take on it if you're not familiar he's the CEO of Clerk we don't fully agree but I want to try and bridge the gap a little bit here colin tells that the sites that are most likely to be impacted by this are ones that are guarding static content via middleware the reason you'd want to do this is you have something like a secret blog that is being generated at build time you don't want that to be exposed you would use your middleware layer to prevent it i don't like the idea of a build step generating assets that are meant to be guarded via off there are too many different ways a CDN will deploy those assets for me to ever trust that so personally I would never have a build step that generates an HTML page that is now a static asset that is meant to be cached if I expect that data to be private the idea of static cache and private are contradictory in my head and I don't like the idea of trusting really anything to take static content and lock it down like that if you're already checking off anyways just generate the content dynamically or add a really light cache wrapper with unstable cache or the new next dynamic stuff use cache is actually a pretty cool primitive i don't like the idea of static generation generating private data that said there is one part I do agree with here which is that you should expect the middleware to always run that's the point of it the fact that this promise and expectation broke down is a fundamental failure on the next team i understand that is fair but I also don't think it should be used this way and the reason this happened is a gap in the understanding of the next team and how this thing should be used the next dev rails and education side and how it should be used in the public and what the word middleware means those three things not being aligned is what resulted in the outrage here and also resulted in the problem because the use cases for middleware the expectations of middleware and the implementation of middleware were not properly aligned also from Colin it's relatively rare to build a site that offers gated static content and we have additional protections for dynamic apps that access authentication data after middleware this is a thing and I have argued on a bunch as I mentioned before by default clerk would block any API access that wasn't a through clerk so if I have an endpoint like ai/stripe that's being hit by stripes web hooks it breaks if you set up clerk the way they did by default the majority of our tickets for upload thing for over a year were clerk because their defaults were and it took me over a year of pestering Colin and the clerk team for them to finally admit that I was right i had to fight for so long and it seems like they're still pushing the other way i still love clerk they're still my default off solution for almost everything I build but this is a fundamental disagreement I have with them about the role of middleware in next it's also worth noting that they initially came out saying that they were unaffected and then it turns out they were with a different additional header you had to add thankfully they addressed it really quickly and handled it on their server side if I recall they said that the developers using clerk are not impacted then followed up with this tweet is not accurate for all developers using clerk more info you call any of the following methods in routes protected by middleware your page or endpoint is safe yes if you call any O function anywhere in your logic you're fine the next point makes me want to rename this uh things that hurt Versel here going to rename this because not all of these are necessarily their fault the next point's an interesting one versel is having a full company offsite right now this is hilarious to me this the timing is so unfortunate but at this moment pretty much every Verscell employee is at a whole company on-site event where they're all hanging out together in person verscel is a super remote company so this is bad timing because having everybody in one place half of them on airplanes in the moment means your ability to respond to these types of things is not where it normally would be that combined with the fact that a lot of people have gripes against Versel this allowed for a lot of people who are angry at Versel to go off because security issues rightfully are a thing that we as a community are very sensitive to so if you're a person that has an incentive to make Verscell look bad you're going to take the opportunity and credit where it's due people like Dax were a really reasonable middle ground here where obviously they love dunking on Versel but they actually know Nextwell enough to know the characteristics of why this is or isn't a big deal which it isn't one more good note for my security research friend here Thomas it's also worth noting that if you try to use middleware in the way that it normally works which is adding a user object to the context then it's not super likely this affects you because skipping the middleware means routes won't have a user object in context very important point the value of middleware as an O check isn't that it's blocking you it's that it's adding information to the request so you could imagine how right here I might add new data to the response before I do the rewrite or redirect in order to have more context on who you are i use the cookie to check who you are get your user info and then add that as additional context on the request before it makes it to Nex.js as long as I'm checking the user object on the request somewhere we're fine the point being is that the only way this would affect you is if you don't do any additional off checks or even checking the data that comes from your off layer anywhere else in your app it's also worth noting if you use pretty much any of the tools that I recommend this won't be a problem for you either stuff like TRPC fully circumvents this by having its own layer that I showed a bit of before here I'm checking the O that is coming from in this case clerk that has been attached to the headers that exist in this request instance and now I have this session data all over so if I go down to my protected procedure code here if I don't have a session user ID I throw an error that makes it effectively impossible for you to access sensitive data that's behind one of these procedures because this code can only be hit if you have a valid session on the request more from ZM here this is what makes me a bit skeptical about it affecting next off which if you're not familiar next off is an open source package that's uh iffy on how well maintained it is it's hard to confirm but it seems like you can't just drop the entire middleware and have it fail my assumption there would be if you call any O check or user check anywhere that it will just 500 errors the data doesn't exist because you bypass the layer that adds that data the harsh way of putting it is if your app is able to be exploited by this there's probably a lot of other ways to exploit your app the only reasonable thing I could fathom that would allow for an app to be exploited by this would be an internal tool that has its own internal O that is exposed to the internet publicly for some reason where all signed in users have full permission to everything and you're using middleware because you're too lazy to implement any actual off anywhere else that's the only fathomable set of edge cases I can comprehend that results in this being an actual exploit which is what leads us to the next unfortunate thing for Versel the 9.1 severity makes people's brains fall out the severity that was marked for the CVE was very high because in the cases where you are using this as your only layer for off it's very severe the combination of high severity CVE the term middleware and the term off has resulted in our monkey brains creating a word cloud that makes this seem absolutely atrociously bad and I understand why we would get there if you're expecting middleware to mean a thing it doesn't cuz Nex named it wrong and you have had a bad experience deploying next other places because it's not built to deploy serverless in places other than Verscell and you see a 9.1 severity issue that affects off and middleware you're going to be outraged and that makes all the sense in the world what makes it much worse is that the majority of people talking about this incident don't even use Next this was so frustrating to me when I saw all the posts about this and the severity of it every single one of them that got over a,000 likes for the first 24 hours was somebody who doesn't actually use Nex.js at all or understand it there are people saying "Wasn't Versel late to the fix?" Okay here's the timeline 227 the vulnerability report between the maintainers they did specify an old version second follow-up 2 days later saying that all versions were vulnerable including latest stable releases initial response from the Verscell team saying that version 12 was no longer maintained another follow-up email the same day saying the team would take a look at the second email security template 311 another email sent to find out whether or not the new information had been taken into account okay so this doesn't clarify these two are follow-ups that the researcher did so it seems like this is another one of the misfortunate things original report was for a version of next that is no longer maintained and the discloser updated that report instead of filing a new one this is not an excuse this is a a bad misfortune of the nature of how these things are managed internally by the time Verscell confirmed that they had this new information it was being taken into account they had patched it within 24 hours by the time Verscell actually knew and understood what this exploit was it was patched insanely quickly the problem and this isn't a fault of the person who reported here the discloser made a reasonable assumption that they could follow up the previous email and whatever system they're using to triage all of this internally made it less clear that this was a big deal apparently Verscell has their own proper timeline breaking down a lot of these things too the audit disclosure that was initially for old versions initial email got sent in a new thread which extended the affected scope multiple reports submitted internal conversations triaging was delayed they started planning on the 5th outlining plans to do an LTS policy which would place Nex 11 and 12 out of support security team raised the report to the next team to begin researching impact and remediation options the next engineering team confirmed the vulnerability as valid since Nex can be hosted multiple ways they had to confirm all the different ways they found a validation method that handles almost all the cases published the patch published the CVE made it public the CV did not state immediately whether Verscell applications were impacted it was later updated we quickly published a change log on Verscell stating customers were protected change log used the same template from our last resolution which mentioned our firewall this was another one of those owns and I'll put that in the list seven versel Disclosure had an ad for their firewall product another massive misfortune cuz they were rushing to get this out when they did that they used a template from previous issues that included an ad for the firewall which made it look like an upsell which is not fortunate i did see a lot of people skeptical about why this wasn't published on their socials and all these other things and I would like to remind them the whole company was flying out at that moment a lot of the people who would have done those things are people who are remote that have to fly so it makes all the sense in the world that they were offline i even talked to a few of them they're like "Holy what happened when I was in the air?" Here's their technical analysis pattern that some Next applications adopt is using middleware to optimistically verify a user's off state by checking cookies if an off cookie is set you can early redirect to the logged in application or block specific routes we do not recommend middleware to be the sole method of protecting routes in your application and if you read through the docs and see how they recommend doing off they are clear with that even if the one page on middleware was unclear about that and that page was horrible they should not have discussed it in the way that they did big mistake on their part but the docs themselves as you go deeper do clarify this the reason that they even have this header if you're curious why would this exploit happen is to prevent recursion so if I have this internal API endpoint that gets the sensitive data and I want to call that from in here the call I make in here to get that data const from API equals await i could even do / API here this shouldn't have to go through middleware again because it already did and you can see how quickly we end up in recursive hell if all of these are calling middleware getting redirected or rewritten to the wrong place people have gotten some pretty scary versel bills because middleware failed and they got stuck in redirect loops which is why they added the sub request functionality here in order to prevent middleware from being hit on these internal requests it's very unfortunate you could hijack that externally by applying that header but when you remember what the goal of middleware is which is an optimistic layer to run between the user and the server it makes sense it's just a a bad set of intentions for the product name and marketing of the product implementation of the product workarounds around that implementation for edge cases within the product communication of all of this and the process to get these things reported and triaged all of these little pieces collided in something that results in to be frank really bad optics this sucks for Versell the ratio of affected users to brand hit that they're going to take here is absurd but it's also somewhat deserved because a handful of these mistakes are entirely their fault and they should have done more before i have been yelling at Verscell for how badly this is named for a while i've also been yelling at other companies for recommending middleware as an off layer for even longer i have been roasting Clerk for over 2 years about this and the reason I've been roasting Clerk for so long is that most of our requests for support in the upload thing world were because their default middleware blocked upload thing it also blocked web hooks it also blocked Stripe it also blocked pretty much anything you can do with TRPC by default because middleware is the wrong place to do off blocking if you want to prevent a user from accessing something the thing itself should check i haven't read this part yet so I'm curious what Verscell's next steps are the first big piece is they're doing a partner mailing list they're opening up this list for companies that host Next so that they can disclose things privately first before they go public they're also going to simplify how issues get reported they've consolidated security at Verscell and responsible disclosure at Verscell so that they both use GitHub's private vulnerability reporting this is a huge thing my guess is that the email about this report went to security at Verscell when it should have went to the responsible disclosure email because this one goes to the Verscell security team which has nothing to do with the Nex.js open-source project team they're also improving how the teams actually respond to disclosures and enhance their runbooks when Next.js vulnerabilities are disclosed long-term support they now have an actual LTS policy which I guess they didn't before which is interesting deployment adapters vulnerability relied on an internal header that was undocumented that's Yeah yeah it's also worth noting that Cloudflare in their attempts to fix this broke a bunch of other things with middleware so yeah and then we have the security assessment we're further investigating if there are additional places to improve the security of middleware all subsequent issues uncovered will follow the new CVE process good finally I do want to showcase one rough thing though you might have noticed I put this layout here why why would I care about writing a layout here the reason is some very unintuitive behavior that bit us originally when we put upload thing at first if I was to go back to our little diagram I drew earlier we can think a little deeper about the hierarchy here after middleware we're actually going to the app and that app has multiple layers let's ignore the unauthored path for now we'll just have the happy path the user is trying to go to /admin but we don't go straight to sladmin we go a few other places along the way first we have to go to the root/ layout the root layout is this file here that handles things like your fonts your metadata and it also generates the HTML in the body this is the first thing that is hit when a request is made to your service after the middleware so once the middleware's approved or rejected the request added whatever it's going to to it the root layout gets hit then the child that gets mounted the children here are whatever the URL dictates based on the URL you have so if you have multiple layouts throughout the URL because every chunk of the URL can have its own layout those layouts get hit and then you get to page tsx so the child of this body tag here is going to be admin layout and then the child of this is going to be admin page so we get the root layout then we get admin layout and then finally we get admin page this is the layers a request goes through in order to properly get generated in next so you would think off checks in these layers would protect you if I had an off check if I just moved this out of admin page and instead put it in the layout here this all seems fine and dandy and it might even work if I remove this cookie yeah or is that because the middleware is doing it that might be because the middleware is still doing its thing let's comment out the middleware cool there we go you can't see the URL because it's being covered by my face but it did change so I have this to sladmin and when I hit enter it gets changed to slash unoff because that is happening in the layout here because I have a redirect to slash unoff if you hit that case why am I talking about all this well it turns out if you can get through this layer in any way you can access page data for anything so if you're checking your O in layout the separation between these sections is great enough that you have a vulnerability there as well so if instead of /admin I'm going to a user profile we'll say it's user one and then we go to user 1's page if I can break through here via user two it is actually possible to get in a state where from the user 2 o check you passed you can hijack the user one page so you can desync effectively the layout that you accessed and the page that gets rendered underneath it reproing this is nearly impossible it requires some crazy network reverse engineering tools that I do not have but somebody was able right when we dropped upload thing to add and remove files from my app through their dashboard by circumventing that layout genuinely terrifying so this is something that no one talks about i know that because when I ran into the problem people thought I was insane the official Versell recommendation is to not off check in layout not do anything but rendering your layout in layout but this is scary this is very scary so how are we supposed to do O if we can't do it in middleware and layouts verscell has this awesome article that Sebastian wrote a while back i did a whole video on it this is where the taint gets introduced if you're not familiar watch the Theo React taint video it's a classic their recommendation is that you pick between a couple different options your data should be accessed through one of these HTTP APIs like classic you have an old service on Python or Go or something and you're just using Next to hit those even on server side you have the data access layer which is what's recommended for new projects this is what we use for all of our stuff if you're using tRPC as your layer for getting data you're using a data access layer already and then the component level data access this is for prototyping and learning in their words like what I just did here where I'm accessing data by just reading it from file system that is component level data access if you were calling SQL directly in line here same deal the data access layer is their recommended way to do things and they even have the example data/off where I have my get current user function that gets the O cookie decrypts and validates it and then returns the user now I have my serveronly file in data/ userdto can see username viewer user public info return true can't see phone number viewer is admin or team equals the viewer team get profile DTO we grab the rows where it matches the slug we get the current user return username can see username we show it phone number can see phone number show it the point here being any data that is accessed in your app needs to be broken out into an access layer of some form both for the sake of maintainability and code review if you don't do something like this good luck but also cuz it's the right way to do it safely when you have one thing to check off and all of the functionality that requires O exists in the same folder and you can check each function to make sure it's checking great or if you have an API system like TRPC GraphQL or an external service using something like Express you're good the important piece to understand here about next is that to go back to the article here next is not a complete framework this is not a good framing of what next is when I hear a complete framework and then you immediately follow that with middleware the expectation is you're comparing this to something like express or nest.js that has a real middleware concept that has a real off concept that has a real context and all these pieces next.js JS to its strengths and weaknesses is a very primitive framework it gives you the pieces to assemble the same way that React doesn't really have a concept of global state and you have to add it yourself using the primitives next doesn't have a concept of global O and you have to build it yourself using the primitives that is why I love Next but it's also why Next gets thrown into so much all the time and it's why a lot of people do things so terribly with Next it's the reason you can squeeze out unbelievable performance in it it's the reason T3 chat is as good as it is because I could turn off all the next stuff I don't want and work around certain parts to add my own solutions but it's also why there are some terrible performing next apps because if you're using those primitives wrong or you're making bad assumptions about them it's very easy to build something slow one of the most common performance issues I've seen in next apps is using middleware for something really slow like checking your database if your database is slow to respond adding a middleware just made your entire site significantly slower generally speaking I try to not include middleware if I don't have to and if I do I make it as fast as possible find cache layers to avoid it being hit and then make sure I match out any static content so that it only gets hit during routing funny enough next is currently working on some new functionality that's inexperimental for not implementing off like they're not giving you an O check function but they're giving you helper functions you can call when your O checks fail so if I have a verify session function from wherever I'm doing my O check and the role is not admin in this case and we're on the admin page I can call the forbidden function as a helper from next to get you out of this path but that is what next's concept is it's not how do you do off it's little primitives for how to get out of it one more piece of note with these forbidden helpers is you cannot call them in layouts you can only call them in server components actions and route handlers which prevents them from being hit in the insecure case with the layout wrapper that I just showed this is an awesome step in the right direction but again the direction is primitives next isn't a complete framework that provides these concepts in depth next is a primitive framework that adds these concepts as pieces you can assemble and build yourself this only says root layout can you call that in other layouts like nested ones it just says root layout i don't care enough to try it but I might have been wrong with this not working in layout and if I am hey Versell hey next team i know you're watching this these functions better not work in layouts don't do this to me you made this hard enough as is my requests to Versel these are the things I think should happen to make my life easier so I don't have to deal with these things as much in the future rest one obviously jump on CVS really hard and really really early duh hopefully I don't have to clarify that point two please stop using names that don't mean what they usually do the classic example I've been bitching about here forever is use client i still think this is one of the biggest fumbles in modern software design not use client use client is fine the problem is the mirror use server if you understand what use client does you almost certainly no longer understand what use server is for because they have almost no overlap between the fact they're meant to be used together there's a great Ryan Dah quote from his talk 10 things I regret about Node where he effectively says "If you're thinking of an API design decision and your feeling is oh that's cute i like it scrap it these cute decisions do nothing but cause you pain long term." And Nex.js has made a handful of these that make me feel sick i hate the way that these things get named sometimes and it is very very frustrating then again I still defend names like edge runtime because funny enough that one actually was coined at Cloudflare even though people at Cloudflare have on ourel for using it's a whole thing names need to not be colliding with existing concepts in people's heads if they have a concept of what middleware is they're going to assume when next adds middleware that it is the same thing they are used to even if the dictionary definition of middleware does meet the way Next uses it it does not meet the expectations that users have with this word we need to stop doing this it does nothing but make our lives harder both me as an educator and you as the provider when these things are named poorly everyone's job becomes more difficult and we are just waiting for incidents like this i firmly believe if middleware was named correctly this would not have been an issue at all if this was route redirect layer can be hijacked and skipped no one would have talked about it but that adds to point three which is audit your bullet point lists this is the third or fourth time one of these bullet point lists in the docs has screwed us i am so tired of this problem the bulletoint list shouldn't be every theoretical capability of the thing it should be the golden intended use cases with very clear blinders showing where those limitations are this happened in the past when server actions which are very specifically for actions that cause changes mutations so to speak destructive actions a server action the way it was implemented for the last 2 years should not be used for fetching data because if you have two components that need data and they're both doing it through server actions they are blocking sequentially you can't do two server actions at the same time it is a terrible API for fetching data but they mention in one of these bulletoint lists near the end by the way you can technically use this for data no you should not do it the point of a summary list isn't to show all of the capabilities it's to show the intended ones and the screenshot I showed earlier that Aaron dropped is very damning this page should not have existed in the state in the docs combine this with the fact that it's named wrong and now there's a security incident this is preventable a thorough audit needs to be done of the next docs as well as the rest of the Verscell docs to make sure every instance with a bullet point list does not include things that aren't the recommended path this is really bad and it needs to stop and this one is small but I think it's important i don't know how much REL could even do here we need to market Next not a competitor to Laravel next needs to be better understood as a set of primitives people from the security world for the most part don't know anything about what Next is meant to be used for they see Next as an alternative to other fullstack frameworks like Rails and Laravel the thing that makes Next great is similar to the thing that made React great when everyone else was providing these all-in-one solutions React focused on giving you the primitives for good component architecture when everyone else was focused on full stack frameworks that support every single edge case and use case and package you can imagine Nex.js made it easier to have your backend and front end interact i don't know how we solve this problem i'm doing my best on my end but the idea of Next as a set of primitives that you assemble is really important but part of that is make sure the primitives are named accordingly i know this is what I said here i really want to emphasize this point if people are mentally mapping next to Laravel then they're mapping the terms between the two as well if middleware means one thing in Laravel and it means something else in next no one's going to get that since next is so different it should also use different terms and I am so tired of dealing with this and once again I hope you guys understand i have no financial obligation or tie to Versell i have more investment and financial tie to most of their competition than I do to them at this point i have biases because I'm friends with people who work there and I'm using their product for stuff but I hope the fact that I tore them to shreds here shows that I'm not just trying to protect them from something they made a shitload of preventable mistakes here and they need to fundamentally change the way they communicate about a handful of things in order to prevent this going forward this almost feels like the inevitable conclusion to things I've been bitching about to them both publicly and privately for four plus years now they're not scared of inventing new names for rendering techniques why are we scared of inventing a new name for something that isn't middleware and I knew this one was going to happen too when everybody was complaining about middleware not running on Node I knew this was a problem i really hope the severity of this incident shows them that my bitching about the name problem isn't me just bitching cuz it's hard to teach people it's me concerned about these misunderstandings and the ways that they cause problems and all of that said as I've diagrammed now multiple times and shown you the examples of it is genuinely hard for me to fathom a production app that was genuinely insecure as a result of this vulnerability which means that the CVE rank doesn't feel like a good fit and the outrage everyone had online doesn't either more apps were broken and made insecure through Cloudflare's attempt to patch this than were insecure because of it in the first place and if anyone has an app that actually was made insecure as a result of this and they're down to share the source code with me I'll give you a free audit i'm genuinely curious because it is so hard for me to comprehend what an app vulnerable to this looks like and my honest guess is that app is vulnerable to a lot of other side chain attack style things as well because if I can get through your middleware at all and that's the only place your off checks are happening there's a very good chance you're exposing that data incorrectly somewhere else so to summarize the versel has a lot of to fix and how they communicate stuff i don't think anyone's actually affected and I'm very curious if you are and everyone who's been outraged publicly about this has outed themselves as someone who shouldn't be listened to in discussions about this because most of them are clearly very biased and or unaware of what this actually was i am amazed at how many people outed themselves as untrustworthy sources throughout this it is quite frustrating but it is what it is credit where it's due a handful of people when I reached out recognized that their understanding was entirely wrong and took down their bad posts and updated them accordingly but for every one person who did five didn't and I have seen so many viral posts that fundamentally don't understand what happened here once again huge thanks to everybody who stopped by to help out throughout this appreciate each and every one of you guys i've been talking to everybody from security researchers to the Verscell next team to actual people deploying these things in the public oh and great uh the forbidden helper is available in layouts Verscell and one last piece if you want to better understand how to do O right I have two videos this one's much more recent where I go through all the different O providers that exist and the differences between them and how to set them up properly good thing to watch if you want to better understand how to authenticate your apps safely i think that's all I have on this one keep your app safe until next time peace nerds




## Vercel's Got Some New Competition - 20250119
over the last few years companies like versell have made it way easier to deploy backends for your website but what about everything else in particular what about mobile mobile needs backends too and not just an API that can send to Json it needs a lot more as of today we have an answer to this problem Expo the company that made react native actually viable just put out their own deployment and hosting service which is very interesting for a ton of reasons we have to talk all about why mobile deserves its own backend and specifically we need to go deep on server driven UI for mobile there's a lot of cool stuff here I can't wait to go through it all with you do some diagramming and even deploy an app using it but first a quick word from today's sponsor today's sponsor is infinite red and if you want to build with react native you should talk to these guys they are the industry react native experts while they are paying for this time they are not paying me to say anything specific so I'm going to be real with y'all there are very few people I trust as much as infinite red when it comes to react native from the chain react conference to jam their CTO being one of my first fans and the first person who invite me onto a podcast yes really these guys they're deep they know their stuff you can take my word for it or you can look at the huge pile of companies that they have worked with from Zoom to merari to Blue Jeans to seed dominoes and more they've been helping a lot of companies make react native work not just okay but really really well whether you're trying to speed up the development or experience on an old app you're trying to get your web devs to be able to contribute or you're starting a new project from scratch especially if you're building with AI these guys know their stuff they're paying for this time slot but they have not told me what to say so I'll be real they are the only people I would hit up if I wanted to build a new app today hit them up at soy Dev dling infinit red tell him the oena I'm really excited about this the Expo guys are great account for some bias because I'm friends with the team but I've also been very critical of their stuff in the past they know I'm not going to hold back at all here we'll see how this all goes I am excited though in particular I'm excited because of the early call out here for Server driven UI in Native apps we're going to give some examples of server driven UI using the Facebook feed hopefully we're all familiar with what a feed like Facebook looks like here we have a couple different types of posts in this feed we have a photo post a text post and a video post we can even pretend that this is all a real API that we're getting back Json on here's an example of a photo post that creates that let's make a video post now okay I'm only going to mock out these two but you get the idea we have types of posts the API responds with an array of posts that has these Json blobs so we have a photo post that has all the things that this needs that renders we have a video post that's all the things the video needs that renders but what if we add a new post type let's say it's a holiday let's say we are celebrating Valentine's Day and we know how much Facebook loves their gimmicks let's say we have a Valentine's post it's a new custom type of post it's only going to exist for a little bit I'll even draw a little heart look at that I'm such an artist so now we have this new special Valentine's post and we make it way simpler happy vday cool hopefully we all understand what I've done here we have a feed that has post types I didn't make one for text post CU I'm lazy each of these is a Json blob that comes from an API as its own shape for the data that we then have to render in the UI but how do we actually it this is where things get a bit more complex we need to figure out how this Json becomes content but first i'm going to change how we think about this a teeny tiny bit instead of the feed having these nice formatted posts in them pretend they don't pretend the feed just has this Json blob in it instead and that we literally just Fetch and get all the Json blobs directly hopefully we can all imagine how this code works this isn't going to be a great experience for users but the point here is that we go to the server hit the/ API feed and then it returns all of this data and now we can render the Json itself in all of these blocks totally fine but we're not going to just render the Json we need to turn this into something and all of these things are slightly different in a photo post we need to have that album layout that shows the multiple photos in the video post we need just that one video that uses the video player so we need to mount that there the Valentine's post we might be doing something entirely different so if we did this with JavaScript to react code we could say the photo post has a photo view that's photos are post. photos then it has an author ID equals post. author so we have this for photo post but obviously video post is going to be entirely different so this video post has a video player the video player takes in a video URL which is post. video. URL these are entirely different from each other there's basically no overlap and if you think you can write a single component that handles all of these cases you don't have a real job in Fang companies because there just every single pm and every single designer is going to have some weird specific thing you need to do to some specific post type that's going to require that post have its own component entirely so what happens when we want to make a whole new one well we can do it we can make a Valentine's post that doesn't have anything special here maybe it's just like the Valentine's animation it doesn't take any props just the thing that's always in Valentine's post it has like the text content text equals post. content. text you get the idea so where does all of this code come from this is where things get fun when you're using an app even if you're not using a react native app when you're using any application that is fetching Json from a server it has to turn that Json into something you can see react is one of the ways to do that but there's a lot of ways to do that the catch is that you need to have every single possible thing the backend can send you encoded in the app binary to transform it because we didn't have a Valentine's post component in our code base and we get a Valentine's post from the API it doesn't know what to do with it so it just doesn't render it or it renders an error or it throws or tries to stuff it into the wrong shape and it looks wrong this means that we kind of have a desynchronization on the state between the client and the server because if the client is on an old version of the Facebook app and they don't have the Valentine's post binary in it yet they don't have the component that they can use to transform the Json into something you see you're kind of screwed you don't get to render that if you don't have the thing to render it with so if the backend changes what types of post exists or adds more things to the posts we don't have the code to render it unless you've updated the app but app updates aren't a guarantee when you push a new app to the App Store you have to wait for Apple to review it you have to wait for them to approve of the changes and then deploy them which can take days sometimes even weeks after that you have to wait for the app update to roll out to users and that can take a wide range of times we even ask how obviously I have to do a T3 chat plug you guys understand how long does it take for most of my users to be on the latest version of my IOS app after I release it so the first week 20 to 40% of users might update first month 50 to 70 and then 2 to 3 months in maybe you're at 90% this is pretty accurate from my experience it's bad and this sucks because if you decide let's say a month before that you're going to do a Valentine's post even if you start working on your Valentine's Post in January you're kind of screwed because doing that in January isn't going to save you if only 50% of your users are going to be on the latest version in time like what it's just not viable and hopefully this makes you realize we need something better the problem here and this might be controversial the problem is that we're not returning the right thing from the server what we return from the server is just the data and we hope that the app has the right thing it needs to transform that data into something the user sees What If instead the server returns something different if we take this photo post blob here for example actually we'll take the Valentine's post because that'll be even easier let's say for the Valentine's post instead of returning text date author we return header and this is a div that says Valentine's Day we'll even string wrap it let's say for the date we return div sure let's say for the body we'll do a I don't know div image source equals SL fancy animation. SVG you get the idea what if instead the server returned what should be shown instead of what data should be transformed into what it shown you could even send other formats but Json is a standard it's what everyone uses for almost everything but you could return XML or HTML these are the patterns that something like HTM X is built on instead of sending Json back and forth between the client and the server what if you just sent the actual thing that changed on the page we've been doing this on the web for a while like finding different ways to not have to send data to the client but instead send what actually changes to the client but it's more important on mobile because on mobile you're stuck waiting sometimes months for your user to actually be on the latest version of your app so if you have a feature that you want to show to the user that isn't in the version of the app that they are on you're kind of just screwed and that's why pretty much every big company has moved their mobile apps over to a server driven UI model and that is what server driven UI means it means that instead of the server sending data to the app to then transform into UI using the code in the app itself instead the server sends the UI to you and the app just renders what the server tells it to crazy Paradigm I understand why this is not something we all just understand we expect our app to just have everything you could ever see in it in it but as mobile apps change more and more over time and new features are introduced to products and we actually want to get them to those apps we need strategies like server driven UI to make this happen if you've been around for a while this might sound somewhat familiar this might sound quite a bit like server components instead of the server sending Json and all of the JavaScript to render it is on the client a server can send what the UI should show you instead said this is also part of why react native is really strong for these situations because despite what all of the like anti- react native people will tell you react native is native so if you have the box in your phone that is like your native sdks think of this as stuff like the native button on iOS or the tab bar or all the native text rendering features all of those things if you're building a native IOS app today there's a decent chance of using Swift UI for it Swift UI is a layer that commands the native sdks on iOS to do things all react native is is just a layer on top so react native is just telling Swift UI what to do which then tells that native layer what to do is it an abstraction sure but it's only one level higher than Swift UI is usually they're actually couldn't call some core UI kit stuff and the old Objective C code but they are moving more and more over to Swift the point is that react native isn't rendering a web view react native isn't controlling everything it's not the alternative to writing a native app it is just a way to tell native what to do so instead of writing Swift Code that tells the native SDK to go do something you're writing react native code that tells core UI kit to tell the native skdk to do something what about the server driven UI let's say we have a native app that's written this way so we have our API over here this API returns something in the shape that I just showed you it says like what buttons go where this will get thrown to some conversion layer and this conversion layer takes whatever the API sent and transforms it into the different core UI Primitives that are necessary to actually render this on your device that conversion layer is something that you probably have to write yourself if you're building a native app but if this is just react native in the API returns server components you don't have to go build all those parts yourself anymore and a big part of why big companies have been able to run circles around small ones on mobile is because they have the teams to build all the necessary pieces to do server driven UI but server components are just the standardized version of that for everyone which is really cool a lot of the server component patterns came from meta because they were building similar things to do this on mobile and a lot of their lessons are what they've encoded into server components and now Ser components with react native it's really really cool that have been stuck with for a while is called code push so if we change this to be Json apis then we need every single thing this react native could possibly render to in this bundle we have to have every post type we have to have Valentine's post we have to have video post we have to have picture post they have have all the post types the way codepush works is we take this binary and we can swap them out ourselves and hope that Apple doesn't notice or care so we can swap this in and then once the Valentine's post is done because it's no longer Valentine's Day we can just delete it from the binary and be fine maybe we add another here like April Fool's post so we have to have these two different layers that we have to work hard to keep in sync we have to make sure the Json API never returns something that the current binary version doesn't have and we have to move to the right version and have all the code in our native app to make sure that the right set of all of these things is in it at all times to transform that Json into the right thing on your phone or we can just use server components and this is why the pattern is so cool so let's actually read more about it Expo has actually introduced API routes that can be used to create endpoints for your app as well as secure environment variables and static generation for your web pages all built with Universal react server components this all worked great locally but deploying it was hard agreed historically recommended deploying X webs and Universal API to traditional hosting services that are focused only on the web but these services for websites traditionally don't integrate with the platform's native app face yep new versions of your server may need to be deployed while new versions of your native app are being pushed to App Stores different versions of your native app may need to have the request routed to a different version of your server so that you don't send a changed API to an old client observability of servers for critical metrics such as feature option by platform become more important for expon Native apps yes now esas hosting solves most of this let's just make an app it seems pretty easy and while I am not necessarily the smartest we'll see how well I can deploy a mobile app from scratch create asli create a new Expo app pnpm create Expo app latest cool um Expo deploy demo pmpm run web and just run the web version but you could also run iOS or Android by using these different commands and you can either scan using the Expo app on your phone so you can have a preview on your phone as you're working without having to have all the crazy Dev stuff set up even on Windows or you can just run it with the simulator on here if you have that set up already so here we have a basic Expo website that would also work on mobile as the tabs you know what let's see it working on mobile I'm curious pnpm run iOS now I have have a fake iPhone here that has the same exact app look at that pretty cool right let's get it deployed Expo export P web static render enabled cool so we're going to get an actual static site for this then e deploy creating a preview URL now we're hosted that was hilariously quick actually I'll paste the link if you guys want to see it yeah we're now live on the web see if I got the test. expo. apppp did I get that domain too I did not still super cool though oh when you're ready to deploy to prod that's how you do it nice so you actually have a different prod deploy command prod toplay is done does this URL work for for others it might be a bad cash yeah cool bad cash okay now it's working pretty cool and what does the server return on these routes I said it was static we actually take a look we go to explore it's not doing anything when I switched to the tabs are those even different URLs oh they are different URLs it load all the contents it's not doing another Network request what does this return let's take a look at all this HTML explore and get a fresh start Does it include the other tabs is what I'm curious about it does not okay so that means the other tabs must be included in the JavaScript that gets sent down assuming in this content we can again command F in here for get started no h entry there we go cool so this entry bundle is where all the different routes are being stored what's interesting here is we load the HTML from the server but then we load all the different potential States via the JS that we can hop between this is a pretty traditional SSR Spa which go watch my video about all the different rendering strategies if you want to better understand what any of those words mean the quick teal the RS it means we run the react code on the server in this case during build to generate the HTML page that's what you see initially and then further navigations are done via the JavaScript that has all the different states but we still have every state the page could be in in the JS and that's the big difference between this and something like server components when you have an SSR single page app you have to have every state the app can be in in your binary so the actual JavaScript that's on the device that can turn the apis into the thing the user sees 100% of that has to be in the JS layer but it's also worth noting this is just the web app that got exported we can also export this to IOS and Android and have similar behaviors and patterns which is really cool but none of that is what I'm here for what I am here for is server components so let's look into how to do that typed routes react server functions true we'll give an example of something that that feels very servery to prove that this works so let's make check lines of code. TSX get clock this will take in nothing we're going to do is um I going to tell cursor run the following bash command and get the result this runs in node by the way cool the point here and the reason this is so cool is that we are getting this component down from the server and I could even put a suspense around this to Showcase it better so if we suspense this fall back and there we go look at that it loads immediately and then the text comes in from the server and it should also work on here I might have to relaunch almost certainly actually have to relaunch pnpm run iOS window location hru is not defined this is required for Server components to work correctly let's see how we're supposed to handle that back to the docs doesn't seem to specify that in these Docs Bo anywhere uh I have a quick solution I'm going to text Evan he already read it fingers cross he'll give us a good answer okay go to my app Json cool apparently it is this field now we're talking look at that that's so cool obviously the format is garbage but the thing you have to realize that we're doing here that makes it so cool is we are running code on a server in this case the server my computer that code is running a bash command in this case the count lines of code command getting that data on the server transforming it into a text element and then sending that down to the client for it to render so if instead of this being text I wanted this to be something else I can do that here if I wanted to handle IOS and Android differently I can do that here if I wanted to change how the post renders entirely if let's say this wasn't get clock this was get post I could render post entirely differently depending on what I put here the alternative way of doing this the way we used to in the past is we would make an endpoint we would run the command we would get a result we would format it as Json we would send it to the client the client would download that Json it would transform it using the react code that it hopefully already has and then render it now you just do it you know how cool it is to exec something in node and then just return the result as formatted jsx it's so cool and it enables something that wasn't possible for small teams before you do a more practical example where we query something from database here let's yeah let's set it up actually I just had a hell of a time getting this all set up so I will say relatively confidently this isn't something you should be shipping in production yet but when it works it's cool as hell so I want to show you guys what the future of full Stack mobile with server driven UI in react native will hopefully look like once all these errors and edge cases are handled so here we now have a fake blog it's not really a Blog It's s to be a feed and the feed has posts posts can be one of two types it can be a text post or it can be an image post these are all just Json in this post directory by the way so we have two that are text posts and we have one that's an image post we know because it has an image I could have given them a type field here like Type image post and in production you should but this is not production right it's meant to prove a point I have my render posts function that is a view that has post. map and it Maps each of the posts to my post view component the postview component is the component that takes the Json and turns it into something you see so you could imagine this running on the client you'd write something like this that takes the post and depending on which type it is it returns it the difference is this code is running on the server so this sends down what the mobile app should render instead of sending it the data that then has to transform into what it's supposed to render so here we choose if there is content in post then we return post. content as text else if there's an image in the post we return the image instead we could even give these all custom views so they have text uh style font weight bold title do the same down here thank you cursor thought reloading is hella broken I've noticed first time it always fails there we go and now we have text posts and photo posts and it's not just on mobile either I can pnpm run web and we'll see the exact same behavior here I can even go to the network Tab and see what's going on what we'll see here is the response I'm assuming they're using streaming here oh they're not interesting so where does this rest of the content come from aha comes from this default. txt Import in here we see the stream of updated content we get this bundle for react native web that is telling it what JS it needs to render including the text as well so this is telling the browser here are the things you need in order to render what I'm about to give you and then it gives us this weird Json blob that has children and style tags all these things in it because this is what it's telling react to then go render this isn't accessing the Json plops this isn't hitting apis this isn't doing anything this is just a destructured version of what the UI should be showing that it can then combine with these JavaScript functions and things that it might have already even imported in order to turn all of this into what we see in the UI what's cool here is if we go look through all of the JavaScript that's shipped to the client it's not going to include anything that is specific to what we wrote over there so if I go back into the view post there if we always gave this a custom text like instead of putting the title it's image post wrap that in a string image post now it will always say it should always say image post but again the reloading is broken now this is image post and if we were doing this the traditional way where that was being rendered on client we'd be able to go into the JavaScript and find image post in it but if we go here and we hop into the entry bundle which is where everything is bundled image post interesting how did that get in here Evan you're not tree shaking your server components put you server on top will that fix it that fixed it cool since I didn't put use server on top the Metro bundler assumed it could include all this code make sure you put use server on your things with this yeah but the point here is that we're getting true server components which means this code only runs on the server and the blob that I was showing before that came down later this default. text this blob is a server component this is the JavaScript necessary to render whatever about to show it and then what we actually want it to render I think that's really cool because now you can have a helper TSX file like one of these post renderers that can change the types of posts that it renders whenever and the mobile app doesn't need to be updated in order to get the new post types you could even skip shipping the bundle to iOS or Android entirely this will significantly reduce how often you need to ship updates possibly to the point where you're only shipping updates when you make meaningful routing changes or when you add new native dependencies it's so cool that I can just render the right thing on the server not worry about what the client has and it will just output the right thing there were a ton of gotas on the way here as you guys saw with me suffering through all of this cut to a highlight reel of my pain if you're down face let's just make an NA it seems pretty easy this is where things get fun Evan window location hru is not defined this is required for sering components to work correctly do we even need that not this again based on this we're going to re-record sad phze here's where you would cut two and it all works well I did what the broke this time when I said cut to this point phase we're going to redo that why Evan feel like I'm going insane right now okay cut to here but the results speak for itself it's super cool and if we can get this to a point where it's really stable even as much if not more so something like nextjs this should become the default for how we write apps it's almost irresponsible because if you have competition that is using this Tech and you're not now you can't move anywhere near as fast as they do you shouldn't limit the quality of your app experience to the speed that the App Store is willing to push out updates you shouldn't limit the new experiences in your app to 50% of your users for the first month we shouldn't be this stuck in this horrible way where we have to wait for Apple to let us change our app we shouldn't have to do all of that work on the client in the first place if the server can tell the client what to render things get way more flexible and it almost makes sense that expo's original goal was to build a better web browser and now they are here obviously Expo is not a web browser it's a way to build better native applications using react native but now it kind of is but it's not rendering a web view with a div it's rendering a native view with a native text component it's so cool and I'm genuinely really hyped what's going on here the fact that I can now deploy this in a way that isn't hellish is super cool you know what let's give it one last deploy I'm curious see how well the web component site works not this again no such module tabs that HTML definitely has access to the tabs yeah deploying all of these things together still not quite there I tried I yeah this is early I'm not going to pretend otherwise but all of the pieces are coming together would I ship a new service on this right now today absolutely not this is not ready at all but I am confident in the Expo team being able to get us there they've done a lot of things in the past that I just did not think were even close to viable I still remember when this shipped this is the Expo Dev menu this was one of the biggest reasons to use expo's mobile app but if you had native things you needed like payments or camera access stuff that wasn't in their bundle you couldn't really use the Expo app to Dev so they came up with the crazy idea of making all of the parts for the Expo app Dev experience accessible to install into your application I was one of the earliest people trying this like back in like would have been mid 2021 over a year before they even announced it and I did not think this would ever be usable ever ready to ship now it's used in probably half or more of react native apps and it's great the fact that you have a menu you can open up either you're using Hut keys or on your actual phone when you're working on the app with the dev client that you ship to your devs that every team can build a custom Dev client with all their needs with this menu to do debugging disable enable fast refresh reload inspect elements all on a menu that runs on top of your app this felt like unobtanium this did not feel like something we could actually get to at any point in the near future now it's just part of the Expo experience so while the things I just ran into might seem insurmountable they might seem like this is there's no way will ever be stable I promise you it will be they are going to get there and I'm really excited to see it once again once all of these parts finally can come together until then don't ship Expo server components in es deploy and prod just yet but be excited for this future because it is genuinely really exciting like how cool is it that I am in a react native project reading from my file system mapping across all the promises to get the Json data and then rendering it in different view types before any JavaScript gets to my device that is a really bright and exciting future and I hope that we can get there soon so I just got a text from Evan over on the Expo team that uh they fixed a few of the bugs but they just saw this thought it was brutal and they are currently in the process of fixing all the issues so there's a good chance that by the time this video is out those issues have already been fixed I will pin a comment letting you know if they have or haven't know that you're seeing the earliest version of this stuff and by the time you're watching this video there's a very good chance these things have already been fixed as I said the team is on it Evan goes hard about these things and if you bring up an issue that exists with an expo the speed at which he will respond and then the speed at which he'll follow through and fix it is it's the reason I like them so much they're one of the fastest moving teams I've ever worked with pretty excited to see what they do I'm sure there's a lot of flutter comments below but if you want to talk about react native let me know really like the stuff and I'm curious how you feel about it too until next time peace n that's




## Vercel's New AI Writes Surprisingly Good Code - 20230915
have you ever used mid Journey it's a really powerful way to generate images you write a prompt wait for it to spit out four samples and you pick the one that you like the most to refine change re-roll and play around with what if I told you that there was a new tool that lets you do this to spit out react components instead of images and what if I told you that tool was built by versel and Shad CM well I'd have some pretty good news to share and I'm lucky I get to do that because v0.dev is one of the coolest new products I've seen in a while quick disclaimer versus sponsor the channel but they are not sponsoring this video they've been genuinely hyped about this internally I haven't seen Jared this excited in a while so without further Ado let's dive into v0.dev which might just be the future of how we build react components this is just v0.dev private right now but go sign up for the waitlist if you want to be able to give it a shot yourself in the near future the uis pretty simple because it should be so let's give one a shot I see a fun example here of a Sleek pricing page for a SAS so let's try that even from this uis it's generating you can see a lot of why it's so powerful we can duplicate this prompt and the work that we're doing on it now we can create a new straight from it we can also share a link to a specific prompt to other people on the team to take a look at kind of like how you share a figma board but at an earlier stage actually it's really interesting and allows me to work with others and see how they're doing their prompting and obviously there's also the code button where generated code will be spit out once it's all generated as you see the generation's coming through what's really interesting is it's adding component by component and updating those components as it goes but we see multiple different starting points generating here obviously as with all similar AI models there's a like and dislike which is really powerful for them to learn from and use to generate additional feedback to make better templates and generate better code in the future this is a huge part of why chat gbt has gotten so good because with chat GPT they take the feedback from every person prompting to refine the model and help it generate better results of the three that it generated this is the one I like the most if I want this Pro to a wrapped with one of those bright colored most popular boxes I can just tell it to do that so wrap Pro tier with brightly colored most popular box so now it's taking this option because the one I was hovering over and it's generating a refinement of it with the prompt this is really cool because you can instruct the AI to make changes to the UI once it's generated it still going all of this should be identical but ideally this middle part is going to be different interesting I I was thinking it would wrap it but this indicator there actually looks a little bit better than what I was intending so that's actually pretty handy graph the pro tier in a border to make the most popular stand out more you also have the ability here to click a specific element so that it only affects this element so let's click here update and now it should wrap this with a brightly colored Banner to highlight the most popular look at that okay this is really cool I hadn't played with the click a specific element button and that's selling me on this even more so hey I'm noticing this corner is a little off here with the most popular so let's just click the whole thing and say fix the top right Corners border radius so it matches other Corners okay so this is just a dumb CSS thing where it's applying the wrong border radius to that I think or there's an overflow that's missing but we can fix that because I can go straight into the code that it generates and it's just react code if I want to play with this I can literally copy the code I don't have a project running yet so I'll make one quick create next app at latest we'll call this V zero test I'll actually make a new file for this components pricing dot TSX paste save it looks like it's struggling a bit with prettier styled formatting I might even advise the team to run the code through prettier once before posting it regardless one quick save fixes that and now I can change this to pricing throw that in here cut all these class names I don't need them which are all the Vim users cringe as I scroll Bun Run Dev look at that so we can see here that this corner is the wrong border radius so let's go find where that is in the code interesting that they put this element in here twice so it's not perfect this HTML element got left over when this other one was generated and doesn't actually appear to Well appear anywhere so I can delete that it doesn't change anything actually it does change something it fixes that corner so it seems like this one element got left over accidentally now that actually looks really good obviously we're in dark mode with the CSS for this project because it's in a knitted next app and I just use the default CSS but it's really cool that I can copy paste this code delete one element and it looks almost exactly how I would want it to look and it's not some package I'm depending on there's no Imports here other than next link it also has a link funny enough commented at the top there straight to where this was generated which is really really helpful if somebody wants to go and prompt to do another change let's actually try and you remove it I won't ask I'll tell it's AI you don't be polite and it removed the wrong one so we'll go back a step and say the most popular element is included twice the second inclusion is correct please remove the first one and leave the text in the card let's see if it's smart enough to listen to that instruction properly side late does not appear it was but again this is actually part of why I like this tool even though it has rough edges like this and might not be able to figure out everything you want to do with it it spits out the source code this is giving me real code to play with that fits in my next app the way any other code would in the future it can obviously generate not just next code but it could generate things for any HTML website any view project or anything else but I'm going to give this generation a thumbs up because this was the closest to what I wanted by far and I want them to have the feedback that was pretty good how about we generate some more things let's say I want to generate a button with our brand Styles let's say we're a purple company a purple submit button with a cute B icon looks like it didn't have a b icon ready to go but it did have a bug icon which will give it credit pretty close how about we start with this one because the contrast is pretty good make the purple darker and change the icon to an envelope I cannot tell that that's an envelope let's have it use some different icon actually let's see how it's doing the icon in the first place it's inlining an SVG fascinating that doesn't give me much control at all we can still play with it though let's pick a different icon because I know they put a lot of icons in here I don't know if there's a list anywhere but you're able to have common things change this into a share button with the text saying share and an icon with an arrow hopefully it knows what a share button is and can figure this out not quite change the icon to a share icon if you just tell it to do a share icon you figure it out just fine cool so now we have this component and once again we can paste that right in our code base sharebutton.tsx and paste but wait there's something missing does it not oh y'all might know what's going on here why is this import not working as I hinted at the beginning there's a certain developer who was involved with this project she had CM if you're not already familiar with shad UI It's pretty dope it's a bunch of copy pasteable components that use Radix and tailwind and react to make it very easy to quickly build really good applications it's fantastic I've been super impressed with it but it also can be useful for tools like this because a button isn't just an HTML element you can do a lot of cool things with it I'm sure if I went and changed this to just lowercase button and comment this out I'm sure this will look fine but it won't have a lot of the behaviors that Shad UI makes possible so if we hop in here go to code we can run this command I have to init I guess totally fine npx in it oh I like this that they'll pick the different base colors we'll go with slate sure sure yes yes cool and now we have Shad UI setup it is that easy to add that library but again it's not really a library it's a collection of components and what it just did here is it generated a new I didn't do it yet it generated utils which includes their class names Tailwind merge and did install a couple of dependencies that will make authoring these packages much easier including class variants Authority Lucid react clsx Tailwind merge and Tailwind animate but the result of these things being included is we can now build really good interactive components should have a new component yeah okay I screwed up because I have app components and then I just have components here so the UI components are reusable components for things like this and I can almost virtually guarantee now that if I comment this back in switch back to uppercase button oh no what happened I might have screwed something up this is a new one for me oh I see what happened here that's really funny if anybody else runs into this what happened is I'm using the source directory but the Shad UI bundler assumed that I wasn't so put app in the root even though it should have put it in here so there's additional CSS in here that I need that was put in the wrong place so I'll do that there and it seems like it checks for app before it checks for Source app so now that I've done that it should be able to to resolve my file based routing correctly and now we have a Shad UI button rounded has all the fancy expected behaviors accessibility and all the crazy stuff that you normally have to implement yourself with tools like Radix with buttons it's not as complex but once you have things like drop downs it can get very complex quickly like a collapsible something like this or more complex like a custom date picker that has a good UI you might recognize this because it's almost identical to verses and a lot of other companies these things are hard to build right it having things like date FNS and Lucid react all implemented properly for you to have a really good experience that's surreal I cannot believe that shady wise is good as it is and it's a huge part of why something like v0 is as powerful as it is I'm hyped really cool tool should we do one more challenging generation let's give it something fun a cool home page with a background gradient for a developer tool that helps with productivity not bad at all for a first generation these are fine I think this one's my favorite let's try and refine it make the colors of the gradient in two dark Blues change the gradient to be vertical and dark blue to black black on top make the dark blue darker make the dark blue in the gradient even darker it does not seem to want to make that blue darker but once again this is fine because I can oink this hop into our components folder again named horribly this is a quick video we'll have Landing page.tsx paste we now have landing page again smart enough to import from components UI which is super handy that's pretty dope the hover behavior is not great obviously you can change that yourself but what I want to do is make this blue even darker it's already blue 900 so not really sure the easiest way to go darker I can't just do a thousand and they don't have further stuff so I could overlay it on top of a black background and set the opacity of this to be different let's see if it can do that and make the gradient and overlay with 30 opacity set background underneath to Black well I did not think it would do that that well I I'm scared to see the code because this could go very badly but uh this code is good I'm gonna be very happy landing page yeah that is correct absolute inset zero background to Black from black to Blue 900 opacity 30. that's really good this is how I would have done that and now that actually looks great might look as good in the recording but the gradient here looks beautiful on my machine I'm pumped I did not expect this to be this good I've been sitting here playing with it for so long that my room is now darker that's how hyped I am I came in hoping it would be cool but I actually can see myself using this a bunch what about you do you think this was cool are there AI tools that you're using in your workflow and how do you feel about this mid-journey type experience where you pick a good starting point and refine I I think it's really cool and helps me understand the AI and how it thinks a lot better if you like this let me know in the comments and if you're interested in more stuff about AI I'll pin a video in the corner that I did all about how AI might actually end up taking our jobs thank you guys as always really appreciate y'all peace nerds




## Video Compression Is Magical - 20240320
I'm really excited to finally sit down and talk a bit about how video works because most people even Engineers don't seem to understand it very well so if you're a coder or not I think this will be an interesting Deep dive in how h264 the codec that powers most of the video on the internet actually works thankfully I don't have to do too much research here because Sid Bala wrote an awesome article all about this that is just as relevant now as it was when written back in 2016 there are new codecs we'll talk a bit about those near the end the focus here is h264 which is almost certainly the technology that you're using to watch this video right now h264 is Magic h264 is a video compression codec standard it is ubiquitous internet video Blu-ray phones security cameras drones everything everything uses h264 now something h265 now but 8 years ago we'll give him some credit h264 is a remarkable piece of technology it's the result of 30 plus years of work with one single goal to reduce the bandwidth required for transmission of full motion video technically it's very interesting this post will give insights into some of the details at a high level I hope to not bore you too much with the intricacies also note that many of the concepts explained here apply to video compression in general and not just h264 I'll be sure to point out which that is the case for why you compress anything well a simple uncompressed video file will contain an array of 2D buffers containing pixel data for each frame so it's effectively 3D it's the 2D for the picture and then one additional Dimension that is time so you have each frame that has a pixel in data for every single Pixel in that picture and you have a new one for every picture over time and as St here each pixel takes three btes to store one bite each for the three primary colors red green and blue you might be confused a bit because if you remember primary colors you might remember that they're not red green and blue they're actually red blue and yellow and with those three you can theoretically make every color why does this matter though well every pixel on your screen isn't just a DOT that lights up a specific color it's usually a combination of three dots that change their brightness in order to combine into a color if you look at a pixel really close you'll see that it's usually three stripes or some similar pattern where you have a bright red a bright green and a bright blue by mixing how much of each of those colors is visible you end up seeing a different color when you look at it from further away the reason that green was chos instead of yellow is pretty specific is the concept of additive color palettes where you increase the amount of different colors in order to change the colors and access more things so if you add more color if you add all red all green and all blue you get white this is important because this brightness level is something that's important with your monitor because you want to be able to make things brighter not darker when you want to increase colors and theoretically if you got to White by removing a bunch of things that wouldn't work the other way you can generate all colors is through the cmy K color format where adding more colors makes things darker because it's as they State here it's effectively like pigments on printed materials so they're layering on top of each other there are two different methods for combining light and RGB is the one that made the most sense for monitors because when you combine the colors things can get brighter so now that we know all of this we we should go back to thinking about how the actual h264 algorithm works because each of those pixels needs to be representing a certain level of red of green and of blue that's how a hex code works it has those three parts where you have the red amount the green amount and the blue amount so now you need all three of those numbers for every single Pixel in your screen that's three hex digits so three heximal numbers times the number of pixels width times the number of pixels height you end up with insane amounts of data and as he says here 1920 x 1080 * 60 * the 3 bytes to store the pixel for each to those three colors you end up with 370 megabytes per second that's a megabit that's megabyte that's double a gigabit internet connection that's insane that's absurd bandwidth that a single like 10-second file would be 2 to 3 gigs that's insane and we can't do this it's obvious that this is not how the internet works and when you watch this video at 1080p 30 or even 4K you're not downloading a terabyte of data so how do we deal with this we need to compress as he says here a 50 gig Blu-ray would only hold 2 minutes of uncompressed 1080p60 that's crazy 50 gigs is 2 minutes absurd even my streams which are hours long a 5our stream uncompressed with my recording methods with h264 are like 400 gigs for 6 hours 50 gigs for 2 minutes is UN unfathomable so we have to compress this so why h64 this is an interesting intro yes I'll answer but first let me show you something here's the Apple homepage I captured this screen because the homepage produced two files it's a PNG screenshot of the Apple homepage in 5 seconds of 60 FPS h264 video of the same Apple homepage 175k why is the PNG a megabyte in the 5 Seconds of video are 175k eh what those file sizes look switched no they're right the h64 video 300 frames long is only 175k a single frame of that video in PNG is 105k I actually made a video about the smallest possible PNG so if you're curious about how PNG compression Works check that out if you haven't looks like we're storing 300 times the amount of data in the video but the file size is a fifth so h64 would seem to be500 times as efficient as PNG how is that even possible all right what's the trick well there's a lot of them h264 uses all the tricks you can think of in tons you probably didn't let's go through the important ones so part one shedding weight imagine you're building a car for street racing you need to go faster what is the first thing you do you shed some weight your car weighs 3,000 lb you throw away stuff you don't need back seats Chuck them subwoofer gone no music needed air conditioning yeah ditch it transmission yeah wait you need the transmission you remove everything EX accept the things that matter this concept of throwing away bits you don't need to save space is called lossy compression and obviously h264 is a lossy codec it throws away less important bits and only keeps the important ones this idea of lossy versus lossless is really important because there are compression methods that take some data find common patterns in it and then make a table of those patterns so you can take that data and represent it with something smaller by taking the reused pieces and giving them like assigned values so it's basically a a lookup table for all the parts of your thing so that it's still lossless because you have all that data there we have to do a lot of decoding steps in order to get that data out h64 does not work that way they're optimizing for and actively seeking things they can delete that will no longer be there once you decode and play back that video it is choosing to remove data in order to make it more efficient versus something like a PNG which behaves more like what I was describing there which would be something like a raar or a zip where it is making those exact lookup tables so that it can recreate the exact file and pngs are lossless they don't throw away anything bit forbit the original source image can be recovered from a PNG encoded file but what's an important bit how does the algorithm know what bits in my frame are important there's a few obvious ways to trim in images maybe the top right quadrant is useless all the time so maybe we can zero out those pixels and discard the quadrant we would only use 3/4 of the space we need now we're down to 2200 lb or maybe we can crop out a thick border around the edges of the frame but the important stuff is in the middle anyways yes you could do all those types of things just crop stuff out but that's not what 8264 does because it needs to represent everything or people would think it's broken so what does h264 actually do h264 like other lossy image algorithms discards detail information here is a closeup of the original compared with the image post discard we'll zoom up really close and I'll be honest this will be a bit harder to see in the official video that you'll be watching on YouTube because YouTube is doing its own compression but to me sitting here is incredibly clear and I'm sure you'll still see it due to the amount of compression happening the edges are way cleaner here and here especially where the colors are changing there's almost like a w wobbly like warping and you'll also see a little bit of like pixelation with that color even though it's a flush color with a little bit of Shadow here you can pretty obviously see the detail loss here and I hope that comes through in the video you're watching in the end let's keep going because we need to understand how this works and why it happens see how the compressed one does not show the holes in the speaker Grill in the MacBook Pro I didn't even look at that so we have all the holes here and here they're all blurred into like a gray bar if you don't zoom in you might not even notice like we can see here these are indistinguishable once you zoom in it get gets really clear the image on the right weighs in at 7% the size of the original we haven't even compressed the image in the traditional sense imagine your car just weighed 200 pound 7% wow how did you discard detail information like that tricked you guys we're talking about math now information entropy now we're getting to the juicy bits ha puns that was a good one if you took an information Theory class you might remember information entropy information entropy is the number of bits required to represent some information note that it is not simply the size of the data set it's the minimum number of bits that must be used to represent all the information contained in that data set soar to what I was talking about earlier with the encodings for example if your data set is the result of a single coin toss you need one bit of entropy if you have to record two coin tosses you need two bits make sense suppose you have some strange coin you toss it 10 times and every time it landed on heads how would you describe this information to someone you wouldn't say h h h h h h h h h h you would just say 10 tosses all heads bam you just compressed some data easy I've saved you hours of Mind lectures I love this AR this is so well written this is obviously an oversimplification but you've transformed some data into another shorter representation of the same information you've reduced data redundancy the information entropy in this data set has not changed you've just converted between representations this type of encoder is called an entropy encoder it's a general purpose lossless encoder that works for any type of data so that's the first piece next is the frequency domain which combines that in an important way now that you understand information entropy let's move on to transformations of data you can represent dat in some fundamental units if you use binary you have zero and one if you use hex you have 16 characters you can easily transform between the two systems they are essentially equivalent so far so good let's go now some imagination imagine you can transform any data set that varies over space or time important detail at the time we'll get to that soon hopefully some of yall are starting to figure out how time comes into play something like the brightness value of an image into a different coordinate space so instead of XY coordinates let's say we have frequency coordinates frequency X and frequency y are the axy now this is called the frequency domain representation it's another bind mathematical theorem I love that he's very real about these being crazy math things and this theorem states that you can do this for any data and you can achieve a perfect lossless transformation as long as the frequency of X and Y are high enough okay but what the freak are freak X and freak y great question freak X and freak y are some other sets of basis units just like when we switch from binary to hex we have a different fundamental unit we're switching from The Familiar XY to frequency X frequency y hex a looks different from binary 1010 both mean the same thing but look different so here's what our image looks like in the frequency domain this is where things get interesting is obviously this is not that image but this represents it the fine Grill on the MacBook Pro has high information content in the higher frequency components of that image finely varying content equals high frequency components this is a piece that's going to come up a lot Things That Vary a lot the classic example of this is confetti falling where every few pixels is changing every frame or two we'll show some examples of that in a bit finally varying content equals high frequency components any sort of gradual variation in the colors and brightness B example this is gradients or low frequency components of that image anything in between Falls in between so fine details equals high frequency gentle gradients equals low frequency make sense here's the classic gradient example that should hopefully come up well depending on what resolution and quality you're watching the video at on the left we have an 8bit gradient where we have eight colors that represent all of the things here with the 8bit gradient dithered we've done more to blend usually by blurring and mixing those eight bits and then we have the 24-bit gradient where we have 24 colors to represent it and you'll see how much smoother this gradient looks than either of these but more importantly how awful this one looks if you ever seen this weird like ringing pattern in a video it's cuz it was aggressively compressed and going from one color to another when you have a limited set of colors is really really hard to do so as he said the dots for the speaker Grill here are an example of high frequency because pixels left and right are constantly changing for each of these dots which makes it hard to compress in the frequency domain representation the low frequency components are near the center The High Frequency components are towards the edge okay kind of makes sense why do all this because now you can take that frequency domain info and then mask out the edges discard information which will contain the information with high frequency components now if you convert it back to your regular XY coordinates you'll find that the resulting image looks similar to the original but has lost some of the fine details but now the image only occupies a fraction of the Space by controlling how big your askk is you can now tune precisely by how detailed you want your output images to be here's a closeup of the laptop in the homepage again except now there's a circular border mask that has been applied this model represents how frequent changes occur so how much difference is there between two pixels next to each other towards the middle there is very little change and towards the edges there's a bunch of change so things that change constantly like that speaker Grill where every other pixel is very different those types of things would be out on the outside here where the things that are pretty consistent like the black around the delete button that' be near the middle because it doesn't change a whole lot in that space so if you plot things like this such that the things that change the most are on the outside and the things that change the least are on the inside and then you compress towards the middle so you only keep the parts in the middle you throw out everything else you end up with significantly more efficient data storing which you can see here this tiny little circle of the most changing parts in the middle if you take this 2% trim where you have just the most common recurring patterns in pieces the things that are the most consistent and you throw out everything else you effectively smooth all the parts that change the most which is why when you zoom in you see the speaker Grill getting all blurry and you see the skin tones on the hand getting all like chunky because even here at 11% that little jump in how much space you had all of the texture for your skin there must have existed in that range and that level of change whereas the speaker Grill clearly existed a little further out which is why you could still see it a bit at the 30% it starts to get messy at 11 and then it's entirely unreadable at 2 a really good visualization of how this entropy works and how you can visualize it the numbers represent the information entropy of the image as a fraction of the original as they say even at 2% you won't notice the difference zoomed out like look here those all look exactly the same and to go back to the car example of the 3,000 lb car we're now down to 60 lb so that's how you shed weight this process in lossy compression is called quantization really important part of how this all works okay impressive I guess what else you got here's one of my favorite bits choma subsampling the human SL ey brain system is not very good at resolving finer details and color it can detect minor variations in brightness easily but not color so there must be some way to discard color information to shed even more weight in a TV signal RGB color data gets transformed into y plus CB plus CR the Y is the luminance essentially the black and white brightness and the CB and CR are the chrominance components chrominance is color if it wasn't clear RGB and ycbc are equivalent in terms of information entropy why complicate things though is RGB not good enough well back before we had color TV we only had the Y signal we only had white and black and then the brightness level of the white and when color TVs just started coming along Engineers had to find a way to transmit RGB colors along with the Y instead of using two separate data streams they wisely chose to encode the color information into CB and CR and transmit that along with the Y information you might be able to guess the cool thing here stated clearly this way black and white TVs would only have to look at that Y part and they would still work if you just take the brightness levels that's black and white TV but if you have a color TV they'll also look at those other components and use those to make a color image converted to RGB but check out the trick the Y component gets encoded at Full Resolution the C components only at a quarter resolution since the eye and brain are terrible at detecting color variations you can mostly get away with this by doing it you reduce the total bandwidth by half with very little visual difference half your car now weighs 30 lb yes we just threw out a ton of that color data and since the human eye is fundamentally flawed it doesn't really matter this process is called chroma subsampling while specifically a264 it's been around for decades it's pretty Universal everything does some form of chroma subsampling those are the big weight sheds for lossy compression our frames are now tiny since we discarded most of the detail information in half of the color too wait that's it can we do something more yes weight sheding is only the first step so far we've only looked at spatial domains within a single frame now it's time to explore the temporal compression we look at groups of frames I'm going to quickly diagram this before we go in too far cuz I want to make sure this part is really well understood because it's super important here's a frame this frame has text that says High all the stuff we just talked about can explain how we would or wouldn't compress this we're not talking about one frame we're talking about a bunch of them let's say in the next frame I add an exclamation point most of this Frame didn't change most of the data for the high is still there and everything that is in this exclamation point is the same so we need a way to encode that another way of thinking of this and this is what I really want to push I like the dimensional argument now I want you to pretend that this is 3D so now we have this 3D object where the front is this High frame now I want you to imagine that next frame that would come after we can't quite see it cuz it's blocked here that's what this Frame is so think of this High exclamation point frame is behind this original High frame and this is what the author means when he says that video is three-dimensional because you're taking all of these 2D images and as time passes they're changing so every layer is going backwards in additional Dimension but we know the thing that was before it we can probably use that for something right let's go and figure out what we can do here to make yet another very important optimization you might be curious about how these color conversions work I understand why they're really interesting this would be its own whole probably very long video so I'm just going to link this Wikipedia in the description so you can go read about it if you want to yourself I'm going to do that because I don't want to get sidetracked even more than I already have been this is a video but video compression not color encoding still really cool stuff go check it out if you're curious weight sheding is only the first step so far we've only looked at the spatial domains within a single frame now it's time to explore temporal compression where we look at a group of frames across time motion compensation is the first part here h264 is a motion compensation compression standard that's a set of words what the hell is motion compression well imagine you're watching a tennis match the camera's fixed at a certain angle the only thing moving is the ball back and forth obviously other things would be moving but it's a theoretical imagine just that ball is moving how would you encode this information you do what always do right you have a 3D array of pixels two dimensions in space and one in time right so every time you get a new frame you need all that data that's chaos why would you do that most of the imag is the same anyways the court the net the crowds all these things are static the only real action is the ball moving what if you could just have one static image of everything in the background and then one moving image of just the ball wouldn't that save a lot of space you see where I'm going get it motion estimation let's dive in lame Jokes Aside this is exactly what h264 does h 64 splits the image up into macro blocks typically 16 x 16 pixels and they use these to do motion estimation it encodes one static image typically called an iframe intraframe these are important because they're a full frame containing all the bits that are required to construct that frame an if frame is pretty much your traditional image it's just the pixels that render that image but then the subsequent frames where things get interesting they're either called P frames which are predicted or they're B frames which are bidirectionally predicted where it uses data on both sides P frames are the frames that will encode a motion Vector for each of the macro blocks for the previous frame that's a bit of a word soup if you're not already familiar with video encoding better way to put this is if we go back to my diagram here this first frame would be an i frame that is all that data and the next frame would say hey these pixels changed to this information so as unintuitive as it might seem that frame won't have any of this data in it because that all comes from before just the thing that was added is encoded in that this is the change B frames and P frames are kind of change frames to go to the G example this is the knit commit and then each of these are diffs that are changing what that frame looks like based on specific pixels changing we'll go way more in depth on this as we read along so P frames are frames that will encode a motion Vector for each of those macro blocks so each of those 16x 16 chunks a p frame describes if it changes and how it changes so a p frame has to be constructed by the decoder based on the previous frame it starts with the last I frame in the video stream and then walks through every subsequent frame adding up to the motion Vector Deltas as it goes along until it arrives at the current frame this is very important because it's not free if I have this Frame and I want the next one I apply this diff and I have the next one cool what if I'm at this Frame and I want one seven frames down what if I start seven frames down and it's a p frame and I actually want to see what it is now I have to go all the way back until I find the first I frame and then apply these changes for every frame until I'm at where I want to be this is also why video editing software is so complex and difficult because when you skim through a video and chop at a point usually it has to generate a new if frame at that chop point in order for any of this technology to work if you've ever seen video where like a scene changes where it cuts to some other video and everything gets super artifact and like little black chunks floating around and stuff that's cuz it's referencing the wrong if frame and then you get a new if frame and suddenly everything goes back to normal that's just P frames though it can actually get crazier once you talk about P frames because the prediction goes both ways from the past frame and from future frames so now you can imagine why the Apple homepage video is so well compressed it's really just three ey frames which again are the key images that represent the site and those are already super compressed and now you just have most data between those frames so despite the video being 5 Seconds long in 60 FPS you're actually only getting three images with it all of which are compressed and then a bunch of change data between those different frames let's say you've been playing a video on YouTube hopefully you're already subscribed to the what well I guess the author's a fan if you haven't already subscribed you know that it's free right it's a little button at the bottom of the video you just click it helps the channel out a ton you can see more things like this the the the blog post author didn't put that there by the way I just inspect elemented but doing my job okay hit the Subscribe button this video has taken so long to film anyways you missed the last few seconds of dialogue so you scrub back a few seconds have you noticed that it doesn't instantly start playing from that time code you selected it pauses for a few moments and then plays it's already buffered those frames though since you just played it so Why the pause yeah that noce the out of me why does it do that well I was actually hitting at this earlier with my own video editing experience your computer has to decode a bunch of stuff you just ask the decoder to jump to some arbitrary frame so now it has to redo all the calculations starting from the nearest ey frame and adding up the motion vectors till gets to the frame that you're on and that's computationally expensive and hence the brief pause hopefully you'll be less annoyed now knowing that it's doing actually hard work and not just sitting around if you ever heard of Hardware encoding and decoding usually this is what it's referring to the ability for a graphics processor or even like a traditional CPU to take one of these crazy video feeds and quickly efficiently get to that if frame and generate the frame you're supposed to be on in order to do that you don't need one really powerful processor you need a ton of tiny ones to manage each of those 16bit chunks this is one of those tasks that graphics cards are really good at because they they don't have one to what 16 big really powerful cores like a normal processor does they have hundreds if not thousands of small ones that do really quick changes and efficient hardware encoders and also decoders work really well because they are checking each of those 16x 16 chunks for every frame and when you have a bunch of those chips doing that little bit of work for every frame it's way faster and if a small number of chips doing that work instead even if they're way more powerful hope that helps demystify why Hardware acceleration and Hardware encoding and decoding are as important as they since you're only encoding motion Vector Deltas this technique is extremely space efficient for any video with motion at the cost of some computation this is a very important point to understand you're trading space efficiency for compute efficiency you could send videos that are just iframes so you don't need to generate that data in fact the camera I'm recording on right now has an all iframe option the videos are way bigger they're so much bigger you can't even record them on an SD card you have to record them on an external hard drive for it to work and has to be a fast one like an external like fancy SSD but when I use that in my video editor it works way better because it doesn't have to generate the frames between the ey frames it just has them so when I say go to this point it just goes there but in order to do that I have to take up way more space if I don't take up that space then I end up having way more data usage instead if I choose to save that space by doing B frames and having this motion compression I end up having to decode that when I play it so effectively You could argue YouTube is making everyone's devices do more work and wasting all of our batteries in order to save storage costs it's much more intricate than that because bandwidth is expensive for everyone involved but effectively YouTube and platforms like it have made the decision that they will store smaller files send you a smaller file and now your processor has to do the work to play it and that's a very very good tradeoff cool now we've covered both the spatial and temporal compression so far we have a ton of space saved in quantization chroma subsampling further have the space required on top of that we have motion compensation that soures only three actual frames for the 300 that were in that video looks pretty good now what well now we wrap up and seal the deal we use a traditional lossless entropy encoder because why not let's just slap it in there for good measure that's I was talking about earlier with like the the zip type compression where you have these things that are recurring so you put them in a table to look them up really good stuff entropy coder the eye frames after the lossy steps contain redundant information the motion vectors for each of the macro blocks in the P&B frames there are entire groups of them with the same values since several macro blocks move by the same amount when the image pans this is actually a really good example if we go back to this wonderful High frame let's say that for the next three frames the camera pans so next frame it's here next frame it's here next frame it's here and it keeps doing that over time the way this is described in the B frames would be these pixels shifted this amount and if you do that over and over maybe detailing hey pixel X42 y43 moved right to and doing that over and over again might not be the most efficient way to encode that data as such if we can represent that move if we can represent this pixel move this amount with some random thing instead that is isn't as much data it would just said that over and over instead that would be way more efficient think back to the 10 H's from the beginning of the video it's like that but instead of it being for pixels it's for movement and if movement is consistent you can represent it with traditional lossless compression way better but if the movement's inconsistent like my favorite example confetti that doesn't work at all so as I was hinting at there an entropy encoder will take care of that redundancy if there's redundancy between those motion frames it can smooth that out for you and since it's a general purpose losses encoder we don't have to worry about what trade-offs is making we get all the data we put in and now we're done at the core of it this is how video compression codecs like h264 work these are its tricks okay great but I'm curious to know how much the car weighs now so the original video was a weird resolution 1 123 2154 if we apply the math it would be 1.2 gigs if we just took the raw Frame data but now when we've compressed it through h264 we get 175 Kobes so to go back to the 3,000lb car we got it all the way down to 0.4 pounds wow when you put it in this context like comparing the car weights this is an actual miracle that this technology exists without it none of the things we're doing now would work y'all certainly wouldn't be watching me on YouTube and I probably wouldn't even have this career most of my adult life has been spent working on video in some form from working on it at twitch to building collaborative music experiences to building tools for creators to do live collaborations all of this is possible because of h264 in codex like it yeah as the author says here this is a massive oversimplification of several decades of intense research in the field if you want to know more the Wikipedia page is pretty descriptive you'll be amazed at just how detailed these Wikipedia pages are about a lot of these things because the same nerds who sit there mathing their way through it are the Nerds who keep Wikipedia up to date and since a lot of these codecs are older and very well battle tested these articles tend to be very very accurate which is a great source of information have comments did I get something wrong not a fan use ha no what I'm going to do is I'm going to follow you on Twitter because this article was incredible and sadly it looks like you used Twitter since 2018 your article posted in 2016 but Sid Bala you made something awesome here this is one of the best breakdowns I have seen of how video compression works there's a great video by Tom Scott about specifically how snow and confetti ruin YouTube video quality which is secretly a video All About video en coding I highly recommend watching it and I'll drop it in the sources if you haven't seen it already but I want to showcase the confetti bit so you can see just how bad it gets quick you won't be able to hear the audio because my setup is screwy but you can go watch the original if you're curious so here we see it at a low bit rate you can see how all the motion causes really bad and Jank blurring you can even see when the key frames and the ey frames happen because you'll see it goes from Super blurry to really sharp all of a sudden you see how quick that motion jumped it's all about this but this low bit rate especially once you get more and more motion happening and there's not enough room in the data you have you end up with way choppier motion and things just slowly falling apart and that's because there isn't enough data being encoded here cuz they have a hard limit on how much data they're putting in the video getting all that motion in that little data just falls apart your computer's not lagging like look I'm nice and smooth but since the data rate was so bad it fell apart but then when you bump up the bit rate to a much higher value suddenly the motion gets way smoother now that this motion's gone through my stream my video editing my upload and then to you it might not look as good so again check out the Tom Scott video it's incredible but hopefully this helps showcase just how important these Technologies are and how they do and don't work oh God I love that moment too you have to go watch the original video but when he freezes the motion everything is suddenly super sharp because it's no longer struggling to just fit all the motion in the data you have and since things are staying you can rely on Ife frames more and that motion data that you have in the B frames can be focused on the little bit that does move this is such a good example and I highly recommend checking it out if you're curious that's all I have to say the author did an incredible job huge shout out to Sid Bala for writing this great blog post appreciate you ton if you want me to talk more about video audio images and how these things work I'm a big AV nerd I'm always happy to do it that's all I have to say for now see you guys in the next one peace nerds




## Vite & Vue with Evan You (He Made Both) - 20230330
for those who don't know Evan would you mind introducing yourself real quick um hello I'm Evan Gill I'm the author of VJs and Veet and I'm an independent open source developer yeah yeah for uh a less humble version Evan is the legend that proved you can challenge Norms as an individual developer you can make something at the same time as Facebook's investing in react and still deliver in an insane truly amount to Value it's been awesome to watch all of the work you've done and how you've continued growing the community and I'd love to ask just how'd you get started why did you build a framework uh yeah so the story I guess I didn't set out to build like a framework of what we know of as to as of today right it started as just an experiment just really to just scratch my own Niche when I was um I was working at Google creative labs and we were doing a lot of fast prototypes and some of those some of my colleagues used angularjs and I checked it out and I was like okay some of this these Concepts looks great because it's much the declarative like bindings are much better than say the manual bindings of jQuery or backbone uh when we were using at the time so uh but at the same time I looked more into it and I was like okay there are a bunch of stuff that I don't really care about uh because it brought about a lot of these um like dependency injection or like java-esque stuff which I just don't feel needed in my work and um and then I was also looked into the implementation I was realized okay this is actually doing this kind of Brute Force dirty checking I was like there's got to be a better way to do this um so uh I realized okay maybe you can uh Implement you know Auto tracking dependencies using es5 getter Setters so that was the main motivation really just uh uh first of all I want to create a lighter less bloated version of just encapsulating the template interactive binding reactive State kind of setup and also to play with the implementation idea like can we do this by just tracking everything with Getters and Setters uh so that was the initial uh version of you really um but later on people liked it so I spend more time working on it and you know just adding more and more stuff into it eventually it become what it is today that's fascinating to hear it really feels like your your focus was on one specific aspect and you almost had to build everything around it and I feel like that theme stayed true through other things you've built and I'm curious uh I know it's pretty far off but why how did you end up building a bundler later on with feet yeah that's a that's a similar story right well I always on my projects start with something real that I encounter myself during my work and um the reason of building V started out because of my own frustration with ucli um so so going back a little a few years we realized okay we need an official build setup for for View apps because we came up with a single file component thing and you need to have a build tool for it so and setting up everything correctly with webpack was a headache for most people uh so we were like okay we need to build a CLI around webpacks so we built few CLI and I think we went a bit too far with CCI like I felt like we abstracted too much trying to do too much work inside of it and in the end uh the the maintenance burden was huge and still like when we are and one day I was I was just like I have a simple idea I want to spin up a VCR app and it took me like two minutes to install the depths then like 20 seconds to spin up the dev server and it was like this is not how it should be like we need some lighter way to do this right and um and that's around the time when like Chrome started Landing native esm Imports uh directly directly in the browser so I was like okay can I import a view file and let Chrome handle that so I built a prototype and realized okay this is actually sending an HTTP request to the server uh and expecting to get a JavaScript module back even though you're using the dot view extension in the in the import specifier so I was like okay this might actually just work um so I built a prototype that was in 2019 that just uh transforms The View file into JavaScript on the Fly and send it back and that worked so I was like okay this this looks like it has potential but I was also boggled down in D3 working around that time so I put that idea aside and um kept working on V3 so when V3 was about done I was like maybe it's also time to have a lighter weight uh build tool chain for V3 as well so um I picked up the idea again and that was around like April 2020 um and I started building basically just expanding on the idea so when I was researching the idea a few other Solutions also kind of popped up like when I was working through so my original goal was to get hot module replacement on top of my previous prototype that was the main thing so once I finished the I I once I cracked the hot module replacement I realized okay this is something that I can actually use and push further uh so I started doing more research and realized okay there are some other projects like uh at web slash Dev server it was called ESF server back then and then was uh snowpack also so uh these two is kind of I don't know the exact time like when each have started but um I started doing more research on these things after I've got the hot module Replacements working and I realized okay like kind of doing a lot of similar things but I think Veet was the first one that actually shipped with how much a replacement around that time so that was the time we kind of have entered a sort of like a little bit of compete competition with snowpack where like shipping features here and there and um to the point where uh I guess we I think like we each like sort of looking at what our what each other is doing and like try to reach future parity on the other side um but I think in the end um snowpack team essentially they they were starting to build astral on top of snowpack and they realized that their energy is better spent by focusing on the higher level thing they want to build so maintaining snowpack in parallel just doesn't make sense for them because the two are really doing very similar things so uh they decided to switch feeds I think that was a moment where uh we kind of thought okay Veet is kind of could actually serve as a um not just a bundler but more like a shared infrastructure if you want to quickly build meta Frameworks on top of so um so outside of the um I think the the best decision we made is first splitting the to become framework agnostic because um in the beginning I only wanted to for view I was like this is going to be a view only thing I specifically remember when you first posted the Twitter demo with like the react to HMR working and you're like I think this works can some react devs try it and I was one of the first to play with it I was like oh my God this is dope I was on snowpack at the time I was just excited for more and more build tools that like we could use and I I also feel like did not expect you to do that at all and as soon as I saw it I was hyped yeah I think that was the probably the best decision because um so once we became framework agnostic realized we can abstract a lot more and another decision we made was to um so uh Jason Miller uh author of preact he worked on a preact specific thing called W uh wmr I think yeah wmr uh he never told anyone what the acronym really means but I guessed it was warm module replacement something uh but the great idea he had there was to have simulate rollups plug-in pipeline directly in the browser directly um not in the browser like still in node.js but you're not actually running roll up itself you just simulate the plug-in pipeline in the dev server uh without running roll up itself so it becomes role of compatible plug-in compatible but you're not actually running roll up which is a great idea so we kind of took that idea moved into Veet that became V to 2.0 and then we um realized the potential is not just a bundler but also a um we encapsulate a lot of these out of the box conventions that we see because like previously if you look at creative react uh ucli and almost every webpack boilerplate out there we're all doing more or less the same things like how to import CSS how to handle hot module replacement how to transpile PS right um so every meta framework in the future is going to need that kind of stuff so um what if we just make it out of the work out of the box it's just like convention based everybody's gonna do the same thing um and you can if you're building a new meta framework is this really no point in repeating all of this stuff again so um I think that kind of made sense to people so uh Astro is now built on the file kit is built on the solid start is built on the quickest built on Veet and the cool thing is because um fetus framework agnostic like by using video just like naturally can support View and react at the same time and spelled and anything that works with beat uh so I think that's also a really cool thing that uh it just evolved out around over time like I didn't plan this in the beginning but like over time we realized okay we can do this it makes it better so we so it happened yeah absolutely I uh I've been really interested to see how that's just expanded further like with Frameworks like Astro where that goal of like support everything and like being a layer has went way further their intent wasn't to build a Meta Meta framework for everyone the same way Veet wasn't but the result is now I'm seeing more developers using Astro as the starting point to play with new server-side rendered Frameworks and it's cool how like the feature creeped its way from a transpiler to a like a meta framework build tool kit and yeah the things built around it have almost been pushed the same way yep yeah it's such a cool thing to see and yeah I'm curious about what your thoughts are on how the communities approach this both from like or on the beat side but also on The View side like what has it been like to have these huge communities form and do all these crazy things with the technology and how has that influenced your decision making with it I guess the uh the best part of it is um the size of the community uh obviously also makes it financially sustainable for me to do this full-time so like I really have nothing to complain about the lifestyle like going independent was probably the best decision I made and uh I get to work with awesome people on the internet I get to I mean without covet I get to travel around the world and meet people all over the place who use my work um so yeah that has been super amazing and I think another amazing part is when you have something that people like you get to meet people who are also generally passionate about this in the success of it so like I really didn't like I don't think I'm a good like manager type of person but like our teams are just naturally formed in a way like people are just like it so much they do a lot of great work so I was like okay do you want to just join the team and officially be part of it uh like both the view team and the V team grew very organically I probably was a bit more uh intentional about the V team because I know that splitting my time between the two projects is gonna make it really difficult so uh in a way I started at a much earlier time planning for building a team for Veet uh and I think that was also great like feet also because we made it framework agnostic it's just allows more collaboration even across ecosystems like we have contributors from the spout side from Astro side from view side uh so it's like the V team is really like we have collaborators from all different Frameworks yeah I've definitely seen that as well and like just some of the stuff I've seen like again close at the Astro guys I watched the whole snowpack the hype cycle crash and burn wherever it ended up and watching them move from maintaining snowpack and building Astro around it to moving to Veet and contributing to V and helping to push it Forward has been super cool to see and seeing like Vietnam be sponsored directly and being able to pay developers themselves to form its own full organization that can go well past what any one person could do now it's really cool to see yeah yeah I actually want to give a shout out to Fred uh because I think it takes a lot of um I mean I I have a lot of respect for him making the decision to switch from snowpack to feed I think I think it was the right call but it's not the easy call right like when you work on something for so long you're just attached to it uh and I have a lot of respect for him to be able to make that decision yeah I fully agree and it's it's rare to see people that willing to throw stuff away and honestly he has a half as a pivot half because I just think it's interesting the relationship between next and or well between next and react fascinates me in this way where next had its own server-side paradigms that they had invented and pushed for like half a decade at this point but a lot of people invested in and adopted and they were at like as soon as react had developed a pattern that looked vaguely better to them they're willing to throw it all away and work directly with react to make it happen and I think that level of innovation resulting in collaboration is really fascinating the idea that this thing can be built on the outside of react to solve problems react isn't interested in and then when react has interest it's now a platform rather than an uh a standard in next.js the standard has been almost entirely thrown out so that react to the standard can grow and next the platform is the place where it can happen and I would love to hear like just because I've seen so much cool stuff with nox3 the adoption's been insane to see and I'm curious what your thoughts are on nuxed and its relationship with you yeah um so you know Wayne Knox has always been uh I think it serves a very similar road to to next to uh as to react obviously uh the relationship like in details is a bit different in the in the sense that next has always more or less being the um they focus they spend a lot of energy on polishing the um the very fine details of DX uh like the small things like Auto Imports and how like um they're kind of like the extension of me where I I'm happy that they exist so I can focus more on the the core stuff on the lower level stuff and thinking about improvements that happens at more fundamental level whereas leaving the sort of um more out of the box streamline like uh zero to product as fast as possible kind of use cases to them I think that's where the focus is um so we don't so I agree that we um the the relation between reacts and X now is more like um I think the fundamental reason is react itself is spending from a library into an architecture and in order to manifest that architecture you need a meta framework and like next is the most popular react framework and it is also the most natural place that should take place um and in a way I don't think it was like it was like next throwing everything it had in order to accommodate react I think the collaboration is more like um the The Meta framework and the core library's success is kind of like uh what what is the word like the the beneficial relationship in the symbiotic biology yeah yeah it's symbiotic um so and I think DMO like the folks at uh at Purcell they are smart people right they realize like the because of the relationship uh like if react has ambitious ideas next would be the best platform for them to push it um I think we we don't have that level of uh collaboration between View and next as of now uh in some way I think we should probably move a bit more towards that direction um but I'm also kind of wary about the fact that you know react next and next are more or less in this the line between the lit library and the framework is very blurry now like in a way react is the library but also the architecture and next is a manifestation of that architecture the two is kind of inseparable now um and that happens in a way because you know for sales and that's so much in hiring react people uh and for us um I personally still want to have that relatively clear boundary in the sense that you know meta Frameworks on top of you are implemented using clearly defined public apis it's it shouldn't be the case where like we ship a new feature and everybody's like how can I use it you must use next and how do I implement it myself well it's kind of complicated um you know I kind of want to avoid that I I hear you but I I think that there's some like understandable but core misunderstandings of how like the relationship with react and next work and obviously I'm I'm privy to much more detail than the average person here but like to me what I've clearly seen is the react core team has gotten more excited about server-side problems and wanting to bridge that Gap more every person who has moved to versel or is an ex meta person that has like restarted their career to be at versel like Tom who's just been retired for a few years now like they're doing this not because versel offered them a bunch of money it's because they're excited this is the thing that they got into react for happening again it it it to me and to everyone I've talked to there's a single person it's like yeah they paid me a lot all of them are as hyped as ever and these are people I've been talking to for years and it it does feel like a moment and that's the thing I wanted to like push for is it feels like there's a moment happening right now in the next Community I'm almost scared you're not part of it because of concern that these things will get too close and I'm kind of reporting from the other end that the magic of one that happens is worth the risk yeah so uh so here's the thing um I think so obviously everything I said previously about the relationship between Versailles and react and all that I didn't mean that as an as a criticism it's more like an observation and I'm obviously also think about thinking about it like I'm not 100 sure if like this is the you know like it's more like okay this is interesting but I'm not 100 sure whether this is like gonna be for the better or for the worse uh like it there's definitely the upside of it where like the closer collaboration allows you to think about the the whole full stack server Paradigm in a more holistic way I think there's Great Value in that um on the other side there's also the I guess it's it's mostly about reaction essentially redefining yourself it's something different now right it's a moment where we ask as I'm no longer just a client-side library we are going to own the server we're going to be a server or like server client coherent Paradigm uh and I think that's you know obviously that's an exciting thing to work on um I'm just personally myself thinking about like does it make sense for you like the thing is like it's a trend it's a it's an observation that people are excited about but like does it make sense for every single framework out there to chase the same Paradigm would it be the best if every framework in the future like even if you're saying your front-end framework you actually say the best way to use this is you use JavaScript backend right um I personally have reservations about that I'm a maybe a bit conservative on their front like but I'm not completely closed off to the idea of exploring that in view right so um and to do that obviously we have to collaborate with nux because that is the platform where we can explore that so um so anyway yeah I guess like like I don't have a very solid conclusion on like what my take on this is like I'm just really just going through my head saying okay like this is definitely something exciting and interesting like we're thinking about it too but uh let's see how it goes totally fair I yeah I think that SSR doesn't have to be this like All or Nothing type like mentality of this means you have a JavaScript backend that serves your whole application I've seen a lot of companies move to models where they treat next or even next as like a preprocessor to send correct HTML with good metadata down to their users as simply as possible and they still have their crazy back-ends written in like terraform kubernetes chaotic going whatever they've that hype is in that world nowadays I don't care I just write Lambda functions they work fine but uh the I've seen a lot of developers building with these tools as an abstraction layer that they've chosen to Define on top of other infrastructure and it's still for the most part a client slide app on one side and crazy old school in for the other they're treating the framework as like the an alternative to graphql almost it's the layer that lets you perfectly Define a back-end for your client such that the devil developer experience and the performance of the app both have significant wins and I think at whatever like you can adopt these patterns however much there are a few apps that don't benefit some amount from it yeah so um yeah I think my uh if I were to clip like specifies a little bit um I guess my some of my reservations roots from the idea that even though when you have a framework that claims that you can do pure static you can still use it for spas and all that uh the uh the narrative is very clear now that the best way to use next is to use after and react server components um and For Better or Worse um a lot of users don't really don't really know what is would be best for their use case and they would just uh use whatever the thing recommends as the default and they don't like in my opinion the way currently reacts over components is implemented does add a bunch of mental overhead that isn't necessarily A worthwhile trade-off if you're building building pure client-side stuff so um you know that's just my take I think uh it it comes at some potential mental overhead if you are for the group of users who are like okay I don't really need service stuff [Music] um so is it the the best idea to say have a silver bullet that can do everything uh in this in the same solution or is it better to have say react the core Library a bunch of different meta Frameworks that's you know Niche case completely optimized for a very specific case right um I think next is trying to be the Silver Bullet for everything and you know I think it could be potentially it could succeed at that but there's also the potential where you know trying to be a thing that can can solve every problem end up complicating this situation for some of the some of the more specific cases I I don't want to push back directly so much as challenge you with like a reframing this took a bit for me to click to like especially server components I was super skeptical initially the the reframing that's clicked for me to go back to the point of defaults is there is no better default than a static app being built when you're done and sending HTML to your user if that's a thing you're capable of doing with the application you're building if it can be fully static it should be fully static Dynamic Behavior should be added as it is wanted by the developer and if the default is fully status or fully Dynamic like it was in the create react app era or even starting a new app with v right now that is a bad default that you won't know is bad if you don't know better and generally speaking it's best to start with the thing that is the best use case for the user with the smallest amount of complexity possible and add complexity is you're doing things that are a worse experience for the user ideally the minimal amount to do the thing you're trying to do and I think that was when react server components really clicked for me it's you're building a static app until you choose something to be interactive and you're making a decision okay here will be JavaScript because here I am saying this is interactive you're drawing your own interactive boundaries in your app and yes that is a New Concept and that's weird because we know how these things actually work underneath but from my experience talking to new developers it's actually been easier to communicate in this way where you're building a page and if you want part of that page to have a button that you can click you have to tell react hey this thing can be interacted with it's a client thing I hate the word use client it should have been used interactive I'll fight on this till the day I die but I really when it clicked it clicked really hard and the goal was specifically to drive us towards the best thing until we have a reason to break out because it'll be obvious when the button click doesn't work it won't be as obvious when the SSR doesn't or when Sr doesn't happen you don't have metadata in your app as a result okay so yeah so so you're essentially looking at it more like uh it's kind of like Astro right like yes yeah obviously there are differences like I mean the the general idea of starting with something as static as possible and opt-in to interactivity yes there it what's interesting with server components is it takes two of my favorite things and abstracts an entire layer from them and makes it better so one of my other favorite things are you familiar with trpc yeah I love trpc the ability to like write back in code in typescript and immediately have to correct inferred type safety on my client is magical but I could also just await the backend function now and that's like his greatest trpc is and still is it made a really good abstraction on top of a problem which was the relationship between the server and the client with communicating data in an RPC like fashion with API requests it abstract now that server components exist I could just await the function I don't need an abstraction because typescript does what it's supposed to there now with Astro if I wanted interactivity I had to mount a client-side framework and it let me do that the islands of interactivity was incredible but I had to as I was starting development say okay I know already here's where the component's going to be because this is I need a view component here or a spelled component or a react component because I know this is going to be interactive and if you know that ahead of time you know exactly where the boundary is awesome do it but we don't always know and the ability to move these things around and not have to think about composability or not like when you abstract these boundaries and just get rid of them a whole new level of composability is unlocked and that's what I'm seeing here that I didn't have before right but react I mean server components and client components work differently though like so when you have say when you already implemented a tree where some of them are using a way to directly in your component body some of them are using use State and you want to now shift the boundary around you still have to do quite a significant amount of refactoring like lifting move these things around well yes and no it depends on how low you make the interactive pieces and how often you use the ability to pass server components as children to client components which is a very powerful aspect that gets around a lot of these types of things there's new patterns we're going to find and develop through these things it's it almost feels similar to like you can't have in a react component you can't do an early return before additional hooks like that's a weird thing but we got over it pretty quick I think a lot of these things hopefully at least and this is what I can't know until I've seen developers shipping it for years it feels like react is nudging us into better patterns by doing this in a similar fashion great yeah yeah I like that yeah and the the one last thing I wanted to push back on is like the fact that it's just next is the way to use react now I've seen a lot of very talented developers especially daishi he's one of the developers at poimanders they do a lot of cool libraries in the react ecosystem he's got a fully functioning react server component framework that he built in like a few days for fun already working really well and I am super hyped on the direction that he's pushing that in that might become a legitimate framework and it and it's on top of each right yes super cool yeah I I actually heard Ryan carniano make this argument originally and I think a lot about it the use server use client directives in react actually make it easier to build a new meta framework from scratch and Target files and know what they are like yes it's different enough from previous models that it's not going to be a drop-in replacement in existing things but you can build a better meta framework around these New Primitives so easily that next was the first willing to do it and it's like yeah there's a lot of Plumbing they can carry over but it does legitimately feel like as a person who's been developing next for years most of next has been thrown away and rebuilt because of how powerful these new patterns are it's great uh yeah I'm I'm it's I'm glad I get to you know get these insights from someone who's more closer to the stack yeah it's I'm always down to chat about this stuff and I'm far from a pure evangelist I push back more than I confluent nowadays especially some of the the plans around server actions I've been pushing and I hope we can get some really cool Solutions as a result but like yeah it's I am genuinely hyped on the direction of things and I feel like we are using servers more responsibly than we ever have before and I also think we learned a lot from next and things like the dollar sign fetch pattern and a lot of the cool like plug-in stuff that they've done over there it's it's hard to not look over to the other side of the fence and see things that I'm jealous of as we build our own Meta Meta Frameworks around next to add the things we like and Knox just has a plug-in system that does it all for them and I just see so much opportunity for for both collaboration and more importantly Innovation as that bridge is like there's that Gap is bridged more yeah nuts actually has an experimental implementation of server components too um but obviously it's kind of flaky and I believe if we want to actually push it into something usable it'll require some collaboration from view core side to to make a certain things easier uh but it actually surprised me when they got that prototype out and uh yeah so I guess it proves that this pattern does can apply to you know veed-based Frameworks to to framework stats built on other core libraries so um so it's it's going to be interesting because this is definitely one of the things we could explore um I guess we want to do it in a more like there are a few things that I I feel like we could potentially do differently like in terms of DX and like how we handle the boundaries how do you handle the client server separation but um overall I think we are we're definitely seeing this sort of I guess blending the server inclined um I was actually I was actually talking to someone who worked on Wiz at Google yesterday and and quick is also sort of taking those ideas into a different incarnation of whiz and yeah this this all feels a bit interconnected and it's super interesting so I hope our next round of uh sort of big Paradigm change in view will have something to do with that but obviously you know having a framework that has been around for a very long time it's always challenging to to go through this kind of big changes so for that yeah so I think the reacting react team is um it's it's very ambitious and also very I guess it's like the respect goes to the fact that they are willing to go for these huge Paradigm Shift changes on top of something that is has been around for a very long time and it's also being used so widely that you don't want to just throw everything away I mean in a way you're saying Nexus throw everything away but like from the react side I feel like they're preserving a lot of the good stuff people like about react adding these new stuff so um like in a way like sometimes you people will you know I a lot of people on Twitter think I always talk smack about react like the the reality is I respect a lot all the people who work on it and we are obviously having a competition but it's a friendly competition I think the end goal is for us to to find solutions that would benefit the the end users as a whole to to make web dev better as a whole so it's not really about proving what like oh you can do this better I can do this better it's more about uh looking at things critically and think about like there are great ideas here but there are also small things that maybe cater better to our user base so there are all these small trade-offs that we can make on a different level yeah I I love that I think there is so much opportunity here to innovate more than ever before and like just to emphasize how big of like an L next had to take in order to do what it's doing now to this day I still get like one of the most common messages I get in my chat is hey Theo what is create T3 app moving to next 13 because they think next 13 means you're using the unstable Beta app directory not that you updated the version to the safest most up-to-date version of the package that's fully backwards compatible nothing's changed for most users the Optics of I can't use the latest next version because I'm not adopting these new react patterns it's something they're just taking because they know it will be worth it in the end to throw away the lead they have in framework adoption if they fail because they're that confident in the collaboration and the opportunity and a lot of that comes down to Sebastian to be honest like having Sebastian so hyped about server components he left meta to work at versel to make it happen it's just incredible and those are the the shifts that get me so hyped and I've seen a truly incredible amount of those over the last couple years and it's it's also something I've seen in the view ecosystem like huge shout out to Daniel Crowe he has been one of the just the coolest people in web dev to talk to I I think he was my second ever guest on the show way back oh cool yeah like before I was anybody back when I got like 10 viewers live and he just was excited to chat because he wanted to make sure that if we were talking about full stack type safety that the work next was doing was being considered and I was like you guys are doing full stack dive safety yeah show up let's talk and yeah help me prep some questions for this because I wanted to talk to the people in The View Community I trusted and it's it just seems like there is so much like ripe opportunity to not just like challenge the quality of the collaboration going on in the react ecosystem but to trump it and with the the strength of Veet where it currently is and the strength of the Knuck or the like View Community and the amount of growth nux has had like next is still one of the fastest growing Frameworks right now I'm pretty sure more projects are started on nux than view V right now I could be wrong on that but it's pretty incredible and just like like the adoption of next on the web like the amount of websites I go to just to check them out or like go to storefronts and I say hey this feels fast what's it built on and it's next like almost as much as next it feels like nowadays like I wish there are more nuts three sites I think a lot of existing nut size are still on x2 but next three is like even better so I I wish to see more of that in a while when do you think we'll see next in the air it's like a top level recommendation in the dock similar to what reacted um it already is so the our main docs is still positions view as a client first kind of situation so our default assumption is you want to build uh either a static app or an Spa um and then we mentioned okay if you're you want to get like service are rendering you want to have Dynamic server-side data you still want to pre-render stuff we kind of the thing is our our audience over time so this has always been a a kind of a theme or a I think that we have to consider when we're writing view docs is that our user base seems to cover a lot more beginners who are really sort of just new to front-end or web dev in general and throwing them directly into server-side rendering Concepts it can be a bit daunting for them so we want to structure the it in a way like we introduce you to okay think of you as a client-side only thing first once you understand that we'll explain what service are rendering is and if you want to actually use this thing you should use next that's the current recommendation pretty much that makes sense my my concern would be and this is the thing that like I I try to put this like I saw a number recently I think there are three times as many react V installations as view Veet which is insane to me and I actually filed a PR with create react or on an upgrade app on the new react docs where I swap create react app for Veet because I was so frustrated that we were continuing to recommend a is it just truly to put it like kindly out of date tool and it was met with a lot of discussion in discourse but I was concerned we weren't going to see the change I would have filed the pr for next if I thought there was any chance of that and I didn't that's because I didn't think so and I honestly thought react plus v was the simplest and closest thing to a a good starting point because I I felt exactly how you feel right now where like the mindset of react is as a client-side framework the general use case is a client-side framework the easiest way to learn it is as a client-side framework the starting point should be a client-side framework and we should hide the server side under a fold because that's the thing you get to when you need it the thing that I have flipped on and it took a bit it took Astro it took talking to Ryan carniano from solid constantly it took Dan you're moving my DM slowly convincing me over the last year but I'm convinced server is the best starting point and client is the thing you learn to use when you need to rather than client is the best starting point in server is what you add when you need to yeah I agree there is this kind of it's it's more like a paradigm shift where um you are thinking of you're no longer talking about front-end Frameworks but you're talking about just web Frameworks and in a way these react is now a whole stack that would put it more in a position that you know like when you use the server-side paradigms of react you're using a stack that competes with something like rails or laravel in that sense um you can obviously still pair the two but it it's like the original position in this stack was like in the front end you need to pair it with a back end but now it just like kind of overlaps a little bit like this and and and in a way like when you so when you introduce that to the to new users you kind of have to position yourself like okay you're learning actually something that owns more stack than just a client-side framework you need to understand how a server the end client works and so there's a lot more concept to cover there right like like I don't I'm not saying that it is the wrong thing to do I'm just saying like it might take some time for the wider audience to sort of accept that change and I I'm in a way I'm happy that react is there to just like go about it like just go at it like overall I think our audience The View audience is a bit more like such like this kind of Paradigm Shift would be a bit of a too much of a thing to them but but maybe I'm sort of like in this old man yelling out Cloud stage so you know I'm I'm hoping to change my mind about that I would love to hear more about that because you have more experience than we do in react we we still support class components in 2023 and y'all have done much much crazier shifts in that regard like the The View two to view three move was maybe it's just yeah maybe it's the trauma of me you know every time you write up some RFC that sort of in a way I feel like okay this is sort of like if you want to build some somewhat decent scaled application you need to understand this but someone in our community well tell me like hey like this is not what I need or someone will come up and show me like we like when we try to introduce these two people like on Discord they are so confused and all that stuff so uh very often like I think the reality is that as you know people who work very closer to the core to the implementation we are kind of always excited about the new ideas and thinking about oh this is going to be the future this is the paradigm shift this is the moment where everything flips but in reality the general adoption comes as much a slower stage and maybe you know like the work you're doing helps to accelerate that process which is valuable um but you know like we have sort of in reality like for our users we have a more realistic challenge like we need to ramp this up over time instead of just like saying now you should think of everything as with a server as the first you know that's really fair I I like that a lot I try to think how I want to put this thought I I think we got lucky with hooks in a lot of ways I think hooks were such an obvious like yeah this is the better way to do this thing that we've been doing we will start using them as soon as we can and like I I was the hooks evangelist when I was working at twitch and I was one of the first people shipping major features without any class components being built for them and it was done in a way where I felt like I was part of a a change happening and I got to be hyped on this moment and that excitement is really hard to underrate and something I I firmly believe now that I'm like a CEO I run companies I advise many more I it's really hard to underestimate the power of excitement and energy on an engineering team and that's something you get in Spades with these types of big shifts you get people energized about a new solution or technology or way to build and that that's so powerful and I think that's what react is always bet on that's why react originally found success it was challenging our Norm of HTML goes here CSS goes here JavaScript goes here and instead we could kind of Define those boundaries how we chose I think the magic of react is how it it kind of threw away the HTML and gives us a better Paradigm to think about how content is rendered and where it's going is the natural next step in that sense but it's it's so goddamn exciting to be part of and when the core teams involved too it's not just exciting it's validating and easier to get buy-in at my companies and at my job and to my bosses when I'm still working at other places and the power isn't such that like they're picking a winner it's more so that they are genuinely excited about this thing and their actions their collaborations their releases their social media all of these things are indexing on that excitement from the core team to the developer shipping to users and the thing I always am scared of whenever I see any Community is not following the excitement and when I see as much excitement as I do like I I feel like I hear about next more than I hear about you right now and That's so exciting to me okay yeah yeah I see that as an opportunity that's a good thing I think it's uh it has to do with the release cycle because uh next took a really long struggle to reach 3.0 stable uh but once they got that out of the door it essentially um blocked them from iterating faster on these more uh so like the road to 3.0 was really just like getting this stable getting it stable getting it every every aspect of it like they planned for three they want to get it polished after that it really unblocked them in just like start thinking about newer more exciting stuff and for me we felt a very similar like process for View and you know the thing is V2 V3 after 2.2 we haven't done feature releases for a very long time mostly because I spent a lot of time on Veet and splitting the time kind of really burned me out uh but we are getting into new minor releases for view this year so you're probably gonna see some more hype about you core in the next few months that's really exciting to hear and I need to make sure we make some time to talk about Vapor but I do want to challenge one thing as the the community guy the I was on the open source side and still am like create D3 apps been super successful it's so easy to align like community and release cycle as though that there's this like close relationship between them but what I feel like I'm seeing with Knox right now it goes well outside of the release Cadence and cycle it's it's an excitement for opportunity not for like the specific features and around the release and it's easy as a a person whose job is to think about the releases all of the time to think about everything in relationship to that I think what's going on goes beyond that that's great I mean I I would be happy if if next is like I was honestly a bit worried because we dragged next three for so long like but like any any good news about Nooks getting more hype is is good news to me that's awesome to hear yeah I yeah I would love to go in on Vapor though because this trend of compilers in our existing front-end Frameworks is so exciting and yeah I just rant sure you know I I don't know anything about it Beyond you made a compiler something similar to react forget so tell us about it what what is vapor what's your goal why are you building this yeah it's it's it's not really react to get it's more like it's more like solid to be honest uh it's it's solid inspired uh in a way that so you know obligated to say Ryan carniato is the one who told me to ask sure yeah yeah I so for the very first time I mentioned Vapor mode I mentioned it was solid inspired so uh so if you think about view two like we switched to Virtual doming view too mostly because we wanted server star rendering at the time and we didn't really build a um so in view three we kind of I guess there's a bit of History right so when we switched to when we started working on YouTube we're like okay we want Surfside rendering and the most straightforward way to do service surrendering is you have a virtual Dom and you just serialize everything you render on the server and that was that is how react servers are rendering worked right so um so we built that in V2 but in V3 we we wrote the compiler again and we realized okay like serializing virtual Dom on the server is actually slow so v3's compiler actually can produce different output for the client and for the server so on the server it's similar to Stout where you just like concave strings as much as possible right because you have a template it's much very easy to statically analyze the static parts and just like put it them into a giant string and then like use like string interpolation with the dynamic parts so once we had that we realized okay like um the obviously there are other side benefits for virtual Dom where like it gives you some Library authors prefer to to write their components with retro Dom because it gives them more flexibility than templates um but in the end we realize okay like uh if we don't really rely on Virtual Dom for that and if we can say build a compiler because like we realize okay solid is actually compiling jsx to if you look at the output of the solid it's pretty much doing static static analysis on jsx so if you have a big block of jsx with only one interactive binding inside of it right the default output of react is you still have to generate all these virtual nodes and the default reconciliation is you have to diff all those nodes but the way solid compiles it it's just giant block of string that's using clone node you get a Dom tree and you locate that specific node binding and uh you just find it using signals right um so and in a way signals are fundamentally the same reactive reactivity system that view uses so um it all routes back to the same origin like in in knockout where you like have these explicit dependencies and you have something that runs and tracks those dependencies in rerun so the signals you see in preact and quick in in solid uh are all more and in angular today or or more or less the same Paradigm with what view has been doing uh and we essentially exposed the same Primitives in composition API when we introduce that so refs and watch effects are the equivalent of signals and effect um and they like if you ignore the implementation details they they are really the same thing so when I looked at Sarah's outfit I was like we can output very similar like we can do this with with View and it would be a very natural fit um and so so it kind of occurred to me okay so what if we just drop virtual Dom and compile the same view templates but into something that similar to what solid is doing um and because we already have a server-side compilation Target that's decoupled for from virtual Dom like this wouldn't really the only thing we lose is for people to write manual render functions but then again if you can compile jsx into the same thing so essentially if you can compile View jsx and view templates into this same new compilation Target we don't lose anything in terms of expressiveness or serious rendering capabilities but we get a better performance and a smaller bundle base Bounder size because um right now our when you ship a view app like probably 15 16 kilobytes of that is the virtual Dom runtime and if you build an entire app with this new mode you can drop the virtual demo on time replace it with the vapor vote time which is going to be much lighter um probably 60 to 70 percent lighter Baseline so um and and in a way the the greatest part of this is I believe we can introduce in a way that doesn't really affect existing usage and it should be able to seamlessly interrupt with any existing V3 apps so you just explicitly opting at the per component level uh our current plan is you just rename your food.view to food.vapor.view and it just gets compiled differently but it still works in your existing application so you can sort of starting converting the more performance sensitive parts of your app so obviously the limitation is the initial rollout will probably be just the subset of the features uh but this subset will be 100 compatible so uh maybe it just lacks some more fancy stuff like uh transitions or stuff in the initial rollout but you should be able to start replacing some of the very perf sensitive stuff with it um and give the benefit of it and if you have a Greenfield app great you can start the whole app with the new mode um that is generally the current idea so it's more like I guess I guess like we because the pain of the V3 rollout we're like okay we want to introduce these changes uh uh in a way that you can adopt additively similar I think the the rollout of hooks is a success because you know the the way you can just like incrementally introduce into it uh if we started with composition API in view to core directly instead of in a new major version like game view three I think it would have much easier adoption ramp up as well uh in hindsight uh but I mean you gotta learn from your mistakes so uh I hope so I think vapor is going to be something that's going to essentially it I think it also kind of uh overlaps was your point about creating like you know getting excited about it like the fact that if you're bringing something out new with a big caveat it's hard to be genuinely excited about so so with Vapor we kind of want to reduce all these caveats and just like this is pure gang you should be excited about it I feel that heart I think that the other aspect is to to do something different in a way that you can talk about it with your co-workers realistically like with hooks it was oh look at how much better this is and we can do this in our existing app by turning this thing on and it sounds like you found that with the like have a custom file extension or something that is the the opt-in way for now I I do really like that the the Curiosity I have is do you see opportunity to further innovate on the actual like DX of view through this new paradigm like does this enable patterns that couldn't have existed before that not only can exist now but will be performant so probably so the new file format does give us some opportunities to you know potentially ship some alternative syntax that's different from the normal View files like we have some proposals about like simplifying some syntax but uh it's like we have when you have a special file format you have all these infrastructure around it like IDE support syntax highlighters es link stuff like everything they need to be coordinated and uh having a new file extension may give us some opportunity in that but this feature itself specifically right now is uh essentially focused as a performance optimization um I think that might be opportunities to explore how the hydration would work differently um in a way that we want to so obviously the the current direction is we want to output something similar to solid but not like the good idea we want to take about is to uh essentially get as close to Bare Metal as possible in terms of the all the Dom operations that you need to perform to get something on the screen so that may also have to do how like how you can ship the least amount of code and do the least amount of work when you have already server render markup that may play into something with that like kind of how quick serializes a bunch of stuff in your Dom so that it can restore the subscriptions directly on the client without running your actual component um the idea of that so when you have an alternative compilation Target uh the extreme you can go about is you know like the code you write is a component but like Ryan mentioned this quite a few times like component is an author time concern like the final output doesn't have to be a component like eventually what you want on the client is just some signals and subscription relationships and some event handlers these are the bare minimum that you need to get a working app and how do you convert from a component model that just exists in the user's mind to something that no longer exists like you're basically just converting a component tree into all these subscription relationships and event handlers so that would be a more extreme form of closer to Bare Metal like that's something we want to try as well like right now uh it's still kind of in an exploration stage but we're kind of excited about this direction I yeah this is just so beyond what I I expected it's so cool to hear like this is basically like to the developer this won't look too different but like this is it basically a rewrite of view the framework in a lot of ways this is yeah but we want to retain the exact same the X that's super cool it's it's interesting because like this almost feels like the exact opposite of what react is doing where they're trying to like extend where their DX goes in terms of like like what platforms it can Target and how like the actual code Works in our mental model around it almost entirely like they're like throw away your current mental model for this one the components look similar ish but now we have like async everywhere the syntax has changed a whole bunch it's it's interesting seeing what the opposite looks like of we're confident that RDX we're confident in the Syntax for confidence single file components the way we build these things but we wanted to work better so here's how we're going to do that it's just such an interesting like opposite approach yeah yeah I think I think he summarized it very well like we are so I think in the during the whole phase of shipping composition API we were honestly there were periods I was in self-doubt I was like is this the right move right but after we shipped script setup in 3.2 and the community started to actually warm up to the idea and we are getting a much much more positive overall vibe from the community and they are actually really happy with composition API now so uh this gives us the confidence to say okay like all right the axis is good so we want to actually retain that DX and give you something that give you a better more performant app by default just without you having to do anything yeah I love that and the composition API is something I've heard quite a bit about from all sides even immediately after you say that in chat people are composition API for the win so good people are hyped on that like that's really cool to see and yeah it's nice to go it's like a nice Tick Tock of you do that and now you make the actual compiled output entirely different then maybe new patterns are discovered with that new compiled output we go back and rethink some of the patterns and then we go more into optimization I think that Tick Tock of like the back and forth the pendulum swing of go from DX to Performance to DX to Performance is how software actually improves if we focus too much on one we end up leaving the other behind and I think react had us thinking way too much about DX and not enough about the performance of the applications we shipped or the standards that we were building on top of or the browser as a whole we flipped way too far the other way for a bit where we were all in on server everything but I think we're as we swing back and forth finding a a good place for applications and for the web yeah in a way like I guess like we um like again I said we are definitely open to exploring the server first Paradigm but I guess we are not so huge like focused on focused on that at the moment mostly because we feel that you know something like Vapor mode could also provide drastic improvements in terms like just the default amount of code you [ __ ] and the hydration performance um it's gonna make the default use case so fast that um like it's it's gonna I guess there's there's just this sort of um there's this threshold where like the typical amount the typical you app you build is going to be so fast that um when you like we I guess I want to go back a little bit because like when we compare paradigms we often like say okay like this Paradigm is better than this Paradigm but like there are a lot of variables at play right like uh not all Spas are equal not uh like full hydration apps are equal it kind of depends on your implementation a full page hydration like people think oh it's going to be slow but in reality like if you make it fast enough even you're hydrating the whole page it can be incredibly fast um and it probably is enough for your use case right so it's it's more of a pragmatic like thing you have to kind of compare in your actual use case rather than just uh categorically say this is not gonna work and we're just gonna go to another completely different Paradigm um the the one piece I would challenge here is like what is the server is a very wide spec like yeah I I disagree with next choice to continue supporting static export I don't think it belongs in next but they have insisted and honestly now that it is fully compatible with the new server component model it's actually a good way to build a bunch of static HTML files for the various routes and you can Define in your config like here are the routes that we want to generate for and then you don't need a server you need just a CDN and a bucket to throw your HTML and JavaScript files in and it will generate an optimal static site that isn't just one HTML file anymore but I think that one of the benefits of these Frameworks isn't that like server side means you need to run a JavaScript server to build a viewer that react app it's you have to run a JavaScript build step in a server somewhere it could just be on your machine that's totally fine but the the concept of sending the right HTML to the user is a value that I think all Frameworks should consider and while I agree not everything needs a JavaScript backend I I disagree that not everything needs some level of HTML preprocessor be it a build step or a server step to have a more optimal experience both for the developer and user yeah I don't think we're disagreeing there I think that'll make sense and yeah one thing that kind of also occurred to me to occurred to me is that I guess our reservation about say like recommending nuxess to the default is that you know people still use build web apps in many different ways in a way like if you live in the react well you feel you feel like like next is the obvious way to build things but there are tons of people out there building web apps that's based on Rails laravel or djangle or they have a existing back end that they just have to work with and for them when they look at a solution they still want something that's climbed by default because that is the only thing they can actually use in their situation um so so in a way like I guess using something like next is when they have do have control over the whole stack then you have a much easier like much less constraints in making the decision but like when they're looking for something that's like okay I just want the client side um not saying react cannot do that anymore right react still can perfectly do that it's just the way you introduce this thing for someone to look at it on First Sight uh I feel like reality is going to lose a lot of people like not familiar with the whole situation and they're like I have a back-end app I want to add a front end to it and oh you're asking me to use a full staff framework that's not going to work for me you know um I guess it could be something that happens I yeah but I think we're losing even more people when they go to the view docs they start a view project they put it up on Google they send the link to their friend and the metadata is wrong even though they update it in the view app to to change the head tag correctly the JavaScript doesn't run before the like actual like pass that like Twitter or Discord do to read the HTML get that metadata and now when you send a social media link to somebody the card's Incorrect and like these types of things are inherently wrong with client side and the the thing that these Frameworks unlock isn't like so depending on like I don't think you have to run it on a server and even if you do it's often better to do your API requests on your server than on the user's device it it both in the like I think the case you're describing is better than you give it credit and I don't think it is as necessary as you're pushing I think that these Frameworks provide value as a server side preprocessor that doesn't have to run on a server it could run on my GitHub CI it could run when I build locally but building the right HTML even if the right HTML is you have four different routes that have the metadata pre-packaged on them and then it loads totally client-side view from there like okay so let me let me frame this Frame it this way so I think the current way react introduces itself to users is essentially saying we have this so assuming next is the default recommendation right so we have this great framework that is able to do things all the things you want to do like it can be a full stack with a server it could be just exporting to static it so you can use it different ways but you're all using the same thing like um but the default is you you want to use next right um I think that makes sense like so the way we approach it a bit differently is like if you read The View intro page we also start by saying view is a framework that is the progressive framework that designed to cater to different use cases so we actually explicitly list the cases you might want to use it for so if you have a existing back-end you want to just enhance some HTML you want to build an actual single page application you want to have a full stack app you want to have statically generated app so we actually list these use cases and we give you different recommendations based on what kind of thing you want to build I guess we just want to get the message clear from the get-go that there are different things you might want to build and so from The View ecosystem we don't believe currently there is a silver bullet so you need to be aware of what you're going into uh and you know um I just prefer to get this message kind of clear up front whereas what I fear about having this sort of default recommendation is people can say okay next allows me to do this so I'm just gonna use everything it provides uh without realizing this may not maybe an overkill for my use case or something like that um I I would have to know more about like what next does or doesn't provide I do love the idea of a minimal starting point I I think the best approach is always going to be the the minimal starting point with the maximal conversion on excitement when like the thing they have in mind becomes more accessible because the tool they're using has a path to it and if your docs and your tools and all of these things lead you to a path of most excitement both for you and your users that's when magic really happens and I think I think there's always more opportunity for that and yeah with everything going on even just with like Vapor I see a huge opportunity to talk with them more and figure out what it looks like to to build the best starting point and ending point for anybody who wants to build with you any necessary disagree on things I think there are there could be multiple valid ways of doing things and I think there are definitely things that we can think about from your take here and I think you helped me better understand reacts like overall position on this new paradigm here so I really appreciate that uh obviously I still have my own opinions but I think this is something that's very valuable yeah and this was super enlightening for me I had no idea just how how much Vapor changed things that was super cool to hear about I loved learning all about how you ended up both like feature creeping your way to a framework and then eventually feature creeping your way to a framework Builder tool and all that was so cool if two more quick things I wanted to make sure I got out first is I know we shot a little bit with Vapor but just in general your thoughts on signals as the whole framework Wars starts to get build a bunch of hype around the concept yeah I feel like sickness is right we are it's like picking up an odd idea and suddenly everyone is excited about it like I mentioned multiple times it's this whole Paradigm exists way before all the popular things right now like Knockouts starting like 2009 and it had almost the exact same thing in it people just I guess knockout didn't expose the effect Primitives and the default way AIDS encourage people to use signals just uh didn't allow for the kind of composability that we have today but like really the the ingredients were there and uh and if you look at the way knockout Creator observables it's very similar to like you use it by calling the function it's like almost the same as solid signals uh so um I'm not obviously I'm not saying that it's not um like solid actually I think the biggest contribution is that its use of signals and the way it builds it created this compilation output that that is a really good use of signals in the way that you have a piece of static Dom and you use signals to surgically bind stuff inside of it um in a way view one kind of worked that way uh but V1 did it by actually creating the Dom from your template and then walking it and converting these findings one by one so it's less efficient than a how to find compilation right we like to be completely honest when I built review one I have no idea how to write compilers so I was like I don't know how to do this I'm just gonna throw it into the Dom and walk the Dom I don't think the thought of a JavaScript compiler was particularly common at the time either to be fair and now it's like necessary to get your feet wet yeah but but it's it's a kind of fascinating how like this idea has exist all along and um in a way like people are now getting excited uh I think when we release composition API uh like it's it's a bit ironic because a bunch of you users hated it because it looked like react hooks uh react user didn't pay much attention to it because they feel like it's just something irrelevant to them um and but when solid got more popular uh react users look at solid and they feel very familiar because it's GSX dysfunction components everything looks like reacts except signals gets around some of the pitfalls of hooks like you don't you're actually running the function only once and they find that refreshing uh so I think um you know it's just a being marketed at the right time to the Right audience is probably quite important on this aspect and obviously uh quick introduced signals as well like I think clicks initial uh proxy based State Management was actually more or less inclusified view composition API because I actually talked with uh uh sorry I forgot who exactly on the team I talked to but someone explicitly mentioned to me that a quick State Management was partially influenced by view composition API and obviously they bought more into the signals hype to write that train uh with all the marketing but um I think right now if you look at it Priyanka signals uh quick has signals uh solid head signals angular sorry doing signals and very interestingly we were internally playing around with um playing with a alternative API first like because right now view refs are Deep by default and that actually in some situations it may not be the best default if you're super super sensitive to perv so we were thinking about in Shallow ref felt like something that's tucked away you want to bring it more upfront so we were like proposing a new internal proposal about a new API and it looked almost exactly the same as angular signals I was like did they actually read our Imperial discussion or what uh but I think we just like somewhat just came to the similar API design uh obviously that thing we didn't really put it out because we feel like refs are still good it's just like we're like I guess the point is we're always looking at these different ways of doing things but uh I think fundamentally it's good that this sort of fine-grained reactivity Primitives automatic tracking kind of Paradigm is getting more attention uh because I think it's a great Paradigm it allows you to build very um and with the right tooling you can actually build very predictable systems that like contrary to a lot of beliefs from the react uh people like because you know react always promoted this sort of functional top down everything is just a function it makes it easier to reason about uh view is a function of your state blah blah blah um from our side I don't think signal breaks that mental model at all like signals is just a declarative way for you to say um this thing will use this and if it changes you should this thing should update that's really the most basic way of declaring reactivity relationships and you just it's still declarative because you're setting everything up very explicitly and there are runtime mechanisms allows you to to understand situation I think solid has built a Dev tool that allows you to visualize the relationship between your signals uh view offers you like when you're running an affecting view a Watcher in view we you can actually uh passing debug options to say to just like put a debugger there and you can know exactly when a depth change has triggered this effect to run and you can trace to see which exact that bit is or you can say um so we give you all that kind of stuff for you to to debug this kind of thing so it's uh I think for a very long time we get a bat wrap for like oh like view is mutable state it makes your harder to understand than the functional style and I never think that is the case like we can provide you with great tools for you to understand your app and make sure like your reactivity like some yeah so so overall I'm the point I'm making is there are multiple paradigms that can work for you it may have to do with which mental model you prefer and I think it's a fact that for a lot of people the signals mental model just works better than the hooks mental model yep and and but you know it could be the contrary for someone else so it's not about which one is right or run it's about which one works better for you yeah well it's been interesting for me is uh how about this well solid started because to Ryan the signal model was easier to work with understand and scale he loved it in knockout he wanted something modern like it and knock it was obviously a very direct inspiration for solid he's been very transparent about that from day one what he didn't expect and what honestly I didn't either is for so many additional developers to find those patterns more intuitive to work with as well and a lot of developers have found using solid for a lot of use cases to be more pleasant than even react coming from react in a lot of ways it's very different in a bit of a mind [ __ ] but in a lot of ways it's really compelling and it it's so cool having like components become imaginary and seeing the data flow in a more data-driven way one thing you mentioned that was super interesting to me is the idea that like your proposal and angular's proposal were so similar well I agree that signals aren't the end-all be-all it's not the mental model everyone's going to want to pick up react in components weren't either MVC seemed like it would be around forever and we would be using that in the client forever but generally speaking we as a whole moved overall away from it and what I'm trying to gauge is how much is signals a thing that a few people prefer versus how much is this going to become the new default and when statements like angular and view thought up the same thing internally around the same time are being made that seems less like a trend and more like a a moment and that's what's exciting to me here yeah I mean it's more like a specific API surface um it optimizes a few different things than our current API I didn't really put it out publicly mostly because it's quite different from the default experience in the U but I think that's the natural decision you would arrive at if these are the things you want to prioritize in that design and I think um it's it's also because fundamentally like it's just I actually wrote a section about this in view docs that's just showing like we can simulate solid style signals with view shell RS in 10 lines we can simulate angular style signals with view shallow runs also in 10 lines so like they are all fundamentally the same Paradigm uh but we can maybe have different higher like higher level API surfaces with different like emphasis like views API use the dot value like proactive signals also use dial value quick Quicks API also use dot value these are more like trying to cater to the sort of treat this as a normal object property you want to just mutate it at will whereas uh solid API you have to use the Tuple similar to react it emphasizes the read write segregation like you you can pass the signal around without passing Etc so it gives you more safety about State ownership and then the angular Style is makes your intention of updating the state more explicit by requiring to always use function like use a method like like signo dot update or signode.set like it's just more explicit like so this is kind of encourages you to always think about your signals more like a piece of State you are managing rather than whereas with a DOT value interface it's more like a variable it's just like a closer to a variable right so these are just a functional programmer I definitely have my preferences but I do like that way of putting it it's like do you like interfacing with variables or do you like interfacing with functions it's similar to why I really don't like svelte in a lot of ways I feel like svelte changed what the equal sign means and that scares me that triggers a lot of people's like oh this doesn't feel right um that was my initial reaction too and there's some anecdote here because like um the night before reacts was announced Rich Harris Dan abramov and I actually met up in New York City we had like a just a private private gathering with a bunch of other folks and so we talked about stuff and they mentioned oh we have a big feature releasing tomorrow and we had no idea what it is the next day we found out okay this this this is quite different from how react worked and um and that kind of start got me to start thinking about composition API and that got rich to start thinking about spell three so 808 both composition API and spell three are influenced by Riyadh Hooks and um I still remember the thread that rich put out on Twitter he was like oh like maybe we can do spell this way and in the next few hours of like my thoughts evolved we can actually do this what if like assigning this thing actually just triggers reactive changes and I was like this is like not JavaScript you know it's like spell script and it was like hell yeah and then he just went whole like all in on that direction uh I'll never forget this felt is a language now post yeah and I think I think that uh that worked out well for them like we all we all spread this direction a little bit in uh we actually had a proposal called reactivity transform that is the same thing that allows you to just like declare variables as reactive and assign it to it where trigger changes but in the end we felt like it just didn't fit with the the kind of overall usage that we're seeing like uh the trade-offs right that we are having is like we want the code to work the same in and out of components so you can use hooks outside of react components and you can also use composition API outside of your view components and that allows you to just move things in and out and extract things reuse things very easily so we see that value so we felt like okay like this is probably not the direction that we want to go with but like it's always fascinating because like we are I'm like I'm probably like I'm always open to just look at what other Frameworks are doing and feel like okay is this the right fit for view like if it's the right fit like we have really just like feel like okay if it makes view desk lives easier you know we'll take that idea I like that approach a lot I realize I've entirely forgotten to do an important shout out which is renderatl if that mentioned that Evan had there of the little talk he had with Rich Harris and Dan abramov sounds like the kind of thing you want to be able to be part of in the place you want to be render ATL is one of the coolest and uh huge shout out to Justin for making this whole interview possible if you're interested in going to rental ATL it's a awesome web dev I guess react Focus but not necessarily web dev conference in Atlanta and yeah so the there's a discount code for 10 off if you do the render uh command in twitch chat I will link this in the YouTube chat as well if anybody's interested it's going to be an awesome event and I don't actually remember if if I've even asked before but uh Evan what's your talk about at render ATL uh it's actually about like thinking across framework boundaries it's it ties in a lot into how you know if we look at under the API surface how things are more similar than different at a fundamental level like I'll probably talk about signals I'll talk about the ideas that you learn from other Frameworks and the ideas that has been like how like ideas propagate through different Frameworks like how reacts influence composition API and felt and all that um yeah I guess the the theme of The Talk is to encourage everyone to look at the web dev ecosystem more as an interconnected system instead of a silos because I for a very long time I feel like a lot of devs they start with the framework and they just live inside that Walled Garden and everything they learn about is only about that framework but I feel like it's valuable for you to step out and look at all these options even if you're not going to maybe use them for your day job it's still valuable to see the different trade-offs these different solutions we're making uh I think it's going to be beneficial in the long run absolutely agree that's so cool and I yeah it's awesome to know the talk is going to be relevant to web devs and all Frameworks as well it's yeah super exciting that's going to be an awesome model to be sure to stop by for that and I think I'm actually going to have some form of setup there we're still figuring out the details but I'm going to be live streaming one of the days at the event so if you're down to stop by and talk about some stuff that'd be super cool to have you there yeah sure only other question and I will kick myself if I don't get to this one do you remember my issue with query params in Veet yeah I I do um so it's unfortunate right um yeah till the offer chat because people listening aren't going necessarily know I was a really early and heavy the user and I was also an early and heavy versell user and I wanted to use Veet to make a client slide app while using versel's API directory to get data through her cell which should have been fine and simple the catch is in order to use that API directory locally have to use versel's CLI so I was running v through versel's server locally and Veet has a specific quirk in query params where it uses question mark Dev question mark file and a few other query params that aren't technically formatted to JavaScript standard they are formatted as correct query params but for it to be parsed correctly by JavaScript it needs that or Cola or like key equals value so when the Versa CLI would unwrap the URL it would do such it would get a functioning URL but it would re-wrap it so it wouldn't be question mark Dev it'd be question mark Dev equals true and Veep couldn't handle the URL format it that way and it broke everything yeah so we never really expected the use case like we never expected like the V query would run through another server that somehow changes it the the thing is because of the use of the roller plugging pipeline internally like um so there are proposals for example like using a custom URL prefix I think would probably be a better choice but um it was kind of too late to change that because a lot of plugins are already written relying on that pattern uh so this is kind of something we only realize in hindsight um and the other aspect of it is we've always been wanted to replace the custom parents with um some different mechanism but the thing is you may get additional HTTP headers when you're working with a real server but inside the plug-in pipeline all everything we get is just one ID string so we have to encode a lot of additional information in that so that the plugins can sort of pick those query strings and do the right thing and there's really no other way for us to encode that information other than the query string so yeah I'm cool with the query strings the only issue is the formatting of them like you need a key value for a valid query param if it was just Dev equals true would be good but it's question mark Dev and then when that so all that Versa server is doing the only thing it does is it takes the URL it throws formatting it to the right format yeah it creates a new URL just using like the URL like JavaScript helper so that it can parse it and then it restringifies it and sends it back out but as it makes a URL from the string and then restringifies that it changes from Dev to Dev equals true does this still not handle that correctly I mean it it probably does by now I haven't tried this for a while I'll be honest yeah but it was like I spent like on and off pushing on this for about eight months and I ended up just giving up ring a really frustrated blog post on how to fix a client side like how to fix it on your end and moving on yeah because I even patched the mercel CLI to use the original URL instead of using the reparsed one in order to get around it yeah maybe we just um you know we get so many issues this one just like felt like a really Niche case so it kind of get yeah gets pushed down by all the others that were kind of look more important that makes a ton of sense and I think it's part of how I framed it too because I framed it around the Versailles CLI but that like the result CLI wasn't doing anything crazy here it was just parsing the URL and like if you take a valid V URL put it in like new URL in the browser and then use what comes out of it that won't work with v it might now but it didn't at the time sorry yeah yeah I think this sounds like a pretty straightforward effect I guess if there were a PR we would probably just merge it I think I made one and you rejected it oh you did really yeah I'm almost positive that's why I had the gray okay I'll look through the notes that you share in the future but yeah uh I I'm also down to just go test this because it's secure I'm curious but like yeah I I'm positive now that it was just a misunderstanding and I am much more excited to either go see it's already fixed or go fix it myself so yeah that was the only bone I had to pick I am pumped that you were here thank you for everything actually one more compliment because there's a comment I made in the past that didn't get communicated properly thank you for raising the bar for international open source communities you're one of very few that pushed that and you pushed it really far like the thing I have noticed personally in my community is that with people who are asking about View are not just the everyday like a 200 000 plus dollar a year web dev Bros it's people all over the world that feel like they're part of something and that's like feeling like you're part of a movement is so much more powerful than any technology you can learn and the amount view has enabled that for people who aren't here is incredible and thank you thank you yeah and sorry for that tweet yeah yeah I know and like I always said about X like it was the thing I was saying was what was important not what I put on the diagram I just put something dumb I didn't post that diagram I never would have somebody screenshotted a moment during my stream and posted that so I had no control over the message totally got it pushed to me by Twitter just out of context and yeah I think the tone of the guy who posted it was already kind of negative so just like no actually I think it's positive if I recall the original tweet was positive but somebody quote tweeted it negative yeah I think I think I directly saw the quote retweet so I was like wait yeah no hard feelings at all I just wanted to make sure you you understood my goal there was to say specifically view set a high bar here and the like exact quote was I use react if I'm running the team we're using react unless our team has people that are already deep in the view ecosystem and care about these things in these ways I absolutely am going to learn View at that point like even I the react bro would move my stack to view given these strengths applying to my team cool yeah so I also want to give you a shout out because like to be 100 honest I was like I was really for a very long time I was annoyed by the whole Tech influencer culture I was like like there's so many grifters just posting useless stuff on Twitter and like crazy hate me yeah so so sadly so I think when I posted the tweet I kind of unconsciously just grouped into that kind of you know uh but I looked at your content later and this conversation it really kind of makes me feel you are you know like you're doing something different and I really appreciate like even though you are a big react proponent you are also kind of open to say have this conversation with me and I think that was a really valuable conversation so yeah thank you for the thing you do I appreciated a ton I I think I have the exact same frustrations you do around how grifty and obnoxious everything felt like I some of you and chat just said that they blocked it unblocked me like 50 times on Twitter because they were so conflicted on how to feel about me and I get it like I look and act like it influencer in a lot of ways but the reason I did it is like I worked at twitch for five years I I know how YouTube and twitch and Twitter these platforms work I've always been excited about that but I ignored it because I cared way more about making good software and building with these tools and just being a developer what absolutely like blew me away was so what happened to me is I quit twitch I no longer had my community of hundreds of Engineers I looked up to to talk with about this cool stuff every day I wanted that back so I started my YouTube and my twitch just to have a place to talk with more senior engineers and I was one of the first to know how to do that with like a nice camera and a decent production but it seems like I made something a lot of other people wanted to and that's what was special about me it's nothing necessarily about me it's a lot of people who feel the way we feel hundreds of them are watching right now shout out to each and every one of you but it was that we all wanted this we all wanted a fun [ __ ] posty place to talk about how the future of the web will work we're not just here to to tell people buy these 15 courses and you'll be a programmer someday we're here to to Really push software forward and because of that both sides kind of hate me because the software devs see a YouTuber which they're used to always being bad like the Redux maintainers have come at me because they they think I am irresponsible because I don't know what it's like to be a maintainer I'm just a YouTuber and then on the YouTuber side they hate me because I'm not here to like do things the way they do I don't really like the way they do things and they feel insecure about it and the result is a lot of people have reason to [ __ ] on me and I get it I don't really care too much because for every one person who does there's a cooler person who ends up like you seeing through it coming on the show and making something [ __ ] awesome happen for the future of the web and the coolest thing throughout this has been how awesome the people are that you don't let the [ __ ] keep them from having the conversation and I was very scared you wouldn't be down and the fact that you were has once again reinforced my to be frank childhood belief of you proved how cool open source and software can be and I appreciate you a ton for the time man seriously thank you for coming on thank you for having me of course oh we're gonna wrap up here I don't think I'm gonna go any more after this so I'm just gonna end it thank you all again so much for stopping by make sure you check out render ATL if you want to come to one of the coolest web dev conferences in America one more disclaimer on next I think it's important don't go there if you don't have a job in software and you think it's a place to get one ideally have your employer pay for it this is not a like don't go to conferences and spend thousands of dollars in hopes of finding your first job that's all I have thank you again Evan this was awesome




## Vite 6 is important, here's why - 20241203
if you're not using nextjs and you're using a modern web stack you're probably using something powered by vit it's quickly become the standard for bundling your applications and it is the standard for a reason it's really really good I still remember the days of the chaos around webpack I even was an early snow pack user which fun history lesson snow pack was created by the same people that Astro was obviously Astro's been more successful you'll probably never even heard of snow pack I know not many have but vit was the thing that appeared that one it's a phenomenal technology for bundling your client side apps but I said something very specific there client side apps vits never really understood servers all that great and we've had to hack all around it to make code that works both on the server and on the client for things like I don't know ever heard of server components we have a lot to talk about here because V V6 changes all of this and then some I am genuinely really hyped for this release and not just for V itself but what this will enable for new Frameworks going forward it's a very very exciting fure future but you know what else I'm excited about today's sponsor my man where are you sorry man I've just been waiting on this build for like an hour the build times are killing me I'm beginning to regret this Rusty right bro have you tried blacksmith yet it's gnarly what's blacksmith they run your GitHub actions for you but they're way faster and cheaper they got Tokyo's build times nearly in half that's cool but I don't have time to set up another Runner but it's so simple man it just takes two clicks and they even open the pr for you here I'll do it on my phone quick what wait your builds are failing right now thank you to blacksmith for sponsoring today's video Let's dive in I've been waiting for this one for a minute today we're taking another big step in V's story The V team contributors and ecosystem partners are excited to announce the release of v 6 it's been an eventful year V adoption keeps growing with npm downloads per week jumping from 7.5 million to 17 million since the release of V 5 a year ago V test is not only being favored more by users but it's also starting to form an ecosystem of its own for example storybook has new testing capabilities powered by vest I'm kind of known as the like anti- story book guy story book kind of sucks but they don't adopt new things so if they're adopting v test that says a lot of good about it and how valuable it is it's really cool I hope they fix the parallel problems that existed before I'm assuming they have but y'all know how often I'm doing my testing nowadays new Frameworks have also joined the V ecosystem including tan start one Ember and more web Frameworks are innovating at an increasingly Fast Pace you can check out the improvements that folks have been doing over at Astro Nu spel kit solid start quick City Redwood JS react router and more a couple of these have been blocked a bit by V which we'll get to momentarily V's used by open AI Google Apple Microsoft NASA Shopify Cloud flare gitlab Reddit linear among many others hey I use it a bit too how can I seek ping in there I get it Ping's not quite as big as apple or NASA it is what it is two months ago we started a list of companies that are using V we're happy to see so many developers sending us PRS to add their companies to the list it's hard to believe how much the ecosystem that we built together has grown since V gave its first steps yeah what a chart fun fact I started using V here because if I recall this was around when Evan first announced that they built a react bundler for it because previously vit was just for view it was trying to take advantage of es build to make a better view Dev experience and now it's used by a lot more stuff but it's fun to see the the growth since then especially as a an overly early adopter speeding up the vit ecosystem last month the community gathered for the Third Edition of vit comp hosted Once More by Stack Blitz huge shout out to stack Blitz they've been sponsoring stuff for a bit now they make awesome things you might have even seen bolt. new probably not the sponsor of this video but they know what they're doing bolts Open Source by the way which I think is really really cool regardless stack Blitz they understand the importance of this ecosystem they're invested they're putting their money where their mouth is I have a v shirt that stack blits paid for which I think is really cool as Evans says here it was the biggest V conference with a broad representation of Builders from the ecosystem among other announcements Evan announced void zero which is a company dedicated to building an open source high performance and unified development tool chain for the JavaScript ecosystem void zero is the company that's behind roll down and oxc and their team is making significant strides getting them rapidly ready for being adopted by V if you're you're curious I covered this all in depth in the void zero video that I did but the quick tldr is that V right now uses two bundlers under the hood it uses es build during Dev where it creates a new file for every single one of the things that you are bundling from your app so every file in your JavaScript becomes a file inside of your browser which is great because it's way less work to bundle and way less that has to be updated when changes happen but it also sucks because if you have thousands of files in your project you can't just send thousands of files down to your user that the unbundle dream is a myth for big code bases it just doesn't work that way as such rollup is what they use for production so you still get the benefits of a single bundle but it comes with a catch it's a different build tool and it's nowhere near as fast as es build which is written in go so you get used to the dev experience in es build when you're building it on your machine and when you go to ship to production it's way slower and has different bundling characteristics because rollup is a different bundler than built there's an obvious solution here what if we just rewrote rollup to be way faster by writing it in Rust super easy fix right yeah yeah it's happening it's way further along than I would have expected and I'm quite excited for roll down which is that roll up rewrite and rust to be the default for both Dev and production so we get the fast speeds in Dev and a reliable environment in prod I'm excited for that to be what V's built on that is not what happened with V6 though so I don't think that we just got that it's it's not ready yet bunch of other things were announced that there really cool stuff they also got a fun New homepage and a much better domain the new V site is absolutely stunning I think it's beautiful they did a great job with this one but we need to talk about what's actually changing here have the getting started node support here's what I was baiting earlier here's what we're all here for this is what I am very very excited about V is getting more flexible with the new environment API what is an environment is it like an EnV v no environment is a place that your JavaScript code runs up until now V's experience and focus has been around one runtime the browser's runtime it builds your JavaScript from your project and spits it out in a way that you can run it in the browser pretty well but more and more now we're not running our JavaScript just in the browser and I don't just mean spinning up an Express server in node I mean we write code in one code base that runs in multiple places maybe it runs on the edge for your worker or for your middleware maybe it also runs on a dedicated server for the core node parts and to do your server rendering and then obviously it runs on the client once the user gets the payload so how do we use vit to orchestrate all of these parts around the answer is with a lot of pain nille built a tool called viny which is a SDK around vit to solve a lot of these problems for you to allow for the building of vol stack apps uses Von Nitro as their attempt to make it so you can run one code base in multiple places is and split it up in different ways but it's work a lot of things are built on top of viny like tan stack start solid start and more but this is to be frank a pile of I don't want to call them hacks but they're certainly workarounds because vit was not built to do this now V's kind of built to do this with the environment API as they call out these new apis will allow for framework authors to offer a different Dev experience closer to production as well as for the ecosystem to start building and sharing new building blocks nothing changes if you're building a single page app so if you're using vit as a create react app alternative to just spit out a single HTML file with a JavaScript bundle that loads the rest of your experience this is not going to affect you at all Beyond making it theoretically slightly easier to get off that old way of building sooner than later it shouldn't be so hard to move from client everything to a client server hybrid this is going to make it a lot easier if you were curious why remix still doesn't have server components this is why we've all been waiting for the environment API this is the article about increasing V's potential with the environment API that was linked in that main announcement the important detail here that I am the most invested in is that a single application now often needs to handle multiple bundles at the end of 2020 server components were announced and if you want to use them you'll need to bundle for RSC separately from both client bundles as well as for the traditional SSR bundle that means you might need up to three different bundles for one application and if your tools aren't built to handle that you're kind of so nextjs is as much a compiler and build tool as it is a framework nowadays because they've hacked webpack so hard that they built their own from scratch with turbo pack it's not easy to get these parts working it's a big part of why next is the only real way right now to go all in on server components because they built all of these things vit's assumption was that this would never be a thing they kind of gave SSR and they kind of gave browser support and treated them as separate unrelated things these hybrid approaches and these many bundle approaches were not a thing V was architected for so building next on top of v it would not have been fun that's the goal of these changes though it makes it a lot easier so for the basic Spa example we have code that the browser gets we have the browser and then you get the code that the browser needs through this HTTP layer execute code from the browser the browser sends the HTP request to V's code Transformer and the transform code is ex executed by the browser when you also have SSR we now have this code Transformer that has to generate code for the server execute it and then send the HTML that it gets back down to the browser and then it needs to get the same JavaScript to make the page work in case you haven't caught up on what SSR means usually the term SSR means taking a client side application and running it once on the server so the HTML isn't an empty file if you go to a site like twitch.tv which by the way is where I'm currently streaming myself recording this live so if you want to watch me as I do these things twitch.tv/ Theo this HTML file that we just got back from twitch has almost no data in it once you kill all these weird script tags I deleted everything from that HTML that was JavaScript or css so this is the HTML you get when you go to the twitch site this is it that's all of it it's about 40 lines of HTML and it's just shells because that's all twitch sents the rest is Javascript that you have to load on the client side in order to run the actual page so there's a bunch of script tags in here that say which JavaScript needs to be fetched and downloaded so the user can have the full twitch experience but if you turn off JavaScript on Twitch you just end up looking at that empty loading page forever CU that's all twitch is that's all the HTML it sends twitch is not a server rendered application twitch is a client rendered application if twitch was to move to server rendering you would get the full HTML that traditionally you would get once the JavaScript spends up and loads but now you could get that as the first content you get from the server which is really important for things like marketing Pages home Pages Quick Navigation low internet speed environments there's a lot of reasons that you want to render the right HTML when the user goes to the page instead of empty HTML that then loads the JavaScript that takes over from there and doing this was never fun that's why next exists that's why SSR is a concept you just take that react code and run it once on the server before sending the HTML so the HTML actually has something in it but that means we're running the same code in both environments so vits SSR allows you to take that code code that you bundled and run it on the server and on the client but it has no concept of code that only runs on one side or the other side because SSR just means running client code on the server one time also interesting is that the code Transformer that actually changes that JavaScript code to do the right thing was in node so you could only use this in node projects you couldn't use it in other runtimes at all now these layers have all been separated so you can do whatever you want you can put different code in different layers you can run them with different run times you can do whatever you want and even find your own method to call between them as a result of allowing the server side below to be swapped we notice that the processing for the browser code is essentially the same as in the server code so now this can be much simpler here's another real fun one they give the example of running code on a Hano server as the origin and then running Hano on cloudflare workers as an edge server as well and also potentially running Hano on a service worker in the browser and also separately running the script that Hano is using in the browser so now you can reuse the same JavaScript logic in all these different places in all of these different ways all as part of the V environment API really cool stuff back to the actual article about v 6 though there's a lot of good call outs here as they say if you're a framework author or a v plug-in maintainer and you want to leverage the new stuff go check out those guides there's a lot of good info there and a huge call out here n is largely responsible for this it's kind of funny to think that the most likely path for us to get better alternatives to next that our server component first is actually going to happen because of n's hard work I know I know the KN team has not always had the best relationship with vit and especially the Vue team because there wasn't necessarily this buyin on server rendering at the time since then this is more and more obviously the future and they're getting much more support from all around and huge huge shout out to anunt Fu and puya these two have been working so hard to make this happen both to make n's SSR story better but also to better the ecosystem as a whole it would have been very easy for these guys to keep this all to themselves and build it around their framework but instead they made it an open standard as part of vit for everyone to benefit from and it's awesome both that the vit ecosystem and maintainers were willing to take these changes and do them but also that the whole ecosystem now gets the benefit like we we just went from years away from a good RSC framework that isn't next to months if not weeks away I'm even tempted to go build one myself and I don't want to build a framework at the beginning of 20123 Vladimir started working to Upstream V node to V core we released it as a runtime API in V 5.1 a year later feedback from the ecosystem Partners special shout out to the cloud flare team pushed us to do a more ambitious rework of the V environment you can learn more about that in P Talk's talk I haven't actually watched that and I'm very tempted to he's a legend he helps maintain all this also Vladimir has been killing it too this it's an awesome crew of people and I love they're calling them out by name for the work that they're doing we do more of that in the world everyone on the V team participated in designing the new API which was co-designed with feedback for many projects in the ecosystem thanks to everyone involved we encourage you to get involved if you're building a framework Plugin or tool on top of V the new apis are experimental we will work with the ecosystem to review how the new apis will be used and stabilize them for the next major just as a quick example of the types of things that these changes are going to enable tan stack start isn't going to have adapters previously with things like remix or tanack start if you wanted to deploy it on versel you would install the versel adapter if you wanted to throw it on cloudflare you'd install the cloudflare adapter these were bundler plugins that made it so your code could run in different places in maintaining them was obnoxious cuz all of these platforms have their own weird quirks as I've learned as I've tried to deploy things in other places if anybody tells you it's just as easy to play places that aren't nlif fire versell they're full of I have had miserable luck and I've put the effort in I figured out Cloud flare for the most part but not with anything that isn't like vanilla JavaScript as soon as you're installing packages Cloud flare gets rough yeah as such I can fully sympathize with why a framework maintainer an author doesn't want to have support for every single platform Day Zero they just want to build their framework and thanks to Nitro and viny they kind of can but with the environment's API the maintenance work that Nitro and viny have to do goes down a ton and the need for them in the first place might by itself go away too which is really cool as Tanner calls out here there's a lot of pieces to building a new framework but the deployment and hosting part is obnoxious and is not what he wants his Focus to be in as he said he initially made adapters and it was flawed from the start because there's no desire from him to be responsible for all of these different places and yeah oh God the remix server adapters list I'm scared yeah so here's the official adapters for running remix different places you have architect Cloud flare Pages Cloud flare workers which by the way cloudfl pages and workers are entirely different in separate products that like worker Pages use as some worker stuff under the hood but they're different and you have to deploy differently to them and express is also different I know they're merging Jacob but they haven't merged yet yet so we we'll see that when that happens but we'll see it when it happens and we have the pile of community adapters as well yeah at least ver cell maintains the remix one thems and they're not expecting the community to do it for him but yeah hopefully this gives you the idea of how much work it is to maintain all of these things wouldn't it be cool if the things that were unique to these platforms were part of V itself or at the very least we're easy to do with beat instead of being these huge external things that have to be handled for you and as Ryan carniato told T I might have even been part of this convo when it happened Ryan's the creator of solid as well as solid start and Tanner is the creator of tanack start it's a lot of overlap in how they're thinking about their projects they talk all the time their solution was to just use viny which is Nitro plus H3 plus v and theoretically all of this can get way simpler now like all of these tools being necessary to get this working it shouldn't have been I love that it could get working in the first place and that we had all these pieces to do it and I honestly don't think if viny and Nitro existed that we would get where we are today like these pieces were necessary for us to get to a better V with better environment management and I know it was bullying from the creators of these things that made a lot of this happen and by the way if you were curious puya who's the one who helped design a lot of the API for environment stuff is also the creator of nitro which is one of those core dependencies create web servers that run anywhere the amount of work this dude is put in is unbelievable he started the the njs movement which has a ton of these different pieces that make everything in the chaotic world of server plus client render JavaScript significantly better H3 is phenomenal it's a super minimal HTTP framework kind of similar to something like uh Hano but really focused on server rendering and portability and it's phenomenal and that's is one of the many things that he's built as part of njs including o fetch which is a fetch version that works in workers node and the browser standard a console logger that works everywhere a plug-in system that works for everything yeah all essential stuff if you are interested in upgrading to V6 and something goes wrong they detail everything you need to know here I'm surprised with how small these changes are like they're a lot of work and they set Ved up really well but for the most part you should be able to just upgrade without issue let me know if that's the case for you and tell me what framework you're most excited to see adopt the environment apis until next time please don't make me build a framework




## Vite Raised $4.6 Million To Fix JavaScript - 20241005
it seems like nowadays if you're deep enough an open source you can't really avoid the VC money coming in it's been like that for a bit now and I know this is resulted in a ton of skepticism around projects like nextjs around projects like laravel and around all these other things being built largely with VC money I have some either good or bad news we'll talk about it as we get there because there's a new thing that has been VC funded and it's a thing that has often been held as the opposition to stuff like everything I just talked about that thing is yes Believe It or Not Evan U the creator of VI has raised money not for view but for the build tools he is creating around VI and the rest of the web ecosystem this is a huge change and we have a ton to talk about here but first a quick word from our sponsors y'all already know stack Blitz but they just dropped something incredible I am so hyped to show you guys bolt. new I could talk a lot about it but let's just use it start a blog with a post about vit's new fund raise use re act and V what's really cool here is it's not just another code gen tool that gives you command to run or copy paste this is actual code in an actual IDE that you can edit and play with because it's stack Blitz of course it is you can also make changes and then prompt further and it's aware of the things that you've changed and you can even deploy straight from chat look at that beat secures new funding to accelerate development it wrote a whole fake blog post it made all of the interactions it didn't make the other pages but you can prompt it to do that but let let's deploy it look at that building and deploying straight to NFI tell me that's not cool we got an actual deployment up all from just that huge thanks to stackit for sponsoring go check out bolt. new announcing void zero Dev company building the Next Generation unified tool chain for JavaScript we are the creators and core contributors of vit vest roll down and oxc and we will unite these projects under a coherent Vision to power the next generation of web applications we have raised $4.6 million in seed funding led by Excel read more in the blog post below for what it's worth Excel is the lead investor in the most recent round for versel I believe they're also the lead for laravel I'm almost positive about that now they're the lead for void zero Dev interesting stuff I might know of a few other places that they're the lead 4 two that yall might be surprised to hear about in the near future more coming soon before we go too far into that I'm going to drop one of my hot takes because just yesterday primagen raised a totally fair concern here which is that he's increasingly skeptical of Open Source that is directly tied with VC I hear it but I don't fully agree I think all open source has things worth considering when we talk about how they are funded and what makes them exist over time a hobby project could have the person just get bored to go work on other things like Vue for example now that Evan U is working on something else that is well funded and what he's working on before with view isn't I would expect his focus on view to go down and and if you're a big Fang company like Microsoft or Facebook or something the team that's working on that open source project that you like might get laid off so if you're consuming even something as big and important as react the react team has to fight internally to convince meta that they are worth funding that they are worth giving the resources that they need to exist and they got hit with layoffs and they had to fight to keep the most important people and eventually get the ones that got laid off back because of how important they all were but the harsh reality of being at these big companies is that the open source projects that we might be consuming from them those are just Financial risks to the business and as soon as they decide to crack down the cost of it being out an open source is probably greater than the value it brings them at any point that can go away and while a VC backed startup might crack down to make more money on their project they might fail outright and go away at the very least there is a tie between its success in the open- source world and importantly their fin success and in all of these other cases the financial success of the business and the long-term success of the open source project are not tied together that's weird and for the best hobby projects those people have to make money somewhere else even donations is not enough as a motivator the biggest open source projects don't have enough donations to sustain a real team fing back as I elaborated on does not have any guarantee of existing tomorrow but with VCB companies the risk of them failing might be higher but the risk of them getting deleted while being successful is a lot lower successful projects Vanishing is only possible with the top two successful projects changing their operations or becoming more expensive that can be a thing so personally I don't see VC backed as significantly worse than the other models I see them as beneficial and also negative in different ways also no shitty crypto startup is going to magically fix this and I'm tired of people pretending it will a good point for mine you probably don't have to worry too much about people who have done it for a decade under every model and they just keep doing it this is a phenomenal segue to go right in to what we're talking about today announcing void zero Next Generation tool chain for JavaScript tldr I have founded void zero Incorporated a company dedicated to building an open-source high performance and UniFi developer tool chain for the JavaScript ecosystem we have raised 4.6 million in seed funding led by Excel this feels a little familiar to me together we are announcing we've raised 4.5 million in seed funding led by a capital Ventures and OSS Capital the promise here Rome is an end-to-end development tool chain also by the way written in Rost unified development tool chain raised 4.6 million end to end development tool chain raised 4.5 million how hilarious is that I didn't even realize how weirdly similar these were until now yeah and for what it's worth you didn't already know Rome failed hard hard and has been forked into a project called biome that one of the people who worked at Rome has been working really hard to maintain sense and it's getting somewhere now the lter is in a really good State and I know people moving off of prettier and off of es lint in favor of biome now which is cool to see but that's just the linter all the other parts just kind of got given up on but uh I will say Evans a lot further along to be fair Sebastian was the creator of Babel and yarn he was deep in the weeds he knew better than most how to potentially do things right he just lost motivation and gave up Evan is at the peak of his motivation so I'm curious to see despite the really rough history these moves have had I'm curious to see where this goes and at least the money came in after it worked not before 15 years ago when I started building apps of JavaScript it was mostly a browser-based scripting language today it's evolved to the most widely used language in the world powering everything from web and mobile apps to game development and even the internet of things over the years many excellent tools have emerged to address the increasing scale and complexity of JavaScript applications however the ecosystem has always been fragmented every application relies on a myriad of third part dependencies and configuring them to work together remains one of the most daunting tasks in the development cycle one of my first big web dev tasks was moving a bunch of twitch stuff to the newest version of webpack it's like I think I did webpack 2 to 4 yeah I've been to Helen back and I think that's part of why I'm so tolerant of these things I started in such a spicy area as the author of one of the most widely used front end Frameworks I've spent significant effort researching every layer of the JavaScript tooling stack assembling hundreds of dependencies and designing complex abstractions on top of them the goal is always to give end users a cohesive outof the-box development experience those efforts eventually led to the creation of vit in 2020 and of course the classic XKCD there are too many standards solution needs to be one to solve everyone's use case yep fast forward four years V is now one of the most popular build tools for webd with over 15 million downloads a week and a fast ecosystem in addition to being the go-to choice for single page apps built with react and view Vats also powering meta Frameworks Like Remix n Astro spel kit solid start quick Redwood and more it has clearly established itself as the shared infrastructure layer for the next generation of web Frameworks and he yes it has only been four years I still remember when Evan first tweeted hey I think I got V working for react can someone who's a react Dev try this out and I was one of the first people to try it Way Way Back the trust the community has placed in vit made me reflect deeply on its future while vit has greatly improved the high level developer experience internally it still relies on various dependencies with abstractions and workarounds to smooth over inconsistencies performance wise it Remains bottlenecked by duplicated parsing and serialization costs across different tools it can't fully leverage native tooling like es build due to feature constraints and limited customizability we started designing a new bundler roll down tailored for vit's needs if you're not familiar with roll down it is a full rewrite of roll up which is Rich Harris's JavaScript bundler that is what V uses for its production bundles they're trying to rewrite it in Rust so they can use the same bundler for Dev and prod because right now with v you use es build and Dev and you use rollup and prod which sucks and they're trying to move away from that with roll down but as I ventured deeper into the layers beneath the bundler I came to the realization that the challenges V is facing are a reflection of the JS ecosystem at large fragmentation incompatibilities and inefficiency to fundamentally change this a unified tool chain is needed imagine a tool chain that is Unified using the same ests resolvers and module interrupt for all tasks eliminating inconsistencies and reducing redundant parsing costs high performance it's written in a compiled to native language designed from the ground up for Speed with maximum parallelization and low overhead JS plugin support the performance budget unlocks more ambitious features that improve not only developer experience but the end user experience as well interesting you're not familiar with it's abstract syntax tree it's a generic representation of what your code does so it's a way to go through the code abstracted and like read each line and do things to it it's how bundlers and tools like that work to turn the code you're writing into code that actually works in the browser because the code you're writing especially with stuff like jss that's not code that just works in the browser and the is how your code is parsed to then create that output it's also about the syntax specifically not just the semantics good call out again with imagining This Modern Perfect Tool chain it also has to be composable where each component of the tool chain is independently consumable offering building blocks for advanced customization and runtime agnostic not tied to any specific JS runtime delivering the same Dev experience across all environments and nowadays there's a lot between bun Dino all the winter CG stuff brow browsers workers node there's a lot of places to run your JavaScript now such a tool chain will not only enhance V but also Drive significant improvements throughout the whole JS ecosystem this is an ambitious vision and achieving it requires a full-time dedicated team something that wasn't possible under the independent sustainability model of my past projects this is why void zero was founded I'm excited to announce that we've raised $4.6 million in seed funding to pursue this Vision our seed round was led by Excel with participants from amplifi Partners Preston Warner Ventures who uh Tim Preston Warner was the original one of the original founders of GitHub and is also the guy who made Redwood which is one of the earliest full stack react Frameworks BGC I am offended that all my homies got in this list and he didn't hit me up I would have absolutely thrown a check in next time the progress so far over the past year we've built a team with deep expert oh good call out that tpw also put money into Rome he really wants this over the past year we've built a team with expertise in JS tooling including the creators and core contributors to widely adopted open source projects like V vest oxc and also former contributors to RS Pac interesting RS Pac might be might have a real Challenger now which is crazy it's so far along we've been hard at work developing the foundational elements of our envisioned tool chain in addition to ongoing improvements to V we've also delivered the following the fastest and most spec compliant JS parser the oxe parer which is three times faster thanc the fastest node compatible resolver oxc resolver 20 eight times faster than enhanced resolve the fastest typescript in jsx Transformer which is four times faster than S swc this is funny because view doesn't even used JX but they made the fastest solution to it the fastest linter Ox lint which is up to 100 times faster than es lint the most feature complete test runner for web applications the test ooh is ant Fu working for them Fu being part of the team makes me even more excited he's insanely talented and has deserved the opportunity to work on this stuff full time for a while hype the fastest bundle roll down which is built on top of O it's faster than es build in all other rust bundlers I want to see the benchmarks he didn't say a number for that one which has me sus okay it's quite a bit faster actually I would have bragged about that it takes about a third as long as the RS build equivalent and even shorter than the farm equivalent that's very interesting here this one's a huge gap 500 milliseconds versus 4 seconds okay I I'm curious what is making it Alpha and what shortcuts they're taking right now because the Gap here is insane very exciting though while it's still early days our open source projects are already being used by some of the world's leading engineering teams including those at open aai like the chat TBT web client team Google Apple Microsoft Visa Shopify Cloud flare alassian Reddit hugging face linear and many more to be fair a lot of them are using vit is highly snuck in here so like open AI just moved to remix and remix is using vit so that's how they can claim that but it is fair that V is being used by everyone right now if I was at twitch right now I would be working hard to Port the twitch site to V if it hasn't already been ported by the team there and it probably honestly decent chance it has the only catch with v is it didn't handle shitloads of things as well because it loads in Dev everything as its own JS file because it doesn't bundle them it just compiles them to browser friendly JS and when you're loading like 5,000 modules in the browser it starts to fall apart so that might make a code based decis of twitch hard but I'd be curious and yeah that all said like I would be using v as much as I could somewhere like twitch and it's not surprising all these companies are using it so what's next our primary goal for the coming months is to stabilize roll down and make it the unified bundler for vit in both Dev and prod we've already made great progress and are aiming for an alpha release of roll down powered by V later this year in 2025 we will continue to complete the other plan features of oxc like minification and formatting and gradually migrate the entire V ecosystem to be powered by roll down and oxc we will work closely with the ecosystem partners and stakeholders to ensure a smooth transition for end users what's really exciting about this part is right now as fast as vit is it is not being used as a like like vit's speed isn't felt when you're building your production site because the speed is in Dev mode when it uses es build but as soon as you're building for prod you're back to using roll up which is slow and the dream of like 15 second or less build times for decent sized applications isn't real yet for any real project and once this ships we will go from almost no big framework heavy projects being able to compile fast and prod to most of them that aren't built on top of webpack can and turbo packs going for a similar thing here but they only got Dev mode working recently and production builds are a far off goal if they're planning on having roll down powering production builds by the end of the year o that's going to be a huge change everything with open source will remain open source on top of our open source projects will offer an endtoend JS tool chain specifically designed to meet the scale and security requirements of Enterprise environments interesting so they're going to make a separate closed Source tooling solution for Enterprise companies to meet their security and scale requirements very interesting I have no idea in the slightest what that's going to look like interesting calls in the FAQ here the V and vests team based governance Remains the Same as before wealth core teams include members employed by multiple different organizations like Ford zero stack Blitz Nu laabs and Astro vo zero Inc employees and sponsors multiple core contributors to both V and vest void zero Inc holds the copyrights funds the development and controls the direction of both oxc and roll down interesting so V and vest are separate with their own like separate board but voids ownership of ox and roll down I I I hate that this feels familiar to the WordPress I've been dealing with recently anyways I don't think it's bad to be clear it's just reminiscent of something that was very bad what about view void zero as a business entity is entirely separate from view view will continue as an independent project will receive first class support for the new tooling stuff developed by void zero why ox and not s swc s swc if you're not familiar by the way is the Speedy web compiler it was created by KD Dev uh Donnie who works at forell now as a faster way to compile your typescript files into JS that runs in the browser it is now one of the core parts of Turbo and like the versel ecosystem and it's written in Rust it's really fast it's really good but it's built deeply Into Turbo pack at this point and I can see why they would want to do their own thing we need a bundle extremely fast well suited for application bundling and fully compatible with vat's plug-in ecosystem this is discussed in detail in the roll down docs building roll down on top of ox also unlocks the ability to perform more as related tasks in parallel during the bundling phase for example emitting and bundling a DTS with isolated declarations true fair point so to be clear for those who are confused turning your typescript and react like TSX code all your Imports and all of that injs that runs in the browser is one challenge bundling it into the right files based on the right routes is a separate challenge you need to do both so like before you bundle your code you need to be able to turn it into something the browser runs and then the bundler grabs all of that new code and makes it the right formats and the right bundles for the browser and if those two are built together in lock step you can share work that's done by one instead of having to repeat the work on each part and why will this be different from previous attempts to create a unified JS tool chain the biggest challenge of a unified tool chain is the 0 to1 problem it needs to gain critical mass for exponential adoption to justify continued development but it is hard to cross the chasm before it actually fulfills the vision void zero does not have this problem because V's already the fastest growing tool chain in the JS ecosystem that's a very fair point actually in contrast to Rome where no one was using it yet v as the entry point for them to do this stuff actually makes a ton of sense apparently the website is beautiful I want to see it okay yeah they're doing the thing that like I I don't know M was the first but they were the ones that I saw initially doing the more industrial site design I know versel has done it too like see these hard edges and all the blocks now everyone finally got tired of the linear site took long enough for us to all stop cloning linear and make something a little different but this new almost like industrial design like I think I've heard it called brutalist before it's pretty Next Generation tooling for typescript for Frameworks for all these other things cool projects V Fest roll down ax the mission we get it they're counting the total GitHub across everything this is straight from the blog post still beautiful oh I'm s i don't get to be on this list now Evan it's not too late I'll throw a check in apparently the V site got an overhaul too ooh yeah it did this is stunning okay it's lagging a bunch on my computer it's not just the the video but it's still stunning designed by armoon apparently used to work at KN design freelancer huge credit to aroon because that is stunning always let these designers know when they're killing it they deserve it I got nothing else until next time peace nerds




## WTF Is Ben Awad Up To Lately___ - 20221007
the T3 stack is not for blogs static content should use static Frameworks that build high quality static sites if you're building an application this is one of the hardest to beat stacks for it I've been working on a game it is a web-based game if I had to describe it and uh two words sometimes I tell people it's emo Pokemon um and that's that's you know you can go check it out if you like it's called voidpet and I never thought I'd be a game developer but now I'm a game developer working on a company that's doing a game and that's my life now people aren't clicking CS videos but if you get their attention by putting a hot girl at the beginning and then hold their attention with a jarring shift in a moment that you can make them watch something they might not have clicked on even though it entertains them howdy howdy quite a guess we got today uh I could introduce you but I'm sure you can do a much better and funnier job would you like to tell the world who you are Ben um that's a great question uh I usually tell people that I'm a software person who has a special love for the react framework and I do videos on YouTube and take talk and in my spare time well not really in my in my spare time I actually make content is actually what I actually do but I also usually am running some sort of startup or something of the sort or making some wacky project very very relatable for me as someone who went the opposite direction but has done all of the same things yeah I'd love to talk all about your history with Dev going into creating and then going into startup land I think it'll be really interesting like comparing contrasting our experiences there and we've kind of ended up in the same spot yeah what do you do for your intro when people don't know what do you say it depends on where I am and like who I'm talking with like if it's a Creator conversation I usually start with my history working at twitch my like audio background and stuff there if it's more General like who is Theo I'm a skateboarder that got too hurt to keep skateboarding so I started writing code because it seemed cool and suddenly I'm running a company and uh if it's like the company Journey like how I like the Y combinator type stuff it's oh I worked at twitch for half a decade I built a lot of stuff there realized I couldn't build for the people I cared about so I quit to go do that and here I am but yeah different people there's too many pieces to tell one story so I just pick a set of pieces depending on what narrative I want to tell fun fact I never really did much skating I mean uh skateboarding but I did rollerblading for a bit and I uh that was my Anna like ripstick those were my two things not the ripstick the rollerblades having a huge comeback right now for what it's worth but the the ripstick died a hard death yeah I kind of did that's okay it was a good kid activity and then like who wants to like swivel when you're adult not really yeah I totally fair I've seen people do kickflips and try flips on them I managed to pull a shove it on one once but yeah I I'm too into the technical like what can I do with it not just can I get around with it and I the thing I loved about the skateboard for me is I could go in my basement in the middle of the winter and make up a new trick on it and the feeling of like doing something no one had ever done before was super powerful and all you had to do was eat [ __ ] a few thousand times and when I realized yeah that's the scary thing yeah except you know I guess my inside is like wounded when I code but skateboarding like my outside is wounded when I'm like you know just flopping I did Penny board and I actually did get wounded penny boarding once which I was very sad about I got like a scar on my my elbow when I fell but that was just from regular skating because I was on you've been going too fast funny but like most of my scars are from bikes actually I'm not even a biker but yeah I've broken enough bone skateboarding I can't talk [ __ ] I've locally never broken a bone but the main sport I played was tennis and that's like the most docile sport so I get like you gotta like try to break something there yeah I feel like I just happened to I should say just happened to I didn't like team sports not because like teams are bad but the lack of like creativity offered like you're working within a specific range of things and your quality is measured by numbers very trivially and that was very very frustrating and boring to me I just wanted to do weird [ __ ] like I'm a dumb musician artist dude and like I like you were the weakest person on the team and you had the lowest metrics and so you hated it not wrong but it was more my favorite moments like at basketball practice with my friends were like playing dumb games of horse and seeing who could like get a good shot like backwards and stuff like that and when I realized skateboarding was literally just that but as a sport trick shots yeah trick shots and I realized that's tricks and when I realized software Dev is it's that again sure there are people who are gonna go and measure every single number and thing they can but I just want to build weird cool [ __ ] are you the type of person that I guess let me rephrase it do you use your YouTube analytics and if so how do you use them yes uh I've talked about this a bit before but this whole channel is more an experiment for me than anything it's market research I wanted to better understand the Creator space that I've been working in and like cared this much about for so long and the opportunity I had with the channel was to better understand it see what problems creators had every day and how they like resolved them and what I learned quickly is that the problems we solved at ping are not the problems that are top of mind for creators every day and there's a whole huge set of additional things that we want to go build now and a lot of like what I do for the channel and how I use the analytics is to better understand what it takes to be successful on YouTube and to better understand the problems that creators feel every day and the next grind I think I've touched on this a bit before too starting October 1st so tomorrow we're gonna go for daily uploads on the channel and I think we can do it but I want to see how painful it is do you know of any software Dev channels that have pulled off daily uploads because I think this will be the first one um I did it for about a year but it was under like a very different format because at the time it was very much like I'd sit down and like do a coding tutorial and it like would be a chunk of a coding tutorial and so it might be like three months before the like slack clone was finished but you'd get like one part of the slack on like every day for three months so it was a thing I did for a bit all year which is like a little longer than a bit I mean the tldr is you have to find something that is something sustainable that you can do daily and sometimes the thing that you do sustainable and that you can do daily was is not actually either what like fits your goals or like does what you want for me it did fit my goals for a very long time because I got very comfortable making tutorials but then there was a point in time where like yeah I don't need to do daily tutorial uploads anymore and it is exhausting and also just didn't serve what I wanted to do anymore but yeah to your question I've never seen anyone really do it because I think it like is extra hard if you do like Tech because you can't just because you're like trying to like put like good information in there um especially if you're like doing other crap with your life because like there's like grams nothing's like the closest thing I can think of that's like a similar schedule for finance and I like it's kind of like that that makes a ton of sense yeah I've definitely felt the like what am I gonna fill the space with and do I have to change the content like type I'm doing to hit the daily like goal the way we've been doing it so far and I've gotten content booked for the next three weeks so I hope this is sustainable we'll learn quickly if it's not I do one stream sometimes two a week that's four to six hours I plan a bunch of topics ahead of time and I go out of my way to gun through at least seven a stream so we can chop those and make those all videos I also have the interviews that I do ideally at least once a week that can be the whole interview that's uploaded and then we can take chunks out of that too for interesting moments yeah it should be four channels is what I should be doing but I want to see what happens if I flood one channel with five types of content that are like in the same Circle and then I'm gonna break it up and see what happens from that too because I I want to understand the algorithms and how YouTube's doing all these things and I feel like I'm at a loss right now and every time I do something stupid like this I learned so much yeah I'm interested to see like those for you because theoretically I believe it should be okay because right now YouTube suggestions are like the primary thing that drives traffic and they should be finding who likes your video and like figuring that out even if it's on the same channel theoretically that's how it should work I don't know in actuality if that how that'll pan out I imagine it's gonna be fine how are you doing much uh shorts content or do you clip and it's uh horizontal stuff we are experimenting with shorts my shorts editors quickly become the main Channel editor so he's been doing as many shorts recently but the only place I've Gotten Good like viewership on short form vertical content it's been Twitter I tried Tick Tock and YouTube I think that the viewers we're aiming for are a bit too senior and that makes sense I don't think anyone I think as the higher you go up and like age the less people are usually in general watching the vertical content I imagine but that's just merely a guess yeah I I am very curious about your Tick Tock come up it's something that I've been fascinated by for a while because I don't feel like you you dumped down your content like you changed it and made it work there but yeah how did Tick Tock happen for you yeah you could kind of say it's dumbed down but also at the same time yeah it is kind of just like very different I mean to me it was a transition that happened kind of slowly um that at first I was making the same content I was making on YouTube on Tick Tock and I found like you did there's less senior people on Tick Tock at least when I was posting um and so they do not know what coding is on Tick Tock a lot of the people they did not know what HTML was and they did not laugh when I said HTML is not a programming language or it is a programming language like these are just like the concepts or like what even is HTML like what's a website like you got to go like one level uh different I quickly learned and the combination of that and they don't even want you to sit there and explain HTML to them like they don't they if you ask somebody if they want any coding content whatever they're gonna tell you no but if you package the coding content that looks kind of similar to the content they're already consuming and all of a sudden there's like a tidbit of comp sign there then they're like okay that's kind of like quirky and cool we there's like comps icons like I've always wanted to learn to code look there's like this one bit of coding in there um so I think that's like the thing the Insight that I found that worked very well um was and like over time just making lots of different coding content I just tried to make coding fun if you will or like not even fun I tried to make coding content that somebody would watch that didn't care about coding that was like my goal and I tried lots of things and one thing I noticed is people liked watching girls on Tick Tock so like what if I Stitch and stitching is like you take a part of somebody else's video so I was like What if I take a part of this girl's video and I put the beginning of mine and then I talk about coding at the end so all of a sudden you're getting that like thing you're used to and then there's like some coding bit like intertime with that and that was like the first thing that worked very well um and then I just like yeah I mean the short answer is I learned The Tick Tock meta and I like tried to warp it to to see us slowly surely and then over time it's it got less and less CS as you might imagine the mainstream is like less and less into Cs and that's like that's kind of what happened that's like the the Journey of how we got here you know that makes a ton of sense I saw a Hank Green video he quickly filmed when he was at the YouTube Summit a few days ago that's been melting my brain since because I think a lot about like the the relationship between these platforms but he said the big difference between YouTube like traditional videos like horizontal like thumbnails you click versus shorts and Tick Tock is that with a traditional YouTube video The viewer picks what to watch with Tick Tock and shorts the viewer picks when to stop watching so you make content that might not necessarily be clickable but holds their attention for as long as possible versus on YouTube you have to make the most clickable content and then hold their attention right there's no thumbnail anymore yeah and the difference there and it like you can do entirely different types of content you might not have been able to otherwise because as long as you can keep them interested for that first five seconds and then hold their attention a decently strong from there you win right so I think that really complements your point of like people aren't clicking CS videos but if you get their attention by putting a hot girl at the beginning and then hold their attention with a jarring shift in a moment that you can make them watch something they might not have clicked on even though it entertains them I'd agree with that I think also you can make it work with YouTube in a different way because like Michael Reeves does a really good job of this where his videos are very compsi like he'll even show code on the screen but he doesn't show that much but at the day he's just like making a robot that pees like here and then like well not literally but you know like he's doing something dumb like that and and that's like the title and that's like how you hook them and the other thing is too on YouTube they just is more I would say like developers that are watching right now yeah absolutely and I've noticed like first I have to shout out primagen because he spent five dollars for me to tell you that your editor's weak but uh I I have an editor or is he talking about your editor no he said tell Ben that your editor or that his editor is weak so I it might be your coach yeah I'm My Own editor that's why I agree oh I actually love that it's like I was gonna say I've always unfortunately never been like a film person or video person so my film director's week my editor's root week my everything is weak except for now then I have some decent content ideas um and that's about it I literally spend zero time I like clip talking points and that's about it sometimes I'll overlay some text but yeah I know it's absolute garbage I mean at some point I'll hire uh an editor but I would have to be taking my content seriously and I just like haven't been doing that for a hot minute so that's why there's like I'm the current lead editor but yeah I know I need I need an editor basically is an answer I I mostly agree I something I lecture a lot of like creators and people in the space about I feel like most people get an editor way way way too early in the career of their Channel like they are all in on the idea of being a YouTuber but like something you described earlier is like you learn the meta of tech talk by being on Tech talk a bunch by making Tech talks trying different things and seeing how they worked I think that your success on Tick Tock is from that level of involvement and when you pay an editor you're detaching yourself meaningfully and I think that that Detachment keeps you from hitting like your potential cap I am fascinated by how successful you were and also that you've been your editor this whole time I think those are are very strongly aligned things yeah I think that's also what I love about 15 second content is like editing those is even easier slash you don't even need to edit a lot of the time so like that's beautiful I mean obviously the new meta is like putting captions on your short form videos which is why I'm sad and I I'm actually that that's the one thing that's like that's so easy to hire another for like that one's probably gonna happen first understandable yeah I thought I was going to have to go all in on that but then cap cut made it two button clicks and now or cap cut or descript both are really good for that so it's not too bad to add captions but it's I'd say that's when I decided oh yeah I'll pull people on I definitely need the help and now that we're going for the daily uploads even more so but I got out of my way to watch all of the edits that the team's making give a lot of feedback and be like as involved as I can and I think that we've like set a bar for the way the content should go and work and I I accept that like I will not make videos that are better than the videos I've made in the past but we can set a new like bar and as long as we always hit that bar I think we can get some crazy amounts of content out apparently primagen meant your code editor though please tell me you're not still on Adam oh oh oh oh oh oh you think I'm on Adam you know I'm not an atom just me I mean are you still on them like that's the question I have to ask you too I'm all the way back on vs code I've hopped around enough and I Microsoft's IDE team knows what they're doing and the results in editor that I'm relatively Pleasant or pleasantly happy with I haven't configured my editor in like two years how many times have you configured yours that's my only question for you he makes most of his content about configuring his editor exactly so it's like it's like car people like who who is a happier car owner the guy who bought a Mustang from the 60s that he keeps replacing every part of or the person who just bought like a new Tesla or Prius and has never opened their car before like two different things there's no one is wrong but like what's the goal of the car can I say it I'm just a Mercedes in Tesla that's just who I am as a person I love it love it so much the original reason I brought it Prime imagine though is I think there's been a Renaissance in more senior YouTube content like it took a while for like senior like developers who care way too much about their egos to even move from like books are the source of Truth to blog posts are the source of Truth and I think we're finally moving to like places like Twitter are a good way to learn about deep technical things as silly as it is like lots of good things happen on Twitter about the tech that we work with every day and I think we're starting to see people recognize YouTube as a meaningful place for that as well and I want to really like I know primagen's annoyed for me shouting about as often as I do for this I think him and Jack Harrington in particular are two of the people who have really pushed that and have like made YouTube something that people take a little more seriously is not just a way for new devs to learn but for career and salary devs to continue growing right I mean I've said this for a while I actually just think the after like the very basics of programming is pretty like Everyone likes to make those videos but after that it's like there's like no competition there's like barely any Tech YouTubers and like Tech YouTubers like literally drop out and stop making videos so often like I'm like out of the loop barely posting anymore like everyone like will eventually drop out it's there's not enough people coming in and more Tech YouTubers drop out or not posting enough and that's just how it is so like if here here's why it's a problem if I got like a fat salary at Google like my incentive to go on weekends and post YouTube videos is very low so I like I get that's like the scenario for a lot of tech workers they just got fat salaries like why are they making YouTube videos yeah so I think that's like contributes to the problem but there's tons of Watchers like the eyeballs are there for like Tech content on YouTube so yeah I totally agree I think that what I've noticed the shift is there are more eyeballs and those eyeballs are more and more senior both like the kids who grew up watching YouTube videos now have jobs themselves and are making lots of money and are used to going to YouTube and Twitch in these platforms to learn more because that's how they got there in the first place so they're they've graduated the tutorial channels they grew up on and they're looking for the next thing and I think that like I know a bunch of people who are like framework authors like apparently Ryan carnado the creator of solid.js is also live which sucks because I'm a good friend of his and I hate like conflicting with his stream time I know he's Wednesday every week and I overbooked it because I'm stupid but like the fact that I can plan around my stream with the author of one of my favorite Frameworks and he's the type of person who's also streaming now is a huge shift in the dynamic of these platforms like there just was not this level of like very technical people like doing content that's great too I mean also like it's a it's like it's like a great way to get GitHub Stars so like it's like they doing the right thing like I support that 100 like that's it's like one of the best ways to get the word out about about your like open source stuff and also like people there's like I'd say just a split of people that love actual watching a video versus like reading a video and so you do just like miss out on like also like me being only a YouTube person I've missed out on a lot of people that just like reading tuts too so you do like hit different markets doing each one too yeah absolutely I'm just pumped that this Market is growing because for a long time I think YouTube was seen as the thing for noobs like like beginners go there to learn but now it's a place where real technical discussions can happen like a silly example but last year I don't think any streamers or YouTubers were accepted to speak at nexov this year like half the speakers are dreamers and YouTubers and that's such a huge shift in how like the the creators of the tools that we work with every day are thinking of YouTube as well yeah that's a good point I I mean I think it's a good and like I think also the next the next shift is going to be them making shorts and reels and whatnot too I don't think it's gonna happen for a bit because it's not there but I mean that's like the next thing yeah absolutely and I am curious what there's a few people I've seen uh shout out to Ben Holmes on the Astro team he's one of the first people I've seen doing vertical video mostly on Twitter that's focused on much more senior topics like he'll take one of my one hour plus long Rants and turn that into like a one minute Whiteboard video that he highly edits and shares I think that's going to be one of those next metas where people are going to stuff like that for sure right I mean I love those like I I also through highly technical content on my phone for a minute I know all of the like the audience is not there yet but there's like a few people and I'm one of them at the very least yeah and if you can saturate those I'm glad it worked on Twitter yeah absolutely I I still find Twitter is like my favorite platform even if it doesn't bring me too much I just I love the the nature of it being like both async and very conversational like just the the funny moments and back and forth and like Twitter spaces and all the content that I get and generate from like my community I often joke like half of my content nowadays are things that I just stole straight from my Discord and it's great like my community is making so much of my content for me right yeah no I I think Twitter's like one of the top like if I had to name it like I feel like online the like Twitter Dev Community is probably like the place to get the most information out of on like up to date what's going on like maybe Reddit Maybe YouTube but like Twitter's like the one where like you're gonna find everybody like they're the authors of all your open source libraries are at least on Twitter if they're not on YouTube yet yeah and like their posts and stuff about it yep and I've made some of my like closest friends through that too like huge shout out to Tanner Lindsley the creator of react query for catching me like a 300 follower not even account asking about how I could make a code generator that makes type safe react query calls to an API and right from there we he introduced me to Alex the creator of trpc and here we are now as like a Creator or whatever but that all started just for me talking to people building interesting things that I used every day I don't Twitter I had to poke Tanner so much to start using typescript I'm glad he finally has embraced it I did not know you were one of the people who did that not only has he embraced it he's one of the like people who push his heart that's like this sucked as a framework maintainer in a library Builder but it was so worth it everyone else needs to do it too oh yeah and like I mean yeah that's one of those things like there's there's the learning curve but then once your past has just like how can you not have it anymore so yeah absolutely it's also like something I've been pushing more and more is that there's a distinction between how typescript works and feels as a person building for non-technical users like when I'm building uh like when the output isn't code that is consumed by another developer rather it's like a page or a Json blob or things like that that typescript's a much more pleasant experience than when you're building a library to be consumed that that particular process in that level of working within typescript is much more complex than the world a lot of us live in just building applications for users which is why we see maintainers like Ryan carniado and like uh Tanner Lindsley hesitating to get into typescript because it's a lot more work and a lot less benefit at that point in like the stack agreed I mean it's just tougher sucks to be a library to help we're glad I'm not one for real though um one of the coolest things that happened in this community is people were asking me to make a template of the T3 stack and the tech I use and I just I I refused because if I make that template people are going to add like a database and an auth plug-in to their blogs and I don't want people using the stack for blog so I haven't been clear about this the T3 stack is not for blogs static content should do static Frameworks that build high quality static sites if you're building an application this is one of the hardest to beat stacks for it but I refuse to build a template for that reason I said eventually maybe I or someone if anyone wants to could build a scaffolding CLI where you pick the parts you need and it adds those in and a Community member Nexel went and built it and now it's sitting with over 7500 stars on GitHub it's been used to start countless projects it's the better create next app with much more type safety baked in the goal of this was to build You full stack type safety from database to user and now you can do it in one CLI command beautiful yeah on that topic have you played with trpc yet I know I mentioned it to you before I I have not played it yet I've just like seen it pop more and more up on my Twitter feed uh but no I have not tried it yet I haven't really done a new project in like the past few months to like give it a go I'm still using good old graphql right now but it is on my list of things to try for sure yeah I have been doing more graphql stuff even though nobody's asking like the graphql topic has died so hard I actually just had a long talk with the founder of edge DB yesterday where I was convincing him to drop graphql from their product but I uh yeah I I think graphql has been so misunderstood about like where it goes and how to use it and to be clear you're one of the people that uses it correct you build the graphql schema and you fulfill it on one side and you could zoom it on the other so I'll just ask how do you feel about things like hasura that generate graphql schema on top of your database rather than giving you a backend to work with yeah I mean I personally have always been a fan of more custom resolvers which is why I have not really used that because I've always yeah I mean for the most part the reason I don't like is because most time you like the graph the API they spit you out you like need to make changes to it so like most time I don't get that much value out of using something like that so I have not I have not released it much not like I'm Not The Pusher of it you know yeah I'm a pusher of other things I I'm an active detractor of it I really like the way the trpc Creator put it where Auto generated graphql makes the easy things slightly easier and the hard things nearly impossible the beauty of graphql is like what you're using it for where you're defining an API exactly as the clients need it and use it in a file that describes what that API is the resolvers in the schema having a schema that you build to fulfill specific needs is the best part of graphql the graphql is a way to build an API as a schema and if you're not building a schema you're not using graphql I agree and then yeah like I I would say the reason I even use graphql beginning is because I was attracted to that idea of type safe like API calls that's like the teal that's like my favorite thing about graphql yeah and it just has the like the it had the most tooling now it's like there's a new library where I don't have to like because like in my opinion the downside graphql is it also comes with a little bit of like uh complexity from the developer standpoint of just securing the API for example is a little bit more um complex so or even consuming there's like so many options and it's really unclear nowadays like about to generate the types how to write the queries how to generate the like type for that specific query how to actually get all of that in your components are you gonna use uh relay and if you do are you going to honor relays expectations for ID consistency that Apollo doesn't honor at all like these types of things are a lot to chew on if you're not deep enough in graphql to make those decisions yeah I was supposed to try relay a long time ago but I was too lazy to try it I have been using just Urkel client for a while now Oracle clients like a lighter version of Apollo yeah yeah Apollo's a lot to this day about a third of the CPU Cycles on Twitch for like the JavaScript runtime are Apollo cast [ __ ] it's just like dealing with the Apollo cache the normalized cash yeah it's so much yeah I I did my first ever piece of Dev content as a guest on the Apollo show or like podcast mostly to and I specifically requested normally it's like the guy who hosts the podcast the content person and whoever they want to talk to but I convinced them to bring on one of the devs Ben Newman if I recall who was just recently hired and was building all the new cash layer stuff to get him to add cash invalidation and deletions because they had not added it yet for Apollo 3. so long I am really proud of the bar I set for myself with that being one of the first things I did like to start my platform it wasn't to make content to become famous and make money it was to get this dependency we were dying on fixed in using content as the the medium to do such yeah well I'm glad you were one of the people that brought in validation the Forefront of the Apollo maintainers I got Apollo to start adding invalidation and deletions you got Tanner to use typescript we've made our contributions I think we can retire now safe let's go on that topic I'd love to talk about the startup world and how that's all been going for you I know a ton of people are curious what you've been up to want to give a tldr of what you've been doing for the last year yeah so tldr I've been working on a game it is a web-based game if I had to describe it and uh two words sometimes I tell people it's emo Pokemon you know you can go check it out if you like it's called voidpet I never thought I'd be a game developer but now I'm a game developer working on a company that's doing a game and that's my life now and that's also how I spend most of my time when I'm not making content congrats again on that as someone who started in games and found their way pretty much as far away as possible I love that you went the other way and ended up there how what's life been like as a startup founder especially compared to working other gigs and in particular YouTube so the funny thing is it's like the same old same old because I feel like I've been working on some kind of startup or project for like my entirety of like outside like post College I feel like post College I was always working on some kind of company it's always like the same thing you're just like grinding away at one Sprint for some particular thing you're trying to do and I love it I mean I've always just been like the type of person that I actually like startups more than I think I liked content creation but my content creation always did better than my startups so it just has been one of those things where that's how it's been and I'll still continue to do startups even if they're not as successful so I mean I mean I like the like grind code build something and see if people will use it but it is not for everyone that's for sure and if I was a smarter person I probably would just be a full-time content creator interesting have you had a more traditional software Dev gig at a Fang or something like that or have you always managed to sneak by with the content startups so I worked at Bank of America during college as an intern and that's the closest I've ever had to a real job because post College I like basically decided I was like At first I was like I'll like go to Google and after I go to Google I'll then start a startup and I was like why would I do two steps when I could just like skip the intermediate and directly start doing a company or startup so after I graduated I was like yeah I'll just skip that and just immediately start doing projects I just like that's just the thing I've always been interested in so besides Bank of America I've not like had like a full-time like software engineering job I've done some freelancing stuff but not full-time very interesting I feel like your experience and your stack both reflect much more traditional job time than usual and I think that you managed to pull that off because of how many things you've worked on and played with like especially the like full stack graphql with type safety that's normally something that I see happen at like a big company after outage number four or five not something I would expect though like an indie hacker to discover and go all in on so yeah I think that's super cool yeah I think uh it was two things one as far as you just learned very quickly that type safety is speed and if you don't like if you like if you don't realize that yet you haven't used it enough so like that's just like one thing and secondly I think I was doing so many uh tutorials like I said I was doing like a daily tutorial content that my YouTube comments were teaching me as much as I was teaching my YouTube comments and a lot of them work at big companies and work at you know regular software engineering jobs that I would like pick up the like tips like a lot of people get insulted or feel bad when like you make some kind of educational content and people nitpick in the comments and tell you oh you could have done it this way or that way or that way because it is kind of rough to hear that you're wrong it's like maybe I didn't mean to do it that way for XYZ reason but personally I've always like been very thankful of those comments because they just like taught me so much when I like did not know a lot so I would say like literally if I didn't do the YouTube channel I don't think I would be as good as a developer but it's like the combination of building large-scale projects combined with teaching large-scale projects is like how I learned all my knowledge for sure that makes a ton of sense I'm gonna run a quick ad break so people who aren't subscribed you're not going to hear the next two minutes I am sincerely sorry however subscriptions are 25 off right now and I will shout all of you out after the interview so this take this opportunity to subscribe very juicy content piece yeah and those buttons super quick just need to kill the pre-rolls the ads don't make me like any money but if I don't run them then people when they click the video don't see it immediately they have to watch a minute of ads and bounce rates are significantly higher so sadly I do have to Analytics yeah I know exactly why yeah it's uh annoying but I learned so much from it it's like pay attention to these numbers anyways I love your philosophy on the YouTube comment stuff I and I think this is something I picked up from skateboarding it's like you get better at skateboarding when you hit the ground over and over again and just get used to hitting the ground and getting back up and learn to kind of love it because when you hit the ground you can find a reason why and improve from there and having that type of feedback and getting to be wrong all the time is honestly something I kind of miss now as a Founder it's like the the hard lessons happen less often and much more painfully now and I miss the days where I was like making 15 dumb code mistakes a day and that the cotton code review they'd get caught by linters they get caught by like my co-worker I'm working with saying hey why are you doing that that way that's dumb and I could learn so much from that I feel like I don't have as much of that in the space I am in now yeah I agree with that I actually that's something that annoys me a lot because I got really spoiled with very fast iteration Cycles on YouTube I can post a YouTube video and I immediately know except for like coding tutorials are a little bit different because they're search based but like if I post a tick tock or YouTube I know within a week whether it was a good video or not like you very quickly know and you can like kind of iterate on it very quickly whereas especially with games it's very hard to have there's like so many parts to them that it's hard to have a thing that you can test that as actually like enough of a MVP to like even like be a good experience if it's not missing X Y and Z things um and then you're like all right let's say it took me a month or three months and that's like quick and gaming right it's still like through one to three months of like that's a much bigger iteration cycle than like uh yeah I'm posting a video each week and like I'll know each and like that so yeah I I feel you on the like slower iteration and feedbacks of startups compared to content spoils you absolutely agree I I always seek those short feedback loops it's so valuable and like the amount you can get out of that like one of the teams I was on at twitch was building for the internal safety team so like the people who review all of the reports and do the moderation for the platform at twitch and that job sucks you have no idea how much [ __ ] up [ __ ] those people see and go through every day it's absurd and I was in a slack Channel with all of them and when I made changes I would get immediate feedback as to what was and wasn't working and I realized if I I put the extra time in these people are spending 12 hours a day in the product that I'm building they are so appreciative of every little detail and I just I fell in love with that feedback loop where I had like my designer my product manager myself and the team using the product all in one slack we could go back and forth have meetings together and make changes happen in hours instead of weeks and I've constantly thought that out since you know it's a beautiful thing also I did moderate my own dating app for a small bit so I do have a few ideas what goes through these things yeah okay yeah yeah it's snowball you know yeah it's a scary world that people will post and say the things they post and say I've seen some [ __ ] yeah indeed that all said I think you're doing a lot of that at voidpet and I'm curious what you do to maintain it like how do you stay closer with your users and what are the some of the things you're doing that don't scale not necessarily on a technical way but like as a company like what are the hacks you're doing to make that feedback loop typer or tighter I mean one of the beautiful things about voidpet is there's a Discord of people that are always talking so whenever I ever want to I can go through the Discord channels or read the history of the Discord channels and like it instant feedback if something got pushed we like know right away and they will talk about it so I'd say that's the main one it's also like obviously not scalable because I'm going in and reading those things but I would say like that's where I get most of my insights because it's the same thing as going and reading YouTube comments or going reading Tick Tock comments so that's what I'm used to iterating on so I'd say that's the thing that definitely gives me the most uh inspiration ideas and like things like work off is just literally reading the like comments about the company that are just constantly influing which I'm lucky that we have a scenario where that's the case because I know a lot of companies it's either people don't know what Discord is there's not viable to set that up or the like the people that are using the product don't care enough about the like community of the the product or like the community is not a thing so we're lucky enough to be in a situation where like yeah people want to trade things in the game or like and talk about it with other players and that like naturally happened so that's a big one because I'm actually not a very big analytics person I'm like small I like a few analytics um but I do not primarily use analytics for a lot of decisions I use sometimes but I I don't think analytics are as valuable for smaller companies as they as people push the I'm trying to find the right way to put this like investors love analytics because they don't have the contacts that you have on your company and that you have on your users and analytics let them know something without having more content text but that's not your job your job is to absorb all of the context you can as a founder and be as involved with the users as possible and the metrics are going to often going to distract you from that from the things you're learning from your users as you work with them more directly that said a lot of things yeah that's that's what I was going to say I feel like it also depends on the type of person you are and who you are I there's just like some people are just really more oriented of like putting the tracking everywhere and like setting up like more like hypothetical tests and like that very data oriented uh way of doing things I just know that's not the case for me yeah absolutely I love hard numbers when they're there but I'm not the one that is sprinkling them everywhere yeah anyway I think that that becomes much more useful when there are layers between the person who needs to see the information and the people who are the information's about like you're right there with the users talking with them you don't need a layer of numbers and a data person to do that translation it's almost like that data person is the graphql the users are at the back end and you're the front end yeah beautiful yeah and what I'm suggesting is when you're small enough you don't need graphql which lines up with my usual stack yes exactly and the T3 stack is being as close as possible I am curious like something that I I kind of made like the meme title for this video or for this stream something I think a lot about is the mindset differences between engineering youtubing and founding I find that they're all very different but I find engineering is the most different in that the YouTube grind and the founder grind have a lot more alignment yeah I'd say also depending on where you start I feel like you draw a lot of analogies usually it's like for example I draw a lot of analogies we're like oh yeah this is just like how it is on YouTube in this degree like I'll like draw like these comparisons between okay I would post a YouTube video every week what's the equivalent of how I can do that or like like I literally said how I like read my Discord like I would read my YouTube or Tick Tock like I make lots of analogies like that um so I do very much like say I use a similar brain or I like force myself to use a similar brain as with my content and um you know a startup but also I'd say like content's just like basically a startup too it's like a different type of product like like BuzzFeed is literally a startup like you could say it's a startup too so like there's like the lines blur especially depending on what you're doing yeah I'd agree that engineering's the most different for sure and like yeah you got you're just you're just like there's things that you can do like if you're persistent all coding that's very helpful and it's also very helpful if we're doing startups and content but yeah that's like there's like a lot of different things you have to be good at with engineering that I mean that's why I feel like a lot of very strong Engineers are not inclined to make content um and not inclined to even start companies because they are better at the like engineering spot and not even just better at you like prefer the skill set funny enough I actually think I very enjoy the like engineering skill set of just like sitting down and coding a lot um I think there's a world where I could have like dropped coding all together and just again full-time content creator but I realize it's not even what I liked so I just didn't like I was terrible at making content at first until I spammed content for like a middle if you go to my YouTube channel has like a thousand videos on it and so making that many videos is what got good but I was not naturally I'd say I was more naturally inclined to enjoy uh coding than I was content I totally agree and find myself in a weird place where like I do miss sitting and hacking on things and most nights I'll still open my laptop in bed and like code for an hour or two and like most of the first version of ping I built on my couch just after like a long day of work and meetings and stuff and as much as I am like loving my life as a Creator and a founder and doing all the other things I'm doing I do miss coding every day and on top of that I've had to like go on my way to take a step back and not take ownership of things that I'm realistically not going to do like when I hear a task and like oh I could go code that out in an hour but when am I going to find that hour and whose toes am I going to be stepping on in the process like I have a CTO now I have two other Engineers we have a team of people who work really hard to build the product and I might have a longer history in engineering than them but I'm not the one coding in it day to day and taking that step back and accepting it has been weird but at the same time I realized like spending my time on YouTube rather than in the code base brings the company more value as the founder because I'm the one bringing the mindset and the information necessary for us to succeed and the things I think about every day as a Creator are more aligned with what I need to be thinking about as a a business lead and when I think more about code it helps the business grow way less that makes sense also it it don't make sense because it's also you're like kind of in the Creator economy space but also even outside the Creator economy space I'm sure you feel just like the general overlap of like content and startup things that are helpful for sure absolutely there's a a Harris Heller video that I really liked about YouTube and like I think it's called like do you have what it takes to be a YouTuber or something silly like that that the the core message of the video was awesome the the concept he was really trying to push is that your success on YouTube isn't about how high your Highs are is it like at your Peak how great can your content be you're gonna be on the floor a lot you're going to be at your worst Point regularly you're going to have months where every video is 10 out of 10 instead of one out of 10 on that ranking board and how much does that [ __ ] with you and can you push through it and how much does your content take the hit when those things happen the exact same deal as running a business like the highs are going to be great but the lows are going to suck and even at a business that's doing pretty well like Ping we have had some really really low lows and how you survive those and how you thrive in those lows is much more what defines your success as a Creator and a CEO versus the engineering world I would kill it for two weeks and I just like take three weeks where I barely show up to my meetings I don't do jack [ __ ] and no one cares you cannot do that in these worlds that makes sense how many meetings would you say you do a week uh let me check my calendar quick this last week was pretty normal let's see one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen Seventeen eighteen nineteen twenty twenty one twenty two meetings this week about 18 of them were the first two days I'm not trolling there there is no trolling here guys I would share my calendar but there's like addresses and things in it I mean I I feel like that's pretty uh on point to be honest I mean I I was I was dividing it out more it sounds like you just had some like meeting do you usually stack your meetings yes or do you okay you do it on purpose trust me you want to Stack your meetings otherwise you will never get something done between two meetings almost ever no matter how focused and like talented you are the best thing you're gonna do in the half hour to hour between two meetings is add some items to your to-do list or reply to an email like it's impossible so like on Tuesday I was literally in meetings from 10 a.m till nine PM this week one of those was like a long dinner thing but the rest were like back to back to back to back to back meetings because that's how I get like all of those done and then I can still have days where like my Thursdays and Fridays tend to be empty by Design so if I have to book an emergency meeting I can in those windows but I have like on Friday I have a block from 1 p.m till 10 p.m that's titled content block slash work block with in parentheses can be booked over in immersion so people know like on my team they can book over it but people who can't see my calendar can't yeah no I I am a meeting stacker too but my calendar is just like so much more lighter I'm stacking like two meetings and like that's my that's like you know my heavy meeting week I like them very much a person right now especially because I'm not managing a team where I'm like I try to wipe as many meetings off my calendar as possible yeah that's fair I there's a couple things that definitely make my calendar More full than average in particular I go really out of my way to sync with users whenever I have the opportunity we have a book a demo button on PING that's on the home page so you can book straight to my and my founding team's calendar and I show up to most of those and we have when you do sign up and onboarding Cal that you can book to have us help you set up your OBS with ping and figure out how this works and I try to attend as many of those types of things as possible say about a third to half of my meeting load is directly with users I mean I guess that's probably like a good problem to have yeah absolutely I I'm not complaining when we first did the wait list for paying and had like you couldn't start using you could only book a demo literally every single slot that we had in the calendly for the first two weeks got taken where it was meetings back to back to back like six to eight user meetings a day oh boy it's incredible I like the amount we learned in that window like we're still applying the stuff we learned it's been like eight months yeah the backlog it is what it is but are you yeah I can't complain what do you guys use for your your task board or like backlog Are you a I I can't imagine you're a jira user we're we're classy and gain here gang here uh no atlassy in anything allowed uh code products yeah we're using linear right now it's been going pretty well I will say I don't believe in backlogs backlogs aren't real like you throw a bunch of tickets into one but those aren't gonna the only time anybody goes to the backlog is if they have nothing else to do and if if there's nothing else to do you're no longer a startup congrats but there are always other things to do the strategy I post this from Michael I think he has a YC like YouTube video about it but the strategy we're trying right now is every two weeks we have a planning meeting where everybody lists random [ __ ] that we could do for the next two weeks and if anything is pressing enough it'll get brought up during that meeting and then we prioritize this list based on how important it is to do those things ASAP and then we draw a line and it's like everything above this line has to be done in these two weeks everything below it doesn't have to be but if we finish the things above we'll do those things and then two weeks later we do that again so there's no backlog technically we have those old planning meetings with the things that didn't make the cut sometimes people will look at those to refresh their memory But ultimately I trust the team to raise the things that matter for us that makes sense and I'm sure there's some boys that get carried over each week yes once in a while to get the spotlight yeah we had one like design overhaul ticket that got punted for like three months or so and I had to keep like bugging brain about it we finally got that one done but like the device picker in ping was rough for a while largely my fault but like some some things don't take high enough priority in this strategy but those things end up sticking out more too and I really think it's important like for me at least as like a leader who's kind of the scrum Master now too it's important for us to be as familiar with what's going on as possible and why people think things are important yeah I am a believer of the if I forgot about it it probably wasn't important yes there's like still a five percent chance it was important but most of the time if it wasn't brought to my attention again it just was probably not important yep that's been so that's a good test yep yeah people on YouTube think that we're trolling about this but no we're being very real this is how we run things I think it's important for us to prioritize based on what's currently going on and also like things change every week or two as well it's nuts how quickly things can change at a startup something I haven't asked yet though just like I'm curious what's your team size looking like now do you have other Engineers on the project yet uh so right now it's just still me and my co-founder so just two-person team and we are notion for absolutely everything that's fine I think notion we've been using notion exclusively for the content stuff we only use linear for once we do our meetings in notion we plan everything in notion and then at the end of the meeting I go take the things we've decided on and throw all of those in linear we use linear for like who's doing what when notion for all conversation all planning all discussion everything else my CTO hates me for because I love notion but it's it's a great product yeah I'm actually on and like your CTO side too where I'm like so so on notion but my co-founder absolutely loves notion I've like come to appreciate notion more because it does like kind of have everything baked in at least like 95 of what you need so I'm slowly becoming a lover the my main reason I like it more than almost anything I've used is it's markdown and it works well on my phone there's nothing else that hits both of those as silly of a distinction as it is I've never used a product that is marked down focused and based where I can really export markdown and it has a really good mobile app for my phone my iPad and works on my computer well too that is true yeah everything else is a nice bonus and GitHub needs to have an app actually they did have an app you have apps really good I use it all I do almost all my codes refusing the GitHub app I'm self-owning really hard by admitting that but yeah I love the GitHub app I use it so much I need to reinstall it I installed it a while ago there is something I couldn't do on it so I uninstalled it because it kept defaulting things to the app and then I never reinstalled it that was my experience with the GitHub apps now I have to retry it primogen talking [ __ ] on the GitHub phone app I have no reason to believe you own a phone primagen you can't run Vim on your phone GitHub vs go plugin that's where it's at I use GitHub 1s I I like GitHub in the browser it's awful and buggy as it is like it should not be on Rails anymore and it's insulting how like inconsistent its state is I refreshed the GitHub like repo for Ping after not opening the page for like three or four days and it had a stale cash asking me to make a PR for a branch that I hadn't touched in a week that the pr4 merged four days ago it was just like in the stale State still because that's the state it was in in the cache and it didn't invalidate the cash properly amazing yeah I mean get you GitHub you just gotta love it and hate it at the same time it should have improvements in its UI but it doesn't but it's the platform so if you use it yeah I do think that there is an opportunity to actually interrupt GitHub right now like I could see it being disrupted if someone cares enough and is committed enough but I don't think a lab will hear your location what's gitlab never heard of it insulting they're they're targeting other things and that's fine I appreciate what they're doing especially focused on like Enterprise but that's not where my focus is I care a lot more about like like how many open source repos have you seen on gitlab recently [Laughter] uh zero yeah there you go I'm curious if there's anything we didn't touch on I know you said you didn't have as much time today and I want to be respectful of that oh yeah I I'm still like partially a sick boy but I actually am feeling surprisingly better today two days ago I felt awful and I was gonna see how I was feeling today but I'm like doing pretty good so far should we do some questions from chat and see what Chad has to say I've already seen somebody request angular uh I'll let you cover angular topic I'm tired of talking about it look at that you guys tired about good work honestly Round of Applause you guys are doing God's work right now I have a lot of energy in managing to kill all of it for a topic is impressive what are your thoughts on lip sockets then I love websockets I use web sockets for Doge house for the entire thing I figured I would have to use websockets for all the interactivity so I was like might as well like yeah load stuff with websockets too I imagine Discord is probably a similar uh situation I don't actually know what their internals look like it didn't bother opening up the network tab but I imagine it's probably somewhere in that case but yeah if you're if you need real-time like websock's great like you should use them when you use them do you roll your own websocket provider and server or do you like use another service so I actually did for the Elixir one I had to you roll my own on the like server side um and on the like front-end side I use like the browser websocket so like I kind of rolled my own because I didn't use like socket i o on the front end but I used the like websocket primitive but it's really not that primitive you get like everything you kind of need I mean you have to like handle reconnects maybe what's the only thing actually I had to do that's cool yeah yeah I I've recently especially relied more on third-party websocket providers and I'm trying to figure out where my stance is gonna end up because I do hate having to think about scaling for my websockets and most of my use cases for websockets are live data like right now whose mics are muted and unmuted who's in the call like whose bit rates are at what levels all of that type of data isn't data I want to persist so using something like super bass and it's data sync would not make sense for any of that and I don't want to use traditional just like sending dumb messages because I need to know the state of the call when somebody joins late like who has what device is active when I join the call I can't just rely on the events I need some level of State persistence for that and there's a lot of providers that recognize this use case and have built products for it I know ably has a presence uh product Pusher kind of does but it can't be updated so it's useless uh live blocks is a new startup that's entirely focused around this which is really interesting and I know pubnub has something similar too and I specifically don't want to build presence distributed on top of websockets and I don't want one of these database syncing things either so I found myself just relying on these third parties and getting angry at them all the time gaslighting me into thinking that I have an outage when they've had an outage for three months yeah yeah I mean that's what it comes down to with like third party versus building your own is like when it goes wrong what do you want to do or how often does it go wrong with a third party I know actually I did build like a similar thing I don't remember what I ended up doing for the like implementation because I remember there being two things whether I have my uh the server that you know passes the audio what is that thing called the for webrtc or websockets yeah yeah the webrtc uh yeah those guys so like I had the option of either having one of those guys tell me who's talking or I could do the thing where like it's kind of hackable and you could just like on the front end you know when they start talking and you like web socket it up and do the thing um I think I actually ended up not doing the turn server solution and I did like I started talking in my JavaScript to text you talked and like but obviously there's like a slight you know yeah I think that might have been a little like yeah webrtc is a weird one too I've personally God I I'm just gonna say their day more often because they've been cool to work with recently but Agora has incredible infrastructure because they're not just using turn servers they're hijacking all the packets at the turn server and then Distributing across their Edge Network which means you can pull down a subset of the feeds without having to be part of the whole network so like right now you're sending up a 720p feed for like the main video feed as well as a uh mucks down 360p feed so if I'm just like calling in on a computer and I don't need the high quality I can pull the low quality feed but if I'm streaming it out on OBS I have a different feed I can subscribe to there and having infrastructure smart enough to distribute those different feeds and let me programmatically subscribe to specific ones is worth how God [ __ ] awful their SDK is laughs that's lovely I uh I yeah I mean the hard part with that stuff is the back end so that makes sense yep and they did the hard part and they forgot to do the easy part and it's really frustrating so do you guys see yourself using Agora then as like just like that's like the future of like paying his like are you guys gonna eventually switch I right now yes but I can be convinced out of it by them they just hired a new person who like is the Like Chief DX officer basically like it's their job to make it not miserable to use the product we've met a whole bunch they've been awesome and like really care about the things we're describing and there's a fan who might even be watching right now who works there that has been like giving me like inside info on all the apis that like the SDK has that aren't documented anywhere that I need for like keyframe intervals and stuff like that so that level of involvement is rebuilding my confidence oh a conscious here thank you man you've you have soul restored my faith in continuing to use Agora we would have moved off months ago so feel free to clip this and send it to your boss so you can get a well-deserved raise you've been killing it but like that's the level of involvement I need to justify using third-party dependencies now like if I have a problem on uh versel I can hit up any of my friends who work there or tweet about it and it gets resolved really quick if I have a problem with Planet scale I can text Sam Lambert and it's instantaneously handled when I had problems with ably where their presence failed to sink across the globe that they would tell me for months at a time they don't have enough logs they don't believe me I rewrite the thing four times I give them access to our log Rock and I do everything they ask they're like oh you just we need more logs to see what you're doing wrong and then I have a friend who works there join a call with me he's in the UK I'm in the U.S he sees me I don't see him on their dashboard they were failing to sink Presents Across regions period and I had like I had a call with the CEO of this company from 2 am to 5 a.m where for the first hour he's trying to convince me this is my fault for not giving good enough logs there's no way this bug is real I show it to him he joins it and sees it he's like oh there's no way this has to be something on your end and then his CTO hits him up says by the way we're [ __ ] right now Theo is right our infra is burning and he kind of goes into apology mode for half an hour a week later I have a tweet thread where I'm talking about different web soccer providers and one of the sections just one of the charts in the replies is reliability of providers it's like there's four things it's like DX uh like uh reliability uh distribution and presence are like the fork things and I put ably near the left on reliability he sends me a [ __ ] four pager in my DM's complaining about it that's not like founder involvement at all and I hey that's what should be one of our easiest dependencies is miserable to work with versus Agora where I need to do something like keyframe intervals there's no documentation in the or in the docs on how to change the key intervals of a video track that Agora initialized I hit up a conch and he says here's how you do it we'll probably get this added to the doc soon those things are the make or break for me about using like third parties and I look for that in particular now it's rare that I will work with a company if I can't have a conversation with the founding team ahead of time does that make sense you basically if it's not your Dev that you're going to shout out you at least have the third party Dev to shout out that makes sense yeah I'm curious like what dependencies have you been relying on like what are you building on top of at voidpet that's a good question I don't you actually also talk by a head I don't think there's any third parties I can think of let me think about it for a second for the most part I try to like build it if I can if it's not too bad because I'm obviously not like trying to but obviously I was like crazy enough to like do my own turn server stuff with like Doge house and that obviously it was like a can of worms that like was a huge pain um like S3 is like the the main dependency I could think of that we use so like for example I'm hosting my own database um and our own servers like I mean Docker obviously does not count Docker Hub I'll push up my Docker image to Docker Hub um that and S3 I think oh you know what no that's a lie that's a lie okay so what I am using for um the front end so I'm using next year as for the front end right and there's only one page on the entire website that needs server side rendering explicitly for just link previews and for that there's this library that I'm using that uh takes next.js uses terraform to deploy it on S on AWS and it sticks just that route on a Lambda and it sticks everything else in S3 so that is the other uh AWS infrastructure so I guess I'm just an AWS boy now that I realize it yeah um it has Cloud oh I'm using amazing cloudflare I might be using cloudflare for something interesting I can't remember if I'm caching any images most of our stuff is svgs so we're not actually caching images as much so DIY versus Cell with a lot of S3 very interesting yeah and I mean Discord oauth but that's also not exactly you know you these are like half providers you know absolutely yeah this is really interesting I did not pin you for someone who would be all in on AWS and I also totally agree like S3 is so Prime for disruption I bring this up all the time I'm amazed nobody's like just you could build a better S3 on top of S3 charge twice as much and like disrupt the whole industry yeah it's it's not my favorite I mean I mean really what it is is like S3 does the job and they love spamming youth credits so it's like if you're gonna store a thing like that's why I'm storing it there I don't even know what to be honest I don't even know oh you know I'm storing database backups on S3 that's what I'm storing ah I was trying to try to think what exactly I was storing on S3 there might be some oh I was doing also images that we used for like previews so there's like two things I think that we're storing that makes sense but yeah we're storing a lot of video now we're introducing call recording soon and all that goes to S3 and oh boy yeah it's a lot to deal with it's a lot to deal with I mean that's all of AWS products in general are like annoying to use but they get the job done and they're like usually good enough I'm just so impressed with how short your list of tech is like we keep a dock of all of the third party providers that we're using for everything from like payroll to like taxes to obviously our tax stuff and just the tech category he's got like 20 providers in it oh boy yeah no I I I do try to keep it low if I don't need it but I I will say I I actually am the type of the type of person that I usually need to be convinced to use the like the third party for the most part unless it's just like an absolute nightmare to do on my own um I will I I am on the side of usually doing it myself but there's there's of course always like the occasional thing that pops up I find so many things like that like I don't know if I just run into those problems more often than average or if I'm more willing to call something one of those problems but like I'll never run an email server no matter how much you pay me you'll never convince me to do it I'm not rolling my own anything email on anything AWS okay I agree with that one I'm not doing that either yeah I don't count that as so we actually don't send any programmatic emails right now so that's like a to be determined we used to use twilio um funny enough but we like got shreked with the bill like waitlist like because mathematics and like what it actually costs were like different and like like what you guessed I mean the price would be versus like when it actually happens um is different and we didn't expect as many users to like sign up for the like tax wait list and they did and it was like sad panda bear so that got ripped out so like Trulia used to be a thing we used and that's gone now you just sign up with it that makes a lot of sense I God I that said I don't want to ever touch texting through anything other than twilio the thought is scary but texts are expensive I love how simple it is to do like part of T3 stack is next off and it's just an npm package you install that handles all the routing for you all the callbacks for you you list the providers you want and the configuration for those like the keys and the secrets for twitch Twitter Discord whatever and you can very very quickly build like authentication into your app without giving up ownership of that by like passing it to Firebase or passing it to Super Bass or off zero or one of these other services it's still built on top of your database using Prisma even if you want you can adapt next next auth directly to your Prisma database and have all of your user status synced that way it's super convenient you get all the benefits of using one of these third-party providers without giving up the ownership that you normally lose from this fun fact I am currently using Prisma for only migrations because they had a problem with too many SQL queries being generated that I ripped it out and like basically wrote my own version of it that's like pretty simple for crud operations and now all it does is keep track of my schema fascinating I I love Prisma for the schema I'm anti-migration at this point in my life but that's its own long Rabbit Hole take that I want to go too deep on oh boy like we have our history migration yeah if we have a schema and the schema changes that's our history that's how the database changed is whatever the diffs are on the schema and if you're doing custom things in the migration like you're renaming tables or you're moving things from one place to another that migration is no longer safe you are now like by definition running a change that in production will cause some clients to be out of date so if you want to rename a field or migrate a field the safe way to do it is to have a commit and have a deploy where you add the New Field then once that new field has been added as an optional you move the data over and you do another request where you deprecate the old field and make the new one mandatory and then you do that but like the the migration should be the history of my git commits and when you get to that point and you use something like Planet scale as a layer for your deployment of a schema change life gets so much easier and I'm so happy to be uh migration free I had no idea how much those things stressed me out until I lived without them yeah I could I could get behind that I I am definitely the person who just breaks it for those five clients in prod right now if I like delete the table or or I mean I'm not deleting tables and prod but if I'm dropping a call usually it would be like obviously it's very rare usually that you drop a column like I can't even I'd say like maybe I've dropped one column or or so I I will say like engine light now that I think about it I will probably just like leave the old data there if I'm renaming it but there is times where I've casted some stuff and whatnot and I'm sure it did break for a few people um so I I that does make sense and I have I've been I'm guilty of breaking things I got we haven't actually we did use it once so far but one of my favorite changes or Planet scale made recently because they're built on top of a test is you can write to two parallel DBS at the same time so whenever you make a change it maintains the old database schema in a fork of your database for 30 minutes and writes all new changes to both so you can roll back your deployment in the thing you drop but still have the any data that came in in the interim that's kind of cool yeah it's super op that is the first thing I thought about this would be so funny if one sequel command errors out and the other one doesn't but that in general feels like it's going to be like a very nice feature yeah it's saved Our Lives already multiple times no not multiple times we had one really big one where like we made a change in made a field mandatory that shouldn't have been and it like broke loading for Pages she clicked or like undo everything was fine just instantaneously well that's great I'm really big on building safety nets rather than guard rails where like guardrail cells are things like strict unit testing rules and like long deployment docs on how you deploy every Wednesday at this time and all changes need to be staged by Monday like to me those are all guard rails and I'm much more interested in building safety nets for like when a deploy goes out and it's bad how do how long does it take to recover and what does that recovery look like how can I make it as easy for people to screw up and recover because that's when they're going to learn more that's when we're going to grow more that's when like real change is going to happen and that's why I test in prod guys let's go as long as you have a close enough relationship with your users testing in prod it's hard to beat like there is no other because we're always testing in prod because if we're not we are lying to ourselves in our environment we can have a Dev environment and a staging environment where we can realistically test most things but production is a different environment things will break there you can make it less likely but you can't make it impossible so by investing in the recovery first and foremost you're not denying reality you're living it thank you I'm going to snippet this and send this to anyone who asked me why I don't write enough tests I have a lot of videos you could send them it's one of my favorite topics fantastic yeah I think testing I think types have covered so much of what unit test used to be important for oh great but I didn't write unit tested JavaScript either so I'm guilty in both cases so I'm bouncing back from over testing I I've chosen to be the like the antithesis of the everything should always be tested person even though there are places where unit tests make a lot of sense especially like if you had an outage that a test could have caught and you can write that test quickly go right the test after absolutely if you can prevent a future outage that has happened with a test do it but of the dozens of outages we've had at ping I've kept track we've had three ish that a unit test may have caught that actually seems like a pretty good stat though yeah I'm not complaining I'm really happy with where we're at like three things that like if we were like in one year three outages where if we were super strong on unit tests those might have not happened when we were able to recover from all three in seconds yeah somebody asked if I wrote unit tests and twitch uh there was a strict 80 code coverage on the website that they bumped up to 90 at a point and it was rough one of my favorite moments apprecious code still exists there was like an old feature that we wrote a better like version of and the old one was like 10 000 plus lines of chaotic Kobe replace it with like a 400 line of code like two components really nice elegant thing to this day I don't think they've deleted the old one because the old one had really strong code coverage in that giant pile of [ __ ] code and whenever they delete it the code base is now below the threshold so PR is to remove a deprecated feature cannot merge because deleting code causes the threshold to go down I would totally do that I would literally write code just to bump up the code coverage that's beautiful yep it's horrifying but that's also the reality that code coverage rules enforce if tests are solving a specific problem you have awesome go for it if you're adding tests if the problem is a number you're trying to hit [ __ ] off amen I saw a couple more questions there's one that was interesting to me I'm curious and obviously we don't want to answer you don't have to somebody asked like what your current sources of income are and how that breaks down um basically just YouTube and um what's called voidpet subscriptions slash micro transactions yeah that doesn't mean too I'm pretty much I used to do some freelancing but I pretty much stopped that when I was kind of full-timing startups and then yeah that's pretty I mean I used to have a patreon but I don't think that I existed anymore you don't think it exists anymore it might just be a bunch of money sitting there but you know I haven't talked oh there's actually a really funny thing Brave was the thing I opened like maybe a couple months ago and realized there's a bunch of money in that because uh crypto um enjoyers will watch your videos and brave and we'll donate like a bits of Brave apparently using the browser so I didn't realize I had like a cache of Brave that I'm not bad and I'm hoping goes back up because it's worth nothing right now but you know technically it's a big a large number of Brave bits I forget what it's called bats or something I found a bunch of Dogecoin in an old folder from college a few months ago years ago now it was at the like I think it was beginning of 2020 or so I just found this old pile of Dogecoin it's like oh [ __ ] I have a bunch of does here it's like I think I had a hundred thousand coins or so and it was at like ascent and I was so blown away like oh my God there's like a thousand dollars here sold it immediately and then like a month later it was at 50 cents I was like what the God [ __ ] damn it hate to see it hate to see it somebody wants me to ask you about pre-commit hooks because we've been talking about those more recently gross okay that's all I needed to hear next question we're aligned uh somebody asked about Investors at voidpet what's the investor in fundraising grind been like so far um it is currently on a top secret label and there will possibly be updates in the near future on it oh boy uh DM me after this I would love to hear more okay yeah congratulations by the way I know that some of the chats that I've heard people have interviewed went pretty well so good to hear that progress has been consistent uh what are your plans when funds hit are you gonna start growing the team are you gonna do marketing like what are you excited for um I don't know what part I'm excited for but we would definitely like hire a team for sure I think the hiring part I don't know whether my life will get better or worse um when that person exists so we'll see I I'm a person that has zero expectations until it happens and I don't think too I'm you know I'm an in the moment person like we'll get there when it's there until then I'm in the now I really appreciate that and I feel like a lot of Founders are optimizing for like the uh mindset of like focusing on what's right now I see a lot of Founders that are so focused on where they think things are going to be next year on the trajectory of right now where they're like constantly like they're introducing kubernetes to their two-person company and like building these crazy complex infrastructures I've talked to startups that have more servers than they have users and it's just like what are you doing and I almost feel like that's the default like the more Founders I talk to the more I find to our really focused on where they think they are going rather than where they are right now and I feel like at the very least like every time we have like a big moment moving to the next step is a lot easier if we haven't over prepared for it because if our plans do not line up with what happens and we put all this effort into a plan that isn't happening things get a lot harder and like hiring up building Tech with things like kubernetes all this stuff is building like really strong walls and anchors in directions you might not be interested in yeah I've always been lucky because all I appreciate good code and I can sometimes say that good code that bad code I've always been like the hacker type that is just running all kinds of spaghetti code that like it works now and I'm very much on the side of I am uh maybe writing a bit more spaghetti code than I I could I could be a little bit more software engineering good standard good practices but I usually lean on the uh ship it into the spectrum that makes sense I did just notice on YouTube that we have 200 likes and 400 viewers and that ratio feels a little off so if you all could Hammer the like button really quick likes are free and they help us out a lot you ungrateful bastards appreciate it anyways there are some good questions on YouTube and once I see that like number jump up I will start asking them but until then YouTube chat's being ignored just wow you guys just got blackmailed how's that feel I am going to run ads really quick though because we have pre-rolls on again so wow look at that and you're getting ads well YouTube doesn't get ads twitch is getting punished yep and YouTube too don't worry I'll make sure they get the ads as well I think it is with ads running there was a sub question that we could ask uh Matt who is also uh Tennessee and was curious if you are or still in Tennessee and what your thoughts are on like living in the Bay versus everything else as a startup founder no I actually just left I I did not like Tennessee well I like Tennessee but I didn't like it at the same time I'm living in Austin Texas again I basically um grew up in Austin decided Austin was bad so then I traveled a bunch of different places but I didn't know what was good so I traveled a whole bunch of different places I went to SF went to LA I went to Arizona I went to New York like I went to the most of the hubs the only Hub I didn't hit was Miami I'd say at least of recently of what you could call Tech hubs oh I didn't do Seattle either but I don't like rain so that was just like off the and I only like wearing warm weather too so like I had some I had a few things at least um to narrow down my decisions but then I was like uh oh crap turns out I actually just like took for granted a lot of the things that I grew up with and didn't realize were like kind of good and I actually just like like Texas so I'm back in Texas um I I like the idea of being around a lot of Founders and doing um like I love talking to Founders and like just talking about what they're doing and like you know doing the battle blah blah blah blah but like since I was like kind of on the Creator side first I mean this is really funny because you like think I'd be like into LA or whatever I actually almost considered going to La but that's a whole other story um I didn't like I basically knew no Founders growing up so I was never in a situation where I was talking to Founders or is there like around Tech Bros or anything until maybe like before basically after my Tick Tock blew up then I had more opportunities to travel and like talk to more quote-unquote Tech Bros but before that I like literally barely knew any Founders I'd say um because I was just outside that bubble so I would say one is very helpful to be like surrounded by people that are doing the things that you want to do so I really like that I wish that I could like live in SF but I just don't like it as much yeah um like like I I like the aspect of it being like the tech stuff but I dislike the like City stuff and I the reason I sold on Austin because it was a nice medium where I like the city and the tech bubble is like a crap ton smaller but at least there like is a little bit of something where in Tennessee there was like nothing like it was just like absolutely dead now to be fair I was like a little bit outside of Nashville so like uh like even Nashville is gonna be better but I was like no let's go let's just go to Austin yeah yeah so my opinion is I think it helps be around Founders in Tech but for me I just like don't like SF the city there's a lot of cost to being here both financial and like spiritual but right the the benefits if you benefit from them are huge like when the skate culture hadn't died yet which totally wrecked the skate culture in the city but before then as a skater there was no better place to be as a tech bro there was nowhere better to be and as a Founder there was no better place to be so I dealt with all of the the chaos of being here the expense and everything else that makes SF SF now that I've like done my fundraising had my founder conversations built my circle of people I trust to talk to and such I feel less and less a reason to be here but for building that initial group like meeting with Y combinator Founders every week during the batch for going to like events that were in the city about why combinator stuff and talk to other Founders and just being deep and all of that it's it is really nice and I'll say like both in the like having people to sympathize with and like who understand the the weird problems we run into as Founders and on the other side having peers to compare yourself against and see like if the problems you're running into are normal or not like one of the things that I think we've both seen with YouTube is there's a lot of talented devs that don't know any other developers and don't have any developer friends and they're gauging themselves and learning themselves on platforms like what we have in the communities that we've built it's even rarer to know Founders and it's so important to have people you talk to and can trust and to be frank compare yourself against to know how you're doing right and I do think postcovid things are a lot more online which helps so I think like that's like a big plus and like at least for me a lot of like Gates opened up because I was doing content but if you're someone who's not doing content I think it's just a lot harder to like get into the founder Bubbles and I would even say even though even though I was doing content and like I was able to meet people through the content I'd say like probably one of my bigger weaknesses as a Founder is just like not ever being in the like SF world and like knowing those people um but that's like a whole other king of worms totally yeah it's a lot and like breaking into those circles is hard but like if you end up in y combine or doing something like that move out here for the batch like be as involved as you can during that time like I got so much being here around then and the people I met and got to network with during men but since then right yeah like I have uh an in-person meeting like with an SF founder or somebody who's not SF but is visiting every two weeks to month or so and those are great really cool and all but not anywhere near as essential as the first few months especially when I was fundraising right that was another thing where I was trying to decide where I wanted to live a big factor was there is like a few cities that everyone will find themselves in probably once a year at the very least and like SF in New York happened in like LA are like three cities that are like very much in like at some point this year one of your founder friends will be in one of those cities like it's almost guaranteed yep and like you can't hang out with them you're able to like do a thing or they're like flying literally for the event that you're gonna be doing or whatever so but now you have to find a way to make founder friends in the first place we have that through like our content our networks our platforms right right for those who don't it's so helpful to be able to meet these people and like something I've found quickly like just the difference it in like me having a Twitter account that I can talk to other devs and founders with and a lot of other people in my batch not having that like how much they rely on the like YC benefited Us in so many ways but I could have gotten a handful of those benefits through my network in other ways and right I see like a huge part of the value they bring is similar to the value that like a boot camp brings it's not that like a boot camp is the way to learn to program the same way YC isn't leeway to run a startup but it significantly increases your chances by surrounding you with other people doing the same thing with people in front of you who have succeeded at doing that thing and I find that that relationship is the biggest value of these programs right like a lot of people think the value of a boot camp is because they teach you to code it's more of like being surrounded by like-minded people are also learning to code around you and like that's like in my opinion the value ad as well yeah yeah so two more really good questions I want to jump on one's much more content one's much more Tech I want to start with the content one though it's from a tier three sub who I love who's recently getting into content himself Dev his question was about how we actually make our content in particular how much is pre-written versus how much is improv um so at the very beginning of my content creation career zero was written and at the end of my content career life I was more on the written side I would say I'm always somebody that has some amount of improv because I will get inspired when saying something but I think the right answer for a person is you should try both and see what works better that's that's very fair I found like a hybrid approach that works well for me I think that one of the best signals or obviously start with improv because that's the least work and you'll be the most productive but if you find that the content you're editing and the videos you're putting out are not as high of quality obviously adjust at that point and do more pre-writing do more planning what I found worked for me was I was doing my streams I had an editor my editor had to drop because he got a job at paying funny enough so I started editing my own videos I learned that my streams sucked to edit because my topics weren't consistent I was hopping all over the place and just wasn't a pleasant way to to turn a stream into content so I started a notion dock where I would list topic ideas ahead of time and I would try to like pick specific topics to cover in a stream and start and finish those topics to make it easier to edit this resulted in both the streams being better because you could follow along more the topics were more cohesive just higher quality like content there and also the quality of the videos I was able to edit went up significantly too but I adjusted based on the problems I was running into creating content rather than pre-planning too much ahead and generally this is the same way I'm with tech start with the simplest possible thing and work up from there based on what problems you run into I will upload that answer good [ __ ] and surprise surprise we're very aligned somebody mentioned that previously you were not very big on serverless and is curious how your stance has changed since if it has there's only there's a few situations where I do like serverless for the most part I just hate that there's a freaking I mean okay okay so there's like a varying degrees of what's considered a serverless and what's good and what's bad like I obviously the thing that's to dislike about serverless is the cold start like or the lag like that there's that's the only thing to dislike about serverless or like if you want to call it like the overhead of like trying like the DX of it but my like obviously the main pain point is the like the cold start like or the pricing like otherwise also the lack of state and the fact that now developers have to be considerate of what goes where it because serverless is just a pipe it's a thing that runs your code it doesn't store anything doesn't hold data and like at or in the creates E3 app we've had a bunch of people running into issues because we default to SQL light so you can init and have something there but if you Deploy on serverless with sqlite it's going to work once yeah I I haven't done serverless with database in so long I forgot that that's like a major headache is the connections and that's like that that's just another can of verbs so I don't like it as a main like server as like taking most like web server tasks and that sort of things with that said I like it for Unique like use cases I'll give you a few so one of them I don't know if any of you remember the dating app that I made where you would upload pictures of your code and it would you know you need to upload pictures basically and I had to do some Transformations on it or something there was something to be uh or no I had to check and make sure you guys weren't uploading porn that's what it was so I had to run some like calls and whatnot and I didn't want my server to get wrecked so I just like let basically I was like I want to infinitely scale my image uploads so that's why I used S3 and I lambdas and then put an S3 and I literally didn't care if your image took like five seconds to upload it is what it is um and I just like did JW keys for Authentication and it was fine that worked great I was happy with that situation another situation I like getting is server-side rendering because now I can scale out the like number of people that visit my website and if 100 people visit my website at once which you know does not happen but there's bursts of people that'll sometimes come and it's annoying and whatnot especially if next you ask you're like why is my server I basically I used to not serverless um with an xjs and it it would just randomly be really slow and it was dumb it was because it was getting burst and got wrecked so like that's also where I like serverless so in those two circumstances I enjoyed the life of serverless interesting I didn't think we'd probably disagree on and I'm pumped we did because I am all in on serverless in particular Edge now that that's become a reasonable option I am curious has the prolification of Edge and the ability to run run things like Astro or next Js On The Edge change your stance here at all uh so I love Edge if I can slap Edge in the thing but here's the thing with Edge I mean if I if I don't have to hit the database then Edge is beautiful like fantastic but if it doesn't have to hit the database like sometimes it should be a CDN obviously there's some other circumstances that are kind of in the middle but like the edge is negated if at least a good part is if it has hit the database um I would still slap my like next JS result uh server side rendering and Edge uh because like why not because at least like the beginning like latencies like a little bit better but I hear you I'm gonna share a link in chat give me a diagram you look like you're about to give me a diagram I I am tempted but I don't feel like going quite that far so I'm just gonna share a Lincoln shot for something I built I recently made it slower because I'm blocking on a DB right every time you open the page I just Linked In twitch chat that page is rendered on versel's edge which is using cloudflare workers and it is hitting Planet scale via their HTTP endpoints and I'm able to consistently load it under 300 milliseconds in San Francisco for like from page request a DB read and write occurs a new page is generated and sent to the user all under 300 milliseconds which is absolutely [ __ ] absurd that's fantastic so wait was the I'd be curious what the like time diff would be for like this was Lambda oh on Lambda it would be add another 150 milliseconds or so okay is that is it is it only cold start or is it um warm star it'll be fine okay but yeah so it is so it's not the fact that it's at the edge it's the fact that they're using um it's the warmer stuff like the iso thinking of Albert that goes faster yes one when there isn't data involved and the render on the edge is doing everything it needs at that edge and it doesn't have to do a further Network request absolutely it's going to be faster to like run on the edge just by being closer to the user but when it comes to cold starts the re that's where I think like Edge beats out Lambda even if you're doing a round trip to a database like oh yeah there's a bounce like I have to go to this Edge that then goes to West 2 but if it's going to West to and can get there faster get back faster and this whole process kicks off sooner we're in a really good spot but I think like the really cool magic here I'm seeing more and more providers introducing this is that I'm hitting my SQL database via HTTP not like a SQL connection so I don't have to have a native layer binding a connection to the database directly I'm not hitting a connection pooling limit or anything like that because I'm not connecting to the database I'm sending serialized SQL via HTTP to the server that then responds with the Json blob result that I can do whatever I want with I attached Keely to it which is like a prismo like query Builder that's typesafe and now I have DIY Prisma that's Edge ready with 300 milliseconds or less of load in like the region that my database is around do you know if uh Lambda Edge does that just saying that it is gosh dang it I'm using Lambda Edge what a shy I have you given versel in particular like for cell serverless functions an honest shot oh so actually I would love to use versel the only reason I did use Versailles I thought their pricing was a joke that you just like hit the band with like like that and I was like well I didn't want to get started on it and then have to switch like relatively quickly I'd have to look at what my bandwidth number was now to even see if I would pass the bandwidth because I don't remember what it was um and I'm not image heavy so it might maybe it would be okay um but that was that was my only Versailles uh concern like I was waiting there I basically did this research a bit ago and I could not get nexgs working in cloudflare workers so I was sad but that's my ideal setup is basically cloudflare workers or like the equivalent yeah next is starting to get like worker ready they most recent two next updates they added an optional like run in Edge workers thing you can call out in the config and then Versa will deploy those specific functions and endpoints to Edge the SSR part still is pretty inconsistent and slow if you edge render for it and it breaks like with random packages in ways that aren't particularly easy to debug still but for the back end stuff it's pretty nice I personally use Astro when I'm doing these tests because they're much more like Edge first and minimal it's not that I think edges or that that or Astro is better than next especially not for apps but it lets me very quickly write and deploy a function that runs on versel's edge and I could see myself using Astro as like a weight or almost like a fastified edge deployment through the strategy right you know if I could use Edge easily with next I would be using Edge with next it just so happens the situation that was the easiest and not the most expensive was whatever the crap I'm doing now um this versus changed their infrastructure because I know at one point they were lambdas are they not lambdas anymore it's still Lambda for the serverless functions and that's still the default there's a new opt-in Edge runtime that you can use and the edge runtime is a lot more like I I don't say more powerful because that's the wrong words obviously if you like in a way or in a Lambda you can run anything in versel if you have a GitHub repo that has a folder named API with a go file in it a python file in it and a types for file in it it will deploy all three of those as lambdas just by binding it to versl it's incredible what they do there but with Edge it Edge run times are much more peculiar and you need a framework that understands them and I think the work they're doing there is what's most impressive by building the like versus sell build uh I forgot what they call it's like the build SDK or something for framework developers to make it easy to deploy or to deploy their Frameworks on the edge via Versa and as for the pricing one of my favorite things about the new uh versl middleware stuff is since it runs on the edge and the edge is way cheaper they charge what do you think they charge for a million invocations oh that's a good question gosh I don't even remember what Lambda used to be uh I'm gonna guess a dollar 65 cents for a million dollars I was rounded up not bad at all yeah pretty close guess the reference a 100 gigabyte hours of serverless function processing is 40 bucks so it's pretty absurd how cheap the middleware functions are I feel like was that the same thing as cloudflare pricing okay flower is 15 cents yeah so it's like it's running on cloudflare's edge to be clear like they're reselling cloudflare's edge with a better oh okay like the or versel's Edge is cloudflare Versa serverless functions are Lambda versl is just an easier like SDK and like deployment method for both that makes sense no yeah I I want I want I want that scenario where I can SSR on the edge I know we're not there yet but that's the world I want yeah we're like this close and I'm hopeful that at the next conference we're gonna see that as the big new thing I'm also curious if you played specifically with I think this would be useful for some of the stuff you were describing ISR and increments or specifically programmatic and validation in the new next.js updates I have not mainly because I don't I haven't had anything yet that's like that amount of like in between like it's I've either had pretty much static or pretty much Dynamic that it should be one of those things so I have not tried it yet interesting I find that I am in the middle more than I'm on the very Dynamic extreme at the very least like if it's very Dynamic I usually don't care about the contents of the HTML down the wire I'm cool with the HTML being wrong and the or just having a loading State and then the client gets the most up-to-date data but I find I have a lot of stuff in that middle area like when I share a room link on PING and that invite has like my picture and my name for the room and stuff like that and then I go rename my room what's cool with the uh like programmatic revalidation is I can have in the like mutation endpoint that updates the name it can revalidate all of the URLs that have that in the HTML then so the next time somebody fetches they're hitting a CDN cached HTML file that was created when I made the change programmatically rather than being created on request or post request which lets you always have the most to date data without ever running serverless functions to get it only running those functions to update it what changes happen okay maybe I should just try it then I always thought I was like never in the scenario where I should be using it but basically the only thing I've actually only ever cared about with SSR was like Google SEO and Link previews and basically the link preview scenario we have is we want to show your pet that you have on your profile and you can update that pet like whenever you want and like possibly multiple times a day but like if that it's it's gonna be like sub 10 or whatever updates on a particular user but like of course that's expand across all users but it sounds like I just called the validation function I guess amount of times yeah if you ISR for the first request and then revalidate on changes you will have sometimes the first load will be the cold start time but anytime somebody updates anything a cache entity will be created in the CDN and you don't have to have any build runtime to block either so you'd get on a new deployment the first load can take up to two seconds but if after any user updates anything or sends the link somewhere it will always be milliseconds from that point forward because it lives in the cache from there on right and it's always the most up-to-date entity in the cache and I think that's what's cool about like the ISR and specifically the programmatic revalidate is you usually have a cache and the cash is always true where most of the time with cash strategies it's you always have the cash and the cash is sometimes true I like this slight Direction shift for caching that makes sense I probably should give that a try to be honest I'm actually just curious what my bandwidth is right now I am also very curious too I'll tell you guys what do you think my bandwidth is like having an idea how many like gigs you're sending a month on voidpet yeah I have no I I can't even give you like anything guess off of either is this how do you know how much bandwidth you use that ping I can check oh I imagine you guys use a crapload I mean no our videos going through different providers so the like yeah what you're fetching through versal is the thing I can check so that's going to be like the HTML and Json for requests and things like that uh let's see you soon I got a fat website that has not it has so much JavaScript all right let me see my logs uh there was one day where there must have been a bug oh I remember this day actually yeah we had a an image that was huge that was embedded in a popular GitHub repos readme so that image being deployed through US was insane so we had one day where we did 145 gigs but for oh my God the rest of the month if I literally trim that one day out it was six gigs for so for us we we also had a one weird day where it was like 55 gigabytes I don't even remember what that day was I was about 30 gigs but yeah same difference that was that and then we are about okay the total is 200 gigabytes for the month and it's about five gigabytes a day roughly yeah we're at actually a gigabyte a day and 30 for a month where we don't have something stupid going on yeah because I I was just like I I wanted to go see if I was under the it looks like I'd fit the pro Russell uh pricing which is not bad yeah I I have a feeling if you were to tweet about it too you could get them down to find some way to make it cheaper I I feel like they would be upset not having you as a customer if you maybe okay why okay I was trying to find what was the thing that I thought was alarming okay this is the thing I found alarming okay so it's twenty dollars a month per user you know per user's rough but whatever um for one terabyte of bandwidth and you're like all right that's like reason that's good like that's reasonable but if you hover over the terabyte bandwidth you put forty dollars for extra 100 gigs exactly that's scary when the initial thing's 20 and that's for one terabyte so you're like what in the world every 100 gigabyte after that is 40 bucks like whoa that's gonna stack up so basically I think I was that was literally the thing that scared me and I was like I don't even know what my Gigabyte number is what if we hit the one terabyte really fast they were like getting Shrek before like well under a terabyte like we should be under a terabyte for a bit yeah that we're gonna be okay usually the the cost there what it's coming from is you have images in your source code that are being deployed on lambdas and that's just expensive like if you're not putting your like assets on something like S3 yourself and then embedding them that way you could rack up a decent amount of bandwidth just from requests having images in them the Alternatives you can use next image pre-processing stuff in the image optimization but that's expensive as hell too so take your voice then yeah they moved it to a thousand Source images a month where it was a hundred before so that's a huge bump they 10xed it there's only nine dollars for another thousand that's not too bad see give me nine dollars for one terabyte that's what I'm asking for that's like that's S3 pricing exactly well pow actually I mean I'm using I'm I think like here's another thing I'm probably using something more expensive because it uses Cloud Print in the front it just happens to have credits like credits are a beautiful thing until you overwrite them yep yeah I especially as a YC company there are a lot of credits and like free deals and things we get and I feel like like some of the value you get on those deals is so absurd that I think their specific goal is to get you used to not paying for the service and racking up crazy bills so that as soon as your credits are over like I mean this is pretty public info AWS gives YC companies like during their batch a hundred thousand dollars of AWS credit that expires in a year so their goal to get you to spend a hundred thousand dollars in your first year because if you do that you're going to spend way more than that the next year right especially when you have more than zero users yes if you were spinning K of zero users you're spending 200k with some users that's like what like two accidental kubernetes deployments one terraform config that's bad exactly oh relatable I don't want to keep you for too long especially if you're not feeling great I'm gonna do one last ask for questions if anybody wants to ask them before we start wrapping up did you have anything we didn't talk about as well Ben that you were hoping to get to the fellow founder Creator engineering convo anything you want to pick my brain about um let me think of something hits I didn't have anything specific but I'll like pick my brain for a second and see if there's anything that comes to mind and Yuri said you dislike normalize front-end caches which makes sense because they're bad for your performance yep I like the caching to be I I like most things to be as close to the component as possible kind of sucks that like component level data fetching is as bad as it is but I'm excited for a future where the you can add a component level determine what data is needed and then at a compiler level or route level actually do that data loading and I think we're pretty close to that especially some of the changes I've been seeing for next.js as well as all the cool stuff that remix did it innovated I think we're nearing a future where you tell a component which data it needs with a hook and then the page loads with data and components all rendered correctly man you're suddenly relay I love relay I really wish relay was usable I genuinely do it's such I have not actually tried to relay so I can only the smartest developers I know a handful of them use relay but I've never met a dumb person using relay and I think that's my biggest hesitation is I need all of my tech to be stupid proof because I'm [ __ ] stupid and Relay can do unreal things performance wise compiler wise and DX wise but you have to build so much [ __ ] I know do you know who Jane Wong is the Twitter hacker who find James an old friend I [ __ ] love her she gave me access to her blogs code base a while back and just for like her blog for her fun Tech demos and [ __ ] she had like 2 000 lines of Redux related like code gen functions and typescript she had written to make relay work for her blog and it was incredible like if she open sourced that it would make relay way more usable but that's the kind of thing relay devs do is they build a whole Library into their code base just so they can use relay yeah I I didn't want to understand relay at that level and that was actually kind of I thought I like got that Vibe without actually like dipping my toe and relay I was like yeah that's not my can of worms oh and I do have one question for you that I just thought of oh boy so you are very much I would say like Ping is a kind of like related to Twitch in a sense of a lot of twitch streamers use pin and how do you think about it in the world where twitch is making some like you know decisions you're not exactly happy with you're seeing a lot of turmoil with streamers and like them link wanting to change platforms or any of that does that worry you at all of like where you guys are positioned with ping or something where you're like you're kind of always going to need ping no matter what platform you're streaming on and you guys are just like yeah if you guys want to F over twitch you don't even care about like what twitch is doing it's actually how much does like twitch affect you basically I'm just curious emotionally very much so and this has been a hard thing like and this is one of the many reasons I'm so happy to have co-founders was of the co-founders I'm the one who worked at twitch and I'm the one who's really emotionally invested in twitch so when they do stupid [ __ ] like they're cloning most of Ping's core features with a new product called guest star and it's it's something as [ __ ] because they took the engineers I hired at twitch from seven different teams and pulled all of them off to build the super team to clone my product it's just like a such a slap in the face such a like a spiritual hit for me that I hate but realistically all the things you just said are true more and more people are looking to diversify potentially leave the platform and what we've built that ping is not platform specific at all so what we did is we were already working on adding a few more off methods we had YouTube or Google Twitter and twitch because YouTube also a whole different piece that we have to get approved for we're working on it but Google's effectively YouTube off and we had Twitter and twitch we added Dropbox Microsoft and uh Discord and when we added those new options oh and Facebook when we out of those options we were gonna keep twitch as like the big one at the top but we decided with these changes with the current sediment that we would no longer make twitch like this big top the thing you sign in with and yeah I think that's the biggest like impact we've had as a business other than me being down all the time is we change the login page so twitch wasn't so prominent but that's about it like half of our users aren't on Twitch that's always been the case I personally am very invested into it still to this day even with all the [ __ ] going on there's nothing I want more than for twitch to get it [ __ ] together and succeed still but sadly it feels less likely every day I will say I don't know how public event about this I did have a conversation with the CEO of twitch over the weekend and He restored a lot of my faith and I am more hopeful than I was before but I am still very scared and I think a lot of the sentiments been killed forever that all said the last like three days they've put out so many cool new products announcements and everything else related to twitchcon and holy [ __ ] I've never seen this many features that feel like they understand creators needs come out in any window at twitch must last or much less like a week of time and I'm really excited for a future where twitch is doing that more regularly is more involved with the community again it feels more like the company I joined in 2017. make sense yeah satisfying answer yeah yeah I I figured it was that was probably the case that was I was curious because I I've been watching all the twitch stuff as well I'd say that like the more interesting directional changes we're making at ping are around the trends we're seeing both like in the market and also like in my own channel like I'm still a twitch streamer I happen to have a YouTube channel and most of my twitch audience happens to come from YouTube but like at my heart I'm a twitch streamer that's what I'm doing this for and all my content will be done on and made with ping on Twitch and we're realizing that you don't grow your audience on Twitch twitch which is not a place you go to blow up and make a huge like income and meet all these like people you do that on other platforms with Discovery twitch is the bottom of your funnel it competes more with only fans and less with Tick Tock and YouTube and right as such it's really important that we can help those creators continue to grow their funnels continue to succeed on other platforms to pull people in and a lot of what we're excited about building at paying now is tools that help creators reuse their content work with their editors to create content more effectively and find success on those other platforms and really build their funnel to to bring them more success and those tools are going to be less things like a live collab call app more like a tool to help you find the funniest faces you made to make a thumbnail or a tool to help you find parts in a VOD that you want to send to your Editor to make videos of stuff like that that helps you diversify your content portfolio and yourself rather than just the platform you're streaming on smart these are the things I think about every day I same but not on a business level interesting yeah I I will say just as somebody who talks to a lot of devs a lot of Founders and a lot of creators that the average creator has a much better understanding of the space they're in than any Dev or like founder does on average like you can find a random creator with like uh a thousand followers on Twitter that goes live to 15 viewers that's been doing it for two years and you can sit down and talk with them in the depth of their understanding of the space and what they're doing and what isn't isn't working even at that small level is incredible they usually have some like deeply set misconception that you have to get over to to hit that next level but the understanding they have of where they are is shocking compared to other spaces right yeah and unfortunately a lot of people building like I I'm like glad that you like got more into the like content creation because you're able to like feel it firsthand I feel like a lot of uh Creator County startups unfortunately not making content themselves unless you're not getting content yourself you can hear the stories but it's like a little bit different than actually like being in that uh that struggle if you will absolutely what I see when I look at the space is there's a bunch of like Squarespace type things and wixes where like stream yard lets you drag and drop people and go live on LinkedIn cool great I'm sure that like the squeaky wheels that really wanted to like do their business streams on LinkedIn to four viewers are really happy with their 15 a month subscription but that's not what we're building for we're not we're not making it easier to do your first stream the same way like companies trying to make it easier to start your first company aren't bringing a whole lot of value to the world because like the hard part isn't starting the hard part is following through and continuing to do it and all of these companies like the amount of finders I've talked to in the Creator space that are like yeah I tried making a YouTube and it was really hard so I stopped making a YouTube and instead made a company so it would have been easier to do my first stream and now they have this product that's for people who didn't have it in them to stream to do a stream because that's the the founder of the company somebody who didn't want to do the hard thing so they started a company for other people who didn't want to do the thing and we're trying really hard to be the opposite of that where we're for people who have done the hard thing they know why it sucks and they want it to be better and I had to experience that myself it's the same reason AWS was so successful because they were building Amazon first they built this very complex product that had lots of technical issues and constraints and when they solved those internally they realized others would have them too so they could sell those Solutions externally when you are solving for problems you have you will always do better than when you're solving for problems you think others have 100 percent yeah I I love this stuff and I also love that creators see the effort that we're putting in here that's something that was really important to me I wanted very strictly to not be another one of those Founders that just showed up here because they think there's money I'll be straightforward and this is probably going to like if there's any potential investors in here you're going to lowball me the next time we talk because the Creator economy is dead there is not a lot of money in this space right now it like was the Hut thing two years ago for some reason and it's just not succeeding at the moment what we're focused on isn't this idea of a Creator economy where creators suddenly start making a bunch of money because TV dies or building into is people who exist who have problems making content at the speeds and quality they want to making them more successful doing what they're doing right now thank you now I I love these Rants and I totally agree like having founder conversations is so essential and yeah I'm curious like when you look at the gaming world what do you see and how are you steering void pet to both learn and like do different from the space that as it exists well one thing is I knew very little about the gaming space when I came into it because I never followed it from a industry perspective but I followed it from a like obviously I was watching like twitch streams and I was into gaming I was not necessarily the person that was playing every day but I have a brother who's like a twitch streamer and like games a lot so I'd always hear a lot from him and I I was on that side of the thing where I'd like casually be hearing stuff that would happen twitch and whatnot or in gaming or what new games are coming out so I was came in like fresh from like how to actually make a game one thing is I hate that as we talk about iteration Cycles earlier that a lot of gaming is like yeah you spend two years in a shell and then out pops out a game and hopefully that is a good game and hopefully it's a hit and if it's not a hit like uh oh that's terrible so like one of the big things that we did differently was like um build it and people can play it like as early as possible and play it as we make changes to it so that's one thing there's been a lot of like pain in doing that um because you turn a ton of users because they're trying an unfinished product but there's also been a ton of learnings from that and I think I just know myself as a Founder who would struggle if I went stealth mode for two years so that's I'd say one very big one the second very big one was deciding to make a uh website instead of an app or a desktop app this was really came from two reasons one we were not ever planning on making like a graphics intensive game so we didn't have a constraint of needing to be on one of those platforms and also my expertise was in web anyway and it turned out to be a really good decision because half of our players happen to be mobile and half our players happen to be desktop I did not think that was gonna be the case but coming in it turns out if they have the option to play on the desktop they like it the game is more of like a mobile game in the sense like the experience is for someone playing on their phone um but half our players like to play on their computer too and they like that option so those are the two big ones I'd say is the web and making the game and Publishing it more frequently and uh there's pros and cons of both I don't even think like strictly what we did is like strictly better and we're gonna see if it pans out um but I think it was like I don't regret the choices based on like the situation and like the type of founder that I am this is super interesting and I haven't had a good Game Dev confident a while I love this stuff so much I something you're doing there that I've noticed the the greater Game Dev industry catching on to is for you desktop is big like percentage of user wise which is kind of rare especially like for a console game that's also on mobile that also has a PC version usually like the percentage of players and the percentage of hours is not as high on PC as other platforms however the hardest core users the evangelists and the people who are going to like make content about it share it with other people like the ones who not the users who you want for money but the users who you want for fame to eventually make money those users really appreciate having a good desktop client be it like a game they install via steam or a website they can go to and by serving them well but not over optimizing for them you're able to get a lot of like free good like faith and marketing out of them right I like to call these users that are generates yeah although I don't say it too much because I don't want to offend them but somebody I say this all the time exactly some degenerates are so degenerate that they own the term they love the term in which case they're like proudly degenerate that are like yeah they want to like the most optimal way to use the thing not and they're going to be using the thing in like yeah I don't care if it's supposed to be played on my phone if you give me a a website on my computer I will play it and I'll play it while I'm playing in this other browser on my other account too like fantastic I'm glad we gave you the option yep I totally agree and it's like those DJ end users so many companies hate them and try to avoid them and somebody even earlier saying like don't pay too much attention to the squeaky wheel it can kill your business yes I agree but if you can make that squeaky wheel squeak about you rather than at you it could be very powerful if you can flip that Dynamic and we've turned some very loud people into very loud Advocates of our first product at ping and God when we get further with that actually I'm curious what your thoughts are on this something I've found at ping is it's almost better to have some bugs than no bugs because if you have a bug a user's effect did they hit us up about it and we fix it in seven minutes and they feel like they were part of that and like we were responsive and gave them good experience there the amount of good faith that builds is way higher than if we had no bugs at all I agree with that and I also think that's true for Content as well yeah I think in both cases it's it's yeah like you said you then have they've they feel good about bringing the bug up and making the product better so I I agree I I I don't I think and here's a great thing just based on the way I code the bugs are naturally there anyway so like you know I didn't even have to plant them in there like it's a symbiosis like you know both of us are winning without me needing to like change anything that I'm doing too absolutely I I love that so much I think that being prepared for the bugs and being involved with the users for when those things happen is so much more valuable than like almost anything else you can be doing as a Founder even like when you have a whole team like I have a team of Engineers and I'm still the one who jumps on bugs about half the time not because like I'm the most technical or the best at doing it I'm probably slower than a lot of the team but there's something powerful about the CEO of the companies whose product you're using showing up in your Twitch chat saying hey I heard you were having problems so sorry about that we just fixed it if you refresh it should be good now like the the vibe that I've seen from that and how people feel like seeing a verified Twitch account that gets thousands of viewers showing up in their chat saying hey thank you for the report we just got that fixed like those moments matter so much more than anything you can do with the product exactly yeah and even that magic moment and that's our Edge as founders of smaller companies like we get to do things that Ubisoft and Nintendo can't like when's the last time a person had a problem with Pokemon and somebody at Nintendo replied exactly never never ever yeah the inverse happens absolutely the other thing you touched on here that I absolutely love is like kind of back on the earlier topic of the feedback loop and how close you can get to getting feedback earlier without having to spend two years making a game as a new game developer just to learn nobody wants to play it I'm lucky that I've had a lot of play testing opportunities in my life most recently my favorite game of all time outer Wilds had a DLC and I got to go in and play test the DLC for my favorite game ever and I got to be the first person to Beat It by over a year before it ended up coming out because they were learning so much through the play tests but they found bringing on streamers specifically was super valuable because we're used to talking our thoughts and describing everything that's in our brains and the value they got out of that in steering the direction of the game but also ndaing me and forcing me to not talk about it for a year plus is so valuable for them and like what I saw it like now the game's out like I can literally see the impact that my dumbass had by making so many stupid mistakes when I played through that early version and as valuable as all that was the much more valuable part was the sentiment they got so the version I played had like a white planet with a bunch of like brown walls that were dropped in as default Unity assets and then a year later I saw all of these things now have textures and like stories and a a game but the gameplay Loop and the vibe they could test out way earlier and then steer the direction of but until you have all of those resources like you have a person who's the director of play testing for your game Studio that was recommended to you by the game publisher you've been working with for five plus years and setting up all of the things you need for all that even before then Alex would just call you on Discord send you a zip of the build and have you play it with it that way and I think there's so much value there I'm curious if you've tried more like closed loop play tests where you pick a few power users give them access to new staging versions of the game to get feedback on new mechanics early so I have not done that but I feel like that's something I want to start doing because I think a lot of the problems that we had I think I think we went too much on the extreme of like getting user feedback that it's almost too much and not closed enough that I want to dial it back just a tad so it's closer to that point where like all right you have like the next day or whatever like there's like it's gated and like a little bit more guard really of what they're trying what they're giving feedback on um so the answer is no but I want to yeah I think there's two big benefits the first one you touched on a lot there which is like making sure things are working as expected and that people have the opportunity to chat with you about those new things once you've committed I think the more valuable like that or thing you get from it a step earlier where you're not sure if an idea is gonna work yet or not so you do a super hacky like prototype version of it and maybe you don't even code it you just draw it in figma screen share it to them and have them click buttons and see how they feel about these new things before you even start the development I think that type of feedback loop can be super valuable as you're sketching out and trying new things right and also if you let a user play with like the thing for too long they almost get too attached to it even if they're not doing the behavior that I want them to be doing and so I can release something and think it's a failed feature even though there's some amount of users that enjoy it that are like now super attached to it because I let them play with it for too long so the mistake was like giving it to him for too much time that they're like now this is my baby like does this thing they like so much and you know it's hard to rip it out after you do that we have that so much at ping with like because production workflows are so Jank and full of duct tape that we now get thrown at a wall and duct taped to it and then we make a slight change in the shape of the product like wait but that cuts the duct tape on this Edge like oh sorry we didn't realize that people were like relying on the color that things flash to determine when people were talking for a weird integration they were building or one fun one that somebody writing custom CSS for the embeds which I [ __ ] love and they were targeting based on the Tailwind class names we were using to get to a specific element and when the tail and class names changed they couldn't Target it anymore they complained about it I was like oh what element are you targeting and I went and added a custom ID to that element so they can always hit it when they want to like if you want to write custom CSS for our product for your streams go nuts absolutely but like I need to know that so I can put a hook in for you to grab rather than you using arbitrary Tailwind class themes to help you find the right element right right no that's I mean that's exactly it you don't realize how much users are using something until you take it out sometimes and that absence of it is what I've definitely had to like monkey patch some stuff and put it back in when I'm like oh crap that's actually vital and I did not realize it was vital uh oh yeah I the amount of I'll be I'll be honest I've been surprised like we've removed a few things and didn't get much negative feedback we also will regularly feature flag out something and we we feature flag a lot now which is definitely a good thing for how custom are different user setups are and like we have a big feature that I've been using for all my streams for two months now we originally deployed it for the Austin show lover house because he had like 15 guests and he wanted to move them from place to place throughout the stream before all of the embeds were like a URL represents Ben a URL represents Theo this URL represents Ben and Bryn as one URL but it was like query params that shows who was in what URL so we moved to a centralized system with web hooks so or websockets so I could dynamically change who's where on the stream so like if I right now oh that'll actually be a very interesting like infinite Loop if I send myself I was going to try and do a self send to show it but I actually I can do that quick so I'm switching right now Ben sees a return feed now Ben sees just me if I hit the little replace guest button that we added I can dynamically swap so I should have myself next to me instead of Ben I don't know why that didn't work that's concerning never mind good thing we haven't shipped this feature yet we'll fix that later guys the bug and prod we have a lot of this especially for features we haven't shipped but the goal of this feature is rather than swapping URLs you could in the UI send people to and from different places which makes it a lot easier to manage very Dynamic shows where before we were building for like the podcast you do every week or the two guests are always the same the products work great for that yeah but like this feature is going to fundamentally change the way you orchestrate your show and while we have a legacy mode in it so you could still do things the only way if you want to the ux is different enough that we want to be careful with this rollout so right now it's feature flagged on a few of our power users they've been liking it a lot once we iron out the last set of bugs we'll probably start a like a granular rollout or I'll do an opt-in or an opt out in settings so you can choose if it's on or not but yeah the goal of what we're doing here is building a better workflow without breaking existing workflows and learning to be cautious of that in a Creator Space is really challenging once you're the thing you're selling or providing for users doesn't have one entry point or exit point it has an unknown number that people are doing all these crazy things with yeah I'm thankful our users are so Technical and good at talking because they can describe the things they're doing very well that's true when they can actually say what's going wrong in like good instructions that makes a big difference huge underrated perk of the Creator space is that the average Creator knows how to talk whereas the average developer does not and the average gamer chooses not to yeah that's a great way to put it yeah yeah I'm running out don't complain about it I'm running out of questions I am seeing if anybody else had interesting ones one last big call for questions and obviously if you have anything I'd love to hear oh flutter we have not talked about flutter yet would love to hear your thoughts on flutter that's cool yeah I think on like those levels we are very very aligned I actually talked with the founder of like the flutter team at Google the same weekend I was talking about before like what at the YC event and he uh he was trying to build a modern web browser and then it just kind of became flutter and he seemed very conflicted on how to feel about it which was interesting that's interesting yeah if y'all want to know why flutter is gross I have at least two videos on that on my channel you can feel free to check out the react native then I'm curious I'm a fan I used it this morning yeah Expo in particular makes react native very very pleasant to work with I would say like react native itself feels almost like relay in the sense you have to know what the [ __ ] you're doing really hard to make it work but Expo knows what they're doing and they've provided all of those like hard parts for us yeah dumb people can use Expo yes Expo is Theo proof there you go kind of want to add that to the brand theo-proofing that's why I like trpc so much unlike graphql it's neoproof true not seen too many other great questions oh uh people are asking about the Gatsby create react app diagram oh that was a while ago yeah and I we've talked about that on Twitter a bit but like I updated the diagram and you just were like yeah that looks right now yeah yeah no I think you just made a up-to-date slash a better version of what you should be using now so yeah I I am happy that the narrative around create react app has shifted as fast as it has because I I've been hating on it for a while I'm uniquely burned where like my first front-end task at twitch after two years of back end was updating a big repo from webpack 2 to webpack 4. like that's how I got into front end and it was a create react app repo so uh I I started on the the correct foot of hating the absolute [ __ ] out of create react app and since then have been waiting for the world to realize this is a bad boilerplate and starter because what they did it's very much the squeaky wheel problem where every single thing any person ever asked in an issue they added somewhere and the result is like it poly fills the node crypto library and all these other like random node modules it has a multi-thousand line webpack config that does crazy [ __ ] in it and there is literally no way in hell you're ever going to SSR CRA without like having a PhD in weird JavaScript [ __ ] yeah yeah I I've stopped using Create react app and uh haven't missed it so what do you reach for now when you start a new project like what's the npm command you run to knit something create next app that's usually anyway I guess it depends what you know what about the dash dash TS um well of course that's like you know it's in my that's in my autocomplete you know like I start writing create and it's just there I don't actually type that part I'm gonna challenge you for the next one use create T3 app even if you turn off everything else it's a better next or create next app at this point you can add the other things if you want but the default types typescript version of create next app isn't typescript very much they forget to install the typescript package and it's certainly not typesafe so yeah I highly recommend like even if just to like I stopped using Create next app every time I try to use it on stream for something it breaks in some stupid way I just use create T3 app for everything now because it's still next it's just a better template all right I will give it a try we also have type safe environment variables in it too which is super useful oh fantastic I made uh I want to see how those are are done because I did a library like a very long time ago to like fix that for me um but it's like a little clunky how I did it so yeah I will check that out there's a couple libraries that do it now the creator of one of them is also the lead of trpc he contributed uh recommended way of doing it before he had the package so we're basically using our version of what is now a package the tldr is like there's a file that it has to be JS so it's we use MJS with type definition so it's still type safe within there and it's just a list of the variable names and we use odd to validate it so you say if it's a string a URL whatever there and now you can import from that directly in the typescript code safely and when you try to deploy validating when you try to deploy the errors are so good and we have this happen all the time where somebody's like hey I started a create T3 app and when I went to deploy it it didn't work so we say Okay show us the error log from the deploy and right there in bright red text says you forgot these three environment variables it's so nice all right I will give it a try and I will let you know please do yeah I did you see any other questions you wanted to jump on um I haven't tried solid so I can't comment on that uh and I think that's the only question I see in this batch of comments so I'm curious anything else in the JavaScript world that's caught your eye recently like what are the most exciting I mean obviously bun but I haven't even tried bun yet I'd say like that's like probably the most recent thing that's caught my eye but I because I I already Yuri show me the like uh was it all called trpc yep that's like not really catch my eye anymore like my eyes erasing it so I'd say like buns like they're probably the last thing that caught my eye um I mean obviously like the stable uh diffusion all the like image libraries but that's like not exactly JavaScript so I I am so excited about the AI image stuff in particular it's going to be really cool like as a person who struggles a lot on my thumbnails if I could type in a thumbnail idea it gives me a rough prototype and I can go fix that up in Photoshop that sounds incredible oh that'd be great oh boy somebody linked a that is a fantastic tweet how did we not see that this was two hours ago what I need to find an easy way to share this on stream one sec uh oh my game cap window capture oh no not the overlay let's hide that quick window capture oh I don't have that in a different thing oh no here it is window there we go yeah high quality high quality means bunawad why don't you make one of these for Jared Jerry was doing interviews I think that's yeah I do you know the story of how bun got named I have no idea was he eating buns no uh I have another one of my good friends from like the old like hackathon hacker [ __ ] posting Facebook groups uh she has a bunny named bundle and was trying to get Jared to name bun after her he wouldn't so she settled for naming it after her bunny named bundle which was the perfect name for what bun was becoming at the time and it stopped right so so bun is named after my friend keps bunny oh and Bun has this bun even have any bunnies on its landing page nope or GitHub sad he needs to add a little thing on that somebody used to add ears to the bun yeah yeah I I was very proud of uh Kip when she told me that story because bun was like not out for anyone to use yet it was just like a thing he would post tweets about the performance of every couple weeks and right I was pretty bought in already and then he dropped it into the crazy Rush happened and that was nuts to see because like I've kept an eye on bun for almost two years now and all of a sudden it was the Hot Topic I guess like the third or fourth most popular video I've done on YouTube was me talking about bun right I think that's all I have I guess I have one last question myself is there any space on Tick Tock for another thirst trap software Dev of course there's all that there's literally no one else is doing it besides me so there's obviously plenty of room so please post start posting today that should be your daily content too I am very tempted as uh the best dressed software Dev it's about time I take more advantage of it oh boy big talk it's not very big talk the average software Dev wears a free t-shirt and jeans their mom bought them 12 years ago like like I can't go with a good analysis how do you recognize the philosopher engineer yeah or primagen's hoodie I saw I see you and I'm like man is that guy a thirst trap or a programmer I don't know like I get confused you know it's really funny because whenever somebody doesn't agree with me and they don't have like a technical reason for it they could just lean on that like there's I forgot the name of the dude on [ __ ] Twitter but there's some like startup [ __ ] post that does everything in PHP who whenever like I point out that his recommendations are bad replies with oh look at budget Jake Paul out here who thinks he can program and I reply with go gentrify another country and call it a startup ratio I'm gonna delete this [ __ ] tweet yeah that that's that's so funny the ironic way yeah it's funny how like being not a stereotypical looking nerd quickly becomes an insult when the nerd thing is hard to disagree with they're jealous absolutely and it's but it's so much more apparent when they're talking about how I dress than when they're talking about what I said I like as you mentioned before it's so nice talking to people like actually correcting the things you did wrong but if the thing you're mad about is that I look good while I talk about why your favorite framework is bad not that your favorite framework is bad that's your problem not mine that is true they need to go to the salon and up their looks too people really wanted us to talk about forms you have a quick form take before we sign off I mean I have not updated my form live I've been using formic I haven't updated it in years because it does enough of the job it's not the best it's not the worst it's like decent yeah did you know the guy who made formix now doing TR or doing a turbo repo for sale yes yes yeah I've been really awesome watching Jared's come up to I need to have him on the show we were chatting about it a while back and I haven't found a time just yet but yeah the turbo repo stuff's really exciting I think it solves a a whole category of problems that I'm running into a lot now as we build bigger code bases but it's also less fun to talk about because most of the people who are like coming to our YouTube channels to learn how to build their next thing don't have a next thing that's big enough to need turbo refill yet right like yeah you gotta have like more than like five you know X packages you know yeah absolutely I think that's all I got thank you so much I before you said you're only gonna be here for an hour and now you've been here for two and a half so I appreciate it a ton man oh well that's the only all I could commit to I've been like actually feeling pretty good right now so good [ __ ] I'm glad glad we can make this happen scheduling is difficult in this day and age so thanks for having me and thank you so much sorry for my Chaos on the scheduling side as well I think you're the person I've had to like move times on the most by a lot and I yeah I appreciate it was me too so you had to move once I didn't move like three times so no I I [ __ ] this one up much more so I love to call out my guests for being bad at scheduling but this one was more me than anybody so I'll take the L all right I'll let you have it then you would I appreciate it let me take one loss I'll thank you again so much I'm going to cut us to the BRB screen really quick and run an ad break I'll be back in like two to three minutes guys so don't leave just yet we have a lot of fun JavaScript stuff to talk about so be right back stream actually do you have anything you want to shut up before we leave void pet link probably no honestly you can just Google my name you'll find stuff it's good good enough for me we'll see y'all back in a bit




## WWDC was weird. - 20250612
wwdc 2025 really put the developer in the developer conference it's been a while since I saw Apple do this much in one event even if Liquid Glass isn't what everyone's most excited about i mean we've all seen the memes by now right welcome back Windows 7 but all the other stuff they did from the changes to Gameport Toolkit enabling WebGPU for Safari by default and don't even get me started on the open source Docker clone written in Swift they're doing some crazy stuff i'm going to do my best to cover as much of this as possible but as you guys know Apple costs me a lot of money they've never paid me a scent and I doubt they ever will as such someone has to cover the bill so a quick word from today's sponsor and then we'll dive into all this crazy news building great UIs has never been easier it's kind of nuts that you can take a screenshot of a UI you like hand it to Cursor and say "Hey can you make it look like that?" And it will the problem is you need really good screenshots ideally ones from working UIs from great applications people already know and love and it's hard to find good examples i've spent a lot of my time trying to just find something that does kind of what I was looking for and then I found today's sponsor and my life has gotten so much easier since mobin is one of those products that once I found it I immediately went and sub because I was blown away with how useful it was to me they have built this incredible collection of real UI from real applications web mobile or whatever else that you can use as reference as you're building your own stuff when you're trying to make something great having the right inspiration is key so what if you could just find it by clicking around i'm working on a subscription payw wall for web oh look here we have a ton of different options some of which are great some of which might not be but we have them all as reference once you find one that you like let's say we enjoy this one you can copy the screenshot hop over to something like Vzero paste it in say make me a payw wall that looks like this for my product T3 chat and look at that it's that easy to grab a decent UI from something else i am blown away this is so useful for building real stuff i'm going to be using this a ton myself and I'm sure you guys will benefit as well if you don't believe me go try it out for free their free tier is super generous and you can find a ton of useful things from it once you decide you want more go pay the what is it 10 bucks a month yeah 10 bucks a month absurdly useful it's so good i've been blown away i bet you will be too check them out today at soyv.link/mobin i think it's fair to say that WWDC was pretty weird it was a an interesting event dubdub's always been strange because it's the worldwide developer conference and it's really trying to focus on the things developers need to know but it always goes so much further than that and they treat it like a normal Apple announcement conference now i mean they just announced a redesign for all of Apple's platforms at a developer event but that's largely because developers need to know and care about these different things it's important for us to know as we're building applications what's going to change so that the things that we're building and the timelines that we have stay realistic and if you're about to ship an app in September and they're going to change how everything works for building apps by September it's something you should know so I do appreciate Apple for putting these things out early but at the same time seeing my entire team install the developer beta for iOS 26 scares me a lot so checks and balances you know first we should talk about liquid glass because it's what everybody's thinking about from this event and it's different to say the least i understand the skepticism i've seen a lot of complaints around accessibility i hate the fact that the only time people talk about accessibility is when they want to attack something i say is Flutter's number one hater who uses accessibility as their main argument still the contrast issues are real but they usually require you to get yourself into a scenario that has them if they're going to be there by default or they aren't there until you do something like scroll and get into that state so people were complaining that they couldn't read the name iMessage at the bottom of the like chat when they're about to send a text on iMessage because when they scroll things behind it could blur that you know what that text says because it always says that even when there is nothing behind it so it's not really a big deal i think this would be much worse if labels that were important were becoming unreadable like you know your notifications that all said I can't help but look at it and just see Windows Arrow like it's a bit uncanny it's hilarious how similar the vibe is but I understand why they made the move as someone who loves their Vision Pro and doesn't use it enough it feels nice it is a really modern vibe and I don't think the accessibility problems are that bad what is terrible is the animation times i saw some of them on my CTO's phone because he installed it on his work phone and like watching how slow everything is to fly in seeing how much time you're spending waiting on animation all of that i I hate it i'm the guy who doesn't even use multiple desktops because it makes using my computer feel slower i don't like the animations when I'm sliding between desktops just takes too long in my opinion so I don't use those features at all i don't do anything that requires a blocking animation i really hope they don't make me turn on reduced motion again i've had to do it in the past and it breaks a bunch of stuff so fingers crossed they don't go far enough where I have to do that but honestly I think it looks really really good the keyboard looks funny if you don't have suggestions on my CTO has it off and it has a weird rounded corner if I go to his uh profile I'm sure I can see it quick when you turn off suggestions it makes the keyboard look awful they also change the positioning a little bit so typing on it sucks don't like the keyboard changes they'll probably revert those the same way they reverted the like where the answer call button was when they changed that and everybody was upset that's why they do these betas though it's talk all the  you want to on Apple they put the stuff out really early so dumb asses like the people on my team will install it hate it give them feedback and then they walk it back but then they also walked back one of my favorite things which is the photos app i loved the iOS 18 photos app i know everyone hates it i don't care you are wrong i am right i spend a lot of time going through photos and organizing content once you reorganize the app because you can change where things are it's really really nice and now it's 2x more clicks for me to get anywhere due to the change they just made so I am annoyed about that one but then there's the Safari redesign the URL bar now will blend in to the page that you're on so for everyone who's had issues with vertical height in Safari on mobile it almost certainly just got worse it's also very annoying for things like T3 Chat because it covers up where the input is on the bottom i think it looks better but I can't help but look at it and look at the changes to the icons on the home screen and think that this is intentionally or not an attempt to harm web apps because PWA are getting more and more preferential treatment from governments and third parties and Apple does not want PWA to win on one hand they could make mobile apps more competitive but they'll do instead what Apple usually does and make things worse for everyone else i know Dax for example installed the beta and set up his home screen with the new glass icons and you'll notice two stand out there's a reason that these two look so much worse it's not cuz we gave him early access to a T3 chat beta it's a mobile shortcut to the website and they don't let you do these new fancy behaviors on those types of shortcuts geforce Now is the same because Apple does not allow for you to include game streaming in applications so most game streaming services have had to go build web apps instead which is really annoying yeah this is funny in terms of the contrast apple's liquid glass rollout's actually genius the design ensures that you can't read the comically wrong Apple intelligence notification summaries they really got the contrast and coloring here wrong it's funny cuz this background is an official Apple wallpaper and the reason it's having problems is it detects darker light based on the top of this because traditionally darker light is used to determine what color to make like the T-Mobile call out here the the time when it gets moved up there power and whatnot so they use the average color of the top bar to determine light or dark but that means that the rest of this being light hurts because it was detected as dark due to the really dark section on the top right there but the rest is all light if this was like a third party wallpaper I would get it but the fact this is an official Apple wallpaper using like the default Apple settings and the contrast is unreadable this is really bad and they do absolutely have to find ways to fix this that is hilarious absolutely wild that Apple social media intern didn't proofread the liquid glass thumbnail on all devices the YouTube icon for the preview here introducing liquid ass great learning to check for all of these things is an art and if you're not doing YouTube full-time you will forget and miss these types of things back to the icon thing for a sec they made a whole new icon composer flow in Xcode is it even an Xcode this is a whole separate app fascinating since everything has this depth to it now a custom piece of software for making it look right seems essential so I'm happy that they're putting the effort in to do that instead of just pretending we can do it in Photoshop cuz we can't oh you can just download and install this separately that's cool a lot of the other things we'll talk about I will not be able to try because I am not stupid enough to install a developer beta on my laptop the one that I use for my work every day okay enough making fun of the UI okay one more thing making fun of the UI this tweet got me thinking flutter is screwed thankfully React Native is not this kind of highlights the gap between React Native and Flutter even if Apple still took the opportunity to make fun of React Native during their state of the platform thing which was very annoying i get why they're upset about it but I don't like the points they make when they try to talk about it expo Router and a properly set up React Native Expo app can just be rebuilt on the latest Xcode beta and have all of the new liquid glass stuff by default which is good because React Native is native flutter is a game engine the way Flutter does the UIs that we normally expect inside of our mobile apps is by screenshotting them and then recreating them in the app kit so when you render something like this inside of Flutter it's not actually calling the native notification platform to render this particular view in the app it is inside of its weird game engine thing rendering a fake version of it with its own text rasterization its own touch layer its own everything which is a nightmare for accessibility but more importantly it just puts you in uncanny valley all of the time earlier this year Flutter pushed an update that was supposed to make things look more proper in their Certino theme which is the name of the iOS mode in Flutter and this was the first example on this blog post they've since replaced it and changed the blog post because I made it look so bad i ratioed them with this post h this hurts me if you can't see what's wrong here I'm sure you love your Android phone a lot and I'm sure you're very very happy spending a thousand dollars on a phone that gets updates for six months and I'm sure you don't notice how much worse all the other apps you use on your phone are but for anyone with eyes the fact the search icon is the wrong size and is aligned incorrectly is just impossible to ignore and this being the example of them showing off how much better Flutter looks on an iPhone shows just how little they understand design and iOS flutter is not native when the platform improves they don't get the wins they have to copy the winds with a new set of screenshots that they recreate the new UIs with so I wish a lot of luck to them trying to recreate Liquid Glass they're absolutely not going to be able to and if you've ever used one of those apps that's like clearly from the iOS 6 era and feels really weird and out ofd on your phone there's going to be even more Flutter apps that feel like that they'll be uncanny valley and old my biggest fear there is people will use a Flutter app that looks like an iOS 16 or 18 app and they'll assume that's how all iOS 16 and 18 apps felt back in the day when in reality all the real apps from that era just updated to the latest build and look the new way these ones have to look the old way because so much energy and like edge effort was put into recreating the old behaviors oh yeah classic you can see uh once again these different notifications there are so many little things that make theirs just feel wrong be it the weirdly thick bar right there the text not quite doing spacing properly it got a lot better the text used to just straight up be kerned wrong so there was too much space between letters i'm thankful they fixed that at least but that's after they unfucked that part of the UI which is kind of crazy anyways good luck to the Flutter devs and to the Flutter people because when you build your own layer on top from scratch instead of hooking into the native stuff you now have to recreate every native win so once again we're getting a great reminder of how miserable Flutter is if you're trying to make things that are actually nice for users to use and thankfully again React Native is unaffected i wish Apple would take a stance on this and like at least let the people know that they prefer React Native to Flutter but instead they just talk equal on all of them and kind of ignore Flutter in the first place one last thing on notifications cuz it's part of how we got here left align i am so happy about this phones are too big for us to pretend that the modal is this big centered thing that needs everything centered within it the old UI for this type of thing really felt like it was from the small phone era this in some ways to me feels like the the true death of the iPhone mini but it looks so much better i I am immediately preferring the new look i like the roundedness i know that these edges don't match and I care so much less than I thought I would i'm actually very very happy with this UI everyone will come around they always do i know how this works i've also seen the leaks for the iPhone 17 and thought it was the ugliest thing in the world now those leaks seem confirmed we'll see how I feel when the phone comes out but I've had so many times where I looked at an Apple design I was like "This sucks i hate it." And then once I use it I come around but this is better as Joan the one who shared this says "It reads faster it's lower cognitive load and anchoring is an accessibility win." Cool we've now covered all the UI stuff i probably need to do markers in this video for people who don't want this part and want to skip to the fun tech i am sorry to those who just went through all of this when they actually care more about Xcode and the new container stuff let's start with the container stuff because it's actually pretty fun first off I love that we're seeing more Apple on GitHub it's always been rare to see them pop up and it's always been in the weirdest places too like I remember a while back there was this weird developer experience account on GitHub that made a PR to OBS the Open Broadcast Suite the tool I'm using to record this stream right now that was meant to massively improve the quality of screen capture on Mac OS by using the new Mac OS screen capture APIs it seems like they made the PR cuz they were using OBS as a benchmark for a lot of the stuff and they made a real PR it didn't get merged but it was referenced heavily with the one that was merged they didn't file any updates they didn't respond to any like requests for comment or questions it was this weird Let me see if I can find it so it was developer ecosystem engineering it's this weird spooky account from Apple that like didn't seem real initially but it it very clearly is it also had a spookier picture before i know this one's eerie already with the cloud and whatnot but it was like black and weirdly like it was like a dystopian Apple logo before and this is the PR where they improved capture support on Mac OS yeah they have a weird GitHub presence it's strange seeing how they pop up throughout the platform and now they're actually putting things on the official Apple account on GitHub which is a nice change including all of Foundation DB which we'll talk about in a minute containerization is the interesting thing that we're here for today though containerization is a Swift package for running Linux containers on Mac OS to put it more simply it is an attempt at recreating Docker in Swift to work better on silicon Macs i still remember when I first got my Apple Silicon Mac it was my M1 Air almost everything worked really well by default the only problem I had was Docker sucked on it initially and I remember when that first Docker update came out that let you run Docker on Apple Silicon and I also remember Orbstack getting a lot of users because they focused on that much more than Docker officially was i still am on Orbstack when I do need containers which is honestly not as often nowadays as I would have expected that all said a native built-in by Apple that supports Linux this is kind of their Windows subsystem for Linux alternative but it's also like a we don't need Docker anymore moment very interesting it's written almost entirely in Swift which is crazy but more and more makes sense i actually got linked an article earlier that I haven't had a chance to read yet this is from Nean who if you guys don't know is the creator of Stylex one of the legends of design and performance from Meta that now works at OpenAI trying to make the chatbt site less slow and he wrote an article two years ago now swift is a more convenient Rust it's been interesting seeing more and more people come around to this i know like Ladybird for example went all in on Swift it's crazy to see more and more people adopting Swift as their like native solution for cross-platform application development it's fascinating and this kind of leans into that direction more and more we're seeing Apple using Swift where previously they would have used Objective C or C++ not just for building applications but building all sorts of other things what's even more interesting is I'm seeing less people adopting Swift UI and more push back on it as a platform they're using the old UI kit stuff on top of Swift instead of using the new one because Swift UI has so many problems compared to AppKit just in performance changes with different versions yeah Swift UI is rough almost everyone I know that committed hard and has a big app with it is moving off even more so than React Native which is funny but Swift seems like a good enough language it has its problems but it's cool to see this type of adoption the new containerization package will allow you to manage images interact with remote registries i'm assuming this is all just Docker compatible it's all OCI makes sense you can create and populate ext4 file systems which is cool that they're not forcing their file system into things i honestly think Apple deserves more credit for the insane things they've done with file systems they did a rolling release where they ported every person's iOS device to a different file system which is just crazy if you think about it to install an update on your phone that rewrites all of the partitions on your phone and the fact they did that as a rolling release a small group of users and slowly more and more would just install an iOS update and get their file system rewritten they know this stuff well it's cool to see them embracing file systems that aren't within their ecosystem in order to make this work right netling socket support optimized Linux kernel for fast boot times interesting that they make their own fork of the Linux kernel yeah this is an optimized kernel configuration to produce a fast and lightweight kernel for container use fascinating this is probably where all that C code is if you were looking for it spawn lightweight virtual machines and manage the runtime environment spawn and interact with containerized processes and if you do need x86 Rosetta 2 lets you run AMD 64 x86 containers on Apple silicon cool stuff they're also using protobuffs as well this is kind of funny when you think about it it's so unapp embracing Linux on Mac OS with an open- source developer tool hosted on GitHub and its integration communication layer is Google's gRPC protobuff layer the amount of things that I never would have thought I'd see Apple do here is kind of crazy and I I'll hit the star button i want to be here this does kind of feel like Apple's developers developers developers moment in a lot of ways but they're also really behind oh actually one last thing on the Swift and containerization stuff foundation DB is an underappreciated project mostly because it's a weird project it's a Apple's DB KV store chaos apple it's open source it's written in C++ it's pretty cool database not the most reliable or performant not a lot of options for hosting in different ways it's really focused on shared nothing so if any one piece dies the rest stays alive it also works natively on your devices which is something they like a lot right now it's largely C++ but there have been rumblings that more and more they plan to start rewriting core parts of it in Swift which is fascinating it seems like they're really starting to commit to Swift as like the native platform language instead of it just being for applications now we need to talk about video games i know not every one of you is a gamer but statistically speaking most of you probably are i've seen the numbers the changes that they're making to game porting Toolkit 3 and the game platform with Metal on Mac OS is subtle but cool they're finally allowing for multiframe gen and their equivalent of DLSS where it can generate in between frames to keep your frame rate higher and apparently GPTK 3 is even easier to port games with that said I know almost no game developers who are using this to port games i mostly know a bunch of third parties who are using a bunch of different additional software and hacks in order to port games that are not going to ever be ported to Mac OS to get them running i know my intern for example got a bunch of different games running on his Mac through hacks to GPTK even though none of them will ever officially be supported so that's cool but it's nowhere near as cool as the much better way to play games on mobile which is web GPU that's kind of a joke cuz we're not there yet but I really hope that we get there there have been some big changes to WebGPU and WASM recently that are making it more compelling as a platform for game development if you're not familiar with WebGPU it's what it says it lets you have native GPU access effectively through the web i hate that it's kind of meme'd here right now but the changes that are happening are making it a lot less memey in particular the big change here is you no longer have to go turn on some weird hidden flag to use it in Safari so mobile games with web GPU are now a real possibility once this iOS update ships what's more cool is actually a change that Apple had nothing to do with previously WASOM plus web GPU had a really really hard limit of 4 GB of memory usage in Chrome this greatly restricted the quality of what you could do with the web GPU side like you can make some small indie games and throw them in there which is cool what Google just changed very very recently is they bumped the limit to effectively be unlimited it might be soft capped at 16 gigs by default but I'm not even sure about that all I know is that I've talked to some companies that went from ignoring WebGPU to being allin on it because the 4 gig limit has been removed so this era is happening it's really cool to see over the last couple months WebGPU went from a meme to an actual viable technology to the point where we're seeing 3.js getting hyped about it on Twitter so fingers crossed we're going to see some massive improvements to what people do with WAM and WebGPU and building these types of deep interactive experiences in the browser that's not the end of the JS embrace from Apple though although they did make fun of React Native a bunch during their weird developer platform thing they did also make some cool changes for us JS devs swift 6.2 obviously has all the weird concurrency performance things that make your code throw a ton of lint errors now according to every Swift I've talked to this has been a nightmare of an update but more importantly they added their own interoperability with languages like C++ Java and JavaScript as well as proper support for web assembly that is really cool like super cool that you could compile Swift to Web Assembly and run Swift code in the browser properly as an official standard this is an interesting embrace of the web i really hope this doesn't mean they're going to go rewrite the Apple Music web app again it's currently in spelt kit i hope they don't try to rewrite it in Swift we'll see where that goes but yeah Interop is cool i'm guessing they were jealous when they saw how good the JSI bridge stuff has gotten in React Native and they wanted to make sure it can go both directions which makes sense because right now a lot of the stuff we're doing in React Native to make it so performant is on the Objective C side so they have to place and catch up now speaking of catching up it looks like they're finally at least starting to improve the flow of using AI tools in Xcode there were some rumors floating around earlier this year that Apple was working with Anthropic on AI coding tools for Xcode so they could like vibe code apps and make changes stuff like think cursor but for Xcode if you know anything about Apple in particular about Xcode you know that it basically just doesn't ever move it's like super super slow to move i have heard some crazy things from internal people at Apple i can't share too much of it because you guys know how annoying Apple is about leaks what I will say to put it simply apparently the current Xcode like code base started from Next the company that was bought by Apple because Steve Jobs started it to build software because Apple software was falling apart so yeah Apple was so bad at software at the time that when they bought NextStep they took the entire dev ecosystem that had been built for the new Steve Jobs comput platform and used that to start the new developer kit for Macs and that's still what they're based on top of to this day it's still full of old broken code from the old Nextstep project and it's there's a couple things in my life that I really really desperately wish would be rewritten the biggest one is most of the Adobe suite but that'll never happen so I'll just keep making fun of them xcode is right up next to them on that list though it's It's rough every time I open Xcode I hate it more and more and it feels like they do too cuz Xcode gets so little love historically Apple's strategy has always been it's okay to be late and I generally think that's a good strategy if hope you guys have heard me say this enough times by now but being early is usually worse than being late if you were super committed that mobile apps are the future of how people are going to use the internet communicate and like experience the world way back like before the iPhone was out you knew mobile was the future so you decide to go all in you're going to give up on building websites you're going to give up on building desktop apps you're going to go all in on mobile you're going to be the world's best Java applet developer for the Nokia endgage and the Blackberry how much better off are you than somebody who started when the iPhone came out or better somebody who started 2 years after the App Store came out 3 years after the iPhone came out you had a five plus year lead on that person but you're still behind because you pick the wrong thing and you have to unlearn that get over it before you can embrace the new thing so usually being late is a pretty good thing but there is such a thing as too late especially in a market that's moving as fast as the AI developer world is i still remember last year when at the GitHub conference they announced that they would allow for claude support inside of C-Pilot and when that happened my thought was "Wow I can't believe GitHub is this late to that i understand why they're doing it but they're so far behind already." That was almost a year ago apple is so behind on the AI race it's insane there are so many stories coming out now about the absurd levels of behind that they are like execs getting ousted and fired and and it really shows when you see the things that they're changing here they almost got like a little bit of what cursor does the biggest change that they introduced with writing code with intelligence in Xcode is that you can bring your own models now apparently the UI for it is really broken and I'm scared to hit play on this video because uh yeah I don't want to get DMCA and Apple is very aggressive with the DMCA trigger finger as I've learned over time and here you can manually add different models apparently you have to copy paste the URL yourself and if you don't know what you're doing you'll do the wrong one i read a lot of people on Reddit who are very confused like is this via MCP no that's not how any of this works you can't set up any custom model provider try Open Route or OpenAI even locally hosted models you're using the wrong URL bud someone who couldn't get it working calling APIthropic yeah because you need to hit the OpenAI compatible URL it's just the whole ecosystem is behind it's no longer just Apple it's the devs that are building on Apple and building with Xcode everyone in that world is just so far removed it hurts a thing I've said a lot because I I think about this too often if you have a spectrum where you have backend devs on one side and we have front-end devs on the other side where do you think mobile developers fit i used to think mobile would fit somewhere between the two because mobile requires you to do things with native technologies you're building into the platform directly calling system code but you're also building a user experience you're trying to make something that users will interact with what I've learned over time is that mobile app devs don't fit between these two they are as far from front end as front end is from back end mobile devs are scared of the word server if you say it too loudly near them their brains shut off mobile devs are the reason why Firebase still exists mobile devs don't like going outside of their bubbles especially the platform that they are on if you want to hear somebody talk just nonstop on Apple go find an Android dev not an Android contributor i actually find the Android contributors are pretty smart and honestly a lot of them use iPhones funny enough but Android mobile app developers they will have some of the most thought out and deluded takes on Apple and vice versa if you ask somebody who spends their life in Xcode about Android they'll either have nothing to say or really bad and stupid things to say i am proud that I don't build mobile apps enough to be in that bucket anymore and I can talk on both because both of those ecosystems are garbage right now android Studio has somehow gotten slightly better than Xcode but that's like a we're measuring two different types of and asking which is shittier at this point they're all so far behind it's hilarious that all said I thought of this spectrum as like a how you think about technologies things like you're scared of servers if you're a mobile dev and whatnot what I've realized is there's also kind of a normal curve here for other stuff and I'll call this the like new tool adoption curve the thing that we care about here is specifically AI new tools technologies languages and whatnot are much more likely to be adopted in the middle here than on the sides what I've seen that's been interesting is like this where the more you go into front end the more willing you are to embrace but as soon as you go into mobile you just don't know what's going on the the amount of mobile devs I've talked to that just don't know anything about like basic editor behaviors and flows or like tab complete in their code tools or even just basic like terminal etiquette it's so common and I think we're seeing that now more than ever because if you take something like an Apple dev not somebody building for Apple but somebody working at Apple I used to think they were still between here too and what I've learned is it's even worse the official Apple engineers are even further along on the spectrum and it's it's bad this is how I genuinely feel about the curve of willingness to adopt new things it's very bad once you go into this world and while it is cool to see Apple finally allowing you to bring other models a feature that literally everything in my life has had now for a longass time it still feels so late and the people who are trying it out are so clueless that I don't know jack about it i can't even try it myself because I'm not going to install the most recent Mac OS beta in order to get the Xcode beta in order to try this which is just so absurd if you think about it that in order for me to try this new feature in Xcode that might make my editing experience better I have to make my entire computer less stable that is such a dated way of thinking it's insane it's that level of like cohesion has historically been a big benefit to Apple because they know the platform really well and they have control of that platform but we're starting to see the cost of that walled garden more and more every day and I think the AI race has really emphasized that speaking of which the new foundations model framework this one hurts one of the things that Apple cares a lot about with AI is making sure that it can run well on your device so that it can be private as soon as you're sending all the data to the cloud in order to do AI stuff the privacy angle is dead and Apple cares a lot about privacy and protecting your data where it makes sense to as such Apple's model development has largely been focused on small models that you can run on your device offline cool except for the fact that these models are really out of date now when they dropped they were okay since then it has gotten terrible and now with the foundation model framework you can access them via the APIs in iOS that part is actually kind of cool because there are way better models you can run locally on your iPhone but those models are often pretty big like one to even like 5 GB and we already have problems with how big the apps on our phones are imagine that we're using I don't know let's say Twitter wants to have a better offline experience so the Twitter app adds their own foundation model inside so like the Twitter app and they decide you know what we want to make sure that Grock works offline so we're going to add Gro 3 Mini or some other local model to the app now you have like 4 GB of local model and you have like 300 megabytes of app now imagine you copy paste this across every  app you have on your phone you end up with the like Call of Duty on Xbox problem where every game is so big you're just out of space immediately and you have to pick between the three of the big 10 games you want to have installed so what if we just share the model across apps apple will never let us do that let's be real here it'd be really cool if you could have the equivalent of something like Olama which if you're not familiar Olama lets you easily install and run different models locally on your computer and then let other apps hook into that Olama instance that you're running on your machine apple will never let you do that on iOS i'm surprised they let us do it on Mac OS honestly but it would be so cool if you could have Ola running on your phone not like always running in the background but as a curated set of different models and then different apps can use them but Apple does not understand the ecosystem well enough to do this so instead they put the Apple foundation models here instead and now apps can call Apple's model directly instead so you can trim this 4 GB of used space not have to include any of that and just hit the foundation model directly the problem is those foundation models are not very good so what all of these apps are going to do instead is they're going to go to the cloud to do the inference so just imagine this as an appdev i'm building Twitter for AI or whatever i'm building a Twitter app and I want to have an AI feature in it my options are one bundle a huge model in my app now my app's going to be like 4 gigs it's way harder for people to install it's way harder to get started with people are going to hesitate to do it in the first place so option one is that we bundle that huge model in the app option two use Apple's foundation models that are already on device this seems really promising except for the fact that those models suck so if the quality of the inference here is like 4 out of 10 the quality of the inference with apples is probably going to be like 2 out of 10 thankfully both of those will cost you no money on inference but the quality of experience for the users and the quality of the generated stuff will go down massively as a result and then we have option three just hit a better LM in the cloud the quality spectrum here is much wider you can pick to an extent that said you now have to eat costs so the quality that you can get here is way higher the amount of footprint on device is way lower you can't run it offline which means you can't use it when your internet connection isn't there or is bad but it will use way less battery on your device but it also costs you money when people do inference but a lot of those options are really cheap now like Flash 2.0 is better than basically any model you can run on your phone and it's hilariously cheap so if these are your options you're going to go with this one over and over and Apple has to make some significant changes if they want us to actually use the phone processor to do our inference because these options suck what would be way cooler apple will never do it but my dream would be that when I install an app there's effectively a registry of different models that my phone can run and if it asks for a specific model my phone doesn't have it it will download it in the background and put it in this like containerized model runtime and then I can call to it when I need it and then those can be shared across different apps i I honestly don't see any other way for Apple to make us run our models on our devices which sucks because Apple has a huge potential win here the most powerful compute that most people have is their iPhone like if you own an iPhone and a computer your iPhone is probably more powerful than the computer unless you bought a recent powerful M series Mac and even then it probably gets updated every four to 5 years i know a lot of people that are on a 5-year-old Mac and a 2-year-old iPhone your iPhone if it's newer is probably faster than your Mac is so for a lot of people the most powerful computer in their life is their phone and it can run really good inference if the right models are being used on it i've seen some crazy stuff happening on mobile platforms with this apple has the best what I would call edge compute network for AI because the edge is in my pocket i have the thing right here that can run compute for models relatively well and in order for them to take advantage of that win they have to fix all of this  and they are just moving far too slow to do that it's just like they're a year behind the slow players right now and I have no idea how or if they will catch up they're too busy trying to fix Siri to do any of this speaking of Apple being super behind on AI they finally explained in an interview why Siri is taking so long to get updated federiki admitted that the first generation architecture that Apple's been developing for the personalized Siri features was too limited which prevented the features from reaching the company's highquality standards by spring of this year Apple decided that it needed to fully shift Siri to a second generation architecture that it had been planning in order for the personalized features to reach a quality level that meets customer expectations that's why they delayed for up to another year reminder that the big thing the guy in charge of Siri did after over a year and a half of work was trim the word hey from hey swword i'm not going to say it because I don't want to trigger your random stuff in your apartment but it's hilarious that it took them that long to just do that change they need to fully upend how this stuff is working there's a joke at Apple right now the team is called a IML and they joke that the team is aimless with a IML capitalized because it's just not going anywhere there's no direction and it's just broken and Apple intelligence is as vague and empty a term as a lot of the old AI hype stuff was back in the day it's kind of funny that it feels like Apple is now bought into the AI hype but they've yet to buy into AI itself which is weird apple normally does the opposite they get into the thing without the hype now they're doing the hype without the thing and it makes me concerned oh also they're copying Raycast too apple Apple Apple breaking news just saw this after filming we'll sneak this in whenever it fits thank my editor for figuring that all out familiar logo it's the same weird logo that came from that GitHub account the strange I had terms for it before i don't remember what they were regardless apparently Apple's planning to phase out Rosetta 2 for those who aren't familiar with Rosetta the original Rosetta was what allowed for the Power PC software built for Macs to work on Intelbased Macs it was a huge part of why they could make that transition obviously a parody on the Rosetta Stone where they can translate between different languages in that case they're translating between different like CPU architectures which is really really cool rosetta 2 was built to allow for us to take those x86 applications and run them on our Apple silicon machines this piece of tech was essential for us being able to make the move from Intel to Apple Silicon and not have every single thing break it was so good when they dropped this and I was blown away that Rosetta worked as well as it did on my M1 Air intel programs on my M1 Air ran as well on that base tier M1 laptop as they did on my maxed out MacBook Pro 16in Intel box that I had gotten earlier the same year it's kind of crazy rosetta 2 isn't just software by the way it's also some really cool things they did on the CPU level in order to simulate specific memory stuff that x86 does that ARM doesn't so that it would run better when you used x86 applications on an Apple silicon Mac they've been maintaining it for a while but I've actually went out of my way on most of my Macs to avoid installing Rosetta for as long as I can because Intel processors use much more energy and run a bit worse than the ARM equivalents if we look at my activity monitor right now and we go to the CPU section we can sort this by the kind and we can see I have some random XPC thing and some synthesizer that are Intel i don't even know what the this is yeah it's all audio toolbox so this is just all for my audio software literally every other process on my computer is running on Apple Silicon so Apple killing Rosetta is scary but it gets way less scary when you realize basically everything's already been ported and they're waiting until 2028 to discontinue it and apparently they're going to keep a subset rosetta was designed to make the transition to Apple Silicon easier and we plan to make it available for the next two major Mac OS releases through Mac OS 27 as a general purpose tool for Intel apps to help developers complete the migration of their apps beyond this time frame we will keep a subset of Rosetta functionality aimed at supporting older unmaintained gaming titles that rely on Intel-based frameworks so it looks like Rosetta will be mostly deprecated and there will just be a little bit left for gaming back compatibility cuz I I don't even want to think about trying to get Direct X games from olden times running without it maybe they're keeping that but this kind of is the end of Intel Max mac OS 26 Tahoe the one they announced at this conference is the last OS update that they will give to Intel Macs and I'm honestly surprised they're even doing that this is that 16-inch MacBook I was talking about i spent like four grand on that thing and it ran worse than my thousand MacBook Air that I got the same year and I'm still mad about that there is cool stuff happening but it's it really feels too little too late and until we see like a real deep dive on unscrewing the state of the AI stuff until Xcode gets like a groundup rewrite or gets unbundled to the point where we can use parts of it in better tools until Apple doesn't have this death grip on how we're supposed to use the platform and stops shaming us for using it in different ways and treating people who use the platform through React Native the same they treat people who use it not at all with Flutter until they stop doing weird stuff like cancing the podcast they normally go on after WWDC because they're scared of being blasted by the public and by the interviewer about the bad decisions they're making for developers until all of this changes it kind of hurts to be a dev building for Apple which is funny because devs still love Apple i'm not going to move off my MacBook anytime soon i did recently try with a framework and as great of a computer as it is I just need Mac OS to do my job it makes my life so much easier still it's hard to fathom what my life would be like without using Apple devices every day but I've never been less interested in using Apple's tools and toolkits to build things for my iPhone i dream of a world where building a mobile app is as easy as it is to build a website and Apple seems still to be just opposed diametrically to that idea i hope they change their mind i hope they wake up to the reality that mobile will die if they're not careful but right now it feels like they're playing catch-up to a thing they don't understand i'm curious how you guys feel about this am I too concerned or is this a real problem let me know what you think and until next time I hope your Xcode files




## Was I Wrong About Rust_ - 20240501
if you've been around for a bit you might have seen my rust videos in the past some about why you shouldn't use it some about why you shouldn't learn it a lot about why I don't think it's the right tool for a lot of JavaScript ecosystem stuff but one of those videos the one I just did actually about turbo repo got some very interesting and honestly Fair responses and rather than just link them and pretend they didn't happen I wanted to actually sit here eat some crap because I was wrong and showcase these awesome responses from these people who know a lot more about rust than I do so without further Ado let's learn a bit about why I was wrong about rust and why go might not be the right choice for a lot of the things that I talk about here the first response is a blog post from my old friend Ivon who was actually an architect when we went to school together transitioned into Cs and is now a way better programmer than me which is crazy but really interesting resource and when he links me something I trust him when he spun up his blog to write something I trust him even more the other thing we'll get to in a bit is a response from Anthony who's on the turbo repo team that actually helped make these changes happen who obviously had some responses so let's dive in Turbo repo rewrite the right Choice well Balancing Act this is a fair starting point there's been a lot of talk about hype driven development lately often targeting the decision to just rewrite it and rust a lot of the criticism about these kinds of decisions comes down to a pretty simple comparison iteration speed versus quality and maintainability these counterpoints are often intertwined and the decision to choose a language is a highly nuanced one that takes into account trade-offs that people external to the development team might not have access to you trying to call me out man Fair critique Fair critique me commenting on technical ision on a team I wasn't part of is very fair and for those who don't know ion's in chat a little LOL sorry yeah I I deserve it thank you while the idea that a feature set along with the speed to Market of a product is often more important than the internal developer experience or long-term attainability of a codebase is attempting preposition it's often not truly the case this is a very fair point as well where I externally am going to be upset about the features and the speed of iteration but there's no way I can know internally what that experience looks like in fact this is a critique I give a lot especially when we're talking about things like Game Dev where Gamers don't know about programming at all and they assume crazy things are just easy like why don't you add four more maps to your game it can't be that hard why don't you just add five new game modes why don't you just support hundreds of players instead of 10 in a Lobby all those types of things are actually really difficult to do and I might have done that here let's dive in and see if I did Theo recently released a video about the turbo repo rewrite from goang to rust in that video he mentioned that the rewrite was not necessarily a great idea I didn't say it wasn't I said I I have reason to believe it isn't because in the first four months of the turbo project it had the same if not better functionality than it does now after spending 15 plus months transitioning it to rust his point is that it's often better to iterate quickly on a product rather than spending time on improving the internal codebase and rewriting a product for minimal improvements in speed or efficiency this is this is a fair way of stating what my belief was and honestly I'm still leaning that way I think the flexibility something that go provides you is not worth the trade-off unless you have a really good reason for it especially since like like the Gap from typescript to go is so big that the Gap from go to rust and capability and functionality is specifically in performance is just not there he has a point there's a lot of history and evidence to back it up there we go thank you Avon the engineering culture for products at companies like meta and Google hold strongly to this belief and many Engineers agree with that sentiment The Lean Startup by Eric RZ praises the idea saying that it's better to get early feedback on a product and iterate quickly rather than optimizing for a future that may not exist when you get there YC's startup school also iterates this in several of their videos and articles they all fair points make a lot of sense when you consider where they're coming from I would go even further with these things I think the the benefit of being flexible is not just that you can move faster and get to the right place faster it's things like responsiveness to critiques and feedback when somebody says hey this thing isn't working some technologies make it easier to reimplement some technologies make it harder to reimplement when it comes to things like contribution a language like rust is going to be a bigger learning curve for me to make a plugin for than something like go it's important to consider agility not just in terms of the team building it and how quickly they can ship the first version but the whole feedback loop and how the community as a whole is involved in it it's not just shipping the product it's so much more back and forth that I think is really important too overall though Fair Way of stating my beliefs here also the Y commentator call out yeah they're really big on this too just ship so many people spend so much time theorizing planning and specking and then never end up shipping anything we're not here to see how Avon agrees we're here to see how he disagrees so how do he disagree well because it's not always that simple for certain products like many web and mobile apps this strategy makes a lot of sense and it's often the right approach when you consider the set of requirements that a project like turbo Revo has other considerations come into Focus turbo is an infrastructure tool according to their website turbo is an incremental Builder and build system optimized for JavaScript and typescript while also being written in Rust planning the development of infrastructure tools often has to consider many different conflicting requirements much like making the impossible decision between availability and consistency when designing distributed systems infrastructure problems must make an impossible decision among requirements for feature iteration API consistency avoidance of undefined behaviors crossplatform stability and much much more often a balance can be struck in complex software systems that nicely solves for most of the requirements but sometimes concessions must be made and something has to give in the case of Turbo repo that something was building a more maintainable system at the expense of development time adding new features and the quick availability of the tool interesting I I think I see where you're going but I would make the argument that infrastructure isn't always a thing that is super stable and focusing on availability and consistency there's a bar that has to be hit here especially in the case of something like turbo where if you do a minor update and your builds stop working that's horrifying and obviously needs to be addressed the other side of this is that infrastructure is a very vague word that has very different meaning depending on where you're saying it and in a place like I don't know JavaScript where double equals means the wrong thing and const doesn't mean a constant the level of flexibility and also the level of churn in the space is so high that keeping up with it is a defining characteristic of good JavaScript tools we just filmed a video about all the crazy stuff happening with react specifically in react native and skia the rendering engine and that level of flexibility and interoperability comes from how these tools were built to work that way my concern was specifically that to keep up with the mess that is Javascript a lot concessions will have to be made and that GES flexibility makes those concessions easier to make whereas a system like rust doesn't like concessions fundamentally rust wants everything to work correctly and once you opt out of the borrow Checker you're writing a weird Syntax for C and that's an important point and I think my concern lies more around that level of flexibility is necessary for these tools to not hold back JavaScript I have a weird example of this point and I'm going to get some for for it because I'm going to talk about another language that's held back JavaScript in the web and it's not one you would expect it's typescript yes my favorite language the one I'm known for advocating for more than anyone else is in a lot of ways holding back web tools and Technologies because now there's this expectation that type safety just exists in the tools and Technologies we use and if somebody makes an alternative to a tool we like that isn't type safe when the one we're using right now is it doesn't necessarily matter how much better that new solution is if it isn't or can't be typ safe the way we expect it to be in typescript there's a lot of ways to do type safety that aren't really compatible with the typescript model either which is an important detail because if you're solving a problem in a way that can be done types safe but typescript doesn't want to support you're out of luck and that sucks that a tool like typescript is actually hampering some of the types of Innovations and solutions people want to build in the space like I know for example the solid JS framework has made a ton of concessions because the solutions they had were way harder to do good type definitions for than other solutions that might look a little more obvious and tactically but are way less flexible and capable this is worth it for the ecosystem win that is type safety in all of our development environments it exponentially decreases the number of stupid bugs we write and the quality of the code that we're writing overall has gone up it's also introduced a ton of build tools and Technologies we need to just make our code run in the first place because you can't run typescript in the browser and it's also limited what we can do with JavaScript and the flexibility we have in that world but that was a trade-off that as a community we decided to make and the majority's over the hump the burden has fallen almost entirely on the maintainers and as someone who has built a lot of apps with typescript and a small number of packages with typescript I'm telling you guys app development is way easier with typescript Library Dev comically harder comically harder I bring this up here because right now the rust rewrite of Turbo repo as well as the rust implementation of Turbo pack are building around existing expectations around these tools and Technologies all of these things have the specific goal of taking the solutions that we have now and making them way faster it's going to take way more effort let's say theoretically it takes and this is a an intentionally low number let's say it theoretically takes three times more effort to rewrite webpack in Rust than it took to initially write it in JavaScript in the first place the problem here isn't that it took three times longer because if you're willing to invest the time and money to do that awesome A+ do it the issue here is a little more subtle it's that the years of innovation we saw with webpack and with new ways to bundle things like svgs types scrip jsx view all these other things that gets a little more complicated when trying out these new Solutions requires you writing a bunch of rust code especially if you're just a jsd that had an idea for a way to load an asset differently and now you will not get that supported in Turbo pack specifically unless you learn enough rust to build that binding yourself and if that process is slower the result is that certain types of innovation just won't happen because the friction to do it has gotten too high and that a big concern I have with these types of changes is that we've relied on the web ecosystem evolving because the tools we use to build the web ecosystem and the tools we use to work within it have had so much overlap that I could take my JavaScript knowledge and use it to build some tools for webpack and build a plugin and those skills transferred over decently well not great but well enough if I was using turbo pack instead which was all built in Rust the amount of onboarding I have to do before I can even start contributing is insane and I'm concerned about the Innovation we might lose similar to The Innovation that we've lost because of typescript and the writer of the article already respond okay this is definitely fair R development does require a bit of Shifting in thinking but I would argue the shift is net positive I think it's hard to to call it net positive I would say for the individual yes if that individual is able to learn these new patterns become a better Dev as a result awesome but if they don't have the time to do that then the whole ecosystem loses because the thing they wanted to try building doesn't get built because they don't have the ability time or resources necessary to invest in themselves to build this new skill or even just the interest they might not want to learn rust and now whatever they wanted to invent will not happen as a result apparently you have dropped more messages which does not surpris me think you see what I'm saying but you're not sure you agree you think modifying R Cod basis is not as brutal as it seems from the outside I would say this is an interesting point the DX that Russ provides is better than go I would say that the confidence specifically and confidence is an important part of DX that when you type something it's going to do what it says this is one of the reasons I like typescript so much because it's pretty hard to write typescript code that passes your type checks if you have strict enough ones that just straight up bombs when you actually try and run it unless you're doing something obviously wrong with your logic in go it's a little too easy to write code that looks totally fine and just silently fails in terrible ways that I fully agree with but there's also benefits to that level of flexibility that I think aren't fully being accounted for there and also much like infra DX is a a best a vague term is much better in either language depending on what you're building and the context you're building on also very fair Anthony who again Anthony's the person contributing to Turbo repo that's helping do these changes at for cell so he'd have more context than almost anyone here let's go back to this article is actually really good so far I want to be clear I'm not trying to say that every project needs to follow suit nor am I saying that Russ is the best language for every project You're Building full stack regressive web app and need fine graen reactivity you might want to use react and typescript where the back end and front end are tightly coupled I not fine grained reactivity you're going to get a lot of flames from nonreact devs and people aren't in the react World for calling react fine grained it's one hammer reactivity would be the best way of putting it but I get what you're saying here you might want to use re the typt where the back end and front end are tightly coupled yeah thank you for the showout don't appreciate it T3 stack for life it's maybe not the best place for a language like rust or Zig or go we building a tool that's going to be used by many hundreds of thousands or even millions of machines across many projects where a developer might not have the latest version because let's be real we all forget to update sometimes also a fair point stability is extremely important breaking apepi changes cost a lot of money time frustration and can lead to massive churn so often after an architectural decision has been made even if it's found to be substandard projects need to stay the course oh no I'm having having realizations I don't like the the way to offset goes inherently less stable outputs is unit tests the only way for go to even come close to a rust code base in stability is to write a shitload of tests and in order for my stance to hold here I have to come out as more Pro unit test and on one hand my frustration with rust and how bad its compile times are and how much it slows down development is now conflicting with my deep disdain of unit testing and I am thankful I don't have to resolve this conflict and I'm going to leave it to y'all to do instead we've seen this in so many cases for example in the case of rust's async model even after all the time spent on it there are architectural changes that could have been made that would have prevented a lot of headaches according to the boats I'm just assuming he's a rust contributor let me know if I'm wrong with that so this is a shout out that Avon made about the crazy history of async and rust which uh if you've heard primagen shout Tokyo enough times you know is not as simple as one might want it to be I'm not saying async and go is perfect in fact quite the opposite I think the channel axioms are straight up brain dead but it's a little bit easier just a little bit easier to do ion s a great article about how async does and doesn't work in Rust if you want to check this out very useful to get an idea of how blocking non-blocking code behaves in the language and also good old Tokyo shout out everyone's favorite I'm happy ion pretty much entirely agrees with me on all of these points as per usual when you take specific words out of context for a thing it can sound like you disagree with something when you actually don't and as per usual Von and I are almost entirely aligned I just went a little two balls to the wall saying rust is the wrong choice and he went a tiny bit two balls to the wall saying it is the right choice where I think reality is simply what does your team need and also more importantly what does your team want according to boats the intention was that users writing normal async rust would never have to deal with the pin type at all but there have been notable exceptions almost all of these would be fixable with some syntax improvements one such exception that's really bad is that you need to pin a future trait object to await it this was an unforced error that would now be a breaking change to fix yeah I will say more languages need to be willing to do breaking changes in general and this is definitely one of those cases I would be hyped if Russ did a breaking change and overhauled their async stuff I will argue in terms of unforced error I think we're too used to the browser model of compatibility where like breaking changes to JavaScript are bad because you have no control over how JavaScript runs on different platforms if all JavaScript was compiled like as a guarantee then we'd be able to introduce new features more effectively and we' be able to deprecate old ways of doing things but since that's not the case and since browsers can be using any of many different versions of Javas with any of many different weird quirks and behaviors and since all of these are separate parties that are implementing it entirely independently it's basically impossible to deprecate things in JavaScript that's not the case if you own everything if you own the runtime the compiler the binaries the ecosystem you can just do a major version bump and fix these things just do it make it a happyish path to get out of these problems but you can you can solve this I don't like that this being a breaking change means they won't fix it I want to look at the syntax a little bit though do they have examples in here no I don't know rust well enough to actually showcase source code about the Asing stuff and not just look like a dumbass so I'm going to skip that part and let the viewer if they want go research it further rust by the way full disclosure I'm a rust Dev who's been using the language and production systems for several years but even though Russ is my language of choice my company is built on next in typescript with only some critical components written rust why because like I mentioned at the top of the article iteration speed does matter and in our case given our requirements we need early feedback and short iteration Cycles this is the piece I felt like was missed earlier hope you call that out here iteration Cycles the ability to make changes really effectively and meaningfully super important the interesting thing about the turbo repo case is that even though go is a sufficiently powerful language the expressiveness of rust enabled the team to model their required behaviors in a much more maintainable and consistent manner one of the albeit small examples they mentioned in their blog post is the model of the package graph and in the go implantation package names in the workspace route were stored as strings the workspace route was designated as a magic string of double slash and all subd directories were modeled in relation to that magic string in the rust implementation package names in the workspace route are modeled as an enum rust's enum type provides a powerful pattern matching mechanism that allows them to Define separate variants for the workspace route and for subdirectories this is a nice example where route should be treated differently and it ideally should be typed differently as such as they go on to say not only is this more efficient it also ensures correctness rust enum types greatly facilitate maintainability and modeling this sort of thing is super easy to read and understand I believe that for Turbo efficiency and correctness are some of the more important requirements I will say that uh seeing enums greatly facilitate maintainability as a typescript Dev is kind of funny because uh yeah enums and typescript do not make things more maintainable they they make subtle bugs much easier to commit so uh it's nice to see other languages I should say most other languages use enums correctly before we go into the other considerations I think I think this is a good point to bounce over to Anthony's response because this includes a bit of it but I want to show the whole thing slack made this very hard to do because slack makes most things harder than they should be that's just kind of the nature of slack so uh we'll be doing our best to read a bunch of screenshots here I am sorry in advance this is again a message from Anthony the guy who made a lot of these changes over at versell I think he has really good context here and kind of shut down some of the dumb things I said in my video yo I know I mentioned some of the story on why we slowed down during the rust Port while we were talking more followup here so you caught the whole scoop and then he said you already recorded but in case it helps I did and I published and now I have to talk about 1.7 was the first release with rust in it and looking back at release dates things were slightly slower during the porting window but not by much kind of had to squint to see it first point here is that there was important features in every single release during the port it was important to us that we kept delivering value during this port and the reason that we accepted a ton of difficulty there were easier ways to go about it but we picked the ones that let us keep releasing the features that people wanted the last leg from 1.10 to 1.11 is the six-month Gap o like I said there was a ton of Parental leaves during that time and it was the most difficult part that's also very fair something I hadn't properly considered in the past is that when a team has multiple people leaving because they're suddenly parents at the same time that's going to cause slowdown and that slowdown probably accounts for way more of the pacing changes that I saw than anything with the language changes important call outs really unfortunate timing as far as software is concerned but glad the parents got the time yep absolutely never want to shame a parent from wanting to spend time with their kids even if it means that my JavaScript doesn't get built quite as fast absolutely had some mistakes in execution that slowed things down it is what it is extremely difficult to get stuff right yep there were some feature deprioritization choices that we made specifically because we knew that they were going to be so good in Rust in cheeks and go this is also a very interesting point that there was features they didn't want to implement when they were still on go and they were waiting to have the rust build first and foremost so that they could build it on top of rust instead it' be a way less miserable experience we could have shipped more things but consciously didn't thinking more long term so we got the arch and the Vim by the way the featur slated for the next couple months should be massive including a brand new Tui that will blow the doors off of what we currently have terminal UI by the way if you do a rust don't ship narrative it might look kind of funny after the stuff that's going to come in the next few releases please for the love of God make me look funny I really want turbo repo to more and I want turbo pack to work so I would I please make me look funny here I've just been waiting for a long time for these things to improve specifically for Turbo pack to be viable so uh yeah prove me wrong the amount of bugs being reported has gone down dramatically and when they come in they get fixed so much faster and without producing more bugs this is the point that was so big to me that I really wanted to make this video when I read this ball point I was like okay fine if they honestly believe that they're able to identify and fix bugs significantly faster and the number of bugs they're shipping has gone down fair I can't talk about that period good that is awesome to hear the last part is a stark difference from go for our use case we played a lot of wack-a-mole yeah the one part I would counter here is that the second implementation of something's always going to be significantly better and easier to maintain because of everything you've learned in your case it was also weird because there was lots of behaviors in go that you couldn't just replace in Rust you had to reimplement in order for backwards compatibility so even though you had the knowledge of building this before helping you build it more effectively the new time you also had the cost of having to implement those weird behaviors from the past two I don't know how well it balanced out but you absolutely benefit from rewriting a thing so much so that you will have code that's easier to maintain and debug and work with because you don't make the mistakes you made the first time because you know about them and you can dodge them now as someone who's rebuilt a lot of things a lot of times yeah Anthony actually just replied to that point saying this is something he thought about after he sent the message attempt two is better 99% of the time very true yep cool we agree there we honestly got a little worried that people stopped using turboo because issue reports dropped off a cliff but a quick check of npm downloads and Community Trends proved otherwise pretty cool to see it's crazy that the number of going down was so big that you were concerned there was less usage again that's a thing that happens over time with stability but I understand the concern so yeah all in all looking back at it for my seat 95% win trying to not sound like an apologist if it would have went terrible I'd be the first to say it but hopefully some pockets of context there you probably wouldn't have otherwise yes it's also context that my audience would have otherwise so thank you for giving it it is actually very very valuable I want to make sure this is reported on fairly I just want my build tools to be faster and uh I'm seeing all effort where people are talking about the languages they're using for these tools and not about the features they're adding to them and I'll be honest I feel like I've heard more rust by the way from the turbo team than I've heard here are the cool new features that we're adding to these things by the way that's where my concern comes from is this deep-seated feeling of why are they talking about programming languages so much I just want my JavaScript to build faster this is a good point from n or nran hope pronounce that right quicker bug fixing could be thanks to the source of Truth being in types and rust where it's spread out through unit test and docs in a go- codee base yes source of Truth being contained is a really important thing for fixing stuff funny enough this is one of the reasons I like Tailwind so much I know it's weird to go in the Tailwind direction we're talking about rust but hear me out for a second with Tailwind your styles are almost always right where the thing that is having a problem is because your styles are inlined inside of your components in your UI layer that relationship makes it way easier to identify where an issue is happening and fix it the amount of steps and places I'd have to go to debug weird CSS issues before I started using Tailwind was one of the reasons I hated CSS I had so many crazy issues where things would work in Dev and not in production because the order that Styles came in was so fundamentally different sometimes where certain Styles would load faster in the production build other ones would load faster in the dev build in the order they load in changes the way that they apply these places that are spread out like that are different sources of truth that I have to mentally organized before I can fix the problem that I'm seeing with Tailwind I just go there and I fix it if the source of Truth for go is between your unit tests your docks and an Arcane history of poll requests and things people have reported in the past that's a lot harder to fix whereas you're using rust and your expectations are encoded in the type system you probably don't have to to go as far from that thing in order to fix it and as per always we get the sounds like spaghetti comment spaghetti is a very efficient way to eat compared to having a bowl of water some flour and a bunch of other random stuff on the side if I had to choose between eating spaghetti and eating a bunch of flour and water because it's all spaghetti on the inside like no you I'm going to eat the spaghetti yeah I I I will never like these comments and it's funny to think that you could flip my last Tailwind drama video to be about rust and it kind of makes sense here the other issue with this all though which I'm sure we'll get into someh in this article is the fundamental reality of that once you've encoded things that tightly sweeping changes are more difficult like with Tailwind if you wanted to fundamentally change the look of your site if you wanted to do a from the ground up restyling of your site you don't have one CSS file you can go make changes to to do that because the CSS is so deeply intertwined with the markup I think those types of sitewide rebrands are nonsense and leave more problems than they solve but this is also kind of the case with rust where if you build something in Rust and it turns out you want to fundamentally change like the API or the behaviors or the way we expect it to work it's usually more efficient to just start from scratch than it is to slightly change things over time where with go it's flexible enough or even JavaScript or old school CSS all these things are flexible enough that you can pick one part tear it to shreds plug it in have some bugs fix them and then move on with life that is not the case with rust at all and you can ask anybody even primagen about the misery that is rethinking a structure of a rust code base because the type system so deeply defines the expectations and the behavior of things that when those things change you're just kind of  there are other considerations that I don't want to go into in fear of an overly long post but they're detailed here ffi with languages like go can be pretty difficult Go's concurrency model in green threading makes concurrency simple when working within the language but it's harder to manage across inter language communication this is by Design you can call C from go but it's much harder to call go from C soti what we have Zig for to just messily compile everything together so we can call it to and from and mostly joking this is a fair point like go kind of assumes it is the bottom of your stack and that you're not going to be calling things like that this is a fair crique and I'm surprised that only Zig seems to be really focused on making this balance work out although again go has concurrency issues too which I I won't dig into check out faster than lime's blog post about go if you want to see the problems there the abstraction layers that go provides over system calls are convenient but for a bundler and build systems like turbo lowlevel control over things like the threading model and other system functions is important not to rust all over you but CFG attributes make platform dependent compilation much more maintainable and the code separation much more understandable this's another Fair Point most most most Technologies don't Target Windows great I know zig's a bit rough there I know Go's a decent bit rough there like it works but it's not great rust I've heard has a much better overall window story so having platform dependent stuff built into the language to make it easier to compile these specific platforms that's a that's a good win and I can see why when Turbo's trying to Target every platform those things are important garbage collection is a wonderful sneaky double-edge sword go occupies a space where avoiding the GC is a bit conduted requiring Manual minimization of Heap allocations I don't think this point is particularly valid here I think for long running services and systems garbage collection absolutely can slow things down Discord made the switch from go to rust in 2020 and a big part of it was the garbage collection issues they were seeing where they would have these crazy CPU spikes because garbage collection was happening and those spikes would happen unlik a timer effectively causing responsiveness to go down terribly since then go has significantly improved their garbage collection and how it is managed it's way smarter so I would expect if you just took their old code and threw it and go instead that it would probably be fine at this point not great but significantly less chaotic here but if you really want to optimize for every response consistently not not the right language but when you're talking about a build tool that runs for a fixed amount of time and an individual Spike isn't a big deal for I really don't think garbage collection benefits compilers at all in fact to go back to the point I keep hammering on about here having to optimize for those types of things is taking time away from other more important things like in this case having good concurrency where things interoperate well and using all of your cores is significantly more important than how you allocate and deallocate memory because in this case we have a ton of files as our input we want to make a compiled smaller bundle as our output that's not a case where memory isn't thing you should be worried about that much and if it is youve probably screwed up something else oh boy a z Point enough yapping about go what about Zig well although bun is written in Zig and doing phenomenally I might add yeah bun is consistently impressing me I'm still surprised that how much I've been able to adopt it long tangent anyways zig's still only at version 0.11 bun is making a juggernaut bet on the stability of the API in the progress of the language yes in fact there are concerns On the Bun side of accidentally bullying Zig into certain directions and trying to find the right balance of letting Zig be its own thing separately and also making sure the design decisions and changes they make to Zig don't hurt the biggest Zig user by far which is fun interesting balance to figure out there Zig version 0.12 introduces many Breaking changes including overhauls of the standard Library zig's async features have also regressed they are not present in version 0.11 and likely will not be present in 0.12 either I love Zig it's one of my favorite languages but it is nevertheless a risk I would absolutely agree Zig is a way riskier bet than any of the other tools we're talking about here go typescript rust Java zig's a bet it depends depending on how you're using it that could be more or less risky like the way Uber used Zig or the way turbo repo used Zig as a compiler layer that isn't something you to worry about changing too much and you can stay on an old version for a while and be fine it it's just a nice to have wi to improve your interop story and you're not actually using ziggs API and language that much you're probably not going to be affected that much but if you are writing everything in Zig and they make significant changes you might be but as Ivon just said in chat zig's compiler is unparalleled yes and as Anthony just said they only used the zig binding for a couple months and now they're fully exited from it it's really cool it's also unparalleled does it run parallel though or does it have to be single threaded hopefully it runs a parallel anyways conclusion the point I'm trying to make in this long-winded post is this in some cases I think the turbo example is one of them error avoidance and explicit Behavior modeling are the driving Factor behind architectural or language decisions another tangential semi unrelated but still important Point here is that language Choice has an effect on developer experience when working on a project rust is fun to write and working in a language you enjoy makes a project more rewarding to work on I have not experienced the joy of rust but I absolutely know this is a point that a lot of people make and I can't doubt it just because I've seen so much of it what I can say with confidence is that I've never enjoyed myself writing go I've written enough go to confidently say it's not a language I will ever enjoy but it works it is easy to work in and it's really easy to code review so those are the the differences there is go trades fun for consist Y and simplicity it doesn't make you feel smart whereas rust absolutely makes you feel smart but it also comes at the cost of you having to get smart enough to experience that R fun to write and working in a language you enjoy makes a project more rewarding to work on let's be real hyp driven development is a very real thing the Rewritten in Russ phenomenon is funny on Twitter and X but it's also a valid marketing strategy an important point with this too is how much these things hype up the development team something I've learned over my time managing teams is that sometimes you just got to let them go do the stupid thing even if you know it's going to fail because there's a slight chance you're wrong and they are actually faster but more importantly like much more importantly the hype they get from doing that even if it does fail will accelerate your team meaningfully having devs that know you trust them to make those types of decisions even when you disagree letting them invest in these things and invest in themselves and do crazy stuff with it that gets them more hyped and it keeps some of your best talent around because the devs rewriting things in Rust are not lazy Linux neck beards that suck at programming they're some of the most talented developers in the world especially the ones with anime profile pictures those developers are ones you don't want to lose and if letting them waste 3 to 6 months on a rewrite is the way you keep them around for that reason alone it's often worth it I'm not saying Russ is bad at serverless I'm just saying it's worse than JavaScript it's startup times aren't much better especially when you consider some of the things you can do with these new run times especially when you consider things like Edge run times and what cloud flare is doing it's just the state of the ecosystem for JavaScript and the speed at which things going to respond is insane if the primary cost of your response times is the code you're running rust will absolutely be a win but if your goal is to get a response to a user as fast as possible and more of the time is spent on the cold start than it is on the actual time to generate a response which is the case for a lot of the use cases for serverless JavaScript often ends up being significantly better the main idea I wanted to leave you with is that choice of a language tool architecture Etc is a highly nuanced topic I don't think there's really a perfectly right answer engineering teams need to carefully assess requirements and make decisions according to the Project's needs and long-term viability no one can prescribe when and where to use any language every Software System is different and comes with its own unique set of challenges that's part of the fun of it all I actually don't necessarily agree with this takeaway I hope that the point people took from my last video wasn't rewrite your rust code and go because that was never the point my point was much more specific it was that doing these rewrites is rarely worth it and you need really good reasons to justify it I think the best language for the job is almost always the one that the team's already familiar with and if it isn't then the next best language is the one that solves the problems you had with the first one that is the most similar to the one they're already familiar with and I think that's why I disagree with this so much because if we're talking about absolutes like what is the perfect language to solve this problem with cool A+ like that's a a fun nerdy conversation to have but the goal of my video wasn't so much to say rust is wrong go is right the point was more to say I don't see the value of everyone rewriting everything in specifically rust right now especially when we're seeing success with go rewrites instead where rethinking our build tools like Babble with something like es build written by one dude and go in a couple weeks it feels like we've been trying to catch up with where es build was a month into development for years now in the rust world and my concern was never that go is Right rust is wrong we should all be writing and go it was more so that I felt like we were chasing this Dragon of the perfect language and that's the specific thing I wanted to fight against is the point that's being made here I know this isn't about me in my video specifically but I don't like the idea that we should be seeking the perfect solution to our problem I think when the solution we have now starts causing different problems that's the point to move off and the specific point I was trying to make before was that javascript's obviously the wrong tool for the job because it's causing our builds to be way slower than they should be especially if you're still using webpack in the year of 2024 I so sorry moving off it required something faster not the fastest solution it required something maintainable not the most maintainable solution it required something familiar but not perfectly familiar and I think go was a really good compromise that we skipped past was the specific argument I was trying to make overall though this is a great article that really showcases why rust would be a good decision for these things again assuming the team wants it if you're a team that is currently stuck in go wants to use rust and has actual benefits that you get from it like when Anthony cited that there were features that were easier to work on in Rust that and go or that they've had a significant shrinkage of the number of issues they're seeing opened those are real benefits that if those are problems your team is suffering from and they want to use rust makes a ton of sense my argument is simply that you shouldn't jump languages for the sake of it you should do it with a reason in mind and if the reason is so that the devs are happier cool but you need to say that part up front and I simply have concerns that we've went too far in the rust Direction because the place we were at before of everything's in JavaScript was terrible terrible terrible terrible there's so many things written in JS that shouldn't be and I'm saying this is a JS Andy but the solution there isn't to fully escape and go to the other side of the spectrum it's to take steps out of where you currently are until your problem is solved there's no such thing as perfect and I'm tired of us pursuing it I just want things to be better and as much as I have on go I do think it is a lot better for a lot of these types of solutions I think that summarizes my point here pretty well I don't think rust is is terrible language in fact I actually think go is a worse language than Russ don't don't tell anybody certainly not mky but uh Point here is more I think we went too far all at once and I want to make sure that the teams make decisions based on what they want and need and the problems they have so if you really want to use rust absolutely do it I'm just sad that it feels like the web ecosystem is moving slower because of it please please please please prove me wrong I would love to see all of these rust projects start shipping way faster and for all of us to have rust in our build chains for our JS but right now I still find myself relying a little bit more On Tools built on go than I do finding myself using tools built on Rust that's all I've to say on this one until next time peace NS




## Was Porting To Rust A Mistake_ - 20240320
finishing turbo repo's migration from go to rust this is going to be a fun one guys because turbo repo is a JavaScript tool chain that was originally written in go is now written in Rust and used Zig as a tool to get there this experience has been nuts this is not the first blog post about it in fact we'll be referencing the other ones throughout I know I'm not the go or rust guy but I do think I have a lot of unique context here because I know a ton about the history of Turbo repo as well as how it's used even if I don't fully understand the language of rust and I pretend to understand the language of go I understand what the goals are here so this will be fun espe espe with my recent spicy take that rust is probably not the right tool for a lot of JavaScript developer tools I think the language we pick for these things matters more than it ever has before but yeah here in particular it's going to be fun so we finished porting turbo repo the high performance JavaScript and typescript build system from go to rust this lays the groundwork for better performance improved stability and Powerful new features it's interesting to call Turbo repo a JavaScript and typescript build system it's more a repo management tool but we'll see where this goes God to love the Acme references for those that don't know AC is like the default company or big example thing that people use as a name for template projects and so fun to see them fully committed to that also funny that the site is in next the dashboards in spelt in posts or their blog is in next as the example fully embracing other Frameworks and even their placeholder images here's how we finished this port and shipped the first all rust version of Turbo since the last time at the end of our previous post we had completed the rust go rust sandwich or go sandwich for short and shipped it with some help from Zig the sandwich allowed us to keep incrementally porting pieces of Turbo repo since then we've ported more components such as the file hashing which is Turbo repo's mechanism for creating a fingerprint of the content in your repo to make cash comparisons fast this is really important if you're not familiar with turbo what this effectively lets happen is if you have a package inside of your monor repo that none of the files have changed in and none of its dependency packages files have changed either then you can skip running the build step and just give you the cached out a huge part of why turbo repo is so cool is the amount of time that gets saved by those optimizations so here is the amount of compute save this isn't just like server compute this is specifically the experience that individual devs have had saving time on their machines that's 2 million hours saved for comparison here is the life of my channel we've had 2.6 million watch hours total there are little days they missed but none of those are relevant for me cuz I only started posting in like April of 201 22 for real so like yeah 2.6 million watch hours on a channel that's pretty big almost 30 million views 2.3 million hours saved there has been roughly as much time spent watching my videos as turbo repo has saved in time running Builds on your computer that's a pretty cool metric but of course in order to actually do that you have to check the files and make sure the hashes are not different because if they are you have to rerun the steps so doing that check quickly and efficiently is a fun challenge that they've Rewritten in Rust it's actually kind of funny it's one of the final things they rewrote in Rust that was in go originally talk about why in a bit they also mentioned the lock file analysis which is checking the dependencies in your repository so that turbo can account for that as well as cach signature verification in order to make sure the cache that you're running and downloading locally is the same as the one you posted in the past which you can do by adding your own private keys to Hash those checks cool stuff and also nice to see all of this is in Rust I want to touch a little bit on the zig incremental piece here because it is very very interesting first off because they have to compile to six different platforms just for reference of the hell this team is going through there's a section dedicated to Windows arm Because the actual things that Windows arm supports are so limited that they didn't know which ones would or wouldn't actually work and what they ended up learning is that Go's use of MW conflicted with rust's use of msvc on arm and because of that they couldn't link the languages together the solution was to use Windows built in X8 664 emulation which if you've ever used this on an arm Windows computer you know it's nothing compared to Rosetta on Mac it's it's and they had to do this and eat a massive potential performance issue in order to get this hybrid solution working which means that Windows arm users probably had much worse performance overall as they were porting over to rust the final result might be slightly better but in the interim utter insanity and hacks and this utter chaos is why something like Zig had to come in specifically zig's compiler the zig CC which is not an ordinary C compiler it's a c compiler that is easy outof the Box support for cross compilation it also crazy comp time stuff where you can have the compiler generate Dynamic code as you're compiling which unlocks insane amounts of cool features and functionality but the point here is the cross compilation enabled a lot of the specific behaviors they wanted to implement on these different platforms they call it here cross compilation in C is quite painful requiring installing a compiler for a specific Target or building it from Source finding versions of libraries for that Target platform and writing a lot of compiler Flag Magic erasing all of these concerns practically made us jump with joy Zig CC even comes with a nice long list of targets that it handles out of the box with bundled libraries including you guessed it all of the targets they needed to build there are some skepticism how would we use Zig and go and rust would that just be too much programmer hipster them would Hacker News and developer Twitter judge us too harshly who cares about them we're talking about my audience let them know in the comments how harsh you feel about them combining all of the spicy hot new languages in the same project as a temporary measure but yeah they called out it worked they had to do some weird linking stuff in order to get these things bound together but as a result they had the ability to build one code base that interfaced with old go code and new rust code with Zig is the compiler glue pulling it all together wild stuff this blog post is particularly nuts if you want to dig into what they're doing and why and all the platforms they have to Target pretty cool stuff overall including the breakdown of the go sandwich in short it consists of a rust binary that calls a go binary which in turn calls rust libraries that are statically linked in the go binary so rust exist outside calls the go binary which then has rust embedded within it because there was no easy way to embed go within rust so the go is in between these two layers I happy this isn't my job so what were the issues let's hear the limitations of the GH sandwich as we completed these components we started to realize the limit of what the sandwich could handle for example mixing a synchronous multi-threaded code across languages wasn't going to be viable the ghost sandwich got us to this point but with so much of our new code now moved to rust the sandwich had fulfilled its purpose therefore we decided to build what we called the Run outline an all rust version of our run command with most of the fun ality stubbed out replaced with a fake simple version We gated this behind a feature flag so we could build on our local versions but not ship to users just yet it was the time to complete the switch to all rust building the package graph the first big piece we added to our run outline was the package graph the package graph is a graph data structure of all the packages in your turbo repo where the graphs nodes are your packages and the edges are the dependencies and relationships between them this allows us to deeply understand your monor repo and cach work so you never have to do it twice when we ported the package graph we noticed that rust's features allowed us to build better types that more accurately model your repository not only does it allow you to do that it Brute Forces you to because rust is so strict with its types for example in go we designated the workspace route where your lock file lives with a magic string nice little comment package names were stored as strings so to check the workspace route we checked if the name was equal to the double slash in Rust we were able to model this as an enum enims in Rust allow you to create a type that could be one of multiple values in this case our package name could be either the root package or a different package with a name we can model this as root or other string interesting not only is this more efficient it also ensures correctness whenever a package name is used in the rust code we have to handle the workspace root case or the compiler will complain in go it was a lot more tempting to use strings and handle cases in an ad hoc manner leaving more room for error yeah understandable the prune command when the package graph is completed we are ready to tackle the all rust version of prune the prune command lets you remove everything from your turbo repo except a single package and dependencies if you run turbo prune web app you'll create an out folder with only the code and the dependencies for the web application so if we have these two root level packages the A and the B A depends on these things but not these but then when you run the prune a command it will remove all the things that only B needs this is particularly useful for building Docker images when you'd like to keep the size of your image small we're also excited about building functionality on top of this command like using pruned lock files to only install the dependencies for the application that you care about fortunately we've already ported most of the lock file code via the sandwich so it was just a matter of connecting our existing pieces if you look at this poll request we were able to merge prune with relatively little iteration this is because the ghost sandwich had allowed us to build up the rust dependencies and test them in our existing go code makes sense hashing tasks for the Run command once we had completed prune we reached one of the core pieces of Turbo hashing hashing is what allows turbo REO to determine whether you have to run a task already again this is where all the huge performance wins come from is knowing whether or not you have to rerun something something based on if its inputs have changed or not in fact other languages like I don't know rust could benefit a lot from this because rust compile times are because it recompiles everything always you can't even install a binary from the crates world you have to install the source code and then recompile it whenever you want to compile something in since rust do so many deep checks in his compilation steps good luck with the performance on those in fact I've heard from many sources including versel themselves the performance of compiling next of compiling turbo repo of compiling swc and all of these other things they're building around has gotten significantly worse as a result of adopting rust with the goal being that adoption of rust slowing them down so it can speed us up as we're just compiling JavaScript in the future interesting goals regardless funny to me that rust is being used to make compile times in JavaScript faster even though rust's compile times are utter so what is hashing I feel like we know what hashing is but let's take a read a hashing algorithm takes some data and produces a single value known as a hash with a very high degree of probability these hashes will be unique to the input data you end up with a fingerprint of your data that can be quickly compared to other fingerprints this is advantageous since hashes can be created quickly and are easy to compare against each other hashing shows up in a lot of different places whether it's mapping keys to values in a map efficiently storing different versions of your code and git or safely storing passwords the case of Turbo it's seeing if a file changed or not they use it to implement their cache when you use turbo run turbo takes all of the different inputs that go into building your packages like source code environment variables and dependencies and sends them through the hashing algorithm there's also a fun call out if you're not deep in the monor repo world and the caching behaviors here environment variables are a really really important piece of how this caching works because a lot of these environment variables get compiled into your code like for example if you have next public environment variables in a next app when you compile that those next public flagged environment variables end up in the front-end code that your users are downloading and running so if those change then your code output has changed too when you run your build step so if you're only caching based on the code that's input and not the environment variable change you might download a cached version of this build that has the wrong environment variables baked into it that said now if two different team members have slightly different environment variables you can't share a cash anymore so this is it's a fun balancing act that we've learned a lot about in the results for a while and I think this is still the case is that you have to explicitly call out which environment variables don't affect the cach when you're using turbo repo anyways they solve this problem at two levels first at the global level they produce a hash that determines if you've changed something that affects the entire repo this is for things in like your config core packages that are being used global environment variables stuff like that and on this other level they also create many task hashes to determine if you've changed something for a specific task the global hash is included in calculating these hashes so it can potentially change all of them good to know to use these hashes for your cache we store outputs of your task in a tar file a special file that compresses an entire folder into one file we store that file in both the local system and in the versell remote cache indexed by the task cache you can also use your own caches there's a bunch of documentation on how to cach your remote turbo stuff yourself but the versel stuff is I believe effectively free it's so cheap and I just use that when it comes time to run a task we first produce the task cache and check if it's in either the file system or the remote cache if it is we restore the task output in milliseconds otherwise we run the task and store the outputs in the cache file for next time ensuring hash stability while porting run and prune oh boy that's a fun point if they have to Port these things over they want to make sure the caches from the Go version still work in the rust version doesn't make sense for Turbo repo users to miss cach just because the language that was used to write the tool changed under the hood they had to prioritize stability to keep as stable we turned to and Proto a crossplatform cross language serialization format that is defined bite for bite more importantly though this library has great support for both go and rust so they could use it in both after refactoring our hashing code to use cap and Proto for both rust and go we set up our CI to run our tasks on both code paths and compare the two hashes they ever diverged our CI would fail and we would need to make some fixes reaching the Finish Line when we started running the hash comparison code we weren't surprised to find we had bugs some were minor like ensuring null values contributed to the hash correctly however some bugs were more foundational like detecting which packages had changes or handling the filter flag so you only had to do the work you were looking for we're glad to see our approach payoff here as these would have been incredibly difficult bugs to find otherwise in the end we were able to validate that our rust hashing code was working and match the go Behavior which importantly has to perfectly exactly match overall this approach really paid off for us we found a lot of bugs that otherwise we would have struggled to find we were able to validate our code was working and match the go behaviors dog fooding our way to a release this is something I don't think forel gets enough credit for they dog food so hard they're regularly shipping things that are fundamentally broken and just never make it to users because they want to deeply understand all of these things at this point we had ported enough code to run our tasks in our own CI behind an experimental rust code path flag we began running our integration tests on the rust code path and burning down the test failures until we match the Go version log line for log line output for output once all of the tests were passing we published a canary version and we used it in vel's internal mono repo once we reached 72 hours of no errors we shipped version 1.11 of Turbo repo which is again a rewrite effectively in a new language looking back this port was a major success we managed to Port 70k lines of go to rust in 15 months with minimal disruption to users our porting strategies such as the rust shim and the ghost sandwich allowed us to incrementally port code for as long as possible with that said there are probably a few things we would have done differently with our new found knowledge like invest in a single serialization format from the start makes sense shipping each porting strategy faster we waited a little too long to figure out our release strategy for the rust shim and the ghost sandwich this meant that there were times where we had ported code which we could not ship due to release management bugs if we had shipped an absolutely minimal version of each porting strategy as early as possible we wouldn't have had these issues there's other things I'll be talking about I I have so many controversial takes I just wanted to read through this first and then we'll go into my thoughts point three here is that we've realized the importance of code quality before porting by and large our go code was in a good state with Comprehensive testing and fairly straightforward architecture however we came in thinking that we could refactor while porting but that turned out to not be the case looking back we might have been able to Port faster had we improved our testing story and removed some bloat from the go code before starting the final Point here is they could have fully specified the core turbo repo behaviors like globbing file watching and hashing earlier we discovered many cases during the port where it wasn't clear whether some Behavior was accidental or intentional in the go code it would have helped to uncover these undocumented and untested scenarios that are now codified in Rust we also could have solidified our crossplatform support specifically for our Windows testing this is a fun one because if you guys don't know the history of Turbo Jared Palmer was the main Creator and developer for most of turbo in its early days when turbo repo got acquired by versell he slowly shifted more in the direction of build tools and then soon after Ai and now Jared runs all the AI stuff at versell I don't think he touches turbo at all at this point which is good for him exciting they needed someone to do that but turbo is now kind of being left to be cleaned up by the new team that's taken it over there's a lot of reasons why they can and should adopt new tools and technologies that make more sense for them but part of the pain points here are not knowing which behaviors were actually intentional or not that's never fun having been in that scenario before not great the future of Turbo we're incredibly excited for the future that rust will bring to Turbo repo and turbo pack users we're finding new opportunities every day to create great features ensuring improved stability of your code base and making your CI faster than ever before we're also looking forward to integrating turbo even deeper into the versell ecosystem with the release of conformance and code owners engineering organizations are shipping higher quality code faster even as their code bases scale let's get into my spicy takes because I have a lot of them I want to start by taking a look at the repo for Turbo repo they said what 50,000 lines of rust so they had 70k Lin of go yoink you can tell by the size of this repo that it's been through a lot of different things this is going to be a big project this is before I've even installed anything this is just the Clone yeah we're at 300 Megs at 30% oh boy maybe a little under a gig though let's see how big this is 839 Megs before we've even run the install commands just for the repo that's nuts I want to make sure I'm not including things in dot files looks like they built almost everything in here so I'm just going to Blind do it since I haven't installed anything it should just be the code that is relevant and we have now as a result of these changes 151,000 lines of code that are rust hopefully you guys are going to see the angle I'm about to take they proudly stated they ported 70,000 lines of go to rust over 15 months that means that some of the most talented engineers in the world spent a year and a half roughly rewriting all of their existing functionality with more than twice as much code and they had to invent crazy techniques to do this that we've discussed here that are incredibly impressive they're incredibly impressive I will not downplay the quality of the engineering here at all the issue I have is that in these 15 months no meaningful features were shipped on turbo repo this was time that could have been spent making turbo repo better for the users it's setting them up for a theoretical future where it can be even more better for the users but go wasn't slow here the reason they moved off of go isn't because rust is faster rust being faster is a reason that they can justify it but the reason they move Mo to rust is they wanted to move to rust and I don't think that was the right call I understand especially as a typescript Advocate that loves type systems and the things that they enable that rust is something that people enjoy working in more and having code bases that your team enjoys working in is incredibly important this still sucks so I pointed out that the repo also has turbo pack uh let me make sure I toss that from my check here then uh that would be under crates a really easy way to filter these out shift nice and easy 82,000 lines that or 86,000 lines that's a lot less bad I want to find an old commit they don't squash commit so that's going to be actually quite annoying um let's go to the acquisition time we'll say September of 2022 let's pick some random day cool so they turned 22,000 lines of go code 2 years ago into 880,000 lines of rust code today with almost no new features this is my concern I think rust is a really good thing to adopt if you're engineer want to adopt it and your issues are in performance not features but as one of the heaviest turbo repo users I promise you guys there's work that needs to be done and I'm saying this is somebody versel pays to show their stuff the turbo team has wasted an ungodly amount of time chasing the rust dragon and I could be wrong saying that I would love to see the result of faster iteration once this Baseline is hit but are we turbo yet suggests that it's a slow slow grind the fact that we're 2 years past the point where turbo pack was initially announced as the necessary solution for the next app router stuff in order for the developer experience to be good is kind of horrifying that we're not there yet still I just a few weeks ago got turbo pack running on a pet project not even like a real company code base but the fact that these projects are taking this much time to get right so when you compare to something like es build which was working minutes after it was initially announced like contributors over time like from it initially getting started in January to like working in April es build was good enough in its first four months of Dev which like by the way the first month was where most of the work happened initially and it slowed down because there wasn't too much more necessary despite being that early only four months in and a go project there was still enough for Evan U to adopt it at the same time so in April four months after es build started it was already good enough for V and since then has slaughtered like es Bild won so much of this it is also important to note that uh we go the contributor graph over time the vast majority of contributors are still Evan Wallace but I don't know how much of that is Go versus Evan being a God and a good solid leader here my concern is simply that the amount of value delivered in this short window is absurd and I've never seen that in the rust World it in fact it has taken the incredible rust devs at forel two plus years to even get close to this level of performance and quality that Evan Wallace had working in four months and go this is my concern I feel like the amount of capability experimentation and flexibility that these devs experience and go is exponentially better than the benefits of rust when it comes to making something experimental if we had a perfectly ironed out exact API that we knew exactly what we needed then rust would probably be a great choice but if we're iterating on these things constantly if we're changing what and how they work what the inputs and outputs are expected to be it seems pretty clear just from what I've seen that go is the better choice despite not being one of my favorite languages in fact it's one of the ones I hate writing the most the flexibility and Agility we've seen in the go world with es build and in the zig world with bun seems to not even be close to matched in the rust world where there are a lot of projects that are trying to build useful Dev tools for JavaScript devs in Rust all of them are between 50 and 80% complete the closest thing to complete one is swc and it's still roughly where es build is not even and that's my concern I don't know how much value we're actually going to get from rewriting a go project in Rust rewriting a JavaScript project in Rust like rewriting webpack obviously massive win but how much faster is the rust version of webpack actually going to be than a theoretical Go version that could have been written in 1/4 of the time and that's my issue and this again isn't saying there's any issue with these Engineers or the work that they've done this is incredibly impressive and important work but I would have liked for more time to have been spent on turbo repo not on re writing turbo repo and it's going to be a while before we see the potential wins here I'm sure the devs working on it feel much better about things overall but I want to see real improvements to Turbo because right now I feel like we've been maintaining the exact same experience for the better part of two years and they've made better examples they've made better things around it but turbo repo itself has not improved for me as a user of it in quite a long time and I think that is rust's fault not rust itself but the introduction of Russ to the team in the code base so those are my thoughts I didn't want to just vaguely say this in a video and let it die so I tweeted publicly I specifically think go is the right language for most JavaScript build and Dev tooling implicitly I'm saying not rust but I even explicitly say it here tweeting this now for reference in 3 years when we realized we might have up going all in on Rust I firmly believe we' went too far in the direction of rust because the place we were in in JavaScript was horrible and build Tools in JavaScript are bad I'm not going to even pretend otherwise but just because we're on one side of the spectrum doesn't mean jumping as hard as we can to the other side is the solution to much of anything I think that we could have SP more time in that middle ground and that Evan Wallace was really on to something when he started with goang in es build which if you guys aren't familiar with the history es build kick started this revolution in non-javascript based JavaScript Dev tools so hopefully going forward things will start moving faster because right now I don't think we're moving forward I think we're moving towards rust and we haven't moved forward much since I have not felt a meaningful Improvement in my experience building in compiling JavaScript code since es build happened four years ago now we we went from caring about the performance of our JavaScript tools to caring about using the perfect language for our JavaScript tools and I don't think that shifts been for the better I really hope we see faster progress now that most of these rust rewrites are done but from my experience seeing people who are even deep and excited about the rust community and World iteration does not tend to happen fast here yeah obligatory Elixir plug people are asking about it in chat as a joke but uh yeah Elixir is not good at Native binaries and being crossplatform so that will not make sense here as long as I love that language and I love to work in Elixir based Dev tools not going to happen for a billion reasons Go's probably the right choice here and I you know you all know how much it hurts me to say that I'd much prefer Zig and Zig seems to be a good bet too but this Allin bet on Rust has not been great I think rust makes more sense for the government than it does for JavaScript you can read their post about why here future software in the US government should probably be Memory safe but JavaScript isn't JavaScript is a messy pile of and that is awesome that's why we love JavaScript it should be messy it should be fible it should be stupid in a lot of ways that is what JavaScript is and rust being so strict makes it hard to map correctly to JavaScript behaviors and we're seeing this now it's the same reason we can't make a good typescript compiler that isn't in JavaScript or typescript because those behaviors are so hard to map you might have noticed my outfit just changed that's cuz I filmed that last video on stream a couple weeks ago since then a couple people who were involved both an old friend of mine who's deep in the rust world as well as Anthony Shu the guy behind a lot of these herbo repo changes reached out and gave me a ton of really interesting insights so much so that I think it's worth another video so if you like this one let me know in the comments and I'll be sure to get a followup out from the rust zeits that seem to think I was wrong anyways until next time peace nards




## Was React Native a good idea_ - 20250421
react Native was one of the biggest and boldest bets that Facebook ever made and when it got started I'll admit it was a bit rocky i can see why people were skeptical for the first few years but it's been 10 years since the original release of React Native and man has it progressed unbelievably since sure React Native is not at version 1.0 yet but that hasn't stopped it from being the core powering the entire PlayStation operating system or one of the most fundamental pieces in Windows powering things like you know the start menu it's pretty nuts how far this tech has gotten but how has this affected people actually building with React Native one company Shopify just shared their reports after using React Native for 5 years and there is a lot that we can learn from this i'm super excited to cover all of this with you guys but since neither Shopify nor Facebook are paying me we have to cover the bills quick so quick sponsor break and then we'll get right to it applying apps has never been easier as long as they're using JavaScript they don't have a database they don't have O they don't need a CDN you don't mind running them on a server or you're okay with running them serverless there's so much to think about when you're trying to deploy what if you could just link a GitHub repo and not have to worry about it regardless of the tech that's what today's sponsor Savala is here to do i'm just going to show you my dashboard because I'm still blown away with how easy they make things here's a random app that I deployed it's a Laravel demo but this works just as great with pretty much every other tech i've had a lot of fun playing with it with Elixir works great with Rails too obviously the Noode.js ecosystem is fully supported as well what's cool here though is that I have a dedicated server on the right there that has all of its specs and everything cool awesome makes sense what is that in front of it cloudflare if you're actually just using one cloud you are doing certain things less than ideal almost certainly zavala uses Google Cloud for hosting their servers but Google's offerings for DOS protection and CDNs don't even come close to Cloudflare not even AWS's do so you get the best prices and reliability on the server side with their hosting with GCP but as soon as you need DOS protection CDN's edge caching and all the other really helpful things Cloudflare does they just get put right there right now I just have the DOS protection on but if I want all the static assets from this app to be hosted in Cloudflare instead so that users get way better performance for those assets i click settings I click on that's it now my static assets are static do you know how hard that is to do everywhere else in the world i don't even want to talk about it and don't get me started with the CI process i'm at the point where I don't want to review code if I can't click visit preview i'm just used to that workflow and if I can't see it working I don't trust it works sadly setting up automatic CI to create preview environments and deployments for you on every single pull request is both really hard and really expensive unless you're using Zavala they'll set it up for you automatically with their pipeline workflow and you can just click one button to get a PR build up instantaneously it's so helpful if you're shipping servers and you're tired of dealing with all the work that means check out Savala today at soyv.link/ link/savala and you'll get $50 of free credit added to your account 5 years of React Native at Shopify this is going to be a fun one there's a great post that the CEO of Shopify made about React Native a while back if somebody can find this for me you will be a legend forever quick shout out to Chad Linsky here for finding this particular post that I was I knew existed but has been deleted way back machines back up somebody had replied to an employee at Shopify asking "Why are you doing this with React Native it failed for Airbnb are you only doing this for new products?" To which Toby replied with this classic meme saying "This is Airbnb's mobile team," showing that they were so close to striking diamond and just gave up too early but when asked why Airbnb struggled with React Native why would Shopify ever bet on it when it was so clearly a failure toby replied with that meme he deletes all of his old posts every year or so so that's why we lost this sadly but uh yeah the point here being they've been very defensive of their decision for a while and it went really really well for them if you want to better understand why I think that Airbnb article in most of Airbnb's engineering is utter garbage I have a whole video i think about this article a lot which was my response years later to that awful article by Airbnb in my video made them look bad enough that they actually went back and updated the blog post saying it's super out of date don't reference this anymore yeah 5 years ago we announced that React Native is the future of mobile at Shopify today we're excited to share the progress we've made lessons we've learned and what the future holds to recap we decided to switch to React Native for three main reasons the first point was pretty obvious write it at once stop building the same features twice once for iOS and once for Android point two was talent portability enable devs to work fluently across iOS Android and web this is a really big deal you shouldn't need your product team for a given feature something like you know how do I put it like for Twitch the chat was a team we had a team that just built chat on Twitch you know the fancy thing here people send messages in that was a really hard thing to build but once we had it working on web we had to hire different engineers for iOS and Android to come in and port it to those platforms and those engineers weren't on the chat team they were on the iOS and Android teams they might have had a title that said chat engineer but they really were part of the mobile team so in order to make changes across platforms you needed different devs to be aligned and make different changes at different times and the chaos of orchestrating all of this was hellish and that fundamentally comes down to a technical difference which is insane the fact that the tech is different enough between web and mobile you now have to have different teams updating this feature sucks because companies work much better when they are split by features not by tech stacks so the teleportability thing I absolutely agree with just the way that companies are structured benefits greatly from having a platform that a given member of a team can contribute across all the different surfaces it means that keeping the iOS app and the website in sync is much easier i can't tell you how often I have problems where the website has a feature but the phone app doesn't or vice versa i currently have a fun problem with my DMs on Twitter where I did a call with somebody on Twitter and now I can't open my DMs with them on the website i can only access them on the phone because when I open them on the website the whole site crashes which is hilarious and then point three kind of aligns with all this ship more value spend more time delivering value to users instead of chasing feature par the amount of effort that goes into just making sure that features are met between platforms is hard to fathom it's absurd and React Native making it easier to keep these platforms in par is a massive win but if the apps are going to be worse and slower is it really worth it let's see according to them the transition has been quite successful not having the same feature twice has given them a step change in productivity engineers are able to work across web and mobile allowing teams to do more with the same number of people and unlock new growth opportunities maintaining par between iOS and Android feature sets has become a non-issue freeing up capacity to ship a lot more value the apps are blazing fast and more stable than they used to be 99.9% crash free sessions and less than 500 millonds to load the screen and they continue to leverage the native technologies wherever it is the best tool for the job thereby giving them the best of both worlds so again one of the biggest benefits of React Native is the other half the native side react Native isn't a platform that is abstracted from the native layer it is built into the native layer the JavaScript is just telling native what to do that's why it is so powerful because you still get to fully use the native platform you're just structuring the UI slightly differently over the past five years they've migrated all of their apps over to React Native instead of using a one-sizefits-all approach to do so each team chose when and how to migrate their apps this allowed them to continue shipping features while also aligning with the company strategy of leveraging React Native shop was originally only on iOS they rewrote it in React Native and then shipped to both platforms by the end of 2019 just 6 months later they updated inbox which was also iOS only rewrote it in React Native and shipped to both platforms by the end of Q2 2020 the point of sale system which is one of the most important pieces because this is what people have set up at their storefronts to check out customers it's a massive deal and it was one of the biggest concern points they had if I recall they were doing a lot of research on memory footprint and performance because of the POS system and they expected React Native to have a delta that was worse than the native platform and it ended up being better than the previous native attempts they had done to build it i bet we can even find that in the original article i'm curious yeah here it is they did a six week experiment on the flagship point of sale app to see if it would be a good candidate for a rewrite in React Native it is kind of funny that the abbreviation for it is POS as they are testing out React Native pretty funny the biggest thing that they learned though is that their retail merchants expect almost 2x the responsiveness in the POS app because of the muscle memory of using the app while also talking to customers this is a really big deal there's almost like tiers of how good an app has to be and those tiers are based on how much time you spend in the app i would argue that there are roughly four tiers i would say tier one is things you only touch once for some examples imagine like the upload thing dashboard where you go you set up your app and you probably don't ever have to touch it again or like government registration stuff like when you're getting your license renewed you only have to touch that every like 8 to 10 years who cares things that you don't touch ever have much less reason to improve the UX because even if you do no one will appreciate it because they're not going to see it and they're not going to be able to contrast the two they're not going to be able to build familiarity and that's kind of the biggest point here is as we go down the ti familiarity is the key differentiator so there's things you only touch once there's things you touch a lot in a short burst so this would be things like Amazon where you go to Amazon you add some things to your cart you check out you don't go back you spend a lot of time focused on the experience in that window other shops like I don't know Walmart eBay most e-commerce I would argue fits into this so you would think Shopify does we'll get to why they don't in a minute travel apps is a really good point for this one too where you're spending a lot of time in it when you're first there and then you don't really touch it again great example the next tier is the one we're probably most familiar with this is where most time is spent in software applications you check often i would potentially make the argument there's two different tiers here cuz something like your Stripe dashboard and Twitter are different just with the expectations of interactions but for the sake of making this easy to understand I'm going to put both in the same spot so my Stripe dashboard it's a thing I check a lot even though it is literally down at the moment which is insane to me because I want to know how my business is doing i want to check disputes i want to check what our MR is i want to see how the business is also my analytics dashboards I go there I set them up and it's funny because different parts of the analytics dashboard might fit here or here but the core experience is absolutely here when I go to Post Hog I'm not configuring everything every time but when I am I'm really intently in it when I'm not we see how it goes so another thing I would put in here would be a platform like Twitch or YouTube or Twitter this is kind of why I wanted to separate them though because the amount of time you spend in a session on these is very different from the session time on these but the overall user behavior is relatively similar you open it up to check it and browse around in it for a long amount of time but now we get to this fourth tier which is one that I think is really underappreciated i'm going to call it muscle memory tools things that you spend so much time in that are often open for so long that they'll get burned into the screen tools that are literally the purpose of the device that you are using them on there's a pretty sizable gap between these things which is why I kind of want to do a 3.5 for this stuff you know what i'm going to do that we're going to do 3.5 which is applications you hang out in and that'll be Twitch YouTube Twitter etc but then we end up in this muscle memory tier there's going to be things like Neoim or front desk software where the person using it is spending eight hours a day in it and little efficiency wins matter a ton this is also for better or worse things like Salesforce which is why it was so revolutionary at the time because the quality of CRM before Salesforce was garbage and now Salesforce is kind of the floor for them because it raised things so high but it also kind of sucks people are saying power user tools like Photoshop or cursor i would argue those are kind of between here like it's hard to put into words the gap between a cursor user and a neovim user but if you know it you know it and something like Salesforce requires like a level of discipline that even Photoshop doesn't a person who spends 8 hours a day in Salesforce is more fluent with that software and its quirks than almost any person using Adobe anything there's a a real gap there the reason I bring all of this up is because of the point of sale systems these systems are a thing that is open on a device at your front desk at your shop while you are also conversing with people the expectation you have to click a button that will always be in the same place without even looking at it and know it will do the right thing you could argue that the line here is a line of I'll put it in quotes can I do it without looking like if your screen was to fail or have a chunk missing from it or something like that can you still navigate the application if you can I would absolutely put it into this tier and if you can't it's probably closer to this one but I I I hope this will help others understand there's a level of sophistication in the people who are doing checkout at your grocery store in terms of how fluent they are with the piece of software how well they know the amount of time between each button press nobody understands the characteristics of latency when you click a button like a cashier at a store that has a lot of customers i know this because I used to be a cashier at Staples for a little bit when I was in high school and the best people at that store the ones who've been working there for a while they could move around that POS system faster than Prime can move around Neoim straight up so if you're building this in JavaScript probably going to be really slow and throw everyone off right we go back to this article remember from 2019 where Shopify was first exploring React Native they learned about the expectations the point of sale users had and how well this application would work their expectation was that the React Native version would have to be slower the question was how much slower sorry if this video is a bit chaotic i just spent way too much time trying to find the specific quote that I remember i didn't find it yet but I did find this part which I remembered which was they were trying to get the point of sale app working specifically on lower power configurations of Android because a lot of these POS systems at these stores were running on crappy old Android phones they needed to make sure it performed well there they were impressed with the performance which we'll get to in a minute but the coolest part here is that they had estimated 80% code share between the iOS and Android versions but after implementing it all we're surprised that it's closer to 95 to 99% for the apps that they were building pretty nuts to think that the iOS and Android apps are sharing 99% of their code in some cases okay after hunting through Gemini Advanced T3 Chat and a bunch of other sources I've concluded this quote doesn't seem to exist on the internet anymore just take my word for it that at some point in time the Shopify team publicly stated that not only were they impressed with the performance of React Native on crappy Android phones it was actually performing better than their native code could and was hitting performance levels and memory usage levels they didn't think were possible sorry for the long tangent i just wanted to prove that the performance was insane we'll get there throughout this I'm sure as I was saying here the POS system was moved in quarter 221 you'll notice a pretty consistent cadence of 6 months to a year for each of these drops but they were eventually able to move the balance app the collabs app and the Shopify app all over the results have been nuts so what have they learned first point React Native apps are fast we care deeply about performance at Shopify as our CEO Toby says not all fast software is great but all great software is fast i bet he loves T3 chat the biggest question we had when switching to React Native and the main reason we didn't do it sooner was whether we'd be able to achieve our performance goals with it before making the decision to switch we did extensive prototyping which led to promising results we also saw all the work that Meta was doing to eliminate performance bottlenecks and identified areas like lists where we could help we predicted that React Native would get much faster soon so we went allin fast forward 5 years and React Native apps are fast we've achieved sub 500 millisecond screen loads in all of the Shopify apps and you can learn how we did that here here and here all sources to different talks and things they have done phenomenal resources honestly Shopify has been a great open source contributor in the world of React Native stuff they have been awesome things like flash list which was their list component they open sourced is super performant they achieved similar performance in all of their apps just like native you have to apply good patterns and techniques to eliminate performance bottlenecks after spending years building mobile apps at scale with both native and React Native we found that native doesn't automatically mean fast and React Native also doesn't automatically mean slow react Native has come a long way in the last few years and you can now use it to build worldclass apps we anticipate this will continue to get easier as the framework matures and team develop more expertise we will continue to share our learnings with the community so performance is solved even if I can't find that quote you need to take my word for it and all of the Shopify customers words for it performance is relatively solved so what about everything else what are the other benefits one of the biggest in my opinion by far is hot reloading once you have a hot reloading environment it's hard to go back when you can just save your code and immediately see the change in the app your iteration speed goes up absurdly as they say here the ability to see your changes reflected instantly within React Native has been a total gamecher it's one of our biggest pain points with native given the size of their code bases it took several minutes for even the most trivial changes to be compiled and run on an emulator or a physical device this wastes time and it breaks developer flow react Native's hot reloading completely eliminates the problem i don't think you guys understand how screwed some of these giant native apps are i have heard about compile times for things like Instagram in days measured yes in days not minutes not hours days it's unbelievable how big a win this is another big one was Typescript and how it unlocks talent portability suddenly engineers only need no TypeScript to be able to contribute all over the company typescript has become ubiquitous and we've seen great success with developers transitioning between the React web and the React Native apps web developers find it much easier to start working on mobile with React Native opposed to native iOS and Android development similarly mobile developers familiar with React Native find it easy to work with on the web this is another super underrated side effect here i experienced this myself with some of the companies I helped staff up where we had mobile engineers that picked up React Native to contribute to the overhauled native apps and then they knew React and suddenly they were contributing to the web i know a few people who went from iOS devs to web devs because React Native didn't scare them it excited them it was a way to start experiencing technology outside of their usual and the result is they went all the way possibly arguably even too far one of my more controversial takes that I love to drop when we're talking about mobile devs is where they fit on the spectrum hopefully we all agree that on one side of this there is back end on the other side there is front end obviously not perfect summary here and it goes further where there are like systems people infra people OS people whatever front end to back end is a spectrum we hopefully all agree here where does mobile go on this spectrum historically my belief was that mobile would go between the two because on one hand you're focused on the user experience and the UI the buttons and whatnot like web but you're also building with native code and the native platform like you would traditionally at least on the backend side what was very hard for me to accept was that the reality of mobile is more here if you think web devs are scared of servers talk to a mobile dev mobile devs are so scared of servers that Firebase exists the only reason Firebase has survived into modern times is because mobile devs are that scared of servers they hate them the moment you tell a mobile dev they have to know a thing that a server does it's like their brain turns off it's like talking about CSS to a Vim person they're just not built that way but if a mobile dev can make the jump here all of a sudden these gaps don't feel as massive and they are way more likely to make this gap and most importantly they're way more likely to stop using Firebase we need more devs to jump across these gaps it's my experience too i started as a backend dev react got me to begrudgingly take front end more seriously i had some experience in mobile in the past my front end experience made me fall in love with mobile development again i would not be where I am today if it wasn't for the effort I put into jumping across those gaps and React Native is a phenomenal technology for encouraging devs to go outside of their main disciplines and I've seen that a ton and it's really cool that they called out that it goes both ways because I don't think this is appreciated enough it's assumed that the web devs will come in and replace all the mobile devs and the mobile devs need to just go themselves that is not the case at all the magic of all of this is that the mobile devs can now contribute to the web as well it is a cohesion play and the only people who don't cohhere are the ones who don't want to and this has become such a problem because a lot of mobile devs picked mobile because they're tired of learning new things they just want to be on a platform that barely ever changes and continue using the SDK from four years ago because they have a person who's using an Android version that's ancient those mobile devs hate React Native because it's threatening to shake things up but the mobile devs who just want to build great apps many of them have made the move and the benefits and success they have seen as a result are incredible as Shopify says here the flexibility not only opens up more growth opportunities for engineers but it also increases the staffing flexibility and it enables teams to accomplish more with the same number of developers it opens up new opportunities to share code between web and mobile as well creating more leverage and to be clear here this doesn't mean your component system or your pages are being shared between the two but the complex logic in the things I build is very rarely the UI part i'm not saying the CSS is easy it's not but what I am saying is the state management the synchronization layer the data fetching and all of that architecture those parts can now be separated as hooks the same way components can be reused and composed the hooks that manage the logic and the state can too and you can break out that state into a package that's shared between the web and the mobile apps or honestly the way I recommend getting started with this put them all in one folder in your project and copy paste between the two to keep them in sync you will be amazed at how much easier it is to maintain specific behavior and feature parity between web and mobile if you can copy paste the complex parts between the two it's magical oh we got Evan Bacon here the legend over from our friends at Expo thank you for the support here the fact that Evan thinks I know what I'm talking about with mobile is the only reason I have the confidence to do this stuff because I don't ship mobile apps every day but I talk to mobile devs every day i do my best to understand this stuff i am very passionate about mobile my history is all freaking Android stuff i want this stuff to be really good having devs that can work on multiple platforms is incredibly valuable it allows you to ship faster and enables devs to take good ideas from one tech and apply them to others in novel ways this is another one of those underrated things good devs can solve problems well in their areas of expertise great devs don't sleep until the problems are solved in all of the areas they can see even if it's not their area of expertise the most motivated devs are the ones who are going to hop in a codebase they've never seen before because there's a bug that's frustrating them and if your tech stack if your company culture and architecture is not such that a motivated little Theo that has a problem with the mobile app can't go over and fix it you're going to burn those engineers out that's what happened to me at Twitch not saying I'm some god tier legendary engineer but I did rebuild the whole Twitch app from scratch in a week and my reward was an HR warning because the mobile team was so mad at me for making them look bad that is a toxic culture that keeps great engineers from maintaining that energy and motivation and I know that this is working for Shopify because I talk to a lot of Shopify engineers some of the smartest engineers I know in particular in the performance world work at Shopify and when I hear about Shopify acquiring a company that has great engineers or poaching some incredible dev from the web or mobile world it always makes sense to me because they have a culture where the engineers who care can fix the thing they care about and if the platform doesn't allow them to or the mobile team doesn't let people contribute externally my favorite example of this was back from when I was at Twitch the mobile team knew that other teams and other engineers wanted to contribute so in order for them to start the mobile team enforced a 3 to six-month boot camp where you would leave your team join theirs have almost no meetings and no support especially during co they might have fixed it since but it was really bad at the time in order to allow for a dev who doesn't do iOS or Android and is on a different team to learn how to contribute and their shining example of this program working was that after the three-month boot camp a dev was able to change the localization window in signup so the languages were sorted based on what region they were in so your region was most likely to be at the top that was their shining example of a threemonth investment and also by the way only worked on Android because you could only learn iOS or Android in that boot camp how good do you think a motivated engineer is going to feel after doing all of that i know because my hackathon team was a handful of the engineers that felt like they went insane during the boot camp and wanted revenge a stack that allows for motivated engineers to contribute everywhere means motivated engineers will be able to engage that motivation stay energized and keep shipping if you don't want your best engineers to burn out you should take a serious look at React Native as they say here it creates a culture of viewing technologies as tools in a tool belt which broadens the team's horizons and encourages using the best tool for the job instead of whatever you happen to be most familiar with yes because again React Native is native so if the problem you're solving is best solved in the native layer you can figure it out and do it yourself or if someone else is better for it bring them in but since all these things are tools we're not tying our whole identity to one specific way of doing things all of a sudden shipping anything becomes way more viable chat's fully getting this one it's so ridiculous it's hilarious that should take like two hours i'd rather spend three to six months remotely at Guantanamo Bay yeah I feel all of you guys with this it was hellish there's a reason I quit speaking of that tool belt thing and the importance of native they have a whole section here native devs are crucial and I agree i really want to make sure that my coverage of this stuff isn't implying that native is bad the only reason React Native is good is because of native and it's the complimentary nature of the two that makes all of this make any sense at all without good native engineers getting helping and contributing to React Native none of this works as they say here from Shopify mobile engineers who specialize in iOS and Android are essential to building great mobile apps there is no replacing experience and taste that comes from having built many mobile products and deeply understanding conventions and usability this is a super underrated point i have a whole video dedicated to just this point it might be out by the time you see this might not be hopefully soon it's called the differences between web and mobile there are certain things that are fundamentally different from how you operate and navigate in mobile from web one of the biggest pieces there is how navigation works you don't have a URL bar in a mobile app you might replicate it but then you're going to break the way the stack works i'm going to tangent way too long if I go too deep here just check out the video when it drops it's a good one understanding these differences is key and a lot of the problems I initially had when I was getting into React Native and native stuff was that the mobile engineers were pissed because they knew the bar for experience on web and the expectations of how web experiences work contradicted what a good native mobile app did so they were upset not necessarily because they didn't want JavaScript on their phone they were upset because the way they expect an app to work often wasn't hit with React Native not because React Native is bad but because web devs would build their mobile apps the same way they built their web apps which just doesn't work so as silly as it sounds that the taste and experience of iOS and Android devs are essential for a React Native port you'd be like "Wait no shouldn't they be writing code?" Yeah but knowing how users expect a good Android and iOS app to behave is even more essential if the code gets this cheap and maintaining a high bar for the user expectations with your apps is something that most React Native first devs just don't have the experience to do but if you've been building iOS and Android apps for years maybe even decades at this point you're a really helpful person as companies move more and more towards these stacks not because you'll be writing native code all day but because your expectations and your bar is set much better than these React Native first devs and I would really encourage those native devs especially if they're watching this to try your best to not view this as an us versus them thing because I see that a lot i see this belief that these web devs that don't know what they're doing are coming to our mobile platform and taking it from us and replacing it with JavaScript try to view this as an opportunity to teach and educate this happens to me a lot as a back-end dev that moved to web i have an old controversial video that I still stand behind fully titled Nex.js JS as a backend framework because React was moving more and more to the back end and Next by definition is a backend serverside tool i saw the opportunity to educate React devs and I got super excited about teaching people whose history is JS and CSS to think about serverside stuff i got to teach Dan Abramov the guy who created Redux and contributed heavily to React i got to teach him what a cold start was on Lambda that's so cool and fun and exciting but viewed the wrong way that could be seen as oh these web devs are so stupid i'm going to keep them far away from my servers and make them hit an API instead i see it as a fun exciting learning opportunity to teach these things you care a lot about to others and I would really encourage the experienced mobile devs to try and see that opportunity here because there's going to be a lot more web devs trying to build mobile apps using tech that you may or may not like but the apps will be terrible not because the tech is bad but because the experience isn't there and if you can help people bridge these gaps you will be more valuable than all of them combined so I encourage mobile devs with this level of experience to stop being scared of React Native not embrace it don't go all in on it or anything but take the opportunity to teach those who are trying to make good mobile apps how because they want to they just don't know what good looks like yet that said their ability to write native code is still very very helpful don't discount that but it's the experience and taste they've built over the decades that make them so valuable today another big thing they have experience with is platform differences the difference between two different spec Android phones two different versions of Android across those phones different resolutions and how those should be handled there's a lot of things there that need to be deeply understood by the devs building on these platforms and native expertise makes it way easier for them to do also I I would not wish a React Native version bump on my worst enemy pretty much every time I have to bump React Native versions in a project I end up making a new one and just copy pasting all the code over and it usually works a lot faster so having native devs that can help figure out those parts and smooth out the chaos is super super helpful we invested in training our native mobile developers in React Native through a self-s served course that covered everything they need to know in order to ship production ready code additionally we set up office hours with devs who are already proficient in React Native to provide support through Q&A sessions pair programming and code reviews i would make the argument they should do this the other way too where the native devs could give workshops and QA sessions to web devs learning the mobile platform to explain how important these distinctions are and maybe once my video about web versus mobile comes out you could drop that in the course too cuz it's going to be a pretty good video i'm really excited about it they call it that they supplement the other way too where they added React devs to the mobile teams awesome building that interop is essential to success here and again to emphasize the point of native code it is crucial 100% React Native should be seen as an anti- goal it's great for building features just once but it's not the right tech for everything native is still the best way for building cutting edge features that leverage device hardware like 2D and 3D scanning running AI models on device stuff like that it's also better suited for building features that have memory limitations like home and lock screen widgets Apple Watch apps and complications app intents and Siri shortcuts native is also the better choice for longrunning background jobs like their example which is the point of sale app has to download and sync a ton of data in the background so it can still process transactions even when offline do you know how painful it is to do transaction processing offline and syncing it back up it makes me feel sick but the native layer is a lot more capable of doing those types of things good luck getting your JavaScript code to run in the background as you're switching between apps believe me I've tried it is not fun not fun at all i like this quote here a lot instead of thinking about native or React Native think about native and React Native it's right in the name React Native we found that you can save a ton of time by building most features just once using React Native and then leverage the native platform for the things it is best suited for this is also why having native expertise is crucial okay this is a big important point here debugging is worse yes the tools for debugging and figuring out what's going wrong in a React Native app have improved a lot since I first said they were unforgivably bad but they are still really bad thankfully Meta is working on a complete rewrite which according to the people at Shopify looks promising but also sounds like they're not using it yet we'll see react Native updates are not seamless i talked about this earlier migrating a big React Native app to a new React Native version good luck have fun and more reliance on third party libraries i get why this is potentially a negative but I think this is a really good thing overall if you're not familiar with Expo somehow I don't know why you're watching this but it's a platform to make React Native development significantly easier it's a set of tools to make building the app better as well as a ton of different packages for all the native stuff you might want to interface with through React Native just look at the sheer number of packages these guys have put out it's insane if you want to do something like print to a printer on your local network or you want to handle screen capture and screen orientation or you want to process SMS messages using the native SMS APIs or you want to put SQLite in your app you want to manage the status bar you want to be able to play video you want to have thumbnails for video that's a very annoying one these types of problems are obnoxious to solve be it native or react native so now there is good native code already written for you that you just call via a component i remember when I had a really good Android engineer working on an app with me i showed him the Expo EV package he gave it a look because he had strong takes on how to do audio and video stuff on Android and hit me up blown away cuz he had never seen another project using the specific libraries that he really liked for video on Android and they were and now it's suddenly super easy to consume you just use the XOV package once you've configured it in iOS and Android you can just call audio.ound.create async link it some MP3 and tell it to play do you know how annoying it is to get something like this working crossplatform normally it's so good it's so good yeah so I get why there's concern relying on third party stuff especially if you rely heavily on it and any given piece goes out of date or isn't maintained well or isn't being audited properly but if you build a bunch of those libraries yourself and reuse them and better understand the ones that you're pulling externally maybe you hire the engineer who built this library that's really important to you there's a big benefits and negatives here but I would argue a company like Shopify benefits greatly because if any one of these libraries is important enough to them they can just hire the person who made it and they've done that they've had a lot of luck with that also one more note on the third parties thing it's kind of funny that Shopify's bet so heavily on React because on their back end they went the other direction they went all in on Rails for their server side which is both not very performant and fully encapsulated where almost everything you need is either built into Rails or there's a like tightlyknit gem that does it there is a culture of making gems for all sorts of other things but the framework is much more complete than something like React and even something like Nex.js so the cultural difference there of an all-in-one solution on the backend side and a peacemeal do-it-yourself solution that's more composable on the front end it's interesting to see that gap but I can also see that as a result the culture of liking tools that bring everything is something that exists there and that makes it a harder cell for React they got over it and all it gets is this short two and a half paragraph section in this article but it is an interesting fundamental foundational like philosophical thing one more main section of their wins the shared foundation unlocks a ton of leverage when we first started using React Native we didn't have years of experience building mobile apps with React Native like we did with native platforms we couldn't leverage the shared data foundations that we had built over the years so each team had to build things their own way it wasn't worth investing in creating those shared foundations at the time because we were still learning how to build apps in React Native one of my favorite examples of chaotic native sharing of code is actually right here with Twitch chat twitch chat has a really important feature which is let me see if I can find it in here nonmod settings here's where it'll be chat appearance readable colors this setting for readable colors is way harder to get right than one might think because readable colors needs to take the hex code a user set for their name and make sure it stays readable on web and mobile in dark mode and light mode thank you Squire for taking the hit here by turning your name black because this is a dark mode so that black username shouldn't be readable but it is because I have readable colors on so if I go here chat appearance turn off readable colors suddenly the contrast on his name goes to and we can't read it anymore so pretty simple right just transform the color well we want to make sure the colors are consistent across different platforms specifically web iOS and Android so we needed to write that transformation code in a language that worked on all of those platforms do you know what language works really well across iOS Android and web sadly the answer is not JavaScript believe me I wish it was the answer for the language that the Twitch mobile team chose in order to make sure the color math was the same across all platforms second guess was correct c++ the code that transforms hex colors to be readable on different platforms is written in C++ in order for that code to be shared across all these platforms what the that's all I have to say on that one anyways I fully sympathize with Shopify struggling to figure out how to bridge this gap the approach was great to hit the ground running quickly and migrate our apps but it also caused teams to solve the same problem multiple times reinventing the wheel this was a conscious trade-off we optimized for speed and consistency but by the end of 2023 all of our apps were mature enough that we could start making them consistent we have since started extracting common components like identity real-time monitoring performance measurement etc all into shared libraries that all of their apps can consume this allows teams to avoid solving problems that have already been solved in other parts of the company it also spreads knowledge and expertise and every app automatically benefits from improvements that are made to these shared components this is another one of those like huge wins that's hard to put into words when you work in an ecosystem that has packages and libraries that work really well and your company buys into that managing the monor repo is never fun but once you get it all working winds can now be felt much further across the spectrum it might be harder to make any given change to one of those shared libraries but once the change is made the wins from it are felt way wider than they would be in other environments it's a huge thing to have a platform that's shared across stuff so one change can be felt across all of your stuff this is also why stuff like the React compiler is so cool because every React app can now hit a button and run better than it does today that's an awesome win so with all of this said how is Shopify feeling for the future of React Native they say it's bright meta has been a great steward of the project we are seeing regular improvements with every release and the road map is being heavily influenced by developer feedback it is kind of crazy how tight the React Native team is with the community the React Native team is way bigger than the normal Android team but more importantly that React Native team is super deeply in integrated with a lot of other companies using React Native as they call out here companies like Microsoft Amazon Tesla SpaceX and Coinbase are all using React Native shipping open- source things that the React Native community benefits from and talking to and collaborating closely with the Meta team microsoft built React Native for Windows and for Mac amazon is super involved in the attempts to compile React JavaScript code into native assembly in order to make their apps fly i don't know what the hell Tesla and SpaceX are doing but let's be honest do they know you get the idea though the community is thriving and the React Native team collaborates closely with those key community members shopify is also a very good contributor i want to be clear about that they've been awesome from my experience and the experience of everyone I've talked to their contributions to React Native have been incredible even just the comm side the fact that I can cite them as a counter example to the Airbnb show is huge they contribute by making code contributions to React Native doing co-releases along with React Native sponsoring highly impactful open source projects like the React Native Skia project as well as Reanimated as well as publishing open source projects like Flashless Restyle and Top Hat they're also bringing back the React Native working group which is huge the goal there is to bring senior leaders who are using React Native in their orgs to identify key challenges in the ecosystem prioritize investments you get the idea react Native has come a long way in the last 5 years a lot of limitations that led to people not adopting it simply don't exist anymore you haven't tried using React Native in a while now would be a good time to revisit it i'm going to continue working with Meta and the rest of the community make it better what a phenomenal article this is so cool to see a proper reflection after years of shipping React Native after a decade of its existence what a win thank you to Shopify for being such an awesome steward of this community and thank you to you for watching through to the end of this video let me know what you guys think are you more excited than ever to build mobile apps or are you wishing that React never infected your phone in the first place let me know




## We Don't Need Migrations Anymore - 20230123
there are only two ways to change your database databases are hard I don't think that's Up For Debate but what if I told you one of the core pieces of how we've done databases for the last three decades now is an anti-pattern and should be avoided what the hell am I talking about migrations specifically migration files they are encouraging bad patterns and just setting you up for failure and I'm going to talk a bit about why today so what is a database migration specifically a migration file in most systems things like active record in the Ruby world or even Prisma over an rt3 land a migration file is a file that's usually named with a time stamp and some key name like added user table removed username field renamed whatever and those migration files are actual SQL that is run against your SQL database so if you have 15 migrations that were made in order over time one adds a field one removes a field one adds a model one links that model to another model then one destroys the link Whenever you set up your database it's just going to go through each of those migrations and run all of them one after another after another to get your database into the right State the write State being what the main branch in your code base currently understands is production sounds great but sadly there's a lot of problems with this model first off it only knows as much as is in the history for the branch you're currently on so if you and I are both working on different migrations at the same time we might end up merging those at different times but I may have made my migration before you made yours and since those are different files they're not going to conflict and now I have SQL that might do something really stupid that seemed like it was doing something really smart when I wrote it it is so easy for migrations to fall out of sync not because they're out of sync in the code but because they're out of sync in the git commit merge history in order and managing all of this is obnoxious if you haven't dealt with this before then you're not working with migration files at scale with multiple Engineers contributing to the database migration files don't work great in git in two ways first off as I mentioned before in parallel migration files can get messy and with Git you already have your version history too if you theoretically had a file that represented the exact state of your database and you wanted all of the wastes changed that's your git history your git history is your migration history if you really want that but chances are you don't what you want is a database that is perfectly synchronized with the current state of the code there are only two ways to change your database on one hand you can change your database in a way that is fully backwards and forwards compatible and safe to roll out and roll back whenever or you can have down time there is no in between your options are full backwards and forwards compatibility or downtime what do I mean by this let's say we want to rename a field for user right now it's name but we want to change it to full name if we were to make a migration that changes the field from name to full name and we apply that change a little bit before our code ships that reads full name then now there is code in production that expects the field name which doesn't exist which will error or we can ship the code first but now it's expecting the field full name which hasn't been changed in the database yet a migration that renames a field from name to full name inherently has downtime baked into it the only way to safely make a change like this is to have two Fields one that has the old name name one that has the new name this case full name and when you have these two different fields inside of your database you can start writing to the new one backfill it for the old values and then and only then when you have confirmed that there are no clients that expect the old name still then you can drop it but that is three SQL queries you have to run not one for that migration the first query is one that adds the new field the second one is one that backfills the Old Fields value to the new field and the third one is when you can finally drop that old field if you're not doing migrations that way then you have downtime I'm not saying down time is inherently bad I'm saying you have it and should be considerate of that as you make decisions when I want to have a database in production that perfectly matches our code and can have changes made to it we're synchronizing a schema we're not migrating a database what we use at ping is planet scale and Planet scale has a branch feature kind of similar to making branches in code where it lets you add and remove fields to a schema and when you hit merge it will apply Those ads and removes to your main database by making it just adding and removing of fields and models they prevent us from making changes that aren't backwards compatible and writing migrations that risk real downtime migrations don't have a good story for most of the problems you'll run into when you're building databases and if you can move away from that model towards a proper backwards and forwards compatible model where you can deploy and revert changes with confidence without problems then your database will finally start to get a little less scary but until then every time you make a new migration file you're risking big problems because you don't actually know the state of the database underneath that migration because somebody could have sniped it out from under you someone could emerge something else before you and God please do not automatically run them if you do still use migrations because as I said a merge won't have a conflict but your sequel might still be conflicting I was surprised at how common migration files still are when we have had so much better an experience since we dropped them in favor of just using a schema and in the Prisma case we just DB push and it works great hope this was helpful let me know what you guys think in the comments take a look at the video that's being recommended right there should be a good one YouTube thinks it is and make sure you're subbed if you're not for some reason appreciate you a bunch see in the next one




## We Finally Agree On Unit Tests - 20231222
for those who have been around the channel for a while you probably remember this I don't believe my imagination plays a single role because I am an aggressive unit tester and I have all my code unit tested and perfectly working so when I make a refactor I'm confident where I am the wrong extreme you might believe I am at prevents my Engineers from being hampered by [ __ ] and I am always looking for [ __ ] to trim we'll go with your your theory here how do you know when you've written too many unit tests if you say none we're fist fighting the prime Theo unit test debate was the entry point for a lot of people on my channel and I owe him forever for having that conversation while we didn't fully agree we actually found a lot of places where we were largely aligned and over time I think we've become more aligned some amount of this is his philosophy around testing changing some amount of it is mine and more of it is just us hearing each other's arguments more and understanding where both sit so why am I talking about this why am I thinking about unit testing once again I was just pulling up some videos in the background and I watched Prime's most recent unit testing video and was really surprised at how much I agreed with the arguments so decided to pause it and and watch it with y'all instead let's react to some of our favorite react developers content well hey I love Dave's content but his delivery sounds so condesending see the problem is is that I don't really buy most of his content like test driven development is great when you have a black box way better version of development is this is that you build something you throw that something away you learn from it you throw it away and then you build it again and you make tests that are effective the thing that is being said underneath here that I really agree on is that writing code to solve a problem is easier than writing a good test and importantly you get more useful information from that if you write something get it working and then decide to throw it all away all the mistakes and problems you ran into when you built that are going to stay in your head as you build the better implementation and now you also know exactly what the Spec's going to look like well not exactly but you have a much better idea so the test you write can be much more meaningful as well so we're only 20 seconds in and we're already in really strong agreement that's how I like building I don't like testing to determine my architecture but I like to make it a very um I like to make it a very uh concrete or foundational part of my development I I just like the word foundational here because For Me Foundation is like very much starting point type thing where it's what everything else is built on top of and what he's described thus far isn't necessarily that but let's let him cook right uh that's why again that's why uh Harpoon 2 Harpoon one pretty much no test I was exploring I was just trying to understand what I was trying to build Harpoon 2 yeah it's going to be good we got everything working I really made sure that we had some good tests so I wasn't just me making [ __ ] up you know what I mean but I really like test build once and notice that I threw away all of Harpoon I did not even look at it once because once you start no unit testing is not [ __ ] there's plenty of great reasons to unit test whenever I hear unit testing is [ __ ] what I think you are is a crud slui developer and that's it you've never developed anything hard I think the part here that he's not touching on is that most devs most of the time are crud and UI devs the vast majority of the work most of us are doing are that even if you do sometimes solve hard problems the majority of the time you're not and if you are solving a hard problem is it worth encoding that solution in a unit test yeah but so much of our work isn't solving hard problems for the first time it's assembling hard solutions to solve a tedious problem something like Ping is a really complex service to build but so many of the pieces that like need to be tested heavily like the algorithm for compressing the video and the web RTC feeds that's being tested by someone else we're assembling the parts and should our assembly be tested some amount yeah that's what endtoend testing is for but unit testing requires you to be building complex units and I find that to be incredibly rare at product companies there are exceptions especially where with like what Prime's doing at Netflix but the majority of the time the code we're writing can and should be really simple and what I find is that unit tests are used to maintain existing complexity and there's a lot of code that that fits in his model of like write at once delete and rewrite that never had that rewrite step and instead of doing the delete rewrite we're adding a bunch of unit tests almost like glue and tape to hold it together so that's the problem I have with unit tests it's not because the tests themselves are necessarily bad by being a unit test it's that unit testing one of those janky early implementations basically guarantees it never gets Rewritten if you add test in too early you're adding so much friction both the contribution and to deprecation that it never ends up happening Get Wrecked shambles right when you say unit testing is not is not difficult you've clearly never done really complex Dynamic algorithms right dynamic programming is not easy and it's very good to have testing for that okay real talk let's pull the audience I'm curious have you worked on a hard Dynamic algorithm problem in the last 6 months at work po so isn't the C of something that like is a comp Lex enough algorithmic problem that has a simple in andout but the actual process is complex enough that writing a unit test almost feels essential for it yes no so y'all better get in there and I want to be clear like there's no shame in being on either side of this it's a little higher than I expected but it's still like less than 1/3 to 2/3 and again this isn't because these developers are worse it's because their focus is on other things and as such the developers in this category hating unit tests makes a lot of sense because they don't benefit from them if you're in this category you don't really benefit from unit tests but if you're in this category people talking [ __ ] on unit tests feels just absurd and chaotic because again they help a ton when you are doing these complex problems with a a simple in andout but a complex unit that makes that transformation let's get back to the video pseudo app install get get wrecked yeah 100% coverage is [ __ ] absolutely hands down absolutely I know you get wrecked kid no real talk like unit testing unit testing makes no sense when people say it's like ah you absolutely don't need to do that um you can't refactor untested code you're just moving [ __ ] around yeah but but unit test when you refactor code naturally a bunch of them break also yep again like this idea that unit tests make your code more refactor is absolutely [ __ ] made up that that is a lie anybody who says that is being dishonest or has just never done a refactor it it doesn't work unit tests are like the most annoying thing when we do refactors when I was at twitch there was a code base that I refactored in like massively simplified like I cut the amount of Code by like 34s and we shipped the new version we put under a bunch of fature flags we ran both AB tested users were having a better experience with my version so we shipped it and then when we went to deprecate the old version we couldn't because the code coverage line in the code base was 80% and that massive pile of code had 82% code C so when I deleted it we went below the threshold for the entire twitch code base and it wouldn't let let me merge the deprecation even though none of the code was being used just because it had enough tests and because it was less code than my replacement it didn't offset anybody who thinks that's worth it just has never worked at a real [ __ ] company all right uh I do like stable API testing I think it's really really good to do stable API testing the hard part is that you don't test it for if conditions you know secretly inside of your code right you have to treat it like a black box but unit testing can be very very very very very very very very beneficial if and only if you have something that's a very constrained algorithm here's a good example um if I had to go and build uh like here this is from Netflix this is something I've had to do at Netflix I had to build a video sync player that would take in video frames as quickly as possible and pretend to play them and check for dropped frames and how dropped frames would affect everything and like buil an infrastructure to high playay uh video like at 125x normal speed as fast as possible and one more poll have you ever built something as hard as what crime just described yes no yeah and you know what same and there's no shame in that no shame at all in that I've done some crazy stuff with f ofm Peg but I've never gone to that level and if I was at that level I'd probably be writing a lot of tests and again like this is a difference that I'm not trying to to point out to to shame or highlight any individual's capabilities it's to to highlight the difference in that the majority of code is solving simple stupid problems the vast majority of code is solving simple stupid problems which means the majority of unit tests almost necessarily are checking simple stupid problems let's get back to that video that Tiff um and so that was like a real real thing what data structure did I to use uh dynamic programming it was just a dynamic programming problem I kept track of everything and had I kept a spill I had to keep track of spill from nanc it was super fun but I had to create unit test for that cuz it was extreme ex hard to get right and it was extremely hard to actually test because if I wanted to test it I had to like launch Netflix run my program to start shoving things through and then make sure that my sink was doing the right thing and it was getting like you know you would get how many thousands upon thousands of 10,000 frames and so it's like how could you ever do that in any real sense unit test it it makes a thousand times more sense I use unit test as a way to drive correctness and to implement stuff because it's fast you know what I mean it's fast and easy to do I don't use unit test to ensure like it I don't look at unit test as a way for like safety I use it as a way to drive features through right and baller take I yeah this is actually the point where I realized I had to pause and and do this live because ah I am so tired of people pushing this narrative that unit tests are necessary for your code base to be safe because they do not help much with that my work a merge request gets Auto rejected if there's no test attach yeah see I think that's wrong too I think that that's also equally wrong I only manly test while drinking my milk damn the comment about that's Ry to it Pierre is getting Auto rejected if there's no tests that's the stupidest thing one of my favorite stories that goes around randomly is a a Facebook employee that got a job at another company and when he started working on that team he filed a PR and when he made some changes it caused one of the tests to break so he deleted the test because it was getting in his way and the team got all mad like you can't just delete tests you have to fix them he's like why the test was bringing no value it blocked me and was no longer accurate so I got rid of it if you're treating these things as intrinsically valuable because their tests then I want to delete all of them and restart because your testing philosophy is that fundamentally flawed tests are a slightly better version of a code comment that guides you in the right direction as you go I also watch Netflix at 20 to 30 speed it's actually really hard to play video every single frame at 20 20x like that's a really hard problem if you're playing like say you're at 60 frames a second video 50 frames a second audio that's 110 frames per second so 20x you know that's 2200 frames that you have to shove through possible impostor Here There is almost nothing on Netflix that's 60 FPS everything in there is going to be 24 maybe 48 it's actually extremely difficult that's why when you fast forward it's chunky right they kind of you have to swim you have to like go to the next chunk and that's why whenever you hit a place sometimes there's a pause because you know if you have a bunch of video sent down you have to like Fast Forward correctly through like grabbing you know these eye frames and ensuring the gos right you have to get the gos all correct it's very ey frames in this case are very different from the ey frames y'all are thinking of as web devs it means the frame that is the Pixel Perfect frame with all of the info as like a traditional image because video isn't actually going to give you an image for every single frame if you had 30 4K images every second in video for a 30 FPS video that would be impossible to work with the files would be comically massive so what most video compressors do is they have an iframe method where there's one frame that's perfect and then every additional frame describes what's changed since that frame which makes it much easier to compress and have a decent quality video that's way smaller and most of these algorithms are smart enough to notice that like hey the scene changed like if I went from this view to this view back to this view the vast majority of the pixels changed which means that an if frame should be created on the frame where those transitions happened because enough of the data is different that diffing it is more expensive than just putting the new frame in and that quick switch if I do it like once or twice more sorry for anybody who has issues with color flashing that's probably going to cause the YouTube algorithm to choke hard that's also why confetti in video does so poorly or like rain because you can't compress things that are changing like which pixel they're in on every frame because that's really hard to compress too much change data anyways very difficult all right I think one of the main problems of with unit test Unity testing okay w calm down is that folks don't suggest to remove uh some code in uh in the code reviews uh because more test equals good I do agree with this take yep I also agree people just blindly treating having more tests is inherently better is one of the biggest issues that's caused the push back on unit testing that exists today I like this take actually quite a bit eventually you can get to a state where you have so many tests that they are difficult to maintain and break at every single uh character change you make yeah absolutely there's some the problem is is that when you get too low on your unit testing you reach a point where when you change even small interfaces things are just breaking all over the place you got to be careful about exactly where you have your units and what things you think you're testing I try to really uh hold on sorry this is just absurd okay that's it we're putting them on the big board you're getting on blast buddy I hope I hope you got I hope you got some good messages behind you okay you're lucky you're lucky you have good chat history okay you're lucky you have good chat history you almost just got kicked right out of the startup buddy easy for you to say when you have te ghost coding for your unit test yeah absolutely I'm going to get even more accusations to that with Julius and Mark but yeah abely test coverage is great for testing if your test if your test execute how dare you challenge a Netflix engineer no it's just stupid to say you can do anything in some small small period of time it's it's a very complicated feature I hate manual testing it slows uh down so so much yes I miss the things a let's see and I miss things a lot but if I'm testing the public interfaces with unit or inte test and it usually catches things I forgot about had this happen recently yeah absolutely so I I mean this is why I that's why I love driving implementation via uh tests because I just think it's easier like while I was developing Harpoon over the charity stream I actually finally just was I got pissed off cuz I kept launching making Harpoon launching a Vim instance closing it down reopening it having the new Harpoon requiring it in trying to do the operation I was like okay dude this is just ridiculous I I agree with what he's saying but I don't agree with his initial framing because what he just described isn't he starts with the test and then builds the code he almost like made a tdd framing and then made a very much not tdd argument where he was running into a specific iteration problem as he was building where one particular part of his workflow like one feature he was adding had a manual testing flow that was too tedious to justify so instead of continuing to do that manual testing flow he automated it but this is our job as Engineers it's to take things that aren't efficient for us or for the users we're building and solve it then and there and I fully agree with that or direction of like hey this thing was hard for me to iterate on I'm going to write code so I can iterate on it faster if that's how you're using unit testing if it's one of many tools you use to allow you to deliver solutions to problems faster I'm all on board right I need to be able to just take a test create a file create a buffer take my file sync it expect the expect it to be there right like I can't dude crazy to be able to think about anything else right it's just crazy I love driving uh Implement good to see you in chat Prime sorry I I click baited you into watching your own video with us live right now by that it's very very good wait are you uh not a public interface to Chad jibby uh Google $5 a month what is this don't write bugs no need for testing yeah that's fair what is Harpoon the greatest thing ever since net beans all right uh let's let's keep on going I like that little chat though that was a good chat before I end this does anyone have a Hardline stance hating unitest all right why can someone give me a why you have a Hardline how many of y'all who said that during their live are here right now unit tests and how much of your hating unitest is because Theo say so I'm trying to sit here and agree with you prime God damn it why do you think I'm the main character on Reddit right now Prime it's not even that you're wrong it's that people want you to be wrong so badly that they will be loud about anything that that could arguably be wrong and I am sorry for anything that my unit testing coverage has caused in that way I took a really strong stance against unit testing because the public stance and like the public understanding was very much pro- unit testing when I showed up in the space and I I don't think unit test should go away I just think that this hoier perspective of them was incredibly destructive and the result was weird backend requirements for unit testing that weren't even great in those spaces being enforced on full stack and frontend devs slowing them down pissing them off and resulting in a ton of bad tests and even worse code powering it yeah I I think we have like the exact same stance we're just working on opposite sides of the problem okay so I love this take right here when I'm figuring out a product I don't want to maintain them uh while I discover and play around perfectly Fair absolutely same team absolutely same team absolutely yeah okay this is also fair I I I struggle with that too right what is worth testing versus what is not worth testing what if I what if I have a different I don't have a unit test okay I have no idea what he says on this point but I'll I'll drop my stance before his I really like the idea of testing being driven by your experience as a developer so if you have something that's hard to iterate on because of like what he described earlier with like the process of spinning it up getting it running checking the outputs if you have something like that and it's slowing down your iteration and you have a way to write a test to speed up your iteration all in love it I just saw towin in chat say test what you detest and I actually really like that phras or that phrasing it's so testing should be focused around what is fragile and what is painful not around what is in your code base and if your unit tests are meant to be like a guide to how all of your code Works they've lost so much of their value if unit tests are symbolic of this thing is hard to work on or this problem has been solved we want to make sure the solution stays and is maintained well these are good reasons to unit test if you have a problem that a unit test solved use a unit test but if you're running into this problem of like I don't know how granular to go I don't know how to test this thing I don't know if this thing should be tested take a step back you don't need to have a unit test for every single thing I hate that they imply and somehow okay first off you got to take another spin at English Spyro I know you better than this I know you can type properly whatever you just said there was confusing uh you know the most about the problem you are trying to solve after you've solved it exactly that's why I do like that write it once and throw it away Prime just said in our chat if you write unit tests because you're supposed to write unit tests you're likely wrong yep and so much of my industry experience was writing tests because there was some code coverage metric or some person who has no idea what I'm working on but really likes unit testing and thinks it's important and enforced and like Amazon had an 80% code coverage rule for any Production Service which by absolute [ __ ] reasons included front-end applications which was absurd code coverage is always a mistake but code coverage on front-end applications is an absolute disaster and a lot of my frustration is trying to counterbalance that that said I feel like we've succeeded there is now enough people pushing back on unit test test I don't have to take that super strong stance anymore and I'm doing more things where unit tests are actually beneficial to my work so my public stance has changed pretty significantly here where I'm not just going to come out and say all unit tests are bad but by doing that for long enough I've shifted The Narrative and I'm actually really proud of the impact this community has had in these conversations I do like the right at once throw it away approach I need to test everything because I have a hard time to decide to where to draw the line see I I think that that is also bad right I think you're going to end up reaching kind of like these these shitty places is where you have too many tests and they just don't make sense and when you need to make a change cuz you didn't really know your product you like ruin half your tests yep absolutely agree also same argument I make about rust you really have to I I I think the thing is is that I think why most people don't like unit test is because they've been forced to write unit test for everything and did you pre-at me reacting to your video Prime God damn it because you're forced to write unit tests you end up writing a bunch of stupid ass unit test for personal projects do you suggest writing unit test not right away and it depends again the prime travel joke Sasha are you kidding God damn it that's too good that's the next Channel Prime Time Travel aen pre-at aen we love it always it dude this is such a huge depends if you're just doing like a crud app you probably don't have to worry about it real talk do you have to worry about it if you're just building a little website to do something you don't have to worry about it here's something that I'm about to do my next project in Vim after I finish off Harpoon 2 is going to be APM there is no way for you to listen to Vim motions and know what motion was just executed that means I have to see the incoming stream of keys and determine what is the state of Vim are we in insert mode are we in visual mode are we in uh whatever blah blah blah mode therefore when keys are executed I have to like discover the motion you are creating do you realize how difficult that would be to create create without unit test that is a very simple and obvious thing you're going to want to unitest the I absolutely agree and I'm thankful I haven't done anything that's this hard of a like data State problem in a while funny enough the last time I felt this way was when I was exploring using xstate for some of the stuff that we were doing at ping and I realized like as I diagram the complexity of our state machine so we can make this into a proper State machine I found like three or four places where we could significantly simplify the state machines and I ended up making like 80 line of code zustand thing that was way easier to manage but the process I went through to adopt the right solution was such that I ended up making a better solution and didn't need that Prime in chat saying Theo and I just from two ends agreeing with each other yelling across a gulf which is hilarious because a lot of people think we strongly disagree but we actually mostly agree yep as per usual Prime and I mostly agree on these things the engine to capture keys and to correctly identify that is like a black box of all time it is literally just like here here is a black box here's a string of keys what happened I just saw another really good shat message I need to stop doing this to myself there has to be a better way is a pretty good guide I want to test absolutely agree because one of two things will happen either you don't find a better way so now you have a test to make sure the current Way St stays working and an easier way to work on it inate on it or when you're writing the test and you're thinking about how to break this problem up into a testable thing you end up finding ways to simplify it and that's a really really big win output better be this input better be this this is like perfect black box this I mean this is unit testing to a te what is good cuz to to a to make that correct is really really hard B to test it is really really hard manually testing that would be a nightmare okay potentially dumb question does Lua always look this much like JavaScript and am I [ __ ] up by not playing with it more because this is totally readable to me and I actually kind of like it and See since the input and the output will be known it is super super super simple you know what I mean somebody just said yes but Lua aay start at one cool never touching it again that's all I needed to hear thank you so that's kind of how I look at it right Winchester Winchester usually has some pretty good takes in here uh Tad testing after development I'm a big fan of testing after development I will say as a fellow ex wrencher that the twitch mindset of testing everything is very toxic and I'm not surprised that Jordan isn't sure if he should be writing unit tests trying to call out these cultures that cause a certain type of brain rot for developers we should be able to know when a test makes sense and my philosophy on testing was we test things when they break and we test things when they're hard and if you don't have one of those two problems in your personal project don't test it if you've had one or two of those problems in your personal project you should test it uh Jordan I think I answered yours like I to me it's just like find a problem that you can make that makes sense to test like that is to me that's obvious um it's obvious that you'd want to unit test it I have a different take I hate what unit tests imply and they are easy to manage poorly yes agreed I I would make the argument that unit tests are a pretty dangerous primitive because they don't offer almost any guidance on how big or small they should be where they should or shouldn't be put in all of that unit tests are the use effect of culture almost where use effect if you actually need it and have a good reason for using it can be absolutely phenomenal but you're just as likely to cause a problem as you are to solve one by like the greater state of things but if you actually know what you're doing that use effect is going to make things better and often even simpler if you get it right same with testing I would argue the majority of unit tests are as bad as the majority of use effect calls and depending on the quality of the engineers and their experience you're going to see a a difference in how good the average test is in that codebase and how good the average use effect invocation is in that code base usually give most focus on integration test and if there's a function that is a bit expensive complex I do develop a unit test I don't write tests uh while I let's see while I just test let's see hold on I don't write test while I just testing and trying to understand how to build something sometimes I need to build something to know if it's the correct way yes I will even if I if if I'm stuck on something that's hard I will write a unit test for me unit test is that is is driving that really annoying part of development where you have to try to like launch programs and like different things at once to know that you're doing it correct so for me it's like if I can cut that time from 20 seconds plus context shifting to to 20 milliseconds absolute win every single time even if it takes me an hour that that amount of like not having to do that cycle saves so much time almost entirely agree I would probably personally take up to twice as much time writing tests as it could theoretically solve me like what he just described going from 200 milliseconds to 20 milliseconds if that's only going to save you half an hour of time I'm still down to put an hour into writing the test because all of that context shifting in the possibility of needing it in the future is probably going to be worth it as countryes that might sound to a lot of my stance knocking down those small Windows to smaller from 20 seconds to 20 milliseconds that ends up being worth it even if you're spending an hour fixing it because of how much better your workflow can be from it and I'm very down to make those types of Investments if you want to see the rest of Prime's video I'm going to cut it here so you can go watch it on his channel we're not into stealing content here just reacting to the things we feel like are relevant want to drop a huge shout out to Prime and everybody else who hung out here for this and all of you for being down for my chaotic push back on all of these types of things I know my testing takes have been a little controversial but I hope this helps you understand that I'm not here just to [ __ ] on unit I want us to be more responsible as we solve these problems both for us as the developers who make these decisions but also for the developers who learn from us and look up to us and are doing whatever they can to be successful at their jobs unit tests are easy to get wrong but they're really powerful if you get them right and I think this video is a great example of primagen publicly showing what good unit tests look like so yeah turns out Prime and I kind of agree on this if you want to see me starting to embrace unit tests more effectively at my job I'll put a video in the corner there about that already seen it you're not interested Ed YouTube thinks you like the one underneath thank you guys as always appreciate you peace nerds




## We Fixed Environment Variables - 20230428
if you've ever built a full stack application I'm certain you know one thing environment variables are hard like way harder than they should be making sure you have the right ones in the right place making sure that your package is building correct locally and on your server your build systems your CI and everywhere else it's hard to know if you even have the environment variables much less that they're correct formatted as expected and accessed correctly across your codebase the goal of this new package is to solve that because we've had this problem a ton to in create T3 app we built a system to make it easier to validate your environment variables but we realized that was too good for just create T3 app and people outside of our ecosystem even outside of NEX as a whole should be able to have confidence when they use their environment variables what we've built is and I should also be clear when I say we I almost entirely mean Julius I had nothing to do with this Beyond nudging him and giving him a domain so yeah Julius killed on this project I'm really excited to show yall how cool and Powerful T3 environment is here is T3 EnV framework agnostic validation for typesafe environment variables I love the little red squiggly line under type safe really emphasizes the point nice simple site easy to install just add T3 OSS in VI core and if you're using next you can add the nextjs package as well and here's an example of how you use it you create an EnV file where you create your EnV if you have a client prefix like in nextjs you can have next public you can specify here these are the client only en environment variables and this is the prefix that they're all expected to have and everything else is assumed to be a server environment and as we scroll here you see it's pretty easy to use this you just import EnV from this case they have a path Alias for the tild the Slash and now you have your environment variables guaranteed to be validated and if you use the next package I'm assuming it just wraps things automatically I'm not sure if it's actually smart enough to do that here's the further config unlike the core package runtime EnV is strict by default meaning you have to restructure all the keys manually this is due to how next bundles environment variables and only explicitly access variables are included in the bundler my only concern here is that I don't know if this solution will validate on build but I'm certain that Julius was smart enough for that to be the case there's only one way to be sure let's test it people are saying it validates un build well let's go make a new project with it regardless yeah you should add the import in next config that's what I was thinking we're actually going to do something you might not expect we're going to create next app at latest with it we'll do an EnV test I'm going to use the app directory because it's the only way I know how to code in next anymore let's go install this package so the example use is pnpm but I was lazy I just used npm here so I'm going to copy paste npm install God it's so much slower than pmpm I'm way too spoiled now that we have the package let's go configure it examples pretty simple but if we go here we can yoink EnV dot so let's change these up a bit we'll do server only z. string do Min well say it has to be five characters and we'll have next public client 2 Z string. Emoji what's the difference with runtime environment so you have to put them all in here as well is that correct Ah that's actually clever because next is stupid that is a an annoying Quirk with how bundling is working with it I'm happy it's down to just this one Quirk but I'm hopeful that if we we show this to the next team they can help us figure something out otherwise you won't have them on the edge this will work for node bundles but it won't work for Edge cuz that sounds like a bug and I can get them to fix that this is an example of one of the weird things we have to do to get around next bundling patterns but I'm committed to getting the team to fix that so in the future we might not even need this but for now it's the the one remaining wart yeah so by the S of it this is optional if you're not using Edge good to hear anyways let's actually use it so this is a server component example because it's using the app router which means it's pretty easy to see things that are server only because by default everything is server only so if in here I was to const thing equals that's silly and here is server only so I was to console.log only on server thing and we were to go run this and PM run Dev yeah I was concerned about it's not checking there but this isn't going to be valid and if we go to Local Host 3000 yall will see that it's going to error because there's an invalid environment variable we don't have this server only or the client only thing however it didn't error during build and I personally would really like it to error during build so how do we fix that by going to the next config JS ah I'm too easy to rename that as next config TS nope I'm not smart enough to solve this problem just MJS it that's an easy enough solution again this is is why I Mis create T3 app and I need to go back because it makes all of these decisions correctly can't somebody said this can be TS now I'm just going to ex config TS wrong file nice oh wait no I thought it was I thought it could be TS why did I think that God damn it that MJS it is nice cool and uh we'll be sure to make the docs nice and clear so stupid people like myself don't have to run into all these problems make sure that your environment variable stuff is MJS both the next config as well as the file where you create these things because next config doesn't support typescript yet anyways what we can do well more importantly when we try and build we'll now see it fails because the environment variables aren't here which is really convenient especially when you're onboarding new developers to your team who might not be familiar with the environment and might not have everything set up correctly now they get a very clear and obvious error that these environment variables are missing so let's go add them real quick new file. env. loc so this one's supposed to be I think I said five plus characters so nope is not that long and the other one's supposed to be an emoji so we will also make this one nope so let's run this again and we'll see now we're getting different errors server only string must contain at least five characters and next public client is an invalid Emoji very useful getting real errors in here like as soon as you run the project the first time you don't even get to the point where it's running and then you run into a weird error halfway through you just immediately get told how to handle this so now let's fix it and actually use these things so longer string and then this one an emoji and now export default yep thank you again just use creat T3 app don't don't do my stupid decision here but now this works and if it works to build then it will also work in the build and here I'm not rendering anything but we can see here only on server longer string and if I want to use that on client since that's a server component actually I'll just show you guys in the console here that doesn't log because it's a server component that only runs on server and if you were to try to access this on client you would get an error and if I just put this here it will go to client but it will never log because again server components so the only way to leak your environment variables with this is to return them in the markup or as a prop that gets sent to the client pretty hard to do really nice overall I've been impressed and obviously if we do our env. next public client to then we got our Emoji pretty dope right I think this is huge you haven't already go check out EnV t3g you can also check us out on GitHub and I will be sure to put that link in the description so please check us out give us a star this package is awesome and it's so cool taking the best lessons we have learned from preate T3 app and bring those to the rest of the JavaScript ecosystem there are very few projects that wouldn't benefit from something like T3 environment and I highly recommend checking it out if you want to learn more about our philosophy with create T3 app I'll pin a video in the corner here where I talk more about that thank you guys as always peace nerds




## We Had Our First Outage... - 20231013
Sunday 9:00 a.m. I noticed my phone's getting a little more notifications than usual I assume that some clip's going viral or something so I roll over and go to bed 30 minutes later I wake up and there's even more notifications these time they're coming from my CTO and my team finally decide to get up and take a look at what's going on I have a bunch of DMS from various users of upload thing as well as the group chat and the server chat support all just going off non-stop turns out we're in the middle of our first major outage for upload thing how we get here what happened how do we fix it I want to show y'all what a production outage looks like from the cause to the response to how we manage it but most importantly how we fix it and make sure these things don't happen again going forward first and foremost I need to thank my team for working as hard as they did to tackle all of these things and also huge shout out to Planet scale yes they sponsor the channel they have nothing to do with the creation of this video other than Sam Lambert the CEO personally helping us out in order to get our throughput down to somewhere more reasonable so what happened this chart here is the total files uploaded on upload thing you might notice something suspicious and on this day we went from 190,000 files to 270,000 files that happened because we had a new power user I pumped with this user he's doing awesome things with upload thing building cool stuff in and around it and he's been incredibly helpful working with us throughout both because he indirectly caused the outage but also because he was pushing the limits of what was possible with our service and it's really cool working with somebody who's this excited about what we're building so much so that they stress tested our service and found all of the places we need to be optimizing more normally we see about 4 to 5,000 file uploads per day and as you see here that number has been growing pretty consistently but this jump from 4,000 to 880,000 specifically 40,000 of these were in 30 minutes 10x our daily throughput in a 30-minute window was not something we had handled we got ousted by one user going really hard and yes we should be able to handle this and thankfully all of our infrastructure is prepared for it but no matter how good your infrastructure is bad design decisions will always bite you and you might not know when and there's a couple stupid mistakes we had made that caused this to be such a brutal Spike going to also talk about the business side of an outage and how we work on this with our customers and it's super important to be transparent about this thankfully the person who had this crazy level of throughput was an active member of our Discord and immediately let us know what he was doing and that he was starting to see issues this was so well aligned with the other issues we heard users reporting that it seemed almost obvious that this level of throughput was the root cause and once I went into Planet scale it was pretty clear so I immediately went out of my way to own the issue and make sure people knew that we were on it I know it was a Sunday and early in the morning for us but it was important that people knew that we see this we're on it we're going to fix it and make sure it doesn't happen in the future so I reached out to all the people who were affected I made it very clear in the public Discord hey we're experiencing issues right now should be fixed no later than this point we're rolling out changes here's what went wrong here's how we're fixing it and also reaching out to the incredible user and customer who threw 40,000 files up in an hour and we've been talking since he actually made a poll request fixing our Cloud flare support because he wanted to apologize for causing an outage so yeah our customers are incredible which is a huge part of why it wasn't much work managing the business side here everybody was super understanding and kind and worked with us throughout I think they get it like we're a new service that's growing really fast faster than any of us ever would have expected and for a little bit of bad code to cause a 15minute spike of bad requests it's bad it's really bad and I'm not proud of it to have our first blip in our nines of reliability isn't wonderful but I'm still proud of how we handled this overall and I'm pumped that we have the awesome team that we have and the incredible customers who understand that these things happen going forward I'm hoping that we can get to the point where we have like a status page that makes it clearer when we're having issues and what those issues are but honestly the speed that we're moving at it will be really hard to maintain that with all the different services and pieces so going forward our main focus is transparency and resilience make it so these things are less likely to happen and be really transparent when they do because no service no matter how great it is is going to be 100% free of outages and it's important for us to understand and expect that and set realistic expectations with our customers going forward right at 9:00 a.m. throughput was insane and we saw our p99s getting as high as 500 milliseconds and our P95 in like the 250 range with all of the tools Planet scale gives us debugging these types of things becomes significantly easier and immediately there's something suspicious here there's a shitload of query time like that's in milliseconds so let's do quick math so that's seconds so divided by 60 that's minutes divided by 60 that's hours that's 38 hours of compute in like a 30-minute window you can also see that the row red here is an absolutely insane number so what caused that why are we reading 410 million rows to only return 165,000 this is the query that runs when a user is requesting pre-sign post URL from our service so this comes from the developer's backend to our back end and it uses the API key both to identify if this user is authenticated to do this or not and also to identify which application is theirs so this request needs the API key in order to figure out which app this is and where we should put the file and if this is a valid user at all we had indexed this table on the ID and on the app ID well you can see in our DB schema if we go down to the API key we have a unique key index here that I added 3 days ago because before we didn't we only had the app ID indexed what does that mean well if you're not familiar with database indexes it's basically a glossery to let people quickly find the specific place that you need to be in the database we shouldn't have to go through every single Row in the database to find the one that matches ideally we should have that hashmap somewhere to point us to the exact right row based on that key sorted and that's effectively what indexing is it's a small separate table that points you directly to the right place in the bigger table so that you can do lookups significantly faster and we didn't have a key that we absolutely needed to have on our table which caused a lot of problems problems to the orders of magnitude of 38 hours of query time so now imagine each of these queries has to go through the entire table of all of the keys and all of the apps inside of upload thing every time a user uploads the fact that we had no problems for so long is incredible but when all of a sudden we're getting thousands of queries per second that all require all of those rows to be scanned we get host and you could see pretty quickly as soon as we added the index and the boost on planet scale once these were all added the speed at which that blue line went down is insane and since then things have been relatively flat I know this chart might not look great but that's the P99 the P99 has a lot of additional queries that are heavier for a lot of reasons but if I turn off the P99 the P95 doesn't go over 37 milliseconds anymore which is a totally reasonable response time I and pumped we were able to handle this as quickly as we did obviously having spotty uploads in this window was unpleasant but again when we look at the P95 you see this dropped a ton there was a little bit of a spike here but if I recall this Spike was another query on our dashboard that was having problems yeah it's the query on our dashboard and we have a file query that isn't well optimized because we are indexing by app ID but we're not indexing by file size because it's nullable we have a polar request up that's going to fix that to handle this one additional Edge case but overall we fixed this performance is significantly better the service has no longer regressed and we know way way more about where our rough edges are if it wasn't for the quality of the tools inside of Planet scale this would have been miserable to debug the fact that we have this UI where I can sort by which queries have the highest P99 latency and see which queries are reading the most rows and just having this UI to quickly identify where problems are and debug them and more importantly having the Boost feature which allows for specific queries to be cached and keyed individually so that you don't even have to hit the database and to run these queries in the first place this workflow has made finding and fixing these issues so so much easier and I'm incredibly thankful both for the planet skill team for building this product but also the planet skill CEO Sam for helping us out of town Yes Planet skill is where our failure happened but the reason why is our bad code and our bad database design was able to scale to thousands of users and hundreds of thousands of files uploaded without any issues and when we had them because of the insane throughput identifying where the issue was coming from was significantly easier than I would have ever expected my experience using Planet scale has been incredible and yes they sponsored the channel but I would like to remind you once again they're not sponsoring this video and they're not giving us free Planet scale I'm paying for our planet scale service because again I'm really really happy with the product these are the things that used to stress me out a ton like when we had out just like this at twitch hoping and praying we had the right metric somewhere logging which queries were slower or faster made debugging this stuff incredibly scary and man I'm so thankful that the quality of this product is where it is and that I can identify these problems as fast as I can now I'm sure other tools have things like this but I personally have not had this good of a debugging experience trying to figure out where the fire hose is coming from that's causing our app to go down so what about you if you had outages like this how did you debug them what's your process for figuring out what's causing your service to go down obviously I Rely a lot on analytics tools and logging error reporting things like axium highlight even vel's own analytics and monitoring tools but having something like this stuff built into Planet scale is such a huge win and yeah this basically is a planet scale ad now even though there were the outage happened regardless we appreciate them a ton appreciate you a ton for sticking by through this if you want to learn more about error handling and outages and how to make sure those reports actually get to you in the first place put a video All About That in the corner here thank you guys as always really appreciate y'all peace nerds




## We Need To Stop Lying About Git - 20240622
I'm about to graduate with a CS degree and I have never used a library framework or an API and I'm not really sure what they are the number of Cs grads who don't even know basic git commands is truly astounding I thought this was a pretty lukewarm take from me I'll be honest I I could not fathom people being mad about this one let's see once if this is a lukewarm take at best twos if you think this is spicy three if you think I should be canceled for daring to say this so ones if it's not that spicy two if it is spicy 3 if it's so spicy I should be canel seen a lot of ones and some sarcastic threes there's a reason for this though we all program my channel sucks to watch if you haven't coded for a while in fact my streams probably suck to watch even harder and on top of all of that the thought of somebody watching my content on my main Channel without being a programmer for long enough to know get is unbelievable you might be thinking when you see this man it would be really stupid for colleges to teach git though cuz it's so easy to learn I kind of agree I didn't say anywhere here that students should be forced to learn git as part of the curriculum and that there should be a class where they spend a whole semester teaching git I'm not saying that these things need to be taught that there needs to be courses dedicated to it I'm saying that if you've been coding for 4 years you should probably know how the hell to use git the thought of somebody coding for years for school for personal work for any reason and not at least trying get at some point throughout that is unfathomable to me there is no world in which good Engineers exist and code regularly and haven't at least stumbled into git much less used it heavily I was personally using git before I even learned how to code because I was using it to manage files for my servers when I was hosting Minecraft servers that ended up being a superpower for me when I learned how to code because I never in my life had to worry about deleting code to this day I had one single incident where I had deleted code that I hadn't committed and couldn't find afterwards that is happened to me once in my entire 15-year career but when I was in school and I was working with my friends and helping them with their homework and I would delete a bunch of contents of a file to start changing it the look on their face of fear when I did that was wait you can't just delete my code wait you didn't commit it yet what's a commit that's where things start to fall apart and man did I get railed for daring to say these things I made some clarifying points here CS degrees are absolutely forgetting programming jobs which by the way if you don't realize this please rethink your stance the only things you can do with cs degrees are get a job coding or research in education stuff if a degree only exists for the sake of Academia it's not a real degree it's perpetually self-fulfilling prophecy if the only thing you could do with a degree is teach other people how to get that degree that's the point of Cs is to make people more scientific with their knowledge of their computers right now that usually means they're writing code and usually that also means they're trying to get jobs coding the vast vast majority of people who are getting CS degrees like 95% their goal is to get a job writing code period and that's also how most universities Market it is there a difference between computer science degrees and software engineering degrees probably but every university has their own feelings I went to an engineering school called RPI and even though it was an engineering school with a great engineering department they still chose to make computer science part of the science department which meant unlike my engineering friends all building with circuits and I got stuck taking bio because bio was a requirement for science majors and I was technically a science major that didn't mean I wasn't coding my school thankfully had an awesome open source program that I was part of which meant I had to use git all the time because I loved open source and I loved that department so I ended up being really good at git and also I ended up teaching a lot of people how to use git and I saw terrible things one student insisted that the only way they would ever use git was through the UI so they would do is they would code a new algorithm in Python put it in a file upend a random number to the end and then drag and drop onto their repo via the git website for GitHub that's not using git that is begrudgingly dragging your heels and preventing yourself from using git and that's in one of the few schools that actually gives you the opportunity to learn these things and get like credits for it but man they tried so goddamn hard to not do it I also specified that learning git should not necessarily be part of the curriculum this is a take that I can understand push back like if the degree is supposed to get you a job it should teach you the things you need to take a job yeah but you can also just have a class where all the assign assignments are submitted via git you have a custom git server at your school and you tell the students hey this class uses git here is a two-page PDF on how to use git and if you're not using this you're not going to be able to submit your homework and you're going to get an F if you make it a preck for getting things done I'm cool with that doesn't take that long to learn enough git to be productive in a Solo development School environment and it's a skill that will benefit you greatly I also call out that no Dev should be hired without basic git knowledge I fully believe this at this point I would cave for SVN if you came to me and said hey I just finished my University program I've coded a whole bunch of cool things my school still used svm which I know is out of date but it's what I learned I don't know get yet but I'm down to learn it quickly can I have a job I would say go learn get show me your GitHub and then I'll hire you but for other places maybe that's fair but the idea of version management not being a thing you vaguely understand by the end of your degree after spending four years writing software that is actually insane like legitimately insane to me this was so controversial that it front paged on hn for the day which I actually couldn't believe but man once you see the things people said you're also not going to believe it because I I cannot fathom that these people are actually that stupid CS degrees aren't meant to teach any particular skill they should be teaching general knowledge that helps you adapt to whatever the fat of the month is in the industry realistically you can learn to use git in less than one day it just shouldn't be a significant barrier to hiring somebody none of the specific languages or software I learned during my degree do I even use now in my current role cool if somebody was trying to get a job working for me and they said hey I've been coding for many years I don't really believe in idees I haven't had a chance to learn them I just use notepad that is the equivalent of not using Source control if you shut up and said yeah vs code is cool and all fine but I just I already knew Sublime so I'm still using that fine if you show up and say hey gets not something I've had a chance to learn yet my last job used SVN I've been using that for a while cool go learn get quick but if you come out not knowing any of the solutions you're and if you come out not knowing get you're still probably like the thing people see because they see me saying git they're assuming what I mean is specific Technologies like git should be t as part of the computer science no the idea of Version Control should 1,000% be very very familiar to you by the time you're trying to get a job if you don't know how to manage the code that you're working with you are not employable you should be embarrassed and that's why my tweets were as spicy as they were because I want people who have degrees and don't know how to use git yet to feel a little insecure and embarrassed you should it is unacceptable to write software for years and not know how version control works and it is incredibly difficult to justify learning any Version Control other than git right now I not saying that git is perfect that we should teach it in school and that people who don't know git even if they're good engineer otherwise or bad Engineers I'm saying git should be known by students by the time they graduate people who don't know git aren't good Engineers because if they were good Engineers they would be forced to have learned good at some point and Version Control is an essential concept that isn't taught in most degree programs that's what I'm saying let's be very explicitly clear here GID is not just a fad it's a literal underpinning of most serious software development these days most doesn't even do this Justice it's like 99% especially if you need to work with others that a CS grad doesn't even know basic git commands is telling not of their degree but of the individual themselves that they have no desire to learn Beyond what's taught and they couldn't even be bothered to look into the requirements of the industry that they want to work in I argue that should be a barrier to hiring and I absolutely agree I would never inten Al hire an engineer that doesn't know get I'm not going to filter for it or look for people who know git because the engineers I'm hiring learned get 10 years ago it's just not a thing we talk about this has proven to be an extremely controversial topic but in my opinion it's perfectly okay to use get and college or university and we should encourage not discourage people from using Technologies like distributed Version Control software you could substitute git with WhatsApp Google drive or email for small projects and get by I wouldn't even say just fine I would say kind of get by but why not spend 15 minutes learning the basics of get as far as I know the use of get and other distributed Version Control software is very popular and we don't see the same hesitation when adopting Technologies like Google Docs and its collaborative editing features in college or university my elementary and middle school have been using Google docs for like 10 years now and my University still isn't using get in the curriculum what the how is my Elementary School more willing to adopt proprietary software than my University program is to adopt universally used open source software is distributed Version Control software truly a controversial technology if distributed Version Control software is not suitable for use in college and university what would a more appropriate technology be totally agree also the missing semester from MIT seems really good for stuff like this more University should have something like that who cares gets a tool not a discipline it's made to facilitate work not to create a whole knowledge domain unto itself where did any of this get said who is looking at that tweet which like let's let's pull the Tweet back up the number of Cs grad who don't even know Basic G commands is astounding where in there that I even vaguely say that git is a whole knowledge domain unto itself that we should learn I wouldn't fault a seasoned and well-trained mechanic for not knowing the specifics of a specialty tool necessitating the need to find the manual similarly although git is the current VCS is thing of choice right now it doesn't represent all of computer science I I like this Sly VCS is something that is interacted with multiple times a day in any codebase it is a basic tool not too far apart from being able to daverse a file system I want to call out that a lot of gen Z uses phones and iPads more than computers and if they even use a computer it's a Chromebook so you'd be amazed how much of gen Z in the newest gen Alpha doesn't actually know how to go through a file system regardless great comparison you should know how files work and you should probably know how git works the next step after viewing files is being able to commit to and view the history of those files I don't know if that answers who cares but a mechanic that does not know how to do something that they need to do multiple times every day there's a skill Gap while CS is about Theory I would expect a CS grad to have used all of the basic programming tools and more great response like imagine a mechanic that when you hand them a hammer they say what's this and the first time they use it they use it backwards that's not a good mechanic doesn't matter how many years they've spent training in the science of being a mechanic they don't know what the a hammer is much less how it works and that person should be laughed at not hired period any codebase I question your depth of exposure I've been programming since 98 if a codebase has no VCS that seems almost ideological I've done a get init on a Linux file system to understand patch changes with that aside what does disaster recovery look like without VCS like anybody who thinks that VCS isn't an industry standard thing should be Ed and blacklisted like I wish it was easier to blur names because Doug and S should never have a job in computer science if he thinks this way another great call out here it's not like they're using Mercurial instead there's a lot of Concepts here that they should be familiar with I again like if they learning Mercurial or SVN or some fine I don't think it's ideal but fine but they're learning nothing in my University software engineering was the one class of the Cs program that had nothing to do with programming it was about uml solid dry kiss agile scrum and more useless class that was mostly a waste of time yeah insanity this quote I love git isn't even 20 years old do you know what else isn't even 20 years old the students learning it in school if you're going to college right now 80% chance you're 20 or younger this technology is older than the people we're talking about isn't even 20 years old is not the own you think it is like are you kidding are you joking the fact that they said that is just hilarious where did I say that we're demanding new grads be taught specific Tech Stacks what tech stack isn't using git show it to me I would love to see it that's the real concern here the projection from having so little faith in their own ability to learn that they can't even see something like it is going to be one of the many things needed to be learned on a new job no don't learn get on the job learn get and then get a job getting a job without knowing get should not be possible and it's getting harder every day cope stupid insane Facebook's using Mercurio they're like the one exception but yeah they all use some version of Version Control almost all of them use git now BRB learning Git You would kill it Jess you're more qualifi than the people these guys are defending let's be real just by using twitch and dealing with like all the crazy things you have to do get like chat working and all your cameras and you honestly probably know more about what software engineering actually is by being adjacent to this as an eirl than the people that I'm talking about here this is a good call out too there was a very wide gap between the students who were huge nerds that already knew or learned on their own and those who didn't this is also before there was YouTuber stack Overflow so it was harder to learn but right now there is no excuse to not have learned these things they will make it easier to do your school work they'll make it easier to be part of these ecosystems and it'll make it way easier to get a job if you don't know get it's just a cell phone this is quite possibly the greatest hn comment I've ever seen I've worked with hundreds of Cs grads the worst programmer I've ever came across as far as the readability of its code had a master's degree in CS from Stanford this reply is I I've been thinking about it since I saw it it could be that they're working at a higher level than you understand not being snarky but the elite schools are significantly Advanced Imagine Learning algorithms from K yes I know he hasn't taught undergrads in 50 years looking at the results after being taught by Dr Smith at generic State University you might be unable to recognize the genius I yeah yeah I I tweeted this because it was so absurd it went viral Arc Type which is admittedly a very complex typescript thing tweeted because they added a new label significantly Advanced to their repo for tagging issues oh oh my God too good I've mostly been focused on the people who disagree with me here let's take a look at some who do which we're going to go an interesting route because a lot of people who don't agree with me about almost anything have reached out or publicly tweeted saying what the Theo's obviously right here shout out to glaver who is currently running turo the sqlite database that I use but not really the thing I would recommend we don't agree on a lot of things we've had some great conversations but more often than that we disagree so for him to come out fully in support of me appreciate it a lot my hot take Theo who is usually wrong about stuff like unit testing is 150% right about GS it's not about what universities are supposed to teach but if in 4 years you only learn the things you were explicitly taught what does that tell me about you this is the perspective of a hiring manager and as a fellow hiring manager yeah I'm looking for the people who are good at learning things and spend time getting better at these skills that's not a person who by the end of four years of code doesn't know get you can have diverse interests and Chase different threads they will all lead you to finding Niche tools and ecosystems there's no problem if you don't know a particular tool because of your interests taking you somewhere else you'll get 99% of them anything you do will get you to get and the other 5% already probably know that they're an exception and are unbothered by this that's another important Point like when I make a general statement like everyone should learn get obviously there's a percentage of people that shouldn't but to them it is so clear they don't need to like if I'm saying something like everyone should know get and you're like well I've been working on SVN code based for 20 years and I'm going to retire in three I don't feel like learning Git You Know You're the exception you can ignore everything I say why are you even part of the conversation when I attended University in 2000 I had an excuse not to know industry standard tools they were very expensive also a fair point using the other tools was not cheap things like Mercurial and SVN especially SVN cost money oh God what about bitkeeper oh God the good old bitkeeper days so instead of Industry standard I always would use the open source ones today open source is the industry standard how the did we get here I cannot believe this is a spicy take do I think everyone should know the basic of the G CLI I would like them too if you're using G via a UI you should know what those things map to but I wouldn't be too hard on that but like I need to see that you understand deeply version controls importance some amount if I was to collaborate with you or try to hire you and you were to pull up the G UI via like the GitHub desab or something during the interview process I might ask some questions but if it was to go go check out your GitHub and saw that you clearly knew how get worked you just happen to be using a UI instead that's fine with me but generally speaking most good Engineers can absolutely use get through the CLI whether or not they prefer it is a different thing but personally to this day I've never met a good engineer not even a great just like a decent engineer that can't use G in the CLI they all can and if your goal is to be a decent engineer or better you should at least probably know how the CLI Works it'd be nice and as hiring gets harder and harder now because there's so many people who have been laid off that are looking for jobs a new grad isn't competing with other new grads anymore a new grad is often competing with people who've been in the industry for 5 years who definitely know get you have to look as close to an industry veteran as possible to not have a miserable experience job hunting and if I could hire from a group of 10 people who used to work at Facebook that got laid off that no Mercurial but have used get before or I can hire you fresh out of college with no proof you actually know how to code that's an obvious answer I'm going to hire the people who have been laid off so yeah if your goal is to get a job in this industry please ignore all of the people who have been making fun of me like I got called a gatekeeper I got called sexist I got called ignorant in pushing my tools I got told that I was telling people there has to be a course that's multi- years in school to learn get I never said did or thought any of those things I just think in the industry we should take advantage of these standard open source tools that make our code better make our code bases more collaborative and make us more successful G isn't that hard to learn you can go learn it in a few days and we should all already know it git isn't so much a necessary tool that you should learn in order to be a better engineer it's just a baseline thing the same way you should have an IDE you should have a VCS if you have have a thing to write code in you should have a way to manage the code once you've written it and 99% of us use G anyways so just use that let me know in the comments why I'm stupid and I'm a shill pushing modern Technologies because that's what you all have to do until next time peace nerds




## We Need To Talk About Ternaries - 20231231
taries love them hate them they're a part of JavaScript and the result is that question mark should give all of us a little bit of anxiety when we see it be it one or two question marks you never quite know what you're going to get when it comes to JavaScript and it's important to use good patterns for these things I see turn Aries and nested turn Aries being used and abused all over the place and while they are necessary in some places I find more often than not they cause problems let's take a look at this and why I feel as strongly as I do one of the first Cas I'm going to show which is actually solved by question marks is something Kent reported on a while back let's find this so this is an article that I actually don't fully agree with this article is about how the and and operator is not a great option when you are using jsx the reason for that is this code which is actually really funny he put this in here because he used to work at PayPal and I recently experienced the bug he's discussing here when using PayPal the problem here is that and and is checking for false so if contacts. length is zero it's going to return that instead because it doesn't pass the truthy check here and as a result you're not going to render an empty list you're going to render the number zero because you put contacts. length as an actual value in the jsx in this example he uses a turn area instead and you see it works as expected contacts. length now has two conditions where if this is not zero then we can go down this path where we map it and if it is zero so it is falsy we return null the reason this is better here is because we're not actually putting contact. length in the markup we are defining two conditions for it one condition is if this is truthy we go this way the other condition is if this is falsey we go this way and in that sense this is better but I also don't think this is good ever and we have much better options the first one I already saw this in chat is you force the values in your markup to be booleans if you put two exclamation points in front of contacts. length here it will behave as expected the other problem is once these things start getting nested they quickly start getting very messy I kind of want to make a code example for this so now if a is true it'll r hello let's say instead of a or b we say this is sidebar open and we'll change this accordingly and B is user info open like well these true for now since this is all booleans this isn't too bad right now and if I was to break into here we'll say user info and in this I'll have another user info open and div user info I'm short one div let's call this sidebar so sidebar is open we have the sidebar piece and if user info is open we have the user info piece I will say first and foremost turn Aries don't make this better they actually make this quite a bit worse so first I'm going to switch this to turn Aries cool so this is turn Aries change this to question mark I have that option or null we do this again here there is no world in which you will convince me this is readable it just isn't and God forbid once you're in code review somebody makes a change to one of these the diffs are not parsable it's miserable this is not pleasant code to read or work with the control flow is so unclear because you're not reading top to bottom the same way anymore you now also have to read left to right with your conditions so sidebar open true we go this way false we go this way but then here true we go this way false we go this way the control flow is incredibly unclear this isn't much better but what I would do in most of these circumstances honestly is just break out a component so I'd have like function sidebar and this takes in side bar open and here if not sidebar open return null perfect but now I need the user info component so let's copy paste this realize this needs user info open throw that there change this to user info and now we see we're missing a prop here which is actually really nice because we have explicit dependency chains now and I have to put this here too user info open Boolean and now I can pass this here and in here it's so much clearer because each level now has a defined code path as part of react's component architecture and you can Define explicitly what the expectations are above I personally don't tend to split things out there I would just do this so you do props dot props dot but this ends up making it way clearer the important piece here is the if statements that I've now creating the condition reading top to bottom it's so much nicer because my jsx isn't multiple conditions my jsx is consistent the conditions happen inside of JavaScript and in every language in jsx in spelt in view in any of these markup Solutions if I can move the logic in the conditions out of the markup and into the JavaScript so it Returns the correct markup based on the conditions I find that to always be more maintainable and workable over time so this is how I would break up those types of situations so that you can again read top to bottom that's my test for how maintainable code is almost always does reading this from the top to the bottom make it clear what it does and where I would go if I wanted to make a change function taries it's no longer turnar it's now a different example I should rename that obviously let sidebar open equals true let user info open equals true we have a div it has a sidebar component also nice cuz this now has a name so this has more context inherently sidebar open equals sidebar open that checks out so the sidebar will be open if I pass true here is my assumption and user info open I wonder what that is must be some dependency within it but I have to pass it so good to know and sidebar very simple if the sidebar is not open return null now it's very clear if I got the ticket hey make it so when the sidebar is collapsed you show a little icon to click on to open it it's very obvious where to go to do that wherein the tary mess we had before which I deleted which I shouldn't have I should have kept it but in that previous Turner mess I very quickly would have struggled to find where in that code the right place was to make that change here it's incredibly clear it says if props that side bar open is false so I could even be more exposive I wanted to be equals false then we return null now it is very clear with no comments no additional context that if the sidebar open property is false we return nothing but if it's true we return a sidebar this level of control is something you should strive to have in your code it makes it very clear what is causing what where and almost every time I see a ton of turn Aries leaking into your markup it's a good excuse to break up a component or two people are too scared to make components I make them all the time and this is one of the things I love about react is you can just have components in a file it doesn't care if you have one little piece in Your Mark it's like Eh this is hard to understand right now break it out into a component pass it some Boolean it's totally fine like this is a good component in my opinion it makes it very clear what the properties are that it expects and what the behaviors will be as a result don't be scared of this let's quickly go through this example because wait why is that erroring type true is not assignable to type user isn't subscribed to you're still not subscribed a video a day for month straight you're watching all of these these but for whatever reason half of y'all haven't subscribed to the channel come on guys subscriptions are free it's that little button underneath please hit it if you don't mind anyways I want to talk about the times where taries are actually necessary which is exclusively one time in our experience as web devs only time you actually need a tary is when you're defining complex types in typescript because there is no if in typescript type definitions what do I mean let's let's take a look let's say you're making a flatten function in typescript where it takes an array that might have additional arrays within it and it flattens all of those into one array so it doesn't matter how nested it is you just want one array in the end how would you write the type definition for that well first for each element you need to know if it is an array or not so to check that you can write an extends so T extends any array is now a condition because we don't know what T is ahead of time if we put T extends any array here then this T will never get hit this is now a never because we've now asserted T will always receive any array when you pass it something different you get an error now because we want flatten to take whatever the types are of the arrays we pass it and return it just that type so if this is an array we're passing we've now hit the truthy condition here and we're going to return T number this is another hack in typescript this could also be t0 what this is saying is since this is an array and we know that it's an array type by putting this here we are saying we don't actually want the array type we want whatever it's an array of so if we pass the string array then T array is now a string array so if we had this is probably a more basic example type string example equals string array zero because we know it's a string array so an element of the string array has to be of type string so this is a really roundabout way to get a string type when you're in these weird conditionals where T could be an array or it could not be and we want to be sure that we're getting whatever it's an array of or just the original thing this is an example of how to do that with turn Aries sadly there's no way to do ifs with type definitions like what I would love would be if there were some way for us to do like if T extends any return t0 else return T it's just you can't do that typescript does not allow you to do logic in your code in the traditional sense because typescript doesn't run typescript gets checked and the turn Aries can be statically analyzed where conditional code has to be ran in order for it to be understood they've kind of just taken the Turner pattern because it already existed in JavaScript and our editors can already handle it and it makes it easier for us to write a type definition without learning any new things but this probably should have been a different syntax because these nested taries can get wild like let's find one in the trpc code base cuz the turnar in here are crazy beautiful and here's an example of types scripting a little too close to the Sun I want to point out this is part of the deprecated trpc packages they've been much better about these crazy nerary since but this type definition for referring a handle or input is chaos my favorite detail here is any any any any any any any versus any any any infer T input any any any the order of these matters anyways I cannot parse this code I'm not convinced the person who wrote this can parse this code this is not good code I won't say it's bad because it works and on top of that it was probably necessary the alternative being breaking each of these turnar out into a flattened type deaf so they're all still turnar but at least they're named one bright site here is T procedure is not just T which is a mistake a lot of people make they love to just use the letter t as though it means something this all said these nested giant taries are sadly a necessary evil in complex type definitions and while I don't think many of y'all are ever going to need to write these because these tend to be more in library code I know I never needed these until I started working on upload thing for that reason you probably shouldn't have to worry about this but if you do the prettier teams working hard to make them at least a little more readable this article nerd snip me on stream earlier which is the reason we're talking about this in the first first place this is from the prettier team working hard to make turnar a little less awful in JavaScript introduction forming naries nicely in a wide variety of scenarios is a surprisingly tricky challenge developers have long found them so confusing to read that they end up just refactoring their code to an ugly series of if else that's not ugly that's readable I'll fight on this often with a let declaration an ifif or a separate function entirely all of these are great solutions to be clear according to beta testers the new formatting style we've developed takes some time to get used to but ultimately allows turn Aries to be practically used as a concise form of if else expressions in modern code bases historical background PR's original naive approach just add indentation to each level of a nerary works fine in simple cases but obviously doesn't scale to long chains of nested taries and has had other problems let's see what this other problem is I'm curious alternate turner oh somebody wanted a different condition interesting so in 2018 we've replaced that with flat turn Aries which seemed like a good idea at the time but was not received well the issue asking it to be reverted had well over 500 up votes while we ultimately did revert back to indented taries we wanted to find a better way over the last few years we explored and experimented with many many possible solutions which would be as readable as indented taries in common cases but also scale to work well in a wider variety of situations challenge criteria ideally we'd find one scheme that would meet our criteria first in all cases it should be easy to follow what's the if what's the then and what's the else and what do those map to two the code should fluidly flow from a single Turner to a chain of two to a long chain of simple cases to something more complex with a few nested taries most Alternatives explored failed this test three the syntax in jsx types conditional Expressions which cannot be expressed with if and normal JS should all look and feel the same interesting so the syntax they picked here has to work in jsx typescript definitions and just normal JS and four it should scale to nerary chains of arbitrary lengths imagine a typ script conditional type with dozens of alternative cases we don't have to imagine it we can just look at some chaos God this isn't even the deprecated this is the internal procedure builder for trpc right now this is horrifying so let's see how they solved it indented teries clearly failed four arguably one and even three we've almost always printed jsx taries in a flapa readable format but that unfortunately felt unnatural outside of jsx many people in the community were excited about a case style drawing inspiration from the match syntax from languages like rust or o camel but it did not meet two and our other goals so she fluidly flow from a single ternary to a chain of two yeah that's tough to pass surprising solution the good news is we found a formatting algorithm that meets our criteria the bad news is that it's novel and thus unfamiliar to most developers good call out this is a very real problem when you're doing something different if you have a pattern that people aren't used to that's one of the biggest blockers of adopting a new technology pattern syntax anything but that's why it's in beta in beta testing this feature we found developers were quite skeptical when they first saw it but then after using it for a bit they didn't want to go back how are you finding taries I'm liking the taries think it makes sense to have them formatted like this i' also gotten used to them quite quickly my first hour with this rule on it felt a little odd but by hour two I'd used it a few times to solve problems that otherwise would have been ugly refactors to if statements I'm not going back I used to hate naries but I also hate restructuring a nice line of code into an if else this new rule adds an understandable linear if else if else expression to the language and is much nicer than multiple taries as nested branches so we felt we had a winning formula but we knew it could be a jarring introduction to the community as a result we decided to put this new formatting behind a temporary experimental Turner's option for a few months in the meantime go ahead and ship what the community has been clamoring for IND dented taries styling overview so what does the style look like here's an example pet KARK indented here pet is scary indented conditions interesting that this and this are indented the same amount and that this is pushed back a bit what's interesting is this lines up with this character and everything else is one of the conditions so if pet can bark this is the path we go down if the pet can't bark vertically go to the next one pet can meow okay interesting that uh the next condition on kin meow is the same level that the truthy goes deeper and the falsey bumps out that's really interesting H every line that ends with a question mark is an if every line that starts with a colon is an else every line without either is a then here's a code be written for K style or kimark dog or Pim meow you can see this is a nice concise way to get something approaching a match style syntax in JS with just humble tary operators our new formatting is a fluid blend of curious turn Aries where the question Mar's always at the end and case style where the question Mark's always on the middle of the line interesting yeah for example mouse or pet and bark or pet is scary wolf dog okay I don't love this I got to use this a bunch I want to take a nasty type Def and put it through this cool I don't care about all the errors here I'll just run I need to actually put the directory oh no I just ran that across my entire machine me I don't even want to know how much that just broke we're going to not think about that how far did it go oh it only hit my legacy folder and a bit of Captain that's fine I can work around that that's not too big a deal let's see how this looks in the editor now okay that's the before and that's the after again ignore all the type errors cuz I just ripped this code from the trpc repo just to see if it was any more readable and it is like it's absolutely more readable first thing I noticed is that the truthy condition just happens online here so like okay yeah that that's a subtle change but I actually like it a lot by the first line we know the truthy out so if this is true we escape immediately on parser dope if it's false we know that's the immediate next line cool so now we have a new condition infer parser parser cool question mark I would have thought this would have been tabbed out so if I understand this correctly I'm just going to comment all of this out I'm so sorry FaZe T extends number so that's the default new formatting what's weird to me is the tab levels of these both being the same I took a complex example it was still hard to read I took a simple example and it's still hard to read I'm sure that if you use this for long enough it'll become much better than previous nested turn Aries and if you need nested turn Aries because you're writing complex type definitions this would make a lot of sense I still don't like that they are encouraging us this instead of JavaScript control flows they end up just refactoring their code to an ugly series of if El's I don't like that they're framing it that way because again with the earlier point of people not being familiar turn Aries will never feel truly familiar to the average JavaScript developer once they get into this nested Health this helps so in the places it's necessary which of the listed places jsx typescript definitions and normal JS the only one of these where this is necessary is typescript and for that reason alone this is a great change the fact that complex type definitions will be some amount more parsable means this is worth it and I'm excited for this to go through but this is nowhere near good enough for me to start using or recommending the use of nested turn Aries or even just inline jsx turn Aries in the average code base this is just so much harder to read than the example of breaking out components I gave earlier if you can put early returns in a function everything's so much more readable and yes there's some overhead for defining functions that's not where the overhead slowing your app down is most of the time I am excited for a future where turnar aren't as painful but I still think that when you hit that point where your code is harder to parse breaking it out into named functions that make the control flow clearer is the right call almost always so once again make sure your code is readable top to bottom that's my go-to test for how maintainable code is inter turn Aries almost always fail it even with the effort going into to making them a better experience still a rough thing for me to recommend those are my thoughts oh boy going have to talk about cesson someday don't I anyways this was fun good to seeing you guys as always I'll pin a video in the corner about other ways people use typescript wrong because seems to be a lot of those these days thank you as always see you guys soon peace nerds




## We need to talk about _founder mode_ - 20240906
founder mode is going viral right now what the hell is it though it certainly wasn't invented by Kanye West even if Jared Palmer says it is founder mode is a mindset that is being pushed by the Y combinator BC World specifically by Paul Graham the creator of Y combinator you're going to see a lot of people talking about this over the next few weeks if not months because it seems like this blog post has resonated with a lot of people and I haven't had a chance to read it yet if you didn't already know I'm actually a y combinator founder which means that I made a company that y combinator invested in and helped us go through their boot camp to be more successful the company that went through YC is Ping Labs we made ping the video call Service as well as the pck service I just released and of course upload thing the big one really hyped the stuff we've built in the founder mode mindset that we've tried to maintain throughout but this more than anything hopefully positions me in a way to digest this blog post and figure out what lessons we can learn from founder mode so let's dive in founder mode I zoomed in a bunch because if you know anything about Paul Grant is his obsession with keeping things simple and never changing them this is what his blog looks like by default not great for mobile so we're going to zoom in a bit to make a little more readable you know what I I'll let chat hang out for this too why not good enough founder mode by Paul Graham by the way all Paul Graham's essays are dope and at least worth learning things from Paul's one of those people who's both really smart and really concise and simple with his Communications he actually will make fun of you if you use really unnecessary verbose words showcasing your vocab ulary and I've been very inspired by his way of communication and I try to be similarly simple with the way I explain things using complex words to explain a complex thing is fine but really smart people and really talented Educators can make something really complex feel and sound really simple it's a thing I've strived for since I started making content since way before then even so love his mindset let's dive in here at a YC event last week Brian chesy gave a talk that everyone who was there will remember most Founders I talked to afterwards said it was the best they'd ever heard Ron Conway for the first time in his life forgot to take notes I'm not going to try to reproduce it here instead I want to talk about a question that it raised so important thing to know about why combinator talks is that they regularly have founders of companies that have been through y comp or even a few who haven't come to speak off the Record at YC that means that these Founders get the opportunity to vent in a way they often can't this is a painful realization for me now that I'm famous so to speak is I don't have the same ability to just privately rant about something annoying me without constantly having to worry about it leaking in people taking the wrong message and repurposing it and using it against me my brand my business Etc I'm still new to this so I've only been posting videos for a bit over two years and it's still stressful to have to think about what I can and can't say at any given time that's why why combinator is so strict on the we don't share what was discussed you can be as crazy as you want and as a result some of the YC talks I've seen have been things that are just not public info at all that are very deep very informative and very real and it's funny because everyone Associates like YC in the whole venture capitalist world with super artificial faking it till you make it type stuff YC is as real as it comes almost to a fault where they are so blunt and straightforward with and that includes things like this these talks that are not recorded and you'll never get to see I wasn't at this event so I didn't get to see this and I never will the theme of Brian's talk was that the conventional wisdom about how to run large companies is mistaken as Airbnb grew well-meaning people advised him that he had to run the company in a certain way for it to scale their advice could optimistically be summarized as hire good people and give them room to do their jobs he followed this advice and the results were disastrous so he had to figure out a better way on his own which he did partly by studying how Steve Jobs ran Apple so far it seems to be working airbnb's free cash flow margin is now among the best in Silicon Valley interesting start Airbnb is a a mess would be putting it like at times like there have been some rough experiences for a lot of people myself included but it's definitely gotten better their willingness to like fix problems they're caring for the hosts as well as the guests it has improved over the last few years for sure and it would make sense that my bad experience has happened because things were far too abstracted I will also say that the other founder of Airbnb was one of our earlier advisers when we were in ycombinator and he gave us awesome advice he explicitly told us to throw away our pitch deck and just show the product as our pitch which went great and it's a huge part of why we were able to raise so yeah they like they know the founder side well and this is interesting because it feels like they left it and then went back the audience at this event included a lot of the most successful Founders that we funded and one after another said the same thing happened to them they'd been given the same advice about how to run their companies as they grew but instead of helping the companies it ended up damaging them why was everyone telling these Founders the wrong thing that was the big mystery to me and after mulling it over for a bit I figured out the what they were being told was how to run a company that you hadn't founded how to run a company if you're merely a professional manager this is a very interesting point I have to think on this I give a lot of advice to early Founders and people who are going in that direction and even Engineers who want to work at these early stage companies and I find that this happens a lot especially when they spend all their time talking to investors because if you're an investor that hasn't successfully started a company and gone all the way with it you only know what's working based on specific signals you see so you see a company raised a bunch of money hired a bunch of people and then it was more successful and you start to link these parts together and assume that's the process that in order to be a successful startup you have to raise money and then hire a bunch of people and then use them to execute but the order of events there is entirely wrong and you can only think that way if you're looking at it from outside these things work very differently internally you find success by building the right thing and obsessing over it and the people who want to use it it is obsession over individual customers needs that makes you successful and as crazy as it sounds like I still take all of the sales calls for all of the services we've built it's important to be on that ground level doing support and being involved in these ways a thing I say a lot and I think it's within my best advice is that people screw up by hiring for the work they don't want to do I screw this up with my own YouTube channel I hired an editor CU I didn't like editing I didn't want to edit and when I hired an editor it meant I can go focus on thing I love but there were some problems since I didn't love editing I couldn't be a great workplace for an editor because I couldn't relate to them they'd feel alone it meant that my bar for a good Editor to hire was a lot lower because I wanted to just get this work off my plate I was down to hire whoever and since I didn't love editing deeply my bar for what a good edit was was really low too so I didn't have good feedback to give my editor or any process around it is just like okay here's a bunch of files figure it out eventually that editor joined me with sales at ping and to edit my own videos and when I started editing my own stuff I started to get pretty good and started to actually really like it and now I'm at the point where I miss editing I genuinely think I will stop recording videos before I stop editing them and doing thumbnails because by doing those things myself I ended up falling in love with them and the current editor phze huge shout out without Jeff this channel wouldn't exist anymore he has been able to run this unbelievably well I owe him so much and hopefully I'm finally paying him enough to make up for it because we've we've doubled the salary over twice now anyways FaZe reached out not just just cuz he wanted to like help with edits but because we had a lot in common we both loved skateboarding we both loved Tech we were both nerds about Final Cut specifically so when he reached out about a skateboarding thing and I saw in our chat history he had mentioned editing I brought him on and he has been phenomenal but I had to go through four other editors first and I went through those editors because I didn't understand editing well enough yet and I was hiring people not because they were great or the right fit or the right thing for my team I was hiring them because I didn't want to be editing now apply this to startups oh I'm wasting all my time on support I need to hire someone to do support for me so I can focus on the important things no  you support's important you got to do it you got to do it enough to like it and then when you like it and then when you understand it deeply that's the point you hire stop hiring for the things you don't want to do hire for the things you love to do so you're forced to deal with the things you don't want to do I think this is my best advice I've been giving it more and more and I've watched people's brains just crumble be it a Creator or or a big business the realization that their hiring process has been around avoiding the things they don't want to do because their goal is to stop thinking about it most YouTubers hire an editor too early because they don't want to think about editing most Founders hire sales and support too early because they don't want to think about sales and support if you're a Founder that loves coding and software development and Engineering great hire someone to do it so that you're not able to focus all your time on it that's what I did with ping Mark and Julius do basically all of the code now I'll hack out an example of what I'm thinking of and then they go fix it and make it a real service I spend my time doing everything else because that's important that's my job as a Founder yeah how are you going to know if somebody's good at support if you don't learn it first absolutely this applies to basically every industry I learned this lesson as a Creator and now I'm applying it to my life as a founder and that's also been a hard thing to accept that I've learned more about being a good founder through YouTube than through software development and working at companies in fact YouTube has helped me unlearn things I learned at Amazon and twitch as I've tried to be a better and better founder in person running this company and again if we go to the like advice that you get from investors okay we I have a whole separate tangent to do here now I think about it God we're not even halfway through and I'm Tangen this far fun so another fun tangent imagine you're a founder and you don't know a lot of other Founders which is very common when I was starting my company I knew like two or three founders and I only met those Founders as were planing to work at their companies they told me I had founder energy and I should go give that an honest shot so I had them helping me out a bunch early on and it was helpful one of them was really helpful but also really focused on some of the wrong things so since 2/3 of his advice was really good I assumed the last third was too and it wasn't and I had to learn that the hard way that's fine we all do but even then I still felt kind of lonely because I only had this group of two to three people both of which were running companies and were really busy and that loneliness is a killer do you know who prays on the loneliness of Founders more than anyone Venture Capital they notice that you're looking for places to hang to talk to people and to not be alone they jump in they get their hands in there they give you all of the feedback all of the conversations that you're missing because if you worked at a company for 5 years where you're people around you to talk about constantly and to talk with constantly and now you're alone as a Founder that is the opportune time for VCS to jump in and give you all of the things that you're not getting anymore because you don't have users yet so you're not getting lots of feedback from them to be excited about you don't have cowork to Hype you up about the things around you you just don't have that content I guess it's hard like like I don't have the right word for it you just aren't getting the reception yet and if a VC can come in if an investor can come in and fill that Gap and be the one you talk to they can get a much better deal on your company and that's a strategy a lot of VCS love to take is providing you that safety n that comfortable place to talk and discuss and be part of the catch being they're going to use that as leverage to get a better deal and also to isolate you from other places where you might get better advice and if you see a lot of VC's talking on why combinator on Twitter this is the reason why something why combinator did really well is drop you in a room full of other Founders All of which have the same goal make their company successful now imagine you're an investor and you see all these startups and they used to be things you could invest in for really cheap and all of a sudden why combinators has helped them all realize they're actually worth a bit more and they've created this like Auctioneer Style of buying into companies that has resulted in way more info for the founders way more feedback community and support for those Founders they no longer have to rely on the investors to not feel alone and the deals those investors get are much worse which is why a lot of them respond by on white combinator saying it's a scam pushing really hard to steer people away from it because they're getting a worse deal as a result but that's awesome and that's one of why combinator specific goals they have compromised their margins they have made it so they get a worse deal because their goal is to set up their Founders to be the most likely to be billion doll companies because if they let in 500 companies and 498 of them fail one of them becomes a $100 million doll company and one of them becomes a multi-billion dollar company that multi-billion dollar company just paid for all the others and then some so if they could get 7% of a multi-billion dollar company or 20% of a company that is going to fail they'll always take that 7% and then do everything they can to set you up for Success other investors are quite often not just trying to push you towards that really happy exit they're trying to maximize their return they often will care more about your series B if they're investing in series a then they care about the long-term exit because they can sell some of their shares pre-market they can do a lot of other things with that money some don't and like I'm a scout with Anderson horrorwitz they're generally pretty good about this the flaw I would say is when they try to advise you through these things like a thing I've seen even with Anderson hor startups is if these Founders talk to the investors too much they might do weird things with their cap table I don't want to go too deep in the Weeds on this but there are interest there are different ways to invest in a company early stage the most popular one was invented by y combinator it's called the safe it stands for secured against future Equity what that means is all of the investors in ping own 0% of ping right now all of Ping's Shares are owned by employees in the future when we're adding more Equity to the pool because we're doing something like selling the company doing a series a with actual stock going public whatever it is when we are creating new stock at a financial event for the company that's when they're Investments convert and they don't until then because by doing that effectively as an IOU it makes managing my cap table and managing my investments comically easier the point where I don't have to worry about it right now where previously I would have had to have a legal team managing every single person who has sent money and sign my company which is a lot of people some of these VCS don't like that because they like to own the equity they want immediately and they've seen these other companies that succeeded and all of them had real Equity all of them did things this way so they advise you to start doing those things early really easy way to get terrible advice and I've seen this happen far too often another thing I've seen is Founders taking their advice from investors and taking feedback from investors way too seriously here's a harsh reality check for y'all this one was hard for me to take you know what we're going full screen cam for this one investors will never tell you the real reason they're not investing I know that because I'm an investor I've invested in like I think I'm about 40-ish companies now they won't tell you the real reason Michael cyel from why competitor actually put this really well there are three states when you pitch me your company so you just described what you're building and why I should invest 95% of the time what I'm thinking is no I'm out not my thing 1% of the time I'm like yeah this person knows what they're doing I'm in that other 4% of the time so four times more likely than I'm willing to say yes my thought is I would hate to say no to this person I'm not going to go out of my way to offer to invest but I'm not going to immediately turn them down like I would those other times so if they ask me like hey how much are you in for or here's our valuation are you down to sign a check within this range it'd be much harder for me to say no to those people and that's also a fun hack if you're a Founder always ask if they're down to invest and if you can drop a number because it makes it so much harder for them to say no that aside that 95% it's not like I have specific facts of like oh these three things are wrong if you change them I'm in it's much more a gut feel of like I'm not vibing with this could be the idea it could be the team it could be that the slides suck and they don't really know how to explain things to people because if they can't convince me both as a user and an investor I just don't see a lot of likelihood of them succeeding but it's hard to to verbalize that and give them specific reasons but it feels bad to just say no which means most investors when they say no they try to justify it to themselves they try to explain why because it doesn't feel good to just say no you have to give a reason or you feel like an so they will and they usually make it up on the spot and it's usually not good advice and I've seen this a lot some of the advice I've seen Founders get the reason why an investor passed they take it so deeply to heart that they rethink their whole company sometimes no no we were one of the better companies out of my batch and we still got passed by like 30 or so investors I think I did like five to seven calls a day for two weeks straight but when we met with the right VCS and it clicked with them deal was closed in 15 minutes from when the call started the trick isn't to Cav every single thing an investor says is wrong it's to talk to other Founders gut check yourself be honest with yourself do mock pitches with people you actually trust not other investors but other Founders who have been through it too and figure out how to make the thing you're building as appealing as possible to those investors and yeah don't listen to investors when they tell you anything other than I'm in the biggest mistake I see so many Founders making is listening to investors too closely letting them on their table too early letting them be involved with their decision-making process the best advice of VC ever gave me was why commentator telling me to not listen to VC's and I hope this is helpful advice for y'all as well if you're interested in going in this direction VCS if they if they knew how to run a company to be running a company they're not there's a reason those who can do do those who can't do teach same deal deal here those who can build build those who can't build invest it's silly but it's painfully true painfully often stop trying to make your company appeal to people who don't even know what appeals to them back to this article because I I could literally Tang it on this point forever I love this point that he's making though which is that the advice that people are getting it's coming from investors and investors could be someone who was at a company early that exited it could be somebody who worked at Facebook as a manager for8 years making $800,000 a year that now has a bunch of spare income to spend it could be somebody who's only ever worked at a VC firm but these people don't run companies they don't know how to run companies and even if they did they don't know how to run your company so don't listen to them about any of that just run your goddamn company and it's so common this happens you millions of dollars worth of advice in four minutes I better get some shares anyways also if you are starting a company and you are building in the tech space and you think it might be interesting to me write me a really cohesive two sentence in my Twitter DMS on why I might be interested if you do a good job at that I will respond and if you don't I probably just won't respond don't take it personally it's just hard to sneak into my brain but yeah I do invest hit me up I am very hands off usually we chat a bit I give you a little bit of advice around like the space that you're building in if I happen to know about it or just an audit of How I build things if that's interesting to you what you're doing is cool awesome hit you the money you go back to work anyways back to this article cuz this is huge we were here but this MO is so much less effective that that to Founders it feels broken there are things Founders can do that managers can't and not doing them feels wrong to Founders because it is also remember how many billions of dollars Paul Graham is worth do you see how beautifully simple this language is the most complex word here is effective most of these words are five or less letters long it's beautiful how much knowledge he can fit into such simple language he has broken my understanding of what writing well is and he's been doing this for a decade now and I'm pumped that he's maintaining it in effect there are two different ways to run a company founder mode and manager mode till now most people even in Silicon Valley have implicitly assumed that scaling a startup meant switching to manager mode but we can infer the existence of another mode from the dismay of Founders who've tried it and the success of the their attempts to escape from it MO is modest operandi it's the the mindset the way of doing and I love this point here too the split between founder mode and manager mode and the call out that people who are escaping from it are finding success with that escape I've even had to do this myself like hard reality check and this is possibly my biggest failure in my career we hired up too early at ping we had way too many people early we had six people at a point seven if you count a part-timer and that was rough we did not need that many people Not only was it just more than we needed it was actually slowing us down keeping everyone aligned and focused and building in the right direction was tough and then if we had to change directions it was even tougher so right before the layoff crisis of 2023 like end of 2022 I made the hard decision to cut down and go into founder mode with just Mark and me and we went all in on developer tools ourselves and eventually Julius was contributing so much code to the open source stuff that I said okay it you're I need to pay you and we brought him on part-time he's working full-time hours but technically is contracted yeah Julius is essential to Our Success now but like that's more than he also has this founder mindset of just fix it like I posted a screenshot yesterday let me find this because I think this is a great example of founder mode move fast fix things I was trying to do an upload from the dashboard and I was on the new infra and it didn't work and he told me to try it again so I did and he replied and it worked and he replied I definitely did not push straight from Main to GitHub or from GitHub Mobile on our production infrastructure and on one hand this is silly and if you're a big business looking into using upload thing I would understand why this would make you somewhat hesitant but on the other hand this is what makes founder Mode work you're shipping and nothing else and this is another one of those lessons I learned early on with ping if you looked at the different groups of people and how many of them retained versus churned the users that were the most loyal to Ping weren't the ones who had no bugs the most loyal users were the ones who had a bug reported it and then we fixed it really fast and told them when it was fixed and thanked them because you have more confidence in a thing that failed and the owner fixed it quick than you have in something that never failed in the first place because if it never failed you never even think about it but if it did fail and then it got fixed and you know in the future if it fails again you have the ability to get it fixed again your confidence ends up much higher and even subconsciously you just end up more attached to that thing so it's better and this is again like my safety Nets versus guard rails thing this is why I love safety nets because it makes it so much easier so much easier to fix things when they break and they always will break it doesn't matter how big or small how many unit tests you have none of that matters your will break being able to fix it quickly will always be the better thing for user loyalty to the point where it's actually better to have bugs than not as long as you can fix them quickly H yeah founder mode works for all of these reasons small scale big scale whatever if you can own bugs talk to your community and fix them that helps at every scale even at when I was at twitch the reason that mod view had the most positive sentiment of any launch at twitch since gift Subs which is crazy cuz gift Subs obviously massive but what we were doing with mod view much smaller potential reach but the satisfaction and overall sentiment around it was unbelievably High to the point where they thought there were issues with the tracking that happened because our product manager and designer were so deep like so deep in this chaotic world of working with moderators I remember I was talking about a creator that had some issues on not even on Twitch but on a multiplayer game that went from no voice chat to voice chat out of nowhere and she was one of the top ranked players in the world in Solo Q it's as they added voice chat and she was a woman she's now at a huge disadvantage because either she turns on her mic and gets flamed for being a chick the whole game or she doesn't and now she is missing a strategic Advantage the other team has and that sucked I was like wow that's a really insightful story and I hadn't ever thought of things that way before I brought that up with my product manager to which he responds oh Steph yeah I know her really well I'm actually a mod on her Channel and she's in my group chat where I collect feedback for these things that's founder mode that manager he wasn't a Founder he was a product manager at twitch was so deeply ingrained in the community so deeply understood these moderators and these Creator spaces and their needs that he could build the exact right thing and if one of them had an issue he would ping me I'd fix it that night and that that responsiveness that collaboration nature between the users and the business is essential to this founder mode mindset your users shouldn't just be comfortable with it they should be excited to let you know when things are wrong because they know they're going to get a response for someone they trust that can work at Giant scales like twitch that can work at even bigger scales like Amazon believe it or not I've seen that too and it can work on these tiny micro scales of a startup with five customers but you have to hold on to it tightly or you will lose it yeah the CEO sub tweeting on it always feels like magic I totally agree doesn't matter how big or small you are this feeling is real and CJ who works at axim by the way Channel sponsor best way to deal with your logs and analytics for your servers so if you want to see what servers are crashing and why axim is the way to do it CJ is there big part of the community he finds the things to work on by reading Discord and slack not linear founder mode absolutely founder mode I also want to make an online quiz of questions and if you say yes to the certain ones you'll I can have you on a Founder mode spectrum because these are the types of things that is absolutely founder mode anyways back to this article this is great there are as far as I know no books specifically about founder mode Business Schools don't know it exists all we have so far are the experiments of individual Founders who have been figuring it out for themselves but now that we know what we're looking for we can search for it I hope in a few years founder mode will be as well understood as manager mode we can already guess at some of the ways it will differ bold I I like that he didn't predict it he said he hopes for it because I also hope for this the same way that like you you don't even think twice when somebody's like yeah I promoted a manager and I hired 15 people to work on this with me it's just like yeah that makes sense but when somebody says oh I saw a bug on Twitter so I went and fixed it and pushed the fix the response is insane here's an example of that actually I tweeted a fun bug about Discord that had been annoying me when I had my Discord client in a small enough view all of these buttons on the bottom would make the text one character vertical like this is embarrassingly bad this is so hilariously bad thankfully there's one person at Discord that op rates in founder mode he's an intern adith he's 19 he was an intern at Discord and he was fixing so many of these small things constantly I reply holy you actually did just fix that and I added the CEO of Discord don't just hire this kid and put him in charge of PR and product I stand behind that this kid is founder mode in Discord more than almost any company desperately needs it they need somebody who's in the trenches understanding the problems that people are having with these things and fixing them also founder mode one more call out there's someone in our chat here uiux Phil here has been rebuilding the homepage for pick thing the service I just dropped throughout the stream he even just made a dark mode version apparently he has to travel tomorrow and it's 1:00 a.m. at his time so he's finally going to bed but he spent this whole stream showing us how nice our website could look and giving us everything we need to go fix it that's founder mode I can't say no to him now he is fully inserted himself in my brain and we are going to redo like this homepage isn't bad for me whipping it together in like an hour before going live but he took the opportunity the initiative and the ownership to just dive in and make it and I love that that is a rare thing and I wish more people had that in them I am so thankful he does and he said hi to YouTube as well if you're looking for a designer uiux Phil same handle on Twitter I believe worth reaching out to he literally said founder mode in our DMS for real for real we will be paying him it's not free work don't worry I I will compensate him for this for sure but that that ownership that mindset that drive and that decision to be that close with the users that is founder mode and thank you Phil go sleep we'll figure this out later I appreciate you immensely ownership is the biggest thing without question back to this article this is great the way managers are taught to run companies seems to be like modular design in the sense that you treat subt trees of the org chart as black boxes oh oh God that's triggering oh the amount that that irks me on like a deeper level H I dealt with this so much at twitch where it's like yeah we should do that but the the moderation team isn't interest or the mobile team isn't down or the mobile team needs more headcount first stop saying the Black Box needs something different inside of it put me in touch with the person inside so I can tell them what the to do if you are working at a company where this is the case and you are similarly irked by it I highly recommend that you try to start ignoring the black boxes start reaching out to the individuals on the team one of the best ways to find the right ones is look at their GitHub repos see who's contributing the most there will be at least one more driven person on every team every team has somebody who's more driven than the rest even if they don't meet your expectations for drive at the very least they feel a bit lonely and if you can reach out to them and be their safe space to complain about these things not moving you can build a really strong relationship there you you might have what happened to me where your manager complains that you're in too many meetings because he's insecure that you're meeting with people he can't even meet with but you can build these relationships best case you now have an inn to get these things fixed when they're broken worst case you get in trouble for it maybe even get fired for it but you just made a connection with the one person on that team that is actually somewhat valuable and if they decide to quit and go somewhere else they remember you they can be a referral if they go to start their own company someday they remember you you might be an early hire you might be a coach founder you might get to be an early investor or they join another early stage startup and they can bring you in super early and give you this buying because they know you had the initiative to make that connection and do those things if you are booking your own calls to get through these black boxes those connections are so much more valuable than the job role you have right now and even if you happen to lose it as a result of doing that if you're already uncomfortable with the workplace you just found the one last value you can get from it anyways you tell your direct reports what to do and it's up to them to figure out how but you don't get involved in the details of what they do that would be micromanaging them which is bad yeah I have an interesting take on this one this again comes to like the things you love I'll give a real example here we're in the middle of rebuilding most of the infrastructure for upload thing if you sign up for upload thing and use it right now once you integrate it you generate a URL on your server that you send to the user to do the upload that URL goes straight to S3 that's nice because we don't have to eat any inest have servers running or anything it's truly serverless but there's a lot of things we want to be able to do as the file is ingesting we want to be able to check it we want to be able to respond to the user when the uploads complete with the data from your server we want to be able to resume chunks if the user stops uploading and then starts again later we want to be able to do a lot of things that require a server this is a really exciting Arc and I knew that and I could have nerded out and worked on this for a month myself but instead I gave it to Mark and Julius which meant Mark gave it to Julius and we have still been involved throughout seeing how it works asking questions him asking questions too making changes dog fooding it it's not like he went in the box and he presented it when it was done but I specifically went out of my way to have the fun work the thing that's like the Big Arc and pass that on so I wouldn't be distracted by it when I'm busy doing the real thing which is running the company and it's so easy for Founders to get super distracted with those fun things and that's been part of my founder mode journey is hiring people who love the same things you love so you feel bad not giving those to them so you can focus on the hard and I I probably come off as a little micromanage when I'm chatting with him about these things is like he had entirely changed how the URLs work and I was just like no that sucks that's too long fix it and he did in almost no time he fixed it it was great and those types of things are kind of micromanagement but are also important to doing the right thing and it's a hard balance to strike and I'm still figuring out myself anyways hire good people and give them room to do their jobs sounds great when it's described that way doesn't it ex said in practice judging from their report of founder after founder what this often turns out to mean is the following hire professional fakers and let them Drive the company into the ground o so common and the problem with fakers people who are like showing up with credentials that look really good and don't get anything done is since they're already faking they're very down to lie it's hard to even know if they're lying sometimes it feels like they actually believe the stupid they're saying the number of people who had great credentials who I would speak with and they would actually seem like really great co-workers that would then block me for some stupid reason keep me from shipping and then throw me under the bus saying I'm holding the whole team behind when in reality I'm the only one chipping code it's so common and these fakers they don't go away when you've hired one of them they're incredibly hard to get rid of because they know how to hide in the shadows and all they do is they pop out get a head shot on somebody valuable and then disappear before you even notice good Engineers churn no matter how great your work places it doesn't matter how awesome your company is the best people have this incredible ability to find other interesting things they might be even worse for them but their Drive will bring them other places and you have to accept that these fakers don't go away you can even fire them and they find some way to sneak back in I've even seen that happen and if you have them the only way to get rid of them is to obsess over every detail of what they're doing and catch them when they make subtle mistakes and it is hard as balls to do it is really hard I've even been caught into this where like I had a coworker I was really excited to work with and didn't realize that they were subtly behind the scenes trying to get me fired because my work output was making them look bad and it's so easy if you're not careful to suddenly have all the good Engineers leave because they're tired of it and then the faker hires more fakers and now you have a company run by these people who don't actually want to do any work and then you accidentally ended up with Google it's so easy to fall into this trap and I'm not comfortable saying micromanagement is the best way out but at the very least it makes it easier to catch this when it's happening and jump on it earlier on but I would absolutely agree that these people who's like let's look at Discord for example I guarantee you there are Discord Engineers who are getting internally for this random 19-year-old fixing all these bugs and I guarantee you their response is something like well we have a process for this we don't want to regress the product more and it's important to make sure all of our platforms have the same experience the cohesion is our job we're making sure when we ship things that they stay high quality and the quality never dips and the experience across all platforms is as expected we have processes for a reason why would you let this kid come in and fix everything he's not fixing things he's just causing problems for everyone else you need to fire that kid or you're going to lose me I guarantee almost that exact conversation has happened within Discord and I know that because that exact conversation happened with me many times at twitch it's a big part of why I quit I didn't realize at the time it was because I had the founder mindset one theme I noticed in both Brian talk as well as when talking to Founders afterward was the idea of being gaslit I guess I pre-read CU that's exactly what I've been dealing with Founders feel like they're being gas lit from both sides by the people telling them they have to run their companies like managers and by the people working for them when they do usually when everyone around you disagrees with you your default assumption should be that you're mistaken but this is one of the rare exceptions VCS who haven't been Founders themselves don't know how Founders should run companies and SE level EX as a class includes some of the most skillful Liars in the world yeah I talked I went on this rant earlier but yes like both people who never were really early at a company people who weren't founders of a successful business that end up doing VC as well as people who got pulled into a successful business really far along that didn't understand it well to some extent they're fakers too if you're hired in as CEO of a company you have to fake it for a while because you don't really understand why it's working you might eventually get there but it takes a while and you don't understand the founder mindset ever cuz you're just trying to keep this ship from sinking at that point and those people don't give good advice and as Paul's putting it they're some of the most skillful Liars in the world and honestly if you listen to things like the all-in podcast you might slowly be waking up to it because it's very similar what's the citation here the more diplomatic way of phrasing the statement would be to say that experien se- level execs are often very skilled at managing up I don't think anyone with knowledge of this would dispute that yeah if you're joining a company late and you have to manage people above and below you gaslighting is an important skill because the person above You Is Wrong you have to convince them out of it and one of the best ways to get someone to believe something different is to Gaslight them so it is a skill in that sense it's not a skill I want anywhere near my company as long as I'm there same with test driven development it's absolutely a skill to be able to do tdd well it's just a skill that qualifies you out of ever working near me it is what it is whatever founder mode consists of it's pretty clear that it's going to break the principle that the C CEO should engage with the company only via his or her direct reports skip level meetings will become the norm instead of a practice so unusual that there's a name for it how crazy is it that like skip level is a thing that we regularly use because the concept of meeting with your manager's manager is weird like the point where I got on Rocky ground with my last team at twitch was when my manager saw how often I was meeting with his manager and his manager talking about how to fix the  org and he took that personally he was offended that I was meeting with his boss and his boss's boss more than him you know what he should have felt bad because many he wasn't qualified to do his job if his response to me meeting with those people to try and make things better was insecurity then he is not fit for the role and he wasn't and he stopped being a manager soon after I quit it was a pretty explosive exit to be fair regardless the fact that meeting up this way is rare enough we have terms for it is silly and I knock on wood I'll swear on this at any point where I'm running a company every person at that company will have the blanket ability to to contact me on or off the Record about anything they want to confidently that I will never compromise on and I push these things really hard at every scale I work at every business I work with I'm now at the point where I won't even use a new service or company if I can't talk to the CEO if I'm not confident that I can reach out to an executive at the company and get a thing fixed I'll use the smaller alternative where I can even if your service is better if I can't talk to the founder I'm out is what it is as Paul says here once you abandon that constraint there's a huge number of permutations that you get to choose from for example Steve Jobs used to run an annual Retreat for what he considered the 100 most important people at Apple and these were not the 100 people highest on the org chart can you imagine the force of will it would take to do this at the average company yeah like to be frank and to to toot my own horn a bit my role at twitch was never particularly high up because I was getting blocked on promos all the time people who were pissed off at me but if they did a meeting like this they did an event like this I would have absolutely been invited as one of the 100 people like don't even to think twice about that it's like even people there at the time and people there now would probably say the same thing despite my level despite the fact I didn't have employees that I technically managed I was within the most impactful people at the company at the time I was shipping more and faster and unblocking more and more effectively than most people there your org chart cannot and should not represent the amount of impact people are having and those impactful people should feel like they have every tool they need to unblocks and have more impact they should be able to meet with you chat with you work with you ship with you and more companies need to work like this imagine how useful such a thing could be it could make a big company feel like a startup C presumably wouldn't have kept having these Retreats if they didn't work but I've never heard of another company doing this so is it a good idea or a bad one we still don't know that's how little we know about founder mode obviously Founders can't keep running a 2,000 person company the way they ran it when they had 20 there's going to have to be some amount of Delegation where the Border of autonomy end up and how sharp they are will probably vary from company to company they'll even vary from time to time within the same company as managers earn trust so founder mode will be more complicated than manager mode but it will also work better we already know that from examples of individual Founders groping their way towards it another prediction I'll make about founder mode is that once we figure out what it is we'll find that a number of individual Founders were already most of the way there except that in doing what they did they were regarded by many as eccentric or worse excited to see this Cliff note here curiously enough it's an encouraging thought that we still know so little about founder mode look at what Founders have achieved already and yet they've achieved this against the headwind of bad advice imagine what they'll do once we can tell them how to run their companies like Steve Jobs instead of John Scully oof the Scully dig too real the second Cliff note was if the practice of having such Retreats became so widespread that even mature companies dominated by politics started to do it we could quantify the s there's a word I would never have expected him to use you can qualify the sentencing of companies by the average depth of the org chart of those invited I like that idea like how high up or down are the people going to these events as a way to know that company also this is the one I was curious about I also have another less optimistic prediction as soon as the concept of founder mode becomes established people will start misusing it Founders who are unable to delegate even things that they should will use founder mode as the excuse or managers who aren't Founders will decide they should try to act like Founders that may even work to some extent but the results will be messy when it doesn't the modular approach does at least limit the damage that a bad CEO can do O fair point also fun look at the list of people who gave this a read before it was posted Jessica Livingston is Paul Graham's wife essential to the success of white combinator early on there's a famous story of Founders going in for an investor meeting and Jessica cut their fingernails before because they hadn't trimmed their fingernails for six months they were grinding so hard on their company like those little types of things like she was almost like the like parental figure for early YC and help shape it into this thing it is today and Paul credits her so much and I love that like that them as like a Duo are as tight as they are and see each other as as essential as they are not enough wives of people like this not enough partners of people like Paul get the credit they deserve Paul tries so hard to credit Jessica and I'm going to do my part here too like she is incredible and right next to her Elon musk to be fair love him or hate him I have iffy feelings overall absolutely is operating under founder mode could also be an example of someone who you need to limit the damage of but he is doing it and of course Gary tan the current CEO of Y combinator lucky to call him a friend we actually have some fun collabs coming up in the near future so if you liked this definitely keep an eye out for those because uh yeah the founder Arc is starting I am feeling more inspired than I have in a while I feel validated this is the way I like to build and think it's so nice having an article that's really breaking down this way of thinking and I hope going forward more people will see the benefits of going founder mode so until next time rat Summer's over founder mode fall has begun peace Nars




## We need to talk about the GTA hacker - 20231222
the GTA hacker has finally been sentenced I want to take the time to go into this case both because I'm really into hacks and the culture around this type of stuff but also because I don't love how this case has been covered I feel like we're missing a lot of important details when we clickbait our titles with kid gets life in prison I wanted to break down why I think that is and showcase a little bit more of well what happened here for real this is an article from the BBC lapsis GTA6 hacker handed in definite Hospital order you'll already see this a little different from the headlines you might have been seeing on Twitter there's the reason why he's in the hospital and we we'll get into that as we dig in an 18-year-old hacker who leaked clips of a forthcoming Grand Theft Auto game has been sentenced to indefinite Hospital order Aran cage from Oxford who is autistic was a key member of international gang lapsis the gang's attack on Tech Giants including Uber Nvidia and Rockstar has cost the firms nearly $10 million the judge says Cage's skills and desire to commit cyber crime meant he remained a high risk to the public he'll remain at a secure hospital for Life unless doctors deem him no longer danger here's the important piece people keep missing he's not in the hospital forever he's in the hospital until he's no longer deemed dangerous that's very different from blindly throwing somebody in prison forever there's a person who's under medical supervision but why is he under medical supervision well we we'll get into that as we scroll the court heard that cage had been violent while in custody with dozens of reports of injury or property damage again a thing I haven't seen many people talking about here this isn't some genius hacker kid just playing around on the internet getting in a bunch of trouble this is a harmful individual this is a person whose mental illness is causing them to be violent not just in the way they're damaging businesses but physically harming the people around them this person is clearly very mentally unwell in one of the mental health assessments that came up during the hearing he actually had stated that he intends to return to cyber crime as soon as possible and they said again in this assessment that he was highly motivated to continue doing this it's not like he goes out and he stops he hasn't learned a lesson he's getting worse not better there really a big part of why he didn't show up in court because he doesn't think what he did was wrong and he intends to keep doing it he seems to have a fixation or Addiction on this concept of hacking and stealing information you're not supposed to have access to to the point where when he was in a hotel under police protection he continued hacking and carried out his most famous hack the GTA hack so how did he do that without having a laptop and other technology access and being under supervision well he actually hacked an Amazon fire stick his hotel TV and a mobile phone honestly as impressive as this may sound I want to be clear that like most people who know how to hack can do it from most devices that run Linux the Amazon Fire stick is a pretty bog standard arm computer that happens to plug in via HDMI that runs Android and as such you can hack the firmware and install different things on it trivially installing anything that runs on Android which means a lot of things that run on Linux he was so addicted to hacking that despite being under protection by the police having his laptop confiscated from him that he couldn't help but continue not just hacking but doing his biggest most notorious hack to date this is a tragic tale of mental illness in somebody's addiction to in this case hacking ruining their life and there is no place this person belongs other than a hospital where he can possibly get actual help it's s to see just how much people are holding this kid up as a hero and saying that he doesn't deserve a sentence I don't think he deserves to be in prison for life but I certainly don't think he's in the right state to be out in the general public especially when you see the contents of the things he did like when he got into their internal Slack declar if Rockstar does not contact me or telegram within 24 hours I will start releasing the source code that's what like we can't just do that we can't just be okay with people doing stuff like this and again he then posted the source code and a bunch of videos a bunch of footage a bunch of information about the game all the way back in September before Rockstar was even close to ready to publish any of this information this was all when his hearings were happening like the court cases for his previous hacks were already rolled in when he started to do all of this I think it's telling that the only defense his team had is that the success of the game's trailer proved that not much harm was caused they didn't even say like this didn't happen or try to defend him doing it they said that the harm of what he did can't be that big nobody's denying what he did they're trying to fight on the potential impact that it had and I promise you waking up to a message in your slack of if Rockstar doesn't contact me on telegram within 24 hours I will start releasing the source code that does damage other than what you can monetize L measure by the success of a trailer absurd but her honor judge Le said that there were real victims and real harm caused from his other multiple hacks and individuals and the companies he attacked Rockstar Games alone told the court the hack cost it $5 million to recover plus thousands of hours of Staff time there's a bunch of additional info here like he's not just hacking to Share info they actually demanded a $4 million Ransom from some of the companies they were hacking so this isn't your ethical I want to share information that I got from a place I shouldn't have this is financially incentivized destruction of property and business in order to try and hold these things hostage this is really bad and the fact that when he was caught he didn't stop and accept the severity of what he was doing but instead compulsively continued to engage in the behavior this is a person that needs help I really want to emphasize that point this isn't some young kid who just had some fun taking data and Publishing it this is a harmful person with really malicious intent and clearly some severe mental illness right as I was wrapping this up swi in security tweeted and I'm really thankful that I'm not the only person speaking out against this now because as Swift said the GTA hacker is an avowed unrepentant scammer who screwed with individual people and he's violently mentally ill and he's on Perpetual psychiatric hold please read the articles before telling the FBI to hire him thank you this is why I was going insane this is why this video exists he also calls out the Fire TV stick thing because again it's not that impressive he mostly was mirroring his phone to the TV so he had a bigger screen while using a Bluetooth keyboard and mouse to do things on his phone which ran Android which meant it ran Linux this isn't that crazy of an impressive thing he probably just got someone's slack information yeah really frustrating to see people holding this kid up as high as they are by misunderstanding what hacking is in the news in these kinds of stories unending jobless teenage bravado for ambitious sociopathic effing around you will become misled on their actual capabilities and methods yeah they were calling the Nvidia staff help desk pretending to be employees to get login details that's not hacking why are we holding this kid so high yeah God some of the things I've seen other people post about this make me want we need to do better as a community we can't just hold someone up because they called out a company or they hacked someone you don't like like no this isn't okay the problem is this compulsive harm this individual is causing to others they can't stops from it even while in a hotel supervised by the police with no internet access supposedly they found ways to do this because they're so addicted to the rush of hacking and destroying things that belong to others this is not something we can just be cool with and pretend that this random hacker kid should be held up high I want to jump in front of this now and say we have to condemn this type of behavior hackers that want to share information for the betterment of society are very different from hackers that are trying to steal millions of dollars from businesses and are compulsively harassing not just businesses but individuals too I am thankful this kid is getting the help he needs in hospital and I hope we can talk a little more sincerely about these things because all I saw on Twitter today was people saying that this kid deserves better no this kid deserves help and letting him roam free and continue to cause these problems doesn't help anyone that's my thoughts on this let me know in the comments about how wrong I am as you love to do but sorry for make a big deal this one see you guys in the next one peace NS




## We need to talk about this benchmark - 20240418
if you're a big JavaScript nerd you've almost certainly seen this Benchmark floating around if you look at it closely you'll see next is really slow like really slow like why would anyone ever use this slow so obviously this went viral and everybody has strong opinions about it myself included what you might not have guessed is that Ryan carni and I are on the same side here this Benchmark doesn't necessarily mean much and when I the guy who pushes react really hard and Ryan the guy who made the fastest framework right now both agree and also perform poorly on this solution like neither of us have good numbers here but that's fine because the thing this is measuring doesn't really matter that much in fact the vanilla react example doesn't even spit out valid HTML so what are we actually benchmarking here great question let's dive straight in this originally was surfaced by Adam rakus because he saw Dax playing with it and the numbers that are here don't look great if you just read this for what it is react in the time frame which I think was 10 seconds was able to do 537 Ops per second sorry so it's 5,300 total so 537 Pages rendered per second but next can only do 41 so this is for when a request is made to the server how quickly the page can be generated by said server and sent to the user so this is obviously really important right like all NEX does is generate pages on the server shouldn't it be really fast at this eh I have a few things I want to emphasize here because this is this is an interesting problem I don't think this Benchmark matters a whole lot and I have a lot of things I can show to show why I should have probably scripted an order of events here but that takes way way too much effort and thought to do so instead I'm just going to show you guys some of the cool things I have found as I been testing this myself researching it getting changes made to The Benchmark Library this is all based on and we'll dig in stick around to the end if you want to see better benchmarks that more realistically represent production workloads cuz I've been working heavily on those too but first I want to look at what others have done as a result of this first off I got accused for dodging things somebody said uh you've been shown the code what now when I was literally at a conference so I just I found that hilarious that just because I've been shown the code that I'm immediately expected to respond and defend every single thing this is a nuanced thing that's going to take a long video look at the bottom to see how long this video is it's absurd because this is a complex problem serers side rendering pages on requests is difficult but importantly the speed of the rendering is not the thing slowing you down if we had a spectrum of the things that make your render performance slow we could say like this is vanilla react let's say react so reacts rendering time takes that long and then next JS rendering takes said 14 times longer right that long the harsh reality is that the actual time this takes to like do everything you would need to do like if you have database query and all these other things is going to look more like that and as such the amount of time you're spending on rendering just doesn't really matter a whole lot and that's the point I want to emphasize here is that while these numbers look bad if you look at them a little tiny any bit closer and you see that we're talking about Nan here it starts to matter a whole whole lot less but I'm not the only one saying this to be very clear I want to be sure that it's known that I'm not just here defending next because I'm sure if you look at the comments right now it's a bunch of people saying oh yeah versel pce the of course he's going to defend it in case anyone here somehow doesn't know this is Ryan carne he's the creator of solid JS which is the thing that wins all of these benchmarks almost always you might have noticed that solid actually isn't winning this Benchmark for once and if I go back to the Benchmark itself which you'll see here solid is not doing great react is eight times slower than Marco and solid is 10 times slower than Marco which makes it a decent bit slower than react but like for solid to be performing worse than react this should be a massive massive red flag for the usefulness of these benchmarks because we all know it's just common knowledge that solid is significantly faster than react so for solid to be this much slower than react and comically slower than Marco suggests that these benchmarks aren't super valid so I'm trying to emphasize here is that these benchmarks are valuable but not for individuals trying to decide what framework to use they're valuable for the people building these Frameworks and even then not that valuable because the percentage of your time in your compute spent doing the render on the server to generate HTML is so small that even 50 Xing it isn't that big of a deal and that's the thing I really want to emphasize is that this number is such a small percentage of your runtime cost that even the fastest framework doesn't optimize for it so let's hear what Ryan has to say because he is he is The Wizard of JS performance there is nobody I would trust more about this than him and he he put this much better than I possibly could have let's talk about benchmarking for a minute because I feel like it's a topic I it's funny enough my stream on benchmarking is probably my least popular stream to date he did touch on something there I want to Riff on a bit there's a couple of these topics that feel like everyone cares a lot about them because they bring them up on Twitter all the time those include things like lock in like uh unexpect really high bills and now benchmarks which is sad to see benchmarks fall into this space I frustrated because I don't feel like these things come up as real critiques even though all of them are real problems I feel like these things come up when somebody doesn't want to use something and they're looking for an excuse to not use it it's okay to just not use it you can say I just don't want to use next that's fine if you don't want to go use something else but when you keep making up these different things to sound like you're making a smart decision it's just weird and the reason I believe this is whenever I make a video covering these topics even if I am on the the mob side of the thing nobody watches them my videos about walk-in have all bombed my videos about the unexpected bill on netfi that won with the crazy bill which was entirely unacceptable by the way that video bombed too both Ryan and my videos about benchmarking have bombed as well nobody actually cares about this topic they just care as they can use it as a weapon to attack the things they don't like this is why I am frustrated and I believe why Ryan is frustrated too because it seems like everybody cares about this so we come out and explain how this actually works and then nobody watches it so if you're actually this far into the video and watching still let me know in the comments and also go check out Ryan's video about benchmarks it's even better than this one I'm want to go here because I wrote I wrote this this is such a good quote by the way benchmarking is easy unintentionally cheating benchmarks is easier creating useful benchmarks is hard having those benchmarks be fair is harder this is clearly a sub tweet reason I want to bring this up or or say this is because people Benchmark stuff a lot and I always hear it with Solid 2 like on the positive side where people are like oh I I took this react app and I or I took this solid example and solid's way faster it's like yeah I mean the thing's not doing anything you're seeing how fast you can update text obviously the thing that doesn't have to diff and literally just sets the text Noe is going to be faster than pretty much any other framework out there right no component render like even less than spel you know like you know this yes if if if I wrote a vanilla routine that just said set this text you know as fast as possible over and over again that'd be even faster than using the reactive system but what I I sometimes isn't always obvious um is that you can make assumptions that actually cheat the benchmarks so to speak right where you do things where like unintentionally you skew skew the results of your benchmark perect we're going to show some fun examples of how that applies here in particular I don't think you guys understand just how many hacks a framework can add in order to make those numbers look better usually they do it by just opting out of all of the features of the framework and having a happy path if you're doing literally nothing in order to make it so you're not even using the framework but the reason certain Frameworks are performing so well on this is they're basically not using the framework they're just rendering the HTML and then letting the client deal with the weight after the fact perfect example of this was some of those early tests uh sorry sorry Aiden um with million JS comparing the performance to react and preact and basically there's some overhead in The Benchmark that kind of skewed it this can also happen and I'm saying this as an investor in million. JS that is very excited about what they're working on the initial Ben marks did not really showcase the the reality of the performance difference there so I yeah I I'm calling out a company that I've thrown thousands of dollars too because I think benchmarks are that important and I think that representing things fairly is important too still love you Aiden you've gotten a lot better about this since when I I first entered the JS framework Benchmark with solid I wasn't doing some things that were required and I didn't realize why and I didn't think they would make a difference and guess what they actually did make a difference um when I implemented it initially um solid was like much faster and I was like thought you haha I knew this would be really fast but the reality of it was you know it wasn't nearly as fast as I thought it was because I would missed some details right it's very easy to make a mistake um and kind of cheat a benchmark I do highly recommend basically everyone watching this if you are interested go check out this part of the stream I'll be sure it's timestamped in the bottom because it's really good but there's a couple specific quotes I'm looking for here right now I'm T whe saying benchmarks are useless but on the other hand lots of benchmarks are useless woo Spitting Fire right benchmarks aren't useless lots of benchmarks are useless this one where it started actually hugely flawed because at least if it's the exact for for multiple reasons right first of all rendering a hello world well it depends on what you're testing let's see here if you're just testing the overhead of the framework then I guess this is fair because rendering hello world doesn't actually test how fast the framework renders right I'll granted this this original test is actually not the worst in that if you're just like how much to start to like if I if I had AWS and I was running AWS and I was like uh you know if I take my cold start plus framework startup on a request or whatever like what what am I dealing with yeah this is an important Point like this Benchmark as a way for framework authors to optimize like really happy paths where we're just spinning out hello world could potentially be useful to catch things like a regression what it is not is a way to make a decision about which framework you should use which is the thing I'm seeing that causes me to make this video now like to be Frank this is something that should stay purely in Ryan carne's world like this should not be leaking over to my channel because he's the framework guy I'm the app guy I'm the one who takes all the cool things he doesn't build really shitty slow web apps on top of it we shouldn't be agreeing this much but we're agreeing this much because everyone else is freaking the out for reasons they don't understand see this duplication thing where you notice all the ones that are times one let me blow this up a bit so you can see it are faster than all the ones that are times two it's because these are the ones that are actually sending data required for hydration yep another important part here is that like the things that go really fast aren't hydrated they're just spinning out HTML on the server the things that have the data duplication have enough data to continue rendering on the client because if I just send you an HTML page nothing can be updated but I send you the HTML page and some data about what was used to generate that page then you can do further rendering and that's just not accounted for here at all I like they added this to The Benchmark to make it clearer but also shows that like in order to make view even faster you have to make it so the client experience is fundamentally different from the server experience these apps actually don't send the data for hydration so you're basically doubling the payload basically either you choose to to use an example that's hydratable or you choose to use an example that's Nots some of these are streaming and some of these are not which also makes a difference too this is an important point I I see people saying that the Benchmark is good because people are making performance improvements off of it which like yeah cool there's per improvements but like how important are these improvements I think Ryan summarizes my frustration here weirdly perfectly you guys Shi JavaScript right you you you hydrate I some people saw this like oh it may view two times faster in this Benchmark well do you think Evan would have missed a 2X gain on something that was actually useful thank you so much Ryan do you think Evan U would have missed a two times Improvement on something that actually mattered let's be real here anybody who thinks this Benchmark is important is also saying evu and the view team are dumb and I don't think that the evu and the view team are some of the hardest working and smartest people in the entire industry so for them to find a 2X win here suggests that the thing that they multiplied by two was not an important number because they would have found it much earlier if it was so yeah this like perfectly encapsulated my frustration because people see these these two times wins and they're like oh my God benchmarks are so important they're making the web faster no they're letting us show off numbers that just don't matter and it makes us feel good about ourselves which is all this is people feeling good about the choices they've already made not actual good decision making or process so what's wrong with these benchmarks why am I so frustrated there's a couple things let's let's start breaking these down one at a time we should probably actually look at the Benchmark and what it does first so I'm on a forked version so we're going to read through this code first and then I'll go play with my Fork right after so in this version the codee's actually pretty simple and I I have to shout out the author of this repo EK and KC he's killing it I can this is as a framework nerd a phenomenal Benchmark of important inw working things that are fun for us to bicker about he did not expect this to blow up the way it did he built this for fun to be part of like the the framework meta conversation and if anything he seems a little bit frustrated that it got as big as it did and I'm sure it must be annoying having PO requests coming in from every obscure framework author trying to add their framework to The Benchmark and their opinions in it's stressful when something like this blows up the way it did so massive shout out and respect to the author this codebase has also been really Pleasant to work in I've been using it a ton over the last few days trying to better understand what's being benchmarked here so the big piece is that we have these handlers the handlers are this array of things being imported or used above that spit out a request response compatible Handler that you can send a request to and get a response from this allows you to take just the Handler and not testing any of the overhead of HTTP or stuff like that and just say hey here's the request that came from the like uh HTTP framework give me back what I would then send through the HTTP framework and it lets you just test that part so we're not testing almost anything else to do with this like runtime we're not testing how quickly the request is parsed how quickly the response is generated how quickly these things are handled by the HTP layer we're not testing anything to do with data anything to do with real async however there is a bit of async and here's where things start to get fun we have in our modules the test data call so this test data is used in all of the things being tested and it is returned as a promise that does ass set immediate so it does get thrown to the top of the or well I guess the bottom of the event Loop but it doesn't have to wait at all it just immediately resolves so everything else the framework does goes after immediately and then we get to the step but because this is async because this returns a promise it forces all of the handlers in all of the Frameworks into async mode if they support it so again welld designed this this does make sense for what it's trying to test which is what is the overhead of a very blank empty render in in these Frameworks so we look at the next examples to better understand how this code's actually being used we import test data we have the app default function that returns table where we actually await test data here and we have the table function here where we actually render the entries and here's the function for an entry the important piece here is we await the data up there and then we throw it in here and we return it pretty simple Benchmark so these numbers look awful I'm not going to pretend they don't I'm not going to pretend seeing next and saying 14.7% slower doesn't suck what I'm saying is it doesn't really matter I'll show you what I mean I've been playing with the Benchmark a bunch changing the formatting of things a little bit but mostly making one important change the one change I made is in the test data module I increased the amount of time it takes because by default it doesn't take any time I just bumped it to 100 milliseconds so now the data that your service is using takes 100 milliseconds to get that could be you're fetching data from a database that could be authenticating the user could be a lot of things and honestly 100 milliseconds for most Services is quite generous chances are it's going to take more than that even just to make one network requestor connect to a database it's not that it takes 100 milliseconds to just fetch data it's that you're doing multiple things in series such as you're authenticating the user and once they're authenticated you're then fetching the data and then you're sanitizing the data and then you're sending it to the user and if any part of that chain happens to be going through a serverless workflow that might be a cold start yeah this could quickly add up I've had services that take 3 to 500 milliseconds to generate the actual data that you need in order to render the page so now that we we bumped this up to 100 milliseconds we can take a look at the difference in The Benchmark performance and that is the only change here to be clear I had a random function that I was playing with to make the range different but I found that that made the Benchmark less reliable because different Frameworks could regularly have different like Min and Maxes to which made it kind of unfair so I chose to make this a fixed number for the sake of getting the most reliable data I could the other change I made I think this one's important too and we're going to be playing with this even further cuz changes were made to the library I added a bit of parallelism previously this Benchmark was testing request request request request in real load you're not getting just one request waiting till it's resolved and then the next request comes in right after you're getting multiple requests at a time and you're handling those some level of concurrency involved this Benchmark wasn't testing that at all and at the time the tiny bench Library it was using did not support parallelism if we go to Tiny bench though I actually cut an issue yesterday because previously it did support concurrency and then they added sequential as the default and then they added a PR that removed the parallel options entirely so I wanted to be able to test this with concurrency and of course Muhammad immediately filed a PR and got it added before I even started the stream Legend absolute Legend So what I was doing for concurrency before is I set this  parallel limit of five and it wasn't actually parallel cuz like if you had five requests and the first one resolved the six would wouldn't come in it was in chunks of five and even that I saw pretty significantly different numbers I'll show you what those numbers look like quick and then we're going to change this to use the actual proper currency mode that they just added actually one other important change I made previously they locked this on time I found that that wasn't the most reliable thing especially once you get into the longer runs for some of these so I change it to 100 iterations so it runs these 100 times instead I had also previously commented out a bunch of the Frameworks that I just didn't think were as important for the Benchmark but I left them all in for this I did comment out the uh recently these were split into two sections there is the uh renderers and there is the Frameworks where a renderer something like viewer react is the actual JavaScript library that generates the HTML and the framework is the thing that hosts it on the server so like next or next so I separated those so that it was clearer when you broke them up but I just commented out the part where they run the um one for the Frameworks because I just didn't care yeah here The Benchmark handlers I just commented that out because I the renders is what I didn't care about so I commented that part out I care much more about the framework side cuz that's where the scary numbers were almost done cool so here we see just by adding 100 milliseconds of data fetching we went from a 14x Gap to 1.5x Gap from something that doesn't hydrate the client side I think this highlights just how not big of a deal this is but now I want to try out the new stuff that was added quick once again like huge shout out to everybody involved with this like none of the engineers who are involved in are contributing to this did anything wrong here at all they actually did something pretty dope what I'm upset about is that their work in benchmarking these like nitty-gritty details for fun has been mistaken as reasons to use or not use specific Solutions which it is not if anybody looks at these things and thinks that they're a reason to or not to use these Frameworks they fundamentally misunderstanding the Frameworks and disable all the things I wrote for parallelism because they're stupid comment that out rename this to run now it will behave how it's supposed to it should also be a lot faster I leave that on 100 iterations I might bump that up to 400 cool a run concurrently and this takes a number we'll give it five oh no is it running them all that was not quite what I expected for run concurrently I expected to do five steps at a time in one of the sections rip so close but so far I was hoping to try the new concurrent mode out but despite the great efforts by Muhammad there was a small bug so we might try that later we might not follow me on Twitter or even follow him on Twitter if you want updates on that regardless tiny Li has been awesome to work with and is a huge part of why this has been like viable again with just that 100 millisecond penalty though and the concurrency we're down to 1.5x slower it's significantly less bad than everybody seems to think uh the results are showing raw SSR performance without any data fetching and it doesn't account for data serialization which is why the react code seems faster than solid because vanilla react doesn't bother serializing the data that's handled by Frameworks this is another interesting thing I don't think people get is the idea of like how much a given tool is doing so if we have the like full stack react experience we'll call this this is full stack react the Spectrum has Parts part of the spectrum is going to be react and the other part it's going to be the framework so we could draw the line we'll just pretend for now that it's in the middle so I'll put this in the middle we say on one side is react and on the other side is the framework next remix Etc some Frameworks build more into the framework side so if we compare this to like solid you'll see that like solid does a lot more of the work solid starts like a relatively small addition on top compared to something like react where the react part of the full stack experience is actually quite small they Define the protocols and the expectations that react has but the vast majority of the work is things the framework does how do you get the data to react how do you respond to the request that the react page is making how do you stream in the pieces that the react server components use and utilize how do you handle server actions how do you bundle it all of these things are problems that the framework has to solve for and when you're just using react without that you're not getting any of the things that we now expect with full stack react if we look at the source code for the react example I think you'll understand what I'm saying here because it is very very dumb boring and simple here we import the test data we bind a ref for it they actually use suspense in it which is nice at least then they use the uh use hook which is the react way of handling a promise I've yet to get this working in almost anything specifically whenever I use use on client it bombs so why does it work here well we're not actually shipping anything to client here that's why we're rendering this on the server so function table returns T data and then we get the actual table rendering by the way mohhamad if you're still here I hope you're not stressing out like I I know how stressful it could be to have your work Showcase in front of thousands for the first time don't worry about it you're killing it and this is awesome stuff I'm like actually really pumped with this Library what the why can't it what broke what did I change that it's oh is it because everything expects an array now and it's not an array anymore oh yeah this is a mistake I made yeah the response zero I that up cool this is what happens when I write vanilla JS this is my fault entirely edit length error was a skill issue on my part and I want to try the concurrent thing again now too everybody loves to use the benchmarks that their tools enabled to complain about but nobody actually checks the benchmarks like the tools that make them possible oh look at that when I disabled the concurrency we're actually down to 1.28 times slower for next so like yeah hopefully you guys are starting to get the point here that these numbers don't actually mean too much oh I killed it I I wanted that open though God damn it that was a dumb mistake on my part I want to go to the react one guys this is going to be so awful to edit I feel so bad I I've posted the results once or twice since changing the Benchmark up and people were very mad at me so that's why I'm doing this video so I can at least have them give them something we point at this is some really good HTML that we just got back but if we go to here cool so here is the code we get back from the react Runner it has all that random data what you'll notice here is that there's almost no JavaScript here at all all so all there is here is like a very minimal react like data loading bit for the suspense and that's it there is no other JavaScript loading which is important because if data changes or any other things occur on this page it does not have the necessary context to do anything with it it doesn't even have like head there is nothing in here other than that one script tag that is actually useful for running on the client so it hasn't embedded any data it hasn't done anything to the data that we have above here it just spit out the HTML and it does that with a very simple reactdom server. render to pipeable stream that's it this is the framework in the vanilla react example there is no framework it's just the pipeable stream we don't even have the ability to run the JavaScript on the client because we're not shipping anything this is just the generation side whereas with next if we look at what the next code spits out we actually first off get an HTML page because it's an actual HTML document so huge win already the other page wasn't even HTML because it's just piping the Stream so now we have valid HTML first and foremost but if we go in here you'll see we have a lot of other useful stuff we have this script that includes a lot of things that are already here so we have this string if I select this I'll command f for it and you'll see that's an element here so why do we have that there as well as in the JS isn't that like unnecessary why do we have all the data twice because it means we can update the data it means we can get changes it means we can process changes it means we have the things to mount unmount and play with our website it's Dynamic and we have things we can do but importantly you see see all this crazy escaping and the server had to escape all of those things and put them in a format that they can be embedded this is important additional work because it lets you navigate and actually use the page it also enables things like pre-etching so if you have multiple routes you can go to one and the others will load in the background so when you go to it loads faster it also means that if you need data in order to switch between those routes and render the components without having to go all the way to the server for the whole HTML you have that it's a really important pattern that is used in most Frameworks now and I mean that like the only thing that doesn't do this that has good client and server behaviors arguably is HTM X but also there's crazy stuff going on in the quick world I have a whole video covering that if you're curious look for my quick two vid but you need something to allow the client to know what data exists and what it's going to use for those things Astro doesn't count because as is not a client side framework Aster doesn't run JavaScript but yes this is a huge part that's missing is twice the data is being included and it has to generate this in a format that actually is compatible with JavaScript and is serialized such that it's safe to over the wire these are not simple problems and they do a lot of work to make sure these things are good but yes if you're comparing this to a crappy HTML generator that isn't even valid HTML it's going to be slower absolutely it's going to be slower but that's why I don't think it's a fair comparison cool while that is running one other fun thing I learned while I was doing this these benchmarks went so viral that people were looking at Benchmark JS and they finally decided to Archive it it hasn't received an update for like over 6 years but just now just a few days ago they finally got killed so once again congrats SL I'm sorry to our friend Muhammad working on Tiny bench because you went from like a nice modern option to like the standard overnight congrats good luck I do not envy the issues you're going to be seeing popping up constantly over the next few months you build something awesome be proud of it cool look at that once we turn on concurrency the numbers are like hilariously close now like hilariously so I didn't expect him to get that much closer honestly I'm a bit surprised and also for um this is Marco right for for Marco's performance to go to once you're running things in parallel none of this is stuff I would have expected so yeah the more you make this resemble the real world the less these benchmarks matter is the thing I've noticed quickly like if you throw out the real world and you're just testing this one thing and that one thing for different Frameworks accounts for different stuff that you're not doing it's going to be an issue oh m mfng is an RSC thing oh my bad didn't know that I have no idea what that is I guess that if that's a new server component thing I'll definitely check that out in the future but it seems like it does not handle the concurrent stuff as well as I would have expected anyways I want to talk about the things that we've actually seen improved as a result we see in this jarky tweet framework users micro benchmarks are useless framework authors we fixed a real bug after looking at micro benchmarks yes there are things framework authors can find from this but the fact that a 2X win wasn't found until now shows how little these matter I don't know view well enough to go read the PRS and explain them but I do know next well enough to read the PRS and explain them so we're going to take a look at the first of what will likely be an arc of the next team getting nerd sniped into caring about this one it doesn't actually matter that much and here we see get server Reser HTML has been improved as well as create head insertion transformation stream this PR improves the server rendering performance a bit especially in the app router it has mainly two changes a rough benchmark test with a 300 kiloby lur Ipson page and SSR is about 18% faster on it as well as these two improvements this is the things you're going to notice here this is why I don't care the first step is that we we avoid an extra render to readable stream if we already know the content will be empty we avoided a stream await all ready for better parallelism with stream to string and we increase the progressive chunk size these are changes that arguably do not matter at all in 99.95% of apps they're literally adding opt out things so if we know this we skip this path like here's one real optimization we're not calling the path like generator function because it doesn't change within this Loop that's an optimization cool we've now saved oursel that check but also if it's the current one we just have an escape for the slash current page it just these are the types of like things they're doing where very specific use cases like testing the root path with really basic rendering is slightly faster now because that's what this Benchmark was checking for and we switch this uh render server insert HTML to just be the server inserted HTML object that we call above here and we skip the step now if we know the content is empty this is the the big change where I'm assuming most of that performance win came from is if you're not actually inserting HTML from the server to the client we skip this step the whole point of using App router is that you're inserting server HTML to the client so if you're using App router and you're not actually using App router here you go it's slightly faster cool but this is the point there's no need to wait for the stream to be ready like calling a wait stream all because stream to string will wait and decode the stream progressively with better parallelism Co another small but valuable win they just deleted this await stream. already because stream to string already handles that so by deleting an await they're stopping one another additional hosary check and then Jim Hopson another low hanging fruit there is that maybe we can just call render to string in some places where we know there won't be anything that needs to be streamed again they wrote all this code in a way that it is runtime agnostic and handles all of the crazy parallel server rendering things you can do in next but that means if you turn off or don't use all of those features the code that sends the response is still running that code so for them to optimize these things the solution is having escapes where if you're not using streaming or you're not using acing stuff or you're not even using server components that you can skip those parts but they wrote this in a way that is runtime agnostic and feature set agnostic which means if you're using none of next features yeah it's a little bit slower than if you're not using next but if you're not using next features don't use next like it's okay to not use next you don't have to use this framework if you're using none of the features that make the one not really meaningful Benchmark slightly slower don't use next if you can reasonably write your project in HTM X and you're already familiar with it go ahead no one's going to talk this isn't comparing that type of thing though this is the features that next enables the server component behaviors that next introduces that allow your performance to be significantly better than it was for your users very important that's what's so cool about this but these changes aren't really important and are going to take a lot of time as shooting says here this would require a large change but it's definitely worth it but it's currently blocked by their Edge react server not having rendered a string exported again if they want react to run in these other environments like the edge like Cloud flare workers these functions don't always work the same way on all of these platforms and what they built here is a solution that works on all of these platforms so could Shu go refactor a bunch of the code to make this Benchmark slightly faster and also keep it running on edge sure could they drop Edge support and immediately Slaughter this Benchmark possibly but they're not doing that because they're focused on building a framework that allows for people to build real quality production software I do want to talk more about what Jimmy's had to say though for those who don't know Jimmy's the engineering manager on nextjs great dude again versel is not paying me to say this at all we have not talked about this whatsoever this is my honest take on these things but I wanted to read his response to the drama because I think it's pretty good for those curious on why app router looks worse on those benchmarks I can offer a few technical reasons first a disclaimer benchmarks are good but they never paint a whole picture as I showed in funny enough you SI me as I showed in one of my tweets a simple slow fetch totally derails the numbers and makes every framework look pretty much just as slow this likely happens for 99% of your apps if you're really concerned with raw throughput then maybe look for a lower level backend framework I do think NEX has a lot more qualities to offer than ra performance yes if you actually think these benchmarks matter you should first off be making a lot of jokes about PHP because up until recently PHP was hilariously slow and it went from hilariously slow to almost usable but if you care a lot about how many times your server can generate an HTML page go right didn't go or rust maybe C or C++ but these numbers don't matter that much that's why we don't normally talk about them they just look bad in the screenshot and it makes the thing that we don't like easy to make fun of but that's the only reason it's went viral is we want to make fun of next sorry on the raw performance you can divide the time spent on a request roughly like this the routing part is done by the next router the rendering is done by the react server component server and the plumbing is done by next to make sure the response gets piped and streamed correctly to the user and if you don't think this part's necessary might I remind you when we last ran the Benchmark we don't get valid HTML back from the react so if you want react on the server to generate valid HTML it's a necessary step the next routing part is common to both pages and app router it is slower than it could be but it's not a big bottleneck we do have plans for a rewrite but app router stability in DX comes first another important point the amount of times that people myself included complain about instability in next in the overall nextjs experience is huge and it should be because when they make these huge changes and things break it is infuriating and it makes people bounce off the framework I've had my own frustrations I had one recently I'll even demo it quick so I have this parallel route open I have this text it's not even blue anymore I already Chang it back to White so I have to refresh to get that to persist now it shows it as white now if I change this to text blue save it it worked that time and that time it didn't because it's not in the bundle do you see the point I'm trying to make these are hard problems to solve and previously when I made these saves it would just kick you to the other view so it would be as though I refreshed here and even funnier when I was editing on this page which I can do now it would sometimes kick me back to the modal view there are so many of these weird bugs that have existed in next not because next is this evil bad thing that's full of terrible engineering rather because making a framework that does all the things next does while providing a good DX is a difficult problem and their priority is fixing these types of bugs so that we can benefit from the framework as much as possible and overall I think they've done a great job at that I just want to emphasize the types of bugs that they're focused on solving aren't things people are going to be outraged about on Twitter but they're much more important for the day-to-day experience using the framework like I didn't see anybody shouting at the mountain tops about how the parallel routing breaks hot module reloading specifically when you're using uh Das Das turbo which oh that's probably why it wasn't breaking as hard as I expected yeah you get the point fixing these painful small things might not get you a lot of cloud on Twitter but they're really important and that's been the focus for the team for a while not these unimportant benchmarks I will say this has bit them a few times like the dev experience using webpack with next was unacceptably slow when app router dropped it was beyond frustrating having like changes you were making not appear in the browser until seconds later like running out of memory was awful and the reason they didn't focus on that was admittedly similar to this where their focus was both making the best DX possible for app rouder as well as a bet on the long-term investment Into Turbo pack they would have made webpack faster if turbo pack was known to take as long as it was going to take but they thought it would come out soon so they focused on just making a good DX and let turbo pack handle the rest that's kind of what's Happening Here the difference is it matters even less so I'm a little concerned that the efforts of the next team making next the best experience possible are going to be sidetracked in a performance War around a number that doesn't actually matter that much yeah so more info on why it's slow for the server component rendering part this is where things get a bit interesting one reason why the performance is not one to one with a classic react SSR pass as shown in the Benchmark is that you can think of it as an additive separate step you render your server components and then you SSR that as well as the client code to HTML and you send it over today there's a bit of overhead in these two steps but I know that Josh has some plans to overhaul and improve this in react land another bottleneck in NEX perf is that we use the webstream implementation of the server components and SSR renderer mostly because it was easier to share code between node and Edge this is again why I'm so annoyed because they're making decisions to make next much more flexible and powerful and to be frank nice to use even outside of our cell the fact that you can run next on edge runtime means you can run next in web workers which means you can run next on something like cloudflare they could make this faster for node but by making it faster for node they would also be making it incompatible with Edge should they do that I would hope everyone here would say no there are a lot of stream operations during render in next and while some of the overhead is on us I believe that the node web streams are not fully optimized yet and there's some overhead when using them I also love the ownership while some of the overhead is on us node web streams are not fully optimized yes something I actually tried but I couldn't cuz getting all of the stuff set up really was annoying and I might do it for a future video so I wanted to actually try running next on edge runtime locally to see what the performance difference looked like if there was one at all just out of curiosity my gut is that node would be slightly better optimized still but I was really curious and didn't have a chance to test that someone else does let me know and I'll pin your comment one thing we're exploring is potentially refactoring the whole pipeline to use node streams instead which are more battle tested fair but again web streams are standard node streams aren't it kind of sucks that next's attempts to follow web standards are getting them here cuz if you guys remember next got so much for not following web standards and then they started and nobody nobody cared it's another one of those things that falls in the bucket of stuff people don't really care about like benchmarks or like lockin where they just say it so they have an excuse for not using the thing that they didn't want to use and again if you don't want to use next that's fine but they went really hard adding web standards cuz people were complaining about it nobody cared and now I'm scared the Michael really hard trying to fix the performance stuff here and no one will care but part of why they're having the performance issue in the first place is they're using web standards instead of node standards yeah so again they could make it so they're not following standards and it would be slightly faster similar to how the react example we just saw again I hate to keep doing this but I really want to emphasize serving a non HTML wrapped stream of TRS and TDs is not following web standards this is a dump of elements that aren't even part of a like HTML document this is not a meaningful comparison of anything and pretending it is a fundamental misunderstanding of web standards and the web as a whole so yes if you're just spitting out Mal formatted HTML you can make something faster than next and if you make something that doesn't follow web standards you can also make something faster than next but if you want to have a good experience both for the developers and for the users I still truly believe NEX is making incredible compromises and until I see other solutions that offer the same functionality both for devs and importantly for users it's hard for me to care like it just this isn't where your bottlenecks are if you built a service where your bottleneck primarily by the amount of time it takes for the server to generate the HTML rewrite it and go totally cool with that but none of us are actually bottlenecked on this otherwise EV and you wouldn't have found a 2X win nobody cares this isn't a real number that means much of anything beyond a thing for framework nerds to micro optimize for fun and like if this never escaped the circle of framework people if Evan just like quietly did this cuz he discovered that cool but the fact that every framework author is effectively being pressured into optimizing this number that doesn't matter that's incredibly frustrating to me and that's why I took the time to sit down play with these benchmarks and make this video I want to run this once or twice more before we wrap up because I'm just curious if I can consistently see the much better numbers now that I have the concurrency enabled I have it running 400 it should take a minute but not too long reun moving removing the delay I can do that waitting for that to run maybe shouldn't have had it run 400 times and that's pretty consistent yeah that's actually really consistent I was expecting the numbers to be a a bigger Gap there but it turns out when you run things concurrently which is how we actually deal with network requests that the performance on these things is a lot closer than it was before too so let's change uh per request the test data to not be 100 milliseconds um I should probably switch this back to the original code let me do that slow drop this guy instead have to rebuild this is why I want to have turbo pack because it'll make these steps a bit faster cool now we're not actually blocking we'll see how fast it is just with the concurrency of five down to just n .5 times slower with the concurrency enabled interesting that remix is so fast as soon as you can run multiple tasks at once like I did not expect remix to suddenly be like a champ what is the remix one even serving is it also doing the mouth format HTML thing no it's not it's properly formatted HTML oh remix is using defer so it's not blocking on render to string that makes sense yeah I did not expect these numbers to be so much better simply by running them concurrently in the end I hope you guys understand how little these benchmarks matter for most developers they are really cool for us to nerd out about on the framework side but sometimes our nerdiness spreads too far and people misread the stuff that we're talking about so if you're using these benchmarks to pick your framework you're using them wrong if you're using these benchmarks to make your framework perform better cool have fun with it you're using these Frameworks to shame others for their technical decisions you should feel bad about yourself because that is never the right way to go about these things otherwise again we'd all just be making fun of PHP because it has been the slowest Solution on the server for a long time anyways until next time peace nerds




## We stopped using serverless. The results are insane. - 20240918
it's been a wild year and a half since we launched upload thing over 8 million files have been uploaded from hundreds of thousands of people and tens of thousands of different applications but today we're announcing a really big change we've put the last 6 months into overhauling how upload thing works internally and externally and uh it's time to share what we've been building I couldn't be more excited to reveal upload thing V7 and all of the crazy stuff we've done most importantly upload thing V7 is as much as five times as fast for users to upload their files it's a speed that's like not even believable I am blown away that we were able to make it as much faster as we are and you might have even already seen the speed differences because I've been dog fooding the upload thing V7 with pck thing since we launched remember when I said that pic thing was largely to dog food different apis and things we were working on a lot of that's the image optimization side but part of that was the new version of upload thing and it is so fast it is unbelievable but we haven't compromised on any of the things that make up looking great in the process and I want to break down how we got there what we did and most importantly why we bothered with all of this stuff so I'm going to read a blog post but this time it's my blog post it's a little bit different V7 is here this release has been an absurd amount of work so proud of the team and what we've built huge thanks to Julius and Mark for making this one happen Julius in particular did most of the infrastructure work here and I am very thankful because I I would not have had a good time with that and honestly it's just going to be such a relief to have this shipped because it's been on all of our minds for this six-month window and we've had a lot of work held up in that time as a result but we need to dive in it's really hard to not just go straight into the nerdy details but the whole point of upload thing is that you don't need to know any of those details with that in mind here's what's relevant for most of y'all upload thing is now way faster uploads can now be paused and resumed seamlessly so if you have a bad spotty connection is much better experience overall fun fact S3 can't do that we've added support for remix very fun change keep an eye out on that package we've fun things for the remix folks and we started to shut down Legacy infra from the initial UT launch the original upload thing launch was uploading and accessing files straight from a production S3 bucket we have been moving away from that since that first 3month window and we're finally putting the pieces in place to start sunsetting that that is what caused the outage a few days ago but that's separate if you are ready to upgrade now there's a guide that you can click on and do I did just do this upgrade for a benchmarking test and there was literally zero lines of code changed it was just the package swap so many people want have to do anything at all other than swap an environment variable let's dive in but first let's brag about the speed difference because I didn't believe it at first I thought there was a bug or something was wrong because I've had benchmarks that looked like this type of change and they were just erroring out and I wasn't seeing it but I I tested the hell out of this earlier I even have the Ben Benchmark open source for those who want to play with it so if you want to see The Benchmark I didn't even touch the read me on it yet just made a quick test for V6 versus V7 and the speed difference I saw was insane you know what I can just show you guys because the 3 77% faster and the 9% faster just sounds made up but I can show here is the V6 test going to grab these four files uploading uploading uploading took about 5 Seconds now if I switch to the V7 Branch but this is an actual production app that is writing your information to database and doing the whole full stack thing 1.5 seconds night and day massive massive difference yeah it's a lot better especially for small numbers of files it's not just night and day it's like oh this went from feeling fine to feeling really really fast like unbelievably fast chat's asking how is this even possible what did you do I'll show you guys we have not hidden much of our magic here larger uploads won't actually see as much of a difference the smaller uploads are the ones that will see the majority of the difference and we'll get into why in a sec the road to V7 our initial goal with upload thing was simple make user facing file uploads as safe and easy as possible might be a bold statement but I think we achieve that the next step was obvious make upload thing the best way to upload files as well which means moving away from S3 direct uploads wait how can it be better than S3 hear me [Music] out every upload has four touch points the user's browser your server is in like the person who's subscribed to upload thing and building the website the upload thing API which is our API that verifies validates gives you permission to upload has like the size checks make sure you're not going over your capacity all those things and then S3 which is the place where the uploads would go I could go through this list but I think it'd be a lot nicer to just excal draw it out first the user request a pre-sign post URL from your server a pre-signed post is a URL that allows a user or a client to upload a specifically expected and signed file to a given server usually people use pre-sign post alongside S3 so your server would pre-sign a URL so the user can upload to S3 directly so that's what happens here you request a pre-signed URL the server that you're running comes to our API to get that URL we then hand it to you if you're able to use that or not depending on if your app set up properly use the key Etc that gets sent to the user so the user can start uploading and the user uploads directly to S3 the problem with that is when the user uploads directly to S3 you have no way of knowing on your server when the upload is done because they're not uploading to your server they're not even uploading to RI they're uploading to S3 directly and because of that it's unclear when the upload is done so we have on RS3 a trigger that allows us to know the upload is complete but that has to go to a custom lamb tojust for it which then hits our API so that we know it's done we hit your server to let you know it's done and that runs your oncomplete function that sends data back to us that we can resolve now for your user who is polling it's a lot of steps let's see how much simpler it is because the big change we made is this is no longer the UT API this is the UT inest server we'll grab this first arrow for request pre-sign because this step is exactly the same the user and their browser request a presign from your server the big difference and here's where things are going to start getting fun is your server does the reply you can now sign the upload yourself the reason we couldn't do this before is because we had 1 S3 key if we were configuring custom buckets for everybody and you all had your own custom Keys you'd be able to sign it yourself but we were the ones doing the signature for the S3 pre-sign post upload so we had to be hit for that now we don't now you can sign it yourself and the user can immediately start uploading where are they uploading too cuz they can't upload S3 that's why we made the inja server now we can be the ones to handle the upload our inja server was a lot of work to build it's using some crazy new fastify stuff it flies it forwards the packet straight to S3 ourselves and it lets us deal with things however we choose to it's also important to note that this S3 is no longer as important to detail we were previously relying on functionality specific to S3 now we can use literally anything there more importantly we could use someone else's bucket in the future so if you're looking to use upload thing inside of your own infra or with R2 or with Azure or with your own buckets we can now do that bring your own bucket so excited once the file is coming to us we pretty much directly forward it obviously we check our database to make sure this file is not too big fits within the allocation that you have for your account forward it directly and now when the upload is done we hold the connection this is an important detail we maintain this connection because now when the upload is done we can hit your server again with the on upload complete and now when you send that response we can effectively and I even want to do the the this the way that it's accurate we can effectively just forward that response directly as the response to this initial call so you'll be uploading the file chunk by chunk the connection holds and then once the upload complete is run we just trigger you back directly we just send that response back massive change massive win massive reduction in complexity just look at the difference the amount of arrows in back and forths here to this there is a real cost here though we are running our own injest server now that means we're no longer serverless our infrastructure is significantly more complex now in the sense that this exists but our infrastructure overall is comically simpler as a result the files are not stored on the inj server as I mentioned before they are directly forwarded to S3 and people are confused about this Arrow so I'll redo it to make it very clear the on upload complete sends a response back to our server and then we take that that exact response whatever this sent and we send that as the response to this initial call the thing that is not clear with this and actually I think I have a good way to do this the orange arrow so now the arrows are colored based on that request's property so this is the request being made for the upload file this is the response to that and this response has whatever on upload complete was to update this diagram the upload file call doesn't really respond with anything the completion event gets sent to Lambda this one doesn't really matter what color it is I'll do red for it which then we trigger to UT API this oncomplete runs and then this polling runs entirely separately unrelated from anything else we have done thus far but the number of requests being made here is significantly greater this is actually a different request as well so all the different colors are different requests being made even these two are different requests as well so we have one two 3 4 five 6 seven requests being made in the original version and the polling is a lot more than one request to be fair too now it's three 1 2 three because this request is resolved here that is a massive reduction in network overhead and back and forth back to the post I didn't even mention the fact there's a lot of things can't do when you upload directly to S3 I mentioned that you can't do resume ability so if your internet connection drops out you have to upload the whole file from the start again there's no way to validate Beyond like a very s simple like mime type check so if you want to check things like is the file within the capacity of what the user allowed to upload you want to validate or verify the file you want to transcode it on the Fly you want to check if it's safe or not you want to do analysis of images those types of things you cannot do at all when you're uploading directly S3 now we can do all of those things and most importantly you had no control of what happened after the upload you had to rely on something like this custom Lambda we had to trigger on completion in order to actually know the user completed uploading which is a massive security issue by the way most people when they do file uploads with pre-signed post URLs they expect the client to then tell your server when it's done they expect this to be the like hey I'm done call but what if I take that presign URL and I go fire it somewhere else what if I block your API so that you don't get that response now you never know the file upload is completed and then you get what I like to call a ghost file a file sitting in your S3 that your database doesn't know about that you end up forgetting about and we have solved all of these problems for you and I'm really excited to show how much better the result is and also a bit more of how we did it as I mentioned before we cut the number of hops in actually less than we went from 7 to 3 we removed the need for polling entirely we no longer block uploads starting on our apis verifying the upload and with all of these changes we cut the amount of js on our client Side by bundle by over 30% and that's on top of another huge bundle cut we did before so we reduced the bundle size by 84 kiloby when we moved to effect micro for the client bundle and we took another 30% hit going down with this change so now the bundle size for upload thing the client Side Package is down to 15.6 KOB minified and gzipped I I used to say it didn't matter cuz it kind of didn't because we're a file uploading service so you're already going to be uploading and downloading files that are bigger than that bundle by quite a bit but that was more of a cope and an excuse and now I don't need to do it anymore because we have a really small client but more importantly we have really fast uploads from my benchmarking earlier with the benchmarks that I shared the source of earlier I had these four images that were around a Meg each and I uploaded those 10 times to kept track of how long the round trip time was which isn't just how long it took to go from here to there it was how long it took to go from here to you getting the on upload complete response at the bottom here that is what I was timing the whole round trip time from when the user triggers the upload to when the user gets back a response from your server and that round trip time has gone down a ton if you upload much bigger files it won't be as bad but if you upload small files you felt the difference pretty heavily especially for stuff like Pi thing where you're uploading a ton of small files in batches it was rough and now it's not because as we see here we went from up to 5 Seconds to 1.5 to like 1.2 seconds for multi-image and for the single small image test again just that 800 kiloby image from almost 4 seconds to almost half a second the big thing to notice here is is the the gap between four images and one image was quite small with the multi-image test with V6 because all of that overhead is the same for all of them but with the change the amount of time it takes scale as much better with the size of the file you're uploading the number of files you're uploading all of those pieces matter a lot more now because we don't have this overhead that exists on every request anymore I also was doing this test on my local network in San Francisco that has like 5 milliseconds of latency because it's a f or gigabit connection and I still saw this performance difference here if you're on a worse Network in a different region it's going to be even bigger gaps and we are actually deploying all of our inj servers in all of the regions upload thing currently operates in that's part of why we changed the token structure so that we know which server to send the upload to I should mention the token things it is actually interesting so we no longer use the original upload thing secret because that secret is just a unique key it doesn't give us enough info but if you're uploading to our servers and we have a bunch of different servers you need to know which server to upload to and in order to get that information to your server we can't do another API request because that's just way too much time and friction so we introduced an upload thing token which is a signed combination of your secret your app ID in the region that you have set so that it will upload to that region based on the token so if you change regions for your app you also need to change the upload thing token but now you don't have to do a round trip to us to know where to upload and your user can upload directly and as exciting as this might seem we're just getting started by moving all uploads to our own infrastructure we have opened the floodgates to do all sorts of cool things we've wanted to do since we initially started upload thing we're now able to process files on the server make sure that they're safe scan them check them do whatever we want to do in that regard we could theoretically add a button in the future that is make sure files are not illegal and then we'll automatically scan them for you obviously for a fee because that cost a lot of money but now we can introduce those types of features without having a whole additional layer of back and forth and storing things in S3 before we can do it it also makes the path for things like hippoc compliance and sock2 compliance significantly better and most importantly something that people have been asking for for a long long time bring your own bucket has been unlocked by these changes there is a future where not only can you plug your own storage bucket into upload thing but we can go even further we can set things up so you can deploy the upload thing server inside of your own infrastructure if you're interested in hearing more and you want to use upload thing and all of these performance wins safety wins and overall experience wins go to the upload thing website scroll to the bottom and click the schedule a call button here and we can chat and figure out what it looks like to use upload thing for your business we're no longer just for hobby projects we're ready to ship for Enterprise so excited to have this release out we've been working on it for so long and now we get to relax a bit but at the same time we've just unlocked so many things to ship I cannot wait to Showcase what we do next but for now enjoy your five times faster uploads and let me know what you like and dislike about upload thing until next time peace NS




## Web Dev Portfolios That Blew My Mind - 20231112
every web developer has spent way too much time thinking about their portfolio some Have Made Beautiful Things some have gotten frustrated and just made it a simple pile of text I'm somewhere between the two but I wanted to go through a lot of web dev portfolios and try to find the best ones I asked Twitter to link me their favorite web dev portfolios and after going through nearly 300 responses I think that there's some really cool portfolios so let's go through them maybe we can learn something about making our own portfolios a little bit better before we go any further I'm going to start with my own because of course here it is it's beautiful it's very boring it's not really that beautiful it's mostly just boring I have a logo created by Community member Zach that I really like the background slowly fades in and out with that stripe just thought that'd be cool make it a little bit less static and it links to a bunch of stuff notably not my GitHub because I'm stupid I need to add that GitHub link eventually but we're not here to talk about me and my portfolio we're here to talk about all the incredible things people linked underneath my tweet I think it's important to start with the classic [ __ ] website it's beautiful although there are problems with this you can see my picture and my video is covering the edge here so it's it's not actually particularly readable especially on like mobile because there won't be enough padding and margin on the sides and such but somebody actually linked to better mother [ __ ] website which is great takes minimal [ __ ] effort to improve this [ __ ] seven [ __ ] declarations to turn that pile into this easy to read Masterpiece it's so much nicer to read with a very very small amount of CSS I can even open it up body margin 40 max yada y 8223 like that's all it takes to make the page significantly more readable which is great and I love that we love us a minimal site I used to actually have my site based on just a markdown file that listed like the specs of Theo the things that I thought people would want I know a couple other people who are still using markdown as the source for their sites That's a classic we're not here for me we're not here for memes we're going to be here for memes a little bit what we're here for is crazy portfolios I thought this one was crazier it's very nice yeah thank you Nick nice and simple ver. LOLOL is a classic who even made this oh hack swur of course you did hack the triangle company oh this one looks really cool from gko bger Gregory coverer damn that's beautiful how do you get the other everything's super animated this is super cool how do you get those other views that were in this was that just like light mode dark mode oh there's a light mode dark mode toggle that I'm covering with my face that's the problem that's cute this a really cute portfolio it also like points to the important information like who he is and what he does while being relatively personal this a very good portfolio signature is a tiny bit weird but I get he's like really going for the designer aesthetic so that checks out for me this is a cute site yeah I I have no issue with what I'm seeing here at all good stuff feels a little weird having the blog just dumped in on the bottom of it but that's a small complaint for a really really good portfolio obviously the animation work there is going to be really difficult for anybody who's not already doing that I'll look at that nexl linking Paco and Rano and I'll pull up his portfolio as well cuz Nexel is beautiful yeah Paco this is very nice and minimal Paco Cy crafting interfaces building polished software and web and experiences experiencing with magical details and user interfaces webmas at linear as he developed the versel design system website dashboard he's also the guy who made the command K library that everybody uses now does the site have command k on it it doesn't nice it's weird having a hotkey on the page that doesn't actually work I be very clear this is not a video for submitting your own portfolios this is people submitting the best portfolios they have seen I'm not here to just like roast your portfolios I'm here to talk about the nicest ones I've personally seen and that my community has found as well like Ros which is absolutely insane are all of these is this like a dragable canvas can I like oh these are a bunch of the things he's made this is beautiful the 30 FPS I'm capturing at doesn't properly highlight how smooth everything here is running this is beautiful this is his history the flickering if flickering is coming through in the recording that's just my capture card it is very nice and smooth on here here's a bunch of pictures he's taken that are beautiful I'm not sure how I feel about this Bottom bar it doesn't really give enough context for what these are or if you hover it does but even then like what's the difference between craft and projects yeah if he was looking for a job right now I would say this is a terrible portfolio but if he's looking to have a beautiful place that represents him in the way he does things this is pretty damn beautiful I'm sure he's proud and he should be I pulled up nex's Twitter because first off you should be following him if you're not like what the hell come on more importantly because his site is really nice too definitely inspired by Pacos but overall very simple minimal beautiful very clear why you're here what you're getting and his blog is not aggressively placed but it does give me quick access to his recent posts this is beautiful the auto Norwegian translation appearing this isn't a portfolio but it's a stunning classic table hack website to see those normally I don't want to go to the self plugs but if I got that many likes I want to check it out fancy the contrast here is a little rough to read it's like a bright colored background with that I would have like had a fade or something to make this the contents of this box a little bit easier to read I can't say it's not beautiful especially the like moving around of the background as you scroll it's very nice I actually really like how this one makes space for the text when you do the scroll I wish the others were a little better about that this is a really good one overall I would do a bit more to handle contrast especially here like I can't read this so maybe like put a gradient or something like just a faded background to contrast these things a little bit better that's the only change I make here though really good portfolio oh Jesse this is a classic there's a reason it has to cook because it's a full 3d environment and again remember my capture is 30 FPS this looks beautiful at 60 so check it out yourself go through the tweets find this link it's stunning they also don't even take over your mouse cursor which is dope this a little hard to read but you can zoom in and out which is nice I think this one's built for bigger displays I'm at 1280 by 720 for my capturing still looks great oh this actually looks really nice Management Consultant by day and developer data scientist By Night goals to combine creative thinking and design with an analytical approach to solve problems at the intersection of Business and Technology I aesthetically like how close this text is but there being so little line break makes it really hard to read especially for you with reading things like dyslexia these words are all super close and it's hard to flow through love these word web things looks really good good [ __ ] how's all the basketball stuff going on in the background does article s link to his blog yeah it does good work Jesse that is really cool I like the idea of your portfolio being like a building instead of a more traditional like website like he built something and it's his portfolio but the thing he built is very different from what people normally think of when they think of a portfolio Bruno Simon's portfolio is also a crazy 3D thing but it's a game that you play by controlling it with your keyboard and again this is much better on my 60fps screen it's actually very surprisingly responsive and you can even honk your horn and boost and play around in this world that just also happens to be his portfolio oh his projects are over here 3js Journey he made a course about 3js really cool madbox game development company specializing in mobile games Scout startup devoted to Bringing people together through Modern content this is so cool and also all the objects are like physics objects so these might not I might not not have a force to break those but I can knock all this [ __ ] over I I love this idea of like a physically interactive environment something that like has objects you can run into and hit and experience their portfolio not just as like a pile of text you're reading but an actual like interactive experience you're having and yes this little pop-up is really cute hey you seem to be enjoying it would you like to learn how to create things like this sure I'm assuming it's is going to link to yeah 3js Journey this is the course he made on how to make really cool 3D interactive things like this I haven't taken this course myself but I've heard incredible things and again this is not something you need to get your first job but if you already have a job in Tech you love this web 3D stuff and do you want to check it out I've heard nothing but good stuff about this course in particular looks like the first four episodes are actually free too so check it out if you haven't what else do we have in here T site mine used to look a lot like this it's also very out of date I think this one looks really good making code and pixels dance in [Music] harmony nice and minimal fellow YY founder he was part of two YC companies that's really cool oh losing points for the exposed color on the dumb the fact that I can pull that white out when I scroll too far yeah you got to set a better background color for the whole site minus points SMH rest was good in sub fix it oh grug brain it's not a portfolio but I'm counting it I don't have anything to say about grug brain other than you should read this if you haven't already grug brain dodev it's a fantastic little essay about why you shouldn't make things unnecessarily complex and it's again a beautiful minimal white background black text site ooh more fancy environment ones I like the use of like broken old UI and the cursor following the spotlight to see details and things here I'm ARB and I build quality UI for fun this is beautiful and he actually set the background color properly so that all looks really nice when you over scroll balloons love it I love the old font too for all of these yeah this is beautiful I love that even the blog follows the old aesthetic usually better at running CSS backdrop filters than any other browser it's not the case for blur apparently Chrome sucks at rendering blur and he has a whole article about how bad it is at that oh this one's nice Ali developer 05 also a content creator and this is a beautiful portfolio so we will give him a follow this is very much the current like design trend of the I don't want to say linear like but this like colored gradient Text Plus dark background with a gradient with a pattern underneath it the gray text the colored buttons with white buttons otherwise is like the versel site a popular thing at the moment and the inter of course the inter font for the title yeah Reen does this too a lot of sites are going this direction I do like this I hate the text is going to scroll in every time I refresh the page though especially because it's relatively slow it's fine just not my favorite thing oh those slid in real nice and quick this is way too much text for a little blob here a lot of these trailing words I I see this a lot with devs doing writing they love to open a sentence with word comma additionally thankfully occasionally I've coached a lot of developers who are trying to get into writing and blogs to like try and work out the words here with this one try deleting half the words and see if you can still communicate what it communicates there rest these are much nicer began creating animated content in January anary 2023 and within 1 month gain 10K followers My Kind has been well received by many people and I'll continue to prove it every day yeah that's much better things like that are really powerful what's this this is beautiful this is great every time it head hits it changes the font this is incredible I continue this by scrolling yeah God I love this again slight contrast issues but that's just it follows the cursor cool I can just move the cursor out of the way and not have contrast issues my work has been featured multiple times of various Publications and award shows including my mom's Facebook timeline that's such a good little bit of copy oh this is great this might be my favorite portfolio so far and it has all the real important context at the bottom with the awards he's gotten but more importantly the pixel art versions of the logos for all of the Brands he's worked with this isn't some bad like quick like downscaling of the logo this is actual like pixel versions of these logos that were hand done some amount that's nuts download rume so you actually get a normal PDF resume and then see stuff I did this is so cool yeah the PDF resume is worth looking at for sure let's do that how do you make a PDF look still beautiful good good [ __ ] this is probably my favorite now this is just its own thing and I like that a lot like if I was hiring a designer somebody who can work within their own [ __ ] design system like this this well that's one of the most positive signals I can imagine this is absolutely beautiful and I hope Alex is proud godamn that was a really cool one embed I know I don't like showing the self plugs but EMB bed's a legend she's made a lot of the things that have made our best content she actually made the tier list for the HTML element list of course is a [ __ ] Catgirl it's actually really nice simple minimal really good overall and it states exactly what you do with links to a bunch of things that they might need in terms of a simple profile this is really really good it's so easy to have way too much copy and even here when it's describing things it's one sentence cloud microservice provider that handles all the things you don't want to yeah the OSU link is how you know their 10x thought the ears were how you know but yeah the OSU link definitely helps there what is this bubbles not familiar dope stuff keep killing it in bed good to see you ooh I actually think I went to this website as a kid back when skateboarding actually had like money involved yeah I'm having like Vivid memories of a lot of this I feel like I as a kid actually went to some of these Pages almost certainly oh yeah the Metroid and the Star Fox ones I absolutely went to as a kid in the game Bo micro like oh [ __ ] this is such a throwback what the [ __ ] it made sound too I don't feel like turning on the sound it's going to be way too loud and annoying God damn skew morphic designs were really cool and it's nice seeing something really cool like this that's been preserved in the web design Museum and if I keep looking through it it's going to become my whole life so I'm going to bookmark this for the future to look at old websites cuz it's really cool I remember splicing up Photoshop files to make your layout can't say I missed that yeah relatable o ant Fu ant kills it oh the animation on the background that's so tasteful and that loaded immediately too Anthony's a legend and this is is stunning really good minimal amount of copy too actually I normally don't like listing all the things you've built like this I normally prefer it in like a vertical list but the the structure of this website is very nice and minimal and it fits yeah I love this this is really good and that animation like the logo animation the slow coming in of these branches and things Anthony's a legendary Dev it's not too surprising he's also a really good designer and has a beautiful portfolio oh what's this this is a very specific type of site that I feel like I'm starting to see more of the like I almost want to call it Pinterest likee even though I know it's not the friendly font and aesthetic the really soft everything the pastel backgrounds and colors the like weirdly cut picture that's super like obtuse and round it's a very specific thing very interesting I see that we're kind of moving in the opposite direction right now with stuff like kodu and mx's site like these are super industrial and like brutalist almost and I feel like this is the direction things are moving in right now but it is cool seeing something so squishy that's like the alternative Direction yeah the Neo brutalism stuff is super cool and I think it's going to be more the direction things go in that was still really interesting okay that's really cool does it say tip drag sideways to navigate o probably not accessible but still very cool that was a beautiful little animation and then it broke immediately yeah this is beautiful even if like navigating it's a little Annoying it's stunning the animation's also again much smoother on my 120 HZ laptop than on the 30 HZ capture yeah this is beautiful I this is really cool I don't know how to find anything I'm looking for on it and I hate that like little layout shifts cause things to move as much as they do but it's still super [ __ ] cool it's reminding me of one portfolio I want to look at Eric who is very humble he's also absurdly talented and has made really cool stuff his portfolio itself is relatively minimal but he did uh God who was he doing stuff with yeah uh Zone which is a music label this [ __ ] site is so cool like you can't see because my profile pictures in the way I'm [ __ ] it I'm GNA hide it because I want you guys to see the cigarette burns down as you scroll what the [ __ ] it's so cool I love this [ __ ] Eric kills it he's also one of those designers that's like doing something entirely different from everybody else and I've mad respect for it I know Brian's is a classic it's like it's docs which is dope I think this is really cool especially if like a lot of what your job has been is around like documentation and things like this like structuring your portfolio to be similar to the things that you're known for doing it's a really cool idea one thing I will say is the padding here is weird cuz it has these like sections there but it means the left side has way too much space and the right has way too little it feels a little claustrophobic in that way especially with my video in the corner here so that's like the one change I would make is I would account for this separately from the centering yeah that's the only note I have looks really good apparently this one got on melky's stream is one of the best is this a web app that's meant to look like a computer that's really cool if so oh no the scrolling out of view so close but so far and now I can even close this because of that g so close yeah you have got to do a lot of weird like bounding box stuff when you're making UI like this oh [ __ ] Ronan you're here good stuff this is super cool but yeah layouts in the browser are hard and you've probably never used this at 720p before sorry about that you can keep recommending St aore you're like the one person I trust to do this I probably should have had you audit the list before I made the [Music] video I like that you can press the numbers to go to the different sections that's like a small thing but it's really cool oh this is a classic I actually know this one this is going to be hard D to have my computer set up right now since my browser window is so small already I think I'm have to command minus a bunch to to see the whole thing yeah it's hard to drag this this is not very navigable with my current MAC setup but it's still beautiful and super cool oh Britney Chang okay yes this one's kind of the like current standard but there's it's doing a lot of little things different that I really like I like the horizontal split of the page I like the I didn't notice the gradient following the cursor until now that's beautiful I really like the color palette this still feels like a little bit too much text but it's digestible contrast is great very readable and more importantly it this section at the bottom is cut off slightly so I know it's scrollable I don't feel like this is just the top I feel like I can scroll so I instinctively do this stays sticky but I can scroll through here and see the stuff that she's done this is great this is really good all the little oh that's actually really cool it's like a little Doctor Who reference so you go back in time to her old versions of her site and even these old versions look better than a lot of the stuff I've been looking at today honestly like no offense but this is great for an OG like old school profile I do miss this like The Arrow the nice background image and just the core text style but this is a much nicer portfolio I understand why she's redone it but this is incredible this is one of the best like both at following the existing Trends but challenging like the edges of them to make something really special I feel like this a person who given a design system or constraint would kill it also the KAC coming up when you cover or hover that is really cute her V4 portfolio is the most copied portfolio yep I've seen this so many times ignore the flicker that's my capture still yeah I I've seen this exact portfolio so many times and it seems like she's the one who invented it that makes a lot of sense it feels like she's really good at taking existing Trends and like design techniques and refining and cleaning up the [ __ ] out of them I'm very impressed with Britney stuff this is really good Local Host 5173 is hilarious o hiding bad [ __ ] making good [ __ ] and when you that's that's a cute little thing the Scrolls a little bit hard to control selectively skilled oh the whole site has the hidden thing of selectively skilled product designer with strong focus on producing high quality a visual designer with skills that haven't been replaced by AI yet making good [ __ ] only if the paycheck is equally good the honesty I love it 3D I can produce anything that my 16inch laptop can render visual I search the internet for visual references and combine them to create my own work this is great I love the honesty I thought i' make millions of dollars from YouTube but I didn't relatable after countless rounds of feedback you finally did it right I'm his wife he made me say that good design is honest yep not all honest design is good yeah really good overall love it okay this is really cool too actually is Gabriel bian H there's a little web 3 thing up there but I do like making it all pages like this although there's nothing in some of them this is really cool overall powered by nextjs little prettier button in the corner and [ __ ] it's really cute oh I know charm uh bash works for charm it's not a portfolio for like a developer but they're trying to get developer attention I really like how they do the cutesy like soft and squishable look for sure very pretty they make clii tools for God devs which is why it's so interesting that their design is so good cuz they're making things for like the nerdiest of nerds like goang C Dev oh the terminal portfolio from gami hopefully I pronounced that right I've seen this one before it's really cool I love that like everything's done through specific commands it even has tab auto complete what was the command for listing all the commands yeah it was help does that mean it stops working at some point yeah apparently it's CU I'm in themes that's weird when I just type themes I have to do CD themes which also works weird though super dope though cool stuff oh zenos is a legend so zenos is the founder of resend he also created react email and his whole portfolio is apparently accessed through command K very minimal very nice he certainly loves his gradient text over the black background apparently he got started back in the day with flash which is super cool I also know he used to be at workout there's so many incredible people that came from work OS and he also loves dark mode super dope oh here's three I haven't seen any of them meet your next creative director I like the boldness of this statement it makes it very clear like who this site's for and like what value you might be here for Pixel perfectionist with animation skills to boot I love making things interactive and accessible too this is like a better version of like the Apple product sites still manage to make free time up for new adventure I like to work with you oh [ __ ] of course he's at Apple of course he's at [Music] Apple I hope he makes their like port or I hope he makes the Apple product pages a little more performant because his was much nicer than those are I see why they hired him they need the help that was beautiful though oh this is really cool this is one of my favorite throwback ones cuz it feels like an old site and it's clearly inspired by all the old neoc city sites but has its own like retro aesthetic with it while being very digestible it's a dim Den is the one making it and it's really cool fantastic oh and he's from the Ukraine good [ __ ] this is super cool this is one of like the best retro ones where I feel like this will age really well is that a separate mouse cursor is there are there Mouse cursors moving around the site is other people on it hey if one of you is here with me right now Mouse around the title a bunch so I know it's you guys watching yep cool that's really cool apparently everybody's in a shared instance of his site scroll down there's a chat hi hilarious I'm closing this before I get in trouble because I can't moderate that that was dope though ooh one more really cool one wired sound for Wired people oh [ __ ] fo I believe I I where do I know this guy from this is a poem go visible what is this I have no idea what's going on right now I think this is a good one to end on actually yeah this is Dan aov's homepage cuz once again even if you're one of the best developers in the web world the quality of your portfolio isn't that important and as cool as a lot of these are in the end it's just a website so people can know who you are and it doesn't even matter if you have a dangling little single parentheses at the end of your page if you've already established that you know what you're doing and I think that's all I have this was a fantastic experience going through all of these chaotic portfolios I am so impressed with what people have created on the web I I enjoyed this a lot I didn't know what I was expecting going in but it certainly wasn't this wide of a variety of crazy things I kind of expecting everybody to just copy linear but no not at all this was dope so thank you to everybody who submitted if you want to see me going through similar utter chaos pin a video in the corner here me going through every single h HTML element and ranking them for some reason if you already seen that video you're not interested YouTube will put one below it that you might like instead thank you guys as always really appreciate you all peace nerds




## What Everyone Missed About The Linux Hack - 20240401
we've just experienced the biggest exploit in the history of Open Source software I've never seen something that touches on everything from the social engineering side to really well off you skated hacks and just taking advantage of the entire open source ecosystem in order to build a very well-hidden exploit so well- hidden that it only got found by some random Microsoft engineer because he was benchmarking his SSH connections previous similar security issues honestly weren't that similar if we look at things like log for J or even stuff like heart bed in the open SSL World those mistakes were honest mistakes made by maintainers who were just trying to write good code and things slip through code review that weren't built in exploits they were just honest mistakes those people made what happened here wasn't that a good faith maintainer was exploited he was harassed he was manipulated and he was tricked into building trust with an individual who then built a very well off you skated hack and then distributed this across the world if you're running Linux or Mac OS there's a decent chance that you have the things that are exploited here in your systems and if you're running a new enough version of Debian you might even have the exploit to this is Absolut chaos and I want to do my best to cover this responsibly so rather than just being a soy JS Dev pretending I know what security is I'm going to call somebody who's a lot smarter than me talk about the security side now you're probably wondering how did an open source project a project where everyone can go and read the source code get compromised by a malicious back door that's a really good question the way that it was done was actually pretty ingenious and it was done via these two binary object files files that were committed to the repo not as source code but as just Blobs of data these these two binary files are injected into the build process and when they're deop discc turn into bash scripts now what this bad script actually ends up doing is taking these layers that hide the obis data inside of good large compress lzma and extracting the inner evil object file and then making that a part of the build process so that the evil object file is now depended on by the Linker at compile time now as far as affected systems this only matters if a couple cases are true one the repo that you have is not from gits Source control is not from gits Version Control it's a release tar ball that was from GitHub they did not include this code in Version Control to keep it to keep it hidden also you have to be using x86-64 and a Linux gnu variant for this to get compiled into Li lzma as a back door also important to know that the back door only triggers if the following if the following things are true if term is not set as an environment variable and if the binary that is running is user Espin sshd very important even though there is a back door in a widely used compression Library it only matters for sshd now what does this back door actually do so here I have the object file put into gidra the disassembler by the NSA and there is a function here called get CPU ID get CPU ID is a function that is normally just an inline it's a oneliner that get inlined by the compiler inside get CPU ID which gets invoked by the Linker it runs all of the malicious back door functionality now the details of this back door are still getting worked on by the reverse engineering community trying to figure out what all of these named functions that normally would do compression things but actually do backd door things what they do and how they function but if you want to follow along with me I'm working on a video right now for this topic uh it should come out as soon as we find out more about the back door but that's it for now thanks for hanging out if you couldn't have guessed from that little piece low level knows a lot more about the security side than I do and is interesting as that stuff is you might notice there's a lot left to this video and I don't actually plan on talking about the security side like at all anymore this awesome diagram was put out by Frogger and I highly recommend this if you're interested in the security side the thing I want to emphasize here is that in this diagram we have this huge chunk at the beginning that goes from 2021 to where the xlo was introduced in 2024 that is a very small portion of this diagram most of this is focused on how the exploit Works how it was introduced how the back door and the bash file for and all that goes together there are much better people to cover that than me what I want to cover is the part that I don't think is getting enough attention which is the craziest hack I've ever seen the social engineering part here this individual didn't just sneak evil commits into a project that somebody else was running they exploited the existing maintainer in order to take over a project with a lot of users in order to do horrifying stuff so how did they do that I read this phenomenal article by Rob mening that goes deep on the manipulative side of here in the experience of Open Source maintainers and this this is genuinely horrifying let's talk all about how open source's Nature is able to be exploited in this way Rob mening posted a pretty cool article that was originally like a Twitter thread talking all about how this is a failure of Open Source itself to some extent and I think this is a really interesting take that really shows the risk here originally thre it on Twitter about the XC liel CMA vulnerability when I finished typing it I realized I had a real world slice of Open Source interaction that deserved more attention there'll be lots of analysis of the XE lib lzma vulnerability however I found most skip over the first step of the attack again this is why I'm making this video this is a really important piece the original maintainer burned out and only the attacker offers to help this is the key there was one maintainer and then there was two maintainers one of which was exploiting and was waiting for the opportunity to take over and eventually the first one burnt out and now only the bad actor is left this is unprecedented planning and execution like we've never seen before in open source amazingly someone found an archive with an email thread that captured the state of the world just as the Step Zero was taking place let's read their words first we start with a reasonable request asked reasonably the question forces the maintainer to address his failings I use failings in quote here because a the maintainer doesn't actually owe anything here so he hasn't actually failed and B I know exactly how this feels it feels terrible to let down your community this is straight from that email is XC for Java still maintained I asked the question here a week ago and have not heard back oh I hate these messages so much I hate these messages so much I I the number of times I've gotten things like this about random I built or work on this is the worst feeling to be like too busy for like a week to respond to things and the response isn't oh I hope you're doing okay maybe we can chat soon it's oh are you not working on this anymore it's the most passive aggressive and it's the worst feeling to get messages like this this is absolutely a key point of the start of the burnout of this maintainer the maintainer acknowledges that he's behind and is struggling to keep up this is a cry in pain this is a cry for help help will not be coming in this thread again very very real and painfully common yes by some definition at least like if someone reports a bug it will get fixed development of new features definitely isn't very active frownie face again very understandable oh here we're introduced to our Li May attacker in the very same message is not the help you were hoping for certainly not Gan has helped me and he might have a bigger role in the future it's clear that my resources are too limited so something has to change in the long term this is when the attacker offered to help instead an UNH helpful consumer says unhelpful things this is exactly where these types of email threads go progress will not happen until there is a new maintainer the current maintainer lost interest or doesn't care to maintain anymore it's sad to see for a repo like this aside given that this exploit appears to be a purposeful attack by Gan should jagar Kumar be considered an accomplice by actively encouraging the original maintainer to give it up not sure we'll see this unhelpful customer again soon interesting I like the implication here is it possible jagar Kumar isn't a real person and was doing some nuts social engineering to try and burn this maintainer out faster to make it more likely he was willing to give up the project in the first place there is some 200 IQ going on here not just on the exploit side but on the social management side this is a people exploit first and foremost as cool as the security is inevitably the maintainer tries to defend himself maintainers handle the stress of burnout differently I tend to get angry which ends up coming across snarky however this reaction is heartbreaking yep I feel this I definitely am the snarky type but I've seen other really good maintainers just straight up burn out and it's the worst most painful I haven't lost interest but my ability to care has been fairly limited mostly due to long-term mental health issues but also due to some other things this seems like this particular poor Dev was targeted because the package was simple and should have been easy to maintain and he probably assumes such when he built it but because of struggles that existed well outside of the work he was doing he didn't feel like he could maintain it and some other party poked and proded until he gave up and the maintainer also reminds everybody how the world software is built now it's also good to keep in mind this is an unpaid hobby project and as always the xkcd dependency comic is more relevant than ever all modern digital infrastructure all the crazy that we're building is half being held up by some random project by some dude in NE Nebraska maintaining it thanklessly since 2003 yeah this is the first time we've seen at this level somebody look at this chart look at this comic and say you know what I bet I can get that person to give it up and let me hold this up instead and that's exactly what this attacker did and again this is all within 2 weeks somebody filed an issue got no response for a week made a really rude comment a week later they come back and make another rude comment sadly there are definitely real people who do this on one hand I think this is the attacker doing it but on the other hand I've seen people be this rude in Open Source before that I wouldn't be surprised this a real person you ignore the many patches bit rotting away on the mailing list right now you choke your repo why wait until 540 to change maintainers why delay what your repo needs okay now I'm convinced it's the attacker just the tone of this one the attacker is this other person what purpose does this serve I can't tell you how angry this makes me feel for the maintainer yeah I honestly part of why I'm pretending this is the attacker is probably because I can't imagine a human doing this and I don't want to believe they would I'm probably in some amount of denial right now where like obviously a real person that isn't an attacker could do this but in order for me to to be okay with Humanity I have to pretend this person is intentionally acting maliciously to make this all happen another really good point just made from Nick from moderation in security perspective it's now dangerous to not ban rude people like this shout it from the mountain tops absolutely in the future cite this example as the reason you're Banning people because now you don't have to just say I don't want to deal with you now you can say dealing with you might cost the security of our package goodbye be kind if you want to be talked to and I hope we can get that one little positive piece out of all this so back to this uh reasonable requestor he decides to come back in and make demands I sorry about your mental health issues but it's important to be aware of your own limits I get that this is a hobby project for all contributors but the community desires more but the community then Fork it then Fork it if you're not happy with the speed it's moving at move it yourself it's open source you can Fork it at any point he's freaking of the same thing Rob killed it with this article definitely give him a follow if you haven't this is even better than I had hoped read the last sentence again Community desires more consumers must be fed the needs of the maintainer of which there are clearly a few important ones are ignored yeah are no longer reasonable requestor also offers a suggestion notice that there is no offer to actually help there never is they're always bitching because they want you to do the work for them why not pass on maintainership for XC for C so you can give XC for Java more attention or pass on XC for Java to someone else to focus on that for C Instead try to maintain both or trying to maintain both means neither are maintained well I don't love the suggestion here I think there's a way to say this that is kind and thoughtful but is not in a mailing list it's in private conversations after you built some trust with the person but I this one is so far the one that that feels the most well- intended but it's still a really dumb thing to say in a chain mail list that everyone can see like this then the maintainer explained the reality finding a co-maintainer or passing the project completely to someone else is been in my mind a long time but it's not a trivial thing to do for example someone need to have the skills time and enough long-term interest specifically for this also a great Point everybody seems to think at least people who aren't real open source contributors seem to believe that you can just grab some random person and help them maintain your project one of the things open source maintainers ask me about the most is how the hell did I find so many great people to build things like create T3 app with me I shouldn't even say with I should say for they're doing all of the work the reason I am able to do that is I have an incredible community of awesome people like you who hopefully has already subscribed to this channel by the way hit that button below subscriptions are free you should consider it but I have this awesome community of people who do dope this community doesn't have a lot of noobs because being a noob kind of makes my videos hard to watch because I'm not going to teach you the basics of stuff I'm not even going to tell you what the definition of a word is I'm just going to talk about the I'm interested in because of that I have a community of people who are on average much more technical than the typical Community member might be and on top of that I keep a close eye on who's doing the most interesting stuff and pull them in in order to build a tighter little nit Community inside of the chaos that we're doing that's only possible because I have this Mass M platform with hundreds of thousands of subscribers and millions of views a month and even then I can only find like 5 to 10 of these people if you're this random block you don't have that platform you don't have those people to rely on for those types of things which is why the people who are in this position surprisingly often come to someone like me to ask hey Theo I need help maintaining this project can you help me find people to do it it's really really hard to do if you're a random Dev just using the package it might seem like oh just grab someone else it is not that easy yeah so uh if you pressure somebody to just finding someone their bar is not going to be as good it takes skill and knowledge to write software and while many skills and some knowledge will transfer working on a new software project inevitably requires developing new skills and more knowledge some devs are not fungible cogs that you can swap in and out all the time yep like you can't just swap most devs in and out of things especially if they're not being paid they have to care they have to understand they have to be productive and they have to know how to manage a community to do open source maintenance most devs aren't one of those things much l all four so it makes sense that even like the 1% of devs probably aren't cut out for open source maintenance the email third with the complaining consumers offering no help while continuing to make demands only the attacker is left Gian may have a bigger role in the project in the future he has been helping a lot off list and is practically a co-maintainer already smiley face yep and I want to be very very clear not only do I not blame the maintainer here like the original maintainer whatever the opposite of blame is here is how I feel I feel genuinely so sorry and horrified that their mental health was exploited to do something as terrible as what happened here and if anyone ever talks any on this maintainer for what happened here you I need you to hear how bad of a person you are if you blame them for this because they were taken advantage of for doing free hard work for everyone to use they did everything they could in more and they were just trying their best to make sure this thing that people depended on was maintained well they did nothing wrong here they did absolutely nothing wrong here I love the summary here this is really good I totally agree this is a microcosm of things that if you're a maintainer you've experienced and you how bad it is that's why I'm getting getting so heated because I've been a maintainer in the past and I still help maintain a bunch of stuff some of the most thankless work I've ever experienced we just don't get it it's actually funny going from open source to YouTube because I'll do a small thing and get a ton of Praise on YouTube I'll do a big thing and get nothing in open source and I want to really shout out the original maintainer here I know I was just cursing about anybody talking but he did everything he could in more and as a result his GitHub account got suspended G's the attacker but he was following lass so I could see from his following that lass was suspended and I go to the opposite so was Gia so the attacker was suspended that makes sense lost getting suspended no GitHub if anybody there is watching and listening if you have no really good reason for this account to be suspended free him now this is horrifying that somebody who got their mental health exploited and did nothing wrong and has no harmful commits on their account ever is getting any for this at all free L this is nuts he actually updated his blog and wrote some details here and it's mostly just a fact list but at the very least I want to cite this because he deserves to be shown here cuz he's doing everything he can and more huge credit to him OG Prodigy just found a message from the maintainer that I think is really valuable to read here hello I've read the open wall post I've been on holiday and happened to check email I've spent time with friends and they're at my place at the moment too but I thought I have to spend some time on this since I happen to check the emails I'm really tired but I suppose I should do something right now longer investigation by me likely can only start on Monday or Tuesday this sounded too serious to ignore I I feel so bad for this maintainer holy he was literally on vacation hanging with his friends this and is doing his best to jump on it is still being super honest about it the whole time I this is breaking my heart like straight up this sucks God that's so sad I again if anyone gives this individual any you're on my list forever this is his brief overview cuz he just wanted as an official source to give some info here and I have Master respect for him for doing this in finding the time even when he's doing a bunch of other stuff and trying to enjoy his Easter with his friends yet he's still out here talking about it huge credit to him for that also the get repo for the actual project has been removed from GitHub which again if the repo was removed his account should be reinstated the fact that his account isn't reinstated is terrifying to me I I really hope GitHub makes the right decision and brings him back soon this page is short for now but it will get updated as I learn more about the incident most likely it will be during the first week of April again it's not just getting more info it's he's trying to take a vacation but seems to be focused on this as someone who's been in the middle of some crazy drama in the past it's hard to even just like sit with your friends and eat food without it being on your mind constantly it's the worst feeling in the world something so much bigger than you that everyone wants your input on that you know is like some amount about you but you can't really do anything it's the worst feeling in the world and I have so much sympathy for lass for what he's gone through here the git repos are on this URL here because again they've been taking down other places so he's making sure they're accessible XC the t.org the DNS name has been removed the XC projects currently don't have a homepage this will be fixed in a few days facts this is a cve for it XCS 560561 released tarballs containing a back door these tarballs were created and signed by Gan tarballs created by gan were signed by him any tballs signed by me were created by me good to call this out that his signing credentials weren't exploited cuz there are there's been some skepticism on things like Twitter that an account was exploited and people were doing fake commits and someone even said this is a reason to sign your commits you should sign your commits but this is entirely separate from that get up accounts of both me laru as well as Gian have been suspended this sucks this sucks so hard x.org the dnsc name was hosted on gith pages and thus is down to that's why it's down well if you're watching this I'm more than happy to help in any in all ways with the hosting of this if github's not going to reinstate you I'll personally make sure this can be hosted it'll do it out of pocket if I have to you you deserve all of the community support you can get in more and I'm happy to put my own money and time on the line for that cuz I'm I'm genuinely mortified as I keep reading this only I have had access to the main tu.org website get the tu.org repositories as well as related files Gan only had access to things hosted on GitHub which included this site cuz this was like a subdomain that was going through GitHub and this is the only thing he ever had access to on the domain this is a really good call it to make too so that we know what we can and can't trust I'm amazed at how useful this tiny little post is and I'm really thankful that he made this even if he's not taking the break that I wish he would take so again L you're a Legend you're doing this better than anyone would be expected to much l somebody who was like bullied off of the project good this in my opinion is textbook how to handle when something like this happens he he has now written the book of how to do this right and I hope other maintainers that are seeing this and are mortified at the very very least can learn lessons from how well he has handled this and how to keep this from happening in the future as a result this is another IRC message that came from the original maintainer and there's a really good quote in here I wanted to highlight the crazy thing is how much Gia helped I still need to get more facts to exclude that it wasn't his account being compromised Etc although the evidence I've read is heavily tilted already Gia actually helped so he was playing all sides of this this is one of the craziest two IQ manipulative Warfare social and software engineering hacks I've seen ever I can't fathom anything else coming close to this and I feel so bad for the poor maintainer who was exploited in this way to laru on behalf of the open source community and software as a whole I hope you know how sorry we are this sucks and you did nothing wrong here and if anyone here or elsewhere talks any on you do not let that be your problem let that be ours the community need to do better here and we as a group need to stand up for what happened and do our best to build a culture where this can't happen in the future because this was not an individual problem this was not an engineering problem and this certainly wasn't a code review problem this was a community problem and we failed this maintainer and we need to do better that's all I have to say about this one I am horrified so uh yeah I'm going to go send an email to maintainer and let him know that we respect him a lot and do not harass him do not spam him with stuff but if you do see him around let him know that he did good here and until next time peace nerds




## What Happens When Programmers Use Powerpoint... - 20240613
how far does he go though if you haven't seen this it will probably break up your brain because this still breaks my brain to this day this is my favorite YouTube channel this is I think the best Channel on YouTube every video in the office Series in particular is such a banger the hard programming like lecture is good but a bit long the original turn completeness of PowerPoint is legendary and the fractals and PowerPoint is too I'm just going to watch these both because they're within my favorite things ever and if this becomes a video cool this kills me every [Music] time volume is not it's fine a bit loud but it's fine I'm thanking my compressor works now and I can talk and you can hear me even with things playing isn't that nice [Music] so this was a talk at the association yeah Association for computable or computational hearsay it's a group of people trying to make really goofy with computers and this is my one of my favorite talks ever heresy I'm you think I'm going to pronounce your weird Brit words properly come on for this type of stuff I need to have chat under me it makes things a lot easier but again lazy and I'm not changing my setup anytime this every detail of this is too well thought out hello my name is Tom and in this presentation I'll present my breakthrough research on solving computational problems using PowerPoint I will explore to what extent PowerPoint can replace conventional programming languages as well as the benefits and limitations of using PowerPoint for such purposes but first a quick disclaimer this presentation is not spons just every detail of this the this presentation not sponsored or endorsed by any real or hypothetical corporation located in Redmond Washington endorsed by any real or hypothetical corporation located in red Washington the views and opinions expressed for those of the author and do not necessarily reflect those of any such Corporation to one exist only trained PowerPoint professionals should attempt to reproduce the results of This research and the author will not be held responsible for any material physical or emotional damages caused by such attempts so with that out of the way we can proceed to the background this goddamn slide this goddamn slide motivation not available and he just flies right through it it's on the screen for a second hasper animations which can be used to add interactivity to your presentations so we have links here and then we also have animations which are particularly interesting because you can trigger them in different orders so you can use these to make interesting things like applications games you know typical things that you'd make in a slideshow editor but until recently it has been unproven as to whether you can do all things using PowerPoint whe you can solve every computational problem with a dedicated PowerPoint file and this is largely because in order to prove such a blame you would need to create a touring machine that runs in PowerPoint or you'd have to be able to show that every touring machine can be run within PowerPoint before we get to that I want to quickly comment that one of my first attempts of building like a thing with software was building my equivalent of The Impossible Quiz the classic Flash game in PowerPoint when I was like 11 in middle school and I put so much work into that I deeply understood the animation system in PowerPoint at the time so to see somebody go this far with it was very exciting how far does he go though if you haven't seen this it will probably break up your brain gu this still breaks my brain to this day so without further Ado the paler recognizing turning machine so here we have a tur machine that decides to language hundreds of even length do you see what he's done so you can see that like a normal touring machine we can move this tape this is implemented completely with animations there are no macros or anything else um so I can write the tape of course so we'll give it a simple input like this and of course I can also execute the turing machine so here we have the Turing machine's current state and in order to continue execution unfortunately this doesn't happen automatically it needs a little bit of encouragement the user has to click on each orange region um it can't Advance itself so you have to click the orange thing wherever it is on the screen to advance to The Next Step because it has no way to automate it once you have like animations that are conditional it can set up conditions as to whether or not an animation exists but it can't trigger after that condition so you have to be the trigger once you've applied the condition might be concerned here that I'm making decisions whenever I'm clicking on this but the way that this PowerPoint is set up uh every other area is blocked so I can click randomly essentially and the PowerPoint will just Advance its computation uh so that was the input one one so this should end up being accepted and we can see that it does indeed end on an accepting state only like 15 that with another input and it would reject accordingly depending on what it is so this is nice but what we'd really like to be able to do is run any touring machine in PowerPoint fortunately this is easy because the PowerPoint touring machine is programmed entirely using Punch Cards so for example this Punch Cards for writing programs in power point card says that whenever the turning machine is in state zero and it reads a one then it should write a blank move to the right and then move to state two but if for those confused about like the turing machine and how this works it is effectively the the test for is this a computer and the way it works is you can put in some data in this case like ones and zeros and if you do or don't have a value in a place in this card it will or won't go to a specific step so when you put things like this with these blanks it says this is when we go here this is when we go here this is when we we don't go here so if these things do or don't happen whatever one or zero comes out at the end that's our result so this one is checking if we go backwards and forwards at the same time for a palindrome does the result end up being zero is the thing on the left and the right the same okay go in one more go in one more are we still the same cool one otherwise zero if we change where these holes are located we can make the touring machine do something else and essentially imitate any transition function of any other tur to add to change the punch cards to make it a different turing machine he deletes the boxes all of this is accomplished using over 1,600 animations and around 700 [Applause] Auto this never gets all over alternative programming languages offering crossplatform support running on both mobile devices technically it's better than flash at Java cuz it runs on iPad and both commercially relevant desktop operating systems in addition it's drag and drop programming means there's no text and no syntax errors but most importantly you can use themes word art and transitions that PowerPoint is Infamous for in your code and we don't even have emojis in variable definitions in JavaScript yet I can't have my user variable be a user icon still why is Powerpoint ahead of us in terms of flexibility of code like javascript's the cursed language why is Powerpoint beating us there a decade ago it requires Asm totically fewer Auto shapes than when implemented in alternative slideshow editors definiely proving PowerPoint to be exponentially more capable than competing software I I will defend Kino to the day I die but he's making a very compelling argument here most notably the PowerPoint touring machine shows the PowerPoint IOS app is in violation of Apple's App Store guidelines to this day you cannot have an app that allows for arbitrary code execution because apps have to be like code reviewable and like you have to be able to review the capabilities of the app but if capabilities can be sent as like code or added in by the user that's now against start service show the power point can emulate alternative apps and execute arbitrary code or simulate multi-app widget experiences he's not wrong it can make any software alternative apps and execute arbitrary code in the future I'd like to research making PowerPoint code more scalable and optimized so that that one day every application you run on your computer can be run within PowerPoint if you liked that and you want to see more of really writing code in PowerPoint he has a video PowerPoint programming it's a full College lecture as well as a video can we compile C code into PowerPoint which is chaotic the word text one is legendary he reimplemented latch as a template inside of word and it is chaotic and miserable but the thing that brought us here is making fractals in Powerpoint which is a video that once again I think about this probably more often than I should and Toad if you're still here I really want your thoughts on this if somehow you haven't seen it yet recently Matt Parker and Steve mold released a video showing how to make fractals using PowerPoint their method is very impressive and includes all the elements one might desire from an unconventional PowerPoint use case this slide unexpected fortuitous hacky creative conduted complicated sophisticated probably a bug no undocumented Behavior unorthodox bleeding edge simultaneously increases and decreases your respect for Microsoft everything Microsoft does qualifies with that last one to be fair if Microsoft's involved I can usually check that box but uh yes fantastic start unreliable to bleeding edge yeah us JavaScript devs get it I do have one complaint with the video which is that their technique unnecessarily requires as Matt Parker might say too much effort the approach they present cleverly utilizes PowerPoint insert object feature to embed a PowerPoint slide into itself embedding an entire presentation into itself is understandably not supported it's funny because it seems like they tried to prevent what he's about to do but as per usual with Microsoft when you create the API they create the abuse is just one recursive callway but PowerPoint inexplicably has no problem with creating a self-referential slide if the embedded copy of the slide is set to be a linked object the slide will update automatically each time the presentation is saved gradually building a fractal image Matt Parker and Steve mold success how hilarious is that if you embed a slide in itself then every time you save and it creates the link to it it nests it one further if you're not familiar with a fractal it's the idea of an image that goes in and out infinitely and you can now create a fractal image where it will go in infinitely by Saving obviously if you have to save every single time that's not optimal but he goes some crazy places with this F used power point to create a serinsky triangle but their method has a few limitations the presentation must be repeatedly saved to increase the depth of the fractal and with each save the save time increases exponentially since PowerPoint does not rasterize the vector-based images of the embedded slide in addition the embedded slides are always rectangular making some fractals difficult to create thus I'm afraid that professional fractal designers might not want to use this method and should instead use a different tool that is better suited for fractal creation PowerPoint slide Zoom this is one of the greatest transitions in the history of YouTube to zoom in on a program that actually does fractals and then use the slide Zoom feature to go to a different option which is the thing you're actually here to talk about which is slide zoom in PowerPoint it was it's art use a different tool that is better suited for fractal creation PowerPoint slide Zoom the relatively new slide Zoom feature enables the creation of a summary slide that includes thumbnail images linking to the other slides in a presentation the presenter can navigate between slides with a zooming animation creating an original style of presentation that was definitely not inspired by Computing products who remembers prey the good days God I PowerPoint copying prey was silly and dumb and worth making fun of them for until this whatever engineering effort they put in to cloning these features is worthwhile for this video alone prey was like fancy looking Google slides in the browser but a whole separate company with a bunch of example presentations and users can also drag a slide into the editor to create a zooming link to a specific Slide the link updates in real time when the target slide is edited now in any reasonable presentation editor we might expect the menus to be arranged in a hierarchical structure free of Cycles but PowerPoint isn't always reasonable and inserting a slide into itself leads to some interesting results do you see where we're going differential slides we can create many common fractal images the only limitation is the rectangular shape of the thumbnails which Mak some more complicated fractals difficult or impossible to create so obviously limited because you're embedding the whole Slide the slides a rectangle so obviously you can only do rectangular shapes right right if you think we're doing good right now you have no idea what's next this is the the way I died the first time I saw this video because I could not have imagined the thing he's about to reveal it's such a small thing just watch and enjoy thankfully Microsoft has anticipated this limitation and provides an option that seems to be specifically designed to allow for easy hide the background of the zoom and use the background of the home slide why is that an option why would you ever need that in anything even vaguely reasonable fractal creation but as he said it feels like they put that there for fractal [Music] creation like are you kidding actually good fractal art and it's adding an outline let you make a fractal tree are you [Music] kidding like I'm not around I think about this at least once a week when a thumbnail with a transparent background is clicked overlapping objects from the source slide are still displayed creating a perfect fractal Zoom effect like are you kidding it's actually Pleasant and has cool animations and [Music] I now I'm sorry toad but despite your incredible efforts and the awesome things you made it will never be quite the same level as what Microsoft accidentally built here close but not quite now while I would love to end this video with a clip of PowerPoint crashing under the load of infinite recursion it handles fractal rendering disappointingly efficiently the zoom thumbnails are stored as pixel-based images so each step of fractal generation takes the same amount of time regardless of the current complexity of the fractal it is efficient you can just do this and it doesn't crash PowerPoint crashes when I try to like use it normally or play a video in it but apparent you can just build fractals that are infinitely recursive and just navigate up and down though it doesn't give a what what why does it preserve the last slide when you go in when you're going in more it should kill all the things that you saw previously but it doesn't it just nests it it it should not do this it should not be good at this watching Matt Parker and Steve mold's video did give me an idea presentation is embedded in presentation bation presentation a they show how an embedded PowerPoint can be automatically launched as part of animation sequence by embedding two presentations into each other they create an infinite presentation that gets increasingly nested with each click in theory such a presentation would continue indefinitely until the stack of PowerPoints finally fills all the computers available memory but with a little modification we can do better than just Theory such a dangerous button start with previous I have crashed PowerPoint so many times with that button as a kid it's insane sorry sorry for any epileptic people probably should have given a warning I forgot about that though just measuring the memory slowly going [Music] up until it eventually locks [Music] [Music] [Music] and then ending with the slide Zoom ending with the goddamn slide [Music] zoom and then slide zooming out to his video so you can click them on the end that's just every detail it should not be this good he should not have been able to make something this stupid this tasteful and he should not be sitting here with 28,000 subscribers when I have over 280,000 it's Insanity he's the he's the best tech YouTuber and nobody gives a so maybe if we turn this into a video people will give more of a because this is Art this is top tier art




## What Your GitHub Says About You _ Theo Reacts - 20240521





## What even is the JAMStack___ JLengstorf on Web Dev Wednesday - 20221011
figured out that if you ask people the right questions you can get literally anything custom made and so so I have to order my choice I forgot pandemics and like that's a true story for a site that's way too big to ever ever be down and when you you hear these stories and then you ask them what they're doing you like look at the code you're like okay but if you just like any pre-packaged CDN would do what you're asking for and never ever run that risk Planet scale is a whole category of problems I used to care way too much about like I used to be a database start and cared all about the different ways to scale your DBS and your infrastructure and I was tired of it I wanted to focus on video and like helping my creators on paying be as successful as possible how do you feel if somebody gives you a problem and says like I want you to make this thing perfect right because if you tell me that my whole job is the last 10 I'm immediately going to not take that job howdy howdy so excited for the guests that we have today I'm sure the vast majority of people here already know who you are but if you wouldn't mind give us a quick intro Jason sure uh I'm Jason langsdorf I am the uh host of learn with Jason I'm the VP developer experience at netlify um I do for around on the internet talk about Smash Burgers and corgis and you know all that good stuff uh and and I'm here to I guess defend myself or defend Jam stack defend Jam Stack's honor so excited for it I definitely have been a jam stack developer whether or not I'll acknowledge the term but that's not the only way I've been walking in your wake for years now I'd love to start first and foremost by talking a bit about your experience as a Creator on the platform specifically like is one of the first people doing software Dev streams on Twitch like I want to tell us a bit more about your streams and how you got started yeah so um when I first joined Gatsby we didn't really have like formal devrel so I used to joke that my role there was my title was like human duct tape and I have always sort of been the person that spots a problem and then I'll just gravitate toward that and try to get it sorted and then wander off to find the next problem and at Gatsby what we were running into was this sort of devrel we we knew we had a strong developer Community we knew we wanted to do a better job of engaging them but we didn't know how and so I took on a couple things one of them was the every contributor every merged PR would automatically get swag and an invite to the repo which I don't know if they still do that but so I built out all that Automation and then the I was also like well how do we boost transparency it feels like that's a really important thing for an open source company so maybe I'll just live stream stuff so I I started inviting anybody who wanted to to join our planning meetings over zoom and then I was like this isn't working this is chaos okay how about I live stream them instead so I got on Twitch and started live streaming meetings which nobody cared about like at all and then I was like okay well what else would work for for this so then people started asking me questions like I want to build um I want to build this type of site with Gatsby or that type of site and so I did a couple pair programming sessions live and that was the very early where I was like oh okay this is good like this is something that I think is valuable that people would would enjoy um but I didn't like that I was asking people who were learning to make themselves vulnerable like they they had to come in and say I don't know something and in order to get information I have to basically put myself out in public and say I don't know something please teach me so I wanted to flip that Dynamic so I decided to start asking people who knew more than me to teach me how to do things and then I could share those videos with the people who were asking the questions so that I was the person who didn't know and I was the person asking the beginner questions and making mistakes so I wasn't asking people to kind of screw up in public right I'm the one who screws up in public and once I switched that Dynamic I felt like we're on to something here like this is working so from there it you know originally it was just I had a zoom call and I stream my desktop from to Twitch has a gained momentum I think I the first thing I did was stuck a little logo down in the corner and then that after that went a little bit further I was like okay maybe this needs more branding so I learned about overlays and OBS and all the the wiring and stuff and then um that's what grew in to learn with Jason over time so I think now we're at I think we crossed 300 episodes last month um so we're we're now Trucking on toward 400. geez that's insane I remember when I first added the calendar to or like the learning with Jason like schedule calendar to my calendar and saw how often you were doing it it was like oh damn you're really all in on this I mad respect for it it was it I mean at this especially now with my my job being in in leadership it's the only time I get to write code or really like really dive into code so I'm very protective of that time and and the the twice a week schedule is just to you know how else do I keep up with what's going on out there I don't have time to do independent research or try stuff on my own so I gotta gotta create that space and having an expert to guide me helps me get a better read on what's going on and um you know it's got the bonus of being like hopefully other people who just want the really high level like how do I how do I even think about this tool I don't want to necessarily go to the research project or build a proof of concept I just want to know if I should care it tends to provide a little bit of that yeah I something you touched on that I really love about this is the idea of like you you didn't make this content with a like a greater external purpose of I am going to make the world better by making this content you had a much more specific like I have this problem I want to learn about these Technologies I am going to solve this problem I have with content and that's when I think channels tend to do the best and you've described yourself it's like things took off at that point when you had the thing that you cared about the problem you were solving right there in front of you all of a sudden things started moving way faster exactly right it I think that's the part about content creation that has been maybe the most challenging to internalize but it's the one that gets said the most often is that the best content is the content that you write for yourself yesterday yes if you if you are capturing the things that you learned yesterday for the person who didn't know yesterday which was you then you're creating something super valuable because it's fresh in your mind you've still got that beginner's mind you're not trying to like when I try to write beginner JavaScript content I've been writing JavaScript for like 20 years now I don't make sense to somebody who's on day one but if I you know I just learned something about Astro let you know last week so if I write about that it's fresh in my mind I understand what I'm talking about and I can like get that conceptual jump from like zero to one um and it it just yeah it's a total game changer for for Content creators like that and just remembering to show up yep that's the other really big one caring enough to push yourself through the hard parts and also to make something that you're passionate about like having that passion throughout your content shows people see that they feel it they understand that and if you can consistently provide that you're going to succeed you're going to have a way better response to the work you're doing and a much better result coming out consistently like the Genesis of my channel wasn't I wanted to be a YouTuber I had like two specific goals the first was better understand the space for what we were building at ping I really wanted to deeply understand the greater problems we were solving and felt like as a viewer I got a decent bit and as a friend of a lot of creators I heard a lot of things but I wanted to understand it so started making content for that the other reason was I just left my job at twitch I no longer was surrounded by super talented Engineers that I respected the hell out of the people who like taught me everything I know the slack room with 300 passionate front-end engineers that we could just like go back and forth on like the news felt release and stuff like that even though we were a big like that company we just it was fun talking with these people about these things and a conversation I had with Jack Harrington recently is the idea of like the lunch conversation that we kind of lost during covid where like as a recently hired like interner Junior engineer at a company like twitch or Amazon I could go to lunch and have two principal Engineers that have been leading the platform for years talking about stuff that I don't understand at all but I can get some amount from I can like sit there and take in a bunch of info maybe ask some stupid questions but the amount that those conversations help you ground yourself give yourself a path and like grow and the amount of value that those more like senior conversations even if you're not at that level yourself bring is incredible and I lost that when I left twitch and we lost that when covet happened I think a lot of why I thought the channel was trying to bring that back yeah I think one of the things that's really challenging about um remote work which like I love remote work I've been remote for years and years and years and I don't I don't think I would ever go back to a co-located company but when I was at IBM I would work in the office three days a week and the only reason that I went into the office was because at lunch time I would go grab people from different teams around the company and I'd be like we're going to lunch come on come on and we would go walk to lunch we would sit down and I would just hear what the folks on the IBM design uh components team were working on or hear what the devops team was struggling with or any of those things and as a result you just get to connect these dots like you've got brilliant people having conversations about what they're on you've also got these these sort of insights into the problems that different types or different archetypes of developers are facing or different teams like oh we built these really cool components and nobody will use them um or got the devops team saying like we keep building these great structures and nobody will actually like they keep copy pasting the old Docker image instead of using this new thing we built and so all the work that I do in developer experience was hugely informed by conversations like that where you listen to somebody who doesn't work in your field or who's at a different level or a different team talking about like what are they excited about about what are they struggling with what are the things that they really love and what are the things they really hate and all of that is is so Priceless and when you move to a fully remote environment it feels super cheesy to set up like a donut call like if you've ever used the Donut app on slack where you have to basically like put your hat in a ring you get randomly assigned to somebody for a 30 minute conversation it's like oh this is the worst right or like you set up these happy hour calls and and you've got 40 people on different time zones with all the the time lag that happens because of that trying to have a free-form conversation it's just chaos right I think this is why people love in-person events you know like the hallway track at conferences is for most people who regularly attend conferences like the talks are wonderful but the real value of going to a conference is that hallway track and that's the thing that really you know every new idea that changed my career every introduction or or somebody saying like oh you know there's an opportunity over here each one of those was it came out of a casual conversation nobody set a formal meeting with me to be like I have a thing that I think would help you it's always like somebody says something like wait I'm interested in that tell me more and then oh it turns out I could you know I could build a system that solves that problem and that actually solves one of my problems and you know then you're off to the races that's how I ended up re-architecting a lot of the front end for IBM cloud and that's how a lot of the stuff that went well at Gatsby happened was you know casual conversations with people who were stoked about Gatsby figured out what they were interested in what what was motivating and then build programs that you know dug into that I never want to Advocate going back in person but I really really like finding ways to get groups of people who are excited about the same thing together so that they can discuss I couldn't agree more about the hallway track aspect of things both in conferences but also just like at the office the conversations you overhear are walking around the moments that like like most of the teams I was on at twitch were people who I saw like overheard in a conversation like at lunch or in the hall and met through those ways as great as slack and evenings can be those impromptu moments are where a lot of magic happens it's similar to like the biggest value in college is like the people that you meet in the like Community around trying to capture that remote is really difficult but I do genuinely think we're getting pretty close to that with what we've built in my community like we have Frameworks being formed in like the sub-only channels in my Discord and that's just incredible to watch the discords are are really something else I think that saved me like I I have one that I'm in called party Corgi where I just like I don't actually engage a lot in the text chat but I play fortnite because it's the way that I keep my brain from thinking about things that I'm not on the clock to be thinking about and all the side chats in there so good because it's it brings back that casualness you know we're doing we're playing fortnite but there's a ton of down time in that game so you just kind of chat and have these these arbitrary conversations that lead to some really interesting insights and and people of you know spun off side projects and utility packages and really interesting stuff that comes out of just you know I can't shoot in the [ __ ] really yeah I think that we get a lot of that on Twitter spaces but it's like the exact same thing where there are there's a certain level of like casual passing by conversation that doesn't happen when you're in a work meeting that we're able to get by having a casual Twitter space at the end of the work day where we're just complaining about life and code and whatever else and some of those conversations have ended up being like massive drivers for real change at places like yeah versel on Frameworks like solid.js and all these like cool things we talk about sometimes the people who make them and work for them show up as well and that's how like this stream started originally as me having a space on Twitter every Wednesday I started co-streaming it and then just leaned into the stream because it made a lot of sense what we were building at ping yeah and it's I mean I do love one of the things that I really love is how engaged like the folks building this stuff are you know if you say State machines three times David David core cheat's gonna be in your chat right you say uh you talk about rendering or like Dom elements and like Ryan turning out it will arrive you know you and it's great because you know they're paying attention they're listening to what people are struggling with and I think you know it's it's leading to I don't know there's this kind of there's this interesting cycle that I've been seeing with with web dev and maybe this is the the way that we segue into talking about Jam stack but um there's this interesting like cycle that I've seen in web dev because I've been building for the web since like the early 2000s and you know at first everybody was writing uh like dhtml right that was the thing that that you had to write and it was terrible and it was super complex and you had all these browser-specific workarounds and then um John racing drops Sizzle and jQuery and you're like wait this is simple I can do this so you see this explosion in Innovation where people are building out these really incredible experiences and you know all the complexity of building cross browser went away thanks to jQuery then because everybody was using jQuery they wanted to build more stuff so they built jQuery tools on top of jQuery tools on top of jQuery tools and then they built that into like rails monoliths and so there were these interesting Stacks that were like let's build a full stack solution out of you know this thing but it had all these other assumptions built into the original Simplicity and it just got too cumbersome it was it was too much so then angular and backbone and eventually react and that's when I come in I managed to dodge most of these bullets ahead I did some PHP back in the day but mostly was living in like Java and python server land so I avoided all of this chaos until reactant specifically typescript happened yeah yeah yeah so so then we get uh we get like react comes in and kind of wins the first wave of the framework Wars where we've we we had angular and and um all the other ones that like dojo and backbone and all these other ones that everybody's using kind of simplified where all of those are still out there there's a huge number of people still building production systems using all of those Frameworks you know jQuery I think is still the most popular JavaScript framework um but as you know steam people started centralizing on react right like the modern stuff was all built on react so then people started like well what else can we do with react well let's make react into a server language let's make react into like let's build meta Frameworks on top of it let's build utility packages that sit on top of our meta framework so that we can do this other thing let's get now they're talking about concurrency and server components and all these things and I'm feeling a sea change like the the articles are no longer like this is how react is going to save your life it's now like well here's how to succeed in spite of react which is what it felt like when jQuery was reaching its Tipping Point where it lost the Zeitgeist and so what I'm interested in is is you know we're starting to see the same like the spirit that led to react is starting to to lead toward what I think will succeed react We've Got You Know Rich Harrison svelt we've got Ryan carniato and solid we've got Fred shot in the Astro team we've got uh the V team is doing incredible work where it's sort of making the the react part matters less now it's more of like how do you build for the web with with less the there's a pretty clear signal from Jason Miller that like preact is no longer a react clone it's now going to become its own thing um that's really what a clear signal get it but I think we're we're driving towards Simplicity again where um you you know we see the complexity that happens on the web and we go well we can build on this so far this is too much it's it's too hard to get simple things done I want something simple so then we all reset to something simple a winner will emerge we'll build all of our complexity on top of it and then we'll all have the same conversation in five to seven to ten years about whatever the successor is and get frustrated and then we'll we'll innovate somewhere else right um and so what I'm excited about is that this one feels like it's being built collaboratively as an ecosystem I'm watching the quick team talk to the solid team talk to the Astro team about what the best way forward is I'm watching you know 11d is pulling inspiration out of Marco and they're all sharing ideas and celebrating each other's wins and collaborating in a way that makes me feel like whatever succeeds react isn't coming out of a war it's coming coming out of more of a Renaissance and I think that is really fascinating I see a bit of a pendulum swing at the same time where it feels like we're always going back and forth from like the server sends HTML to the client owns everything oh my God look at all the things we can do in client land that back and forth is something that's much more prominent now in like post-react world where the recommended way of using react for the longest time was do everything on the client we've since realized that was wrong and swung back as far the other way as we can with stuff like Astro where Astra will only give you HTML if you want JavaScript you bring that yourself like I'm seeing this trend towards things that understand that at the like end we are making a document and sending it to the user and making that as simple as possible without compromising the wins we get from these other tools like the hardest reality is I enjoy building websites and react more than I do with HTML even if it is a static site like the component models and the reusability that those architectures enable is so powerful I think that's a big part of what inspired what became the jam stack yeah I mean so the the general idea is if if you look at what the origin of the jam stack was we had a bunch of companies that were um this is this is where I wish I was as good at like live diagramming as you are but we had a bunch of companies that were building monoliths right so you've got all of your code in one big chunk and it's a it's a mess I I inherited one of these at IBM where it's you know it's a million lines of code no joke and it's only it's right only because nobody quite understands how the code base works so you never delete anything you only add stuff to the bottom of the file so you're opening up a utility file that's 15 000 lines long and it's just really really difficult to reason about to maintain to iterate on this code so then this idea of microservices comes along and microservices from a back-end standpoint are brilliant because you're separating things by concern so instead of having this big pile of code you've got these vertical separations of code but the problem is is that people are still treating the the front end as like an output function of what the the microservice does and so now instead of having like the monolith which had one front end you've got 35 micro services and 35 independent front-end code bases and that sucks so then people started saying like well no we need to go back to the monolith back to the monolith and so the jam stack was this idea that you can actually have kind of have your cake and eat it too here by decoupling the front end entirely from the back end services so you you only speak to your micro services or your monolith or third-party apis or whatever it is through well-defined API contracts and that allows you to have your micro service like back-end code bases and then you've got this horizontally fully integrated front end that acts so basically you're turning the front end into a micro service right it's no longer a product of other microservices or a product of the monolith it is its own independently owned code base that speaks to other code bases via well-defined API contracts and the benefit of this is because the front end is only communicating through these API contracts you get these other Downstream benefits like you can fully pre-compile it in a lot of data sets and just ship static HTML to the browser which means you don't have to deal with like you never have to configure a varnish cache you don't have to ask your front-end Engineers to understand how nginx works all of these really interesting things start to fall out because you can just rely on cloudfront or when services like netlify and Purcell or they have their own cdns pre-configured so that you don't ever have to think about caching headers right um and so then as this this evolves you've got serverless functions and and things that come in and sort of invalidate the need for like fully statically compiled things but the the separation is still true you still have this like fully integrated front end layer and then you have the API contract but now it's to a serverless function which is simple enough that a front-end Dev can can write it right I think what was interesting for me with the jam stack is that because of the the migration towards serverless and like database as a service as opposed to fully hosted configuring a postgres database or whatever now I can just say well I want to use this it's all an API so I'm I'm now a full stack Dev because I'm using these like platform as a service things so I don't I clearly don't understand how to be a DB admin I clearly don't understand how to like configure scale kubernetes or deal with a DDOS attack but I've got a bunch of services that do that for me and they gave me a clear API contract so I can set up and build my own database set up and build my own back-end all these sorts of things that now allow me as a Dev to have an idea and get it on the internet without having to like have six disciplines worth of engineering knowledge and so you know that that separation of of front end from all other logic via API contract was the original like that was the original benefit that was the simplification Because by doing that you can deploy it independently your web devs can be web devs they don't have to be full stack devs or Ops or anything like that and they can do it without a lot of risk because there's not a lot of risk to updating the UI if you screw it up great roll it back you're not like permanently destroying the database or things that can go wrong with back-end microservices that was that's the push towards Simplicity and that was the the ethos of the jam stack I think over time what's happened is you know through marketing choices that were made and and things that people ran with that were that were kind of set in passing or whatever we've managed to turn it into something that feels like there's a right and a wrong way to jam stack but I I think Jam stack in my mind is more of an architectural approach it's like it's like choosing to go with MVC or uh a pat you know if you start talking about like dry apps and what what what counts as dry when is dry a bad idea right like jam sack's the same thing it's an approach to building front ends for the modern web that it has you know some of it may be server rendered and that that part you wouldn't call jamstack but like the parts that can be separated completely and don't need to be server rendered and all those things like that's totally fine that is Jam stack I feel like I got a little off on a tangent there there's yeah I uh it was a very different definition that I am used to for Jam stock it's actually very interesting to me I if I'm understanding correctly you're almost seeing it as like Federated graphql style like the layer that communicates with all of the other back-end services but that layer lives fully in the front ends code base yeah I mean in the in the sense that like I I've always seen so going back to my IBM experience what I would see is the the back-end microservice would be making a bunch of like data Lake queries so like our accounting board dashboard would be going back back and getting all of your transactions and all of these things and then that would get thrown into like some node middleware where you do a bunch of business logic and parsing and then that would be run through Express which would be pulling in templates and like taking the the stuff that just ran through business logic and smashing it into a template and then what you get out the other side is HTML and so the jam stack is the idea that instead of having your business logic slam into a template you have your business logic exposed uh Json blob like this is the data and then that can change as long as the output like the API contract doesn't change how the back end can just build you can switch it from rust to go or from Ruby to whatever you want right um and the the front and the other services that consume it never need to care and so by by moving the the front end to this model where what it does is make API calls and display data I think this is why like graphql is exciting to some folks especially who are in the the jam stack space because you can kind of get just the data you need and now you've got this tiny little object that you like that's the data I needed I've put it on the screen there is no business logic it's not it's not Federation in the sense that you're like the broker of all of this data transaction it's it's Federated in the sense that yes that is the code base making the API calls but it there's no business logic there like business logic would live in the micro service or if you need to do business logic as a front-end Dev you'd probably put it in a proxy you know like a serverless function or if you need a longer running service you'd stand up your own proxy micro service that does the data managing um because again like the front end in this model is presentational it's not core to business logic very interesting I hadn't had Jam sack framed this way before I do like it as almost as like jam stack is your you have a stack of JavaScript that's separate from your back end yeah yeah I think that's that's the way that I think about it at least because I'm I'm trying to think of if I take this front end and I hand it to somebody else who do I have to tell right and if all of your stuff is communicated through an API layer your backend teams never need to know that you've migrated from angular to react or that you're switching from react to to Astro and Islands architecture it doesn't give a [ __ ] like nothing nothing changes for them functionally right the only time you need to talk is if your front end needs data that's not being delivered and you have to update that API contract or if they're like taking something down and like hey this API endpoint's not going to work anymore so it hugely simplifies communication between teams and like that's the ultimate goal right we're looking for autonomy as developers I as the front end Dev want to be able to push a commit to my front end code base and have it automatically go live and when you're working on it on a big team that's got you know 30 40 micro Services if your micro services are also what's generating the front end you can't do that you have to go to a staging environment you have to go through QA you have to have devops roll it out on Thursdays whenever you know new production goes live because there's too much risk involved if you're messing with the the micro service code base and even if you've done a good job in your micro service of like separating out the front end from the back end code and it's all in different files and that stuff there's still risk that somebody doesn't know about that and will like reach you back in util and pull it into the front and make a big mess of your code right because it's all in the same pile so this is this is more of like an enforced separation of concerns and like don't get me wrong you can still make terrible choices you can make a huge mess by like building yourself a micro back end as a bunch of serverless functions on top of existing microservices like you know it's not a silver bullet but it does allow for a clean enough separation of concerns that as teams are speaking to each other they have a very limited space that they have to have full overlap on this is a very interesting way for everything it's like it's not Jam stack isn't a way of building it's like a set of fences almost yes exactly it's an architectural approach it's a it's a I mean I would call it a philosophy but then that makes me sound like an [ __ ] but that it really kind of is like it it's a way of thinking about writing apps that makes a ton of sense have to do one quick call out as the Creator who is live I'm taking a look at numbers quickly I notice that there's 260 of you watching live on YouTube and only 78 likes 78 likes really guys come on hit that button it's free likes are free they cost you nothing sorry this is It's funny because I saw this uh Stephen Johnson is saying bump it up but we're gonna get yelled at and I thought that was a joke I didn't realize it they know how this works it's a trade they get free content I get free likes and look at it Go wow everybody is uh that is amazing yeah call to actions work it's crazy how that works but yeah people like hitting buttons when you tell them that they're there and if you haven't hit the sub button that's right next to that like button for some reason please it's right there and also free so remember ring that Bell I am a little surprised by this definition specifically because it makes me realize I haven't been a jam stack developer for like years I very very tightly couple my back end to my front end I actually remember somebody tweeted uh it was meant to be an insult towards trpc where they and I didn't realize how they tweeted because I loved the tweet it was trpc is tightly coupled back end for your front end and I liked and retweet it immediately because I love that like I am building a front end my I'm building this for my users my goal is to build the simplest possible like user experience with the shortest pipe between that and my infrastructure and my databases How can I break down those barriers and make development as simple as possible for my team I so this is interesting because your your philosophy like you're asking the same questions and coming to an absolute opposite standpoint of what I would come to and I wonder if this is a scale thing one of the things that I find really interesting is is um I think I said the the what got us here won't get us there and and this isn't like a I'm not saying this as a I know like this this isn't me trying to be like listen you young whippersnapper um but it's more of just a question of of my own lived experience as a as an engineer because I love tightly coupled stuff when I'm building it myself right because everything's in one file I know exactly where to go I know what I'm looking for um and as soon as I have to hand it off to another Dev I want it all decoupled I think the reasoning for that is that I what I want to be able to do is Select which context somebody needs to understand to make them productive right and so when I'm when I was at IBM for example you know I'm I'm front-end architect working on 30 something teams at IBM cloud and one of the big problems that we had is we had our I mean the way that they did microservices at IBM was not maybe ideal it was like they had the monolith and then they just duplicated the monolith 35 times and they were like great now you've got micro services and you can just you can edit whatever you need for your service knowing that it won't break the other services um but the the what that led to was when a new front-end Dev like a specifically I have been hired as a front-end developer got hired at IBM their first one to two weeks was spent configuring a proxy configuring a bunch of of like nginx commands setting up a whole bunch of like deep Docker images and and all this stuff that was way out of their their understanding and and really their need to understand they were working in a context that was completely foreign to them and so it was a huge productivity drain and like any time that something got written poorly like a super senior Dev would do something in the the full stackiness that like pulled the utility from somewhere way down in the in the back end up into the front end for this one quick thing so they didn't want to write whatever piece of front end was necessary for it and that would lead to the front end devs now accidentally breaking deep node code that they literally had never heard of or understood they've never worked with and so when we we did a not quite Jam stack because it didn't really like IBM wasn't set up to do that but as close as I could get where I I separated the front end out from the the back end micro service in a way that was independently Deployable and what we found was the front end teams immediately like they were making commits on day one because they didn't need to care about what the back end context was or how that nginx stuff was set up it didn't matter that was all pre-configured in this little I made a tiny little module that kind of set up the front end forum and so as the you know working on a huge team there's no way somebody's gonna understand the full context like that's why we got to microservices in the first place and I think that's why this this Jam stack approach took off in the way it did when it when it came out in 2015 um is that it was a way to say hey developer you work like you are paid to do this work this is the thing you've been hired to own and this is literally the only part of this you need to understand so your ramp up time goes way down your context required the level of expertise required so now you don't need to go out and find those like you know multi-six figure unicorn devs who are like you know double principal or whatever whatever level you have to hire to get somebody who can do systems work from the kubernetes up to the the CSS right um you could just hire somebody who was a great JavaScript HTML and CSS Dev and they didn't have to care about anything else in the stack um and and so I think that that's why I think um at least for me the scale played a huge factor in why I I started started thinking about things from that jam stack and decoupled approach however I did have Alex on learn with Jason and we and we looked at trpc it's freaking cool like I love that the end-to-end type safety and the it's a it's a beautifully implemented system that I would totally use if I was building something for myself um I just haven't seen how something like that scales when you get to 30 40 150 developers and Beyond uh when you know can somebody reasonably understand the full code base yeah I think this is two different approaches to the same problem where your approach is complexity at scale is inevitable how can we separate concerns to handle that complexity as like early and like low friction as possible my other side like having worked at twitch and other like companies like no IBM's in my history but a handful of twitches and things that aspire to be that size my disagreement is I think reducing the dimensions of problems and going out of your way to reduce complexity for as long as you can allows you to not need that separation for a lot longer and move exponentially faster as a result every code base starts the 10 person or less team when it starts and eventually becomes a bigger code base but even at big companies like IBM I would argue that there's a lot of like smaller products smaller teams smaller things where starting with something like create T3 app will let you deliver the value to your users faster and if it turns out that code base and that use case does need to scale you can scale it then and I would also argue that something like trpc in the way it's architected especially when you use a something like create T3 app is you're just writing typescript functions and then on the client you're calling them with react query replacing that server with anything else like throw it on fastify and switch it over to rest go scale it however you want wherever else but to start we can move so much faster hold on hold on hold on let me let me just ask so the way that the T3 stack is working then is you're writing API endpoints that you then consume with react query yes that's Jam stack dog but it's all in the same package Json where I'm importing the backend code directly in my front end I type trpc.user.getinfo.usequery but in the end companies but if you were to drop that API out into a separate package you could still consume it the same way right you wouldn't need to make changes in your front end other than just now it's an import from you know at T3 I would have to find another way to deploy it because it all deploys in the same package Json but theoretically yes if you did break it anyway but but that's that's so that's kind of what I mean is like it it's like you've still created the separation of concerns like you've got a clear API contract between your back end and your front end and as long as nobody's going around trpc to like access your data directly and and this is where big code bases get tricky because at a certain scale you can't rely on people to make good choices anymore and that's the that's really where I've I've found the breakdown happens without explicitly enforced separation is that if you're relying on a human person to make a good choice Under Pressure It's Gonna Let You Down at least one time out of ten and and that part makes it really challenging to you know like you can write a bunch of linting rules you can do all these other things but now you're moving the overhead of like what it would have taken to manage a separated code base to policing the integrated code base because now you've got code cops and like that so I mean I guess the thing is is like the complex human complexity doesn't go away there's no code we can write that will make humans make good choices so instead the the way that I've heard this put I say make the right thing the easy thing I've heard people say you know make the the right things easy and the hard things and the bad things hard right like that's that sort of approach is is there are a million ways to slice that and you know depending on how you're going to make choices about code organization or how you're going to make choices about hiring or team structure like if you build a full stack Team Code review will catch those sorts of things if you're building like a front-end team and a back-end team the front-end team might not catch in view that they've done something that won't scale because they touch something in the middle tier or the back end tier that is is actually going to be a nightmare later on and so there are so many different reasons that one architecture would work over another why you would make different choices about you know how to organize code or separate concerns but I think at a certain point what dunbar's number is 150 right at the point after which you cannot possibly know all of your co-workers once you get past that point humans stop thinking about each other as like people they need to take care of and they just start thinking about whether or not they're going to get their paycheck and I got to deliver this by Friday and that's somebody else's problem if I made a bad choice in my code yeah I think that's the the maybe the the question under the question of like why write code in certain ways at all like why does architecture matter it's you because eventually you're going to have to you know create artificial barriers to drive human decision making and it's just you know making the choice which one is the right barrier to put up yep my tech philosophy around like I will be honest I transitioned from like 2000 plus person twitch land to 20 or less person startup land pretty hard and pretty fast and what I'm seeing more than anything is a lot of companies and a lot of developers and a lot of like early stage startups building like their Facebook hiring up a devtools team spinning up kubernetes for they have more servers than they have users I've talked to seven separate startups that have more servers than they have users it is hilarious how common a trend that is it just it eats away at me to know that and I feel like most code bases have Engineers who run them that care a lot about all of like the issues you're describing like more often than not the person in charge of the code base does think about these things and does care about these things my concern is given too much opportunity they will reinvent Facebook before there's a user for that code and most of my development philosophy is focused on both how do we get to the first user as fast as possible and on the other side how do we take as little risk Tech debt and anchoring in our design when we do that like this is why I'm not really into Technologies like Firebase or using like super basis.js client I don't like the idea of these Solutions being bought into a specific way of interfacing with your data such that if I want to change that in the future I can't like at ping you might not when you were actually one of the first users uh we switched off of postgres on AWS over to Planet scale MySQL while people were live in calls because I accidentally hit deploy and it was a seamless transition because we had Prisma as the layer in between there so when I did the deploy Prisma didn't give a [ __ ] it was just hitting a different database and everything worked as it was supposed to and that's the the memes the ship of the OCS where every piece in Theo's ships can and has been replaced multiple times at this point and when you build in that way and we get to the point where there's 150 people or I hire a Jason and you're pissed at me because of how complex I've made everything with it all being in one code base and everybody chaotically importing everything everywhere you have a much clearer point of Separation there with trpc is the only place where data is being fetched Prisma is the only way we're touching the database the serverless or service side functions through something like get server-side props not being used at all because they're an anti-pattern and these separations making it a lot easier to split up the parts when you need to and more importantly they help you get to the point where you need to more regularly because the code base doesn't collapse into your users don't get like when a user has a problem we can fix it faster due to the weight we built yeah no I I think I think we're in violent agreement here because um I'm I'm very much in the same boat and like when we're talking about like minimizing the time to value I don't actually care how many servers run I care how many code bases I have to mess with right and so one of the things that I think about a lot is if I was starting a company right now I I mean I work at nullify so I'd use netlify but any of these platforms that have like serverless functions Edge functions and front-end code all deployed out of the same code base through like a single config file I would use backend as a service platform as a service database as a service for all of the things that I don't want to manage and configure myself I I would also probably reach for Planet scale because it works in Edge functions I would then use Edge functions for a lot of logic close to the user for data access patterns things like that I would build the the site like the front end would be using you know whatever Astro next solid whatever you know um whatever whatever the new Honda yeah remix the new hotness something get it deployed out in a way that is close to the user so on a CDN have the serverless functions deployed alongside for any of the backend API stuff have the edge functions for any of that like near to the customer data access and and personalization and all that runs out of one repo so the fact that under the hood that's a bunch of servers and a bunch of config and and proxy setup I don't care right and later if I need to switch to where my my Planet scale stuff is running out of a database like I would do the same thing as you where Prisma is running as the the data access layer in serverless functions or if I was using next or remix in my actions or my you know get static props because it is that is still a separation of concerns and and to me that's still Jam stack because what you're what you're doing is you're you're the code base all runs out of the same repo but the you can't misuse a serverless function like you can't reach into the guts of a serverless function and and call it because it's not like the boundary is clear and so that like for me philosophically that's that's the main goal is that even if somebody goes in trying to do evil they can't like they could copy paste the code out and put it into the front end but it doesn't matter because now that code can get out of sync it can break and it won't break the back end um and we can yell at him later in code review if it's necessary but I think that's sort of the the um the intention yeah violent agreement um that's one of my favorite musician friends John Wayne he's a producer and rapper so that's gonna be a song or a band with that name by the end of the month at this rate love it I really like the point of like if you're thinking about infra you're not really thinking about the problem at hand and I totally agree in that sense when I say that a company had more servers than users I also mean they were thinking more about those servers than their users which is the problem I have more sense that part bums me out I like one of the things that always makes me really sad is when somebody's got a really really good proof of concept and they've clearly solved an immediate problem and then some tech wonk in the background smashes it because they're like this isn't going to scale it's like yep okay well then you fix it in three days and actually solve a problem because right now this is an actual problem that actually needs to be solved today and you're stopping this based on hypothetical problems that will hypothetically occur if we somehow otherwise solve this problem and continue to grow right like let's you know let's solve problems today a month from now six months from now but like if we're gonna if we continue to grow at the rate that we're growing cool we will address that problem when it's getting closer but man it drives me nuts when people are like yeah we're gonna we're gonna make sure that we can scale to a billion like you said we're going to be able to scale to a billion concurrent users but we currently have three yep I uh God I would love to run into theoretical scaling problems like we built fully serverless so it's God if we hit scale problems that means we're doing very well as a business and I'm excited there's a video I haven't put out yet I did it a few streams ago I are you familiar with the streamer or the primogen the link back in focused uh full stack Dev from Netflix he's yeah all about building like scalable rust Solutions and doing everything like the most performant way he's on a war against node.js to an extent and I have a diagram I drew I saw him off the status so I can easily show it but I have a diagram and I have on it what I call the primagen line which is the line at which your costs are at a point where not hiring a primagen is irresponsible and I feel like most people in most code bases like to think that line gets hit a lot earlier than it does especially because like we're all thinking from the dev's perspective more often than not and to us oh it's only a few more hours to set up the configuration that way and something I want to do because I like kubernetes and I want to feel good about the depth of the technical problems I'm solving every day and I find that that mindset is a lot different for me on the other side now as boss where it's like yes you could go spend a few hours doing that but now I need somebody at your level or higher to maintain it and a few hours of yours are literally thousands of dollars at the rate that like these like very high level Engineers are being paid like to you this is a quick thing to me is the lead that is a big expensive thing how can we make everything as simple and short a pipe as possible and I think you you touched on something else um that well maybe you didn't remind me of something else which is that for a lot of Engineers when we think about it from the dev perspective this is also the thing that we do for fun like so many Engineers would would say the thing that I do for work is the thing that I would do for a hobby if it wasn't my job right and I know that's not true for everybody that's not a blanket statement but I I think the folks who over architect systems almost unanimously would fall into that that set of like I love doing programming and so there there needs to be editing When You're Building Systems as an engineer to look at a system and go how much of this am I doing because it's important and how much of this am I doing because it's fun and many of us myself included do not have that ability to edit down and so we solve the problem and then we create five more because it's fun to solve problems and then you know when we finally realized that we've tied ourselves a gordian knot with our code we have to then like at least the pattern I've seen is that 18 to 24 months after you get hired you made yourself a big mess and then you bounce to the new company and say it's going to be different this time and then somebody inherits your stuff and if it's another Dev who likes to over architect systems they will they will propose a full rebuild and they'll burn everything down and they'll over architect it again and then you know this is why you got the three to five year Greenfield cycle of of companies being like it's too complicated and then some hot shot architect comes in goes I'm going to solve it all we'll re-architect it in You Know Remix and it's going to solve all of our problems but then they build all this crap on top of remix that nobody else understands after they leave and it's exactly the same problem you had before where somebody had over architected it on top of backbone and nobody understood how that worked either right so it's a lot of it is recognizing that as as developers we are absolutely our own worst enemies when it comes to this stuff because we're not asking the question like is this important we're we're asking am I having fun is this the thing that I want to solve um most of the time it's you don't need to do that like do do that as a hobby project on the side it'll be super fun have you seen Kevin's blog architecture oh yeah yeah exactly super fun it's super fun to over architect the holy Christ out of everything I do it all the time but I try not to ship it but what's funny is I actually I don't know why I never had that in me but I was never really into the over architecture and I think a lot of people stereotype me as someone who is because I'm like on the bleeding edge of all this fancy new tech and [ __ ] I don't adopt things that don't make my life easier period like I might go play with it for a little bit but I just get annoyed really easily even something that seems like a Surefire hit for me like Tori it was way too hard to read files and Tori without knowing how to write rust and being like into rust a decent bit so I gave up and went back to electron and like I am very quick and excited even to drop things that don't make me move faster and don't make it easier for me and my teams to solve the problems our users have and I yeah I have a question for you like there's this this classic conundrum of build versus buy right where is the keep it because we know it versus drop it because it makes us slow right because there's always a ramp up time when you pick up a new tool you've got to do all the cultural retraining of like hey we just changed all of our tools everybody learned the new system how are you like what's your heuristic for that when do you decide this is this is going to make us more in the long run if we deal with the pain of switch versus we should stick with this because we're fast enough and the switching cost is too high when the benefit of switching is a clear exponential win against that cost or the team is demoralized from the current cost we're paying every day I think the latter tends to be the case more often where we just get annoyed by a thing and we see this other thing on the other side of the fence and we just want it because once we know it exists someone's going to go at it over the weekend like my team's all the types of people who hang out in the twitch chat here we're all hanging out there's over almost 800 of us watching live right now just talking about software and like architecture stuff for fun on a Wednesday afternoon we aren't here as a group representative of the average developer so I have the problem that most people who are in teams like mine have of the devs want to go build crazy [ __ ] all the time and play with all these things like we were talking about before so if I can steer that in the direction of things that make us move faster and paying off the cost of things that we're annoyed by that tends to work pretty well for us that said I do not want to host a websocket server so we still buy things like that and deal with the cost of it right and I have went on many a long rant about the state of websocket as a service and we also have the unique advantage of like I have this show if there's a service of having problems with I can tweet at them or bring the CEO on the show hype them up on one of the problems I need solved and then all of a sudden Planet scale releases their Edge HTTP thing like I was been bullying Sam about that for a year now and they finally did it and it's really good and it's going to change how I architect apps in the future but I yeah I love taking advantage of the wonderful position I am in and that lets me take more risks and adopt things I might not adopt otherwise and on top of all of that like my core philosophy on how I like Architects teams architecture code bases is building safety nets I came from a world like uh a post Amazon acquisition world where everybody was hitting like like what aiming for a 95 code coverage on a front-end code base which is just stupid and we had all these guard rails that pointed us to nothing like just rails blocking you every step of the way and you just get you have to get used to kicking over guardrails constantly and that's not going to keep you meaningfully safer versus safety nets no that do go wrong how can you get back on your feet as fast as possible yeah right and and this is the um I think the the piece that got me excited when I was re-architecting it at IBM about this idea of of the separation of concerns is you know when you've when you've built a front end that's fully separate from your back end in terms of like where the how what code is executing when something goes wrong like netplify and and versel and and all these they just have a one-click button it's like just put the last version live right so you don't get pagerduty for your front end when you're building this way when you think in terms of of componentized systems and you're thinking about like clear API contracts if the only time that you need to get paged is if you pushed a huge API change that changes all of the component systems and something goes wrong with it but otherwise if you if like the back end didn't change the front end has a new thing and the home page got all wonky because somebody screwed up the the semantics of the HTML and like something's too big now right you you don't have to roll back a server deploy you're just okay just deploy the last version of the front end apis are all the same doesn't matter um and and I think that that like speed to recovery and speed it also leads to speed to iteration you know the um like the the netlify dashboard for example is built in network fi and because of the way that it's that it's constructed we ship to production 30 40 50 times a day like it's just constant you know like littlefix you know merge that oh yeah that oh there's a typo merge it nobody's saying batch changes because deployments are risky or hold this until next week because you know we do a deployment every other Wednesday it's just like oh you fix that thing great to play it right we've got to deploy queue and if something goes wrong cool roll that back we'll fix it later today is 28 so we got a new number to strive for but yeah like it's the same thing right like the way that you've architected your code makes it safe to experiment and makes it safe to to fail because the risk is super low when you're shipping Small Things constantly and I think that you know the the what you mentioned guard rails one of the things that is really challenging when you start getting a bigger company is the the instinct is process you want to make it harder for things to go wrong so you add more linting rules you add more gates you add more approvers you add staging servers and QA servers and and you know blue green deploys and all these different things and for certain critical systems that's really important your front end will never be that important like it just doesn't do that much stuff so unless you have it tied to these critical systems in a way that's inextricable you can just continually deploy your front end with no who gives a [ __ ] just just publish it right um and I think that that leads to the teams being when you put up these guardrails it leads to teams being resistant to shipping because they don't want to go through the admin hassle of requesting the staging environment and submitting the formal pull request that goes through the checklist of whether or not they did the Readiness checks and going to pair with the QA team while they walk through all the things and then dealing with the inevitably like huge list of small little things that the QA team will send back and finding stuff that QA missed on the last time around so now things that aren't related to your deployment still need to get fixed before they'll approve this one it's just stuff like that right where you're you're relying on too many gates too many guard rails and it just it like completely flips the incentives teams don't want to ship when when shipping sucks so make shipping easy make shipping fast make make it super low risk and now you can take your teams and they're stoked because they see their changes live in 10 minutes I think that's like that's the magic of these front-end architectures whether it's the you know the trpc and and like the next JS approach or whether it's a more traditional Jam stack of like a you know an astro site with serverless functions however you want to roll it like what we're trying to do is unlock Developer productivity that very aligned on that point and ultimately like agree all I care about is making my devs as high productivity and low stress as possible and I think the low stress first off something I aim for and like my team knows at this point I do this but I try to not tell people too early and I'm sure people in chat who eventually will work with me but uh I try to set things up where my new employees have a significant or cause a significant outage of some form in their first week so they get over it because otherwise they're just going to be worried about it for the rest of their career and the sooner they can get that out of their system the better so everybody new new hires it uh at ping should just be like reject all code suggestions from Theo on your on your pull request as well probably actually yes honestly generally speaking too but at the very least during the first week I don't hire people to learn from me I hire people to learn from no I think I mean I actually I I do love that I think uh it's it's sort of like when you like dunk somebody in cold water to like immediately get over the shock instead of like trying to ease into it and you're nervous about how cold it is and you oh I don't want to know what it feels like when it gets to my tummy like you're just like nah just jump in like be cold and it'll be over and you'll be super happy to be in the water absolutely and then you also become more familiar exposure therapy especially therapy yeah then you also become more familiar with how the bounce back works like what does it look like for me to recover from a failure like that like what is that process and you find it's not as bad as you may have been worrying about yeah there was this really interesting um social experiment that I saw from a guy uh he built rejection therapy right because he his whole life he had spent just kind of terrified that people would say no to him so he wouldn't try things because he didn't want to get rejected and so he realized that this was very debilitating for him and kept him from doing a bunch of things he would enjoy so he actually made himself a of cards that was like stuff he had to do that people would almost certainly reject him for like ask a stranger at a gas station to give you a ride to a town 10 miles over nobody's gonna do that right and so you you would ask for these ridiculous things and people would say I'm sorry I can't help you and then you would survive and in surviving you build confidence that oh okay that actually didn't hurt like I'm not in physical pain I'm not sad I'm not crying somebody just said no it's okay to hear no and then you learn to ask and then it it's easier to go and say something like I need to have a conversation with my tech lead about a choice that I want to make and maybe they're not going to be into my idea but I'm not going to shut down when they say no I'm going to be able to ask the next question and figure out why and that'll help me improve and you know or if if like it just it's such a a good thing to learn like I will ship this and if something goes down it will fix it like it's better to learn Dana Lawson is our SVP of engineering and and she always repeats this this phrase I think it might be something she had a GitHub which is shipped to right all of your ideas all of your hypotheticals they don't matter it's um it's like that that Mike Tyson thing like everybody's got a plan until they get punched in the mouth right you can't know whether or not the thing you did is good until you show it to a real user and see if they say that they like it or that they don't you you need the data you need the measurement and and so building that culture of Rapid iteration and then just making sure that every single technical decision you make is built around that how do we shorten the risk shorten the time for Recovery shorten the time to deploy so that people are developing you know there's a marketing tagline right but like developing at the speed of thought you should be able to have an idea and get that [ __ ] live in 15 minutes so that you can then measure whether or not anybody uses it so you can decide whether or not you should invest real engineering effort into it absolutely agree I think this is a point that's missed like even at startup plan like I often have to push the team it's like does having this look slightly nicer or code that's slightly cleaner teach us what we're trying to learn here any faster like it's our goal to know if this new experience or these new flows are things that users benefit from how can we get that learning I want to really like go in on the getting used to rejection things I think that's not a thing we talk about enough as developers and there's one place in particular people are so scared of rejection that I I shout about a lot interviews how often do you recommend a developer does an interview like a coating like a job interview a job interview for a new potential position I guess it would depend on how sweaty your palms get when you think about doing a job interview right because like I I've never been particularly I don't have test anxiety so when I do a job interview I don't it doesn't like feel bad to me um so for me I I don't like I'll do a job interview when I need a job um for folks who the idea of a job interview is absolutely terrifying like yeah practice like you do there's so many good places if you don't want to actually interview to do mock interviews to do the take-home tests and stuff like that um or you can do things that are like interviews like live streaming you know the the reason that coded interviews don't make me nervous is because I Live code in front of a bunch of strangers twice a week for 90 minutes right like I get so many reps that it doesn't make me nervous to be uh on the spot and I think that that you know the the goal of anything is deliberate practice if you if you want to be good at something you have to do it and it doesn't need to be exactly that thing like you don't necessarily need to go apply for a bunch of jobs to get better at applying for jobs you can figure out what the component pieces are especially the ones that you struggle with and practice those specific things yeah I mostly agree I think there's some things that you get a lot out of from doing interviews that aren't just like practice interviewing it's also as we talked about before practice getting rejected and dealing with like what that means like once you've been rejected from 10 jobs the 11th stings a little less and if you're able to get good feedback during the process too you that's all I heard of it yeah and I I think maybe also I should just everything about hiring from me should come with a giant grain assault because I I have I've been here too long and too many people know who I am so interviewing for me is probably an entirely different experience than 99 of people in the world so I maybe this isn't the right question for me to answer that's totally fair as well and I definitely like have more confidence in interviews and a bunch of weird experiences like I interviewed hundreds of candidates at twitch and helped like really change our interview process I was really proud of the like work we did there I with at least like the subset of devs I talked to a lot in this community I find most developers aren't interviewing enough and often don't know how much like they're worth because of it like they've been stuck in a junior Eng position for three years now when they're clearly like senior plus but the visiting they're in is just like weird and they're struggling to get a promo people don't they think of them as a front-end Dev when they're really full stack and stuff like that and knowing that's where you actually are something I find interviews are a great place for that I would totally agree with and I think the the piece that is um that is also really interesting too is thinking about like where were you when you started because a lot of times your first impression becomes an anchor just makes it hard to move right like this is why there's that joke that devs quit their jobs every 18 to 24 months because that's the only way to get a promotion and I think that it it doesn't have to be that way but it does require way more deliberate effort to recognize like what were the things that people saw me as when I started like if my first feedback was that I you know I didn't do well at collaboration with others what am I doing to very publicly change that perception of my ability to collaborate so that people don't remember that I got that feedback that one time and then next year because they didn't see any changes they're just gonna say yeah you still kind of struggle to collaborate with others you're like no I did all these projects and they didn't see it because you weren't super public about it right um and so I think that's you know um the anchoring that happens it can also be internal like if I join a company and I see all the people who are a senior to me as being Superior to me it can be really difficult to see yourself progressing up the ladder in a way that would make them peers or even reports and that part can be really challenging too so sometimes that that job change ends up being the sort of fresh start that lets you come in at a level that everybody sees you as senior as you start this job so you don't have to overcome that internal perception or external perception oh that's the junior that I hired three years ago yeah absolutely and I I ran into this a lot because I transitioned like disciplines a lot when I joined twitch I was doing Elixir video infrastructure I moved over to going video infrastructure moved over to deep react type script moved over to electron tried to move into native and mobile apps and got a shitload of pushback when I did that and eventually just gave off and went and built things for creators more directly but I yeah yeah yeah I just I constantly got pushback I remember like a principal engineer at the company sitting me down when I was formally changing my title to front-end engineer just looking nice like you're making a career Mistake by doing this Theo it's like what the [ __ ] I like I need you to sign off on the promo doc later this month and because you specifically want me to be like your full stack Protege you're not going to sign off on a promotion doc later now and like that type of political [ __ ] I thought was my fault for a long time that I hadn't played my cards right I was making some tactical error and then I started interviewing and realized not only am I much more senior than I thought I'm closer to like principal maybe even like CTO level so I took a CTO position at a startup and was by far the most competent person there which I did not like I do not like being the most competent person in the room that genuinely frustrates the hell out of me so I left and hired a bunch of people way more talented than me to work on paying with me and now I'm the stupid one all the time and it's great and that's where I like to be where I feel like I am contributing by being around but not adding a lot of value by being the one running things because the team kills it and I I have to build into that there's a there's a really interesting concept um that I've I've been thinking about a lot which is is the the sort of social archetypes of people who excel in certain roles and I think Simon wardley if you've ever heard of Wordly Maps is the the one who popularized this term but it's this idea that you have you know Pioneers settlers and city planners as sort of social archetypes and you've got the the Pioneers or the inventors who are you know they're really good at going Broad and they've got this amazing ability to to think laterally and come up with lots of interesting solutions to different problems um but they cannot sit still and they cannot follow through and then you've got the the settlers who are the folks who they really like ideas that are formed enough like they'll take a prototype and they'll turn it into something healthy um and they like that idea of having a clear goal to shoot for and they're really good at that and then you've got people who are more of the city planner type which what they want is a functioning system and they want to polish the holy hell out of it right and these are the people who just have unbelievably deep expertise in things they're going to be the ones who are optimizing every single angle of everything that you're doing and each of those those roles is so valuable to have and each of those roles has deep flaws right and so like if I look at myself I'm more in that that Pioneer kind of inventor role where like if you put me in a production engineering role I will cause problems because my my attention is not like I don't focus on a single problem long enough I I always start to notice that something is wrong and could be better and then I start inventing Solutions and you know a lot of those Solutions ended up being good but a lot of them ended up just being you know like I said we overarchitected the thing and now we were ready to scale to a billion and we still hadn't reached 10 000 yet and there were so many choices that I made as a production engineer who should have been more of that like settler or city planner archetype that I made as a Pioneer that were a huge detriment right and so for me being in a and like the content creator role that I do on learn with Jason and also in the the more leadership role where my actual function at netlify is to notice problems and and come up with like the beginning of a solution that then people who who like you know they don't necessarily want to be faced with here's a pile of data come up with something productive to do uh they instead get to take like a sort of form solution and then turn that into something mature and then we've got folks on the team who are really good at taking mature Solutions and making them like bulletproof and but like if you don't think about that if you don't think about the not just the role that you're hiring for and the skill level required but also the the humans involved in doing that work it it you can find that's I feel like I've talked to a lot of people who have really struggled and like failed in positions because they wanted to be doing a certain type of work that didn't line up with what they were hired to do but nobody thought to ask that question like how do you work what's your attention span on a problem how do you how do you feel if somebody gives you a problem and says like I want you to make this thing perfect right because if you tell me that my whole job is the last 10 I'm immediately going to not take that job like that actually that sounds like the worst thing in the world to me but I've got co-workers that's exactly what they want they're like I don't want to have to solve novel problems I want to go in and make the perfect system that already solves a problem that people love I I love that in particular and like some a lot of my role is finding the people who have those other pockets in them like I really remember on Twitch like when I started leaning more into the management Direction getting a lot of feedback that's don't you love IC and code like Theo you're such a big coder why would you ever want to become a manager like managers for the people who don't love code that much and on the other hand it was like but Theo you're so abrasive and like passionate you'll never be a good leader because you can't like chill it out and be nice and it turns out both of those people giving me advice of both of those mindsets were entirely wrong and those things have ended up being my strengths because like my ability to sit down and grind something out when it needs to be grinded Out means that I'm able to relate to my team better so I'm able to keep stress levels lower when like something comes in unexpectedly I can jump on it too and I can maintain that level of involvement and respect from my team as a result of it and on the other side I like my passion allows for people in those different positions to get excited about things in ways that they weren't before and maybe challenge themselves to build in ways that they're not as used to yeah absolutely so I just it we've we've now apparently reached the the spicy takes because it just got way too hot in my office I'm accidentally CPU encoding My Stream right now so I feel that really hard so yeah if it looks like I'm sweating it's not because uh it's not because I'm uncomfortable it's just really really hot in my office totally totally relatable for me it's both and I'm sure you can see oh wow you actually can't for once that's nice cool normally I keep the camera angle perfectly cut so you can't see sweat stains yeah very painfully relatable I really like this it was uh the the three groups were like the innovators the settlers and the city planners right yeah yeah I think Pioneer Sellers and city planners like in uh I'll find a interesting though yeah I think that Founders are people who can straddle the line between pioneers and settlers like they find ground and they Camp it out [ __ ] hard to the point where it's become a city and then they begrudgingly move over long enough for the city planner to take over from there as they go and like pioneer out and settle new land but like I see my role as pioneering for as short a time as possible so I can get to settling and then put my like stake down hard as hell so it can eventually become a city yeah yeah right and I think it's it's like most personality types it's going to happen on a spectrum like you don't have introverts and extroverts you've got people who fall somewhere you know I'm right on the middle right like I want three days of heavy people time and then I want four days of sitting in a dark room with no human contact whatsoever I the thing I was just mentioning and I'm curious what your thoughts are on this was the content creator being the in-between of the city planner and the Pioneer and I think that to succeed as a creator is a very different skill set than to succeed as an engineer I just put up a video actually second last video I put on my channel where I went really in depth on the idea that I learned nothing about being a Founder from engineering and I learned a ton about it from my YouTube channel because the mindset of oh yeah there's like a specific mindset of not just like how good can you be at your Peak and what's the best things can be that I think as Engineers we're usually striving for it's like we're not scared to take a week off we work hard to make things happen in the highest quality that we can but we aren't scared to like take a step back or pass on a problem wherein the Creator in the founder World those are the scariest possible things are over committing stepping away and handing off without full understanding and confidence and on YouTube in particular it's not about how good you could be at your Peak it's how productive can you be at your floor when you feel like [ __ ] when nothing's working when everything's going to hell can you still get videos out and what do those videos look like because you're going to spend a lot of time on that floor and that's what being a Founder is too it's not about the highs it's about how you survive and thrive during the lows we haven't talked about Smash Burgers yet we haven't talked about Smash Burgers yet we definitely should talk about those so okay so Smash Burgers uh are you I don't know if I've ever even asked you like the Baseline question like are you are you a burger fan yes very big burger fan all right and what's what's your preference like do you like are you one of the like give me a burger that's as tall as my head that's you know a pound of beef or are you more on the the thin Patty side where do you land I could enjoy one of the like thick patties if done properly but I find that they're often an excuse for like not really knowing how to cook a burger correctly and a proper like thinner Patty can be cooked more properly like as a a big fan of a a proper like rare still kind of breathing Steak Burgers are the wrong place to go that rare and those Giant burgers are inviting being poorly cooked yeah right I mean this yes they're either like too overdone at which point it's like okay I guess I'll eat it um or but more I think what I struggle with more with the like the really thick Burgers is that it just I don't know why it inspires everybody to put 19 different toppings on it but i i a Core theme in my life is editing right like when you when you have a million ideas what makes somebody good at their craft is being able to not do most of them you have to be able to look at a thousand good ideas and then say I'm only gonna do these three right so when you're looking at a burger and you think I could put an onion ring on this I could put bacon on this I could put I like I could put a farm fresh egg on this it's like look don't don't do that that's not what it's for once the toppings lying in the in like the menu at the restaurant has to wrap to the next line you know that you over committed yeah I mean my my general like my general approach to a Smashburger is you just floor simple right um it's uh two like two and a half ounce Burger balls right so they're they're really thin patties smashed onto a griddle that's like 500 Degrees so that they immediately caramelize and the only thing you put on them is like salt and pepper some shredded iceberg lettuce because you need something to soak up the grease on the bottom bun you toast your buns you get a potato bun or a brioche bun whatever's on hand and then you put a little burger sauce on that and and really good diggles like you got to put some really good pickles on there um and if you're if you're looking for a little extra crunch you can do like diced white onions in the the shredded lettuce and that's always really nice but it's like you know it's like three toppings that's all you need they keep it really really simple and you gotta put American cheese on it because that's the glue that holds your like smashed within an inch of its life Burger together the American cheese like I I get it American cheese is like so bad and it's basically this plastic all [ __ ] yeah unlike plastic it melts really elegantly and holds things together I guess kind of like plastic in that sense but yeah it might be plastic I think it I don't even think it's actually called geez it's like uh it's a dairy product or something but I have uh for anybody who's interested in like the specifics of how I do it I have this site called burgers.dev which is um a a public beef site that I have with Sarah drazner and it's just me trolling her because Sarah is a big believer in the the sous-vide Burger where she does a thicker Patty and and Cooks it perfectly using sous-vide and then uses like a blowtorch to get the sear on it um which is foreign [Laughter] guys like if you thought I was bad talking about angular this is this is where it really Cuts deep um but so anyway so Sarah and I started talking about this pre-pandemic we were going to have a burger face off and do this whole thing and now you just you know she's now the uh director of web or is that her what her official title is is something absurd she's in she's in charge of the whole internet at Google um director of engineering for web and chrome if I recall yes like just a she is very busy and my my new job also keeps me very busy so we have not been able to put this burger show down on the books yet but when it happens I am going to win actually you want me to show you the most ridiculous thing I've um second most ridiculous thing I've ever done okay um is I I made a trophy let me go get it should I be as scared as I am chat oh man oh man have you switched to just your cam so you can get a close-up of that uh so this yeah here's are you gonna focus focus come on all right we'll just hold it back here so that it's in Focus um this is the championship belt for Smashburger well it's gonna be for a Smashburger but it it could theoretically if if Sarah pulls out a miracle be the um the sous-vide burger or Splash Burger as I've taken to calling it um but that's the belt it's absolutely ridiculous it turns out these are fairly affordable to make so if you want to troll your friends you can just head on down to the local trophy store and say I would like a championship belt and they'll make one for you the next programming Showdown let's get some belts made I have so many ideas now God making belts yes this piece of information is very dangerous for me to have okay so here's something that I've learned this is this is Maybe the best argument uh for why somebody needs to come and like take away all of my independent decision making is I figured out that if you ask people the right questions you can get literally anything custom made and so so I have to order my choice I forgot pandemic during the pandemic I drew these little things um and I I was like that was a way I was keeping myself entertained was by making little drawings of you know corgis and ice cream and whatever else um and then somebody said you should make a real rubber duck and I was like I don't know let me see how they take so I emailed somebody I work with a company called corporate Couture that does fulfillment on swag stores uh that's who I use for Gatsby and netlify and I use it myself and they were like oh oh we can probably figure that out so they they ended up calling around to a bunch of places and I finally ended up on the phone with a a manufacturing plant in China and they were like yeah we'll we'll take that drawing and like carve a little clay model so they they did some like hand carved clay models of these these Corgi ducks and I was like this is amazing can you make them and they were like yeah we'll make you a sample so they made me a sample and they sent me this and I was like okay I want I want these how do I get them they're like well the minimum order is a thousand oh no but I ordered them so now I have a thousand Corgi Ducks um so please please buy one uh because I have so many man I I was expecting like 100 to 500 for the minimum I was not expect to get extra zero there you have no like oh you just posted it in chat yeah I will order one of these first thing post show so make sure we don't sell at least a thousand of them leave one for me if y'all go and buy a thousand of these ducks right now I it made my marriage immediately order another thousand the the video of you putting all of them in like the lake in the back was the funniest thing I've ever seen that was uh yeah my my partner was really not thrilled with the the decision to purchase all of these um but she's a trooper and so she was willing to to put up with my nonsense um very much budget my family is starving you are not wrong I was trying to find this is this is the uh The Tick Tock I'll drop it in a couple channels here I'm gonna play this now I put 20 rubber rainbow Corgi decks into my partner's Bountiful [Music] leave me foreign why are you like this I put I I don't know how anybody could not think that's the funniest thing ever honestly I I cried laughing when I saw that clip the beef also my it is my only Tick Tock I have not I like don't I feel like that one happened so so organically and then I was like I should do another Tick Tock and I was like I'm not gonna it's not gonna be better I have to just stop go out as a one-hit wonder it's one of the problems with setting such a high bar going in is it's really hard to follow up like my first real stream was with Dan abramov doing a mock interview and it just took me a month to like work up to doing another like interview stream or just a stream at all it's like oh I'll never have more than 20 views ever again like that was such a crazy moment and yeah just start at the top right um yeah no I feel the same way I had like a couple moments where I had like Cassidy Williams on my stream and Sarah drafts are on my stream and they're just you know they just have such amazing audiences and I was like okay so so that's that's the top I'm just gonna I'll just slide back down to my own level here and plot along for the rest of time yeah I I have been really impressed with how quickly the space has grown I think there's a lot of different things that led to that but the one that I think like there's like a lot of silly things that have helped like the software and Game Dev category appearing the like covid resulting a lot more people going online to have Dev conversations and to be frank people like primagen and uh fireship or yeah fireship pushing really hard to make more senior technical content more prolific and obviously the work you've done as well with learning with Jason but I feel like we're nowhere near the ceiling for this type of like Dev content right now it feels like we're just getting started the ramp Up's been nuts the metrics I've seen on all of our channels have been crazy like we're just getting started in this space I think yeah and I think the the piece that's really interesting to me too is the learning that happens in a in a streaming environment is so different than the learning that happens when you watch even a video tutorial or something right because the the thing that I find really interesting about expertise is that it's up to a certain point it's just knowing stuff I know what to Google I know what this thing is called I've seen this this pattern before but then there's this whole thing of just experts have instincts and there's so many little things that an expert does as they work through a problem that they will never realize that they do consciously that they'll never call out or write an article about or anything like that they instead they just do it while they're in the middle of another task and you go wait what was that and I've noticed that on my stream the things that tend to be what really sticks with people aren't like the macro topic it's not like here we're gonna you know a few of them obviously have taken off and become that sort of thing but most of them it's like we're gonna build you know a thing with we'll build x with Y and that is useful but where people really get takeaways where the clips happen where people email me and say you know you just change my you change my Dev life is they'll see some Shortcut that I've used or some Alias I've set up or some tool that I have configured over here this way and they they look at it they go oh that makes my life so much easier and then they just that those little efficiency tips those little like my instinct is instead of doing this I do that here's where I look first when I see a bug like those sorts of things makes that's like I think why you used to have Journeymen and and Craftsmen where they kind of pair together is because I can study the Academia of anything forever but you never learn the craft without watching somebody who's been doing it longer and just knows the little tricks absolutely and I think less of that is the actual value of the tricks and more so the identity that comes alongside of them like the familiarity of I I know these things I have the confidence and the ownership of the tool I'm crafting with like knowing every shortcut in vs code I I firmly believe is not going to make you much faster as an engineer but it will make you feel like you own that tool much harder and it will make your own confidence and like thoroughness in your approach significantly better yeah I yeah I feel pretty strong there's like an 80 20 on on shortcuts and tooling and all that you know I be careful and honestly they're they're definitely things that I've seen that I cannot believe how fast people are in Vim you know and like I'm I'm not a Vim user I've tried to be a Vim user and I I'm not willing to put in the the ramp up time to become fast um because I think I try I started learning it after I was already fast in other tools so when I look at it I'm like I'm just frustrated by this but um the the speed with which somebody is just completely contained in vim and is able to do these amazing things is incredible but then when you look at uh when you look at somebody who really does optimize for like I know 100 of the keyboard shortcuts in figma or vs code or you know whatever it is that it's it's like that that hundred percent code coverage thing like it's it's cool but it doesn't necessarily make things better there's like a threshold Beyond which you're just doing it for the points not doing it for the the efficiency right um and so I'm I'm very much uh like I'm gonna set this tool up until it solves the problem I have right now and when I have a new problem I will see if this tool solves it and then I'll learn a new thing about this tool I'm not a completionist by any stretch of the the imagination yeah there's uh it's like a weird slight tangent there's a YouTube video that I think way too much about that has shaped a lot of my own philosophy around like adopting Technologies and tools there was a showdown between two YouTube editors it was Tanner who was at the time the editor for Linus Tech tips who had three keyboards with custom key layouts that he would use in his crazy setup in Premiere with like like the keyboards had different like keycaps on them specifically for his Premiere bindings he cussed devices crazy setup versus iJustine on her MacBook on her lap in Final Cut and just like the time it took for these two to set up and comparing that was hilarious they like had a desk and 95 of the desk was Tanner and it's crazy like multi-monitor setup and all this crazy [ __ ] they have the same Source footage their goal is to make a good compelling edit and ijustine's edit was better in the same amount of time and that was just mind-blowing for me I've I've seen that video and yeah I mean it's you know it's the that whole thing where like a poor Craftsman brain blames his tools sort of thing um and I think that when you watch I I am absolutely a Gearhead like my my camera setup is Bonkers and I've got like effects lights behind me and you know I'm look I've got two big old key lights and yeah I know what I am I know what I am but at the same point I have no illusions that buying this gear is what caused me to build a an audience or or have learned with Jason become something that people cite as you know like to have you talk about it as something you think of when you think about content Creation in Dev it's it's definitely not because I bought a Sony fx3 I bought the fx3 because I wanted bokeh that's that's all I wanted the I got the good camera and the good lens so that my background would be blurred out and I'd look like a cool hipster that's all I wanted um but that was something 300 on my Panasonic Lumix G7 and we look comparable so you don't have to go exactly right like it's it's not the gear it's like the gear is a hobby the tools can become a hobby like you know being a completionist in in all of the ins and outs of how something works it can make you more efficient but you know a musician like Jacob Collier who knows literally everything about music like deep deep music theory knowledge and and can play every instrument and all these things isn't necessarily making better music than the Ramones I mean like technically sure but like who listens to more of what right like the Ramones can barely play their goddamn instruments and yet they're out there making music and and people really love it so I I think it's it's very much about the the approach and the the consistency and the willingness to just try things and learn and adapt that really makes the the big difference and like the tools are a thing that you know that's it's like the bonus after you've already built a consistent creation habit and after you've you know done these other things I just heard somebody like fall down in my house I hope everybody's okay you need to go check on people it's totally fine I understand no people are still talking normally whatever it was it's fine temporary pain my cats have been really quiet I'm now suspicious too uh Mark let me know if the cats are causing problems out there because they've been not causing problems in here which is a nice change we have been going for two hours I don't want to keep you for too long but I definitely want to open up the opportunity for chat questions if y'all have anything that we didn't cover here as we wait there's something we touched on a bit that I feel like we went quite into it as much as I wanted to and I'm curious where where does graphql fall in your mind in the world of jam stack we have done it a bit but like what is the relationship there I um I I don't know that graphql has a relationship to jam Stacks specifically like you can use it in a way that would be jam stacking in a way that's not um but I think like graphql for me at least is a it is a tool for wrangling unruly data and that's that's why I got into it to start was you know again at IBM 30 something micro Services they've all got different apis nobody's documenting anything nobody wants to talk to each other I needed a way for front-end devs to know what the hell was going on in the system and I needed a way for the back end devs to be on the hook to tell one person when something changed because we were having all these breaking changes because they were like well there's too many people that we just wait to wait for people to tell us it's broken and then we'll we'll tell them what's going on um and obviously that's not great in a production system so with with graphql what I was able to do is it was Federated data where I built um at the time nothing existed for this so I I built out a tool that I called Gramps that was a graphql federation it was a tiny little thing that you hooked on top of your apis that kind of inferred what your rest data looked like and built a graphql schema out of it and then you plug those things together into a single graphql endpoint so that the front end teams could then interest respect and you would get a clear error if data was missing and we also gave analytics back to the back end teams to let them know that like hey some of these bespoke things that you put together like nobody uses it and this field is super slow so stop making that query because zero requests have gone through in the last month um so as again as a communication tool I really like graphql I usually don't set up graphql on my own projects because I feel like it's it's a problem to solve existing complexity not necessarily something that helps when you don't have complexity if it feels like adding complexity right and typically on a Greenfield project the the initial startup cost of of setting up graphql is pretty high um the only exception to that rule for me at least is that I will set up graphql if I need web sockets because the tooling around graphql subscriptions is easier for me to understand than the tooling around like having a streaming database update that I have to connect to some other system that then has to connect to my front end that I have to then update the front end with and part of that could be that I just don't know the tools right like I learned graphql subscriptions as one of the first like really truly real-time updating systems that I was building so I never had occasion to go learn what has improved since before graphql that's really interesting because like graphql subscriptions are something I've never I've seen shipped in experiments but I've never seen shipped in like a major production application and I've seen like dozens of graphql deployments like subscriptions aren't officially part of the graphql spec yet and it's like a a very bleeding edge thing to do that and a lot of like core graphql Tech doesn't even support them yeah yeah it's definitely the sort of thing that like I've used it real sparingly I think I've set up two of these ever um and one of them is for my own stream because I wanted uh I needed to pull together a bunch of real-time events and I didn't want to have a bunch of different websockets open on my my site so I put it all into a graphql subscription um and I wanted some stuff that wasn't actually real-time like you know web Hooks and things like that to alert out and I was like well I've already got this graphql thing so let's just feed those events in as well um so for me it was a way to to just calm some complexity between like tmi.js for twitch and um some stuff from sanity which I use is the the headless CMS for uh learn with Jason and Discord bot stuff and just you know all these places where data comes in and things happen I wanted um I wanted a way to just pull that all into a single subscription so for me and again I wouldn't call what I'm building it at learn with Jason a big production system it's very much like I solved the problem for myself um but in that instance graphql subscription solved it real quick for me so I was like cool I can get this done in a day and never have to think about it again that's not the experience I've heard with graphql subscriptions before but it's really cool that like the tech you use let you adopt those in a relatively seamless way like that was the promise of it and it delivered for you I've never heard that happening before so I'm genuinely hyped and that's that's cool I think it it comes with the caveat of I spent 12 months at IBM like really getting into the graphql spec and really learning how things like Apollo and Urkel worked under the hood and you know really getting buried into that community so I think a lot of my instincts for for graphql are good now um in a way that is probably not true which is and probably informing a lot of you know what's going well for me in my graphql experience so you know take take my graphql stuff with a grain of salt because it I was able to put it together in a day plus it's like the plumber right like the plumber knows exactly where to hit on the thing because they've been doing it for 25 years there's also a very real compromise as soon as you add like web sockets to a lot of the systems that we talked about here in jamstack land that now you need a server it's no longer serverless architecture because there has to be a box that is maintaining a connection that has State on it and I try my goddamn hardest to keep that type of building as far away from my systems as possible I really don't like the idea of avoidable state and whenever I can make a websockets I'm like we're in a ping call right now we have a third party websocket service that has a presence product that we put up data that's like which devices do you have like on your computer which one are you using right now and from those websocket presence connections the UI is able to infer specific behaviors the thing we added on top of that for like I change my username how do users get the update on the username change endpoint that I hit through a trpc use mutation it first updates a DB and then after that it broadcasts a message with the ID of that query to the call so anybody who has that data currently on stream or on their screen refetches that data in a batch request the results oh nice it's not like the web hook event or the websocket event has the updated data it has the key that needs to be updated and then the client can invalidate and fetch the new data itself there that way I've decoupled the event system from the storage system from the API with a slight latency hit because the event doesn't trigger the update on the client the event tells the client to then go do an update but that's a small cost for the Absurd benefit of proper decoupling of these things yeah it sounds way better than the way that I built it mine is a big old mess mine is just a pile like I I needed a thing to work and I just like no no that'll be fine I know nobody but me needs to use this and every time I have to debug it I hate it because I feel the same way like I really don't want long running Services I really don't want uh to have to worry about server uptime and stuff like that so uh yeah if I were to build it again today after having this conversation I probably would be looking into something more similar to what you're doing yeah I would definitely love to show you a bit of the chaotic way we build things that Tang I think you would at first hate it because of how tightly coupled things are but slowly grow to love it when you realize that that tight coupling results in so little code doing so much and all of the pieces making sense in a way where like one of my favorite moments I went on this ride a few times I'm sure a lot of people in chat are gonna be like oh not this one again uh one of my first hires at ping is they were a Ramen Chef before they started working at Peng they hit me up via email with a link to their GitHub full of game engines they built themselves in Zig for fun super talented developers didn't know where they were at in their career so I pulled them on to work at ping they never used typescript never built web apps never built apis before but due to the Simplicity of like the trpc next JS full stack type safe solution we had they were able to start building features really quick in particular they built a lot of our admin tools for us to like manage calls behind the scenes keep track of like whose rooms are activated stuff like that six months in we started building the video recording infrastructure that we're working on now for you in the very near future hopefully if all goes well maybe but before twitchcon we'll be able to ship that fingers crossed this is for everybody watching who hasn't heard I bullied Theo about this weekly yes as you said this is a huge part of what keeps us on top of things right now I think I mentioned this before our recording infrastructure is you click a broken button in the admin panel as a or as a user that just recently started showing text that said recording so that you know you're recording finally that was a recent change really hyped on that one and then when you're done recording you DM me I go into the database I find the names of all of the file dubs in our S3 and I manually transcode those on my laptop and then send them via Google Drive so we want to automate all of that because it sucks yes and we're close yeah I mean most of all it sucks for you I think yeah yeah it is what it is but I guess that's the right way to do feature that's the right way to do things like make it painful for the CEO so the prioritization happens right absolutely straight up it's a huge part of how we validate the the product like like if I'm not annoyed by the amount of transcoding I'm doing the product isn't viable enough for us to spend the engineering effort but if I'm annoyed that needs to be a high priority because people actually want it if we make a good enough product we're good in that sense I the reason I brought this whole story up is that this engineer is like largely leading that project and we sat down and we spec the whole thing out we drew fancy diagrams we had a pretty solid plan figured out the only question they had at the end and I will never forget this moment hey Theo I feel bad asking this but I should really know by now what's an end point they've been working for me for six months building all these crazy Solutions making ping work and the thought of an endpoint was a foreign concept because they wrote functions in the server folder and then called them in the client folder what's an end point there's no end point in that world and I realized like oh that's the level of complexity like the dimensions of complexity we have avoided we don't think in those things we write functions and call them yeah and I I do think um this is where you and I are are very philosophically aligned um with with like different practical choices is you know the whole goal is to just eliminate hurdles for people how do we make somebody productive on their first day that's a metric for for us at netlify is like are people able to open their first first pull request within 24 hours of their start date um because you should be able to ramp up that fast like our Dev environment should be friendly enough our code base should be understandable enough that you can go in and make meaningful contributions on day one um and and so I think you know the the it kind of gets back to this whole thing around like why do you design software anyway it's always being designed to help human people understand what we're telling the computers to do and and to help make them by default make better choices and that and that's the whole thing right um anything else beyond that is is just our own experiences our own opinions informing those underlying points absolutely agree I love that way you're thinking about it we're all just trying to make computers do the right thing for our users and the simpler you can make it the better yeah yes 100 I do see some awesome questions coming in so I want to make sure we get to some of these uh one I really like from uh Dev or Deva I feel like I had the same misconception coming in a bit uh the question is what are the largest and most complex projects and scales you've seen like jam stack working for as they personally assumed Jam stack was an approach more for small to medium-sized projects um the so most complex product would probably be the twilio dashboard or maybe the like the Peloton embedded apps like on the bikes themselves are both posted on the other setup as jamstack apps um the biggest scale is probably riot games so like League of Legends and and all that they're um in the process of migrating a lot of their sites over which has been steadily setting bandwidth records for us but um what was really interesting actually is uh I I'm not going to say any details because I don't have them and I don't want to misquote anything but in both bandwidth and performance they saw notable improvements over what they were doing before which was like aggressively tuned manual caching um and so it it was you know the architectural choices that they've made have eliminated a lot of the things that were causing them to both slow down and send more data over the wire um It Again by you know just the the natural enforcement of that that jams XF causes some some really good architectural bonuses I love one less work ends up being more perform I still remember when I like was fresh out of twitch I had been managing the webpack configs for a bunch of internal projects and helping with the one for all of twitch so I I my one of my first web dev tasks ever was a webpack 2 to webpack 4 move I don't know how I survived but I I'm still here I think this is why I don't like tools in the space but uh yeah the reason I brought that up is when I left I was using snowpack more and more then I started using Veet and I'd become so used to writing custom bundle splitting configs like making my own chaotic like file architectures just to do bundle splitting correctly and I did all of that work and started hitting memory errors in my build because I done so much custom work in uh or in roll up through Veet and I accidentally renamed the key for those bundles so it wasn't making any of them and the output when I did a bundle analysis was better than any of the manual chunking I had ever done and I realized yeah I and over building a worse solution here than what the tool does for me if I react.lazy in three places I need to just do that and get over my [ __ ] and all of a sudden okay everything worked way faster so you're you're touching on something that I think is um this again comes down to like I think developers especially the folks who really get amped up about this stuff are are also having a lot of fun as they do their jobs because so much pain that I see when I get you know I uh as part of my role I get brought onto like sales calls or I sometimes do Consulting on the side for companies and when I get brought into a code base so much of what I see is well we didn't want to use the off-the-shelf tools so we started building this thing and then we built this system and we architected this on top of it and then we accidentally took down production for three days because one cash invalidation was causing the other cash to Prime which would then break the third cash and then we couldn't figure out how to get them all to clear at the same time so we were just down for three days and like that's a true story for a site that's way too big to ever ever be down and when you you hear these stories and then you ask them what they're doing you like look at the code you're like okay but if you just like any pre-packaged CDN would do what you're asking for and never ever run that risk and they're like well yeah but we thought that we could do it like better because of this specific requirement it's like okay but you're you are now basically saying okay company that employs like actively recruits the best caching specialists in the world to solve this problem and pays them an exorbitant amount of money to focus their full-time effort on making caching better you as a react Dev or a next Dev are saying that's not good enough I'm gonna go [ __ ] with an Akamai cache and tell ours is faster it's like of course that's going to cause you problems of course you're gonna suffer like trust the experts to be experts and like when a tool has given you a default config if you don't have Rock Solid data that the thing it does by default is actively your biggest problem please don't touch it like you use the defaults they're there for a reason in in modern tooling is built to be good at this like Veet and most of the you know the CDN platforms like I know that at netlify the vast majority of our tickets are like fix this Edge case of caching make sure that this invalidation works in under a few seconds like do this where that's all they do all day right so when people come in and they're like yeah but I want to turn that off and use my own cache headers it's like I mean we'll let you but please don't yeah yeah I have seen so much chaos around caching and redis as a phenomenal product it is the wrong place to cash your HTML like I am so confused in some of the use cases I've seen people like Reinventing cdns and then running code on the edge when what they really want is an HTML file that gets revalidated every once in a while and it's like the amount of architecture that I've been able to stop thinking about out through a combination of netlify and versal making serverless functions and Edge deployments so easy and cdns making cache layers basically free have resulted in me not thinking about categories of problems that I used to have to employ teams for and you can apply that team if you want to but now you're at a huge disadvantage and when I look at a company like twitch who's directly competing with us and our core product now at ping they have a team of 20 Engineers that took nine months to build a product with half the features that's a quarter as good as what we built and we can run circles around them with our little four-person team because we are using the tools that let us move faster we're not Reinventing the things or suffering from a lot of not invented hair syndrome around problems like Planet scale is a whole category of problems I used to care way too much about like I used to be a database dirt and cared all about the different ways to scale your DBS and your biggest all of our data infrastructure the fastest in the world and I get read times in SF from the planet scale DB Edge that are within 10 of that's Bonkers and I have no infrastructure so freaking cool yeah I I like the database space in general right now is remarkable like I I'm watching so many companies because like Planet scale kind of exploded onto the scene um and you know obviously what they're doing is is giving front-end developers access to to my sequel in a way that doesn't hurt um and then we've got this explosion of other companies trying all sorts of things you know like fauna with their bespoke query language and and what they're doing and then uh companies like super bass and uh others that are now we've got some that are like completely abstracted away like I just looked at something called convex where it's just a JavaScript API and like everything else is Magic and I I'm okay I mean I hope they get it right like it's super cool um but it feels like databases are revolutionizing right now because I think we've also just started to accept that probably most apps make more sense if they're serverless or Edge functions rather than being long-running servers so databases should be built for that how do you get a serverless native database an edge native database and so the the category of problems that I think was ignored for a really long time is suddenly getting a lot of attention and there's a huge amount of investment cash going into it a huge amount of developer hours going into it and I'm just I'm just so blown away by by what planet scale is doing um yeah the thing is especially when you compare it to things like what like super bass or convex are doing is that they're not trying to take away anything beyond the database layer like I still have like I still connect through Prisma almost entirely when I'm working with my Planet skill databases I'm starting to write my own custom kiesley wrapper so I can do Edge routing in a type Safe Way without having to like have the whole Prisma client I have some working demos on my GitHub if you scroll through and find them but Planet scale hasn't taken away ownership in there in like development and that's what's so cool for me is it took away the awful configuration window I used to go into and panic whenever I had to scale up my database in AWS Super Bass still has one of those you will hit a scaling limit someday and have to scale up your database and just be offline for a while that's the reality of those other offers or offerings Planet scale took away that interface and that dimension of problems without taking away my ownership of my technology at the same time and that's what's so magic for me with Planet scale is what it represents there as a dimension reducer of problems without taking ownership away in the process normally when you have one of those things you have to have both they're one of the rare cases where that didn't happen I think yeah you're you're actually bringing up something I think really important um and I I think the way I was saying it was kind of clumsy but talking about this idea of like don't try to hire experts hire tools that already hired experts right and and when you're saying this uh this idea of reducing Dimensions I like the idea of like it's a good way to put it like the apps are very highly dimensional there are a million like vectors that impact how an app works right and you can have two apps with the same stack and one of them will be wildly dysfunctional and like impossible to ship and one of them will be you know it'll be live in seconds and I've you know I've walked between teams in the same company that use the exact same starter code and they've just made choices in the way that they invent things they pull other people's code in and reverse engineer it and build their own version and then every single time you want to make a change it's not just does the tool we use to support that feature it's does the tool that we rip off support that feature so that we can go figure out how it works and then reverse engineer it and then do all the acceptance testing at the base layers so that we can bring it up to the middle layer and make sure that all of that code is updated and then we can go up a layer again and then finally you know you're it's like weeks of code and like you said you have to hire people to do that like you can't maintain that code on a single Dev because even if you have one Dev that can do all that work they will burn out and they will be a huge uh bus factor is a little violent way to put it but you can call it I call it vacation tolerance how many people can be on vacation before you're in huge trouble and and if your vacation tolerance is won yeah man you're screwed especially when you've got five layers of of code that's all dependent on this one person who's the only person who has the full context um and yeah oh my God I I think this is the thing that I find most exciting about this idea of um I the shorthand I've been using for is composable architecture you've got tons and tons of platform as a service database as a service software as a service uh CMS is a service uh e-commerce as a service each one of these is now delivering something that is maintained and managed by an expert team and I as a developer only ever need to understand how to interact with a rest endpoint a graphql endpoint or a JavaScript SDK and if I have those three skills which fall very squarely within my my own skill set as what would be called a front-end developer of HTML CSS and JavaScript I learned those things and now I can build extraordinarily complex apps in two hours 24 hours a week right and the fact that you can go spin up a site that's got a video player and also a swag store and also a upcoming schedule and also some like live interactivity for when you do go live you know the the learn with Jason site I built in a couple of weekends and it's got so much functionality in it because I just let other people do all the work I went to all these experts and I used their tools and I was able to you know like I threw it all together real fast and I'm I'm looking at re-architecting the shop I built almost almost feature complete shop based on uh remix and Shopify and like 90 minutes on a stream it's just wild how much you can do now with the tools that are out there if you can can get over that fear that letting somebody else do work somehow makes you less effective as a developer or will somehow hinder you from being able to be productive totally agree I think there's an important line worth drawing and this kind of goes back to the build versus buyer earlier what are the other questions in chat actually about your uh use of like headless CMS tools is I think it's really important to understand what ownership you're giving up when you make one of those decisions like the choice to use something like netlify plus Planet scale build your own Prisma layer and then use a websocket layer through something like uh what's it called uh like or Pusher or ably any of those services or do you go with something like fire store or do you just give up and go with WordPress or Wix I would consider a lot of these tools leaning into the Wix Direction where it's taking away your agency and your control especially if it's not built on Open Standards that you can gut I think Super Bass is really interesting right on the line product in that sense where it has an open source database layer that is postgres you can connect to the postgres directly and the whole project itself is open source so you could self-host Super Bass if you really wanted to but the amount of ownership that you give up when you use their JS client instead of connecting to that database directly is massive you're going to run into scale problems you're going to have to move off and that's going to be a pain when you have pieces that understand the scope of where their ownership ends well they are much more modular and composability I believe should imply modularity and I've seen way too many solutions that don't I really like netlify and versel in particular for how standout they are in this way neither are stateful you cannot host your state on netlify or versel if you write to a file store like so it makes request you write to a file the next request the file doesn't exist anymore and the number of people we've had they're like I deployed my T3 app with sqlite and as soon as like I refresh the data's gone what's happening it's like there's no data there this is by Design the decoupling of your state from your run time gives you more ownership and control of both and reduces the complexity of your application so I look for opportunities like that rather than ones that like put a wall between me and some part of my application so I don't think about it anymore I yeah I think you're you're absolutely right and I would I would add one more um slider to that decision making which is how long does this thing need to live yes right so like if I'm standing up for example I'm working on jamstat conf is coming up uh November 7th and 8th right and so for that event we want to build an app that will let people play a version of Bingo and I promise you that app is not going to survive too much longer than after jams.com so I don't care about giving up the ownership I will not hit scale problems because it's not going to evolve it's not going to become anything more than it is right so in that case I kind of like super bass because it's got the auth built in it's got the the re the whole crud set up and it's got real time and I can just say right Super Bass do you take care of this and then you know if this ever did grow into something where we spin it off and turn it into its own startup sure we'll probably rip out Super Bass and re-architect with something that's going to scale better but for a short-lived app that is most likely going to survive for call it three weeks um I don't care give me the thing that's the fastest time to completion and if that means giving up a lot of ownership over the back end if I don't ever need to maintain it if I don't ever need to iterate on this idea I really like the idea of being able to just say oh that's an app in a box for my entire dashboard right so I think there's also that that scale of like how long lived is it really like be honest with yourself will this still be a thing you use next year and does it need to be ready to be iterated on and expanded and scaled or is this a one-off that you're going to use for a year or use for a few months and then it's going to be replaced by something else next year I mostly agree the two things I would push back on the first is you don't know if your thing could handle the scale until you handle it and I've seen a lot of case of people building and like I don't mean to be calling on two base I do genuinely love the company and the product but I've seen too many instances where somebody was building an app for like a one-time event and it immediately crumbled under the weight of the traffic for that event even though it was just gonna be a one-day thing and ultimately Los Angeles had to move off of Super Bass because it took so long to try and scale up and get it to the right Point even though it was only going to be for one day they had to scale up for a whole month and switch the database over and get all these weird compute numbers that don't really matter to them they just wanted a database that would be they would charge for their usage in super bases experience because it is an abstraction on top of a traditional server that you don't own results in problems being something that take that gets solved on super basis time not your own and that's why I'm so scared of losing that ownership is when you do run into a problem even on a short scale the likelihood that you can own and address that problem is lower the other side and this is the angle that I've been fighting at really hard for a while now is what if we didn't have to make the compromise what if you could have the agility you get from something like super bass without giving up the ownership of it and that is what we're striving for with create T3 app it's get off set up in a way you own with next auth get database setup in a way you own with Prisma get your infrastructure set up in a way you own with nexjs and trpcs the API layer between it giving you the ownership of those things while still giving you the benefit of having them set up for you as soon as you run the command line I think there's a balance here where it's slightly less like like if the Super Bass method you described is 10 out of 10 efficiency this is 9 out of ten with none of the compromise on ownership yeah yeah that's fair I and I think yeah when you're when you're making that trade-off it it really kind of comes down to like what are the tools available and how much do you understand them um because you know I think for me I don't know what I would do with next off like I and and so some of the ramp up there is like maybe fast probably fast I don't know I'd never use these tools but it's a lot of new things for me like my experience with trpc is one episode's worth in my experience with Prisma is like one project that I built that didn't end up in production um and so for me to move into these tools is probably fast um and if create T3 app is rocking some killer docs I'm super happy because I need to read those docs for Super Bass too or for fauna or any of these other tools right so the the the thing I'm always looking at is um you bring up really good points about scale because that is fair like if you if you choose the wrong tool and it can't handle a burst you're what do you do yeah you like get in there support queue and hope for the best but you know that sucks right so uh I do definitely hear that and that is a concern that's well worth looking into um and then on the other side I look at at my own like what are the skills of the people working on this thing and and you know what's the fastest thing to ramp up on and typically that's going to be the thing that does the most with the best docs and so that's that's sort of where I start looking at too because and again like you're building a company the things that you're building are a little more long-lived I'm building marketing sites and demos and so a lot of the things that I'm building aren't necessarily built for like longevity they're not necessarily built for um you know like burst capacity is like a few thousand people open it to to laugh at the fun thing um and that is it so we do need to be mindful of that but I'm also not building like Mission critical things if I build if I build a site to troll Phil Hawksworth and too many people look at it and it falls over I don't care you know what I mean like it but if I was doing that for like a conference Registration site I care very much and and so I think that's yeah again just kind of getting into the incredible Nuance of making these these decisions around architecture and stuff it's my goal specifically to make this less nuanced by making the gap between like right now it feels like the gap's introduced from tools like these let me move way faster to tools like these are the ones I'm familiar with and they let me personally move slightly faster because of that familiarity yeah absolutely nothing I ever do will be better than something like an individual developer is familiar with but we've specifically picked the Technologies we've picked to let you use a basic knowledge of typescript to build scalable full stack applications without any concern or compromise around your ownership and that's the the long-term Hill I'm prepared to die on is we can make these other tools pretty much always the wrong choice unless you're already familiar intimately with them it's not because they are bad but because you can get the same wins without compromising on the ownership and that's the upward spiral of Dev right it's like you you start with you start with dhtml and then you get jQuery and jQuery came with a lot of trade-offs uh but it was way better than what was there before and then we learned and we did something better than that right um and I think that you know you were talking about the pendulum swing um and I I hear people talk about the like going in circles and you know the from the top view the top down it does look like going in circles yes but if you go sideways it is very much an upward spiral because we're all we're always solving the next set of problems and I think you bring up what is a very very valid challenge to the current set of solutions the current set of solutions was it is too hard to bring together all these disparate systems we will build an all-in-one now people have made the disparate systems really really good like we've been talking about planet scale it is killer so it's not as hard to use Planet scale as it is to go on AWS and spin up a mySQL database so if that's true then some of the value prop of a Firebase isn't really there anymore and so then the next set of problems becomes what you're talking about how do we how do we get the benefits of this current crop of solutions without the trade-offs and create a next crop of solutions and so I think we're seeing that right now with you know this kind of sea change in people looking at what comes after react and people looking at you know why don't we go to serverless instead of managing all of these servers and uh you know within the revolution is one of the biggest parts of this like not having to think about infrastructure as computers that you own and worry about running and instead thinking about infrastructure as where the code goes and when it runs and that like it's where can we reduce dimensions of problems there was a huge dimension of problems around infrastructure that Lambda solved there's another dimension of problems around CI CD that netlify pioneered solutions for early on that have been copied by everybody body sense the idea that I could sign in with my GitHub repo and y'all handle everything from there was truly groundbreaking the first time I saw that I I couldn't believe it I was like wait I spent so much time setting up the CI at twitch and now I click sign in and it's better than the CIA setup what the hell is going on and those solutions that take like problems that are more configuration less architecture and removing that Dimension entirely really excite me and I have feared for a while now that it's easy to mistake something that handles CI for you in that elegant of a way for something that takes your ownership from you in like the data sense and I want to be sure that like when people like picking netlify or versel and picking Planet scale are very different from picking Super Bass or Firebase like there's a huge difference in what you're giving up when you make those choices and I want to be very clear that there is a different tier of buy-in and a more significant like thought you should go through before making a decision on that side versus try out for sale quick if it turns out to not be the right thing you just picked one of many ways to deploy your lambdas move over to netlify move over to fly or flight control move over to AWS yourself but those Solutions are not they are improvements to our workflows on top of things we can do ourselves versus entire architectures being sold to us with a black wall in front of them right that okay that okay yep you yep I'm turned around to your point of view here I agree because you you don't want to get yourself into a situation where leaving is as hard as getting there in the first place was absolutely um and and I think there's a huge difference between like there's vendor lock-in and then there's vendor lock-in right and then there's vendor lock-in like the the the traditional Enterprise Consulting level vendor lock and we won't even talk about but if if we're looking at like I've chosen a tool and that tool has made it so that it is a a 100 turnover of my solution to move to a new solution that feels like vendor lock-in if the if the switch is I gotta drop in a couple different config files I gotta switch out what my database driver is or whatever it is that's like a 10 15 you know 20 Max churn in in your code base to support to swap to a new vendor and it really does come into that like you know is the thing solving the problem so completely that I that I'm willing to make the investment in it because that's you know that's what happens when you invest in something like next JS if you go all in on all of their Primitives you now need to completely turn your code base to move to another framework yep um and that's not necessarily A Bad Thing uh but you can also use something like Astro or remix or next JS with a more just component based approach and you don't go all the way into like the deep dark what's only possible with nexjs on versel because they built it that way like those types of things that really do lead to lock in um where you you now have to like re-architect stuff right and so I think that figuring out how to draw those lines where where you you have a good Instinct and this is again we're talking about expertise right how do you build these instincts where you where you have that alarm go off that goes oh I'm about to make a choice is going to be expensive to undo yep um one of the the leaders on my team has this this idea about like in decision making is it a one-way door or a two-way door like if you if you walk through this door and something goes wrong can you just turn around and walk right back out or does it lock behind you and now you have a very expensive way to backtrack um and and so that you know figuring out where especially for your org because and this is why every developer says it depends right is because when you start asking these questions it's like well okay I would use super bass If X Y and Z were true right and you know and I would use fauna if x y z were true I would use Planet scale if XYZ are true and the the number of things that need to be true for tools that are more specialized it gets really long um but you still that's a list of heuristics that you you build into your own decision making process and then you just have to remember your familiarity is not the only reason to make a choice and you know well like if it's a personal project cool do it do what you know it doesn't matter if it's bad right I build bad stuff all the time because it's just for me but when I'm building something for the company I'm thinking about how many people have to maintain this what do the people who will inherit this know what's their familiarity level what's what are the tools that are already in play how how much am I expanding the the company's tool set by making this Choice like so many of these these different factors that come in um but I really do like I'm gonna I'm gonna take with me the idea of of thinking about like how much of your ownership of something are you giving away by making certain choices absolutely love this and to quickly to Fed into the services that do like this type of taking away the ownership I think there's a ton of innovation around developer experience that can only happen in those places like a lot of what makes full stack Jam stack style development so great are the Innovations next JS and versl did by Tyler coupling those things a lot of the work flows around databases that we've fallen in love with with things like Planet scale were originally innovated by Firebase and the things that they enabled by locking all of that in together the idea of data that updates itself on the client is still something that we're trying to like chase after and lots of other like workflows now I think that it's important to look at what is happening in that world of like infrastructure buy-in and ownership that is irresponsible to jump on unless you have a really good reason for it but you can see the things they make possible and we in like the open source infrastructure world of modular pieces that like on my side we build the Frameworks and on your side you build the infrastructure we can make it so you don't have to make those compromises to have that developer experience and that's my goal is to learn the lessons those tightly coupled Solutions prove and apply them other places it's the Unix philosophy all over again we've seen how operating systems can work if everything's pulled together correct how good can they work if we replace all the parts with things that were optimized by the right person at the right time and can we assemble that in a way that anybody can install off a USB drive I think we can do that I obviously we couldn't do that for like the year of the Linux desktop will never happen but the year of the modular Tech stack is next year yeah yeah we're going we're going composable everybody I'm sorry like for real I think I think you are you're spot on there and I think like Tech stack also is a broad term because it's not just like the code that you're gonna write it's also the services you're going to use you know even the things that really tried to resist it like WordPress have gone headless Shopify is headless like you can now just access them the same way that you would access anything else and that is really really powerful because it means you know we the promise that was made years ago about like oh well you know you can build a website and then any service that you want to use it just like it's hot swaps in right that was the that was the promise of Gatsby and we didn't like the way that Gatsby did it because it was it was big heavy graphql for weird for weird reasons um but it it sort of delivered on This Promise of well if you add the data plugin for this and then swap it out for the data plugin for that the code changes to switch from one system to another is just tweak your query and that part was cool but we didn't like all the trade-offs that came with it so now when we're looking at what's next I think we're starting to see like it's getting easier and easier to make these choices and things like Prisma and trpc things like Planet scale things like serverless functions are starting to make some of that that data normalization that enables this plug-and-playness of of a truly like modular composable site is enabled because we're all starting to learn from each other and make better decisions about how to make data portable um and what I'm excited about is that we're not currently seeing people violently pull away from that which is somewhat refreshing because that hasn't always been the case like a lot of times when companies start to smell that they're becoming interoperable they do something really destructive and try to make something that's like only works on them and like is actively a little bit broken from the specs so that it's really painful to switch off we haven't seen that yet and I'm really hopeful that that Trend continues yeah I I definitely agree with the Trident changed I haven't seen much that would be like oh that is miserable to move off other than a few of these new database platforms like I don't want to call out too many by name particularly but convicts you scare me you very much scare me with what you're building there uh I yeah I am pumped that the modular mindset seems to have really taken over I I credit serverless functions in particular for that I think that we're still feeling the impact there and the amount that I've personally change my way of building as a result is unbelievable and I think we're just starting to see the results of that now it's kind of like I come from the game world and we are now enough years out from when breath of the wild the new Legend of Zelda game on the switch happened that we're starting to see the games made by people who had their worlds shaken by that game and had to rethink the way they do things we're just seeing the result of people whose grounds were shaken by serverless functions and like react.js and the idea of these broken up pieces starting to build the next generation of tools on top of what we learned yeah 100 that is a I I it's so cheesy that every developer always signs off with like I can't wait to see what you build but like legitimately every time somebody drops something where you can see someone really understood what what is unlocked not like how I can build the same things using new tools but legitimately like this is now net new positive it was not possible before oh I get so excited like it's just when when Planet scale drop portals for example I was like oh right when we got we got Edge functions running on on netlify uh I was it just that stuff I'm like just cannot stop spinning wheels on like oh my God now we can do this now we can do this now we can do this and it is it is just so much fun to be part of the web when we're in an innovation wave like this um where it like you said people realize that new things were possible and they're starting to build companies on new possibilities and I think that part is really truly incredible and and unlock so much fun for us as web devs uh which I'm saying web devs and not front end devs because I think we're we're too far back in the stack now with all these tools to call ourselves front end anymore I think we're web devs now and web experiences are whole ass applications like I said it's it's not like the microservice spits out a front-ended the web app is the application on top and then you've got back-end microservice applications that that drive in the middle right um or the drive at the back and all of that is very complex and very serious engineering work uh that is it's just different now than it was in 2015 or in 2005. I absolutely agree sorry chat distracted me with uh cloudflare workers are going to replace lambdas I yeah I will wait till we have wrapped up here because I don't agree I think workers are great and I love Edge stuff and I think there's a lot of use cases that we can move from Lambda to Edge but uh not a drop in replacement we're a long ways from that being realistic yeah yeah I think and they solve different problems right like so like serverless functions are solving a a I want my my logic to happen close to the data center and Edge functions are solving I want my logic to happen close to the user and I I don't know I feel like they're they're separate things I totally agree I I like Edge is bringing compute closer to your user Lambda is bringing infrascaling blindly to your like uh regions it's yeah sorry to distract with that one I totally agree though and yeah I'm pumped with how this wrapped up I didn't expect we would agree this much about this many of these things I am hyped and also totally agree cannot couldn't be more excited for the future of where these tools are going where companies like netlify are pushing things oh do you want to shout out the specific netlify thing coming up before I forget oh yeah yeah let me uh let me do a quick shout out again to jamstatcomp um the the the event is happening in person in San Francisco we're super excited about it it's the first in-person event we're throwing since 2019 I am going to be there myself as well as like Sunil pie is going to be there um we're gonna have Ryan carniado there Zach Leatherman Fred shot from Astro uh Jessica janick from the angular team like we've got a whole bunch of people from the framework teams we've got people from planet scale Super Bass uh Zeta convex chisel strike like a bunch of new database people all coming in and we're just going to be kind of talking at length about what a lot of what Theo and I have been talking about like the web has there's been a tectonic shift in it right more is possible today than there ever was before so if you want to get a ticket you can go to jamstack.org conf and we would absolutely love to see you there uh it's also online but come hang out in person it's going to be really fun we like rented a building with rooftop and stuff so we're going to have live coding DJs out on the rooftop and all sorts of cool oh we got a pen full of dogs like a local rescue is bringing dogs so that we can all uh pet dogs and if you live in San Francisco you can take one home um you can't promise free dogs and not expect me to show up yeah I'm I'm super pumped about it like we're we're putting a lot into this one uh it's gonna be really really fun and I just I'm also just so excited to see people like I'm very much a remote worker but I love the the hallway track that happens at events and and I'm very much looking forward to this one I'm sick of watching YouTube playlists and and people calling that conferences you know what I mean yeah absolutely I I do want to put on a very different online conference someday T3 comp will happen some point next year and y'all should be hyped for that but I absolutely agree in person is incredibly hard to beat and yeah I am super hyped for the event I will do my best to be there in person and I hope some of you our budget will show up as well definitely let us know if you're going to be there and we'll do our best to meet you yeah super super pumped um and somebody asked if the online event is free yeah if you attend online the the tickets are free great stuff I just dropped you one more shout out in chat so if anybody here for some reason isn't following Jason on Twitch already please do he's the pioneer of these more technical conversations on the platform he was streaming for years before the software and gave Game Dev category even existed so please make sure you give them a follow if you haven't already one of the best channels on this very damn site for learning all about all the cool things happening in a lot of ways it's like a slower version of like fireships 100 second videos but he brings on the creator of the thing to talk about it too so you get to like hear from the brain that made these new technologies what's great about it and how they recommend using it so absolutely worth watching if you haven't already fantastic show thank you very much of course and thanks everybody for hanging out today this was super fun yeah this was quite the crew you went for almost three hours with us I appreciate it a ton man thank you so much I I can you tell I'm starved for human attention I can you tell I am that's why this works it works great because we don't we've annoyed our co-workers so much that we have to annoy hundreds of people online instead yes absolutely my partner's in the next office over and she just sees me coming around the corner she's like just go you can go away close the door so relatable oh my God that's God bless Twitter spaces for giving me another place to do that because I just need to like dump my brain sometimes and y'all are incredible for that so I appreciate every single person here and all the ones who are watching in Nevada in the future thank you all again I'm gonna BRB for a little bit to wrap up things on my side I'll be live ranting about whatever else I have on my list in 10 or so minutes so don't leave just yet we'll be right back thank you again Jason so much any last words before I switch to the BRB nah thanks for hanging out we'll see you online everybody of course go in BRB for a little bit




## What is Theo's Worst Take_ - 20241216
and what is my worst take you said all of your takes were good and so maybe that's your worst take I remember you saying something evil about go there were so many of them uh that story book is useless why is it not useless uh because you you need to fill up your known module somehow you got me on that one




## What nobody tells you about captchas - 20250529
if you thought my journey with databases was chaotic you're not ready because the hell I've gone through with captions for T3 Chat has been absurd when I first started T3 Chat we didn't have much in terms of restrictions because we also didn't offer too much in terms of things you would want to exploit we only offered GPT40 Mini and Deepseek V3 when we first launched those models are really cheap so I didn't think people would try to abuse it and then someone submitted 300,000 requests in the course of 30 minutes if you're popular put cashes on your things seriously I I was terrified when this happened and the recommendation I got initially seemed really good try out Cloudflare Turnstyle it's free to use and you can throw it in your app use it to make a token add it to the request and you're good to go smooth sailing it was weird though we ended up moving from Turnstyle over to Recapture V3 because we had a lot of issues that we will be discussing recapture solved most of the problems as annoying as it was to integrate but it still had rough edges and the more I looked into them and the more I experimented and tried other things the more I heard people mention H capture as the only reasonable option so I ended up going from turnstyle to recapture V3 H capture and the experience I had with each of these was wildly different i'm excited to dive into this with you guys not just because I think it's useful info for people building captions and rate limiting into their services but because it might help you understand how these things work the technical details of identifying unique users and how to think about preventing abuse in your services and systems or maybe if you're just a user of the web why it's so annoying to beat some of these stupid captures i'm excited to dive in but someone has to cover the bill because these services are not cheap so quick word from today's sponsor and then we'll dive into the hell I have been through there's a lot of great AI app builders nowadays but most of them are really focused on React what if there was one that wasn't what if there was one that was so deeply embedded in the open source community that it understood every stack obviously including React but also Spelt Astro and even mobile apps with React Native well you would need a company that deeply understands what all of these frameworks need you know a company that might have built an editor in the browser before yes we're talking about Stack Blitz and their incredible AI app builder Bolt this was the first one of these app builders to really blow me away i still remember when Eric stopped by my apartment to show me we just sat in my kitchen he opened it up and was like "What do you think?" I didn't know what to think until I tried it and now it's my go-to AI app builder especially if I'm using a different stack you can build something with Shaden and X.JS if you want or you can hop into other different tech that might make more sense for what you're doing i'm still partial to Astro for things like blogs and they had a great template that I was able to quickly change from a basic blog to space cats assemble cosmic Cats is weirdly stunning and it was able to do all the CSS all the additional changes all the chaos to get this right and best part it handles responsiveness too we can zoom in like we would be on mobile and it looks great it's not easy to get that all working unlike a lot of the other AI app editors they have a good full code editor built in because it's stack blitz so of course they do this is a full VS Codey Monaco editor experience like one that you could actually work in every day and even better you can highlight an area you can ask what it does or you can ask it to change it it's super easy to go through line by line grab a section and tell a bolt to do something different like you would in an editor like cursor but this is for getting a real project started and if it was stuck in here forever that would suck but thankfully these guys know better not only is there an export button where you could download the code or throw it in stack blitz they also have integrations for connecting to both Stripe and Superbase and most importantly a deploy button so you can take this app and automatically deploy it out to Netlefi so you can show it to somebody else something I should have mentioned before I just did all of this on the free tier so if you haven't given it a shot today why not check them out today at soyv.link/bolt so let's start with turnstyle specifically what was wrong with turnstyle there's a couple different categories I want to focus on for each of these integrations first is setup how hard is it to get set up second is pricing how much money do I have to spend and the third is reliability primarily false positives how often will this flag our users and arguably one of the more important ones user sentiment how does it make people feel does it block them in ways that are really annoying does it block certain users that it shouldn't how do people feel about it is it private enough is it storing data that it shouldn't vibe check generally I started on Turnstyle because a good friend recommended it to me funny enough the person who created the browser I've been using for my dev work recently Helium don't look it up yet it's really hard to get a hold of more info on Helium coming soon the setup was fine for for a Cloudflare product it was better than expected but I found it kind of annoying to integrate in React there is an official React Turnstyle library but I had a lot of expectations it seemed like it really wanted you to use like their component and include it in things like forms that you would want to submit it could autogenerate tokens for you which was particularly important because that's the behavior I wanted i wanted to have a token that was ready to go whenever I needed it so that when a user submitted a message I could attach the token to the submit to verify if they were a real user or not setting this up was annoying for a very dumb reason when I was setting it up during dev TurnStyle was doing an annoying thing to test if your browser is real the goal of a capture isn't to actually verify if you're human it's make it expensive if you're not human it's relatively easy to just curl a website and get its HTML and then hit random endpoints through your terminal it's a lot harder to simulate a browser and it's much more expensive to add the tests that we're all familiar with with captions things like the little set of pictures you have to click the one that doesn't fit or rotate to make everything align ai is not that good at these things it can do them it just costs money and real like GPU power to do so the goal of a capture isn't to make it so robots cannot do the thing that the humans do it's to make it expensive enough that it's not worthwhile for the robots to get access to those things one of the ways Turnstyle did this was checking for a thing that is relatively hard to simulate it used browser debugging okay that's really annoying i wanted to actually see it if you ever use the debugger in your code you know when you open up the console what it does it pulls you to the specific line in the specific file whenever that code runs this made deving against turnstyle super annoying because when I had my console open and I sent a message it would immediately pull me into the source file in the like files tab inside of my dev tools it was so obnoxious and since a lot of my users are devs a lot of them would have the console open to check like the network resources and play with things and whenever they did it made the app obnoxious because it would halt whenever it hit that debug step in order to pull up a specific thing in the code very annoying just stupid thing to have to deal with in your dev experience okay here is when I added turn style profile component so how long ago was this this is January 11th this is almost 5 months ago that's crazy it's been so long the backend side was really easy to implement you just take the token off the input you throw it over at challenges.cloudflare.com and you get a result problem was on the other side here we had the turn protection component uses user info early escapes if you're signed in originally we had signed out users as the only ones that were turned we ended up moving to all free users signed in or out to prevent abuse and then we would render the turnstyle component that would on success set the token to be this token that it would generate and we use the next public turnst style key to do it this all seemed really nice and simple to implement even if the documentation didn't help a whole lot there the problem I ended up running into was the difference between invisible captures and not invisible ones in this demo I showed before we have the verifying success thing here i did not want that in the UI we didn't even have a place in the UI that it would make sense to put so I was trying to do what was called an invisible capture a capture that relies primarily on device characteristics and behaviors in the browser to determine the likelihood somebody is human invisible captions turn out to not be super reliable so when I set it to be invisible which by the way you cannot do in code you can only do that in the dashboard and you can only have one mode set for a given turn style key i think they might have improved this since but at the time it was really really egregious it was bad enough that we were getting non-stop reports i thought I'd uploaded something wrong so I looked through everything combed every line and the official recommendation effectively came down to you need to have the checkbox rendering in challenge mode if you want users to pass more often i couldn't find a way to do a hybrid mode where it was invisible by default but would prompt you if you didn't pass the check because they don't check if you pass or not on client the client has no idea if it passed or not it would be way too easy to game it the client just does a test generates something and sends it to the server the server decides if you passed or not so I'd have to build a whole separate pipe where we try and verify the token if we fail to verify it you get a popup that is the visual version you then verify that and if you succeed I write it to local storage for some amount of time and then we use that for future stuff i was writing so much code to try and get this all to work and the more I looked into it the more hell I was dealing with the more I would see other people complaining about the same thing tim here is a good friend he works at SocialBlade and when they had the invisible mode on for social blade over 30% of their requests sometimes as high as 50% were failing the turn style checks that's crazy when this is over to the challenge mode where it actually shows the user a challenge their error rates plummeted like down to less than 10% more often than not obviously they're getting scraped a lot so they're going to see spikes here and there but that is a hilarious gap but it's a hilarious gap that then makes the user experience worse and if you don't want it to make the average user experience worse I hope you're ready to write a hell of a lot of code and pay a fee in order to have more than one turn style option in your codebase and have two weird split paths that are not fun to maintain i went down this path real far and if I'm honest the reason I did it is cuz Cloudflare's pricing on turnstyle is incredible it costs $0 if you want more than two turnstyle keys in your CloudFare account you have to pay for the enterprise accounts but if you're just setting this up quickly on a one-off site it's free it's not cheap free that's why it was recommended to me because it was an open source developer building an app that needed this that couldn't afford to pay a ton of money for H capture or recapture worked well for them to an extent worked very poorly for us i was not happy i still very much see a future for Turnstyle it could absolutely get really good but right now it is not in the state that I was happy with and then something important happened we moved to Recapture V3 but the reason why is a little more complex than just being unhappy because Recapture V3 is not super cheap recapture V3 is free for up to 10,000 assessments per month but after that you have to pay a dollar per thousand that's not cheap it's not super expensive but it's not cheap either that's a lot of money to spend to check tokens just to see if a user is real or not as such was not excited to pay this fee especially because we started running these on every single user check i the amount of messages that go through T3 chat this would have been like tens of thousands of dollars but there were a couple things that were important the first was that we decided to only do this on unpaid users point two is that we decided we could verify a user instead of a message so I could verify that you are a human and know that for a certain amount of time with a token that would work for a bit and then expire and three probably the most important point we had a shitload of Google credit gcp is a very generous platform as a startup and they gave us a lot of money of credit as a Y Combinator company and when I realized that would apply for recapture I decided we should give it a shot because even if it is too expensive we can do this second point and move over our verification to be per user instead of per message and reduce the cost a ton but at the very least we could fix this problem that we're bleeding users on so I go to implement Recapture V3 knowing that we have a ton of credit for it and I immediately start running into problems recapture V3 is the most poorly documented piece of I've experienced in decades i'm not exaggerating it was hell to this day I cannot find a single page on the internet that I can recommend to anyone trying to implement Recapture V3 i ended up with a gist that worked relatively well that I wrote myself that I then sent to a bunch of my portfolio companies because it was so bad i just I didn't trust the implementation and when I told a company that it needed it I didn't trust them to go figure it out and implement it right it was so bad it was horrifyingly difficult to get recapture v3 working especially because once I did it was actually really simple code the V3 code was much nicer to work with than turnstyle in a lot of ways once you understood the utter chaos of how it was architected and you realized you had to ignore basically every single piece of documentation on it then it became nice to work with it had the best ergonomics in a lot of ways it also had a much much much more reliable invisible mode but it was also less privacy friendly because it's doing a ton of fingerprinting on who you are in order to make it as reliable as it was it also meant it wasn't great in browsers that were trying really hard to protect your privacy when you have Recapture V3 in invisible mode and you're using a browser like Brave its reliability goes down a lot because Recapture doesn't give you a yes or no it gives you a scale a score of zero to one so if I take the token you gave me trying to generate a message and I hand it to Recapture V3 it gives me back a score 0.8 is what they say is high enough to be human 0.7 is what everyone else does we went with 0.5 we went that low because we saw a lot of users failing and here are some fun numbers 550,000 protected requests over the last 30 days as I said this ain't cheap and that's also with the beta which gets as much traffic as the main site not using recapture for over a week of that we're still seeing numbers that are absurd so here is what the scores look like based on a given definition of risk so we can see here that at 0.5 we had about 10,000 to 11,000 risky users that would fail versus 116k or so would pass i can move this up or down and you can see how it affects the numbers we go up to 0.7 we end up with 22K almost are risky and 100K are safe and if we go up to 0.8 which is what most people recommend we end up with about a third of our requests if not more failing that's horrifying that that many of our users were getting risky scores consistently really really not good this sucks and I would encounter it too i can't tell you how many times I would talk about T3 at an event somebody would pull out their phone to try it out quick and immediately hit a capture fail on Safari on their iPhone absurdity horrifyingly bad and I was so tired of this a big part of why we had these failures was again the invisible nature of the capta the fact that it was hidden in the UI if we could have presented a challenge conditionally to the user this would have been mitigatable if there was an option in recapture that was effectively run invisible unless you are low confidence in the user then put a capture challenge in their face and have them pass it then send the token over to me that would have been really nice but Google does not offer such a thing i would again have to have reimplemented all of this myself i would have had to build a system that verifies the token if it doesn't get a high enough score kicks the user into a modal state that gives them a real challenge with a separate API key in a separate mode they would then run the challenge go hit this endpoint get back a token or a fail and if they get back the token then they can chat for the next 24 hours and I cannot tell you how many times I thought about sitting down and building all of this building the infra that Google should have started with in the first place i was like this close i talked to some other friends running other startups about all of this enough of them said you should try H capture that I said "Fuck it it can't be that much worse to implement." So I gave it a shot h captious pricing is basically the exact same it's a dollar per thousand valuations the difference being you have to pay them a hundred bucks a month to even get started with the like professional tier which we obviously need the thing I was excited about was this guy the 99.9% passive mode what does that mean it means that by default for the vast majority of users when you select that mode it is invisible for them and it will only give them a capture challenge if it has reason to believe that user isn't real or not it's much less granular on the API side it just gives you the pass or fail when you hit them but it prevents the user from submitting the token or even generating in the first place until it has a relatively high confidence that they are passing it so it kind of built that in between step for me where it could check if the capture had been passed before making the user my problem as such the number of failures we've gotten on the server side where I check the token and get a fail I think it's happened four times total since we implemented this change because the user doesn't even get to the step where they're submitting the token to us because the H capture JavaScript in the browser will check everything for them until the token gets generated and sent and it does present challenges to users automatically if they fail the invisible check none of that has to be my problem anymore it was actually really nice as an absolute for metrics I had to put a lot of time in to try and visualize the success and failure of this so here I have at any given moment the percentage of success and failure across H capture in the T3 Chat beta and recapture in the T3 Chat production website and here you can see it's actually been a lot better the last 24 hours previously we'd see rates coughed and get significantly worse on recapture but you'll also see on H capture there's basically nothing like comically so right now the comparison is about 5% of recapture attempts are failed less than4% around.32% in the last 24 hours of H capture attempts were failed and if we look at the sheer number of failures over the last 24 hours there has not been a single time where an H capture challenge failed on our server in the last 24 hours which means all of the failures had to happen on client side for different reasons like they opened the challenge because they weren't verified correctly and the user just clicked the X button and left that counts as a failure on each capture once a user gives up on the challenge and leaves it counts as a failure and despite that the failure rate is still less than a tenth of the failure rate for recapture if we weren't counting those and we only counted submission failures which is what I did originally the numbers were even more absurd this was also during like normal traffic hours for us recapture was seeing a fail rate of 8 to 9% h capture was 0.1 0.1% but H capture challenges suck nobody wants to do those they're really annoying well thankfully almost no one has had to in the last 24 hours the H capture challenge has been opened on T3 Chat 16 times 16 times that is it the number of users who have ever seen one of these challenges is like 20 most users will never have to see one and if they do it's probably because they're on Brave that is a massive massive improvement for us a lot of people were skeptical about these numbers because the beta has way fewer users than the production app and I understand there are two things to consider here i'm doing percentages here not hard numbers the percentage gap is absurd the other thing to consider is the fact that a ton of our users and specifically our most powerful power users have moved over to the beta roughly a third of our users have moved over fully and those third of users make up a significant portion of our traffic the beta has become very representative of our user base and the percentage gap is still massive on top of that I monitor the reports of these things closely and I haven't gotten a single report of a capture issue on the T3 chat beta since we made this move and we were getting reports dozens of times a day before so is it a smaller number than the production app sure some amount that's not what I care about though what I care about is the vibe that people are getting blocked by it and the amount of replies I get the amount of complaints I get the percentage of the traffic hitting this and in every single metric I give a single about H capture has been significantly better for us and if it turns out I was wrong about this once we make this live for everybody I will be sure to issue a correction i'll probably make a whole dedicated video about it depending on how this one does so yeah this isn't just doing better cuz it's on beta i know that because recapture was failing even worse in beta for us originally so yeah this is a representative sample and it is a very very very good sample while I'm here I can't not offer a coupon code so if you want to try out T3 Chat the pro tier which has no captures by the way and 1,500 messages a month on every single model you'd ever want to use like literally all of them just look at this list it's kind of crazy yeah including all the new Claude models by the way go check it out then if you haven't signed up yet you can get it for a month for just a dollar if you use the code capture suck at checkout it's on the screen right now and you've never signed up before only $1 to get started for your first month kind of hard deal to beat to get so many messages across all the best models you should give it a try anyways so what's wrong with H capture the integration must suck right like that there has to be something wrong how is it so much better and everyone isn't using it great question let's go look at the implementation details we first check if window.hcapture H capture exists window.hcapture will exist as long as the JS has loaded if not I wait for up to 5 seconds for it to load and if it's never there then you have some weird going on in your browser preventing it that's not my problem anymore you fail and yes we are logging this as a failure we're not even logging this as a fail for recapture so there's a bunch of fail cases that I track on H capture that we didn't with recapture and it still scores worse so once we have the H capture binding I create a container i just throw it absolute hidden outside of the window append it because it needs to go somewhere again this is what I mean when I say there's no good package for this like why the do I have to do all that all of them have this problem to an extent but annoying and then we render the invisible widget create the widget ID uses the public h capture key size is invisible i don't even know if that's necessary or not but I think it is the call back resolves the token then calls the cleanup function and then I added all of us hitting these fail cases and then execute that's it if during this execution it's unable to get enough data to confidently verify you it pops up the challenge on the top of the UI without me having to do anything for it it just goes it's so nice i was very impressed with how easy it was to get this implemented even if you to do a lot of weird stuff around mounting things to the body and removing them and all the chaos that is using a JS tag inside of a modern React application but all of them have this problem theirs was the least annoying to implement around and most importantly it had that one behavior I really really wanted which is to promote an invisible capture up to a challenge on the cases where the invisible failed real quick jank chart where all of these stand across ease of integration invisible mode reliability cost documentation and I one more important one the ability to promote out of invisible promote from invisible that's what I'll call it i don't want to steal H capture terminology but it's a specific thing I was looking for that almost nothing supported so if we go through these ease of integration turn style I'll give it like a six recapture I'm giving it like a three h capture I'll give it like a seven none of them were great honestly I would bump both of these down i'm going to bump that to a five i'm going to bump this to a six like there's a lot that could have been done none of them were great but at least H capture didn't make me want to die as much as the rest invisible mode reliability turn style I'm giving a zero here it just wasn't there it's supposedly gotten significantly better since but I've not had the interest in testing it because the risk is too high for us recapture I'll give it like a four this is the like hot take that I didn't expect h capture's reliability on the invisible is really good it almost always for almost all users passes the invisibility check there which is nice that you don't even need to show a user H capture in order to verify them as most likely being human there's cost this is where Cloudflare wins by far the only catch is that if you need more than like two turn style deployments you have to move to enterprise which sucks whereas with Recapture eh it's not as bad as I expected but it's it's expensive you know I'll give it a four because it's it doesn't cost us too too much money and the Google cloud credits are nice age capture I have to score a little lower both because you don't have the cloud credits and that like expensive fee to start using it for real it's cool that the free tier can work for small hobby projects but once you hit that cap of like what was it 100K might even be less than the free tier might have been 10K regardless once you hit that cap if you're not paying you're screwed so you basically have to pay up front or you might have your app go down documentation i kind of want to just go and give all of these zeros across the board gonna give turn style a four i'm gonna give recapture a two at best no that's a one it's so bad it's so bad in H capture I'm going to give it a seven i wish I could give more but it was like it was so hard for me to find details on how the 99.9% mode worked there was just no documentation whatsoever it turns out it does exactly what I wanted it to by default but I couldn't verify that that's another section I actually want to put in i'm going to move this one down because testability in dev this ended up being such a headache it was so hard to figure out if these solutions worked turnstyle as quirky and annoying as it was wasn't too bad here it just sucked to have the dev console stolen from you constantly recapture did not function for this at all it was awful h capture somewhere between the two i'll give it a four leaning towards positive the thing that H capture does that's really nice is you don't have to tell it which URLs are supported like you do with all the others which means it actually worked really well for things like preview environments the move to H capture fixed our Versell preview so we could actually use them for testing which is a really nice benefit and then there is the support for promote to invisible 0 10 this is the thing I was looking for the whole time i thought I had to build myself because again H cach's docs on this are garbage they do not do a good job of communicating that they have this feature how it works and what it does but once you set it up right it works exactly how it's supposed to and it has been a huge quality of improvement both in our error rates and in our user satisfaction i legitimately expect our conversion to go up significantly upon rolling out H capture in the production deployment because it is so much better i personally have not seen a challenge on any of my devices on any of my browsers and I was trying my hardest i was using sketchyVPNs i had Brave set up with all of the weird privacy extensions and I still couldn't get it to turn into challenge mode it just worked it's so much better in experience so if you take anything from this video it should be that I'm now a H capture shell the documentation for all these things suck but man if you care about your experience for your users more than you care about a dollar per thousand requests you should use H capture recapture was close but the combination of the invisibility failures and the  docs makes it a hard recommendation and turn style I cannot recommend until they have both the promote from invisible stuff built in and they fix the reliability issues on the invisible mode i will emphasize once again I have not tested this since January when we moved off so it may have improved since but I do not care enough to check at this point because moving back and risking the reliability of the service is not worth the$1 to $2,000 a month we could potentially save one last fun thing as I was looking up H Capture pricing I scrolled a bit and found an old channel sponsor H Capture Solver from Bright Data they are not sponsoring this video they have nothing to do with this i just found it amusing that H capture's solver exists to automatically solve H captures for you what I found funny about it was the price it's $1.50 for the first thousand times you use them to scrape past an H capture but if you are in the premium tier it's only $15 remember that it's a dollar per thousand request verifications on each capture i just thought it was funny that it costs me a dollar to block the traffic and it costs harmful parties a$15 to work around the block so they pay 5 cents on the dollar more than me they pay 5% more to get around the capture so now it's just a costbenefit analysis thing of is the data worth more to you than to me by 5 cents it's probably not worth it in our case because all you get if you escape that is the ability to use Gemini 20 flash for free and a thousand requests on 20 flash costs a similar amount there anyways so yeah for us it makes sense but you should be cognizant of cost targets and how much value is behind the things that users are requesting because if your data is worth more than a$15 per thousand requests you need a more significant solution and one last shout out because I really wanted to use this is just not quite ready for us yet radar by work OS seems very close to what we want i actually really like the idea of fraud prevention being at a user account level it would make a lot of things easier it doesn't solve our signed out experience problems at all but it would have made it much easier for signed in users to be tagged based on different behaviors and characteristics to figure out if they're a bot or not works has been putting a ton of work into this product i'm really excited to adopt it in the future once we start moving things over and get out of our chaotic off setup that I should not have rolled myself there are other options i am excited the more I see them all of that said I am very happy with H Capture it's the perfect fit for what we need and there's a good chance it'll fit well for you i cannot recommend these right now and if you need something more serious than H Capture I would recommend looking into stuff like Radar think I've covered everything I have to say about all this it has been a chaotic journey i've spent way too much time thinking about captions and now I spend way too much time complaining about them i hope this is useful to somebody because what a journey it has been let me know what you guys think and until next time hope you can pass this challenge




## When The Component Hits Just Right - 20231229
if I click this we get this really fancy nice slow popup of the toast open multiple oh okay I see why you said to do that do you see how good that looks oh oh oh God yeah that's really good I'm sorry I did not expect that to be that good but again that this is the benefit of Shad UI and the whole Shad CM package is all of these things are done well Tastefully and correctly




## Why Am I Moving Off Edge_ - 20231124
versel was initially pushing Edge really hard because it sounds great to have your app render closer to your users when they send a request they get a response much faster theoretically but this came with a lot of problems the first I want to talk about is Edge runtime itself I have talked about the edge runtime a bit before and I have been a huge proponent of it because it's so much faster than node it still is if you can run on edge run time and it's not a big issue you almost certainly should because node comes with a lot of native dependencies a lot of bulk it is inherently going to be slower doesn't really matter where you run it Edge run time is also much cheaper the amount of money it costs per request is basically nothing often as low as 60 cents per million requests that's insane that's really really low numbers for serverless Endless compute that you don't have to worry about scaling up or down at any point but it is a different runtime and with that comes inherent complexity I really like how Lee called it out here there's feedback that he strongly agrees with regarding Edge and all the controversy around it which is that something they previously believed strongly in Edge rendering didn't work out as expected that doesn't mean it's always bad it can be done well it just didn't happen often in practice because the DX of two run times is painful and I absolutely agree having to make sure our code works properly in the Lambda node endpoints as well as in the traditional like Edge cloudflare endpoints that use cloud Flare's worker protocols and run times has been really painful in the result is that we do a lot of weird stuff to make sure our dependencies work in both environments and often they work in one but not the other and then we end up in dependency hell and I've been dealing with this a lot and as I've mentioned in other videos you can check out my partial pre-rendering video or my reason why I'm off serverless video I talk a lot about that time to First Bite how long does it take for a user to see something and after that how long does it take for them to get the correct content and with Edge I can get them something faster because there's no cold start and the computer's closer to them but the rest of the content would often come slower because the data has to go a longer distance I actually have a diagram here that I made for my serverless video a couple months ago probably like seven or eight probably God it's probably longer than that like 9 or 10 at this point but I made a video about why we were moving towards Edge and off of Lambda and the problem I was describing this is the world the user is one place Us West 2 is somewhere else I have my server and I have my database if I move the server closer to the user the amount of distance that has to be traveled on the internet actually goes up because my server makes multiple requests to the database the first is to authenticate the user to confirm they're authorized to do whatever they're doing the second one is whatever the server is actually getting data for like seeing is this user an admin or not and now we know they're signed in we know they're an admin now we actually have to get the data that they want now we've done these three round trips across this long distance and you can't beat out the speed of light you just can't do it so if you move the server closer to the user they might be able to get something back earlier but the correct response coming out at the end here that's going to inherently take longer we can still get a lot of the benefits of the edge runtime even if we lock it to be in West 2 where we get the faster cold starts but we still have to deal with this distance being traveled and we still have to deal with some compute spinning up in order to process a response what if I want the first response to come from here and I'm okay with the next response coming from here what this would look like we'll just call this what it is a CDN so now we're going to take this arrow move it here the user will almost immediately get a response from the CDN but at the same time we'll go to the server which will fill in the rest of the content after to be more fair I'll make this a dotted line This is the partial response we get immediately when we use something like partial pre-rendering at the same time that CDN layer which is probably just some Edge compute kicks off to your Lambda your server whatever and says hey I need the rest of this Pages content and technically what's happening is it's streaming it back here and then the rest of the response comes in later this is like the full response it gets after coming from this second Arrow but for the sake of conceptualizing this it's easier to just know this goes to the user and once you have these types of patterns where you have a CDN serving what it can as quickly as possible and you have a server serving everything else when you need to that's great this is a really good compromise that gets you most of the best of all Worlds the catch is that this part is still going to take a bit longer because you have to wait for the server to get hit cold start to happen all of these back and forths to occur and then you can send the response to the user but we've just shortcut almost all of the shortcomings that are going to be the rest of this video but I've already talked about partial pre-rendering you should go check out my video on it if you haven't already seen it what I want to talk about today is the Alternatives because a lot of people are pushing a lot of other Solutions here Kent is a fan of moving your database to the edge this is distributed databases so instead of your data living in one place that has all of the most upto-date information and caching it near the edge this is the idea of taking actual database and replicating it many places in the world so you can fetch it from the place closest to you anyone who has tried this knows how painful it can be everything from transactional security to latency to just making sure the region you're heading is actually performant enough to deal with the traffic is really painful especially if you have a single centralized node where rights occur you end up having to hit one node anyways and doing a lot of work to diff whether or not this is a query that can hit a cache versus a mutation that needs to hit the native like main database you end up with a lot of problems and it's cool as as it is seeing companies like turo working to solve it in Cloud flare to some extent with what they're doing with D1 these are both SQL light based Forks that are trying to reinvent how we're storing our data Planet scales much simpler they're a boring read replica they just make readon copies of your datab base in other places but Planet scale themselves has seen the same change happening and is no longer focused on building out that type of regional support because the demand for it is really low and the likelihood you'll find success with it is even lower if we want to go back to the original state which I'll yink here what's happening here instead of just west 2 we would also have clusters like this all over the place we'll call this EU West one just make up some random name so now we have us East one US West 2 and EU West one all different regions all with their own separate databases so now hopefully when I make my request this would be smart enough to hit the server that's as close as possible to the database and we get this back this is the Hope and this is a good hope if this works out the way it's supposed to this is pretty cool the harsh reality is this is not what this ends up looking like this is what I end up seeing in production most of the time you've replicated your database in a handful of key locations you're still Edge routing so this will be any of the hundreds if not thousands of locations Cloud flare operates out of you have no guarantee that this and this are close unless you're using D1 and it's doing a good enough job of replicating close enough which means if it hasn't replicated or the data in this database is stale and you actually have to grab data from this database or any of the other nearly infinite number of things that can go wrong with a setup like this you're often still running into the problem of there being more distance between your server that is processing the request in the database that is the data that request needs being distant from each other and now you have a whole separate replication problem of making sure the data makes it between all of these different databases and yes a good proprietor should theoretically solve this for us and make sure all of this data is getting interwoven and distributed properly between all of these what most usually do is they make that final request if this this is let's say most of these are reads but this one's a right this right will go over here instead and here is where we start to see the problem this is not a good experience and having to worry about your databases all staying in sync or honestly the way this will work in most places is more like this where that second request needs to go confirm with Daddy server that yes I am safe to do this change and then it sends the update to the server saying yep cool here's the current state of things and now finally this can get sent to the user that's not great the amount of distance that has to be traveled here is absurd and the reason for that the reason we even care enough to put this here is to get the user some response as quickly as possible theoretically in a magic world where all of your databases are perfectly replicated next to your Edge servers everywhere yes this problem goes away if this is magically just here and it's a perfect replicated set that will magically handle all of the different cases around transactional guarantees somebody writing something different from somebody body else on different servers at the same time if you've magically handled all of those things absolutely don't worry about where you're deploying just Deploy on edge and know your dat is closer that's what Kent is saying is happening here I just don't see it yet I think we are a far far ways away from this future and again I would love to be wrong but what you're ending up doing when you use Solutions like this is you're limiting how many regions that code can run in which means you're limiting time to First Bite as I showed in the other diagram that first bite the first thing you see should ideally come from something hilariously close this CDN response should be as close to the user as possible and require almost no compute to generate and get to the user from there things are more complex but it's still a relatively short full distance traveled even if I go back to like the way this was in uh the other example I just move this further away total distance traveled here is comically less than any Edge distributed data with transactions managed it's a really really hard cell to just start Distributing your data automatically nothing nothing's done this well enough to be an easy production recommendation for me please feel free to correct me if I'm wrong in the chat if there are companies you know of that are doing millions of row reads and writs per second with Edge distributed data with no issues cuz I just I don't know of them it's a very very new pattern if you want to talk about bleeding edge stuff it's data replication at the edge this is as bleeding edge as it gets and I don't know if anyone doing this in production versus a CDN response that's what we're all doing in production we're all using CDN for already and then proxying through the CDN a stream for the rest of the content that hits a server in a given Warehouse that is directly next to your database yeah this is going to continue being the standard forever and I hate that I feel like the rails guys right now just run a server but seriously just run a server the distribution shouldn't be because users are all over the globe you should be able to reasonably distribute your important pieces and cash things as you need to it's just it's Insanity to me to think we're going to solve this problem and get Edge viable by Reinventing SQL in order to get data databas is close enough to the users in terms of like the amount of risk and the amount of change here having a CDN that can also stream updates is a much smaller bet than solving databases globally replicated forever it just it's confusing to me something I want to clarify here is that I'm not saying don't run Edge there's a lot of good use cases for Edge compute if you can have it on a CDN you should cdns are going to require even less work less compute and get a response even faster if you can't have it on cdns but it doesn't require data it doesn't require multiple round trips to get that data then running something on edge makes a lot of sense a lot of the examples League ofes here are great things like redirects proxying setting up headers running middleware making sure the user's off if you can do those things without making a ton of round trips you should there are so many use cases for Edge that aren't just rendering your page like making sure users go to the right place in the first place let's say you have different servers in different regions for things like localization or like data privacy requirements you can use Edge as the place to choose which server you go go to verell themselves are using Edge to figure out if your response should be from the CDN if it should be from Lambda or both like their partial pre-rendering is them using Edge in a really powerful way and they did that because they saw the big benefits of edge which are we can get you a response way faster but they didn't want the cost of your server now has to communicate with a distributed database or with a database really far away it's chaos and they have chosen to ignore most of that they found a compromise that involved them using Edge to provide the best of both in almost all cases and to go back to the tweet this was originally applyed to point of this tweet is very simple versel gives us the pieces to do this however we want to why are we complaining this is why I'm so excited about what versel has done they gave us all of the pieces where we can run on Lambda we can run on edge we can pin Edge to a region we can put things in a CDN statically we have all of these different options and we can do what makes the most sense to us as like engineers and our understanding of it but also what's the best for our users and we have the necessary pieces to do it and versell built a default that is almost always the right solution they did a great job of looking at how we used all these things how I complained about these things and how they benefit the user experience and found a benefit where we use cdns for what they're good for we use Edge for routing the traffic and we use our boring all node lambdas to actually generate the pages because they're right next to our databases anyways I really like that we have this balance struck because as I mentioned in my quote tweet here two run times was an incredibly painful thing to deal with and I felt like I was in schinger JavaScript so that's my thoughts on the current controversy around Edge and Edge routing and whether or not we should be doing it I don't believe we have succeeded in moving data to the edge because of that I don't think we should move our compute there either at the very least not all of it it makes a lot of sense to run a lot of our compute nearo databases but the things that we should run near our users we probably should run near our users there's a balance to be struck here I think we're closer than ever to achieving it but I personally don't see a future where we magically replicate our databases across the world and expect a fork of SQL light to carry us there I could be wrong and would love to go back here a year or two from now and say I was wrong turo one D1 is great we should just use sqlite distributed for everything but I don't see that as particularly viable that's all I have to say about this if you want to hear my deeper thoughts on how we ended up here in the first place and why I made this move over to Edge I'll pin that video in the corner it's one of my best I highly recommend it if you haven't seen it but if you already have or you're just not interested there's a video below that YouTube seems to think you like instead appreciate you all a ton thank you guys as always peace narts




## Why Did Astro Make A Database_ - 20240316
Bad News Boys Astro costs money now what am I talking about well they have a database wait isn't Astro a framework things are going to get real interesting here we need to take a look at Astro DB the newest database competitor built on top of Firebase wait what there's a lot going on here Astro DB the database platform for content-driven websites Astro DB is a fully managed SQL database that is fast lightweight and ridiculously easy to use get started for free no credit card required cancel anytime not get rug pulled right right anyways we could scroll through here and learn a bunch about it and we'll probably come back and do that eventually why we do that when we could just get started you have the option to import from a GitHub repo create from template CLI or empty project and I'm realizing I don't know enough to do this confidently the way they recommend so we're going to go through their docs instead first it looks like we need an astro project so let's go initialize one that CU CLI where should we create the new project first I need to decide the name for it Fire based the sample files yes do I go strictest I go strictest let's be real install depths initialize he let's get going and we can see that locost 3000 is not the right port cuz it's 4321 because they want it to be cute and I'll give it to them it's cute and here is a basic boring empty Astro project we want to do things to this so let's do those things open a new side panel there go back to the docks you're missing a button here hey Ben Ben you built a product for early adopters where's the early early adopter option I'll put money on it I'll I'll bet I'm I was about to say I'm not a betting man but I am I'd put a grand down that Astro has a higher percentage of bun users than yarn users it is not by a little bit either like I am positive Astro just by being a newer thing with enthusiasts or has more bun users than yarn like for sure but yeah I'll change it myself cool we're scaffolding we're scaffolding what are you talking about it's absolutely built on fire base fake news don't believe they're obviously glabber wants everyone to believe that they're using torso CU he made turo it's very obviously Firebase like duh look at it it's based and they have fire in their logo just look at the astro logo see that that's fire you're going to tell me that a company that's logo has fire in it is using turo and not Firebase for their database come on I didn't know y'all were so gullible anyways let's actually try this out who have out of the database now I have to Define it so we have DB config happy they made that change I could do a long rant put the things that I didn't love with the version which lucky enough to get demo but they're making a lot of fixes here this actually looks really nice now we can Define tables so let's define a table Define table column find table a comment cool let's just yoink so now you have comment which is a table that has columns including author likes flagged published metadata cool now we need that to be in the table so I copy that paste it cool now I have a table with a comment which has all of these things table reference this is how you build references between things you can set an ID on a table and then link it using this pretty nice simple syntax SQL for typescript devs that don't want to learn SQL if the syntax looks a little familiar it's cuz it's very very much drizzle inspired they've effectively built a wrapper on top of drizzle ASB includes a built-in drizzle omm client there's no setup or manual configuration to use set client nice and easy first we have to actually put things in the database so let's do that so we hop in here seed one of the really cool things with asttr DB is that you can import the things that you've defined in your table like here these get added to the definition for asttr DB so you don't have to do all the work to make sure you have everything in the right places it's just going to be there so now I have comment it has everything we need if I want to se it I can just copy paste this code what is this m about update the scheme and have just author ID and uh body that sounds about right to me cool yeah this is out of date and I'll change that to body and we will delete the rest cool and hopefully oh text versus int yeah that's a good point that's uh thank you for the call out there I would have missed that for a minute so author ID is now a number body is now text there we go it automatically restart your database whenever this file changes regenerate your types and see the data from seed oh cool so just doing that new local database created and if I save this file again we it happen again if I add a third and uh we'll make the text here please subscribe Subs are free by the way cool and that did not seem to do anything different here so there a local Studio that I can run boys it's HMR it's just running well it'd be cool if it's said here reeding by the way so I know that the seed's been rerun regardless I want to actually play so let's hop into Source Pages index again the magic is you can import your models from Astro DB without having to import them from specific things if I compare this to a generic project that's using something like in this case straight up drizzle then any of the code that does insertions in here I have upload component no actually the backend one cool so if I go to my backend code here an upload thing which if you haven't used it best way to do file uploads in fullstack projects on upload complete await db. insert IM values this is coming from my server DB schema so I have this defined in my code base I have to import from this as well as importing the DB client as well as importing anything I need specifically from drizzle having this all be framework level so you have One Import for all of it is a really really nice little change that doesn't seem big but when you consider most projects have one database this makes a lot of sense I'm actually quite happy with this cool so now we have comments we're not using them let's use them there's a lot of cool junk here I don't want any of it cool and now if all worked correctly that's pretty cool without terminating by Dev environment a single time this has been open since I started recording this video I was able to set up a database get it running and then HMR my way to success that's really cool I've never seen a database setup from scratch that was anywhere near that simple but that's obviously not where the magic happens the magic happens once you have to deploy this so let's keep reading along and figure out what the next steps are obviously all the other things you'd expect from drizzle like inserting filtering all of drizzle fancy utilities like equal and greater than and all that are all included in as DB all from One Import still really handy you even do batch transactions where you push a bunch of queries together and then call a batch which calls all of those queries super super handy but we want to play with studio so let's do that there are two ways to create a project in Astro Studio first one is astrol link let's try that out funx Astro link bonex Astro DB login that was easy no I don't want to link it to project I want to make a new project new Project's name buyer based Us West op region nothing's changed here really there's an EnV DTS with some slight changes for that that's from before though and the Astro config has the DB call which was added before but you'll see there isn't really much that's changed here mostly just an external link so what do we do next well we have to push the database once again you are missing a button b x as DB push database scheme is out a date pushing push complete cool you guys aren't familiar with a DB push pattern something I've pushed for really heavily back from the planet scale days but still use every day now I think migrations are an outof ofd pattern because we have the history of our database schema it's our G history we don't need to encode that in two places we don't need to encode the changes in the schema and then how it changed in a migration and then run 100 migrations before we can actually work in the code base makes no sense at all DB push is hey there are things that are different about that schema in my schema I'm going to change them and if it's anything destructive I'm going to warn the out of you first much simpler pattern especially for getting started and doing things like this you you just post the changes and you're good I have a whole video about why I don't love migrations if you search Theo migrations on YouTube I'm sure that will come up quickly the breaking schem of change must be made add the force reset flag to reset all production data scary but I understand pushing data you may need to push data to your studio database for seating or data migrations you can author a TS file with the as DB module to write typees saave queries then execute the file against your studio database using asdb execute file path-- remote cool let's try this bunx now we see we have Fire based Astro all of the things we'd expect here including Tada quick ask from the Astro folks in chat this is embedded drizzle studio right or did you build your own yet another table for viewing your database they built their own with hand stack table according to everyone's favorite Ben Holmes very good to know appreciate the heads up people are upset about the light mode I know you guys are are trying to make money on this you know 10 bucks a month for dark mode is not a bad deal it's not t stack T goed this P by hand so this is what they're paying you for Maple this has been your role the whole time I get it let's just write this out so people can know for real the Astro DB stack Firebase Java and uh tan stack table that's the stack you guys use right pretty Fire based if I do say so myself oh kubernetes of course how how could I forget kubernetes I need a good Emoji for kubernetes uh perfect and also fire vase used to be a fire Emoji perfect flutter you guys are using flutter too that's dope what a stack proud of you guys because people have recently been struggling to understand when I'm joking at least the redditors have been I'll be very clear quickly Astro DB is built on top of Astro a customade table that Maple slaved over sequel light on top of turo and drizzle it's a pretty cool stack in fact there's even a blog post that is a deep dive on this whole stack yesterday we launched a fully managed SQL database service designed exclusively for the Astro web framework let's dive into the implementation details of Astro how it works why we built it and why we're adopting lib SQL okay important correction it's technically not sqlite it's lib SQL just a fork of sqlite that has been modernized and adds a bunch of really nice features cool stuff how we got here Astro is unique for its focus on building content-driven websites the center of this is of course content which is why as 2.0 we shipped content collections our users loved it as a way to manage their local content this is a really important thing that I think it's missed in the framework Wars content websites have kind of been left behind in the pursuit of apps especially the sing page app era where react took over everything Gatsby was a quick and rough attempt at making react work more for Content sites when I say content site what I'm referring to is things like documentation or blogs or places that have a lot of photos and photo galleries things that are less described by their interactivity and how regularly things change and more about the content itself that is the core of the page marketing sites are another great example too the new next model is great in the sense that you don't have to ship as much JavaScript if any at all in order to have content on a page and it scales much better to these large cont content type things but WordPress was the standard for a reason it made all of this really easy to do and Astro's goal here isn't to compete with nextjs or certainly not react on the client it's always been bring back the essence of what we loved WordPress for and make something really really nice for it oh I didn't even see they said WordPress here WordPress has always been a huge inspiration for us one of the things that makes WordPress so special is that it has a built-in database you're not just managing your article content you're managing data Pages blocks images and an entire ecosystem of plugins okay one of my favorite things from the WordPress days was prefixes what the hell is a prefix why would you want that on a database why would you throw this in front of all of your table names well and then you could store more than one project in a database which was actually really nice you just have different prefixes for different projects you could have a lot of different projects in just one database which is really really nice especially when certain services like remove their free tiers or only offer one database or you have One DB that's way over provisioned you can throw a bunch of things at it you'll see I have Gallery tutorial is the prefix which means I can share this post database with like a bunch of other projects and just have everything isolated with those prefixes really really nice someone in chat also pointed out very fairly that uh it also helps with multi sites because it adds the site ID in the prefix which is super super handy if you have one database hosting a bunch of I don't know WordPress sites Astro sites or any other content type stuff it's actually a really nice pattern to use one database for a bunch of things just one of the many examples of Wordpress isms that I feel have been too far left behind that I still love and use regularly enough tangents about WordPress and old patterns and database architecture we want to talk about Astro DB according to them they wanted something like this for Astro but they quickly realized that they'd reached the limit of how far static repo data could take them this bit about static repo data is important because previously Astro and its content patterns largely relied on what you included in the repo itself linking to an external source to generate content on the Fly wasn't something they' really built for the solution was that you would make every page Dynamic and then fetch it from somewhere else which made it not much better than other Frameworks but the point of Astra wasn't to be as good as other Frameworks it was to be way better than the Frameworks for Content specifically which is why they built what they did here finding and losing sqlite oh boy in an effort to evolve content collections with data Collections and references we realized that what we were doing was building a database like omm from the file system we ran into several challenges doing so core team member Erica brought up the idea why don't we just use a database like sqlite we fell in love with the idea of a lightweight database built into Astro itself sqlite was perfect for the read heavy workloads of most content driven websites this is another big Point content has thousands of reads per WR if not hundreds of thousands if not Millions you're fetching the content way more often than you're changing it in almost all these content site examples even something like YouTube there are way more reads than writes because when you scroll through the comments you has to read all of those comments and when you write a comment it's just making one change and for every user that goes to the video hundreds of things are read for the slight chance one person writes a change also shout out to Erica who is in chat congratulations and you had a really positive impact on drizzle and Astro and all of the things here just from the conversations I had with Fred before yeah this was a huge save and you prevented the Astro team from going down some really scary rabbit holes just by pushing for that so thank you Erica for preventing us from Reinventing the wheel of 100th freaking time we prototyped the idea but we ran into a few blockers SQL lights a CA Library so it needs native add-ons to run in node this is okay for local Dev but native add-ons are difficult to deploy to serverless hosts and the startup time was worrisome additionally key environments like stack blets would fail to run it entirely that's a really good point I love stack blets we use them heavily for our Repros such there are little quirks of running your whole thing in the browser that you have to think about when you're building your full stack tools if you want someone to be able to run the back end in the front end in the browser as they're demoing things testing things Etc once you've resolved all the chors issues you still have to worry about what you actually have access to like as Ryan carne just pointed out no async local storage yeah that sucks you can't just fully emulate node in the browser so you have to do a subset of what not's capable of defeated we put the idea on the back burner to focus on other things this was in Spring last year finding and falling in love with lib SQL at the same time halfway around the world and completely unknown to us another team was working on this exact problem that team was terso and their solution was lib SQL lib SQL is a fork of sqlite that introduced a collection of improvements to the runtime while maintaining compatibility with classic sqlite lib SQL featured a modern database client for JavaScript and typescript that avoided the native bindings and compilation steps that plagued the rest of the ecosystem could even run on stack Blitz via wasm terso also offered hosting for lib SQL databases with AIC specific focus on the kind of scale that we needed more on this in a bit a vision was starting to come together for astb but it wasn't until December 2023 that all of the pieces would finally snap into place designing a local database the Astro way astrab gives you a fully local lib SQL database as soon as you start up your Dev server with our background as a static site generator it was important that the database could be built from scratch on Startup so that in the future it could power a Content layer where the data is sourced from a variety of places including the file system this is also a very interesting piece a huge part of what Astro and things like it bring is the ability to Source data from lots of different places and make it look better I know one of the things I proposed Astro for is taking an old ugly WordPress site and treating it like an API and making it look really nice this is what Gatsby was largely promising originally with their content layer where you could just Source data from other databases from WordPress from random RSS feeds and try to pull that all into one place with one messy graphql API turns out that messy graphql API ended up being a bit of a death sentence but the idea of a single place that you group all of that data together for a single access layer that's stuck that was a great idea and it's really cool to see that idea being carried through with what Astro is doing here when you run Astro Dev astb will automatically create an empty database at asro data. DB read your schema from the config seed the database with the seed and now you're ready to go love it the workflow largely mirrors the content collections workflow that Astro users already love importantly the database itself data. TB is not persistent it's created new from scratch every time you start up the dev server this gives you a simple reproducible one-off database that's really nice this is another one of those interesting things they're doing different where in almost any other project the thought of my database getting nuked constantly is terrifying but what they're trying to encourage here is that you're not using this database for things like authentication and really complex data that you wouldn't want to have go away this is for staticky stuff that is used to generate web pages and by nuking it constantly they're teaching you to not treat your local database is this crazy source of Truth with all your data in it that needs to be perfectly replicated against prod they also don't teach you that to connect to the prod database or something like it to do Dev you just run it play with it do what you have to update your seat if you need more data remove things from your seat if you need less data and go that's cool asdb brings together the web framework the schema the seed file and the database itself all into a single cohesive story we've even included an orm for you drizzle we selected drizzle because it's typ safe and it lets you get as close to the metal as you want and it's also pluggable which allowed us to add our own behaviors on top going remote with a hosted DB this is how they make money but it's also a nice important change where you have a good simple way to link a project locally to a production database and all the pieces you need together working properly Ben made a correction already well we did build an app that integrates DB with Luchia off though we do believe the Dev Story should be throwaway production hosted yep sounds about right to me Astro DB includes a hosted Li SQL database that you can connect to during local Dev and in production everything is managed for you through the our Astro Studio platform you can create a new database for your project in around 30 seconds to achieve the kind of scale we knew we needed on our platform we partnered with torso who maintains lib SQL and operates the largest Li SQL hosting platform you guys know you could have used Firebase but if you want to try out this new torso Thing feel free their commitment to a database per tenant model was a perfect fit for our need to spin up hundreds of thousands of databases all on demand we also spent some time last year prototyping Cloud flar D1 product we like a vision of the project but struggled with the added abstraction layers of workers and worker bindings when all we needed was the database we were also hesitant to build on a proprietary database technology D1 especially if it meant building that Tech into Astro itself ultimately we found that D1 wasn't a good fit for our use case I'll be honest I haven't seen many things that D1 is a great fit for at this point in time it's exciting and their prices are really promising but I haven't seen anyone ship like really significant things on D1 yet excited to see if that changes zero downtime schema migrations this is the DB push thing I said out earlier your databases schema is defined in the project DBC leaning on push from dzel inut let's take a look what you have to say the push commands were designed to balance ease of use while still encouraging best practices that work on production large scale projects in Astro DV there are no migration files to manage instead when you run the push command your schema is automatically compared against your hosted production database and any new changes are applied if those changes can't be added safely or risk any data loss in any way the changes will not be applied this encourages the expand and contract migration strategy in astb applications of course we're doing rapid development and don't mind resetting your database is needed you can run astr db-- Force reset to push up any schem of changes you'd like including a database reset we went through a few different iterations of our schem of migration system before landing on this final version at one time we even had a migration folder where you would manually create and check explicit migration plans into your repo while Some people prefer this model we found it as an annoying extra step for most users to remember to go and create migrations anytime they change their schema yep migrations are obnoxious and make very little sense for very many projects if you have a git history that includes the same data and you're willing to do expand and contract migrations I love that they linked directly to Planet scale for this because they've been some of the largest Advocates of this model you'd think the people who are keeping my SQL alive would care a lot about migrations and they do but not the old way they're pushing this new way and yeah this article is great I'm pretty sure I referenced this deeply in my why I don't do migrations video definitely recommend checking it out if you haven't yet they describe in detail the way to think about this the big thing is backwards compatibility so if I have a field that I want to rename let's say I can't just push up a new field and make it mandatory what I would do is I'd push up a new field make it optional I'd make the old field optional as well I would once that's up copy all the data over make sure the new data is coming into the new field and then go drop that old field but it's multiple steps in terms of when you're applying changes to the database but the result is much more control over how these things change and a generally safer deployment it makes life much better and we've had a much less stressful time when we stopped doing traditional migration files and instead started doing the expand and contract style migrations with a push wrapping up we're happy with the balance we found in the first iteration Master DB and laying the roots for future local use cases while providing an easy way to deploy production databases today one detail left out of this article is how Integrations are able to provide their own tables and data as well which we hope to explore more as we continue down the path towards building our next itation of content and plugins in Astro really cool stuff the thing he's hinting at there is right now with Astro DB we're defining all of the tables ourselves but theoretically you could add something like upload thing and an upload thing plugin could have all of the files for your app just accessed with r data model right there we could just embed our data model into your app through our API and they expose it to you through their database these are really exciting things especially if you combine that with their Cloud Astro Studio product if I could see all the different tables I have here like one isn't even hosted in their database is just accessible through it like my files table from upload thing or my off table from clerk having those as plugins inside of this one layer is really nice because joins don't need to be a thing that exists exclusively within your specific SQL dialect a join could be between two different sources entirely where I'm linking data from an API call to data from my database and I'm excited that they're not just thinking about that but they're embracing it as they go forward with Astro studio studio apps are the vision for what I just described you can create a tab on the left that exposes an uploading viewer to talk to tables behind the scenes really cool stuff oh yeah as's Discord by the way if you guys are looking to learn more about this and talk about it with a bunch of nerds their Discord is nuts this actually really cool thing I just saw you can export a dump of your current database which includes the schema and all of the data so you can move it to something else if as does not end up being the right thing for you also see my usage tokens hopefully they won't expose that immediately the tokens to connect to your database cool web hooks none are created what does creating a web hook here do ooh this will be triggered whenever project collections are updated this is actually really handy this for those who aren't familiar somehow with a web hook what this will do is whenever a specific thing changes in your database it will ping a service via URL just post to it saying hey by the way this just happened so if you want to set up something like logs for your database or generate tools your I don't know a Discord bot that whenever a new comment gets made posts it in a random channel in Discord this makes that take seconds to do instead of significantly longer that's really cool also really fits with this model of like treating the Astro Studio as a source for data linking together from all sorts of places also uh this is not centered I thought you guys were good at UI anyways to clarify it will run whenever you add a row from the UI it doesn't run for inserts yet oh so close but so far yeah that should be called out not just in the docs but in here too when you create a web hook whenever project closes are updated from this UI like in all caps bold here fix that do better here is the uh Astro calculator there is an example of an astro studio app beautiful we love it I trust this was built with Firebase even if the rest wasn't now this is built with whamp well multiplayer calculator that's all I've wanted this whole time the one thing I was trying to see if I could do is grab environment variables but it seems like tokens are the only thing understandable their goal here is to serve Astro users I was going to try and hack in a next finding or connection here I don't think it's worth it I'll be honest I just wanted to Showcase their intended use here I'm sure we'll have plenty of ways to abuse this in the future but for now I want to showcase what it's meant to be used for and for those wondering about pricing which I probably should have mentioned before the base plan super generous you get a gig of storage included you get a billion row reads included and a million row wrs included and then every million additional reads is A.1 Cent so every 10 million would be a Cent and then another dollar per million wrs that's pretty solid that's a fair and reasonable especially if you use indexes and things properly to lower those reads this is fair and no credit card required until you need to go over those tiers it will just lock you down otherwise I'm pretty excited it's cool seeing Frameworks taking data databases and content more seriously curious what you guys think though let me know in the comments is this something exciting to you scary you're going to check out Astro more or avoid it entirely let me know I'm genuinely curious until next time peace nards




## Why Don't We Have A Laravel For JavaScript_ - 20240526
if you've been writing code for a while you were probably around for the rails era when suddenly out of nowhere we had a way to build applications with this weird new language Ruby that allowed us to have server and client together in a way that kind of made sense you would write a template you would fill its data out using the model view controller Paradigm and structure through the view and the template what you wanted the user to see and this is a magical pattern that is how so many of the applications we know and love were built and how many of them are still built today services like GitHub are still powered almost entirely by rails they've moved a lot of the client to things like react but the general infrastructure is built around the patterns that rails was one of the first things to invent in the OG Ruby Era the goal of this video is not to talk a bunch of about Ruby or LEL or all these other Solutions and the ll in the title has a purpose here because LL is an awesome framework and I don't want to sit here and pretend it isn't it is the PHP framework for web Artisans which sounds a little bit pretentious but let's be real we're JavaScript devs we've said way more pretentious stuff in our time I'm bringing up Lal because it is a very important example of an all-in-one framework what do I mean by allinone well if we take a look the ecosystem you'll start to see what I mean in the fact that it takes a page scroll in a three column structure to see all the options here showcases the level of stuff that exists here and if we just click the getting started and you see how many things are included there are Primitives for so many things in LL from setting up a mail server to managing notifications like push notifications websockets all of that stuff stuff to having a live update layer which if I go back to the main page here there it is live wire the most productive way to build your next web app powerful Dynamic front in UI without leaving PHP you're able to update the client as new data comes in or as a user clicks a button you can see the result come back in all coming from the server where your UI is being powered by the serers side code and is constantly interacting back and forth via something like a websocket these are all really cool things and having one framework that includes all of this so you don't have to go find the right solution for your problem it's just there there's a lot of value to this and there's a reason people getting so hyped about larval and solutions like it there's a reason that we started in the same place with rails back in the day the reason is because when you went hunting for Solutions the ones you would find would often suck like suck really hard the alternative to the rail stack back in the day was the mean stack the mean stack was Express angular and node and of those four things I can definitively say at least two of them are a mistake if not three that's the problem though the alternative to rails which was an all-in-one solution that had recommendations for every problem you might have was a thing that was so insanely modular and the parts were not necessarily built to be very compatible with each other that we could glue them and it could work but it didn't always work great and if one of those parts was hard to implement or build around and it turned out to not be a great part that sucked and it really was awful feeling like the solution you picked was wrong the new one that just came out was right and now you're behind and have to catch that thing up that doesn't really happen in these other ecosystems we don't see a bunch of stuff laravel where people adopted the wrong version and now they're miserable trying to upgrade or they picked the wrong thing to manage their off and now they're trapped in having a miserable time do you know what else doesn't really have that problem anymore react this is why we can go so much more modular now with so much less pain and that's the thesis of this video that we're about to dive deep on the reason we don't have a ll for JavaScript is because things are so much better without it to be clear we have tried there are lots of attempts to do an all-in-one framework for JS the ones that I have pulled up here are Blitz which if you're not familiar is very very similar to what I did with create T3 app and when I say I I mean my community because I didn't really build create T3 app create T3 app is a starting point that includes a bunch of our recommendations we don't really recommend Prisma anymore we really push for drizzle because it's a better experience overall and we learned and have moved on since trpc is a great way to do client server interactions but you can also use server components now too Tailwind CSS is the best way to write CSS even like the rails and The Elixir communities now largely agree with that thankfully next off is an open source authentication layer that you can use and if you don't want to use it there are also Services you can integrate here as well typescript because we don't think you should be ready vanilla JS anymore very rare that it makes sense for application code and next as the core piece we're building around Blitz was originally very similar the difference being Blitz has its own version of a lot of those things its own wrappers around those things and doesn't really give you a way to remove the ones you don't want or replace them with something else instead because it's meant to be a lot more like rails the creator of Blitz Brandon Bayer fly Bayer on Twitter built Blitz because he missed the rail's experience of just having a working solution for every problem he might run into the solution might not be perfect but it at least works and is there he doesn't have to think about it sadly Blitz did not particularly take off okay this is the issue there's no create Blitz it's just the one Blitz thing so it's really hard to compare installs which is what I wanted to do but it is not trivial to do so so I won't do that I would be a weird dunk anyways Blitz is far from the only one of these Solutions though there's also Adonis create with smoke backend applications in record time the types framework for building web apps and API servers they're not as focused on the UI side but you can integrate UI stuff in it this is much more focused on the server side making apis with the whole ecosystem of all the tools and parts and DBS and ORS and controller type things you might want or need and it looks and feels a lot like Ruby and rails so if that's what you're looking for you have the solution there and then there is redwood redwood is particularly fascinating they have some really cool stuff coming soon if you're not already familiar with redwood it is kind of an alternative to next but it's much more focused on being batteries included having all the react conventions all the backend stuff a giant graphql server built into the framework with the ability to interface between client and server story book built in as well which God I really hope they delete at some point because the story would is rough is an interesting option that has also historically found issue finding a customer base and getting adopted to this day I don't know anybody who's actually shipping Redwood that isn't part of the Redwood team which is sad cuz it seems like a really good solution I've had great conversations with them it's really interesting stuff but nobody seems to care they're actually coming out now moving to server components and moving off of graphql which is awesome especially if they have a good migration story but despite existing having all these Solutions and being the rails for JavaScript which as we've established here we have three options and arguably cre3 app is a fourth option but we're more modular our goal is to give you the parts and let you opt in and out these Solutions did not take off and even create the3 app barely did especially when you compare it to things like just vanilla xjs with typescript there's a reason for that though the reason is because it's so much easier to take pieces in out in this ecosystem when it was hard to adopt a solution and it was even harder to identify a good solution and the Absolut most part when most of the solutions sucked having an all-in-one that was guaranteed to be good enough was a fantastic thing especially when you look at those other languages and realize how hard it is to make packages or framework like things there's a common saying in the react World now which is that if you're not using a framework you're building one and on one hand this is meant to be a dunk on the people who say I don't need next or remix or any of those things I can do it myself but the more important undertone here is that effectively any appdev can build the exact framework they need with the parts they do and don't want JavaScript has a bunch of massive advantages here it's way easier to swap these pieces in and out and compose them in the ecosystem around everything from npm to react components to hooks to all the stuff that we adopt and use in these infrastructures and servers and applications it's all much easier to compose change swap in swap out rewrite and do what you want with and over time those pieces have gotten really really good that's the magic that makes JavaScript so special and that's the reason we'll probably never see one of these rails or LEL like things succeed in the JS ecosystem because it's an ecosystem where we have infinitely more people making awesome new solutions that improve on certain problems that the existing Solutions didn't not happy with Prisma well there's three guys in the Ukraine making drizzle which is way faster way smaller generally easier to work with and has a lot fewer of those quirks don't like next we got waku and remix pushing the boundaries of what you can do with react don't like react well we got solid and spelt is phenomenal Solutions for you to adopt as well this is the magic of JavaScript not a flaw in the idea that JavaScript is somehow fundamentally worse because we don't have a laravel is so confusing to me because we have three and no other language has so many great full stack all-in-one Solutions much less so many great pieces that we can compose and assemble into our own best solution these are the strengths of JavaScript it might suck a little bit that if you're learning the language and you look and there's 15 different options for one of the problems that you have and you're used to rails where there's only one it might feel a little bad to have to pick a solution because you're worried about picking wrong the reality nowadays is that it's hard to pick wrong if it's one of the solutions that's being recommended online and the dock that you're reading is less than 5 years old you're probably going to be okay you can start a react app today using Create react app and I might make some jokes on Twitter but it's a fine solution and if you realize it wasn't and you actually want to move to some other solution because I don't know you want to render the pages on the server or you saw these server component things and you were excited you can go make a new project using those Solutions copy paste your components over and they'll probably work the way that JavaScript works is so much more accessible composable and flexible that the desire for these Frameworks just isn't there and if you're in the ecosystem for a long time you quickly realize you don't want that because you'll build a gut feel for the solutions that make sense for you and you can just keep using those instead as much as I love the new nexj server component stuff cre3 app still by default recommends the way that we did it 3 years ago which was render with Pages router a quick template on the server side and then let the client i' take over with trpc because that was one of the best ways to build really client Dynamic Heavy applications like what we built with ping we have not moved ping over because it's still a really good solution for that problem but if we wanted to we can and that's the magic sorry for the outfit change I realized I missed a point that I really care about with this discussion and I wanted to take some time to talk about it the idea that any one of these pieces that yes get swapped around a lot improved changed rebuilt constantly has an interesting side effect that people are reasonably concerned about that side effect is startups forming around these pieces in the larvel community the idea of an O company sounds funny because O is just a part of your framework but in the JavaScript Community there are startups that do just that I think this is awesome because we have the options in JavaScript because some things make a lot of sense to just have a package for and O is one of those we have great options like OJs and Luchia to self-host open source authentication but when you realize a lot of the intricacies of off that suck like the compliance the creation of jwt's and dealing with those all of the weird Integrations at every level you might have to build to make this stuff work in the first place compliance with all the crazy things that big businesses expect getting all of that right sucks hard enough that a company can show up and do it and Clerk's not the first one they're one of many and if you look at other ones like off zero they were largely built around the rails community so this isn't a new thing so I'm really frustrated people seem to think it is that javascripts just forced everyone to go to Services no this has always been a thing more importantly the ability for anyone to build both a service for a thing as well as an open source alternative is better than it's ever been for every one of these big companies that's solving this problem there are five open source Alternatives made by developers just like us that you can contribute to yourself adopt do whatever you want to and if you don't like what they're doing you can Fork it and put it in yourself this is just not the case in these other ecosystems where all the tools are made by the same core team is a win it's not a negative the fact that JavaScript is the best place for these startups to start is not a failure of JavaScript it's again one of the strengths of it it's much harder for a company to take a vertical in their stack and turn that into a business if the vertical is something that's built into rails or laravel if they're in an ecosystem where every piece can be treated in this modular way one of those pieces could become a business if it's what makes sense for that piece there is no other ecosystem where this is the case and I don't get why people treat this like a negative I know a lot of devs that are more than happy still shipping react 16 barely even using Hooks and that's awesome because if that's what you're into and you like the solution you have you don't have to keep up and the fact that we have things going on constantly that's not a negative and I really am confused on like a deep level as to why people look at the JavaScript ecosystem see that there isn't a popular alternative to LL and somehow blame us and say that javascript's worse for it it's not it's actually the magic of JavaScript and it's the reason I will keep betting on it forever long live JS and God bless the maintainers who made this ecosystem the best one in all of software it's a shame other communities look at it and think the good is bad because the good is unrivaled in any other space let me know in the comments why I'm wrong about PHP because I know you guys love to do that and until next time peace nerds




## Why Everyone Hates Web Components - 20241008
hey Theo why are you still using react the browser supports components everyone should just be using web components well guess what man there's a reason web components kind of suck and if I was the only one sitting here saying that I'd understand why you're skeptical but if let's say every framework author and relevant person in the web dev space was to say they suck maybe you would listen to them hopefully well thankfully I'm not alone and a lot of these really relevant people are speaking up a while back Rich Harris the creator of spelt made a great blog post describing all of the reasons why web components don't make sense and if it was just him there would be arguments against it but it isn't it's everyone and now Ryan carniato the creator of solid and one of the most in the know people in the whole web dev world one of the people I reference regularly when I want to make sure I'm getting things right he's coming out against web components now and if Ryan's against it it's over before we talk about the future we need to talk about today's sponsor yeah everything okay yeah I'm just tired of changing providers for everything we swapped databases three times in off platforms twice this year how do you keep track of everything oh that's easy I just use app right app right yeah they kind of just handle everything for you from data to file uploads to authentication so you can focus on building your app I mean that sounds nice but we're building a mobile chat app in flutter you're un luck not only do they have a flutter SDK they support real time events straight from your data so you're telling me I just wasted and I'm still wasting are you okay man how do I get all of these years of my life back thank you to aight for sponsoring this video check them out at app.io so let's go through this as well as all of the other pieces of coverage and some of the Twitter Wars that have happened over Ryan once again kickstarting everyone's favorite conversation web components and why no one actually uses them real quick before we get started though I want to do a poll do you use web components yes I did but stopped no I think that's fine for options yeah we'll just do those three curious how you guys feel yeah we're already seeing from these numbers not a popular solution but I want to talk about just how bad they are web components are not the future a few years ago I wrote an article suggesting that web components might not be the most beneficial direction for web development to head this article was in 2020 so it's been four over four years there a soft look at where they made sense and where Things Fall Apart it wasn't geared as an us against them argument and I hoped people would come to the reasonable conclusions for themselves but over the past few years I've only seen the situation worsen some may have never taken web components seriously but I always have I used them in production for 7 years I wrote several polyfills in the early days for things like the shadow Dom to use them before they even hit prime time but my experience then and my experience since only points me to a single conclusion web components possibly pose the biggest risk to the future of the web that I can see  so I haven't pre-read this one at all I just saw Ryan did this article and was immediately hyped and I've been waiting for 3 Days to actually sit down and read this this is unusually spicy for Ryan he's usually quite chill I'm already getting info from chat this is not the normal Ryan this is pissed Ryan this doesn't happen this doesn't happen I am so excited right now visions of Utopia I admit that statement comes off a bit heavy-handed but many reasons lie below the surface as to why I believe it and it starts with understanding the proposed benefit of web components the vision of web components is that one day regardless of what tool you use to author them you can have components that feel as native as Dom elements that can be added to any website without consideration of how the website is authored no concerns about specific build tools specific runtime mechanisms or the way that one would ever interface with these components would ever change in a sense a portable interoperate web one that can mitigate the future needs for migration one that sets you up for any possible future the perfect way to Future proof your sites and applications compelling Prospect is it not this is exactly why the promise of web components is so alluring and also so dangerous competing standards this is one of the best xkcds this and the one with the single brick and the random guy maintaining it those will stand the test of time they get more real every day apparently some context for this article Ryan was arguing with people in the solid JS Discord for days who are trying to convince him that web components were good and he knows they're not and this is him explaining why very fun good to have that context thank you Dev I didn't need to pull up the old XKCD comic for you to know the challenges with standards the more ambitious the standard the more likely it will have opposition or alternative approaches to accomplish it this doesn't go away when something is standardized it just suggests that there is one blessed way you can take it or you can leave it if the sheer number of JS Frameworks is any indicator we are nowhere near reaching a consensus on how one should author components on the web we can't even decide if you should be able to put more than one in a file or not it's hilarious even if we were a bit closer today we were nowhere near that a decade ago yeah I I would argue we're further today but a decade ago no no react kind of invented what we consider a component but the ways we author it is being debated every day still the introduction of higher level Primitives can have a positive effect suddenly something harder to do becomes easier this initially led to more EXP ation web components caused an increase in the number of JS Frameworks in the mid-2010s it was an important inspiration for why I created solid JS a similar example would be the increase in meta Frameworks being built thanks to tools like V good call out that web components had an impact on the number of Frameworks being made and people thinking about making their own framework similar to how V increased the number of full stack Frameworks being built especially once it added the tools necessary to do that I really like this comparison the difference is that V despite having a lot of weird decisions is generally speaking a a pretty good way to build full stack Frameworks whereas web components are not really a good way to build much of anything other than intercoms little chat with us widget but it also can have a negative effect if too many assumptions are made it becomes harder to explore alternative space because everything gravitates around the establishment what is more established than a web standard that can never change also a fair point if a web standard is wrong they can't fix it later they have to replace it later because old websites are promised to never break if you build a website on web standards it will continue to work indefinitely and that's why something like ladybird is so miserable to build because the size of like the web standards like document is so absurd I think it's like 100,000 Pages or so now like the number of standards that exist in the web that have to be implemented is crazy and that's why we end up with these weird CSS apis because we just have to add new ones every time the old one isn't good enough instead of fixing the old ones we can't have a new version the same way we do with an SDK if react wanted to change how we write components they could make react 20 and change it they don't because they're honoring the promise of web not breaking but you can't just break the web so the established standards are the thing we want to build around but if the standard is bad it kind of Dooms everyone trying to build around it I've struggled with this a ton outside of web standards jsx according to the spec has no established semantics but try to convince the wide range of tools out there that they are assuming too much this is a fun call out because jsx which is the syntax in react that we use to to write the HTML looking stuff in our JS files that syntax is is a pretty vague standard and jsx V2 just never ended up happening or shipping and as such all of the jsx interpreters and things like es build and V and all these other tools are built with the assumption that if you're writing jsx you're writing react but now there's other Frameworks with jsx like solid JS and if solid JS uses jsx in a way that's to jsx is spec but isn't necessarily to react spec it can break a lot of these tools I know asan and is similar when they moved to jsx as their templating language it's a annoying challenge to work around I can only imagine the nightmare it would have been if jsx had been standardized in the browser forgetting how Frameworks like Inferno solid and million all work having done way more optimal things with their jsx transforms even react has changed their Transformations over time again the call it like if jsx was part of the browser standard no one would be able to change how it works and all of the implementations of jsx have changed significantly over time this is but one example of many things that help us can effectively tie our hands we must tread carefully when standardizing any highlevel mechanism because it assumes a lot it is insufficient to say that not everyone has to use it when its existence inherently influences how we look at the platform in general I used to help Ryan a little bit with copy and like wording stuff I want to ask him for help now Jesus Christ this is good things that help us can effectively tie our hands what a banger quote it is insufficient to say not everyone has to use it it when its existence influences how we look at the platform in general I don't have a comment he's just Spitting Fire and I'm going to compl before it like he's totally right here like the web standard being bad isn't something we can just ignore it is inherently influential and even though we established like five years ago the web component stck we still have people every day asking about supporting them better and asking about how to use them and all of these things even though we as a deep Community kind of know how bad they are now let's keep going opportunity cost is real as a framework author I understand this all too well I often say that in this field things are discovered as much as they are invented so many Banger like single sentences in this Jesus Christ Ryan making my job hard also I can't believe I didn't call this out before if you're interested in what Ryan has to say his YouTube channel is super underrated because he doesn't do videos he just does live streams he does them every Friday and they are awesome and he leaves them up and if you're looking for hours of Deep dive webd content this is one of the few channels I try and watch and I feel so bad that I've fallen behind on his streams I used to watch him every week and I try my best to link to his channel will be in the description please check his channel out he deserves so much more attention than he gets on his YouTube stuff he's the most respected person in this whole ecosystem at this point hit that sub button he deserves it notice that I have the Bell on for him I I have the Bell on for like three people so yeah if you like what he has to say here if you like what he's doing go give him a sub and watch his streams on Friday they're insane back to the the article I often say that in this field things are discovered as much as they're invented what I mean by that is there's a certain truth or physics if you will to design decisions that when followed will lead us all to similar places I have an example of that in my tan stack start video I just published and that how do I put it I made a proposal a long time ago for an example of how I thought server functions could work with react query to compile out like RPC functions effectively and what I learned after that is my design for that was kind of annoying to implement at the very least but also trpc existed so I went into that and now 4ish years later everyone's implementing nearly identical to the thing that I wrote and I'm not saying that I was super ahead and invented this thing and they all copied me I'm saying we all came to the same conclusion over time and that happens like when you look at the way technology works and you're deep enough in the space we all see the same flaws and those will often bring us to the same Solutions and it's a really important call out here anyways it isn't that these tools copy each other blatantly they fall into the grooves absolutely agree and it sucks when people accuse others of copying when we're all just falling into and discovering the same things and for the same reason once a discovery is made that changes our Outlook the damage is done before we write a single line of code if your job is to design a system you don't want redundant Parts you want clear and purposeful boundaries instead of making a million variations on the same thing you try to reuse one thing more so recognizing that to accomplish common tasks you need multip mle things these pieces become intertwined very fair put I was about to bring up react as an example I'm curious how he does it though for example react developers definitely felt how long it was between the announcement of suspense in 2017 when we finally got a data fetching story for Server components in 2022 why did this Take 5 years because it wasn't a straight line took a while to understand how all the pieces fit that in itself is reasonable but more react didn't want to release its piecewise until they knew they had an answer for the whole story also a good call out the reason that some of these releases take so long is because react was scared of releasing things that weren't complete we've even seen that funny enough with suspense they change the way that multiple components under suspense work watch my suspense drama video if you're curious we put way too much time into that one little subtle details of how these things work are enough to break whole workflows so they go out of their way to make sure that the whole thing is fitting together before it goes public as they looked more and more all these pieces were related and while they could be broken up they needed each other to paint the whole picture server components do not fit everyone's idea of how data fetching with suspense should work and react maybe people could have benefited from a client side data fetching primitive react chose to be ambitious here which is their right as a tool and they decided what was best but this could have played out a number of ways as a developer I can always choose not to use react and while I can choose not to use certain react features it is clear everything in react has shifted to their current mental model I might even be wishing I could easily migrate off react okay this is interesting because it seems like the react team is going a little different direction wise here right now let me find server actions just got renamed to server functions previously server actions as implemented in nextjs were post functions you could fire off of forms or on clicks that could only be done sequentially you couldn't have them in parallel so using them for data fetching was dumb really dumb changing it to server functions was scary for me because now people are going to use it to fetch data in jsx which means on the client after something loads you can fetch data using them you could before but it was awful because of the sequential nature of them I was terrified that renaming it to server functions would encourage that behavior even more which I considered anti- patterns I went as far as to getting the nextjs docs updated to remove the call out in the server action section that you could use them to render HTM X and pass data to the client because it was misleading so many people but when I called out that I don't like this change for that reason I got replies from the team that were really relevant ree called out unless they're swapping over to making it so you can do queries from server actions instead of only using them to post it seems like an odd change server functions feel like that implies it can be used for more than just mutations this is definitely happening and then Jim Jimmy who is the one in charge of the nextjs team called out that there will be explicit new apis and uh Ricky came in here to say when I said that using server actions for fetching jsx was misuse is that a misuse clearly implying that the intent here is to enable the New Primitives in react to be used for things on the client side to get data from the server so while yes the direction react was pushing and the mental model they were fighting for was very much server first and server rendering is the method of updating content on the page it does seem like they're caving a little bit and going a little more into allowing for client data fetching Primitives so to the point here that you can always choose to not use certain react features it's clear they've shifted their mental model I would argue due to the push back react is willing to adjust their mental model to Encompass more of the community and they're willing to to take steps back and make changes based on what does and doesn't resonate with the community and the fact that people were wishing they could migrate off react is part of why they're doing that that all said like the thing I'm talking about happened after this article and I bet he would have written this paragraph differently if the order of events was different anyways there's a big difference here react is a library and isn't a standard those options aren't the same when it comes to standards if all I wanted was scope Styles and now I have to deal with the shadow Dom because that was the abstraction that best fit with having a single way to do things due to web components well that's what I'm stuck with when Primitives overstep their desired usage when they over abstract you don't get to come back from that you've already paid the cost and as anyone who has done major architectural refactoring of a problem can attest the hardest part is adjusting boundaries if things fall under the same logical grouping they are easier to update is when you need to break things apart that it gets truly challenging you can always add another layer of abstraction to solve a problem problem but removing one can be difficult where are all of these bangers coming from Jesus Christ yeah you can always wrap more around a problem but you can't always remove layers to to solve the problem so somebody called out this article feels like it's falling in the comparing web components to react Pitfall I don't agree right now at all like the the the only thing that he's called that so far about web components specifically is that if you're trying to use scoped Styles bringing in Shadow Dom because it's the only way to use scope Styles because web components sucks everything else is just the the framing of why standards are important he's not comparing anything to react so far at least just the type of problem not the the goal of the solution but yeah we'll see if that changes as we go forward it is worth noting that a big portion of why web components exist is because of people on the Chrome team at the Times disdain for react specifically a certain Alex Russell who was not fond of react their goal was to make it irrelevant they've since changed their goal and I'll talk a little bit about that later but web components were built as a standard as a response to react not as a replacement for react not as a similar mental model to react but as a response to it absolutely the cost of abstraction so the fundamental problem with web components is that they're built on custom elements elements are not components more specifically elements are a subset of components one could argue that every element could be a component but not all components are elements so what it means that every interface needs to go through the Dom some in well- defined ways that aren't a perfect fit and some in newly defined ways that augment or change how one would deal with with elements to accommodate extended functionality I'm curious where he goes here I have a lot of thoughts but thus far he has covered everything I've wanted to say no I have to I I can't not I'm thinking too much about it so to iterate on what is being said here an important thing to understand about elements versus components is that an element is meant to be a dumb piece like a div or a button or a paragraph web components are cool because they let you write your own custom based elements like this and you can even do things like pass the HTML because that's how elements work but the idea of an element inherently containing its own things like if I wanted to have this labeled button with edit and I wanted this to be its own thing that I could reuse in three places that is no longer just an element because it doesn't have the same Primitives an HTML element is the base primitive it doesn't have sub elements unless you declare them a component not only has sub elements potentially as the ability to pass elements in different types you could have like in react I could have a prop here Su component react. element react. react element so now I can pass this app component some component and render it let's do that props do suum component and now if I go to the main and pass here sum component equals div sub nerds that just works and this idea of properties that you can pass state that you can own like this all of these ideas are an important part of components elements don't inherently have state Beyond like form data that is baked into them to be the minimal primitive that is part of the browser and even then the expectation is that you're controlling that with JavaScript the idea of intertwining State behaviors Styles and markup as one box that concept is a component I didn't even really dive into Styles here but the idea that you could write style code in this that only affects this component and doesn't affect others is also important and I've been using react long enough to remember times before we were deep on things like Tailwind where you would put class names here still have a CSS file and things would break all the time because you accidentally use the same class name in two places all of these things were just part of the experience and as we have gotten better at encapsulating our components so they live in isolated boxes building large applications with lots of Developers has gotten significantly easier components won for a reason this model lets you write things that are simple simply and write things that are complex maintaina and that is something unique to components and part of why components work is because The Primitives that they use are either other components or elements and having those as the base properties that we are assembling components with is a huge part of why they are so powerful web components by Design are trying to blur the line between an element and a component and it's a mess it's back to the article so what it means that every interface needs to go through the Dom Su in well-defined ways that aren't a perfect fit and Su in newly defined ways that augment or change how one would deal with elements to accommodate for the extended functionality to begin Dom elements have attributes in properties this is so that they can be represented as HTML attributes accept only strings while properties being a JS interface can handle any value really good call out when you're passing things in traditional HTML you can only pass strings but when you're using JavaScript and something like SX or any other web framework with components in it you can pass things like markup you can pass another component I could make a quick counter button and pass it here and it will just work that's so cool and web components do not let you do these things they make that type of composability basically impossible because they expect everything to be a  string native Nom elements have many rules around specific attributes and properties like how some are booleans existence means that they apply While others are pseudo Boolean like they need an explicit true or false woo yeah again with web standards things when they change them it's too late some properties reflect to attributes and others don't a goal of templating languages is to solve this in a uniform way we can make special rules around known elements into tributes but with custom elements we don't know so this is why some templating libraries have interesting prefixes to indicate how things should be set even solid jsx has things like attribute colon prop colon and Buon prefixes for this reason now every runtime location in compiler hook needs to be aware of it great yeah so because the to clarify what is being said here because this is a really important point that just took a second for it to click for me even native Dom elements have a lot of weird ways to interface with them like some things are just you pass it like hidden like or if I have a button let's say I have a button in here we'll go back to the app here if I want this button disabled I can just write disabled but if I want area disabled I if I were to call area disabled you have to explicitly pass it true so even though those are both disabled Flags one you can just pass without giving it a value the other one needs to be passed a string value of true or false and that's just how HTML works and this would be terrible okay this this is terrible but we get around it because every framework every tool built around the web has the standards document saying what each of these elements do this is annoying but we've been able as the community to work around it because it's a standard that we've all agreed on and even though the standard means these different elements have different behaviors we can build around it in a standard way but if we're making our own elements as being described here we don't know which of the ways these attributes work we don't know if it's blindly treated as a boo and if we just pass it the flag we don't know if it's an attribute we don't know if it's a property so in order for this to work especially if you're trying to mount a web comp another framework like react or solid you now have to manually declare all of these things for every single element type that sucks somebody asked in chat did I just say semantic htl is annoying no semantic HTML meaning these two things are different and you pass them through differently that's not semantic HTML that is bad design that it's too late to fix there's a difference here and the difference is when you're adding new elements willy-nilly using things like web components you are going to have problems and solid has had to solve these with weird prefixes that sucks sorry I keep saying attribute when it's supposed to be attribute I don't know if it's my accent or something but I've gotten enough annoying comments about it that I'm just going to rotate between the two cuz it's funny now you might be thinking we need better templating as a standard but like jsx above you need to consider the implications of that decision a few years ago most people would have probably agreed that the way something like L HTML the template rendering was a good approach other solutions could output it however in the interim we realize that reactive rendering like what solid does outperforms it it does so by changing the semantics of the templating if we had moved ahead with the way lit was doing things we'd have a standard that isn't the best way to do templating also a fair point like the early proposals and the way things like lit were working might have seemed really good at the time but we learned a ton since and now we're in the middle of the signals wave because of solid JS proving how powerful and performant they can be it doesn't end there Dom elements can be cloned but custom elements have different behaviors which means they should be imported instead they have dom-based life cycles that can trigger synchronously or asynchronously depending depending on when they upgrade this wrecks Havoc with on things like reactivity tracking and context apis oh man the the weird Dom life cycles that these elements have is obnoxious I've seen a couple examples I can't think of any on the top of my head but when I saw them I was like wait what yeah if you have a web component that has its own life cycle that has been mounted by solid that has a life cycle and now you have to build a bridge between these two different ways of managing components and life cycles that is Hell however these details are important to interface with Native Dom behaviors and events these are also all things that a JavaScript component doesn't have to worry about there are other idiosyncrasies like the way event targets work in the shadow Dom some events don't compose like they don't bubble Beyond The Shadow Dom boundaries some events don't bubble consistently because they don't recognize a different Target like in focus in because the shadow host is always made the Target no matter which child element gains Focus oh man that sucks actually I had no idea so quick making this one a little easier to understand the focus elements on a web component don't go to the child element that gained Focus they go to the whole like element itself which is obnoxious especially if you're trying to like put Shadow if you're trying to put web components in web components which you basically can't do yeah we could talk about these for days but I don't want to divert too much attention here some things are today's shortcomings and some are by Design but the commonality here is that they all require specific consideration that otherwise wouldn't be necessary and of course this has performance overhead and of course Ryan has a blog post if it's about performance in the web especially around components Ryan has covered it meaningfully yeah people are correcting me there if the event is viewed from a Handler inside of the Shadow Dom the target is correct but if it's viewed from a Handler outside it's opaque to which element in the shadow D was targeted it's obnoxious but there are workarounds okay that makes more sense so if I am watching for the focus events externally it will only tell me that it targeted the like web component it won't tell me what in inside of it was targeted inside of it you have the actual event but now you're getting a different event with different data inside of the web component and outside of the web component which is what how are we just okay with that that almost feels worse but even if you consider the performance cost minimal where does it leave us when going to the server for things like SSR yes you can completely do SSR with web components hydration is completely achievable to be clear this was not the case before web components did not serers side render previously and there's a lot of hacks people have made to make it possible to do this but they're a Dom interface in A Place With No Dom also a good call out like the browser has a Dom which is how server components were built to work with the real Dom and the shadow Dom and the relationship between them you don't have a Dom on the server the way most server rendered Frameworks work is they spit out a string that then gets rendered in the browser and then hydrated on the JavaScript on the other side you can make a minimal wrapper to handle most things but this is all extra overhead all because we tried to make components something that they aren't on the server there is no such standard we are back to have having specific Solutions it is just another type of framework with no more guarantees than if I choose view or react for my next project there's nothing wrong with that we need to recognize that fact that's a fair point like if you're doing this on the server like if the goal of web components is to be the standards you have to make decisions around these things to use web components you have to use some form of framework around them especially if you're also server rendering it sucks the real cost of web components I just saw a message from Ryan saying that he's on vacation and went on vacation right after posting this and wanted to apologize for not being part of the discourse after making the blog post so uh thank you Ryan no hard feelings you're not missing out on much like everybody's just like lamenting how right you are so yeah if you're wondering why Ryan's not in chat and why he hasn't said anything after this he's on vacation let him have a good vacation he deserves it he deserves a break right now the complete picture is one where the complexity of dealing with native elements increases to account for the new found flexibility of web components it is something that his tools support them better not only is the user of them paying the price but all of the users of the tool are more code to ship and more code to execute to check these edge cases it's a hidden tax that impacts everyone this is another good call out because I think a lot of the people who like web components aren't framework authors they're using them for very small cases for medium-sized applications every framework author understands how bad this is like all of them I think every framework author except the react team went through this phase I certainly did some of Felts worse design flaws are the direct result of us planning for a world in which web components were the dominant compile Target I believe Evan did Ryan in particular went very deep on them because of course we would we're all super competitive with each other so if we could offload the work to a platform primitive that results in better perf and smaller bundles then we're going to be all over it in a sane world the fact that we of all people are the least enthusiastic about them would prompt some deep introspection from the people designing these specs instead we get admonished for not contributing to handwave making them better or we get sub tweeted about conflict of interest and other inane you see it's a conflict of interest to maintain a framework even though web components don't compete with Frameworks but there's no conflict of interest involved in being paid to work on web component Frameworks or specs or component libraries Meanwhile we're always 20 specs away from parody with userland and the complexity of the very platform keeps compounding it's absolute Madness oh and he said other than react here Ricky came in react also went through this phase the conclusion everyone else came to was pretty quick so it might look like it was skipped from the outside oh also Sam called out that ember tried and gave up because of this and yeah that that's the context is every framework author tried because we all wanted to support the browsers this is a great one they don't know how awesome web components are well we spent years trying they don't work they suck there were people from the angular team commenting on this too Evan youu had a rant about it everyone's been calling this out I want to shout out one of my favorite people in this ecosystem Nico Nicole Sullivan Nicole was one of the leads on the Google Chrome team when she joined she saw how much tension there was between the Chrome team and framework authors so she went out of her way to try and Bridge this Gap and better understand the first thing she did was find a ton of data she went and scoured the web to see what websites were using what technologies Nicole had an awesome fireside chat at reactathon last year that I've been thinking about since I heard it so I want to take this opportunity to share parts of it Link in the description if you want the whole thing whole thing is worth it okay so the context here is Nicole was asked about what benefits they've seen since they started collaborating with the react team and other framework teams more and her answer here I think is really valuable for understanding how we got to the place we're in today um I don't think it's hard to even even put into words how much it changed things um when I joined Chrome there was sort of a sense of an adversarial relation ship with Frameworks I don't know if folks remember that but there was just this I just didn't understand why it seemed really silly to me like we should be on the same team clearly we have the same goals the web yeah um but it was this this adversarial relationship and I think um now a huge part of our strategy as an entire organization is that we're focused on um how do we meet the needs of abstractions and tools and Frameworks fall into that bucket um we did a little study where we looked at like who were the developers that were using vanilla JavaScript and what we found is they were most likely to work on their own just themselves or maybe one other person they were most likely to not use any other tools to not use npm to not use like the standard set of tools we've all gotten used to um and so the the conclusion I drew from that was these are hobbyists or maybe maybe students but probably hobbyists and so that allowed us to switch things around and say no the bulk of the web uses Frameworks cares about Frameworks want their Frameworks to be good and fast and and everything else um so that really switched us to thinking about how do we make framework authors happy and framework developers have great outcomes yeah wonderful and then the react team I should just say was amazing like they worked with us when we still had no idea what we were doing they spent a ton of time with us being like nope that's not how hydration works so that could learn and start to you know both put stuff in the browser that was useful but also contribute performance-wise to these absolutely I won't do you guys understand how big of a deal this is I think about this quote at least once a week and I was there when it happened a year ago the browser teams Chrome as Nicole who was on the team at the time said and was on the team at the time when she was talking here she was speaking here as a representative of the Chrome team specifically called out that at the time she joined if felt like there was an adversarial relationship between Chrome and framework authors but real developers used Frameworks the people who were building with vanilla browser standard stuff were hobbyists and in order for the web to keep improving in order for the great experiences we expect to use online to get better they had to help the framework teams and at the time they didn't even understand hydration but the react team was patient enough to work with chrome and help them figure these things out and that's why we're seeing the developments we're seeing today the important point and the reason I'm calling this out now is web components were created in the peak of that anti-f framework era where the Chrome team both didn't understand Frameworks and didn't like them and saw a conflict between the two and when you look at how Frameworks work and you look at how web components work it makes perfect sense why it is this way because of that disdain between the two and this is to be frank it's probably why Nicole is now at Apple her ability to get through this political  to do the right thing is unreal and the conversations I had with her were some of my favorites I wanted to bring her on and by the way Nicole still open invite if Apple will let you I just don't want to get you in trouble with your job she's just one of those people that has done more for the web than almost any other group and she's worked so hard to undo the damage of that old culture and I wanted to call that out because I think it's really important and honestly I highly recommend watching this whole thing it is full of bangers like that link will be in the description thank you Nicole for the hard work you've done thank you for recognizing that we use Frameworks for a reason season and thank you for starting to undo the damage of web components wanted to go on that rant quick because there's a reason all the framework authors have this problem and it's not because of skill issues it's because of that weird tension between the two all the comments from chat here brutal quote I can imagine Hacker News losing their  this is mind-blowing they really believed everyone wants to use vanilla JS and HTML yep yeah someone should just write a blog post based on that talk and post that on hn because hn video posts don't do well on hn anyways back to the article and by the way for those who have stuck around this song I know this is a long video we have to get to Leah's response CU I'm sure this will be really good I have massive respect for Leah she's changed my opinion on things many at times so I'm very excited to read that after so make sure you stick Through To The Ends we get to that too anyways I've talked about where early standardization would have been catastrophic but it also has the potential to stifle future Innovation along certain paths because it assumes too much improvements to hydration things like resum ability partial or selective hydration depend on event delegation to work but if the shadow Dom messes with that then how could web components fit the model SSR some might say was an oversight because we didn't think about that much in 2013 but the Gap only continues to grow over time one of the things that most modern Frameworks do is they'll let you generate the HTML on the server so you can load that before the JavaScript has started the JavaScript starting and taking over the page that's what hydration is you get the HTML first and then the JS comes in and the button might have rendered on the server so you have a button when you click it it doesn't do anything the JavaScript comes in reenders the button in order to attach to it and now when you click it it works most Frameworks are smart enough to have a little bit of JavaScript running that is keeping track of anything that gets clicked while all of the other JavaScript is showing up so it can make a cue of these events that occurred before the JS loaded and then it can replay them once the hydration happens but as mentioned before with the weird targeting of Shadow Dom elements you can't watch and replay events that occur inside of a web component so if I have a web component that's like a counter button and I click it and I get the events that the shadow component was clicked I can't hydrate those into the web component after the fact to actually trigger those events because the web component is isolated at a really weird spot so even if you server render it it breaks all of these types of behaviors that it to be fair took framework authors years to figure out but since web components were built as a reaction to Frameworks instead of in collaboration with Frameworks they missed all of these learnings and now we're Reinventing all of them and all of the complexity all of the weird decision making all of the work around building with Frameworks has to be done around web components to make them work so you're not just picking web components or a framework you're picking web components and a weird framework built around their Madness or a framework that already has their Madness figured out anyways for those curious I just did a video on. yield that's an example of one of the apis that was designed in collaboration with the react team to make it so all Frameworks can do more I have this one tweet I wanted to highlight cuz I thought it was really funny and I put in the video I had to Google what web components were and and I first look at the source code I know I'd entered the ninth level of hell and quickly closed the tab I've seen those demons before no sir hell no I don't even want to put you guys through looking at that syntax so I'm not going to put it in the video but if you want to see why people are so upset go look up some example server components back to the article as I said like react other Frameworks figured out how to solve all these SSR problems web components had no concept of SSR because they're a browser standard and the browser doesn't care about the server beyond what it sends to the browser so the idea of a web component being a standard that can run on the server too became the community's problem to solve which sucks you a to deal with compilers and build tools anyways we're moving away from this idea of them being a better standard and they're nothing more than a developer experience consideration at that point something you have at authoring time that vanishes from the final output for optimal user experience we optimize away the components another Banger from Ryan components are pure overhead this blog post was nuts the idea proposes is that components are Developer tool that do nothing but make your application slower once they're compiled down and ideally you could compile them out entirely but web components are making them standard so the inefficiencies of components in the overhead that they imply is now part of the browser I'm not saying someone couldn't find some interesting solutions to these problems but they all imply taking on the hidden cost due to the foundational misalignment of having the wrong abstraction this is what makes the dialogue here so difficult it isn't something that you improve it's just a mistake for a number of things now we can all say different solutions have different trade-offs and maybe something like web components could only possibly succeed with support of things like standards bodies because of how pervasive it would need to be to work it's an ideal that we're working towards and just aren't quite there yet but is it actually ideal Utopia Revisited is this going to be his alternative proposal o boy we often hit a similar debate when talking about micro frontends or microservices it is beneficial for organizational purposes to align projects with your developers it follows Conway's law for those who don't know Conway's law describes the link between communic a structures of organizations in the systems that they design is named after the computer programmer K yada it's a organizations which Design Systems in the broad sense use here are constrained to produce designs which are copies of the communication structures of those organizations this is that you ship your org chart however your teams talk and are structured the way your software comes out will be structured similarly the isolation reportability afforded by web components means that one could have multiple different components on the page from different sources now like the other prudent is in order similar to not wanting to write all of your microservices in different languages you might not want to author all of your components in different Frameworks but front end is a much more restrictive space the cost of each kilobyte of JS is not insignificant it isn't only maintenance why you wouldn't want to mix and match but to reduce payloads and this is where the wheels start coming off really good point with web components the isolation makes reusability between the parts much less so even if a web component could theoretically be a few kilobytes less than the react alternative if you have 15 components in react and 15 web components the web component site starts to weigh more if we're talking about bringing and this is the one place outside with web components if we have a super minimal HTML page like let's say a Blog and we want to have one element on it that's Dynamic we want to reuse it in multiple places we shouldn't have to introduce react to our code base to do that and web components are a compelling way to have single reusable pieces of interactivity on an otherwise static application and if this is like I have a Blog I want a comment section or I want a like button and my options are web components or react web components probably look pretty good to you but if you're building an interactive application and your choice is between a bunch of web components where you can't compose them or Mount them inside of each other or hydrate them after the fact or process the elements before the JS loads and all of these things or react where all these problems are solved for you react is actually the better solution not just the preferred solution but technically speaking react will run better it will work better the maintenance of the project will be significantly better the size of JS bundle will be smaller all these things are optimized in react because when one framework is running your web page and your application reusability becomes much easier and the reusability and composability of web components as their individual boxed piece doesn't scale across your application it's just the most reusable part you can't interrupt with that part you can't compose that part but you can use that part well with react you have all of this flexibility and the way smaller payload size because because you're only loading react once if your goal is to Future proof then you need to be prepared to keep different versions of even the same library on the same page this is no different for lit as it is for react you could choose to never update anything but that is an option without web components too there are no additional guarantees here to Future proof the only choice is to freeze things maintain multiple versions and load more js on your page yep realistically you will update your libraries in lock step which is also the same with any library in those cases if you only have a single Library on your page web components aren't doing anything for you but adding more overhead possibly getting in the way of features that the library provides now and in the future you might as well use the Library without web components fair point it's funny he just counteracted my example with the blog immediately the second consideration is granularity if you're a microf fronted then that is a contained swappable piece if in the future you decide it's not the best way to handle things then you can swap it out once you adopt web components everywhere you'll need to address each of these touch points web components differ from micr front ends and microservices because they can be used cross-sectionally this is good for standardization but never seen a company that uses jQuery ever completely be able to get rid of it also a fair point if you have one component that uses one library or tool and you have this web component or this microf front in your application you'll never fully get rid of it I know that if I recall the old rails Ember code base at twitch that I helped move us off of in 20 2018 still has some pages being served which is insane the most compelling uses for web components are as a sort of microfon and contain coner in that case you don't pay the scaling costs the outside communication is minimal and they're easy to swap in and out the great example here if we've ever been to a website that has the little like chat widget in the bottom like the intercom if you're not familiar intercom is the chat app everyone has on their site the little chat button where you can talk to them directly here that is a great example of a web component because now every developer in every framework can mount this annoying little chat thing on their site trivially you don't have to adjust it to a given framework and it doesn't communicate in and out as much like my page doesn't care what's going on in intercom so it works well for that outside of that there are not very many use cases that make sense as mentioned it's a one-off scenario in those cases though the friction is low enough that having web components isn't necessary I'd take them for the ergonomics to put a Zenex W did he really call that out Zenex wiet it's basically the same thing as the intercom one that is hilarious that is we're on the same page a little too much like the fact that's the only good example says so much like web components inadvertently built the perfect standard for annoying chat widgets and nothing else this conclusion is not the end of this I'm going to read the Leah thing but I want to hear what he has to say at the end first that is what it comes down to I couldn't argue that there aren't ergonomic benefits to using web components in some scenarios but the cost that it imposes everywhere is steep well I shouldn't be quick to disavow technology for the types of poor patterns it enables one to do it is difficult to stand behind it when it never fits in the ideal scenario at best it is nominal overhead that's the important point is not just that it can be used wrong it's that it never quite fits right even if you're using it correctly that's the problem web components are compromised through and through as we know sometimes we need compromises but that is nothing to get excited about and some compromises are better than others it presented to me that in 10 years from now it's possible that no one would be using solid but a web component would still be there with the same interface as today but I thought for a moment and responded that I'd still build it with solid because that would be the best choice for today in 10 years even if I had to use a 10e old version of solid it would still be better than the web component version 10 years doesn't erase that hopefully in 10 years I'd be using something better I really like that point I'm increasingly tired of the like the things you're using today are going to die you need to use standards cuz those will be there forever thanks to the standards being there forever an old solid JS codebase will still work in 10 years it might not be fun to work in and documentation might be old but the documentation for web components will be old and still bad and using them will be old and still bad I work in react code bases from eight plus years ago sometimes and they're fine they're not great they're not pleasant but that's not because they got worse over time that's because I got used to better things and the only reason standards in the web are better than Frameworks in the web for longevity is because they don't improve as Adam said I have 5-year-old web components that still work my guy I have 8-year-old react class components in production that still work what are you talking about the difference is that most react devs don't want to work on Old class components web components haven't degraded the same way because nobody ever wanted to use them the fact that the developer experience in react other Frameworks improves every year is not a a victory for web components because they are worse than react was 8 years ago they're going to be worse than using react today in 8 years too it's a stupid argument and I'm happy that Ryan called it out too because I've hated that argument for so long the decision is completely orthogonal so in a sense there are nothing wrong with L components as long as they are only able to be what they are it's the promise that they are something that they aren't which is so dangerous the way their existence warps everything around them that puts the whole web at risk it's a price that everyone has to pay Banger follow Ryan check out his YouTube let's hear Leah's response web components are not framework components and that's okay disclaimer this post expresses my opinions which do not necessarily reflect consensus by the whole web component Community blog post by Ryan carneal titled web components are not the future has recently stirred a lot of cont rovery a few other JS framework authors pitched in expressing frustrations and disillusionment around web components some web component folks wrote rebuttal While others repeatedly tried to get to the bottom of the issues so they could be addressed in the future I want to see the frustrations it's probably yeah this is the evue thing I talked about earlier if web components truly simplify Frameworks while retaining the same level of features I'd be the first one to write rewrite view on top of it I'm sure Ryan and Rich hold the stance too the conclusion is collectively no it's a tax and we should get over it and then Rich as I said before the insinuation that there's some kind of vested interest interest in suppressing web components is both illogical and ironic given the author's day job really distasteful and it totally misreads Ryan's argument yeah when everybody I've heard of says this sucks and a bunch of people have never seen before say wait no you're wrong I trust the people I've heard of I'm sorry I just do I know it's a bias but all of the authors of all of the most popular tools on the web have made a pretty clear stance here anyways when you're on the receiving end of such an onslaught the initial reaction is to feel threatened and become defensive how these kind of posts can often end up shaking things up and pushing a technology forward in the end I have some personal experience after I published my 2020 post the failed promise of web components which also made the rounds at the time I was approached by a bunch of folks about teaming up to fix the issues that I described the results of these brainstorm sessions was the web components CG which I'm assuming is the something group community group group is for collaboration between people working on web component libraries tools documentation and standards this was a group formed to try and make web components usable and now as a life of its own has become a vibrant web component community that has helped move several specs of strategic importance forward as someone who deeply cares about web components my initial response was also to push back I was reminded of how many times I'd seen this pattern before it is common for new web platform features to face push back and resistance for many years I saw that the example she gave on Twitter was apparently people hated CSS for the first 10 years and then came around to it there were not established solutions that CSS was trying to poorly recreate the established solution was tables and tables were much less flexible and much less capable than CSS web components are the less flexible and capable solution here if the more flexible thing is already dominant it will stay winning and that's what I didn't like about her argument is CSS didn't win because it was the standard or because it was pushed right it won because it was better and it was better because it was more flexible and apparently it wasn't originally it was way more limited Nan who is an absolute like CSS and styling Wiz he's the guy who made Styx if you're not familiar and is the only person to talk on Tailwind in a way that I can actually learn from people hated how limited CSS was they didn't hate the idea itself and when CSS became less limited it became more popular web components are the limited option here and the Frameworks are the less limited option there are deficient apis which can be fixed by adding more stuff also a fair point CSS needed more things to be better well components don't need more things they need to be rethought as Leah says here we tend to compare new features and new platform stuff to the current userland practices and their ergonomics often Faire poorly at the start especially when there's no immediately apparent 8020 solution making things possible tends to proceed making them easy that is a fair point like the first priority of the standards committees is to make things that can work at all and then make them easier and better but once the standard is there it's there and it can't be undone so I think if you want to do that type of experimentation Frameworks are the right place not the web platform as she says here web platform features operate under a whole whole different set of requirements and constraints they need to last decades not just until a major release they need to not only cater to the current version of the web platform but anticipate its future evolutions and be compatible with them they need backwards compatibility with the web as it was 20 years ago they need to be compatible with a slew of accessibility and internationalization needs that the userland libraries often ignore at first that's not fair userland libraries have not been ignoring these things for a while and there's plenty of Standards like canvas that are not particularly accessible it's uh yeah and a good point from Nan here web component API breaks a whole bunch of expectations of how HTML and the Dom work not a browser standard yeah it's weird yeah canvases are breaking a lot of the same rules here and we start on web GPU it's really cool but it's chaos that all said most modern Frameworks put a lot of work into things like accessibility and just because tools 15 years ago didn't doesn't mean that this is a fair statement in fact tools like react yell at you when you're not making things accessible tools like spelit do the same I just don't agree with this point anymore last Point she has here though they're developed in a distributed Way by people across many different organizations with different needs and priorities so they're designed by committee which is not necessarily a good thing usually the result is more robust but it takes a lot longer that's why I've often said that web standards are product work on hard mode they include most components of regular product work like collecting user needs designing ergonomic Solutions balancing impact over effort in leading without Authority but with the added constraints of a distributed long-term and compatibility focused development process that would make most PMS pull their hair out in frustration and run screaming totally agree here making web standards is hard as balls I would argue this means you should be pickier about which things you bother going the web standard path with and I don't think web components were a Thing Worth standardizing until way more of this work was done if at all like it they have not played out in a way that I see them as beneficial here's the CSS thing I mentioned before I'm old enough to remember this pattern playing out with CSS itself huge push back when it was introduced in the 9s it was clunky for layouts and it had terrible browser support why fix something that wasn't broken folks cried embarrassingly I was one of the last holdouts I like CSS for styling but I was among the last to switch to floats for layouts tables were just so much more ergonomic the majority resistance lasted until the mid 2000s where it went from this will never work to clearly this was the solution all along almost overnight and the rest as they say is history but the more I thought about it the more I realized as often happens in these kinds of heated debates the truth lies somewhere in the middle having used both several Frameworks and several web components and having authored both web components and even one framework over the course of my PhD both sides do have valid points frankly a framework authors were sold the idea that web components would be a compiled Target for their Frameworks and they'd gotten today's web component apis I understand their frustration worse yet if every time they tried to explain that this sucks as a compile Target they were told no you just don't get it or worse that they should just work harder or they're biased because they're framework authors you'd feel gaslit too yeah damn right web components are still far from being a good compile Target for not all Frameworks for any framework not explicitly built around them that's the one change I'd make here but that's not a prerequisite for them being useful do I need to go back to the thing I just played from Nicole where she said the real web isn't using browser standards they're using Frameworks that are built on the standards anything in the browser that isn't valuable or compatible with Frameworks is a bad browser API at this point it it's sad that web components are a last Bastion of that old era of chrome that are too deep in the weeds to be fixed but let's see what she has to say my hypothesis was that the the nature of elements being so much more primitive meant that web components that were higher order like a card component that mounts a button component an avatar component and all of these other pieces that those components would not compose particularly well apparently with slots you can hack in a lot of these things and the composition is functional I don't like the slot Behavior I like slots to be a property of how component props work like if I want a slot in react I do what I showed before like a slot in react is I have a prop that I've defined and I just put it wherever I want to put it and I love that and there's also a slot built into react by default props children you have this default slot built in and if you want more you can make more with web components you have to use the slot equals and like bind specific named things but it works it's cool that it works but it's not pleasant especially compared to this level of control and it feels like slots are an added feature to hack around the fact that properties and attributes can't really be things other than strings which is obnoxious and Slots are a different way to pass markup because there isn't any other way to do it what a mess anyways so not components are the same there's Project Specific components like a user hover card a survey question a color chart product card and then generic ones like a tab group a button group a pie chart a star rating but then things that overlap like HTML demo or color scale interesting I think the Crux of this debate is that the community has mixed two very different categories of use cases largely because Frameworks do not differentiate between them component has become the Hammer with which to hammer every nail conceptually there are two core categories of components there's generalizable elements that ex HTML can do and can be used in the same way as native HTML elements across a wide range of diverse projects things like tabs rating widgets combo boxes dialogues menus charts Etc another way to think about these is if resources were infinite elements that would make sense as native HTML elements I think that the way people Implement something like a rating widget is unique enough to a project that I wouldn't call that generalizable but I think the thing I'm going to disagree with here is the idea that these should be separated because at what point does your ratings widget go from generic to Project Specific at what point does your combo box go from generalizable to very specific to your implementation the other type of components that Leah is proposing is reactive templating UI models that have Project Specific purposes and are not required to make sense in a different project for example a font Foundry may have a component to demo a font family with child components to demo a font family style but the use of such a component outside of the very Niche font Foundry use case would be very limited I feel like the line is blurry with so many of these things and like the relationship between the parts is like I don't want to have to think about this whenever I'm making a new component is this generic enough that it can be a web component or is it specific enough that I have to make it something else I hate thinking about these separately this is frustrating me enough that I I'm going to read the rich thing cuz I am so curious we may sete Frameworks for non-trivial apps web components make their job easier I feel like Rich Ryan and Evan are clearly articulating that instead of making their jobs easier it's making their jobs harder and it's effectively attacks talking about web components as a building block same as native elements they are talking as I understand them about using them as a compile Target that's not correct the tax largely results from the fact that our Frameworks need to be able to consume web components it's a steady source of nasty edge cases and causes framework code to be larger and slower very true and again this is because what Nan said earlier which is that web components don't follow the existing standards for the Dom they behave differently from how the Dom behaves which means the existing code in the Frameworks can't just work with web components it's taken so long for the react team to get web components to behave at all in react and that's not because they're not putting the effort in it's because it sucks and it's also funny that Matt's point is that the criticisms of web components are criticisms of the HTML and the Dom when web components break our understanding of HTML and Dom but Rich has a great response here that I'm excited to read firstly I reject the premise that pushing the burden onto users is desirable a tax has to be paid it's better for Frameworks to pay it but beyond that it's not just about the fact that web components make the platform so much more complex in so much harder to learn it directly affects users in subtle ways for example if you want to clone some Dom to build a component you can do so with fragment. clone node true right not so fast if the Dom contains a custom element the Clone won't be assigned to the correct class until it's appended to the document and if you set properties in the meantime it won't trigger accessors they'll Shadow the prop type instead which is very bad news it's a real head scratcher of a bug that's fun these little things like when you write Frameworks you just assume you can clone nodes to do things but you can't clone them if they have web components that sucks there are fixes though it turns out that if you use document. import node fragment comma true instead it works correctly not that you'll casually learn that while reading mdn this is the kind of knowledge that is only acquired with a side helping of Battle Scars yeah this is the problem the amount of these little things that you have to learn because web components don't follow the browser standard the way that these developers are used to is a very real problem but there's a catch in import node is roughly 30% slower than clone node in our testing that's unacceptable overhead given that most people aren't using custom elements and if they are they're certainly not doing it that often so we opted to pay a different price the compiler adds a flag to the generated code and the flag tells the runtime which to use that's extra code and extra work albe at a minuscule amount that would be unnecessary if we didn't have to think about this nonsense having the bug tax figuring out the solution tax implementing the fix tax documenting the code for our future selves tax adding regression tests tax running those tests on every CI job tax shipping extra code tax doing more work in a hut code path tax and that's just one example there are others the bottom line is that framework authors could ship sooner and could ship leaner and more reliable code where it not for this ill designed primitive with its Myriad of edge cases I Leah you know how much I respect you you know how much I love the way you've challenge me in the way I think to you it's a tax because you're not seeing value I do not like this reply I liked this from the bit that I read here it's always a tax having to change how your framework works because the browser added something new is always a tax fun call it from Rich earlier if I could build someone for the time I've spent working around web components in spelt I'd be a rich man the tax is real yeah it's just one of those things where the cost is really high and if he saw the value in it the tax building around it is still real and great question from Ryan chat whose onus is it to show the value apparently it's ours which sucks cuz I haven't seen it maybe it's intercom onus to show yeah Ryan you're on vacation I hope that you're you're choosing to be here you don't feel pressured to be here thank you for showing up but like you missed the rant I went on about how okay I was with you not being here and proud I am that your article is good enough to stand by itself like you can orchestrate an entire drama unintentionally without even being around for it now which is awesome like your article is so good that the whole thing is just playing itself out now one more fun call out here from Jenna who I absolutely adore she's one of the core contributors to radic and arguably one of the people most responsible for it existing so you can thank her for something as awesome as Shad Cen so huge shout out to Jenna one of my favorite people in the space feel this so bad if Shadow Dom requires this many new specs to make it support stuff that shadowless Dom can mostly already achieve when do we acknowledge it was perhaps the wrong abstraction and try again so much fire so much fire back to the article of course it's a spectrum few things in life fit neatly into completely distinct categories for example an HTML demo component might be somewhat Niche but would be useful across any site that wants to demo HTML Snippets like a web component Library a documentation site around web Technologies a book teaching how to implement UI patterns Etc but the fact that it's a spectrum does not mean the distinction does not exist I there's a lot of distinctions that exist that I don't think necessarily matter like the dis between gray pants and blue pants is a real distinction but they're both still pants and at some point you have to decide if it matters or not L components primarily benefit the use case of generalizing elements that extend HTML and are still painful to use for reactive templating fundamentally it's about the ratio potential consumers to authors the huge benefit of V components is interoperability you write it once it works forever and you can use it with any framework or none at all here's your tax when you say that it works with every framework it doesn't just magically work with every framework those Frameworks have had to do crazy to make it work and like I would wager at this point that the amount of effort that framework authors have put into making web components work within them is greater than the also admittedly insane amount of effort that was discussed earlier with the product work on hard mode statement yes making web components and making the standard insane amount of work I'm not going to pretend otherwise but you need to stop pretending that it hasn't been as much if not more work for the authors to the same thing and that's what's annoying to me here is everyone had to work really hard for a standard that not very many people were actually asking for so if you're going to claim interoperability is the big win with web components y'all should be the ones contributing to spelt contributing to react contributing to these other things it makes no sense to fragment efforts to re-implement things like tabs or rating widgets separately for each framework specific Silo it is simply duplicated busy work it's funny cuz like I argued against this before knowing this this is the point that she was going to make I said like a ratings widget is absolutely on the line where I'm going to want to do something different with it this is why something like Shaden is beating out stuff like component libraries that already exist with Shaden you're cloning code into your code base so when it comes time to make it more custom you can you own the code with web components you have to put all this work to make it even work in your framework because of the Assumption you might never actually need to modify that component with like Builder io's crazy stuff that they're doing to make it so you can take your react code and Port it to every other framework all of those efforts make the 50 lines of code for a ratings widget being sharable matter a hell of a lot less just it feels like a weird thing to make the framework authors do this much work so a ratings widget could theoretically be shared across projects instead of it being part of the browser standards I just I don't see it the amount of work to Port each of these things is low enough especially now Fair Point from n man it's meant to be a common interface even if it's flawed the proponents of things like that at least exist I can understand why people want a common interface but if that common interface is bad enough that everyone is repeating their stuff and doing all this crazy work to make it work at one point the benefit isn't there and thank you Ryan it's mitosis is the thing that Builder iio made to write your code once and have it work in every framework without web components anyway as a personal anecdote a few weeks ago I found an amazing Json viewer component but I couldn't use it because I don't use react I prefer View and felt to this day I've not found anything comparable for views felt or vanilla JS this kind of fragmentation is sadly an everyday occurrence for most devs let me take a look at this I'm assuming it's on GitHub because I would bet writing this and something like web components would be  miserable like I bet this is a lot of code for this look at all of the code for this has anybody made a web component this big that's open source and not absolutely  miserable to work in once you get to this level of dynamic it feels really hard to make that a web component like if anyone has an example of something this complex that's open source in a web component I would genuinely like to read through it and look at the code but it's hard for me to imagine model viewer from Google so the only example is something Google made and it's still using packages and it's using lit it's still using a framework like you can't build something this large without a framework of some form it's cool that it's a web component so it's reusable but you still need a framework anyways like yeah as for the Json viewer thing it is much harder to write things that complex with web components and even if you do you're going to need to pull in something like lit it's yeah and lit had to be built to make web components like usable and I and my counter here is like on one hand it does suck that this amazing Json viewer can't be used in things that aren't react I mean you can you can mount a small react thing inside of a viewers felt that but just not fun but on the other hand I don't think it's fair to push that developers like them have to learn this other new thing that is significantly more complex with all of these foot guns for the potential of people using it in these other things especially if it means the interop of working inside of react viewers felt is worse if react's being used by 70% of their potential users and writing in a react makes it easier to bind pass client or like children to and do all these other things it is really hard to justify rewriting that or writing something like it in web components instead especially if we get to the point where generating and rewriting this code for viewers felt gets easier due to all the new tools and Ai and that's happening anyways when it comes to Project Specific components the importance of interrupt decreases you typically pick a framework and stick to it across your entire project reusing Project Specific components across different projects is not a major need so the value prop of interop is smaller Additionally the ergonomics of consuming versus authoring web components are vastly different consuming web components is already pretty smooth the apis are largely there to demystify most of the magic of built-in elements and expose it to web components with a few small gaps being actively plugged as we speak that I don't agree with because consuming them in other Frameworks which is how as Nicole established earlier how most websites are being built if you're writing vanilla HTML mounting and consuming a web component is great but the like ability to take a web component and mount it in your react app and pass it properties and have everything work properly that's still not smooth sailing it's far from smooth sailing right now so to say that consuming them is pretty smooth when the way the majority of the web is built makes them quite hard to consume feels it very unfair regardless of that even Leah agrees that authoring web components is miserable especially without a library like lit authoring web components is still painful tedious and with foot guns for generalizable elements this is an acceptable trade-off as their potential consumers are a much larger group than the authors as an extreme example of this nobody complains about the ergonomics of implementing native elements in browsers using C++ or rust but when using components as a templating mechanism authoring ergonomics are crucial since the overlap between consumers and authors is nearly 100% apparently she did a Twitter poll a while back I would love to take a look at that oh look she did the same poll I did earlier I mostly use web components I both make and use components and I don't use web components at all what's interesting here is people who are using web components are also making them which is what I'm I'm guessing she thought wasn't the case apparently most people who are using them also make them which is really interesting also account for the bias of people following Leah in doing her poll especially with only 4 130 votes that is a deep subset of JavaScript devs know that many people who use web components are not aware of it so the motivation was not to gauge adoption but to see if the community has caught on to the distinction between the use cases the fact that over 80% of people who knowingly use web components are also web component authors is indicative of the problem web components are meant to empower folks to do more not to be consumed by expert web developers who can also write them until the number becomes a lot smaller web components will not have reached their full potential that's one of the reasons that I joined the web awesome project I think that it's the right direction for web components encapsulating complexity into beautiful generalizable customizable elements that give people superpowers by extending what HTML can do they can be used by developers to author gorgeous uis designers to do more without having to learn JS or even hobbyists that struggle with both so what's funny I brought this up earlier Shad Cen is a similar goal to make these reusable base pieces that are insanely useful for web developers you have a custom form element that makes dealing with your forms easier you have a hover card that has this fancy card that comes up when you hover things you have a label that works you have much more complex things too like r groups which are obnoxious to do right or select which what came up earlier cu the select component kind of sucks or toasts and sonor and all of these different things for managing how toast appear on your page all of these could be web components and we had an in between there's almost God I can't believe I'm excal drawing this late into a video there's a spectrum here where on one side we have elements I wrote in my code base and on the other side of the spectrum we have base h HTML elements so on side of the spectrum we have like div and button and on the other side we have the that I'm writing for my code base like the components I'll say components here to be more clear and I guess my big issue with this article is it's being described as though these are two different things but these are just two points on the Spectrum General components are more on that side and reusable components that are being built in my framework are closer to here I guess that's the project specific ones but with in the Spectrum there's a lot of different stop points like here I would say we have web components they're as customizable as they're exposed to be but you can't really change the fundamentals of how they work you can't change the logic of a web component when you're consuming it unless you Fork it and make changes to it something else I'd say is similar would be like a material UI and other UI libraries these two are pretty close to the base HTML element thing what we have learned as an ecosystem is if you're not this being close to it kind of sucks and that's why we've moved the other way where we have stuff like Shaden and Shaden looks and operates similarly to material UI where you have all the components you can grab and use but it's in your code base so you can change it however you want so you're not compromising on the ownership the argument for web components is you shouldn't want to own it it is basically an extension of HTML elements on the browser but as soon as it's customizable enough as soon as it's valuable enough as soon as it's complex enough you end up needing to customize it at some point and I think within the Spectrum the place that web components live is a place that not many developers spend a whole lot of time and we see that because we are very quickly moving off of stuff like material UI in favor of stuff like Shaden the whole industry is trending to the right here web components are saying that we should have better Solutions on the left I'm not saying we shouldn't I'm saying you should not expect people who are living over here to put a bunch of time and effort into making this thing that we've already decided isn't that valuable better that's it and since with Shaden you actually as I mentioned like five times now you clone the code into your code base you get the full ownership and customizability so you get the ergonomic benefits of having good reusable pieces and not compromising on the ownership the one catches it's only for react does that kind of suck sure but if it wasn't just for react it have to be written in a way that the ownership model doesn't work for because if I'm a react Dev and I'm using Shaden and it's web components and I need change something about it and I don't know the craziness that it's web component syntax as you've established Leah web components suck to WR then it being in my code base no longer matters it it has forgone all of the potential benefits and could you theoretically add an infinite number of attributes and properties and flags and booleans to the things on the left here so you don't need to customize them perhaps but you will eventually get to the point where you need more customization or something is missing in those pieces and owning it solves that problem also of note there's effort to rewrite Shaden in other Frameworks I know that there's a really far along Shaden spelt project that is rewriting all of the components for spelt it's happening and the reason people are putting the effort into this is we agree this is the right solution solid has an equivalent too they look nearly identical again the point is we agree this is the right solution back to Leah's article quick making it about Frameworks versus web components is a false p Frameworks already use the native HTML elements in their components web components extend what native elements can do and thus make crafting Project Specific components easier across all Frameworks as Rich established this assumes the framework authors have learned all the ways that web components don't follow the rules of what native elements do and have built solutions to all of those which makes this a much more painful paragraph to read knowing that it is missing that core point also the we may still need Frameworks for non-trivial apps but web components make their job easier I would once again cite Nicole's statement earlier where it has been established by the Chrome team that all real teams in projects are using Frameworks now and I don't think we are the ones doing the pitting I really haven't seen examples from like Rich Harris or Ryan carni or any of these anti- web component people saying why would we do that react components are better we have had a discussion about how hard it is to use web components and how it doesn't seem like they're solving a real problem but that is different from saying react is good web component is bad I don't I think I'm probably the closest thing to that and my diagram I just drew is probably the closest thing we will certainly eventually get to the point where web components are more ergonomic to author but first we need to get the lowl foundations right at this point the focus is still on making things possible rather than making them easy last remaining piece of the puzzle are things like reference targets for cross root areas or element internals do type to allow custom elements to become popover targets or submit buttons wait are you telling me that right now you can't have a web component button that is a submit button please tell me that's not true not true okay just making sure thank you chat for clarifying okay Nan say he's unsure which makes me much more skeptical now you know what tiebreaker God I I promise you guys I wouldn't make you look at web component syntax I'm so sorry if this that has attribute form form ID is get attribute form button Shadow root query selector button set attribute form form ID see to manual set the form ID and manually render the type submit on it so apparently according to Deon there has been pushed back to allow for custom elements to be like form elements specifically form Associated for that purpose let's ask Claud about it I use so I hope you guys can understand that yes I don't know all of the different things you can do in web components but the whole point is that they're browser standard why are there 15 apis for everything with them and does it here's the the form Associated button code form Associated is true attach Shadow route put the Styles in button part equals button slot slot button where is the submit bound though is it not oh it's so I mean it's a web comp it requires JS anyways but you're not using type as submit anymore now you're this doore internal. form. request submit I I can't take it in good faith I'm sorry I'm trying do you know how I do this in react function demo form return form input type equals text form save so it formats say I want a c let's say I just want a normal button for submit type equals submit submit and if I want that to be a custom component in react if I have a custom button function custom button turn cut paste done and if I want this to be a custom button that isn't always type submit I can do that too props type string I could be more specific with the type if I wanted to type equals props type type equals submit I'll at that that's going to be say it has to be one of these cool since this is typescript and typescript is smart yoink well let's do that cool now I can pass any of the button element types is that easy there we go perhaps eventually components will even become viable for reactive templating use cases like the open styleable Shadow Roots proposal declarative elements or Dom Parts all these are some of the early beginnings of that direction in declarative Shadow da Paving the way for SSR among other things then and only then they may make sense as compile Target for Frameworks but as Rich established it's not just the compile Target it's interoperability inside of a framework components are not even the best reuse mechanism for every Project Specific use case for list rendering components or Overkill compared to something like v-4 and by then Frameworks will be doing even more it is by definition that Frameworks are always a step ahead of the web platform not a failing of the web platform as Cory said Frameworks are a test bed for new ideas that may or may not work out they are also how the web is built and I feel like Leah has a fundamental disagreement with the research and effort that Nicole put in which really hurts to know bottom line is web components reduce the number of use cases where we need to reach for a framework but complex large applications will likely still benefit from one so how about we conclude that Frameworks are useful web components are also useful stop fighting and go make awesome using whatever tool we find most productive once this article ends with we are sorry that this has made authoring Frameworks much harder and that the interrupt story has felt more like gaslighting and a lie then I would be much happier with this article but I feel like it fundamentally ignored the pain that these framework authors have gone through it tried to acknowledge how they felt gaset but it missed almost everything else here and that's sad I can't talk about this stuff anymore peace nerds




## Why Everyone Loves Zustand - 20240916
zustand my favorite library to mispronounce everyone else's favorite library to use for State Management in react before we go into why we're talking about it today I need to settle this pronunciation thing once and for all because my chat they're mad at me right now if you didn't already know we film a lot of videos live and at this moment they're upset with me I started Googling I found this very fun poll on the react subreddit where it seems like my zustand has successfully pierced the brains of react devs but we need to hear it we need a proper hear the Google pronunciation so for the first time ever y'all get to hear the right way to pronounce zustand on my channel and that is the last time you will ever hear zustan pronounced correctly on my channel because I am never ever saying it that way I don't care with that all settled let's talk about why Zan's a community favorite as soon as I saw this blog post I knew it had to be a video so let's do it by the last monthly post our sample app Teemo was finally ready for some experiments so in this post let's look at zustan to see why has become a favorite in the community to do this I'm going to refactor Teemo to use zustand so that we can see what it's like in practice what is Teemo how much code can that query save oh boy uh yeah I'm not going to read this one live but if you are interested I'll leave the link in the description these posts actually seem very useful and super super practical but I want to figure out what Teo is it has three screens one for logging in and signing in another for viewing and changing time entries and a screen with a timer for creating new time entries now we know what the app is now you guys know there's a great blog post about about tan stack query with it react query I'm sure that one is nuts that it's just showing how much you can delete I had a great convo yesterday with an employee at a popular AI company about how they could use react query to build a way simpler front-end experience and it was mind-blowing for both of us in the process so once again react query is the search Theo react query and you'll find a bunch of my YouTube videos explaining why we're here for zustand sorry zand second and only time you'll ever hear me pronounce it even close to correct so what is zand it's a small State Management library that provides a react HS to manage the state it is based on the flux pattern like Redux but it's similar to how Redux simplified the original flux pattern zustan simplifies it even further for example here's how you would set up a simple store with a count value and an action to increase it import create from zustand use count store create we have the set function here we return an object it has a property count which is starting at zero and then it has increment which is a function that you can call and we give this an inline function definition set and then here set can take a function as well and that function gets called with the current state then we can use that in the response here so it's similar to when you use something like UST State the state updator function can either be called with a bare value or can be called with a function that it will call with the current value super simple API makes it really easy to do stuff like this does have some catches with typescript though and we'll get into those in a little bit to achieve the same result with Redux toolkit you would have had to set up a new slice add the new slice to the root reducer and also set up the creation of the store and its provider if it hasn't already been set up with such stand you can access the count value in the increment action from the generated use count store hook you just call it we called create here set it as this value and now this value is a hook we can use wherever and we get all the values here we use count was just calling count store. count and then we increment it with count store. increment nice and simple since zustand mostly consists of a few react hooks its npm package is only 3.1 kiloby minified which is it's 44 times smaller than the base react package if you know react is quite small but react Dom which is where the bindings exist it's a bit larger it's 13 times smaller than Redux as well which is 40 kiloby minified to be fair Redux toolkit has a bit of additional bloat but it has to because Redux toolkit is the only way to make Redux usable I also like that he's not comparing it to vanilla Redux which is a show he's explicitly comparing to Redux toolkit good call refactoring Teemo to use zand since Teo is already using tanet query only had to rework the user authentication in profile storage to use a stand in the plane react version and the tanet query version this was done using react context refactoring this to zustan took around an hour in many cases it was almost a drop in replacement since I already used a hook to access the underlying context values let's take a look at this it's readable but not quite as readable as I would like so here we have the Teemo common hooks use user and we deleted that and replaced it with use user store nice and simple for a lot of places the tedious part of the refactor was changing the components in the common package I wanted to keep separate copies of Teemo with each of the libraries we took a look at so I set up the repo as a monor repo with each version stored as a separate folder to cut down on the duplicate code I also created a common package to store code that was used by several versions of Teemo sadly some of the components in the common package use react context they won't work with the sustained version of Teemo because I was using zustand instead of react context so I had to refactor these components to be pure and then refactor the previous versions to work with these changes I still kept the components that depended on context in the common package but moved them to a separate folder to show that they were not pure this is a very strange use case to be clear where you have three user experience-wise identical versions of the same app and you're trying to share components between them I find that sharing components between projects in general is kind of rough it's part of why I don't love component libraries and much prefer things like Tailwind where I can Define them myself or things like Shaden where they live in my code base it's pretty important to have your shared components be really really like low-level things so instead of using button your reusable component is button and then you wrap it with the user button that's somewhere in your application code so it doesn't surprise me this was somewhat painful because a lot of these components can't be pure and once you abstract non-pure components and they have expectations about things like which contexts are available falls apart fast so I'm not surprised this was painful but I'm pumped that he continued to push through it and make this work the other thing that stumped me for a moment was handling side effects in zustand it seemed to have the concept of middleware but I couldn't find any docs about how to write our own the docs only had instructions about using the middleware that came with the library why did this matter well since I was using HTTP only cookies to authenticate with the API I had to make a request to the API when the app started to verify whether the user was already logged in I could write an action using zustand to make the request but how could I run it whenever the app started ooh I'm going to share my weird solution to this problem and then I'm going to see how they solved it so what I recommend for these types of things if this is like a fundamental the application experience is based on whether or not this exists I wouldn't put this in the global use user store like this what I would do instead is use a context I know the whole point is we're moving off contexts but zust and contexts are actually quite useful for these cases so what I would have done is I would have created a context for this store and at the top level of the app I would have done with like react query or something the check to figure out if the user it's authenticated or not and then I would pass that to the create store function I would actually require this take a user in as part of its creation and pass it the user once we have it and then render something else entirely if we don't have a user but I would have code here in app at the root that actually figures out if you're authenticated or not and it generates a different state either the logged out State or the rest of the app with the store already instantiated if you're logged in this obviously only works if your store is dependent on that value and you don't want it if the user isn't signed in but I've used this pattern a ton especially in the Ping code base ping by the way is the video product that we built and went through YC with to make it easier for Content creators to do live collaborations there was a lot of complex state in this app around which devices are available so if I go to my room quick here there's a lot of complexity around which devices are available and once they're available which things can we use so the way that I handled this if we go back to the page here that one loading spinner is actually handling a couple different things the first layer is a check to see if you're authenticated to join this call or not then we check do you have the right permissions for devices like does the browser have permission to use video cameras and microphones on our page or not and once all of that is completed then we render the zustand store that actually manages your devices so the zustand store that keeps track of which devices you have and are available in the video and audio tracks they're creating does not get created that store does not exist until all the permissions are established so that's how I've solved this problem I actually find that nested zustan stores like that where they are created conditionally based on other things being met helps you escape from having to do a more complex State machine with all these different potentials the idea of a state machine that only exists when you are ready for it to might feel weird especially if you're treating it like a global but if you don't treat it like a global you're just using it as an API for defining what can be accessed where I found it was actually quite pleasant but now I'm curious how this author handles the problem and thank you agor for the shout out for paying it's both really cool as like a user of it but also with such a crazy expor ation of different things you can do in react and it definitely leveled up my react skills massively oh and in case this wasn't clear a zustan context means that this store is available in any children components so if you use this at a lower level like in the player in ping you can't access that store from above that component but you can from there and Below which I found to be a pretty nice way to manage these things in a lot of cases so there you go now you hopefully understand why these things work this way back to this the first solution that came to my mind was to create a custom wrapper component that had use effect hook to run the action but use effect hooks are evil and I try to avoid them as much as I can yeah I don't love this but then I realized we can interact with the zustand store outside of react so we can run the action immediately after the store is declared another plus of this approach is that the API request is only made once during development if we use the use effect hook instead like the previous version of Teemo the request would be made twice since react triggers use effect hooks twice when react strict mode is enabled during Dev yep I got into a long back and forth of Dan abov back in the day about this specifically because of the nature of nested uh stores and triggering specific events in this case connecting to a call I'm going to do the thing I never should do and actually look for the source code for this so here is how we handle the connection to your chat room in ping because in ping we have a little chat I should probably reopen that so in ping we have the little chat here where I can send messages it also keeps track of who's in the call which requests exist for people to join the call and a bunch of other random things like that that is handled through a service that I do not recommend called a uh I'm scared to say more because I legitimately think they might sue me they are one of the most toxic businesses I've ever worked with and I'm sure I'm going to get emails just for saying that much here anyways the room manager context provider here is a component that gets mounted when we know you're allowed in the room so we now know that you're authenticated to join that's part of the props that come in here I then use traditional react state to create a real-time store which is again A's way of connecting through via websocket to their store by default I don't actually instantiate it though because I have a use effect here which I use to create the realtime zustand store and then I set store to new store and now I have this store here in state and then I have a cleanup here that handles all of the different things you have to do to leave Ena because there is no one leave Ena you have to do like 15 things and then I have a really nasty stringify to make sure that we only rerun when the config changes even though some of the keys in this are objects that might break this obnoxious but by far the easiest way to handle that don't do this don't ever do this it works but don't do it and then we return the real-time manager provider and the store for it is created using realtime store so what is this create realtime zustand store thing that's where the interesting stuff happens as somebody in chat was hinting at earlier you don't actually need to do this stuff in react and what was there is just how it's bound to react but the vast majority of the logic in particular where the state changes occur all happen happens outside of react in this file right here so in here we have a couple types we have the user presence data which keeps track of what the presence info which is which users are here and what devices do they have available we have the room manager store which has the abley client the public channels the presence channels which are like who is here and then the private channels which is something that I actually don't know how much we're oh it's for embeds or some things can't connect to those which is embeds but that's for private data messages things like that I have the provider in the store coming from the D in create context helper the realtime store config so this is the stuff that's specific to this store's existence we have the slug which is what it's connecting to connect private Channel which is should we connect the private Channel or not publish presentence which is do we publish the present state or not and do we use the embed process for authentication which is a different way of authenticating this is the stuff you pass in when you're instantiating the store then we have the create realtime zustand store helper function that I wrote it takes in that config it creates the able client it connects to the public Channel basically on the slug that we passed it attaches it then binds the analytics events it then catches uh if there's any errors and we were obsessed with analytics because a was breaking constantly and they were gaslighting us Non-Stop about it so we over logged and analyzed everything here so I could give them logs proving that their service was broken here we have public channel.on failed again obsessive logging because they don't give anyone way to know when it's broken I have the private Channel which is conditionally connected not if it's not so here we set let if we're supposed to connect we connect bind all of these things same with presents and here's where things get interesting we create the store and you'd think I would just return that right but that's where things get more fun if we keep scrolling I actually bind a bunch of things to the stuff that we created here because we created the store with all of these values but I also want to keep track of presence data I also want to know what messages were sent I have a lot of other things that I want that are not being handled here and I do that below because this store is an object that can interfaced with you don't just have to call this in react with a hook I call it down here with a store. set state so without even touching react at all I have a bunch of logic here that updates the store and updates the values in the store just by creating it because in this Creator helper function I bind all of these things after the creation occurs this isn't the only place we do this with ping we also do this for our video provider Agora similar pattern here where we instantiate the used state uh for the Agora store I use this create Agora call store helper set that to State and then we have the cleanup for if you leave or unmount the component we call the internal zust Gore provider we pass it the created store and then we can render our children and all of those will have access to this store and again if we go look at the logic here hop into store you'll see it's very similar Gore client create simple Goro client store vanilla create set and we return the Goro client call State the participants volume map all of these additional things but again afterwards where things get interesting I actually bind all the Agora listeners that keep the state up to date so here I new store. set State whenever new participants come in I just do this by looking at the vanilla client Because by the way the Agora client doesn't reliably let you know who is or isn't connected you have to ask it who's currently connected so I set up this helper to update the current connected participants and then I have all of the different events where a user joins or leaves bound to call this function so that the state machine gets updated when any of these events occur then I handle volume the volume handler was so hard because doing this in a way that didn't cause non-stop updates that made everything update constantly that was a bit painful but I have that here because we wanted to debounce and do whatever we could to keep track of those volume levels in a way that didn't suck and then the volume indicator is what triggers those updates now we have the connection State changed which if you're banned we will set the state to double join cuz that's the only time that uid ban occurred with the way we had things set up initially and that would set this specific State and then leave in those cases and then we return the store A bit chaotic but the value of this pattern is that I can do all of the different things that this client does in this case Agora I can set those all to update our state directly without having to do that with effects and react this all exists externally in vanilla JS and then zustand makes it really easy to consume this stuff within react so it basically Al lets us make this store do all of these updates write the new store. setstate calls in here and now I can reuse this code in other places other Frameworks wherever else but importantly this code still works in react because I can now call this as a hook so that's how we solve the problem and that's also quite different from using the use effect to update the store so the difference to be very clear is that in this example the user store always exists no matter what the user store exists and then these conditions are triggered to update the store to the state that the user wants it in what I did instead is the store is only created once we know this so if we have to connect via able if we have to authenticate the user we do any of those other things we do that then we use the results to determine if and how we should create the store so let's see how he handles it it's interesting how getting used to the react way leads you to overlook simpler Solutions in plain JS to the same problem it's actually a funny quote with what I just showed so here uh yeah we have the instantiation for the store and then just call use user store.get state. fetch user Yep this is basically what I'm doing just slightly higher level my impressions of zustand after refactoring Teemo to use zustand I have to say that I really like its generated hooks they're easy to get started with and they can easily be fine-tuned to prevent renders this makes it a perfect fit for managing state that has to be shared across several parts of a react app oh boy you found some good context let's watch this one I'm curious now the volume working oh God pre mustache Theo so ugly why did you guys ever let me look like that I'm sure y'all are having a lot of fun on Twitter making fun of Brin our old co-founder for the doesn't listen to Nickelback good days Classics good find ones in chat if I looked like that when you first started watching my content want to see some ones for the pre mustache crew before my videos were clickable that's a lot of y'all zeros if you came post mustache so I have that for comparison new today so zero yeah you're you're definitely post mustache if you're showing up today Zero by a month damn you were right on the line cool to see always interesting to see when and how people showed up here it was overdue hair cut no mustache the oh you were early early for those who aren't familiar plan here's OG needed a haircut badly but was too busy Theo back in the day this was even pryc if I recall yeah YC started in January of 2022 so this was so early so early anyways speaking of early I want to show some stuff in Dogecoin simulator because it's touched on here with these selects but I just want to show it in my own code base this is a dumb app I made during the Dogecoin Rush way back it's on GitHub and I want to show some fun things that I did in here so I have my game engine and this game engine is entirely built in Z stand and the game engine is pretty aggressive because things are updating constantly there's a tick that's firing multiple times a second and that triggers a bunch of other stuff to change like when I buy numbers go up and down there's a lot of things going on in this project that cause it to update State all over the place so I had to be pretty careful about where state does and doesn't get updated here's where I create the default State instance here's where I actually load it from Storage I save this all in local store and I have to abuse combine which is the only way to make zustand type safe at the moment to do a bunch of crazy here in order to create all of the updaters and states that actually cause this game to behave the way it's supposed to but what I want to showcase is the actual hooks that I consume things with I need to show how the selectors work first though so let's start there so see all of these used game store hooks your immediate thoughts probably why why not just call use game store and access all the keys off It Well by doing it this way I have selected just this state so if I was to delete all the other hooks here and just have this used game store where I grab state. USD this component will only update when USD changes if I just called use gam store then this component will rerun when anything inside of the game store changes and since we're selecting like this we're telling zustand hey quickly before you update my component get this key out of the object and check if that changed the diff isn't happening on the entirety of game store the diff is happening on the resulting selector here which is what was cool about the thing I was just showing with the um game engine if I go back there yeah not only can you select this way but you can also calculate things and do additional math and work here and as long as what you return here is representative of if an update should occur or not because it's different from the previous value if it's different it will trigger an update if it's the same it won't which is super super handy for just dumping a bunch of in state like I did here there is so much stuff going on in the store but now you only have to access and Trigger updates on the parts that you want to go back to the article I'm sure he's about to cover what I just showed here yeah we have the count store and then we have cons count use count store State state. count so this will trigger when the count changes if we go back to how this store was defined up here we have two things count which is a value that changes and increment which is a function that theoretically shouldn't change so if you have a button component for increment that doesn't know the count it shouldn't update when the count changes and you can be sure of that very easily by making the increment call to use count store but we actually select the increment key and since we did this this will never trigger a rerender because the function never changes I also like how zustand tackles async operations is just calling set with the result then the action can be run in a synchronous context no middleware no promise chains this is what I was showing before with all of our Agora Anda stuff where there a lot of that was promises and then on the dot thens we would trigger whatever behaviors we wanted to so we have this fetch user we try con users await get user then we set the value if there's an error then we set it to the error state so the biggest benefit of switching away from react context the biggest issue with using context to share State across several components is that any change to the state will cause all subscribed channels to render moreover changing the context value also causes child components within the context provider to render since the context provider usually wraps the entire app the entire app ends up rendering Teemo used to have this problem in the profile screen where saving the user details would cause the entire app to render you could memorize to get out of that I almost want to read the source code oh he called it out here you can solve this with memorization in multiple contexts but it's tedious but by using a state management Library like zustand you can avoid these issues more easily zustand doesn't require you to wrap the entire app with a provider component or Hawk and it sends updates directly through the to the generated hooks so the entire app doesn't render when the state changes since you can also subscribe to specific State values and actions with usand you can also make components render only when the state relevant to them changes you know what I want to prove that this isn't that big a deal does he have source code somewhere he does okay react Source app.jsx okay I found the problem almost certainly but let's confirm where is that coming from is the user context provider one of the common packages it is okay common context user context provider uh ding ding ding this should be memorized the problem is that the children are going to re rerun because there is no indication that this can be treated statically if you were to memorize children before rendering it you could avoid almost all of the reenders here I'm pretty certain yeah I'm almost positive that would fix this do I clone it to prove that do we make this already too long video far too much longer so I'm going to save this yeah see that the whole page update that's the thing I think we can nuke let's go straight in to test that so my hypothesis is that this isn't memorized proper only one way to find out though which is to go all the way up here to the user context provider con memo children and do that not sure if it's smart enough to handle the hot reloading for that so I'm going to root Force resetting of those now I'm curious Tes Theo V2 I'll change this to L save it's still updating the whole thing really a no it's not was it before though should probably have confirmed that in the console ahead of time user context provider children H it's not interesting so what is causing everything to render then how is it being consumed if we go to that's common where I need to be is the profile component oh that's why con user is use user that would do it yeah we only want clear user from this so that's the issue is that we're selecting way more than we want from this hook and that triggers updates that we don't actually want to have happen that would not be fun to optimize for I Now understand the pain yeah if this context is being used for all of these values as well as for exposing that specific function that sucks ass yeah never mind why did I ever doubt the author clearly they have a case here that sucks yeah it's basically impossible with context to select just one thing so in this case what we want isn't the whole use user we just want clear user which is a function that theoretically should never change but sadly because use user is a context that provides all of these other things in it it has the user object it has the authentication state it has additional values and all of this is part of what this provider is giving us that's why this sucks theoretically we could wrap this with another provider that's like user context actions provider that is just the functions which should never change and then in here we could just consume that and be good do I do the miserable thing of that it feels hellish but I think I can do it relatively quick source packages react Source yeah we have it here as well with customize user we have it at the top of profile which is where we just were we have it in change password as well yeah I see the problem now so the reason zustan is super useful for something like this is if this was like a used store then I could have store store do user. clear user and now I could select just the clear user function and ignore everything else which keeps it from having to update when it shouldn't but this example seems to be a lot more ironed out than I was initially thinking there when I had my initial push back yeah the suain version when you save only updates specific parts of the page instead of forcing the whole profile to reender because if we look at the code I'll just go to the same place in the zustand version zustand Source routes profile. jsx use user store State state. clear user and now we just have the clear user function no additional stuff has to be done we have to create a new function here we can just pass that to button and it works dope actually a really good example nice having the three different solutions in one repo to compare if you're curious about the difference between vanilla react react plus react query and zustand you have a great place to look to compare all of those sus thing it's a thumbs up from me it's a lightweight package that is well thought out and approachable especially if you're familiar with Redux and the flux and Redux pattern this is probably why the community's fallen in love with it what if you hate the flux pattern and anything else like it the next month's post let's take a look at the atomic patterns for managing state which also come from Facebook and meta as well as Jodi which is taking over from recoil as the DEA facto library for this pattern fun fact both Jodi and zust stand are part of the point Manders Collective pmn DRS they are legends the amount of cool they build is unbelievable this is where react 3 fiber came from where react spring and use gesture came from where a ton of crazy 3D stuff came from it's also zustand and Jodi as well great stuff yeah one of the best sources of good react Solutions and also a great resource for General full stack typescript problem solving awesome project awesome crew awesome stuff that they're building any opportunity I get to shout them out I take also my vs code theme which I get asked about all the time if you're this late into the video I'll let you know the secret this is the PO Anders theme yeah this was great shout out to veros for writing this it is a great post and I will definitely be here to see the Jodi one that you update in the future check out his blog if you want to hear more about the uh if you want to hear more about the react context version as well as the react query version the links are all in the description check out the blog and until next time peace Nars




## Why GitHub Won - 20240819
I think it's fair to say that GitHub won gitlab exists and I'm thankful that it does there's a couple other competitors here and there and way back when sourceforge was a thing but what led to GitHub winning how is it that it's become as dominant as it is and how did they actually manage to Dethrone something as popular as sourceforge this is a story I've wanted to tell for a while and thankfully Channel sponsor graphite took the time to do the Deep dive and then decided to pay me to talk about it so this is a sponsored video although we're not really talking about the sponsor that much because again the focus is on GitHub and how they replace Source Forge that said I'll be sure to plug graphite and why I like them at some point in the video so keep an eye out for that definitely worth checking out the product I do love it we're not here for that we're here for GitHub and I promise you graphite is within the most experienced people to talk about this thing so without further Ado how GitHub replace Source Forge as the dominant code hosting platform thank you again to Greg for this Greg also wrote the why Facebook uses git article that I loved so much way back and just to make sure it's clear graphite isn't an alter alternative to GitHub it's actually built on top of GitHub so you're just signing into it and using the repos you already have so it's not like you have to leave everything else behind it's not like your whole team has to make this big move over to graphite it's a thing you can absolutely incrementally adopt and try out for some projects not all of them but I yeah I love it highly recommend it you should consider checking it out I've been writing code since high school I have a faint memory of creating an Android game with friends using tortoise SVN to share code godamn it tortoise that's a name I have not heard heard in a very long time they're still updating it good for them but Jesus at College I learned to clone GitHub repos to access computer science homework assignments later during internships I joined the ranks using GitHub to review and merge poll requests most developers who came to professional age during the last decade probably had a similar experience to me I certainly am in that group GitHub is synonymous with source code and code changes whether with open source projects or on private companies and I will say I'm a bit terrified that people seem to mistake G in GitHub now I've absolutely notic this it's almost as bad as like Java and JavaScript for new devs where a new Dev will be working on web stuff and they'll be like yeah I'm learning Java no you're not you're learning JavaScript and people will be like yeah I'm learning how I'm learning GitHub I use it all the time it's like do you mean git or GitHub and I've also seen people who thought they knew git that use GitHub to like drag and drop things in the browser and don't actually use git at all so yeah git and GitHub are different and people should learn them separately don't but that's just reality and the popularity of GitHub as a tool has allowed them to largely take the git brand which is kind of hilarious when you remember that git was made by lonus talts who made Linux and GitHub is owned by Microsoft who makes windows all fun ironies aside let's dive in one more fun thing here on the open source or private company teams I was so surprised when I got to Twitch knowing twitch was owned by Amazon and knowing Amazon had an absolute mess of a source control system to see that twitch was just using GitHub I had never seen GitHub Enterprise before I had heard it might exist but just not worked at a company with it it was still new enough to the industry back in 2016 that it was mind-blowing to me to see the tool I've been using for all my open source stuff just being available for a company to use too and not having to learn a new thing to use get in the workplace it was awesome it was really cool so yeah you'd be amazed how many companies are just using GitHub Enterprise now it's like I wouldn't say most Dev companies but close to 50% if not more at this point like over 90% of fortun 100 companies use GitHub yeah I guess it is more than half in the end you get the point anyways it's easy to take the GitHub ubiquity for granted but how did things get this way I asked my teammate David how he came to discover GitHub he's who's been coding a decade longer than I have and he's lived through the professional transition this is again what I love so much about Greg he's doing these deep Dives like finding the right person or set of people to talk about these things with in this case it's just in older Dev that older Dev happens to be a big nerd about Version Control but in the article about Facebook stuff he found all the old Facebook employees who made the decisions around not using get there and got a really good history lesson that he could then share with us so once again huge shout out to Greg these articles are so good through the 2000s he recounted using SVN at programming jobs he would download software from Source Forge but considered the UI to be utilitarian and crappy eventually he found himself navigating GitHub more and more often to find docs and download Open Source tools such as rails rails is one of the first big GitHub projects for sure I remember seeing it on GitHub being like wow this is where things are hosted now this is so much less bad this led to him reading up about git and eventually using a get to SVN translator at work get to SVN translator there's there's no better way to to date yourself and also prove you're trying than using a get to SVN converter Jesus Christ but even up until 2010 many companies were still hosting code on SVN and it wasn't until years later that most private organizations migrated fully to get yep David's anecdote only Peak my interest further how did GitHub enter the market what existed before and what Gap did they fill quick note about how cool graphite is and again these articles are only possible because of graphite and also paying me to do it shout out to them we'll talk about stack diffs in a bit we'll get there though I will say graphite has made using GitHub and dealing with Source control significantly better and takes a lot of the fun benefits from other Solutions the world before GitHub 4 years before GitHub was founded in 2004 Linus created git while many folks still use SN git was growing rapidly in popularity as a distributed Version Control System it came with compelling value unlike prior tools like CVS and SVN git users could host entire copies of source code on their own computers without needing to communicate to a centralized server folks could update code even offline as well as share copies with one another without the approval or hosting costs from a centrally managed source and while branching code and SVN require dup duplicating the entire repository creating branches in git was fast and cheap I don't think a lot of y'all understand just how painful SVN was the idea of like sharing a repo with people where anyone could change anything at any time not fun in the slightest you had to like check out individual files instead of making a branch and then merging it later not fun Emily said that she discovered git in 2007 and spent an hour selling her boss on why they should switch to immediately that's huge these are the right types of initiatives by the way like if you're at a company that has some things that are behind like let's say you're just starting to explore typescript let's say you're writing all of your fetch calls yourself using crappy use effects even as of Junior Dev you can move your company over to something like react query or help with the efforts to move to typescript or update your react version all those types of things help me level up a ton when I was early at twitch especially when I was getting into the web dev stuff because I did not start twitch as a webd at all but those types of efforts to like convince the team to try the new thing and then pushing like having just the energy and inertia you bring as a new Dev is super underated in these types of stories are what it's really good for as one can imagine these improvements led to an explosion of creative development in the open source Community git was custombuilt for distributed and democratized development and it spread virally despite its advantages however git was slower to catch on in corporate code bases which remained reasonably well served by private centrally managed s SPN servers with Legacy workflows skip forward four years to 2008 open source projects like rails were following Linux and they were starting to adopt git private organizations continued using SVN and perforce servers to centrally manage source code open source software was distributed primarily on Source Forge later Google code or rarly Alternatives like personally hosted servers God Google code things I would prefer to never have to think about again Source Forge despite its dominance left much to be desired for one the site didn't offer git support until 2009 over a year after GitHub was created and it quickly had climbed to 100,000 users at that point 100K users doesn't sound like much now especially when consider that roughly a million people watch my channel every month but in 2009 100K people on GitHub was nuts and that's why back in the day having a th000 stars on GitHub was unbelievable but the difference is ran deeper than the tech today when we think of online code hosting we think of a website that you can visit to browse the code look at issues and contributors all seamlessly that was not the source Forge experience to be fair it still isn't the sourceforge experience but at the time it wasn't either rather it and Alternatives like Google code focused on software distribution to end users not code collaboration Yep this tweet broke me there's been a couple posts like this I've seen them here and there I'm sorry I have to say this but GitHub needs a big red download button I'm not throwing on some programming socks and looking through the change log I need the thing now so I can move on with life do you know how easy it is to download something on GitHub here's one my favorite examples lossless cut which I use heavily scroll down click releases any of these buttons will do it click that click that or that any of these three bring you to releas pieces and now I have all of the things I might want to download if you're not a coder this might be a little bit harder like the one painful thing here is since there's a show all the windows option isn't visible until you click that and then the windows version is available not the biggest deal but as this article has made it very clear as it should github's for devs Source Forge was for end users not for collaborating with code github's for developers to collaborate the one thing I really wish they would do is give an option in a repo to put the readme up higher because this repo has all of these top level files and you have to scroll quite a bit before you can even get to the read me you to scroll a bit more because of how it's formatted before you learn anything about how to install thankfully this app's actually in the Mac App Store in the Microsoft store for the dumb asses that don't know how to find the button but for everyone else yeah just learn GitHub it's not that hard but yes github's optimization for devs meant that they won all the devs and they won them very very quickly Source Forge lost all the devs because again Source Forge wasn't building for devs they were buing building a place to put your stuff as a Dev when it was done GitHub was so much better for devs that they just won as this article says they solved half the puzzle by aggregating the distribution of Open Source projects but they offered little in the form of comments code browsing change reviews and other modern table Stakes features it gets worse though creating and managing repos and Source Forge was painful for one the site required an application and a human approval to create a new repo furthermore private repos were never supported meaning the site was never useful for Clos Source hosting leaving comments and issues on projects was unintuitive and forking was an uncommon practice imagine an open source platform that doesn't really support forking if you wanted to contribute to a project the most common way was to generate a patch and then send it over the Project's mailing server rather than forking it and opening a poll request back to the project how insane is that the best way to get changes in a repo was to generate a patch file and then email them about it things have improved so much you new devs don't know how bad things were learning about Source Forge 20 years later I'm struck by how similar it sounds to the current Apple App Store in that light the Gap in the market that GitHub could fill is much clearer yes s Source Forge was so focused on making it easier for a non-ev to install someone else's open source thing that it sucked for devs but they were much more leaning the App Store side of things for sure the incumbents sourceforge and Google code check out Source forge's landing page from back in 20 an eight I want to take a look at this this is going to hurt me it's going to hurt so deep that's it that's all load that's fine I love the crappy gradient on the title bars and like the mirroring there that like reflection effect everything had it back in the day this is nostalgic as  oh oh the good old days honestly like the biggest source Forge selling point at the time is that it was free and nothing else was they made it free with ads but you get the idea yeah what do we no when we look at it proud claims about being the largest open source Focus site on the web download numbers and highlighted projects new software version releases even an advertisement on the right column but it has no mention of git no focus on user profiles and no private repost the focus is on distribution not collaboration yep see all this it's just trying to show off the download button primarily examples of a repo and Source Forge this is an example of repo and Source Forge notice how the main call to action is the download button rather than a clone button I will say on GitHub like how often are you in a repo and you actually click the fork button here I feel like that's relatively uncommon and having that be a higher level thing than actually downloading the code or using the project feels kind of weird to me I understand why but the the hierarchy of UI in GitHub is kind of a mess also like the watch button why is that right there who the actually clicks this button this Revo has 37,000 stars and one of the top actions here has only been used 13 times gib's a weird platform man it's still so much better than Source Forge but github's UI feels like it needs to be rethought but people are scared too because it's so established now but man the ux on GitHub is so dated but even then like when you see how dated Source forges it makes sense people saying they don't even know what watch does like yeah that that's the issue no one actually uses those things but it's right there anyways code.google.com was incrementally better than Source Forge the site focused on making it easy to host code and documentation as well all for free it leveraged Google's great search Acumen for Discovery and offered thoughtful documentation for devs looking to learn but critically it lacked social and collaborative features that would later prove to be super powerful for open source projects that's things like issues things like poll requests all these features like the the polar request workflow we know today was largely invented by GitHub as an alternative to emailing diffs lastly while it launched with SVN support Google code didn't add support for gith hosting until 2011 complete with a sassy titled wired article Google code finally adds git support it's been a long time but Google codes finally added support for the wildly popular Git Version Control yep it's also funny because Android was all built on top of git and Google didn't support it for a while so they couldn't put Android on Google code good times good times but now to the invention of GitHub thing we're all here for one evening in 2008 Tom Preston Werner and Chris wstra met for a drink at an SF sports bar after a rails Meetup yes GitHub came from the rails Community like hardcore and yes rails existed before GitHub did and it's all built on Ruby on Rails the rails Community was starting to use G more and more but there was no Central website like Source Forge for hosting get repos moreover social networks were clearly taking off but no such social network existed for devs like them who are working on open source projects you have no idea how much time we need to spend in crappy IRC chat rooms at the time it was rough git had made collaborative software development much easier than it ever had been before and sites like Source Forge helped distribute version releases but no site served as a home for collaboration what if anyone could host source code discuss issues and request maintainers to pull in Fork changes all backed with profile pages and comment feeds like Facebook this might sound silly but you know how revolutionary it was to have a profile picture and a thing somebody could click to see what other stuff you work on that was not a thing at all at the time and it was a massive change to know if the person making contribution is even worth considering or not when you have big important projects oh night and day the St to be GitHub co-founders began hacking on the first version of GitHub as a weekend project they developed the Bare Bones of GitHub obviously they used rails they did over the weekend until it was complete enough to work at Chris's day job throughout daily dog fooding they worked out the Kinks and fixed any blocking feature gaps this's a quote from Chris GitHub the company had sort of sprung up from the side project so we never had any big Vision or dreams or aspirations we just wanted to work on something cool they succeeded dhh was one of the first profiles on GitHub this is such a crazy github's brand was social coding is funny when you think about it now but at the time made perfect sense the Ruby on Rails Creator was also an early user of GitHub helping to Skyrocket the site's early popularity this is the beautiful GitHub site back in 2008 oh man I love that get repository hosting no longer a pain in the ass how many billions of dollars did they got bought for $7.5 billion 10 years later they went from no longer a pain in the ass as their like subtitle to $7.5 billion in 10 years not bad if I do say so myself Wait no that's actually interesting too I forgot it was that late because M like as I said twitch was using GitHub Enterprise when I joined which meant that we were using it before Microsoft owned it which is kind of crazy to think about was that really 2018 yeah that's wild I would have sworn that was longer ago good to know back to the article though cuz finally a code repository that works as well as you do God look at that old GitHub UI oh the news feed the source browser good times they got all these quotes they got the dhh killer apps make or break any platform with GitHub I think the GitHub just scored one what's amazing about GitHub is how it really brings social aspect into play you've probably heard this at least 12 times last week but GitHub is totally badass yep yep it was so much better than anything else that Innovation almost stopped as a result github's original logo included social code hosting as their H1 brand promise which read GitHub repository hosting no longer a pain in the ass yep I love that he's calling out the same things there could be no confusion GitHub launch with two core value ads social networking features and the ability to host a get repo online no other site competed on these terms absolutely project and developer news feed yep you have the news feed you have the new code tab which funny enough doesn't look that different still has the fork and the watch button way too high up don't think they had Stars yet though yeah this is pre- Stars the source code browser for easily viewing your code at any version and on any brancher tag this was revolutionary being able to look at different branches on a project seeing how others are working on different things and looking at the G history and all of that inside of the browser was actually revolutionary public Dev profiles you can see what other devs are working on and how many commits they've made here's all those quotes there too and anyways the rapid growth because bed GitHub blow up it happened fast the fact that I keep accidentally saying GitHub when I read git says everything yeah you're not wrong after dog voting the MVP the GitHub co-founders launched free beta to friends for hosting public repos github's growth in the open source Community was explosive demonstrating a great product Market fit it was quickly adopted and en forced by the rails project meaning anyone wanting to use Ruby on Rails had to interact with GitHub that's how folks like my teammate David first learned about GitHub as well as git in its first year GitHub grew to 46,000 public repos the next year it had 990,000 repos in 100K users and then in the third year the number was over a million repos and by 2011 GitHub had surpassed Source Forge and Google code in scale pretty crazy to do that in 3 years but also crazy to think that even as early as 2010 those other Solutions were still that much more popular and it took until 2011 before GitHub was the obvious winner I would have guessed it was a little quicker than that but I'll checks out first first 12 months was a million of Revenue the next year was 3 million and then 9 million that 3x in every year is kind of nuts despite the rapid early growth the three founders remained Frugal and bootstrapped they worked to generate Revenue quickly rather than focusing on ads like Source Forge had or Enterprise sales like perforce did the GitHub Founders quickly began selling individual tier subscriptions for hosting private repos who remembers this who in chat I want to see ones in chat for people who were paying the five bucks a month for private repos on GitHub I should be seeing a lot of ones drop in a second here or I'm going to feel real old not as many as I was hoping enough that I feel a little better but back in the day before the Microsoft acquisition you had to pay to be a GitHub Pro user to have private repos you had to spend money or be a student and get like the free thing for it to have private repos and then GitHub got bought by Microsoft and all of a sudden they let everything be free they killed that because they didn't need the money anymore but it was crazy to think like you couldn't make a private repo without spending money before and people yeah people would use bit bucket instead just to have private repost which is crazy multiple people have said that absolutely nuts the model was easy to understand selfs serve and somewhat original in the space compared to other hosting products and social network sites not only did Google code and Source Forge not host git repos but they also had no option for private code hosting at all outside of GitHub the only option for private repository hosting was running a personally managed server do you know how revolutionary this was to have a way to have a private GitHub repository just a a place that is your source code that you're working on with other people having git is your way of collaborating without having to give the code out for free no one had that at the time and it was five bucks a month to do things the right business way having all of your stuff locked down nothing else like it had existed before and then it started to take over in Enterprise as well because the DX was just so much better Beyond quick revenue from subscriptions the GitHub co-founders found alternative ways of making and saving money they experimented with alternative revenue streams like oneoff ads spots merch store get training services and even a jobs board to keep business costs as low as they could they partnered with engine yard and then later Rackspace offering footer advertising in return for free hosting the free hosting for a footer is the classic still got that to this day with the power by versell at the bottom of the crate T3 stack site hosting provided by engineer love that highres jpeg there in 2009 GitHub launched a self-hosted version that enabled larger Enterprises to run GitHub I did not know they had that the second year they existed that was real early in 2009 offer self-hosting Jesus instead of using SBN servers or products like perforce Engineers could use their new found git tooling for both open source as well as closed Source Dev a GitHub plan for organizations and teams launched in 2010 further pushing into the private market for code hosting and change collaboration and by 2011 they had rebranded GitHub fi into a formal Enterprise server product I've never seen the name GitHub fi before I just can't stop think of Google fi that's so confusing yeah from Chris our GitHub Enterprise product was created to help us spread GitHub to more people so whether you're stuck behind a firewall or you have full access to the web we want to make sure GitHub works for you makes sense obviously also Enterprises give you a lot more money by innovating on traditional code hosting business models GitHub earned enough money to scale its team and iterate on the product experience further than any previous product that's another big thing because they had this early advantage and they had the small team and they were using modern tools like rails to build I know modern tools like rails sounds crazy now but at the time it was even crazier rails their small team their actual income sources and their lack of Reliance on things like ads let them iterate and make massive changes way quicker than anybody else since then I think that's changed and somebody else could meaningfully disrupt GitHub but it would take a lot of effort to do it back to the article but the Deep Revenue focus in bootstrap growth wasn't just a choice VC investment wasn't an option for the co-founders up until 2010 companies making developer tools failed to attract any significant investment that's a crazy thought because right now Dev tools are the thing that rise but at the time Dev tools didn't make money as far as VCS cared so they would not be able to raise anything at all even though the tools companies were starting to see exits such as the 2013 Facebook acquisition of pars the maker of tools for mobile apps the reported 80 million was considered on the low side for some developer tools would always remain a venture capital Dead Zone that's just so wild to read now so wild it took investment traction from Heroku atlassian strip twilio and Sun grid help open up the market only after 6 years to GitHub rais investment from a bold Anderson Horowitz $100 million for was marketed as the largest series a ever got $100 million being the largest series a ever is so crazy things have changed so much so much wild but who didn't adopt GitHub because I still to this day certainly see Source Forge links here and there Google never adopted GitHub internally throughout the 2000s they used perforce and later developed a custom version control system named Piper not only did Google have uniquely Advanced Version Control tooling but to my knowledge they also invented web-based code reviews their early codeview dashboard from 2004 took inspiration from Gmail and it set a gold standard for corporate software development workflows they had no immediate need for get GitHub I haven't seen this uh that sound sorry this is a talk from 2004 what is code review benefits of code review this is so wild do they have pictures of what this UI looks like I really want to see it that's nuts that's so crazy it looks so much like Gmail that's hilarious a little bit of a quick history lesson Gmail was one of the first big Ajax based web interfaces up until Ajax which is the idea that JavaScript can request more data after the page loaded and do things like a button that interacts and gets more data because before JavaScript could run in the browser but to get data you had to load a new page Ajax meant you could request things like Json or HTML from a server on the page and get changes so you could click a button and have new content come in and one of the first arguably almost certainly the first big Ajax built app was gmail which was crazy because at the time when you used an email on the browser you'd click the button and it would have to load a whole new web page and send you to it and then display that info with Gmail you could click it and it would just open up in line cuz it's only fetching that little bit of additional data and then rendering it with the JavaScript which now is just how websites work but what invented largely by like the Gmail team early early on and it changed How We Do development forever so it's not too surprising to me that they built something for code around the same time using that Tech but it's way crazier to me they never thought to share it because they could have made GitHub years before GitHub but they had it internally and this is a thing I've heard a lot at Google where they solve a problem they have internally and then just never bother sharing that solution and then they'll build other solutions for the public that they don't even use internally kind of nuts Facebook also never adopted GitHub though the Facebook story here is kind of nuts around 2010 Facebook's Evan pricely developed fabricator in 2010 a year before GitHub formally launched their Enterprise self-hosting even if github's offering had been available it's likely Facebook would have still opted to develop their own tooling to better integrate with tailored internal Solutions and to help handle monor repo scales that even raw G struggled to keep up with yeah git did not handle big repos well at all at the time it took a lot of investment from Microsoft to fix that what's more Facebook moved off of git to Mercurial which G have never developed formal support for as it shouldn't have in this story of Facebook using Mercurial is nuts I have a whole video about it if you want to check that out but we're not here to talk about Mercurial we're talking about GitHub it's also important to note the Unicorn companies which if you don't know unicorn is a company that ends up worth a billion dollars one of the first unicorns that matter in the modern Dev world was Airbnb and a lot of companies like them adopted GitHub very early on other notable companies such as Uber and Pinterest self-hosted in Forked fabricator while I'm not certain I suspect those who chose fabricator did so because one it was still the best self- hostable and open source source control service and two they were filled with X facebookers missing their former tool chain Yep this happened a lot a lot gitlab launch in 2011 and counter positioned against GitHub by focusing on being a complete devops platform rather than just social coding this is something gitlab doesn't get enough credit for they really pushed and pioneered on Modern cicd stuff like they were the first place to host your source code that would also run builds integration tests deployments all of those things and that was revolutionary GitHub then tried to clone it built some really cool stuff then got acquired by Microsoft and deprecated most of the cool stuff in favor of boring Azure stuff but that's a long rant for another day let me know if you want to hear that one but yeah as they said here gitlab tagged onto the booming tread devops and leaned heavily on CI and CD to gain market share in some major tech companies including things like Nvidia working on graphite in 2024 I speak with hundreds if not thousands of high-tech engineering teams it is exceedingly rare that I hear about companies that don't use GitHub stackoverflow's 2022 survey claim claims that github's professional market share is only double gitlabs but in practice I'd anecdotally say that 95% of modern tech companies are probably using GitHub and only a handful of those companies are self-hosting the GitHub Enterprise that's actually very interesting that such a small percentage of them are bothering with GitHub Enterprise the remaining few either use gitlab fabricator or Garrett or have custombuilt an in-house code hosting platform far too many people have done that the future of GitHub and code hosting lonus talts the original developer of the git software has highly praised GitHub by stating the hosting of GitHub is excellent they've done a good job at that I think GitHub should be commended enormously for making open- source project hosting so easy however he also sharply critiqued the implementation of github's merging interface stating that quote git comes with a nice poll request generation module but GI have instead decided to replace it with their own totally inferior version as a result I consider GitHub useless for these kinds of things it's fine for hosting but the poll request and online commit editing those are just pure garbage and honestly to this day the code review stuff was revolutionary but it was it's not good GitHub code reviews are still rough it's such a bad UI I actually have a better time reviewing code on my phone than on the GitHub site because the mobile apps are from scratch rewrite so it's a little more functional that said I'm going to take the opportunity to plug graphite graphitees trying to solve those types of problems never wait for a code review again so the magic of graphite is that they've built an abstraction on top of GitHub that makes a lot of things a lot less miserable so if we look here I'm in the T3 open source repo which I have to get on the free open source plan by the way if you're open source or startup they offer graphite for free which is really really nice but man things like code reviews in here are just so much better like the UI doesn't suck it lets you leave comments in these things with these quick buttons it shows you what's actually changed or not changed the view button actually works it's just so much better and also if people have made a bunch of changes on a given thing you have different versions of the same thing and if I want to just compare what's changed from version 3 to six now I'm just comparing version 3 to six instead it's so nice I really like using graphite even if just for the code reviewer but obviously their CLI their way of building things everything else is really nice if you want GitHub to feel a little bit more modern and a little bit less painful graphite's almost certainly the way to do it you got a lot of big companies using it we're using it a bunch too it's it's so nice and man don't get me started on stack diffs you ever had that wonderful issue where you have a PR you're waiting for somebody to merge it and now you're working on another PR based on that one and then that first one merges but the second one's still open and then everything falls apart stack diffs just solve that it makes it so much easier to stack changes on top of changes and then approve them individually or as a set and then have it all merge in once all of it is approved the idea of stacking your changes is somewhere between a commit and a poll request but that new unit that fits between there is is really really nice and if you haven't tried it before it will break your brain for a bit and to really see the benefits you need to use it with a team but if you're on a fast moving team trying to push get to its limits stacking will help a ton and I highly recommend checking out graphite for that end of the sponsor plug back to the article so what's the future of code hosting in Clay's famous book the innovator dilemma clay argues that each Innovative product often start as an integrated solution I would argue that GitHub and gitlab are examples of integrated offerings offering a One-Stop shop for teams looking to manage their source code I would agree but then once the space evolves being the all-in-one is no longer the best way to go to market you need to integrate in what people are expecting and already use like making a new email provider would be miserable if you don't support Gmail in some way making a new Photoshop competitor would be miserable if you don't support Photoshop files like you have to play into the existing standards clay argued that as a market matures Solutions become specialized in modular yep beat me to it pre-read we've already seen this begin to happen in a few areas of social coding things like jira and linear which offer module issue tracking while Jenkins and build kite offer modular CI Solutions GitHub was the original git repo hosting but in time bitbucket AWS code commit and others started to offer the same solution GitHub now offers an integrated merge q but more specialized offerings exist from companies like merfi Aviator trunk and even graphite get maintains their Monopoly over open source code due to a strong Network effect as well as product features like forking form style comments and moderation that lends themselves fantastically to open source development closed Source repos originally adopted GitHub due to their specialization in gith hosting again GitHub was the only option for a closed Source git repo for a long time which is kind of nuts but now obviously that's a common capability it's basically a commodity at this point GitHub social features are nearly useless at private companies where discussions happen over things like slack notion linear and zoom half agree I still think code review is kind of a social feature and is really really nice and if you're a company that also has open source code syncing between linear and GitHub is its own cottage industry now I believe the future involves a bifurcation between Dev tools for open source as well as Dev tools for closed Source interesting so open source and closed Source are going to have different tools in the future interesting hypothesis open source collaboration needs discussions profiles moderation forking and Discovery close Source collaboration needs code changes to be reviewed in hours not days it needs trunk-based workflows merge cues emergency procedures as well as cicd coordination there's overlap in both cases but I believe over time the world will further specialize in different solutions for the different use cases interesting I do not fully agree I think that the needs of open- source devs are so great that they will continue innovating at a rapid pace and even if you made something better for close Source devs right now the open source Community has a high chance of one-upping that quickly on top of that the best close s ource devs the ones that work at companies that have a bunch of private code they also work on open source stuff if a big enough difference between how they work on the closed Source stuff at work and the open source stuff for fun they're just going to be annoyed at the one that they're using at work so that's my one hesitation is the best devs are going to want to use the same tools for both and open source will continue to innovate faster not just because like there's more devs but very importantly those devs have greater needs because they're dealing with much higher throughputs of people and contributions and all these other things we've already seen solutions from Facebook and Google by evolving their Source Control Systems independently from github's open source constraints they've created powerful patterns like Google's PR inbox in Facebook stack diffs man stack diffs are so good I'd like for modularization to progress to a point where every engineer can pick how they'd like to host their source code completely independently of the tools they'd like to use to actually change the said source code we've already seen this in other facets of Dev such as how developers are free to use their preferred IDE or their preferred Cloud hosting provider yet we still all use VSS code and AWS tisk tisk you know what I would bet that VSS code's prance is probably comparable to been professionally coding before GitHub much of the information here is C together from online sources obviously same deal with me the full timeline Source Forge was 99 I was four years old when Source Forge dropped that's nuts CVS and SVN for Version Control pretty popular Linus created git in 2004 github's four years after git was made it took that long for git to have a platform that really made sense for it which is kind of nuts Source fors tried catching up a year later but it was too late especially since GitHub had the self-hosting version the groundwork for Enterprise Facebook developed fabricator the next year gitlab came out a year after that GitHub actually launched Enterprise in 2012 Google code shut down in 2016 again proving that GitHub had won GitHub added actions in 2018 they were doing things like actions before but then when Microsoft bought them they rebuilt actions to basically just be an Azure thing as I mentioned before let me know if that should be a full video and then fabricator announcing they're no longer being actively maintained in 2021 what an article that was a phenomenal read once again huge shout out to Craig my friends over at graphite for making this one possible let me know what you think in the comments and until next time peace nerds




## Why Github Actually Won - 20250322
a couple weeks ago I did a video I was really excited about it was called Why GitHub 1 it was a breakdown of the history of GitHub Source Forge and the other many different source hosting solutions that existed in the early days of Git and GitHub obviously was the winner that said my coverage is based on an article written by people who did not work at GitHub when this all happened they were like me external users that video did pretty well the point where it reached a lot of people including those who worked at GitHub and it's since gotten a response that I think is really important because his response isn't just from some random GitHub employee it's from one of the original founders of GitHub Scott Chaken and he has thoughts and it is only fair that I use my platform to share the things he has had to say and the importance of them and to correct any things I got wrong i have not read this yet i am very excited to i love Scott he is hilarious and thorough and legendary and he's been working recently on GitButler who to be clear is not sponsoring this it's just a product that I've been hearing increasing numbers of great things about it's an alternative way to manage your branches and keep track of the things going on in your code bases seems really cool all the content they've been posting about Git has been unbelievable but they are not sponsoring this video while GitB Butler is not sponsoring this video it does have a sponsor so let's cut to them really quick ai has made writing code much easier but it's also made hiring engineers way harder filtering through the total mess of AI slop in your resume pile to find a good engineer is nearly impossible especially if there isn't a good engineer in that pile in the first place that's why today's sponsor G2I exists they're going to get rid of all of those hiring problems faster than you thought was possible they're a video based platform for hiring but it's so much more than that you write the questions that are important to you and help give them characteristics for what you're looking for and they'll go through their giant pile of over 8,000 vetted engineers that are really really good ask them those questions and send you a video portal where you can go through and see how they feel about things these guys move fast like startup speed if you're a small team looking for your next superstar hire there's no better place to go they'll hire you somebody in days from the start of the interviews to the first PR filed their goal is to make that all happen within 7 days yes one week from interview to actual changes happening in code bases they can only do that because they know hiring well and they have a pool of people who are talented enough to jump in and start making changes immediately while they call themselves a platform they're much more than that they're going to feel like part of your team they'll make a shared Slack channel with you they'll do standups with you every week possibly every day if you need it and they'll do everything it takes to really feel like they're part of your company as you hire so instead of bringing on a crappy hiring manager that's going to spam people on LinkedIn how about you use people that engineers actually like these guys put on React Miami they know how to throw a party that even I will show up to check out G2I today at soyv.link/g2i why GitHub actually won a few days ago a video produced by Theo was posted to his very popular YouTube channel where he reviews an article written by the Graphite team titled "How GitHub replace SourceForge as the dominant code hosting platform." Theo's title was a little more succinct why GitHub 1 okay to be fair I'm pretty sure the original title was very similar if it wasn't directly Why GitHub 1 it was very similar to it they swapped the title at some point but yeah I went with the slightly more clickbaity title and I I slaughtered this thumbnail i'm still so proud of that one anyways being a co-founder of GitHub I found Greg's article and Theo's subsequent commentary fun but figured that it might be interesting to write up my own take on the reasoning behind the rise and dominance of GitHub and perhaps correct a few things that were not quite right from their outside analysis that is I shouldn't care so much about these subtle details but as a as a comms guy like I do communication now for a living this is such a great opener of I liked it i watched it it was fun but figured it might be interesting to give my perspective and only after all of those nice things he specified and perhaps correct a few things that were not quite right that is such a good way of couching the like cuz almost anyone else could have and would have written this as they were wrong about all these things so it's my responsibility to fix them yeah being at the very center of phenomena like this can certainly leave you with blind spots but unlike these youngsters I was actually there hell I wrote a book i have heard incredible things about this book by the way specifically apparently it aged really well too so I might check this out myself anyways here's an insider's take on why GitHub actually won oh he's kind enough to give us a TLDDR if you want a very short read here's the quick version of why I believe that GitHub won and why you're probably using the site to this day i can boil it down to exactly two reasons that happen to resonate with each other at a perfect frequency one GitHub started at the right time and two GitHub had good taste yeah yeah this is perfectly correct but I am excited to hear him break this down into more details all four GitHub co-founders had flops both before and after GitHub chris and PJ couldn't quite make fan spam fam spam what the hell is fam spam keep in touch with the people you love oh it's a way to to have a long email chain with your family that's cute remember the old days of email chains that was their first project tom and Scott weren't able to make Chatterbug explode after GitHub they worked on this after they left GitHub helps you learn languages from real people turns out people wanted to learn from a bird anyways it's it's rough especially like if this was the first thing that they did they did GitHub first it was massively successful and they're like "Oh we know how to do startups now." And then you go do another and it bombs worst feeling ever i actually experienced this a bit after releasing the ping video product where we went and made a couple other things we did a Q&A service for people doing like question answer stuff with their audiences live it did okay but then we did web hook thing which I was very excited about because it solved a lot of problems that we had and no one gave a at all it's the worst feeling especially after a big success i think both of these ventures had good taste and great product but it wasn't the right place or time or market or whatever for them to become GitHub level yeah I don't disagree at the time GitHub was starting distributed open source version control tools were starting to get useful solid and adopted and there was nobody around to seriously much less commercially host big hosts didn't care and smaller players weren't serious yep like Git kind of happened out of nowhere and quickly took over this idea of distributed version control that was open source and usable however you wanted but where's the source of truth it took a bit for that to settle in for people and GitHub was very excited and prepared early on furthermore the players at the time which were SourceForge Google Code etc who eventually did care after seeing Git and GitHub rise in popularity they simply had no taste wait Google Code a halfbaked product by Google that they weren't even using and Source Forge that place where there's 15 ads between every download link that doesn't really care about the source code part just the ability to download binaries these two things didn't have taste that feels like a reach for those who don't read sarcasm well I'm being incredibly sarcastic these services are actually some of the most jank ever and if that's your competition it makes sense why GitHub won i'll resist the urge to make a joke about AWS and Azure versus Versell right now they could never have competed with a developer tool company whose co-founders were all product focused open source software devs absolutely agree source Forge's target wasn't developers it was users that wanted to download binaries quickly google Code's target was somebody trying to get a promotion because that's how Google's development cycles work github's target was developers like them generally speaking it is really hard for me to see a path to success in a business where the intended customer isn't the company founders like everything I have built at Ping and Upload thing all the stuff we have at Ping Labs are things I really wanted to have exist we've never built a product that is something I wouldn't have used if somebody else built it the goal was never be this really successful billion dollar thing by coming up with the perfect idea it was solve real problems that we had in a way that we found fit our needs and our taste in hoping that others would feel similarly and that's what they did they were developers who loved open source who loved these new tools who felt like existing solutions didn't understand them or speak their language so to speak and they built something that did and that is so key to why they succeeded we cared about the developer experience and had the creativity to throw away assumptions about what it was supposed to be and build how we wanted to work everyone else tried to build what they thought they could sell to advertisers or CTOs yep again that's the difference they weren't building for this intended sales target they were building to solve their specific problem which makes things significantly easier and much more likely to be successful too nobody will beat out a passionate person to do a weird anecdote to my own career I didn't realize that when like Prime and I started posting videos on YouTube more actively and built this more senior development scene in the content world that we would accidentally kill a lot of existing Devril work because at the time the only options for senior technical content were employees of companies talking about the stuff they were working on and their goal was to do their job and to some extent sell a thing that's not our goal our goal is to nerd out about this thing we're obsessed with and make this thing we really wanted my channel only exists because I didn't find the YouTube videos I was looking for when I got hit with COVID when I was at Twitch and no longer could talk to my co-workers and then eventually left Twitch and didn't have other technical people that wanted to nerd out with me so I went to YouTube looking to nerd out no one else wanted to and I made my channel soon after that because I just needed to get this out of my system and then a lot of people showed up because others wanted the same thing that I wanted but all the people who were doing technical content before me they still were they still are but they don't have the same like almost unhealthy obsession with it like I wanted this so badly that it has consumed a huge portion of my life and that is what makes me successful it's not that I hacked the system I figured out the algorithm any of that it's I was obsessed with making videos I would have watched and you can't compete as a business with that you just you can't and that's what they were seeing here too it doesn't matter how much money Google has they don't have the passion an ounce of passion weighs significantly more than pounds of gold and money that passion and obsession is how they won igor already said it in chat obsession beats talent every time obsession also beats money and while money can buy talent obsession will still win anyways I super sympathize with this point from Scott there's no world in which these companies who didn't have that same obsession and passion could ever have beat out four dudes who were obsessed the obsession that these co-founders had with making the best place for open-source code and collaboration will beat out any company of any size always now that that's out of the way if you're interested in some storytelling let me lead you down the path of how some of this actually unfolded from the inside oh boy this is going to be so fun this is so fun okay I see some comments on YouTube I want to roast a bit this is survivor bias it's not obsession it's not talent it's not anything you think it is how easy do you think it is to survive if you're not obsessed i'm not saying everyone who's obsessed with their problems is going to succeed you also need to be solving a problem that the market has a demand and need for and that the market has room for and capital to spend on that's the luck aspect but the likelihood you get to the point where that matters if you're not obsessed is near zero if you're obsessed with a problem that no one else cares about you're not going to be successful but if you care about the right problem that the right people are obsessed about and they're willing to pay for the solution and they can see the gap in the quality you will beat out anybody who is just doing this for their day job a person who makes 200k a year to work 40 hours a week on solving a problem that they don't understand or care about you can have a hundred of those people they will not compete with one person who actually wants to solve the goddamn problem because they have it that's a fact and I don't care about how you feel on survivor bias that's that's the reality that we live in and if you look at all of the biggest and most successful companies almost all of them started in this way even something like Amazon started because Bezos wanted a better way to find and buy the books he wanted to read and then AWS succeeded because they built the solution to the problem that they had at Amazon with deploying and managing their deployments anyways I want to read the rest that isn't the TLDDR because I know this is going to be a great story i'll dig a little more into the GitHub start at the right time theme from the point of view of a software dev in 2005 i was 10 this is when Git had its first commit by Lionus and Mercurial had its first commit by Olivia oh I have some old pictures like this mine aren't as old but the classic OG desk setup i especially love the Mac keyboard and then the Intella what what's the that name of that Microsoft mouse it's Intella something right i'm not crazy it's like the classic Microsoft mouse it was like the mouse for so long intell ha i was right everybody was saying I was wrong no I was right it was the Intella mouse og as  i guess I am old if I can immediately identify the Intella mouse and nobody else here can but yeah the Intella mouse right next to the good old mighty mouse maintaining Apple's legacy of mice also I didn't even look at the source code on the screen he's rocking Ubuntu and Windows Vista and Mac OS at the same time here beautiful a++ what was it like to develop software almost 20 years ago and how was this an environment where Git could win over people and a GitHub could be born oh good old tiger beautiful minimal if you were a software dev in 2005 you were probably or hopefully using a centralized version control system like Subversion i professionally used RCS CVS Subversion and Perforce all before git came along y'all think that we have like problems with swapping our solutions in JavaScript too much look at how much people are swapping their source control solutions and had the nerve to say that I was being dumb saying that Git is something you should probably learn in college because the standards change all the time they haven't changed in 20 years and they used to change every two git one accept it and if you don't want to accept it build something better because Git one not kind of one not oh some people use it some people don't git is the de facto hardcore victorious standard in source control it should be taught in school because 99% of dev jobs are going to require you no git anyways hell I was actually in a company that FTP its PHP files directly to prod i I want to ask in chat we're doing a poll have you ever FTP PHP straight to prod yes no too young or no knew better i am so curious notice nobody's saying no knew better because this was just how we did PHP development this is still how levels does it to some extent he has command set to commit command enter to push to GitHub and then GitHub immediately FTPs it what is FTP sorry from 01 god damn it Gabriel i should have put no what's FTP as an option but no I'm too young is the same option anyways now if you were working on a proprietary commercial software centralized version control systems like SVN honestly wasn't the most horrible thing it was pretty simple to check out make changes and then check back in branching and versioning completely sucked but in a lot of situations it could basically be avoided i'm not sure I ever really use branching in subversion or perforce good old everything is Maine i saw a branch in a repo recently where where main was named mother i thought that was interesting anyways people probably complain more about Git today than they did about SVN back then to be honest the user interface and mental model is arguably simpler than it is in Git but also this wonderful UI for doing it imagine if we were still using this as our way of doing code review and like managing the things we were working on i spent a lot of time hating the software that is important one of the best motivators for building great things is spite if you have a solution that doesn't work for you that like kind of functions but spends more time pissing you off than doing what you need that will motivate you to move goddamn mountains and I I would say that if the team didn't hate existing solutions as much as they did their motivation to push through and do something as hard as building GitHub would have been significantly lower spite resulted in picked up GG kind of spite actually yeah you know what first off I'm gonna move chat to hang out with us because y'all are fun today but uh Spite was a huge motivator for a lot of the things I built both at and after Twitch like the video collab experience with ping.gg was because I was annoyed that I I was spiteful that I couldn't build the tools creators actually needed when I was at Twitch and I saw so many things creators needed and as I was becoming a creator I needed them too if you look at something like Upload Thing I hate the fact that S3 is so standard that alternatives are more focused on building an S3 compatibility layer than they are on making a good user experience i was trying for years to get anyone else to build a better S3 and no one did so we ended up having to ourselves but all of my best stuff came from a combination of needing a product that didn't exist and spite towards the ecosystem the original owners or other experiences I had had that motivated me to push through and make it happen but absolutely spite is one of the most successful things in terms of driving you to building the right thing back to the article the problem that I think started coming to a head around this time was not in the world of professional development within closed and trusted teams the big problem was within the growing world of open source also very real an important detail with git itself is that git was spiked driven development lionus was mad that he could no longer use the solutions that they were using i believe it was it wasn't perforce what were they using before at Git or for Linux i bet he even mentions it in here biter yeah he was using BitKeeper and they did something that violated the BitKeeper like free open agreement that they had and they could no longer use it and Lionus was so mad he just went and made Git and here we are you see open source was barely a thing before this time especially compared to today most of you kids probably don't remember a time where there weren't millions of open source projects around but the phrase was only coined in '98 i was three to get a sense of scale Durk published a paper in 2008 analyzing global open source project trends and they estimated that there was a total of 18,000 active open source projects in the world at that time in 2005 there were certainly far fewer 18,000 total active open source projects i feel like my GitHub alone is nearing that joking but realistically speaking like the people in my live chat right now combined would be at least half of this like the thought that there was that few open source projects there were probably more than 18,000 open source repos published every day on GitHub i'd be surprised if it was that low actually yeah as Gabriel says he can confirm he doesn't remember when there weren't millions of open source projects yeah there's over 280 million public repos on GitHub alone today and look at that curve and that's just August of 07 it is a vertical line now to put this into perspective there's over 280 million public repos yeah so why did open source help usher in the era of Git and GitHub because open source was growing fast and centralized version control systems were particularly bad at open contribution strategies that is you couldn't easily share a project publicly and then take contributions back into it in a simple manner there's a reason that Linux was doing everything over email patch recommendations because it was the easiest way to deal with stuff contributing was so hard there was no fork button there was no ability to clone something make a change and then file a request to merge it github invented the idea of a pull request where you're requesting another project pull changes that you made in your fork that was a new idea that wasn't even part of Git contributing to open source in 2005 how bad could it possibly have been if you would like to see my talk about what open source contributing was like via my AWS Tokyo keynote 10 years ago check it out and then you can skip the next few paragraphs the link to this blog post is in the description if you want to watch that you should i am actually very curious and I'm going to save this to my own watch later cuz I am so so curious about this yeah let's read the paragraph here though basically you can make your subversion server read only for unauthenticated users this is generally how you hosted an open source project or you put a tarball somewhere occasionally if you wanted to contribute essentially you'd have to do some of the following you'd have to check out the latest version make your changes generate a patch file with GNU diff upload the patch file to a ticketing system or email list used by the project you literally had to make diffs and email the changes the maintainer would then have to pull down the patch file apply it to their project to see first off that it applied correctly but more importantly that it worked properly they'd either have to submit feedback either by sending another email or dealing with their ticketing system make changes themselves which is what they would often do because it was way easier to just fix the bugs than wait for someone over email to deal with it or most importantly just commit the change if it worked there are still artifacts of this around the internet i used the track project at some point for this type of project you can still see their submitting patches guide an example of how a change would be suggested it was a goddamn nightmare and now we get into the fun chaos of open source the Rails Project the Rails Project as well as my friends and future GitHub co-founders at ER used a simple ticketing system called Lighthouse which is mind-blowingly still up beautifully simple issue tracking this is such a time portal it's weird they stopped updating the copyright 6 years ago we love that anyways one of my earliest open source projects was a command line tool called Git Lighthouse that could simplify the process of pulling down and applying attach patches from the tickets that you wanted to test out again even with Git they would have to download the diff and apply it locally how insane is it that you couldn't just clone the branch or copy the like branch name and throw it in the GitHub CLI or any of those things it's still in my opinion a little too hard to test someone else's code but have to download a diff by hand and apply it to try something and then have to revert it oh god this is hell this process sucked enough that when something came around that simplified it it was quickly embraced and that something was GitHub but first we needed a git the rise of Git ah yeah the BitKeeper story git actually started from the fact that Linus Torvall really liked an at the time commercial version control system called BitKeeper it was actually built specifically to help simplify the existing kernel development process if it had been open source or it had better licensing terms there would probably have been no Git or GitHub however what happened instead was that one of the Linux developers reverse engineered the protocol which broke the licensing terms and Bitkeeper and Linus determined that the spat that followed was untenable and they mutually decided to part ways yeah that was the issue that uh one of the Linux maintainers was trying to figure out how BitKeeper worked internally so they could automate some things and Bitkeeper wasn't happy thankfully Bitkeeper wasn't happy because otherwise we might not have had the open standard of Git imagine if we were still using a closed source solution for managing our projects and managing our source code betting against Lionus is brave yeah we didn't know how bad a thing that was to do at the time we have since learned as an industry but have we cuz like remember how much Lionus and Nvidia hate each other and look at how well Nvidia is doing so Bitkeeper killed themselves by going against Lionus nvidia won by going against Lionus so checks and balances anyways Lionus took some of the concepts that Bitkeeper opened his eyes to threw together the simplest thing he thought would solve his problems with those principles in mind and he called this new project Git the information manager from hell i want to see this initial release of Git the information manager from hell beautiful it was fairly quickly embraced by several people in the Linux community and it slowly grew into an actual sort of version control system there are several reasons why Git felt awesome at the time branching and merging were dreams rather than nightmares you have no idea how bad like merging is bad now merging was miserable before it was super fast which is funny cuz like Git can be slow but everything else was so much hilariously slower and also permissions were vastly simpler huge in the early days of Git I would do talks where I would just go on stage create a few branches commit changes into them switch between them and then merge them together all in 60 seconds i would literally see people's jaws drop some of them would think I was faking the demo imagine seeing Git and saying "That's too good to be true this has to be faked that's how bad was it was so bad i am so thankful I wasn't conscious at the time so I didn't realize how bad it was i just cannot tell you how magical it felt in 2006 to be able to switch and merge contexts that fast and easily in subversion this was a total nightmare i love this git is stupid content tracker adorable not having to go over a network to negotiate a commit with a central server was also incredible it felt like a rocket ship everything was so fast again the centralized server bit was insane since ongit on your machine is just on your machine you only have to go online when you push the changes to a different origin everything can be not networkbound and nobody had invented pre-commit hooks yet thankfully that was a disaster we came up with much later anyways and probably most importantly you could fork the repository incredibly easily again huge deal previously you had to get permission from the centralized server to do anything the idea that I could just copy it do some work and the permission could come after making the changes that was a huge shift in how we wrote software previously you had to get permission before you could start doing the change now you could make the change and permission was just whether or not we copied the thing you did and we brought it into our main branch on top of that you could even pull other people's changes into your own forks it was huge the idea of copying a repo having all the per I needed to do stuff to it and then sharing between them and merging and all of that was so novel and new and it came because Git was so simple and focused on the open source world the Linux project started doing this early on for larger changes they could send a request to pull changes from a hosted fork and Linus could very easily do so so if I was working on Linux and I made some big changes rather than just emailing a diff I could host my alternative fork of GitHub somewhere and then email line is saying "Hey I want you to pull these changes from my source." This is where the idea pull request came from apparently I was wrong about saying that GitHub invented the concept of a pull request git has a git pull request command that would format an email for sending to a mailing list to help make the process simpler okay so pull request is a concept that they had in Git for generating emails that's was kind of hilarious in retro anyways when GitHub added the ability to basically generate the same type of message we decided that a request to pull should be called a pull request they came up with the actual name apparently there's a whole backstory for that there is a git command called a git request poll that would format an email that you could send to a mailing list saying instead of me sending an email patch series here's a public endpoint that you can pull from to test my series we turned request a poll into a poll request importantly because requesting a poll was difficult because you needed a public repo before GitHub this was probably running your own server github made this easy and PRs made this stupid simple but do you know what PRs v1 looked like they were just emails saying X wants you to pull from them and they weren't even formatted as helpfully as the request pull ones no diff nothing but GitHub still won because the problem was the sharing git shared over email by design github made forking and sharing stupid simple yeah these emails are not good person sent you a message send a pull request hilarious people are like "Merge request is better." But that's only because GitLab emerged after we invented a way to merge on the server before then you had to pull locally merge there then push your integration up merge requests would have made no sense when we created the concept that's actually a fair point the pull request was because you had to pull the changes onto your machine before it got merged into your repo finally into the original point push request made literally no sense a proposed changes set to merge or squash or rebase is not a request to push anything only in the V1 days would someone need to pull a request merge locally and then finally push very good points crazy history this is awesome to learn all about i hope you guys are digging this as much as I am because this is this is such a cool deep dive and it's it's so much more detailed than I don't even know if most of this was public before some people think the developers liked Git because it was distributed and you got the whole history when you cloned which meant that you could share locally etc i disagree i am fully with you Scott i don't think people actually care about histories in Git i very rarely see people actually reading through commit histories in any meaningful way certainly not locally sometimes they do but from my experience when they're doing it it's to debug a specific thing that they think happened around a certain time it's not because the history itself brings a lot of value as Scott says here I don't think almost anyone really cared about any of that distributed was cool because you could do operations fast and you could host your own full writable fork which made permissions much simpler also huge the distribution and open nature was good because the elitists would have no reason to not adopt it but the feature set that that enabled of running it locally and having it be faster and nicer to interface with and simpler because the permissions were stupid simple that is what made Git successful the fanciness of these things on the technical level are why the most elite people wouldn't turn it down but the experience of using it is why the average person picked it up it was cool because contributing went from a problem of who had permission to push into the simplicity of who had something interested to pull and of course this last point led directly to GitHub and now finally we're in the rise of GitHub late last year I interviewed my GitHub co-founder Tom and among the things discussed he told the story of how he got the initial idea of working on GitHub essentially when he was working on powers set Tom's team started using Git internally however it was a pain in the ass to add other team members to the internal server because Git's main protocol was over SSH which means you need a user with SSH privileges on the machine for everyone it was difficult and for most of the team just wasn't worth it this spawned the concept for him of making the process as easy as possible yeah like SSH was the most complex part of git for a while and I didn't even think of like like GitHub wasn't meant to compete with Git or email or those things it was meant to compete with the hell of centralized servers and managing the SSH keys and all that git is awesome git hosting is a pain in the ass this is why Tom started working on GitHub git repository hosting no longer a pain in the ass sign up now hilarious beautiful social code hosting github is the versel of Git yep i went through my old emails to see if I could find the first time I heard about Tom's GitHub project and it was this email from Chris responding to a Git screencast I made in late 2007 hey Scott awesome i actually have a handful of apps I deploy using Git but the screencast is great really well made i like the overlays and it's nice that you go into actual Git usage merging pushing git K etc tom Preston Warner of Chronic Gravitar and Godfame and I are actually working on a git site github.com it's a public push point like repo.org.cz but userentric rather than project ccentric the idea is easy forking and contributing to open source projects a distributed pull model versus repoor or.cz and SPN's shared push model we're thinking of charging $10 a year or something like that and filling it up with useful features pre-rolled postcommit hooks postcommit web hooks tutorials wiki pull request integration etc also not ugly any interest in playing around with the service once we put it into beta maybe suggest some features we definitely love to highlight this screencast this email 17 years later is a wild read this is kind of crazy to see back in time like this at how how simple the ambitions were and how focused they were on solving the problems that they had it was still a secret side project between the two of them at this point also Chris lowercase H hm not sure what that meant oh yeah lowercase H for GitHub that was the thing yeah because they always do capital H with GitHub and he did lowercase H there cuz even early days that's hilarious the lowercase H cuz they were strict about the H and GitHub being capital but earliest emails they weren't yeah this is when Scott started chatting with Chris and Tom about the Git and Ruby libraries that ran the site and eventually how I wiggled my way into the project and company there are a few interesting things about this pitch the first is that they compared it to the only other real public Git hosting site repo.org.cz which is also miraculously still running if you want to see what the state of Git hosting was pre GitHub I do oh god yeah I see the difference pretty quickly github made the crucial innovation over that site and every other hosting service like it which is that they made it user centric rather than project ccentric before this if you wanted to host something on Source Forge or whatever you needed to grab the name with GitHub you can make any project you want named anything you want because it's name space to your user it sounds small but that's a huge deal like anyone like you don't have to make sure your project has a unique name before you push it up to GitHub huge the second was that they focused on a pull model rather than a push model basically the permissions thing I talked about before the third is that not ugly was a core feature github had taste yeah uh not ugly might sound like a reach when it looked like this but when this was the competition it's a fair point to make git wins this is why Git was cool and why GitHub was starting to make using it easier but the question is why did Git win lots of distributed systems sprang up during the time mercurial was similar in a lot of ways and better in many in fact to this day Facebook is still using Mercurial so why did Git come out on top in the great distributed version control system war i think the answer there was PR and there are two big PR gorillas fighting it out for the why did Git win answer the first was Linux and by extension Linus the other was GitHub and specifically the Rails community so we're going to go through both options that's a cool framing so maybe it was Linus and Linux the Linux project using Git and Lionus having started the project gave it instant credibility everyone knew Linux everyone knew Linus if he made an amazing operating system that everyone uses at least for their servers next year's the year of Linux on the desktop it's finally happening he can certainly make a next level version control system and even if it's difficult to use that just means he's smarter than us and we should try harder right this talk this is legendary google's weird tech talks where they bring people in it's unlisted now that's hilarious Google oh man this is so legendary i've watched this multiple times lionus's talks back in the day were so cool video quality 240p content 8K legendary highly recommend watching that if you haven't before this video is one of the first talks about Git online circuit 2007 its line is talking about Git in distributed version control systems then a brand new concept at the Google campus it came out in between when I started using Git in late 2005 and when I started at GitHub in mid 2008 i watched it several times as did millions of people who doesn't like listening to the Linux guy say CVS is the dumbest that has ever been thought of and everyone who disagrees is ugly and stupid at Google here's the link that has that there yeah it's just great PR it really is especially because people didn't like CVS and now this guy's coming out saying "You all suck this is terrible." Beyond that if you conflate Linux and Linus which most people do there's an argument that Linux itself pushed Git adoption indirectly through Android interesting this is where I really don't know how much impact my own efforts or GitHub's efforts had in comparison to this big quiet behind-the-scenes side effect of Android becoming a thing at exactly the same time this is interesting i hadn't thought of like Android's effect on Git android is a big part of why I learned Git and GitHub super early but it's interesting to see it called out this way it's also why Google suddenly started caring about Linux and Linus fascinating or even my personal impact in either or both of these fronts doing Git talks and corporate training for years in early September 2008 right as Android 1.0 was being released like 2 weeks after this email but before I did the training Sean Pierce an early superhero of the Git ecosystem wrote me this email asking to help train the Google Android team on Git apparently Shawn Pierce has since passed away that is sad to hear yeah rest in peace Sean let's see what he had to say back in 2008 scott are you in the SFO Bay Area google may be interested in bringing you in to give some in-person Git training talks to 200 engineers given your work on the Git casts in the Git community book I think you may be able to put together something quite useful for our engineers all of them are migrating from Perforce to Git and need to do it in short order we're talking about early to mid-occtober time frames let me know if you're interested and we can start to work on the planning i believe we can also get you some sort of speaker and consulting fee the specifics of which can be worked out once we have a bit more of a training plan please try to keep this information private we're not quite ready for the world to learn that Google's using Git but it will become public knowledge sometime this calendar year when the project goes open source i've ced my work address just to help me organize the thread but I wanted to write you from the address that you know me at that is a cute email that is that is really nice it's difficult to determine what impact Android had in corporate git adoption but it certainly wasn't zero while the Google and Android team was the first that I did corporate training for under the GitHub banner I also eventually did get training for engineering teams at Motorola Qualcomm Ericson and Broadcom just to name the telecoms jesus jesus this guy's got like Keny Dods looking lazy i never thought I would say that he also like you cannot underell the importance of good educational stuff in adoption so while sure Android probably helped drive things I would argue that you Scott doing all this educational work and creating the resources that allowed companies like Google to meaningfully adopt Git was a more necessary piece and a more unique one too i would argue if Google and Android didn't adopt another company might have tried to but if it wasn't for your materials they all might have failed so to Scott you are as if not more essential to the success of Git and GitHub don't give Android your credit i also just don't like giving Android credit for things I don't have to but that's an aside yeah they eventually had to hire a team to do full-time education and onboarding and training for engineering teams which is nuts lionus pushed Git with his broadranging brand of superstar nerd PR that Mercurial never got but Android furthermore pushed Git uniquely via its dependence from the Linux kernel and massive companies out of pure practicality that also otherwise never would have happened for at least another decade maybe it was GitHub there was also and I must say this with a grain of hopeful humanity a possibility that GitHub was the determining factor in the eventual dominance of Git over Mercurial yes I would absolutely agree here github had the incredible luck to have an amazingly supportive and hip community that embraced Dust right out of the gate namely the Ruby community that was a back and forth github was on Ruby and Rails and Rails was building itself on GitHub that relationship happened early and was essential to both their success within months everyone in the Ruby community had put their stuff on GitHub rails was the hot at the time it was cooler than PHP js frameworks weren't really around there wasn't even Node yet so everyone was paying attention to what the hip cats in the Ruby community were doing they were the bleeding edge of cool development in the software world and they were using GitHub i remember back when the Ruby community was trying new things and adopting new solutions and pushing them good old days and it's not just me lionus himself also recently said that from his perspective the Ruby community unexpectedly made Git explode overnight he doesn't credit GitHub for that by name but I think it's impossible for anyone to argue that the Ruby community didn't adopt Git in a very large part due to us you are entirely correct Scott i appreciate you for couching your words the way you do i won't though ruby was a huge part of Git winning and Ruby only did that as a community because of GitHub so by transitive property and some speculation I'll make the claim that Lionus in fact thinks GitHub is the reason Git won yeah I'll agree with you there of course the Ruby community adopting GitHub wasn't random i remember all of us Chris Tom PJ and myself sitting at the table at Ruby conferences with all the guys in the early Ruby community showing them GitHub selling them on Git doing talks and more we were all speaking at the same conferences we all drank beers together after Ruby meetups in SF these were the guys who started Rails Heroku Twitter jQuery you name it it's not that we were selling it it's that we were all sharing what we were passionate about there was a high level of trust in this community the GitHub founders were a deep and authentic part of it and we all tried each other's stuff and supported each other throughout adorable the Ruby community using GitHub meant that every conference talk everywhere had a GitHub plug to in it free advertising everywhere this meant that as more and more projects moved over to or were started on GitHub even people who liked Mercurial had no real choice but to use Git after a while it probably just wasn't worth it github's dominance in the hosting sphere just crushed Mercurial in just the span of a few years in Mercurial land there was Bitbucket which was started for Mercurial hosting and written in the Django framework i did not know Bitbucket was in Django that's that's an interesting tidbit but I think we just had too much of a head start and there wasn't enough differentiation the Python community just didn't adopt it as aggressively as our Ruby community did yeah Python is historically fast to adopt things as we've seen with Python 3 why would you ever bet on the Python community trying something new as early as December of 2008 GitHub was hosting 27,000 public repos where Bitbucket had a little over 1,000 since then Bitbucket's numbers gone down it hasn't but I I had to pick on it a bit you guys know how I feel about Alassian it became difficult to catch up how do I remember those numbers you might ask well I had a website I put up called why git is better than x.com and this guy named Jesper emailed me to say that one of my biggest points was incorrect where I argued that Git has GitHub and Mercurial and Bizaar don't have a GitHub i rather arrogantly argued that they aren't in the same league so we found these old emails mercurial has it own GitHub you may want to update it bizarre has Launchpad bit bucket has a very similar site but has less than 1300 public repos github is over 27,000 hilarious young Scott being a little  sorry Jasper we've all been there i'm still there to his credit he never called me out on my response which now seems real snippy of me in hindsight but it turns out that Jesper in fact was the founder of Bitbucket that makes this way funnier okay a year or so later we met up with him in Amsterdam drank some nice whiskey together and have remained friendly ever since here's them all together adorable the competitive field collapses in the end whether it was GitHub that helped Git win or Git that helped GitHub win it was quickly over in 2006 to 7 people were first learning about distributed version control systems and Git Murial were starting to fight it out in 2008 GitHub launched in 2011 both Google Code and Bitbucket added Git support which will mark as the year that the nail was in the coffin for Mercurial git had won and GitHub was now essentially unbeatable just 4 years later in 2015 Google Code just completely gave up and shut its service down the person who made it clearly got all their promotions in the email they sent out they basically said "Just move to GitHub." If I remember correctly they even reached out to us to help with the migration it's time to recognize that Google Code's mission to provide open source projects a home has been accomplished by others such as GitHub and Bitbucket bitbucket's the best Atlassian pro project says so little says so little i would say Trell's better but they got purchased they didn't start at Lassian so it doesn't really count but yeah you get the idea so why not Google Code like how did Google not win they're great at making quality experiences that developers love while Bitbucket started after us we had a hard head start but there were other hosting sites like Google Code and in early 2009 Google Code added Mercurial support and SourceForge added both Git and Mercurial so if these industry monsters had a massive user head start and they had distributed version control support only months after we launched why didn't they wipe the floor with us little guys not only little but also nearly completely unfunded chris was able to put a little bit of money into Bootstrap but the rest of us were totally broke and we didn't raise any outside funding okay that's why they're also rich now makes sense when Google Code launched Mercurial Support we were still four devs working out of cafes in South Beach with zero VC investment we struck deals with our buddies in May 2008 as well as Engineard for help with hosting costs because we didn't have the cash they couldn't even afford their servers how is it possible that a tiny unfunded team made Google code fold in just a few years also quick side here on GitHub funding the article I'm reacting to states that VC investment wasn't an option for the co-founders this is untrue apparently they were talking to VCs when PJ emailed me in July of 2008 to say that they wanted me to join that we should all make the leap quit our jobs and make this a full-time thing instead of a side project he explicitly said "We've been talking to one VC in particular that we like a lot we want to raise a handful of money to do a few of these things like getting an office hire some people etc it was always on the table we could have done it at literally any time we considered and thoughtfully rejected the idea constantly over the years we didn't really need an office we didn't really need more people yet not only that we actually nearly rejected the idea when we were considering a $100 million series A from Anderson Horowits shout out A16 i'm a scout there love working with them four years later was when they were considering that i remember vividly the night that we all sat down for dinner at some restaurant in Fulsome Street in April of 2012 and argued very heatedly if we should take a capital round at all we had offers from A16 Benchmark Sequoia and Bessemer which yeah these are some of the best VCs in the world especially at the time and they were all making crazy offers and us four sat at the table heatedly yelling at each other about whether or not we should tell all of them thanks but no thanks offers that other tech entrepreneurs would probably literally have killed for yeah but the point is that it wasn't that we couldn't have raised money but that we didn't even need to in order to take get down the entire field pretty crazy that these four passionate dudes could destroy all of hosted source control in so few years with no money again with the like passion beats money and talent and everything else their obsession won and finally GitHub had taste the original article is correct the other hosts focused on distribution and revenue streams we cared about developers but it wasn't about when they added Git it never really mattered they never had any taste they never cared about the developer workflow they could have added Git at any time and I think they all still would have lost you can try to explain it by pointing at features and value ads but the core takeaway that's still relevant to starting a startup now is more fundamental than if we had an activity feed or a profile page or whatever the much simpler much more fundamentally interesting thing that I think we showed in everything that we did was that we built for ourselves i guess I pre-eread this is so important when you're building for yourself you will have such an insane massive advantage that others can't compete with that's why I was able to beat Twitch's solution with Ping that's why GitHub could win here that's why YouTube could beat Google so hard that Google had to buy YouTube they were building the thing that they wanted not the thing that their boss told them to build and since they were building for themselves they had taste and a deeper care about their experience we were developers and we built what we wanted in order to enable how we wanted to ideally work we were the only tool in the space built by developers for developers without PMs or accountants or CEOs trying to optimize for revenue rather than the developer experience that we cared so much about in the end we won because the open source community started to converge on distributed version control and we were the only ones in the hosting space that truly cared about how developers worked at all the only ones who questioned this approached it from first principles tried to make it better holistically rather than just throwing more features onto something existing in order to sell it why GitHub won so to sum it up we won because we started at the right time and we had taste i like the the coming back like like almost like the article like opens with this and then goes through a bunch of things and then walks backwards back to the start it's really cool it's like an like a palendrome almost in such a I love how this is written we were there when a new paradigm was being born and we approached the problem of helping people embrace that new paradigm with a developer experiencecentric approach that nobody else had the capacity for or the interest in i guess the question is what's the next C change in the developer workflow and who will have good enough taste to make it explode in the same way ps if you would like to watch me talk about Git and some crazy things you can do with the Git internals check out our YouTube channel yeah the Git Butler YouTube channel is kind of nuts i'm going to hit subs i probably should have a while ago they have a great talk so you think you know Git 1 million views all welldeserved i'm going to leave a link to the channel in the description so you can check that out if you haven't yet then also check out Git Butler these guys know what they're doing i mean obviously once again just massive shout out to Scott for taking the time to write this up correcting all the misunderstandings that existed in the previous article and my video as well i was so excited to read that first article with y'all and the reason is I wanted to understand how GitHub actually did win and while that article did help a lot this helped way more i appreciate you so much Scott for taking the time to write this and respond in the way you did this was an incredible experience and I hope my viewers feel similarly




## Why I Don’t Unit Test - 20220801
let's talk about unit tests and why i don't use them i know that's a bold statement but i don't have much a use case for unit tests in the vast vast majority of the things that i built and i think that when i say that my take it's seen as some crazy rebellious person who only works on small teams and is more than happy to go break things for all five of my users but this is actually the same take that funny enough some other big companies have one of my favorites and i need to go find the tweet quick quote tweeted it was really good here i wanted to go find this tweet because i said it's a banger somebody went on a rant about like eng culture coming from one company to another and a facebook engineer had a test that was preventing a change from happening so he deleted the test and got back to work because tests are only there to block engineers that is the only role of tests and in this engineer's five years at facebook they have never written a single test it was cheaper to test in prod and forward fix we need to know is that it wasn't a zero to one hundred percent of infra in one day it was tiered monitored with an sre team watching as things go out unit tests are designed to slow you down that is not necessarily a bad thing there are a lot of places where slowing your engineers down to make sure everything is always the exact way you expect can make sense like if you're doing like financial bank software to make sure transactions are being processed correctly on the back end those types of things should probably have unit tests as well as a shitload of integration into end tests that all said if you're building applications for users the application breaking slightly and then being fixed when you've identified that break is almost always cheaper and if it's not cheaper that's the thing you should be focused on fixing i've helped a lot of teams companies individual engineers find ways to be more productive without being more destructive to be frank and the best ways don't tend to be testing at all and if they are they're integration into end testing unit testing is a way to set up a guard rail at every possible turn when developers are the ones whose job is to make the path you cannot predict every path somebody might go down so your unit tests are going to block important paths inherently just by existing i don't think senior developers engineer leads team leads all the people who make these technical decisions certainly not like ctos and such should be enforcing code coverage numbers for unit tests because that is enforcing people to build guard rails instead of building paths and if a path isn't put in the right place and somebody missteps and falls you should be focused on building a good safety net and i think that's the core of my testing philosophy don't build guardrails build safety nets make it as cheap as possible to fail so if something does go wrong in prod you can revert it really quickly and fix it even quicker our time to respond to a bug at ping like when somebody reports an issue to us our average response time is a decent bit under seven minutes for a production fix because we have optimized the hell out of our pipe so once an issue is reported to us we can identify it fast and fix it even faster that is so much more important than any number of unit tests can be and it doesn't cost our engineers more in fact the things that we did to make it that fast help our engineers every day on anything that they're working on the value of not unit testing is that the time you would spend unit testing can be spent doing all of the other things our teams our users and our engineers want and need and by making our environment as fast as possible it is now safer to make mistakes but more importantly our engineers are less scared they don't worry about writing the right number of tests or when a test is failing for some reason they don't worry about like deleting it and finding the right conditions tests are poorly placed guardrails please build safety nets instead it isn't it's i've seen so many code bases by like a 10 person team that take 20 minutes to deploy and have 80 to 90 to 100 even code coverage and that does not make a productive work environment i've seen four person teams hiring devops because they have dug themselves into such deep holes instead of keeping things simple and unit tests are one of those things where if they're not solving a specific problem for you you probably shouldn't be writing them at all so i hope that helps people better understand my stance on unit testing and why i don't really bother doing it i've been we've been keeping track of ping actually we have a list of the bugs that hit production that a unit test theoretically could have caught and in our year of operation we're at three and of those three two of them we never would have written the tests for they were very strange edge cases that were like maybe an integration test might have caught but like theoretically we could have written a unit test that caught those things but the reality is the problems we run into are not ones that unit tests realistically would have been testing for on top of that a lot of the problems i used to have that unit test helped for were things that typescript has solved so for the 80 window of tests making sure valid inputs and outputs are happening typescript does that and for the other 20 i feel like you're going to run into those bugs anyways so making it easy to fix them when you do is way higher a priority for me almost always but theo we have this one path in our code base that's super fragile and it keeps breaking so we have lots of unit tests making sure it doesn't break cool i guess like if nobody ever wants to touch that and you put those unit tests in to kind of like cement it in in stone so that no one will ever touch it again great you did your job you took this thing that barely works and you duct taped and cemented it in place so it can't ever move so it's less likely to break but i would have spent that time rebuilding the thing not covering it in cement so it can't ever move again like if something is fragile the time spent reinforcing it with unit tests to double or more the amount of code just to make sure that thing doesn't break again it's time you could almost always have spent rewriting the thing so it's less fragile in the first place so with all that said i hope you understand why in the hierarchy of things i could be doing as an engineer as a team leader as a ceo at any given time unit tests don't even make the list it does not bring value to our engineers does not bring value to our users and it certainly does not bring value to our company and you have to be in a very specific company's role for those things to matter a lot so if you have one of those dumb 100 code coverage rules at work and some senior engineer from ex-amazon or some that insists you all need 100 code coverage everything's going to go to hell send them this video seriously i would love to chat code coverage was a mistake and unit tests solve specific problems that you probably do not have build safety nets not guardrails i hope this was helpful hey 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 so 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 and i go live on fridays pretty often as well thank you again for watching this video really excited thank you




## Why I Gave Up On Linux - 20240827
by now youall probably know that I like my MacBook not going to sit here and pretend that Apple's a perfect company and that Mac OS is the ideal operating system or any of this if you want proof check out my other channel Theo rants where I regularly break down Apple's worst decisions especially around the App Store I'm not fond of the way they run that before I go any further I do need to do some disclosures I'm invested in Apple so you have to account for bias there but I'm also invested in Microsoft and Google and Amazon all of which will be relevant here so while my investment in apple might make me biased again check out videos on Theo rants if you want to see that I don't necessarily let my investments bias me too much anyways that all said I honestly can't imagine doing my work be it code running my business making videos and all these other things on any computer other than my trusty MacBook right here and my path here was kind of strange because whether or not you believe it I used to be a DieHard Linux guy like I rocked a ThinkPad with Arch and I3 for a while and it was really fun but as you know I didn't stick with it I did eventually bounce to this beautiful MacBook with the beautiful outer wild sticker in front and I want to talk a bit about why because I've never really broken down my path from Linux to my Mac so uh let's talk about why I moved to Mac first important thing to realize is when I started my move to Mac when I was in high school I was absolutely a PC guy I was building my own computers I dreamed of writing for lonus Tech tips I even had a kind of cringey like tech review blog I got one of the first 240 gig ssds from Kingston right when it released because I went to what was it PA East and convinced them that I was legit enough to be worth sending something to for a review sample and it blew me away it was so cool but I was deep on the PC Building scene that was my I want to make sure y'all believe me when I say I used to be a PC person so I dug through the old Facebook to prove it this is a very Android photo because I was a very Android person some of the others are a little more high quality but this was my setup for a while that HP laptop right there I learned about Linux both because my high school had a Linux club that I got part of as a freshman even though it was all seniors owe them for everything yes that was a Beatles poster but also you can see my little Android statue there my principal in high school gave that to me because I helped him ROM his Android phone yes my high school principal would call me out of class to go to the principal's office to help him install new custom ROMs on his phone I've been a nerd nerd since elementary school but like that type of deep sense high school and this HP laptop carried me through so much it's insane God that computer the reason I'm a bit of a Vista apologist yes I can defend Vista not because it was good but because it was the first like shock to the system of computer manufacturers that they couldn't keep coasting on 256 gigs of RAM anymore 256 Megs not even gigs Megs yeah the 256 big cap for memory that every manufacturer effectively was operating with was insane and if it wasn't for Vista we might have never really normalized reasonable amounts of memory but Vista demanded so much more the manufacturers actually started improving their hardware for the first time in so goddamn long so even though this laptop was a piece of it was absolutely piece of it had three gigs of RAM which was very handy because I ended up using it to host servers after I stopped using it as my main computer but man I would play World of Warcraft with that thing flipped upside down battery removed and a desk fan blowing air directly on it before I had snagged the Sony monitor I don't remember how I got that that wasn't the Sony I got this one on sale when I worked at Staples it's a 1, 1600900 cheap ass display I got for like 70 bucks before then I was using a goddamn CRT and yeah the printer under the desk was nasty this was I'm not saying the setup was good I'm saying it's how I functioned it was like the best I could do with high in high school at the time with was like a crappy old wired keyboard and the $70 Mouse and the free keyboard you used what you could okay but I made it work the more interesting thing though is obviously like I was doable ining all of these with Linux this computer at this point was just a Minecraft server running a headless Ubuntu at that point but I would use Windows as my main OS for gaming and when I wanted to get any real work done would immediately reboot to Linux there is an important detail here which I did a lot of photoshopping you can't actually there isn't much proof of that here but I would like make graphics and like with my friends pictures and things all of the time so I did end up in Windows a decent bit just to do Photoshop type stuff but I was in Windows for that and for games and then everything else I did in Linux primarily still I'll admit but I was deep in the Ubuntu World running my own Dees and it was a good time but then I tried something interesting okay this wasn't the interesting thing this was me rocking the Asus transform or the Transformer that tablet was awful since I was building my own machines I ended up discovering this wonderful thing called hackintoshing if you're not familiar with hackintoshing it's the concept of taking a PC and running Mac OS on it it was real fun it was really real fun the fact that I could just like build an Intel PC and then install Mac OS on it was just like I'm not supposed to be able to do that and I abused it I was actually selling these mini hackintoshes for a little bit it was very fun I learned so much from this but the biggest thing I learned when I was doing this hackintoshing is that Mac OS is fine it's not great it's not terrible I was customizing the hell out of it installing crazy desktop environments and for the most part it was fine so I kept using Linux I kept playing with my Linux machines but then a very specific thing happened I graduated high school and I had to go to college as you guys see here this is 2012 I graduated in 2013 so this will be the first set of bullet points was mostly Linux and PC in high school was 2009 to 2013 started hackintoshing in 2012 still mained Linux though I was also still on Android this whole time to be clear I was a big Android Fanboy like would shame my friends for buying iPhones was pissed when the iPhone floor came to Verizon I was very anti-apple overall so I should even specify that still very anti-apple overall so a series of things had to happen for my perspective to change so 2013 graduation I needed a laptop for college and I wanted to really take College seriously I grinded hard for this I got into a dope school and I wanted to be able to be free not spend all my time cuz I just spent most of my high school time in my basement or out skateboarding and not doing much else like yes all of those photos before those are all my basement it was a refurnished basement but it's a basement nonetheless and I wanted to actually go out and not feel like I had to be Tethered to a wall all the time so I specifically needed a laptop with good battery life so this was 2013 I need a laptop with decent battery very interesting thing happened in 2013 the 2013 MacBook Air the 13-in MacBook Air looks and feels just like last year's but it runs for more than 12 hours do you know how nuts this was as a person rocking a Dell in an HP both with gpus in them that had like bought a used ThinkPad this was insane the idea of a battery that could last you actually 12 hours was just unbelievable and this laptop even though I didn't like MACC OS much I just needed Hardware that would actually get me through college so I bought this with the specific plan of installing Linux on it right when I got it so that was my plan get the 2013 MacBook Air install Linux on it so I can have a portable computer running Linux with actual decent battery life and then bring my super beefy desktop that I had built to college as well and just leave it running plugged in all the time and then SSH into it remote into it whatever I need to do when I needed a more power ful machine that was my plan do you know what that plan worked relatively well so let's add that here got 2013 MacBook Air planned to install Linux or not even planned I did install Linux so I installed what flavor of Linux did I install I'm pretty sure I triple booted it what did I install I'm pretty sure I was like a fedora guy at the time I'm almost positive it was Fedora yeah cuz I wanted something real stable because again I was being the like try hard I'm taking this college thing seriously guy and Fedora was the the serious like Debian verion so I gave it a very real shot people are asking in chat why not Arch because it was a MacBook Air that had just been released it had like just come out and I was not dealing with getting Arch configured on a machine that nobody else had tried to install Arch on I did not want to be first I wanted to be stable this was the first time in my life where I wanted my computer to stop being a problem because up until this point I was constantly dealing with my configurations breaking my computer not booting especially my phone by the way cuz I was always was running custom software on my phone and like I reinstalled a new ROM and like would wipe my system data at least once a week at this time so I was like notoriously hard to get a hold of my was always broken I could fix it but it was always broken and I really wanted to take things more seriously in college so I did and that's why I ended up with the MacBook but I had a big realization the big realization happened when I started coding on Mac OS well it was OS X at the time and the crazy thing that I realized when I was coding an OSX is I could use most of the same tools and have Photoshop run natively you have no idea how big of a deal this was for me this was years before windows subsystem for Linux was even a thought this was at least 5 years before the Microsoft Hearts Linux thing this was way back so the idea of having an OS where I could actually write code using real Unix based tools and also have real production creative software that I relied on and I love to I was as much a Photoshop nerd as I was a code nerd at the time having the ability to do both on the same machine at the same time in the same OS without any virtualization it was a massive oh moment for me but I did keep coding in that dual boot though so I kept coding mostly in Fedora for two months but then I needed to start using more complex debugging tools because I was in a data structures course and the data structures course was brutal it was in C++ and required us to use uh bunch of debugging tools for memory stuff and on Windows the recommendation was dark memory which was awful on Mac OS we could use xcode so believe it or not xcode was kind of goated for C++ at the time I did not expect that but I was regularly finding myself in xcode just to figure out what was going on with memory and C++ because it was kind of useful for that and for debugging workflows and eventually I caved and just used Sublime on OSX I didn't love it though I tried so hard to turn Mac OS into the crazy stuff I was doing in Linux that all said I wasn't coding much except for my classwork this was college so reminder this was Frost year of college so I was like partying going out avoiding work to the best of my ability barely participating any of the open source stuff I used to do wasn't taking too seriously but I did still host servers those were all Linux generally speaking for my first year of college I did not spend much time customizing my tool unless I like literally had to so I found myself defaulting to Mac more and more oh boy people in chat remember in the data structures course did you take it with Barb Cutler was insane I planned to take College super seriously I showed up with the intention of taking College super seriously but then I was in college and that flew out the window very quickly once I was actually there yeah I planned to exactly I my goal was to take College seriously it you took it with color yeah I the thing with Cutler is you hated her until you finished the class and you realized how much better a programmer you were by the end of it so I I have a lot of respect for Barb she she forced me to get good at coding much earlier than I would have otherwise I also forgot to mention a fun detail which is since I was hosting those Minecraft servers I was using ganu screen and git to get to the servers and host and like manage the files and things so I ended up being pretty good at G screen in SSH as well as get before I even really started coding seriously which ended up being a superpow especially in college where I never had to worry about things being corrupted or like deleting the wrong file and while I was coding it was a huge relief for me so this point I'll say I was tolerant of Mac at this point but a couple more things happened that slowly changed my tune more including a swing back to Linux for a bit but before we get there we talk about an important thing that happened so at the time I was still largely running Android and by largely I mean entirely I didn't find one of my Galaxy Nexus photos but I went from the Droid to a Droid X I won an a skate contest yes I won a Droid X in a skate contest to the Galaxy Nexus to the Nexus 4 to the HTC1 M7 when it dropped on Verizon so was a bit of an Android fan you could say I was switching Android phones all the time running custom firmware on them wherever I could was a big Android Fanboy and as you can see from how that looks I also would customize the out of it I probably should have found more photos of that but I would rice the out of my Android stuff I had so much fun custom styling my phone to make it look as cool as I could but then something happened I iOS 7 happened and this OS release me up I had never seen a mobile OS look this good before I was spending so much time customizing my goddamn phone and couldn't make it look a tenth as good as this at the time it was insane going from remember what iOS 6 looked like with the super skew morphic everything's trying to look really like the real world the slide to unlock with the glimmery text it was so cringe and then iOS 7 was stunning I had just never seen a mobile OS that looked designed before it me up having the like slide up with the quick actions thing we were just starting to find patterns like this in Android but holy holy this was in 2013 actually groundbreaking and I don't think that to this day Apple but specifically iOS 7 get the credit they deserve for changing the design l language that we use for making applications fundamentally applications were no longer trying to look like their real world counterparts they were trying much harder to be better than the real world counterpart the example I usually give is the books app the the compass would be a better example yeah so my favorite examples to show the difference between iOS 6 and 7 is the compass the compass on the left has a specific goal it's trying to convince you that you don't need a real compass anymore the reason it's designed to look just like a compass is so that you can bring your familiarity with the real world object with you and feel confident this will work the same way the one on the right is just trying to get you the information with as little brain like overload as possible I know nowadays we all feel nostalgic and we love the thing on the left and there's absolutely design that takes the skoric stuff and makes it really modern and cool but the idea of the apps design being much more focused on communicating the information and getting you an answer as quickly as possible rather than trying to convince you this is good enough where it really did feel like the old design language was convincing you it was good and the new design language was just being good it it my brain up I remember when this dropped like my girlfriend at the time had an iPhone and an iPad and I really wanted to play with the beta so I convinced her to install the iOS 7 beta on her iPad so I could just see it and I was so blown away and then another crazy thing happened so we should go back to the notes so iOS 7 broke my brain and then I had a crazy Stroke of Luck A friend gave me a fully functioning iPhone 5 and it wasn't just like the base model it was the Mac storage model what had happened was she worked at a bog and she found it when she was working there like it was just in the water so she assumed it was broken she couldn't get it to turn on and she sent it to me to fix with the opportunity to keep we were like good friends I'd helped her with some stuff in the past it was like a thank you type thing and then I just got it I cleaned it off a bunch plugged it in to see what would happen and it just turned on and worked fine literally a swamp phone so I got a perfectly functioning iPhone 5 that happened to be perfect for me because it was also a Verizon phone I was on Verizon at the time so I started using it as a Wi-Fi only device with iOS 7 and I fell in love I did not expect to to be clear I was like the dieh hard Android guy that would make fun of their iPhone friends that then slowly fell in love with the iPhone and then what I would do is I'd wait for new to drop cuz the 5S was already out at this point but then when the six dropped I bought somebody's used 5S it was great I was able to constantly buy people's old phones and Coast like that for a while which was great in iOS unlike Android rocking old iPhones was actually fine which was also a new thing to me cuz I was used to upgrading like as I mentioned in like a three-year window I went from Droid to Droid X to Galaxy Nexus to Nexus 4 to 1 M7 that's six phones in like 3 years and now I can actually just keep a phone for a while while and this made me fall in love with iOS the fact that it worked reliably that I had a phone that you could always contact and obviously I still jailbroke it I still hacked the out of it I red my iPhone a ton but iOS 7 as a starting point was so good and my phone was stable I had an actual battery which if you used Android phones back in the day you know your battery life was talked about in like hours with decimals like you would proudly say that your phone could last 4.5 hours you would if you're not measuring your battery life in whole numbers then you're not measuring a battery I want to use and that that was very much the case for Android at the time so I fell in love with iOS and slowly started using Mac OS more there's one more important detail which is that I hated all of the ecosystem stuff so like the share between Mac and phone stuff I hated all of it I found it all just got in the way and never worked as expected and to this day I still strongly feel this way I hate the airpod handoff features I hate the fact that when I like have my phone too close to my watch and I like go like this accidentally I'm just like using my phone it puts it in some crazy bump mode and starts going off a ton like there's just so many things that these devices do between each other that I hate and if they didn't do any of that I would be happier with apple stuff so I turn off as much of it as I can airdrop is fine when you manually hit the button and use it but all the automatic things are trash garbage dumpster fire cannot recommend it not fond but I start using iMessage I did move my SIM card over I did start using iOS but then we enter the next chapter which is Theo gets an internship remember that thing I said earlier that I tried to take College really seriously and like have a really legit setup I tried even harder with my internship so I planned to go super hard on internship it was at Amazon in 2015 would have been 16 yeah it would have been 2015 yeah so it was Amazon 2015 and the computer they gave me had three gigs of RAM 5400 RPM 2 250 GB hard drive I5 from three years prior it was awful it was awful it was like actually embarrassing how trash the machine they gave us was like the spec for this machine would have been Max 350 despite the fact that I think I made like 30 to 40K in this internship so what the me absolutely me they gave us the the worst possible machine that they could even pretend to get away with and I had that for the whole summer so I didn't tolerate this also should mention uh ran a super bloated Windows 7 install and this Windows 7 install had all their crazy Enterprise on it too so it barely ran thing took six plus minutes to boot I'm not exaggerating it was literally like sometimes 10 plus minutes to Bo and then it would fail sometimes when you signed in and you have to reboot it constantly had to do updates constantly miserable to use was super restrictive for what you could install and it was kind of known at the time that if you were using this computer which all the interns had to they you had to spend the first week or so at it getting them to constantly approve the random things you had to install to do your Dev work but something else was going on at the time at Amazon something that saved my ass someone was making an unofficial official Ubuntu drro I should add one more important detail that this wasn't the only computer we also had a pretty beefy desktop Running Red Hat Enterprise let's do RL Red Hat Enterprise Linux so at my desk at the office I had a decent desktop that I never ever actually saw the display from I would just remote into it always that was meant to be your actual computer rhl yes thank you Ben yeah so redhead Enterprise Linux was on the desktop they provided us but that instance was not even close to ready to run on anything other than a server so I heard about this unofficial Ubuntu drro I wanted a Mac though I pestered and pushed cuz my whole team was on Macs except for one other Dev so I wanted to be on a Mac just so like I could have the same stack as the team they could help me and like they didn't even like pairing with me because my computer was so awful to work with so when we paired I would have to use like their machines with them which meant I it was really hard to get unblocked I was getting trapped constantly underneath this Windows machine so I did a few things first thing I did was I ordered a decent SSD and more RAM actually I didn't even order the ram I just ordered a decent SSD I went to it and demanded the auntu image and what happened is something that's happened a lot throughout my career ended up close with it the IT guy I was working with was so disgusted at the machine that I was given and was so pumped that I was nerdy enough to show up and rebuild the machine basically that he signed off on basically everything let me do the ubun 2 install and also added a bunch of additional RAM I think he gave me eight gigs so I ended up with eight gigs of RAM had a machine that was way beefier than all the other interns had to bunto on it now and then things turned up to 11 remember how before I said I'm going to take this summer seriously I did I became a serious Linux nerd I was already kind of into Linux but this is when I like went deep on I3 is it when I went deep on Vim not even neovim yet just straight up Vim I got back into IRC again at the time Amazon wasn't using slack we were still an IRC company so I had like the intern IRC that I spent way too much of my time in just posting with them all in my terminal obviously this is also when I got deeper into t-o which I fell in love with because up until that point I was a G new screen guy and just for SSH mostly so I was deep deep I had so much fun with this and by the end of the summer I was not a very good developer I not improve much as a Dev but I gotten so good at Linux I will also add that the the mentor that I had for that internship was literally gone for the first two months he was there the first two days and then took a vacation and came back my last month so I had no mentorship or help at all it was a mess like actually comically bad let me know in the comments if I should do a dedicated video to the show that was my internship now that it's been over 10 years almost 10 years because holy that was a miserable experience and I was largely just coping with the hardcore Linux stuff regardless the point I'm trying to make here is I'd become like die hard Linux I had like the the 2015 version of the primagen setup I was like building custom keyboards and I was trying out ergotron type stuff I was going crazy with my I3 setup religiously keeping the right windows in the right places I even refused to use Chrome and tried Firefox for everything but begrudgingly so many internal things required Chrome that I gave up and did that it was great and I'll say straight up Windows especially on the computer they gave me was not an option and I did the best thing I could by moving that machine to auntu I'm actually proud of how well I worked around the show that Amazon handed me in terms of Hardware but man I ended up just going down that rabbit hole cuz it was the only thing that was rewarding at the time and since I had nobody helping me actually do the job and also fun fact the intern project they gave me was literally impossible and their whole like plan for it that they wrote up for me was based on three false assump that were like the key points of it so there was no way for me to have a rewarding time writing code it was all exploratory like looking through how other things work that I didn't understand to try and explain to the team the project was impossible so the only rewarding thing I did the whole summer was make friends with other interns and work on my Linux setup oh one other thing I did that was actually important this summer uh at this point I hated windows I had spite for Windows I was not fonded I my desktop out there cuz I'm a I want to be able to play games when I I was done with like the intern stuff so I have my desktop my monitor and all that and Windows 10 happened so I installed Windows 10 and I had feelings H to say the least I had feelings the big thing that pissed me off with Windows 10 was Bing so I'll best file this Windows 10 dropped Cortana happened Bing happened Windows 10 came with a search bar on the bottom left and that search bar could only search Bing I don't know about you guys but I not a big fan of bang at the time not a big fan of bang at all at the time so I came up with an idea I had played with Chrome extensions a bit in the past and I knew knew we could do something with those so I proposed to my friends from The Internship what if we made a Chrome extension that would redirect your bang search the search engine of your choice and that's when I made Chrome Tana my first viral project that has a rating here because this project was so popular that my Google account was getting attacked and compromised constantly to this day more people are trying to get into my Google account for access to my Chrome extension that has a lot of users than are trying to get into my Google account to get to my YouTube channel which is kind of insane but yes I made Chrome Tana this is my first big project actually what's the timeline it was either this or in square for Pebble these were the first like big is open- Source things that I made this was a watch face I made for the Pebble Smartwatch I think yeah this would have been this was before yeah so I guess my first thing was my SmartWatch stuff with ins square and then during my internship I made chrom tana and I'll be honest all the hard code for this I did not do I was mostly like connecting the parts with the Chrome extension a friend of mine Mayan she did the UI for it and another friend of mine Claire who ended up getting my job at twitch she did the reject for it which was by far the hardest part so this project put me on the map it was my first big open source thing I ended up getting like interview requests from Wall Street Journal and about it while I was interning at Amazon and it very much distracted me I was paying even less ATT to be fair there was nothing I could actually be doing at that point but I was deep down the Chana rabbit hole that was the the focus at the time then when I went back to college that was my like open source project I was doing in the open source program at my school and it was a whole thing great time anyways chrom Tana blew up and I honestly don't think I would have made chrom Tana if it wasn't for how much I was pissed at windows at the time because I was so mad about this Windows machine I was rocking and the move over to Linux and how much better it was this was all largely like a middle finger to Windows and it went great then the intern ship ended went back to college reality started to kick in at that point when I went back to college I guess this is the next chapter back to college at this point I was clearing out my remaining cours work so just finishing missing credits very little of which was code most of the stuff I was doing was just filling out necessary credits for RPI so I ended up dueling in music and getting my music degree because I had so much credit to fill and not coding a whole lot mostly just maintaining those projects I tried to get into to window managers for Mac OS because I I wanted to keep using my MacBook Air and I didn't like the ThinkPad I bought cuz the battery was so so I was still on the Mac but tried to make it more Linux specifically I think I tried was it amethyst which I was using as an attempt to do window management similar to like xmonad an I3 that I loved from Linux on Mac and it was rough it was uh not good enough but I was admittedly not coding much so kind of just coasted avoided thinking about code too much was really deep in my music hole and like enjoying my last year of college but then the important chapter the job at twitch oh man this job and most people think of my journey from Linux to Mac that know anything this is the part that they think of because I showed up at this job Mac User who prefers Linux I did not want to be a mat guy but it was just what I was using especially it's like I wanted Photoshop and I wanted code and I wanted a battery and that combination did not really exist anywhere else and arguably still to this day barely exists anywhere else so this was my setup but then my manager broke me Wabo was one of the best Engineers I've ever seen at the time without question the best engineer I'd ever actually see work and the way he worked broke my brain I was under the impression that all the best Engineers hitting all the crazy Hut Keys swapping between things faster than they can even think making happen coming out of their keyboard as fast as possible not using a mouse those for noobs that was what I thought a fast developer was that was not how Waba coded the way Waba coded was he would plug his laptop in with the single display port cable for his OG Cinema display the old sorry the Thunderbolt display he was obsessed with this because it was one cable to plug in his laptop and immediately get to work he had a keyboard a mouse and a trackpad all at his desk he would just push him aside sit his laptop down open the screen up barely just having hisy like hands underneath it plugged directly into to this display and he wouldn't use any window management anything every app he had was full screen and he would just command tab between them so you'd have his browser Up full screen you command tab to his code code a bit command tab back see if it worked or not command back to his code maybe command back to his terminal for a sec to see if things Chang there big stock terminal guy by the way did like no customization at all but the way that dude could think about describe and deliver code blew me away and what I learned as I watched him was defaults are powerful the biggest power that comes from defaults is that you stop thinking about the details which to many especially us deep Engineers kind of sounds horrible like we love having control of our setups in our environment some of my best performing videos are the ones that I did about the crazy sets of tools I'm using my stack has so many parts like we love playing with trying out and experimenting with different tools and Technologies but when you pick a default and you decide to not do that then all you're focused on at that point is delivering it's the same reason something like laravel is great it's the same reason something like Adonis is great it's the same reason something like the M Stack or the T3 stack is great to an extent too if you don't have the ability or the decision to think about these things you can focus on the actual this is also why like prettier is so good and it's why I don't use a prettier config because I don't want to get into arguments and waste time in brain power thinking about things like code formatting thinking about how much actual engineering time has been lost to disputes about code formatting makes me feel sick now at the time it's what I lived for I love critiquing like where you put your new lines and how you broke up your functions and your environment on your computer and insisting on jailbreaking so you could have a nice looking phone and all these types of things like I customized everything for the sake of it and when I saw somebody who I aspired to be as productive as that avoided configuration to the best of their ability it melted me and to this day I try to channel that energy with the things I do that are work so this computer I do have one window management thing I have rectangles I like the Hut keys to quickly do things like that but mostly the full screen Hut Key which is the one I use the most by a lot I like the key bindings I have custom on my Mac right now which is uh I have caps lock and it's not viin bindings but it's close I have I jkl is up down left right which is actually very nice to not have to leave home row to arrow through things but I also have U and O as page up and page down which I love I bound all of those through Carabiner which is a phenomenal piece of software Carabiner elements oh so so so good I've contributed some default key bindings to it too if you go to the complex modifiers add predefined rule the poker 3 bindings in there are by me because I wanted my left control up down and left control IG KL and then I rebind um caps lock to left control and I kind of need those at this point it's very hard for me to live without it I just love it and I don't touch my arrow keys ever I'm a 60er if I could just remove the arrow keys off my keyboard I'd probably be happier I don't touch them I just use hom row so yeah defaults are powerful I try to minimize how much I customize and I found quickly first off MACC has the best defaults Mac OS is the most usable OS right from when it's installed a lot the amount I have to change Windows or Linux of any flavor to get it to a point where I'm kind of happy is kind of insane Mac OS is much closer still not quite there I still like want to turn off the animation speeds I still hate things like the I don't use any of the what's it called um uh mission control stuff I hate it all just feels like multitasking but slower and worse for the most part I just use my Mac stock and I slowly fell in love with it I never really loved Mac OS until this point I tolerated Mac OS up until this point but here is where I started to fall in love the fact that I had a machine that I could just go to an Apple Store buy leave it in mostly defaults change a few things here and there and be productive as oh it entirely changed how I work and how I think not just like about the code I'm writing on the machine I'm writing it on but the way I structure projects the way I make decisions not making a decision is more powerful than making a decision a lot of the time because it saves you the brain power and energy from having to worry about these things and I see this a lot with Linux and it's the main reason I've like backed off because I don't want to do what I did during this internship again where I spent 3 months just going crazy customizing everything it was very fun I had a lot of fun doing this but it wasn't productive and if I wanted to have fun I could go play around with my music setup or go skateboard and change how my board worked I did not need my code and my job to be the thing I was constantly customizing and configuring and to this day I try to minimize how much I change at once like right now I'm trying a new terminal aloc but I'm still using t-m so it basically feels exactly the same I've other editors but usually just for a few days and only if they have enough support for the tools I already like and then end up back at vs code like every time I have the things I like to use and it's rare I actually change them like another one recently I love TIG TIG is great it's a really quick way to like look at a get history and grab things and I love it but I'm trying lazy git right now and it's very different but also very cool but I don't know if I'll stick with it or not because for me it is just another thing but do I still use Windows that is a great question chat I do in fact I'm recording this on Windows Windows right now whenever I'm streaming I don't trust OBS on Mac still I only really trust OBS which is open broadcast Suite it's the main software people use for Content creation especially if they're using a computer like this for screen capture and stuff OBS on an Intel PC running Windows is still the most stable experience by a lot so I have two capture cards routing all my stuff to my PC and I still use Windows for that I actually also use Windows on my couch as my like TV CU I hate all of the television operating systems so much so yeah I do use Windows quite a bit and also for gaming but I am mostly a Mac guy now and it's weird I missed the Wayland move like Wayland happened and I was just not there for it and it's weird because I was waiting so long for Wayland And I just didn't get to be there for it I was there for Gnome 3 gnome 3 was a fun move I was actually a gnome 3 Defender fun fact back in the day you know I just I needed a computer that didn't make me feel like I was taking care of it and moving to Mac for real and committing to Mac for real and no longer dual booting and doing all this other just using it entirely changed the way I write software the way I think about software and the way my brain is wired to make decisions I'm not saying customization is bad in fact it's phenomenal if I didn't spend that summer going deep on my crazy Linux config then I would have constantly felt like I was inferior for not doing it but I think I had to I think my journey had to be this like multi-part thing where I started as antiac I got into hack and toshing begrudgingly used the Mac for a bit specifically for college I went all in on Linux for a summer and then realized the best Dev I knew used Mac stock and I don't think I would have ended up where I am now anywhere near as concisely if I didn't have this journey there and if I didn't go through all of these phases I didn't start building my own computers and hackintoshing if I didn't have to buy a Mac because there was no PC with an actual battery at the time if I didn't have the summer of Linux and if I didn't see my boss being an absolute God using everything stock if I didn't have these steps I don't think I would have ended up here and even if I did it would have taken so much longer this needs a midwit meme use the defaults customize everything use the defaults yep absolutely and that's how I felt I feel like I saw on the left with defaults are fine that's why I use Windows the middle no but Mac OS is okay but if you're not customizing everything you're not a real developer you're not a real computer person come on you know better you were roming your own Android phones and then part three the end is defaults are fine that's why I use Mac so that was my journey it was a great time shout outs to John Wabba my manager who got me to take Mac more seriously and take things a bit simpler for Joanie IV for redesigning iOS to make me give a about Apple's design language and systems and recognizing that they were better than I could do and to Tim Cook for running Apple so much better than Steve Jobs ever could and not making me feel bad for being or not being an Apple user which gave me the right amount of wiggle room to give him an actual shot I don't think I ever would have moved to Apple if it wasn't for Tim Cook I don't think I ever would have if it wasn't for Joon I I don't think I ever would have been as fond as I am of my Mac if it wasn't for Waba showing me so early what it meant to be a productive developer yeah single monitor for Life work with what works for you have fun with your customization but don't hesit to let things be simple if that works for you too until next time peace nerds




## Why I STILL Use Tailwind - 20220621
now we begin there's a few people in the discord who know the rant that's about to occur for those i am sorry for the rest thank you for taking away from me the one thing i liked most about tailwind this is horrible i hate this so much ah god okay so how did we get here this is gonna be a long talk we're gonna start with a code sandbox uh and close a lot of these things cool and it works with tailwind good [ __ ] we can delete everything else so here's some tailwind once i delete that okay no it is working so tailwind it's pretty cool let me write things like this flex bg read 200 uh let's put two things in it instead of one div give by cool formats properly so i can add flex dash call and now it's flex column instead of row let's do this the way we used to before style equals display colon space quote flex end quote comma new line flex direction capital has to be capital d so you have to press shift for that colon space quotes flex column or i think it's just calling for this comma background color colon space realize you don't have the background color you need for this off the top of your head so you go to your design system tailwind colors google search it go through your docs whatever you use for your color system import it maybe you know off the top of your head the hex code you probably don't so you probably have to import it we wanted the red 200 so i'm going to go yoink that realize that it has to have the hash or it's not actually a background color realize i grabbed the wrong one and it looks like they've since changed it from the version of tailwind that's in here this is life of doing inline styles this is css and js for somebody who asked earlier this is tailwind i think we're all in agreement that this is this is bad like we have we have concluded that this way is not the right way of doing things and as such we will now talk about a tributify the the way of doing things that we just looked at there so it's going to look more like this one than that one this isn't going to work because this isn't real code we don't have windy set up you're not going to [ __ ] bother uh i don't know what the prefix for flex would be i think it's just tw equals flex flex call let me go look at their example quick how would i even where would i put flex which of these things does it go under okay it's apparently it's just flex i don't know it doesn't say in the docs i i don't know flex and flex equals true would be the same in jsx i'll do it that way just so it's like correct that way flex is true uh back or bg equals red 200. i i would i put the direction under the flex like when i do like a true call like how do i define flex did i do like that like is this valid i don't you have taken the thing that was good about tailwind and made it [ __ ] by doing this you you have taken the worst parts of this and the arguably one bad part of this which is the tokens you have to remember you just link that's fine oh can i play in this it'd have to probably turn on at your beautify because it needs to be compiled so this won't actually work in here unless you have the compiler so yeah that might not work yeah okay to those saying it says it's an opt-in feature like if if there was a restaurant and one of the options was dog [ __ ] for a meal and i like hey it's it's weird that your restaurant serves dog [ __ ] the proper response isn't oh it's opt in very excited about what could possibly happen in like uno i saw somebody rerolled uh how do i really feel about wendy i i hope that that answers it that windy almost similar to react wendy let us experiment with tons of different things that could make tailwind better and the few that were good got stolen and we used them in tailwind now yes tail one's better twin is really cool i think twin's exciting 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 so 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 and i go live on fridays pretty often as well thank you again for watching this video really excited thank you cool that should be useful




## Why I Work From My Couch - 20230601
[Music] I know it might seem like I'm always at my desk but honestly I'm only really there when I'm streaming making videos or taking calls generally speaking I like to work from the couch not this couch there's another matching one on the other side but the background is nicer so we're gonna we're gonna pretend okay I think the story of how I went from an I3 Linux window management multi-monitor nerd to just sitting on the couch my laptop is an interesting one I got into Linux very early I enjoyed Max and I was specifically really into Hackintosh but most of the time I was in Linux doing crazy customized setups doing almost all my code from there and used windows for playing games when I got my first internship at Amazon I went out of my way to make a working Linux image which wasn't easy at the time didn't have a super productive summer but I had my setup the way I liked it a laptop that I could plug into three monitors SSH to big machines and generally the the cool nerdy way to code especially for back in depth things changed things changed quite a lot when I started using my MacBook more in college I found myself loving Mac OS obviously I was most comfortable on my setup when I got home plugging into two monitors and having my fancy keyboard and trackpad and mouse and all that the real big shift happened for me when I got my first job at twitch and my first manager Waba he coded a bit different from what I had seen he was an absolute wizard he was the only reason we were using Elixir at twitch at the time I was enamored by how effective he was at just opening his laptop and delivering code the thing that surprised me the most is how few tools he used he had two monitors he'd occasionally plug in one of them but usually didn't bother he would just sit there on his laptop full screen his code editor make some changes command tab to his full screen browser and see if it worked or not he really didn't bother with all the fancy window management stuff that I loved my whole life all the tmuks all the I3 all the crazy window management Vim just threw it all away in favor of boring Sublime Text install and a boring terminal and a boring browser just command tab between them I was absolutely blown away it just did not seem possible that somebody could be that effective without using any productivity tools or anything to make them more efficient but he was fast and I decided to try it myself and what I found was moving a lot of those tools out of the way made me more effective and I'm still genuinely shocked at that I did not think I would be able to move faster but it makes you focus on the thing you're doing it might be that I'm easily distracted but it's probably the ADHD regardless I found it so much easier to just sit there and code when there was nothing else around when I couldn't have a YouTube video up in another monitor have slack pinging distracting me all the time when I had just one thing open on my tiny little 14 inch screen it was so much easier to not get distracted and I've been surprised to learn that there's a lot of one monitor people that you might not have guessed like primagen he only uses one monitor when he works obviously when streaming he has to use two I use three when you're setting the writing code you want to focus and get stuff done multiple displays fancy setups even the desk itself I found it all to be a distraction my best code is written sitting right here maybe your fancy setup isn't that necessary but what's important is find a thing that makes it easy for you to focus and get your work done this works for me and it might not be what people expected from someone known for shouting at the computer from their desk let me know where your favorite place is to code in the comment section if you want to hear more about my setup and why I keep things so simple I have a video All About That pinned in the corner here thank you guys as always peace nerds




## Why I won't build a framework - 20250325
I've been thinking about building a framework I look at something like waku and it's very exciting to me the idea of a minimal server component framework is great and there's a lot of things about next that are annoying the biggest one is that after years of having DX next now has really good DX but the warts of the decade to get there show more and more I feel like it's weird how often I know notice the cracks they are trying to plug because they have to undo a bunch of the things they had built in the past and I want something that takes what makes current version of next great with none of the tech debt today's sponsor makes your backend way easier to manage for your react app I could tell you all about it but i' rather just show you how nice it is to work with convex we're going to start with a little app I built in not much time as a way to test the T3 chat style experience sup nerd notice something on that other side there this is the convex platform and on the convex platform the data appears as soon as it happens watch what happens when I delete everything will always be in sync and this is the magic of convex no more worrying about data being updated at the right time in the right place no more worrying about stale data on some user's device no more crazy weird Fetch and polling work you just ask for the data in your client the code I have for the client here is is actually comically simple we have the Ed query for API messages list send message and then we just render the messages there has to be a catch though right like is the backend really complex let's take a look we can command click API messages list it brings us to the backend code that's in the convex folder in the same project automatically deployed for you by them in here we have the query where I handle it by collecting the messages from DB and returning them okay sending must be really complex then right not really we start by inserting body and author as a new message I then list all of the messages and take the last 10 and then I submit those down here to an action an action is a thing that runs outside of a quick update so stuff that needs other sources or calls apis or changes things more than once that needs to be done through an action so I schedule an action for right after we've created these messages and I send the ID of this placeholder message and again because it's all type safe and typescript I can just command click the action and see here where we are generating the data that we sent to open AI well in this case we sending it to Gemini same difference I stream the text send it all over and every time a new chunk comes in I update the data with CTX run mutation to keep it up to date on the back end so how do we update the client they do as long as the data exists in database the user is seeing the right data no more weirdness trying to manage the relationship between those things no more chaos of trying to keep people in sync everything you want to build from a simple CR app to a massively collaborative figma clone is significantly simpler with an architecture like convexes and I do hope I can start moving more things over to them soon thank you to convex for sponsoring today's video check them out today at so. l/c convex but what I've realized I think about it more and more is two things the first is that I would literally just be rebuilding next like I wouldn't have a lot that I would change I would probably add a config routing option because I like config based routing a lot I'd get rid of a bunch of the magic exports cuz I hate those I have like one config one that's it it would mostly be like a cleanup and like how minimally can I recreate what I like about next I'd almost be doing like what preact did to react to nextjs which sounds great and all except for the fact that whenever I think I've like nailed in what I would want that to be some crazy mind-blowing thing happens with next that fundamentally changes how I would have built it if I had the big one recently was dynamic iio dynamic iio is a huge change in how caching and reusing pieces in nextjs works now by default instead of having a crazy compiler hack that tries to guess which elements are Dynamic and are static as well as weird magic exports that orchestrate all of that which I would have had to build all of by the way now they just use the async nature of the dynamic code to identify when things should or shouldn't be dynamic so instead of a bunch of weird compiler hacks now there's a single runtime hack which runs the react render process takes the output and then kills all of the async parts before they can respond this is the key part that if I had already built a framework before I learned about this would have pissed me off to no end because this code here with the double set immediate lets you skip the whole async q and eject with the synchronous Parts super simply I would have been in the process of building a crazy compiler for all of this to try and get close to the quality of experience that you get from this hack and this hack and its Discovery makes the whole concept of building this framework much easier and it also makes the resulting DX much better so you would think I would look at this and be like Oh Now's the Time I have all the parts I need it's actually had the opposite impact on me because I felt similarly a year ago and if IID started working on this a year ago I'd be almost ready to have like a vzero of it right now and then I would have seen this and I would have had to either throw away half of the stuff I did or entirely rethought it and built something separate in a different direction and I would very quickly end up in the same place that has caused me to have this problem with next I would just be wrapping Tech debt with tech debt until I find the right solution I think we're getting very close to not like perfect but the size of these changes is getting smaller every year in 2021 we got server components and app router which were huge Monumental changes to the way that we operate with all these things they had a ton of rough edges and we smooth out a bunch since the year after we got server actions which were even rougher around the edges but offered even more cool potenti potential wins with a bunch of weird catches that I still run into all the time here's a fun one you might not have known I learned this in the one out five Stacks video in a server action if you call revalidate Path it nukes all of the cash entities in that path so if you have in my case a giant cached entity for get two random Pokemon cuz in here I have to call get all Pokemon and this has a forever cash life because I want this to just be there forever when you call revalidate Page it nukes the cash but if you call Cookie do set it doesn't so if I wanted to improve the performance of this I could do this instead let me grab the cookies call which by the way if you're curious why cookies is async it's to do this Dynamic thing where it knows it's dynamic because it's async so if I do this and just set jar. nothing to Jason stringify math. random this will now be a signif iFly faster experience because I changed from a revalidate to a cookie update and if I had nothing here then nothing would happen because nothing told the browser to update or sent the update to the browser by putting this here now when you click the button the server will generate the updated HTML and send it down as the response that the JavaScript can now take over and render correctly but if I do the revalidate path option it ends up being way way slower this behavior is not documented anywhere I had to talk to the team and they were wrong about it they check they like oh wow you are right about that we should put that in the docs the amount of these behaviors that have snuck in is great enough that I would understand why anyone would be upset that said these are edge cases around performance for lunatics like myself to dive into this will all be smoothed out over time I should expect this being as early to these things as I am using the new Dynamic iio stuff and the used cash stuff and using all these parts I'm surprised they even work the fact that they're not perfectly documented yet is fair but it shows how many of these behaviors are necessary when you're building an environment as inherently complex as this and I could go build my own slightly simpler Thing by the time I'm done five more things will have happened that I want to add and now I have the same exact complexity problem but much less time and incentive to build it so yeah there's a couple ways you could frame this on one hand you could say that I like nextjs so much and I trust them to do the right things so I don't want to build my own framework the other way you could frame it is Things Are changing too fast and if I tried to keep up I would go insane and die the reality is somewhere between those two and I would argue the reality is also much more excited I love the new things and the new ideas the next team and the react teams keep coming up with and the benefits that we as an ecosystem get from it and I don't think every framework is going to adopt all of these things but I've been surprised how many things not even inside of the react ecosystem are like I know the Elixir guys are trying to adopt some of the streaming benefits so they can stream the shell before the data query comes through I know that people over in the view world are trying to figure out how to take advantage of server only components in the orchestration between those things I know the work is going in to take these wins and bring them other places and that's really exciting it's so exciting that I kind of want to just sit back and watch as fun as it would be to throw my hat in the ring it would take away my excitement for the new things and that's what I'm most scared of I know a lot of people who get frustrated with new react releases because it inherently means more work for them it means they have to act new features to their framework it means that their Plugin or their Library built around react might have new edge cases and bugs to deal with if I was one of the people building around and heavily into these things it would be a lot more stressful when these new things come out and I might be less excited as a result and that's a thing I do not want to change I want to maintain my excitement about these new things because they're really exciting there is so much cool going on in this ecosystem that I don't want to reimplement where it is today and ignore where it is tomorrow I just want to enjoy it while I can and see what happens next and that's why I'm not building a framework it is tempting I see roughly what it would look like now but what it would look like is just minimal nextjs that's always 6 months behind on features and I don't want to build that I want to build the best thing and use the best things for what I build and For Better or Worse right now that is absolutely nextjs it's the right balance of functionality support and awesome new features resulting in an experience for my users that is really hard to replicate elsewhere if we actually look at the code for the turbo version of this for example which in case you haven't seen the original video so here's that next RSC version if I go to the turbo version and I just Hammer the button this is in the dev server and it's still that fast and prod it's even faster believe it or not the reason this version is so fast is a couple hacks that I snuck in by a couple I really just mean one so I render the current Pokémon either as a random pair or if you have a cookie for it I use the cookie for the two Pokémon that you have I also Define next pair as two different random Pokémon now when you actually click the button to vote on one of them I record the battle I update the cookies to be next pair I'm not doing anything special here I'm not passing the value down I'm not calling out to the browser hey this is data I need embedd it in the HTML I'm not doing all of these steps to get this data so I can use it as a cookie on this action I'm just writing the obvious simple code which is I have this cookie I have this value that I want to be the next cookie I just set it that's so nice I've never had this elegant in experience dealing with cookies and massive performance optimizations because previously this took a lot more work it has catches like if I turn on the revalidate path again now it's revalidating that giant cash thing and it's going to take way longer but as long as I comment that out and I update this it's now immediate and the reason you feel the performance difference is right up here I have a hidden div that renders the pictures for the two next next Pokémon so as a result of that when I go to the console and I look at the network tab it just fetched number 730 and 352 that's not these two but if I vote 730 and 352 are next because again I have given the browser the context not in the sense that it knows what is next but the HTML has what is next so it can get the data that it needs and then the server just updates the HTML it's hilarious how simple this solution is and the reason this solution can be this simple and elegant is because next has figured out all the Primitives for the most part every other framework takes more effort to do this there are different ways to get different performance optimizations and we were able to make the Elixir version fly but it's way more complex and we had to do a lot of different things to make the performance that good and we had to work around double server render behaviors and here you don't have to there's no work around here this is just the simple focused code that describes what I'm trying to do that's why I'm excited I want my code to not look like it's framework specific I want my code to describe exactly what is happening and for the behavior to behave how you expect the less you have to learn the framework and the more you just have to know JavaScript the better and that's why I'm excited about next and that's also to sum up this video why I'm not building a framework this came up better than I expected I think so I have no idea which channel it's going to end up on let me know if you thought this was a good video cuz it's very different from what I normally do until next time please Dell the framework




## Why Is Everyone So Mad_ - 20230629
oh my God server components are breaking my app they're making react so much harder I have to pay for servers just to serve my web application why is everything falling apart this is the end of react it's time to move to spell no it's not calm down let's talk about this a bit there's a lot of misunderstandings going on around server components I want to go through a bunch of the fud in general concern people have with server components both the valid concerns but more importantly the misconceptions I see a lot of people have I recommend watching the whole thing though because there's a lot of valuable Insight on server components throughout if you're just here for my thoughts on versel's involvement that's going to be at the end the misconception I see that breaks my heart the most is I can already do this with X be it spelled kit or remix or trpc or relay or all of these other tools and technologies that exist in around and outside of react the point of server components isn't to provide new functionality That Couldn't exist before that was never even the goal of react react didn't make it possible to do things that were impossible before react made it easier to do the right thing simply and make it more maintainable too that's the goal of server there are many other ways to fetch data in your applications even your react apps there are many more ways to render your react code on a server there are many more ways to do things than what server components do but there is no simpler way to use react to fetch data and have a good experience the beauty of server components is how simple it makes the relationship between your server and your client and how well it defines that relationship by only having some pieces run on clients and only having some pieces run on server the mental model might seem like there is more and it might not seem like you're getting a lot of benefits and that's the mindset that I hate the most because the default of using server components is you make a faster simpler better application it's not about the features it unlocks although the streaming stuff is best in class and nothing else has it at that level the benefit is how much easier it makes doing the right thing for your users and how much easier it makes it to maintain that thing as a developer it's really good at simplifying your experience it's not trying to reinvent the wheel in terms of what your web apps can do so stop telling me what spelled can do because that's not what this is about something I hint that there that I really want to dig in on though is the complexity seems like a lot of people misconstrue more with more complex react having more features and more behaviors does not inherently make it more complex if you've ever dealt with use effect you probably understand what I mean something like use effect is only one thing but it's one thing that's inherently really complex in particular debugging it is very complex it is incredibly difficult to figure out why a use effect went from behaving totally fine to misfiring millions of times and causing huge outages which I've even experienced in my time the complexity of use effect was deep and what I see with the new model is the complexity is much shallower there may be more things but the depth of complexity in each of those things is much less in the amount of time I have to spend going from a problem to a solution is much shorter especially when debugging not all of the errors are great I'll be honest I regularly run into problems where the error is this component cannot render or this import doesn't work but the amount of change before and after is usually small enough that I can identify what's up and even with some of the weirder errors that I've reported to the Core react and Versa teams it was easy to figure out what caused it because things don't break later they break immediately in the new model and it's been hard to find edge cases where the error didn't make it really clear what had changed to cause the problem and that shallowness of the complexity is what I appreciate so much about the new model I don't spend anywhere near as much time debugging and that's just hard to explain or much less measure it's a feeling and I don't feel like I'm bashing my head on the wall anywhere near as much with the new model as I did before server components one that I'm seeing more of and I'll be honest feeling a bit of myself is the breakage if you're heavily bought into something like trpc react query styled components or any of these other solutions they might not work great in the server component model especially stuff on the style side CSS and JS just does not work well with server rendering I could sit here and say I think that's okay but I'm going to get a bunch of pushback what I do want to emphasize is how well used client works if your behaviors are client-side stuff something like react query does actually work if you're only using it inside of client components something like context does work if you're only accessing it inside of client components you can still wrap your app in a giant context and access it and things deep down the tree but you'll only be able to have that access in a client component which is fine if you're using context it should not be just as a prop drill for server-side Stuff the value of context isn't that it makes it easy to access the same value in multiple places the value of context is it lets you build a relationship between a point in your Dom tree and nodes beneath it that is controlled by you as a developer you might choose but at the top of your app you might not but it's not for taking some data you fetched and just passing it down your tree in fact you can just call the same function five places in your app and it will only call it once if you wrap it with cash or just use fetch it's truly magical how much power you get from this new model and that context feels like a bad abstraction unless you're doing very specific interactions in generally if you're using context correctly it will still work the way you've always used it in that interactive use client layer on the topic of things breaking though we need to talk about angular specifically angular 2. I've seen a lot of people comparing server components to angular and the move from angularjs to angular which if you weren't there when this happened got nicknamed the Red Wedding and there's a good reason for that your angularjs code just did not work in an angular 2 app and vice versa there was no real interop or backwards compatibility story there because angular rewrote the core of how it worked this was absolutely the right call the framework is much better after that overhaul but anybody maintaining an angularjs app looked over their shoulder with frustration jealousy Envy anger a lot of other feelings I see a lot of people who feel the same way with server components and on one hand I get it if you're working in an old create react app you see how much better things are getting on the other side of the fence and you don't have a good path there that sucks where with hooks it was pretty hard to work in a react app that couldn't adopt hooks some amount server components Do For Better or Worse expect you to use next.js right now or to implement your own much more complex layer that is not an acceptable path for people who are on create react app right now I think the inability to use the new features is being conflated with the inability to interrupt with the old one in my video about why I bet on react I actually show an example where I took a react component from 2014 and rendered it as a server component yes an ancient old create class component before traditional class components I didn't import a helper to backfill the old Behavior but I was able to take a component from 2014 and render it on server in the new model if you initialize a new app you can copy paste over almost all of your old code put a single used client on the top of the route for the most part will still behave and that's magic reacts backwards and forwards compatibility story is the best in the industry it's incredible that you can run code that old successfully against code that is much less old I'm really frustrated about the angular 2 comparisons for that reason because it feels like people don't understand what the problem with the angular 2 move was it wasn't that you struggled to upgrade to angular 2 it's that you had no story of interrupt between them at all and server components our flag you turn on you still use all your old code we're obviously not there yet if you're on create react app but progress is being made and it's a really unfair comparison we do have to talk about performance and production Readiness though I've seen a lot of people saying that server components are slow if you're talking about the dev experience yeah the hot reloading is not as fast as it used to be their focus is on turbo pack and I do hope to see some huge performance wins there but work will be done on my M2 Mac it still hot refreshes in less than a second almost always the initial boot can take a little bit of time but it's not too bad and that is also just the dev experience there's a future where if the solutions are working on don't work we just do some crazy hacks with Veet or individual file builds that will but until we're there it's not something that there's too much to say on it sucks that older machines have a bad Dev experience on big app router apps but it's something they're working really hard on fixing and I trust them to do that but the actual performance once you've deployed it's not just good it's great the speed at which a react app renders the output HTML it's a really weird thing to Benchmark Jack Harrington did a video where he compares the page directory to app router for render performance I have a long video here where I talk about why I don't think that's the best comparison but I do show off in that with my own benchmarks when where the benefits come which is the granular request level ability to Cache some requests and not cache others it makes it so much easier to make your app insanely performant in production and we have seen in order of magnitude difference with how much faster our applications feel and actually get the right data down to our users and when you combine that with the benefits of suspense where you can have some content coming immediately and more content flow in naturally after as part of the same request it's unreal the experience of both the user and the developer and making something that is performant is better than it's ever been and measuring like micro millisecond differences in how how many pages you could render per second is not how you feel these differences especially once you're deploying things serverless at scale so I don't like a lot of the performance arguments that I've heard app router has enabled me to build some of the most performant things I've ever made but what about the production Readiness I see a lot of comments around this like app router isn't actually stable they're just calling it that for marketing it's using an unstable version of react however calling it stable server actions are entirely broken let's go through this one at a time the app router being stable means that the syntax behavior and experience of using it is stable and that's the case maybe the dev experience is slower than it should be they're working on that maybe they'll add more features in the future I'm sure they will maybe the server actions are unstable you don't have to use them I I'm actually only using them on like one app and barely for it to understand the difference between app router and the whole server component ecosystem in that app router's goal was to rethink how we manage routing in our next applications and it has succeeded with flying colors even if you're not using server components and you use client everything the new routing system is so much easier to work with and reason about for complex applications and it's stable all the behaviors as they behave right now will be there and supported some amount for the foreseeable future I'm sure that there are bugs that will be fixed that will cause some breaks for some people but generally speaking the way app router works now is a thing they intend to support and a thing that does work really well I haven't experienced instability I've experienced incompatibility but that is different the app router itself is very stable what about react though if operators using an unstable react version is it really stable well yeah it is because you're not using the unstable react version they are massaging the unstable syntax and API definitions in the new react version into a shape that they expect you to consume and use if you are building your own server rendering model for Server components then yes reacts instability is going to affect you because those apis might change but when next is calling next is app router stable when react underneath isn't that's because if the behavior of react changes next we'll massage that out so we as the developers consuming next don't feel those differences react going from unstable to stable with server components should not affect the way that you build things in next at all that is a very important difference that I don't think is understood well enough the app router itself in the way that we interrupt with it that layer is stable and I know because I've been shipping it for more than six months now and it was not stable when we started and it feels very stable now but a big part of why I adopted this and why I have the opinions I have is I'll be transparent I'm pretty close with her cell I've been chatting with them more and more they obviously are a sponsor of the channel they have no idea making this video they certainly wouldn't have asked me to they probably won't approve half the stuff I said in it anyways I bring this up because I think versel is the victim of a lot of fear uncertainty and doubt that doesn't feel Fair there is a palpable concern that react is being taken over the thing that's really frustrating to me there is that before Versailles involvement react was just meta it was just Facebook and one small team that made every decision that controlled everything that wasn't even funded as well as it should have been and could have been thrown away at any point with versel having like 10 of the core react team working there combined with like another five to ten percent of people who don't work at meta or Facebook it's like 70 to 80 work at meta still 10 don't 10 work at versel it's a very small percentage of the core team that works at versel those people might be really impactful like Sebastian Markovich is an absolute Legend and ACD is obviously really talented as well but that's like the amount of impact is different from the amount of core team and the people at meta who still run most of react still make a lot of the decisions they obviously are building around a lot of Sebastian's Vision but that doesn't mean versel owns the vision in fact means the opposite Sebastian went to versel because they were the better place to execute important parts of his vision which is the server side as react embraced the server more and more working at a company that still uses PHP on the server was not the right call for Sebastian and he went where made the most sense to make the impact he wanted to on react and on web deaf and that's why versel and react are closer it's not because versel is out here trying to evenly take over react it's again kind of the opposite it's reacts core team wants to expand beyond what Facebook and meta intended react to be and to do such they have to go other places and work with other companies and funny enough after trying to work with Shopify for trying to work with remix they're trying to work with many others in the industry The Meta team and the react core team found that versel was the best to work with and understood and embraced the vision better than anyone else hydrogen by Shopify did use server components for a bit and they gave it up because to be fair it was very early and made their lives harder and didn't provide a great experience for the developers they were targeting versel doubled down with app router and that commitment is why the teams are so close vercell was the place where this Vision could be executed on the server side and that's why a lot of this happened obviously this makes the relationship between next and react much closer which has resulted in a lot of fear uncertainty and doubt from people but I don't think it's fair either obviously if you want the best react experience of all of these new features the way to do that is next it's weird that you have to use another framework to get all of the benefits of react but it was also weird you had to use webpack to even chip react in the first place react's always been willing to embrace external dependencies that make it easier to use and benefit from reacts model and that's why things like the eslint rules for react hooks are so important why things like the jsx transpiler and Babel are so important react isn't just react react needs to work with other tools to be valued and for something as complex as server components if you need a framework that is built around these ideas next was the framework that had the most buy-in and the most willingness to try this new thing out it makes a lot of sense that react is best used with next right now I'm excited for a future where the react model for Server components has stabilized enough that we could see more and more alternative spin up the same way we saw webpack Alternatives all target react where we got the es build snowpack what's the what I'm forgetting uh SWR or swc and turbo pack now too this ecosystem of tools formed after react showed how valuable it was to have a bundler that worked with it now that react has shown how powerful it is to work closely with a framework like next I would expect other things like obviously Astro and remix as well as new Frameworks being created by people who work at Astro and people who work on things like Point manuals I know daishi has some cool stuff coming the potential to build new things with these Primitives and new Frameworks around them is so exciting and next.js dog fooding it for us is awesome and Incredibly weirdly generous of them if it wasn't for next falling on the sword here we would have had years upon years of figuring this out many small crappy meta Frameworks spinning up and falling apart and people being stuck on stuff like create react app by embracing a team and framework as stable well-maintained and impactful as next react has now made the initial adoption of something huge way less scary but people are still scared of that adoption because a lot of front end devs are scared of servers this is the final point I wanted to make people think versel's goal here is just to sell servers and I think that's incredibly dumb for so many reasons the biggest of which is simply that you can run way less compute with the new model caching has gotten so much easier that it's incredibly easy to opt out of many calls you had to make before you're actually going to see cheaper bills on your infrastructure using the new model if you take any advantage of the new benefits and behaviors I think versa's goal is very simple make it so easy for full stack web devs to build things well that the slow part is deploying and if they're the best way to deploy boy they win it's always been their focus and I think they're doing a great job at it especially when you see the features that next ads that don't necessarily lock you in more but make deploying the best performance thing easy as hell there's no other solution we're moving from running on node to running on edge is a single export variable you just throw in a route file the relationship between next exports and versel deploying stuff correctly is incredibly powerful but it's not the goal of the new architecture the golden new architecture is to help full stack developers build better things faster and more effectively and also have less server cost because if they succeed at that and this model becomes the way everyone builds things versel will have a much higher adoption rate in both like hobbyist world and in greater industry if you lower the cost of everything else so much the deployments the hard part paying someone to handle that for you makes a lot of sense but again the goal here isn't to sell a bunch of servers it's to help developers be more and more successful knowing that if they are they'll eventually come to their tools this is the model that epic games has used for a long time time where their goal's always been Empower game developers to be as successful as possible so when they work at a big company and they're building a big game they know to lean on epic's tools because they are the ones that understand Game Dev the best that's versa's goal here to be the ones who build and understand web dev and web dev tooling the best and they know if they succeed there that ultimately they will win but this isn't about ramping up how many servers we spin up on versel this is about ramping up how many applications we can deploy how effectively we can deploy them and how much success we can find building with these tools I think versus gotten an unfair rep here and I know I'm gonna all I already can see the comments you're paid by versel they just spend a bunch of money and make you think this do you know how much more money I could make if I took any other sponsor it's hilarious I'm saying this because it's how I feel vercel is making web dev better and they'll make some money doing it but the goal here is to make web dev better it's the same reason they Bots felt their focus is the future of how we built not how many servers they can get one user to deploy on their blog think that's all I have to say about this I'm gonna do a more thorough review of server components in the new future if I already have it out it'll be pinned in the corner I probably don't yet though so what's going to be there instead is a video all about performance in server components because I think it's an important thing to talk about thank you guys as always really appreciate it let me know what you've been thinking about server components thanks as always he starts




## Why Itch.io went down - 20241223
if you're a prolific enough gamer you might have noticed that hiio was down a few days ago the reason is utter chaos hiio has been taken down by original Funko because they used some trash AI powered brand protection software that created some bogus fishing report to our registar who ignored our responses and just disabled the domain they even called his mom yes the hio founder and owner's mom got called because they were so upset about the social media that this is chaos